@stephen-netu/design-system 0.2.0 → 0.2.2

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/CheckpointPill.svelte

@@ -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"}

package/dist/d0-data-viz/theme-integration.d.ts

@@ -10,8 +10,8 @@
  * @example
  * ```svelte
  * <script>
- *   import { CheckpointBar } from '@sov/design-system';
- *   import { themeStore } from '../lib/stores/themeStore.svelte';
+ *   import { CheckpointBar } from '@kos/design-system/d0-data-viz';
+ *   import { themeStore } from '@kos/design-system/s0-state';
  *
  *   // Colors automatically applied from themeStore
  *   // Users customize via Settings > Appearance > Checkpoint Colors
@@ -23,7 +23,7 @@
  * @example
  * ```typescript
  * // Programmatic color customization
- * import { themeStore } from '../lib/stores/themeStore.svelte';
+ * import { themeStore } from '@kos/design-system/s0-state';
  *
  * themeStore.setCustomToken('d0-checkpoint-rust', '#ff6b35');     // Orange rust
  * themeStore.setCustomToken('d0-checkpoint-ui', '#00d4aa');       // Teal UI

package/dist/d0-data-viz/theme-integration.js

@@ -10,8 +10,8 @@
  * @example
  * ```svelte
  * <script>
- *   import { CheckpointBar } from '@sov/design-system';
- *   import { themeStore } from '../lib/stores/themeStore.svelte';
+ *   import { CheckpointBar } from '@kos/design-system/d0-data-viz';
+ *   import { themeStore } from '@kos/design-system/s0-state';
  *
  *   // Colors automatically applied from themeStore
  *   // Users customize via Settings > Appearance > Checkpoint Colors
@@ -23,7 +23,7 @@
  * @example
  * ```typescript
  * // Programmatic color customization
- * import { themeStore } from '../lib/stores/themeStore.svelte';
+ * import { themeStore } from '@kos/design-system/s0-state';
  *
  * themeStore.setCustomToken('d0-checkpoint-rust', '#ff6b35');     // Orange rust
  * themeStore.setCustomToken('d0-checkpoint-ui', '#00d4aa');       // Teal UI

package/dist/d0-data-viz/theme-integration.test.js

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+import { getEffectiveCheckpointColor, CHECKPOINT_CSS_VARS, CHECKPOINT_DEFAULT_COLORS } from './theme-integration';
+describe('d0-data-viz/theme-integration', () => {
+    it('CHECKPOINT_CSS_VARS covers all component types', () => {
+        const types = [
+            'rust-crate',
+            'ui-bundle',
+            'config',
+            'faculty-state',
+            'substrate-binary',
+            'system-snapshot',
+        ];
+        for (const type of types) {
+            expect(CHECKPOINT_CSS_VARS[type]).toBeDefined();
+        }
+    });
+    it('CHECKPOINT_DEFAULT_COLORS has light and dark for all types', () => {
+        const types = [
+            'rust-crate',
+            'ui-bundle',
+            'config',
+            'faculty-state',
+            'substrate-binary',
+            'system-snapshot',
+        ];
+        for (const type of types) {
+            expect(CHECKPOINT_DEFAULT_COLORS[type]).toBeDefined();
+            expect(CHECKPOINT_DEFAULT_COLORS[type].light).toMatch(/^#[0-9a-f]{6}$/);
+            expect(CHECKPOINT_DEFAULT_COLORS[type].dark).toMatch(/^#[0-9a-f]{6}$/);
+        }
+    });
+    it('getEffectiveCheckpointColor returns CSS var reference in browser', () => {
+        // jsdom sets typeof window !== 'undefined'
+        const color = getEffectiveCheckpointColor('rust-crate', true);
+        expect(color).toContain('var(--d0-checkpoint-rust');
+    });
+    it('getEffectiveCheckpointColor returns fallback when isDark is false', () => {
+        const color = getEffectiveCheckpointColor('ui-bundle', false);
+        expect(color).toContain('var(--d0-checkpoint-ui');
+    });
+});

package/dist/demos/BspSizingInfographic.svelte

@@ -158,7 +158,7 @@
     margin: 0 auto;
     font-family: system-ui, sans-serif;
     color: var(--color-text-primary, #e8e4dc);
-    background: var(--color-bg, #1a1918);
+    background: var(--color-bg-canvas, #1a1918);
     min-height: 100vh;
     overflow-y: auto;
   }
@@ -168,26 +168,6 @@
     margin-bottom: 32px;
   }
   
-  .debug {
-    margin-top: 16px;
-    padding: 12px;
-    background: var(--color-accent-subtle);
-    border: 1px solid var(--color-accent, var(--color-accent));
-    border-radius: 6px;
-    font-family: monospace;
-    font-size: 12px;
-    text-align: left;
-  }
-  
-  .debug ul {
-    margin: 8px 0;
-    padding-left: 20px;
-  }
-  
-  .debug li {
-    margin: 2px 0;
-  }
-  
   h2 {
     margin: 0 0 8px 0;
     font-size: 24px;
@@ -318,22 +298,11 @@
     width: 100%;
   }
   
-  .mini-title {
-    font-weight: bold;
-    margin-bottom: 2px;
-  }
-  
   .mini-lines {
     color: var(--color-text-muted, #706858);
     font-size: 10px;
   }
   
-  .preview-header {
-    font-weight: bold;
-    margin-bottom: 4px;
-    font-size: 11px;
-  }
-  
   .preview-body {
     color: var(--color-text-secondary, #a89b8c);
     font-size: 10px;
@@ -350,6 +319,7 @@
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
   }
   
@@ -358,6 +328,7 @@
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 6;
+    line-clamp: 6;
     -webkit-box-orient: vertical;
   }