@fieldnotes/core 0.38.3 → 0.38.5

package/dist/index.js

@@ -1227,17 +1227,174 @@ var ShortcutMap = class {
   }
 };
 
-// src/canvas/input-handler.ts
-var ZOOM_SENSITIVITY = 1e-3;
+// src/canvas/keyboard-handler.ts
 var ZOOM_STEP = 1.2;
-var MIDDLE_BUTTON = 1;
-var LONG_PRESS_MS = 500;
 var NUDGE_DELTAS = {
   "nudge-left": [-1, 0],
   "nudge-right": [1, 0],
   "nudge-up": [0, -1],
   "nudge-down": [0, 1]
 };
+var KeyboardHandler = class {
+  constructor(deps) {
+    this.deps = deps;
+    this.shortcutMap = new ShortcutMap(deps.shortcuts?.bindings);
+    window.addEventListener("keydown", this.onKeyDown, { signal: deps.abortSignal });
+    window.addEventListener("keyup", this.onKeyUp, { signal: deps.abortSignal });
+  }
+  shortcutMap;
+  get shortcuts() {
+    return this.shortcutMap;
+  }
+  viewportCenter() {
+    const rect = this.deps.element.getBoundingClientRect();
+    return { x: rect.width / 2, y: rect.height / 2 };
+  }
+  zoomByFactor(factor) {
+    this.deps.camera.zoomAt(this.deps.camera.zoom * factor, this.viewportCenter());
+  }
+  zoomToLevel(level) {
+    this.deps.camera.zoomAt(level, this.viewportCenter());
+  }
+  onKeyDown = (e) => {
+    const target = e.target;
+    if (target?.isContentEditable) return;
+    const tag = target?.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+    if (!this.isInScope()) return;
+    if (e.key === " ") {
+      this.deps.setSpaceHeld(true);
+    }
+    const action = this.shortcutMap.match(e);
+    if (action !== null) {
+      this.runAction(action, e);
+    }
+  };
+  onKeyUp = (e) => {
+    if (e.key === " ") {
+      this.deps.setSpaceHeld(false);
+      if (this.deps.getActivePointerCount() === 0) {
+        const lastPointerEvent = this.deps.getLastPointerEvent();
+        if (lastPointerEvent) {
+          this.deps.dispatchToolHover(lastPointerEvent);
+        } else {
+          this.deps.getToolContext()?.setCursor?.("default");
+        }
+      }
+    }
+  };
+  runAction(action, e) {
+    switch (action) {
+      case "delete":
+        e?.preventDefault();
+        this.deps.actions.deleteSelected();
+        return;
+      case "deselect":
+        this.deps.actions.deselect();
+        return;
+      case "undo":
+        e?.preventDefault();
+        this.deps.actions.undo();
+        return;
+      case "redo":
+        e?.preventDefault();
+        this.deps.actions.redo();
+        return;
+      case "select-all":
+        e?.preventDefault();
+        this.deps.actions.selectAll();
+        return;
+      case "copy":
+        e?.preventDefault();
+        this.deps.actions.copy();
+        return;
+      case "paste":
+        e?.preventDefault();
+        this.deps.actions.paste();
+        return;
+      case "duplicate":
+        e?.preventDefault();
+        this.deps.actions.duplicate();
+        return;
+      case "z-forward":
+        e?.preventDefault();
+        this.deps.actions.zOrder("forward");
+        return;
+      case "z-backward":
+        e?.preventDefault();
+        this.deps.actions.zOrder("backward");
+        return;
+      case "z-front":
+        e?.preventDefault();
+        this.deps.actions.zOrder("front");
+        return;
+      case "z-back":
+        e?.preventDefault();
+        this.deps.actions.zOrder("back");
+        return;
+      case "zoom-fit":
+        e?.preventDefault();
+        this.deps.actions.zoomToFit();
+        return;
+      case "group":
+        e?.preventDefault();
+        this.deps.actions.group();
+        return;
+      case "ungroup":
+        e?.preventDefault();
+        this.deps.actions.ungroup();
+        return;
+      case "cut":
+        e?.preventDefault();
+        this.deps.actions.cut();
+        return;
+      case "toggle-lock":
+        e?.preventDefault();
+        this.deps.actions.toggleLock();
+        return;
+      case "zoom-in":
+        e?.preventDefault();
+        this.zoomByFactor(ZOOM_STEP);
+        return;
+      case "zoom-out":
+        e?.preventDefault();
+        this.zoomByFactor(1 / ZOOM_STEP);
+        return;
+      case "zoom-reset":
+        e?.preventDefault();
+        this.zoomToLevel(1);
+        return;
+      case "nudge-left":
+      case "nudge-right":
+      case "nudge-up":
+      case "nudge-down": {
+        const delta = NUDGE_DELTAS[action];
+        if (delta && this.deps.actions.nudge(delta[0], delta[1], e?.shiftKey ?? false)) {
+          e?.preventDefault();
+        }
+        return;
+      }
+      default:
+        if (action.startsWith("tool:")) {
+          if (this.deps.getIsToolActive()) return;
+          e?.preventDefault();
+          this.deps.getToolContext()?.switchTool?.(action.slice("tool:".length));
+          return;
+        }
+        console.warn(`[fieldnotes] unknown shortcut action "${action}"`);
+    }
+  }
+  isInScope() {
+    if (this.deps.scope === "window") return true;
+    const active = document.activeElement;
+    return active === this.deps.element || this.deps.element.contains(active);
+  }
+};
+
+// src/canvas/input-handler.ts
+var ZOOM_SENSITIVITY = 1e-3;
+var MIDDLE_BUTTON = 1;
+var LONG_PRESS_MS = 500;
 var InputHandler = class {
   constructor(element, camera, options = {}) {
     this.element = element;
@@ -1259,8 +1416,23 @@ var InputHandler = class {
       getLastPointerWorld: () => this.lastPointerWorld()
     });
     this.openContextMenu = options.openContextMenu;
-    this.shortcutMap = new ShortcutMap(options.shortcuts?.bindings);
     this.scope = options.shortcuts?.scope ?? "focus";
+    this.keyboard = new KeyboardHandler({
+      element: this.element,
+      camera: this.camera,
+      actions: this.actions,
+      scope: this.scope,
+      shortcuts: options.shortcuts,
+      abortSignal: this.abortController.signal,
+      getToolContext: () => this.toolContext,
+      getIsToolActive: () => this.isToolActive,
+      getLastPointerEvent: () => this.lastPointerEvent,
+      setSpaceHeld: (v) => {
+        this.spaceHeld = v;
+      },
+      getActivePointerCount: () => this.activePointers.size,
+      dispatchToolHover: (e) => this.dispatchToolHover(e)
+    });
     this.element.style.touchAction = "none";
     if (this.scope === "focus") {
       this.element.tabIndex = 0;
@@ -1286,7 +1458,7 @@ var InputHandler = class {
   longPressStart = null;
   abortController = new AbortController();
   actions;
-  shortcutMap;
+  keyboard;
   scope;
   openContextMenu;
   setToolManager(toolManager, toolContext) {
@@ -1297,7 +1469,7 @@ var InputHandler = class {
     this.actions.flushPendingNudge();
   }
   get shortcuts() {
-    return this.shortcutMap;
+    return this.keyboard.shortcuts;
   }
   destroy() {
     this.actions.dispose();
@@ -1320,18 +1492,6 @@ var InputHandler = class {
     this.element.addEventListener("pointerleave", this.onPointerLeave, opts);
     this.element.addEventListener("pointercancel", this.onPointerUp, opts);
     this.element.addEventListener("contextmenu", this.onContextMenu, opts);
-    window.addEventListener("keydown", this.onKeyDown, opts);
-    window.addEventListener("keyup", this.onKeyUp, opts);
-  }
-  viewportCenter() {
-    const rect = this.element.getBoundingClientRect();
-    return { x: rect.width / 2, y: rect.height / 2 };
-  }
-  zoomByFactor(factor) {
-    this.camera.zoomAt(this.camera.zoom * factor, this.viewportCenter());
-  }
-  zoomToLevel(level) {
-    this.camera.zoomAt(level, this.viewportCenter());
   }
   onWheel = (e) => {
     e.preventDefault();
@@ -1427,132 +1587,8 @@ var InputHandler = class {
       this.deferredDown = null;
     }
   };
-  onKeyDown = (e) => {
-    const target = e.target;
-    if (target?.isContentEditable) return;
-    const tag = target?.tagName;
-    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
-    if (!this.isInScope()) return;
-    if (e.key === " ") {
-      this.spaceHeld = true;
-    }
-    const action = this.shortcutMap.match(e);
-    if (action !== null) {
-      this.runAction(action, e);
-    }
-  };
-  onKeyUp = (e) => {
-    if (e.key === " ") {
-      this.spaceHeld = false;
-      if (this.activePointers.size === 0) {
-        if (this.lastPointerEvent) {
-          this.dispatchToolHover(this.lastPointerEvent);
-        } else {
-          this.toolContext?.setCursor?.("default");
-        }
-      }
-    }
-  };
   runAction(action, e) {
-    switch (action) {
-      case "delete":
-        e?.preventDefault();
-        this.actions.deleteSelected();
-        return;
-      case "deselect":
-        this.actions.deselect();
-        return;
-      case "undo":
-        e?.preventDefault();
-        this.actions.undo();
-        return;
-      case "redo":
-        e?.preventDefault();
-        this.actions.redo();
-        return;
-      case "select-all":
-        e?.preventDefault();
-        this.actions.selectAll();
-        return;
-      case "copy":
-        e?.preventDefault();
-        this.actions.copy();
-        return;
-      case "paste":
-        e?.preventDefault();
-        this.actions.paste();
-        return;
-      case "duplicate":
-        e?.preventDefault();
-        this.actions.duplicate();
-        return;
-      case "z-forward":
-        e?.preventDefault();
-        this.actions.zOrder("forward");
-        return;
-      case "z-backward":
-        e?.preventDefault();
-        this.actions.zOrder("backward");
-        return;
-      case "z-front":
-        e?.preventDefault();
-        this.actions.zOrder("front");
-        return;
-      case "z-back":
-        e?.preventDefault();
-        this.actions.zOrder("back");
-        return;
-      case "zoom-fit":
-        e?.preventDefault();
-        this.actions.zoomToFit();
-        return;
-      case "group":
-        e?.preventDefault();
-        this.actions.group();
-        return;
-      case "ungroup":
-        e?.preventDefault();
-        this.actions.ungroup();
-        return;
-      case "cut":
-        e?.preventDefault();
-        this.actions.cut();
-        return;
-      case "toggle-lock":
-        e?.preventDefault();
-        this.actions.toggleLock();
-        return;
-      case "zoom-in":
-        e?.preventDefault();
-        this.zoomByFactor(ZOOM_STEP);
-        return;
-      case "zoom-out":
-        e?.preventDefault();
-        this.zoomByFactor(1 / ZOOM_STEP);
-        return;
-      case "zoom-reset":
-        e?.preventDefault();
-        this.zoomToLevel(1);
-        return;
-      case "nudge-left":
-      case "nudge-right":
-      case "nudge-up":
-      case "nudge-down": {
-        const delta = NUDGE_DELTAS[action];
-        if (delta && this.actions.nudge(delta[0], delta[1], e?.shiftKey ?? false)) {
-          e?.preventDefault();
-        }
-        return;
-      }
-      default:
-        if (action.startsWith("tool:")) {
-          if (this.isToolActive) return;
-          e?.preventDefault();
-          this.toolContext?.switchTool?.(action.slice("tool:".length));
-          return;
-        }
-        console.warn(`[fieldnotes] unknown shortcut action "${action}"`);
-    }
+    this.keyboard.runAction(action, e);
   }
   hasClipboard() {
     return this.actions.hasClipboard();
@@ -2176,7 +2212,12 @@ var ElementStore = class {
     if (!existing) return;
     this.sortedCache = null;
     this._versions.set(id, (this._versions.get(id) ?? 0) + 1);
-    const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    const updated = {
+      ...existing,
+      ...partial,
+      id: existing.id,
+      type: existing.type
+    };
     if (updated.type === "stroke" && existing.type === "stroke") {
       transferStrokeRenderData(existing, updated);
       transferStrokeBounds(existing, updated);
@@ -2315,20 +2356,52 @@ var ElementStore = class {
   }
 };
 
-// src/elements/arrow-render-cache.ts
-var cache2 = /* @__PURE__ */ new WeakMap();
-function getArrowRenderGeometry(arrow) {
-  const hit = cache2.get(arrow);
-  if (hit) return hit;
-  const geometry = {
-    controlPoint: arrow.bend !== 0 ? arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend) : null,
-    tangentStart: getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0),
-    tangentEnd: getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1)
-  };
-  cache2.set(arrow, geometry);
-  return geometry;
-}
-
+// src/elements/rotate-canvas.ts
+function withRotation(ctx, el, center2, draw) {
+  const angle = el.rotation ?? 0;
+  if (angle === 0) {
+    draw();
+    return;
+  }
+  ctx.save();
+  ctx.translate(center2.x, center2.y);
+  ctx.rotate(angle);
+  ctx.translate(-center2.x, -center2.y);
+  draw();
+  ctx.restore();
+}
+
+// src/elements/renderers/stroke-renderer.ts
+function renderStroke(ctx, stroke) {
+  if (stroke.points.length < 2) return;
+  ctx.save();
+  if (stroke.blendMode) ctx.globalCompositeOperation = stroke.blendMode;
+  ctx.translate(stroke.position.x, stroke.position.y);
+  ctx.strokeStyle = stroke.color;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.globalAlpha = stroke.opacity;
+  const data = getStrokeRenderData(stroke);
+  if (data.buckets) {
+    for (const bucket of data.buckets) {
+      ctx.lineWidth = bucket.width;
+      ctx.stroke(bucket.path);
+    }
+  } else {
+    for (let i = 0; i < data.segments.length; i++) {
+      const seg = data.segments[i];
+      const w = data.widths[i];
+      if (!seg || w === void 0) continue;
+      ctx.lineWidth = w;
+      ctx.beginPath();
+      ctx.moveTo(seg.start.x, seg.start.y);
+      ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+}
+
 // src/elements/shape-geometry.ts
 function lineFromEndpoints(a, b) {
   return {
@@ -2349,6 +2422,74 @@ function lineEndpoints(shape) {
   ];
 }
 
+// src/elements/renderers/shape-renderer.ts
+function renderShape(ctx, shape) {
+  ctx.save();
+  if (shape.fillColor !== "none" && shape.shape !== "line") {
+    ctx.fillStyle = shape.fillColor;
+    fillShapePath(ctx, shape);
+  }
+  if (shape.strokeWidth > 0) {
+    ctx.strokeStyle = shape.strokeColor;
+    ctx.lineWidth = shape.strokeWidth;
+    strokeShapePath(ctx, shape);
+  }
+  ctx.restore();
+}
+function fillShapePath(ctx, shape) {
+  switch (shape.shape) {
+    case "rectangle":
+      ctx.fillRect(shape.position.x, shape.position.y, shape.size.w, shape.size.h);
+      break;
+    case "ellipse": {
+      const cx = shape.position.x + shape.size.w / 2;
+      const cy = shape.position.y + shape.size.h / 2;
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, shape.size.w / 2, shape.size.h / 2, 0, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    }
+  }
+}
+function strokeShapePath(ctx, shape) {
+  switch (shape.shape) {
+    case "rectangle":
+      ctx.strokeRect(shape.position.x, shape.position.y, shape.size.w, shape.size.h);
+      break;
+    case "ellipse": {
+      const cx = shape.position.x + shape.size.w / 2;
+      const cy = shape.position.y + shape.size.h / 2;
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, shape.size.w / 2, shape.size.h / 2, 0, 0, Math.PI * 2);
+      ctx.stroke();
+      break;
+    }
+    case "line": {
+      const [a, b] = lineEndpoints(shape);
+      ctx.lineCap = "round";
+      ctx.beginPath();
+      ctx.moveTo(a.x, a.y);
+      ctx.lineTo(b.x, b.y);
+      ctx.stroke();
+      break;
+    }
+  }
+}
+
+// src/elements/arrow-render-cache.ts
+var cache2 = /* @__PURE__ */ new WeakMap();
+function getArrowRenderGeometry(arrow) {
+  const hit = cache2.get(arrow);
+  if (hit) return hit;
+  const geometry = {
+    controlPoint: arrow.bend !== 0 ? arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend) : null,
+    tangentStart: getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0),
+    tangentEnd: getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1)
+  };
+  cache2.set(arrow, geometry);
+  return geometry;
+}
+
 // src/elements/arrow-binding.ts
 var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape"]);
 function isBindable(element) {
@@ -2421,38 +2562,515 @@ function updateArrowsBoundToElements(movedIds, store) {
     }
   }
 }
-function updateBoundArrow(arrow, store) {
-  if (!arrow.fromBinding && !arrow.toBinding) return null;
-  const updates = {};
-  if (arrow.fromBinding) {
-    const el = store.getById(arrow.fromBinding.elementId);
-    if (el) {
-      const center2 = getElementCenter(el);
-      updates.from = center2;
-      updates.position = center2;
-    }
+function updateBoundArrow(arrow, store) {
+  if (!arrow.fromBinding && !arrow.toBinding) return null;
+  const updates = {};
+  if (arrow.fromBinding) {
+    const el = store.getById(arrow.fromBinding.elementId);
+    if (el) {
+      const center2 = getElementCenter(el);
+      updates.from = center2;
+      updates.position = center2;
+    }
+  }
+  if (arrow.toBinding) {
+    const el = store.getById(arrow.toBinding.elementId);
+    if (el) {
+      updates.to = getElementCenter(el);
+    }
+  }
+  return Object.keys(updates).length > 0 ? updates : null;
+}
+
+// src/elements/renderers/arrow-renderer.ts
+var ARROWHEAD_LENGTH = 12;
+var ARROWHEAD_ANGLE = Math.PI / 6;
+var ARROW_LABEL_FONT_SIZE = 14;
+function renderArrow(ctx, arrow, store, labelEditingId) {
+  const geometry = getArrowRenderGeometry(arrow);
+  const { visualFrom, visualTo } = getVisualEndpoints(arrow, geometry, store);
+  ctx.save();
+  ctx.strokeStyle = arrow.color;
+  ctx.lineWidth = arrow.width;
+  ctx.lineCap = "round";
+  if (arrow.fromBinding || arrow.toBinding) {
+    ctx.setLineDash([8, 4]);
+  }
+  ctx.beginPath();
+  ctx.moveTo(visualFrom.x, visualFrom.y);
+  if (arrow.bend !== 0) {
+    const cp = geometry.controlPoint;
+    if (cp) {
+      ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
+    }
+  } else {
+    ctx.lineTo(visualTo.x, visualTo.y);
+  }
+  ctx.stroke();
+  renderArrowhead(ctx, arrow, visualTo, geometry.tangentEnd);
+  ctx.restore();
+  renderArrowLabel(ctx, arrow, labelEditingId);
+}
+function renderArrowLabel(ctx, arrow, labelEditingId) {
+  if (!arrow.label || arrow.label.length === 0) return;
+  if (arrow.id === labelEditingId) return;
+  const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+  ctx.save();
+  ctx.font = `${ARROW_LABEL_FONT_SIZE}px system-ui, sans-serif`;
+  const metrics = ctx.measureText(arrow.label);
+  const padX = 6;
+  const padY = 4;
+  const w = metrics.width + padX * 2;
+  const h = ARROW_LABEL_FONT_SIZE + padY * 2;
+  ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+  ctx.beginPath();
+  ctx.roundRect(mid.x - w / 2, mid.y - h / 2, w, h, 4);
+  ctx.fill();
+  ctx.fillStyle = "#1a1a1a";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(arrow.label, mid.x, mid.y);
+  ctx.restore();
+}
+function renderArrowhead(ctx, arrow, tip, angle) {
+  ctx.beginPath();
+  ctx.moveTo(tip.x, tip.y);
+  ctx.lineTo(
+    tip.x - ARROWHEAD_LENGTH * Math.cos(angle - ARROWHEAD_ANGLE),
+    tip.y - ARROWHEAD_LENGTH * Math.sin(angle - ARROWHEAD_ANGLE)
+  );
+  ctx.lineTo(
+    tip.x - ARROWHEAD_LENGTH * Math.cos(angle + ARROWHEAD_ANGLE),
+    tip.y - ARROWHEAD_LENGTH * Math.sin(angle + ARROWHEAD_ANGLE)
+  );
+  ctx.closePath();
+  ctx.fillStyle = arrow.color;
+  ctx.fill();
+}
+function getVisualEndpoints(arrow, geometry, store) {
+  let visualFrom = arrow.from;
+  let visualTo = arrow.to;
+  if (!store) return { visualFrom, visualTo };
+  if (arrow.fromBinding) {
+    const el = store.getById(arrow.fromBinding.elementId);
+    if (el) {
+      const bounds = getElementBounds(el);
+      if (bounds) {
+        const tangentAngle = geometry.tangentStart;
+        const rayTarget = {
+          x: arrow.from.x + Math.cos(tangentAngle) * 1e3,
+          y: arrow.from.y + Math.sin(tangentAngle) * 1e3
+        };
+        visualFrom = getEdgeIntersection(bounds, rayTarget);
+      }
+    }
+  }
+  if (arrow.toBinding) {
+    const el = store.getById(arrow.toBinding.elementId);
+    if (el) {
+      const bounds = getElementBounds(el);
+      if (bounds) {
+        const tangentAngle = geometry.tangentEnd;
+        const rayTarget = {
+          x: arrow.to.x - Math.cos(tangentAngle) * 1e3,
+          y: arrow.to.y - Math.sin(tangentAngle) * 1e3
+        };
+        visualTo = getEdgeIntersection(bounds, rayTarget);
+      }
+    }
+  }
+  return { visualFrom, visualTo };
+}
+
+// src/elements/renderers/image-renderer.ts
+function renderImage(ctx, image, imageCache, onImageLoad, onImageError) {
+  if (imageCache.get(image.src) === "failed") {
+    renderImagePlaceholder(ctx, image);
+    return;
+  }
+  const img = getImage(image.src, imageCache, onImageLoad, onImageError);
+  if (!img) return;
+  ctx.drawImage(
+    img,
+    image.position.x,
+    image.position.y,
+    image.size.w,
+    image.size.h
+  );
+}
+function renderImagePlaceholder(ctx, image) {
+  const { x, y } = image.position;
+  const { w, h } = image.size;
+  ctx.save();
+  ctx.fillStyle = "#eeeeee";
+  ctx.fillRect(x, y, w, h);
+  ctx.strokeStyle = "#bdbdbd";
+  ctx.lineWidth = 1;
+  ctx.strokeRect(x, y, w, h);
+  const glyph = Math.min(24, w / 2, h / 2);
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  ctx.strokeStyle = "#9e9e9e";
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.arc(cx, cy, glyph / 2, 0, Math.PI * 2);
+  ctx.moveTo(cx - glyph / 2, cy + glyph / 2);
+  ctx.lineTo(cx + glyph / 2, cy - glyph / 2);
+  ctx.stroke();
+  ctx.restore();
+}
+function getImage(src, imageCache, onImageLoad, onImageError) {
+  const cached = imageCache.get(src);
+  if (cached) {
+    if (cached === "failed") return null;
+    if (cached instanceof HTMLImageElement) return cached.complete ? cached : null;
+    return cached;
+  }
+  const img = new Image();
+  img.src = src;
+  imageCache.set(src, img);
+  img.onload = () => {
+    onImageLoad?.();
+    if (typeof createImageBitmap !== "undefined") {
+      createImageBitmap(img).then((bitmap) => {
+        imageCache.set(src, bitmap);
+        onImageLoad?.();
+      }).catch(() => {
+      });
+    }
+  };
+  img.onerror = (event) => {
+    imageCache.set(src, "failed");
+    onImageError?.(src, event);
+    onImageLoad?.();
+  };
+  return null;
+}
+
+// src/elements/hex-fill.ts
+function offsetToCube(col, row, orientation) {
+  if (orientation === "pointy") {
+    return { q: col - (row - (row & 1)) / 2, r: row };
+  }
+  return { q: col, r: row - (col - (col & 1)) / 2 };
+}
+function cubeToOffset(q, r, orientation) {
+  if (orientation === "pointy") {
+    return { col: q + (r - (r & 1)) / 2, row: r };
+  }
+  return { col: q, row: r + (q - (q & 1)) / 2 };
+}
+function offsetToPixel(col, row, cellSize, orientation) {
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * cellSize;
+    const rowH = 1.5 * cellSize;
+    const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
+    return { x: col * hexW + offsetX, y: row * rowH };
+  }
+  const hexH = Math.sqrt(3) * cellSize;
+  const colW = 1.5 * cellSize;
+  const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
+  return { x: col * colW, y: row * hexH + offsetY };
+}
+function pixelToOffset(x, y, cellSize, orientation) {
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * cellSize;
+    const rowH = 1.5 * cellSize;
+    const row = Math.round(y / rowH);
+    const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
+    return { col: Math.round((x - offsetX) / hexW), row };
+  }
+  const hexH = Math.sqrt(3) * cellSize;
+  const colW = 1.5 * cellSize;
+  const col = Math.round(x / colW);
+  const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
+  return { col, row: Math.round((y - offsetY) / hexH) };
+}
+function enumerateHexRing(centerQ, centerR, n, orientation, cellSize) {
+  const cells = [];
+  for (let dq = -n; dq <= n; dq++) {
+    const rMin = Math.max(-n, -dq - n);
+    const rMax = Math.min(n, -dq + n);
+    for (let dr = rMin; dr <= rMax; dr++) {
+      const absQ = centerQ + dq;
+      const absR = centerR + dr;
+      const off = cubeToOffset(absQ, absR, orientation);
+      cells.push(offsetToPixel(off.col, off.row, cellSize, orientation));
+    }
+  }
+  return cells;
+}
+function getHexDistance(a, b, cellSize, orientation) {
+  const offA = pixelToOffset(a.x, a.y, cellSize, orientation);
+  const offB = pixelToOffset(b.x, b.y, cellSize, orientation);
+  const cubeA = offsetToCube(offA.col, offA.row, orientation);
+  const cubeB = offsetToCube(offB.col, offB.row, orientation);
+  const dq = cubeA.q - cubeB.q;
+  const dr = cubeA.r - cubeB.r;
+  const ds = -dq - dr;
+  return Math.max(Math.abs(dq), Math.abs(dr), Math.abs(ds));
+}
+function getHexCellsInRadius(center2, radiusCells, cellSize, orientation) {
+  const n = Math.round(radiusCells);
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
+  const cube = offsetToCube(off.col, off.row, orientation);
+  if (n <= 0) {
+    return [offsetToPixel(off.col, off.row, cellSize, orientation)];
+  }
+  return enumerateHexRing(cube.q, cube.r, n, orientation, cellSize);
+}
+function getHexCellsInCone(center2, angle, radiusCells, cellSize, orientation) {
+  const n = Math.round(radiusCells);
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
+  const cube = offsetToCube(off.col, off.row, orientation);
+  const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
+  if (n <= 0) return [centerPixel];
+  const vertexOffset = orientation === "pointy" ? Math.PI / 6 : 0;
+  const step = Math.PI / 3;
+  const snappedAngle = Math.round((angle - vertexOffset) / step) * step + vertexOffset;
+  const halfAngle = Math.PI / 6 + 1e-6;
+  const cells = [centerPixel];
+  for (let dq = -n; dq <= n; dq++) {
+    const rMin = Math.max(-n, -dq - n);
+    const rMax = Math.min(n, -dq + n);
+    for (let dr = rMin; dr <= rMax; dr++) {
+      if (dq === 0 && dr === 0) continue;
+      const absQ = cube.q + dq;
+      const absR = cube.r + dr;
+      const pixel = offsetToPixel(
+        cubeToOffset(absQ, absR, orientation).col,
+        cubeToOffset(absQ, absR, orientation).row,
+        cellSize,
+        orientation
+      );
+      const dx = pixel.x - centerPixel.x;
+      const dy = pixel.y - centerPixel.y;
+      let diff = Math.atan2(dy, dx) - snappedAngle;
+      if (diff > Math.PI) diff -= 2 * Math.PI;
+      if (diff < -Math.PI) diff += 2 * Math.PI;
+      if (Math.abs(diff) <= halfAngle) {
+        cells.push(pixel);
+      }
+    }
+  }
+  return cells;
+}
+function getHexCellsInLine(center2, angle, radiusCells, cellSize, orientation) {
+  const n = Math.round(radiusCells);
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
+  const cube = offsetToCube(off.col, off.row, orientation);
+  const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
+  if (n <= 0) return [centerPixel];
+  const vertexOffset = orientation === "pointy" ? Math.PI / 6 : 0;
+  const step = Math.PI / 3;
+  const snappedAngle = Math.round((angle - vertexOffset) / step) * step + vertexOffset;
+  const cos = Math.cos(snappedAngle);
+  const sin = Math.sin(snappedAngle);
+  const snapUnit = Math.sqrt(3) * cellSize;
+  const lineLength = n * snapUnit;
+  const halfWidth = snapUnit * 0.5 + 1e-6;
+  const cells = [];
+  for (let dq = -n; dq <= n; dq++) {
+    const rMin = Math.max(-n, -dq - n);
+    const rMax = Math.min(n, -dq + n);
+    for (let dr = rMin; dr <= rMax; dr++) {
+      const absQ = cube.q + dq;
+      const absR = cube.r + dr;
+      const pixel = offsetToPixel(
+        cubeToOffset(absQ, absR, orientation).col,
+        cubeToOffset(absQ, absR, orientation).row,
+        cellSize,
+        orientation
+      );
+      const dx = pixel.x - centerPixel.x;
+      const dy = pixel.y - centerPixel.y;
+      const along = dx * cos + dy * sin;
+      const perp = Math.abs(-dx * sin + dy * cos);
+      if (along >= -snapUnit * 0.1 && along <= lineLength + snapUnit * 0.1 && perp <= halfWidth) {
+        cells.push(pixel);
+      }
+    }
+  }
+  return cells;
+}
+function getHexCellsInSquare(center2, radiusCells, cellSize, orientation) {
+  const n = Math.round(radiusCells);
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
+  const cube = offsetToCube(off.col, off.row, orientation);
+  const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
+  if (n <= 0) return [centerPixel];
+  const snapUnit = Math.sqrt(3) * cellSize;
+  const halfSide = n * snapUnit / 2;
+  const cells = [];
+  for (let dq = -n; dq <= n; dq++) {
+    const rMin = Math.max(-n, -dq - n);
+    const rMax = Math.min(n, -dq + n);
+    for (let dr = rMin; dr <= rMax; dr++) {
+      const absQ = cube.q + dq;
+      const absR = cube.r + dr;
+      const pixel = offsetToPixel(
+        cubeToOffset(absQ, absR, orientation).col,
+        cubeToOffset(absQ, absR, orientation).row,
+        cellSize,
+        orientation
+      );
+      if (Math.abs(pixel.x - centerPixel.x) <= halfSide && Math.abs(pixel.y - centerPixel.y) <= halfSide) {
+        cells.push(pixel);
+      }
+    }
+  }
+  return cells;
+}
+function drawHexPath(ctx, cx, cy, cellSize, orientation) {
+  const angleOffset = orientation === "pointy" ? Math.PI / 6 : 0;
+  ctx.moveTo(cx + cellSize * Math.cos(angleOffset), cy + cellSize * Math.sin(angleOffset));
+  for (let i = 1; i < 6; i++) {
+    const a = angleOffset + Math.PI / 3 * i;
+    ctx.lineTo(cx + cellSize * Math.cos(a), cy + cellSize * Math.sin(a));
+  }
+  ctx.closePath();
+}
+
+// src/elements/renderers/template-renderer.ts
+function renderTemplate(ctx, template, store) {
+  const grid = store?.getElementsByType("grid")[0];
+  if (grid && grid.gridType === "hex") {
+    renderHexTemplate(ctx, template, grid.cellSize, grid.hexOrientation);
+    return;
+  }
+  renderGeometricTemplate(ctx, template);
+}
+function renderGeometricTemplate(ctx, template) {
+  const { x: cx, y: cy } = template.position;
+  const r = template.radius;
+  ctx.save();
+  ctx.globalAlpha = template.opacity;
+  ctx.fillStyle = template.fillColor;
+  ctx.strokeStyle = template.strokeColor;
+  ctx.lineWidth = template.strokeWidth;
+  switch (template.templateShape) {
+    case "circle":
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+      if (template.radiusFeet != null && template.radiusFeet > 0) {
+        renderRadiusMarker(ctx, cx, cy, r, template.radiusFeet);
+      }
+      break;
+    case "square":
+      ctx.fillRect(cx - r / 2, cy - r / 2, r, r);
+      ctx.strokeRect(cx - r / 2, cy - r / 2, r, r);
+      break;
+    case "cone": {
+      const halfAngle = Math.atan(0.5);
+      ctx.beginPath();
+      ctx.moveTo(cx, cy);
+      ctx.arc(cx, cy, r, template.angle - halfAngle, template.angle + halfAngle);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      break;
+    }
+    case "line": {
+      const halfW = r / 12;
+      const cos = Math.cos(template.angle);
+      const sin = Math.sin(template.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      ctx.beginPath();
+      ctx.moveTo(cx + perpX, cy + perpY);
+      ctx.lineTo(cx + r * cos + perpX, cy + r * sin + perpY);
+      ctx.lineTo(cx + r * cos - perpX, cy + r * sin - perpY);
+      ctx.lineTo(cx - perpX, cy - perpY);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      break;
+    }
+  }
+  ctx.restore();
+}
+function renderHexTemplate(ctx, template, cellSize, orientation) {
+  const snapUnit = Math.sqrt(3) * cellSize;
+  const radiusCells = template.radius / snapUnit;
+  const center2 = template.position;
+  let cells;
+  switch (template.templateShape) {
+    case "circle":
+      cells = getHexCellsInRadius(center2, radiusCells, cellSize, orientation);
+      break;
+    case "cone":
+      cells = getHexCellsInCone(center2, template.angle, radiusCells, cellSize, orientation);
+      break;
+    case "line":
+      cells = getHexCellsInLine(center2, template.angle, radiusCells, cellSize, orientation);
+      break;
+    case "square":
+      cells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
+      break;
   }
-  if (arrow.toBinding) {
-    const el = store.getById(arrow.toBinding.elementId);
-    if (el) {
-      updates.to = getElementCenter(el);
-    }
+  ctx.save();
+  ctx.globalAlpha = template.opacity;
+  ctx.beginPath();
+  for (const cell of cells) {
+    drawHexPath(ctx, cell.x, cell.y, cellSize, orientation);
   }
-  return Object.keys(updates).length > 0 ? updates : null;
-}
-
-// src/elements/rotate-canvas.ts
-function withRotation(ctx, el, center2, draw) {
-  const angle = el.rotation ?? 0;
-  if (angle === 0) {
-    draw();
-    return;
+  ctx.fillStyle = template.fillColor;
+  ctx.fill();
+  ctx.beginPath();
+  for (const cell of cells) {
+    drawHexPath(ctx, cell.x, cell.y, cellSize, orientation);
+  }
+  ctx.strokeStyle = template.strokeColor;
+  ctx.lineWidth = template.strokeWidth;
+  ctx.stroke();
+  {
+    ctx.globalAlpha = Math.min(template.opacity + 0.1, 1);
+    ctx.beginPath();
+    drawHexPath(ctx, center2.x, center2.y, cellSize, orientation);
+    ctx.fillStyle = template.strokeColor;
+    ctx.fill();
+    ctx.strokeStyle = template.strokeColor;
+    ctx.lineWidth = template.strokeWidth;
+    ctx.stroke();
+  }
+  if (template.templateShape === "circle" && template.radiusFeet != null && template.radiusFeet > 0) {
+    const r = template.radius;
+    renderRadiusMarker(ctx, center2.x, center2.y, r, template.radiusFeet);
   }
+  ctx.restore();
+}
+function renderRadiusMarker(ctx, cx, cy, r, feet) {
+  const markerColor = ctx.strokeStyle;
   ctx.save();
-  ctx.translate(center2.x, center2.y);
-  ctx.rotate(angle);
-  ctx.translate(-center2.x, -center2.y);
-  draw();
+  ctx.globalAlpha = 1;
+  ctx.beginPath();
+  ctx.setLineDash([4, 4]);
+  ctx.strokeStyle = markerColor;
+  ctx.lineWidth = 1.5;
+  ctx.moveTo(cx, cy);
+  ctx.lineTo(cx + r, cy);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  const label = `${Math.round(feet)} ft`;
+  const fontSize = Math.max(10, Math.min(14, r * 0.15));
+  ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "bottom";
+  const textX = cx + r / 2;
+  const textY = cy - 4;
+  const metrics = ctx.measureText(label);
+  const padX = 4;
+  const padY = 2;
+  const textW = metrics.width + padX * 2;
+  const textH = fontSize + padY * 2;
+  ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
+  ctx.beginPath();
+  ctx.roundRect(textX - textW / 2, textY - textH, textW, textH, 3);
+  ctx.fill();
+  ctx.fillStyle = markerColor;
+  ctx.fillText(label, textX, textY - padY);
   ctx.restore();
 }
 
@@ -2606,245 +3224,58 @@ function createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opac
   tc.globalAlpha = opacity;
   tc.beginPath();
   if (orientation === "pointy") {
-    const hexW = tileW;
-    const rowH = 1.5 * cellSize;
-    for (let row = -1; row <= 3; row++) {
-      const offX = row % 2 !== 0 ? hexW / 2 : 0;
-      for (let col = -1; col <= 1; col++) {
-        const cx = col * hexW + offX;
-        const cy = row * rowH;
-        tc.moveTo(cx + ox0, cy + oy0);
-        tc.lineTo(cx + ox1, cy + oy1);
-        tc.lineTo(cx + ox2, cy + oy2);
-        tc.lineTo(cx + ox3, cy + oy3);
-        tc.lineTo(cx + ox4, cy + oy4);
-        tc.lineTo(cx + ox5, cy + oy5);
-        tc.closePath();
-      }
-    }
-  } else {
-    const hexH = tileH;
-    const colW = 1.5 * cellSize;
-    for (let col = -1; col <= 3; col++) {
-      const offY = col % 2 !== 0 ? hexH / 2 : 0;
-      for (let row = -1; row <= 1; row++) {
-        const cx = col * colW;
-        const cy = row * hexH + offY;
-        tc.moveTo(cx + ox0, cy + oy0);
-        tc.lineTo(cx + ox1, cy + oy1);
-        tc.lineTo(cx + ox2, cy + oy2);
-        tc.lineTo(cx + ox3, cy + oy3);
-        tc.lineTo(cx + ox4, cy + oy4);
-        tc.lineTo(cx + ox5, cy + oy5);
-        tc.closePath();
-      }
-    }
-  }
-  tc.stroke();
-  return { canvas, tileW, tileH };
-}
-function renderHexGridTiled(ctx, bounds, cellSize, tile) {
-  const { tileW, tileH } = tile;
-  const startCol = Math.floor(bounds.minX / tileW) - 1;
-  const endCol = Math.ceil(bounds.maxX / tileW) + 1;
-  const startRow = Math.floor(bounds.minY / tileH) - 1;
-  const endRow = Math.ceil(bounds.maxY / tileH) + 1;
-  for (let row = startRow; row <= endRow; row++) {
-    for (let col = startCol; col <= endCol; col++) {
-      ctx.drawImage(tile.canvas, col * tileW, row * tileH, tileW, tileH);
-    }
-  }
-}
-
-// src/elements/hex-fill.ts
-function offsetToCube(col, row, orientation) {
-  if (orientation === "pointy") {
-    return { q: col - (row - (row & 1)) / 2, r: row };
-  }
-  return { q: col, r: row - (col - (col & 1)) / 2 };
-}
-function cubeToOffset(q, r, orientation) {
-  if (orientation === "pointy") {
-    return { col: q + (r - (r & 1)) / 2, row: r };
-  }
-  return { col: q, row: r + (q - (q & 1)) / 2 };
-}
-function offsetToPixel(col, row, cellSize, orientation) {
-  if (orientation === "pointy") {
-    const hexW = Math.sqrt(3) * cellSize;
-    const rowH = 1.5 * cellSize;
-    const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
-    return { x: col * hexW + offsetX, y: row * rowH };
-  }
-  const hexH = Math.sqrt(3) * cellSize;
-  const colW = 1.5 * cellSize;
-  const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
-  return { x: col * colW, y: row * hexH + offsetY };
-}
-function pixelToOffset(x, y, cellSize, orientation) {
-  if (orientation === "pointy") {
-    const hexW = Math.sqrt(3) * cellSize;
-    const rowH = 1.5 * cellSize;
-    const row = Math.round(y / rowH);
-    const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
-    return { col: Math.round((x - offsetX) / hexW), row };
-  }
-  const hexH = Math.sqrt(3) * cellSize;
-  const colW = 1.5 * cellSize;
-  const col = Math.round(x / colW);
-  const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
-  return { col, row: Math.round((y - offsetY) / hexH) };
-}
-function enumerateHexRing(centerQ, centerR, n, orientation, cellSize) {
-  const cells = [];
-  for (let dq = -n; dq <= n; dq++) {
-    const rMin = Math.max(-n, -dq - n);
-    const rMax = Math.min(n, -dq + n);
-    for (let dr = rMin; dr <= rMax; dr++) {
-      const absQ = centerQ + dq;
-      const absR = centerR + dr;
-      const off = cubeToOffset(absQ, absR, orientation);
-      cells.push(offsetToPixel(off.col, off.row, cellSize, orientation));
-    }
-  }
-  return cells;
-}
-function getHexDistance(a, b, cellSize, orientation) {
-  const offA = pixelToOffset(a.x, a.y, cellSize, orientation);
-  const offB = pixelToOffset(b.x, b.y, cellSize, orientation);
-  const cubeA = offsetToCube(offA.col, offA.row, orientation);
-  const cubeB = offsetToCube(offB.col, offB.row, orientation);
-  const dq = cubeA.q - cubeB.q;
-  const dr = cubeA.r - cubeB.r;
-  const ds = -dq - dr;
-  return Math.max(Math.abs(dq), Math.abs(dr), Math.abs(ds));
-}
-function getHexCellsInRadius(center2, radiusCells, cellSize, orientation) {
-  const n = Math.round(radiusCells);
-  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
-  const cube = offsetToCube(off.col, off.row, orientation);
-  if (n <= 0) {
-    return [offsetToPixel(off.col, off.row, cellSize, orientation)];
-  }
-  return enumerateHexRing(cube.q, cube.r, n, orientation, cellSize);
-}
-function getHexCellsInCone(center2, angle, radiusCells, cellSize, orientation) {
-  const n = Math.round(radiusCells);
-  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
-  const cube = offsetToCube(off.col, off.row, orientation);
-  const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
-  if (n <= 0) return [centerPixel];
-  const vertexOffset = orientation === "pointy" ? Math.PI / 6 : 0;
-  const step = Math.PI / 3;
-  const snappedAngle = Math.round((angle - vertexOffset) / step) * step + vertexOffset;
-  const halfAngle = Math.PI / 6 + 1e-6;
-  const cells = [centerPixel];
-  for (let dq = -n; dq <= n; dq++) {
-    const rMin = Math.max(-n, -dq - n);
-    const rMax = Math.min(n, -dq + n);
-    for (let dr = rMin; dr <= rMax; dr++) {
-      if (dq === 0 && dr === 0) continue;
-      const absQ = cube.q + dq;
-      const absR = cube.r + dr;
-      const pixel = offsetToPixel(
-        cubeToOffset(absQ, absR, orientation).col,
-        cubeToOffset(absQ, absR, orientation).row,
-        cellSize,
-        orientation
-      );
-      const dx = pixel.x - centerPixel.x;
-      const dy = pixel.y - centerPixel.y;
-      let diff = Math.atan2(dy, dx) - snappedAngle;
-      if (diff > Math.PI) diff -= 2 * Math.PI;
-      if (diff < -Math.PI) diff += 2 * Math.PI;
-      if (Math.abs(diff) <= halfAngle) {
-        cells.push(pixel);
-      }
-    }
-  }
-  return cells;
-}
-function getHexCellsInLine(center2, angle, radiusCells, cellSize, orientation) {
-  const n = Math.round(radiusCells);
-  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
-  const cube = offsetToCube(off.col, off.row, orientation);
-  const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
-  if (n <= 0) return [centerPixel];
-  const vertexOffset = orientation === "pointy" ? Math.PI / 6 : 0;
-  const step = Math.PI / 3;
-  const snappedAngle = Math.round((angle - vertexOffset) / step) * step + vertexOffset;
-  const cos = Math.cos(snappedAngle);
-  const sin = Math.sin(snappedAngle);
-  const snapUnit = Math.sqrt(3) * cellSize;
-  const lineLength = n * snapUnit;
-  const halfWidth = snapUnit * 0.5 + 1e-6;
-  const cells = [];
-  for (let dq = -n; dq <= n; dq++) {
-    const rMin = Math.max(-n, -dq - n);
-    const rMax = Math.min(n, -dq + n);
-    for (let dr = rMin; dr <= rMax; dr++) {
-      const absQ = cube.q + dq;
-      const absR = cube.r + dr;
-      const pixel = offsetToPixel(
-        cubeToOffset(absQ, absR, orientation).col,
-        cubeToOffset(absQ, absR, orientation).row,
-        cellSize,
-        orientation
-      );
-      const dx = pixel.x - centerPixel.x;
-      const dy = pixel.y - centerPixel.y;
-      const along = dx * cos + dy * sin;
-      const perp = Math.abs(-dx * sin + dy * cos);
-      if (along >= -snapUnit * 0.1 && along <= lineLength + snapUnit * 0.1 && perp <= halfWidth) {
-        cells.push(pixel);
+    const hexW = tileW;
+    const rowH = 1.5 * cellSize;
+    for (let row = -1; row <= 3; row++) {
+      const offX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = -1; col <= 1; col++) {
+        const cx = col * hexW + offX;
+        const cy = row * rowH;
+        tc.moveTo(cx + ox0, cy + oy0);
+        tc.lineTo(cx + ox1, cy + oy1);
+        tc.lineTo(cx + ox2, cy + oy2);
+        tc.lineTo(cx + ox3, cy + oy3);
+        tc.lineTo(cx + ox4, cy + oy4);
+        tc.lineTo(cx + ox5, cy + oy5);
+        tc.closePath();
       }
     }
-  }
-  return cells;
-}
-function getHexCellsInSquare(center2, radiusCells, cellSize, orientation) {
-  const n = Math.round(radiusCells);
-  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
-  const cube = offsetToCube(off.col, off.row, orientation);
-  const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
-  if (n <= 0) return [centerPixel];
-  const snapUnit = Math.sqrt(3) * cellSize;
-  const halfSide = n * snapUnit / 2;
-  const cells = [];
-  for (let dq = -n; dq <= n; dq++) {
-    const rMin = Math.max(-n, -dq - n);
-    const rMax = Math.min(n, -dq + n);
-    for (let dr = rMin; dr <= rMax; dr++) {
-      const absQ = cube.q + dq;
-      const absR = cube.r + dr;
-      const pixel = offsetToPixel(
-        cubeToOffset(absQ, absR, orientation).col,
-        cubeToOffset(absQ, absR, orientation).row,
-        cellSize,
-        orientation
-      );
-      if (Math.abs(pixel.x - centerPixel.x) <= halfSide && Math.abs(pixel.y - centerPixel.y) <= halfSide) {
-        cells.push(pixel);
+  } else {
+    const hexH = tileH;
+    const colW = 1.5 * cellSize;
+    for (let col = -1; col <= 3; col++) {
+      const offY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = -1; row <= 1; row++) {
+        const cx = col * colW;
+        const cy = row * hexH + offY;
+        tc.moveTo(cx + ox0, cy + oy0);
+        tc.lineTo(cx + ox1, cy + oy1);
+        tc.lineTo(cx + ox2, cy + oy2);
+        tc.lineTo(cx + ox3, cy + oy3);
+        tc.lineTo(cx + ox4, cy + oy4);
+        tc.lineTo(cx + ox5, cy + oy5);
+        tc.closePath();
       }
     }
   }
-  return cells;
+  tc.stroke();
+  return { canvas, tileW, tileH };
 }
-function drawHexPath(ctx, cx, cy, cellSize, orientation) {
-  const angleOffset = orientation === "pointy" ? Math.PI / 6 : 0;
-  ctx.moveTo(cx + cellSize * Math.cos(angleOffset), cy + cellSize * Math.sin(angleOffset));
-  for (let i = 1; i < 6; i++) {
-    const a = angleOffset + Math.PI / 3 * i;
-    ctx.lineTo(cx + cellSize * Math.cos(a), cy + cellSize * Math.sin(a));
+function renderHexGridTiled(ctx, bounds, cellSize, tile) {
+  const { tileW, tileH } = tile;
+  const startCol = Math.floor(bounds.minX / tileW) - 1;
+  const endCol = Math.ceil(bounds.maxX / tileW) + 1;
+  const startRow = Math.floor(bounds.minY / tileH) - 1;
+  const endRow = Math.ceil(bounds.maxY / tileH) + 1;
+  for (let row = startRow; row <= endRow; row++) {
+    for (let col = startCol; col <= endCol; col++) {
+      ctx.drawImage(tile.canvas, col * tileW, row * tileH, tileW, tileH);
+    }
   }
-  ctx.closePath();
 }
 
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
-var ARROWHEAD_LENGTH = 12;
-var ARROWHEAD_ANGLE = Math.PI / 6;
-var ARROW_LABEL_FONT_SIZE = 14;
 var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
@@ -2885,206 +3316,35 @@ var ElementRenderer = class {
       case "stroke": {
         const b = getElementBounds(element);
         const c = b ? { x: b.x + b.w / 2, y: b.y + b.h / 2 } : element.position;
-        withRotation(ctx, element, c, () => this.renderStroke(ctx, element));
+        withRotation(ctx, element, c, () => renderStroke(ctx, element));
         break;
       }
       case "arrow":
-        this.renderArrow(ctx, element);
+        renderArrow(ctx, element, this.store, this.labelEditingId);
         break;
       case "shape": {
         const b = getElementBounds(element);
         const c = b ? { x: b.x + b.w / 2, y: b.y + b.h / 2 } : element.position;
-        withRotation(ctx, element, c, () => this.renderShape(ctx, element));
+        withRotation(ctx, element, c, () => renderShape(ctx, element));
         break;
       }
       case "image": {
         const b = getElementBounds(element);
         const c = b ? { x: b.x + b.w / 2, y: b.y + b.h / 2 } : element.position;
-        withRotation(ctx, element, c, () => this.renderImage(ctx, element));
+        withRotation(
+          ctx,
+          element,
+          c,
+          () => renderImage(ctx, element, this.imageCache, this.onImageLoad, this.onImageError)
+        );
         break;
       }
       case "grid":
         this.renderGrid(ctx, element);
         break;
       case "template":
-        this.renderTemplate(ctx, element);
-        break;
-    }
-  }
-  renderStroke(ctx, stroke) {
-    if (stroke.points.length < 2) return;
-    ctx.save();
-    if (stroke.blendMode) ctx.globalCompositeOperation = stroke.blendMode;
-    ctx.translate(stroke.position.x, stroke.position.y);
-    ctx.strokeStyle = stroke.color;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    ctx.globalAlpha = stroke.opacity;
-    const data = getStrokeRenderData(stroke);
-    if (data.buckets) {
-      for (const bucket of data.buckets) {
-        ctx.lineWidth = bucket.width;
-        ctx.stroke(bucket.path);
-      }
-    } else {
-      for (let i = 0; i < data.segments.length; i++) {
-        const seg = data.segments[i];
-        const w = data.widths[i];
-        if (!seg || w === void 0) continue;
-        ctx.lineWidth = w;
-        ctx.beginPath();
-        ctx.moveTo(seg.start.x, seg.start.y);
-        ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
-        ctx.stroke();
-      }
-    }
-    ctx.restore();
-  }
-  renderArrow(ctx, arrow) {
-    const geometry = getArrowRenderGeometry(arrow);
-    const { visualFrom, visualTo } = this.getVisualEndpoints(arrow, geometry);
-    ctx.save();
-    ctx.strokeStyle = arrow.color;
-    ctx.lineWidth = arrow.width;
-    ctx.lineCap = "round";
-    if (arrow.fromBinding || arrow.toBinding) {
-      ctx.setLineDash([8, 4]);
-    }
-    ctx.beginPath();
-    ctx.moveTo(visualFrom.x, visualFrom.y);
-    if (arrow.bend !== 0) {
-      const cp = geometry.controlPoint;
-      if (cp) {
-        ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
-      }
-    } else {
-      ctx.lineTo(visualTo.x, visualTo.y);
-    }
-    ctx.stroke();
-    this.renderArrowhead(ctx, arrow, visualTo, geometry.tangentEnd);
-    ctx.restore();
-    this.renderArrowLabel(ctx, arrow);
-  }
-  renderArrowLabel(ctx, arrow) {
-    if (!arrow.label || arrow.label.length === 0) return;
-    if (arrow.id === this.labelEditingId) return;
-    const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
-    ctx.save();
-    ctx.font = `${ARROW_LABEL_FONT_SIZE}px system-ui, sans-serif`;
-    const metrics = ctx.measureText(arrow.label);
-    const padX = 6;
-    const padY = 4;
-    const w = metrics.width + padX * 2;
-    const h = ARROW_LABEL_FONT_SIZE + padY * 2;
-    ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
-    ctx.beginPath();
-    ctx.roundRect(mid.x - w / 2, mid.y - h / 2, w, h, 4);
-    ctx.fill();
-    ctx.fillStyle = "#1a1a1a";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(arrow.label, mid.x, mid.y);
-    ctx.restore();
-  }
-  renderArrowhead(ctx, arrow, tip, angle) {
-    ctx.beginPath();
-    ctx.moveTo(tip.x, tip.y);
-    ctx.lineTo(
-      tip.x - ARROWHEAD_LENGTH * Math.cos(angle - ARROWHEAD_ANGLE),
-      tip.y - ARROWHEAD_LENGTH * Math.sin(angle - ARROWHEAD_ANGLE)
-    );
-    ctx.lineTo(
-      tip.x - ARROWHEAD_LENGTH * Math.cos(angle + ARROWHEAD_ANGLE),
-      tip.y - ARROWHEAD_LENGTH * Math.sin(angle + ARROWHEAD_ANGLE)
-    );
-    ctx.closePath();
-    ctx.fillStyle = arrow.color;
-    ctx.fill();
-  }
-  getVisualEndpoints(arrow, geometry) {
-    let visualFrom = arrow.from;
-    let visualTo = arrow.to;
-    if (!this.store) return { visualFrom, visualTo };
-    if (arrow.fromBinding) {
-      const el = this.store.getById(arrow.fromBinding.elementId);
-      if (el) {
-        const bounds = getElementBounds(el);
-        if (bounds) {
-          const tangentAngle = geometry.tangentStart;
-          const rayTarget = {
-            x: arrow.from.x + Math.cos(tangentAngle) * 1e3,
-            y: arrow.from.y + Math.sin(tangentAngle) * 1e3
-          };
-          visualFrom = getEdgeIntersection(bounds, rayTarget);
-        }
-      }
-    }
-    if (arrow.toBinding) {
-      const el = this.store.getById(arrow.toBinding.elementId);
-      if (el) {
-        const bounds = getElementBounds(el);
-        if (bounds) {
-          const tangentAngle = geometry.tangentEnd;
-          const rayTarget = {
-            x: arrow.to.x - Math.cos(tangentAngle) * 1e3,
-            y: arrow.to.y - Math.sin(tangentAngle) * 1e3
-          };
-          visualTo = getEdgeIntersection(bounds, rayTarget);
-        }
-      }
-    }
-    return { visualFrom, visualTo };
-  }
-  renderShape(ctx, shape) {
-    ctx.save();
-    if (shape.fillColor !== "none" && shape.shape !== "line") {
-      ctx.fillStyle = shape.fillColor;
-      this.fillShapePath(ctx, shape);
-    }
-    if (shape.strokeWidth > 0) {
-      ctx.strokeStyle = shape.strokeColor;
-      ctx.lineWidth = shape.strokeWidth;
-      this.strokeShapePath(ctx, shape);
-    }
-    ctx.restore();
-  }
-  fillShapePath(ctx, shape) {
-    switch (shape.shape) {
-      case "rectangle":
-        ctx.fillRect(shape.position.x, shape.position.y, shape.size.w, shape.size.h);
-        break;
-      case "ellipse": {
-        const cx = shape.position.x + shape.size.w / 2;
-        const cy = shape.position.y + shape.size.h / 2;
-        ctx.beginPath();
-        ctx.ellipse(cx, cy, shape.size.w / 2, shape.size.h / 2, 0, 0, Math.PI * 2);
-        ctx.fill();
-        break;
-      }
-    }
-  }
-  strokeShapePath(ctx, shape) {
-    switch (shape.shape) {
-      case "rectangle":
-        ctx.strokeRect(shape.position.x, shape.position.y, shape.size.w, shape.size.h);
-        break;
-      case "ellipse": {
-        const cx = shape.position.x + shape.size.w / 2;
-        const cy = shape.position.y + shape.size.h / 2;
-        ctx.beginPath();
-        ctx.ellipse(cx, cy, shape.size.w / 2, shape.size.h / 2, 0, 0, Math.PI * 2);
-        ctx.stroke();
-        break;
-      }
-      case "line": {
-        const [a, b] = lineEndpoints(shape);
-        ctx.lineCap = "round";
-        ctx.beginPath();
-        ctx.moveTo(a.x, a.y);
-        ctx.lineTo(b.x, b.y);
-        ctx.stroke();
+        renderTemplate(ctx, element, this.store);
         break;
-      }
     }
   }
   renderGrid(ctx, grid) {
@@ -3137,183 +3397,6 @@ var ElementRenderer = class {
       );
     }
   }
-  renderTemplate(ctx, template) {
-    const grid = this.store?.getElementsByType("grid")[0];
-    if (grid && grid.gridType === "hex") {
-      this.renderHexTemplate(ctx, template, grid.cellSize, grid.hexOrientation);
-      return;
-    }
-    this.renderGeometricTemplate(ctx, template);
-  }
-  renderGeometricTemplate(ctx, template) {
-    const { x: cx, y: cy } = template.position;
-    const r = template.radius;
-    ctx.save();
-    ctx.globalAlpha = template.opacity;
-    ctx.fillStyle = template.fillColor;
-    ctx.strokeStyle = template.strokeColor;
-    ctx.lineWidth = template.strokeWidth;
-    switch (template.templateShape) {
-      case "circle":
-        ctx.beginPath();
-        ctx.arc(cx, cy, r, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
-        if (template.radiusFeet != null && template.radiusFeet > 0) {
-          this.renderRadiusMarker(ctx, cx, cy, r, template.radiusFeet);
-        }
-        break;
-      case "square":
-        ctx.fillRect(cx - r / 2, cy - r / 2, r, r);
-        ctx.strokeRect(cx - r / 2, cy - r / 2, r, r);
-        break;
-      case "cone": {
-        const halfAngle = Math.atan(0.5);
-        ctx.beginPath();
-        ctx.moveTo(cx, cy);
-        ctx.arc(cx, cy, r, template.angle - halfAngle, template.angle + halfAngle);
-        ctx.closePath();
-        ctx.fill();
-        ctx.stroke();
-        break;
-      }
-      case "line": {
-        const halfW = r / 12;
-        const cos = Math.cos(template.angle);
-        const sin = Math.sin(template.angle);
-        const perpX = -sin * halfW;
-        const perpY = cos * halfW;
-        ctx.beginPath();
-        ctx.moveTo(cx + perpX, cy + perpY);
-        ctx.lineTo(cx + r * cos + perpX, cy + r * sin + perpY);
-        ctx.lineTo(cx + r * cos - perpX, cy + r * sin - perpY);
-        ctx.lineTo(cx - perpX, cy - perpY);
-        ctx.closePath();
-        ctx.fill();
-        ctx.stroke();
-        break;
-      }
-    }
-    ctx.restore();
-  }
-  renderHexTemplate(ctx, template, cellSize, orientation) {
-    const snapUnit = Math.sqrt(3) * cellSize;
-    const radiusCells = template.radius / snapUnit;
-    const center2 = template.position;
-    let cells;
-    switch (template.templateShape) {
-      case "circle":
-        cells = getHexCellsInRadius(center2, radiusCells, cellSize, orientation);
-        break;
-      case "cone":
-        cells = getHexCellsInCone(center2, template.angle, radiusCells, cellSize, orientation);
-        break;
-      case "line":
-        cells = getHexCellsInLine(center2, template.angle, radiusCells, cellSize, orientation);
-        break;
-      case "square":
-        cells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
-        break;
-    }
-    ctx.save();
-    ctx.globalAlpha = template.opacity;
-    ctx.beginPath();
-    for (const cell of cells) {
-      drawHexPath(ctx, cell.x, cell.y, cellSize, orientation);
-    }
-    ctx.fillStyle = template.fillColor;
-    ctx.fill();
-    ctx.beginPath();
-    for (const cell of cells) {
-      drawHexPath(ctx, cell.x, cell.y, cellSize, orientation);
-    }
-    ctx.strokeStyle = template.strokeColor;
-    ctx.lineWidth = template.strokeWidth;
-    ctx.stroke();
-    {
-      ctx.globalAlpha = Math.min(template.opacity + 0.1, 1);
-      ctx.beginPath();
-      drawHexPath(ctx, center2.x, center2.y, cellSize, orientation);
-      ctx.fillStyle = template.strokeColor;
-      ctx.fill();
-      ctx.strokeStyle = template.strokeColor;
-      ctx.lineWidth = template.strokeWidth;
-      ctx.stroke();
-    }
-    if (template.templateShape === "circle" && template.radiusFeet != null && template.radiusFeet > 0) {
-      const r = template.radius;
-      this.renderRadiusMarker(ctx, center2.x, center2.y, r, template.radiusFeet);
-    }
-    ctx.restore();
-  }
-  renderRadiusMarker(ctx, cx, cy, r, feet) {
-    const markerColor = ctx.strokeStyle;
-    ctx.save();
-    ctx.globalAlpha = 1;
-    ctx.beginPath();
-    ctx.setLineDash([4, 4]);
-    ctx.strokeStyle = markerColor;
-    ctx.lineWidth = 1.5;
-    ctx.moveTo(cx, cy);
-    ctx.lineTo(cx + r, cy);
-    ctx.stroke();
-    ctx.setLineDash([]);
-    const label = `${Math.round(feet)} ft`;
-    const fontSize = Math.max(10, Math.min(14, r * 0.15));
-    ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "bottom";
-    const textX = cx + r / 2;
-    const textY = cy - 4;
-    const metrics = ctx.measureText(label);
-    const padX = 4;
-    const padY = 2;
-    const textW = metrics.width + padX * 2;
-    const textH = fontSize + padY * 2;
-    ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
-    ctx.beginPath();
-    ctx.roundRect(textX - textW / 2, textY - textH, textW, textH, 3);
-    ctx.fill();
-    ctx.fillStyle = markerColor;
-    ctx.fillText(label, textX, textY - padY);
-    ctx.restore();
-  }
-  renderImage(ctx, image) {
-    if (this.imageCache.get(image.src) === "failed") {
-      this.renderImagePlaceholder(ctx, image);
-      return;
-    }
-    const img = this.getImage(image.src);
-    if (!img) return;
-    ctx.drawImage(
-      img,
-      image.position.x,
-      image.position.y,
-      image.size.w,
-      image.size.h
-    );
-  }
-  renderImagePlaceholder(ctx, image) {
-    const { x, y } = image.position;
-    const { w, h } = image.size;
-    ctx.save();
-    ctx.fillStyle = "#eeeeee";
-    ctx.fillRect(x, y, w, h);
-    ctx.strokeStyle = "#bdbdbd";
-    ctx.lineWidth = 1;
-    ctx.strokeRect(x, y, w, h);
-    const glyph = Math.min(24, w / 2, h / 2);
-    const cx = x + w / 2;
-    const cy = y + h / 2;
-    ctx.strokeStyle = "#9e9e9e";
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.arc(cx, cy, glyph / 2, 0, Math.PI * 2);
-    ctx.moveTo(cx - glyph / 2, cy + glyph / 2);
-    ctx.lineTo(cx + glyph / 2, cy - glyph / 2);
-    ctx.stroke();
-    ctx.restore();
-  }
   getHexTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
     const key = `${cellSize}:${orientation}:${strokeColor}:${strokeWidth}:${opacity}:${scale}`;
     if (this.hexTileCacheKey === key && this.hexTileCache) {
@@ -3326,33 +3409,6 @@ var ElementRenderer = class {
     }
     return tile;
   }
-  getImage(src) {
-    const cached = this.imageCache.get(src);
-    if (cached) {
-      if (cached === "failed") return null;
-      if (cached instanceof HTMLImageElement) return cached.complete ? cached : null;
-      return cached;
-    }
-    const img = new Image();
-    img.src = src;
-    this.imageCache.set(src, img);
-    img.onload = () => {
-      this.onImageLoad?.();
-      if (typeof createImageBitmap !== "undefined") {
-        createImageBitmap(img).then((bitmap) => {
-          this.imageCache.set(src, bitmap);
-          this.onImageLoad?.();
-        }).catch(() => {
-        });
-      }
-    };
-    img.onerror = (event) => {
-      this.imageCache.set(src, "failed");
-      this.onImageError?.(src, event);
-      this.onImageLoad?.();
-    };
-    return null;
-  }
 };
 
 // src/elements/element-factory.ts
@@ -8987,7 +9043,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.38.3";
+var VERSION = "0.38.5";
 export {
   ArrowTool,
   AutoSave,