@tutti-os/workbench-surface 0.0.16 → 0.0.17

package/dist/index.js

@@ -7435,11 +7435,16 @@ function WorkbenchHostDock({
   const hoverPanelOpenTimerRef = useRef8(
     null
   );
+  const labelTooltipOpenTimerRef = useRef8(
+    null
+  );
   const hoverPanelScheduledPointRef = useRef8(null);
+  const labelTooltipScheduledPointRef = useRef8(null);
   const hoverPanelRestTargetRef = useRef8(null);
   const activeHoverPanelRef = useRef8(
     null
   );
+  const activeLabelTooltipRef = useRef8(null);
   const pendingDockStateRefreshRef = useRef8(false);
   const slotRefs = useRef8(/* @__PURE__ */ new Map());
   const wallpaperToneElementRefs = useRef8(/* @__PURE__ */ new Map());
@@ -7453,6 +7458,7 @@ function WorkbenchHostDock({
   const [activeAttentionEntryIds, setActiveAttentionEntryIds] = useState8(/* @__PURE__ */ new Set());
   const [activePopup, setActivePopup] = useState8(null);
   const [activeHoverPanel, setActiveHoverPanel] = useState8(null);
+  const [activeLabelTooltip, setActiveLabelTooltip] = useState8(null);
   const [activeMinimizedStackPopup, setActiveMinimizedStackPopup] = useState8(null);
   const [pendingActionKeys, setPendingActionKeys] = useState8(
     () => /* @__PURE__ */ new Set()
@@ -7488,16 +7494,29 @@ function WorkbenchHostDock({
     hoverPanelOpenTimerRef.current = null;
     hoverPanelScheduledPointRef.current = null;
   }, []);
+  const clearLabelTooltipOpenTimer = useCallback10(() => {
+    if (labelTooltipOpenTimerRef.current === null) {
+      return;
+    }
+    clearTimeout(labelTooltipOpenTimerRef.current);
+    labelTooltipOpenTimerRef.current = null;
+    labelTooltipScheduledPointRef.current = null;
+  }, []);
   useEffect9(
     () => () => {
       clearHoverPanelCloseTimer();
       clearHoverPanelOpenTimer();
+      clearLabelTooltipOpenTimer();
       for (const timer of collapsingMinimizedLaunchTimerRef.current.values()) {
         clearTimeout(timer);
       }
       collapsingMinimizedLaunchTimerRef.current.clear();
     },
-    [clearHoverPanelCloseTimer, clearHoverPanelOpenTimer]
+    [
+      clearHoverPanelCloseTimer,
+      clearHoverPanelOpenTimer,
+      clearLabelTooltipOpenTimer
+    ]
   );
   const clearCollapsingMinimizedLaunch = useCallback10((anchorKey) => {
     const timer = collapsingMinimizedLaunchTimerRef.current.get(anchorKey);
@@ -7684,6 +7703,23 @@ function WorkbenchHostDock({
   useEffect9(() => {
     activeHoverPanelRef.current = activeHoverPanel;
   }, [activeHoverPanel]);
+  useEffect9(() => {
+    activeLabelTooltipRef.current = activeLabelTooltip;
+  }, [activeLabelTooltip]);
+  const closeLabelTooltipImmediate = useCallback10(
+    (targetKey) => {
+      clearLabelTooltipOpenTimer();
+      if (targetKey !== void 0 && activeLabelTooltipRef.current?.key !== targetKey) {
+        return;
+      }
+      if (activeLabelTooltipRef.current === null) {
+        return;
+      }
+      activeLabelTooltipRef.current = null;
+      setActiveLabelTooltip(null);
+    },
+    [clearLabelTooltipOpenTimer]
+  );
   const closeHoverPanelImmediate = useCallback10(
     (entryId) => {
       clearHoverPanelOpenTimer();
@@ -7771,6 +7807,50 @@ function WorkbenchHostDock({
     },
     [clearHoverPanelOpenTimer, showHoverPanel]
   );
+  const showLabelTooltip = useCallback10(
+    (target, anchorKey, anchorElement) => {
+      const dockElement = dockMeasureRef.current;
+      if (!dockElement) {
+        return;
+      }
+      const dockRect = dockElement.getBoundingClientRect();
+      const anchorRect = resolveDockLabelTooltipAnchorRect({
+        dockPlacement,
+        slotElement: anchorElement
+      });
+      clearLabelTooltipOpenTimer();
+      const nextTooltip = {
+        anchorKey,
+        anchorRect: {
+          height: anchorRect.height,
+          left: anchorRect.left - dockRect.left,
+          top: anchorRect.top - dockRect.top,
+          width: anchorRect.width
+        },
+        key: target.key,
+        label: target.label
+      };
+      activeLabelTooltipRef.current = nextTooltip;
+      setActiveLabelTooltip(nextTooltip);
+    },
+    [clearLabelTooltipOpenTimer, dockPlacement]
+  );
+  const scheduleLabelTooltipAfterRest = useCallback10(
+    (target, anchorKey) => {
+      clearLabelTooltipOpenTimer();
+      labelTooltipScheduledPointRef.current = null;
+      labelTooltipOpenTimerRef.current = setTimeout(() => {
+        labelTooltipOpenTimerRef.current = null;
+        labelTooltipScheduledPointRef.current = null;
+        const slotElement = slotRefs.current.get(anchorKey);
+        if (!slotElement) {
+          return;
+        }
+        showLabelTooltip(target, anchorKey, slotElement);
+      }, dockHoverPanelOpenDelayMs);
+    },
+    [clearLabelTooltipOpenTimer, showLabelTooltip]
+  );
   const resolveHoverPanelTargetAtPoint = useCallback10(
     (clientX, clientY) => {
       for (const [anchorKey, slotElement] of slotRefs.current) {
@@ -7787,6 +7867,33 @@ function WorkbenchHostDock({
     },
     []
   );
+  const resolveLabelTooltipTargetAtPoint = useCallback10(
+    (clientX, clientY) => {
+      for (const [anchorKey, slotElement] of slotRefs.current) {
+        if (slotElement.dataset.dockHoverPanelEntryId) {
+          continue;
+        }
+        const key = slotElement.dataset.dockLabelTooltipKey;
+        const label = slotElement.dataset.dockLabelTooltipLabel?.trim() ?? "";
+        if (!key || !label) {
+          continue;
+        }
+        const rect = slotElement.getBoundingClientRect();
+        if (clientX >= rect.left - dockHoverPanelHitSlopPx && clientX <= rect.right + dockHoverPanelHitSlopPx && clientY >= rect.top - dockHoverPanelHitSlopPx && clientY <= rect.bottom + dockHoverPanelHitSlopPx) {
+          return {
+            anchorKey,
+            slotElement,
+            target: {
+              key,
+              label
+            }
+          };
+        }
+      }
+      return null;
+    },
+    []
+  );
   const isPointerInsideActiveHoverPanelRegion = useCallback10(
     (clientX, clientY) => {
       const activeHoverPanel2 = activeHoverPanelRef.current;
@@ -7847,19 +7954,57 @@ function WorkbenchHostDock({
     },
     [clearHoverPanelOpenTimer, resolveHoverPanelTargetAtPoint, showHoverPanel]
   );
+  const scheduleLabelTooltipAtPointAfterRest = useCallback10(
+    (clientX, clientY) => {
+      if (activeLabelTooltipRef.current !== null) {
+        return;
+      }
+      const scheduledPoint = labelTooltipScheduledPointRef.current;
+      if (labelTooltipOpenTimerRef.current !== null && scheduledPoint && Math.abs(clientX - scheduledPoint.clientX) <= dockHoverPanelPointerRestTolerancePx && Math.abs(clientY - scheduledPoint.clientY) <= dockHoverPanelPointerRestTolerancePx) {
+        return;
+      }
+      clearLabelTooltipOpenTimer();
+      labelTooltipScheduledPointRef.current = { clientX, clientY };
+      labelTooltipOpenTimerRef.current = setTimeout(() => {
+        labelTooltipOpenTimerRef.current = null;
+        labelTooltipScheduledPointRef.current = null;
+        if (activeHoverPanelRef.current !== null) {
+          return;
+        }
+        const target = resolveLabelTooltipTargetAtPoint(clientX, clientY);
+        if (!target) {
+          return;
+        }
+        showLabelTooltip(target.target, target.anchorKey, target.slotElement);
+      }, dockHoverPanelOpenDelayMs);
+    },
+    [
+      clearLabelTooltipOpenTimer,
+      resolveLabelTooltipTargetAtPoint,
+      showLabelTooltip
+    ]
+  );
   const beginDockIconInteraction = useCallback10(
     (anchorKey) => {
       hoverPanelRestTargetRef.current = null;
       clearHoverPanelOpenTimer();
+      closeLabelTooltipImmediate();
       closeHoverPanelImmediate();
       triggerDockBounce(anchorKey);
     },
-    [clearHoverPanelOpenTimer, closeHoverPanelImmediate, triggerDockBounce]
+    [
+      clearHoverPanelOpenTimer,
+      closeHoverPanelImmediate,
+      closeLabelTooltipImmediate,
+      triggerDockBounce
+    ]
   );
   const beginDockMinimizedInteraction = useCallback10(
     (anchorKey) => {
       hoverPanelRestTargetRef.current = null;
       clearHoverPanelOpenTimer();
+      clearLabelTooltipOpenTimer();
+      closeLabelTooltipImmediate();
       closeHoverPanelImmediate();
       pauseDockMagnification();
       if (!anchorKey) {
@@ -7887,8 +8032,10 @@ function WorkbenchHostDock({
     },
     [
       clearHoverPanelOpenTimer,
+      clearLabelTooltipOpenTimer,
       clearSlotMagnification,
       closeHoverPanelImmediate,
+      closeLabelTooltipImmediate,
       pauseDockMagnification
     ]
   );
@@ -7916,6 +8063,7 @@ function WorkbenchHostDock({
   const handleDockPointerTravel = useCallback10(
     (clientX, clientY) => {
       if (activeHoverPanelRef.current !== null) {
+        closeLabelTooltipImmediate();
         if (isPointerInsideActiveHoverPanelRegion(clientX, clientY)) {
           clearHoverPanelCloseTimer();
           return;
@@ -7924,16 +8072,27 @@ function WorkbenchHostDock({
         handleDockPointerLeave();
         return;
       }
+      const activeLabelTooltip2 = activeLabelTooltipRef.current;
+      if (activeLabelTooltip2) {
+        const target = resolveLabelTooltipTargetAtPoint(clientX, clientY);
+        if (target?.target.key !== activeLabelTooltip2.key) {
+          closeLabelTooltipImmediate(activeLabelTooltip2.key);
+        }
+      }
       handleDockPointerMove(clientX, clientY);
       scheduleHoverPanelAtPointAfterRest(clientX, clientY);
+      scheduleLabelTooltipAtPointAfterRest(clientX, clientY);
     },
     [
       clearHoverPanelCloseTimer,
+      closeLabelTooltipImmediate,
       handleDockPointerMove,
       handleDockPointerLeave,
       isPointerInsideActiveHoverPanelRegion,
+      resolveLabelTooltipTargetAtPoint,
       scheduleHoverPanelClose,
-      scheduleHoverPanelAtPointAfterRest
+      scheduleHoverPanelAtPointAfterRest,
+      scheduleLabelTooltipAtPointAfterRest
     ]
   );
   const updateDockScrollState = useCallback10(() => {
@@ -8097,10 +8256,12 @@ function WorkbenchHostDock({
   const closePopup = () => {
     clearHoverPanelCloseTimer();
     clearHoverPanelOpenTimer();
+    clearLabelTooltipOpenTimer();
     hoverPanelRestTargetRef.current = null;
     setDockHoverPanelOpen(false);
     setActivePopup(null);
     setActiveHoverPanel(null);
+    closeLabelTooltipImmediate();
     setActiveMinimizedStackPopup(null);
   };
   const scrollDockItems = (direction) => {
@@ -8110,6 +8271,7 @@ function WorkbenchHostDock({
     }
     resetDockMagnification();
     closeHoverPanelImmediate();
+    closeLabelTooltipImmediate();
     hoverPanelRestTargetRef.current = null;
     const isVertical = dockPlacement === "left";
     const viewportSize = isVertical ? element.clientHeight : element.clientWidth;
@@ -8174,6 +8336,8 @@ function WorkbenchHostDock({
                 onPointerLeave: () => {
                   hoverPanelRestTargetRef.current = null;
                   clearHoverPanelOpenTimer();
+                  clearLabelTooltipOpenTimer();
+                  closeLabelTooltipImmediate();
                   closeHoverPanelImmediate();
                   handleDockPointerLeave();
                   flushPendingDockStateRefresh();
@@ -8234,6 +8398,7 @@ function WorkbenchHostDock({
                         matchedNodes: resolvedEntry.matchedNodes
                       });
                       const hasHoverPanel = dockEntryHasHoverPanel(entry);
+                      const labelTooltipTarget2 = hasHoverPanel ? null : dockLabelTooltipTarget(`entry:${entry.id}`, entry.label);
                       const dockButton2 = /* @__PURE__ */ jsx10(
                         "button",
                         {
@@ -8243,7 +8408,6 @@ function WorkbenchHostDock({
                           "aria-disabled": clickResolution.kind === "blocked" ? true : void 0,
                           className: "desktop-dock__btn",
                           "data-interactive": clickResolution.kind === "blocked" ? "false" : "true",
-                          title: entry.label,
                           type: "button",
                           onPointerDown: () => {
                             if (clickResolution.kind === "blocked") {
@@ -8377,6 +8541,8 @@ function WorkbenchHostDock({
                           "data-desktop-dock-slot": "true",
                           "data-entry-state": entry.state?.kind ?? "enabled",
                           "data-dock-hover-panel-entry-id": hasHoverPanel ? entry.id : void 0,
+                          "data-dock-label-tooltip-key": labelTooltipTarget2?.key,
+                          "data-dock-label-tooltip-label": labelTooltipTarget2?.label,
                           "data-icon-size": entry.iconSize ?? "default",
                           "data-node-state": resolvedEntry.dockNodeState,
                           "data-popup-active": currentPopup ? "true" : void 0,
@@ -8387,6 +8553,9 @@ function WorkbenchHostDock({
                             if (hasHoverPanel && !event.currentTarget.contains(event.relatedTarget)) {
                               closeHoverPanelImmediate(entry.id);
                             }
+                            if (labelTooltipTarget2 && !event.currentTarget.contains(event.relatedTarget)) {
+                              closeLabelTooltipImmediate(labelTooltipTarget2.key);
+                            }
                           },
                           onFocus: (event) => {
                             if (hasHoverPanel) {
@@ -8395,15 +8564,41 @@ function WorkbenchHostDock({
                                 anchorKey,
                                 event.currentTarget
                               );
+                              return;
+                            }
+                            if (labelTooltipTarget2) {
+                              showLabelTooltip(
+                                labelTooltipTarget2,
+                                anchorKey,
+                                event.currentTarget
+                              );
                             }
                           },
                           onPointerEnter: () => {
                             if (hasHoverPanel) {
                               scheduleHoverPanelAfterRest(entry.id, anchorKey);
+                              return;
+                            }
+                            if (labelTooltipTarget2) {
+                              scheduleLabelTooltipAfterRest(
+                                labelTooltipTarget2,
+                                anchorKey
+                              );
                             }
                           },
                           onPointerLeave: (event) => {
                             if (!hasHoverPanel) {
+                              if (labelTooltipTarget2) {
+                                clearLabelTooltipOpenTimer();
+                                closeLabelTooltipImmediate(labelTooltipTarget2.key);
+                                const relatedTarget2 = event.relatedTarget;
+                                if (relatedTarget2 instanceof Node && dockMeasureRef.current?.contains(relatedTarget2)) {
+                                  scheduleLabelTooltipAtPointAfterRest(
+                                    event.clientX,
+                                    event.clientY
+                                  );
+                                }
+                              }
                               return;
                             }
                             const relatedTarget = event.relatedTarget;
@@ -8432,15 +8627,19 @@ function WorkbenchHostDock({
                     const slot = dockItem.item.slot;
                     if (slot.kind === "stack") {
                       const stackPopupActive = activeMinimizedStackPopup !== null ? true : void 0;
+                      const stackLabel = i18n.t("minimizedWindows");
+                      const labelTooltipTarget2 = dockLabelTooltipTarget(
+                        `minimized-stack:${slot.anchorKey}`,
+                        stackLabel
+                      );
                       const stackButton = /* @__PURE__ */ jsx10(
                         "button",
                         {
                           "aria-expanded": stackPopupActive,
                           "aria-haspopup": "dialog",
-                          "aria-label": i18n.t("minimizedWindows"),
+                          "aria-label": stackLabel,
                           className: "desktop-dock__btn desktop-dock__minimized-btn",
                           "data-interactive": "true",
-                          title: i18n.t("minimizedWindows"),
                           type: "button",
                           onPointerDown: () => {
                             beginDockMinimizedInteraction();
@@ -8512,24 +8711,58 @@ function WorkbenchHostDock({
                           className: "desktop-dock__slot desktop-dock__slot--minimized",
                           "data-desktop-dock-anchor-key": slot.anchorKey,
                           "data-desktop-dock-slot": "true",
+                          "data-dock-label-tooltip-key": labelTooltipTarget2.key,
+                          "data-dock-label-tooltip-label": labelTooltipTarget2.label,
                           "data-node-state": "minimized",
                           "data-popup-active": stackPopupActive,
                           "data-presence": dockItem.presence,
                           "data-section-id": "minimized",
                           "data-stack-dispatching": stackDispatching ? "true" : void 0,
+                          onBlur: (event) => {
+                            if (!event.currentTarget.contains(event.relatedTarget)) {
+                              closeLabelTooltipImmediate(labelTooltipTarget2.key);
+                            }
+                          },
+                          onFocus: (event) => {
+                            showLabelTooltip(
+                              labelTooltipTarget2,
+                              slot.anchorKey,
+                              event.currentTarget
+                            );
+                          },
+                          onPointerEnter: () => {
+                            scheduleLabelTooltipAfterRest(
+                              labelTooltipTarget2,
+                              slot.anchorKey
+                            );
+                          },
+                          onPointerLeave: (event) => {
+                            clearLabelTooltipOpenTimer();
+                            closeLabelTooltipImmediate(labelTooltipTarget2.key);
+                            const relatedTarget = event.relatedTarget;
+                            if (relatedTarget instanceof Node && dockMeasureRef.current?.contains(relatedTarget)) {
+                              scheduleLabelTooltipAtPointAfterRest(
+                                event.clientX,
+                                event.clientY
+                              );
+                            }
+                          },
                           children: stackButton
                         },
                         dockItem.key
                       );
                     }
                     const node = slot.node;
+                    const labelTooltipTarget = dockLabelTooltipTarget(
+                      `minimized-node:${node.id}`,
+                      node.title
+                    );
                     const dockButton = /* @__PURE__ */ jsx10(
                       "button",
                       {
                         "aria-label": i18n.t("launch", { title: node.title }),
                         className: "desktop-dock__btn desktop-dock__minimized-btn",
                         "data-interactive": "true",
-                        title: node.title,
                         type: "button",
                         onPointerDown: () => {
                           const restoreIntent = resolveWorkbenchMinimizedDockRestoreIntent({
@@ -8592,10 +8825,41 @@ function WorkbenchHostDock({
                         "data-collapsing": collapsingMinimizedLaunchAnchorKeys.has(slot.anchorKey) ? "true" : void 0,
                         "data-desktop-dock-anchor-key": slot.anchorKey,
                         "data-desktop-dock-slot": "true",
+                        "data-dock-label-tooltip-key": labelTooltipTarget.key,
+                        "data-dock-label-tooltip-label": labelTooltipTarget.label,
                         "data-node-state": "minimized",
                         "data-presence": dockItem.presence,
                         "data-promoted-from-stack": promotedNodeId === node.id ? "true" : void 0,
                         "data-section-id": "minimized",
+                        onBlur: (event) => {
+                          if (!event.currentTarget.contains(event.relatedTarget)) {
+                            closeLabelTooltipImmediate(labelTooltipTarget.key);
+                          }
+                        },
+                        onFocus: (event) => {
+                          showLabelTooltip(
+                            labelTooltipTarget,
+                            slot.anchorKey,
+                            event.currentTarget
+                          );
+                        },
+                        onPointerEnter: () => {
+                          scheduleLabelTooltipAfterRest(
+                            labelTooltipTarget,
+                            slot.anchorKey
+                          );
+                        },
+                        onPointerLeave: (event) => {
+                          clearLabelTooltipOpenTimer();
+                          closeLabelTooltipImmediate(labelTooltipTarget.key);
+                          const relatedTarget = event.relatedTarget;
+                          if (relatedTarget instanceof Node && dockMeasureRef.current?.contains(relatedTarget)) {
+                            scheduleLabelTooltipAtPointAfterRest(
+                              event.clientX,
+                              event.clientY
+                            );
+                          }
+                        },
                         children: dockButton
                       },
                       dockItem.key
@@ -8647,6 +8911,13 @@ function WorkbenchHostDock({
                         handleDockPointerLeave();
                       }
                     }
+                  ) : null,
+                  activeLabelTooltip ? /* @__PURE__ */ jsx10(
+                    WorkbenchHostDockLabelTooltip,
+                    {
+                      placement: dockPlacement,
+                      state: activeLabelTooltip
+                    }
                   ) : null
                 ]
               }
@@ -8957,6 +9228,29 @@ function WorkbenchHostDockMinimizedNodePreview({
 function dockEntryHasHoverPanel(entry) {
   return Boolean(entry.state?.reason?.trim()) || (entry.hoverActions?.length ?? 0) > 0;
 }
+function dockLabelTooltipTarget(key, label) {
+  return { key, label: label.trim() };
+}
+function resolveDockLabelTooltipAnchorRect({
+  dockPlacement,
+  slotElement
+}) {
+  const slotRect = slotElement.getBoundingClientRect();
+  if (dockPlacement === "left") {
+    return {
+      height: DOCK_ICON_BASE_SIZE,
+      left: slotRect.left,
+      top: slotRect.top + (slotRect.height - DOCK_ICON_BASE_SIZE) / 2,
+      width: DOCK_ICON_BASE_SIZE
+    };
+  }
+  return {
+    height: DOCK_ICON_BASE_SIZE,
+    left: slotRect.left + (slotRect.width - DOCK_ICON_BASE_SIZE) / 2,
+    top: slotRect.bottom - DOCK_ICON_BASE_SIZE,
+    width: DOCK_ICON_BASE_SIZE
+  };
+}
 function renderDockBadge(entry, matchedNodeCount) {
   const badge = entry.badge ?? (matchedNodeCount > 1 ? {
     kind: "count",
@@ -8973,6 +9267,26 @@ function renderDockBadge(entry, matchedNodeCount) {
   }
   return /* @__PURE__ */ jsx10("span", { className: "desktop-dock__status-badge", "data-status": badge.status });
 }
+function WorkbenchHostDockLabelTooltip({
+  placement,
+  state
+}) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: "desktop-dock__label-tooltip",
+      "data-dock-placement": placement,
+      role: "tooltip",
+      style: {
+        "--desktop-dock-label-tooltip-anchor-height": `${state.anchorRect.height}px`,
+        "--desktop-dock-label-tooltip-anchor-left": `${state.anchorRect.left}px`,
+        "--desktop-dock-label-tooltip-anchor-top": `${state.anchorRect.top}px`,
+        "--desktop-dock-label-tooltip-anchor-width": `${state.anchorRect.width}px`
+      },
+      children: state.label
+    }
+  );
+}
 function WorkbenchHostDockHoverPanel({
   entry,
   host,