@tutti-os/workbench-surface 0.0.47 → 0.0.49

package/dist/index.js

@@ -7178,6 +7178,59 @@ 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,
+  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, viewportBounds.mainEnd),
+    mainStart: Math.max(hitBounds.mainStart, viewportBounds.mainStart)
+  };
+  if (visibleBounds.mainStart > visibleBounds.mainEnd || visibleBounds.crossStart > visibleBounds.crossEnd) {
+    return null;
+  }
+  return visibleBounds;
+}
+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;
+}
+
+// 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;
@@ -7191,6 +7244,10 @@ var MAGNIFICATION_INFLUENCE_PADDING = 8;
 var DOCK_MAGNIFICATION_ENTRY_RAMP_MS = 90;
 var DOCK_MAGNIFICATION_CROSS_AXIS_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 +7289,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;
@@ -7336,6 +7435,7 @@ function clearDockSlotMagnification(slotElement, appliedStylesRef) {
 function useDockMagnification({
   dockPlacement,
   dockRootRef,
+  dockViewportRef,
   slotRefs
 }) {
   const pointerAxisRef = useRef5(null);
@@ -7351,6 +7451,13 @@ function useDockMagnification({
   const hitBoundsRef = 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 +7484,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 +7498,18 @@ function useDockMagnification({
       centers.set(anchorKey, center);
     }
     slotOrderRef.current = order;
-    hitBoundsRef.current = resolveDockMagnificationHitBounds(
-      slotRects,
-      dockPlacement
-    );
+    hitBoundsRef.current = resolveDockMagnificationVisibleHitBounds({
+      dockPlacement,
+      hitBounds: resolveDockMagnificationHitBounds(slotRects, dockPlacement),
+      viewportRect: viewportRect ? {
+        bottom: viewportRect.bottom,
+        left: viewportRect.left,
+        right: viewportRect.right,
+        top: viewportRect.top
+      } : null
+    });
     restCentersRef.current = centers;
-  }, [dockPlacement, slotRefs]);
+  }, [dockPlacement, dockViewportRef, slotRefs]);
   const runAnimationFrame = useCallback8(
     (frameTime) => {
       if (pendingPointerAxisRef.current !== null) {
@@ -7511,6 +7625,35 @@ 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) {
@@ -7522,20 +7665,29 @@ function useDockMagnification({
         dockPlacement,
         hitBounds: hitBoundsRef.current
       })) {
-        pendingPointerAxisRef.current = null;
-        pointerAxisRef.current = null;
-        entryRampStartedAtRef.current = null;
-        scheduleAnimation();
+        stopGlobalPointerTracking();
+        clearTrackedPointer();
         return;
       }
       pendingPointerAxisRef.current = dockPlacement === "left" ? clientY : clientX;
       if (!magnifyActiveRef.current) {
         setMagnifyActive(true);
       }
+      startGlobalPointerTracking();
       scheduleAnimation();
     },
-    [captureRestCenters, dockPlacement, scheduleAnimation, setMagnifyActive]
+    [
+      captureRestCenters,
+      clearTrackedPointer,
+      dockPlacement,
+      scheduleAnimation,
+      setMagnifyActive,
+      startGlobalPointerTracking,
+      stopGlobalPointerTracking
+    ]
   );
+  handleGlobalPointerMoveRef.current = handlePointerMove;
+  handleGlobalPointerCancelRef.current = handleGlobalPointerCancel;
   const handlePointerLeave = useCallback8(() => {
     pendingPointerAxisRef.current = null;
     pointerAxisRef.current = null;
@@ -7558,13 +7710,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);
@@ -7578,7 +7732,7 @@ function useDockMagnification({
     pendingPointerAxisRef.current = null;
     entryRampStartedAtRef.current = null;
     setMagnifyActive(false);
-  }, [setMagnifyActive, slotRefs, stopAnimation]);
+  }, [setMagnifyActive, slotRefs, stopAnimation, stopGlobalPointerTracking]);
   useEffect6(
     () => () => {
       resetMagnification();
@@ -9316,6 +9470,7 @@ function WorkbenchHostDock({
   } = useDockMagnification({
     dockPlacement,
     dockRootRef: dockMeasureRef,
+    dockViewportRef: dockItemsRef,
     slotRefs
   });
   const clearSlotMagnificationRef = useRef8(() => {
@@ -10161,6 +10316,7 @@ function WorkbenchHostDock({
                           "aria-disabled": clickResolution.kind === "blocked" ? true : void 0,
                           className: "desktop-dock__btn",
                           "data-interactive": clickResolution.kind === "blocked" ? "false" : "true",
+                          "data-dock-hover-panel-trigger": hasHoverPanel ? "true" : void 0,
                           type: "button",
                           onPointerDown: (event) => {
                             if (event.button !== 0) {
@@ -11359,9 +11515,40 @@ function WorkbenchHostDockHoverPanel({
   setPendingActionKeys,
   state
 }) {
+  const lastPointerActionAtRef = useRef8(/* @__PURE__ */ new Map());
   if (!entry) {
     return null;
   }
+  const hoverPanelEntry = entry;
+  const runHoverAction = (actionKey, actionId, disabled) => {
+    if (disabled || pendingActionKeys.has(actionKey)) {
+      return;
+    }
+    setPendingActionKeys((current) => {
+      const next = new Set(current);
+      next.add(actionKey);
+      return next;
+    });
+    void (async () => {
+      try {
+        await onDockEntryAction?.({
+          actionId,
+          entryId: hoverPanelEntry.id,
+          host
+        });
+      } catch {
+      } finally {
+        setPendingActionKeys((current) => {
+          if (!current.has(actionKey)) {
+            return current;
+          }
+          const next = new Set(current);
+          next.delete(actionKey);
+          return next;
+        });
+      }
+    })();
+  };
   return /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -11394,36 +11581,34 @@ function WorkbenchHostDockHoverPanel({
               className: "desktop-dock__hover-action",
               disabled: action.disabled || isLocallyPending,
               type: "button",
+              onPointerDown: (event) => {
+                if (event.button !== 0) {
+                  return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                lastPointerActionAtRef.current.set(
+                  actionKey,
+                  performance.now()
+                );
+                runHoverAction(
+                  actionKey,
+                  action.id,
+                  action.disabled === true
+                );
+              },
               onClick: (event) => {
                 event.preventDefault();
                 event.stopPropagation();
-                if (action.disabled === true || pendingActionKeys.has(actionKey)) {
+                const lastPointerAt = lastPointerActionAtRef.current.get(actionKey);
+                if (lastPointerAt !== void 0 && performance.now() - lastPointerAt < 700) {
                   return;
                 }
-                setPendingActionKeys((current) => {
-                  const next = new Set(current);
-                  next.add(actionKey);
-                  return next;
-                });
-                void (async () => {
-                  try {
-                    await onDockEntryAction?.({
-                      actionId: action.id,
-                      entryId: entry.id,
-                      host
-                    });
-                  } catch {
-                  } finally {
-                    setPendingActionKeys((current) => {
-                      if (!current.has(actionKey)) {
-                        return current;
-                      }
-                      const next = new Set(current);
-                      next.delete(actionKey);
-                      return next;
-                    });
-                  }
-                })();
+                runHoverAction(
+                  actionKey,
+                  action.id,
+                  action.disabled === true
+                );
               },
               children: isPending ? action.pendingLabel ?? action.label : action.label
             },