canvu-react 0.4.62 → 0.4.64

package/dist/react.js

@@ -2112,7 +2112,7 @@ var collapseButtonStyle = {
   cursor: "pointer",
   padding: 0
 };
-var collapsedButtonStyle = {
+var defaultCollapsedButtonStyle = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -2141,7 +2141,10 @@ function ImagesMenu({
   onItemsChange,
   onFocusItem,
   labels,
-  defaultOpen = false
+  defaultOpen = false,
+  collapsedButtonClassName,
+  collapsedButtonStyle,
+  renderCollapsedButton
 }) {
   const managed = useMemo(() => items.filter(isManagedImage), [items]);
   const sensors = useSensors(
@@ -2162,18 +2165,26 @@ function ImagesMenu({
     duplicate: labels?.duplicate ?? labels?.copy ?? defaultLabels.duplicate
   };
   if (collapsed) {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "data-slot": "images-menu-collapsed",
-        style: collapsedButtonStyle,
-        "aria-label": resolvedLabels.expand,
-        title: resolvedLabels.expand,
-        onClick: () => setCollapsed(false),
-        children: /* @__PURE__ */ jsx(Images, { size: 20 })
-      }
-    );
+    const buttonProps = {
+      type: "button",
+      "data-slot": "images-menu-collapsed",
+      className: collapsedButtonClassName,
+      style: {
+        ...defaultCollapsedButtonStyle,
+        ...collapsedButtonStyle ?? {}
+      },
+      "aria-label": resolvedLabels.expand,
+      title: resolvedLabels.expand,
+      onClick: () => setCollapsed(false)
+    };
+    if (renderCollapsedButton) {
+      return renderCollapsedButton({
+        count: managed.length,
+        label: resolvedLabels.expand,
+        buttonProps
+      });
+    }
+    return /* @__PURE__ */ jsx("button", { ...buttonProps, children: /* @__PURE__ */ jsx(Images, { size: 20 }) });
   }
   const onDragEnd = (event) => {
     const { active, over } = event;
@@ -3135,7 +3146,9 @@ function ToolPluginComponent({
   toolTransform,
   createItem,
   selectAfterCreate,
-  onSelectModeItemClick
+  onSelectModeItemClick,
+  onBeforeInteraction,
+  onAfterInteraction
 }) {
   const contribution = useMemo(
     () => ({
@@ -3148,9 +3161,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;
@@ -3161,6 +3192,8 @@ function createToolPlugin(options) {
     toolTransform,
     selectAfterCreate,
     onSelectModeItemClick,
+    onBeforeInteraction,
+    onAfterInteraction,
     ...tool
   } = options;
   const pluginId = `canvu.plugin.tool:${tool.id}`;
@@ -3175,7 +3208,9 @@ function createToolPlugin(options) {
           toolTransform,
           createItem,
           selectAfterCreate,
-          onSelectModeItemClick
+          onSelectModeItemClick,
+          onBeforeInteraction,
+          onAfterInteraction
         }
       );
     }
@@ -8125,6 +8160,8 @@ var VectorViewport = forwardRef(
     selectedIds: selectedIdsProp,
     onSelectionChange,
     onItemsChange: consumerOnItemsChange,
+    onBeforeInteraction: consumerOnBeforeInteraction,
+    onAfterInteraction: consumerOnAfterInteraction,
     onActivateLink,
     onWorldPointerDown: consumerOnWorldPointerDown,
     toolbar,
@@ -8250,6 +8287,24 @@ var VectorViewport = forwardRef(
         (contribution) => contribution.callbacks?.onCameraChange
       )
     );
+    const beforeInteractionHooks = useMemo(
+      () => [
+        consumerOnBeforeInteraction,
+        ...orderedPluginContributions.map(
+          (contribution) => contribution.interactionHooks?.onBeforeInteraction
+        )
+      ].filter((hook) => hook != null),
+      [consumerOnBeforeInteraction, orderedPluginContributions]
+    );
+    const afterInteractionHooks = useMemo(
+      () => [
+        consumerOnAfterInteraction,
+        ...orderedPluginContributions.map(
+          (contribution) => contribution.interactionHooks?.onAfterInteraction
+        )
+      ].filter((hook) => hook != null),
+      [consumerOnAfterInteraction, orderedPluginContributions]
+    );
     const onItemsChange = useMemo(() => {
       const middlewares = orderedPluginContributions.map((contribution) => contribution.wrapOnItemsChange).filter(
         (middleware) => middleware != null
@@ -8393,6 +8448,81 @@ var VectorViewport = forwardRef(
       [items]
     );
     itemsRef.current = normalizedItems;
+    const beforeInteractionHooksRef = useRef(beforeInteractionHooks);
+    beforeInteractionHooksRef.current = beforeInteractionHooks;
+    const afterInteractionHooksRef = useRef(afterInteractionHooks);
+    afterInteractionHooksRef.current = afterInteractionHooks;
+    const canvuInteractionSeqRef = useRef(0);
+    const activeCanvuInteractionRef = useRef(null);
+    const makeInteractionPoint = useCallback(
+      (input) => ({
+        worldX: input.worldX,
+        worldY: input.worldY,
+        clientX: input.clientX,
+        clientY: input.clientY
+      }),
+      []
+    );
+    const startCanvuInteraction = 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 = useCallback(
+      (input) => {
+        const detail = activeCanvuInteractionRef.current;
+        if (!detail) return;
+        activeCanvuInteractionRef.current = {
+          ...detail,
+          current: makeInteractionPoint(input)
+        };
+      },
+      [makeInteractionPoint]
+    );
+    const finishCanvuInteraction = 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 = useRef(onItemsChange);
     originalOnItemsChangeRef.current = onItemsChange;
@@ -8633,9 +8763,14 @@ var VectorViewport = 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,
@@ -8643,10 +8778,15 @@ var VectorViewport = 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,
@@ -8777,17 +8917,19 @@ var VectorViewport = forwardRef(
         }
         emitRemoteStrokePreviewClear();
         setPlacementPreview(null);
-        commitCompletedStroke({
+        const info = commitCompletedStroke({
           tool,
           pointerType,
           points: [...pts],
           style,
           itemId
         });
+        finishCanvuInteraction("completed", { info });
       },
       [
         commitCompletedStroke,
         emitRemoteStrokePreviewClear,
+        finishCanvuInteraction,
         releaseInteractionPointer,
         renderSceneWithLivePenStroke
       ]
@@ -9857,12 +9999,26 @@ var VectorViewport = 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,
@@ -9872,6 +10028,15 @@ var VectorViewport = 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);
@@ -9904,6 +10069,10 @@ var VectorViewport = 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,
@@ -9928,6 +10097,10 @@ var VectorViewport = 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,
@@ -9960,6 +10133,10 @@ var VectorViewport = forwardRef(
                   moveSnapshots[id] = snap;
                 }
               }
+              if (!startInteraction("select-mode-item-click", [hit.id])) {
+                stopHandledInteraction();
+                return;
+              }
               dragStateRef.current = {
                 kind: "select-mode-item-click",
                 id: hit.id,
@@ -9976,7 +10153,14 @@ var VectorViewport = 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;
@@ -9984,7 +10168,6 @@ var VectorViewport = forwardRef(
             let idsToMove;
             if (!cur.includes(hit.id)) {
               idsToMove = [hit.id];
-              setEffectiveSelectedIdsRef.current(idsToMove);
             } else {
               idsToMove = [...cur];
             }
@@ -9995,6 +10178,13 @@ var VectorViewport = forwardRef(
                 snapshots[id] = snap;
               }
             }
+            if (!startInteraction("move", idsToMove)) {
+              stopHandledInteraction();
+              return;
+            }
+            if (!cur.includes(hit.id)) {
+              setEffectiveSelectedIdsRef.current(idsToMove);
+            }
             dragStateRef.current = {
               kind: "move",
               ids: idsToMove,
@@ -10019,9 +10209,14 @@ var VectorViewport = 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 }
                 };
@@ -10032,6 +10227,10 @@ var VectorViewport = forwardRef(
               }
             }
           }
+          if (!startInteraction("marquee")) {
+            stopHandledInteraction();
+            return;
+          }
           dragStateRef.current = {
             kind: "marquee",
             startWorld: { x: worldX, y: worldY },
@@ -10060,6 +10259,10 @@ var VectorViewport = 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();
@@ -10103,6 +10306,10 @@ var VectorViewport = forwardRef(
           return;
         }
         if (tool === "text" || tool === "image") {
+          if (!startInteraction("tap")) {
+            stopHandledInteraction();
+            return;
+          }
           dragStateRef.current = {
             kind: "tap",
             tool,
@@ -10116,6 +10323,10 @@ var VectorViewport = 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,
@@ -10133,8 +10344,10 @@ var VectorViewport = forwardRef(
         captureInteractionPointer,
         emitRemoteStrokePreview,
         finalizeStrokeDragState,
+        finishCanvuInteraction,
         renderSceneWithLivePenStroke,
         screenToWorld,
+        startCanvuInteraction,
         startOrRestartStraightStrokeHoldTimer
       ]
     );
@@ -10163,14 +10376,32 @@ var VectorViewport = 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(
@@ -10218,6 +10449,7 @@ var VectorViewport = forwardRef(
       interactive,
       renderSceneWithLivePenStroke,
       screenToWorld,
+      startCanvuInteraction,
       startOrRestartStraightStrokeHoldTimer
     ]);
     useEffect(() => {
@@ -10268,15 +10500,32 @@ var VectorViewport = 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(
@@ -10322,6 +10571,12 @@ var VectorViewport = 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,
@@ -10363,16 +10618,42 @@ var VectorViewport = 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,
@@ -10423,12 +10704,17 @@ var VectorViewport = forwardRef(
     }, [
       applePencilNav,
       emitRemoteStrokePreview,
+      emitRemoteStrokePreviewClear,
       finalizeStrokeDragState,
+      finishCanvuInteraction,
       interactive,
+      releaseInteractionPointer,
       renderSceneWithLivePenStroke,
       screenToWorld,
       setStraightStrokeEndpoint,
+      startCanvuInteraction,
       startOrRestartStraightStrokeHoldTimer,
+      updateCanvuInteractionCurrent,
       updateStraightStrokeForMove
     ]);
     useEffect(() => {
@@ -10441,6 +10727,12 @@ var VectorViewport = 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(
@@ -10468,6 +10760,12 @@ var VectorViewport = 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;
           }
@@ -10516,6 +10814,12 @@ var VectorViewport = 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() }])
@@ -10541,6 +10845,12 @@ var VectorViewport = 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;
@@ -10673,29 +10983,64 @@ var VectorViewport = 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;
+          if (!item) {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
           const placement = findSelectModeItemClickPlacement(
             item,
             allCustomPlacementsRef.current
           );
           const onSelectModeItemClick = placement?.onSelectModeItemClick;
-          if (!onSelectModeItemClick) return;
-          const { worldX, worldY } = screenToWorld(ev.clientX, ev.clientY);
+          if (!onSelectModeItemClick) {
+            finishCanvuInteraction("cancelled", {
+              current: currentInteractionPoint
+            });
+            return;
+          }
+          const { worldX, worldY } = currentWorld;
           onSelectModeItemClick({
             item,
             worldX,
@@ -10716,6 +11061,10 @@ var VectorViewport = forwardRef(
             },
             setSelectedIds: (ids) => setEffectiveSelectedIdsRef.current(ids)
           });
+          finishCanvuInteraction("completed", {
+            current: currentInteractionPoint,
+            info: { motive: "custom", itemIds: [item.id], toolId: "select" }
+          });
           return;
         }
         if (st.kind === "marquee") {
@@ -10724,16 +11073,25 @@ var VectorViewport = 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);
@@ -10750,9 +11108,26 @@ var VectorViewport = 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(
@@ -10783,15 +11158,20 @@ var VectorViewport = 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([]);
@@ -10799,7 +11179,13 @@ var VectorViewport = 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") {
@@ -10807,11 +11193,22 @@ var VectorViewport = 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);
@@ -10834,11 +11231,12 @@ var VectorViewport = 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("");
@@ -10847,6 +11245,10 @@ var VectorViewport = forwardRef(
             imageInputRef.current?.click();
           }
           requestAutoResetTool(st.tool);
+          finishCanvuInteraction("completed", {
+            current: currentInteractionPoint,
+            ...info ? { info } : {}
+          });
           return;
         }
         if (st.kind === "place") {
@@ -10857,11 +11259,19 @@ var VectorViewport = 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;
@@ -10893,18 +11303,23 @@ var VectorViewport = 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);
@@ -10929,47 +11344,61 @@ var VectorViewport = 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,
@@ -10981,15 +11410,15 @@ var VectorViewport = 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);
@@ -11007,11 +11436,13 @@ var VectorViewport = forwardRef(
       pruneEraserTrail,
       pruneLaserTrail,
       finalizeStrokeDragState,
+      finishCanvuInteraction,
       renderSceneWithLivePenStroke,
       releaseInteractionPointer,
       requestAutoResetTool,
       screenToWorld,
       setStraightStrokeEndpoint,
+      updateCanvuInteractionCurrent,
       updateStraightStrokeForMove
     ]);
     const selectedItemsForOverlay = useMemo(() => {