@pipelex/mthds-form 0.5.0 → 0.7.0

package/dist/react/index.js

@@ -1,19 +1,25 @@
 "use client";
+import { collectStuffFiles } from '../chunk-4BSBBG2T.js';
+import { isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isViewableUrl, readDateContent, formatDateContent, readImageContent, readDocumentContent } from '../chunk-45C2MKK6.js';
+import { conceptCategory } from '../chunk-25I6JDIK.js';
+import { isAcceptedFile, acceptMapForKind } from '../chunk-2JWRG53S.js';
 import { isFilled } from '../chunk-PM55AHRO.js';
 import { toStoredDateValue, toDateInputValue } from '../chunk-GKV77RAS.js';
 import { ownProp } from '../chunk-V3OV2XQT.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ChevronDown, ChevronUp, Check, List, Braces, ListChecks, ToggleLeft, Hash, Image, FileText, CalendarDays, Type, Loader2, Upload, Link2, ImageOff, EyeOff, Eye, X, Minus, Plus, Trash2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, List, Braces, ListChecks, ToggleLeft, Hash, Image, FileText, CalendarDays, Type, Loader2, Upload, Link2, ImageOff, EyeOff, Eye, X, Minus, Plus, Trash2, Copy, Download, ChevronRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React2 from 'react';
-import { createContext, use, useId, useMemo, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { createContext, use, useId, useMemo, useContext, useState, useRef, useCallback, useEffect, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { useDropzone } from 'react-dropzone';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { cva } from 'class-variance-authority';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { marked } from 'marked';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -164,6 +170,23 @@ var DEFAULT_FIELD_STRINGS = {
   preview: "Preview",
   removeFileAria: "Remove file",
   previewUnavailablePdf: "Preview unavailable - open to view.",
+  // U+002D HYPHEN-MINUS, deliberately: not an en dash, not an em dash.
+  resultAbsent: "-",
+  resultAbsentDescription: "Not provided",
+  resultUndescribed: "No output descriptor for this pipe \u2014 showing the raw value.",
+  toggleRowDetails: (index) => `Show or hide the details of row ${index}`,
+  rowDetailsColumn: "Details",
+  copyUrl: "Copy the URL",
+  copyText: "Copy the text",
+  download: "Download",
+  downloading: "Downloading\u2026",
+  viewRendered: "Result",
+  viewJson: "JSON",
+  copyJson: "Copy the JSON",
+  resultViewGroup: "Result view",
+  yes: "Yes",
+  no: "No",
+  unsupportedFileType: (accept) => `That file type is not supported. Accepted formats: ${accept}.`,
   hideOptionalFields: "Hide optional fields",
   hideOptionalInputs: "Hide optional inputs",
   optionalFieldsCount: (count) => count === 1 ? "1 optional field" : `${count} optional fields`,
@@ -195,13 +218,13 @@ function FieldShell({
   const s = useFieldStrings();
   const presentation = useFieldPresentation();
   const isApp = presentation === "app";
-  const Label2 = htmlFor ? "label" : "div";
+  const Label3 = htmlFor ? "label" : "div";
   const labelText = fieldLabel(title, name, presentation);
   const showLabel = labelText.trim() !== "";
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
       showLabel && /* @__PURE__ */ jsx(
-        Label2,
+        Label3,
         {
           ...htmlFor ? { htmlFor } : {},
           className: cn(
@@ -212,7 +235,7 @@ function FieldShell({
         }
       ),
       !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef, category }),
-      !required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
+      !required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: s.optionalBadge })
     ] }),
     description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: description }),
     isApp && error ? /* @__PURE__ */ jsx("div", { className: "rounded-lg ring-1 ring-destructive/70 ring-offset-4 ring-offset-background", children }) : children,
@@ -259,9 +282,7 @@ function DateField({ field, value, onChange, id, error, disabled }) {
 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;
-function isDirectlyViewable(url) {
-  return !!url && (/^https?:/i.test(url) || /^data:/i.test(url) || /^blob:/i.test(url));
-}
+var isDirectlyViewable = isViewableUrl;
 function dataUrlMime(url) {
   return DATA_URL_MIME_RE.exec(url)?.[1]?.toLowerCase();
 }
@@ -296,18 +317,30 @@ function FileField({
     setLocalPreview(next);
   }, []);
   useEffect(() => () => setLocal(null), [setLocal]);
+  const [rejected, setRejected] = useState(null);
   const handleFile = useCallback(
     (file) => {
+      if (!isAcceptedFile(field.kind, file)) {
+        setRejected(file.name);
+        return;
+      }
+      setRejected(null);
       setLocal({ objectUrl: URL.createObjectURL(file), type: file.type });
       onDropFile(file);
     },
-    [setLocal, onDropFile]
+    [field.kind, setLocal, onDropFile]
   );
   const busy = disabled || uploading;
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     maxFiles: 1,
     multiple: false,
     disabled: busy,
+    // Filters the OS picker so a wrong file is hard to choose in the first
+    // place. It is NOT the enforcement: a drag-and-drop bypasses the picker
+    // 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),
     // 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
@@ -316,12 +349,21 @@ function FileField({
     onDrop: (files) => {
       const file = files[0];
       if (file) handleFile(file);
+    },
+    // react-dropzone rejects a file its own matcher refuses without ever calling
+    // `onDrop`, so without this a wrong drop is silently swallowed - the control
+    // simply does nothing, which reads as a broken dropzone rather than a
+    // refused file.
+    onDropRejected: (rejections) => {
+      const name = rejections[0]?.file.name;
+      if (name) setRejected(name);
     }
   });
   const clear = useCallback(() => {
     setLocal(null);
     setResolved(null);
     setPreviewOpen(false);
+    setRejected(null);
     onChange(void 0);
   }, [setLocal, onChange]);
   const localIsCurrent = !!localPreview && (localPreview.boundUrl === void 0 || localPreview.boundUrl === value?.url);
@@ -424,6 +466,12 @@ 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 ?? "")
+        ] }),
         !showUrl ? /* @__PURE__ */ jsxs(
           "button",
           {
@@ -928,7 +976,7 @@ function ObjectField({ field, value, onChange, id, error, env }) {
         }
       ),
       !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" }),
-      !field.required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
+      !field.required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: s.optionalBadge })
     ] }),
     field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
     /* @__PURE__ */ jsxs(
@@ -997,7 +1045,7 @@ function ListField({ field, value, onChange, id, error, env }) {
       ),
       !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "list" }),
       /* @__PURE__ */ jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: field.itemCount !== void 0 && field.maxItemCount === field.itemCount ? s.itemsCountOf(items.length, field.itemCount) : s.itemsCount(items.length) }),
-      !field.required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
+      !field.required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: s.optionalBadge })
     ] }),
     field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
@@ -1265,7 +1313,1305 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
       );
   }
 }
+var ResultEnvContext = createContext({});
+function ResultEnvProvider({
+  resolveUrl,
+  resolveShareUrl,
+  children
+}) {
+  const env = useMemo(() => ({ resolveUrl, resolveShareUrl }), [resolveUrl, resolveShareUrl]);
+  return /* @__PURE__ */ jsx(ResultEnvContext, { value: env, children });
+}
+function useResolvedUrl(url) {
+  return use(ResultEnvContext).resolveUrl?.(url) ?? url;
+}
+function useResolveUrl() {
+  return use(ResultEnvContext).resolveUrl;
+}
+function useResolveShareUrl() {
+  return use(ResultEnvContext).resolveShareUrl;
+}
+var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipRoot = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React2.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 max-w-xs rounded-md border border-border bg-popover px-2.5 py-1.5 text-[12px] leading-relaxed text-popover-foreground shadow-md",
+      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var DEFAULT_IMG_SRC = "data: https:";
+function frameStyles(color, mutedColor, borderColor, font) {
+  return `
+    :root { color-scheme: inherit; }
+    body {
+      margin: 0;
+      color: ${color};
+      font-family: ${font};
+      font-size: 13px;
+      line-height: 1.55;
+      background: transparent;
+      overflow-wrap: anywhere;
+    }
+    :where(h1, h2, h3, h4, h5, h6) { margin: 0 0 0.4em; line-height: 1.25; }
+    :where(h1) { font-size: 1.4em; }
+    :where(h2) { font-size: 1.2em; }
+    :where(h3) { font-size: 1.05em; }
+    :where(p, ul, ol, table, pre, blockquote) { margin: 0 0 0.75em; }
+    :where(ul, ol) { padding-inline-start: 1.25em; }
+    :where(table) { border-collapse: collapse; width: 100%; }
+    :where(th, td) {
+      border: 1px solid ${borderColor};
+      padding: 4px 8px;
+      text-align: left;
+      vertical-align: top;
+    }
+    :where(th) { font-weight: 600; }
+    :where(caption) { caption-side: top; color: ${mutedColor}; padding-bottom: 4px; text-align: left; }
+    :where(a) { color: inherit; }
+    :where(code, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
+    :where(pre) { white-space: pre-wrap; }
+    :where(blockquote) { border-inline-start: 2px solid ${borderColor}; margin-inline-start: 0; padding-inline-start: 0.75em; color: ${mutedColor}; }
+    :where(img) { max-width: 100%; height: auto; }
+    :where(hr) { border: 0; border-top: 1px solid ${borderColor}; }
+    :where(*:last-child) { margin-bottom: 0; }
+  `;
+}
+function frameDocument(content, styles, imgSrc) {
+  const body = content.cssClass ? (
+    // The class the value states, honoured the way the runtime's own HTML
+    // rendering honours it: as a wrapper, not as something merged into ours.
+    `<div class="${escapeAttribute(content.cssClass)}">${content.innerHtml}</div>`
+  ) : content.innerHtml;
+  return [
+    '<!doctype html><html><head><meta charset="utf-8">',
+    `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src ${imgSrc}; base-uri 'none'; form-action 'none'">`,
+    `<style>${styles}</style></head><body>${body}</body></html>`
+  ].join("");
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function HtmlPreview({
+  content,
+  maxHeight = 1400,
+  imgSrc = DEFAULT_IMG_SRC
+}) {
+  const hostRef = useRef(null);
+  const frameRef = useRef(null);
+  const [doc, setDoc] = useState(null);
+  const [height, setHeight] = useState(0);
+  useIsomorphicLayoutEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const computed = getComputedStyle(host);
+    setDoc(
+      frameDocument(
+        content,
+        frameStyles(
+          computed.color,
+          computed.getPropertyValue("--muted-foreground").trim() || computed.color,
+          computed.borderColor || computed.color,
+          computed.fontFamily
+        ),
+        imgSrc
+      )
+    );
+  }, [content, imgSrc]);
+  const measure = () => {
+    const body = frameRef.current?.contentDocument?.body;
+    if (body) setHeight(body.scrollHeight);
+  };
+  useEffect(() => {
+    if (!doc || !hostRef.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(hostRef.current);
+    return () => observer.disconnect();
+  }, [doc]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      className: "overflow-hidden rounded-lg border border-border bg-card/40 px-3.5 py-3 text-[13px] text-foreground",
+      children: doc === null ? null : /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          ref: frameRef,
+          title: content.cssClass ? `HTML result (${content.cssClass})` : "HTML result",
+          srcDoc: doc,
+          onLoad: measure,
+          sandbox: "allow-same-origin",
+          style: {
+            display: "block",
+            width: "100%",
+            border: 0,
+            height: height === 0 ? void 0 : Math.min(height, maxHeight),
+            maxHeight
+          }
+        }
+      )
+    }
+  );
+}
+var LEX_OPTIONS = { gfm: true, breaks: true };
+function Markdown({ text, className }) {
+  const tokens = React2.useMemo(() => marked.lexer(text, LEX_OPTIONS), [text]);
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2 text-[13px] leading-relaxed text-foreground", className), children: /* @__PURE__ */ jsx(Blocks, { tokens }) });
+}
+var HEADING_CLASS = {
+  1: "text-[16px] font-semibold",
+  2: "text-[14.5px] font-semibold",
+  3: "text-[13.5px] font-semibold",
+  4: "text-[13px] font-semibold",
+  5: "text-[13px] font-semibold",
+  6: "text-[13px] font-semibold"
+};
+function Blocks({ tokens }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ jsx(Block, { token }, index)) });
+}
+function Block({ token }) {
+  switch (token.type) {
+    case "space":
+      return null;
+    case "heading": {
+      const heading = token;
+      const level = Math.min(Math.max(heading.depth, 1), 6);
+      const Tag = `h${level}`;
+      return /* @__PURE__ */ jsx(Tag, { className: cn("mt-3 first:mt-0", HEADING_CLASS[level]), children: /* @__PURE__ */ jsx(Inline, { tokens: heading.tokens }) });
+    }
+    case "paragraph":
+      return /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Inline, { tokens: token.tokens }) });
+    // A `text` token in BLOCK position, which is what a tight list's items are
+    // made of: the lexer wraps a loose item's content in a paragraph and a
+    // tight one's in a bare `text`. Without this arm it fell through to the raw
+    // fallback below and a bulleted `**Type:** …` rendered with its asterisks
+    // showing - typeset everywhere except inside a list, which is where model
+    // output puts most of its emphasis.
+    case "text":
+      return /* @__PURE__ */ jsx(Inline, { tokens: token.tokens ?? [token] });
+    case "list": {
+      const list = token;
+      const Tag = list.ordered ? "ol" : "ul";
+      return /* @__PURE__ */ jsx(
+        Tag,
+        {
+          className: cn("space-y-1 ps-5", list.ordered ? "list-decimal" : "list-disc"),
+          ...list.ordered && list.start !== 1 ? { start: Number(list.start) } : {},
+          children: list.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "marker:text-muted-foreground", children: [
+            item.task ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: item.checked ?? false,
+                disabled: true,
+                readOnly: true,
+                className: "me-1.5 align-middle"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(Blocks, { tokens: item.tokens })
+          ] }, index))
+        }
+      );
+    }
+    case "code": {
+      const code = token;
+      return (
+        // WRAPPED, not scrolled. A code block in a side panel is usually not
+        // code at all: it is a model that opened a fence and did not close it,
+        // or closed one it never opened, and the rest of a report ends up
+        // inside it. Scrolling that sideways hides the text behind a scrollbar
+        // for no gain — the lines are prose, and prose wraps. Real code loses
+        // its column alignment and keeps every character, which is the better
+        // half of that trade at this width.
+        /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words rounded-md border border-border bg-card/40 p-2.5 text-[12px]", children: /* @__PURE__ */ jsx("code", { children: code.text }) })
+      );
+    }
+    case "blockquote":
+      return /* @__PURE__ */ jsx("blockquote", { className: "border-s-2 border-border ps-3 text-muted-foreground", children: /* @__PURE__ */ jsx(Blocks, { tokens: token.tokens }) });
+    case "hr":
+      return /* @__PURE__ */ jsx("hr", { className: "border-border" });
+    case "table": {
+      const table = token;
+      return (
+        // The same overflow rule the result tables follow: a wide table scrolls
+        // inside its own box rather than widening the panel around it.
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full border-collapse text-[12.5px]", children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border bg-card/40", children: table.header.map((cell, index) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: "px-2.5 py-1.5 text-start font-semibold",
+              style: alignOf(table.align[index]),
+              children: /* @__PURE__ */ jsx(Inline, { tokens: cell.tokens })
+            },
+            index
+          )) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60 last:border-b-0", children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "px-2.5 py-1.5 align-top",
+              style: alignOf(table.align[cellIndex]),
+              children: /* @__PURE__ */ jsx(Inline, { tokens: cell.tokens })
+            },
+            cellIndex
+          )) }, rowIndex)) })
+        ] }) })
+      );
+    }
+    // `html` and anything this version of the lexer grows that we have no arm
+    // for: shown as its own source text. Rendering markup we have decided not to
+    // execute as the characters it is made of is the honest fallback - it never
+    // silently drops content, and it never injects any.
+    default:
+      return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: rawOf(token) });
+  }
+}
+function Inline({ tokens }) {
+  if (!tokens) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ jsx(InlineToken, { token }, index)) });
+}
+function InlineToken({ token }) {
+  switch (token.type) {
+    case "text": {
+      const text = token;
+      return text.tokens ? /* @__PURE__ */ jsx(Inline, { tokens: text.tokens }) : /* @__PURE__ */ jsx(Fragment, { children: decode(text.text) });
+    }
+    case "escape":
+      return /* @__PURE__ */ jsx(Fragment, { children: token.text });
+    case "strong":
+      return /* @__PURE__ */ jsx("strong", { className: "font-semibold", children: /* @__PURE__ */ jsx(Inline, { tokens: token.tokens }) });
+    case "em":
+      return /* @__PURE__ */ jsx("em", { className: "italic", children: /* @__PURE__ */ jsx(Inline, { tokens: token.tokens }) });
+    case "del":
+      return /* @__PURE__ */ jsx("del", { className: "line-through", children: /* @__PURE__ */ jsx(Inline, { tokens: token.tokens }) });
+    case "codespan":
+      return /* @__PURE__ */ jsx("code", { className: "rounded border border-border bg-card/40 px-1 py-0.5 text-[0.92em]", children: decode(token.text) });
+    case "br":
+      return /* @__PURE__ */ jsx("br", {});
+    case "link": {
+      const link = token;
+      const href = safeHref(link.href);
+      if (!href) return /* @__PURE__ */ jsx(Inline, { tokens: link.tokens });
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noreferrer noopener",
+          className: "underline underline-offset-2",
+          children: /* @__PURE__ */ jsx(Inline, { tokens: link.tokens })
+        }
+      );
+    }
+    case "image": {
+      const image = token;
+      const src = safeHref(image.href);
+      if (!src) return /* @__PURE__ */ jsx(Fragment, { children: image.text });
+      return /* @__PURE__ */ jsx("img", { src, alt: image.text, className: "max-w-full rounded-md" });
+    }
+    default:
+      return /* @__PURE__ */ jsx(Fragment, { children: rawOf(token) });
+  }
+}
+function safeHref(href) {
+  const trimmed = href.trim();
+  if (/^(https?:|mailto:)/i.test(trimmed)) return trimmed;
+  if (/^[#/]/.test(trimmed)) return trimmed;
+  return void 0;
+}
+function alignOf(align) {
+  return align ? { textAlign: align } : void 0;
+}
+function rawOf(token) {
+  return "raw" in token && typeof token.raw === "string" ? token.raw : "";
+}
+var ENTITIES = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'",
+  "&#x27;": "'"
+};
+function decode(text) {
+  return text.replace(/&(?:amp|lt|gt|quot|#39|#x27);/g, (entity) => ENTITIES[entity] ?? entity);
+}
+function unwrap(field, value) {
+  if (!field.contentKey) return value;
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return value;
+  const unwrapped = ownProp(value, field.contentKey);
+  return unwrapped === void 0 ? value : unwrapped;
+}
+function Described({ description, children }) {
+  if (!description) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        tabIndex: 0,
+        className: "-mx-1 cursor-help rounded px-1 outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: description })
+  ] }) });
+}
+function ResultHeader({ field }) {
+  return /* @__PURE__ */ jsx(Label2, { field, describe: true });
+}
+function Label2({ field, describe = false }) {
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
+  const labelText = fieldLabel(field.title, field.name, presentation);
+  if (labelText.trim() === "") {
+    return /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: conceptCategory(field) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
+    /* @__PURE__ */ jsx(Described, { description: describe ? field.description : void 0, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-[13px] font-semibold text-foreground",
+          isApp ? "text-[13.5px]" : "font-mono"
+        ),
+        children: labelText
+      }
+    ) }),
+    !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: conceptCategory(field) })
+  ] });
+}
+function Absent() {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsxs("span", { className: "text-[13px] text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: s.resultAbsent }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: s.resultAbsentDescription })
+  ] });
+}
+function stringifyValue(value) {
+  try {
+    const text = JSON.stringify(
+      value,
+      (_key, member) => typeof member === "bigint" ? member.toString() : member
+    );
+    if (text === void 0 || text === "{}" || text === "[]") return void 0;
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch {
+    const keys = Array.isArray(value) ? [] : Object.keys(value);
+    return keys.length > 0 ? `{ ${keys.join(", ")} }` : void 0;
+  }
+}
+function RawValue({ value, compact }) {
+  const text = stringifyValue(value);
+  if (text === void 0) return /* @__PURE__ */ jsx(Absent, {});
+  return compact ? /* @__PURE__ */ jsx("span", { title: text, className: "truncate font-mono text-[12px] text-foreground", children: text }) : /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-words rounded-md border border-border bg-card/40 px-2.5 py-1.5 font-mono text-[12px] leading-relaxed text-foreground", children: text });
+}
+function Scalar({ value, compact = false }) {
+  if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx(Absent, {});
+  if (typeof value === "object") return /* @__PURE__ */ jsx(RawValue, { value, compact });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-[13px] leading-relaxed text-foreground",
+        compact ? "whitespace-nowrap" : "whitespace-pre-wrap"
+      ),
+      children: String(value)
+    }
+  );
+}
+function Bool({ value, compact = false }) {
+  const s = useFieldStrings();
+  if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx(Absent, {});
+  if (typeof value !== "boolean") return /* @__PURE__ */ jsx(Scalar, { value, compact });
+  return /* @__PURE__ */ jsx("span", { className: "text-[13px] text-foreground", children: value ? s.yes : s.no });
+}
+function DateValue({ value }) {
+  const content = readDateContent(value);
+  if (!content) return /* @__PURE__ */ jsx(Absent, {});
+  return /* @__PURE__ */ jsx("span", { className: "text-[13px] text-foreground", children: formatDateContent(content) });
+}
+function fileLabel(url, filename) {
+  if (filename) return filename;
+  const path = url.split(/[?#]/)[0] ?? url;
+  const segment = path.split("/").filter(Boolean).pop();
+  return segment && segment.length > 0 ? segment : url;
+}
+function CopyButton({
+  value,
+  provide,
+  label,
+  title
+}) {
+  const [copied, setCopied] = useState(false);
+  if (typeof navigator === "undefined" || !navigator.clipboard) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        const done = () => {
+          setCopied(true);
+          window.setTimeout(() => setCopied(false), 1500);
+        };
+        if (!provide) {
+          void navigator.clipboard.writeText(value ?? "").then(done);
+          return;
+        }
+        const text = provide();
+        if (typeof ClipboardItem === "function" && "write" in navigator.clipboard) {
+          void navigator.clipboard.write([
+            new ClipboardItem({
+              "text/plain": text.then((t) => new Blob([t], { type: "text/plain" }))
+            })
+          ]).then(done, () => void text.then((t) => navigator.clipboard.writeText(t)).then(done));
+          return;
+        }
+        void text.then((t) => navigator.clipboard.writeText(t)).then(done);
+      },
+      ...title ? { title } : {},
+      "aria-label": label,
+      className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+      children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
+    }
+  );
+}
+function CopyUrlButton({ url, storageUrl }) {
+  const s = useFieldStrings();
+  const resolveShare = useResolveShareUrl();
+  const provide = async () => {
+    if (resolveShare && storageUrl) {
+      const shared = await resolveShare(storageUrl);
+      if (shared) return shared;
+    }
+    return absoluteUrl(url);
+  };
+  return /* @__PURE__ */ jsx(CopyButton, { provide, label: s.copyUrl, title: url });
+}
+function absoluteUrl(url) {
+  if (!/^\/(?!\/)/.test(url) || typeof window === "undefined") return url;
+  return `${window.location.origin}${url}`;
+}
+function FileRef({
+  url,
+  storageUrl,
+  mimeType,
+  filename
+}) {
+  const label = fileLabel(url, filename);
+  const title = mimeType ? `${url} \xB7 ${mimeType}` : url;
+  return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+    isViewableUrl(url) ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noreferrer",
+        title,
+        className: "min-w-0 truncate font-mono text-[12px] text-foreground underline underline-offset-2",
+        children: label
+      }
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        title,
+        className: "min-w-0 truncate font-mono text-[12px] text-muted-foreground",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(CopyUrlButton, { url, ...storageUrl ? { storageUrl } : {} })
+  ] });
+}
+function paintableUrl(content, resolve) {
+  const resolved = resolve?.(content.url);
+  if (isViewableUrl(resolved)) return resolved;
+  if (isViewableUrl(content.publicUrl)) return content.publicUrl;
+  return isViewableUrl(content.url) ? content.url : void 0;
+}
+var PREVIEWABLE_EXT_RE = /\.(pdf|png|jpe?g|gif|webp|avif|svg)(\?|#|$)/i;
+var PREVIEWABLE_MIME_RE = /^(application\/pdf|image\/)/i;
+function previewableUrl(content, resolve) {
+  const url = paintableUrl(content, resolve);
+  if (!url) return void 0;
+  const named = content.filename ?? url;
+  const renderable = content.mimeType ? PREVIEWABLE_MIME_RE.test(content.mimeType) : PREVIEWABLE_EXT_RE.test(named);
+  return renderable ? url : void 0;
+}
+function DocumentPreview({ url, name }) {
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: url,
+      title: name,
+      loading: "lazy",
+      referrerPolicy: "no-referrer",
+      className: "h-[28rem] w-full rounded-lg border border-border bg-card/40"
+    }
+  );
+}
+function DocumentValue({ value }) {
+  const s = useFieldStrings();
+  const resolve = useResolveUrl();
+  const [open, setOpen] = useState(false);
+  const content = readDocumentContent(value);
+  if (!content) return /* @__PURE__ */ jsx(Absent, {});
+  const name = content.title ?? content.filename ?? fileLabel(content.url, content.filename);
+  const preview = previewableUrl(content, resolve);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2.5", children: [
+      /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
+        name && /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] text-foreground", children: name }),
+        /* @__PURE__ */ jsx(
+          FileRef,
+          {
+            url: paintableUrl(content, resolve) ?? content.url,
+            storageUrl: content.url,
+            mimeType: content.mimeType,
+            ...content.filename ? { filename: content.filename } : {}
+          }
+        ),
+        content.snippet && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-[12px] leading-relaxed text-muted-foreground", children: content.snippet })
+      ] }),
+      preview && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          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 focus-visible:outline-2 focus-visible:outline-offset-1",
+          children: [
+            open ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": true, className: "size-3.5" }),
+            s.preview
+          ]
+        }
+      )
+    ] }),
+    preview && open && /* @__PURE__ */ jsx(DocumentPreview, { url: preview, name })
+  ] });
+}
+function ImageValue({
+  value,
+  inGallery = false,
+  inRow = false,
+  compact = false
+}) {
+  const s = useFieldStrings();
+  const resolve = useResolveUrl();
+  const content = readImageContent(value);
+  if (!content) return /* @__PURE__ */ jsx(Absent, {});
+  const src = paintableUrl(content, resolve);
+  return /* @__PURE__ */ jsxs("div", { className: inGallery ? "space-y-1" : "space-y-1.5", children: [
+    src ? (
+      // Wrapped in a link: the picture is a PREVIEW of a file, and clicking a
+      // preview to see the thing it previews is what a reader expects. The
+      // reference underneath is the other half - a picture with no URL beside
+      // it is a result you can look at and cannot use.
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: src,
+          target: "_blank",
+          rel: "noreferrer",
+          title: content.url,
+          className: inGallery || compact ? "inline-block" : "block w-full",
+          children: /* @__PURE__ */ jsx(
+            LoadingImage,
+            {
+              src,
+              alt: content.caption ?? s.preview,
+              className: cn(
+                inGallery && "block aspect-square w-full object-cover",
+                // A cell is one line tall. An image column rendered at the standalone
+                // height turns every row into a picture and the table into a
+                // slideshow, so a cell gets a thumbnail and the row's expansion gets
+                // the picture.
+                compact && "h-10 w-auto rounded border border-border object-cover",
+                // On its own: the full width it is given, capped generously in
+                // height. `max-h-64` was a 256px thumbnail in a panel several
+                // times that tall — a generated report image is the RESULT here,
+                // not a decoration beside one, and it was unreadable at that size.
+                // `object-contain` keeps the aspect ratio when the cap bites.
+                !inGallery && !compact && "max-h-[44rem] w-full rounded-lg border border-border object-contain"
+              )
+            }
+          )
+        }
+      )
+    ) : inRow ? (
+      // The row variant of "nothing to paint": an icon and a name, exactly as
+      // a document row reads, because that is what this has become.
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+        /* @__PURE__ */ jsx(ImageOff, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+          FileRef,
+          {
+            url: content.url,
+            mimeType: content.mimeType,
+            ...content.filename ? { filename: content.filename } : {}
+          }
+        ) })
+      ] })
+    ) : inGallery ? (
+      // Nothing to paint, so the tile says what it is rather than dumping a
+      // ninety-character storage reference into a 140px box. This is what a
+      // host with no resolver sees, so it has to be a design and not a
+      // fallback.
+      /* @__PURE__ */ jsxs("div", { className: "flex aspect-square w-full flex-col items-center justify-center gap-1.5 px-2 text-center", children: [
+        /* @__PURE__ */ jsx(ImageOff, { "aria-hidden": true, className: "size-5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            title: content.url,
+            className: "w-full truncate font-mono text-[10.5px] text-muted-foreground",
+            children: fileLabel(content.url, content.filename)
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsx(
+      FileRef,
+      {
+        url: content.url,
+        mimeType: content.mimeType,
+        ...content.filename ? { filename: content.filename } : {}
+      }
+    ),
+    src && !compact && /* @__PURE__ */ jsx("div", { className: inGallery ? "px-2.5" : void 0, children: /* @__PURE__ */ jsx(
+      FileRef,
+      {
+        url: paintableUrl(content, resolve) ?? content.url,
+        storageUrl: content.url,
+        mimeType: content.mimeType,
+        ...content.filename ? { filename: content.filename } : {}
+      }
+    ) }),
+    content.caption && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "text-[12px] leading-relaxed text-muted-foreground",
+          inGallery && "px-2.5 pb-1.5"
+        ),
+        children: content.caption
+      }
+    )
+  ] });
+}
+var TABULAR_KINDS = /* @__PURE__ */ new Set(["text", "number", "boolean", "date", "enum"]);
+function LeafValue({
+  field,
+  value: raw,
+  compact = false
+}) {
+  const value = unwrap(field, raw);
+  switch (field.kind) {
+    case "list": {
+      const entries = Array.isArray(value) ? value : [];
+      return TABULAR_KINDS.has(field.item.kind) ? /* @__PURE__ */ jsx(ScalarChips, { field: field.item, items: entries }) : /* @__PURE__ */ jsx(ItemCount, { count: entries.length });
+    }
+    case "prose":
+      return compact ? /* @__PURE__ */ jsx(Scalar, { value, compact: true }) : typeof value === "string" && value !== "" ? /* @__PURE__ */ jsx(Markdown, { text: value }) : /* @__PURE__ */ jsx(Scalar, { value });
+    case "boolean":
+      return /* @__PURE__ */ jsx(Bool, { value, compact });
+    case "date":
+      return /* @__PURE__ */ jsx(DateValue, { value });
+    case "document":
+      return /* @__PURE__ */ jsx(DocumentValue, { value });
+    case "image":
+      return /* @__PURE__ */ jsx(ImageValue, { value, compact });
+    default:
+      return /* @__PURE__ */ jsx(Scalar, { value, compact });
+  }
+}
+function LoadingImage({ src, alt, className }) {
+  const [state, setState] = useState("loading");
+  const [current, setCurrent] = useState(src);
+  if (current !== src) {
+    setCurrent(src);
+    setState("loading");
+  }
+  return /* @__PURE__ */ jsxs("span", { className: "relative block", children: [
+    state === "loading" && /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "status",
+        "aria-label": alt,
+        className: "absolute inset-0 flex items-center justify-center rounded-lg border border-border bg-card/40",
+        children: /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-muted-foreground" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        onLoad: () => setState("done"),
+        onError: () => setState("done"),
+        className: cn(className, state === "loading" && "min-h-40 opacity-0")
+      }
+    )
+  ] });
+}
+function ScalarChips({ field, items }) {
+  return (
+    // `data-chips` is the hook the definition grid's value cell reaches through:
+    // `text-right` has no effect on flex children, so a row of tags would keep
+    // starting under its label while every value beside it ended at the right
+    // edge. The attribute keeps that one selector out of this component's own
+    // class list - chips are laid out the same way everywhere, and only the
+    // caller knows which edge they should end on.
+    /* @__PURE__ */ jsx("div", { "data-chips": true, className: "flex flex-wrap gap-1.5", children: items.map((item, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "rounded-md border border-border bg-card/40 px-2 py-0.5 text-[12.5px] text-foreground",
+        children: /* @__PURE__ */ jsx(LeafValue, { field, value: item })
+      },
+      index
+    )) })
+  );
+}
+function ItemCount({ count }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-[12.5px] text-muted-foreground", children: s.itemsCount(count) });
+}
+function isInlineColumn(field) {
+  if (field.kind === "list") return TABULAR_KINDS.has(field.item.kind);
+  return TABULAR_KINDS.has(field.kind);
+}
+var CELL_LENGTH_LIMIT = 80;
+var EXPAND_COLUMN = "2rem";
+function fitsACellWhole(field) {
+  switch (field.kind) {
+    case "boolean":
+    case "date":
+    case "number":
+    case "enum":
+      return true;
+    case "text":
+      return field.maxLength !== void 0 && field.maxLength <= CELL_LENGTH_LIMIT;
+    case "list":
+      return fitsACellWhole(field.item);
+    default:
+      return false;
+  }
+}
+function ObjectTable({
+  columns,
+  element,
+  items,
+  label
+}) {
+  const s = useFieldStrings();
+  const presentation = useFieldPresentation();
+  const scrollerRef = useRef(null);
+  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+  const [viewportWidth, setViewportWidth] = useState();
+  const canExpand = columns.some((column) => !fitsACellWhole(column));
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const measure = () => setViewportWidth(scroller.clientWidth);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, []);
+  const toggle = (index) => setExpanded((current) => {
+    const next = new Set(current);
+    if (!next.delete(index)) next.add(index);
+    return next;
+  });
+  return (
+    // `min-w-full` rather than `w-full`, and a floor under each cell: with
+    // `w-full` the table is pinned to the container's width, so twelve columns
+    // do not overflow - they crush, and a reading's date wraps onto four lines.
+    // A floor makes the table wider than the panel instead, which is what the
+    // scroller is for.
+    //
+    // A scrollable region must be reachable by keyboard. A table of values has
+    // nothing to tab to, so the region itself takes focus; without `tabIndex` the
+    // columns past the fold are reachable with a mouse and by no other means,
+    // which the a11y gate catches as `scrollable-region-focusable`. The name
+    // makes the focus stop announce itself rather than being a silent one.
+    //
+    // `group` rather than `region`, and that is not a detail: `region` is a
+    // LANDMARK, so every table would enter the document's landmark list, and two
+    // 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.
+    /* @__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 }) }),
+            columns.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 = 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 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 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: columns.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 })
+                }
+              ) }) : columns.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"
+                    ),
+                    ...typeof cell === "string" || typeof cell === "number" ? { title: String(cell) } : {},
+                    children: /* @__PURE__ */ jsx(LeafValue, { field: column, value: cell, compact: true })
+                  }
+                ) }, column.name);
+              })
+            ] }) }, index);
+          }) })
+        ] })
+      }
+    )
+  );
+}
+function CompositeValue({ members }) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: members.map((member) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-[12px] font-semibold text-foreground", children: member.name }),
+    /* @__PURE__ */ jsx(NativeValue, { value: member.value })
+  ] }, member.name)) });
+}
+function NativeValue({ value }) {
+  if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx(Absent, {});
+  const html = readHtmlContent(value);
+  if (html) return /* @__PURE__ */ jsx(HtmlPreview, { content: html });
+  const date = readDateContent(value);
+  if (date) return /* @__PURE__ */ jsx("span", { className: "text-[13px] text-foreground", children: formatDateContent(date) });
+  const document2 = readDocumentContent(value);
+  if (document2?.url !== void 0) {
+    return /* @__PURE__ */ jsx(
+      FileRef,
+      {
+        url: document2.url,
+        ...document2.mimeType !== void 0 ? { mimeType: document2.mimeType } : {},
+        ...document2.filename !== void 0 ? { filename: document2.filename } : {}
+      }
+    );
+  }
+  if (isRecord(value) && Array.isArray(value.items)) {
+    const items = value.items;
+    if (items.length === 0) return /* @__PURE__ */ jsx(Absent, {});
+    return /* @__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(NativeValue, { value: item }) }, index)) });
+  }
+  if (isRecord(value)) {
+    const text = value.text;
+    if (typeof text === "string") {
+      return text === "" ? /* @__PURE__ */ jsx(Absent, {}) : /* @__PURE__ */ jsx(Markdown, { text });
+    }
+  }
+  if (typeof value === "string") return /* @__PURE__ */ jsx(Markdown, { text: value });
+  if (typeof value !== "object") return /* @__PURE__ */ jsx(Scalar, { value });
+  return /* @__PURE__ */ jsx(RawValue, { value, compact: false });
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function ScalarLines({ field, items }) {
+  return /* @__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(LeafValue, { field, value: item }) }, index)) });
+}
+function ImageGallery({ items }) {
+  const anyViewable = items.some((item) => {
+    const content = readImageContent(item);
+    return content ? isViewableUrl(content.publicUrl) || isViewableUrl(content.url) : false;
+  });
+  if (!anyViewable) return /* @__PURE__ */ jsx(FileRows, { items, kind: "image" });
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border bg-card/40", children: /* @__PURE__ */ jsx(ImageValue, { value: item, inGallery: true }) }, index)) });
+}
+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) {
+  if (item.kind !== "object" || item.fields.length === 0) return void 0;
+  return item.fields;
+}
+function ResultField({ field, value, depth = 0, hideLabel = false }) {
+  const s = useFieldStrings();
+  const unwrapped = unwrap(field, value);
+  const header = hideLabel ? null : /* @__PURE__ */ jsx(Label2, { field, describe: true });
+  const copyText = (field.kind === "text" || field.kind === "prose") && typeof unwrapped === "string" && unwrapped !== "" ? unwrapped : void 0;
+  if (isNativeDateNode(field)) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      header,
+      /* @__PURE__ */ jsx(DateValue, { value: unwrapped })
+    ] });
+  }
+  if (isNativeHtmlNode(field)) {
+    const content = readHtmlContent(unwrapped);
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      header,
+      content ? /* @__PURE__ */ jsx(HtmlPreview, { content }) : /* @__PURE__ */ jsx(Absent, {})
+    ] });
+  }
+  if (isNativeCompositeNode(field)) {
+    const members = readCompositeContent(unwrapped);
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      header,
+      members && members.length > 0 ? /* @__PURE__ */ jsx(CompositeValue, { members }) : /* @__PURE__ */ jsx(Absent, {})
+    ] });
+  }
+  switch (field.kind) {
+    case "object": {
+      const memberValue = (child) => typeof unwrapped === "object" && unwrapped !== null ? ownProp(unwrapped, child.name) : void 0;
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        header,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              // A definition grid, not a stack. Label above value spends two
+              // lines on every field, so a structure of ten is twenty lines of
+              // alternating label and answer with nothing aligned. Beside each
+              // other they take one line and the values line up, which is what
+              // makes a record scannable.
+              //
+              // The label column is CAPPED at 40%, and that is not cosmetic. A
+              // bare `auto` sizes to the widest label in the grid - label text
+              // plus its concept pill - so one long field name starved every
+              // value beside it, and inside a 400px panel a paragraph came out
+              // as a ten-line ribbon in a 130px column. `min-content` keeps a
+              // short label short; the cap stops any label taking more than its
+              // share, whatever the panel width turns out to be.
+              "grid grid-cols-[minmax(min-content,40%)_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1.5",
+              // A list item already sits in its own bordered row; nesting a
+              // second card inside it draws a box in a box for no information
+              // gained.
+              !hideLabel && "rounded-lg border border-border bg-card/40 px-3.5 py-3"
+            ),
+            children: field.fields.map(
+              (child) => (
+                // Only a SHORT value shares a line. Prose needs the full width, and
+                // so does anything with chrome of its own - a table, a gallery, a
+                // frame - which beside a label would be squeezed into whatever the
+                // longest label left over.
+                isInlineColumn(child) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(Label2, { field: child, describe: true }) }),
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0 text-right [&_[data-chips]]:justify-end", children: /* @__PURE__ */ jsx(LeafValue, { field: child, value: memberValue(child) }) })
+                ] }, child.name) : /* @__PURE__ */ jsx("div", { className: "col-span-2 min-w-0", children: /* @__PURE__ */ jsx(ResultField, { field: child, value: memberValue(child), depth: depth + 1 }) }, child.name)
+              )
+            )
+          }
+        )
+      ] });
+    }
+    case "list": {
+      const items = Array.isArray(unwrapped) ? unwrapped : [];
+      const columns = tableColumns(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 ? (
+          // Same shape every row: the labels are column headers, not per-row
+          // labels. See `ObjectTable`.
+          /* @__PURE__ */ jsx(
+            ObjectTable,
+            {
+              columns,
+              element: field.item,
+              items,
+              label: field.title ?? humanizeFieldName(field.name)
+            }
+          )
+        ) : TABULAR_KINDS.has(field.item.kind) ? /* @__PURE__ */ jsx(ScalarChips, { field: field.item, items }) : field.item.kind === "prose" || field.item.kind === "unknown" ? (
+          // `unknown` shares the LINES layout, and that is a reading of the
+          // standard rather than a convenience. `unknown` is the deliberate
+          // escape hatch: the producer could not map the node honestly and
+          // said so, which is what an untyped `type = "list"` field derives
+          // to. A card per entry would spend a bordered box and an index on
+          // each value to say nothing extra - the card earns its place around
+          // a STRUCTURE, and this is precisely the node we have been told is
+          // not known to be one. Lines cost nothing and read the same whether
+          // the entries turn out to be words or objects, because `LeafValue`
+          // falls through to `RawValue` either way.
+          /* @__PURE__ */ jsx(ScalarLines, { field: field.item, items })
+        ) : field.item.kind === "image" ? /* @__PURE__ */ jsx(ImageGallery, { items }) : field.item.kind === "document" ? /* @__PURE__ */ jsx(FileRows, { items, kind: "document" }) : (
+          // Nested, or carrying prose: a card per entry is what a table cell
+          // cannot hold. The index label earns its place here, where the
+          // entries are structures rather than values.
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "space-y-2 rounded-lg border border-border bg-card/40 px-3.5 py-3",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: index + 1 }),
+                /* @__PURE__ */ jsx(ResultField, { field: field.item, value: item, depth: depth + 1, hideLabel: true })
+              ]
+            },
+            index
+          )) })
+        )
+      ] });
+    }
+    case "boolean":
+    case "date":
+    case "document":
+    case "image":
+    case "text":
+    case "prose":
+    case "number":
+    case "enum":
+    case "unknown":
+      return /* @__PURE__ */ jsxs("div", { className: field.kind === "image" ? "space-y-1.5" : "space-y-0.5", children: [
+        copyText === void 0 ? header : /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+          /* @__PURE__ */ jsx(CopyButton, { value: copyText, label: s.copyText })
+        ] }),
+        /* @__PURE__ */ jsx(LeafValue, { field, value })
+      ] });
+  }
+  return null;
+}
+
+// src/react/download-stuff.ts
+function saveBlob(blob, filename) {
+  const href = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = href;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(href), 0);
+}
+function mimeForExtension(extension) {
+  return extension === "html" ? "text/html;charset=utf-8" : "text/plain;charset=utf-8";
+}
+function extensionOf(url, filename) {
+  const named = filename?.match(/\.([A-Za-z0-9]{1,8})$/)?.[1];
+  if (named) return named.toLowerCase();
+  const path = url.split(/[?#]/)[0] ?? url;
+  const match = path.match(/\.([A-Za-z0-9]{1,8})$/)?.[1];
+  return match ? match.toLowerCase() : "";
+}
+function fileNameFor(file, base) {
+  if (file.filename) return file.filename;
+  const extension = file.extension ?? extensionOf(file.url ?? "", file.filename);
+  const stem = `${base}-${file.path.replace(/\./g, "-")}`;
+  return extension ? `${stem}.${extension}` : stem;
+}
+async function downloadStuff({
+  field,
+  value,
+  baseName,
+  resolveUrl
+}) {
+  const files = collectStuffFiles(field, value);
+  const isBareFile = files.length === 1 && files[0]?.path === field.name;
+  for (const file of files) {
+    const name = fileNameFor(file, baseName);
+    if (file.text !== void 0) {
+      saveBlob(new Blob([file.text], { type: mimeForExtension(file.extension) }), name);
+      continue;
+    }
+    const href = resolveUrl?.(file.url ?? "") ?? file.publicUrl ?? file.url;
+    if (!href) continue;
+    try {
+      const response = await fetch(href);
+      if (!response.ok) throw new Error(String(response.status));
+      saveBlob(await response.blob(), name);
+    } catch {
+      window.open(href, "_blank", "noopener");
+    }
+  }
+  if (isBareFile) return;
+  saveBlob(
+    new Blob([JSON.stringify(value, null, 2)], { type: "application/json;charset=utf-8" }),
+    `${baseName}.json`
+  );
+}
+var JSON_TOKEN_RE = /("(?:\\.|[^"\\])*"\s*:)|("(?:\\.|[^"\\])*")|(\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g;
+function highlight(json) {
+  const out = [];
+  let last = 0;
+  for (const match of json.matchAll(JSON_TOKEN_RE)) {
+    const [token, key, str, literal] = match;
+    const at = match.index;
+    if (at > last) {
+      out.push(
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: json.slice(last, at) }, `p${last}`)
+      );
+    }
+    out.push(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: key ? "text-muted-foreground" : str ? "text-foreground" : "font-semibold text-foreground",
+          children: token
+        },
+        at
+      )
+    );
+    last = at + token.length;
+  }
+  if (last < json.length) {
+    out.push(
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: json.slice(last) }, "tail")
+    );
+  }
+  return out;
+}
+function JsonView({ value }) {
+  const s = useFieldStrings();
+  const [copied, setCopied] = useState(false);
+  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, {});
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    typeof navigator !== "undefined" && navigator.clipboard && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          void navigator.clipboard.writeText(text).then(() => {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1500);
+          });
+        },
+        "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 focus-visible:outline-2 focus-visible:outline-offset-1",
+        children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-lg border border-border bg-card/40 px-3.5 py-3 pr-12 font-mono text-[12px] leading-relaxed", children: highlight(text) })
+  ] });
+}
+function StuffViewer({
+  field,
+  value,
+  name,
+  defaultView = "rendered",
+  downloadBaseName,
+  hideDownload = false,
+  className
+}) {
+  const s = useFieldStrings();
+  const named = name ? { ...field, name } : field;
+  const [view, setView] = useState(defaultView);
+  const [saving, setSaving] = useState(false);
+  const resolveUrl = useResolveUrl();
+  const handleDownload = useCallback(async () => {
+    setSaving(true);
+    try {
+      await downloadStuff({
+        field,
+        value,
+        baseName: downloadBaseName ?? named.name ?? "result",
+        resolveUrl
+      });
+    } finally {
+      setSaving(false);
+    }
+  }, [field, named.name, value, downloadBaseName, resolveUrl]);
+  const views = [
+    { id: "rendered", label: s.viewRendered },
+    { id: "json", label: s.viewJson }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-1", children: /* @__PURE__ */ jsx(ResultHeader, { field: named }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+        !hideDownload && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => void handleDownload(),
+            disabled: saving,
+            "aria-label": s.download,
+            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+            children: [
+              saving ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }),
+              saving ? s.downloading : s.download
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "group",
+            "aria-label": s.resultViewGroup,
+            className: "flex rounded-md border border-border p-0.5",
+            children: views.map(({ id, label }) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setView(id),
+                "aria-pressed": view === id,
+                className: cn(
+                  "rounded px-2 py-0.5 text-[12px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+                  view === id ? "bg-card font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: label
+              },
+              id
+            ))
+          }
+        )
+      ] })
+    ] }),
+    view === "json" ? /* @__PURE__ */ jsx(JsonView, { value }) : /* @__PURE__ */ jsx(ResultField, { field, value, hideLabel: true })
+  ] });
+}
 
-export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EnumField, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, ImageField, ListField, NumberField, ObjectField, OptionalToggle, ProseField, TextField, UnknownField, fieldControlClass, humanizeFieldName, useFieldDomId, useFieldPresentation, useFieldStrings };
+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, StuffViewer, TextField, UnknownField, downloadStuff, fieldControlClass, humanizeFieldName, useFieldDomId, useFieldPresentation, useFieldStrings, useResolveShareUrl, useResolveUrl, useResolvedUrl };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map