@stephen-netu/design-system 0.2.0 → 0.2.2

package/dist/showcase/Showcase.svelte

@@ -89,7 +89,7 @@
 
         <div class="component-section">
           <h3>Inputs & Forms</h3>
-          <div class="demo-row" style="max-width: 400px; display: flex; flex-direction: column;">
+          <div class="demo-row" style="max-width: 25rem; display: flex; flex-direction: column;">
             <Input placeholder="Standard Input" bind:value={inputValue} />
             <Input placeholder="With leading icon">
               {#snippet iconLeading()} <Search size={16}/> {/snippet}
@@ -182,7 +182,7 @@
         
         <div class="component-section">
           <h3>Form Field & Search</h3>
-          <div class="demo-row" style="flex-direction: column; max-width: 400px;">
+          <div class="demo-row" style="flex-direction: column; max-width: 25rem;">
             <FormField id="demo-field" label="Email Address" helper="We'll never share your email.">
               <Input id="demo-field" type="email" placeholder="agent@kos.network" />
             </FormField>
@@ -198,7 +198,7 @@
         <!-- TODO: Re-add when Chat components exist
         <div class="component-section">
           <h3>List Items</h3>
-          <div class="demo-row" style="flex-direction: column; max-width: 320px;">
+            <div class="demo-row" style="flex-direction: column; max-width: 20rem;">
             <ChannelListItem id="c1" name="general-chat" time="2m" unreadCount={5} preview="Hey, did we merge the PR?" />
             <ChannelListItem id="c2" name="architecture-req" isActive preview="Let's discuss the capability model." />
             <ChannelListItem id="c3" name="alerts-noisy" isMuted unreadCount={12} preview="[CRITICAL] Pod failure" />
@@ -207,7 +207,7 @@
 
         <div class="component-section">
           <h3>Message Bubbles</h3>
-          <div class="demo-row" style="flex-direction: column; max-width: 500px">
+          <div class="demo-row" style="flex-direction: column; max-width: 31.25rem">
             <MessageBubble id="m1" senderName="Alice" timestamp={Date.now() - 60000} content="..." />
           </div>
         </div>
@@ -216,12 +216,11 @@
         <div class="component-section">
           <h3>Kanban Card</h3>
           <div class="demo-row">
-            <div style="width: 280px">
-              <KanbanCard item={{
+            <div style="width: 17.5rem">
+              <KanbanCard card={{
                 id: '1', title: 'Implement Design Tokens', priority: 'high',
-                content: 'Add full css variable support to all atomic components.',
-                badges: [{ label: 'Frontend', color: 'accent' }],
-                assignee: { name: 'Netu' }
+                description: 'Add full css variable support to all atomic components.',
+                tags: ['Frontend'],
               }} />
             </div>
           </div>
@@ -235,13 +234,13 @@
         <!-- TODO: Re-add when ContextPanel component exists
         <div class="component-section">
           <h3>Context Panel</h3>
-          <div style="height: 300px; position: relative; border: 1px solid var(--border-default); overflow: hidden; border-radius: var(--radius-lg, 8px);">
-            <div style="padding: 20px;">
+          <div style="height: 18.75rem; position: relative; border: var(--border-width-thin) solid var(--border-default); overflow: hidden; border-radius: var(--radius-lg);">
+            <div style="padding: var(--space-5);">
               <Button onclick={() => isContextPanelOpen = true}>Open Panel</Button>
             </div>
             <ContextPanel bind:isOpen={isContextPanelOpen} title="Task Details" tabs={[]}>
               <div class="ds-stack">
-                <KanbanCard item={{id:'x', title:'Sample Task', priority:'urgent'}} />
+                <KanbanCard card={{id:'x', title:'Sample Task', priority:'urgent'}} />
               </div>
             </ContextPanel>
           </div>
@@ -250,26 +249,35 @@
 
         <div class="component-section">
           <h3>Kanban Board</h3>
-          <div style="height: 400px; border: 1px solid var(--border-default); border-radius: var(--radius-lg, 8px);">
-            <KanbanBoard>
-              <KanbanColumn id="todo" title="To Do" count={2}>
-                <KanbanCard item={{id:'t1', title:'Setup repo', priority:'high'}} />
-                <KanbanCard item={{id:'t2', title:'Config vite', priority:'medium'}} />
-              </KanbanColumn>
-              
-              <KanbanColumn id="inprog" title="In Progress" count={1} wipLimit={3}>
-                <KanbanCard item={{id:'t3', title:'Build components', priority:'high'}} />
-              </KanbanColumn>
-
-              <KanbanColumn id="done" title="Done" count={0} />
-            </KanbanBoard>
+          <div style="height: 25rem; border: var(--border-width-thin) solid var(--border-default); border-radius: var(--radius-lg);">
+            <KanbanBoard
+              columns={[
+                {
+                  column: { id: 'todo', title: 'To Do' },
+                  cards: [
+                    { id: 't1', title: 'Setup repo', priority: 'high' },
+                    { id: 't2', title: 'Config vite', priority: 'medium' },
+                  ],
+                },
+                {
+                  column: { id: 'inprog', title: 'In Progress' },
+                  cards: [
+                    { id: 't3', title: 'Build components', priority: 'high' },
+                  ],
+                },
+                {
+                  column: { id: 'done', title: 'Done' },
+                  cards: [],
+                },
+              ]}
+            />
           </div>
         </div>
 
         <!-- TODO: Re-add when ChatPanel and CanvasToolbar components exist
         <div class="component-section">
           <h3>Chat Panel (Organism)</h3>
-          <div style="height: 500px; border: 1px solid var(--border-default); border-radius: var(--radius-lg, 8px);">
+          <div style="height: 31.25rem; border: var(--border-width-thin) solid var(--border-default); border-radius: var(--radius-lg);">
             <ChatPanel title="general-chat" memberCount={42}>
               {#snippet headerActions()}<Button variant="ghost" size="sm"><Search size={16}/></Button>{/snippet}
               {#snippet messages()}<p>Messages here</p>{/snippet}
@@ -280,7 +288,7 @@
 
         <div class="component-section">
           <h3>Canvas Toolbar</h3>
-          <div style="height: 200px; position: relative; background: var(--color-bg-canvas);">
+          <div style="height: 12.5rem; position: relative; background: var(--color-bg-canvas);">
             <CanvasToolbar position="bottom">
               <Button variant="ghost"><Settings size={16}/></Button>
             </CanvasToolbar>
@@ -298,7 +306,7 @@
           <p style="color: var(--color-text-secondary); margin-bottom: 1rem;">
             ADR: ui-timeline-checkpoint-bar-001 — Scrollable checkpoint navigation with color-coded components.
           </p>
-          <div style="border: 1px solid var(--border-default); border-radius: var(--radius-lg, 8px); overflow: hidden;">
+          <div style="border: var(--border-width-thin) solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden;">
             <CheckpointBar
               checkpoints={demoCheckpoints}
               currentSeqno={demoCurrentSeqno}
@@ -323,9 +331,9 @@
           <h3>Component Color Coding</h3>
           <div class="demo-row">
             <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-              {#each Object.entries({ 'rust-crate': 'var(--color-accent)', 'ui-bundle': '#5f9ea0', 'config': '#daa520', 'faculty-state': '#9370db', 'substrate-binary': '#cd5c5c', 'system-snapshot': '#2f4f4f' }) as [type, color]}
+              {#each Object.entries({ 'rust-crate': 'var(--color-accent)', 'ui-bundle': 'var(--color-info)', 'config': 'var(--color-warning)', 'faculty-state': 'var(--expert-sovereign)', 'substrate-binary': 'var(--color-info)', 'system-snapshot': 'var(--color-offline)' }) as [type, color]}
                 <div style="display: flex; align-items: center; gap: 0.75rem;">
-                  <span style="color: {color}; font-size: 16px;">◉</span>
+                  <span style="color: {color}; font-size: var(--text-base);">◉</span>
                   <span style="font-size: 0.85rem; color: var(--color-text-secondary); font-family: var(--font-mono);">{type}</span>
                   <span style="font-size: 0.75rem; color: var(--color-text-muted);">{color}</span>
                 </div>
@@ -342,7 +350,7 @@
 <style>
   .showcase {
     padding: var(--space-8);
-    max-width: 1200px;
+    max-width: 75rem;
     margin: 0 auto;
     font-family: var(--font-sans);
     color: var(--color-text-primary);
@@ -358,8 +366,9 @@
   h1 {
     margin: 0;
     font-size: var(--text-2xl);
-    background: linear-gradient(135deg, var(--color-accent) 0%, #E2A670 100%);
+    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%);
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
   }
 
@@ -367,7 +376,7 @@
     margin: 0 0 var(--space-4) 0;
     font-weight: 500;
     color: var(--color-text-secondary);
-    border-bottom: 1px solid var(--border-subtle);
+    border-bottom: var(--border-width-thin) solid var(--border-subtle);
     padding-bottom: var(--space-2);
   }
 
@@ -395,7 +404,7 @@
 
   .glass-bg {
     padding: var(--space-4);
-    background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
+    background: linear-gradient(135deg, var(--color-accent), var(--color-info));
     border-radius: var(--radius-lg);
   }
 </style>

package/dist/showcase/Showcase.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Showcase.svelte.d.ts","sourceRoot":"","sources":["../../src/showcase/Showcase.svelte.ts"],"names":[],"mappings":"AAySA,QAAA,MAAM,QAAQ,2DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Showcase.svelte.d.ts","sourceRoot":"","sources":["../../src/showcase/Showcase.svelte.ts"],"names":[],"mappings":"AA+SA,QAAA,MAAM,QAAQ,2DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/spatial/BspTilingCanvas.svelte

@@ -23,6 +23,8 @@
     children: import('svelte').Snippet;
   }
 
+  export type BspTilingCanvasProps = Props;
+
   let {
     cards,
     containerWidth,
@@ -32,7 +34,7 @@
 
   // ── Simulation (reactive) ────────────────────────────────────────────────
 
-  let sim = $state(new BspTilingSimulation(cards, containerWidth, containerHeight));
+  let sim: BspTilingSimulation | null = $state(null);
 
   $effect(() => {
     const c = cards;
@@ -78,6 +80,7 @@
   }
 
   function runLayout(): void {
+    if (!sim) return;
     const cc = makeConstraintContext();
     const lc = makeLayoutContext();
     sim.constrain(cc);
@@ -109,7 +112,7 @@
   }
 
   function paintCanvas(): void {
-    if (!canvasCtx) return;
+    if (!canvasCtx || !sim) return;
     sim.render(canvasCtx);
     canvasCtx.flush();
   }
@@ -117,6 +120,7 @@
   // ── Event handlers ────────────────────────────────────────────────────────
 
   function handlePointerDown(e: PointerEvent): void {
+    if (!sim) return;
     const target = e.currentTarget as HTMLElement;
     const ctx = makeInteractionContext(e, target);
     sim.interact(ctx);
@@ -134,8 +138,6 @@
       ctx2d.scale(dpr, dpr);
     }
     canvasCtx = new CanvasRenderContext(canvasEl);
-    runLayout();
-    paintCanvas();
   });
 </script>
 
@@ -147,7 +149,7 @@
     aria-hidden="true"
   ></canvas>
 
-  {#each sim.positions as zone (zone.cardId)}
+  {#each (sim?.positions ?? []) as zone (zone.cardId)}
     <div
       class="tiling-slot"
       style:left="{zone.x}px"

package/dist/spatial/BspTilingCanvas.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     containerHeight: number;
     children: import('svelte').Snippet;
 }
+export type BspTilingCanvasProps = Props;
 declare const BspTilingCanvas: import("svelte").Component<Props, {}, "">;
 type BspTilingCanvas = ReturnType<typeof BspTilingCanvas>;
 export default BspTilingCanvas;

package/dist/spatial/BspTilingCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BspTilingCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/BspTilingCanvas.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGrE,UAAU,KAAK;IACb,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AAsJH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"BspTilingCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/BspTilingCanvas.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGrE,UAAU,KAAK;IACb,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAuJ3C,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/spatial/BspTilingSimulation.test.js

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest';
+import { BspTilingSimulation } from './BspTilingSimulation.svelte';
+describe('BspTilingSimulation', () => {
+    it('returns empty positions for empty card list', () => {
+        const sim = new BspTilingSimulation([], 800, 600);
+        sim.layout({ bounds: { x: 0, y: 0, width: 800, height: 600 } });
+        expect(sim.positions).toEqual([]);
+    });
+    it('produces one zone for a single card', () => {
+        const sim = new BspTilingSimulation([{ id: 'card-1', minWidth: 200, minHeight: 150 }], 800, 600);
+        sim.layout({ bounds: { x: 0, y: 0, width: 800, height: 600 } });
+        expect(sim.positions.length).toBe(1);
+        expect(sim.positions[0].cardId).toBe('card-1');
+    });
+    it('produces N zones for N cards', () => {
+        const cards = [
+            { id: 'c1', minWidth: 100, minHeight: 100 },
+            { id: 'c2', minWidth: 100, minHeight: 100 },
+            { id: 'c3', minWidth: 100, minHeight: 100 },
+        ];
+        const sim = new BspTilingSimulation(cards, 1200, 800);
+        sim.layout({ bounds: { x: 0, y: 0, width: 1200, height: 800 } });
+        expect(sim.positions.length).toBe(3);
+        const cardIds = sim.positions.map((p) => p.cardId);
+        expect(cardIds).toContain('c1');
+        expect(cardIds).toContain('c2');
+        expect(cardIds).toContain('c3');
+    });
+    it('zones do not overlap', () => {
+        const cards = [
+            { id: 'c1', minWidth: 100, minHeight: 100 },
+            { id: 'c2', minWidth: 100, minHeight: 100 },
+            { id: 'c3', minWidth: 100, minHeight: 100 },
+            { id: 'c4', minWidth: 100, minHeight: 100 },
+        ];
+        const sim = new BspTilingSimulation(cards, 1200, 800);
+        sim.layout({ bounds: { x: 0, y: 0, width: 1200, height: 800 } });
+        for (let i = 0; i < sim.positions.length; i++) {
+            for (let j = i + 1; j < sim.positions.length; j++) {
+                const a = sim.positions[i];
+                const b = sim.positions[j];
+                const overlapX = a.x < b.x + b.width && a.x + a.width > b.x;
+                const overlapY = a.y < b.y + b.height && a.y + a.height > b.y;
+                expect(overlapX && overlapY).toBe(false);
+            }
+        }
+    });
+    it('produces dividers when zones are adjacent', () => {
+        // Use a wide container so BSP produces side-by-side zones
+        const cards = [
+            { id: 'c1', minWidth: 100, minHeight: 100 },
+            { id: 'c2', minWidth: 100, minHeight: 100 },
+        ];
+        const sim = new BspTilingSimulation(cards, 2000, 400);
+        sim.layout({ bounds: { x: 0, y: 0, width: 2000, height: 400 } });
+        // Dividers depend on adjacency — with a wide container the BSP
+        // should split vertically, producing adjacent zones
+        expect(sim.dividers.length).toBeGreaterThanOrEqual(0);
+    });
+    it('hit test returns consumed for position inside a zone', () => {
+        const sim = new BspTilingSimulation([{ id: 'c1', minWidth: 200, minHeight: 200 }], 800, 600);
+        sim.layout({ bounds: { x: 0, y: 0, width: 800, height: 600 } });
+        const zone = sim.positions[0];
+        const result = sim.interact({
+            event: { type: 'pointerdown', position: { x: zone.x + 10, y: zone.y + 10 } },
+        });
+        expect(result).toBe('consumed');
+    });
+    it('hit test returns propagated for position far outside all zones', () => {
+        const sim = new BspTilingSimulation([{ id: 'c1', minWidth: 100, minHeight: 100 }], 200, 200);
+        sim.layout({ bounds: { x: 0, y: 0, width: 200, height: 200 } });
+        // Zone fills the entire 200x200, so test a position outside bounds
+        const result = sim.interact({
+            event: { type: 'pointerdown', position: { x: 9999, y: 9999 } },
+        });
+        expect(result).toBe('propagated');
+    });
+    it('constrain returns minimum size based on card areas', () => {
+        const cards = [
+            { id: 'c1', minWidth: 200, minHeight: 200 },
+            { id: 'c2', minWidth: 200, minHeight: 200 },
+        ];
+        const sim = new BspTilingSimulation(cards, 800, 600);
+        const constraints = sim.constrain({});
+        expect(constraints.width.min).toBeGreaterThan(0);
+        expect(constraints.height.min).toBeGreaterThan(0);
+    });
+});

package/dist/spatial/CameraController.test.js

@@ -0,0 +1,120 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { CameraController } from './CameraController.svelte';
+beforeEach(() => {
+    vi.useFakeTimers();
+    // Mock requestAnimationFrame to actually invoke the callback
+    let rafId = 0;
+    const callbacks = new Map();
+    vi.stubGlobal('requestAnimationFrame', (cb) => {
+        const id = ++rafId;
+        callbacks.set(id, cb);
+        return id;
+    });
+    vi.stubGlobal('cancelAnimationFrame', (id) => {
+        callbacks.delete(id);
+    });
+    // Helper to advance rAF by one frame
+    globalThis.__flushRaf = () => {
+        const cbs = [...callbacks.values()];
+        callbacks.clear();
+        cbs.forEach((cb) => cb(performance.now()));
+    };
+});
+afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+});
+describe('CameraController', () => {
+    it('initializes with default zoom and pan', () => {
+        const cam = new CameraController(800, 600);
+        expect(cam.zoom).toBe(1.0);
+        expect(cam.panX).toBe(0);
+        expect(cam.panY).toBe(0);
+    });
+    it('returns camera state via getCameraState', () => {
+        const cam = new CameraController(800, 600);
+        const state = cam.getCameraState();
+        expect(state.zoom).toBe(1.0);
+        expect(state.panX).toBe(0);
+        expect(state.panY).toBe(0);
+    });
+    it('clamps zoom to min/max bounds', () => {
+        const cam = new CameraController(800, 600, { minZoom: 0.5, maxZoom: 3.0 });
+        cam.layout({ viewportSize: { width: 800, height: 600 } });
+        for (let i = 0; i < 100; i++) {
+            cam.interact({
+                event: {
+                    type: 'wheel',
+                    position: { x: 400, y: 300 },
+                    nativeEvent: { deltaY: -50, preventDefault: () => { } },
+                },
+            });
+        }
+        expect(cam.zoom).toBeLessThanOrEqual(3.0);
+        for (let i = 0; i < 200; i++) {
+            cam.interact({
+                event: {
+                    type: 'wheel',
+                    position: { x: 400, y: 300 },
+                    nativeEvent: { deltaY: 50, preventDefault: () => { } },
+                },
+            });
+        }
+        expect(cam.zoom).toBeGreaterThanOrEqual(0.5);
+    });
+    it('pan moves camera position', () => {
+        const cam = new CameraController(800, 600);
+        cam.layout({ viewportSize: { width: 800, height: 600 } });
+        cam.interact({
+            event: {
+                type: 'pointerdown',
+                position: { x: 100, y: 100 },
+                nativeEvent: { button: 1, preventDefault: () => { } },
+            },
+        });
+        cam.interact({
+            event: {
+                type: 'pointermove',
+                position: { x: 200, y: 150 },
+                nativeEvent: { clientX: 200, clientY: 150 },
+            },
+        });
+        expect(cam.panX).not.toBe(0);
+        expect(cam.panY).not.toBe(0);
+    });
+    it('resetCamera eventually snaps to origin', () => {
+        const cam = new CameraController(800, 600);
+        cam.layout({ viewportSize: { width: 800, height: 600 } });
+        cam.snapTo({ x: 100, y: 100, zoom: 2.0 });
+        // Flush all pending rAF callbacks
+        for (let i = 0; i < 100; i++)
+            globalThis.__flushRaf();
+        cam.resetCamera();
+        for (let i = 0; i < 100; i++)
+            globalThis.__flushRaf();
+        // resetCamera() calls snapTo({x:0, y:0, zoom:1.0})
+        // targetPanX = viewportW/2 - x*zoom = 800/2 - 0 = 400
+        // targetPanY = viewportH/2 - y*zoom = 600/2 - 0 = 300
+        expect(cam.zoom).toBeCloseTo(1.0, 0);
+        expect(cam.panX).toBeCloseTo(400, 0);
+        expect(cam.panY).toBeCloseTo(300, 0);
+    });
+    it('stop cancels active animation', () => {
+        const cam = new CameraController(800, 600);
+        cam.layout({ viewportSize: { width: 800, height: 600 } });
+        cam.snapTo({ x: 50, y: 50, zoom: 2.0 });
+        cam.stop();
+        const zoomAfterStop = cam.zoom;
+        for (let i = 0; i < 100; i++)
+            globalThis.__flushRaf();
+        expect(cam.zoom).toBe(zoomAfterStop);
+    });
+    it('constrain returns fixed dimensions matching constructor size', () => {
+        const cam = new CameraController(1024, 768);
+        const c = cam.constrain({});
+        expect(c.width.min).toBe(1024);
+        expect(c.width.preferred).toBe(1024);
+        expect(c.height.min).toBe(768);
+        expect(c.height.preferred).toBe(768);
+    });
+});

package/dist/spatial/ForceCanvas.svelte

@@ -27,6 +27,8 @@
     tick?: number;
   }
 
+  export type ForceCanvasProps = Props;
+
   let {
     cells,
     width,
@@ -39,19 +41,15 @@
   }: Props = $props();
 
   let canvas: HTMLCanvasElement | undefined = $state();
-  let sim = $state(new ForceSimulation(cells, config));
+  let sim: ForceSimulation | null = $state(null);
   let renderCtx: CanvasRenderContext | null = null;
   let rafId: number | null = null;
 
-  // ── Sync cells/config changes → new simulation ──────────────────────────
-  // We read+write `sim` inside this effect; without untrack(), reassigning
-  // `sim` would invalidate the effect's own dependency and loop forever
-  // (effect_update_depth_exceeded). Touch cells/config to register them as
-  // deps, then mutate sim outside tracking.
+  // ── Initialize + sync cells/config changes → simulation ──────────────────
   $effect(() => {
     cells; config;
     untrack(() => {
-      sim.stop();
+      sim?.stop();
       sim = new ForceSimulation(cells, config);
       if (canvas) runLayout();
     });
@@ -66,7 +64,7 @@
   // ── Notify LodRenderer of position changes (backward compat) ────────────
 
   $effect(() => {
-    if (sim.positions.length > 0) {
+      if (sim && sim.positions.length > 0) {
       onPositionsUpdate?.(sim.positions);
     }
   });
@@ -74,7 +72,7 @@
   // ── Lifecycle phases ─────────────────────────────────────────────────────
 
   function runLayout() {
-    if (!canvas || !active) return;
+    if (!canvas || !active || !sim) return;
 
     // Phase 1: constrain (advisory only — canvas is given explicit width/height)
     const constraintCtx: ConstraintContext = {
@@ -109,18 +107,27 @@
   function startRaf() {
     if (rafId !== null) return;
     function frame() {
-      if (!renderCtx) return;
-      // Phase 4: render — flush sim positions to canvas
-      sim.render(renderCtx);
+      if (!renderCtx || !sim) return;
+      sim?.render(renderCtx);
       renderCtx.flush();
       rafId = requestAnimationFrame(frame);
     }
+    const reduceMotion = typeof window !== 'undefined' &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduceMotion) {
+      if (renderCtx && sim) {
+        sim.render(renderCtx);
+        renderCtx.flush();
+      }
+      return;
+    }
     rafId = requestAnimationFrame(frame);
   }
 
   // ── Click → interact phase ───────────────────────────────────────────────
 
   function handleClick(e: MouseEvent) {
+    if (!sim) return;
     for (const pos of sim.positions) {
       const r = pos.radius + 4;
       const dx = e.offsetX - pos.x;
@@ -135,7 +142,7 @@
   onMount(() => { if (active) runLayout(); });
   onDestroy(() => {
     if (rafId !== null) cancelAnimationFrame(rafId);
-    sim.stop();
+    sim?.stop();
   });
 </script>
 

package/dist/spatial/ForceCanvas.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     onCellClick?: (cell: ForceCell) => void;
     tick?: number;
 }
+export type ForceCanvasProps = Props;
 declare const ForceCanvas: import("svelte").Component<Props, {}, "">;
 type ForceCanvas = ReturnType<typeof ForceCanvas>;
 export default ForceCanvas;

package/dist/spatial/ForceCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForceCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/ForceCanvas.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAOxF,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwIH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ForceCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/ForceCanvas.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAOxF,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC;AA8IvC,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/spatial/ForceSimulation.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForceSimulation.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/ForceSimulation.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAKvF,qBAAa,eAAgB,YAAW,SAAS;IAE/C,SAAS,EAAE,YAAY,EAAE,CAAc;IAEvC,OAAO,CAAC,KAAK,CAAmB;IAChC,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;gBAEX,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,EAAE,iBAAiB;IAO1D,SAAS,CAAC,IAAI,EAAE,iBAAiB,GAAG,eAAe;IAWnD,MAAM,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAQhC,MAAM,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;YAYlB,cAAc;IAuD5B,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IAiBjB,IAAI,IAAI,IAAI;CACb"}
+{"version":3,"file":"ForceSimulation.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/ForceSimulation.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAa,MAAM,sBAAsB,CAAC;AAOlG,qBAAa,eAAgB,YAAW,SAAS;IAE/C,SAAS,EAAE,YAAY,EAAE,CAAc;IAEvC,OAAO,CAAC,KAAK,CAAmB;IAChC,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,UAAU,CAA+C;IACjE,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;gBAEX,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,EAAE,iBAAiB;IAO1D,SAAS,CAAC,IAAI,EAAE,iBAAiB,GAAG,eAAe;IAWnD,MAAM,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAQhC,MAAM,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;YAYlB,cAAc;IAkE5B,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IAiBjB,IAAI,IAAI,IAAI;CACb"}