canvu-react 0.3.5

package/dist/index.js

@@ -0,0 +1,1867 @@
+import getStroke from 'perfect-freehand';
+
+// src/math/rect.ts
+function rectsIntersect(a, b) {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+function normalizeRect(r) {
+  const x0 = r.width >= 0 ? r.x : r.x + r.width;
+  const y0 = r.height >= 0 ? r.y : r.y + r.height;
+  return {
+    x: x0,
+    y: y0,
+    width: Math.abs(r.width),
+    height: Math.abs(r.height)
+  };
+}
+
+// src/camera/camera.ts
+var Camera2D = class {
+  x = 0;
+  y = 0;
+  /** Scale: world units per CSS pixel (larger = more zoomed in). */
+  zoom = 1;
+  minZoom;
+  maxZoom;
+  constructor(options = {}) {
+    this.minZoom = options.minZoom ?? 0.05;
+    this.maxZoom = options.maxZoom ?? 32;
+  }
+  /**
+   * Converts a point from world coordinates to CSS pixel coordinates relative to the viewport top-left.
+   */
+  worldToScreen(worldX, worldY) {
+    return {
+      screenX: worldX * this.zoom + this.x,
+      screenY: worldY * this.zoom + this.y
+    };
+  }
+  /**
+   * Converts a point from CSS pixel coordinates (viewport-relative) to world coordinates.
+   */
+  screenToWorld(screenX, screenY) {
+    const z = this.zoom;
+    if (z === 0) {
+      return { worldX: 0, worldY: 0 };
+    }
+    return {
+      worldX: (screenX - this.x) / z,
+      worldY: (screenY - this.y) / z
+    };
+  }
+  /**
+   * Sets zoom, clamped to `[minZoom, maxZoom]`, optionally anchoring a screen point so it stays under the cursor.
+   */
+  setZoom(nextZoom, anchorScreen) {
+    const clamped = Math.min(this.maxZoom, Math.max(this.minZoom, nextZoom));
+    if (!anchorScreen) {
+      this.zoom = clamped;
+      return;
+    }
+    const anchorWorld = this.screenToWorld(anchorScreen.x, anchorScreen.y);
+    this.zoom = clamped;
+    this.x = anchorScreen.x - anchorWorld.worldX * this.zoom;
+    this.y = anchorScreen.y - anchorWorld.worldY * this.zoom;
+  }
+  /**
+   * Returns the world-space rectangle visible in a viewport of `viewportWidth` x `viewportHeight` CSS pixels.
+   */
+  getVisibleWorldRect(viewportWidth, viewportHeight) {
+    const topLeft = this.screenToWorld(0, 0);
+    const bottomRight = this.screenToWorld(viewportWidth, viewportHeight);
+    return normalizeRect({
+      x: topLeft.worldX,
+      y: topLeft.worldY,
+      width: bottomRight.worldX - topLeft.worldX,
+      height: bottomRight.worldY - topLeft.worldY
+    });
+  }
+};
+
+// src/image/raster-image.ts
+var MAX_RASTER_EMBED_DIMENSION = 4096;
+function normalizeLoadOptions(maxDimensionOrOptions) {
+  if (typeof maxDimensionOrOptions === "number") {
+    return {
+      maxDimension: maxDimensionOrOptions,
+      embedMode: "dataUrl"
+    };
+  }
+  return {
+    maxDimension: maxDimensionOrOptions?.maxDimension ?? MAX_RASTER_EMBED_DIMENSION,
+    embedMode: maxDimensionOrOptions?.embedMode ?? "dataUrl"
+  };
+}
+function loadImageFromObjectUrl(objectUrl) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Could not decode image"));
+    img.decoding = "async";
+    img.src = objectUrl;
+  });
+}
+function canvasToObjectUrl(canvas, mime, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Could not encode image blob"));
+          return;
+        }
+        resolve(URL.createObjectURL(blob));
+      },
+      mime,
+      quality
+    );
+  });
+}
+async function loadImageFileAsRasterSceneSource(file, maxDimensionOrOptions) {
+  const { maxDimension: maxDim, embedMode } = normalizeLoadOptions(maxDimensionOrOptions);
+  const fileObjectUrl = URL.createObjectURL(file);
+  let fileUrlReleased = false;
+  try {
+    const img = await loadImageFromObjectUrl(fileObjectUrl);
+    const w0 = img.naturalWidth;
+    const h0 = img.naturalHeight;
+    if (w0 < 1 || h0 < 1) {
+      throw new Error("Image has no dimensions");
+    }
+    const scale = Math.min(1, maxDim / Math.max(w0, h0));
+    const needsDownscale = scale < 1 - 1e-9;
+    if (embedMode === "blobUrl" && !needsDownscale) {
+      fileUrlReleased = true;
+      return { dataUrl: fileObjectUrl, width: w0, height: h0 };
+    }
+    URL.revokeObjectURL(fileObjectUrl);
+    fileUrlReleased = true;
+    const cw = needsDownscale ? Math.max(1, Math.round(w0 * scale)) : Math.max(1, w0);
+    const ch = needsDownscale ? Math.max(1, Math.round(h0 * scale)) : Math.max(1, h0);
+    const canvas = document.createElement("canvas");
+    canvas.width = cw;
+    canvas.height = ch;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Canvas 2D context unavailable");
+    }
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(img, 0, 0, cw, ch);
+    const isJpeg = file.type === "image/jpeg" || file.type === "image/jpg" || file.type === "image/pjpeg";
+    if (embedMode === "blobUrl") {
+      const mime = isJpeg ? "image/jpeg" : "image/png";
+      const blobHref = await canvasToObjectUrl(
+        canvas,
+        mime,
+        isJpeg ? 0.92 : void 0
+      );
+      return { dataUrl: blobHref, width: cw, height: ch };
+    }
+    const dataUrl = isJpeg ? canvas.toDataURL("image/jpeg", 0.92) : canvas.toDataURL("image/png");
+    return { dataUrl, width: cw, height: ch };
+  } catch (e) {
+    if (!fileUrlReleased) {
+      URL.revokeObjectURL(fileObjectUrl);
+    }
+    throw e;
+  }
+}
+
+// src/input/apple-pencil-navigation.ts
+var DRAWING_LIKE_TOOLS = /* @__PURE__ */ new Set([
+  "draw",
+  "marker",
+  "annotate",
+  "pen",
+  "highlight",
+  "rect",
+  "ellipse",
+  "line",
+  "arrow",
+  "text",
+  "image"
+]);
+function attachApplePencilNavigation(options) {
+  const {
+    element,
+    camera,
+    getCurrentToolId,
+    onUpdate,
+    touchPanSensitivity = 1.25
+  } = options;
+  let penDetected = false;
+  const activePenPointerIds = /* @__PURE__ */ new Set();
+  const blockedTouchPointerIds = /* @__PURE__ */ new Set();
+  const pointers = /* @__PURE__ */ new Map();
+  let mode = "idle";
+  let pinchStartDist = 0;
+  let pinchStartZoom = 1;
+  let panLast = null;
+  const shouldIntercept = (e) => {
+    if (e.pointerType !== "touch") return false;
+    const tool = getCurrentToolId();
+    if (tool === "hand") return true;
+    return penDetected && DRAWING_LIKE_TOOLS.has(tool);
+  };
+  const dist = (a, b) => Math.hypot(b.x - a.x, b.y - a.y);
+  const mid = (a, b) => ({
+    x: (a.x + b.x) / 2,
+    y: (a.y + b.y) / 2
+  });
+  const onPointerDown = (e) => {
+    if (e.pointerType === "pen") {
+      penDetected = true;
+      activePenPointerIds.add(e.pointerId);
+      pointers.clear();
+      mode = "idle";
+      panLast = null;
+      return;
+    }
+    if (e.pointerType === "touch" && activePenPointerIds.size > 0) {
+      blockedTouchPointerIds.add(e.pointerId);
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    if (!shouldIntercept(e)) return;
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointers.size === 1) {
+      mode = "pan";
+      panLast = { x: e.clientX, y: e.clientY };
+    } else if (pointers.size === 2) {
+      const vals = Array.from(pointers.values());
+      const a = vals[0];
+      const b = vals[1];
+      if (a === void 0 || b === void 0) return;
+      mode = "pinch";
+      pinchStartDist = dist(a, b);
+      pinchStartZoom = camera.zoom;
+      panLast = mid(a, b);
+    }
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  };
+  const onPointerMove = (e) => {
+    if (blockedTouchPointerIds.has(e.pointerId)) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    if (mode === "idle" || !pointers.has(e.pointerId)) return;
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (mode === "pan" && pointers.size === 1 && panLast) {
+      const dx = e.clientX - panLast.x;
+      const dy = e.clientY - panLast.y;
+      panLast = { x: e.clientX, y: e.clientY };
+      camera.x += dx * touchPanSensitivity;
+      camera.y += dy * touchPanSensitivity;
+      onUpdate();
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    if (mode === "pinch" && pointers.size === 2) {
+      const vals = Array.from(pointers.values());
+      const a = vals[0];
+      const b = vals[1];
+      if (a === void 0 || b === void 0) return;
+      const d = dist(a, b);
+      const m = mid(a, b);
+      const scale = d / Math.max(pinchStartDist, 1e-6);
+      const nextZoom = Math.min(
+        camera.maxZoom,
+        Math.max(camera.minZoom, pinchStartZoom * scale)
+      );
+      const rect = element.getBoundingClientRect();
+      camera.setZoom(nextZoom, {
+        x: m.x - rect.left,
+        y: m.y - rect.top
+      });
+      if (panLast) {
+        camera.x += m.x - panLast.x;
+        camera.y += m.y - panLast.y;
+        panLast = m;
+      }
+      onUpdate();
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+  };
+  const onPointerUp = (e) => {
+    if (e.pointerType === "pen") {
+      activePenPointerIds.delete(e.pointerId);
+      return;
+    }
+    if (blockedTouchPointerIds.has(e.pointerId)) {
+      blockedTouchPointerIds.delete(e.pointerId);
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    if (!pointers.has(e.pointerId)) return;
+    pointers.delete(e.pointerId);
+    if (pointers.size === 0) {
+      mode = "idle";
+      panLast = null;
+    } else if (pointers.size === 1 && mode === "pinch") {
+      mode = "pan";
+      const r = Array.from(pointers.values())[0];
+      panLast = r ?? null;
+    }
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  };
+  element.addEventListener("pointerdown", onPointerDown, { capture: true });
+  element.addEventListener("pointermove", onPointerMove, { capture: true });
+  element.addEventListener("pointerup", onPointerUp, { capture: true });
+  element.addEventListener("pointercancel", onPointerUp, { capture: true });
+  return () => {
+    element.removeEventListener("pointerdown", onPointerDown, { capture: true });
+    element.removeEventListener("pointermove", onPointerMove, { capture: true });
+    element.removeEventListener("pointerup", onPointerUp, { capture: true });
+    element.removeEventListener("pointercancel", onPointerUp, { capture: true });
+  };
+}
+
+// src/input/attach-viewport-input.ts
+function distanceBetween(a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function midpoint(a, b) {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+function wheelDeltaYPixels(e) {
+  switch (e.deltaMode) {
+    case WheelEvent.DOM_DELTA_LINE:
+      return e.deltaY * 16;
+    case WheelEvent.DOM_DELTA_PAGE:
+      return e.deltaY * 400;
+    default:
+      return e.deltaY;
+  }
+}
+function attachViewportInput(options) {
+  const {
+    element,
+    camera,
+    onUpdate,
+    wheelElement,
+    wheelPanSensitivity = 0.5,
+    wheelZoomSensitivity = 15e-4,
+    touchPanSensitivity = 1.25,
+    touchHandledElsewhere = false,
+    allowPrimaryPointerPan = () => true
+  } = options;
+  const wheelTarget = wheelElement ?? element;
+  const pointers = /* @__PURE__ */ new Map();
+  let mode = "idle";
+  let pinchStartDist = 0;
+  let pinchStartZoom = 1;
+  let panLast = null;
+  let mousePanButton = null;
+  const onWheel = (e) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      const dy = wheelDeltaYPixels(e);
+      const normDy = dy < 20 ? dy * 12 : dy;
+      const factor = Math.exp(-normDy * wheelZoomSensitivity);
+      const rect = element.getBoundingClientRect();
+      camera.setZoom(camera.zoom * factor, {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      });
+      onUpdate();
+      return;
+    }
+    e.preventDefault();
+    camera.x -= e.deltaX * wheelPanSensitivity / camera.zoom;
+    camera.y -= e.deltaY * wheelPanSensitivity / camera.zoom;
+    onUpdate();
+  };
+  const onPointerDown = (e) => {
+    if (e.pointerType === "pen") return;
+    if (touchHandledElsewhere && e.pointerType === "touch") {
+      return;
+    }
+    const panOk = allowPrimaryPointerPan();
+    if (e.pointerType === "mouse" && e.button === 0) {
+      if (!panOk) {
+        return;
+      }
+      mousePanButton = 0;
+      mode = "mousePan";
+      panLast = { x: e.clientX, y: e.clientY };
+      element.setPointerCapture(e.pointerId);
+      e.preventDefault();
+      return;
+    }
+    if (e.pointerType === "mouse" && e.button === 1) {
+      mousePanButton = 1;
+      mode = "mousePan";
+      panLast = { x: e.clientX, y: e.clientY };
+      element.setPointerCapture(e.pointerId);
+      e.preventDefault();
+      return;
+    }
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointers.size === 1 && e.pointerType === "touch") {
+      if (panOk) {
+        mode = "pan";
+        panLast = { x: e.clientX, y: e.clientY };
+        e.preventDefault();
+      }
+    } else if (pointers.size === 2) {
+      const vals = Array.from(pointers.values());
+      const a = vals[0];
+      const b = vals[1];
+      if (a === void 0 || b === void 0) return;
+      mode = "pinch";
+      pinchStartDist = distanceBetween(a, b);
+      pinchStartZoom = camera.zoom;
+      panLast = midpoint(a, b);
+      e.preventDefault();
+    }
+  };
+  const onPointerMove = (e) => {
+    if (e.pointerType === "pen") return;
+    if (touchHandledElsewhere && e.pointerType === "touch") {
+      return;
+    }
+    if (mode === "mousePan" && panLast && mousePanButton !== null) {
+      const dx = e.clientX - panLast.x;
+      const dy = e.clientY - panLast.y;
+      panLast = { x: e.clientX, y: e.clientY };
+      camera.x += dx;
+      camera.y += dy;
+      onUpdate();
+      return;
+    }
+    if (!pointers.has(e.pointerId)) return;
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (mode === "pan" && pointers.size === 1 && panLast) {
+      const dx = e.clientX - panLast.x;
+      const dy = e.clientY - panLast.y;
+      panLast = { x: e.clientX, y: e.clientY };
+      camera.x += dx * touchPanSensitivity;
+      camera.y += dy * touchPanSensitivity;
+      onUpdate();
+      e.preventDefault();
+      return;
+    }
+    if (mode === "pinch" && pointers.size === 2) {
+      const vals = Array.from(pointers.values());
+      const a = vals[0];
+      const b = vals[1];
+      if (a === void 0 || b === void 0) return;
+      const dist = distanceBetween(a, b);
+      const mid = midpoint(a, b);
+      const scale = dist / Math.max(pinchStartDist, 1e-6);
+      const nextZoom = Math.min(
+        camera.maxZoom,
+        Math.max(camera.minZoom, pinchStartZoom * scale)
+      );
+      const rect = element.getBoundingClientRect();
+      camera.setZoom(nextZoom, {
+        x: mid.x - rect.left,
+        y: mid.y - rect.top
+      });
+      if (panLast) {
+        const dx = mid.x - panLast.x;
+        const dy = mid.y - panLast.y;
+        camera.x += dx;
+        camera.y += dy;
+        panLast = mid;
+      }
+      onUpdate();
+      e.preventDefault();
+    }
+  };
+  const onPointerUp = (e) => {
+    if (e.pointerType === "pen") return;
+    if (touchHandledElsewhere && e.pointerType === "touch") {
+      return;
+    }
+    if (mode === "mousePan") {
+      if (e.pointerType === "mouse" && e.button === mousePanButton) {
+        mode = "idle";
+        panLast = null;
+        mousePanButton = null;
+        try {
+          element.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+      }
+      return;
+    }
+    pointers.delete(e.pointerId);
+    if (pointers.size === 0) {
+      mode = "idle";
+      panLast = null;
+    } else if (pointers.size === 1 && mode === "pinch") {
+      mode = "pan";
+      const remaining = Array.from(pointers.values())[0];
+      panLast = remaining ?? null;
+    }
+  };
+  const onPointerCancel = (e) => {
+    onPointerUp(e);
+  };
+  wheelTarget.addEventListener("wheel", onWheel, { passive: false });
+  element.addEventListener("pointerdown", onPointerDown);
+  element.addEventListener("pointermove", onPointerMove);
+  element.addEventListener("pointerup", onPointerUp);
+  element.addEventListener("pointercancel", onPointerCancel);
+  return () => {
+    wheelTarget.removeEventListener("wheel", onWheel);
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("pointermove", onPointerMove);
+    element.removeEventListener("pointerup", onPointerUp);
+    element.removeEventListener("pointercancel", onPointerCancel);
+  };
+}
+
+// src/math/item-transform.ts
+function getItemRotationRad(item) {
+  return item.rotation ?? 0;
+}
+function itemLocalToWorld(lx, ly, itemX, itemY, w, h, rotationRad) {
+  const c = { x: w / 2, y: h / 2 };
+  const dlx = lx - c.x;
+  const dly = ly - c.y;
+  const cos = Math.cos(rotationRad);
+  const sin = Math.sin(rotationRad);
+  return {
+    x: itemX + c.x + cos * dlx - sin * dly,
+    y: itemY + c.y + sin * dlx + cos * dly
+  };
+}
+function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
+  const c = { x: w / 2, y: h / 2 };
+  const vx = wx - itemX;
+  const vy = wy - itemY;
+  const dx = vx - c.x;
+  const dy = vy - c.y;
+  const cos = Math.cos(-rotationRad);
+  const sin = Math.sin(-rotationRad);
+  const lx = cos * dx - sin * dy;
+  const ly = sin * dx + cos * dy;
+  return { x: c.x + lx, y: c.y + ly };
+}
+function boundsAabbForRotatedItem(item) {
+  const rot = getItemRotationRad(item);
+  if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
+    return item.bounds;
+  }
+  const r = normalizeRect(item.bounds);
+  if (Math.abs(rot) < 1e-12) {
+    return r;
+  }
+  const corners = [
+    [0, 0],
+    [r.width, 0],
+    [r.width, r.height],
+    [0, r.height]
+  ];
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [lx, ly] of corners) {
+    const p = itemLocalToWorld(lx, ly, item.x, item.y, r.width, r.height, rot);
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x);
+    maxY = Math.max(maxY, p.y);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+// src/scene/custom-shape.ts
+function expandCustomShapeTemplate(template, width, height) {
+  return template.replace(/\{\{w\}\}/g, String(width)).replace(/\{\{h\}\}/g, String(height)).replace(/\{\{width\}\}/g, String(width)).replace(/\{\{height\}\}/g, String(height));
+}
+function resolveCustomInner(content, size) {
+  if ("render" in content) {
+    return content.render(size);
+  }
+  return expandCustomShapeTemplate(content.svg, size.width, size.height);
+}
+function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
+  const b = normalizeRect(bounds);
+  const sx = b.width / intrinsic.width;
+  const sy = b.height / intrinsic.height;
+  return `<g transform="scale(${sx},${sy})">${inner}</g>`;
+}
+function createCustomShapeItem(id, bounds, content) {
+  const r = normalizeRect(bounds);
+  const intrinsic = { width: r.width, height: r.height };
+  const inner = resolveCustomInner(content, intrinsic);
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "custom",
+    customIntrinsicSize: intrinsic,
+    customInnerSvg: inner,
+    childrenSvg: buildCustomShapeChildrenSvg(inner, intrinsic, r)
+  };
+}
+
+// src/scene/freehand-path.ts
+function dedupeFreehandPoints(points, minDist) {
+  if (points.length <= 2) {
+    return points.map((p) => ({ ...p }));
+  }
+  const minSq = minDist * minDist;
+  const first = points[0];
+  if (!first) return [];
+  const out = [{ ...first }];
+  for (let i = 1; i < points.length - 1; i++) {
+    const p = points[i];
+    const last = out[out.length - 1];
+    if (!p || !last) continue;
+    const dx = p.x - last.x;
+    const dy = p.y - last.y;
+    if (dx * dx + dy * dy >= minSq) {
+      out.push({ ...p });
+    }
+  }
+  const end = points[points.length - 1];
+  const lastKept = out[out.length - 1];
+  if (!end || !lastKept) return out;
+  if ((end.x - lastKept.x) ** 2 + (end.y - lastKept.y) ** 2 > 1e-12) {
+    out.push({ ...end });
+  }
+  return out;
+}
+function smoothFreehandPointsToPathD(points) {
+  const n = points.length;
+  if (n === 0) return "";
+  if (n === 1) {
+    const p = points[0];
+    if (!p) return "";
+    return `M ${p.x} ${p.y}`;
+  }
+  if (n === 2) {
+    const a = points[0];
+    const b = points[1];
+    if (!a || !b) return "";
+    return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+  }
+  const p0 = points[0];
+  if (!p0) return "";
+  let d = `M ${p0.x} ${p0.y}`;
+  let i = 1;
+  for (; i < n - 2; i++) {
+    const pi = points[i];
+    const pi1 = points[i + 1];
+    if (!pi || !pi1) continue;
+    const xc = (pi.x + pi1.x) / 2;
+    const yc = (pi.y + pi1.y) / 2;
+    d += ` Q ${pi.x} ${pi.y} ${xc} ${yc}`;
+  }
+  const pLast = points[i];
+  const pEnd = points[i + 1];
+  if (!pLast || !pEnd) return d;
+  d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
+  return d;
+}
+function outlineStrokeToClosedPathD(outline) {
+  const len = outline.length;
+  if (len === 0) return "";
+  const first = outline[0];
+  if (!first) return "";
+  if (len < 3) {
+    let d2 = `M ${first[0]} ${first[1]}`;
+    for (let i = 1; i < len; i++) {
+      const pt = outline[i];
+      if (!pt) continue;
+      d2 += ` L ${pt[0]} ${pt[1]}`;
+    }
+    return `${d2} Z`;
+  }
+  let d = `M ${first[0]} ${first[1]} Q`;
+  for (let i = 0; i < len; i++) {
+    const p0 = outline[i];
+    const p1 = outline[(i + 1) % len];
+    if (!p0 || !p1) continue;
+    d += ` ${p0[0]} ${p0[1]} ${(p0[0] + p1[0]) / 2} ${(p0[1] + p1[1]) / 2}`;
+  }
+  return `${d} Z`;
+}
+
+// src/scene/text-svg.ts
+function escapeSvgTextContent(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeHtmlText(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+var DEFAULT_TEXT_FONT_SIZE = 18;
+var LINE_HEIGHT_RATIO = 22 / 18;
+var FIRST_LINE_BASELINE_RATIO = 24 / 18;
+var PLACEHOLDER = "Tap to type";
+var MIN_TEXT_BOX_W = 40;
+var MIN_TEXT_BOX_H = 36;
+var TEXT_PAD_X = 4;
+var MAX_TEXT_MEASURE_CACHE_ENTRIES = 2e3;
+var sharedMeasureContext;
+var textMeasureCache = /* @__PURE__ */ new Map();
+function getSharedMeasureContext() {
+  if (sharedMeasureContext !== void 0) {
+    return sharedMeasureContext;
+  }
+  if (typeof document === "undefined") {
+    sharedMeasureContext = null;
+    return sharedMeasureContext;
+  }
+  const canvas = document.createElement("canvas");
+  sharedMeasureContext = canvas.getContext("2d");
+  return sharedMeasureContext;
+}
+function textMeasureCacheKey(content, fontSize) {
+  return `${fontSize}
+${content}`;
+}
+function cacheMeasuredBounds(key, bounds) {
+  if (textMeasureCache.size >= MAX_TEXT_MEASURE_CACHE_ENTRIES) {
+    textMeasureCache.clear();
+  }
+  textMeasureCache.set(key, bounds);
+}
+function lineHeightFor(fontSize) {
+  return fontSize * LINE_HEIGHT_RATIO;
+}
+function firstLineBaselineY(fontSize) {
+  return fontSize * FIRST_LINE_BASELINE_RATIO;
+}
+function measureTextBoundsLocal(content, fontSize = DEFAULT_TEXT_FONT_SIZE) {
+  const cacheKey = textMeasureCacheKey(content, fontSize);
+  const cached = textMeasureCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+  const lh = lineHeightFor(fontSize);
+  const baselineY = firstLineBaselineY(fontSize);
+  const trimmed = content.trim();
+  const lines = trimmed.length === 0 ? [PLACEHOLDER] : content.split("\n");
+  let maxInnerW = 0;
+  const ctx = getSharedMeasureContext();
+  if (ctx) {
+    ctx.font = `${fontSize}px system-ui, sans-serif`;
+    for (const line of lines) {
+      const toMeasure = trimmed.length === 0 ? PLACEHOLDER : line.length === 0 ? " " : line;
+      maxInnerW = Math.max(maxInnerW, ctx.measureText(toMeasure).width);
+    }
+  }
+  if (maxInnerW === 0) {
+    for (const line of lines) {
+      const toMeasure = trimmed.length === 0 ? PLACEHOLDER : line.length === 0 ? " " : line;
+      maxInnerW = Math.max(maxInnerW, toMeasure.length * fontSize * 0.52);
+    }
+  }
+  const minW = Math.max(MIN_TEXT_BOX_W, TEXT_PAD_X * 2 + fontSize);
+  const width = Math.max(minW, TEXT_PAD_X * 2 + maxInnerW);
+  const height = Math.max(
+    MIN_TEXT_BOX_H,
+    baselineY + (lines.length - 1) * lh + Math.max(8, fontSize * 0.35)
+  );
+  const measured = { width, height };
+  cacheMeasuredBounds(cacheKey, measured);
+  return measured;
+}
+function buildTextSvg(content, _width, _height, fillColor = "#2563eb", fontSize = DEFAULT_TEXT_FONT_SIZE) {
+  const lh = lineHeightFor(fontSize);
+  const y0 = firstLineBaselineY(fontSize);
+  const trimmed = content.trim();
+  if (trimmed.length === 0) {
+    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="#94a3b8" font-style="italic">${escapeSvgTextContent(PLACEHOLDER)}</text>`;
+  }
+  const lines = content.split("\n");
+  if (lines.length === 1) {
+    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="${fillColor}">${escapeSvgTextContent(lines[0] ?? "")}</text>`;
+  }
+  const parts = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i] ?? "";
+    if (i === 0) {
+      parts.push(`<tspan x="4">${escapeSvgTextContent(line)}</tspan>`);
+    } else {
+      parts.push(`<tspan x="4" dy="${lh}">${escapeSvgTextContent(line)}</tspan>`);
+    }
+  }
+  return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="${fillColor}">${parts.join("")}</text>`;
+}
+function buildTextFixedBoundsSvg(content, width, height, fillColor = "#2563eb", fontSize = DEFAULT_TEXT_FONT_SIZE) {
+  const w = Math.max(1, width);
+  const h = Math.max(1, height);
+  const lh = lineHeightFor(fontSize);
+  const trimmed = content.trim();
+  if (trimmed.length === 0) {
+    return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:#94a3b8;font-style:italic">${escapeHtmlText(PLACEHOLDER)}</div></foreignObject>`;
+  }
+  const body = escapeHtmlText(content);
+  return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:${fillColor}">${body}</div></foreignObject>`;
+}
+
+// src/scene/shape-builders.ts
+var DEFAULT_STROKE_STYLE = {
+  stroke: "#2563eb",
+  strokeWidth: 2
+};
+var TOOL_FREEHAND_DEFAULTS = {
+  draw: { strokeWidth: 3 },
+  pencil: { strokeWidth: 3 },
+  brush: { strokeWidth: 10 },
+  marker: { stroke: "#fde047", strokeWidth: 16, strokeOpacity: 0.5 }
+};
+function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware = false) {
+  const sw = style.strokeWidth;
+  const base = {
+    last: strokeComplete,
+    simulatePressure: true
+  };
+  if (toolKind === "draw" || toolKind === "pencil") {
+    if (pressureAware && toolKind === "draw") {
+      return {
+        ...base,
+        size: Math.max(2, sw * 1.05),
+        thinning: 0.42,
+        smoothing: 0.56,
+        streamline: 0.18,
+        simulatePressure: false
+      };
+    }
+    return {
+      ...base,
+      size: Math.max(2, sw * 1.18),
+      thinning: 0.12,
+      smoothing: 0.72,
+      streamline: 0.42,
+      simulatePressure: false
+    };
+  }
+  if (toolKind === "brush") {
+    return {
+      ...base,
+      size: Math.max(4, sw * 1.22),
+      thinning: 0.52,
+      smoothing: 0.64,
+      streamline: 0.68
+    };
+  }
+  return {
+    ...base,
+    size: Math.max(6, sw * 1.08),
+    thinning: 0.08,
+    smoothing: 0.88,
+    streamline: 0.84,
+    simulatePressure: false
+  };
+}
+function resolveStrokeStyle(item) {
+  return {
+    stroke: item.stroke ?? DEFAULT_STROKE_STYLE.stroke,
+    strokeWidth: item.strokeWidth ?? DEFAULT_STROKE_STYLE.strokeWidth,
+    strokeOpacity: item.strokeOpacity
+  };
+}
+function strokeOpacityAttr(style) {
+  return style.strokeOpacity != null ? ` stroke-opacity="${style.strokeOpacity}"` : "";
+}
+function buildRectSvg(width, height, style = DEFAULT_STROKE_STYLE) {
+  return `<rect width="${width}" height="${height}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" rx="4"${strokeOpacityAttr(style)} />`;
+}
+function buildEllipseSvg(width, height, style = DEFAULT_STROKE_STYLE) {
+  const rx = width / 2;
+  const ry = height / 2;
+  return `<ellipse cx="${rx}" cy="${ry}" rx="${rx}" ry="${ry}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
+}
+function buildLineSvg(line, style = DEFAULT_STROKE_STYLE) {
+  return `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
+}
+function computeStraightArrowGeometry(line, strokeWidth) {
+  const dx = line.x2 - line.x1;
+  const dy = line.y2 - line.y1;
+  const len = Math.hypot(dx, dy);
+  if (len < 1e-6) return null;
+  const ux = dx / len;
+  const uy = dy / len;
+  const headLength = Math.min(Math.max(strokeWidth * 4.2, 12), len * 0.38);
+  const headAngle = Math.PI / 6;
+  const cos = Math.cos(headAngle);
+  const sin = Math.sin(headAngle);
+  const rx1 = ux * cos - uy * sin;
+  const ry1 = ux * sin + uy * cos;
+  const rx2 = ux * cos + uy * sin;
+  const ry2 = -ux * sin + uy * cos;
+  return {
+    shaftEndX: line.x2,
+    shaftEndY: line.y2,
+    headTipX: line.x2,
+    headTipY: line.y2,
+    headLeftX: line.x2 - rx1 * headLength,
+    headLeftY: line.y2 - ry1 * headLength,
+    headRightX: line.x2 - rx2 * headLength,
+    headRightY: line.y2 - ry2 * headLength
+  };
+}
+function buildArrowSvg(itemId, line, style = DEFAULT_STROKE_STYLE) {
+  const geometry = computeStraightArrowGeometry(line, style.strokeWidth);
+  if (!geometry) {
+    return buildLineSvg(line, style);
+  }
+  const op = strokeOpacityAttr(style);
+  return `
+		<line x1="${line.x1}" y1="${line.y1}" x2="${geometry.shaftEndX}" y2="${geometry.shaftEndY}" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" stroke-linecap="round"${op} />
+		<path d="M ${geometry.headLeftX} ${geometry.headLeftY} L ${geometry.headTipX} ${geometry.headTipY} L ${geometry.headRightX} ${geometry.headRightY}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision"${op} />
+	`;
+}
+function buildDrawDotSvg(r, style = DEFAULT_STROKE_STYLE) {
+  const op = style.strokeOpacity != null ? ` fill-opacity="${style.strokeOpacity}"` : "";
+  return `<circle cx="${r}" cy="${r}" r="${r}" fill="${style.stroke}" shape-rendering="geometricPrecision"${op} />`;
+}
+function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeComplete = true) {
+  if (pathPointsLocal.length === 0) return null;
+  if (pathPointsLocal.length === 1) {
+    const p = pathPointsLocal[0];
+    if (!p) return null;
+    const r = Math.max(0.5, style.strokeWidth / 2);
+    return {
+      kind: "circle",
+      cx: p.x,
+      cy: p.y,
+      r,
+      fill: style.stroke,
+      fillOpacity: style.strokeOpacity
+    };
+  }
+  const minDist = Math.min(0.25, Math.max(0.02, style.strokeWidth * 0.02));
+  const pts = dedupeFreehandPoints(pathPointsLocal, minDist);
+  if (pts.length === 0) return null;
+  if (pts.length === 1) {
+    const p = pts[0];
+    if (!p) return null;
+    const r = Math.max(0.5, style.strokeWidth / 2);
+    return {
+      kind: "circle",
+      cx: p.x,
+      cy: p.y,
+      r,
+      fill: style.stroke,
+      fillOpacity: style.strokeOpacity
+    };
+  }
+  const hasPressure = toolKind === "draw" && pts.some((p) => p.pressure != null && Number.isFinite(p.pressure));
+  if (toolKind === "draw" && !hasPressure) {
+    const d2 = smoothFreehandPointsToPathD(pts);
+    return {
+      kind: "strokePath",
+      d: d2,
+      stroke: style.stroke,
+      strokeWidth: style.strokeWidth,
+      strokeOpacity: style.strokeOpacity
+    };
+  }
+  const input = hasPressure ? pts.map(
+    (p) => [p.x, p.y, Math.min(1, Math.max(0, p.pressure ?? 0.5))]
+  ) : pts.map((p) => [p.x, p.y]);
+  const opts = perfectFreehandOptions(toolKind, style, strokeComplete, hasPressure);
+  let outline = [];
+  try {
+    const raw = getStroke(input, opts);
+    outline = raw.map(([x, y]) => [x, y]);
+  } catch {
+    outline = [];
+  }
+  if (outline.length >= 3) {
+    const d2 = outlineStrokeToClosedPathD(outline);
+    return {
+      kind: "fillPath",
+      d: d2,
+      fill: style.stroke,
+      fillOpacity: style.strokeOpacity
+    };
+  }
+  const d = smoothFreehandPointsToPathD(pts);
+  return {
+    kind: "strokePath",
+    d,
+    stroke: style.stroke,
+    strokeWidth: style.strokeWidth,
+    strokeOpacity: style.strokeOpacity
+  };
+}
+function freehandPayloadToSvgString(payload) {
+  if (payload.kind === "circle") {
+    const op2 = payload.fillOpacity != null ? ` fill-opacity="${payload.fillOpacity}"` : "";
+    return `<circle cx="${payload.cx}" cy="${payload.cy}" r="${payload.r}" fill="${payload.fill}" shape-rendering="geometricPrecision"${op2} />`;
+  }
+  if (payload.kind === "fillPath") {
+    const op2 = payload.fillOpacity != null ? ` fill-opacity="${payload.fillOpacity}"` : "";
+    return `<path d="${payload.d}" fill="${payload.fill}" fill-rule="nonzero" stroke="none"${op2} shape-rendering="geometricPrecision" />`;
+  }
+  const op = strokeOpacityAttr({
+    stroke: payload.stroke,
+    strokeWidth: payload.strokeWidth,
+    strokeOpacity: payload.strokeOpacity
+  });
+  return `<path d="${payload.d}" fill="none" stroke="${payload.stroke}" stroke-width="${payload.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision"${op} />`;
+}
+function buildFreehandPathSvg(pathPointsLocal, style, toolKind, strokeComplete = true) {
+  const payload = computeFreehandSvgPayload(
+    pathPointsLocal,
+    style,
+    toolKind,
+    strokeComplete
+  );
+  if (!payload) return "";
+  return freehandPayloadToSvgString(payload);
+}
+function createShapeId() {
+  const uid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : String(Date.now());
+  return `user-shape-${uid}`;
+}
+function lineEndpointsToLocal(bounds, worldEndA, worldEndB) {
+  const b = normalizeRect(bounds);
+  return {
+    x1: worldEndA.x - b.x,
+    y1: worldEndA.y - b.y,
+    x2: worldEndB.x - b.x,
+    y2: worldEndB.y - b.y
+  };
+}
+function rebuildItemSvg(item) {
+  const style = resolveStrokeStyle(item);
+  const k = item.toolKind;
+  if (k === "rect") {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      childrenSvg: buildRectSvg(b.width, b.height, style)
+    };
+  }
+  if (k === "ellipse") {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      childrenSvg: buildEllipseSvg(b.width, b.height, style)
+    };
+  }
+  if ((k === "line" || k === "arrow") && item.line) {
+    const line = item.line;
+    const childrenSvg = k === "arrow" ? buildArrowSvg(item.id, line, style) : buildLineSvg(line, style);
+    return { ...item, childrenSvg };
+  }
+  if (k === "text" && item.text !== void 0) {
+    const fs = item.textFontSize ?? DEFAULT_TEXT_FONT_SIZE;
+    if (item.textFixedBounds) {
+      const b2 = normalizeRect(item.bounds);
+      return {
+        ...item,
+        x: b2.x,
+        y: b2.y,
+        bounds: b2,
+        childrenSvg: buildTextFixedBoundsSvg(
+          item.text,
+          b2.width,
+          b2.height,
+          style.stroke,
+          fs
+        )
+      };
+    }
+    const m = measureTextBoundsLocal(item.text, fs);
+    const b = normalizeRect({
+      x: item.x,
+      y: item.y,
+      width: m.width,
+      height: m.height
+    });
+    return {
+      ...item,
+      x: b.x,
+      y: b.y,
+      bounds: b,
+      childrenSvg: buildTextSvg(item.text, b.width, b.height, style.stroke, fs)
+    };
+  }
+  if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item.pathPointsLocal && item.pathPointsLocal.length > 0) {
+    return {
+      ...item,
+      childrenSvg: buildFreehandPathSvg(item.pathPointsLocal, style, k)
+    };
+  }
+  if (k === "draw") {
+    const b = normalizeRect(item.bounds);
+    const r = Math.min(b.width, b.height) / 2;
+    return {
+      ...item,
+      childrenSvg: buildDrawDotSvg(r, style)
+    };
+  }
+  if (k === "image" && item.imageRasterHref && item.imageIntrinsicSize) {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      childrenSvg: buildRasterImageChildrenSvg(
+        item.imageRasterHref,
+        item.imageIntrinsicSize,
+        b
+      )
+    };
+  }
+  if (k === "custom" && item.customIntrinsicSize && item.customInnerSvg) {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      x: b.x,
+      y: b.y,
+      bounds: b,
+      childrenSvg: buildCustomShapeChildrenSvg(
+        item.customInnerSvg,
+        item.customIntrinsicSize,
+        b
+      )
+    };
+  }
+  return item;
+}
+function applyStrokeToItem(item, patch) {
+  return rebuildItemSvg({ ...item, ...patch });
+}
+function createRectangleItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "rect",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createEllipseItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "ellipse",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createLineItem(id, bounds, line, toolKind, style, arrowBind) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind,
+    line: { ...line },
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    ...arrowBind ? { arrowBind } : {},
+    childrenSvg: ""
+  });
+}
+function createDrawDotItem(id, worldX, worldY, radius, style) {
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: worldX - radius,
+    y: worldY - radius,
+    bounds: {
+      x: worldX - radius,
+      y: worldY - radius,
+      width: radius * 2,
+      height: radius * 2
+    },
+    toolKind: "draw",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createTextItem(id, bounds, text = "", style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "text",
+    text,
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createFreehandStrokeItem(id, pointsWorld, toolKind, style) {
+  if (pointsWorld.length === 0) return null;
+  const merged = {
+    ...DEFAULT_STROKE_STYLE,
+    ...TOOL_FREEHAND_DEFAULTS[toolKind],
+    ...style
+  };
+  const sw = merged.strokeWidth;
+  const pad = Math.max(sw * 0.75 + 4, sw / 2 + 6);
+  const xs = pointsWorld.map((p) => p.x);
+  const ys = pointsWorld.map((p) => p.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  const x = minX - pad;
+  const y = minY - pad;
+  const w = Math.max(maxX - minX + 2 * pad, sw);
+  const h = Math.max(maxY - minY + 2 * pad, sw);
+  const pathPointsLocal = pointsWorld.map((p) => ({
+    x: p.x - x,
+    y: p.y - y,
+    ...p.pressure != null ? { pressure: p.pressure } : {}
+  }));
+  return rebuildItemSvg({
+    id,
+    x,
+    y,
+    bounds: { x, y, width: w, height: h },
+    toolKind,
+    stroke: merged.stroke,
+    strokeWidth: merged.strokeWidth,
+    ...merged.strokeOpacity != null ? { strokeOpacity: merged.strokeOpacity } : {},
+    pathPointsLocal,
+    childrenSvg: ""
+  });
+}
+function escapeSvgAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function buildRasterImageChildrenSvg(dataUrl, intrinsic, bounds) {
+  const r = normalizeRect(bounds);
+  const iw = Math.max(1e-6, intrinsic.width);
+  const ih = Math.max(1e-6, intrinsic.height);
+  const href = escapeSvgAttr(dataUrl);
+  const arB = r.width / Math.max(1e-9, r.height);
+  const arI = iw / ih;
+  if (Math.abs(arB - arI) < 1e-3) {
+    const s2 = r.width / iw;
+    return `<g transform="scale(${s2})"><image href="${href}" x="0" y="0" width="${iw}" height="${ih}" /></g>`;
+  }
+  const s = Math.min(r.width / iw, r.height / ih);
+  const tx = (r.width - iw * s) / 2;
+  const ty = (r.height - ih * s) / 2;
+  return `<g transform="translate(${tx}, ${ty}) scale(${s})"><image href="${href}" x="0" y="0" width="${iw}" height="${ih}" /></g>`;
+}
+function createImageItem(id, bounds, imageRasterHref, imageIntrinsicSize) {
+  const r = normalizeRect(bounds);
+  const iw = Math.max(1e-6, imageIntrinsicSize.width);
+  const ih = Math.max(1e-6, imageIntrinsicSize.height);
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "image",
+    imageRasterHref,
+    imageIntrinsicSize: { width: iw, height: ih },
+    childrenSvg: buildRasterImageChildrenSvg(
+      imageRasterHref,
+      { width: iw, height: ih },
+      r
+    )
+  };
+}
+function createImageFromVectorTrace(id, bounds, imageVectorInnerSvg, imageVectorLocalSize) {
+  const r = normalizeRect(bounds);
+  const lw = Math.max(1e-6, imageVectorLocalSize.width);
+  const lh = Math.max(1e-6, imageVectorLocalSize.height);
+  const arB = r.width / Math.max(1e-9, r.height);
+  const arI = lw / lh;
+  let childrenSvg;
+  if (Math.abs(arB - arI) < 1e-3) {
+    const s = r.width / lw;
+    childrenSvg = `<g transform="scale(${s})">${imageVectorInnerSvg}</g>`;
+  } else {
+    const s = Math.min(r.width / lw, r.height / lh);
+    const tx = (r.width - lw * s) / 2;
+    const ty = (r.height - lh * s) / 2;
+    childrenSvg = `<g transform="translate(${tx}, ${ty}) scale(${s})">${imageVectorInnerSvg}</g>`;
+  }
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "image",
+    imageVectorInnerSvg,
+    imageVectorLocalSize: { width: lw, height: lh },
+    childrenSvg
+  };
+}
+
+// src/interaction/resize-handles.ts
+function rectFromCorners(a, b) {
+  const minX = Math.min(a.x, b.x);
+  const maxX = Math.max(a.x, b.x);
+  const minY = Math.min(a.y, b.y);
+  const maxY = Math.max(a.y, b.y);
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+// src/interaction/arrow-bindings.ts
+var ARROW_BIND_SNAP_PX = 16;
+function closestPointOnSegment(px, py, ax, ay, bx, by) {
+  const abx = bx - ax;
+  const aby = by - ay;
+  const apx = px - ax;
+  const apy = py - ay;
+  const abLenSq = abx * abx + aby * aby;
+  if (abLenSq < 1e-12) {
+    return { x: ax, y: ay };
+  }
+  let t = (apx * abx + apy * aby) / abLenSq;
+  t = Math.max(0, Math.min(1, t));
+  return { x: ax + t * abx, y: ay + t * aby };
+}
+function closestPointOnRectBoundaryLocal(px, py, w, h) {
+  const edges = [
+    [0, 0, w, 0],
+    [w, 0, w, h],
+    [w, h, 0, h],
+    [0, h, 0, 0]
+  ];
+  let best = { x: 0, y: 0, d: Infinity };
+  for (const [ax, ay, bx, by] of edges) {
+    const p = closestPointOnSegment(px, py, ax, ay, bx, by);
+    const d = Math.hypot(px - p.x, py - p.y);
+    if (d < best.d) {
+      best = { x: p.x, y: p.y, d };
+    }
+  }
+  return { x: best.x, y: best.y };
+}
+function closestPointOnEllipseBoundaryLocal(px, py, w, h) {
+  const cx = w / 2;
+  const cy = h / 2;
+  const rx = w / 2;
+  const ry = h / 2;
+  if (rx < 1e-9 || ry < 1e-9) {
+    return { x: cx, y: cy };
+  }
+  const dx = px - cx;
+  const dy = py - cy;
+  if (dx === 0 && dy === 0) {
+    return { x: cx + rx, y: cy };
+  }
+  const t = Math.atan2(dy / ry, dx / rx);
+  return {
+    x: cx + rx * Math.cos(t),
+    y: cy + ry * Math.sin(t)
+  };
+}
+function isArrowBindTarget(item) {
+  if (item.locked) return false;
+  const k = item.toolKind;
+  if (!k) return false;
+  return k === "rect" || k === "ellipse" || k === "text" || k === "image" || k === "custom";
+}
+function closestPointOnShapeBoundaryLocal(item, lx, ly, w, h) {
+  if (item.toolKind === "ellipse") {
+    return closestPointOnEllipseBoundaryLocal(lx, ly, w, h);
+  }
+  return closestPointOnRectBoundaryLocal(lx, ly, w, h);
+}
+function anchorNormalizedToWorld(target, anchor) {
+  const b = normalizeRect(target.bounds);
+  const w = b.width;
+  const h = b.height;
+  const lx = anchor.x * w;
+  const ly = anchor.y * h;
+  const rot = getItemRotationRad(target);
+  return itemLocalToWorld(lx, ly, target.x, target.y, w, h, rot);
+}
+function snapArrowEndpointToShape(worldX, worldY, items, excludeIds, maxDistWorld) {
+  let best = null;
+  for (const item of items) {
+    if (excludeIds.has(item.id)) continue;
+    if (!isArrowBindTarget(item)) continue;
+    const b = normalizeRect(item.bounds);
+    const w = b.width;
+    const h = b.height;
+    const rot = getItemRotationRad(item);
+    const pl = worldToItemLocal(worldX, worldY, item.x, item.y, w, h, rot);
+    const localClosest = closestPointOnShapeBoundaryLocal(item, pl.x, pl.y, w, h);
+    const worldClosest = itemLocalToWorld(
+      localClosest.x,
+      localClosest.y,
+      item.x,
+      item.y,
+      w,
+      h,
+      rot
+    );
+    const d = Math.hypot(worldX - worldClosest.x, worldY - worldClosest.y);
+    if (d > maxDistWorld) continue;
+    if (!best || d < best.d) {
+      best = {
+        d,
+        world: worldClosest,
+        binding: {
+          targetId: item.id,
+          anchor: {
+            x: localClosest.x / Math.max(1e-9, w),
+            y: localClosest.y / Math.max(1e-9, h)
+          }
+        }
+      };
+    }
+  }
+  return best ? { world: best.world, binding: best.binding } : null;
+}
+function resolveOneArrowItem(item, map) {
+  const bind = item.arrowBind;
+  if (!bind || item.toolKind !== "arrow") return item;
+  const ln = item.line;
+  if (!ln) return item;
+  const b0 = normalizeRect(item.bounds);
+  const rot = getItemRotationRad(item);
+  const w0 = b0.width;
+  const h0 = b0.height;
+  const startFallback = itemLocalToWorld(ln.x1, ln.y1, item.x, item.y, w0, h0, rot);
+  const endFallback = itemLocalToWorld(ln.x2, ln.y2, item.x, item.y, w0, h0, rot);
+  const startW = bind.start ? (() => {
+    const t = map.get(bind.start.targetId);
+    return t ? anchorNormalizedToWorld(t, bind.start.anchor) : startFallback;
+  })() : startFallback;
+  const endW = bind.end ? (() => {
+    const t = map.get(bind.end.targetId);
+    return t ? anchorNormalizedToWorld(t, bind.end.anchor) : endFallback;
+  })() : endFallback;
+  const raw = rectFromCorners(startW, endW);
+  const br = normalizeRect(raw);
+  const newLine = lineEndpointsToLocal(br, startW, endW);
+  const next = {
+    ...item,
+    x: br.x,
+    y: br.y,
+    bounds: br,
+    line: newLine,
+    rotation: 0
+  };
+  return rebuildItemSvg(next);
+}
+function resolveArrowBindingsInScene(items) {
+  let hasBoundArrow = false;
+  for (const item of items) {
+    if (item.toolKind === "arrow" && item.arrowBind) {
+      hasBoundArrow = true;
+      break;
+    }
+  }
+  if (!hasBoundArrow) {
+    return items;
+  }
+  const map = new Map(items.map((i) => [i.id, i]));
+  return items.map((item) => {
+    if (item.toolKind !== "arrow" || !item.arrowBind) return item;
+    return resolveOneArrowItem(item, map);
+  });
+}
+function bakeArrowItemToAbsolute(item, items) {
+  if (item.toolKind !== "arrow" || !item.arrowBind) return item;
+  const map = new Map(items.map((i) => [i.id, i]));
+  const resolved = resolveOneArrowItem(item, map);
+  const { arrowBind: _a, ...rest } = resolved;
+  return { ...rest };
+}
+
+// src/interaction/hit-test.ts
+function pointInLocalRect(lx, ly, w, h) {
+  return lx >= 0 && lx <= w && ly >= 0 && ly <= h;
+}
+function pointInLocalEllipse(lx, ly, w, h) {
+  const rx = w / 2;
+  const ry = h / 2;
+  if (rx < 1e-9 || ry < 1e-9) {
+    return false;
+  }
+  const cx = w / 2;
+  const cy = h / 2;
+  const nx = (lx - cx) / rx;
+  const ny = (ly - cy) / ry;
+  return nx * nx + ny * ny <= 1;
+}
+function distancePointToSegment(px, py, ax, ay, bx, by) {
+  const abx = bx - ax;
+  const aby = by - ay;
+  const apx = px - ax;
+  const apy = py - ay;
+  const abLenSq = abx * abx + aby * aby;
+  if (abLenSq < 1e-12) {
+    return Math.hypot(px - ax, py - ay);
+  }
+  let t = (apx * abx + apy * aby) / abLenSq;
+  t = Math.max(0, Math.min(1, t));
+  const qx = ax + t * abx;
+  const qy = ay + t * aby;
+  return Math.hypot(px - qx, py - qy);
+}
+function hitTestFilledShape(item, worldX, worldY) {
+  const b = normalizeRect(item.bounds);
+  const w = b.width;
+  const h = b.height;
+  const rot = getItemRotationRad(item);
+  const pl = worldToItemLocal(worldX, worldY, item.x, item.y, w, h, rot);
+  if (item.toolKind === "ellipse") {
+    return pointInLocalEllipse(pl.x, pl.y, w, h);
+  }
+  return pointInLocalRect(pl.x, pl.y, w, h);
+}
+function itemHitTestWorldPoint(item, worldX, worldY, options) {
+  const lineHit = options?.lineHitWorld ?? 8;
+  const lineHitSq = lineHit * lineHit;
+  const b = normalizeRect(item.bounds);
+  const w = b.width;
+  const h = b.height;
+  const rot = getItemRotationRad(item);
+  if (item.toolKind === "line" || item.toolKind === "arrow") {
+    const ln = item.line;
+    if (ln) {
+      const a = itemLocalToWorld(ln.x1, ln.y1, item.x, item.y, w, h, rot);
+      const p2 = itemLocalToWorld(ln.x2, ln.y2, item.x, item.y, w, h, rot);
+      const d = distancePointToSegment(worldX, worldY, a.x, a.y, p2.x, p2.y);
+      if (d * d <= lineHitSq) {
+        return true;
+      }
+    } else if (hitTestFilledShape(item, worldX, worldY)) {
+      return true;
+    }
+    return false;
+  }
+  if (item.toolKind === "draw" || item.toolKind === "pencil" || item.toolKind === "brush" || item.toolKind === "marker") {
+    const pts = item.pathPointsLocal;
+    const halfW = Math.max((item.strokeWidth ?? 2) / 2, lineHit * 0.5);
+    const tol = Math.max(lineHit, halfW);
+    const tolSq = tol * tol;
+    if (pts && pts.length >= 2) {
+      for (let j = 0; j < pts.length - 1; j++) {
+        const a = pts[j];
+        const p2 = pts[j + 1];
+        if (!a || !p2) continue;
+        const aw = itemLocalToWorld(a.x, a.y, item.x, item.y, w, h, rot);
+        const bw = itemLocalToWorld(p2.x, p2.y, item.x, item.y, w, h, rot);
+        const d = distancePointToSegment(worldX, worldY, aw.x, aw.y, bw.x, bw.y);
+        if (d * d <= tolSq) {
+          return true;
+        }
+      }
+    }
+    if (pts?.length === 1) {
+      const p = pts[0];
+      if (p) {
+        const cw = itemLocalToWorld(p.x, p.y, item.x, item.y, w, h, rot);
+        const dsq = (worldX - cw.x) ** 2 + (worldY - cw.y) ** 2;
+        if (dsq <= tolSq) {
+          return true;
+        }
+      }
+    }
+    return hitTestFilledShape(item, worldX, worldY);
+  }
+  return hitTestFilledShape(item, worldX, worldY);
+}
+function hitTestWorldPoint(items, worldX, worldY, options) {
+  for (let i = items.length - 1; i >= 0; i--) {
+    const item = items[i];
+    if (item === void 0) continue;
+    if (options?.ignoreLocked && item.locked) continue;
+    if (itemHitTestWorldPoint(item, worldX, worldY, options)) {
+      return item;
+    }
+  }
+  return null;
+}
+function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
+  const topHit = hitTestWorldPoint(items, worldX, worldY, {
+    ...options,
+    ignoreLocked: true
+  });
+  if (!topHit) return [];
+  const ids = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item === void 0 || item.locked) continue;
+    if (!itemHitTestWorldPoint(item, worldX, worldY, options)) continue;
+    if (!seen.has(item.id)) {
+      seen.add(item.id);
+      ids.push(item.id);
+    }
+  }
+  return ids;
+}
+
+// src/scene/spatial-cull.ts
+var spatialIndexCache = /* @__PURE__ */ new WeakMap();
+function cellKey(ix, iy) {
+  return `${ix},${iy}`;
+}
+function buildSpatialIndex(items, cellSize) {
+  const cached = spatialIndexCache.get(items);
+  if (cached && cached.cellSize === cellSize) {
+    return cached;
+  }
+  const aabbs = new Array(items.length);
+  const buckets = /* @__PURE__ */ new Map();
+  for (let index = 0; index < items.length; index += 1) {
+    const item = items[index];
+    if (!item) continue;
+    const aabb = boundsAabbForRotatedItem(item);
+    aabbs[index] = aabb;
+    const { minIx, maxIx, minIy, maxIy } = cellRangeForRect(aabb, cellSize);
+    for (let ix = minIx; ix <= maxIx; ix += 1) {
+      for (let iy = minIy; iy <= maxIy; iy += 1) {
+        const key = cellKey(ix, iy);
+        let bucket = buckets.get(key);
+        if (!bucket) {
+          bucket = [];
+          buckets.set(key, bucket);
+        }
+        bucket.push(index);
+      }
+    }
+  }
+  const next = {
+    cellSize,
+    aabbs,
+    buckets
+  };
+  spatialIndexCache.set(items, next);
+  return next;
+}
+function cellRangeForRect(r, cellSize) {
+  const n = normalizeRect(r);
+  const x1 = n.x + n.width;
+  const y1 = n.y + n.height;
+  const minIx = Math.floor(n.x / cellSize);
+  const maxIx = Math.max(minIx, Math.ceil(x1 / cellSize) - 1);
+  const minIy = Math.floor(n.y / cellSize);
+  const maxIy = Math.max(minIy, Math.ceil(y1 / cellSize) - 1);
+  return { minIx, maxIx, minIy, maxIy };
+}
+function cullItemsByViewportSpatial(items, visibleWorld, cellSize) {
+  const { aabbs, buckets } = buildSpatialIndex(items, cellSize);
+  const vr = cellRangeForRect(visibleWorld, cellSize);
+  const seen = /* @__PURE__ */ new Set();
+  const outIndices = [];
+  for (let ix = vr.minIx; ix <= vr.maxIx; ix++) {
+    for (let iy = vr.minIy; iy <= vr.maxIy; iy++) {
+      const bucket = buckets.get(cellKey(ix, iy));
+      if (!bucket) {
+        continue;
+      }
+      for (const index of bucket) {
+        if (seen.has(index)) {
+          continue;
+        }
+        seen.add(index);
+        const aabb = aabbs[index];
+        if (aabb && rectsIntersect(aabb, visibleWorld)) {
+          outIndices.push(index);
+        }
+      }
+    }
+  }
+  outIndices.sort((a, b) => a - b);
+  return outIndices.map((index) => items[index]).filter((item) => item != null);
+}
+
+// src/scene/cull.ts
+var SPATIAL_MIN_ITEMS = 400;
+var SPATIAL_CELL_SIZE = 256;
+function cullItemsLinear(items, visibleWorld) {
+  return items.filter(
+    (item) => rectsIntersect(boundsAabbForCull(item), visibleWorld)
+  );
+}
+function boundsAabbForCull(item) {
+  return boundsAabbForRotatedItem(item);
+}
+function cullItemsByViewport(items, visibleWorld) {
+  if (items.length < SPATIAL_MIN_ITEMS) {
+    return cullItemsLinear(items, visibleWorld);
+  }
+  return cullItemsByViewportSpatial(items, visibleWorld, SPATIAL_CELL_SIZE);
+}
+
+// src/renderer/svg-vector-renderer.ts
+function formatCameraTransform(camera) {
+  const z = camera.zoom;
+  return `matrix(${z}, 0, 0, ${z}, ${camera.x}, ${camera.y})`;
+}
+function formatItemPlacementTransform(item) {
+  const r = normalizeRect(item.bounds);
+  const rot = item.rotation ?? 0;
+  if (Math.abs(rot) < 1e-12) {
+    return `translate(${item.x}, ${item.y})`;
+  }
+  const deg = rot * 180 / Math.PI;
+  const cx = r.width / 2;
+  const cy = r.height / 2;
+  return `translate(${item.x}, ${item.y}) translate(${cx}, ${cy}) rotate(${deg}) translate(${-cx}, ${-cy})`;
+}
+var SvgVectorRenderer = class {
+  container;
+  scene;
+  camera;
+  svg;
+  rootG;
+  itemNodeCache = /* @__PURE__ */ new Map();
+  resizeObserver;
+  constructor(options) {
+    this.container = options.container;
+    this.scene = options.scene;
+    this.camera = options.camera;
+    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.svg.setAttribute("width", "100%");
+    this.svg.setAttribute("height", "100%");
+    this.svg.setAttribute("shape-rendering", "geometricPrecision");
+    this.svg.style.display = "block";
+    this.svg.setAttribute("role", "presentation");
+    this.svg.setAttribute("focusable", "false");
+    this.setPointerEventsNone(options.pointerEventsNone ?? false);
+    this.rootG = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    this.svg.appendChild(this.rootG);
+    this.container.appendChild(this.svg);
+    this.resizeObserver = new ResizeObserver(() => this.render());
+    this.resizeObserver.observe(this.container);
+  }
+  /**
+   * Reads container size, culls items, and updates the SVG (incrementally when possible).
+   */
+  render() {
+    const w = this.container.clientWidth;
+    const h = this.container.clientHeight;
+    if (w <= 0 || h <= 0) {
+      return;
+    }
+    this.svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    this.svg.setAttribute("preserveAspectRatio", "xMidYMid slice");
+    const visible = this.camera.getVisibleWorldRect(w, h);
+    const items = cullItemsByViewport(this.scene.getItems(), visible);
+    this.syncVisibleItems(items);
+    this.rootG.setAttribute("transform", formatCameraTransform(this.camera));
+  }
+  syncVisibleItems(items) {
+    const visibleIds = /* @__PURE__ */ new Set();
+    for (const item of items) {
+      visibleIds.add(item.id);
+    }
+    for (const [id, cached] of this.itemNodeCache) {
+      if (!visibleIds.has(id)) {
+        cached.g.remove();
+      }
+    }
+    let previousNode = null;
+    for (const item of items) {
+      let cached = this.itemNodeCache.get(item.id);
+      if (!cached) {
+        const g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        g2.setAttribute("data-item-id", item.id);
+        cached = {
+          g: g2,
+          lastChildrenSvg: "",
+          lastTransform: ""
+        };
+        this.itemNodeCache.set(item.id, cached);
+      }
+      const { g } = cached;
+      const t = formatItemPlacementTransform(item);
+      if (cached.lastTransform !== t) {
+        g.setAttribute("transform", t);
+        cached.lastTransform = t;
+      }
+      if (cached.lastChildrenSvg !== item.childrenSvg) {
+        g.innerHTML = item.childrenSvg;
+        cached.lastChildrenSvg = item.childrenSvg;
+      }
+      const expectedPosition = previousNode ? previousNode.nextSibling : this.rootG.firstChild;
+      if (expectedPosition !== g) {
+        this.rootG.insertBefore(g, expectedPosition);
+      }
+      previousNode = g;
+    }
+  }
+  destroy() {
+    this.resizeObserver.disconnect();
+    this.itemNodeCache.clear();
+    this.svg.remove();
+  }
+  /** Toggle whether the scene SVG receives pointer events (vs overlay handling them). */
+  setPointerEventsNone(value) {
+    this.svg.style.pointerEvents = value ? "none" : "auto";
+  }
+};
+
+// src/scene/clone-item.ts
+function cloneVectorSceneItemWithNewId(item) {
+  const id = createShapeId();
+  const copy = JSON.parse(JSON.stringify(item));
+  let next = { ...copy, id };
+  if (next.toolKind === "arrow" && next.line) {
+    next = {
+      ...next,
+      childrenSvg: buildArrowSvg(id, next.line, resolveStrokeStyle(next))
+    };
+  }
+  if (next.toolKind === "text" && next.text !== void 0) {
+    return rebuildItemSvg(next);
+  }
+  if (next.toolKind === "custom" && next.customInnerSvg && next.customIntrinsicSize) {
+    return rebuildItemSvg(next);
+  }
+  return next;
+}
+function cloneVectorSceneItemsWithNewIds(items) {
+  return items.map(cloneVectorSceneItemWithNewId);
+}
+
+// src/scene/scene.ts
+var VectorScene = class {
+  items = [];
+  getItems() {
+    return this.items;
+  }
+  /**
+   * Replaces the entire scene contents.
+   */
+  setItems(next) {
+    this.items = [...next];
+  }
+  clear() {
+    this.items = [];
+  }
+};
+
+export { ARROW_BIND_SNAP_PX, Camera2D, DEFAULT_STROKE_STYLE, DEFAULT_TEXT_FONT_SIZE, MAX_RASTER_EMBED_DIMENSION, SvgVectorRenderer, VectorScene, applyStrokeToItem, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildArrowSvg, buildCustomShapeChildrenSvg, buildDrawDotSvg, buildEllipseSvg, buildFreehandPathSvg, buildLineSvg, buildRectSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, computeFreehandSvgPayload, createCustomShapeItem, createDrawDotItem, createEllipseItem, createFreehandStrokeItem, createImageFromVectorTrace, createImageItem, createLineItem, createRectangleItem, createShapeId, createTextItem, cullItemsByViewport, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, itemHitTestWorldPoint, lineEndpointsToLocal, loadImageFileAsRasterSceneSource, normalizeRect, rebuildItemSvg, rectsIntersect, resolveArrowBindingsInScene, resolveStrokeStyle, snapArrowEndpointToShape };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map