@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/n1-flow-canvas/pipeline-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipeline-adapter.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/pipeline-adapter.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAwB,MAAM,YAAY,CAAC;AAItE,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjG,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AA0CD,eAAO,MAAM,oBAAoB,UAA6D,CAAC;AAE/F,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,aAAa,GAAG,aAAa,CAiG3E;AAcD,wBAAgB,2BAA2B,IAAI,aAAa,CAe3D"}

package/dist/n1-flow-canvas/pipeline-adapter.js

@@ -0,0 +1,160 @@
+// N1 Pipeline Adapter — maps PipelineState → GraphSnapshot for FlowCanvas
+// READ-ONLY consumer of ~/.kos/pipeline/<run-id>/pipeline-state.json
+// S-02: deterministic ordering — all collections Array/Map
+// ── Token budgets (mirrors driver.rs) ────────────────────────────────────────
+const STAGE_TOKEN_BUDGETS = {
+    intake: 10_000,
+    research: 40_000,
+    implement: 120_000,
+    review: 40_000,
+    integrate: 10_000,
+};
+function formatTokens(t) {
+    if (t >= 1_000_000)
+        return `${(t / 1_000_000).toFixed(1)}M`;
+    if (t >= 1_000)
+        return `${(t / 1_000).toFixed(0)}K`;
+    return `${t}`;
+}
+// ── Status color mapping ─────────────────────────────────────────────────────
+const STAGE_COLORS = {
+    Pending: '#646b72',
+    Running: '#3fae9f',
+    Passed: '#3fae9f',
+    Failed: '#cf4e4e',
+    Skipped: '#4a4f55',
+    Crashed: '#cf4e4e',
+};
+function statusIcon(status) {
+    switch (status) {
+        case 'Pending': return '○';
+        case 'Running': return '●';
+        case 'Passed': return '✓';
+        case 'Failed': return '✗';
+        case 'Skipped': return '−';
+        case 'Crashed': return '💀';
+    }
+}
+// ── Adapter ──────────────────────────────────────────────────────────────────
+export const PIPELINE_STAGE_NAMES = ['intake', 'research', 'implement', 'review', 'integrate'];
+export function pipelineStateToSnapshot(state) {
+    const nodes = [];
+    const edges = [];
+    const stageOrder = PIPELINE_STAGE_NAMES;
+    const stageMap = new Map();
+    for (const s of state.stages)
+        stageMap.set(s.name, s);
+    let prevName = null;
+    for (const name of stageOrder) {
+        const stage = stageMap.get(name);
+        const status = stage?.status ?? 'Pending';
+        const color = STAGE_COLORS[status];
+        const icon = statusIcon(status);
+        // Build label with status icon, name, attempt badge, token budget
+        let label = `${icon} ${name}`;
+        if (stage && stage.attempt > 1) {
+            label += ` #${stage.attempt}`;
+        }
+        // Collect badge-like data into node.data for FlowCanvas rendering
+        const data = {
+            status,
+            color,
+            icon,
+            pipelineStatus: status,
+        };
+        if (stage) {
+            data.attempt = stage.attempt;
+            if (stage.selected_model)
+                data.model = stage.selected_model;
+            data.budget = formatTokens(STAGE_TOKEN_BUDGETS[name] ?? 0);
+            if (stage.error)
+                data.error = stage.error;
+            if (stage.started_at)
+                data.started_at = stage.started_at;
+            if (stage.completed_at)
+                data.completed_at = stage.completed_at;
+            if (stage.termination) {
+                data.termination = stage.termination.reason;
+                data.final_tokens = stage.termination.final_tokens;
+            }
+        }
+        nodes.push({ id: name, label, data });
+        // Sequential handoff edge: prev → current
+        if (prevName) {
+            edges.push({
+                id: `${prevName}->${name}`,
+                sourceId: prevName,
+                targetId: name,
+                label: 'handoff',
+            });
+        }
+        prevName = name;
+    }
+    // Back-edge for active remediation: review → implement
+    if (state.remediation_count > 0 && state.remediation_count < state.max_remediation) {
+        const reviewStage = stageMap.get('review');
+        if (reviewStage && reviewStage.status === 'Failed') {
+            edges.push({
+                id: 'review->implement:remediate',
+                sourceId: 'review',
+                targetId: 'implement',
+                label: 'remediate',
+            });
+        }
+    }
+    // Queue tail node (D14) — shows pending queue depth if available
+    // For now, show remediation count as queue indicator
+    if (state.remediation_count > 0) {
+        nodes.push({
+            id: 'remediation',
+            label: `↻ x${state.remediation_count}`,
+            data: { status: 'remediation', count: state.remediation_count },
+        });
+        edges.push({
+            id: 'review->remediation',
+            sourceId: 'review',
+            targetId: 'remediation',
+            label: 'remediate',
+        });
+        edges.push({
+            id: 'remediation->implement',
+            sourceId: 'remediation',
+            targetId: 'implement',
+            label: 're-enter',
+        });
+    }
+    return {
+        nodes,
+        edges,
+        focusNodeId: findFocusNode(stageMap),
+    };
+}
+function findFocusNode(stageMap) {
+    for (const name of PIPELINE_STAGE_NAMES) {
+        const stage = stageMap.get(name);
+        if (stage && stage.status === 'Running')
+            return name;
+    }
+    for (const name of PIPELINE_STAGE_NAMES) {
+        const stage = stageMap.get(name);
+        if (stage && stage.status === 'Pending')
+            return name;
+    }
+    return PIPELINE_STAGE_NAMES[0] ?? null;
+}
+export function createEmptyPipelineSnapshot() {
+    return {
+        nodes: PIPELINE_STAGE_NAMES.map((name, i) => ({
+            id: name,
+            label: `○ ${name}`,
+            data: { status: 'Pending', pipelineStatus: 'Pending' },
+        })),
+        edges: PIPELINE_STAGE_NAMES.slice(0, -1).map((name, i) => ({
+            id: `${name}->${PIPELINE_STAGE_NAMES[i + 1]}`,
+            sourceId: name,
+            targetId: PIPELINE_STAGE_NAMES[i + 1],
+            label: 'handoff',
+        })),
+        focusNodeId: PIPELINE_STAGE_NAMES[0],
+    };
+}

package/dist/n1-flow-canvas/utils.test.js

@@ -0,0 +1,116 @@
+import { describe, it, expect } from 'vitest';
+import { nodeHitTest, domEventToCanvasCoords, parseMentionEdges, parseGroupedSequenceEdges, } from './utils';
+describe('n1-flow-canvas/utils', () => {
+    describe('nodeHitTest', () => {
+        it('returns node id when point is inside a node rect', () => {
+            const positions = new Map([
+                ['n1', { id: 'n1', x: 10, y: 20, width: 100, height: 50 }],
+                ['n2', { id: 'n2', x: 200, y: 200, width: 80, height: 40 }],
+            ]);
+            expect(nodeHitTest(50, 40, positions)).toBe('n1');
+        });
+        it('returns null when point is outside all nodes', () => {
+            const positions = new Map([
+                ['n1', { id: 'n1', x: 10, y: 20, width: 100, height: 50 }],
+            ]);
+            expect(nodeHitTest(500, 500, positions)).toBeNull();
+        });
+        it('returns null for empty positions map', () => {
+            expect(nodeHitTest(50, 50, new Map())).toBeNull();
+        });
+        it('returns first matching node for overlapping rects', () => {
+            const positions = new Map();
+            positions.set('a', { id: 'a', x: 0, y: 0, width: 100, height: 100 });
+            positions.set('b', { id: 'b', x: 50, y: 50, width: 100, height: 100 });
+            const result = nodeHitTest(60, 60, positions);
+            expect(result).toBe('a');
+        });
+    });
+    describe('domEventToCanvasCoords', () => {
+        it('converts DOM event to canvas pixel coordinates', () => {
+            const mockEvent = {
+                clientX: 100,
+                clientY: 200,
+                currentTarget: {
+                    getBoundingClientRect: () => ({
+                        left: 50,
+                        top: 100,
+                        width: 200,
+                        height: 400,
+                    }),
+                },
+            };
+            const coords = domEventToCanvasCoords(mockEvent, 800, 1600);
+            expect(coords.x).toBe(200);
+            expect(coords.y).toBe(400);
+        });
+        it('handles identity scale (1:1)', () => {
+            const mockEvent = {
+                clientX: 150,
+                clientY: 250,
+                currentTarget: {
+                    getBoundingClientRect: () => ({
+                        left: 50,
+                        top: 50,
+                        width: 800,
+                        height: 600,
+                    }),
+                },
+            };
+            const coords = domEventToCanvasCoords(mockEvent, 800, 600);
+            expect(coords.x).toBe(100);
+            expect(coords.y).toBe(200);
+        });
+    });
+    describe('parseMentionEdges', () => {
+        it('parses edges from description mentions', () => {
+            const items = [
+                { id: 'wt-1', description: 'Depends on wt-2 for setup' },
+                { id: 'wt-2', description: 'No deps' },
+            ];
+            const edges = parseMentionEdges(items, (t) => t.id, (t) => t.description ?? '', /wt-(\d+)/g, (m) => `wt-${m}`);
+            expect(edges.size).toBe(1);
+            expect(edges.has('wt-1->wt-2')).toBe(true);
+        });
+        it('returns empty map for items with no mentions', () => {
+            const items = [
+                { id: 'wt-1', description: 'No references here' },
+                { id: 'wt-2', description: 'Also none' },
+            ];
+            const edges = parseMentionEdges(items, (t) => t.id, (t) => t.description ?? '', /wt-(\d+)/g, (m) => `wt-${m}`);
+            expect(edges.size).toBe(0);
+        });
+        it('skips mentions to unknown ids', () => {
+            const items = [
+                { id: 'wt-1', description: 'Depends on wt-999' },
+            ];
+            const edges = parseMentionEdges(items, (t) => t.id, (t) => t.description ?? '', /wt-(\d+)/g, (m) => `wt-${m}`);
+            expect(edges.size).toBe(0);
+        });
+    });
+    describe('parseGroupedSequenceEdges', () => {
+        it('chains items sharing the same group key', () => {
+            const items = [
+                { id: 'a', domain: 'x', workspace: 'w1', createdAt: '2024-01-01' },
+                { id: 'b', domain: 'x', workspace: 'w1', createdAt: '2024-01-02' },
+                { id: 'c', domain: 'x', workspace: 'w1', createdAt: '2024-01-03' },
+            ];
+            const edges = parseGroupedSequenceEdges(items, (t) => t.id, (t) => `${t.domain}:${t.workspace}`, (t) => t.createdAt);
+            expect(edges.size).toBe(2);
+            expect(edges.has('a->b')).toBe(true);
+            expect(edges.has('b->c')).toBe(true);
+        });
+        it('returns empty map for single-item groups', () => {
+            const items = [
+                { id: 'a', domain: 'x', workspace: 'w1', createdAt: '2024-01-01' },
+                { id: 'b', domain: 'y', workspace: 'w2', createdAt: '2024-01-01' },
+            ];
+            const edges = parseGroupedSequenceEdges(items, (t) => t.id, (t) => `${t.domain}:${t.workspace}`, (t) => t.createdAt);
+            expect(edges.size).toBe(0);
+        });
+        it('handles empty input', () => {
+            const edges = parseGroupedSequenceEdges([], (t) => t.id, (t) => t.group, (t) => t.sort);
+            expect(edges.size).toBe(0);
+        });
+    });
+});

package/dist/n2-manifold-disk/ManifoldDisk.svelte

@@ -14,6 +14,7 @@
   import { GraphState } from '../n1-flow-canvas/graph-state.svelte.js';
   import { EDGE_REVEAL_STAGGER_MS } from '../n1-flow-canvas/types.js';
   import { projectToDisk, quaternionToDisk } from './poincare.js';
+  import { resolveAccentRamp } from '../p0-primitives/canvas-theme.js';
 
   // ── Props ────────────────────────────────────────────────────────────────────
 
@@ -98,48 +99,74 @@
     }
   });
 
-  // ── Design tokens ──────────────────────────────────────────────────────────
-
-  const COLORS = {
-    bg:         '#1a1a1a',
-    diskBg:     '#111111',
-    diskBorder: '#3a3020',
-    node:       '#2a2a2a',
-    nodeBorder: '#b87333',
-    nodeText:   '#e8e0d0',
-    edgeLine:   '#b87333',
-    edgeFade:   '#5a4a30',
-    focus:      '#d4943a',
-    grid:       '#1e1e1e',
-    selected:   '#d4943a',
-  };
-
-  // Column-based node fill colors — matches KOS brass/copper theme.
-  // Semi-transparent fills let the dark disk background show through.
-  const COLUMN_FILL: Record<string, string> = {
-    GO:      'rgba(184, 115, 51, 0.35)',   // brass — active
-    CONSULT: 'rgba(184, 115, 51, 0.18)',   // brass outline — advisory
-    WEED:    'rgba(200, 160, 50, 0.22)',   // warning amber
-    SPROUT:  'rgba(70,  130, 200, 0.20)', // info blue — growing
-    FREEZE:  'rgba(80,  110, 180, 0.16)', // cool blue — frozen
-    SEED:    'rgba(42,   42,  42, 0.60)', // muted — backlog
-  };
-
-  const COLUMN_BORDER: Record<string, string> = {
-    GO:      '#b87333',
-    CONSULT: 'rgba(184, 115, 51, 0.6)',
-    WEED:    '#c8a032',
-    SPROUT:  '#4682c8',
-    FREEZE:  '#506eb4',
-    SEED:    '#3a3a3a',
-  };
+  // ── Design tokens — resolved at runtime from CSS custom properties ─────────
+  // resolveAccentRamp() reads --accent-primary so any user accent propagates
+  // into canvas paint calls without hardcoding a hue.
+
+  function resolveColors(el: Element) {
+    const cs = getComputedStyle(el);
+    const rv = (p: string, fb: string) => cs.getPropertyValue(p).trim() || fb;
+    const acc = resolveAccentRamp(el);
+    return {
+      bg:         rv('--color-bg-canvas',         '#121518'),
+      diskBg:     rv('--color-bg-app',             '#0a0b0c'),
+      diskBorder: rv('--border-default',           '#262b30'),
+      node:       rv('--color-bg-panel',           '#181c20'),
+      nodeBorder: acc.solid,
+      nodeText:   rv('--color-text-primary',       '#e7e9eb'),
+      edgeLine:   acc.solid,
+      edgeFade:   acc.alpha(0.3),
+      focus:      rv('--color-warning',            '#d8a23c'),
+      grid:       rv('--color-bg-panel',           '#181c20'),
+      selected:   acc.hi,
+      // column fills — accent for active states, fixed semantic for others
+      colFill: {
+        GO:      acc.alpha(0.35),
+        CONSULT: acc.alpha(0.18),
+        WEED:    'rgba(200, 160, 50, 0.22)',
+        SPROUT:  'rgba(70, 130, 200, 0.20)',
+        FREEZE:  'rgba(80, 110, 180, 0.16)',
+        SEED:    'rgba(42, 42, 42, 0.60)',
+      } as Record<string, string>,
+      colBorder: {
+        GO:      acc.solid,
+        CONSULT: acc.alpha(0.6),
+        WEED:    '#c8a032',
+        SPROUT:  '#4682c8',
+        FREEZE:  '#506eb4',
+        SEED:    '#3a3a3a',
+      } as Record<string, string>,
+    };
+  }
+
+  // Resolved lazily in onMount / on theme change.
+  let COLORS = $state<ReturnType<typeof resolveColors> | null>(null);
+  // Shims so existing draw code using COLUMN_FILL/COLUMN_BORDER still compiles.
+  let COLUMN_FILL: Record<string, string> = {};
+  let COLUMN_BORDER: Record<string, string> = {};
 
   const NODE_RADIUS = 4;
   const FONT = '11px var(--font-mono, monospace)';
 
+  // Resolve colors on mount and whenever --accent-primary might change.
+  // Using document.documentElement so the accent reflects the ThemeProvider seed.
+  $effect(() => {
+    function resolve() {
+      const c = resolveColors(document.documentElement);
+      COLORS = c;
+      COLUMN_FILL = c.colFill;
+      COLUMN_BORDER = c.colBorder;
+    }
+    resolve();
+    // Re-resolve if ThemeProvider emits a CSS variable change event (optional).
+    document.documentElement.addEventListener('kos-theme-change', resolve);
+    return () => document.documentElement.removeEventListener('kos-theme-change', resolve);
+  });
+
   // ── Render ──────────────────────────────────────────────────────────────────
 
   function render({ context }: { context: CanvasRenderingContext2D }) {
+    if (!COLORS) return; // not yet resolved after mount
     const r = diskRadius;
     const cx = diskCx, cy = diskCy;
 

package/dist/n2-manifold-disk/ManifoldDisk.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManifoldDisk.svelte.d.ts","sourceRoot":"","sources":["../../src/n2-manifold-disk/ManifoldDisk.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAOnE,2FAA2F;AAC3F,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,6FAA6F;IAC7F,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;CAChC;AA6SH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ManifoldDisk.svelte.d.ts","sourceRoot":"","sources":["../../src/n2-manifold-disk/ManifoldDisk.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAQnE,2FAA2F;AAC3F,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,6FAA6F;IAC7F,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;CAChC;AAwUH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/n3-force-graph/GraphTooltip.svelte

@@ -70,12 +70,12 @@
     z-index: 1000;
     pointer-events: none;
 
-    background: var(--bg-elevated, #2a2a2a);
+    background: var(--color-bg-elevated, #2a2a2a);
     border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
     border-radius: var(--radius-sm, 6px);
     padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
 
-    color: var(--text-primary, #f2efe9);
+    color: var(--color-text-primary, #f2efe9);
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 0.75rem;
     line-height: 1.4;

package/dist/n4-adaptive-manifold/AdaptiveManifold.svelte

@@ -18,10 +18,11 @@
     ResolvedThemeColors,
     NodeIndicatorState,
     PhaseTheme,
+    NodeLayout,
   } from './types.js';
   import { DEFAULT_LAYOUT_PREFERENCES } from './types.js';
   import { resolvePhaseTheme, DEFAULT_PHASE_THEME } from './phase-theme.js';
-  import type { NodeLayout } from '../n1-flow-canvas/types.js';
+  import { getCanvasTheme, resolveAccentRamp } from '../p0-primitives/canvas-theme';
   import { LayoutOrchestrator } from './orchestrator.js';
   import { ManifoldProvider } from './providers/manifold-provider.js';
   import { GravitationalProvider } from './providers/gravitational-provider.js';
@@ -90,19 +91,20 @@
 
   let containerEl: HTMLDivElement | undefined = $state(undefined);
   let colors: ResolvedThemeColors = $state({
-    canvasBg: '#1a1a1a',
-    nodeActive: '#b87333',
-    nodeIdle: '#a09880',
+    canvasBg: getCanvasTheme().bg,
+    nodeActive: getCanvasTheme().nodeBorder,
+    nodeIdle: getCanvasTheme().nodeText,
     nodeBlocked: '#f39c12',
-    nodeCompleted: '#a09880',
+    nodeCompleted: getCanvasTheme().nodeText,
     nodeCritical: '#c0392b',
-    nodeBg: '#222',
-    nodeBorder: 'rgba(184, 115, 51, 0.15)',
-    nodeText: '#e8e0d0',
-    edgeColor: 'rgba(184, 115, 51, 0.25)',
-    edgeActive: '#b87333',
-    pulseColor: '#b87333',
+    nodeBg: getCanvasTheme().node,
+    nodeBorder: getCanvasTheme().edgeFade,
+    nodeText: getCanvasTheme().nodeText,
+    edgeColor: getCanvasTheme().edgeFade,
+    edgeActive: getCanvasTheme().nodeBorder,
+    pulseColor: getCanvasTheme().nodeBorder,
     pulseCritical: '#c0392b',
+    accentRamp: resolveAccentRamp(),
   });
 
   function resolveTokens(): void {
@@ -112,18 +114,21 @@
     const get = (prop: string, fallback: string) => cs.getPropertyValue(prop).trim() || fallback;
     colors = {
       canvasBg: get('--n4-canvas-bg', '#1a1a1a'),
-      nodeActive: get('--n4-node-border-selected', '#b87333'),
+      nodeActive: get('--n4-node-border-selected', '#888'),
       nodeIdle: get('--n4-node-text-muted', '#a09880'),
       nodeBlocked: get('--color-status-warning', '#f39c12'),
       nodeCompleted: get('--n4-node-text-muted', '#a09880'),
       nodeCritical: get('--color-status-error', '#c0392b'),
       nodeBg: get('--n4-node-bg', '#222'),
-      nodeBorder: get('--n4-node-border', 'rgba(184, 115, 51, 0.15)'),
-      nodeText: get('--n4-node-text', '#e8e0d0'),
-      edgeColor: get('--n4-edge-color', 'rgba(184, 115, 51, 0.25)'),
-      edgeActive: get('--n4-edge-color-active', '#b87333'),
-      pulseColor: get('--color-accent', '#b87333'),
+      nodeBorder: get('--n4-node-border', 'rgba(128,128,128,0.15)'),
+      nodeText: get('--n4-node-text', '#e7e9eb'),
+      edgeColor: get('--n4-edge-color', 'rgba(128,128,128,0.25)'),
+      edgeActive: get('--n4-edge-color-active', '#888'),
+      pulseColor: get('--color-accent', '#888'),
       pulseCritical: get('--color-status-error', '#c0392b'),
+      // accentRamp: resolve --accent-primary directly so inline canvas paint
+      // calls respond to the user's chosen accent without reading n4-token CSS.
+      accentRamp: resolveAccentRamp(containerEl),
     };
     phaseTheme = resolvePhaseTheme(containerEl);
   }
@@ -617,7 +622,7 @@
     const GRID = 22;
     const gridStartX = Math.floor(worldLeft  / GRID) * GRID;
     const gridStartY = Math.floor(worldTop   / GRID) * GRID;
-    context.fillStyle = 'rgba(184, 115, 51, 0.055)';
+    context.fillStyle = colors.accentRamp.alpha(0.055);
     for (let gx = gridStartX; gx < worldRight; gx += GRID) {
       for (let gy = gridStartY; gy < worldBottom; gy += GRID) {
         context.beginPath();
@@ -681,8 +686,8 @@
       const edgeStrength = (edge.metadata as Record<string, unknown>)?.strength as number | undefined ?? 0.5;
       context.save();
       context.strokeStyle = progress >= 1.0
-        ? `rgba(184, 115, 51, ${0.45 + edgeStrength * 0.35})`
-        : 'rgba(184, 115, 51, 0.30)';
+        ? colors.accentRamp.alpha(0.45 + edgeStrength * 0.35)
+        : colors.accentRamp.alpha(0.30);
       context.lineWidth = 1.5;
       // Permanently dashed when fully revealed — individual lines are traceable in dense graphs.
       // During reveal animation keep a solid growing stroke, then settle to dashes.
@@ -704,7 +709,7 @@
     const FLAG_R     = 3;
 
     const PRIORITY_COLORS: Record<string, string> = {
-      p0: '#c0392b', p1: '#b87333', p2: '#c8a84b', p3: '#4a4438',
+      p0: '#c0392b', p1: colors.accentRamp.solid, p2: '#c8a84b', p3: '#4a4438',
     };
 
     // ── Node rendering: LOD-aware ─────────────────────────────────────────────
@@ -727,7 +732,7 @@
       // ── Signals: always a small dot ─────────────────────────────────────
       if (node.kind === 'signal') {
         const sr = lodTier === 'overview' ? 3 : 5;
-        context.shadowColor = 'rgba(184, 115, 51, 0.4)';
+        context.shadowColor = colors.accentRamp.alpha(0.4);
         context.shadowBlur = isSelected ? 10 : 4;
         context.beginPath();
         context.arc(ncx, ncy, sr, 0, Math.PI * 2);
@@ -760,14 +765,14 @@
             context.beginPath();
             context.moveTo(ncx, ncy);
             context.lineTo(ncx - Math.cos(angle) * tailLen, ncy - Math.sin(angle) * tailLen);
-            context.strokeStyle = `rgba(184, 115, 51, 0.5)`;
+            context.strokeStyle = colors.accentRamp.alpha(0.5);
             context.lineWidth = 2;
             context.stroke();
           }
 
           context.beginPath();
           context.arc(ncx, ncy, r, 0, Math.PI * 2);
-          context.fillStyle = isActiveLoop ? 'rgba(184, 115, 51, 0.9)' : 'rgba(184, 115, 51, 0.4)';
+          context.fillStyle = isActiveLoop ? colors.accentRamp.alpha(0.9) : colors.accentRamp.alpha(0.4);
           context.fill();
           if (isSelected) {
             context.strokeStyle = colors.nodeActive;
@@ -992,7 +997,7 @@
             beginShape(context, 'hexagon',
               ncx - HEX_IND_W / 2 - P, ncy - HEX_IND_H / 2 - P,
               HEX_IND_W + 2 * P, HEX_IND_H + 2 * P);
-            context.strokeStyle = `rgba(184, 115, 51, ${alpha})`;
+            context.strokeStyle = colors.accentRamp.alpha(alpha);
             context.lineWidth = 2;
             context.stroke();
             break;
@@ -1006,7 +1011,7 @@
                 context.beginPath();
                 context.moveTo(ncx, ncy);
                 context.lineTo(tx, ty);
-                context.strokeStyle = `rgba(184, 115, 51, ${0.6 * phaseIntensity})`;
+                context.strokeStyle = colors.accentRamp.alpha(0.6 * phaseIntensity);
                 context.lineWidth = 1;
                 context.setLineDash([4, 4]);
                 context.stroke();
@@ -1043,7 +1048,7 @@
               }
               context.beginPath();
               context.arc(px, py, particleR, 0, Math.PI * 2);
-              context.fillStyle = `rgba(184, 115, 51, ${alpha})`;
+              context.fillStyle = colors.accentRamp.alpha(alpha);
               context.fill();
             }
             break;
@@ -1070,7 +1075,7 @@
           // Claimed: solid brass outline
           context.beginPath();
           context.roundRect(px - 3, py - 3, TASK_W + 6, TASK_H + 6, 6);
-          context.strokeStyle = `rgba(184, 115, 51, ${0.6 * phaseIntensity})`;
+          context.strokeStyle = colors.accentRamp.alpha(0.6 * phaseIntensity);
           context.lineWidth = 2;
           context.stroke();
         } else if (node.status === 'idle') {
@@ -1079,7 +1084,7 @@
           const alpha = phaseIntensity * (0.1 + 0.2 * Math.sin(pulsePhase * Math.PI * 2));
           context.beginPath();
           context.roundRect(px - 2, py - 2, TASK_W + 4, TASK_H + 4, 5);
-          context.strokeStyle = `rgba(184, 115, 51, ${alpha})`;
+          context.strokeStyle = colors.accentRamp.alpha(alpha);
           context.lineWidth = 1.5;
           context.stroke();
         }

package/dist/n4-adaptive-manifold/AdaptiveManifold.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdaptiveManifold.svelte.d.ts","sourceRoot":"","sources":["../../src/n4-adaptive-manifold/AdaptiveManifold.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACR,gBAAgB,EAEhB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EAGjB,kBAAkB,EAEnB,MAAM,YAAY,CAAC;AAapB,UAAU,KAAK;IACb,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmkCH,QAAA,MAAM,gBAAgB;;;;;MAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AdaptiveManifold.svelte.d.ts","sourceRoot":"","sources":["../../src/n4-adaptive-manifold/AdaptiveManifold.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACR,gBAAgB,EAEhB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EAGjB,kBAAkB,EAGnB,MAAM,YAAY,CAAC;AAapB,UAAU,KAAK;IACb,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAukCH,QAAA,MAAM,gBAAgB;;;;;MAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}