@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/run-step-timeline/run-step-timeline.svelte

@@ -0,0 +1,377 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+import Badge from '../badge/badge.svelte';
+import Collapsible from '../collapsible/collapsible.svelte';
+import Link from '../link/link.svelte';
+import Progress from '../progress/progress.svelte';
+import StatusDot from '../status-dot/status-dot.svelte';
+const MAX_NESTED_STEP_DEPTH = 3;
+let { steps, label, class: className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest } = $props();
+const resolvedAriaLabel = $derived(ariaLabelledby === undefined && ariaLabel === undefined ? label : ariaLabel);
+const renderedSteps = $derived(flattenRunSteps(steps));
+// Map generic RunStepStatus onto StatusDot status tokens.
+function statusDotStatus(status) {
+    switch (status) {
+        case 'succeeded':
+            return 'success';
+        case 'failed':
+            return 'danger';
+        case 'running':
+            return 'online';
+        case 'retrying':
+            return 'warning';
+        case 'waiting_approval':
+            return 'accent';
+        case 'cancelled':
+            return 'offline';
+        case 'skipped':
+            return 'neutral';
+        case 'pending':
+            return 'pending';
+    }
+}
+// Human-readable label for the StatusDot accessible name.
+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';
+        case 'waiting_approval':
+            return 'Waiting approval';
+    }
+}
+function badgeVariant(status) {
+    switch (status) {
+        case 'succeeded':
+            return 'success';
+        case 'failed':
+            return 'danger';
+        case 'running':
+            return 'info';
+        case 'retrying':
+            return 'warning';
+        case 'waiting_approval':
+            return 'accent';
+        case 'cancelled':
+            return 'neutral';
+        case 'skipped':
+            return 'neutral';
+        case 'pending':
+            return 'neutral';
+    }
+}
+// Whether this status is a terminal state (no further changes expected).
+function isTerminal(status) {
+    return (status === 'succeeded' ||
+        status === 'failed' ||
+        status === 'cancelled' ||
+        status === 'skipped');
+}
+function isCurrent(status) {
+    return status === 'running' || status === 'retrying' || status === 'waiting_approval';
+}
+// Whether this step has a progress bar to show.
+function hasProgress(step) {
+    return step.progress !== undefined && isCurrent(step.status);
+}
+// Metadata items for a step, as term/definition pairs.
+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;
+}
+function actionsCountLabel(actionsCount) {
+    return actionsCount === 1 ? '1 action' : `${actionsCount} actions`;
+}
+function hiddenNestedStepLabel(hiddenStepCount) {
+    return hiddenStepCount === 1
+        ? '1 nested step hidden'
+        : `${hiddenStepCount} nested steps hidden`;
+}
+function safeStepLinkHref(href) {
+    const trimmedHref = href.trim();
+    if (trimmedHref === '')
+        return undefined;
+    if (/[\u0000-\u001F\u007F]/.test(trimmedHref))
+        return undefined;
+    if (trimmedHref.includes('\\'))
+        return undefined;
+    const leadingSeparators = trimmedHref.match(/^[\\/]+/)?.[0] ?? '';
+    if (leadingSeparators.length > 1)
+        return undefined;
+    if (/^[A-Za-z][A-Za-z\d+.-]*:/.test(trimmedHref)) {
+        try {
+            const parsedUrl = new URL(trimmedHref);
+            return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:'
+                ? trimmedHref
+                : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return trimmedHref;
+}
+function flattenRunSteps(steps) {
+    const rows = [];
+    appendRunStepRows(rows, steps, 0, '');
+    const currentRowIndex = deepestCurrentStepIndex(rows);
+    return rows.map((row, index) => ({
+        ...row,
+        connectorAfter: rows[index + 1] === undefined || (rows[index + 1]?.depth ?? 0) < row.depth
+            ? 'hidden'
+            : 'visible',
+        ariaCurrent: index === currentRowIndex,
+    }));
+}
+function appendRunStepRows(rows, steps, depth, pathPrefix) {
+    for (const step of steps) {
+        const pathKey = nestedStepPathKey(pathPrefix, step.id);
+        rows.push({ kind: 'step', step, depth, pathKey });
+        if (step.children && step.children.length > 0) {
+            if (depth < MAX_NESTED_STEP_DEPTH) {
+                appendRunStepRows(rows, step.children, depth + 1, pathKey);
+            }
+            else {
+                const hiddenSummary = summarizeNestedRunSteps(step.children);
+                rows.push({
+                    kind: 'depth-limit',
+                    depth,
+                    pathKey: `${pathKey}/__cinder-depth-limit`,
+                    hiddenStepCount: hiddenSummary.count,
+                    hiddenCurrent: hiddenSummary.hasCurrent,
+                });
+            }
+        }
+    }
+}
+function nestedStepPathKey(pathPrefix, stepId) {
+    const encodedStepId = escapeStepPathSegment(stepId);
+    return pathPrefix === '' ? encodedStepId : `${pathPrefix}/${encodedStepId}`;
+}
+function escapeStepPathSegment(stepId) {
+    return stepId.replaceAll('%', '%25').replaceAll('/', '%2F');
+}
+function summarizeNestedRunSteps(steps) {
+    let count = 0;
+    let hasCurrent = false;
+    const stack = [...steps];
+    while (stack.length > 0) {
+        const step = stack.pop();
+        if (step === undefined)
+            continue;
+        count += 1;
+        if (isCurrent(step.status))
+            hasCurrent = true;
+        const children = step.children;
+        if (children) {
+            for (let index = children.length - 1; index >= 0; index -= 1) {
+                const child = children[index];
+                if (child)
+                    stack.push(child);
+            }
+        }
+    }
+    return { count, hasCurrent };
+}
+function deepestCurrentStepIndex(rows) {
+    let currentIndex = -1;
+    let currentDepth = -1;
+    rows.forEach((row, index) => {
+        const rowCurrentDepth = row.kind === 'depth-limit' && row.hiddenCurrent
+            ? row.depth + 1
+            : row.kind === 'step' && isCurrent(row.step.status)
+                ? row.depth
+                : -1;
+        if (rowCurrentDepth > currentDepth) {
+            currentIndex = index;
+            currentDepth = rowCurrentDepth;
+        }
+    });
+    return currentIndex;
+}
+</script>
+
+<ol
+  {...rest}
+  class={classNames('cinder-run-step-timeline', className)}
+  aria-label={resolvedAriaLabel}
+  aria-labelledby={ariaLabelledby}
+>
+  {#each renderedSteps as row (row.pathKey)}
+    {#if row.kind === 'depth-limit'}
+      <li
+        class="cinder-run-step-timeline__item"
+        data-cinder-status="depth-limit"
+        data-cinder-depth={row.depth}
+        data-cinder-path={row.pathKey}
+        data-cinder-connector-after={row.connectorAfter}
+        data-cinder-depth-limit
+        aria-current={row.ariaCurrent ? 'step' : undefined}
+        style:--_cinder-rst-depth={row.depth}
+      >
+        <div class="cinder-run-step-timeline__event">
+          <span class="cinder-run-step-timeline__marker" aria-hidden="true" inert>
+            <StatusDot status="neutral" label="Nested steps hidden" showLabel={false} size="md" />
+          </span>
+
+          <div class="cinder-run-step-timeline__content">
+            <div class="cinder-run-step-timeline__header">
+              <span class="cinder-run-step-timeline__label">
+                {hiddenNestedStepLabel(row.hiddenStepCount)}
+              </span>
+              <Badge
+                class="cinder-run-step-timeline__status"
+                variant="neutral"
+                size="xs"
+                aria-label="Status: Nested child steps hidden"
+              >
+                Depth cap
+              </Badge>
+            </div>
+            <p class="cinder-run-step-timeline__body">
+              Additional child-workflow steps are hidden because the timeline depth cap was reached.
+            </p>
+          </div>
+        </div>
+      </li>
+    {:else}
+      {@const step = row.step}
+      {@const terminal = isTerminal(step.status)}
+      {@const metadata = metadataItems(step)}
+      <li
+        class="cinder-run-step-timeline__item"
+        data-cinder-status={step.status}
+        data-cinder-depth={row.depth}
+        data-cinder-path={row.pathKey}
+        data-cinder-terminal={terminal ? '' : undefined}
+        data-cinder-connector-after={row.connectorAfter}
+        aria-current={row.ariaCurrent ? 'step' : undefined}
+        style:--_cinder-rst-depth={row.depth}
+      >
+        <div class="cinder-run-step-timeline__event">
+          <!-- Marker: StatusDot on the rail -->
+          <span class="cinder-run-step-timeline__marker" aria-hidden="true" inert>
+            <StatusDot
+              status={statusDotStatus(step.status)}
+              label={statusLabel(step.status)}
+              showLabel={false}
+              size="md"
+            />
+          </span>
+
+          <!-- Step content -->
+          <div class="cinder-run-step-timeline__content">
+            <!-- Header row: label + status badge -->
+            <div class="cinder-run-step-timeline__header">
+              <span class="cinder-run-step-timeline__label">{step.label}</span>
+              {#if step.link}
+                {@const safeLinkHref = safeStepLinkHref(step.link.href)}
+                {#if safeLinkHref}
+                  <Link href={safeLinkHref} class="cinder-run-step-timeline__link">
+                    {step.link.label}
+                  </Link>
+                {:else}
+                  <span
+                    class="cinder-run-step-timeline__link cinder-run-step-timeline__link--unsafe"
+                  >
+                    {step.link.label}
+                  </span>
+                {/if}
+              {/if}
+              <Badge
+                class="cinder-run-step-timeline__status"
+                variant={badgeVariant(step.status)}
+                size="xs"
+                aria-label={`Status: ${statusLabel(step.status)}`}
+              >
+                {statusLabel(step.status)}
+              </Badge>
+              {#if step.attemptCount !== undefined && step.attemptCount > 1}
+                <Badge variant="neutral" size="xs" mono>attempt {step.attemptCount}</Badge>
+              {/if}
+              {#if step.actionsCount !== undefined && step.actionsCount > 0}
+                <Badge variant="neutral" size="xs" mono
+                  >{actionsCountLabel(step.actionsCount)}</Badge
+                >
+              {/if}
+            </div>
+
+            <!-- Progress bar (only shown for current statuses with explicit progress) -->
+            {#if hasProgress(step)}
+              <div class="cinder-run-step-timeline__progress">
+                <Progress
+                  value={step.progress ?? 0}
+                  max={step.progressMax ?? 100}
+                  size="sm"
+                  ariaLabel={`${step.label} progress`}
+                />
+              </div>
+            {/if}
+
+            <!-- Metadata: start/end/duration/attempts -->
+            {#if metadata.length > 0}
+              <dl class="cinder-run-step-timeline__meta">
+                {#each metadata as item (item.term)}
+                  <div class="cinder-run-step-timeline__meta-row">
+                    <dt class="cinder-run-step-timeline__meta-term">{item.term}</dt>
+                    <dd class="cinder-run-step-timeline__meta-definition">{item.definition}</dd>
+                  </div>
+                {/each}
+              </dl>
+            {/if}
+
+            <!-- Expandable details (logs, payloads, errors) -->
+            {#if step.details && step.details.length > 0}
+              <div class="cinder-run-step-timeline__details">
+                <!-- No idBase: let each Collapsible mint its own collision-free
+                   id via $props.id(). Passing detail.id here would reuse a
+                   consumer-supplied value that is only unique within a step, so
+                   two steps with a detail id like "logs" would produce duplicate
+                   DOM ids and cross-wired aria-controls. -->
+                {#each step.details as detail (detail.id)}
+                  <Collapsible trigger={detail.label}>
+                    <pre class="cinder-run-step-timeline__detail-content">{detail.content}</pre>
+                  </Collapsible>
+                {/each}
+              </div>
+            {/if}
+
+            <!-- Optional per-step body slot -->
+            {#if children}
+              <div class="cinder-run-step-timeline__body">
+                {@render children(step)}
+              </div>
+            {/if}
+          </div>
+        </div>
+      </li>
+    {/if}
+  {/each}
+</ol>

package/src/components/run-step-timeline/run-step-timeline.types.ts

@@ -0,0 +1,310 @@
+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 within its lane.
+ * - `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.
+ * - `waiting_approval` — paused on required approval; can continue afterward.
+ */
+export type RunStepStatus =
+  | 'pending'
+  | 'running'
+  | 'succeeded'
+  | 'failed'
+  | 'cancelled'
+  | 'skipped'
+  | 'retrying'
+  | 'waiting_approval';
+
+/**
+ * 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;
+};
+
+/**
+ * Navigable reference attached to a step.
+ * Rendered with cinder's Link component.
+ */
+export type RunStepLink = {
+  /** Destination URL for the step link. */
+  href: string;
+  /** Visible text for the step link. */
+  label: 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;
+  /**
+   * Number of actions associated with this step.
+   * Displayed when greater than 0.
+   */
+  actionsCount?: 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;
+  /**
+   * Optional link to logs, traces, or a step detail route.
+   */
+  link?: RunStepLink | undefined;
+  /**
+   * Nested child-workflow steps rendered as indented lanes.
+   */
+  children?: RunStep[] | undefined;
+};
+
+/**
+ * Schema generator surface for one top-level step.
+ * Public `RunStep` stays recursive; this finite shape keeps JSON Schema generation bounded.
+ * @schemaObject
+ */
+export type RunStepTimelineSchemaStep = {
+  /** 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;
+  /**
+   * Number of actions associated with this step.
+   * Displayed when greater than 0.
+   */
+  actionsCount?: 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;
+  /**
+   * Optional link to logs, traces, or a step detail route.
+   */
+  link?: RunStepLink | undefined;
+  /**
+   * Schema-bounded nested child-workflow steps.
+   */
+  children?: RunStepTimelineSchemaChildStep[] | undefined;
+};
+
+/**
+ * Schema generator surface for one nested child step rendered at depth 1.
+ * @schemaObject
+ */
+export type RunStepTimelineSchemaChildStep = {
+  /** 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. */
+  startTime?: string | undefined;
+  /** ISO datetime string for when this step ended. */
+  endTime?: string | undefined;
+  /** Human-readable duration string, e.g. "1m 23s". */
+  duration?: string | undefined;
+  /** Number of attempts made so far, including any retries. */
+  attemptCount?: number | undefined;
+  /** Number of actions associated with this step. */
+  actionsCount?: number | undefined;
+  /** Optional determinate progress value between 0 and `progressMax`. */
+  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;
+  /** Optional link to logs, traces, or a step detail route. */
+  link?: RunStepLink | undefined;
+  /**
+   * Nested child-workflow steps rendered at depth 2.
+   */
+  children?: RunStepTimelineSchemaGrandchildStep[] | undefined;
+};
+
+/**
+ * Schema generator surface for one nested child step rendered at depth 2.
+ * @schemaObject
+ */
+export type RunStepTimelineSchemaGrandchildStep = {
+  /** 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. */
+  startTime?: string | undefined;
+  /** ISO datetime string for when this step ended. */
+  endTime?: string | undefined;
+  /** Human-readable duration string, e.g. "1m 23s". */
+  duration?: string | undefined;
+  /** Number of attempts made so far, including any retries. */
+  attemptCount?: number | undefined;
+  /** Number of actions associated with this step. */
+  actionsCount?: number | undefined;
+  /** Optional determinate progress value between 0 and `progressMax`. */
+  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;
+  /** Optional link to logs, traces, or a step detail route. */
+  link?: RunStepLink | undefined;
+  /**
+   * Nested child-workflow steps rendered at depth 3.
+   */
+  children?: RunStepTimelineSchemaGreatGrandchildStep[] | undefined;
+};
+
+/**
+ * Schema generator surface for one nested child step rendered at depth 3.
+ * @schemaObject
+ */
+export type RunStepTimelineSchemaGreatGrandchildStep = {
+  /** 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. */
+  startTime?: string | undefined;
+  /** ISO datetime string for when this step ended. */
+  endTime?: string | undefined;
+  /** Human-readable duration string, e.g. "1m 23s". */
+  duration?: string | undefined;
+  /** Number of attempts made so far, including any retries. */
+  attemptCount?: number | undefined;
+  /** Number of actions associated with this step. */
+  actionsCount?: number | undefined;
+  /** Optional determinate progress value between 0 and `progressMax`. */
+  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;
+  /** Optional link to logs, traces, or a step detail route. */
+  link?: RunStepLink | 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: RunStepTimelineSchemaStep[];
+  /** Accessible label for the timeline list. */
+  label?: string | undefined;
+  /** Additional CSS classes applied to the root element. */
+  class?: string | undefined;
+}

package/src/components/run-step-timeline/run-step-timeline.variables.ts

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

package/src/components/schema-form/index.ts

@@ -0,0 +1,13 @@
+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,
+  SchemaFormSubmitHandler,
+} from './schema-form.types.ts';
+export { SchemaForm };