@lostgradient/cinder 0.9.0 → 0.12.0

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

@@ -103,12 +103,96 @@ export type RunStep = {
    * Optional link to logs, traces, or a step detail route.
    */
   link?: RunStepLink | undefined;
+  /**
+   * Marks a step that was speculatively executed and then unwound (rolled
+   * back). Orthogonal to `status`: the step keeps its real terminal status
+   * underneath, but renders struck-through and de-emphasized while staying
+   * inspectable. A rewound step announces its unwound state to assistive
+   * technology in addition to its status.
+   */
+  rewound?: boolean | undefined;
+  /**
+   * Id of the forward step that this step compensates (reverses), as in a
+   * saga rollback. When set, the step renders inset beneath its forward step
+   * with a dashed reversal connector. The referenced id should be a sibling
+   * step's `id`; an unmatched id renders the step in place without inset.
+   */
+  compensates?: string | undefined;
   /**
    * Nested child-workflow steps rendered as indented lanes.
    */
   children?: RunStep[] | undefined;
 };
 
+/**
+ * Outcome of a single sub-lane within a {@link RunStepBranchGroup}.
+ *
+ * - `won`     — this lane produced the committed result; emphasized.
+ * - `lost`    — this lane was superseded by the winner; muted.
+ * - `settled` — this lane completed without a competitive winner/loser
+ *               distinction (e.g. all lanes were kept). Neutral emphasis.
+ *
+ * Omit the outcome entirely while a race is still in flight.
+ */
+export type RunStepBranchLaneOutcome = 'won' | 'lost' | 'settled';
+
+/**
+ * One parallel sub-lane inside a {@link RunStepBranchGroup}. Each lane is an
+ * ordered sequence of steps that executed concurrently with its siblings.
+ */
+export type RunStepBranchLane = {
+  /** Stable identity; used as the keyed list identity within the group. */
+  id: string;
+  /** Optional display label for the lane (e.g. the candidate or strategy name). */
+  label?: string | undefined;
+  /**
+   * Competitive outcome for the lane. Drives winner emphasis / loser muting.
+   * Omit while the branch is still racing.
+   */
+  outcome?: RunStepBranchLaneOutcome | undefined;
+  /** Ordered steps that ran within this lane. */
+  steps: RunStep[];
+};
+
+/**
+ * A branch/coordination group: a single timeline entry that fans out into N
+ * parallel sub-lanes (e.g. a speculative race or a scatter/gather). Rendered
+ * with the lanes side by side conceptually — the winning lane emphasized and
+ * the losers muted — and collapsible. Distinguished from a plain {@link RunStep}
+ * by its `kind` discriminator, mirroring the additive-entry pattern used by
+ * other cinder timelines.
+ *
+ * @schemaObject
+ */
+export type RunStepBranchGroup = {
+  /** Discriminator identifying a branch-group entry. */
+  kind: 'branch';
+  /** Stable identity; used as the keyed list identity. */
+  id: string;
+  /** Display label for the branch group (e.g. "Race deploy candidates"). */
+  label: string;
+  /** The parallel sub-lanes. Order is presentational only. */
+  lanes: RunStepBranchLane[];
+  /**
+   * Collapse the group by default once the lane count reaches this threshold.
+   * Defaults to 3. Set to a large number to effectively disable auto-collapse.
+   */
+  collapseThreshold?: number | undefined;
+  /**
+   * Force the initial collapsed (`true`) or expanded (`false`) state,
+   * overriding `collapseThreshold`. The group remains user-togglable.
+   */
+  collapsed?: boolean | undefined;
+};
+
+/**
+ * A single top-level entry in a RunStepTimeline: either a normal step or a
+ * branch/coordination group. Existing `RunStep[]` arrays remain valid because
+ * the union is additive and branch groups are opt-in via the `kind`
+ * discriminator.
+ */
+export type RunStepTimelineEntry = RunStep | RunStepBranchGroup;
+
 /**
  * Schema generator surface for one top-level step.
  * Public `RunStep` stays recursive; this finite shape keeps JSON Schema generation bounded.
@@ -163,6 +247,10 @@ export type RunStepTimelineSchemaStep = {
    * Optional link to logs, traces, or a step detail route.
    */
   link?: RunStepLink | undefined;
+  /** Marks a step that was speculatively executed and then unwound (rolled back). */
+  rewound?: boolean | undefined;
+  /** Id of the forward step that this step compensates (reverses). */
+  compensates?: string | undefined;
   /**
    * Schema-bounded nested child-workflow steps.
    */
@@ -198,6 +286,10 @@ export type RunStepTimelineSchemaChildStep = {
   details?: RunStepDetail[] | undefined;
   /** Optional link to logs, traces, or a step detail route. */
   link?: RunStepLink | undefined;
+  /** Marks a step that was speculatively executed and then unwound (rolled back). */
+  rewound?: boolean | undefined;
+  /** Id of the forward step that this step compensates (reverses). */
+  compensates?: string | undefined;
   /**
    * Nested child-workflow steps rendered at depth 2.
    */
@@ -233,6 +325,10 @@ export type RunStepTimelineSchemaGrandchildStep = {
   details?: RunStepDetail[] | undefined;
   /** Optional link to logs, traces, or a step detail route. */
   link?: RunStepLink | undefined;
+  /** Marks a step that was speculatively executed and then unwound (rolled back). */
+  rewound?: boolean | undefined;
+  /** Id of the forward step that this step compensates (reverses). */
+  compensates?: string | undefined;
   /**
    * Nested child-workflow steps rendered at depth 3.
    */
@@ -268,8 +364,98 @@ export type RunStepTimelineSchemaGreatGrandchildStep = {
   details?: RunStepDetail[] | undefined;
   /** Optional link to logs, traces, or a step detail route. */
   link?: RunStepLink | undefined;
+  /** Marks a step that was speculatively executed and then unwound (rolled back). */
+  rewound?: boolean | undefined;
+  /** Id of the forward step that this step compensates (reverses). */
+  compensates?: string | undefined;
 };
 
+/**
+ * Schema-facing step used for branch-lane sequences. Lane steps are
+ * `RunStep[]` at runtime and can nest, so this type carries an optional
+ * `children` array of the same shape (recursive at the type level, for
+ * consumer-typing convenience) that validates lane-step children as steps.
+ * The generated JSON Schema depth-caps this nesting to the same rendered depth
+ * as the main rail; the recursive TYPE is the ergonomic mirror of that
+ * depth-capped schema, not an assertion that arbitrary depth is rendered.
+ * @schemaObject
+ */
+export type RunStepTimelineSchemaLaneStep = {
+  /** 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;
+  /** Marks a step that was speculatively executed and then unwound (rolled back). */
+  rewound?: boolean | undefined;
+  /** Id of the forward step that this step compensates (reverses). */
+  compensates?: string | undefined;
+  /** Nested steps within a branch lane. */
+  children?: RunStepTimelineSchemaLaneStep[] | undefined;
+};
+
+/**
+ * Schema-bounded sub-lane inside a {@link RunStepTimelineSchemaBranchGroup}.
+ * Lane steps are bounded to a leaf surface so JSON Schema generation stays
+ * finite.
+ * @schemaObject
+ */
+export type RunStepTimelineSchemaBranchLane = {
+  /** Stable identity; used as the keyed list identity within the group. */
+  id: string;
+  /** Optional display label for the lane. */
+  label?: string | undefined;
+  /** Competitive outcome for the lane. Omit while the branch is still racing. */
+  outcome?: RunStepBranchLaneOutcome | undefined;
+  /** Ordered steps that ran within this lane. */
+  steps: RunStepTimelineSchemaLaneStep[];
+};
+
+/**
+ * Schema generator surface for one top-level branch/coordination group.
+ * @schemaObject
+ */
+export type RunStepTimelineSchemaBranchGroup = {
+  /** Discriminator identifying a branch-group entry. */
+  kind: 'branch';
+  /** Stable identity; used as the keyed list identity. */
+  id: string;
+  /** Display label for the branch group. */
+  label: string;
+  /** The parallel sub-lanes. */
+  lanes: RunStepTimelineSchemaBranchLane[];
+  /** Collapse the group by default once the lane count reaches this threshold. Defaults to 3. */
+  collapseThreshold?: number | undefined;
+  /** Force the initial collapsed (`true`) or expanded (`false`) state. */
+  collapsed?: boolean | undefined;
+};
+
+/**
+ * A single schema-bounded top-level entry: either a step or a branch group.
+ */
+export type RunStepTimelineSchemaEntry =
+  | RunStepTimelineSchemaStep
+  | RunStepTimelineSchemaBranchGroup;
+
 /**
  * Props for the RunStepTimeline component.
  *
@@ -279,10 +465,12 @@ export type RunStepTimelineSchemaGreatGrandchildStep = {
  */
 export type RunStepTimelineProps = Omit<HTMLAttributes<HTMLOListElement>, 'class' | 'children'> & {
   /**
-   * Ordered list of steps to render.
+   * Ordered list of timeline entries to render. Each entry is either a
+   * {@link RunStep} or a {@link RunStepBranchGroup}. Plain `RunStep[]` arrays
+   * remain valid — branch groups are opt-in via the `kind` discriminator.
    * @schemaObject
    */
-  steps: RunStep[];
+  steps: RunStepTimelineEntry[];
   /**
    * Accessible label for the timeline list.
    * Used as `aria-label` when `aria-labelledby` is absent.
@@ -299,10 +487,9 @@ export type RunStepTimelineProps = Omit<HTMLAttributes<HTMLOListElement>, 'class
 /** Schema generator surface for RunStepTimeline — excludes snippet props. */
 export interface RunStepTimelineSchemaProps {
   /**
-   * Ordered list of steps to render.
-   * @schemaObject
+   * Ordered list of timeline entries to render — either steps or branch groups.
    */
-  steps: RunStepTimelineSchemaStep[];
+  steps: RunStepTimelineSchemaEntry[];
   /** Accessible label for the timeline list. */
   label?: string | undefined;
   /** Additional CSS classes applied to the root element. */

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

@@ -0,0 +1,310 @@
+import type { StatusDotStatus } from '../status-dot/status-dot.types.ts';
+import type {
+  RunStep,
+  RunStepBranchGroup,
+  RunStepBranchLane,
+  RunStepBranchLaneOutcome,
+  RunStepStatus,
+  RunStepTimelineEntry,
+} from './run-step-timeline.types.ts';
+
+/**
+ * Relocate resolved compensation steps immediately after the subtree of the
+ * sibling they reverse. Unresolved, self-referential, and cyclic links retain
+ * consumer order. Multiple compensations retain their relative input order.
+ */
+export function relocateCompensationSteps(steps: RunStep[]): RunStep[] {
+  return relocateSiblingItems(steps, (step) => step);
+}
+
+function relocateSiblingItems<T>(items: T[], getStep: (item: T) => RunStep | undefined): T[] {
+  if (!items.some((item) => getStep(item)?.compensates !== undefined)) return items;
+
+  const stepById = new Map<string, RunStep>();
+  for (const item of items) {
+    const step = getStep(item);
+    if (step !== undefined) {
+      stepById.set(step.id, step);
+    }
+  }
+  const canRelocate = (step: RunStep): boolean => {
+    const visited = new Set<string>([step.id]);
+    let targetId = step.compensates;
+    while (targetId !== undefined) {
+      const target = stepById.get(targetId);
+      if (target === undefined || visited.has(targetId)) return false;
+      visited.add(targetId);
+      targetId = target.compensates;
+    }
+    return true;
+  };
+  const relocatable = new Set<RunStep>();
+  const compensationsByTarget = new Map<string, T[]>();
+  for (const item of items) {
+    const step = getStep(item);
+    if (step === undefined || step.compensates === undefined || !canRelocate(step)) continue;
+    relocatable.add(step);
+    const compensations = compensationsByTarget.get(step.compensates) ?? [];
+    compensations.push(item);
+    compensationsByTarget.set(step.compensates, compensations);
+  }
+  const result: T[] = [];
+  const appendWithCompensations = (item: T): void => {
+    result.push(item);
+    const step = getStep(item);
+    if (step === undefined) return;
+    for (const compensation of compensationsByTarget.get(step.id) ?? []) {
+      appendWithCompensations(compensation);
+    }
+  };
+  for (const item of items) {
+    const step = getStep(item);
+    if (step === undefined || !relocatable.has(step)) appendWithCompensations(item);
+  }
+  return result;
+}
+
+/** Relocate top-level compensations while preserving branch rows as rail entries. */
+export function relocateCompensationEntries(
+  entries: RunStepTimelineEntry[],
+): RunStepTimelineEntry[] {
+  return relocateSiblingItems(entries, (entry) => (isBranchGroup(entry) ? undefined : entry));
+}
+
+function isBranchGroup(entry: RunStepTimelineEntry): entry is RunStepBranchGroup {
+  return 'kind' in entry && entry.kind === 'branch';
+}
+
+/** Badge variants used for the per-step status chip. */
+export type RunStepBadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent';
+
+/** Map a generic {@link RunStepStatus} onto a StatusDot status token. */
+export function statusDotStatus(status: RunStepStatus): StatusDotStatus {
+  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. */
+export function statusLabel(status: RunStepStatus): string {
+  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';
+  }
+}
+
+/** Map a {@link RunStepStatus} to a Badge variant for the status chip. */
+export function badgeVariant(status: RunStepStatus): RunStepBadgeVariant {
+  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). */
+export function isTerminal(status: RunStepStatus): boolean {
+  return (
+    status === 'succeeded' || status === 'failed' || status === 'cancelled' || status === 'skipped'
+  );
+}
+
+/** Whether this status represents an in-flight ("current") step. */
+export function isCurrent(status: RunStepStatus): boolean {
+  return status === 'running' || status === 'retrying' || status === 'waiting_approval';
+}
+
+/** Whether this step should render a progress bar. */
+export function hasProgress(step: RunStep): boolean {
+  return step.progress !== undefined && isCurrent(step.status);
+}
+
+/** Metadata items for a step, as term/definition pairs. */
+export function metadataItems(step: RunStep): { term: string; definition: string }[] {
+  const items: { term: string; definition: string }[] = [];
+  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;
+}
+
+/** Pluralized "N action(s)" label. */
+export function actionsCountLabel(actionsCount: number): string {
+  return actionsCount === 1 ? '1 action' : `${actionsCount} actions`;
+}
+
+/** Pluralized "N nested step(s) hidden" label for the depth-cap row. */
+export function hiddenNestedStepLabel(hiddenStepCount: number): string {
+  return hiddenStepCount === 1 ? '1 nested step hidden' : `${hiddenStepCount} nested steps hidden`;
+}
+
+/** Human-readable label for a branch-lane outcome, used in badges and announcements. */
+export function laneOutcomeLabel(outcome: RunStepBranchLaneOutcome): string {
+  switch (outcome) {
+    case 'won':
+      return 'Won';
+    case 'lost':
+      return 'Lost';
+    case 'settled':
+      return 'Settled';
+  }
+}
+
+/** Badge variant for a branch-lane outcome. */
+export function laneOutcomeBadgeVariant(outcome: RunStepBranchLaneOutcome): RunStepBadgeVariant {
+  switch (outcome) {
+    case 'won':
+      return 'success';
+    case 'lost':
+      return 'neutral';
+    case 'settled':
+      return 'info';
+  }
+}
+
+/**
+ * One-line accessible summary of a branch group's lane outcomes, e.g.
+ * "1 won, 2 lost" or "3 lanes racing" while outcomes are still pending.
+ */
+export function branchOutcomeSummary(lanes: RunStepBranchLane[]): string {
+  const counts = { won: 0, lost: 0, settled: 0, pending: 0 };
+  for (const lane of lanes) {
+    if (lane.outcome === undefined) counts.pending += 1;
+    else counts[lane.outcome] += 1;
+  }
+  const parts: string[] = [];
+  if (counts.won > 0) parts.push(`${counts.won} won`);
+  if (counts.lost > 0) parts.push(`${counts.lost} lost`);
+  if (counts.settled > 0) parts.push(`${counts.settled} settled`);
+  if (counts.pending > 0) {
+    parts.push(counts.pending === 1 ? '1 lane racing' : `${counts.pending} lanes racing`);
+  }
+  return parts.length > 0 ? parts.join(', ') : 'No lanes';
+}
+
+/**
+ * Whether any step in any lane of a branch group is currently in-flight.
+ * Iterative (explicit stack) so a deeply-nested lane can't overflow the call
+ * stack — this runs before the render path's depth cap.
+ */
+export function branchGroupHasCurrentStep(group: RunStepBranchGroup): boolean {
+  const stack: RunStep[] = group.lanes.flatMap((lane) => lane.steps);
+  while (stack.length > 0) {
+    const step = stack.pop();
+    if (step === undefined) continue;
+    if (isCurrent(step.status)) return true;
+    if (step.children) {
+      for (const child of step.children) stack.push(child);
+    }
+  }
+  return false;
+}
+
+/**
+ * Resolve whether a branch group starts collapsed. An explicit `collapsed`
+ * wins; otherwise the group collapses once its lane count reaches the
+ * threshold (default 3).
+ */
+export function branchStartsCollapsed(
+  laneCount: number,
+  collapseThreshold: number | undefined,
+  collapsed: boolean | undefined,
+): boolean {
+  if (collapsed !== undefined) return collapsed;
+  // Normalize the public `collapseThreshold` to a finite positive integer so a
+  // stray 0, negative, NaN, or fractional value can't produce surprising
+  // always-/never-collapsed behavior; fall back to the default of 3.
+  const threshold =
+    collapseThreshold !== undefined && Number.isInteger(collapseThreshold) && collapseThreshold > 0
+      ? collapseThreshold
+      : 3;
+  return laneCount >= threshold;
+}
+
+/** Whether the string contains an ASCII control character (0x00-0x1F or 0x7F). */
+function hasControlCharacter(value: string): boolean {
+  for (let index = 0; index < value.length; index += 1) {
+    const code = value.charCodeAt(index);
+    if (code <= 0x1f || code === 0x7f) return true;
+  }
+  return false;
+}
+
+/**
+ * Normalize a step link href to a safe value, or `undefined` when the href is
+ * empty, control-character-laden, backslash-bearing, protocol-relative, or a
+ * non-http(s) scheme.
+ */
+export function safeStepLinkHref(href: string): string | undefined {
+  const trimmedHref = href.trim();
+  if (trimmedHref === '') return undefined;
+  // Reject control characters (0x00-0x1F, 0x7F) without a control-char regex.
+  if (hasControlCharacter(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;
+}

package/src/components/schedule-builder/index.ts

@@ -0,0 +1,14 @@
+import './schedule-builder.css';
+import ScheduleBuilder from './schedule-builder.svelte';
+
+export default ScheduleBuilder;
+export type {
+  ScheduleAuthoringMode,
+  ScheduleBuilderProps,
+  ScheduleBuilderSchemaProps,
+  ScheduleFire,
+  ScheduleIntervalUnit,
+  ScheduleValue,
+  ScheduleValueSchema,
+} from './schedule-builder.types.ts';
+export { ScheduleBuilder };

package/src/components/schedule-builder/schedule-builder.css

@@ -0,0 +1,121 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@import '../chip/chip.css';
+@import '../input/input.css';
+@import '../number-input/number-input.css';
+@import '../segmented-control/segmented-control.css';
+@import '../select/select.css';
+@import '../time-field/time-field.css';
+
+@layer cinder.components {
+  /* ========================================
+   * SCHEDULE-BUILDER
+   * Recurrence-definition control: presets, cron, and interval authoring
+   * modes behind a tablist, with an always-visible summary line, next-fires
+   * preview, and timezone display slot.
+   * ======================================== */
+
+  .cinder-schedule-builder {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-4);
+  }
+
+  /* ----------------------------------------
+   * Mode panel
+   * ---------------------------------------- */
+
+  .cinder-schedule-builder__panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-3);
+    padding-block-start: var(--cinder-space-1);
+  }
+
+  .cinder-schedule-builder__preset-kind {
+    margin-block-end: var(--cinder-space-1);
+  }
+
+  .cinder-schedule-builder__field-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-schedule-builder__field-row > * {
+    flex: 1 1 10rem;
+    min-inline-size: 8rem;
+  }
+
+  .cinder-schedule-builder__weekday-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-schedule-builder__cron-fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+    gap: var(--cinder-space-3);
+  }
+
+  /* ----------------------------------------
+   * Always-visible informational blocks: summary, preview, timezone
+   * ---------------------------------------- */
+
+  .cinder-schedule-builder__summary,
+  .cinder-schedule-builder__preview,
+  .cinder-schedule-builder__timezone {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    margin: 0;
+    padding: var(--cinder-space-3);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-md);
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-schedule-builder__section-label {
+    display: block;
+    margin: 0;
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    text-transform: uppercase;
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-schedule-builder__summary-text {
+    margin: 0;
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+  }
+
+  .cinder-schedule-builder__preview-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-schedule-builder__preview-item {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .cinder-schedule-builder__timezone-value {
+    margin: 0;
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    font-family: var(--cinder-font-mono);
+  }
+
+  .cinder-schedule-builder__empty {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+    font-style: italic;
+  }
+}