@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/scene/SceneViewport.tsx

@@ -0,0 +1,102 @@
+/**
+ * SceneViewport — the scrollable, zoomable SVG canvas.
+ *
+ * Owns the wheel/middle-button pan/zoom event handlers and applies the
+ * current `SceneTransform` to a single root `<g>` element. Children
+ * render at their natural viewport coordinates; the group transform
+ * carries the pan/zoom.
+ *
+ * Dot-grid background lives behind the layer group as an SVG `<pattern>`
+ * so it scales/translates with the canvas exactly the way a "real"
+ * canvas grid would.
+ */
+
+import { forwardRef, type ReactNode, type WheelEvent } from 'react';
+import type { SceneTransform } from './hooks/useScenePanZoom';
+
+interface SceneViewportProps {
+  width: number;
+  height: number;
+  transform: SceneTransform;
+  /** Called with a wheel event for the viewport. */
+  onWheel?: (e: WheelEvent<SVGSVGElement>) => void;
+  /** Called for any pointer event over the viewport. */
+  onPointerDown?: (e: React.PointerEvent<SVGSVGElement>) => void;
+  onPointerMove?: (e: React.PointerEvent<SVGSVGElement>) => void;
+  onPointerUp?: (e: React.PointerEvent<SVGSVGElement>) => void;
+  onDoubleClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
+  /** HTML5 drag-and-drop handlers — used for palette drag-to-place. */
+  onDragOver?: (e: React.DragEvent<SVGSVGElement>) => void;
+  onDrop?: (e: React.DragEvent<SVGSVGElement>) => void;
+  /** Optional CSS cursor (set by the active tool). */
+  cursor?: string;
+  /** Layers + overlay are children of the transformed group. */
+  children: ReactNode;
+}
+
+export const SceneViewport = forwardRef<SVGSVGElement, SceneViewportProps>(function SceneViewport(
+  {
+    width,
+    height,
+    transform,
+    onWheel,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onDoubleClick,
+    onDragOver,
+    onDrop,
+    cursor,
+    children,
+  },
+  ref,
+) {
+  const t = transform;
+  const groupTransform = `translate(${t.tx} ${t.ty}) scale(${t.scale})`;
+
+  return (
+    <svg
+      ref={ref}
+      className="squisq-scene-viewport"
+      width={width}
+      height={height}
+      // `data-cursor` drives a CSS rule that picks a custom URL-based
+      // cursor (see scene.css). The OS-stock `default` / `crosshair`
+      // keywords render as thin or invisible shapes on Windows when
+      // users have configured large/white cursor schemes; the URL
+      // cursors stay high-contrast on any background.
+      data-cursor={cursor ?? 'default'}
+      onWheel={onWheel}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onDoubleClick={onDoubleClick}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      role="application"
+      // Focusable so the SVG can receive keyboard events directly. The
+      // Scene focuses it on pointer-down so Delete/Escape/tool-shortcut
+      // keys reach our handlers even when mounted inside a contentEditable
+      // ProseMirror surface.
+      tabIndex={-1}
+      // Disable native browser gestures we don't want (pinch-zoom on the
+      // SVG, pan momentum) — pointer events handle these explicitly.
+      // CSS sets `touch-action: none` on the viewport class.
+    >
+      <defs>
+        <pattern
+          id="squisq-scene-dot-grid"
+          x={t.tx}
+          y={t.ty}
+          width={24 * t.scale}
+          height={24 * t.scale}
+          patternUnits="userSpaceOnUse"
+        >
+          <circle cx={1} cy={1} r={1} className="squisq-scene-dot" />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill="url(#squisq-scene-dot-grid)" />
+      <g transform={groupTransform}>{children}</g>
+    </svg>
+  );
+});

package/src/scene/ShapePalette.tsx

@@ -0,0 +1,181 @@
+/**
+ * ShapePalette — a categorized, searchable gallery of drawing shapes.
+ *
+ * Mirrors `EmojiPicker`'s structure (search + category sections + grid of
+ * thumbnails). Picking a shape calls `onPick(kind)`; the host then sets the
+ * draw tool's pending kind and activates it. Thumbnails render via the same
+ * `shapePath` geometry the canvas uses, so the gallery previews exactly what
+ * gets drawn.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { shapePath } from '@bendyline/squisq/doc';
+
+interface ShapePaletteProps {
+  onPick: (kind: string) => void;
+  onClose: () => void;
+  /**
+   * CSS selector for an ancestor that should NOT count as an "outside"
+   * click — typically the toolbar button that owns opening/closing the
+   * palette. Defaults to the scene block toolbar.
+   */
+  ignoreOutsideSelector?: string;
+}
+
+interface ShapeItem {
+  kind: string;
+  label: string;
+}
+
+const CATALOG: { category: string; items: ShapeItem[] }[] = [
+  {
+    category: 'Lines',
+    items: [
+      { kind: 'line', label: 'Line' },
+      { kind: 'arrow', label: 'Line Arrow' },
+      { kind: 'text', label: 'Text' },
+    ],
+  },
+  {
+    category: 'Basic Shapes',
+    items: [
+      { kind: 'rectangle', label: 'Rectangle' },
+      { kind: 'circle', label: 'Ellipse' },
+      { kind: 'triangle', label: 'Triangle' },
+      { kind: 'right-triangle', label: 'Right Triangle' },
+      { kind: 'diamond', label: 'Diamond' },
+      { kind: 'pentagon', label: 'Pentagon' },
+      { kind: 'hexagon', label: 'Hexagon' },
+      { kind: 'octagon', label: 'Octagon' },
+      { kind: 'parallelogram', label: 'Parallelogram' },
+      { kind: 'trapezoid', label: 'Trapezoid' },
+      { kind: 'plus', label: 'Cross' },
+      { kind: 'chevron', label: 'Chevron' },
+      { kind: 'cylinder', label: 'Cylinder' },
+      { kind: 'callout', label: 'Speech Bubble' },
+      { kind: 'cloud', label: 'Cloud' },
+      { kind: 'heart', label: 'Heart' },
+      { kind: 'lightning', label: 'Lightning' },
+    ],
+  },
+  {
+    category: 'Stars',
+    items: [
+      { kind: 'star', label: '5-Point Star' },
+      { kind: 'star4', label: '4-Point Star' },
+      { kind: 'star6', label: '6-Point Star' },
+    ],
+  },
+  {
+    category: 'Block Arrows',
+    items: [
+      { kind: 'arrow-right', label: 'Arrow Right' },
+      { kind: 'arrow-left', label: 'Arrow Left' },
+      { kind: 'arrow-up', label: 'Arrow Up' },
+      { kind: 'arrow-down', label: 'Arrow Down' },
+      { kind: 'double-arrow', label: 'Double Arrow' },
+    ],
+  },
+];
+
+export function ShapePalette({
+  onPick,
+  onClose,
+  ignoreOutsideSelector = '.squisq-scene-block-toolbar',
+}: ShapePaletteProps) {
+  const [query, setQuery] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onDocPointer = (e: PointerEvent) => {
+      // Don't treat a click on the toolbar (where the Shape trigger lives)
+      // as "outside" — that button owns opening/closing the palette.
+      const target = e.target as Element | null;
+      if (ignoreOutsideSelector && target?.closest?.(ignoreOutsideSelector)) return;
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('pointerdown', onDocPointer);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onDocPointer);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [onClose, ignoreOutsideSelector]);
+
+  const sections = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return CATALOG;
+    return CATALOG.map((s) => ({
+      category: s.category,
+      items: s.items.filter((i) => i.label.toLowerCase().includes(q) || i.kind.includes(q)),
+    })).filter((s) => s.items.length > 0);
+  }, [query]);
+
+  return (
+    <div className="squisq-shape-palette" ref={ref} role="dialog" aria-label="Shapes">
+      <input
+        className="squisq-shape-palette-search"
+        type="text"
+        placeholder="Search shapes…"
+        value={query}
+        autoFocus
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <div className="squisq-shape-palette-scroll">
+        {sections.map((section) => (
+          <div key={section.category} className="squisq-shape-palette-section">
+            <div className="squisq-shape-palette-heading">{section.category}</div>
+            <div className="squisq-shape-palette-grid">
+              {section.items.map((item) => (
+                <button
+                  key={item.kind}
+                  type="button"
+                  className="squisq-shape-palette-item"
+                  title={item.label}
+                  aria-label={item.label}
+                  onClick={() => onPick(item.kind)}
+                >
+                  <ShapeThumb kind={item.kind} />
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** A 40×30 SVG thumbnail of a shape, inside a 48×38 button viewport. */
+function ShapeThumb({ kind }: { kind: string }) {
+  const d = shapePath(kind, 4, 4, 40, 30);
+  return (
+    <svg viewBox="0 0 48 38" width={36} height={28} aria-hidden="true">
+      {d ? (
+        <path d={d} className="squisq-shape-thumb" />
+      ) : kind === 'circle' ? (
+        <ellipse cx={24} cy={19} rx={20} ry={15} className="squisq-shape-thumb" />
+      ) : kind === 'line' ? (
+        <line x1={4} y1={34} x2={44} y2={4} className="squisq-shape-thumb-line" />
+      ) : kind === 'arrow' ? (
+        <line
+          x1={4}
+          y1={34}
+          x2={44}
+          y2={4}
+          className="squisq-shape-thumb-line"
+          markerEnd="url(#squisq-edge-arrow-end)"
+        />
+      ) : kind === 'text' ? (
+        <text x={24} y={26} textAnchor="middle" className="squisq-shape-thumb-text">
+          T
+        </text>
+      ) : (
+        <rect x={4} y={6} width={40} height={26} rx={3} className="squisq-shape-thumb" />
+      )}
+    </svg>
+  );
+}

package/src/scene/__tests__/DiagramAdapter.test.ts

@@ -0,0 +1,56 @@
+/**
+ * DiagramAdapter — pure read-side transform. Verifies that given a
+ * (nodes, edges) shape from the existing data hook, the adapter
+ * produces card+label Layer pairs and matching SceneEdges.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { buildDiagramScene } from '../adapters/DiagramAdapter';
+import { NODE_WIDTH, NODE_HEIGHT } from '../layers/nodeCard';
+
+describe('buildDiagramScene', () => {
+  it('emits a card + label pair per node and preserves edges', () => {
+    const out = buildDiagramScene(
+      [
+        { id: 'a', position: { x: 100, y: 100 }, data: { label: 'Bar' } },
+        { id: 'b', position: { x: 400, y: 100 }, data: { label: 'Baz' } },
+      ],
+      [{ id: 'a->b', source: 'a', target: 'b', label: 'uses' }],
+    );
+
+    // Two cards + two labels, in that order.
+    expect(out.layers.map((l) => l.id)).toEqual([
+      'node-card-a',
+      'node-card-b',
+      'node-label-a',
+      'node-label-b',
+    ]);
+
+    const card = out.layers[0];
+    expect(card.type).toBe('shape');
+    expect(card.position.x).toBe(100);
+    expect(card.position.width).toBe(NODE_WIDTH);
+    expect(card.position.height).toBe(NODE_HEIGHT);
+
+    const label = out.layers[2];
+    expect(label.type).toBe('text');
+    // Label is centered over its card.
+    expect(label.position.x).toBe(100 + NODE_WIDTH / 2);
+    expect(label.position.y).toBe(100 + NODE_HEIGHT / 2);
+    if (label.type === 'text') expect(label.content.text).toBe('Bar');
+
+    expect(out.edges).toEqual([{ id: 'a->b', source: 'a', target: 'b', label: 'uses' }]);
+    expect(out.nodes).toEqual([
+      { id: 'a', label: 'Bar', x: 100, y: 100 },
+      { id: 'b', label: 'Baz', x: 400, y: 100 },
+    ]);
+  });
+
+  it('omits edge label when none provided', () => {
+    const out = buildDiagramScene(
+      [{ id: 'a', position: { x: 0, y: 0 }, data: { label: 'A' } }],
+      [{ id: 'a->b', source: 'a', target: 'b' }],
+    );
+    expect(out.edges[0]).toEqual({ id: 'a->b', source: 'a', target: 'b' });
+  });
+});

package/src/scene/__tests__/bezierEdit.test.ts

@@ -0,0 +1,85 @@
+/**
+ * bezierEdit — parse/serialize round-trip and editing operations.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { parsePath, serializePath, moveAnchor, moveHandle } from '../paths/bezierEdit';
+
+describe('parsePath / serializePath', () => {
+  it('parses an M then L sequence', () => {
+    const p = parsePath('M 10 20 L 30 40');
+    expect(p.points).toEqual([
+      { kind: 'move', x: 10, y: 20 },
+      { kind: 'line', x: 30, y: 40 },
+    ]);
+    expect(p.closed).toBe(false);
+  });
+
+  it('treats implicit pairs after M as L commands', () => {
+    const p = parsePath('M 0 0 10 10 20 20');
+    expect(p.points.map((q) => q.kind)).toEqual(['move', 'line', 'line']);
+    expect(p.points[2]).toMatchObject({ x: 20, y: 20 });
+  });
+
+  it('parses a cubic curve and attaches handles to the surrounding anchors', () => {
+    const p = parsePath('M 0 0 C 10 0 90 100 100 100');
+    expect(p.points).toHaveLength(2);
+    const m = p.points[0];
+    const c = p.points[1];
+    expect(m.cpOut).toEqual({ x: 10, y: 0 });
+    expect(c.cpIn).toEqual({ x: 90, y: 100 });
+    expect(c).toMatchObject({ kind: 'curve', x: 100, y: 100 });
+  });
+
+  it('captures Z as closed', () => {
+    const p = parsePath('M 0 0 L 10 0 L 10 10 Z');
+    expect(p.closed).toBe(true);
+  });
+
+  it('round-trips M/L/C/Z paths via serialize ∘ parse', () => {
+    const d = 'M 0 0 C 20 0 80 100 100 100 L 100 200 Z';
+    const round = serializePath(parsePath(d));
+    expect(round).toBe(d);
+  });
+
+  it('skips unknown commands without throwing', () => {
+    const p = parsePath('M 0 0 A 50 50 0 1 0 100 0 L 100 100');
+    // The A is dropped (unsupported), but the subsequent L survives — though
+    // its anchor sits where the parser was when A's args were skipped.
+    // Verify we got the M and at least one L without crashing.
+    expect(p.points[0]).toMatchObject({ kind: 'move' });
+    expect(p.points.some((q) => q.kind === 'line')).toBe(true);
+  });
+});
+
+describe('moveAnchor', () => {
+  it('shifts the anchor and its handles by the same delta', () => {
+    const path = parsePath('M 0 0 C 10 0 90 100 100 100');
+    const moved = moveAnchor(path, 1, 5, 5);
+    const c = moved.points[1];
+    expect(c).toMatchObject({ x: 105, y: 105 });
+    // Incoming handle moves with the anchor.
+    expect(c.cpIn).toEqual({ x: 95, y: 105 });
+  });
+
+  it('does not mutate the input', () => {
+    const path = parsePath('M 0 0 L 10 10');
+    const before = JSON.stringify(path);
+    moveAnchor(path, 1, 100, 100);
+    expect(JSON.stringify(path)).toBe(before);
+  });
+
+  it('is a no-op for an out-of-range index', () => {
+    const path = parsePath('M 0 0 L 10 10');
+    const result = moveAnchor(path, 99, 5, 5);
+    expect(result).toEqual(path);
+  });
+});
+
+describe('moveHandle', () => {
+  it('replaces a single control-point handle', () => {
+    const path = parsePath('M 0 0 C 10 0 90 100 100 100');
+    const out = moveHandle(path, 1, 'cpIn', 200, 200);
+    expect(out.points[1].cpIn).toEqual({ x: 200, y: 200 });
+  });
+});

package/src/scene/__tests__/blockLayers.test.ts

@@ -0,0 +1,57 @@
+/**
+ * blockLayers — base64-JSON encode/decode round-trip for Layer arrays.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { encodeLayers, decodeLayers } from '../adapters/blockLayers';
+import type { Layer, ShapeLayer, TextLayer } from '@bendyline/squisq/schemas';
+
+describe('encodeLayers / decodeLayers', () => {
+  it('round-trips a single ShapeLayer', () => {
+    const layer: ShapeLayer = {
+      id: 'rect-1',
+      type: 'shape',
+      position: { x: 100, y: 200, width: 50, height: 30 },
+      content: { shape: 'rect', fill: '#abc', stroke: '#000', strokeWidth: 2 },
+    };
+    expect(decodeLayers(encodeLayers([layer]))).toEqual([layer]);
+  });
+
+  it('round-trips a mixed-type array preserving order', () => {
+    const layers: Layer[] = [
+      {
+        id: 'a',
+        type: 'shape',
+        position: { x: 0, y: 0, width: 10, height: 10 },
+        content: { shape: 'circle', fill: 'red' },
+      },
+      {
+        id: 'b',
+        type: 'text',
+        position: { x: 20, y: 20, width: 80, height: 24 },
+        content: { text: 'Hi there', style: { fontSize: 18, color: '#111' } },
+      } as TextLayer,
+    ];
+    expect(decodeLayers(encodeLayers(layers))).toEqual(layers);
+  });
+
+  it('returns [] for invalid base64 / JSON', () => {
+    expect(decodeLayers('not-valid-base64!!')).toEqual([]);
+    expect(decodeLayers(Buffer.from('not json', 'utf-8').toString('base64'))).toEqual([]);
+  });
+
+  it('returns [] when the decoded value is not an array', () => {
+    const encoded = Buffer.from(JSON.stringify({ not: 'an array' }), 'utf-8').toString('base64');
+    expect(decodeLayers(encoded)).toEqual([]);
+  });
+
+  it('encodes deterministically (same input → same output)', () => {
+    const layer: ShapeLayer = {
+      id: 'x',
+      type: 'shape',
+      position: { x: 0, y: 0, width: 5, height: 5 },
+      content: { shape: 'rect' },
+    };
+    expect(encodeLayers([layer])).toBe(encodeLayers([layer]));
+  });
+});

package/src/scene/__tests__/shapeLayers.test.ts

@@ -0,0 +1,106 @@
+/**
+ * shapeLayers — pure read transform. Given the shapes `computeDrawingLayout`
+ * derives from a drawing's children, verifies the Scene Layer(s), boxes, and
+ * id helpers the DrawingAdapter relies on.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { computeDrawingLayout } from '@bendyline/squisq/doc';
+import type { Block } from '@bendyline/squisq/schemas';
+import {
+  shapesToSceneLayers,
+  shapeBoxes,
+  drawingLayerFollows,
+  shapeIdFromLayerId,
+  isPrimaryShapeLayer,
+  primaryLayerId,
+} from '../layers/shapeLayers';
+
+function shapeBlock(
+  id: string,
+  template: string,
+  overrides: Record<string, string>,
+  title?: string,
+): Block {
+  return {
+    id,
+    startTime: 0,
+    duration: 0,
+    audioSegment: 0,
+    template,
+    templateOverrides: overrides,
+    ...(title ? { title } : {}),
+  } as Block;
+}
+
+describe('shapeLayers read transform', () => {
+  it('emits a shape + follower label per rect, with dshape-/dlabel- ids', () => {
+    const layout = computeDrawingLayout([
+      shapeBlock('ceo', 'rectangle', { x: '20', y: '20', width: '120', height: '80' }, 'CEO'),
+    ]);
+    const layers = shapesToSceneLayers(layout.shapes);
+    expect(layers.map((l) => l.id)).toEqual(['dshape-ceo', 'dlabel-ceo']);
+    const [shape, label] = layers;
+    expect(shape.type).toBe('shape');
+    expect(shape.position).toMatchObject({ x: 20, y: 20, width: 120, height: 80 });
+    expect(label.type).toBe('text');
+    if (label.type === 'text') expect(label.content.text).toBe('CEO');
+  });
+
+  it('maps each shape kind to the right Layer type', () => {
+    const layout = computeDrawingLayout([
+      shapeBlock('r', 'rectangle', { x: '0', y: '0', width: '10', height: '10' }),
+      shapeBlock('c', 'circle', { x: '0', y: '0', width: '10', height: '10' }),
+      shapeBlock('l', 'line', { x: '0', y: '0', width: '10', height: '10' }),
+      shapeBlock('p', 'path', { x: '0', y: '0', d: 'M 0 0 L 5 5' }),
+      shapeBlock('t', 'text', { x: '0', y: '0', text: 'hi' }),
+    ]);
+    const byId = new Map(shapesToSceneLayers(layout.shapes).map((l) => [l.id, l]));
+    expect(byId.get('dshape-r')?.type).toBe('shape');
+    expect(byId.get('dshape-c')?.type).toBe('shape');
+    expect(byId.get('dshape-l')?.type).toBe('shape'); // plain line → bbox shape
+    expect(byId.get('dshape-p')?.type).toBe('path');
+    expect(byId.get('dshape-t')?.type).toBe('text');
+  });
+
+  it('does not emit a label layer for a text shape', () => {
+    const layout = computeDrawingLayout([
+      shapeBlock('t', 'text', { x: '0', y: '0', text: 'Note' }),
+    ]);
+    expect(shapesToSceneLayers(layout.shapes).map((l) => l.id)).toEqual(['dshape-t']);
+  });
+
+  it('exposes {id,x,y,width,height} boxes for the connector renderer', () => {
+    const layout = computeDrawingLayout([
+      shapeBlock('a', 'rect', { x: '5', y: '6', width: '7', height: '8' }),
+    ]);
+    expect(shapeBoxes(layout.shapes)).toEqual([{ id: 'a', x: 5, y: 6, width: 7, height: 8 }]);
+  });
+
+  it('links a label to its shape and recovers shape ids from layer ids', () => {
+    expect(drawingLayerFollows('dlabel-ceo')).toBe('dshape-ceo');
+    expect(drawingLayerFollows('dshape-ceo')).toBeNull();
+    expect(shapeIdFromLayerId('dshape-ceo')).toBe('ceo');
+    expect(shapeIdFromLayerId('dlabel-ceo')).toBe('ceo');
+    expect(shapeIdFromLayerId('whatever')).toBeNull();
+    expect(isPrimaryShapeLayer('dshape-ceo')).toBe(true);
+    expect(isPrimaryShapeLayer('dlabel-ceo')).toBe(false);
+    expect(primaryLayerId('ceo')).toBe('dshape-ceo');
+  });
+
+  it('connectors (line/arrow with from/to) are edges, not shapes', () => {
+    const layout = computeDrawingLayout([
+      shapeBlock('a', 'rect', { x: '0', y: '0', width: '50', height: '50' }),
+      shapeBlock('b', 'rect', { x: '0', y: '200', width: '50', height: '50' }),
+      shapeBlock('e', 'arrow', { from: 'a', to: 'b' }, 'reports to'),
+    ]);
+    expect(shapesToSceneLayers(layout.shapes).map((l) => l.id)).toEqual(['dshape-a', 'dshape-b']);
+    expect(layout.connectors).toHaveLength(1);
+    expect(layout.connectors[0]).toMatchObject({
+      id: 'e',
+      from: 'a',
+      to: 'b',
+      label: 'reports to',
+    });
+  });
+});

package/src/scene/__tests__/useSceneHitTest.test.ts

@@ -0,0 +1,90 @@
+/**
+ * useSceneHitTest + layerBounds — coordinate resolution and topmost-wins
+ * hit testing. Pure logic; no DOM needed.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useSceneHitTest, layerBounds, type HitTestable } from '../hooks/useSceneHitTest';
+import type { ShapeLayer } from '@bendyline/squisq/schemas';
+
+const viewport = { width: 1000, height: 800 };
+
+function rectLayer(id: string, x: number, y: number, w: number, h: number): ShapeLayer {
+  return {
+    id,
+    type: 'shape',
+    position: { x, y, width: w, height: h },
+    content: { shape: 'rect' },
+  };
+}
+
+describe('layerBounds', () => {
+  it('resolves numeric pixel positions', () => {
+    const b = layerBounds(rectLayer('a', 10, 20, 100, 50), viewport);
+    expect(b).toEqual({ x: 10, y: 20, width: 100, height: 50 });
+  });
+
+  it('resolves percentage strings against the viewport', () => {
+    const l: ShapeLayer = {
+      id: 'p',
+      type: 'shape',
+      position: { x: '10%', y: '25%', width: '50%', height: '20%' },
+      content: { shape: 'rect' },
+    };
+    const b = layerBounds(l, viewport);
+    expect(b).toEqual({ x: 100, y: 200, width: 500, height: 160 });
+  });
+
+  it('applies center anchor by shifting the origin to the bounding-box top-left', () => {
+    const l: ShapeLayer = {
+      id: 'c',
+      type: 'shape',
+      position: { x: 500, y: 400, width: 200, height: 100, anchor: 'center' },
+      content: { shape: 'rect' },
+    };
+    const b = layerBounds(l, viewport);
+    expect(b).toEqual({ x: 400, y: 350, width: 200, height: 100 });
+  });
+
+  it('returns null when width or height cannot be resolved', () => {
+    const l: ShapeLayer = {
+      id: 'n',
+      type: 'shape',
+      position: { x: 0, y: 0 },
+      content: { shape: 'rect' },
+    };
+    expect(layerBounds(l, viewport)).toBeNull();
+  });
+});
+
+describe('useSceneHitTest', () => {
+  function items(...layers: ShapeLayer[]): HitTestable[] {
+    return layers.map((l) => ({
+      id: l.id,
+      layer: l,
+      bounds: layerBounds(l, viewport)!,
+    }));
+  }
+
+  it('returns the topmost layer at a point (last-wins)', () => {
+    const { result } = renderHook(() => useSceneHitTest());
+    const list = items(rectLayer('a', 0, 0, 100, 100), rectLayer('b', 50, 50, 100, 100));
+    // Point (60, 60) is inside both — `b` is later in the array, so wins.
+    expect(result.current.hit({ x: 60, y: 60 }, list)).toBe('b');
+  });
+
+  it('returns null when the point is outside every layer', () => {
+    const { result } = renderHook(() => useSceneHitTest());
+    const list = items(rectLayer('a', 0, 0, 50, 50));
+    expect(result.current.hit({ x: 500, y: 500 }, list)).toBeNull();
+  });
+
+  it('treats the bounding-box edge as inside (>= and <=)', () => {
+    const { result } = renderHook(() => useSceneHitTest());
+    const list = items(rectLayer('a', 10, 10, 100, 100));
+    expect(result.current.hit({ x: 10, y: 10 }, list)).toBe('a');
+    expect(result.current.hit({ x: 110, y: 110 }, list)).toBe('a');
+    expect(result.current.hit({ x: 9.9, y: 10 }, list)).toBeNull();
+  });
+});