@lostgradient/cinder 0.2.0 → 0.3.0

package/dist/server/components/run-step-timeline/index.js

@@ -0,0 +1,414 @@
+import { createRequire } from "node:module";
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/run-step-timeline/run-step-timeline.svelte
+import * as $6 from "svelte/internal/server";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/badge/badge.svelte
+import * as $ from "svelte/internal/server";
+function Badge($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      variant = "neutral",
+      size = "md",
+      mono = false,
+      class: customClassName,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    $$renderer2.push(`<span${$.attributes({
+      class: $.clsx(classNames("cinder-badge", customClassName)),
+      "data-cinder-variant": variant,
+      "data-cinder-size": size,
+      "data-cinder-mono": mono ? "" : undefined,
+      ...rest
+    })}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></span>`);
+  });
+}
+
+// src/components/collapsible/collapsible.svelte
+import * as $3 from "svelte/internal/server";
+import { slide } from "svelte/transition";
+
+// src/utilities/use-reduced-motion.svelte.ts
+import * as $2 from "svelte/internal/server";
+import { MediaQuery } from "svelte/reactivity";
+function useReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return { current: false };
+  }
+  const query = new MediaQuery("(prefers-reduced-motion: reduce)", false);
+  return {
+    get current() {
+      return query.current;
+    }
+  };
+}
+
+// src/components/collapsible/collapsible.svelte
+function Collapsible($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const autoId = $3.props_id($$renderer2);
+    let {
+      trigger,
+      children,
+      open = false,
+      onToggle,
+      disabled = false,
+      idBase,
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const SLIDE_MS = 200;
+    const motion = useReducedMotion();
+    const slideMs = $3.derived(() => motion.current ? 0 : SLIDE_MS);
+    const baseId = $3.derived(() => idBase ?? autoId);
+    const headerId = $3.derived(() => `${baseId()}-header`);
+    const panelId = $3.derived(() => `${baseId()}-panel`);
+    function handleClick() {
+      if (disabled)
+        return;
+      const next = !open;
+      open = next;
+      onToggle?.(next);
+    }
+    $$renderer2.push(`<div${$3.attributes({
+      ...rest,
+      class: $3.clsx(classNames("cinder-collapsible", className)),
+      "data-cinder-expanded": open ? "" : undefined,
+      "data-cinder-disabled": disabled ? "" : undefined
+    })}><button type="button"${$3.attr("id", headerId())} class="cinder-collapsible__trigger"${$3.attr("aria-expanded", open)}${$3.attr("aria-controls", open ? panelId() : undefined)}${$3.attr("disabled", disabled, true)}><span class="cinder-collapsible__label">`);
+    if (typeof trigger === "string") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`${$3.escape(trigger)}`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      trigger($$renderer2, { open, disabled });
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--></span> <svg class="cinder-collapsible__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button> `);
+    if (open) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${$3.attr("id", panelId())} role="region"${$3.attr("aria-labelledby", headerId())} class="cinder-collapsible__panel"><div class="cinder-collapsible__panel-inner">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></div></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+    $3.bind_props($$props, { open });
+  });
+}
+
+// src/components/progress/progress.svelte
+import * as $4 from "svelte/internal/server";
+
+// ../../node_modules/esm-env/false.js
+var false_default = false;
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/progress/progress.svelte
+function Progress($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value,
+      max = 100,
+      variant = "bar",
+      size = "md",
+      label,
+      ariaLabel,
+      ariaLabelledby,
+      class: className
+    } = $$props;
+    const effectiveMax = $4.derived(() => Number.isFinite(max) && max > 0 ? max : undefined);
+    const isIndeterminate = $4.derived(() => value === undefined || !Number.isFinite(value) || effectiveMax() === undefined);
+    const clampedValue = $4.derived(() => isIndeterminate() ? undefined : Math.max(0, Math.min(effectiveMax(), value)));
+    const percent = $4.derived(() => clampedValue() === undefined ? undefined : Math.round(clampedValue() / effectiveMax() * 100));
+    const valueText = $4.derived(() => label ?? (isIndeterminate() ? "Loading" : `${percent()}%`));
+    if (variant === "ring") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${$4.attr_class($4.clsx(classNames("cinder-progress", "cinder-progress--ring", className)))} role="progressbar"${$4.attr("aria-label", ariaLabel)}${$4.attr("aria-labelledby", ariaLabelledby)}${$4.attr("aria-valuemin", 0)}${$4.attr("aria-valuemax", effectiveMax())}${$4.attr("aria-valuenow", clampedValue())}${$4.attr("aria-valuetext", valueText())}${$4.attr("data-cinder-size", size)}${$4.attr("data-cinder-indeterminate", isIndeterminate() || undefined)}><svg viewBox="0 0 36 36" class="cinder-progress__svg" aria-hidden="true"><circle class="cinder-progress__track" cx="18" cy="18" r="16"></circle>`);
+      if (!isIndeterminate()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<circle class="cinder-progress__fill" cx="18" cy="18" r="16"${$4.attr_style("", { "--_cinder-progress-percent": percent() })}></circle>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<circle class="cinder-progress__fill cinder-progress__fill--indeterminate" cx="18" cy="18" r="16"></circle>`);
+      }
+      $$renderer2.push(`<!--]--></svg></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${$4.attr_class($4.clsx(classNames("cinder-progress", "cinder-progress--bar", className)))} role="progressbar"${$4.attr("aria-label", ariaLabel)}${$4.attr("aria-labelledby", ariaLabelledby)}${$4.attr("aria-valuemin", 0)}${$4.attr("aria-valuemax", effectiveMax())}${$4.attr("aria-valuenow", clampedValue())}${$4.attr("aria-valuetext", valueText())}${$4.attr("data-cinder-size", size)}${$4.attr("data-cinder-indeterminate", isIndeterminate() || undefined)}><div class="cinder-progress__track">`);
+      if (!isIndeterminate()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-progress__fill"${$4.attr_style("", { width: `${$4.stringify(percent())}%` })}></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<div class="cinder-progress__fill cinder-progress__fill--indeterminate"></div>`);
+      }
+      $$renderer2.push(`<!--]--></div></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+// src/components/status-dot/status-dot.svelte
+import * as $5 from "svelte/internal/server";
+function Status_dot($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      status,
+      label,
+      showLabel = true,
+      size = "md",
+      class: className,
+      "aria-label": ariaLabel,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const normalizedAriaLabel = $5.derived(() => ariaLabel?.trim() ? ariaLabel.trim() : undefined);
+    const normalizedLabel = $5.derived(() => label?.trim() ? label.trim() : undefined);
+    const hasVisibleLabel = $5.derived(() => showLabel && normalizedLabel() !== undefined);
+    const resolvedAriaLabel = $5.derived(() => normalizedAriaLabel() ?? normalizedLabel() ?? status);
+    $$renderer2.push(`<span${$5.attributes({
+      ...rest,
+      class: $5.clsx(classNames("cinder-status-dot", className)),
+      "data-cinder-status": status,
+      "data-cinder-size": size,
+      role: "img",
+      "aria-label": resolvedAriaLabel()
+    })}><span class="cinder-status-dot__indicator" aria-hidden="true"></span> `);
+    if (hasVisibleLabel()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-status-dot__label">${$5.escape(normalizedLabel())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></span>`);
+  });
+}
+
+// src/components/run-step-timeline/run-step-timeline.svelte
+function Run_step_timeline($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      steps,
+      label,
+      class: className,
+      children,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const resolvedAriaLabel = $6.derived(() => ariaLabelledby === undefined && ariaLabel === undefined ? label : ariaLabel);
+    function statusDotStatus(status) {
+      switch (status) {
+        case "succeeded":
+          return "success";
+        case "failed":
+          return "error";
+        case "running":
+          return "online";
+        case "retrying":
+          return "warning";
+        case "cancelled":
+          return "offline";
+        case "skipped":
+          return "neutral";
+        case "pending":
+          return "pending";
+      }
+    }
+    function statusLabel(status) {
+      switch (status) {
+        case "pending":
+          return "Pending";
+        case "running":
+          return "Running";
+        case "succeeded":
+          return "Succeeded";
+        case "failed":
+          return "Failed";
+        case "cancelled":
+          return "Cancelled";
+        case "skipped":
+          return "Skipped";
+        case "retrying":
+          return "Retrying";
+      }
+    }
+    function badgeVariant(status) {
+      switch (status) {
+        case "succeeded":
+          return "success";
+        case "failed":
+          return "danger";
+        case "running":
+          return "info";
+        case "retrying":
+          return "warning";
+        case "cancelled":
+          return "neutral";
+        case "skipped":
+          return "neutral";
+        case "pending":
+          return "neutral";
+      }
+    }
+    function isTerminal(status) {
+      return status === "succeeded" || status === "failed" || status === "cancelled" || status === "skipped";
+    }
+    function hasProgress(step) {
+      return step.progress !== undefined && (step.status === "running" || step.status === "retrying");
+    }
+    function metadataItems(step) {
+      const items = [];
+      if (step.startTime !== undefined) {
+        items.push({ term: "Started", definition: step.startTime });
+      }
+      if (step.endTime !== undefined) {
+        items.push({ term: "Ended", definition: step.endTime });
+      }
+      if (step.duration !== undefined) {
+        items.push({ term: "Duration", definition: step.duration });
+      }
+      if (step.attemptCount !== undefined && step.attemptCount > 1) {
+        items.push({ term: "Attempts", definition: String(step.attemptCount) });
+      }
+      return items;
+    }
+    $$renderer2.push(`<ol${$6.attributes({
+      ...rest,
+      class: $6.clsx(classNames("cinder-run-step-timeline", className)),
+      "aria-label": resolvedAriaLabel(),
+      "aria-labelledby": ariaLabelledby
+    })}><!--[-->`);
+    const each_array = $6.ensure_array_like(steps);
+    for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+      let step = each_array[index];
+      const isLast = index === steps.length - 1;
+      const isCurrent = step.status === "running" || step.status === "retrying";
+      const terminal = isTerminal(step.status);
+      const metadata = metadataItems(step);
+      $$renderer2.push(`<li class="cinder-run-step-timeline__item"${$6.attr("data-cinder-status", step.status)}${$6.attr("data-cinder-terminal", terminal ? "" : undefined)}${$6.attr("data-cinder-connector-after", isLast ? "hidden" : "visible")}${$6.attr("aria-current", isCurrent ? "step" : undefined)}><div class="cinder-run-step-timeline__event"><span class="cinder-run-step-timeline__marker" aria-hidden="true" inert="">`);
+      Status_dot($$renderer2, {
+        status: statusDotStatus(step.status),
+        label: statusLabel(step.status),
+        showLabel: false,
+        size: "md"
+      });
+      $$renderer2.push(`<!----></span> <div class="cinder-run-step-timeline__content"><div class="cinder-run-step-timeline__header"><span class="cinder-run-step-timeline__label">${$6.escape(step.label)}</span> `);
+      Badge($$renderer2, {
+        variant: badgeVariant(step.status),
+        size: "xs",
+        children: ($$renderer3) => {
+          $$renderer3.push(`<!---->${$6.escape(statusLabel(step.status))}`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----> `);
+      if (step.attemptCount !== undefined && step.attemptCount > 1) {
+        $$renderer2.push("<!--[0-->");
+        Badge($$renderer2, {
+          variant: "neutral",
+          size: "xs",
+          mono: true,
+          children: ($$renderer3) => {
+            $$renderer3.push(`<!---->attempt ${$6.escape(step.attemptCount)}`);
+          },
+          $$slots: { default: true }
+        });
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div> `);
+      if (hasProgress(step)) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-run-step-timeline__progress">`);
+        Progress($$renderer2, {
+          value: step.progress ?? 0,
+          max: step.progressMax ?? 100,
+          size: "sm",
+          ariaLabel: `${step.label} progress`
+        });
+        $$renderer2.push(`<!----></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (metadata.length > 0) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<dl class="cinder-run-step-timeline__meta"><!--[-->`);
+        const each_array_1 = $6.ensure_array_like(metadata);
+        for (let $$index = 0, $$length2 = each_array_1.length;$$index < $$length2; $$index++) {
+          let item = each_array_1[$$index];
+          $$renderer2.push(`<div class="cinder-run-step-timeline__meta-row"><dt class="cinder-run-step-timeline__meta-term">${$6.escape(item.term)}</dt> <dd class="cinder-run-step-timeline__meta-definition">${$6.escape(item.definition)}</dd></div>`);
+        }
+        $$renderer2.push(`<!--]--></dl>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (step.details && step.details.length > 0) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-run-step-timeline__details"><!--[-->`);
+        const each_array_2 = $6.ensure_array_like(step.details);
+        for (let $$index_1 = 0, $$length2 = each_array_2.length;$$index_1 < $$length2; $$index_1++) {
+          let detail = each_array_2[$$index_1];
+          Collapsible($$renderer2, {
+            trigger: detail.label,
+            children: ($$renderer3) => {
+              $$renderer3.push(`<pre class="cinder-run-step-timeline__detail-content">${$6.escape(detail.content)}</pre>`);
+            },
+            $$slots: { default: true }
+          });
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-run-step-timeline__body">`);
+        children($$renderer2, step);
+        $$renderer2.push(`<!----></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div></div></li>`);
+    }
+    $$renderer2.push(`<!--]--></ol>`);
+  });
+}
+
+// src/components/run-step-timeline/index.ts
+var run_step_timeline_default = Run_step_timeline;
+export {
+  run_step_timeline_default as default,
+  Run_step_timeline as RunStepTimeline
+};
+
+//# debugId=C1ECA33F44ECB87B64756E2164756E21

package/dist/server/components/run-step-timeline/run-step-timeline.schema.js

@@ -0,0 +1,110 @@
+import { createRequire } from "node:module";
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/run-step-timeline/run-step-timeline.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    steps: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Stable identity; used as the keyed list identity."
+          },
+          label: {
+            type: "string",
+            description: "Display label for this step."
+          },
+          status: {
+            enum: ["pending", "running", "succeeded", "failed", "cancelled", "skipped", "retrying"],
+            description: "Generic execution state."
+          },
+          startTime: {
+            type: "string",
+            description: `ISO datetime string for when this step started.
+Absent for pending steps.`
+          },
+          endTime: {
+            type: "string",
+            description: `ISO datetime string for when this step ended.
+Absent for pending and running steps.`
+          },
+          duration: {
+            type: "string",
+            description: `Human-readable duration string, e.g. "1m 23s".
+Absent for pending steps.`
+          },
+          attemptCount: {
+            type: "number",
+            description: `Number of attempts made so far, including any retries.
+Displayed when greater than 1.`
+          },
+          progress: {
+            type: "number",
+            description: "Optional determinate progress value between 0 and `progressMax`.\nWhen supplied, a Progress bar is rendered for the step."
+          },
+          progressMax: {
+            type: "number",
+            description: "Maximum value for the progress bar. Defaults to 100."
+          },
+          details: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                id: {
+                  type: "string",
+                  description: "Stable identity for this detail panel."
+                },
+                label: {
+                  type: "string",
+                  description: "Trigger label rendered on the Collapsible header."
+                },
+                content: {
+                  type: "string",
+                  description: "Pre-formatted content shown inside the panel."
+                }
+              },
+              additionalProperties: false,
+              required: ["content", "id", "label"]
+            },
+            description: "Expandable detail panels (logs, payloads, errors) shown inline."
+          }
+        },
+        additionalProperties: false,
+        required: ["id", "label", "status"]
+      },
+      description: "Ordered list of steps to render."
+    },
+    label: {
+      type: "string",
+      description: "Accessible label for the timeline list."
+    },
+    class: {
+      type: "string",
+      description: "Additional CSS classes applied to the root element."
+    }
+  },
+  additionalProperties: false,
+  required: ["steps"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "children",
+        reason: "function-or-snippet",
+        description: "Optional per-step body content rendered after the step metadata."
+      }
+    ]
+  }
+};
+var run_step_timeline_schema_default = schema;
+export {
+  run_step_timeline_schema_default as default
+};
+
+//# debugId=B2E7BF5FF0AB8A1964756E2164756E21

package/dist/server/components/run-step-timeline/run-step-timeline.variables.js

@@ -0,0 +1,12 @@
+import { createRequire } from "node:module";
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/run-step-timeline/run-step-timeline.variables.ts
+var variables = [];
+var run_step_timeline_variables_default = variables;
+export {
+  run_step_timeline_variables_default as default
+};
+
+//# debugId=D49692B790447FF464756E2164756E21