@stephen-netu/design-system 0.1.0 → 0.2.0

package/package.json

@@ -1,78 +1,123 @@
 {
   "name": "@stephen-netu/design-system",
-  "version": "0.1.0",
-  "description": "KOS LEAP Design System — Legendary UI components with brass/copper aesthetic",
+  "version": "0.2.0",
+  "description": "KOS LEAP Design System — Neo-brutalist industrial UI with brass accent",
   "type": "module",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "scripts": {
+    "tokens:generate": "tsx scripts/generate-tokens-json.ts",
+    "prebuild": "pnpm tokens:generate",
+    "build": "svelte-package -i src -o dist",
+    "postbuild": "pnpm tokens:generate",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "check:vite-pin": "node -e \"const v=require('./package.json').devDependencies.vite;if(v!=='5.4.21'){console.error('vite pin violated: found '+v+', must stay at 5.4.21 (LEAP workspace standard — see LEAP/pnpm-workspace.yaml before bumping)');process.exit(1)}\""
+  },
   "files": [
-    "src/**/*",
+    "dist/**/*.svelte",
+    "dist/**/*.svelte.js",
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "dist/**/*.d.ts.map",
+    "dist/**/*.css",
+    "src/**/*.css",
+    "src/**/*.json",
     "package.json",
     "README.md"
   ],
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./b0-app-shell": "./src/b0-app-shell/index.ts",
-    "./p0-primitives": "./src/p0-primitives/index.ts",
-    "./u0-primitives": "./src/u0-primitives/index.ts",
-    "./l0-layout": "./src/l0-layout/index.ts",
-    "./l0-layout/block-writer": "./src/l0-layout/block-writer/index.ts",
-    "./l0-layout/grove": "./src/l0-layout/grove/index.ts",
-    "./spatial": "./src/spatial/index.ts",
-    "./spatial/ZoneTiler.svelte": "./src/spatial/ZoneTiler.svelte",
-    "./spatial/ForceCanvas.svelte": "./src/spatial/ForceCanvas.svelte",
-    "./spatial/LodRenderer.svelte": "./src/spatial/LodRenderer.svelte",
-    "./spatial/SnapZoomCamera.svelte": "./src/spatial/SnapZoomCamera.svelte",
-    "./spatial/BspTilingCanvas.svelte": "./src/spatial/BspTilingCanvas.svelte",
-    "./s0-state": "./src/s0-state/index.ts",
-    "./t0-transport": "./src/t0-transport/index.ts",
-    "./f0-forms": "./src/f0-forms/index.ts",
-    "./d0-data-viz": "./src/d0-data-viz/index.ts",
-    "./n0-node-graph": "./src/n0-node-graph/index.ts",
-    "./n1-flow-canvas": "./src/n1-flow-canvas/index.ts",
-    "./n2-manifold-disk": "./src/n2-manifold-disk/index.ts",
-    "./n3-force-graph": "./src/n3-force-graph/index.ts",
-    "./n4-adaptive-manifold": "./src/n4-adaptive-manifold/index.ts",
-    "./n4-tokens.css": "./src/n4-adaptive-manifold/n4-tokens.css",
-    "./v0-diagrams": "./src/v0-diagrams/index.ts",
-    "./entity-graph-view": "./src/entity-graph-view/index.ts",
-    "./tokens.css": "./src/p0-primitives/tokens/tokens.css",
-    "./tokens/control-room.css": "./src/p0-primitives/tokens/control-room.css",
-    "./d0-tokens.css": "./src/d0-data-viz/d0-tokens.css",
-    "./n0-tokens.css": "./src/n0-node-graph/n0-tokens.css",
-    "./base.css": "./src/base.css",
-    "./tokens.json": "./src/p0-primitives/tokens/tokens.json",
-    "./map": "./src/g0-geo/index.ts",
-    "./g0-geo": "./src/g0-geo/index.ts",
-    "./x0-enchanted-blocks": "./src/x0-enchanted-blocks/index.ts",
-    "./editor": "./src/editor/index.ts",
-    "./editor/MarkdownEditor.svelte": "./src/editor/MarkdownEditor.svelte",
-    "./demos": "./src/demos/index.ts",
-    "./demos/BspZoneDemo.svelte": "./src/demos/BspZoneDemo.svelte",
-    "./demos/NodepadBlocksShowcase.svelte": "./src/demos/NodepadBlocksShowcase.svelte",
-    "./demos/BspSizingInfographic.svelte": "./src/demos/BspSizingInfographic.svelte",
-    "./demos/ControlRoomDemo.svelte": "./src/demos/ControlRoomDemo.svelte",
-    "./fabric": "./src/fabric/index.ts",
-    "./fabric/layout": "./src/fabric/layout/index.ts",
-    "./fabric/layout/GlassBox.svelte": "./src/fabric/layout/GlassBox.svelte",
-    "./fabric/layout/KanbanBoard.svelte": "./src/fabric/layout/KanbanBoard.svelte",
-    "./fabric/layout/KanbanColumn.svelte": "./src/fabric/layout/KanbanColumn.svelte",
-    "./fabric/layout/KanbanCard.svelte": "./src/fabric/layout/KanbanCard.svelte",
-    "./fabric/navigation": "./src/fabric/navigation/index.ts",
-    "./fabric/navigation/ActivityRail.svelte": "./src/fabric/navigation/ActivityRail.svelte",
-    "./fabric/data": "./src/fabric/data/index.ts",
-    "./fabric/data/FileTree.svelte": "./src/fabric/data/FileTree.svelte",
-    "./fabric/input": "./src/fabric/input/index.ts",
-    "./fabric/input/CommandBar.svelte": "./src/fabric/input/CommandBar.svelte",
-    "./fabric/input/KeyboardShortcuts.svelte": "./src/fabric/input/KeyboardShortcuts.svelte",
-    "./fabric/feedback": "./src/fabric/feedback/index.ts",
-    "./fabric/feedback/ToastContainer.svelte": "./src/fabric/feedback/ToastContainer.svelte",
-    "./fabric/feedback/StatusBar.svelte": "./src/fabric/feedback/StatusBar.svelte",
-    "./fabric/ai": "./src/fabric/ai/index.ts",
-    "./fabric/ai/ChatPanel.svelte": "./src/fabric/ai/ChatPanel.svelte"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./b0-app-shell": "./dist/b0-app-shell/index.js",
+    "./p0-primitives": {
+      "types": "./dist/p0-primitives/index.d.ts",
+      "svelte": "./dist/p0-primitives/index.js",
+      "default": "./dist/p0-primitives/index.js"
+    },
+    "./u0-primitives": {
+      "types": "./dist/u0-primitives/index.d.ts",
+      "svelte": "./dist/u0-primitives/index.js",
+      "default": "./dist/u0-primitives/index.js"
+    },
+    "./u0-primitives/badge/ValidityBadge.svelte": "./dist/u0-primitives/badge/ValidityBadge.svelte",
+    "./u0-primitives/badge/validity-utils": "./dist/u0-primitives/badge/validity-utils.js",
+    "./l0-layout": "./dist/l0-layout/index.js",
+    "./l0-layout/block-writer": "./dist/l0-layout/block-writer/index.js",
+    "./l0-layout/grove": "./dist/l0-layout/grove/index.js",
+    "./l0-layout/grant": "./dist/l0-layout/grant/index.js",
+    "./l0-layout/grant/GrantCard.svelte": "./dist/l0-layout/grant/GrantCard.svelte",
+    "./l0-layout/grant/GrantDraftEditor.svelte": "./dist/l0-layout/grant/GrantDraftEditor.svelte",
+    "./u0-primitives/grant-badge": "./dist/u0-primitives/grant-badge/index.js",
+    "./u0-primitives/grant-badge/GrantStatusBadge.svelte": "./dist/u0-primitives/grant-badge/GrantStatusBadge.svelte",
+    "./spatial": "./dist/spatial/index.js",
+    "./spatial/ZoneTiler.svelte": "./dist/spatial/ZoneTiler.svelte",
+    "./spatial/ForceCanvas.svelte": "./dist/spatial/ForceCanvas.svelte",
+    "./spatial/LodRenderer.svelte": "./dist/spatial/LodRenderer.svelte",
+    "./spatial/SnapZoomCamera.svelte": "./dist/spatial/SnapZoomCamera.svelte",
+    "./spatial/BspTilingCanvas.svelte": "./dist/spatial/BspTilingCanvas.svelte",
+    "./s0-lifecycle": "./dist/s0-lifecycle/index.js",
+    "./s0-state": "./dist/s0-state/index.js",
+    "./t0-transport": "./dist/t0-transport/index.js",
+    "./f0-forms": "./dist/f0-forms/index.js",
+    "./d0-data-viz": "./dist/d0-data-viz/index.js",
+    "./n0-node-graph": "./dist/n0-node-graph/index.js",
+    "./n1-flow-canvas": "./dist/n1-flow-canvas/index.js",
+    "./n2-manifold-disk": "./dist/n2-manifold-disk/index.js",
+    "./n3-force-graph": "./dist/n3-force-graph/index.js",
+    "./n4-adaptive-manifold": "./dist/n4-adaptive-manifold/index.js",
+    "./n4-tokens.css": "./dist/n4-adaptive-manifold/n4-tokens.css",
+    "./v0-diagrams": "./dist/v0-diagrams/index.js",
+    "./g0-generative": "./dist/g0-generative/index.js",
+    "./entity-graph-view": "./dist/entity-graph-view/index.js",
+    "./tokens.css": "./dist/p0-primitives/tokens/tokens.css",
+    "./tokens/control-room.css": "./dist/p0-primitives/tokens/control-room.css",
+    "./d0-tokens.css": "./dist/d0-data-viz/d0-tokens.css",
+    "./n0-tokens.css": "./dist/n0-node-graph/n0-tokens.css",
+    "./base.css": "./dist/base.css",
+    "./tokens.json": "./dist/p0-primitives/tokens/tokens.json",
+    "./map": "./dist/map/index.js",
+    "./g0-geo": "./dist/g0-geo/index.js",
+    "./x0-enchanted-blocks": "./dist/x0-enchanted-blocks/index.js",
+    "./editor": "./dist/editor/index.js",
+    "./editor/MarkdownEditor.svelte": "./dist/editor/MarkdownEditor.svelte",
+    "./demos": "./dist/demos/index.js",
+    "./demos/BspZoneDemo.svelte": "./dist/demos/BspZoneDemo.svelte",
+    "./demos/NodepadBlocksShowcase.svelte": "./dist/demos/NodepadBlocksShowcase.svelte",
+    "./demos/BspSizingInfographic.svelte": "./dist/demos/BspSizingInfographic.svelte",
+    "./demos/ControlRoomDemo.svelte": "./dist/demos/ControlRoomDemo.svelte",
+    "./fabric": "./dist/fabric/index.js",
+    "./fabric/layout": "./dist/fabric/layout/index.js",
+    "./fabric/layout/GlassBox.svelte": "./dist/fabric/layout/GlassBox.svelte",
+    "./fabric/layout/KanbanBoard.svelte": "./dist/fabric/layout/KanbanBoard.svelte",
+    "./fabric/layout/KanbanColumn.svelte": "./dist/fabric/layout/KanbanColumn.svelte",
+    "./fabric/layout/KanbanCard.svelte": "./dist/fabric/layout/KanbanCard.svelte",
+    "./fabric/navigation": "./dist/fabric/navigation/index.js",
+    "./fabric/navigation/ActivityRail.svelte": "./dist/fabric/navigation/ActivityRail.svelte",
+    "./fabric/data": "./dist/fabric/data/index.js",
+    "./fabric/input": "./dist/fabric/input/index.js",
+    "./fabric/input/CommandBar.svelte": "./dist/fabric/input/CommandBar.svelte",
+    "./fabric/input/KeyboardShortcuts.svelte": "./dist/fabric/input/KeyboardShortcuts.svelte",
+    "./fabric/feedback": "./dist/fabric/feedback/index.js",
+    "./fabric/feedback/ToastContainer.svelte": "./dist/fabric/feedback/ToastContainer.svelte",
+    "./fabric/feedback/StatusBar.svelte": "./dist/fabric/feedback/StatusBar.svelte",
+    "./fabric/ai": "./dist/fabric/ai/index.js",
+    "./fabric/ai/ChatPanel.svelte": "./dist/fabric/ai/ChatPanel.svelte",
+    "./fabric/ai/ResearchPanel.svelte": "./dist/fabric/ai/ResearchPanel.svelte"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "peerDependencies": {
     "@tauri-apps/api": "^2",
     "svelte": "^5.0.0"
@@ -84,10 +129,12 @@
   },
   "dependencies": {
     "@chenglou/pretext": "^0.0.5",
+    "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.10.0",
     "@codemirror/lang-markdown": "^6.2.0",
     "@codemirror/language": "^6.10.0",
     "@codemirror/language-data": "^6.5.2",
+    "@codemirror/lint": "^6.8.0",
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.40.0",
@@ -99,23 +146,36 @@
     "graphology-types": "^0.24.7",
     "leaflet": "^1.9.4",
     "perfect-arrows": "^0.3.7",
-    "svelte-canvas": "^2.1.0"
+    "svelte-canvas": "^2.1.0",
+    "tsx": "^4.22.4"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.31.0",
+    "@lucide/svelte": "^1.17.0",
+    "@playwright/test": "^1.60.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "5.3.1",
+    "@testing-library/svelte-core": "^1.0.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@tsconfig/svelte": "^5.0.8",
     "@types/d3-force": "^3.0.10",
     "@types/leaflet": "^1.9.21",
-    "@lucide/svelte": "^0.575.0",
+    "jsdom": "^29.1.1",
     "markmap-lib": "^0.18.0",
     "markmap-view": "^0.18.0",
     "mermaid": "^11.0.0",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.4.6",
-    "typescript": "^5.0.0",
+    "svelte": "^5.55.0",
+    "svelte-check": "^4.4.8",
+    "typescript": "^5.9.3",
+    "vite": "5.4.21",
     "vitest": "^1.6.1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/stephen-netu/design-system.git"
+    "url": "git+https://github.com/stephen-netu/kos-design-system.git"
   },
   "keywords": [
     "design-system",

package/src/base.css

@@ -1,8 +1,9 @@
-/* @kos/design-system - Base Styles */
-@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300..900;1,300..900&family=Outfit:wght@100..900&display=swap');
+/* @kos/design-system — Base styles */
+/* Reset, scrollbars, focus, selection, layout utilities */
+/* Component styles belong in their own .svelte files, not here */
+
 @import './p0-primitives/tokens/tokens.css';
 
-/* --- Reset & Global --- */
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
@@ -18,14 +19,9 @@ html {
   text-rendering: optimizeLegibility;
   background-color: var(--color-bg-app);
   color: var(--color-text-primary);
-  /* The design system defaults to dark mode */
   color-scheme: dark;
 }
 
-[data-theme="light"], .theme-light {
-  color-scheme: light;
-}
-
 body {
   width: 100vw;
   height: 100vh;
@@ -34,8 +30,8 @@ body {
 
 /* --- Scrollbars --- */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -43,33 +39,20 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(184, 115, 51, 0.2); /* Brass tinted scrollbar */
-  border-radius: var(--radius-full);
-  border: 2px solid transparent;
-  background-clip: padding-box;
+  background: var(--border-default);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-accent-subtle);
-  border: 1px solid transparent;
-  background-clip: padding-box;
+  background: var(--border-hover);
 }
 
 /* --- Focus Management --- */
 :focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
+  outline: 1px solid var(--color-accent);
+  outline-offset: 1px;
 }
 
-a {
-  color: var(--color-accent);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
 
-a:hover {
-  color: var(--color-accent-hover);
-}
 
 /* --- Selection --- */
 ::selection {
@@ -77,36 +60,16 @@ a:hover {
   color: var(--color-accent-hover);
 }
 
-/* --- Utility Classes --- */
-
-/* Typography */
-h1, .ds-text-h1 { font-family: var(--font-sans); font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
-h2, .ds-text-h2 { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
-h3, .ds-text-h3 { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: 600; line-height: 1.3; }
-h4, .ds-text-h4 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 500; line-height: 1.4; }
-h5, .ds-text-h5 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 500; line-height: 1.4; }
-h6, .ds-text-h6 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
-
-p, .ds-text-body { font-size: var(--text-base); line-height: 1.6; color: var(--color-text-secondary); }
-small, .ds-text-sm { font-size: var(--text-sm); }
-.ds-text-xs { font-size: var(--text-xs); }
-.ds-text-muted { color: var(--color-text-muted); }
-
-code, pre {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-  background: var(--color-bg-panel-elevated);
-  padding: 0.2em 0.4em;
-  border-radius: var(--radius-sm);
-  color: var(--color-accent-hover);
-}
-
-/* Layout Primitives */
-.ds-stack {
-  display: flex;
-  flex-direction: column;
-}
-
+/* --- Layout Utilities ---
+   NOTE on visibility vs {#if} for persistent-state components:
+   - Use CSS visibility:hidden for lightweight toggleable chrome (toolbars, sidebars).
+     The component stays mounted; layout is preserved.
+   - Use {#if} conditional rendering for HEAVY stateful components (CodeMirror editors,
+     canvas renderers, maps). These_allocate significant DOM節點/memory; hidden trees
+     from 10+ editor instances cause unnecessary layout recalculation.
+   Rule of thumb: if the component creates >50 DOM nodes or holds GPU resources,
+   use {#if}. Otherwise visibility:hidden is fine. */
+.ds-stack { display: flex; flex-direction: column; }
 .ds-stack-1 { gap: var(--space-1); }
 .ds-stack-2 { gap: var(--space-2); }
 .ds-stack-3 { gap: var(--space-3); }
@@ -122,12 +85,10 @@ code, pre {
 .ds-justify-center { justify-content: center; }
 .ds-flex-wrap { flex-wrap: wrap; }
 
-.ds-grid {
-  display: grid;
-}
+.ds-grid { display: grid; }
 
 .ds-canvas-grid {
-  background-image: 
+  background-image:
     linear-gradient(var(--grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
   background-size: 40px 40px;
@@ -138,7 +99,32 @@ code, pre {
   background-size: 20px 20px;
 }
 
-/* Accessibility */
+/* --- Typography Utilities --- */
+/* NOTE: bare element selectors (h1-h6, p, code, pre, a) are intentional.
+   This library ships as global CSS; consumers opt in by importing base.css.
+   If scoped typography is needed, use the .ds-text-* utility classes instead. */
+
+.ds-text-h1 { font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
+.ds-text-h2 { font-size: var(--text-3xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
+.ds-text-h3 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.3; }
+.ds-text-h4 { font-size: var(--text-xl); font-weight: 500; line-height: 1.4; }
+.ds-text-h5 { font-size: var(--text-lg); font-weight: 500; line-height: 1.4; }
+.ds-text-h6 { font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
+
+.ds-text-body { font-size: var(--text-base); line-height: 1.6; color: var(--color-text-secondary); }
+.ds-text-sm { font-size: var(--text-sm); }
+.ds-text-xs { font-size: var(--text-xs); }
+.ds-text-muted { color: var(--color-text-muted); }
+
+.ds-text-code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-bg-panel-elevated);
+  padding: 0.2em 0.4em;
+  color: var(--color-accent-hover);
+}
+
+/* --- Accessibility --- */
 .sr-only {
   position: absolute;
   width: 1px;

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

@@ -2,7 +2,7 @@
 :root {
   /* Chart */
   --d0-chart-bg: var(--color-bg-panel, #222);
-  --d0-chart-grid: rgba(184, 115, 51, 0.1);
+  --d0-chart-grid: var(--color-accent-subtle, rgba(184, 115, 51, 0.1));
   --d0-chart-text: var(--color-text-muted, #a09880);
   --d0-chart-accent: var(--color-accent, #b87333);
 
@@ -11,19 +11,19 @@
   --d0-metric-trend-down: var(--color-error, #c0392b);
 
   /* Timeline */
-  --d0-timeline-line: rgba(184, 115, 51, 0.3);
+  --d0-timeline-line: var(--color-accent-muted, rgba(184, 115, 51, 0.3));
   --d0-timeline-dot: var(--color-accent, #b87333);
 
   /* CheckpointBar (ADR: ui-timeline-checkpoint-bar-001) */
   --d0-checkpoint-bar-height: 48px;
   --d0-checkpoint-node-size: 12px;
   --d0-checkpoint-node-active-size: 16px;
-  --d0-checkpoint-line-color: rgba(184, 115, 51, 0.3);
+  --d0-checkpoint-line-color: var(--color-accent-muted, rgba(184, 115, 51, 0.3));
   --d0-checkpoint-tooltip-bg: rgba(34, 34, 34, 0.98);
-  --d0-checkpoint-tooltip-border: rgba(184, 115, 51, 0.3);
+  --d0-checkpoint-tooltip-border: var(--color-accent-muted, rgba(184, 115, 51, 0.3));
 
   /* Checkpoint Colors by Component Type */
-  --d0-checkpoint-brass: #b87333;
+  --d0-checkpoint-brass: var(--color-accent, #b87333);
   --d0-checkpoint-teal: #5f9ea0;
   --d0-checkpoint-gold: #daa520;
   --d0-checkpoint-purple: #9370db;

package/src/n0-node-graph/n0-tokens.css

@@ -7,9 +7,9 @@
 
   /* Nodes */
   --n0-node-bg: var(--color-bg-panel, #222);
-  --n0-node-border: rgba(184, 115, 51, 0.2);
+  --n0-node-border: var(--color-accent-subtle, rgba(184, 115, 51, 0.2));
   --n0-node-border-selected: var(--color-accent, #b87333);
-  --n0-node-header-bg: rgba(184, 115, 51, 0.1);
+  --n0-node-header-bg: var(--color-accent-subtle, rgba(184, 115, 51, 0.1));
   --n0-node-radius: 8px;
   --n0-node-min-width: 180px;
   --n0-node-max-width: 400px;
@@ -23,7 +23,7 @@
 
   /* Edges */
   --n0-edge-width: 2px;
-  --n0-edge-color: rgba(184, 115, 51, 0.4);
+  --n0-edge-color: var(--color-accent-muted, rgba(184, 115, 51, 0.4));
   --n0-edge-color-hover: var(--color-accent, #b87333);
-  --n0-edge-color-creating: rgba(184, 115, 51, 0.6);
+  --n0-edge-color-creating: var(--color-accent-muted, rgba(184, 115, 51, 0.6));
 }

package/src/n4-adaptive-manifold/n4-tokens.css

@@ -11,8 +11,8 @@
   --n4-node-bg: #222;
   --n4-node-bg-hover: #2a2a2a;
   --n4-node-bg-selected: color-mix(in srgb, var(--color-accent, #b87333) 12%, #222);
-  --n4-node-border: rgba(184, 115, 51, 0.15);
-  --n4-node-border-hover: rgba(184, 115, 51, 0.35);
+  --n4-node-border: var(--color-accent-subtle, rgba(184, 115, 51, 0.15));
+  --n4-node-border-hover: var(--color-accent-muted, rgba(184, 115, 51, 0.35));
   --n4-node-border-selected: var(--color-accent, #b87333);
   --n4-node-text: var(--color-text-primary, #e8e0d0);
   --n4-node-text-muted: var(--color-text-secondary, #a09880);
@@ -25,8 +25,8 @@
 
   /* ── Edge rendering ─────────────────────────────────────────────────────── */
   --n4-edge-width: 1.5px;
-  --n4-edge-color: rgba(184, 115, 51, 0.25);
-  --n4-edge-color-hover: rgba(184, 115, 51, 0.55);
+  --n4-edge-color: var(--color-accent-muted, rgba(184, 115, 51, 0.25));
+  --n4-edge-color-hover: var(--color-accent-muted, rgba(184, 115, 51, 0.55));
   --n4-edge-color-active: var(--color-accent, #b87333);
   --n4-edge-dash-length: 6px;
   --n4-edge-dash-gap: 3px;
@@ -34,19 +34,19 @@
 
   /* ── Canvas ─────────────────────────────────────────────────────────────── */
   --n4-canvas-bg: var(--color-bg-canvas, #1a1a1a);
-  --n4-canvas-grid-color: rgba(184, 115, 51, 0.04);
+  --n4-canvas-grid-color: var(--color-accent-faint, rgba(184, 115, 51, 0.04));
   --n4-canvas-grid-size: 24px;
   --n4-canvas-padding: 40px;
 
   /* ── Scatter grid (fallback topology) ───────────────────────────────────── */
   --n4-scatter-gap: 8px;
   --n4-scatter-chip-bg: var(--color-bg-panel, #222);
-  --n4-scatter-chip-border: var(--border-default, rgba(184, 115, 51, 0.15));
+  --n4-scatter-chip-border: var(--color-accent-subtle, rgba(184, 115, 51, 0.15));
   --n4-scatter-chip-accent: var(--color-accent, #b87333);
 
   /* ── Suggestion indicator ───────────────────────────────────────────────── */
   --n4-suggestion-bg: color-mix(in srgb, var(--color-accent, #b87333) 8%, var(--color-bg-panel, #222));
-  --n4-suggestion-border: rgba(184, 115, 51, 0.25);
+  --n4-suggestion-border: var(--color-accent-muted, rgba(184, 115, 51, 0.25));
   --n4-suggestion-text: var(--color-text-secondary, #a09880);
   --n4-suggestion-accent: var(--color-accent, #b87333);
   --n4-suggestion-radius: var(--radius-md, 6px);

package/src/p0-primitives/tokens/control-room.css

@@ -84,12 +84,12 @@
   --border-width-default: 2px;
   --border-width-thick: 2px;         /* For active states, indicators */
   --border-width-heavy: 3px;         /* For structural emphasis */
-  --border-subtle: 1px solid #1a1a1a;
-  --border-default: 2px solid #2a2a2a;
-  --border-heavy: 3px solid #333333;
-  --border-focus: 2px solid #00ff41;  /* Terminal green focus */
-  --border-alert: 2px solid #ff3131;
-  --border-warning: 2px solid #ffd700;
+--border-subtle: #1a1a1a;
+   --border-default: #444c56;
+   --border-heavy: #333333;
+   --border-focus: #00ff41;
+   --border-alert: #ff3131;
+   --border-warning: #ffd700;
   --divider-color: #1a1a1a;
 
   /* --- Grid patterns — subtle telemetry lines --- */