canvu-react 0.4.64 → 0.4.66

package/dist/react.cjs

@@ -3223,6 +3223,30 @@ function createToolPlugin(options) {
     }
   });
 }
+
+// src/react/merge-by-id.ts
+function mergeById(baseItems, ...contributions) {
+  const next = [...baseItems];
+  const indexById = /* @__PURE__ */ new Map();
+  for (const [index, item] of next.entries()) {
+    if (!indexById.has(item.id)) {
+      indexById.set(item.id, index);
+    }
+  }
+  for (const contribution of contributions) {
+    if (!contribution?.length) continue;
+    for (const item of contribution) {
+      const existingIndex = indexById.get(item.id);
+      if (existingIndex !== void 0) {
+        next[existingIndex] = item;
+        continue;
+      }
+      indexById.set(item.id, next.length);
+      next.push(item);
+    }
+  }
+  return next;
+}
 var menuStyle = {
   position: "fixed",
   zIndex: 1e4,
@@ -3252,9 +3276,97 @@ var dividerStyle = {
   margin: "4px 8px",
   background: "#e2e8f0"
 };
+var SHAPE_CONTEXT_MENU_ITEM_IDS = {
+  cut: "cut",
+  copy: "copy",
+  duplicate: "duplicate",
+  reorderDivider: "reorder-divider",
+  bringToFront: "bring-to-front",
+  bringForward: "bring-forward",
+  sendBackward: "send-backward",
+  sendToBack: "send-to-back",
+  lockDivider: "lock-divider",
+  toggleLock: "toggle-lock",
+  delete: "delete"
+};
+function renderAction(label, onClick, options) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      style: {
+        ...itemStyle,
+        ...options?.danger ? { color: "#b91c1c" } : {}
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = options?.danger ? "#fef2f2" : "#f1f5f9";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+      },
+      onClick,
+      children: label
+    }
+  );
+}
+function renderDivider() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle });
+}
+var DEFAULT_SHAPE_CONTEXT_MENU_ITEMS = [
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.cut,
+    render: (ctx) => renderAction("Recortar", ctx.cut)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.copy,
+    render: (ctx) => renderAction("Copiar", ctx.copy)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.duplicate,
+    render: (ctx) => renderAction("Duplicar", ctx.duplicate)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.reorderDivider,
+    render: renderDivider
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.bringToFront,
+    render: (ctx) => renderAction("Trazer para frente", ctx.bringToFront)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.bringForward,
+    render: (ctx) => renderAction("Avancar uma camada", ctx.bringForward)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.sendBackward,
+    render: (ctx) => renderAction("Recuar uma camada", ctx.sendBackward)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.sendToBack,
+    render: (ctx) => renderAction("Enviar para tras", ctx.sendToBack)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.lockDivider,
+    render: renderDivider
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.toggleLock,
+    render: (ctx) => renderAction(
+      ctx.allSelectedLocked ? "Desbloquear" : "Bloquear",
+      ctx.toggleLock
+    )
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.delete,
+    render: (ctx) => renderAction("Apagar", ctx.delete, { danger: true })
+  }
+];
 function ShapeContextMenu({
   x,
   y,
+  selectedIds,
+  selectedItems = [],
   allSelectedLocked,
   onClose,
   onToggleLock,
@@ -3265,7 +3377,10 @@ function ShapeContextMenu({
   onSendBackward,
   onSendToBack,
   onDuplicate,
-  onDelete
+  onDelete,
+  items,
+  itemContributions,
+  children
 }) {
   const rootRef = react.useRef(null);
   react.useLayoutEffect(() => {
@@ -3305,49 +3420,43 @@ function ShapeContextMenu({
       document.removeEventListener("pointerdown", onPointerDown, true);
     };
   }, [onClose]);
+  const menuItems = react.useMemo(
+    () => mergeById(items ?? DEFAULT_SHAPE_CONTEXT_MENU_ITEMS, itemContributions),
+    [itemContributions, items]
+  );
   const run = (fn) => () => {
     fn();
     onClose();
   };
-  const renderAction = (label, onClick, options) => /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      role: "menuitem",
-      style: {
-        ...itemStyle,
-        ...options?.danger ? { color: "#b91c1c" } : {}
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.background = options?.danger ? "#fef2f2" : "#f1f5f9";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.background = "transparent";
-      },
-      onClick: run(onClick),
-      children: label
-    }
-  );
-  const menu = /* @__PURE__ */ jsxRuntime.jsxs(
+  const resolvedSelectedIds = selectedIds ?? selectedItems.map((item) => item.id);
+  const resolvedAllSelectedLocked = allSelectedLocked ?? (selectedItems.length > 0 && selectedItems.every((item) => item.locked));
+  const menuContext = {
+    position: { x, y },
+    selectedIds: resolvedSelectedIds,
+    selectedItems,
+    allSelectedLocked: resolvedAllSelectedLocked,
+    anySelectedLocked: selectedItems.some((item) => item.locked),
+    close: onClose,
+    cut: run(onCut),
+    copy: run(onCopy),
+    duplicate: run(onDuplicate),
+    toggleLock: run(onToggleLock),
+    bringToFront: run(onBringToFront),
+    bringForward: run(onBringForward),
+    sendBackward: run(onSendBackward),
+    sendToBack: run(onSendToBack),
+    delete: run(onDelete),
+    deleteSelection: run(onDelete)
+  };
+  const content = typeof children === "function" ? children(menuContext) : children !== void 0 ? children : menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: item.render(menuContext) }, item.id));
+  const menu = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: rootRef,
       "data-slot": "shape-context-menu",
       style: { ...menuStyle, left: x, top: y },
       role: "menu",
-      children: [
-        renderAction("Recortar", onCut),
-        renderAction("Copiar", onCopy),
-        renderAction("Duplicar", onDuplicate),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle }),
-        renderAction("Trazer para frente", onBringToFront),
-        renderAction("Avancar uma camada", onBringForward),
-        renderAction("Recuar uma camada", onSendBackward),
-        renderAction("Enviar para tras", onSendToBack),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle }),
-        renderAction(allSelectedLocked ? "Desbloquear" : "Bloquear", onToggleLock),
-        renderAction("Apagar", onDelete, { danger: true })
-      ]
+      children: content
     }
   );
   if (typeof document === "undefined") {
@@ -5062,6 +5171,7 @@ function VectorToolbarComponent({
   value,
   onChange,
   tools,
+  toolContributions,
   overflowToolIds = DEFAULT_OVERFLOW_TOOL_IDS,
   overflowMenuAriaLabel = "More tools",
   "aria-label": ariaLabel = "Canvas tools",
@@ -5079,7 +5189,10 @@ function VectorToolbarComponent({
 }) {
   const pluginContext = react.useContext(CanvuPluginContext);
   const runtimeTools = pluginContext?.resolvedTools;
-  const resolvedTools = tools ?? runtimeTools ?? DEFAULT_VECTOR_TOOLS;
+  const resolvedTools = react.useMemo(
+    () => mergeById(tools ?? runtimeTools ?? DEFAULT_VECTOR_TOOLS, toolContributions),
+    [runtimeTools, toolContributions, tools]
+  );
   const { primary: primaryTools, overflow: overflowTools } = splitToolbarTools(
     resolvedTools,
     overflowToolIds
@@ -5653,7 +5766,7 @@ function attachViewportInput(options) {
     if (touchMomentum) {
       touchMomentum.cancel();
     }
-    const panOk = allowPrimaryPointerPan();
+    const panOk = allowPrimaryPointerPan(e);
     if (e.pointerType === "mouse" && e.button === 0) {
       if (!panOk) {
         return;
@@ -7677,6 +7790,93 @@ function PresenceRemoteLayer({
   );
 }
 
+// src/react/read-only-activation.ts
+function findReadOnlyItemClickPlacement(item, placements) {
+  const toolId = item.customToolId;
+  if (!toolId) return null;
+  return [...placements].reverse().find(
+    (placement) => placement.toolId === toolId && placement.onSelectModeItemClick
+  ) ?? null;
+}
+function resolveReadOnlyActivationTarget(input) {
+  const {
+    pointer,
+    camera,
+    container,
+    items,
+    detailItems = items,
+    placements,
+    scope,
+    selectedIds
+  } = input;
+  const rect = container.getBoundingClientRect();
+  const world = camera.screenToWorld(
+    pointer.clientX - rect.left,
+    pointer.clientY - rect.top
+  );
+  const hit = hitTestWorldPoint(items, world.worldX, world.worldY, {
+    lineHitWorld: 10 / camera.zoom,
+    ignoreLocked: true
+  });
+  if (!hit) return null;
+  const customPlacement = findReadOnlyItemClickPlacement(hit, placements);
+  if (customPlacement?.onSelectModeItemClick) {
+    return {
+      item: hit,
+      activation: "custom",
+      worldX: world.worldX,
+      worldY: world.worldY
+    };
+  }
+  if (scope === "all") {
+    return {
+      item: hit,
+      activation: "read-only",
+      worldX: world.worldX,
+      worldY: world.worldY
+    };
+  }
+  if (typeof scope === "function") {
+    const allowed = scope({
+      item: hit,
+      worldX: world.worldX,
+      worldY: world.worldY,
+      clientX: pointer.clientX,
+      clientY: pointer.clientY,
+      pointerType: pointer.pointerType,
+      shiftKey: pointer.shiftKey,
+      altKey: pointer.altKey,
+      metaKey: pointer.metaKey,
+      ctrlKey: pointer.ctrlKey,
+      items: detailItems,
+      selectedIds
+    });
+    if (allowed) {
+      return {
+        item: hit,
+        activation: "read-only",
+        worldX: world.worldX,
+        worldY: world.worldY
+      };
+    }
+  }
+  return null;
+}
+function createReadOnlyActivationSession(target, pointer) {
+  return {
+    pointerId: pointer.pointerId,
+    itemId: target.item.id,
+    activation: target.activation,
+    startWorld: { x: target.worldX, y: target.worldY },
+    startScreen: { x: pointer.clientX, y: pointer.clientY }
+  };
+}
+function didReadOnlyActivationMovePastTap(session, pointer, tapPx) {
+  const dx = pointer.clientX - session.startScreen.x;
+  const dy = pointer.clientY - session.startScreen.y;
+  return Math.hypot(dx, dy) > tapPx;
+}
+
 // src/react/stable-selection.ts
 function shallowEqualStringArray(a, b) {
   if (a === b) return true;
@@ -8030,25 +8230,6 @@ function isDefaultMarkerToolStyle(style) {
 function tagCustomPlacementItem(item, toolId) {
   return item.customToolId === toolId ? item : { ...item, customToolId: toolId };
 }
-function findSelectModeItemClickPlacement(item, placements) {
-  const toolId = item.customToolId;
-  if (!toolId) return null;
-  return [...placements].reverse().find(
-    (placement) => placement.toolId === toolId && placement.onSelectModeItemClick
-  ) ?? null;
-}
-function mergeToolListById(baseTools, pluginTools) {
-  const next = [...baseTools];
-  for (const tool of pluginTools) {
-    const index = next.findIndex((candidate) => candidate.id === tool.id);
-    if (index >= 0) {
-      next[index] = tool;
-      continue;
-    }
-    next.push(tool);
-  }
-  return next;
-}
 function composePluginEvent(consumerHandler, pluginHandlers) {
   const activePluginHandlers = pluginHandlers.filter(
     (handler) => handler != null
@@ -8164,6 +8345,7 @@ var VectorViewport = react.forwardRef(
     toolId = "hand",
     applePencilNav = false,
     interactive = false,
+    readOnlyInteraction,
     selectedIds: selectedIdsProp,
     onSelectionChange,
     onItemsChange: consumerOnItemsChange,
@@ -8175,6 +8357,8 @@ var VectorViewport = react.forwardRef(
     navMenu,
     selectionInspector,
     selectionInspectorProps,
+    contextMenu: renderContextMenu,
+    contextMenuItems: consumerContextMenuItems,
     plugins = [],
     onCameraChange: consumerOnCameraChange,
     customPlacement: consumerCustomPlacement,
@@ -8233,7 +8417,7 @@ var VectorViewport = react.forwardRef(
       let nextTools = [...DEFAULT_VECTOR_TOOLS];
       for (const contribution of orderedPluginContributions) {
         if (contribution.tools?.length) {
-          nextTools = mergeToolListById(nextTools, contribution.tools);
+          nextTools = mergeById(nextTools, contribution.tools);
         }
         if (contribution.toolTransform) {
           nextTools = contribution.toolTransform(nextTools);
@@ -8241,6 +8425,16 @@ var VectorViewport = react.forwardRef(
       }
       return nextTools;
     }, [orderedPluginContributions]);
+    const resolvedContextMenuItems = react.useMemo(
+      () => mergeById(
+        DEFAULT_SHAPE_CONTEXT_MENU_ITEMS,
+        ...orderedPluginContributions.map(
+          (contribution) => contribution.contextMenuItems
+        ),
+        consumerContextMenuItems
+      ),
+      [consumerContextMenuItems, orderedPluginContributions]
+    );
     const allCustomPlacements = react.useMemo(() => {
       const placements = [];
       if (consumerCustomPlacement) placements.push(consumerCustomPlacement);
@@ -8366,6 +8560,8 @@ var VectorViewport = react.forwardRef(
     );
     const toolIdRef = react.useRef(toolId);
     const interactiveRef = react.useRef(interactive);
+    const readOnlyInteractionRef = react.useRef(readOnlyInteraction);
+    readOnlyInteractionRef.current = readOnlyInteraction;
     const reducedMotionRef = react.useRef(false);
     const itemsRef = react.useRef(items);
     const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
@@ -8379,6 +8575,7 @@ var VectorViewport = react.forwardRef(
     const allCustomPlacementsRef = react.useRef(allCustomPlacements);
     allCustomPlacementsRef.current = allCustomPlacements;
     const dragStateRef = react.useRef({ kind: "idle" });
+    const readOnlyItemClickStateRef = react.useRef(null);
     const clipboardRef = react.useRef(null);
     const undoStackRef = react.useRef([]);
     const redoStackRef = react.useRef([]);
@@ -8417,7 +8614,7 @@ var VectorViewport = react.forwardRef(
       isUndoingRef.current = true;
       onItemsChangeRef.current?.(next, { motive: "redo" });
     }, []);
-    const [contextMenu, setContextMenu] = react.useState(null);
+    const [contextMenuState, setContextMenuState] = react.useState(null);
     const [uncontrolledSel, setUncontrolledSel] = react.useState([]);
     const isSelectionControlled = onSelectionChange !== void 0;
     const controlledSelectedKey = JSON.stringify(selectedIdsProp ?? []);
@@ -8556,6 +8753,31 @@ var VectorViewport = react.forwardRef(
     );
     const resolvedItemsRef = react.useRef(resolvedItems);
     resolvedItemsRef.current = resolvedItems;
+    const readOnlyActivationResolutionCacheRef = react.useRef(/* @__PURE__ */ new WeakMap());
+    const resolveReadOnlyActivation = react.useCallback(
+      (pointer) => {
+        const cache = readOnlyActivationResolutionCacheRef.current;
+        if (cache.has(pointer)) return cache.get(pointer) ?? null;
+        let target = null;
+        const cam = cameraRef.current;
+        const container = sceneContainerRef.current;
+        if (!interactiveRef.current && toolIdRef.current === "select" && cam && container) {
+          target = resolveReadOnlyActivationTarget({
+            pointer,
+            camera: cam,
+            container,
+            items: resolvedItemsRef.current,
+            detailItems: itemsRef.current,
+            placements: allCustomPlacementsRef.current,
+            scope: readOnlyInteractionRef.current?.itemClicks ?? "custom",
+            selectedIds: effectiveSelectedIdsRef.current
+          });
+        }
+        cache.set(pointer, target);
+        return target;
+      },
+      []
+    );
     const liveId = react.useId();
     const reducedMotion = usePrefersReducedMotion();
     reducedMotionRef.current = reducedMotion;
@@ -8985,12 +9207,14 @@ var VectorViewport = react.forwardRef(
         onUpdate: renderFrame,
         wheelElement: wrapperRef.current ?? void 0,
         touchHandledElsewhere: applePencilNav,
-        allowPrimaryPointerPan: () => {
+        allowPrimaryPointerPan: (event) => {
           if (interactiveRef.current) {
             return toolIdRef.current === "hand";
           }
           const t = toolIdRef.current;
-          return t === "hand" || t === "select";
+          if (t === "hand") return true;
+          if (t !== "select") return false;
+          return resolveReadOnlyActivation(event) === null;
         }
       });
       let detachPencil;
@@ -9011,7 +9235,7 @@ var VectorViewport = react.forwardRef(
         cameraRef.current = null;
         setCameraForOverlay(null);
       };
-    }, [applePencilNav, renderFrame]);
+    }, [applePencilNav, renderFrame, resolveReadOnlyActivation]);
     react.useEffect(() => {
       rendererRef.current?.setInteractionState({
         selectedIds: effectiveSelectedIds,
@@ -9525,6 +9749,29 @@ var VectorViewport = react.forwardRef(
       const rect = el.getBoundingClientRect();
       return cam.screenToWorld(clientX - rect.left, clientY - rect.top);
     }, []);
+    const buildSelectModeItemClickDetail = react.useCallback(
+      (item, world, pointer) => ({
+        item,
+        worldX: world.worldX,
+        worldY: world.worldY,
+        clientX: pointer.clientX,
+        clientY: pointer.clientY,
+        pointerType: pointer.pointerType,
+        shiftKey: pointer.shiftKey,
+        altKey: pointer.altKey,
+        metaKey: pointer.metaKey,
+        ctrlKey: pointer.ctrlKey,
+        items: itemsRef.current,
+        updateItem: (next) => {
+          onItemsChangeRef.current?.(replaceItem(itemsRef.current, item.id, next), {
+            motive: "custom",
+            itemIds: [item.id]
+          });
+        },
+        setSelectedIds: (ids) => setEffectiveSelectedIdsRef.current(ids)
+      }),
+      []
+    );
     const handleOverlayContextMenu = react.useCallback(
       (e) => {
         if (!interactiveRef.current || !onItemsChangeRef.current) return;
@@ -9539,7 +9786,7 @@ var VectorViewport = react.forwardRef(
           ignoreLocked: true
         });
         if (!hit) {
-          setContextMenu(null);
+          setContextMenuState(null);
           return;
         }
         const cur = effectiveSelectedIdsRef.current;
@@ -9550,7 +9797,7 @@ var VectorViewport = react.forwardRef(
         } else {
           nextIds = cur;
         }
-        setContextMenu({
+        setContextMenuState({
           x: e.clientX,
           y: e.clientY,
           itemIds: nextIds
@@ -9951,6 +10198,118 @@ var VectorViewport = react.forwardRef(
       },
       [screenToWorld]
     );
+    react.useEffect(() => {
+      const root = interactionRootRef.current;
+      if (!root) return;
+      const onReadOnlyPointerDownCapture = (e) => {
+        if (e.button !== 0) return;
+        if (readOnlyItemClickStateRef.current) return;
+        const target = resolveReadOnlyActivation(e);
+        if (!target) return;
+        const accepted = startCanvuInteraction({
+          kind: "select-mode-item-click",
+          toolId: "select",
+          pointerType: e.pointerType,
+          button: e.button,
+          worldX: target.worldX,
+          worldY: target.worldY,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          itemIds: [target.item.id]
+        });
+        if (!accepted) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        wrapperRef.current?.focus({ preventScroll: true });
+        readOnlyItemClickStateRef.current = createReadOnlyActivationSession(
+          target,
+          e
+        );
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      root.addEventListener("pointerdown", onReadOnlyPointerDownCapture, {
+        capture: true
+      });
+      return () => {
+        root.removeEventListener("pointerdown", onReadOnlyPointerDownCapture, {
+          capture: true
+        });
+      };
+    }, [resolveReadOnlyActivation, startCanvuInteraction]);
+    react.useEffect(() => {
+      const finishReadOnlyClick = (ev) => {
+        const st = readOnlyItemClickStateRef.current;
+        if (!st || st.pointerId !== ev.pointerId) return;
+        readOnlyItemClickStateRef.current = null;
+        const world = screenToWorld(ev.clientX, ev.clientY);
+        const current = {
+          worldX: world.worldX,
+          worldY: world.worldY,
+          clientX: ev.clientX,
+          clientY: ev.clientY
+        };
+        updateCanvuInteractionCurrent(current);
+        if (ev.type === "pointercancel") {
+          finishCanvuInteraction("cancelled", { current });
+          return;
+        }
+        if (didReadOnlyActivationMovePastTap(st, ev, TAP_PX)) {
+          finishCanvuInteraction("cancelled", { current });
+          return;
+        }
+        const item = itemsRef.current.find((candidate) => candidate.id === st.itemId) ?? resolvedItemsRef.current.find((candidate) => candidate.id === st.itemId);
+        if (!item) {
+          finishCanvuInteraction("cancelled", { current });
+          return;
+        }
+        const detail = buildSelectModeItemClickDetail(item, world, ev);
+        if (st.activation === "custom") {
+          const placement = findReadOnlyItemClickPlacement(
+            item,
+            allCustomPlacementsRef.current
+          );
+          const onSelectModeItemClick = placement?.onSelectModeItemClick;
+          if (!onSelectModeItemClick) {
+            finishCanvuInteraction("cancelled", { current });
+            return;
+          }
+          onSelectModeItemClick(detail);
+          finishCanvuInteraction("completed", {
+            current,
+            info: { motive: "custom", itemIds: [item.id], toolId: "select" }
+          });
+          return;
+        }
+        const handled = readOnlyInteractionRef.current?.onItemClick?.(detail) === "handled";
+        if (!handled) {
+          const cur = effectiveSelectedIdsRef.current;
+          const next = ev.shiftKey ? cur.includes(item.id) ? cur.filter((id) => id !== item.id) : [...cur, item.id] : [item.id];
+          setEffectiveSelectedIdsRef.current(next);
+        }
+        finishCanvuInteraction("completed", {
+          current,
+          info: { motive: "custom", itemIds: [item.id], toolId: "select" }
+        });
+      };
+      document.addEventListener("pointerup", finishReadOnlyClick);
+      document.addEventListener("pointercancel", finishReadOnlyClick);
+      return () => {
+        document.removeEventListener("pointerup", finishReadOnlyClick);
+        document.removeEventListener("pointercancel", finishReadOnlyClick);
+      };
+    }, [
+      buildSelectModeItemClickDetail,
+      finishCanvuInteraction,
+      screenToWorld,
+      updateCanvuInteractionCurrent
+    ]);
     const handleOverlayPointerDown = react.useCallback(
       (e) => {
         let currentDragState = dragStateRef.current;
@@ -9988,7 +10347,7 @@ var VectorViewport = react.forwardRef(
         if (e.button !== 0) return;
         if (editingTextIdRef.current) return;
         wrapperRef.current?.focus({ preventScroll: true });
-        setContextMenu(null);
+        setContextMenuState(null);
         const tool = toolIdRef.current;
         if (tool === "hand") return;
         if (applePencilNav && e.pointerType === "pen" && navigator.maxTouchPoints > 0 && (tool === "draw" || tool === "marker")) {
@@ -10129,7 +10488,7 @@ var VectorViewport = react.forwardRef(
             ignoreLocked: true
           });
           if (hit) {
-            const selectModeClickPlacement = !e.shiftKey ? findSelectModeItemClickPlacement(hit, allCustomPlacementsRef.current) : null;
+            const selectModeClickPlacement = !e.shiftKey ? findReadOnlyItemClickPlacement(hit, allCustomPlacementsRef.current) : null;
             if (selectModeClickPlacement) {
               const isAlreadySelected = cur.includes(hit.id);
               const moveIds = isAlreadySelected ? [...cur] : [hit.id];
@@ -10408,7 +10767,7 @@ var VectorViewport = react.forwardRef(
           return;
         }
         wrapperRef.current?.focus({ preventScroll: true });
-        setContextMenu(null);
+        setContextMenuState(null);
         const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, e.clientX, e.clientY) : void 0;
         const itemId = createShapeId();
         const item = createFreehandStrokeItem(
@@ -10531,7 +10890,7 @@ var VectorViewport = react.forwardRef(
           return;
         }
         wrapperRef.current?.focus({ preventScroll: true });
-        setContextMenu(null);
+        setContextMenuState(null);
         penDetectedRef.current = true;
         const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, touch.clientX, touch.clientY) : void 0;
         const itemId = createShapeId();
@@ -11036,7 +11395,7 @@ var VectorViewport = react.forwardRef(
             });
             return;
           }
-          const placement = findSelectModeItemClickPlacement(
+          const placement = findReadOnlyItemClickPlacement(
             item,
             allCustomPlacementsRef.current
           );
@@ -11047,27 +11406,9 @@ var VectorViewport = react.forwardRef(
             });
             return;
           }
-          const { worldX, worldY } = currentWorld;
-          onSelectModeItemClick({
-            item,
-            worldX,
-            worldY,
-            clientX: ev.clientX,
-            clientY: ev.clientY,
-            pointerType: ev.pointerType,
-            shiftKey: ev.shiftKey,
-            altKey: ev.altKey,
-            metaKey: ev.metaKey,
-            ctrlKey: ev.ctrlKey,
-            items: itemsRef.current,
-            updateItem: (next) => {
-              onItemsChangeRef.current?.(
-                replaceItem(itemsRef.current, item.id, next),
-                { motive: "custom", itemIds: [item.id] }
-              );
-            },
-            setSelectedIds: (ids) => setEffectiveSelectedIdsRef.current(ids)
-          });
+          onSelectModeItemClick(
+            buildSelectModeItemClickDetail(item, currentWorld, ev)
+          );
           finishCanvuInteraction("completed", {
             current: currentInteractionPoint,
             info: { motive: "custom", itemIds: [item.id], toolId: "select" }
@@ -11437,6 +11778,7 @@ var VectorViewport = react.forwardRef(
         document.removeEventListener("pointercancel", onUp);
       };
     }, [
+      buildSelectModeItemClickDetail,
       emitRemoteStrokePreview,
       emitRemoteStrokePreviewClear,
       interactive,
@@ -11588,6 +11930,66 @@ var VectorViewport = react.forwardRef(
     const defaultNavMenu = cameraForOverlay ? /* @__PURE__ */ jsxRuntime.jsx(NavMenu, {}) : null;
     const resolvedSelectionInspector = selectionInspector === void 0 ? defaultSelectionInspector : selectionInspector;
     const resolvedNavMenu = navMenu === void 0 ? defaultNavMenu : navMenu;
+    const contextMenuItemIds = contextMenuState?.itemIds ?? [];
+    const contextMenuSelectedItems = contextMenuState ? contextMenuItemIds.map((id) => items.find((item) => item.id === id)).filter((item) => item != null) : [];
+    const allContextMenuSelectedLocked = contextMenuItemIds.length > 0 && contextMenuItemIds.every((id) => items.find((item) => item.id === id)?.locked);
+    const closeContextMenu = () => setContextMenuState(null);
+    const runContextMenuAction = (fn) => () => {
+      fn();
+      closeContextMenu();
+    };
+    const contextMenuRenderContext = contextMenuState ? {
+      position: { x: contextMenuState.x, y: contextMenuState.y },
+      selectedIds: contextMenuItemIds,
+      selectedItems: contextMenuSelectedItems,
+      allSelectedLocked: allContextMenuSelectedLocked,
+      anySelectedLocked: contextMenuSelectedItems.some((item) => item.locked),
+      close: closeContextMenu,
+      cut: runContextMenuAction(() => cutIds(contextMenuItemIds)),
+      copy: runContextMenuAction(
+        () => copyIdsToInternalClipboard(contextMenuItemIds)
+      ),
+      duplicate: runContextMenuAction(() => duplicateIds(contextMenuItemIds)),
+      toggleLock: runContextMenuAction(
+        () => setLockedOnIds(contextMenuItemIds, !allContextMenuSelectedLocked)
+      ),
+      bringToFront: runContextMenuAction(
+        () => reorderIds(contextMenuItemIds, "front")
+      ),
+      bringForward: runContextMenuAction(
+        () => reorderIds(contextMenuItemIds, "forward")
+      ),
+      sendBackward: runContextMenuAction(
+        () => reorderIds(contextMenuItemIds, "backward")
+      ),
+      sendToBack: runContextMenuAction(
+        () => reorderIds(contextMenuItemIds, "back")
+      ),
+      delete: runContextMenuAction(() => deleteIds(contextMenuItemIds)),
+      deleteSelection: runContextMenuAction(() => deleteIds(contextMenuItemIds)),
+      items: resolvedContextMenuItems
+    } : null;
+    const resolvedContextMenu = interactive && onItemsChange && contextMenuState && contextMenuRenderContext && renderContextMenu !== null ? renderContextMenu ? renderContextMenu(contextMenuRenderContext) : /* @__PURE__ */ jsxRuntime.jsx(
+      ShapeContextMenu,
+      {
+        x: contextMenuState.x,
+        y: contextMenuState.y,
+        selectedIds: contextMenuItemIds,
+        selectedItems: contextMenuSelectedItems,
+        allSelectedLocked: allContextMenuSelectedLocked,
+        items: resolvedContextMenuItems,
+        onClose: closeContextMenu,
+        onToggleLock: () => setLockedOnIds(contextMenuItemIds, !allContextMenuSelectedLocked),
+        onCut: () => cutIds(contextMenuItemIds),
+        onCopy: () => copyIdsToInternalClipboard(contextMenuItemIds),
+        onBringToFront: () => reorderIds(contextMenuItemIds, "front"),
+        onBringForward: () => reorderIds(contextMenuItemIds, "forward"),
+        onSendBackward: () => reorderIds(contextMenuItemIds, "backward"),
+        onSendToBack: () => reorderIds(contextMenuItemIds, "back"),
+        onDuplicate: () => duplicateIds(contextMenuItemIds),
+        onDelete: () => deleteIds(contextMenuItemIds)
+      }
+    ) : null;
     return /* @__PURE__ */ jsxRuntime.jsx(CanvuPluginContext.Provider, { value: pluginContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(CanvuChromeContext.Provider, { value: chromeContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -11741,30 +12143,7 @@ var VectorViewport = react.forwardRef(
             }
           ),
           resolvedSelectionInspector,
-          interactive && onItemsChange && contextMenu && /* @__PURE__ */ jsxRuntime.jsx(
-            ShapeContextMenu,
-            {
-              x: contextMenu.x,
-              y: contextMenu.y,
-              allSelectedLocked: contextMenu.itemIds.length > 0 && contextMenu.itemIds.every(
-                (id) => items.find((i) => i.id === id)?.locked
-              ),
-              onClose: () => setContextMenu(null),
-              onToggleLock: () => {
-                const ids = contextMenu.itemIds;
-                const allLocked = ids.length > 0 && ids.every((id) => items.find((i) => i.id === id)?.locked);
-                setLockedOnIds(ids, !allLocked);
-              },
-              onCut: () => cutIds(contextMenu.itemIds),
-              onCopy: () => copyIdsToInternalClipboard(contextMenu.itemIds),
-              onBringToFront: () => reorderIds(contextMenu.itemIds, "front"),
-              onBringForward: () => reorderIds(contextMenu.itemIds, "forward"),
-              onSendBackward: () => reorderIds(contextMenu.itemIds, "backward"),
-              onSendToBack: () => reorderIds(contextMenu.itemIds, "back"),
-              onDuplicate: () => duplicateIds(contextMenu.itemIds),
-              onDelete: () => deleteIds(contextMenu.itemIds)
-            }
-          ),
+          resolvedContextMenu,
           resolvedNavMenu,
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -11801,6 +12180,7 @@ exports.IconSelect = IconSelect;
 exports.IconText = IconText;
 exports.ImagesMenu = ImagesMenu;
 exports.NavMenu = NavMenu;
+exports.SHAPE_CONTEXT_MENU_ITEM_IDS = SHAPE_CONTEXT_MENU_ITEM_IDS;
 exports.ShapeContextMenu = ShapeContextMenu;
 exports.VectorCanvas = VectorCanvas;
 exports.VectorCanvasBody = VectorCanvasBody;