react-os-shell 0.2.1 → 0.2.2

package/dist/index.js

@@ -8,7 +8,7 @@ import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PAC
 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, useIsMobile, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive, subscribeMobileMode, getMobileMode, setMobileMode, WINDOW_REGISTRY, isPageEntry, LoadingSpinner, ThumbCard, activateModal } from './chunk-7P6DO3NC.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, useMemo, Suspense } from 'react';
@@ -2794,6 +2794,28 @@ 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);
@@ -2811,7 +2833,6 @@ function saveOrder(key, order) {
   } catch {
   }
 }
-var FALLBACK_FOLDER_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 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" }) });
 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;
@@ -2822,6 +2843,27 @@ function sizeIcon(node, fallback, sizeClass = "h-10 w-10") {
   }
   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,
@@ -2943,7 +2985,7 @@ function MobileHome({
     if (icon.kind === "app") onOpenApp(icon.route);
     else setSelectedFolder(icon.section);
   };
-  const [widgetOrder, setWidgetOrder] = useState(() => loadOrder(MOBILE_WIDGET_ORDER_KEY));
+  const [widgetOrder, _setWidgetOrder] = useState(() => loadOrder(MOBILE_WIDGET_ORDER_KEY));
   const widgetWindows = useMemo(() => {
     const widgets = openWindows.filter((w) => {
       if (!w.route) return false;
@@ -2963,22 +3005,10 @@ function MobileHome({
       ...visibleRoutes.filter((r) => !widgetOrder.includes(r))
     ];
     if (next.length !== widgetOrder.length || next.some((r, i) => r !== widgetOrder[i])) {
-      setWidgetOrder(next);
+      _setWidgetOrder(next);
       saveOrder(MOBILE_WIDGET_ORDER_KEY, next);
     }
   }, [widgetWindows, widgetOrder]);
-  const moveWidget = (route, dir) => {
-    setWidgetOrder((prev) => {
-      const i = prev.indexOf(route);
-      if (i === -1) return prev;
-      const j = i + dir;
-      if (j < 0 || j >= prev.length) return prev;
-      const next = prev.slice();
-      [next[i], next[j]] = [next[j], next[i]];
-      saveOrder(MOBILE_WIDGET_ORDER_KEY, next);
-      return next;
-    });
-  };
   const openCountByRoute = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const w of openWindows) {
@@ -2993,79 +3023,56 @@ function MobileHome({
   };
   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", children: [
-      widgetWindows.length > 0 && /* @__PURE__ */ jsx("section", { className: "mb-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: widgetWindows.map((w, i) => {
-        const entry = WINDOW_REGISTRY[w.route];
-        if (!entry) return null;
-        const Component = entry.component;
-        const isFirst = i === 0;
-        const isLast = i === widgetWindows.length - 1;
-        return /* @__PURE__ */ jsxs(
-          "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, {}) }),
-              widgetWindows.length > 1 && /* @__PURE__ */ jsxs("div", { className: "absolute top-1.5 right-1.5 flex flex-col gap-0.5 z-10", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => moveWidget(w.route, -1),
-                    disabled: isFirst,
-                    className: "h-6 w-6 rounded-md bg-white/90 backdrop-blur border border-gray-200 shadow-sm flex items-center justify-center text-gray-700 disabled:opacity-30 active:bg-gray-100",
-                    "aria-label": "Move up",
-                    children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => moveWidget(w.route, 1),
-                    disabled: isLast,
-                    className: "h-6 w-6 rounded-md bg-white/90 backdrop-blur border border-gray-200 shadow-sm flex items-center justify-center text-gray-700 disabled:opacity-30 active:bg-gray-100",
-                    "aria-label": "Move down",
-                    children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) })
-                  }
-                )
-              ] })
-            ]
-          },
-          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 openCount = isFolder ? openInFolder(icon.section).length : openCountByRoute.get(icon.route) ?? 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/40 ${dragId && !isBeingDragged ? "transition-transform" : ""}`,
-            children: [
-              /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: `relative h-[72px] w-[72px] rounded-2xl flex items-center justify-center shadow-sm border ${isFolder ? "bg-white/70 backdrop-blur border-white/40 text-blue-700" : "bg-white/85 backdrop-blur border-white/40 text-gray-800"}`,
-                  children: [
-                    isFolder ? sizeIcon(sectionIcons2[icon.label], FALLBACK_FOLDER_ICON) : sizeIcon(navIcons2[icon.route], FALLBACK_APP_ICON),
-                    openCount > 0 && (isFolder ? /* @__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: openCount }) : /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-blue-500 border-2 border-white" }))
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-sm truncate w-full text-center", children: icon.label })
-            ]
-          },
-          icon.id
-        );
-      }) }) })
-    ] }),
+    /* @__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",
       {
@@ -3075,15 +3082,9 @@ function MobileHome({
           top: dragPos.y - dragOffsetRef.current.y,
           transform: "scale(1.12)"
         },
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 py-1", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `relative h-[72px] w-[72px] rounded-2xl flex items-center justify-center shadow-2xl border ${draggedIcon.kind === "folder" ? "bg-white backdrop-blur border-white/40 text-blue-700" : "bg-white backdrop-blur border-white/40 text-gray-800"}`,
-              children: draggedIcon.kind === "folder" ? sizeIcon(sectionIcons2[draggedIcon.label], FALLBACK_FOLDER_ICON) : sizeIcon(navIcons2[draggedIcon.route], FALLBACK_APP_ICON)
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-md truncate max-w-[80px] text-center", children: draggedIcon.label })
+        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 })
         ] })
       }
     ),
@@ -3119,15 +3120,25 @@ function FolderPopup({
   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",
-      style: { paddingBottom: "calc(var(--mobile-bottom-nav, 56px) + 16px)" },
+      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: [
@@ -3138,7 +3149,7 @@ function FolderPopup({
                     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-white/20 flex items-center justify-center text-white shrink-0", children: sizeIcon(w.route ? navIcons2[w.route] : null, FALLBACK_APP_ICON, "h-5 w-5") }),
+                      /* @__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 })
                     ]
                   },
@@ -3153,10 +3164,7 @@ function FolderPopup({
                     onClick: () => onOpenApp(item.to),
                     className: "flex flex-col items-center gap-1.5 p-1 rounded-lg active:bg-white/15",
                     children: [
-                      /* @__PURE__ */ jsxs("span", { className: "relative h-16 w-16 rounded-2xl bg-white/85 backdrop-blur border border-white/40 flex items-center justify-center text-gray-800 shadow-sm", children: [
-                        sizeIcon(navIcons2[item.to], FALLBACK_APP_ICON),
-                        openCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-blue-500 border-2 border-white" })
-                      ] }),
+                      /* @__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 })
                     ]
                   },
@@ -3383,6 +3391,14 @@ function MobileShell({
   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") {
@@ -3429,7 +3445,7 @@ function MobileShell({
     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: openWindows,
+        windows: switcherWindows,
         onActivate: handleActivateWindow,
         onClose: (id) => closeEntity(id)
       }
@@ -3451,7 +3467,7 @@ function MobileShell({
       MobileBottomNav,
       {
         mode,
-        openCount: openWindows.length,
+        openCount: switcherWindows.length,
         unreadCount,
         showNotifications: !!notifications,
         profileAvatar: profile?.avatar_url,
@@ -3482,12 +3498,19 @@ function MobileBottomNav({
   onNotifications,
   onProfile
 }) {
-  const btnClass = (active) => `flex-1 flex flex-col items-center justify-center gap-0.5 py-2 transition-colors ${active ? "text-blue-600" : "text-gray-500 active:text-gray-700"}`;
+  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 bg-white/95 backdrop-blur border-t border-gray-200",
-      style: { height: "var(--mobile-bottom-nav, 70px)", paddingBottom: "env(safe-area-inset-bottom)" },
+      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" }) }),