@tutti-os/workbench-surface 0.0.48 → 0.0.50

package/dist/index.d.ts

@@ -451,6 +451,10 @@ interface WorkbenchHostLaunchResult {
         payload?: unknown;
         type: string;
     } | null;
+    cascadeOffset?: {
+        x: number;
+        y: number;
+    };
     defaultFrame?: WorkbenchFrame;
     displayMode?: WorkbenchDisplayMode;
     dockEntryId?: string;

package/dist/index.js

@@ -5270,7 +5270,14 @@ function createWorkbenchSnapshotFromState(state, options = {}) {
 
 // src/core/placement.ts
 var WORKBENCH_WINDOW_CASCADE_OFFSET = 28;
+var WORKBENCH_WINDOW_CASCADE_FALLBACK_LIMIT = 12;
+var WORKBENCH_WINDOW_CASCADE_POSITION_TOLERANCE = 4;
 function resolveWorkbenchCascadedRect(input) {
+  const hasCustomCascadeOffset = input.cascadeOffset !== void 0;
+  const cascadeOffset = input.cascadeOffset ?? {
+    x: WORKBENCH_WINDOW_CASCADE_OFFSET,
+    y: WORKBENCH_WINDOW_CASCADE_OFFSET
+  };
   const activeNode = input.existingNodes.find(
     (node) => node.id === input.currentNodeStack.at(-1)
   ) ?? input.existingNodes.at(-1);
@@ -5282,17 +5289,119 @@ function resolveWorkbenchCascadedRect(input) {
       input.sizeConstraints
     );
   }
+  const preferredCandidate = createWorkbenchCascadeCandidate({
+    input,
+    x: activeNode.frame.x + cascadeOffset.x,
+    y: activeNode.frame.y + cascadeOffset.y
+  });
+  if ((!hasCustomCascadeOffset || input.existingNodes.length <= 1) && !workbenchCascadeCandidateMatchesExisting(preferredCandidate, input)) {
+    return preferredCandidate;
+  }
+  const candidateOrigins = [
+    {
+      x: activeNode.frame.x + cascadeOffset.x,
+      y: activeNode.frame.y + cascadeOffset.y
+    },
+    {
+      x: activeNode.frame.x - cascadeOffset.x,
+      y: activeNode.frame.y + cascadeOffset.y
+    },
+    {
+      x: activeNode.frame.x + cascadeOffset.x,
+      y: activeNode.frame.y - cascadeOffset.y
+    },
+    {
+      x: activeNode.frame.x - cascadeOffset.x,
+      y: activeNode.frame.y - cascadeOffset.y
+    }
+  ];
+  for (let index = 1; index <= WORKBENCH_WINDOW_CASCADE_FALLBACK_LIMIT; index += 1) {
+    candidateOrigins.push(
+      {
+        x: input.preferredFrame.x + cascadeOffset.x * index,
+        y: input.preferredFrame.y + cascadeOffset.y * index
+      },
+      {
+        x: input.preferredFrame.x - cascadeOffset.x * index,
+        y: input.preferredFrame.y + cascadeOffset.y * index
+      },
+      {
+        x: input.preferredFrame.x + cascadeOffset.x * index,
+        y: input.preferredFrame.y - cascadeOffset.y * index
+      },
+      {
+        x: input.preferredFrame.x - cascadeOffset.x * index,
+        y: input.preferredFrame.y - cascadeOffset.y * index
+      }
+    );
+  }
+  return resolveBestWorkbenchCascadeCandidate({
+    candidateOrigins,
+    fallbackFrame: preferredCandidate,
+    input
+  });
+}
+function createWorkbenchCascadeCandidate(input) {
   return clampWorkbenchRect(
     {
-      x: activeNode.frame.x + WORKBENCH_WINDOW_CASCADE_OFFSET,
-      y: activeNode.frame.y + WORKBENCH_WINDOW_CASCADE_OFFSET,
-      width: input.preferredFrame.width,
-      height: input.preferredFrame.height
+      x: input.x,
+      y: input.y,
+      width: input.input.preferredFrame.width,
+      height: input.input.preferredFrame.height
     },
-    input.surfaceSize,
-    input.constraints,
-    input.sizeConstraints
+    input.input.surfaceSize,
+    input.input.constraints,
+    input.input.sizeConstraints
+  );
+}
+function workbenchCascadeCandidateMatchesExisting(candidate, input) {
+  return input.existingNodes.some((node) => {
+    return Math.abs(node.frame.x - candidate.x) <= WORKBENCH_WINDOW_CASCADE_POSITION_TOLERANCE && Math.abs(node.frame.y - candidate.y) <= WORKBENCH_WINDOW_CASCADE_POSITION_TOLERANCE;
+  });
+}
+function resolveBestWorkbenchCascadeCandidate(input) {
+  let bestFrame = null;
+  let bestScore = Number.POSITIVE_INFINITY;
+  const seen = /* @__PURE__ */ new Set();
+  for (const candidate of input.candidateOrigins) {
+    const frame = createWorkbenchCascadeCandidate({
+      input: input.input,
+      x: candidate.x,
+      y: candidate.y
+    });
+    const key = `${frame.x}:${frame.y}:${frame.width}:${frame.height}`;
+    if (seen.has(key)) {
+      continue;
+    }
+    seen.add(key);
+    const score = scoreWorkbenchCascadeCandidate(frame, input.input);
+    if (score < bestScore) {
+      bestFrame = frame;
+      bestScore = score;
+    }
+  }
+  return bestFrame ?? input.fallbackFrame;
+}
+function scoreWorkbenchCascadeCandidate(candidate, input) {
+  const overlapArea = input.existingNodes.reduce((total, node) => {
+    return total + workbenchFrameIntersectionArea(candidate, node.frame);
+  }, 0);
+  const positionCollisionPenalty = workbenchCascadeCandidateMatchesExisting(
+    candidate,
+    input
+  ) ? candidate.width * candidate.height : 0;
+  return overlapArea + positionCollisionPenalty;
+}
+function workbenchFrameIntersectionArea(a, b) {
+  const width = Math.max(
+    0,
+    Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x)
+  );
+  const height = Math.max(
+    0,
+    Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y)
   );
+  return width * height;
 }
 
 // src/host/nodeIdentity.ts
@@ -5405,6 +5514,7 @@ function resolveWorkbenchLaunchedHostNodeFrame(input) {
       existingSameTypeNodes.map((node) => node.id)
     );
     return resolveWorkbenchCascadedRect({
+      cascadeOffset: input.result.cascadeOffset,
       currentNodeStack: input.currentState.nodeStack.filter(
         (nodeId) => existingSameTypeNodeIds.has(nodeId)
       ),
@@ -5421,6 +5531,7 @@ function resolveWorkbenchLaunchedHostNodeFrame(input) {
     });
   }
   return resolveWorkbenchCascadedRect({
+    cascadeOffset: input.result.cascadeOffset,
     currentNodeStack: input.currentState.nodeStack,
     existingNodes: input.currentState.nodes,
     preferredFrame: responsivePreferredFrame,
@@ -6712,7 +6823,7 @@ var WorkbenchHostSessionController = class {
   }
   applyClosedDockWindowFrame(result) {
     const dockEntryId = result.dockEntryId?.trim();
-    if (!dockEntryId) {
+    if (!dockEntryId || result.reuseDockEntryNode === false) {
       return result;
     }
     const entry = this.closedDockWindowFrameEntries.get(
@@ -7178,6 +7289,94 @@ function isWorkbenchDockEntryBlocked(entry) {
 
 // src/host/dockMagnification.ts
 import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef5 } from "react";
+
+// src/host/dockMagnificationBounds.ts
+function resolveDockMagnificationViewportBounds(viewportRect, dockPlacement) {
+  return dockPlacement === "left" ? {
+    crossEnd: viewportRect.right,
+    crossStart: viewportRect.left,
+    mainEnd: viewportRect.bottom,
+    mainStart: viewportRect.top
+  } : {
+    crossEnd: viewportRect.bottom,
+    crossStart: viewportRect.top,
+    mainEnd: viewportRect.right,
+    mainStart: viewportRect.left
+  };
+}
+function resolveDockMagnificationVisibleHitBounds({
+  dockPlacement,
+  hitBounds,
+  mainAxisEdgePadding = 0,
+  viewportRect
+}) {
+  if (!hitBounds || !viewportRect) {
+    return hitBounds;
+  }
+  const viewportBounds = resolveDockMagnificationViewportBounds(
+    viewportRect,
+    dockPlacement
+  );
+  const visibleBounds = {
+    crossEnd: Math.min(hitBounds.crossEnd, viewportBounds.crossEnd),
+    crossStart: Math.max(hitBounds.crossStart, viewportBounds.crossStart),
+    mainEnd: Math.min(
+      hitBounds.mainEnd + mainAxisEdgePadding,
+      viewportBounds.mainEnd + mainAxisEdgePadding
+    ),
+    mainStart: Math.max(
+      hitBounds.mainStart - mainAxisEdgePadding,
+      viewportBounds.mainStart - mainAxisEdgePadding
+    )
+  };
+  if (visibleBounds.mainStart > visibleBounds.mainEnd || visibleBounds.crossStart > visibleBounds.crossEnd) {
+    return null;
+  }
+  return visibleBounds;
+}
+function resolveDockMagnificationVisibleSlotRects({
+  slotRects,
+  viewportRect
+}) {
+  if (!viewportRect) {
+    return [...slotRects];
+  }
+  const visibleSlotRects = [];
+  for (const rect of slotRects) {
+    const visibleRect = {
+      bottom: Math.min(rect.bottom, viewportRect.bottom),
+      left: Math.max(rect.left, viewportRect.left),
+      right: Math.min(rect.right, viewportRect.right),
+      top: Math.max(rect.top, viewportRect.top)
+    };
+    if (visibleRect.left <= visibleRect.right && visibleRect.top <= visibleRect.bottom) {
+      visibleSlotRects.push(visibleRect);
+    }
+  }
+  return visibleSlotRects;
+}
+function isDockMagnificationPointInsideHitBounds({
+  clientX,
+  clientY,
+  dockPlacement,
+  hitBounds
+}) {
+  if (!hitBounds) {
+    return false;
+  }
+  const mainAxis = dockPlacement === "left" ? clientY : clientX;
+  const crossAxis = dockPlacement === "left" ? clientX : clientY;
+  return mainAxis >= hitBounds.mainStart && mainAxis <= hitBounds.mainEnd && crossAxis >= hitBounds.crossStart && crossAxis <= hitBounds.crossEnd;
+}
+function isDockMagnificationPointInsideSlotRect({
+  clientX,
+  clientY,
+  rect
+}) {
+  return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+}
+
+// src/host/dockMagnification.ts
 var DOCK_ICON_BASE_SIZE = 43.2;
 var DOCK_ICON_PEAK_SIZE = DOCK_ICON_BASE_SIZE * 1.7;
 var DOCK_MAGNIFICATION_HALF_RANGE = DOCK_ICON_BASE_SIZE * 2.4;
@@ -7190,7 +7389,14 @@ var MAX_MAGNIFICATION_STEP_SECONDS = 1 / 30;
 var MAGNIFICATION_INFLUENCE_PADDING = 8;
 var DOCK_MAGNIFICATION_ENTRY_RAMP_MS = 90;
 var DOCK_MAGNIFICATION_CROSS_AXIS_PADDING = 8;
+var DOCK_MAGNIFICATION_MAIN_AXIS_EDGE_PADDING = DOCK_ICON_BASE_SIZE / 2;
+var DOCK_MAGNIFICATION_AMBIENT_EDGE_RANGE = 180;
+var DOCK_MAGNIFICATION_AMBIENT_VIEWPORT_PADDING = 8;
 var dockMagnificationShellBySlot = /* @__PURE__ */ new WeakMap();
+var globalPointerListenerOptions = {
+  capture: true,
+  passive: true
+};
 function mapDistanceToTargetSize(distance, baseSize = DOCK_ICON_BASE_SIZE, peakSize = DOCK_ICON_PEAK_SIZE, halfRange = DOCK_MAGNIFICATION_HALF_RANGE) {
   const absoluteDistance = Math.abs(distance);
   if (absoluteDistance >= halfRange) {
@@ -7232,18 +7438,60 @@ function resolveDockMagnificationHitBounds(slotRects, dockPlacement, crossAxisPa
     mainStart
   };
 }
-function isDockMagnificationPointInsideHitBounds({
-  clientX,
-  clientY,
-  dockPlacement,
-  hitBounds
+function createDockMagnificationGlobalPointerTracker({
+  blurTarget,
+  onPointerCancel,
+  onPointerMove,
+  pointerTarget
 }) {
-  if (!hitBounds) {
-    return false;
-  }
-  const mainAxis = dockPlacement === "left" ? clientY : clientX;
-  const crossAxis = dockPlacement === "left" ? clientX : clientY;
-  return mainAxis >= hitBounds.mainStart && mainAxis <= hitBounds.mainEnd && crossAxis >= hitBounds.crossStart && crossAxis <= hitBounds.crossEnd;
+  let active = false;
+  const handlePointerMove = (event) => {
+    const pointerEvent = event;
+    onPointerMove(pointerEvent.clientX, pointerEvent.clientY);
+  };
+  const handlePointerCancel = () => {
+    stop();
+    onPointerCancel();
+  };
+  const start = () => {
+    if (active) {
+      return;
+    }
+    active = true;
+    pointerTarget.addEventListener(
+      "pointermove",
+      handlePointerMove,
+      globalPointerListenerOptions
+    );
+    pointerTarget.addEventListener(
+      "pointercancel",
+      handlePointerCancel,
+      globalPointerListenerOptions
+    );
+    blurTarget?.addEventListener("blur", handlePointerCancel);
+  };
+  const stop = () => {
+    if (!active) {
+      return;
+    }
+    active = false;
+    pointerTarget.removeEventListener(
+      "pointermove",
+      handlePointerMove,
+      globalPointerListenerOptions
+    );
+    pointerTarget.removeEventListener(
+      "pointercancel",
+      handlePointerCancel,
+      globalPointerListenerOptions
+    );
+    blurTarget?.removeEventListener("blur", handlePointerCancel);
+  };
+  return {
+    isActive: () => active,
+    start,
+    stop
+  };
 }
 function resolveDockMagnificationSlotCenter(rect, dockPlacement, baseSize = DOCK_ICON_BASE_SIZE) {
   return dockPlacement === "left" ? rect.top + baseSize / 2 : rect.left + baseSize / 2;
@@ -7333,9 +7581,30 @@ function clearDockSlotMagnification(slotElement, appliedStylesRef) {
   const shell = resolveDockMagnificationShell(slotElement);
   shell?.style.removeProperty("transform");
 }
+function isPointNearDockScreenEdge({
+  clientX,
+  clientY,
+  dockPlacement
+}) {
+  if (typeof window === "undefined") {
+    return true;
+  }
+  return dockPlacement === "left" ? clientX <= DOCK_MAGNIFICATION_AMBIENT_EDGE_RANGE : window.innerHeight - clientY <= DOCK_MAGNIFICATION_AMBIENT_EDGE_RANGE;
+}
+function isPointNearDockViewport({
+  clientX,
+  clientY,
+  dockPlacement,
+  viewportRect
+}) {
+  const horizontalPadding = dockPlacement === "bottom" ? DOCK_MAGNIFICATION_MAIN_AXIS_EDGE_PADDING : DOCK_MAGNIFICATION_AMBIENT_VIEWPORT_PADDING;
+  const verticalPadding = dockPlacement === "left" ? DOCK_MAGNIFICATION_MAIN_AXIS_EDGE_PADDING : DOCK_MAGNIFICATION_AMBIENT_VIEWPORT_PADDING;
+  return clientX >= viewportRect.left - horizontalPadding && clientX <= viewportRect.right + horizontalPadding && clientY >= viewportRect.top - verticalPadding && clientY <= viewportRect.bottom + verticalPadding;
+}
 function useDockMagnification({
   dockPlacement,
   dockRootRef,
+  dockViewportRef,
   slotRefs
 }) {
   const pointerAxisRef = useRef5(null);
@@ -7349,8 +7618,16 @@ function useDockMagnification({
   const entryRampStartedAtRef = useRef5(null);
   const restCentersRef = useRef5(null);
   const hitBoundsRef = useRef5(null);
+  const visibleSlotRectsRef = useRef5(null);
   const slotOrderRef = useRef5([]);
   const magnifyActiveRef = useRef5(false);
+  const globalPointerTrackerRef = useRef5(null);
+  const handleGlobalPointerMoveRef = useRef5(() => {
+    return;
+  });
+  const handleGlobalPointerCancelRef = useRef5(() => {
+    return;
+  });
   const setMagnifyActive = useCallback8(
     (active) => {
       if (magnifyActiveRef.current === active) {
@@ -7377,6 +7654,7 @@ function useDockMagnification({
     const centers = /* @__PURE__ */ new Map();
     const slotRects = [];
     const order = [];
+    const viewportRect = dockViewportRef.current?.getBoundingClientRect();
     for (const [anchorKey, slotElement] of slots) {
       order.push(anchorKey);
       const rect = slotElement.getBoundingClientRect();
@@ -7390,12 +7668,53 @@ function useDockMagnification({
       centers.set(anchorKey, center);
     }
     slotOrderRef.current = order;
-    hitBoundsRef.current = resolveDockMagnificationHitBounds(
+    const visibleViewportRect = viewportRect ? {
+      bottom: viewportRect.bottom,
+      left: viewportRect.left,
+      right: viewportRect.right,
+      top: viewportRect.top
+    } : null;
+    hitBoundsRef.current = resolveDockMagnificationVisibleHitBounds({
+      dockPlacement,
+      hitBounds: resolveDockMagnificationHitBounds(slotRects, dockPlacement),
+      mainAxisEdgePadding: DOCK_MAGNIFICATION_MAIN_AXIS_EDGE_PADDING,
+      viewportRect: visibleViewportRect
+    });
+    visibleSlotRectsRef.current = resolveDockMagnificationVisibleSlotRects({
       slotRects,
-      dockPlacement
-    );
+      viewportRect: visibleViewportRect
+    });
     restCentersRef.current = centers;
-  }, [dockPlacement, slotRefs]);
+  }, [dockPlacement, dockViewportRef, slotRefs]);
+  const isPointerInsideAnyVisibleDockSlot = useCallback8(
+    (clientX, clientY) => {
+      for (const rect of visibleSlotRectsRef.current ?? []) {
+        if (isDockMagnificationPointInsideSlotRect({
+          clientX,
+          clientY,
+          rect
+        })) {
+          return true;
+        }
+      }
+      return false;
+    },
+    []
+  );
+  const ensureDockMagnificationGeometry = useCallback8(() => {
+    if (restCentersRef.current === null || hitBoundsRef.current === null || visibleSlotRectsRef.current === null) {
+      captureRestCenters();
+    }
+  }, [captureRestCenters]);
+  const isPointerInsideDockMagnificationTarget = useCallback8(
+    (clientX, clientY) => isDockMagnificationPointInsideHitBounds({
+      clientX,
+      clientY,
+      dockPlacement,
+      hitBounds: hitBoundsRef.current
+    }) || isPointerInsideAnyVisibleDockSlot(clientX, clientY),
+    [dockPlacement, isPointerInsideAnyVisibleDockSlot]
+  );
   const runAnimationFrame = useCallback8(
     (frameTime) => {
       if (pendingPointerAxisRef.current !== null) {
@@ -7493,6 +7812,7 @@ function useDockMagnification({
         entryRampStartedAtRef.current = null;
         restCentersRef.current = null;
         hitBoundsRef.current = null;
+        visibleSlotRectsRef.current = null;
         slotOrderRef.current = [];
         setMagnifyActive(false);
       }
@@ -7511,31 +7831,144 @@ function useDockMagnification({
     }
     animationFrameRef.current = requestAnimationFrame(runAnimationFrame);
   }, [runAnimationFrame]);
+  const stopGlobalPointerTracking = useCallback8(() => {
+    globalPointerTrackerRef.current?.stop();
+  }, []);
+  const startGlobalPointerTracking = useCallback8(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    globalPointerTrackerRef.current ??= createDockMagnificationGlobalPointerTracker({
+      blurTarget: typeof window === "undefined" ? null : window,
+      onPointerCancel: () => {
+        handleGlobalPointerCancelRef.current();
+      },
+      onPointerMove: (clientX, clientY) => {
+        handleGlobalPointerMoveRef.current(clientX, clientY);
+      },
+      pointerTarget: document
+    });
+    globalPointerTrackerRef.current.start();
+  }, []);
+  const clearTrackedPointer = useCallback8(() => {
+    pendingPointerAxisRef.current = null;
+    pointerAxisRef.current = null;
+    entryRampStartedAtRef.current = null;
+    scheduleAnimation();
+  }, [scheduleAnimation]);
+  const handleGlobalPointerCancel = useCallback8(() => {
+    stopGlobalPointerTracking();
+    clearTrackedPointer();
+  }, [clearTrackedPointer, stopGlobalPointerTracking]);
   const handlePointerMove = useCallback8(
     (clientX, clientY) => {
-      if (restCentersRef.current === null) {
-        captureRestCenters();
-      }
-      if (!isDockMagnificationPointInsideHitBounds({
-        clientX,
-        clientY,
-        dockPlacement,
-        hitBounds: hitBoundsRef.current
-      })) {
-        pendingPointerAxisRef.current = null;
-        pointerAxisRef.current = null;
-        entryRampStartedAtRef.current = null;
-        scheduleAnimation();
+      ensureDockMagnificationGeometry();
+      if (!isPointerInsideDockMagnificationTarget(clientX, clientY)) {
+        stopGlobalPointerTracking();
+        clearTrackedPointer();
         return;
       }
       pendingPointerAxisRef.current = dockPlacement === "left" ? clientY : clientX;
       if (!magnifyActiveRef.current) {
         setMagnifyActive(true);
       }
+      startGlobalPointerTracking();
       scheduleAnimation();
     },
-    [captureRestCenters, dockPlacement, scheduleAnimation, setMagnifyActive]
+    [
+      clearTrackedPointer,
+      dockPlacement,
+      ensureDockMagnificationGeometry,
+      isPointerInsideDockMagnificationTarget,
+      scheduleAnimation,
+      setMagnifyActive,
+      startGlobalPointerTracking,
+      stopGlobalPointerTracking
+    ]
   );
+  handleGlobalPointerMoveRef.current = handlePointerMove;
+  handleGlobalPointerCancelRef.current = handleGlobalPointerCancel;
+  useEffect6(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    let animationFrame = null;
+    let latestPoint = null;
+    const clearAmbientPointerSample = () => {
+      latestPoint = null;
+      if (animationFrame !== null) {
+        cancelAnimationFrame(animationFrame);
+        animationFrame = null;
+      }
+    };
+    const runAmbientPointerMove = () => {
+      animationFrame = null;
+      const point = latestPoint;
+      latestPoint = null;
+      if (!point || magnifyActiveRef.current) {
+        return;
+      }
+      const viewportRect = dockViewportRef.current?.getBoundingClientRect();
+      if (!viewportRect) {
+        return;
+      }
+      const visibleViewportRect = {
+        bottom: viewportRect.bottom,
+        left: viewportRect.left,
+        right: viewportRect.right,
+        top: viewportRect.top
+      };
+      if (!isPointNearDockViewport({
+        clientX: point.clientX,
+        clientY: point.clientY,
+        dockPlacement,
+        viewportRect: visibleViewportRect
+      })) {
+        return;
+      }
+      ensureDockMagnificationGeometry();
+      if (isPointerInsideDockMagnificationTarget(point.clientX, point.clientY)) {
+        handlePointerMove(point.clientX, point.clientY);
+      }
+    };
+    const handleAmbientPointerMove = (event) => {
+      if (magnifyActiveRef.current) {
+        clearAmbientPointerSample();
+        return;
+      }
+      if (!isPointNearDockScreenEdge({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        dockPlacement
+      })) {
+        clearAmbientPointerSample();
+        return;
+      }
+      latestPoint = { clientX: event.clientX, clientY: event.clientY };
+      if (animationFrame === null) {
+        animationFrame = requestAnimationFrame(runAmbientPointerMove);
+      }
+    };
+    document.addEventListener(
+      "pointermove",
+      handleAmbientPointerMove,
+      globalPointerListenerOptions
+    );
+    return () => {
+      document.removeEventListener(
+        "pointermove",
+        handleAmbientPointerMove,
+        globalPointerListenerOptions
+      );
+      clearAmbientPointerSample();
+    };
+  }, [
+    dockPlacement,
+    dockViewportRef,
+    ensureDockMagnificationGeometry,
+    handlePointerMove,
+    isPointerInsideDockMagnificationTarget
+  ]);
   const handlePointerLeave = useCallback8(() => {
     pendingPointerAxisRef.current = null;
     pointerAxisRef.current = null;
@@ -7547,6 +7980,7 @@ function useDockMagnification({
       restCentersRef.current?.delete(anchorKey);
       appliedStylesRef.current.delete(anchorKey);
       hitBoundsRef.current = null;
+      visibleSlotRectsRef.current = null;
       slotOrderRef.current = slotOrderRef.current.filter(
         (key) => key !== anchorKey
       );
@@ -7558,13 +7992,15 @@ function useDockMagnification({
     [slotRefs]
   );
   const pauseMagnification = useCallback8(() => {
+    stopGlobalPointerTracking();
     stopAnimation();
     pendingPointerAxisRef.current = null;
     pointerAxisRef.current = null;
     entryRampStartedAtRef.current = null;
     lastFrameTimeRef.current = null;
-  }, [stopAnimation]);
+  }, [stopAnimation, stopGlobalPointerTracking]);
   const resetMagnification = useCallback8(() => {
+    stopGlobalPointerTracking();
     stopAnimation();
     for (const slotElement of slotRefs.current.values()) {
       clearDockSlotMagnification(slotElement, appliedStylesRef.current);
@@ -7573,12 +8009,13 @@ function useDockMagnification({
     appliedStylesRef.current.clear();
     restCentersRef.current = null;
     hitBoundsRef.current = null;
+    visibleSlotRectsRef.current = null;
     slotOrderRef.current = [];
     pointerAxisRef.current = null;
     pendingPointerAxisRef.current = null;
     entryRampStartedAtRef.current = null;
     setMagnifyActive(false);
-  }, [setMagnifyActive, slotRefs, stopAnimation]);
+  }, [setMagnifyActive, slotRefs, stopAnimation, stopGlobalPointerTracking]);
   useEffect6(
     () => () => {
       resetMagnification();
@@ -9316,6 +9753,7 @@ function WorkbenchHostDock({
   } = useDockMagnification({
     dockPlacement,
     dockRootRef: dockMeasureRef,
+    dockViewportRef: dockItemsRef,
     slotRefs
   });
   const clearSlotMagnificationRef = useRef8(() => {