@fieldnotes/core 0.8.11 → 0.10.0

package/dist/index.js

@@ -169,6 +169,120 @@ var Quadtree = class {
   }
 };
 
+// src/elements/note-sanitizer.ts
+var BOLD_TAGS = /* @__PURE__ */ new Set(["b", "strong"]);
+var ITALIC_TAGS = /* @__PURE__ */ new Set(["i", "em"]);
+var UNDERLINE_TAGS = /* @__PURE__ */ new Set(["u"]);
+var STRIKE_TAGS = /* @__PURE__ */ new Set(["s", "strike", "del"]);
+var BLOCK_TAGS = /* @__PURE__ */ new Set(["div"]);
+function parseStyledRuns(html, baseFontSize) {
+  if (!html) return [];
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const runs = [];
+  const baseStyle = {
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+    fontSize: baseFontSize
+  };
+  walkNodes(doc.body, baseStyle, runs);
+  return runs;
+}
+function walkNodes(node, style, runs) {
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      const text = child.textContent ?? "";
+      if (text) {
+        runs.push({ text, ...style });
+      }
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = child;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "br") {
+      runs.push({ text: "\n", ...style });
+      continue;
+    }
+    if (BLOCK_TAGS.has(tag) && runs.length > 0) {
+      const lastRun = runs[runs.length - 1];
+      if (lastRun && !lastRun.text.endsWith("\n")) {
+        runs.push({ text: "\n", ...style });
+      }
+    }
+    const childStyle = { ...style };
+    if (BOLD_TAGS.has(tag)) childStyle.bold = true;
+    if (ITALIC_TAGS.has(tag)) childStyle.italic = true;
+    if (UNDERLINE_TAGS.has(tag)) childStyle.underline = true;
+    if (STRIKE_TAGS.has(tag)) childStyle.strikethrough = true;
+    if (tag === "span") {
+      const fontSize = el.style.fontSize;
+      if (fontSize) {
+        childStyle.fontSize = parseInt(fontSize, 10) || style.fontSize;
+      }
+    }
+    walkNodes(el, childStyle, runs);
+  }
+}
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "s",
+  "strike",
+  "del",
+  "span",
+  "br",
+  "div"
+]);
+function sanitizeNoteHtml(html) {
+  if (!html) return "";
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  sanitizeNode(doc.body);
+  return doc.body.innerHTML;
+}
+function sanitizeNode(node) {
+  const children = Array.from(node.childNodes);
+  for (const child of children) {
+    if (child.nodeType === Node.TEXT_NODE) continue;
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      child.remove();
+      continue;
+    }
+    const el = child;
+    const tag = el.tagName.toLowerCase();
+    if (!ALLOWED_TAGS.has(tag)) {
+      const fragment = document.createDocumentFragment();
+      while (el.firstChild) {
+        fragment.appendChild(el.firstChild);
+      }
+      node.replaceChild(fragment, el);
+      sanitizeNode(node);
+      return;
+    }
+    sanitizeAttributes(el, tag);
+    sanitizeNode(el);
+  }
+}
+function sanitizeAttributes(el, tag) {
+  const attrs = Array.from(el.attributes);
+  for (const attr of attrs) {
+    if (tag === "span" && attr.name === "style") {
+      const fontSize = el.style.fontSize;
+      if (fontSize) {
+        el.setAttribute("style", `font-size: ${fontSize};`);
+      } else {
+        el.removeAttribute("style");
+      }
+      continue;
+    }
+    el.removeAttribute(attr.name);
+  }
+}
+
 // src/core/state-serializer.ts
 var CURRENT_VERSION = 2;
 function exportState(elements, camera, layers = []) {
@@ -231,7 +345,17 @@ function validateState(data) {
     ];
   }
 }
-var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape", "grid"]);
+var VALID_TYPES = /* @__PURE__ */ new Set([
+  "stroke",
+  "note",
+  "arrow",
+  "image",
+  "html",
+  "text",
+  "shape",
+  "grid",
+  "template"
+]);
 function validateElement(el) {
   if (!el || typeof el !== "object") {
     throw new Error("Invalid element: expected an object");
@@ -281,6 +405,9 @@ function migrateElement(obj) {
   if (obj["type"] === "note" && typeof obj["textColor"] !== "string") {
     obj["textColor"] = "#000000";
   }
+  if (obj["type"] === "note" && typeof obj["text"] === "string") {
+    obj["text"] = sanitizeNoteHtml(obj["text"]);
+  }
 }
 
 // src/core/snap.ts
@@ -290,6 +417,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 +1093,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 +1136,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 +1712,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 +1940,9 @@ var ElementRenderer = class {
       case "grid":
         this.renderGrid(ctx, element);
         break;
+      case "template":
+        this.renderTemplate(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1733,6 +2130,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;
@@ -1779,7 +2317,359 @@ var ElementRenderer = class {
   }
 };
 
+// src/elements/create-id.ts
+var counter = 0;
+function createId(prefix) {
+  return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
+}
+
+// src/elements/element-factory.ts
+var DEFAULT_NOTE_FONT_SIZE = 18;
+function createStroke(input) {
+  return {
+    id: createId("stroke"),
+    type: "stroke",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    points: input.points,
+    color: input.color ?? "#000000",
+    width: input.width ?? 2,
+    opacity: input.opacity ?? 1
+  };
+}
+function createNote(input) {
+  return {
+    id: createId("note"),
+    type: "note",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    size: input.size ?? { w: 200, h: 100 },
+    text: input.text ?? "",
+    backgroundColor: input.backgroundColor ?? "#ffeb3b",
+    textColor: input.textColor ?? "#000000",
+    fontSize: input.fontSize ?? DEFAULT_NOTE_FONT_SIZE
+  };
+}
+function createArrow(input) {
+  const bend = input.bend ?? 0;
+  const result = {
+    id: createId("arrow"),
+    type: "arrow",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    from: input.from,
+    to: input.to,
+    bend,
+    color: input.color ?? "#000000",
+    width: input.width ?? 2,
+    cachedControlPoint: getArrowControlPoint(input.from, input.to, bend)
+  };
+  if (input.fromBinding) result.fromBinding = input.fromBinding;
+  if (input.toBinding) result.toBinding = input.toBinding;
+  return result;
+}
+function createImage(input) {
+  return {
+    id: createId("image"),
+    type: "image",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    size: input.size,
+    src: input.src
+  };
+}
+function createHtmlElement(input) {
+  const el = {
+    id: createId("html"),
+    type: "html",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    size: input.size
+  };
+  if (input.domId) el.domId = input.domId;
+  return el;
+}
+function createShape(input) {
+  return {
+    id: createId("shape"),
+    type: "shape",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    shape: input.shape ?? "rectangle",
+    size: input.size,
+    strokeColor: input.strokeColor ?? "#000000",
+    strokeWidth: input.strokeWidth ?? 2,
+    fillColor: input.fillColor ?? "none"
+  };
+}
+function createGrid(input) {
+  return {
+    id: createId("grid"),
+    type: "grid",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    gridType: input.gridType ?? "square",
+    hexOrientation: input.hexOrientation ?? "pointy",
+    cellSize: input.cellSize ?? 40,
+    strokeColor: input.strokeColor ?? "#000000",
+    strokeWidth: input.strokeWidth ?? 1,
+    opacity: input.opacity ?? 1
+  };
+}
+function createText(input) {
+  return {
+    id: createId("text"),
+    type: "text",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    size: input.size ?? { w: 200, h: 28 },
+    text: input.text ?? "",
+    fontSize: input.fontSize ?? 16,
+    color: input.color ?? "#1a1a1a",
+    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/elements/note-formatting.ts
+function toggleBold() {
+  document.execCommand("bold");
+}
+function toggleItalic() {
+  document.execCommand("italic");
+}
+function toggleUnderline() {
+  document.execCommand("underline");
+}
+function toggleStrikethrough() {
+  document.execCommand("strikeThrough");
+}
+function setFontSize(size) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  if (range.collapsed) return;
+  const span = document.createElement("span");
+  span.style.fontSize = `${size}px`;
+  try {
+    range.surroundContents(span);
+  } catch {
+    span.appendChild(range.extractContents());
+    range.insertNode(span);
+  }
+}
+function getActiveFormats() {
+  const query = (cmd) => {
+    try {
+      return document.queryCommandState(cmd);
+    } catch {
+      return false;
+    }
+  };
+  return {
+    bold: query("bold"),
+    italic: query("italic"),
+    underline: query("underline"),
+    strikethrough: query("strikeThrough")
+  };
+}
+
+// src/elements/note-toolbar.ts
+var TOOLBAR_HEIGHT = 32;
+var TOOLBAR_GAP = 4;
+var FORMAT_BUTTONS = [
+  { label: "B", format: "bold", command: "bold" },
+  { label: "I", format: "italic", command: "italic" },
+  { label: "U", format: "underline", command: "underline" },
+  { label: "S", format: "strikethrough", command: "strikeThrough" }
+];
+var DEFAULT_FONT_SIZE_PRESETS = [
+  { label: "Small", size: 14 },
+  { label: "Normal", size: 18 },
+  { label: "Large", size: 24 },
+  { label: "Heading", size: 32 }
+];
+var NoteToolbar = class {
+  el = null;
+  anchor = null;
+  selectionListener = null;
+  fontSizePresets;
+  constructor(fontSizePresets) {
+    this.fontSizePresets = fontSizePresets ?? DEFAULT_FONT_SIZE_PRESETS;
+  }
+  show(anchor) {
+    this.hide();
+    this.anchor = anchor;
+    this.el = this.createToolbarElement();
+    document.body.appendChild(this.el);
+    this.positionToolbar(anchor);
+    this.selectionListener = () => this.updateActiveStates();
+    document.addEventListener("selectionchange", this.selectionListener);
+  }
+  hide() {
+    if (this.selectionListener) {
+      document.removeEventListener("selectionchange", this.selectionListener);
+      this.selectionListener = null;
+    }
+    if (this.el) {
+      this.el.remove();
+      this.el = null;
+    }
+    this.anchor = null;
+  }
+  getElement() {
+    return this.el;
+  }
+  updatePosition(anchor) {
+    if (this.el) {
+      this.positionToolbar(anchor);
+    }
+  }
+  createToolbarElement() {
+    const toolbar = document.createElement("div");
+    toolbar.dataset["noteToolbar"] = "";
+    Object.assign(toolbar.style, {
+      position: "fixed",
+      display: "flex",
+      alignItems: "center",
+      gap: "2px",
+      padding: "2px 4px",
+      background: "#fff",
+      border: "1px solid #ccc",
+      borderRadius: "4px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+      zIndex: "10000",
+      height: `${TOOLBAR_HEIGHT}px`,
+      userSelect: "none"
+    });
+    for (const btn of FORMAT_BUTTONS) {
+      toolbar.appendChild(this.createFormatButton(btn));
+    }
+    toolbar.appendChild(this.createFontSizeSelect());
+    return toolbar;
+  }
+  createFormatButton(config) {
+    const btn = document.createElement("button");
+    btn.dataset["format"] = config.format;
+    btn.textContent = config.label;
+    Object.assign(btn.style, {
+      border: "1px solid transparent",
+      borderRadius: "3px",
+      background: "none",
+      cursor: "pointer",
+      padding: "2px 6px",
+      fontSize: "13px",
+      fontWeight: config.format === "bold" ? "bold" : "normal",
+      fontStyle: config.format === "italic" ? "italic" : "normal",
+      textDecoration: config.format === "underline" ? "underline" : config.format === "strikethrough" ? "line-through" : "none",
+      minWidth: "24px",
+      height: "24px",
+      lineHeight: "24px"
+    });
+    btn.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      document.execCommand(config.command);
+      this.updateActiveStates();
+    });
+    return btn;
+  }
+  createFontSizeSelect() {
+    const select = document.createElement("select");
+    Object.assign(select.style, {
+      border: "1px solid #ccc",
+      borderRadius: "3px",
+      background: "#fff",
+      cursor: "pointer",
+      padding: "2px",
+      fontSize: "12px",
+      height: "24px",
+      marginLeft: "4px"
+    });
+    for (const preset of this.fontSizePresets) {
+      const option = document.createElement("option");
+      option.value = String(preset.size);
+      option.textContent = preset.label;
+      select.appendChild(option);
+    }
+    select.value = String(DEFAULT_NOTE_FONT_SIZE);
+    select.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+    });
+    select.addEventListener("change", () => {
+      setFontSize(Number(select.value));
+      this.updateActiveStates();
+      this.anchor?.focus();
+    });
+    return select;
+  }
+  positionToolbar(anchor) {
+    if (!this.el) return;
+    const rect = anchor.getBoundingClientRect();
+    const toolbarWidth = this.el.offsetWidth || 200;
+    let top = rect.top - TOOLBAR_HEIGHT - TOOLBAR_GAP;
+    if (top < 0) {
+      top = rect.bottom + TOOLBAR_GAP;
+    }
+    let left = rect.left + (rect.width - toolbarWidth) / 2;
+    left = Math.max(4, left);
+    Object.assign(this.el.style, {
+      top: `${top}px`,
+      left: `${left}px`
+    });
+  }
+  updateActiveStates() {
+    if (!this.el) return;
+    const active = getActiveFormats();
+    for (const config of FORMAT_BUTTONS) {
+      const btn = this.el.querySelector(`[data-format="${config.format}"]`);
+      if (!btn) continue;
+      const isActive = active[config.format] ?? false;
+      btn.style.background = isActive ? "#e0e0e0" : "none";
+      btn.style.borderColor = isActive ? "#bbb" : "transparent";
+    }
+  }
+};
+
 // src/elements/note-editor.ts
+var FORMAT_SHORTCUTS = {
+  b: toggleBold,
+  i: toggleItalic,
+  u: toggleUnderline
+};
 var NoteEditor = class {
   editingId = null;
   editingNode = null;
@@ -1788,6 +2678,10 @@ var NoteEditor = class {
   pointerHandler = null;
   pendingEditId = null;
   onStopCallback = null;
+  toolbar;
+  constructor(options) {
+    this.toolbar = options?.toolbar === false ? null : new NoteToolbar(options?.fontSizePresets);
+  }
   get isEditing() {
     return this.editingId !== null;
   }
@@ -1812,13 +2706,6 @@ var NoteEditor = class {
   stopEditing(store) {
     this.pendingEditId = null;
     if (!this.editingId || !this.editingNode) return;
-    const text = this.editingNode.textContent ?? "";
-    store.update(this.editingId, { text });
-    this.editingNode.contentEditable = "false";
-    Object.assign(this.editingNode.style, {
-      userSelect: "none",
-      cursor: "default"
-    });
     if (this.blurHandler) {
       this.editingNode.removeEventListener("blur", this.blurHandler);
     }
@@ -1828,6 +2715,14 @@ var NoteEditor = class {
     if (this.pointerHandler) {
       this.editingNode.removeEventListener("pointerdown", this.pointerHandler);
     }
+    const text = sanitizeNoteHtml(this.editingNode.innerHTML);
+    store.update(this.editingId, { text });
+    this.editingNode.contentEditable = "false";
+    Object.assign(this.editingNode.style, {
+      userSelect: "none",
+      cursor: "default"
+    });
+    this.toolbar?.hide();
     if (this.editingId && this.onStopCallback) {
       this.onStopCallback(this.editingId);
     }
@@ -1843,6 +2738,11 @@ var NoteEditor = class {
       this.stopEditing(store);
     }
   }
+  updateToolbarPosition() {
+    if (this.editingNode) {
+      this.toolbar?.updatePosition(this.editingNode);
+    }
+  }
   activateEditing(node, elementId, store) {
     this.editingId = elementId;
     this.editingNode = node;
@@ -1861,8 +2761,21 @@ var NoteEditor = class {
       selection.removeAllRanges();
       selection.addRange(range);
     }
-    this.blurHandler = () => this.stopEditing(store);
+    this.toolbar?.show(node);
+    this.blurHandler = (e) => {
+      const related = e.relatedTarget;
+      if (related && this.toolbar?.getElement()?.contains(related)) return;
+      this.stopEditing(store);
+    };
     this.keyHandler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
+        const action = FORMAT_SHORTCUTS[e.key.toLowerCase()];
+        if (action) {
+          e.preventDefault();
+          action();
+          return;
+        }
+      }
       if (e.key === "Escape") {
         node.blur();
       }
@@ -2114,131 +3027,86 @@ var HistoryRecorder = class {
   }
 };
 
-// src/elements/create-id.ts
-var counter = 0;
-function createId(prefix) {
-  return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
-}
-
-// src/elements/element-factory.ts
-function createStroke(input) {
-  return {
-    id: createId("stroke"),
-    type: "stroke",
-    position: input.position ?? { x: 0, y: 0 },
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    points: input.points,
-    color: input.color ?? "#000000",
-    width: input.width ?? 2,
-    opacity: input.opacity ?? 1
-  };
-}
-function createNote(input) {
-  return {
-    id: createId("note"),
-    type: "note",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    size: input.size ?? { w: 200, h: 100 },
-    text: input.text ?? "",
-    backgroundColor: input.backgroundColor ?? "#ffeb3b",
-    textColor: input.textColor ?? "#000000"
-  };
-}
-function createArrow(input) {
-  const bend = input.bend ?? 0;
-  const result = {
-    id: createId("arrow"),
-    type: "arrow",
-    position: input.position ?? { x: 0, y: 0 },
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    from: input.from,
-    to: input.to,
-    bend,
-    color: input.color ?? "#000000",
-    width: input.width ?? 2,
-    cachedControlPoint: getArrowControlPoint(input.from, input.to, bend)
-  };
-  if (input.fromBinding) result.fromBinding = input.fromBinding;
-  if (input.toBinding) result.toBinding = input.toBinding;
-  return result;
-}
-function createImage(input) {
-  return {
-    id: createId("image"),
-    type: "image",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    size: input.size,
-    src: input.src
-  };
-}
-function createHtmlElement(input) {
-  const el = {
-    id: createId("html"),
-    type: "html",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    size: input.size
-  };
-  if (input.domId) el.domId = input.domId;
-  return el;
-}
-function createShape(input) {
-  return {
-    id: createId("shape"),
-    type: "shape",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    shape: input.shape ?? "rectangle",
-    size: input.size,
-    strokeColor: input.strokeColor ?? "#000000",
-    strokeWidth: input.strokeWidth ?? 2,
-    fillColor: input.fillColor ?? "none"
-  };
-}
-function createGrid(input) {
-  return {
-    id: createId("grid"),
-    type: "grid",
-    position: input.position ?? { x: 0, y: 0 },
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    gridType: input.gridType ?? "square",
-    hexOrientation: input.hexOrientation ?? "pointy",
-    cellSize: input.cellSize ?? 40,
-    strokeColor: input.strokeColor ?? "#000000",
-    strokeWidth: input.strokeWidth ?? 1,
-    opacity: input.opacity ?? 1
-  };
-}
-function createText(input) {
-  return {
-    id: createId("text"),
-    type: "text",
-    position: input.position,
-    zIndex: input.zIndex ?? 0,
-    locked: input.locked ?? false,
-    layerId: input.layerId ?? "",
-    size: input.size ?? { w: 200, h: 28 },
-    text: input.text ?? "",
-    fontSize: input.fontSize ?? 16,
-    color: input.color ?? "#1a1a1a",
-    textAlign: input.textAlign ?? "left"
-  };
+// src/canvas/note-canvas-renderer.ts
+function renderNoteOnCanvas(ctx, note) {
+  const { x, y } = note.position;
+  const { w, h } = note.size;
+  const r = 4;
+  const pad = 8;
+  const baseFontSize = note.fontSize ?? DEFAULT_NOTE_FONT_SIZE;
+  ctx.save();
+  ctx.fillStyle = note.backgroundColor;
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.arcTo(x + w, y, x + w, y + r, r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+  ctx.lineTo(x + r, y + h);
+  ctx.arcTo(x, y + h, x, y + h - r, r);
+  ctx.lineTo(x, y + r);
+  ctx.arcTo(x, y, x + r, y, r);
+  ctx.closePath();
+  ctx.fill();
+  if (note.text) {
+    ctx.fillStyle = note.textColor;
+    const runs = parseStyledRuns(note.text, baseFontSize);
+    renderStyledRuns(ctx, runs, x + pad, y + pad, w - pad * 2);
+  }
+  ctx.restore();
+}
+function buildFontString(run) {
+  const style = run.italic ? "italic" : "normal";
+  const weight = run.bold ? "bold" : "normal";
+  return `${style} ${weight} ${run.fontSize}px system-ui, sans-serif`;
+}
+function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
+  ctx.textBaseline = "top";
+  let cursorX = startX;
+  let cursorY = startY;
+  let lineHeight = 0;
+  for (const run of runs) {
+    ctx.font = buildFontString(run);
+    const runLineHeight = run.fontSize * 1.3;
+    lineHeight = Math.max(lineHeight, runLineHeight);
+    const words = run.text.split(/(\n| )/);
+    for (const word of words) {
+      if (word === "\n") {
+        cursorX = startX;
+        cursorY += lineHeight;
+        lineHeight = runLineHeight;
+        continue;
+      }
+      if (word === " ") {
+        const spaceWidth = ctx.measureText(" ").width;
+        if (cursorX + spaceWidth > startX + maxWidth && cursorX > startX) {
+          cursorX = startX;
+          cursorY += lineHeight;
+          lineHeight = runLineHeight;
+        } else {
+          cursorX += spaceWidth;
+        }
+        continue;
+      }
+      if (!word) continue;
+      const metrics = ctx.measureText(word);
+      if (cursorX + metrics.width > startX + maxWidth && cursorX > startX) {
+        cursorX = startX;
+        cursorY += lineHeight;
+        lineHeight = runLineHeight;
+      }
+      ctx.fillText(word, cursorX, cursorY);
+      if (run.underline) {
+        const underY = cursorY + run.fontSize + 1;
+        ctx.fillRect(cursorX, underY, metrics.width, 1);
+      }
+      if (run.strikethrough) {
+        const strikeY = cursorY + run.fontSize * 0.55;
+        ctx.fillRect(cursorX, strikeY, metrics.width, 1);
+      }
+      cursorX += metrics.width;
+    }
+  }
 }
 
 // src/canvas/export-image.ts
@@ -2276,6 +3144,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":
@@ -2312,33 +3185,6 @@ function computeBounds(elements, padding) {
     h: maxY - minY + padding * 2
   };
 }
-function renderNoteOnCanvas(ctx, note) {
-  const { x, y } = note.position;
-  const { w, h } = note.size;
-  const r = 4;
-  const pad = 8;
-  ctx.save();
-  ctx.fillStyle = note.backgroundColor;
-  ctx.beginPath();
-  ctx.moveTo(x + r, y);
-  ctx.lineTo(x + w - r, y);
-  ctx.arcTo(x + w, y, x + w, y + r, r);
-  ctx.lineTo(x + w, y + h - r);
-  ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
-  ctx.lineTo(x + r, y + h);
-  ctx.arcTo(x, y + h, x, y + h - r, r);
-  ctx.lineTo(x, y + r);
-  ctx.arcTo(x, y, x + r, y, r);
-  ctx.closePath();
-  ctx.fill();
-  if (note.text) {
-    ctx.fillStyle = note.textColor;
-    ctx.font = "14px system-ui, sans-serif";
-    ctx.textBaseline = "top";
-    wrapText(ctx, note.text, x + pad, y + pad, w - pad * 2, 18);
-  }
-  ctx.restore();
-}
 function renderTextOnCanvas(ctx, text) {
   if (!text.text) return;
   ctx.save();
@@ -2363,25 +3209,6 @@ function renderTextOnCanvas(ctx, text) {
   }
   ctx.restore();
 }
-function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
-  const words = text.split(" ");
-  let line = "";
-  let offsetY = 0;
-  for (const word of words) {
-    const testLine = line ? `${line} ${word}` : word;
-    const metrics = ctx.measureText(testLine);
-    if (metrics.width > maxWidth && line) {
-      ctx.fillText(line, x, y + offsetY);
-      line = word;
-      offsetY += lineHeight;
-    } else {
-      line = testLine;
-    }
-  }
-  if (line) {
-    ctx.fillText(line, x, y + offsetY);
-  }
-}
 function renderGridForBounds(ctx, grid, bounds) {
   const visibleBounds = {
     minX: bounds.x,
@@ -2780,13 +3607,13 @@ var DomNodeManager = class {
           padding: "8px",
           borderRadius: "4px",
           boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-          fontSize: "14px",
+          fontSize: `${element.fontSize ?? DEFAULT_NOTE_FONT_SIZE}px`,
           overflow: "hidden",
           cursor: "default",
           userSelect: "none",
           wordWrap: "break-word"
         });
-        node.textContent = element.text || "";
+        node.innerHTML = element.text || "";
         node.addEventListener("dblclick", (e) => {
           e.stopPropagation();
           const id = node.dataset["elementId"];
@@ -2794,11 +3621,13 @@ var DomNodeManager = class {
         });
       }
       if (!this.isEditingElement(element.id)) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
+        const text = element.text || "";
+        if (node.innerHTML !== text) {
+          node.innerHTML = text;
         }
         node.style.backgroundColor = element.backgroundColor;
         node.style.color = element.textColor;
+        node.style.fontSize = `${element.fontSize ?? DEFAULT_NOTE_FONT_SIZE}px`;
       }
     }
     if (element.type === "html" && !node.dataset["initialized"]) {
@@ -3020,7 +3849,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);
@@ -3221,7 +4058,10 @@ var Viewport = class {
       this.renderLoop.markAllLayersDirty();
       this.requestRender();
     });
-    this.noteEditor = new NoteEditor();
+    this.noteEditor = new NoteEditor({
+      fontSizePresets: options.fontSizePresets,
+      toolbar: options.toolbar
+    });
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
     this.historyRecorder = new HistoryRecorder(this.store, this.history);
@@ -3277,20 +4117,24 @@ var Viewport = class {
     });
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
+      this.noteEditor.updateToolbarPosition();
       this.requestRender();
     });
     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);
@@ -3300,6 +4144,7 @@ var Viewport = class {
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
         this.renderLoop.markAllLayersDirty();
+        this.syncGridContext();
         this.requestRender();
       })
     ];
@@ -3313,6 +4158,7 @@ var Viewport = class {
     this.observeResize();
     this.syncCanvasSize();
     this.renderLoop.start();
+    this.syncGridContext();
   }
   camera;
   store;
@@ -3629,6 +4475,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());
@@ -4003,7 +4861,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;
@@ -4020,6 +4878,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);
@@ -4054,6 +4918,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);
@@ -4077,6 +4946,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 }
@@ -4151,6 +5030,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]);
@@ -4287,6 +5171,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();
@@ -4311,6 +5213,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;
@@ -4367,6 +5306,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;
   }
 };
@@ -4424,7 +5368,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;
     }
@@ -4442,7 +5386,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();
@@ -4523,17 +5467,20 @@ var NoteTool = class {
   backgroundColor;
   textColor;
   size;
+  fontSize;
   optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.backgroundColor = options.backgroundColor ?? "#ffeb3b";
     this.textColor = options.textColor ?? "#000000";
     this.size = options.size ?? { w: 200, h: 100 };
+    this.fontSize = options.fontSize ?? DEFAULT_NOTE_FONT_SIZE;
   }
   getOptions() {
     return {
       backgroundColor: this.backgroundColor,
       textColor: this.textColor,
-      size: { ...this.size }
+      size: { ...this.size },
+      fontSize: this.fontSize
     };
   }
   onOptionsChange(listener) {
@@ -4544,6 +5491,7 @@ var NoteTool = class {
     if (options.backgroundColor !== void 0) this.backgroundColor = options.backgroundColor;
     if (options.textColor !== void 0) this.textColor = options.textColor;
     if (options.size !== void 0) this.size = options.size;
+    if (options.fontSize !== void 0) this.fontSize = options.fontSize;
     this.notifyOptionsChange();
   }
   notifyOptionsChange() {
@@ -4555,14 +5503,13 @@ 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 },
       backgroundColor: this.backgroundColor,
       textColor: this.textColor,
+      fontSize: this.fontSize,
       layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(note);
@@ -4612,9 +5559,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,
@@ -4647,8 +5592,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
     });
@@ -4785,7 +5734,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;
@@ -4795,6 +5744,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) {
@@ -4836,7 +6177,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.11";
+var VERSION = "0.10.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -4845,6 +6186,8 @@ export {
   BatchCommand,
   Camera,
   CreateLayerCommand,
+  DEFAULT_FONT_SIZE_PRESETS,
+  DEFAULT_NOTE_FONT_SIZE,
   ElementRenderer,
   ElementStore,
   EraserTool,
@@ -4855,14 +6198,17 @@ export {
   ImageTool,
   InputHandler,
   LayerManager,
+  MeasureTool,
   NoteEditor,
   NoteTool,
+  NoteToolbar,
   PencilTool,
   Quadtree,
   RemoveElementCommand,
   RemoveLayerCommand,
   SelectTool,
   ShapeTool,
+  TemplateTool,
   TextTool,
   ToolManager,
   UpdateElementCommand,
@@ -4879,11 +6225,14 @@ export {
   createNote,
   createShape,
   createStroke,
+  createTemplate,
   createText,
+  drawHexPath,
   exportImage,
   exportState,
   findBindTarget,
   findBoundArrows,
+  getActiveFormats,
   getArrowBounds,
   getArrowControlPoint,
   getArrowMidpoint,
@@ -4892,10 +6241,23 @@ export {
   getEdgeIntersection,
   getElementBounds,
   getElementCenter,
+  getHexCellsInCone,
+  getHexCellsInLine,
+  getHexCellsInRadius,
+  getHexCellsInSquare,
+  getHexDistance,
   isBindable,
   isNearBezier,
   parseState,
+  sanitizeNoteHtml,
+  setFontSize,
+  smartSnap,
   snapPoint,
+  snapToHexCenter,
+  toggleBold,
+  toggleItalic,
+  toggleStrikethrough,
+  toggleUnderline,
   unbindArrow,
   updateBoundArrow
 };