@pipelex/mthds-form 0.11.0 → 0.12.1

package/dist/{chunk-E2IVBAW3.js → chunk-2D4NEFUH.js}

@@ -1,5 +1,6 @@
-import { collectStuffFiles } from './chunk-4JQAJT7C.js';
-import { viewableUrl, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativeValueNode, readDateContent, formatDateContent, readImageContent, readDataUrl, readDocumentContent } from './chunk-TID7ZN63.js';
+import { planStuffSave, planFileSave } from './chunk-7KQXGG6J.js';
+import { readStuffFile } from './chunk-RRTI7AIR.js';
+import { viewableUrl, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativeValueNode, readDateContent, formatDateContent, readImageContent, readDataUrl, readDocumentContent } from './chunk-CM4KVG53.js';
 import { conceptCategory } from './chunk-FABY3DEY.js';
 import { acceptLabel, acceptMap, isAcceptedFile, formatOfFilename, DOCUMENT_FORMATS, IMAGE_FORMATS } from './chunk-XCO6GTEC.js';
 import { isFilled } from './chunk-PM55AHRO.js';
@@ -7,7 +8,7 @@ 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 { 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, TriangleAlert } 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';
@@ -221,6 +222,9 @@ var DEFAULT_FIELD_STRINGS = {
   copyText: "Copy the text",
   download: "Download",
   downloading: "Downloading\u2026",
+  downloadIncomplete: (names) => `${names.length === 1 ? "One file" : `${names.length} files`} could not be saved: ${names.join(", ")}`,
+  downloadFile: (name) => `Download ${name}`,
+  downloadFileFailed: "The file could not be saved",
   viewRendered: "Result",
   viewJson: "JSON",
   copyJson: "Copy the JSON",
@@ -1504,20 +1508,84 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
       );
   }
 }
+
+// src/react/absolute-url.ts
+function absoluteUrl(url) {
+  const gated = viewableUrl(url);
+  if (!gated?.startsWith("/") || typeof document === "undefined") return url;
+  try {
+    return new URL(gated, document.baseURI).href;
+  } catch {
+    return url;
+  }
+}
+
+// src/react/save-in-browser.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 blobType(mimeType) {
+  return /^(text\/|application\/json)/.test(mimeType) && !/charset=/i.test(mimeType) ? `${mimeType};charset=utf-8` : mimeType;
+}
+async function saveInBrowser(files) {
+  const failed = [];
+  for (const file of files) {
+    try {
+      if (file.text !== void 0) {
+        saveBlob(new Blob([file.text], { type: blobType(file.mimeType) }), file.name);
+        continue;
+      }
+      const response = await fetch(file.url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      saveBlob(await response.blob(), file.name);
+    } catch (error) {
+      failed.push({ file, reason: error instanceof Error ? error.message : String(error) });
+    }
+  }
+  return { failed };
+}
 var ResultEnvContext = createContext({});
 function ResultEnvProvider({
   resolveUrl,
   resolveShareUrl,
   proseImages,
   tableColumns,
+  saveFiles,
+  downloads,
   children
 }) {
   const env = useMemo(
-    () => ({ resolveUrl, resolveShareUrl, proseImages, tableColumns }),
-    [resolveUrl, resolveShareUrl, proseImages, tableColumns]
+    () => ({ resolveUrl, resolveShareUrl, proseImages, tableColumns, saveFiles, downloads }),
+    [resolveUrl, resolveShareUrl, proseImages, tableColumns, saveFiles, downloads]
   );
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: env, children });
 }
+function DownloadDisplayOverride({
+  downloads,
+  children
+}) {
+  const env = use(ResultEnvContext);
+  const result = downloads?.result;
+  const files = downloads?.files;
+  const merged = useMemo(
+    () => result === void 0 && files === void 0 ? env : {
+      ...env,
+      downloads: {
+        result: result ?? env.downloads?.result,
+        files: files ?? env.downloads?.files
+      }
+    },
+    [env, result, files]
+  );
+  return /* @__PURE__ */ jsx(ResultEnvContext, { value: merged, children });
+}
 function useResolvedUrl(url) {
   return use(ResultEnvContext).resolveUrl?.(url) ?? url;
 }
@@ -1527,6 +1595,32 @@ function useResolveUrl() {
 function useResolveShareUrl() {
   return use(ResultEnvContext).resolveShareUrl;
 }
+function useSaveFiles() {
+  const save = use(ResultEnvContext).saveFiles ?? saveInBrowser;
+  return useCallback((files) => deliver(save, files), [save]);
+}
+async function deliver(save, files) {
+  const handed = files.map(
+    (file) => file.url === void 0 ? file : { ...file, url: absoluteUrl(file.url) }
+  );
+  try {
+    const result = await save(handed);
+    if (Array.isArray(result?.failed)) return { failed: result.failed };
+    return {
+      failed: handed.map((file) => ({ file, reason: "The save function reported no result" }))
+    };
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : String(error);
+    return { failed: handed.map((file) => ({ file, reason })) };
+  }
+}
+function useResultDownloadShown() {
+  return use(ResultEnvContext).downloads?.result ?? true;
+}
+function useFileDownloadShown(kind) {
+  const files = use(ResultEnvContext).downloads?.files ?? true;
+  return typeof files === "boolean" ? files : files.includes(kind);
+}
 function useProseImages() {
   return use(ResultEnvContext).proseImages ?? "link";
 }
@@ -1536,6 +1630,27 @@ function useTableColumns() {
   if (budget === void 0 || Number.isNaN(budget)) return DEFAULT_TABLE_COLUMNS;
   return Math.max(1, Math.floor(budget));
 }
+var ResultLocationContext = createContext(void 0);
+function useResultLocation() {
+  return use(ResultLocationContext);
+}
+function ResultRoot({
+  baseName,
+  path,
+  children
+}) {
+  const key = path.join("\0");
+  const location = useMemo(() => ({ baseName, path: key.split("\0") }), [baseName, key]);
+  return /* @__PURE__ */ jsx(ResultLocationContext, { value: location, children });
+}
+function ResultAt({ segment, children }) {
+  const parent = use(ResultLocationContext);
+  const location = useMemo(
+    () => parent ? { baseName: parent.baseName, path: [...parent.path, segment] } : void 0,
+    [parent, segment]
+  );
+  return /* @__PURE__ */ jsx(ResultLocationContext, { value: location, children });
+}
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -2058,15 +2173,12 @@ function CopyUrlButton({ url, storageUrl }) {
   };
   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
+  filename,
+  file
 }) {
   const s = useFieldStrings();
   const encoded = encodedFileSummary(url, s);
@@ -2093,7 +2205,80 @@ function FileRef({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx(CopyUrlButton, { url, ...storageUrl ? { storageUrl } : {} })
+    /* @__PURE__ */ jsx(FileActions, { copy: { url, ...storageUrl ? { storageUrl } : {} }, file })
+  ] });
+}
+function FileActions({
+  copy,
+  file
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-0.5", children: [
+    copy && /* @__PURE__ */ jsx(
+      CopyUrlButton,
+      {
+        url: copy.url,
+        ...copy.storageUrl ? { storageUrl: copy.storageUrl } : {}
+      }
+    ),
+    file && /* @__PURE__ */ jsx(FileDownloadButton, { file })
+  ] });
+}
+function useStuffFile(kind, value) {
+  const location = useResultLocation();
+  return location ? readStuffFile(kind, value, location.path.join(".")) : void 0;
+}
+function FileDownloadButton({ file }) {
+  const s = useFieldStrings();
+  const location = useResultLocation();
+  const resolve = useResolveUrl();
+  const save = useSaveFiles();
+  const shown = useFileDownloadShown(file.kind);
+  const statusId = useId();
+  const [attempt, setAttempt] = useState(null);
+  useEffect(() => {
+    if (attempt?.state !== "saved") return;
+    const timer = window.setTimeout(
+      () => setAttempt((current) => current === attempt ? null : current),
+      1500
+    );
+    return () => window.clearTimeout(timer);
+  }, [attempt]);
+  if (!shown || !location) return null;
+  const planned = planFileSave(file, {
+    baseName: location.baseName,
+    ...resolve ? { resolveUrl: resolve } : {}
+  });
+  if (!planned) return null;
+  const identity = `${planned.name}
+${planned.url ?? planned.text}`;
+  const state = attempt?.identity === identity ? attempt.state : "idle";
+  const failed = state === "failed";
+  const label = s.downloadFile(planned.name);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          const started = { identity, state: "saving" };
+          setAttempt(started);
+          void save([planned]).then((result) => {
+            const settled = result.failed.length > 0 ? "failed" : "saved";
+            setAttempt((current) => current === started ? { identity, state: settled } : current);
+          });
+        },
+        disabled: state === "saving",
+        "aria-label": label,
+        title: failed ? s.downloadFileFailed : label,
+        ...failed ? { "aria-describedby": statusId } : {},
+        className: cn(
+          "shrink-0 rounded p-0.5 hover:bg-card focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+          failed ? "text-destructive" : "text-muted-foreground hover:text-foreground"
+        ),
+        children: state === "saving" ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-3.5 animate-spin" }) : state === "saved" ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : failed ? /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Download, { "aria-hidden": true, className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { id: statusId, role: "status", className: "sr-only", children: failed ? s.downloadFileFailed : "" })
   ] });
 }
 function paintable(content, resolve) {
@@ -2135,6 +2320,7 @@ function DocumentValue({ value }) {
   const s = useFieldStrings();
   const resolve = useResolveUrl();
   const [open, setOpen] = useState(false);
+  const file = useStuffFile("document", value);
   const content = readDocumentContent(value);
   if (!content) return /* @__PURE__ */ jsx(Absent, {});
   const name = content.title ?? content.filename ?? fileLabel(content.url, content.filename, s);
@@ -2150,7 +2336,8 @@ function DocumentValue({ value }) {
             url: paintableUrl(content, resolve) ?? content.url,
             storageUrl: content.url,
             mimeType: content.mimeType,
-            ...content.filename ? { filename: content.filename } : {}
+            ...content.filename ? { filename: content.filename } : {},
+            file
           }
         ),
         content.snippet && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-[12px] leading-relaxed text-muted-foreground", children: content.snippet })
@@ -2180,6 +2367,7 @@ function ImageValue({
 }) {
   const s = useFieldStrings();
   const resolve = useResolveUrl();
+  const file = useStuffFile("image", value);
   const content = readImageContent(value);
   if (!content) return /* @__PURE__ */ jsx(Absent, {});
   const src = paintableUrl(content, resolve);
@@ -2230,7 +2418,8 @@ function ImageValue({
           {
             url: content.url,
             mimeType: content.mimeType,
-            ...content.filename ? { filename: content.filename } : {}
+            ...content.filename ? { filename: content.filename } : {},
+            file
           }
         ) })
       ] })
@@ -2255,7 +2444,8 @@ function ImageValue({
       {
         url: content.url,
         mimeType: content.mimeType,
-        ...content.filename ? { filename: content.filename } : {}
+        ...content.filename ? { filename: content.filename } : {},
+        file
       }
     ),
     src && !compact && /* @__PURE__ */ jsx("div", { className: inGallery ? "px-2.5" : void 0, children: /* @__PURE__ */ jsx(
@@ -2264,7 +2454,8 @@ function ImageValue({
         url: src,
         storageUrl: content.url,
         mimeType: content.mimeType,
-        ...content.filename ? { filename: content.filename } : {}
+        ...content.filename ? { filename: content.filename } : {},
+        file
       }
     ) }),
     content.caption && /* @__PURE__ */ jsx(
@@ -2467,7 +2658,7 @@ function ObjectTable({
           ] }) }),
           /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => {
             const isOpen = canExpand && expanded.has(index);
-            return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60 last:border-b-0", children: [
+            return /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60 last:border-b-0", children: [
               canExpand && /* @__PURE__ */ jsx("td", { className: "px-1 pt-px align-top", children: /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -2504,7 +2695,7 @@ function ObjectTable({
                       column === name ? "max-w-none min-w-[16ch] wrap-anywhere [&>span]:whitespace-normal" : column.kind === "list" && isInlineColumn(column) ? "min-w-[16ch]" : "truncate"
                     ),
                     ...typeof cell === "string" || typeof cell === "number" ? { title: cellTitle(column, cell, presentation) } : {},
-                    children: /* @__PURE__ */ jsx(LeafValue, { field: column, value: cell, compact: true })
+                    children: /* @__PURE__ */ jsx(ResultAt, { segment: column.name, children: /* @__PURE__ */ jsx(LeafValue, { field: column, value: cell, compact: true }) })
                   }
                 ) }, column.name);
               })
@@ -2565,10 +2756,10 @@ function ImageGallery({ items }) {
     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)) });
+  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(ResultAt, { segment: String(index), 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)) });
+  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: /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: kind === "document" ? /* @__PURE__ */ jsx(DocumentValue, { value: item }) : /* @__PURE__ */ jsx(ImageValue, { value: item, inRow: true }) }) }, index)) });
 }
 function recordColumns(item) {
   if (item.kind !== "object" || item.fields.length === 0) return void 0;
@@ -2595,9 +2786,16 @@ function chooseColumns(fields, budget) {
     ...name ? { name } : {}
   };
 }
-function ResultField({ field, value, depth = 0, hideLabel = false }) {
+function ResultField(props) {
+  const location = useResultLocation();
+  if (location) return /* @__PURE__ */ jsx(ResultNode, { ...props });
+  return /* @__PURE__ */ jsx(ResultRoot, { baseName: props.field.name, path: [props.field.name], children: /* @__PURE__ */ jsx(ResultNode, { ...props }) });
+}
+function ResultNode({ field, value, depth = 0, hideLabel = false }) {
   const s = useFieldStrings();
   const unwrapped = unwrap(field, value);
+  const pageDownloadShown = useFileDownloadShown("markup");
+  const location = useResultLocation();
   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)) {
@@ -2608,8 +2806,12 @@ function ResultField({ field, value, depth = 0, hideLabel = false }) {
   }
   if (isNativeHtmlNode(field)) {
     const content = readHtmlContent(unwrapped);
+    const page = pageDownloadShown && location ? readStuffFile("markup", unwrapped, location.path.join(".")) : void 0;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      header,
+      page ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+        /* @__PURE__ */ jsx(FileActions, { file: page })
+      ] }) : header,
       content ? /* @__PURE__ */ jsx(HtmlPreview, { content }) : /* @__PURE__ */ jsx(Absent, {})
     ] });
   }
@@ -2657,7 +2859,7 @@ function ResultField({ field, value, depth = 0, hideLabel = false }) {
                 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)
+                ] }, child.name) : /* @__PURE__ */ jsx("div", { className: "col-span-2 min-w-0", children: /* @__PURE__ */ jsx(ResultAt, { segment: child.name, children: /* @__PURE__ */ jsx(ResultField, { field: child, value: memberValue(child), depth: depth + 1 }) }) }, child.name)
               )
             )
           }
@@ -2679,7 +2881,7 @@ function ResultField({ field, value, depth = 0, hideLabel = false }) {
           // date's `date` and `time`, print a page's markup source down a
           // column named by it, and show a composite as JSON. The arm keyed by
           // concept is the one that knows what each entry is.
-          /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/60 overflow-hidden rounded-lg border border-border", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "bg-card/40 px-3 py-1.5", children: /* @__PURE__ */ jsx(ResultField, { field: field.item, value: item, depth: depth + 1, hideLabel: true }) }, index)) })
+          /* @__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(ResultAt, { segment: String(index), children: /* @__PURE__ */ jsx(ResultField, { field: field.item, value: item, depth: depth + 1, hideLabel: true }) }) }, index)) })
         ) : columns ? (
           // Same shape every row: the labels are column headers, not per-row
           // labels. See `ObjectTable`.
@@ -2714,7 +2916,7 @@ function ResultField({ field, value, depth = 0, hideLabel = false }) {
               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 })
+                /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: /* @__PURE__ */ jsx(ResultField, { field: field.item, value: item, depth: depth + 1, hideLabel: true }) })
               ]
             },
             index
@@ -2741,67 +2943,6 @@ function ResultField({ field, value, depth = 0, hideLabel = false }) {
   }
   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 = [];
@@ -2861,33 +3002,73 @@ function JsonView({ value }) {
     /* @__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({
+function isShownResult(attempt, field, baseName, value) {
+  if (attempt.field === field && attempt.baseName === baseName && attempt.value === value) {
+    return true;
+  }
+  return attempt.key !== void 0 && attempt.key === resultKey(field, baseName, value);
+}
+function resultKey(field, baseName, value) {
+  try {
+    return JSON.stringify(
+      [baseName, field, value],
+      (_key, member) => typeof member === "bigint" ? `${member}n` : member
+    );
+  } catch {
+    return void 0;
+  }
+}
+function StuffViewer({ downloads, ...props }) {
+  return /* @__PURE__ */ jsx(DownloadDisplayOverride, { downloads, children: /* @__PURE__ */ jsx(StuffPanel, { ...props }) });
+}
+function StuffPanel({
   field,
   value,
   name,
   defaultView = "rendered",
   downloadBaseName,
-  hideDownload = false,
   className
 }) {
   const s = useFieldStrings();
   const named = name ? { ...field, name } : field;
+  const baseName = downloadBaseName ?? named.name ?? "result";
   const [view, setView] = useState(defaultView);
-  const [saving, setSaving] = useState(false);
+  const [saving, setSaving] = useState(null);
+  const [missed, setMissed] = useState(null);
+  const latest = useRef(null);
+  const savingShown = saving !== null && isShownResult(saving, field, baseName, value);
+  const missedShown = missed && isShownResult(missed.attempt, field, baseName, value) ? missed.names : [];
   const resolveUrl = useResolveUrl();
+  const save = useSaveFiles();
+  const downloadShown = useResultDownloadShown();
   const handleDownload = useCallback(async () => {
-    setSaving(true);
+    const attempt = {
+      field,
+      baseName,
+      value,
+      key: resultKey(field, baseName, value)
+    };
+    latest.current = attempt;
+    setSaving(attempt);
+    setMissed(null);
     try {
-      await downloadStuff({
-        field,
-        value,
-        baseName: downloadBaseName ?? named.name ?? "result",
-        resolveUrl
+      const plan = planStuffSave(field, value, {
+        baseName,
+        ...resolveUrl ? { resolveUrl } : {}
+      });
+      const { failed } = await save(plan.files);
+      if (latest.current !== attempt) return;
+      setMissed({
+        attempt,
+        names: [
+          ...plan.unavailable.map((file) => file.name),
+          ...failed.map((failure) => failure.file.name)
+        ]
       });
     } finally {
-      setSaving(false);
+      setSaving((current) => current === attempt ? null : current);
     }
-  }, [field, named.name, value, downloadBaseName, resolveUrl]);
+  }, [field, value, baseName, resolveUrl, save]);
   const views = [
     { id: "rendered", label: s.viewRendered },
     { id: "json", label: s.viewJson }
@@ -2896,17 +3077,17 @@ function StuffViewer({
     /* @__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(
+        downloadShown && /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             onClick: () => void handleDownload(),
-            disabled: saving,
+            disabled: savingShown,
             "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
+              savingShown ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }),
+              savingShown ? s.downloading : s.download
             ]
           }
         ),
@@ -2934,10 +3115,18 @@ function StuffViewer({
         )
       ] })
     ] }),
-    view === "json" ? /* @__PURE__ */ jsx(JsonView, { value }) : /* @__PURE__ */ jsx(ResultField, { field, value, hideLabel: true })
+    downloadShown && /* @__PURE__ */ jsx(
+      "p",
+      {
+        role: "status",
+        className: cn("text-[12px] text-destructive", missedShown.length === 0 && "sr-only"),
+        children: missedShown.length > 0 ? s.downloadIncomplete(missedShown) : ""
+      }
+    ),
+    view === "json" ? /* @__PURE__ */ jsx(JsonView, { value }) : /* @__PURE__ */ jsx(ResultRoot, { baseName, path: [field.name], children: /* @__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-E2IVBAW3.js.map
-//# sourceMappingURL=chunk-E2IVBAW3.js.map
+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, ResultRoot, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, cn, fieldControlClass, humanizeFieldName, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
+//# sourceMappingURL=chunk-2D4NEFUH.js.map
+//# sourceMappingURL=chunk-2D4NEFUH.js.map