@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/s0-state/index.js

@@ -5,3 +5,6 @@ export { createDerived } from './derived';
 export { createVirtualList, createVirtualGrid, createPreloader, calculateGridLayout, } from './virtual';
 // New from NNJAS port - Sync status component
 export { default as SyncStatus } from './SyncStatus.svelte';
+// Modal stack management — subpath only (module-scope singleton)
+export { modalStackStore } from './modal-stack-store.svelte';
+// Theme management — subpath only (module-scope singleton)

package/dist/s0-state/modal-stack-store.svelte.d.ts

@@ -1,5 +1,5 @@
 /**
- * Modal Stack Store — Stack-based modal management for @kos/design-system.
+ * Modal Stack Store — Stack-based modal management for @stephen-netu/design-system.
  *
  * Manages a stack of modals (not just one). Opening a modal pushes onto the
  * stack; closing pops. Enables "back" navigation when opening modals from
@@ -8,7 +8,7 @@
  * Adopted from Chronicler's modalStack.ts pattern (2026-05-25 investigation).
  *
  * Usage:
- *   import { modalStackStore } from '@kos/design-system';
+ *   import { modalStackStore } from '@stephen-netu/design-system/s0-state';
  *
  *   // Push a modal
  *   modalStackStore.push({ id: 'confirm-delete', props: { itemId: 'abc' } });
@@ -23,20 +23,45 @@
  *   const activeModal = modalStackStore.active;
  *   const stackDepth = modalStackStore.depth;
  */
+/**
+ * ModalStackStore — Module-scope singleton for modal stacking (F-29).
+ *
+ * Instantiated once at module scope. Holds the visible-modal stack and
+ * the logical modal stack. Consumers register/unregister modals at
+ * mount/unmount time via the Modal component.
+ *
+ * @module s0-state/modal-stack-store
+ * @example
+ * ```ts
+ * import { modalStackStore } from '@stephen-netu/design-system/s0-state';
+ * console.log(modalStackStore.depth);
+ * ```
+ */
 export interface ModalData {
     id: string;
     props?: Record<string, unknown>;
     onClose?: () => void;
 }
+export interface VisibleModal {
+    id: string;
+    zIndex: number;
+    onClose: () => void;
+}
 declare class ModalStackStore {
     private stack;
+    private visibleModals;
     get active(): ModalData | null;
     get depth(): number;
     get all(): readonly ModalData[];
+    get topmost(): VisibleModal | null;
+    get visibleIds(): readonly string[];
     push(modal: ModalData): void;
     pop(): void;
     closeAll(): void;
     removeById(id: string): void;
+    register(modal: VisibleModal): () => void;
+    unregister(id: string): void;
+    isTopmost(id: string): boolean;
 }
 export declare const modalStackStore: ModalStackStore;
 export {};

package/dist/s0-state/modal-stack-store.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-stack-store.svelte.d.ts","sourceRoot":"","sources":["../../src/s0-state/modal-stack-store.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,cAAM,eAAe;IACnB,OAAO,CAAC,KAAK,CAA2B;IAExC,IAAI,MAAM,IAAI,SAAS,GAAG,IAAI,CAG7B;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,GAAG,IAAI,SAAS,SAAS,EAAE,CAE9B;IAED,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAI5B,GAAG,IAAI,IAAI;IAOX,QAAQ,IAAI,IAAI;IAMhB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;CAO7B;AAED,eAAO,MAAM,eAAe,iBAAwB,CAAC"}
+{"version":3,"file":"modal-stack-store.svelte.d.ts","sourceRoot":"","sources":["../../src/s0-state/modal-stack-store.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,cAAM,eAAe;IACnB,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,aAAa,CAA8B;IAEnD,IAAI,MAAM,IAAI,SAAS,GAAG,IAAI,CAG7B;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,GAAG,IAAI,SAAS,SAAS,EAAE,CAE9B;IAED,IAAI,OAAO,IAAI,YAAY,GAAG,IAAI,CAGjC;IAED,IAAI,UAAU,IAAI,SAAS,MAAM,EAAE,CAElC;IAED,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAI5B,GAAG,IAAI,IAAI;IAOX,QAAQ,IAAI,IAAI;IAMhB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAQ5B,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,IAAI;IAKzC,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAI5B,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;CAG/B;AAED,eAAO,MAAM,eAAe,iBAAwB,CAAC"}

package/dist/s0-state/modal-stack-store.svelte.js

@@ -1,5 +1,5 @@
 /**
- * Modal Stack Store — Stack-based modal management for @kos/design-system.
+ * Modal Stack Store — Stack-based modal management for @stephen-netu/design-system.
  *
  * Manages a stack of modals (not just one). Opening a modal pushes onto the
  * stack; closing pops. Enables "back" navigation when opening modals from
@@ -8,7 +8,7 @@
  * Adopted from Chronicler's modalStack.ts pattern (2026-05-25 investigation).
  *
  * Usage:
- *   import { modalStackStore } from '@kos/design-system';
+ *   import { modalStackStore } from '@stephen-netu/design-system/s0-state';
  *
  *   // Push a modal
  *   modalStackStore.push({ id: 'confirm-delete', props: { itemId: 'abc' } });
@@ -25,6 +25,7 @@
  */
 class ModalStackStore {
     stack = $state([]);
+    visibleModals = $state([]);
     get active() {
         if (this.stack.length === 0)
             return null;
@@ -36,6 +37,14 @@ class ModalStackStore {
     get all() {
         return this.stack;
     }
+    get topmost() {
+        if (this.visibleModals.length === 0)
+            return null;
+        return this.visibleModals[this.visibleModals.length - 1];
+    }
+    get visibleIds() {
+        return this.visibleModals.map((modal) => modal.id);
+    }
     push(modal) {
         this.stack = [...this.stack, modal];
     }
@@ -59,5 +68,15 @@ class ModalStackStore {
         this.stack = this.stack.filter(m => m.id !== id);
         removing.onClose?.();
     }
+    register(modal) {
+        this.visibleModals = [...this.visibleModals, modal];
+        return () => this.unregister(modal.id);
+    }
+    unregister(id) {
+        this.visibleModals = this.visibleModals.filter((modal) => modal.id !== id);
+    }
+    isTopmost(id) {
+        return this.topmost?.id === id;
+    }
 }
 export const modalStackStore = new ModalStackStore();

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

@@ -34,7 +34,7 @@
 
   // ── Simulation (reactive) ────────────────────────────────────────────────
 
-  let sim = $state(new BspTilingSimulation(cards, containerWidth, containerHeight));
+  let sim: BspTilingSimulation | null = $state(null);
 
   $effect(() => {
     const c = cards;
@@ -80,6 +80,7 @@
   }
 
   function runLayout(): void {
+    if (!sim) return;
     const cc = makeConstraintContext();
     const lc = makeLayoutContext();
     sim.constrain(cc);
@@ -111,7 +112,7 @@
   }
 
   function paintCanvas(): void {
-    if (!canvasCtx) return;
+    if (!canvasCtx || !sim) return;
     sim.render(canvasCtx);
     canvasCtx.flush();
   }
@@ -119,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);
@@ -136,8 +138,6 @@
       ctx2d.scale(dpr, dpr);
     }
     canvasCtx = new CanvasRenderContext(canvasEl);
-    runLayout();
-    paintCanvas();
   });
 </script>
 
@@ -149,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/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

@@ -41,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();
     });
@@ -68,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);
     }
   });
@@ -76,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 = {
@@ -111,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;
@@ -137,7 +142,7 @@
   onMount(() => { if (active) runLayout(); });
   onDestroy(() => {
     if (rafId !== null) cancelAnimationFrame(rafId);
-    sim.stop();
+    sim?.stop();
   });
 </script>