canvu-react 0.3.5

package/dist/native.js

@@ -0,0 +1,2562 @@
+import { Group, RoundedRect, Circle, Line, vec, Path, matchFont, Text, Canvas, Rect, Oval } from '@shopify/react-native-skia';
+import { memo, forwardRef, useState, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
+import getStroke from 'perfect-freehand';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { PanResponder, View } from 'react-native';
+
+// src/native/NativeInteractionOverlay.tsx
+
+// 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/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/interaction/resize-handles.ts
+function getHandleWorldPosition(bounds, id) {
+  const r = normalizeRect(bounds);
+  const cx = r.x + r.width / 2;
+  const cy = r.y + r.height / 2;
+  switch (id) {
+    case "nw":
+      return { x: r.x, y: r.y };
+    case "n":
+      return { x: cx, y: r.y };
+    case "ne":
+      return { x: r.x + r.width, y: r.y };
+    case "e":
+      return { x: r.x + r.width, y: cy };
+    case "se":
+      return { x: r.x + r.width, y: r.y + r.height };
+    case "s":
+      return { x: cx, y: r.y + r.height };
+    case "sw":
+      return { x: r.x, y: r.y + r.height };
+    case "w":
+      return { x: r.x, y: cy };
+  }
+}
+function getHandleWorldPositionRotated(bounds, handle, rotationRad) {
+  const r = normalizeRect(bounds);
+  const p = getHandleWorldPosition(
+    { x: 0, y: 0, width: r.width, height: r.height },
+    handle
+  );
+  return itemLocalToWorld(p.x, p.y, r.x, r.y, r.width, r.height, rotationRad);
+}
+function getRotationHandleWorldPosition(bounds, rotationRad, handleOffsetWorld) {
+  const r = normalizeRect(bounds);
+  return itemLocalToWorld(
+    r.width / 2,
+    -handleOffsetWorld,
+    r.x,
+    r.y,
+    r.width,
+    r.height,
+    rotationRad
+  );
+}
+
+// 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/custom-shape.ts
+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>`;
+}
+
+// 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 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 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>`;
+}
+
+// src/native/skia-transform.ts
+function parseNum(s) {
+  return Number(s);
+}
+function parseSvgTransform(s) {
+  if (!s || s.trim().length === 0) return [];
+  const clean = s.trim();
+  const result = [];
+  const parts = clean.match(/[a-z]+\([^)]*\)/gi);
+  if (!parts) return [];
+  const reversed = [...parts].reverse();
+  for (const part of reversed) {
+    const m = part.match(/^([a-z]+)\(([^)]*)\)$/i);
+    if (!m) continue;
+    const fn = (m[1] ?? "").toLowerCase();
+    const args = (m[2] ?? "").split(/[\s,]+/).filter(Boolean).map(parseNum);
+    switch (fn) {
+      case "matrix": {
+        const [a, b, c, d, e, f] = args;
+        if (a !== void 0 && d !== void 0 && Math.abs(b ?? 0) < 1e-12 && Math.abs(c ?? 0) < 1e-12 && Math.abs(a - (d ?? 0)) < 1e-12) {
+          result.push({ scale: a });
+        } else if (a !== void 0 && d !== void 0 && Math.abs(b ?? 0) < 1e-12 && Math.abs(c ?? 0) < 1e-12) {
+          result.push({ scaleX: a, scaleY: d });
+        }
+        if (e !== void 0 && !Number.isNaN(e)) result.push({ translateX: e });
+        if (f !== void 0 && !Number.isNaN(f)) result.push({ translateY: f });
+        break;
+      }
+      case "translate": {
+        const [tx, ty] = args;
+        if (tx !== void 0 && !Number.isNaN(tx)) result.push({ translateX: tx });
+        if (ty !== void 0 && !Number.isNaN(ty)) result.push({ translateY: ty });
+        break;
+      }
+      case "scale": {
+        const [sx, sy] = args;
+        if (sx === void 0 || Number.isNaN(sx)) break;
+        if (sy === void 0 || Number.isNaN(sy)) {
+          result.push({ scale: sx });
+        } else {
+          if (Math.abs(sx - sy) < 1e-12) {
+            result.push({ scale: sx });
+          } else {
+            result.push({ scaleX: sx, scaleY: sy });
+          }
+        }
+        break;
+      }
+      case "rotate": {
+        const [deg, cx, cy] = args;
+        if (deg === void 0 || Number.isNaN(deg)) break;
+        const rad = deg * Math.PI / 180;
+        if (cx !== void 0 && cy !== void 0 && !Number.isNaN(cx) && !Number.isNaN(cy)) {
+          result.push({ rotate: rad, origin: { x: cx, y: cy } });
+        } else {
+          result.push({ rotate: rad });
+        }
+        break;
+      }
+    }
+  }
+  return result;
+}
+function skiaCameraTransform(zoom, panX, panY) {
+  return [{ translateX: panX }, { translateY: panY }, { scale: zoom }];
+}
+function skiaItemPlacementTransform(x, y, cx, cy, rotationRad) {
+  const result = [];
+  if (Math.abs(rotationRad) > 1e-12) {
+    result.push({
+      rotate: rotationRad,
+      origin: { x: cx, y: cy }
+    });
+  }
+  result.push({ translateX: x }, { translateY: y });
+  return result;
+}
+var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+function pointsToSmoothPathD(points) {
+  if (points.length < 2) return null;
+  const d = smoothFreehandPointsToPathD(points);
+  return d || null;
+}
+function renderEraserSkeleton(item, overlayStrokePx) {
+  const b = normalizeRect(item.bounds);
+  const sw = Math.max(item.strokeWidth ?? 2, overlayStrokePx);
+  const common = {
+    color: "#cbd5e1",
+    style: "stroke",
+    strokeWidth: sw,
+    strokeCap: "round",
+    strokeJoin: "round",
+    antiAlias: true
+  };
+  const k = item.toolKind;
+  if (k === "rect") {
+    return /* @__PURE__ */ jsx(Rect, { x: 0, y: 0, width: b.width, height: b.height, ...common });
+  }
+  if (k === "ellipse") {
+    const rx = Math.max(0, b.width / 2);
+    const ry = Math.max(0, b.height / 2);
+    if (Math.abs(rx - ry) < 1e-9) {
+      return /* @__PURE__ */ jsx(Circle, { cx: rx, cy: ry, r: rx, ...common });
+    }
+    return /* @__PURE__ */ jsx(Circle, { cx: rx, cy: ry, r: Math.min(rx, ry), ...common });
+  }
+  if ((k === "line" || k === "arrow") && item.line) {
+    const ln = item.line;
+    const geometry = k === "arrow" ? computeStraightArrowGeometry(
+      ln,
+      Math.max(item.strokeWidth ?? 2, overlayStrokePx)
+    ) : null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Line,
+        {
+          p1: vec(ln.x1, ln.y1),
+          p2: vec(geometry?.shaftEndX ?? ln.x2, geometry?.shaftEndY ?? ln.y2),
+          ...common
+        }
+      ),
+      k === "arrow" && geometry ? /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: `M ${geometry.headLeftX} ${geometry.headLeftY} L ${geometry.headTipX} ${geometry.headTipY} L ${geometry.headRightX} ${geometry.headRightY}`,
+          ...common
+        }
+      ) : null
+    ] });
+  }
+  if ((k === "draw" || k === "marker" || k === "pencil" || k === "brush") && item.pathPointsLocal) {
+    const pts = item.pathPointsLocal;
+    if (pts.length === 1 && pts[0]) {
+      const p = pts[0];
+      const dotR = Math.max((item.strokeWidth ?? 2) / 2, 2);
+      return /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: p.x,
+          cy: p.y,
+          r: dotR,
+          color: "#cbd5e1",
+          style: "fill",
+          antiAlias: true
+        }
+      );
+    }
+    const d = pointsToSmoothPathD(pts);
+    if (d) {
+      return /* @__PURE__ */ jsx(Path, { path: d, ...common });
+    }
+  }
+  return /* @__PURE__ */ jsx(Path, { path: `M0 0 h${b.width} v${b.height} h${-b.width} Z`, ...common });
+}
+function NativeInteractionOverlay({
+  camera,
+  width,
+  height,
+  selectedItems,
+  showResizeHandles,
+  placementPreview,
+  eraserTrail,
+  laserTrail,
+  eraserPreviewItems = []
+}) {
+  const z = camera.zoom;
+  const camTransform = skiaCameraTransform(z, camera.x, camera.y);
+  const handleR = 5 / z;
+  const overlayStrokePx = 1.25;
+  const rotateOffsetWorld = 24 / z;
+  const selectionElements = useMemo(() => {
+    if (selectedItems.length === 0) return null;
+    const single = selectedItems.length === 1 ? selectedItems[0] : void 0;
+    const bSingle = single ? normalizeRect(single.bounds) : null;
+    const rotSingle = single?.rotation ?? 0;
+    const rotHandlePos = showResizeHandles && bSingle && single ? getRotationHandleWorldPosition(bSingle, rotSingle, rotateOffsetWorld) : null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      selectedItems.map((it) => {
+        const b = normalizeRect(it.bounds);
+        const cx = b.width / 2;
+        const cy = b.height / 2;
+        const t = skiaItemPlacementTransform(it.x, it.y, cx, cy, it.rotation ?? 0);
+        return /* @__PURE__ */ jsx(Group, { transform: t, children: /* @__PURE__ */ jsx(
+          Rect,
+          {
+            x: 0,
+            y: 0,
+            width: b.width,
+            height: b.height,
+            color: "#3b82f6",
+            style: "stroke",
+            strokeWidth: overlayStrokePx,
+            antiAlias: true
+          }
+        ) }, it.id);
+      }),
+      showResizeHandles && bSingle && single && /* @__PURE__ */ jsxs(Fragment, { children: [
+        HANDLE_ORDER.map((hid) => {
+          const p = getHandleWorldPositionRotated(bSingle, hid, rotSingle);
+          return /* @__PURE__ */ jsx(
+            Circle,
+            {
+              cx: p.x,
+              cy: p.y,
+              r: handleR,
+              color: "#ffffff",
+              style: "fill",
+              antiAlias: true
+            },
+            hid
+          );
+        }),
+        rotHandlePos && /* @__PURE__ */ jsx(
+          Circle,
+          {
+            cx: rotHandlePos.x,
+            cy: rotHandlePos.y,
+            r: handleR * 1.5,
+            color: "#3b82f6",
+            style: "stroke",
+            strokeWidth: overlayStrokePx * 1.2,
+            antiAlias: true
+          }
+        )
+      ] })
+    ] });
+  }, [selectedItems, showResizeHandles, rotateOffsetWorld, handleR]);
+  const previewElements = useMemo(() => {
+    if (!placementPreview) return null;
+    const p = placementPreview;
+    if (p.kind === "rect" || p.kind === "ellipse") {
+      const r = normalizeRect(p.rect);
+      return p.kind === "rect" ? /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: r.x,
+          y: r.y,
+          width: r.width,
+          height: r.height,
+          color: "#64748b",
+          style: "stroke",
+          strokeWidth: overlayStrokePx,
+          antiAlias: true
+        }
+      ) : /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: r.x + r.width / 2,
+          cy: r.y + r.height / 2,
+          r: Math.max(0, r.width / 2),
+          color: "#64748b",
+          style: "stroke",
+          strokeWidth: overlayStrokePx,
+          antiAlias: true
+        }
+      );
+    }
+    if (p.kind === "marquee") {
+      const r = normalizeRect(p.rect);
+      return /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: r.x,
+          y: r.y,
+          width: r.width,
+          height: r.height,
+          color: "rgba(59, 130, 246, 0.12)",
+          style: "fill",
+          antiAlias: true
+        }
+      );
+    }
+    if (p.kind === "line" || p.kind === "arrow") {
+      const geometry = p.kind === "arrow" ? computeStraightArrowGeometry(
+        { x1: p.start.x, y1: p.start.y, x2: p.end.x, y2: p.end.y },
+        overlayStrokePx
+      ) : null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Line,
+          {
+            p1: vec(p.start.x, p.start.y),
+            p2: vec(geometry?.shaftEndX ?? p.end.x, geometry?.shaftEndY ?? p.end.y),
+            color: "#64748b",
+            style: "stroke",
+            strokeWidth: overlayStrokePx,
+            strokeCap: "round",
+            antiAlias: true
+          }
+        ),
+        p.kind === "arrow" && geometry ? /* @__PURE__ */ jsx(
+          Path,
+          {
+            path: `M ${geometry.headLeftX} ${geometry.headLeftY} L ${geometry.headTipX} ${geometry.headTipY} L ${geometry.headRightX} ${geometry.headRightY}`,
+            color: "#64748b",
+            style: "stroke",
+            strokeWidth: overlayStrokePx,
+            strokeCap: "round",
+            strokeJoin: "round",
+            antiAlias: true
+          }
+        ) : null
+      ] });
+    }
+    if (p.kind === "stroke" && p.points.length >= 1) {
+      const payload = computeFreehandSvgPayload(
+        p.points,
+        { stroke: "#64748b", strokeWidth: 3 },
+        "draw",
+        false
+      );
+      if (!payload) return null;
+      if (payload.kind === "circle") {
+        return /* @__PURE__ */ jsx(
+          Circle,
+          {
+            cx: payload.cx,
+            cy: payload.cy,
+            r: payload.r,
+            color: payload.fill,
+            style: "fill",
+            antiAlias: true
+          }
+        );
+      }
+      if (payload.kind === "fillPath") {
+        return /* @__PURE__ */ jsx(Path, { path: payload.d, color: payload.fill, style: "fill", antiAlias: true });
+      }
+      if (payload.kind === "strokePath") {
+        return /* @__PURE__ */ jsx(
+          Path,
+          {
+            path: payload.d,
+            color: "#64748b",
+            style: "stroke",
+            strokeWidth: 3,
+            strokeCap: "round",
+            strokeJoin: "round",
+            antiAlias: true
+          }
+        );
+      }
+      return null;
+    }
+    return null;
+  }, [placementPreview]);
+  const eraserPreviewElements = useMemo(() => {
+    if (eraserPreviewItems.length === 0) return null;
+    return /* @__PURE__ */ jsx(Fragment, { children: eraserPreviewItems.map((it) => {
+      const b = normalizeRect(it.bounds);
+      const cx = b.width / 2;
+      const cy = b.height / 2;
+      const t = skiaItemPlacementTransform(it.x, it.y, cx, cy, it.rotation ?? 0);
+      return /* @__PURE__ */ jsx(Group, { transform: t, children: renderEraserSkeleton(it, overlayStrokePx) }, `erase-${it.id}`);
+    }) });
+  }, [eraserPreviewItems]);
+  const eraserTrailElements = useMemo(() => {
+    if (!eraserTrail || eraserTrail.length < 1) return null;
+    const d = pointsToSmoothPathD(eraserTrail);
+    if (!d)
+      return eraserTrail[0] ? /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: eraserTrail[0].x,
+          cy: eraserTrail[0].y,
+          r: Math.max(5 / z, 3),
+          color: "#cbd5e1",
+          style: "fill",
+          antiAlias: true
+        }
+      ) : null;
+    return /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: d,
+        color: "#cbd5e1",
+        style: "stroke",
+        strokeWidth: Math.max(3.5 / z, overlayStrokePx),
+        strokeCap: "round",
+        strokeJoin: "round",
+        antiAlias: true
+      }
+    );
+  }, [eraserTrail, z]);
+  const laserTrailElements = useMemo(() => {
+    if (!laserTrail || laserTrail.length < 1) return null;
+    const d = pointsToSmoothPathD(laserTrail);
+    if (!d)
+      return laserTrail[0] ? /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: laserTrail[0].x,
+          cy: laserTrail[0].y,
+          r: Math.max(5 / z, 3),
+          color: "#f43f5e",
+          style: "fill",
+          antiAlias: true
+        }
+      ) : null;
+    return /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: d,
+        color: "#f43f5e",
+        style: "stroke",
+        strokeWidth: Math.max(4 / z, overlayStrokePx),
+        strokeCap: "round",
+        strokeJoin: "round",
+        antiAlias: true
+      }
+    );
+  }, [laserTrail, z]);
+  if (width <= 0 || height <= 0) return null;
+  return /* @__PURE__ */ jsx(
+    Canvas,
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width,
+        height
+      },
+      pointerEvents: "none",
+      children: /* @__PURE__ */ jsxs(Group, { transform: camTransform, children: [
+        previewElements,
+        laserTrailElements,
+        eraserTrailElements,
+        eraserPreviewElements,
+        selectionElements
+      ] })
+    }
+  );
+}
+
+// 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);
+}
+function rgbaFromHexAndOpacity(hex, opacity) {
+  if (!hex) return hex;
+  if (opacity == null || opacity >= 1) return hex;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return hex;
+  return `rgba(${r},${g},${b},${opacity})`;
+}
+function toNum(v) {
+  return typeof v === "number" ? v : Number(v) || 0;
+}
+function SvgNodeRenderer({ nodes }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node, i) => /* @__PURE__ */ jsx(SvgNodeItem, { node }, i)) });
+}
+function SvgNodeItem({ node }) {
+  const isFill = node.fill !== "none";
+  const hasStroke = node.stroke != null && node.stroke !== "none";
+  switch (node.kind) {
+    case "rect": {
+      const stroke = rgbaFromHexAndOpacity(node.stroke, node.strokeOpacity);
+      const fill = isFill ? rgbaFromHexAndOpacity(node.fill, node.fillOpacity) ?? node.fill : void 0;
+      const r = node.rx != null ? toNum(node.rx) : 0;
+      const w = toNum(node.width);
+      const h = toNum(node.height);
+      if (r > 0) {
+        return /* @__PURE__ */ jsx(
+          RoundedRect,
+          {
+            x: 0,
+            y: 0,
+            width: w,
+            height: h,
+            r,
+            color: fill ?? stroke,
+            style: fill ? "fill" : hasStroke ? "stroke" : "fill",
+            strokeWidth: hasStroke ? toNum(node.strokeWidth ?? "1") : void 0,
+            antiAlias: true
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: 0,
+          y: 0,
+          width: w,
+          height: h,
+          color: fill ?? stroke,
+          style: fill ? "fill" : hasStroke ? "stroke" : "fill",
+          strokeWidth: hasStroke ? toNum(node.strokeWidth ?? "1") : void 0,
+          antiAlias: true
+        }
+      );
+    }
+    case "ellipse": {
+      const stroke = rgbaFromHexAndOpacity(node.stroke, node.strokeOpacity);
+      const fill = isFill ? rgbaFromHexAndOpacity(node.fill, node.fillOpacity) ?? node.fill : void 0;
+      const cx = toNum(node.cx);
+      const cy = toNum(node.cy);
+      const rx = toNum(node.rx);
+      const ry = toNum(node.ry);
+      if (Math.abs(rx - ry) < 1e-6) {
+        return /* @__PURE__ */ jsx(
+          Circle,
+          {
+            cx,
+            cy,
+            r: rx,
+            color: fill ?? stroke,
+            style: fill ? "fill" : hasStroke ? "stroke" : "fill",
+            strokeWidth: hasStroke ? toNum(node.strokeWidth ?? "1") : void 0,
+            antiAlias: true
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Oval,
+        {
+          x: cx - rx,
+          y: cy - ry,
+          width: rx * 2,
+          height: ry * 2,
+          color: fill ?? stroke,
+          style: fill ? "fill" : hasStroke ? "stroke" : "fill",
+          strokeWidth: hasStroke ? toNum(node.strokeWidth ?? "1") : void 0,
+          antiAlias: true
+        }
+      );
+    }
+    case "circle": {
+      const fill = rgbaFromHexAndOpacity(node.fill, node.fillOpacity) ?? node.fill;
+      const isCircleFill = fill && fill !== "none";
+      const strokeColor = rgbaFromHexAndOpacity(node.stroke, node.strokeOpacity);
+      return /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: toNum(node.cx),
+          cy: toNum(node.cy),
+          r: toNum(node.r),
+          color: isCircleFill ? fill : strokeColor ?? "black",
+          style: isCircleFill ? "fill" : "stroke",
+          strokeWidth: !isCircleFill && hasStroke ? toNum(node.strokeWidth ?? "1") : void 0,
+          antiAlias: true
+        }
+      );
+    }
+    case "line": {
+      const stroke = rgbaFromHexAndOpacity(node.stroke, node.strokeOpacity);
+      return /* @__PURE__ */ jsx(
+        Line,
+        {
+          p1: vec(toNum(node.x1), toNum(node.y1)),
+          p2: vec(toNum(node.x2), toNum(node.y2)),
+          color: stroke ?? "black",
+          style: "stroke",
+          strokeWidth: toNum(node.strokeWidth ?? "1"),
+          strokeCap: node.strokeLinecap === "round" ? "round" : "butt",
+          antiAlias: true
+        }
+      );
+    }
+    case "path": {
+      const stroke = rgbaFromHexAndOpacity(node.stroke, node.strokeOpacity);
+      const fill = isFill ? rgbaFromHexAndOpacity(node.fill, node.fillOpacity) ?? node.fill : void 0;
+      const style = fill && fill !== "none" ? "fill" : "stroke";
+      return /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: node.d,
+          color: style === "fill" ? fill ?? stroke : stroke ?? "black",
+          style,
+          strokeWidth: style === "stroke" ? toNum(node.strokeWidth ?? "1") : void 0,
+          strokeCap: node.strokeLinecap === "round" ? "round" : "butt",
+          strokeJoin: node.strokeLinejoin === "round" ? "round" : "miter",
+          fillType: node.fillRule === "evenodd" ? "evenOdd" : "winding",
+          antiAlias: true
+        }
+      );
+    }
+    case "text": {
+      const fill = node.fill ?? "black";
+      const fs = node.fontSize != null ? toNum(node.fontSize) : 16;
+      const font = matchFont({ fontSize: fs });
+      return /* @__PURE__ */ jsx(Fragment, { children: node.children.map((tspan, i) => /* @__PURE__ */ jsx(
+        Text,
+        {
+          x: tspan.x != null ? toNum(tspan.x) : node.x != null ? toNum(node.x) : 0,
+          y: tspan.dy != null ? (node.y != null ? toNum(node.y) : fs) + toNum(tspan.dy) : (node.y != null ? toNum(node.y) : fs) + i * fs * 1.2,
+          text: tspan.text,
+          color: fill,
+          font
+        },
+        i
+      )) });
+    }
+    case "polygon": {
+      const fill = node.fill ?? "black";
+      return /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: polygonPointsToPath(node.points),
+          color: fill,
+          style: "fill",
+          antiAlias: true
+        }
+      );
+    }
+    case "g": {
+      const transform = node.transform ? parseSvgTransform(node.transform) : void 0;
+      return /* @__PURE__ */ jsx(Group, { transform, children: node.children.map((child, i) => /* @__PURE__ */ jsx(SvgNodeItem, { node: child }, i)) });
+    }
+    case "defs": {
+      return null;
+    }
+    default:
+      return null;
+  }
+}
+function polygonPointsToPath(points) {
+  const nums = points.split(/[\s,]+/).filter(Boolean).map(Number);
+  if (nums.length < 4) return "";
+  let d = `M${nums[0]} ${nums[1]}`;
+  for (let i = 2; i < nums.length; i += 2) {
+    d += ` L${nums[i]} ${nums[i + 1]}`;
+  }
+  d += " Z";
+  return d;
+}
+
+// src/native/svg-parser.ts
+var SELF_CLOSING = /* @__PURE__ */ new Set([
+  "rect",
+  "ellipse",
+  "circle",
+  "line",
+  "path",
+  "polygon",
+  "image"
+]);
+var ATTR_RE = /([a-zA-Z][a-zA-Z0-9_-]*)\s*=\s*"([^"]*)"/g;
+function parseAttrs(raw) {
+  const attrs = {};
+  let m = ATTR_RE.exec(raw);
+  while (m !== null) {
+    const key = m[1];
+    const val = m[2];
+    if (key !== void 0 && val !== void 0) {
+      attrs[key] = val;
+    }
+    m = ATTR_RE.exec(raw);
+  }
+  return attrs;
+}
+function parseNum2(val) {
+  if (val === void 0) return void 0;
+  const n = Number(val);
+  if (Number.isNaN(n)) return val;
+  return n;
+}
+function parseNumR(val, fallback) {
+  return parseNum2(val) ?? fallback;
+}
+function parseNumOpt(val) {
+  if (val === void 0) return void 0;
+  const n = Number(val);
+  return Number.isNaN(n) ? void 0 : n;
+}
+function parseRectNode(attrs) {
+  return {
+    kind: "rect",
+    width: parseNumR(attrs.width, "0"),
+    height: parseNumR(attrs.height, "0"),
+    fill: attrs.fill,
+    fillOpacity: parseNumOpt(attrs["fill-opacity"]),
+    stroke: attrs.stroke,
+    strokeWidth: parseNum2(attrs["stroke-width"]),
+    strokeOpacity: parseNumOpt(attrs["stroke-opacity"]),
+    rx: parseNum2(attrs.rx),
+    shapeRendering: attrs["shape-rendering"]
+  };
+}
+function parseEllipseNode(attrs) {
+  return {
+    kind: "ellipse",
+    cx: parseNumR(attrs.cx, "0"),
+    cy: parseNumR(attrs.cy, "0"),
+    rx: parseNumR(attrs.rx, "0"),
+    ry: parseNumR(attrs.ry, "0"),
+    fill: attrs.fill,
+    fillOpacity: parseNumOpt(attrs["fill-opacity"]),
+    stroke: attrs.stroke,
+    strokeWidth: parseNum2(attrs["stroke-width"]),
+    strokeOpacity: parseNumOpt(attrs["stroke-opacity"]),
+    shapeRendering: attrs["shape-rendering"]
+  };
+}
+function parseCircleNode(attrs) {
+  return {
+    kind: "circle",
+    cx: parseNumR(attrs.cx, "0"),
+    cy: parseNumR(attrs.cy, "0"),
+    r: parseNumR(attrs.r, "0"),
+    fill: attrs.fill,
+    fillOpacity: parseNumOpt(attrs["fill-opacity"]),
+    stroke: attrs.stroke,
+    strokeWidth: parseNum2(attrs["stroke-width"]),
+    strokeOpacity: parseNumOpt(attrs["stroke-opacity"]),
+    shapeRendering: attrs["shape-rendering"]
+  };
+}
+function parseLineNode(attrs) {
+  return {
+    kind: "line",
+    x1: parseNumR(attrs.x1, "0"),
+    y1: parseNumR(attrs.y1, "0"),
+    x2: parseNumR(attrs.x2, "0"),
+    y2: parseNumR(attrs.y2, "0"),
+    stroke: attrs.stroke,
+    strokeWidth: parseNum2(attrs["stroke-width"]),
+    strokeOpacity: parseNumOpt(attrs["stroke-opacity"]),
+    strokeLinecap: attrs["stroke-linecap"],
+    strokeLinejoin: attrs["stroke-linejoin"],
+    markerEnd: attrs["marker-end"],
+    shapeRendering: attrs["shape-rendering"]
+  };
+}
+function parsePathNode(attrs) {
+  return {
+    kind: "path",
+    d: attrs.d ?? "",
+    fill: attrs.fill,
+    fillOpacity: parseNumOpt(attrs["fill-opacity"]),
+    fillRule: attrs["fill-rule"],
+    stroke: attrs.stroke,
+    strokeWidth: parseNum2(attrs["stroke-width"]),
+    strokeOpacity: parseNumOpt(attrs["stroke-opacity"]),
+    strokeLinecap: attrs["stroke-linecap"],
+    strokeLinejoin: attrs["stroke-linejoin"],
+    shapeRendering: attrs["shape-rendering"],
+    vectorEffect: attrs["vector-effect"]
+  };
+}
+function parsePolygonNode(attrs) {
+  return {
+    kind: "polygon",
+    points: attrs.points ?? "",
+    fill: attrs.fill
+  };
+}
+function parseImageNode(attrs) {
+  return {
+    kind: "image",
+    href: attrs.href ?? "",
+    x: parseNumR(attrs.x, "0"),
+    y: parseNumR(attrs.y, "0"),
+    width: parseNumR(attrs.width, "0"),
+    height: parseNumR(attrs.height, "0")
+  };
+}
+function parseTextNode(attrs, children) {
+  return {
+    kind: "text",
+    x: parseNum2(attrs.x),
+    y: parseNum2(attrs.y),
+    fill: attrs.fill,
+    textAnchor: attrs["text-anchor"],
+    fontSize: parseNum2(attrs["font-size"]),
+    fontFamily: attrs["font-family"],
+    children
+  };
+}
+function parseTspanNode(attrs, textContent) {
+  return {
+    kind: "tspan",
+    x: parseNum2(attrs.x),
+    dy: parseNum2(attrs.dy),
+    text: textContent
+  };
+}
+function parseSingleElement(tag, attrs, children, innerText) {
+  switch (tag) {
+    case "rect":
+      return parseRectNode(attrs);
+    case "ellipse":
+      return parseEllipseNode(attrs);
+    case "circle":
+      return parseCircleNode(attrs);
+    case "line":
+      return parseLineNode(attrs);
+    case "path":
+      return parsePathNode(attrs);
+    case "polygon":
+      return parsePolygonNode(attrs);
+    case "image":
+      return parseImageNode(attrs);
+    case "text":
+      return parseTextNode(attrs, parseTspanChildren(innerText));
+    case "g":
+      return { kind: "g", transform: attrs.transform, children };
+    case "defs":
+      return { kind: "defs", children };
+    case "marker":
+      return parseMarkerNode(attrs, children);
+    default:
+      return null;
+  }
+}
+function parseTspanChildren(innerXml) {
+  const result = [];
+  if (!innerXml.includes("<tspan")) {
+    const trimmed = innerXml.trim();
+    if (trimmed) {
+      result.push({ kind: "tspan", text: trimmed });
+    }
+    return result;
+  }
+  const tagRe = /<tspan\b([^>]*)>([\s\S]*?)<\/tspan>/g;
+  let m = tagRe.exec(innerXml);
+  while (m !== null) {
+    const rawAttrs = m[1] ?? "";
+    const text = (m[2] ?? "").trim();
+    result.push(parseTspanNode(parseAttrs(rawAttrs), text));
+    m = tagRe.exec(innerXml);
+  }
+  return result;
+}
+function parseMarkerNode(attrs, children) {
+  return {
+    kind: "marker",
+    id: attrs.id ?? "",
+    markerWidth: parseNumR(attrs.markerWidth, "8"),
+    markerHeight: parseNumR(attrs.markerHeight, "8"),
+    refX: parseNumR(attrs.refX, "6"),
+    refY: parseNumR(attrs.refY, "4"),
+    orient: attrs.orient ?? "auto",
+    children: children.filter((c) => c.kind === "polygon")
+  };
+}
+function stripComments(xml) {
+  return xml.replace(/<!--[\s\S]*?-->/g, "");
+}
+function parseSvgFragment(xml) {
+  if (!xml || xml.trim().length === 0) return [];
+  const clean = stripComments(xml.trim());
+  const nodes = [];
+  let pos = 0;
+  while (pos < clean.length) {
+    const openStart = clean.indexOf("<", pos);
+    if (openStart === -1) break;
+    if (clean[openStart + 1] === "/") {
+      pos = openStart + 1;
+      continue;
+    }
+    const openEnd = clean.indexOf(">", openStart);
+    if (openEnd === -1) break;
+    const openTag = clean.slice(openStart + 1, openEnd);
+    const spaceIdx = openTag.indexOf(" ");
+    openTag.indexOf("/");
+    const tagName = (spaceIdx === -1 ? openTag : openTag.slice(0, spaceIdx)).replace(/\/$/, "").trim();
+    const hasCloseSlash = openTag.endsWith("/");
+    if (SELF_CLOSING.has(tagName) || hasCloseSlash) {
+      const attrs2 = spaceIdx === -1 ? {} : parseAttrs(openTag.slice(spaceIdx + 1).replace(/\/$/, ""));
+      const node2 = parseSingleElement(tagName, attrs2, [], "");
+      if (node2) nodes.push(node2);
+      pos = openEnd + 1;
+      continue;
+    }
+    const closeTag = `</${tagName}>`;
+    const closeIdx = clean.indexOf(closeTag, openEnd);
+    if (closeIdx === -1) {
+      pos = openEnd + 1;
+      continue;
+    }
+    const innerXml = clean.slice(openEnd + 1, closeIdx);
+    const attrs = spaceIdx === -1 ? {} : parseAttrs(openTag.slice(spaceIdx + 1));
+    const children = parseSvgFragment(innerXml);
+    const node = parseSingleElement(tagName, attrs, children, innerXml);
+    if (node) nodes.push(node);
+    pos = closeIdx + closeTag.length;
+  }
+  return nodes;
+}
+function rgba(hex, alpha) {
+  if (alpha == null || alpha >= 1) return hex;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return hex;
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function localBounds(bounds) {
+  const b = normalizeRect(bounds);
+  return { w: Math.max(0, b.width), h: Math.max(0, b.height) };
+}
+function NativeShapeRenderer({ item }) {
+  const style = resolveStrokeStyle(item);
+  const k = item.toolKind;
+  if (k === "rect") {
+    const { w, h } = localBounds(item.bounds);
+    return /* @__PURE__ */ jsx(
+      RoundedRect,
+      {
+        x: 0,
+        y: 0,
+        width: w,
+        height: h,
+        r: 4,
+        color: style.stroke,
+        style: "stroke",
+        strokeWidth: style.strokeWidth,
+        antiAlias: true
+      }
+    );
+  }
+  if (k === "ellipse") {
+    const { w, h } = localBounds(item.bounds);
+    const rx = Math.max(0, w / 2);
+    const ry = Math.max(0, h / 2);
+    if (Math.abs(rx - ry) < 1e-9) {
+      return /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: rx,
+          cy: ry,
+          r: rx,
+          color: style.stroke,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          antiAlias: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Circle,
+      {
+        cx: rx,
+        cy: ry,
+        r: Math.min(rx, ry),
+        color: style.stroke,
+        style: "stroke",
+        strokeWidth: style.strokeWidth,
+        antiAlias: true
+      }
+    );
+  }
+  if ((k === "line" || k === "arrow") && item.line) {
+    const ln = item.line;
+    const color = rgba(style.stroke, style.strokeOpacity);
+    if (k === "line") {
+      return /* @__PURE__ */ jsx(
+        Line,
+        {
+          p1: vec(ln.x1, ln.y1),
+          p2: vec(ln.x2, ln.y2),
+          color,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          antiAlias: true
+        }
+      );
+    }
+    const dx = ln.x2 - ln.x1;
+    const dy = ln.y2 - ln.y1;
+    const len = Math.hypot(dx, dy);
+    if (len < 1e-6) {
+      return /* @__PURE__ */ jsx(
+        Line,
+        {
+          p1: vec(ln.x1, ln.y1),
+          p2: vec(ln.x2, ln.y2),
+          color,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          antiAlias: true
+        }
+      );
+    }
+    const geometry = computeStraightArrowGeometry(ln, style.strokeWidth);
+    if (!geometry) {
+      return /* @__PURE__ */ jsx(
+        Line,
+        {
+          p1: vec(ln.x1, ln.y1),
+          p2: vec(ln.x2, ln.y2),
+          color,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          antiAlias: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Line,
+        {
+          p1: vec(ln.x1, ln.y1),
+          p2: vec(geometry.shaftEndX, geometry.shaftEndY),
+          color,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          antiAlias: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: `M ${geometry.headLeftX} ${geometry.headLeftY} L ${geometry.headTipX} ${geometry.headTipY} L ${geometry.headRightX} ${geometry.headRightY}`,
+          color,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          strokeJoin: "round",
+          antiAlias: true
+        }
+      )
+    ] });
+  }
+  if (k === "text" && item.text !== void 0) {
+    const fs = item.textFontSize ?? 16;
+    const color = rgba(style.stroke, style.strokeOpacity);
+    const lines = item.text.split("\n");
+    const font = matchFont({ fontSize: fs });
+    return /* @__PURE__ */ jsx(Fragment, { children: lines.map((line, i) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        x: 0,
+        y: fs + i * fs * 1.2,
+        text: line,
+        color,
+        font
+      },
+      i
+    )) });
+  }
+  if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item.pathPointsLocal && item.pathPointsLocal.length > 0) {
+    const payload = computeFreehandSvgPayload(item.pathPointsLocal, style, k);
+    if (!payload) return null;
+    const color = rgba(style.stroke, style.strokeOpacity);
+    if (payload.kind === "circle") {
+      return /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: payload.cx,
+          cy: payload.cy,
+          r: payload.r,
+          color: rgba(payload.fill, payload.fillOpacity),
+          style: "fill",
+          antiAlias: true
+        }
+      );
+    }
+    if (payload.kind === "fillPath") {
+      return /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: payload.d,
+          color: rgba(payload.fill, payload.fillOpacity),
+          style: "fill",
+          fillType: "winding",
+          antiAlias: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: payload.d,
+        color,
+        style: "stroke",
+        strokeWidth: payload.strokeWidth,
+        strokeCap: "round",
+        strokeJoin: "round",
+        antiAlias: true
+      }
+    );
+  }
+  if (k === "draw") {
+    const { w, h } = localBounds(item.bounds);
+    const r = Math.min(w, h) / 2;
+    return /* @__PURE__ */ jsx(
+      Circle,
+      {
+        cx: Math.max(0, w) / 2,
+        cy: Math.max(0, h) / 2,
+        r: Math.max(0, r),
+        color: rgba(style.stroke, style.strokeOpacity),
+        style: "fill",
+        antiAlias: true
+      }
+    );
+  }
+  if (k === "image" || k === "custom" || item.childrenSvg) {
+    const nodes = parseSvgFragment(item.childrenSvg);
+    if (nodes.length > 0) {
+      return /* @__PURE__ */ jsx(SvgNodeRenderer, { nodes });
+    }
+  }
+  return null;
+}
+var MemoShape = memo(function MemoShape2({
+  item
+}) {
+  const b = normalizeRect(item.bounds);
+  const cx = b.width / 2;
+  const cy = b.height / 2;
+  const itemTransform = skiaItemPlacementTransform(
+    item.x,
+    item.y,
+    cx,
+    cy,
+    item.rotation ?? 0
+  );
+  return /* @__PURE__ */ jsx(Group, { transform: itemTransform, children: /* @__PURE__ */ jsx(NativeShapeRenderer, { item }) });
+});
+function NativeSceneRenderer({
+  items,
+  camera,
+  width,
+  height
+}) {
+  const cameraTransform = skiaCameraTransform(camera.zoom, camera.x, camera.y);
+  const visible = cullItemsByViewport(
+    items,
+    camera.getVisibleWorldRect(width, height)
+  );
+  if (width <= 0 || height <= 0) return null;
+  return /* @__PURE__ */ jsx(Canvas, { style: { width, height }, children: /* @__PURE__ */ jsx(Group, { transform: cameraTransform, children: visible.map((item) => /* @__PURE__ */ jsx(MemoShape, { item }, item.id)) }) });
+}
+
+// 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/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;
+}
+function collectIdsInRect(items, marquee) {
+  const m = normalizeRect(marquee);
+  const out = [];
+  for (const it of items) {
+    if (it.locked) continue;
+    if (rectsIntersect(normalizeRect(boundsAabbForRotatedItem(it)), m)) {
+      out.push(it.id);
+    }
+  }
+  return out;
+}
+function fitCameraToWorldRect(camera, viewportW, viewportH, worldRect, padding) {
+  const r = normalizeRect(worldRect);
+  if (r.width <= 0 || r.height <= 0 || viewportW <= 0 || viewportH <= 0) return;
+  const pad = Math.max(0, padding);
+  const neededW = r.width * (1 + 2 * pad);
+  const neededH = r.height * (1 + 2 * pad);
+  const zoomX = viewportW / neededW;
+  const zoomY = viewportH / neededH;
+  let z = Math.min(zoomX, zoomY);
+  z = Math.min(camera.maxZoom, Math.max(camera.minZoom, z));
+  const cx = r.x + r.width / 2;
+  const cy = r.y + r.height / 2;
+  camera.zoom = z;
+  camera.x = viewportW / 2 - cx * z;
+  camera.y = viewportH / 2 - cy * z;
+}
+var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
+  items,
+  selectedIds = [],
+  toolId = "hand",
+  interactive = false,
+  onSelectionChange,
+  onItemsChange,
+  onCameraChange,
+  toolbar
+}, ref) {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const cameraRef = useRef(null);
+  const toolIdRef = useRef(toolId);
+  toolIdRef.current = toolId;
+  const onCameraChangeRef = useRef(onCameraChange);
+  onCameraChangeRef.current = onCameraChange;
+  const onItemsChangeRef = useRef(onItemsChange);
+  onItemsChangeRef.current = onItemsChange;
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const selectedIdsRef = useRef(selectedIds);
+  selectedIdsRef.current = selectedIds;
+  const dragStateRef = useRef({ kind: "idle" });
+  const [placementPreview, setPlacementPreview] = useState(
+    null
+  );
+  const [eraserTrail, setEraserTrail] = useState([]);
+  const [eraserPreviewIds, setEraserPreviewIds] = useState([]);
+  const eraserPreviewIdSetRef = useRef(/* @__PURE__ */ new Set());
+  if (!cameraRef.current) {
+    cameraRef.current = new Camera2D({ minZoom: 0.05, maxZoom: 32 });
+  }
+  const camera = cameraRef.current;
+  const [cameraTick, setCameraTick] = useState(0);
+  const screenToWorld = useCallback(
+    (sx, sy) => {
+      const cam = cameraRef.current;
+      if (!cam) return { worldX: 0, worldY: 0 };
+      return cam.screenToWorld(sx, sy);
+    },
+    []
+  );
+  const requestRender = useCallback(() => {
+    setCameraTick((n) => n + 1);
+    onCameraChangeRef.current?.();
+  }, []);
+  const onLayout = useCallback((e) => {
+    const { width, height } = e.nativeEvent.layout;
+    setSize({ width, height });
+  }, []);
+  const selectedItems = useMemo(
+    () => items.filter((it) => selectedIds.includes(it.id)),
+    [items, selectedIds]
+  );
+  const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked;
+  const lastPinchDist = useRef(null);
+  const lastPanPoint = useRef(null);
+  const panResponder = useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (evt) => {
+        lastPinchDist.current = null;
+        lastPanPoint.current = null;
+        const touches = evt.nativeEvent.touches;
+        const sx = evt.nativeEvent.locationX;
+        const sy = evt.nativeEvent.locationY;
+        if (touches && touches.length >= 2) {
+          dragStateRef.current = { kind: "pan" };
+          return;
+        }
+        if (!interactive) {
+          dragStateRef.current = { kind: "pan" };
+          return;
+        }
+        const tool = toolIdRef.current;
+        const cam = cameraRef.current;
+        if (!cam) return;
+        const { worldX, worldY } = screenToWorld(sx, sy);
+        if (tool === "hand") {
+          dragStateRef.current = { kind: "pan" };
+          return;
+        }
+        if (tool === "select") {
+          const hit = hitTestWorldPoint(itemsRef.current, worldX, worldY, {
+            lineHitWorld: 10 / cam.zoom,
+            ignoreLocked: true
+          });
+          if (hit) {
+            const cur = selectedIdsRef.current;
+            const ids = cur.includes(hit.id) ? [...cur] : [hit.id];
+            const snapshots = {};
+            for (const id of ids) {
+              const it = itemsRef.current.find((i) => i.id === id);
+              if (it) snapshots[id] = it;
+            }
+            dragStateRef.current = {
+              kind: "move",
+              ids,
+              snapshots,
+              startWorld: { x: worldX, y: worldY }
+            };
+            if (!cur.includes(hit.id)) {
+              onSelectionChangeRef.current?.([hit.id]);
+            }
+          } else {
+            onSelectionChangeRef.current?.([]);
+            dragStateRef.current = {
+              kind: "marquee",
+              startWorld: { x: worldX, y: worldY }
+            };
+            setPlacementPreview({
+              kind: "marquee",
+              rect: { x: worldX, y: worldY, width: 0, height: 0 }
+            });
+          }
+          return;
+        }
+        if (tool === "draw" || tool === "marker") {
+          dragStateRef.current = {
+            kind: "draw",
+            tool,
+            points: [{ x: worldX, y: worldY }]
+          };
+          return;
+        }
+        if (tool === "eraser") {
+          dragStateRef.current = { kind: "erase" };
+          eraserPreviewIdSetRef.current = /* @__PURE__ */ new Set();
+          setEraserPreviewIds([]);
+          setEraserTrail([{ x: worldX, y: worldY }]);
+          const toErase = collectEraserTargetsAtWorldPoint(
+            itemsRef.current,
+            worldX,
+            worldY,
+            { lineHitWorld: 10 / cam.zoom, ignoreLocked: true }
+          );
+          for (const id of toErase) {
+            eraserPreviewIdSetRef.current.add(id);
+          }
+          setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
+          return;
+        }
+        if (tool === "note" || tool === "text") {
+          dragStateRef.current = {
+            kind: "tap",
+            startWorld: { x: worldX, y: worldY }
+          };
+          return;
+        }
+        dragStateRef.current = { kind: "pan" };
+      },
+      onPanResponderMove: (evt) => {
+        const cam = cameraRef.current;
+        if (!cam) return;
+        const touches = evt.nativeEvent.touches;
+        const sx = evt.nativeEvent.locationX;
+        const sy = evt.nativeEvent.locationY;
+        const pageX = evt.nativeEvent.pageX;
+        const pageY = evt.nativeEvent.pageY;
+        if (touches && touches.length >= 2) {
+          const t0 = touches[0];
+          const t1 = touches[1];
+          if (t0 && t1) {
+            const dx = t1.pageX - t0.pageX;
+            const dy = t1.pageY - t0.pageY;
+            const dist = Math.hypot(dx, dy);
+            if (lastPinchDist.current != null) {
+              const scale = dist / lastPinchDist.current;
+              const cx = (t0.pageX + t1.pageX) / 2;
+              const cy = (t0.pageY + t1.pageY) / 2;
+              cam.setZoom(cam.zoom * scale, { x: cx, y: cy });
+              requestRender();
+            }
+            lastPinchDist.current = dist;
+            lastPanPoint.current = null;
+          }
+          return;
+        }
+        lastPinchDist.current = null;
+        const { worldX, worldY } = screenToWorld(sx, sy);
+        const st = dragStateRef.current;
+        if (st.kind === "pan") {
+          const current = { x: pageX, y: pageY };
+          if (lastPanPoint.current) {
+            const dx = current.x - lastPanPoint.current.x;
+            const dy = current.y - lastPanPoint.current.y;
+            cam.x += dx;
+            cam.y += dy;
+            requestRender();
+          }
+          lastPanPoint.current = current;
+          return;
+        }
+        lastPanPoint.current = null;
+        if (st.kind === "draw") {
+          const pts = st.points;
+          const last = pts[pts.length - 1];
+          const dx = worldX - (last?.x ?? worldX);
+          const dy = worldY - (last?.y ?? worldY);
+          if (Math.hypot(dx, dy) > 0.5 / cam.zoom) {
+            pts.push({ x: worldX, y: worldY });
+          }
+          setPlacementPreview({
+            kind: "stroke",
+            tool: st.tool,
+            points: [...pts]
+          });
+          return;
+        }
+        if (st.kind === "move") {
+          const dx = worldX - st.startWorld.x;
+          const dy = worldY - st.startWorld.y;
+          const change = onItemsChangeRef.current;
+          if (!change) return;
+          const nextList = itemsRef.current.map((it) => {
+            const snap = st.snapshots[it.id];
+            if (!snap) return it;
+            return {
+              ...snap,
+              x: snap.x + dx,
+              y: snap.y + dy,
+              bounds: {
+                ...snap.bounds,
+                x: snap.bounds.x + dx,
+                y: snap.bounds.y + dy
+              }
+            };
+          });
+          change(nextList);
+          return;
+        }
+        if (st.kind === "marquee") {
+          const a = st.startWorld;
+          const b = { x: worldX, y: worldY };
+          const rect = {
+            x: Math.min(a.x, b.x),
+            y: Math.min(a.y, b.y),
+            width: Math.abs(b.x - a.x),
+            height: Math.abs(b.y - a.y)
+          };
+          setPlacementPreview({ kind: "marquee", rect });
+          return;
+        }
+        if (st.kind === "erase") {
+          setEraserTrail((prev) => [...prev, { x: worldX, y: worldY }]);
+          const toErase = collectEraserTargetsAtWorldPoint(
+            itemsRef.current,
+            worldX,
+            worldY,
+            { lineHitWorld: 10 / cam.zoom, ignoreLocked: true }
+          );
+          for (const id of toErase) {
+            eraserPreviewIdSetRef.current.add(id);
+          }
+          setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
+          return;
+        }
+      },
+      onPanResponderRelease: (evt) => {
+        lastPinchDist.current = null;
+        lastPanPoint.current = null;
+        const st = dragStateRef.current;
+        if (st.kind === "draw") {
+          dragStateRef.current = { kind: "idle" };
+          setPlacementPreview(null);
+          if (st.points.length < 1) return;
+          const change = onItemsChangeRef.current;
+          if (!change) return;
+          const id = createShapeId();
+          const item = createFreehandStrokeItem(id, st.points, st.tool);
+          if (item) {
+            change([...itemsRef.current, item]);
+          }
+          return;
+        }
+        if (st.kind === "move") {
+          dragStateRef.current = { kind: "idle" };
+          return;
+        }
+        if (st.kind === "marquee") {
+          dragStateRef.current = { kind: "idle" };
+          setPlacementPreview(null);
+          const cam = cameraRef.current;
+          if (!cam) return;
+          const { worldX, worldY } = screenToWorld(
+            evt.nativeEvent.locationX,
+            evt.nativeEvent.locationY
+          );
+          const a = st.startWorld;
+          if (typeof worldX !== "number" || typeof worldY !== "number") return;
+          const raw = {
+            x: Math.min(a.x, worldX),
+            y: Math.min(a.y, worldY),
+            width: Math.abs(worldX - a.x),
+            height: Math.abs(worldY - a.y)
+          };
+          const picked = collectIdsInRect(itemsRef.current, raw);
+          onSelectionChangeRef.current?.(picked);
+          return;
+        }
+        if (st.kind === "erase") {
+          const change = onItemsChangeRef.current;
+          if (change && eraserPreviewIdSetRef.current.size > 0) {
+            const idSet = new Set(eraserPreviewIdSetRef.current);
+            change(itemsRef.current.filter((i) => !idSet.has(i.id)));
+          }
+          eraserPreviewIdSetRef.current.clear();
+          setEraserPreviewIds([]);
+          setEraserTrail([]);
+          dragStateRef.current = { kind: "idle" };
+          return;
+        }
+        if (st.kind === "tap") {
+          dragStateRef.current = { kind: "idle" };
+          const change = onItemsChangeRef.current;
+          if (!change) return;
+          const tool = toolIdRef.current;
+          if (tool === "note") {
+            const id = createShapeId();
+            const note = {
+              id,
+              x: st.startWorld.x - 70,
+              y: st.startWorld.y - 40,
+              bounds: {
+                x: st.startWorld.x - 70,
+                y: st.startWorld.y - 40,
+                width: 140,
+                height: 80
+              },
+              childrenSvg: `<rect width="140" height="80" rx="8" fill="#fef08a" stroke="#facc15" stroke-width="1" /><text x="10" y="22" fill="#1f2937" font-size="12" font-family="system-ui">Nota</text>`,
+              toolKind: "custom"
+            };
+            change([...itemsRef.current, note]);
+          }
+          return;
+        }
+        dragStateRef.current = { kind: "idle" };
+      },
+      onPanResponderTerminate: () => {
+        lastPinchDist.current = null;
+        lastPanPoint.current = null;
+        dragStateRef.current = { kind: "idle" };
+        setPlacementPreview(null);
+      }
+    }),
+    [screenToWorld, requestRender, interactive]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      getCamera: () => cameraRef.current,
+      requestRender,
+      getViewportSize: () => size,
+      fitWorldRect: (worldRect, options) => {
+        const cam = cameraRef.current;
+        if (!cam || size.width <= 0 || size.height <= 0) return;
+        fitCameraToWorldRect(
+          cam,
+          size.width,
+          size.height,
+          worldRect,
+          options?.padding ?? 0.08
+        );
+        requestRender();
+      }
+    }),
+    [requestRender, size]
+  );
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: { flex: 1, overflow: "hidden" },
+      onLayout,
+      ...panResponder.panHandlers,
+      children: size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          NativeSceneRenderer,
+          {
+            items,
+            camera,
+            width: size.width,
+            height: size.height
+          }
+        ),
+        interactive && /* @__PURE__ */ jsx(
+          NativeInteractionOverlay,
+          {
+            camera,
+            width: size.width,
+            height: size.height,
+            selectedItems,
+            showResizeHandles,
+            placementPreview,
+            eraserTrail,
+            eraserPreviewItems: items.filter(
+              (it) => eraserPreviewIds.includes(it.id)
+            )
+          }
+        ),
+        toolbar && /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              position: "absolute",
+              bottom: 16,
+              left: 16,
+              right: 16,
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            pointerEvents: "box-none",
+            children: toolbar
+          }
+        )
+      ] })
+    }
+  );
+});
+
+export { NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorViewport, parseSvgFragment };
+//# sourceMappingURL=native.js.map
+//# sourceMappingURL=native.js.map