react-os-shell 0.1.63 → 0.2.2

package/dist/index.js

@@ -4,14 +4,14 @@ export { formatDate } from './chunk-NSU7OHPC.js';
 import { useGoogleAuth } from './chunk-46LICZUM.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
-import { 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-7S2XQTV7.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-IQV6QQBQ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive } from './chunk-GBQOM343.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-GBQOM343.js';
+import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, useIsMobile, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive, subscribeMobileMode, getMobileMode, WINDOW_REGISTRY, isPageEntry, setMobileMode, LoadingSpinner, ThumbCard, activateModal } from './chunk-7P6DO3NC.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-7P6DO3NC.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-PLGHQ7QW.js';
-import { createContext, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, isValidElement, cloneElement, useSyncExternalStore } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, isValidElement, cloneElement, useSyncExternalStore, useMemo, Suspense } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
 import { createPortal } from 'react-dom';
@@ -274,6 +274,39 @@ function NotificationBell({
   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) {
@@ -291,18 +324,18 @@ function NotificationBell({
             const n = new Notification(title, { body, icon: "/favicon.svg", tag: `notif-${latest.id}` });
             n.onclick = () => {
               window.focus();
-              onItemClick(latest);
+              handleClick(latest);
               n.close();
             };
           }
         } else {
-          toast_default.info(title, { duration: 5e3 });
+          showInlineNotif(latest);
         }
       }).catch(() => {
       });
     }
     prevCountRef.current = unreadCount;
-  }, [unreadCount, list, onItemClick]);
+  }, [unreadCount, list, showInlineNotif]);
   const { data: notifData } = useQuery({
     queryKey: ["notifications-dropdown"],
     queryFn: () => list({ page_size: 30 }),
@@ -310,21 +343,6 @@ function NotificationBell({
     refetchInterval: 3e4
   });
   const notifications = notifData?.results ?? [];
-  const handleClick = (notif) => {
-    if (!notif.is_read) {
-      queryClient.setQueryData(["notification-unread-count"], (old) => old ? { ...old, count: Math.max(0, (old.count || 0) - 1) } : old);
-      queryClient.setQueryData(["notifications-dropdown"], (old) => {
-        if (!old?.results) return old;
-        return { ...old, results: old.results.map((n) => n.id === notif.id ? { ...n, is_read: true } : n) };
-      });
-      markRead(notif.id).catch(() => {
-        queryClient.invalidateQueries({ queryKey: ["notification-unread-count"] });
-        queryClient.invalidateQueries({ queryKey: ["notifications-dropdown"] });
-      });
-    }
-    setOpen(false);
-    onItemClick(notif);
-  };
   const handleMarkAllRead = () => {
     queryClient.setQueryData(["notification-unread-count"], (old) => old ? { ...old, count: 0 } : old);
     queryClient.setQueryData(["notifications-dropdown"], (old) => {
@@ -407,6 +425,43 @@ function NotificationBell({
         ] })
       ] }),
       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
     )
   ] });
 }
@@ -651,7 +706,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.1.63" ;
+var VERSION = "0.2.1" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -2395,6 +2450,7 @@ function StartMenu({
     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("");
@@ -2429,6 +2485,68 @@ function StartMenu({
     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));
@@ -2673,6 +2791,758 @@ function StartMenu({
       ` })
   ] });
 }
+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, badge }) {
+  return /* @__PURE__ */ jsxs("span", { className: `relative aspect-square w-full max-w-[80px] mx-auto 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"),
+    badge && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-blue-400 border-2 border-white" })
+  ] });
+}
+function FolderTile({ section, navIcons: navIcons2, badge }) {
+  const previewItems = section.items.slice(0, 4);
+  return /* @__PURE__ */ jsxs("span", { className: "relative aspect-square w-full max-w-[80px] mx-auto 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}`)),
+    badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-blue-500 text-white text-[10px] font-bold leading-[18px] text-center border-2 border-white", children: badge })
+  ] });
+}
+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]);
+  const openCountByRoute = 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 openInFolder = (folder) => {
+    const routes = new Set(folder.items.map((i) => i.to));
+    return openWindows.filter((w) => w.route && routes.has(w.route));
+  };
+  const draggedIcon = dragId ? homeIcons.find((i) => i.id === dragId) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "h-full overflow-y-auto px-3 pt-4 pb-4 select-none",
+        style: {
+          // Disable iOS long-press text-selection / "Copy" callout on icon labels.
+          WebkitUserSelect: "none",
+          WebkitTouchCallout: "none"
+        },
+        children: [
+          widgetWindows.length > 0 && /* @__PURE__ */ jsx("section", { className: "mb-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6", children: widgetWindows.map((w) => {
+            const entry = WINDOW_REGISTRY[w.route];
+            if (!entry) return null;
+            const Component = entry.component;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "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-3", children: homeIcons.map((icon) => {
+            const isFolder = icon.kind === "folder";
+            const folderOpen = isFolder ? openInFolder(icon.section).length : 0;
+            const appOpen = !isFolder ? openCountByRoute.get(icon.route) ?? 0 : 0;
+            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, badge: folderOpen }) : /* @__PURE__ */ jsx(AppTile, { route: icon.route, icon: navIcons2[icon.route], badge: appOpen > 0 }),
+                  /* @__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,
+        openInFolder: openInFolder(selectedFolder),
+        openCountByRoute,
+        onClose: () => setSelectedFolder(null),
+        onOpenApp: (path) => {
+          setSelectedFolder(null);
+          onOpenApp(path);
+        },
+        onActivateWindow: (id) => {
+          setSelectedFolder(null);
+          onActivateWindow(id);
+        }
+      }
+    )
+  ] });
+}
+function FolderPopup({
+  folder,
+  navIcons: navIcons2,
+  openInFolder,
+  openCountByRoute,
+  onClose,
+  onOpenApp,
+  onActivateWindow
+}) {
+  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: "folder-fade-in 220ms ease-out",
+        WebkitUserSelect: "none",
+        WebkitTouchCallout: "none"
+      },
+      onClick: onClose,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes folder-fade-in { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes folder-pop-in { from { opacity: 0; transform: scale(0.86) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+      ` }),
+        /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-white drop-shadow-md mb-4 self-start", children: folder.label }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-full max-w-md max-h-[70vh] flex flex-col rounded-3xl bg-white/15 backdrop-blur-xl border border-white/25 shadow-2xl overflow-hidden",
+            style: { animation: "folder-pop-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1)" },
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-5", children: [
+              openInFolder.length > 0 && /* @__PURE__ */ jsxs("section", { className: "mb-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wide text-white/70 mb-2", children: "Open" }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: openInFolder.map((w) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => onActivateWindow(w.id),
+                    className: "flex items-center gap-2 p-2 rounded-lg bg-white/15 active:bg-white/25 text-left",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: `h-7 w-7 rounded bg-gradient-to-br ${hashGradient(w.route ?? "")} flex items-center justify-center text-white shrink-0`, children: sizeIcon(w.route ? navIcons2[w.route] : null, FALLBACK_APP_ICON, "h-4 w-4") }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white truncate flex-1", children: w.label })
+                    ]
+                  },
+                  w.id
+                )) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3", children: folder.items.map((item) => {
+                const openCount = openCountByRoute.get(item.to) ?? 0;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => onOpenApp(item.to),
+                    className: "flex flex-col items-center gap-1.5 p-1 rounded-lg active:bg-white/15",
+                    children: [
+                      /* @__PURE__ */ jsx(AppTile, { route: item.to, icon: navIcons2[item.to], badge: openCount > 0 }),
+                      /* @__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 }) {
+  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 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)) })
+  ] });
+}
+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 < prevOpenCountRef.current && 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: [
+    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)
+      }
+    ) }),
+    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,
+        openCount: switcherWindows.length,
+        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,
+  openCount,
+  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-6 w-6", 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-[10px] font-medium", children: "Home" })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: onSwitcher, className: btnClass(mode === "switcher"), "aria-label": "App switcher", children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+            /* @__PURE__ */ jsxs("svg", { className: "h-6 w-6", 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" })
+            ] }),
+            openCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-blue-500 text-white text-[10px] font-bold leading-4 text-center", children: openCount })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] 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-6 w-6", 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 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-bold leading-4 text-center", children: unreadCount > 99 ? "99+" : unreadCount })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] 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-6 w-6 rounded-full object-cover border border-gray-200" }) : /* @__PURE__ */ jsx("div", { className: "h-6 w-6 rounded-full bg-blue-100 flex items-center justify-center text-[10px] font-bold text-blue-700", children: profileInitial }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium", children: "Profile" })
+        ] })
+      ]
+    }
+  );
+}
 function useFavorites(wallpapers) {
   const { prefs, save } = useShellPrefs();
   const favorites = prefs.favorite_pages || [];
@@ -2962,6 +3832,7 @@ function Layout({
   const { openPage, openEntity, openWindows } = useWindowManager();
   const [menuOpen, setMenuOpen] = useState(false);
   useEmailUnreadCount();
+  const isMobile = useIsMobile();
   const profile = user || {};
   useTheme();
   const { desktopBg} = useFavorites(wallpapers);
@@ -3006,6 +3877,9 @@ function Layout({
     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 ? "70px" : "0px");
+  }, [isMobile]);
   const [balloonDismissed, setBalloonDismissed] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
   const [taskbarMenu, setTaskbarMenu] = useState(null);
@@ -3136,146 +4010,169 @@ function Layout({
         categories
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-1 min-h-0", children: /* @__PURE__ */ jsx(
-      "main",
-      {
-        className: "flex-1 flex flex-col overflow-hidden cursor-default",
-        onDoubleClick: () => {
-          if (desktopDblClick === "deactivate") {
-            setMenuOpen(false);
-            window.dispatchEvent(new CustomEvent("deactivate-all-modals"));
+    (() => {
+      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)
           }
-        },
-        style: {
-          backgroundColor: desktopBg?.startsWith("#") ? desktopBg : desktopBg === "none" ? (() => {
-            const customBg = getComputedStyle(document.documentElement).getPropertyValue("--custom-bg-color")?.trim();
-            if (customBg) return customBg;
-            const t = document.documentElement.getAttribute("data-theme") || "light";
-            const map = { light: "#f3f4f6", dark: "#1e1e2e", pink: "#fdf2f8", green: "#f0fdf4", grey: "#d1d5db", blue: "#eff6ff" };
-            return map[t] || "#f3f4f6";
-          })() : "#1a1a2e",
-          backgroundImage: desktopBg && desktopBg !== "none" && !desktopBg.startsWith("#") ? `url(${desktopBg})` : "none",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          backgroundRepeat: "no-repeat"
-        },
-        children: /* @__PURE__ */ jsx(Desktop, { profile })
+        );
       }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex backdrop-blur-sm border-gray-200 z-[250] fixed ${isVerticalTaskbar ? `flex-col items-center ${taskbarWClass} py-3 gap-2 top-0 bottom-0 ${taskbarPosition === "left" ? "left-0 border-r" : "right-0 border-l"}` : `items-center ${taskbarHClass} px-3 gap-2 left-0 right-0 ${taskbarPosition === "top" ? "top-0 border-b" : "bottom-0 border-t"}`}`,
-        style: { backgroundColor: `rgb(var(--taskbar-bg-rgb, 243 244 246) / ${taskbarOpacity})` },
-        onContextMenu: (e) => {
-          e.preventDefault();
-          setTaskbarMenu({ x: e.clientX, y: e.clientY });
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
-            openWindows.length === 0 && !menuOpen && !balloonDismissed && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: `absolute left-1/2 -translate-x-1/2 whitespace-nowrap text-white text-[10px] font-medium pl-3 pr-2 py-1 rounded-full shadow-lg animate-bounce flex items-center gap-1 ${taskbarPosition === "top" ? "top-full mt-2" : "-top-8"}`,
-                style: { backgroundColor: "var(--accent-600, #7c3aed)" },
-                children: [
-                  "Click here to start",
-                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
-                    e.stopPropagation();
-                    setBalloonDismissed(true);
-                  }, className: "text-white/60 hover:text-white ml-1.5", children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }),
+      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(
-                    "div",
+                    "button",
                     {
-                      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)" }
+                      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__ */ 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: [
+                  ),
+                  notifications && /* @__PURE__ */ jsx(NotificationBell, { ...notifications, popDirection: taskbarPosition === "right" ? "left" : "right" })
+                ] }) })
+              ) : (
+                /* Horizontal: icons then clock */
+                /* @__PURE__ */ jsxs(Fragment, { children: [
+                  notifications && /* @__PURE__ */ jsx(NotificationBell, { ...notifications }),
                   /* @__PURE__ */ jsx(
-                    "span",
+                    "button",
                     {
-                      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%)" }
+                      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" })
+                      ] })
                     }
                   ),
-                  productIcon && /* @__PURE__ */ jsx("img", { src: productIcon, alt: "", className: "relative z-10 h-3.5 w-3.5 shrink-0 opacity-60" }),
-                  /* @__PURE__ */ jsx("span", { className: "relative z-10 truncate", children: productName })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: isVerticalTaskbar ? "h-px w-6 bg-gray-300 my-1" : "w-px h-6 bg-gray-300 mx-1" }),
-          /* @__PURE__ */ jsx("div", { id: "taskbar-windows", className: `flex-1 flex ${isVerticalTaskbar ? "flex-col items-center gap-1 min-h-0 overflow-y-auto w-full" : "items-center gap-1.5 min-w-0 overflow-x-auto"}` }),
-          /* @__PURE__ */ jsx("div", { className: isVerticalTaskbar ? "h-px w-6 bg-gray-300 my-1" : "w-px h-6 bg-gray-300 mx-1" }),
-          isVerticalTaskbar ? (
-            /* Vertical: clock + bell + google evenly spaced in a row */
-            /* @__PURE__ */ jsx("div", { className: "w-full px-2", children: /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-center gap-2 ${taskbarPosition === "right" ? "flex-row-reverse" : ""}`, children: [
-              /* @__PURE__ */ jsx(TaskbarClock, {}),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setGoogleConnectOpen(true),
-                  title: googleConnected ? "Google Connected" : "Connect Google",
-                  className: `shrink-0 rounded-md p-1.5 transition-colors ${googleConnected ? "hover:bg-green-50" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200"}`,
-                  children: /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", children: [
-                    /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
-                    /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
-                    /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
-                    /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: googleConnected ? "#16a34a" : "#9ca3af" })
-                  ] })
-                }
-              ),
-              notifications && /* @__PURE__ */ jsx(NotificationBell, { ...notifications, popDirection: taskbarPosition === "right" ? "left" : "right" })
-            ] }) })
-          ) : (
-            /* Horizontal: icons then clock */
-            /* @__PURE__ */ jsxs(Fragment, { children: [
-              notifications && /* @__PURE__ */ jsx(NotificationBell, { ...notifications }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setGoogleConnectOpen(true),
-                  title: googleConnected ? "Google Connected" : "Connect Google",
-                  className: `shrink-0 rounded-md p-2 transition-colors ${googleConnected ? "hover:bg-green-50" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200"}`,
-                  children: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", children: [
-                    /* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
-                    /* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
-                    /* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: googleConnected ? "#16a34a" : "#9ca3af" }),
-                    /* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: googleConnected ? "#16a34a" : "#9ca3af" })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsx(TaskbarClock, {})
-            ] })
-          )
-        ]
-      }
-    ),
+                  /* @__PURE__ */ jsx(TaskbarClock, {})
+                ] })
+              )
+            ]
+          }
+        )
+      ] });
+    })(),
     taskbarMenu && /* @__PURE__ */ jsx(
       TaskbarContextMenu,
       {