@lostgradient/cinder 0.11.0 → 0.12.0

package/src/components/confirm-dialog/confirm-dialog.schema.ts

@@ -31,6 +31,16 @@ const schema = {
       description:
         'When true, the confirm button uses variant="danger". The cancel button still\nreceives default focus regardless — color is never the sole destructive signal.',
     },
+    typeToConfirm: {
+      type: 'string',
+      description:
+        'When set, renders a labelled text input and disables the confirm button until the\ntrimmed input matches this value case-insensitively.',
+    },
+    typeToConfirmLabel: {
+      type: 'string',
+      description:
+        'Visible label for the typed-confirmation input. Defaults to `Type "<value>" to confirm`.',
+    },
     class: {
       type: 'string',
       description:

package/src/components/confirm-dialog/confirm-dialog.svelte

@@ -4,11 +4,25 @@ export {};
 
 <script lang="ts">
 import Button from '../button/button.svelte';
+import Input from '../input/input.svelte';
 import Modal from '../modal/modal.svelte';
 import { classNames } from '../../utilities/class-names.ts';
 const descriptionId = $props.id();
-let { open = $bindable(false), title, description, cancelLabel = 'Cancel', confirmLabel, destructive = false, onconfirm, oncancel, triggerRef = null, class: className, } = $props();
+const typedConfirmationId = `${descriptionId}-typed-confirmation`;
+let { open = $bindable(false), title, description, cancelLabel = 'Cancel', confirmLabel, destructive = false, typeToConfirm, typeToConfirmLabel, onconfirm, oncancel, triggerRef = null, class: className, } = $props();
 const describedById = $derived(description ? descriptionId : undefined);
+const normalizedTypeToConfirm = $derived(typeToConfirm?.trim() || undefined);
+const normalizedTypeToConfirmLabel = $derived(typeToConfirmLabel?.trim() || undefined);
+let typedConfirmation = $state('');
+let previousOpen = open;
+const typedConfirmationMatches = $derived(normalizedTypeToConfirm === undefined ||
+    typedConfirmation.trim().toLowerCase() === normalizedTypeToConfirm.toLowerCase());
+$effect(() => {
+    if (open === previousOpen)
+        return;
+    previousOpen = open;
+    typedConfirmation = '';
+});
 function handleCancel() {
     // Mirror Modal's dismiss() ordering: state first, then callback. No try/catch —
     // consumer errors must propagate so tests, error boundaries, and observability see them.
@@ -34,10 +48,24 @@ function handleConfirm() {
     <p id={descriptionId} class="cinder-confirm-dialog__description">{description}</p>
   {/if}
 
+  {#if normalizedTypeToConfirm !== undefined}
+    <Input
+      id={typedConfirmationId}
+      class="cinder-confirm-dialog__typed-confirmation"
+      bind:value={typedConfirmation}
+      label={normalizedTypeToConfirmLabel ?? `Type "${normalizedTypeToConfirm}" to confirm`}
+      autocomplete="off"
+    />
+  {/if}
+
   {#snippet footer()}
     <Button variant="secondary" autofocus onclick={handleCancel}>{cancelLabel}</Button>
-    <Button variant={destructive ? 'danger' : 'primary'} onclick={handleConfirm}
-      >{confirmLabel}</Button
+    <Button
+      variant={destructive ? 'danger' : 'primary'}
+      disabled={!typedConfirmationMatches}
+      onclick={handleConfirm}
     >
+      {confirmLabel}
+    </Button>
   {/snippet}
 </Modal>

package/src/components/confirm-dialog/confirm-dialog.types.ts

@@ -36,6 +36,13 @@ export type ConfirmDialogProps = {
    * receives default focus regardless — color is never the sole destructive signal.
    */
   destructive?: boolean;
+  /**
+   * When set, renders a labelled text input and disables the confirm button until the
+   * trimmed input matches this value case-insensitively.
+   */
+  typeToConfirm?: string;
+  /** Visible label for the typed-confirmation input. Defaults to `Type "<value>" to confirm`. */
+  typeToConfirmLabel?: string;
   /** Fired when the user activates the confirm button. Required. Component closes itself after. */
   onconfirm: () => void;
   /**

package/src/components/faceted-filter-bar/faceted-filter-bar.schema.json

@@ -10,6 +10,10 @@
       "type": "string",
       "description": "Current text search query. When provided, the search field is controlled."
     },
+    "showSearch": {
+      "type": "boolean",
+      "description": "Whether to render the leading search field. Defaults to `true`."
+    },
     "searchPlaceholder": {
       "type": "string",
       "description": "Placeholder text shown in the leading search field."

package/src/components/faceted-filter-bar/faceted-filter-bar.schema.ts

@@ -12,6 +12,10 @@ const schema = {
       type: 'string',
       description: 'Current text search query. When provided, the search field is controlled.',
     },
+    showSearch: {
+      type: 'boolean',
+      description: 'Whether to render the leading search field. Defaults to `true`.',
+    },
     searchPlaceholder: {
       type: 'string',
       description: 'Placeholder text shown in the leading search field.',

package/src/components/faceted-filter-bar/faceted-filter-bar.svelte

@@ -10,7 +10,7 @@ import Chip from '../chip/chip.svelte';
 import Button from '../button/button.svelte';
 import { classNames } from '../../utilities/class-names.ts';
 const generatedId = $props.id();
-let { 'aria-label': ariaLabel = 'Filters', searchQuery, searchPlaceholder = 'Search…', searchAriaLabel = 'Search', facets = [], appliedFilters = [], disabled = false, class: className, onsearchchange, onfacetchange, onfilterremove, onclearall, ...rest } = $props();
+let { 'aria-label': ariaLabel = 'Filters', searchQuery, showSearch = true, searchPlaceholder = 'Search…', searchAriaLabel = 'Search', facets = [], appliedFilters = [], disabled = false, class: className, onsearchchange, onfacetchange, onfilterremove, onclearall, ...rest } = $props();
 const searchId = $derived(`${generatedId}-search`);
 let rootElement = $state();
 // Internal uncontrolled search value when searchQuery is not provided.
@@ -32,7 +32,7 @@ function resolveFilterDisplayValue(key, value) {
         return value;
     return facet.options.find((option) => option.value === value)?.label ?? value;
 }
-const hasAppliedFilters = $derived(appliedFilters.length > 0 || currentSearchQuery.length > 0);
+const hasAppliedFilters = $derived(appliedFilters.length > 0 || (showSearch && currentSearchQuery.length > 0));
 const totalActiveCount = $derived(appliedFilters.length);
 // Live region summary message — always in DOM, content changes when filters change.
 const summaryMessage = $derived.by(() => {
@@ -81,15 +81,17 @@ function getFacetCurrentValue(key) {
 >
   <!-- Controls row: search field + facet selects -->
   <div class="cinder-faceted-filter-bar__controls">
-    <SearchField
-      id={searchId}
-      class="cinder-faceted-filter-bar__search"
-      value={currentSearchQuery}
-      placeholder={searchPlaceholder}
-      aria-label={searchAriaLabel}
-      {disabled}
-      oninput={handleSearchInput}
-    />
+    {#if showSearch}
+      <SearchField
+        id={searchId}
+        class="cinder-faceted-filter-bar__search"
+        value={currentSearchQuery}
+        placeholder={searchPlaceholder}
+        aria-label={searchAriaLabel}
+        {disabled}
+        oninput={handleSearchInput}
+      />
+    {/if}
 
     {#each facets as facet (facet.key)}
       {#if facet.type === 'select'}

package/src/components/faceted-filter-bar/faceted-filter-bar.types.ts

@@ -69,6 +69,8 @@ export type FacetedFilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'
   'aria-label'?: string;
   /** Current text search query. When provided, the search field is controlled. */
   searchQuery?: string;
+  /** Whether to render the leading search field. Defaults to `true`. */
+  showSearch?: boolean;
   /** Placeholder text shown in the leading search field. */
   searchPlaceholder?: string;
   /** Accessible label for the search input. Defaults to 'Search'. */

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/run-step-timeline.svelte

@@ -10,11 +10,11 @@ import RunStepBranchDisclosure from './run-step-branch-disclosure.svelte';
 import Link from '../link/link.svelte';
 import Progress from '../progress/progress.svelte';
 import StatusDot from '../status-dot/status-dot.svelte';
-import { actionsCountLabel, badgeVariant, branchGroupHasCurrentStep, branchOutcomeSummary, branchStartsCollapsed, hasProgress, hiddenNestedStepLabel, isCurrent, isTerminal, laneOutcomeBadgeVariant, laneOutcomeLabel, metadataItems, safeStepLinkHref, statusDotStatus, statusLabel, } from './run-step-timeline.utilities.ts';
+import { actionsCountLabel, badgeVariant, branchGroupHasCurrentStep, branchOutcomeSummary, branchStartsCollapsed, hasProgress, hiddenNestedStepLabel, isCurrent, isTerminal, laneOutcomeBadgeVariant, laneOutcomeLabel, metadataItems, relocateCompensationEntries, relocateCompensationSteps, safeStepLinkHref, statusDotStatus, statusLabel, } from './run-step-timeline.utilities.ts';
 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 renderedEntries = $derived(flattenEntries(steps));
+const renderedEntries = $derived(flattenEntries(relocateCompensationEntries(steps)));
 function isBranchGroup(entry) {
     return 'kind' in entry && entry.kind === 'branch';
 }
@@ -128,7 +128,7 @@ function applyGlobalRailAriaCurrent(rows) {
 // compensation labels. Reused for the main rail and for each branch lane.
 function flattenSteps(list, pathPrefix) {
     const rows = [];
-    appendRunStepRows(rows, list, 0, pathPrefix);
+    appendRunStepRows(rows, relocateCompensationSteps(list), 0, pathPrefix);
     const currentRowIndex = deepestCurrentStepIndex(rows);
     // Index every step row by its unique path key (built from the escaped id
     // chain). A `compensates` id then resolves to a true SIBLING — a step under
@@ -174,7 +174,7 @@ function appendRunStepRows(rows, list, depth, pathPrefix) {
         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);
+                appendRunStepRows(rows, relocateCompensationSteps(step.children), depth + 1, pathKey);
             }
             else {
                 const hiddenSummary = summarizeNestedRunSteps(step.children);

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

@@ -5,8 +5,76 @@ import type {
   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';