@pipelex/mthds-form 0.9.0 → 0.10.0

package/dist/{chunk-KG4IYFWI.js → chunk-G6BWZUGV.js}

@@ -1,7 +1,7 @@
-import { collectStuffFiles } from './chunk-S4CB423P.js';
-import { viewableUrl, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, readDataUrl, readDateContent, formatDateContent, readImageContent, readDocumentContent } from './chunk-AZZAAGNX.js';
-import { conceptCategory } from './chunk-25I6JDIK.js';
-import { isAcceptedFile, acceptMapForKind, DOCUMENT_FORMATS, IMAGE_FORMATS } from './chunk-2JWRG53S.js';
+import { collectStuffFiles } from './chunk-4JQAJT7C.js';
+import { viewableUrl, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativeValueNode, readDateContent, formatDateContent, readImageContent, readDataUrl, readDocumentContent } from './chunk-TID7ZN63.js';
+import { conceptCategory } from './chunk-FABY3DEY.js';
+import { acceptLabel, acceptMap, isAcceptedFile, formatOfFilename, DOCUMENT_FORMATS, IMAGE_FORMATS } from './chunk-XCO6GTEC.js';
 import { isFilled } from './chunk-PM55AHRO.js';
 import { toStoredDateValue, toDateInputValue } from './chunk-GKV77RAS.js';
 import { ownProp } from './chunk-V3OV2XQT.js';
@@ -66,6 +66,39 @@ function humanizeFieldName(name) {
   if (words === "") return name;
   return words.charAt(0).toUpperCase() + words.slice(1);
 }
+function humanizeEnumValue(code) {
+  if (!ENUM_CODE.test(code)) return code;
+  const allCaps = code === code.toUpperCase() && code !== code.toLowerCase();
+  if (!allCaps) return humanizeFieldName(code);
+  return CODE_SEPARATOR.test(code) ? humanizeFieldName(code.toLowerCase()) : code;
+}
+var ENUM_CODE = /^\p{L}[\p{L}\p{N}_-]*$/u;
+var CODE_SEPARATOR = /[_-]/;
+function enumLabeler(options, presentation) {
+  if (presentation !== "app") return asWritten;
+  let labeler = APP_LABELERS.get(options);
+  if (labeler === void 0) {
+    labeler = wordsOrCodes(options);
+    APP_LABELERS.set(options, labeler);
+  }
+  return labeler;
+}
+function asWritten(value) {
+  return value;
+}
+function wordsOrCodes(options) {
+  const labels = /* @__PURE__ */ new Map();
+  const owners = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const label = humanizeEnumValue(option);
+    const owner = owners.get(label);
+    if (owner !== void 0 && owner !== option) return asWritten;
+    owners.set(label, option);
+    labels.set(option, label);
+  }
+  return (value) => labels.get(value) ?? value;
+}
+var APP_LABELERS = /* @__PURE__ */ new WeakMap();
 function fieldLabel(title, name, presentation) {
   if (title !== void 0) return title;
   return presentation === "app" ? humanizeFieldName(name) : name;
@@ -170,8 +203,9 @@ var DEFAULT_FIELD_STRINGS = {
   dropToUpload: "Drop to upload",
   dropOrBrowse: "Drop a file or click to browse",
   pasteUrlInstead: "paste a URL instead",
-  urlPlaceholder: "https://\u2026 or pipelex-storage://\u2026",
-  uploadedFile: "Uploaded file",
+  urlPlaceholder: "https://\u2026",
+  fileUrlAria: (label) => label ? `Link to the file for ${label}` : "Link to the file",
+  uploadedFile: "Attached file",
   encodedFileSummary: (format, bytes) => `${format} \xB7 ${formatBytes(bytes)}`,
   preview: "Preview",
   removeFileAria: "Remove file",
@@ -192,7 +226,7 @@ var DEFAULT_FIELD_STRINGS = {
   resultViewGroup: "Result view",
   yes: "Yes",
   no: "No",
-  unsupportedFileType: (accept) => `That file type is not supported. Accepted formats: ${accept}.`,
+  unsupportedFileType: (formats) => `That file type is not supported. Accepted formats: ${formats}.`,
   hideOptionalFields: "Hide optional fields",
   hideOptionalInputs: "Hide optional inputs",
   optionalFieldsCount: (count) => count === 1 ? "1 optional field" : `${count} optional fields`,
@@ -296,6 +330,11 @@ function encodedFileSummary(url, strings) {
 var IMAGE_EXT_RE = /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)(\?|$)/i;
 var PDF_EXT_RE = /\.pdf(\?|$)/i;
 var DATA_URL_MIME_RE = /^data:([^;,]+)/i;
+var WEB_URL_RE = /^\s*https?:\/\//i;
+var URL_SCHEME_RE = /^\s*[a-z][a-z0-9+.-]*:/i;
+function isReadableLink(url) {
+  return WEB_URL_RE.test(url) || !URL_SCHEME_RE.test(url);
+}
 function dataUrlMime(url) {
   return DATA_URL_MIME_RE.exec(url)?.[1]?.toLowerCase();
 }
@@ -318,8 +357,10 @@ function FileField({
   category
 }) {
   const s = useFieldStrings();
+  const presentation = useFieldPresentation();
   const domId = useFieldDomId(id);
   const [showUrl, setShowUrl] = useState(false);
+  const [typedUrl, setTypedUrl] = useState(null);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [localPreview, setLocalPreview] = useState(null);
   const [resolved, setResolved] = useState(null);
@@ -331,9 +372,12 @@ function FileField({
   }, []);
   useEffect(() => () => setLocal(null), [setLocal]);
   const [rejected, setRejected] = useState(null);
+  const formats = field.formats;
+  const hint = acceptLabel(formats);
+  const accept = useMemo(() => acceptMap(formats), [formats]);
   const handleFile = useCallback(
     (file) => {
-      if (!isAcceptedFile(field.kind, file)) {
+      if (!isAcceptedFile(formats, file)) {
         setRejected(file.name);
         return;
       }
@@ -341,7 +385,7 @@ function FileField({
       setLocal({ objectUrl: URL.createObjectURL(file), type: file.type });
       onDropFile(file);
     },
-    [field.kind, setLocal, onDropFile]
+    [formats, setLocal, onDropFile]
   );
   const busy = disabled || uploading;
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -353,7 +397,7 @@ function FileField({
     // entirely, and a browser reporting an empty `File.type` slips through
     // react-dropzone's own matcher. `handleFile` is where the answer is
     // decided; this is the affordance in front of it.
-    accept: acceptMapForKind(field.kind),
+    accept,
     // The tab stop belongs on the INPUT, not on this div - see the root element
     // below. Without this, react-dropzone puts `tabIndex: 0` and its own key
     // handlers on a `role="presentation"` div, and the element a keyboard or
@@ -414,6 +458,8 @@ function FileField({
   const resolvedSrc = resolved && resolved.uri === storageUri ? viewableUrl(resolved.src) : void 0;
   const previewSrc = (localIsCurrent ? localPreview?.objectUrl : void 0) ?? directSrc ?? resolvedSrc;
   const previewPending = !previewSrc && !!storageUri && resolved?.uri !== storageUri;
+  const urlValue = value?.url ?? "";
+  const urlText = presentation === "studio" || isReadableLink(urlValue) || urlValue === typedUrl ? urlValue : "";
   return /* @__PURE__ */ jsxs(
     FieldShell,
     {
@@ -431,6 +477,8 @@ function FileField({
             FileChip,
             {
               value,
+              formats,
+              presentation,
               disabled,
               onClear: clear,
               canPreview,
@@ -480,7 +528,7 @@ function FileField({
                   /* @__PURE__ */ jsx(Upload, { className: "h-5 w-5 text-muted-foreground", strokeWidth: 1.75 }),
                   /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
                     /* @__PURE__ */ jsx("p", { className: "text-[13px] text-foreground", children: isDragActive ? s.dropToUpload : s.dropOrBrowse }),
-                    field.accept && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-muted-foreground", children: field.accept })
+                    hint && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-muted-foreground", children: hint })
                   ] })
                 ] })
               ]
@@ -489,9 +537,8 @@ function FileField({
         ),
         rejected && !busy && /* @__PURE__ */ jsxs("p", { role: "alert", className: "text-[12px] text-destructive", children: [
           /* @__PURE__ */ jsx("span", { className: "font-mono", children: rejected }),
-          " \u2014",
-          " ",
-          s.unsupportedFileType(field.accept ?? "")
+          " \u2014 ",
+          s.unsupportedFileType(hint)
         ] }),
         !showUrl ? /* @__PURE__ */ jsxs(
           "button",
@@ -510,11 +557,13 @@ function FileField({
           {
             type: "text",
             autoFocus: true,
-            value: value?.url ?? "",
+            value: urlText,
             disabled: busy,
+            "aria-label": s.fileUrlAria(fieldLabel(field.title, field.name, presentation)),
             placeholder: s.urlPlaceholder,
             onChange: (e) => {
               setLocal(null);
+              setTypedUrl(e.target.value);
               onChange(e.target.value ? { url: e.target.value } : void 0);
             },
             className: cn(fieldControlClass, "h-9 px-3 font-mono text-[12px]")
@@ -556,8 +605,17 @@ function PdfPreview({ src }) {
     }
   );
 }
+function fileChipSubtitle(url, filename, formats, presentation, strings) {
+  if (url === void 0) return void 0;
+  const summary = encodedFileSummary(url, strings);
+  if (summary !== void 0) return summary;
+  if (presentation === "studio" || isReadableLink(url)) return url;
+  return filename ? formatOfFilename(formats, filename)?.label : void 0;
+}
 function FileChip({
   value,
+  formats,
+  presentation,
   disabled,
   onClear,
   canPreview,
@@ -566,15 +624,16 @@ function FileChip({
 }) {
   const s = useFieldStrings();
   const url = value?.url;
+  const filename = value?.filename;
   const subtitle = useMemo(
-    () => url === void 0 ? void 0 : encodedFileSummary(url, s) ?? url,
-    [url, s]
+    () => 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: [
     /* @__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__ */ jsx("p", { className: "truncate text-[13px] font-medium text-foreground", children: value?.filename ?? s.uploadedFile }),
-      /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[10.5px] text-muted-foreground", children: subtitle })
+      subtitle && /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[10.5px] text-muted-foreground", children: subtitle })
     ] }),
     canPreview && /* @__PURE__ */ jsxs(
       "button",
@@ -773,7 +832,9 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 var CLEAR_VALUE = "__none__";
 function EnumField({ field, value, onChange, id, error, disabled }) {
   const s = useFieldStrings();
-  const isSegmented = field.options.length <= 4 && field.options.every((o) => o.length <= 16);
+  const presentation = useFieldPresentation();
+  const labelOf = enumLabeler(field.options, presentation);
+  const isSegmented = field.options.length <= 4 && field.options.every((o) => labelOf(o).length <= 16);
   const domId = useFieldDomId(id);
   return /* @__PURE__ */ jsx(
     FieldShell,
@@ -797,7 +858,7 @@ function EnumField({ field, value, onChange, id, error, disabled }) {
             value: value ?? "",
             onValueChange: (next) => onChange(next === "" ? void 0 : next),
             disabled,
-            "aria-label": field.title ?? field.name,
+            "aria-label": fieldLabel(field.title, field.name, presentation),
             className: "flex flex-wrap justify-start gap-1.5",
             children: field.options.map((option) => /* @__PURE__ */ jsxs(
               ToggleGroupItem,
@@ -807,7 +868,7 @@ function EnumField({ field, value, onChange, id, error, disabled }) {
                 className: "h-9 min-w-0 gap-1.5 border-border bg-input px-3 text-[13px] text-muted-foreground hover:bg-muted hover:text-foreground data-[state=on]:border-primary/40 data-[state=on]:bg-primary/10 data-[state=on]:font-medium data-[state=on]:text-foreground",
                 children: [
                   value === option && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary", strokeWidth: 2.5, "aria-hidden": "true" }),
-                  option
+                  labelOf(option)
                 ]
               },
               option
@@ -824,7 +885,7 @@ function EnumField({ field, value, onChange, id, error, disabled }) {
             /* @__PURE__ */ jsx(SelectTrigger, { id: domId, "aria-invalid": !!error, className: "h-11", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: s.selectPlaceholder }) }),
             /* @__PURE__ */ jsxs(SelectContent, { children: [
               /* @__PURE__ */ jsx(SelectItem, { value: CLEAR_VALUE, children: s.selectPlaceholder }),
-              field.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: option }, option))
+              field.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: labelOf(option) }, option))
             ] })
           ]
         }
@@ -1345,11 +1406,12 @@ function ResultEnvProvider({
   resolveUrl,
   resolveShareUrl,
   proseImages,
+  tableColumns,
   children
 }) {
   const env = useMemo(
-    () => ({ resolveUrl, resolveShareUrl, proseImages }),
-    [resolveUrl, resolveShareUrl, proseImages]
+    () => ({ resolveUrl, resolveShareUrl, proseImages, tableColumns }),
+    [resolveUrl, resolveShareUrl, proseImages, tableColumns]
   );
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: env, children });
 }
@@ -1365,6 +1427,12 @@ function useResolveShareUrl() {
 function useProseImages() {
   return use(ResultEnvContext).proseImages ?? "link";
 }
+var DEFAULT_TABLE_COLUMNS = 5;
+function useTableColumns() {
+  const budget = use(ResultEnvContext).tableColumns;
+  if (budget === void 0 || Number.isNaN(budget)) return DEFAULT_TABLE_COLUMNS;
+  return Math.max(1, Math.floor(budget));
+}
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -1811,6 +1879,18 @@ function DateValue({ value }) {
   if (!content) return /* @__PURE__ */ jsx(Absent, {});
   return /* @__PURE__ */ jsx("span", { className: "text-[13px] text-foreground", children: formatDateContent(content) });
 }
+function EnumValue({
+  field,
+  value,
+  compact
+}) {
+  const presentation = useFieldPresentation();
+  const shown = typeof value === "string" ? enumLabeler(field.options, presentation)(value) : value;
+  return /* @__PURE__ */ jsx(Scalar, { value: shown, compact });
+}
+function cellTitle(column, cell, presentation) {
+  return column.kind === "enum" && typeof cell === "string" ? enumLabeler(column.options, presentation)(cell) : String(cell);
+}
 function fileLabel(url, filename, strings) {
   if (filename) return filename;
   const encoded = encodedFileSummary(url, strings);
@@ -1829,16 +1909,18 @@ function CopyButton({
   title
 }) {
   const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (!copied) return;
+    const timer = window.setTimeout(() => setCopied(false), 1500);
+    return () => window.clearTimeout(timer);
+  }, [copied]);
   if (typeof navigator === "undefined" || !navigator.clipboard) return null;
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       onClick: () => {
-        const done = () => {
-          setCopied(true);
-          window.setTimeout(() => setCopied(false), 1500);
-        };
+        const done = () => setCopied(true);
         if (!provide) {
           void navigator.clipboard.writeText(value ?? "").then(done);
           return;
@@ -2118,6 +2200,8 @@ function LeafValue({
       return /* @__PURE__ */ jsx(ImageValue, { value, compact });
     case "object":
       return compact ? /* @__PURE__ */ jsx(RecordSummary, { field, value }) : /* @__PURE__ */ jsx(Scalar, { value });
+    case "enum":
+      return /* @__PURE__ */ jsx(EnumValue, { field, value, compact });
     default:
       return /* @__PURE__ */ jsx(Scalar, { value, compact });
   }
@@ -2126,7 +2210,7 @@ function RecordSummary({ field, value }) {
   const s = useFieldStrings();
   if (isNativeDateNode(field)) return /* @__PURE__ */ jsx(DateValue, { value });
   if (!isRecord(value) || Object.keys(value).length === 0) return /* @__PURE__ */ jsx(Absent, {});
-  const naming = isNativeHtmlNode(field) ? void 0 : field.fields.find((member) => member.kind === "text") ?? field.fields.find((member) => member.kind === "prose");
+  const naming = isNativeHtmlNode(field) ? void 0 : recordNameField(field.fields) ?? field.fields.find((member) => member.kind === "prose");
   if (naming === void 0) {
     return /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-[12.5px] text-muted-foreground", children: s.fieldsCount(field.fields.length) });
   }
@@ -2199,8 +2283,10 @@ function fitsACellWhole(field) {
       return true;
     case "text":
       return field.maxLength !== void 0 && field.maxLength <= CELL_LENGTH_LIMIT;
+    case "object":
+      return isNativeDateNode(field);
     case "list":
-      return fitsACellWhole(field.item);
+      return isInlineColumn(field) && fitsACellWhole(field.item);
     default:
       return false;
   }
@@ -2213,10 +2299,12 @@ function ObjectTable({
 }) {
   const s = useFieldStrings();
   const presentation = useFieldPresentation();
+  const budget = useTableColumns();
   const scrollerRef = useRef(null);
   const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
   const [viewportWidth, setViewportWidth] = useState();
-  const canExpand = columns.some((column) => !fitsACellWhole(column));
+  const { shown, hidden, name } = chooseColumns(columns, budget);
+  const canExpand = hidden > 0 || shown.some((column) => column !== name && !fitsACellWhole(column));
   useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
@@ -2261,7 +2349,7 @@ function ObjectTable({
         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 }) }),
-            columns.map((column) => /* @__PURE__ */ jsx(
+            shown.map((column) => /* @__PURE__ */ jsx(
               "th",
               {
                 scope: "col",
@@ -2275,7 +2363,7 @@ function ObjectTable({
             ))
           ] }) }),
           /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => {
-            const isOpen = expanded.has(index);
+            const isOpen = canExpand && expanded.has(index);
             return /* @__PURE__ */ jsx(Fragment$1, { 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",
@@ -2288,7 +2376,7 @@ function ObjectTable({
                   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: columns.length, className: "bg-card/40 p-0", children: /* @__PURE__ */ jsx(
+              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",
@@ -2303,16 +2391,16 @@ function ObjectTable({
                   } : {},
                   children: /* @__PURE__ */ jsx(ResultField, { field: element, value: item, hideLabel: true })
                 }
-              ) }) : columns.map((column) => {
+              ) }) : 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.kind === "list" && isInlineColumn(column) ? "min-w-[16ch]" : "truncate"
+                      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: String(cell) } : {},
+                    ...typeof cell === "string" || typeof cell === "number" ? { title: cellTitle(column, cell, presentation) } : {},
                     children: /* @__PURE__ */ jsx(LeafValue, { field: column, value: cell, compact: true })
                   }
                 ) }, column.name);
@@ -2379,10 +2467,31 @@ function ImageGallery({ items }) {
 function FileRows({ items, kind }) {
   return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border overflow-hidden rounded-lg border border-border", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "bg-card/40 px-3.5 py-2", children: kind === "document" ? /* @__PURE__ */ jsx(DocumentValue, { value: item }) : /* @__PURE__ */ jsx(ImageValue, { value: item, inRow: true }) }, index)) });
 }
-function tableColumns(item) {
+function recordColumns(item) {
   if (item.kind !== "object" || item.fields.length === 0) return void 0;
   return item.fields;
 }
+function recordNameField(fields) {
+  return fields.find((member) => member.kind === "text");
+}
+function columnTier(field, name) {
+  if (field === name) return 1;
+  if (field.kind !== "list" && fitsACellWhole(field)) return 2;
+  if (field.kind === "text" || field.kind === "list" && isInlineColumn(field)) return 3;
+  return 4;
+}
+function chooseColumns(fields, budget) {
+  const name = recordNameField(fields);
+  if (fields.length <= budget) return { shown: fields, hidden: 0, ...name ? { name } : {} };
+  const kept = new Set(
+    fields.map((field, index) => ({ field, index, tier: columnTier(field, name) })).sort((a, b) => a.tier - b.tier || a.index - b.index).slice(0, budget).map(({ field }) => field)
+  );
+  return {
+    shown: fields.filter((field) => kept.has(field)),
+    hidden: fields.length - kept.size,
+    ...name ? { name } : {}
+  };
+}
 function ResultField({ field, value, depth = 0, hideLabel = false }) {
   const s = useFieldStrings();
   const unwrapped = unwrap(field, value);
@@ -2454,13 +2563,21 @@ function ResultField({ field, value, depth = 0, hideLabel = false }) {
     }
     case "list": {
       const items = Array.isArray(unwrapped) ? unwrapped : [];
-      const columns = tableColumns(field.item);
+      const columns = recordColumns(field.item);
       return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
           header,
           /* @__PURE__ */ jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: s.itemsCount(items.length) })
         ] }),
-        items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[13px] italic text-muted-foreground", children: s.noItemsYet }) : columns ? (
+        items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[13px] italic text-muted-foreground", children: s.noItemsYet }) : isNativeValueNode(field.item) ? (
+          // A list of dates, pages or composites is a list of VALUES, each read
+          // by its own arm - one per line. Their nodes are `object` (or, for a
+          // composite, `unknown`), so the branches below would tabulate a
+          // date's `date` and `time`, print a page's markup source down a
+          // column named by it, and show a composite as JSON. The arm keyed by
+          // concept is the one that knows what each entry is.
+          /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/60 overflow-hidden rounded-lg border border-border", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "bg-card/40 px-3 py-1.5", children: /* @__PURE__ */ jsx(ResultField, { field: field.item, value: item, depth: depth + 1, hideLabel: true }) }, index)) })
+        ) : columns ? (
           // Same shape every row: the labels are column headers, not per-row
           // labels. See `ObjectTable`.
           /* @__PURE__ */ jsx(
@@ -2616,6 +2733,11 @@ function highlight(json) {
 function JsonView({ value }) {
   const s = useFieldStrings();
   const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (!copied) return;
+    const timer = window.setTimeout(() => setCopied(false), 1500);
+    return () => window.clearTimeout(timer);
+  }, [copied]);
   const text = value === null || value === void 0 ? void 0 : typeof value === "object" ? stringifyValue(value) : JSON.stringify(value);
   if (text === void 0) {
     return /* @__PURE__ */ jsx(Absent, {});
@@ -2626,10 +2748,7 @@ function JsonView({ value }) {
       {
         type: "button",
         onClick: () => {
-          void navigator.clipboard.writeText(text).then(() => {
-            setCopied(true);
-            window.setTimeout(() => setCopied(false), 1500);
-          });
+          void navigator.clipboard.writeText(text).then(() => setCopied(true));
         },
         "aria-label": s.copyJson,
         className: "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
@@ -2717,5 +2836,5 @@ function StuffViewer({
 }
 
 export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EnumField, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, HtmlPreview, ImageField, JsonView, ListField, Markdown, NumberField, ObjectField, OptionalToggle, ProseField, ResultEnvProvider, ResultField, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, cn, downloadStuff, fieldControlClass, humanizeFieldName, useFieldDomId, useFieldPresentation, useFieldStrings, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-KG4IYFWI.js.map
-//# sourceMappingURL=chunk-KG4IYFWI.js.map
+//# sourceMappingURL=chunk-G6BWZUGV.js.map
+//# sourceMappingURL=chunk-G6BWZUGV.js.map