react-os-shell 0.2.26 → 0.2.30

package/dist/{chunk-QXY6ZHRX.js → chunk-T2NQXP2J.js}

@@ -556,9 +556,128 @@ function useIsActiveModal(modalId) {
   const activeId = useSyncExternalStore(subscribeActive, getActiveModalId);
   return activationOrder.length <= 1 || activeId === modalId;
 }
+var _exposeOn = false;
+var _exposeListeners = /* @__PURE__ */ new Set();
+function _notifyExpose() {
+  _exposeListeners.forEach((fn) => fn());
+}
+function subscribeExpose(fn) {
+  _exposeListeners.add(fn);
+  return () => _exposeListeners.delete(fn);
+}
+function getExposeState() {
+  return _exposeOn;
+}
+function setExposeState(v) {
+  if (_exposeOn === v) return;
+  _exposeOn = v;
+  _notifyExpose();
+}
+var _exposeExitFocusId = null;
+var _exposeExitListeners = /* @__PURE__ */ new Set();
+function subscribeExposeExitFocus(fn) {
+  _exposeExitListeners.add(fn);
+  return () => _exposeExitListeners.delete(fn);
+}
+function getExposeExitFocus() {
+  return _exposeExitFocusId;
+}
+function setExposeExitFocus(id) {
+  if (_exposeExitFocusId === id) return;
+  _exposeExitFocusId = id;
+  _exposeExitListeners.forEach((fn) => fn());
+}
 function triggerSplitView() {
+  setExposeState(!_exposeOn);
   window.dispatchEvent(new CustomEvent("modal-split-view"));
 }
+window.addEventListener("keydown", (e) => {
+  if (_exposeOn && e.key === "Escape") {
+    setExposeState(false);
+  }
+});
+function computeExposeTile(modalId) {
+  if (typeof document === "undefined") return null;
+  const allPanels = Array.from(document.querySelectorAll("[data-modal-panel]"));
+  const tileable = allPanels.filter((p) => {
+    const el = p;
+    if (el.hasAttribute("data-utility") || el.hasAttribute("data-widget")) return false;
+    if (el.style.display === "none") return false;
+    return true;
+  });
+  tileable.sort((a2, b) => (a2.getAttribute("data-modal-id") || "").localeCompare(b.getAttribute("data-modal-id") || ""));
+  const myIdx = tileable.findIndex((p) => p.getAttribute("data-modal-id") === modalId);
+  const count = tileable.length;
+  if (myIdx < 0 || count < 1) return null;
+  const cols = Math.ceil(Math.sqrt(count));
+  const rows = Math.ceil(count / cols);
+  const myRow = Math.floor(myIdx / cols);
+  const myCol = myIdx % cols;
+  const lastRowCount = count - cols * (rows - 1);
+  const isLastRow = myRow === rows - 1 && lastRowCount < cols;
+  const taskbarH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--taskbar-height")) || 0;
+  const taskbarW = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--taskbar-width")) || 0;
+  const tbPos = (getComputedStyle(document.documentElement).getPropertyValue("--taskbar-position") || "bottom").trim();
+  const xOffset = tbPos === "left" ? taskbarW : 0;
+  const xRight = tbPos === "right" ? taskbarW : 0;
+  const yOffset = tbPos === "top" ? taskbarH : 0;
+  const yBottom = tbPos === "top" || tbPos === "left" || tbPos === "right" ? 0 : taskbarH;
+  const a = {
+    x: xOffset,
+    y: yOffset,
+    w: window.innerWidth - xOffset - xRight,
+    h: window.innerHeight - yOffset - yBottom
+  };
+  const gapX = 20;
+  const gapY = 14;
+  const labelH = 22;
+  const cellW = (a.w - gapX * (cols + 1)) / cols;
+  const cellH = (a.h - gapY * (rows + 1) - labelH * rows) / rows;
+  const lastRowOffsetX = isLastRow ? (cols - lastRowCount) * (cellW + gapX) / 2 : 0;
+  const tileX = a.x + gapX + myCol * (cellW + gapX) + lastRowOffsetX;
+  const tileY = a.y + gapY + myRow * (cellH + gapY + labelH);
+  return { x: tileX, y: tileY, w: cellW, h: cellH };
+}
+function ExposeBackdrop() {
+  const on = useSyncExternalStore(subscribeExpose, getExposeState);
+  const [mounted, setMounted] = useState(on);
+  const [visible, setVisible] = useState(on);
+  useEffect(() => {
+    if (on) {
+      setMounted(true);
+      const id = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(id);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), 280);
+    return () => clearTimeout(t);
+  }, [on]);
+  if (!mounted || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onMouseDown: (e) => {
+          e.stopPropagation();
+          setExposeState(false);
+        },
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.55)",
+          backdropFilter: "blur(2px)",
+          WebkitBackdropFilter: "blur(2px)",
+          zIndex: 2e3,
+          cursor: "pointer",
+          opacity: visible ? 1 : 0,
+          transition: "opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1)",
+          pointerEvents: visible ? "auto" : "none"
+        }
+      }
+    ),
+    document.body
+  );
+}
 function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = false, onNext, onPrev, footer, bodyScroll, onMinimize, initialBox, actions, actionsLeft, allowPinOnTop, initialPosition, widget, compact, appStyle, autoHeight, autoMinHeight, widgetMenu, dimensions, windowKey, openedFromKey, children }) {
   const isMobile = useIsMobile();
   const [swipeX, setSwipeX] = useState(0);
@@ -670,6 +789,29 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
   }, [modalId]);
   const [zIndex, setZIndex] = useState(50);
   const isActive = useIsActiveModal(modalId);
+  const exposeOn = useSyncExternalStore(subscribeExpose, getExposeState);
+  const exposeExitFocusId = useSyncExternalStore(subscribeExposeExitFocus, getExposeExitFocus);
+  const isExposeTileable = !allowPinOnTop && !widget;
+  const exposeActive = exposeOn && isExposeTileable;
+  const [exposeHovered, setExposeHovered] = useState(false);
+  const [exposeExiting, setExposeExiting] = useState(false);
+  const exposeExitRole = exposeExiting && isExposeTileable && exposeExitFocusId === modalId ? "picked" : null;
+  const prevExposeActiveRef = useRef(exposeActive);
+  useEffect(() => {
+    if (prevExposeActiveRef.current && !exposeActive) {
+      setExposeExiting(true);
+      const t = setTimeout(() => {
+        setExposeExiting(false);
+        if (_exposeExitFocusId === modalId) setExposeExitFocus(null);
+      }, 700);
+      prevExposeActiveRef.current = exposeActive;
+      return () => clearTimeout(t);
+    }
+    prevExposeActiveRef.current = exposeActive;
+  }, [exposeActive, modalId]);
+  useEffect(() => {
+    if (!exposeActive) setExposeHovered(false);
+  }, [exposeActive]);
   useEffect(() => {
     const r = actionsRef.current;
     const l = actionsLeftRef.current;
@@ -756,28 +898,6 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
       setZIndex(getZForModal(modalId));
     };
     const onSplitView = () => {
-      if (allowPinOnTop || widget) return;
-      const allPanels = document.querySelectorAll("[data-modal-panel]");
-      let nonUtilityCount = 0;
-      let myNonUtilIdx = -1;
-      activationOrder.forEach((id, _i) => {
-        const panel = Array.from(allPanels).find((p) => p.getAttribute("data-modal-id") === id);
-        if (panel && !panel.hasAttribute("data-utility") && !panel.hasAttribute("data-widget")) {
-          if (id === modalId) myNonUtilIdx = nonUtilityCount;
-          nonUtilityCount++;
-        }
-      });
-      const count = nonUtilityCount;
-      if (count < 2) return;
-      const myIdx = myNonUtilIdx;
-      if (myIdx < 0) return;
-      const a = workArea();
-      const baseW = Math.floor(a.w / count);
-      const remainder = a.w - baseW * count;
-      const colW = baseW + (myIdx < remainder ? 1 : 0);
-      const xOffset = myIdx * baseW + Math.min(myIdx, remainder);
-      setBox({ x: a.x + xOffset, y: a.y, w: colW, h: a.h });
-      setMaximized(false);
     };
     const onCenter = (e) => {
       const label = e.detail?.label;
@@ -1129,121 +1249,209 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
     return () => window.removeEventListener("keydown", handler);
   }, [open, onNext, onPrev, hasNav, showBoundaryToast, modalId]);
   if (!open || interceptedRef.current) return null;
-  const content = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: panelRef,
-      "data-modal-panel": true,
-      "data-modal-id": modalId,
-      "data-window-key": windowKey || void 0,
-      ...allowPinOnTop ? { "data-utility": "" } : {},
-      ...widget ? { "data-widget": "" } : {},
-      className: `fixed rounded-lg flex flex-col overflow-hidden group ${widget ? isActive ? "shadow-2xl" : "shadow-lg" : `border ${isActive ? "shadow-2xl border-gray-200" : "shadow-lg border-gray-300"}`}`,
-      onMouseDown: (e) => {
-        setWindowMenu(null);
-        const targetPanel = e.target.closest("[data-modal-panel]");
-        if (targetPanel && targetPanel !== panelRef.current) return;
-        if (!e.target.closest("button, input, a, select, textarea")) {
-          activateModal(modalId);
-        }
-      },
-      style: isMobile ? {
-        // Mobile fullscreen: ignore stored box, fill viewport down to bottom
-        // nav. Widgets stay hidden on mobile. Only the active window is
-        // visible — all others hidden so swipe-right reveals the home
-        // wallpaper backdrop. Exception: when a sibling Modal is being
-        // swiped to-back and we're its `openedFrom` parent, un-hide so the
-        // user sees their parent list during the slide instead of just the
-        // wallpaper.
-        zIndex: zIndex + 1,
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: "var(--mobile-bottom-nav, 56px)",
-        width: "auto",
-        height: "auto",
-        transform: `translateX(${swipeX}px)`,
-        transition: swipeDragging ? "none" : "transform 180ms ease-out",
-        ...widget ? { display: "none" } : {},
-        ...zIndex < 0 ? { display: "none" } : {},
-        ...!isActive && !pinnedOnTop && !(swipingParentKey && windowKey === swipingParentKey) ? { display: "none" } : {}
-      } : {
-        zIndex: pinnedOnTop ? 999 : zIndex + 1,
-        width: box.w,
-        height: autoHeight ? "auto" : box.h,
-        top: box.y,
-        ...autoHeight ? {
-          // Widgets must fit content exactly (Weather, Currency, etc.) —
-          // the 240 px floor only applies to non-widget app windows where
-          // a near-empty body would look broken.
-          minHeight: `${autoMinHeight ?? (widget ? 0 : 240)}px`,
-          maxHeight: `calc(100vh - var(--taskbar-height, 0px) - 24px)`
-        } : {},
-        ...widget && widgetAnchor === "right" ? { right: window.innerWidth - box.x - box.w } : { left: box.x },
-        ...zIndex < 0 && !pinnedOnTop ? { display: "none" } : {}
-      },
-      children: [
-        isMobile && !widget && /* @__PURE__ */ jsx(
-          "div",
-          {
-            onPointerDown: handleEdgePointerDown,
-            className: "absolute top-0 bottom-0 left-0 w-[22px] z-[5]",
-            style: { touchAction: "pan-y" },
-            "aria-hidden": "true"
+  const exposeTile = exposeActive ? computeExposeTile(modalId) : null;
+  const exposeStyle = (() => {
+    if (exposeActive && exposeTile) {
+      const scale = Math.min(exposeTile.w / box.w, exposeTile.h / box.h);
+      const scaledW = box.w * scale;
+      const scaledH = box.h * scale;
+      const tx = exposeTile.x + (exposeTile.w - scaledW) / 2 - box.x;
+      const ty = exposeTile.y + (exposeTile.h - scaledH) / 2 - box.y;
+      return {
+        transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
+        transformOrigin: "top left",
+        transition: "transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms",
+        cursor: "pointer",
+        // Hovered tile lifts above its neighbours so the hover ring isn't
+        // clipped by adjacent panels.
+        zIndex: exposeHovered ? 2020 : 2010,
+        boxShadow: exposeHovered ? "0 24px 72px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.55), 0 0 36px 12px rgba(96,165,250,0.85), 0 0 96px 28px rgba(96,165,250,0.55)" : "0 16px 48px rgba(0,0,0,0.55)",
+        pointerEvents: "auto"
+      };
+    }
+    if (exposeExiting && isExposeTileable) {
+      const picked = exposeExitRole === "picked";
+      return {
+        transition: picked ? "transform 640ms cubic-bezier(0.34, 1.42, 0.64, 1), box-shadow 600ms" : "transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 600ms",
+        ...picked ? { zIndex: 2030 } : {}
+      };
+    }
+    return null;
+  })();
+  const content = /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        "data-modal-panel": true,
+        "data-modal-id": modalId,
+        "data-window-key": windowKey || void 0,
+        ...allowPinOnTop ? { "data-utility": "" } : {},
+        ...widget ? { "data-widget": "" } : {},
+        className: `fixed rounded-lg flex flex-col overflow-hidden group ${widget ? isActive ? "shadow-2xl" : "shadow-lg" : `border ${isActive ? "shadow-2xl border-gray-200" : "shadow-lg border-gray-300"}`}`,
+        onMouseDownCapture: (e) => {
+          if (exposeActive) {
+            e.preventDefault();
+            e.stopPropagation();
+            setExposeExitFocus(modalId);
+            setExposeState(false);
+            activateModal(modalId);
+            return;
           }
-        ),
-        widget ? (
-          /* Widget: no title bar — drag via body, close via right-click context menu */
-          null
-        ) : isMobile ? null : compact ? (
-          /* Compact: smaller title bar with title + close only */
-          /* @__PURE__ */ jsxs(
+        },
+        onMouseDown: (e) => {
+          if (exposeActive) return;
+          setWindowMenu(null);
+          const targetPanel = e.target.closest("[data-modal-panel]");
+          if (targetPanel && targetPanel !== panelRef.current) return;
+          if (!e.target.closest("button, input, a, select, textarea")) {
+            activateModal(modalId);
+          }
+        },
+        style: isMobile ? {
+          // Mobile fullscreen: ignore stored box, fill viewport down to bottom
+          // nav. Widgets stay hidden on mobile. Only the active window is
+          // visible — all others hidden so swipe-right reveals the home
+          // wallpaper backdrop. Exception: when a sibling Modal is being
+          // swiped to-back and we're its `openedFrom` parent, un-hide so the
+          // user sees their parent list during the slide instead of just the
+          // wallpaper.
+          zIndex: zIndex + 1,
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: "var(--mobile-bottom-nav, 56px)",
+          width: "auto",
+          height: "auto",
+          transform: `translateX(${swipeX}px)`,
+          transition: swipeDragging ? "none" : "transform 180ms ease-out",
+          ...widget ? { display: "none" } : {},
+          ...zIndex < 0 ? { display: "none" } : {},
+          ...!isActive && !pinnedOnTop && !(swipingParentKey && windowKey === swipingParentKey) ? { display: "none" } : {}
+        } : {
+          zIndex: pinnedOnTop ? 999 : zIndex + 1,
+          width: box.w,
+          height: autoHeight ? "auto" : box.h,
+          top: box.y,
+          ...autoHeight ? {
+            // Widgets must fit content exactly (Weather, Currency, etc.) —
+            // the 240 px floor only applies to non-widget app windows where
+            // a near-empty body would look broken.
+            minHeight: `${autoMinHeight ?? (widget ? 0 : 240)}px`,
+            maxHeight: `calc(100vh - var(--taskbar-height, 0px) - 24px)`
+          } : {},
+          ...widget && widgetAnchor === "right" ? { right: window.innerWidth - box.x - box.w } : { left: box.x },
+          ...zIndex < 0 && !pinnedOnTop ? { display: "none" } : {},
+          ...exposeStyle ?? {}
+        },
+        children: [
+          isMobile && !widget && /* @__PURE__ */ jsx(
             "div",
             {
-              onPointerDown: startDrag,
-              className: `flex items-center justify-between px-3 py-1.5 border-b border-gray-200 shrink-0 cursor-move select-none rounded-t-lg ${isActive ? "backdrop-blur-sm" : ""}`,
-              style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-header-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-header-rgb) / var(--inactive-header-opacity, 0.7))` },
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium min-w-0 flex-1 truncate flex items-center gap-1.5", style: { color: isActive ? "rgb(17 24 39)" : "rgb(156 163 175)" }, children: [
-                  renderIconButton(),
-                  /* @__PURE__ */ jsx("span", { className: "truncate", children: displayTitle })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: [
-                  allowPinOnTop && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => setPinnedOnTop((p) => !p),
-                      title: pinnedOnTop ? "Unpin from top" : "Pin on top",
-                      className: `p-0.5 rounded hover:bg-gray-200 ${pinnedOnTop ? "text-blue-600" : "text-gray-400 hover:text-gray-600"}`,
-                      children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: pinnedOnTop ? "currentColor" : "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" }) })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("button", { type: "button", onClick: guardedClose, className: "rounded p-0.5 text-gray-400 hover:text-gray-600 hover:bg-gray-200", children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" }) })
-                ] })
-              ]
+              onPointerDown: handleEdgePointerDown,
+              className: "absolute top-0 bottom-0 left-0 w-[22px] z-[5]",
+              style: { touchAction: "pan-y" },
+              "aria-hidden": "true"
             }
-          )
-        ) : appStyle ? (
-          /* App style: small title bar like compact, but keeps minimize/maximize for full window control. */
-          /* @__PURE__ */ jsxs(
+          ),
+          widget ? (
+            /* Widget: no title bar — drag via body, close via right-click context menu */
+            null
+          ) : isMobile ? null : compact ? (
+            /* Compact: smaller title bar with title + close only */
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onPointerDown: startDrag,
+                className: `flex items-center justify-between px-3 py-1.5 border-b border-gray-200 shrink-0 cursor-move select-none rounded-t-lg ${isActive ? "backdrop-blur-sm" : ""}`,
+                style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-header-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-header-rgb) / var(--inactive-header-opacity, 0.7))` },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium min-w-0 flex-1 truncate flex items-center gap-1.5", style: { color: isActive ? "rgb(17 24 39)" : "rgb(156 163 175)" }, children: [
+                    renderIconButton(),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: displayTitle })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: [
+                    allowPinOnTop && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => setPinnedOnTop((p) => !p),
+                        title: pinnedOnTop ? "Unpin from top" : "Pin on top",
+                        className: `p-0.5 rounded hover:bg-gray-200 ${pinnedOnTop ? "text-blue-600" : "text-gray-400 hover:text-gray-600"}`,
+                        children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: pinnedOnTop ? "currentColor" : "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("button", { type: "button", onClick: guardedClose, className: "rounded p-0.5 text-gray-400 hover:text-gray-600 hover:bg-gray-200", children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" }) })
+                  ] })
+                ]
+              }
+            )
+          ) : appStyle ? (
+            /* App style: small title bar like compact, but keeps minimize/maximize for full window control. */
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onPointerDown: startDrag,
+                className: `flex items-center justify-between px-3 py-1.5 border-b border-gray-200 shrink-0 cursor-move select-none rounded-t-lg ${isActive ? "backdrop-blur-sm" : ""}`,
+                style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-header-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-header-rgb) / var(--inactive-header-opacity, 0.7))` },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium min-w-0 flex-1 truncate flex items-center gap-1.5", style: { color: isActive ? "rgb(17 24 39)" : "rgb(156 163 175)" }, children: [
+                    renderIconButton(),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: displayTitle })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-2", children: [
+                    allowPinOnTop && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => setPinnedOnTop((p) => !p),
+                        title: pinnedOnTop ? "Unpin from top" : "Pin on top",
+                        className: `p-0.5 rounded hover:bg-gray-200 ${pinnedOnTop ? "text-blue-600" : "text-gray-400 hover:text-gray-600"}`,
+                        children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: pinnedOnTop ? "currentColor" : "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("button", { onClick: () => {
+                      const idx = activationOrder.indexOf(modalId);
+                      if (idx !== -1) activationOrder.splice(idx, 1);
+                      activeListeners.forEach((fn) => fn());
+                      window.dispatchEvent(new CustomEvent("modal-reorder"));
+                    }, title: "Minimize", className: "text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-200 text-xs leading-none", children: "\u2500" }),
+                    /* @__PURE__ */ jsx("button", { onClick: () => {
+                      if (maximized) {
+                        setMaximized(false);
+                        setBox(calcWindowed());
+                      } else {
+                        reset();
+                      }
+                    }, title: maximized ? "Windowed" : "Maximize", className: "text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-200 text-xs leading-none", children: maximized ? "\u2750" : "\u2922" }),
+                    /* @__PURE__ */ jsx("button", { type: "button", onClick: guardedClose, className: "rounded p-0.5 text-gray-400 hover:text-gray-600 hover:bg-gray-200", children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" }) })
+                  ] })
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ jsxs(
             "div",
             {
               onPointerDown: startDrag,
-              className: `flex items-center justify-between px-3 py-1.5 border-b border-gray-200 shrink-0 cursor-move select-none rounded-t-lg ${isActive ? "backdrop-blur-sm" : ""}`,
+              className: `flex items-center justify-between px-4 py-2.5 border-b border-gray-200 shrink-0 cursor-move select-none rounded-t-lg ${isActive ? "backdrop-blur-sm" : ""}`,
               style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-header-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-header-rgb) / var(--inactive-header-opacity, 0.7))` },
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium min-w-0 flex-1 truncate flex items-center gap-1.5", style: { color: isActive ? "rgb(17 24 39)" : "rgb(156 163 175)" }, children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-lg font-semibold min-w-0 flex-1 truncate flex items-center gap-2", style: { color: isActive ? "var(--window-title-active, rgb(17 24 39))" : "var(--window-title-inactive, rgb(156 163 175))" }, children: [
                   renderIconButton(),
                   /* @__PURE__ */ jsx("span", { className: "truncate", children: displayTitle })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0 ml-4", children: [
+                  hasNav && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 mr-1 text-[10px] text-gray-400", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 bg-gray-200 px-1.5 py-0.5 font-medium text-gray-500", children: "K" }),
+                    /* @__PURE__ */ jsx("span", { children: "Prev" }),
+                    /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 bg-gray-200 px-1.5 py-0.5 font-medium ml-1 text-gray-500", children: "J" }),
+                    /* @__PURE__ */ jsx("span", { children: "Next" })
+                  ] }),
                   allowPinOnTop && /* @__PURE__ */ jsx(
                     "button",
                     {
                       onClick: () => setPinnedOnTop((p) => !p),
                       title: pinnedOnTop ? "Unpin from top" : "Pin on top",
-                      className: `p-0.5 rounded hover:bg-gray-200 ${pinnedOnTop ? "text-blue-600" : "text-gray-400 hover:text-gray-600"}`,
-                      children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: pinnedOnTop ? "currentColor" : "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" }) })
+                      className: `text-xs px-2 py-1 rounded hover:bg-gray-200 ${pinnedOnTop ? "text-blue-600" : "text-gray-400 hover:text-gray-600"}`,
+                      children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: pinnedOnTop ? "currentColor" : "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" }) })
                     }
                   ),
                   /* @__PURE__ */ jsx("button", { onClick: () => {
@@ -1251,7 +1459,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
                     if (idx !== -1) activationOrder.splice(idx, 1);
                     activeListeners.forEach((fn) => fn());
                     window.dispatchEvent(new CustomEvent("modal-reorder"));
-                  }, title: "Minimize", className: "text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-200 text-xs leading-none", children: "\u2500" }),
+                  }, title: "Minimize", className: "text-gray-400 hover:text-gray-600 text-xs px-2 py-1 rounded hover:bg-gray-200", children: "\u2500" }),
                   /* @__PURE__ */ jsx("button", { onClick: () => {
                     if (maximized) {
                       setMaximized(false);
@@ -1259,126 +1467,117 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
                     } else {
                       reset();
                     }
-                  }, title: maximized ? "Windowed" : "Maximize", className: "text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-200 text-xs leading-none", children: maximized ? "\u2750" : "\u2922" }),
-                  /* @__PURE__ */ jsx("button", { type: "button", onClick: guardedClose, className: "rounded p-0.5 text-gray-400 hover:text-gray-600 hover:bg-gray-200", children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" }) })
+                  }, title: maximized ? "Windowed" : "Maximize", className: "text-gray-400 hover:text-gray-600 text-xs px-2 py-1 rounded hover:bg-gray-200", children: maximized ? "\u2750" : "\u2922" }),
+                  /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 bg-gray-200 px-1.5 py-0.5 text-[10px] font-medium text-gray-400", children: "ESC" }),
+                  /* @__PURE__ */ jsx("button", { type: "button", onClick: guardedClose, className: "rounded-md text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-5 w-5" }) })
                 ] })
               ]
             }
-          )
-        ) : /* @__PURE__ */ jsxs(
-          "div",
-          {
-            onPointerDown: startDrag,
-            className: `flex items-center justify-between px-4 py-2.5 border-b border-gray-200 shrink-0 cursor-move select-none rounded-t-lg ${isActive ? "backdrop-blur-sm" : ""}`,
-            style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-header-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-header-rgb) / var(--inactive-header-opacity, 0.7))` },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "text-lg font-semibold min-w-0 flex-1 truncate flex items-center gap-2", style: { color: isActive ? "var(--window-title-active, rgb(17 24 39))" : "var(--window-title-inactive, rgb(156 163 175))" }, children: [
-                renderIconButton(),
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: displayTitle })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0 ml-4", children: [
-                hasNav && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 mr-1 text-[10px] text-gray-400", children: [
-                  /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 bg-gray-200 px-1.5 py-0.5 font-medium text-gray-500", children: "K" }),
-                  /* @__PURE__ */ jsx("span", { children: "Prev" }),
-                  /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 bg-gray-200 px-1.5 py-0.5 font-medium ml-1 text-gray-500", children: "J" }),
-                  /* @__PURE__ */ jsx("span", { children: "Next" })
-                ] }),
-                allowPinOnTop && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => setPinnedOnTop((p) => !p),
-                    title: pinnedOnTop ? "Unpin from top" : "Pin on top",
-                    className: `text-xs px-2 py-1 rounded hover:bg-gray-200 ${pinnedOnTop ? "text-blue-600" : "text-gray-400 hover:text-gray-600"}`,
-                    children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: pinnedOnTop ? "currentColor" : "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx("button", { onClick: () => {
-                  const idx = activationOrder.indexOf(modalId);
-                  if (idx !== -1) activationOrder.splice(idx, 1);
-                  activeListeners.forEach((fn) => fn());
-                  window.dispatchEvent(new CustomEvent("modal-reorder"));
-                }, title: "Minimize", className: "text-gray-400 hover:text-gray-600 text-xs px-2 py-1 rounded hover:bg-gray-200", children: "\u2500" }),
-                /* @__PURE__ */ jsx("button", { onClick: () => {
-                  if (maximized) {
-                    setMaximized(false);
-                    setBox(calcWindowed());
-                  } else {
-                    reset();
-                  }
-                }, title: maximized ? "Windowed" : "Maximize", className: "text-gray-400 hover:text-gray-600 text-xs px-2 py-1 rounded hover:bg-gray-200", children: maximized ? "\u2750" : "\u2922" }),
-                /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 bg-gray-200 px-1.5 py-0.5 text-[10px] font-medium text-gray-400", children: "ESC" }),
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: guardedClose, className: "rounded-md text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-5 w-5" }) })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(ModalIdContext.Provider, { value: modalId, children: /* @__PURE__ */ jsx(ModalActionsContext.Provider, { value: { rightRef: actionsRef, leftRef: actionsLeftRef, notify: () => setHasActions(true), active: isActive, isDirty }, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...widget ? { onPointerDown: startDrag, onContextMenu: (e) => {
-              e.preventDefault();
-              setCtxMenu({ x: e.clientX, y: e.clientY });
-            } } : {},
-            className: `flex-1 min-h-0 flex flex-col ${widget ? "p-0 cursor-move" : appStyle ? "p-0" : compact ? "p-2" : "p-4"} ${widget ? "" : "backdrop-blur-sm"} ${bodyScroll === false || appStyle ? "overflow-hidden" : "overflow-y-auto"} ${widget ? "rounded-lg select-none" : ""}`,
-            style: { ...widget ? { touchAction: "none" } : {}, backgroundColor: widget ? "transparent" : isActive ? `rgb(var(--window-content-rgb) / var(--active-content-opacity, 0.9))` : `rgb(var(--window-content-rgb) / var(--inactive-content-opacity, 0.8))` },
-            children
-          }
-        ) }) }),
-        widget && ctxMenu && /* @__PURE__ */ jsxs(PopupMenu, { minWidth: 160, style: { left: ctxMenu.x, top: ctxMenu.y }, onClose: () => setCtxMenu(null), children: [
-          /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
-            setCtxMenu(null);
-            window.dispatchEvent(new CustomEvent("widget-open-settings", { detail: modalId }));
-          }, children: "Settings" }),
-          /* @__PURE__ */ jsx(PopupMenuDivider, {}),
-          widgetMenu && /* @__PURE__ */ jsxs(Fragment, { children: [
-            widgetMenu,
-            /* @__PURE__ */ jsx(PopupMenuDivider, {})
+          ),
+          /* @__PURE__ */ jsx(ModalIdContext.Provider, { value: modalId, children: /* @__PURE__ */ jsx(ModalActionsContext.Provider, { value: { rightRef: actionsRef, leftRef: actionsLeftRef, notify: () => setHasActions(true), active: isActive, isDirty }, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...widget ? { onPointerDown: startDrag, onContextMenu: (e) => {
+                e.preventDefault();
+                setCtxMenu({ x: e.clientX, y: e.clientY });
+              } } : {},
+              className: `flex-1 min-h-0 flex flex-col ${widget ? "p-0 cursor-move" : appStyle ? "p-0" : compact ? "p-2" : "p-4"} ${widget ? "" : "backdrop-blur-sm"} ${bodyScroll === false || appStyle ? "overflow-hidden" : "overflow-y-auto"} ${widget ? "rounded-lg select-none" : ""}`,
+              style: { ...widget ? { touchAction: "none" } : {}, backgroundColor: widget ? "transparent" : isActive ? `rgb(var(--window-content-rgb) / var(--active-content-opacity, 0.9))` : `rgb(var(--window-content-rgb) / var(--inactive-content-opacity, 0.8))` },
+              children
+            }
+          ) }) }),
+          widget && ctxMenu && /* @__PURE__ */ jsxs(PopupMenu, { minWidth: 160, style: { left: ctxMenu.x, top: ctxMenu.y }, onClose: () => setCtxMenu(null), children: [
+            /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
+              setCtxMenu(null);
+              window.dispatchEvent(new CustomEvent("widget-open-settings", { detail: modalId }));
+            }, children: "Settings" }),
+            /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+            widgetMenu && /* @__PURE__ */ jsxs(Fragment, { children: [
+              widgetMenu,
+              /* @__PURE__ */ jsx(PopupMenuDivider, {})
+            ] }),
+            /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => {
+              setCtxMenu(null);
+              setPinnedOnTop((p) => !p);
+            }, children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Always on Top" }),
+              pinnedOnTop && /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-blue-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+            ] }),
+            /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+            /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
+              setCtxMenu(null);
+              guardedClose();
+            }, children: "Close" })
           ] }),
-          /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => {
-            setCtxMenu(null);
-            setPinnedOnTop((p) => !p);
-          }, children: [
-            /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Always on Top" }),
-            pinnedOnTop && /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-blue-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onPointerDown: startDrag,
+              className: `px-4 py-2 border-t border-gray-200 shrink-0 flex items-center justify-between text-xs select-none cursor-move${isActive ? " backdrop-blur-sm" : ""}${widget || compact || appStyle || isMobile || !footer && !hasActions && !actions && !actionsLeft ? " hidden" : ""}`,
+              style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-footer-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-footer-rgb) / var(--inactive-header-opacity, 0.7))` },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                  actionsLeft,
+                  /* @__PURE__ */ jsx("div", { ref: actionsLeftRef, "data-modal-actions-left": true, className: "flex items-center gap-2" }),
+                  footer
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [
+                  /* @__PURE__ */ jsx("div", { ref: actionsRef, "data-modal-actions": true, className: "flex items-center gap-2" }),
+                  actions
+                ] })
+              ]
+            }
+          ),
+          !widget && !isMobile && !exposeActive && isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "se"), className: "absolute bottom-0 right-0 w-3 h-3 cursor-nwse-resize z-10" }),
+            /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "sw"), className: "absolute bottom-0 left-0 w-3 h-3 cursor-nesw-resize z-10" }),
+            /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "ne"), className: "absolute top-0 right-0 w-3 h-3 cursor-nesw-resize z-10" }),
+            /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "nw"), className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-10" }),
+            /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "n"), className: "absolute top-0 left-3 right-3 h-1 cursor-ns-resize" }),
+            /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "s"), className: "absolute bottom-0 left-3 right-3 h-1 cursor-ns-resize" }),
+            /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "e"), className: "absolute top-3 bottom-3 right-0 w-1 cursor-ew-resize" }),
+            /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "w"), className: "absolute top-3 bottom-3 left-0 w-1 cursor-ew-resize" })
           ] }),
-          /* @__PURE__ */ jsx(PopupMenuDivider, {}),
-          /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
-            setCtxMenu(null);
-            guardedClose();
-          }, children: "Close" })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            onPointerDown: startDrag,
-            className: `px-4 py-2 border-t border-gray-200 shrink-0 flex items-center justify-between text-xs select-none cursor-move${isActive ? " backdrop-blur-sm" : ""}${widget || compact || appStyle || isMobile || !footer && !hasActions && !actions && !actionsLeft ? " hidden" : ""}`,
-            style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-footer-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-footer-rgb) / var(--inactive-header-opacity, 0.7))` },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-                actionsLeft,
-                /* @__PURE__ */ jsx("div", { ref: actionsLeftRef, "data-modal-actions-left": true, className: "flex items-center gap-2" }),
-                footer
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [
-                /* @__PURE__ */ jsx("div", { ref: actionsRef, "data-modal-actions": true, className: "flex items-center gap-2" }),
-                actions
-              ] })
-            ]
-          }
-        ),
-        !widget && !isMobile && isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "se"), className: "absolute bottom-0 right-0 w-3 h-3 cursor-nwse-resize z-10" }),
-          /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "sw"), className: "absolute bottom-0 left-0 w-3 h-3 cursor-nesw-resize z-10" }),
-          /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "ne"), className: "absolute top-0 right-0 w-3 h-3 cursor-nesw-resize z-10" }),
-          /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "nw"), className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-10" }),
-          /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "n"), className: "absolute top-0 left-3 right-3 h-1 cursor-ns-resize" }),
-          /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "s"), className: "absolute bottom-0 left-3 right-3 h-1 cursor-ns-resize" }),
-          /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "e"), className: "absolute top-3 bottom-3 right-0 w-1 cursor-ew-resize" }),
-          /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "w"), className: "absolute top-3 bottom-3 left-0 w-1 cursor-ew-resize" })
-        ] })
-      ]
-    }
-  ) });
+          exposeActive && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0",
+              style: { zIndex: 9999, cursor: "pointer", background: "transparent" },
+              onMouseEnter: () => setExposeHovered(true),
+              onMouseLeave: () => setExposeHovered(false),
+              onMouseDown: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                activateModal(modalId);
+                setExposeState(false);
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }
+            }
+          )
+        ]
+      }
+    ),
+    exposeActive && exposeTile && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed pointer-events-none select-none truncate text-center",
+        style: {
+          left: exposeTile.x,
+          top: exposeTile.y + exposeTile.h + 4,
+          width: exposeTile.w,
+          zIndex: exposeHovered ? 2021 : 2011,
+          color: "white",
+          fontSize: 12,
+          fontWeight: 500,
+          textShadow: "0 1px 2px rgba(0,0,0,0.6)"
+        },
+        children: displayTitle
+      }
+    )
+  ] });
   const windowMenuEl = windowMenu && /* @__PURE__ */ jsxs(PopupMenu, { style: { left: windowMenu.x, top: windowMenu.y }, onClose: () => setWindowMenu(null), minWidth: 160, children: [
     !widget && !compact && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => {
@@ -1863,10 +2062,16 @@ function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActi
         "button",
         {
           onClick: onSplitView,
+          title: "Expos\xE9 \u2014 show all open windows as thumbnails",
           className: "flex items-center gap-1 rounded px-2 py-1 text-[11px] font-medium text-blue-600 border border-blue-300 hover:bg-blue-50 transition-colors shrink-0",
           children: [
-            /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 4H5a1 1 0 00-1 1v14a1 1 0 001 1h4m6-16h4a1 1 0 011 1v14a1 1 0 01-1 1h-4m-6 0V4" }) }),
-            "Split"
+            /* @__PURE__ */ jsxs("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
+              /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1" }),
+              /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1" }),
+              /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1" }),
+              /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1" })
+            ] }),
+            "Expos\xE9"
           ]
         }
       ),
@@ -2034,6 +2239,7 @@ function WindowManagerProvider({ children }) {
         }
       }
     ),
+    /* @__PURE__ */ jsx(ExposeBackdrop, {}),
     !isAuthPage && openWindows.map((item) => item.type === "page" ? /* @__PURE__ */ jsx(PageWindow, { item, onClose: () => closeEntity(item.id) }, item.id) : /* @__PURE__ */ jsx(
       RestoredRegistryModal,
       {
@@ -2048,5 +2254,5 @@ function WindowManagerProvider({ children }) {
 }
 
 export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, LoadingSpinner, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ThumbCard, WINDOW_REGISTRY, WindowManagerProvider, WindowTitle, activateModal, client_default, getActiveModalId, glassStyle, isEntityEntry, isPageEntry, isSection, navIcons, navSections, sectionIcons, setShellApiClient, setShellNavIcons, setShellWindowRegistry, startMenuCategories, useIsMobile, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
-//# sourceMappingURL=chunk-QXY6ZHRX.js.map
-//# sourceMappingURL=chunk-QXY6ZHRX.js.map
+//# sourceMappingURL=chunk-T2NQXP2J.js.map
+//# sourceMappingURL=chunk-T2NQXP2J.js.map