@lostgradient/cinder 0.8.0 → 0.11.0

package/src/components/payload-inspector/payload-inspector.svelte

@@ -4,16 +4,10 @@ export {};
 
 <script lang="ts">
 import Badge from '../badge/badge.svelte';
-import CodeBlock from '../code-block/code-block.svelte';
 import CopyButton from '../copy-button/copy-button.svelte';
-import DescriptionList from '../description-list/description-list.svelte';
 import JsonViewer from '../json-viewer/json-viewer.svelte';
-import Tabs from '../tabs/tabs.svelte';
-import TabList from '../tab-list/tab-list.svelte';
-import Tab from '../tab/tab.svelte';
-import TabPanel from '../tab-panel/tab-panel.svelte';
 import { classNames } from '../../utilities/class-names.ts';
-let { value, truncated = false, maxBytes = 1_048_576, meta, format, parse, activeView = $bindable('summary'), label = 'Payload inspector', class: className, ...rest } = $props();
+let { value, truncated = false, maxBytes = 1_048_576, parse, label = 'Payload inspector', class: className, ...rest } = $props();
 function shouldParseString(raw) {
     const trimmed = raw.trim();
     if (/^[{\["]/.test(trimmed))
@@ -66,27 +60,6 @@ const byteLabel = $derived.by(() => {
         return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 });
-// --------------------------------------------------------------------------
-// Formatted raw text for the raw view.
-//
-// `format` controls how the raw view *displays* the payload — it is a
-// serializer (e.g. sorted keys, custom indentation) not a redaction hook.
-// Redaction should happen upstream: pass the already-redacted object as
-// `value` so every view (Summary, Tree, Raw) sees the redacted form.
-// --------------------------------------------------------------------------
-const rawText = $derived.by(() => {
-    if (!parseResult.ok) {
-        // Show the original string if we have one (so the user can see what failed to parse).
-        return typeof value === 'string' ? value : '';
-    }
-    try {
-        const formatter = format ?? ((v) => JSON.stringify(v, null, 2));
-        return formatter(parsedValue) ?? '';
-    }
-    catch {
-        return typeof value === 'string' ? value : '';
-    }
-});
 // True when the in-memory value cannot be round-tripped through JSON.stringify
 // (e.g. circular references, BigInt). Only fires for non-string values that
 // parsed successfully — string parse errors are handled by parseResult.ok.
@@ -101,115 +74,33 @@ const unserializable = $derived.by(() => {
         return true;
     }
 });
-// --------------------------------------------------------------------------
-// Summary metadata items for DescriptionList.
-// --------------------------------------------------------------------------
-const summaryItems = $derived.by(() => {
-    const items = [];
-    items.push({ term: 'Size', definition: byteLabel });
-    if (meta?.contentType) {
-        items.push({ term: 'Content type', definition: meta.contentType });
-    }
-    if (meta?.source) {
-        items.push({ term: 'Source', definition: meta.source });
-    }
-    if (meta?.timestamp) {
-        // Attempt to format as a locale string; fall back to raw string.
-        let displayTime = meta.timestamp;
-        try {
-            displayTime = new Date(meta.timestamp).toLocaleString();
-        }
-        catch {
-            // leave as-is
-        }
-        items.push({ term: 'Timestamp', definition: displayTime });
-    }
-    return items;
-});
-const valueKind = $derived.by(() => {
-    if (!parseResult.ok)
-        return 'invalid';
-    const v = parsedValue;
-    if (v === null)
-        return 'null';
-    if (v === undefined)
-        return 'undefined';
-    if (typeof v === 'boolean')
-        return 'boolean';
-    if (typeof v === 'number')
-        return 'number';
-    if (typeof v === 'string')
-        return 'string';
-    if (Array.isArray(v))
-        return 'array';
-    return 'object';
-});
-// --------------------------------------------------------------------------
-// Whether the value is a primitive (shown inline in the summary).
-// --------------------------------------------------------------------------
-const isPrimitive = $derived(valueKind === 'null' ||
-    valueKind === 'undefined' ||
-    valueKind === 'boolean' ||
-    valueKind === 'number' ||
-    valueKind === 'string');
 const isEmpty = $derived(parsedValue === undefined && value === undefined);
-// --------------------------------------------------------------------------
-// Copy targets for the header copy buttons.
-//
-// copy-raw  → "payload as received": the original string verbatim if value
-//             was a string, otherwise compact JSON (one-liner, no spaces).
-//             This is what you would paste into a message bus or log query.
-//
-// copy-formatted → pretty-printed JSON of the parsed value (2-space indent).
-//                  Ignores the `format` prop so it is always valid JSON.
-//                  This is what you would read or diff in an editor.
-// --------------------------------------------------------------------------
-const copyRawText = $derived.by(() => {
+const isPrimitive = $derived(parsedValue === null ||
+    typeof parsedValue === 'boolean' ||
+    typeof parsedValue === 'number' ||
+    typeof parsedValue === 'string');
+// Copy target: the original string verbatim whenever the payload itself was
+// a string — including a JSON-encoded string primitive like '"hello"',
+// which parses to the bare string `hello` but should still copy as the
+// original input, not the unquoted parsed result. Everything else copies
+// as pretty-printed JSON of the parsed value.
+const copyText = $derived.by(() => {
+    if (!parseResult.ok)
+        return typeof value === 'string' ? value : '';
     if (typeof value === 'string')
         return value;
-    if (!parseResult.ok)
-        return '';
-    try {
-        return JSON.stringify(parsedValue) ?? '';
-    }
-    catch {
-        return '';
-    }
-});
-const copyFormattedText = $derived.by(() => {
-    if (!parseResult.ok)
-        return rawText;
     try {
         return JSON.stringify(parsedValue, null, 2) ?? '';
     }
     catch {
-        return rawText;
+        return '';
     }
 });
-const canCopyFormatted = $derived(!isEmpty && parseResult.ok && !unserializable);
-const canCopyRaw = $derived(!isEmpty && (typeof value === 'string' || canCopyFormatted));
-// --------------------------------------------------------------------------
-// Helper: badge variant for the type tag.
-// --------------------------------------------------------------------------
-function kindVariant(kind) {
-    if (kind === 'invalid')
-        return 'danger';
-    if (kind === 'null' || kind === 'undefined')
-        return 'warning';
-    if (kind === 'object' || kind === 'array')
-        return 'info';
-    return 'neutral';
-}
-// --------------------------------------------------------------------------
-// Computed active view binding — keep activeView in sync with $bindable.
-// Because Tabs uses bind:value internally, we forward the $bindable to it
-// directly. The Tabs bind creates a two-way link that keeps activeView
-// updated when the user switches tabs, and respects external changes too.
-// --------------------------------------------------------------------------
+const canCopy = $derived(!isEmpty && copyText !== '');
 </script>
 
-<section {...rest} class={classNames('cinder-payload-inspector', className)} aria-label={label}>
-  <!-- Header bar: label, size, copy actions -->
+<div {...rest} class={classNames('cinder-payload-inspector', className)}>
+  <!-- Header bar: label, size, copy action -->
   <div class="cinder-payload-inspector__header">
     <span class="cinder-payload-inspector__label">{label}</span>
     <div class="cinder-payload-inspector__header-actions">
@@ -221,124 +112,40 @@ function kindVariant(kind) {
       {#if truncated}
         <Badge variant="warning" size="xs">Truncated</Badge>
       {/if}
-      {#if canCopyFormatted}
+      {#if canCopy}
         <CopyButton
-          value={copyFormattedText}
-          label="Copy formatted"
-          copiedLabel="Formatted copied"
-          title="Copy formatted payload"
-          iconOnly
-        />
-      {/if}
-      {#if canCopyRaw}
-        <CopyButton
-          value={copyRawText}
-          label="Copy raw"
-          copiedLabel="Raw copied"
-          title="Copy raw payload"
+          value={copyText}
+          label={`Copy ${label}`}
+          copiedLabel="Copied"
+          title={`Copy ${label}`}
           iconOnly
         />
       {/if}
     </div>
   </div>
 
-  <!-- Tab switcher: Summary / Tree / Raw -->
-  <div class="cinder-payload-inspector__tabs">
-    <Tabs bind:value={activeView}>
-      <TabList label="Inspector views">
-        <Tab value="summary">Summary</Tab>
-        <Tab value="tree">Tree</Tab>
-        <Tab value="raw">Raw</Tab>
-      </TabList>
-
-      <!-- Summary panel -->
-      <TabPanel value="summary">
-        <div class="cinder-payload-inspector__panel">
-          {#if isEmpty}
-            <div class="cinder-payload-inspector__empty" role="status">No payload</div>
-          {/if}
-          {#if !isEmpty}
-            <div class="cinder-payload-inspector__summary">
-              <div class="cinder-payload-inspector__summary-badges">
-                <Badge variant={kindVariant(valueKind)} size="xs" mono>{valueKind}</Badge>
-                {#if truncated}
-                  <Badge variant="warning" size="xs">Truncated</Badge>
-                {/if}
-              </div>
-              {#if summaryItems.length > 0}
-                <DescriptionList items={summaryItems} variant="two-column" />
-              {/if}
-              {#if !parseResult.ok}
-                <div
-                  class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning"
-                  role="alert"
-                >
-                  Parse error: {parseResult.error}
-                </div>
-              {/if}
-              {#if parseResult.ok && isPrimitive}
-                <div class="cinder-payload-inspector__summary-value">
-                  <span class="cinder-payload-inspector__summary-value-label">Value</span>
-                  <span class="cinder-payload-inspector__primitive">{String(parsedValue)}</span>
-                </div>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      </TabPanel>
-
-      <!-- Tree panel -->
-      <TabPanel value="tree">
-        <div class="cinder-payload-inspector__panel">
-          {#if isEmpty}
-            <div class="cinder-payload-inspector__empty" role="status">No payload</div>
-          {/if}
-          {#if !isEmpty && !parseResult.ok}
-            <div
-              class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning"
-              role="alert"
-            >
-              Cannot render tree: {parseResult.error}
-            </div>
-          {/if}
-          {#if !isEmpty && parseResult.ok && unserializable}
-            <div class="cinder-payload-inspector__notice" role="status">
-              This value can't be serialized as JSON (it may contain circular references or BigInt
-              values).
-            </div>
-          {/if}
-          {#if !isEmpty && parseResult.ok && !unserializable}
-            <JsonViewer value={parsedValue} {maxBytes} />
-          {/if}
-        </div>
-      </TabPanel>
-
-      <!-- Raw panel -->
-      <TabPanel value="raw">
-        <div class="cinder-payload-inspector__panel cinder-payload-inspector__panel--code">
-          {#if isEmpty}
-            <div class="cinder-payload-inspector__empty" role="status">No payload</div>
-          {/if}
-          {#if !isEmpty && truncated}
-            <div class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning">
-              This payload has been truncated by the producer. The raw view shows only the received
-              portion.
-            </div>
-          {/if}
-          {#if !isEmpty && unserializable}
-            <div class="cinder-payload-inspector__notice" role="status">
-              This value can't be serialized as JSON (it may contain circular references or BigInt
-              values).
-            </div>
-          {/if}
-          {#if !isEmpty && !unserializable}
-            <!-- highlight={false} is an absolute off-switch: no Shiki import,
-                 guaranteed-escaped plaintext. Consumers who want highlighting can
-                 pass a `format` function and swap in a custom view. -->
-            <CodeBlock code={rawText} highlight={false} class="cinder-payload-inspector__raw" />
-          {/if}
-        </div>
-      </TabPanel>
-    </Tabs>
+  <div class="cinder-payload-inspector__panel">
+    {#if isEmpty}
+      <div class="cinder-payload-inspector__empty" role="status">No payload</div>
+    {:else if !parseResult.ok}
+      <div
+        class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning"
+        role="alert"
+      >
+        Parse error: {parseResult.error}
+      </div>
+      {#if typeof value === 'string'}
+        <pre class="cinder-payload-inspector__primitive">{value}</pre>
+      {/if}
+    {:else if unserializable}
+      <div class="cinder-payload-inspector__notice" role="status">
+        This value can't be serialized as JSON (it may contain circular references or BigInt
+        values).
+      </div>
+    {:else if isPrimitive}
+      <pre class="cinder-payload-inspector__primitive">{String(parsedValue)}</pre>
+    {:else}
+      <JsonViewer value={parsedValue} {maxBytes} />
+    {/if}
   </div>
-</section>
+</div>

package/src/components/payload-inspector/payload-inspector.types.ts

@@ -1,22 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
 
-/** Active view tab for the inspector. */
-export type PayloadInspectorView = 'summary' | 'tree' | 'raw';
-
-/**
- * Structured metadata about the payload shown in the summary view.
- *
- * @schemaObject
- */
-export type PayloadInspectorMeta = {
-  /** Content type or serializer label, e.g. "application/json" or "Protobuf". */
-  contentType?: string;
-  /** Optional source label, e.g. a workflow name, activity name, or endpoint path. */
-  source?: string;
-  /** Optional ISO 8601 timestamp string rendered in the summary. */
-  timestamp?: string;
-};
-
 /** Schema-facing payload value. Kept permissive to match the runtime `unknown` prop. */
 export type PayloadInspectorSchemaValue = unknown;
 
@@ -33,29 +16,15 @@ export type PayloadInspectorProps = Omit<HTMLAttributes<HTMLElement>, 'class' |
   value?: unknown;
   /**
    * When true, the payload has been truncated by the producer (e.g. because it
-   * exceeded a wire size limit). The inspector renders a truncation badge in the
-   * summary and a notice above the raw view.
+   * exceeded a wire size limit). The inspector renders a truncation badge in
+   * the header.
    */
   truncated?: boolean;
   /**
    * Maximum byte size before the tree view is replaced with an oversize
-   * placeholder. Defaults to 1,048,576 (1 MB). Does not affect the raw view.
+   * placeholder. Defaults to 1,048,576 (1 MB).
    */
   maxBytes?: number;
-  /**
-   * Structured metadata shown in the summary panel. Pass contentType, source,
-   * and/or timestamp to populate the description list rows.
-   */
-  meta?: PayloadInspectorMeta;
-  /**
-   * Custom serializer for the Raw view display text. Receives the parsed value
-   * and must return a string. Defaults to JSON.stringify with 2-space
-   * indentation. Use this to customize key ordering, indentation, or
-   * alternative serialization formats. Does not affect the Summary or Tree
-   * views, or the copy buttons. For redaction, transform the value upstream and
-   * pass the already-redacted value as `value`.
-   */
-  format?: (value: unknown) => string;
   /**
    * Custom parser applied when `value` is a string. Receives the raw string
    * and must return a parsed value or throw. Defaults to JSON.parse. Use this
@@ -63,13 +32,7 @@ export type PayloadInspectorProps = Omit<HTMLAttributes<HTMLElement>, 'class' |
    */
   parse?: (raw: string) => unknown;
   /**
-   * Initially active view tab. Defaults to "summary". Bind to control
-   * the active tab from outside.
-   */
-  activeView?: PayloadInspectorView;
-  /**
-   * Label for the inspector region, used as the accessible name for the
-   * containing section. Defaults to "Payload inspector".
+   * Visible header label for the inspector. Defaults to "Payload inspector".
    */
   label?: string;
   /** Additional CSS classes applied to the root element. */
@@ -79,8 +42,8 @@ export type PayloadInspectorProps = Omit<HTMLAttributes<HTMLElement>, 'class' |
 /**
  * Cinder-specific schema surface for PayloadInspector.
  *
- * Parser and formatter callbacks are documented but marked unsupported because
- * functions cannot be represented as JSON Schema controls.
+ * The parser callback is documented but marked unsupported because functions
+ * cannot be represented as JSON Schema controls.
  */
 export type PayloadInspectorSchemaProps = {
   /**
@@ -94,28 +57,17 @@ export type PayloadInspectorSchemaProps = {
   value?: PayloadInspectorSchemaValue;
   /**
    * When true, the payload has been truncated by the producer (e.g. because it
-   * exceeded a wire size limit). The inspector renders a truncation badge in the
-   * summary and a notice above the raw view.
+   * exceeded a wire size limit). The inspector renders a truncation badge in
+   * the header.
    */
   truncated?: boolean;
   /**
    * Maximum byte size before the tree view is replaced with an oversize
-   * placeholder. Defaults to 1,048,576 (1 MB). Does not affect the raw view.
+   * placeholder. Defaults to 1,048,576 (1 MB).
    */
   maxBytes?: number;
   /**
-   * Structured metadata shown in the summary panel. Pass contentType, source,
-   * and/or timestamp to populate the description list rows.
-   */
-  meta?: PayloadInspectorMeta;
-  /**
-   * Initially active view tab. Defaults to "summary". Bind to control
-   * the active tab from outside.
-   */
-  activeView?: PayloadInspectorView;
-  /**
-   * Label for the inspector region, used as the accessible name for the
-   * containing section. Defaults to "Payload inspector".
+   * Visible header label for the inspector. Defaults to "Payload inspector".
    */
   label?: string;
   /** Additional CSS classes applied to the root element. */

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

@@ -4,13 +4,21 @@ import RunStepTimeline from './run-step-timeline.svelte';
 export default RunStepTimeline;
 export type {
   RunStep,
+  RunStepBranchGroup,
+  RunStepBranchLane,
+  RunStepBranchLaneOutcome,
   RunStepDetail,
   RunStepLink,
   RunStepStatus,
+  RunStepTimelineEntry,
   RunStepTimelineProps,
+  RunStepTimelineSchemaBranchGroup,
+  RunStepTimelineSchemaBranchLane,
   RunStepTimelineSchemaChildStep,
+  RunStepTimelineSchemaEntry,
   RunStepTimelineSchemaGrandchildStep,
   RunStepTimelineSchemaGreatGrandchildStep,
+  RunStepTimelineSchemaLaneStep,
   RunStepTimelineSchemaProps,
   RunStepTimelineSchemaStep,
 } from './run-step-timeline.types.ts';

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+import Collapsible from '../collapsible/collapsible.svelte';
+let { initialOpen, triggerAriaLabel, class: className, trigger, children, } = $props();
+// Seed the disclosure state exactly once, from the group's initial auto-open
+// decision. Binding `open` directly to a value derived from live step status
+// (the collapsible seeds *and* re-syncs from an un-`bind:`-ed `open` prop) would
+// slam the group shut the moment its active lane finished — overriding the
+// reader's own toggle. Owning the state locally via `bind:open` keeps
+// `collapsed`/`collapseThreshold` as documented *initial* behavior while leaving
+// the group freely user-togglable for the rest of its life.
+let open = $state(initialOpen);
+</script>
+
+<Collapsible bind:open {trigger} {triggerAriaLabel} class={className}>
+  {@render children()}
+</Collapsible>

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

@@ -212,6 +212,130 @@
     color: var(--cinder-text-muted);
   }
 
+  /* ----------------------------------------
+   * Rewound steps: speculatively executed, then unwound. Struck-through and
+   * de-emphasized but still inspectable (details/collapsibles keep working).
+   * The "Rewound" badge carries the state as text so it is never color-only.
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__item[data-cinder-rewound] .cinder-run-step-timeline__label {
+    text-decoration: line-through;
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-run-step-timeline__item[data-cinder-rewound] .cinder-run-step-timeline__marker {
+    opacity: 0.55;
+  }
+
+  .cinder-run-step-timeline__item[data-cinder-rewound] .cinder-run-step-timeline__meta {
+    opacity: 0.7;
+  }
+
+  /* ----------------------------------------
+   * Compensation steps: inset beneath their forward step with a dashed
+   * reversal connector. The "Compensates <step>" badge names the relationship.
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__item[data-cinder-compensation] {
+    --_cinder-rst-compensation-inset: var(--cinder-space-5);
+
+    padding-inline-start: var(--_cinder-rst-compensation-inset);
+  }
+
+  .cinder-run-step-timeline__item[data-cinder-compensation]::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: calc(var(--_cinder-rst-depth-offset) + var(--_cinder-rst-rail-center));
+    inset-block-start: -0.5rem;
+    inline-size: var(--cinder-space-5);
+    block-size: 1.5rem;
+    border-inline-start: 1px dashed var(--cinder-border-strong);
+    border-block-end: 1px dashed var(--cinder-border-strong);
+    border-end-start-radius: var(--cinder-radius-md);
+    pointer-events: none;
+  }
+
+  /* ----------------------------------------
+   * Branch / coordination groups: N parallel sub-lanes with won/lost/settled
+   * outcomes. Winner emphasized, losers muted — driven by tokens.
+   * ---------------------------------------- */
+
+  .cinder-run-step-timeline__branch {
+    min-width: 0;
+  }
+
+  .cinder-run-step-timeline__branch-heading {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-run-step-timeline__lanes {
+    list-style: none;
+    margin: var(--cinder-space-2) 0 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-run-step-timeline__lane {
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-md);
+    padding: var(--cinder-space-3);
+    background: var(--cinder-surface-inset);
+    min-width: 0;
+  }
+
+  .cinder-run-step-timeline__lane-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cinder-space-2);
+    margin-block-end: var(--cinder-space-2);
+  }
+
+  .cinder-run-step-timeline__lane-label {
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    color: var(--cinder-text);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .cinder-run-step-timeline__lane-steps {
+    margin: 0;
+  }
+
+  /* Winner: emphasized border + full-strength text. */
+  .cinder-run-step-timeline__lane[data-cinder-outcome='won'] {
+    border-color: var(--cinder-success);
+    border-inline-start-width: 3px;
+  }
+
+  /* Loser: muted via a muted border and lane label — not a blanket opacity, so
+   * step text, links, detail triggers, and focus rings keep full contrast. The
+   * "Lost" outcome badge carries the outcome as text. */
+  .cinder-run-step-timeline__lane[data-cinder-outcome='lost'] {
+    border-color: var(--cinder-border-muted);
+  }
+
+  .cinder-run-step-timeline__lane[data-cinder-outcome='lost']
+    .cinder-run-step-timeline__lane-label {
+    color: var(--cinder-text-muted);
+  }
+
+  /* Settled: neutral, no competitive emphasis. */
+  .cinder-run-step-timeline__lane[data-cinder-outcome='settled'] {
+    border-color: var(--cinder-border);
+  }
+
+  /* Still racing: accent edge to signal in-flight. */
+  .cinder-run-step-timeline__lane[data-cinder-outcome='racing'] {
+    border-color: var(--cinder-accent);
+    border-inline-start-width: 3px;
+  }
+
   /* ----------------------------------------
    * Focus ring (not applicable to the root list, but included for
    * completeness if the component is ever given an interactive element)

package/src/components/run-step-timeline/run-step-timeline.examples.json

@@ -9,12 +9,30 @@
       "description": "A multi-step async run with pending, running, and succeeded steps.",
       "code": "<script lang=\"ts\">\n  import { RunStepTimeline } from '@lostgradient/cinder/run-step-timeline';\n  import type { RunStep } from '@lostgradient/cinder/run-step-timeline';\n\n  const steps: RunStep[] = [\n    {\n      id: 'validate',\n      label: 'Validate configuration',\n      status: 'succeeded',\n      startTime: '2026-06-01T11:00:00Z',\n      endTime: '2026-06-01T11:01:30Z',\n      duration: '1m 30s',\n    },\n    {\n      id: 'build',\n      label: 'Build Docker image',\n      status: 'running',\n      startTime: '2026-06-01T11:02:00Z',\n      progress: 40,\n    },\n    {\n      id: 'deploy',\n      label: 'Deploy to staging',\n      status: 'pending',\n    },\n  ];\n</script>\n\n<RunStepTimeline {steps} label=\"Deployment run\" />\n"
     },
+    {
+      "id": "branch-group",
+      "title": "Branch group with a winning lane",
+      "description": "A speculative race across three parallel deploy candidates. The winning lane is emphasized and the losers are muted, with the group outcome summarized as text.",
+      "code": "<script lang=\"ts\">\n  import { RunStepTimeline } from '@lostgradient/cinder/run-step-timeline';\n  import type { RunStepTimelineEntry } from '@lostgradient/cinder/run-step-timeline';\n\n  const steps: RunStepTimelineEntry[] = [\n    {\n      id: 'plan',\n      label: 'Plan rollout',\n      status: 'succeeded',\n      startTime: '2026-06-01T09:00:00Z',\n      endTime: '2026-06-01T09:00:04Z',\n      duration: '4s',\n    },\n    {\n      kind: 'branch',\n      id: 'race',\n      label: 'Race deploy candidates',\n      lanes: [\n        {\n          id: 'us-east',\n          label: 'us-east-1',\n          outcome: 'won',\n          steps: [\n            {\n              id: 'ue-deploy',\n              label: 'Deploy to us-east-1',\n              status: 'succeeded',\n              duration: '38s',\n            },\n            { id: 'ue-health', label: 'Health check', status: 'succeeded', duration: '3s' },\n          ],\n        },\n        {\n          id: 'eu-west',\n          label: 'eu-west-1',\n          outcome: 'lost',\n          steps: [\n            {\n              id: 'ew-deploy',\n              label: 'Deploy to eu-west-1',\n              status: 'succeeded',\n              duration: '52s',\n            },\n            { id: 'ew-cancel', label: 'Cancelled after us-east-1 won', status: 'cancelled' },\n          ],\n        },\n        {\n          id: 'ap-south',\n          label: 'ap-south-1',\n          outcome: 'lost',\n          steps: [{ id: 'as-deploy', label: 'Deploy to ap-south-1', status: 'cancelled' }],\n        },\n      ],\n    },\n    {\n      id: 'promote',\n      label: 'Promote winning region',\n      status: 'running',\n      startTime: '2026-06-01T09:01:10Z',\n      progress: 45,\n    },\n  ];\n</script>\n\n<RunStepTimeline {steps} label=\"Speculative deploy run\" />\n"
+    },
     {
       "id": "failed-run",
       "title": "Failed run with error details",
       "description": "A completed run where one step failed after retries, with expandable error output and environment info.",
       "code": "<script lang=\"ts\">\n  import { RunStepTimeline } from '@lostgradient/cinder/run-step-timeline';\n  import type { RunStep } from '@lostgradient/cinder/run-step-timeline';\n\n  const steps: RunStep[] = [\n    {\n      id: 'lint',\n      label: 'Lint source files',\n      status: 'succeeded',\n      startTime: '2026-06-01T10:00:00Z',\n      endTime: '2026-06-01T10:00:22Z',\n      duration: '22s',\n    },\n    {\n      id: 'typecheck',\n      label: 'Type-check',\n      status: 'succeeded',\n      startTime: '2026-06-01T10:00:23Z',\n      endTime: '2026-06-01T10:00:51Z',\n      duration: '28s',\n    },\n    {\n      id: 'test',\n      label: 'Run unit tests',\n      status: 'failed',\n      startTime: '2026-06-01T10:00:52Z',\n      endTime: '2026-06-01T10:05:10Z',\n      duration: '4m 18s',\n      attemptCount: 2,\n      details: [\n        {\n          id: 'test-error',\n          label: 'Error output',\n          content:\n            'AssertionError: expected 1 to equal 2\\n  at src/math.test.ts:12:5\\n  at test (bun:test/runner.ts:88)',\n        },\n        {\n          id: 'test-env',\n          label: 'Environment',\n          content: 'NODE_ENV=test\\nCI=true\\nBUN_VERSION=1.2.0',\n        },\n      ],\n    },\n    {\n      id: 'publish',\n      label: 'Publish artifacts',\n      status: 'cancelled',\n    },\n  ];\n</script>\n\n<RunStepTimeline {steps} label=\"CI run — failed\" />\n"
     },
+    {
+      "id": "rewound-speculation",
+      "title": "Rewound speculative step",
+      "description": "A step that was speculatively executed and then unwound after a conflict. It renders struck-through and de-emphasized but stays inspectable, and announces its rewound state as text.",
+      "code": "<script lang=\"ts\">\n  import { RunStepTimeline } from '@lostgradient/cinder/run-step-timeline';\n  import type { RunStepTimelineEntry } from '@lostgradient/cinder/run-step-timeline';\n\n  const steps: RunStepTimelineEntry[] = [\n    {\n      id: 'read',\n      label: 'Read current inventory',\n      status: 'succeeded',\n      duration: '2s',\n    },\n    {\n      id: 'reserve',\n      label: 'Reserve stock (speculative)',\n      status: 'succeeded',\n      rewound: true,\n      duration: '1s',\n      details: [\n        {\n          id: 'reason',\n          label: 'Why it was unwound',\n          content:\n            'A concurrent order won the reservation. This speculative branch was rolled back before commit.',\n        },\n      ],\n    },\n    {\n      id: 'retry',\n      label: 'Re-read inventory and reserve',\n      status: 'running',\n      progress: 30,\n    },\n  ];\n</script>\n\n<RunStepTimeline {steps} label=\"Speculative reservation\" />\n"
+    },
+    {
+      "id": "saga-compensation",
+      "title": "Saga compensation",
+      "description": "A saga where a later step compensates (reverses) an earlier forward step by id. The compensating step renders inset beneath its forward step with a dashed reversal connector.",
+      "code": "<script lang=\"ts\">\n  import { RunStepTimeline } from '@lostgradient/cinder/run-step-timeline';\n  import type { RunStepTimelineEntry } from '@lostgradient/cinder/run-step-timeline';\n\n  const steps: RunStepTimelineEntry[] = [\n    {\n      id: 'charge',\n      label: 'Charge customer card',\n      status: 'succeeded',\n      duration: '1s',\n    },\n    {\n      id: 'reserve-seat',\n      label: 'Reserve seat',\n      status: 'failed',\n      duration: '2s',\n      details: [\n        {\n          id: 'err',\n          label: 'Error',\n          content: 'Seat 14C was taken before the reservation committed.',\n        },\n      ],\n    },\n    {\n      id: 'refund',\n      label: 'Refund customer card',\n      status: 'succeeded',\n      compensates: 'charge',\n      duration: '1s',\n    },\n  ];\n</script>\n\n<RunStepTimeline {steps} label=\"Booking saga\" />\n"
+    },
     {
       "id": "workflow-run",
       "title": "Temporal child workflow with approval wait",