react-os-shell 0.13.1 → 0.14.0

package/dist/index.js

@@ -4,22 +4,22 @@ import { subscribePomo, getPomoSnapshot } from './chunk-MK3HLUO4.js';
 export { setShellTodoProvider } from './chunk-QTJ2CHJX.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-OB7T3Q5C.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';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-ZF6AYO4G.js';
 export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-ZF6AYO4G.js';
-import { createContext, lazy, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { createContext, lazy, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
 import { createPortal } from 'react-dom';
@@ -641,6 +641,87 @@ function SidebarLayout({
     contentPane
   ] }) });
 }
+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 })
+      ]
+    }
+  );
+}
+var DEFAULT_SEPARATOR = /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 shrink-0 text-gray-300", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z",
+    clipRule: "evenodd"
+  }
+) });
+function Breadcrumbs({ items, separator, maxItems = 0, className }) {
+  if (items.length === 0) return null;
+  const sep = separator ?? DEFAULT_SEPARATOR;
+  const crumbs = [];
+  const lastIndex = items.length - 1;
+  if (maxItems > 0 && items.length > maxItems && maxItems >= 2) {
+    const tailCount = Math.max(1, maxItems - 1);
+    crumbs.push({ kind: "item", item: items[0], isLast: false });
+    crumbs.push({ kind: "ellipsis" });
+    for (let i = items.length - tailCount; i <= lastIndex; i++) {
+      crumbs.push({ kind: "item", item: items[i], isLast: i === lastIndex });
+    }
+  } else {
+    items.forEach((item, i) => crumbs.push({ kind: "item", item, isLast: i === lastIndex }));
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: `min-w-0 ${className ?? ""}`, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1.5 text-sm", children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    i > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: "flex items-center", children: sep }),
+    /* @__PURE__ */ jsx("li", { className: "flex min-w-0 items-center", children: crumb.kind === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "px-0.5 text-gray-400 select-none", "aria-label": "Hidden crumbs", children: "\u2026" }) : crumb.isLast || !crumb.item.onClick ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "aria-current": crumb.isLast ? "page" : void 0,
+        className: `inline-flex min-w-0 items-center gap-1 truncate ${crumb.isLast ? "font-medium text-gray-900" : "text-gray-500"}`,
+        children: [
+          crumb.item.icon,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: crumb.item.label })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: crumb.item.onClick,
+        className: "inline-flex min-w-0 items-center gap-1 truncate rounded px-1 -mx-1 text-gray-500 transition-colors hover:text-gray-900 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+        children: [
+          crumb.item.icon,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: crumb.item.label })
+        ]
+      }
+    ) })
+  ] }, i)) }) });
+}
 function timeAgo(dateStr) {
   const diff = Date.now() - new Date(dateStr).getTime();
   const mins = Math.floor(diff / 6e4);
@@ -1481,7 +1562,7 @@ function WidgetManager({ open, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.13.1" ;
+var VERSION = "0.14.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -5070,8 +5151,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 +5205,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 +5546,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(
@@ -6493,8 +6579,10 @@ function Kanban({
                         },
                         onDragEnter: (e) => {
                           e.stopPropagation();
+                          const draggedPos = dragId !== null ? colItems.findIndex((it) => getId(it) === dragId) : -1;
+                          const target = draggedPos !== -1 && draggedPos < index ? index + 1 : index;
                           setOver(
-                            (prev) => prev && prev.col === col.value && prev.index === index ? prev : { col: col.value, index }
+                            (prev) => prev && prev.col === col.value && prev.index === target ? prev : { col: col.value, index: target }
                           );
                         },
                         onDragEnd: reset,
@@ -6639,6 +6727,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, Breadcrumbs, 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, 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