@stephen-netu/design-system 0.2.1 → 0.5.1

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

package/dist/d0-data-viz/storage-map-types.js

@@ -3,10 +3,13 @@
 // Pure TypeScript — no Svelte, no DOM.
 /** Color palette per owner tier */
 export const TIER_COLORS = {
+    // kos tier: accent-driven. These literals are canvas paint values, not CSS;
+    // consumers should call resolveAccentRamp() and replace with ramp.alpha(N).
+    // Until wired: neutral fallback so the visual is at least color-agnostic.
     kos: {
-        fill: 'rgba(184, 115, 51, 0.25)',
-        stroke: 'rgba(184, 115, 51, 0.6)',
-        text: '#d4a06a',
+        fill: 'rgba(128, 128, 128, 0.20)',
+        stroke: 'rgba(128, 128, 128, 0.50)',
+        text: 'var(--color-text-secondary, #9aa1a8)',
     },
     external: {
         fill: 'rgba(160, 152, 128, 0.15)',

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
@@ -60,7 +60,7 @@ export const CHECKPOINT_COLOR_LABELS = {
  * Used when themeStore hasn't applied custom values.
  */
 export const CHECKPOINT_DEFAULT_COLORS = {
-    '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/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');
+    });
+});