@lostgradient/cinder 0.9.0 → 0.12.0

package/src/components/invocation-rule-builder/invocation-rule-builder.types.ts

@@ -48,6 +48,27 @@ export type InvocationRule = {
   actions: InvocationRuleAction[];
 };
 
+/**
+ * The value type a condition field represents. Determines which typed value
+ * control renders for that field in conditions-only mode (`mode="conditions"`).
+ * Ignored in full mode, where the condition value is always a free-text input.
+ */
+export type InvocationRuleFieldType = 'string' | 'number' | 'boolean' | 'enum';
+
+/**
+ * A single selectable choice for an `'enum'`-typed field's value, rendered as
+ * a select in conditions-only mode. A flat value/label pair — enum choices do
+ * not nest further.
+ *
+ * @schemaObject
+ */
+export type InvocationRuleValueChoice = {
+  /** The value stored on the condition. */
+  value: string;
+  /** The human-readable label shown in the select. */
+  label: string;
+};
+
 /**
  * An option in a field, operator, or action-target select list.
  *
@@ -58,8 +79,41 @@ export type InvocationRuleOption = {
   value: string;
   /** The human-readable label shown in the select. */
   label: string;
+  /**
+   * The value type this option represents when used as a field option in
+   * conditions-only mode (`mode="conditions"`). Defaults to `'string'` when
+   * omitted. Ignored for operator and action-target options, and ignored
+   * entirely in full mode.
+   */
+  type?: InvocationRuleFieldType;
+  /**
+   * Enum choices for this field's value, rendered as a select in
+   * conditions-only mode when `type` is `'enum'`. Provide these for an enum
+   * field; if omitted or empty, the value select renders with no choices.
+   * Ignored for non-enum field types.
+   */
+  options?: InvocationRuleValueChoice[];
 };
 
+/**
+ * Rendering mode for InvocationRuleBuilder.
+ *
+ * - `'full'` (default) renders both conditions and actions, matching the
+ *   component's original behavior exactly.
+ * - `'conditions'` renders conditions only: action controls are hidden
+ *   entirely, rules never emit action descriptors, the operator set is
+ *   fixed to {@link InvocationRuleConditionsOnlyOperator}, and condition
+ *   value controls are inferred from each field option's `type`.
+ */
+export type InvocationRuleBuilderMode = 'full' | 'conditions';
+
+/**
+ * The fixed operator vocabulary used in conditions-only mode
+ * (`mode="conditions"`). Cinder supplies these five operators with default
+ * labels; the `operatorOptions` prop is not accepted in this mode.
+ */
+export type InvocationRuleConditionsOnlyOperator = 'eq' | 'gt' | 'lt' | 'gte' | 'lte';
+
 /**
  * Describes the change that caused an `onchange` call.
  * Consumers use the type to determine what to persist.
@@ -105,6 +159,34 @@ type InvocationRuleBuilderBaseProps = Omit<
    */
   fieldOptions: InvocationRuleOption[];
 
+  /**
+   * Label for the "Add rule" button. Defaults to "Add rule".
+   */
+  addRuleLabel?: string;
+
+  /**
+   * Label for the "Add condition" button. Defaults to "Add condition".
+   */
+  addConditionLabel?: string;
+
+  /** Accessible label for the entire rule builder region. */
+  label?: string;
+
+  /** Additional CSS classes applied to the root element. */
+  class?: string;
+};
+
+/**
+ * Mode-specific props for `mode="full"` (the default). Behavior and prop
+ * shape are unchanged from before conditions-only mode existed.
+ */
+type InvocationRuleBuilderFullModeProps = {
+  /**
+   * Rendering mode. Omit or pass `'full'` to render both conditions and
+   * actions — the component's original, unchanged behavior.
+   */
+  mode?: 'full';
+
   /**
    * Options for the condition operator selector. Consumer-provided list
    * of operators, e.g. "matches", "is", "is-not", "contains".
@@ -118,61 +200,78 @@ type InvocationRuleBuilderBaseProps = Omit<
   actionOptions: InvocationRuleOption[];
 
   /**
-   * Label for the "Add rule" button. Defaults to "Add rule".
+   * Label for the "Add action" button. Defaults to "Add action".
    */
-  addRuleLabel?: string;
+  addActionLabel?: string;
+};
 
+/**
+ * Mode-specific props for `mode="conditions"`. Actions are not rendered, so
+ * action-related props are not accepted — cinder owns the operator
+ * vocabulary and there is nothing to configure for actions.
+ */
+type InvocationRuleBuilderConditionsOnlyModeProps = {
   /**
-   * Label for the "Add condition" button. Defaults to "Add condition".
+   * Renders conditions only: action controls are hidden entirely and rules
+   * never emit action descriptors.
    */
-  addConditionLabel?: string;
+  mode: 'conditions';
 
   /**
-   * Label for the "Add action" button. Defaults to "Add action".
+   * Not accepted in conditions-only mode. Cinder supplies the fixed
+   * eq/gt/lt/gte/lte operator set internally; see
+   * {@link InvocationRuleConditionsOnlyOperator}.
    */
-  addActionLabel?: string;
+  operatorOptions?: never;
 
-  /** Accessible label for the entire rule builder region. */
-  label?: string;
+  /** Not accepted in conditions-only mode — action controls are not rendered. */
+  actionOptions?: never;
 
-  /** Additional CSS classes applied to the root element. */
-  class?: string;
+  /** Not accepted in conditions-only mode — action controls are not rendered. */
+  addActionLabel?: never;
 };
 
+type InvocationRuleBuilderModeProps =
+  | InvocationRuleBuilderFullModeProps
+  | InvocationRuleBuilderConditionsOnlyModeProps;
+
 type InvocationRuleBuilderChangeHandler = (
   nextRules: InvocationRule[],
   change: InvocationRuleChange,
 ) => void;
 
-export type InvocationRuleBuilderProps =
-  | (InvocationRuleBuilderBaseProps & {
-      /**
-       * Called whenever the user makes any edit. Required for editable runtime
-       * usage because editable controls must commit controlled state changes.
-       * Receives the next rule array (pure, not mutated) and a change descriptor.
-       * Consumer owns persistence, validation, and execution.
-       */
-      onchange: InvocationRuleBuilderChangeHandler;
-
-      /**
-       * When false or omitted, renders editable controls. Editable mode requires
-       * `onchange` so controls cannot become interactive-but-no-op.
-       */
-      readonly?: false;
-    })
-  | (InvocationRuleBuilderBaseProps & {
-      /**
-       * Optional in readonly usage because no edit controls are rendered.
-       * Runtime consumers may still pass it when sharing props between modes.
-       */
-      onchange?: InvocationRuleBuilderChangeHandler;
-
-      /**
-       * When true, renders a readonly summary of each rule instead of editable
-       * controls.
-       */
-      readonly: true;
-    });
+export type InvocationRuleBuilderProps = InvocationRuleBuilderBaseProps &
+  InvocationRuleBuilderModeProps &
+  (
+    | {
+        /**
+         * Called whenever the user makes any edit. Required for editable runtime
+         * usage because editable controls must commit controlled state changes.
+         * Receives the next rule array (pure, not mutated) and a change descriptor.
+         * Consumer owns persistence, validation, and execution.
+         */
+        onchange: InvocationRuleBuilderChangeHandler;
+
+        /**
+         * When false or omitted, renders editable controls. Editable mode requires
+         * `onchange` so controls cannot become interactive-but-no-op.
+         */
+        readonly?: false;
+      }
+    | {
+        /**
+         * Optional in readonly usage because no edit controls are rendered.
+         * Runtime consumers may still pass it when sharing props between modes.
+         */
+        onchange?: InvocationRuleBuilderChangeHandler;
+
+        /**
+         * When true, renders a readonly summary of each rule instead of editable
+         * controls.
+         */
+        readonly: true;
+      }
+  );
 
 /**
  * Cinder-specific schema surface for InvocationRuleBuilder.
@@ -193,17 +292,32 @@ export type InvocationRuleBuilderSchemaProps = {
    */
   fieldOptions: InvocationRuleOption[];
 
+  /**
+   * Rendering mode. Omit or pass `'full'` for the original conditions +
+   * actions behavior; pass `'conditions'` to render conditions only. Not
+   * expressible as a schema-driven discriminant here because JSON Schema
+   * validation of this component is documented, not enforced at runtime
+   * against `operatorOptions`/`actionOptions` presence; see the component
+   * types for the full mode-discriminated prop shape.
+   */
+  mode?: InvocationRuleBuilderMode;
+
   /**
    * Options for the condition operator selector. Consumer-provided list
-   * of operators, e.g. "matches", "is", "is-not", "contains".
+   * of operators, e.g. "matches", "is", "is-not", "contains". Required in
+   * full mode; optional (and ignored) when `mode` is `'conditions'`, since
+   * cinder supplies a fixed operator set in that mode — so a conditions-only
+   * configuration validates without it.
    */
-  operatorOptions: InvocationRuleOption[];
+  operatorOptions?: InvocationRuleOption[];
 
   /**
    * Options for the action target selector. Consumer-provided list of
-   * targets, e.g. review-agent slugs or step identifiers.
+   * targets, e.g. review-agent slugs or step identifiers. Required in full
+   * mode; optional (and ignored) when `mode` is `'conditions'`, since actions
+   * are not rendered — so a conditions-only configuration validates without it.
    */
-  actionOptions: InvocationRuleOption[];
+  actionOptions?: InvocationRuleOption[];
 
   /**
    * Must be true for schema-driven usage because editable mode requires

package/src/components/navigation-bar/navigation-bar.svelte

@@ -208,7 +208,7 @@ function handleKeyDown(event) {
       {@render menuToggle({
         'aria-expanded': (mobileMenuOpen ? 'true' : 'false') as 'true' | 'false',
         'aria-controls': regionId,
-        ...(browser ? { onclick: handleToggle } : {}),
+        onclick: handleToggle,
       })}
     </div>
   {/if}
@@ -224,7 +224,7 @@ function handleKeyDown(event) {
       {@render menuToggle({
         'aria-expanded': (mobileMenuOpen ? 'true' : 'false') as 'true' | 'false',
         'aria-controls': regionId,
-        ...(browser ? { onclick: handleToggle } : {}),
+        onclick: handleToggle,
       })}
     </div>
   {/if}

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",