jspsych-tangram 0.0.1

package/dist/prep/index.js

@@ -0,0 +1,3742 @@
+import { ParameterType } from 'jspsych';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { v4 } from 'uuid';
+
+const CONFIG = {
+  color: {
+    bands: {
+      silhouette: { fillEven: "#eef2ff", fillOdd: "#f6f7fb", stroke: "#c7d2fe" },
+      workspace: { fillEven: "#f3f4f6", fillOdd: "#f9fafb", stroke: "#e5e7eb" }
+    },
+    completion: { fill: "#dcfce7", stroke: "#86efac" },
+    silhouetteMask: "#94a3b8",
+    anchors: { invalid: "#7dd3fc", valid: "#475569" },
+    piece: { draggingFill: "#1d4ed8", validFill: "#60a5fa", invalidFill: "#ef4444", invalidStroke: "#dc2626", selectedStroke: "#111827", allGreenStroke: "#86efac", borderStroke: "#374151" },
+    ui: { light: "#60a5fa", dark: "#1d4ed8" },
+    blueprint: { fill: "#374151", selectedStroke: "#111827", badgeFill: "#eef2ff", labelFill: "#374151" }
+  },
+  opacity: {
+    blueprint: 0.95,
+    silhouetteMask: 0.45,
+    anchors: { valid: 0.8, invalid: 0.5 },
+    piece: { invalid: 0.35, dragging: 0.6, locked: 0.7, normal: 0.95 }
+  },
+  size: {
+    stroke: { bandPx: 1, pieceSelectedPx: 1.5, allGreenStrokePx: 6, pieceBorderPx: 1 },
+    anchorRadiusPx: { valid: 1, invalid: 1 },
+    badgeFontPx: 12,
+    centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 }
+  },
+  layout: {
+    grid: { stepPx: 20, unitPx: 40 },
+    paddingPx: 1,
+    constraints: {
+      workspaceDiamAnchors: 10,
+      // num anchors req'd to be on diagonal
+      quickstashDiamAnchors: 7,
+      // num anchors req'd to be in single quickstash slot
+      primitiveDiamAnchors: 5
+    },
+    defaults: { maxQuickstashSlots: 1 }
+  },
+  game: {
+    snapRadiusPx: 15,
+    showBorders: true,
+    hideTouchingBorders: true
+  }
+};
+
+function isComposite(bp) {
+  return bp.parts !== void 0;
+}
+function isPrimitive(bp) {
+  return !isComposite(bp);
+}
+class BlueprintRegistry {
+  constructor() {
+    this.byId = /* @__PURE__ */ new Map();
+    this.primitivesByKind = /* @__PURE__ */ new Map();
+  }
+  registerAll(bps) {
+    for (const bp of bps) this.register(bp);
+  }
+  register(bp) {
+    this.byId.set(bp.id, bp);
+    if (isPrimitive(bp)) this.primitivesByKind.set(bp.kind, bp);
+  }
+  get(id) {
+    return this.byId.get(id);
+  }
+  getPrimitive(kind) {
+    return this.primitivesByKind.get(kind);
+  }
+}
+
+let PID = 0;
+const newId = () => `p_${++PID}`;
+const NOW = () => performance.now();
+class BaseGameController {
+  constructor(sectors, quickstash, primitives, config) {
+    this.registry = new BlueprintRegistry();
+    // React state update tracking
+    this._updateCount = 0;
+    // Event tracking (optional)
+    this.trackingCallbacks = null;
+    if (!sectors || sectors.length === 0) {
+      throw new Error("BaseGameController: sectors array is required and cannot be empty");
+    }
+    if (!primitives || primitives.length === 0) {
+      throw new Error("BaseGameController: primitives array is required and cannot be empty");
+    }
+    if (!config) {
+      throw new Error("BaseGameController: config is required");
+    }
+    this.sectors = sectors;
+    this.quickstash = quickstash || [];
+    this.primitives = primitives;
+    this.config = config;
+    this.registry.registerAll(primitives);
+    this.registry.registerAll(quickstash);
+    this.t0 = NOW();
+    this.state = this.initializeState();
+  }
+  get updateCount() {
+    return this._updateCount;
+  }
+  notifyStateChange() {
+    this._updateCount++;
+  }
+  initializeState() {
+    const sectors = {};
+    for (const s of this.sectors) {
+      sectors[s.id] = { sectorId: s.id, pieces: [] };
+    }
+    return {
+      cfg: {
+        n: this.config.n,
+        layout: this.config.layout,
+        target: this.config.target,
+        input: this.config.input,
+        maxQuickstashSlots: this.config.maxQuickstashSlots,
+        timeLimitMs: this.config.timeLimitMs,
+        snapRadiusPx: CONFIG.game.snapRadiusPx,
+        maxCompositeSize: this.config.maxCompositeSize ?? 0,
+        // Default to 0 for legacy compatibility
+        sectors: this.sectors,
+        mode: this.config.mode
+      },
+      blueprintView: this.config.mode === "prep" ? "primitives" : "quickstash",
+      // Start with primitives in prep mode
+      primitives: this.primitives,
+      quickstash: this.quickstash,
+      sectors,
+      startedAt: this.t0
+    };
+  }
+  // ===== Event Tracking =====
+  // Methods for InteractionTracker integration
+  /**
+   * Set tracking callbacks for data collection
+   * Called by InteractionTracker to register itself
+   */
+  setTrackingCallbacks(callbacks) {
+    this.trackingCallbacks = callbacks;
+  }
+  // ===== RoundController Compatibility Interface =====
+  // These methods maintain compatibility with Board.tsx expectations
+  getState() {
+    return this.state;
+  }
+  getSnapRadius() {
+    return CONFIG.game.snapRadiusPx;
+  }
+  // CRITICAL: Preserve target and input mode access
+  getTarget() {
+    return this.config.target;
+  }
+  getInputMode() {
+    return this.config.input;
+  }
+  // ===== Blueprint and Piece Management =====
+  // Methods that Board.tsx expects
+  getBlueprint(id) {
+    return this.registry.get(id);
+  }
+  getPrimitive(kind) {
+    return this.registry.getPrimitive(kind);
+  }
+  getPiecesInSector(sectorId) {
+    const sectorState = this.state.sectors[sectorId];
+    return sectorState ? sectorState.pieces : [];
+  }
+  // ===== Completion Management =====
+  // Critical for Board.tsx validation
+  isSectorCompleted(sectorId) {
+    return !!this.state.sectors[sectorId]?.completedAt;
+  }
+  markSectorCompleted(sectorId) {
+    const ss = this.state.sectors[sectorId];
+    if (!ss || ss.completedAt) return;
+    ss.completedAt = NOW();
+    if (this.trackingCallbacks?.onSectorCompleted) {
+      this.trackingCallbacks.onSectorCompleted(sectorId);
+    }
+    const allDone = Object.values(this.state.sectors).every((s) => !!s.completedAt);
+    if (allDone && !this.state.endedAt) {
+      this.state.endedAt = NOW();
+      console.log("[BaseGameController] all sectors complete");
+    }
+  }
+  // ===== Piece Operations =====
+  // Methods that Board.tsx uses for drag/drop
+  spawnFromBlueprint(bp, at) {
+    const id = newId();
+    const piece = { id, blueprintId: bp.id, pos: { ...at } };
+    this.getFloating().pieces.push(piece);
+    this.notifyStateChange();
+    return id;
+  }
+  move(id, to) {
+    const p = this.findPiece(id);
+    if (!p) {
+      return;
+    }
+    p.pos = { ...to };
+    this.notifyStateChange();
+  }
+  drop(id, sectorId) {
+    const p = this.findPiece(id);
+    if (!p) {
+      return;
+    }
+    const where = this.findPieceLocation(id);
+    this.removeFromCurrent(id);
+    if (where?.sectorId) delete p.sectorId;
+    if (!sectorId) {
+      this.getFloating().pieces.push(p);
+      this.notifyStateChange();
+      return;
+    }
+    if (this.isSectorCompleted(sectorId)) {
+      this.notifyStateChange();
+      return;
+    }
+    const sector = this.state.sectors[sectorId];
+    if (!sector) {
+      return;
+    }
+    sector.pieces.push(p);
+    p.sectorId = sectorId;
+    this.notifyStateChange();
+  }
+  remove(id) {
+    const loc = this.findPieceLocation(id);
+    if (!loc) return;
+    loc.array.splice(loc.index, 1);
+    this.notifyStateChange();
+  }
+  // ===== Helper Methods =====
+  // Internal methods that support the public API
+  findPiece(id) {
+    for (const s of Object.values(this.state.sectors)) {
+      const sectorState = s;
+      const p = sectorState.pieces.find((pp) => pp.id === id);
+      if (p) return p;
+    }
+    return this.getFloating().pieces.find((pp) => pp.id === id) ?? null;
+  }
+  getFloating() {
+    if (!this._floating) {
+      this._floating = { sectorId: "-floating-", pieces: [] };
+    }
+    return this._floating;
+  }
+  findPieceLocation(id) {
+    for (const s of Object.values(this.state.sectors)) {
+      const sectorState = s;
+      const idx = sectorState.pieces.findIndex((pp) => pp.id === id);
+      if (idx >= 0) return { sectorId: sectorState.sectorId, array: sectorState.pieces, index: idx };
+    }
+    const f = this.getFloating();
+    const i = f.pieces.findIndex((pp) => pp.id === id);
+    return i >= 0 ? { array: f.pieces, index: i } : null;
+  }
+  removeFromCurrent(id) {
+    const loc = this.findPieceLocation(id);
+    if (!loc) return;
+    loc.array.splice(loc.index, 1);
+  }
+  // ===== Additional Compatibility Methods =====
+  switchBlueprintView() {
+    if (this.config.mode === "prep") return;
+    const to = this.state.blueprintView === "primitives" ? "quickstash" : "primitives";
+    this.state.blueprintView = to;
+  }
+  /**
+   * Check if submit button should be enabled in prep mode
+   * Validates macro completion based on piece count and slot requirements
+   */
+  isSubmitEnabled() {
+    if (this.config.mode !== "prep") return true;
+    const minPieces = this.config.minPiecesPerMacro ?? 2;
+    const maxPieces = this.config.maxCompositeSize ?? Infinity;
+    const requireAll = this.config.requireAllSlots ?? false;
+    const allSectors = Object.values(this.state.sectors);
+    let validSectorCount = 0;
+    for (const sector of allSectors) {
+      const pieceCount = sector.pieces.length;
+      if (pieceCount >= minPieces && pieceCount <= maxPieces) {
+        validSectorCount++;
+      } else if (pieceCount > 0) {
+        return false;
+      }
+    }
+    if (requireAll) {
+      return validSectorCount === allSectors.length;
+    } else {
+      return true;
+    }
+  }
+  snapshot() {
+    const perSector = Object.values(this.state.sectors).map((s) => {
+      const sectorState = s;
+      const base = {
+        sectorId: sectorState.sectorId,
+        pieceCount: sectorState.pieces.length
+      };
+      return sectorState.completedAt ? { ...base, completedAt: sectorState.completedAt } : base;
+    });
+    return {
+      perSector,
+      events: [],
+      // TODO: Will be implemented in validation separation phase
+      timeMs: NOW() - this.t0,
+      completed: !!this.state.endedAt
+    };
+  }
+}
+
+function pointOnSegment(p, a, b, eps = 1e-9) {
+  const cross = (b.y - a.y) * (p.x - a.x) - (b.x - a.x) * (p.y - a.y);
+  if (Math.abs(cross) > eps) return false;
+  const minX = Math.min(a.x, b.x) - eps, maxX = Math.max(a.x, b.x) + eps;
+  const minY = Math.min(a.y, b.y) - eps, maxY = Math.max(a.y, b.y) + eps;
+  return p.x >= minX && p.x <= maxX && p.y >= minY && p.y <= maxY;
+}
+function pointInPolygon(pt, poly) {
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const vertexJ = poly[j];
+    const vertexI = poly[i];
+    if (!vertexJ || !vertexI) continue;
+    if (pointOnSegment(pt, vertexJ, vertexI)) return true;
+  }
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const vertexI = poly[i];
+    const vertexJ = poly[j];
+    if (!vertexI || !vertexJ) continue;
+    const xi = vertexI.x, yi = vertexI.y;
+    const xj = vertexJ.x, yj = vertexJ.y;
+    const intersects = yi > pt.y !== yj > pt.y && pt.x < (xj - xi) * (pt.y - yi) / (yj - yi + 1e-12) + xi;
+    if (intersects) inside = !inside;
+  }
+  return inside;
+}
+function project(poly, nx, ny) {
+  let min = Infinity, max = -Infinity;
+  for (const p of poly) {
+    const s = p.x * nx + p.y * ny;
+    if (s < min) min = s;
+    if (s > max) max = s;
+  }
+  return { min, max };
+}
+
+const SEP_EPS = 1e-6;
+function convexIntersects(a, b) {
+  const polys = [a, b];
+  for (const poly of polys) {
+    for (let i = 0; i < poly.length; i++) {
+      const p0 = poly[i], p1 = poly[(i + 1) % poly.length];
+      if (!p0 || !p1) continue;
+      const ex = p1.x - p0.x, ey = p1.y - p0.y;
+      const nx = -ey, ny = ex;
+      const pa = project(a, nx, ny);
+      const pb = project(b, nx, ny);
+      if (pa.max <= pb.min + SEP_EPS || pb.max <= pa.min + SEP_EPS) return false;
+    }
+  }
+  return true;
+}
+function polysOverlap(aPolys, bPolys) {
+  const aabbsA = aPolys.map((p) => {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const pt of p) {
+      if (pt.x < minX) minX = pt.x;
+      if (pt.y < minY) minY = pt.y;
+      if (pt.x > maxX) maxX = pt.x;
+      if (pt.y > maxY) maxY = pt.y;
+    }
+    return { minX, minY, maxX, maxY };
+  });
+  const aabbsB = bPolys.map((p) => {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const pt of p) {
+      if (pt.x < minX) minX = pt.x;
+      if (pt.y < minY) minY = pt.y;
+      if (pt.x > maxX) maxX = pt.x;
+      if (pt.y > maxY) maxY = pt.y;
+    }
+    return { minX, minY, maxX, maxY };
+  });
+  for (let i = 0; i < aPolys.length; i++) {
+    for (let j = 0; j < bPolys.length; j++) {
+      const A = aPolys[i], B = bPolys[j];
+      const aa = aabbsA[i], bb = aabbsB[j];
+      if (!A || !B || !aa || !bb) continue;
+      if (aa.maxX <= bb.minX + SEP_EPS || bb.maxX <= aa.minX + SEP_EPS || aa.maxY <= bb.minY + SEP_EPS || bb.maxY <= aa.minY + SEP_EPS) continue;
+      if (convexIntersects(A, B)) return true;
+    }
+  }
+  return false;
+}
+
+function polysAABB$1(polys) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const poly of polys) {
+    for (const p of poly) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+  }
+  const width = Math.max(1, maxX - minX);
+  const height = Math.max(1, maxY - minY);
+  return { min: { x: minX, y: minY }, max: { x: maxX, y: maxY }, width, height, cx: (minX + maxX) / 2, cy: (minY + maxY) / 2 };
+}
+function boundsOfShapes(shapes) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const poly of shapes) {
+    for (const p of poly) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+  }
+  const width = Math.max(0, maxX - minX);
+  const height = Math.max(0, maxY - minY);
+  return { min: { x: minX, y: minY }, max: { x: maxX, y: maxY }, width, height };
+}
+function boundsOfPrimitive(bp) {
+  return boundsOfShapes(bp.shape);
+}
+function boundsOfComposite(bp, primitiveLookup) {
+  if (bp.shape && bp.shape.length) return boundsOfShapes(bp.shape);
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const part of bp.parts) {
+    const prim = primitiveLookup(part.kind);
+    if (!prim) continue;
+    const b = boundsOfPrimitive(prim);
+    const pMinX = part.offset.x + b.min.x;
+    const pMinY = part.offset.y + b.min.y;
+    const pMaxX = part.offset.x + b.max.x;
+    const pMaxY = part.offset.y + b.max.y;
+    if (pMinX < minX) minX = pMinX;
+    if (pMinY < minY) minY = pMinY;
+    if (pMaxX > maxX) maxX = pMaxX;
+    if (pMaxY > maxY) maxY = pMaxY;
+  }
+  const width = Math.max(0, maxX - minX);
+  const height = Math.max(0, maxY - minY);
+  return { min: { x: minX, y: minY }, max: { x: maxX, y: maxY }, width, height };
+}
+function boundsOfBlueprint(bp, primitiveLookup) {
+  if ("parts" in bp) return boundsOfComposite(bp, primitiveLookup);
+  return boundsOfPrimitive(bp);
+}
+
+const GRID_PX = CONFIG.layout.grid.stepPx;
+function piecePolysAt(bp, bb, tl) {
+  const ox = tl.x - bb.min.x;
+  const oy = tl.y - bb.min.y;
+  const polys = "shape" in bp && bp.shape ? bp.shape : [];
+  return polys.map((poly) => poly.map((p) => ({ x: p.x + ox, y: p.y + oy })));
+}
+function computeSupportOffsets(bp, bb) {
+  const cx = bb.min.x + bb.width / 2;
+  const cy = bb.min.y + bb.height / 2;
+  const polys = "shape" in bp && bp.shape && bp.shape.length ? bp.shape : [[
+    { x: bb.min.x, y: bb.min.y },
+    { x: bb.min.x + bb.width, y: bb.min.y },
+    { x: bb.min.x + bb.width, y: bb.min.y + bb.height },
+    { x: bb.min.x, y: bb.min.y + bb.height }
+  ]];
+  const offs = [];
+  for (const poly of polys) for (const v of poly) offs.push({ x: v.x - cx, y: v.y - cy });
+  return offs;
+}
+function clampTopLeftBySupport(tlx, tly, d, layout, target, pointerInsideCenter) {
+  const cx0 = tlx + d.aabb.width / 2;
+  const cy0 = tly + d.aabb.height / 2;
+  const vx = cx0 - layout.cx;
+  const vy = cy0 - layout.cy;
+  const r = Math.hypot(vx, vy);
+  if (r === 0) return { x: tlx, y: tly };
+  const ux = vx / r, uy = vy / r;
+  let h_out = -Infinity, h_in = -Infinity;
+  for (const o of d.support) {
+    const outProj = o.x * ux + o.y * uy;
+    if (outProj > h_out) h_out = outProj;
+    const inProj = -(o.x * ux + o.y * uy);
+    if (inProj > h_in) h_in = inProj;
+  }
+  if (target === "workspace") {
+    const [rIn, rOut] = layout.bands.workspace;
+    const minR = pointerInsideCenter ? 0 : rIn + h_in;
+    const maxR = rOut - h_out;
+    const rClamped = Math.min(Math.max(r, minR), maxR);
+    if (Math.abs(rClamped - r) < 1e-6) return { x: tlx, y: tly };
+    const newCx = layout.cx + rClamped * ux;
+    const newCy = layout.cy + rClamped * uy;
+    return { x: newCx - d.aabb.width / 2, y: newCy - d.aabb.height / 2 };
+  } else {
+    const rOut = layout.bands.silhouette[1];
+    const maxR = rOut - h_out;
+    if (r <= maxR) return { x: tlx, y: tly };
+    const newCx = layout.cx + maxR * ux;
+    const newCy = layout.cy + maxR * uy;
+    return { x: newCx - d.aabb.width / 2, y: newCy - d.aabb.height / 2 };
+  }
+}
+function igcd$1(a, b) {
+  a = Math.round(Math.abs(a));
+  b = Math.round(Math.abs(b));
+  while (b) [a, b] = [b, a % b];
+  return a || 1;
+}
+function inferUnitFromPolys$1(polys) {
+  let g = 0;
+  for (const poly of polys) {
+    for (let i = 0; i < poly.length; i++) {
+      const a = poly[i], b = poly[(i + 1) % poly.length];
+      if (!a || !b) continue;
+      const dx = Math.round(Math.abs(b.x - a.x));
+      const dy = Math.round(Math.abs(b.y - a.y));
+      if (dx) g = g ? igcd$1(g, dx) : dx;
+      if (dy) g = g ? igcd$1(g, dy) : dy;
+    }
+  }
+  return g || 1;
+}
+function placeSilhouetteGridAlignedAsPolys(polys, S, rectCenter) {
+  if (!polys || polys.length === 0) return [];
+  const a = polysAABB$1(polys);
+  const cx0 = (a.min.x + a.max.x) / 2;
+  const cy0 = (a.min.y + a.max.y) / 2;
+  const cx = Math.round(rectCenter.cx / GRID_PX) * GRID_PX;
+  const cy = Math.round(rectCenter.cy / GRID_PX) * GRID_PX;
+  const tx = cx - S * cx0;
+  const ty = cy - S * cy0;
+  const stx = Math.round(tx / GRID_PX) * GRID_PX;
+  const sty = Math.round(ty / GRID_PX) * GRID_PX;
+  return polys.map((poly) => poly.map((p) => ({ x: S * p.x + stx, y: S * p.y + sty })));
+}
+function gridNodesInAABB(min, max) {
+  const out = [];
+  const x0 = Math.ceil(min.x / GRID_PX) * GRID_PX;
+  const y0 = Math.ceil(min.y / GRID_PX) * GRID_PX;
+  for (let y = y0; y <= max.y; y += GRID_PX) {
+    for (let x = x0; x <= max.x; x += GRID_PX) out.push({ x, y });
+  }
+  return out;
+}
+function filterNodesToBandAndSector(nodes, layout, band, sector) {
+  const [rIn, rOut] = layout.bands[band];
+  const out = [];
+  for (const n of nodes) {
+    const dx = n.x - layout.cx, dy = n.y - layout.cy;
+    const r = Math.hypot(dx, dy);
+    if (r < rIn || r > rOut) continue;
+    if (sector) {
+      let theta = Math.atan2(dy, dx);
+      if (layout.mode === "circle") {
+        if (theta < -Math.PI / 2) theta += 2 * Math.PI;
+      } else {
+        if (theta < Math.PI) theta += 2 * Math.PI;
+      }
+      if (theta < sector.start || theta >= sector.end) continue;
+    }
+    out.push(n);
+  }
+  return out;
+}
+function filterNodesInPolys(nodes, polys, pointInPolyFn = pointInPolygon) {
+  const out = [];
+  node: for (const n of nodes) {
+    for (const poly of polys) {
+      if (pointInPolyFn(n, poly)) {
+        out.push(n);
+        continue node;
+      }
+    }
+  }
+  return out;
+}
+function innerRingNodes(layout) {
+  const pad = 6;
+  const min = { x: layout.cx - layout.innerR, y: layout.cy - layout.innerR - pad };
+  const max = { x: layout.cx + layout.innerR, y: layout.cy + layout.innerR + pad };
+  const nodes = gridNodesInAABB(min, max);
+  const out = [];
+  for (const n of nodes) {
+    const dx = n.x - layout.cx, dy = n.y - layout.cy;
+    const r = Math.hypot(dx, dy);
+    if (r < layout.innerR) out.push(n);
+  }
+  return out;
+}
+const anchorsDiameterToPx = (anchorsDiag, gridPx = GRID_PX) => anchorsDiag * Math.SQRT2 * gridPx;
+
+function igcd(a, b) {
+  a = Math.round(Math.abs(a));
+  b = Math.round(Math.abs(b));
+  while (b) [a, b] = [b, a % b];
+  return a || 1;
+}
+function inferUnitFromPolys(polys) {
+  let g = 0;
+  for (const poly of polys) {
+    for (let i = 0; i < poly.length; i++) {
+      const a = poly[i], b = poly[(i + 1) % poly.length];
+      if (!a || !b) continue;
+      const dx = Math.round(Math.abs(b.x - a.x));
+      const dy = Math.round(Math.abs(b.y - a.y));
+      if (dx) g = g ? igcd(g, dx) : dx;
+      if (dy) g = g ? igcd(g, dy) : dy;
+    }
+  }
+  return g || 1;
+}
+function polysAABB(polys) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const poly of polys) for (const p of poly) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
+  return { minX, minY, maxX, maxY, cx, cy };
+}
+function solveRadii(params) {
+  const {
+    n,
+    layoutMode,
+    target,
+    qsMaxSlots,
+    primitivesSlots,
+    gridPx = CONFIG.layout.grid.stepPx,
+    reqWorkspaceDiamAnchors = CONFIG.layout.constraints.workspaceDiamAnchors,
+    reqQuickstashDiamAnchors = CONFIG.layout.constraints.quickstashDiamAnchors,
+    reqPrimitiveDiamAnchors = CONFIG.layout.constraints.primitiveDiamAnchors
+  } = params;
+  const allPolys = (params.masks ?? []).flat();
+  const rawUnit = allPolys.length ? inferUnitFromPolys(allPolys) : 0;
+  const unitScaleS = rawUnit ? 2 * gridPx / rawUnit : 1;
+  let Rshape_px_max = 0;
+  if (params.masks && params.masks.length) {
+    for (const sectorPolys of params.masks) {
+      if (!sectorPolys?.length) continue;
+      const a = polysAABB(sectorPolys);
+      const { cx, cy } = a;
+      for (const poly of sectorPolys) {
+        for (const p of poly) {
+          const rx = (p.x - cx) * unitScaleS;
+          const ry = (p.y - cy) * unitScaleS;
+          const r = Math.hypot(rx, ry);
+          if (r > Rshape_px_max) Rshape_px_max = r;
+        }
+      }
+    }
+  }
+  const sweep = layoutMode === "circle" ? Math.PI * 2 : Math.PI;
+  const dOut = sweep / Math.max(1, n);
+  const dIn = sweep / Math.max(1, qsMaxSlots);
+  const dPrim = sweep / Math.max(1, primitivesSlots);
+  const sinOut = Math.sin(dOut / 2);
+  const sinIn = Math.sin(dIn / 2);
+  const sinPrim = Math.sin(dPrim / 2);
+  const D_ws = anchorsDiameterToPx(reqWorkspaceDiamAnchors, gridPx);
+  const D_bp = anchorsDiameterToPx(reqQuickstashDiamAnchors, gridPx);
+  const D_prim = anchorsDiameterToPx(reqPrimitiveDiamAnchors, gridPx);
+  const innerR_min_bp = D_bp * (0.5 + 1 / (2 * Math.max(1e-9, sinIn)));
+  const innerR_min_prim = D_prim * (0.5 + 1 / (2 * Math.max(1e-9, sinPrim)));
+  const innerR_min_ws = D_ws / (2 * Math.max(1e-9, sinOut)) - D_ws / 2;
+  const innerR_min = Math.max(innerR_min_bp, innerR_min_prim, innerR_min_ws);
+  const Tw_min = D_ws;
+  const Tp_min = target === "workspace" ? 2 * Rshape_px_max : 0;
+  const dr_min = Tw_min + Tp_min;
+  const outerR_min = innerR_min + dr_min;
+  return { innerR_min, dr_min, outerR_min, Tw_min, Tp_min, Rshape_px_max };
+}
+function optimizeBandSplit(args) {
+  const { outerRViewportBound, innerR_min, Tw_min, Tp_min, Rshape_px_max, D_ws_px } = args;
+  const dr_min = Tw_min + Tp_min;
+  if (outerRViewportBound < innerR_min + dr_min) {
+    const outerR2 = innerR_min + dr_min;
+    return { innerR: innerR_min, Tw: Tw_min, Tp: Tp_min, outerR: outerR2 };
+  }
+  const outerR = outerRViewportBound;
+  const innerR = innerR_min;
+  const dr = outerR - innerR;
+  const slack = Math.max(0, dr - dr_min);
+  const wWork = 1;
+  const wSil = 1 + Rshape_px_max / Math.max(1e-9, D_ws_px);
+  const addWork = slack * (wWork / (wWork + wSil));
+  const Tw = Tw_min + addWork;
+  const Tp = dr - Tw;
+  return { innerR, Tw, Tp, outerR };
+}
+function solveLogicalBox(params) {
+  const { layoutMode, layoutPadPx } = params;
+  const { outerR_min } = solveRadii(params);
+  if (layoutMode === "circle") {
+    const LOGICAL_W = 2 * (outerR_min + layoutPadPx);
+    return { LOGICAL_W, LOGICAL_H: LOGICAL_W };
+  } else {
+    const LOGICAL_W = 2 * (outerR_min + layoutPadPx);
+    return { LOGICAL_W, LOGICAL_H: LOGICAL_W / 2 };
+  }
+}
+
+function computeCircleLayout(viewport, n, sectorIds, mode = "circle", target = "workspace", extras) {
+  const pad = CONFIG.layout.paddingPx;
+  const cx = viewport.w / 2;
+  const cy = mode === "semicircle" ? viewport.h : viewport.h / 2;
+  const maxRVertical = mode === "semicircle" ? viewport.h - pad : cy;
+  const outerRViewportBound = Math.min(cx, maxRVertical) - pad;
+  const sol = solveRadii({
+    n,
+    layoutMode: mode,
+    target,
+    qsMaxSlots: extras.qsMaxSlots,
+    primitivesSlots: extras.primitivesSlots,
+    masks: extras.masks ?? []
+  });
+  let innerR, outerR, bands;
+  if (target === "workspace") {
+    const D_ws_px = anchorsDiameterToPx(CONFIG.layout.constraints.workspaceDiamAnchors);
+    const opt = optimizeBandSplit({
+      outerRViewportBound,
+      innerR_min: sol.innerR_min,
+      Tw_min: sol.Tw_min,
+      Tp_min: sol.Tp_min,
+      Rshape_px_max: sol.Rshape_px_max,
+      D_ws_px
+    });
+    innerR = opt.innerR;
+    outerR = opt.outerR;
+    bands = {
+      workspace: [opt.innerR, opt.innerR + opt.Tw],
+      silhouette: [opt.innerR + opt.Tw, opt.outerR]
+    };
+  } else {
+    outerR = Math.max(outerRViewportBound, sol.outerR_min);
+    innerR = Math.min(sol.innerR_min, outerR);
+    if (outerR < sol.outerR_min) {
+      outerR = sol.outerR_min;
+      innerR = sol.innerR_min;
+    }
+    bands = { silhouette: [innerR, outerR], workspace: [innerR, outerR] };
+  }
+  const sweep = mode === "circle" ? Math.PI * 2 : Math.PI;
+  const sweepStart = mode === "circle" ? -Math.PI / 2 : Math.PI;
+  const sweepEnd = sweepStart + sweep;
+  const step = sweep / n;
+  const sectors = [];
+  for (let i = 0; i < n; i++) {
+    const id = sectorIds[i] ?? String(i);
+    const start = sweepStart + i * step;
+    const end = start + step;
+    const mid = (start + end) / 2;
+    sectors.push({ id, index: i, start, end, mid });
+  }
+  return { mode, cx, cy, innerR, outerR, sectors, bands, sweepStart, sweepEnd };
+}
+function wedgePath(cx, cy, innerR, outerR, start, end) {
+  const largeArc = end - start > Math.PI ? 1 : 0;
+  const x0 = cx + innerR * Math.cos(start);
+  const y0 = cy + innerR * Math.sin(start);
+  const x1 = cx + outerR * Math.cos(start);
+  const y1 = cy + outerR * Math.sin(start);
+  const x2 = cx + outerR * Math.cos(end);
+  const y2 = cy + outerR * Math.sin(end);
+  const x3 = cx + innerR * Math.cos(end);
+  const y3 = cy + innerR * Math.sin(end);
+  return [
+    `M ${x0} ${y0}`,
+    `L ${x1} ${y1}`,
+    `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}`,
+    `L ${x3} ${y3}`,
+    `A ${innerR} ${innerR} 0 ${largeArc} 0 ${x0} ${y0}`,
+    "Z"
+  ].join(" ");
+}
+function sectorAtPoint(x, y, layout, band) {
+  const dx = x - layout.cx;
+  const dy = y - layout.cy;
+  const r = Math.hypot(dx, dy);
+  const [rIn, rOut] = band ? layout.bands[band] : [layout.innerR, layout.outerR];
+  if (r < rIn || r > rOut) return void 0;
+  let theta = Math.atan2(dy, dx);
+  if (layout.mode === "circle") {
+    if (theta < -Math.PI / 2) theta += 2 * Math.PI;
+  } else {
+    if (theta < Math.PI) theta += 2 * Math.PI;
+  }
+  for (const s of layout.sectors) {
+    if (theta >= s.start && theta < s.end) return s.id;
+  }
+  return layout.sectors.at(-1)?.id;
+}
+function rectForBand(layout, sector, band, pad = 0.85) {
+  const [rIn, rOut] = layout.bands[band];
+  const rMid = (rIn + rOut) / 2;
+  const dr = rOut - rIn;
+  const arc = (sector.end - sector.start) * rMid * 0.9;
+  const w = arc * pad;
+  const h = dr * pad;
+  const cx = layout.cx + rMid * Math.cos(sector.mid);
+  const cy = layout.cy + rMid * Math.sin(sector.mid);
+  return { cx, cy, w, h };
+}
+
+function generateEdgeStrokePaths(poly) {
+  const strokePaths = [];
+  for (let i = 0; i < poly.length; i++) {
+    const current = poly[i];
+    const next = poly[(i + 1) % poly.length];
+    if (current && next) {
+      strokePaths.push(`M ${current.x} ${current.y} L ${next.x} ${next.y}`);
+    }
+  }
+  return strokePaths;
+}
+function edgeToUnitSegments$1(start, end, gridSize) {
+  const segments = [];
+  const startGrid = {
+    x: Math.round(start.x / gridSize),
+    y: Math.round(start.y / gridSize)
+  };
+  const endGrid = {
+    x: Math.round(end.x / gridSize),
+    y: Math.round(end.y / gridSize)
+  };
+  const dx = endGrid.x - startGrid.x;
+  const dy = endGrid.y - startGrid.y;
+  if (dx === 0 && dy === 0) return [];
+  const steps = Math.max(Math.abs(dx), Math.abs(dy));
+  const stepX = dx / steps;
+  const stepY = dy / steps;
+  for (let i = 0; i < steps; i++) {
+    const aX = Math.round(startGrid.x + i * stepX);
+    const aY = Math.round(startGrid.y + i * stepY);
+    const bX = Math.round(startGrid.x + (i + 1) * stepX);
+    const bY = Math.round(startGrid.y + (i + 1) * stepY);
+    segments.push({
+      a: { x: aX, y: aY },
+      b: { x: bX, y: bY }
+    });
+  }
+  return segments;
+}
+function getHiddenEdgesForPolygon(piece, polyIndex, allPiecesInSector, getBlueprint, getPrimitive) {
+  let blueprint;
+  try {
+    blueprint = getBlueprint(piece.blueprintId);
+  } catch (error) {
+    console.warn("getBlueprint failed in getHiddenEdgesForPolygon:", error);
+    return [];
+  }
+  if (!blueprint?.shape) {
+    return [];
+  }
+  const poly = blueprint.shape[polyIndex];
+  if (!poly) return [];
+  const gridSize = CONFIG.layout.grid.stepPx;
+  const bb = boundsOfBlueprint(blueprint, getPrimitive);
+  const ox = piece.pos.x - bb.min.x;
+  const oy = piece.pos.y - bb.min.y;
+  const translatedPoly = poly.map((vertex) => ({
+    x: vertex.x + ox,
+    y: vertex.y + oy
+  }));
+  const hiddenEdges = [];
+  for (let i = 0; i < translatedPoly.length; i++) {
+    const current = translatedPoly[i];
+    const next = translatedPoly[(i + 1) % translatedPoly.length];
+    if (!current || !next) {
+      hiddenEdges.push(false);
+      continue;
+    }
+    const edgeSegments = edgeToUnitSegments$1(current, next, gridSize);
+    let isTouching = false;
+    if (piece.blueprintId.startsWith("comp:")) {
+      for (let otherPolyIndex = 0; otherPolyIndex < blueprint.shape.length; otherPolyIndex++) {
+        if (otherPolyIndex === polyIndex) continue;
+        const otherPoly = blueprint.shape[otherPolyIndex];
+        if (!otherPoly) continue;
+        const otherTranslatedPoly = otherPoly.map((vertex) => ({
+          x: vertex.x + ox,
+          y: vertex.y + oy
+        }));
+        for (let j = 0; j < otherTranslatedPoly.length; j++) {
+          const otherCurrent = otherTranslatedPoly[j];
+          const otherNext = otherTranslatedPoly[(j + 1) % otherTranslatedPoly.length];
+          if (!otherCurrent || !otherNext) continue;
+          const otherEdgeSegments = edgeToUnitSegments$1(otherCurrent, otherNext, gridSize);
+          for (const edgeSeg of edgeSegments) {
+            const isShared = otherEdgeSegments.some(
+              (otherSeg) => (
+                // Check if segments share the same endpoints (identical or reversed)
+                edgeSeg.a.x === otherSeg.a.x && edgeSeg.a.y === otherSeg.a.y && edgeSeg.b.x === otherSeg.b.x && edgeSeg.b.y === otherSeg.b.y || edgeSeg.a.x === otherSeg.b.x && edgeSeg.a.y === otherSeg.b.y && edgeSeg.b.x === otherSeg.a.x && edgeSeg.b.y === otherSeg.a.y
+              )
+            );
+            if (isShared) {
+              isTouching = true;
+              break;
+            }
+          }
+          if (isTouching) break;
+        }
+        if (isTouching) break;
+      }
+    }
+    if (!isTouching && CONFIG.game.hideTouchingBorders) {
+      for (const otherPiece of allPiecesInSector) {
+        if (otherPiece.id === piece.id) continue;
+        const otherBlueprint = getBlueprint(otherPiece.blueprintId);
+        if (!otherBlueprint?.shape) continue;
+        const otherBb = boundsOfBlueprint(otherBlueprint, getPrimitive);
+        const otherOx = otherPiece.pos.x - otherBb.min.x;
+        const otherOy = otherPiece.pos.y - otherBb.min.y;
+        for (const otherPoly of otherBlueprint.shape) {
+          const otherTranslatedPoly = otherPoly.map((vertex) => ({
+            x: vertex.x + otherOx,
+            y: vertex.y + otherOy
+          }));
+          for (let j = 0; j < otherTranslatedPoly.length; j++) {
+            const otherCurrent = otherTranslatedPoly[j];
+            const otherNext = otherTranslatedPoly[(j + 1) % otherTranslatedPoly.length];
+            if (!otherCurrent || !otherNext) continue;
+            const otherEdgeSegments = edgeToUnitSegments$1(otherCurrent, otherNext, gridSize);
+            for (const edgeSeg of edgeSegments) {
+              const isShared = otherEdgeSegments.some(
+                (otherSeg) => (
+                  // Check if segments share the same endpoints (identical or reversed)
+                  edgeSeg.a.x === otherSeg.a.x && edgeSeg.a.y === otherSeg.a.y && edgeSeg.b.x === otherSeg.b.x && edgeSeg.b.y === otherSeg.b.y || edgeSeg.a.x === otherSeg.b.x && edgeSeg.a.y === otherSeg.b.y && edgeSeg.b.x === otherSeg.a.x && edgeSeg.b.y === otherSeg.a.y
+                )
+              );
+              if (isShared) {
+                isTouching = true;
+                break;
+              }
+            }
+            if (isTouching) break;
+          }
+          if (isTouching) break;
+        }
+        if (isTouching) break;
+      }
+    }
+    hiddenEdges.push(isTouching);
+  }
+  return hiddenEdges;
+}
+function shouldUseSelectiveBorders(blueprintId) {
+  return (CONFIG.game.hideTouchingBorders);
+}
+
+function pathD(poly) {
+  return `M ${poly.map((pt) => `${pt.x} ${pt.y}`).join(" L ")} Z`;
+}
+function BoardView(props) {
+  const {
+    controller,
+    layout,
+    viewBox,
+    width,
+    height,
+    badgeR,
+    badgeCenter,
+    placedSilBySector,
+    anchorDots,
+    pieces,
+    clickMode,
+    draggingId,
+    selectedPieceId,
+    dragInvalid,
+    lockedPieceId,
+    svgRef,
+    setPieceRef,
+    onPiecePointerDown,
+    onBlueprintPointerDown,
+    onRootPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onCenterBadgePointerDown
+  } = props;
+  const VW = viewBox.w, VH = viewBox.h;
+  const centerView = controller.state.blueprintView;
+  const bps = centerView === "primitives" ? controller.state.primitives : controller.state.quickstash;
+  const QS_SLOTS = controller.state.cfg.maxQuickstashSlots;
+  const PRIM_SLOTS = controller.state.primitives.length;
+  const slotsForView = centerView === "primitives" ? Math.max(1, PRIM_SLOTS) : Math.max(1, QS_SLOTS);
+  const sweep = layout.mode === "circle" ? Math.PI * 2 : Math.PI;
+  const delta = sweep / slotsForView;
+  const start = layout.mode === "circle" ? -Math.PI / 2 : Math.PI;
+  const blueprintTheta = (i) => start + (i + 0.5) * delta;
+  const anchorsDiameterToPx = (anchorsDiag, gridPx = CONFIG.layout.grid.stepPx) => anchorsDiag * Math.SQRT2 * gridPx;
+  const reqAnchors = centerView === "primitives" ? CONFIG.layout.constraints.primitiveDiamAnchors : CONFIG.layout.constraints.quickstashDiamAnchors;
+  const D_slot = anchorsDiameterToPx(reqAnchors);
+  const R_needed = D_slot / (2 * Math.max(1e-9, Math.sin(delta / 2)));
+  const R_min = badgeR + CONFIG.size.centerBadge.marginPx + D_slot / 2;
+  const ringMax = layout.innerR - (badgeR + CONFIG.size.centerBadge.marginPx);
+  const blueprintRingR = Math.min(Math.max(R_needed, R_min), ringMax);
+  const renderBlueprintGlyph = (bp, bx, by) => {
+    const bb = boundsOfBlueprint(bp, (k) => controller.getPrimitive(k));
+    const cx = bb.min.x + bb.width / 2;
+    const cy = bb.min.y + bb.height / 2;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        key: bp.id,
+        transform: `translate(${bx}, ${by}) scale(1) translate(${-cx}, ${-cy})`
+      },
+      ("shape" in bp ? bp.shape : []).map((poly, idx) => /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          key: idx,
+          d: pathD(poly),
+          fill: CONFIG.color.blueprint.fill,
+          opacity: CONFIG.opacity.blueprint,
+          stroke: "none",
+          strokeWidth: 0,
+          pointerEvents: "visiblePainted",
+          style: { cursor: "pointer" },
+          onPointerDown: (e) => onBlueprintPointerDown(e, bp, { bx, by, cx, cy })
+        }
+      ))
+    );
+  };
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      ref: svgRef,
+      width,
+      height,
+      viewBox: `0 0 ${VW} ${VH}`,
+      preserveAspectRatio: "xMidYMid meet",
+      onPointerMove,
+      onPointerUp,
+      onPointerDown: (e) => {
+        onRootPointerDown(e);
+      },
+      style: { background: "#fff", touchAction: "none", userSelect: "none" }
+    },
+    layout.sectors.map((s, i) => {
+      const done = !!controller.state.sectors[s.id].completedAt;
+      const baseSil = i % 2 ? CONFIG.color.bands.silhouette.fillOdd : CONFIG.color.bands.silhouette.fillEven;
+      const baseWork = i % 2 ? CONFIG.color.bands.workspace.fillOdd : CONFIG.color.bands.workspace.fillEven;
+      const sil = layout.bands.silhouette;
+      const work = layout.bands.workspace;
+      return /* @__PURE__ */ React.createElement("g", { key: `bands-${s.id}` }, controller.state.cfg.target === "workspace" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("path", { d: wedgePath(layout.cx, layout.cy, sil[0], sil[1], s.start, s.end), fill: baseSil, stroke: CONFIG.color.bands.silhouette.stroke, strokeWidth: CONFIG.size.stroke.bandPx, pointerEvents: "none" }), /* @__PURE__ */ React.createElement("path", { d: wedgePath(layout.cx, layout.cy, work[0], work[1], s.start, s.end), fill: done ? CONFIG.color.completion.fill : baseWork, stroke: done ? CONFIG.color.completion.stroke : CONFIG.color.bands.workspace.stroke, strokeWidth: CONFIG.size.stroke.bandPx, pointerEvents: "none" })) : /* @__PURE__ */ React.createElement("path", { d: wedgePath(layout.cx, layout.cy, sil[0], sil[1], s.start, s.end), fill: done ? CONFIG.color.completion.fill : baseSil, stroke: done ? CONFIG.color.completion.stroke : CONFIG.color.bands.silhouette.stroke, strokeWidth: CONFIG.size.stroke.bandPx, pointerEvents: "none" }));
+    }),
+    pieces.sort((a, b) => {
+      if (draggingId === a.id) return 1;
+      if (draggingId === b.id) return -1;
+      return 0;
+    }).map((p) => {
+      const bp = controller.getBlueprint(p.blueprintId);
+      const bb = boundsOfBlueprint(bp, (k) => controller.getPrimitive(k));
+      const isDragging = draggingId === p.id;
+      const locked = p.sectorId && controller.isSectorCompleted(p.sectorId);
+      const isConnectivityLocked = lockedPieceId === p.id;
+      const isSelected = selectedPieceId === p.id;
+      const isCarriedInvalid = isDragging && dragInvalid;
+      const translateX = p.x - bb.min.x;
+      const translateY = p.y - bb.min.y;
+      return /* @__PURE__ */ React.createElement("g", { key: p.id, ref: setPieceRef(p.id), transform: `translate(${translateX}, ${translateY})`, style: { cursor: locked ? "default" : clickMode ? "pointer" : "grab" }, pointerEvents: clickMode && isDragging ? "none" : "auto" }, ("shape" in bp ? bp.shape : []).map((poly, idx) => {
+        shouldUseSelectiveBorders(p.blueprintId);
+        return /* @__PURE__ */ React.createElement(React.Fragment, { key: idx }, /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            d: pathD(poly),
+            fill: isConnectivityLocked ? CONFIG.color.piece.invalidFill : isCarriedInvalid ? CONFIG.color.piece.invalidFill : isDragging ? CONFIG.color.piece.draggingFill : CONFIG.color.piece.validFill,
+            opacity: isConnectivityLocked ? CONFIG.opacity.piece.invalid : isCarriedInvalid ? CONFIG.opacity.piece.invalid : isDragging ? CONFIG.opacity.piece.dragging : locked ? CONFIG.opacity.piece.locked : CONFIG.opacity.piece.normal,
+            stroke: "none",
+            onPointerDown: (e) => onPiecePointerDown(e, p)
+          }
+        ), ((
+          // For pieces with selective borders: render individual edge strokes with edge detection
+          (() => {
+            const allPiecesInSector = pieces.filter((piece) => piece.sectorId === p.sectorId);
+            const pieceAsPiece = { ...p, pos: { x: p.x, y: p.y } };
+            const allPiecesAsPieces = allPiecesInSector.map((piece) => ({ ...piece, pos: { x: piece.x, y: piece.y } }));
+            const hiddenEdges = getHiddenEdgesForPolygon(pieceAsPiece, idx, allPiecesAsPieces, (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind));
+            const draggedPiece = draggingId ? allPiecesInSector.find((piece) => piece.id === draggingId) : null;
+            let wasTouchingDraggedPiece;
+            if (p.blueprintId.startsWith("comp:")) {
+              const internalHiddenEdges = getHiddenEdgesForPolygon(pieceAsPiece, idx, [], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind));
+              const externalHiddenEdges = draggedPiece ? getHiddenEdgesForPolygon(pieceAsPiece, idx, [{ ...draggedPiece, pos: { x: draggedPiece.x, y: draggedPiece.y } }], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind)) : new Array(hiddenEdges.length).fill(false);
+              wasTouchingDraggedPiece = externalHiddenEdges.map((external, i) => external && !internalHiddenEdges[i]);
+            } else {
+              wasTouchingDraggedPiece = draggedPiece ? getHiddenEdgesForPolygon(pieceAsPiece, idx, [{ ...draggedPiece, pos: { x: draggedPiece.x, y: draggedPiece.y } }], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind)) : new Array(hiddenEdges.length).fill(false);
+            }
+            return generateEdgeStrokePaths(poly).map((strokePath, strokeIdx) => {
+              const wasHiddenDueToDraggedPiece = wasTouchingDraggedPiece[strokeIdx] || false;
+              let isHidden;
+              if (isDragging && p.blueprintId.startsWith("comp:")) {
+                const internalHiddenEdges = getHiddenEdgesForPolygon(pieceAsPiece, idx, [], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind));
+                isHidden = internalHiddenEdges[strokeIdx] || false;
+              } else {
+                isHidden = isDragging ? false : (hiddenEdges[strokeIdx] || false) && !wasHiddenDueToDraggedPiece;
+              }
+              return /* @__PURE__ */ React.createElement(
+                "path",
+                {
+                  key: `stroke-${idx}-${strokeIdx}`,
+                  d: strokePath,
+                  fill: "none",
+                  stroke: isHidden ? "none" : isConnectivityLocked ? CONFIG.color.piece.invalidStroke : isCarriedInvalid ? CONFIG.color.piece.invalidStroke : isSelected || isDragging ? CONFIG.color.piece.selectedStroke : CONFIG.color.piece.borderStroke,
+                  strokeWidth: isHidden ? 0 : isSelected || isDragging ? CONFIG.size.stroke.pieceSelectedPx : CONFIG.size.stroke.pieceBorderPx,
+                  onPointerDown: (e) => onPiecePointerDown(e, p)
+                }
+              );
+            });
+          })()
+        ) ));
+      }));
+    }),
+    layout.sectors.map((s) => {
+      const placedPolys = placedSilBySector.get(s.id) ?? [];
+      if (!placedPolys.length) return null;
+      return /* @__PURE__ */ React.createElement("g", { key: `sil-${s.id}`, pointerEvents: "none" }, placedPolys.map((poly, i) => /* @__PURE__ */ React.createElement("path", { key: i, d: pathD(poly), fill: CONFIG.color.silhouetteMask, opacity: CONFIG.opacity.silhouetteMask })));
+    }),
+    anchorDots.map(({ sectorId, valid, invalid }) => {
+      const isInnerRing = sectorId === "inner-ring";
+      return /* @__PURE__ */ React.createElement("g", { key: `anchors-${sectorId}`, pointerEvents: "none" }, invalid.map((p, i) => /* @__PURE__ */ React.createElement("circle", { key: `inv-${i}`, cx: p.x, cy: p.y, r: CONFIG.size.anchorRadiusPx.invalid, fill: CONFIG.color.anchors.invalid, opacity: CONFIG.opacity.anchors.invalid })), valid.map((p, i) => /* @__PURE__ */ React.createElement(
+        "circle",
+        {
+          key: `val-${i}`,
+          cx: p.x,
+          cy: p.y,
+          r: isInnerRing ? CONFIG.size.anchorRadiusPx.invalid : CONFIG.size.anchorRadiusPx.valid,
+          fill: isInnerRing ? CONFIG.color.anchors.invalid : CONFIG.color.anchors.valid,
+          opacity: isInnerRing ? CONFIG.opacity.anchors.invalid : CONFIG.opacity.anchors.valid
+        }
+      )));
+    }),
+    (() => {
+      const isPrep = controller.state.cfg.mode === "prep";
+      const isSubmitEnabled = isPrep ? controller.isSubmitEnabled() : true;
+      const isClickable = !draggingId && (!isPrep || isSubmitEnabled);
+      return /* @__PURE__ */ React.createElement(
+        "g",
+        {
+          transform: `translate(${badgeCenter.x}, ${badgeCenter.y})`,
+          style: { cursor: isClickable ? "pointer" : "default" },
+          onPointerDown: isClickable ? onCenterBadgePointerDown : void 0
+        },
+        /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            r: badgeR,
+            fill: isSubmitEnabled ? CONFIG.color.blueprint.badgeFill : "#ccc",
+            opacity: isSubmitEnabled ? 1 : 0.5
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "text",
+          {
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            fontSize: CONFIG.size.badgeFontPx,
+            fill: isSubmitEnabled ? CONFIG.color.blueprint.labelFill : "#888",
+            pointerEvents: "none"
+          },
+          isPrep ? "Submit" : controller.state.blueprintView
+        )
+      );
+    })(),
+    bps.map((bp, i) => {
+      const theta = blueprintTheta(i);
+      const bx = layout.cx + blueprintRingR * Math.cos(theta);
+      const by = layout.cy + blueprintRingR * Math.sin(theta);
+      return renderBlueprintGlyph(bp, bx, by);
+    }),
+    controller.state.endedAt && /* @__PURE__ */ React.createElement("g", { pointerEvents: "none" }, /* @__PURE__ */ React.createElement("circle", { cx: layout.cx, cy: layout.cy, r: layout.outerR - 3, fill: "none", stroke: CONFIG.color.piece.allGreenStroke, strokeWidth: CONFIG.size.stroke.allGreenStrokePx, opacity: 0 }, /* @__PURE__ */ React.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "160ms", fill: "freeze" }), /* @__PURE__ */ React.createElement("animate", { attributeName: "opacity", from: "1", to: "0", begin: "560ms", dur: "520ms", fill: "freeze" })))
+  );
+}
+
+function aabb(polys) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const poly of polys) for (const p of poly) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  return { minX, minY, maxX, maxY };
+}
+function cellCentersInAABB(minX, minY, maxX, maxY) {
+  const GRID_PX = CONFIG.layout.grid.stepPx;
+  const x0 = Math.floor((minX - GRID_PX / 2) / GRID_PX) * GRID_PX + GRID_PX / 2;
+  const y0 = Math.floor((minY - GRID_PX / 2) / GRID_PX) * GRID_PX + GRID_PX / 2;
+  const out = [];
+  for (let y = y0; y <= maxY; y += GRID_PX) {
+    for (let x = x0; x <= maxX; x += GRID_PX) out.push({ x, y });
+  }
+  return out;
+}
+function cellSetForPolys(polys) {
+  if (!polys.length) return /* @__PURE__ */ new Set();
+  const { minX, minY, maxX, maxY } = aabb(polys);
+  const centers = cellCentersInAABB(minX, minY, maxX, maxY);
+  const key = (p) => `${p.x},${p.y}`;
+  const S = /* @__PURE__ */ new Set();
+  center: for (const c of centers) {
+    for (const poly of polys) {
+      if (pointInPolygon(c, poly)) {
+        S.add(key(c));
+        continue center;
+      }
+    }
+  }
+  return S;
+}
+function anchorsSilhouetteComplete(silPolys, piecePolys) {
+  if (!silPolys.length) return false;
+  const S = cellSetForPolys(silPolys);
+  if (S.size === 0) return false;
+  const P = cellSetForPolys(piecePolys);
+  if (P.size === 0) return false;
+  for (const k of S) if (!P.has(k)) return false;
+  return true;
+}
+function stringSetToVecs(S) {
+  const out = [];
+  for (const k of S) {
+    const [xs, ys] = k.split(",");
+    out.push({ x: Number(xs), y: Number(ys) });
+  }
+  return out;
+}
+function normalizeCells(S) {
+  if (S.size === 0) return S;
+  const pts = stringSetToVecs(S);
+  let minX = Infinity, minY = Infinity;
+  for (const p of pts) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+  }
+  const N = /* @__PURE__ */ new Set();
+  for (const p of pts) N.add(`${p.x - minX},${p.y - minY}`);
+  return N;
+}
+function setsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  for (const k of a) if (!b.has(k)) return false;
+  return true;
+}
+function anchorsWorkspaceComplete(silPolys, piecePolys) {
+  if (!silPolys.length) return false;
+  const Sraw = cellSetForPolys(silPolys);
+  const Praw = cellSetForPolys(piecePolys);
+  if (Sraw.size === 0 || Praw.size === 0) return false;
+  const S = normalizeCells(Sraw);
+  const P = normalizeCells(Praw);
+  return setsEqual(S, P);
+}
+
+function blueprintLocalFromWorld(px, py, bpGeom) {
+  return { x: px - bpGeom.bx + bpGeom.cx, y: py - bpGeom.by + bpGeom.cy };
+}
+function scalePolys(polys, S) {
+  if (!polys || polys.length === 0) return [];
+  return polys.map((poly) => poly.map((p) => ({ x: S * p.x, y: S * p.y })));
+}
+
+function usePieceState(controller) {
+  const pieces = React.useMemo(() => {
+    const out = [];
+    for (const s of Object.values(controller.state.sectors)) {
+      for (const p of s.pieces) {
+        out.push({
+          id: p.id,
+          blueprintId: p.blueprintId,
+          x: p.pos.x,
+          y: p.pos.y,
+          sectorId: s.sectorId
+        });
+      }
+    }
+    const floating = controller._floating;
+    if (floating?.pieces) {
+      for (const p of floating.pieces) {
+        out.push({
+          id: p.id,
+          blueprintId: p.blueprintId,
+          x: p.pos.x,
+          y: p.pos.y
+        });
+      }
+    }
+    return out;
+  }, [controller.state.sectors, controller._floating, controller.updateCount]);
+  const pieceById = React.useCallback(
+    (id) => id ? pieces.find((p) => p.id === id) ?? null : null,
+    [pieces]
+  );
+  const sectorPiecePolysLive = React.useCallback(
+    (sectorId) => {
+      const out = [];
+      const ss = controller.state.sectors[sectorId];
+      if (!ss) return out;
+      for (const p of ss.pieces) {
+        const bp = controller.getBlueprint(p.blueprintId);
+        const bb = boundsOfBlueprint(bp, controller.getPrimitive);
+        out.push(...piecePolysAt(bp, bb, { x: p.pos.x, y: p.pos.y }));
+      }
+      return out;
+    },
+    [controller]
+  );
+  const polyCacheRef = React.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const sectorSignature = React.useCallback(
+    (sectorId) => {
+      const ss = controller.state.sectors[sectorId];
+      if (!ss) return "";
+      const parts = ss.pieces.slice().sort((a, b) => a.id < b.id ? -1 : 1).map((p) => `${p.id}@${p.pos.x},${p.pos.y}`);
+      return parts.join("|");
+    },
+    [controller.state.sectors]
+  );
+  const getSectorPiecePolysCached = React.useCallback(
+    (sectorId) => {
+      const sig = sectorSignature(sectorId);
+      const hit = polyCacheRef.current.get(sectorId);
+      if (hit && hit.sig === sig) return hit.polys;
+      const polys = sectorPiecePolysLive(sectorId);
+      polyCacheRef.current.set(sectorId, { sig, polys });
+      return polys;
+    },
+    [sectorSignature, sectorPiecePolysLive]
+  );
+  return {
+    pieces,
+    pieceById,
+    sectorPiecePolysLive,
+    getSectorPiecePolysCached
+  };
+}
+
+class GridSnapper {
+  constructor(config) {
+    this.config = config;
+  }
+  // ===== Reference Vertex Management =====
+  /**
+   * Choose a reference vertex (v0 of first poly) for snapping.
+   * Consolidated from both anchors.ts and anchors-mode.ts
+   */
+  referenceVertex(bp) {
+    const poly = "shape" in bp && bp.shape?.[0] ? bp.shape[0] : [{ x: 0, y: 0 }];
+    return poly[0] ?? { x: 0, y: 0 };
+  }
+  // ===== Snapping Operations =====
+  /**
+   * Perform nearest-node snapping with configurable snap radius
+   * Consolidated from both files with enhanced configuration
+   */
+  nearestNodeSnap(tl, bp, primitiveLookup, nodes) {
+    if (!nodes.length) {
+      return { tl, node: null, dist: Infinity, accepted: false };
+    }
+    const bb = boundsOfBlueprint(bp, primitiveLookup);
+    const v0 = this.referenceVertex(bp);
+    const v0World = { x: tl.x + (v0.x - bb.min.x), y: tl.y + (v0.y - bb.min.y) };
+    let best = null;
+    let bestD2 = Infinity;
+    for (const n of nodes) {
+      const dx = n.x - v0World.x;
+      const dy = n.y - v0World.y;
+      const d2 = dx * dx + dy * dy;
+      if (d2 < bestD2) {
+        bestD2 = d2;
+        best = n;
+      }
+    }
+    const distance = Math.sqrt(bestD2);
+    const accepted = distance <= this.config.snapRadiusPx;
+    const snapped = best && accepted ? { x: tl.x + (best.x - v0World.x), y: tl.y + (best.y - v0World.y) } : tl;
+    return {
+      tl: snapped,
+      node: best,
+      dist: distance,
+      accepted
+    };
+  }
+  /**
+   * Back-compatibility shim for existing Board.tsx usage
+   */
+  snapTopLeftToNodes(tl, bp, primitiveLookup, nodes) {
+    const { tl: snapped } = this.nearestNodeSnap(tl, bp, primitiveLookup, nodes);
+    return snapped;
+  }
+  // ===== Node Generation =====
+  /**
+   * Generate workspace-band grid nodes for a sector
+   * Extracted from anchors-mode.ts
+   */
+  generateWorkspaceNodes(layout, sector) {
+    const pad = 6;
+    const min = { x: layout.cx - layout.outerR, y: layout.cy - layout.outerR - pad };
+    const max = { x: layout.cx + layout.outerR, y: layout.cy + layout.outerR + pad };
+    const nodes = gridNodesInAABB(min, max);
+    return filterNodesToBandAndSector(nodes, layout, "workspace", sector);
+  }
+  /**
+   * Generate silhouette-mask nodes for a sector
+   * Extracted from anchors-mode.ts
+   */
+  generateSilhouetteNodes(layout, sector, fittedMask) {
+    const pad = 6;
+    const min = { x: layout.cx - layout.outerR, y: layout.cy - layout.outerR - pad };
+    const max = { x: layout.cx + layout.outerR, y: layout.cy + layout.outerR + pad };
+    const nodes = gridNodesInAABB(min, max);
+    const banded = filterNodesToBandAndSector(nodes, layout, "silhouette", sector);
+    return filterNodesInPolys(banded, fittedMask, pointInPolygon);
+  }
+  /**
+   * Generate silhouette-band nodes for a sector (no mask filter)
+   * Extracted from anchors-mode.ts
+   */
+  generateSilhouetteBandNodes(layout, sector) {
+    const pad = 6;
+    const min = { x: layout.cx - layout.outerR, y: layout.cy - layout.outerR - pad };
+    const max = { x: layout.cx + layout.outerR, y: layout.cy + layout.outerR + pad };
+    const nodes = gridNodesInAABB(min, max);
+    return filterNodesToBandAndSector(nodes, layout, "silhouette", sector);
+  }
+  // ===== Validation Helpers =====
+  /**
+   * Check if point lies inside any silhouette polygon (union semantics)
+   * Private helper used by polyFullyInside
+   */
+  insideAnySilhouette(pt, silPolys) {
+    for (const sp of silPolys) {
+      if (pointInPolygon(pt, sp)) return true;
+    }
+    return false;
+  }
+  /**
+   * Robust "fully inside" check with configurable sampling density
+   * Consolidated from both files with enhanced configuration
+   */
+  polyFullyInside(piecePolys, silhouettePolys, customStep) {
+    if (!piecePolys.length) return true;
+    if (!silhouettePolys.length) return false;
+    const step = customStep ?? this.config.densitySampleStepPx ?? Math.max(1, Math.round(CONFIG.layout.grid.stepPx / 3));
+    for (const poly of piecePolys) {
+      if (poly.length < 2) continue;
+      for (let i = 0; i < poly.length; i++) {
+        const a = poly[i];
+        const b = poly[(i + 1) % poly.length];
+        if (!a || !b) continue;
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const len = Math.hypot(dx, dy);
+        const n = Math.max(1, Math.ceil(len / step));
+        for (let k = 0; k <= n; k++) {
+          const t = k / n;
+          const p = { x: a.x + t * dx, y: a.y + t * dy };
+          if (!this.insideAnySilhouette(p, silhouettePolys)) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+}
+function createDefaultGridSnapper() {
+  return new GridSnapper({
+    stepPx: CONFIG.layout.grid.stepPx,
+    snapRadiusPx: CONFIG.game.snapRadiusPx,
+    densitySampleStepPx: Math.max(1, Math.round(CONFIG.layout.grid.stepPx / 3))
+  });
+}
+const defaultGridSnapper = createDefaultGridSnapper();
+function nearestNodeSnap(tl, bp, primitiveLookup, nodes) {
+  const result = defaultGridSnapper.nearestNodeSnap(tl, bp, primitiveLookup, nodes);
+  return { tl: result.tl, node: result.node, dist: result.dist };
+}
+function polyFullyInside(piecePolys, silhouettePolys, step) {
+  return defaultGridSnapper.polyFullyInside(piecePolys, silhouettePolys, step);
+}
+function workspaceNodes(layout, sector) {
+  return defaultGridSnapper.generateWorkspaceNodes(layout, sector);
+}
+function silhouetteNodes(layout, sector, fittedMask) {
+  return defaultGridSnapper.generateSilhouetteNodes(layout, sector, fittedMask);
+}
+function silhouetteBandNodes(layout, sector) {
+  return defaultGridSnapper.generateSilhouetteBandNodes(layout, sector);
+}
+
+function useAnchorGrid(controller, layout, scaleS) {
+  const cfg = controller.state.cfg;
+  const anchorDots = React.useMemo(() => {
+    const out = [];
+    out.push({ sectorId: "inner-ring", valid: innerRingNodes(layout), invalid: [] });
+    for (const s of layout.sectors) {
+      if (cfg.target === "workspace") {
+        out.push({ sectorId: s.id, valid: workspaceNodes(layout, s), invalid: [] });
+      } else {
+        const mask = controller.state.cfg.sectors.find((ss) => ss.id === s.id)?.silhouette.mask ?? [];
+        if (!mask || mask.length === 0) continue;
+        const rect = rectForBand(layout, s, "silhouette", 1);
+        const placedPolys = placeSilhouetteGridAlignedAsPolys(mask, scaleS, { cx: rect.cx, cy: rect.cy });
+        const bandAll = silhouetteBandNodes(layout, s);
+        const valid = silhouetteNodes(layout, s, placedPolys);
+        const key = (p) => `${p.x},${p.y}`;
+        const validSet = new Set(valid.map(key));
+        const invalid = bandAll.filter((p) => !validSet.has(key(p)));
+        out.push({ sectorId: s.id, valid, invalid });
+      }
+    }
+    return out;
+  }, [cfg.target, controller.state.sectors, layout, scaleS]);
+  return {
+    anchorDots
+  };
+}
+
+function edgeToUnitSegments(start, end, gridSize) {
+  const segments = [];
+  const startGrid = {
+    x: Math.round(start.x / gridSize),
+    y: Math.round(start.y / gridSize)
+  };
+  const endGrid = {
+    x: Math.round(end.x / gridSize),
+    y: Math.round(end.y / gridSize)
+  };
+  const dx = endGrid.x - startGrid.x;
+  const dy = endGrid.y - startGrid.y;
+  if (dx === 0 && dy === 0) return [];
+  const steps = Math.max(Math.abs(dx), Math.abs(dy));
+  const stepX = dx / steps;
+  const stepY = dy / steps;
+  for (let i = 0; i < steps; i++) {
+    const aX = Math.round(startGrid.x + i * stepX);
+    const aY = Math.round(startGrid.y + i * stepY);
+    const bX = Math.round(startGrid.x + (i + 1) * stepX);
+    const bY = Math.round(startGrid.y + (i + 1) * stepY);
+    segments.push({
+      a: { x: aX, y: aY },
+      b: { x: bX, y: bY }
+    });
+  }
+  return segments;
+}
+function getPieceUnitSegments(piece, getBlueprint, getPrimitive, gridSize) {
+  const blueprint = getBlueprint(piece.blueprintId);
+  if (!blueprint?.shape) return [];
+  const bb = boundsOfBlueprint(blueprint, getPrimitive);
+  const ox = piece.pos.x - bb.min.x;
+  const oy = piece.pos.y - bb.min.y;
+  const allSegments = [];
+  for (const poly of blueprint.shape) {
+    const translatedPoly = poly.map((vertex) => ({
+      x: vertex.x + ox,
+      y: vertex.y + oy
+    }));
+    for (let i = 0; i < translatedPoly.length; i++) {
+      const current = translatedPoly[i];
+      const next = translatedPoly[(i + 1) % translatedPoly.length];
+      if (!current || !next) continue;
+      allSegments.push(...edgeToUnitSegments(current, next, gridSize));
+    }
+  }
+  return allSegments;
+}
+function checkFaceToFaceAttachment(piece, existingPieces, getBlueprint, getPrimitive) {
+  if (existingPieces.length === 0) {
+    return { isAttached: true, attachedPieceIds: [], sharedEdgeLength: 0 };
+  }
+  const gridSize = CONFIG.layout.grid.stepPx;
+  const newPieceSegments = getPieceUnitSegments(piece, getBlueprint, getPrimitive, gridSize);
+  if (newPieceSegments.length === 0) {
+    return { isAttached: false, attachedPieceIds: [], sharedEdgeLength: 0 };
+  }
+  let totalSharedLength = 0;
+  const attachedPieceIds = [];
+  for (const existingPiece of existingPieces) {
+    const existingSegments = getPieceUnitSegments(existingPiece, getBlueprint, getPrimitive, gridSize);
+    const sharedSegments = newPieceSegments.filter(
+      (newSeg) => existingSegments.some(
+        (existingSeg) => (
+          // Check if segments share the same endpoints (identical or reversed)
+          newSeg.a.x === existingSeg.a.x && newSeg.a.y === existingSeg.a.y && newSeg.b.x === existingSeg.b.x && newSeg.b.y === existingSeg.b.y || newSeg.a.x === existingSeg.b.x && newSeg.a.y === existingSeg.b.y && newSeg.b.x === existingSeg.a.x && newSeg.b.y === existingSeg.a.y
+        )
+      )
+    );
+    if (sharedSegments.length > 0) {
+      totalSharedLength += sharedSegments.length;
+      attachedPieceIds.push(existingPiece.id);
+    }
+  }
+  return {
+    isAttached: totalSharedLength >= 1,
+    attachedPieceIds,
+    sharedEdgeLength: totalSharedLength
+  };
+}
+function wouldRemovalDisconnectSector(pieceToRemove, allPiecesInSector, getBlueprint, getPrimitive) {
+  if (allPiecesInSector.length <= 2) return false;
+  const remainingPieces = allPiecesInSector.filter((p) => p.id !== pieceToRemove.id);
+  if (remainingPieces.length <= 1) return false;
+  const adjacencyMap = /* @__PURE__ */ new Map();
+  for (const piece of remainingPieces) {
+    adjacencyMap.set(piece.id, []);
+  }
+  for (let i = 0; i < remainingPieces.length; i++) {
+    for (let j = i + 1; j < remainingPieces.length; j++) {
+      const piece1 = remainingPieces[i];
+      const piece2 = remainingPieces[j];
+      if (!piece1 || !piece2) continue;
+      const result = checkFaceToFaceAttachment(piece1, [piece2], getBlueprint, getPrimitive);
+      if (result.isAttached) {
+        adjacencyMap.get(piece1.id).push(piece2.id);
+        adjacencyMap.get(piece2.id).push(piece1.id);
+      }
+    }
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const startPiece = remainingPieces[0];
+  if (!startPiece) return false;
+  function dfs(pieceId) {
+    if (visited.has(pieceId)) return;
+    visited.add(pieceId);
+    const neighbors = adjacencyMap.get(pieceId) || [];
+    for (const neighborId of neighbors) {
+      dfs(neighborId);
+    }
+  }
+  dfs(startPiece.id);
+  return visited.size !== remainingPieces.length;
+}
+
+function useDragController(controller, layout, pieces, pieceById, anchorDots, placedSilBySector, isSectorLocked, maybeCompleteSector, force, clickController, tracker) {
+  const cfg = controller.state.cfg;
+  const clickMode = cfg.input === "click";
+  const svgRef = React.useRef(null);
+  const dragRef = React.useRef(null);
+  const [draggingId, setDraggingId] = React.useState(null);
+  const elMap = React.useRef(/* @__PURE__ */ new Map());
+  const [lockedPieceId, setLockedPieceId] = React.useState(null);
+  React.useEffect(() => {
+    if (draggingId === null) {
+      dragRef.current = null;
+    }
+  }, [draggingId]);
+  const setPieceRef = (id) => (el) => {
+    const m = elMap.current;
+    if (el) m.set(id, el);
+    else m.delete(id);
+  };
+  const svgPoint = (clientX, clientY) => {
+    const svg = svgRef.current;
+    const pt = svg.createSVGPoint();
+    pt.x = clientX;
+    pt.y = clientY;
+    const ctm = svg.getScreenCTM();
+    if (!ctm) return { x: 0, y: 0 };
+    const sp = pt.matrixTransform(ctm.inverse());
+    return { x: sp.x, y: sp.y };
+  };
+  const scheduleFrame = () => {
+    if (!dragRef.current) return;
+    const d = dragRef.current;
+    if (d.raf != null) return;
+    d.raf = requestAnimationFrame(() => {
+      d.raf = null;
+      const g = elMap.current.get(d.id);
+      if (g) g.setAttribute("transform", `translate(${d.tlx - d.minx}, ${d.tly - d.miny})`);
+    });
+  };
+  const sectorIdAt = (x, y) => sectorAtPoint(x, y, layout, cfg.target);
+  const GRID_STEP = CONFIG.layout.grid.stepPx;
+  const anchorIdFromNode = (node) => {
+    if (!node) return null;
+    const ax = Math.round(node.x / GRID_STEP);
+    const ay = Math.round(node.y / GRID_STEP);
+    return `${ax},${ay}`;
+  };
+  const anchorNodeFromPoint = (point) => ({
+    x: Math.round(point.x / GRID_STEP) * GRID_STEP,
+    y: Math.round(point.y / GRID_STEP) * GRID_STEP
+  });
+  const updatePointerAnchor = (point, sectorId) => {
+    if (!dragRef.current) return;
+    const d = dragRef.current;
+    const anchorNode = anchorNodeFromPoint(point);
+    const anchorId = anchorIdFromNode(anchorNode);
+    if (tracker?.recordMouseMove && (anchorId !== d.pointerAnchorId || sectorId !== d.pointerAnchorSectorId)) {
+      tracker.recordMouseMove(anchorNode.x, anchorNode.y, sectorId);
+    }
+    d.pointerAnchor = anchorNode;
+    d.pointerAnchorId = anchorId;
+    d.pointerAnchorSectorId = sectorId;
+  };
+  const updateSnapAnchor = (node, sectorId, dist) => {
+    if (!dragRef.current) return;
+    const d = dragRef.current;
+    d.snapAnchor = node;
+    d.snapAnchorId = anchorIdFromNode(node);
+    d.snapAnchorSectorId = sectorId;
+    d.snapAnchorDist = node && dist !== void 0 ? dist : null;
+  };
+  const emitClickEvent = (location, clickType, metadata) => {
+    if (!tracker?.recordClickEvent) return;
+    tracker.recordClickEvent(location, clickType, metadata);
+  };
+  const getPieceVertices = (pieceId) => {
+    const piece = controller.findPiece(pieceId);
+    if (!piece) return [];
+    const bp = controller.getBlueprint(piece.blueprintId);
+    if (!bp) return [];
+    const bb = boundsOfBlueprint(bp, controller.getPrimitive);
+    const polys = piecePolysAt(bp, bb, piece.pos);
+    return polys.map((ring) => ring.map((pt) => [pt.x, pt.y]));
+  };
+  const onPiecePointerDown = (e, p) => {
+    if (p.sectorId && isSectorLocked(p.sectorId)) return;
+    if (clickMode && draggingId) return;
+    if (cfg.mode === "prep" && p.sectorId) {
+      const allPiecesInSector = controller.getPiecesInSector(p.sectorId);
+      const pieceToRemove = controller.findPiece(p.id);
+      if (pieceToRemove && wouldRemovalDisconnectSector(
+        pieceToRemove,
+        allPiecesInSector,
+        (id) => controller.getBlueprint(id),
+        (kind) => controller.getPrimitive(kind)
+      )) {
+        setLockedPieceId(p.id);
+        setTimeout(() => setLockedPieceId(null), 500);
+        return;
+      }
+    }
+    if (clickMode) {
+      e.stopPropagation();
+      const bp2 = controller.getBlueprint(p.blueprintId);
+      const bb2 = boundsOfBlueprint(bp2, (k) => controller.getPrimitive(k));
+      const support2 = computeSupportOffsets(bp2, bb2);
+      const { x: x2, y: y2 } = svgPoint(e.clientX, e.clientY);
+      const pointerAnchorNode2 = anchorNodeFromPoint({ x: x2, y: y2 });
+      const pointerSector2 = p.sectorId;
+      if (tracker?.recordMouseMove) {
+        tracker.recordMouseMove(pointerAnchorNode2.x, pointerAnchorNode2.y, pointerSector2);
+      }
+      if (tracker) {
+        const blueprintType = "kind" in bp2 ? "primitive" : "composite";
+        tracker.recordPickup(
+          p.id,
+          p.blueprintId,
+          blueprintType,
+          "sector",
+          { x: p.x, y: p.y },
+          getPieceVertices(p.id),
+          p.sectorId
+        );
+      }
+      dragRef.current = {
+        id: p.id,
+        dx: x2 - p.x,
+        dy: y2 - p.y,
+        tlx: p.x,
+        tly: p.y,
+        aabb: { width: bb2.width, height: bb2.height },
+        minx: bb2.min.x,
+        miny: bb2.min.y,
+        support: support2,
+        fromIcon: false,
+        validSnap: true,
+        prevValidSnap: true,
+        raf: null,
+        originalPos: { x: p.x, y: p.y, sectorId: p.sectorId },
+        pointerAnchor: pointerAnchorNode2,
+        pointerAnchorId: anchorIdFromNode(pointerAnchorNode2),
+        pointerAnchorSectorId: pointerSector2,
+        snapAnchor: null,
+        snapAnchorId: null,
+        snapAnchorSectorId: void 0,
+        snapAnchorDist: null,
+        overlaps: false,
+        maxExceeded: false
+      };
+      updateSnapAnchor(null, p.sectorId);
+      setDraggingId(p.id);
+      force();
+      return;
+    }
+    svgRef.current?.setPointerCapture(e.pointerId);
+    const bp = controller.getBlueprint(p.blueprintId);
+    const bb = boundsOfBlueprint(bp, (k) => controller.getPrimitive(k));
+    const support = computeSupportOffsets(bp, bb);
+    const { x, y } = svgPoint(e.clientX, e.clientY);
+    const pointerAnchorNode = anchorNodeFromPoint({ x, y });
+    const pointerSector = p.sectorId;
+    if (tracker?.recordMouseMove) {
+      tracker.recordMouseMove(pointerAnchorNode.x, pointerAnchorNode.y, pointerSector);
+    }
+    if (tracker) {
+      const blueprintType = "kind" in bp ? "primitive" : "composite";
+      tracker.recordPickup(
+        p.id,
+        p.blueprintId,
+        blueprintType,
+        "sector",
+        { x: p.x, y: p.y },
+        getPieceVertices(p.id),
+        p.sectorId
+      );
+    }
+    dragRef.current = {
+      id: p.id,
+      dx: x - p.x,
+      dy: y - p.y,
+      tlx: p.x,
+      tly: p.y,
+      aabb: { width: bb.width, height: bb.height },
+      minx: bb.min.x,
+      miny: bb.min.y,
+      support,
+      fromIcon: false,
+      validSnap: true,
+      prevValidSnap: true,
+      raf: null,
+      originalPos: { x: p.x, y: p.y, sectorId: p.sectorId },
+      pointerAnchor: pointerAnchorNode,
+      pointerAnchorId: anchorIdFromNode(pointerAnchorNode),
+      pointerAnchorSectorId: pointerSector,
+      snapAnchor: null,
+      snapAnchorId: null,
+      snapAnchorSectorId: void 0,
+      snapAnchorDist: null,
+      overlaps: false,
+      maxExceeded: false
+    };
+    updateSnapAnchor(null, p.sectorId);
+    setDraggingId(p.id);
+    force();
+  };
+  const onPointerMove = (e) => {
+    const { x, y } = svgPoint(e.clientX, e.clientY);
+    const pointerAnchorNode = anchorNodeFromPoint({ x, y });
+    const pointerR = Math.hypot(x - layout.cx, y - layout.cy);
+    const pointerSectorId = pointerR < layout.innerR ? void 0 : sectorIdAt(x, y) ?? void 0;
+    if (!dragRef.current) {
+      if (tracker?.recordMouseMove) {
+        tracker.recordMouseMove(pointerAnchorNode.x, pointerAnchorNode.y, pointerSectorId);
+      }
+      return;
+    }
+    const d = dragRef.current;
+    const tlx = x - d.dx, tly = y - d.dy;
+    updatePointerAnchor({ x, y }, pointerSectorId);
+    const clamped = clampTopLeftBySupport(
+      tlx,
+      tly,
+      { aabb: d.aabb, support: d.support },
+      layout,
+      controller.state.cfg.target,
+      pointerR < layout.innerR
+    );
+    let tl = clamped;
+    const centerX = tl.x + d.aabb.width / 2;
+    const centerY = tl.y + d.aabb.height / 2;
+    const rFromCenter = Math.hypot(centerX - layout.cx, centerY - layout.cy);
+    const inInnerRing = rFromCenter < layout.innerR;
+    const secId = inInnerRing ? null : sectorIdAt(centerX, centerY);
+    let snapNode = null;
+    let snapDist = null;
+    let snapSectorId = secId ?? void 0;
+    let overlapsDetected = false;
+    let maxExceededDetected = false;
+    if (inInnerRing) {
+      const innerEntry = anchorDots.find((a) => a.sectorId === "inner-ring");
+      if (innerEntry && innerEntry.valid.length) {
+        const piece = pieceById(d.id);
+        if (piece) {
+          const bp = controller.getBlueprint(piece.blueprintId);
+          const snap = nearestNodeSnap(tl, bp, controller.getPrimitive, innerEntry.valid);
+          tl = snap.tl;
+          snapNode = snap.node;
+          snapDist = snap.dist;
+          snapSectorId = void 0;
+        }
+      }
+      d.validSnap = false;
+    } else if (secId) {
+      const isCompletedSector = isSectorLocked(secId);
+      const entry = anchorDots.find((a) => a.sectorId === secId);
+      const allNodes = cfg.target === "workspace" && cfg.mode !== "prep" ? entry?.valid ?? [] : [...entry?.valid ?? [], ...entry?.invalid ?? []];
+      if (allNodes.length) {
+        const piece = pieceById(d.id);
+        if (piece) {
+          const bp = controller.getBlueprint(piece.blueprintId);
+          const snap = nearestNodeSnap(
+            tl,
+            bp,
+            controller.getPrimitive,
+            allNodes
+          );
+          tl = snap.tl;
+          snapNode = snap.node;
+          snapDist = snap.dist;
+          snapSectorId = secId;
+          if (isCompletedSector) {
+            d.validSnap = false;
+          } else {
+            const radius = controller.state.cfg.snapRadiusPx;
+            const carried = pieceById(d.id);
+            let overlapsOk = true;
+            if (carried) {
+              const bpCar = controller.getBlueprint(carried.blueprintId);
+              const bbCar = boundsOfBlueprint(
+                bpCar,
+                controller.getPrimitive
+              );
+              const carriedPolys = piecePolysAt(bpCar, bbCar, tl);
+              const sameSector = pieces.filter(
+                (pp) => pp.id !== d.id && sectorIdAt(
+                  pp.x + boundsOfBlueprint(
+                    controller.getBlueprint(pp.blueprintId),
+                    controller.getPrimitive
+                  ).width / 2,
+                  pp.y + boundsOfBlueprint(
+                    controller.getBlueprint(pp.blueprintId),
+                    controller.getPrimitive
+                  ).height / 2
+                ) === secId
+              );
+              for (const other of sameSector) {
+                const bpO = controller.getBlueprint(other.blueprintId);
+                const bbO = boundsOfBlueprint(
+                  bpO,
+                  controller.getPrimitive
+                );
+                const otherPolys = piecePolysAt(bpO, bbO, { x: other.x, y: other.y });
+                if (polysOverlap(carriedPolys, otherPolys)) {
+                  overlapsOk = false;
+                  break;
+                }
+              }
+              if (cfg.target === "workspace") {
+                if (cfg.mode === "prep") {
+                  const allPiecesInSector = controller.getPiecesInSector(secId);
+                  const otherPiecesInSector = allPiecesInSector.filter((piece2) => piece2.id !== d.id);
+                  const isFirstPiece = otherPiecesInSector.length === 0;
+                  const storedPiece = controller.findPiece(d.id);
+                  const currentSectorId = storedPiece?.sectorId;
+                  const maxPieces = controller.state.cfg.maxCompositeSize ?? 0;
+                  const enforceMaxPieces = maxPieces > 0;
+                  const effectiveCount = allPiecesInSector.length - (currentSectorId === secId ? 1 : 0);
+                  const wouldExceedMax = enforceMaxPieces && effectiveCount + 1 > maxPieces;
+                  if (isFirstPiece) {
+                    d.validSnap = overlapsOk && !wouldExceedMax;
+                    maxExceededDetected = wouldExceedMax;
+                  } else if (storedPiece) {
+                    const pieceAtDragPosition = {
+                      ...storedPiece,
+                      pos: { x: tl.x, y: tl.y }
+                    };
+                    const attachmentResult = checkFaceToFaceAttachment(
+                      pieceAtDragPosition,
+                      otherPiecesInSector,
+                      (id) => controller.getBlueprint(id),
+                      (kind) => controller.getPrimitive(kind)
+                    );
+                    d.validSnap = overlapsOk && attachmentResult.isAttached && !wouldExceedMax;
+                    maxExceededDetected = wouldExceedMax;
+                  } else {
+                    d.validSnap = overlapsOk && !wouldExceedMax;
+                    maxExceededDetected = wouldExceedMax;
+                  }
+                } else {
+                  d.validSnap = overlapsOk;
+                  maxExceededDetected = false;
+                }
+                overlapsDetected = !overlapsOk;
+              } else {
+                const key = (p) => `${p.x},${p.y}`;
+                const validSet = new Set((entry?.valid ?? []).map(key));
+                const nodeOk = !!snap.node && validSet.has(key(snap.node)) && snap.dist <= (radius ?? 0);
+                let insideOk = false;
+                if (nodeOk) {
+                  const silPolys = placedSilBySector.get(secId) ?? [];
+                  insideOk = polyFullyInside(carriedPolys, silPolys);
+                }
+                d.validSnap = nodeOk && insideOk && overlapsOk;
+                overlapsDetected = !overlapsOk;
+              }
+            }
+          }
+        }
+      }
+    } else {
+      d.validSnap = controller.state.cfg.target === "workspace";
+      snapNode = null;
+      snapDist = null;
+      snapSectorId = void 0;
+      maxExceededDetected = false;
+    }
+    d.overlaps = overlapsDetected;
+    d.maxExceeded = maxExceededDetected;
+    updateSnapAnchor(snapNode, snapSectorId, snapDist ?? void 0);
+    d.tlx = tl.x;
+    d.tly = tl.y;
+    if (d.prevValidSnap !== d.validSnap) {
+      d.prevValidSnap = d.validSnap ?? false;
+      force();
+    }
+    scheduleFrame();
+  };
+  const onPointerUp = () => {
+    if (!dragRef.current) return;
+    if (clickMode) return;
+    const d = dragRef.current;
+    if (d.validSnap === false) {
+      const piece = controller.findPiece(d.id);
+      const cfg2 = controller.state.cfg;
+      const centerX2 = d.tlx + d.aabb.width / 2;
+      const centerY2 = d.tly + d.aabb.height / 2;
+      const attemptedSector = sectorIdAt(centerX2, centerY2);
+      let invalidReason = "outside_bounds";
+      if (d.maxExceeded) {
+        invalidReason = "no_valid_anchor";
+      } else if (d.overlaps) {
+        invalidReason = "overlapping";
+      } else if (attemptedSector) {
+        invalidReason = "no_valid_anchor";
+      }
+      emitClickEvent(
+        { x: centerX2, y: centerY2 },
+        "invalid_placement",
+        { invalidPlacement: { reason: invalidReason, attemptedSectorId: attemptedSector ?? void 0 } }
+      );
+      if (cfg2.mode === "prep" && d.originalPos) {
+        controller.move(d.id, { x: d.originalPos.x, y: d.originalPos.y });
+        if (tracker) {
+          tracker.recordPlacedown(
+            "placed",
+            d.originalPos.sectorId,
+            { x: d.originalPos.x, y: d.originalPos.y },
+            getPieceVertices(d.id),
+            d.snapAnchorId ?? void 0,
+            false,
+            d.overlaps ?? false
+          );
+        }
+      } else {
+        const removedFromSector = piece?.sectorId;
+        controller.remove(d.id);
+        if (removedFromSector) maybeCompleteSector(removedFromSector);
+        if (tracker) {
+          tracker.recordPlacedown(
+            "deleted",
+            removedFromSector,
+            void 0,
+            void 0,
+            d.snapAnchorId ?? void 0,
+            false,
+            d.overlaps ?? false
+          );
+        }
+      }
+      dragRef.current = null;
+      setDraggingId(null);
+      force();
+      return;
+    }
+    dragRef.current = null;
+    if (d.raf) {
+      cancelAnimationFrame(d.raf);
+      d.raf = null;
+    }
+    const commitTL = { x: d.tlx, y: d.tly };
+    const centerX = commitTL.x + d.aabb.width / 2;
+    const centerY = commitTL.y + d.aabb.height / 2;
+    const rFromCenter = Math.hypot(centerX - layout.cx, centerY - layout.cy);
+    if (rFromCenter < layout.innerR) {
+      const piece = controller.findPiece(d.id);
+      const removedFromSector = piece?.sectorId;
+      controller.remove(d.id);
+      if (removedFromSector) maybeCompleteSector(removedFromSector);
+      if (tracker) {
+        tracker.recordPlacedown(
+          "deleted",
+          removedFromSector,
+          void 0,
+          void 0,
+          d.snapAnchorId ?? void 0,
+          false,
+          d.overlaps ?? false
+        );
+      }
+      setDraggingId(null);
+      force();
+      return;
+    }
+    const secId = sectorIdAt(centerX, centerY);
+    if (secId && isSectorLocked(secId)) {
+      emitClickEvent(
+        { x: centerX, y: centerY },
+        "sector_complete_attempt",
+        { invalidPlacement: { reason: "sector_complete", attemptedSectorId: secId } }
+      );
+      if (d.originalPos) {
+        controller.move(d.id, { x: d.originalPos.x, y: d.originalPos.y });
+        if (d.originalPos.sectorId) {
+          controller.drop(d.id, d.originalPos.sectorId);
+        }
+        if (tracker) {
+          tracker.recordPlacedown(
+            "placed",
+            d.originalPos.sectorId,
+            { x: d.originalPos.x, y: d.originalPos.y },
+            getPieceVertices(d.id),
+            d.snapAnchorId ?? void 0,
+            false,
+            d.overlaps ?? false
+          );
+        }
+      } else {
+        controller.remove(d.id);
+        if (tracker) {
+          tracker.recordPlacedown(
+            "deleted",
+            void 0,
+            void 0,
+            void 0,
+            d.snapAnchorId ?? void 0,
+            false,
+            d.overlaps ?? false
+          );
+        }
+      }
+      setDraggingId(null);
+      force();
+      return;
+    }
+    controller.move(d.id, commitTL);
+    controller.drop(d.id, secId);
+    const justCompleted = secId ? maybeCompleteSector(secId) : false;
+    const wasValid = d.validSnap === void 0 ? true : d.validSnap;
+    if (tracker) {
+      tracker.recordPlacedown(
+        "placed",
+        secId,
+        commitTL,
+        getPieceVertices(d.id),
+        d.snapAnchorId ?? void 0,
+        wasValid,
+        d.overlaps ?? false,
+        justCompleted
+      );
+    }
+    setDraggingId(null);
+    if (d.fromIcon && controller.state.blueprintView === "primitives") {
+      controller.switchBlueprintView();
+    }
+    force();
+  };
+  const onBlueprintPointerDown = (e, bp, bpGeom) => {
+    if (clickMode && draggingId) return;
+    e.stopPropagation();
+    const { x: px, y: py } = svgPoint(e.clientX, e.clientY);
+    const bb = boundsOfBlueprint(bp, controller.getPrimitive);
+    const support = computeSupportOffsets(bp, bb);
+    if (clickMode) {
+      const q2 = blueprintLocalFromWorld(px, py, bpGeom);
+      const tl02 = { x: px - (q2.x - bb.min.x), y: py - (q2.y - bb.min.y) };
+      const pointerR2 = Math.hypot(px - layout.cx, py - layout.cy);
+      const allowInside2 = pointerR2 < layout.innerR;
+      const clamped2 = clampTopLeftBySupport(
+        tl02.x,
+        tl02.y,
+        { aabb: bb, support },
+        layout,
+        controller.state.cfg.target,
+        allowInside2
+      );
+      const pieceId2 = controller.spawnFromBlueprint(bp, clamped2);
+      const pointerAnchorNode2 = anchorNodeFromPoint({ x: px, y: py });
+      const pointerSector2 = sectorIdAt(px, py) ?? void 0;
+      if (tracker?.recordMouseMove) {
+        tracker.recordMouseMove(pointerAnchorNode2.x, pointerAnchorNode2.y, pointerSector2);
+      }
+      if (tracker) {
+        const blueprintType = "kind" in bp ? "primitive" : "composite";
+        tracker.recordPickup(
+          pieceId2,
+          bp.id,
+          blueprintType,
+          "blueprint",
+          clamped2,
+          getPieceVertices(pieceId2),
+          void 0
+        );
+      }
+      const tl = clamped2;
+      let finalTl = tl;
+      let snapInfo = null;
+      const centerX = tl.x + bb.width / 2;
+      const centerY = tl.y + bb.height / 2;
+      const secId = sectorIdAt(centerX, centerY);
+      if (secId) {
+        const entry = anchorDots.find((a) => a.sectorId === secId);
+        const nodes = controller.state.cfg.target === "workspace" ? entry?.valid ?? [] : [...entry?.valid ?? [], ...entry?.invalid ?? []];
+        if (nodes.length) {
+          const snap = nearestNodeSnap(tl, bp, controller.getPrimitive, nodes);
+          finalTl = snap.tl;
+          snapInfo = { node: snap.node, dist: snap.dist };
+        }
+      }
+      controller.move(pieceId2, finalTl);
+      dragRef.current = {
+        id: pieceId2,
+        dx: px - finalTl.x,
+        dy: py - finalTl.y,
+        tlx: finalTl.x,
+        tly: finalTl.y,
+        aabb: bb,
+        minx: bb.min.x,
+        miny: bb.min.y,
+        support,
+        fromIcon: true,
+        validSnap: true,
+        prevValidSnap: true,
+        raf: null,
+        originalPos: void 0,
+        // No original position for fromIcon drags
+        pointerAnchor: pointerAnchorNode2,
+        pointerAnchorId: anchorIdFromNode(pointerAnchorNode2),
+        pointerAnchorSectorId: pointerSector2,
+        snapAnchor: null,
+        snapAnchorId: null,
+        snapAnchorSectorId: void 0,
+        snapAnchorDist: null,
+        overlaps: false,
+        maxExceeded: false
+      };
+      updatePointerAnchor({ x: px, y: py }, pointerSector2);
+      const snappingSecId = sectorIdAt(finalTl.x + bb.width / 2, finalTl.y + bb.height / 2) ?? void 0;
+      updateSnapAnchor(snapInfo?.node ?? null, snappingSecId, snapInfo?.dist);
+      setDraggingId(pieceId2);
+      force();
+      scheduleFrame();
+      return;
+    }
+    svgRef.current?.setPointerCapture(e.pointerId);
+    const q = blueprintLocalFromWorld(px, py, bpGeom);
+    const tl0 = { x: px - (q.x - bb.min.x), y: py - (q.y - bb.min.y) };
+    const pointerR = Math.hypot(px - layout.cx, py - layout.cy);
+    const allowInside = pointerR < layout.innerR;
+    const clamped = clampTopLeftBySupport(
+      tl0.x,
+      tl0.y,
+      { aabb: bb, support },
+      layout,
+      controller.state.cfg.target,
+      allowInside
+    );
+    const pieceId = controller.spawnFromBlueprint(bp, clamped);
+    const pointerAnchorNode = anchorNodeFromPoint({ x: px, y: py });
+    const pointerSector = sectorIdAt(px, py) ?? void 0;
+    if (tracker?.recordMouseMove) {
+      tracker.recordMouseMove(pointerAnchorNode.x, pointerAnchorNode.y, pointerSector);
+    }
+    if (tracker) {
+      const blueprintType = "kind" in bp ? "primitive" : "composite";
+      tracker.recordPickup(
+        pieceId,
+        bp.id,
+        blueprintType,
+        "blueprint",
+        clamped,
+        getPieceVertices(pieceId),
+        void 0
+      );
+    }
+    dragRef.current = {
+      id: pieceId,
+      dx: px - clamped.x,
+      dy: py - clamped.y,
+      tlx: clamped.x,
+      tly: clamped.y,
+      aabb: bb,
+      minx: bb.min.x,
+      miny: bb.min.y,
+      support,
+      fromIcon: true,
+      validSnap: true,
+      prevValidSnap: true,
+      raf: null,
+      originalPos: void 0,
+      // No original position for fromIcon drags
+      pointerAnchor: pointerAnchorNode,
+      pointerAnchorId: anchorIdFromNode(pointerAnchorNode),
+      pointerAnchorSectorId: pointerSector,
+      snapAnchor: null,
+      snapAnchorId: null,
+      snapAnchorSectorId: void 0,
+      snapAnchorDist: null,
+      overlaps: false
+    };
+    updatePointerAnchor({ x: px, y: py }, pointerSector);
+    updateSnapAnchor(null, void 0);
+    setDraggingId(pieceId);
+    force();
+    scheduleFrame();
+  };
+  return {
+    // State
+    draggingId,
+    dragInvalid: !!(dragRef.current && dragRef.current.validSnap === false),
+    lockedPieceId,
+    svgRef,
+    // Handlers
+    onPiecePointerDown,
+    onBlueprintPointerDown,
+    onPointerMove,
+    onPointerUp,
+    setPieceRef,
+    // Click controller integration
+    setDraggingId,
+    // TODO: Remove this once click mode is extracted - temporary for compatibility
+    dragRef
+  };
+}
+
+function useClickController(controller, layout, pieces, clickMode, draggingId, setDraggingId, dragRef, isInsideBadge, isSectorLocked, maybeCompleteSector, svgPoint, force, tracker) {
+  const cfg = controller.state.cfg;
+  const sectorIdAt = (x, y) => sectorAtPoint(x, y, layout, cfg.target);
+  const getPieceVertices = (pieceId) => {
+    const piece = controller.findPiece(pieceId);
+    if (!piece) return [];
+    const bp = controller.getBlueprint(piece.blueprintId);
+    if (!bp) return [];
+    const bb = boundsOfBlueprint(bp, controller.getPrimitive);
+    const polys = piecePolysAt(bp, bb, piece.pos);
+    return polys.map((ring) => ring.map((pt) => [pt.x, pt.y]));
+  };
+  const getCurrentAnchorInfo = () => {
+    const d = dragRef.current;
+    return {
+      anchorId: d?.snapAnchorId ?? d?.pointerAnchorId ?? void 0,
+      wasValid: d?.validSnap !== false,
+      wasOverlapping: d?.overlaps ?? false,
+      anchorX: d?.pointerAnchor?.x,
+      anchorY: d?.pointerAnchor?.y,
+      sectorId: d?.snapAnchorSectorId ?? d?.pointerAnchorSectorId
+    };
+  };
+  const emitClickEvent = (location, clickType, metadata) => {
+    if (!tracker?.recordClickEvent) return;
+    tracker.recordClickEvent(location, clickType, metadata);
+  };
+  const [pendingBpId, setPendingBpId] = React.useState(null);
+  const [selectedPieceId, setSelectedPieceId] = React.useState(null);
+  const onRootPointerDown = (e) => {
+    const { x: px, y: py } = svgPoint(e.clientX, e.clientY);
+    if (clickMode) {
+      const secId = sectorIdAt(px, py);
+      if (draggingId && dragRef.current) {
+        const d = dragRef.current;
+        const centerX2 = d.tlx + d.aabb.width / 2;
+        const centerY2 = d.tly + d.aabb.height / 2;
+        if (isInsideBadge(px, py)) {
+          const piece = controller.findPiece(d.id);
+          const removedFromSector = piece?.sectorId;
+          const anchorInfo2 = getCurrentAnchorInfo();
+          controller.remove(d.id);
+          if (removedFromSector) maybeCompleteSector(removedFromSector);
+          if (tracker) {
+            tracker.recordPlacedown(
+              "deleted",
+              removedFromSector,
+              void 0,
+              void 0,
+              anchorInfo2.anchorId,
+              anchorInfo2.wasValid,
+              anchorInfo2.wasOverlapping
+            );
+          }
+          setDraggingId(null);
+          setSelectedPieceId(null);
+          setPendingBpId(null);
+          force();
+          return;
+        }
+        const rFromCenter = Math.hypot(centerX2 - layout.cx, centerY2 - layout.cy);
+        if (rFromCenter < layout.innerR) {
+          const piece = controller.findPiece(d.id);
+          const removedFromSector = piece?.sectorId;
+          const anchorInfo2 = getCurrentAnchorInfo();
+          controller.remove(d.id);
+          if (removedFromSector) maybeCompleteSector(removedFromSector);
+          if (tracker) {
+            tracker.recordPlacedown(
+              "deleted",
+              removedFromSector,
+              void 0,
+              void 0,
+              anchorInfo2.anchorId,
+              anchorInfo2.wasValid,
+              anchorInfo2.wasOverlapping
+            );
+          }
+          setDraggingId(null);
+          setSelectedPieceId(null);
+          setPendingBpId(null);
+          force();
+          return;
+        }
+        const secId2 = sectorIdAt(centerX2, centerY2);
+        if (!secId2) {
+          emitClickEvent(
+            { x: centerX2, y: centerY2 },
+            "invalid_placement",
+            { invalidPlacement: { reason: "outside_bounds" } }
+          );
+          force();
+          return;
+        }
+        if (isSectorLocked(secId2)) {
+          emitClickEvent(
+            { x: centerX2, y: centerY2 },
+            "sector_complete_attempt",
+            { invalidPlacement: { reason: "sector_complete", attemptedSectorId: secId2 } }
+          );
+          force();
+          return;
+        }
+        if (d.validSnap === false) {
+          const anchorInfo2 = getCurrentAnchorInfo();
+          const invalidReason = anchorInfo2.wasOverlapping ? "overlapping" : "no_valid_anchor";
+          emitClickEvent(
+            { x: centerX2, y: centerY2 },
+            "invalid_placement",
+            { invalidPlacement: { reason: invalidReason, attemptedSectorId: secId2 } }
+          );
+          force();
+          return;
+        }
+        controller.move(d.id, { x: d.tlx, y: d.tly });
+        controller.drop(d.id, secId2);
+        const anchorInfo = getCurrentAnchorInfo();
+        const justCompleted = maybeCompleteSector(secId2);
+        if (tracker) {
+          tracker.recordPlacedown(
+            "placed",
+            secId2,
+            { x: d.tlx, y: d.tly },
+            getPieceVertices(d.id),
+            anchorInfo.anchorId,
+            anchorInfo.wasValid,
+            anchorInfo.wasOverlapping,
+            justCompleted
+          );
+        }
+        setDraggingId(null);
+        setSelectedPieceId(null);
+        setPendingBpId(null);
+        if (controller.state.blueprintView === "primitives") {
+          controller.switchBlueprintView();
+        }
+        force();
+        return;
+      }
+      if (selectedPieceId) {
+        if (isInsideBadge(px, py)) {
+          const piece = controller.findPiece(selectedPieceId);
+          const removedFromSector = piece?.sectorId;
+          controller.remove(selectedPieceId);
+          if (removedFromSector) maybeCompleteSector(removedFromSector);
+          if (tracker) {
+            tracker.recordPlacedown("deleted");
+          }
+          setSelectedPieceId(null);
+          force();
+          return;
+        }
+        if (secId && isSectorLocked(secId)) {
+          setSelectedPieceId(null);
+          force();
+          return;
+        }
+        if (secId) {
+          const p = pieces.find((pp) => pp.id === selectedPieceId);
+          setSelectedPieceId(null);
+          if (p) {
+            const bp = controller.getBlueprint(p.blueprintId);
+            const bb = boundsOfBlueprint(bp, controller.getPrimitive);
+            const support = computeSupportOffsets(bp, bb);
+            const tl0 = { x: px - bb.width / 2, y: py - bb.height / 2 };
+            const clamped = clampTopLeftBySupport(
+              tl0.x,
+              tl0.y,
+              { aabb: { width: bb.width, height: bb.height }, support },
+              layout,
+              controller.state.cfg.target,
+              false
+            );
+            const maxPieces = controller.state.cfg.maxCompositeSize ?? 0;
+            if (controller.state.cfg.mode === "prep" && maxPieces > 0) {
+              const sectorPieces = controller.getPiecesInSector(secId);
+              const effectiveCount = sectorPieces.length - (p.sectorId === secId ? 1 : 0);
+              if (effectiveCount + 1 > maxPieces) {
+                force();
+                return;
+              }
+            }
+            controller.move(p.id, { x: clamped.x, y: clamped.y });
+            controller.drop(p.id, secId);
+            maybeCompleteSector(secId);
+            force();
+          }
+          return;
+        }
+        setSelectedPieceId(null);
+        force();
+        return;
+      }
+      if (pendingBpId) {
+        const secId2 = sectorIdAt(px, py);
+        if (isInsideBadge(px, py) || !secId2 || isSectorLocked(secId2)) {
+          setPendingBpId(null);
+          force();
+          return;
+        }
+        const bp = controller.getBlueprint(pendingBpId);
+        const bb = boundsOfBlueprint(bp, controller.getPrimitive);
+        const support = computeSupportOffsets(bp, bb);
+        const tl0 = { x: px - bb.width / 2, y: py - bb.height / 2 };
+        const clamped = clampTopLeftBySupport(
+          tl0.x,
+          tl0.y,
+          { aabb: { width: bb.width, height: bb.height }, support },
+          layout,
+          controller.state.cfg.target,
+          false
+        );
+        const id = controller.spawnFromBlueprint(bp, clamped);
+        const maxPieces = controller.state.cfg.maxCompositeSize ?? 0;
+        if (controller.state.cfg.mode === "prep" && maxPieces > 0) {
+          const sectorPieces = controller.getPiecesInSector(secId2);
+          if (sectorPieces.length + 1 > maxPieces) {
+            controller.remove(id);
+            setPendingBpId(null);
+            force();
+            return;
+          }
+        }
+        controller.drop(id, secId2);
+        setPendingBpId(null);
+        maybeCompleteSector(secId2);
+        if (controller.state.blueprintView === "primitives") controller.switchBlueprintView();
+        force();
+        return;
+      }
+    }
+  };
+  return {
+    // State
+    pendingBpId,
+    selectedPieceId,
+    // Handlers
+    onRootPointerDown,
+    // Helper methods for integration
+    clearSelection: () => {
+      setSelectedPieceId(null);
+      setPendingBpId(null);
+    },
+    setPendingBp: setPendingBpId,
+    setSelectedPiece: setSelectedPieceId
+  };
+}
+
+class InteractionTracker {
+  constructor(controller, callbacks, trialId, gameId) {
+    this.gridStep = CONFIG.layout.grid.stepPx;
+    // Interaction state
+    this.interactionIndex = 0;
+    this.currentPickup = null;
+    this.previousSnapshotId = void 0;
+    // Event accumulation (reset after each interaction)
+    this.clickEvents = [];
+    this.mouseTracking = [];
+    // Interaction history (for TrialEndData)
+    this.interactions = [];
+    // Construction-specific tracking
+    this.completionTimes = [];
+    // Prep-specific tracking
+    this.createdMacros = [];
+    this.controller = controller;
+    this.callbacks = callbacks;
+    this.trialId = trialId || v4();
+    this.gameId = gameId || v4();
+    this.trialStartTime = Date.now();
+    this.controller.setTrackingCallbacks({
+      onSectorCompleted: (sectorId) => this.recordSectorCompletion(sectorId)
+    });
+  }
+  /**
+   * Cleanup method to unregister from controller
+   */
+  dispose() {
+    this.controller.setTrackingCallbacks(null);
+  }
+  // ===== Event Recording Methods =====
+  // Called by UI controllers to record events
+  /**
+   * Record piece pickup event
+   */
+  recordPickup(pieceId, blueprintId, blueprintType, source, position, vertices, sectorId) {
+    const anchorPosition = this.toAnchorPoint(position);
+    const anchorVertices = this.toAnchorVertices(vertices);
+    this.currentPickup = {
+      pieceId,
+      blueprintId,
+      blueprintType,
+      timestamp: Date.now(),
+      source,
+      sectorId,
+      position: anchorPosition,
+      vertices: anchorVertices
+    };
+  }
+  /**
+   * Record piece placedown event
+   */
+  recordPlacedown(outcome, sectorId, position, vertices, anchorId, wasValid, wasOverlapping, completedSector) {
+    if (!this.currentPickup) {
+      console.warn("[InteractionTracker] recordPlacedown called without pickup");
+      return;
+    }
+    const interactionType = this.determineInteractionType(this.currentPickup.source, outcome);
+    const placedownTimestamp = Date.now();
+    const holdDuration = placedownTimestamp - this.currentPickup.timestamp;
+    const postSnapshot = this.buildStateSnapshot(completedSector ? sectorId : void 0);
+    const anchorPosition = position ? this.toAnchorPoint(position) : void 0;
+    const anchorVertices = vertices ? this.toAnchorVertices(vertices) : void 0;
+    const event = {
+      // Metadata
+      interactionId: v4(),
+      trialId: this.trialId,
+      gameId: this.gameId,
+      interactionIndex: this.interactionIndex++,
+      // Interaction type
+      interactionType,
+      // Piece information
+      pieceId: this.currentPickup.pieceId,
+      blueprintId: this.currentPickup.blueprintId,
+      blueprintType: this.currentPickup.blueprintType,
+      // Pickup event
+      pickupTimestamp: this.currentPickup.timestamp,
+      pickupSource: this.currentPickup.source,
+      pickupSectorId: this.currentPickup.sectorId,
+      pickupPosition: this.currentPickup.position,
+      pickupVertices: this.currentPickup.vertices,
+      // Placedown event
+      placedownTimestamp,
+      placedownOutcome: outcome,
+      // Validation context
+      wasValid: outcome === "placed" && wasValid === true,
+      wasOverlapping: outcome === "placed" && wasOverlapping === true,
+      // Timing
+      holdDuration,
+      // Events
+      clickEvents: [...this.clickEvents],
+      mouseTracking: [...this.mouseTracking],
+      // Snapshots
+      postSnapshot
+    };
+    if (outcome === "placed" && sectorId) {
+      event.placedownSectorId = sectorId;
+    }
+    if (outcome === "placed" && anchorPosition) {
+      event.placedownPosition = anchorPosition;
+    }
+    if (outcome === "placed" && anchorVertices) {
+      event.placedownVertices = anchorVertices;
+    }
+    if (anchorId) {
+      event.placedownAnchorId = anchorId;
+    }
+    if (this.previousSnapshotId !== void 0) {
+      event.preSnapshotId = this.previousSnapshotId;
+    }
+    this.interactions.push(event);
+    this.previousSnapshotId = postSnapshot.snapshotId;
+    if (this.callbacks.onInteraction) {
+      this.callbacks.onInteraction(event);
+    }
+    this.currentPickup = null;
+    this.clickEvents = [];
+    this.mouseTracking = [];
+  }
+  /**
+   * Record click event
+   */
+  recordClickEvent(location, clickType, metadata) {
+    const anchorLocation = this.toAnchorPoint(location);
+    this.clickEvents.push({
+      timestamp: Date.now(),
+      location: anchorLocation,
+      clickType,
+      ...metadata
+    });
+  }
+  /**
+   * Record mouse movement to different anchor
+   */
+  recordMouseMove(anchorX, anchorY, sectorId) {
+    const phase = this.currentPickup ? "while_holding" : "before_pickup";
+    const anchorCoordX = this.toAnchorValue(anchorX);
+    const anchorCoordY = this.toAnchorValue(anchorY);
+    const lastTracking = this.mouseTracking[this.mouseTracking.length - 1];
+    if (lastTracking && lastTracking.anchorX === anchorCoordX && lastTracking.anchorY === anchorCoordY) {
+      return;
+    }
+    this.mouseTracking.push({
+      timestamp: Date.now(),
+      anchorX: anchorCoordX,
+      anchorY: anchorCoordY,
+      sectorId,
+      phase
+    });
+  }
+  /**
+   * Record sector completion
+   */
+  recordSectorCompletion(sectorId) {
+    this.completionTimes.push({
+      sectorId,
+      completedAt: Date.now()
+    });
+  }
+  /**
+   * Record macro creation (prep mode only)
+   */
+  recordMacroCreation(macro) {
+    this.createdMacros.push(macro);
+  }
+  // ===== Trial Completion =====
+  /**
+   * Finalize trial and call onTrialEnd callback
+   */
+  finalizeTrial(endReason) {
+    const trialEndTime = Date.now();
+    const totalDuration = trialEndTime - this.trialStartTime;
+    const finalSnapshot = this.buildStateSnapshot();
+    const mode = this.controller.state.cfg.mode;
+    if (mode === "construction") {
+      const finalBlueprintState = this.buildFinalBlueprintState(finalSnapshot);
+      const quickstashMacros = finalBlueprintState.filter((bp) => bp.blueprintType === "composite").map((bp) => ({
+        id: bp.blueprintId,
+        parts: bp.parts,
+        // Composites always have parts
+        ...bp.label && { label: bp.label }
+      }));
+      const data = {
+        trialType: "construction",
+        trialId: this.trialId,
+        gameId: this.gameId,
+        trialNum: 0,
+        // TODO: Plugin should provide this
+        trialStartTime: this.trialStartTime,
+        trialEndTime,
+        totalDuration,
+        endReason,
+        completionTimes: this.completionTimes,
+        finalBlueprintState,
+        quickstashMacros,
+        finalSnapshot
+      };
+      if (this.callbacks.onTrialEnd) {
+        this.callbacks.onTrialEnd(data);
+      }
+    } else {
+      const finalMacros = this.createdMacros.length ? this.createdMacros : this.buildMacrosFromSnapshot(finalSnapshot);
+      const quickstashMacros = finalMacros.map((macro) => ({
+        id: macro.macroId.startsWith("comp:") ? macro.macroId : `comp:${macro.macroId}`,
+        parts: macro.parts
+        // Note: label not included in prep macros
+      }));
+      const data = {
+        trialType: "prep",
+        trialId: this.trialId,
+        gameId: this.gameId,
+        trialNum: 0,
+        // TODO: Plugin should provide this
+        trialStartTime: this.trialStartTime,
+        trialEndTime,
+        totalDuration,
+        endReason: "submit",
+        createdMacros: finalMacros,
+        quickstashMacros,
+        finalSnapshot
+      };
+      if (this.callbacks.onTrialEnd) {
+        this.callbacks.onTrialEnd(data);
+      }
+    }
+  }
+  // ===== Helper Methods =====
+  /**
+   * Determine interaction type from source and outcome
+   */
+  determineInteractionType(source, outcome) {
+    if (outcome === "deleted") return "delete";
+    if (source === "blueprint") return "spawn";
+    return "move";
+  }
+  toAnchorValue(value) {
+    return Math.round(value / this.gridStep);
+  }
+  toAnchorPoint(point) {
+    return { x: this.toAnchorValue(point.x), y: this.toAnchorValue(point.y) };
+  }
+  toAnchorVertices(vertices) {
+    return vertices.map(
+      (ring) => ring.map((vertex) => [
+        this.toAnchorValue(vertex[0]),
+        this.toAnchorValue(vertex[1])
+      ])
+    );
+  }
+  buildMacrosFromSnapshot(snapshot) {
+    return snapshot.sectors.map((sec) => {
+      const shapeOriginPositions = sec.pieces.map((piece) => {
+        const bp = this.controller.getBlueprint(piece.blueprintId);
+        const kind = bp && "kind" in bp ? bp.kind : piece.blueprintId;
+        const actualPiece = this.controller.findPiece(piece.pieceId);
+        if (!actualPiece || !bp) {
+          return {
+            kind,
+            position: piece.position
+            // Fallback to bbox position
+          };
+        }
+        const bb = boundsOfBlueprint(bp, this.controller.getPrimitive);
+        const shapeOriginPixels = {
+          x: actualPiece.pos.x - bb.min.x,
+          y: actualPiece.pos.y - bb.min.y
+        };
+        const shapeOriginAnchor = this.toAnchorPoint(shapeOriginPixels);
+        return {
+          kind,
+          position: shapeOriginAnchor
+          // Shape origin in anchor coordinates
+        };
+      });
+      if (shapeOriginPositions.length === 0) {
+        return {
+          macroId: sec.sectorId,
+          parts: [],
+          shape: [],
+          pieceCount: 0
+        };
+      }
+      let sumX = 0, sumY = 0;
+      for (const item of shapeOriginPositions) {
+        sumX += item.position.x;
+        sumY += item.position.y;
+      }
+      const centroidX = Math.round(sumX / shapeOriginPositions.length);
+      const centroidY = Math.round(sumY / shapeOriginPositions.length);
+      const parts = shapeOriginPositions.map((item) => ({
+        kind: item.kind,
+        anchorOffset: {
+          x: Math.round(item.position.x - centroidX),
+          y: Math.round(item.position.y - centroidY)
+        }
+      }));
+      const shape = sec.pieces.flatMap((piece) => piece.vertices || []);
+      return {
+        macroId: sec.sectorId,
+        parts,
+        shape,
+        pieceCount: sec.pieceCount
+      };
+    });
+  }
+  /**
+   * Build state snapshot from current controller state
+   * @param justCompletedSectorId - Sector ID that was just completed (but controller state hasn't updated yet)
+   */
+  buildStateSnapshot(justCompletedSectorId) {
+    const snapshotId = v4();
+    const timestamp = Date.now();
+    const sectors = [];
+    const completedSectorIds = [];
+    for (const sector of this.controller.state.cfg.sectors) {
+      const sectorState = this.controller.state.sectors[sector.id];
+      const completed = sector.id === justCompletedSectorId || !!sectorState?.completedAt;
+      if (completed) {
+        completedSectorIds.push(sector.id);
+      }
+      const pieces = (sectorState?.pieces || []).map((p) => ({
+        pieceId: p.id,
+        blueprintId: p.blueprintId,
+        blueprintType: this.getBlueprintType(p.blueprintId),
+        position: this.toAnchorPoint(p.pos),
+        vertices: this.getPieceVertices(p.id)
+      }));
+      const snapshot = {
+        sectorId: sector.id,
+        completed,
+        pieceCount: pieces.length,
+        pieces
+      };
+      if (sectorState?.completedAt !== void 0) {
+        snapshot.completedAt = sectorState.completedAt;
+      }
+      sectors.push(snapshot);
+    }
+    const sectorTangramMap = this.controller.state.cfg.sectors.map((s) => ({
+      sectorId: s.id,
+      tangramId: s.id
+      // In our system, sector ID == tangram ID
+    }));
+    const blueprintOrder = {
+      primitives: this.controller.state.primitives.map((bp) => bp.id),
+      quickstash: this.controller.state.quickstash.map((bp) => bp.id)
+    };
+    return {
+      snapshotId,
+      timestamp,
+      sectors,
+      completedSectorIds,
+      sectorTangramMap,
+      blueprintOrder
+    };
+  }
+  /**
+   * Get blueprint type from blueprint ID
+   */
+  getBlueprintType(blueprintId) {
+    const bp = this.controller.getBlueprint(blueprintId);
+    if (!bp) return "primitive";
+    return "kind" in bp ? "primitive" : "composite";
+  }
+  /**
+   * Get piece vertices in world space
+   */
+  getPieceVertices(pieceId) {
+    const piece = this.controller.findPiece(pieceId);
+    if (!piece) return [];
+    const bp = this.controller.getBlueprint(piece.blueprintId);
+    if (!bp) return [];
+    const bb = boundsOfBlueprint(bp, (k) => this.controller.getPrimitive(k));
+    const polys = piecePolysAt(bp, bb, piece.pos) ?? [];
+    const asNumbers = polys.map((ring) => ring.map((pt) => [pt.x, pt.y]));
+    return this.toAnchorVertices(asNumbers);
+  }
+  /**
+   * Build final blueprint state (usage counts + definitions)
+   */
+  buildFinalBlueprintState(snapshot) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const sector of snapshot.sectors) {
+      for (const piece of sector.pieces) {
+        if (!counts.has(piece.blueprintId)) {
+          counts.set(piece.blueprintId, {
+            blueprintType: piece.blueprintType,
+            totalPieces: 0,
+            bySector: /* @__PURE__ */ new Map()
+          });
+        }
+        const entry = counts.get(piece.blueprintId);
+        entry.totalPieces++;
+        entry.bySector.set(sector.sectorId, (entry.bySector.get(sector.sectorId) || 0) + 1);
+      }
+    }
+    for (const primitive of this.controller.state.primitives) {
+      if (!counts.has(primitive.id)) {
+        counts.set(primitive.id, {
+          blueprintType: "primitive",
+          totalPieces: 0,
+          bySector: /* @__PURE__ */ new Map()
+        });
+      }
+    }
+    for (const composite of this.controller.state.quickstash) {
+      if (!counts.has(composite.id)) {
+        counts.set(composite.id, {
+          blueprintType: "composite",
+          totalPieces: 0,
+          bySector: /* @__PURE__ */ new Map()
+        });
+      }
+    }
+    return Array.from(counts.entries()).map(([blueprintId, data]) => {
+      const blueprint = this.controller.getBlueprint(blueprintId);
+      const result = {
+        blueprintId,
+        blueprintType: data.blueprintType,
+        totalPieces: data.totalPieces,
+        bySector: Array.from(data.bySector.entries()).map(([sectorId, count]) => ({
+          sectorId,
+          count
+        }))
+      };
+      if (blueprint) {
+        if (data.blueprintType === "composite" && "parts" in blueprint) {
+          result.parts = blueprint.parts.map((part) => ({
+            kind: part.kind,
+            anchorOffset: {
+              x: Math.round(part.offset.x / this.gridStep),
+              y: Math.round(part.offset.y / this.gridStep)
+            }
+          }));
+          if (blueprint.shape) {
+            result.shape = blueprint.shape.map(
+              (poly) => poly.map((vertex) => ({
+                x: Math.round(vertex.x / this.gridStep),
+                y: Math.round(vertex.y / this.gridStep)
+              }))
+            );
+          }
+          if (blueprint.label) {
+            result.label = blueprint.label;
+          }
+        } else if (data.blueprintType === "primitive" && "kind" in blueprint) {
+          if (blueprint.shape) {
+            result.shape = blueprint.shape.map(
+              (poly) => poly.map((vertex) => ({
+                x: Math.round(vertex.x / this.gridStep),
+                y: Math.round(vertex.y / this.gridStep)
+              }))
+            );
+          }
+          result.label = blueprint.kind;
+        }
+      }
+      return result;
+    });
+  }
+}
+
+function GameBoard(props) {
+  const {
+    sectors,
+    quickstash,
+    primitives,
+    layout: layoutMode,
+    target,
+    input,
+    timeLimitMs,
+    maxQuickstashSlots,
+    maxCompositeSize,
+    mode,
+    width: _width,
+    height: _height,
+    onSectorComplete,
+    onPiecePlace,
+    onPieceRemove,
+    onInteraction,
+    onTrialEnd,
+    onControllerReady
+  } = props;
+  const controller = React.useMemo(() => {
+    const gameConfig = {
+      n: sectors.length,
+      layout: layoutMode,
+      target,
+      input,
+      timeLimitMs,
+      maxQuickstashSlots,
+      ...maxCompositeSize !== void 0 && { maxCompositeSize },
+      mode: mode || "construction",
+      // Default to construction mode for backwards compatibility
+      ...props.minPiecesPerMacro !== void 0 && { minPiecesPerMacro: props.minPiecesPerMacro },
+      ...props.requireAllSlots !== void 0 && { requireAllSlots: props.requireAllSlots }
+    };
+    return new BaseGameController(
+      sectors,
+      quickstash,
+      primitives,
+      gameConfig
+    );
+  }, [sectors, quickstash, primitives, layoutMode, target, input, timeLimitMs, maxQuickstashSlots, maxCompositeSize, mode, props.minPiecesPerMacro, props.requireAllSlots]);
+  const tracker = React.useMemo(() => {
+    if (!onInteraction && !onTrialEnd) return null;
+    const callbacks = {};
+    if (onInteraction) callbacks.onInteraction = onInteraction;
+    if (onTrialEnd) callbacks.onTrialEnd = onTrialEnd;
+    return new InteractionTracker(controller, callbacks);
+  }, [controller, onInteraction, onTrialEnd]);
+  React.useEffect(() => {
+    if (onControllerReady) {
+      onControllerReady(controller);
+    }
+  }, [controller, onControllerReady]);
+  React.useEffect(() => {
+    return () => {
+      if (tracker) {
+        tracker.dispose();
+      }
+    };
+  }, [tracker]);
+  const { layout, viewBox } = React.useMemo(() => {
+    const nSectors = sectors.length;
+    const sectorIds = sectors.map((s) => s.id);
+    const masksPerSector = sectors.map((s) => s.silhouette.mask ?? []);
+    const logicalBox = solveLogicalBox({
+      n: nSectors,
+      layoutMode,
+      target,
+      qsMaxSlots: maxQuickstashSlots,
+      primitivesSlots: primitives.length,
+      layoutPadPx: CONFIG.layout.paddingPx,
+      masks: masksPerSector
+    });
+    const layout2 = computeCircleLayout(
+      { w: logicalBox.LOGICAL_W, h: logicalBox.LOGICAL_H },
+      nSectors,
+      sectorIds,
+      layoutMode,
+      target,
+      {
+        qsMaxSlots: maxQuickstashSlots,
+        primitivesSlots: primitives.length,
+        masks: masksPerSector
+      }
+    );
+    return {
+      layout: layout2,
+      viewBox: { w: logicalBox.LOGICAL_W, h: logicalBox.LOGICAL_H }
+    };
+  }, [sectors, layoutMode, target, maxQuickstashSlots, primitives.length]);
+  const [, force] = React.useReducer((x) => x + 1, 0);
+  React.useEffect(() => {
+    if (onControllerReady) {
+      onControllerReady(controller, layout, force);
+    }
+  }, [controller, layout, onControllerReady, force]);
+  const [gameCompleted, setGameCompleted] = React.useState(false);
+  React.useEffect(() => {
+    const checkGameCompletion = () => {
+      const allSectorsComplete = sectors.every(
+        (s) => controller.isSectorCompleted(s.id)
+      );
+      if (allSectorsComplete && !gameCompleted) {
+        setGameCompleted(true);
+        if (tracker) {
+          tracker.finalizeTrial("auto_complete");
+        }
+      }
+    };
+    checkGameCompletion();
+  }, [controller.updateCount, sectors, gameCompleted, controller, tracker]);
+  const handleSectorComplete = React.useCallback((sectorId) => {
+    if (onSectorComplete) {
+      onSectorComplete(sectorId, controller.snapshot());
+    }
+  }, [onSectorComplete, controller]);
+  const eventCallbacks = React.useMemo(() => ({
+    onSectorComplete: handleSectorComplete,
+    onPiecePlace: onPiecePlace || (() => {
+    }),
+    onPieceRemove: onPieceRemove || (() => {
+    })
+  }), [handleSectorComplete, onPiecePlace, onPieceRemove]);
+  const getGameboardStyle = () => {
+    const baseStyle = {
+      margin: "0 auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative"
+    };
+    if (layoutMode === "circle") {
+      const size = Math.min(window.innerWidth * 0.96, window.innerHeight * 0.96);
+      return {
+        ...baseStyle,
+        width: `${size}px`,
+        height: `${size}px`
+      };
+    } else {
+      const maxWidth = Math.min(window.innerWidth * 0.96, window.innerHeight * 0.96 * 2);
+      const maxHeight = Math.min(window.innerWidth * 0.96 / 2, window.innerHeight * 0.96);
+      return {
+        ...baseStyle,
+        width: `${maxWidth}px`,
+        height: `${maxHeight}px`
+      };
+    }
+  };
+  const getSvgDimensions = () => {
+    if (layoutMode === "circle") {
+      const size = Math.min(window.innerWidth * 0.96, window.innerHeight * 0.96);
+      return { width: size, height: size };
+    } else {
+      const maxWidth = Math.min(window.innerWidth * 0.96, window.innerHeight * 0.96 * 2);
+      const maxHeight = Math.min(window.innerWidth * 0.96 / 2, window.innerHeight * 0.96);
+      return { width: maxWidth, height: maxHeight };
+    }
+  };
+  const svgDimensions = getSvgDimensions();
+  React.useEffect(() => {
+    if (controller.state.cfg.mode !== "construction") return;
+    if (!timeLimitMs || timeLimitMs <= 0) return;
+    if (gameCompleted) return;
+    const timeoutId = window.setTimeout(() => {
+      if (gameCompleted) return;
+      if (!controller.state.endedAt) {
+        controller.state.endedAt = performance.now();
+        force();
+      }
+      tracker?.finalizeTrial("timeout");
+      setGameCompleted(true);
+    }, timeLimitMs);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [controller, timeLimitMs, gameCompleted, tracker, force]);
+  const isSectorLocked = (id) => controller.isSectorCompleted(id);
+  const { pieces, pieceById, getSectorPiecePolysCached } = usePieceState(controller);
+  const clickMode = controller.state.cfg.input === "click";
+  const badgeR = Math.max(CONFIG.size.centerBadge.minPx, layout.innerR * CONFIG.size.centerBadge.fractionOfOuterR);
+  const badgeCenter = controller.state.cfg.layout === "semicircle" ? { x: layout.cx, y: layout.cy - badgeR - CONFIG.size.centerBadge.marginPx } : { x: layout.cx, y: layout.cy };
+  const isInsideBadge = (px, py) => Math.hypot(px - badgeCenter.x, py - badgeCenter.y) <= badgeR;
+  const allMasks = React.useMemo(() => {
+    return controller.state.cfg.sectors.map((sec) => sec.silhouette.mask ?? []);
+  }, [controller.state.cfg.sectors]);
+  const scaleS = React.useMemo(() => {
+    const u = inferUnitFromPolys$1(allMasks.flat());
+    return u ? CONFIG.layout.grid.unitPx / u : 1;
+  }, [allMasks]);
+  const { anchorDots } = useAnchorGrid(controller, layout, scaleS);
+  const placedSilBySector = React.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const s of layout.sectors) {
+      const mask = controller.state.cfg.sectors.find((ss) => ss.id === s.id)?.silhouette.mask ?? [];
+      if (!mask?.length) continue;
+      const rect = rectForBand(layout, s, "silhouette", 1);
+      const placed = placeSilhouetteGridAlignedAsPolys(mask, scaleS, { cx: rect.cx, cy: rect.cy });
+      m.set(s.id, placed);
+    }
+    return m;
+  }, [layout, scaleS, controller.state.cfg.sectors]);
+  const maybeCompleteSector = (secId) => {
+    if (!secId) return false;
+    if (isSectorLocked(secId)) return false;
+    if (controller.state.cfg.target === "silhouette") {
+      const sil = placedSilBySector.get(secId) ?? [];
+      if (!sil.length) return false;
+      const piecePolys = getSectorPiecePolysCached(secId);
+      if (anchorsSilhouetteComplete(sil, piecePolys)) {
+        controller.markSectorCompleted(secId);
+        return true;
+      }
+    } else {
+      const raw = controller.state.cfg.sectors.find((ss) => ss.id === secId)?.silhouette.mask ?? [];
+      if (!raw.length) return false;
+      const scaledSil = scalePolys(raw, scaleS);
+      const piecePolys = getSectorPiecePolysCached(secId);
+      if (anchorsWorkspaceComplete(scaledSil, piecePolys)) {
+        controller.markSectorCompleted(secId);
+        return true;
+      }
+    }
+    return false;
+  };
+  const dragController = useDragController(
+    controller,
+    layout,
+    pieces,
+    pieceById,
+    anchorDots,
+    placedSilBySector,
+    isSectorLocked,
+    maybeCompleteSector,
+    force,
+    void 0,
+    // clickController - will be set later
+    tracker
+    // Pass tracker for data collection
+  );
+  const {
+    draggingId,
+    dragInvalid,
+    svgRef,
+    onPiecePointerDown,
+    onBlueprintPointerDown,
+    onPointerMove,
+    onPointerUp,
+    setPieceRef,
+    setDraggingId,
+    lockedPieceId,
+    dragRef
+    // TODO: Remove once click mode is extracted
+  } = dragController;
+  const svgPoint = (clientX, clientY) => {
+    const svg = svgRef.current;
+    const pt = svg.createSVGPoint();
+    pt.x = clientX;
+    pt.y = clientY;
+    const ctm = svg.getScreenCTM();
+    if (!ctm) return { x: 0, y: 0 };
+    const sp = pt.matrixTransform(ctm.inverse());
+    return { x: sp.x, y: sp.y };
+  };
+  const clickController = useClickController(
+    controller,
+    layout,
+    pieces,
+    clickMode,
+    draggingId,
+    setDraggingId,
+    dragRef,
+    isInsideBadge,
+    isSectorLocked,
+    maybeCompleteSector,
+    svgPoint,
+    force,
+    tracker
+    // Pass tracker for data collection
+  );
+  const {
+    selectedPieceId,
+    onRootPointerDown
+  } = clickController;
+  const onCenterBadgePointerDown = (e) => {
+    if (draggingId) return;
+    const { x, y } = svgPoint(e.clientX, e.clientY);
+    if (controller.state.cfg.mode === "prep") {
+      if (!controller.isSubmitEnabled() || gameCompleted) {
+        e.stopPropagation();
+        return;
+      }
+      setGameCompleted(true);
+      if (tracker) {
+        tracker.finalizeTrial("submit");
+      }
+      e.stopPropagation();
+      return;
+    }
+    if (tracker?.recordClickEvent) {
+      const from = controller.state.blueprintView;
+      const to = from === "primitives" ? "quickstash" : "primitives";
+      tracker.recordClickEvent({ x, y }, "blueprint_view_switch", {
+        blueprintViewSwitch: { from, to }
+      });
+    }
+    controller.switchBlueprintView();
+    force();
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "tangram-gameboard", style: getGameboardStyle() }, /* @__PURE__ */ React.createElement(
+    BoardView,
+    {
+      controller,
+      layout,
+      viewBox,
+      width: svgDimensions.width,
+      height: svgDimensions.height,
+      badgeR,
+      badgeCenter,
+      placedSilBySector,
+      anchorDots,
+      pieces,
+      clickMode,
+      draggingId,
+      selectedPieceId,
+      dragInvalid,
+      lockedPieceId,
+      svgRef,
+      setPieceRef,
+      onPiecePointerDown,
+      onBlueprintPointerDown,
+      onRootPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onCenterBadgePointerDown,
+      ...eventCallbacks
+    }
+  ));
+}
+
+const U = 40;
+const HALFUNIT = U / 2;
+const DIAGONAL = U * Math.SQRT2;
+const HALFDIAGONAL = DIAGONAL / 2;
+const P = (x, y) => ({ x, y });
+function rotLeft(arr, k) {
+  const n = arr.length;
+  if (n === 0) return [];
+  const s = (k % n + n) % n;
+  return arr.slice(s).concat(arr.slice(0, s));
+}
+function nextPoint(x0, y0, x1, y1, interiorDeg, dist) {
+  const phi = Math.atan2(y0 - y1, x0 - x1);
+  const theta = phi - interiorDeg * Math.PI / 180;
+  return P(x1 + dist * Math.cos(theta), y1 + dist * Math.sin(theta));
+}
+function constructFromSpec(sideLens, angles, firstEdgeUnits) {
+  let pts;
+  if (firstEdgeUnits) {
+    const a = firstEdgeUnits[0];
+    const b = firstEdgeUnits[1];
+    const A = P(-a.x * U, a.y * U);
+    const B = P(-b.x * U, b.y * U);
+    pts = [A, B];
+  } else {
+    const firstSideLen = sideLens[0];
+    if (firstSideLen === void 0) throw new Error("No side lengths provided");
+    pts = [P(0, 0), P(firstSideLen, 0)];
+  }
+  const sidesRot = rotLeft(sideLens, 1);
+  const angRot = angles;
+  for (let i = 1; i < sideLens.length - 1; i++) {
+    const last = pts[i - 1];
+    const curr = pts[i];
+    if (!last || !curr) continue;
+    const sLen = sidesRot[i - 1];
+    const aDeg = angRot[i - 1];
+    if (sLen === void 0 || aDeg === void 0) continue;
+    pts.push(nextPoint(last.x, last.y, curr.x, curr.y, aDeg, sLen));
+  }
+  return pts;
+}
+const FIRST_EDGES_UNITS = {
+  small_triangle: [P(0, 0), P(0.5, 0.5)],
+  parallelogram: [P(0, 0), P(0.5, 0)],
+  large_triangle: [P(0, 0), P(0.5, -0.5)],
+  med_triangle: [P(0, 0), P(0.5, 0)],
+  square: [P(0, 0), P(0.5, 0)]
+};
+const PRIMITIVE_BLUEPRINTS_CACHE = (() => {
+  const specs = [
+    {
+      id: "prim:square",
+      kind: "square",
+      sideLens: [HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT],
+      angles: [180, 90, 180, 90, 180, 90, 180, 90],
+      color: "#f43f5e"
+    },
+    {
+      id: "prim:small",
+      kind: "small_triangle",
+      sideLens: [HALFDIAGONAL, HALFDIAGONAL, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT],
+      angles: [180, 45, 180, 90, 180, 45],
+      color: "#f59e0b"
+    },
+    {
+      id: "prim:parallelogram",
+      kind: "parallelogram",
+      sideLens: [HALFUNIT, HALFUNIT, HALFDIAGONAL, HALFDIAGONAL, HALFUNIT, HALFUNIT, HALFDIAGONAL, HALFDIAGONAL],
+      angles: [180, 135, 180, 45, 180, 135, 180, 45],
+      color: "#10b981"
+    },
+    {
+      id: "prim:med",
+      kind: "med_triangle",
+      sideLens: [HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFDIAGONAL, HALFDIAGONAL, HALFDIAGONAL, HALFDIAGONAL],
+      angles: [180, 180, 180, 45, 180, 90, 180, 45],
+      color: "#3b82f6"
+    },
+    {
+      id: "prim:large",
+      kind: "large_triangle",
+      sideLens: [
+        HALFDIAGONAL,
+        HALFDIAGONAL,
+        HALFDIAGONAL,
+        HALFDIAGONAL,
+        HALFUNIT,
+        HALFUNIT,
+        HALFUNIT,
+        HALFUNIT,
+        HALFUNIT,
+        HALFUNIT,
+        HALFUNIT,
+        HALFUNIT
+      ],
+      angles: [
+        180,
+        180,
+        180,
+        45,
+        180,
+        180,
+        180,
+        90,
+        180,
+        180,
+        180,
+        45
+      ],
+      color: "#8b5cf6"
+    }
+  ];
+  return specs.map(({ id, kind, sideLens, angles, color }) => {
+    const firstEdge = FIRST_EDGES_UNITS[kind];
+    const verts = constructFromSpec(sideLens, angles, firstEdge);
+    return {
+      id,
+      kind,
+      shape: [verts],
+      colorHint: color
+    };
+  });
+})();
+const PRIMITIVE_BLUEPRINTS = PRIMITIVE_BLUEPRINTS_CACHE;
+
+function convertAnchorCompositeToPixels(anchorComposite, primsByKind, gridStepPx = CONFIG.layout.grid.stepPx) {
+  const { id, parts, label } = anchorComposite;
+  const pixelParts = parts.map((p) => ({
+    kind: p.kind,
+    offset: {
+      x: p.anchorOffset.x * gridStepPx,
+      y: p.anchorOffset.y * gridStepPx
+    }
+  }));
+  const shape = [];
+  for (const p of parts) {
+    const prim = primsByKind.get(p.kind);
+    if (!prim) continue;
+    const pixelOffset = {
+      x: p.anchorOffset.x * gridStepPx,
+      y: p.anchorOffset.y * gridStepPx
+    };
+    for (const poly of prim.shape) {
+      shape.push(poly.map((v) => ({ x: v.x + pixelOffset.x, y: v.y + pixelOffset.y })));
+    }
+  }
+  return { id, parts: pixelParts, shape, label: label ?? `Composite-${id}` };
+}
+
+function startPrepTrial(display_element, params, jsPsych) {
+  const {
+    numQuickstashSlots,
+    maxPiecesPerMacro,
+    minPiecesPerMacro,
+    inputMode,
+    layoutMode,
+    requireAllSlots,
+    quickstashMacros,
+    onInteraction,
+    onTrialEnd
+  } = params;
+  const prepSectors = Array.from({ length: numQuickstashSlots }, (_, i) => ({
+    id: `prep-sector-${i}`,
+    silhouette: {
+      id: `prep-silhouette-${i}`,
+      mask: []
+    }
+  }));
+  const root = createRoot(display_element);
+  const handleControllerReady = (controller, layout, force) => {
+    if (quickstashMacros && quickstashMacros.length > 0 && layout) {
+      const primsByKind = /* @__PURE__ */ new Map();
+      PRIMITIVE_BLUEPRINTS.forEach((p) => primsByKind.set(p.kind, p));
+      quickstashMacros.forEach((anchorComposite, macroIndex) => {
+        const sectorId = `prep-sector-${macroIndex}`;
+        const compositeBlueprint = convertAnchorCompositeToPixels(
+          anchorComposite,
+          primsByKind,
+          CONFIG.layout.grid.stepPx
+        );
+        const sectorGeom = layout.sectors.find((s) => s.id === sectorId);
+        if (!sectorGeom) return;
+        const sectorRect = rectForBand(layout, sectorGeom, "workspace", 1);
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        compositeBlueprint.parts.forEach((part) => {
+          const primitiveBlueprint = primsByKind.get(part.kind);
+          if (!primitiveBlueprint) return;
+          const bb = boundsOfBlueprint(primitiveBlueprint, controller.getPrimitive);
+          const pieceMinX = part.offset.x + bb.min.x;
+          const pieceMinY = part.offset.y + bb.min.y;
+          const pieceMaxX = part.offset.x + bb.max.x;
+          const pieceMaxY = part.offset.y + bb.max.y;
+          minX = Math.min(minX, pieceMinX);
+          minY = Math.min(minY, pieceMinY);
+          maxX = Math.max(maxX, pieceMaxX);
+          maxY = Math.max(maxY, pieceMaxY);
+        });
+        const compositeCenterX = minX + (maxX - minX) / 2;
+        const compositeCenterY = minY + (maxY - minY) / 2;
+        compositeBlueprint.parts.forEach((part) => {
+          const primitiveBlueprint = primsByKind.get(part.kind);
+          if (!primitiveBlueprint) {
+            console.warn(`Unknown primitive kind: ${part.kind}`);
+            return;
+          }
+          const bb = boundsOfBlueprint(primitiveBlueprint, controller.getPrimitive);
+          const compositeBBoxMinX = part.offset.x + bb.min.x;
+          const compositeBBoxMinY = part.offset.y + bb.min.y;
+          const worldPosX = sectorRect.cx + (compositeBBoxMinX - compositeCenterX);
+          const worldPosY = sectorRect.cy + (compositeBBoxMinY - compositeCenterY);
+          const gridStep = CONFIG.layout.grid.stepPx;
+          const alignedX = Math.round(worldPosX / gridStep) * gridStep;
+          const alignedY = Math.round(worldPosY / gridStep) * gridStep;
+          const pieceId = controller.spawnFromBlueprint(
+            primitiveBlueprint,
+            { x: alignedX, y: alignedY }
+          );
+          controller.drop(pieceId, sectorId);
+        });
+      });
+      if (force) {
+        force();
+      }
+    }
+  };
+  root.render(React.createElement(GameBoard, {
+    sectors: prepSectors,
+    quickstash: [],
+    // No pre-made macros
+    primitives: PRIMITIVE_BLUEPRINTS,
+    layout: layoutMode,
+    target: "workspace",
+    // Pieces go in sectors
+    input: inputMode,
+    timeLimitMs: 0,
+    // No time limit for prep
+    maxQuickstashSlots: 0,
+    // Primitives only in center
+    maxCompositeSize: maxPiecesPerMacro,
+    mode: "prep",
+    // Enable prep-specific behavior
+    minPiecesPerMacro,
+    requireAllSlots,
+    onControllerReady: handleControllerReady,
+    ...onInteraction && { onInteraction },
+    ...onTrialEnd && { onTrialEnd }
+  }));
+  return { root, display_element, jsPsych };
+}
+
+const info = {
+  name: "tangram-prep",
+  version: "1.0.0",
+  parameters: {
+    /** Number of quickstash slots for macro creation */
+    num_quickstash_slots: {
+      type: ParameterType.INT,
+      default: void 0
+    },
+    /** Maximum pieces allowed per macro */
+    max_pieces_per_macro: {
+      type: ParameterType.INT,
+      default: 2
+    },
+    /** Minimum pieces required per macro */
+    min_pieces_per_macro: {
+      type: ParameterType.INT,
+      default: 2
+    },
+    /** Input mode: click or drag */
+    input: {
+      type: ParameterType.STRING,
+      default: "click"
+    },
+    /** Layout mode: circle or semicircle */
+    layout: {
+      type: ParameterType.STRING,
+      default: "semicircle"
+    },
+    /** Whether all slots must be filled to complete trial */
+    require_all_slots: {
+      type: ParameterType.BOOL,
+      default: void 0
+    },
+    /** Array of pre-made macro pieces to edit */
+    quickstash_macros: {
+      type: ParameterType.COMPLEX,
+      default: [],
+      description: "Array of AnchorComposite objects to edit as primitive pieces"
+    },
+    /** Callback fired after each interaction (optional analytics hook) */
+    onInteraction: {
+      type: ParameterType.FUNCTION,
+      default: void 0
+    },
+    /** Callback fired when prep trial ends */
+    onTrialEnd: {
+      type: ParameterType.FUNCTION,
+      default: void 0
+    }
+  },
+  data: {
+    /** Completion status */
+    completed: {
+      type: ParameterType.BOOL
+    }
+  },
+  citations: ""
+};
+class TangramPrepPlugin {
+  constructor(jsPsych) {
+    this.jsPsych = jsPsych;
+  }
+  static {
+    this.info = info;
+  }
+  /**
+   * Launches the trial by invoking startPrepTrial
+   * with the display element, parameters, and jsPsych instance.
+   */
+  trial(display_element, trial) {
+    const wrappedOnTrialEnd = (data) => {
+      if (trial.onTrialEnd) {
+        trial.onTrialEnd(data);
+      }
+      const reactContext = display_element.__reactContext;
+      if (reactContext?.root) {
+        reactContext.root.unmount();
+      }
+      display_element.innerHTML = "";
+      this.jsPsych.finishTrial(data);
+    };
+    const params = {
+      numQuickstashSlots: trial.num_quickstash_slots || 4,
+      maxPiecesPerMacro: trial.max_pieces_per_macro,
+      minPiecesPerMacro: trial.min_pieces_per_macro,
+      inputMode: trial.input,
+      layoutMode: trial.layout,
+      requireAllSlots: trial.require_all_slots,
+      quickstashMacros: trial.quickstash_macros,
+      onInteraction: trial.onInteraction,
+      onTrialEnd: wrappedOnTrialEnd
+    };
+    const { root, display_element: element, jsPsych } = startPrepTrial(display_element, params, this.jsPsych);
+    element.__reactContext = { root, jsPsych };
+  }
+}
+
+export { TangramPrepPlugin as default };
+//# sourceMappingURL=index.js.map