react-os-shell 3.24.0 → 3.28.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { subscribePomo, getPomoSnapshot } from './chunk-WNZH4GVY.js';
-export { setShellTodoProvider } from './chunk-WNZH4GVY.js';
+import { subscribePomo, getPomoSnapshot } from './chunk-WWT4XQJL.js';
+export { setShellTodoProvider } from './chunk-WWT4XQJL.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,14 +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-TGEZDU6N.js';
-export { VERSION } from './chunk-TGEZDU6N.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-2YTZ6COH.js';
-export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-2YTZ6COH.js';
-export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-UBN4IUDE.js';
+import { APP_VERSION, VERSION } from './chunk-CZW7CTI6.js';
+export { VERSION } from './chunk-CZW7CTI6.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-IU7MSBRI.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-IU7MSBRI.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';
@@ -4371,7 +4370,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";
@@ -5082,7 +5081,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" }
@@ -5091,7 +5090,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
@@ -5979,12 +5982,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,
@@ -6070,6 +6137,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 = [
@@ -6427,6 +6495,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,
@@ -6543,54 +6615,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(
@@ -6630,7 +6654,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",
     {
@@ -6646,6 +6707,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) {
@@ -7490,16 +7805,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
       );
@@ -7511,6 +7822,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("");
@@ -7601,10 +8061,84 @@ function useFilters() {
   }
   return { filterValues, setFilter, clearFilters, filterParams };
 }
+
+// src/shell/severity.ts
+var SEVERITY_TONES = ["success", "warning", "danger"];
+function isSeverityTone(value) {
+  return typeof value === "string" && SEVERITY_TONES.includes(value);
+}
+function severityOf(value, warn, crit) {
+  if (value == null || !Number.isFinite(value)) return null;
+  const warnAt = boundOf(warn);
+  const critAt = boundOf(crit);
+  if (warnAt == null && critAt == null) return null;
+  if (critAt != null && value >= critAt) return "danger";
+  if (warnAt != null && value >= warnAt) return "warning";
+  return "success";
+}
+function boundOf(value) {
+  return value != null && Number.isFinite(value) ? value : null;
+}
+var SEVERITY_FILL = {
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  danger: "bg-red-500"
+};
+var SEVERITY_INK = {
+  success: "text-gray-900",
+  warning: "text-amber-600",
+  danger: "text-red-600"
+};
+var SEVERITY_WORD = {
+  success: "ok",
+  warning: "warning",
+  danger: "critical"
+};
+var SEVERITY_UNKNOWN_FILL = "bg-gray-300 border border-red-500";
+var SEVERITY_UNKNOWN_INK = "text-gray-900";
+var TONE_STYLES = {
+  success: { tone: "success", fill: SEVERITY_FILL.success, ink: SEVERITY_INK.success, word: SEVERITY_WORD.success },
+  warning: { tone: "warning", fill: SEVERITY_FILL.warning, ink: SEVERITY_INK.warning, word: SEVERITY_WORD.warning },
+  danger: { tone: "danger", fill: SEVERITY_FILL.danger, ink: SEVERITY_INK.danger, word: SEVERITY_WORD.danger }
+};
+function styleForTone(tone) {
+  return tone == null ? null : TONE_STYLES[tone];
+}
+function describeToken(value) {
+  const raw = typeof value === "string" ? JSON.stringify(value) : typeof value === "number" || typeof value === "boolean" || typeof value === "bigint" ? String(value) : Object.prototype.toString.call(value);
+  return raw.length > 32 ? `${raw.slice(0, 31)}\u2026` : raw;
+}
+var reported = /* @__PURE__ */ new Set();
+function reportUnknownSeverity(component, described) {
+  const key = `${component}:${described}`;
+  if (reported.has(key)) return;
+  reported.add(key);
+  console.error(
+    `[react-os-shell] ${component}: severity ${described} is not one of ${SEVERITY_TONES.join(" | ")}. Rendering an "unknown severity" marker \u2014 a health marker must never silently disappear. If this came from a backend rollup, map it to the shell's vocabulary at the fetch boundary (see isSeverityTone).`
+  );
+}
+function resolveSeverity(severity, component) {
+  if (severity == null) return null;
+  if (isSeverityTone(severity)) return TONE_STYLES[severity];
+  const described = describeToken(severity);
+  reportUnknownSeverity(component, described);
+  return {
+    tone: null,
+    fill: SEVERITY_UNKNOWN_FILL,
+    ink: SEVERITY_UNKNOWN_INK,
+    word: `unrecognised severity ${described}`
+  };
+}
+function warnOnce(key, message) {
+  if (reported.has(key)) return;
+  reported.add(key);
+  console.error(message);
+}
 function SidebarGroupLabel({ children }) {
   return /* @__PURE__ */ jsx("p", { className: "px-2.5 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide text-gray-400", children });
 }
-function SidebarNavItem({ label, count, active, onClick }) {
+function SidebarNavItem({ label, count, active, onClick, severity }) {
+  const marker = resolveSeverity(severity, "SidebarNavItem");
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -7612,12 +8146,118 @@ function SidebarNavItem({ label, count, active, onClick }) {
       onClick,
       className: `flex w-full items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 text-sm text-left ${active ? "bg-blue-50 font-medium text-blue-700" : "text-gray-700 hover:bg-gray-100"}`,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+        marker && // Decorative in the a11y tree — the word itself follows the label, so
+        // the item reads "Warehouses, warning, 12" in that order instead of
+        // leading with a tone before anyone knows what it belongs to.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            title: marker.word,
+            className: `shrink-0 h-1.5 w-1.5 rounded-full ${marker.fill}`
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: marker ? "truncate mr-auto" : "truncate", children: label }),
+        marker && /* @__PURE__ */ jsx("span", { className: "sr-only", children: marker.word }),
         count != null && count > 0 && /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex items-center justify-center min-w-[1.25rem] px-1.5 h-5 rounded-full text-[11px] font-medium ${active ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-600"}`, children: count })
       ]
     }
   );
 }
+function Tick({ at, title, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      title,
+      className: `absolute -top-[3px] h-3 w-0.5 rounded-[1px] ${className}`,
+      style: { left: `${at}%` }
+    }
+  );
+}
+var clampPct = (n) => Math.min(100, Math.max(0, n));
+function MetricBar({
+  label,
+  value,
+  max = 100,
+  warn,
+  crit,
+  severity,
+  detail,
+  formatValue,
+  emptyLabel = "no data",
+  size = "sm",
+  ariaLabel,
+  className = ""
+}) {
+  const reading = value != null && Number.isFinite(value) ? value : null;
+  const scale = Number.isFinite(max) && max > 0 ? max : null;
+  if (scale == null) {
+    warnOnce(
+      `MetricBar:max:${String(max)}`,
+      `[react-os-shell] MetricBar: max=${String(max)} is not a positive finite number, so there is no scale to draw a proportional bar against. Printing the value without a bar. Pass the real capacity, or leave the reading out entirely (value={null}) when it is unknown \u2014 do not pass 0.`
+    );
+  }
+  const supplied = resolveSeverity(severity, "MetricBar");
+  const paint = reading != null ? supplied ?? styleForTone(severityOf(reading, warn, crit)) : null;
+  const warnAt = boundOf(warn);
+  const critAt = boundOf(crit);
+  const width = reading != null && scale != null ? clampPct(reading / scale * 100) : 0;
+  const format = formatValue ?? ((v) => scale === 100 ? `${v.toFixed(1)}%` : String(v));
+  const printed = reading != null ? format(reading) : "\u2014";
+  const showTicks = reading != null && scale != null && (warnAt != null || critAt != null);
+  const meterLabel = ariaLabel ?? (typeof label === "string" ? label : void 0);
+  const barHeight = size === "md" ? "h-2" : "h-1.5";
+  const isMeter = reading != null && scale != null;
+  const bar = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...isMeter ? {
+        role: "meter",
+        "aria-label": meterLabel,
+        "aria-valuemin": 0,
+        "aria-valuemax": scale,
+        // Kept inside the declared range: the bar clamps, and a valuenow
+        // past its own valuemax is an invalid widget. `aria-valuetext`
+        // still carries the unclamped truth, and takes precedence in the
+        // announcement.
+        "aria-valuenow": Math.min(scale, Math.max(0, reading)),
+        "aria-valuetext": printed
+      } : { "aria-hidden": true },
+      className: isMeter && paint ? `relative mt-2 ${barHeight} rounded-full bg-gray-200` : `relative mt-2 ${barHeight} rounded-full border border-dashed border-gray-300 bg-transparent`,
+      children: [
+        isMeter && // Grey when unjudged: the magnitude is real, the verdict is not ours.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `absolute inset-y-0 left-0 rounded-full ${paint ? paint.fill : "bg-gray-400"}`,
+            style: { width: `${width}%` }
+          }
+        ),
+        showTicks && scale != null && warnAt != null && /* @__PURE__ */ jsx(Tick, { at: clampPct(warnAt / scale * 100), title: `warning \u2265 ${warnAt}`, className: "bg-gray-400 opacity-75" }),
+        showTicks && scale != null && critAt != null && /* @__PURE__ */ jsx(Tick, { at: clampPct(critAt / scale * 100), title: `critical \u2265 ${critAt}`, className: "bg-gray-500" })
+      ]
+    }
+  );
+  const valueInk = paint ? paint.ink : reading != null ? "text-gray-900" : "text-gray-400";
+  if (size === "md") {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      label != null && /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-gray-500", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: `text-2xl font-semibold leading-[30px] tabular-nums ${valueInk}`, children: printed }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-[11px] tabular-nums text-gray-400", children: reading != null ? detail : emptyLabel })
+      ] }),
+      bar
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+      label != null && /* @__PURE__ */ jsx("span", { className: "w-14 shrink-0 truncate text-[10px] font-medium uppercase tracking-wide text-gray-500", children: label }),
+      /* @__PURE__ */ jsx("span", { className: `text-sm font-semibold tabular-nums ${valueInk}`, children: printed }),
+      /* @__PURE__ */ jsx("span", { className: "ml-auto min-w-0 truncate text-[10px] tabular-nums text-gray-400", children: reading != null ? detail : emptyLabel })
+    ] }),
+    bar
+  ] });
+}
 
 // src/utils/mergeBulkItems.ts
 function findDuplicateKeys(rows, keyRowKey) {
@@ -9700,6 +10340,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, 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, mediaFileName, mergeBulkItems, 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