react-os-shell 3.8.2 → 3.8.4

package/dist/index.js

@@ -1,20 +1,20 @@
 import { subscribePomo, getPomoSnapshot } from './chunk-F2KBTMSP.js';
 export { setShellTodoProvider } from './chunk-F2KBTMSP.js';
-import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-EZB2RV6Z.js';
-export { Breadcrumbs } from './chunk-EZB2RV6Z.js';
+import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-ZJ7WMV57.js';
+export { Breadcrumbs } from './chunk-ZJ7WMV57.js';
 import { SidebarLayout } from './chunk-VGTEM5RZ.js';
 export { SidebarLayout } from './chunk-VGTEM5RZ.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds, playLogout } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-Y2TWETKD.js';
-export { ImageAnnotator_default as ImageAnnotator } from './chunk-Y2TWETKD.js';
+import { setPdfPreview } from './chunk-LP4C5UHL.js';
+export { ImageAnnotator_default as ImageAnnotator } from './chunk-LP4C5UHL.js';
 import { toast_default } from './chunk-VENYVK3L.js';
 export { toast_default as toast } from './chunk-VENYVK3L.js';
-import { EditableGrid } from './chunk-HNLQ7MWH.js';
-export { EditableGrid } from './chunk-HNLQ7MWH.js';
+import { EditableGrid } from './chunk-TG6RCJNY.js';
+export { EditableGrid } from './chunk-TG6RCJNY.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
-import { APP_VERSION, VERSION } from './chunk-YPRZD2X2.js';
-export { VERSION } from './chunk-YPRZD2X2.js';
+import { APP_VERSION, VERSION } from './chunk-4MTVCPZK.js';
+export { VERSION } from './chunk-4MTVCPZK.js';
 import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, useShellPrefs, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, CancelButton, setWindowPosition, ThumbCard, activateModal } from './chunk-HJ5ZNXPB.js';
 export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-HJ5ZNXPB.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-UBN4IUDE.js';
@@ -2932,78 +2932,68 @@ function StartMenu({
       v.label
     );
   };
-  return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "fixed z-[260]", style: posStyle, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `${sizeConfig.w} rounded-2xl flex ${isVertical ? "flex-col-reverse" : "flex-col"} overflow-hidden`,
-          style: { animation: "menu-in 0.15s ease-out", ...menuGlass },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: `px-3 ${isVertical ? "pb-3 pt-2 border-t border-white/20" : "pt-3 pb-2"}`, children: /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${GLASS_INPUT_BG} rounded-lg px-2.5 py-1.5`, children: [
-              /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" }) }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value: search,
-                  onChange: (e) => {
-                    setSearch(e.target.value);
-                    setHoveredSection(null);
-                    setSearchIdx(0);
-                  },
-                  onKeyDown: (e) => {
-                    if (search.length >= 2 && searchResults.length > 0) {
-                      if (e.key === "ArrowDown") {
-                        e.preventDefault();
-                        setSearchIdx((i) => Math.min(i + 1, searchResults.length - 1));
-                      } else if (e.key === "ArrowUp") {
-                        e.preventDefault();
-                        setSearchIdx((i) => Math.max(i - 1, 0));
-                      } else if (e.key === "Enter") {
-                        e.preventDefault();
-                        handleClick(searchResults[searchIdx].to);
-                      }
-                    }
-                  },
-                  placeholder: "Search...",
-                  className: "flex-1 bg-transparent text-xs outline-none placeholder-gray-400",
-                  autoFocus: true
-                }
-              )
-            ] }) }),
-            search.length >= 2 ? /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-1 pb-2 max-h-[400px]", children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 text-center py-4", children: "No results" }) : searchResults.map((r, i) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => handleClick(r.to),
-                onMouseEnter: () => setSearchIdx(i),
-                className: `${itemCls} transition-colors ${i === searchIdx ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`,
-                children: [
-                  iconEl(r.to),
-                  /* @__PURE__ */ jsx("span", { children: r.label }),
-                  r.section && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 ml-auto", children: r.section })
-                ]
-              },
-              i
-            )) }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-1 pb-1 flex flex-col", children: [
-              isVertical && /* @__PURE__ */ jsxs(Fragment, { children: [
-                footerItems.map((item) => /* @__PURE__ */ jsxs(
-                  "button",
+  return (
+    /* z-[1100]: sit above the entire window stack — normal windows climb to
+       50 + idx*10 + 1 and pinned-on-top windows render at 999 (see Modal.tsx),
+       which previously painted over the open Start menu (BG#00259). 1100 clears
+       both. Deliberately kept BELOW Exposé / mission-control (zIndex 2000–9999
+       in Modal.tsx) and the transient full-screen overlay tier (toasts,
+       startup, logout — z-[9999]), which should still cover the menu. */
+    /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "fixed z-[1100]", style: posStyle, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${sizeConfig.w} rounded-2xl flex ${isVertical ? "flex-col-reverse" : "flex-col"} overflow-hidden`,
+            style: { animation: "menu-in 0.15s ease-out", ...menuGlass },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `px-3 ${isVertical ? "pb-3 pt-2 border-t border-white/20" : "pt-3 pb-2"}`, children: /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${GLASS_INPUT_BG} rounded-lg px-2.5 py-1.5`, children: [
+                /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" }) }),
+                /* @__PURE__ */ jsx(
+                  "input",
                   {
-                    onClick: () => handleClick(item.to),
-                    className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
-                    children: [
-                      iconEl(item.to),
-                      /* @__PURE__ */ jsx("span", { children: item.label })
-                    ]
-                  },
-                  item.to
-                )),
-                footerSections.map((s) => renderSection(s, false)),
-                (footerSections.length > 0 || footerItems.length > 0) && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
-                erpSections.map((s) => renderSection(s, true)),
-                erpSections.length > 0 && hasAppsGroup && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
-                topItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsxs(
+                    value: search,
+                    onChange: (e) => {
+                      setSearch(e.target.value);
+                      setHoveredSection(null);
+                      setSearchIdx(0);
+                    },
+                    onKeyDown: (e) => {
+                      if (search.length >= 2 && searchResults.length > 0) {
+                        if (e.key === "ArrowDown") {
+                          e.preventDefault();
+                          setSearchIdx((i) => Math.min(i + 1, searchResults.length - 1));
+                        } else if (e.key === "ArrowUp") {
+                          e.preventDefault();
+                          setSearchIdx((i) => Math.max(i - 1, 0));
+                        } else if (e.key === "Enter") {
+                          e.preventDefault();
+                          handleClick(searchResults[searchIdx].to);
+                        }
+                      }
+                    },
+                    placeholder: "Search...",
+                    className: "flex-1 bg-transparent text-xs outline-none placeholder-gray-400",
+                    autoFocus: true
+                  }
+                )
+              ] }) }),
+              search.length >= 2 ? /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-1 pb-2 max-h-[400px]", children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 text-center py-4", children: "No results" }) : searchResults.map((r, i) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleClick(r.to),
+                  onMouseEnter: () => setSearchIdx(i),
+                  className: `${itemCls} transition-colors ${i === searchIdx ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`,
+                  children: [
+                    iconEl(r.to),
+                    /* @__PURE__ */ jsx("span", { children: r.label }),
+                    r.section && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 ml-auto", children: r.section })
+                  ]
+                },
+                i
+              )) }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-1 pb-1 flex flex-col", children: [
+                isVertical && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  footerItems.map((item) => /* @__PURE__ */ jsxs(
                     "button",
                     {
                       onClick: () => handleClick(item.to),
@@ -3012,16 +3002,52 @@ function StartMenu({
                         iconEl(item.to),
                         /* @__PURE__ */ jsx("span", { children: item.label })
                       ]
-                    }
-                  ),
-                  item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
-                ] }, item.to)),
-                systemSections.map((s) => renderSection(s, false)),
-                virtualSections.map((v) => renderVirtualSection(v))
-              ] }),
-              !isVertical && /* @__PURE__ */ jsxs(Fragment, { children: [
-                topItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsxs(
+                    },
+                    item.to
+                  )),
+                  footerSections.map((s) => renderSection(s, false)),
+                  (footerSections.length > 0 || footerItems.length > 0) && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
+                  erpSections.map((s) => renderSection(s, true)),
+                  erpSections.length > 0 && hasAppsGroup && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
+                  topItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => handleClick(item.to),
+                        className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+                        children: [
+                          iconEl(item.to),
+                          /* @__PURE__ */ jsx("span", { children: item.label })
+                        ]
+                      }
+                    ),
+                    item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
+                  ] }, item.to)),
+                  systemSections.map((s) => renderSection(s, false)),
+                  virtualSections.map((v) => renderVirtualSection(v))
+                ] }),
+                !isVertical && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  topItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => handleClick(item.to),
+                        className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+                        children: [
+                          iconEl(item.to),
+                          /* @__PURE__ */ jsx("span", { children: item.label })
+                        ]
+                      }
+                    ),
+                    item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
+                  ] }, item.to)),
+                  systemSections.map((s) => renderSection(s, false)),
+                  virtualSections.map((v) => renderVirtualSection(v)),
+                  hasAppsGroup && erpSections.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
+                  erpSections.map((s) => renderSection(s, true)),
+                  (footerSections.length > 0 || footerItems.length > 0) && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
+                  footerSections.map((s) => renderSection(s, false)),
+                  footerItems.map((item) => /* @__PURE__ */ jsxs(
                     "button",
                     {
                       onClick: () => handleClick(item.to),
@@ -3030,154 +3056,136 @@ function StartMenu({
                         iconEl(item.to),
                         /* @__PURE__ */ jsx("span", { children: item.label })
                       ]
-                    }
-                  ),
-                  item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
-                ] }, item.to)),
-                systemSections.map((s) => renderSection(s, false)),
-                virtualSections.map((v) => renderVirtualSection(v)),
-                hasAppsGroup && erpSections.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
-                erpSections.map((s) => renderSection(s, true)),
-                (footerSections.length > 0 || footerItems.length > 0) && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
-                footerSections.map((s) => renderSection(s, false)),
-                footerItems.map((item) => /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => handleClick(item.to),
-                    className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
-                    children: [
-                      iconEl(item.to),
-                      /* @__PURE__ */ jsx("span", { children: item.label })
-                    ]
-                  },
-                  item.to
-                ))
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: `${isVertical ? "border-b" : "border-t"} border-white/20 p-1`, children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                onClick: () => handleClick("/profile"),
-                className: "rounded-lg px-2 py-1.5 flex items-center gap-2.5 hover:bg-blue-50 hover:text-blue-700 transition-colors cursor-pointer",
-                children: [
-                  profile?.avatar_url ? /* @__PURE__ */ jsx("img", { src: profile.avatar_url, alt: "", className: "h-8 w-8 rounded-full object-cover border border-white/20 shrink-0" }) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-sm font-bold text-blue-700 shrink-0", children: (profile?.first_name?.charAt(0) || user?.email?.charAt(0) || "?").toUpperCase() }),
-                  /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 text-sm font-medium text-gray-900 truncate", children: profile?.first_name ? `${profile.first_name} ${profile.last_name || ""}`.trim() : user?.email }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onClose();
-                        onLogout();
-                      },
-                      title: "Sign Out",
-                      className: "shrink-0 p-1.5 rounded-md text-gray-500 hover:text-red-600 hover:bg-red-50 transition-colors",
-                      children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" }) })
-                    }
-                  )
-                ]
-              }
-            ) })
-          ]
-        }
-      ),
-      hoveredSection && flyoutItems.length > 0 && search.length < 2 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: flyoutRef,
-          className: `fixed ${sizeConfig.fw} rounded-2xl overflow-hidden`,
-          style: { left: menuRef.current ? menuRef.current.getBoundingClientRect().right + 4 : menuWidth + 12, top: flyoutTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
-          onMouseEnter: () => clearTimeout(hoverTimeout.current),
-          onMouseLeave: () => {
-            hoverTimeout.current = setTimeout(() => {
-              setHoveredSection(null);
-              setHoveredChild(null);
-            }, 200);
-          },
-          children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto overscroll-contain", style: { maxHeight: availH }, children: flyoutItems.map((item) => {
-            const hasChildren = !!item.children && item.children.length > 0;
-            const isChildHovered = hoveredChild === item.to;
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                onMouseEnter: hasChildren ? (e) => {
-                  clearTimeout(childHoverTimeout.current);
-                  const rect = e.currentTarget.getBoundingClientRect();
-                  setHoveredChildY(rect.top + rect.height / 2);
-                  setHoveredChild(item.to);
-                } : () => {
-                  childHoverTimeout.current = setTimeout(() => setHoveredChild(null), 200);
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => handleClick(item.to),
-                      className: `${itemCls} transition-colors ${isChildHovered ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`,
-                      children: [
-                        iconEl(item.to),
-                        /* @__PURE__ */ jsx("span", { children: item.label }),
-                        hasChildren && /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 ml-auto text-gray-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })
-                      ]
-                    }
-                  ),
-                  item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
-                ]
-              },
-              item.to
-            );
-          }) })
-        }
-      ),
-      (() => {
-        if (search.length >= 2 || !hoveredChild) return null;
-        const parent = flyoutItems.find((it) => it.to === hoveredChild);
-        const kids = (parent?.children ?? []).filter((c) => !c.perms || hasAnyPerm(c.perms));
-        if (!parent || kids.length === 0) return null;
-        const flyoutRect = flyoutRef.current?.getBoundingClientRect();
-        const subLeft = flyoutRect ? flyoutRect.right + 4 : 0;
-        const subEstH = kids.length * sizeConfig.itemH + 12;
-        const subH = measuredSub?.key === hoveredChild ? measuredSub.h : subEstH;
-        const subBoxH = Math.min(subH, availH);
-        let subTop = hoveredChildY - subBoxH / 2;
-        if (subTop < minTop) subTop = minTop;
-        if (subTop + subBoxH > maxBottom) subTop = Math.max(minTop, maxBottom - subBoxH);
-        return /* @__PURE__ */ jsx(
+                    },
+                    item.to
+                  ))
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: `${isVertical ? "border-b" : "border-t"} border-white/20 p-1`, children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  onClick: () => handleClick("/profile"),
+                  className: "rounded-lg px-2 py-1.5 flex items-center gap-2.5 hover:bg-blue-50 hover:text-blue-700 transition-colors cursor-pointer",
+                  children: [
+                    profile?.avatar_url ? /* @__PURE__ */ jsx("img", { src: profile.avatar_url, alt: "", className: "h-8 w-8 rounded-full object-cover border border-white/20 shrink-0" }) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-sm font-bold text-blue-700 shrink-0", children: (profile?.first_name?.charAt(0) || user?.email?.charAt(0) || "?").toUpperCase() }),
+                    /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 text-sm font-medium text-gray-900 truncate", children: profile?.first_name ? `${profile.first_name} ${profile.last_name || ""}`.trim() : user?.email }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onClose();
+                          onLogout();
+                        },
+                        title: "Sign Out",
+                        className: "shrink-0 p-1.5 rounded-md text-gray-500 hover:text-red-600 hover:bg-red-50 transition-colors",
+                        children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" }) })
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        hoveredSection && flyoutItems.length > 0 && search.length < 2 && /* @__PURE__ */ jsx(
           "div",
           {
-            ref: subFlyoutRef,
+            ref: flyoutRef,
             className: `fixed ${sizeConfig.fw} rounded-2xl overflow-hidden`,
-            style: { left: subLeft, top: subTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
-            onMouseEnter: () => {
-              clearTimeout(hoverTimeout.current);
-              clearTimeout(childHoverTimeout.current);
-            },
+            style: { left: menuRef.current ? menuRef.current.getBoundingClientRect().right + 4 : menuWidth + 12, top: flyoutTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
+            onMouseEnter: () => clearTimeout(hoverTimeout.current),
             onMouseLeave: () => {
-              childHoverTimeout.current = setTimeout(() => setHoveredChild(null), 200);
+              hoverTimeout.current = setTimeout(() => {
+                setHoveredSection(null);
+                setHoveredChild(null);
+              }, 200);
             },
-            children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto overscroll-contain", style: { maxHeight: availH }, children: kids.map((child) => /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs(
-                "button",
+            children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto overscroll-contain", style: { maxHeight: availH }, children: flyoutItems.map((item) => {
+              const hasChildren = !!item.children && item.children.length > 0;
+              const isChildHovered = hoveredChild === item.to;
+              return /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  onClick: () => handleClick(child.to),
-                  className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+                  onMouseEnter: hasChildren ? (e) => {
+                    clearTimeout(childHoverTimeout.current);
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    setHoveredChildY(rect.top + rect.height / 2);
+                    setHoveredChild(item.to);
+                  } : () => {
+                    childHoverTimeout.current = setTimeout(() => setHoveredChild(null), 200);
+                  },
                   children: [
-                    iconEl(child.to),
-                    /* @__PURE__ */ jsx("span", { children: child.label })
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => handleClick(item.to),
+                        className: `${itemCls} transition-colors ${isChildHovered ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`,
+                        children: [
+                          iconEl(item.to),
+                          /* @__PURE__ */ jsx("span", { children: item.label }),
+                          hasChildren && /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 ml-auto text-gray-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })
+                        ]
+                      }
+                    ),
+                    item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
                   ]
-                }
-              ),
-              child.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
-            ] }, child.to)) })
+                },
+                item.to
+              );
+            }) })
           }
-        );
-      })()
-    ] }),
-    /* @__PURE__ */ jsx("style", { children: `
+        ),
+        (() => {
+          if (search.length >= 2 || !hoveredChild) return null;
+          const parent = flyoutItems.find((it) => it.to === hoveredChild);
+          const kids = (parent?.children ?? []).filter((c) => !c.perms || hasAnyPerm(c.perms));
+          if (!parent || kids.length === 0) return null;
+          const flyoutRect = flyoutRef.current?.getBoundingClientRect();
+          const subLeft = flyoutRect ? flyoutRect.right + 4 : 0;
+          const subEstH = kids.length * sizeConfig.itemH + 12;
+          const subH = measuredSub?.key === hoveredChild ? measuredSub.h : subEstH;
+          const subBoxH = Math.min(subH, availH);
+          let subTop = hoveredChildY - subBoxH / 2;
+          if (subTop < minTop) subTop = minTop;
+          if (subTop + subBoxH > maxBottom) subTop = Math.max(minTop, maxBottom - subBoxH);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: subFlyoutRef,
+              className: `fixed ${sizeConfig.fw} rounded-2xl overflow-hidden`,
+              style: { left: subLeft, top: subTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
+              onMouseEnter: () => {
+                clearTimeout(hoverTimeout.current);
+                clearTimeout(childHoverTimeout.current);
+              },
+              onMouseLeave: () => {
+                childHoverTimeout.current = setTimeout(() => setHoveredChild(null), 200);
+              },
+              children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto overscroll-contain", style: { maxHeight: availH }, children: kids.map((child) => /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleClick(child.to),
+                    className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+                    children: [
+                      iconEl(child.to),
+                      /* @__PURE__ */ jsx("span", { children: child.label })
+                    ]
+                  }
+                ),
+                child.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
+              ] }, child.to)) })
+            }
+          );
+        })()
+      ] }),
+      /* @__PURE__ */ jsx("style", { children: `
         @keyframes menu-in { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
         @keyframes submenu-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
       ` })
-  ] });
+    ] })
+  );
 }
 
 // src/shell/mobileShellStore.ts
@@ -5343,8 +5351,8 @@ function useTableNav(items, onSelect, onToggle, onSelectAll, onSelectRange) {
         setFocusIdx(idx);
       }
     };
-    document.addEventListener("click", handler);
-    return () => document.removeEventListener("click", handler);
+    document.addEventListener("click", handler, true);
+    return () => document.removeEventListener("click", handler, true);
   }, []);
   useEffect(() => {
     const handler = (e) => {