react-os-shell 0.2.43 → 0.2.44

package/dist/index.js

@@ -1,27 +1,684 @@
-import { useBugReport, useDesktopHost } from './chunk-7KZWBIDL.js';
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BugReportConfigProvider, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Desktop, DesktopHostProvider, ENTER, GlobalSearch, Layout, MOD, NotificationBell, SHIFT, ShellAuthProvider, ShortcutHelp, StartMenu, VERSION, isMac, openBugReportDialog, reportBug, setShellAuthBridge, useBugReport, useClickOutside, useDesktopHost, useShellAuth } from './chunk-7KZWBIDL.js';
-import './chunk-PDFQNHW7.js';
+import { useEmailUnreadCount } from './chunk-PDFQNHW7.js';
 import { formatDate } from './chunk-NSU7OHPC.js';
 export { formatDate } from './chunk-NSU7OHPC.js';
-import './chunk-46LICZUM.js';
+import { useGoogleAuth } from './chunk-46LICZUM.js';
+import { subscribePomo, getPomoSnapshot } from './chunk-MK3HLUO4.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
-import { soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-IY7JJVHR.js';
+import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
+import { setPdfPreview } from './chunk-DUUANLLE.js';
 import './chunk-KUIPWCTJ.js';
+import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-import { useWindowManager, Modal, ModalActions, useModalActive } from './chunk-T2NQXP2J.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-T2NQXP2J.js';
+import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, useIsMobile, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive, WINDOW_REGISTRY, isPageEntry, LoadingSpinner, ThumbCard, activateModal } from './chunk-7M3BBAHQ.js';
+export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, glassStyle, isEntityEntry, isPageEntry, setShellApiClient, setShellNavIcons, setShellWindowRegistry, setWindowDefaultPosition, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-7M3BBAHQ.js';
 import { confirm } from './chunk-PLGHQ7QW.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-PLGHQ7QW.js';
-import { createContext, useState, useContext, useRef, useCallback, useEffect } from 'react';
-import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { createContext, lazy, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useSyncExternalStore, useMemo } 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 handleClick = useCallback((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);
+  }, [queryClient, markRead, onItemClick]);
+  const [inlineNotif, setInlineNotif] = useState(null);
+  const inlineTimerRef = useRef(null);
+  const dismissInline = useCallback(() => {
+    if (inlineTimerRef.current) {
+      clearTimeout(inlineTimerRef.current);
+      inlineTimerRef.current = null;
+    }
+    setInlineNotif(null);
+  }, []);
+  const showInlineNotif = useCallback((notif, durationMs = 5e3) => {
+    setInlineNotif(notif);
+    playNotification();
+    if (inlineTimerRef.current) clearTimeout(inlineTimerRef.current);
+    inlineTimerRef.current = setTimeout(() => setInlineNotif(null), durationMs);
+  }, []);
+  useEffect(() => () => {
+    if (inlineTimerRef.current) clearTimeout(inlineTimerRef.current);
+  }, []);
+  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();
+              handleClick(latest);
+              n.close();
+            };
+          }
+        } else {
+          showInlineNotif(latest);
+        }
+      }).catch(() => {
+      });
+    }
+    prevCountRef.current = unreadCount;
+  }, [unreadCount, list, showInlineNotif]);
+  const { data: notifData } = useQuery({
+    queryKey: ["notifications-dropdown"],
+    queryFn: () => list({ page_size: 30 }),
+    staleTime: 3e4,
+    refetchInterval: 3e4
+  });
+  const notifications = notifData?.results ?? [];
+  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
+    ),
+    inlineNotif && createPortal(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("style", { children: `@keyframes notif-in { from { opacity: 0; transform: translateX(30px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } }` }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: () => {
+              handleClick(inlineNotif);
+              dismissInline();
+            },
+            className: "fixed top-4 right-4 z-[9999] w-[320px] max-w-[calc(100vw-2rem)] cursor-pointer rounded-2xl bg-white/85 backdrop-blur-md border border-white/40 shadow-2xl flex items-start gap-3 px-4 py-3",
+            style: { animation: "notif-in 300ms cubic-bezier(0.4,0,0.2,1)" },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "h-9 w-9 shrink-0 rounded-lg bg-blue-500/15 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-blue-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold uppercase tracking-wide text-blue-600 mb-0.5", children: "Notification" }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-800 leading-snug truncate", children: inlineNotif.title }),
+                inlineNotif.message && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 leading-snug truncate mt-0.5", children: inlineNotif.message })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    dismissInline();
+                  },
+                  className: "shrink-0 p-1 -mr-1 -mt-1 text-gray-400 hover:text-gray-600 transition-colors",
+                  "aria-label": "Dismiss notification",
+                  children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      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 [reportType, setReportType] = useState("bug");
+  const [annotating, setAnnotating] = useState(false);
+  const resolveRef = useRef();
+  const openFn = useCallback((s) => {
+    setScreenshot(s);
+    setDescription("");
+    setReportType("bug");
+    setAnnotating(false);
+    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 = () => {
+    setAnnotating(false);
+    setOpen(false);
+    resolveRef.current?.({ description: description.trim(), reportType, screenshot });
+  };
+  const handleCancel = () => {
+    setAnnotating(false);
+    setOpen(false);
+    resolveRef.current?.(null);
+  };
+  const isBug = reportType === "bug";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open,
+        onClose: annotating ? () => {
+        } : 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: "Suggestion or 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." }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 inline-flex rounded-lg border border-gray-300 bg-gray-50 p-0.5", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setReportType("bug"),
+                  className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${isBug ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+                  children: "Bug"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setReportType("suggestion"),
+                  className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${!isBug ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+                  children: "Suggestion"
+                }
+              )
+            ] }),
+            previewUrl && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative 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" }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setAnnotating(true),
+                    className: "absolute top-2 right-2 inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-white/95 backdrop-blur border border-gray-200 shadow-sm text-xs font-medium text-gray-700 hover:bg-white",
+                    title: "Mark up the screenshot \u2014 circle, arrow, mosaic, text\u2026",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" }) }),
+                      "Annotate"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-gray-400", children: "Click Annotate to mark up the screenshot before sending." })
+            ] }),
+            !previewUrl && /* @__PURE__ */ jsx(UploadDropZone, { onSelect: (blob) => setScreenshot(blob) }),
+            /* @__PURE__ */ jsxs("label", { className: "mt-4 block text-sm font-medium text-gray-700", children: [
+              isBug ? "What went wrong?" : "What's your suggestion?",
+              /* @__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: isBug ? "Briefly describe the issue, what you were doing, what you expected to happen\u2026" : "Briefly describe what would make this better\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"
+                }
+              )
+            ] })
+          ] }) }),
+          annotating && previewUrl && /* @__PURE__ */ jsx(
+            BugReportAnnotator,
+            {
+              src: previewUrl,
+              onApply: (blob) => {
+                setScreenshot(blob);
+                setAnnotating(false);
+              },
+              onCancel: () => setAnnotating(false)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var LazyImageAnnotator = lazy(() => import('./ImageAnnotator-CTTMAY5Z.js'));
+function UploadDropZone({ onSelect }) {
+  const inputRef = useRef(null);
+  const [hover, setHover] = useState(false);
+  const accept = (file) => {
+    if (!file) return;
+    if (!file.type.startsWith("image/")) return;
+    onSelect(file);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => inputRef.current?.click(),
+      onDragOver: (e) => {
+        e.preventDefault();
+        setHover(true);
+      },
+      onDragLeave: () => setHover(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setHover(false);
+        accept(e.dataTransfer.files?.[0]);
+      },
+      className: `mt-4 rounded-md border border-dashed px-4 py-6 text-center text-sm cursor-pointer transition-colors ${hover ? "border-blue-400 bg-blue-50 text-blue-700" : "border-gray-300 text-gray-500 hover:border-gray-400 hover:bg-gray-50"}`,
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-gray-700 font-medium", children: "Screenshot capture failed" }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-gray-500", children: [
+          "Drop an image here, or ",
+          /* @__PURE__ */ jsx("span", { className: "text-blue-600 underline", children: "click to upload" }),
+          ". Your description will be sent either way."
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: "image/*",
+            onChange: (e) => accept(e.target.files?.[0]),
+            className: "hidden"
+          }
+        )
+      ]
+    }
+  );
+}
+function BugReportAnnotator({
+  src,
+  onApply,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[10000] bg-black/60 backdrop-blur-sm flex flex-col", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-sm text-white/80", children: "Loading editor\u2026" }), children: /* @__PURE__ */ jsx("div", { className: "flex-1 m-4 rounded-lg overflow-hidden bg-white shadow-2xl", children: /* @__PURE__ */ jsx(LazyImageAnnotator, { src, filename: "screenshot.png", onApply, onCancel }) }) }) });
+}
 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" });
 }
@@ -203,6 +860,3427 @@ function StatusBadge({ status }) {
   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 VERSION = "0.2.44" ;
+var APP_VERSION = 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;
+  const finalScreenshot = submission.screenshot ?? screenshot;
+  try {
+    await submit({
+      description: submission.description || void 0,
+      screenshot: finalScreenshot ?? void 0,
+      url: window.location.href,
+      userAgent: navigator.userAgent,
+      viewport: `${window.innerWidth}x${window.innerHeight}`,
+      reportType: submission.reportType
+    });
+    toast_default.success(submission.reportType === "bug" ? "Bug sent to admins." : "Suggestion sent to admins.");
+  } catch (err) {
+    toast_default.error(err?.response?.data?.detail || "Failed to send.");
+  }
+}
+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 FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder }) {
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [rubber, setRubber] = useState(null);
+  const didDragRubber = useRef(false);
+  const bodyRef = useRef(null);
+  const [dragIdx, setDragIdx] = useState(null);
+  const [dropIdx, setDropIdx] = useState(null);
+  const toggleSelect = (i, e) => {
+    e.stopPropagation();
+    if (e.shiftKey || e.metaKey || e.ctrlKey) {
+      setSelected((prev) => {
+        const next = new Set(prev);
+        next.has(i) ? next.delete(i) : next.add(i);
+        return next;
+      });
+    } else {
+      setSelected(/* @__PURE__ */ new Set([i]));
+    }
+  };
+  const startRubber = (e) => {
+    if (e.button !== 0 || e.target !== bodyRef.current) return;
+    const r = bodyRef.current.getBoundingClientRect();
+    const x = e.clientX - r.left;
+    const y = e.clientY - r.top;
+    setRubber({ x1: x, y1: y, x2: x, y2: y });
+    didDragRubber.current = false;
+    setSelected(/* @__PURE__ */ new Set());
+  };
+  useEffect(() => {
+    if (!rubber) return;
+    const move = (e) => {
+      const r = bodyRef.current?.getBoundingClientRect();
+      if (!r) return;
+      const x = e.clientX - r.left;
+      const y = e.clientY - r.top;
+      const dx = x - rubber.x1, dy = y - rubber.y1;
+      if (dx * dx + dy * dy > 16) didDragRubber.current = true;
+      setRubber((prev) => prev ? { ...prev, x2: x, y2: y } : null);
+    };
+    const up = () => {
+      const next = /* @__PURE__ */ new Set();
+      const r = bodyRef.current;
+      if (r && rubber) {
+        const minX = Math.min(rubber.x1, rubber.x2);
+        const maxX = Math.max(rubber.x1, rubber.x2);
+        const minY = Math.min(rubber.y1, rubber.y2);
+        const maxY = Math.max(rubber.y1, rubber.y2);
+        const tiles = r.querySelectorAll("[data-folder-item]");
+        const containerRect = r.getBoundingClientRect();
+        tiles.forEach((t) => {
+          const tr = t.getBoundingClientRect();
+          const tx = tr.left - containerRect.left;
+          const ty = tr.top - containerRect.top;
+          if (tx + tr.width > minX && tx < maxX && ty + tr.height > minY && ty < maxY) {
+            const i = parseInt(t.getAttribute("data-folder-item") || "-1", 10);
+            if (i >= 0) next.add(i);
+          }
+        });
+      }
+      if (didDragRubber.current) setSelected(next);
+      setRubber(null);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [rubber]);
+  const onItemDragStart = (i) => (e) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(i));
+    setDragIdx(i);
+  };
+  const onItemDragOver = (i) => (e) => {
+    e.preventDefault();
+    if (dragIdx !== null && dragIdx !== i) setDropIdx(i);
+  };
+  const onItemDrop = (i) => (e) => {
+    e.preventDefault();
+    if (dragIdx === null || dragIdx === i) {
+      setDragIdx(null);
+      setDropIdx(null);
+      return;
+    }
+    const next = [...items];
+    const [moved] = next.splice(dragIdx, 1);
+    next.splice(i, 0, moved);
+    onReorder(next);
+    setDragIdx(null);
+    setDropIdx(null);
+  };
+  const moveSelectedOut = () => {
+    if (selected.size === 0) return;
+    onMoveOut(Array.from(selected).map((i) => items[i]).filter(Boolean));
+    setSelected(/* @__PURE__ */ new Set());
+  };
+  const folderIcon = /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-amber-500", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M2 6a2 2 0 012-2h5l2 2h9a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" }) });
+  return /* @__PURE__ */ jsx(Modal, { open: true, onClose, title: folder.name, icon: folderIcon, size: "lg", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: bodyRef,
+      onPointerDown: startRubber,
+      onClick: () => {
+        if (didDragRubber.current) {
+          didDragRubber.current = false;
+          return;
+        }
+        setSelected(/* @__PURE__ */ new Set());
+      },
+      className: "relative h-full min-h-[300px] p-3 overflow-auto",
+      style: {
+        background: "linear-gradient(135deg, rgba(254, 243, 199, 0.55) 0%, rgba(253, 230, 138, 0.4) 50%, rgba(252, 211, 77, 0.3) 100%)"
+      },
+      children: [
+        selected.size > 0 && /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 mb-2 flex items-center gap-2 px-2 py-1 rounded-md bg-white/80 backdrop-blur-sm shadow border border-gray-200 text-xs text-gray-700 w-fit", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            selected.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: moveSelectedOut, className: "px-2 py-0.5 rounded text-blue-600 hover:bg-blue-50", children: "Move to desktop" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setSelected(/* @__PURE__ */ new Set()), className: "px-2 py-0.5 rounded text-gray-500 hover:bg-gray-100", children: "Clear" })
+        ] }),
+        items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 text-center py-8 italic", children: "Folder is empty. Drag documents here." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: items.map((item, i) => {
+          const isSelected = selected.has(i);
+          const isDropTarget = dropIdx === i && dragIdx !== i;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-folder-item": i,
+              draggable: true,
+              onDragStart: onItemDragStart(i),
+              onDragOver: onItemDragOver(i),
+              onDrop: onItemDrop(i),
+              onDragEnd: () => {
+                setDragIdx(null);
+                setDropIdx(null);
+              },
+              onClick: (e) => toggleSelect(i, e),
+              onDoubleClick: () => onOpen(item),
+              className: `group relative flex flex-col items-center gap-1 w-20 p-2 rounded-lg cursor-default transition-colors ${isSelected ? "bg-blue-200/60 ring-2 ring-blue-400" : "hover:bg-white/60"} ${isDropTarget ? "ring-2 ring-blue-500 ring-dashed" : ""} ${dragIdx === i ? "opacity-40" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onMoveOut([item]);
+                    },
+                    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-white 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] font-medium text-center leading-tight truncate w-full ${isSelected ? "text-blue-900" : "text-gray-700"}`, children: item.label })
+              ]
+            },
+            `${item.entityType}-${item.entityId}-${i}`
+          );
+        }) }),
+        rubber && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute border border-blue-500 bg-blue-500/10 pointer-events-none",
+            style: {
+              left: Math.min(rubber.x1, rubber.x2),
+              top: Math.min(rubber.y1, rubber.y2),
+              width: Math.abs(rubber.x2 - rubber.x1),
+              height: Math.abs(rubber.y2 - rubber.y1)
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
+function Desktop({ profile }) {
+  useQueryClient();
+  const { openEntity, openPage } = useWindowManager();
+  const bugReport = useBugReport();
+  const containerRef = useRef(null);
+  const { prefs: shellPrefs, save: saveShellPrefs } = useShellPrefs();
+  const prefs = { ...profile?.preferences || {}, ...shellPrefs };
+  const favDocs = prefs.favorite_documents || [];
+  const folders = prefs.desktop_folders || [];
+  const snapEnabled = prefs.desktop_snap ?? false;
+  const allNotes = prefs.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 [hoverFolderIdx, setHoverFolderIdx] = useState(null);
+  const hoverFolderIdxRef = useRef(null);
+  const saveDocs = useCallback((docs) => {
+    if (host.saveShortcuts) host.saveShortcuts(docs);
+    else saveShellPrefs({ favorite_documents: docs });
+  }, [host, saveShellPrefs]);
+  const saveFolders = useCallback((f) => {
+    if (host.saveFolders) host.saveFolders(f);
+    else saveShellPrefs({ desktop_folders: f });
+  }, [host, saveShellPrefs]);
+  useCallback((v) => {
+    if (host.saveSnap) host.saveSnap(v);
+    else saveShellPrefs({ desktop_snap: v });
+  }, [host, saveShellPrefs]);
+  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 dragEntriesRef = useRef([]);
+  const startDrag = (type, idx, e) => {
+    if (e.button !== 0) return;
+    const primaryKey = `${type}-${idx}`;
+    const draggingMulti = selected.has(primaryKey) && selected.size > 1;
+    const keys = draggingMulti ? Array.from(selected) : [primaryKey];
+    const entries = [];
+    for (const key of keys) {
+      if (key.startsWith("item-")) {
+        const i = parseInt(key.slice(5), 10);
+        const itm = desktopItems[i];
+        if (!itm) continue;
+        const pos = getItemPos(itm, i);
+        const el = document.querySelector(`[data-desktop-icon="${key}"]`);
+        entries.push({ key, type: "item", idx: i, origX: pos.right, origY: pos.top, el });
+      } else if (key.startsWith("folder-")) {
+        const i = parseInt(key.slice(7), 10);
+        const f = folders[i];
+        if (!f) continue;
+        const pos = getFolderPos(f, i);
+        const el = document.querySelector(`[data-desktop-icon="${key}"]`);
+        entries.push({ key, type: "folder", idx: i, origX: pos.right, origY: pos.top, el });
+      }
+    }
+    dragEntriesRef.current = entries;
+    const primaryEntry = entries.find((e2) => e2.key === primaryKey) ?? entries[0];
+    if (!primaryEntry) return;
+    setDragging({ type, idx, startX: e.clientX, startY: e.clientY, origX: primaryEntry.origX, origY: primaryEntry.origY });
+    e.preventDefault();
+  };
+  useEffect(() => {
+    if (!dragging) return;
+    const entries = dragEntriesRef.current;
+    const isSingleItemDrag = entries.length === 1 && entries[0].type === "item";
+    const move = (e) => {
+      const dx = e.clientX - dragging.startX;
+      const dy = e.clientY - dragging.startY;
+      for (const entry of entries) {
+        if (!entry.el) continue;
+        entry.el.style.right = `${entry.origX - dx}px`;
+        entry.el.style.top = `${entry.origY + dy}px`;
+        entry.el.style.left = "auto";
+        entry.el.style.zIndex = "100";
+        entry.el.style.opacity = "0.7";
+      }
+      if (isSingleItemDrag) {
+        const elsBelow = document.elementsFromPoint(e.clientX, e.clientY);
+        let nextHover = null;
+        for (const el of elsBelow) {
+          const fk = el.closest?.('[data-desktop-icon^="folder-"]');
+          if (fk) {
+            const key = fk.getAttribute("data-desktop-icon");
+            if (key) nextHover = parseInt(key.slice(7), 10);
+            break;
+          }
+        }
+        hoverFolderIdxRef.current = nextHover;
+        setHoverFolderIdx((prev) => prev === nextHover ? prev : nextHover);
+      }
+    };
+    const up = (e) => {
+      const dx = e.clientX - dragging.startX;
+      const dy = e.clientY - dragging.startY;
+      for (const entry of entries) {
+        if (!entry.el) continue;
+        entry.el.style.zIndex = "";
+        entry.el.style.opacity = "";
+      }
+      const liveHoverIdx = hoverFolderIdxRef.current;
+      const hoveredFolder = liveHoverIdx != null ? folders[liveHoverIdx] : null;
+      hoverFolderIdxRef.current = null;
+      setHoverFolderIdx(null);
+      const computedPositions = entries.map((entry) => {
+        let finalRight = entry.origX - dx;
+        let finalTop = Math.max(0, entry.origY + dy);
+        if (snapEnabled) {
+          const s = snapToGrid(finalRight, finalTop);
+          finalRight = s.x;
+          finalTop = s.y;
+        }
+        finalRight = Math.max(0, finalRight);
+        return { entry, finalRight, finalTop };
+      });
+      const itemMoves = computedPositions.filter((p) => p.entry.type === "item");
+      if (itemMoves.length > 0) {
+        const updated = [...favDocs];
+        const positionsPatch = {};
+        const singleItem = itemMoves.length === 1 && entries.length === 1 ? itemMoves[0] : null;
+        const droppedOnFolder = singleItem ? hoveredFolder ?? folders.find((f, fi) => {
+          const fp = getFolderPos(f, fi);
+          return Math.abs(singleItem.finalRight - fp.right) < 40 && Math.abs(singleItem.finalTop - fp.top) < 40;
+        }) : void 0;
+        if (droppedOnFolder && singleItem?.entry.el) {
+          const itemEl = singleItem.entry.el;
+          const folderIdx = folders.indexOf(droppedOnFolder);
+          const folderEl = document.querySelector(`[data-desktop-icon="folder-${folderIdx}"]`);
+          if (folderEl) {
+            const ir = itemEl.getBoundingClientRect();
+            const fr = folderEl.getBoundingClientRect();
+            const dx2 = fr.left + fr.width / 2 - (ir.left + ir.width / 2);
+            const dy2 = fr.top + fr.height / 2 - (ir.top + ir.height / 2);
+            itemEl.style.transition = "transform 220ms ease-out, opacity 220ms ease-out";
+            itemEl.style.transform = `translate(${dx2}px, ${dy2}px) scale(0.2)`;
+            itemEl.style.opacity = "0";
+          }
+          folderEl?.animate(
+            [{ transform: "scale(1)" }, { transform: "scale(1.15)" }, { transform: "scale(1)" }],
+            { duration: 280, easing: "ease-out" }
+          );
+        }
+        for (const move2 of itemMoves) {
+          const desktopIdx = favDocs.indexOf(desktopItems[move2.entry.idx]);
+          if (desktopIdx === -1) continue;
+          if (droppedOnFolder) {
+            updated[desktopIdx] = { ...updated[desktopIdx], folderId: droppedOnFolder.id, x: void 0, y: void 0 };
+          } else {
+            updated[desktopIdx] = { ...updated[desktopIdx], x: move2.finalRight, y: move2.finalTop, folderId: void 0 };
+            positionsPatch[`item-${desktopIdx}`] = { right: move2.finalRight, top: move2.finalTop };
+          }
+        }
+        const commit = () => {
+          saveDocs(updated);
+          if (Object.keys(positionsPatch).length > 0) {
+            setLocalPositions((prev) => ({ ...prev, ...positionsPatch }));
+          }
+        };
+        if (droppedOnFolder) setTimeout(commit, 220);
+        else commit();
+      }
+      const folderMoves = computedPositions.filter((p) => p.entry.type === "folder");
+      if (folderMoves.length > 0) {
+        const updated = [...folders];
+        const positionsPatch = {};
+        for (const move2 of folderMoves) {
+          updated[move2.entry.idx] = { ...updated[move2.entry.idx], x: move2.finalRight, y: move2.finalTop };
+          positionsPatch[`folder-${move2.entry.idx}`] = { right: move2.finalRight, top: move2.finalTop };
+        }
+        saveFolders(updated);
+        setLocalPositions((prev) => ({ ...prev, ...positionsPatch }));
+      }
+      setDragging(null);
+      dragEntriesRef.current = [];
+    };
+    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}:${d.x ?? ""}:${d.y ?? ""}:${d.folderId ?? ""}`));
+  const foldersKey = JSON.stringify(folders.map((f) => `${f.id}:${f.x ?? ""}:${f.y ?? ""}`));
+  useEffect(() => {
+    setLocalPositions({});
+  }, [favDocsKey, foldersKey]);
+  const didRubberBandDragRef = useRef(false);
+  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 });
+    didRubberBandDragRef.current = false;
+    setSelected(/* @__PURE__ */ new Set());
+  };
+  useEffect(() => {
+    if (!rubberBand) return;
+    const move = (e) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const dx = x - rubberBand.startX;
+      const dy = y - rubberBand.startY;
+      if (dx * dx + dy * dy > 16) didRubberBandDragRef.current = true;
+      setRubberBand((prev) => prev ? { ...prev, endX: x, endY: y } : 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 containerW = rect?.width ?? 0;
+    const cursorLeft = contextMenu ? contextMenu.x - (rect?.left ?? 0) : containerW - 100;
+    const cursorTop = contextMenu ? contextMenu.y - (rect?.top ?? 0) : 100;
+    const x = Math.max(0, containerW - cursorLeft - 40);
+    const y = Math.max(0, cursorTop - 20);
+    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) => {
+    if (host.saveNotes) host.saveNotes(updated);
+    else saveShellPrefs({ notepad_notes: updated });
+  }, [host, saveShellPrefs]);
+  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: () => {
+        if (didRubberBandDragRef.current) {
+          didRubberBandDragRef.current = false;
+          return;
+        }
+        setSelected(/* @__PURE__ */ new Set());
+        setContextMenu(null);
+      },
+      children: [
+        (() => {
+          const cs = typeof document !== "undefined" ? getComputedStyle(document.documentElement) : null;
+          const tbH = parseInt(cs?.getPropertyValue("--taskbar-height") || "0") || 0;
+          const tbW = parseInt(cs?.getPropertyValue("--taskbar-width") || "0") || 0;
+          const tbPos = (cs?.getPropertyValue("--taskbar-position") || "bottom").trim();
+          const defaultRight = 20 + (tbPos === "right" ? tbW : 0);
+          const defaultBottom = 20 + (tbPos === "bottom" ? tbH : 0);
+          const trashPos = prefs.desktop_trash_position;
+          const right = trashPos?.right ?? defaultRight;
+          const bottom = trashPos?.bottom ?? defaultBottom;
+          const startTrashDrag = (e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            e.stopPropagation();
+            const el = e.currentTarget;
+            const startX = e.clientX, startY = e.clientY;
+            let moved = false;
+            const move = (ev) => {
+              const dx = ev.clientX - startX;
+              const dy = ev.clientY - startY;
+              if (!moved && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) moved = true;
+              if (!moved) return;
+              el.style.right = `${right - dx}px`;
+              el.style.bottom = `${bottom - dy}px`;
+              el.style.opacity = "0.7";
+              el.style.zIndex = "100";
+            };
+            const up = (ev) => {
+              window.removeEventListener("pointermove", move);
+              window.removeEventListener("pointerup", up);
+              el.style.opacity = "";
+              el.style.zIndex = "";
+              if (!moved) return;
+              const newRight = Math.max(0, right - (ev.clientX - startX));
+              const newBottom = Math.max(0, bottom - (ev.clientY - startY));
+              saveShellPrefs({ desktop_trash_position: { right: newRight, bottom: newBottom } });
+            };
+            window.addEventListener("pointermove", move);
+            window.addEventListener("pointerup", up);
+          };
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-desktop-icon": "trash",
+              style: { position: "absolute", right, bottom, zIndex: 1 },
+              onPointerDown: startTrashDrag,
+              onClick: (e) => e.stopPropagation(),
+              onContextMenu: (e) => e.preventDefault(),
+              onDoubleClick: (e) => {
+                e.stopPropagation();
+                window.__REACT_OS_SHELL_FILES_VIEW__ = "trash";
+                window.dispatchEvent(new CustomEvent("react-os-shell:files-show-trash"));
+                openPage("/files");
+              },
+              className: "cursor-default select-none",
+              title: "Trash \u2014 double-click to open, drag to move",
+              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", children: /* @__PURE__ */ jsx("svg", { className: "h-12 w-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#c0c4cc",
+                    stroke: "#5f6677",
+                    strokeWidth: "0.6",
+                    strokeLinejoin: "round",
+                    fillRule: "evenodd",
+                    clipRule: "evenodd",
+                    d: "M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 014.368 0c1.603.051 2.816 1.387 2.816 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.346-9z"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-center leading-tight text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]", children: "Trash" })
+              ] })
+            }
+          );
+        })(),
+        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": `item-${i}`,
+              style: { position: "absolute", right: pos.right, top: pos.top, zIndex: 1 },
+              onPointerDown: (e) => {
+                e.stopPropagation();
+                startDrag("item", i, e);
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                if (e.shiftKey || e.metaKey || e.ctrlKey) {
+                  setSelected((prev) => {
+                    const next = new Set(prev);
+                    next.has(`item-${i}`) ? next.delete(`item-${i}`) : next.add(`item-${i}`);
+                    return next;
+                  });
+                } else if (!selected.has(`item-${i}`)) {
+                  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 isHovered = hoverFolderIdx === i;
+          const itemCount = folderItems(folder.id).length;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-desktop-icon": `folder-${i}`,
+              style: {
+                position: "absolute",
+                right: pos.right,
+                top: pos.top,
+                zIndex: 1,
+                transform: isHovered ? "scale(1.15)" : "scale(1)",
+                transition: "transform 180ms ease-out"
+              },
+              onPointerDown: (e) => {
+                e.stopPropagation();
+                startDrag("folder", i, e);
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                if (e.shiftKey || e.metaKey || e.ctrlKey) {
+                  setSelected((prev) => {
+                    const next = new Set(prev);
+                    next.has(`folder-${i}`) ? next.delete(`folder-${i}`) : next.add(`folder-${i}`);
+                    return next;
+                  });
+                } else if (!selected.has(`folder-${i}`)) {
+                  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" : ""} ${isHovered ? "rounded-lg ring-4 ring-amber-400 shadow-[0_0_20px_rgba(245,158,11,0.6)]" : ""}`, 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",
+                        {
+                          onPointerDown: (e) => e.stopPropagation(),
+                          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",
+                          {
+                            onPointerDown: (e) => e.stopPropagation(),
+                            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",
+                          {
+                            onPointerDown: (e) => e.stopPropagation(),
+                            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",
+                          {
+                            onPointerDown: (e) => e.stopPropagation(),
+                            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" }) }),
+              "Suggestion or 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;
+          return /* @__PURE__ */ jsx(
+            FolderWindow,
+            {
+              folder,
+              items: folderItems(openFolder),
+              onClose: () => setOpenFolder(null),
+              onOpen: (item) => openEntity(item.entityType, item.entityId, null, item.label),
+              onMoveOut: (toMove) => {
+                const ids = new Set(toMove.map((t) => `${t.entityType}|${t.entityId}`));
+                const updated = favDocs.map(
+                  (d) => d.folderId === openFolder && ids.has(`${d.entityType}|${d.entityId}`) ? { ...d, folderId: void 0 } : d
+                );
+                saveDocs(updated);
+              },
+              onReorder: (nextItems) => {
+                const others = favDocs.filter((d) => d.folderId !== openFolder);
+                saveDocs([...others, ...nextItems]);
+              }
+            }
+          );
+        })(),
+        aboutOpen && (() => {
+          const version = host.productVersion ?? APP_VERSION;
+          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?:\/\//, "") })
+            ] })
+          ] }) });
+        })(),
+        prefs.show_desktop_version === true && (host.productVersion ?? APP_VERSION) && /* @__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 ${prefs.taskbar_position === "top" ? "right-3" : prefs.taskbar_position === "left" ? "right-3" : prefs.taskbar_position === "right" ? "left-3" : "right-3 !bottom-16"}`,
+            children: host.productVersion ?? APP_VERSION
+          }
+        ),
+        whatsNewOpen && (() => {
+          const entries = host.productChangelog ?? changelog_default;
+          return /* @__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: entries.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 text-center py-6", children: "No changelog available." }) : entries.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 < entries.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 isMobile = useIsMobile();
+  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();
+  };
+  if (isMobile) {
+    const allItems = [];
+    for (const entry of navSections2) {
+      if (isSection(entry)) {
+        const sec = entry;
+        if (sec.perms && !hasAnyPerm(sec.perms)) continue;
+        for (const it of sec.items) {
+          if (it.perms && !hasAnyPerm(it.perms)) continue;
+          allItems.push({ item: it, sectionLabel: sec.label });
+        }
+      } else {
+        const it = entry;
+        if (it.perms && !hasAnyPerm(it.perms)) continue;
+        allItems.push({ item: it });
+      }
+    }
+    const filtered = search.length >= 1 ? allItems.filter(({ item }) => item.label.toLowerCase().includes(search.toLowerCase())) : allItems;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: menuRef,
+        className: "fixed inset-0 z-[260] flex flex-col bg-white",
+        style: { paddingBottom: "var(--mobile-bottom-nav, 56px)" },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-gray-200", children: [
+            /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-2 -ml-1 rounded-full active:bg-gray-200 text-gray-700", "aria-label": "Close menu", children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-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" }) }) }),
+            /* @__PURE__ */ jsxs("div", { className: `flex-1 flex items-center gap-2 ${GLASS_INPUT_BG} rounded-lg px-3 py-2`, children: [
+              /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "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),
+                  placeholder: "Search apps...",
+                  className: "flex-1 bg-transparent text-sm outline-none placeholder-gray-400",
+                  autoFocus: true
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 text-center py-12", children: "No matching apps" }) : filtered.map(({ item, sectionLabel }, i) => {
+            const icon = navIcons2[item.to];
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleClick(item.to),
+                className: "w-full flex items-center gap-3 px-4 py-3 active:bg-gray-100 border-b border-gray-100 text-left",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "h-8 w-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-600 shrink-0", children: icon && isValidElement(icon) ? cloneElement(icon, { className: "h-5 w-5" }) : null }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-900 truncate", children: item.label }),
+                    sectionLabel && /* @__PURE__ */ jsx("div", { className: "text-[11px] text-gray-500 truncate", children: sectionLabel })
+                  ] })
+                ]
+              },
+              `${item.to}-${i}`
+            );
+          }) })
+        ]
+      }
+    );
+  }
+  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("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__ */ 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("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__ */ 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); } }
+      ` })
+  ] });
+}
+
+// src/shell/mobileShellStore.ts
+var _mode = "home";
+var listeners = /* @__PURE__ */ new Set();
+function getMobileMode() {
+  return _mode;
+}
+function setMobileMode(mode) {
+  if (_mode === mode) return;
+  _mode = mode;
+  listeners.forEach((fn) => fn());
+}
+function subscribeMobileMode(cb) {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+}
+var MOBILE_WIDGET_ORDER_KEY = "erp_mobile_widget_order";
+var MOBILE_HOME_ORDER_KEY = "erp_mobile_home_order";
+var LONG_PRESS_MS = 400;
+var ICON_GRADIENTS = [
+  "from-blue-500 to-blue-700",
+  "from-indigo-500 to-purple-600",
+  "from-purple-500 to-pink-600",
+  "from-pink-500 to-rose-600",
+  "from-red-500 to-rose-600",
+  "from-orange-500 to-red-600",
+  "from-amber-500 to-orange-600",
+  "from-yellow-500 to-amber-500",
+  "from-lime-500 to-green-600",
+  "from-green-500 to-emerald-600",
+  "from-emerald-500 to-teal-600",
+  "from-teal-500 to-cyan-600",
+  "from-cyan-500 to-sky-600",
+  "from-sky-500 to-blue-600",
+  "from-violet-500 to-fuchsia-600"
+];
+function hashGradient(seed) {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) h = (h << 5) - h + seed.charCodeAt(i);
+  return ICON_GRADIENTS[Math.abs(h) % ICON_GRADIENTS.length];
+}
+function loadOrder(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) return parsed.filter((s) => typeof s === "string");
+    }
+  } catch {
+  }
+  return [];
+}
+function saveOrder(key, order) {
+  try {
+    localStorage.setItem(key, JSON.stringify(order));
+  } catch {
+  }
+}
+var FALLBACK_APP_ICON = /* @__PURE__ */ jsx("svg", { className: "h-10 w-10", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75A2.25 2.25 0 016 4.5h12a2.25 2.25 0 012.25 2.25v10.5A2.25 2.25 0 0118 19.5H6a2.25 2.25 0 01-2.25-2.25V6.75z" }) });
+function sizeIcon(node, fallback, sizeClass = "h-10 w-10") {
+  if (!node) return fallback;
+  if (isValidElement(node)) {
+    return cloneElement(node, {
+      className: `${sizeClass} ${node.props?.className ?? ""}`.trim()
+    });
+  }
+  return node;
+}
+function AppTile({ route, icon }) {
+  return /* @__PURE__ */ jsx("span", { className: `relative aspect-square w-full rounded-2xl bg-gradient-to-br ${hashGradient(route)} flex items-center justify-center text-white shadow-sm border border-white/30`, children: sizeIcon(icon, FALLBACK_APP_ICON, "h-11 w-11") });
+}
+function FolderTile({ section, navIcons: navIcons2 }) {
+  const previewItems = section.items.slice(0, 4);
+  return /* @__PURE__ */ jsxs("span", { className: "relative aspect-square w-full rounded-2xl bg-white/30 backdrop-blur-sm border border-white/40 p-1.5 grid grid-cols-2 gap-1 shadow-sm", children: [
+    previewItems.map((item) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `rounded-md bg-gradient-to-br ${hashGradient(item.to)} flex items-center justify-center text-white`,
+        children: sizeIcon(navIcons2[item.to], FALLBACK_APP_ICON, "h-3.5 w-3.5")
+      },
+      item.to
+    )),
+    Array.from({ length: Math.max(0, 4 - previewItems.length) }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "rounded-md bg-white/20" }, `empty-${i}`))
+  ] });
+}
+function MobileHome({
+  navSections: navSections2,
+  navIcons: navIcons2,
+  sectionIcons: sectionIcons2,
+  openWindows,
+  onOpenApp,
+  onActivateWindow
+}) {
+  const [selectedFolder, setSelectedFolder] = useState(null);
+  const homeIconsRaw = useMemo(() => {
+    const list = [];
+    for (const entry of navSections2) {
+      if (isSection(entry)) {
+        const sec = entry;
+        list.push({ kind: "folder", id: `folder:${sec.label}`, label: sec.label, section: sec });
+      } else {
+        const it = entry;
+        list.push({ kind: "app", id: `app:${it.to}`, label: it.label, route: it.to });
+      }
+    }
+    return list;
+  }, [navSections2]);
+  const [homeOrder, setHomeOrder] = useState(() => loadOrder(MOBILE_HOME_ORDER_KEY));
+  const homeIcons = useMemo(() => {
+    const indexFor = (id) => {
+      const i = homeOrder.indexOf(id);
+      return i === -1 ? Number.MAX_SAFE_INTEGER : i;
+    };
+    return homeIconsRaw.slice().sort((a, b) => {
+      const ia = indexFor(a.id);
+      const ib = indexFor(b.id);
+      if (ia !== ib) return ia - ib;
+      return homeIconsRaw.indexOf(a) - homeIconsRaw.indexOf(b);
+    });
+  }, [homeIconsRaw, homeOrder]);
+  useEffect(() => {
+    const visibleIds = homeIconsRaw.map((i) => i.id);
+    const next = [
+      ...homeOrder.filter((id) => visibleIds.includes(id)),
+      ...visibleIds.filter((id) => !homeOrder.includes(id))
+    ];
+    if (next.length !== homeOrder.length || next.some((id, i) => id !== homeOrder[i])) {
+      setHomeOrder(next);
+      saveOrder(MOBILE_HOME_ORDER_KEY, next);
+    }
+  }, [homeIconsRaw, homeOrder]);
+  const [dragId, setDragId] = useState(null);
+  const [dragPos, setDragPos] = useState(null);
+  const dragOffsetRef = useRef({ x: 0, y: 0 });
+  const longPressTimerRef = useRef(null);
+  const longPressFiredRef = useRef(false);
+  const cancelLongPress = () => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
+    }
+  };
+  const beginLongPress = (id, e) => {
+    if (dragId) return;
+    const x = e.clientX;
+    const y = e.clientY;
+    const target = e.currentTarget;
+    longPressFiredRef.current = false;
+    cancelLongPress();
+    longPressTimerRef.current = setTimeout(() => {
+      if (!target.isConnected) return;
+      const rect = target.getBoundingClientRect();
+      dragOffsetRef.current = { x: x - rect.left, y: y - rect.top };
+      longPressFiredRef.current = true;
+      setDragId(id);
+      setDragPos({ x, y });
+      try {
+        navigator.vibrate?.(15);
+      } catch {
+      }
+    }, LONG_PRESS_MS);
+  };
+  useEffect(() => {
+    if (!dragId) return;
+    const onMove = (e) => {
+      setDragPos({ x: e.clientX, y: e.clientY });
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      const targetEl = el?.closest("[data-home-icon-id]");
+      if (!targetEl) return;
+      const targetId = targetEl.dataset.homeIconId;
+      if (targetId === dragId) return;
+      setHomeOrder((prev) => {
+        const fromIdx = prev.indexOf(dragId);
+        const toIdx = prev.indexOf(targetId);
+        if (fromIdx === -1 || toIdx === -1) return prev;
+        const next = prev.slice();
+        next.splice(fromIdx, 1);
+        next.splice(toIdx, 0, dragId);
+        return next;
+      });
+    };
+    const onUp = () => {
+      setDragId(null);
+      setDragPos(null);
+      setHomeOrder((prev) => {
+        saveOrder(MOBILE_HOME_ORDER_KEY, prev);
+        return prev;
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, [dragId]);
+  const handleIconClick = (icon) => {
+    if (longPressFiredRef.current) {
+      longPressFiredRef.current = false;
+      return;
+    }
+    if (icon.kind === "app") onOpenApp(icon.route);
+    else setSelectedFolder(icon.section);
+  };
+  const [widgetOrder, _setWidgetOrder] = useState(() => loadOrder(MOBILE_WIDGET_ORDER_KEY));
+  const widgetWindows = useMemo(() => {
+    const widgets = openWindows.filter((w) => {
+      if (!w.route) return false;
+      const entry = WINDOW_REGISTRY[w.route];
+      return entry && isPageEntry(entry) && entry.widget;
+    });
+    const indexFor = (route) => {
+      const i = widgetOrder.indexOf(route);
+      return i === -1 ? Number.MAX_SAFE_INTEGER : i;
+    };
+    return widgets.slice().sort((a, b) => indexFor(a.route) - indexFor(b.route));
+  }, [openWindows, widgetOrder]);
+  useEffect(() => {
+    const visibleRoutes = widgetWindows.map((w) => w.route).filter(Boolean);
+    const next = [
+      ...widgetOrder.filter((r) => visibleRoutes.includes(r)),
+      ...visibleRoutes.filter((r) => !widgetOrder.includes(r))
+    ];
+    if (next.length !== widgetOrder.length || next.some((r, i) => r !== widgetOrder[i])) {
+      _setWidgetOrder(next);
+      saveOrder(MOBILE_WIDGET_ORDER_KEY, next);
+    }
+  }, [widgetWindows, widgetOrder]);
+  useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const w of openWindows) {
+      if (!w.route) continue;
+      map.set(w.route, (map.get(w.route) ?? 0) + 1);
+    }
+    return map;
+  }, [openWindows]);
+  const draggedIcon = dragId ? homeIcons.find((i) => i.id === dragId) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full overflow-y-auto px-4 pt-4 pb-4 select-none",
+        style: {
+          // Disable iOS long-press text-selection / "Copy" callout on icon labels.
+          WebkitUserSelect: "none",
+          WebkitTouchCallout: "none"
+        },
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          widgetWindows.length > 0 && /* @__PURE__ */ jsx("section", { className: "mb-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: widgetWindows.map((w) => {
+            const entry = WINDOW_REGISTRY[w.route];
+            if (!entry) return null;
+            const Component = entry.component;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "col-span-2 relative rounded-2xl bg-white/85 backdrop-blur border border-white/40 shadow-md overflow-hidden aspect-square",
+                children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(LoadingSpinner, {}) }), children: /* @__PURE__ */ jsx(Component, {}) })
+              },
+              w.id
+            );
+          }) }) }),
+          homeIcons.length > 0 && /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: homeIcons.map((icon) => {
+            const isFolder = icon.kind === "folder";
+            const isBeingDragged = dragId === icon.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                "data-home-icon-id": icon.id,
+                onPointerDown: (e) => beginLongPress(icon.id, e),
+                onPointerUp: cancelLongPress,
+                onPointerCancel: cancelLongPress,
+                onPointerLeave: cancelLongPress,
+                onClick: () => handleIconClick(icon),
+                style: { touchAction: "none", visibility: isBeingDragged ? "hidden" : "visible" },
+                className: `flex flex-col items-center gap-1 py-1 rounded-lg active:bg-white/20 ${dragId && !isBeingDragged ? "transition-transform" : ""}`,
+                children: [
+                  isFolder ? /* @__PURE__ */ jsx(FolderTile, { section: icon.section, navIcons: navIcons2 }) : /* @__PURE__ */ jsx(AppTile, { route: icon.route, icon: navIcons2[icon.route] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-sm truncate w-full text-center", children: icon.label })
+                ]
+              },
+              icon.id
+            );
+          }) }) })
+        ] })
+      }
+    ),
+    draggedIcon && dragPos && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed pointer-events-none z-[400] transition-none",
+        style: {
+          left: dragPos.x - dragOffsetRef.current.x,
+          top: dragPos.y - dragOffsetRef.current.y,
+          transform: "scale(1.12)"
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 py-1 w-20", children: [
+          draggedIcon.kind === "folder" ? /* @__PURE__ */ jsx(FolderTile, { section: draggedIcon.section, navIcons: navIcons2 }) : /* @__PURE__ */ jsx(AppTile, { route: draggedIcon.route, icon: navIcons2[draggedIcon.route] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-md truncate w-full text-center", children: draggedIcon.label })
+        ] })
+      }
+    ),
+    selectedFolder && /* @__PURE__ */ jsx(
+      FolderPopup,
+      {
+        folder: selectedFolder,
+        navIcons: navIcons2,
+        onClose: () => setSelectedFolder(null),
+        onOpenApp: (path) => {
+          setSelectedFolder(null);
+          onOpenApp(path);
+        }
+      }
+    )
+  ] });
+}
+function FolderPopup({
+  folder,
+  navIcons: navIcons2,
+  onClose,
+  onOpenApp
+}) {
+  const [closing, setClosing] = useState(false);
+  const beginClose = () => {
+    if (closing) return;
+    setClosing(true);
+    setTimeout(onClose, 200);
+  };
+  const closeThen = (after) => {
+    if (closing) return;
+    setClosing(true);
+    setTimeout(after, 200);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-[210] flex flex-col items-center justify-center px-6 bg-black/45 backdrop-blur-xl select-none",
+      style: {
+        paddingBottom: "calc(var(--mobile-bottom-nav, 70px) + 16px)",
+        animation: closing ? "folder-fade-out 200ms ease-in forwards" : "folder-fade-in 220ms ease-out",
+        WebkitUserSelect: "none",
+        WebkitTouchCallout: "none"
+      },
+      onClick: beginClose,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes folder-fade-in { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes folder-fade-out { from { opacity: 1; } to { opacity: 0; } }
+        @keyframes folder-pop-in { from { opacity: 0; transform: scale(0.86) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+        @keyframes folder-pop-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.9) translateY(4px); } }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[304px]", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-white drop-shadow-md mb-4 ml-4", children: folder.label }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "max-h-[70vh] flex flex-col rounded-3xl bg-white/15 backdrop-blur-xl border border-white/25 shadow-2xl overflow-hidden",
+              style: {
+                animation: closing ? "folder-pop-out 180ms ease-in forwards" : "folder-pop-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1)"
+              },
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-5", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4", children: folder.items.map((item) => {
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => closeThen(() => onOpenApp(item.to)),
+                    className: "flex flex-col items-center gap-1 py-1 rounded-lg active:bg-white/15",
+                    children: [
+                      /* @__PURE__ */ jsx(AppTile, { route: item.to, icon: navIcons2[item.to] }),
+                      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-sm truncate w-full text-center", children: item.label })
+                    ]
+                  },
+                  item.to
+                );
+              }) }) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function MobileSwitcher({ windows, onActivate, onClose, onCloseAll }) {
+  const [cardSize, setCardSize] = useState(() => computeCardSize());
+  useEffect(() => {
+    const onResize = () => setCardSize(computeCardSize());
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  if (windows.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-3 text-white/80 px-6 text-center", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "h-12 w-12 text-white/40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.4, children: [
+        /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
+        /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
+        /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.25" }),
+        /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.25" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No open apps." }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-white/50", children: "Tap Home to launch one." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-3 pt-4 pb-4", children: [
+      /* @__PURE__ */ jsxs("h1", { className: "text-white text-base font-semibold mb-3 px-1", children: [
+        "Open apps \xB7 ",
+        windows.length
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: windows.map((w) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-1", children: [
+        /* @__PURE__ */ jsx(
+          ThumbCard,
+          {
+            id: w.id,
+            label: w.label,
+            maxW: cardSize.w,
+            maxH: cardSize.h,
+            titleAbove: true,
+            onClick: () => onActivate(w.id),
+            onClose: () => onClose(w.id)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-white/80 truncate px-1", children: w.label })
+      ] }, w.id)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 px-3 py-3 flex justify-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onCloseAll,
+        className: "px-5 py-2.5 rounded-full bg-white/15 backdrop-blur-md border border-white/25 text-white text-sm font-medium active:bg-white/25 shadow-lg",
+        children: "Close All"
+      }
+    ) })
+  ] });
+}
+function computeCardSize() {
+  const w = typeof window !== "undefined" ? window.innerWidth : 360;
+  const h = typeof window !== "undefined" ? window.innerHeight : 640;
+  const cardW = Math.max(120, Math.floor((w - 36) / 2));
+  const cardH = Math.min(cardW * 1.4, Math.floor(h * 0.4));
+  return { w: cardW, h: cardH };
+}
+function timeAgo2(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 MobileNotificationSheet({ config, onClose }) {
+  const { list, markRead, markAllRead, onItemClick } = config;
+  const queryClient = useQueryClient();
+  const unreadCount = config.useUnreadCount();
+  const { data: notifData } = useQuery({
+    queryKey: ["notifications-dropdown"],
+    queryFn: () => list({ page_size: 30 }),
+    staleTime: 3e4
+  });
+  const notifications = notifData?.results ?? [];
+  const handleClick = useCallback((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"] });
+      });
+    }
+    onClose();
+    onItemClick(notif);
+  }, [queryClient, markRead, onItemClick, onClose]);
+  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"] });
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-[210] flex flex-col bg-white",
+      style: { paddingBottom: "var(--mobile-bottom-nav, 70px)" },
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between px-3 py-3 border-b border-gray-200 shrink-0", children: [
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-2 -ml-1 rounded-full active:bg-gray-200 text-gray-700", "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-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" }) }) }),
+          /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Notifications" }),
+          unreadCount > 0 ? /* @__PURE__ */ jsx("button", { onClick: handleMarkAllRead, className: "text-xs text-blue-600 font-medium px-2 py-1 active:bg-blue-50 rounded", children: "Mark all read" }) : /* @__PURE__ */ jsx("span", { className: "w-[88px]" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: notifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-gray-300 mb-3", 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-700 font-medium", children: "All caught up" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 mt-1", children: "No notifications yet" })
+        ] }) : notifications.map((notif) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handleClick(notif),
+            className: "w-full flex items-start gap-3 px-4 py-3 active:bg-gray-100 border-b border-gray-100 text-left",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "pt-1 shrink-0", children: !notif.is_read ? /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-blue-500" }) : /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: `text-sm leading-snug ${!notif.is_read ? "font-medium text-gray-900" : "text-gray-700"}`, children: notif.title }),
+                notif.message && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1 line-clamp-2", children: notif.message }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[11px] text-gray-400", children: timeAgo2(notif.created_at) }),
+                  notif.actor_name && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-gray-400", children: [
+                    "by ",
+                    notif.actor_name
+                  ] })
+                ] })
+              ] })
+            ]
+          },
+          notif.id
+        )) })
+      ]
+    }
+  );
+}
+function MobileProfileSheet({ profile, user, onClose, onNavigate, onLogout }) {
+  const initial = (profile?.first_name?.charAt(0) || user?.email?.charAt(0) || "?").toUpperCase();
+  const displayName = profile?.first_name ? `${profile.first_name} ${profile.last_name || ""}`.trim() : user?.email ?? "Account";
+  const groups = profile?.group_names ?? [];
+  const handleNav = (path) => {
+    onNavigate(path);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-[210] flex flex-col bg-white",
+      style: { paddingBottom: "var(--mobile-bottom-nav, 70px)" },
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between px-3 py-3 border-b border-gray-200 shrink-0", children: [
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-2 -ml-1 rounded-full active:bg-gray-200 text-gray-700", "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-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" }) }) }),
+          /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Profile" }),
+          /* @__PURE__ */ jsx("span", { className: "w-10" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center px-6 py-8 border-b border-gray-100", children: [
+            profile?.avatar_url ? /* @__PURE__ */ jsx("img", { src: profile.avatar_url, alt: "", className: "h-20 w-20 rounded-full object-cover border border-gray-200 shadow-sm" }) : /* @__PURE__ */ jsx("div", { className: "h-20 w-20 rounded-full bg-blue-100 flex items-center justify-center text-2xl font-bold text-blue-700 shadow-sm", children: initial }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 text-base font-semibold text-gray-900 truncate max-w-full", children: displayName }),
+            user?.email && profile?.first_name && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 truncate max-w-full", children: user.email }),
+            groups.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap justify-center gap-1.5", children: groups.map((g) => /* @__PURE__ */ jsx("span", { className: "text-[11px] px-2 py-0.5 rounded-full bg-gray-100 text-gray-700", children: g }, g)) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "py-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleNav("/customization"),
+                className: "w-full flex items-center gap-3 px-4 py-4 active:bg-gray-100 border-b border-gray-100 text-left",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "h-9 w-9 rounded-lg bg-gray-100 flex items-center justify-center text-gray-700 shrink-0", children: /* @__PURE__ */ jsxs("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: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" }),
+                    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-gray-800", children: "Customization" }),
+                  /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => {
+                  onLogout();
+                  onClose();
+                },
+                className: "w-full flex items-center gap-3 px-4 py-4 active:bg-red-50 text-left",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "h-9 w-9 rounded-lg bg-red-50 flex items-center justify-center text-red-600 shrink-0", 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.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" }) }) }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-red-600", children: "Sign out" })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function MobileShell({
+  navSections: navSections2,
+  navIcons: navIcons2,
+  sectionIcons: sectionIcons2,
+  wallpaperStyle,
+  notifications,
+  profile,
+  user,
+  onNavigate,
+  onLogout
+}) {
+  const { openWindows, openPage, closeEntity } = useWindowManager();
+  const mode = useSyncExternalStore(subscribeMobileMode, getMobileMode);
+  const [sheet, setSheet] = useState(null);
+  const unreadCount = notifications?.useUnreadCount() ?? 0;
+  const switcherWindows = useMemo(() => {
+    return openWindows.filter((w) => {
+      if (!w.route) return true;
+      const entry = WINDOW_REGISTRY[w.route];
+      if (!entry || !isPageEntry(entry)) return true;
+      return !entry.widget;
+    });
+  }, [openWindows]);
+  const prevOpenCountRef = useRef(openWindows.length);
+  useEffect(() => {
+    if (openWindows.length === 0 && mode === "app") {
+      setMobileMode("home");
+    }
+    prevOpenCountRef.current = openWindows.length;
+  }, [openWindows.length, mode]);
+  const activateWindowById = (windowId) => {
+    const panel = document.querySelector(`[data-modal-panel][data-window-key="${windowId}"]`);
+    const mid = panel?.getAttribute("data-modal-id");
+    if (mid) activateModal(mid);
+  };
+  const handleOpenApp = (path) => {
+    openPage(path);
+    setMobileMode("app");
+  };
+  const handleActivateWindow = (id) => {
+    activateWindowById(id);
+    setMobileMode("app");
+  };
+  const closeSheet = () => setSheet(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-0 pointer-events-none",
+        style: wallpaperStyle
+      }
+    ),
+    mode === "home" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[200]",
+        style: {
+          ...wallpaperStyle,
+          paddingBottom: "var(--mobile-bottom-nav, 70px)"
+        },
+        children: /* @__PURE__ */ jsx(
+          MobileHome,
+          {
+            navSections: navSections2,
+            navIcons: navIcons2,
+            sectionIcons: sectionIcons2,
+            openWindows,
+            onOpenApp: handleOpenApp,
+            onActivateWindow: handleActivateWindow
+          }
+        )
+      }
+    ),
+    mode === "switcher" && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[200] bg-gray-900/95 backdrop-blur-sm", style: { paddingBottom: "var(--mobile-bottom-nav, 70px)" }, children: /* @__PURE__ */ jsx(
+      MobileSwitcher,
+      {
+        windows: switcherWindows,
+        onActivate: handleActivateWindow,
+        onClose: (id) => closeEntity(id),
+        onCloseAll: () => switcherWindows.forEach((w) => closeEntity(w.id))
+      }
+    ) }),
+    sheet === "notifications" && notifications && /* @__PURE__ */ jsx(MobileNotificationSheet, { config: notifications, onClose: closeSheet }),
+    sheet === "profile" && /* @__PURE__ */ jsx(
+      MobileProfileSheet,
+      {
+        profile,
+        user,
+        onClose: closeSheet,
+        onNavigate: (path) => {
+          onNavigate?.(path);
+        },
+        onLogout: () => onLogout?.()
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileBottomNav,
+      {
+        mode,
+        unreadCount,
+        showNotifications: !!notifications,
+        profileAvatar: profile?.avatar_url,
+        profileInitial: (profile?.first_name?.charAt(0) || user?.email?.charAt(0) || "?").toUpperCase(),
+        onHome: () => {
+          closeSheet();
+          setMobileMode("home");
+        },
+        onSwitcher: () => {
+          closeSheet();
+          setMobileMode("switcher");
+        },
+        onNotifications: () => setSheet(sheet === "notifications" ? null : "notifications"),
+        onProfile: () => setSheet(sheet === "profile" ? null : "profile")
+      }
+    )
+  ] });
+}
+function MobileBottomNav({
+  mode,
+  unreadCount,
+  showNotifications,
+  profileAvatar,
+  profileInitial,
+  onHome,
+  onSwitcher,
+  onNotifications,
+  onProfile
+}) {
+  const btnClass = (active) => `flex-1 flex flex-col items-center justify-center gap-0.5 py-2 transition-colors select-none ${active ? "text-blue-600" : "text-gray-700 active:text-gray-900"}`;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: "fixed bottom-0 inset-x-0 z-[300] flex items-stretch border-t border-white/40",
+      style: {
+        height: "var(--mobile-bottom-nav, 70px)",
+        paddingBottom: "env(safe-area-inset-bottom)",
+        WebkitBackdropFilter: "blur(28px) saturate(1.8)",
+        backdropFilter: "blur(28px) saturate(1.8)",
+        background: "linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.55) 100%)",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.6), 0 -2px 12px rgba(0,0,0,0.08)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("button", { onClick: onHome, className: btnClass(mode === "home"), "aria-label": "Home", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Home" })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: onSwitcher, className: btnClass(mode === "switcher"), "aria-label": "App switcher", children: [
+          /* @__PURE__ */ jsxs("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: [
+            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
+            /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
+            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.25" }),
+            /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.25" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Apps" })
+        ] }),
+        showNotifications && /* @__PURE__ */ jsxs("button", { onClick: onNotifications, className: btnClass(false), "aria-label": "Notifications", children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+            /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, 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-1.5 -right-2 min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-[10px] font-bold leading-[18px] text-center", children: unreadCount > 99 ? "99+" : unreadCount })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Alerts" })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: onProfile, className: btnClass(false), "aria-label": "Profile", children: [
+          profileAvatar ? /* @__PURE__ */ jsx("img", { src: profileAvatar, alt: "", className: "h-8 w-8 rounded-full object-cover border border-gray-200" }) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-xs font-bold text-blue-700", children: profileInitial }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Profile" })
+        ] })
+      ]
+    }
+  );
+}
+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 };
+}
+function TaskbarPomodoro() {
+  const snap = useSyncExternalStore(subscribePomo, getPomoSnapshot, getPomoSnapshot);
+  const { openPage } = useWindowManager();
+  const inSession = snap.running || snap.remaining < snap.total && snap.remaining > 0;
+  if (!inSession) return null;
+  const mm = String(Math.floor(snap.remaining / 60)).padStart(2, "0");
+  const ss = String(snap.remaining % 60).padStart(2, "0");
+  const dot = snap.mode === "focus" ? "bg-blue-500" : snap.mode === "short" ? "bg-emerald-500" : "bg-emerald-600";
+  const label = snap.mode === "focus" ? "Focus" : snap.mode === "short" ? "Short break" : "Long break";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => openPage("/pomodoro"),
+      title: `${label} \xB7 ${mm}:${ss}${snap.running ? "" : " (paused)"}`,
+      className: `shrink-0 flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-mono font-semibold tabular-nums hover:bg-gray-200/50 transition-colors ${snap.running ? "text-gray-800" : "text-gray-400"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `block w-1.5 h-1.5 rounded-full ${dot} ${snap.running ? "animate-pulse" : "opacity-60"}` }),
+        mm,
+        ":",
+        ss
+      ]
+    }
+  );
+}
+function TaskbarClock() {
+  const [now, setNow] = useState(/* @__PURE__ */ new Date());
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const buttonRef = useRef(null);
+  const { openPage } = useWindowManager();
+  useEffect(() => {
+    const t = setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e4);
+    return () => clearInterval(t);
+  }, []);
+  useClickOutside(ref, useCallback(() => {
+    if (open) setOpen(false);
+  }, [open]));
+  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 && (() => {
+      const taskbarPos = getComputedStyle(document.documentElement).getPropertyValue("--taskbar-position")?.trim() || "bottom";
+      const rect = buttonRef.current?.getBoundingClientRect();
+      const right = rect ? Math.max(8, window.innerWidth - rect.right) : 8;
+      const posStyle = taskbarPos === "top" ? { right, top: (rect?.bottom ?? 0) + 4 } : { right, bottom: window.innerHeight - (rect?.top ?? 0) + 4 };
+      return /* @__PURE__ */ jsx("div", { className: "fixed z-[300] rounded-lg border border-gray-200 bg-white shadow-xl", style: posStyle, children: /* @__PURE__ */ jsx(CalendarPopup, { now, onOpenCalendar: () => {
+        openPage("/calendar");
+        setOpen(false);
+      } }) });
+    })()
+  ] });
+}
+function CalendarPopup({ now, onOpenCalendar }) {
+  const [month, setMonth] = useState(() => new Date(now.getFullYear(), now.getMonth(), 1));
+  const monthLabel = month.toLocaleDateString(void 0, { month: "long", year: "numeric" });
+  const fullDate = now.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric" });
+  const fullTime = now.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+  const firstDay = month.getDay();
+  const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+  const prevDays = new Date(month.getFullYear(), month.getMonth(), 0).getDate();
+  const cells = [];
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const day = prevDays - i;
+    cells.push({ day, thisMonth: false, date: new Date(month.getFullYear(), month.getMonth() - 1, day) });
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    cells.push({ day, thisMonth: true, date: new Date(month.getFullYear(), month.getMonth(), day) });
+  }
+  let nextDay = 1;
+  while (cells.length < 42) {
+    cells.push({ day: nextDay, thisMonth: false, date: new Date(month.getFullYear(), month.getMonth() + 1, nextDay) });
+    nextDay++;
+  }
+  const today = /* @__PURE__ */ new Date();
+  const isToday = (d) => d.getFullYear() === today.getFullYear() && d.getMonth() === today.getMonth() && d.getDate() === today.getDate();
+  const goPrev = () => setMonth((m) => new Date(m.getFullYear(), m.getMonth() - 1, 1));
+  const goNext = () => setMonth((m) => new Date(m.getFullYear(), m.getMonth() + 1, 1));
+  const goToday = () => setMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+  return /* @__PURE__ */ jsxs("div", { className: "w-[260px] p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-1 pb-2.5 border-b border-gray-100", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold text-gray-500 uppercase tracking-wide", children: fullDate }),
+      /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-gray-800 tabular-nums leading-tight mt-0.5", children: fullTime })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2.5 mb-2", children: [
+      /* @__PURE__ */ jsx("button", { onClick: goPrev, className: "p-1 rounded hover:bg-gray-100 text-gray-600", "aria-label": "Previous month", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) }) }),
+      /* @__PURE__ */ jsx("button", { onClick: goToday, className: "text-sm font-semibold text-gray-700 hover:text-blue-600 transition-colors", children: monthLabel }),
+      /* @__PURE__ */ jsx("button", { onClick: goNext, className: "p-1 rounded hover:bg-gray-100 text-gray-600", "aria-label": "Next month", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-1 text-[10px] font-semibold text-gray-400 text-center uppercase tracking-wide", children: ["S", "M", "T", "W", "T", "F", "S"].map((d, i) => /* @__PURE__ */ jsx("div", { className: "py-1", children: d }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-px text-center", children: cells.map((cell, i) => {
+      const todayCell = cell.thisMonth && isToday(cell.date);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `text-[12px] py-1.5 rounded-md transition-colors ${todayCell ? "bg-blue-500 text-white font-semibold" : cell.thisMonth ? "text-gray-700 hover:bg-gray-100" : "text-gray-300"}`,
+          children: cell.day
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t border-gray-100", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onOpenCalendar,
+        className: "w-full text-[11px] font-medium text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded py-1 transition-colors flex items-center justify-center gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" }) }),
+          "Open Calendar"
+        ]
+      }
+    ) })
+  ] });
+}
+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" }),
+            "Suggestion or 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 isMobile = useIsMobile();
+  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]);
+  useEffect(() => {
+    document.documentElement.style.setProperty("--mobile-bottom-nav", isMobile ? "100px" : "0px");
+  }, [isMobile]);
+  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
+      }
+    ),
+    (() => {
+      const wallpaperStyle = {
+        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"
+      };
+      if (isMobile) {
+        return /* @__PURE__ */ jsx(
+          MobileShell,
+          {
+            productName,
+            productIcon,
+            navSections: navSections2,
+            navIcons: navIcons2,
+            sectionIcons: sectionIcons2,
+            wallpaperStyle,
+            notifications,
+            profile,
+            user,
+            onNavigate: (path) => openPage(path),
+            onLogout: () => setShowLogout(true)
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__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: wallpaperStyle,
+            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" })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(TaskbarPomodoro, {}),
+                  notifications && /* @__PURE__ */ jsx(NotificationBell, { ...notifications, popDirection: taskbarPosition === "right" ? "left" : "right" })
+                ] }) })
+              ) : (
+                /* Horizontal: icons then clock */
+                /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(TaskbarPomodoro, {}),
+                  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]" },
@@ -725,6 +4803,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { BugReportDetail, Customization, ShellEntityFetcherProvider, StatusBadge, StatusBadgeProvider, createWindowRegistry, useEditHotkey, useNewHotkey, useShellEntityFetcher };
+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, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, setShellAuthBridge, useBugReport, useClickOutside, useDesktopHost, useEditHotkey, useNewHotkey, useShellAuth, useShellEntityFetcher };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map