@fieldnotes/core 0.37.0 → 0.38.1

package/dist/index.js

@@ -6039,6 +6039,32 @@ var Viewport = class {
     this.requestRender();
     return el.id;
   }
+  addShape(opts = {}) {
+    const size = opts.size ?? { w: 100, h: 100 };
+    const position = opts.position ?? this.centeredPosition(size);
+    const shape = createShape({
+      position,
+      size,
+      shape: opts.shape,
+      strokeColor: opts.strokeColor,
+      strokeWidth: opts.strokeWidth,
+      fillColor: opts.fillColor,
+      layerId: this.layerManager.activeLayerId
+    });
+    this.historyRecorder.begin();
+    this.store.add(shape);
+    this.historyRecorder.commit();
+    this.getSelectTool()?.setSelection([shape.id]);
+    this.requestRender();
+    return shape.id;
+  }
+  centeredPosition(size) {
+    const c = this.camera.screenToWorld({
+      x: this.wrapper.clientWidth / 2,
+      y: this.wrapper.clientHeight / 2
+    });
+    return { x: c.x - size.w / 2, y: c.y - size.h / 2 };
+  }
   removeLayer(id) {
     this.historyRecorder.begin();
     this.layerManager.removeLayer(id);
@@ -7088,14 +7114,11 @@ function computeSnapGuides(moving, targets, threshold) {
   return { dx: xSnap?.delta ?? 0, dy: ySnap?.delta ?? 0, guides };
 }
 
-// src/tools/select-tool.ts
+// src/tools/select-overlay.ts
 var HANDLE_SIZE = 8;
-var SNAP_PX = 6;
 var HANDLE_HIT_PADDING2 = 4;
 var SELECTION_PAD = 4;
-var MIN_ELEMENT_SIZE = 20;
 var ROTATE_HANDLE_OFFSET = 24;
-var ROTATE_SNAP = Math.PI / 12;
 var ROTATABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape", "stroke"]);
 var HANDLE_CURSORS = {
   nw: "nwse-resize",
@@ -7103,6 +7126,486 @@ var HANDLE_CURSORS = {
   ne: "nesw-resize",
   sw: "nesw-resize"
 };
+function getOverlayLayout(el, zoom) {
+  const bounds = getElementBounds(el);
+  if (!bounds) return null;
+  const angle = el.rotation ?? 0;
+  const pad = SELECTION_PAD / zoom;
+  const center2 = { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 };
+  const raw = [
+    ["nw", { x: bounds.x - pad, y: bounds.y - pad }],
+    ["ne", { x: bounds.x + bounds.w + pad, y: bounds.y - pad }],
+    ["sw", { x: bounds.x - pad, y: bounds.y + bounds.h + pad }],
+    ["se", { x: bounds.x + bounds.w + pad, y: bounds.y + bounds.h + pad }]
+  ];
+  const corners = raw.map(
+    ([h, p]) => [h, rotatePoint(p, center2, angle)]
+  );
+  const topMid = { x: center2.x, y: bounds.y - pad - ROTATE_HANDLE_OFFSET / zoom };
+  const rotateHandle = rotatePoint(topMid, center2, angle);
+  return { center: center2, corners, rotateHandle, angle };
+}
+function getHandlePositions(bounds) {
+  return [
+    ["nw", { x: bounds.x, y: bounds.y }],
+    ["ne", { x: bounds.x + bounds.w, y: bounds.y }],
+    ["sw", { x: bounds.x, y: bounds.y + bounds.h }],
+    ["se", { x: bounds.x + bounds.w, y: bounds.y + bounds.h }]
+  ];
+}
+function topMidpoint(layout) {
+  const nw = layout.corners.find(([h]) => h === "nw")?.[1] ?? { x: 0, y: 0 };
+  const ne = layout.corners.find(([h]) => h === "ne")?.[1] ?? { x: 0, y: 0 };
+  return { x: (nw.x + ne.x) / 2, y: (nw.y + ne.y) / 2 };
+}
+function drawLockBadge(ctx, at, zoom) {
+  const r = 9 / zoom;
+  ctx.save();
+  ctx.setLineDash([]);
+  ctx.beginPath();
+  ctx.arc(at.x, at.y, r, 0, Math.PI * 2);
+  ctx.fillStyle = "#ffffff";
+  ctx.fill();
+  ctx.strokeStyle = "#2196F3";
+  ctx.lineWidth = 1.5 / zoom;
+  ctx.stroke();
+  const bw = 8 / zoom;
+  const bh = 6 / zoom;
+  ctx.fillStyle = "#2196F3";
+  ctx.fillRect(at.x - bw / 2, at.y - bh / 2 + 1 / zoom, bw, bh);
+  ctx.beginPath();
+  ctx.arc(at.x, at.y - bh / 2 + 1 / zoom, 2.5 / zoom, Math.PI, 0);
+  ctx.lineWidth = 1.4 / zoom;
+  ctx.stroke();
+  ctx.restore();
+}
+function renderMarquee(ctx, rect) {
+  ctx.save();
+  ctx.strokeStyle = "#2196F3";
+  ctx.fillStyle = "rgba(33, 150, 243, 0.08)";
+  ctx.lineWidth = 1;
+  ctx.setLineDash([4, 4]);
+  ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+  ctx.restore();
+}
+function renderBindingHighlights(ctx, arrow, zoom, store) {
+  if (!arrow.fromBinding && !arrow.toBinding) return;
+  const pad = SELECTION_PAD / zoom;
+  ctx.save();
+  ctx.strokeStyle = "#2196F3";
+  ctx.lineWidth = 2 / zoom;
+  ctx.setLineDash([]);
+  const drawn = /* @__PURE__ */ new Set();
+  for (const binding of [arrow.fromBinding, arrow.toBinding]) {
+    if (!binding || drawn.has(binding.elementId)) continue;
+    drawn.add(binding.elementId);
+    const target = store.getById(binding.elementId);
+    if (!target) continue;
+    const bounds = getElementBounds(target);
+    if (!bounds) continue;
+    ctx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
+  }
+  ctx.restore();
+}
+function renderSelectionBoxes(ctx, p) {
+  if (p.selectedIds.length === 0) return;
+  const zoom = p.zoom;
+  const handleWorldSize = HANDLE_SIZE / zoom;
+  ctx.save();
+  ctx.strokeStyle = "#2196F3";
+  ctx.lineWidth = 1.5 / zoom;
+  ctx.setLineDash([4 / zoom, 4 / zoom]);
+  for (const id of p.selectedIds) {
+    const el = p.store.getById(id);
+    if (!el) continue;
+    if (el.type === "arrow") {
+      renderArrowHandles(ctx, el, zoom);
+      renderBindingHighlights(ctx, el, zoom, p.store);
+      continue;
+    }
+    if (el.type === "shape" && el.shape === "line") {
+      ctx.setLineDash([]);
+      ctx.fillStyle = "#ffffff";
+      const r = handleWorldSize / 2;
+      for (const pt of lineEndpoints(el)) {
+        ctx.beginPath();
+        ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+      }
+      ctx.setLineDash([4 / zoom, 4 / zoom]);
+      continue;
+    }
+    const bounds = getElementBounds(el);
+    if (!bounds) continue;
+    const layout = getOverlayLayout(el, zoom);
+    if (!layout) continue;
+    const pad = SELECTION_PAD / zoom;
+    if (layout.angle === 0) {
+      ctx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
+    } else {
+      const ordered = ["nw", "ne", "se", "sw"].map((h) => layout.corners.find(([c]) => c === h)?.[1]).filter((pp) => !!pp);
+      const [p0, ...others] = ordered;
+      if (p0) {
+        ctx.beginPath();
+        ctx.moveTo(p0.x, p0.y);
+        for (const pp of others) ctx.lineTo(pp.x, pp.y);
+        ctx.closePath();
+        ctx.stroke();
+      }
+    }
+    if (!el.locked) {
+      if ("size" in el) {
+        ctx.setLineDash([]);
+        ctx.fillStyle = "#ffffff";
+        const corners = layout.angle === 0 ? getHandlePositions(bounds) : layout.corners;
+        for (const [, pos] of corners) {
+          ctx.fillRect(
+            pos.x - handleWorldSize / 2,
+            pos.y - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+          ctx.strokeRect(
+            pos.x - handleWorldSize / 2,
+            pos.y - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+        }
+        ctx.setLineDash([4 / zoom, 4 / zoom]);
+      } else if (el.type === "template") {
+        ctx.setLineDash([]);
+        ctx.fillStyle = "#ffffff";
+        const hx = bounds.x + bounds.w;
+        const hy = bounds.y + bounds.h;
+        ctx.fillRect(
+          hx - handleWorldSize / 2,
+          hy - handleWorldSize / 2,
+          handleWorldSize,
+          handleWorldSize
+        );
+        ctx.strokeRect(
+          hx - handleWorldSize / 2,
+          hy - handleWorldSize / 2,
+          handleWorldSize,
+          handleWorldSize
+        );
+        ctx.setLineDash([4 / zoom, 4 / zoom]);
+      }
+      if (p.selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
+        const stemStart = topMidpoint(layout);
+        const stemEnd = layout.rotateHandle;
+        ctx.beginPath();
+        ctx.moveTo(stemStart.x, stemStart.y);
+        ctx.lineTo(stemEnd.x, stemEnd.y);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = "#ffffff";
+        ctx.beginPath();
+        ctx.arc(stemEnd.x, stemEnd.y, handleWorldSize / 2, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        ctx.setLineDash([4 / zoom, 4 / zoom]);
+      }
+    }
+    if (el.locked) {
+      const ne = layout.corners.find(([h]) => h === "ne")?.[1];
+      if (ne) drawLockBadge(ctx, ne, zoom);
+    }
+  }
+  ctx.restore();
+}
+function renderGuideLines(ctx, p) {
+  const zoom = p.zoom;
+  const rect = p.rect;
+  ctx.save();
+  ctx.strokeStyle = "#FF4081";
+  ctx.lineWidth = 1 / zoom;
+  ctx.setLineDash([]);
+  for (const g of p.guides) {
+    ctx.beginPath();
+    if (g.axis === "x") {
+      const y0 = rect ? rect.y : p.currentWorld.y - 1e5;
+      const y1 = rect ? rect.y + rect.h : p.currentWorld.y + 1e5;
+      ctx.moveTo(g.position, y0);
+      ctx.lineTo(g.position, y1);
+    } else {
+      const x0 = rect ? rect.x : p.currentWorld.x - 1e5;
+      const x1 = rect ? rect.x + rect.w : p.currentWorld.x + 1e5;
+      ctx.moveTo(x0, g.position);
+      ctx.lineTo(x1, g.position);
+    }
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+// src/tools/select-hit.ts
+function hitTest(world, ctx) {
+  const r = 10;
+  const candidates = ctx.store.queryRect({ x: world.x - r, y: world.y - r, w: r * 2, h: r * 2 }).reverse();
+  for (const el of candidates) {
+    if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
+    if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+    if (el.type === "grid") continue;
+    if (isInsideBounds(world, el)) return el;
+  }
+  return null;
+}
+function isInsideBounds(point, el) {
+  if (el.type === "grid") return false;
+  const angle = el.rotation ?? 0;
+  if (angle !== 0) {
+    const b = getElementBounds(el);
+    if (b) {
+      point = rotatePoint(point, { x: b.x + b.w / 2, y: b.y + b.h / 2 }, -angle);
+    }
+  }
+  if (el.type === "shape" && el.shape === "line") {
+    const [a, b] = lineEndpoints(el);
+    const threshold = Math.max(el.strokeWidth / 2, 6);
+    return distSqToSegment(point, a, b) <= threshold * threshold;
+  }
+  if ("size" in el) {
+    const s = el.size;
+    return point.x >= el.position.x && point.x <= el.position.x + s.w && point.y >= el.position.y && point.y <= el.position.y + s.h;
+  }
+  if (el.type === "stroke") {
+    return hitTestStroke(el, point, 10);
+  }
+  if (el.type === "arrow") {
+    return isNearBezier(point, el.from, el.to, el.bend, 10);
+  }
+  if (el.type === "template") {
+    const bounds = getElementBounds(el);
+    if (!bounds) return false;
+    return point.x >= bounds.x && point.x <= bounds.x + bounds.w && point.y >= bounds.y && point.y <= bounds.y + bounds.h;
+  }
+  return false;
+}
+function hitTestResizeHandle(world, ctx, selectedIds) {
+  if (selectedIds.length === 0) return null;
+  const zoom = ctx.camera.zoom;
+  const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  for (const id of selectedIds) {
+    const el = ctx.store.getById(id);
+    if (!el || !("size" in el)) continue;
+    if (el.locked) continue;
+    if (el.type === "shape" && el.shape === "line") continue;
+    const layout = getOverlayLayout(el, zoom);
+    if (!layout) continue;
+    for (const [handle, pos] of layout.corners) {
+      if (Math.abs(world.x - pos.x) <= handleHalf && Math.abs(world.y - pos.y) <= handleHalf) {
+        return { elementId: id, handle };
+      }
+    }
+  }
+  return null;
+}
+function hitTestRotateHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked || !ROTATABLE_TYPES.has(el.type)) return null;
+  const layout = getOverlayLayout(el, ctx.camera.zoom);
+  if (!layout) return null;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
+  const dx = world.x - layout.rotateHandle.x;
+  const dy = world.y - layout.rotateHandle.y;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
+function hitTestLineHandles(world, ctx, selectedIds) {
+  if (selectedIds.length === 0) return null;
+  const zoom = ctx.camera.zoom;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  const r2 = r * r;
+  for (const id of selectedIds) {
+    const el = ctx.store.getById(id);
+    if (!el || el.type !== "shape" || el.shape !== "line") continue;
+    const [a, b] = lineEndpoints(el);
+    if ((world.x - a.x) ** 2 + (world.y - a.y) ** 2 <= r2) return { elementId: id, fixed: b };
+    if ((world.x - b.x) ** 2 + (world.y - b.y) ** 2 <= r2) return { elementId: id, fixed: a };
+  }
+  return null;
+}
+function hitTestTemplateResizeHandle(world, ctx, selectedIds) {
+  if (selectedIds.length === 0) return null;
+  const zoom = ctx.camera.zoom;
+  const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  for (const id of selectedIds) {
+    const el = ctx.store.getById(id);
+    if (!el || el.type !== "template") continue;
+    const bounds = getElementBounds(el);
+    if (!bounds) continue;
+    const hx = bounds.x + bounds.w;
+    const hy = bounds.y + bounds.h;
+    if (Math.abs(world.x - hx) <= handleHalf && Math.abs(world.y - hy) <= handleHalf) {
+      return id;
+    }
+  }
+  return null;
+}
+function findElementsInRect(marquee, ctx) {
+  const candidates = ctx.store.queryRect(marquee);
+  const ids = [];
+  for (const el of candidates) {
+    if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
+    if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+    if (el.type === "grid") continue;
+    const bounds = getElementBounds(el);
+    if (bounds && rectsOverlap(marquee, rotatedAABB(bounds, el.rotation ?? 0))) {
+      ids.push(el.id);
+    }
+  }
+  return ids;
+}
+function rectsOverlap(a, b) {
+  return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
+}
+
+// src/tools/select-resize.ts
+var MIN_ELEMENT_SIZE = 20;
+function anchorOffset(handle, w, h) {
+  switch (handle) {
+    case "se":
+      return { x: -w / 2, y: -h / 2 };
+    case "sw":
+      return { x: w / 2, y: -h / 2 };
+    case "ne":
+      return { x: -w / 2, y: h / 2 };
+    case "nw":
+      return { x: w / 2, y: h / 2 };
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+function computeResize(el, handle, world, lastWorld, aspectRatio, shiftKey) {
+  const dx = world.x - lastWorld.x;
+  const dy = world.y - lastWorld.y;
+  let { x, y, w, h } = { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h };
+  switch (handle) {
+    case "se":
+      w += dx;
+      h += dy;
+      break;
+    case "sw":
+      x += dx;
+      w -= dx;
+      h += dy;
+      break;
+    case "ne":
+      y += dy;
+      w += dx;
+      h -= dy;
+      break;
+    case "nw":
+      x += dx;
+      y += dy;
+      w -= dx;
+      h -= dy;
+      break;
+  }
+  if (shiftKey && aspectRatio > 0) {
+    const absDw = Math.abs(w - el.size.w);
+    const absDh = Math.abs(h - el.size.h);
+    if (absDw >= absDh) {
+      h = w / aspectRatio;
+    } else {
+      w = h * aspectRatio;
+    }
+    if (handle === "nw" || handle === "sw") {
+      x = el.position.x + el.size.w - w;
+    }
+    if (handle === "nw" || handle === "ne") {
+      y = el.position.y + el.size.h - h;
+    }
+  }
+  if (w < MIN_ELEMENT_SIZE) {
+    if (handle === "nw" || handle === "sw") x = el.position.x + el.size.w - MIN_ELEMENT_SIZE;
+    w = MIN_ELEMENT_SIZE;
+  }
+  if (h < MIN_ELEMENT_SIZE) {
+    if (handle === "nw" || handle === "ne") y = el.position.y + el.size.h - MIN_ELEMENT_SIZE;
+    h = MIN_ELEMENT_SIZE;
+  }
+  return { position: { x, y }, size: { w, h } };
+}
+function computeRotatedResize(el, handle, angle, world, lastWorld, aspectRatio, shiftKey) {
+  const wdx = world.x - lastWorld.x;
+  const wdy = world.y - lastWorld.y;
+  const cosN = Math.cos(-angle);
+  const sinN = Math.sin(-angle);
+  const ldx = wdx * cosN - wdy * sinN;
+  const ldy = wdx * sinN + wdy * cosN;
+  let w = el.size.w;
+  let h = el.size.h;
+  switch (handle) {
+    case "se":
+      w += ldx;
+      h += ldy;
+      break;
+    case "sw":
+      w -= ldx;
+      h += ldy;
+      break;
+    case "ne":
+      w += ldx;
+      h -= ldy;
+      break;
+    case "nw":
+      w -= ldx;
+      h -= ldy;
+      break;
+  }
+  if (shiftKey && aspectRatio > 0) {
+    const absDw = Math.abs(w - el.size.w);
+    const absDh = Math.abs(h - el.size.h);
+    if (absDw >= absDh) h = w / aspectRatio;
+    else w = h * aspectRatio;
+  }
+  w = Math.max(w, MIN_ELEMENT_SIZE);
+  h = Math.max(h, MIN_ELEMENT_SIZE);
+  const oldCenter = { x: el.position.x + el.size.w / 2, y: el.position.y + el.size.h / 2 };
+  const oldAnchorLocal = anchorOffset(handle, el.size.w, el.size.h);
+  const anchorWorld = rotatePoint(
+    { x: oldCenter.x + oldAnchorLocal.x, y: oldCenter.y + oldAnchorLocal.y },
+    oldCenter,
+    angle
+  );
+  const newAnchorLocal = anchorOffset(handle, w, h);
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  const rotatedAnchor = {
+    x: newAnchorLocal.x * cos - newAnchorLocal.y * sin,
+    y: newAnchorLocal.x * sin + newAnchorLocal.y * cos
+  };
+  const newCenter = { x: anchorWorld.x - rotatedAnchor.x, y: anchorWorld.y - rotatedAnchor.y };
+  const position = { x: newCenter.x - w / 2, y: newCenter.y - h / 2 };
+  return { position, size: { w, h } };
+}
+function computeTemplateResize(el, world, opts) {
+  const dx = world.x - el.position.x;
+  const dy = world.y - el.position.y;
+  let newRadius = Math.sqrt(dx * dx + dy * dy);
+  if (opts.snapToGrid && opts.gridSize && opts.gridSize > 0) {
+    const snapUnit = opts.gridType === "hex" ? Math.sqrt(3) * opts.gridSize : opts.gridSize;
+    newRadius = Math.max(snapUnit, Math.round(newRadius / snapUnit) * snapUnit);
+  }
+  newRadius = Math.max(MIN_ELEMENT_SIZE, newRadius);
+  const updates = { radius: newRadius };
+  if (el.feetPerCell != null && opts.gridSize && opts.gridSize > 0) {
+    const snapUnit = opts.gridType === "hex" ? Math.sqrt(3) * opts.gridSize : opts.gridSize;
+    updates.radiusFeet = newRadius / snapUnit * el.feetPerCell;
+  }
+  return updates;
+}
+
+// src/tools/select-tool.ts
+var SNAP_PX = 6;
+var ROTATE_SNAP = Math.PI / 12;
 var SelectTool = class {
   name = "select";
   _selectedIds = [];
@@ -7138,7 +7641,7 @@ var SelectTool = class {
     this.ctx?.requestRender();
   }
   selectAtPoint(world, ctx) {
-    const hit = this.hitTest(world, ctx);
+    const hit = hitTest(world, ctx);
     if (!hit) {
       this.setSelectedIds([]);
       return;
@@ -7182,19 +7685,19 @@ var SelectTool = class {
       ctx.requestRender();
       return;
     }
-    const lineHit = this.hitTestLineHandles(world, ctx);
+    const lineHit = hitTestLineHandles(world, ctx, this._selectedIds);
     if (lineHit) {
       this.mode = { type: "line-handle", elementId: lineHit.elementId, fixed: lineHit.fixed };
       ctx.requestRender();
       return;
     }
-    const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
+    const templateResizeHit = hitTestTemplateResizeHandle(world, ctx, this._selectedIds);
     if (templateResizeHit) {
       this.mode = { type: "resizing-template", elementId: templateResizeHit };
       ctx.requestRender();
       return;
     }
-    const rotateHit = this.hitTestRotateHandle(world, ctx);
+    const rotateHit = hitTestRotateHandle(world, ctx, this._selectedIds);
     if (rotateHit) {
       const el = ctx.store.getById(rotateHit.elementId);
       const layout = el ? this.getOverlayLayout(el, ctx.camera.zoom) : null;
@@ -7210,7 +7713,7 @@ var SelectTool = class {
         return;
       }
     }
-    const resizeHit = this.hitTestResizeHandle(world, ctx);
+    const resizeHit = hitTestResizeHandle(world, ctx, this._selectedIds);
     if (resizeHit) {
       const el = ctx.store.getById(resizeHit.elementId);
       if (el && "size" in el) {
@@ -7226,7 +7729,7 @@ var SelectTool = class {
     }
     this.pendingSingleSelectId = null;
     this.hasDragged = false;
-    const hit = this.hitTest(world, ctx);
+    const hit = hitTest(world, ctx);
     if (hit) {
       const all = ctx.store.getAll();
       const alreadySelected = this._selectedIds.includes(hit.id);
@@ -7364,7 +7867,7 @@ var SelectTool = class {
     if (this.mode.type === "marquee") {
       const rect = this.getMarqueeRect();
       if (rect) {
-        this.setSelectedIds(expandToGroups(this.findElementsInRect(rect, ctx), ctx.store.getAll()));
+        this.setSelectedIds(expandToGroups(findElementsInRect(rect, ctx), ctx.store.getAll()));
       }
       ctx.requestRender();
     }
@@ -7391,8 +7894,16 @@ var SelectTool = class {
     this.setHovered(hoverId, ctx);
   }
   renderOverlay(canvasCtx) {
-    this.renderMarquee(canvasCtx);
-    this.renderSelectionBoxes(canvasCtx);
+    if (this.mode.type === "marquee") {
+      const rect = this.getMarqueeRect();
+      if (rect) renderMarquee(canvasCtx, rect);
+    }
+    if (this.ctx)
+      renderSelectionBoxes(canvasCtx, {
+        selectedIds: this._selectedIds,
+        store: this.ctx.store,
+        zoom: this.ctx.camera.zoom
+      });
     if (this.mode.type === "arrow-handle" && this.ctx) {
       const target = getArrowHandleDragTarget(
         this.mode.handle,
@@ -7426,32 +7937,13 @@ var SelectTool = class {
         }
       }
     }
-    this.renderGuideLines(canvasCtx);
-  }
-  renderGuideLines(canvasCtx) {
-    if (this.mode.type !== "dragging" || !this.ctx || this.activeGuides.length === 0) return;
-    const zoom = this.ctx.camera.zoom;
-    const rect = this.dragVisibleRect;
-    canvasCtx.save();
-    canvasCtx.strokeStyle = "#FF4081";
-    canvasCtx.lineWidth = 1 / zoom;
-    canvasCtx.setLineDash([]);
-    for (const g of this.activeGuides) {
-      canvasCtx.beginPath();
-      if (g.axis === "x") {
-        const y0 = rect ? rect.y : this.currentWorld.y - 1e5;
-        const y1 = rect ? rect.y + rect.h : this.currentWorld.y + 1e5;
-        canvasCtx.moveTo(g.position, y0);
-        canvasCtx.lineTo(g.position, y1);
-      } else {
-        const x0 = rect ? rect.x : this.currentWorld.x - 1e5;
-        const x1 = rect ? rect.x + rect.w : this.currentWorld.x + 1e5;
-        canvasCtx.moveTo(x0, g.position);
-        canvasCtx.lineTo(x1, g.position);
-      }
-      canvasCtx.stroke();
-    }
-    canvasCtx.restore();
+    if (this.mode.type === "dragging" && this.ctx && this.activeGuides.length)
+      renderGuideLines(canvasCtx, {
+        guides: this.activeGuides,
+        rect: this.dragVisibleRect,
+        currentWorld: this.currentWorld,
+        zoom: this.ctx.camera.zoom
+      });
   }
   updateArrowsBoundTo(ids, ctx) {
     updateArrowsBoundToElements(ids, ctx.store);
@@ -7477,25 +7969,25 @@ var SelectTool = class {
       ctx.setCursor?.(getArrowHandleCursor(arrowHit.handle, false));
       return null;
     }
-    if (this.hitTestLineHandles(world, ctx)) {
+    if (hitTestLineHandles(world, ctx, this._selectedIds)) {
       ctx.setCursor?.("grab");
       return null;
     }
-    const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
+    const templateResizeHit = hitTestTemplateResizeHandle(world, ctx, this._selectedIds);
     if (templateResizeHit) {
       ctx.setCursor?.("nwse-resize");
       return null;
     }
-    if (this.hitTestRotateHandle(world, ctx)) {
+    if (hitTestRotateHandle(world, ctx, this._selectedIds)) {
       ctx.setCursor?.("grab");
       return null;
     }
-    const resizeHit = this.hitTestResizeHandle(world, ctx);
+    const resizeHit = hitTestResizeHandle(world, ctx, this._selectedIds);
     if (resizeHit) {
       ctx.setCursor?.(HANDLE_CURSORS[resizeHit.handle]);
       return null;
     }
-    const hit = this.hitTest(world, ctx);
+    const hit = hitTest(world, ctx);
     ctx.setCursor?.(hit ? "move" : "default");
     return hit ? hit.id : null;
   }
@@ -7509,421 +8001,43 @@ var SelectTool = class {
     const el = ctx.store.getById(this.mode.elementId);
     if (!el || !("size" in el) || el.locked) return;
     const angle = el.rotation ?? 0;
-    if (angle !== 0) {
-      this.handleRotatedResize(world, el, angle, ctx, shiftKey);
-      return;
-    }
-    const { handle } = this.mode;
-    const dx = world.x - this.lastWorld.x;
-    const dy = world.y - this.lastWorld.y;
-    this.lastWorld = world;
-    let { x, y, w, h } = { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h };
-    switch (handle) {
-      case "se":
-        w += dx;
-        h += dy;
-        break;
-      case "sw":
-        x += dx;
-        w -= dx;
-        h += dy;
-        break;
-      case "ne":
-        y += dy;
-        w += dx;
-        h -= dy;
-        break;
-      case "nw":
-        x += dx;
-        y += dy;
-        w -= dx;
-        h -= dy;
-        break;
-    }
-    if (shiftKey && this.resizeAspectRatio > 0) {
-      const absDw = Math.abs(w - el.size.w);
-      const absDh = Math.abs(h - el.size.h);
-      if (absDw >= absDh) {
-        h = w / this.resizeAspectRatio;
-      } else {
-        w = h * this.resizeAspectRatio;
-      }
-      if (handle === "nw" || handle === "sw") {
-        x = el.position.x + el.size.w - w;
-      }
-      if (handle === "nw" || handle === "ne") {
-        y = el.position.y + el.size.h - h;
-      }
-    }
-    if (w < MIN_ELEMENT_SIZE) {
-      if (handle === "nw" || handle === "sw") x = el.position.x + el.size.w - MIN_ELEMENT_SIZE;
-      w = MIN_ELEMENT_SIZE;
-    }
-    if (h < MIN_ELEMENT_SIZE) {
-      if (handle === "nw" || handle === "ne") y = el.position.y + el.size.h - MIN_ELEMENT_SIZE;
-      h = MIN_ELEMENT_SIZE;
-    }
-    ctx.store.update(this.mode.elementId, {
-      position: { x, y },
-      size: { w, h }
-    });
-    this.updateArrowsBoundTo([this.mode.elementId], ctx);
-    ctx.requestRender();
-  }
-  anchorOffset(handle, w, h) {
-    switch (handle) {
-      case "se":
-        return { x: -w / 2, y: -h / 2 };
-      case "sw":
-        return { x: w / 2, y: -h / 2 };
-      case "ne":
-        return { x: -w / 2, y: h / 2 };
-      case "nw":
-        return { x: w / 2, y: h / 2 };
-      default:
-        return { x: 0, y: 0 };
-    }
-  }
-  handleRotatedResize(world, el, angle, ctx, shiftKey) {
-    if (this.mode.type !== "resizing") return;
-    const { handle } = this.mode;
-    const wdx = world.x - this.lastWorld.x;
-    const wdy = world.y - this.lastWorld.y;
-    this.lastWorld = world;
-    const cosN = Math.cos(-angle);
-    const sinN = Math.sin(-angle);
-    const ldx = wdx * cosN - wdy * sinN;
-    const ldy = wdx * sinN + wdy * cosN;
-    let w = el.size.w;
-    let h = el.size.h;
-    switch (handle) {
-      case "se":
-        w += ldx;
-        h += ldy;
-        break;
-      case "sw":
-        w -= ldx;
-        h += ldy;
-        break;
-      case "ne":
-        w += ldx;
-        h -= ldy;
-        break;
-      case "nw":
-        w -= ldx;
-        h -= ldy;
-        break;
-    }
-    if (shiftKey && this.resizeAspectRatio > 0) {
-      const absDw = Math.abs(w - el.size.w);
-      const absDh = Math.abs(h - el.size.h);
-      if (absDw >= absDh) h = w / this.resizeAspectRatio;
-      else w = h * this.resizeAspectRatio;
-    }
-    w = Math.max(w, MIN_ELEMENT_SIZE);
-    h = Math.max(h, MIN_ELEMENT_SIZE);
-    const oldCenter = { x: el.position.x + el.size.w / 2, y: el.position.y + el.size.h / 2 };
-    const oldAnchorLocal = this.anchorOffset(handle, el.size.w, el.size.h);
-    const anchorWorld = rotatePoint(
-      { x: oldCenter.x + oldAnchorLocal.x, y: oldCenter.y + oldAnchorLocal.y },
-      oldCenter,
-      angle
+    const patch = angle !== 0 ? computeRotatedResize(
+      el,
+      this.mode.handle,
+      angle,
+      world,
+      this.lastWorld,
+      this.resizeAspectRatio,
+      shiftKey
+    ) : computeResize(
+      el,
+      this.mode.handle,
+      world,
+      this.lastWorld,
+      this.resizeAspectRatio,
+      shiftKey
     );
-    const newAnchorLocal = this.anchorOffset(handle, w, h);
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    const rotatedAnchor = {
-      x: newAnchorLocal.x * cos - newAnchorLocal.y * sin,
-      y: newAnchorLocal.x * sin + newAnchorLocal.y * cos
-    };
-    const newCenter = { x: anchorWorld.x - rotatedAnchor.x, y: anchorWorld.y - rotatedAnchor.y };
-    const position = { x: newCenter.x - w / 2, y: newCenter.y - h / 2 };
-    ctx.store.update(this.mode.elementId, { position, size: { w, h } });
+    this.lastWorld = world;
+    ctx.store.update(this.mode.elementId, patch);
     this.updateArrowsBoundTo([this.mode.elementId], ctx);
     ctx.requestRender();
   }
-  hitTestResizeHandle(world, ctx) {
-    if (this._selectedIds.length === 0) return null;
-    const zoom = ctx.camera.zoom;
-    const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
-    for (const id of this._selectedIds) {
-      const el = ctx.store.getById(id);
-      if (!el || !("size" in el)) continue;
-      if (el.locked) continue;
-      if (el.type === "shape" && el.shape === "line") continue;
-      const layout = this.getOverlayLayout(el, zoom);
-      if (!layout) continue;
-      for (const [handle, pos] of layout.corners) {
-        if (Math.abs(world.x - pos.x) <= handleHalf && Math.abs(world.y - pos.y) <= handleHalf) {
-          return { elementId: id, handle };
-        }
-      }
-    }
-    return null;
-  }
-  hitTestRotateHandle(world, ctx) {
-    if (this._selectedIds.length !== 1) return null;
-    const id = this._selectedIds[0];
-    if (!id) return null;
-    const el = ctx.store.getById(id);
-    if (!el || el.locked || !ROTATABLE_TYPES.has(el.type)) return null;
-    const layout = this.getOverlayLayout(el, ctx.camera.zoom);
-    if (!layout) return null;
-    const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
-    const dx = world.x - layout.rotateHandle.x;
-    const dy = world.y - layout.rotateHandle.y;
-    return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
-  }
-  hitTestLineHandles(world, ctx) {
-    if (this._selectedIds.length === 0) return null;
-    const zoom = ctx.camera.zoom;
-    const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
-    const r2 = r * r;
-    for (const id of this._selectedIds) {
-      const el = ctx.store.getById(id);
-      if (!el || el.type !== "shape" || el.shape !== "line") continue;
-      const [a, b] = lineEndpoints(el);
-      if ((world.x - a.x) ** 2 + (world.y - a.y) ** 2 <= r2) return { elementId: id, fixed: b };
-      if ((world.x - b.x) ** 2 + (world.y - b.y) ** 2 <= r2) return { elementId: id, fixed: a };
-    }
-    return null;
-  }
-  getHandlePositions(bounds) {
-    return [
-      ["nw", { x: bounds.x, y: bounds.y }],
-      ["ne", { x: bounds.x + bounds.w, y: bounds.y }],
-      ["sw", { x: bounds.x, y: bounds.y + bounds.h }],
-      ["se", { x: bounds.x + bounds.w, y: bounds.y + bounds.h }]
-    ];
-  }
   getOverlayLayout(el, zoom) {
-    const bounds = getElementBounds(el);
-    if (!bounds) return null;
-    const angle = el.rotation ?? 0;
-    const pad = SELECTION_PAD / zoom;
-    const center2 = { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 };
-    const raw = [
-      ["nw", { x: bounds.x - pad, y: bounds.y - pad }],
-      ["ne", { x: bounds.x + bounds.w + pad, y: bounds.y - pad }],
-      ["sw", { x: bounds.x - pad, y: bounds.y + bounds.h + pad }],
-      ["se", { x: bounds.x + bounds.w + pad, y: bounds.y + bounds.h + pad }]
-    ];
-    const corners = raw.map(
-      ([h, p]) => [h, rotatePoint(p, center2, angle)]
-    );
-    const topMid = { x: center2.x, y: bounds.y - pad - ROTATE_HANDLE_OFFSET / zoom };
-    const rotateHandle = rotatePoint(topMid, center2, angle);
-    return { center: center2, corners, rotateHandle, angle };
-  }
-  topMidpoint(layout) {
-    const nw = layout.corners.find(([h]) => h === "nw")?.[1] ?? { x: 0, y: 0 };
-    const ne = layout.corners.find(([h]) => h === "ne")?.[1] ?? { x: 0, y: 0 };
-    return { x: (nw.x + ne.x) / 2, y: (nw.y + ne.y) / 2 };
-  }
-  renderMarquee(canvasCtx) {
-    if (this.mode.type !== "marquee") return;
-    const rect = this.getMarqueeRect();
-    if (!rect) return;
-    canvasCtx.save();
-    canvasCtx.strokeStyle = "#2196F3";
-    canvasCtx.fillStyle = "rgba(33, 150, 243, 0.08)";
-    canvasCtx.lineWidth = 1;
-    canvasCtx.setLineDash([4, 4]);
-    canvasCtx.strokeRect(rect.x, rect.y, rect.w, rect.h);
-    canvasCtx.fillRect(rect.x, rect.y, rect.w, rect.h);
-    canvasCtx.restore();
-  }
-  renderSelectionBoxes(canvasCtx) {
-    if (this._selectedIds.length === 0 || !this.ctx) return;
-    const zoom = this.ctx.camera.zoom;
-    const handleWorldSize = HANDLE_SIZE / zoom;
-    canvasCtx.save();
-    canvasCtx.strokeStyle = "#2196F3";
-    canvasCtx.lineWidth = 1.5 / zoom;
-    canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
-    for (const id of this._selectedIds) {
-      const el = this.ctx.store.getById(id);
-      if (!el) continue;
-      if (el.type === "arrow") {
-        renderArrowHandles(canvasCtx, el, zoom);
-        this.renderBindingHighlights(canvasCtx, el, zoom);
-        continue;
-      }
-      if (el.type === "shape" && el.shape === "line") {
-        canvasCtx.setLineDash([]);
-        canvasCtx.fillStyle = "#ffffff";
-        const r = handleWorldSize / 2;
-        for (const p of lineEndpoints(el)) {
-          canvasCtx.beginPath();
-          canvasCtx.arc(p.x, p.y, r, 0, Math.PI * 2);
-          canvasCtx.fill();
-          canvasCtx.stroke();
-        }
-        canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
-        continue;
-      }
-      const bounds = getElementBounds(el);
-      if (!bounds) continue;
-      const layout = this.getOverlayLayout(el, zoom);
-      if (!layout) continue;
-      const pad = SELECTION_PAD / zoom;
-      if (layout.angle === 0) {
-        canvasCtx.strokeRect(
-          bounds.x - pad,
-          bounds.y - pad,
-          bounds.w + pad * 2,
-          bounds.h + pad * 2
-        );
-      } else {
-        const ordered = ["nw", "ne", "se", "sw"].map((h) => layout.corners.find(([c]) => c === h)?.[1]).filter((p) => !!p);
-        const [p0, ...others] = ordered;
-        if (p0) {
-          canvasCtx.beginPath();
-          canvasCtx.moveTo(p0.x, p0.y);
-          for (const p of others) canvasCtx.lineTo(p.x, p.y);
-          canvasCtx.closePath();
-          canvasCtx.stroke();
-        }
-      }
-      if (!el.locked) {
-        if ("size" in el) {
-          canvasCtx.setLineDash([]);
-          canvasCtx.fillStyle = "#ffffff";
-          const corners = layout.angle === 0 ? this.getHandlePositions(bounds) : layout.corners;
-          for (const [, pos] of corners) {
-            canvasCtx.fillRect(
-              pos.x - handleWorldSize / 2,
-              pos.y - handleWorldSize / 2,
-              handleWorldSize,
-              handleWorldSize
-            );
-            canvasCtx.strokeRect(
-              pos.x - handleWorldSize / 2,
-              pos.y - handleWorldSize / 2,
-              handleWorldSize,
-              handleWorldSize
-            );
-          }
-          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
-        } else if (el.type === "template") {
-          canvasCtx.setLineDash([]);
-          canvasCtx.fillStyle = "#ffffff";
-          const hx = bounds.x + bounds.w;
-          const hy = bounds.y + bounds.h;
-          canvasCtx.fillRect(
-            hx - handleWorldSize / 2,
-            hy - handleWorldSize / 2,
-            handleWorldSize,
-            handleWorldSize
-          );
-          canvasCtx.strokeRect(
-            hx - handleWorldSize / 2,
-            hy - handleWorldSize / 2,
-            handleWorldSize,
-            handleWorldSize
-          );
-          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
-        }
-        if (this._selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
-          const stemStart = this.topMidpoint(layout);
-          const stemEnd = layout.rotateHandle;
-          canvasCtx.beginPath();
-          canvasCtx.moveTo(stemStart.x, stemStart.y);
-          canvasCtx.lineTo(stemEnd.x, stemEnd.y);
-          canvasCtx.stroke();
-          canvasCtx.setLineDash([]);
-          canvasCtx.fillStyle = "#ffffff";
-          canvasCtx.beginPath();
-          canvasCtx.arc(stemEnd.x, stemEnd.y, handleWorldSize / 2, 0, Math.PI * 2);
-          canvasCtx.fill();
-          canvasCtx.stroke();
-          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
-        }
-      }
-      if (el.locked) {
-        const ne = layout.corners.find(([h]) => h === "ne")?.[1];
-        if (ne) this.drawLockBadge(canvasCtx, ne, zoom);
-      }
-    }
-    canvasCtx.restore();
-  }
-  drawLockBadge(ctx, at, zoom) {
-    const r = 9 / zoom;
-    ctx.save();
-    ctx.setLineDash([]);
-    ctx.beginPath();
-    ctx.arc(at.x, at.y, r, 0, Math.PI * 2);
-    ctx.fillStyle = "#ffffff";
-    ctx.fill();
-    ctx.strokeStyle = "#2196F3";
-    ctx.lineWidth = 1.5 / zoom;
-    ctx.stroke();
-    const bw = 8 / zoom;
-    const bh = 6 / zoom;
-    ctx.fillStyle = "#2196F3";
-    ctx.fillRect(at.x - bw / 2, at.y - bh / 2 + 1 / zoom, bw, bh);
-    ctx.beginPath();
-    ctx.arc(at.x, at.y - bh / 2 + 1 / zoom, 2.5 / zoom, Math.PI, 0);
-    ctx.lineWidth = 1.4 / zoom;
-    ctx.stroke();
-    ctx.restore();
-  }
-  renderBindingHighlights(canvasCtx, arrow, zoom) {
-    if (!this.ctx) return;
-    if (!arrow.fromBinding && !arrow.toBinding) return;
-    const pad = SELECTION_PAD / zoom;
-    canvasCtx.save();
-    canvasCtx.strokeStyle = "#2196F3";
-    canvasCtx.lineWidth = 2 / zoom;
-    canvasCtx.setLineDash([]);
-    const drawn = /* @__PURE__ */ new Set();
-    for (const binding of [arrow.fromBinding, arrow.toBinding]) {
-      if (!binding || drawn.has(binding.elementId)) continue;
-      drawn.add(binding.elementId);
-      const target = this.ctx.store.getById(binding.elementId);
-      if (!target) continue;
-      const bounds = getElementBounds(target);
-      if (!bounds) continue;
-      canvasCtx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
-    }
-    canvasCtx.restore();
-  }
-  hitTestTemplateResizeHandle(world, ctx) {
-    if (this._selectedIds.length === 0) return null;
-    const zoom = ctx.camera.zoom;
-    const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
-    for (const id of this._selectedIds) {
-      const el = ctx.store.getById(id);
-      if (!el || el.type !== "template") continue;
-      const bounds = getElementBounds(el);
-      if (!bounds) continue;
-      const hx = bounds.x + bounds.w;
-      const hy = bounds.y + bounds.h;
-      if (Math.abs(world.x - hx) <= handleHalf && Math.abs(world.y - hy) <= handleHalf) {
-        return id;
-      }
-    }
-    return null;
+    return getOverlayLayout(el, zoom);
   }
   handleTemplateResize(world, ctx) {
     if (this.mode.type !== "resizing-template") return;
     const el = ctx.store.getById(this.mode.elementId);
     if (!el || el.type !== "template" || el.locked) return;
-    const dx = world.x - el.position.x;
-    const dy = world.y - el.position.y;
-    let newRadius = Math.sqrt(dx * dx + dy * dy);
-    if (ctx.snapToGrid && ctx.gridSize && ctx.gridSize > 0) {
-      const snapUnit = ctx.gridType === "hex" ? Math.sqrt(3) * ctx.gridSize : ctx.gridSize;
-      newRadius = Math.max(snapUnit, Math.round(newRadius / snapUnit) * snapUnit);
-    }
-    newRadius = Math.max(MIN_ELEMENT_SIZE, newRadius);
-    const updates = { radius: newRadius };
-    if (el.feetPerCell != null && ctx.gridSize && ctx.gridSize > 0) {
-      const snapUnit = ctx.gridType === "hex" ? Math.sqrt(3) * ctx.gridSize : ctx.gridSize;
-      updates.radiusFeet = newRadius / snapUnit * el.feetPerCell;
-    }
-    ctx.store.update(this.mode.elementId, updates);
-    ctx.requestRender();
+    const patch = computeTemplateResize(el, world, {
+      snapToGrid: ctx.snapToGrid,
+      gridSize: ctx.gridSize,
+      gridType: ctx.gridType
+    });
+    if (patch) {
+      ctx.store.update(this.mode.elementId, patch);
+      ctx.requestRender();
+    }
   }
   getMarqueeRect() {
     if (this.mode.type !== "marquee") return null;
@@ -7936,65 +8050,6 @@ var SelectTool = class {
     if (w === 0 && h === 0) return null;
     return { x, y, w, h };
   }
-  findElementsInRect(marquee, ctx) {
-    const candidates = ctx.store.queryRect(marquee);
-    const ids = [];
-    for (const el of candidates) {
-      if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
-      if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-      if (el.type === "grid") continue;
-      const bounds = getElementBounds(el);
-      if (bounds && this.rectsOverlap(marquee, rotatedAABB(bounds, el.rotation ?? 0))) {
-        ids.push(el.id);
-      }
-    }
-    return ids;
-  }
-  rectsOverlap(a, b) {
-    return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
-  }
-  hitTest(world, ctx) {
-    const r = 10;
-    const candidates = ctx.store.queryRect({ x: world.x - r, y: world.y - r, w: r * 2, h: r * 2 }).reverse();
-    for (const el of candidates) {
-      if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
-      if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-      if (el.type === "grid") continue;
-      if (this.isInsideBounds(world, el)) return el;
-    }
-    return null;
-  }
-  isInsideBounds(point, el) {
-    if (el.type === "grid") return false;
-    const angle = el.rotation ?? 0;
-    if (angle !== 0) {
-      const b = getElementBounds(el);
-      if (b) {
-        point = rotatePoint(point, { x: b.x + b.w / 2, y: b.y + b.h / 2 }, -angle);
-      }
-    }
-    if (el.type === "shape" && el.shape === "line") {
-      const [a, b] = lineEndpoints(el);
-      const threshold = Math.max(el.strokeWidth / 2, 6);
-      return distSqToSegment(point, a, b) <= threshold * threshold;
-    }
-    if ("size" in el) {
-      const s = el.size;
-      return point.x >= el.position.x && point.x <= el.position.x + s.w && point.y >= el.position.y && point.y <= el.position.y + s.h;
-    }
-    if (el.type === "stroke") {
-      return hitTestStroke(el, point, 10);
-    }
-    if (el.type === "arrow") {
-      return isNearBezier(point, el.from, el.to, el.bend, 10);
-    }
-    if (el.type === "template") {
-      const bounds = getElementBounds(el);
-      if (!bounds) return false;
-      return point.x >= bounds.x && point.x <= bounds.x + bounds.w && point.y >= bounds.y && point.y <= bounds.y + bounds.h;
-    }
-    return false;
-  }
 };
 
 // src/tools/arrow-tool.ts
@@ -8840,7 +8895,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.37.0";
+var VERSION = "0.38.0";
 export {
   ArrowTool,
   AutoSave,