@lostgradient/cinder 0.2.0 → 0.3.0

package/dist/components/run-step-timeline/run-step-timeline.css

@@ -0,0 +1,215 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  /* ========================================
+   * RUN-STEP-TIMELINE
+   * Ordered async execution rail with per-step status, metadata,
+   * optional progress, and expandable detail panels.
+   * ======================================== */
+
+  .cinder-run-step-timeline {
+    --_cinder-rst-rail-size: 1.5rem;
+    --_cinder-rst-marker-size: 0.875rem;
+    --_cinder-rst-rail-center: 0.6875rem;
+
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  /* ----------------------------------------
+   * List item
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__item {
+    position: relative;
+    padding-bottom: var(--cinder-space-4);
+  }
+
+  .cinder-run-step-timeline__item:last-child {
+    padding-bottom: 0;
+  }
+
+  /* Connector rail line between items */
+  .cinder-run-step-timeline__item::before {
+    content: '';
+    position: absolute;
+    left: var(--_cinder-rst-rail-center);
+    top: 1rem;
+    bottom: 0;
+    width: 1px;
+    background: var(--cinder-border-muted);
+  }
+
+  .cinder-run-step-timeline__item[data-cinder-connector-after='hidden']::before {
+    display: none;
+  }
+
+  /* ----------------------------------------
+   * Event layout: marker column + content column
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__event {
+    display: grid;
+    grid-template-columns: var(--_cinder-rst-rail-size) 1fr;
+    gap: var(--cinder-space-3);
+    align-items: start;
+  }
+
+  /* ----------------------------------------
+   * Marker: StatusDot on the rail
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__marker {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_cinder-rst-rail-size);
+    padding-top: var(--cinder-space-1);
+  }
+
+  /* ----------------------------------------
+   * Content column
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+    min-width: 0;
+  }
+
+  /* ----------------------------------------
+   * Header: step label + status badge
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__header {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-run-step-timeline__label {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+    flex-shrink: 0;
+  }
+
+  /* Running step: label highlighted */
+  .cinder-run-step-timeline__item[data-cinder-status='running'] .cinder-run-step-timeline__label,
+  .cinder-run-step-timeline__item[data-cinder-status='retrying'] .cinder-run-step-timeline__label {
+    color: var(--cinder-text);
+    font-weight: var(--cinder-font-semibold);
+  }
+
+  /* Pending step: label muted */
+  .cinder-run-step-timeline__item[data-cinder-status='pending'] .cinder-run-step-timeline__label,
+  .cinder-run-step-timeline__item[data-cinder-status='skipped'] .cinder-run-step-timeline__label,
+  .cinder-run-step-timeline__item[data-cinder-status='cancelled'] .cinder-run-step-timeline__label {
+    color: var(--cinder-text-muted);
+  }
+
+  /* ----------------------------------------
+   * Progress bar wrapper
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__progress {
+    width: 100%;
+    max-width: 24rem;
+  }
+
+  /* ----------------------------------------
+   * Metadata: start/end/duration/attempts
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__meta {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-1) var(--cinder-space-4);
+  }
+
+  .cinder-run-step-timeline__meta-row {
+    display: flex;
+    gap: var(--cinder-space-1);
+    align-items: baseline;
+  }
+
+  .cinder-run-step-timeline__meta-term {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    font-weight: var(--cinder-font-medium);
+  }
+
+  .cinder-run-step-timeline__meta-term::after {
+    content: ':';
+  }
+
+  .cinder-run-step-timeline__meta-definition {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-subtle);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ----------------------------------------
+   * Expandable detail panels
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    border-inline-start: 2px solid var(--cinder-border-muted);
+    padding-inline-start: var(--cinder-space-3);
+    margin-top: var(--cinder-space-1);
+  }
+
+  .cinder-run-step-timeline__detail-content {
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-subtle);
+    background: var(--cinder-surface-inset);
+    border-radius: var(--cinder-radius-sm);
+    padding: var(--cinder-space-2) var(--cinder-space-3);
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+    overflow-x: auto;
+  }
+
+  /* ----------------------------------------
+   * Per-step body slot
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__body {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  /* ----------------------------------------
+   * Focus ring (not applicable to the root list, but included for
+   * completeness if the component is ever given an interactive element)
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-run-step-timeline:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+    }
+
+    /* Ensure connector lines are visible in high-contrast mode */
+    .cinder-run-step-timeline__item::before {
+      background: ButtonText;
+    }
+  }
+}

package/dist/components/run-step-timeline/run-step-timeline.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

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

@@ -0,0 +1,129 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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=6AAF1A045F60091F64756E2164756E21

package/dist/components/run-step-timeline/run-step-timeline.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @cinder
+ * @category data-display
+ * @status stable
+ * @purpose Ordered step-by-step execution rail that visualizes async run state with per-step status, durations, retries, optional progress, and expandable detail panels.
+ * @tag timeline
+ * @tag progress
+ * @tag execution
+ * @useWhen Displaying the live or completed state of a multi-step async operation: CI jobs, workflow runs, import pipelines, or deployments.
+ * @useWhen Showing a sequence where one step is currently active and prior steps have streamed in over time.
+ * @avoidWhen Guiding users through an interactive wizard where they choose what to do next — use steps instead.
+ * @avoidWhen Showing a flat timestamp-first event log without structured step state — use timeline instead.
+ * @related timeline, steps, status-dot, progress, badge, collapsible
+ */
+export type { RunStep, RunStepDetail, RunStepStatus, RunStepTimelineProps, } from './run-step-timeline.types.ts';
+import type { RunStepTimelineProps } from './run-step-timeline.types.ts';
+declare const RunStepTimeline: import("svelte").Component<RunStepTimelineProps, {}, "">;
+type RunStepTimeline = ReturnType<typeof RunStepTimeline>;
+export default RunStepTimeline;

package/dist/components/run-step-timeline/run-step-timeline.types.d.ts

@@ -0,0 +1,111 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Generic execution state of a single run step.
+ *
+ * These names are intentionally domain-agnostic. Consumers map their
+ * own domain state (e.g. Weft, CI, queue) onto this union; the
+ * component does not encode product-specific status vocabulary.
+ *
+ * - `pending`   — not yet started; waiting in the queue.
+ * - `running`   — currently executing; only one step should be running.
+ * - `succeeded` — completed successfully.
+ * - `failed`    — completed with a terminal error.
+ * - `cancelled` — was stopped before it could complete.
+ * - `skipped`   — bypassed intentionally (e.g. conditional branch).
+ * - `retrying`  — a prior attempt failed; a new attempt is in progress.
+ */
+export type RunStepStatus = 'pending' | 'running' | 'succeeded' | 'failed' | 'cancelled' | 'skipped' | 'retrying';
+/**
+ * A single expandable detail section attached to a step.
+ * Rendered inside a Collapsible panel.
+ */
+export type RunStepDetail = {
+    /** Stable identity for this detail panel. */
+    id: string;
+    /** Trigger label rendered on the Collapsible header. */
+    label: string;
+    /** Pre-formatted content shown inside the panel. */
+    content: string;
+};
+/**
+ * One step in a RunStepTimeline.
+ */
+export type RunStep = {
+    /** Stable identity; used as the keyed list identity. */
+    id: string;
+    /** Display label for this step. */
+    label: string;
+    /** Generic execution state. */
+    status: RunStepStatus;
+    /**
+     * ISO datetime string for when this step started.
+     * Absent for pending steps.
+     */
+    startTime?: string | undefined;
+    /**
+     * ISO datetime string for when this step ended.
+     * Absent for pending and running steps.
+     */
+    endTime?: string | undefined;
+    /**
+     * Human-readable duration string, e.g. "1m 23s".
+     * Absent for pending steps.
+     */
+    duration?: string | undefined;
+    /**
+     * Number of attempts made so far, including any retries.
+     * Displayed when greater than 1.
+     */
+    attemptCount?: number | undefined;
+    /**
+     * Optional determinate progress value between 0 and `progressMax`.
+     * When supplied, a Progress bar is rendered for the step.
+     */
+    progress?: number | undefined;
+    /**
+     * Maximum value for the progress bar. Defaults to 100.
+     */
+    progressMax?: number | undefined;
+    /**
+     * Expandable detail panels (logs, payloads, errors) shown inline.
+     */
+    details?: RunStepDetail[] | undefined;
+};
+/**
+ * Props for the RunStepTimeline component.
+ *
+ * Renders an ordered list of execution steps with per-step status,
+ * durations, retry counts, optional progress indicators, and expandable
+ * detail panels for logs, payloads, and errors.
+ */
+export type RunStepTimelineProps = Omit<HTMLAttributes<HTMLOListElement>, 'class' | 'children'> & {
+    /**
+     * Ordered list of steps to render.
+     * @schemaObject
+     */
+    steps: RunStep[];
+    /**
+     * Accessible label for the timeline list.
+     * Used as `aria-label` when `aria-labelledby` is absent.
+     */
+    label?: string | undefined;
+    /**
+     * Optional per-step body content rendered after the step metadata.
+     */
+    children?: Snippet<[RunStep]> | undefined;
+    /** Additional CSS classes applied to the root element. */
+    class?: string | undefined;
+};
+/** Schema generator surface for RunStepTimeline — excludes snippet props. */
+export interface RunStepTimelineSchemaProps {
+    /**
+     * Ordered list of steps to render.
+     * @schemaObject
+     */
+    steps: RunStep[];
+    /** Accessible label for the timeline list. */
+    label?: string | undefined;
+    /** Additional CSS classes applied to the root element. */
+    class?: string | undefined;
+}

package/dist/components/run-step-timeline/run-step-timeline.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

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

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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=67DABDE9CD721E3564756E2164756E21

package/dist/components/schema-form/index.d.ts

@@ -0,0 +1,6 @@
+import './schema-form.css';
+import SchemaForm from './schema-form.svelte';
+export default SchemaForm;
+export { readSchemaFormData } from './schema-form-validation.ts';
+export type { SchemaFormOutput, SchemaFormProps, SchemaFormSchema, SchemaFormStandardSchema, SchemaFormSubmitHandler, } from './schema-form.types.ts';
+export { SchemaForm };