@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/spatial/ForceCanvas.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  // ForceCanvas — d3-force lifecycle runner
+  // Drives ForceSimulation (implements Lifecycle) via requestAnimationFrame.
+  // Renders via CanvasRenderContext (2D canvas backend).
+  //
+  // NOTE: Heavy stateful component (canvas + RAF loop). Use {#if} to fully
+  // mount/unmount — visibility:hidden would keep the rAF loop running.
+  //
+  // S-02: deterministic sim init by node index.
+  // S-05: simulation bounded by alphaDecay; RAF cancelled on destroy.
+
+  import { onMount, onDestroy, untrack } from 'svelte';
+  import type { ForceCell, ForceCanvasConfig, CellPosition } from './force-canvas-types.js';
+  import { ForceSimulation } from './ForceSimulation.svelte.js';
+  import { CanvasRenderContext } from '../s0-lifecycle/CanvasRenderContext.js';
+  import type { ConstraintContext } from '../s0-lifecycle/ConstraintContext.js';
+  import type { LayoutContext } from '../s0-lifecycle/LayoutContext.js';
+
+  interface Props {
+    cells: ForceCell[];
+    width: number;
+    height: number;
+    config?: ForceCanvasConfig;
+    active?: boolean;
+    onPositionsUpdate?: (positions: CellPosition[]) => void;
+    onCellClick?: (cell: ForceCell) => void;
+    tick?: number;
+  }
+
+  let {
+    cells,
+    width,
+    height,
+    config,
+    active = true,
+    onPositionsUpdate,
+    onCellClick,
+    tick = 0,
+  }: Props = $props();
+
+  let canvas: HTMLCanvasElement | undefined = $state();
+  let sim = $state(new ForceSimulation(cells, config));
+  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.
+  $effect(() => {
+    cells; config;
+    untrack(() => {
+      sim.stop();
+      sim = new ForceSimulation(cells, config);
+      if (canvas) runLayout();
+    });
+  });
+
+  // ── Re-layout on dimension changes ──────────────────────────────────────
+
+  $effect(() => {
+    if (canvas) runLayout();
+  });
+
+  // ── Notify LodRenderer of position changes (backward compat) ────────────
+
+  $effect(() => {
+    if (sim.positions.length > 0) {
+      onPositionsUpdate?.(sim.positions);
+    }
+  });
+
+  // ── Lifecycle phases ─────────────────────────────────────────────────────
+
+  function runLayout() {
+    if (!canvas || !active) return;
+
+    // Phase 1: constrain (advisory only — canvas is given explicit width/height)
+    const constraintCtx: ConstraintContext = {
+      available: {
+        width: { min: width, preferred: width, max: width },
+        height: { min: height, preferred: height, max: height }
+      },
+      scale: window.devicePixelRatio ?? 1,
+      constrain: (w: number, h: number) => ({
+        width: { min: w, preferred: w, max: w },
+        height: { min: h, preferred: h, max: h }
+      }),
+      childConstraint: (_key: string) => undefined
+    };
+    sim.constrain(constraintCtx);
+
+    // Phase 2: layout — tell sim its bounds
+    const layoutCtx: LayoutContext = {
+      bounds: { x: 0, y: 0, width, height },
+      requestRepaint: () => {},
+      requestRepaintAt: (_delayMs: number) => {},
+      childBounds: (_key: string) => undefined,
+      viewportSize: { width, height }
+    };
+    sim.layout(layoutCtx);
+
+    // (Re-)create render context with current canvas dimensions
+    renderCtx = new CanvasRenderContext(canvas);
+    startRaf();
+  }
+
+  function startRaf() {
+    if (rafId !== null) return;
+    function frame() {
+      if (!renderCtx) return;
+      // Phase 4: render — flush sim positions to canvas
+      sim.render(renderCtx);
+      renderCtx.flush();
+      rafId = requestAnimationFrame(frame);
+    }
+    rafId = requestAnimationFrame(frame);
+  }
+
+  // ── Click → interact phase ───────────────────────────────────────────────
+
+  function handleClick(e: MouseEvent) {
+    for (const pos of sim.positions) {
+      const r = pos.radius + 4;
+      const dx = e.offsetX - pos.x;
+      const dy = e.offsetY - pos.y;
+      if (dx * dx + dy * dy <= r * r) {
+        onCellClick?.(pos.cell);
+        return;
+      }
+    }
+  }
+
+  onMount(() => { if (active) runLayout(); });
+  onDestroy(() => {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    sim.stop();
+  });
+</script>
+
+<canvas
+  bind:this={canvas}
+  {width}
+  {height}
+  style:display={active ? 'block' : 'none'}
+  onclick={handleClick}
+  aria-label="Force simulation canvas"
+></canvas>

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

@@ -0,0 +1,15 @@
+import type { ForceCell, ForceCanvasConfig, CellPosition } from './force-canvas-types.js';
+interface Props {
+    cells: ForceCell[];
+    width: number;
+    height: number;
+    config?: ForceCanvasConfig;
+    active?: boolean;
+    onPositionsUpdate?: (positions: CellPosition[]) => void;
+    onCellClick?: (cell: ForceCell) => void;
+    tick?: number;
+}
+declare const ForceCanvas: import("svelte").Component<Props, {}, "">;
+type ForceCanvas = ReturnType<typeof ForceCanvas>;
+export default ForceCanvas;
+//# sourceMappingURL=ForceCanvas.svelte.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+import type { Lifecycle } from '../s0-lifecycle/Lifecycle';
+import type { ConstraintContext, SizeConstraints } from '../s0-lifecycle/ConstraintContext';
+import type { LayoutContext } from '../s0-lifecycle/LayoutContext';
+import type { RenderContext } from '../s0-lifecycle/RenderContext';
+import type { ForceCell, CellPosition, ForceCanvasConfig } from './force-canvas-types';
+export declare class ForceSimulation implements Lifecycle {
+    positions: CellPosition[];
+    private cells;
+    private config;
+    private simulation;
+    private boundsWidth;
+    private boundsHeight;
+    private generation;
+    constructor(cells: ForceCell[], config?: ForceCanvasConfig);
+    constrain(_ctx: ConstraintContext): SizeConstraints;
+    layout(ctx: LayoutContext): void;
+    render(ctx: RenderContext): void;
+    private initSimulation;
+    private buildLinks;
+    private wallForce;
+    stop(): void;
+}
+//# sourceMappingURL=ForceSimulation.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/spatial/ForceSimulation.svelte.js

@@ -0,0 +1,131 @@
+// ForceSimulation — Lifecycle implementation for d3-force semantic positioning
+// Implements constrain → layout → render; interact is owned by ForceCanvas
+// (hit-testing requires access to the onCellClick callback).
+//
+// S-02: No Math.random — initial positions seeded by node index.
+// S-05: alphaDecay bounds simulation convergence; RAF cancelled on destroy.
+import { weightToRadius, cosineSimilarity, semanticSpringLength } from './force-canvas-types';
+const MIN_ZONE_PAD = 40;
+export class ForceSimulation {
+    // Reactive positions — read by LodRenderer via $state
+    positions = $state([]);
+    cells = [];
+    config;
+    simulation = null;
+    boundsWidth = 0;
+    boundsHeight = 0;
+    generation = 0;
+    constructor(cells, config) {
+        this.cells = cells;
+        this.config = config;
+    }
+    // ── Lifecycle phases ────────────────────────────────────────────────────
+    constrain(_ctx) {
+        const n = this.cells.length;
+        const r = this.config?.minSpringLength ?? 30;
+        // Minimum canvas area: cells need space to spread
+        const minSide = Math.max(MIN_ZONE_PAD * 2, Math.ceil(Math.sqrt(n)) * r * 2);
+        return {
+            width: { min: minSide, preferred: minSide * 1.5, max: Infinity },
+            height: { min: minSide, preferred: minSide * 1.5, max: Infinity }
+        };
+    }
+    layout(ctx) {
+        const { bounds } = ctx;
+        this.boundsWidth = bounds.width;
+        this.boundsHeight = bounds.height;
+        // Re-init simulation whenever layout changes
+        this.initSimulation();
+    }
+    render(ctx) {
+        for (const pos of this.positions) {
+            const r = pos.radius;
+            ctx.drawRect({ x: pos.x - r, y: pos.y - r, width: r * 2, height: r * 2 }, '#b87333');
+        }
+    }
+    // ── Internal ─────────────────────────────────────────────────────────────
+    async initSimulation() {
+        const gen = ++this.generation;
+        this.simulation?.stop();
+        if (this.cells.length === 0 || this.boundsWidth === 0) {
+            this.positions = [];
+            return;
+        }
+        const d3 = await import('d3-force');
+        if (gen !== this.generation)
+            return; // superseded by a newer layout call
+        const cfg = this.config;
+        const w = this.boundsWidth;
+        const h = this.boundsHeight;
+        const chargeStrength = cfg?.chargeStrength ?? -80;
+        const collisionPadding = cfg?.collisionPadding ?? 4;
+        const wallMargin = cfg?.wallMargin ?? 20;
+        const wallStrength = cfg?.wallStrength ?? 0.3;
+        const minSpring = cfg?.minSpringLength ?? 30;
+        const maxSpring = cfg?.maxSpringLength ?? 200;
+        const velocityDecay = cfg?.velocityDecay ?? 0.4;
+        const cx = w / 2;
+        const cy = h / 2;
+        for (const cell of this.cells) {
+            if (cell.x === undefined) {
+                // Deterministic initial placement: spiral by index
+                cell.x = cx + (cell.index ?? 0) * 3;
+                cell.y = cy + (cell.index ?? 0) * 2;
+            }
+        }
+        const links = this.buildLinks();
+        this.simulation = d3
+            .forceSimulation(this.cells)
+            .alphaDecay(0.02)
+            .velocityDecay(velocityDecay)
+            .force('charge', d3.forceManyBody().strength(chargeStrength))
+            .force('collision', d3.forceCollide().radius((d) => weightToRadius(d.weight) + collisionPadding))
+            .force('link', d3.forceLink(links).id((d) => d.id)
+            .distance((l) => semanticSpringLength(1 - l.distance, minSpring, maxSpring))
+            .strength(0.5))
+            .force('center', d3.forceCenter(cx, cy).strength(0.03))
+            .force('wall', this.wallForce(w, h, wallMargin, wallStrength))
+            .on('tick', () => {
+            this.positions = this.cells.map((c) => ({
+                x: c.x ?? cx,
+                y: c.y ?? cy,
+                radius: weightToRadius(c.weight),
+                cell: c,
+            }));
+        });
+    }
+    buildLinks() {
+        const links = [];
+        const THRESHOLD = 0.3;
+        for (let i = 0; i < this.cells.length; i++) {
+            for (let j = i + 1; j < this.cells.length; j++) {
+                const sim = cosineSimilarity(this.cells[i].embedding, this.cells[j].embedding);
+                if (sim > THRESHOLD) {
+                    links.push({ source: this.cells[i].id, target: this.cells[j].id, distance: 1 - sim });
+                }
+            }
+        }
+        return links;
+    }
+    wallForce(w, h, margin, strength) {
+        let nodes = [];
+        function force(alpha) {
+            for (const n of nodes) {
+                const x = n.x ?? 0;
+                const y = n.y ?? 0;
+                const r = weightToRadius(n.weight);
+                if (x - r < margin)
+                    n.vx = (n.vx ?? 0) + (margin - x + r) * strength * alpha;
+                if (x + r > w - margin)
+                    n.vx = (n.vx ?? 0) - (x + r - w + margin) * strength * alpha;
+                if (y - r < margin)
+                    n.vy = (n.vy ?? 0) + (margin - y + r) * strength * alpha;
+                if (y + r > h - margin)
+                    n.vy = (n.vy ?? 0) - (y + r - h + margin) * strength * alpha;
+            }
+        }
+        force.initialize = (ns) => { nodes = ns; };
+        return force;
+    }
+    stop() { this.simulation?.stop(); }
+}

package/{src → dist}/spatial/LodRenderer.svelte

@@ -303,7 +303,7 @@
 
   .lod-chip {
     border-radius: 50%;
-    background: var(--color-accent, #b87333);
+    background: var(--color-accent, var(--color-accent));
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { CellPosition } from './force-canvas-types.js';
+import type { LodLevel, LodRendererConfig } from './lod-types.js';
+interface Props {
+    /** Cell positions from ForceCanvas */
+    positions: CellPosition[];
+    /** Current camera zoom factor (0–∞, 1.0 = default) */
+    zoom: number;
+    /** Container width in px */
+    width: number;
+    /** Container height in px */
+    height: number;
+    /** Camera pan offset X */
+    panX?: number;
+    /** Camera pan offset Y */
+    panY?: number;
+    /** Config overrides */
+    config?: LodRendererConfig;
+    /** L0: Full cell editor view */
+    renderL0?: Snippet<[CellPosition, LodLevel]>;
+    /** L1: Compact card view */
+    renderL1?: Snippet<[CellPosition, LodLevel]>;
+    /** L2: Dot/chip view */
+    renderL2?: Snippet<[CellPosition, LodLevel]>;
+    /** L3 renders as a full-zone pixel field — no per-cell callback.
+     *  Instead, the parent provides an L3 overlay snippet. */
+    renderL3?: Snippet<[CellPosition[], number]>;
+    /** Click handler — forwarded from individual cells */
+    onCellClick?: (cellId: string, level: LodLevel) => void;
+}
+declare const LodRenderer: import("svelte").Component<Props, {}, "">;
+type LodRenderer = ReturnType<typeof LodRenderer>;
+export default LodRenderer;
+//# sourceMappingURL=LodRenderer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LodRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/LodRenderer.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAgB,MAAM,gBAAgB,CAAC;AAQ9E,UAAU,KAAK;IACb,sCAAsC;IACtC,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAI3B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7C,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7C,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7C;8DAC0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7C,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;CACzD;AAqNH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/spatial/SnapZoomCamera.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  // SnapZoomCamera — viewport camera with snap-zoom transitions
+  // Delegates all zoom/pan/snap logic to CameraController (Lifecycle)
+  // Renders via CSS transforms on a wrapper div
+
+  import type { Snippet } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import { CameraController } from './CameraController.svelte.js';
+  import type { CameraState, SnapZoomTarget, CameraConfig } from './camera-types.js';
+  import type { InteractionContext } from '../s0-lifecycle/InteractionContext.js';
+
+  interface Props {
+    width: number;
+    height: number;
+    config?: CameraConfig;
+    children: Snippet<[CameraState]>;
+    onCameraChange?: (state: CameraState) => void;
+  }
+
+  let {
+    width,
+    height,
+    config,
+    children,
+    onCameraChange,
+  }: Props = $props();
+
+  const controller = $state(new CameraController(width, height, config));
+  const cameraState: CameraState = $derived(controller.getCameraState());
+
+  $effect(() => {
+    onCameraChange?.(cameraState);
+  });
+
+  // ── Contexts for lifecycle phases ─────────────────────────────────────────
+
+  function runPhases(): void {
+    controller.constrain({
+      available: {
+        width: { min: width, preferred: width, max: width },
+        height: { min: height, preferred: height, max: height },
+      },
+      scale: 1,
+      constrain(w: number, h: number) {
+        return {
+          width: { min: w, preferred: w, max: w },
+          height: { min: h, preferred: h, max: h },
+        };
+      },
+      childConstraint(): undefined { return undefined; },
+    });
+
+    controller.layout({
+      bounds: { x: 0, y: 0, width, height },
+      requestRepaint() {},
+      requestRepaintAt() {},
+      childBounds(): undefined { return undefined; },
+      viewportSize: { width, height },
+    });
+  }
+
+  onMount(() => {
+    runPhases();
+  });
+
+  // ── Interaction forwarding ────────────────────────────────────────────────
+
+  let wheelRafId: number | null = null;
+  let pendingWheelEvent: WheelEvent | null = null;
+
+  onDestroy(() => {
+    controller.stop();
+    if (wheelRafId !== null) cancelAnimationFrame(wheelRafId);
+  });
+
+  function getEventOffset(e: PointerEvent | WheelEvent): { x: number; y: number } {
+    if (e.type === 'pointerdown' || e.type === 'pointermove' || e.type === 'pointerup' || e.type === 'mousedown' || e.type === 'mousemove' || e.type === 'mouseup' || e.type === 'click') {
+      const pe = e as PointerEvent;
+      return { x: pe.offsetX, y: pe.offsetY };
+    }
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+
+  function makeInteractionContext(e: PointerEvent | WheelEvent): InteractionContext {
+    const type = e.type;
+    let wasConsumed = false;
+    const offset = getEventOffset(e);
+    const posX = offset.x;
+    const posY = offset.y;
+    return {
+      event: {
+        type,
+        nativeEvent: e,
+        consumed: wasConsumed,
+        position: { x: posX, y: posY },
+        modifiers: {
+          shift: e.shiftKey,
+          ctrl: e.ctrlKey,
+          alt: e.altKey,
+          meta: e.metaKey,
+        },
+      },
+      consume() { wasConsumed = true; },
+      requestFocus() {},
+      releaseFocus() {},
+      requestSoftKeyboard() {},
+    };
+  }
+
+  function handleWheel(e: WheelEvent) {
+    e.preventDefault();
+    pendingWheelEvent = e;
+    if (wheelRafId !== null) return;
+    wheelRafId = requestAnimationFrame(() => {
+      wheelRafId = null;
+      const evt = pendingWheelEvent;
+      pendingWheelEvent = null;
+      if (evt) {
+        const ctx = makeInteractionContext(evt);
+        controller.interact(ctx);
+      }
+    });
+  }
+
+  function handlePointerDown(e: PointerEvent) {
+    const ctx = makeInteractionContext(e);
+    const outcome = controller.interact(ctx);
+    if (outcome === 'consumed') {
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    }
+  }
+
+  function handlePointerMove(e: PointerEvent) {
+    const ctx = makeInteractionContext(e);
+    controller.interact(ctx);
+  }
+
+  function handlePointerUp(e: PointerEvent) {
+    const ctx = makeInteractionContext(e);
+    controller.interact(ctx);
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="snap-zoom-camera"
+  style:width="{width}px"
+  style:height="{height}px"
+  onwheel={handleWheel}
+  onpointerdown={handlePointerDown}
+  onpointermove={handlePointerMove}
+  onpointerup={handlePointerUp}
+  onpointercancel={handlePointerUp}
+>
+  <div
+    class="camera-viewport"
+    style:transform="translate({controller.panX}px, {controller.panY}px) scale({controller.zoom})"
+    style:transform-origin="0 0"
+  >
+    {@render children(cameraState)}
+  </div>
+</div>
+
+<style>
+  .snap-zoom-camera {
+    position: relative;
+    overflow: hidden;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .snap-zoom-camera:active {
+    cursor: grabbing;
+  }
+
+  .camera-viewport {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    will-change: transform;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { CameraState, CameraConfig } from './camera-types.js';
+interface Props {
+    width: number;
+    height: number;
+    config?: CameraConfig;
+    children: Snippet<[CameraState]>;
+    onCameraChange?: (state: CameraState) => void;
+}
+declare const SnapZoomCamera: import("svelte").Component<Props, {}, "">;
+type SnapZoomCamera = ReturnType<typeof SnapZoomCamera>;
+export default SnapZoomCamera;
+//# sourceMappingURL=SnapZoomCamera.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnapZoomCamera.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/SnapZoomCamera.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAE,WAAW,EAAkB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjF,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAqJH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/{src → dist}/spatial/ZoneTiler.svelte

@@ -207,8 +207,8 @@
 >
   <!-- Zone panes -->
   {#each zones as zone (zone.id)}
-    <button
-      type="button"
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div
       class="zone-pane"
       class:zone-focused={zone.id === focusedZoneId}
       class:zone-scelle={zone.zone.privacyState === 'scelle'}
@@ -216,11 +216,20 @@
       style:top="{zone.y}px"
       style:width="{zone.width}px"
       style:height="{zone.height}px"
-      onclick={() => handleZoneClick(zone.id)}
+      tabindex="0"
+      role="region"
+      aria-label={zone.zone.label}
       data-zone-id={zone.id}
+      onclick={() => handleZoneClick(zone.id)}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleZoneClick(zone.id);
+        }
+      }}
     >
       {@render zoneContent(zone)}
-    </button>
+    </div>
   {/each}
 
   <!-- Dividers (rendered on top of zones) -->
@@ -266,14 +275,22 @@
     border: none;
     background: transparent;
     padding: 0;
+    margin: 0;
     cursor: pointer;
     text-align: left;
     font: inherit;
     color: inherit;
+    outline: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .zone-pane:focus-visible {
+    box-shadow: inset 0 0 0 1.5px var(--color-accent, var(--color-accent));
   }
 
   .zone-focused {
-    box-shadow: inset 0 0 0 1.5px var(--color-accent, #b87333);
+    box-shadow: inset 0 0 0 1.5px var(--color-accent, var(--color-accent));
   }
 
   .zone-scelle {
@@ -299,13 +316,13 @@
 
   .zone-divider-visual {
     position: absolute;
-    background: var(--color-border, #333);
+    background: var(--border-default, #333);
     border-radius: var(--radius-xs, 1px);
     transition: background 0.12s ease;
   }
 
   .zone-divider:hover .zone-divider-visual,
   .zone-divider-active .zone-divider-visual {
-    background: var(--color-accent, #b87333);
+    background: var(--color-accent, var(--color-accent));
   }
 </style>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { BspNode, ZoneRect, ZoneTilerConfig, SplitDirection } from './zone-tiler-types.js';
+interface Props {
+    /** BSP tree defining the zone layout */
+    tree: BspNode;
+    /** Container width in px */
+    width: number;
+    /** Container height in px */
+    height: number;
+    /** Render callback for each zone — receives zone rect */
+    zoneContent: Snippet<[ZoneRect]>;
+    /** Configuration overrides */
+    config?: ZoneTilerConfig;
+    /** Currently focused zone id */
+    focusedZoneId?: string;
+    /** Fired when a divider is dragged and ratio changes */
+    onResize?: (tree: BspNode) => void;
+    /** Fired when focused zone changes (keyboard nav or click) */
+    onFocusChange?: (zoneId: string) => void;
+    /** Fired when user requests a zone split (Ctrl+Shift+H/V) */
+    onSplitRequest?: (zoneId: string, direction: SplitDirection) => void;
+}
+declare const ZoneTiler: import("svelte").Component<Props, {}, "focusedZoneId">;
+type ZoneTiler = ReturnType<typeof ZoneTiler>;
+export default ZoneTiler;
+//# sourceMappingURL=ZoneTiler.svelte.d.ts.map