react-os-shell 3.26.0 → 4.0.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { subscribePomo, getPomoSnapshot } from './chunk-MU7UZXAS.js';
-export { setShellTodoProvider } from './chunk-MU7UZXAS.js';
+import { subscribePomo, getPomoSnapshot } from './chunk-PG2PMKTJ.js';
+export { setShellTodoProvider } from './chunk-PG2PMKTJ.js';
 export { ImageAnnotator_default as ImageAnnotator } from './chunk-QU5L5ZYM.js';
 import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-DINNWYVB.js';
 export { Breadcrumbs } from './chunk-DINNWYVB.js';
@@ -7,7 +7,7 @@ import { SidebarLayout } from './chunk-YG45DAUT.js';
 export { SidebarLayout } from './chunk-YG45DAUT.js';
 import { toast_default } from './chunk-VENYVK3L.js';
 export { toast_default as toast } from './chunk-VENYVK3L.js';
-import { publishDesktopFolders, requestFilesTrashView, FolderGlyph, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-LRVPNWRE.js';
+import { publishDesktopFolders, requestFilesTrashView, FolderGlyph, requestFilesDesktopFolderView, FileIconTile } from './chunk-QXWBHX7J.js';
 import { setPdfPreview } from './chunk-BV6SQ46N.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds, playLogout } from './chunk-D7PYW2QS.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
@@ -15,13 +15,13 @@ export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ
 import { EditableGrid } from './chunk-GP4Y3VCB.js';
 export { EditableGrid } from './chunk-GP4Y3VCB.js';
 import './chunk-4SQU5YV6.js';
-import { APP_VERSION, VERSION } from './chunk-4BOGLRCL.js';
-export { VERSION } from './chunk-4BOGLRCL.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, useShellPrefs, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, isShellApiClientConfigured, CancelButton, setWindowPosition, ThumbCard, activateModal } from './chunk-E6ZOCXEA.js';
-export { CancelButton, ConfirmProvider, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, confirm, confirmDestructive, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, prompt, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-E6ZOCXEA.js';
+import { APP_VERSION, VERSION } from './chunk-YIDTMPOP.js';
+export { VERSION } from './chunk-YIDTMPOP.js';
+import { registerModalEscapeInterceptor, useIsMobile, useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, useShellPrefs, SIDEBAR_STRIP_W, forgetMaximizedWindowBoxes, ModalActions, useModalActive, client_default, LoadingSpinner, isShellApiClientConfigured, CancelButton, setWindowPosition } from './chunk-YJJDW4GG.js';
+export { CancelButton, ConfirmProvider, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, confirm, confirmDestructive, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, prompt, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-YJJDW4GG.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-GW3RA6IS.js';
 export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-GW3RA6IS.js';
-import { createContext, lazy, forwardRef, useCallback, useState, useRef, useEffect, useMemo, useLayoutEffect, useContext, isValidElement, cloneElement, Suspense, Fragment as Fragment$1, useId, Children, useSyncExternalStore } from 'react';
+import { createContext, lazy, forwardRef, useCallback, useState, useRef, useId, useEffect, useLayoutEffect, useMemo, useContext, isValidElement, cloneElement, Suspense, Fragment as Fragment$1, Children, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import { createPortal } from 'react-dom';
@@ -3336,744 +3336,45 @@ function StartMenu({
     ] })
   );
 }
-
-// src/shell/mobileShellStore.ts
-var _mode = "home";
-var listeners = /* @__PURE__ */ new Set();
-function getMobileMode() {
-  return _mode;
-}
-function setMobileMode(mode) {
-  if (_mode === mode) return;
-  _mode = mode;
-  listeners.forEach((fn) => fn());
-}
-function subscribeMobileMode(cb) {
-  listeners.add(cb);
-  return () => {
-    listeners.delete(cb);
-  };
-}
-var MOBILE_WIDGET_ORDER_KEY = "erp_mobile_widget_order";
-var MOBILE_HOME_ORDER_KEY = "erp_mobile_home_order";
-var LONG_PRESS_MS = 400;
-function loadOrder(key) {
-  try {
-    const raw = localStorage.getItem(key);
-    if (raw) {
-      const parsed = JSON.parse(raw);
-      if (Array.isArray(parsed)) return parsed.filter((s) => typeof s === "string");
-    }
-  } catch {
-  }
-  return [];
-}
-function saveOrder(key, order) {
-  try {
-    localStorage.setItem(key, JSON.stringify(order));
-  } catch {
-  }
-}
-var FALLBACK_APP_ICON = /* @__PURE__ */ jsx("svg", { className: "h-10 w-10", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75A2.25 2.25 0 016 4.5h12a2.25 2.25 0 012.25 2.25v10.5A2.25 2.25 0 0118 19.5H6a2.25 2.25 0 01-2.25-2.25V6.75z" }) });
-function sizeIcon(node, fallback, sizeClass = "h-10 w-10") {
-  if (!node) return fallback;
-  if (isValidElement(node)) {
-    return cloneElement(node, {
-      className: `${sizeClass} ${node.props?.className ?? ""}`.trim()
-    });
-  }
-  return node;
-}
-function AppTile({ route, icon }) {
-  return /* @__PURE__ */ jsx("span", { className: `relative aspect-square w-full rounded-2xl bg-gradient-to-br ${hashGradient(route)} flex items-center justify-center text-white shadow-sm border border-white/30`, children: sizeIcon(icon, FALLBACK_APP_ICON, "h-11 w-11") });
-}
-function FolderTile({ section, navIcons: navIcons2 }) {
-  const previewItems = section.items.slice(0, 4);
-  return /* @__PURE__ */ jsxs("span", { className: "relative aspect-square w-full rounded-2xl bg-white/30 backdrop-blur-sm border border-white/40 p-1.5 grid grid-cols-2 gap-1 shadow-sm", children: [
-    previewItems.map((item) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `rounded-md bg-gradient-to-br ${hashGradient(item.to)} flex items-center justify-center text-white`,
-        children: sizeIcon(navIcons2[item.to], FALLBACK_APP_ICON, "h-3.5 w-3.5")
-      },
-      item.to
-    )),
-    Array.from({ length: Math.max(0, 4 - previewItems.length) }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "rounded-md bg-white/20" }, `empty-${i}`))
-  ] });
-}
-function MobileHome({
-  navSections: navSections2,
-  navIcons: navIcons2,
-  sectionIcons: sectionIcons2,
-  openWindows,
-  onOpenApp,
-  onActivateWindow
+function MobileAppLanding({
+  productName,
+  productIcon,
+  config,
+  wallpaperStyle
 }) {
-  const [selectedFolder, setSelectedFolder] = useState(null);
-  const homeIconsRaw = useMemo(() => {
-    const list = [];
-    for (const entry of navSections2) {
-      if (isSection(entry)) {
-        const sec = entry;
-        list.push({ kind: "folder", id: `folder:${sec.label}`, label: sec.label, section: sec });
-      } else {
-        const it = entry;
-        list.push({ kind: "app", id: `app:${it.to}`, label: it.label, route: it.to });
-      }
-    }
-    return list;
-  }, [navSections2]);
-  const [homeOrder, setHomeOrder] = useState(() => loadOrder(MOBILE_HOME_ORDER_KEY));
-  const homeIcons = useMemo(() => {
-    const indexFor = (id) => {
-      const i = homeOrder.indexOf(id);
-      return i === -1 ? Number.MAX_SAFE_INTEGER : i;
-    };
-    return homeIconsRaw.slice().sort((a, b) => {
-      const ia = indexFor(a.id);
-      const ib = indexFor(b.id);
-      if (ia !== ib) return ia - ib;
-      return homeIconsRaw.indexOf(a) - homeIconsRaw.indexOf(b);
-    });
-  }, [homeIconsRaw, homeOrder]);
-  useEffect(() => {
-    const visibleIds = homeIconsRaw.map((i) => i.id);
-    const next = [
-      ...homeOrder.filter((id) => visibleIds.includes(id)),
-      ...visibleIds.filter((id) => !homeOrder.includes(id))
-    ];
-    if (next.length !== homeOrder.length || next.some((id, i) => id !== homeOrder[i])) {
-      setHomeOrder(next);
-      saveOrder(MOBILE_HOME_ORDER_KEY, next);
-    }
-  }, [homeIconsRaw, homeOrder]);
-  const [dragId, setDragId] = useState(null);
-  const [dragPos, setDragPos] = useState(null);
-  const dragOffsetRef = useRef({ x: 0, y: 0 });
-  const longPressTimerRef = useRef(null);
-  const longPressFiredRef = useRef(false);
-  const cancelLongPress = () => {
-    if (longPressTimerRef.current) {
-      clearTimeout(longPressTimerRef.current);
-      longPressTimerRef.current = null;
-    }
-  };
-  const beginLongPress = (id, e) => {
-    if (dragId) return;
-    const x = e.clientX;
-    const y = e.clientY;
-    const target = e.currentTarget;
-    longPressFiredRef.current = false;
-    cancelLongPress();
-    longPressTimerRef.current = setTimeout(() => {
-      if (!target.isConnected) return;
-      const rect = target.getBoundingClientRect();
-      dragOffsetRef.current = { x: x - rect.left, y: y - rect.top };
-      longPressFiredRef.current = true;
-      setDragId(id);
-      setDragPos({ x, y });
-      try {
-        navigator.vibrate?.(15);
-      } catch {
-      }
-    }, LONG_PRESS_MS);
-  };
-  useEffect(() => {
-    if (!dragId) return;
-    const onMove = (e) => {
-      setDragPos({ x: e.clientX, y: e.clientY });
-      const el = document.elementFromPoint(e.clientX, e.clientY);
-      const targetEl = el?.closest("[data-home-icon-id]");
-      if (!targetEl) return;
-      const targetId = targetEl.dataset.homeIconId;
-      if (targetId === dragId) return;
-      setHomeOrder((prev) => {
-        const fromIdx = prev.indexOf(dragId);
-        const toIdx = prev.indexOf(targetId);
-        if (fromIdx === -1 || toIdx === -1) return prev;
-        const next = prev.slice();
-        next.splice(fromIdx, 1);
-        next.splice(toIdx, 0, dragId);
-        return next;
-      });
-    };
-    const onUp = () => {
-      setDragId(null);
-      setDragPos(null);
-      setHomeOrder((prev) => {
-        saveOrder(MOBILE_HOME_ORDER_KEY, prev);
-        return prev;
-      });
-    };
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
-    return () => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-    };
-  }, [dragId]);
-  const handleIconClick = (icon) => {
-    if (longPressFiredRef.current) {
-      longPressFiredRef.current = false;
-      return;
-    }
-    if (icon.kind === "app") onOpenApp(icon.route);
-    else setSelectedFolder(icon.section);
-  };
-  const [widgetOrder, _setWidgetOrder] = useState(() => loadOrder(MOBILE_WIDGET_ORDER_KEY));
-  const widgetWindows = useMemo(() => {
-    const widgets = openWindows.filter((w) => {
-      if (!w.route) return false;
-      const entry = WINDOW_REGISTRY[w.route];
-      return entry && isPageEntry(entry) && entry.widget;
-    });
-    const indexFor = (route) => {
-      const i = widgetOrder.indexOf(route);
-      return i === -1 ? Number.MAX_SAFE_INTEGER : i;
-    };
-    return widgets.slice().sort((a, b) => indexFor(a.route) - indexFor(b.route));
-  }, [openWindows, widgetOrder]);
-  useEffect(() => {
-    const visibleRoutes = widgetWindows.map((w) => w.route).filter(Boolean);
-    const next = [
-      ...widgetOrder.filter((r) => visibleRoutes.includes(r)),
-      ...visibleRoutes.filter((r) => !widgetOrder.includes(r))
-    ];
-    if (next.length !== widgetOrder.length || next.some((r, i) => r !== widgetOrder[i])) {
-      _setWidgetOrder(next);
-      saveOrder(MOBILE_WIDGET_ORDER_KEY, next);
-    }
-  }, [widgetWindows, widgetOrder]);
-  useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const w of openWindows) {
-      if (!w.route) continue;
-      map.set(w.route, (map.get(w.route) ?? 0) + 1);
-    }
-    return map;
-  }, [openWindows]);
-  const draggedIcon = dragId ? homeIcons.find((i) => i.id === dragId) : null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "h-full overflow-y-auto px-4 pt-4 pb-4 select-none",
-        style: {
-          // Disable iOS long-press text-selection / "Copy" callout on icon labels.
-          WebkitUserSelect: "none",
-          WebkitTouchCallout: "none"
-        },
-        children: /* @__PURE__ */ jsxs("div", { children: [
-          widgetWindows.length > 0 && /* @__PURE__ */ jsx("section", { className: "mb-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: widgetWindows.map((w) => {
-            const entry = WINDOW_REGISTRY[w.route];
-            if (!entry) return null;
-            const Component = entry.component;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "col-span-2 relative rounded-2xl bg-white/85 backdrop-blur border border-white/40 shadow-md overflow-hidden aspect-square",
-                children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(LoadingSpinner, {}) }), children: /* @__PURE__ */ jsx(Component, {}) })
-              },
-              w.id
-            );
-          }) }) }),
-          homeIcons.length > 0 && /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: homeIcons.map((icon) => {
-            const isFolder = icon.kind === "folder";
-            const isBeingDragged = dragId === icon.id;
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                "data-home-icon-id": icon.id,
-                onPointerDown: (e) => beginLongPress(icon.id, e),
-                onPointerUp: cancelLongPress,
-                onPointerCancel: cancelLongPress,
-                onPointerLeave: cancelLongPress,
-                onClick: () => handleIconClick(icon),
-                style: { touchAction: "none", visibility: isBeingDragged ? "hidden" : "visible" },
-                className: `flex flex-col items-center gap-1 py-1 rounded-lg active:bg-white/20 ${dragId && !isBeingDragged ? "transition-transform" : ""}`,
-                children: [
-                  isFolder ? /* @__PURE__ */ jsx(FolderTile, { section: icon.section, navIcons: navIcons2 }) : /* @__PURE__ */ jsx(AppTile, { route: icon.route, icon: navIcons2[icon.route] }),
-                  /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-sm truncate w-full text-center", children: icon.label })
-                ]
-              },
-              icon.id
-            );
-          }) }) })
-        ] })
-      }
-    ),
-    draggedIcon && dragPos && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed pointer-events-none z-[400] transition-none",
-        style: {
-          left: dragPos.x - dragOffsetRef.current.x,
-          top: dragPos.y - dragOffsetRef.current.y,
-          transform: "scale(1.12)"
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 py-1 w-20", children: [
-          draggedIcon.kind === "folder" ? /* @__PURE__ */ jsx(FolderTile, { section: draggedIcon.section, navIcons: navIcons2 }) : /* @__PURE__ */ jsx(AppTile, { route: draggedIcon.route, icon: navIcons2[draggedIcon.route] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-md truncate w-full text-center", children: draggedIcon.label })
-        ] })
-      }
-    ),
-    selectedFolder && /* @__PURE__ */ jsx(
-      FolderPopup,
-      {
-        folder: selectedFolder,
-        navIcons: navIcons2,
-        onClose: () => setSelectedFolder(null),
-        onOpenApp: (path) => {
-          setSelectedFolder(null);
-          onOpenApp(path);
-        }
-      }
-    )
-  ] });
-}
-function FolderPopup({
-  folder,
-  navIcons: navIcons2,
-  onClose,
-  onOpenApp
-}) {
-  const [closing, setClosing] = useState(false);
-  const beginClose = () => {
-    if (closing) return;
-    setClosing(true);
-    setTimeout(onClose, 200);
-  };
-  const closeThen = (after) => {
-    if (closing) return;
-    setClosing(true);
-    setTimeout(after, 200);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "fixed inset-0 z-[210] flex flex-col items-center justify-center px-6 bg-black/45 backdrop-blur-xl select-none",
-      style: {
-        paddingBottom: "calc(var(--mobile-bottom-nav, 70px) + 16px)",
-        animation: closing ? "folder-fade-out 200ms ease-in forwards" : "folder-fade-in 220ms ease-out",
-        WebkitUserSelect: "none",
-        WebkitTouchCallout: "none"
-      },
-      onClick: beginClose,
-      children: [
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes folder-fade-in { from { opacity: 0; } to { opacity: 1; } }
-        @keyframes folder-fade-out { from { opacity: 1; } to { opacity: 0; } }
-        @keyframes folder-pop-in { from { opacity: 0; transform: scale(0.86) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
-        @keyframes folder-pop-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.9) translateY(4px); } }
-      ` }),
-        /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[304px]", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-white drop-shadow-md mb-4 ml-4", children: folder.label }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "max-h-[70vh] flex flex-col rounded-3xl bg-white/15 backdrop-blur-xl border border-white/25 shadow-2xl overflow-hidden",
-              style: {
-                animation: closing ? "folder-pop-out 180ms ease-in forwards" : "folder-pop-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1)"
-              },
-              onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-5", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4", children: folder.items.map((item) => {
-                return /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => closeThen(() => onOpenApp(item.to)),
-                    className: "flex flex-col items-center gap-1 py-1 rounded-lg active:bg-white/15",
-                    children: [
-                      /* @__PURE__ */ jsx(AppTile, { route: item.to, icon: navIcons2[item.to] }),
-                      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-white drop-shadow-sm truncate w-full text-center", children: item.label })
-                    ]
-                  },
-                  item.to
-                );
-              }) }) })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function MobileSwitcher({ windows, onActivate, onClose, onCloseAll }) {
-  const [cardSize, setCardSize] = useState(() => computeCardSize());
-  useEffect(() => {
-    const onResize = () => setCardSize(computeCardSize());
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-  if (windows.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-3 text-white/80 px-6 text-center", children: [
-      /* @__PURE__ */ jsxs("svg", { className: "h-12 w-12 text-white/40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.4, children: [
-        /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
-        /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
-        /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.25" }),
-        /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.25" })
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No open apps." }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-white/50", children: "Tap Home to launch one." })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-3 pt-4 pb-4", children: [
-      /* @__PURE__ */ jsxs("h1", { className: "text-white text-base font-semibold mb-3 px-1", children: [
-        "Open apps \xB7 ",
-        windows.length
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: windows.map((w) => /* @__PURE__ */ jsxs("div", { className: "group flex flex-col items-stretch gap-1", children: [
-        /* @__PURE__ */ jsx(
-          ThumbCard,
-          {
-            id: w.id,
-            label: w.label,
-            maxW: cardSize.w,
-            maxH: cardSize.h,
-            titleAbove: true,
-            onClick: () => onActivate(w.id),
-            onClose: () => onClose(w.id)
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-white/80 truncate px-1", children: w.label })
-      ] }, w.id)) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 px-3 py-3 flex justify-center", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: onCloseAll,
-        className: "px-5 py-2.5 rounded-full bg-white/15 backdrop-blur-md border border-white/25 text-white text-sm font-medium active:bg-white/25 shadow-lg",
-        children: "Close All"
-      }
-    ) })
-  ] });
-}
-function computeCardSize() {
-  const w = typeof window !== "undefined" ? window.innerWidth : 360;
-  const h = typeof window !== "undefined" ? window.innerHeight : 640;
-  const cardW = Math.max(120, Math.floor((w - 36) / 2));
-  const cardH = Math.min(cardW * 1.4, Math.floor(h * 0.4));
-  return { w: cardW, h: cardH };
-}
-function timeAgo2(dateStr) {
-  const diff = Date.now() - new Date(dateStr).getTime();
-  const mins = Math.floor(diff / 6e4);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(hrs / 24);
-  if (days < 7) return `${days}d ago`;
-  return formatDate(dateStr);
-}
-function MobileNotificationSheet({ config, onClose }) {
-  const { list, markRead, markAllRead, onItemClick } = config;
-  const queryClient = useQueryClient();
-  const unreadCount = config.useUnreadCount();
-  const { data: notifData } = useQuery({
-    queryKey: ["notifications-dropdown"],
-    queryFn: () => list({ page_size: 30 }),
-    staleTime: 3e4
-  });
-  const notifications = notifData?.results ?? [];
-  const handleClick = useCallback((notif) => {
-    if (!notif.is_read) {
-      queryClient.setQueryData(["notification-unread-count"], (old) => old ? { ...old, count: Math.max(0, (old.count || 0) - 1) } : old);
-      queryClient.setQueryData(["notifications-dropdown"], (old) => {
-        if (!old?.results) return old;
-        return { ...old, results: old.results.map((n) => n.id === notif.id ? { ...n, is_read: true } : n) };
-      });
-      markRead(notif.id).catch(() => {
-        queryClient.invalidateQueries({ queryKey: ["notification-unread-count"] });
-        queryClient.invalidateQueries({ queryKey: ["notifications-dropdown"] });
-      });
-    }
-    onClose();
-    onItemClick(notif);
-  }, [queryClient, markRead, onItemClick, onClose]);
-  const handleMarkAllRead = () => {
-    queryClient.setQueryData(["notification-unread-count"], (old) => old ? { ...old, count: 0 } : old);
-    queryClient.setQueryData(["notifications-dropdown"], (old) => {
-      if (!old?.results) return old;
-      return { ...old, results: old.results.map((n) => ({ ...n, is_read: true })) };
-    });
-    markAllRead().then(() => {
-      queryClient.invalidateQueries({ queryKey: ["notification-unread-count"] });
-      queryClient.invalidateQueries({ queryKey: ["notifications-dropdown"] });
-    });
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "fixed inset-0 z-[210] flex flex-col bg-white",
-      style: { paddingBottom: "var(--mobile-bottom-nav, 70px)" },
-      children: [
-        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between px-3 py-3 border-b border-gray-200 shrink-0", children: [
-          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-2 -ml-1 rounded-full active:bg-gray-200 text-gray-700", "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }),
-          /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Notifications" }),
-          unreadCount > 0 ? /* @__PURE__ */ jsx("button", { onClick: handleMarkAllRead, className: "text-xs text-blue-600 font-medium px-2 py-1 active:bg-blue-50 rounded", children: "Mark all read" }) : /* @__PURE__ */ jsx("span", { className: "w-[88px]" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: notifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [
-          /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-gray-300 mb-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 font-medium", children: "All caught up" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 mt-1", children: "No notifications yet" })
-        ] }) : notifications.map((notif) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => handleClick(notif),
-            className: "w-full flex items-start gap-3 px-4 py-3 active:bg-gray-100 border-b border-gray-100 text-left",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "pt-1 shrink-0", children: !notif.is_read ? /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-blue-500" }) : /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("p", { className: `text-sm leading-snug ${!notif.is_read ? "font-medium text-gray-900" : "text-gray-700"}`, children: notif.title }),
-                notif.message && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1 line-clamp-2", children: notif.message }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1.5", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-[11px] text-gray-400", children: timeAgo2(notif.created_at) }),
-                  notif.actor_name && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-gray-400", children: [
-                    "by ",
-                    notif.actor_name
-                  ] })
-                ] })
-              ] })
-            ]
-          },
-          notif.id
-        )) })
-      ]
-    }
-  );
-}
-function MobileProfileSheet({ profile, user, onClose, onNavigate, onLogout }) {
-  const initial = (profile?.first_name?.charAt(0) || user?.email?.charAt(0) || "?").toUpperCase();
-  const displayName = profile?.first_name ? `${profile.first_name} ${profile.last_name || ""}`.trim() : user?.email ?? "Account";
-  const groups = profile?.group_names ?? [];
-  const handleNav = (path) => {
-    onNavigate(path);
-    onClose();
-  };
-  return /* @__PURE__ */ jsxs(
+  const hasLink = !!config?.url;
+  const heading = config?.heading ?? (hasLink ? `Continue in the ${productName} app` : `${productName} works best on desktop`);
+  const description = config?.description ?? (hasLink ? "This experience is built for the mobile app. Open it to continue on your phone." : "Open this page on a larger screen to continue.");
+  const ctaLabel = config?.ctaLabel ?? "Open the app";
+  return /* @__PURE__ */ jsx(
     "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: "Preferences" }),
-                  /* @__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",
+      className: "flex-1 flex items-center justify-center p-6",
+      style: { ...wallpaperStyle, paddingBottom: "calc(env(safe-area-inset-bottom) + 1.5rem)" },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "w-full max-w-sm rounded-3xl p-8 flex flex-col items-center text-center",
+          style: glassStyle(),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "h-20 w-20 rounded-2xl overflow-hidden bg-white/60 flex items-center justify-center shadow-sm mb-5", children: /* @__PURE__ */ jsx("img", { src: productIcon, alt: "", className: "h-full w-full object-contain p-3" }) }),
+            /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900 leading-snug", children: heading }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 leading-relaxed", children: description }),
+            hasLink && /* @__PURE__ */ jsxs(
+              "a",
               {
-                onClick: () => {
-                  onLogout();
-                  onClose();
-                },
-                className: "w-full flex items-center gap-3 px-4 py-4 active:bg-red-50 text-left",
+                href: config.url,
+                rel: "noopener noreferrer",
+                className: "mt-6 w-full inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 active:bg-blue-800",
                 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" })
+                  ctaLabel,
+                  /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" }) })
                 ]
               }
             )
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-function MobileShell({
-  navSections: navSections2,
-  navIcons: navIcons2,
-  sectionIcons: sectionIcons2,
-  wallpaperStyle,
-  notifications,
-  profile,
-  user,
-  onNavigate,
-  onLogout
-}) {
-  const { openWindows, openPage, closeEntity } = useWindowManager();
-  const mode = useSyncExternalStore(subscribeMobileMode, getMobileMode);
-  const [sheet, setSheet] = useState(null);
-  const unreadCount = notifications?.useUnreadCount() ?? 0;
-  const switcherWindows = useMemo(() => {
-    return openWindows.filter((w) => {
-      if (!w.route) return true;
-      const entry = WINDOW_REGISTRY[w.route];
-      if (!entry || !isPageEntry(entry)) return true;
-      return !entry.widget;
-    });
-  }, [openWindows]);
-  const prevOpenCountRef = useRef(openWindows.length);
-  useEffect(() => {
-    if (openWindows.length === 0 && mode === "app") {
-      setMobileMode("home");
-    }
-    prevOpenCountRef.current = openWindows.length;
-  }, [openWindows.length, mode]);
-  const activateWindowById = (windowId) => {
-    const panel = document.querySelector(`[data-modal-panel][data-window-key="${windowId}"]`);
-    const mid = panel?.getAttribute("data-modal-id");
-    if (mid) activateModal(mid);
-  };
-  const handleOpenApp = (path) => {
-    openPage(path);
-    setMobileMode("app");
-  };
-  const handleActivateWindow = (id) => {
-    activateWindowById(id);
-    setMobileMode("app");
-  };
-  const closeSheet = () => setSheet(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-0 pointer-events-none",
-        style: wallpaperStyle
-      }
-    ),
-    mode === "home" && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-[200]",
-        style: {
-          ...wallpaperStyle,
-          paddingBottom: "var(--mobile-bottom-nav, 70px)"
-        },
-        children: /* @__PURE__ */ jsx(
-          MobileHome,
-          {
-            navSections: navSections2,
-            navIcons: navIcons2,
-            sectionIcons: sectionIcons2,
-            openWindows,
-            onOpenApp: handleOpenApp,
-            onActivateWindow: handleActivateWindow
-          }
-        )
-      }
-    ),
-    mode === "switcher" && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[200] bg-gray-900/95 backdrop-blur-sm", style: { paddingBottom: "var(--mobile-bottom-nav, 70px)" }, children: /* @__PURE__ */ jsx(
-      MobileSwitcher,
-      {
-        windows: switcherWindows,
-        onActivate: handleActivateWindow,
-        onClose: (id) => closeEntity(id),
-        onCloseAll: () => switcherWindows.forEach((w) => closeEntity(w.id))
-      }
-    ) }),
-    sheet === "notifications" && notifications && /* @__PURE__ */ jsx(MobileNotificationSheet, { config: notifications, onClose: closeSheet }),
-    sheet === "profile" && /* @__PURE__ */ jsx(
-      MobileProfileSheet,
-      {
-        profile,
-        user,
-        onClose: closeSheet,
-        onNavigate: (path) => {
-          onNavigate?.(path);
-        },
-        onLogout: () => onLogout?.()
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      MobileBottomNav,
-      {
-        mode,
-        unreadCount,
-        showNotifications: !!notifications,
-        profileAvatar: profile?.avatar_url,
-        profileInitial: (profile?.first_name?.charAt(0) || user?.email?.charAt(0) || "?").toUpperCase(),
-        onHome: () => {
-          closeSheet();
-          setMobileMode("home");
-        },
-        onSwitcher: () => {
-          closeSheet();
-          setMobileMode("switcher");
-        },
-        onNotifications: () => setSheet(sheet === "notifications" ? null : "notifications"),
-        onProfile: () => setSheet(sheet === "profile" ? null : "profile")
-      }
-    )
-  ] });
-}
-function MobileBottomNav({
-  mode,
-  unreadCount,
-  showNotifications,
-  profileAvatar,
-  profileInitial,
-  onHome,
-  onSwitcher,
-  onNotifications,
-  onProfile
-}) {
-  const btnClass = (active) => `flex-1 flex flex-col items-center justify-center gap-0.5 py-2 transition-colors select-none ${active ? "text-blue-600" : "text-gray-700 active:text-gray-900"}`;
-  return /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      className: "fixed bottom-0 inset-x-0 z-[300] flex items-stretch border-t border-white/40",
-      style: {
-        height: "var(--mobile-bottom-nav, 70px)",
-        paddingBottom: "env(safe-area-inset-bottom)",
-        WebkitBackdropFilter: "blur(28px) saturate(1.8)",
-        backdropFilter: "blur(28px) saturate(1.8)",
-        background: "linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.55) 100%)",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.6), 0 -2px 12px rgba(0,0,0,0.08)"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("button", { onClick: onHome, className: btnClass(mode === "home"), "aria-label": "Home", children: [
-          /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Home" })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { onClick: onSwitcher, className: btnClass(mode === "switcher"), "aria-label": "App switcher", children: [
-          /* @__PURE__ */ jsxs("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: [
-            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
-            /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.25" }),
-            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.25" }),
-            /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.25" })
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Apps" })
-        ] }),
-        showNotifications && /* @__PURE__ */ jsxs("button", { onClick: onNotifications, className: btnClass(false), "aria-label": "Notifications", children: [
-          /* @__PURE__ */ jsxs("span", { className: "relative", children: [
-            /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.7, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }),
-            unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1.5 -right-2 min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-[10px] font-bold leading-[18px] text-center", children: unreadCount > 99 ? "99+" : unreadCount })
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Alerts" })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { onClick: onProfile, className: btnClass(false), "aria-label": "Profile", children: [
-          profileAvatar ? /* @__PURE__ */ jsx("img", { src: profileAvatar, alt: "", className: "h-8 w-8 rounded-full object-cover border border-gray-200" }) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-xs font-bold text-blue-700", children: profileInitial }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: "Profile" })
-        ] })
-      ]
+          ]
+        }
+      )
     }
   );
 }
@@ -4357,7 +3658,8 @@ function Layout({
   notifications,
   search,
   taskbarTrayLeft,
-  clockCalendar
+  clockCalendar,
+  mobileApp
 } = {}) {
   const host = useDesktopHost();
   const { user, logout, hasAnyPerm } = useAuth();
@@ -4370,7 +3672,7 @@ function Layout({
   const { prefs, save: savePrefs } = useShellPrefs();
   const layoutMode = prefs.layout_mode === "sidebar" ? "sidebar" : "classic";
   const sidebarMode = layoutMode === "sidebar";
-  const sidebarWidth = sidebarMode ? 280 : 0;
+  const sidebarWidth = sidebarMode ? SIDEBAR_STRIP_W : 0;
   const taskbarPositionRaw = prefs.taskbar_position || "bottom";
   const taskbarPosition = sidebarMode ? "bottom" : taskbarPositionRaw;
   const taskbarSize = prefs.taskbar_size || "medium";
@@ -4419,8 +3721,8 @@ function Layout({
     root.style.setProperty("--window-tab-font-size", sv.tabFont);
   }, [reduceTransparency, inactiveHeaderOpacity, inactiveContentOpacity, activeHeaderOpacity, activeContentOpacity, taskbarH, taskbarPosition, prefs.default_window_size, prefs.window_position, prefs.menu_density, prefs.start_menu_size, sidebarWidth, layoutMode]);
   useEffect(() => {
-    document.documentElement.style.setProperty("--mobile-bottom-nav", isMobile ? "100px" : "0px");
-  }, [isMobile]);
+    document.documentElement.style.setProperty("--mobile-bottom-nav", "0px");
+  }, []);
   const [balloonDismissed, setBalloonDismissed] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
   const [taskbarMenu, setTaskbarMenu] = useState(null);
@@ -4578,19 +3880,12 @@ function Layout({
       };
       if (isMobile) {
         return /* @__PURE__ */ jsx(
-          MobileShell,
+          MobileAppLanding,
           {
             productName,
             productIcon,
-            navSections: navSections2,
-            navIcons: navIcons2,
-            sectionIcons: sectionIcons2,
-            wallpaperStyle,
-            notifications,
-            profile,
-            user,
-            onNavigate: (path) => openPage(path),
-            onLogout: () => setShowLogout(true)
+            config: mobileApp,
+            wallpaperStyle
           }
         );
       }
@@ -5081,7 +4376,7 @@ function Customization({ omit, section } = {}) {
     inSection("layout") && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Layout Mode" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-3", children: "Sidebar mode is designed for small screens \u2014 windows always run maximized and the start menu lives in a persistent left sidebar (sections expand inline instead of opening flyouts)." }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-3", children: "Sidebar mode is designed for small screens \u2014 windows always run maximized and the start menu lives in a persistent left sidebar (sections expand inline instead of opening flyouts). Classic is the windowed mode: choosing it puts every open window back to its normal size." }),
         /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
           { key: "classic", label: "Classic" },
           { key: "sidebar", label: "Sidebar" }
@@ -5090,7 +4385,11 @@ function Customization({ omit, section } = {}) {
           {
             onClick: () => {
               savePref("layout_mode", m.key);
-              if (m.key === "sidebar") savePref("default_window_size", "maximized");
+              if (m.key === "classic") {
+                if (prefs.default_window_size === "maximized") savePref("default_window_size", "large");
+                forgetMaximizedWindowBoxes();
+                window.dispatchEvent(new CustomEvent("react-os-shell:restore-windowed"));
+              }
             },
             className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${(prefs.layout_mode || "classic") === m.key ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"}`,
             children: m.label
@@ -5969,13 +5268,75 @@ function ListFooter({
   isFetchingMore,
   extra
 }) {
-  const total = totalCount ?? loadedCount;
-  const allLoaded = loadedCount >= total;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    extra,
-    selectedCount > 0 ? `${selectedCount} selected \u2014 ` : "",
-    allLoaded ? totalCount != null ? `All ${total.toLocaleString()} ${label} loaded` : `${total.toLocaleString()} ${label}` : `${loadedCount.toLocaleString()} of ${total.toLocaleString()} ${label}`,
-    isFetchingMore ? " \xB7 Loading more..." : ""
+  const total = totalCount ?? loadedCount;
+  const allLoaded = loadedCount >= total;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    extra,
+    selectedCount > 0 ? `${selectedCount} selected \u2014 ` : "",
+    allLoaded ? totalCount != null ? `All ${total.toLocaleString()} ${label} loaded` : `${total.toLocaleString()} ${label}` : `${loadedCount.toLocaleString()} of ${total.toLocaleString()} ${label}`,
+    isFetchingMore ? " \xB7 Loading more..." : ""
+  ] });
+}
+var BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60";
+var VARIANTS2 = {
+  primary: "bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus:ring-blue-400/40",
+  secondary: "border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-blue-400/30",
+  ghost: "text-gray-700 hover:bg-gray-100 focus:ring-blue-400/30",
+  danger: "bg-red-600 text-white shadow-sm hover:bg-red-700 focus:ring-red-400/40"
+};
+var SIZES = {
+  sm: "gap-1 px-2.5 py-1 text-xs",
+  md: "gap-1.5 px-3 py-1.5 text-sm"
+};
+function Spinner() {
+  return /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5 animate-spin", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+  ] });
+}
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  leftIcon,
+  rightIcon,
+  block = false,
+  disabled,
+  type = "button",
+  children,
+  className = "",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: [BASE, VARIANTS2[variant], SIZES[size], block ? "w-full" : "", className].filter(Boolean).join(" "),
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, {}) : leftIcon,
+        children,
+        !loading && rightIcon
+      ]
+    }
+  );
+});
+var Button_default = Button;
+function ListLoadError({
+  title = "Couldn't load this list",
+  message = "Something went wrong fetching these records. Check your connection and try again.",
+  onRetry,
+  variant = "dashed"
+}) {
+  const frame = variant === "card" ? "rounded-md border border-gray-200 bg-white px-6 py-12" : variant === "none" ? "px-6 py-12" : "rounded-lg border-2 border-dashed border-red-200 px-6 py-12";
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center text-center ${frame}`, role: "alert", children: [
+    /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-red-300 mb-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m0 3.75h.008M10.34 3.94l-8.4 14.55A1.5 1.5 0 003.24 21h17.52a1.5 1.5 0 001.3-2.51l-8.4-14.55a1.5 1.5 0 00-2.6 0z" }) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: message }),
+    onRetry && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Button_default, { variant: "secondary", size: "sm", onClick: onRetry, children: "Try again" }) })
   ] });
 }
 function EntityList(props) {
@@ -5984,6 +5345,8 @@ function EntityList(props) {
     isLoading,
     emptyState,
     totalCount,
+    isError,
+    onRetry,
     tableId,
     columns,
     renderCell,
@@ -6069,6 +5432,7 @@ function EntityList(props) {
     }
   };
   if (isLoading) return /* @__PURE__ */ jsx(LoadingSpinner, {});
+  if (isError && items.length === 0) return /* @__PURE__ */ jsx(ListLoadError, { onRetry });
   if (items.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
   const allSelected = items.length > 0 && selected.size === items.length;
   const fullColumns = [
@@ -6426,6 +5790,10 @@ function useInfiniteScroll({
     items: allItems,
     totalCount,
     isLoading: query.isLoading,
+    // Surface the query's error state so a failed fetch renders as an error
+    // (with retry) rather than a misleading empty list. `refetch` is the retry.
+    isError: query.isError,
+    error: query.error,
     isFetchingNextPage,
     hasNextPage: !!hasNextPage,
     sentinelRef,
@@ -6542,54 +5910,6 @@ function Pagination({
     showEdges && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Last page", disabled: page === pageCount, onClick: () => go(pageCount), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\xBB" })
   ] });
 }
-var BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60";
-var VARIANTS2 = {
-  primary: "bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus:ring-blue-400/40",
-  secondary: "border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-blue-400/30",
-  ghost: "text-gray-700 hover:bg-gray-100 focus:ring-blue-400/30",
-  danger: "bg-red-600 text-white shadow-sm hover:bg-red-700 focus:ring-red-400/40"
-};
-var SIZES = {
-  sm: "gap-1 px-2.5 py-1 text-xs",
-  md: "gap-1.5 px-3 py-1.5 text-sm"
-};
-function Spinner() {
-  return /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5 animate-spin", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
-  ] });
-}
-var Button = forwardRef(function Button2({
-  variant = "primary",
-  size = "md",
-  loading = false,
-  leftIcon,
-  rightIcon,
-  block = false,
-  disabled,
-  type = "button",
-  children,
-  className = "",
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      type,
-      disabled: disabled || loading,
-      "aria-busy": loading || void 0,
-      className: [BASE, VARIANTS2[variant], SIZES[size], block ? "w-full" : "", className].filter(Boolean).join(" "),
-      ...rest,
-      children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, {}) : leftIcon,
-        children,
-        !loading && rightIcon
-      ]
-    }
-  );
-});
-var Button_default = Button;
 var Input = forwardRef(function Input2({ invalid, leftIcon, rightAdornment, className = "", ...rest }, ref) {
   const pad = `${leftIcon ? "pl-9" : ""} ${rightAdornment ? "pr-9" : ""}`.trim();
   const field = /* @__PURE__ */ jsx(
@@ -6629,7 +5949,44 @@ var Textarea = forwardRef(function Textarea2({ invalid, autoGrow, className = ""
   );
 });
 var Textarea_default = Textarea;
-var Select = forwardRef(function Select2({ value, onChange, options, placeholder, invalid, className = "", ...rest }, ref) {
+
+// src/forms/selectNav.ts
+function firstEnabledIndex(options) {
+  for (let i = 0; i < options.length; i++) {
+    if (!options[i].disabled) return i;
+  }
+  return -1;
+}
+function lastEnabledIndex(options) {
+  for (let i = options.length - 1; i >= 0; i--) {
+    if (!options[i].disabled) return i;
+  }
+  return -1;
+}
+function nextEnabledIndex(options, from, dir) {
+  let i = from + dir;
+  while (i >= 0 && i < options.length) {
+    if (!options[i].disabled) return i;
+    i += dir;
+  }
+  if (from >= 0 && from < options.length && !options[from].disabled) return from;
+  return dir > 0 ? firstEnabledIndex(options) : lastEnabledIndex(options);
+}
+function matchTypeahead(options, buffer, fromIndex) {
+  const q = buffer.toLowerCase();
+  const n = options.length;
+  if (!q || n === 0) return -1;
+  for (let step = 1; step <= n; step++) {
+    const i = ((fromIndex + step) % n + n) % n;
+    const o = options[i];
+    if (!o.disabled && o.label.toLowerCase().startsWith(q)) return i;
+  }
+  return -1;
+}
+var MENU_GAP2 = 4;
+var VIEWPORT_MARGIN2 = 8;
+var MENU_MAX_HEIGHT2 = 240;
+var NativeSelect = forwardRef(function NativeSelect2({ value, onChange, options, placeholder, invalid, className = "", ...rest }, ref) {
   return /* @__PURE__ */ jsxs(
     "select",
     {
@@ -6645,6 +6002,260 @@ var Select = forwardRef(function Select2({ value, onChange, options, placeholder
     }
   );
 });
+function useAnchoredPosition(triggerRef, open) {
+  const [pos, setPos] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    let lastLeft = NaN, lastTop = NaN, lastBottom = NaN;
+    const compute = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      lastLeft = rect.left;
+      lastTop = rect.top;
+      lastBottom = rect.bottom;
+      const spaceBelow = window.innerHeight - rect.bottom - MENU_GAP2 - VIEWPORT_MARGIN2;
+      const spaceAbove = rect.top - MENU_GAP2 - VIEWPORT_MARGIN2;
+      const placeAbove = spaceBelow < Math.min(MENU_MAX_HEIGHT2, 160) && spaceAbove > spaceBelow;
+      const maxHeight = Math.max(96, Math.min(MENU_MAX_HEIGHT2, placeAbove ? spaceAbove : spaceBelow));
+      const left = Math.max(VIEWPORT_MARGIN2, Math.min(rect.left, window.innerWidth - rect.width - VIEWPORT_MARGIN2));
+      const next = { left, minWidth: rect.width, maxHeight };
+      if (placeAbove) next.bottom = window.innerHeight - rect.top + MENU_GAP2;
+      else next.top = rect.bottom + MENU_GAP2;
+      setPos(next);
+    };
+    compute();
+    let raf = requestAnimationFrame(function tick() {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (rect && (rect.left !== lastLeft || rect.top !== lastTop || rect.bottom !== lastBottom)) compute();
+      raf = requestAnimationFrame(tick);
+    });
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [open, triggerRef]);
+  return pos;
+}
+var ListboxSelect = forwardRef(function ListboxSelect2({ value, onChange, options, placeholder, invalid, className = "", id, disabled, ...rest }, ref) {
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1);
+  const wrapRef = useRef(null);
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const openRef = useRef(open);
+  openRef.current = open;
+  const typeahead = useRef({ buffer: "", timer: null });
+  const baseId = useId();
+  const listboxId = `${baseId}-listbox`;
+  const optionId = (i) => `${baseId}-opt-${i}`;
+  const menuPos = useAnchoredPosition(triggerRef, open);
+  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selectedLabel = selectedIndex >= 0 ? options[selectedIndex].label : void 0;
+  const close = useCallback((refocus = true) => {
+    setOpen(false);
+    setActive(-1);
+    if (refocus) triggerRef.current?.focus();
+  }, []);
+  const openList = useCallback(() => {
+    if (disabled) return;
+    setActive(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex(options));
+    setOpen(true);
+  }, [disabled, options, selectedIndex]);
+  const commit = useCallback((i) => {
+    const o = options[i];
+    if (!o || o.disabled) return;
+    onChange(o.value);
+    close();
+  }, [options, onChange, close]);
+  useEffect(() => {
+    if (!open) return;
+    const unregister = registerModalEscapeInterceptor((e) => {
+      if (e.key !== "Escape" || !openRef.current) return false;
+      close();
+      return true;
+    });
+    return unregister;
+  }, [open, close]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      if (wrapRef.current?.contains(t) || listRef.current?.contains(t)) return;
+      close(false);
+    };
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
+  }, [open, close]);
+  useEffect(() => {
+    if (!open || active < 0) return;
+    listRef.current?.querySelector(`#${CSS.escape(optionId(active))}`)?.scrollIntoView({ block: "nearest" });
+  });
+  const runTypeahead = useCallback((char) => {
+    const ta = typeahead.current;
+    if (ta.timer) clearTimeout(ta.timer);
+    ta.buffer += char;
+    ta.timer = setTimeout(() => {
+      ta.buffer = "";
+      ta.timer = null;
+    }, 500);
+    const from = open ? active : selectedIndex;
+    const hit = matchTypeahead(options, ta.buffer, from);
+    if (hit < 0) return;
+    if (open) setActive(hit);
+    else commit(hit);
+  }, [open, active, selectedIndex, options, commit]);
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) openList();
+        else setActive((a) => nextEnabledIndex(options, a, 1));
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) openList();
+        else setActive((a) => nextEnabledIndex(options, a, -1));
+        return;
+      case "Home":
+        if (open) {
+          e.preventDefault();
+          setActive(firstEnabledIndex(options));
+        }
+        return;
+      case "End":
+        if (open) {
+          e.preventDefault();
+          setActive(lastEnabledIndex(options));
+        }
+        return;
+      case "Enter":
+        if (open) {
+          e.preventDefault();
+          commit(active);
+        }
+        return;
+      case " ":
+        e.preventDefault();
+        if (!open) openList();
+        else commit(active);
+        return;
+      case "Escape":
+        if (open) {
+          e.preventDefault();
+          e.stopPropagation();
+          close();
+        }
+        return;
+      case "Tab":
+        if (open) close(false);
+        return;
+      default:
+        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          e.preventDefault();
+          runTypeahead(e.key);
+        }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        id,
+        type: "button",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && active >= 0 ? optionId(active) : void 0,
+        "aria-invalid": invalid || void 0,
+        disabled,
+        onClick: () => open ? close() : openList(),
+        onKeyDown,
+        className: inputClasses({ invalid, className: `pr-8 text-left ${className}`.trim() }),
+        children: /* @__PURE__ */ jsx("span", { className: `block truncate ${selectedLabel === void 0 ? "text-gray-400" : ""}`, children: selectedLabel ?? placeholder ?? "\xA0" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 9l3.75-3.75L15.75 9M8.25 15l3.75 3.75L15.75 15" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ref,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        disabled,
+        "aria-hidden": "true",
+        tabIndex: -1,
+        className: "sr-only",
+        ...rest,
+        children: [
+          placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+        ]
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: listRef,
+          id: listboxId,
+          role: "listbox",
+          className: "fixed z-[400] overflow-y-auto rounded-2xl py-1",
+          style: {
+            left: menuPos?.left,
+            top: menuPos?.top,
+            bottom: menuPos?.bottom,
+            minWidth: menuPos?.minWidth,
+            maxHeight: menuPos?.maxHeight ?? MENU_MAX_HEIGHT2,
+            visibility: menuPos ? void 0 : "hidden",
+            ...glassStyle()
+          },
+          children: options.map((o, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: optionId(i),
+              role: "option",
+              "aria-selected": value === o.value,
+              "aria-disabled": o.disabled || void 0,
+              onPointerEnter: () => {
+                if (!o.disabled) setActive(i);
+              },
+              onClick: () => commit(i),
+              className: `mx-1 cursor-pointer truncate rounded-lg px-3 py-1.5 text-sm
+                ${o.disabled ? "cursor-not-allowed text-gray-400" : i === active ? "bg-blue-50 text-blue-700" : value === o.value ? "font-medium text-blue-600" : "text-gray-700"}`,
+              children: o.label
+            },
+            o.value
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+var Select = forwardRef(function Select2(props, ref) {
+  const isMobile = useIsMobile();
+  return isMobile ? /* @__PURE__ */ jsx(NativeSelect, { ref, ...props }) : /* @__PURE__ */ jsx(ListboxSelect, { ref, ...props });
+});
 var Select_default = Select;
 var BOX = "h-4 w-4 shrink-0 rounded border-gray-300 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400/30 disabled:cursor-not-allowed disabled:opacity-60";
 var Checkbox = forwardRef(function Checkbox2({ checked, onChange, label, description, disabled, className = "", ...rest }, ref) {
@@ -7489,16 +7100,12 @@ function FilterBar({ filters, values, onChange, onClear, children }) {
           onChange: (v) => onChange(f.field, v)
         },
         f.field
-      ) : /* @__PURE__ */ jsxs(
-        "select",
+      ) : /* @__PURE__ */ jsx(
+        PlainFilter,
         {
+          filter: f,
           value: values[f.field] || "",
-          onChange: (e) => onChange(f.field, e.target.value),
-          className: `border rounded-lg px-2.5 py-1.5 text-sm ${values[f.field] ? "border-blue-400 bg-blue-50 text-blue-700" : "border-gray-300 text-gray-600"}`,
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: f.label }),
-            f.options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
-          ]
+          onChange: (v) => onChange(f.field, v)
         },
         f.field
       );
@@ -7510,6 +7117,155 @@ function FilterBar({ filters, values, onChange, onClear, children }) {
     ] })
   ] });
 }
+function PlainFilter({ filter, value, onChange }) {
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1);
+  const ref = useRef(null);
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const openRef = useRef(open);
+  openRef.current = open;
+  const typeahead = useRef({ buffer: "", timer: null });
+  const baseId = useId();
+  const listboxId = `${baseId}-listbox`;
+  const optionId = (i) => `${baseId}-opt-${i}`;
+  const items = [{ value: "", label: filter.label }, ...filter.options];
+  const selectedIndex = value ? items.findIndex((o) => o.value === value) : 0;
+  const selectedLabel = value ? filter.options.find((o) => o.value === value)?.label : null;
+  const close = useCallback((refocus = true) => {
+    setOpen(false);
+    setActive(-1);
+    if (refocus) triggerRef.current?.focus();
+  }, []);
+  const openList = useCallback(() => {
+    setActive(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex(items));
+    setOpen(true);
+  }, [selectedIndex, items]);
+  const commit = useCallback((i) => {
+    const o = items[i];
+    if (!o) return;
+    onChange(o.value);
+    close();
+  }, [items, onChange, close]);
+  useClickOutside(ref, useCallback(() => {
+    if (open) close(false);
+  }, [open, close]));
+  useEffect(() => {
+    if (!open) return;
+    return registerModalEscapeInterceptor((e) => {
+      if (e.key !== "Escape" || !openRef.current) return false;
+      close();
+      return true;
+    });
+  }, [open, close]);
+  useEffect(() => {
+    if (!open || active < 0) return;
+    listRef.current?.querySelector(`#${CSS.escape(optionId(active))}`)?.scrollIntoView({ block: "nearest" });
+  });
+  const runTypeahead = (char) => {
+    const ta = typeahead.current;
+    if (ta.timer) clearTimeout(ta.timer);
+    ta.buffer += char;
+    ta.timer = setTimeout(() => {
+      ta.buffer = "";
+      ta.timer = null;
+    }, 500);
+    const hit = matchTypeahead(items, ta.buffer, open ? active : selectedIndex);
+    if (hit < 0) return;
+    if (open) setActive(hit);
+    else commit(hit);
+  };
+  const onKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) openList();
+        else setActive((a) => nextEnabledIndex(items, a, 1));
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) openList();
+        else setActive((a) => nextEnabledIndex(items, a, -1));
+        return;
+      case "Home":
+        if (open) {
+          e.preventDefault();
+          setActive(firstEnabledIndex(items));
+        }
+        return;
+      case "End":
+        if (open) {
+          e.preventDefault();
+          setActive(lastEnabledIndex(items));
+        }
+        return;
+      case "Enter":
+        if (open) {
+          e.preventDefault();
+          commit(active);
+        }
+        return;
+      case " ":
+        e.preventDefault();
+        if (!open) openList();
+        else commit(active);
+        return;
+      case "Escape":
+        if (open) {
+          e.preventDefault();
+          e.stopPropagation();
+          close();
+        }
+        return;
+      case "Tab":
+        if (open) close(false);
+        return;
+      default:
+        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          e.preventDefault();
+          runTypeahead(e.key);
+        }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && active >= 0 ? optionId(active) : void 0,
+        onClick: () => open ? close() : openList(),
+        onKeyDown,
+        className: `flex items-center gap-1.5 border rounded-lg px-2.5 py-1.5 text-sm transition-colors ${value ? "border-blue-400 bg-blue-50 text-blue-700" : "border-gray-300 text-gray-600 hover:border-gray-400"}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate max-w-[140px]", children: selectedLabel || filter.label }),
+          value ? /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            onChange("");
+          }, className: "text-blue-400 hover:text-blue-600", children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-3.5 w-3.5" }) }) : /* @__PURE__ */ jsx("svg", { className: `h-3.5 w-3.5 text-gray-400 transition-transform ${open ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { ref: listRef, id: listboxId, role: "listbox", className: "absolute top-full left-0 mt-1 w-56 rounded-2xl z-[400] max-h-52 overflow-y-auto py-1", style: glassStyle(), children: items.map((o, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: optionId(i),
+        role: "option",
+        "aria-selected": i === selectedIndex,
+        onPointerEnter: () => setActive(i),
+        onClick: () => commit(i),
+        className: `mx-1 cursor-pointer truncate rounded-lg px-3 py-1.5 text-sm
+                ${i === active ? "bg-blue-50 text-blue-700" : i === selectedIndex ? "font-medium text-blue-600" : "text-gray-700"}`,
+        children: o.label
+      },
+      o.value || "__all__"
+    )) })
+  ] });
+}
 function SearchableFilter({ filter, value, onChange }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -8499,7 +8255,7 @@ function ContainerFillChart({
 }
 var DEFAULT_POLL_MS = 15e3;
 var DEFAULT_REQUEST_TIMEOUT_MS = 5e3;
-function timeAgo3(date) {
+function timeAgo2(date) {
   if (!date) return "\u2014";
   const diff = Math.max(0, Date.now() - date.getTime());
   if (diff < 1500) return "just now";
@@ -8688,12 +8444,12 @@ function ServerStatusIndicator({
               /* @__PURE__ */ jsxs("p", { className: "mt-1 text-[11px] text-gray-500", children: [
                 status === "connected" && lastOkAt && /* @__PURE__ */ jsxs(Fragment, { children: [
                   "Last poll ",
-                  timeAgo3(lastOkAt),
+                  timeAgo2(lastOkAt),
                   "."
                 ] }),
                 status === "disconnected" && lastFailAt && /* @__PURE__ */ jsxs(Fragment, { children: [
                   "Last failure ",
-                  timeAgo3(lastFailAt),
+                  timeAgo2(lastFailAt),
                   "."
                 ] }),
                 status === "checking" && /* @__PURE__ */ jsx(Fragment, { children: "First poll in flight\u2026" })
@@ -8711,7 +8467,7 @@ function ServerStatusIndicator({
                 /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: lastOkAt.toLocaleTimeString() }),
                 /* @__PURE__ */ jsxs("span", { className: "text-gray-400 ml-1", children: [
                   "\xB7 ",
-                  timeAgo3(lastOkAt)
+                  timeAgo2(lastOkAt)
                 ] })
               ] }) : "\u2014" }),
               lastFailAt && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8720,7 +8476,7 @@ function ServerStatusIndicator({
                   /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: lastFailAt.toLocaleTimeString() }),
                   /* @__PURE__ */ jsxs("span", { className: "text-gray-400 ml-1", children: [
                     "\xB7 ",
-                    timeAgo3(lastFailAt)
+                    timeAgo2(lastFailAt)
                   ] })
                 ] })
               ] }),
@@ -9879,6 +9635,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BehaviorPanel, BulkImportGrid, Button_default as Button, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Card, ChangePasswordForm, ChatTemplate, Checkbox_default as Checkbox, CheckoutTemplate, ColoredBadge, ContainerFillChart, Customization, DEV_BANNER_TEXT, DashboardTemplate, DataTablePage, Desktop, DesktopHostProvider, DevIndicator, DonutChart, ENTER, EmailTemplate, EmptyState, EntityList, ErrorPage, FilterBar, FormField, FormLayoutPage, GalleryTemplate, GlobalSearch, HelpCenter, INPUT_BASE, Input_default as Input, Kanban, Label, Layout, ListFooter, LoadingSpinner2 as LoadingSpinner, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NotificationBell, PageHeader, Pagination, PdfActionButton, Radio_default as Radio, ResizableTable, SHIFT, SearchableSelect, Select_default as Select, ServerStatusIndicator, ShellEntityFetcherProvider, ShortcutHelp, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, SoundsPanel, Sparkline, StartMenu, StatCard, StatusBadge, StatusBadgeProvider, SystemPreferences, Tabs, Textarea_default as Textarea, Tooltip, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, findDuplicateKeys, formatDate, inputClasses, isDevEnv, isMac, isSeverityTone, mediaFileName, mergeBulkItems, severityOf, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useFilters, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BehaviorPanel, BulkImportGrid, Button_default as Button, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Card, ChangePasswordForm, ChatTemplate, Checkbox_default as Checkbox, CheckoutTemplate, ColoredBadge, ContainerFillChart, Customization, DEV_BANNER_TEXT, DashboardTemplate, DataTablePage, Desktop, DesktopHostProvider, DevIndicator, DonutChart, ENTER, EmailTemplate, EmptyState, EntityList, ErrorPage, FilterBar, FormField, FormLayoutPage, GalleryTemplate, GlobalSearch, HelpCenter, INPUT_BASE, Input_default as Input, Kanban, Label, Layout, ListFooter, ListLoadError, LoadingSpinner2 as LoadingSpinner, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NotificationBell, PageHeader, Pagination, PdfActionButton, Radio_default as Radio, ResizableTable, SHIFT, SearchableSelect, Select_default as Select, ServerStatusIndicator, ShellEntityFetcherProvider, ShortcutHelp, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, SoundsPanel, Sparkline, StartMenu, StatCard, StatusBadge, StatusBadgeProvider, SystemPreferences, Tabs, Textarea_default as Textarea, Tooltip, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, findDuplicateKeys, formatDate, inputClasses, isDevEnv, isMac, isSeverityTone, mediaFileName, mergeBulkItems, severityOf, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useFilters, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map