@pipelex/mthds-form 0.10.1 → 0.12.0

package/dist/{chunk-W56WIIVC.js → chunk-4KX6YTLW.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-V7T4DM63.js';
+import { readStuffFile } from './chunk-VS5JMFUV.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';
@@ -203,6 +204,7 @@ var DEFAULT_FIELD_STRINGS = {
   dropToUpload: "Drop to upload",
   dropOrBrowse: "Drop a file or click to browse",
   pasteUrlInstead: "paste a URL instead",
+  uploadUnavailable: "Files cannot be uploaded here. Paste a link to the file instead.",
   urlPlaceholder: "https://\u2026",
   fileUrlAria: (label) => label ? `Link to the file for ${label}` : "Link to the file",
   uploadedFile: "Attached file",
@@ -220,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",
@@ -278,7 +283,16 @@ function FieldShell({
       !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,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "space-y-2",
+          isApp && error && "rounded-lg ring-1 ring-destructive/70 ring-offset-4 ring-offset-background"
+        ),
+        children
+      }
+    ),
     error && /* @__PURE__ */ jsx("p", { className: "flex items-center gap-1 text-[11px] text-destructive", role: "alert", children: error })
   ] });
 }
@@ -348,9 +362,11 @@ function FileField({
   field,
   value,
   onDropFile,
+  allowUrl = true,
   onChange,
   id,
   uploading,
+  uploadError,
   resolveUrl,
   error,
   disabled,
@@ -372,16 +388,28 @@ function FileField({
   }, []);
   useEffect(() => () => setLocal(null), [setLocal]);
   const [rejected, setRejected] = useState(null);
+  const [dismissedUploadError, setDismissedUploadError] = useState(null);
+  useEffect(() => {
+    if (uploadError === void 0) setDismissedUploadError(null);
+    else setRejected(null);
+  }, [uploadError]);
+  const dismissUploadError = useCallback(() => {
+    setDismissedUploadError(uploadError ?? null);
+  }, [uploadError]);
+  const failure = uploadError !== void 0 && uploadError !== dismissedUploadError ? uploadError : null;
   const formats = field.formats;
   const hint = acceptLabel(formats);
   const accept = useMemo(() => acceptMap(formats), [formats]);
+  const canUpload = onDropFile !== void 0;
   const handleFile = useCallback(
     (file) => {
+      if (!onDropFile) return;
       if (!isAcceptedFile(formats, file)) {
         setRejected(file.name);
         return;
       }
       setRejected(null);
+      setDismissedUploadError(null);
       setLocal({ objectUrl: URL.createObjectURL(file), type: file.type });
       onDropFile(file);
     },
@@ -391,7 +419,9 @@ function FileField({
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     maxFiles: 1,
     multiple: false,
-    disabled: busy,
+    // Disabled, not merely unrendered, when there is no upload path: the hook
+    // cannot be skipped, and nothing may open a picker through it.
+    disabled: busy || !canUpload,
     // 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
@@ -421,8 +451,9 @@ function FileField({
     setResolved(null);
     setPreviewOpen(false);
     setRejected(null);
+    dismissUploadError();
     onChange(void 0);
-  }, [setLocal, onChange]);
+  }, [setLocal, onChange, dismissUploadError]);
   const localIsCurrent = !!localPreview && (localPreview.boundUrl === void 0 || localPreview.boundUrl === value?.url);
   useEffect(() => {
     if (!localPreview) return;
@@ -464,6 +495,14 @@ function FileField({
   };
   const urlValue = value?.url ?? "";
   const urlText = presentation === "studio" || isReadableLink(urlValue) || urlValue === typedUrl ? urlValue : "";
+  if (!canUpload && !allowUrl) {
+    throw new Error(
+      `The file field at "${id}" has no way in: the form's environment supplies no onDropFile and sets allowUrl to false. Supply onDropFile so the file can be uploaded, or leave allowUrl unset so a link can be pasted.`
+    );
+  }
+  const linkOpen = allowUrl && (!canUpload || showUrl);
+  const noUploadLineShown = !canUpload && !hasFile && !uploading;
+  const noUploadLineId = `${domId}-no-upload`;
   return /* @__PURE__ */ jsxs(
     FieldShell,
     {
@@ -497,7 +536,19 @@ function FileField({
             // 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" }) })
           ))
-        ] }) : (
+        ] }) : !canUpload ? (
+          // No upload path, so no dropzone and no picker: a control that takes a
+          // file with nowhere to send it drops the file without a word. The line
+          // says why the link input below is the way in, and the hint says what
+          // that link has to point at.
+          /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: uploading ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-[12px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+            s.uploading
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { id: noUploadLineId, className: "text-[12px] text-muted-foreground", children: s.uploadUnavailable }),
+            hint && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-muted-foreground", children: hint })
+          ] }) })
+        ) : (
           // `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
@@ -539,39 +590,43 @@ function FileField({
             }
           )
         ),
-        rejected && !busy && /* @__PURE__ */ jsxs("p", { role: "alert", className: "text-[12px] text-destructive", children: [
+        !busy && (rejected ? /* @__PURE__ */ jsxs("p", { role: "alert", className: "text-[12px] text-destructive", children: [
           /* @__PURE__ */ jsx("span", { className: "font-mono", children: rejected }),
           " \u2014 ",
           s.unsupportedFileType(hint)
-        ] }),
-        !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(
+        ] }) : failure && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[12px] text-destructive", children: failure })),
+        linkOpen ? /* @__PURE__ */ jsx(
           "input",
           {
             type: "text",
-            autoFocus: true,
+            id: canUpload ? void 0 : domId,
+            autoFocus: showUrl,
             value: urlText,
             disabled: busy,
             "aria-label": s.fileUrlAria(fieldLabel(field.title, field.name, presentation)),
+            "aria-describedby": noUploadLineShown ? noUploadLineId : void 0,
+            "aria-invalid": canUpload ? void 0 : !!error,
             placeholder: s.urlPlaceholder,
             onChange: (e) => {
               setLocal(null);
+              dismissUploadError();
               setTypedUrl(e.target.value);
               onChange(e.target.value ? { url: e.target.value } : void 0);
             },
             className: cn(fieldControlClass, "h-9 px-3 font-mono text-[12px]")
           }
+        ) : allowUrl && /* @__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
+            ]
+          }
         )
       ]
     }
@@ -1111,6 +1166,7 @@ function ListField({ field, value, onChange, id, error, env }) {
   const isApp = presentation === "app";
   const items = value ?? [];
   const [rowKeys, setRowKeys] = useRowKeys(items.length);
+  const [staleErrors, setStaleErrors] = useState(NO_ERRORS);
   const setItem = (index, itemValue) => {
     const next = items.slice();
     next[index] = itemValue;
@@ -1118,10 +1174,40 @@ function ListField({ field, value, onChange, id, error, env }) {
   };
   const removeItem = (index) => {
     setRowKeys((prev) => prev.filter((_, i) => i !== index));
+    setStaleErrors((prev) => withRenumberedErrors(prev, id, index, env?.uploadErrors));
     onChange(items.filter((_, i) => i !== index));
   };
   const addItem = () => onChange([...items, emptyValue(field.item)]);
   const busy = listIsBusy(id, env?.uploadingIds);
+  const hostErrors = env?.uploadErrors;
+  useEffect(() => {
+    setStaleErrors((prev) => {
+      if (prev.size === 0) return prev;
+      const next = new Map([...prev].filter(([key, message]) => hostErrors?.get(key) === message));
+      return next.size === prev.size ? prev : next;
+    });
+  }, [hostErrors]);
+  const rowEnv = useMemo(() => {
+    if (!env || staleErrors.size === 0) return env;
+    const drop = env.onDropFile;
+    return {
+      ...env,
+      uploadErrors: new Map(
+        [...env.uploadErrors ?? []].filter(([key, message]) => staleErrors.get(key) !== message)
+      ),
+      // A new file at a position is a new attempt there, so what the host says
+      // about that position from now on is about the file that is there.
+      onDropFile: drop ? (dropId, file) => {
+        setStaleErrors((prev) => {
+          if (!prev.has(dropId)) return prev;
+          const next = new Map(prev);
+          next.delete(dropId);
+          return next;
+        });
+        drop(dropId, file);
+      } : void 0
+    };
+  }, [env, staleErrors]);
   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: [
@@ -1155,7 +1241,7 @@ function ListField({ field, value, onChange, id, error, env }) {
                 value: item,
                 onChange: (v) => setItem(index, v),
                 id: `${id}.${index}`,
-                env
+                env: rowEnv
               }
             ) }),
             /* @__PURE__ */ jsx(
@@ -1199,6 +1285,18 @@ function listIsBusy(id, uploadingIds) {
   for (const uploading of uploadingIds) if (uploading.startsWith(prefix)) return true;
   return false;
 }
+var NO_ERRORS = /* @__PURE__ */ new Map();
+function withRenumberedErrors(stale, listId, removed, hostErrors) {
+  if (!hostErrors?.size) return stale;
+  const prefix = `${listId}.`;
+  const next = new Map(stale);
+  for (const [key, message] of hostErrors) {
+    if (!key.startsWith(prefix)) continue;
+    const row = key.slice(prefix.length).split(".")[0] ?? "";
+    if (/^\d+$/.test(row) && Number(row) >= removed) next.set(key, message);
+  }
+  return next.size === stale.size && [...next].every(([k, m]) => stale.get(k) === m) ? stale : next;
+}
 function useRowKeys(length) {
   const [state, setState] = useState(() => ({
     keys: Array.from({ length }, (_, i) => i),
@@ -1265,6 +1363,7 @@ function UnknownField({ field, value, onChange, id, error, disabled }) {
 }
 function FieldRenderer({ field, value, onChange, id, error, env }) {
   const disabled = env?.disabled;
+  const drop = env?.onDropFile;
   switch (field.kind) {
     case "text":
       return /* @__PURE__ */ jsx(
@@ -1344,8 +1443,10 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
           field,
           value,
           onChange,
-          onDropFile: (file) => env?.onDropFile?.(id, file),
+          onDropFile: drop ? (file) => drop(id, file) : void 0,
+          allowUrl: env?.allowUrl,
           uploading: env?.uploadingIds?.has(id),
+          uploadError: env?.uploadErrors?.get(id),
           resolveUrl: env?.resolveUrl,
           id,
           error,
@@ -1359,8 +1460,10 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
           field,
           value,
           onChange,
-          onDropFile: (file) => env?.onDropFile?.(id, file),
+          onDropFile: drop ? (file) => drop(id, file) : void 0,
+          allowUrl: env?.allowUrl,
           uploading: env?.uploadingIds?.has(id),
+          uploadError: env?.uploadErrors?.get(id),
           resolveUrl: env?.resolveUrl,
           id,
           error,
@@ -1405,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;
 }
@@ -1428,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";
 }
@@ -1437,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;
@@ -1959,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);
@@ -1994,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) return null;
+  const planned = planFileSave(file, {
+    baseName: location?.baseName ?? file.path,
+    ...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) {
@@ -2036,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);
@@ -2051,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 })
@@ -2081,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);
@@ -2131,7 +2418,8 @@ function ImageValue({
           {
             url: content.url,
             mimeType: content.mimeType,
-            ...content.filename ? { filename: content.filename } : {}
+            ...content.filename ? { filename: content.filename } : {},
+            file
           }
         ) })
       ] })
@@ -2156,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(
@@ -2165,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(
@@ -2368,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",
                 {
@@ -2405,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);
               })
@@ -2466,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;
@@ -2496,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)) {
@@ -2509,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, {})
     ] });
   }
@@ -2558,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)
               )
             )
           }
@@ -2580,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`.
@@ -2615,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
@@ -2642,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 = [];
@@ -2762,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 }
@@ -2797,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
             ]
           }
         ),
@@ -2835,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-W56WIIVC.js.map
-//# sourceMappingURL=chunk-W56WIIVC.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-4KX6YTLW.js.map
+//# sourceMappingURL=chunk-4KX6YTLW.js.map