react-os-shell 4.12.0 → 4.14.0

package/dist/index.d.ts

@@ -32,15 +32,23 @@ interface NavItem {
     to: string;
     label: string;
     perms?: string[];
+    /** Permissions the user must hold EVERY one of, unlike `perms` which needs
+     *  only one. For an entry whose page is gated on a narrower permission than
+     *  the one that puts it in the menu: listing both in `perms` would widen the
+     *  audience (it's an OR), so the extra one goes here instead. */
+    allPerms?: string[];
     dividerAfter?: boolean;
-    /** Optional 3rd-level sub-items. Hovering the parent in <StartMenu> opens
-     *  a nested flyout; in <Sidebar> the parent becomes an inline sub-accordion. */
+    /** Optional sub-items, to any depth — a child may have children of its own.
+     *  Hovering the parent in <StartMenu> opens a nested flyout; in <Sidebar>
+     *  the parent becomes an inline sub-accordion. */
     children?: NavItem[];
 }
 interface NavSection {
     label: string;
     items: NavItem[];
     perms?: string[];
+    /** Same all-of rule as `NavItem.allPerms`, for a whole section. */
+    allPerms?: string[];
     /** Optional landing route for clicks on the section title itself
      *  (e.g. R&D's `/rd` dashboard). */
     to?: string;

package/dist/index.js

@@ -1,26 +1,26 @@
 import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-DINNWYVB.js';
 export { Breadcrumbs } from './chunk-DINNWYVB.js';
-import { subscribePomo, getPomoSnapshot } from './chunk-JROEOUJD.js';
-export { setShellTodoProvider } from './chunk-JROEOUJD.js';
+import { subscribePomo, getPomoSnapshot } from './chunk-UI43AZAK.js';
+export { setShellTodoProvider } from './chunk-UI43AZAK.js';
 import { SidebarLayout } from './chunk-YG45DAUT.js';
 export { SidebarLayout } from './chunk-YG45DAUT.js';
 export { ImageAnnotator_default as ImageAnnotator } from './chunk-QU5L5ZYM.js';
 import { toast_default } from './chunk-VENYVK3L.js';
 export { toast_default as toast } from './chunk-VENYVK3L.js';
-import { publishDesktopFolders, requestFilesTrashView, FolderGlyph, requestFilesDesktopFolderView, FileIconTile } from './chunk-H5NDQZ4A.js';
+import { publishDesktopFolders, requestFilesTrashView, FolderGlyph, requestFilesDesktopFolderView, FileIconTile } from './chunk-ZPCGIR62.js';
 import { setPdfPreview } from './chunk-BV6SQ46N.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 { useAuth } from './chunk-KILLK5UH.js';
-export { setShellAuthBridge } from './chunk-KILLK5UH.js';
+import { useAuth } from './chunk-H4IEH6FK.js';
+export { setShellAuthBridge } from './chunk-H4IEH6FK.js';
 import { withSpareRow, EditableGrid } from './chunk-DC6BYGZ6.js';
 export { EditableGrid } from './chunk-DC6BYGZ6.js';
 import './chunk-4SQU5YV6.js';
-import { APP_VERSION, VERSION } from './chunk-7Z2SUHZT.js';
-export { VERSION } from './chunk-7Z2SUHZT.js';
-import { registerModalEscapeInterceptor, useIsMobile, cancelWindowFront, requestWindowFront, useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, setPerfCollecting, drainPerfEvents, useShellPrefs, markMenuOpen, SIDEBAR_STRIP_W, forgetMaximizedWindowBoxes, ModalActions, useModalActive, client_default, LoadingSpinner, isShellApiClientConfigured, useUndo, CancelButton, setWindowPosition } from './chunk-E2EGGV2Z.js';
-export { CancelButton, ConfirmProvider, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, UndoProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, beginWindowGesture, commitExposeHighlight, confirm, confirmDestructive, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, markMenuOpen, prompt, registerModalEscapeInterceptor, requestWindowFront, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useIsActiveWindow, useLocalStoragePrefs, useModalActive, useShellPrefs, useUndo, useUndoable, useUndoableState, useWidgetSettings, useWindowDirty, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-E2EGGV2Z.js';
-import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, isReachable, sectionIcons, useShellAuth, visibleChildren } from './chunk-RVT2A2MO.js';
-export { GLASS_DIVIDER, GLASS_INPUT_BG, ShellAuthProvider, glassStyle, setShellNavIcons, useShellAuth } from './chunk-RVT2A2MO.js';
+import { APP_VERSION, VERSION } from './chunk-WDXP2Y4T.js';
+export { VERSION } from './chunk-WDXP2Y4T.js';
+import { registerModalEscapeInterceptor, useIsMobile, cancelWindowFront, requestWindowFront, useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, setPerfCollecting, drainPerfEvents, useShellPrefs, markMenuOpen, SIDEBAR_STRIP_W, forgetMaximizedWindowBoxes, ModalActions, useModalActive, client_default, LoadingSpinner, isShellApiClientConfigured, useUndo, CancelButton, setWindowPosition } from './chunk-CVVS2OJO.js';
+export { CancelButton, ConfirmProvider, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, UndoProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, beginWindowGesture, commitExposeHighlight, confirm, confirmDestructive, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, markMenuOpen, prompt, registerModalEscapeInterceptor, requestWindowFront, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useIsActiveWindow, useLocalStoragePrefs, useModalActive, useShellPrefs, useUndo, useUndoable, useUndoableState, useWidgetSettings, useWindowDirty, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-CVVS2OJO.js';
+import { glassStyle, startMenuCategories, navVisible, navSections, isSection, GLASS_INPUT_BG, navIcons, isReachable, sectionIcons, useShellAuth, visibleChildren } from './chunk-IVLDAUYM.js';
+export { GLASS_DIVIDER, GLASS_INPUT_BG, ShellAuthProvider, glassStyle, setShellNavIcons, useShellAuth } from './chunk-IVLDAUYM.js';
 import { createContext, lazy, forwardRef, useCallback, useState, useRef, useId, useEffect, useLayoutEffect, useSyncExternalStore, useMemo, useContext, isValidElement, cloneElement, Suspense, Fragment as Fragment$1, Children } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
@@ -3575,6 +3575,67 @@ function LogoutAnimation({ onComplete, subtitle }) {
     }
   );
 }
+
+// src/shell/menuPath.ts
+function openMenuLevel(path, depth, anchor) {
+  if (path.length === depth + 1 && path[depth].key === anchor.key) return path;
+  return [...path.slice(0, depth), anchor];
+}
+function closeMenuBelow(path, depth) {
+  const keep = Math.max(0, depth);
+  return path.length > keep ? path.slice(0, keep) : path;
+}
+function resolveMenuLevels(rootItems, path, childrenOf) {
+  if (path.length === 0 || rootItems.length === 0) return [];
+  const levels = [rootItems];
+  for (let i = 1; i < path.length; i++) {
+    const parent = levels[i - 1].find((item) => item.to === path[i].key);
+    const kids = parent ? childrenOf(parent) : [];
+    if (kids.length === 0) break;
+    levels.push(kids);
+  }
+  return levels;
+}
+function clampMenuTop(anchorY, height, minTop, maxBottom) {
+  const span = Math.max(0, maxBottom - minTop);
+  const h = Math.min(height, span);
+  const top = anchorY - h / 2;
+  if (top < minTop) return minTop;
+  if (top + h > maxBottom) return Math.max(minTop, maxBottom - h);
+  return top;
+}
+function menuPanelLeft(ownerLeft, ownerRight, width, viewportW, gap, preferLeft = false, margin = 8) {
+  const onRight = ownerRight + gap;
+  const onLeft = ownerLeft - gap - width;
+  const rightFits = onRight + width <= viewportW - margin;
+  const leftFits = onLeft >= margin;
+  if (preferLeft && leftFits) return { left: onLeft, flipped: true };
+  if (rightFits) return { left: onRight, flipped: false };
+  if (leftFits) return { left: onLeft, flipped: true };
+  return preferLeft ? { left: margin, flipped: true } : { left: Math.max(margin, viewportW - margin - width), flipped: false };
+}
+var PANEL_GAP = 4;
+var CLOSE_DELAY = 200;
+function MenuPanel({ left, anchorY, estHeight, minTop, maxBottom, flipped, className, style, onMouseEnter, onMouseLeave, children }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.top = `${clampMenuTop(anchorY, el.offsetHeight, minTop, maxBottom)}px`;
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-menu-panel": true,
+      className: `fixed rounded-2xl overflow-hidden ${className ?? ""}`,
+      style: { left, top: clampMenuTop(anchorY, estHeight, minTop, maxBottom), animation: `${flipped ? "submenu-in-left" : "submenu-in"} 0.1s ease-out`, ...style },
+      onMouseEnter,
+      onMouseLeave,
+      children
+    }
+  );
+}
 function StartMenu({
   open,
   onClose,
@@ -3600,55 +3661,28 @@ function StartMenu({
     virtualSections.map((v) => [v.label, v])
   );
   const { hasAnyPerm } = useAuth();
-  const footerItems = (categories.footerItems ?? []).filter((item) => !item.perms || hasAnyPerm(item.perms));
+  const footerItems = (categories.footerItems ?? []).filter((item) => navVisible(item, hasAnyPerm));
   const isMobile = useIsMobile();
-  const [hoveredSection, setHoveredSection] = useState(null);
-  const [hoveredY, setHoveredY] = useState(0);
-  const [hoveredChild, setHoveredChild] = useState(null);
-  const [hoveredChildY, setHoveredChildY] = useState(0);
+  const [openPath, setOpenPath] = useState([]);
   const [search, setSearch] = useState("");
   const [searchIdx, setSearchIdx] = useState(0);
   const menuRef = useRef(null);
-  const flyoutRef = useRef(null);
-  const subFlyoutRef = useRef(null);
-  const hoverTimeout = useRef();
-  const childHoverTimeout = useRef();
-  const [measuredFlyout, setMeasuredFlyout] = useState(null);
-  const [measuredSub, setMeasuredSub] = useState(null);
+  const closeTimer = useRef();
   useEffect(() => {
     if (!open) {
       setSearch("");
-      setHoveredSection(null);
-      setHoveredChild(null);
+      setOpenPath([]);
       setSearchIdx(0);
     }
   }, [open]);
-  useEffect(() => {
-    setHoveredChild(null);
-  }, [hoveredSection]);
+  useEffect(() => () => clearTimeout(closeTimer.current), []);
+  const deepestOpen = openPath.length > 0 ? openPath[openPath.length - 1].key : null;
   useEffect(() => {
     if (open) markMenuOpen("menu", "start");
   }, [open]);
   useEffect(() => {
-    if (hoveredSection) markMenuOpen("submenu", hoveredSection);
-  }, [hoveredSection]);
-  useEffect(() => {
-    if (hoveredChild) markMenuOpen("submenu", hoveredChild);
-  }, [hoveredChild]);
-  useLayoutEffect(() => {
-    if (!flyoutRef.current || !hoveredSection || search.length >= 2) return;
-    const h = flyoutRef.current.offsetHeight;
-    if (measuredFlyout?.key !== hoveredSection || measuredFlyout.h !== h) {
-      setMeasuredFlyout({ key: hoveredSection, h });
-    }
-  }, [hoveredSection, search, measuredFlyout]);
-  useLayoutEffect(() => {
-    if (!subFlyoutRef.current || !hoveredChild || search.length >= 2) return;
-    const h = subFlyoutRef.current.offsetHeight;
-    if (measuredSub?.key !== hoveredChild || measuredSub.h !== h) {
-      setMeasuredSub({ key: hoveredChild, h });
-    }
-  }, [hoveredChild, search, measuredSub]);
+    if (deepestOpen) markMenuOpen("submenu", deepestOpen);
+  }, [deepestOpen]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -3673,7 +3707,7 @@ function StartMenu({
   if (isMobile) {
     const allItems = [];
     const pushItem = (it, sectionLabel) => {
-      if (it.perms && !hasAnyPerm(it.perms)) return;
+      if (!navVisible(it, hasAnyPerm)) return;
       if (!isReachable(it, hasAnyPerm)) return;
       allItems.push({ item: it, sectionLabel });
       for (const c of visibleChildren(it, hasAnyPerm)) pushItem(c, it.label);
@@ -3681,7 +3715,7 @@ function StartMenu({
     for (const entry of navSections2) {
       if (isSection(entry)) {
         const sec = entry;
-        if (sec.perms && !hasAnyPerm(sec.perms)) continue;
+        if (!navVisible(sec, hasAnyPerm)) continue;
         for (const it of sec.items) pushItem(it, sec.label);
       } else {
         pushItem(entry);
@@ -3740,10 +3774,11 @@ function StartMenu({
   const systemSections = navSections2.filter((item) => isSection(item) && systemLabels.has(item.label));
   const footerSections = navSections2.filter((item) => isSection(item) && footerLabels.has(item.label));
   const hasAppsGroup = topItems.length > 0 || systemSections.length > 0 || virtualSections.length > 0;
-  const getVisibleItems = (section) => section.items.filter((item) => !item.perms || hasAnyPerm(item.perms));
+  const getVisibleItems = (section) => section.items.filter((item) => navVisible(item, hasAnyPerm));
   const visibleChildren2 = (item) => visibleChildren(item, hasAnyPerm);
+  const submenuItems = (item) => visibleChildren2(item).filter((child) => isReachable(child, hasAnyPerm));
   const matchTree = (it, sectionLabel) => {
-    if (it.perms && !hasAnyPerm(it.perms)) return [];
+    if (!navVisible(it, hasAnyPerm)) return [];
     if (!isReachable(it, hasAnyPerm)) return [];
     const kids = visibleChildren2(it);
     const hits = [];
@@ -3774,78 +3809,69 @@ function StartMenu({
     if (icon && isValidElement(icon)) return cloneElement(icon, { className: "h-4 w-4" });
     return null;
   };
+  const hoveredSection = openPath.length > 0 ? openPath[0].key : null;
   const hoveredVirtual = hoveredSection ? virtualByLabel[hoveredSection] : void 0;
   const hoveredData = hoveredVirtual ? null : hoveredSection ? [...erpSections, ...systemSections, ...footerSections].find((s) => s.label === hoveredSection) : null;
   const flyoutItems = (hoveredVirtual ? hoveredVirtual.items : hoveredData ? getVisibleItems(hoveredData) : []).filter((item) => isReachable(item, hasAnyPerm));
   const menuDensity = typeof document !== "undefined" ? getComputedStyle(document.documentElement).getPropertyValue("--menu-density")?.trim() || "normal" : "normal";
   const density = menuDensity === "tight" || menuDensity === "large" ? menuDensity : "normal";
   const sizeConfigByDensity = {
-    tight: { small: { w: "w-52", fw: "w-44", text: "text-xs", py: "py-1", px: "px-3", mw: 208, itemH: 24 }, medium: { w: "w-56", fw: "w-48", text: "text-xs", py: "py-1", px: "px-3", mw: 224, itemH: 26 }, large: { w: "w-64", fw: "w-52", text: "text-sm", py: "py-1.5", px: "px-3", mw: 256, itemH: 30 } },
-    normal: { small: { w: "w-56", fw: "w-48", text: "text-xs", py: "py-1.5", px: "px-3", mw: 224, itemH: 30 }, medium: { w: "w-64", fw: "w-56", text: "text-sm", py: "py-1.5", px: "px-4", mw: 256, itemH: 32 }, large: { w: "w-72", fw: "w-60", text: "text-sm", py: "py-2", px: "px-4", mw: 288, itemH: 36 } },
-    large: { small: { w: "w-56", fw: "w-48", text: "text-xs", py: "py-2", px: "px-3", mw: 224, itemH: 32 }, medium: { w: "w-64", fw: "w-56", text: "text-sm", py: "py-2", px: "px-4", mw: 256, itemH: 36 }, large: { w: "w-72", fw: "w-60", text: "text-sm", py: "py-2", px: "px-4", mw: 288, itemH: 36 } }
+    tight: { small: { w: "w-52", fw: "w-44", fwPx: 176, text: "text-xs", py: "py-1", px: "px-3", mw: 208, itemH: 24 }, medium: { w: "w-56", fw: "w-48", fwPx: 192, text: "text-xs", py: "py-1", px: "px-3", mw: 224, itemH: 26 }, large: { w: "w-64", fw: "w-52", fwPx: 208, text: "text-sm", py: "py-1.5", px: "px-3", mw: 256, itemH: 30 } },
+    normal: { small: { w: "w-56", fw: "w-48", fwPx: 192, text: "text-xs", py: "py-1.5", px: "px-3", mw: 224, itemH: 30 }, medium: { w: "w-64", fw: "w-56", fwPx: 224, text: "text-sm", py: "py-1.5", px: "px-4", mw: 256, itemH: 32 }, large: { w: "w-72", fw: "w-60", fwPx: 240, text: "text-sm", py: "py-2", px: "px-4", mw: 288, itemH: 36 } },
+    large: { small: { w: "w-56", fw: "w-48", fwPx: 192, text: "text-xs", py: "py-2", px: "px-3", mw: 224, itemH: 32 }, medium: { w: "w-64", fw: "w-56", fwPx: 224, text: "text-sm", py: "py-2", px: "px-4", mw: 256, itemH: 36 }, large: { w: "w-72", fw: "w-60", fwPx: 240, text: "text-sm", py: "py-2", px: "px-4", mw: 288, itemH: 36 } }
   };
   const sizeConfig = sizeConfigByDensity[density][size];
   const menuGlass = glassStyle();
   const itemCls = `w-full flex items-center gap-2 rounded-lg ${sizeConfig.px} ${sizeConfig.py} ${sizeConfig.text}`;
-  const flyoutEstH = flyoutItems.length * sizeConfig.itemH + 12;
-  const flyoutH = measuredFlyout?.key === hoveredSection ? measuredFlyout.h : flyoutEstH;
-  const menuWidth = sizeConfig.mw;
   const viewportH = typeof window !== "undefined" ? window.innerHeight : 800;
+  const viewportW = typeof window !== "undefined" ? window.innerWidth : 1280;
   const minTop = (taskbarPosition === "top" ? taskbarH : 0) + 8;
   const maxBottom = viewportH - (taskbarPosition === "bottom" ? taskbarH : 0) - 8;
   const availH = Math.max(0, maxBottom - minTop);
-  const flyoutBoxH = Math.min(flyoutH, availH);
-  let flyoutTop = hoveredY - flyoutBoxH / 2;
-  if (flyoutTop < minTop) flyoutTop = minTop;
-  if (flyoutTop + flyoutBoxH > maxBottom) flyoutTop = Math.max(minTop, maxBottom - flyoutBoxH);
-  const handleSectionHover = (label, e) => {
-    clearTimeout(hoverTimeout.current);
-    const rect = e.currentTarget.getBoundingClientRect();
-    setHoveredY(rect.top + rect.height / 2);
-    setHoveredSection(label);
+  const levels = resolveMenuLevels(flyoutItems, openPath, submenuItems);
+  const cancelClose = () => clearTimeout(closeTimer.current);
+  const nextPanelLeft = (depth, row) => {
+    const owner = row.closest("[data-menu-panel]");
+    if (!owner) return { left: 0, flipped: false };
+    const ownerLeft = depth === 0 ? owner.getBoundingClientRect().left : openPath[depth - 1]?.left ?? 0;
+    const ownerRight = depth === 0 ? owner.getBoundingClientRect().right : ownerLeft + owner.offsetWidth;
+    const preferLeft = depth > 0 && (openPath[depth - 1]?.flipped ?? false);
+    return menuPanelLeft(ownerLeft, ownerRight, sizeConfig.fwPx, viewportW, PANEL_GAP, preferLeft);
+  };
+  const openSubmenu = (depth, key, e) => {
+    cancelClose();
+    const row = e.currentTarget;
+    const rect = row.getBoundingClientRect();
+    const anchor = { key, y: rect.top + rect.height / 2, ...nextPanelLeft(depth, row) };
+    setOpenPath((prev) => openMenuLevel(prev, depth, anchor));
   };
+  const scheduleClose = (depth) => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpenPath((prev) => closeMenuBelow(prev, depth)), CLOSE_DELAY);
+  };
+  const chevron = /* @__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" }) });
   const renderSection = (section, isErp) => {
-    if (section.perms && !hasAnyPerm(section.perms)) return null;
+    if (!navVisible(section, hasAnyPerm)) return null;
     const items = getVisibleItems(section);
     if (items.length === 0) return null;
     const isHovered = hoveredSection === section.label;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        onMouseEnter: (e) => handleSectionHover(section.label, e),
-        onMouseLeave: () => {
-          hoverTimeout.current = setTimeout(() => setHoveredSection(null), 200);
-        },
-        children: [
-          /* @__PURE__ */ jsxs("button", { className: `${itemCls} transition-colors ${isHovered ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`, children: [
-            secIcon(section.label),
-            /* @__PURE__ */ jsx("span", { className: isErp ? "font-medium" : "", children: section.label }),
-            /* @__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" }) })
-          ] }),
-          section.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
-        ]
-      },
-      section.label
-    );
+    return /* @__PURE__ */ jsxs("div", { onMouseEnter: (e) => openSubmenu(0, section.label, e), children: [
+      /* @__PURE__ */ jsxs("button", { className: `${itemCls} transition-colors ${isHovered ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`, children: [
+        secIcon(section.label),
+        /* @__PURE__ */ jsx("span", { className: isErp ? "font-medium" : "", children: section.label }),
+        chevron
+      ] }),
+      section.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
+    ] }, section.label);
   };
   const renderVirtualSection = (v) => {
     if (v.items.length === 0) return null;
     const isHovered = hoveredSection === v.label;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        onMouseEnter: (e) => handleSectionHover(v.label, e),
-        onMouseLeave: () => {
-          hoverTimeout.current = setTimeout(() => setHoveredSection(null), 200);
-        },
-        children: /* @__PURE__ */ jsxs("button", { className: `${itemCls} transition-colors ${isHovered ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`, children: [
-          v.icon,
-          /* @__PURE__ */ jsx("span", { children: v.label }),
-          /* @__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" }) })
-        ] })
-      },
-      v.label
-    );
+    return /* @__PURE__ */ jsx("div", { onMouseEnter: (e) => openSubmenu(0, v.label, e), children: /* @__PURE__ */ jsxs("button", { className: `${itemCls} transition-colors ${isHovered ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`, children: [
+      v.icon,
+      /* @__PURE__ */ jsx("span", { children: v.label }),
+      chevron
+    ] }) }, v.label);
   };
   return (
     /* z-[1100]: sit above the entire window stack — normal windows climb to
@@ -3859,40 +3885,50 @@ function StartMenu({
         /* @__PURE__ */ jsxs(
           "div",
           {
+            "data-menu-panel": true,
             className: `${sizeConfig.w} rounded-2xl flex ${isVertical ? "flex-col-reverse" : "flex-col"} overflow-hidden`,
             style: { animation: "menu-in 0.15s ease-out", ...menuGlass },
+            onMouseEnter: () => scheduleClose(0),
+            onMouseLeave: () => scheduleClose(0),
             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);
-                        }
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `px-3 ${isVertical ? "pb-3 pt-2 border-t border-white/20" : "pt-3 pb-2"}`,
+                  onMouseEnter: () => scheduleClose(0),
+                  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);
+                          setOpenPath([]);
+                          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
                       }
-                    },
-                    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",
                 {
@@ -3912,6 +3948,7 @@ function StartMenu({
                     "button",
                     {
                       onClick: () => handleClick(item.to),
+                      onMouseEnter: () => scheduleClose(0),
                       className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
                       children: [
                         iconEl(item.to),
@@ -3924,7 +3961,7 @@ function StartMenu({
                   (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: [
+                  topItems.map((item) => /* @__PURE__ */ jsxs("div", { onMouseEnter: () => scheduleClose(0), children: [
                     /* @__PURE__ */ jsxs(
                       "button",
                       {
@@ -3942,7 +3979,7 @@ function StartMenu({
                   virtualSections.map((v) => renderVirtualSection(v))
                 ] }),
                 !isVertical && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  topItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+                  topItems.map((item) => /* @__PURE__ */ jsxs("div", { onMouseEnter: () => scheduleClose(0), children: [
                     /* @__PURE__ */ jsxs(
                       "button",
                       {
@@ -3966,6 +4003,7 @@ function StartMenu({
                     "button",
                     {
                       onClick: () => handleClick(item.to),
+                      onMouseEnter: () => scheduleClose(0),
                       className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
                       children: [
                         iconEl(item.to),
@@ -3976,7 +4014,7 @@ function StartMenu({
                   ))
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: `${isVertical ? "border-b" : "border-t"} border-white/20 p-1`, children: /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx("div", { className: `${isVertical ? "border-b" : "border-t"} border-white/20 p-1`, onMouseEnter: () => scheduleClose(0), children: /* @__PURE__ */ jsxs(
                 "div",
                 {
                   onClick: () => handleClick("/profile"),
@@ -4003,43 +4041,36 @@ function StartMenu({
             ]
           }
         ),
-        hoveredSection && flyoutItems.length > 0 && search.length < 2 && /* @__PURE__ */ jsx(
-          "div",
+        search.length < 2 && levels.map((items, i) => /* @__PURE__ */ jsx(
+          MenuPanel,
           {
-            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 = visibleChildren2(item).length > 0;
-              const isChildHovered = hoveredChild === item.to;
+            left: openPath[i].left,
+            anchorY: openPath[i].y,
+            estHeight: items.length * sizeConfig.itemH + 12,
+            minTop,
+            maxBottom,
+            flipped: openPath[i].flipped,
+            className: sizeConfig.fw,
+            style: menuGlass,
+            onMouseEnter: () => scheduleClose(i + 1),
+            onMouseLeave: () => scheduleClose(i),
+            children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto overscroll-contain", style: { maxHeight: availH }, children: items.map((item) => {
+              const kids = submenuItems(item);
+              const isOpen = openPath[i + 1]?.key === 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);
-                  },
+                  onMouseEnter: kids.length > 0 ? (e) => openSubmenu(i + 1, item.to, e) : () => scheduleClose(i + 1),
                   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"}`,
+                        onClick: kids.length > 0 ? (e) => openSubmenu(i + 1, item.to, e) : () => handleClick(item.to),
+                        className: `${itemCls} transition-colors ${isOpen ? "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" }) })
+                          kids.length > 0 && chevron
                         ]
                       }
                     ),
@@ -4049,55 +4080,14 @@ function StartMenu({
                 item.to
               );
             }) })
-          }
-        ),
-        (() => {
-          if (search.length >= 2 || !hoveredChild) return null;
-          const parent = flyoutItems.find((it) => it.to === hoveredChild);
-          const kids = parent ? visibleChildren2(parent) : [];
-          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)) })
-            }
-          );
-        })()
+          },
+          `${i}:${openPath[i].key}`
+        ))
       ] }),
       /* @__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); } }
+        @keyframes submenu-in-left { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: translateX(0); } }
       ` })
     ] })
   );
@@ -4144,7 +4134,7 @@ function MobileAppLanding({
     }
   );
 }
-var Sidebar = lazy(() => import('./Sidebar-ITLRERXE.js'));
+var Sidebar = lazy(() => import('./Sidebar-IMACKSHS.js'));
 function useFavorites(wallpapers) {
   const { prefs, save } = useShellPrefs();
   const favorites = prefs.favorite_pages || [];