@tutti-os/workbench-surface 0.0.3 → 0.0.4

package/dist/index.js

@@ -7016,6 +7016,23 @@ function WorkbenchHostDock({
       setDockHoverPanelOpen
     ]
   );
+  const scheduleHoverPanelClose = useCallback10(
+    (entryId) => {
+      clearHoverPanelOpenTimer();
+      clearHoverPanelCloseTimer();
+      hoverPanelCloseTimerRef.current = setTimeout(() => {
+        hoverPanelCloseTimerRef.current = null;
+        closeHoverPanelImmediate(entryId);
+        handleDockPointerLeave();
+      }, dockHoverPanelCloseDelayMs);
+    },
+    [
+      clearHoverPanelCloseTimer,
+      clearHoverPanelOpenTimer,
+      closeHoverPanelImmediate,
+      handleDockPointerLeave
+    ]
+  );
   const showHoverPanel = useCallback10(
     (entryId, anchorKey, anchorElement) => {
       const dockElement = dockMeasureRef.current;
@@ -7079,6 +7096,38 @@ function WorkbenchHostDock({
     },
     []
   );
+  const isPointerInsideActiveHoverPanelRegion = useCallback10(
+    (clientX, clientY) => {
+      const activeHoverPanel2 = activeHoverPanelRef.current;
+      if (!activeHoverPanel2) {
+        return false;
+      }
+      const anchorSlot = slotRefs.current.get(activeHoverPanel2.anchorKey);
+      const panel = hoverPanelRef.current;
+      if (!anchorSlot || !panel || !anchorSlot.isConnected || !panel.isConnected) {
+        return false;
+      }
+      const anchorRect = anchorSlot.getBoundingClientRect();
+      const panelRect = panel.getBoundingClientRect();
+      return rectContainsPoint(
+        anchorRect,
+        clientX,
+        clientY,
+        dockHoverPanelHitSlopPx
+      ) || rectContainsPoint(
+        panelRect,
+        clientX,
+        clientY,
+        dockHoverPanelHitSlopPx
+      ) || rectContainsPoint(
+        createHoverPanelBridgeRect(anchorRect, panelRect),
+        clientX,
+        clientY,
+        dockHoverPanelBridgeSlopPx
+      );
+    },
+    []
+  );
   const scheduleHoverPanelAtPointAfterRest = useCallback10(
     (clientX, clientY) => {
       const scheduledPoint = hoverPanelScheduledPointRef.current;
@@ -7168,7 +7217,11 @@ function WorkbenchHostDock({
   const handleDockPointerTravel = useCallback10(
     (clientX, clientY) => {
       if (activeHoverPanelRef.current !== null) {
-        closeHoverPanelImmediate();
+        if (isPointerInsideActiveHoverPanelRegion(clientX, clientY)) {
+          clearHoverPanelCloseTimer();
+          return;
+        }
+        scheduleHoverPanelClose(activeHoverPanelRef.current.entryId);
         handleDockPointerLeave();
         return;
       }
@@ -7176,9 +7229,11 @@ function WorkbenchHostDock({
       scheduleHoverPanelAtPointAfterRest(clientX, clientY);
     },
     [
-      closeHoverPanelImmediate,
+      clearHoverPanelCloseTimer,
       handleDockPointerMove,
       handleDockPointerLeave,
+      isPointerInsideActiveHoverPanelRegion,
+      scheduleHoverPanelClose,
       scheduleHoverPanelAtPointAfterRest
     ]
   );
@@ -7814,7 +7869,7 @@ function WorkbenchHostDock({
                         if (relatedTarget instanceof Node && anchorSlot?.contains(relatedTarget)) {
                           return;
                         }
-                        closeHoverPanelImmediate(activeHoverPanel.entryId);
+                        scheduleHoverPanelClose(activeHoverPanel.entryId);
                         handleDockPointerLeave();
                       }
                     }
@@ -8254,7 +8309,11 @@ function resolveNextDockItemPresence(item, initialized, previousPresence, should
 }
 function useDockPresenceItems(items, shouldAnimateMinimizedDockEnter) {
   const latestItemsByKey = useRef8(/* @__PURE__ */ new Map());
+  const shouldAnimateMinimizedDockEnterRef = useRef8(
+    shouldAnimateMinimizedDockEnter
+  );
   latestItemsByKey.current = new Map(items.map((item) => [item.key, item]));
+  shouldAnimateMinimizedDockEnterRef.current = shouldAnimateMinimizedDockEnter;
   const itemKeys = items.map((item) => item.key).join("\0");
   const [presentItems, setPresentItems] = useState8(
     () => items.map((item) => ({
@@ -8310,7 +8369,7 @@ function useDockPresenceItems(items, shouldAnimateMinimizedDockEnter) {
             item,
             initialized.current,
             currentByKey.get(item.key)?.presence,
-            shouldAnimateMinimizedDockEnter
+            shouldAnimateMinimizedDockEnterRef.current
           )
         });
       }
@@ -8345,7 +8404,7 @@ function useDockPresenceItems(items, shouldAnimateMinimizedDockEnter) {
       );
     }, nextSettleMs);
     return () => globalThis.clearTimeout(timeout);
-  }, [itemKeys, shouldAnimateMinimizedDockEnter]);
+  }, [itemKeys]);
   return presentItems.map((presentItem) => {
     const latestItem = latestItemsByKey.current.get(presentItem.key);
     return latestItem ? { ...presentItem, item: latestItem } : presentItem;
@@ -8411,8 +8470,27 @@ function resolveWorkbenchHostDockItemsWidth(items) {
   return itemWidth + gapWidth + dockItemsHorizontalPaddingPx;
 }
 var dockHoverPanelOpenDelayMs = 450;
+var dockHoverPanelCloseDelayMs = 160;
 var dockHoverPanelHitSlopPx = 12;
+var dockHoverPanelBridgeSlopPx = 6;
 var dockHoverPanelPointerRestTolerancePx = 4;
+function rectContainsPoint(rect, clientX, clientY, slopPx = 0) {
+  return clientX >= rect.left - slopPx && clientX <= rect.right + slopPx && clientY >= rect.top - slopPx && clientY <= rect.bottom + slopPx;
+}
+function createHoverPanelBridgeRect(anchor, panel) {
+  if (anchor.right <= panel.left || panel.right <= anchor.left) {
+    const left2 = Math.min(anchor.right, panel.right);
+    const right2 = Math.max(anchor.left, panel.left);
+    const top2 = Math.max(anchor.top, panel.top);
+    const bottom2 = Math.min(anchor.bottom, panel.bottom);
+    return new DOMRect(left2, top2, right2 - left2, Math.max(0, bottom2 - top2));
+  }
+  const left = Math.max(anchor.left, panel.left);
+  const right = Math.min(anchor.right, panel.right);
+  const top = Math.min(anchor.bottom, panel.bottom);
+  const bottom = Math.max(anchor.top, panel.top);
+  return new DOMRect(left, top, Math.max(0, right - left), bottom - top);
+}
 var dockPresenceAnimationMs = 300;
 var minimizedDockSlotLayoutAnimationMs = 720;
 var dockItemsGapPx = 10.8;