react-os-shell 3.26.0 → 3.28.3

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-AKPD4Z34.js';
+export { setShellTodoProvider } from './chunk-AKPD4Z34.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';
@@ -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-KFJA5CYZ.js';
+export { VERSION } from './chunk-KFJA5CYZ.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, ThumbCard, activateModal } from './chunk-6LMWM4ZE.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-6LMWM4ZE.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';
@@ -951,6 +951,10 @@ function timeAgo(dateStr) {
   if (days < 7) return `${days}d ago`;
   return formatDate(dateStr);
 }
+function readingTimeMs(notif) {
+  const chars = (notif.title?.length ?? 0) + (notif.message?.length ?? 0);
+  return Math.min(12e3, Math.max(5e3, Math.round(chars / 15) * 1e3));
+}
 function NotificationBell({
   useUnreadCount,
   list,
@@ -992,7 +996,7 @@ function NotificationBell({
     }
     setInlineNotif(null);
   }, []);
-  const showInlineNotif = useCallback((notif, durationMs = 5e3) => {
+  const showInlineNotif = useCallback((notif, durationMs = readingTimeMs(notif)) => {
     setInlineNotif(notif);
     playNotification();
     if (inlineTimerRef.current) clearTimeout(inlineTimerRef.current);
@@ -1134,10 +1138,10 @@ function NotificationBell({
             style: { animation: "notif-in 300ms cubic-bezier(0.4,0,0.2,1)" },
             children: [
               /* @__PURE__ */ jsx("div", { className: "h-9 w-9 shrink-0 rounded-lg bg-blue-500/15 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-blue-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 max-h-[60vh] overflow-y-auto", children: [
                 /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold uppercase tracking-wide text-blue-600 mb-0.5", children: "Notification" }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-800 leading-snug truncate", children: inlineNotif.title }),
-                inlineNotif.message && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 leading-snug truncate mt-0.5", children: inlineNotif.message })
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-800 leading-snug break-words", children: inlineNotif.title }),
+                inlineNotif.message && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 leading-snug break-words mt-0.5", children: inlineNotif.message })
               ] }),
               /* @__PURE__ */ jsx(
                 "button",
@@ -4370,7 +4374,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";
@@ -5081,7 +5085,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 +5094,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
@@ -5978,12 +5986,76 @@ function ListFooter({
     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) {
   const {
     items,
     isLoading,
     emptyState,
     totalCount,
+    isError,
+    onRetry,
     tableId,
     columns,
     renderCell,
@@ -6069,6 +6141,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 +6499,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 +6619,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 +6658,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 +6711,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 +7809,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 +7826,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("");
@@ -9879,6 +10344,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