react-os-shell 4.21.1 → 4.41.0

package/dist/{chunk-XBV7NUZK.js → chunk-D4WFGAUW.js}

@@ -1,22 +1,39 @@
+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",
   "ghost-danger": "text-red-600 hover:bg-red-50 focus:ring-red-400/30",
-  danger: "bg-red-600 text-white shadow-sm hover:bg-red-700 focus:ring-red-400/40"
+  danger: "bg-red-600 text-white shadow-sm hover:bg-red-700 focus:ring-red-400/40",
+  /**
+   * A button that reads as a link: no box, no padding, underlined on hover.
+   * For an action that belongs in running text or beside a field — "Forgot
+   * your password?", "Use a different address" — where a boxed button would
+   * claim more of the page than the action deserves.
+   *
+   * It is still a <button>. Anything that NAVIGATES should be an anchor, so it
+   * can be middle-clicked and read off the status bar; this is for actions
+   * that merely look quiet.
+   */
+  link: "text-blue-600 underline-offset-4 hover:underline focus:ring-blue-400/30"
 };
 var SIZES = {
   sm: "gap-1 px-2.5 py-1 text-xs",
   md: "gap-1.5 px-3 py-1.5 text-sm",
+  // `py-2.5`, not `py-2`: this rung has to come out 40px to match IconButton's
+  // `h-10`, which is the promise IconButton's docblock makes for every rung.
+  // `py-2` gives 36px (20px line box + 8px twice) and puts a 4px step between a
+  // Button and an IconButton sitting in the same row.
+  lg: "gap-2 px-4 py-2.5 text-sm",
   // 44px is the WCAG 2.5.5 floor, and a floor is not a comfortable size. Use it
   // ONLY for chrome that sits outside the task — switching screens, ending a
   // shift — and never on the path someone is actually working through. It
@@ -30,6 +47,16 @@ var SIZES = {
   "touch-xl": "gap-3 h-20 px-8 text-2xl"
   // 80px — keypad keys, tender
 };
+var LINK_BASE = "inline-flex items-center font-medium transition-colors focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60";
+var LINK_SIZES = {
+  sm: "gap-1 text-xs",
+  md: "gap-1.5 text-sm",
+  lg: "gap-2 text-sm",
+  "touch-sm": "gap-1.5 text-base",
+  "touch": "gap-2 text-base",
+  "touch-lg": "gap-2 text-lg",
+  "touch-xl": "gap-3 text-2xl"
+};
 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" }),
@@ -62,7 +89,18 @@ 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: [
+        // `link` takes the base WITHOUT the box: no rounding, no padding from
+        // the size table. It cannot cancel those by overriding — two padding
+        // utilities in one class attribute resolve by compiled-stylesheet
+        // order, not by the order they were written — so it never receives
+        // them, and keeps only the size's gap and text size.
+        variant === "link" ? LINK_BASE : BUTTON_BASE,
+        BUTTON_VARIANTS[variant],
+        variant === "link" ? LINK_SIZES[size] : SIZES[size],
+        block ? "w-full" : "",
+        className
+      ].filter(Boolean).join(" "),
       ...rest,
       children: [
         loading ? /* @__PURE__ */ jsx(Spinner, {}) : leftIcon,
@@ -78,12 +116,39 @@ var Button = forwardRef(function Button2({
   ] });
 });
 var Button_default = Button;
+var SQUARE = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+  lg: "h-10 w-10",
+  "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";
 var INPUT_SHAPE_POST = "text-gray-800 placeholder:text-gray-400 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/30";
 var INPUT_SIZES = {
+  // The desktop rungs carry no explicit height: a text control's height should
+  // follow its own font, or a long label wraps out of a box that was pinned.
+  // The touch rung does carry one, for the same reason Button's does.
+  sm: "px-2.5 py-1 text-xs",
   md: "px-3 py-1.5 text-sm",
+  lg: "px-3.5 py-2 text-base",
   // 56px, matching Button's `touch`. `text-base` is 16px BY AGREEMENT with the
   // rule in ui.css that forces `font-size: 16px !important` on every form
   // control under `(pointer: coarse)` — the rule that stops iOS zooming the
@@ -108,6 +173,7 @@ var Input = forwardRef(function Input2({ invalid, leftIcon, rightAdornment, size
       "input",
       {
         ref,
+        "aria-invalid": invalid || void 0,
         className: inputClasses({ invalid, size, className: [pad2, className].filter(Boolean).join(" ") }),
         ...rest
       }
@@ -121,7 +187,7 @@ var Input = forwardRef(function Input2({ invalid, leftIcon, rightAdornment, size
   ] });
 });
 var Input_default = Input;
-var Textarea = forwardRef(function Textarea2({ invalid, autoGrow, className = "", onInput, rows = 3, ...rest }, ref) {
+var Textarea = forwardRef(function Textarea2({ invalid, autoGrow, className = "", onInput, rows = 3, size, ...rest }, ref) {
   const handleInput = useCallback((e) => {
     if (autoGrow) {
       const el = e.currentTarget;
@@ -134,9 +200,10 @@ var Textarea = forwardRef(function Textarea2({ invalid, autoGrow, className = ""
     "textarea",
     {
       ref,
+      "aria-invalid": invalid || void 0,
       rows,
       onInput: handleInput,
-      className: inputClasses({ invalid, className: `${autoGrow ? "resize-none overflow-hidden" : ""} ${className}`.trim() }),
+      className: inputClasses({ invalid, size, className: `${autoGrow ? "resize-none overflow-hidden" : ""} ${className}`.trim() }),
       ...rest
     }
   );
@@ -179,14 +246,15 @@ function matchTypeahead(options, buffer, fromIndex) {
 var MENU_GAP = 4;
 var VIEWPORT_MARGIN = 8;
 var MENU_MAX_HEIGHT = 240;
-var NativeSelect = forwardRef(function NativeSelect2({ value, onChange, options, placeholder, invalid, className = "", ...rest }, ref) {
+var NativeSelect = forwardRef(function NativeSelect2({ value, onChange, options, placeholder, invalid, className = "", size, ...rest }, ref) {
   return /* @__PURE__ */ jsxs(
     "select",
     {
       ref,
       value,
       onChange: (e) => onChange(e.target.value),
-      className: inputClasses({ invalid, className: `pr-8 ${className}`.trim() }),
+      "aria-invalid": invalid || void 0,
+      className: inputClasses({ invalid, size, className: `pr-8 ${className}`.trim() }),
       ...rest,
       children: [
         placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
@@ -235,7 +303,21 @@ function useAnchoredPosition(triggerRef, open) {
   }, [open, triggerRef]);
   return pos;
 }
-var ListboxSelect = forwardRef(function ListboxSelect2({ value, onChange, options, placeholder, invalid, className = "", id, disabled, ...rest }, ref) {
+var ListboxSelect = forwardRef(function ListboxSelect2({
+  value,
+  onChange,
+  options,
+  placeholder,
+  invalid,
+  className = "",
+  id,
+  disabled,
+  size,
+  "aria-describedby": describedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": labelledBy,
+  ...rest
+}, ref) {
   const [open, setOpen] = useState(false);
   const [active, setActive] = useState(-1);
   const wrapRef = useRef(null);
@@ -369,10 +451,13 @@ var ListboxSelect = forwardRef(function ListboxSelect2({ value, onChange, option
         "aria-controls": open ? listboxId : void 0,
         "aria-activedescendant": open && active >= 0 ? optionId(active) : void 0,
         "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy,
+        "aria-label": ariaLabel,
+        "aria-labelledby": labelledBy,
         disabled,
         onClick: () => open ? close() : openList(),
         onKeyDown,
-        className: inputClasses({ invalid, className: `pr-8 text-left ${className}`.trim() }),
+        className: inputClasses({ invalid, size, className: `pr-8 text-left ${className}`.trim() }),
         children: /* @__PURE__ */ jsx("span", { className: `block truncate ${selectedLabel === void 0 ? "text-gray-400" : ""}`, children: selectedLabel ?? placeholder ?? "\xA0" })
       }
     ),
@@ -451,34 +536,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 +1456,37 @@ 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",
+      "aria-invalid": invalid || void 0,
+      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 +1674,7 @@ var TRAVEL = {
   md: "translate-x-5",
   touch: "translate-x-6"
 };
-function Switch({
+var Switch = forwardRef(function Switch2({
   checked,
   onChange,
   disabled = false,
@@ -1567,14 +1682,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 +1699,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 +1727,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();
@@ -1646,6 +1765,23 @@ var InputNumber = forwardRef(function InputNumber2({
     setText(next);
     onChange(parse(next));
   };
+  const bump = (by) => {
+    const from = parse(textRef.current) ?? 0;
+    let next = from + by;
+    if (min != null && next < min) next = min;
+    if (max != null && next > max) next = max;
+    const places = precision ?? String(step ?? 1).split(".")[1]?.length ?? 0;
+    next = Number(next.toFixed(places));
+    setText(format(next, precision));
+    onChange(next);
+  };
+  const handleKeyDown = (event) => {
+    const unit = step ?? 1;
+    const by = event.key === "ArrowUp" ? unit : event.key === "ArrowDown" ? -unit : event.key === "PageUp" ? unit * 10 : event.key === "PageDown" ? -unit * 10 : null;
+    if (by === null || disabled) return;
+    event.preventDefault();
+    bump(by);
+  };
   const handleBlur = () => {
     const parsed = parse(text);
     if (parsed == null) {
@@ -1655,6 +1791,7 @@ var InputNumber = forwardRef(function InputNumber2({
       let v = parsed;
       if (min != null && v < min) v = min;
       if (max != null && v > max) v = max;
+      if (precision != null) v = Number(v.toFixed(precision));
       setText(format(v, precision));
       if (v !== parsed) onChange(v);
     }
@@ -1672,8 +1809,14 @@ var InputNumber = forwardRef(function InputNumber2({
       disabled,
       placeholder,
       step,
+      role: "spinbutton",
+      "aria-valuenow": value ?? void 0,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuetext": value == null ? void 0 : format(value, precision),
       "aria-invalid": invalid || void 0,
       onChange: (e) => handleChange(e.target.value),
+      onKeyDown: handleKeyDown,
       onBlur: handleBlur,
       className: inputClasses({
         invalid,
@@ -2202,6 +2345,7 @@ function Divider({
   spacing = "md",
   className = ""
 }) {
+  const labelId = useId();
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "span",
@@ -2216,11 +2360,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",
@@ -2260,7 +2424,8 @@ function DescriptionList({
   bordered = false,
   size = "md",
   title,
-  className = ""
+  className = "",
+  emptyText: empty = "\u2014"
 }) {
   const resolved = typeof columns === "number" ? { base: columns } : columns;
   const base = resolved.base ?? 1;
@@ -2285,7 +2450,7 @@ function DescriptionList({
         ].filter(Boolean).join(" "),
         children: [
           /* @__PURE__ */ jsx("dt", { className: `${text} text-gray-500`, children: item.label }),
-          /* @__PURE__ */ jsx("dd", { className: `mt-0.5 min-w-0 break-words ${text} text-gray-900`, children: item.value })
+          /* @__PURE__ */ jsx("dd", { className: `mt-0.5 min-w-0 break-words ${text} text-gray-900`, children: item.value === null || item.value === void 0 || item.value === "" ? empty : item.value })
         ]
       },
       item.key ?? i
@@ -2337,13 +2502,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 +2602,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);
@@ -2532,49 +2731,89 @@ function Banner({
     }
   );
 }
-function Tabs({ items, value, onChange, variant = "underline", className = "" }) {
+var tabButtonId = (prefix, id) => `${prefix}-tab-${id}`;
+var tabPanelId = (prefix, id) => `${prefix}-panel-${id}`;
+var LIST_CLASS = {
+  underline: "flex items-center gap-1 border-b border-gray-200",
+  pill: "inline-flex items-center gap-1 rounded-lg bg-gray-100 p-1"
+};
+function tabClass(variant, active) {
   if (variant === "pill") {
-    return /* @__PURE__ */ jsx("div", { role: "tablist", className: `inline-flex items-center gap-1 rounded-lg bg-gray-100 p-1 ${className}`.trim(), children: items.map((t) => {
-      const active = t.id === value;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          role: "tab",
-          "aria-selected": active,
-          tabIndex: active ? 0 : -1,
-          disabled: t.disabled,
-          onClick: () => onChange(t.id),
-          className: `inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active ? "bg-blue-600 text-white shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
-          children: [
-            t.icon,
-            t.label
-          ]
-        },
-        t.id
-      );
-    }) });
+    return `inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active ? "bg-blue-600 text-white shadow-sm" : "text-gray-600 hover:text-gray-900"}`;
   }
-  return /* @__PURE__ */ jsx("div", { role: "tablist", className: `flex items-center gap-1 border-b border-gray-200 ${className}`.trim(), children: items.map((t) => {
-    const active = t.id === value;
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        role: "tab",
-        "aria-selected": active,
-        tabIndex: active ? 0 : -1,
-        disabled: t.disabled,
-        onClick: () => onChange(t.id),
-        className: `-mb-px inline-flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active ? "border-blue-600 text-blue-600" : "border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-900"}`,
-        children: [
-          t.icon,
-          t.label
-        ]
-      },
-      t.id
-    );
-  }) });
+  return `-mb-px inline-flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active ? "border-blue-600 text-blue-600" : "border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-900"}`;
+}
+function Tabs({
+  items,
+  value,
+  onChange,
+  variant = "underline",
+  idPrefix,
+  className = "",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const buttons = useRef([]);
+  const step = (from, direction) => {
+    for (let i = 1; i <= items.length; i += 1) {
+      const at = ((from + direction * i) % items.length + items.length) % items.length;
+      if (!items[at]?.disabled) return at;
+    }
+    return null;
+  };
+  const edge = (direction) => {
+    const order = direction === 1 ? items.map((_, i) => i) : items.map((_, i) => items.length - 1 - i);
+    for (const i of order) if (!items[i]?.disabled) return i;
+    return null;
+  };
+  const onKeyDown = (event) => {
+    const current = items.findIndex((t) => t.id === value);
+    let next = null;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") next = step(current, 1);
+    else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = step(current, -1);
+    else if (event.key === "Home") next = edge(1);
+    else if (event.key === "End") next = edge(-1);
+    else return;
+    event.preventDefault();
+    if (next === null || next === current) return;
+    onChange(items[next].id);
+    buttons.current[next]?.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      onKeyDown,
+      className: `${LIST_CLASS[variant]} ${className}`.trim(),
+      children: items.map((t, i) => {
+        const active = t.id === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              buttons.current[i] = el;
+            },
+            type: "button",
+            role: "tab",
+            id: idPrefix ? tabButtonId(idPrefix, t.id) : void 0,
+            "aria-controls": idPrefix ? tabPanelId(idPrefix, t.id) : void 0,
+            "aria-selected": active,
+            tabIndex: active ? 0 : -1,
+            disabled: t.disabled,
+            onClick: () => onChange(t.id),
+            className: tabClass(variant, active),
+            children: [
+              t.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0", children: t.icon }),
+              t.label
+            ]
+          },
+          t.id
+        );
+      })
+    }
+  );
 }
 function Accordion({
   items,
@@ -2642,17 +2881,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",
           {
@@ -2667,11 +2918,6 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
     }
   );
 }
-function ColoredBadge({ colorClass, children, size = "sm", capitalize = false }) {
-  const sizeCls = size === "xs" ? "px-2 py-0.5 text-[10px]" : size === "md" ? "px-2.5 py-0.5 text-xs" : "px-2 py-0.5 text-xs";
-  const capCls = capitalize ? "capitalize" : "";
-  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full font-medium ${sizeCls} ${capCls} ${colorClass}`, children });
-}
 var GROUP_COLORS = {
   success: "bg-green-100 text-green-800",
   active: "bg-blue-100 text-blue-800",
@@ -2697,6 +2943,36 @@ function StatusBadge({ status }) {
   const label = status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${color}`, children: label });
 }
+function ColoredBadge({
+  colorClass,
+  tone,
+  children,
+  size = "sm",
+  capitalize = false,
+  closable = false,
+  onClose,
+  closeLabel,
+  className = ""
+}) {
+  const colour = colorClass ?? GROUP_COLORS[tone ?? "neutral"];
+  const sizeCls = size === "xs" ? "px-2 py-0.5 text-[10px]" : size === "md" ? "px-2.5 py-0.5 text-xs" : "px-2 py-0.5 text-xs";
+  const capCls = capitalize ? "capitalize" : "";
+  const closeName = closeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
+  const closeSize = size === "xs" ? "h-2.5 w-2.5" : "h-3 w-3";
+  return /* @__PURE__ */ jsxs("span", { className: ["inline-flex items-center rounded-full font-medium", sizeCls, capCls, colour, className].filter(Boolean).join(" "), children: [
+    children,
+    closable && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        "aria-label": closeName,
+        className: "-mr-0.5 ml-1 inline-flex shrink-0 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-blue-400/40",
+        children: /* @__PURE__ */ jsx("svg", { className: closeSize, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+      }
+    )
+  ] });
+}
 function EmptyState({
   title,
   message,
@@ -2708,27 +2984,43 @@ function EmptyState({
   children
 }) {
   const v = frameless ? "none" : variant ?? "dashed";
-  const showIcon = icon ?? v !== "card";
+  const custom = typeof icon !== "boolean" && icon != null ? icon : null;
+  const showIcon = custom ? false : icon ?? v !== "card";
   const primary = message ?? (title ? void 0 : "Nothing here yet.");
   const secondary = description ?? hint;
   const frame = v === "card" ? "rounded-md border border-gray-200 bg-white px-6 py-12" : v === "none" ? "px-6 py-12" : "rounded-lg border-2 border-dashed border-gray-300 px-6 py-12";
   return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center text-center ${frame}`, children: [
-    showIcon && /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-gray-300 mb-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }),
+    custom && /* @__PURE__ */ jsx("div", { className: "mb-3 flex h-10 w-10 items-center justify-center text-gray-300", "aria-hidden": "true", children: custom }),
+    showIcon && /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-gray-300 mb-3", "aria-hidden": "true", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }),
     title && /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: title }),
     primary && /* @__PURE__ */ jsx("p", { className: `text-sm text-gray-500 ${title ? "mt-2" : ""}`, children: primary }),
     secondary && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 mt-1", children: secondary }),
     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 +3919,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 +3940,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 +4029,7 @@ function Drawer({
   className = ""
 }) {
   const panelRef = useRef(null);
+  const bodyId = useId();
   useFocusTrap(panelRef, open, initialFocus);
   useScrollLock(open);
   useEffect(() => {
@@ -3759,6 +4052,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 +4074,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 +5438,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, GROUP_COLORS, 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, tabButtonId, tabPanelId, toISODate, useClickOutside, useTheme };
+//# sourceMappingURL=chunk-D4WFGAUW.js.map
+//# sourceMappingURL=chunk-D4WFGAUW.js.map