@stephen-netu/design-system 0.1.0 → 0.2.1

package/dist/d0-data-viz/SparkLine.svelte.d.ts

@@ -0,0 +1,12 @@
+interface SparkLineProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    strokeWidth?: number;
+    'aria-label'?: string;
+}
+declare const SparkLine: import("svelte").Component<SparkLineProps, {}, "">;
+type SparkLine = ReturnType<typeof SparkLine>;
+export default SparkLine;
+//# sourceMappingURL=SparkLine.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SparkLine.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/SparkLine.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAwCH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/{src → dist}/d0-data-viz/StorageMap.svelte

@@ -87,7 +87,7 @@
   .sm-root {
     position: relative;
     background: var(--color-bg-surface, #222);
-    border: 1px solid var(--color-accent-subtle, rgba(184, 115, 51, 0.15));
+    border: 1px solid var(--color-accent-subtle, var(--color-accent-muted));
     border-radius: var(--radius-lg, 8px);
     overflow: hidden;
     font-family: var(--font-mono, ui-monospace, monospace);
@@ -99,7 +99,7 @@
     align-items: center;
     padding: 8px 12px;
     background: var(--color-bg-elevated, #2a2a2a);
-    border-bottom: 1px solid var(--color-border-subtle, rgba(184, 115, 51, 0.1));
+    border-bottom: 1px solid var(--color-border-subtle, var(--color-accent-subtle));
   }
 
   .sm-total {
@@ -110,7 +110,7 @@
 
   .sm-legend {
     display: flex;
-    gap: 12px;
+    gap: var(--space-3);
     font-size: 11px;
     color: var(--color-text-secondary, #a09880);
   }
@@ -118,7 +118,7 @@
   .sm-legend-item {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--space-1);
   }
 
   .sm-swatch {
@@ -128,7 +128,7 @@
     border-radius: 2px;
   }
 
-  .sm-swatch--kos { background: var(--color-accent, #b87333); }
+  .sm-swatch--kos { background: var(--color-accent, var(--color-accent)); }
   .sm-swatch--external { background: #a09880; }
   .sm-swatch--unknown { background: #5a5245; }
 
@@ -152,7 +152,7 @@
 
   .sm-cell:hover {
     opacity: 0.85;
-    border-color: var(--color-accent, #b87333);
+    border-color: var(--color-accent, var(--color-accent));
   }
 
   .sm-label {

package/dist/d0-data-viz/StorageMap.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { StorageNode, StorageMapConfig } from './storage-map-types';
+interface Props {
+    nodes: StorageNode[];
+    width?: number;
+    height?: number;
+    config?: StorageMapConfig;
+    onnodeclick?: (node: StorageNode) => void;
+}
+declare const StorageMap: import("svelte").Component<Props, {}, "">;
+type StorageMap = ReturnType<typeof StorageMap>;
+export default StorageMap;
+//# sourceMappingURL=StorageMap.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageMap.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/StorageMap.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAe,MAAM,qBAAqB,CAAC;AAGpF,UAAU,KAAK;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AA0EH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/{src → dist}/d0-data-viz/Timeline.svelte

@@ -154,12 +154,12 @@
   }
 
   .d0-timeline-line {
-    stroke: var(--d0-timeline-line, rgba(184, 115, 51, 0.3));
+    stroke: var(--d0-timeline-line, var(--color-accent-muted));
     stroke-width: 2;
   }
 
   .d0-timeline-dot {
-    fill: var(--d0-timeline-dot, #b87333);
+    fill: var(--d0-timeline-dot, var(--color-accent));
     transition: r 150ms ease;
   }
 

package/dist/d0-data-viz/Timeline.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { TimelineEntry } from './types';
+interface TimelineComponentProps {
+    entries: TimelineEntry[];
+    orientation?: 'horizontal' | 'vertical';
+    'aria-label'?: string;
+}
+declare const Timeline: import("svelte").Component<TimelineComponentProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;
+//# sourceMappingURL=Timeline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/Timeline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG3C,UAAU,sBAAsB;IAC9B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA4FH,QAAA,MAAM,QAAQ,4DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,329 @@
+<script lang="ts">
+  import type { WorldLineData, WorldLineCharacter, WorldLineEvent, EventType } from './world-line-types';
+
+  // ── Props ──
+  let {
+    data,
+    selectedEventId = '',
+    onEventSelect,
+    height = 200,
+  }: {
+    data: WorldLineData;
+    selectedEventId?: string;
+    onEventSelect: (id: string) => void;
+    height?: number;
+  } = $props();
+
+  // ── Constants (from mockup) ──
+  const LABEL_W = 112;
+  const PAD_R = 40;
+  const ROW_H = 52;
+  const TOP_H = 28;
+  const NODE_R = 10;
+
+  // ── State ──
+  let svgEl: SVGSVGElement;
+  let containerW = $state(800);
+
+  // ── Derived ──
+  const totalH = $derived(TOP_H + data.characters.length * ROW_H + 36);
+  const effectiveH = $derived(Math.max(height, totalH));
+
+  function rowCenters(): number[] {
+    return data.characters.map((_, i) => TOP_H + i * ROW_H + ROW_H / 2);
+  }
+
+  function eventX(evZoneW: number, normX: number[]): number[] {
+    return normX.map(n => LABEL_W + n * evZoneW);
+  }
+
+  function hexPts(cx: number, cy: number, r: number): string {
+    const pts: string[] = [];
+    for (let i = 0; i < 6; i++) {
+      const a = (Math.PI / 3) * i - Math.PI / 2;
+      pts.push(`${(cx + r * Math.cos(a)).toFixed(1)},${(cy + r * Math.sin(a)).toFixed(1)}`);
+    }
+    return pts.join(' ');
+  }
+
+  function shapePoints(type: EventType, cx: number, cy: number, r: number): string {
+    if (type === 'arrival') {
+      return `${cx + r},${cy} ${cx - r * 0.7},${cy - r} ${cx - r * 0.7},${cy + r}`;
+    } else if (type === 'conflict') {
+      return `${cx},${cy - r} ${cx + r},${cy} ${cx},${cy + r} ${cx - r},${cy}`;
+    } else {
+      // ritual — hexagon
+      return hexPts(cx, cy, r);
+    }
+  }
+
+  function eventNormX(): number[] {
+    const n = data.events.length;
+    if (n === 0) return [];
+    if (n === 1) return [0.5];
+    return data.events.map((_, i) => 0.12 + (i / (n - 1)) * 0.71);
+  }
+
+  // ── Resize ──
+  $effect(() => {
+    if (!svgEl) return;
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        containerW = entry.contentRect.width;
+      }
+    });
+    observer.observe(svgEl.parentElement!);
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="wl-container" style="height: {effectiveH}px; --row-h: {ROW_H}px;">
+  <svg
+    bind:this={svgEl}
+    class="wl-canvas"
+    viewBox="0 0 {containerW} {effectiveH}"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    {#if data.characters.length > 0 && data.events.length > 0}
+    {@const rcs = rowCenters()}
+    {@const evZoneW = containerW - LABEL_W - PAD_R}
+    {@const exs = eventX(evZoneW, eventNormX())}
+
+    <!-- ── Era bands ── -->
+    {#each data.eras as era}
+      {@const ex0 = LABEL_W + era.xNorm[0] * evZoneW}
+      {@const ex1 = LABEL_W + era.xNorm[1] * evZoneW}
+      <rect x={ex0} y="0" width={ex1 - ex0} height={effectiveH} fill={era.color} />
+      {#if era.xNorm[1] < 1}
+        <line x1={ex1} y1="0" x2={ex1} y2={effectiveH} stroke="rgba(255,255,255,0.08)" stroke-width="1" />
+      {/if}
+      <text
+        x={(ex0 + ex1) / 2}
+        y="15"
+        text-anchor="middle"
+        fill="rgba(110,118,129,0.6)"
+        font-family="var(--font-mono)"
+        font-size="8"
+        letter-spacing="2"
+      >{era.label}</text>
+    {/each}
+
+    <!-- ── Event column labels (above rows) ── -->
+    {#each data.events as ev, ei}
+      {#each ev.label as line, li}
+        <text
+          x={exs[ei]}
+          y={effectiveH - 56 + li * 12}
+          text-anchor="middle"
+          fill={ev.id === selectedEventId ? '#d29922' : 'rgba(110,118,129,0.6)'}
+          font-family="var(--font-mono)"
+          font-size="7.5"
+          letter-spacing="1.2"
+        >{line}</text>
+      {/each}
+      <!-- Tick line from rows to label -->
+      <line
+        x1={exs[ei]}
+        y1={TOP_H + data.characters.length * ROW_H}
+        x2={exs[ei]}
+        y2={TOP_H + data.characters.length * ROW_H + 6}
+        stroke={ev.id === selectedEventId ? '#d29922' : 'rgba(110,118,129,0.3)'}
+        stroke-width="1"
+      />
+    {/each}
+
+    <!-- ── Horizontal world lines (per character) ── -->
+    {#each data.characters as char, ci}
+      {@const cy = rcs[ci]}
+      {@const charEvents: {x: number; state: string}[] = data.events
+        .map((ev, i) => ({ ev, i, x: exs[i], state: ev.attendance[char.id] }))
+        .filter(e => e.state)}
+      {#each charEvents.slice(0, -1) as ce, k}
+        {@const next = charEvents[k + 1]}
+        {@const isGap = ce.state === 'psi' || next.state === 'psi'}
+        <line
+          x1={ce.x}
+          y1={cy}
+          x2={next.x}
+          y2={cy}
+          stroke={char.color}
+          stroke-width="1.5"
+          opacity="0.45"
+          stroke-dasharray={isGap ? '5 4' : 'none'}
+        />
+      {/each}
+    {/each}
+
+    <!-- ── Intersection connectors (vertical at shared events) ── -->
+    {#each data.events as ev, ei}
+      {@const attendees = data.characters.filter(c => ev.attendance[c.id])}
+      {#if attendees.length >= 2}
+        {@const ys = attendees.map(c => rcs[data.characters.indexOf(c)])}
+        {@const y1 = Math.min(...ys) + NODE_R + 2}
+        {@const y2 = Math.max(...ys) - NODE_R - 2}
+        {@const mid = (y1 + y2) / 2}
+        <line
+          x1={exs[ei]}
+          y1={y1}
+          x2={exs[ei]}
+          y2={y2}
+          stroke="rgba(255,255,255,0.18)"
+          stroke-width="1"
+          stroke-dasharray="3 3"
+        />
+        <rect
+          x={exs[ei] - 10}
+          y={mid - 7}
+          width="20"
+          height="14"
+          rx="3"
+          fill="#0d1117"
+          stroke="rgba(255,255,255,0.12)"
+          stroke-width="1"
+        />
+        <text
+          x={exs[ei]}
+          y={mid + 4}
+          text-anchor="middle"
+          fill="rgba(255,255,255,0.35)"
+          font-family="var(--font-mono)"
+          font-size="7.5"
+          font-weight="600"
+        >×{attendees.length}</text>
+      {/if}
+    {/each}
+
+    <!-- ── Row label dividers ── -->
+    {#each data.characters as _, ci}
+      {#if ci > 0}
+        {@const y = rcs[ci] - ROW_H / 2}
+        <line x1="0" y1={y} x2={containerW} y2={y} stroke="rgba(255,255,255,0.03)" stroke-width="1" />
+      {/if}
+    {/each}
+
+    <!-- ── Character row labels (left) ── -->
+    {#each data.characters as char, ci}
+      {@const cy = rcs[ci]}
+      <rect x="0" y={cy - ROW_H / 2} width="2" height={ROW_H} fill={char.color} opacity="0.5" />
+      <circle cx="18" cy={cy} r="4" fill={char.color} opacity="0.8" />
+      <text
+        x="28"
+        y={cy + 4}
+        fill="rgba(139,148,158,0.85)"
+        font-family="var(--font-mono)"
+        font-size="8.5"
+        font-weight="500"
+        letter-spacing="1"
+      >{char.label}</text>
+    {/each}
+
+    <!-- ── Event nodes (on top) ── -->
+    {#each data.events as ev, ei}
+      {#each data.characters as char}
+        {@const st = ev.attendance[char.id]}
+        {#if st}
+          {@const cy = rcs[data.characters.indexOf(char)]}
+          {@const isSelected = ev.id === selectedEventId}
+          {@const isPsi = st === 'psi'}
+          {@const cx = exs[ei]}
+          {@const fillColor = isPsi ? 'transparent' : char.color}
+          {@const strokeColor = char.color}
+
+          <g
+            class="wl-node"
+            class:psi={isPsi}
+            class:selected={isSelected}
+            role="button"
+            tabindex="0"
+            cursor="pointer"
+            onclick={() => onEventSelect(ev.id)}
+            onkeydown={(e) => e.key === 'Enter' && onEventSelect(ev.id)}
+          >
+            {#if isPsi}
+              <!-- Gold animated ring for ψ nodes -->
+              <circle
+                {cx}
+                cy={cy}
+                r={NODE_R + 5}
+                fill="none"
+                stroke="#d29922"
+                stroke-width="1"
+                opacity="0.6"
+              >
+                <animate attributeName="opacity" values="0.6;0.15;0.6" dur="2.4s" repeatCount="indefinite" />
+                <animate attributeName="r" values="{NODE_R + 5};{NODE_R + 9};{NODE_R + 5}" dur="2.4s" repeatCount="indefinite" />
+              </circle>
+            {/if}
+
+            {#if isSelected}
+              <!-- Selection halo -->
+              <circle {cx} cy={cy} r={NODE_R + 7} fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="2" />
+            {/if}
+
+            {#if ev.type === 'encounter'}
+              <circle
+                {cx}
+                cy={cy}
+                r={NODE_R * 0.85}
+                fill={fillColor}
+                stroke={strokeColor}
+                stroke-width="1.8"
+                opacity={isPsi ? '0.9' : '1'}
+              />
+            {:else}
+              <polygon
+                points={shapePoints(ev.type, cx, cy, NODE_R)}
+                fill={fillColor}
+                stroke={strokeColor}
+                stroke-width="1.8"
+                opacity={isPsi ? '0.9' : '1'}
+              />
+            {/if}
+
+            {#if isPsi}
+              <!-- Subtle inner fill for ψ -->
+              {#if ev.type === 'encounter'}
+                <circle {cx} cy={cy} r={NODE_R * 0.85} fill="{char.color}18" stroke="none" />
+              {:else}
+                <polygon
+                  points={shapePoints(ev.type, cx, cy, NODE_R)}
+                  fill="{char.color}18"
+                  stroke="none"
+                />
+              {/if}
+            {/if}
+          </g>
+        {/if}
+      {/each}
+
+      <!-- Selected event vertical tick at top -->
+      {#if ev.id === selectedEventId}
+        <line
+          x1={exs[ei]}
+          y1="20"
+          x2={exs[ei]}
+          y2="26"
+          stroke="#d29922"
+          stroke-width="2"
+        />
+      {/if}
+    {/each}
+    {/if}
+  </svg>
+</div>
+
+<style>
+  .wl-canvas {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  .wl-node {
+    transition: opacity 0.15s ease;
+  }
+
+  .wl-node:hover {
+    opacity: 1;
+  }
+</style>

package/dist/d0-data-viz/WorldLineTimeline.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { WorldLineData } from './world-line-types';
+type $$ComponentProps = {
+    data: WorldLineData;
+    selectedEventId?: string;
+    onEventSelect: (id: string) => void;
+    height?: number;
+};
+declare const WorldLineTimeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorldLineTimeline = ReturnType<typeof WorldLineTimeline>;
+export default WorldLineTimeline;
+//# sourceMappingURL=WorldLineTimeline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WorldLineTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/WorldLineTimeline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAiD,MAAM,oBAAoB,CAAC;AAEtG,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AA0MJ,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/d0-data-viz/checkpoint-types.d.ts

@@ -0,0 +1,104 @@
+/** Component types for color coding per ADR spec */
+export type CheckpointComponentType = 'rust-crate' | 'ui-bundle' | 'config' | 'faculty-state' | 'substrate-binary' | 'system-snapshot';
+/** Checkpoint status visual encoding */
+export type CheckpointStatus = 'committed' | 'system' | 'proposed' | 'partial';
+/** A single checkpoint entry on the timeline */
+export interface Checkpoint {
+    /** Unique sequence number (seqno per sigchain) */
+    seqno: number;
+    /** Human-readable identifier */
+    id: string;
+    /** Component name (e.g., "ryu-hamiltonian-panel") */
+    component: string;
+    /** Component type for color coding */
+    componentType: CheckpointComponentType;
+    /** Checkpoint status for visual encoding */
+    status: CheckpointStatus;
+    /** Version transition (optional) */
+    version?: {
+        from: string;
+        to: string;
+    };
+    /** Author identifier */
+    author?: string;
+    /** Associated task ID */
+    taskId?: string;
+    /** Human description */
+    description: string;
+    /** Timestamp as sequence number reference */
+    timestamp: number;
+}
+/** Color mapping — references CSS custom properties set by themeStore */
+export declare const CHECKPOINT_COLORS: Record<CheckpointComponentType, string>;
+/** Get checkpoint color with fallback for when CSS vars aren't set */
+export declare function getCheckpointColor(type: CheckpointComponentType, isDark?: boolean): string;
+/** Visual encoding for checkpoint status */
+export declare const CHECKPOINT_STATUS_SYMBOLS: Record<CheckpointStatus, string>;
+export interface CheckpointBarProps {
+    checkpoints: Checkpoint[];
+    currentSeqno: number;
+    previewSeqno?: number | null;
+    onCheckpointClick?: (checkpoint: Checkpoint) => void;
+    onCheckpointDoubleClick?: (checkpoint: Checkpoint) => void;
+    /** Callback when "Now" handle is dragged (seqno target) */
+    onNowHandleDrag?: (seqno: number) => void;
+    /** Callback when exiting preview mode */
+    onExitPreview?: () => void;
+    'aria-label'?: string;
+}
+export interface PreviewState {
+    seqno: number;
+    checkpoint: Checkpoint;
+    isReadOnly: boolean;
+}
+export interface RollbackConfirmation {
+    targetSeqno: number;
+    targetCheckpoint: Checkpoint;
+    currentSeqno: number;
+    affectedComponents: string[];
+    archivedConversations: number;
+}
+export interface KeyboardNavigationState {
+    focusedIndex: number;
+    isPreviewMode: boolean;
+}
+/** Keyboard action mapping per ADR accessibility spec */
+export declare const CHECKPOINT_KEYBOARD_ACTIONS: {
+    readonly ArrowLeft: "navigate-prev";
+    readonly ArrowRight: "navigate-next";
+    readonly Enter: "preview";
+    readonly 'Shift+Enter': "rollback";
+    readonly Escape: "exit-preview";
+    readonly Home: "jump-genesis";
+    readonly End: "jump-now";
+};
+export type CheckpointKeyboardAction = typeof CHECKPOINT_KEYBOARD_ACTIONS[keyof typeof CHECKPOINT_KEYBOARD_ACTIONS];
+export interface TimelineStoreState {
+    checkpoints: Checkpoint[];
+    currentSeqno: number;
+    previewSeqno: number | null;
+    isScrubbing: boolean;
+    visibleRange: {
+        start: number;
+        end: number;
+    };
+}
+export interface TimelineStoreActions {
+    scrubTo(seqno: number): Promise<void>;
+    exitPreview(): void;
+    rollbackTo(seqno: number): Promise<RollbackResult>;
+    navigateToCheckpoint(index: number): void;
+}
+export interface RollbackResult {
+    success: boolean;
+    newSeqno?: number;
+    error?: string;
+}
+/** Number of checkpoints to keep in memory (per ADR performance spec) */
+export declare const VISIBLE_CHECKPOINTS = 50;
+/** Checkpoint bar height in pixels (ADR spec: 48px) */
+export declare const CHECKPOINT_BAR_HEIGHT = 48;
+/** Node sizes for visual encoding */
+export declare const CHECKPOINT_NODE_SIZE = 12;
+export declare const CHECKPOINT_NODE_ACTIVE_SIZE = 16;
+//# sourceMappingURL=checkpoint-types.d.ts.map

package/dist/d0-data-viz/checkpoint-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkpoint-types.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/checkpoint-types.ts"],"names":[],"mappings":"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"}

package/dist/d0-data-viz/checkpoint-types.js

@@ -0,0 +1,49 @@
+// D0 Data Viz — Checkpoint Timeline Types
+// Pure TypeScript — no Svelte, no DOM dependencies
+// ADR: ui-timeline-checkpoint-bar-001
+/** Color mapping — references CSS custom properties set by themeStore */
+export const CHECKPOINT_COLORS = {
+    'rust-crate': 'var(--d0-checkpoint-rust)',
+    'ui-bundle': 'var(--d0-checkpoint-ui)',
+    'config': 'var(--d0-checkpoint-config)',
+    'faculty-state': 'var(--d0-checkpoint-faculty)',
+    'substrate-binary': 'var(--d0-checkpoint-substrate)',
+    'system-snapshot': 'var(--d0-checkpoint-aggregate)',
+};
+/** Get checkpoint color with fallback for when CSS vars aren't set */
+export function getCheckpointColor(type, isDark = true) {
+    const fallbacks = {
+        'rust-crate': { light: '#8a5a28', dark: '#b87333' },
+        'ui-bundle': { light: '#2d6b6e', dark: '#5f9ea0' },
+        'config': { light: '#7c6fae', dark: '#a99fd6' },
+        'faculty-state': { light: '#d4a03d', dark: '#e6c470' },
+        'substrate-binary': { light: '#c75a5a', dark: '#d98a8a' },
+        'system-snapshot': { light: '#6b7280', dark: '#9ca3af' },
+    };
+    return fallbacks[type][isDark ? 'dark' : 'light'];
+}
+/** Visual encoding for checkpoint status */
+export const CHECKPOINT_STATUS_SYMBOLS = {
+    'committed': '◉', // Filled circle
+    'system': '◎', // Double-ring circle
+    'proposed': '○', // Hollow circle
+    'partial': '◐', // Half-filled
+};
+/** Keyboard action mapping per ADR accessibility spec */
+export const CHECKPOINT_KEYBOARD_ACTIONS = {
+    ArrowLeft: 'navigate-prev',
+    ArrowRight: 'navigate-next',
+    Enter: 'preview',
+    'Shift+Enter': 'rollback',
+    Escape: 'exit-preview',
+    Home: 'jump-genesis',
+    End: 'jump-now',
+};
+// === Lazy Loading Constants ===
+/** Number of checkpoints to keep in memory (per ADR performance spec) */
+export const VISIBLE_CHECKPOINTS = 50;
+/** Checkpoint bar height in pixels (ADR spec: 48px) */
+export const CHECKPOINT_BAR_HEIGHT = 48;
+/** Node sizes for visual encoding */
+export const CHECKPOINT_NODE_SIZE = 12;
+export const CHECKPOINT_NODE_ACTIVE_SIZE = 16;

package/dist/d0-data-viz/d0-tokens.css

@@ -0,0 +1,32 @@
+/* D0 Data Viz — CSS Design Tokens */
+:root {
+  /* Chart */
+  --d0-chart-bg: var(--color-bg-panel, #222);
+  --d0-chart-grid: var(--color-accent-subtle, rgba(184, 115, 51, 0.1));
+  --d0-chart-text: var(--color-text-muted, #a09880);
+  --d0-chart-accent: var(--color-accent, #b87333);
+
+  /* Metric */
+  --d0-metric-trend-up: var(--color-success, #27ae60);
+  --d0-metric-trend-down: var(--color-error, #c0392b);
+
+  /* Timeline */
+  --d0-timeline-line: var(--color-accent-muted, rgba(184, 115, 51, 0.3));
+  --d0-timeline-dot: var(--color-accent, #b87333);
+
+  /* CheckpointBar (ADR: ui-timeline-checkpoint-bar-001) */
+  --d0-checkpoint-bar-height: 48px;
+  --d0-checkpoint-node-size: 12px;
+  --d0-checkpoint-node-active-size: 16px;
+  --d0-checkpoint-line-color: var(--color-accent-muted, rgba(184, 115, 51, 0.3));
+  --d0-checkpoint-tooltip-bg: rgba(34, 34, 34, 0.98);
+  --d0-checkpoint-tooltip-border: var(--color-accent-muted, rgba(184, 115, 51, 0.3));
+
+  /* Checkpoint Colors by Component Type */
+  --d0-checkpoint-brass: var(--color-accent, #b87333);
+  --d0-checkpoint-teal: #5f9ea0;
+  --d0-checkpoint-gold: #daa520;
+  --d0-checkpoint-purple: #9370db;
+  --d0-checkpoint-red: #cd5c5c;
+  --d0-checkpoint-gray: #2f4f4f;
+}

package/dist/d0-data-viz/index.d.ts

@@ -0,0 +1,17 @@
+export type { DataPoint, DataSeries, ChartProps, MetricCardProps, TimelineEntry, TimelineProps, } from './types';
+export type { Checkpoint, CheckpointComponentType, CheckpointStatus, CheckpointBarProps, PreviewState, RollbackConfirmation, RollbackResult, TimelineStoreState, TimelineStoreActions, KeyboardNavigationState, CheckpointKeyboardAction, } from './checkpoint-types';
+export { CHECKPOINT_COLORS, CHECKPOINT_STATUS_SYMBOLS, CHECKPOINT_KEYBOARD_ACTIONS, VISIBLE_CHECKPOINTS, CHECKPOINT_BAR_HEIGHT, CHECKPOINT_NODE_SIZE, CHECKPOINT_NODE_ACTIVE_SIZE, getCheckpointColor, } from './checkpoint-types';
+export type { StorageNode, StorageMapConfig, TreemapCell, TreemapLayout, OwnerTier } from './storage-map-types';
+export { computeTreemap, formatBytes, TIER_COLORS } from './storage-map-types';
+export { default as BarChart } from './BarChart.svelte';
+export { default as SparkLine } from './SparkLine.svelte';
+export { default as MetricCard } from './MetricCard.svelte';
+export { default as Timeline } from './Timeline.svelte';
+export { default as StorageMap } from './StorageMap.svelte';
+export { default as CheckpointBar } from './CheckpointBar.svelte';
+export { default as CheckpointPill } from './CheckpointPill.svelte';
+export { default as ConnectionHealth } from './ConnectionHealth.svelte';
+export { default as WorldLineTimeline } from './WorldLineTimeline.svelte';
+export type { WorldLineData, WorldLineCharacter, WorldLineEvent, WorldLineEra, EventType, ObservationState, } from './world-line-types';
+export { CHECKPOINT_CSS_VARS, CHECKPOINT_COLOR_LABELS, CHECKPOINT_DEFAULT_COLORS, getEffectiveCheckpointColor, THEME_INTEGRATION, } from './theme-integration';
+//# sourceMappingURL=index.d.ts.map