react-os-shell 4.21.1 → 4.31.0

package/dist/{chunk-XBV7NUZK.js → chunk-7NIFBQUX.js}

@@ -1,13 +1,14 @@
+import { Breadcrumbs } from './chunk-HNH7FOYB.js';
 import { SidebarLayout } from './chunk-YG45DAUT.js';
 import { useIsMobile, useShellPrefs } from './chunk-C22EFSND.js';
-import { registerModalEscapeInterceptor, useFocusTrap, useScrollLock } from './chunk-L2O6B5KT.js';
+import { registerModalEscapeInterceptor, useFocusTrap, useScrollLock } from './chunk-OXLLRKBC.js';
 import { glassStyle } from './chunk-3CUSBZWG.js';
-import { forwardRef, useId, useCallback, useState, useRef, useEffect, createContext, useLayoutEffect, useMemo, Children, useContext, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { forwardRef, useId, useCallback, useState, useRef, useEffect, createContext, useLayoutEffect, useMemo, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
-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 VARIANTS = {
+var BUTTON_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 BUTTON_VARIANTS = {
   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",
@@ -62,7 +63,7 @@ var Button = forwardRef(function Button2({
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       "aria-describedby": reasonId,
-      className: [BASE, VARIANTS[variant], SIZES[size], block ? "w-full" : "", className].filter(Boolean).join(" "),
+      className: [BUTTON_BASE, BUTTON_VARIANTS[variant], SIZES[size], block ? "w-full" : "", className].filter(Boolean).join(" "),
       ...rest,
       children: [
         loading ? /* @__PURE__ */ jsx(Spinner, {}) : leftIcon,
@@ -78,6 +79,27 @@ var Button = forwardRef(function Button2({
   ] });
 });
 var Button_default = Button;
+var SQUARE = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+  "touch-sm": "h-11 w-11",
+  "touch": "h-14 w-14",
+  "touch-lg": "h-16 w-16",
+  "touch-xl": "h-20 w-20"
+};
+var IconButton = forwardRef(function IconButton2({ children, variant = "ghost", size = "md", type = "button", className = "", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: [BUTTON_BASE, BUTTON_VARIANTS[variant], SQUARE[size], "shrink-0 p-0", className].filter(Boolean).join(" "),
+      ...rest,
+      children
+    }
+  );
+});
+var IconButton_default = IconButton;
 
 // src/forms/styles.ts
 var INPUT_SHAPE_PRE = "block w-full rounded-md border border-gray-300 bg-white";
@@ -451,34 +473,33 @@ var Select = forwardRef(function Select2(props, ref) {
 });
 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) {
+var Checkbox = forwardRef(function Checkbox2({ checked, onChange, indeterminate = false, label, description, disabled, className = "", ...rest }, ref) {
+  const inner = useRef(null);
+  useEffect(() => {
+    if (inner.current) inner.current.indeterminate = indeterminate;
+  }, [indeterminate, checked]);
+  const attachRef = useCallback((node) => {
+    inner.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const input = (extra = "") => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: attachRef,
+      type: "checkbox",
+      checked,
+      disabled,
+      onChange: (e) => onChange(e.target.checked),
+      className: `${BOX} ${extra}`.trim(),
+      ...rest
+    }
+  );
   if (!label && !description) {
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        type: "checkbox",
-        checked,
-        disabled,
-        onChange: (e) => onChange(e.target.checked),
-        className: `${BOX} ${className}`.trim(),
-        ...rest
-      }
-    );
+    return input(className);
   }
   return /* @__PURE__ */ jsxs("label", { className: `flex items-start gap-2 ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"} ${className}`.trim(), children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        type: "checkbox",
-        checked,
-        disabled,
-        onChange: (e) => onChange(e.target.checked),
-        className: `${BOX} mt-0.5`,
-        ...rest
-      }
-    ),
+    input("mt-0.5"),
     /* @__PURE__ */ jsxs("span", { className: "text-sm leading-tight", children: [
       label && /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: label }),
       description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-gray-500", children: description })
@@ -1372,6 +1393,36 @@ function DateRangePicker({
     )
   ] });
 }
+var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+function toInputValue(value) {
+  if (value === null || value === void 0 || value === "") return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : toISODate(value);
+  if (ISO_DATE.test(value)) return value;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? "" : toISODate(parsed);
+}
+function fromInputValue(raw) {
+  if (!ISO_DATE.test(raw)) return null;
+  const [year, month, day] = raw.split("-").map(Number);
+  const date = new Date(year, month - 1, day);
+  return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+var DatePicker = forwardRef(function DatePicker2({ value, onChange, min, max, invalid, size, className = "", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "date",
+      value: toInputValue(value),
+      min: toInputValue(min) || void 0,
+      max: toInputValue(max) || void 0,
+      onChange: (event) => onChange?.(fromInputValue(event.target.value)),
+      className: inputClasses({ invalid, size, className }),
+      ...rest
+    }
+  );
+});
+var DatePicker_default = DatePicker;
 
 // src/forms/keypadInput.ts
 var MAX_FRACTION_DIGITS = 2;
@@ -1559,7 +1610,7 @@ var TRAVEL = {
   md: "translate-x-5",
   touch: "translate-x-6"
 };
-function Switch({
+var Switch = forwardRef(function Switch2({
   checked,
   onChange,
   disabled = false,
@@ -1567,14 +1618,16 @@ function Switch({
   label,
   hint,
   id,
-  className = ""
-}) {
+  className = "",
+  ...rest
+}, ref) {
   const generated = useId();
   const switchId = id ?? generated;
   const hintId = hint ? `${switchId}-hint` : void 0;
   const control = /* @__PURE__ */ jsx(
     "button",
     {
+      ref,
       id: switchId,
       type: "button",
       role: "switch",
@@ -1582,6 +1635,7 @@ function Switch({
       "aria-describedby": hintId,
       disabled,
       onClick: () => onChange(!checked),
+      ...rest,
       className: [
         "relative inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors",
         "focus:outline-none focus:ring-2 focus:ring-blue-400/40",
@@ -1609,7 +1663,8 @@ function Switch({
       hint && /* @__PURE__ */ jsx("span", { id: hintId, className: "mt-0.5 block text-xs text-gray-500", children: hint })
     ] })
   ] });
-}
+});
+var Switch_default = Switch;
 var format = (v, precision) => v == null ? "" : precision != null ? v.toFixed(precision) : String(v);
 function parse(text) {
   const t = text.trim();
@@ -2202,6 +2257,7 @@ function Divider({
   spacing = "md",
   className = ""
 }) {
+  const labelId = useId();
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "span",
@@ -2216,11 +2272,31 @@ function Divider({
   }
   const before = align === "left" ? "w-4 shrink-0" : "flex-1";
   const after = align === "right" ? "w-4 shrink-0" : "flex-1";
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 ${SPACING[spacing]} ${className}`.trim(), children: [
-    /* @__PURE__ */ jsx("span", { className: `${before} border-t border-gray-200` }),
-    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs font-medium text-gray-500", children }),
-    /* @__PURE__ */ jsx("span", { className: `${after} border-t border-gray-200` })
-  ] });
+  return (
+    // `role="separator"` because the <hr> above cannot be used once there is a
+    // label to place inside the rule — and losing the element must not mean
+    // losing what it meant. The two rules either side are decoration.
+    //
+    // The name is pointed at explicitly. `separator` takes its name from the
+    // AUTHOR only — it is not one of the roles that names itself from its
+    // contents — so the label sitting inside the element did NOT become the
+    // separator's accessible name, and the rule was announced unnamed with the
+    // text loose beside it. `aria-labelledby` is what actually attaches it.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "aria-labelledby": labelId,
+        className: `flex items-center gap-3 ${SPACING[spacing]} ${className}`.trim(),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `${before} border-t border-gray-200` }),
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "shrink-0 text-xs font-medium text-gray-500", children }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `${after} border-t border-gray-200` })
+        ]
+      }
+    )
+  );
 }
 var SHAPE = {
   text: "rounded",
@@ -2337,13 +2413,21 @@ function Result({
   className = ""
 }) {
   const tone = STATUS_TONE[status];
-  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center px-6 py-12 text-center ${className}`.trim(), children: [
-    /* @__PURE__ */ jsx("div", { className: `flex h-14 w-14 items-center justify-center rounded-full ${TONE_CLASS[tone]}`, children: icon ?? /* @__PURE__ */ jsx(StatusIcon, { tone }) }),
-    /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-semibold text-gray-900", children: title ?? DEFAULT_TITLE[status] ?? "" }),
-    subTitle && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-md text-sm text-gray-500", children: subTitle }),
-    children && /* @__PURE__ */ jsx("div", { className: "mt-4 w-full max-w-md text-left", children }),
-    extra && /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap items-center justify-center gap-3", children: extra })
-  ] });
+  const announces = tone === "error";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: announces ? "alert" : void 0,
+      className: `flex flex-col items-center justify-center px-6 py-12 text-center ${className}`.trim(),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `flex h-14 w-14 items-center justify-center rounded-full ${TONE_CLASS[tone]}`, children: icon ?? /* @__PURE__ */ jsx(StatusIcon, { tone }) }),
+        /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-semibold text-gray-900", children: title ?? DEFAULT_TITLE[status] ?? "" }),
+        subTitle && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-md text-sm text-gray-500", children: subTitle }),
+        children && /* @__PURE__ */ jsx("div", { className: "mt-4 w-full max-w-md text-left", children }),
+        extra && /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap items-center justify-center gap-3", children: extra })
+      ]
+    }
+  );
 }
 var TONE2 = {
   danger: "bg-red-600 text-white",
@@ -2429,23 +2513,49 @@ function initials(name) {
 function Avatar({ src, name, size = "md", status, className = "" }) {
   const px = SIZE_PX[size];
   const dot = Math.max(8, Math.round(px * 0.28));
-  return /* @__PURE__ */ jsxs("span", { className: `relative inline-flex shrink-0 ${className}`.trim(), style: { width: px, height: px }, children: [
-    src ? /* @__PURE__ */ jsx("img", { src, alt: name ?? "", className: "h-full w-full rounded-full object-cover" }) : /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "flex h-full w-full items-center justify-center rounded-full bg-gray-100 font-medium text-gray-600",
-        style: { fontSize: Math.round(px * 0.4) },
-        children: initials(name)
-      }
-    ),
-    status && /* @__PURE__ */ jsx(
+  const [broken, setBroken] = useState(false);
+  useEffect(() => {
+    setBroken(false);
+  }, [src]);
+  const showImage = Boolean(src) && !broken;
+  return (
+    // The role and the name live on the wrapper rather than on the <img>, so
+    // that an avatar showing initials is announced the same way as one showing
+    // a photo. The inner image is then decoration and takes an empty alt.
+    /* @__PURE__ */ jsxs(
       "span",
       {
-        className: `absolute bottom-0 right-0 rounded-full ring-2 ring-white ${STATUS_COLOR[status]}`,
-        style: { width: dot, height: dot }
+        className: `relative inline-flex shrink-0 ${className}`.trim(),
+        style: { width: px, height: px },
+        ...name ? { role: "img", "aria-label": name } : { "aria-hidden": true },
+        children: [
+          showImage ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: "",
+              onError: () => setBroken(true),
+              className: "h-full w-full rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex h-full w-full items-center justify-center rounded-full bg-gray-100 font-medium text-gray-600",
+              style: { fontSize: Math.round(px * 0.4) },
+              children: initials(name)
+            }
+          ),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `absolute bottom-0 right-0 rounded-full ring-2 ring-white ${STATUS_COLOR[status]}`,
+              style: { width: dot, height: dot }
+            }
+          )
+        ]
       }
     )
-  ] });
+  );
 }
 function AvatarGroup({ children, max, size = "md", className = "" }) {
   const items = Children.toArray(children);
@@ -2642,17 +2752,29 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
     setShow(false);
   };
   useEffect(() => () => window.clearTimeout(timer.current), []);
+  useEffect(() => {
+    if (!show) return;
+    return registerModalEscapeInterceptor((event) => {
+      if (event.key !== "Escape") return false;
+      close();
+      return true;
+    });
+  }, [show]);
+  const describedBy = show ? id : void 0;
+  const trigger = isValidElement(children) ? cloneElement(children, {
+    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
+  }) : children;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       className: "relative inline-flex",
-      "aria-describedby": show ? id : void 0,
+      "aria-describedby": isValidElement(children) ? void 0 : describedBy,
       onMouseEnter: open,
       onMouseLeave: close,
       onFocus: open,
       onBlur: close,
       children: [
-        children,
+        trigger,
         show && /* @__PURE__ */ jsx(
           "span",
           {
@@ -2720,15 +2842,29 @@ function EmptyState({
     children && /* @__PURE__ */ jsx("div", { className: "mt-4", children })
   ] });
 }
-function PageHeader({ title, description, subtitle, actions, children }) {
+function PageHeader({
+  title,
+  description,
+  subtitle,
+  actions,
+  children,
+  icon,
+  breadcrumbs
+}) {
   const desc = description ?? subtitle;
   const right = actions ?? children;
-  return /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-start justify-between gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: title }),
-      desc && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: desc })
-    ] }),
-    right && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: right })
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs, className: "mb-3" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("h1", { className: "flex items-center gap-2 text-xl font-semibold text-gray-900", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-gray-400", children: icon }),
+          title
+        ] }),
+        desc && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: desc })
+      ] }),
+      right && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: right })
+    ] })
   ] });
 }
 function LoadingSpinner({ size = "md", padding = "py-12", label, className = "" }) {
@@ -3627,7 +3763,7 @@ function HelpCenter({
     ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: loading ? "Loading\u2026" : "Pick a help article from the left." }) }) })
   ] });
 }
-var VARIANTS2 = {
+var VARIANTS = {
   primary: "bg-blue-600 text-white hover:bg-blue-700",
   secondary: "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"
 };
@@ -3648,7 +3784,7 @@ function SidebarActionButton({
       onClick,
       disabled,
       title,
-      className: `w-full inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 ${VARIANTS2[variant]} ${className}`,
+      className: `w-full inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 ${VARIANTS[variant]} ${className}`,
       children: [
         children,
         hotkey && /* @__PURE__ */ jsx("kbd", { className: "rounded border border-blue-400/50 bg-blue-500/30 px-1.5 py-0.5 text-[10px] font-medium", children: hotkey })
@@ -3737,6 +3873,7 @@ function Drawer({
   className = ""
 }) {
   const panelRef = useRef(null);
+  const bodyId = useId();
   useFocusTrap(panelRef, open, initialFocus);
   useScrollLock(open);
   useEffect(() => {
@@ -3759,6 +3896,7 @@ function Drawer({
         role: "dialog",
         "aria-modal": "true",
         "aria-label": typeof title === "string" ? title : void 0,
+        "aria-describedby": children ? bodyId : void 0,
         style: panelStyle,
         className: [
           "fixed flex flex-col bg-white shadow-xl",
@@ -3780,13 +3918,144 @@ function Drawer({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 py-4", children }),
+          /* @__PURE__ */ jsx("div", { id: bodyId, className: "min-h-0 flex-1 overflow-y-auto px-4 py-4", children }),
           footer && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 justify-end gap-3 border-t border-gray-100 px-4 py-3", children: footer })
         ]
       }
     )
   ] });
 }
+var DEFAULT_MAGNIFIER = "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z";
+function GlobalSearch({ providers, typeIcons, placeholder = "Search...", onSelect } = {}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const inputRef = useRef(null);
+  const debounceRef = useRef();
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+      if (e.key === "Escape" && open) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    } else {
+      setQuery("");
+      setResults([]);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (query.length < 2) {
+      setResults([]);
+      return;
+    }
+    if (!providers || providers.length === 0) {
+      setResults([]);
+      return;
+    }
+    debounceRef.current = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const responses = await Promise.all(providers.map((p) => p(query).catch(() => [])));
+        setResults(responses.flat());
+        setActiveIdx(0);
+      } catch {
+        setResults([]);
+      }
+      setLoading(false);
+    }, 250);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, providers]);
+  const handleSelect = useCallback((result) => {
+    setOpen(false);
+    onSelect?.(result);
+  }, [onSelect]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIdx((i) => Math.min(i + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && results[activeIdx]) {
+      handleSelect(results[activeIdx]);
+    }
+  };
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[200] flex items-start justify-center pt-[15vh]", onClick: () => setOpen(false), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-xl rounded-2xl overflow-hidden", onClick: (e) => e.stopPropagation(), style: glassStyle(), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-gray-200", children: [
+        /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 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: DEFAULT_MAGNIFIER }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            className: "flex-1 text-sm bg-transparent border-0 outline-none placeholder-gray-400"
+          }
+        ),
+        /* @__PURE__ */ jsx("kbd", { className: "hidden sm:inline-flex items-center rounded border border-gray-300 px-1.5 py-0.5 text-[10px] font-medium text-gray-400", children: "ESC" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "max-h-[50vh] overflow-y-auto", children: [
+        loading && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "Searching..." }),
+        !loading && query.length >= 2 && results.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "No results found." }),
+        !loading && results.length > 0 && /* @__PURE__ */ jsx("ul", { className: "py-2", children: results.map((r, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `flex items-center gap-3 w-full px-4 py-2.5 text-left transition-colors ${i === activeIdx ? "bg-blue-50" : "hover:bg-gray-50"}`,
+            onClick: () => handleSelect(r),
+            onMouseEnter: () => setActiveIdx(i),
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: typeIcons?.[r.type] || DEFAULT_MAGNIFIER }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: r.label }),
+                r.sub && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 truncate", children: r.sub })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500", children: r.type })
+            ]
+          }
+        ) }, `${r.type}-${r.label}-${i}`)) }),
+        !loading && query.length < 2 && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "Type at least 2 characters to search..." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-gray-100 bg-gray-50 text-[11px] text-gray-400", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "\u2191" }),
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "\u2193" }),
+            " navigate"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "Enter" }),
+            " open"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "Esc" }),
+          " close"
+        ] })
+      ] })
+    ] })
+  ] });
+}
 function Kanban({
   items,
   columns,
@@ -5013,6 +5282,6 @@ var ALT_SHIFT_D = isMac ? "\u2325\u21E7D" : "Alt+Shift+D";
 var ALT_SHIFT_E = isMac ? "\u2325\u21E7E" : "Alt+Shift+E";
 var ALT_SHIFT_N = isMac ? "\u2325\u21E7N" : "Alt+Shift+N";
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, Button_default, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CMD_SHIFT_Z, CMD_Z, Card, ChatTemplate, Checkbox_default, CheckoutTemplate, ColoredBadge, ContainerFillChart, CountBadge, DashboardTemplate, DataTable, DataTablePage, DateRangePicker, DescriptionList, Divider, DonutChart, Drawer, ENTER, EmailTemplate, EmptyState, ErrorPage, FilePicker, FormField, FormLayoutPage, GalleryTemplate, Grid, HelpCenter, INPUT_BASE, INPUT_SIZES, Inline, InputNumber_default, Input_default, Kanban, Label, ListFooter, ListLoadError, LoadingSpinner, MAX_FRACTION_DIGITS, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, PageHeader, Pagination, Paragraph, Radio_default, Result, SHIFT, SearchableSelect, Segmented, Select_default, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Sparkline, Stack, StatCard, Statistic, StatusBadge, StatusBadgeProvider, Switch, Tabs, Text, Textarea_default, TileButton_default, Title, Tooltip, TopNav, appendKey, applyThemePrefs, backspace, firstEnabledIndex, formatDate, inputClasses, isMac, isSeverityTone, lastEnabledIndex, matchTypeahead, mediaFileName, nextEnabledIndex, resolveTheme, severityOf, toISODate, useClickOutside, useTheme };
-//# sourceMappingURL=chunk-XBV7NUZK.js.map
-//# sourceMappingURL=chunk-XBV7NUZK.js.map
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, Button_default, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CMD_SHIFT_Z, CMD_Z, Card, ChatTemplate, Checkbox_default, CheckoutTemplate, ColoredBadge, ContainerFillChart, CountBadge, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DescriptionList, Divider, DonutChart, Drawer, ENTER, EmailTemplate, EmptyState, ErrorPage, FilePicker, FormField, FormLayoutPage, GalleryTemplate, GlobalSearch, Grid, HelpCenter, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, ListFooter, ListLoadError, LoadingSpinner, MAX_FRACTION_DIGITS, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, PageHeader, Pagination, Paragraph, Radio_default, Result, SHIFT, SearchableSelect, Segmented, Select_default, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Sparkline, Stack, StatCard, Statistic, StatusBadge, StatusBadgeProvider, Switch_default, Tabs, Text, Textarea_default, TileButton_default, Title, Tooltip, TopNav, appendKey, applyThemePrefs, backspace, firstEnabledIndex, formatDate, inputClasses, isMac, isSeverityTone, lastEnabledIndex, matchTypeahead, mediaFileName, nextEnabledIndex, resolveTheme, severityOf, toISODate, useClickOutside, useTheme };
+//# sourceMappingURL=chunk-7NIFBQUX.js.map
+//# sourceMappingURL=chunk-7NIFBQUX.js.map