canvu-react 0.4.53 → 0.4.55

package/dist/native.js

@@ -1193,6 +1193,9 @@ function cloneVectorSceneItemWithNewId(item) {
   }
   return next;
 }
+function cloneVectorSceneItemsWithNewIds(items) {
+  return items.map(cloneVectorSceneItemWithNewId);
+}
 
 // src/scene/managed-images.ts
 var MANAGED_KEY = "managed";
@@ -1256,8 +1259,68 @@ function rotateManagedImage(items, id) {
 function deleteManagedImage(items, id) {
   return restackManagedImages(items.filter((i) => i.id !== id));
 }
+function reorderManagedImages(items, orderedManagedIds) {
+  const managedSlots = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item && isManagedImage(item)) managedSlots.push(i);
+  }
+  if (managedSlots.length !== orderedManagedIds.length) {
+    return [...items];
+  }
+  const byId = new Map(items.map((i) => [i.id, i]));
+  const next = [...items];
+  managedSlots.forEach((slot, k) => {
+    const orderedId = orderedManagedIds[k];
+    if (orderedId === void 0) return;
+    const replacement = byId.get(orderedId);
+    if (replacement) next[slot] = replacement;
+  });
+  return restackManagedImages(next);
+}
+
+// src/native/native-images-menu-reorder.ts
+function moveNativeManagedImageId(managedIds, fromIndex, toIndex) {
+  const next = [...managedIds];
+  if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= next.length || toIndex >= next.length) {
+    return next;
+  }
+  const [item] = next.splice(fromIndex, 1);
+  if (item === void 0) return next;
+  next.splice(toIndex, 0, item);
+  return next;
+}
+function getNativeImagesMenuReorderIndex({
+  activeId,
+  managedIds,
+  rowLayouts,
+  dragDeltaY
+}) {
+  const currentIndex = managedIds.indexOf(activeId);
+  if (currentIndex < 0) return -1;
+  const layoutById = new Map(rowLayouts.map((layout) => [layout.id, layout]));
+  const activeLayout = layoutById.get(activeId);
+  if (!activeLayout) return currentIndex;
+  const activeCenterY = activeLayout.y + activeLayout.height / 2 + dragDeltaY;
+  let nextIndex = currentIndex;
+  let closestDistance = Infinity;
+  for (let index = 0; index < managedIds.length; index++) {
+    const id = managedIds[index];
+    if (id === void 0) continue;
+    const layout = layoutById.get(id);
+    if (!layout) continue;
+    const centerY = layout.y + layout.height / 2;
+    const distance = Math.abs(activeCenterY - centerY);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      nextIndex = index;
+    }
+  }
+  return nextIndex;
+}
 var defaultLabels = {
   title: "Images",
+  dragHandle: "Drag to reorder",
   focus: "Focus on canvas",
   duplicate: "Duplicate",
   rotate: "Rotate",
@@ -1329,61 +1392,110 @@ function NativeImagesMenuRow({
   item,
   items,
   labels,
+  isDragging,
+  isDropTarget,
+  dragDeltaY,
   onItemsChange,
   onFocusItem,
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  onRowLayout,
   getImageUri,
   renderThumbnail,
   rowStyle,
   actionButtonStyle
 }) {
   const imageUri = getImageUri(item);
-  return /* @__PURE__ */ jsxs(View, { style: [styles.row, rowStyle], children: [
-    /* @__PURE__ */ jsx(View, { style: styles.handle, children: /* @__PURE__ */ jsx(NativeImagesMenuIcon, { name: "grip", color: "#94a3b8" }) }),
-    /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: labels.focus,
-        disabled: !onFocusItem,
-        onPress: () => onFocusItem?.(item),
-        style: styles.thumbnailButton,
-        children: /* @__PURE__ */ jsxs(View, { style: styles.thumbnailBox, children: [
-          renderThumbnail ? renderThumbnail(item) : null,
-          !renderThumbnail && imageUri ? /* @__PURE__ */ jsx(Image$1, { source: { uri: imageUri }, style: styles.thumbnailImage }) : null
+  const panResponder = useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => onDragStart(item.id),
+      onPanResponderMove: (_event, gestureState) => onDragMove(item.id, gestureState.dy),
+      onPanResponderRelease: (_event, gestureState) => onDragEnd(item.id, gestureState.dy),
+      onPanResponderTerminate: (_event, gestureState) => onDragEnd(item.id, gestureState.dy),
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true
+    }),
+    [item.id, onDragEnd, onDragMove, onDragStart]
+  );
+  const onLayout = useCallback(
+    (event) => {
+      const { height, y } = event.nativeEvent.layout;
+      onRowLayout({ id: item.id, y, height });
+    },
+    [item.id, onRowLayout]
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      onLayout,
+      style: [
+        styles.row,
+        rowStyle,
+        isDropTarget && styles.dropTargetRow,
+        isDragging && styles.draggingRow,
+        isDragging && { transform: [{ translateY: dragDeltaY }] }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.dragHandle,
+            style: [styles.handle, isDragging && styles.handleDragging],
+            ...panResponder.panHandlers,
+            children: /* @__PURE__ */ jsx(NativeImagesMenuIcon, { name: "grip", color: "#94a3b8" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.focus,
+            disabled: !onFocusItem,
+            onPress: () => onFocusItem?.(item),
+            style: styles.thumbnailButton,
+            children: /* @__PURE__ */ jsxs(View, { style: styles.thumbnailBox, children: [
+              renderThumbnail ? renderThumbnail(item) : null,
+              !renderThumbnail && imageUri ? /* @__PURE__ */ jsx(Image$1, { source: { uri: imageUri }, style: styles.thumbnailImage }) : null
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.actionsColumn, children: [
+          /* @__PURE__ */ jsx(
+            NativeImagesMenuAction,
+            {
+              label: labels.duplicate,
+              onPress: () => onItemsChange(copyManagedImage(items, item.id)),
+              style: actionButtonStyle,
+              children: /* @__PURE__ */ jsx(NativeImagesMenuIcon, { name: "copy" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NativeImagesMenuAction,
+            {
+              label: labels.rotate,
+              onPress: () => onItemsChange(rotateManagedImage(items, item.id)),
+              style: actionButtonStyle,
+              children: /* @__PURE__ */ jsx(NativeImagesMenuIcon, { name: "rotate" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NativeImagesMenuAction,
+            {
+              label: labels.delete,
+              danger: true,
+              onPress: () => onItemsChange(deleteManagedImage(items, item.id)),
+              style: actionButtonStyle,
+              children: /* @__PURE__ */ jsx(NativeImagesMenuIcon, { name: "trash", color: "#b91c1c" })
+            }
+          )
         ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs(View, { style: styles.actionsColumn, children: [
-      /* @__PURE__ */ jsx(
-        NativeImagesMenuAction,
-        {
-          label: labels.duplicate,
-          onPress: () => onItemsChange(copyManagedImage(items, item.id)),
-          style: actionButtonStyle,
-          children: /* @__PURE__ */ jsx(NativeImagesMenuIcon, { name: "copy" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        NativeImagesMenuAction,
-        {
-          label: labels.rotate,
-          onPress: () => onItemsChange(rotateManagedImage(items, item.id)),
-          style: actionButtonStyle,
-          children: /* @__PURE__ */ jsx(NativeImagesMenuIcon, { name: "rotate" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        NativeImagesMenuAction,
-        {
-          label: labels.delete,
-          danger: true,
-          onPress: () => onItemsChange(deleteManagedImage(items, item.id)),
-          style: actionButtonStyle,
-          children: /* @__PURE__ */ jsx(NativeImagesMenuIcon, { name: "trash", color: "#b91c1c" })
-        }
-      )
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 function NativeImagesMenu({
   items,
@@ -1400,7 +1512,69 @@ function NativeImagesMenu({
   renderThumbnail
 }) {
   const managed = useMemo(() => items.filter(isManagedImage), [items]);
+  const managedIds = useMemo(() => managed.map((item) => item.id), [managed]);
   const [collapsed, setCollapsed] = useState(!defaultOpen);
+  const [dragState, setDragState] = useState(null);
+  const rowLayoutsRef = useRef(/* @__PURE__ */ new Map());
+  const getRowLayouts = useCallback(
+    () => managedIds.map((id) => rowLayoutsRef.current.get(id)).filter((layout) => layout != null),
+    [managedIds]
+  );
+  const handleRowLayout = useCallback((layout) => {
+    rowLayoutsRef.current.set(layout.id, layout);
+  }, []);
+  const handleDragStart = useCallback(
+    (id) => {
+      const fromIndex = managedIds.indexOf(id);
+      if (fromIndex < 0) return;
+      setDragState({
+        activeId: id,
+        fromIndex,
+        currentIndex: fromIndex,
+        dragDeltaY: 0
+      });
+    },
+    [managedIds]
+  );
+  const handleDragMove = useCallback(
+    (id, dragDeltaY) => {
+      setDragState((current) => {
+        if (!current || current.activeId !== id) return current;
+        const currentIndex = getNativeImagesMenuReorderIndex({
+          activeId: id,
+          managedIds,
+          rowLayouts: getRowLayouts(),
+          dragDeltaY
+        });
+        return {
+          ...current,
+          currentIndex: currentIndex >= 0 ? currentIndex : current.fromIndex,
+          dragDeltaY
+        };
+      });
+    },
+    [getRowLayouts, managedIds]
+  );
+  const handleDragEnd = useCallback(
+    (id, dragDeltaY) => {
+      const fromIndex = managedIds.indexOf(id);
+      const currentIndex = getNativeImagesMenuReorderIndex({
+        activeId: id,
+        managedIds,
+        rowLayouts: getRowLayouts(),
+        dragDeltaY
+      });
+      setDragState(null);
+      if (fromIndex < 0 || currentIndex < 0 || fromIndex === currentIndex) return;
+      const orderedIds = moveNativeManagedImageId(
+        managedIds,
+        fromIndex,
+        currentIndex
+      );
+      onItemsChange(reorderManagedImages(items, orderedIds));
+    },
+    [getRowLayouts, items, managedIds, onItemsChange]
+  );
   if (managed.length === 0) return null;
   const resolvedLabels = resolveLabels(labels);
   if (collapsed) {
@@ -1445,15 +1619,23 @@ function NativeImagesMenu({
       {
         style: styles.listScroll,
         contentContainerStyle: styles.listContent,
+        scrollEnabled: dragState == null,
         showsVerticalScrollIndicator: false,
-        children: managed.map((item) => /* @__PURE__ */ jsx(
+        children: managed.map((item, index) => /* @__PURE__ */ jsx(
           NativeImagesMenuRow,
           {
             item,
             items,
             labels: resolvedLabels,
+            isDragging: dragState?.activeId === item.id,
+            isDropTarget: dragState != null && dragState.activeId !== item.id && dragState.currentIndex === index,
+            dragDeltaY: dragState?.activeId === item.id ? dragState.dragDeltaY : 0,
             onItemsChange,
             onFocusItem,
+            onDragStart: handleDragStart,
+            onDragMove: handleDragMove,
+            onDragEnd: handleDragEnd,
+            onRowLayout: handleRowLayout,
             getImageUri,
             renderThumbnail,
             rowStyle,
@@ -1513,6 +1695,19 @@ var styles = StyleSheet.create({
   dangerActionButton: {
     backgroundColor: "#fef2f2"
   },
+  draggingRow: {
+    backgroundColor: "#eef2f7",
+    elevation: 4,
+    opacity: 0.85,
+    zIndex: 1
+  },
+  dropTargetRow: {
+    backgroundColor: "#f8fafc"
+  },
+  handleDragging: {
+    backgroundColor: "#e2e8f0",
+    borderRadius: 6
+  },
   handle: {
     alignItems: "center",
     height: 128,
@@ -3139,6 +3334,26 @@ function pointInNativeSelectedItemBounds(item, worldPoint) {
   );
   return local.x >= 0 && local.x <= bounds.width && local.y >= 0 && local.y <= bounds.height;
 }
+function resolveNativeSelectionContextMenuRequest({
+  interactive,
+  toolId,
+  selectedItems,
+  worldPoint,
+  screenPoint
+}) {
+  if (!interactive || toolId !== "select") return null;
+  const editableSelectedItems = selectedItems.filter((item) => !item.locked);
+  if (editableSelectedItems.length === 0) return null;
+  const pressedSelectedItem = editableSelectedItems.some(
+    (item) => pointInNativeSelectedItemBounds(item, worldPoint)
+  );
+  if (!pressedSelectedItem) return null;
+  return {
+    itemIds: editableSelectedItems.map((item) => item.id),
+    x: screenPoint.x,
+    y: screenPoint.y
+  };
+}
 function resolveNativeCustomPlacement(toolId, customPlacement, customPlacements) {
   if (customPlacement?.toolId === toolId) return customPlacement;
   return customPlacements?.find((placement) => placement.toolId === toolId) ?? null;
@@ -5058,6 +5273,18 @@ function applyRotationFromPointer(item, startRotation, startPointerAngleRad, poi
   }
   return { ...item, rotation: startRotation + delta };
 }
+function moveItemByDelta(item, dx, dy) {
+  return {
+    ...item,
+    x: item.x + dx,
+    y: item.y + dy,
+    bounds: {
+      ...item.bounds,
+      x: item.bounds.x + dx,
+      y: item.bounds.y + dy
+    }
+  };
+}
 function resizeItemByHandle(item, start, handle, currentWorld) {
   const sb = normalizeRect(start.bounds);
   if (!itemAllowsResizeHandle(item, handle)) {
@@ -5282,6 +5509,39 @@ function hitTestNativeRemotePresence(peers, camera, point) {
   return null;
 }
 
+// src/native/native-shape-clipboard.ts
+var NATIVE_SHAPE_CLIPBOARD_PASTE_OFFSET_WORLD = 24;
+function copyNativeSelectedShapeItems(items, selectedIds) {
+  if (selectedIds.length === 0) return null;
+  const copies = selectedIds.map((id) => items.find((item) => item.id === id)).filter((item) => item != null);
+  if (copies.length === 0) return null;
+  return copies.map((item) => JSON.parse(JSON.stringify(item)));
+}
+function pasteNativeShapeClipboard(input) {
+  if (input.clipboard.length === 0) return null;
+  const clones = cloneVectorSceneItemsWithNewIds(input.clipboard);
+  const moved = clones.map(
+    (item) => moveItemByDelta(
+      item,
+      NATIVE_SHAPE_CLIPBOARD_PASTE_OFFSET_WORLD,
+      NATIVE_SHAPE_CLIPBOARD_PASTE_OFFSET_WORLD
+    )
+  );
+  if (moved.length === 0) return null;
+  return {
+    items: [...input.items, ...moved],
+    selectedIds: moved.map((item) => item.id)
+  };
+}
+function duplicateNativeSelectedShapes(input) {
+  const clipboard = copyNativeSelectedShapeItems(input.items, input.selectedIds);
+  if (!clipboard) return null;
+  return pasteNativeShapeClipboard({
+    items: input.items,
+    clipboard
+  });
+}
+
 // src/native/native-transient-items.ts
 function moveNativeTransientItems({
   items,
@@ -5330,6 +5590,11 @@ var NATIVE_VIEWPORT_OVERLAY_Z_INDEX = 40;
 var NATIVE_VIEWPORT_OVERLAY_ELEVATION = 40;
 var NATIVE_VIEWPORT_EXTERNAL_OVERLAY_Z_INDEX = 20;
 var NATIVE_VIEWPORT_EXTERNAL_OVERLAY_ELEVATION = 20;
+var LONG_PRESS_CONTEXT_MENU_MS = 520;
+var LONG_PRESS_CONTEXT_MENU_CANCEL_PX = 10;
+var NATIVE_CONTEXT_MENU_WIDTH = 168;
+var NATIVE_CONTEXT_MENU_HEIGHT = 184;
+var NATIVE_CONTEXT_MENU_MARGIN = 12;
 function isPlacementTool(toolId) {
   return toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud" || toolId === "line" || toolId === "arrow";
 }
@@ -5402,6 +5667,102 @@ function fitCameraToWorldRect(camera, viewportW, viewportH, worldRect, padding)
   camera.x = viewportW / 2 - cx * z;
   camera.y = viewportH / 2 - cy * z;
 }
+function clampNativeContextMenuState(menu, size) {
+  return {
+    ...menu,
+    x: Math.max(
+      NATIVE_CONTEXT_MENU_MARGIN,
+      Math.min(
+        menu.x,
+        Math.max(NATIVE_CONTEXT_MENU_MARGIN, size.width - NATIVE_CONTEXT_MENU_WIDTH)
+      )
+    ),
+    y: Math.max(
+      NATIVE_CONTEXT_MENU_MARGIN,
+      Math.min(
+        menu.y - NATIVE_CONTEXT_MENU_HEIGHT - NATIVE_CONTEXT_MENU_MARGIN,
+        Math.max(
+          NATIVE_CONTEXT_MENU_MARGIN,
+          size.height - NATIVE_CONTEXT_MENU_HEIGHT - NATIVE_CONTEXT_MENU_MARGIN
+        )
+      )
+    )
+  };
+}
+function NativeSelectionContextMenu({
+  x,
+  y,
+  canPaste,
+  onCopy,
+  onPaste,
+  onDuplicate,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles4.nativeSelectionContextMenu,
+        {
+          left: x,
+          top: y
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(NativeSelectionContextMenuButton, { label: "Copy", onPress: onCopy }),
+        /* @__PURE__ */ jsx(
+          NativeSelectionContextMenuButton,
+          {
+            label: "Paste",
+            onPress: onPaste,
+            disabled: !canPaste
+          }
+        ),
+        /* @__PURE__ */ jsx(NativeSelectionContextMenuButton, { label: "Duplicate", onPress: onDuplicate }),
+        /* @__PURE__ */ jsx(
+          NativeSelectionContextMenuButton,
+          {
+            label: "Delete",
+            onPress: onDelete,
+            destructive: true
+          }
+        )
+      ]
+    }
+  );
+}
+function NativeSelectionContextMenuButton({
+  label,
+  onPress,
+  disabled = false,
+  destructive = false
+}) {
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      style: ({ pressed }) => [
+        styles4.nativeSelectionContextMenuButton,
+        pressed && !disabled ? styles4.nativeSelectionContextMenuButtonPressed : void 0,
+        disabled ? styles4.nativeSelectionContextMenuButtonDisabled : void 0
+      ],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles4.nativeSelectionContextMenuButtonText,
+            destructive ? styles4.nativeSelectionContextMenuDeleteText : void 0,
+            disabled ? styles4.nativeSelectionContextMenuButtonTextDisabled : void 0
+          ],
+          children: label
+        }
+      )
+    }
+  );
+}
 var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   items,
   selectedIds = [],
@@ -5468,6 +5829,16 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   selectedIdsRef.current = selectedIds;
   const remotePresenceRef = useRef(remotePresence);
   remotePresenceRef.current = remotePresence;
+  const shapeClipboardRef = useRef(null);
+  const [selectionContextMenu, setSelectionContextMenu] = useState(null);
+  const selectionContextMenuRef = useRef(
+    null
+  );
+  selectionContextMenuRef.current = selectionContextMenu;
+  const contextMenuLongPressTimerRef = useRef(
+    null
+  );
+  const contextMenuLongPressStartRef = useRef(null);
   const dragStateRef = useRef({ kind: "idle" });
   useEffect(() => {
     const committedItems = items;
@@ -5485,6 +5856,16 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     transientItemsRef.current = null;
     setTransientItems(null);
   }, []);
+  const clearNativeContextMenuLongPress = useCallback(() => {
+    if (contextMenuLongPressTimerRef.current) {
+      clearTimeout(contextMenuLongPressTimerRef.current);
+      contextMenuLongPressTimerRef.current = null;
+    }
+    contextMenuLongPressStartRef.current = null;
+  }, []);
+  const closeNativeSelectionContextMenu = useCallback(() => {
+    setSelectionContextMenu(null);
+  }, []);
   const commitTransientItemsPreview = useCallback(() => {
     const nextItems = transientItemsRef.current;
     const change = onItemsChangeRef.current;
@@ -5517,6 +5898,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       if (laserClearTimerRef.current) {
         clearTimeout(laserClearTimerRef.current);
       }
+      if (contextMenuLongPressTimerRef.current) {
+        clearTimeout(contextMenuLongPressTimerRef.current);
+      }
     },
     []
   );
@@ -5601,6 +5985,10 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   }
   const camera = cameraRef.current;
   const [cameraTick, setCameraTick] = useState(0);
+  const selectedItems = useMemo(
+    () => activeItems.filter((item) => selectedIds.includes(item.id)),
+    [activeItems, selectedIds]
+  );
   const screenToWorld = useCallback(
     (sx, sy) => {
       const cam = cameraRef.current;
@@ -5609,6 +5997,59 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     },
     []
   );
+  const startNativeContextMenuLongPress = useCallback(
+    (point) => {
+      clearNativeContextMenuLongPress();
+      if (toolIdRef.current !== "select") return;
+      const { worldX, worldY } = screenToWorld(point.x, point.y);
+      const request = resolveNativeSelectionContextMenuRequest({
+        interactive,
+        toolId: toolIdRef.current,
+        selectedItems,
+        worldPoint: { x: worldX, y: worldY },
+        screenPoint: point
+      });
+      if (!request) return;
+      contextMenuLongPressStartRef.current = point;
+      contextMenuLongPressTimerRef.current = setTimeout(() => {
+        contextMenuLongPressTimerRef.current = null;
+        contextMenuLongPressStartRef.current = null;
+        dragStateRef.current = { kind: "idle" };
+        lastPanPoint.current = null;
+        lastPinchDist.current = null;
+        clearTransientItemsPreview();
+        setRealtimePlacementPreview(null);
+        setSelectionContextMenu(
+          clampNativeContextMenuState(
+            {
+              ...request,
+              canPaste: shapeClipboardRef.current !== null
+            },
+            size
+          )
+        );
+      }, LONG_PRESS_CONTEXT_MENU_MS);
+    },
+    [
+      clearNativeContextMenuLongPress,
+      clearTransientItemsPreview,
+      interactive,
+      screenToWorld,
+      selectedItems,
+      setRealtimePlacementPreview,
+      size
+    ]
+  );
+  const cancelNativeContextMenuLongPressAfterMove = useCallback(
+    (point) => {
+      const start = contextMenuLongPressStartRef.current;
+      if (!start) return;
+      if (Math.hypot(point.x - start.x, point.y - start.y) > LONG_PRESS_CONTEXT_MENU_CANCEL_PX) {
+        clearNativeContextMenuLongPress();
+      }
+    },
+    [clearNativeContextMenuLongPress]
+  );
   const notifyWorldPointerMove = useCallback(
     (point) => {
       const { worldX, worldY } = screenToWorld(point.x, point.y);
@@ -5631,10 +6072,6 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   }, []);
   const hideToolCursor = useCallback(() => {
   }, []);
-  const selectedItems = useMemo(
-    () => activeItems.filter((item) => selectedIds.includes(item.id)),
-    [activeItems, selectedIds]
-  );
   const selectedStyleInspectorState = useMemo(() => {
     const styleableItems = selectedItems.filter(
       (item) => !item.locked && getNativeStyleInspectorToolId(item) !== null
@@ -5679,10 +6116,77 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     },
     [patchCurrentStrokeStyle]
   );
+  const copySelectedShapes = useCallback(() => {
+    if (!interactive) return false;
+    const clipboard = copyNativeSelectedShapeItems(
+      itemsRef.current,
+      selectedIdsRef.current
+    );
+    if (!clipboard) return false;
+    shapeClipboardRef.current = clipboard;
+    return true;
+  }, [interactive]);
+  const pasteCopiedShapes = useCallback(() => {
+    if (!interactive) return false;
+    const change = onItemsChangeRef.current;
+    const clipboard = shapeClipboardRef.current;
+    if (!change || !clipboard) return false;
+    const pasted = pasteNativeShapeClipboard({
+      items: itemsRef.current,
+      clipboard
+    });
+    if (!pasted) return false;
+    change(pasted.items);
+    onSelectionChangeRef.current?.(pasted.selectedIds);
+    return true;
+  }, [interactive]);
+  const duplicateSelectedShapes = useCallback(() => {
+    if (!interactive) return false;
+    const change = onItemsChangeRef.current;
+    if (!change) return false;
+    const duplicated = duplicateNativeSelectedShapes({
+      items: itemsRef.current,
+      selectedIds: selectedIdsRef.current
+    });
+    if (!duplicated) return false;
+    change(duplicated.items);
+    onSelectionChangeRef.current?.(duplicated.selectedIds);
+    return true;
+  }, [interactive]);
+  const handleCopySelectedShapesFromMenu = useCallback(() => {
+    copySelectedShapes();
+    closeNativeSelectionContextMenu();
+  }, [closeNativeSelectionContextMenu, copySelectedShapes]);
+  const handlePasteCopiedShapesFromMenu = useCallback(() => {
+    pasteCopiedShapes();
+    closeNativeSelectionContextMenu();
+  }, [closeNativeSelectionContextMenu, pasteCopiedShapes]);
+  const handleDuplicateSelectedShapesFromMenu = useCallback(() => {
+    duplicateSelectedShapes();
+    closeNativeSelectionContextMenu();
+  }, [closeNativeSelectionContextMenu, duplicateSelectedShapes]);
+  const handleDeleteSelectedShapes = useCallback(() => {
+    const menu = selectionContextMenuRef.current;
+    const ids = menu?.itemIds ?? selectedIdsRef.current;
+    if (ids.length === 0) return false;
+    const change = onItemsChangeRef.current;
+    if (!change) return false;
+    const idSet = new Set(ids);
+    const nextItems = itemsRef.current.filter((item) => !idSet.has(item.id));
+    if (nextItems.length === itemsRef.current.length) return false;
+    change(nextItems);
+    onSelectionChangeRef.current?.(
+      selectedIdsRef.current.filter((id) => !idSet.has(id))
+    );
+    closeNativeSelectionContextMenu();
+    return true;
+  }, [closeNativeSelectionContextMenu]);
   const lastPinchDist = useRef(null);
   const lastPanPoint = useRef(null);
   const beginDragAtScreenPoint = useCallback(
     (point) => {
+      closeNativeSelectionContextMenu();
+      startNativeContextMenuLongPress(point);
       lastPinchDist.current = null;
       lastPanPoint.current = null;
       const sx = point.x;
@@ -5896,15 +6400,18 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       dragStateRef.current = { kind: "pan" };
     },
     [
+      closeNativeSelectionContextMenu,
       interactive,
       requestSelectToolAfterUse,
       screenToWorld,
       setRealtimePlacementPreview,
+      startNativeContextMenuLongPress,
       updateToolCursorPoint
     ]
   );
   const applyDragMoveAtScreenPoint = useCallback(
     (point, pagePoint) => {
+      cancelNativeContextMenuLongPressAfterMove(point);
       const cam = cameraRef.current;
       if (!cam) return;
       updateToolCursorPoint(point);
@@ -6043,6 +6550,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
     },
     [
+      cancelNativeContextMenuLongPressAfterMove,
       requestRender,
       screenToWorld,
       setRealtimePlacementPreview,
@@ -6052,6 +6560,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   );
   const finishDragAtScreenPoint = useCallback(
     (point) => {
+      clearNativeContextMenuLongPress();
       lastPinchDist.current = null;
       lastPanPoint.current = null;
       updateToolCursorPoint(point);
@@ -6299,6 +6808,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       dragStateRef.current = { kind: "idle" };
     },
     [
+      clearNativeContextMenuLongPress,
       requestSelectToolAfterNativeLinkUse,
       requestSelectToolAfterUse,
       screenToWorld,
@@ -6342,6 +6852,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         const sx = evt.nativeEvent.locationX;
         const sy = evt.nativeEvent.locationY;
         if (touches && touches.length >= 2) {
+          clearNativeContextMenuLongPress();
           hideToolCursor();
           notifyWorldPointerLeave();
           dragStateRef.current = { kind: "pan" };
@@ -6358,6 +6869,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         const pageX = evt.nativeEvent.pageX;
         const pageY = evt.nativeEvent.pageY;
         if (touches && touches.length >= 2) {
+          clearNativeContextMenuLongPress();
           hideToolCursor();
           notifyWorldPointerLeave();
           const t0 = touches[0];
@@ -6388,6 +6900,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         });
       },
       onPanResponderTerminate: () => {
+        clearNativeContextMenuLongPress();
         lastPinchDist.current = null;
         lastPanPoint.current = null;
         hideToolCursor();
@@ -6404,6 +6917,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     [
       applyDragMoveAtScreenPoint,
       beginDragAtScreenPoint,
+      clearNativeContextMenuLongPress,
       finishDragAtScreenPoint,
       requestRender,
       hideToolCursor,
@@ -6429,9 +6943,18 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           options?.padding ?? 0.08
         );
         requestRender();
-      }
+      },
+      copySelectedShapes,
+      pasteCopiedShapes,
+      duplicateSelectedShapes
     }),
-    [requestRender, size]
+    [
+      copySelectedShapes,
+      duplicateSelectedShapes,
+      pasteCopiedShapes,
+      requestRender,
+      size
+    ]
   );
   const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
   const styleInspectorToolId = selectedStyleInspectorState?.toolId ?? activeStyleToolId;
@@ -6549,7 +7072,17 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           pointerEvents: "box-none",
           children: toolbar
         }
-      )
+      ),
+      interactive && selectionContextMenu ? /* @__PURE__ */ jsx(
+        NativeSelectionContextMenu,
+        {
+          ...selectionContextMenu,
+          onCopy: handleCopySelectedShapesFromMenu,
+          onPaste: handlePasteCopiedShapesFromMenu,
+          onDuplicate: handleDuplicateSelectedShapesFromMenu,
+          onDelete: handleDeleteSelectedShapes
+        }
+      ) : null
     ] }),
     /* @__PURE__ */ jsx(
       Modal,
@@ -6612,6 +7145,50 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   ] });
 });
 var styles4 = StyleSheet.create({
+  nativeSelectionContextMenu: {
+    position: "absolute",
+    width: NATIVE_CONTEXT_MENU_WIDTH,
+    minHeight: NATIVE_CONTEXT_MENU_HEIGHT,
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+    padding: 4,
+    borderRadius: 14,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#d4d4d8",
+    backgroundColor: "#ffffff",
+    shadowColor: "#000000",
+    shadowOpacity: 0.16,
+    shadowRadius: 18,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION + 4,
+    zIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX + 4
+  },
+  nativeSelectionContextMenuButton: {
+    width: "100%",
+    minHeight: 42,
+    alignItems: "flex-start",
+    justifyContent: "center",
+    borderRadius: 10,
+    paddingHorizontal: 14
+  },
+  nativeSelectionContextMenuButtonPressed: {
+    backgroundColor: "#f4f4f5"
+  },
+  nativeSelectionContextMenuButtonDisabled: {
+    opacity: 0.45
+  },
+  nativeSelectionContextMenuButtonText: {
+    color: "#18181b",
+    fontSize: 14,
+    fontWeight: "400"
+  },
+  nativeSelectionContextMenuButtonTextDisabled: {
+    color: "#71717a"
+  },
+  nativeSelectionContextMenuDeleteText: {
+    color: "#dc2626"
+  },
   nativeLinkDialogBackdrop: {
     flex: 1,
     alignItems: "center",