canvu-react 0.4.63 → 0.4.65

package/dist/react.cjs

@@ -3153,7 +3153,9 @@ function ToolPluginComponent({
   toolTransform,
   createItem,
   selectAfterCreate,
-  onSelectModeItemClick
+  onSelectModeItemClick,
+  onBeforeInteraction,
+  onAfterInteraction
 }) {
   const contribution = react.useMemo(
     () => ({
@@ -3166,9 +3168,27 @@ function ToolPluginComponent({
           selectAfterCreate,
           onSelectModeItemClick
         }
-      ] : void 0
+      ] : void 0,
+      interactionHooks: onBeforeInteraction || onAfterInteraction ? {
+        onBeforeInteraction: onBeforeInteraction ? (detail) => {
+          if (detail.toolId !== tool.id) return void 0;
+          return onBeforeInteraction(detail);
+        } : void 0,
+        onAfterInteraction: onAfterInteraction ? (detail) => {
+          if (detail.toolId !== tool.id) return;
+          onAfterInteraction(detail);
+        } : void 0
+      } : void 0
     }),
-    [createItem, onSelectModeItemClick, selectAfterCreate, tool, toolTransform]
+    [
+      createItem,
+      onAfterInteraction,
+      onBeforeInteraction,
+      onSelectModeItemClick,
+      selectAfterCreate,
+      tool,
+      toolTransform
+    ]
   );
   useCanvuPluginContribution(pluginId, contribution);
   return null;
@@ -3179,6 +3199,8 @@ function createToolPlugin(options) {
     toolTransform,
     selectAfterCreate,
     onSelectModeItemClick,
+    onBeforeInteraction,
+    onAfterInteraction,
     ...tool
   } = options;
   const pluginId = `canvu.plugin.tool:${tool.id}`;
@@ -3193,7 +3215,9 @@ function createToolPlugin(options) {
           toolTransform,
           createItem,
           selectAfterCreate,
-          onSelectModeItemClick
+          onSelectModeItemClick,
+          onBeforeInteraction,
+          onAfterInteraction
         }
       );
     }
@@ -5629,7 +5653,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;
@@ -7653,6 +7677,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;
@@ -8006,13 +8117,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) {
@@ -8140,9 +8244,12 @@ var VectorViewport = react.forwardRef(
     toolId = "hand",
     applePencilNav = false,
     interactive = false,
+    readOnlyInteraction,
     selectedIds: selectedIdsProp,
     onSelectionChange,
     onItemsChange: consumerOnItemsChange,
+    onBeforeInteraction: consumerOnBeforeInteraction,
+    onAfterInteraction: consumerOnAfterInteraction,
     onActivateLink,
     onWorldPointerDown: consumerOnWorldPointerDown,
     toolbar,
@@ -8268,6 +8375,24 @@ var VectorViewport = react.forwardRef(
         (contribution) => contribution.callbacks?.onCameraChange
       )
     );
+    const beforeInteractionHooks = react.useMemo(
+      () => [
+        consumerOnBeforeInteraction,
+        ...orderedPluginContributions.map(
+          (contribution) => contribution.interactionHooks?.onBeforeInteraction
+        )
+      ].filter((hook) => hook != null),
+      [consumerOnBeforeInteraction, orderedPluginContributions]
+    );
+    const afterInteractionHooks = react.useMemo(
+      () => [
+        consumerOnAfterInteraction,
+        ...orderedPluginContributions.map(
+          (contribution) => contribution.interactionHooks?.onAfterInteraction
+        )
+      ].filter((hook) => hook != null),
+      [consumerOnAfterInteraction, orderedPluginContributions]
+    );
     const onItemsChange = react.useMemo(() => {
       const middlewares = orderedPluginContributions.map((contribution) => contribution.wrapOnItemsChange).filter(
         (middleware) => middleware != null
@@ -8322,6 +8447,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);
@@ -8335,6 +8462,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([]);
@@ -8411,6 +8539,81 @@ var VectorViewport = react.forwardRef(
       [items]
     );
     itemsRef.current = normalizedItems;
+    const beforeInteractionHooksRef = react.useRef(beforeInteractionHooks);
+    beforeInteractionHooksRef.current = beforeInteractionHooks;
+    const afterInteractionHooksRef = react.useRef(afterInteractionHooks);
+    afterInteractionHooksRef.current = afterInteractionHooks;
+    const canvuInteractionSeqRef = react.useRef(0);
+    const activeCanvuInteractionRef = react.useRef(null);
+    const makeInteractionPoint = react.useCallback(
+      (input) => ({
+        worldX: input.worldX,
+        worldY: input.worldY,
+        clientX: input.clientX,
+        clientY: input.clientY
+      }),
+      []
+    );
+    const startCanvuInteraction = react.useCallback(
+      (input) => {
+        const start = makeInteractionPoint(input);
+        const detail = {
+          interactionId: `canvu-interaction-${++canvuInteractionSeqRef.current}`,
+          kind: input.kind,
+          toolId: input.toolId,
+          pointerType: input.pointerType,
+          button: input.button,
+          shiftKey: input.shiftKey,
+          altKey: input.altKey,
+          metaKey: input.metaKey,
+          ctrlKey: input.ctrlKey,
+          start,
+          current: start,
+          selectedIds: [...effectiveSelectedIdsRef.current],
+          itemIds: [...input.itemIds ?? []],
+          items: itemsRef.current
+        };
+        for (const hook of beforeInteractionHooksRef.current) {
+          if (hook(detail) === "handled") {
+            return null;
+          }
+        }
+        activeCanvuInteractionRef.current = detail;
+        return detail;
+      },
+      [makeInteractionPoint]
+    );
+    const updateCanvuInteractionCurrent = react.useCallback(
+      (input) => {
+        const detail = activeCanvuInteractionRef.current;
+        if (!detail) return;
+        activeCanvuInteractionRef.current = {
+          ...detail,
+          current: makeInteractionPoint(input)
+        };
+      },
+      [makeInteractionPoint]
+    );
+    const finishCanvuInteraction = react.useCallback(
+      (outcome, options) => {
+        const detail = activeCanvuInteractionRef.current;
+        if (!detail) return;
+        activeCanvuInteractionRef.current = null;
+        const current = options?.current ? makeInteractionPoint(options.current) : detail.current;
+        const info = options?.info;
+        const afterDetail = {
+          ...detail,
+          current,
+          itemIds: detail.itemIds.length > 0 ? detail.itemIds : [...info?.itemIds ?? []],
+          outcome,
+          ...info ? { info } : {}
+        };
+        for (const hook of afterInteractionHooksRef.current) {
+          hook(afterDetail);
+        }
+      },
+      [makeInteractionPoint]
+    );
     onWorldPointerDownRef.current = onWorldPointerDown;
     const originalOnItemsChangeRef = react.useRef(onItemsChange);
     originalOnItemsChangeRef.current = onItemsChange;
@@ -8437,6 +8640,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;
@@ -8651,9 +8879,14 @@ var VectorViewport = react.forwardRef(
         );
         if (item) {
           const exists = itemsRef.current.some((it) => it.id === id);
+          const info = {
+            motive: "draw",
+            itemIds: [id],
+            toolId: args.tool
+          };
           change(
             exists ? replaceItem(itemsRef.current, id, item) : [...itemsRef.current, item],
-            { motive: "draw", itemIds: [id], toolId: args.tool }
+            info
           );
           patchCurrentStrokeStyle({
             stroke: item.stroke ?? DEFAULT_STROKE_STYLE.stroke,
@@ -8661,10 +8894,15 @@ var VectorViewport = react.forwardRef(
             strokeOpacity: item.strokeOpacity,
             strokeDash: item.strokeDash
           });
+          if (!shouldKeepToolForContinuousPenInput(args.tool, args.pointerType)) {
+            requestAutoResetTool(args.tool);
+          }
+          return info;
         }
         if (!shouldKeepToolForContinuousPenInput(args.tool, args.pointerType)) {
           requestAutoResetTool(args.tool);
         }
+        return void 0;
       },
       [
         patchCurrentStrokeStyle,
@@ -8795,17 +9033,19 @@ var VectorViewport = react.forwardRef(
         }
         emitRemoteStrokePreviewClear();
         setPlacementPreview(null);
-        commitCompletedStroke({
+        const info = commitCompletedStroke({
           tool,
           pointerType,
           points: [...pts],
           style,
           itemId
         });
+        finishCanvuInteraction("completed", { info });
       },
       [
         commitCompletedStroke,
         emitRemoteStrokePreviewClear,
+        finishCanvuInteraction,
         releaseInteractionPointer,
         renderSceneWithLivePenStroke
       ]
@@ -8854,12 +9094,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;
@@ -8880,7 +9122,7 @@ var VectorViewport = react.forwardRef(
         cameraRef.current = null;
         setCameraForOverlay(null);
       };
-    }, [applePencilNav, renderFrame]);
+    }, [applePencilNav, renderFrame, resolveReadOnlyActivation]);
     react.useEffect(() => {
       rendererRef.current?.setInteractionState({
         selectedIds: effectiveSelectedIds,
@@ -9394,6 +9636,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;
@@ -9820,6 +10085,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;
@@ -9875,12 +10252,26 @@ var VectorViewport = react.forwardRef(
           if (!raw) return void 0;
           return raw.toolKind === "arrow" && raw.arrowBind ? bakeArrowItemToAbsolute(raw, canonical) : raw;
         };
+        const startInteraction = (kind, itemIds) => startCanvuInteraction({
+          kind,
+          toolId: tool,
+          pointerType: e.pointerType,
+          button: e.button,
+          worldX,
+          worldY,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          itemIds
+        });
+        const stopHandledInteraction = () => {
+          e.preventDefault();
+          e.stopPropagation();
+        };
         if (tool === "eraser") {
-          dragStateRef.current = { kind: "erase" };
-          eraserPreviewIdsRef.current = /* @__PURE__ */ new Set();
-          setEraserPreviewIds([]);
-          setEraserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
-          setEraserActive(true);
           const toErase = collectEraserTargetsAtWorldPoint(
             resolved,
             worldX,
@@ -9890,6 +10281,15 @@ var VectorViewport = react.forwardRef(
               ignoreLocked: true
             }
           );
+          if (!startInteraction("erase", toErase)) {
+            stopHandledInteraction();
+            return;
+          }
+          dragStateRef.current = { kind: "erase" };
+          eraserPreviewIdsRef.current = /* @__PURE__ */ new Set();
+          setEraserPreviewIds([]);
+          setEraserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
+          setEraserActive(true);
           if (toErase.length > 0) {
             for (const id of toErase) {
               eraserPreviewIdsRef.current.add(id);
@@ -9922,6 +10322,10 @@ var VectorViewport = react.forwardRef(
               const snapSpin = bakedSnapshot(selected.id);
               if (!snapSpin) return;
               const pivot = itemPivotWorld(selected);
+              if (!startInteraction("rotate", [selected.id])) {
+                stopHandledInteraction();
+                return;
+              }
               dragStateRef.current = {
                 kind: "rotate",
                 id: selected.id,
@@ -9946,6 +10350,10 @@ var VectorViewport = react.forwardRef(
             if (hb) {
               const snapRs = bakedSnapshot(selected.id);
               if (!snapRs) return;
+              if (!startInteraction("resize", [selected.id])) {
+                stopHandledInteraction();
+                return;
+              }
               dragStateRef.current = {
                 kind: "resize",
                 id: selected.id,
@@ -9967,7 +10375,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];
@@ -9978,6 +10386,10 @@ var VectorViewport = react.forwardRef(
                   moveSnapshots[id] = snap;
                 }
               }
+              if (!startInteraction("select-mode-item-click", [hit.id])) {
+                stopHandledInteraction();
+                return;
+              }
               dragStateRef.current = {
                 kind: "select-mode-item-click",
                 id: hit.id,
@@ -9994,7 +10406,14 @@ var VectorViewport = react.forwardRef(
             }
             if (e.shiftKey) {
               const next = cur.includes(hit.id) ? cur.filter((id) => id !== hit.id) : [...cur, hit.id];
+              if (!startInteraction("select-mode-item-click", [hit.id])) {
+                stopHandledInteraction();
+                return;
+              }
               setEffectiveSelectedIdsRef.current(next);
+              finishCanvuInteraction("completed", {
+                info: { motive: "custom", itemIds: [hit.id], toolId: tool }
+              });
               e.preventDefault();
               e.stopPropagation();
               return;
@@ -10002,7 +10421,6 @@ var VectorViewport = react.forwardRef(
             let idsToMove;
             if (!cur.includes(hit.id)) {
               idsToMove = [hit.id];
-              setEffectiveSelectedIdsRef.current(idsToMove);
             } else {
               idsToMove = [...cur];
             }
@@ -10013,6 +10431,13 @@ var VectorViewport = react.forwardRef(
                 snapshots[id] = snap;
               }
             }
+            if (!startInteraction("move", idsToMove)) {
+              stopHandledInteraction();
+              return;
+            }
+            if (!cur.includes(hit.id)) {
+              setEffectiveSelectedIdsRef.current(idsToMove);
+            }
             dragStateRef.current = {
               kind: "move",
               ids: idsToMove,
@@ -10037,9 +10462,14 @@ var VectorViewport = react.forwardRef(
                 }
               }
               if (Object.keys(snapshots).length > 0) {
+                const moveIds = Object.keys(snapshots);
+                if (!startInteraction("move", moveIds)) {
+                  stopHandledInteraction();
+                  return;
+                }
                 dragStateRef.current = {
                   kind: "move",
-                  ids: Object.keys(snapshots),
+                  ids: moveIds,
                   snapshots,
                   startWorld: { x: worldX, y: worldY }
                 };
@@ -10050,6 +10480,10 @@ var VectorViewport = react.forwardRef(
               }
             }
           }
+          if (!startInteraction("marquee")) {
+            stopHandledInteraction();
+            return;
+          }
           dragStateRef.current = {
             kind: "marquee",
             startWorld: { x: worldX, y: worldY },
@@ -10078,6 +10512,10 @@ var VectorViewport = react.forwardRef(
           );
           const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, e.clientX, e.clientY) : void 0;
           const directPenStroke = e.pointerType === "pen" && (tool === "draw" || tool === "marker");
+          if (!startInteraction("stroke")) {
+            stopHandledInteraction();
+            return;
+          }
           let itemId;
           if (directPenStroke) {
             itemId = createShapeId();
@@ -10121,6 +10559,10 @@ var VectorViewport = react.forwardRef(
           return;
         }
         if (tool === "text" || tool === "image") {
+          if (!startInteraction("tap")) {
+            stopHandledInteraction();
+            return;
+          }
           dragStateRef.current = {
             kind: "tap",
             tool,
@@ -10134,6 +10576,10 @@ var VectorViewport = react.forwardRef(
         }
         const cp = customPlacementRef.current;
         if (tool === "rect" || tool === "ellipse" || tool === "architectural-cloud" || tool === "line" || tool === "arrow" || cp && tool === cp.toolId) {
+          if (!startInteraction("place")) {
+            stopHandledInteraction();
+            return;
+          }
           dragStateRef.current = {
             kind: "place",
             tool,
@@ -10151,8 +10597,10 @@ var VectorViewport = react.forwardRef(
         captureInteractionPointer,
         emitRemoteStrokePreview,
         finalizeStrokeDragState,
+        finishCanvuInteraction,
         renderSceneWithLivePenStroke,
         screenToWorld,
+        startCanvuInteraction,
         startOrRestartStraightStrokeHoldTimer
       ]
     );
@@ -10181,14 +10629,32 @@ var VectorViewport = react.forwardRef(
           e.stopImmediatePropagation();
           return;
         }
-        wrapperRef.current?.focus({ preventScroll: true });
-        setContextMenu(null);
         const startPoint = pointerSampleToWorldPoint(
           screenToWorld,
           e.clientX,
           e.clientY,
           e.pressure
         );
+        if (!startCanvuInteraction({
+          kind: "stroke",
+          toolId: tool,
+          pointerType: e.pointerType,
+          button: e.button,
+          worldX: startPoint.x,
+          worldY: startPoint.y,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey
+        })) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          return;
+        }
+        wrapperRef.current?.focus({ preventScroll: true });
+        setContextMenu(null);
         const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, e.clientX, e.clientY) : void 0;
         const itemId = createShapeId();
         const item = createFreehandStrokeItem(
@@ -10236,6 +10702,7 @@ var VectorViewport = react.forwardRef(
       interactive,
       renderSceneWithLivePenStroke,
       screenToWorld,
+      startCanvuInteraction,
       startOrRestartStraightStrokeHoldTimer
     ]);
     react.useEffect(() => {
@@ -10286,15 +10753,32 @@ var VectorViewport = react.forwardRef(
           stopTouchEvent(ev);
           return;
         }
-        wrapperRef.current?.focus({ preventScroll: true });
-        setContextMenu(null);
-        penDetectedRef.current = true;
         const startPoint = pointerSampleToWorldPoint(
           screenToWorld,
           touch.clientX,
           touch.clientY,
           touchPressure(touch)
         );
+        if (!startCanvuInteraction({
+          kind: "stroke",
+          toolId: tool,
+          pointerType: "pen",
+          button: 0,
+          worldX: startPoint.x,
+          worldY: startPoint.y,
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+          shiftKey: ev.shiftKey,
+          altKey: ev.altKey,
+          metaKey: ev.metaKey,
+          ctrlKey: ev.ctrlKey
+        })) {
+          stopTouchEvent(ev);
+          return;
+        }
+        wrapperRef.current?.focus({ preventScroll: true });
+        setContextMenu(null);
+        penDetectedRef.current = true;
         const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, touch.clientX, touch.clientY) : void 0;
         const itemId = createShapeId();
         const item = createFreehandStrokeItem(
@@ -10340,6 +10824,12 @@ var VectorViewport = react.forwardRef(
           touch.clientY,
           touchPressure(touch)
         );
+        updateCanvuInteractionCurrent({
+          worldX: endpoint.x,
+          worldY: endpoint.y,
+          clientX: touch.clientX,
+          clientY: touch.clientY
+        });
         if (updateStraightStrokeForMove(st, touch.clientX, touch.clientY, endpoint)) {
           debugApplePencilPointer("touchmove-stroke", {
             touchId: touch.identifier,
@@ -10381,16 +10871,42 @@ var VectorViewport = react.forwardRef(
         if (st.kind !== "stroke") return;
         const touch = findChangedTouch(ev.changedTouches);
         if (!touch) return;
+        const currentPoint = pointerSampleToWorldPoint(
+          screenToWorld,
+          touch.clientX,
+          touch.clientY,
+          touchPressure(touch)
+        );
+        updateCanvuInteractionCurrent({
+          worldX: currentPoint.x,
+          worldY: currentPoint.y,
+          clientX: touch.clientX,
+          clientY: touch.clientY
+        });
+        if (ev.type === "touchcancel") {
+          clearStraightStrokeHoldTimer(st);
+          dragStateRef.current = { kind: "idle" };
+          releaseInteractionPointer();
+          if (st.itemId) {
+            renderSceneWithLivePenStroke(null);
+          }
+          emitRemoteStrokePreviewClear();
+          setPlacementPreview(null);
+          finishCanvuInteraction("cancelled", {
+            current: {
+              worldX: currentPoint.x,
+              worldY: currentPoint.y,
+              clientX: touch.clientX,
+              clientY: touch.clientY
+            }
+          });
+          stopTouchEvent(ev);
+          return;
+        }
         const cam = cameraRef.current;
         if (cam) {
           if (st.straightLine?.active) {
-            const endpoint = pointerSampleToWorldPoint(
-              screenToWorld,
-              touch.clientX,
-              touch.clientY,
-              touchPressure(touch)
-            );
-            setStraightStrokeEndpoint(st, endpoint);
+            setStraightStrokeEndpoint(st, currentPoint);
           } else {
             const completedPoints = appendTouchToStrokePoints(
               st.points,
@@ -10441,12 +10957,17 @@ var VectorViewport = react.forwardRef(
     }, [
       applePencilNav,
       emitRemoteStrokePreview,
+      emitRemoteStrokePreviewClear,
       finalizeStrokeDragState,
+      finishCanvuInteraction,
       interactive,
+      releaseInteractionPointer,
       renderSceneWithLivePenStroke,
       screenToWorld,
       setStraightStrokeEndpoint,
+      startCanvuInteraction,
       startOrRestartStraightStrokeHoldTimer,
+      updateCanvuInteractionCurrent,
       updateStraightStrokeForMove
     ]);
     react.useEffect(() => {
@@ -10459,6 +10980,12 @@ var VectorViewport = react.forwardRef(
         if (st.kind === "tap") return;
         if (st.kind === "marquee") {
           const { worldX: worldX2, worldY: worldY2 } = screenToWorld(ev.clientX, ev.clientY);
+          updateCanvuInteractionCurrent({
+            worldX: worldX2,
+            worldY: worldY2,
+            clientX: ev.clientX,
+            clientY: ev.clientY
+          });
           const raw = rectFromCorners(st.startWorld, { x: worldX2, y: worldY2 });
           setPlacementPreview({ kind: "marquee", rect: raw });
           const nextCand = collectItemIdsInRect(
@@ -10486,6 +11013,12 @@ var VectorViewport = react.forwardRef(
             ev.clientY,
             ev.pointerType === "pen" ? ev.pressure : void 0
           );
+          updateCanvuInteractionCurrent({
+            worldX: endpoint.x,
+            worldY: endpoint.y,
+            clientX: ev.clientX,
+            clientY: ev.clientY
+          });
           if (updateStraightStrokeForMove(st, ev.clientX, ev.clientY, endpoint)) {
             return;
           }
@@ -10534,6 +11067,12 @@ var VectorViewport = react.forwardRef(
         }
         if (st.kind === "erase") {
           const { worldX: worldX2, worldY: worldY2 } = screenToWorld(ev.clientX, ev.clientY);
+          updateCanvuInteractionCurrent({
+            worldX: worldX2,
+            worldY: worldY2,
+            clientX: ev.clientX,
+            clientY: ev.clientY
+          });
           const lineHitWorld = 10 / cam.zoom;
           setEraserTrail(
             (prev) => pruneEraserTrail([...prev, { x: worldX2, y: worldY2, t: Date.now() }])
@@ -10559,6 +11098,12 @@ var VectorViewport = react.forwardRef(
         const change = onItemsChangeRef.current;
         if (!change) return;
         const { worldX, worldY } = screenToWorld(ev.clientX, ev.clientY);
+        updateCanvuInteractionCurrent({
+          worldX,
+          worldY,
+          clientX: ev.clientX,
+          clientY: ev.clientY
+        });
         if (st.kind === "select-mode-item-click") {
           const screenDx = ev.clientX - st.startScreen.x;
           const screenDy = ev.clientY - st.startScreen.y;
@@ -10691,48 +11236,69 @@ var VectorViewport = react.forwardRef(
           setPlacementPreview(null);
           marqueeCandidateIdsRef.current = [];
           setMarqueeCandidateIds([]);
+          finishCanvuInteraction("cancelled");
           return;
         }
+        const finishOutcome = ev.type === "pointercancel" ? "cancelled" : "completed";
+        const currentWorld = screenToWorld(ev.clientX, ev.clientY);
+        const currentInteractionPoint = {
+          worldX: currentWorld.worldX,
+          worldY: currentWorld.worldY,
+          clientX: ev.clientX,
+          clientY: ev.clientY
+        };
+        updateCanvuInteractionCurrent(currentInteractionPoint);
         if (st.kind === "move" || st.kind === "resize" || st.kind === "rotate") {
+          const info = st.kind === "move" ? { motive: "move", itemIds: [...st.ids] } : st.kind === "resize" ? { motive: "resize", itemIds: [st.id] } : { motive: "rotate", itemIds: [st.id] };
           dragStateRef.current = { kind: "idle" };
           releaseInteractionPointer();
+          finishCanvuInteraction(finishOutcome, {
+            current: currentInteractionPoint,
+            ...finishOutcome === "completed" ? { info } : {}
+          });
           return;
         }
         if (st.kind === "select-mode-item-click") {
           dragStateRef.current = { kind: "idle" };
           releaseInteractionPointer();
-          if (ev.type === "pointercancel") return;
+          if (finishOutcome === "cancelled") {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
           const dx = ev.clientX - st.startScreen.x;
           const dy = ev.clientY - st.startScreen.y;
-          if (Math.hypot(dx, dy) > TAP_PX) return;
+          if (Math.hypot(dx, dy) > TAP_PX) {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
           const item = itemsRef.current.find((candidate) => candidate.id === st.id) ?? resolvedItemsRef.current.find((candidate) => candidate.id === st.id);
-          if (!item) return;
-          const placement = findSelectModeItemClickPlacement(
+          if (!item) {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
+          const placement = findReadOnlyItemClickPlacement(
             item,
             allCustomPlacementsRef.current
           );
           const onSelectModeItemClick = placement?.onSelectModeItemClick;
-          if (!onSelectModeItemClick) return;
-          const { worldX, worldY } = screenToWorld(ev.clientX, ev.clientY);
-          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)
+          if (!onSelectModeItemClick) {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
+          onSelectModeItemClick(
+            buildSelectModeItemClickDetail(item, currentWorld, ev)
+          );
+          finishCanvuInteraction("completed", {
+            current: currentInteractionPoint,
+            info: { motive: "custom", itemIds: [item.id], toolId: "select" }
           });
           return;
         }
@@ -10742,16 +11308,25 @@ var VectorViewport = react.forwardRef(
           setPlacementPreview(null);
           marqueeCandidateIdsRef.current = [];
           setMarqueeCandidateIds([]);
-          const { worldX, worldY } = screenToWorld(ev.clientX, ev.clientY);
+          const { worldX, worldY } = currentWorld;
           const raw = rectFromCorners(st.startWorld, { x: worldX, y: worldY });
           const br = normalizeRect(raw);
           const screenDx = ev.clientX - st.startScreen.x;
           const screenDy = ev.clientY - st.startScreen.y;
+          if (finishOutcome === "cancelled") {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
           const tooSmall = Math.hypot(screenDx, screenDy) < TAP_PX || br.width < MIN_MARQUEE_WORLD && br.height < MIN_MARQUEE_WORLD;
           if (tooSmall) {
             if (!st.shiftKey) {
               setEffectiveSelectedIdsRef.current([]);
             }
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
             return;
           }
           const picked = collectItemIdsInRect(resolvedItemsRef.current, br);
@@ -10768,9 +11343,26 @@ var VectorViewport = react.forwardRef(
           } else {
             setEffectiveSelectedIdsRef.current(picked);
           }
+          finishCanvuInteraction("completed", {
+            current: currentInteractionPoint
+          });
           return;
         }
         if (st.kind === "stroke") {
+          if (finishOutcome === "cancelled") {
+            clearStraightStrokeHoldTimer(st);
+            dragStateRef.current = { kind: "idle" };
+            releaseInteractionPointer();
+            if (st.itemId) {
+              renderSceneWithLivePenStroke(null);
+            }
+            emitRemoteStrokePreviewClear();
+            setPlacementPreview(null);
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
           const completedPoints = (() => {
             if (st.straightLine?.active) {
               const endpoint = pointerSampleToWorldPoint(
@@ -10801,15 +11393,20 @@ var VectorViewport = react.forwardRef(
         }
         if (st.kind === "erase") {
           const change = onItemsChangeRef.current;
+          const erasedIds = [...eraserPreviewIdsRef.current];
+          const info = erasedIds.length > 0 ? {
+            motive: "erase",
+            itemIds: erasedIds,
+            toolId: "eraser"
+          } : void 0;
           if (change && eraserPreviewIdsRef.current.size > 0) {
             const idSet = new Set(eraserPreviewIdsRef.current);
-            change(
-              itemsRef.current.filter((i) => !idSet.has(i.id)),
-              {
-                motive: "erase",
-                itemIds: [...idSet]
-              }
-            );
+            if (finishOutcome === "completed") {
+              change(
+                itemsRef.current.filter((i) => !idSet.has(i.id)),
+                info
+              );
+            }
           }
           eraserPreviewIdsRef.current.clear();
           setEraserPreviewIds([]);
@@ -10817,7 +11414,13 @@ var VectorViewport = react.forwardRef(
           setEraserActive(false);
           dragStateRef.current = { kind: "idle" };
           releaseInteractionPointer();
-          requestAutoResetTool("eraser");
+          if (finishOutcome === "completed") {
+            requestAutoResetTool("eraser");
+          }
+          finishCanvuInteraction(finishOutcome, {
+            current: currentInteractionPoint,
+            ...finishOutcome === "completed" && info ? { info } : {}
+          });
           return;
         }
         if (st.kind === "tap") {
@@ -10825,11 +11428,22 @@ var VectorViewport = react.forwardRef(
           const dy = ev.clientY - st.startScreen.y;
           dragStateRef.current = { kind: "idle" };
           releaseInteractionPointer();
-          if (Math.hypot(dx, dy) > TAP_PX) return;
+          if (finishOutcome === "cancelled" || Math.hypot(dx, dy) > TAP_PX) {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
           const change = onItemsChangeRef.current;
-          if (!change) return;
+          if (!change) {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
           const id = createShapeId();
           const { x: worldX, y: worldY } = st.startWorld;
+          let info;
           if (st.tool === "text") {
             const fs = strokeStyleRef.current.textFontSize;
             const baseline = textBaselineYFor(fs);
@@ -10852,11 +11466,12 @@ var VectorViewport = react.forwardRef(
               bounds: { ...newItem.bounds }
             };
             const hidden = applyTextDraftWhileEditing(newItem, "");
-            change([...itemsRef.current, hidden], {
+            info = {
               motive: "text-create",
               itemIds: [id],
               toolId: st.tool
-            });
+            };
+            change([...itemsRef.current, hidden], info);
             setEffectiveSelectedIdsRef.current([id]);
             setEditingTextId(id);
             setDraftText("");
@@ -10865,6 +11480,10 @@ var VectorViewport = react.forwardRef(
             imageInputRef.current?.click();
           }
           requestAutoResetTool(st.tool);
+          finishCanvuInteraction("completed", {
+            current: currentInteractionPoint,
+            ...info ? { info } : {}
+          });
           return;
         }
         if (st.kind === "place") {
@@ -10875,11 +11494,19 @@ var VectorViewport = react.forwardRef(
           dragStateRef.current = { kind: "idle" };
           releaseInteractionPointer();
           setPlacementPreview(null);
-          if (!change) return;
+          if (finishOutcome === "cancelled" || !change) {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
           if (st.tool === "arrow") {
             const screenDx = ev.clientX - st.startScreen.x;
             const screenDy = ev.clientY - st.startScreen.y;
             if (Math.hypot(screenDx, screenDy) < MIN_ARROW_DRAG_PX) {
+              finishCanvuInteraction("cancelled", {
+                current: currentInteractionPoint
+              });
               return;
             }
             const maxDist = ARROW_BIND_SNAP_PX / cam.zoom;
@@ -10911,18 +11538,23 @@ var VectorViewport = react.forwardRef(
                 ...snapB ? { end: snapB.binding } : {}
               };
             }
+            const info2 = {
+              motive: "place",
+              itemIds: [id2],
+              toolId: st.tool
+            };
             change(
               [
                 ...itemsRef.current,
                 createLineItem(id2, rawArrow, line, "arrow", pen2, arrowBind)
               ],
-              {
-                motive: "place",
-                itemIds: [id2],
-                toolId: st.tool
-              }
+              info2
             );
             setEffectiveSelectedIdsRef.current([id2]);
+            finishCanvuInteraction("completed", {
+              current: currentInteractionPoint,
+              info: info2
+            });
             return;
           }
           let raw = rectFromCorners(a, b);
@@ -10947,47 +11579,61 @@ var VectorViewport = react.forwardRef(
           }
           const id = createShapeId();
           const pen = strokeStyleRef.current;
+          let info;
           if (cpUp && st.tool === cpUp.toolId) {
             const item = tagCustomPlacementItem(
               cpUp.createItem({ id, bounds: br }),
               cpUp.toolId
             );
-            change(itemsRef.current.concat(item), {
+            info = {
               motive: "place",
               itemIds: [id],
               toolId: st.tool
-            });
+            };
+            change(itemsRef.current.concat(item), info);
             if (cpUp.selectAfterCreate !== false) {
               setEffectiveSelectedIdsRef.current([id]);
             }
+            finishCanvuInteraction("completed", {
+              current: currentInteractionPoint,
+              info
+            });
             return;
           }
           if (st.tool === "rect") {
-            change([...itemsRef.current, createRectangleItem(id, raw, pen)], {
+            info = {
               motive: "place",
               itemIds: [id],
               toolId: st.tool
-            });
+            };
+            change([...itemsRef.current, createRectangleItem(id, raw, pen)], info);
             setEffectiveSelectedIdsRef.current([id]);
           } else if (st.tool === "ellipse") {
-            change([...itemsRef.current, createEllipseItem(id, raw, pen)], {
+            info = {
               motive: "place",
               itemIds: [id],
               toolId: st.tool
-            });
+            };
+            change([...itemsRef.current, createEllipseItem(id, raw, pen)], info);
             setEffectiveSelectedIdsRef.current([id]);
           } else if (st.tool === "architectural-cloud") {
+            info = {
+              motive: "place",
+              itemIds: [id],
+              toolId: st.tool
+            };
             change(
               [...itemsRef.current, createArchitecturalCloudItem(id, raw, pen)],
-              {
-                motive: "place",
-                itemIds: [id],
-                toolId: st.tool
-              }
+              info
             );
             setEffectiveSelectedIdsRef.current([id]);
           } else if (st.tool === "line" || st.tool === "arrow") {
             const line = lineEndpointsToLocal(raw, lineA, lineB);
+            info = {
+              motive: "place",
+              itemIds: [id],
+              toolId: st.tool
+            };
             change(
               [
                 ...itemsRef.current,
@@ -10999,15 +11645,15 @@ var VectorViewport = react.forwardRef(
                   pen
                 )
               ],
-              {
-                motive: "place",
-                itemIds: [id],
-                toolId: st.tool
-              }
+              info
             );
             setEffectiveSelectedIdsRef.current([id]);
           }
           requestAutoResetTool(st.tool);
+          finishCanvuInteraction("completed", {
+            current: currentInteractionPoint,
+            ...info ? { info } : {}
+          });
         }
       };
       document.addEventListener("pointermove", onMove);
@@ -11019,17 +11665,20 @@ var VectorViewport = react.forwardRef(
         document.removeEventListener("pointercancel", onUp);
       };
     }, [
+      buildSelectModeItemClickDetail,
       emitRemoteStrokePreview,
       emitRemoteStrokePreviewClear,
       interactive,
       pruneEraserTrail,
       pruneLaserTrail,
       finalizeStrokeDragState,
+      finishCanvuInteraction,
       renderSceneWithLivePenStroke,
       releaseInteractionPointer,
       requestAutoResetTool,
       screenToWorld,
       setStraightStrokeEndpoint,
+      updateCanvuInteractionCurrent,
       updateStraightStrokeForMove
     ]);
     const selectedItemsForOverlay = react.useMemo(() => {