@pipelex/mthds-form 0.16.0 → 0.17.0

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

@@ -2155,6 +2155,7 @@ function ResultEnvProvider({
   resolveShareUrl,
   proseImages,
   tableColumns,
+  tableLayout,
   saveFiles,
   downloads,
   children
@@ -2166,15 +2167,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 +2194,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 +2271,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);
@@ -4046,6 +4065,44 @@ function isInlineColumn(field) {
 }
 var CELL_LENGTH_LIMIT = 80;
 var EXPAND_COLUMN = "2rem";
+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",
+    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",
+    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",
+    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",
+    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";
+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 +4129,25 @@ 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];
   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,23 +4171,32 @@ 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: [
+        ...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(
-                  "whitespace-nowrap px-3 py-2 text-[12px] font-semibold text-foreground",
+                  // 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) })
@@ -4134,50 +4204,85 @@ function ObjectTable({
               column.name
             ))
           ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => {
+          /* @__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: "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
+            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" })
                     }
-                  } : {},
-                  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",
-                  {
-                    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"
-                    ),
-                    ...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);
+                  ) }),
+                  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);
+                    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 })
+                            }
+                          ),
+                          /* @__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);
           }) })
         ] })
       }
@@ -4513,8 +4618,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 +4785,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-LXYSQWZG.js.map
+//# sourceMappingURL=chunk-LXYSQWZG.js.map