react-os-shell 0.13.2 → 1.0.0

package/dist/index.js

@@ -1,18 +1,21 @@
 import { formatDate } from './chunk-Y4QYGQKS.js';
 export { formatDate } from './chunk-Y4QYGQKS.js';
-import { subscribePomo, getPomoSnapshot } from './chunk-MK3HLUO4.js';
-export { setShellTodoProvider } from './chunk-QTJ2CHJX.js';
+import { subscribePomo, getPomoSnapshot } from './chunk-5X5LQNOX.js';
+export { setShellTodoProvider } from './chunk-5X5LQNOX.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
-import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-3SIZAHR6.js';
+import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-4R4SXMDV.js';
+export { Breadcrumbs } from './chunk-4R4SXMDV.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-DMSHU2HJ.js';
+import { setPdfPreview } from './chunk-K354WXU5.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-66GIT3PM.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, WINDOW_REGISTRY, isPageEntry, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-IMFUTSYY.js';
-export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-IMFUTSYY.js';
+export { EditableGrid } from './chunk-6DDVFASF.js';
+import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, WINDOW_REGISTRY, isPageEntry, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-4RXDOSKZ.js';
+export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-4RXDOSKZ.js';
 import { confirm } from './chunk-UBN4IUDE.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-UBN4IUDE.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
@@ -560,86 +563,37 @@ function HelpCenter({
     ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: loading ? "Loading\u2026" : "Pick a help article from the left." }) }) })
   ] });
 }
-var clamp = (n, lo, hi) => Math.min(Math.max(n, lo), hi);
-function SidebarLayout({
-  sidebar,
-  children,
-  side = "left",
-  storageKey,
-  defaultWidth = 256,
-  minWidth = 180,
-  maxWidth = 480,
-  className = "",
-  sidebarClassName = side === "right" ? "border-l border-gray-200 bg-gray-50" : "border-r border-gray-200 bg-gray-50",
-  contentClassName = "bg-white"
-}) {
-  const sideRight = side === "right";
-  const [width, setWidth] = useState(() => {
-    if (storageKey && typeof window !== "undefined") {
-      const saved = window.localStorage.getItem(storageKey);
-      const n = saved ? parseInt(saved, 10) : NaN;
-      if (!Number.isNaN(n)) return clamp(n, minWidth, maxWidth);
+function TopNav({ items, activeKey, onSelect, brand, actions, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex h-12 shrink-0 items-stretch gap-1 border-b border-gray-200 bg-white px-3 ${className ?? ""}`,
+      children: [
+        brand && /* @__PURE__ */ jsx("div", { className: "mr-1 flex items-center gap-2 pr-3 font-semibold text-gray-900", children: brand }),
+        /* @__PURE__ */ jsx("nav", { className: "flex items-stretch gap-0.5", children: items.map((item) => {
+          const active = item.key === activeKey;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: item.disabled,
+              "aria-current": active ? "page" : void 0,
+              onClick: () => !item.disabled && onSelect?.(item.key),
+              className: `relative inline-flex items-center gap-1.5 px-3 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${active ? "text-blue-600" : "text-gray-600 hover:text-gray-900"}`,
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: item.label }),
+                item.badge != null && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-gray-100 px-1.5 text-[11px] font-semibold leading-5 text-gray-600", children: item.badge }),
+                active && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-blue-600", "aria-hidden": true })
+              ]
+            },
+            item.key
+          );
+        }) }),
+        actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
+      ]
     }
-    return clamp(defaultWidth, minWidth, maxWidth);
-  });
-  const dragRef = useRef(null);
-  const onMove = useCallback((e) => {
-    const d = dragRef.current;
-    if (!d) return;
-    const delta = (e.clientX - d.startX) * (sideRight ? -1 : 1);
-    setWidth(clamp(d.startWidth + delta, minWidth, maxWidth));
-  }, [minWidth, maxWidth, sideRight]);
-  const onUp = useCallback(() => {
-    dragRef.current = null;
-    window.removeEventListener("pointermove", onMove);
-    window.removeEventListener("pointerup", onUp);
-    document.body.style.removeProperty("cursor");
-    document.body.style.removeProperty("user-select");
-  }, [onMove]);
-  const startDrag = useCallback((e) => {
-    e.preventDefault();
-    dragRef.current = { startX: e.clientX, startWidth: width };
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-  }, [width, onMove, onUp]);
-  useEffect(() => {
-    if (!storageKey) return;
-    const id = window.setTimeout(() => {
-      try {
-        window.localStorage.setItem(storageKey, String(Math.round(width)));
-      } catch {
-      }
-    }, 200);
-    return () => window.clearTimeout(id);
-  }, [width, storageKey]);
-  useEffect(() => () => {
-    window.removeEventListener("pointermove", onMove);
-    window.removeEventListener("pointerup", onUp);
-  }, [onMove, onUp]);
-  const edge = sideRight ? "left-0" : "right-0";
-  const sidebarPane = /* @__PURE__ */ jsxs("div", { className: "relative flex h-full shrink-0 flex-col", style: { width }, children: [
-    /* @__PURE__ */ jsx("div", { className: `flex h-full flex-col overflow-y-auto ${sidebarClassName}`, children: sidebar }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        onPointerDown: startDrag,
-        onDoubleClick: () => setWidth(clamp(defaultWidth, minWidth, maxWidth)),
-        title: "Drag to resize \xB7 double-click to reset",
-        className: `group/resize absolute inset-y-0 ${edge} z-10 w-2 cursor-col-resize`,
-        children: /* @__PURE__ */ jsx("div", { className: `absolute inset-y-0 ${edge} w-px bg-transparent transition-colors group-hover/resize:bg-[var(--accent-500,#3b82f6)]` })
-      }
-    )
-  ] });
-  const contentPane = /* @__PURE__ */ jsx("div", { className: `flex min-w-0 flex-1 flex-col ${contentClassName}`, children });
-  return /* @__PURE__ */ jsx("div", { className: `flex h-full w-full overflow-hidden ${className}`, children: sideRight ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    contentPane,
-    sidebarPane
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    sidebarPane,
-    contentPane
-  ] }) });
+  );
 }
 function timeAgo(dateStr) {
   const diff = Date.now() - new Date(dateStr).getTime();
@@ -1481,7 +1435,7 @@ function WidgetManager({ open, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.13.2" ;
+var VERSION = "1.0.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -2805,7 +2759,7 @@ function Desktop({ profile }) {
             openPage("/settings/customization");
           }, children: [
             /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42" }) }),
-            "Customization"
+            "Preferences"
           ] }),
           /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => {
             setContextMenu(null);
@@ -4298,7 +4252,7 @@ function MobileProfileSheet({ profile, user, onClose, onNavigate, onLogout }) {
                     /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" }),
                     /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
                   ] }) }),
-                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-gray-800", children: "Customization" }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-gray-800", children: "Preferences" }),
                   /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 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: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })
                 ]
               }
@@ -5070,8 +5024,9 @@ function previewColor(resolved, light, dark, pink, green, grey, blue) {
   if (resolved === "blue") return blue ?? light;
   return light;
 }
-function Customization({ omit } = {}) {
+function Customization({ omit, section } = {}) {
   const omitSet = new Set(omit ?? []);
+  const inSection = (group) => section === void 0 || section === group;
   const host = useDesktopHost();
   const WALLPAPERS = host.wallpapers && host.wallpapers.length > 0 ? host.wallpapers : DEFAULT_WALLPAPERS;
   const { prefs, save } = useShellPrefs();
@@ -5123,292 +5078,296 @@ function Customization({ omit } = {}) {
   const headerBg = previewColor(resolved, "bg-gray-100", "bg-[#313244]", "bg-pink-50", "bg-green-50", "bg-gray-300", "bg-blue-100");
   const accentBg = previewColor(resolved, "bg-blue-600", "bg-blue-500", "bg-pink-600", "bg-green-600", "bg-gray-700", "bg-blue-700");
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-gray-200 overflow-hidden", style: { width: 480 }, children: /* @__PURE__ */ jsxs("div", { className: "relative", style: { height: 300 }, children: [
-      isColor ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { backgroundColor: desktopBg } }) : /* @__PURE__ */ jsx("img", { src: desktopBg, alt: "", className: "absolute inset-0 w-full h-full object-cover" }),
-      /* @__PURE__ */ jsxs("div", { className: `absolute left-0 right-0 bottom-0 h-4 ${taskbarBg} border-t border-gray-200/50 flex items-center px-2 gap-1`, style: { opacity: prevTaskbarOpacity }, children: [
-        /* @__PURE__ */ jsx("div", { className: `h-2 w-8 rounded-sm ${accentBg}` }),
-        /* @__PURE__ */ jsx("div", { className: `h-2 w-6 rounded-sm ${iconBg}` })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-4 flex gap-4", children: [
-        { icon: "\u{1F4CB}", label: "Orders" },
-        { icon: "\u{1F4E6}", label: "Products" },
-        { icon: "\u{1F4CA}", label: "Reports" }
-      ].map((d) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5 w-8", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm drop-shadow", children: d.icon }),
-        /* @__PURE__ */ jsx("span", { className: "text-[5px] text-white font-medium drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] leading-tight", children: d.label })
-      ] }, d.label)) }),
-      /* @__PURE__ */ jsxs("div", { className: `absolute rounded shadow-md ${winBg}`, style: { left: "35%", top: "20%", width: "55%", height: "55%" }, children: [
-        /* @__PURE__ */ jsxs("div", { className: `h-3 rounded-t ${headerBg} flex items-center px-1.5 gap-0.5`, style: { opacity: prevActiveHeaderOpacity }, children: [
-          /* @__PURE__ */ jsx("div", { className: "w-1 h-1 rounded-full bg-red-400" }),
-          /* @__PURE__ */ jsx("div", { className: "w-1 h-1 rounded-full bg-yellow-400" }),
-          /* @__PURE__ */ jsx("div", { className: "w-1 h-1 rounded-full bg-green-400" })
+    inSection("appearance") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-gray-200 overflow-hidden", style: { width: 480 }, children: /* @__PURE__ */ jsxs("div", { className: "relative", style: { height: 300 }, children: [
+        isColor ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { backgroundColor: desktopBg } }) : /* @__PURE__ */ jsx("img", { src: desktopBg, alt: "", className: "absolute inset-0 w-full h-full object-cover" }),
+        /* @__PURE__ */ jsxs("div", { className: `absolute left-0 right-0 bottom-0 h-4 ${taskbarBg} border-t border-gray-200/50 flex items-center px-2 gap-1`, style: { opacity: prevTaskbarOpacity }, children: [
+          /* @__PURE__ */ jsx("div", { className: `h-2 w-8 rounded-sm ${accentBg}` }),
+          /* @__PURE__ */ jsx("div", { className: `h-2 w-6 rounded-sm ${iconBg}` })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "p-1.5 space-y-1", style: { opacity: prevActiveContentOpacity }, children: [
-          /* @__PURE__ */ jsx("div", { className: `h-1 rounded w-3/4 ${iconBg}` }),
-          /* @__PURE__ */ jsx("div", { className: `h-1 rounded w-1/2 ${iconBg}` })
+        /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-4 flex gap-4", children: [
+          { icon: "\u{1F4CB}", label: "Orders" },
+          { icon: "\u{1F4E6}", label: "Products" },
+          { icon: "\u{1F4CA}", label: "Reports" }
+        ].map((d) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5 w-8", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm drop-shadow", children: d.icon }),
+          /* @__PURE__ */ jsx("span", { className: "text-[5px] text-white font-medium drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] leading-tight", children: d.label })
+        ] }, d.label)) }),
+        /* @__PURE__ */ jsxs("div", { className: `absolute rounded shadow-md ${winBg}`, style: { left: "35%", top: "20%", width: "55%", height: "55%" }, children: [
+          /* @__PURE__ */ jsxs("div", { className: `h-3 rounded-t ${headerBg} flex items-center px-1.5 gap-0.5`, style: { opacity: prevActiveHeaderOpacity }, children: [
+            /* @__PURE__ */ jsx("div", { className: "w-1 h-1 rounded-full bg-red-400" }),
+            /* @__PURE__ */ jsx("div", { className: "w-1 h-1 rounded-full bg-yellow-400" }),
+            /* @__PURE__ */ jsx("div", { className: "w-1 h-1 rounded-full bg-green-400" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-1.5 space-y-1", style: { opacity: prevActiveContentOpacity }, children: [
+            /* @__PURE__ */ jsx("div", { className: `h-1 rounded w-3/4 ${iconBg}` }),
+            /* @__PURE__ */ jsx("div", { className: `h-1 rounded w-1/2 ${iconBg}` })
+          ] })
         ] })
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Theme" }),
-      /* @__PURE__ */ jsx("div", { className: "flex gap-3 flex-wrap", children: [...THEMES, { key: "custom", label: "Custom", bar1: "bg-gray-200", bar2: "bg-gray-200" }].map((t) => {
-        const isCustom2 = t.key === "custom";
-        const r = isCustom2 ? "light" : resolveTheme(t.key);
-        const customColor = prefs.accent_color || "#8b5cf6";
-        const tAccent = isCustom2 ? "" : previewColor(r, "bg-[#2563eb]", "bg-[#3b82f6]", "bg-[#db2777]", "bg-[#16a34a]", "bg-[#374151]", "bg-[#1d4ed8]");
-        const tBg = isCustom2 ? "bg-[#ffffff] border-[#d1d5db]" : previewColor(r, "bg-[#ffffff] border-[#d1d5db]", "bg-[#1e1e2e] border-[#45475a]", "bg-[#fdf2f8] border-[#f9a8d4]", "bg-[#f0fdf4] border-[#86efac]", "bg-[#e5e7eb] border-[#9ca3af]", "bg-[#eff6ff] border-[#93c5fd]");
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => {
-              if (isCustom2) {
-                savePref("theme", "light");
-                if (!prefs.accent_color) savePref("accent_color", "#8b5cf6");
-              } else {
-                savePref("theme", t.key);
-                savePref("accent_color", null);
-              }
-            },
-            className: `flex flex-col items-center gap-1.5 rounded-lg border-2 p-3 transition-all ${(isCustom2 ? !!prefs.accent_color : currentTheme === t.key && !prefs.accent_color) ? "border-blue-500 shadow-md" : "border-gray-200 hover:border-gray-300"}`,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: `w-20 h-14 rounded ${tBg} border overflow-hidden flex flex-col`, children: t.key === "system" ? /* @__PURE__ */ jsxs("div", { className: "flex-1 flex", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col bg-[#ffffff]", children: [
-                  /* @__PURE__ */ jsx("div", { className: "h-2 bg-[#2563eb] w-full" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1 flex gap-0.5 p-0.5", children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-3 rounded-sm bg-[#f3f4f6]" }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
-                      /* @__PURE__ */ jsx("div", { className: "h-1 rounded-sm w-3/4 bg-[#e5e7eb]" }),
-                      /* @__PURE__ */ jsx("div", { className: "h-1 rounded-sm w-1/2 bg-[#e5e7eb]" })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Theme" }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3 flex-wrap", children: [...THEMES, { key: "custom", label: "Custom", bar1: "bg-gray-200", bar2: "bg-gray-200" }].map((t) => {
+          const isCustom2 = t.key === "custom";
+          const r = isCustom2 ? "light" : resolveTheme(t.key);
+          const customColor = prefs.accent_color || "#8b5cf6";
+          const tAccent = isCustom2 ? "" : previewColor(r, "bg-[#2563eb]", "bg-[#3b82f6]", "bg-[#db2777]", "bg-[#16a34a]", "bg-[#374151]", "bg-[#1d4ed8]");
+          const tBg = isCustom2 ? "bg-[#ffffff] border-[#d1d5db]" : previewColor(r, "bg-[#ffffff] border-[#d1d5db]", "bg-[#1e1e2e] border-[#45475a]", "bg-[#fdf2f8] border-[#f9a8d4]", "bg-[#f0fdf4] border-[#86efac]", "bg-[#e5e7eb] border-[#9ca3af]", "bg-[#eff6ff] border-[#93c5fd]");
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                if (isCustom2) {
+                  savePref("theme", "light");
+                  if (!prefs.accent_color) savePref("accent_color", "#8b5cf6");
+                } else {
+                  savePref("theme", t.key);
+                  savePref("accent_color", null);
+                }
+              },
+              className: `flex flex-col items-center gap-1.5 rounded-lg border-2 p-3 transition-all ${(isCustom2 ? !!prefs.accent_color : currentTheme === t.key && !prefs.accent_color) ? "border-blue-500 shadow-md" : "border-gray-200 hover:border-gray-300"}`,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: `w-20 h-14 rounded ${tBg} border overflow-hidden flex flex-col`, children: t.key === "system" ? /* @__PURE__ */ jsxs("div", { className: "flex-1 flex", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col bg-[#ffffff]", children: [
+                    /* @__PURE__ */ jsx("div", { className: "h-2 bg-[#2563eb] w-full" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex gap-0.5 p-0.5", children: [
+                      /* @__PURE__ */ jsx("div", { className: "w-3 rounded-sm bg-[#f3f4f6]" }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-1 rounded-sm w-3/4 bg-[#e5e7eb]" }),
+                        /* @__PURE__ */ jsx("div", { className: "h-1 rounded-sm w-1/2 bg-[#e5e7eb]" })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col bg-[#1e1e2e]", children: [
+                    /* @__PURE__ */ jsx("div", { className: "h-2 bg-[#3b82f6] w-full" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex gap-0.5 p-0.5", children: [
+                      /* @__PURE__ */ jsx("div", { className: "w-3 rounded-sm bg-[#313244]" }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-1 rounded-sm w-3/4 bg-[#45475a]" }),
+                        /* @__PURE__ */ jsx("div", { className: "h-1 rounded-sm w-1/2 bg-[#45475a]" })
+                      ] })
                     ] })
                   ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col bg-[#1e1e2e]", children: [
-                  /* @__PURE__ */ jsx("div", { className: "h-2 bg-[#3b82f6] w-full" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1 flex gap-0.5 p-0.5", children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-3 rounded-sm bg-[#313244]" }),
+                ] }) : isCustom2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-2 w-full", style: { backgroundColor: customColor } }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 flex gap-0.5 p-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-4 rounded-sm bg-[#f3f4f6]" }),
                     /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
-                      /* @__PURE__ */ jsx("div", { className: "h-1 rounded-sm w-3/4 bg-[#45475a]" }),
-                      /* @__PURE__ */ jsx("div", { className: "h-1 rounded-sm w-1/2 bg-[#45475a]" })
+                      /* @__PURE__ */ jsx("div", { className: "h-1.5 rounded-sm w-3/4 bg-[#e5e7eb]" }),
+                      /* @__PURE__ */ jsx("div", { className: "h-1.5 rounded-sm w-1/2 bg-[#e5e7eb]" })
                     ] })
                   ] })
-                ] })
-              ] }) : isCustom2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { className: "h-2 w-full", style: { backgroundColor: customColor } }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 flex gap-0.5 p-1", children: [
-                  /* @__PURE__ */ jsx("div", { className: "w-4 rounded-sm bg-[#f3f4f6]" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
-                    /* @__PURE__ */ jsx("div", { className: "h-1.5 rounded-sm w-3/4 bg-[#e5e7eb]" }),
-                    /* @__PURE__ */ jsx("div", { className: "h-1.5 rounded-sm w-1/2 bg-[#e5e7eb]" })
-                  ] })
-                ] })
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { className: `h-2 ${tAccent} w-full` }),
-                /* @__PURE__ */ jsx("div", { className: "flex-1 flex gap-0.5 p-1", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
-                  /* @__PURE__ */ jsx("div", { className: `h-1.5 rounded-sm w-3/4 ${t.bar1}` }),
-                  /* @__PURE__ */ jsx("div", { className: `h-1.5 rounded-sm w-1/2 ${t.bar2}` })
-                ] }) })
-              ] }) }),
-              /* @__PURE__ */ jsx("span", { className: `text-xs font-medium ${(isCustom2 ? !!prefs.accent_color : currentTheme === t.key && !prefs.accent_color) ? "text-blue-600" : "text-gray-600"}`, children: t.label })
-            ]
-          },
-          t.key
-        );
-      }) }),
-      prefs.accent_color && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: [
-        { key: "custom_bg_color", label: "Background Color", defaultVal: "#f3f4f6" },
-        { key: "custom_title_color", label: "Title Color", defaultVal: "#f9fafb" },
-        { key: "custom_window_color", label: "Windows Background", defaultVal: "#ffffff" },
-        { key: "custom_button_color", label: "Button Color", defaultVal: "#2563eb" },
-        { key: "accent_color", label: "Accent Color", defaultVal: "#8b5cf6" }
-      ].map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-40 shrink-0", children: item.label }),
-        /* @__PURE__ */ jsx(
-          "label",
-          {
-            className: "w-8 h-8 rounded-lg border-2 border-gray-300 overflow-hidden cursor-pointer flex items-center justify-center shrink-0",
-            style: { backgroundColor: prefs[item.key] || item.defaultVal },
-            children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "color",
-                value: prefs[item.key] || item.defaultVal,
-                onChange: (e) => savePref(item.key, e.target.value),
-                className: "opacity-0 absolute w-0 h-0"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 font-mono", children: prefs[item.key] || item.defaultVal })
-      ] }, item.key)) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Desktop Wallpaper" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => savePref("desktop_bg", "none"),
-            className: `w-28 h-20 rounded border-2 overflow-hidden flex items-center justify-center ${rawBg === "none" ? "border-blue-500" : "border-gray-300"}`,
-            style: { backgroundColor: previewColor(resolved, "#f3f4f6", "#1e1e2e", "#fdf2f8", "#f0fdf4", "#d1d5db", "#eff6ff") },
-            children: /* @__PURE__ */ jsx("span", { className: "text-[9px] text-gray-500", children: "None" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => savePref("desktop_bg", "random"),
-            className: `w-28 h-20 rounded border-2 overflow-hidden flex items-center justify-center ${rawBg === "random" ? "border-blue-500" : "border-gray-300"}`,
-            children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 grid-rows-2 w-full h-full", children: WALLPAPERS.slice(0, 4).map((wp) => /* @__PURE__ */ jsx("img", { src: wp.src, alt: "", loading: "lazy", className: "w-full h-full object-cover" }, wp.src)) })
-          }
-        ),
-        WALLPAPERS.map((wp) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => savePref("desktop_bg", wp.src),
-            className: `w-28 h-20 rounded border-2 overflow-hidden ${rawBg === wp.src ? "border-blue-500" : "border-gray-300"}`,
-            children: /* @__PURE__ */ jsx("img", { src: wp.src, alt: wp.label, loading: "lazy", className: "w-full h-full object-cover" })
-          },
-          wp.src
-        )),
-        (customBg || isCustom) && /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: `h-2 ${tAccent} w-full` }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 flex gap-0.5 p-1", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
+                    /* @__PURE__ */ jsx("div", { className: `h-1.5 rounded-sm w-3/4 ${t.bar1}` }),
+                    /* @__PURE__ */ jsx("div", { className: `h-1.5 rounded-sm w-1/2 ${t.bar2}` })
+                  ] }) })
+                ] }) }),
+                /* @__PURE__ */ jsx("span", { className: `text-xs font-medium ${(isCustom2 ? !!prefs.accent_color : currentTheme === t.key && !prefs.accent_color) ? "text-blue-600" : "text-gray-600"}`, children: t.label })
+              ]
+            },
+            t.key
+          );
+        }) }),
+        prefs.accent_color && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: [
+          { key: "custom_bg_color", label: "Background Color", defaultVal: "#f3f4f6" },
+          { key: "custom_title_color", label: "Title Color", defaultVal: "#f9fafb" },
+          { key: "custom_window_color", label: "Windows Background", defaultVal: "#ffffff" },
+          { key: "custom_button_color", label: "Button Color", defaultVal: "#2563eb" },
+          { key: "accent_color", label: "Accent Color", defaultVal: "#8b5cf6" }
+        ].map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-40 shrink-0", children: item.label }),
           /* @__PURE__ */ jsx(
-            "button",
+            "label",
             {
-              onClick: () => savePref("desktop_bg", customBg || desktopBg),
-              className: `w-28 h-20 rounded border-2 overflow-hidden ${isCustom ? "border-blue-500" : "border-gray-300"}`,
-              children: /* @__PURE__ */ jsx("img", { src: customBg || desktopBg, alt: "Custom", loading: "lazy", className: "w-full h-full object-cover" })
+              className: "w-8 h-8 rounded-lg border-2 border-gray-300 overflow-hidden cursor-pointer flex items-center justify-center shrink-0",
+              style: { backgroundColor: prefs[item.key] || item.defaultVal },
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: prefs[item.key] || item.defaultVal,
+                  onChange: (e) => savePref(item.key, e.target.value),
+                  className: "opacity-0 absolute w-0 h-0"
+                }
+              )
             }
           ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 font-mono", children: prefs[item.key] || item.defaultVal })
+        ] }, item.key)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Desktop Wallpaper" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 flex-wrap items-center", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => save({ desktop_bg: "random", desktop_bg_custom: "" }),
-              className: "absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full bg-red-500 text-white flex items-center justify-center text-[10px] leading-none opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600 shadow",
-              children: "\xD7"
+              onClick: () => savePref("desktop_bg", "none"),
+              className: `w-28 h-20 rounded border-2 overflow-hidden flex items-center justify-center ${rawBg === "none" ? "border-blue-500" : "border-gray-300"}`,
+              style: { backgroundColor: previewColor(resolved, "#f3f4f6", "#1e1e2e", "#fdf2f8", "#f0fdf4", "#d1d5db", "#eff6ff") },
+              children: /* @__PURE__ */ jsx("span", { className: "text-[9px] text-gray-500", children: "None" })
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: "w-28 h-20 rounded border-2 border-gray-300 border-dashed overflow-hidden cursor-pointer flex items-center justify-center text-gray-400 hover:text-gray-600", 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: "M12 4.5v15m7.5-7.5h-15" }) }),
-          /* @__PURE__ */ jsx("input", { type: "file", accept: "image/*", className: "hidden", onChange: (e) => {
-            const file = e.target.files?.[0];
-            if (!file) return;
-            const reader = new FileReader();
-            reader.onloadend = () => {
-              if (reader.result) {
-                save({ desktop_bg: reader.result, desktop_bg_custom: reader.result });
-              }
-            };
-            reader.readAsDataURL(file);
-          } })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Transparency" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: [
-        { key: "transparency_taskbar", label: "Taskbar", defaultVal: 70 },
-        { key: "transparency_start_menu", label: "Start Menu", defaultVal: 70 },
-        { key: "transparency_inactive_header", label: "Inactive Windows Header / Footer", defaultVal: 70 },
-        { key: "transparency_inactive_content", label: "Inactive Windows Content", defaultVal: 80 },
-        { key: "transparency_active_header", label: "Active Windows Header / Footer", defaultVal: 80 },
-        { key: "transparency_active_content", label: "Active Windows Content", defaultVal: 90 }
-      ].map((item) => {
-        const val = localSliders[item.key] ?? prefs[item.key] ?? item.defaultVal;
-        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-64 shrink-0", children: item.label }),
+          ),
           /* @__PURE__ */ jsx(
-            "input",
+            "button",
             {
-              type: "range",
-              min: 20,
-              max: 100,
-              value: val,
-              onChange: (e) => saveSlider(item.key, Number(e.target.value)),
-              className: "flex-1 h-1.5 accent-blue-600 cursor-pointer"
+              onClick: () => savePref("desktop_bg", "random"),
+              className: `w-28 h-20 rounded border-2 overflow-hidden flex items-center justify-center ${rawBg === "random" ? "border-blue-500" : "border-gray-300"}`,
+              children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 grid-rows-2 w-full h-full", children: WALLPAPERS.slice(0, 4).map((wp) => /* @__PURE__ */ jsx("img", { src: wp.src, alt: "", loading: "lazy", className: "w-full h-full object-cover" }, wp.src)) })
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 w-10 text-right font-mono", children: [
-            val,
-            "%"
+          WALLPAPERS.map((wp) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => savePref("desktop_bg", wp.src),
+              className: `w-28 h-20 rounded border-2 overflow-hidden ${rawBg === wp.src ? "border-blue-500" : "border-gray-300"}`,
+              children: /* @__PURE__ */ jsx("img", { src: wp.src, alt: wp.label, loading: "lazy", className: "w-full h-full object-cover" })
+            },
+            wp.src
+          )),
+          (customBg || isCustom) && /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => savePref("desktop_bg", customBg || desktopBg),
+                className: `w-28 h-20 rounded border-2 overflow-hidden ${isCustom ? "border-blue-500" : "border-gray-300"}`,
+                children: /* @__PURE__ */ jsx("img", { src: customBg || desktopBg, alt: "Custom", loading: "lazy", className: "w-full h-full object-cover" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => save({ desktop_bg: "random", desktop_bg_custom: "" }),
+                className: "absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full bg-red-500 text-white flex items-center justify-center text-[10px] leading-none opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600 shadow",
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "w-28 h-20 rounded border-2 border-gray-300 border-dashed overflow-hidden cursor-pointer flex items-center justify-center text-gray-400 hover:text-gray-600", 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: "M12 4.5v15m7.5-7.5h-15" }) }),
+            /* @__PURE__ */ jsx("input", { type: "file", accept: "image/*", className: "hidden", onChange: (e) => {
+              const file = e.target.files?.[0];
+              if (!file) return;
+              const reader = new FileReader();
+              reader.onloadend = () => {
+                if (reader.result) {
+                  save({ desktop_bg: reader.result, desktop_bg_custom: reader.result });
+                }
+              };
+              reader.readAsDataURL(file);
+            } })
           ] })
-        ] }, item.key);
-      }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Layout Mode" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-3", children: "Sidebar mode is designed for small screens \u2014 windows always run maximized and the start menu lives in a persistent left sidebar (sections expand inline instead of opening flyouts)." }),
-      /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
-        { key: "classic", label: "Classic" },
-        { key: "sidebar", label: "Sidebar" }
-      ].map((m) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => {
-            savePref("layout_mode", m.key);
-            if (m.key === "sidebar") savePref("default_window_size", "maximized");
-          },
-          className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.layout_mode || "classic") === m.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
-          children: m.label
-        },
-        m.key
-      )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Transparency" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: [
+          { key: "transparency_taskbar", label: "Taskbar", defaultVal: 70 },
+          { key: "transparency_start_menu", label: "Start Menu", defaultVal: 70 },
+          { key: "transparency_inactive_header", label: "Inactive Windows Header / Footer", defaultVal: 70 },
+          { key: "transparency_inactive_content", label: "Inactive Windows Content", defaultVal: 80 },
+          { key: "transparency_active_header", label: "Active Windows Header / Footer", defaultVal: 80 },
+          { key: "transparency_active_content", label: "Active Windows Content", defaultVal: 90 }
+        ].map((item) => {
+          const val = localSliders[item.key] ?? prefs[item.key] ?? item.defaultVal;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-64 shrink-0", children: item.label }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 20,
+                max: 100,
+                value: val,
+                onChange: (e) => saveSlider(item.key, Number(e.target.value)),
+                className: "flex-1 h-1.5 accent-blue-600 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 w-10 text-right font-mono", children: [
+              val,
+              "%"
+            ] })
+          ] }, item.key);
+        }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Taskbar" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-24 shrink-0", children: "Position" }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: ["bottom", "top", "left", "right"].map((pos) => /* @__PURE__ */ jsx(
+    inSection("layout") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Layout Mode" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-3", children: "Sidebar mode is designed for small screens \u2014 windows always run maximized and the start menu lives in a persistent left sidebar (sections expand inline instead of opening flyouts)." }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+          { key: "classic", label: "Classic" },
+          { key: "sidebar", label: "Sidebar" }
+        ].map((m) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => savePref("taskbar_position", pos),
-            disabled: prefs.layout_mode === "sidebar",
-            title: prefs.layout_mode === "sidebar" ? "Sidebar mode forces a horizontal taskbar." : void 0,
-            className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${(prefs.taskbar_position || "bottom") === pos ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
-            children: pos.charAt(0).toUpperCase() + pos.slice(1)
+            onClick: () => {
+              savePref("layout_mode", m.key);
+              if (m.key === "sidebar") savePref("default_window_size", "maximized");
+            },
+            className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.layout_mode || "classic") === m.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
+            children: m.label
           },
-          pos
+          m.key
         )) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Menu" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-3", children: "Controls font size, padding, taskbar height, and window button height across the Start Menu, context menus, dropdowns, and the notification popup." }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-24 shrink-0", children: "Size" }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
-            { key: "small", label: "Small" },
-            { key: "medium", label: "Medium" },
-            { key: "large", label: "Large" }
-          ].map((s) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => savePref("start_menu_size", s.key),
-              className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.start_menu_size || "medium") === s.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
-              children: s.label
-            },
-            s.key
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-24 shrink-0", children: "Density" }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
-            { key: "tight", label: "Tight" },
-            { key: "normal", label: "Normal" }
-          ].map((s) => /* @__PURE__ */ jsx(
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Taskbar" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-24 shrink-0", children: "Position" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: ["bottom", "top", "left", "right"].map((pos) => /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => savePref("menu_density", s.key),
-              className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.menu_density || "normal") === s.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
-              children: s.label
+              onClick: () => savePref("taskbar_position", pos),
+              disabled: prefs.layout_mode === "sidebar",
+              title: prefs.layout_mode === "sidebar" ? "Sidebar mode forces a horizontal taskbar." : void 0,
+              className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${(prefs.taskbar_position || "bottom") === pos ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
+              children: pos.charAt(0).toUpperCase() + pos.slice(1)
             },
-            s.key
+            pos
           )) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Menu" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-3", children: "Controls font size, padding, taskbar height, and window button height across the Start Menu, context menus, dropdowns, and the notification popup." }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-24 shrink-0", children: "Size" }),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+              { key: "small", label: "Small" },
+              { key: "medium", label: "Medium" },
+              { key: "large", label: "Large" }
+            ].map((s) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => savePref("start_menu_size", s.key),
+                className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.start_menu_size || "medium") === s.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
+                children: s.label
+              },
+              s.key
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-24 shrink-0", children: "Density" }),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+              { key: "tight", label: "Tight" },
+              { key: "normal", label: "Normal" }
+            ].map((s) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => savePref("menu_density", s.key),
+                className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.menu_density || "normal") === s.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
+                children: s.label
+              },
+              s.key
+            )) })
+          ] })
         ] })
       ] })
     ] }),
-    !omitSet.has("behavior") && /* @__PURE__ */ jsxs("div", { children: [
+    inSection("behavior") && !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: [
@@ -5460,7 +5419,7 @@ function Customization({ omit } = {}) {
         ] })
       ] })
     ] }),
-    !omitSet.has("desktop") && /* @__PURE__ */ jsxs("div", { children: [
+    inSection("behavior") && !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(
@@ -6641,6 +6600,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-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, DEV_BANNER_TEXT, Desktop, DesktopHostProvider, DevIndicator, ENTER, EntityList, GlobalSearch, HelpCenter, Kanban, Layout, ListFooter, MOD, Markdown, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SidebarLayout, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, VERSION, WidgetManager, applyDevTitle, createWindowRegistry, isDevEnv, 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, DEV_BANNER_TEXT, Desktop, DesktopHostProvider, DevIndicator, ENTER, EntityList, GlobalSearch, HelpCenter, Kanban, Layout, ListFooter, MOD, Markdown, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, TopNav, VERSION, WidgetManager, applyDevTitle, createWindowRegistry, isDevEnv, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map