@stephen-netu/design-system 0.2.1 → 0.5.1

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;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAyIvC,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"}

package/dist/spatial/ForceSimulation.svelte.js

@@ -4,6 +4,7 @@
 //
 // S-02: No Math.random — initial positions seeded by node index.
 // S-05: alphaDecay bounds simulation convergence; RAF cancelled on destroy.
+import { toD3Node, toD3Link } from './d3-types';
 import { weightToRadius, cosineSimilarity, semanticSpringLength } from './force-canvas-types';
 const MIN_ZONE_PAD = 40;
 export class ForceSimulation {
@@ -40,7 +41,7 @@ export class ForceSimulation {
     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');
+            ctx.drawRect({ x: pos.x - r, y: pos.y - r, width: r * 2, height: r * 2 }, 'var(--color-accent, #888)');
         }
     }
     // ── Internal ─────────────────────────────────────────────────────────────
@@ -51,9 +52,9 @@ export class ForceSimulation {
             this.positions = [];
             return;
         }
-        const d3 = await import('d3-force');
+        const d3Mod = await import('d3-force');
         if (gen !== this.generation)
-            return; // superseded by a newer layout call
+            return;
         const cfg = this.config;
         const w = this.boundsWidth;
         const h = this.boundsHeight;
@@ -66,33 +67,43 @@ export class ForceSimulation {
         const velocityDecay = cfg?.velocityDecay ?? 0.4;
         const cx = w / 2;
         const cy = h / 2;
-        for (const cell of this.cells) {
+        const nodes = this.cells.map((cell, i) => {
             if (cell.x === undefined) {
-                // Deterministic initial placement: spiral by index
-                cell.x = cx + (cell.index ?? 0) * 3;
-                cell.y = cy + (cell.index ?? 0) * 2;
+                cell.x = cx + (cell.index ?? i) * 3;
+                cell.y = cy + (cell.index ?? i) * 2;
             }
-        }
-        const links = this.buildLinks();
-        this.simulation = d3
-            .forceSimulation(this.cells)
+            return toD3Node(cell);
+        });
+        const links = this.buildLinks().map(toD3Link);
+        const sim = d3Mod.forceSimulation(nodes)
             .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))
+            .force('charge', d3Mod.forceManyBody().strength(chargeStrength))
+            .force('collision', d3Mod.forceCollide().radius((d) => {
+            const cell = this.cells.find((c) => c.id === d.id);
+            return cell ? weightToRadius(cell.weight) + collisionPadding : collisionPadding + 8;
+        }))
+            .force('link', d3Mod.forceLink(links).id((d) => d.id)
+            .distance((l) => semanticSpringLength(1 - (l.distance ?? 0.5), minSpring, maxSpring))
             .strength(0.5))
-            .force('center', d3.forceCenter(cx, cy).strength(0.03))
+            .force('center', d3Mod.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,
-            }));
+            this.positions = nodes.map((n) => {
+                const cell = this.cells.find((c) => c.id === n.id);
+                return {
+                    x: n.x ?? cx,
+                    y: n.y ?? cy,
+                    radius: weightToRadius(cell.weight),
+                    cell,
+                };
+            });
         });
+        if (gen !== this.generation) {
+            sim.stop();
+            return;
+        }
+        this.simulation = sim;
     }
     buildLinks() {
         const links = [];

package/dist/spatial/LodRenderer.svelte

@@ -209,12 +209,25 @@
         {@const state = getLodState(pos.cell.id)}
         {@const isTransitioning = state?.transitionProgress !== null && state?.transitionProgress !== undefined}
 
+        {@const cellAttrs = onCellClick ? {
+          role: 'button',
+          tabindex: 0,
+          'aria-label': 'Open cell at current level of detail',
+          onclick: () => onCellClick?.(pos.cell.id, currentLod),
+          onkeydown: (e: KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              onCellClick?.(pos.cell.id, currentLod);
+            }
+          }
+        } : {}}
+
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
           class="lod-cell"
           style:left="{pos.x - pos.radius}px"
           style:top="{pos.y - pos.radius}px"
-          onclick={() => onCellClick?.(pos.cell.id, currentLod)}
+          {...cellAttrs}
           data-lod={currentLod}
           data-cell-id={pos.cell.id}
         >

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

@@ -1 +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;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAsNvC,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"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;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAmOvC,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/spatial/ParticleAssembleMark.svelte

@@ -0,0 +1,285 @@
+<script lang="ts">
+  // ParticleAssembleMark — animates a canvas particle field converging into
+  // an arbitrary set of SVG-authored polygons (a logomark, glyph, or any
+  // flat-fill shape). Generalizes the "form the mark from particles" hero
+  // moment pattern.
+  //
+  // NOTE: Heavy stateful component (canvas + RAF loop). Use {#if} to fully
+  // mount/unmount — visibility:hidden would keep the rAF loop running.
+  //
+  // S-05: the assembly RAF loop is bounded — it terminates once particles
+  // settle and switches to a single static draw; it does not run forever.
+  // Per-particle start edge/position/delay are cosmetically randomized for
+  // visual variety only (no business logic depends on this), so
+  // Math.random() here does not carry the S-02 determinism concern that
+  // applies to kernel/backend computation.
+
+  import { onMount, onDestroy } from 'svelte';
+  import { fitScale, easeOutCubic, particleFrame } from './particle-assemble-math.js';
+
+  export interface ParticleShape {
+    /** Polygon points in the coordinate space of viewBoxWidth/viewBoxHeight. */
+    points: [number, number][];
+    /** 'primary' (gradient fill) or 'secondary' (solid accent fill). Defaults to 'primary'. */
+    tone?: 'primary' | 'secondary';
+  }
+
+  export interface Props {
+    shapes: ParticleShape[];
+    viewBoxWidth: number;
+    viewBoxHeight: number;
+    width?: number;
+    height?: number;
+    primaryColor?: string;
+    primaryColor2?: string;
+    secondaryColor?: string;
+    durationMs?: number;
+    active?: boolean;
+    class?: string;
+    'aria-label'?: string;
+  }
+
+  let {
+    shapes,
+    viewBoxWidth,
+    viewBoxHeight,
+    width = 200,
+    height = 200,
+    primaryColor = 'currentColor',
+    primaryColor2,
+    secondaryColor = 'currentColor',
+    durationMs = 900,
+    active = true,
+    class: className = '',
+    'aria-label': ariaLabel
+  }: Props = $props();
+
+  interface Particle {
+    x: number;
+    y: number;
+    tx: number;
+    ty: number;
+    color: string;
+    r: number;
+    delay: number;
+  }
+
+  let canvas: HTMLCanvasElement | undefined = $state();
+  let settled = $state(false);
+  let rafId: number | null = null;
+  let particles: Particle[] = [];
+  let observer: IntersectionObserver | null = null;
+  let lastDx = 0;
+  let lastDy = 0;
+  let lastScale = 1;
+  const dpr = typeof window !== 'undefined' ? Math.min(window.devicePixelRatio || 1, 3) : 1;
+
+  // Canvas fillStyle cannot parse CSS custom properties or `currentColor` —
+  // it isn't part of the CSSOM cascade. Resolve those to a concrete color
+  // via the canvas element's computed style before handing them to canvas.
+  function resolveColor(value: string): string {
+    if (!canvas) return value;
+    const trimmed = value.trim();
+    const varMatch = trimmed.match(/^var\((--[\w-]+)(?:\s*,\s*(.+))?\)$/);
+    if (varMatch) {
+      const resolved = getComputedStyle(canvas).getPropertyValue(varMatch[1]).trim();
+      return resolved || varMatch[2] || trimmed;
+    }
+    if (trimmed === 'currentColor') {
+      return getComputedStyle(canvas).color;
+    }
+    return trimmed;
+  }
+
+  function drawShapes(
+    ctx: CanvasRenderingContext2D,
+    dx: number,
+    dy: number,
+    scale: number
+  ) {
+    const resolvedPrimary = resolveColor(primaryColor);
+    const resolvedPrimary2 = resolveColor(primaryColor2 || primaryColor);
+    const resolvedSecondary = resolveColor(secondaryColor);
+
+    const gradient = ctx.createLinearGradient(dx, dy, dx + viewBoxWidth * scale, dy + viewBoxHeight * scale);
+    gradient.addColorStop(0, resolvedPrimary);
+    gradient.addColorStop(1, resolvedPrimary2);
+
+    for (const shape of shapes) {
+      ctx.fillStyle = shape.tone === 'secondary' ? resolvedSecondary : gradient;
+      ctx.beginPath();
+      shape.points.forEach(([px, py], i) => {
+        const x = dx + px * scale;
+        const y = dy + py * scale;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      });
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
+
+  function buildTargets(): { x: number; y: number; r: number; g: number; b: number }[] {
+    if (!canvas) return [];
+    const cssW = canvas.clientWidth || width;
+    const cssH = canvas.clientHeight || height;
+    canvas.width = cssW * dpr;
+    canvas.height = cssH * dpr;
+
+    const off = document.createElement('canvas');
+    off.width = canvas.width;
+    off.height = canvas.height;
+    const offCtx = off.getContext('2d');
+    if (!offCtx) return [];
+
+    const { scale, dx, dy } = fitScale(viewBoxWidth, viewBoxHeight, canvas.width, canvas.height);
+
+    drawShapes(offCtx, dx, dy, scale);
+    lastDx = dx;
+    lastDy = dy;
+    lastScale = scale;
+
+    const data = offCtx.getImageData(0, 0, off.width, off.height).data;
+    const step = Math.max(1, Math.floor(dpr * 1.15));
+    const pts: { x: number; y: number; r: number; g: number; b: number }[] = [];
+    for (let y = 0; y < off.height; y += step) {
+      for (let x = 0; x < off.width; x += step) {
+        const idx = (y * off.width + x) * 4;
+        const alpha = data[idx + 3];
+        if (alpha > 100) {
+          pts.push({ x, y, r: data[idx], g: data[idx + 1], b: data[idx + 2] });
+        }
+      }
+    }
+    return pts;
+  }
+
+  function initParticles() {
+    const pts = buildTargets();
+    if (!canvas) return;
+    const cw = canvas.width;
+    const ch = canvas.height;
+    particles = pts.map((p) => {
+      const edge = Math.floor(Math.random() * 4);
+      let sx: number;
+      let sy: number;
+      if (edge === 0) { sx = -40; sy = Math.random() * ch; }
+      else if (edge === 1) { sx = cw + 40; sy = Math.random() * ch; }
+      else if (edge === 2) { sx = Math.random() * cw; sy = -40; }
+      else { sx = Math.random() * cw; sy = ch + 40; }
+      return {
+        x: sx,
+        y: sy,
+        tx: p.x,
+        ty: p.y,
+        color: `rgb(${p.r},${p.g},${p.b})`,
+        r: (Math.random() * 1.0 + 1.3) * dpr,
+        delay: Math.random() * 300
+      };
+    });
+  }
+
+  function renderFinalMark() {
+    const ctx = canvas?.getContext('2d');
+    if (!ctx || !canvas) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawShapes(ctx, lastDx, lastDy, lastScale);
+  }
+
+  function animate(now: number, startTime: number) {
+    const ctx = canvas?.getContext('2d');
+    if (!ctx || !canvas) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    let allDone = true;
+    for (const p of particles) {
+      const t = now - startTime - p.delay;
+      if (t < 0) { allDone = false; continue; }
+      const progress = t / durationMs;
+      const eased = easeOutCubic(progress);
+      if (progress < 1) allDone = false;
+      const frame = particleFrame(p, eased);
+      ctx.globalAlpha = frame.alpha;
+      ctx.fillStyle = p.color;
+      ctx.beginPath();
+      ctx.arc(frame.x, frame.y, p.r, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+    if (!allDone) {
+      rafId = requestAnimationFrame((n) => animate(n, startTime));
+    } else {
+      renderFinalMark();
+      settled = true;
+      rafId = null;
+    }
+  }
+
+  function start() {
+    if (!canvas) return;
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    initParticles();
+    if (reduceMotion) {
+      renderFinalMark();
+      settled = true;
+      return;
+    }
+    settled = false;
+    const now = performance.now();
+    rafId = requestAnimationFrame((n) => animate(n, n));
+  }
+
+  function replay() {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    rafId = null;
+    start();
+  }
+
+  // Re-run assembly when colors change (e.g. an accent-seed picker swap),
+  // mirroring the settled-mark retheme behavior — only after first settle,
+  // so this never fires during the initial mount's own assembly.
+  $effect(() => {
+    primaryColor; primaryColor2; secondaryColor;
+    if (settled) replay();
+  });
+
+  onMount(() => {
+    if (!active || !canvas) return;
+    if ('IntersectionObserver' in window) {
+      observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              start();
+              observer?.disconnect();
+            }
+          }
+        },
+        { threshold: 0.3 }
+      );
+      observer.observe(canvas);
+    } else {
+      start();
+    }
+  });
+
+  onDestroy(() => {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    observer?.disconnect();
+  });
+</script>
+
+<canvas
+  bind:this={canvas}
+  class="ds-particle-assemble-mark {className}"
+  style:width="{width}px"
+  style:height="{height}px"
+  aria-hidden={ariaLabel ? undefined : 'true'}
+  aria-label={ariaLabel}
+  role={ariaLabel ? 'img' : undefined}
+></canvas>
+
+<style>
+  .ds-particle-assemble-mark {
+    display: block;
+  }
+</style>

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

@@ -0,0 +1,24 @@
+export interface ParticleShape {
+    /** Polygon points in the coordinate space of viewBoxWidth/viewBoxHeight. */
+    points: [number, number][];
+    /** 'primary' (gradient fill) or 'secondary' (solid accent fill). Defaults to 'primary'. */
+    tone?: 'primary' | 'secondary';
+}
+export interface Props {
+    shapes: ParticleShape[];
+    viewBoxWidth: number;
+    viewBoxHeight: number;
+    width?: number;
+    height?: number;
+    primaryColor?: string;
+    primaryColor2?: string;
+    secondaryColor?: string;
+    durationMs?: number;
+    active?: boolean;
+    class?: string;
+    'aria-label'?: string;
+}
+declare const ParticleAssembleMark: import("svelte").Component<Props, {}, "">;
+type ParticleAssembleMark = ReturnType<typeof ParticleAssembleMark>;
+export default ParticleAssembleMark;
+//# sourceMappingURL=ParticleAssembleMark.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleAssembleMark.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/ParticleAssembleMark.svelte.ts"],"names":[],"mappings":"AAqBE,MAAM,WAAW,aAAa;IAC5B,4EAA4E;IAC5E,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC3B,2FAA2F;IAC3F,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAChC;AAED,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkQH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/spatial/SnapZoomCamera.svelte

@@ -4,7 +4,7 @@
   // Renders via CSS transforms on a wrapper div
 
   import type { Snippet } from 'svelte';
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy, untrack } 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';
@@ -27,8 +27,21 @@
     onCameraChange,
   }: Props = $props();
 
-  const controller = $state(new CameraController(width, height, config));
-  const cameraState: CameraState = $derived(controller.getCameraState());
+  let controller = $state<CameraController | null>(null);
+  const cameraState: CameraState = $derived(controller?.getCameraState() ?? { zoom: 1, panX: 0, panY: 0 });
+  const panX = $derived(controller?.panX ?? 0);
+  const panY = $derived(controller?.panY ?? 0);
+  const zoom = $derived(controller?.zoom ?? 1);
+
+  $effect(() => {
+    void width;
+    void height;
+    void config;
+    untrack(() => {
+      controller = new CameraController(width, height, config);
+      runPhases();
+    });
+  });
 
   $effect(() => {
     onCameraChange?.(cameraState);
@@ -37,6 +50,7 @@
   // ── Contexts for lifecycle phases ─────────────────────────────────────────
 
   function runPhases(): void {
+    if (!controller) return;
     controller.constrain({
       available: {
         width: { min: width, preferred: width, max: width },
@@ -61,17 +75,13 @@
     });
   }
 
-  onMount(() => {
-    runPhases();
-  });
-
   // ── Interaction forwarding ────────────────────────────────────────────────
 
   let wheelRafId: number | null = null;
   let pendingWheelEvent: WheelEvent | null = null;
 
   onDestroy(() => {
-    controller.stop();
+    controller?.stop();
     if (wheelRafId !== null) cancelAnimationFrame(wheelRafId);
   });
 
@@ -120,14 +130,14 @@
       pendingWheelEvent = null;
       if (evt) {
         const ctx = makeInteractionContext(evt);
-        controller.interact(ctx);
+        controller?.interact(ctx);
       }
     });
   }
 
   function handlePointerDown(e: PointerEvent) {
     const ctx = makeInteractionContext(e);
-    const outcome = controller.interact(ctx);
+    const outcome = controller?.interact(ctx);
     if (outcome === 'consumed') {
       (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
     }
@@ -135,12 +145,12 @@
 
   function handlePointerMove(e: PointerEvent) {
     const ctx = makeInteractionContext(e);
-    controller.interact(ctx);
+    controller?.interact(ctx);
   }
 
   function handlePointerUp(e: PointerEvent) {
     const ctx = makeInteractionContext(e);
-    controller.interact(ctx);
+    controller?.interact(ctx);
   }
 </script>
 
@@ -157,7 +167,7 @@
 >
   <div
     class="camera-viewport"
-    style:transform="translate({controller.panX}px, {controller.panY}px) scale({controller.zoom})"
+    style:transform="translate({panX}px, {panY}px) scale({zoom})"
     style:transform-origin="0 0"
   >
     {@render children(cameraState)}

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

@@ -1 +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;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC;AAsJ1C,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"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;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC;AAgK1C,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/spatial/ZoneTiler.svelte

@@ -204,7 +204,7 @@
   style:height="{height}px"
   onkeydown={handleKeydown}
   tabindex="0"
-  role="application"
+  role="grid"
   aria-label="Zone tiler — use h/j/k/l to navigate zones"
 >
   <!-- Zone panes -->
@@ -219,7 +219,8 @@
       style:width="{zone.width}px"
       style:height="{zone.height}px"
       tabindex="0"
-      role="region"
+      role="button"
+      aria-pressed={zone.id === focusedZoneId}
       aria-label={zone.zone.label}
       data-zone-id={zone.id}
       onclick={() => handleZoneClick(zone.id)}

package/dist/spatial/ZoneTiler.test.js

@@ -0,0 +1,90 @@
+import { describe, it, expect } from 'vitest';
+import { createDefaultBsp, splitZone, flattenBsp, findZone, serializeBsp, deserializeBsp, } from './zone-tiler-types';
+const dt = 6;
+describe('zone-tiler-types', () => {
+    it('createDefaultBsp produces a single leaf node', () => {
+        const tree = createDefaultBsp('main', 'Main Zone');
+        expect(tree.kind).toBe('leaf');
+        expect(tree.id).toBe('main');
+        expect(tree.label).toBe('Main Zone');
+        expect(tree.privacyState).toBe('ouvert');
+    });
+    it('splitZone replaces a leaf with a split node', () => {
+        const tree = createDefaultBsp('z1', 'Zone 1');
+        const newZone = { kind: 'leaf', id: 'z2', label: 'Zone 2', privacyState: 'ouvert' };
+        const result = splitZone(tree, 'z1', 'horizontal', newZone, 0.5);
+        expect(result.kind).toBe('split');
+        if (result.kind === 'split') {
+            expect(result.direction).toBe('horizontal');
+            expect(result.ratio).toBe(0.5);
+            expect(result.first.id).toBe('z1');
+            expect(result.second.id).toBe('z2');
+        }
+    });
+    it('flattenBsp returns one zone for a single leaf', () => {
+        const tree = createDefaultBsp('leaf1', 'Leaf');
+        const result = flattenBsp(tree, 0, 0, 800, 600, dt);
+        expect(result.zones.length).toBe(1);
+        expect(result.zones[0].id).toBe('leaf1');
+        expect(result.zones[0].x).toBe(0);
+        expect(result.zones[0].y).toBe(0);
+        expect(result.zones[0].width).toBe(800);
+        expect(result.zones[0].height).toBe(600);
+        expect(result.dividers.length).toBe(0);
+    });
+    it('flattenBsp produces two zones and one divider for a horizontal split', () => {
+        const tree = createDefaultBsp('z1', 'A');
+        const newZone = { kind: 'leaf', id: 'z2', label: 'B', privacyState: 'ouvert' };
+        const split = splitZone(tree, 'z1', 'horizontal', newZone, 0.5);
+        const result = flattenBsp(split, 0, 0, 800, 600, dt);
+        expect(result.zones.length).toBe(2);
+        expect(result.dividers.length).toBe(1);
+        expect(result.dividers[0].direction).toBe('horizontal');
+    });
+    it('flattenBsp zones do not overlap', () => {
+        const tree = createDefaultBsp('z1', 'A');
+        const z2 = { kind: 'leaf', id: 'z2', label: 'B', privacyState: 'ouvert' };
+        const split = splitZone(tree, 'z1', 'vertical', z2, 0.5);
+        const result = flattenBsp(split, 0, 0, 800, 600, dt);
+        const a = result.zones[0];
+        const b = result.zones[1];
+        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('findZone locates a leaf by id', () => {
+        const tree = createDefaultBsp('target', 'Target');
+        const found = findZone(tree, 'target');
+        expect(found).not.toBeNull();
+        expect(found.id).toBe('target');
+    });
+    it('findZone returns null for nonexistent id', () => {
+        const tree = createDefaultBsp('only', 'Only');
+        expect(findZone(tree, 'missing')).toBeNull();
+    });
+    it('findZone searches nested splits', () => {
+        const tree = createDefaultBsp('root', 'Root');
+        const child = { kind: 'leaf', id: 'child', label: 'Child', privacyState: 'ouvert' };
+        const split = splitZone(tree, 'root', 'horizontal', child);
+        const found = findZone(split, 'child');
+        expect(found).not.toBeNull();
+        expect(found.id).toBe('child');
+    });
+    it('serializeBsp and deserializeBsp round-trip', () => {
+        const tree = createDefaultBsp('rt', 'RoundTrip');
+        const child = { kind: 'leaf', id: 'c', label: 'C', privacyState: 'ouvert' };
+        const split = splitZone(tree, 'rt', 'vertical', child, 0.7);
+        const json = serializeBsp(split);
+        const restored = deserializeBsp(json);
+        expect(restored.kind).toBe('split');
+        if (restored.kind === 'split') {
+            expect(restored.ratio).toBe(0.7);
+        }
+    });
+    it('flattenBsp with nested splits produces correct zone count', () => {
+        let tree = createDefaultBsp('z1', 'A');
+        tree = splitZone(tree, 'z1', 'horizontal', { kind: 'leaf', id: 'z2', label: 'B', privacyState: 'ouvert' });
+        const result = flattenBsp(tree, 0, 0, 800, 600, dt);
+        expect(result.zones.length).toBe(2);
+    });
+});