@stephen-netu/design-system 0.1.0 → 0.2.1

package/dist/spatial/BspTilingCanvas.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+  // BspTilingCanvas — Amethyst/i3-style tiling with Lifecycle-driven rendering
+  // Canvas draws zone fills behind, DOM divs render content on top
+  //
+  // Lifecycle phases:
+  //   constrain + layout → BspTilingSimulation
+  //   interact → hit-testing via InteractionContext
+  //   render → CanvasRenderContext (zone backgrounds)
+
+  import { onMount } from 'svelte';
+  import { untrack } from 'svelte';
+  import { BspTilingSimulation } from './BspTilingSimulation.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';
+  import type { InteractionContext } from '../s0-lifecycle/InteractionContext.js';
+  import type { TilingCardInput } from './BspTilingSimulation.svelte.js';
+
+  interface Props {
+    cards: TilingCardInput[];
+    containerWidth: number;
+    containerHeight: number;
+    children: import('svelte').Snippet;
+  }
+
+  export type BspTilingCanvasProps = Props;
+
+  let {
+    cards,
+    containerWidth,
+    containerHeight,
+    children,
+  }: Props = $props();
+
+  // ── Simulation (reactive) ────────────────────────────────────────────────
+
+  let sim = $state(new BspTilingSimulation(cards, containerWidth, containerHeight));
+
+  $effect(() => {
+    const c = cards;
+    const w = containerWidth;
+    const h = containerHeight;
+    untrack(() => {
+      sim = new BspTilingSimulation(c, w, h);
+      runLayout();
+      paintCanvas();
+    });
+  });
+
+  // ── Canvas + Lifecycle contexts ───────────────────────────────────────────
+
+  let canvasEl: HTMLCanvasElement | undefined = $state();
+  let canvasCtx: CanvasRenderContext | null = null;
+
+  function makeConstraintContext(): ConstraintContext {
+    return {
+      available: {
+        width: { min: 0, preferred: containerWidth, max: containerWidth },
+        height: { min: 0, preferred: containerHeight, max: containerHeight },
+      },
+      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; },
+    };
+  }
+
+  function makeLayoutContext(): LayoutContext {
+    return {
+      bounds: { x: 0, y: 0, width: containerWidth, height: containerHeight },
+      requestRepaint() { paintCanvas(); },
+      requestRepaintAt() { paintCanvas(); },
+      childBounds(): undefined { return undefined; },
+      viewportSize: { width: containerWidth, height: containerHeight },
+    };
+  }
+
+  function runLayout(): void {
+    const cc = makeConstraintContext();
+    const lc = makeLayoutContext();
+    sim.constrain(cc);
+    sim.layout(lc);
+  }
+
+  function makeInteractionContext(e: PointerEvent, target: HTMLElement): InteractionContext {
+    const rect = target.getBoundingClientRect();
+    const pos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    let wasConsumed = false;
+    return {
+      event: {
+        type: e.type,
+        nativeEvent: e,
+        consumed: wasConsumed,
+        position: pos,
+        modifiers: {
+          shift: e.shiftKey,
+          ctrl: e.ctrlKey,
+          alt: e.altKey,
+          meta: e.metaKey,
+        },
+      },
+      consume() { wasConsumed = true; },
+      requestFocus() {},
+      releaseFocus() {},
+      requestSoftKeyboard() {},
+    };
+  }
+
+  function paintCanvas(): void {
+    if (!canvasCtx) return;
+    sim.render(canvasCtx);
+    canvasCtx.flush();
+  }
+
+  // ── Event handlers ────────────────────────────────────────────────────────
+
+  function handlePointerDown(e: PointerEvent): void {
+    const target = e.currentTarget as HTMLElement;
+    const ctx = makeInteractionContext(e, target);
+    sim.interact(ctx);
+  }
+
+  onMount(() => {
+    if (!canvasEl) return;
+    const dpr = window.devicePixelRatio ?? 1;
+    canvasEl.width = containerWidth * dpr;
+    canvasEl.height = containerHeight * dpr;
+    canvasEl.style.width = `${containerWidth}px`;
+    canvasEl.style.height = `${containerHeight}px`;
+    const ctx2d = canvasEl.getContext('2d');
+    if (ctx2d) {
+      ctx2d.scale(dpr, dpr);
+    }
+    canvasCtx = new CanvasRenderContext(canvasEl);
+    runLayout();
+    paintCanvas();
+  });
+</script>
+
+<div class="bsp-tiling-canvas" style:width="{containerWidth}px" style:height="{containerHeight}px">
+  <canvas
+    bind:this={canvasEl}
+    class="tiling-canvas-bg"
+    style:pointer-events="none"
+    aria-hidden="true"
+  ></canvas>
+
+  {#each sim.positions as zone (zone.cardId)}
+    <div
+      class="tiling-slot"
+      style:left="{zone.x}px"
+      style:top="{zone.y}px"
+      style:width="{zone.width}px"
+      style:height="{zone.height}px"
+    >
+      {@render children()}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .bsp-tiling-canvas {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tiling-canvas-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+  }
+
+  .tiling-slot {
+    position: absolute;
+    overflow: auto;
+    background: transparent;
+    pointer-events: auto;
+    z-index: 1;
+    box-shadow: inset 0 0 0 1px var(--color-border, #333);
+  }
+
+  .tiling-slot::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  .tiling-slot::-webkit-scrollbar-thumb {
+    background: var(--color-text-muted, #706858);
+    border-radius: 2px;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { TilingCardInput } from './BspTilingSimulation.svelte.js';
+interface Props {
+    cards: TilingCardInput[];
+    containerWidth: number;
+    containerHeight: number;
+    children: import('svelte').Snippet;
+}
+export type BspTilingCanvasProps = Props;
+declare const BspTilingCanvas: import("svelte").Component<Props, {}, "">;
+type BspTilingCanvas = ReturnType<typeof BspTilingCanvas>;
+export default BspTilingCanvas;
+//# sourceMappingURL=BspTilingCanvas.svelte.d.ts.map

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

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

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

@@ -0,0 +1,43 @@
+import type { Lifecycle } from '../s0-lifecycle/Lifecycle.js';
+import type { ConstraintContext, SizeConstraints } from '../s0-lifecycle/ConstraintContext.js';
+import type { LayoutContext } from '../s0-lifecycle/LayoutContext.js';
+import type { InteractionContext, EventOutcome } from '../s0-lifecycle/InteractionContext.js';
+import type { RenderContext } from '../s0-lifecycle/RenderContext.js';
+export interface TilingCardInput {
+    id: string;
+    minWidth?: number;
+    minHeight?: number;
+}
+export interface ZonePosition {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    cardId: string;
+}
+export interface ZoneDivider {
+    orientation: 'vertical' | 'horizontal';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare class BspTilingSimulation implements Lifecycle {
+    positions: ZonePosition[];
+    dividers: ZoneDivider[];
+    private cards;
+    private containerWidth;
+    private containerHeight;
+    private minZoneSize;
+    constructor(cards: TilingCardInput[], containerWidth: number, containerHeight: number, minZoneSize?: number);
+    constrain(_ctx: ConstraintContext): SizeConstraints;
+    layout(ctx: LayoutContext): void;
+    interact(ctx: InteractionContext): EventOutcome;
+    render(ctx: RenderContext): void;
+    private computeDividers;
+    private buildBspTree;
+    private buildNode;
+    private flattenBsp;
+}
+//# sourceMappingURL=BspTilingSimulation.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BspTilingSimulation.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/BspTilingSimulation.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAC9F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEtE,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAkBD,qBAAa,mBAAoB,YAAW,SAAS;IAEnD,SAAS,EAAE,YAAY,EAAE,CAAc;IACvC,QAAQ,EAAE,WAAW,EAAE,CAAc;IAErC,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,WAAW,CAAS;gBAG1B,KAAK,EAAE,eAAe,EAAE,EACxB,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,MAAM,EACvB,WAAW,CAAC,EAAE,MAAM;IAQtB,SAAS,CAAC,IAAI,EAAE,iBAAiB,GAAG,eAAe;IAwBnD,MAAM,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IA0BhC,QAAQ,CAAC,GAAG,EAAE,kBAAkB,GAAG,YAAY;IAiB/C,MAAM,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAqBhC,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;IAiEjB,OAAO,CAAC,UAAU;CASnB"}

package/dist/spatial/BspTilingSimulation.svelte.js

@@ -0,0 +1,183 @@
+// BspTilingSimulation — BSP zone tiling layout Lifecycle class
+// Extracts the layout algorithm from BspTilingCanvas.svelte into a
+// reusable $state-reactive Lifecycle implementation.
+const DEFAULT_MIN_ZONE_SIZE = 120;
+const DIVIDER_THICKNESS = 6;
+export class BspTilingSimulation {
+    // Reactive state — consumers can read this
+    positions = $state([]);
+    dividers = $state([]);
+    cards;
+    containerWidth;
+    containerHeight;
+    minZoneSize;
+    constructor(cards, containerWidth, containerHeight, minZoneSize) {
+        this.cards = cards;
+        this.containerWidth = containerWidth;
+        this.containerHeight = containerHeight;
+        this.minZoneSize = minZoneSize ?? DEFAULT_MIN_ZONE_SIZE;
+    }
+    constrain(_ctx) {
+        const totalMinWidth = this.cards.reduce((sum, c) => sum + (c.minWidth ?? this.minZoneSize), 0);
+        const maxCardMinHeight = this.cards.reduce((max, c) => Math.max(max, c.minHeight ?? this.minZoneSize), 0);
+        return {
+            width: {
+                min: Math.max(this.containerWidth, totalMinWidth),
+                preferred: this.containerWidth,
+                max: Infinity,
+            },
+            height: {
+                min: Math.max(this.containerHeight, maxCardMinHeight),
+                preferred: this.containerHeight,
+                max: Infinity,
+            },
+        };
+    }
+    layout(ctx) {
+        const bounds = ctx.bounds;
+        const root = this.buildBspTree(this.cards, bounds.x, bounds.y, bounds.width, bounds.height);
+        if (root) {
+            const flat = this.flattenBsp(root);
+            this.positions = flat.map((node) => ({
+                id: node.id,
+                x: node.x,
+                y: node.y,
+                width: node.width,
+                height: node.height,
+                cardId: node.cardId,
+            }));
+        }
+        else {
+            this.positions = [];
+        }
+        this.dividers = this.computeDividers(this.positions);
+    }
+    interact(ctx) {
+        const pos = ctx.event.position;
+        if (!pos)
+            return 'propagated';
+        for (const zone of this.positions) {
+            if (pos.x >= zone.x &&
+                pos.x <= zone.x + zone.width &&
+                pos.y >= zone.y &&
+                pos.y <= zone.y + zone.height) {
+                return 'consumed';
+            }
+        }
+        return 'propagated';
+    }
+    render(ctx) {
+        const zoneFillColor = 'var(--color-surface-alpha, rgba(42, 38, 32, 0.6))';
+        const dividerColor = 'var(--color-border, #333333)';
+        // Draw zone fills
+        for (const zone of this.positions) {
+            ctx.drawRect({ x: zone.x, y: zone.y, width: zone.width, height: zone.height }, zoneFillColor);
+        }
+        // Draw divider lines between adjacent zones
+        for (const d of this.dividers) {
+            ctx.drawRect({ x: d.x, y: d.y, width: d.width, height: d.height }, dividerColor);
+        }
+    }
+    computeDividers(positions) {
+        const dividers = [];
+        for (let i = 0; i < positions.length - 1; i++) {
+            const a = positions[i];
+            const b = positions[i + 1];
+            // Check vertical adjacency (a is left of b)
+            if (Math.abs(a.x + a.width - b.x) < 3) {
+                const yStart = Math.min(a.y, b.y);
+                const yEnd = Math.max(a.y + a.height, b.y + b.height);
+                dividers.push({
+                    orientation: 'vertical',
+                    x: a.x + a.width,
+                    y: yStart,
+                    width: DIVIDER_THICKNESS,
+                    height: yEnd - yStart,
+                });
+            }
+            // Check horizontal adjacency (a is above b)
+            if (Math.abs(a.y + a.height - b.y) < 3) {
+                const xStart = Math.min(a.x, b.x);
+                const xEnd = Math.max(a.x + a.width, b.x + b.width);
+                dividers.push({
+                    orientation: 'horizontal',
+                    x: xStart,
+                    y: a.y + a.height,
+                    width: xEnd - xStart,
+                    height: DIVIDER_THICKNESS,
+                });
+            }
+        }
+        return dividers;
+    }
+    // ── BSP tree construction ──────────────────────────────────────────────────
+    buildBspTree(cards, x, y, w, h) {
+        if (cards.length === 0)
+            return undefined;
+        // Sort by content area descending (use minWidth*minHeight as proxy)
+        const sorted = [...cards].sort((a, b) => {
+            const areaA = (a.minWidth ?? this.minZoneSize) * (a.minHeight ?? this.minZoneSize);
+            const areaB = (b.minWidth ?? this.minZoneSize) * (b.minHeight ?? this.minZoneSize);
+            return areaB - areaA;
+        });
+        return this.buildNode(sorted, x, y, w, h);
+    }
+    buildNode(cardList, x, y, w, h) {
+        if (cardList.length === 0)
+            return undefined;
+        const [first, ...rest] = cardList;
+        if (rest.length === 0) {
+            return {
+                id: `leaf-${first.id}`,
+                cardId: first.id,
+                x, y,
+                width: w,
+                height: h,
+            };
+        }
+        const split = w > h ? 'vertical' : 'horizontal';
+        const dividerThickness = DIVIDER_THICKNESS;
+        // Calculate ratio based on first card's preferred size
+        let ratio;
+        if (split === 'vertical') {
+            const idealW = Math.min((first.minWidth ?? this.minZoneSize) + 24, w * 0.6);
+            ratio = idealW / (w - dividerThickness);
+        }
+        else {
+            const idealH = Math.min((first.minHeight ?? this.minZoneSize) + 24, h * 0.6);
+            ratio = idealH / (h - dividerThickness);
+        }
+        // Clamp ratio 0.2–0.8
+        ratio = Math.max(0.2, Math.min(0.8, ratio));
+        let firstRect;
+        let secondRect;
+        if (split === 'vertical') {
+            const splitX = x + (w - dividerThickness) * ratio;
+            firstRect = { x, y, w: splitX - x, h };
+            secondRect = { x: splitX + dividerThickness, y, w: x + w - splitX - dividerThickness, h };
+        }
+        else {
+            const splitY = y + (h - dividerThickness) * ratio;
+            firstRect = { x, y, w, h: splitY - y };
+            secondRect = { x, y: splitY + dividerThickness, w, h: y + h - splitY - dividerThickness };
+        }
+        return {
+            id: `split-${first.id}`,
+            x, y, width: w, height: h,
+            split, ratio,
+            first: this.buildNode([first], firstRect.x, firstRect.y, firstRect.w, firstRect.h),
+            second: this.buildNode(rest, secondRect.x, secondRect.y, secondRect.w, secondRect.h),
+        };
+    }
+    flattenBsp(node) {
+        if (node.cardId) {
+            return [node];
+        }
+        const results = [];
+        if (node.first)
+            results.push(...this.flattenBsp(node.first));
+        if (node.second)
+            results.push(...this.flattenBsp(node.second));
+        return results;
+    }
+}

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

@@ -0,0 +1,39 @@
+import type { Lifecycle } from '../s0-lifecycle/Lifecycle.js';
+import type { ConstraintContext, SizeConstraints } from '../s0-lifecycle/ConstraintContext.js';
+import type { LayoutContext } from '../s0-lifecycle/LayoutContext.js';
+import type { InteractionContext, EventOutcome } from '../s0-lifecycle/InteractionContext.js';
+import type { RenderContext } from '../s0-lifecycle/RenderContext.js';
+import type { CameraState, SnapZoomTarget, CameraConfig } from './camera-types.js';
+export declare class CameraController implements Lifecycle {
+    zoom: number;
+    panX: number;
+    panY: number;
+    private config;
+    private width;
+    private height;
+    private viewportW;
+    private viewportH;
+    private isPanning;
+    private panStartX;
+    private panStartY;
+    private panStartPanX;
+    private panStartPanY;
+    private activeAnim;
+    private animFrameId;
+    private frameTick;
+    constructor(width: number, height: number, config?: CameraConfig);
+    getCameraState(): CameraState;
+    constrain(_ctx: ConstraintContext): SizeConstraints;
+    layout(ctx: LayoutContext): void;
+    interact(ctx: InteractionContext): EventOutcome;
+    render(ctx: RenderContext): void;
+    private handleWheel;
+    private handlePointerDown;
+    private handlePointerMove;
+    snapTo(target: SnapZoomTarget): void;
+    resetCamera(): void;
+    stop(): void;
+    private scheduleAnimate;
+    private tickAnimate;
+}
+//# sourceMappingURL=CameraController.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CameraController.svelte.d.ts","sourceRoot":"","sources":["../../src/spatial/CameraController.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAC9F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAcnF,qBAAa,gBAAiB,YAAW,SAAS;IAChD,IAAI,EAAE,MAAM,CAAe;IAC3B,IAAI,EAAE,MAAM,CAAa;IACzB,IAAI,EAAE,MAAM,CAAa;IAEzB,OAAO,CAAC,MAAM,CAAyB;IACvC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,UAAU,CAAgC;IAClD,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,SAAS,CAAa;gBAElB,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,YAAY;IAWhE,cAAc,IAAI,WAAW;IAI7B,SAAS,CAAC,IAAI,EAAE,iBAAiB,GAAG,eAAe;IAenD,MAAM,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAKhC,QAAQ,CAAC,GAAG,EAAE,kBAAkB,GAAG,YAAY;IAwB/C,MAAM,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAQhC,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,iBAAiB;IAUzB,MAAM,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAuBpC,WAAW,IAAI,IAAI;IAInB,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,WAAW;CAuBpB"}

package/dist/spatial/CameraController.svelte.js

@@ -0,0 +1,174 @@
+// CameraController — viewport camera Lifecycle class
+// Implements s0-lifecycle for camera transforms with snap-zoom, pan, and wheel zoom
+// S-02: Uses rAF tick easing, NOT performance.now()
+import { DEFAULT_CAMERA_CONFIG } from './camera-types.js';
+export class CameraController {
+    zoom = $state(1.0);
+    panX = $state(0);
+    panY = $state(0);
+    config;
+    width;
+    height;
+    viewportW = 0;
+    viewportH = 0;
+    isPanning = false;
+    panStartX = 0;
+    panStartY = 0;
+    panStartPanX = 0;
+    panStartPanY = 0;
+    activeAnim = null;
+    animFrameId = null;
+    frameTick = 0;
+    constructor(width, height, config) {
+        this.width = width;
+        this.height = height;
+        this.config = {
+            minZoom: config?.minZoom ?? DEFAULT_CAMERA_CONFIG.minZoom,
+            maxZoom: config?.maxZoom ?? DEFAULT_CAMERA_CONFIG.maxZoom,
+            zoomSpeed: config?.zoomSpeed ?? DEFAULT_CAMERA_CONFIG.zoomSpeed,
+            snapDuration: config?.snapDuration ?? DEFAULT_CAMERA_CONFIG.snapDuration,
+        };
+    }
+    getCameraState() {
+        return { zoom: this.zoom, panX: this.panX, panY: this.panY };
+    }
+    constrain(_ctx) {
+        return {
+            width: {
+                min: this.width,
+                preferred: this.width,
+                max: this.width,
+            },
+            height: {
+                min: this.height,
+                preferred: this.height,
+                max: this.height,
+            },
+        };
+    }
+    layout(ctx) {
+        this.viewportW = ctx.viewportSize.width;
+        this.viewportH = ctx.viewportSize.height;
+    }
+    interact(ctx) {
+        const evt = ctx.event;
+        const type = evt.type;
+        if (type === 'wheel') {
+            return this.handleWheel(evt);
+        }
+        if (type === 'pointerdown') {
+            return this.handlePointerDown(evt);
+        }
+        if (type === 'pointermove') {
+            return this.handlePointerMove(evt);
+        }
+        if (type === 'pointerup' || type === 'pointercancel') {
+            this.isPanning = false;
+            return 'propagated';
+        }
+        return 'propagated';
+    }
+    render(ctx) {
+        if (typeof ctx.pushTransform === 'function') {
+            ctx.pushTransform([this.zoom, 0, 0, this.zoom, this.panX, this.panY]);
+        }
+    }
+    // ── Wheel zoom ────────────────────────────────────────────────────────────
+    handleWheel(evt) {
+        const native = evt.nativeEvent;
+        native.preventDefault();
+        const pos = evt.position;
+        if (!pos)
+            return 'propagated';
+        const mx = pos.x;
+        const my = pos.y;
+        const cx = (mx - this.panX) / this.zoom;
+        const cy = (my - this.panY) / this.zoom;
+        const delta = -native.deltaY * this.config.zoomSpeed;
+        const newZoom = Math.max(this.config.minZoom, Math.min(this.config.maxZoom, this.zoom * (1 + delta)));
+        this.panX = mx - cx * newZoom;
+        this.panY = my - cy * newZoom;
+        this.zoom = newZoom;
+        return 'consumed';
+    }
+    // ── Pan ───────────────────────────────────────────────────────────────────
+    handlePointerDown(evt) {
+        const native = evt.nativeEvent;
+        if (native.button === 1 || (native.button === 0 && native.shiftKey)) {
+            native.preventDefault();
+            this.isPanning = true;
+            this.panStartX = native.clientX;
+            this.panStartY = native.clientY;
+            this.panStartPanX = this.panX;
+            this.panStartPanY = this.panY;
+            return 'consumed';
+        }
+        return 'propagated';
+    }
+    handlePointerMove(evt) {
+        if (!this.isPanning)
+            return 'propagated';
+        const native = evt.nativeEvent;
+        this.panX = this.panStartPanX + (native.clientX - this.panStartX);
+        this.panY = this.panStartPanY + (native.clientY - this.panStartY);
+        return 'consumed';
+    }
+    // ── Snap-zoom API ─────────────────────────────────────────────────────────
+    snapTo(target) {
+        if (this.animFrameId !== null) {
+            cancelAnimationFrame(this.animFrameId);
+        }
+        const duration = target.duration ?? this.config.snapDuration;
+        const targetPanX = this.viewportW / 2 - target.x * target.zoom;
+        const targetPanY = this.viewportH / 2 - target.y * target.zoom;
+        this.activeAnim = {
+            startZoom: this.zoom,
+            startPanX: this.panX,
+            startPanY: this.panY,
+            targetZoom: target.zoom,
+            targetPanX,
+            targetPanY,
+            startTick: this.frameTick,
+            duration,
+        };
+        this.scheduleAnimate();
+    }
+    resetCamera() {
+        this.snapTo({ x: 0, y: 0, zoom: 1.0 });
+    }
+    stop() {
+        if (this.animFrameId !== null) {
+            cancelAnimationFrame(this.animFrameId);
+            this.animFrameId = null;
+        }
+        this.activeAnim = null;
+    }
+    // ── Animation (S-02: rAF tick, NOT performance.now) ──────────────────────
+    scheduleAnimate() {
+        this.animFrameId = requestAnimationFrame(() => {
+            this.frameTick++;
+            this.tickAnimate();
+        });
+    }
+    tickAnimate() {
+        if (!this.activeAnim) {
+            this.animFrameId = null;
+            return;
+        }
+        const anim = this.activeAnim;
+        // Assume 60fps → ~16.67ms per frame, compute elapsed from tick delta
+        const elapsed = (this.frameTick - anim.startTick) * 16.667;
+        const t = Math.min(1, elapsed / anim.duration);
+        const eased = 1 - Math.pow(1 - t, 3);
+        this.zoom = anim.startZoom + (anim.targetZoom - anim.startZoom) * eased;
+        this.panX = anim.startPanX + (anim.targetPanX - anim.startPanX) * eased;
+        this.panY = anim.startPanY + (anim.targetPanY - anim.startPanY) * eased;
+        if (t < 1) {
+            this.scheduleAnimate();
+        }
+        else {
+            this.animFrameId = null;
+            this.activeAnim = null;
+        }
+    }
+}