@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { onMount, tick } from 'svelte';
+
   /** Mirrors ClarificationSession from @kos/agent — kept local to avoid a design-system→agent dep. */
   interface ClarificationSession {
     sessionId: string;
@@ -19,6 +21,12 @@
   const { session, onSubmit, onDismiss, submitting = false }: Props = $props();
 
   let reply = $state('');
+  let replyInput: HTMLTextAreaElement | undefined;
+
+  onMount(async () => {
+    await tick();
+    replyInput?.focus();
+  });
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter' && !e.shiftKey && reply.trim()) {
@@ -37,7 +45,7 @@
   }
 </script>
 
-<div class="clarification-overlay" role="dialog" aria-modal="true" aria-labelledby="clarification-heading">
+<div class="clarification-overlay" role="dialog" aria-modal="true" aria-labelledby="clarification-heading" tabindex="-1">
   <div class="clarification-panel">
     <header class="clarification-header">
       <div class="scaffold-badge">{session.scaffoldKind}</div>
@@ -61,12 +69,12 @@
       <div class="reply-area">
         <textarea
           class="reply-input"
+          bind:this={replyInput}
           bind:value={reply}
           onkeydown={handleKeydown}
           placeholder="Your answer…"
           rows={3}
           disabled={submitting}
-          autofocus
         ></textarea>
         <button
           class="submit-btn"

package/dist/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClarificationOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte.ts"],"names":[],"mappings":"AAGE,oGAAoG;AACpG,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,KAAK;IACb,OAAO,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6DH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ClarificationOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte.ts"],"names":[],"mappings":"AAME,oGAAoG;AACpG,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,KAAK;IACb,OAAO,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAoEH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/b0-app-shell/{command-bar/CommandBar.svelte → global-command-bar/GlobalCommandBar.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
   /**
-   * CommandBar — The LEAP global command strip.
+   * GlobalCommandBar — The LEAP global command strip.
    *
    * Three zones, always in the same positions across every LEAP app:
    *   LEFT  · FLOW PHASE — the system's current operational state
@@ -10,7 +10,7 @@
    * Prop-driven: no store imports. Each app wires it to its own stores.
    *
    * Placement: top of every LEAP app shell, above app-specific navigation.
-   * Height: 52px fixed.
+   * Height: 3.25rem fixed.
    */
 
   interface Props {
@@ -51,21 +51,21 @@
     switch (flowPhase?.toLowerCase()) {
       case 'go':
       case 'running':
-      case 'executing':   return '#27ae60';
+      case 'executing':   return 'var(--color-success)';
       case 'sprout':
       case 'in_progress':
-      case 'active':      return '#4682c8';
+      case 'active':      return 'var(--color-info)';
       case 'weed':
-      case 'weeding':     return '#e67e22';
+      case 'weeding':     return 'var(--color-warning)';
       case 'consult':
-      case 'consulting':  return '#b87333';
+      case 'consulting':  return 'var(--color-accent)';
       case 'freeze':
       case 'frozen':
-      case 'blocked':     return '#506eb4';
-      case 'seed':        return '#b87333';
+      case 'blocked':     return 'var(--color-info)';
+      case 'seed':        return 'var(--color-accent)';
       case 'compost':
-      case 'prune':       return '#3d3d3d';
-      default:            return '#5a5245';
+      case 'prune':       return 'var(--color-text-muted)';
+      default:            return 'var(--color-text-muted)';
     }
   });
 
@@ -206,12 +206,12 @@
 
   .cb {
     display: grid;
-    grid-template-columns: 148px 1px 1fr 1px 196px;
+    grid-template-columns: 9.25rem var(--border-width-thin) 1fr var(--border-width-thin) 12.25rem;
     align-items: stretch;
-    height: 52px;
+    height: 3.25rem;
     width: 100%;
-    background: #0a0a0a;
-    border-bottom: 1px solid var(--color-accent-subtle);
+    background: var(--color-bg-inset);
+    border-bottom: var(--border-width-thin) solid var(--color-accent-subtle);
     position: relative;
     overflow: visible;
     flex-shrink: 0;
@@ -224,10 +224,10 @@
     inset: 0;
     background: repeating-linear-gradient(
       180deg,
-      transparent 0px,
-      transparent 2px,
-      rgba(255, 255, 255, 0.012) 2px,
-      rgba(255, 255, 255, 0.012) 3px
+      transparent 0,
+      transparent 0.125rem,
+      rgba(255, 255, 255, 0.012) 0.125rem,
+      rgba(255, 255, 255, 0.012) 0.1875rem
     );
     pointer-events: none;
     z-index: 0;
@@ -240,7 +240,7 @@
     top: 0;
     left: 0;
     right: 0;
-    height: 1px;
+    height: var(--border-width-thin);
     background: linear-gradient(
       90deg,
       var(--color-accent-muted) 0%,
@@ -260,9 +260,9 @@
   /* ── Divider ───────────────────────────────────────────────────────────── */
 
   .cb-rule {
-    width: 1px;
+    width: var(--border-width-thin);
     background: var(--color-accent-subtle);
-    margin: 12px 0;
+    margin: var(--space-3) 0;
     z-index: 1;
   }
 
@@ -271,8 +271,8 @@
   .cb-phase {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 0 18px;
+    gap: var(--space-2);
+    padding: 0 1.125rem;
     position: relative;
     z-index: 1;
   }
@@ -284,20 +284,20 @@
     inset: 0;
     background: radial-gradient(
       ellipse 160% 120% at -10% 50%,
-      color-mix(in srgb, var(--glow, #5a5245) 12%, transparent),
+      color-mix(in srgb, var(--glow, var(--color-text-muted)) 12%, transparent),
       transparent 65%
     );
     pointer-events: none;
   }
 
   .cb-phase__dot {
-    width: 8px;
-    height: 8px;
+    width: var(--space-2);
+    height: var(--space-2);
     border-radius: 50%;
-    background: var(--glow, #5a5245);
+    background: var(--glow, var(--color-text-muted));
     box-shadow:
-      0 0 0 2px color-mix(in srgb, var(--glow, #5a5245) 20%, transparent),
-      0 0 8px color-mix(in srgb, var(--glow, #5a5245) 50%, transparent);
+      0 0 0 var(--border-width-default) color-mix(in srgb, var(--glow, var(--color-text-muted)) 20%, transparent),
+      0 0 var(--blur-lg) color-mix(in srgb, var(--glow, var(--color-text-muted)) 50%, transparent);
     flex-shrink: 0;
     transition: background 0.4s, box-shadow 0.4s;
   }
@@ -310,14 +310,14 @@
     0%, 100% {
       opacity: 1;
       box-shadow:
-        0 0 0 2px color-mix(in srgb, var(--glow) 20%, transparent),
-        0 0 10px color-mix(in srgb, var(--glow) 60%, transparent);
+        0 0 0 var(--border-width-default) color-mix(in srgb, var(--glow) 20%, transparent),
+        0 0 0.625rem color-mix(in srgb, var(--glow) 60%, transparent);
     }
     50% {
       opacity: 0.65;
       box-shadow:
-        0 0 0 2px color-mix(in srgb, var(--glow) 10%, transparent),
-        0 0 4px color-mix(in srgb, var(--glow) 30%, transparent);
+        0 0 0 var(--border-width-default) color-mix(in srgb, var(--glow) 10%, transparent),
+        0 0 0.25rem color-mix(in srgb, var(--glow) 30%, transparent);
     }
   }
 
@@ -329,9 +329,9 @@
 
   .cb-phase__name {
     font-family: var(--font-sans);
-    font-size: 14px;
+    font-size: var(--text-sm);
     font-weight: 700;
-    color: var(--glow, #5a5245);
+    color: var(--glow, var(--color-text-muted));
     letter-spacing: 0.1em;
     line-height: 1;
     transition: color 0.4s;
@@ -339,8 +339,8 @@
 
   .cb-phase__sub {
     font-family: var(--font-mono);
-    font-size: 9px;
-    color: rgba(160, 152, 128, 0.65);
+    font-size: 0.5625rem;
+    color: color-mix(in srgb, var(--color-text-secondary) 65%, transparent);
     letter-spacing: 0.06em;
     line-height: 1;
   }
@@ -351,7 +351,7 @@
     display: flex;
     align-items: center;
     gap: var(--space-2);
-    padding: 0 16px;
+    padding: 0 var(--space-4);
     position: relative;
     z-index: 1;
     transition: background 0.2s;
@@ -362,9 +362,9 @@
     content: '';
     position: absolute;
     bottom: 0;
-    left: 20px;
-    right: 20px;
-    height: 1px;
+    left: var(--space-5);
+    right: var(--space-5);
+    height: var(--border-width-thin);
     background: var(--color-accent-muted);
     transform: scaleX(0);
     transform-origin: center;
@@ -381,7 +381,7 @@
 
   .cb-intent__cursor {
     font-family: var(--font-mono);
-    font-size: 13px;
+    font-size: var(--text-sm);
     color: var(--color-accent-muted);
     flex-shrink: 0;
     user-select: none;
@@ -401,20 +401,20 @@
     border: none;
     outline: none;
     font-family: var(--font-mono);
-    font-size: 12px;
+    font-size: var(--text-xs);
     color: var(--color-text-primary);
     padding: 0;
     caret-color: var(--color-accent);
   }
 
   .cb-intent__input::placeholder {
-    color: rgba(160, 152, 128, 0.25);
+    color: color-mix(in srgb, var(--color-text-secondary) 25%, transparent);
     font-style: italic;
   }
 
   .cb-intent__input:disabled {
     cursor: not-allowed;
-    color: rgba(160, 152, 128, 0.3);
+    color: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
   }
 
   .cb-intent__send {
@@ -422,11 +422,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
-    height: 24px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid var(--color-accent-glow);
-    border-radius: var(--radius-sm, 3px);
+    width: 1.5rem;
+    height: 1.5rem;
+    background: var(--overlay-white-04);
+    border: var(--border-width-thin) solid var(--color-accent-glow);
+    border-radius: var(--radius-sm);
     color: var(--color-accent-muted);
     cursor: pointer;
     transition: all 0.12s;
@@ -441,7 +441,7 @@
   .cb-intent__send--ready:hover {
     background: var(--color-accent-muted);
     border-color: var(--color-accent-muted);
-    box-shadow: 0 0 8px var(--color-accent-muted);
+    box-shadow: 0 0 var(--blur-lg) var(--color-accent-muted);
   }
 
   .cb-intent__send:disabled {
@@ -451,9 +451,9 @@
 
   .cb-intent__spinner {
     display: inline-block;
-    width: 10px;
-    height: 10px;
-    border: 1.5px solid var(--color-accent-muted);
+    width: var(--space-2);
+    height: var(--space-2);
+    border: 0.09375rem solid var(--color-accent-muted);
     border-top-color: var(--color-accent);
     border-radius: 50%;
     animation: cb-spin 0.65s linear infinite;
@@ -469,8 +469,8 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 5px;
-    padding: 0 18px;
+    gap: 0.3125rem;
+    padding: 0 1.125rem;
     position: relative;
     z-index: 1;
   }
@@ -495,9 +495,9 @@
   }
 
   .cb-spark__seg {
-    width: 4px;
-    height: 11px;
-    border-radius: var(--radius-xs, 1px);
+    width: var(--space-1);
+    height: 0.6875rem;
+    border-radius: var(--radius-xs);
     background: var(--color-accent-subtle);
     transition: background 0.3s, box-shadow 0.3s;
     flex-shrink: 0;
@@ -505,19 +505,19 @@
 
   .cb-spark__seg--on {
     background: var(--color-accent);
-    box-shadow: 0 0 3px var(--color-accent-muted);
+    box-shadow: 0 0 0.1875rem var(--color-accent-muted);
   }
 
   /* Warning — amber shift */
   .cb-spark--warning .cb-spark__seg--on {
-    background: #e67e22;
-    box-shadow: 0 0 3px rgba(230, 126, 34, 0.5);
+    background: var(--color-warning);
+    box-shadow: 0 0 0.1875rem color-mix(in srgb, var(--color-warning) 50%, transparent);
   }
 
   /* Critical — red + pulse */
   .cb-spark--critical .cb-spark__seg--on {
-    background: #c0392b;
-    box-shadow: 0 0 4px rgba(192, 57, 43, 0.6);
+    background: var(--color-error);
+    box-shadow: 0 0 0.25rem color-mix(in srgb, var(--color-error) 60%, transparent);
     animation: spark-critical 1.2s ease-in-out infinite;
   }
 
@@ -529,37 +529,37 @@
   .cb-spark__readout {
     display: flex;
     align-items: baseline;
-    gap: 3px;
+    gap: 0.1875rem;
     font-family: var(--font-mono);
   }
 
   .cb-spark__val {
-    font-size: 11px;
+    font-size: 0.6875rem;
     font-weight: 600;
     color: var(--color-accent);
     letter-spacing: 0.02em;
   }
 
-  .cb-spark--warning .cb-spark__val  { color: #e67e22; }
-  .cb-spark--critical .cb-spark__val { color: #c0392b; }
+  .cb-spark--warning .cb-spark__val  { color: var(--color-warning); }
+  .cb-spark--critical .cb-spark__val { color: var(--color-error); }
 
   .cb-spark__div {
-    font-size: 10px;
-    color: rgba(160, 152, 128, 0.3);
+    font-size: 0.625rem;
+    color: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
   }
 
   .cb-spark__cap {
-    font-size: 10px;
-    color: rgba(160, 152, 128, 0.45);
+    font-size: 0.625rem;
+    color: color-mix(in srgb, var(--color-text-secondary) 45%, transparent);
     letter-spacing: 0.02em;
   }
 
   .cb-spark__lbl {
-    font-size: 9px;
+    font-size: 0.5rem;
     font-weight: 600;
-    color: rgba(160, 152, 128, 0.35);
+    color: color-mix(in srgb, var(--color-text-secondary) 35%, transparent);
     text-transform: uppercase;
     letter-spacing: 0.12em;
-    margin-left: 5px;
+    margin-left: 0.3125rem;
   }
 </style>

package/dist/b0-app-shell/{command-bar/CommandBar.svelte.d.ts → global-command-bar/GlobalCommandBar.svelte.d.ts}

@@ -1,5 +1,5 @@
 /**
- * CommandBar — The LEAP global command strip.
+ * GlobalCommandBar — The LEAP global command strip.
  *
  * Three zones, always in the same positions across every LEAP app:
  *   LEFT  · FLOW PHASE — the system's current operational state
@@ -9,7 +9,7 @@
  * Prop-driven: no store imports. Each app wires it to its own stores.
  *
  * Placement: top of every LEAP app shell, above app-specific navigation.
- * Height: 52px fixed.
+ * Height: 3.25rem fixed.
  */
 interface Props {
     /** Whether the daemon socket is connected. */
@@ -29,7 +29,7 @@ interface Props {
     /** Called when the user submits an intent. */
     onintent?: (text: string) => void;
 }
-declare const CommandBar: import("svelte").Component<Props, {}, "">;
-type CommandBar = ReturnType<typeof CommandBar>;
-export default CommandBar;
-//# sourceMappingURL=CommandBar.svelte.d.ts.map
+declare const GlobalCommandBar: import("svelte").Component<Props, {}, "">;
+type GlobalCommandBar = ReturnType<typeof GlobalCommandBar>;
+export default GlobalCommandBar;
+//# sourceMappingURL=GlobalCommandBar.svelte.d.ts.map

package/dist/b0-app-shell/global-command-bar/GlobalCommandBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalCommandBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/b0-app-shell/global-command-bar/GlobalCommandBar.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AAEH,UAAU,KAAK;IACb,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkJH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/b0-app-shell/index.d.ts

@@ -9,6 +9,6 @@
  * and provide the shared control surface for system state, intent dispatch,
  * and resource visibility. They are prop-driven (no store imports).
  */
-export { default as CommandBar } from './command-bar/CommandBar.svelte';
+export { default as GlobalCommandBar } from './global-command-bar/GlobalCommandBar.svelte';
 export { ClarificationOverlay } from './clarification-overlay/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/b0-app-shell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/b0-app-shell/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/b0-app-shell/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/b0-app-shell/index.js

@@ -9,5 +9,5 @@
  * and provide the shared control surface for system state, intent dispatch,
  * and resource visibility. They are prop-driven (no store imports).
  */
-export { default as CommandBar } from './command-bar/CommandBar.svelte';
+export { default as GlobalCommandBar } from './global-command-bar/GlobalCommandBar.svelte';
 export { ClarificationOverlay } from './clarification-overlay/index';

package/dist/d0-data-viz/BarChart.test.js

@@ -0,0 +1,53 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import BarChart from './BarChart.svelte';
+const sampleSeries = [
+    { id: 's1', label: 'Alpha', data: [{ label: 'A', value: 10 }, { label: 'B', value: 20 }], color: '#b87333' },
+];
+describe('BarChart', () => {
+    afterEach(() => cleanup());
+    it('renders an svg with role img', () => {
+        const { container } = render(BarChart, { props: { series: sampleSeries } });
+        const svg = container.querySelector('svg[role="img"]');
+        expect(svg).not.toBeNull();
+    });
+    it('renders bars for each data point', () => {
+        const { container } = render(BarChart, { props: { series: sampleSeries } });
+        expect(container.querySelectorAll('.d0-bar').length).toBe(2);
+    });
+    it('renders a bar with the correct color', () => {
+        const { container } = render(BarChart, { props: { series: [{ id: 'c', label: 'C', data: [{ label: 'X', value: 5 }], color: '#ff0000' }] } });
+        const bar = container.querySelector('.d0-bar');
+        expect(bar?.getAttribute('fill')).toBe('#ff0000');
+    });
+    it('renders grid lines when showGrid is true', () => {
+        const { container } = render(BarChart, { props: { series: sampleSeries, showGrid: true } });
+        expect(container.querySelectorAll('.d0-grid-line').length).toBeGreaterThan(0);
+    });
+    it('hides grid lines when showGrid is false', () => {
+        const { container } = render(BarChart, { props: { series: sampleSeries, showGrid: false } });
+        expect(container.querySelectorAll('.d0-grid-line').length).toBe(0);
+    });
+    it('swaps axes for horizontal orientation', () => {
+        const { container } = render(BarChart, { props: { series: sampleSeries, orientation: 'horizontal' } });
+        const svg = container.querySelector('svg');
+        expect(svg).not.toBeNull();
+        expect(container.querySelectorAll('.d0-bar').length).toBe(2);
+    });
+    it('renders axis labels when showLabels is true', () => {
+        const { container } = render(BarChart, { props: { series: sampleSeries, showLabels: true } });
+        const labels = container.querySelectorAll('.d0-axis-label');
+        expect(labels.length).toBeGreaterThan(0);
+    });
+    it('still renders with empty series', () => {
+        const { container } = render(BarChart, { props: { series: [] } });
+        expect(container.querySelector('svg')).not.toBeNull();
+        expect(container.querySelectorAll('.d0-bar').length).toBe(0);
+    });
+    it('renders bar titles with label and value', () => {
+        const { container } = render(BarChart, { props: { series: sampleSeries } });
+        const title = container.querySelector('.d0-bar title');
+        expect(title?.textContent).toContain('A');
+        expect(title?.textContent).toContain('10');
+    });
+});

package/dist/d0-data-viz/CheckpointBar.test.js

@@ -0,0 +1,83 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import CheckpointBar from './CheckpointBar.svelte';
+const sampleCheckpoints = [
+    { seqno: 1, id: 'cp-1', component: 'ryu-panel', componentType: 'rust-crate', status: 'committed', description: 'Initial panel', timestamp: 1000 },
+    { seqno: 2, id: 'cp-2', component: 'ui-shell', componentType: 'ui-bundle', status: 'committed', description: 'Shell update', timestamp: 2000 },
+    { seqno: 3, id: 'cp-3', component: 'config', componentType: 'config', status: 'system', description: 'Config change', timestamp: 3000 },
+];
+describe('CheckpointBar', () => {
+    afterEach(() => cleanup());
+    it('renders the checkpoint bar container', () => {
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        expect(container.querySelector('.checkpoint-bar')).not.toBeNull();
+    });
+    it('renders a node for each checkpoint', () => {
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        expect(container.querySelectorAll('.checkpoint-node').length).toBe(3);
+    });
+    it('marks the current checkpoint as active', () => {
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 2 },
+        });
+        const nodes = container.querySelectorAll('.checkpoint-node');
+        expect(nodes[1].classList.contains('active')).toBe(true);
+        expect(nodes[0].classList.contains('active')).toBe(false);
+    });
+    it('calls onCheckpointClick when a node is clicked', async () => {
+        const onCheckpointClick = vi.fn();
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1, onCheckpointClick },
+        });
+        const node = container.querySelector('.checkpoint-node');
+        await fireEvent.click(node);
+        expect(onCheckpointClick).toHaveBeenCalledTimes(1);
+        expect(onCheckpointClick).toHaveBeenCalledWith(sampleCheckpoints[0]);
+    });
+    it('calls onCheckpointDoubleClick on double click', async () => {
+        const onCheckpointDoubleClick = vi.fn();
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1, onCheckpointDoubleClick },
+        });
+        const node = container.querySelector('.checkpoint-node');
+        await fireEvent.dblClick(node);
+        expect(onCheckpointDoubleClick).toHaveBeenCalledTimes(1);
+    });
+    it('renders the current badge with seqno', () => {
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 2 },
+        });
+        expect(container.querySelector('.current-badge')?.textContent).toContain('2');
+    });
+    it('renders preview badge when previewSeqno is set', () => {
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1, previewSeqno: 3 },
+        });
+        expect(container.querySelector('.preview-badge')).not.toBeNull();
+        expect(container.textContent).toContain('Previewing checkpoint 3');
+    });
+    it('marks preview checkpoint with preview class', () => {
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1, previewSeqno: 2 },
+        });
+        const nodes = container.querySelectorAll('.checkpoint-node');
+        expect(nodes[1].classList.contains('preview')).toBe(true);
+    });
+    it('renders a timeline connecting line', () => {
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        expect(container.querySelector('.timeline-line')).not.toBeNull();
+    });
+    it('renders node symbols for each checkpoint', () => {
+        const { container } = render(CheckpointBar, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        const symbols = container.querySelectorAll('.node-symbol');
+        expect(symbols.length).toBe(3);
+    });
+});

package/dist/d0-data-viz/CheckpointPill.svelte

@@ -49,7 +49,7 @@
 
   // Color for current component type
   let componentColor = $derived(
-    displayCheckpoint ? getCheckpointColor(displayCheckpoint.componentType, true) : '#b87333'
+    displayCheckpoint ? getCheckpointColor(displayCheckpoint.componentType, true) : 'var(--color-accent, #888)'
   );
 
   // Toggle expanded state
@@ -57,6 +57,11 @@
     isExpanded = !isExpanded;
   }
 
+  function handlePillClick(event: MouseEvent) {
+    if ((event.target as Element).closest('.checkpoint-bar')) return;
+    toggleExpanded();
+  }
+
   // Collapse when clicking outside (handled by parent or escape key)
   function handleKeyDown(event: KeyboardEvent) {
     if (event.key === 'Escape' && isExpanded) {
@@ -91,7 +96,7 @@
   tabindex="0"
   aria-label={ariaLabel}
   aria-expanded={isExpanded}
-  onclick={toggleExpanded}
+  onclick={handlePillClick}
   onkeydown={(e) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -132,7 +137,7 @@
           ▲
         </button>
       </div>
-      <div class="pill-content" onclick={(e) => e.stopPropagation()}>
+      <div class="pill-content" role="group" aria-label="Checkpoint timeline">
         <CheckpointBar
           {checkpoints}
           {currentSeqno}

package/dist/d0-data-viz/CheckpointPill.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckpointPill.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/CheckpointPill.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKnD,UAAU,KAAK;IACb,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,uBAAuB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuHH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CheckpointPill.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/CheckpointPill.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKnD,UAAU,KAAK;IACb,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,uBAAuB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA4HH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}