@tutti-os/workbench-surface 0.0.3 → 0.0.5

package/dist/index.js

@@ -1756,7 +1756,7 @@ function WorkbenchWindowFullscreenToggle({
       title: label,
       type: "button",
       variant: "chrome",
-      onClick: () => {
+      onClick: (event) => {
         if (disabled) {
           return;
         }
@@ -1765,6 +1765,7 @@ function WorkbenchWindowFullscreenToggle({
           controller.commands.exitFullscreen(node.id);
           return;
         }
+        event.currentTarget.blur();
         controller.commands.enterFullscreen(node.id);
       },
       children: /* @__PURE__ */ jsx4(Icon, { "aria-hidden": true, className: "size-[15px]" })
@@ -5394,7 +5395,10 @@ import {
   Button as Button4,
   ChevronDownIcon,
   ChevronUpIcon,
-  TooltipProvider
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
 } from "@tutti-os/ui-system";
 
 // src/host/dockEntries.ts
@@ -7016,6 +7020,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 +7100,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 +7221,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 +7233,11 @@ function WorkbenchHostDock({
       scheduleHoverPanelAtPointAfterRest(clientX, clientY);
     },
     [
-      closeHoverPanelImmediate,
+      clearHoverPanelCloseTimer,
       handleDockPointerMove,
       handleDockPointerLeave,
+      isPointerInsideActiveHoverPanelRegion,
+      scheduleHoverPanelClose,
       scheduleHoverPanelAtPointAfterRest
     ]
   );
@@ -7619,7 +7678,17 @@ function WorkbenchHostDock({
                             closeHoverPanelImmediate(entry.id);
                             handleDockPointerLeave();
                           },
-                          children: dockButton2
+                          children: hasHoverPanel ? dockButton2 : /* @__PURE__ */ jsxs6(Tooltip, { children: [
+                            /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: dockButton2 }),
+                            /* @__PURE__ */ jsx10(
+                              TooltipContent,
+                              {
+                                side: dockPlacement === "left" ? "right" : "top",
+                                sideOffset: DOCK_MAGNIFIED_TOOLTIP_SIDE_OFFSET,
+                                children: entry.label
+                              }
+                            )
+                          ] })
                         },
                         dockItem.key
                       );
@@ -7712,7 +7781,17 @@ function WorkbenchHostDock({
                           "data-presence": dockItem.presence,
                           "data-section-id": "minimized",
                           "data-stack-dispatching": stackDispatching ? "true" : void 0,
-                          children: stackButton
+                          children: /* @__PURE__ */ jsxs6(Tooltip, { children: [
+                            /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: stackButton }),
+                            /* @__PURE__ */ jsx10(
+                              TooltipContent,
+                              {
+                                side: dockPlacement === "left" ? "right" : "top",
+                                sideOffset: DOCK_MAGNIFIED_TOOLTIP_SIDE_OFFSET,
+                                children: i18n.t("minimizedWindows")
+                              }
+                            )
+                          ] })
                         },
                         dockItem.key
                       );
@@ -7767,7 +7846,17 @@ function WorkbenchHostDock({
                         "data-presence": dockItem.presence,
                         "data-promoted-from-stack": promotedNodeId === node.id ? "true" : void 0,
                         "data-section-id": "minimized",
-                        children: dockButton
+                        children: /* @__PURE__ */ jsxs6(Tooltip, { children: [
+                          /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: dockButton }),
+                          /* @__PURE__ */ jsx10(
+                            TooltipContent,
+                            {
+                              side: dockPlacement === "left" ? "right" : "top",
+                              sideOffset: DOCK_MAGNIFIED_TOOLTIP_SIDE_OFFSET,
+                              children: node.title
+                            }
+                          )
+                        ] })
                       },
                       dockItem.key
                     );
@@ -7814,7 +7903,7 @@ function WorkbenchHostDock({
                         if (relatedTarget instanceof Node && anchorSlot?.contains(relatedTarget)) {
                           return;
                         }
-                        closeHoverPanelImmediate(activeHoverPanel.entryId);
+                        scheduleHoverPanelClose(activeHoverPanel.entryId);
                         handleDockPointerLeave();
                       }
                     }
@@ -8254,7 +8343,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 +8403,7 @@ function useDockPresenceItems(items, shouldAnimateMinimizedDockEnter) {
             item,
             initialized.current,
             currentByKey.get(item.key)?.presence,
-            shouldAnimateMinimizedDockEnter
+            shouldAnimateMinimizedDockEnterRef.current
           )
         });
       }
@@ -8345,7 +8438,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 +8504,28 @@ function resolveWorkbenchHostDockItemsWidth(items) {
   return itemWidth + gapWidth + dockItemsHorizontalPaddingPx;
 }
 var dockHoverPanelOpenDelayMs = 450;
+var dockHoverPanelCloseDelayMs = 160;
 var dockHoverPanelHitSlopPx = 12;
+var dockHoverPanelBridgeSlopPx = 6;
 var dockHoverPanelPointerRestTolerancePx = 4;
+var DOCK_MAGNIFIED_TOOLTIP_SIDE_OFFSET = 40;
+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;