@stephen-netu/design-system 0.2.2 → 0.5.1

package/dist/p0-primitives/utils/reveal.test.js

@@ -0,0 +1,95 @@
+import { afterEach, beforeEach, describe, it, expect } from 'vitest';
+import { reveal } from './reveal';
+// Scoped to this file only (installed in beforeEach, removed in afterEach) —
+// a global IntersectionObserver polyfill in vitest-setup.ts changes which
+// code path unrelated components (e.g. MarkmapDiagram's d3-zoom setup) take,
+// crashing on jsdom's incomplete SVG support. Keep this local.
+class IntersectionObserverMock {
+    static instances = [];
+    callback;
+    observedTargets = [];
+    constructor(callback) {
+        this.callback = callback;
+        IntersectionObserverMock.instances.push(this);
+    }
+    observe(target) { this.observedTargets.push(target); }
+    unobserve(target) { this.observedTargets = this.observedTargets.filter((t) => t !== target); }
+    disconnect() { this.observedTargets = []; }
+    takeRecords() { return []; }
+}
+function lastObserver() {
+    return IntersectionObserverMock.instances[IntersectionObserverMock.instances.length - 1];
+}
+function makeEntry(target, isIntersecting) {
+    return { target, isIntersecting };
+}
+describe('reveal', () => {
+    let node;
+    let originalIntersectionObserver;
+    beforeEach(() => {
+        originalIntersectionObserver = globalThis.IntersectionObserver;
+        IntersectionObserverMock.instances = [];
+        globalThis.IntersectionObserver = IntersectionObserverMock;
+    });
+    afterEach(() => {
+        node?.remove();
+        globalThis.IntersectionObserver = originalIntersectionObserver;
+    });
+    it('adds the ds-reveal class on mount', () => {
+        node = document.createElement('div');
+        reveal(node);
+        expect(node.classList.contains('ds-reveal')).toBe(true);
+    });
+    it('adds ds-reveal-in once the node intersects', () => {
+        node = document.createElement('div');
+        reveal(node);
+        const observer = lastObserver();
+        observer.callback([makeEntry(node, true)], observer);
+        expect(node.classList.contains('ds-reveal-in')).toBe(true);
+    });
+    it('does not add ds-reveal-in before intersecting', () => {
+        node = document.createElement('div');
+        reveal(node);
+        expect(node.classList.contains('ds-reveal-in')).toBe(false);
+    });
+    it('sets --ds-reveal-delay when delayMs is passed', () => {
+        node = document.createElement('div');
+        reveal(node, { delayMs: 240 });
+        expect(node.style.getPropertyValue('--ds-reveal-delay')).toBe('240ms');
+    });
+    it('removes ds-reveal-in on exit when once is false', () => {
+        node = document.createElement('div');
+        reveal(node, { once: false });
+        const observer = lastObserver();
+        observer.callback([makeEntry(node, true)], observer);
+        expect(node.classList.contains('ds-reveal-in')).toBe(true);
+        observer.callback([makeEntry(node, false)], observer);
+        expect(node.classList.contains('ds-reveal-in')).toBe(false);
+    });
+    it('disconnects the observer on destroy', () => {
+        node = document.createElement('div');
+        const action = reveal(node);
+        const observer = lastObserver();
+        expect(observer.observedTargets).toContain(node);
+        action?.destroy?.();
+        expect(observer.observedTargets).not.toContain(node);
+    });
+    it('reveals immediately with no observer when prefers-reduced-motion is set', () => {
+        const originalMatchMedia = window.matchMedia;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        window.matchMedia = (query) => ({
+            matches: query.includes('reduce'),
+            media: query,
+            addListener: () => { },
+            removeListener: () => { },
+            addEventListener: () => { },
+            removeEventListener: () => { },
+            dispatchEvent: () => false
+        });
+        node = document.createElement('div');
+        reveal(node);
+        expect(node.classList.contains('ds-reveal-in')).toBe(true);
+        expect(node.classList.contains('ds-reveal')).toBe(false);
+        window.matchMedia = originalMatchMedia;
+    });
+});

package/dist/s0-state/SyncStatus.svelte

@@ -68,7 +68,7 @@
       case 'syncing':
         return {
           icon: 'sync',
-          color: 'var(--color-accent, #b87333)',
+          color: 'var(--color-accent, #888)',
           label: 'Syncing...',
           message: pendingCount > 0 ? `${pendingCount} items pending` : 'Synchronizing changes'
         };

package/dist/s0-state/index.d.ts

@@ -5,5 +5,6 @@ export type { DerivedOptions } from './derived';
 export { createVirtualList, createVirtualGrid, createPreloader, calculateGridLayout, type VirtualListConfig, type VirtualItem, type VirtualList, type PreloaderConfig, type PreloaderState, } from './virtual';
 export { default as SyncStatus } from './SyncStatus.svelte';
 export type { SyncStatusState, SyncStatusAction } from './SyncStatus.svelte';
-export type { ModalData } from './modal-stack-store.svelte';
+export { modalStackStore } from './modal-stack-store.svelte';
+export type { ModalData, VisibleModal } from './modal-stack-store.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/s0-state/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s0-state/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG7E,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s0-state/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG7E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/s0-state/index.js

@@ -5,4 +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' } });
@@ -33,7 +33,7 @@
  * @module s0-state/modal-stack-store
  * @example
  * ```ts
- * import { modalStackStore } from '@kos/design-system/s0-state';
+ * import { modalStackStore } from '@stephen-netu/design-system/s0-state';
  * console.log(modalStackStore.depth);
  * ```
  */

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' } });

package/dist/spatial/ForceSimulation.svelte.js

@@ -41,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 ─────────────────────────────────────────────────────────────

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/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);
+    });
+});

package/dist/spatial/index.js

@@ -15,3 +15,4 @@ export { CameraController } from './CameraController.svelte.js';
 //   import LodRenderer from '@kos/design-system/spatial/LodRenderer.svelte';
 //   import SnapZoomCamera from '@kos/design-system/spatial/SnapZoomCamera.svelte';
 //   import BspTilingCanvas from '@kos/design-system/spatial/BspTilingCanvas.svelte';
+//   import ParticleAssembleMark from '@kos/design-system/spatial/ParticleAssembleMark.svelte';

package/dist/spatial/particle-assemble-math.d.ts

@@ -0,0 +1,22 @@
+export interface Fit {
+    scale: number;
+    dx: number;
+    dy: number;
+}
+/** Fit a viewBoxWidth x viewBoxHeight shape, centered, into canvasWidth x canvasHeight. */
+export declare function fitScale(viewBoxWidth: number, viewBoxHeight: number, canvasWidth: number, canvasHeight: number, padRatio?: number): Fit;
+export declare function easeOutCubic(progress: number): number;
+export declare function lerp(a: number, b: number, t: number): number;
+export interface ParticleFrame {
+    x: number;
+    y: number;
+    alpha: number;
+}
+/** Position + alpha for a particle at a given eased progress (0..1). */
+export declare function particleFrame(particle: {
+    x: number;
+    y: number;
+    tx: number;
+    ty: number;
+}, eased: number): ParticleFrame;
+//# sourceMappingURL=particle-assemble-math.d.ts.map

package/dist/spatial/particle-assemble-math.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"particle-assemble-math.d.ts","sourceRoot":"","sources":["../../src/spatial/particle-assemble-math.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,2FAA2F;AAC3F,wBAAgB,QAAQ,CACtB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,QAAQ,SAAO,GACd,GAAG,CAKL;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGrD;AAED,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAE5D;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wEAAwE;AACxE,wBAAgB,aAAa,CAC3B,QAAQ,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAC1D,KAAK,EAAE,MAAM,GACZ,aAAa,CAMf"}

package/dist/spatial/particle-assemble-math.js

@@ -0,0 +1,26 @@
+// Pure math for ParticleAssembleMark — kept separate from the .svelte
+// RAF/canvas runner so it's unit-testable without a real canvas 2D context
+// (mirrors this dir's split between *-types.ts/simulation logic and the
+// thin canvas-runner .svelte components, e.g. ForceSimulation vs ForceCanvas).
+/** Fit a viewBoxWidth x viewBoxHeight shape, centered, into canvasWidth x canvasHeight. */
+export function fitScale(viewBoxWidth, viewBoxHeight, canvasWidth, canvasHeight, padRatio = 0.92) {
+    const scale = Math.min(canvasWidth / viewBoxWidth, canvasHeight / viewBoxHeight) * padRatio;
+    const dx = (canvasWidth - viewBoxWidth * scale) / 2;
+    const dy = (canvasHeight - viewBoxHeight * scale) / 2;
+    return { scale, dx, dy };
+}
+export function easeOutCubic(progress) {
+    const clamped = Math.min(1, Math.max(0, progress));
+    return 1 - Math.pow(1 - clamped, 3);
+}
+export function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+/** Position + alpha for a particle at a given eased progress (0..1). */
+export function particleFrame(particle, eased) {
+    return {
+        x: lerp(particle.x, particle.tx, eased),
+        y: lerp(particle.y, particle.ty, eased),
+        alpha: 0.3 + eased * 0.7
+    };
+}