efficient-shell 4.132.0 → 4.134.0

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

@@ -1,35 +1,26 @@
-import { Breadcrumbs } from './chunk-CGXMWHQW.js';
-import { SidebarLayout } from './chunk-FONEQRBH.js';
+import { Breadcrumbs } from './chunk-GIGV2ZRW.js';
+import { SidebarLayout } from './chunk-ET6ID4LP.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 { toast_default } from './chunk-4P44JXDS.js';
+import { useIsMobile, useShortcutLabel, useShellPrefs } from './chunk-2TPTHAKI.js';
+import { useFileIntake, humanSize, FileIntakeAlert } from './chunk-QAGQRNKI.js';
+import { iconButtonClasses, Button_default } from './chunk-RT6DSB5Y.js';
+import { PopupMenu, PopupMenuItem } from './chunk-QRL64J5F.js';
+import { registerModalEscapeInterceptor, onOverlayOpen, Z_LAYERS, useDismissPopupsOnOpen, useFocusTrap, useScrollLock } from './chunk-W622KQTD.js';
 import { glassStyle } from './chunk-D276EMXS.js';
-import { useShellLocale, useShellStrings, DEFAULT_SHELL_STRINGS, currentShellStrings, formatPlain, formatFixed, formatPercent, splitAround } from './chunk-7IN7YZAL.js';
+import { useShellLocale, useShellStrings, DEFAULT_SHELL_STRINGS, currentShellStrings, formatPlain, formatFixed, formatPercent, splitAround } from './chunk-72CQWN7O.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,6 +121,57 @@ 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 placeBeside(anchor, size, side, bounds, gap) {
+  const room = {
+    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)
+  };
+  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;
+  }
+  const within = (value, lo, hi) => Math.max(lo, Math.min(value, hi));
+  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 useDropdownPosition(triggerRef, open, options = {}) {
   const {
     matchTriggerWidth = false,
@@ -4232,9 +4274,13 @@ var SIDE_POS = {
   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"
 };
+var GAP2 = 6;
 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 +4290,33 @@ 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);
+      tip.style.maxWidth = `${maxWidth}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);
+      const next = { left: at.left - anchor.left, top: at.top - anchor.top, maxWidth };
+      setPlaced((prev) => prev && prev.left === next.left && prev.top === next.top && prev.maxWidth === next.maxWidth ? 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) => {
@@ -4259,6 +4332,7 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
   return /* @__PURE__ */ jsxs(
     "span",
     {
+      ref: wrapRef,
       className: "relative inline-flex",
       "aria-describedby": isValidElement(children) ? void 0 : describedBy,
       onMouseEnter: open,
@@ -4267,13 +4341,24 @@ 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.
+        // 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] w-max whitespace-normal break-words text-start rounded-md px-2 py-1 text-xs text-gray-800 ${placed ? "" : SIDE_POS[side]}`,
+            style: {
+              ...glassStyle(),
+              ...placed && { left: placed.left, top: placed.top, maxWidth: placed.maxWidth }
+            },
             children: content
           }
         )
@@ -4455,7 +4540,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 +4597,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");
@@ -9045,11 +9130,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 +9174,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 +9211,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 +9233,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 +9262,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 +9277,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,
@@ -13533,5 +13674,5 @@ 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
+//# sourceMappingURL=chunk-OLJDJYSU.js.map
+//# sourceMappingURL=chunk-OLJDJYSU.js.map