@pipelex/mthds-form 0.7.0 → 0.9.0

package/dist/chunk-KG4IYFWI.js

@@ -0,0 +1,2721 @@
+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 { 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, ImageOff, Upload, Link2, 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, 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));
+}
+var CATEGORY_ICON = {
+  text: Type,
+  date: CalendarDays,
+  document: FileText,
+  image: Image,
+  number: Hash,
+  boolean: ToggleLeft,
+  choice: ListChecks,
+  structured: Braces,
+  list: List
+};
+function ConceptPill({ conceptRef, category, className }) {
+  const Icon2 = CATEGORY_ICON[category];
+  const label = conceptRef ?? category;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 font-mono text-[10.5px] leading-none text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon2, { className: "h-3 w-3 shrink-0 opacity-70", strokeWidth: 1.75, "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+}
+var FieldPresentationContext = createContext("studio");
+function FieldPresentationProvider({
+  presentation,
+  children
+}) {
+  return /* @__PURE__ */ jsx(FieldPresentationContext, { value: presentation, children });
+}
+function useFieldPresentation() {
+  return use(FieldPresentationContext);
+}
+function humanizeFieldName(name) {
+  const words = name.replace(/[_-]+/g, " ").trim();
+  if (words === "") return name;
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function fieldLabel(title, name, presentation) {
+  if (title !== void 0) return title;
+  return presentation === "app" ? humanizeFieldName(name) : name;
+}
+var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+var FieldDomIdContext = createContext(null);
+function FieldDomIdProvider({
+  prefix,
+  children
+}) {
+  const generated = useId();
+  return /* @__PURE__ */ jsx(FieldDomIdContext, { value: prefix ?? generated, children });
+}
+function useFieldDomId(path) {
+  const scoped = use(FieldDomIdContext);
+  const local = useId();
+  const prefix = scoped ?? local;
+  return prefix === "" ? path : `${prefix}-${path}`;
+}
+function BooleanField({ field, value, onChange, id, disabled }) {
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
+  const domId = useFieldDomId(id);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-4 rounded-md border border-border bg-input px-3.5 py-3",
+        disabled && "opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: domId,
+                className: cn(
+                  "text-[13px] font-medium leading-none text-foreground",
+                  isApp ? "text-[13.5px]" : "font-mono"
+                ),
+                children: fieldLabel(field.title, field.name, presentation)
+              }
+            ),
+            !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "boolean" })
+          ] }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: domId,
+            checked: value ?? false,
+            onCheckedChange: onChange,
+            disabled,
+            className: "shrink-0"
+          }
+        )
+      ]
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return bytes === 1 ? "1 byte" : `${bytes} bytes`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var DEFAULT_FIELD_STRINGS = {
+  optionalBadge: "optional",
+  selectPlaceholder: "Select\u2026",
+  typeValuePlaceholder: "Type a value\u2026",
+  writeHerePlaceholder: "Write here\u2026",
+  jsonHint: "Enter this value as raw JSON.",
+  decrease: "Decrease",
+  increase: "Increase",
+  noItemsYet: "No items yet",
+  addItem: "Add item",
+  removeItemAria: (index) => `Remove item ${index}`,
+  itemsCount: (count) => count === 1 ? "1 item" : `${count} items`,
+  itemsCountOf: (count, total) => `${count} of ${total} ${total === 1 ? "item" : "items"}`,
+  fieldsCount: (count) => count === 1 ? "1 field" : `${count} fields`,
+  uploading: "Uploading\u2026",
+  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",
+  encodedFileSummary: (format, bytes) => `${format} \xB7 ${formatBytes(bytes)}`,
+  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`,
+  optionalInputsCount: (count) => count === 1 ? "1 optional input" : `${count} optional inputs`
+};
+var FieldStringsContext = createContext(DEFAULT_FIELD_STRINGS);
+function FieldStringsProvider({
+  strings,
+  children
+}) {
+  const merged = useMemo(() => ({ ...DEFAULT_FIELD_STRINGS, ...strings }), [strings]);
+  return /* @__PURE__ */ jsx(FieldStringsContext.Provider, { value: merged, children });
+}
+function useFieldStrings() {
+  return useContext(FieldStringsContext);
+}
+function FieldShell({
+  name,
+  title,
+  conceptRef,
+  category,
+  description,
+  required,
+  error,
+  htmlFor,
+  children,
+  className
+}) {
+  const s = useFieldStrings();
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
+  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(
+        Label3,
+        {
+          ...htmlFor ? { htmlFor } : {},
+          className: cn(
+            "text-[13px] font-medium leading-none text-foreground",
+            isApp ? "text-[13.5px]" : "font-mono"
+          ),
+          children: labelText
+        }
+      ),
+      !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef, category }),
+      !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,
+    error && /* @__PURE__ */ jsx("p", { className: "flex items-center gap-1 text-[11px] text-destructive", role: "alert", children: error })
+  ] });
+}
+
+// src/react/field-styles.ts
+var fieldControlClass = cn(
+  "w-full rounded-md border border-border bg-input text-sm text-foreground",
+  "placeholder:text-muted-foreground/70 transition-colors",
+  "focus-visible:outline-hidden focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary/40",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "aria-invalid:border-destructive aria-invalid:ring-destructive/30"
+);
+function DateField({ field, value, onChange, id, error, disabled }) {
+  const domId = useFieldDomId(id);
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "date",
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: domId,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: domId,
+          type: "date",
+          value: toDateInputValue(value),
+          disabled,
+          "aria-invalid": !!error,
+          onChange: (e) => onChange(toStoredDateValue(e.target.value, field.datetime)),
+          className: cn(fieldControlClass, "h-11 px-3 font-mono tabular-nums")
+        }
+      )
+    }
+  );
+}
+
+// src/react/encoded-file.ts
+function encodedFileSummary(url, strings) {
+  const view = readDataUrl(url);
+  if (!view) return void 0;
+  const format = [...DOCUMENT_FORMATS, ...IMAGE_FORMATS].find((known) => known.mimeType === view.mediaType)?.label ?? view.mediaType;
+  return strings.encodedFileSummary(format, view.bytes);
+}
+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 dataUrlMime(url) {
+  return DATA_URL_MIME_RE.exec(url)?.[1]?.toLowerCase();
+}
+function DocumentField(props) {
+  return /* @__PURE__ */ jsx(FileField, { ...props, category: "document" });
+}
+function ImageField(props) {
+  return /* @__PURE__ */ jsx(FileField, { ...props, category: "image" });
+}
+function FileField({
+  field,
+  value,
+  onDropFile,
+  onChange,
+  id,
+  uploading,
+  resolveUrl,
+  error,
+  disabled,
+  category
+}) {
+  const s = useFieldStrings();
+  const domId = useFieldDomId(id);
+  const [showUrl, setShowUrl] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [localPreview, setLocalPreview] = useState(null);
+  const [resolved, setResolved] = useState(null);
+  const localUrlRef = useRef(null);
+  const setLocal = useCallback((next) => {
+    if (localUrlRef.current) URL.revokeObjectURL(localUrlRef.current);
+    localUrlRef.current = next?.objectUrl ?? null;
+    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);
+    },
+    [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
+    // voice-control user lands on is a generic with no role and no name.
+    noKeyboard: true,
+    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);
+  useEffect(() => {
+    if (!localPreview) return;
+    if (localPreview.boundUrl === void 0) {
+      if (uploading || !value?.url) return;
+      setLocalPreview({ ...localPreview, boundUrl: value.url });
+      return;
+    }
+    if (value?.url !== localPreview.boundUrl) setLocal(null);
+  }, [localPreview, value?.url, uploading, setLocal]);
+  const hasFile = !!value?.url;
+  const localType = localIsCurrent ? localPreview?.type : void 0;
+  const filename = value?.filename ?? "";
+  const url = value?.url ?? "";
+  const urlMime = dataUrlMime(url);
+  const isImage = category === "image" || localType?.startsWith("image/") === true || urlMime?.startsWith("image/") === true || IMAGE_EXT_RE.test(filename) || IMAGE_EXT_RE.test(url);
+  const isPdf = localType === "application/pdf" || urlMime === "application/pdf" || PDF_EXT_RE.test(filename) || PDF_EXT_RE.test(url);
+  const canPreview = isImage || isPdf;
+  const directSrc = viewableUrl(value?.url);
+  const storageUri = value?.url && !directSrc && urlMime === void 0 ? value.url : null;
+  useEffect(() => {
+    if (!previewOpen || !storageUri || localIsCurrent || !resolveUrl) return;
+    let cancelled = false;
+    void resolveUrl(storageUri).then((src) => {
+      if (!cancelled) setResolved(src ? { uri: storageUri, src } : null);
+    }).catch(() => {
+      if (!cancelled) setResolved(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [previewOpen, storageUri, localIsCurrent, resolveUrl]);
+  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;
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category,
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: domId,
+      children: [
+        hasFile && !uploading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(
+            FileChip,
+            {
+              value,
+              disabled,
+              onClear: clear,
+              canPreview,
+              previewOpen,
+              onTogglePreview: () => setPreviewOpen((v) => !v)
+            }
+          ),
+          previewOpen && (previewSrc && isImage ? /* @__PURE__ */ jsx(ImagePreview, { src: previewSrc, filename: value?.filename }) : previewSrc && isPdf ? /* @__PURE__ */ jsx(PdfPreview, { src: previewSrc }) : previewPending ? /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : (
+            // Nothing to show and nothing on its way: a reference the gate
+            // refuses, or a stored one with no resolver behind it. A spinner
+            // here said "loading" about something that was never going to
+            // load, which is the one thing a refusal must not look like.
+            /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(ImageOff, { className: "h-5 w-5 text-muted-foreground" }) })
+          ))
+        ] }) : (
+          // `role="presentation"` and no tab stop: this div is the drop TARGET and
+          // the visual affordance, and the control inside it is a real
+          // `<input type="file">`, which already has the right role and now has a
+          // name. Giving the div a `role="button"` of its own would put a second
+          // named control in the accessibility tree for one value. The focus ring
+          // is `focus-within` because the element that takes focus is clip-hidden.
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...getRootProps(),
+              className: cn(
+                "flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-4 py-6 text-center",
+                "cursor-pointer select-none transition-colors",
+                "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
+                isDragActive ? "border-primary/60 bg-primary/5" : "border-border bg-input hover:border-border hover:bg-muted",
+                busy && "cursor-not-allowed opacity-60"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...getInputProps({ tabIndex: 0 }),
+                    id: domId,
+                    disabled: busy,
+                    "aria-invalid": !!error
+                  }
+                ),
+                uploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground", children: s.uploading })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__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 })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ),
+        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",
+          {
+            type: "button",
+            disabled: busy,
+            onClick: () => setShowUrl(true),
+            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
+              s.pasteUrlInstead
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            autoFocus: true,
+            value: value?.url ?? "",
+            disabled: busy,
+            placeholder: s.urlPlaceholder,
+            onChange: (e) => {
+              setLocal(null);
+              onChange(e.target.value ? { url: e.target.value } : void 0);
+            },
+            className: cn(fieldControlClass, "h-9 px-3 font-mono text-[12px]")
+          }
+        )
+      ]
+    }
+  );
+}
+function ImagePreview({ src, filename }) {
+  const s = useFieldStrings();
+  const [broken, setBroken] = useState(false);
+  if (broken) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-28 items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(ImageOff, { className: "h-5 w-5 text-muted-foreground" }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex max-h-[640px] justify-center overflow-auto rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: filename ?? s.preview,
+      referrerPolicy: "no-referrer",
+      className: "h-auto w-full max-w-full object-contain",
+      onError: () => setBroken(true)
+    }
+  ) });
+}
+function PdfPreview({ src }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsx(
+    "object",
+    {
+      data: `${src}#view=FitH`,
+      type: "application/pdf",
+      className: "h-[78vh] min-h-[520px] w-full rounded-md border border-border bg-muted",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-28 flex-col items-center justify-center gap-1.5 text-center", children: [
+        /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground", children: s.previewUnavailablePdf })
+      ] })
+    }
+  );
+}
+function FileChip({
+  value,
+  disabled,
+  onClear,
+  canPreview,
+  previewOpen,
+  onTogglePreview
+}) {
+  const s = useFieldStrings();
+  const url = value?.url;
+  const subtitle = useMemo(
+    () => url === void 0 ? void 0 : encodedFileSummary(url, s) ?? url,
+    [url, 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 })
+    ] }),
+    canPreview && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onTogglePreview,
+        className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        children: [
+          previewOpen ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
+          s.preview
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ClearButton, { disabled, onClick: onClear })
+  ] });
+}
+function ClearButton({ disabled, onClick }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-label": s.removeFileAria,
+      className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50",
+      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+    }
+  );
+}
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      // Adapted from the registry to DESIGN.md ("Inputs"): the `--input` surface,
+      // a hairline `--border`, and a border-color focus signal instead of the
+      // upstream 2px focus ring ("No focus glow by default").
+      "flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm transition-colors data-placeholder:text-muted-foreground focus:border-ring focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React2.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-select-content-transform-origin)",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    ref,
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+var ToggleGroupContext = React2.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React2.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = React2.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+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 domId = useFieldDomId(id);
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "choice",
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: isSegmented ? void 0 : domId,
+      children: isSegmented ? (
+        // `type="single"` gives the roving tabindex and arrow-key navigation a
+        // radiogroup owes its user, and emits `''` when the active item is
+        // pressed again - which is the field's "clear" path.
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            type: "single",
+            value: value ?? "",
+            onValueChange: (next) => onChange(next === "" ? void 0 : next),
+            disabled,
+            "aria-label": field.title ?? field.name,
+            className: "flex flex-wrap justify-start gap-1.5",
+            children: field.options.map((option) => /* @__PURE__ */ jsxs(
+              ToggleGroupItem,
+              {
+                value: option,
+                variant: "outline",
+                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
+                ]
+              },
+              option
+            ))
+          }
+        )
+      ) : /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: value ?? "",
+          disabled,
+          onValueChange: (next) => onChange(next === CLEAR_VALUE ? void 0 : next),
+          children: [
+            /* @__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))
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function NumberField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  const domId = useFieldDomId(id);
+  const step = field.integer ? 1 : 0.1;
+  const clamp = (n) => {
+    let next = n;
+    if (typeof field.min === "number") next = Math.max(field.min, next);
+    if (typeof field.max === "number") next = Math.min(field.max, next);
+    return field.integer ? Math.round(next) : next;
+  };
+  const nudge = (delta) => onChange(clamp((value ?? 0) + delta));
+  const rangeHint = field.min !== void 0 || field.max !== void 0 ? `${field.min ?? "\u2212\u221E"} \u2013 ${field.max ?? "\u221E"}` : void 0;
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "number",
+      description: field.description ?? rangeHint,
+      required: field.required,
+      error,
+      htmlFor: domId,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: domId,
+            type: "number",
+            inputMode: field.integer ? "numeric" : "decimal",
+            value: value ?? "",
+            step,
+            min: field.min,
+            max: field.max,
+            disabled,
+            "aria-invalid": !!error,
+            placeholder: "0",
+            onChange: (e) => onChange(e.target.value === "" ? void 0 : Number(e.target.value)),
+            className: cn(
+              fieldControlClass,
+              "h-11 px-3 font-mono tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(StepButton, { onClick: () => nudge(-step), disabled, label: s.decrease, children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(StepButton, { onClick: () => nudge(step), disabled, label: s.increase, children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) })
+      ] })
+    }
+  );
+}
+function StepButton({
+  onClick,
+  disabled,
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-label": label,
+      className: cn(
+        "flex h-11 w-11 shrink-0 items-center justify-center rounded-md border border-border bg-input text-muted-foreground transition-colors",
+        "hover:border-border hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      ),
+      children
+    }
+  );
+}
+function TextField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  const domId = useFieldDomId(id);
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "text",
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: domId,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: domId,
+          type: "text",
+          value: value ?? "",
+          disabled,
+          "aria-invalid": !!error,
+          placeholder: field.placeholder ?? s.typeValuePlaceholder,
+          onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.value),
+          className: cn(fieldControlClass, "h-11 px-3")
+        }
+      )
+    }
+  );
+}
+function ProseField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  const domId = useFieldDomId(id);
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "text",
+      description: field.description,
+      required: field.required,
+      error,
+      htmlFor: domId,
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id: domId,
+          value: value ?? "",
+          disabled,
+          "aria-invalid": !!error,
+          rows: 3,
+          placeholder: field.placeholder ?? s.writeHerePlaceholder,
+          onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.value),
+          className: cn(
+            fieldControlClass,
+            "min-h-[88px] resize-y px-3 py-2.5 leading-relaxed field-sizing-content"
+          )
+        }
+      )
+    }
+  );
+}
+function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      className: "flex w-fit items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground",
+      children: [
+        expanded ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
+        expanded ? noun === "field" ? s.hideOptionalFields : s.hideOptionalInputs : noun === "field" ? s.optionalFieldsCount(count) : s.optionalInputsCount(count)
+      ]
+    }
+  );
+}
+function ObjectField({ field, value, onChange, id, error, env }) {
+  const s = useFieldStrings();
+  const [showOptional, setShowOptional] = useState(false);
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
+  const data = value ?? {};
+  const setChild = (name, childValue) => onChange({ ...data, [name]: childValue });
+  const optionalEmpty = field.fields.filter((f) => !f.required && !isFilled(ownProp(data, f.name)));
+  const visible = showOptional ? field.fields : field.fields.filter((f) => f.required || isFilled(ownProp(data, f.name)));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-[13px] font-medium leading-none text-foreground",
+            isApp ? "text-[13.5px]" : "font-mono"
+          ),
+          children: fieldLabel(field.title, field.name, presentation)
+        }
+      ),
+      !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", children: s.optionalBadge })
+    ] }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "space-y-4 rounded-lg border bg-card/40 p-4",
+          error ? "border-destructive/50" : "border-border"
+        ),
+        children: [
+          visible.map((child) => /* @__PURE__ */ jsx(
+            FieldRenderer,
+            {
+              field: child,
+              value: ownProp(data, child.name),
+              onChange: (v) => setChild(child.name, v),
+              id: `${id}.${child.name}`,
+              env
+            },
+            child.name
+          )),
+          optionalEmpty.length > 0 && /* @__PURE__ */ jsx(
+            OptionalToggle,
+            {
+              count: optionalEmpty.length,
+              expanded: showOptional,
+              onToggle: () => setShowOptional((v) => !v),
+              noun: "field"
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error })
+  ] });
+}
+function ListField({ field, value, onChange, id, error, env }) {
+  const s = useFieldStrings();
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
+  const items = value ?? [];
+  const [rowKeys, setRowKeys] = useRowKeys(items.length);
+  const setItem = (index, itemValue) => {
+    const next = items.slice();
+    next[index] = itemValue;
+    onChange(next);
+  };
+  const removeItem = (index) => {
+    setRowKeys((prev) => prev.filter((_, i) => i !== index));
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const addItem = () => onChange([...items, emptyValue(field.item)]);
+  const busy = listIsBusy(id, env?.uploadingIds);
+  const isFull = field.maxItemCount !== void 0 && items.length >= field.maxItemCount;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-[13px] font-medium leading-none text-foreground",
+            isApp ? "text-[13.5px]" : "font-mono"
+          ),
+          children: fieldLabel(field.title, field.name, presentation)
+        }
+      ),
+      !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", 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: [
+      items.length === 0 && /* @__PURE__ */ jsx("p", { className: "rounded-md border border-dashed border-border bg-input/50 px-3 py-4 text-center text-[12px] text-muted-foreground", children: s.noItemsYet }),
+      items.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start gap-2 rounded-md border border-border bg-card/40 p-3",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-1 w-5 shrink-0 text-center font-mono text-[11px] text-muted-foreground", children: index + 1 }),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+              FieldRenderer,
+              {
+                field: { ...field.item, title: "", name: `${field.name}[${index}]` },
+                value: item,
+                onChange: (v) => setItem(index, v),
+                id: `${id}.${index}`,
+                env
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeItem(index),
+                disabled: env?.disabled || busy,
+                "aria-label": s.removeItemAria(index + 1),
+                className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-destructive disabled:opacity-50",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        },
+        rowKeys[index] ?? index
+      )),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: addItem,
+          disabled: env?.disabled || isFull,
+          className: cn(
+            "inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border text-[13px] text-muted-foreground transition-colors",
+            "hover:border-primary/40 hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            s.addItem
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error })
+  ] });
+}
+function listIsBusy(id, uploadingIds) {
+  if (!uploadingIds?.size) return false;
+  const prefix = `${id}.`;
+  for (const uploading of uploadingIds) if (uploading.startsWith(prefix)) return true;
+  return false;
+}
+function useRowKeys(length) {
+  const [state, setState] = useState(() => ({
+    keys: Array.from({ length }, (_, i) => i),
+    next: length
+  }));
+  if (state.keys.length !== length) {
+    setState((prev) => {
+      if (length <= prev.keys.length) return { keys: prev.keys.slice(0, length), next: prev.next };
+      const added = length - prev.keys.length;
+      return {
+        keys: [...prev.keys, ...Array.from({ length: added }, (_, i) => prev.next + i)],
+        next: prev.next + added
+      };
+    });
+  }
+  const update = (fn) => setState((prev) => ({ keys: fn(prev.keys), next: prev.next }));
+  return [state.keys, update];
+}
+function emptyValue(field) {
+  switch (field.kind) {
+    case "boolean":
+      return false;
+    case "object":
+      return {};
+    case "list":
+      return [];
+    case "document":
+    case "image":
+      return void 0;
+    default:
+      return void 0;
+  }
+}
+function UnknownField({ field, value, onChange, id, error, disabled }) {
+  const s = useFieldStrings();
+  const domId = useFieldDomId(id);
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      name: field.name,
+      title: field.title,
+      conceptRef: field.conceptRef,
+      category: "structured",
+      description: field.description ?? s.jsonHint,
+      required: field.required,
+      error,
+      htmlFor: domId,
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id: domId,
+          value: value ?? "",
+          disabled,
+          "aria-invalid": !!error,
+          rows: 3,
+          spellCheck: false,
+          placeholder: '{\n  "key": "value"\n}',
+          onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.value),
+          className: cn(fieldControlClass, "min-h-[80px] resize-y px-3 py-2.5 font-mono text-[12px]")
+        }
+      )
+    }
+  );
+}
+function FieldRenderer({ field, value, onChange, id, error, env }) {
+  const disabled = env?.disabled;
+  switch (field.kind) {
+    case "text":
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "prose":
+      return /* @__PURE__ */ jsx(
+        ProseField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx(
+        DateField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ jsx(
+        BooleanField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          disabled
+        }
+      );
+    case "enum":
+      return /* @__PURE__ */ jsx(
+        EnumField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "document":
+      return /* @__PURE__ */ jsx(
+        DocumentField,
+        {
+          field,
+          value,
+          onChange,
+          onDropFile: (file) => env?.onDropFile?.(id, file),
+          uploading: env?.uploadingIds?.has(id),
+          resolveUrl: env?.resolveUrl,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "image":
+      return /* @__PURE__ */ jsx(
+        ImageField,
+        {
+          field,
+          value,
+          onChange,
+          onDropFile: (file) => env?.onDropFile?.(id, file),
+          uploading: env?.uploadingIds?.has(id),
+          resolveUrl: env?.resolveUrl,
+          id,
+          error,
+          disabled
+        }
+      );
+    case "object":
+      return /* @__PURE__ */ jsx(
+        ObjectField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          env
+        }
+      );
+    case "list":
+      return /* @__PURE__ */ jsx(
+        ListField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          env
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx(
+        UnknownField,
+        {
+          field,
+          value,
+          onChange,
+          id,
+          error,
+          disabled
+        }
+      );
+  }
+}
+var ResultEnvContext = createContext({});
+function ResultEnvProvider({
+  resolveUrl,
+  resolveShareUrl,
+  proseImages,
+  children
+}) {
+  const env = useMemo(
+    () => ({ resolveUrl, resolveShareUrl, proseImages }),
+    [resolveUrl, resolveShareUrl, proseImages]
+  );
+  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;
+}
+function useProseImages() {
+  return use(ResultEnvContext).proseImages ?? "link";
+}
+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, proseImages }) {
+  const tokens = React2.useMemo(() => marked.lexer(text, LEX_OPTIONS), [text]);
+  const fromEnv = useProseImages();
+  const mode = proseImages ?? fromEnv;
+  return /* @__PURE__ */ jsx(ProseImagesContext, { value: mode, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2 text-[13px] leading-relaxed text-foreground", className), children: /* @__PURE__ */ jsx(Blocks, { tokens }) }) });
+}
+var ProseImagesContext = React2.createContext("link");
+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 wrap-break-word 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 (
+        // The flag is set for everything under the anchor, so a nested `image`
+        // token knows not to open one of its own — see {@link ProseImage}.
+        /* @__PURE__ */ jsx(InsideLinkContext, { value: true, children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noreferrer noopener",
+            className: "underline underline-offset-2",
+            children: /* @__PURE__ */ jsx(Inline, { tokens: link.tokens })
+          }
+        ) })
+      );
+    }
+    case "image":
+      return /* @__PURE__ */ jsx(ProseImage, { token });
+    default:
+      return /* @__PURE__ */ jsx(Fragment, { children: rawOf(token) });
+  }
+}
+function ProseImage({ token }) {
+  const mode = React2.use(ProseImagesContext);
+  const insideLink = React2.use(InsideLinkContext);
+  const src = proseImageUrl(token.href);
+  if (!src) return /* @__PURE__ */ jsx(Fragment, { children: token.text });
+  if (mode === "load") {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: token.text,
+        referrerPolicy: "no-referrer",
+        className: "max-w-full rounded-md"
+      }
+    );
+  }
+  if (insideLink) return /* @__PURE__ */ jsx(Fragment, { children: token.text || src });
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: src,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      className: "underline underline-offset-2",
+      children: token.text || src
+    }
+  );
+}
+var InsideLinkContext = React2.createContext(false);
+function proseImageUrl(href) {
+  const url = viewableUrl(href);
+  return url && /^https?:/.test(url) ? url : void 0;
+}
+function safeHref(href) {
+  const trimmed = href.trim();
+  if (/^(https?:|mailto:)/i.test(trimmed)) return trimmed;
+  if (trimmed.startsWith("#")) return trimmed;
+  if (trimmed.startsWith("/")) return viewableUrl(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-hidden 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 wrap-break-word 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, strings) {
+  if (filename) return filename;
+  const encoded = encodedFileSummary(url, strings);
+  if (encoded !== void 0) return encoded;
+  return pathLabel(url);
+}
+function pathLabel(url) {
+  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-solid 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 s = useFieldStrings();
+  const encoded = encodedFileSummary(url, s);
+  const label = filename ? filename : encoded ?? pathLabel(url);
+  const reference = encoded ?? url;
+  const title = mimeType ? `${reference} \xB7 ${mimeType}` : reference;
+  const href = viewableUrl(url);
+  return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+    href ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        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 paintable(content, resolve) {
+  const resolved = viewableUrl(resolve?.(content.url));
+  if (resolved) return { url: resolved, fromResolver: true };
+  const stated = viewableUrl(content.publicUrl) ?? viewableUrl(content.url);
+  return stated ? { url: stated, fromResolver: false } : void 0;
+}
+function paintableUrl(content, resolve) {
+  return paintable(content, resolve)?.url;
+}
+var PREVIEWABLE_EXT_RE = /\.(pdf|png|jpe?g|gif|webp|avif|svg)(\?|#|$)/i;
+var PREVIEWABLE_MIME_RE = /^(application\/pdf|image\/)/i;
+function frameableUrl(candidate) {
+  if (!candidate) return void 0;
+  if (/^https?:/.test(candidate.url)) return candidate.url;
+  return candidate.fromResolver && candidate.url.startsWith("/") ? candidate.url : void 0;
+}
+function previewableUrl(content, resolve) {
+  const url = frameableUrl(paintable(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-112 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, s);
+  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-solid 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-176 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, s)
+          }
+        )
+      ] })
+    ) : /* @__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: src,
+        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 });
+    case "object":
+      return compact ? /* @__PURE__ */ jsx(RecordSummary, { field, value }) : /* @__PURE__ */ jsx(Scalar, { value });
+    default:
+      return /* @__PURE__ */ jsx(Scalar, { value, compact });
+  }
+}
+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");
+  if (naming === void 0) {
+    return /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-[12.5px] text-muted-foreground", children: s.fieldsCount(field.fields.length) });
+  }
+  return /* @__PURE__ */ jsx(LeafValue, { field: naming, value: ownProp(value, naming.name), compact: true });
+}
+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,
+        referrerPolicy: "no-referrer",
+        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:
+    // the cell ends its VALUE at the right edge, and a row of tags long enough
+    // to wrap fills the column, so without the hook each line of tags would
+    // start at the left while every value beside it ended at the right. 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 pt-px align-top", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggle(index),
+                  "aria-expanded": isOpen,
+                  "aria-label": s.toggleRowDetails(index + 1),
+                  className: "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                  children: isOpen ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5" })
+                }
+              ) }),
+              isOpen ? /* @__PURE__ */ jsx("td", { colSpan: 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 ? !!(viewableUrl(content.publicUrl) ?? viewableUrl(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: "flex min-w-0 justify-end **:data-chips:justify-end", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 text-left wrap-break-word", 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;
+  let deliveredAFile = false;
+  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);
+      deliveredAFile = true;
+      continue;
+    }
+    const href = viewableUrl(resolveUrl?.(file.url ?? "")) ?? viewableUrl(file.publicUrl) ?? viewableUrl(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");
+    }
+    deliveredAFile = true;
+  }
+  if (isBareFile && deliveredAFile) 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-solid 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-solid 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-solid 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, 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