@stephen-netu/design-system 0.2.2 → 0.5.1

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

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

@@ -0,0 +1,78 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import CheckpointPill from './CheckpointPill.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 },
+];
+describe('CheckpointPill', () => {
+    afterEach(() => cleanup());
+    it('renders the pill container', () => {
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        expect(container.querySelector('.checkpoint-pill')).not.toBeNull();
+    });
+    it('renders collapsed pill with seqno by default', () => {
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        expect(container.querySelector('.pill-seqno')?.textContent).toBe('1');
+    });
+    it('renders collapsed state initially', () => {
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        expect(container.querySelector('.pill-collapsed')).not.toBeNull();
+        expect(container.querySelector('.pill-expanded')).toBeNull();
+    });
+    it('expands on click', async () => {
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        const pill = container.querySelector('.checkpoint-pill');
+        await fireEvent.click(pill);
+        expect(container.querySelector('.pill-expanded')).not.toBeNull();
+        expect(container.querySelector('.checkpoint-pill')?.classList.contains('expanded')).toBe(true);
+    });
+    it('renders the CheckpointBar when expanded', async () => {
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        await fireEvent.click(container.querySelector('.checkpoint-pill'));
+        expect(container.querySelector('.checkpoint-bar')).not.toBeNull();
+    });
+    it('collapses when close button is clicked', async () => {
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1 },
+        });
+        await fireEvent.click(container.querySelector('.checkpoint-pill'));
+        expect(container.querySelector('.pill-expanded')).not.toBeNull();
+        await fireEvent.click(container.querySelector('.pill-close'));
+        expect(container.querySelector('.pill-expanded')).toBeNull();
+    });
+    it('renders preview icon when in preview mode', () => {
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1, previewSeqno: 2 },
+        });
+        expect(container.querySelector('.checkpoint-pill')?.classList.contains('preview')).toBe(true);
+    });
+    it('calls onCheckpointClick when a checkpoint is selected from expanded bar', async () => {
+        const onCheckpointClick = vi.fn();
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: sampleCheckpoints, currentSeqno: 1, onCheckpointClick },
+        });
+        await fireEvent.click(container.querySelector('.checkpoint-pill'));
+        const node = container.querySelector('.checkpoint-node');
+        if (node) {
+            await fireEvent.click(node);
+            expect(onCheckpointClick).toHaveBeenCalledTimes(1);
+        }
+    });
+    it('renders with empty checkpoints array', () => {
+        const { container } = render(CheckpointPill, {
+            props: { checkpoints: [], currentSeqno: 0 },
+        });
+        expect(container.querySelector('.checkpoint-pill')).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,70 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import ConnectionHealth from './ConnectionHealth.svelte';
+const excellentMetrics = {
+    latency: 45,
+    jitter: 3,
+    lossRate: 0,
+    quality: 'excellent',
+    history: [
+        { timestamp: 1, latency: 40, lost: false },
+        { timestamp: 2, latency: 45, lost: false },
+        { timestamp: 3, latency: 42, lost: false },
+    ],
+};
+describe('ConnectionHealth', () => {
+    afterEach(() => cleanup());
+    it('renders the quality label', () => {
+        const { container } = render(ConnectionHealth, { props: { metrics: excellentMetrics } });
+        expect(container.querySelector('.health-label')?.textContent).toBe('Excellent');
+    });
+    it('renders latency in compact view', () => {
+        const { container } = render(ConnectionHealth, { props: { metrics: excellentMetrics } });
+        expect(container.querySelector('.health-latency')?.textContent).toBe('45ms');
+    });
+    it('renders a colored indicator dot', () => {
+        const { container } = render(ConnectionHealth, { props: { metrics: excellentMetrics } });
+        const indicator = container.querySelector('.health-indicator');
+        expect(indicator).not.toBeNull();
+        expect(indicator.style.backgroundColor).toContain('27ae60');
+    });
+    it('shows metrics grid when expanded', () => {
+        const { container } = render(ConnectionHealth, { props: { metrics: excellentMetrics, expanded: true } });
+        expect(container.querySelector('.metrics-grid')).not.toBeNull();
+        const text = container.textContent || '';
+        expect(text).toContain('Latency');
+        expect(text).toContain('Jitter');
+        expect(text).toContain('Loss');
+    });
+    it('calls onRetry when retry button is clicked in poor state', async () => {
+        const onRetry = vi.fn();
+        const poorMetrics = { ...excellentMetrics, quality: 'poor' };
+        const { container } = render(ConnectionHealth, { props: { metrics: poorMetrics, onRetry, expanded: true } });
+        const retryBtn = container.querySelector('.retry-button');
+        expect(retryBtn).not.toBeNull();
+        await fireEvent.click(retryBtn);
+        expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+    it('renders disconnected quality with muted color', () => {
+        const { container } = render(ConnectionHealth, {
+            props: { metrics: { ...excellentMetrics, quality: 'disconnected', latency: null, jitter: null } },
+        });
+        expect(container.querySelector('.health-label')?.textContent).toBe('Disconnected');
+    });
+    it('renders sparkline when showGraph is true and history exists', () => {
+        const { container } = render(ConnectionHealth, {
+            props: { metrics: excellentMetrics, showGraph: true },
+        });
+        expect(container.querySelector('.health-sparkline')).not.toBeNull();
+    });
+    it('hides sparkline when showGraph is false', () => {
+        const { container } = render(ConnectionHealth, {
+            props: { metrics: excellentMetrics, showGraph: false },
+        });
+        expect(container.querySelector('.health-sparkline')).toBeNull();
+    });
+    it('renders with null metrics', () => {
+        const { container } = render(ConnectionHealth, { props: { metrics: null } });
+        expect(container.querySelector('.health-label')?.textContent).toBe('Unknown');
+    });
+});

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

@@ -0,0 +1,57 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import MetricCard from './MetricCard.svelte';
+describe('MetricCard', () => {
+    afterEach(() => cleanup());
+    it('renders the label and value in default size', () => {
+        const { container } = render(MetricCard, { props: { label: 'CPU', value: '42' } });
+        expect(container.querySelector('.d0-metric-label')?.textContent).toBe('CPU');
+        expect(container.querySelector('.d0-metric-value')?.textContent).toBe('42');
+    });
+    it('renders unit when provided', () => {
+        const { container } = render(MetricCard, { props: { label: 'Temp', value: '72', unit: '°F' } });
+        expect(container.querySelector('.d0-metric-unit')?.textContent).toBe('°F');
+    });
+    it('omits unit when not provided', () => {
+        const { container } = render(MetricCard, { props: { label: 'Count', value: '5' } });
+        expect(container.querySelector('.d0-metric-unit')).toBeNull();
+    });
+    it('renders trend indicator with up arrow', () => {
+        const { container } = render(MetricCard, {
+            label: 'Growth', value: '12', trend: 'up', trendValue: '+5%',
+        });
+        const trend = container.querySelector('.d0-metric-trend');
+        expect(trend).not.toBeNull();
+        expect(trend?.classList.contains('trend-up')).toBe(true);
+        expect(trend?.textContent).toContain('+5%');
+    });
+    it('renders trend indicator with down arrow', () => {
+        const { container } = render(MetricCard, {
+            label: 'Loss', value: '3', trend: 'down', trendValue: '-2%',
+        });
+        const trend = container.querySelector('.d0-metric-trend');
+        expect(trend?.classList.contains('trend-down')).toBe(true);
+    });
+    it('renders flat trend arrow', () => {
+        const { container } = render(MetricCard, {
+            label: 'Stable', value: '100', trend: 'flat',
+        });
+        const trend = container.querySelector('.d0-metric-trend');
+        expect(trend?.classList.contains('trend-flat')).toBe(true);
+    });
+    it('renders inline variant with correct classes', () => {
+        const { container } = render(MetricCard, {
+            label: 'Net', value: '88', size: 'inline',
+        });
+        expect(container.querySelector('.d0-metric-inline')).not.toBeNull();
+        expect(container.querySelector('.d0-metric-inline__label')?.textContent).toBe('Net');
+        expect(container.querySelector('.d0-metric-inline__value')?.textContent).toBe('88');
+    });
+    it('sets aria-label on trend element', () => {
+        const { container } = render(MetricCard, {
+            label: 'A', value: '1', trend: 'up', trendValue: '1',
+        });
+        const trend = container.querySelector('.d0-metric-trend');
+        expect(trend?.getAttribute('aria-label')).toBe('trending up');
+    });
+});

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

@@ -0,0 +1,47 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import SparkLine from './SparkLine.svelte';
+describe('SparkLine', () => {
+    afterEach(() => cleanup());
+    it('renders an svg with role img', () => {
+        const { container } = render(SparkLine, { props: { data: [1, 5, 3, 8, 2] } });
+        const svg = container.querySelector('svg[role="img"]');
+        expect(svg).not.toBeNull();
+    });
+    it('renders a path element for the line', () => {
+        const { container } = render(SparkLine, { props: { data: [1, 5, 3, 8, 2] } });
+        const path = container.querySelector('.d0-sparkline-path');
+        expect(path).not.toBeNull();
+        expect(path?.getAttribute('d')).toBeTruthy();
+    });
+    it('renders empty path for single data point', () => {
+        const { container } = render(SparkLine, { props: { data: [42] } });
+        const path = container.querySelector('.d0-sparkline-path');
+        expect(path?.getAttribute('d')).toBe('');
+    });
+    it('applies custom width and height via viewBox', () => {
+        const { container } = render(SparkLine, { props: { data: [1, 2, 3], width: 200, height: 64 } });
+        const svg = container.querySelector('svg');
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 200 64');
+    });
+    it('applies custom color to the path stroke', () => {
+        const { container } = render(SparkLine, { props: { data: [1, 2, 3], color: '#ff0000' } });
+        const path = container.querySelector('.d0-sparkline-path');
+        expect(path?.getAttribute('stroke')).toBe('#ff0000');
+    });
+    it('applies custom strokeWidth', () => {
+        const { container } = render(SparkLine, { props: { data: [1, 2, 3], strokeWidth: 4 } });
+        const path = container.querySelector('.d0-sparkline-path');
+        expect(path?.getAttribute('stroke-width')).toBe('4');
+    });
+    it('uses default aria-label of Sparkline', () => {
+        const { container } = render(SparkLine, { props: { data: [1, 2] } });
+        const svg = container.querySelector('svg');
+        expect(svg?.getAttribute('aria-label')).toBe('Sparkline');
+    });
+    it('accepts custom aria-label', () => {
+        const { container } = render(SparkLine, { props: { data: [1, 2], 'aria-label': 'CPU usage' } });
+        const svg = container.querySelector('svg');
+        expect(svg?.getAttribute('aria-label')).toBe('CPU usage');
+    });
+});

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

@@ -0,0 +1,63 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import StorageMap from './StorageMap.svelte';
+const sampleNodes = [
+    { path: '/data/kos', bytes: 1024 * 1024 * 500, ownerTier: 'kos', label: 'KOS Core' },
+    { path: '/data/ext', bytes: 1024 * 1024 * 200, ownerTier: 'external', label: 'External' },
+    { path: '/data/unk', bytes: 1024 * 100, ownerTier: 'unknown', label: 'Unknown' },
+];
+describe('StorageMap', () => {
+    afterEach(() => cleanup());
+    it('renders the total bytes label', () => {
+        const { container } = render(StorageMap, { props: { nodes: sampleNodes } });
+        const total = container.querySelector('.sm-total');
+        expect(total).not.toBeNull();
+        expect(total?.textContent).toContain('MB');
+    });
+    it('renders a cell for each node', () => {
+        const { container } = render(StorageMap, { props: { nodes: sampleNodes } });
+        expect(container.querySelectorAll('.sm-cell').length).toBe(3);
+    });
+    it('renders tier legend items', () => {
+        const { container } = render(StorageMap, { props: { nodes: sampleNodes } });
+        const legend = container.querySelector('.sm-legend');
+        expect(legend).not.toBeNull();
+        expect(legend?.textContent).toContain('KOS');
+        expect(legend?.textContent).toContain('External');
+        expect(legend?.textContent).toContain('Unknown');
+    });
+    it('renders empty state when no nodes', () => {
+        const { container } = render(StorageMap, { props: { nodes: [] } });
+        expect(container.querySelector('.sm-empty')).not.toBeNull();
+        expect(container.textContent).toContain('No storage data');
+    });
+    it('calls onnodeclick when a cell is clicked', async () => {
+        const onnodeclick = vi.fn();
+        const { container } = render(StorageMap, { props: { nodes: sampleNodes, onnodeclick } });
+        const cell = container.querySelector('.sm-cell');
+        await fireEvent.click(cell);
+        expect(onnodeclick).toHaveBeenCalledTimes(1);
+        expect(onnodeclick).toHaveBeenCalledWith(sampleNodes[0]);
+    });
+    it('applies tier-specific CSS classes to cells', () => {
+        const { container } = render(StorageMap, { props: { nodes: sampleNodes } });
+        expect(container.querySelector('.sm-cell--kos')).not.toBeNull();
+        expect(container.querySelector('.sm-cell--external')).not.toBeNull();
+        expect(container.querySelector('.sm-cell--unknown')).not.toBeNull();
+    });
+    it('renders cell labels inside large enough cells', () => {
+        const { container } = render(StorageMap, {
+            props: { nodes: sampleNodes, width: 800, height: 600 },
+        });
+        const labels = container.querySelectorAll('.sm-label');
+        expect(labels.length).toBeGreaterThan(0);
+    });
+    it('applies custom width and height to root element', () => {
+        const { container } = render(StorageMap, {
+            props: { nodes: sampleNodes, width: 1024, height: 768 },
+        });
+        const root = container.querySelector('.sm-root');
+        expect(root.style.width).toBe('1024px');
+        expect(root.style.height).toBe('768px');
+    });
+});

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

@@ -0,0 +1,62 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import Timeline from './Timeline.svelte';
+const sampleEntries = [
+    { id: 'e1', timestamp: '10:00', label: 'Start', description: 'System boot', color: '#b87333' },
+    { id: 'e2', timestamp: '10:05', label: 'Connect', description: 'Peer connected', color: '#5f9ea0' },
+    { id: 'e3', timestamp: '10:10', label: 'Sync', description: 'State synced', color: '#e6c470' },
+];
+describe('Timeline', () => {
+    afterEach(() => cleanup());
+    it('renders an svg with role img', () => {
+        const { container } = render(Timeline, { props: { entries: sampleEntries } });
+        const svg = container.querySelector('svg[role="img"]');
+        expect(svg).not.toBeNull();
+    });
+    it('renders a dot for each entry', () => {
+        const { container } = render(Timeline, { props: { entries: sampleEntries } });
+        expect(container.querySelectorAll('.d0-timeline-dot').length).toBe(3);
+    });
+    it('renders labels for each entry', () => {
+        const { container } = render(Timeline, { props: { entries: sampleEntries } });
+        const text = container.textContent || '';
+        expect(text).toContain('Start');
+        expect(text).toContain('Connect');
+        expect(text).toContain('Sync');
+    });
+    it('renders timestamps', () => {
+        const { container } = render(Timeline, { props: { entries: sampleEntries } });
+        const text = container.textContent || '';
+        expect(text).toContain('10:00');
+        expect(text).toContain('10:05');
+        expect(text).toContain('10:10');
+    });
+    it('renders descriptions when provided', () => {
+        const { container } = render(Timeline, { props: { entries: sampleEntries } });
+        const text = container.textContent || '';
+        expect(text).toContain('System boot');
+        expect(text).toContain('Peer connected');
+    });
+    it('renders a connecting line for multiple entries', () => {
+        const { container } = render(Timeline, { props: { entries: sampleEntries } });
+        expect(container.querySelector('.d0-timeline-line')).not.toBeNull();
+    });
+    it('omits connecting line for single entry', () => {
+        const { container } = render(Timeline, { props: { entries: [sampleEntries[0]] } });
+        expect(container.querySelector('.d0-timeline-line')).toBeNull();
+    });
+    it('renders horizontal orientation with class', () => {
+        const { container } = render(Timeline, { props: { entries: sampleEntries, orientation: 'horizontal' } });
+        expect(container.querySelector('.d0-timeline.horizontal')).not.toBeNull();
+    });
+    it('uses custom aria-label', () => {
+        const { container } = render(Timeline, { props: { entries: sampleEntries, 'aria-label': 'Build timeline' } });
+        const svg = container.querySelector('svg');
+        expect(svg?.getAttribute('aria-label')).toBe('Build timeline');
+    });
+    it('renders dots with custom fill color', () => {
+        const { container } = render(Timeline, { props: { entries: [sampleEntries[0]] } });
+        const dot = container.querySelector('.d0-timeline-dot');
+        expect(dot?.getAttribute('fill')).toBe('#b87333');
+    });
+});

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

@@ -0,0 +1,99 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import WorldLineTimeline from './WorldLineTimeline.svelte';
+const sampleData = {
+    characters: [
+        { id: 'c1', label: 'Alice', color: '#b87333' },
+        { id: 'c2', label: 'Bob', color: '#5f9ea0' },
+    ],
+    events: [
+        {
+            id: 'e1', label: ['First', 'Contact'], type: 'arrival', eraIndex: 0,
+            description: 'Initial encounter', attendance: { c1: 'observed', c2: 'observed' },
+            placeLabel: 'Lab',
+        },
+        {
+            id: 'e2', label: ['Conflict'], type: 'conflict', eraIndex: 0,
+            description: 'Disagreement', attendance: { c1: 'observed', c2: 'psi' },
+        },
+    ],
+    eras: [
+        { label: 'Alpha', xNorm: [0, 0.5], color: 'rgba(184,115,51,0.05)' },
+        { label: 'Beta', xNorm: [0.5, 1], color: 'rgba(95,158,160,0.05)' },
+    ],
+};
+describe('WorldLineTimeline', () => {
+    afterEach(() => cleanup());
+    it('renders the container div', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: sampleData, onEventSelect: vi.fn() },
+        });
+        expect(container.querySelector('.wl-container')).not.toBeNull();
+    });
+    it('renders an svg element', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: sampleData, onEventSelect: vi.fn() },
+        });
+        expect(container.querySelector('.wl-canvas')).not.toBeNull();
+    });
+    it('renders character row labels', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: sampleData, onEventSelect: vi.fn() },
+        });
+        const text = container.textContent || '';
+        expect(text).toContain('Alice');
+        expect(text).toContain('Bob');
+    });
+    it('renders event nodes for each character-event attendance', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: sampleData, onEventSelect: vi.fn() },
+        });
+        const nodes = container.querySelectorAll('.wl-node');
+        expect(nodes.length).toBeGreaterThan(0);
+    });
+    it('renders era bands', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: sampleData, onEventSelect: vi.fn() },
+        });
+        const text = container.textContent || '';
+        expect(text).toContain('Alpha');
+        expect(text).toContain('Beta');
+    });
+    it('calls onEventSelect when a node is clicked', async () => {
+        const onEventSelect = vi.fn();
+        const { container } = render(WorldLineTimeline, {
+            props: { data: sampleData, onEventSelect },
+        });
+        const node = container.querySelector('.wl-node');
+        if (node) {
+            await fireEvent.click(node);
+            expect(onEventSelect).toHaveBeenCalledTimes(1);
+        }
+    });
+    it('marks selected event with selected class', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: sampleData, selectedEventId: 'e1', onEventSelect: vi.fn() },
+        });
+        const selectedNodes = container.querySelectorAll('.wl-node.selected');
+        expect(selectedNodes.length).toBeGreaterThan(0);
+    });
+    it('renders psi nodes with psi class', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: sampleData, onEventSelect: vi.fn() },
+        });
+        const psiNodes = container.querySelectorAll('.wl-node.psi');
+        expect(psiNodes.length).toBeGreaterThan(0);
+    });
+    it('renders nothing when characters array is empty', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: { ...sampleData, characters: [] }, onEventSelect: vi.fn() },
+        });
+        expect(container.querySelectorAll('.wl-node').length).toBe(0);
+    });
+    it('renders nothing when events array is empty', () => {
+        const { container } = render(WorldLineTimeline, {
+            props: { data: { ...sampleData, events: [] }, onEventSelect: vi.fn() },
+        });
+        expect(container.querySelectorAll('.wl-node').length).toBe(0);
+    });
+});

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

@@ -13,7 +13,7 @@ export const CHECKPOINT_COLORS = {
 /** 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' },
+        'rust-crate': { light: '#8a5a28', dark: '#b55533' },
         'ui-bundle': { light: '#2d6b6e', dark: '#5f9ea0' },
         'config': { light: '#7c6fae', dark: '#a99fd6' },
         'faculty-state': { light: '#d4a03d', dark: '#e6c470' },

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

@@ -1 +1 @@
-{"version":3,"file":"storage-map-types.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/storage-map-types.ts"],"names":[],"mappings":"AAIA,wCAAwC;AACxC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,CAAC;AAEvD,2CAA2C;AAC3C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,mDAAmD;AACnD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,yCAAyC;AACzC,MAAM,WAAW,gBAAgB;IAC/B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,mCAAmC;AACnC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAgBzF,CAAC;AAIF;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,gBAAqB,GAC5B,aAAa,CAwDf;AAED,4CAA4C;AAC5C,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOjD"}
+{"version":3,"file":"storage-map-types.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/storage-map-types.ts"],"names":[],"mappings":"AAIA,wCAAwC;AACxC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,CAAC;AAEvD,2CAA2C;AAC3C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,mDAAmD;AACnD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,yCAAyC;AACzC,MAAM,WAAW,gBAAgB;IAC/B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,mCAAmC;AACnC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAmBzF,CAAC;AAIF;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,gBAAqB,GAC5B,aAAa,CAwDf;AAED,4CAA4C;AAC5C,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOjD"}