canvu-react 0.3.10 → 0.3.12

package/dist/native.cjs

@@ -703,592 +703,142 @@ function skiaItemPlacementTransform(x, y, cx, cy, rotationRad) {
   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 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 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__ */ jsxRuntime.jsx(reactNativeSkia.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__ */ jsxRuntime.jsx(reactNativeSkia.Circle, { cx: rx, cy: ry, r: rx, ...common });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.Line,
-        {
-          p1: reactNativeSkia.vec(ln.x1, ln.y1),
-          p2: reactNativeSkia.vec(geometry?.shaftEndX ?? ln.x2, geometry?.shaftEndY ?? ln.y2),
-          ...common
-        }
-      ),
-      k === "arrow" && geometry ? /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.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__ */ jsxRuntime.jsx(
-        reactNativeSkia.Circle,
-        {
-          cx: p.x,
-          cy: p.y,
-          r: dotR,
-          color: "#cbd5e1",
-          style: "fill",
-          antiAlias: true
-        }
-      );
-    }
-    const d = pointsToSmoothPathD(pts);
-    if (d) {
-      return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Path, { path: d, ...common });
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Path, { path: `M0 0 h${b.width} v${b.height} h${-b.width} Z`, ...common });
+function toNum(v) {
+  return typeof v === "number" ? v : Number(v) || 0;
 }
-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 = react.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__ */ jsxRuntime.jsxs(jsxRuntime.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__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: t, children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactNativeSkia.Rect,
+function SvgNodeRenderer({ nodes }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes.map((node, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          reactNativeSkia.RoundedRect,
           {
             x: 0,
             y: 0,
-            width: b.width,
-            height: b.height,
-            color: "#3b82f6",
-            style: "stroke",
-            strokeWidth: overlayStrokePx,
+            width: w,
+            height: h,
+            r,
+            color: fill ?? stroke,
+            style: fill ? "fill" : hasStroke ? "stroke" : "fill",
+            strokeWidth: hasStroke ? toNum(node.strokeWidth ?? "1") : void 0,
             antiAlias: true
           }
-        ) }, it.id);
-      }),
-      showResizeHandles && bSingle && single && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        HANDLE_ORDER.map((hid) => {
-          const p = getHandleWorldPositionRotated(bSingle, hid, rotSingle);
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            reactNativeSkia.Circle,
-            {
-              cx: p.x,
-              cy: p.y,
-              r: handleR,
-              color: "#ffffff",
-              style: "fill",
-              antiAlias: true
-            },
-            hid
-          );
-        }),
-        rotHandlePos && /* @__PURE__ */ jsxRuntime.jsx(
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.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__ */ jsxRuntime.jsx(
           reactNativeSkia.Circle,
           {
-            cx: rotHandlePos.x,
-            cy: rotHandlePos.y,
-            r: handleR * 1.5,
-            color: "#3b82f6",
-            style: "stroke",
-            strokeWidth: overlayStrokePx * 1.2,
+            cx,
+            cy,
+            r: rx,
+            color: fill ?? stroke,
+            style: fill ? "fill" : hasStroke ? "stroke" : "fill",
+            strokeWidth: hasStroke ? toNum(node.strokeWidth ?? "1") : void 0,
             antiAlias: true
           }
-        )
-      ] })
-    ] });
-  }, [selectedItems, showResizeHandles, rotateOffsetWorld, handleR]);
-  const previewElements = react.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__ */ jsxRuntime.jsx(
-        reactNativeSkia.Rect,
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.Oval,
         {
-          x: r.x,
-          y: r.y,
-          width: r.width,
-          height: r.height,
-          color: "#64748b",
-          style: "stroke",
-          strokeWidth: overlayStrokePx,
+          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
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
+      );
+    }
+    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__ */ jsxRuntime.jsx(
         reactNativeSkia.Circle,
         {
-          cx: r.x + r.width / 2,
-          cy: r.y + r.height / 2,
-          r: Math.max(0, r.width / 2),
-          color: "#64748b",
+          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__ */ jsxRuntime.jsx(
+        reactNativeSkia.Line,
+        {
+          p1: reactNativeSkia.vec(toNum(node.x1), toNum(node.y1)),
+          p2: reactNativeSkia.vec(toNum(node.x2), toNum(node.y2)),
+          color: stroke ?? "black",
           style: "stroke",
-          strokeWidth: overlayStrokePx,
+          strokeWidth: toNum(node.strokeWidth ?? "1"),
+          strokeCap: node.strokeLinecap === "round" ? "round" : "butt",
           antiAlias: true
         }
       );
     }
-    if (p.kind === "marquee") {
-      const r = normalizeRect(p.rect);
+    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__ */ jsxRuntime.jsx(
-        reactNativeSkia.Rect,
+        reactNativeSkia.Path,
         {
-          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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactNativeSkia.Line,
-          {
-            p1: reactNativeSkia.vec(p.start.x, p.start.y),
-            p2: reactNativeSkia.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__ */ jsxRuntime.jsx(
-          reactNativeSkia.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__ */ jsxRuntime.jsx(
-          reactNativeSkia.Circle,
-          {
-            cx: payload.cx,
-            cy: payload.cy,
-            r: payload.r,
-            color: payload.fill,
-            style: "fill",
-            antiAlias: true
-          }
-        );
-      }
-      if (payload.kind === "fillPath") {
-        return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Path, { path: payload.d, color: payload.fill, style: "fill", antiAlias: true });
-      }
-      if (payload.kind === "strokePath") {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          reactNativeSkia.Path,
-          {
-            path: payload.d,
-            color: "#64748b",
-            style: "stroke",
-            strokeWidth: 3,
-            strokeCap: "round",
-            strokeJoin: "round",
-            antiAlias: true
-          }
-        );
-      }
-      return null;
-    }
-    return null;
-  }, [placementPreview]);
-  const eraserPreviewElements = react.useMemo(() => {
-    if (eraserPreviewItems.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: t, children: renderEraserSkeleton(it, overlayStrokePx) }, `erase-${it.id}`);
-    }) });
-  }, [eraserPreviewItems]);
-  const eraserTrailElements = react.useMemo(() => {
-    if (!eraserTrail || eraserTrail.length < 1) return null;
-    const d = pointsToSmoothPathD(eraserTrail);
-    if (!d)
-      return eraserTrail[0] ? /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.Circle,
-        {
-          cx: eraserTrail[0].x,
-          cy: eraserTrail[0].y,
-          r: Math.max(5 / z, 3),
-          color: "#cbd5e1",
-          style: "fill",
-          antiAlias: true
-        }
-      ) : null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: d,
-        color: "#cbd5e1",
-        style: "stroke",
-        strokeWidth: Math.max(3.5 / z, overlayStrokePx),
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    );
-  }, [eraserTrail, z]);
-  const laserTrailElements = react.useMemo(() => {
-    if (!laserTrail || laserTrail.length < 1) return null;
-    const d = pointsToSmoothPathD(laserTrail);
-    if (!d)
-      return laserTrail[0] ? /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.Circle,
-        {
-          cx: laserTrail[0].x,
-          cy: laserTrail[0].y,
-          r: Math.max(5 / z, 3),
-          color: "#f43f5e",
-          style: "fill",
-          antiAlias: true
-        }
-      ) : null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.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__ */ jsxRuntime.jsx(
-    reactNativeSkia.Canvas,
-    {
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width,
-        height
-      },
-      pointerEvents: "none",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes.map((node, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          reactNativeSkia.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__ */ jsxRuntime.jsx(
-        reactNativeSkia.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__ */ jsxRuntime.jsx(
-          reactNativeSkia.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__ */ jsxRuntime.jsx(
-        reactNativeSkia.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__ */ jsxRuntime.jsx(
-        reactNativeSkia.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__ */ jsxRuntime.jsx(
-        reactNativeSkia.Line,
-        {
-          p1: reactNativeSkia.vec(toNum(node.x1), toNum(node.y1)),
-          p2: reactNativeSkia.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__ */ jsxRuntime.jsx(
-        reactNativeSkia.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",
+          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
         }
       );
@@ -1634,188 +1184,576 @@ function NativeShapeRenderer({ item }) {
     const ry = Math.max(0, h / 2);
     if (Math.abs(rx - ry) < 1e-9) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.Circle,
+        reactNativeSkia.Circle,
+        {
+          cx: rx,
+          cy: ry,
+          r: rx,
+          color: style.stroke,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          antiAlias: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.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__ */ jsxRuntime.jsx(
+        reactNativeSkia.Line,
+        {
+          p1: reactNativeSkia.vec(ln.x1, ln.y1),
+          p2: reactNativeSkia.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__ */ jsxRuntime.jsx(
+        reactNativeSkia.Line,
+        {
+          p1: reactNativeSkia.vec(ln.x1, ln.y1),
+          p2: reactNativeSkia.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__ */ jsxRuntime.jsx(
+        reactNativeSkia.Line,
+        {
+          p1: reactNativeSkia.vec(ln.x1, ln.y1),
+          p2: reactNativeSkia.vec(ln.x2, ln.y2),
+          color,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          antiAlias: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.Line,
+        {
+          p1: reactNativeSkia.vec(ln.x1, ln.y1),
+          p2: reactNativeSkia.vec(geometry.shaftEndX, geometry.shaftEndY),
+          color,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          antiAlias: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.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 = reactNativeSkia.matchFont({ fontSize: fs });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.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__ */ jsxRuntime.jsx(
+        reactNativeSkia.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__ */ jsxRuntime.jsx(
+        reactNativeSkia.Path,
         {
-          cx: rx,
-          cy: ry,
-          r: rx,
-          color: style.stroke,
-          style: "stroke",
-          strokeWidth: style.strokeWidth,
+          path: payload.d,
+          color: rgba(payload.fill, payload.fillOpacity),
+          style: "fill",
+          fillType: "winding",
           antiAlias: true
         }
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Circle,
+      reactNativeSkia.Path,
       {
-        cx: rx,
-        cy: ry,
-        r: Math.min(rx, ry),
-        color: style.stroke,
+        path: payload.d,
+        color,
         style: "stroke",
-        strokeWidth: style.strokeWidth,
+        strokeWidth: payload.strokeWidth,
+        strokeCap: "round",
+        strokeJoin: "round",
         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__ */ jsxRuntime.jsx(
-        reactNativeSkia.Line,
+  if (k === "draw") {
+    const { w, h } = localBounds(item.bounds);
+    const r = Math.min(w, h) / 2;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.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__ */ jsxRuntime.jsx(SvgNodeRenderer, { nodes });
+    }
+  }
+  return null;
+}
+var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+var ERASER_PREVIEW_OPACITY = 0.3;
+function pointsToSmoothPathD(points) {
+  if (points.length < 2) return null;
+  const d = smoothFreehandPointsToPathD(points);
+  return d || null;
+}
+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 = react.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__ */ jsxRuntime.jsxs(jsxRuntime.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__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: t, children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNativeSkia.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        HANDLE_ORDER.map((hid) => {
+          const p = getHandleWorldPositionRotated(bSingle, hid, rotSingle);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNativeSkia.Circle,
+            {
+              cx: p.x,
+              cy: p.y,
+              r: handleR,
+              color: "#ffffff",
+              style: "fill",
+              antiAlias: true
+            },
+            hid
+          );
+        }),
+        rotHandlePos && /* @__PURE__ */ jsxRuntime.jsx(
+          reactNativeSkia.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 = react.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__ */ jsxRuntime.jsx(
+        reactNativeSkia.Rect,
         {
-          p1: reactNativeSkia.vec(ln.x1, ln.y1),
-          p2: reactNativeSkia.vec(ln.x2, ln.y2),
-          color,
+          x: r.x,
+          y: r.y,
+          width: r.width,
+          height: r.height,
+          color: "#64748b",
           style: "stroke",
-          strokeWidth: style.strokeWidth,
-          strokeCap: "round",
+          strokeWidth: overlayStrokePx,
+          antiAlias: true
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.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
         }
       );
     }
-    const dx = ln.x2 - ln.x1;
-    const dy = ln.y2 - ln.y1;
-    const len = Math.hypot(dx, dy);
-    if (len < 1e-6) {
+    if (p.kind === "marquee") {
+      const r = normalizeRect(p.rect);
       return /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.Line,
+        reactNativeSkia.Rect,
         {
-          p1: reactNativeSkia.vec(ln.x1, ln.y1),
-          p2: reactNativeSkia.vec(ln.x2, ln.y2),
-          color,
-          style: "stroke",
-          strokeWidth: style.strokeWidth,
-          strokeCap: "round",
+          x: r.x,
+          y: r.y,
+          width: r.width,
+          height: r.height,
+          color: "rgba(59, 130, 246, 0.12)",
+          style: "fill",
           antiAlias: true
         }
       );
     }
-    const geometry = computeStraightArrowGeometry(ln, style.strokeWidth);
-    if (!geometry) {
+    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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNativeSkia.Line,
+          {
+            p1: reactNativeSkia.vec(p.start.x, p.start.y),
+            p2: reactNativeSkia.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__ */ jsxRuntime.jsx(
+          reactNativeSkia.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__ */ jsxRuntime.jsx(
+          reactNativeSkia.Circle,
+          {
+            cx: payload.cx,
+            cy: payload.cy,
+            r: payload.r,
+            color: payload.fill,
+            style: "fill",
+            antiAlias: true
+          }
+        );
+      }
+      if (payload.kind === "fillPath") {
+        return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Path, { path: payload.d, color: payload.fill, style: "fill", antiAlias: true });
+      }
+      if (payload.kind === "strokePath") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactNativeSkia.Path,
+          {
+            path: payload.d,
+            color: "#64748b",
+            style: "stroke",
+            strokeWidth: 3,
+            strokeCap: "round",
+            strokeJoin: "round",
+            antiAlias: true
+          }
+        );
+      }
+      return null;
+    }
+    return null;
+  }, [placementPreview]);
+  const eraserPreviewElements = react.useMemo(() => {
+    if (eraserPreviewItems.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx(
-        reactNativeSkia.Line,
+        reactNativeSkia.Group,
         {
-          p1: reactNativeSkia.vec(ln.x1, ln.y1),
-          p2: reactNativeSkia.vec(ln.x2, ln.y2),
-          color,
-          style: "stroke",
-          strokeWidth: style.strokeWidth,
-          strokeCap: "round",
-          antiAlias: true
-        }
+          transform: t,
+          opacity: ERASER_PREVIEW_OPACITY,
+          children: /* @__PURE__ */ jsxRuntime.jsx(NativeShapeRenderer, { item: it })
+        },
+        `erase-${it.id}`
       );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.Line,
-        {
-          p1: reactNativeSkia.vec(ln.x1, ln.y1),
-          p2: reactNativeSkia.vec(geometry.shaftEndX, geometry.shaftEndY),
-          color,
-          style: "stroke",
-          strokeWidth: style.strokeWidth,
-          strokeCap: "round",
-          antiAlias: true
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.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 = reactNativeSkia.matchFont({ fontSize: fs });
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.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__ */ jsxRuntime.jsx(
+    }) });
+  }, [eraserPreviewItems]);
+  const eraserTrailElements = react.useMemo(() => {
+    if (!eraserTrail || eraserTrail.length < 1) return null;
+    const d = pointsToSmoothPathD(eraserTrail);
+    if (!d)
+      return eraserTrail[0] ? /* @__PURE__ */ jsxRuntime.jsx(
         reactNativeSkia.Circle,
         {
-          cx: payload.cx,
-          cy: payload.cy,
-          r: payload.r,
-          color: rgba(payload.fill, payload.fillOpacity),
+          cx: eraserTrail[0].x,
+          cy: eraserTrail[0].y,
+          r: Math.max(5 / z, 3),
+          color: "#cbd5e1",
           style: "fill",
           antiAlias: true
         }
-      );
-    }
-    if (payload.kind === "fillPath") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        reactNativeSkia.Path,
+      ) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.Path,
+      {
+        path: d,
+        color: "#cbd5e1",
+        style: "stroke",
+        strokeWidth: Math.max(3.5 / z, overlayStrokePx),
+        strokeCap: "round",
+        strokeJoin: "round",
+        antiAlias: true
+      }
+    );
+  }, [eraserTrail, z]);
+  const laserTrailElements = react.useMemo(() => {
+    if (!laserTrail || laserTrail.length < 1) return null;
+    const d = pointsToSmoothPathD(laserTrail);
+    if (!d)
+      return laserTrail[0] ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.Circle,
         {
-          path: payload.d,
-          color: rgba(payload.fill, payload.fillOpacity),
+          cx: laserTrail[0].x,
+          cy: laserTrail[0].y,
+          r: Math.max(5 / z, 3),
+          color: "#f43f5e",
           style: "fill",
-          fillType: "winding",
           antiAlias: true
         }
-      );
-    }
+      ) : null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactNativeSkia.Path,
       {
-        path: payload.d,
-        color,
+        path: d,
+        color: "#f43f5e",
         style: "stroke",
-        strokeWidth: payload.strokeWidth,
+        strokeWidth: Math.max(4 / z, overlayStrokePx),
         strokeCap: "round",
         strokeJoin: "round",
         antiAlias: true
       }
     );
+  }, [laserTrail, z]);
+  if (width <= 0 || height <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNativeSkia.Canvas,
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width,
+        height
+      },
+      pointerEvents: "none",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.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;
   }
-  if (k === "draw") {
-    const { w, h } = localBounds(item.bounds);
-    const r = Math.min(w, h) / 2;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.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
+  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);
       }
-    );
+    }
   }
-  if (k === "image" || k === "custom" || item.childrenSvg) {
-    const nodes = parseSvgFragment(item.childrenSvg);
-    if (nodes.length > 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx(SvgNodeRenderer, { nodes });
+  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);
+        }
+      }
     }
   }
-  return null;
+  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);
 }
 var MemoShape = react.memo(function MemoShape2({
   item
@@ -1990,16 +1928,14 @@ function itemHitTestWorldPoint(item, worldX, worldY, options) {
           return true;
         }
       }
+      return false;
     }
-    if (pts?.length === 1) {
+    if (pts && 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;
-        }
-      }
+      if (!p) return false;
+      const cw = itemLocalToWorld(p.x, p.y, item.x, item.y, w, h, rot);
+      const dsq = (worldX - cw.x) ** 2 + (worldY - cw.y) ** 2;
+      return dsq <= tolSq;
     }
     return hitTestFilledShape(item, worldX, worldY);
   }
@@ -2118,6 +2054,11 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     () => items.filter((it) => selectedIds.includes(it.id)),
     [items, selectedIds]
   );
+  const sceneItems = react.useMemo(() => {
+    if (eraserPreviewIds.length === 0) return items;
+    const hidden = new Set(eraserPreviewIds);
+    return items.filter((it) => !hidden.has(it.id));
+  }, [items, eraserPreviewIds]);
   const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked;
   const lastPinchDist = react.useRef(null);
   const lastPanPoint = react.useRef(null);
@@ -2443,7 +2384,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         /* @__PURE__ */ jsxRuntime.jsx(
           NativeSceneRenderer,
           {
-            items,
+            items: sceneItems,
             camera,
             width: size.width,
             height: size.height