canvu-react 0.4.19 → 0.4.21

package/dist/native.cjs

@@ -2004,178 +2004,6 @@ function NativeShapeRenderer({ item }) {
   }
   return null;
 }
-var CURSOR_STROKE = "#18181b";
-var CURSOR_STROKE_WIDTH = 2;
-var CROSSHAIR_STROKE_WIDTH = 1.5;
-function NativeDrawCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "M13 21h8",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeMarkerCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "m9 11-6 6v3h9l3-3",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeEraserCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "m5.082 11.09 8.828 8.828",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeCrosshairCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(12, 3),
-        p2: reactNativeSkia.vec(12, 21),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CROSSHAIR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(3, 12),
-        p2: reactNativeSkia.vec(21, 12),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CROSSHAIR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeTextCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(12, 4),
-        p2: reactNativeSkia.vec(12, 20),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(8, 4),
-        p2: reactNativeSkia.vec(16, 4),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(8, 20),
-        p2: reactNativeSkia.vec(16, 20),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeToolCursorGlyph({
-  cursor
-}) {
-  if (cursor.kind === "draw") return /* @__PURE__ */ jsxRuntime.jsx(NativeDrawCursor, {});
-  if (cursor.kind === "marker") return /* @__PURE__ */ jsxRuntime.jsx(NativeMarkerCursor, {});
-  if (cursor.kind === "eraser") return /* @__PURE__ */ jsxRuntime.jsx(NativeEraserCursor, {});
-  if (cursor.kind === "text") return /* @__PURE__ */ jsxRuntime.jsx(NativeTextCursor, {});
-  return /* @__PURE__ */ jsxRuntime.jsx(NativeCrosshairCursor, {});
-}
-function NativeToolCursorRenderer({
-  cursor,
-  point
-}) {
-  const x = point.x - cursor.hotspot.x;
-  const y = point.y - cursor.hotspot.y;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: [{ translateX: x }, { translateY: y }], children: /* @__PURE__ */ jsxRuntime.jsx(NativeToolCursorGlyph, { cursor }) });
-}
 
 // src/native/native-overlay-style.ts
 var ERASER_TINT = "#cbd5e1";
@@ -2232,8 +2060,7 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle,
-  toolCursor
+  previewStrokeStyle
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2610,7 +2437,7 @@ function NativeInteractionOverlay({
     ] });
   }, [laserTrail, z]);
   if (width <= 0 || height <= 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactNativeSkia.Canvas,
     {
       style: {
@@ -2621,22 +2448,13 @@ function NativeInteractionOverlay({
         height
       },
       pointerEvents: "none",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: camTransform, children: [
-          previewElements,
-          laserTrailElements,
-          eraserTrailElements,
-          eraserPreviewElements,
-          selectionElements
-        ] }),
-        toolCursor ? /* @__PURE__ */ jsxRuntime.jsx(
-          NativeToolCursorRenderer,
-          {
-            cursor: toolCursor.cursor,
-            point: toolCursor.point
-          }
-        ) : null
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: camTransform, children: [
+        previewElements,
+        laserTrailElements,
+        eraserTrailElements,
+        eraserPreviewElements,
+        selectionElements
+      ] })
     }
   );
 }
@@ -3974,39 +3792,6 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
   return { ...item, x: nb.x, y: nb.y, bounds: nb };
 }
 
-// src/native/native-tool-cursors.ts
-var ICON_SIZE = 24;
-var CENTER_HOTSPOT = { x: 12, y: 12 };
-function nativeCursorForVectorToolId(toolId) {
-  switch (toolId) {
-    case "rect":
-    case "ellipse":
-    case "architectural-cloud":
-    case "line":
-    case "arrow":
-    case "laser":
-    case "image":
-      return { kind: "crosshair", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
-    case "draw":
-      return { kind: "draw", size: ICON_SIZE, hotspot: { x: 4, y: 18 } };
-    case "marker":
-      return { kind: "marker", size: ICON_SIZE, hotspot: { x: 11, y: 14 } };
-    case "eraser":
-      return { kind: "eraser", size: ICON_SIZE, hotspot: { x: 12, y: 14 } };
-    case "text":
-      return { kind: "text", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
-    default:
-      return null;
-  }
-}
-function nativeCrosshairToolCursor() {
-  return { kind: "crosshair", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
-}
-function nativeFallbackToolCursorPoint(size) {
-  if (size.width <= 0 || size.height <= 0) return null;
-  return { x: size.width / 2, y: size.height / 2 };
-}
-
 // src/native/native-vector-interactions.ts
 var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
 function supportsNativeResizeHandles(item) {
@@ -4151,7 +3936,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onCameraChange,
   customPlacement,
   customPlacements = [],
-  customCrosshairToolIds = [],
   toolbar,
   showStyleInspector = false,
   styleInspectorPlacement = "bottom"
@@ -4174,8 +3958,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   customPlacementRef.current = customPlacement;
   const customPlacementsRef = react.useRef(customPlacements);
   customPlacementsRef.current = customPlacements;
-  const customCrosshairToolIdsRef = react.useRef(customCrosshairToolIds);
-  customCrosshairToolIdsRef.current = customCrosshairToolIds;
   const onSelectionChangeRef = react.useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const itemsRef = react.useRef(items);
@@ -4188,7 +3970,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   );
   const [eraserTrail, setEraserTrail] = react.useState([]);
   const [laserTrail, setLaserTrail] = react.useState([]);
-  const [toolCursorPoint, setToolCursorPoint] = react.useState(null);
   const laserClearTimerRef = react.useRef(null);
   const strokeStyleRef = react.useRef({ ...DEFAULT_STROKE_STYLE });
   const markerStrokeStyleRef = react.useRef({ ...MARKER_TOOL_STYLE });
@@ -4283,60 +4064,14 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     setCameraTick((n) => n + 1);
     onCameraChangeRef.current?.();
   }, []);
-  const cursorForToolId = react.useCallback((nextToolId) => {
-    const builtInCursor = nativeCursorForVectorToolId(nextToolId);
-    if (builtInCursor) return builtInCursor;
-    return customCrosshairToolIdsRef.current.includes(nextToolId) ? nativeCrosshairToolCursor() : null;
+  const onLayout = react.useCallback((e) => {
+    const { width, height } = e.nativeEvent.layout;
+    setSize({ width, height });
+  }, []);
+  const updateToolCursorPoint = react.useCallback((_point) => {
   }, []);
-  const onLayout = react.useCallback(
-    (e) => {
-      const { width, height } = e.nativeEvent.layout;
-      const nextSize = { width, height };
-      setSize(nextSize);
-      if (!interactive) {
-        setToolCursorPoint(null);
-        return;
-      }
-      if (!cursorForToolId(toolIdRef.current)) {
-        setToolCursorPoint(null);
-        return;
-      }
-      setToolCursorPoint(
-        (current) => current ?? nativeFallbackToolCursorPoint(nextSize)
-      );
-    },
-    [cursorForToolId, interactive]
-  );
-  const updateToolCursorPoint = react.useCallback(
-    (point) => {
-      if (!interactive) return;
-      if (!cursorForToolId(toolIdRef.current)) return;
-      setToolCursorPoint(point);
-    },
-    [cursorForToolId, interactive]
-  );
   const hideToolCursor = react.useCallback(() => {
-    setToolCursorPoint(null);
   }, []);
-  const showFallbackToolCursor = react.useCallback(
-    (nextToolId) => {
-      if (!interactive) {
-        setToolCursorPoint(null);
-        return;
-      }
-      if (!cursorForToolId(nextToolId)) {
-        setToolCursorPoint(null);
-        return;
-      }
-      setToolCursorPoint(
-        (current) => current ?? nativeFallbackToolCursorPoint(size)
-      );
-    },
-    [cursorForToolId, interactive, size]
-  );
-  react.useEffect(() => {
-    showFallbackToolCursor(toolId);
-  }, [showFallbackToolCursor, toolId]);
   const selectedItems = react.useMemo(
     () => items.filter((it) => selectedIds.includes(it.id)),
     [items, selectedIds]
@@ -4349,6 +4084,196 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked && supportsNativeResizeHandles(selectedItems[0]);
   const lastPinchDist = react.useRef(null);
   const lastPanPoint = react.useRef(null);
+  const beginDragAtScreenPoint = react.useCallback(
+    (point) => {
+      lastPinchDist.current = null;
+      lastPanPoint.current = null;
+      const sx = point.x;
+      const sy = point.y;
+      updateToolCursorPoint(point);
+      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 currentSelectedIds = selectedIdsRef.current;
+        const selectedItem = currentSelectedIds.length === 1 ? itemsRef.current.find((item) => item.id === currentSelectedIds[0]) : void 0;
+        const selectionHandle = hitTestNativeSelectionHandle({
+          selectedItem,
+          selectedCount: currentSelectedIds.length,
+          worldPoint: { x: worldX, y: worldY },
+          zoom: cam.zoom
+        });
+        if (selectionHandle && selectedItem) {
+          if (selectionHandle.kind === "rotate") {
+            const rotationStart = nativeRotationDragStart({
+              item: selectedItem,
+              worldPoint: { x: worldX, y: worldY }
+            });
+            dragStateRef.current = {
+              kind: "rotate",
+              id: selectedItem.id,
+              snapshot: selectedItem,
+              ...rotationStart
+            };
+            return;
+          }
+          dragStateRef.current = {
+            kind: "resize",
+            id: selectedItem.id,
+            handle: selectionHandle.handle,
+            snapshot: selectedItem,
+            start: {
+              bounds: selectedItem.bounds,
+              line: selectedItem.line
+            }
+          };
+          return;
+        }
+        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" || tool === "laser") {
+        dragStateRef.current = {
+          kind: "draw",
+          tool,
+          points: [{ x: worldX, y: worldY }]
+        };
+        if (tool === "laser") {
+          if (laserClearTimerRef.current) {
+            clearTimeout(laserClearTimerRef.current);
+            laserClearTimerRef.current = null;
+          }
+          setLaserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
+        } else {
+          setPlacementPreview({
+            kind: "stroke",
+            tool,
+            points: [{ x: worldX, y: worldY }],
+            style: { ...strokeStyleRef.current }
+          });
+        }
+        return;
+      }
+      if (tool === "eraser") {
+        dragStateRef.current = { kind: "erase" };
+        eraserPreviewIdSetRef.current = /* @__PURE__ */ new Set();
+        setEraserPreviewIds([]);
+        setEraserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
+        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 (isPlacementTool(tool)) {
+        dragStateRef.current = {
+          kind: "place",
+          tool,
+          startWorld: { x: worldX, y: worldY },
+          startScreen: { x: sx, y: sy }
+        };
+        setPlacementPreview(
+          placementPreviewForTool(
+            tool,
+            { x: worldX, y: worldY },
+            {
+              x: worldX,
+              y: worldY
+            }
+          )
+        );
+        return;
+      }
+      const customPlacement2 = resolveNativeCustomPlacement(
+        tool,
+        customPlacementRef.current,
+        customPlacementsRef.current
+      );
+      if (customPlacement2) {
+        dragStateRef.current = {
+          kind: "custom-place",
+          tool,
+          placement: customPlacement2,
+          startWorld: { x: worldX, y: worldY },
+          startScreen: { x: sx, y: sy }
+        };
+        setPlacementPreview({
+          kind: "rect",
+          rect: { x: worldX, y: worldY, width: 0, height: 0 }
+        });
+        return;
+      }
+      if (tool === "note" || tool === "text") {
+        dragStateRef.current = {
+          kind: "tap",
+          tool,
+          startWorld: { x: worldX, y: worldY },
+          startScreen: { x: sx, y: sy }
+        };
+        return;
+      }
+      const handleWorldPointerDown = onWorldPointerDownRef.current;
+      if (handleWorldPointerDown) {
+        handleWorldPointerDown({
+          toolId: tool,
+          worldX,
+          worldY,
+          screenX: sx,
+          screenY: sy
+        });
+        requestSelectToolAfterUse();
+        return;
+      }
+      dragStateRef.current = { kind: "pan" };
+    },
+    [interactive, requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+  );
   const applyDragMoveAtScreenPoint = react.useCallback(
     (point, pagePoint) => {
       const cam = cameraRef.current;
@@ -4485,6 +4410,220 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     },
     [requestRender, screenToWorld, updateToolCursorPoint]
   );
+  const finishDragAtScreenPoint = react.useCallback(
+    (point) => {
+      lastPinchDist.current = null;
+      lastPanPoint.current = null;
+      updateToolCursorPoint(point);
+      const st = dragStateRef.current;
+      if (st.kind === "draw") {
+        dragStateRef.current = { kind: "idle" };
+        setPlacementPreview(null);
+        if (st.tool === "laser") {
+          if (laserClearTimerRef.current) {
+            clearTimeout(laserClearTimerRef.current);
+          }
+          laserClearTimerRef.current = setTimeout(() => {
+            setLaserTrail([]);
+            laserClearTimerRef.current = null;
+          }, 650);
+          requestSelectToolAfterUse();
+          return;
+        }
+        if (st.points.length < 1) return;
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const id = createShapeId();
+        const item = createFreehandStrokeItem(
+          id,
+          st.points,
+          st.tool,
+          strokeStyleRef.current
+        );
+        if (item) {
+          change([...itemsRef.current, item]);
+        }
+        requestSelectToolAfterUse();
+        return;
+      }
+      if (st.kind === "move") {
+        dragStateRef.current = { kind: "idle" };
+        return;
+      }
+      if (st.kind === "resize" || st.kind === "rotate") {
+        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(point.x, point.y);
+        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" };
+        requestSelectToolAfterUse();
+        return;
+      }
+      if (st.kind === "place") {
+        dragStateRef.current = { kind: "idle" };
+        setPlacementPreview(null);
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const { worldX, worldY } = screenToWorld(point.x, point.y);
+        const a = st.startWorld;
+        const b = { x: worldX, y: worldY };
+        const screenDx = point.x - st.startScreen.x;
+        const screenDy = point.y - st.startScreen.y;
+        if (st.tool === "arrow" && Math.hypot(screenDx, screenDy) < MIN_ARROW_DRAG_PX) {
+          return;
+        }
+        let raw = rectFromCorners(a, b);
+        let br = normalizeRect(raw);
+        let lineStart = a;
+        let lineEnd = b;
+        if (br.width < MIN_PLACE_SIZE || br.height < MIN_PLACE_SIZE) {
+          const center = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+          const defaults = defaultPlacementWorld(st.tool, center);
+          raw = defaults.raw;
+          br = normalizeRect(raw);
+          if (defaults.lineWorld) {
+            const [defaultStart, defaultEnd] = defaults.lineWorld;
+            lineStart = defaultStart;
+            lineEnd = defaultEnd;
+          }
+        }
+        const id = createShapeId();
+        const style = strokeStyleRef.current;
+        if (st.tool === "rect") {
+          change([...itemsRef.current, createRectangleItem(id, raw, style)]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+          return;
+        }
+        if (st.tool === "ellipse") {
+          change([...itemsRef.current, createEllipseItem(id, raw, style)]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+          return;
+        }
+        if (st.tool === "architectural-cloud") {
+          change([
+            ...itemsRef.current,
+            createArchitecturalCloudItem(id, raw, style)
+          ]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+          return;
+        }
+        const line = lineEndpointsToLocal(br, lineStart, lineEnd);
+        change([...itemsRef.current, createLineItem(id, br, line, st.tool, style)]);
+        onSelectionChangeRef.current?.([id]);
+        requestSelectToolAfterUse();
+        return;
+      }
+      if (st.kind === "custom-place") {
+        dragStateRef.current = { kind: "idle" };
+        setPlacementPreview(null);
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const { worldX, worldY } = screenToWorld(point.x, point.y);
+        const center = {
+          x: (st.startWorld.x + worldX) / 2,
+          y: (st.startWorld.y + worldY) / 2
+        };
+        const raw = rectFromCorners(st.startWorld, { x: worldX, y: worldY });
+        const normalized = normalizeRect(raw);
+        const bounds = normalized.width < MIN_PLACE_SIZE || normalized.height < MIN_PLACE_SIZE ? {
+          x: center.x - 60,
+          y: center.y - 40,
+          width: 120,
+          height: 80
+        } : normalized;
+        const id = createShapeId();
+        const item = st.placement.createItem({ id, bounds });
+        change([...itemsRef.current, item]);
+        onSelectionChangeRef.current?.([id]);
+        requestSelectToolAfterUse();
+        return;
+      }
+      if (st.kind === "tap") {
+        dragStateRef.current = { kind: "idle" };
+        const screenDx = point.x - st.startScreen.x;
+        const screenDy = point.y - st.startScreen.y;
+        if (Math.hypot(screenDx, screenDy) > TAP_PX) return;
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        if (st.tool === "text") {
+          const id = createShapeId();
+          const item = createTextItem(
+            id,
+            {
+              x: st.startWorld.x - 4,
+              y: st.startWorld.y - 18,
+              width: 160,
+              height: 26
+            },
+            "Text",
+            strokeStyleRef.current,
+            18
+          );
+          change([...itemsRef.current, item]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+        }
+        if (st.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]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+        }
+        return;
+      }
+      dragStateRef.current = { kind: "idle" };
+    },
+    [requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+  );
+  const handlePointerDown = react.useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      beginDragAtScreenPoint(point);
+    },
+    [beginDragAtScreenPoint]
+  );
   const handlePointerMove = react.useCallback(
     (event) => {
       const point = screenPointFromPointerEvent(event);
@@ -4496,13 +4635,18 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     },
     [applyDragMoveAtScreenPoint, updateToolCursorPoint]
   );
+  const handlePointerUp = react.useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      finishDragAtScreenPoint(point);
+    },
+    [finishDragAtScreenPoint]
+  );
   const panResponder = react.useMemo(
     () => reactNative.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;
@@ -4511,187 +4655,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           dragStateRef.current = { kind: "pan" };
           return;
         }
-        updateToolCursorPoint({ x: sx, y: sy });
-        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 currentSelectedIds = selectedIdsRef.current;
-          const selectedItem = currentSelectedIds.length === 1 ? itemsRef.current.find((item) => item.id === currentSelectedIds[0]) : void 0;
-          const selectionHandle = hitTestNativeSelectionHandle({
-            selectedItem,
-            selectedCount: currentSelectedIds.length,
-            worldPoint: { x: worldX, y: worldY },
-            zoom: cam.zoom
-          });
-          if (selectionHandle && selectedItem) {
-            if (selectionHandle.kind === "rotate") {
-              const rotationStart = nativeRotationDragStart({
-                item: selectedItem,
-                worldPoint: { x: worldX, y: worldY }
-              });
-              dragStateRef.current = {
-                kind: "rotate",
-                id: selectedItem.id,
-                snapshot: selectedItem,
-                ...rotationStart
-              };
-              return;
-            }
-            dragStateRef.current = {
-              kind: "resize",
-              id: selectedItem.id,
-              handle: selectionHandle.handle,
-              snapshot: selectedItem,
-              start: {
-                bounds: selectedItem.bounds,
-                line: selectedItem.line
-              }
-            };
-            return;
-          }
-          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" || tool === "laser") {
-          dragStateRef.current = {
-            kind: "draw",
-            tool,
-            points: [{ x: worldX, y: worldY }]
-          };
-          if (tool === "laser") {
-            if (laserClearTimerRef.current) {
-              clearTimeout(laserClearTimerRef.current);
-              laserClearTimerRef.current = null;
-            }
-            setLaserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
-          } else {
-            setPlacementPreview({
-              kind: "stroke",
-              tool,
-              points: [{ x: worldX, y: worldY }],
-              style: { ...strokeStyleRef.current }
-            });
-          }
-          return;
-        }
-        if (tool === "eraser") {
-          dragStateRef.current = { kind: "erase" };
-          eraserPreviewIdSetRef.current = /* @__PURE__ */ new Set();
-          setEraserPreviewIds([]);
-          setEraserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
-          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 (isPlacementTool(tool)) {
-          dragStateRef.current = {
-            kind: "place",
-            tool,
-            startWorld: { x: worldX, y: worldY },
-            startScreen: { x: sx, y: sy }
-          };
-          setPlacementPreview(
-            placementPreviewForTool(
-              tool,
-              { x: worldX, y: worldY },
-              {
-                x: worldX,
-                y: worldY
-              }
-            )
-          );
-          return;
-        }
-        const customPlacement2 = resolveNativeCustomPlacement(
-          tool,
-          customPlacementRef.current,
-          customPlacementsRef.current
-        );
-        if (customPlacement2) {
-          dragStateRef.current = {
-            kind: "custom-place",
-            tool,
-            placement: customPlacement2,
-            startWorld: { x: worldX, y: worldY },
-            startScreen: { x: sx, y: sy }
-          };
-          setPlacementPreview({
-            kind: "rect",
-            rect: { x: worldX, y: worldY, width: 0, height: 0 }
-          });
-          return;
-        }
-        if (tool === "note" || tool === "text") {
-          dragStateRef.current = {
-            kind: "tap",
-            tool,
-            startWorld: { x: worldX, y: worldY },
-            startScreen: { x: sx, y: sy }
-          };
-          return;
-        }
-        const handleWorldPointerDown = onWorldPointerDownRef.current;
-        if (handleWorldPointerDown) {
-          handleWorldPointerDown({
-            toolId: tool,
-            worldX,
-            worldY,
-            screenX: sx,
-            screenY: sy
-          });
-          requestSelectToolAfterUse();
-          return;
-        }
-        dragStateRef.current = { kind: "pan" };
+        beginDragAtScreenPoint({ x: sx, y: sy });
       },
       onPanResponderMove: (evt) => {
         const cam = cameraRef.current;
@@ -4725,223 +4689,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         applyDragMoveAtScreenPoint({ x: sx, y: sy }, { x: pageX, y: pageY });
       },
       onPanResponderRelease: (evt) => {
-        lastPinchDist.current = null;
-        lastPanPoint.current = null;
-        updateToolCursorPoint({
+        finishDragAtScreenPoint({
           x: evt.nativeEvent.locationX,
           y: evt.nativeEvent.locationY
         });
-        const st = dragStateRef.current;
-        if (st.kind === "draw") {
-          dragStateRef.current = { kind: "idle" };
-          setPlacementPreview(null);
-          if (st.tool === "laser") {
-            if (laserClearTimerRef.current) {
-              clearTimeout(laserClearTimerRef.current);
-            }
-            laserClearTimerRef.current = setTimeout(() => {
-              setLaserTrail([]);
-              laserClearTimerRef.current = null;
-            }, 650);
-            requestSelectToolAfterUse();
-            return;
-          }
-          if (st.points.length < 1) return;
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          const id = createShapeId();
-          const item = createFreehandStrokeItem(
-            id,
-            st.points,
-            st.tool,
-            strokeStyleRef.current
-          );
-          if (item) {
-            change([...itemsRef.current, item]);
-          }
-          requestSelectToolAfterUse();
-          return;
-        }
-        if (st.kind === "move") {
-          dragStateRef.current = { kind: "idle" };
-          return;
-        }
-        if (st.kind === "resize" || st.kind === "rotate") {
-          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" };
-          requestSelectToolAfterUse();
-          return;
-        }
-        if (st.kind === "place") {
-          dragStateRef.current = { kind: "idle" };
-          setPlacementPreview(null);
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          const { worldX, worldY } = screenToWorld(
-            evt.nativeEvent.locationX,
-            evt.nativeEvent.locationY
-          );
-          const a = st.startWorld;
-          const b = { x: worldX, y: worldY };
-          const screenDx = evt.nativeEvent.locationX - st.startScreen.x;
-          const screenDy = evt.nativeEvent.locationY - st.startScreen.y;
-          if (st.tool === "arrow" && Math.hypot(screenDx, screenDy) < MIN_ARROW_DRAG_PX) {
-            return;
-          }
-          let raw = rectFromCorners(a, b);
-          let br = normalizeRect(raw);
-          let lineStart = a;
-          let lineEnd = b;
-          if (br.width < MIN_PLACE_SIZE || br.height < MIN_PLACE_SIZE) {
-            const center = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-            const defaults = defaultPlacementWorld(st.tool, center);
-            raw = defaults.raw;
-            br = normalizeRect(raw);
-            if (defaults.lineWorld) {
-              const [defaultStart, defaultEnd] = defaults.lineWorld;
-              lineStart = defaultStart;
-              lineEnd = defaultEnd;
-            }
-          }
-          const id = createShapeId();
-          const style = strokeStyleRef.current;
-          if (st.tool === "rect") {
-            change([...itemsRef.current, createRectangleItem(id, raw, style)]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-            return;
-          }
-          if (st.tool === "ellipse") {
-            change([...itemsRef.current, createEllipseItem(id, raw, style)]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-            return;
-          }
-          if (st.tool === "architectural-cloud") {
-            change([
-              ...itemsRef.current,
-              createArchitecturalCloudItem(id, raw, style)
-            ]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-            return;
-          }
-          const line = lineEndpointsToLocal(br, lineStart, lineEnd);
-          change([
-            ...itemsRef.current,
-            createLineItem(id, br, line, st.tool, style)
-          ]);
-          onSelectionChangeRef.current?.([id]);
-          requestSelectToolAfterUse();
-          return;
-        }
-        if (st.kind === "custom-place") {
-          dragStateRef.current = { kind: "idle" };
-          setPlacementPreview(null);
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          const { worldX, worldY } = screenToWorld(
-            evt.nativeEvent.locationX,
-            evt.nativeEvent.locationY
-          );
-          const center = {
-            x: (st.startWorld.x + worldX) / 2,
-            y: (st.startWorld.y + worldY) / 2
-          };
-          const raw = rectFromCorners(st.startWorld, { x: worldX, y: worldY });
-          const normalized = normalizeRect(raw);
-          const bounds = normalized.width < MIN_PLACE_SIZE || normalized.height < MIN_PLACE_SIZE ? {
-            x: center.x - 60,
-            y: center.y - 40,
-            width: 120,
-            height: 80
-          } : normalized;
-          const id = createShapeId();
-          const item = st.placement.createItem({ id, bounds });
-          change([...itemsRef.current, item]);
-          onSelectionChangeRef.current?.([id]);
-          requestSelectToolAfterUse();
-          return;
-        }
-        if (st.kind === "tap") {
-          dragStateRef.current = { kind: "idle" };
-          const screenDx = evt.nativeEvent.locationX - st.startScreen.x;
-          const screenDy = evt.nativeEvent.locationY - st.startScreen.y;
-          if (Math.hypot(screenDx, screenDy) > TAP_PX) return;
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          if (st.tool === "text") {
-            const id = createShapeId();
-            const item = createTextItem(
-              id,
-              {
-                x: st.startWorld.x - 4,
-                y: st.startWorld.y - 18,
-                width: 160,
-                height: 26
-              },
-              "Text",
-              strokeStyleRef.current,
-              18
-            );
-            change([...itemsRef.current, item]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-          }
-          if (st.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]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-          }
-          return;
-        }
-        dragStateRef.current = { kind: "idle" };
       },
       onPanResponderTerminate: () => {
         lastPinchDist.current = null;
@@ -4957,11 +4708,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     }),
     [
       applyDragMoveAtScreenPoint,
-      screenToWorld,
+      beginDragAtScreenPoint,
+      finishDragAtScreenPoint,
       requestRender,
-      requestSelectToolAfterUse,
-      interactive,
-      updateToolCursorPoint,
       hideToolCursor
     ]
   );
@@ -4987,14 +4736,14 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     [requestRender, size]
   );
   const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
-  const activeToolCursor = cursorForToolId(toolId);
-  const toolCursor = activeToolCursor && toolCursorPoint ? { cursor: activeToolCursor, point: toolCursorPoint } : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
       style: { flex: 1, overflow: "hidden" },
       onLayout,
+      onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
       onPointerEnter: handlePointerMove,
       onPointerLeave: hideToolCursor,
       ...panResponder.panHandlers,
@@ -5022,8 +4771,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
             ),
-            previewStrokeStyle: strokeStyleState,
-            toolCursor
+            previewStrokeStyle: strokeStyleState
           }
         ),
         interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsxRuntime.jsx(