@fieldnotes/core 0.38.7 → 0.39.0

package/dist/index.cjs

@@ -52,6 +52,7 @@ __export(index_exports, {
   createText: () => createText,
   drawHexPath: () => drawHexPath,
   exportImage: () => exportImage,
+  exportSvg: () => exportSvg,
   getActiveFormats: () => getActiveFormats,
   getArrowBounds: () => getArrowBounds,
   getArrowControlPoint: () => getArrowControlPoint,
@@ -1165,7 +1166,6 @@ var DEFAULT_BINDINGS = [
   ["redo", ["mod+y", "mod+shift+z"]],
   ["select-all", ["mod+a"]],
   ["copy", ["mod+c"]],
-  ["paste", ["mod+v"]],
   ["duplicate", ["mod+d"]],
   ["z-forward", ["]"]],
   ["z-backward", ["["]],
@@ -1340,6 +1340,7 @@ var KeyboardHandler = class {
     this.shortcutMap = new ShortcutMap(deps.shortcuts?.bindings);
     window.addEventListener("keydown", this.onKeyDown, { signal: deps.abortSignal });
     window.addEventListener("keyup", this.onKeyUp, { signal: deps.abortSignal });
+    window.addEventListener("paste", this.onPaste, { signal: deps.abortSignal });
   }
   shortcutMap;
   get shortcuts() {
@@ -1355,12 +1356,15 @@ var KeyboardHandler = class {
   zoomToLevel(level) {
     this.deps.camera.zoomAt(level, this.viewportCenter());
   }
+  shouldHandle(target) {
+    const el = target;
+    if (el?.isContentEditable) return false;
+    const tag = el?.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return false;
+    return this.isInScope();
+  }
   onKeyDown = (e) => {
-    const target = e.target;
-    if (target?.isContentEditable) return;
-    const tag = target?.tagName;
-    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
-    if (!this.isInScope()) return;
+    if (!this.shouldHandle(e.target)) return;
     if (e.key === " ") {
       this.deps.setSpaceHeld(true);
     }
@@ -1382,6 +1386,34 @@ var KeyboardHandler = class {
       }
     }
   };
+  onPaste = (e) => {
+    if (!this.shouldHandle(e.target)) return;
+    const items = e.clipboardData?.items;
+    let file = null;
+    if (items) {
+      for (const it of items) {
+        if (it.kind === "file" && it.type.startsWith("image/")) {
+          file = it.getAsFile();
+          break;
+        }
+      }
+    }
+    if (file) {
+      e.preventDefault();
+      const world = this.deps.getLastPointerWorld() ?? this.deps.getCenteredWorld();
+      if (this.deps.onPaste) {
+        this.deps.onPaste(e, world);
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (typeof reader.result === "string") this.deps.addImage(reader.result, world);
+      };
+      reader.readAsDataURL(file);
+      return;
+    }
+    this.deps.actions.paste();
+  };
   runAction(action, e) {
     switch (action) {
       case "delete":
@@ -1530,7 +1562,11 @@ var InputHandler = class {
         this.spaceHeld = v;
       },
       getActivePointerCount: () => this.activePointers.size,
-      dispatchToolHover: (e) => this.dispatchToolHover(e)
+      dispatchToolHover: (e) => this.dispatchToolHover(e),
+      addImage: options.addImage ?? (() => ""),
+      getLastPointerWorld: () => this.lastPointerWorld(),
+      getCenteredWorld: options.getCenteredWorld ?? (() => ({ x: 0, y: 0 })),
+      onPaste: options.onPaste
     });
     this.element.style.touchAction = "none";
     if (this.scope === "focus") {
@@ -2190,12 +2226,12 @@ function smoothToSegments(points) {
     return [{ start: p0, cp1: { x: mx, y: my }, cp2: { x: mx, y: my }, end: p1 }];
   }
   const segments = [];
-  const n = points.length;
-  for (let i = 0; i < n - 1; i++) {
+  const n2 = points.length;
+  for (let i = 0; i < n2 - 1; i++) {
     const p0 = points[Math.max(0, i - 1)];
     const p1 = points[i];
     const p2 = points[i + 1];
-    const p3 = points[Math.min(n - 1, i + 2)];
+    const p3 = points[Math.min(n2 - 1, i + 2)];
     if (!p0 || !p1 || !p2 || !p3) continue;
     const cp1 = {
       x: p1.x + (p2.x - p0.x) / 6,
@@ -2885,11 +2921,11 @@ function pixelToOffset(x, y, cellSize, orientation) {
   const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
   return { col, row: Math.round((y - offsetY) / hexH) };
 }
-function enumerateHexRing(centerQ, centerR, n, orientation, cellSize) {
+function enumerateHexRing(centerQ, centerR, n2, 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 dq = -n2; dq <= n2; dq++) {
+    const rMin = Math.max(-n2, -dq - n2);
+    const rMax = Math.min(n2, -dq + n2);
     for (let dr = rMin; dr <= rMax; dr++) {
       const absQ = centerQ + dq;
       const absR = centerR + dr;
@@ -2910,28 +2946,28 @@ function getHexDistance(a, b, cellSize, orientation) {
   return Math.max(Math.abs(dq), Math.abs(dr), Math.abs(ds));
 }
 function getHexCellsInRadius(center2, radiusCells, cellSize, orientation) {
-  const n = Math.round(radiusCells);
+  const n2 = Math.round(radiusCells);
   const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
   const cube = offsetToCube(off.col, off.row, orientation);
-  if (n <= 0) {
+  if (n2 <= 0) {
     return [offsetToPixel(off.col, off.row, cellSize, orientation)];
   }
-  return enumerateHexRing(cube.q, cube.r, n, orientation, cellSize);
+  return enumerateHexRing(cube.q, cube.r, n2, orientation, cellSize);
 }
 function getHexCellsInCone(center2, angle, radiusCells, cellSize, orientation) {
-  const n = Math.round(radiusCells);
+  const n2 = Math.round(radiusCells);
   const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
   const cube = offsetToCube(off.col, off.row, orientation);
   const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
-  if (n <= 0) return [centerPixel];
+  if (n2 <= 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 dq = -n2; dq <= n2; dq++) {
+    const rMin = Math.max(-n2, -dq - n2);
+    const rMax = Math.min(n2, -dq + n2);
     for (let dr = rMin; dr <= rMax; dr++) {
       if (dq === 0 && dr === 0) continue;
       const absQ = cube.q + dq;
@@ -2955,23 +2991,23 @@ function getHexCellsInCone(center2, angle, radiusCells, cellSize, orientation) {
   return cells;
 }
 function getHexCellsInLine(center2, angle, radiusCells, cellSize, orientation) {
-  const n = Math.round(radiusCells);
+  const n2 = Math.round(radiusCells);
   const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
   const cube = offsetToCube(off.col, off.row, orientation);
   const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
-  if (n <= 0) return [centerPixel];
+  if (n2 <= 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 lineLength = n2 * 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 dq = -n2; dq <= n2; dq++) {
+    const rMin = Math.max(-n2, -dq - n2);
+    const rMax = Math.min(n2, -dq + n2);
     for (let dr = rMin; dr <= rMax; dr++) {
       const absQ = cube.q + dq;
       const absR = cube.r + dr;
@@ -2993,17 +3029,17 @@ function getHexCellsInLine(center2, angle, radiusCells, cellSize, orientation) {
   return cells;
 }
 function getHexCellsInSquare(center2, radiusCells, cellSize, orientation) {
-  const n = Math.round(radiusCells);
+  const n2 = Math.round(radiusCells);
   const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
   const cube = offsetToCube(off.col, off.row, orientation);
   const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
-  if (n <= 0) return [centerPixel];
+  if (n2 <= 0) return [centerPixel];
   const snapUnit = Math.sqrt(3) * cellSize;
-  const halfSide = n * snapUnit / 2;
+  const halfSide = n2 * 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 dq = -n2; dq <= n2; dq++) {
+    const rMin = Math.max(-n2, -dq - n2);
+    const rMax = Math.min(n2, -dq + n2);
     for (let dr = rMin; dr <= rMax; dr++) {
       const absQ = cube.q + dq;
       const absR = cube.r + dr;
@@ -3190,6 +3226,58 @@ function getSquareGridLines(bounds, cellSize) {
   }
   return { verticals, horizontals };
 }
+function getHexVertices(cx, cy, circumradius, orientation) {
+  const vertices = [];
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  for (let i = 0; i < 6; i++) {
+    const angle = Math.PI / 3 * i + angleOffset;
+    vertices.push({
+      x: cx + circumradius * Math.cos(angle),
+      y: cy + circumradius * Math.sin(angle)
+    });
+  }
+  return vertices;
+}
+function getHexCenters(bounds, circumradius, orientation) {
+  if (circumradius <= 0) return [];
+  const centers = [];
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * circumradius;
+    const hexH = 2 * circumradius;
+    const rowH = hexH * 0.75;
+    const startRow = Math.floor((bounds.minY - circumradius) / rowH);
+    const endRow = Math.ceil((bounds.maxY + circumradius) / rowH);
+    const startCol = Math.floor((bounds.minX - hexW) / hexW);
+    const endCol = Math.ceil((bounds.maxX + hexW) / hexW);
+    for (let row = startRow; row <= endRow; row++) {
+      const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = startCol; col <= endCol; col++) {
+        centers.push({
+          x: col * hexW + offsetX,
+          y: row * rowH
+        });
+      }
+    }
+  } else {
+    const hexW = 2 * circumradius;
+    const hexH = Math.sqrt(3) * circumradius;
+    const colW = hexW * 0.75;
+    const startCol = Math.floor((bounds.minX - circumradius) / colW);
+    const endCol = Math.ceil((bounds.maxX + circumradius) / colW);
+    const startRow = Math.floor((bounds.minY - hexH) / hexH);
+    const endRow = Math.ceil((bounds.maxY + hexH) / hexH);
+    for (let col = startCol; col <= endCol; col++) {
+      const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = startRow; row <= endRow; row++) {
+        centers.push({
+          x: col * colW,
+          y: row * hexH + offsetY
+        });
+      }
+    }
+  }
+  return centers;
+}
 function renderSquareGrid(ctx, bounds, cellSize, strokeColor, strokeWidth, opacity) {
   if (cellSize <= 0) return;
   const { verticals, horizontals } = getSquareGridLines(bounds, cellSize);
@@ -3588,6 +3676,8 @@ function createHtmlElement(input) {
   };
   if (input.domId) el.domId = input.domId;
   if (input.interactive) el.interactive = input.interactive;
+  if (input.htmlType) el.htmlType = input.htmlType;
+  if (input.data) el.data = input.data;
   return el;
 }
 function createShape(input) {
@@ -4868,6 +4958,350 @@ async function exportImage(store, options = {}, layerManager) {
   });
 }
 
+// src/canvas/export-svg.ts
+var ARROWHEAD_LENGTH2 = 12;
+var ARROWHEAD_ANGLE2 = Math.PI / 6;
+var ARROW_LABEL_FONT_SIZE2 = 14;
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+var n = (v) => Number.isFinite(v) ? `${Math.round(v * 1e3) / 1e3}` : "0";
+function elementCenter(el) {
+  const b = getElementBounds(el);
+  if (!b) return null;
+  return { x: b.x + b.w / 2, y: b.y + b.h / 2 };
+}
+function withRotationSvg(el, fragment) {
+  const angle = el.rotation ?? 0;
+  if (!angle || !fragment) return fragment;
+  const c = elementCenter(el);
+  if (!c) return fragment;
+  const deg = angle * 180 / Math.PI;
+  return `<g transform="rotate(${n(deg)} ${n(c.x)} ${n(c.y)})">${fragment}</g>`;
+}
+var WIDTH_QUANTUM2 = 0.25;
+function emitStroke(stroke) {
+  if (stroke.points.length < 2) return "";
+  const data = getStrokeRenderData(stroke);
+  const { x: ox, y: oy } = stroke.position;
+  const byWidth = /* @__PURE__ */ new Map();
+  for (let i = 0; i < data.segments.length; i++) {
+    const seg = data.segments[i];
+    const w = data.widths[i];
+    if (!seg || w === void 0) continue;
+    const q = Math.max(WIDTH_QUANTUM2, Math.round(w / WIDTH_QUANTUM2) * WIDTH_QUANTUM2);
+    let parts = byWidth.get(q);
+    if (!parts) {
+      parts = [];
+      byWidth.set(q, parts);
+    }
+    parts.push(
+      `M${n(ox + seg.start.x)} ${n(oy + seg.start.y)} C${n(ox + seg.cp1.x)} ${n(oy + seg.cp1.y)} ${n(ox + seg.cp2.x)} ${n(oy + seg.cp2.y)} ${n(ox + seg.end.x)} ${n(oy + seg.end.y)}`
+    );
+  }
+  const blend = stroke.blendMode === "multiply" ? ' style="mix-blend-mode:multiply"' : "";
+  let out = "";
+  for (const [width, parts] of byWidth) {
+    out += `<path d="${parts.join(" ")}" fill="none" stroke="${esc(stroke.color)}" stroke-width="${n(width)}" stroke-linecap="round" stroke-linejoin="round" opacity="${n(stroke.opacity)}"${blend} />`;
+  }
+  return out;
+}
+function emitShape(shape) {
+  const { x, y } = shape.position;
+  const { w, h } = shape.size;
+  const fill = shape.fillColor !== "none" && shape.shape !== "line" ? esc(shape.fillColor) : "none";
+  const stroke = shape.strokeWidth > 0 ? esc(shape.strokeColor) : "none";
+  const sw = shape.strokeWidth > 0 ? ` stroke-width="${n(shape.strokeWidth)}"` : "";
+  switch (shape.shape) {
+    case "rectangle":
+      return `<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" fill="${fill}" stroke="${stroke}"${sw} />`;
+    case "ellipse":
+      return `<ellipse cx="${n(x + w / 2)}" cy="${n(y + h / 2)}" rx="${n(w / 2)}" ry="${n(h / 2)}" fill="${fill}" stroke="${stroke}"${sw} />`;
+    case "line": {
+      const [a, b] = lineEndpoints(shape);
+      return `<line x1="${n(a.x)}" y1="${n(a.y)}" x2="${n(b.x)}" y2="${n(b.y)}" stroke="${stroke}"${sw} stroke-linecap="round" />`;
+    }
+  }
+}
+function emitArrow(arrow, store) {
+  const geometry = getArrowRenderGeometry(arrow);
+  const { visualFrom: from, visualTo: to } = getVisualEndpoints(arrow, geometry, store);
+  let d;
+  if (arrow.bend !== 0) {
+    const cp = geometry.controlPoint ?? getArrowControlPoint(from, to, arrow.bend);
+    d = `M${n(from.x)} ${n(from.y)} Q${n(cp.x)} ${n(cp.y)} ${n(to.x)} ${n(to.y)}`;
+  } else {
+    d = `M${n(from.x)} ${n(from.y)} L${n(to.x)} ${n(to.y)}`;
+  }
+  const dash = arrow.fromBinding || arrow.toBinding ? ' stroke-dasharray="8 4"' : "";
+  let out = `<path d="${d}" fill="none" stroke="${esc(arrow.color)}" stroke-width="${n(arrow.width)}" stroke-linecap="round"${dash} />`;
+  const angle = geometry.tangentEnd;
+  const p1x = to.x - ARROWHEAD_LENGTH2 * Math.cos(angle - ARROWHEAD_ANGLE2);
+  const p1y = to.y - ARROWHEAD_LENGTH2 * Math.sin(angle - ARROWHEAD_ANGLE2);
+  const p2x = to.x - ARROWHEAD_LENGTH2 * Math.cos(angle + ARROWHEAD_ANGLE2);
+  const p2y = to.y - ARROWHEAD_LENGTH2 * Math.sin(angle + ARROWHEAD_ANGLE2);
+  out += `<polygon points="${n(to.x)},${n(to.y)} ${n(p1x)},${n(p1y)} ${n(p2x)},${n(p2y)}" fill="${esc(arrow.color)}" />`;
+  if (arrow.label && arrow.label.length > 0) {
+    const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+    const approxW = arrow.label.length * ARROW_LABEL_FONT_SIZE2 * 0.6;
+    const padX = 6;
+    const padY = 4;
+    const lw = approxW + padX * 2;
+    const lh = ARROW_LABEL_FONT_SIZE2 + padY * 2;
+    out += `<rect x="${n(mid.x - lw / 2)}" y="${n(mid.y - lh / 2)}" width="${n(lw)}" height="${n(lh)}" rx="4" fill="rgba(255,255,255,0.9)" />`;
+    out += `<text x="${n(mid.x)}" y="${n(mid.y)}" font-family="system-ui, sans-serif" font-size="${ARROW_LABEL_FONT_SIZE2}" fill="#1a1a1a" text-anchor="middle" dominant-baseline="central">${esc(arrow.label)}</text>`;
+  }
+  return out;
+}
+function emitImage(image, dataUri) {
+  const href = dataUri ?? image.src;
+  if (!href) return "";
+  const { x, y } = image.position;
+  const { w, h } = image.size;
+  return `<image href="${esc(href)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
+}
+function emitText(text) {
+  if (!text.text) return "";
+  const pad = 2;
+  let anchor = "start";
+  let textX = text.position.x + pad;
+  if (text.textAlign === "center") {
+    anchor = "middle";
+    textX = text.position.x + text.size.w / 2;
+  } else if (text.textAlign === "right") {
+    anchor = "end";
+    textX = text.position.x + text.size.w - pad;
+  }
+  const lineHeight = text.fontSize * 1.4;
+  const lines = text.text.split("\n");
+  let out = "";
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line === void 0) continue;
+    const y = text.position.y + pad + i * lineHeight;
+    out += `<text x="${n(textX)}" y="${n(y)}" font-family="system-ui, sans-serif" font-size="${n(text.fontSize)}" fill="${esc(text.color)}" text-anchor="${anchor}" dominant-baseline="text-before-edge">${esc(line)}</text>`;
+  }
+  return out;
+}
+function emitNote(note, rasterScale) {
+  const { x, y } = note.position;
+  const { w, h } = note.size;
+  if (typeof document === "undefined") return emitNotePlaceholder(note);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(w * rasterScale));
+  canvas.height = Math.max(1, Math.ceil(h * rasterScale));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return emitNotePlaceholder(note);
+  ctx.scale(rasterScale, rasterScale);
+  ctx.translate(-x, -y);
+  renderNoteOnCanvas(ctx, note);
+  let dataUri;
+  try {
+    dataUri = canvas.toDataURL();
+  } catch {
+    return emitNotePlaceholder(note);
+  }
+  if (!dataUri || !dataUri.startsWith("data:")) return emitNotePlaceholder(note);
+  return `<image href="${esc(dataUri)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
+}
+function emitNotePlaceholder(note) {
+  const { x, y } = note.position;
+  const { w, h } = note.size;
+  return `<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" rx="4" fill="${esc(note.backgroundColor)}" />`;
+}
+function emitGrid(grid, bounds) {
+  if (grid.cellSize <= 0) return "";
+  const vb = {
+    minX: bounds.x,
+    minY: bounds.y,
+    maxX: bounds.x + bounds.w,
+    maxY: bounds.y + bounds.h
+  };
+  const stroke = esc(grid.strokeColor);
+  const sw = n(grid.strokeWidth);
+  const op = n(grid.opacity);
+  if (grid.gridType === "hex") {
+    const centers = getHexCenters(vb, grid.cellSize, grid.hexOrientation);
+    let d2 = "";
+    for (const c of centers) {
+      const verts = getHexVertices(c.x, c.y, grid.cellSize, grid.hexOrientation);
+      const first = verts[0];
+      if (!first) continue;
+      d2 += `M${n(first.x)} ${n(first.y)}`;
+      for (let i = 1; i < verts.length; i++) {
+        const v = verts[i];
+        if (v) d2 += `L${n(v.x)} ${n(v.y)}`;
+      }
+      d2 += "Z";
+    }
+    return `<path d="${d2}" fill="none" stroke="${stroke}" stroke-width="${sw}" opacity="${op}" />`;
+  }
+  const { verticals, horizontals } = getSquareGridLines(vb, grid.cellSize);
+  let d = "";
+  for (const gx of verticals) d += `M${n(gx)} ${n(vb.minY)}L${n(gx)} ${n(vb.maxY)}`;
+  for (const gy of horizontals) d += `M${n(vb.minX)} ${n(gy)}L${n(vb.maxX)} ${n(gy)}`;
+  return `<path d="${d}" fill="none" stroke="${stroke}" stroke-width="${sw}" opacity="${op}" />`;
+}
+function emitTemplate(template, grid) {
+  if (grid && grid.gridType === "hex") {
+    return emitHexTemplate(template, grid);
+  }
+  return emitGeometricTemplate(template);
+}
+function emitGeometricTemplate(t) {
+  const { x: cx, y: cy } = t.position;
+  const r = t.radius;
+  const fill = esc(t.fillColor);
+  const stroke = esc(t.strokeColor);
+  const sw = n(t.strokeWidth);
+  const op = n(t.opacity);
+  const attrs = `fill="${fill}" stroke="${stroke}" stroke-width="${sw}" opacity="${op}"`;
+  switch (t.templateShape) {
+    case "circle":
+      return `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(r)}" ${attrs} />`;
+    case "square":
+      return `<rect x="${n(cx - r / 2)}" y="${n(cy - r / 2)}" width="${n(r)}" height="${n(r)}" ${attrs} />`;
+    case "cone": {
+      const halfAngle = Math.atan(0.5);
+      const a0 = t.angle - halfAngle;
+      const a1 = t.angle + halfAngle;
+      const p0x = cx + r * Math.cos(a0);
+      const p0y = cy + r * Math.sin(a0);
+      const p1x = cx + r * Math.cos(a1);
+      const p1y = cy + r * Math.sin(a1);
+      const large = a1 - a0 > Math.PI ? 1 : 0;
+      return `<path d="M${n(cx)} ${n(cy)} L${n(p0x)} ${n(p0y)} A${n(r)} ${n(r)} 0 ${large} 1 ${n(p1x)} ${n(p1y)} Z" ${attrs} />`;
+    }
+    case "line": {
+      const halfW = r / 12;
+      const cos = Math.cos(t.angle);
+      const sin = Math.sin(t.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      const pts = [
+        [cx + perpX, cy + perpY],
+        [cx + r * cos + perpX, cy + r * sin + perpY],
+        [cx + r * cos - perpX, cy + r * sin - perpY],
+        [cx - perpX, cy - perpY]
+      ].map(([px, py]) => `${n(px ?? 0)},${n(py ?? 0)}`).join(" ");
+      return `<polygon points="${pts}" ${attrs} />`;
+    }
+  }
+}
+function emitHexTemplate(t, grid) {
+  const cellSize = grid.cellSize;
+  const orientation = grid.hexOrientation;
+  const snapUnit = Math.sqrt(3) * cellSize;
+  const radiusCells = t.radius / snapUnit;
+  const center2 = t.position;
+  let cells;
+  switch (t.templateShape) {
+    case "circle":
+      cells = getHexCellsInRadius(center2, radiusCells, cellSize, orientation);
+      break;
+    case "cone":
+      cells = getHexCellsInCone(center2, t.angle, radiusCells, cellSize, orientation);
+      break;
+    case "line":
+      cells = getHexCellsInLine(center2, t.angle, radiusCells, cellSize, orientation);
+      break;
+    case "square":
+      cells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
+      break;
+  }
+  let d = "";
+  for (const cell of cells) {
+    const verts = getHexVertices(cell.x, cell.y, cellSize, orientation);
+    const first = verts[0];
+    if (!first) continue;
+    d += `M${n(first.x)} ${n(first.y)}`;
+    for (let i = 1; i < verts.length; i++) {
+      const v = verts[i];
+      if (v) d += `L${n(v.x)} ${n(v.y)}`;
+    }
+    d += "Z";
+  }
+  return `<path d="${d}" fill="${esc(t.fillColor)}" stroke="${esc(t.strokeColor)}" stroke-width="${n(t.strokeWidth)}" opacity="${n(t.opacity)}" />`;
+}
+async function exportSvg(store, options = {}, layerManager) {
+  const padding = options.padding ?? 0;
+  const rasterScale = options.rasterScale ?? 2;
+  const filter = options.filter;
+  const allElements = store.getAll();
+  let visibleElements = layerManager ? allElements.filter((el) => layerManager.isLayerVisible(el.layerId)) : allElements;
+  if (filter) visibleElements = visibleElements.filter(filter);
+  const bounds = computeBounds(visibleElements, padding);
+  if (!bounds) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+  }
+  const remoteImages = visibleElements.filter(
+    (el) => el.type === "image" && !el.src.startsWith("data:")
+  );
+  const imageCache = await loadImages(remoteImages);
+  const imageDataUris = encodeImages(visibleElements, imageCache, rasterScale);
+  const grids = visibleElements.filter((el) => el.type === "grid");
+  const firstGrid = grids[0];
+  let body = "";
+  if (options.background) {
+    body += `<rect x="${n(bounds.x)}" y="${n(bounds.y)}" width="${n(bounds.w)}" height="${n(bounds.h)}" fill="${esc(options.background)}" />`;
+  }
+  for (const el of visibleElements) {
+    body += emitElement(el, imageDataUris, rasterScale, firstGrid, store);
+  }
+  for (const grid of grids) {
+    body += emitGrid(grid, bounds);
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${n(bounds.w)}" height="${n(bounds.h)}" viewBox="${n(bounds.x)} ${n(bounds.y)} ${n(bounds.w)} ${n(bounds.h)}">${body}</svg>`;
+}
+function emitElement(el, imageDataUris, rasterScale, firstGrid, store) {
+  switch (el.type) {
+    case "stroke":
+      return withRotationSvg(el, emitStroke(el));
+    case "shape":
+      return withRotationSvg(el, emitShape(el));
+    case "arrow":
+      return emitArrow(el, store);
+    case "image":
+      return withRotationSvg(el, emitImage(el, imageDataUris.get(el.id)));
+    case "text":
+      return withRotationSvg(el, emitText(el));
+    case "note":
+      return withRotationSvg(el, emitNote(el, rasterScale));
+    case "template":
+      return emitTemplate(el, firstGrid);
+    case "grid":
+      return "";
+    case "html":
+      return "";
+    default:
+      return "";
+  }
+}
+function encodeImages(elements, imageCache, rasterScale) {
+  const out = /* @__PURE__ */ new Map();
+  for (const el of elements) {
+    if (el.type !== "image") continue;
+    if (el.src.startsWith("data:")) {
+      out.set(el.id, el.src);
+      continue;
+    }
+    const img = imageCache.get(el.id);
+    if (!img || typeof document === "undefined") continue;
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.ceil(el.size.w * rasterScale));
+    canvas.height = Math.max(1, Math.ceil(el.size.h * rasterScale));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) continue;
+    try {
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      const uri = canvas.toDataURL();
+      if (uri.startsWith("data:")) out.set(el.id, uri);
+    } catch {
+    }
+  }
+  return out;
+}
+
 // src/layers/layer-manager.ts
 var LayerManager = class {
   constructor(store) {
@@ -6028,13 +6462,13 @@ var SelectionOps = class {
     if (!first || !last) return;
     const c0 = center2(first.bounds);
     const cN = center2(last.bounds);
-    const n = sorted.length;
+    const n2 = sorted.length;
     this.deps.recorder.begin();
     const moved = [];
-    for (let i = 1; i < n - 1; i++) {
+    for (let i = 1; i < n2 - 1; i++) {
       const item = sorted[i];
       if (!item || !this.isMovable(item.el)) continue;
-      const target = c0 + i * (cN - c0) / (n - 1);
+      const target = c0 + i * (cN - c0) / (n2 - 1);
       const delta = target - center2(item.bounds);
       if (delta === 0) continue;
       const [dx, dy] = axis === "horizontal" ? [delta, 0] : [0, delta];
@@ -6372,7 +6806,10 @@ var Viewport = class {
         this.getSelectTool()?.selectAtPoint(world, this.toolContext);
         this.openContextMenu(screenPos);
       },
-      shortcuts: options.shortcuts
+      shortcuts: options.shortcuts,
+      addImage: (src, world) => this.addImage(src, world),
+      getCenteredWorld: () => this.centeredPosition({ w: 300, h: 200 }),
+      onPaste: options.onPaste
     });
     if (options.contextMenu !== false) {
       this.contextMenu = new ContextMenu({
@@ -6512,6 +6949,7 @@ var Viewport = class {
   gridController;
   interactions;
   contextMenu = null;
+  htmlRenderers = /* @__PURE__ */ new Map();
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -6553,6 +6991,9 @@ var Viewport = class {
   async exportImage(options) {
     return exportImage(this.store, options, this.layerManager);
   }
+  async exportSVG(options) {
+    return exportSvg(this.store, options, this.layerManager);
+  }
   loadState(state) {
     this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
@@ -6566,19 +7007,24 @@ var Viewport = class {
       this.layerManager.setActiveLayer(state.activeLayerId);
     }
     this.domNodeManager.reattachHtmlContent(this.store);
-    if (this.onHtmlElementMount) {
-      for (const el of this.store.getElementsByType("html")) {
-        if (!this.domNodeManager.hasContent(el.id)) {
-          this.domNodeManager.syncDomNode(el);
-          const node = this.domNodeManager.getNode(el.id);
-          if (node) {
-            this.onHtmlElementMount(el.id, el.domId, node);
-            node.dataset["initialized"] = "true";
-            Object.assign(node.style, {
-              overflow: "hidden",
-              pointerEvents: el.interactive ? "auto" : "none"
-            });
-          }
+    for (const el of this.store.getElementsByType("html")) {
+      if (this.domNodeManager.hasContent(el.id)) continue;
+      const factory = el.htmlType ? this.htmlRenderers.get(el.htmlType) : void 0;
+      const rebuilt = factory ? factory(el) : null;
+      if (rebuilt) {
+        this.domNodeManager.storeHtmlContent(el.id, rebuilt);
+        this.domNodeManager.syncDomNode(el);
+      }
+      if (this.onHtmlElementMount) {
+        if (!rebuilt) this.domNodeManager.syncDomNode(el);
+        const node = this.domNodeManager.getNode(el.id);
+        if (node) {
+          this.onHtmlElementMount(el.id, el.domId, node);
+          node.dataset["initialized"] = "true";
+          Object.assign(node.style, {
+            overflow: "hidden",
+            pointerEvents: el.interactive ? "auto" : "none"
+          });
         }
       }
     }
@@ -6624,12 +7070,14 @@ var Viewport = class {
     this.requestRender();
     return image.id;
   }
-  addHtmlElement(dom, position, size = { w: 200, h: 150 }) {
+  addHtmlElement(dom, position, size = { w: 200, h: 150 }, opts) {
     const domId = dom.id || void 0;
     const el = createHtmlElement({
       position,
       size,
       domId,
+      htmlType: opts?.htmlType,
+      data: opts?.data,
       layerId: this.layerManager.activeLayerId
     });
     this.domNodeManager.storeHtmlContent(el.id, dom);
@@ -6670,6 +7118,9 @@ var Viewport = class {
     this.layerManager.removeLayer(id);
     this.historyRecorder.commit();
   }
+  registerHtmlRenderer(htmlType, factory) {
+    this.htmlRenderers.set(htmlType, factory);
+  }
   updateHtmlElement(id, newContent) {
     const el = this.store.getById(id);
     if (!el) throw new Error(`Element not found: ${id}`);
@@ -9142,7 +9593,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.38.7";
+var VERSION = "0.39.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
@@ -9177,6 +9628,7 @@ var VERSION = "0.38.7";
   createText,
   drawHexPath,
   exportImage,
+  exportSvg,
   getActiveFormats,
   getArrowBounds,
   getArrowControlPoint,