efficient-shell 4.132.0 → 4.137.0

package/dist/{chunk-BJ34QOR3.js → chunk-YA4EE7ST.js}

@@ -1,35 +1,26 @@
-import { Breadcrumbs } from './chunk-CGXMWHQW.js';
-import { SidebarLayout } from './chunk-FONEQRBH.js';
+import { Breadcrumbs } from './chunk-5RPTS3BT.js';
+import { SidebarLayout } from './chunk-R7QGMK6N.js';
 import { BrandMark } from './chunk-TRCWINHF.js';
-import { toast_default } from './chunk-EENVXIVU.js';
-import { useIsMobile, useShortcutLabel, useShellPrefs } from './chunk-TQURTLK2.js';
-import { useFileIntake, humanSize, FileIntakeAlert } from './chunk-CLGNTGC5.js';
-import { BUTTON_BASE, BUTTON_VARIANTS, Button_default } from './chunk-LQTVTOSY.js';
-import { PopupMenu, PopupMenuItem } from './chunk-E3TWIN7Z.js';
-import { registerModalEscapeInterceptor, onOverlayOpen, Z_LAYERS, useDismissPopupsOnOpen, useFocusTrap, useScrollLock } from './chunk-XH3ELPQZ.js';
-import { glassStyle } from './chunk-D276EMXS.js';
-import { useShellLocale, useShellStrings, DEFAULT_SHELL_STRINGS, currentShellStrings, formatPlain, formatFixed, formatPercent, splitAround } from './chunk-7IN7YZAL.js';
+import { toast_default } from './chunk-UTYKLGGT.js';
+import { useIsMobile, useShortcutLabel, useShellPrefs } from './chunk-HUBJAUGG.js';
+import { useFileIntake, humanSize, FileIntakeAlert } from './chunk-YDHXWCCJ.js';
+import { iconButtonClasses, Button_default } from './chunk-RT6DSB5Y.js';
+import { PopupMenu, PopupMenuDivider, PopupMenuLabel, itemLook } from './chunk-JOPU6WPY.js';
+import { registerModalEscapeInterceptor, onOverlayOpen, Z_LAYERS, useDismissPopupsOnOpen, useFocusTrap, useScrollLock } from './chunk-I2TAAJHS.js';
+import { glassStyle, glassFill } from './chunk-6XJEJWNJ.js';
+import { useShellLocale, useShellStrings, DEFAULT_SHELL_STRINGS, currentShellStrings, formatPlain, formatFixed, formatPercent, splitAround } from './chunk-YE6GUDGP.js';
 import { useBrowserLayoutEffect, useBrowserValue, useBrowserValueOnce } from './chunk-IRWSRJ4K.js';
 import { forwardRef, useCallback, useState, useRef, useId, useEffect, createContext, useMemo, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, Component, useSyncExternalStore, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
-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(" "),
+      className: iconButtonClasses({ variant, size, className }),
       ...rest,
       children
     }
@@ -130,11 +121,142 @@ function popupBounds(trigger) {
     bottom: Math.min(viewport.bottom, rect.bottom)
   };
 }
+var OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+var ACROSS = {
+  top: ["right", "left"],
+  bottom: ["right", "left"],
+  left: ["top", "bottom"],
+  right: ["top", "bottom"]
+};
+function roomAround(anchor, bounds, gap) {
+  return {
+    top: anchor.top - gap - (bounds.top + VIEWPORT_MARGIN),
+    bottom: bounds.bottom - VIEWPORT_MARGIN - (anchor.bottom + gap),
+    left: anchor.left - gap - (bounds.left + VIEWPORT_MARGIN),
+    right: bounds.right - VIEWPORT_MARGIN - (anchor.right + gap)
+  };
+}
+var within = (value, lo, hi) => Math.max(lo, Math.min(value, hi));
+function placeBeside(anchor, size, side, bounds, gap) {
+  const room = roomAround(anchor, bounds, gap);
+  const spare = (s) => room[s] - (s === "top" || s === "bottom" ? size.height : size.width);
+  const order = [side, OPPOSITE[side], ...ACROSS[side]];
+  const chosen = order.find((s) => spare(s) >= 0) ?? order.reduce((best, s) => spare(s) > spare(best) ? s : best);
+  const centreX = (anchor.left + anchor.right) / 2;
+  const centreY = (anchor.top + anchor.bottom) / 2;
+  let left;
+  let top;
+  switch (chosen) {
+    case "top":
+      left = centreX - size.width / 2;
+      top = anchor.top - gap - size.height;
+      break;
+    case "bottom":
+      left = centreX - size.width / 2;
+      top = anchor.bottom + gap;
+      break;
+    case "left":
+      left = anchor.left - gap - size.width;
+      top = centreY - size.height / 2;
+      break;
+    case "right":
+      left = anchor.right + gap;
+      top = centreY - size.height / 2;
+      break;
+  }
+  return {
+    side: chosen,
+    left: within(left, bounds.left + VIEWPORT_MARGIN, bounds.right - VIEWPORT_MARGIN - size.width),
+    top: within(top, bounds.top + VIEWPORT_MARGIN, bounds.bottom - VIEWPORT_MARGIN - size.height)
+  };
+}
+function placeArrow(anchor, placed, size, inset, depth) {
+  const { side, left, top } = placed;
+  const right = left + size.width;
+  const bottom = top + size.height;
+  const clearance = {
+    top: anchor.top - bottom,
+    bottom: top - anchor.bottom,
+    left: anchor.left - right,
+    right: left - anchor.right
+  }[side];
+  if (clearance < depth) return null;
+  const along = (target, start, length) => length < 2 * inset ? start + length / 2 : Math.max(start + inset, Math.min(target, start + length - inset));
+  const centreX = (anchor.left + anchor.right) / 2;
+  const centreY = (anchor.top + anchor.bottom) / 2;
+  switch (side) {
+    case "top":
+      return { side, x: along(centreX, left, size.width), y: bottom };
+    case "bottom":
+      return { side, x: along(centreX, left, size.width), y: top };
+    case "left":
+      return { side, x: right, y: along(centreY, top, size.height) };
+    case "right":
+      return { side, x: left, y: along(centreY, top, size.height) };
+  }
+}
+function followAnchor(anchor, onMove, watch) {
+  let lastLeft = NaN, lastTop = NaN, lastRight = NaN, lastBottom = NaN, lastWatched = NaN;
+  const remember = () => {
+    const rect = anchor()?.getBoundingClientRect();
+    if (!rect) return false;
+    const watched = watch ? watch() : NaN;
+    const moved = rect.left !== lastLeft || rect.top !== lastTop || rect.right !== lastRight || rect.bottom !== lastBottom || watched !== lastWatched && !(Number.isNaN(watched) && Number.isNaN(lastWatched));
+    lastLeft = rect.left;
+    lastTop = rect.top;
+    lastRight = rect.right;
+    lastBottom = rect.bottom;
+    lastWatched = watched;
+    return moved;
+  };
+  remember();
+  const run = () => {
+    remember();
+    onMove();
+  };
+  let raf = requestAnimationFrame(function tick() {
+    if (remember()) onMove();
+    raf = requestAnimationFrame(tick);
+  });
+  window.addEventListener("scroll", run, true);
+  window.addEventListener("resize", run);
+  return () => {
+    cancelAnimationFrame(raf);
+    window.removeEventListener("scroll", run, true);
+    window.removeEventListener("resize", run);
+  };
+}
+function placeMenu({ trigger, menu, bounds, align, side }) {
+  const room = roomAround(trigger, bounds, MENU_GAP);
+  const other = side === "bottom" ? "top" : "bottom";
+  const chosen = menu.height > room[side] && (menu.height <= room[other] || room[other] > room[side]) ? other : side;
+  const maxHeight = Math.max(Math.min(menu.height, 96), room[chosen]);
+  const height = Math.min(menu.height, maxHeight);
+  const top = within(
+    chosen === "bottom" ? trigger.bottom + MENU_GAP : trigger.top - MENU_GAP - height,
+    bounds.top + VIEWPORT_MARGIN,
+    bounds.bottom - VIEWPORT_MARGIN - height
+  );
+  const maxWidth = Math.max(0, bounds.right - bounds.left - 2 * VIEWPORT_MARGIN);
+  const width = Math.min(menu.width, maxWidth);
+  const left = within(
+    align === "start" ? trigger.left : trigger.right - width,
+    bounds.left + VIEWPORT_MARGIN,
+    bounds.right - VIEWPORT_MARGIN - width
+  );
+  return { left, top, side: chosen, maxHeight, maxWidth };
+}
 function useDropdownPosition(triggerRef, open, options = {}) {
   const {
     matchTriggerWidth = false,
     preferredMaxWidth = POPUP_MAX_WIDTH,
-    preferredMaxHeight = MENU_MAX_HEIGHT
+    preferredMaxHeight = MENU_MAX_HEIGHT,
+    popupRef
   } = options;
   const [pos, setPos] = useState(null);
   useBrowserLayoutEffect(() => {
@@ -142,15 +264,10 @@ function useDropdownPosition(triggerRef, open, options = {}) {
       setPos(null);
       return;
     }
-    let lastLeft = NaN, lastTop = NaN, lastRight = NaN, lastBottom = NaN;
     const compute = () => {
       const trigger = triggerRef.current;
       const rect = trigger?.getBoundingClientRect();
       if (!rect) return;
-      lastLeft = rect.left;
-      lastTop = rect.top;
-      lastRight = rect.right;
-      lastBottom = rect.bottom;
       const bounds = popupBounds(trigger);
       const spaceBelow = bounds.bottom - rect.bottom - MENU_GAP - VIEWPORT_MARGIN;
       const spaceAbove = rect.top - bounds.top - MENU_GAP - VIEWPORT_MARGIN;
@@ -170,6 +287,13 @@ function useDropdownPosition(triggerRef, open, options = {}) {
           Math.max(bounds.left + VIEWPORT_MARGIN, rect.left),
           bounds.right - VIEWPORT_MARGIN - width
         );
+      } else if (popupRef && bounds.right - VIEWPORT_MARGIN - rect.left < next.maxWidth && Math.min(rect.right, bounds.right - VIEWPORT_MARGIN) - bounds.left - VIEWPORT_MARGIN < next.maxWidth) {
+        const measured = popupRef.current?.offsetWidth ?? 0;
+        const width = measured > 0 ? Math.min(measured, next.maxWidth) : next.maxWidth;
+        next.left = Math.max(
+          bounds.left + VIEWPORT_MARGIN,
+          Math.min(rect.left, bounds.right - VIEWPORT_MARGIN - width)
+        );
       } else if (bounds.right - VIEWPORT_MARGIN - rect.left < next.maxWidth) {
         const rightEdge = Math.min(rect.right, bounds.right - VIEWPORT_MARGIN);
         next.right = window.innerWidth - rightEdge;
@@ -185,21 +309,12 @@ function useDropdownPosition(triggerRef, open, options = {}) {
       setPos(next);
     };
     compute();
-    let raf = requestAnimationFrame(function tick() {
-      const rect = triggerRef.current?.getBoundingClientRect();
-      if (rect && (rect.left !== lastLeft || rect.top !== lastTop || rect.right !== lastRight || rect.bottom !== lastBottom)) {
-        compute();
-      }
-      raf = requestAnimationFrame(tick);
-    });
-    window.addEventListener("scroll", compute, true);
-    window.addEventListener("resize", compute);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("scroll", compute, true);
-      window.removeEventListener("resize", compute);
-    };
-  }, [open, triggerRef, matchTriggerWidth, preferredMaxWidth, preferredMaxHeight]);
+    return followAnchor(
+      () => triggerRef.current,
+      compute,
+      popupRef ? () => popupRef.current?.offsetWidth ?? NaN : void 0
+    );
+  }, [open, triggerRef, matchTriggerWidth, preferredMaxWidth, preferredMaxHeight, popupRef]);
   return pos;
 }
 
@@ -1535,6 +1650,22 @@ function calendarNames(locale) {
   localeNames.set(locale, names);
   return names;
 }
+var weekStarts = /* @__PURE__ */ new Map();
+function firstDayOfWeek(locale) {
+  if (!locale) return 0;
+  let first = weekStarts.get(locale);
+  if (first === void 0) {
+    first = 0;
+    try {
+      const tag = new Intl.Locale(locale);
+      const info = typeof tag.getWeekInfo === "function" ? tag.getWeekInfo() : tag.weekInfo;
+      if (info?.firstDay === 1) first = 1;
+    } catch {
+    }
+    weekStarts.set(locale, first);
+  }
+  return first;
+}
 var pad = (n) => String(n).padStart(2, "0");
 function toKey(d) {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
@@ -1576,7 +1707,7 @@ function Calendar({
   month,
   defaultMonth,
   onMonthChange,
-  weekStartsOn = 0,
+  weekStartsOn: weekStartsOnProp,
   quickJump = true,
   "aria-label": ariaLabel,
   className = ""
@@ -1585,7 +1716,10 @@ function Calendar({
   const todayKey = useBrowserValue(readTodayKey, null);
   const today = fromKey(todayKey);
   const strings = useShellStrings().calendar;
-  const names = calendarNames(useShellLocale());
+  const locale = useShellLocale();
+  const names = calendarNames(locale);
+  const localeWeekStart = useBrowserValue(() => firstDayOfWeek(locale), 0);
+  const weekStartsOn = weekStartsOnProp ?? localeWeekStart;
   const openingMonth = () => {
     if (!today) return null;
     const here = monthKey(today);
@@ -1834,7 +1968,13 @@ function DateRangePicker({
   to,
   onChange,
   formatDisplay: formatDisplayProp,
-  clearable = true,
+  clearable: clearableProp,
+  required = false,
+  name,
+  id,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel,
+  weekStartsOn,
   placeholder: placeholderProp,
   fullWidth = false
 }) {
@@ -1842,16 +1982,44 @@ function DateRangePicker({
   const locale = useShellLocale();
   const formatDisplay = formatDisplayProp ?? (locale ? localeFormatDisplay(locale) : defaultFormatDisplay);
   const placeholder = placeholderProp ?? strings.placeholder;
+  const clearable = clearableProp ?? !required;
   const [open, setOpen] = useState(false);
   const [tempFrom, setTempFrom] = useState(from);
   const [tempTo, setTempTo] = useState(to);
   const [activePreset, setActivePreset] = useState(null);
   const ref = useRef(null);
+  const triggerRef = useRef(null);
   const panelRef = useRef(null);
+  const panelId = useId();
+  const descriptionId = useId();
+  const [stacked, setStacked] = useState(false);
   const pos = useDropdownPosition(ref, open, {
     preferredMaxWidth: 520,
-    preferredMaxHeight: 560
+    preferredMaxHeight: stacked ? 720 : 560,
+    popupRef: panelRef
   });
+  const sideRowRef = useRef(null);
+  const sideWidth = useRef(null);
+  useBrowserLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!open || !pos || !panel) return;
+    const style = getComputedStyle(panel);
+    const room = pos.maxWidth - (panel.offsetWidth - panel.clientWidth) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    if (!stacked) {
+      const natural = sideRowRef.current?.offsetWidth ?? 0;
+      if (natural === 0) return;
+      sideWidth.current = natural;
+      if (natural > room + 0.5) setStacked(true);
+    } else if (sideWidth.current !== null && sideWidth.current <= room) {
+      setStacked(false);
+    }
+  });
+  const [hasLabelElement, setHasLabelElement] = useState(false);
+  useBrowserLayoutEffect(() => {
+    const labelled = !!id && (triggerRef.current?.labels?.length ?? 0) > 0;
+    if (labelled !== hasLabelElement) setHasLabelElement(labelled);
+  });
+  const namedElsewhere = !!ariaLabel || !!ariaLabelledBy || hasLabelElement;
   const now = /* @__PURE__ */ new Date();
   const [viewMonth, setViewMonth] = useState(() => monthKeyOf(from ? parseDate(from) : now));
   const displayDate = (s) => s ? formatDisplay(s) : "";
@@ -1931,6 +2099,37 @@ function DateRangePicker({
     setOpen(false);
   };
   const displayText = from && to ? `${displayDate(from)} \u2014 ${displayDate(to)}` : from ? strings.fromOnly(displayDate(from)) : to ? strings.toOnly(displayDate(to)) : "";
+  const names = calendarNames(locale);
+  const spoken = (iso) => {
+    const d = fromKey(iso);
+    return d ? names.longDate(d.getFullYear(), d.getMonth(), d.getDate()) : iso;
+  };
+  const description = from && to ? strings.range(spoken(from), spoken(to)) : from ? strings.fromOnly(spoken(from)) : to ? strings.toOnly(spoken(to)) : placeholder;
+  const presetClass = (key) => stacked ? `rounded-md border px-2.5 py-1 text-sm transition-colors ${activePreset === key ? "border-blue-300 bg-blue-50 text-blue-700 font-medium" : "border-gray-200 text-gray-700 hover:bg-gray-50"}` : `text-left px-3 py-1.5 text-sm rounded-md transition-colors ${activePreset === key ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`;
+  const presets = /* @__PURE__ */ jsxs(Fragment, { children: [
+    PRESETS.map((label) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handlePreset(label), className: presetClass(label), children: strings[label] }, label)),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setActivePreset("Custom"), className: presetClass("Custom"), children: strings.custom })
+  ] });
+  const calendar = (
+    // The grid, its keyboard model and its ARIA all come from Calendar, which
+    // is also what DatePicker draws — so a range and a single date look and
+    // behave like the same control. This used to be 95 lines of hand-built
+    // cells here with no arrow keys and a day whose accessible name was its
+    // number.
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "range",
+        value: tempFrom || null,
+        endValue: tempTo || null,
+        month: viewMonth,
+        onMonthChange: setViewMonth,
+        onSelect: handleCalendarSelect,
+        weekStartsOn,
+        "aria-label": strings.dialog
+      }
+    )
+  );
   return /* @__PURE__ */ jsxs("div", { className: `relative${fullWidth ? " w-full" : ""}`, ref, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -1940,13 +2139,20 @@ function DateRangePicker({
           /* @__PURE__ */ jsxs(
             "button",
             {
+              ref: triggerRef,
               type: "button",
               onClick: handleOpen,
               "aria-haspopup": "dialog",
               "aria-expanded": open,
+              id,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": namedElsewhere ? descriptionId : void 0,
+              "aria-controls": open ? panelId : void 0,
+              "aria-required": required || void 0,
               className: `inline-flex items-center gap-2 rosh-focus-ring${fullWidth ? " min-w-0 flex-1 justify-start" : ""}`,
               children: [
-                /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+                /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
                 /* @__PURE__ */ jsx("span", { className: "truncate", children: displayText || placeholder })
               ]
             }
@@ -1964,13 +2170,20 @@ function DateRangePicker({
         ]
       }
     ),
+    namedElsewhere && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "sr-only", children: description }),
+    name && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: name.from, value: from }),
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: name.to, value: to })
+    ] }),
     open && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
         {
           ref: panelRef,
+          id: panelId,
           role: "dialog",
           "aria-label": strings.dialog,
+          "data-layout": stacked ? "stacked" : "side",
           className: "fixed rounded-2xl p-4",
           style: {
             zIndex: Z_LAYERS.popup,
@@ -1980,8 +2193,9 @@ function DateRangePicker({
             bottom: pos?.bottom,
             // The panel states its own size. `max-content` is the calendar plus
             // the presets column at whatever font size the reader has, and the
-            // cap is what the owning window allows.
-            width: "max-content",
+            // cap is what the owning window allows. Stacked, it is the cap
+            // itself: the calendar fills it, and its days are bigger targets.
+            width: stacked && pos ? pos.maxWidth : "max-content",
             maxWidth: pos?.maxWidth,
             maxHeight: pos?.maxHeight,
             overflowY: "auto",
@@ -1991,53 +2205,29 @@ function DateRangePicker({
             ...glassStyle()
           },
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: stacked ? "mb-3 flex flex-wrap items-center gap-x-4 gap-y-2" : "flex items-center gap-3 mb-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: strings.from }),
                 /* @__PURE__ */ jsx("span", { className: `text-sm px-2 py-1 rounded border min-w-[90px] ${tempFrom ? "border-blue-300 bg-blue-50 text-blue-700" : "border-gray-200 bg-gray-50 text-gray-400"}`, children: tempFrom ? displayDate(tempFrom) : strings.start })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-gray-300", children: "\u2014" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              !stacked && /* @__PURE__ */ jsx("span", { className: "text-gray-300", children: "\u2014" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: strings.to }),
                 /* @__PURE__ */ jsx("span", { className: `text-sm px-2 py-1 rounded border min-w-[90px] ${tempTo ? "border-blue-300 bg-blue-50 text-blue-700" : "border-gray-200 bg-gray-50 text-gray-400"}`, children: tempTo ? displayDate(tempTo) : strings.end })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(
-                Calendar,
-                {
-                  mode: "range",
-                  value: tempFrom || null,
-                  endValue: tempTo || null,
-                  month: viewMonth,
-                  onMonthChange: setViewMonth,
-                  onSelect: handleCalendarSelect,
-                  "aria-label": strings.dialog
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: "border-l border-gray-200 pl-4 flex flex-col gap-1 min-w-[130px]", children: [
-                PRESETS.map((label) => /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => handlePreset(label),
-                    className: `text-left px-3 py-1.5 text-sm rounded-md transition-colors ${activePreset === label ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
-                    children: strings[label]
-                  },
-                  label
-                )),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setActivePreset("Custom"),
-                    className: `text-left px-3 py-1.5 text-sm rounded-md transition-colors ${activePreset === "Custom" ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
-                    children: strings.custom
-                  }
-                )
+            stacked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-1.5", children: presets }),
+              /* @__PURE__ */ jsx("div", { className: "w-full", children: calendar })
+            ] }) : (
+              // `w-max`: the row is drawn at its natural width even in a panel
+              // capped narrower, which is what the measurement above reads.
+              /* @__PURE__ */ jsxs("div", { ref: sideRowRef, className: "flex w-max gap-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-64", children: calendar }),
+                /* @__PURE__ */ jsx("div", { className: "border-l border-gray-200 pl-4 flex flex-col gap-1 min-w-[130px]", children: presets })
               ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-3 border-t border-gray-200", children: [
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2 mt-4 pt-3 border-t border-gray-200", children: [
               clearable && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: "px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700", children: strings.clear }),
               /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(false), className: "px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50", children: strings.cancel }),
               /* @__PURE__ */ jsx(
@@ -2091,6 +2281,7 @@ var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, in
 });
 var TimePicker_default = TimePicker;
 var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+var GLOBAL_ATTRIBUTE = /^(aria|data)-/;
 function toInputValue2(value) {
   if (value === null || value === void 0 || value === "") return "";
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : toISODate(value);
@@ -2120,12 +2311,22 @@ var DatePicker = forwardRef(function DatePicker2({
   className = "",
   "aria-label": ariaLabel,
   "aria-describedby": describedBy,
+  "aria-labelledby": labelledBy,
   id,
   name,
   disabled,
   placeholder,
+  required,
+  clearable: clearableProp,
+  form,
+  title,
+  tabIndex,
+  autoFocus,
+  onFocus,
+  onBlur,
   ...rest
 }, ref) {
+  const clearable = clearableProp ?? !required;
   const current = toInputValue2(value);
   const lo = toInputValue2(min);
   const hi = toInputValue2(max);
@@ -2137,7 +2338,14 @@ var DatePicker = forwardRef(function DatePicker2({
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const panelId = useId();
-  const pos = useDropdownPosition(triggerRef, open);
+  const valueId = useId();
+  const pos = useDropdownPosition(triggerRef, open, { popupRef: panelRef });
+  const [hasLabelElement, setHasLabelElement] = useState(false);
+  useBrowserLayoutEffect(() => {
+    const labelled = !!id && (triggerRef.current?.labels?.length ?? 0) > 0;
+    if (labelled !== hasLabelElement) setHasLabelElement(labelled);
+  });
+  const describeValue = !ariaLabel && (!!labelledBy || hasLabelElement);
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (e) => {
@@ -2179,33 +2387,56 @@ var DatePicker = forwardRef(function DatePicker2({
         max: hi || void 0,
         onChange: (event) => onChange?.(fromInputValue(event.target.value)),
         className: inputClasses({ invalid, size, className }),
+        "aria-labelledby": labelledBy,
+        required,
+        form,
+        title,
+        tabIndex,
+        autoFocus,
+        onFocus,
+        onBlur,
         ...rest
       }
     );
   }
+  const triggerAttributes = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => GLOBAL_ATTRIBUTE.test(key))
+  );
+  const todayKey = toISODate(/* @__PURE__ */ new Date());
+  const todayAllowed = (!lo || todayKey >= lo) && (!hi || todayKey <= hi);
+  const placeholderText = placeholder ?? strings.placeholder;
   return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative", children: [
-    /* @__PURE__ */ jsx("input", { ref, type: "hidden", name, value: current }),
+    /* @__PURE__ */ jsx("input", { ref, type: "hidden", name, form, value: current }),
     /* @__PURE__ */ jsxs(
       "button",
       {
         ref: triggerRef,
         type: "button",
+        ...triggerAttributes,
         id,
         disabled,
+        title,
+        tabIndex,
+        autoFocus,
+        onFocus,
+        onBlur,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         "aria-controls": open ? panelId : void 0,
-        "aria-describedby": describedBy,
+        "aria-labelledby": labelledBy,
+        "aria-describedby": [describeValue ? valueId : void 0, describedBy].filter(Boolean).join(" ") || void 0,
         "aria-invalid": invalid || void 0,
+        "aria-required": required || void 0,
         "aria-label": ariaLabel ? `${ariaLabel}${current ? `, ${display(current, names)}` : ""}` : void 0,
         onClick: () => setOpen((o) => !o),
         className: `${inputClasses({ invalid, size, className })} flex items-center justify-between text-left`,
         children: [
-          /* @__PURE__ */ jsx("span", { className: current ? "text-gray-900" : "text-gray-400", children: current ? display(current, names) : placeholder ?? strings.placeholder }),
+          /* @__PURE__ */ jsx("span", { className: current ? "text-gray-900" : "text-gray-400", children: current ? display(current, names) : placeholderText }),
           /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0 text-gray-400", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3M4 11h16M5 7h14a1 1 0 011 1v11a1 1 0 01-1 1H5a1 1 0 01-1-1V8a1 1 0 011-1z" }) })
         ]
       }
     ),
+    describeValue && /* @__PURE__ */ jsx("span", { id: valueId, className: "sr-only", children: current ? display(current, names) : placeholderText }),
     open && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -2221,6 +2452,9 @@ var DatePicker = forwardRef(function DatePicker2({
             right: pos?.right,
             top: pos?.top,
             bottom: pos?.bottom,
+            // 288 px where it fits; narrower, never past the box's margins,
+            // in a box that cannot hold that.
+            maxWidth: pos?.maxWidth,
             // Hidden for the first paint until the layout effect measures the
             // trigger, so the panel never flashes at (0,0).
             visibility: pos ? void 0 : "hidden"
@@ -2240,8 +2474,8 @@ var DatePicker = forwardRef(function DatePicker2({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between border-t border-gray-100 pt-2", children: [
-              /* @__PURE__ */ jsx(
+            (clearable || todayAllowed) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between border-t border-gray-100 pt-2", children: [
+              clearable && /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -2254,7 +2488,7 @@ var DatePicker = forwardRef(function DatePicker2({
                   children: strings.clear
                 }
               ),
-              /* @__PURE__ */ jsx(
+              todayAllowed && /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -2263,7 +2497,7 @@ var DatePicker = forwardRef(function DatePicker2({
                     triggerRef.current?.focus();
                     onChange?.(/* @__PURE__ */ new Date());
                   },
-                  className: "rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50",
+                  className: "ml-auto rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50",
                   children: strings.today
                 }
               )
@@ -4227,14 +4461,21 @@ function Accordion({
   }) });
 }
 var SIDE_POS = {
-  top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
-  left: "right-full top-1/2 -translate-y-1/2 mr-1.5",
-  right: "left-full top-1/2 -translate-y-1/2 ml-1.5"
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-3",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-3",
+  left: "right-full top-1/2 -translate-y-1/2 mr-3",
+  right: "left-full top-1/2 -translate-y-1/2 ml-3"
 };
+var GAP2 = 6;
+var ARROW_DEPTH = 6;
+var ARROW_INSET = 16;
+var samePlace = (a, b) => a.left === b.left && a.top === b.top && a.maxWidth === b.maxWidth && a.maxHeight === b.maxHeight && a.side === b.side && a.arrow?.left === b.arrow?.left && a.arrow?.top === b.arrow?.top;
 function Tooltip({ content, side = "top", delay = 200, children }) {
   const [show, setShow] = useState(false);
+  const [placed, setPlaced] = useState(null);
   const timer = useRef(void 0);
+  const wrapRef = useRef(null);
+  const tipRef = useRef(null);
   const id = useId();
   const open = () => {
     timer.current = window.setTimeout(() => setShow(true), delay);
@@ -4244,6 +4485,43 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
     setShow(false);
   };
   useEffect(() => () => window.clearTimeout(timer.current), []);
+  useBrowserLayoutEffect(() => {
+    if (!show) {
+      setPlaced(null);
+      return;
+    }
+    const place = () => {
+      const wrap = wrapRef.current;
+      const tip = tipRef.current;
+      if (!wrap || !tip) return;
+      const bounds = popupBounds(wrap);
+      const maxWidth = Math.max(0, bounds.right - bounds.left - 2 * VIEWPORT_MARGIN);
+      const maxHeight = Math.max(0, bounds.bottom - bounds.top - 2 * VIEWPORT_MARGIN);
+      tip.style.maxWidth = `${maxWidth}px`;
+      tip.style.maxHeight = `${maxHeight}px`;
+      const size = tip.getBoundingClientRect();
+      if (size.width <= 0 || size.height <= 0) return;
+      const anchor = wrap.getBoundingClientRect();
+      const at = placeBeside(anchor, size, side, bounds, GAP2 + ARROW_DEPTH);
+      const point = placeArrow(anchor, at, size, ARROW_INSET, ARROW_DEPTH);
+      const next = {
+        left: at.left - anchor.left,
+        top: at.top - anchor.top,
+        maxWidth,
+        maxHeight,
+        side: at.side,
+        arrow: point && { left: point.x - anchor.left, top: point.y - anchor.top }
+      };
+      setPlaced((prev) => prev && samePlace(prev, next) ? prev : next);
+    };
+    place();
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [show, side, content]);
   useEffect(() => {
     if (!show) return;
     return registerModalEscapeInterceptor((event) => {
@@ -4256,9 +4534,12 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
   const trigger = isValidElement(children) ? cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
   }) : children;
+  const glass = show ? glassStyle() : void 0;
+  const fill = show ? glassFill() : void 0;
   return /* @__PURE__ */ jsxs(
     "span",
     {
+      ref: wrapRef,
       className: "relative inline-flex",
       "aria-describedby": isValidElement(children) ? void 0 : describedBy,
       onMouseEnter: open,
@@ -4267,15 +4548,61 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
       onBlur: close,
       children: [
         trigger,
-        show && /* @__PURE__ */ jsx(
+        show && // `w-max` rather than the `whitespace-nowrap` this was: both keep a
+        // short bubble on one line however narrow its trigger, but only
+        // `w-max` lets the width cap above take effect — a bubble longer than
+        // its window is wide wraps inside it instead of running past both
+        // edges. `whitespace-normal` and `text-start` so a trigger inside a
+        // `nowrap` or right-aligned cell does not hand the bubble its own.
+        // `box-border` so the caps measure the whole bubble, padding and
+        // border included, in a host without Tailwind's preflight.
+        // Nothing here animates, so there is no motion to reduce.
+        /* @__PURE__ */ jsx(
           "span",
           {
+            ref: tipRef,
             id,
             role: "tooltip",
-            className: `pointer-events-none absolute z-[300] whitespace-nowrap rounded-md px-2 py-1 text-xs text-gray-800 ${SIDE_POS[side]}`,
-            style: glassStyle(),
+            className: `pointer-events-none absolute z-[300] box-border w-max overflow-hidden whitespace-normal break-words text-start rounded-md px-2 py-1 text-xs text-gray-800 ${placed ? "" : SIDE_POS[side]}`,
+            style: {
+              ...glass,
+              ...placed && {
+                left: placed.left,
+                top: placed.top,
+                maxWidth: placed.maxWidth,
+                maxHeight: placed.maxHeight
+              }
+            },
             children: content
           }
+        ),
+        show && (!placed || placed.arrow) && // The arrow is the bubble's SIBLING, not its child: the bubble is
+        // `overflow: hidden` for its height cap, and an arrow inside it would
+        // be cut off at the very edge it is meant to stand out from. Drawn after
+        // the bubble on the same layer, so it lies over the bubble's border
+        // where the two meet and there is no seam.
+        //
+        // `data-side` is the side the BUBBLE is on, after any flip; ui.css
+        // turns it into which way the arrow points and which two of its edges
+        // carry the border. Unmeasured, it is the side asked for and ui.css
+        // centres the arrow there, as `SIDE_POS` centres the bubble.
+        //
+        // Decorative: the bubble's text is the description, and the arrow says
+        // nothing a screen reader needs.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "rosh-tooltip-arrow",
+            "data-side": placed?.side ?? side,
+            style: {
+              background: fill,
+              // The bubble's border as one value, for ui.css to put on the two
+              // edges that face outward — the side's own rule picks which.
+              ["--rosh-tooltip-edge"]: glass?.border,
+              ...placed?.arrow && { left: placed.arrow.left, top: placed.arrow.top }
+            }
+          }
         )
       ]
     }
@@ -4455,7 +4782,7 @@ function reportUnknownSeverity(component, described) {
   if (reported.has(key)) return;
   reported.add(key);
   console.error(
-    `[react-os-shell] ${component}: severity ${described} is not one of ${SEVERITY_TONES.join(" | ")}. Rendering an "unknown severity" marker \u2014 a health marker must never silently disappear. If this came from a backend rollup, map it to the shell's vocabulary at the fetch boundary (see isSeverityTone).`
+    `[efficient-shell] ${component}: severity ${described} is not one of ${SEVERITY_TONES.join(" | ")}. Rendering an "unknown severity" marker \u2014 a health marker must never silently disappear. If this came from a backend rollup, map it to the shell's vocabulary at the fetch boundary (see isSeverityTone).`
   );
 }
 function resolveSeverity(severity, component) {
@@ -4512,7 +4839,7 @@ function MetricBar({
   if (scale == null) {
     warnOnce(
       `MetricBar:max:${String(max)}`,
-      `[react-os-shell] MetricBar: max=${String(max)} is not a positive finite number, so there is no scale to draw a proportional bar against. Printing the value without a bar. Pass the real capacity, or leave the reading out entirely (value={null}) when it is unknown \u2014 do not pass 0.`
+      `[efficient-shell] MetricBar: max=${String(max)} is not a positive finite number, so there is no scale to draw a proportional bar against. Printing the value without a bar. Pass the real capacity, or leave the reading out entirely (value={null}) when it is unknown \u2014 do not pass 0.`
     );
   }
   const supplied = resolveSeverity(severity, "MetricBar");
@@ -8334,6 +8661,12 @@ function TopNav({ items, activeKey, onSelect, brand, actions, className }) {
     }
   );
 }
+var TRIGGER_CLASS = "inline-flex items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)] disabled:cursor-not-allowed disabled:opacity-60";
+var OWNS_Z = /(^|[\s:])!?z-/;
+var TYPEAHEAD_MS = 500;
+var CHECK = /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" }) });
+var isLink = (entry) => entry.type === "link" || entry.type === void 0 && typeof entry.href === "string";
+var isFocusable = (entry) => !!entry && entry.type !== "label" && entry.type !== "divider" && !entry.disabled;
 function DropdownMenu({
   trigger,
   items,
@@ -8341,35 +8674,84 @@ function DropdownMenu({
   side = "bottom",
   "aria-label": ariaLabel,
   className = "",
+  triggerClassName,
+  menuClassName = "",
+  minWidth = 180,
+  linkAs,
   disabled
 }) {
   const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(0);
+  const [active, setActive] = useState(-1);
   const wrapRef = useRef(null);
   const triggerRef = useRef(null);
-  const itemRefs = useRef([]);
+  const menuRef = useRef(null);
+  const typed = useRef({ text: "", at: 0 });
   const menuId = useId();
+  const triggerId = 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;
+  const focusableFrom = (from, step) => {
+    const n = items.length;
+    for (let i = 0; i < n; i += 1) {
+      const at = ((from + step * i) % n + n) % n;
+      if (isFocusable(items[at])) return at;
     }
-    return from;
+    return -1;
   };
+  const surface = () => menuRef.current?.closest("[data-popup-menu-tree]") ?? null;
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (e) => {
-      if (!wrapRef.current?.contains(e.target)) close(false);
+      const target = e.target;
+      if (wrapRef.current?.contains(target) || surface()?.contains(target)) return;
+      close(false);
     };
     document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+    const offOverlay = onOverlayOpen(() => close(false));
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      offOverlay();
+    };
   }, [open, close]);
+  const place = useCallback(() => {
+    const el = surface();
+    const anchor = triggerRef.current;
+    if (!el || !anchor) return;
+    const s = el.style;
+    s.left = "0px";
+    s.top = "0px";
+    s.maxWidth = "none";
+    s.maxHeight = "none";
+    const size = { width: el.offsetWidth, height: el.offsetHeight };
+    const at = placeMenu({
+      trigger: anchor.getBoundingClientRect(),
+      menu: size,
+      bounds: popupBounds(anchor),
+      align,
+      side
+    });
+    s.left = `${at.left}px`;
+    s.top = `${at.top}px`;
+    s.maxWidth = `${at.maxWidth}px`;
+    s.maxHeight = `${at.maxHeight}px`;
+    s.overflowY = size.height > at.maxHeight ? "auto" : "";
+    el.dataset.side = at.side;
+    el.dataset.align = align;
+  }, [align, side]);
+  useBrowserLayoutEffect(() => {
+    if (open) place();
+  });
   useEffect(() => {
-    if (open) itemRefs.current[active]?.focus();
+    if (!open) return;
+    return followAnchor(() => triggerRef.current, place);
+  }, [open, place]);
+  useEffect(() => {
+    if (!open) return;
+    const menu = menuRef.current;
+    const target = isFocusable(items[active]) ? menu?.querySelector(`[data-dropdown-index="${active}"]`) : null;
+    (target ?? menu)?.focus({ preventScroll: true });
   }, [open, active]);
   useEffect(() => {
     if (!open) return;
@@ -8386,80 +8768,212 @@ function DropdownMenu({
   const onTriggerKeyDown = (e) => {
     if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      openAt(enabledFrom(0, 1));
+      openAt(focusableFrom(0, 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      openAt(enabledFrom(items.length - 1, -1));
+      openAt(focusableFrom(items.length - 1, -1));
+    }
+  };
+  const typeahead = (e) => {
+    const now = Date.now();
+    const char = e.key.toLowerCase();
+    const text = now - typed.current.at < TYPEAHEAD_MS ? typed.current.text + char : char;
+    typed.current = { text, at: now };
+    const repeated = [...text].every((c) => c === text[0]);
+    const query = repeated ? text[0] : text;
+    const from = repeated ? active + 1 : Math.max(active, 0);
+    const menu = menuRef.current;
+    const n = items.length;
+    for (let i = 0; i < n; i += 1) {
+      const at = ((from + i) % n + n) % n;
+      if (!isFocusable(items[at])) continue;
+      const label = menu?.querySelector(`[data-dropdown-index="${at}"]`)?.textContent?.trim().toLowerCase() ?? "";
+      if (label.startsWith(query)) {
+        e.preventDefault();
+        setActive(at);
+        return;
+      }
     }
   };
   const onMenuKeyDown = (e) => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setActive(enabledFrom(active + 1, 1));
+      setActive(focusableFrom(active + 1, 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActive(enabledFrom(active - 1, -1));
+      setActive(focusableFrom(active - 1, -1));
     } else if (e.key === "Home") {
       e.preventDefault();
-      setActive(enabledFrom(0, 1));
+      setActive(focusableFrom(0, 1));
     } else if (e.key === "End") {
       e.preventDefault();
-      setActive(enabledFrom(items.length - 1, -1));
+      setActive(focusableFrom(items.length - 1, -1));
     } else if (e.key === "Tab") {
       e.preventDefault();
       close(true);
+    } else if (e.key === " ") {
+      const target = e.target;
+      if (target.matches?.("a[href]")) {
+        e.preventDefault();
+        target.click();
+      }
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      typeahead(e);
     }
   };
-  const select = (item) => {
-    if (item.disabled) return;
+  const choose = (entry) => {
+    if (entry.disabled) return;
     close(true);
-    item.onSelect();
+    entry.onSelect();
+  };
+  const Link = linkAs ?? "a";
+  const rowProps = (i, entry) => ({
+    "data-dropdown-index": i,
+    // One tab stop for the whole menu; the arrows move inside it.
+    tabIndex: i === active ? 0 : -1,
+    onMouseEnter: () => {
+      if (!entry.disabled) setActive(i);
+    }
+  });
+  const renderEntry = (entry, i) => {
+    if (entry.type === "divider") {
+      return /* @__PURE__ */ jsx("div", { role: "separator", children: /* @__PURE__ */ jsx(PopupMenuDivider, {}) }, entry.key);
+    }
+    if (entry.type === "label") {
+      return /* @__PURE__ */ jsx("div", { id: `${menuId}-label-${i}`, children: /* @__PURE__ */ jsx(PopupMenuLabel, { children: entry.label }) }, entry.key);
+    }
+    if (entry.type === "radio") {
+      const look2 = itemLook(false, entry.disabled, "");
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": entry.checked,
+          disabled: entry.disabled,
+          className: look2.className,
+          style: look2.style,
+          onClick: () => choose(entry),
+          ...rowProps(i, entry),
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex h-4 w-4 shrink-0 items-center justify-center", children: entry.checked && CHECK }),
+            entry.icon,
+            entry.label
+          ]
+        },
+        entry.key
+      );
+    }
+    if (isLink(entry)) {
+      const look2 = itemLook(false, entry.disabled, `no-underline ${entry.current ? "font-medium" : ""}`);
+      if (entry.disabled) {
+        return /* @__PURE__ */ jsxs("a", { role: "menuitem", "aria-disabled": "true", className: look2.className, style: look2.style, ...rowProps(i, entry), children: [
+          entry.icon,
+          entry.label
+        ] }, entry.key);
+      }
+      return /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: entry.href,
+          role: "menuitem",
+          "aria-current": entry.current ? "page" : void 0,
+          className: look2.className,
+          style: look2.style,
+          onClick: () => close(true),
+          ...rowProps(i, entry),
+          children: [
+            entry.icon,
+            entry.label
+          ]
+        },
+        entry.key
+      );
+    }
+    const look = itemLook(entry.danger, entry.disabled, "");
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        disabled: entry.disabled,
+        className: look.className,
+        style: look.style,
+        onClick: () => choose(entry),
+        ...rowProps(i, entry),
+        children: [
+          entry.icon,
+          entry.label
+        ]
+      },
+      entry.key
+    );
+  };
+  const renderEntries = () => {
+    const out = [];
+    for (let i = 0; i < items.length; ) {
+      const entry = items[i];
+      if (entry.type !== "radio") {
+        out.push(renderEntry(entry, i));
+        i += 1;
+        continue;
+      }
+      const start = i;
+      const run = [];
+      while (i < items.length && items[i].type === "radio") {
+        run.push(renderEntry(items[i], i));
+        i += 1;
+      }
+      const heading = items[start - 1]?.type === "label" ? `${menuId}-label-${start - 1}` : void 0;
+      out.push(/* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": heading, children: run }, `group:${entry.key}`));
+    }
+    return out;
+  };
+  const menuStyle = {
+    // The popup layer, as every portalled kit popup: above dialogs and the
+    // window stack, so a menu opened in either is drawn over it. A caller that
+    // layered it with a `z-…` class keeps its own.
+    ...OWNS_Z.test(menuClassName) ? {} : { zIndex: Z_LAYERS.popup },
+    minWidth
   };
   return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: `relative inline-flex ${className}`.trim(), children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         ref: triggerRef,
+        id: triggerId,
         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)),
+        onClick: () => open ? close(false) : openAt(focusableFrom(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 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)] disabled:cursor-not-allowed disabled:opacity-60",
+        className: triggerClassName ?? TRIGGER_CLASS,
         children: trigger
       }
     ),
-    open && /* @__PURE__ */ jsx(
+    open && // No `onClose`: PopupMenu's own dismissal calls the same callback for
+    // Escape and for a click elsewhere, and those want opposite things.
+    // Escape is the user putting the menu away, so focus goes back to the
+    // trigger; a click elsewhere is them going somewhere, and dragging
+    // focus back would take them off what they just clicked. The handlers
+    // above tell the two apart.
+    /* @__PURE__ */ jsx(PopupMenu, { portal: true, className: menuClassName, style: menuStyle, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: `absolute z-50 ${side === "top" ? "bottom-full mb-1" : "top-full mt-1"} ${align === "end" ? "right-0" : "left-0"}`,
+        ref: menuRef,
+        id: menuId,
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabel ? void 0 : triggerId,
+        tabIndex: -1,
         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
-        )) }) })
+        children: renderEntries()
       }
-    )
+    ) })
   ] });
 }
 var APP_UPDATE_POLL_MS = 6e4;
@@ -9045,11 +9559,18 @@ function DataTable({
   selection,
   footer,
   virtualized,
+  stackOnNarrow = false,
   className = ""
 }) {
   const strings = useShellStrings();
   const emptyContent = emptyText ?? strings.table.empty;
   const keyOf = (row, i) => typeof rowKey === "function" ? rowKey(row, i) : String(row[rowKey]);
+  const stack = stackOnNarrow && !virtualized;
+  const role = (r) => stack ? { role: r } : {};
+  const textOf = (title, label) => {
+    const text = label ?? (typeof title === "string" || typeof title === "number" ? String(title) : "");
+    return text.trim() || void 0;
+  };
   const [startRow, setStartRow] = useState(0);
   const overscan = virtualized?.overscan ?? 6;
   const onBodyScroll = virtualized ? (e) => {
@@ -9082,6 +9603,17 @@ function DataTable({
   };
   const leaves = columns.flatMap((h) => isGroup(h) ? h.columns : [h]);
   const grouped = columns.some(isGroup);
+  const groupOf = /* @__PURE__ */ new Map();
+  if (stack) {
+    for (const h of columns) {
+      if (isGroup(h)) for (const c of h.columns) groupOf.set(c, textOf(h.title, h.label));
+    }
+  }
+  const cardLabel = (col) => {
+    const own = textOf(col.title, col.label);
+    const group = groupOf.get(col);
+    return own && group ? `${group} \xB7 ${own}` : own;
+  };
   const selectedSet = new Set(selection?.selected ?? []);
   const pageKeys = selection ? data.map((row, i) => keyOf(row, i)) : [];
   const allSelected = pageKeys.length > 0 && pageKeys.every((k) => selectedSet.has(k));
@@ -9108,12 +9640,14 @@ function DataTable({
     const dir = directionFor(col);
     const align = ALIGN2[col.align ?? (col.numeric ? "right" : "left")];
     const pinned = col.fixed === "left";
+    const sorts = !!(col.sortable && onSortChange);
     return /* @__PURE__ */ jsx(
       "th",
       {
         scope: "col",
+        ...role("columnheader"),
         rowSpan: rowSpan > 1 ? rowSpan : void 0,
-        "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : col.sortable && onSortChange ? "none" : void 0,
+        "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : sorts ? "none" : void 0,
         style: {
           width: col.width,
           ...pinned ? { left: (offsets[ci] ?? 0) + selOffset } : {},
@@ -9128,13 +9662,17 @@ function DataTable({
           "font-semibold uppercase tracking-wide text-gray-500",
           size === "sm" ? "text-[10px]" : "text-xs",
           pinned ? virtualized ? "sticky z-20 bg-gray-50" : "sticky z-10 bg-gray-50" : virtualized ? "sticky z-10 bg-gray-50" : "",
+          // Stacked, a sortable header is one of the sort row's chips and
+          // every other header is hidden from sight — see `rosh-dt-head`.
+          stack && sorts ? "rosh-dt-sort" : "",
           col.headerClassName ?? ""
         ].filter(Boolean).join(" "),
-        children: col.sortable && onSortChange ? /* @__PURE__ */ jsxs(
+        children: sorts ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             onClick: () => toggleSort(col),
+            "data-group": stack ? groupOf.get(col) : void 0,
             className: `inline-flex items-center font-semibold uppercase tracking-wide hover:text-gray-700 ${align}`,
             children: [
               col.title,
@@ -9153,13 +9691,13 @@ function DataTable({
     fixedOffset += col.width ?? 0;
     return at;
   });
-  return /* @__PURE__ */ jsxs("div", { className, children: [
+  return /* @__PURE__ */ jsxs("div", { className: stack ? `rosh-dt-stack ${className}`.trim() : className, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         onScroll: onBodyScroll,
         style: virtualized ? { maxHeight: virtualized.height } : void 0,
-        className: `relative overflow-x-auto ${virtualized ? "overflow-y-auto" : ""} ${bordered ? "rounded-lg border border-gray-200" : ""}`.trim(),
+        className: `relative overflow-x-auto ${virtualized ? "overflow-y-auto" : ""} ${bordered ? "rounded-lg border border-gray-200" : ""}${stack ? " rosh-dt-scroll" : ""}`.trim(),
         children: [
           loading && // An overlay rather than replacing the rows: the table keeps its
           // height and its scroll position, so re-sorting does not throw the
@@ -9168,140 +9706,172 @@ function DataTable({
             /* @__PURE__ */ jsx("span", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-blue-600" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: strings.table.loading })
           ] }),
-          /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse tabular-nums", style: minWidth ? { minWidth } : void 0, children: [
-            caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
-            /* @__PURE__ */ jsxs("thead", { children: [
-              /* @__PURE__ */ jsxs("tr", { ref: headRowRef, className: "border-b border-gray-200 bg-gray-50", children: [
-                selection && /* @__PURE__ */ jsx(
-                  "th",
-                  {
-                    scope: "col",
-                    rowSpan: grouped ? 2 : void 0,
-                    style: { width: SELECT_W, ...virtualized ? { top: 0 } : {} },
-                    className: [
-                      cellBase,
-                      hasPinned || virtualized ? "sticky z-20 bg-gray-50" : "",
-                      hasPinned ? "left-0" : ""
-                    ].filter(Boolean).join(" "),
-                    children: /* @__PURE__ */ jsx(
-                      Checkbox_default,
-                      {
-                        "aria-label": strings.table.selectAll,
-                        checked: allSelected,
-                        indeterminate: someSelected && !allSelected,
-                        onChange: toggleAll
-                      }
-                    )
-                  }
-                ),
-                columns.map((h, hi) => {
-                  if (isGroup(h)) {
-                    return /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
+            "table",
+            {
+              ...role("table"),
+              className: `${stack ? "rosh-dt-table " : ""}w-full border-collapse tabular-nums`,
+              style: minWidth ? { minWidth } : void 0,
+              children: [
+                caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+                /* @__PURE__ */ jsxs("thead", { ...role("rowgroup"), className: stack ? "rosh-dt-head" : void 0, children: [
+                  /* @__PURE__ */ jsxs("tr", { ref: headRowRef, ...role("row"), className: "border-b border-gray-200 bg-gray-50", children: [
+                    selection && /* @__PURE__ */ jsx(
                       "th",
                       {
-                        scope: "colgroup",
-                        colSpan: h.columns.length,
-                        style: virtualized ? { top: 0 } : void 0,
+                        scope: "col",
+                        ...role("columnheader"),
+                        rowSpan: grouped ? 2 : void 0,
+                        style: { width: SELECT_W, ...virtualized ? { top: 0 } : {} },
                         className: [
                           cellBase,
-                          "text-center",
-                          "font-semibold uppercase tracking-wide text-gray-500",
-                          size === "sm" ? "text-[10px]" : "text-xs",
-                          "border-b border-gray-200",
-                          virtualized ? "sticky z-10 bg-gray-50" : "",
-                          h.headerClassName ?? ""
+                          hasPinned || virtualized ? "sticky z-20 bg-gray-50" : "",
+                          hasPinned ? "left-0" : "",
+                          // Stacked, "select all" leads the sort row.
+                          stack ? "rosh-dt-select" : ""
                         ].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, headRowH)
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx("tbody", { children: data.length === 0 && !loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: `${cellBase} py-10 text-center text-gray-500`, children: emptyContent }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              topPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: colCount, style: { height: topPad, padding: 0, border: 0 } }) }),
-              data.slice(start, end).map((row, si) => {
-                const i = start + si;
-                const rowProps = onRow?.(row, i);
-                return /* @__PURE__ */ jsxs(
-                  "tr",
-                  {
-                    style: virtualized ? { height: virtualized.rowHeight } : void 0,
-                    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 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--rosh-focus-ring-solid)]" : "",
-                      rowClassName?.(row, i) ?? "",
-                      rowProps?.className ?? ""
-                    ].filter(Boolean).join(" "),
-                    children: [
-                      selection && (() => {
-                        const key = keyOf(row, i);
-                        return /* @__PURE__ */ jsx(
-                          "td",
+                        children: /* @__PURE__ */ jsx(
+                          Checkbox_default,
                           {
-                            style: { width: SELECT_W },
-                            onClick: (e) => e.stopPropagation(),
-                            className: [cellBase, hasPinned ? "sticky left-0 z-10 bg-white" : ""].filter(Boolean).join(" "),
-                            children: /* @__PURE__ */ jsx(
-                              Checkbox_default,
-                              {
-                                "aria-label": strings.table.selectRow,
-                                checked: selectedSet.has(key),
-                                onChange: () => toggleRow(key)
-                              }
-                            )
+                            "aria-label": strings.table.selectAll,
+                            checked: allSelected,
+                            indeterminate: someSelected && !allSelected,
+                            onChange: toggleAll
                           }
-                        );
-                      })(),
-                      leaves.map((col, ci) => {
-                        const pinned = col.fixed === "left";
+                        )
+                      }
+                    ),
+                    columns.map((h, hi) => {
+                      if (isGroup(h)) {
                         return /* @__PURE__ */ jsx(
-                          "td",
+                          "th",
                           {
-                            style: pinned ? { left: (offsets[ci] ?? 0) + selOffset } : void 0,
+                            scope: "colgroup",
+                            ...role("columnheader"),
+                            colSpan: h.columns.length,
+                            style: virtualized ? { top: 0 } : void 0,
                             className: [
                               cellBase,
-                              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
-                              // scrolling columns show through it.
-                              pinned ? "sticky z-10 bg-white" : ""
+                              "text-center",
+                              "font-semibold uppercase tracking-wide text-gray-500",
+                              size === "sm" ? "text-[10px]" : "text-xs",
+                              "border-b border-gray-200",
+                              virtualized ? "sticky z-10 bg-gray-50" : "",
+                              h.headerClassName ?? ""
                             ].filter(Boolean).join(" "),
-                            children: col.render ? col.render(row, i) : col.dataIndex ? row[col.dataIndex] : null
+                            children: h.title
                           },
-                          col.key
+                          h.key ?? `group-${hi}`
                         );
-                      })
-                    ]
-                  },
-                  keyOf(row, i)
-                );
-              }),
-              bottomPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: colCount, style: { height: bottomPad, padding: 0, border: 0 } }) })
-            ] }) })
-          ] }),
+                      }
+                      return headerCell(h, leaves.indexOf(h), grouped ? 2 : 1);
+                    })
+                  ] }),
+                  grouped && /* @__PURE__ */ jsx("tr", { ...role("row"), 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, headRowH)
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx("tbody", { ...role("rowgroup"), className: stack ? "rosh-dt-body" : void 0, children: data.length === 0 && !loading ? /* @__PURE__ */ jsx("tr", { ...role("row"), className: stack ? "rosh-dt-empty" : void 0, children: /* @__PURE__ */ jsx("td", { ...role("cell"), colSpan: colCount, className: `${cellBase} py-10 text-center text-gray-500`, children: emptyContent }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  topPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: colCount, style: { height: topPad, padding: 0, border: 0 } }) }),
+                  data.slice(start, end).map((row, si) => {
+                    const i = start + si;
+                    const rowProps = onRow?.(row, i);
+                    return /* @__PURE__ */ jsxs(
+                      "tr",
+                      {
+                        ...role("row"),
+                        style: virtualized ? { height: virtualized.rowHeight } : void 0,
+                        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: [
+                          stack ? selection ? "rosh-dt-row rosh-dt-row-select" : "rosh-dt-row" : "",
+                          "border-b border-gray-100 last:border-b-0",
+                          rowProps?.onClick ? "cursor-pointer hover:bg-gray-50 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--rosh-focus-ring-solid)]" : "",
+                          rowClassName?.(row, i) ?? "",
+                          rowProps?.className ?? ""
+                        ].filter(Boolean).join(" "),
+                        children: [
+                          selection && (() => {
+                            const key = keyOf(row, i);
+                            return /* @__PURE__ */ jsx(
+                              "td",
+                              {
+                                ...role("cell"),
+                                style: { width: SELECT_W },
+                                onClick: (e) => e.stopPropagation(),
+                                className: [
+                                  cellBase,
+                                  hasPinned ? "sticky left-0 z-10 bg-white" : "",
+                                  stack ? "rosh-dt-select" : ""
+                                ].filter(Boolean).join(" "),
+                                children: /* @__PURE__ */ jsx(
+                                  Checkbox_default,
+                                  {
+                                    "aria-label": strings.table.selectRow,
+                                    checked: selectedSet.has(key),
+                                    onChange: () => toggleRow(key)
+                                  }
+                                )
+                              }
+                            );
+                          })(),
+                          leaves.map((col, ci) => {
+                            const pinned = col.fixed === "left";
+                            const content = col.render ? col.render(row, i) : col.dataIndex ? row[col.dataIndex] : null;
+                            return /* @__PURE__ */ jsx(
+                              "td",
+                              {
+                                ...role("cell"),
+                                "data-label": stack ? cardLabel(col) : void 0,
+                                style: pinned ? { left: (offsets[ci] ?? 0) + selOffset } : void 0,
+                                className: [
+                                  stack ? col.ellipsis ? "rosh-dt-cell rosh-dt-clip" : "rosh-dt-cell" : "",
+                                  cellBase,
+                                  ALIGN2[col.align ?? (col.numeric ? "right" : "left")],
+                                  // Stacked, the monospace moves onto the value, so
+                                  // the label beside it keeps the header's typeface.
+                                  col.numeric && !stack ? "font-mono" : "",
+                                  "text-gray-900",
+                                  col.ellipsis ? "max-w-0 truncate" : "",
+                                  // A pinned cell needs its own background or the
+                                  // scrolling columns show through it.
+                                  pinned ? "sticky z-10 bg-white" : ""
+                                ].filter(Boolean).join(" "),
+                                children: stack ? (
+                                  // One box for the value, whatever `render` returns
+                                  // — text, a fragment, three badges — so the card
+                                  // line is always two items: the label and this.
+                                  // `display: contents` in the wide layout, where
+                                  // the cell lays its content out exactly as before.
+                                  /* @__PURE__ */ jsx("span", { className: col.numeric ? "rosh-dt-value font-mono" : "rosh-dt-value", children: content })
+                                ) : content
+                              },
+                              col.key
+                            );
+                          })
+                        ]
+                      },
+                      keyOf(row, i)
+                    );
+                  }),
+                  bottomPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: colCount, style: { height: bottomPad, padding: 0, border: 0 } }) })
+                ] }) })
+              ]
+            }
+          ),
           footer
         ]
       }
     ),
-    pagination && pagination.pageCount > 1 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-end", children: /* @__PURE__ */ jsx(
+    pagination && pagination.pageCount > 1 && /* @__PURE__ */ jsx("div", { className: stack ? "rosh-dt-pager mt-3 flex justify-end" : "mt-3 flex justify-end", children: /* @__PURE__ */ jsx(
       Pagination,
       {
         page: pagination.page,
@@ -13532,6 +14102,6 @@ function ChordChart({
   ] });
 }
 
-export { APP_UPDATE_POLL_MS, Accordion, AppUpdateBanner, AttachButton, AttachmentDropZone, AttachmentList, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BoxPlotChart, BrandAssetEditor, BudgetBar, CHART_INK, Calendar, CandlestickChart, Card, CartesianPlot, ChartBrush, ChartDefs, ChartDot, ChartFrame, ChartHighlightProvider, ChartSkeleton, ChartTooltip, ChatTemplate, Checkbox_default, CheckoutTemplate, ChordChart, ColoredBadge, ColumnChart, ComposerAttachments, ContainerFillChart, CountBadge, DAY_MS, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DateTimePicker_default, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker_default, FormErrorSummary, FormField, FormLayoutPage, FunnelChart, GROUP_COLORS, GROUP_COLORS_SOLID, GalleryTemplate, GlobalSearch, Grid, HeatmapChart, HelpCenter, HistogramChart, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, LineChart, ListFooter, ListLoadError, MAX_FRACTION_DIGITS, MENU_MAX_HEIGHT, MOTION, Markdown, MediaUploadField, MediaUploadGrid, Meter, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, POPUP_MAX_WIDTH, POST_PRODUCTION_STATUSES, PageHeader, Pagination, PaperclipGlyph, Paragraph, PieChart, PortalBrandingProvider, ProductionTimeline, RADAR_SERIES_CAP, RadarChart, RadialBarChart, RadioGroup, Radio_default, RangeChart, RankedBars, SCATTER_SERIES_CAP, SERIES_SLOT_COUNT, SERIES_VARS, STAGES, STATUS_VARS, SankeyChart, ScatterChart, SearchableSelect, Segmented, Select_default, SettingRow, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Snippet, Sparkline, Stack, StatCard, StatTile, Statistic, StatusBadge, StatusBadgeProvider, Stepper, SunburstChart, Switch_default, Tabs, TagInput, Text, Textarea_default, TileButton_default, TimePicker_default, TimeSeriesChart, TimelineTrack, Title, Tooltip, TopNav, TreemapChart, WaterfallChart, angleScale, appendKey, applyThemePrefs, arcPath, areaBetween, areaFrom, autoHighlightIndex, backspace, bandScale, binValues, budgetState, bumpPath, calcOverall, calcReportOverall, copyToClipboard, curvePath, dashFor, fillFor, fillId, firstEnabledIndex, fmtSliderDate, formatDate, fromKey, glowId, groundId, groupColors, highlightOpacity, inputClasses, isSeverityTone, ladderScale, lastEnabledIndex, linearPath, linearScale, logScale, maskId, matchTypeahead, mediaFileName, monotonePath, nextEnabledIndex, niceMax, polygonPoints, popupBounds, radiusScale, resolvePortalBrandAsset, resolveSeriesColor, resolveTheme, selectionAt, seriesColor, severityOf, splinePath, squarify, stagger, stepPath, tabButtonId, tabPanelId, toDayMs, toISODate, toKey, useAppUpdate, useClickOutside, useDropdownPosition, useHighlight, usePlotWidth, usePortalBranding, useProductionTimeline, useTheme };
-//# sourceMappingURL=chunk-BJ34QOR3.js.map
-//# sourceMappingURL=chunk-BJ34QOR3.js.map
+export { APP_UPDATE_POLL_MS, Accordion, AppUpdateBanner, AttachButton, AttachmentDropZone, AttachmentList, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BoxPlotChart, BrandAssetEditor, BudgetBar, CHART_INK, Calendar, CandlestickChart, Card, CartesianPlot, ChartBrush, ChartDefs, ChartDot, ChartFrame, ChartHighlightProvider, ChartSkeleton, ChartTooltip, ChatTemplate, Checkbox_default, CheckoutTemplate, ChordChart, ColoredBadge, ColumnChart, ComposerAttachments, ContainerFillChart, CountBadge, DAY_MS, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DateTimePicker_default, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker_default, FormErrorSummary, FormField, FormLayoutPage, FunnelChart, GROUP_COLORS, GROUP_COLORS_SOLID, GalleryTemplate, GlobalSearch, Grid, HeatmapChart, HelpCenter, HistogramChart, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, LineChart, ListFooter, ListLoadError, MAX_FRACTION_DIGITS, MENU_MAX_HEIGHT, MOTION, Markdown, MediaUploadField, MediaUploadGrid, Meter, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, POPUP_MAX_WIDTH, POST_PRODUCTION_STATUSES, PageHeader, Pagination, PaperclipGlyph, Paragraph, PieChart, PortalBrandingProvider, ProductionTimeline, RADAR_SERIES_CAP, RadarChart, RadialBarChart, RadioGroup, Radio_default, RangeChart, RankedBars, SCATTER_SERIES_CAP, SERIES_SLOT_COUNT, SERIES_VARS, STAGES, STATUS_VARS, SankeyChart, ScatterChart, SearchableSelect, Segmented, Select_default, SettingRow, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Snippet, Sparkline, Stack, StatCard, StatTile, Statistic, StatusBadge, StatusBadgeProvider, Stepper, SunburstChart, Switch_default, Tabs, TagInput, Text, Textarea_default, TileButton_default, TimePicker_default, TimeSeriesChart, TimelineTrack, Title, Tooltip, TopNav, TreemapChart, WaterfallChart, angleScale, appendKey, applyThemePrefs, arcPath, areaBetween, areaFrom, autoHighlightIndex, backspace, bandScale, binValues, budgetState, bumpPath, calcOverall, calcReportOverall, copyToClipboard, curvePath, dashFor, fillFor, fillId, firstDayOfWeek, firstEnabledIndex, fmtSliderDate, formatDate, fromKey, glowId, groundId, groupColors, highlightOpacity, inputClasses, isSeverityTone, ladderScale, lastEnabledIndex, linearPath, linearScale, logScale, maskId, matchTypeahead, mediaFileName, monotonePath, nextEnabledIndex, niceMax, polygonPoints, popupBounds, radiusScale, resolvePortalBrandAsset, resolveSeriesColor, resolveTheme, selectionAt, seriesColor, severityOf, splinePath, squarify, stagger, stepPath, tabButtonId, tabPanelId, toDayMs, toISODate, toKey, useAppUpdate, useClickOutside, useDropdownPosition, useHighlight, usePlotWidth, usePortalBranding, useProductionTimeline, useTheme };
+//# sourceMappingURL=chunk-YA4EE7ST.js.map
+//# sourceMappingURL=chunk-YA4EE7ST.js.map