canvu-react 0.4.62 → 0.4.64

package/dist/react.cjs

@@ -2119,7 +2119,7 @@ var collapseButtonStyle = {
   cursor: "pointer",
   padding: 0
 };
-var collapsedButtonStyle = {
+var defaultCollapsedButtonStyle = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -2148,7 +2148,10 @@ function ImagesMenu({
   onItemsChange,
   onFocusItem,
   labels,
-  defaultOpen = false
+  defaultOpen = false,
+  collapsedButtonClassName,
+  collapsedButtonStyle,
+  renderCollapsedButton
 }) {
   const managed = react.useMemo(() => items.filter(isManagedImage), [items]);
   const sensors = core.useSensors(
@@ -2169,18 +2172,26 @@ function ImagesMenu({
     duplicate: labels?.duplicate ?? labels?.copy ?? defaultLabels.duplicate
   };
   if (collapsed) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "data-slot": "images-menu-collapsed",
-        style: collapsedButtonStyle,
-        "aria-label": resolvedLabels.expand,
-        title: resolvedLabels.expand,
-        onClick: () => setCollapsed(false),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("button", { ...buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Images, { size: 20 }) });
   }
   const onDragEnd = (event) => {
     const { active, over } = event;
@@ -3142,7 +3153,9 @@ function ToolPluginComponent({
   toolTransform,
   createItem,
   selectAfterCreate,
-  onSelectModeItemClick
+  onSelectModeItemClick,
+  onBeforeInteraction,
+  onAfterInteraction
 }) {
   const contribution = react.useMemo(
     () => ({
@@ -3155,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;
@@ -3168,6 +3199,8 @@ function createToolPlugin(options) {
     toolTransform,
     selectAfterCreate,
     onSelectModeItemClick,
+    onBeforeInteraction,
+    onAfterInteraction,
     ...tool
   } = options;
   const pluginId = `canvu.plugin.tool:${tool.id}`;
@@ -3182,7 +3215,9 @@ function createToolPlugin(options) {
           toolTransform,
           createItem,
           selectAfterCreate,
-          onSelectModeItemClick
+          onSelectModeItemClick,
+          onBeforeInteraction,
+          onAfterInteraction
         }
       );
     }
@@ -8132,6 +8167,8 @@ var VectorViewport = react.forwardRef(
     selectedIds: selectedIdsProp,
     onSelectionChange,
     onItemsChange: consumerOnItemsChange,
+    onBeforeInteraction: consumerOnBeforeInteraction,
+    onAfterInteraction: consumerOnAfterInteraction,
     onActivateLink,
     onWorldPointerDown: consumerOnWorldPointerDown,
     toolbar,
@@ -8257,6 +8294,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
@@ -8400,6 +8455,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;
@@ -8640,9 +8770,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,
@@ -8650,10 +8785,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,
@@ -8784,17 +8924,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
       ]
@@ -9864,12 +10006,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,
@@ -9879,6 +10035,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);
@@ -9911,6 +10076,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,
@@ -9935,6 +10104,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,6 +10140,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,
@@ -9983,7 +10160,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;
@@ -9991,7 +10175,6 @@ var VectorViewport = react.forwardRef(
             let idsToMove;
             if (!cur.includes(hit.id)) {
               idsToMove = [hit.id];
-              setEffectiveSelectedIdsRef.current(idsToMove);
             } else {
               idsToMove = [...cur];
             }
@@ -10002,6 +10185,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,
@@ -10026,9 +10216,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 }
                 };
@@ -10039,6 +10234,10 @@ var VectorViewport = react.forwardRef(
               }
             }
           }
+          if (!startInteraction("marquee")) {
+            stopHandledInteraction();
+            return;
+          }
           dragStateRef.current = {
             kind: "marquee",
             startWorld: { x: worldX, y: worldY },
@@ -10067,6 +10266,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();
@@ -10110,6 +10313,10 @@ var VectorViewport = react.forwardRef(
           return;
         }
         if (tool === "text" || tool === "image") {
+          if (!startInteraction("tap")) {
+            stopHandledInteraction();
+            return;
+          }
           dragStateRef.current = {
             kind: "tap",
             tool,
@@ -10123,6 +10330,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,
@@ -10140,8 +10351,10 @@ var VectorViewport = react.forwardRef(
         captureInteractionPointer,
         emitRemoteStrokePreview,
         finalizeStrokeDragState,
+        finishCanvuInteraction,
         renderSceneWithLivePenStroke,
         screenToWorld,
+        startCanvuInteraction,
         startOrRestartStraightStrokeHoldTimer
       ]
     );
@@ -10170,14 +10383,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(
@@ -10225,6 +10456,7 @@ var VectorViewport = react.forwardRef(
       interactive,
       renderSceneWithLivePenStroke,
       screenToWorld,
+      startCanvuInteraction,
       startOrRestartStraightStrokeHoldTimer
     ]);
     react.useEffect(() => {
@@ -10275,15 +10507,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(
@@ -10329,6 +10578,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,
@@ -10370,16 +10625,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,
@@ -10430,12 +10711,17 @@ var VectorViewport = react.forwardRef(
     }, [
       applePencilNav,
       emitRemoteStrokePreview,
+      emitRemoteStrokePreviewClear,
       finalizeStrokeDragState,
+      finishCanvuInteraction,
       interactive,
+      releaseInteractionPointer,
       renderSceneWithLivePenStroke,
       screenToWorld,
       setStraightStrokeEndpoint,
+      startCanvuInteraction,
       startOrRestartStraightStrokeHoldTimer,
+      updateCanvuInteractionCurrent,
       updateStraightStrokeForMove
     ]);
     react.useEffect(() => {
@@ -10448,6 +10734,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(
@@ -10475,6 +10767,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;
           }
@@ -10523,6 +10821,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() }])
@@ -10548,6 +10852,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;
@@ -10680,29 +10990,64 @@ 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;
+          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,
@@ -10723,6 +11068,10 @@ var VectorViewport = react.forwardRef(
             },
             setSelectedIds: (ids) => setEffectiveSelectedIdsRef.current(ids)
           });
+          finishCanvuInteraction("completed", {
+            current: currentInteractionPoint,
+            info: { motive: "custom", itemIds: [item.id], toolId: "select" }
+          });
           return;
         }
         if (st.kind === "marquee") {
@@ -10731,16 +11080,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);
@@ -10757,9 +11115,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(
@@ -10790,15 +11165,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([]);
@@ -10806,7 +11186,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") {
@@ -10814,11 +11200,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);
@@ -10841,11 +11238,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("");
@@ -10854,6 +11252,10 @@ var VectorViewport = react.forwardRef(
             imageInputRef.current?.click();
           }
           requestAutoResetTool(st.tool);
+          finishCanvuInteraction("completed", {
+            current: currentInteractionPoint,
+            ...info ? { info } : {}
+          });
           return;
         }
         if (st.kind === "place") {
@@ -10864,11 +11266,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;
@@ -10900,18 +11310,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);
@@ -10936,47 +11351,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,
@@ -10988,15 +11417,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);
@@ -11014,11 +11443,13 @@ var VectorViewport = react.forwardRef(
       pruneEraserTrail,
       pruneLaserTrail,
       finalizeStrokeDragState,
+      finishCanvuInteraction,
       renderSceneWithLivePenStroke,
       releaseInteractionPointer,
       requestAutoResetTool,
       screenToWorld,
       setStraightStrokeEndpoint,
+      updateCanvuInteractionCurrent,
       updateStraightStrokeForMove
     ]);
     const selectedItemsForOverlay = react.useMemo(() => {