react-os-shell 0.1.0

package/dist/index.js

@@ -0,0 +1,3443 @@
+import { useEmailUnreadCount } from './chunk-PDFQNHW7.js';
+import { useGoogleAuth } from './chunk-5O2KEISQ.js';
+import { useShellPrefs } from './chunk-TFGOLXGD.js';
+export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-TFGOLXGD.js';
+import { formatDate } from './chunk-NSU7OHPC.js';
+export { formatDate } from './chunk-NSU7OHPC.js';
+import { toast_default } from './chunk-WIJ45SYD.js';
+export { toast_default as toast } from './chunk-WIJ45SYD.js';
+import { playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
+import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive } from './chunk-WQIS72NL.js';
+export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, glassStyle, isEntityEntry, isPageEntry, setShellApiClient, setShellNavIcons, setShellWindowRegistry, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-WQIS72NL.js';
+export { ConfirmProvider, confirm, confirmDestructive } from './chunk-RFTLYCSF.js';
+import { createContext, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, 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';
+import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
+import 'react-router-dom';
+
+// src/windowRegistry/createWindowRegistry.ts
+function createWindowRegistry(...partials) {
+  return Object.assign({}, ...partials);
+}
+var DEFAULT_MAGNIFIER = "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z";
+function GlobalSearch({ providers, typeIcons, placeholder = "Search..." } = {}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const inputRef = useRef(null);
+  const { openEntity } = useWindowManager();
+  const debounceRef = useRef();
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+      if (e.key === "Escape" && open) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    } else {
+      setQuery("");
+      setResults([]);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (query.length < 2) {
+      setResults([]);
+      return;
+    }
+    if (!providers || providers.length === 0) {
+      setResults([]);
+      return;
+    }
+    debounceRef.current = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const responses = await Promise.all(providers.map((p) => p(query).catch(() => [])));
+        setResults(responses.flat());
+        setActiveIdx(0);
+      } catch {
+        setResults([]);
+      }
+      setLoading(false);
+    }, 250);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, providers]);
+  const handleSelect = useCallback((result) => {
+    setOpen(false);
+    openEntity(result.entity_type, result.entity_id, null, result.label);
+  }, [openEntity]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIdx((i) => Math.min(i + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && results[activeIdx]) {
+      handleSelect(results[activeIdx]);
+    }
+  };
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[200] flex items-start justify-center pt-[15vh]", onClick: () => setOpen(false), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-xl rounded-2xl overflow-hidden", onClick: (e) => e.stopPropagation(), style: glassStyle(), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-gray-200", children: [
+        /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: DEFAULT_MAGNIFIER }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            className: "flex-1 text-sm bg-transparent border-0 outline-none placeholder-gray-400"
+          }
+        ),
+        /* @__PURE__ */ jsx("kbd", { className: "hidden sm:inline-flex items-center rounded border border-gray-300 px-1.5 py-0.5 text-[10px] font-medium text-gray-400", children: "ESC" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "max-h-[50vh] overflow-y-auto", children: [
+        loading && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "Searching..." }),
+        !loading && query.length >= 2 && results.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "No results found." }),
+        !loading && results.length > 0 && /* @__PURE__ */ jsx("ul", { className: "py-2", children: results.map((r, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `flex items-center gap-3 w-full px-4 py-2.5 text-left transition-colors ${i === activeIdx ? "bg-blue-50" : "hover:bg-gray-50"}`,
+            onClick: () => handleSelect(r),
+            onMouseEnter: () => setActiveIdx(i),
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: typeIcons?.[r.type] || DEFAULT_MAGNIFIER }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: r.label }),
+                r.sub && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 truncate", children: r.sub })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500", children: r.type })
+            ]
+          }
+        ) }, `${r.type}-${r.label}-${i}`)) }),
+        !loading && query.length < 2 && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "Type at least 2 characters to search..." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-gray-100 bg-gray-50 text-[11px] text-gray-400", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "\u2191" }),
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "\u2193" }),
+            " navigate"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "Enter" }),
+            " open"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "Esc" }),
+          " close"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/shell/Kbd.tsx
+var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+var MOD = isMac ? "\u2318" : "Ctrl";
+var ALT = isMac ? "\u2325" : "Alt";
+var SHIFT = "\u21E7";
+var ENTER = "\u23CE";
+var CMD_ENTER = isMac ? "\u2318\u23CE" : "Ctrl\u23CE";
+var CMD_S = isMac ? "\u2318S" : "Ctrl+S";
+var CMD_K = isMac ? "\u2318K" : "Ctrl+K";
+var CMD_DOT = isMac ? "\u2318." : "Ctrl+.";
+var CMD_A = isMac ? "\u2318A" : "Ctrl+A";
+var ALT_SHIFT_D = isMac ? "\u2325\u21E7D" : "Alt+Shift+D";
+var ALT_SHIFT_E = isMac ? "\u2325\u21E7E" : "Alt+Shift+E";
+var ALT_SHIFT_N = isMac ? "\u2325\u21E7N" : "Alt+Shift+N";
+var sections = [
+  {
+    title: "Global",
+    shortcuts: [
+      { keys: CMD_K, description: "Search" },
+      { keys: CMD_DOT, description: "Toggle sidebar" },
+      { keys: "Ctrl F11", description: "Toggle fullscreen" },
+      { keys: "ESC", description: "Exit fullscreen (when no windows open)" },
+      { keys: "?", description: "Show keyboard shortcuts" }
+    ]
+  },
+  {
+    title: "Lists",
+    shortcuts: [
+      { keys: "J / \u2193", description: "Next row" },
+      { keys: "K / \u2191", description: "Previous row" },
+      { keys: "\u23CE", description: "Open selected row" },
+      { keys: "\u21E7J / \u21E7K", description: "Move and select" },
+      { keys: "\u21E7 Click", description: "Range select" },
+      { keys: "Space", description: "Toggle row checkbox" },
+      { keys: CMD_A, description: "Select / deselect all" },
+      { keys: ALT_SHIFT_N, description: "Create new item" },
+      { keys: ALT_SHIFT_E, description: "Edit selected item" }
+    ]
+  },
+  {
+    title: "Modals / Forms",
+    shortcuts: [
+      { keys: CMD_ENTER, description: "Submit" },
+      { keys: CMD_S, description: "Save" },
+      { keys: ALT_SHIFT_D, description: "Save as new (duplicate)" },
+      { keys: "ESC", description: "Close modal" }
+    ]
+  }
+];
+function ShortcutHelp() {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const toggle = () => setOpen((prev) => !prev);
+    document.addEventListener("toggle-shortcut-help", toggle);
+    return () => document.removeEventListener("toggle-shortcut-help", toggle);
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "?" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const tag = e.target?.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (e.target?.isContentEditable) return;
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+  return /* @__PURE__ */ jsxs(Dialog, { open, onClose: () => setOpen(false), className: "relative z-[9999]", children: [
+    /* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/30 transition-opacity" }),
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center p-6", children: /* @__PURE__ */ jsxs(DialogPanel, { className: "w-full max-w-md rounded-lg bg-white shadow-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 pt-5 pb-3 border-b border-gray-200", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-900", children: "Keyboard Shortcuts" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setOpen(false), className: "text-gray-400 hover:text-gray-500 text-sm", children: "ESC" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-5 py-4 space-y-5 max-h-[60vh] overflow-y-auto", children: sections.map((section) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2", children: section.title }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: section.shortcuts.map((s) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: s.description }),
+          /* @__PURE__ */ jsx("kbd", { className: "inline-flex items-center rounded border border-gray-300 bg-gray-50 px-2 py-0.5 text-xs font-medium text-gray-600 font-mono", children: s.keys })
+        ] }, s.keys + s.description)) })
+      ] }, section.title)) }),
+      /* @__PURE__ */ jsx("div", { className: "px-5 py-3 border-t border-gray-100 text-center", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-400", children: [
+        "Press ",
+        /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 bg-gray-50 px-1.5 py-0.5 text-[10px] font-medium text-gray-500", children: "?" }),
+        " to toggle"
+      ] }) })
+    ] }) })
+  ] });
+}
+function timeAgo(dateStr) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 7) return `${days}d ago`;
+  return formatDate(dateStr);
+}
+function NotificationBell({
+  useUnreadCount,
+  list,
+  markRead,
+  markAllRead,
+  onItemClick,
+  onViewAll,
+  popDirection
+}) {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const buttonRef = useRef(null);
+  const queryClient = useQueryClient();
+  const unreadCount = useUnreadCount();
+  useEffect(() => {
+    if ("Notification" in window && Notification.permission === "default") Notification.requestPermission();
+  }, []);
+  const prevCountRef = useRef(null);
+  useEffect(() => {
+    if (prevCountRef.current === null) {
+      prevCountRef.current = unreadCount;
+      return;
+    }
+    if (unreadCount > prevCountRef.current) {
+      list({ page_size: 1 }).then((data) => {
+        const latest = data?.results?.[0];
+        if (!latest) return;
+        const title = latest.title || "New Notification";
+        const body = latest.message || latest.entity_label || "";
+        if (document.hidden) {
+          if ("Notification" in window && Notification.permission === "granted") {
+            const n = new Notification(title, { body, icon: "/favicon.svg", tag: `notif-${latest.id}` });
+            n.onclick = () => {
+              window.focus();
+              onItemClick(latest);
+              n.close();
+            };
+          }
+        } else {
+          toast_default.info(title, { duration: 5e3 });
+        }
+      }).catch(() => {
+      });
+    }
+    prevCountRef.current = unreadCount;
+  }, [unreadCount, list, onItemClick]);
+  const { data: notifData } = useQuery({
+    queryKey: ["notifications-dropdown"],
+    queryFn: () => list({ page_size: 30 }),
+    staleTime: 3e4,
+    refetchInterval: 3e4
+  });
+  const notifications = notifData?.results ?? [];
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.target.closest("[data-menu-toggle]")) return;
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("pointerdown", handler);
+    return () => window.removeEventListener("pointerdown", handler);
+  }, [open]);
+  const handleClick = (notif) => {
+    if (!notif.is_read) {
+      queryClient.setQueryData(["notification-unread-count"], (old) => old ? { ...old, count: Math.max(0, (old.count || 0) - 1) } : old);
+      queryClient.setQueryData(["notifications-dropdown"], (old) => {
+        if (!old?.results) return old;
+        return { ...old, results: old.results.map((n) => n.id === notif.id ? { ...n, is_read: true } : n) };
+      });
+      markRead(notif.id).catch(() => {
+        queryClient.invalidateQueries({ queryKey: ["notification-unread-count"] });
+        queryClient.invalidateQueries({ queryKey: ["notifications-dropdown"] });
+      });
+    }
+    setOpen(false);
+    onItemClick(notif);
+  };
+  const handleMarkAllRead = () => {
+    queryClient.setQueryData(["notification-unread-count"], (old) => old ? { ...old, count: 0 } : old);
+    queryClient.setQueryData(["notifications-dropdown"], (old) => {
+      if (!old?.results) return old;
+      return { ...old, results: old.results.map((n) => ({ ...n, is_read: true })) };
+    });
+    markAllRead().then(() => {
+      queryClient.invalidateQueries({ queryKey: ["notification-unread-count"] });
+      queryClient.invalidateQueries({ queryKey: ["notifications-dropdown"] });
+    });
+  };
+  const [dropdownPos, setDropdownPos] = useState({});
+  const calcPos = useCallback(() => {
+    const taskbarPos = getComputedStyle(document.documentElement).getPropertyValue("--taskbar-position")?.trim() || "bottom";
+    const taskbarH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--taskbar-height")) || 56;
+    const taskbarW = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--taskbar-width")) || 0;
+    const verticalReserve = taskbarPos === "top" || taskbarPos === "bottom" ? taskbarH + 16 : 16;
+    const maxHeight = `calc(100vh - ${verticalReserve}px)`;
+    if (popDirection === "right") setDropdownPos({ left: taskbarW + 8, bottom: 8, maxHeight });
+    else if (popDirection === "left") setDropdownPos({ right: taskbarW + 8, bottom: 8, maxHeight });
+    else if (taskbarPos === "top") setDropdownPos({ right: 8, top: taskbarH + 8, maxHeight });
+    else setDropdownPos({ right: 8, bottom: taskbarH + 8, maxHeight });
+  }, [popDirection]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    calcPos();
+  }, [open, calcPos]);
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener("resize", calcPos);
+    return () => window.removeEventListener("resize", calcPos);
+  }, [open, calcPos]);
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        "data-menu-toggle": true,
+        onMouseEnter: () => queryClient.prefetchQuery({ queryKey: ["notifications-dropdown"], queryFn: () => list({ page_size: 30 }) }),
+        onClick: () => setOpen((prev) => !prev),
+        title: "Notifications",
+        className: "relative shrink-0 rounded-md p-2 text-gray-900 hover:text-black hover:bg-white/20 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }),
+          unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute top-0.5 right-0.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white", children: unreadCount > 99 ? "99+" : unreadCount })
+        ]
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs(PopupMenu, { minWidth: 320, className: "w-80 flex flex-col overflow-hidden", style: { ...dropdownPos }, onClose: () => setOpen(false), children: [
+        /* @__PURE__ */ jsx(PopupMenuLabel, { children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsx("span", { children: "Notifications" }),
+          unreadCount > 0 && /* @__PURE__ */ jsx("button", { onClick: handleMarkAllRead, className: "text-[10px] text-blue-600 hover:text-blue-700 font-medium normal-case tracking-normal", children: "Mark all read" })
+        ] }) }),
+        /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+        /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", style: { flex: "1 1 auto", minHeight: 0 }, children: notifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-4 text-center", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-8 w-8 text-gray-300 mb-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 font-medium", children: "All caught up" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: "No notifications yet" })
+        ] }) : notifications.map((notif) => /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => handleClick(notif), children: [
+          /* @__PURE__ */ jsx("div", { className: "pt-0.5 shrink-0", children: !notif.is_read ? /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-blue-500" }) : /* @__PURE__ */ jsx("div", { className: "h-2 w-2" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: `text-sm leading-tight ${!notif.is_read ? "font-medium" : ""}`, children: notif.title }),
+            notif.message && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-0.5 truncate", children: notif.message }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: timeAgo(notif.created_at) }),
+              notif.actor_name && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400", children: [
+                "by ",
+                notif.actor_name
+              ] })
+            ] })
+          ] })
+        ] }, notif.id)) }),
+        onViewAll && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+          /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
+            setOpen(false);
+            onViewAll();
+          }, children: /* @__PURE__ */ jsx("span", { className: "w-full text-center text-xs text-blue-600 font-medium", children: "View all notifications" }) })
+        ] })
+      ] }),
+      document.body
+    )
+  ] });
+}
+var BugReportContext = createContext(null);
+function BugReportConfigProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(BugReportContext.Provider, { value, children });
+}
+function useBugReport() {
+  return useContext(BugReportContext);
+}
+var globalOpen = () => Promise.resolve(null);
+var openBugReportDialog = (screenshot) => globalOpen(screenshot);
+function BugReportProvider({ children }) {
+  const [open, setOpen] = useState(false);
+  const [screenshot, setScreenshot] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [description, setDescription] = useState("");
+  const resolveRef = useRef();
+  const openFn = useCallback((s) => {
+    setScreenshot(s);
+    setDescription("");
+    setOpen(true);
+    return new Promise((resolve) => {
+      resolveRef.current = resolve;
+    });
+  }, []);
+  useEffect(() => {
+    globalOpen = openFn;
+  }, [openFn]);
+  useEffect(() => {
+    if (!screenshot) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(screenshot);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [screenshot]);
+  const handleSubmit = () => {
+    setOpen(false);
+    resolveRef.current?.({ description: description.trim() });
+  };
+  const handleCancel = () => {
+    setOpen(false);
+    resolveRef.current?.(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxs(Dialog, { open, onClose: handleCancel, className: "relative z-[9999]", children: [
+      /* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/40" }),
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs(DialogPanel, { className: "w-full max-w-2xl rounded-lg bg-white p-6 shadow-xl", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold text-gray-900", children: "Report a bug" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "A screenshot of your current view will be sent to the admin team." }),
+        previewUrl && /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-md border border-gray-200 overflow-hidden bg-gray-50 max-h-64", children: /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Screenshot preview", className: "w-full h-auto max-h-64 object-contain" }) }),
+        !previewUrl && /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-md border border-dashed border-gray-300 px-4 py-6 text-center text-sm text-gray-500", children: "Screenshot capture failed \u2014 your description will still be sent." }),
+        /* @__PURE__ */ jsxs("label", { className: "mt-4 block text-sm font-medium text-gray-700", children: [
+          "What went wrong?",
+          /* @__PURE__ */ jsx("span", { className: "font-normal text-gray-400 ml-1", children: "(optional)" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            autoFocus: true,
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
+            },
+            placeholder: "Briefly describe the issue, what you were doing, what you expected to happen\u2026",
+            rows: 3,
+            className: "mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none resize-none"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCancel,
+              className: "bg-white text-gray-700 border border-gray-300 px-4 py-2 text-sm font-medium rounded-lg hover:bg-gray-50",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleSubmit,
+              className: "bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 text-sm font-medium rounded-lg",
+              children: "Send Report"
+            }
+          )
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+function StatePill({ resolved }) {
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${resolved ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"}`, children: resolved ? "Resolved" : "Open" });
+}
+function BugReportDetail({ report }) {
+  const qc = useQueryClient();
+  const config = useBugReport();
+  const [resolveOpen, setResolveOpen] = useState(false);
+  const [note, setNote] = useState("");
+  const resolve = useMutation({
+    mutationFn: ({ is_resolved, resolution_note }) => {
+      if (!config?.resolve) {
+        return Promise.reject(new Error("Bug report resolve is not configured."));
+      }
+      return config.resolve(report.id, is_resolved, resolution_note);
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["bug-reports"] });
+      qc.invalidateQueries({ queryKey: ["entity", "bug_report", report.id] });
+      setResolveOpen(false);
+      setNote("");
+    },
+    meta: { success: (d) => d.is_resolved ? "Bug report marked resolved." : "Bug report reopened." }
+  });
+  const handleAction = () => {
+    if (report.is_resolved) {
+      resolve.mutate({ is_resolved: false, resolution_note: "" });
+    } else {
+      setNote("");
+      setResolveOpen(true);
+    }
+  };
+  const submitResolve = () => {
+    resolve.mutate({ is_resolved: true, resolution_note: note.trim() });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900", children: report.reporter_name || "Unknown" }),
+      /* @__PURE__ */ jsx(StatePill, { resolved: report.is_resolved }),
+      /* @__PURE__ */ jsx("span", { className: "text-gray-500 ml-auto", children: formatDate(report.created_at) })
+    ] }),
+    report.description && /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-gray-50 border border-gray-200 p-3 text-sm text-gray-800 whitespace-pre-wrap", children: report.description }),
+    report.is_resolved && report.resolution_note && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-green-50 border border-green-200 p-3 text-sm text-green-900 whitespace-pre-wrap", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-green-700 mb-1", children: "Resolution note" }),
+      report.resolution_note
+    ] }),
+    /* @__PURE__ */ jsxs("dl", { className: "text-xs text-gray-600 grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1.5", children: [
+      /* @__PURE__ */ jsx("dt", { className: "font-medium text-gray-700", children: "Page" }),
+      /* @__PURE__ */ jsx("dd", { className: "break-all", children: /* @__PURE__ */ jsx("a", { href: report.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", children: report.url }) }),
+      /* @__PURE__ */ jsx("dt", { className: "font-medium text-gray-700", children: "Viewport" }),
+      /* @__PURE__ */ jsx("dd", { children: report.viewport }),
+      /* @__PURE__ */ jsx("dt", { className: "font-medium text-gray-700", children: "Browser" }),
+      /* @__PURE__ */ jsx("dd", { className: "break-all", children: report.user_agent })
+    ] }),
+    report.screenshot_url ? /* @__PURE__ */ jsx("a", { href: report.screenshot_url, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: report.screenshot_url,
+        alt: "Screenshot at time of report",
+        className: "w-full rounded-lg border border-gray-200 hover:border-blue-400 transition-colors"
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-gray-300 p-6 text-center text-sm text-gray-400", children: "No screenshot was captured for this report." }),
+    config?.resolve && /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-2 border-t border-gray-200", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleAction,
+        disabled: resolve.isPending,
+        className: `px-3 py-1.5 text-sm rounded-lg font-medium transition-colors ${report.is_resolved ? "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50" : "bg-blue-600 text-white hover:bg-blue-700"}`,
+        children: resolve.isPending ? "..." : report.is_resolved ? "Reopen" : "Mark Resolved"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Modal, { open: resolveOpen, onClose: () => !resolve.isPending && setResolveOpen(false), title: `Resolve ${report.report_code}`, size: "md", compact: true, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+        "Add a short note for ",
+        report.reporter_name || "the reporter",
+        " (optional)."
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: note,
+          onChange: (e) => setNote(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submitResolve();
+          },
+          rows: 3,
+          autoFocus: true,
+          placeholder: "e.g. Fixed in v1256 \u2014 let me know if you still see it.",
+          className: "w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-2 border-t border-gray-200", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setResolveOpen(false),
+            disabled: resolve.isPending,
+            className: "px-3 py-1.5 text-sm rounded-lg font-medium bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: submitResolve,
+            disabled: resolve.isPending,
+            className: "px-3 py-1.5 text-sm rounded-lg font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors",
+            children: resolve.isPending ? "Resolving..." : "Resolve"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+var GROUP_COLORS = {
+  success: "bg-green-100 text-green-800",
+  active: "bg-blue-100 text-blue-800",
+  queued: "bg-indigo-100 text-indigo-800",
+  info: "bg-sky-100 text-sky-800",
+  pending: "bg-yellow-100 text-yellow-800",
+  warning: "bg-orange-100 text-orange-800",
+  danger: "bg-red-100 text-red-800",
+  draft: "bg-gray-300 text-gray-800",
+  neutral: "bg-gray-100 text-gray-800"
+};
+var StatusGroupsContext = createContext({});
+function StatusBadgeProvider({
+  groups,
+  children
+}) {
+  return /* @__PURE__ */ jsx(StatusGroupsContext.Provider, { value: groups, children });
+}
+function StatusBadge({ status }) {
+  const groups = useContext(StatusGroupsContext);
+  const group = groups[status] ?? "neutral";
+  const color = GROUP_COLORS[group];
+  const label = status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${color}`, children: label });
+}
+
+// src/version.ts
+var APP_VERSION = "";
+
+// src/changelog.ts
+var changelog = [];
+var changelog_default = changelog;
+
+// src/utils/reportBug.ts
+async function captureViewport() {
+  try {
+    const stream = await navigator.mediaDevices.getDisplayMedia({
+      video: { displaySurface: "browser" },
+      audio: false,
+      // Chromium-only hints — ignored by other engines, no harm done.
+      preferCurrentTab: true,
+      selfBrowserSurface: "include",
+      surfaceSwitching: "exclude"
+    });
+    const video = document.createElement("video");
+    video.srcObject = stream;
+    video.muted = true;
+    await video.play();
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d").drawImage(video, 0, 0);
+    stream.getTracks().forEach((t) => t.stop());
+    return await new Promise((resolve) => {
+      canvas.toBlob((b) => resolve(b), "image/jpeg", 0.9);
+    });
+  } catch (err) {
+    console.error("Bug report screenshot failed:", err);
+    return null;
+  }
+}
+async function reportBug(submit) {
+  const screenshot = await captureViewport();
+  const submission = await openBugReportDialog(screenshot);
+  if (submission === null) return;
+  try {
+    await submit({
+      description: submission.description || void 0,
+      screenshot: screenshot ?? void 0,
+      url: window.location.href,
+      userAgent: navigator.userAgent,
+      viewport: `${window.innerWidth}x${window.innerHeight}`
+    });
+    toast_default.success("Bug report sent to admins.");
+  } catch (err) {
+    toast_default.error(err?.response?.data?.detail || "Failed to send bug report.");
+  }
+}
+var ENTITY_ICON_COLORS = {
+  order: "text-blue-600",
+  purchase_order: "text-purple-600",
+  invoice: "text-green-600",
+  client: "text-indigo-600",
+  manufacturer: "text-orange-600",
+  shipment: "text-teal-600",
+  part_number: "text-gray-600",
+  project: "text-pink-600",
+  mould: "text-red-600",
+  design: "text-cyan-600",
+  brand: "text-amber-600",
+  price_sheet: "text-emerald-600",
+  folder: "text-yellow-600",
+  page: "text-blue-500"
+};
+var ENTITY_ICONS = {
+  order: "SO",
+  purchase_order: "PO",
+  invoice: "INV",
+  client: "CLI",
+  manufacturer: "MFR",
+  shipment: "DN",
+  part_number: "PN",
+  project: "PRJ",
+  mould: "MLD",
+  design: "DSN",
+  brand: "BRD",
+  price_sheet: "PS",
+  vendor_invoice: "VI",
+  vendor_payment: "VP",
+  warranty_claim: "WC",
+  qc_report: "QC",
+  vendor_shipment: "GRN",
+  bank_account: "BA",
+  wheel_finish: "WF",
+  weight_log: "WL",
+  production_progress: "PP",
+  vendor_price_sheet: "VPS",
+  proposal: "PR",
+  folder: "FLD"
+};
+var GRID = 90;
+function snapToGrid(x, y) {
+  return { x: Math.round(x / GRID) * GRID, y: Math.round(y / GRID) * GRID };
+}
+var DesktopHostContext = createContext({});
+function DesktopHostProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(DesktopHostContext.Provider, { value, children });
+}
+function useDesktopHost() {
+  return useContext(DesktopHostContext);
+}
+function Desktop({ profile }) {
+  useQueryClient();
+  const { openEntity, openPage } = useWindowManager();
+  const bugReport = useBugReport();
+  const containerRef = useRef(null);
+  const favDocs = (profile?.preferences || {}).favorite_documents || [];
+  const folders = (profile?.preferences || {}).desktop_folders || [];
+  const snapEnabled = (profile?.preferences || {}).desktop_snap ?? false;
+  const allNotes = (profile?.preferences || {}).notepad_notes || [];
+  const stickyNotes = allNotes.filter((n) => n.sticky);
+  const host = useDesktopHost();
+  const openStickyRef = async (prefix, number) => {
+    const refNum = `${prefix}#${number}`;
+    if (!host.stickyResolver) {
+      toast_default.error(`Unknown reference: ${refNum}`);
+      return;
+    }
+    try {
+      const result = await host.stickyResolver(prefix, number);
+      if (result) openEntity(result.entityType, result.entityId, result.snapshot, result.label ?? refNum);
+      else toast_default.error(`${refNum} not found`);
+    } catch {
+      toast_default.error(`Failed to open ${refNum}`);
+    }
+  };
+  const toggleStickyCheckbox = (noteId, charIndex) => {
+    const note = allNotes.find((n) => n.id === noteId);
+    if (!note) return;
+    const content = note.content;
+    const match = content.slice(charIndex).match(/^\[([ xX]?)\]/);
+    if (!match) return;
+    const isChecked = match[1] === "x" || match[1] === "X";
+    const replacement = isChecked ? "[ ]" : "[x]";
+    const updated = content.slice(0, charIndex) + replacement + content.slice(charIndex + match[0].length);
+    saveNotes(allNotes.map((n) => n.id === noteId ? { ...n, content: updated, updated_at: (/* @__PURE__ */ new Date()).toISOString() } : n));
+  };
+  const renderStickyContent = (noteId, text) => {
+    if (!text) return [];
+    const lines = text.split("\n");
+    let charOffset = 0;
+    return lines.map((line, li) => {
+      const lineStart = charOffset;
+      charOffset += line.length + 1;
+      const tokens = [];
+      const refRegex = /([A-Z]{2,4})#(\d{4,6})/g;
+      let m;
+      while ((m = refRegex.exec(line)) !== null) {
+        if (host.stickyResolver) {
+          const prefix = m[1], num = m[2], startIdx = m.index, matchText = m[0];
+          tokens.push({ idx: startIdx, len: matchText.length, render: () => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                openStickyRef(prefix, num);
+              },
+              className: "text-blue-700 hover:underline font-medium cursor-pointer",
+              children: matchText
+            },
+            `r-${li}-${startIdx}`
+          ) });
+        }
+      }
+      const cbRegex = /\[([ xX]?)\]/g;
+      while ((m = cbRegex.exec(line)) !== null) {
+        const isChecked = m[1] === "x" || m[1] === "X";
+        const startIdx = m.index;
+        const contentCharIdx = lineStart + startIdx;
+        tokens.push({ idx: startIdx, len: m[0].length, render: () => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              toggleStickyCheckbox(noteId, contentCharIdx);
+            },
+            className: `inline-flex items-center justify-center w-3.5 h-3.5 rounded border ${isChecked ? "bg-blue-500 border-blue-500 text-white" : "border-gray-500 bg-white/50 hover:border-blue-400"} cursor-pointer align-text-bottom mr-0.5`,
+            children: isChecked && /* @__PURE__ */ jsx("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" }) })
+          },
+          `c-${li}-${startIdx}`
+        ) });
+      }
+      tokens.sort((a, b) => a.idx - b.idx);
+      const parts = [];
+      let lastIdx = 0;
+      for (const t of tokens) {
+        if (t.idx > lastIdx) parts.push(/* @__PURE__ */ jsx("span", { children: line.slice(lastIdx, t.idx) }, `t-${li}-${lastIdx}`));
+        parts.push(t.render());
+        lastIdx = t.idx + t.len;
+      }
+      if (lastIdx < line.length) parts.push(/* @__PURE__ */ jsx("span", { children: line.slice(lastIdx) }, `t-${li}-${lastIdx}`));
+      if (parts.length === 0) parts.push(/* @__PURE__ */ jsx("span", { children: "\u200B" }, `e-${li}`));
+      const lineHasChecked = /^\[x\]/i.test(line.trimStart());
+      return /* @__PURE__ */ jsx("div", { className: lineHasChecked ? "line-through opacity-50" : "", children: parts }, li);
+    });
+  };
+  const [dragging, setDragging] = useState(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [rubberBand, setRubberBand] = useState(null);
+  const [openFolder, setOpenFolder] = useState(null);
+  const [aboutOpen, setAboutOpen] = useState(false);
+  const [whatsNewOpen, setWhatsNewOpen] = useState(false);
+  const [renamingFolder, setRenamingFolder] = useState(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [editingStickyId, setEditingStickyId] = useState(null);
+  const [stickyDrag, setStickyDrag] = useState(null);
+  const [stickyResize, setStickyResize] = useState(null);
+  const saveDocs = useCallback((docs) => {
+    host.saveShortcuts?.(docs);
+  }, [host]);
+  const saveFolders = useCallback((f) => {
+    host.saveFolders?.(f);
+  }, [host]);
+  useCallback((v) => {
+    host.saveSnap?.(v);
+  }, [host]);
+  const getDefaultPos = (idx) => {
+    const col = Math.floor(idx / 8);
+    const row = idx % 8;
+    return { right: 20 + col * GRID, top: 20 + row * GRID };
+  };
+  const getItemPos = (item, idx) => {
+    if (item.x != null && item.y != null) return { right: item.x, top: item.y };
+    return getDefaultPos(idx);
+  };
+  const getFolderPos = (folder, idx) => {
+    if (folder.x != null && folder.y != null) return { right: folder.x, top: folder.y };
+    return getDefaultPos(favDocs.filter((d) => !d.folderId).length + idx);
+  };
+  const desktopItems = favDocs.filter((d) => !d.folderId);
+  const folderItems = (folderId) => favDocs.filter((d) => d.folderId === folderId);
+  const [localPositions, setLocalPositions] = useState({});
+  const dragElRef = useRef(null);
+  const startDrag = (type, idx, e) => {
+    if (e.button !== 0) return;
+    const items = type === "item" ? desktopItems : folders;
+    const item = items[idx];
+    const pos = type === "item" ? getItemPos(item, idx) : getFolderPos(item, idx);
+    setDragging({ type, idx, startX: e.clientX, startY: e.clientY, origX: pos.right, origY: pos.top });
+    dragElRef.current = e.target.closest("[data-desktop-icon]");
+    e.preventDefault();
+  };
+  useEffect(() => {
+    if (!dragging) return;
+    const el = dragElRef.current;
+    const move = (e) => {
+      const nr = dragging.origX - (e.clientX - dragging.startX);
+      const nt = dragging.origY + e.clientY - dragging.startY;
+      if (el) {
+        el.style.right = `${nr}px`;
+        el.style.top = `${nt}px`;
+        el.style.left = "auto";
+        el.style.zIndex = "100";
+        el.style.opacity = "0.7";
+      }
+    };
+    const up = (e) => {
+      let finalRight = dragging.origX - (e.clientX - dragging.startX);
+      let finalTop = Math.max(0, dragging.origY + e.clientY - dragging.startY);
+      if (snapEnabled) {
+        const s = snapToGrid(finalRight, finalTop);
+        finalRight = s.x;
+        finalTop = s.y;
+      }
+      finalRight = Math.max(0, finalRight);
+      if (el) {
+        el.style.zIndex = "";
+        el.style.opacity = "";
+      }
+      if (dragging.type === "item") {
+        const droppedOnFolder = folders.find((f, fi) => {
+          const fp = getFolderPos(f, fi);
+          return Math.abs(finalRight - fp.right) < 40 && Math.abs(finalTop - fp.top) < 40;
+        });
+        const updated = [...favDocs];
+        const desktopIdx = favDocs.indexOf(desktopItems[dragging.idx]);
+        if (droppedOnFolder) {
+          updated[desktopIdx] = { ...updated[desktopIdx], folderId: droppedOnFolder.id, x: void 0, y: void 0 };
+        } else {
+          updated[desktopIdx] = { ...updated[desktopIdx], x: finalRight, y: finalTop, folderId: void 0 };
+          setLocalPositions((prev) => ({ ...prev, [`item-${desktopIdx}`]: { right: finalRight, top: finalTop } }));
+        }
+        saveDocs(updated);
+      } else {
+        const updated = [...folders];
+        updated[dragging.idx] = { ...updated[dragging.idx], x: finalRight, y: finalTop };
+        setLocalPositions((prev) => ({ ...prev, [`folder-${dragging.idx}`]: { right: finalRight, top: finalTop } }));
+        saveFolders(updated);
+      }
+      setDragging(null);
+      dragElRef.current = null;
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [dragging, snapEnabled, favDocs, folders, desktopItems]);
+  const favDocsKey = JSON.stringify(favDocs.map((d) => d.entityId));
+  const foldersKey = JSON.stringify(folders.map((f) => f.id));
+  useEffect(() => {
+    setLocalPositions({});
+  }, [favDocsKey, foldersKey]);
+  const startRubberBand = (e) => {
+    if (e.button !== 0 || e.target !== containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setRubberBand({ startX: x, startY: y, endX: x, endY: y });
+    setSelected(/* @__PURE__ */ new Set());
+  };
+  useEffect(() => {
+    if (!rubberBand) return;
+    const move = (e) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setRubberBand((prev) => prev ? { ...prev, endX: e.clientX - rect.left, endY: e.clientY - rect.top } : null);
+    };
+    const up = () => {
+      if (rubberBand) {
+        const minX = Math.min(rubberBand.startX, rubberBand.endX);
+        const maxX = Math.max(rubberBand.startX, rubberBand.endX);
+        const minY = Math.min(rubberBand.startY, rubberBand.endY);
+        const maxY = Math.max(rubberBand.startY, rubberBand.endY);
+        const sel = /* @__PURE__ */ new Set();
+        const cw = containerRef.current?.clientWidth || 800;
+        desktopItems.forEach((item, i) => {
+          const pos = getItemPos(item, i);
+          const leftX = cw - pos.right - 80;
+          if (leftX + 40 > minX && leftX < maxX && pos.top + 40 > minY && pos.top < maxY) {
+            sel.add(`item-${i}`);
+          }
+        });
+        folders.forEach((f, i) => {
+          const pos = getFolderPos(f, i);
+          const leftX = cw - pos.right - 80;
+          if (leftX + 40 > minX && leftX < maxX && pos.top + 40 > minY && pos.top < maxY) {
+            sel.add(`folder-${i}`);
+          }
+        });
+        setSelected(sel);
+      }
+      setRubberBand(null);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [rubberBand]);
+  const handleDesktopContextMenu = (e) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY });
+  };
+  const handleItemContextMenu = (e, itemIdx) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ x: e.clientX, y: e.clientY, itemIdx });
+  };
+  const handleFolderContextMenu = (e, folderIdx) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ x: e.clientX, y: e.clientY, folderIdx });
+  };
+  useEffect(() => {
+    if (!contextMenu) return;
+    const handler = () => setContextMenu(null);
+    window.addEventListener("click", handler);
+    return () => window.removeEventListener("click", handler);
+  }, [contextMenu]);
+  const createFolder = () => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    const x = contextMenu ? contextMenu.x - (rect?.left || 0) : 100;
+    const y = contextMenu ? contextMenu.y - (rect?.top || 0) : 100;
+    const id = `folder-${Date.now()}`;
+    saveFolders([...folders, { id, name: "New Folder", x, y }]);
+    setContextMenu(null);
+    setRenamingFolder(id);
+    setRenameValue("New Folder");
+  };
+  const doSnapAll = () => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    const h = rect?.height || 600;
+    const colCount = Math.max(1, Math.floor(h / GRID));
+    let slot = 0;
+    const getSlotPos = () => {
+      const col = Math.floor(slot / colCount);
+      const row = slot % colCount;
+      slot++;
+      return { right: 20 + col * GRID, top: 10 + row * GRID };
+    };
+    const updatedF = folders.map((f) => {
+      const pos = getSlotPos();
+      return { ...f, x: pos.right, y: pos.top };
+    });
+    saveFolders(updatedF);
+    const updated = favDocs.map((d) => {
+      if (d.folderId) return d;
+      const pos = getSlotPos();
+      return { ...d, x: pos.right, y: pos.top };
+    });
+    saveDocs(updated);
+    setContextMenu(null);
+  };
+  const removeItem = (idx) => {
+    const desktopIdx = favDocs.indexOf(desktopItems[idx]);
+    saveDocs(favDocs.filter((_, i) => i !== desktopIdx));
+    setContextMenu(null);
+  };
+  const removeFolder = (idx) => {
+    const folder = folders[idx];
+    const updated = favDocs.map((d) => d.folderId === folder.id ? { ...d, folderId: void 0 } : d);
+    saveDocs(updated);
+    saveFolders(folders.filter((_, i) => i !== idx));
+    setContextMenu(null);
+  };
+  const renameFolder = (id, name) => {
+    saveFolders(folders.map((f) => f.id === id ? { ...f, name } : f));
+    setRenamingFolder(null);
+  };
+  const saveNotes = useCallback((updated) => {
+    host.saveNotes?.(updated);
+  }, [host]);
+  const createStickyNote = () => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    const x = contextMenu ? contextMenu.x - (rect?.left || 0) : 100;
+    const y = contextMenu ? contextMenu.y - (rect?.top || 0) : 100;
+    const n = {
+      id: `note-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+      title: "",
+      content: "",
+      color: "yellow",
+      sticky: true,
+      sticky_x: x,
+      sticky_y: y,
+      updated_at: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    saveNotes([n, ...allNotes]);
+    setEditingStickyId(n.id);
+    setContextMenu(null);
+  };
+  const updateStickyContent = (id, content) => {
+    saveNotes(allNotes.map((n) => n.id === id ? { ...n, content, updated_at: (/* @__PURE__ */ new Date()).toISOString() } : n));
+  };
+  const removeStickyFromDesktop = (id) => {
+    saveNotes(allNotes.map((n) => n.id === id ? { ...n, sticky: false } : n));
+  };
+  const deleteStickyNote = (id) => {
+    saveNotes(allNotes.filter((n) => n.id !== id));
+  };
+  const cycleStickyColor = (id) => {
+    const STICKY_COLORS = ["yellow", "blue", "green", "pink", "purple", "orange"];
+    const note = allNotes.find((n) => n.id === id);
+    if (!note) return;
+    const idx = STICKY_COLORS.indexOf(note.color);
+    const next = STICKY_COLORS[(idx + 1) % STICKY_COLORS.length];
+    saveNotes(allNotes.map((n) => n.id === id ? { ...n, color: next } : n));
+  };
+  const toggleStickyOnTop = (id) => {
+    saveNotes(allNotes.map((n) => n.id === id ? { ...n, sticky_on_top: !n.sticky_on_top } : n));
+  };
+  useEffect(() => {
+    if (!stickyDrag) return;
+    const move = (e) => {
+      const el = document.querySelector(`[data-sticky-id="${stickyDrag.id}"]`);
+      if (el) {
+        el.style.left = `${stickyDrag.origX + e.clientX - stickyDrag.startX}px`;
+        el.style.right = "auto";
+        el.style.top = `${stickyDrag.origY + e.clientY - stickyDrag.startY}px`;
+      }
+    };
+    const up = (e) => {
+      const finalX = stickyDrag.origX + e.clientX - stickyDrag.startX;
+      const finalY = Math.max(0, stickyDrag.origY + e.clientY - stickyDrag.startY);
+      const el = document.querySelector(`[data-sticky-id="${stickyDrag.id}"]`);
+      const noteW = el?.offsetWidth ?? 192;
+      const centerX = finalX + noteW / 2;
+      const anchor = centerX > window.innerWidth / 2 ? "right" : "left";
+      const xVal = anchor === "right" ? window.innerWidth - finalX - noteW : finalX;
+      saveNotes(allNotes.map((n) => n.id === stickyDrag.id ? { ...n, sticky_x: xVal, sticky_y: finalY, sticky_anchor: anchor } : n));
+      if (el) {
+        el.style.left = "";
+        el.style.right = "";
+      }
+      setStickyDrag(null);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [stickyDrag, allNotes]);
+  useEffect(() => {
+    if (!stickyResize) return;
+    const move = (e) => {
+      const el = document.querySelector(`[data-sticky-id="${stickyResize.id}"]`);
+      if (el) {
+        el.style.width = `${Math.max(140, stickyResize.origW + e.clientX - stickyResize.startX)}px`;
+        el.style.height = `${Math.max(100, stickyResize.origH + e.clientY - stickyResize.startY)}px`;
+      }
+    };
+    const up = (e) => {
+      const finalW = Math.max(140, stickyResize.origW + e.clientX - stickyResize.startX);
+      const finalH = Math.max(100, stickyResize.origH + e.clientY - stickyResize.startY);
+      saveNotes(allNotes.map((n) => n.id === stickyResize.id ? { ...n, sticky_w: finalW, sticky_h: finalH } : n));
+      setStickyResize(null);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [stickyResize, allNotes]);
+  const STICKY_BG = {
+    yellow: "bg-yellow-100 border-yellow-300",
+    blue: "bg-blue-100 border-blue-300",
+    green: "bg-green-100 border-green-300",
+    pink: "bg-pink-100 border-pink-300",
+    purple: "bg-purple-100 border-purple-300",
+    orange: "bg-orange-100 border-orange-300"
+  };
+  const renderIcon = (entityType, label, isSelected, entityId) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-20 p-2", children: [
+    entityType === "folder" ? /* @__PURE__ */ jsx("div", { className: `w-12 h-12 flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: /* @__PURE__ */ jsxs("svg", { className: "h-12 w-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)]", viewBox: "0 0 48 48", children: [
+      /* @__PURE__ */ jsx("path", { d: "M6 12a4 4 0 014-4h10l4 4h14a4 4 0 014 4v20a4 4 0 01-4 4H10a4 4 0 01-4-4V12z", fill: "white", stroke: "#eab308", strokeWidth: "2", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("path", { d: "M6 18h36", stroke: "#eab308", strokeWidth: "1.5" })
+    ] }) }) : entityType === "page" ? /* @__PURE__ */ jsx("div", { className: `w-12 h-12 flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: (() => {
+      const icon = navIcons[label] || (entityId ? navIcons[entityId] : void 0);
+      if (icon && isValidElement(icon)) {
+        return cloneElement(icon, { className: "h-10 w-10 text-white drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]" });
+      }
+      return /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-white drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6z" }) });
+    })() }) : /* @__PURE__ */ jsxs("div", { className: `w-12 h-12 relative flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: [
+      /* @__PURE__ */ jsxs("svg", { className: `w-10 h-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)] ${ENTITY_ICON_COLORS[entityType] || "text-gray-500"}`, viewBox: "0 0 40 48", fill: "none", children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 0h22l10 10v34a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4z", fill: "white", fillOpacity: "0.92" }),
+        /* @__PURE__ */ jsx("path", { d: "M26 0l10 10H30a4 4 0 01-4-4V0z", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 0h22l10 10v34a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4z", stroke: "currentColor", strokeWidth: "1.5", strokeOpacity: "0.5" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: `absolute inset-0 flex items-center justify-center text-[9px] font-bold pt-2 ${ENTITY_ICON_COLORS[entityType] || "text-gray-600"}`, children: ENTITY_ICONS[entityType] || entityType.slice(0, 3).toUpperCase() })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium text-center leading-tight w-full drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)] ${isSelected ? "text-blue-200 bg-blue-600/60 rounded px-1" : "text-white"}`, children: label })
+  ] });
+  const menuStyle = (x, y) => ({
+    ...x + 180 > window.innerWidth ? { right: window.innerWidth - x } : { left: x },
+    ...y + 250 > window.innerHeight ? { bottom: window.innerHeight - y } : { top: y }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "flex-1 relative overflow-hidden",
+      onPointerDown: startRubberBand,
+      onContextMenu: handleDesktopContextMenu,
+      onClick: () => {
+        setSelected(/* @__PURE__ */ new Set());
+        setContextMenu(null);
+      },
+      children: [
+        desktopItems.map((doc, i) => {
+          const docIdx = favDocs.indexOf(doc);
+          const pos = localPositions[`item-${docIdx}`] || getItemPos(doc, i);
+          const isSelected = selected.has(`item-${i}`);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-desktop-icon": true,
+              style: { position: "absolute", right: pos.right, top: pos.top, zIndex: 1 },
+              onPointerDown: (e) => {
+                e.stopPropagation();
+                startDrag("item", i, e);
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                setSelected(/* @__PURE__ */ new Set([`item-${i}`]));
+              },
+              onContextMenu: (e) => handleItemContextMenu(e, i),
+              onDoubleClick: (e) => {
+                e.stopPropagation();
+                doc.entityType === "page" ? openPage(doc.entityId) : openEntity(doc.entityType, doc.entityId, null, doc.label);
+              },
+              className: "cursor-default select-none",
+              children: renderIcon(doc.entityType, doc.label, isSelected, doc.entityId)
+            },
+            `item-${doc.entityType}-${doc.entityId}-${i}`
+          );
+        }),
+        folders.map((folder, i) => {
+          const pos = localPositions[`folder-${i}`] || getFolderPos(folder, i);
+          const isSelected = selected.has(`folder-${i}`);
+          const itemCount = folderItems(folder.id).length;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-desktop-icon": true,
+              style: { position: "absolute", right: pos.right, top: pos.top, zIndex: 1 },
+              onPointerDown: (e) => {
+                e.stopPropagation();
+                startDrag("folder", i, e);
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                setSelected(/* @__PURE__ */ new Set([`folder-${i}`]));
+              },
+              onContextMenu: (e) => handleFolderContextMenu(e, i),
+              onDoubleClick: (e) => {
+                e.stopPropagation();
+                setOpenFolder(folder.id);
+              },
+              className: "cursor-default select-none",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-20 p-2", children: [
+                /* @__PURE__ */ jsx("div", { className: `w-12 h-12 flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: /* @__PURE__ */ jsxs("svg", { className: "h-12 w-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)]", viewBox: "0 0 48 48", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M6 12a4 4 0 014-4h10l4 4h14a4 4 0 014 4v20a4 4 0 01-4 4H10a4 4 0 01-4-4V12z", fill: "white", stroke: "#eab308", strokeWidth: "2", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M6 18h36", stroke: "#eab308", strokeWidth: "1.5" })
+                ] }) }),
+                renamingFolder === folder.id ? /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    autoFocus: true,
+                    value: renameValue,
+                    onChange: (e) => setRenameValue(e.target.value),
+                    onBlur: () => renameFolder(folder.id, renameValue),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") renameFolder(folder.id, renameValue);
+                      if (e.key === "Escape") setRenamingFolder(null);
+                    },
+                    className: "text-[10px] w-full text-center bg-white/80 rounded px-1 outline-none",
+                    onClick: (e) => e.stopPropagation()
+                  }
+                ) : /* @__PURE__ */ jsxs("span", { className: `text-[10px] font-medium text-center leading-tight w-full drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)] ${isSelected ? "text-blue-200 bg-blue-600/60 rounded px-1" : "text-white"}`, children: [
+                  folder.name,
+                  itemCount > 0 ? ` (${itemCount})` : ""
+                ] })
+              ] })
+            },
+            `folder-${folder.id}`
+          );
+        }),
+        stickyNotes.map((note) => {
+          const xVal = note.sticky_x ?? 100;
+          const y = note.sticky_y ?? 100;
+          const w = note.sticky_w ?? 192;
+          const h = note.sticky_h ?? 148;
+          const anchor = note.sticky_anchor || "left";
+          const bg = STICKY_BG[note.color] || STICKY_BG.yellow;
+          const isEditing = editingStickyId === note.id;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-sticky-id": note.id,
+              style: { position: "absolute", ...anchor === "right" ? { right: xVal } : { left: xVal }, top: y, width: w, height: h, zIndex: note.sticky_on_top ? 200 : isEditing ? 50 : 10 },
+              onClick: (e) => e.stopPropagation(),
+              className: `rounded-lg shadow-lg border ${bg} select-none flex flex-col`,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-between px-2 py-1 cursor-move border-b border-black/5",
+                    onPointerDown: (e) => {
+                      if (e.button !== 0) return;
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const el = e.target.closest("[data-sticky-id]");
+                      const actualLeft = el ? el.getBoundingClientRect().left - (containerRef.current?.getBoundingClientRect().left ?? 0) : anchor === "right" ? window.innerWidth - xVal - w : xVal;
+                      setStickyDrag({ id: note.id, startX: e.clientX, startY: e.clientY, origX: actualLeft, origY: y });
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            cycleStickyColor(note.id);
+                          },
+                          title: "Change color",
+                          className: "w-3 h-3 rounded-full bg-black/10 hover:bg-black/20 transition-colors"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggleStickyOnTop(note.id);
+                            },
+                            title: note.sticky_on_top ? "Remove from top" : "Always on top",
+                            className: `p-0.5 rounded transition-colors ${note.sticky_on_top ? "text-blue-500" : "text-black/20 hover:text-black/50"}`,
+                            children: /* @__PURE__ */ jsxs("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
+                              /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.914 5.046a5.25 5.25 0 01-1.414 0M15.75 9v6" }),
+                              /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12.75 12l3 3 3-3" })
+                            ] })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              removeStickyFromDesktop(note.id);
+                            },
+                            title: "Unpin from desktop",
+                            className: "p-0.5 rounded text-black/20 hover:text-black/50 transition-colors",
+                            children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 12h-15" }) })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              deleteStickyNote(note.id);
+                            },
+                            title: "Delete note",
+                            className: "p-0.5 rounded text-black/20 hover:text-red-500 transition-colors",
+                            children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                isEditing ? /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    autoFocus: true,
+                    defaultValue: note.content,
+                    onBlur: (e) => {
+                      updateStickyContent(note.id, e.target.value);
+                      setEditingStickyId(null);
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Escape") {
+                        updateStickyContent(note.id, e.target.value);
+                        setEditingStickyId(null);
+                      }
+                    },
+                    className: "flex-1 w-full p-2 text-xs leading-relaxed bg-transparent outline-none resize-none placeholder:text-black/30",
+                    placeholder: "Write something..."
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "flex-1 p-2 cursor-text overflow-hidden", onDoubleClick: (e) => {
+                  e.stopPropagation();
+                  setEditingStickyId(note.id);
+                }, children: /* @__PURE__ */ jsx("div", { className: "text-xs leading-relaxed text-black/70", children: note.content ? renderStickyContent(note.id, note.content) : /* @__PURE__ */ jsx("span", { className: "text-black/30 italic", children: "Double-click to edit..." }) }) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize",
+                    onPointerDown: (e) => {
+                      if (e.button !== 0) return;
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const el = e.target.closest("[data-sticky-id]");
+                      setStickyResize({ id: note.id, startX: e.clientX, startY: e.clientY, origW: el?.offsetWidth ?? w, origH: el?.offsetHeight ?? h });
+                    },
+                    children: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 text-black/15 absolute bottom-0.5 right-0.5", viewBox: "0 0 12 12", fill: "currentColor", children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.5" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "6", cy: "10", r: "1.5" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "6", r: "1.5" })
+                    ] })
+                  }
+                )
+              ]
+            },
+            `sticky-${note.id}`
+          );
+        }),
+        rubberBand && /* @__PURE__ */ jsx("div", { className: "absolute border border-blue-400 bg-blue-400/10 pointer-events-none", style: {
+          left: Math.min(rubberBand.startX, rubberBand.endX),
+          top: Math.min(rubberBand.startY, rubberBand.endY),
+          width: Math.abs(rubberBand.endX - rubberBand.startX),
+          height: Math.abs(rubberBand.endY - rubberBand.startY)
+        } }),
+        contextMenu && contextMenu.itemIdx == null && contextMenu.folderIdx == null && /* @__PURE__ */ jsxs(PopupMenu, { style: menuStyle(contextMenu.x, contextMenu.y), children: [
+          /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: createStickyNote, children: [
+            /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 text-yellow-500", fill: "currentColor", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ jsx("path", { d: "M4 4a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V4z", opacity: "0.8" }),
+              /* @__PURE__ */ jsx("path", { d: "M14 14v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-6", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+            ] }),
+            "New Sticky Note"
+          ] }),
+          /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: createFolder, children: [
+            /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-yellow-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" }) }),
+            "Create Folder"
+          ] }),
+          /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: doSnapAll, 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: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" }) }),
+            "Snap to Grid"
+          ] }),
+          /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+          /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => {
+            setContextMenu(null);
+            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"
+          ] }),
+          /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => {
+            setContextMenu(null);
+            openPage("/settings/favorites");
+          }, 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: "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" }) }),
+            "Favorites"
+          ] }),
+          /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => {
+            setContextMenu(null);
+            setAboutOpen(true);
+          }, 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: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" }) }),
+            "About ",
+            host.productName ?? "this app"
+          ] }),
+          bugReport && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+            /* @__PURE__ */ jsxs(PopupMenuItem, { onClick: () => {
+              setContextMenu(null);
+              reportBug(bugReport.submit);
+            }, 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: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
+              "Report Bug"
+            ] })
+          ] })
+        ] }),
+        contextMenu && contextMenu.itemIdx != null && /* @__PURE__ */ jsxs(PopupMenu, { style: menuStyle(contextMenu.x, contextMenu.y), minWidth: 160, children: [
+          /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
+            const d = desktopItems[contextMenu.itemIdx];
+            d.entityType === "page" ? openPage(d.entityId) : openEntity(d.entityType, d.entityId, null, d.label);
+            setContextMenu(null);
+          }, children: "Open" }),
+          /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+          /* @__PURE__ */ jsx(PopupMenuItem, { danger: true, onClick: () => removeItem(contextMenu.itemIdx), children: "Remove Shortcut" })
+        ] }),
+        contextMenu && contextMenu.folderIdx != null && /* @__PURE__ */ jsxs(PopupMenu, { style: menuStyle(contextMenu.x, contextMenu.y), minWidth: 160, children: [
+          /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
+            setOpenFolder(folders[contextMenu.folderIdx].id);
+            setContextMenu(null);
+          }, children: "Open" }),
+          /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
+            setRenamingFolder(folders[contextMenu.folderIdx].id);
+            setRenameValue(folders[contextMenu.folderIdx].name);
+            setContextMenu(null);
+          }, children: "Rename" }),
+          /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+          /* @__PURE__ */ jsx(PopupMenuItem, { danger: true, onClick: () => removeFolder(contextMenu.folderIdx), children: "Delete Folder" })
+        ] }),
+        openFolder && (() => {
+          const folder = folders.find((f) => f.id === openFolder);
+          if (!folder) return null;
+          const items = folderItems(openFolder);
+          return /* @__PURE__ */ jsx(Modal, { open: true, onClose: () => setOpenFolder(null), title: folder.name, size: "lg", children: items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 text-center py-8", children: "Folder is empty. Drag documents here." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 p-2", children: items.map((item, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "group relative flex flex-col items-center gap-1 w-20 p-2 rounded-lg hover:bg-gray-100 cursor-default",
+              onDoubleClick: () => openEntity(item.entityType, item.entityId, null, item.label),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      const updated = favDocs.map((d) => d.entityType === item.entityType && d.entityId === item.entityId && d.folderId === openFolder ? { ...d, folderId: void 0 } : d);
+                      saveDocs(updated);
+                    },
+                    title: "Move to Desktop",
+                    className: "absolute -top-1 -right-1 h-5 w-5 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-100 hover:text-red-600 shadow-sm z-10",
+                    children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: `w-12 h-12 rounded-lg bg-gray-50 shadow flex items-center justify-center text-xs font-bold ${ENTITY_ICON_COLORS[item.entityType] || "text-gray-600"}`, children: ENTITY_ICONS[item.entityType] || item.entityType.slice(0, 3).toUpperCase() }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-700 font-medium text-center leading-tight truncate w-full", children: item.label })
+              ]
+            },
+            i
+          )) }) });
+        })(),
+        aboutOpen && (() => {
+          const version = APP_VERSION;
+          (profile?.preferences || {}).show_desktop_version ?? true;
+          return /* @__PURE__ */ jsx(Modal, { open: true, onClose: () => setAboutOpen(false), title: `About ${host.productName ?? "this app"}`, size: "sm", bodyScroll: false, compact: true, dimensions: [340, 420], children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 pt-4 pb-3 w-full", children: [
+              /* @__PURE__ */ jsx("img", { src: host.productIcon ?? "/favicon.svg", alt: "", className: "h-16 w-16" }),
+              /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-gray-900 tracking-wide", children: host.productName ?? "react-os-shell" }),
+                host.productTagline && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: host.productTagline }),
+                /* @__PURE__ */ jsx("p", { className: "text-[11px] text-gray-400 mt-1 font-mono", children: version })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "py-3 border-t border-gray-200 w-full px-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[10px] font-semibold text-gray-400 uppercase tracking-wide mb-2 text-center", children: "Open Source Licenses" }),
+              /* @__PURE__ */ jsx("div", { className: "max-h-40 overflow-y-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-[11px]", children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-gray-500 border-b border-gray-100", children: [
+                  /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: "Package" }),
+                  /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: "License" })
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-50", children: [
+                  ["React", "MIT", "facebook/react"],
+                  ["React DOM", "MIT", "facebook/react"],
+                  ["React Router", "MIT", "remix-run/react-router"],
+                  ["TanStack Query", "MIT", "TanStack/query"],
+                  ["TanStack Table", "MIT", "TanStack/table"],
+                  ["React Hook Form", "MIT", "react-hook-form"],
+                  ["Axios", "MIT", "axios/axios"],
+                  ["Tailwind CSS", "MIT", "tailwindlabs/tailwindcss"],
+                  ["Headless UI", "MIT", "tailwindlabs/headlessui"],
+                  ["Heroicons", "MIT", "tailwindlabs/heroicons"],
+                  ["Recharts", "MIT", "recharts/recharts"],
+                  ["Zod", "MIT", "colinhacks/zod"],
+                  ["Vite", "MIT", "vitejs/vite"],
+                  ["TypeScript", "Apache-2.0", "microsoft/TypeScript"],
+                  ["jSpreadsheet CE", "MIT", "jspreadsheet/ce"],
+                  ["Django", "BSD-3", "django/django"],
+                  ["Django REST Framework", "BSD-3", "encode/django-rest-framework"],
+                  ["PostgreSQL", "PostgreSQL", "postgres/postgres"],
+                  ["Gunicorn", "MIT", "benoitc/gunicorn"]
+                ].map(([name, license, repo]) => /* @__PURE__ */ jsxs("tr", { className: "text-gray-600", children: [
+                  /* @__PURE__ */ jsx("td", { className: "py-1", children: /* @__PURE__ */ jsx("a", { href: `https://github.com/${repo}`, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", children: name }) }),
+                  /* @__PURE__ */ jsx("td", { className: "py-1 text-gray-400", children: license })
+                ] }, name)) })
+              ] }) })
+            ] }),
+            (host.productCopyright || host.productWebsite) && /* @__PURE__ */ jsxs("div", { className: "pt-3 pb-2 border-t border-gray-200 w-full text-center", children: [
+              host.productCopyright && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400", children: host.productCopyright }),
+              host.productWebsite && /* @__PURE__ */ jsx("a", { href: host.productWebsite, target: "_blank", rel: "noopener noreferrer", className: "text-[10px] text-blue-500 hover:underline", children: host.productWebsite.replace(/^https?:\/\//, "") })
+            ] })
+          ] }) });
+        })(),
+        ((profile?.preferences || {}).show_desktop_version ?? true) && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              setWhatsNewOpen(true);
+            },
+            className: `absolute bottom-3 text-[10px] text-white/50 font-mono select-none drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)] hover:text-white/80 transition-colors cursor-pointer ${(profile?.preferences || {}).taskbar_position === "top" ? "right-3" : (profile?.preferences || {}).taskbar_position === "left" ? "right-3" : (profile?.preferences || {}).taskbar_position === "right" ? "left-3" : "right-3 !bottom-16"}`,
+            children: APP_VERSION
+          }
+        ),
+        whatsNewOpen && /* @__PURE__ */ jsx(Modal, { open: true, onClose: () => setWhatsNewOpen(false), title: "What's New", size: "md", bodyScroll: false, children: /* @__PURE__ */ jsx("div", { className: "space-y-5 max-h-[60vh] overflow-y-auto px-1", children: changelog_default.map((entry, i) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-gray-900 font-mono", children: entry.version }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: formatDate(entry.date) })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-1.5 ml-1", children: entry.changes.map((change, j) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-gray-600", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-blue-500 mt-1 shrink-0", children: "\u2022" }),
+            change
+          ] }, j)) }),
+          i < changelog_default.length - 1 && /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 mt-4" })
+        ] }, entry.version)) }) })
+      ]
+    }
+  );
+}
+var DEFAULT = { hasAnyPerm: () => true };
+var ShellAuthContext = createContext(DEFAULT);
+function ShellAuthProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(ShellAuthContext.Provider, { value, children });
+}
+function useShellAuth() {
+  return useContext(ShellAuthContext);
+}
+
+// src/contexts/AuthContext.tsx
+var _authBridge = {};
+function setShellAuthBridge(bridge) {
+  _authBridge = bridge;
+}
+function useAuth() {
+  const { hasAnyPerm } = useShellAuth();
+  return {
+    user: _authBridge.user,
+    logout: _authBridge.logout ?? (() => {
+    }),
+    hasAnyPerm
+  };
+}
+function subscribeMediaQuery(cb) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", cb);
+  return () => mq.removeEventListener("change", cb);
+}
+function getSystemIsDark() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  };
+  const toHex = (x) => Math.round(x * 255).toString(16).padStart(2, "0");
+  return `#${toHex(f(0))}${toHex(f(8))}${toHex(f(4))}`;
+}
+function useTheme() {
+  const { prefs } = useShellPrefs();
+  const systemDark = useSyncExternalStore(subscribeMediaQuery, getSystemIsDark);
+  const saved = prefs.theme || "system";
+  const accentColor = prefs.accent_color || null;
+  const customBgColor = prefs.custom_bg_color || null;
+  const customTitleColor = prefs.custom_title_color || null;
+  const customWindowColor = prefs.custom_window_color || null;
+  const customButtonColor = prefs.custom_button_color || null;
+  const resolved = saved === "system" ? systemDark ? "dark" : "light" : saved;
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", resolved);
+    return () => document.documentElement.removeAttribute("data-theme");
+  }, [resolved]);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (accentColor && /^#[0-9a-fA-F]{6}$/.test(accentColor)) {
+      const [h, s, l] = hexToHsl(accentColor);
+      root.setAttribute("data-custom-accent", "true");
+      root.style.setProperty("--accent-600", accentColor);
+      root.style.setProperty("--accent-700", hslToHex(h, s, Math.max(l - 10, 5)));
+      root.style.setProperty("--accent-500", hslToHex(h, s, Math.min(l + 10, 95)));
+      root.style.setProperty("--accent-400", hslToHex(h, s, Math.min(l + 20, 95)));
+      root.style.setProperty("--accent-300", hslToHex(h, Math.min(s + 10, 100), Math.min(l + 30, 92)));
+      root.style.setProperty("--accent-200", hslToHex(h, Math.min(s + 15, 100), Math.min(l + 38, 94)));
+      root.style.setProperty("--accent-100", hslToHex(h, Math.min(s + 20, 100), Math.min(l + 42, 96)));
+      root.style.setProperty("--accent-50", hslToHex(h, Math.min(s + 20, 100), Math.min(l + 46, 98)));
+    } else {
+      root.removeAttribute("data-custom-accent");
+      ["--accent-600", "--accent-700", "--accent-500", "--accent-400", "--accent-300", "--accent-200", "--accent-100", "--accent-50"].forEach((p) => root.style.removeProperty(p));
+    }
+  }, [accentColor]);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (accentColor) {
+      const hexToRgb = (hex) => {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `${r} ${g} ${b}`;
+      };
+      if (customBgColor) root.style.setProperty("--custom-bg-color", customBgColor);
+      if (customTitleColor) {
+        root.style.setProperty("--window-header-rgb", hexToRgb(customTitleColor));
+        root.style.setProperty("--window-footer-rgb", hexToRgb(customTitleColor));
+      }
+      if (customWindowColor) root.style.setProperty("--window-content-rgb", hexToRgb(customWindowColor));
+      if (customButtonColor) {
+        root.style.setProperty("--custom-button-color", customButtonColor);
+        const [h, s, l] = hexToHsl(customButtonColor);
+        root.style.setProperty("--custom-button-hover", hslToHex(h, s, Math.max(l - 10, 5)));
+      }
+    } else {
+      ["--custom-bg-color", "--custom-button-color", "--custom-button-hover"].forEach((p) => root.style.removeProperty(p));
+    }
+  }, [accentColor, customBgColor, customTitleColor, customWindowColor, customButtonColor]);
+  return { theme: saved, resolved };
+}
+function GoogleConnectModal({ open, onClose }) {
+  const { isConnected, user, connect, disconnect, loading, error, hasClientId, setClientId } = useGoogleAuth();
+  const [clientIdInput, setClientIdInput] = useState("");
+  const clientIdRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Modal, { open, onClose, title: "Google Services", size: "md", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsx("div", { className: `rounded-lg border p-4 ${isConnected ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: `h-10 w-10 rounded-full flex items-center justify-center ${isConnected ? "bg-green-100" : "bg-gray-200"}`, children: isConnected && user?.picture ? /* @__PURE__ */ jsx("img", { src: user.picture, alt: "", className: "h-10 w-10 rounded-full" }) : /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-gray-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: isConnected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-green-900", children: user?.name || "Connected" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-green-700 truncate", children: user?.email })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900", children: "Not connected" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: "Sign in to access Google services" })
+        ] }) }),
+        isConnected && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
+          "Connected"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-2", children: "Available Services" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [
+          { icon: /* @__PURE__ */ jsxs("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: "#4285F4" }),
+            /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+            /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
+            /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
+          ] }), label: "Gmail", desc: "Read, compose, and send emails" },
+          { icon: /* @__PURE__ */ jsxs("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx("path", { d: "M19.5 3.75H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V6a2.25 2.25 0 00-2.25-2.25z", fill: "none", stroke: "#4285F4", strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx("path", { d: "M2.25 9h19.5M6.75 3.75v3m4.5-3v3m4.5-3v3", fill: "none", stroke: "#4285F4", strokeWidth: 1.5, strokeLinecap: "round" })
+          ] }), label: "Calendar", desc: "View and create calendar events" },
+          { icon: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5", fill: "none", stroke: "#8B5CF6", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }), label: "Gemini AI", desc: "Chat with Google AI assistant" }
+        ].map((svc) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-gray-200 px-4 py-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "shrink-0", children: svc.icon }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900", children: svc.label }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: svc.desc })
+          ] }),
+          isConnected && /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-green-500 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+        ] }, svc.label)) })
+      ] }),
+      !hasClientId && /* @__PURE__ */ jsxs("div", { className: "space-y-2 bg-amber-50 border border-amber-200 rounded-lg p-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-amber-800", children: "Setup required: Google OAuth Client ID" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: clientIdRef,
+            value: clientIdInput,
+            onChange: (e) => setClientIdInput(e.target.value),
+            onInput: (e) => setClientIdInput(e.target.value),
+            placeholder: "123456789.apps.googleusercontent.com",
+            className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-blue-500"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onPointerDown: (e) => e.stopPropagation(),
+            onClick: () => {
+              const val = (clientIdRef.current?.value || clientIdInput).trim();
+              if (val) {
+                setClientId(val);
+                setClientIdInput(val);
+              }
+            },
+            className: "w-full bg-gray-900 text-white px-4 py-2 text-sm font-medium rounded-lg hover:bg-gray-800 cursor-pointer",
+            children: "Save Client ID"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-gray-500 space-y-0.5 mt-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-600", children: "Setup instructions:" }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "1. Go to ",
+            /* @__PURE__ */ jsx("a", { href: "https://console.cloud.google.com/apis/credentials", target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", children: "console.cloud.google.com > APIs & Services > Credentials" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "2. Click ",
+            /* @__PURE__ */ jsx("b", { children: '"+ Create Credentials"' }),
+            ", then select ",
+            /* @__PURE__ */ jsx("b", { children: "OAuth client ID" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "3. Choose ",
+            /* @__PURE__ */ jsx("b", { children: '"Web application"' }),
+            ", give it any name, add the URL where this app runs (e.g. ",
+            /* @__PURE__ */ jsx("b", { children: "http://localhost:5173" }),
+            ") as an Authorized JavaScript origin, then click Create"
+          ] }),
+          /* @__PURE__ */ jsx("p", { children: "4. Copy your Client ID and paste it above" })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: error })
+    ] }),
+    /* @__PURE__ */ jsx(ModalActions, { children: isConnected ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: disconnect,
+        className: "inline-flex items-center gap-1.5 text-red-600 border border-red-200 bg-white px-4 py-2 text-sm font-medium rounded-lg hover:bg-red-50",
+        children: "Disconnect"
+      }
+    ) : hasClientId ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: connect,
+        disabled: loading,
+        className: "inline-flex items-center gap-2 bg-white border border-gray-300 shadow-sm px-5 py-2 text-sm font-medium rounded-lg hover:bg-gray-50 disabled:opacity-50",
+        children: [
+          /* @__PURE__ */ jsxs("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: "#4285F4" }),
+            /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+            /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
+            /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
+          ] }),
+          loading ? "Connecting..." : "Sign in with Google"
+        ]
+      }
+    ) : null })
+  ] });
+}
+function useClickOutside(ref, onClose) {
+  useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [ref, onClose]);
+}
+function StartupAnimation({ onComplete, ready = false, productName = "react-os-shell", subtitle }) {
+  const [phase, setPhase] = useState("logo");
+  const [minTimePassed, setMinTimePassed] = useState(false);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  const fadingRef = useRef(false);
+  useEffect(() => {
+    const t1 = setTimeout(() => setPhase("text"), 600);
+    const t2 = setTimeout(() => setMinTimePassed(true), 2e3);
+    const t3 = setTimeout(() => {
+      if (!fadingRef.current) {
+        fadingRef.current = true;
+        setPhase("fade");
+        setTimeout(() => onCompleteRef.current(), 500);
+      }
+    }, 5e3);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+    };
+  }, []);
+  useEffect(() => {
+    if (!ready || !minTimePassed || fadingRef.current) return;
+    fadingRef.current = true;
+    setPhase("fade");
+    const t = setTimeout(() => onCompleteRef.current(), 500);
+    return () => clearTimeout(t);
+  }, [ready, minTimePassed]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-opacity duration-500 ${phase === "fade" ? "opacity-0 pointer-events-none" : "opacity-100"}`,
+      style: { background: "linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-20",
+            style: { background: "radial-gradient(circle, rgba(124,58,237,0.4) 0%, transparent 70%)", animation: "pulse-glow 2s ease-in-out infinite" }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: `relative transition-all duration-700 ease-out ${phase === "logo" ? "scale-75 opacity-0" : "scale-100 opacity-100"}`, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "/favicon.svg",
+            alt: "",
+            className: "h-20 w-20 drop-shadow-[0_0_30px_rgba(124,58,237,0.5)]",
+            style: { animation: "spin-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: `mt-6 text-center transition-all duration-500 ${phase !== "logo" ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-[0.3em] text-white/90 uppercase", children: productName }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center justify-center gap-1.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-1.5 h-1.5 rounded-full bg-purple-400",
+              style: { animation: `dot-bounce 1s ease-in-out ${i * 0.15}s infinite` }
+            },
+            i
+          )) })
+        ] }),
+        subtitle && /* @__PURE__ */ jsx("div", { className: `absolute bottom-8 transition-all duration-500 ${phase !== "logo" ? "opacity-40" : "opacity-0"}`, children: /* @__PURE__ */ jsx("p", { className: "text-[10px] text-white/40 font-mono tracking-wider", children: subtitle }) }),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes spin-in {
+          0% { transform: scale(0) rotate(-180deg); opacity: 0; }
+          100% { transform: scale(1) rotate(0deg); opacity: 1; }
+        }
+        @keyframes dot-bounce {
+          0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+          40% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes pulse-glow {
+          0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.15; }
+          50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.25; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function LogoutAnimation({ onComplete, subtitle }) {
+  const [phase, setPhase] = useState("show");
+  useEffect(() => {
+    playLogout();
+    const t1 = setTimeout(() => setPhase("shrink"), 800);
+    const t2 = setTimeout(() => setPhase("fade"), 1800);
+    const t3 = setTimeout(onComplete, 2300);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+    };
+  }, [onComplete]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-opacity duration-500 ${phase === "fade" ? "opacity-0" : "opacity-100"}`,
+      style: { background: "linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full",
+            style: {
+              background: "radial-gradient(circle, rgba(124,58,237,0.4) 0%, transparent 70%)",
+              animation: "logout-glow 2s ease-in-out infinite",
+              opacity: phase === "shrink" ? 0 : 0.2,
+              transition: "opacity 1s"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `relative transition-all duration-1000 ease-in ${phase === "shrink" ? "scale-0 opacity-0" : "scale-100 opacity-100"}`,
+            style: phase === "shrink" ? { transform: "scale(0) rotate(180deg)" } : void 0,
+            children: /* @__PURE__ */ jsx("img", { src: "/favicon.svg", alt: "", className: "h-20 w-20 drop-shadow-[0_0_30px_rgba(124,58,237,0.5)]" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: `mt-6 text-center transition-all duration-700 ${phase === "show" ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-[0.3em] text-white/90 uppercase", children: "Goodbye" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-white/40", children: "See you next time" })
+        ] }),
+        subtitle && /* @__PURE__ */ jsx("div", { className: `absolute bottom-8 transition-all duration-500 ${phase === "show" ? "opacity-40" : "opacity-0"}`, children: /* @__PURE__ */ jsx("p", { className: "text-[10px] text-white/40 font-mono tracking-wider", children: subtitle }) }),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes logout-glow {
+          0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.15; }
+          50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.25; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function StartMenu({
+  open,
+  onClose,
+  openPage,
+  profile,
+  user,
+  onLogout,
+  taskbarPosition,
+  taskbarH,
+  taskbarW = 0,
+  size = "medium",
+  navSections: navSections2 = navSections,
+  navIcons: navIcons2 = navIcons,
+  sectionIcons: sectionIcons2 = sectionIcons,
+  categories = startMenuCategories
+}) {
+  const erpLabels = new Set(categories.erp);
+  const systemLabels = new Set(categories.system);
+  const virtualSections = categories.virtual ?? [];
+  const virtualByLabel = Object.fromEntries(
+    virtualSections.map((v) => [v.label, v])
+  );
+  const { hasAnyPerm } = useAuth();
+  const [hoveredSection, setHoveredSection] = useState(null);
+  const [hoveredY, setHoveredY] = useState(0);
+  const [search, setSearch] = useState("");
+  const [searchIdx, setSearchIdx] = useState(0);
+  const menuRef = useRef(null);
+  const hoverTimeout = useRef();
+  useEffect(() => {
+    if (!open) {
+      setSearch("");
+      setHoveredSection(null);
+      setSearchIdx(0);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const click = (e) => {
+      if (e.target.closest("[data-menu-toggle]")) return;
+      if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
+    };
+    window.addEventListener("keydown", handler);
+    window.addEventListener("pointerdown", click);
+    return () => {
+      window.removeEventListener("keydown", handler);
+      window.removeEventListener("pointerdown", click);
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  const handleClick = (path) => {
+    openPage(path);
+    onClose();
+  };
+  const isVertical = taskbarPosition !== "bottom";
+  const topItems = navSections2.filter((item) => !isSection(item));
+  const erpSections = navSections2.filter((item) => isSection(item) && erpLabels.has(item.label));
+  const systemSections = navSections2.filter((item) => isSection(item) && systemLabels.has(item.label));
+  const getVisibleItems = (section) => section.items.filter((item) => !item.perms || hasAnyPerm(item.perms));
+  const searchResults = search.length >= 2 ? navSections2.flatMap((item) => {
+    if (isSection(item)) {
+      return item.items.filter((i) => (!i.perms || hasAnyPerm(i.perms)) && i.label.toLowerCase().includes(search.toLowerCase())).map((i) => ({ ...i, section: item.label }));
+    }
+    return item.label.toLowerCase().includes(search.toLowerCase()) ? [{ ...item, section: "" }] : [];
+  }) : [];
+  const posStyle = taskbarPosition === "top" ? { top: taskbarH + 8, left: 8 } : taskbarPosition === "left" ? { top: 8, left: taskbarW + 8 } : taskbarPosition === "right" ? { top: 8, right: taskbarW + 8 } : { bottom: taskbarH + 8, left: 8 };
+  const iconEl = (path) => {
+    const icon = navIcons2[path];
+    if (icon && isValidElement(icon)) return cloneElement(icon, { className: "h-4 w-4" });
+    return null;
+  };
+  const secIcon = (label) => {
+    const icon = sectionIcons2[label];
+    if (icon && isValidElement(icon)) return cloneElement(icon, { className: "h-4 w-4" });
+    return null;
+  };
+  const hoveredVirtual = hoveredSection ? virtualByLabel[hoveredSection] : void 0;
+  const hoveredData = hoveredVirtual ? null : hoveredSection ? [...erpSections, ...systemSections].find((s) => s.label === hoveredSection) : null;
+  const flyoutItems = hoveredVirtual ? hoveredVirtual.items : hoveredData ? getVisibleItems(hoveredData) : [];
+  const menuDensity = typeof document !== "undefined" ? getComputedStyle(document.documentElement).getPropertyValue("--menu-density")?.trim() || "normal" : "normal";
+  const tight = menuDensity === "tight";
+  const sizeConfig = tight ? { small: { w: "w-52", fw: "w-44", text: "text-xs", py: "py-1", px: "px-3", mw: 208, itemH: 24 }, medium: { w: "w-56", fw: "w-48", text: "text-xs", py: "py-1", px: "px-3", mw: 224, itemH: 26 }, large: { w: "w-64", fw: "w-52", text: "text-sm", py: "py-1.5", px: "px-3", mw: 256, itemH: 30 } }[size] : { small: { w: "w-56", fw: "w-48", text: "text-xs", py: "py-1.5", px: "px-3", mw: 224, itemH: 30 }, medium: { w: "w-64", fw: "w-56", text: "text-sm", py: "py-2", px: "px-4", mw: 256, itemH: 36 }, large: { w: "w-72", fw: "w-60", text: "text-sm", py: "py-2.5", px: "px-4", mw: 288, itemH: 40 } }[size];
+  const menuGlass = glassStyle();
+  const itemCls = `w-full flex items-center gap-2 rounded-lg ${sizeConfig.px} ${sizeConfig.py} ${sizeConfig.text}`;
+  const flyoutH = flyoutItems.length * sizeConfig.itemH + 12;
+  const menuWidth = sizeConfig.mw;
+  let flyoutTop = hoveredY - flyoutH / 2;
+  const minTop = taskbarPosition === "top" ? taskbarH + 4 : 4;
+  const maxBottom = taskbarPosition === "bottom" ? window.innerHeight - taskbarH - 4 : window.innerHeight - 4;
+  if (flyoutTop < minTop) flyoutTop = minTop;
+  if (flyoutTop + flyoutH > maxBottom) flyoutTop = maxBottom - flyoutH;
+  const handleSectionHover = (label, e) => {
+    clearTimeout(hoverTimeout.current);
+    const rect = e.currentTarget.getBoundingClientRect();
+    setHoveredY(rect.top + rect.height / 2);
+    setHoveredSection(label);
+  };
+  const renderSection = (section, isErp) => {
+    if (section.perms && !hasAnyPerm(section.perms)) return null;
+    const items = getVisibleItems(section);
+    if (items.length === 0) return null;
+    const isHovered = hoveredSection === section.label;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        onMouseEnter: (e) => handleSectionHover(section.label, e),
+        onMouseLeave: () => {
+          hoverTimeout.current = setTimeout(() => setHoveredSection(null), 200);
+        },
+        children: /* @__PURE__ */ jsxs("button", { className: `${itemCls} transition-colors ${isHovered ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`, children: [
+          secIcon(section.label),
+          /* @__PURE__ */ jsx("span", { className: isErp ? "font-medium" : "", children: section.label }),
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 ml-auto text-gray-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })
+        ] })
+      },
+      section.label
+    );
+  };
+  const renderVirtualSection = (v) => {
+    if (v.items.length === 0) return null;
+    const isHovered = hoveredSection === v.label;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        onMouseEnter: (e) => handleSectionHover(v.label, e),
+        onMouseLeave: () => {
+          hoverTimeout.current = setTimeout(() => setHoveredSection(null), 200);
+        },
+        children: /* @__PURE__ */ jsxs("button", { className: `${itemCls} transition-colors ${isHovered ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`, children: [
+          v.icon,
+          /* @__PURE__ */ jsx("span", { children: v.label }),
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 ml-auto text-gray-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })
+        ] })
+      },
+      v.label
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "fixed z-[260]", style: posStyle, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${sizeConfig.w} rounded-2xl flex ${isVertical ? "flex-col-reverse" : "flex-col"} overflow-hidden`,
+          style: { animation: "menu-in 0.15s ease-out", ...menuGlass },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: `px-3 ${isVertical ? "pb-3 pt-2 border-t border-white/20" : "pt-3 pb-2"}`, children: /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${GLASS_INPUT_BG} rounded-lg px-2.5 py-1.5`, children: [
+              /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  value: search,
+                  onChange: (e) => {
+                    setSearch(e.target.value);
+                    setHoveredSection(null);
+                    setSearchIdx(0);
+                  },
+                  onKeyDown: (e) => {
+                    if (search.length >= 2 && searchResults.length > 0) {
+                      if (e.key === "ArrowDown") {
+                        e.preventDefault();
+                        setSearchIdx((i) => Math.min(i + 1, searchResults.length - 1));
+                      } else if (e.key === "ArrowUp") {
+                        e.preventDefault();
+                        setSearchIdx((i) => Math.max(i - 1, 0));
+                      } else if (e.key === "Enter") {
+                        e.preventDefault();
+                        handleClick(searchResults[searchIdx].to);
+                      }
+                    }
+                  },
+                  placeholder: "Search...",
+                  className: "flex-1 bg-transparent text-xs outline-none placeholder-gray-400",
+                  autoFocus: true
+                }
+              )
+            ] }) }),
+            search.length >= 2 ? /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-1 pb-2 max-h-[400px]", children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 text-center py-4", children: "No results" }) : searchResults.map((r, i) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleClick(r.to),
+                onMouseEnter: () => setSearchIdx(i),
+                className: `${itemCls} transition-colors ${i === searchIdx ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-blue-50 hover:text-blue-700"}`,
+                children: [
+                  iconEl(r.to),
+                  /* @__PURE__ */ jsx("span", { children: r.label }),
+                  r.section && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 ml-auto", children: r.section })
+                ]
+              },
+              i
+            )) }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-1 pb-1 flex flex-col", children: [
+              isVertical && /* @__PURE__ */ jsxs(Fragment, { children: [
+                erpSections.map((s) => renderSection(s, true)),
+                /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
+                topItems.map((item) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleClick(item.to),
+                    className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+                    children: [
+                      iconEl(item.to),
+                      /* @__PURE__ */ jsx("span", { children: item.label })
+                    ]
+                  },
+                  item.to
+                )),
+                /* @__PURE__ */ jsxs("button", { onClick: () => handleClick("/notifications"), className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`, children: [
+                  /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }),
+                  /* @__PURE__ */ jsx("span", { children: "Notifications" })
+                ] }),
+                systemSections.map((s) => renderSection(s, false)),
+                virtualSections.map((v) => renderVirtualSection(v))
+              ] }),
+              !isVertical && /* @__PURE__ */ jsxs(Fragment, { children: [
+                topItems.map((item) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleClick(item.to),
+                    className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+                    children: [
+                      iconEl(item.to),
+                      /* @__PURE__ */ jsx("span", { children: item.label })
+                    ]
+                  },
+                  item.to
+                )),
+                /* @__PURE__ */ jsxs("button", { onClick: () => handleClick("/notifications"), className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`, children: [
+                  /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }),
+                  /* @__PURE__ */ jsx("span", { children: "Notifications" })
+                ] }),
+                systemSections.map((s) => renderSection(s, false)),
+                virtualSections.map((v) => renderVirtualSection(v)),
+                /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" }),
+                erpSections.map((s) => renderSection(s, true))
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: `${isVertical ? "border-b" : "border-t"} border-white/20 p-1`, children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => handleClick("/profile"),
+                className: "rounded-lg px-2 py-1.5 flex items-center gap-2.5 hover:bg-blue-50 hover:text-blue-700 transition-colors cursor-pointer",
+                children: [
+                  profile?.avatar_url ? /* @__PURE__ */ jsx("img", { src: profile.avatar_url, alt: "", className: "h-8 w-8 rounded-full object-cover border border-white/20 shrink-0" }) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-sm font-bold text-blue-700 shrink-0", children: (profile?.first_name?.charAt(0) || user?.email?.charAt(0) || "?").toUpperCase() }),
+                  /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 text-sm font-medium text-gray-900 truncate", children: profile?.first_name ? `${profile.first_name} ${profile.last_name || ""}`.trim() : user?.email }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onClose();
+                        onLogout();
+                      },
+                      title: "Sign Out",
+                      className: "shrink-0 p-1.5 rounded-md text-gray-500 hover:text-red-600 hover:bg-red-50 transition-colors",
+                      children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" }) })
+                    }
+                  )
+                ]
+              }
+            ) })
+          ]
+        }
+      ),
+      hoveredSection && flyoutItems.length > 0 && search.length < 2 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `fixed ${sizeConfig.fw} rounded-2xl overflow-hidden`,
+          style: { left: menuRef.current ? menuRef.current.getBoundingClientRect().right + 4 : menuWidth + 12, top: flyoutTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
+          onMouseEnter: () => clearTimeout(hoverTimeout.current),
+          onMouseLeave: () => {
+            hoverTimeout.current = setTimeout(() => setHoveredSection(null), 200);
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1", children: flyoutItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleClick(item.to),
+                className: `${itemCls} text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors`,
+                children: [
+                  iconEl(item.to),
+                  /* @__PURE__ */ jsx("span", { children: item.label })
+                ]
+              }
+            ),
+            item.dividerAfter && /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1.5 mx-2" })
+          ] }, item.to)) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes menu-in { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+        @keyframes submenu-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
+      ` })
+  ] });
+}
+function useFavorites(wallpapers) {
+  const { prefs, save } = useShellPrefs();
+  const favorites = prefs.favorite_pages || [];
+  const toggle = useCallback((path) => {
+    const next = favorites.includes(path) ? favorites.filter((p) => p !== path) : [...favorites, path];
+    save({ favorite_pages: next });
+  }, [favorites, save]);
+  const wallpaperPool = wallpapers && wallpapers.length > 0 ? wallpapers : [];
+  const randomPickRef = useRef(wallpaperPool.length > 0 ? wallpaperPool[Math.floor(Math.random() * wallpaperPool.length)] : "none");
+  const rawBg = prefs.desktop_bg || (wallpaperPool.length > 0 ? "random" : "none");
+  const desktopBg = rawBg === "random" ? randomPickRef.current : rawBg;
+  const setDesktopBg = useCallback((bg) => {
+    save({ desktop_bg: bg });
+  }, [save]);
+  return { favorites, toggle, isFavorite: (path) => favorites.includes(path), desktopBg, setDesktopBg };
+}
+var ALL_TIMEZONES = [
+  { tz: "Pacific/Auckland", label: "Auckland" },
+  { tz: "Australia/Sydney", label: "Sydney" },
+  { tz: "Australia/Adelaide", label: "Adelaide" },
+  { tz: "Australia/Brisbane", label: "Brisbane" },
+  { tz: "Australia/Perth", label: "Perth" },
+  { tz: "Asia/Tokyo", label: "Tokyo" },
+  { tz: "Asia/Seoul", label: "Seoul" },
+  { tz: "Asia/Shanghai", label: "Shanghai" },
+  { tz: "Asia/Hong_Kong", label: "Hong Kong" },
+  { tz: "Asia/Singapore", label: "Singapore" },
+  { tz: "Asia/Bangkok", label: "Bangkok" },
+  { tz: "Asia/Kolkata", label: "Mumbai" },
+  { tz: "Asia/Dubai", label: "Dubai" },
+  { tz: "Europe/Moscow", label: "Moscow" },
+  { tz: "Europe/Istanbul", label: "Istanbul" },
+  { tz: "Europe/Berlin", label: "Berlin" },
+  { tz: "Europe/Paris", label: "Paris" },
+  { tz: "Europe/London", label: "London" },
+  { tz: "America/Sao_Paulo", label: "Sao Paulo" },
+  { tz: "America/New_York", label: "New York" },
+  { tz: "America/Chicago", label: "Chicago" },
+  { tz: "America/Denver", label: "Denver" },
+  { tz: "America/Los_Angeles", label: "Los Angeles" },
+  { tz: "Pacific/Honolulu", label: "Honolulu" },
+  { tz: "UTC", label: "UTC" }
+];
+function ClockContent({ localTz, worldClocks, now, fmtTime, fmtDate, fmtOffset, removeClock, adding, setAdding, addClock, availableToAdd, showAdd }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide", children: "Local Time" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mt-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-gray-900 tabular-nums", children: fmtTime(localTz) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: fmtOffset(localTz) })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 mt-0.5", children: [
+        fmtDate(localTz),
+        " \xB7 ",
+        localTz.replace(/_/g, " ")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "max-h-60 overflow-y-auto", children: [
+      worldClocks.map((tz) => {
+        const info = ALL_TIMEZONES.find((t) => t.tz === tz);
+        const label = info?.label || tz.split("/").pop()?.replace(/_/g, " ") || tz;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 hover:bg-gray-50 group", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900", children: label }),
+            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-gray-400", children: [
+              fmtDate(tz),
+              " \xB7 ",
+              fmtOffset(tz)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700 tabular-nums", children: fmtTime(tz) }),
+            /* @__PURE__ */ jsx("button", { onClick: () => removeClock(tz), className: "opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all", title: "Remove", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })
+          ] })
+        ] }, tz);
+      }),
+      worldClocks.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 text-center py-4", children: "No world clocks added" })
+    ] }),
+    showAdd && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 p-2", children: adding ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        autoFocus: true,
+        onChange: (e) => {
+          if (e.target.value) addClock(e.target.value);
+        },
+        onBlur: () => setAdding(false),
+        className: "w-full rounded-md border border-gray-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:ring-blue-500",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Select timezone..." }),
+          availableToAdd.map((t) => /* @__PURE__ */ jsxs("option", { value: t.tz, children: [
+            t.label,
+            " (",
+            fmtOffset(t.tz),
+            ")"
+          ] }, t.tz))
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs("button", { onClick: () => setAdding(true), className: "w-full flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors", children: [
+      /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" }) }),
+      "Add World Clock"
+    ] }) })
+  ] });
+}
+function TaskbarClock() {
+  const [now, setNow] = useState(/* @__PURE__ */ new Date());
+  const [open, setOpen] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const [pinned, setPinned] = useState(false);
+  const ref = useRef(null);
+  const buttonRef = useRef(null);
+  const { prefs, save } = useShellPrefs();
+  const worldClocks = prefs.world_clocks || ["Europe/London", "Asia/Shanghai", "America/Los_Angeles", "America/New_York"];
+  useEffect(() => {
+    const t = setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e4);
+    return () => clearInterval(t);
+  }, []);
+  useClickOutside(ref, useCallback(() => {
+    if (open && !pinned) {
+      setOpen(false);
+      setAdding(false);
+    }
+  }, [open, pinned]));
+  const fmtTime = (tz) => now.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", timeZone: tz });
+  const fmtDate = (tz) => now.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric", timeZone: tz });
+  const fmtOffset = (tz) => {
+    const parts = new Intl.DateTimeFormat("en", { timeZone: tz, timeZoneName: "shortOffset" }).formatToParts(now);
+    return parts.find((p) => p.type === "timeZoneName")?.value || "";
+  };
+  const saveClocks = (clocks) => {
+    save({ world_clocks: clocks });
+  };
+  const addClock = (tz) => {
+    if (!worldClocks.includes(tz)) saveClocks([...worldClocks, tz]);
+    setAdding(false);
+  };
+  const removeClock = (tz) => {
+    saveClocks(worldClocks.filter((t) => t !== tz));
+  };
+  const localTz = localStorage.getItem("user_timezone") || Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const availableToAdd = ALL_TIMEZONES.filter((t) => t.tz !== localTz && !worldClocks.includes(t.tz));
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsxs("button", { ref: buttonRef, onClick: () => setOpen(!open), className: "text-right leading-tight cursor-pointer hover:bg-gray-200/50 rounded px-1.5 py-0.5 transition-colors", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium text-gray-800", children: now.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-700", children: now.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" }) })
+    ] }),
+    open && !pinned && (() => {
+      const taskbarPos = getComputedStyle(document.documentElement).getPropertyValue("--taskbar-position")?.trim() || "bottom";
+      const rect = buttonRef.current?.getBoundingClientRect();
+      const right = rect ? window.innerWidth - rect.right : 0;
+      const posStyle = taskbarPos === "top" ? { right, top: (rect?.bottom ?? 0) + 4 } : { right, bottom: window.innerHeight - (rect?.top ?? 0) + 4 };
+      return /* @__PURE__ */ jsxs("div", { className: "fixed z-[300] w-72 rounded-lg border border-gray-200 bg-white shadow-xl", style: posStyle, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setPinned(true);
+            },
+            title: "Pin as widget",
+            className: "absolute top-2 right-2 text-gray-300 hover:text-gray-600 transition-colors z-10",
+            children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 3.75L8.25 10.5m0 0l-3-1.5L3 12.75l5.25 5.25 3.75-2.25-1.5-3L17.25 6M8.25 10.5l-3 3M17.25 6l3 3" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ClockContent,
+          {
+            localTz,
+            worldClocks,
+            now,
+            fmtTime,
+            fmtDate,
+            fmtOffset,
+            removeClock,
+            adding,
+            setAdding,
+            addClock,
+            availableToAdd,
+            showAdd: true
+          }
+        )
+      ] });
+    })(),
+    pinned && /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: true,
+        onClose: () => {
+          setPinned(false);
+          setOpen(false);
+        },
+        title: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+          "World Clock"
+        ] }),
+        size: "sm",
+        allowPinOnTop: true,
+        initialPosition: "top-right",
+        widget: true,
+        children: /* @__PURE__ */ jsx(
+          ClockContent,
+          {
+            localTz,
+            worldClocks,
+            now,
+            fmtTime,
+            fmtDate,
+            fmtOffset,
+            removeClock,
+            adding,
+            setAdding,
+            addClock,
+            availableToAdd,
+            showAdd: false
+          }
+        )
+      }
+    )
+  ] });
+}
+function TaskbarContextMenu({ x, y, position, size, onChangePosition, onChangeSize, onClose, onReportBug }) {
+  const ref = useRef(null);
+  useClickOutside(ref, onClose);
+  const posStyle = position === "top" ? { left: Math.min(x, window.innerWidth - 200), top: y + 4 } : position === "left" ? { left: x + 4, top: Math.min(y, window.innerHeight - 300) } : position === "right" ? { right: window.innerWidth - x + 4, top: Math.min(y, window.innerHeight - 300) } : { left: Math.min(x, window.innerWidth - 200), bottom: window.innerHeight - y + 4 };
+  const check = (active) => active ? /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5 text-blue-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" }) }) : /* @__PURE__ */ jsx("span", { className: "w-3.5" });
+  return /* @__PURE__ */ jsxs("div", { ref, className: "fixed z-[400] rounded-2xl py-1 min-w-[180px]", style: { ...posStyle, ...glassStyle() }, children: [
+    /* @__PURE__ */ jsx("p", { className: "px-3 py-1 text-[10px] font-semibold text-gray-400 uppercase tracking-wide", children: "Position" }),
+    ["bottom", "top", "left", "right"].map((pos) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onChangePosition(pos),
+        className: "w-full text-left px-3 py-1.5 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors rounded-lg mx-1 flex items-center gap-2",
+        style: { width: "calc(100% - 8px)" },
+        children: [
+          check(position === pos),
+          pos.charAt(0).toUpperCase() + pos.slice(1)
+        ]
+      },
+      pos
+    )),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1 mx-3" }),
+    /* @__PURE__ */ jsx("p", { className: "px-3 py-1 text-[10px] font-semibold text-gray-400 uppercase tracking-wide", children: "Size" }),
+    ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onChangeSize(s),
+        className: "w-full text-left px-3 py-1.5 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors rounded-lg mx-1 flex items-center gap-2",
+        style: { width: "calc(100% - 8px)" },
+        children: [
+          check(size === s),
+          s.charAt(0).toUpperCase() + s.slice(1)
+        ]
+      },
+      s
+    )),
+    onReportBug && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "border-t border-white/20 my-1 mx-3" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            onClose();
+            onReportBug();
+          },
+          className: "w-full text-left px-3 py-1.5 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors rounded-lg mx-1 flex items-center gap-2",
+          style: { width: "calc(100% - 8px)" },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "w-3.5 shrink-0" }),
+            "Report Bug"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function Layout({
+  productName = "react-os-shell",
+  productIcon = "/favicon.svg",
+  wallpapers,
+  navSections: navSections2 = navSections,
+  navIcons: navIcons2 = navIcons,
+  sectionIcons: sectionIcons2 = sectionIcons,
+  categories = startMenuCategories,
+  notifications,
+  search
+} = {}) {
+  const bugReport = useBugReport();
+  const { user, logout} = useAuth();
+  const { openPage, openEntity, openWindows } = useWindowManager();
+  const [menuOpen, setMenuOpen] = useState(false);
+  useEmailUnreadCount();
+  const profile = user || {};
+  useTheme();
+  const { desktopBg} = useFavorites(wallpapers);
+  const { prefs, save: savePrefs } = useShellPrefs();
+  const taskbarPosition = prefs.taskbar_position || "bottom";
+  const taskbarSize = prefs.taskbar_size || "medium";
+  const desktopDblClick = prefs.desktop_dblclick || "deactivate";
+  const isVerticalTaskbar = taskbarPosition === "left" || taskbarPosition === "right";
+  const taskbarH = isVerticalTaskbar ? 0 : taskbarSize === "small" ? 40 : taskbarSize === "large" ? 72 : 56;
+  const taskbarW = isVerticalTaskbar ? taskbarSize === "small" ? 180 : taskbarSize === "large" ? 260 : 220 : 0;
+  const taskbarHClass = taskbarSize === "small" ? "h-10" : taskbarSize === "large" ? "h-[72px]" : "h-14";
+  const taskbarWClass = taskbarSize === "small" ? "w-[180px]" : taskbarSize === "large" ? "w-[260px]" : "w-[220px]";
+  const taskbarOpacity = (prefs.transparency_taskbar ?? 70) / 100;
+  const menuOpacity = (prefs.transparency_start_menu ?? 95) / 100;
+  const inactiveHeaderOpacity = (prefs.transparency_inactive_header ?? 70) / 100;
+  const inactiveContentOpacity = (prefs.transparency_inactive_content ?? 80) / 100;
+  const activeHeaderOpacity = (prefs.transparency_active_header ?? 80) / 100;
+  const activeContentOpacity = (prefs.transparency_active_content ?? 90) / 100;
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty("--inactive-header-opacity", String(inactiveHeaderOpacity));
+    root.style.setProperty("--inactive-content-opacity", String(inactiveContentOpacity));
+    root.style.setProperty("--active-header-opacity", String(activeHeaderOpacity));
+    root.style.setProperty("--active-content-opacity", String(activeContentOpacity));
+    root.style.setProperty("--menu-opacity", String(menuOpacity));
+    root.style.setProperty("--taskbar-height", String(taskbarH));
+    root.style.setProperty("--taskbar-width", String(taskbarW));
+    root.style.setProperty("--taskbar-position", taskbarPosition);
+    root.style.setProperty("--default-window-size", prefs.default_window_size || "large");
+    root.style.setProperty("--window-position", prefs.window_position || "cascade");
+    root.style.setProperty("--menu-density", prefs.menu_density || "normal");
+    const menuSize = prefs.start_menu_size || "medium";
+    const sizeVars = {
+      small: { font: "12px", px: "0.75rem", py: "0.25rem", tabW: "150px", tabFont: "11px" },
+      medium: { font: "14px", px: "1rem", py: "0.5rem", tabW: "200px", tabFont: "12px" },
+      large: { font: "15px", px: "1.125rem", py: "0.625rem", tabW: "240px", tabFont: "13px" }
+    };
+    const sv = sizeVars[menuSize] || sizeVars.medium;
+    root.style.setProperty("--menu-font-size", sv.font);
+    root.style.setProperty("--menu-padding-x", sv.px);
+    root.style.setProperty("--menu-padding-y", sv.py);
+    root.style.setProperty("--window-tab-width", sv.tabW);
+    root.style.setProperty("--window-tab-font-size", sv.tabFont);
+  }, [inactiveHeaderOpacity, inactiveContentOpacity, activeHeaderOpacity, activeContentOpacity, taskbarH, taskbarPosition, prefs.default_window_size, prefs.window_position, prefs.menu_density, prefs.start_menu_size]);
+  const [balloonDismissed, setBalloonDismissed] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
+  const [taskbarMenu, setTaskbarMenu] = useState(null);
+  const [googleConnectOpen, setGoogleConnectOpen] = useState(false);
+  const { isConnected: googleConnected } = useGoogleAuth();
+  const [showLogout, setShowLogout] = useState(false);
+  useEffect(() => {
+    const handler = () => setGoogleConnectOpen(true);
+    window.addEventListener("open-google-connect", handler);
+    return () => window.removeEventListener("open-google-connect", handler);
+  }, []);
+  const savePref = useCallback((key, value) => {
+    savePrefs({ [key]: value });
+  }, [savePrefs]);
+  const toggleFullscreen = useCallback(async () => {
+    if (document.fullscreenElement) {
+      if (navigator.keyboard?.unlock) navigator.keyboard.unlock();
+      document.exitFullscreen();
+    } else {
+      await document.documentElement.requestFullscreen();
+      if (navigator.keyboard?.lock) {
+        try {
+          await navigator.keyboard.lock(["Escape"]);
+        } catch {
+        }
+      }
+    }
+  }, []);
+  useEffect(() => {
+    const handler = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+      if (!document.fullscreenElement && navigator.keyboard?.unlock) {
+        navigator.keyboard.unlock();
+      }
+    };
+    document.addEventListener("fullscreenchange", handler);
+    return () => document.removeEventListener("fullscreenchange", handler);
+  }, []);
+  const autoFullscreenDone = useRef(false);
+  useEffect(() => {
+    if (autoFullscreenDone.current) return;
+    if (prefs.auto_fullscreen && !document.fullscreenElement) {
+      autoFullscreenDone.current = true;
+      const handler = async () => {
+        if (!document.fullscreenElement) {
+          try {
+            await document.documentElement.requestFullscreen();
+            if (navigator.keyboard?.lock) navigator.keyboard.lock(["Escape"]).catch(() => {
+            });
+          } catch {
+          }
+        }
+        document.removeEventListener("click", handler);
+      };
+      document.addEventListener("click", handler, { once: true });
+    }
+  }, [prefs.auto_fullscreen]);
+  const [showStartup, setShowStartup] = useState(false);
+  const startupChecked = useRef(false);
+  useEffect(() => {
+    if (startupChecked.current) return;
+    startupChecked.current = true;
+    const key = "erp_startup_shown";
+    if (!sessionStorage.getItem(key)) {
+      sessionStorage.setItem(key, "1");
+      setShowStartup(true);
+    }
+  }, []);
+  const startupSoundDone = useRef(false);
+  useEffect(() => {
+    if (startupSoundDone.current || !showStartup) return;
+    startupSoundDone.current = true;
+    setTimeout(() => playStartup(), 500);
+  }, [showStartup]);
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === ".") {
+        e.preventDefault();
+        setMenuOpen((prev) => !prev);
+      }
+      if (e.ctrlKey && e.key === "F11") {
+        e.preventDefault();
+        toggleFullscreen();
+      }
+      if (e.key === "Escape" && document.fullscreenElement) {
+        const hasOpenModals = document.querySelectorAll("[data-modal-panel]").length > 0;
+        if (!hasOpenModals) {
+          e.preventDefault();
+          toggleFullscreen();
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [toggleFullscreen]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-screen", children: [
+    showStartup && /* @__PURE__ */ jsx(StartupAnimation, { onComplete: () => setShowStartup(false), ready: !!profile, productName }),
+    showLogout && /* @__PURE__ */ jsx(LogoutAnimation, { onComplete: () => {
+      sessionStorage.removeItem("erp_startup_shown");
+      logout();
+    } }),
+    /* @__PURE__ */ jsx(
+      StartMenu,
+      {
+        open: menuOpen,
+        onClose: () => setMenuOpen(false),
+        openPage: (path) => {
+          openPage(path);
+          setMenuOpen(false);
+        },
+        openWindows,
+        profile,
+        user,
+        onLogout: () => setShowLogout(true),
+        onNavigate: (path) => {
+          openPage(path);
+          setMenuOpen(false);
+        },
+        taskbarPosition,
+        taskbarH,
+        taskbarW,
+        size: prefs.start_menu_size || "medium",
+        navSections: navSections2,
+        navIcons: navIcons2,
+        sectionIcons: sectionIcons2,
+        categories
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 min-h-0", children: /* @__PURE__ */ jsx(
+      "main",
+      {
+        className: "flex-1 flex flex-col overflow-hidden cursor-default",
+        onDoubleClick: () => {
+          if (desktopDblClick === "deactivate") {
+            setMenuOpen(false);
+            window.dispatchEvent(new CustomEvent("deactivate-all-modals"));
+          }
+        },
+        style: {
+          backgroundColor: desktopBg?.startsWith("#") ? desktopBg : desktopBg === "none" ? (() => {
+            const customBg = getComputedStyle(document.documentElement).getPropertyValue("--custom-bg-color")?.trim();
+            if (customBg) return customBg;
+            const t = document.documentElement.getAttribute("data-theme") || "light";
+            const map = { light: "#f3f4f6", dark: "#1e1e2e", pink: "#fdf2f8", green: "#f0fdf4", grey: "#d1d5db", blue: "#eff6ff" };
+            return map[t] || "#f3f4f6";
+          })() : "#1a1a2e",
+          backgroundImage: desktopBg && desktopBg !== "none" && !desktopBg.startsWith("#") ? `url(${desktopBg})` : "none",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat"
+        },
+        children: /* @__PURE__ */ jsx(Desktop, { profile })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex backdrop-blur-sm border-gray-200 z-[250] fixed ${isVerticalTaskbar ? `flex-col items-center ${taskbarWClass} py-3 gap-2 top-0 bottom-0 ${taskbarPosition === "left" ? "left-0 border-r" : "right-0 border-l"}` : `items-center ${taskbarHClass} px-3 gap-2 left-0 right-0 ${taskbarPosition === "top" ? "top-0 border-b" : "bottom-0 border-t"}`}`,
+        style: { backgroundColor: `rgb(var(--taskbar-bg-rgb, 243 244 246) / ${taskbarOpacity})` },
+        onContextMenu: (e) => {
+          e.preventDefault();
+          setTaskbarMenu({ x: e.clientX, y: e.clientY });
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+            openWindows.length === 0 && !menuOpen && !balloonDismissed && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `absolute left-1/2 -translate-x-1/2 whitespace-nowrap text-white text-[10px] font-medium pl-3 pr-2 py-1 rounded-full shadow-lg animate-bounce flex items-center gap-1 ${taskbarPosition === "top" ? "top-full mt-2" : "-top-8"}`,
+                style: { backgroundColor: "var(--accent-600, #7c3aed)" },
+                children: [
+                  "Click here to start",
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    setBalloonDismissed(true);
+                  }, className: "text-white/60 hover:text-white ml-1.5", children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `absolute left-1/2 -translate-x-1/2 border-[6px] border-transparent ${taskbarPosition === "top" ? "bottom-full border-b-[var(--accent-color,#7c3aed)]" : "top-full border-t-[var(--accent-color,#7c3aed)]"}`,
+                      style: taskbarPosition === "top" ? { borderBottomColor: "var(--accent-600, #7c3aed)" } : { borderTopColor: "var(--accent-600, #7c3aed)" }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                "data-menu-toggle": true,
+                onClick: () => setMenuOpen((prev) => !prev),
+                title: menuOpen ? "Close menu" : "Open menu",
+                className: `group/erp relative flex items-center gap-1.5 rounded-lg px-4 py-2 text-xs font-medium border overflow-hidden transition-all ${isVerticalTaskbar ? "w-full" : "min-w-[140px]"} ${menuOpen ? "bg-gray-200/40 border-gray-300/40 text-gray-800" : "bg-gray-50/40 border-gray-200/40 text-gray-600 hover:text-gray-800"}`,
+                style: { transition: "box-shadow 0.3s, border-color 0.3s" },
+                onMouseMove: (e) => {
+                  const r = e.currentTarget.getBoundingClientRect();
+                  e.currentTarget.style.setProperty("--mx", `${e.clientX - r.left}px`);
+                  e.currentTarget.style.setProperty("--my", `${e.clientY - r.top}px`);
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.boxShadow = "0 0 15px rgba(255,255,255,0.2), 0 0 30px rgba(255,255,255,0.1)";
+                  e.currentTarget.style.borderColor = "rgba(255,255,255,0.4)";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.boxShadow = "";
+                  e.currentTarget.style.borderColor = "";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "absolute inset-0 opacity-0 group-hover/erp:opacity-100 transition-opacity duration-200 pointer-events-none",
+                      style: { background: "radial-gradient(circle 60px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.25) 0%, transparent 100%)" }
+                    }
+                  ),
+                  productIcon && /* @__PURE__ */ jsx("img", { src: productIcon, alt: "", className: "relative z-10 h-3.5 w-3.5 shrink-0 opacity-60" }),
+                  /* @__PURE__ */ jsx("span", { className: "relative z-10 truncate", children: productName })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: isVerticalTaskbar ? "h-px w-6 bg-gray-300 my-1" : "w-px h-6 bg-gray-300 mx-1" }),
+          /* @__PURE__ */ jsx("div", { id: "taskbar-windows", className: `flex-1 flex ${isVerticalTaskbar ? "flex-col items-center gap-1 min-h-0 overflow-y-auto w-full" : "items-center gap-1.5 min-w-0 overflow-x-auto"}` }),
+          /* @__PURE__ */ jsx("div", { className: isVerticalTaskbar ? "h-px w-6 bg-gray-300 my-1" : "w-px h-6 bg-gray-300 mx-1" }),
+          isVerticalTaskbar ? (
+            /* Vertical: clock + bell + google evenly spaced in a row */
+            /* @__PURE__ */ jsx("div", { className: "w-full px-2", children: /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-center gap-2 ${taskbarPosition === "right" ? "flex-row-reverse" : ""}`, children: [
+              /* @__PURE__ */ jsx(TaskbarClock, {}),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setGoogleConnectOpen(true),
+                  title: googleConnected ? "Google Connected" : "Connect Google",
+                  className: `shrink-0 rounded-md p-1.5 transition-colors ${googleConnected ? "hover:bg-green-50" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200"}`,
+                  children: /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
+                    /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
+                    /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
+                    /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: googleConnected ? "#16a34a" : "#9ca3af" })
+                  ] })
+                }
+              ),
+              notifications && /* @__PURE__ */ jsx(NotificationBell, { ...notifications, popDirection: taskbarPosition === "right" ? "left" : "right" })
+            ] }) })
+          ) : (
+            /* Horizontal: icons then clock */
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              notifications && /* @__PURE__ */ jsx(NotificationBell, { ...notifications }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setGoogleConnectOpen(true),
+                  title: googleConnected ? "Google Connected" : "Connect Google",
+                  className: `shrink-0 rounded-md p-2 transition-colors ${googleConnected ? "hover:bg-green-50" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200"}`,
+                  children: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
+                    /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
+                    /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
+                    /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: googleConnected ? "#16a34a" : "#9ca3af" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(TaskbarClock, {})
+            ] })
+          )
+        ]
+      }
+    ),
+    taskbarMenu && /* @__PURE__ */ jsx(
+      TaskbarContextMenu,
+      {
+        x: taskbarMenu.x,
+        y: taskbarMenu.y,
+        position: taskbarPosition,
+        size: taskbarSize,
+        onChangePosition: (v) => {
+          savePref("taskbar_position", v);
+          setTaskbarMenu(null);
+        },
+        onChangeSize: (v) => {
+          savePref("taskbar_size", v);
+          setTaskbarMenu(null);
+        },
+        onClose: () => setTaskbarMenu(null),
+        onReportBug: bugReport ? () => reportBug(bugReport.submit) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(GlobalSearch, { ...search }),
+    /* @__PURE__ */ jsx(ShortcutHelp, {}),
+    /* @__PURE__ */ jsx(GoogleConnectModal, { open: googleConnectOpen, onClose: () => setGoogleConnectOpen(false) })
+  ] });
+}
+var THEMES = [
+  { key: "system", label: "System", bar1: "bg-[#e5e7eb]", bar2: "bg-[#e5e7eb]" },
+  { key: "light", label: "Light", bar1: "bg-[#e5e7eb]", bar2: "bg-[#e5e7eb]" },
+  { key: "dark", label: "Dark", bar1: "bg-[#45475a]", bar2: "bg-[#45475a]" },
+  { key: "pink", label: "Blossom", bar1: "bg-[#fbcfe8]", bar2: "bg-[#fbcfe8]" },
+  { key: "green", label: "Nature", bar1: "bg-[#bbf7d0]", bar2: "bg-[#bbf7d0]" },
+  { key: "grey", label: "Quicksilver", bar1: "bg-[#d1d5db]", bar2: "bg-[#d1d5db]" },
+  { key: "blue", label: "Ocean", bar1: "bg-[#bfdbfe]", bar2: "bg-[#bfdbfe]" }
+];
+var DEFAULT_WALLPAPERS = [];
+function resolveTheme(key) {
+  if (key === "system") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return key;
+}
+function getVersion() {
+  const now = /* @__PURE__ */ new Date();
+  return `v${String(now.getDate()).padStart(2, "0")}${String(now.getMonth() + 1).padStart(2, "0")}.${String(now.getHours()).padStart(2, "0")}.${String(now.getMinutes()).padStart(2, "0")}.${now.getFullYear()}`;
+}
+function previewColor(resolved, light, dark, pink, green, grey, blue) {
+  if (resolved === "dark") return dark;
+  if (resolved === "pink") return pink;
+  if (resolved === "green") return green;
+  if (resolved === "grey") return grey ?? light;
+  if (resolved === "blue") return blue ?? light;
+  return light;
+}
+function Customization() {
+  const host = useDesktopHost();
+  const WALLPAPERS = host.wallpapers && host.wallpapers.length > 0 ? host.wallpapers : DEFAULT_WALLPAPERS;
+  const { prefs, save } = useShellPrefs();
+  const currentTheme = prefs.theme || "system";
+  const resolved = resolveTheme(currentTheme);
+  const rawBg = prefs.desktop_bg || (WALLPAPERS.length > 0 ? "random" : "none");
+  const randomPickRef = useRef(WALLPAPERS.length > 0 ? WALLPAPERS[Math.floor(Math.random() * WALLPAPERS.length)].src : "none");
+  const desktopBg = rawBg === "random" ? randomPickRef.current : rawBg;
+  const customBg = prefs.desktop_bg_custom || "";
+  const isColor = desktopBg?.startsWith("#");
+  const presetPaths = /* @__PURE__ */ new Set([...WALLPAPERS.map((w) => w.src), "random"]);
+  const isCustom = !isColor && desktopBg !== "none" && rawBg !== "random" && desktopBg && !presetPaths.has(desktopBg);
+  const savePref = (key, value) => {
+    save({ [key]: value });
+  };
+  const [localSliders, setLocalSliders] = useState({});
+  const sliderTimers = useRef({});
+  const saveSlider = useCallback((key, value) => {
+    setLocalSliders((prev) => ({ ...prev, [key]: value }));
+    const cssMap = {
+      transparency_taskbar: "--taskbar-opacity",
+      transparency_inactive_header: "--inactive-header-opacity",
+      transparency_inactive_content: "--inactive-content-opacity",
+      transparency_active_header: "--active-header-opacity",
+      transparency_active_content: "--active-content-opacity"
+    };
+    if (cssMap[key]) {
+      document.documentElement.style.setProperty(cssMap[key], String(value / 100));
+    }
+    if (sliderTimers.current[key]) clearTimeout(sliderTimers.current[key]);
+    sliderTimers.current[key] = setTimeout(() => {
+      savePref(key, value);
+      setLocalSliders((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }, 300);
+  }, [savePref]);
+  useEffect(() => () => {
+    Object.values(sliderTimers.current).forEach(clearTimeout);
+  }, []);
+  const prevTaskbarOpacity = (prefs.transparency_taskbar ?? 70) / 100;
+  const prevActiveHeaderOpacity = (prefs.transparency_active_header ?? 80) / 100;
+  const prevActiveContentOpacity = (prefs.transparency_active_content ?? 90) / 100;
+  const taskbarBg = previewColor(resolved, "bg-white/90", "bg-[#1e1e2e]/90", "bg-pink-50/90", "bg-green-50/90", "bg-gray-200/90", "bg-blue-50/90");
+  const iconBg = previewColor(resolved, "bg-gray-200", "bg-[#313244]", "bg-pink-200", "bg-green-200", "bg-gray-400", "bg-blue-200");
+  const winBg = previewColor(resolved, "bg-white border border-gray-200", "bg-[#1e1e2e] border border-[#45475a]", "bg-white border border-pink-200", "bg-white border border-green-200", "bg-gray-100 border border-gray-300", "bg-blue-50 border border-blue-200");
+  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" })
+        ] }),
+        /* @__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", { 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]" })
+                    ] })
+                  ] })
+                ] })
+              ] }) : 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__ */ 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);
+          } })
+        ] })
+      ] })
+    ] }),
+    /* @__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(
+          "button",
+          {
+            onClick: () => savePref("taskbar_position", pos),
+            className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(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)
+          },
+          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
+          )) })
+        ] })
+      ] })
+    ] }),
+    /* @__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: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 w-40 shrink-0", children: "New window position" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+            { key: "center", label: "Center" },
+            { key: "cascade", label: "Cascade" }
+          ].map((s) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => savePref("window_position", s.key),
+              className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.window_position || "cascade") === 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-40 shrink-0", children: "Double-click desktop" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+            { key: "deactivate", label: "Deactivate all" },
+            { key: "nothing", label: "Do nothing" }
+          ].map((s) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => savePref("desktop_dblclick", s.key),
+              className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.desktop_dblclick || "deactivate") === 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-40 shrink-0", children: "Default window size" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+            { key: "small", label: "Small" },
+            { key: "medium", label: "Medium" },
+            { key: "large", label: "Large" },
+            { key: "maximized", label: "Maximized" }
+          ].map((s) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => savePref("default_window_size", s.key),
+              className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.default_window_size || "large") === 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", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Desktop" }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: prefs.show_desktop_version ?? true,
+            onChange: (e) => savePref("show_desktop_version", e.target.checked),
+            className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Show version on desktop" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 ml-1 font-mono", children: getVersion() })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer mt-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: prefs.auto_fullscreen ?? false,
+            onChange: (e) => savePref("auto_fullscreen", e.target.checked),
+            className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Enter full screen mode automatically" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 ml-1", children: "\u2014 on login" })
+      ] }),
+      /* @__PURE__ */ jsx(SoundSettings, {})
+    ] }),
+    /* @__PURE__ */ jsx(ModalActions, { children: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Changes are saved automatically" }) })
+  ] });
+}
+function SoundSettings() {
+  const [enabled, setEnabled] = useState(soundsEnabled());
+  const [config, setConfig] = useState(getSoundConfig());
+  const update = (soundType, packKey) => {
+    setSoundForType(soundType, packKey);
+    setConfig(getSoundConfig());
+    previewSound(packKey, soundType);
+  };
+  const applyAll = (packKey) => {
+    setAllSounds(packKey);
+    setConfig(getSoundConfig());
+    previewSound(packKey, "success");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: enabled,
+          onChange: (e) => {
+            localStorage.setItem("erp_sounds", String(e.target.checked));
+            setEnabled(e.target.checked);
+          },
+          className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Sound effects" })
+    ] }),
+    enabled && /* @__PURE__ */ jsx("div", { className: "ml-6", children: /* @__PURE__ */ jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-[11px]", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-gray-50", children: [
+        /* @__PURE__ */ jsx("th", { className: "px-2 py-1.5 text-left font-medium text-gray-500 w-24" }),
+        SOUND_PACK_KEYS.map((key) => /* @__PURE__ */ jsx("th", { className: "px-1 py-1.5 text-center", children: /* @__PURE__ */ jsx("button", { onClick: () => applyAll(key), className: "font-medium text-gray-500 hover:text-blue-600 transition-colors", children: SOUND_PACKS[key].label }) }, key))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100", children: SOUND_TYPES.map((soundType) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5 text-gray-700 font-medium", children: SOUND_TYPE_LABELS[soundType] }),
+        SOUND_PACK_KEYS.map((packKey) => /* @__PURE__ */ jsx("td", { className: "px-1 py-1.5 text-center", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => update(soundType, packKey),
+            className: `w-4 h-4 rounded-full border-2 transition-colors ${config[soundType] === packKey ? "bg-blue-600 border-blue-600" : "border-gray-300 hover:border-blue-400"}`
+          }
+        ) }, packKey))
+      ] }, soundType)) })
+    ] }) }) })
+  ] });
+}
+var EntityFetcherContext = createContext(null);
+function ShellEntityFetcherProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(EntityFetcherContext.Provider, { value, children });
+}
+function useShellEntityFetcher() {
+  const ctx = useContext(EntityFetcherContext);
+  return ctx ?? ((endpoint) => {
+    throw new Error(
+      `react-os-shell: cannot fetch ${endpoint} \u2014 no <ShellEntityFetcherProvider> mounted. If your app registers entity windows, supply an entityFetcher.`
+    );
+  });
+}
+function useNewHotkey(callback) {
+  useEffect(() => {
+    const handler = (e) => {
+      const isN = e.code === "KeyN" || e.key === "N" || e.key === "n";
+      if (e.altKey && e.shiftKey && isN && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        callback();
+      }
+    };
+    window.addEventListener("keydown", handler, true);
+    return () => window.removeEventListener("keydown", handler, true);
+  }, [callback]);
+}
+function useEditHotkey(callback) {
+  const isActive = useModalActive();
+  useEffect(() => {
+    if (!callback || !isActive) return;
+    const handler = (e) => {
+      const isE = e.code === "KeyE" || e.key === "E" || e.key === "e";
+      if (e.altKey && e.shiftKey && isE && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        callback();
+      }
+    };
+    window.addEventListener("keydown", handler, true);
+    return () => window.removeEventListener("keydown", handler, true);
+  }, [callback, isActive]);
+}
+
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, GlobalSearch, Layout, MOD, NotificationBell, SHIFT, ShellAuthProvider, ShellEntityFetcherProvider, ShortcutHelp, StartMenu, StatusBadge, StatusBadgeProvider, createWindowRegistry, isMac, openBugReportDialog, reportBug, setShellAuthBridge, useBugReport, useClickOutside, useDesktopHost, useEditHotkey, useNewHotkey, useShellAuth, useShellEntityFetcher };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map