@pipelex/mthds-form 0.16.0 → 0.17.1

package/dist/{chunk-3KK2DO7T.js → chunk-Y4MTDG2R.js}

@@ -112,6 +112,7 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     className: cn(
       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "max-sm:relative max-sm:after:absolute max-sm:after:-inset-x-0.5 max-sm:after:-inset-y-3 max-sm:after:content-['']",
       className
     ),
     ...props,
@@ -736,7 +737,7 @@ function FileField({
             type: "button",
             disabled: busy,
             onClick: () => setShowUrl(true),
-            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 max-sm:min-h-11",
             children: [
               /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
               s.pasteUrlInstead
@@ -803,25 +804,27 @@ function FileChip({
     () => fileChipSubtitle(url, filename, formats, presentation, s),
     [url, filename, formats, presentation, s]
   );
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-md border border-border bg-input px-3 py-2.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md border border-border bg-input px-3 py-2.5", children: [
     /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-32 [contain:inline-size]", children: [
       /* @__PURE__ */ jsx("p", { className: "truncate text-[13px] font-medium text-foreground", children: value?.filename ?? s.uploadedFile }),
       subtitle && /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[10.5px] text-muted-foreground", children: subtitle })
     ] }),
-    canPreview && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onTogglePreview,
-        className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-        children: [
-          previewOpen ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
-          s.preview
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(ClearButton, { disabled, onClick: onClear })
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-3", children: [
+      canPreview && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onTogglePreview,
+          className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground max-sm:h-11 max-sm:px-3",
+          children: [
+            previewOpen ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
+            s.preview
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ClearButton, { disabled, onClick: onClear })
+    ] })
   ] });
 }
 function ClearButton({ disabled, onClick }) {
@@ -833,7 +836,7 @@ function ClearButton({ disabled, onClick }) {
       onClick,
       disabled,
       "aria-label": s.removeFileAria,
-      className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50",
+      className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 max-sm:size-11",
       children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
     }
   );
@@ -1209,7 +1212,7 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
       type: "button",
       onClick: onToggle,
       "aria-expanded": expanded,
-      className: "flex w-fit items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground",
+      className: "flex w-fit items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground max-sm:min-h-11",
       children: [
         expanded ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
         expanded ? noun === "field" ? s.hideOptionalFields : s.hideOptionalInputs : noun === "field" ? s.optionalFieldsCount(count) : s.optionalInputsCount(count)
@@ -1381,7 +1384,7 @@ function ListField({ field, value, onChange, id, error, env }) {
                 onClick: () => removeItem(index),
                 disabled: env?.disabled || busy,
                 "aria-label": s.removeItemAria(index + 1),
-                className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-destructive disabled:opacity-50",
+                className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-destructive disabled:opacity-50 max-sm:mt-0 max-sm:size-11",
                 children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
               }
             )
@@ -1396,7 +1399,7 @@ function ListField({ field, value, onChange, id, error, env }) {
           onClick: addItem,
           disabled: env?.disabled || isFull,
           className: cn(
-            "inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border text-[13px] text-muted-foreground transition-colors",
+            "inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border text-[13px] text-muted-foreground transition-colors max-sm:h-11",
             "hover:border-primary/40 hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
           ),
           children: [
@@ -2155,6 +2158,7 @@ function ResultEnvProvider({
   resolveShareUrl,
   proseImages,
   tableColumns,
+  tableLayout,
   saveFiles,
   downloads,
   children
@@ -2166,15 +2170,26 @@ function ResultEnvProvider({
       resolveShareUrl,
       proseImages,
       tableColumns,
+      tableLayout,
       saveFiles,
       downloads
     }),
-    [resolveUrl, resolveUrls, resolveShareUrl, proseImages, tableColumns, saveFiles, downloads]
+    [
+      resolveUrl,
+      resolveUrls,
+      resolveShareUrl,
+      proseImages,
+      tableColumns,
+      tableLayout,
+      saveFiles,
+      downloads
+    ]
   );
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: env, children });
 }
-function DownloadDisplayOverride({
+function PanelEnvOverride({
   downloads,
+  tableLayout,
   children
 }) {
   const env = use(ResultEnvContext);
@@ -2182,18 +2197,22 @@ function DownloadDisplayOverride({
   const files = downloads?.files;
   const pdf = downloads?.pdf;
   const askFileName = downloads?.askFileName;
-  const merged = useMemo(
-    () => result === void 0 && files === void 0 && pdf === void 0 && askFileName === void 0 ? env : {
+  const merged = useMemo(() => {
+    const ownDownloads = result !== void 0 || files !== void 0 || pdf !== void 0 || askFileName !== void 0;
+    if (!ownDownloads && tableLayout === void 0) return env;
+    return {
       ...env,
-      downloads: {
-        result: result ?? env.downloads?.result,
-        files: files ?? env.downloads?.files,
-        pdf: pdf ?? env.downloads?.pdf,
-        askFileName: askFileName ?? env.downloads?.askFileName
-      }
-    },
-    [env, result, files, pdf, askFileName]
-  );
+      ...tableLayout === void 0 ? {} : { tableLayout },
+      ...ownDownloads ? {
+        downloads: {
+          result: result ?? env.downloads?.result,
+          files: files ?? env.downloads?.files,
+          pdf: pdf ?? env.downloads?.pdf,
+          askFileName: askFileName ?? env.downloads?.askFileName
+        }
+      } : {}
+    };
+  }, [env, result, files, pdf, askFileName, tableLayout]);
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: merged, children });
 }
 function useResolvedUrl(url) {
@@ -2255,6 +2274,9 @@ function useTableColumns() {
   if (budget === void 0 || Number.isNaN(budget)) return DEFAULT_TABLE_COLUMNS;
   return Math.max(1, Math.floor(budget));
 }
+function useTableLayout() {
+  return use(ResultEnvContext).tableLayout ?? "scroll";
+}
 var ResultLocationContext = createContext(void 0);
 function useResultLocation() {
   return use(ResultLocationContext);
@@ -3594,6 +3616,7 @@ function pathLabel(url) {
   const segment = path.split("/").filter(Boolean).pop();
   return segment && segment.length > 0 ? segment : url;
 }
+var FILE_BUTTON_ON_A_PHONE = "max-sm:grid max-sm:size-11 max-sm:place-items-center";
 function CopyButton({
   value,
   provide,
@@ -3630,7 +3653,10 @@ function CopyButton({
       },
       ...title ? { title } : {},
       "aria-label": label,
-      className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+      className: cn(
+        "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+        FILE_BUTTON_ON_A_PHONE
+      ),
       children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
     }
   );
@@ -3668,7 +3694,7 @@ function FileRef({
         target: "_blank",
         rel: "noreferrer",
         title,
-        className: "min-w-0 truncate font-mono text-[12px] text-foreground underline underline-offset-2",
+        className: "min-w-0 truncate font-mono text-[12px] text-foreground underline underline-offset-2 max-sm:min-w-11 max-sm:leading-11",
         children: label
       }
     ) : /* @__PURE__ */ jsx(
@@ -3750,6 +3776,7 @@ ${planned.url ?? planned.text}`;
         ...failed ? { "aria-describedby": statusId } : {},
         className: cn(
           "shrink-0 rounded p-0.5 hover:bg-card focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+          FILE_BUTTON_ON_A_PHONE,
           failed ? "text-destructive" : "text-muted-foreground hover:text-foreground"
         ),
         children: state === "saving" ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-3.5 animate-spin" }) : state === "saved" ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : failed ? /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Download, { "aria-hidden": true, className: "size-3.5" })
@@ -3826,7 +3853,7 @@ function DocumentValue({ value }) {
           type: "button",
           onClick: () => setOpen((current) => !current),
           "aria-expanded": open,
-          className: "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+          className: "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 max-sm:min-h-11 max-sm:px-3",
           children: [
             open ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": true, className: "size-3.5" }),
             s.preview
@@ -4045,7 +4072,66 @@ function isInlineColumn(field) {
   return TABULAR_KINDS.has(field.kind);
 }
 var CELL_LENGTH_LIMIT = 80;
-var EXPAND_COLUMN = "2rem";
+var EXPAND_COLUMN = "var(--expand-column,2rem)";
+var EXPAND_COLUMN_WIDTH = "[--expand-column:2rem] max-sm:[--expand-column:3.25rem]";
+var TOGGLE = "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 max-sm:mt-0 max-sm:size-11";
+var STACK_NEVER_UP_TO = 3;
+var STACK_ALWAYS_BEYOND = 6;
+function stackingFor(columns) {
+  if (columns <= STACK_NEVER_UP_TO) return "never";
+  return columns > STACK_ALWAYS_BEYOND ? "always" : "narrow";
+}
+var STACKED = {
+  narrow: {
+    table: "@max-[640px]:block",
+    head: "@max-[640px]:hidden",
+    body: "@max-[640px]:block",
+    row: "@max-[640px]:relative @max-[640px]:block @max-[640px]:px-3 @max-[640px]:py-2",
+    rowWithToggle: "@max-[640px]:pl-8 max-sm:@max-[640px]:pl-12",
+    toggle: "@max-[640px]:absolute @max-[640px]:top-2 @max-[640px]:left-1 @max-[640px]:p-0 max-sm:@max-[640px]:top-0 max-sm:@max-[640px]:left-0",
+    cell: "@max-[640px]:grid @max-[640px]:grid-cols-[minmax(0,min(40%,10rem))_minmax(0,1fr)] @max-[640px]:items-baseline @max-[640px]:gap-x-3 @max-[640px]:px-0 @max-[640px]:py-0.5 @max-[640px]:after:hidden",
+    label: "@max-[640px]:block",
+    detail: "@max-[640px]:block",
+    detailInner: "@max-[640px]:px-0 @max-[640px]:py-1"
+  },
+  always: {
+    table: "block",
+    head: "hidden",
+    body: "block",
+    row: "relative block px-3 py-2",
+    rowWithToggle: "pl-8 max-sm:pl-12",
+    toggle: "absolute top-2 left-1 p-0 max-sm:top-0 max-sm:left-0",
+    cell: "grid grid-cols-[minmax(0,min(40%,10rem))_minmax(0,1fr)] items-baseline gap-x-3 px-0 py-0.5 after:hidden",
+    label: "block",
+    detail: "block",
+    detailInner: "px-0 py-1"
+  }
+};
+var FIT_CELL = "min-w-[min(8ch,14cqw)] wrap-anywhere [&>span]:whitespace-normal";
+var FIT_NAME = "min-w-[min(16ch,28cqw)] wrap-anywhere [&>span]:whitespace-normal";
+var WORD_FLOOR = "after:block after:h-0 after:max-w-[var(--fit-share,0px)] after:overflow-hidden after:invisible after:wrap-normal after:content-[attr(data-fit)]";
+var FIT_SHARE_BESIDE_NAME = {
+  2: "[--fit-share:calc(72cqw_-_3rem_-_var(--expand-column,2rem))]",
+  3: "[--fit-share:calc((72cqw_-_4.5rem_-_var(--expand-column,2rem))/2)]",
+  4: "[--fit-share:calc((72cqw_-_6rem_-_var(--expand-column,2rem))/3)]",
+  5: "[--fit-share:calc((72cqw_-_7.5rem_-_var(--expand-column,2rem))/4)]",
+  6: "[--fit-share:calc((72cqw_-_9rem_-_var(--expand-column,2rem))/5)]"
+};
+var FIT_SHARE_WITHOUT_NAME = {
+  1: "[--fit-share:calc(100cqw_-_1.5rem_-_var(--expand-column,2rem))]",
+  2: "[--fit-share:calc((100cqw_-_3rem_-_var(--expand-column,2rem))/2)]",
+  3: "[--fit-share:calc((100cqw_-_4.5rem_-_var(--expand-column,2rem))/3)]",
+  4: "[--fit-share:calc((100cqw_-_6rem_-_var(--expand-column,2rem))/4)]",
+  5: "[--fit-share:calc((100cqw_-_7.5rem_-_var(--expand-column,2rem))/5)]",
+  6: "[--fit-share:calc((100cqw_-_9rem_-_var(--expand-column,2rem))/6)]"
+};
+function cellWords(column, cell, presentation) {
+  return typeof cell === "string" || typeof cell === "number" ? cellTitle(column, cell, presentation) : void 0;
+}
+function clampsInStack(column, name) {
+  if (column === name || fitsACellWhole(column)) return false;
+  return column.kind !== "list" && column.kind !== "document" && column.kind !== "image";
+}
 function fitsACellWhole(field) {
   switch (field.kind) {
     case "boolean":
@@ -4072,21 +4158,28 @@ function ObjectTable({
   const s = useFieldStrings();
   const presentation = useFieldPresentation();
   const budget = useTableColumns();
+  const layout = useTableLayout();
   const scrollerRef = useRef(null);
   const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
   const [viewportWidth, setViewportWidth] = useState();
   const { shown, hidden, name } = chooseColumns(columns, budget);
   const canExpand = hidden > 0 || shown.some((column) => column !== name && !fitsACellWhole(column));
+  const fits = layout === "stack";
+  const stacking = fits ? stackingFor(shown.length) : "never";
+  const stacked = stacking === "never" ? void 0 : STACKED[stacking];
+  const nameShown = name !== void 0 && shown.includes(name);
+  const fitShare = fits ? (nameShown ? FIT_SHARE_BESIDE_NAME : FIT_SHARE_WITHOUT_NAME)[shown.length] : void 0;
+  const floorsWords = (column) => fitShare !== void 0 && column !== name;
   useEffect(() => {
     const scroller = scrollerRef.current;
-    if (!scroller) return;
+    if (!scroller || fits) return;
     const measure = () => setViewportWidth(scroller.clientWidth);
     measure();
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(scroller);
     return () => observer.disconnect();
-  }, []);
+  }, [fits]);
   const toggle = (index) => setExpanded((current) => {
     const next = new Set(current);
     if (!next.delete(index)) next.add(index);
@@ -4110,76 +4203,138 @@ function ObjectTable({
     // of them with the same name - which is what a result rendered twice, or a
     // structure holding two lists, produces - is `landmark-unique`. A group is
     // named without claiming to be a section of the page.
+    //
+    // Under `tableLayout="stack"` the box is the SIZE CONTAINER its stacking
+    // rules query, so the table answers to its own width rather than the
+    // viewport's, and it takes no focus: nothing scrolls, so the stop would have
+    // nothing to do. It still clips to its rounded border, and should anything
+    // ever overflow it, the a11y gate names the scroll a keyboard cannot reach.
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: scrollerRef,
         role: "group",
         "aria-label": label,
-        tabIndex: 0,
-        className: "overflow-x-auto rounded-lg border border-border",
-        children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-full border-collapse text-[13px]", children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border bg-muted text-left", children: [
-            canExpand && /* @__PURE__ */ jsx("th", { scope: "col", style: { width: EXPAND_COLUMN }, className: "px-1", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: s.rowDetailsColumn }) }),
-            shown.map((column) => /* @__PURE__ */ jsx(
-              "th",
-              {
-                scope: "col",
-                className: cn(
-                  "whitespace-nowrap px-3 py-2 text-[12px] font-semibold text-foreground",
-                  presentation === "app" ? void 0 : "font-mono"
-                ),
-                children: /* @__PURE__ */ jsx(Described, { description: column.description, children: fieldLabel(column.title, column.name, presentation) })
-              },
-              column.name
-            ))
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => {
-            const isOpen = canExpand && expanded.has(index);
-            return /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60 last:border-b-0", children: [
-              canExpand && /* @__PURE__ */ jsx("td", { className: "px-1 pt-px align-top", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => toggle(index),
-                  "aria-expanded": isOpen,
-                  "aria-label": s.toggleRowDetails(index + 1),
-                  className: "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
-                  children: isOpen ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5" })
-                }
-              ) }),
-              isOpen ? /* @__PURE__ */ jsx("td", { colSpan: shown.length, className: "bg-card/40 p-0", children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "sticky left-0 px-3.5 py-3",
-                  ...viewportWidth ? {
-                    style: {
-                      // Minus the chevron column: this cell starts
-                      // after it, so pinning it to the FULL visible
-                      // width pushes its right edge that far past the
-                      // scroller. See `EXPAND_COLUMN`.
-                      width: canExpand ? `calc(${viewportWidth}px - ${EXPAND_COLUMN})` : viewportWidth
-                    }
-                  } : {},
-                  children: /* @__PURE__ */ jsx(ResultField, { field: element, value: item, hideLabel: true })
-                }
-              ) }) : shown.map((column) => {
-                const cell = typeof item === "object" && item !== null ? ownProp(item, column.name) : void 0;
-                return /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 align-top", children: /* @__PURE__ */ jsx(
-                  "div",
+        ...fits ? {} : { tabIndex: 0 },
+        className: cn(
+          "overflow-x-auto rounded-lg border border-border",
+          EXPAND_COLUMN_WIDTH,
+          fits && "@container"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: cn("w-full min-w-full border-collapse text-[13px]", stacked?.table, fitShare),
+            children: [
+              /* @__PURE__ */ jsx("thead", { className: stacked?.head, children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border bg-muted text-left", children: [
+                canExpand && /* @__PURE__ */ jsx("th", { scope: "col", style: { width: EXPAND_COLUMN }, className: "px-1", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: s.rowDetailsColumn }) }),
+                shown.map((column) => /* @__PURE__ */ jsx(
+                  "th",
                   {
+                    scope: "col",
+                    ...floorsWords(column) ? { "data-fit": fieldLabel(column.title, column.name, presentation) } : {},
                     className: cn(
-                      "max-w-[44ch]",
-                      column === name ? "max-w-none min-w-[16ch] wrap-anywhere [&>span]:whitespace-normal" : column.kind === "list" && isInlineColumn(column) ? "min-w-[16ch]" : "truncate"
+                      // One line, or wrapped anywhere so a header is never what
+                      // widens a table that has to fit its box. See `FIT_CELL`.
+                      fits ? "wrap-anywhere" : "whitespace-nowrap",
+                      "px-3 py-2 text-[12px] font-semibold text-foreground",
+                      presentation === "app" ? void 0 : "font-mono",
+                      floorsWords(column) && WORD_FLOOR
                     ),
-                    ...typeof cell === "string" || typeof cell === "number" ? { title: cellTitle(column, cell, presentation) } : {},
-                    children: /* @__PURE__ */ jsx(ResultAt, { segment: column.name, children: /* @__PURE__ */ jsx(LeafValue, { field: column, value: cell, compact: true }) })
+                    children: /* @__PURE__ */ jsx(Described, { description: column.description, children: fieldLabel(column.title, column.name, presentation) })
+                  },
+                  column.name
+                ))
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { className: stacked?.body, children: items.map((item, index) => {
+                const isOpen = canExpand && expanded.has(index);
+                return /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    className: cn(
+                      "border-b border-border/60 last:border-b-0",
+                      stacked?.row,
+                      canExpand && stacked?.rowWithToggle
+                    ),
+                    children: [
+                      canExpand && /* @__PURE__ */ jsx("td", { className: cn("px-1 pt-px align-top", stacked?.toggle), children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => toggle(index),
+                          "aria-expanded": isOpen,
+                          "aria-label": s.toggleRowDetails(index + 1),
+                          className: TOGGLE,
+                          children: isOpen ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5" })
+                        }
+                      ) }),
+                      isOpen ? /* @__PURE__ */ jsx("td", { colSpan: shown.length, className: cn("bg-card/40 p-0", stacked?.detail), children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            !fits && "sticky left-0",
+                            "px-3.5 py-3",
+                            stacked?.detailInner
+                          ),
+                          ...viewportWidth && !fits ? {
+                            style: {
+                              // Minus the chevron column: this cell starts
+                              // after it, so pinning it to the FULL visible
+                              // width pushes its right edge that far past the
+                              // scroller. See `EXPAND_COLUMN`.
+                              width: canExpand ? `calc(${viewportWidth}px - ${EXPAND_COLUMN})` : viewportWidth
+                            }
+                          } : {},
+                          children: /* @__PURE__ */ jsx(ResultField, { field: element, value: item, hideLabel: true })
+                        }
+                      ) }) : shown.map((column) => {
+                        const cell = typeof item === "object" && item !== null ? ownProp(item, column.name) : void 0;
+                        const columnLabel = fieldLabel(column.title, column.name, presentation);
+                        const words = floorsWords(column) ? cellWords(column, cell, presentation) : void 0;
+                        return /* @__PURE__ */ jsxs(
+                          "td",
+                          {
+                            ...words === void 0 ? {} : { "data-fit": words },
+                            className: cn(
+                              "px-3 py-1.5 align-top",
+                              floorsWords(column) && WORD_FLOOR,
+                              stacked?.cell
+                            ),
+                            children: [
+                              stacked && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "hidden text-[12px] text-muted-foreground wrap-anywhere",
+                                    presentation === "app" ? void 0 : "font-mono",
+                                    stacked.label
+                                  ),
+                                  children: canExpand ? columnLabel : /* @__PURE__ */ jsx(Described, { description: column.description, children: columnLabel })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: fits ? column === name ? FIT_NAME : cn(FIT_CELL, clampsInStack(column, name) && "line-clamp-3") : cn(
+                                    "max-w-[44ch]",
+                                    column === name ? "max-w-none min-w-[16ch] wrap-anywhere [&>span]:whitespace-normal" : column.kind === "list" && isInlineColumn(column) ? "min-w-[16ch]" : "truncate"
+                                  ),
+                                  ...typeof cell === "string" || typeof cell === "number" ? { title: cellTitle(column, cell, presentation) } : {},
+                                  children: /* @__PURE__ */ jsx(ResultAt, { segment: column.name, children: /* @__PURE__ */ jsx(LeafValue, { field: column, value: cell, compact: true }) })
+                                }
+                              )
+                            ]
+                          },
+                          column.name
+                        );
+                      })
+                    ]
                   }
-                ) }, column.name);
-              })
-            ] }) }, index);
-          }) })
-        ] })
+                ) }, index);
+              }) })
+            ]
+          }
+        )
       }
     )
   );
@@ -4513,8 +4668,8 @@ function resultKey(field, baseName, value) {
     return void 0;
   }
 }
-function StuffViewer({ downloads, ...props }) {
-  return /* @__PURE__ */ jsx(DownloadDisplayOverride, { downloads, children: /* @__PURE__ */ jsx(StuffPanel, { ...props }) });
+function StuffViewer({ downloads, tableLayout, ...props }) {
+  return /* @__PURE__ */ jsx(PanelEnvOverride, { downloads, tableLayout, children: /* @__PURE__ */ jsx(StuffPanel, { ...props }) });
 }
 function StuffPanel({
   field,
@@ -4680,5 +4835,5 @@ function pdfFileName(field, value, baseName) {
 }
 
 export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, cn, fieldControlClass, fieldStringsFor, humanizeFieldName, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-3KK2DO7T.js.map
-//# sourceMappingURL=chunk-3KK2DO7T.js.map
+//# sourceMappingURL=chunk-Y4MTDG2R.js.map
+//# sourceMappingURL=chunk-Y4MTDG2R.js.map