@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/u0-primitives/window-frame/WindowFrame.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  export interface Props {
+    title?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    title = '',
+    class: className = '',
+    children
+  }: Props = $props();
+</script>
+
+<div class="ds-window-frame {className}">
+  <div class="ds-window-frame-header">
+    <div class="ds-window-frame-dots">
+      <span class="dot dot-close"></span>
+      <span class="dot dot-minimize"></span>
+      <span class="dot dot-expand"></span>
+    </div>
+    {#if title}
+      <span class="ds-window-frame-title">{title}</span>
+    {/if}
+  </div>
+
+  {#if children}
+    <div class="ds-window-frame-body">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-window-frame {
+    display: flex;
+    flex-direction: column;
+    border: var(--border-width-thin) solid var(--border-default);
+    background: var(--color-card-bg);
+    overflow: hidden;
+  }
+
+  .ds-window-frame-header {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-pad-x);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
+    background: var(--color-bg-panel);
+    border-bottom: var(--border-width-thin) solid var(--border-default);
+  }
+
+  .ds-window-frame-dots {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--radius-full);
+  }
+
+  .dot-close { background: var(--color-error); }
+  .dot-minimize { background: var(--color-warning); }
+  .dot-expand { background: var(--color-success); }
+
+  .ds-window-frame-title {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: var(--text-2xs);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-text-tertiary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ds-window-frame-body {
+    padding: var(--ui-pad-x);
+    font-family: var(--font-mono);
+    color: var(--color-text-secondary);
+  }
+</style>

package/dist/u0-primitives/window-frame/WindowFrame.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    title?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const WindowFrame: import("svelte").Component<Props, {}, "">;
+type WindowFrame = ReturnType<typeof WindowFrame>;
+export default WindowFrame;
+//# sourceMappingURL=WindowFrame.svelte.d.ts.map

package/dist/u0-primitives/window-frame/WindowFrame.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowFrame.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/window-frame/WindowFrame.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/u0-primitives/window-frame/WindowFrame.test.js

@@ -0,0 +1,31 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import WindowFrame from './WindowFrame.svelte';
+const textSnippet = (text) => createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+describe('WindowFrame', () => {
+    afterEach(() => cleanup());
+    it('renders three chrome dots', () => {
+        const { container } = render(WindowFrame);
+        expect(container.querySelectorAll('.dot')).toHaveLength(3);
+    });
+    it('renders the title when provided', () => {
+        const { getByText } = render(WindowFrame, { title: 'PROPERTY SEARCH' });
+        expect(getByText('PROPERTY SEARCH')).toBeDefined();
+    });
+    it('omits the title element when not provided', () => {
+        const { container } = render(WindowFrame);
+        expect(container.querySelector('.ds-window-frame-title')).toBeNull();
+    });
+    it('renders slotted children in the body', () => {
+        const { container, getByText } = render(WindowFrame, {
+            children: textSnippet('Body content')
+        });
+        expect(container.querySelector('.ds-window-frame-body')).not.toBeNull();
+        expect(getByText('Body content')).toBeDefined();
+    });
+    it('omits the body element when no children given', () => {
+        const { container } = render(WindowFrame);
+        expect(container.querySelector('.ds-window-frame-body')).toBeNull();
+    });
+});

package/dist/u0-primitives/window-frame/index.d.ts

@@ -0,0 +1,3 @@
+export { default as WindowFrame } from './WindowFrame.svelte';
+export type { Props } from './WindowFrame.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/window-frame/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/window-frame/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/u0-primitives/window-frame/index.js

@@ -0,0 +1 @@
+export { default as WindowFrame } from './WindowFrame.svelte';

package/dist/v0-diagrams/MarkmapDiagram.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect, afterEach, beforeAll } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+import MarkmapDiagram from './MarkmapDiagram.svelte';
+// jsdom doesn't provide ResizeObserver — markmap-view needs it
+beforeAll(() => {
+    if (typeof globalThis.ResizeObserver === 'undefined') {
+        class ResizeObserverMock {
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        }
+        globalThis.ResizeObserver = ResizeObserverMock;
+    }
+});
+afterEach(() => {
+    cleanup();
+});
+describe('v0-diagrams/MarkmapDiagram', () => {
+    it('exports a valid Svelte component', () => {
+        expect(MarkmapDiagram).toBeDefined();
+        expect(typeof MarkmapDiagram).toBe('function');
+    });
+    it('renders diagram container with correct class', () => {
+        const spec = {
+            type: 'markmap',
+            source: '# Root\n## Child',
+        };
+        const { container } = render(MarkmapDiagram, { spec });
+        expect(container.querySelector('.v0-diagram')).not.toBeNull();
+        expect(container.querySelector('.v0-diagram--markmap')).not.toBeNull();
+    });
+    it('renders title when provided', () => {
+        const spec = {
+            type: 'markmap',
+            source: '# Root',
+            title: 'Mind Map',
+        };
+        const { container } = render(MarkmapDiagram, { spec });
+        expect(container.querySelector('.v0-diagram-title')?.textContent).toBe('Mind Map');
+    });
+    it('renders svg element', () => {
+        const spec = {
+            type: 'markmap',
+            source: '# Root',
+        };
+        const { container } = render(MarkmapDiagram, { spec });
+        expect(container.querySelector('svg')).not.toBeNull();
+    });
+});

package/dist/v0-diagrams/MermaidDiagram.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-  import mermaid from 'mermaid';
   import type { DiagramSpec, RenderOptions } from './types';
 
-  mermaid.initialize({
-    securityLevel: 'strict',
-    startOnLoad: false,
-  });
+  let mermaidModule: typeof import('mermaid') | null = null;
+
+  async function getMermaid() {
+    if (!mermaidModule) {
+      mermaidModule = await import('mermaid');
+      mermaidModule.default.initialize({
+        securityLevel: 'strict',
+        startOnLoad: false,
+      });
+    }
+    return mermaidModule.default;
+  }
 
   let { spec, options = {} }: {
     spec: DiagramSpec;
@@ -19,9 +26,14 @@
   });
 
   async function renderDiagram(s: DiagramSpec, opts: RenderOptions) {
-    const id = `mermaid-${crypto.randomUUID()}`;
-    const { svg } = await mermaid.render(id, s.source);
-    svgContent = svg;
+    try {
+      const mermaid = await getMermaid();
+      const id = `mermaid-${crypto.randomUUID()}`;
+      const { svg } = await mermaid.render(id, s.source);
+      svgContent = svg;
+    } catch {
+      // mermaid.render may fail in non-browser environments (jsdom lacks getBBox)
+    }
   }
 </script>
 
@@ -35,7 +47,7 @@
 <style>
   .v0-diagram {
     background: var(--v0-diagram-bg);
-    border: 1px solid var(--v0-diagram-border);
+    border: var(--border-width-thin) solid var(--v0-diagram-border);
     border-radius: var(--radius-lg);
     padding: var(--v0-diagram-padding);
     overflow: auto;

package/dist/v0-diagrams/MermaidDiagram.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/v0-diagrams/MermaidDiagram.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAoCJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MermaidDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/v0-diagrams/MermaidDiagram.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAgDJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/v0-diagrams/MermaidDiagram.test.js

@@ -0,0 +1,40 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+import MermaidDiagram from './MermaidDiagram.svelte';
+afterEach(() => {
+    cleanup();
+});
+describe('v0-diagrams/MermaidDiagram', () => {
+    it('exports a valid Svelte component', () => {
+        expect(MermaidDiagram).toBeDefined();
+        expect(typeof MermaidDiagram).toBe('function');
+    });
+    it('renders diagram title when provided', () => {
+        const spec = {
+            type: 'mermaid',
+            source: 'graph TD; A-->B',
+            title: 'Test Diagram',
+        };
+        const { container } = render(MermaidDiagram, { spec });
+        const titleEl = container.querySelector('.v0-diagram-title');
+        expect(titleEl).not.toBeNull();
+        expect(titleEl?.textContent).toBe('Test Diagram');
+    });
+    it('does not render title when not provided', () => {
+        const spec = {
+            type: 'mermaid',
+            source: 'graph TD; A-->B',
+        };
+        const { container } = render(MermaidDiagram, { spec });
+        expect(container.querySelector('.v0-diagram-title')).toBeNull();
+    });
+    it('applies v0-diagram CSS class', () => {
+        const spec = {
+            type: 'mermaid',
+            source: 'graph TD; A-->B',
+        };
+        const { container } = render(MermaidDiagram, { spec });
+        expect(container.querySelector('.v0-diagram')).not.toBeNull();
+        expect(container.querySelector('.v0-diagram--mermaid')).not.toBeNull();
+    });
+});

package/dist/x0-enchanted-blocks/components/NodepadBlock.svelte

@@ -85,10 +85,19 @@
   }
   
   function handleKeydown(e: KeyboardEvent) {
-    // Tab inserts spaces
+    // Tab inserts two spaces via Selection/Range (no deprecated execCommand)
     if (e.key === 'Tab') {
       e.preventDefault();
-      document.execCommand('insertText', false, '  ');
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode('  '));
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        handleInput();
+      }
     }
   }
 </script>

package/dist/x0-enchanted-blocks/components/NodepadBlock.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodepadBlock.svelte.d.ts","sourceRoot":"","sources":["../../../src/x0-enchanted-blocks/components/NodepadBlock.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EACH,KAAK,SAAS,EACd,KAAK,kBAAkB,EAIxB,MAAM,wBAAwB,CAAC;AAGhC,UAAU,KAAK;IACb,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAqHH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"NodepadBlock.svelte.d.ts","sourceRoot":"","sources":["../../../src/x0-enchanted-blocks/components/NodepadBlock.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EACH,KAAK,SAAS,EACd,KAAK,kBAAkB,EAIxB,MAAM,wBAAwB,CAAC;AAGhC,UAAU,KAAK;IACb,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AA8HH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stephen-netu/design-system",
-  "version": "0.2.1",
+  "version": "0.5.1",
   "description": "KOS LEAP Design System — Neo-brutalist industrial UI with brass accent",
   "type": "module",
   "publishConfig": {
@@ -18,6 +18,13 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:layers": "node scripts/checks/import-graph.mjs",
+    "check:tokens": "node scripts/checks/token-audit.mjs",
+    "check:exports": "node scripts/checks/check-exports.mjs",
+    "check:all": "pnpm check && pnpm check:layers && pnpm check:tokens && pnpm check:vite-pin",
     "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": [
@@ -50,9 +57,27 @@
       "svelte": "./dist/u0-primitives/index.js",
       "default": "./dist/u0-primitives/index.js"
     },
+    "./u0-primitives/web-components": {
+      "types": "./dist/u0-primitives/web-components/index.d.ts",
+      "default": "./dist/u0-primitives/web-components/index.js"
+    },
+    "./u0-primitives/web-components/button-component": {
+      "types": "./dist/u0-primitives/web-components/button-component.d.ts",
+      "default": "./dist/u0-primitives/web-components/button-component.js"
+    },
+    "./u0-primitives/web-components/input-component": {
+      "types": "./dist/u0-primitives/web-components/input-component.d.ts",
+      "default": "./dist/u0-primitives/web-components/input-component.js"
+    },
+    "./u0-primitives/input/Input.svelte": "./dist/u0-primitives/input/Input.svelte",
+    "./u0-primitives/surface-state/SurfaceState.svelte": "./dist/u0-primitives/surface-state/SurfaceState.svelte",
     "./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/kanban": "./dist/l0-layout/kanban/index.js",
+    "./l0-layout/kanban/KanbanBoard.svelte": "./dist/l0-layout/kanban/KanbanBoard.svelte",
+    "./l0-layout/kanban/KanbanColumn.svelte": "./dist/l0-layout/kanban/KanbanColumn.svelte",
+    "./l0-layout/kanban/KanbanCard.svelte": "./dist/l0-layout/kanban/KanbanCard.svelte",
     "./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",
@@ -66,22 +91,34 @@
     "./spatial/LodRenderer.svelte": "./dist/spatial/LodRenderer.svelte",
     "./spatial/SnapZoomCamera.svelte": "./dist/spatial/SnapZoomCamera.svelte",
     "./spatial/BspTilingCanvas.svelte": "./dist/spatial/BspTilingCanvas.svelte",
+    "./spatial/ParticleAssembleMark.svelte": "./dist/spatial/ParticleAssembleMark.svelte",
     "./s0-lifecycle": "./dist/s0-lifecycle/index.js",
     "./s0-state": "./dist/s0-state/index.js",
     "./t0-transport": "./dist/t0-transport/index.js",
+    "./t0-transport/substrate": {
+      "types": "./dist/t0-transport/substrate.svelte.d.ts",
+      "default": "./dist/t0-transport/substrate.svelte.js"
+    },
     "./f0-forms": "./dist/f0-forms/index.js",
     "./d0-data-viz": "./dist/d0-data-viz/index.js",
+    "./epistemic": "./dist/epistemic/index.js",
+    "./epistemic/types": "./dist/epistemic/types.js",
+    "./epistemic/utils": "./dist/epistemic/utils.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",
+    "./platform": "./dist/platform/index.js",
+    "./platform/hud-protocol": "./dist/platform/hud-protocol.js",
     "./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/validity-tokens.css": "./dist/p0-primitives/tokens/validity-tokens.css",
     "./tokens/control-room.css": "./dist/p0-primitives/tokens/control-room.css",
+    "./tokens/ambient.css": "./dist/p0-primitives/tokens/ambient.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",
@@ -91,11 +128,8 @@
     "./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",
+    "./editor/CorrectionTooltip.svelte": "./dist/editor/components/CorrectionTooltip.svelte",
+    "./editor/extensions/autocomplete": "./dist/editor/extensions/autocomplete.js",
     "./fabric": "./dist/fabric/index.js",
     "./fabric/layout": "./dist/fabric/layout/index.js",
     "./fabric/layout/GlassBox.svelte": "./dist/fabric/layout/GlassBox.svelte",
@@ -105,8 +139,9 @@
     "./fabric/navigation": "./dist/fabric/navigation/index.js",
     "./fabric/navigation/ActivityRail.svelte": "./dist/fabric/navigation/ActivityRail.svelte",
     "./fabric/data": "./dist/fabric/data/index.js",
+    "./fabric/data/FileTree.svelte": "./dist/fabric/data/FileTree.svelte",
     "./fabric/input": "./dist/fabric/input/index.js",
-    "./fabric/input/CommandBar.svelte": "./dist/fabric/input/CommandBar.svelte",
+    "./fabric/input/AppHeaderBar.svelte": "./dist/fabric/input/AppHeaderBar.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",
@@ -120,15 +155,20 @@
   ],
   "peerDependencies": {
     "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-fs": "^2",
     "svelte": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@tauri-apps/api": {
       "optional": true
+    },
+    "@tauri-apps/plugin-fs": {
+      "optional": true
     }
   },
   "dependencies": {
     "@chenglou/pretext": "^0.0.5",
+    "@lucide/svelte": "^1.17.0",
     "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.10.0",
     "@codemirror/lang-markdown": "^6.2.0",
@@ -137,7 +177,7 @@
     "@codemirror/lint": "^6.8.0",
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.40.0",
+    "@codemirror/view": "^6.43.1",
     "codemirror": "^6.0.1",
     "d3-force": "^3.0.0",
     "elkjs": "^0.9.3",
@@ -145,17 +185,20 @@
     "graphology": "^0.25.4",
     "graphology-types": "^0.24.7",
     "leaflet": "^1.9.4",
+    "markmap-lib": "^0.18.0",
+    "markmap-view": "^0.18.0",
+    "mermaid": "^11.0.0",
+    "dompurify": "^3.4.9",
     "perfect-arrows": "^0.3.7",
-    "svelte-canvas": "^2.1.0",
-    "tsx": "^4.22.4"
+    "svelte-canvas": "^2.1.0"
   },
   "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",
     "@tauri-apps/api": "^2.8.0",
+    "@tauri-apps/plugin-fs": "^2.0.0",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "5.3.1",
@@ -165,11 +208,9 @@
     "@types/d3-force": "^3.0.10",
     "@types/leaflet": "^1.9.21",
     "jsdom": "^29.1.1",
-    "markmap-lib": "^0.18.0",
-    "markmap-view": "^0.18.0",
-    "mermaid": "^11.0.0",
     "svelte": "^5.55.0",
     "svelte-check": "^4.4.8",
+    "tsx": "^4.22.4",
     "typescript": "^5.9.3",
     "vite": "5.4.21",
     "vitest": "^1.6.1"
@@ -187,5 +228,6 @@
     "dark-theme"
   ],
   "author": "Stephen Netu",
-  "license": "MIT"
+  "license": "MIT",
+  "packageManager": "pnpm@11.5.2"
 }

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

@@ -66,10 +66,10 @@
 
   /* ── Kind accents (overridden by consuming apps) ───────────────────────── */
   --n4-kind-task: var(--color-accent, #b87333);
-  --n4-kind-agent: var(--color-expert-sovereign, #b87333);
+  --n4-kind-agent: var(--expert-sovereign, #b87333);
   --n4-kind-signal: var(--color-status-info, #2980b9);
   --n4-kind-capability: var(--color-accent-secondary, #d4a574);
-  --n4-kind-intent: var(--color-expert-atelier, #b87333);
+  --n4-kind-intent: var(--expert-atelier, #b87333);
   --n4-kind-subtask: color-mix(in srgb, var(--color-accent, #b87333) 60%, transparent);
   --n4-kind-note: var(--color-text-primary, #e8e0d0);
   --n4-kind-concept: var(--color-accent-secondary, #d4a574);

package/src/p0-primitives/tokens/ambient.css

@@ -0,0 +1,76 @@
+/* @kos/design-system — Ambient Layer
+   Opt-in decorative tokens for marketing/docs/onboarding surfaces —
+   NOT auto-imported (see src/index.ts). Import explicitly:
+     import '@stephen-netu/design-system/tokens/ambient.css';
+
+   Everything here derives from the existing single-seed accent engine
+   (--accent-primary → color-mix()) already defined in tokens.css. No
+   hardcoded hues are introduced — swapping --accent-primary re-themes
+   every gradient/glow defined here for free. Do not add hardcoded
+   parallel palettes; that reintroduces the "brass leak" anti-pattern
+   tokens.css's own comments warn against. */
+
+:root {
+  /* --- Gradient --- */
+  --gradient-accent: linear-gradient(135deg, var(--accent-primary) 0%, var(--color-accent-secondary) 100%);
+
+  /* --- Ambient glow layers — low-opacity radial fields for hero/empty-state backgrounds --- */
+  --glow-ambient-1: color-mix(in srgb, var(--accent-primary) 7%, transparent);
+  --glow-ambient-2: color-mix(in srgb, var(--color-accent-secondary) 5%, transparent);
+  --glow-ambient-3: color-mix(in srgb, var(--accent-primary) 3%, transparent);
+}
+
+/* --- Gradient text --- */
+.text-gradient-accent {
+  background: var(--gradient-accent);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* --- Ambient background glow ---
+   Apply to a positioned container; renders a fixed-feel radial glow trio
+   behind its content. Marketing/docs surfaces only — do not use on
+   console/product chrome. */
+.bg-ambient-glow {
+  position: relative;
+}
+.bg-ambient-glow::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(900px 600px at 10% -10%, var(--glow-ambient-1), transparent 65%),
+    radial-gradient(700px 500px at 92% 8%, var(--glow-ambient-2), transparent 60%),
+    radial-gradient(1000px 800px at 50% 140%, var(--glow-ambient-3), transparent 70%);
+}
+.bg-ambient-glow > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* --- Scroll reveal (see p0-primitives/utils/reveal.ts) ---
+   Marketing/docs surfaces only — never wire into console/product chrome. */
+@keyframes ds-reveal-fade-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.ds-reveal {
+  opacity: 0;
+}
+
+.ds-reveal.ds-reveal-in {
+  animation: ds-reveal-fade-up 0.7s cubic-bezier(0.16, 0.8, 0.3, 1) both;
+  animation-delay: var(--ds-reveal-delay, 0ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-reveal,
+  .ds-reveal.ds-reveal-in {
+    opacity: 1;
+    animation: none;
+  }
+}