@jamesyong42/infinite-canvas 1.0.0 → 1.2.0

package/dist/chunk-Z6JQQOWL.js

@@ -1,3142 +0,0 @@
-import { defineComponent, defineTag, defineResource, defineSystem, createWorld, SystemScheduler } from '@jamesyong42/reactive-ecs';
-import { createContext, memo, useRef, useEffect, useCallback, useContext, useState, useMemo, useLayoutEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as THREE2 from 'three';
-import { useFrame, Canvas, useThree } from '@react-three/fiber';
-
-// src/archetype.ts
-function createArchetypeRegistry(archetypes = []) {
-  const map = /* @__PURE__ */ new Map();
-  for (const a of archetypes) map.set(a.id, a);
-  return {
-    register(a) {
-      map.set(a.id, a);
-    },
-    get(id) {
-      return map.get(id) ?? null;
-    },
-    getAll() {
-      return [...map.values()];
-    }
-  };
-}
-
-// src/interaction-constants.ts
-var HANDLE_VISUAL_SIZE_PX = 8;
-var HANDLE_HIT_SIZE_PX = 16;
-var DEAD_ZONE_MOUSE_PX = 4;
-var DEAD_ZONE_TOUCH_PX = 8;
-var MIN_WIDGET_SIZE = 20;
-
-// src/commands.ts
-var CommandBuffer = class {
-  undoStack = [];
-  redoStack = [];
-  currentGroup = null;
-  /** Start grouping commands (e.g., on pointerdown). All commands until endGroup() are one undo step. */
-  beginGroup() {
-    if (this.currentGroup !== null) {
-      this.endGroup();
-    }
-    this.currentGroup = [];
-  }
-  /** Execute a command and record it for undo. */
-  execute(command, world) {
-    command.execute(world);
-    if (this.currentGroup) {
-      this.currentGroup.push(command);
-    } else {
-      this.undoStack.push([command]);
-      this.redoStack.length = 0;
-    }
-  }
-  /** Close the current group — all commands since beginGroup() become one undo step. */
-  endGroup() {
-    if (this.currentGroup && this.currentGroup.length > 0) {
-      this.undoStack.push(this.currentGroup);
-      this.redoStack.length = 0;
-    }
-    this.currentGroup = null;
-  }
-  /** Undo the last command group. */
-  undo(world) {
-    if (this.currentGroup) {
-      this.endGroup();
-    }
-    const group = this.undoStack.pop();
-    if (!group) return false;
-    for (let i = group.length - 1; i >= 0; i--) {
-      group[i].undo(world);
-    }
-    this.redoStack.push(group);
-    return true;
-  }
-  /** Redo the last undone command group. */
-  redo(world) {
-    const group = this.redoStack.pop();
-    if (!group) return false;
-    for (const cmd of group) {
-      cmd.execute(world);
-    }
-    this.undoStack.push(group);
-    return true;
-  }
-  canUndo() {
-    return this.undoStack.length > 0 || this.currentGroup !== null && this.currentGroup.length > 0;
-  }
-  canRedo() {
-    return this.redoStack.length > 0;
-  }
-  clear() {
-    this.undoStack.length = 0;
-    this.redoStack.length = 0;
-    this.currentGroup = null;
-  }
-  get undoSize() {
-    return this.undoStack.length;
-  }
-  get redoSize() {
-    return this.redoStack.length;
-  }
-};
-var MoveCommand = class {
-  constructor(entityIds, dx, dy, transformType) {
-    this.entityIds = entityIds;
-    this.dx = dx;
-    this.dy = dy;
-    this.transformType = transformType;
-  }
-  entityIds;
-  dx;
-  dy;
-  transformType;
-  beforePositions = /* @__PURE__ */ new Map();
-  afterPositions = /* @__PURE__ */ new Map();
-  captured = false;
-  execute(world) {
-    if (!this.captured) {
-      for (const id of this.entityIds) {
-        const t = world.getComponent(id, this.transformType);
-        if (t) {
-          this.beforePositions.set(id, { x: t.x, y: t.y });
-          this.afterPositions.set(id, { x: t.x + this.dx, y: t.y + this.dy });
-        }
-      }
-      this.captured = true;
-    }
-    for (const [id, pos] of this.afterPositions) {
-      world.setComponent(id, this.transformType, { x: pos.x, y: pos.y });
-    }
-  }
-  undo(world) {
-    for (const [id, pos] of this.beforePositions) {
-      world.setComponent(id, this.transformType, { x: pos.x, y: pos.y });
-    }
-  }
-};
-var ResizeCommand = class {
-  constructor(entityId, before, after, transformType) {
-    this.entityId = entityId;
-    this.before = before;
-    this.after = after;
-    this.transformType = transformType;
-    this.after = {
-      ...after,
-      width: Math.max(MIN_WIDGET_SIZE, after.width),
-      height: Math.max(MIN_WIDGET_SIZE, after.height)
-    };
-  }
-  entityId;
-  before;
-  after;
-  transformType;
-  execute(world) {
-    world.setComponent(this.entityId, this.transformType, this.after);
-  }
-  undo(world) {
-    world.setComponent(this.entityId, this.transformType, this.before);
-  }
-};
-var SetComponentCommand = class {
-  constructor(entityId, type, before, after) {
-    this.entityId = entityId;
-    this.type = type;
-    this.before = before;
-    this.after = after;
-  }
-  entityId;
-  type;
-  before;
-  after;
-  execute(world) {
-    world.setComponent(this.entityId, this.type, this.after);
-  }
-  undo(world) {
-    world.setComponent(this.entityId, this.type, this.before);
-  }
-};
-var Transform2D = defineComponent("Transform2D", {
-  x: 0,
-  y: 0,
-  width: 100,
-  height: 100,
-  rotation: 0
-});
-var WorldBounds = defineComponent("WorldBounds", {
-  worldX: 0,
-  worldY: 0,
-  worldWidth: 0,
-  worldHeight: 0
-});
-var ZIndex = defineComponent("ZIndex", { value: 0 });
-var Parent = defineComponent("Parent", { id: 0 });
-var Children = defineComponent("Children", { ids: [] });
-var Widget = defineComponent("Widget", {
-  surface: "dom",
-  type: ""
-});
-var WidgetData = defineComponent("WidgetData", {
-  data: {}
-});
-var WidgetBreakpoint = defineComponent("WidgetBreakpoint", {
-  current: "normal",
-  screenWidth: 0,
-  screenHeight: 0
-});
-var Container = defineComponent("Container", { enterable: true });
-var Hitbox = defineComponent("Hitbox", {
-  anchorX: 0,
-  anchorY: 0,
-  width: 0,
-  height: 0
-});
-var InteractionRole = defineComponent("InteractionRole", {
-  layer: 0,
-  role: { type: "canvas" }
-});
-var HandleSet = defineComponent("HandleSet", {
-  ids: []
-});
-var CursorHint = defineComponent("CursorHint", {
-  hover: "default",
-  active: "default"
-});
-var Selectable = defineTag("Selectable");
-var Draggable = defineTag("Draggable");
-var Resizable = defineTag("Resizable");
-var Locked = defineTag("Locked");
-var Selected = defineTag("Selected");
-var Active = defineTag("Active");
-var Visible = defineTag("Visible");
-
-// src/math.ts
-function worldBoundsToAABB(wb) {
-  return {
-    minX: wb.worldX,
-    minY: wb.worldY,
-    maxX: wb.worldX + wb.worldWidth,
-    maxY: wb.worldY + wb.worldHeight
-  };
-}
-function intersectsAABB(a, b) {
-  return a.maxX >= b.minX && a.minX <= b.maxX && a.maxY >= b.minY && a.minY <= b.maxY;
-}
-function pointInAABB(px, py, a) {
-  return px >= a.minX && px <= a.maxX && py >= a.minY && py <= a.maxY;
-}
-function screenToWorld(screenX, screenY, camera) {
-  return {
-    x: screenX / camera.zoom + camera.x,
-    y: screenY / camera.zoom + camera.y
-  };
-}
-function worldToScreen(worldX, worldY, camera) {
-  return {
-    x: (worldX - camera.x) * camera.zoom,
-    y: (worldY - camera.y) * camera.zoom
-  };
-}
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
-
-// src/profiler.ts
-var RING_SIZE = 300;
-var Profiler = class {
-  enabled = false;
-  ring = [];
-  writeIdx = 0;
-  filled = false;
-  // Scratch state for current frame
-  frameStart = 0;
-  currentSystems = {};
-  visibilityMs = 0;
-  currentTick = 0;
-  /** Enable/disable profiling. When disabled, all methods are no-ops. */
-  setEnabled(on) {
-    this.enabled = on;
-    if (!on) {
-      this.ring = [];
-      this.writeIdx = 0;
-      this.filled = false;
-    }
-  }
-  isEnabled() {
-    return this.enabled;
-  }
-  /** Call at the start of engine.tick() */
-  beginFrame(tick) {
-    if (!this.enabled) return;
-    this.currentTick = tick;
-    this.currentSystems = {};
-    this.visibilityMs = 0;
-    this.frameStart = performance.now();
-    performance.mark("ic-frame-start");
-  }
-  /** Call around each system execution */
-  beginSystem(name) {
-    if (!this.enabled) return;
-    performance.mark(`ic-sys-${name}-start`);
-  }
-  endSystem(name) {
-    if (!this.enabled) return;
-    performance.mark(`ic-sys-${name}-end`);
-    try {
-      const measure = performance.measure(
-        `ic:${name}`,
-        `ic-sys-${name}-start`,
-        `ic-sys-${name}-end`
-      );
-      this.currentSystems[name] = measure.duration;
-    } catch {
-    }
-    performance.clearMarks(`ic-sys-${name}-start`);
-    performance.clearMarks(`ic-sys-${name}-end`);
-  }
-  /** Call around the visibility computation phase */
-  beginVisibility() {
-    if (!this.enabled) return;
-    performance.mark("ic-vis-start");
-  }
-  endVisibility() {
-    if (!this.enabled) return;
-    performance.mark("ic-vis-end");
-    try {
-      const measure = performance.measure("ic:visibility", "ic-vis-start", "ic-vis-end");
-      this.visibilityMs = measure.duration;
-    } catch {
-    }
-    performance.clearMarks("ic-vis-start");
-    performance.clearMarks("ic-vis-end");
-  }
-  /** Call at the end of engine.tick() */
-  endFrame(entityCount, visibleCount) {
-    if (!this.enabled) return;
-    performance.mark("ic-frame-end");
-    let totalMs = 0;
-    try {
-      const measure = performance.measure("ic:frame", "ic-frame-start", "ic-frame-end");
-      totalMs = measure.duration;
-    } catch {
-      totalMs = performance.now() - this.frameStart;
-    }
-    performance.clearMarks("ic-frame-start");
-    performance.clearMarks("ic-frame-end");
-    const sample = {
-      tick: this.currentTick,
-      timestamp: performance.now(),
-      totalMs,
-      systems: { ...this.currentSystems },
-      visibilityMs: this.visibilityMs,
-      entityCount,
-      visibleCount
-    };
-    if (this.ring.length < RING_SIZE) {
-      this.ring.push(sample);
-    } else {
-      this.ring[this.writeIdx] = sample;
-    }
-    this.writeIdx = (this.writeIdx + 1) % RING_SIZE;
-    if (this.ring.length >= RING_SIZE) this.filled = true;
-  }
-  /** Get the last N frame samples (newest first) */
-  getSamples(count) {
-    const n = Math.min(count ?? this.ring.length, this.ring.length);
-    const result = [];
-    for (let i = 0; i < n; i++) {
-      const idx = (this.writeIdx - 1 - i + this.ring.length) % this.ring.length;
-      if (idx >= 0 && idx < this.ring.length) {
-        result.push(this.ring[idx]);
-      }
-    }
-    return result;
-  }
-  /** Compute rolling statistics from the ring buffer */
-  getStats() {
-    const samples = this.ring;
-    const n = samples.length;
-    if (n === 0) {
-      return {
-        fps: 0,
-        frameTime: { avg: 0, p50: 0, p95: 0, p99: 0, max: 0 },
-        systemAvg: {},
-        systemP95: {},
-        budgetUsed: 0,
-        sampleCount: 0
-      };
-    }
-    const frameTimes = samples.map((s) => s.totalMs).sort((a, b) => a - b);
-    const newest = samples[this.filled ? (this.writeIdx - 1 + RING_SIZE) % RING_SIZE : n - 1];
-    const oldest = samples[this.filled ? this.writeIdx : 0];
-    const spanMs = newest.timestamp - oldest.timestamp;
-    const fps = spanMs > 0 ? Math.round((n - 1) / spanMs * 1e3) : 0;
-    const percentile = (sorted, p) => {
-      const idx = Math.floor(p / 100 * (sorted.length - 1));
-      return sorted[idx] ?? 0;
-    };
-    const avg = frameTimes.reduce((a, b) => a + b, 0) / n;
-    const systemNames = /* @__PURE__ */ new Set();
-    for (const s of samples) {
-      for (const name of Object.keys(s.systems)) systemNames.add(name);
-    }
-    const systemAvg = {};
-    const systemP95 = {};
-    for (const name of systemNames) {
-      const times = samples.map((s) => s.systems[name] ?? 0).sort((a, b) => a - b);
-      systemAvg[name] = times.reduce((a, b) => a + b, 0) / n;
-      systemP95[name] = percentile(times, 95);
-    }
-    return {
-      fps,
-      frameTime: {
-        avg,
-        p50: percentile(frameTimes, 50),
-        p95: percentile(frameTimes, 95),
-        p99: percentile(frameTimes, 99),
-        max: frameTimes[frameTimes.length - 1]
-      },
-      systemAvg,
-      systemP95,
-      budgetUsed: avg / 16.67 * 100,
-      sampleCount: n
-    };
-  }
-  /** Clear all collected data */
-  clear() {
-    this.ring = [];
-    this.writeIdx = 0;
-    this.filled = false;
-  }
-};
-
-// src/react/registry.ts
-function createWidgetRegistry(defs = []) {
-  const map = /* @__PURE__ */ new Map();
-  for (const def of defs) map.set(def.type, def);
-  return {
-    register(def) {
-      map.set(def.type, def);
-    },
-    get(type) {
-      return map.get(type) ?? null;
-    },
-    getAll() {
-      return [...map.values()];
-    }
-  };
-}
-function isR3FWidget(widget) {
-  return widget.surface === "webgl";
-}
-var CursorResource = defineResource("Cursor", {
-  cursor: "default"
-});
-var CameraResource = defineResource("Camera", {
-  x: 0,
-  y: 0,
-  zoom: 1
-});
-var ViewportResource = defineResource("Viewport", {
-  width: 0,
-  height: 0,
-  dpr: 1
-});
-var ZoomConfigResource = defineResource("ZoomConfig", {
-  min: 0.1,
-  max: 5
-});
-var BreakpointConfigResource = defineResource("BreakpointConfig", {
-  micro: 40,
-  compact: 120,
-  normal: 500,
-  expanded: 1200
-});
-var NavigationStackResource = defineResource("NavigationStack", {
-  frames: [{ containerId: null, camera: { x: 0, y: 0, zoom: 1 } }],
-  changed: false
-});
-
-// src/snap.ts
-function computeSnapGuides(dragged, references, threshold) {
-  const guides = [];
-  const spacings = [];
-  let snapDx = 0;
-  let snapDy = 0;
-  const dLeft = dragged.x;
-  const dRight = dragged.x + dragged.width;
-  const dCenterX = dragged.x + dragged.width / 2;
-  const dTop = dragged.y;
-  const dBottom = dragged.y + dragged.height;
-  const dCenterY = dragged.y + dragged.height / 2;
-  let bestSnapX = Number.POSITIVE_INFINITY;
-  let bestSnapY = Number.POSITIVE_INFINITY;
-  let bestDx = 0;
-  let bestDy = 0;
-  const xGuides = [];
-  const yGuides = [];
-  for (const ref of references) {
-    const rLeft = ref.x;
-    const rRight = ref.x + ref.width;
-    const rCenterX = ref.x + ref.width / 2;
-    const rTop = ref.y;
-    const rBottom = ref.y + ref.height;
-    const rCenterY = ref.y + ref.height / 2;
-    const xPairs = [
-      [dLeft, rLeft, "edge"],
-      [dLeft, rRight, "edge"],
-      [dRight, rLeft, "edge"],
-      [dRight, rRight, "edge"],
-      [dCenterX, rCenterX, "center"],
-      [dLeft, rCenterX, "edge"],
-      [dRight, rCenterX, "edge"]
-    ];
-    for (const [dVal, rVal, type] of xPairs) {
-      const dist = Math.abs(dVal - rVal);
-      if (dist <= threshold) {
-        const dx = rVal - dVal;
-        if (dist < bestSnapX) {
-          bestSnapX = dist;
-          bestDx = dx;
-          xGuides.length = 0;
-        }
-        if (dist <= bestSnapX + 0.01) {
-          xGuides.push({ axis: "x", position: rVal, type });
-        }
-      }
-    }
-    const yPairs = [
-      [dTop, rTop, "edge"],
-      [dTop, rBottom, "edge"],
-      [dBottom, rTop, "edge"],
-      [dBottom, rBottom, "edge"],
-      [dCenterY, rCenterY, "center"],
-      [dTop, rCenterY, "edge"],
-      [dBottom, rCenterY, "edge"]
-    ];
-    for (const [dVal, rVal, type] of yPairs) {
-      const dist = Math.abs(dVal - rVal);
-      if (dist <= threshold) {
-        const dy = rVal - dVal;
-        if (dist < bestSnapY) {
-          bestSnapY = dist;
-          bestDy = dy;
-          yGuides.length = 0;
-        }
-        if (dist <= bestSnapY + 0.01) {
-          yGuides.push({ axis: "y", position: rVal, type });
-        }
-      }
-    }
-  }
-  const eqResult = computeEqualSpacing(dragged, references, threshold);
-  if (bestSnapX <= threshold) {
-    snapDx = bestDx;
-  } else if (eqResult.snapDx !== void 0) {
-    snapDx = eqResult.snapDx;
-  }
-  if (bestSnapY <= threshold) {
-    snapDy = bestDy;
-  } else if (eqResult.snapDy !== void 0) {
-    snapDy = eqResult.snapDy;
-  }
-  if (bestSnapX <= threshold) {
-    const seen = /* @__PURE__ */ new Set();
-    for (const g of xGuides) {
-      if (!seen.has(g.position)) {
-        seen.add(g.position);
-        guides.push(g);
-      }
-    }
-  }
-  if (bestSnapY <= threshold) {
-    const seen = /* @__PURE__ */ new Set();
-    for (const g of yGuides) {
-      if (!seen.has(g.position)) {
-        seen.add(g.position);
-        guides.push(g);
-      }
-    }
-  }
-  const snappedBounds = {
-    x: dragged.x + snapDx,
-    y: dragged.y + snapDy,
-    width: dragged.width,
-    height: dragged.height
-  };
-  const eqFinal = computeEqualSpacing(snappedBounds, references, threshold * 0.5);
-  spacings.push(...eqFinal.indicators);
-  return { snapDx, snapDy, guides, spacings };
-}
-function computeEqualSpacing(dragged, references, threshold) {
-  const indicators = [];
-  let snapDx;
-  let snapDy;
-  const xResult = checkAxisSpacing(dragged, references, threshold, "x");
-  if (xResult) {
-    snapDx = xResult.snap;
-    indicators.push(...xResult.indicators);
-  }
-  const yResult = checkAxisSpacing(dragged, references, threshold, "y");
-  if (yResult) {
-    snapDy = yResult.snap;
-    indicators.push(...yResult.indicators);
-  }
-  return { snapDx, snapDy, indicators };
-}
-function checkAxisSpacing(dragged, references, threshold, axis) {
-  const isX = axis === "x";
-  const pos = (b) => isX ? b.x : b.y;
-  const size = (b) => isX ? b.width : b.height;
-  const perpPos = (b) => isX ? b.y : b.x;
-  const perpSize = (b) => isX ? b.height : b.width;
-  const end = (b) => pos(b) + size(b);
-  const neighbors = references.filter(
-    (ref) => perpPos(ref) < perpPos(dragged) + perpSize(dragged) && perpPos(ref) + perpSize(ref) > perpPos(dragged)
-  );
-  if (neighbors.length < 1) return null;
-  const sorted = [...neighbors].sort((a, b) => pos(a) - pos(b));
-  const refGaps = [];
-  for (let i = 0; i < sorted.length - 1; i++) {
-    const gap = pos(sorted[i + 1]) - end(sorted[i]);
-    if (gap > 0.1) {
-      refGaps.push({ from: sorted[i], to: sorted[i + 1], gap });
-    }
-  }
-  let bestSnap = null;
-  let bestIndicators = [];
-  let bestDiff = Number.POSITIVE_INFINITY;
-  let leftN = null;
-  let rightN = null;
-  for (const ref of sorted) {
-    if (end(ref) <= pos(dragged) + threshold) {
-      if (!leftN || end(ref) > end(leftN)) leftN = ref;
-    }
-    if (pos(ref) >= end(dragged) - threshold) {
-      if (!rightN || pos(ref) < pos(rightN)) rightN = ref;
-    }
-  }
-  if (leftN && rightN) {
-    const lGap = pos(dragged) - end(leftN);
-    const rGap = pos(rightN) - end(dragged);
-    const diff = Math.abs(lGap - rGap);
-    if (diff <= threshold && diff < bestDiff) {
-      const idealPos = (end(leftN) + pos(rightN) - size(dragged)) / 2;
-      const snap = idealPos - pos(dragged);
-      const equalGap = (pos(rightN) - end(leftN) - size(dragged)) / 2;
-      if (equalGap > 0.1) {
-        const perpY = computePerpCenter(dragged, [leftN, rightN], isX);
-        bestSnap = snap;
-        bestDiff = diff;
-        bestIndicators = [
-          {
-            axis,
-            gap: equalGap,
-            segments: [
-              { from: end(leftN), to: idealPos },
-              { from: idealPos + size(dragged), to: pos(rightN) }
-            ],
-            perpPosition: perpY
-          }
-        ];
-      }
-    }
-  }
-  for (const refGap of refGaps) {
-    const patternGap = refGap.gap;
-    if (rightN === null || pos(refGap.to) >= end(dragged) - threshold * 2) {
-      const chainEnd = refGap.to;
-      const dragGap = pos(dragged) - end(chainEnd);
-      const diff = Math.abs(dragGap - patternGap);
-      if (diff <= threshold && diff < bestDiff) {
-        const idealPos = end(chainEnd) + patternGap;
-        const snap = idealPos - pos(dragged);
-        const perpY = computePerpCenter(dragged, [refGap.from, refGap.to], isX);
-        bestSnap = snap;
-        bestDiff = diff;
-        bestIndicators = [
-          {
-            axis,
-            gap: patternGap,
-            segments: [
-              { from: end(refGap.from), to: pos(refGap.to) },
-              { from: end(chainEnd), to: idealPos }
-            ],
-            perpPosition: perpY
-          }
-        ];
-      }
-    }
-    if (leftN === null || end(refGap.from) <= pos(dragged) + threshold * 2) {
-      const chainStart = refGap.from;
-      const dragGap = pos(chainStart) - end(dragged);
-      const diff = Math.abs(dragGap - patternGap);
-      if (diff <= threshold && diff < bestDiff) {
-        const idealPos = pos(chainStart) - patternGap - size(dragged);
-        const snap = idealPos - pos(dragged);
-        const perpY = computePerpCenter(dragged, [refGap.from, refGap.to], isX);
-        bestSnap = snap;
-        bestDiff = diff;
-        bestIndicators = [
-          {
-            axis,
-            gap: patternGap,
-            segments: [
-              { from: idealPos + size(dragged), to: pos(chainStart) },
-              { from: end(refGap.from), to: pos(refGap.to) }
-            ],
-            perpPosition: perpY
-          }
-        ];
-      }
-    }
-  }
-  if (bestSnap !== null) {
-    return { snap: bestSnap, indicators: bestIndicators };
-  }
-  return null;
-}
-function computePerpCenter(dragged, refs, isX) {
-  const perpPos = (b) => isX ? b.y : b.x;
-  const perpSize = (b) => isX ? b.height : b.width;
-  const allBounds = [dragged, ...refs];
-  const maxStart = Math.max(...allBounds.map(perpPos));
-  const minEnd = Math.min(...allBounds.map((b) => perpPos(b) + perpSize(b)));
-  if (minEnd < maxStart) {
-    return perpPos(allBounds[0]) + perpSize(allBounds[0]) / 2;
-  }
-  return maxStart + (minEnd - maxStart) / 2;
-}
-
-// ../../node_modules/.pnpm/quickselect@3.0.0/node_modules/quickselect/index.js
-function quickselect(arr, k, left = 0, right = arr.length - 1, compare = defaultCompare) {
-  while (right > left) {
-    if (right - left > 600) {
-      const n = right - left + 1;
-      const m = k - left + 1;
-      const z = Math.log(n);
-      const s = 0.5 * Math.exp(2 * z / 3);
-      const sd = 0.5 * Math.sqrt(z * s * (n - s) / n) * (m - n / 2 < 0 ? -1 : 1);
-      const newLeft = Math.max(left, Math.floor(k - m * s / n + sd));
-      const newRight = Math.min(right, Math.floor(k + (n - m) * s / n + sd));
-      quickselect(arr, k, newLeft, newRight, compare);
-    }
-    const t = arr[k];
-    let i = left;
-    let j = right;
-    swap(arr, left, k);
-    if (compare(arr[right], t) > 0) swap(arr, left, right);
-    while (i < j) {
-      swap(arr, i, j);
-      i++;
-      j--;
-      while (compare(arr[i], t) < 0) i++;
-      while (compare(arr[j], t) > 0) j--;
-    }
-    if (compare(arr[left], t) === 0) swap(arr, left, j);
-    else {
-      j++;
-      swap(arr, j, right);
-    }
-    if (j <= k) left = j + 1;
-    if (k <= j) right = j - 1;
-  }
-}
-function swap(arr, i, j) {
-  const tmp = arr[i];
-  arr[i] = arr[j];
-  arr[j] = tmp;
-}
-function defaultCompare(a, b) {
-  return a < b ? -1 : a > b ? 1 : 0;
-}
-
-// ../../node_modules/.pnpm/rbush@4.0.1/node_modules/rbush/index.js
-var RBush = class {
-  constructor(maxEntries = 9) {
-    this._maxEntries = Math.max(4, maxEntries);
-    this._minEntries = Math.max(2, Math.ceil(this._maxEntries * 0.4));
-    this.clear();
-  }
-  all() {
-    return this._all(this.data, []);
-  }
-  search(bbox) {
-    let node = this.data;
-    const result = [];
-    if (!intersects(bbox, node)) return result;
-    const toBBox = this.toBBox;
-    const nodesToSearch = [];
-    while (node) {
-      for (let i = 0; i < node.children.length; i++) {
-        const child = node.children[i];
-        const childBBox = node.leaf ? toBBox(child) : child;
-        if (intersects(bbox, childBBox)) {
-          if (node.leaf) result.push(child);
-          else if (contains(bbox, childBBox)) this._all(child, result);
-          else nodesToSearch.push(child);
-        }
-      }
-      node = nodesToSearch.pop();
-    }
-    return result;
-  }
-  collides(bbox) {
-    let node = this.data;
-    if (!intersects(bbox, node)) return false;
-    const nodesToSearch = [];
-    while (node) {
-      for (let i = 0; i < node.children.length; i++) {
-        const child = node.children[i];
-        const childBBox = node.leaf ? this.toBBox(child) : child;
-        if (intersects(bbox, childBBox)) {
-          if (node.leaf || contains(bbox, childBBox)) return true;
-          nodesToSearch.push(child);
-        }
-      }
-      node = nodesToSearch.pop();
-    }
-    return false;
-  }
-  load(data) {
-    if (!(data && data.length)) return this;
-    if (data.length < this._minEntries) {
-      for (let i = 0; i < data.length; i++) {
-        this.insert(data[i]);
-      }
-      return this;
-    }
-    let node = this._build(data.slice(), 0, data.length - 1, 0);
-    if (!this.data.children.length) {
-      this.data = node;
-    } else if (this.data.height === node.height) {
-      this._splitRoot(this.data, node);
-    } else {
-      if (this.data.height < node.height) {
-        const tmpNode = this.data;
-        this.data = node;
-        node = tmpNode;
-      }
-      this._insert(node, this.data.height - node.height - 1, true);
-    }
-    return this;
-  }
-  insert(item) {
-    if (item) this._insert(item, this.data.height - 1);
-    return this;
-  }
-  clear() {
-    this.data = createNode([]);
-    return this;
-  }
-  remove(item, equalsFn) {
-    if (!item) return this;
-    let node = this.data;
-    const bbox = this.toBBox(item);
-    const path = [];
-    const indexes = [];
-    let i, parent, goingUp;
-    while (node || path.length) {
-      if (!node) {
-        node = path.pop();
-        parent = path[path.length - 1];
-        i = indexes.pop();
-        goingUp = true;
-      }
-      if (node.leaf) {
-        const index = findItem(item, node.children, equalsFn);
-        if (index !== -1) {
-          node.children.splice(index, 1);
-          path.push(node);
-          this._condense(path);
-          return this;
-        }
-      }
-      if (!goingUp && !node.leaf && contains(node, bbox)) {
-        path.push(node);
-        indexes.push(i);
-        i = 0;
-        parent = node;
-        node = node.children[0];
-      } else if (parent) {
-        i++;
-        node = parent.children[i];
-        goingUp = false;
-      } else node = null;
-    }
-    return this;
-  }
-  toBBox(item) {
-    return item;
-  }
-  compareMinX(a, b) {
-    return a.minX - b.minX;
-  }
-  compareMinY(a, b) {
-    return a.minY - b.minY;
-  }
-  toJSON() {
-    return this.data;
-  }
-  fromJSON(data) {
-    this.data = data;
-    return this;
-  }
-  _all(node, result) {
-    const nodesToSearch = [];
-    while (node) {
-      if (node.leaf) result.push(...node.children);
-      else nodesToSearch.push(...node.children);
-      node = nodesToSearch.pop();
-    }
-    return result;
-  }
-  _build(items, left, right, height) {
-    const N = right - left + 1;
-    let M = this._maxEntries;
-    let node;
-    if (N <= M) {
-      node = createNode(items.slice(left, right + 1));
-      calcBBox(node, this.toBBox);
-      return node;
-    }
-    if (!height) {
-      height = Math.ceil(Math.log(N) / Math.log(M));
-      M = Math.ceil(N / Math.pow(M, height - 1));
-    }
-    node = createNode([]);
-    node.leaf = false;
-    node.height = height;
-    const N2 = Math.ceil(N / M);
-    const N1 = N2 * Math.ceil(Math.sqrt(M));
-    multiSelect(items, left, right, N1, this.compareMinX);
-    for (let i = left; i <= right; i += N1) {
-      const right2 = Math.min(i + N1 - 1, right);
-      multiSelect(items, i, right2, N2, this.compareMinY);
-      for (let j = i; j <= right2; j += N2) {
-        const right3 = Math.min(j + N2 - 1, right2);
-        node.children.push(this._build(items, j, right3, height - 1));
-      }
-    }
-    calcBBox(node, this.toBBox);
-    return node;
-  }
-  _chooseSubtree(bbox, node, level, path) {
-    while (true) {
-      path.push(node);
-      if (node.leaf || path.length - 1 === level) break;
-      let minArea = Infinity;
-      let minEnlargement = Infinity;
-      let targetNode;
-      for (let i = 0; i < node.children.length; i++) {
-        const child = node.children[i];
-        const area = bboxArea(child);
-        const enlargement = enlargedArea(bbox, child) - area;
-        if (enlargement < minEnlargement) {
-          minEnlargement = enlargement;
-          minArea = area < minArea ? area : minArea;
-          targetNode = child;
-        } else if (enlargement === minEnlargement) {
-          if (area < minArea) {
-            minArea = area;
-            targetNode = child;
-          }
-        }
-      }
-      node = targetNode || node.children[0];
-    }
-    return node;
-  }
-  _insert(item, level, isNode) {
-    const bbox = isNode ? item : this.toBBox(item);
-    const insertPath = [];
-    const node = this._chooseSubtree(bbox, this.data, level, insertPath);
-    node.children.push(item);
-    extend(node, bbox);
-    while (level >= 0) {
-      if (insertPath[level].children.length > this._maxEntries) {
-        this._split(insertPath, level);
-        level--;
-      } else break;
-    }
-    this._adjustParentBBoxes(bbox, insertPath, level);
-  }
-  // split overflowed node into two
-  _split(insertPath, level) {
-    const node = insertPath[level];
-    const M = node.children.length;
-    const m = this._minEntries;
-    this._chooseSplitAxis(node, m, M);
-    const splitIndex = this._chooseSplitIndex(node, m, M);
-    const newNode = createNode(node.children.splice(splitIndex, node.children.length - splitIndex));
-    newNode.height = node.height;
-    newNode.leaf = node.leaf;
-    calcBBox(node, this.toBBox);
-    calcBBox(newNode, this.toBBox);
-    if (level) insertPath[level - 1].children.push(newNode);
-    else this._splitRoot(node, newNode);
-  }
-  _splitRoot(node, newNode) {
-    this.data = createNode([node, newNode]);
-    this.data.height = node.height + 1;
-    this.data.leaf = false;
-    calcBBox(this.data, this.toBBox);
-  }
-  _chooseSplitIndex(node, m, M) {
-    let index;
-    let minOverlap = Infinity;
-    let minArea = Infinity;
-    for (let i = m; i <= M - m; i++) {
-      const bbox1 = distBBox(node, 0, i, this.toBBox);
-      const bbox2 = distBBox(node, i, M, this.toBBox);
-      const overlap = intersectionArea(bbox1, bbox2);
-      const area = bboxArea(bbox1) + bboxArea(bbox2);
-      if (overlap < minOverlap) {
-        minOverlap = overlap;
-        index = i;
-        minArea = area < minArea ? area : minArea;
-      } else if (overlap === minOverlap) {
-        if (area < minArea) {
-          minArea = area;
-          index = i;
-        }
-      }
-    }
-    return index || M - m;
-  }
-  // sorts node children by the best axis for split
-  _chooseSplitAxis(node, m, M) {
-    const compareMinX = node.leaf ? this.compareMinX : compareNodeMinX;
-    const compareMinY = node.leaf ? this.compareMinY : compareNodeMinY;
-    const xMargin = this._allDistMargin(node, m, M, compareMinX);
-    const yMargin = this._allDistMargin(node, m, M, compareMinY);
-    if (xMargin < yMargin) node.children.sort(compareMinX);
-  }
-  // total margin of all possible split distributions where each node is at least m full
-  _allDistMargin(node, m, M, compare) {
-    node.children.sort(compare);
-    const toBBox = this.toBBox;
-    const leftBBox = distBBox(node, 0, m, toBBox);
-    const rightBBox = distBBox(node, M - m, M, toBBox);
-    let margin = bboxMargin(leftBBox) + bboxMargin(rightBBox);
-    for (let i = m; i < M - m; i++) {
-      const child = node.children[i];
-      extend(leftBBox, node.leaf ? toBBox(child) : child);
-      margin += bboxMargin(leftBBox);
-    }
-    for (let i = M - m - 1; i >= m; i--) {
-      const child = node.children[i];
-      extend(rightBBox, node.leaf ? toBBox(child) : child);
-      margin += bboxMargin(rightBBox);
-    }
-    return margin;
-  }
-  _adjustParentBBoxes(bbox, path, level) {
-    for (let i = level; i >= 0; i--) {
-      extend(path[i], bbox);
-    }
-  }
-  _condense(path) {
-    for (let i = path.length - 1, siblings; i >= 0; i--) {
-      if (path[i].children.length === 0) {
-        if (i > 0) {
-          siblings = path[i - 1].children;
-          siblings.splice(siblings.indexOf(path[i]), 1);
-        } else this.clear();
-      } else calcBBox(path[i], this.toBBox);
-    }
-  }
-};
-function findItem(item, items, equalsFn) {
-  if (!equalsFn) return items.indexOf(item);
-  for (let i = 0; i < items.length; i++) {
-    if (equalsFn(item, items[i])) return i;
-  }
-  return -1;
-}
-function calcBBox(node, toBBox) {
-  distBBox(node, 0, node.children.length, toBBox, node);
-}
-function distBBox(node, k, p, toBBox, destNode) {
-  if (!destNode) destNode = createNode(null);
-  destNode.minX = Infinity;
-  destNode.minY = Infinity;
-  destNode.maxX = -Infinity;
-  destNode.maxY = -Infinity;
-  for (let i = k; i < p; i++) {
-    const child = node.children[i];
-    extend(destNode, node.leaf ? toBBox(child) : child);
-  }
-  return destNode;
-}
-function extend(a, b) {
-  a.minX = Math.min(a.minX, b.minX);
-  a.minY = Math.min(a.minY, b.minY);
-  a.maxX = Math.max(a.maxX, b.maxX);
-  a.maxY = Math.max(a.maxY, b.maxY);
-  return a;
-}
-function compareNodeMinX(a, b) {
-  return a.minX - b.minX;
-}
-function compareNodeMinY(a, b) {
-  return a.minY - b.minY;
-}
-function bboxArea(a) {
-  return (a.maxX - a.minX) * (a.maxY - a.minY);
-}
-function bboxMargin(a) {
-  return a.maxX - a.minX + (a.maxY - a.minY);
-}
-function enlargedArea(a, b) {
-  return (Math.max(b.maxX, a.maxX) - Math.min(b.minX, a.minX)) * (Math.max(b.maxY, a.maxY) - Math.min(b.minY, a.minY));
-}
-function intersectionArea(a, b) {
-  const minX = Math.max(a.minX, b.minX);
-  const minY = Math.max(a.minY, b.minY);
-  const maxX = Math.min(a.maxX, b.maxX);
-  const maxY = Math.min(a.maxY, b.maxY);
-  return Math.max(0, maxX - minX) * Math.max(0, maxY - minY);
-}
-function contains(a, b) {
-  return a.minX <= b.minX && a.minY <= b.minY && b.maxX <= a.maxX && b.maxY <= a.maxY;
-}
-function intersects(a, b) {
-  return b.minX <= a.maxX && b.minY <= a.maxY && b.maxX >= a.minX && b.maxY >= a.minY;
-}
-function createNode(children) {
-  return {
-    children,
-    height: 1,
-    leaf: true,
-    minX: Infinity,
-    minY: Infinity,
-    maxX: -Infinity,
-    maxY: -Infinity
-  };
-}
-function multiSelect(arr, left, right, n, compare) {
-  const stack = [left, right];
-  while (stack.length) {
-    right = stack.pop();
-    left = stack.pop();
-    if (right - left <= n) continue;
-    const mid = left + Math.ceil((right - left) / n / 2) * n;
-    quickselect(arr, mid, left, right, compare);
-    stack.push(left, mid, mid, right);
-  }
-}
-
-// src/spatial.ts
-var rbushModule = RBush;
-var RBush2 = typeof rbushModule.default === "function" ? rbushModule.default : RBush;
-var SpatialIndex = class {
-  tree = new RBush2();
-  entries = /* @__PURE__ */ new Map();
-  upsert(entityId, bounds) {
-    const existing = this.entries.get(entityId);
-    if (existing) {
-      this.tree.remove(existing);
-    }
-    const entry = { ...bounds, entityId };
-    this.entries.set(entityId, entry);
-    this.tree.insert(entry);
-  }
-  remove(entityId) {
-    const existing = this.entries.get(entityId);
-    if (existing) {
-      this.tree.remove(existing);
-      this.entries.delete(entityId);
-    }
-  }
-  /** Query all entries intersecting the given AABB */
-  search(bounds) {
-    return this.tree.search(bounds);
-  }
-  /** Find the topmost entity at a point (by z-order — caller sorts) */
-  searchPoint(x, y, tolerance = 0) {
-    return this.tree.search({
-      minX: x - tolerance,
-      minY: y - tolerance,
-      maxX: x + tolerance,
-      maxY: y + tolerance
-    });
-  }
-  clear() {
-    this.tree.clear();
-    this.entries.clear();
-  }
-  get size() {
-    return this.entries.size;
-  }
-};
-var transformPropagateSystem = defineSystem({
-  name: "transformPropagate",
-  execute: (world) => {
-    const changed = world.queryChanged(Transform2D);
-    const processed = /* @__PURE__ */ new Set();
-    for (const entity of changed) {
-      propagateEntity(world, entity, processed);
-    }
-    for (const entity of world.queryAdded(Transform2D)) {
-      if (!processed.has(entity)) {
-        propagateEntity(world, entity, processed);
-      }
-    }
-  }
-});
-function propagateEntity(world, entity, processed) {
-  if (processed.has(entity)) return;
-  processed.add(entity);
-  const transform = world.getComponent(entity, Transform2D);
-  if (!transform) return;
-  let worldX = transform.x;
-  let worldY = transform.y;
-  const parentComp = world.getComponent(entity, Parent);
-  if (parentComp && world.entityExists(parentComp.id)) {
-    if (!processed.has(parentComp.id)) {
-      propagateEntity(world, parentComp.id, processed);
-    }
-    const parentBounds = world.getComponent(parentComp.id, WorldBounds);
-    if (parentBounds) {
-      worldX += parentBounds.worldX;
-      worldY += parentBounds.worldY;
-    }
-  }
-  if (!world.hasComponent(entity, WorldBounds)) {
-    world.addComponent(entity, WorldBounds, {
-      worldX,
-      worldY,
-      worldWidth: transform.width,
-      worldHeight: transform.height
-    });
-  } else {
-    world.setComponent(entity, WorldBounds, {
-      worldX,
-      worldY,
-      worldWidth: transform.width,
-      worldHeight: transform.height
-    });
-  }
-  const children = world.getComponent(entity, Children);
-  if (children) {
-    for (const childId of children.ids) {
-      propagateEntity(world, childId, processed);
-    }
-  }
-}
-var HANDLE_SPECS = [
-  { pos: "nw", ax: 0, ay: 0, layer: 15, cursor: "nw-resize" },
-  { pos: "ne", ax: 1, ay: 0, layer: 15, cursor: "ne-resize" },
-  { pos: "sw", ax: 0, ay: 1, layer: 15, cursor: "sw-resize" },
-  { pos: "se", ax: 1, ay: 1, layer: 15, cursor: "se-resize" },
-  { pos: "n", ax: 0.5, ay: 0, layer: 10, cursor: "n-resize" },
-  { pos: "s", ax: 0.5, ay: 1, layer: 10, cursor: "s-resize" },
-  { pos: "w", ax: 0, ay: 0.5, layer: 10, cursor: "w-resize" },
-  { pos: "e", ax: 1, ay: 0.5, layer: 10, cursor: "e-resize" }
-];
-function spawnResizeHandles(world, parentId) {
-  const S = HANDLE_HIT_SIZE_PX;
-  const parentActive = world.hasTag(parentId, Active);
-  const ids = [];
-  for (const spec of HANDLE_SPECS) {
-    const id = world.createEntity();
-    world.addComponent(id, Parent, { id: parentId });
-    world.addComponent(id, Hitbox, {
-      anchorX: spec.ax,
-      anchorY: spec.ay,
-      width: S,
-      height: S
-    });
-    world.addComponent(id, InteractionRole, {
-      layer: spec.layer,
-      role: { type: "resize", handle: spec.pos }
-    });
-    world.addComponent(id, CursorHint, { hover: spec.cursor, active: spec.cursor });
-    if (parentActive) world.addTag(id, Active);
-    ids.push(id);
-  }
-  world.addComponent(parentId, HandleSet, { ids });
-}
-function despawnHandles(world, parentId) {
-  const set = world.getComponent(parentId, HandleSet);
-  if (!set) return;
-  for (const id of set.ids) {
-    if (world.entityExists(id)) world.destroyEntity(id);
-  }
-  world.removeComponent(parentId, HandleSet);
-}
-var handleSyncSystem = defineSystem({
-  name: "handleSync",
-  after: "transformPropagate",
-  before: "hitboxWorldBounds",
-  execute: (world) => {
-    const selectedResizable = [];
-    for (const entity of world.queryTagged(Resizable)) {
-      if (world.hasTag(entity, Selected)) selectedResizable.push(entity);
-    }
-    const shouldSpawn = selectedResizable.length === 1 ? selectedResizable[0] : null;
-    const owners = world.query(HandleSet).slice();
-    for (const parentId of owners) {
-      if (parentId !== shouldSpawn) despawnHandles(world, parentId);
-    }
-    if (shouldSpawn !== null && !world.hasComponent(shouldSpawn, HandleSet)) {
-      spawnResizeHandles(world, shouldSpawn);
-    }
-    for (const entity of world.query(Hitbox, Parent).slice()) {
-      const parent = world.getComponent(entity, Parent);
-      if (!parent || !world.entityExists(parent.id)) {
-        const role = world.getComponent(entity, InteractionRole);
-        if (role && (role.role.type === "resize" || role.role.type === "rotate")) {
-          world.destroyEntity(entity);
-        }
-      }
-    }
-  }
-});
-var hitboxWorldBoundsSystem = defineSystem({
-  name: "hitboxWorldBounds",
-  after: "transformPropagate",
-  execute: (world) => {
-    for (const entity of world.query(Hitbox, Parent)) {
-      const parentRef = world.getComponent(entity, Parent);
-      if (!parentRef) continue;
-      if (!world.entityExists(parentRef.id)) continue;
-      const parentWB = world.getComponent(parentRef.id, WorldBounds);
-      if (!parentWB) continue;
-      const hb = world.getComponent(entity, Hitbox);
-      if (!hb) continue;
-      const cx = parentWB.worldX + parentWB.worldWidth * hb.anchorX;
-      const cy = parentWB.worldY + parentWB.worldHeight * hb.anchorY;
-      const next = {
-        worldX: cx - hb.width / 2,
-        worldY: cy - hb.height / 2,
-        worldWidth: hb.width,
-        worldHeight: hb.height
-      };
-      if (world.hasComponent(entity, WorldBounds)) {
-        world.setComponent(entity, WorldBounds, next);
-      } else {
-        world.addComponent(entity, WorldBounds, next);
-      }
-    }
-  }
-});
-var navigationFilterSystem = defineSystem({
-  name: "navigationFilter",
-  after: "transformPropagate",
-  execute: (world) => {
-    const navStack = world.getResource(NavigationStackResource);
-    if (!navStack.changed) return;
-    const currentFrame = navStack.frames[navStack.frames.length - 1];
-    for (const entity of world.queryTagged(Active)) {
-      world.removeTag(entity, Active);
-    }
-    if (currentFrame.containerId === null) {
-      for (const entity of world.query(Transform2D)) {
-        if (!world.hasComponent(entity, Parent)) {
-          world.addTag(entity, Active);
-        }
-      }
-    } else {
-      const children = world.getComponent(currentFrame.containerId, Children);
-      if (children) {
-        for (const childId of children.ids) {
-          world.addTag(childId, Active);
-        }
-      }
-    }
-    navStack.changed = false;
-  }
-});
-var cullSystem = defineSystem({
-  name: "cull",
-  after: "navigationFilter",
-  execute: (world) => {
-    const camera = world.getResource(CameraResource);
-    const viewport = world.getResource(ViewportResource);
-    if (viewport.width === 0 || viewport.height === 0) return;
-    const res = world.getResource(SpatialIndexResource);
-    const spatialIndex = res.instance;
-    const overscan = 200 / camera.zoom;
-    const vpWorldAABB = {
-      minX: camera.x - overscan,
-      minY: camera.y - overscan,
-      maxX: camera.x + viewport.width / camera.zoom + overscan,
-      maxY: camera.y + viewport.height / camera.zoom + overscan
-    };
-    for (const entity of world.queryTagged(Visible)) {
-      world.removeTag(entity, Visible);
-    }
-    if (spatialIndex && spatialIndex.size > 0) {
-      const candidates = spatialIndex.search(vpWorldAABB);
-      for (const entry of candidates) {
-        if (world.hasTag(entry.entityId, Active)) {
-          world.addTag(entry.entityId, Visible);
-        }
-      }
-    } else {
-      for (const entity of world.queryTagged(Active)) {
-        const wb = world.getComponent(entity, WorldBounds);
-        if (wb && intersectsAABB(worldBoundsToAABB(wb), vpWorldAABB)) {
-          world.addTag(entity, Visible);
-        }
-      }
-    }
-  }
-});
-var breakpointSystem = defineSystem({
-  name: "breakpoint",
-  after: "cull",
-  execute: (world) => {
-    const camera = world.getResource(CameraResource);
-    const config = world.getResource(BreakpointConfigResource);
-    for (const entity of world.query(Widget, Visible)) {
-      const transform = world.getComponent(entity, Transform2D);
-      if (!transform) continue;
-      const screenWidth = transform.width * camera.zoom;
-      const screenHeight = transform.height * camera.zoom;
-      let bp;
-      if (screenWidth < config.micro) bp = "micro";
-      else if (screenWidth < config.compact) bp = "compact";
-      else if (screenWidth < config.normal) bp = "normal";
-      else if (screenWidth < config.expanded) bp = "expanded";
-      else bp = "detailed";
-      const existing = world.getComponent(entity, WidgetBreakpoint);
-      if (!existing) {
-        world.addComponent(entity, WidgetBreakpoint, {
-          current: bp,
-          screenWidth,
-          screenHeight
-        });
-      } else {
-        const bpChanged = existing.current !== bp;
-        const sizeChanged = Math.round(existing.screenWidth) !== Math.round(screenWidth) || Math.round(existing.screenHeight) !== Math.round(screenHeight);
-        if (bpChanged || sizeChanged) {
-          world.setComponent(entity, WidgetBreakpoint, {
-            current: bp,
-            screenWidth,
-            screenHeight
-          });
-        }
-      }
-    }
-  }
-});
-var sortSystem = defineSystem({
-  name: "sort",
-  after: "breakpoint",
-  execute: (_world) => {
-  }
-});
-
-// src/engine.ts
-var SpatialIndexResource = defineResource("SpatialIndex", {
-  instance: null
-});
-function createLayoutEngine(config) {
-  const world = createWorld();
-  const scheduler = new SystemScheduler();
-  const spatialIndex = new SpatialIndex();
-  const profiler = new Profiler();
-  scheduler.profiler = profiler;
-  world.setResource(SpatialIndexResource, { instance: spatialIndex });
-  const commandBuffer = new CommandBuffer();
-  const widgetRegistry = createWidgetRegistry();
-  const archetypeRegistry = createArchetypeRegistry();
-  if (config?.zoom) {
-    world.setResource(ZoomConfigResource, config.zoom);
-  }
-  if (config?.breakpoints) {
-    world.setResource(BreakpointConfigResource, config.breakpoints);
-  }
-  let snapEnabledInit = true;
-  let snapThresholdInit = 5;
-  if (config?.snap?.enabled !== void 0) snapEnabledInit = config.snap.enabled;
-  if (config?.snap?.threshold !== void 0) snapThresholdInit = config.snap.threshold;
-  scheduler.register(transformPropagateSystem);
-  scheduler.register(handleSyncSystem);
-  scheduler.register(hitboxWorldBoundsSystem);
-  scheduler.register(navigationFilterSystem);
-  scheduler.register(cullSystem);
-  scheduler.register(breakpointSystem);
-  scheduler.register(sortSystem);
-  const unsubscribers = [];
-  unsubscribers.push(
-    world.onComponentChanged(WorldBounds, (entityId, _prev, wb) => {
-      if (wb) {
-        spatialIndex.upsert(entityId, worldBoundsToAABB(wb));
-      }
-    })
-  );
-  unsubscribers.push(
-    world.onEntityDestroyed((entity) => {
-      spatialIndex.remove(entity);
-    })
-  );
-  function refreshInteractionRole(entity) {
-    const current = world.getComponent(entity, InteractionRole);
-    if (current && current.role.type !== "drag" && current.role.type !== "select" && current.role.type !== "canvas") {
-      return;
-    }
-    const hasDraggable = world.hasTag(entity, Draggable);
-    const hasSelectable = world.hasTag(entity, Selectable);
-    const desiredRole = hasDraggable ? { type: "drag" } : hasSelectable ? { type: "select" } : null;
-    if (desiredRole === null) {
-      if (current) world.removeComponent(entity, InteractionRole);
-      if (world.hasComponent(entity, CursorHint)) world.removeComponent(entity, CursorHint);
-      return;
-    }
-    if (!current) {
-      world.addComponent(entity, InteractionRole, { layer: 5, role: desiredRole });
-    } else if (current.role.type !== desiredRole.type) {
-      world.setComponent(entity, InteractionRole, { role: desiredRole });
-    }
-    if (desiredRole.type === "drag" && !world.hasComponent(entity, CursorHint)) {
-      world.addComponent(entity, CursorHint, { hover: "grab", active: "grabbing" });
-    }
-  }
-  unsubscribers.push(world.onTagAdded(Draggable, refreshInteractionRole));
-  unsubscribers.push(world.onTagRemoved(Draggable, refreshInteractionRole));
-  unsubscribers.push(world.onTagAdded(Selectable, refreshInteractionRole));
-  unsubscribers.push(world.onTagRemoved(Selectable, refreshInteractionRole));
-  if (config?.widgets) {
-    for (const w of config.widgets) widgetRegistry.register(w);
-  }
-  if (config?.archetypes) {
-    for (const a of config.archetypes) archetypeRegistry.register(a);
-  }
-  world.setResource(NavigationStackResource, { changed: true });
-  let inputState = { mode: "idle" };
-  let hoveredEntity = null;
-  let snapEnabled = snapEnabledInit;
-  let snapThreshold = snapThresholdInit;
-  let currentSnap = { snapDx: 0, snapDy: 0, guides: [], spacings: [] };
-  let dirty = false;
-  let cameraChangedThisTick = false;
-  let selectionChangedThisTick = false;
-  let prevVisible = /* @__PURE__ */ new Set();
-  let currentVisible = [];
-  let frameChanges = {
-    positionsChanged: [],
-    breakpointsChanged: [],
-    entered: [],
-    exited: [],
-    cameraChanged: false,
-    navigationChanged: false,
-    selectionChanged: false
-  };
-  function markDirtyInternal() {
-    dirty = true;
-  }
-  function hitTest(screenX, screenY) {
-    const camera = world.getResource(CameraResource);
-    const worldPos = screenToWorld(screenX, screenY, camera);
-    const candidates = spatialIndex.searchPoint(worldPos.x, worldPos.y, 0);
-    const interactable = [];
-    for (const c of candidates) {
-      if (!world.hasTag(c.entityId, Active)) continue;
-      const role = world.getComponent(c.entityId, InteractionRole);
-      if (!role) continue;
-      interactable.push({ entityId: c.entityId, role });
-    }
-    if (interactable.length === 0) return null;
-    interactable.sort((a, b) => {
-      if (b.role.layer !== a.role.layer) return b.role.layer - a.role.layer;
-      const zA = world.getComponent(a.entityId, ZIndex)?.value ?? 0;
-      const zB = world.getComponent(b.entityId, ZIndex)?.value ?? 0;
-      return zB - zA;
-    });
-    return interactable[0];
-  }
-  function cursorSystem() {
-    let cursor = "default";
-    switch (inputState.mode) {
-      case "idle":
-      case "marquee": {
-        if (hoveredEntity !== null) {
-          cursor = world.getComponent(hoveredEntity, CursorHint)?.hover ?? "default";
-        }
-        break;
-      }
-      case "tracking": {
-        cursor = world.getComponent(inputState.entityId, CursorHint)?.hover ?? "default";
-        break;
-      }
-      case "dragging": {
-        cursor = world.getComponent(inputState.entityId, CursorHint)?.active ?? "grabbing";
-        break;
-      }
-      case "resizing": {
-        cursor = world.getComponent(inputState.handleEntityId, CursorHint)?.active ?? "default";
-        break;
-      }
-    }
-    world.setResource(CursorResource, { cursor });
-  }
-  function selectEntity(entity, additive) {
-    if (!world.hasTag(entity, Selectable)) return;
-    if (additive) {
-      if (world.hasTag(entity, Selected)) {
-        world.removeTag(entity, Selected);
-      } else {
-        world.addTag(entity, Selected);
-      }
-    } else {
-      for (const e of world.queryTagged(Selected)) {
-        if (e !== entity) world.removeTag(e, Selected);
-      }
-      world.addTag(entity, Selected);
-    }
-    selectionChangedThisTick = true;
-  }
-  function clearSelection() {
-    const selected = world.queryTagged(Selected);
-    if (selected.length > 0) {
-      for (const e of selected) {
-        world.removeTag(e, Selected);
-      }
-      selectionChangedThisTick = true;
-    }
-  }
-  const engine = {
-    world,
-    // === Entity CRUD ===
-    createEntity(inits) {
-      const entity = world.createEntity();
-      if (inits) {
-        for (const init of inits) {
-          const type = init[0];
-          if (type.__kind === "tag") {
-            world.addTag(entity, type);
-          } else {
-            world.addComponent(entity, type, init[1] ?? {});
-          }
-        }
-      }
-      markDirtyInternal();
-      return entity;
-    },
-    spawn(id, opts = {}) {
-      const archetype = archetypeRegistry.get(id);
-      const widgetTypeId = archetype?.widget ?? id;
-      const widget = widgetRegistry.get(widgetTypeId);
-      const surface = widget?.surface ?? "dom";
-      const defaultData = widget?.defaultData ?? {};
-      const defaultSize = archetype?.defaultSize ?? widget?.defaultSize ?? { width: 100, height: 100 };
-      const position = opts.at ?? { x: 0, y: 0 };
-      const size = opts.size ?? defaultSize;
-      const data = { ...defaultData, ...opts.data };
-      const inits = [
-        [
-          Transform2D,
-          {
-            x: position.x,
-            y: position.y,
-            width: size.width,
-            height: size.height,
-            rotation: opts.rotation ?? 0
-          }
-        ],
-        [Widget, { surface, type: widgetTypeId }],
-        [WidgetData, { data }],
-        [ZIndex, { value: opts.zIndex ?? 0 }]
-      ];
-      if (archetype?.components) {
-        for (const init of archetype.components) inits.push(init);
-      }
-      if (opts.parent !== void 0) {
-        inits.push([Parent, { id: opts.parent }]);
-      }
-      if (archetype?.interactive !== false) {
-        inits.push([Selectable]);
-        inits.push([Draggable]);
-        inits.push([Resizable]);
-      }
-      if (archetype?.tags) {
-        for (const tag of archetype.tags) inits.push([tag]);
-      }
-      return engine.createEntity(inits);
-    },
-    registerWidget(widget) {
-      widgetRegistry.register(widget);
-    },
-    getWidget(type) {
-      return widgetRegistry.get(type);
-    },
-    getWidgets() {
-      return widgetRegistry.getAll();
-    },
-    registerArchetype(archetype) {
-      archetypeRegistry.register(archetype);
-    },
-    getArchetype(id) {
-      return archetypeRegistry.get(id);
-    },
-    destroyEntity(id) {
-      const set = world.getComponent(id, HandleSet);
-      if (set) {
-        for (const handleId of set.ids) {
-          if (world.entityExists(handleId)) {
-            spatialIndex.remove(handleId);
-            world.destroyEntity(handleId);
-          }
-        }
-      }
-      spatialIndex.remove(id);
-      world.destroyEntity(id);
-      markDirtyInternal();
-    },
-    get(entity, type) {
-      return world.getComponent(entity, type);
-    },
-    set(entity, type, data) {
-      world.setComponent(entity, type, data);
-      markDirtyInternal();
-    },
-    has(entity, type) {
-      if (type.__kind === "tag") return world.hasTag(entity, type);
-      return world.hasComponent(entity, type);
-    },
-    // === Extensions ===
-    registerSystem(system) {
-      scheduler.register(system);
-    },
-    removeSystem(name) {
-      scheduler.remove(name);
-    },
-    // === Camera ===
-    getCamera() {
-      return world.getResource(CameraResource);
-    },
-    panBy(dx, dy) {
-      const camera = world.getResource(CameraResource);
-      camera.x -= dx / camera.zoom;
-      camera.y -= dy / camera.zoom;
-      cameraChangedThisTick = true;
-      markDirtyInternal();
-    },
-    panTo(worldX, worldY) {
-      const camera = world.getResource(CameraResource);
-      const viewport = world.getResource(ViewportResource);
-      camera.x = worldX - viewport.width / (2 * camera.zoom);
-      camera.y = worldY - viewport.height / (2 * camera.zoom);
-      cameraChangedThisTick = true;
-      markDirtyInternal();
-    },
-    zoomAtPoint(screenX, screenY, delta) {
-      const camera = world.getResource(CameraResource);
-      const zoomConfig = world.getResource(ZoomConfigResource);
-      const worldBefore = screenToWorld(screenX, screenY, camera);
-      const newZoom = clamp(camera.zoom * (1 + delta), zoomConfig.min, zoomConfig.max);
-      camera.zoom = newZoom;
-      camera.x = worldBefore.x - screenX / newZoom;
-      camera.y = worldBefore.y - screenY / newZoom;
-      cameraChangedThisTick = true;
-      markDirtyInternal();
-    },
-    zoomTo(zoom) {
-      const camera = world.getResource(CameraResource);
-      const zoomConfig = world.getResource(ZoomConfigResource);
-      const viewport = world.getResource(ViewportResource);
-      const centerWorldX = camera.x + viewport.width / (2 * camera.zoom);
-      const centerWorldY = camera.y + viewport.height / (2 * camera.zoom);
-      camera.zoom = clamp(zoom, zoomConfig.min, zoomConfig.max);
-      camera.x = centerWorldX - viewport.width / (2 * camera.zoom);
-      camera.y = centerWorldY - viewport.height / (2 * camera.zoom);
-      cameraChangedThisTick = true;
-      markDirtyInternal();
-    },
-    zoomToFit(entityIds, padding = 50) {
-      const viewport = world.getResource(ViewportResource);
-      if (viewport.width === 0) return;
-      const entities = entityIds ?? world.queryTagged(Active);
-      if (entities.length === 0) return;
-      let minX = Number.POSITIVE_INFINITY;
-      let minY = Number.POSITIVE_INFINITY;
-      let maxX = Number.NEGATIVE_INFINITY;
-      let maxY = Number.NEGATIVE_INFINITY;
-      for (const e of entities) {
-        const wb = world.getComponent(e, WorldBounds);
-        if (!wb) continue;
-        minX = Math.min(minX, wb.worldX);
-        minY = Math.min(minY, wb.worldY);
-        maxX = Math.max(maxX, wb.worldX + wb.worldWidth);
-        maxY = Math.max(maxY, wb.worldY + wb.worldHeight);
-      }
-      if (!Number.isFinite(minX)) return;
-      const contentWidth = maxX - minX + padding * 2;
-      const contentHeight = maxY - minY + padding * 2;
-      const zoomConfig = world.getResource(ZoomConfigResource);
-      const zoom = clamp(
-        Math.min(viewport.width / contentWidth, viewport.height / contentHeight),
-        zoomConfig.min,
-        zoomConfig.max
-      );
-      const camera = world.getResource(CameraResource);
-      camera.zoom = zoom;
-      camera.x = minX - padding - (viewport.width / zoom - contentWidth) / 2;
-      camera.y = minY - padding - (viewport.height / zoom - contentHeight) / 2;
-      cameraChangedThisTick = true;
-      markDirtyInternal();
-    },
-    // === Viewport ===
-    setViewport(width, height, dpr) {
-      world.setResource(ViewportResource, { width, height, dpr: dpr ?? 1 });
-      markDirtyInternal();
-    },
-    // === Commands + Undo/Redo ===
-    execute(command) {
-      commandBuffer.execute(command, world);
-      markDirtyInternal();
-    },
-    beginCommandGroup() {
-      commandBuffer.beginGroup();
-    },
-    endCommandGroup() {
-      commandBuffer.endGroup();
-    },
-    undo() {
-      const did = commandBuffer.undo(world);
-      if (did) markDirtyInternal();
-      return did;
-    },
-    redo() {
-      const did = commandBuffer.redo(world);
-      if (did) markDirtyInternal();
-      return did;
-    },
-    canUndo() {
-      return commandBuffer.canUndo();
-    },
-    canRedo() {
-      return commandBuffer.canRedo();
-    },
-    // === Pointer Input ===
-    handlePointerDown(screenX, screenY, _button, modifiers) {
-      const hit = hitTest(screenX, screenY);
-      if (!hit) {
-        clearSelection();
-        inputState = { mode: "marquee", startX: screenX, startY: screenY };
-        markDirtyInternal();
-        return { action: "capture-marquee" };
-      }
-      switch (hit.role.role.type) {
-        case "resize": {
-          const parentRef = world.getComponent(hit.entityId, Parent);
-          if (!parentRef) return { action: "passthrough" };
-          const parentId = parentRef.id;
-          const t = world.getComponent(parentId, Transform2D);
-          if (!t) return { action: "passthrough" };
-          commandBuffer.beginGroup();
-          inputState = {
-            mode: "resizing",
-            entityId: parentId,
-            handleEntityId: hit.entityId,
-            handle: hit.role.role.handle,
-            startX: screenX,
-            startY: screenY,
-            startBounds: { x: t.x, y: t.y, width: t.width, height: t.height }
-          };
-          markDirtyInternal();
-          return { action: "capture-resize", handle: hit.role.role.handle };
-        }
-        case "drag": {
-          selectEntity(hit.entityId, modifiers.shift);
-          if (world.hasTag(hit.entityId, Draggable)) {
-            inputState = {
-              mode: "tracking",
-              entityId: hit.entityId,
-              startX: screenX,
-              startY: screenY
-            };
-          }
-          markDirtyInternal();
-          return { action: "passthrough-track-drag" };
-        }
-        case "select": {
-          selectEntity(hit.entityId, modifiers.shift);
-          markDirtyInternal();
-          return { action: "passthrough" };
-        }
-        // 'canvas' | 'rotate' | 'connect' — no handler yet, fall through.
-        default:
-          return { action: "passthrough" };
-      }
-    },
-    handlePointerMove(screenX, screenY, _modifiers) {
-      if (inputState.mode === "tracking") {
-        const dx = screenX - inputState.startX;
-        const dy = screenY - inputState.startY;
-        if (Math.abs(dx) > DEAD_ZONE_MOUSE_PX || Math.abs(dy) > DEAD_ZONE_MOUSE_PX) {
-          const originalZIndices = /* @__PURE__ */ new Map();
-          let maxZ = 0;
-          for (const e of world.queryTagged(Active)) {
-            const z = world.getComponent(e, ZIndex);
-            if (z && z.value > maxZ) maxZ = z.value;
-          }
-          for (const e of world.queryTagged(Selected)) {
-            const z = world.getComponent(e, ZIndex);
-            originalZIndices.set(e, z?.value ?? 0);
-            world.setComponent(e, ZIndex, { value: maxZ + 1 });
-          }
-          const startPositions = /* @__PURE__ */ new Map();
-          for (const e of world.queryTagged(Selected)) {
-            const t = world.getComponent(e, Transform2D);
-            if (t) startPositions.set(e, { x: t.x, y: t.y });
-          }
-          commandBuffer.beginGroup();
-          inputState = {
-            mode: "dragging",
-            entityId: inputState.entityId,
-            startScreenX: screenX,
-            startScreenY: screenY,
-            startPositions,
-            originalZIndices
-          };
-          markDirtyInternal();
-          return { action: "capture-drag" };
-        }
-        return { action: "passthrough" };
-      }
-      if (inputState.mode === "dragging") {
-        const camera = world.getResource(CameraResource);
-        const totalDx = (screenX - inputState.startScreenX) / camera.zoom;
-        const totalDy = (screenY - inputState.startScreenY) / camera.zoom;
-        if (snapEnabled && inputState.startPositions.size > 0) {
-          const draggedIds = new Set(inputState.startPositions.keys());
-          const firstId = inputState.startPositions.keys().next().value;
-          const firstStart = inputState.startPositions.get(firstId);
-          const firstT = world.getComponent(firstId, Transform2D);
-          if (firstT && firstStart) {
-            const draggedBounds = {
-              x: firstStart.x + totalDx,
-              y: firstStart.y + totalDy,
-              width: firstT.width,
-              height: firstT.height
-            };
-            const refs = [];
-            for (const entity of world.queryTagged(Active)) {
-              if (draggedIds.has(entity)) continue;
-              if (world.hasComponent(entity, Hitbox)) continue;
-              const wb = world.getComponent(entity, WorldBounds);
-              if (wb) {
-                refs.push({
-                  x: wb.worldX,
-                  y: wb.worldY,
-                  width: wb.worldWidth,
-                  height: wb.worldHeight
-                });
-              }
-            }
-            currentSnap = computeSnapGuides(draggedBounds, refs, snapThreshold / camera.zoom);
-          }
-        } else {
-          currentSnap = { snapDx: 0, snapDy: 0, guides: [], spacings: [] };
-        }
-        const finalDx = totalDx + currentSnap.snapDx;
-        const finalDy = totalDy + currentSnap.snapDy;
-        for (const [e, start] of inputState.startPositions) {
-          world.setComponent(e, Transform2D, {
-            x: start.x + finalDx,
-            y: start.y + finalDy
-          });
-        }
-        markDirtyInternal();
-        return { action: "capture-drag" };
-      }
-      if (inputState.mode === "resizing") {
-        const camera = world.getResource(CameraResource);
-        const dx = (screenX - inputState.startX) / camera.zoom;
-        const dy = (screenY - inputState.startY) / camera.zoom;
-        const { x, y, width: w, height: h } = inputState.startBounds;
-        const handle = inputState.handle;
-        let newX = x;
-        let newY = y;
-        let newW = w;
-        let newH = h;
-        if (handle.includes("e")) {
-          newW = Math.max(MIN_WIDGET_SIZE, w + dx);
-        }
-        if (handle.includes("w")) {
-          const clampedW = Math.max(MIN_WIDGET_SIZE, w - dx);
-          newX = x + w - clampedW;
-          newW = clampedW;
-        }
-        if (handle.includes("s")) {
-          newH = Math.max(MIN_WIDGET_SIZE, h + dy);
-        }
-        if (handle.includes("n")) {
-          const clampedH = Math.max(MIN_WIDGET_SIZE, h - dy);
-          newY = y + h - clampedH;
-          newH = clampedH;
-        }
-        world.setComponent(inputState.entityId, Transform2D, {
-          x: newX,
-          y: newY,
-          width: newW,
-          height: newH
-        });
-        markDirtyInternal();
-        return { action: "capture-resize", handle: inputState.handle };
-      }
-      if (inputState.mode === "marquee") {
-        return { action: "capture-marquee" };
-      }
-      if (inputState.mode === "idle") {
-        const hit = hitTest(screenX, screenY);
-        const hoverTarget = hit ? hit.entityId : null;
-        if (hoverTarget !== hoveredEntity) {
-          hoveredEntity = hoverTarget;
-          markDirtyInternal();
-        }
-      }
-      return { action: "passthrough" };
-    },
-    handlePointerUp() {
-      const prevState = inputState;
-      if (prevState.mode === "dragging") {
-        for (const [entity, originalZ] of prevState.originalZIndices) {
-          world.setComponent(entity, ZIndex, { value: originalZ });
-        }
-        const entityIds = [...prevState.startPositions.keys()];
-        if (entityIds.length > 0) {
-          const firstId = entityIds[0];
-          const start = prevState.startPositions.get(firstId);
-          const current = world.getComponent(firstId, Transform2D);
-          if (current && start) {
-            const totalDx = current.x - start.x;
-            const totalDy = current.y - start.y;
-            if (totalDx !== 0 || totalDy !== 0) {
-              for (const [e, s] of prevState.startPositions) {
-                world.setComponent(e, Transform2D, { x: s.x, y: s.y });
-              }
-              commandBuffer.execute(
-                new MoveCommand(entityIds, totalDx, totalDy, Transform2D),
-                world
-              );
-            }
-          }
-        }
-        commandBuffer.endGroup();
-        currentSnap = { snapDx: 0, snapDy: 0, guides: [], spacings: [] };
-      }
-      if (prevState.mode === "resizing") {
-        const t = world.getComponent(prevState.entityId, Transform2D);
-        if (t) {
-          const finalBounds = { x: t.x, y: t.y, width: t.width, height: t.height };
-          const sb = prevState.startBounds;
-          world.setComponent(prevState.entityId, Transform2D, sb);
-          commandBuffer.execute(
-            new ResizeCommand(prevState.entityId, sb, finalBounds, Transform2D),
-            world
-          );
-        }
-        commandBuffer.endGroup();
-      }
-      inputState = { mode: "idle" };
-      if (prevState.mode === "dragging" || prevState.mode === "resizing") {
-        markDirtyInternal();
-      }
-      return { action: "passthrough" };
-    },
-    handlePointerCancel() {
-      if (inputState.mode === "dragging" || inputState.mode === "resizing") {
-        commandBuffer.endGroup();
-      }
-      currentSnap = { snapDx: 0, snapDy: 0, guides: [], spacings: [] };
-      inputState = { mode: "idle" };
-      markDirtyInternal();
-    },
-    // === Selection ===
-    getSelectedEntities() {
-      return world.queryTagged(Selected);
-    },
-    getHoveredEntity() {
-      return hoveredEntity;
-    },
-    // === Snap Guides ===
-    getSnapGuides() {
-      return currentSnap.guides;
-    },
-    getEqualSpacing() {
-      return currentSnap.spacings;
-    },
-    setSnapEnabled(on) {
-      snapEnabled = on;
-    },
-    setSnapThreshold(worldPx) {
-      snapThreshold = worldPx;
-    },
-    // === Navigation ===
-    enterContainer(entity) {
-      if (!world.hasComponent(entity, Container)) return;
-      if (!world.hasComponent(entity, Children)) return;
-      const navStack = world.getResource(NavigationStackResource);
-      const camera = world.getResource(CameraResource);
-      const currentFrame = navStack.frames[navStack.frames.length - 1];
-      currentFrame.camera = { x: camera.x, y: camera.y, zoom: camera.zoom };
-      navStack.frames.push({
-        containerId: entity,
-        camera: { x: camera.x, y: camera.y, zoom: camera.zoom }
-      });
-      navStack.changed = true;
-      clearSelection();
-      markDirtyInternal();
-    },
-    exitContainer() {
-      const navStack = world.getResource(NavigationStackResource);
-      if (navStack.frames.length <= 1) return;
-      navStack.frames.pop();
-      navStack.changed = true;
-      const parentFrame = navStack.frames[navStack.frames.length - 1];
-      const camera = world.getResource(CameraResource);
-      camera.x = parentFrame.camera.x;
-      camera.y = parentFrame.camera.y;
-      camera.zoom = parentFrame.camera.zoom;
-      clearSelection();
-      cameraChangedThisTick = true;
-      markDirtyInternal();
-    },
-    getActiveContainer() {
-      const navStack = world.getResource(NavigationStackResource);
-      return navStack.frames[navStack.frames.length - 1].containerId;
-    },
-    getNavigationDepth() {
-      return world.getResource(NavigationStackResource).frames.length - 1;
-    },
-    // === Frame ===
-    markDirty() {
-      markDirtyInternal();
-    },
-    profiler,
-    tick() {
-      profiler.beginFrame(world.currentTick);
-      const navStackPreTick = world.getResource(NavigationStackResource);
-      const navigationChangedThisTick = navStackPreTick?.changed ?? false;
-      scheduler.execute(world);
-      cursorSystem();
-      profiler.beginVisibility();
-      const newVisible = [];
-      const newVisibleSet = /* @__PURE__ */ new Set();
-      for (const entity of world.query(Widget, Visible)) {
-        const wb = world.getComponent(entity, WorldBounds);
-        const widget = world.getComponent(entity, Widget);
-        const bp = world.getComponent(entity, WidgetBreakpoint);
-        const zIdx = world.getComponent(entity, ZIndex);
-        if (!wb || !widget) continue;
-        newVisibleSet.add(entity);
-        newVisible.push({
-          entityId: entity,
-          worldX: wb.worldX,
-          worldY: wb.worldY,
-          worldWidth: wb.worldWidth,
-          worldHeight: wb.worldHeight,
-          breakpoint: bp?.current ?? "normal",
-          zIndex: zIdx?.value ?? 0,
-          surface: widget.surface,
-          widgetType: widget.type
-        });
-      }
-      newVisible.sort((a, b) => a.zIndex - b.zIndex);
-      profiler.endVisibility();
-      const entered = [];
-      const exited = [];
-      for (const entity of newVisibleSet) {
-        if (!prevVisible.has(entity)) entered.push(entity);
-      }
-      for (const entity of prevVisible) {
-        if (!newVisibleSet.has(entity)) exited.push(entity);
-      }
-      frameChanges = {
-        positionsChanged: world.queryChanged(WorldBounds),
-        breakpointsChanged: world.queryChanged(WidgetBreakpoint),
-        entered,
-        exited,
-        cameraChanged: cameraChangedThisTick,
-        navigationChanged: navigationChangedThisTick,
-        selectionChanged: selectionChangedThisTick
-      };
-      currentVisible = newVisible;
-      prevVisible = newVisibleSet;
-      cameraChangedThisTick = false;
-      selectionChangedThisTick = false;
-      profiler.endFrame(world.entityCount, newVisible.length);
-      world.clearDirty();
-      world.incrementTick();
-      world.emitFrame();
-      dirty = false;
-    },
-    flushIfDirty() {
-      if (!dirty) return false;
-      engine.tick();
-      return true;
-    },
-    // === Output ===
-    getVisibleEntities() {
-      return currentVisible;
-    },
-    getFrameChanges() {
-      return frameChanges;
-    },
-    // Fix #11: Expose spatial index properly
-    getSpatialIndex() {
-      return spatialIndex;
-    },
-    // === Events ===
-    onFrame(handler) {
-      return world.onFrame(handler);
-    },
-    // === Lifecycle ===
-    destroy() {
-      for (const unsub of unsubscribers) {
-        unsub();
-      }
-      unsubscribers.length = 0;
-      commandBuffer.clear();
-      profiler.setEnabled(false);
-      profiler.clear();
-      spatialIndex.clear();
-    }
-  };
-  return engine;
-}
-var EngineContext = createContext(null);
-var EngineProvider = EngineContext.Provider;
-var ContainerRefContext = createContext(null);
-var ContainerRefProvider = ContainerRefContext.Provider;
-function useContainerRef() {
-  return useContext(ContainerRefContext);
-}
-function useLayoutEngine() {
-  const engine = useContext(EngineContext);
-  if (!engine) {
-    throw new Error("useLayoutEngine must be used within an <InfiniteCanvas>");
-  }
-  return engine;
-}
-var WidgetResolverContext = createContext(null);
-var WidgetResolverProvider = WidgetResolverContext.Provider;
-function useWidgetResolver() {
-  return useContext(WidgetResolverContext);
-}
-function getMods(e) {
-  return { shift: e.shiftKey, ctrl: e.ctrlKey, alt: e.altKey, meta: e.metaKey };
-}
-var SelectionOverlaySlot = memo(function SelectionOverlaySlot2({
-  entityId,
-  slotRef
-}) {
-  const wrapperRef = useRef(null);
-  const engine = useLayoutEngine();
-  const containerRefObj = useContainerRef();
-  useEffect(() => {
-    slotRef(entityId, wrapperRef.current);
-    return () => slotRef(entityId, null);
-  }, [entityId, slotRef]);
-  const toLocal = useCallback(
-    (e) => {
-      const rect = containerRefObj?.current?.getBoundingClientRect();
-      if (!rect) return { x: e.clientX, y: e.clientY };
-      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    },
-    [containerRefObj]
-  );
-  const capturedRef = useRef(false);
-  const onPointerDown = useCallback(
-    (e) => {
-      e.stopPropagation();
-      const { x, y } = toLocal(e);
-      const directive = engine.handlePointerDown(x, y, e.button, getMods(e));
-      if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") {
-        wrapperRef.current?.setPointerCapture(e.pointerId);
-      }
-      if (directive.action === "capture-resize") {
-        e.preventDefault();
-      }
-    },
-    [engine, toLocal]
-  );
-  const onPointerMove = useCallback(
-    (e) => {
-      const { x, y } = toLocal(e);
-      const directive = engine.handlePointerMove(x, y, getMods(e));
-      if (directive.action === "capture-drag" && !capturedRef.current) {
-        capturedRef.current = true;
-        e.stopPropagation();
-      }
-    },
-    [engine, toLocal]
-  );
-  const onPointerUp = useCallback(
-    (e) => {
-      e.stopPropagation();
-      capturedRef.current = false;
-      if (wrapperRef.current?.hasPointerCapture(e.pointerId)) {
-        wrapperRef.current.releasePointerCapture(e.pointerId);
-      }
-      engine.handlePointerUp();
-    },
-    [engine]
-  );
-  const onDoubleClick = useCallback(
-    (e) => {
-      e.stopPropagation();
-      engine.enterContainer(entityId);
-    },
-    [engine, entityId]
-  );
-  const wb = engine.get(entityId, WorldBounds);
-  const initialStyle = wb ? {
-    transform: `translate(${wb.worldX}px, ${wb.worldY}px)`,
-    width: `${wb.worldWidth}px`,
-    height: `${wb.worldHeight}px`
-  } : {};
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: wrapperRef,
-      className: "absolute left-0 top-0 origin-top-left will-change-transform",
-      "data-widget-slot": "",
-      style: initialStyle,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      onDoubleClick
-    }
-  );
-});
-function shallowEqual(a, b) {
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    if (a[key] !== b[key]) return false;
-  }
-  return true;
-}
-function useComponent(entity, type) {
-  const engine = useLayoutEngine();
-  const [value, setValue] = useState(() => engine.get(entity, type));
-  useEffect(() => {
-    const current = engine.get(entity, type);
-    setValue(current === void 0 ? void 0 : { ...current });
-    const unsub = engine.world.onComponentChanged(
-      type,
-      (_id, _prev, next) => {
-        setValue(next === void 0 ? void 0 : { ...next });
-      },
-      entity
-    );
-    return unsub;
-  }, [engine, entity, type]);
-  return value;
-}
-function useTag(entity, type) {
-  const engine = useLayoutEngine();
-  const [has, setHas] = useState(() => engine.world.hasTag(entity, type));
-  useEffect(() => {
-    setHas(engine.world.hasTag(entity, type));
-    const unsub1 = engine.world.onTagAdded(type, () => setHas(true), entity);
-    const unsub2 = engine.world.onTagRemoved(type, () => setHas(false), entity);
-    return () => {
-      unsub1();
-      unsub2();
-    };
-  }, [engine, entity, type]);
-  return has;
-}
-function useResource(type) {
-  const engine = useLayoutEngine();
-  const [value, setValue] = useState(() => ({ ...engine.world.getResource(type) }));
-  const prevRef = useRef(void 0);
-  useEffect(() => {
-    const current = engine.world.getResource(type);
-    if (current !== void 0) {
-      prevRef.current = current;
-      setValue({ ...current });
-    }
-    const unsub = engine.onFrame(() => {
-      const current2 = engine.world.getResource(type);
-      if (prevRef.current === void 0 || !shallowEqual(
-        current2,
-        prevRef.current
-      )) {
-        prevRef.current = current2;
-        setValue({ ...current2 });
-      }
-    });
-    return unsub;
-  }, [engine, type]);
-  return value;
-}
-function useQuery(...types) {
-  const engine = useLayoutEngine();
-  const typesRef = useRef(types);
-  typesRef.current = types;
-  const typesKey = types.map((t) => t.name).join("\0");
-  const [result, setResult] = useState(() => engine.world.query(...types));
-  useEffect(() => {
-    setResult(engine.world.query(...typesRef.current));
-    const unsub = engine.onFrame(() => {
-      const next = engine.world.query(...typesRef.current);
-      setResult((prev) => {
-        if (prev.length !== next.length) return next;
-        for (let i = 0; i < prev.length; i++) {
-          if (prev[i] !== next[i]) return next;
-        }
-        return prev;
-      });
-    });
-    return unsub;
-  }, [engine, typesKey]);
-  return result;
-}
-function useTaggedEntities(type) {
-  const engine = useLayoutEngine();
-  const [result, setResult] = useState(() => engine.world.queryTagged(type));
-  useEffect(() => {
-    setResult([...engine.world.queryTagged(type)]);
-    const update = () => setResult([...engine.world.queryTagged(type)]);
-    const unsub1 = engine.world.onTagAdded(type, update);
-    const unsub2 = engine.world.onTagRemoved(type, update);
-    return () => {
-      unsub1();
-      unsub2();
-    };
-  }, [engine, type]);
-  return result;
-}
-function useCamera() {
-  const cam = useResource(CameraResource);
-  return { x: cam?.x ?? 0, y: cam?.y ?? 0, zoom: cam?.zoom ?? 1 };
-}
-function getMods2(e) {
-  return { shift: e.shiftKey, ctrl: e.ctrlKey, alt: e.altKey, meta: e.metaKey };
-}
-var WidgetSlot = memo(function WidgetSlot2({ entityId, slotRef }) {
-  const wrapperRef = useRef(null);
-  const engine = useLayoutEngine();
-  const containerRefObj = useContainerRef();
-  const resolve = useWidgetResolver();
-  const widgetComp = useComponent(entityId, Widget);
-  const resolved = resolve?.(entityId, widgetComp?.type ?? "");
-  const WidgetComponent = resolved && resolved.surface === "dom" ? resolved.component : null;
-  useEffect(() => {
-    slotRef(entityId, wrapperRef.current);
-    return () => slotRef(entityId, null);
-  }, [entityId, slotRef]);
-  const toLocal = useCallback(
-    (e) => {
-      const rect = containerRefObj?.current?.getBoundingClientRect();
-      if (!rect) return { x: e.clientX, y: e.clientY };
-      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    },
-    [containerRefObj]
-  );
-  const onPointerDown = useCallback(
-    (e) => {
-      const target = e.target;
-      if (target.closest("button, input, textarea, select, [contenteditable]")) {
-        e.stopPropagation();
-        return;
-      }
-      const { x, y } = toLocal(e);
-      const directive = engine.handlePointerDown(x, y, e.button, getMods2(e));
-      e.stopPropagation();
-      if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") {
-        wrapperRef.current?.setPointerCapture(e.pointerId);
-      }
-      if (directive.action === "capture-resize") {
-        e.preventDefault();
-      }
-    },
-    [engine, toLocal]
-  );
-  const capturedRef = useRef(false);
-  const onPointerMove = useCallback(
-    (e) => {
-      const { x, y } = toLocal(e);
-      const directive = engine.handlePointerMove(x, y, getMods2(e));
-      if (directive.action === "capture-drag" && !capturedRef.current) {
-        capturedRef.current = true;
-        e.stopPropagation();
-      }
-    },
-    [engine, toLocal]
-  );
-  const onPointerUp = useCallback(
-    (e) => {
-      e.stopPropagation();
-      capturedRef.current = false;
-      if (wrapperRef.current?.hasPointerCapture(e.pointerId)) {
-        wrapperRef.current.releasePointerCapture(e.pointerId);
-      }
-      engine.handlePointerUp();
-    },
-    [engine]
-  );
-  const onDoubleClick = useCallback(
-    (e) => {
-      e.stopPropagation();
-      engine.enterContainer(entityId);
-    },
-    [engine, entityId]
-  );
-  const wb = engine.get(entityId, WorldBounds);
-  const initialStyle = wb ? {
-    transform: `translate(${wb.worldX}px, ${wb.worldY}px)`,
-    width: `${wb.worldWidth}px`,
-    height: `${wb.worldHeight}px`
-  } : {};
-  const content = WidgetComponent ? /* @__PURE__ */ jsx(WidgetComponent, { entityId }) : /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded border border-dashed border-gray-300 bg-gray-50" });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: wrapperRef,
-      "data-widget-slot": "",
-      className: "absolute left-0 top-0 origin-top-left will-change-transform",
-      style: initialStyle,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      onDoubleClick,
-      children: content
-    }
-  );
-});
-var DEFAULT_GRID_CONFIG = {
-  spacings: [8, 64, 512],
-  dotColor: [0, 0, 0],
-  dotAlpha: 0.18,
-  fadeIn: [4, 12],
-  fadeOut: [250, 500],
-  dotRadius: [0.5, 1.4],
-  levelWeight: [1, 0.4]
-};
-var vertexShader = (
-  /* glsl */
-  `
-void main() {
-	gl_Position = vec4(position.xy, 0.0, 1.0);
-}
-`
-);
-var fragmentShader = (
-  /* glsl */
-  `
-precision highp float;
-
-uniform vec2 u_resolution;    // device pixels
-uniform vec2 u_camera;        // world-space top-left
-uniform float u_zoom;         // CSS zoom
-uniform float u_dpr;          // device pixel ratio
-uniform vec3 u_spacings;      // world-unit grid spacings
-uniform vec3 u_dotColor;      // dot RGB
-uniform float u_dotAlpha;     // dot base alpha
-uniform vec2 u_fadeIn;        // CSS-px [start, end]
-uniform vec2 u_fadeOut;       // CSS-px [start, end]
-uniform vec2 u_dotRadius;     // CSS-px [min, max]
-uniform vec2 u_levelWeight;   // [base, step]
-
-void main() {
-	vec2 devicePos = gl_FragCoord.xy;
-	devicePos.y = u_resolution.y - devicePos.y;
-
-	float effectiveZoom = u_zoom * u_dpr;
-	vec2 worldPos = devicePos / effectiveZoom + u_camera;
-
-	float totalAlpha = 0.0;
-
-	for (int i = 0; i < 3; i++) {
-		float spacing;
-		if (i == 0) spacing = u_spacings.x;
-		else if (i == 1) spacing = u_spacings.y;
-		else spacing = u_spacings.z;
-
-		// Screen spacing in CSS pixels (DPR-independent for consistent fading)
-		float cssSpacing = spacing * u_zoom;
-
-		// Fade curve
-		float opacity = 0.0;
-		if (cssSpacing >= u_fadeIn.x && cssSpacing < u_fadeIn.y) {
-			opacity = (cssSpacing - u_fadeIn.x) / (u_fadeIn.y - u_fadeIn.x);
-		} else if (cssSpacing >= u_fadeIn.y && cssSpacing < u_fadeOut.x) {
-			opacity = 1.0;
-		} else if (cssSpacing >= u_fadeOut.x && cssSpacing < u_fadeOut.y) {
-			opacity = 1.0 - (cssSpacing - u_fadeOut.x) / (u_fadeOut.y - u_fadeOut.x);
-		}
-		if (opacity <= 0.001) continue;
-
-		// Distance to nearest grid intersection in device pixels
-		vec2 f = fract(worldPos / spacing + 0.5) - 0.5;
-		float dist = length(f) * spacing * effectiveZoom;
-
-		// Dot radius in device pixels \u2014 grows as grid becomes sparser
-		float t = clamp((cssSpacing - u_fadeIn.x) / 40.0, 0.0, 1.0);
-		float radius = mix(u_dotRadius.x, u_dotRadius.y, t) * u_dpr;
-
-		// Anti-aliased dot (0.5 device pixel smoothstep)
-		float dot = 1.0 - smoothstep(radius - 0.5, radius + 0.5, dist);
-
-		// Larger grid levels get progressively stronger dots
-		float weight = u_levelWeight.x + float(i) * u_levelWeight.y;
-		totalAlpha += dot * opacity * weight;
-	}
-
-	gl_FragColor = vec4(u_dotColor, clamp(totalAlpha * u_dotAlpha, 0.0, 1.0));
-}
-`
-);
-var GridRenderer = class {
-  renderer;
-  scene;
-  camera;
-  material;
-  mesh;
-  constructor(canvas) {
-    this.renderer = new THREE2.WebGLRenderer({
-      canvas,
-      alpha: true,
-      antialias: false,
-      premultipliedAlpha: false
-    });
-    this.renderer.setClearColor(0, 0);
-    this.scene = new THREE2.Scene();
-    this.camera = new THREE2.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-    this.material = new THREE2.ShaderMaterial({
-      vertexShader,
-      fragmentShader,
-      uniforms: {
-        u_resolution: { value: new THREE2.Vector2(1, 1) },
-        u_camera: { value: new THREE2.Vector2(0, 0) },
-        u_zoom: { value: 1 },
-        u_dpr: { value: 1 },
-        u_spacings: { value: new THREE2.Vector3(8, 64, 512) },
-        u_dotColor: { value: new THREE2.Vector3(0, 0, 0) },
-        u_dotAlpha: { value: 0.18 },
-        u_fadeIn: { value: new THREE2.Vector2(4, 12) },
-        u_fadeOut: { value: new THREE2.Vector2(250, 500) },
-        u_dotRadius: { value: new THREE2.Vector2(0.5, 1.4) },
-        u_levelWeight: { value: new THREE2.Vector2(1, 0.4) }
-      },
-      transparent: true,
-      depthTest: false,
-      depthWrite: false
-    });
-    const geometry = new THREE2.BufferGeometry();
-    const vertices = new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]);
-    geometry.setAttribute("position", new THREE2.BufferAttribute(vertices, 3));
-    this.mesh = new THREE2.Mesh(geometry, this.material);
-    this.scene.add(this.mesh);
-  }
-  /** Apply a (partial) grid config. Only provided fields are updated. */
-  setConfig(config) {
-    const u = this.material.uniforms;
-    if (config.spacings) u.u_spacings.value.set(...config.spacings);
-    if (config.dotColor) u.u_dotColor.value.set(...config.dotColor);
-    if (config.dotAlpha !== void 0) u.u_dotAlpha.value = config.dotAlpha;
-    if (config.fadeIn) u.u_fadeIn.value.set(...config.fadeIn);
-    if (config.fadeOut) u.u_fadeOut.value.set(...config.fadeOut);
-    if (config.dotRadius) u.u_dotRadius.value.set(...config.dotRadius);
-    if (config.levelWeight) u.u_levelWeight.value.set(...config.levelWeight);
-  }
-  setSize(width, height, dpr = 1) {
-    this.renderer.setSize(width, height, false);
-    this.renderer.setPixelRatio(dpr);
-    const u = this.material.uniforms;
-    u.u_resolution.value.set(width * dpr, height * dpr);
-    u.u_dpr.value = dpr;
-  }
-  render(cameraX, cameraY, zoom) {
-    const u = this.material.uniforms;
-    u.u_camera.value.set(cameraX, cameraY);
-    u.u_zoom.value = zoom;
-    this.renderer.render(this.scene, this.camera);
-  }
-  dispose() {
-    this.mesh.geometry.dispose();
-    this.material.dispose();
-    this.renderer.dispose();
-  }
-  /** Expose for future WebGL widget rendering */
-  getWebGLRenderer() {
-    return this.renderer;
-  }
-};
-var DEFAULT_SELECTION_CONFIG = {
-  outlineColor: [0.051, 0.6, 1],
-  // #0d99ff (Figma blue)
-  outlineWidth: 1.5,
-  hoverColor: [0.051, 0.6, 1],
-  hoverWidth: 1,
-  handleSize: HANDLE_VISUAL_SIZE_PX,
-  handleFill: [1, 1, 1],
-  handleBorder: [0.051, 0.6, 1],
-  handleBorderWidth: 1.5,
-  groupDash: 4
-};
-var MAX_ENTITIES = 32;
-var vertexShader2 = (
-  /* glsl */
-  `
-void main() {
-	gl_Position = vec4(position.xy, 0.0, 1.0);
-}
-`
-);
-var fragmentShader2 = (
-  /* glsl */
-  `
-precision highp float;
-
-uniform vec2 u_resolution;
-uniform vec2 u_camera;
-uniform float u_zoom;
-uniform float u_dpr;
-
-// Selection data
-uniform int u_count;
-uniform vec4 u_bounds[${MAX_ENTITIES}];   // (worldX, worldY, width, height)
-uniform int u_hoverIdx;                   // -1 = none
-uniform vec4 u_groupBounds;              // group bbox (0 if count <= 1)
-uniform int u_hasGroup;
-
-// Snap guides
-uniform int u_guideCount;
-uniform vec4 u_guides[16];               // (axis: 0=x/1=y, position, 0, 0)
-uniform int u_spacingCount;
-uniform vec4 u_spacings[8];              // equal-spacing segments: (axis, from, to, perpPos)
-uniform vec3 u_guideColor;
-
-// Style
-uniform vec3 u_outlineColor;
-uniform float u_outlineWidth;
-uniform vec3 u_hoverColor;
-uniform float u_hoverWidth;
-uniform float u_handleSize;
-uniform vec3 u_handleFill;
-uniform vec3 u_handleBorder;
-uniform float u_handleBorderWidth;
-uniform float u_groupDash;
-
-// SDF for axis-aligned rectangle outline (returns distance to edge)
-float sdRectOutline(vec2 p, vec2 center, vec2 halfSize) {
-	vec2 d = abs(p - center) - halfSize;
-	float outside = length(max(d, 0.0));
-	float inside = min(max(d.x, d.y), 0.0);
-	return abs(outside + inside);
-}
-
-// SDF for filled square
-float sdSquare(vec2 p, vec2 center, float halfSize) {
-	vec2 d = abs(p - center) - vec2(halfSize);
-	return max(d.x, d.y);
-}
-
-void main() {
-	if (u_count == 0 && u_hoverIdx < 0) discard;
-
-	vec2 devicePos = gl_FragCoord.xy;
-	devicePos.y = u_resolution.y - devicePos.y;
-
-	float effectiveZoom = u_zoom * u_dpr;
-	vec2 worldPos = devicePos / effectiveZoom + u_camera;
-
-	// Screen-space conversion factor
-	float pxToWorld = 1.0 / effectiveZoom;
-
-	vec4 color = vec4(0.0);
-
-	// --- Hover outline ---
-	if (u_hoverIdx >= 0 && u_hoverIdx < ${MAX_ENTITIES}) {
-		vec4 b = u_bounds[u_hoverIdx];
-		vec2 center = vec2(b.x + b.z * 0.5, b.y + b.w * 0.5);
-		vec2 halfSize = vec2(b.z, b.w) * 0.5;
-		float dist = sdRectOutline(worldPos, center, halfSize);
-		float width = u_hoverWidth * pxToWorld;
-		float alpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
-		color = max(color, vec4(u_hoverColor, alpha * 0.6));
-	}
-
-	// --- Selection outlines ---
-	for (int i = 0; i < ${MAX_ENTITIES}; i++) {
-		if (i >= u_count) break;
-		vec4 b = u_bounds[i];
-		vec2 center = vec2(b.x + b.z * 0.5, b.y + b.w * 0.5);
-		vec2 halfSize = vec2(b.z, b.w) * 0.5;
-
-		// Outline
-		float dist = sdRectOutline(worldPos, center, halfSize);
-		float width = u_outlineWidth * pxToWorld;
-		float outlineAlpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
-		color = max(color, vec4(u_outlineColor, outlineAlpha));
-
-		// 8 resize handles
-		float hs = u_handleSize * 0.5 * pxToWorld;
-		float bw = u_handleBorderWidth * pxToWorld;
-		vec2 corners[8];
-		corners[0] = vec2(b.x, b.y);                          // nw
-		corners[1] = vec2(b.x + b.z * 0.5, b.y);              // n
-		corners[2] = vec2(b.x + b.z, b.y);                    // ne
-		corners[3] = vec2(b.x + b.z, b.y + b.w * 0.5);        // e
-		corners[4] = vec2(b.x + b.z, b.y + b.w);              // se
-		corners[5] = vec2(b.x + b.z * 0.5, b.y + b.w);        // s
-		corners[6] = vec2(b.x, b.y + b.w);                    // sw
-		corners[7] = vec2(b.x, b.y + b.w * 0.5);              // w
-
-		for (int h = 0; h < 8; h++) {
-			float d = sdSquare(worldPos, corners[h], hs);
-			// Fill (white)
-			float fillAlpha = 1.0 - smoothstep(-pxToWorld * 0.5, pxToWorld * 0.5, d);
-			// Border
-			float borderDist = abs(d + bw * 0.5) - bw * 0.5;
-			float borderAlpha = 1.0 - smoothstep(-pxToWorld * 0.5, pxToWorld * 0.5, borderDist);
-
-			if (fillAlpha > 0.01) {
-				// Composite: border color on top of fill
-				vec3 handleColor = mix(u_handleFill, u_handleBorder, borderAlpha);
-				color = vec4(handleColor, max(fillAlpha, color.a));
-			}
-		}
-	}
-
-	// --- Group bounding box (dashed) ---
-	if (u_hasGroup == 1 && u_count > 1) {
-		vec4 gb = u_groupBounds;
-		vec2 center = vec2(gb.x + gb.z * 0.5, gb.y + gb.w * 0.5);
-		vec2 halfSize = vec2(gb.z, gb.w) * 0.5;
-		float dist = sdRectOutline(worldPos, center, halfSize);
-		float width = u_outlineWidth * 0.75 * pxToWorld;
-		float lineAlpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
-
-		// Dash pattern along the rectangle perimeter
-		if (u_groupDash > 0.0 && lineAlpha > 0.01) {
-			// Proper perimeter arc-length from top-left corner going clockwise
-			float perim;
-			vec2 rel = worldPos - vec2(gb.x, gb.y);
-			float w = gb.z;
-			float h = gb.w;
-
-			// Determine which edge is nearest and compute cumulative arc length
-			float dTop = abs(rel.y);
-			float dRight = abs(rel.x - w);
-			float dBottom = abs(rel.y - h);
-			float dLeft = abs(rel.x);
-
-			if (dTop <= dBottom && dTop <= dLeft && dTop <= dRight) {
-				perim = rel.x; // top edge: 0 to w
-			} else if (dRight <= dLeft) {
-				perim = w + rel.y; // right edge: w to w+h
-			} else if (dBottom <= dTop) {
-				perim = w + h + (w - rel.x); // bottom edge: w+h to 2w+h
-			} else {
-				perim = 2.0 * w + h + (h - rel.y); // left edge: 2w+h to 2w+2h
-			}
-
-			float dashWorld = u_groupDash * pxToWorld;
-			float dashPattern = step(0.5, fract(perim / (dashWorld * 2.0)));
-			lineAlpha *= dashPattern;
-		}
-
-		color = max(color, vec4(u_outlineColor, lineAlpha * 0.5));
-	}
-
-	// --- Snap guide lines ---
-	for (int i = 0; i < 16; i++) {
-		if (i >= u_guideCount) break;
-		vec4 g = u_guides[i];
-		float guideWidth = 0.5 * pxToWorld;
-		float dist;
-		if (g.x < 0.5) {
-			// Vertical line (x-axis alignment)
-			dist = abs(worldPos.x - g.y);
-		} else {
-			// Horizontal line (y-axis alignment)
-			dist = abs(worldPos.y - g.y);
-		}
-		float guideAlpha = 1.0 - smoothstep(guideWidth - pxToWorld * 0.3, guideWidth + pxToWorld * 0.3, dist);
-		color = max(color, vec4(u_guideColor, guideAlpha * 0.8));
-	}
-
-	// --- Equal spacing indicators ---
-	for (int i = 0; i < 8; i++) {
-		if (i >= u_spacingCount) break;
-		vec4 s = u_spacings[i];
-		float lineWidth = 0.5 * pxToWorld;
-		float segAlpha = 0.0;
-		if (s.x < 0.5) {
-			// Horizontal segment (x-axis gap)
-			float yDist = abs(worldPos.y - s.w);
-			float xInRange = step(s.y, worldPos.x) * step(worldPos.x, s.z);
-			// Center line
-			segAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, yDist)) * xInRange;
-			// End bars (perpendicular marks at from and to)
-			float barHeight = 4.0 * pxToWorld;
-			float barFromDist = abs(worldPos.x - s.y);
-			float barFromAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, barFromDist))
-				* (1.0 - smoothstep(barHeight, barHeight + pxToWorld, abs(worldPos.y - s.w)));
-			float barToDist = abs(worldPos.x - s.z);
-			float barToAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, barToDist))
-				* (1.0 - smoothstep(barHeight, barHeight + pxToWorld, abs(worldPos.y - s.w)));
-			segAlpha = max(segAlpha, max(barFromAlpha, barToAlpha));
-		} else {
-			// Vertical segment (y-axis gap)
-			float xDist = abs(worldPos.x - s.w);
-			float yInRange = step(s.y, worldPos.y) * step(worldPos.y, s.z);
-			segAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, xDist)) * yInRange;
-			float barWidth = 4.0 * pxToWorld;
-			float barFromAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, abs(worldPos.y - s.y)))
-				* (1.0 - smoothstep(barWidth, barWidth + pxToWorld, abs(worldPos.x - s.w)));
-			float barToAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, abs(worldPos.y - s.z)))
-				* (1.0 - smoothstep(barWidth, barWidth + pxToWorld, abs(worldPos.x - s.w)));
-			segAlpha = max(segAlpha, max(barFromAlpha, barToAlpha));
-		}
-		color = max(color, vec4(u_guideColor, segAlpha * 0.7));
-	}
-
-	if (color.a < 0.01) discard;
-	gl_FragColor = color;
-}
-`
-);
-var SelectionRenderer = class {
-  material;
-  mesh;
-  scene;
-  camera;
-  constructor() {
-    this.scene = new THREE2.Scene();
-    this.camera = new THREE2.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-    const boundsDefault = [];
-    for (let i = 0; i < MAX_ENTITIES; i++) {
-      boundsDefault.push(new THREE2.Vector4(0, 0, 0, 0));
-    }
-    this.material = new THREE2.ShaderMaterial({
-      vertexShader: vertexShader2,
-      fragmentShader: fragmentShader2,
-      uniforms: {
-        u_resolution: { value: new THREE2.Vector2(1, 1) },
-        u_camera: { value: new THREE2.Vector2(0, 0) },
-        u_zoom: { value: 1 },
-        u_dpr: { value: 1 },
-        u_count: { value: 0 },
-        u_bounds: { value: boundsDefault },
-        u_hoverIdx: { value: -1 },
-        u_groupBounds: { value: new THREE2.Vector4(0, 0, 0, 0) },
-        u_hasGroup: { value: 0 },
-        // Style (Figma defaults)
-        u_outlineColor: { value: new THREE2.Vector3(...DEFAULT_SELECTION_CONFIG.outlineColor) },
-        u_outlineWidth: { value: DEFAULT_SELECTION_CONFIG.outlineWidth },
-        u_hoverColor: { value: new THREE2.Vector3(...DEFAULT_SELECTION_CONFIG.hoverColor) },
-        u_hoverWidth: { value: DEFAULT_SELECTION_CONFIG.hoverWidth },
-        u_handleSize: { value: DEFAULT_SELECTION_CONFIG.handleSize },
-        u_handleFill: { value: new THREE2.Vector3(...DEFAULT_SELECTION_CONFIG.handleFill) },
-        u_handleBorder: { value: new THREE2.Vector3(...DEFAULT_SELECTION_CONFIG.handleBorder) },
-        u_handleBorderWidth: { value: DEFAULT_SELECTION_CONFIG.handleBorderWidth },
-        u_groupDash: { value: DEFAULT_SELECTION_CONFIG.groupDash },
-        // Snap guides
-        u_guideCount: { value: 0 },
-        u_guides: { value: Array.from({ length: 16 }, () => new THREE2.Vector4(0, 0, 0, 0)) },
-        u_spacingCount: { value: 0 },
-        u_spacings: { value: Array.from({ length: 8 }, () => new THREE2.Vector4(0, 0, 0, 0)) },
-        u_guideColor: { value: new THREE2.Vector3(1, 0, 0.55) }
-        // magenta/pink
-      },
-      transparent: true,
-      depthTest: false,
-      depthWrite: false
-    });
-    const geometry = new THREE2.BufferGeometry();
-    const vertices = new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]);
-    geometry.setAttribute("position", new THREE2.BufferAttribute(vertices, 3));
-    this.mesh = new THREE2.Mesh(geometry, this.material);
-    this.scene.add(this.mesh);
-  }
-  setConfig(config) {
-    const u = this.material.uniforms;
-    if (config.outlineColor) u.u_outlineColor.value.set(...config.outlineColor);
-    if (config.outlineWidth !== void 0) u.u_outlineWidth.value = config.outlineWidth;
-    if (config.hoverColor) u.u_hoverColor.value.set(...config.hoverColor);
-    if (config.hoverWidth !== void 0) u.u_hoverWidth.value = config.hoverWidth;
-    if (config.handleSize !== void 0) u.u_handleSize.value = config.handleSize;
-    if (config.handleFill) u.u_handleFill.value.set(...config.handleFill);
-    if (config.handleBorder) u.u_handleBorder.value.set(...config.handleBorder);
-    if (config.handleBorderWidth !== void 0)
-      u.u_handleBorderWidth.value = config.handleBorderWidth;
-    if (config.groupDash !== void 0) u.u_groupDash.value = config.groupDash;
-  }
-  setSize(resolution, dpr) {
-    this.material.uniforms.u_resolution.value.copy(resolution);
-    this.material.uniforms.u_dpr.value = dpr;
-  }
-  render(renderer, cameraX, cameraY, zoom, selected, hovered, guides = [], spacings = []) {
-    const u = this.material.uniforms;
-    u.u_camera.value.set(cameraX, cameraY);
-    u.u_zoom.value = zoom;
-    const count = Math.min(selected.length, MAX_ENTITIES);
-    u.u_count.value = count;
-    for (let i = 0; i < count; i++) {
-      const b = selected[i];
-      u.u_bounds.value[i].set(b.x, b.y, b.width, b.height);
-    }
-    if (hovered && count < MAX_ENTITIES) {
-      let hoverIdx = -1;
-      for (let i = 0; i < count; i++) {
-        const b = selected[i];
-        if (b.x === hovered.x && b.y === hovered.y) {
-          hoverIdx = i;
-          break;
-        }
-      }
-      if (hoverIdx < 0) {
-        u.u_bounds.value[count].set(hovered.x, hovered.y, hovered.width, hovered.height);
-        u.u_hoverIdx.value = count;
-      } else {
-        u.u_hoverIdx.value = -1;
-      }
-    } else {
-      u.u_hoverIdx.value = -1;
-    }
-    if (count > 1) {
-      let minX = Number.POSITIVE_INFINITY;
-      let minY = Number.POSITIVE_INFINITY;
-      let maxX = Number.NEGATIVE_INFINITY;
-      let maxY = Number.NEGATIVE_INFINITY;
-      for (let i = 0; i < count; i++) {
-        const b = selected[i];
-        minX = Math.min(minX, b.x);
-        minY = Math.min(minY, b.y);
-        maxX = Math.max(maxX, b.x + b.width);
-        maxY = Math.max(maxY, b.y + b.height);
-      }
-      u.u_groupBounds.value.set(minX, minY, maxX - minX, maxY - minY);
-      u.u_hasGroup.value = 1;
-    } else {
-      u.u_hasGroup.value = 0;
-    }
-    const gCount = Math.min(guides.length, 16);
-    u.u_guideCount.value = gCount;
-    for (let i = 0; i < gCount; i++) {
-      const g = guides[i];
-      u.u_guides.value[i].set(g.axis === "x" ? 0 : 1, g.position, 0, 0);
-    }
-    let sIdx = 0;
-    for (const sp of spacings) {
-      for (const seg of sp.segments) {
-        if (sIdx >= 8) break;
-        u.u_spacings.value[sIdx].set(sp.axis === "x" ? 0 : 1, seg.from, seg.to, sp.perpPosition);
-        sIdx++;
-      }
-    }
-    u.u_spacingCount.value = sIdx;
-    const prevAutoClear = renderer.autoClear;
-    renderer.autoClear = false;
-    renderer.render(this.scene, this.camera);
-    renderer.autoClear = prevAutoClear;
-  }
-  dispose() {
-    this.mesh.geometry.dispose();
-    this.material.dispose();
-  }
-};
-function WebGLWidgetSlot({ entityId, component: WidgetComponent }) {
-  const groupRef = useRef(null);
-  const engine = useLayoutEngine();
-  const wb = useComponent(entityId, WorldBounds);
-  useFrame(() => {
-    if (!groupRef.current) return;
-    const bounds = engine.get(entityId, WorldBounds);
-    if (!bounds) return;
-    groupRef.current.position.set(
-      bounds.worldX + bounds.worldWidth / 2,
-      -(bounds.worldY + bounds.worldHeight / 2),
-      0
-    );
-  });
-  if (!wb) return null;
-  return /* @__PURE__ */ jsx("group", { ref: groupRef, children: /* @__PURE__ */ jsx(WidgetComponent, { entityId, width: wb.worldWidth, height: wb.worldHeight }) });
-}
-function syncCamera(camera, size, engine) {
-  const cam = engine.getCamera();
-  const ortho = camera;
-  ortho.left = 0;
-  ortho.right = size.width / cam.zoom;
-  ortho.top = 0;
-  ortho.bottom = -(size.height / cam.zoom);
-  ortho.near = 0.1;
-  ortho.far = 1e4;
-  ortho.position.set(cam.x, -cam.y, 1e3);
-  ortho.updateProjectionMatrix();
-}
-function CameraSync({ engine }) {
-  const { camera, size } = useThree();
-  useLayoutEffect(() => {
-    syncCamera(camera, size, engine);
-  }, [camera, size, engine]);
-  useFrame(() => {
-    syncCamera(camera, size, engine);
-  });
-  return null;
-}
-function WebGLWidgetLayer({ engine, entities, resolve }) {
-  const canvasRef = useRef(null);
-  const initialCamera = useMemo(() => {
-    const cam = new THREE2.OrthographicCamera(0, 1, 0, -1, 0.1, 1e4);
-    cam.position.set(0, 0, 1e3);
-    return cam;
-  }, []);
-  const widgetEntries = useMemo(() => {
-    const result = [];
-    for (const id of entities) {
-      const resolved = resolve(id);
-      if (resolved && resolved.surface === "webgl") {
-        result.push({ entityId: id, component: resolved.component });
-      }
-    }
-    return result;
-  }, [entities, resolve]);
-  return /* @__PURE__ */ jsx(
-    Canvas,
-    {
-      ref: canvasRef,
-      camera: initialCamera,
-      frameloop: "always",
-      gl: { alpha: true, antialias: true },
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        zIndex: 1,
-        display: widgetEntries.length === 0 ? "none" : "block"
-      },
-      children: /* @__PURE__ */ jsxs(EngineProvider, { value: engine, children: [
-        /* @__PURE__ */ jsx(CameraSync, { engine }),
-        widgetEntries.map(({ entityId, component }) => /* @__PURE__ */ jsx(WebGLWidgetSlot, { entityId, component }, entityId))
-      ] })
-    }
-  );
-}
-
-export { Active, BreakpointConfigResource, CameraResource, Children, CommandBuffer, Container, ContainerRefProvider, CursorHint, CursorResource, DEAD_ZONE_TOUCH_PX, DEFAULT_GRID_CONFIG, DEFAULT_SELECTION_CONFIG, Draggable, EngineProvider, GridRenderer, HandleSet, Hitbox, InteractionRole, Locked, MoveCommand, NavigationStackResource, Parent, Profiler, Resizable, ResizeCommand, Selectable, Selected, SelectionOverlaySlot, SelectionRenderer, SetComponentCommand, SpatialIndex, SpatialIndexResource, Transform2D, ViewportResource, Visible, WebGLWidgetLayer, WebGLWidgetSlot, Widget, WidgetBreakpoint, WidgetData, WidgetResolverProvider, WidgetSlot, WorldBounds, ZIndex, ZoomConfigResource, clamp, computeSnapGuides, createArchetypeRegistry, createLayoutEngine, createWidgetRegistry, intersectsAABB, isR3FWidget, pointInAABB, screenToWorld, useCamera, useComponent, useContainerRef, useLayoutEngine, useQuery, useResource, useTag, useTaggedEntities, useWidgetResolver, worldBoundsToAABB, worldToScreen };
-//# sourceMappingURL=chunk-Z6JQQOWL.js.map
-//# sourceMappingURL=chunk-Z6JQQOWL.js.map