react-os-shell 4.31.0 → 4.54.0

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

@@ -1,6 +1,6 @@
 import { Breadcrumbs } from './chunk-HNH7FOYB.js';
 import { SidebarLayout } from './chunk-YG45DAUT.js';
-import { useIsMobile, useShellPrefs } from './chunk-C22EFSND.js';
+import { useIsMobile, PopupMenu, PopupMenuItem, useShellPrefs } from './chunk-ZCDFNZQS.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, isValidElement, cloneElement, useContext, Fragment as Fragment$1, useSyncExternalStore } from 'react';
@@ -13,11 +13,27 @@ var BUTTON_VARIANTS = {
   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
@@ -31,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" }),
@@ -63,7 +89,18 @@ var Button = forwardRef(function Button2({
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       "aria-describedby": reasonId,
-      className: [BUTTON_BASE, BUTTON_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,
@@ -82,6 +119,7 @@ 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",
@@ -105,7 +143,12 @@ var IconButton_default = IconButton;
 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
@@ -130,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
       }
@@ -143,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;
@@ -156,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
     }
   );
@@ -201,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 }),
@@ -257,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);
@@ -391,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" })
       }
     ),
@@ -556,10 +619,23 @@ function FormField({
   return /* @__PURE__ */ jsxs("div", { className, children: [
     label && /* @__PURE__ */ jsxs("label", { id: labelId, htmlFor, className: "mb-1 block text-xs font-medium text-gray-600", children: [
       label,
-      required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+      required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-red-500", children: "*" })
     ] }),
     children,
-    error ? /* @__PURE__ */ jsx("p", { id: htmlFor ? `${htmlFor}-error` : void 0, className: "mt-1 text-[11px] text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx("p", { id: htmlFor ? `${htmlFor}-hint` : void 0, className: "mt-1 text-[11px] text-gray-400", children: hint }) : null
+    error ? (
+      // A validation message appears after the user submits, without focus
+      // moving to it. Without a live region it reaches nobody — and this is
+      // the one status message a form cannot afford to lose.
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: htmlFor ? `${htmlFor}-error` : void 0,
+          role: "alert",
+          className: "mt-1 text-[11px] text-red-600",
+          children: error
+        }
+      )
+    ) : hint ? /* @__PURE__ */ jsx("p", { id: htmlFor ? `${htmlFor}-hint` : void 0, className: "mt-1 text-[11px] text-gray-400", children: hint }) : null
   ] });
 }
 function Label({ required, children, className = "", ...rest }) {
@@ -1413,6 +1489,7 @@ var DatePicker = forwardRef(function DatePicker2({ value, onChange, min, max, in
     {
       ref,
       type: "date",
+      "aria-invalid": invalid || void 0,
       value: toInputValue(value),
       min: toInputValue(min) || void 0,
       max: toInputValue(max) || void 0,
@@ -1701,6 +1778,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) {
@@ -1710,6 +1804,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);
     }
@@ -1727,8 +1822,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,
@@ -2104,13 +2205,52 @@ var PADDING = {
   md: { body: "p-4", edge: "px-4 py-3" },
   lg: { body: "p-6", edge: "px-6 py-4" }
 };
-function Card({ children, header, footer, padded = true, padding, className = "" }) {
+function Card({
+  children,
+  header,
+  footer,
+  padded = true,
+  padding,
+  headingLevel,
+  headerActions,
+  "aria-label": ariaLabel,
+  className = "",
+  bodyClassName = "",
+  style
+}) {
   const p = PADDING[padding ?? (padded ? "md" : "none")];
-  return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border border-gray-200 bg-white shadow-sm ${className}`.trim(), children: [
-    header && /* @__PURE__ */ jsx("div", { className: `border-b border-gray-100 ${p.edge} text-sm font-semibold text-gray-900`, children: header }),
-    /* @__PURE__ */ jsx("div", { className: p.body, children }),
-    footer && /* @__PURE__ */ jsx("div", { className: `border-t border-gray-100 ${p.edge}`, children: footer })
-  ] });
+  const headingId = useId();
+  const titled = headingLevel != null && header != null;
+  const Heading = `h${headingLevel}`;
+  const named = titled || ariaLabel != null && ariaLabel !== "";
+  const Root = named ? "section" : "div";
+  const surface = `rounded-lg border border-gray-200 bg-white shadow-sm ${className}`.trim();
+  const headerCls = `border-b border-gray-100 ${p.edge} text-sm font-semibold text-gray-900`;
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      className: surface,
+      style,
+      ...titled ? { "aria-labelledby": headingId } : named ? { "aria-label": ariaLabel } : {},
+      children: [
+        header != null && (headerActions != null ? (
+          // With actions the row has to be a flex container, so the heading is
+          // nested rather than being the row itself — and only the title is
+          // inside it.
+          /* @__PURE__ */ jsxs("div", { className: `${headerCls} flex items-center justify-between gap-3`, children: [
+            titled ? /* @__PURE__ */ jsx(Heading, { id: headingId, children: header }) : /* @__PURE__ */ jsx("span", { children: header }),
+            headerActions
+          ] })
+        ) : titled ? (
+          // Without them the heading carries the row's own styling rather than
+          // nesting a second element, so the title is not two boxes deep.
+          /* @__PURE__ */ jsx(Heading, { id: headingId, className: headerCls, children: header })
+        ) : /* @__PURE__ */ jsx("div", { className: headerCls, children: header })),
+        /* @__PURE__ */ jsx("div", { className: [p.body, bodyClassName].filter(Boolean).join(" "), children }),
+        footer && /* @__PURE__ */ jsx("div", { className: `border-t border-gray-100 ${p.edge}`, children: footer })
+      ]
+    }
+  );
 }
 function StatCard({ label, value, icon, delta, className = "" }) {
   const deltaColor = delta?.direction === "up" ? "text-green-600" : delta?.direction === "down" ? "text-red-600" : "text-gray-500";
@@ -2336,7 +2476,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;
@@ -2361,7 +2502,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
@@ -2642,49 +2783,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,
@@ -2789,11 +2970,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",
@@ -2819,6 +2995,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,
@@ -2830,12 +3036,14 @@ 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 }),
@@ -3854,6 +4062,133 @@ function TopNav({ items, activeKey, onSelect, brand, actions, className }) {
     }
   );
 }
+function DropdownMenu({
+  trigger,
+  items,
+  align = "end",
+  "aria-label": ariaLabel,
+  className = "",
+  disabled
+}) {
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const wrapRef = useRef(null);
+  const triggerRef = useRef(null);
+  const itemRefs = useRef([]);
+  const menuId = useId();
+  const close = useCallback((restoreFocus) => {
+    setOpen(false);
+    if (restoreFocus) triggerRef.current?.focus();
+  }, []);
+  const enabledFrom = (from, step) => {
+    for (let i = 0; i < items.length; i += 1) {
+      const at = ((from + step * i) % items.length + items.length) % items.length;
+      if (!items[at]?.disabled) return at;
+    }
+    return from;
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (!wrapRef.current?.contains(e.target)) close(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, close]);
+  useEffect(() => {
+    if (open) itemRefs.current[active]?.focus();
+  }, [open, active]);
+  useEffect(() => {
+    if (!open) return;
+    return registerModalEscapeInterceptor((event) => {
+      if (event.key !== "Escape") return false;
+      close(true);
+      return true;
+    });
+  }, [open, close]);
+  const openAt = (index) => {
+    setActive(index);
+    setOpen(true);
+  };
+  const onTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openAt(enabledFrom(0, 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      openAt(enabledFrom(items.length - 1, -1));
+    }
+  };
+  const onMenuKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive(enabledFrom(active + 1, 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive(enabledFrom(active - 1, -1));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActive(enabledFrom(0, 1));
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActive(enabledFrom(items.length - 1, -1));
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      close(true);
+    }
+  };
+  const select = (item) => {
+    if (item.disabled) return;
+    close(true);
+    item.onSelect();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: `relative inline-flex ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        "aria-label": ariaLabel,
+        disabled,
+        onClick: () => open ? close(false) : openAt(enabledFrom(0, 1)),
+        onKeyDown: onTriggerKeyDown,
+        className: "inline-flex items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 disabled:cursor-not-allowed disabled:opacity-60",
+        children: trigger
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute top-full z-50 mt-1 ${align === "end" ? "right-0" : "left-0"}`,
+        onKeyDown: onMenuKeyDown,
+        children: /* @__PURE__ */ jsx(PopupMenu, { portal: false, minWidth: 180, children: /* @__PURE__ */ jsx("div", { id: menuId, role: "menu", "aria-orientation": "vertical", "aria-label": ariaLabel, children: items.map((item, i) => /* @__PURE__ */ jsxs(
+          PopupMenuItem,
+          {
+            ref: (el) => {
+              itemRefs.current[i] = el;
+            },
+            role: "menuitem",
+            tabIndex: i === active ? 0 : -1,
+            danger: item.danger,
+            disabled: item.disabled,
+            onMouseEnter: () => {
+              if (!item.disabled) setActive(i);
+            },
+            onClick: () => select(item),
+            children: [
+              item.icon,
+              item.label
+            ]
+          },
+          item.key
+        )) }) })
+      }
+    )
+  ] });
+}
 var SIZE_PX2 = { sm: 320, md: 448, lg: 640 };
 var SIDE_POSITION = {
   right: "inset-y-0 right-0",
@@ -4297,6 +4632,7 @@ 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 isGroup = (h) => Array.isArray(h.columns);
 var PAD = {
   sm: "px-2 py-1.5",
   md: "px-3 py-2"
@@ -4319,6 +4655,7 @@ function DataTable({
   sort = null,
   onSortChange,
   pagination,
+  caption,
   loading = false,
   bordered = false,
   size = "md",
@@ -4336,13 +4673,52 @@ function DataTable({
     if (!onSortChange) return;
     const field = fieldOf(col);
     const current = directionFor(col);
-    if (current === null) onSortChange({ field, direction: "asc" });
-    else if (current === "asc") onSortChange({ field, direction: "desc" });
+    const first = col.sortFirst ?? "asc";
+    const second = first === "asc" ? "desc" : "asc";
+    if (current === null) onSortChange({ field, direction: first });
+    else if (current === first) onSortChange({ field, direction: second });
     else onSortChange(null);
   };
+  const leaves = columns.flatMap((h) => isGroup(h) ? h.columns : [h]);
+  const grouped = columns.some(isGroup);
   const cellBase = `${PAD[size]} ${size === "sm" ? "text-xs" : "text-sm"}`;
+  const headerCell = (col, ci, rowSpan) => {
+    const dir = directionFor(col);
+    const align = ALIGN2[col.align ?? (col.numeric ? "right" : "left")];
+    const pinned = col.fixed === "left";
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        rowSpan: rowSpan > 1 ? rowSpan : void 0,
+        "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : col.sortable && onSortChange ? "none" : void 0,
+        style: { width: col.width, ...pinned ? { left: offsets[ci] ?? 0 } : {} },
+        className: [
+          cellBase,
+          align,
+          "font-semibold uppercase tracking-wide text-gray-500",
+          size === "sm" ? "text-[10px]" : "text-xs",
+          pinned ? "sticky z-10 bg-gray-50" : "",
+          col.headerClassName ?? ""
+        ].filter(Boolean).join(" "),
+        children: col.sortable && onSortChange ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggleSort(col),
+            className: `inline-flex items-center font-semibold uppercase tracking-wide hover:text-gray-700 ${align}`,
+            children: [
+              col.title,
+              /* @__PURE__ */ jsx(SortIcon, { direction: dir })
+            ]
+          }
+        ) : col.title
+      },
+      col.key
+    );
+  };
   let fixedOffset = 0;
-  const offsets = columns.map((col) => {
+  const offsets = leaves.map((col) => {
     if (col.fixed !== "left") return null;
     const at = fixedOffset;
     fixedOffset += col.width ?? 0;
@@ -4358,56 +4734,56 @@ function DataTable({
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
       ] }),
       /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse tabular-nums", style: minWidth ? { minWidth } : void 0, children: [
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 bg-gray-50", children: columns.map((col, ci) => {
-          const dir = directionFor(col);
-          const align = ALIGN2[col.align ?? "left"];
-          const pinned = col.fixed === "left";
-          return /* @__PURE__ */ jsx(
-            "th",
-            {
-              scope: "col",
-              "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : void 0,
-              style: {
-                width: col.width,
-                ...pinned ? { left: offsets[ci] ?? 0 } : {}
-              },
-              className: [
-                cellBase,
-                align,
-                "font-semibold uppercase tracking-wide text-gray-500",
-                size === "sm" ? "text-[10px]" : "text-xs",
-                pinned ? "sticky z-10 bg-gray-50" : "",
-                col.headerClassName ?? ""
-              ].filter(Boolean).join(" "),
-              children: col.sortable && onSortChange ? /* @__PURE__ */ jsxs(
-                "button",
+        caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+        /* @__PURE__ */ jsxs("thead", { children: [
+          /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 bg-gray-50", children: columns.map((h, hi) => {
+            if (isGroup(h)) {
+              return /* @__PURE__ */ jsx(
+                "th",
                 {
-                  type: "button",
-                  onClick: () => toggleSort(col),
-                  className: `inline-flex items-center font-semibold uppercase tracking-wide hover:text-gray-700 ${align}`,
-                  children: [
-                    col.title,
-                    /* @__PURE__ */ jsx(SortIcon, { direction: dir })
-                  ]
-                }
-              ) : col.title
-            },
-            col.key
-          );
-        }) }) }),
-        /* @__PURE__ */ jsx("tbody", { children: data.length === 0 && !loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: `${cellBase} py-10 text-center text-gray-500`, children: emptyText }) }) : data.map((row, i) => {
+                  scope: "colgroup",
+                  colSpan: h.columns.length,
+                  className: [
+                    cellBase,
+                    "text-center",
+                    "font-semibold uppercase tracking-wide text-gray-500",
+                    size === "sm" ? "text-[10px]" : "text-xs",
+                    "border-b border-gray-200",
+                    h.headerClassName ?? ""
+                  ].filter(Boolean).join(" "),
+                  children: h.title
+                },
+                h.key ?? `group-${hi}`
+              );
+            }
+            return headerCell(h, leaves.indexOf(h), grouped ? 2 : 1);
+          }) }),
+          grouped && /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 bg-gray-50", children: columns.flatMap((h) => isGroup(h) ? h.columns : []).map(
+            (col) => headerCell(col, leaves.indexOf(col), 1)
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("tbody", { children: data.length === 0 && !loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: leaves.length, className: `${cellBase} py-10 text-center text-gray-500`, children: emptyText }) }) : data.map((row, i) => {
           const rowProps = onRow?.(row, i);
           return /* @__PURE__ */ jsx(
             "tr",
             {
               onClick: rowProps?.onClick,
+              ...rowProps?.onClick ? {
+                tabIndex: 0,
+                onKeyDown: (e) => {
+                  if (e.target !== e.currentTarget) return;
+                  if (e.key !== "Enter" && e.key !== " ") return;
+                  e.preventDefault();
+                  rowProps.onClick?.();
+                }
+              } : {},
               className: [
                 "border-b border-gray-100 last:border-b-0",
-                rowProps?.onClick ? "cursor-pointer hover:bg-gray-50" : "",
+                rowProps?.onClick ? "cursor-pointer hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400" : "",
                 rowClassName?.(row, i) ?? "",
                 rowProps?.className ?? ""
               ].filter(Boolean).join(" "),
-              children: columns.map((col, ci) => {
+              children: leaves.map((col, ci) => {
                 const pinned = col.fixed === "left";
                 return /* @__PURE__ */ jsx(
                   "td",
@@ -4415,7 +4791,8 @@ function DataTable({
                     style: pinned ? { left: offsets[ci] ?? 0 } : void 0,
                     className: [
                       cellBase,
-                      ALIGN2[col.align ?? "left"],
+                      ALIGN2[col.align ?? (col.numeric ? "right" : "left")],
+                      col.numeric ? "font-mono" : "",
                       "text-gray-900",
                       col.ellipsis ? "max-w-0 truncate" : "",
                       // A pinned cell needs its own background or the
@@ -5137,16 +5514,13 @@ var COPY2 = {
   404: { title: "Page not found", body: "The page you're looking for doesn't exist or was moved." },
   500: { title: "Something went wrong", body: "An unexpected error occurred. Please try again." }
 };
-function ErrorPage({ code = 404 }) {
+function ErrorPage({ code = 404, actions }) {
   const c = COPY2[code];
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center bg-gray-50 p-6 text-center", children: [
     /* @__PURE__ */ jsx("div", { className: "text-7xl font-bold tracking-tight text-gray-400", children: code }),
     /* @__PURE__ */ jsx("h1", { className: "mt-2 text-xl font-semibold text-gray-900", children: c.title }),
     /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-sm text-sm text-gray-500", children: c.body }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Button_default, { variant: "secondary", children: "Go back" }),
-      /* @__PURE__ */ jsx(Button_default, { children: "Take me home" })
-    ] })
+    actions && /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center gap-2", children: actions })
   ] });
 }
 function subscribeMediaQuery(cb) {
@@ -5282,6 +5656,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, 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
+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, DropdownMenu, 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-3SUSQHOW.js.map
+//# sourceMappingURL=chunk-3SUSQHOW.js.map