@fieldnotes/core 0.8.10 → 0.9.0

package/dist/index.js

@@ -290,6 +290,30 @@ function snapPoint(point, gridSize) {
     y: Math.round(point.y / gridSize) * gridSize || 0
   };
 }
+function snapToHexCenter(point, cellSize, orientation) {
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * cellSize;
+    const rowH = 1.5 * cellSize;
+    const row = Math.round(point.y / rowH);
+    const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
+    const col = Math.round((point.x - offsetX) / hexW);
+    return { x: col * hexW + offsetX || 0, y: row * rowH || 0 };
+  } else {
+    const hexH = Math.sqrt(3) * cellSize;
+    const colW = 1.5 * cellSize;
+    const col = Math.round(point.x / colW);
+    const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
+    const row = Math.round((point.y - offsetY) / hexH);
+    return { x: col * colW || 0, y: row * hexH + offsetY || 0 };
+  }
+}
+function smartSnap(point, ctx) {
+  if (!ctx.snapToGrid || !ctx.gridSize) return point;
+  if (ctx.gridType === "hex" && ctx.hexOrientation) {
+    return snapToHexCenter(point, ctx.gridSize, ctx.hexOrientation);
+  }
+  return snapPoint(point, ctx.gridSize);
+}
 
 // src/core/auto-save.ts
 var DEFAULT_KEY = "fieldnotes-autosave";
@@ -942,6 +966,9 @@ function getElementBounds(element) {
   if (element.type === "arrow") {
     return getArrowBoundsAnalytical(element.from, element.to, element.bend);
   }
+  if (element.type === "template") {
+    return getTemplateBounds(element);
+  }
   return null;
 }
 function getArrowBoundsAnalytical(from, to, bend) {
@@ -982,6 +1009,62 @@ function getArrowBoundsAnalytical(from, to, bend) {
   }
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
+function getTemplateBounds(el) {
+  const { x: cx, y: cy } = el.position;
+  const r = el.radius;
+  switch (el.templateShape) {
+    case "circle":
+      return { x: cx - r, y: cy - r, w: 2 * r, h: 2 * r };
+    case "square":
+      return { x: cx - r / 2, y: cy - r / 2, w: r, h: r };
+    case "cone": {
+      const halfAngle = Math.atan(0.5);
+      const tipX = cx;
+      const tipY = cy;
+      const leftX = cx + r * Math.cos(el.angle - halfAngle);
+      const leftY = cy + r * Math.sin(el.angle - halfAngle);
+      const rightX = cx + r * Math.cos(el.angle + halfAngle);
+      const rightY = cy + r * Math.sin(el.angle + halfAngle);
+      const farX = cx + r * Math.cos(el.angle);
+      const farY = cy + r * Math.sin(el.angle);
+      const xs = [tipX, leftX, rightX, farX];
+      const ys = [tipY, leftY, rightY, farY];
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (let i = 0; i < xs.length; i++) {
+        const px = xs[i];
+        const py = ys[i];
+        if (px !== void 0 && px < minX) minX = px;
+        if (px !== void 0 && px > maxX) maxX = px;
+        if (py !== void 0 && py < minY) minY = py;
+        if (py !== void 0 && py > maxY) maxY = py;
+      }
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
+    case "line": {
+      const halfW = r / 12;
+      const cos = Math.cos(el.angle);
+      const sin = Math.sin(el.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      const x0 = cx + perpX;
+      const y0 = cy + perpY;
+      const x1 = cx + r * cos + perpX;
+      const y1 = cy + r * sin + perpY;
+      const x2 = cx + r * cos - perpX;
+      const y2 = cy + r * sin - perpY;
+      const x3 = cx - perpX;
+      const y3 = cy - perpY;
+      const minX = Math.min(x0, x1, x2, x3);
+      const minY = Math.min(y0, y1, y2, y3);
+      const maxX = Math.max(x0, x1, x2, x3);
+      const maxY = Math.max(y0, y1, y2, y3);
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
+  }
+}
 function boundsIntersect(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;
 }
@@ -1502,6 +1585,190 @@ function renderHexGridTiled(ctx, bounds, cellSize, tile) {
   }
 }
 
+// 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(center, radiusCells, cellSize, orientation) {
+  const n = Math.round(radiusCells);
+  const off = pixelToOffset(center.x, center.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(center, angle, radiusCells, cellSize, orientation) {
+  const n = Math.round(radiusCells);
+  const off = pixelToOffset(center.x, center.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(center, angle, radiusCells, cellSize, orientation) {
+  const n = Math.round(radiusCells);
+  const off = pixelToOffset(center.x, center.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(center, radiusCells, cellSize, orientation) {
+  const n = Math.round(radiusCells);
+  const off = pixelToOffset(center.x, center.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/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
 var ARROWHEAD_LENGTH = 12;
@@ -1546,6 +1813,9 @@ var ElementRenderer = class {
       case "grid":
         this.renderGrid(ctx, element);
         break;
+      case "template":
+        this.renderTemplate(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1733,6 +2003,147 @@ 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 center = template.position;
+    let cells;
+    switch (template.templateShape) {
+      case "circle":
+        cells = getHexCellsInRadius(center, radiusCells, cellSize, orientation);
+        break;
+      case "cone":
+        cells = getHexCellsInCone(center, template.angle, radiusCells, cellSize, orientation);
+        break;
+      case "line":
+        cells = getHexCellsInLine(center, template.angle, radiusCells, cellSize, orientation);
+        break;
+      case "square":
+        cells = getHexCellsInSquare(center, 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, center.x, center.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, center.x, center.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) {
     const img = this.getImage(image.src);
     if (!img) return;
@@ -2240,6 +2651,25 @@ function createText(input) {
     textAlign: input.textAlign ?? "left"
   };
 }
+function createTemplate(input) {
+  return {
+    id: createId("template"),
+    type: "template",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    templateShape: input.templateShape,
+    radius: input.radius,
+    angle: input.angle ?? 0,
+    fillColor: input.fillColor ?? "rgba(255, 87, 34, 0.2)",
+    strokeColor: input.strokeColor ?? "#FF5722",
+    strokeWidth: input.strokeWidth ?? 2,
+    opacity: input.opacity ?? 0.6,
+    feetPerCell: input.feetPerCell,
+    radiusFeet: input.radiusFeet
+  };
+}
 
 // src/canvas/export-image.ts
 function getStrokeBounds(el) {
@@ -2276,6 +2706,11 @@ function getElementRect(el) {
     }
     case "grid":
       return null;
+    case "template": {
+      const bounds = getElementBounds(el);
+      if (!bounds) return null;
+      return bounds;
+    }
     case "note":
     case "image":
     case "html":
@@ -3020,7 +3455,15 @@ var RenderLoop = class {
     ctx.save();
     ctx.scale(dpr, dpr);
     this.renderer.setCanvasSize(cssWidth, cssHeight);
-    this.background.render(ctx, this.camera);
+    const hasGridElement = this.store.getElementsByType("grid").length > 0;
+    if (hasGridElement) {
+      ctx.save();
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, cssWidth, cssHeight);
+      ctx.restore();
+    } else {
+      this.background.render(ctx, this.camera);
+    }
     ctx.save();
     ctx.translate(this.camera.position.x, this.camera.position.y);
     ctx.scale(this.camera.zoom, this.camera.zoom);
@@ -3217,7 +3660,10 @@ var Viewport = class {
     this.renderer = new ElementRenderer();
     this.renderer.setStore(this.store);
     this.renderer.setCamera(this.camera);
-    this.renderer.setOnImageLoad(() => this.requestRender());
+    this.renderer.setOnImageLoad(() => {
+      this.renderLoop.markAllLayersDirty();
+      this.requestRender();
+    });
     this.noteEditor = new NoteEditor();
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
@@ -3278,16 +3724,19 @@ var Viewport = class {
     });
     this.unsubStore = [
       this.store.on("add", (el) => {
+        if (el.type === "grid") this.syncGridContext();
         this.renderLoop.markLayerDirty(el.layerId);
         this.requestRender();
       }),
       this.store.on("remove", (el) => {
+        if (el.type === "grid") this.syncGridContext();
         this.unbindArrowsFrom(el);
         this.domNodeManager.removeDomNode(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
         this.requestRender();
       }),
       this.store.on("update", ({ previous, current }) => {
+        if (current.type === "grid") this.syncGridContext();
         this.renderLoop.markLayerDirty(current.layerId);
         if (previous.layerId !== current.layerId) {
           this.renderLoop.markLayerDirty(previous.layerId);
@@ -3297,6 +3746,7 @@ var Viewport = class {
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
         this.renderLoop.markAllLayersDirty();
+        this.syncGridContext();
         this.requestRender();
       })
     ];
@@ -3310,6 +3760,7 @@ var Viewport = class {
     this.observeResize();
     this.syncCanvasSize();
     this.renderLoop.start();
+    this.syncGridContext();
   }
   camera;
   store;
@@ -3626,6 +4077,18 @@ var Viewport = class {
     this.renderLoop.setCanvasSize(rect.width * dpr, rect.height * dpr);
     this.requestRender();
   }
+  syncGridContext() {
+    const grid = this.store.getElementsByType("grid")[0];
+    if (grid) {
+      this.toolContext.gridSize = grid.cellSize;
+      this.toolContext.gridType = grid.gridType;
+      this.toolContext.hexOrientation = grid.hexOrientation;
+    } else {
+      this.toolContext.gridSize = this._gridSize;
+      this.toolContext.gridType = void 0;
+      this.toolContext.hexOrientation = void 0;
+    }
+  }
   observeResize() {
     if (typeof ResizeObserver === "undefined") return;
     this.resizeObserver = new ResizeObserver(() => this.syncCanvasSize());
@@ -4000,7 +4463,7 @@ var SelectTool = class {
     ctx.setCursor?.("default");
   }
   snap(point, ctx) {
-    return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
+    return smartSnap(point, ctx);
   }
   onPointerDown(state, ctx) {
     this.ctx = ctx;
@@ -4017,6 +4480,12 @@ var SelectTool = class {
       ctx.requestRender();
       return;
     }
+    const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
+    if (templateResizeHit) {
+      this.mode = { type: "resizing-template", elementId: templateResizeHit };
+      ctx.requestRender();
+      return;
+    }
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       const el = ctx.store.getById(resizeHit.elementId);
@@ -4051,6 +4520,11 @@ var SelectTool = class {
       applyArrowHandleDrag(this.mode.handle, this.mode.elementId, world, ctx);
       return;
     }
+    if (this.mode.type === "resizing-template") {
+      ctx.setCursor?.("nwse-resize");
+      this.handleTemplateResize(world, ctx);
+      return;
+    }
     if (this.mode.type === "resizing") {
       ctx.setCursor?.(HANDLE_CURSORS[this.mode.handle]);
       this.handleResize(world, ctx);
@@ -4074,6 +4548,16 @@ var SelectTool = class {
             from: { x: el.from.x + dx, y: el.from.y + dy },
             to: { x: el.to.x + dx, y: el.to.y + dy }
           });
+        } else if (ctx.gridType && "size" in el) {
+          const centerX = el.position.x + el.size.w / 2 + dx;
+          const centerY = el.position.y + el.size.h / 2 + dy;
+          const snappedCenter = this.snap({ x: centerX, y: centerY }, ctx);
+          ctx.store.update(id, {
+            position: {
+              x: snappedCenter.x - el.size.w / 2,
+              y: snappedCenter.y - el.size.h / 2
+            }
+          });
         } else {
           ctx.store.update(id, {
             position: { x: el.position.x + dx, y: el.position.y + dy }
@@ -4148,6 +4632,11 @@ var SelectTool = class {
       ctx.setCursor?.(getArrowHandleCursor(arrowHit.handle, false));
       return;
     }
+    const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
+    if (templateResizeHit) {
+      ctx.setCursor?.("nwse-resize");
+      return;
+    }
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       ctx.setCursor?.(HANDLE_CURSORS[resizeHit.handle]);
@@ -4284,6 +4773,24 @@ var SelectTool = class {
           );
         }
         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]);
       }
     }
     canvasCtx.restore();
@@ -4308,6 +4815,43 @@ var SelectTool = class {
     }
     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;
+  }
+  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();
+  }
   getMarqueeRect() {
     if (this.mode.type !== "marquee") return null;
     const { start } = this.mode;
@@ -4364,6 +4908,11 @@ var SelectTool = class {
     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;
   }
 };
@@ -4421,7 +4970,7 @@ var ArrowTool = class {
       this.fromBinding = { elementId: target.id };
       this.fromTarget = target;
     } else {
-      this.start = ctx.snapToGrid && ctx.gridSize ? snapPoint(world, ctx.gridSize) : world;
+      this.start = smartSnap(world, ctx);
       this.fromBinding = void 0;
       this.fromTarget = null;
     }
@@ -4439,7 +4988,7 @@ var ArrowTool = class {
       this.end = getElementCenter(target);
       this.toTarget = target;
     } else {
-      this.end = ctx.snapToGrid && ctx.gridSize ? snapPoint(world, ctx.gridSize) : world;
+      this.end = smartSnap(world, ctx);
       this.toTarget = null;
     }
     ctx.requestRender();
@@ -4552,9 +5101,7 @@ var NoteTool = class {
   }
   onPointerUp(state, ctx) {
     let world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    if (ctx.snapToGrid && ctx.gridSize) {
-      world = snapPoint(world, ctx.gridSize);
-    }
+    world = smartSnap(world, ctx);
     const note = createNote({
       position: world,
       size: { ...this.size },
@@ -4609,9 +5156,7 @@ var TextTool = class {
   }
   onPointerUp(state, ctx) {
     let world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    if (ctx.snapToGrid && ctx.gridSize) {
-      world = snapPoint(world, ctx.gridSize);
-    }
+    world = smartSnap(world, ctx);
     const textEl = createText({
       position: world,
       fontSize: this.fontSize,
@@ -4644,8 +5189,12 @@ var ImageTool = class {
   onPointerUp(state, ctx) {
     if (!this.src) return;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const snapped = smartSnap(world, ctx);
     const image = createImage({
-      position: world,
+      position: {
+        x: snapped.x - this.size.w / 2,
+        y: snapped.y - this.size.h / 2
+      },
       size: { ...this.size },
       src: this.src
     });
@@ -4782,7 +5331,7 @@ var ShapeTool = class {
     for (const listener of this.optionListeners) listener();
   }
   snap(point, ctx) {
-    return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
+    return smartSnap(point, ctx);
   }
   onKeyDown = (e) => {
     if (e.key === "Shift") this.shiftHeld = true;
@@ -4792,6 +5341,398 @@ var ShapeTool = class {
   };
 };
 
+// src/tools/measure-tool.ts
+var MeasureTool = class {
+  name = "measure";
+  start = null;
+  end = null;
+  gridSize = 1;
+  gridType;
+  hexOrientation;
+  feetPerCell;
+  optionListeners = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.feetPerCell = options.feetPerCell ?? 5;
+  }
+  getOptions() {
+    return { feetPerCell: this.feetPerCell };
+  }
+  setOptions(options) {
+    if (options.feetPerCell !== void 0) this.feetPerCell = options.feetPerCell;
+    this.notifyOptionsChange();
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
+  onPointerDown(state, ctx) {
+    this.gridSize = ctx.gridSize ?? 1;
+    this.gridType = ctx.gridType;
+    this.hexOrientation = ctx.hexOrientation;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.start = this.snapToGrid(world, ctx);
+    this.end = { ...this.start };
+  }
+  onPointerMove(state, ctx) {
+    if (!this.start) return;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.end = this.snapToGrid(world, ctx);
+    ctx.requestRender();
+  }
+  onPointerUp(_state, ctx) {
+    if (!this.start) return;
+    this.start = null;
+    this.end = null;
+    ctx.requestRender();
+  }
+  onDeactivate(_ctx) {
+    this.start = null;
+    this.end = null;
+  }
+  getMeasurement() {
+    if (!this.start || !this.end) return null;
+    const dx = this.end.x - this.start.x;
+    const dy = this.end.y - this.start.y;
+    const worldDistance = Math.sqrt(dx * dx + dy * dy);
+    let cells;
+    if (this.gridType === "hex" && this.hexOrientation) {
+      cells = getHexDistance(this.start, this.end, this.gridSize, this.hexOrientation);
+    } else {
+      const snapUnit = this.gridSize;
+      cells = worldDistance / snapUnit;
+    }
+    const feet = cells * this.feetPerCell;
+    return {
+      start: { ...this.start },
+      end: { ...this.end },
+      worldDistance,
+      cells,
+      feet
+    };
+  }
+  renderOverlay(ctx) {
+    const m = this.getMeasurement();
+    if (!m) return;
+    ctx.save();
+    ctx.strokeStyle = "#FF5722";
+    ctx.setLineDash([8, 4]);
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(m.start.x, m.start.y);
+    ctx.lineTo(m.end.x, m.end.y);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = "#FF5722";
+    const dotRadius = 4;
+    ctx.beginPath();
+    ctx.arc(m.start.x, m.start.y, dotRadius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(m.end.x, m.end.y, dotRadius, 0, Math.PI * 2);
+    ctx.fill();
+    const label = `${Math.round(m.feet)} ft`;
+    const midX = (m.start.x + m.end.x) / 2;
+    const midY = (m.start.y + m.end.y) / 2;
+    ctx.font = "14px sans-serif";
+    const metrics = ctx.measureText(label);
+    const padX = 6;
+    const padY = 4;
+    const textH = 14;
+    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
+    ctx.beginPath();
+    ctx.roundRect(
+      midX - metrics.width / 2 - padX,
+      midY - textH / 2 - padY,
+      metrics.width + padX * 2,
+      textH + padY * 2,
+      4
+    );
+    ctx.fill();
+    ctx.fillStyle = "#FFFFFF";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(label, midX, midY);
+    ctx.restore();
+  }
+  snapToGrid(point, ctx) {
+    if (!ctx.gridSize) return point;
+    if (ctx.gridType === "hex" && ctx.hexOrientation) {
+      return snapToHexCenter(point, ctx.gridSize, ctx.hexOrientation);
+    }
+    if (ctx.gridType === "square") {
+      return snapPoint(point, ctx.gridSize);
+    }
+    if (ctx.snapToGrid) {
+      return snapPoint(point, ctx.gridSize);
+    }
+    return point;
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
+};
+
+// src/tools/template-tool.ts
+var TemplateTool = class {
+  name = "template";
+  drawing = false;
+  origin = { x: 0, y: 0 };
+  current = { x: 0, y: 0 };
+  gridSize = 1;
+  gridType;
+  hexOrientation;
+  snapEnabled = false;
+  templateShape;
+  fillColor;
+  strokeColor;
+  strokeWidth;
+  opacity;
+  feetPerCell;
+  optionListeners = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.templateShape = options.templateShape ?? "circle";
+    this.fillColor = options.fillColor ?? "rgba(255, 87, 34, 0.2)";
+    this.strokeColor = options.strokeColor ?? "#FF5722";
+    this.strokeWidth = options.strokeWidth ?? 2;
+    this.opacity = options.opacity ?? 0.6;
+    this.feetPerCell = options.feetPerCell ?? 5;
+  }
+  getOptions() {
+    return {
+      templateShape: this.templateShape,
+      fillColor: this.fillColor,
+      strokeColor: this.strokeColor,
+      strokeWidth: this.strokeWidth,
+      opacity: this.opacity,
+      feetPerCell: this.feetPerCell
+    };
+  }
+  setOptions(options) {
+    if (options.templateShape !== void 0) this.templateShape = options.templateShape;
+    if (options.fillColor !== void 0) this.fillColor = options.fillColor;
+    if (options.strokeColor !== void 0) this.strokeColor = options.strokeColor;
+    if (options.strokeWidth !== void 0) this.strokeWidth = options.strokeWidth;
+    if (options.opacity !== void 0) this.opacity = options.opacity;
+    if (options.feetPerCell !== void 0) this.feetPerCell = options.feetPerCell;
+    this.notifyOptionsChange();
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
+  onPointerDown(state, ctx) {
+    this.drawing = true;
+    this.gridSize = ctx.gridSize ?? 1;
+    this.gridType = ctx.gridType;
+    this.hexOrientation = ctx.hexOrientation;
+    this.snapEnabled = !!ctx.gridType || (ctx.snapToGrid ?? false);
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.origin = this.snapToGrid(world, ctx);
+    this.current = { ...this.origin };
+  }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    this.current = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    ctx.requestRender();
+  }
+  onPointerUp(_state, ctx) {
+    if (!this.drawing) return;
+    this.drawing = false;
+    const radius = this.computeRadius();
+    if (radius <= 0) return;
+    const angle = this.computeAngle();
+    const gridSize = ctx.gridSize;
+    const snapUnit = gridSize && gridSize > 0 ? ctx.gridType === "hex" ? Math.sqrt(3) * gridSize : gridSize : 0;
+    const cells = snapUnit > 0 ? radius / snapUnit : 0;
+    const radiusFeet = cells * this.feetPerCell;
+    const element = createTemplate({
+      position: { ...this.origin },
+      templateShape: this.templateShape,
+      radius,
+      angle,
+      fillColor: this.fillColor,
+      strokeColor: this.strokeColor,
+      strokeWidth: this.strokeWidth,
+      opacity: this.opacity,
+      feetPerCell: this.feetPerCell,
+      radiusFeet: radiusFeet > 0 ? radiusFeet : void 0,
+      layerId: ctx.activeLayerId ?? ""
+    });
+    ctx.store.add(element);
+    ctx.requestRender();
+    ctx.switchTool?.("select");
+  }
+  onDeactivate(_ctx) {
+    this.drawing = false;
+    this.origin = { x: 0, y: 0 };
+    this.current = { x: 0, y: 0 };
+  }
+  renderOverlay(ctx) {
+    if (!this.drawing) return;
+    const radius = this.computeRadius();
+    if (radius <= 0) return;
+    if (this.gridType === "hex" && this.hexOrientation) {
+      this.renderHexOverlay(ctx, radius);
+      return;
+    }
+    this.renderGeometricOverlay(ctx, radius);
+  }
+  renderGeometricOverlay(ctx, radius) {
+    const cx = this.origin.x;
+    const cy = this.origin.y;
+    const angle = this.computeAngle();
+    ctx.save();
+    ctx.globalAlpha = 0.4;
+    ctx.fillStyle = this.fillColor;
+    ctx.strokeStyle = this.strokeColor;
+    ctx.lineWidth = this.strokeWidth;
+    switch (this.templateShape) {
+      case "circle":
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        break;
+      case "square":
+        ctx.fillRect(cx - radius / 2, cy - radius / 2, radius, radius);
+        ctx.strokeRect(cx - radius / 2, cy - radius / 2, radius, radius);
+        break;
+      case "cone": {
+        const halfAngle = Math.atan(0.5);
+        ctx.beginPath();
+        ctx.moveTo(cx, cy);
+        ctx.arc(cx, cy, radius, angle - halfAngle, angle + halfAngle);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        break;
+      }
+      case "line": {
+        const halfW = radius / 12;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const perpX = -sin * halfW;
+        const perpY = cos * halfW;
+        ctx.beginPath();
+        ctx.moveTo(cx + perpX, cy + perpY);
+        ctx.lineTo(cx + radius * cos + perpX, cy + radius * sin + perpY);
+        ctx.lineTo(cx + radius * cos - perpX, cy + radius * sin - perpY);
+        ctx.lineTo(cx - perpX, cy - perpY);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        break;
+      }
+    }
+    ctx.restore();
+  }
+  renderHexOverlay(ctx, radius) {
+    const orientation = this.hexOrientation;
+    if (!orientation) return;
+    const cellSize = this.gridSize;
+    const snapUnit = Math.sqrt(3) * cellSize;
+    const radiusCells = radius / snapUnit;
+    const angle = this.computeAngle();
+    const center = this.origin;
+    let hexCells;
+    switch (this.templateShape) {
+      case "circle":
+        hexCells = getHexCellsInRadius(center, radiusCells, cellSize, orientation);
+        break;
+      case "cone":
+        hexCells = getHexCellsInCone(center, angle, radiusCells, cellSize, orientation);
+        break;
+      case "line":
+        hexCells = getHexCellsInLine(center, angle, radiusCells, cellSize, orientation);
+        break;
+      case "square":
+        hexCells = getHexCellsInSquare(center, radiusCells, cellSize, orientation);
+        break;
+    }
+    ctx.save();
+    ctx.globalAlpha = 0.4;
+    ctx.beginPath();
+    for (const cell of hexCells) {
+      drawHexPath(ctx, cell.x, cell.y, cellSize, orientation);
+    }
+    ctx.fillStyle = this.fillColor;
+    ctx.fill();
+    ctx.beginPath();
+    for (const cell of hexCells) {
+      drawHexPath(ctx, cell.x, cell.y, cellSize, orientation);
+    }
+    ctx.strokeStyle = this.strokeColor;
+    ctx.lineWidth = this.strokeWidth;
+    ctx.stroke();
+    if (this.templateShape === "cone" || this.templateShape === "line" || this.templateShape === "circle" || this.templateShape === "square") {
+      ctx.globalAlpha = 0.5;
+      ctx.beginPath();
+      drawHexPath(ctx, center.x, center.y, cellSize, orientation);
+      ctx.fillStyle = this.strokeColor;
+      ctx.fill();
+      ctx.strokeStyle = this.strokeColor;
+      ctx.lineWidth = this.strokeWidth;
+      ctx.stroke();
+    }
+    if (this.templateShape === "circle") {
+      const feet = radiusCells * this.feetPerCell;
+      if (feet > 0) {
+        ctx.globalAlpha = 1;
+        const label = `${Math.round(feet)} ft`;
+        const fontSize = Math.max(10, Math.min(14, radius * 0.15));
+        ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "bottom";
+        const textX = center.x;
+        const textY = center.y - 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 = this.strokeColor;
+        ctx.fillText(label, textX, textY - padY);
+      }
+    }
+    ctx.restore();
+  }
+  computeRadius() {
+    const dx = this.current.x - this.origin.x;
+    const dy = this.current.y - this.origin.y;
+    const raw = Math.sqrt(dx * dx + dy * dy);
+    if (this.snapEnabled && this.gridSize > 0) {
+      const snapUnit = this.gridType === "hex" ? Math.sqrt(3) * this.gridSize : this.gridSize;
+      return Math.max(snapUnit, Math.round(raw / snapUnit) * snapUnit);
+    }
+    return raw;
+  }
+  computeAngle() {
+    const dx = this.current.x - this.origin.x;
+    const dy = this.current.y - this.origin.y;
+    return Math.atan2(dy, dx);
+  }
+  snapToGrid(point, ctx) {
+    if (!ctx.gridSize) return point;
+    if (ctx.gridType === "hex" && ctx.hexOrientation) {
+      return snapToHexCenter(point, ctx.gridSize, ctx.hexOrientation);
+    }
+    if (ctx.gridType === "square") {
+      return snapPoint(point, ctx.gridSize);
+    }
+    if (ctx.snapToGrid) {
+      return snapPoint(point, ctx.gridSize);
+    }
+    return point;
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
+};
+
 // src/history/layer-commands.ts
 var CreateLayerCommand = class {
   constructor(manager, layer) {
@@ -4833,7 +5774,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.10";
+var VERSION = "0.9.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -4852,6 +5793,7 @@ export {
   ImageTool,
   InputHandler,
   LayerManager,
+  MeasureTool,
   NoteEditor,
   NoteTool,
   PencilTool,
@@ -4860,6 +5802,7 @@ export {
   RemoveLayerCommand,
   SelectTool,
   ShapeTool,
+  TemplateTool,
   TextTool,
   ToolManager,
   UpdateElementCommand,
@@ -4876,7 +5819,9 @@ export {
   createNote,
   createShape,
   createStroke,
+  createTemplate,
   createText,
+  drawHexPath,
   exportImage,
   exportState,
   findBindTarget,
@@ -4889,10 +5834,17 @@ export {
   getEdgeIntersection,
   getElementBounds,
   getElementCenter,
+  getHexCellsInCone,
+  getHexCellsInLine,
+  getHexCellsInRadius,
+  getHexCellsInSquare,
+  getHexDistance,
   isBindable,
   isNearBezier,
   parseState,
+  smartSnap,
   snapPoint,
+  snapToHexCenter,
   unbindArrow,
   updateBoundArrow
 };