react-os-shell 0.3.22 → 0.5.0

package/dist/index.js

@@ -6,21 +6,21 @@ export { setShellMailServer, useMailAuth } from './chunk-VBFB3ZIN.js';
 import { subscribePomo, getPomoSnapshot } from './chunk-MK3HLUO4.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
-import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-LZCEK7JF.js';
-import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-NRT2CU5Q.js';
+import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-K5ZMTKZC.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-BRWWUKPE.js';
 import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-export { EditableGrid } from './chunk-6YY6A6SV.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, ModalActions, useIsMobile, useModalActive, client_default, LoadingSpinner, WINDOW_REGISTRY, isPageEntry, ThumbCard, activateModal } from './chunk-GI7ABQPU.js';
-export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-GI7ABQPU.js';
+export { EditableGrid } from './chunk-6FNC3APL.js';
+import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, ModalActions, useIsMobile, useModalActive, client_default, LoadingSpinner, WINDOW_REGISTRY, isPageEntry, ThumbCard, activateModal } from './chunk-2TNV3ODP.js';
+export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-2TNV3ODP.js';
 import { confirm } from './chunk-PLGHQ7QW.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-PLGHQ7QW.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
-import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-SSA762W5.js';
-export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-SSA762W5.js';
+import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-YJONGQLG.js';
+export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-YJONGQLG.js';
 import { createContext, lazy, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useMemo, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
@@ -915,7 +915,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.3.22" ;
+var VERSION = "0.5.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -2895,17 +2895,25 @@ function StartMenu({
   const isMobile = useIsMobile();
   const [hoveredSection, setHoveredSection] = useState(null);
   const [hoveredY, setHoveredY] = useState(0);
+  const [hoveredChild, setHoveredChild] = useState(null);
+  const [hoveredChildY, setHoveredChildY] = useState(0);
   const [search, setSearch] = useState("");
   const [searchIdx, setSearchIdx] = useState(0);
   const menuRef = useRef(null);
+  const flyoutRef = useRef(null);
   const hoverTimeout = useRef();
+  const childHoverTimeout = useRef();
   useEffect(() => {
     if (!open) {
       setSearch("");
       setHoveredSection(null);
+      setHoveredChild(null);
       setSearchIdx(0);
     }
   }, [open]);
+  useEffect(() => {
+    setHoveredChild(null);
+  }, [hoveredSection]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -2929,18 +2937,20 @@ function StartMenu({
   };
   if (isMobile) {
     const allItems = [];
+    const pushItem = (it, sectionLabel) => {
+      if (it.perms && !hasAnyPerm(it.perms)) return;
+      allItems.push({ item: it, sectionLabel });
+      if (it.children) {
+        for (const c of it.children) pushItem(c, it.label);
+      }
+    };
     for (const entry of navSections2) {
       if (isSection(entry)) {
         const sec = entry;
         if (sec.perms && !hasAnyPerm(sec.perms)) continue;
-        for (const it of sec.items) {
-          if (it.perms && !hasAnyPerm(it.perms)) continue;
-          allItems.push({ item: it, sectionLabel: sec.label });
-        }
+        for (const it of sec.items) pushItem(it, sec.label);
       } else {
-        const it = entry;
-        if (it.perms && !hasAnyPerm(it.perms)) continue;
-        allItems.push({ item: it });
+        pushItem(entry);
       }
     }
     const filtered = search.length >= 1 ? allItems.filter(({ item }) => item.label.toLowerCase().includes(search.toLowerCase())) : allItems;
@@ -2994,11 +3004,23 @@ function StartMenu({
   const erpSections = navSections2.filter((item) => isSection(item) && erpLabels.has(item.label));
   const systemSections = navSections2.filter((item) => isSection(item) && systemLabels.has(item.label));
   const getVisibleItems = (section) => section.items.filter((item) => !item.perms || hasAnyPerm(item.perms));
+  const matchTree = (it, sectionLabel) => {
+    if (it.perms && !hasAnyPerm(it.perms)) return [];
+    const hits = [];
+    if (it.label.toLowerCase().includes(search.toLowerCase())) {
+      hits.push({ ...it, section: sectionLabel });
+    }
+    if (it.children) {
+      for (const c of it.children) hits.push(...matchTree(c, it.label));
+    }
+    return hits;
+  };
   const searchResults = search.length >= 2 ? navSections2.flatMap((item) => {
     if (isSection(item)) {
-      return item.items.filter((i) => (!i.perms || hasAnyPerm(i.perms)) && i.label.toLowerCase().includes(search.toLowerCase())).map((i) => ({ ...i, section: item.label }));
+      const sec = item;
+      return sec.items.flatMap((i) => matchTree(i, sec.label));
     }
-    return item.label.toLowerCase().includes(search.toLowerCase()) ? [{ ...item, section: "" }] : [];
+    return matchTree(item, "");
   }) : [];
   const posStyle = taskbarPosition === "top" ? { top: taskbarH + 8, left: 8 } : taskbarPosition === "left" ? { top: 8, left: taskbarW + 8 } : taskbarPosition === "right" ? { top: 8, right: taskbarW + 8 } : { bottom: taskbarH + 8, left: 8 };
   const iconEl = (path) => {
@@ -3204,28 +3226,91 @@ function StartMenu({
       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), 200);
+            hoverTimeout.current = setTimeout(() => {
+              setHoveredSection(null);
+              setHoveredChild(null);
+            }, 200);
           },
-          children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1", children: flyoutItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs(
-              "button",
+          children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1", children: flyoutItems.map((item) => {
+            const hasChildren = !!item.children && item.children.length > 0;
+            const isChildHovered = hoveredChild === item.to;
+            return /* @__PURE__ */ jsxs(
+              "div",
               {
-                onClick: () => handleClick(item.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(item.to),
-                  /* @__PURE__ */ jsx("span", { children: item.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" })
                 ]
-              }
-            ),
-            item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
-          ] }, item.to)) })
+              },
+              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 subH = kids.length * sizeConfig.itemH + 12;
+        let subTop = hoveredChildY - subH / 2;
+        if (subTop < minTop) subTop = minTop;
+        if (subTop + subH > maxBottom) subTop = maxBottom - subH;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            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", 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); } }
@@ -3996,7 +4081,7 @@ function MobileBottomNav({
     }
   );
 }
-var Sidebar = lazy(() => import('./Sidebar-4V6NQROQ.js'));
+var Sidebar = lazy(() => import('./Sidebar-SHNDADVO.js'));
 function useFavorites(wallpapers) {
   const { prefs, save } = useShellPrefs();
   const favorites = prefs.favorite_pages || [];
@@ -4614,7 +4699,8 @@ function previewColor(resolved, light, dark, pink, green, grey, blue) {
   if (resolved === "blue") return blue ?? light;
   return light;
 }
-function Customization() {
+function Customization({ omit } = {}) {
+  const omitSet = new Set(omit ?? []);
   const host = useDesktopHost();
   const WALLPAPERS = host.wallpapers && host.wallpapers.length > 0 ? host.wallpapers : DEFAULT_WALLPAPERS;
   const { prefs, save } = useShellPrefs();
@@ -4951,7 +5037,7 @@ function Customization() {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
+    !omitSet.has("behavior") && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Behavior" }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -5003,7 +5089,7 @@ function Customization() {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
+    !omitSet.has("desktop") && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Desktop" }),
       /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
         /* @__PURE__ */ jsx(
@@ -5083,6 +5169,205 @@ function SoundSettings() {
     ] }) }) })
   ] });
 }
+var WINDOW_POSITIONS = [
+  { key: "center", label: "Center" },
+  { key: "cascade", label: "Cascade" }
+];
+var DESKTOP_DBLCLICK = [
+  { key: "deactivate", label: "Deactivate all" },
+  { key: "nothing", label: "Do nothing" }
+];
+var WINDOW_SIZES = [
+  { key: "small", label: "Small" },
+  { key: "medium", label: "Medium" },
+  { key: "large", label: "Large" },
+  { key: "maximized", label: "Maximized" }
+];
+function BehaviorPanel() {
+  const { prefs, save } = useShellPrefs();
+  const savePref = (key, value) => save({ [key]: value });
+  const windowPosition = prefs.window_position || "cascade";
+  const desktopDblclick = prefs.desktop_dblclick || "deactivate";
+  const defaultWindowSize = prefs.default_window_size || "large";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Behavior" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(
+          Row,
+          {
+            label: "New window position",
+            options: WINDOW_POSITIONS,
+            value: windowPosition,
+            onChange: (v) => savePref("window_position", v)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Row,
+          {
+            label: "Double-click desktop",
+            options: DESKTOP_DBLCLICK,
+            value: desktopDblclick,
+            onChange: (v) => savePref("desktop_dblclick", v)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Row,
+          {
+            label: "Default window size",
+            options: WINDOW_SIZES,
+            value: defaultWindowSize,
+            onChange: (v) => savePref("default_window_size", v)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Desktop" }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: prefs.show_desktop_version ?? true,
+            onChange: (e) => savePref("show_desktop_version", e.target.checked),
+            className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Show version on desktop" })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer mt-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: prefs.auto_fullscreen ?? false,
+            onChange: (e) => savePref("auto_fullscreen", e.target.checked),
+            className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Enter full screen mode automatically" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 ml-1", children: "\u2014 on login" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ModalActions, { children: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Changes are saved automatically" }) })
+  ] });
+}
+function Row({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-40 shrink-0", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: options.map((o) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(o.key),
+        className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${value === o.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
+        children: o.label
+      },
+      o.key
+    )) })
+  ] });
+}
+function SoundsPanel() {
+  const [enabled, setEnabled] = useState(soundsEnabled());
+  const [config, setConfig] = useState(getSoundConfig());
+  const update = (soundType, packKey) => {
+    setSoundForType(soundType, packKey);
+    setConfig(getSoundConfig());
+    previewSound(packKey, soundType);
+  };
+  const applyAll = (packKey) => {
+    setAllSounds(packKey);
+    setConfig(getSoundConfig());
+    previewSound(packKey, "success");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Sounds" }),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: enabled,
+          onChange: (e) => {
+            localStorage.setItem("erp_sounds", String(e.target.checked));
+            setEnabled(e.target.checked);
+          },
+          className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Sound effects" })
+    ] }),
+    enabled && /* @__PURE__ */ jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-[11px]", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-gray-50", children: [
+        /* @__PURE__ */ jsx("th", { className: "px-2 py-1.5 text-left font-medium text-gray-500 w-24" }),
+        SOUND_PACK_KEYS.map((key) => /* @__PURE__ */ jsx("th", { className: "px-1 py-1.5 text-center", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => applyAll(key),
+            className: "font-medium text-gray-500 hover:text-blue-600 transition-colors",
+            children: SOUND_PACKS[key].label
+          }
+        ) }, key))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100", children: SOUND_TYPES.map((soundType) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5 text-gray-700 font-medium", children: SOUND_TYPE_LABELS[soundType] }),
+        SOUND_PACK_KEYS.map((packKey) => /* @__PURE__ */ jsx("td", { className: "px-1 py-1.5 text-center", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => update(soundType, packKey),
+            "aria-label": `${SOUND_TYPE_LABELS[soundType]} \u2014 ${SOUND_PACKS[packKey].label}`,
+            "aria-pressed": config[soundType] === packKey,
+            className: `w-4 h-4 rounded-full border-2 transition-colors ${config[soundType] === packKey ? "bg-blue-600 border-blue-600" : "border-gray-300 hover:border-blue-400"}`
+          }
+        ) }, packKey))
+      ] }, soundType)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(ModalActions, { children: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Changes are saved automatically" }) })
+  ] });
+}
+function SystemPreferences({
+  sections: sections2,
+  defaultSelected,
+  className
+}) {
+  const initial = defaultSelected && sections2.some((s) => s.key === defaultSelected) ? defaultSelected : sections2[0]?.key ?? "";
+  const [selected, setSelected] = useState(initial);
+  const active = sections2.find((s) => s.key === selected) ?? sections2[0];
+  return /* @__PURE__ */ jsxs("div", { className: `flex h-full gap-4 px-4 py-3 min-h-0 ${className ?? ""}`.trim(), children: [
+    /* @__PURE__ */ jsx("aside", { className: "w-60 shrink-0 flex flex-col bg-white rounded-lg shadow overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-1", children: sections2.map((item) => {
+      const isActive = item.key === selected;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSelected(item.key),
+          className: `w-full text-left px-3 py-2.5 text-sm transition-colors flex items-start gap-2.5 ${isActive ? "bg-blue-50 text-blue-700" : "hover:bg-gray-50 text-gray-700"}`,
+          children: [
+            item.icon && /* @__PURE__ */ jsx("span", { className: `mt-0.5 ${isActive ? "text-blue-600" : "text-gray-400"}`, children: item.icon }),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `block ${isActive ? "font-semibold text-blue-700" : "font-medium text-gray-800"}`,
+                  children: item.label
+                }
+              ),
+              item.description && /* @__PURE__ */ jsx("span", { className: "block text-[11px] text-gray-500 mt-0.5", children: item.description })
+            ] })
+          ]
+        },
+        item.key
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx("main", { className: "flex-1 min-w-0 flex flex-col min-h-0 overflow-auto pr-2", children: active?.render() })
+  ] });
+}
 function useTableNav(items, onSelect, onToggle, onSelectAll, onSelectRange) {
   const [focusIdx, setFocusIdx] = useState(-1);
   const itemsRef = useRef(items);
@@ -5799,6 +6084,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, EntityList, GlobalSearch, Layout, ListFooter, MOD, MailConnectModal, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, StartMenu, StatusBadge, StatusBadgeProvider, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, EntityList, GlobalSearch, Layout, ListFooter, MOD, MailConnectModal, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map