@pipelex/mthds-form 0.17.0 → 0.18.0

package/dist/{chunk-LXYSQWZG.js → chunk-YY3JI6VI.js}

@@ -1,13 +1,13 @@
 import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chunk-ICUEHNEH.js';
 import { seedInputs, closeOptionalStructures, openOptionalStructures } from './chunk-VH5CDQDR.js';
 import { readStuffFile } from './chunk-RRTI7AIR.js';
-import { setValueAtPath, apiInputsFromRunValues } from './chunk-MEXWXLR7.js';
+import { setValueAtPath, apiInputsFromRunValues } from './chunk-PQ3ZX5MJ.js';
+import { shownAsOptional, isFoldedOptional, anyOptionalStructureOpen, isOptionalStructure, computeReadiness, optionalStructureOpen, mustBeFilled, fieldFilled, isFilled } from './chunk-XO5OENNF.js';
 import { viewableUrl, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativeValueNode, readDateContent, formatDateContent, readImageContent, readDataUrl, readDocumentContent } from './chunk-CM4KVG53.js';
-import { buildRunFields } from './chunk-ZB4RYUKV.js';
+import { buildRunFields } from './chunk-HVWE3TTC.js';
+import { ownProp } from './chunk-V3OV2XQT.js';
 import { conceptCategory } from './chunk-FABY3DEY.js';
 import { acceptLabel, acceptMap, isAcceptedFile, formatOfFilename, DOCUMENT_FORMATS, IMAGE_FORMATS } from './chunk-XCO6GTEC.js';
-import { shownAsOptional, isFoldedOptional, anyOptionalStructureOpen, isOptionalStructure, computeReadiness, optionalStructureOpen, mustBeFilled, fieldFilled, isFilled } from './chunk-XO5OENNF.js';
-import { ownProp } from './chunk-V3OV2XQT.js';
 import { toStoredDateValue, toDateInputValue } from './chunk-GKV77RAS.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -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: [
@@ -1897,6 +1900,18 @@ function frameDocument(content, { styles, imgSrc, fontSrc }) {
 function escapeAttribute(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
 }
+var DEFAULT_PAGE_FONT = "system-ui, sans-serif";
+function pageDocument(content, {
+  imgSrc = DEFAULT_IMG_SRC,
+  fontSrc,
+  fontFamily
+} = {}) {
+  return frameDocument(content, {
+    styles: frameStyles(pageTypography(fontFamily || DEFAULT_PAGE_FONT)),
+    imgSrc,
+    fontSrc: fontSrc ?? imgSrc
+  });
+}
 
 // src/react/markup-storage.ts
 var MARKUP_RESOLVE_TIMEOUT_MS = 1e4;
@@ -2158,6 +2173,7 @@ function ResultEnvProvider({
   tableLayout,
   saveFiles,
   downloads,
+  renderPdf,
   children
 }) {
   const env = useMemo(
@@ -2169,7 +2185,8 @@ function ResultEnvProvider({
       tableColumns,
       tableLayout,
       saveFiles,
-      downloads
+      downloads,
+      renderPdf
     }),
     [
       resolveUrl,
@@ -2179,7 +2196,8 @@ function ResultEnvProvider({
       tableColumns,
       tableLayout,
       saveFiles,
-      downloads
+      downloads,
+      renderPdf
     ]
   );
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: env, children });
@@ -2259,6 +2277,9 @@ function useFileDownloadShown(kind) {
 function usePdfSaveShown() {
   return use(ResultEnvContext).downloads?.pdf ?? true;
 }
+function useRenderPdf() {
+  return use(ResultEnvContext).renderPdf;
+}
 function useAskFileName() {
   return use(ResultEnvContext).downloads?.askFileName ?? false;
 }
@@ -2786,7 +2807,7 @@ var PT_PER_PX = 72 / 96;
 async function renderHtmlPdf(content, {
   imgSrc = DEFAULT_IMG_SRC,
   fontSrc,
-  fontFamily = "system-ui, sans-serif",
+  fontFamily = DEFAULT_PAGE_FONT,
   title,
   scale = 3,
   quality = 0.92
@@ -2970,11 +2991,7 @@ async function openCopy(content, { imgSrc, fontSrc, fontFamily }) {
     opacity: "0",
     pointerEvents: "none"
   });
-  frame.srcdoc = frameDocument(content, {
-    styles: frameStyles(pageTypography(fontFamily)),
-    imgSrc,
-    fontSrc
-  });
+  frame.srcdoc = pageDocument(content, { imgSrc, fontSrc, fontFamily });
   const loaded = new Promise(
     (resolve) => frame.addEventListener("load", () => resolve(), { once: true })
   );
@@ -3035,6 +3052,7 @@ function PdfDownloadButton({
   const s = useFieldStrings();
   const save = useSaveFiles();
   const resolvers = useMarkupResolvers();
+  const hostPdf = useRenderPdf();
   const ref = useRef(null);
   const statusId = useId();
   const [state, setState] = useState("idle");
@@ -3050,12 +3068,12 @@ function PdfDownloadButton({
       const fontFamily = ref.current ? getComputedStyle(ref.current).fontFamily : void 0;
       const innerHtml = await resolveHtmlStorageUrls(content.innerHtml, resolvers);
       const page = innerHtml === content.innerHtml ? content : { ...content, innerHtml };
-      const { blob } = await renderHtmlPdf(page, {
+      const blob = hostPdf ? await makeOnHost(hostPdf, page, { title, imgSrc, fontSrc, fontFamily }) : (await renderHtmlPdf(page, {
         ...title ? { title } : {},
         ...imgSrc === void 0 ? {} : { imgSrc },
         ...fontSrc === void 0 ? {} : { fontSrc },
         ...fontFamily ? { fontFamily } : {}
-      });
+      })).blob;
       const { failed: missed } = await save([
         {
           name: chosen,
@@ -3098,6 +3116,11 @@ function PdfDownloadButton({
     dialog
   ] });
 }
+async function makeOnHost(render, page, { title, ...frame }) {
+  const blob = await render({ html: pageDocument(page, frame), ...title ? { title } : {} });
+  if (!(blob instanceof Blob) || blob.size === 0) throw new Error("The host made no PDF");
+  return blob;
+}
 function pdfStem(name) {
   return (name ?? "").trim().replace(/\.pdf$/i, "").trim();
 }
@@ -3613,6 +3636,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,
@@ -3649,7 +3673,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" })
     }
   );
@@ -3687,7 +3714,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(
@@ -3769,6 +3796,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" })
@@ -3845,7 +3873,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
@@ -4064,7 +4092,9 @@ 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) {
@@ -4077,9 +4107,9 @@ var STACKED = {
     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",
-    toggle: "@max-[640px]:absolute @max-[640px]:top-2 @max-[640px]:left-1 @max-[640px]:p-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",
+    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"
@@ -4089,9 +4119,9 @@ var STACKED = {
     head: "hidden",
     body: "block",
     row: "relative block px-3 py-2",
-    rowWithToggle: "pl-8",
-    toggle: "absolute top-2 left-1 p-0",
-    cell: "grid grid-cols-[minmax(0,min(40%,10rem))_minmax(0,1fr)] items-baseline gap-x-3 px-0 py-0.5",
+    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"
@@ -4099,6 +4129,25 @@ var STACKED = {
 };
 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";
@@ -4138,6 +4187,9 @@ function ObjectTable({
   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 || fits) return;
@@ -4184,107 +4236,125 @@ function ObjectTable({
         role: "group",
         "aria-label": label,
         ...fits ? {} : { tabIndex: 0 },
-        className: cn("overflow-x-auto rounded-lg border border-border", fits && "@container"),
-        children: /* @__PURE__ */ jsxs("table", { className: cn("w-full min-w-full border-collapse text-[13px]", stacked?.table), 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",
-                className: cn(
-                  // 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"
-                ),
-                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: "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: 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
+        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(
+                      // 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
+                    ),
+                    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" })
                         }
-                      } : {},
-                      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);
-                    return /* @__PURE__ */ jsxs(
-                      "td",
-                      {
-                        className: cn("px-3 py-1.5 align-top", 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 })
-                            }
+                      ) }),
+                      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
                           ),
-                          /* @__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 }) })
+                          ...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
                             }
-                          )
-                        ]
-                      },
-                      column.name
-                    );
-                  })
-                ]
-              }
-            ) }, index);
-          }) })
-        ] })
+                          } : {},
+                          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
+                        );
+                      })
+                    ]
+                  }
+                ) }, index);
+              }) })
+            ]
+          }
+        )
       }
     )
   );
@@ -4785,5 +4855,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-LXYSQWZG.js.map
-//# sourceMappingURL=chunk-LXYSQWZG.js.map
+//# sourceMappingURL=chunk-YY3JI6VI.js.map
+//# sourceMappingURL=chunk-YY3JI6VI.js.map