@pipelex/mthds-form 0.13.0 → 0.14.0

package/dist/{chunk-D2EQVWGN.js → chunk-7JRT6ZII.js}

@@ -1,14 +1,17 @@
-import { planStuffSave, planFileSave } from './chunk-7KQXGG6J.js';
+import { seedInputs, closeOptionalStructures, openOptionalStructures } from './chunk-VH5CDQDR.js';
+import { setValueAtPath, apiInputsFromRunValues } from './chunk-VT5E5W4E.js';
+import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chunk-ICUEHNEH.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 { buildRunFields } from './chunk-ZB4RYUKV.js';
 import { conceptCategory } from './chunk-FABY3DEY.js';
 import { acceptLabel, acceptMap, isAcceptedFile, formatOfFilename, DOCUMENT_FORMATS, IMAGE_FORMATS } from './chunk-XCO6GTEC.js';
-import { shownAsOptional, isFilled } from './chunk-MJQ7CXUB.js';
+import { shownAsOptional, isFoldedOptional, anyOptionalStructureOpen, isOptionalStructure, computeReadiness, optionalStructureOpen, mustBeFilled, fieldFilled, isFilled } from './chunk-XO5OENNF.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, TriangleAlert } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, List, Braces, ListChecks, ToggleLeft, Hash, Image as Image$1, FileText, CalendarDays, Type, Loader2, ImageOff, Upload, Link2, EyeOff, Eye, X, Minus, Plus, Trash2, TriangleAlert, FileDown, 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';
@@ -28,7 +31,7 @@ var CATEGORY_ICON = {
   text: Type,
   date: CalendarDays,
   document: FileText,
-  image: Image,
+  image: Image$1,
   number: Hash,
   boolean: ToggleLeft,
   choice: ListChecks,
@@ -200,7 +203,7 @@ var EN_FIELD_STRINGS = {
   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"}`,
+  itemsCountOf: (count, total2) => `${count} of ${total2} ${total2 === 1 ? "item" : "items"}`,
   fieldsCount: (count) => count === 1 ? "1 field" : `${count} fields`,
   uploading: "Uploading\u2026",
   dropToUpload: "Drop to upload",
@@ -227,6 +230,14 @@ var EN_FIELD_STRINGS = {
   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",
+  downloadPdf: "Download PDF",
+  downloadPdfBusy: "Preparing the PDF\u2026",
+  downloadPdfFailed: "The PDF could not be made",
+  pageLoading: "Loading the page\u2026",
+  downloadHtml: "Download HTML",
+  fileNameTitle: "File name",
+  fileNameCancel: "Cancel",
+  fileNameConfirm: "Download",
   viewRendered: "Result",
   viewJson: "JSON",
   copyJson: "Copy the JSON",
@@ -237,7 +248,10 @@ var EN_FIELD_STRINGS = {
   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`
+  optionalInputsCount: (count) => count === 1 ? "1 optional input" : `${count} optional inputs`,
+  requiredField: "Required",
+  incompleteField: "Incomplete: fill in its required fields",
+  uploadFailed: "This file could not be uploaded. Try again."
 };
 
 // src/react/locales/fr.ts
@@ -275,7 +289,7 @@ var FR_FIELD_STRINGS = {
   addItem: "Ajouter un \xE9l\xE9ment",
   removeItemAria: (index) => `Supprimer l\u2019\xE9l\xE9ment ${index}`,
   itemsCount: (count) => `${count} ${plural(count, "\xE9l\xE9ment", "\xE9l\xE9ments")}`,
-  itemsCountOf: (count, total) => `${count} sur ${total} ${plural(total, "\xE9l\xE9ment", "\xE9l\xE9ments")}`,
+  itemsCountOf: (count, total2) => `${count} sur ${total2} ${plural(total2, "\xE9l\xE9ment", "\xE9l\xE9ments")}`,
   fieldsCount: (count) => `${count} ${plural(count, "champ", "champs")}`,
   uploading: "Envoi en cours\u2026",
   dropToUpload: "D\xE9posez pour envoyer",
@@ -302,6 +316,14 @@ var FR_FIELD_STRINGS = {
   downloadIncomplete: (names) => `${names.length <= 1 ? "Un fichier n\u2019a pas pu \xEAtre enregistr\xE9" : `${names.length} fichiers n\u2019ont pas pu \xEAtre enregistr\xE9s`}\xA0: ${names.join(", ")}`,
   downloadFile: (name) => `T\xE9l\xE9charger ${name}`,
   downloadFileFailed: "Le fichier n\u2019a pas pu \xEAtre enregistr\xE9",
+  downloadPdf: "T\xE9l\xE9charger le PDF",
+  downloadPdfBusy: "Pr\xE9paration du PDF\u2026",
+  downloadPdfFailed: "Le PDF n\u2019a pas pu \xEAtre cr\xE9\xE9",
+  pageLoading: "Chargement de la page\u2026",
+  downloadHtml: "T\xE9l\xE9charger le HTML",
+  fileNameTitle: "Nom du fichier",
+  fileNameCancel: "Annuler",
+  fileNameConfirm: "T\xE9l\xE9charger",
   viewRendered: "R\xE9sultat",
   viewJson: "JSON",
   copyJson: "Copier le JSON",
@@ -312,7 +334,10 @@ var FR_FIELD_STRINGS = {
   hideOptionalFields: "Masquer les champs facultatifs",
   hideOptionalInputs: "Masquer les entr\xE9es facultatives",
   optionalFieldsCount: (count) => `${count} ${plural(count, "champ facultatif", "champs facultatifs")}`,
-  optionalInputsCount: (count) => `${count} ${plural(count, "entr\xE9e facultative", "entr\xE9es facultatives")}`
+  optionalInputsCount: (count) => `${count} ${plural(count, "entr\xE9e facultative", "entr\xE9es facultatives")}`,
+  requiredField: "Obligatoire",
+  incompleteField: "Incomplet\xA0: remplissez ses champs obligatoires",
+  uploadFailed: "Ce fichier n\u2019a pas pu \xEAtre envoy\xE9. R\xE9essayez."
 };
 
 // src/react/locales/index.ts
@@ -1183,6 +1208,7 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
     {
       type: "button",
       onClick: onToggle,
+      "aria-expanded": expanded,
       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" }),
@@ -1192,16 +1218,24 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
   );
 }
 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) => shownAsOptional(f) && !isFilled(ownProp(data, f.name))
-  );
-  const visible = showOptional ? field.fields : field.fields.filter((f) => !shownAsOptional(f) || isFilled(ownProp(data, f.name)));
+  const folded = field.fields.filter((f) => isFoldedOptional(f, ownProp(data, f.name)));
+  const structureOpen = anyOptionalStructureOpen(field.fields, data);
+  const expanded = showOptional || structureOpen;
+  const visible = expanded ? field.fields : field.fields.filter((f) => !isFoldedOptional(f, ownProp(data, f.name)));
+  const hasStructure = field.fields.some(isOptionalStructure);
+  const toggle = () => {
+    setShowOptional(!expanded);
+    if (hasStructure) {
+      onChange(
+        expanded ? closeOptionalStructures(field.fields, data) : openOptionalStructures(field.fields, data)
+      );
+    }
+  };
   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(
@@ -1214,8 +1248,7 @@ function ObjectField({ field, value, onChange, id, error, env }) {
           children: fieldLabel(field.title, field.name, presentation)
         }
       ),
-      !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" }),
-      shownAsOptional(field) && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: s.optionalBadge })
+      !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" })
     ] }),
     field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
     /* @__PURE__ */ jsxs(
@@ -1237,12 +1270,12 @@ function ObjectField({ field, value, onChange, id, error, env }) {
             },
             child.name
           )),
-          optionalEmpty.length > 0 && /* @__PURE__ */ jsx(
+          (folded.length > 0 || structureOpen) && /* @__PURE__ */ jsx(
             OptionalToggle,
             {
-              count: optionalEmpty.length,
-              expanded: showOptional,
-              onToggle: () => setShowOptional((v) => !v),
+              count: folded.length,
+              expanded,
+              onToggle: toggle,
               noun: "field"
             }
           )
@@ -1329,7 +1362,12 @@ function ListField({ field, value, onChange, id, error, env }) {
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
               FieldRenderer,
               {
-                field: { ...field.item, title: "", name: `${field.name}[${index}]` },
+                field: {
+                  ...field.item,
+                  title: "",
+                  name: `${field.name}[${index}]`,
+                  required: true
+                },
                 value: item,
                 onChange: (v) => setItem(index, v),
                 id: `${id}.${index}`,
@@ -1600,6 +1638,192 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
       );
   }
 }
+var EMPTY_IDS = /* @__PURE__ */ new Set();
+function withId(ids, id) {
+  if (ids.has(id)) return ids;
+  const next = new Set(ids);
+  next.add(id);
+  return next;
+}
+function withoutId(ids, id) {
+  if (!ids.has(id)) return ids;
+  const next = new Set(ids);
+  next.delete(id);
+  return next;
+}
+function orderFields(fields, order) {
+  if (!order || order.length === 0) return fields;
+  const rank = (field) => {
+    const index = order.indexOf(field.name);
+    return index === -1 ? order.length : index;
+  };
+  return fields.map((field, index) => ({ field, index })).sort((a, b) => rank(a.field) - rank(b.field) || a.index - b.index).map(({ field }) => field);
+}
+function useMethodForm({
+  descriptor,
+  contract,
+  prepareFields,
+  order,
+  initialValues,
+  uploadFile
+}) {
+  const orderKey = order ? order.join("\0") : "";
+  const fields = useMemo(() => {
+    const derived = buildRunFields(descriptor, contract.inputs);
+    const prepared = prepareFields ? prepareFields(derived) : derived;
+    return orderFields(prepared, orderKey ? orderKey.split("\0") : void 0);
+  }, [descriptor, contract.inputs, prepareFields, orderKey]);
+  const initial = useMemo(() => {
+    if (typeof initialValues === "function") return initialValues(seedInputs(fields));
+    return initialValues ?? seedInputs(fields);
+  }, [initialValues, fields]);
+  const [edited, setEdited] = useState(null);
+  const [uploadingIds, setUploadingIds] = useState(EMPTY_IDS);
+  const [failedUploadIds, setFailedUploadIds] = useState(EMPTY_IDS);
+  const [attempted, setAttempted] = useState(false);
+  const pendingUploads = useRef(/* @__PURE__ */ new Map());
+  const uploadCounter = useRef(0);
+  const values = edited ?? initial;
+  const setValues = useCallback(
+    (next) => setEdited((previous) => typeof next === "function" ? next(previous ?? initial) : next),
+    [initial]
+  );
+  const reset = useCallback((next) => {
+    pendingUploads.current.clear();
+    setEdited(next ?? null);
+    setUploadingIds(EMPTY_IDS);
+    setFailedUploadIds(EMPTY_IDS);
+    setAttempted(false);
+  }, []);
+  const dropFile = useMemo(() => {
+    if (!uploadFile) return void 0;
+    return (id, file) => {
+      const token = ++uploadCounter.current;
+      pendingUploads.current.set(id, token);
+      const current = () => pendingUploads.current.get(id) === token;
+      setUploadingIds((previous) => withId(previous, id));
+      setFailedUploadIds((previous) => withoutId(previous, id));
+      const path = id.split(".");
+      let upload;
+      try {
+        upload = Promise.resolve(uploadFile(file, { id, path }));
+      } catch (error) {
+        upload = Promise.reject(error);
+      }
+      upload.then(
+        (stored) => {
+          if (!current()) return;
+          const value = typeof stored === "string" ? { url: stored, filename: file.name } : { url: stored.url, filename: stored.filename ?? file.name };
+          setEdited((previous) => setValueAtPath(previous ?? initial, path, value));
+        },
+        () => {
+          if (current()) setFailedUploadIds((previous) => withId(previous, id));
+        }
+      ).finally(() => {
+        if (!current()) return;
+        pendingUploads.current.delete(id);
+        setUploadingIds((previous) => withoutId(previous, id));
+      });
+    };
+  }, [uploadFile, initial]);
+  const readiness = useMemo(() => computeReadiness(fields, values), [fields, values]);
+  const inputs = useMemo(
+    () => apiInputsFromRunValues(values, fields, contract.inputs),
+    [values, fields, contract.inputs]
+  );
+  const uploading = uploadingIds.size > 0;
+  const ready = readiness.ready === readiness.total && !uploading;
+  const attempt = useCallback(() => {
+    setAttempted(true);
+    return ready;
+  }, [ready]);
+  return {
+    fields,
+    values,
+    inputs,
+    readiness,
+    uploading,
+    ready,
+    attempted,
+    setValues,
+    reset,
+    attempt,
+    uploadingIds,
+    failedUploadIds,
+    dropFile
+  };
+}
+function MethodForm({ locale, strings, presentation, ...props }) {
+  let body = /* @__PURE__ */ jsx(MethodFormFields, { ...props });
+  if (presentation) {
+    body = /* @__PURE__ */ jsx(FieldPresentationProvider, { presentation, children: body });
+  }
+  if (locale !== void 0 || strings !== void 0) {
+    body = /* @__PURE__ */ jsx(FieldStringsProvider, { locale, strings, children: body });
+  }
+  return body;
+}
+function MethodFormFields({
+  form,
+  disabled,
+  allowUrl,
+  resolveUrl,
+  foldOptional = true,
+  errors,
+  className
+}) {
+  const s = useFieldStrings();
+  const [showOptional, setShowOptional] = useState(false);
+  const { fields, values, setValues, attempted, uploadingIds, failedUploadIds, dropFile } = form;
+  const uploadErrors = useMemo(
+    () => new Map([...failedUploadIds].map((id) => [id, s.uploadFailed])),
+    [failedUploadIds, s.uploadFailed]
+  );
+  const env = useMemo(
+    () => ({ disabled, onDropFile: dropFile, uploadingIds, uploadErrors, allowUrl, resolveUrl }),
+    [disabled, dropFile, uploadingIds, uploadErrors, allowUrl, resolveUrl]
+  );
+  const folds = (field) => {
+    const value = ownProp(values, field.name);
+    return foldOptional ? isFoldedOptional(field, value) : isOptionalStructure(field) && !optionalStructureOpen(value);
+  };
+  const folded = fields.filter(folds);
+  const structureOpen = anyOptionalStructureOpen(fields, values);
+  const expanded = showOptional || structureOpen;
+  const visible = expanded ? fields : fields.filter((field) => !folds(field));
+  const hasStructure = fields.some(isOptionalStructure);
+  const toggle = () => {
+    setShowOptional(!expanded);
+    if (hasStructure) {
+      setValues(
+        (previous) => expanded ? closeOptionalStructures(fields, previous) : openOptionalStructures(fields, previous)
+      );
+    }
+  };
+  const errorFor = (field) => {
+    const hostError = errors ? ownProp(errors, field.name) : void 0;
+    if (hostError) return hostError;
+    if (!attempted) return void 0;
+    const value = ownProp(values, field.name);
+    if (mustBeFilled(field)) return fieldFilled(field, value) ? void 0 : s.requiredField;
+    return isFilled(value) && !fieldFilled(field, value) ? s.incompleteField : void 0;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
+    visible.map((field) => /* @__PURE__ */ jsx(
+      FieldRenderer,
+      {
+        field,
+        id: field.name,
+        value: ownProp(values, field.name),
+        error: errorFor(field),
+        env,
+        onChange: (next) => setValues((previous) => ({ ...previous, [field.name]: next }))
+      },
+      field.name
+    )),
+    (folded.length > 0 || structureOpen) && /* @__PURE__ */ jsx(OptionalToggle, { count: folded.length, expanded, onToggle: toggle, noun: "input" })
+  ] });
+}
 
 // src/react/absolute-url.ts
 function absoluteUrl(url) {
@@ -1612,6 +1836,287 @@ function absoluteUrl(url) {
   }
 }
 
+// src/react/html-frame.ts
+var DEFAULT_IMG_SRC = "'self' data: https:";
+function pageTypography(font) {
+  return { color: "#000", mutedColor: "#555", borderColor: "#bbb", font };
+}
+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 isWholeDocument(markup) {
+  return /^\s*(?:<!--[\s\S]*?-->\s*)*<(?:!doctype\b|html[\s>]|head[\s>])/i.test(markup);
+}
+function frameDocument(content, { styles, imgSrc, fontSrc }) {
+  const head = [
+    '<!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}; font-src ${fontSrc}; base-uri 'none'; form-action 'none'">`,
+    `<style>${styles}</style></head>`
+  ].join("");
+  if (isWholeDocument(content.innerHtml)) return head + content.innerHtml;
+  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 `${head}<body>${body}</body></html>`;
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+
+// src/react/markup-storage.ts
+var MARKUP_RESOLVE_TIMEOUT_MS = 1e4;
+var STORAGE_SCHEME = "pipelex-storage:";
+function mayHoldStorageRefs(markup) {
+  return markup.toLowerCase().includes("pipelex-storage");
+}
+function isStorageRef(value) {
+  return value.trim().toLowerCase().startsWith(STORAGE_SCHEME);
+}
+function parseMarkup(markup) {
+  if (typeof DOMParser === "undefined") return void 0;
+  const parser = new DOMParser();
+  if (isWholeDocument(markup)) {
+    const doc2 = parser.parseFromString(markup, "text/html");
+    return {
+      root: doc2,
+      serialize: () => (doc2.doctype ? `<!DOCTYPE ${doc2.doctype.name}>` : "") + doc2.documentElement.outerHTML
+    };
+  }
+  const doc = parser.parseFromString("<!doctype html><body></body>", "text/html");
+  const template = doc.createElement("template");
+  template.innerHTML = markup;
+  return { root: template.content, serialize: () => template.innerHTML };
+}
+var CSS_URL = /url\(\s*(['"]?)(.*?)\1\s*\)/gi;
+function parseSrcset(value) {
+  const candidates = [];
+  let at = 0;
+  while (at < value.length) {
+    while (at < value.length && /[\s,]/.test(value[at] ?? "")) at += 1;
+    if (at >= value.length) break;
+    const start = at;
+    while (at < value.length && !/\s/.test(value[at] ?? "")) at += 1;
+    let url = value.slice(start, at);
+    if (url.endsWith(",")) {
+      url = url.replace(/,+$/, "");
+      candidates.push({ url, descriptor: "" });
+      continue;
+    }
+    let depth = 0;
+    const descriptorStart = at;
+    while (at < value.length) {
+      const char = value[at];
+      if (char === "(") depth += 1;
+      else if (char === ")") depth = Math.max(0, depth - 1);
+      else if (char === "," && depth === 0) break;
+      at += 1;
+    }
+    candidates.push({ url, descriptor: value.slice(descriptorStart, at).trim() });
+  }
+  return candidates;
+}
+function cssUrl(url) {
+  return `url("${url.replace(/[\\"]/g, (char) => `\\${char}`).replace(/[\n\r\f]/g, " ")}")`;
+}
+function attributeSite(element, name) {
+  return {
+    refs: () => {
+      const value = element.getAttribute(name) ?? "";
+      return isStorageRef(value) ? [value.trim()] : [];
+    },
+    rewrite: (answer) => {
+      const value = element.getAttribute(name) ?? "";
+      if (!isStorageRef(value)) return false;
+      const url = answer(value.trim());
+      if (url === void 0) return false;
+      element.setAttribute(name, url);
+      return true;
+    }
+  };
+}
+function srcsetSite(element, name) {
+  const read = () => parseSrcset(element.getAttribute(name) ?? "");
+  return {
+    refs: () => read().flatMap(({ url }) => isStorageRef(url) ? [url] : []),
+    rewrite: (answer) => {
+      let changed = false;
+      const candidates = read().map((candidate) => {
+        if (!isStorageRef(candidate.url)) return candidate;
+        const url = answer(candidate.url);
+        if (url === void 0) return candidate;
+        changed = true;
+        return { ...candidate, url: url.replace(/,/g, "%2C").replace(/\s/g, "%20") };
+      });
+      if (changed) {
+        element.setAttribute(
+          name,
+          candidates.map(({ url, descriptor }) => descriptor ? `${url} ${descriptor}` : url).join(", ")
+        );
+      }
+      return changed;
+    }
+  };
+}
+function cssSite(read, write) {
+  return {
+    refs: () => Array.from(read().matchAll(CSS_URL), (match) => (match[2] ?? "").trim()).filter(isStorageRef),
+    rewrite: (answer) => {
+      let changed = false;
+      const css = read().replace(CSS_URL, (token, _quote, inner) => {
+        const ref = inner.trim();
+        if (!isStorageRef(ref)) return token;
+        const url = answer(ref);
+        if (url === void 0) return token;
+        changed = true;
+        return cssUrl(url);
+      });
+      if (changed) write(css);
+      return changed;
+    }
+  };
+}
+function urlSites(root) {
+  const sites = [];
+  for (const element of Array.from(root.querySelectorAll("*"))) {
+    const tag = element.localName;
+    if (tag === "img" || tag === "source") {
+      sites.push(attributeSite(element, "src"), srcsetSite(element, "srcset"));
+    }
+    if (tag === "video") sites.push(attributeSite(element, "poster"));
+    if (tag === "image") {
+      sites.push(attributeSite(element, "href"), attributeSite(element, "xlink:href"));
+    }
+    if (element.hasAttribute("background")) sites.push(attributeSite(element, "background"));
+    if (element.hasAttribute("style")) {
+      sites.push(
+        cssSite(
+          () => element.getAttribute("style") ?? "",
+          (css) => element.setAttribute("style", css)
+        )
+      );
+    }
+    if (tag === "style") {
+      sites.push(
+        cssSite(
+          () => element.textContent ?? "",
+          (css) => {
+            element.textContent = css;
+          }
+        )
+      );
+    }
+  }
+  return sites;
+}
+function storageRefsIn(markup) {
+  if (!mayHoldStorageRefs(markup)) return [];
+  const parsed = parseMarkup(markup);
+  if (!parsed) return [];
+  return Array.from(new Set(urlSites(parsed.root).flatMap((site) => site.refs())));
+}
+function rewriteStorageRefs(markup, answer) {
+  if (!mayHoldStorageRefs(markup)) return markup;
+  const parsed = parseMarkup(markup);
+  if (!parsed) return markup;
+  let changed = false;
+  for (const site of urlSites(parsed.root)) {
+    if (site.rewrite(answer)) changed = true;
+  }
+  return changed ? parsed.serialize() : markup;
+}
+function readBulk(result) {
+  if (result instanceof Map) {
+    return (ref) => {
+      const url = result.get(ref);
+      return typeof url === "string" ? url : void 0;
+    };
+  }
+  if (result !== null && typeof result === "object") {
+    const record = result;
+    return (ref) => {
+      const url = ownProp(record, ref);
+      return typeof url === "string" ? url : void 0;
+    };
+  }
+  return () => void 0;
+}
+async function askBulkUntimed(resolveUrls, refs) {
+  try {
+    return readBulk(await resolveUrls(refs));
+  } catch {
+    return () => void 0;
+  }
+}
+async function askBulk(resolveUrls, refs, timeoutMs = MARKUP_RESOLVE_TIMEOUT_MS) {
+  let timer;
+  const timeout = new Promise((resolve) => {
+    timer = setTimeout(() => resolve(() => void 0), timeoutMs);
+  });
+  const asked = askBulkUntimed(resolveUrls, refs);
+  try {
+    return await Promise.race([asked, timeout]);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+function answerFor(bulk, resolveUrl) {
+  return (ref) => {
+    const fromBulk = viewableUrl(bulk?.(ref));
+    if (fromBulk !== void 0) return fromBulk;
+    try {
+      return viewableUrl(resolveUrl?.(ref));
+    } catch {
+      return void 0;
+    }
+  };
+}
+async function resolveHtmlStorageUrls(markup, { resolveUrl, resolveUrls }, { timeoutMs = MARKUP_RESOLVE_TIMEOUT_MS } = {}) {
+  if (!resolveUrl && !resolveUrls) return markup;
+  try {
+    const refs = storageRefsIn(markup);
+    if (refs.length === 0) return markup;
+    const bulk = resolveUrls ? await askBulk(resolveUrls, refs, timeoutMs) : void 0;
+    return rewriteStorageRefs(markup, answerFor(bulk, resolveUrl));
+  } catch {
+    return markup;
+  }
+}
+
 // src/react/save-in-browser.ts
 function saveBlob(blob, filename) {
   const href = URL.createObjectURL(blob);
@@ -1646,6 +2151,7 @@ async function saveInBrowser(files) {
 var ResultEnvContext = createContext({});
 function ResultEnvProvider({
   resolveUrl,
+  resolveUrls,
   resolveShareUrl,
   proseImages,
   tableColumns,
@@ -1654,8 +2160,16 @@ function ResultEnvProvider({
   children
 }) {
   const env = useMemo(
-    () => ({ resolveUrl, resolveShareUrl, proseImages, tableColumns, saveFiles, downloads }),
-    [resolveUrl, resolveShareUrl, proseImages, tableColumns, saveFiles, downloads]
+    () => ({
+      resolveUrl,
+      resolveUrls,
+      resolveShareUrl,
+      proseImages,
+      tableColumns,
+      saveFiles,
+      downloads
+    }),
+    [resolveUrl, resolveUrls, resolveShareUrl, proseImages, tableColumns, saveFiles, downloads]
   );
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: env, children });
 }
@@ -1666,15 +2180,19 @@ function DownloadDisplayOverride({
   const env = use(ResultEnvContext);
   const result = downloads?.result;
   const files = downloads?.files;
+  const pdf = downloads?.pdf;
+  const askFileName = downloads?.askFileName;
   const merged = useMemo(
-    () => result === void 0 && files === void 0 ? env : {
+    () => result === void 0 && files === void 0 && pdf === void 0 && askFileName === void 0 ? env : {
       ...env,
       downloads: {
         result: result ?? env.downloads?.result,
-        files: files ?? env.downloads?.files
+        files: files ?? env.downloads?.files,
+        pdf: pdf ?? env.downloads?.pdf,
+        askFileName: askFileName ?? env.downloads?.askFileName
       }
     },
-    [env, result, files]
+    [env, result, files, pdf, askFileName]
   );
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: merged, children });
 }
@@ -1684,16 +2202,25 @@ function useResolvedUrl(url) {
 function useResolveUrl() {
   return use(ResultEnvContext).resolveUrl;
 }
+function useMarkupResolvers() {
+  const { resolveUrl, resolveUrls } = use(ResultEnvContext);
+  return useMemo(() => ({ resolveUrl, resolveUrls }), [resolveUrl, resolveUrls]);
+}
 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) }
+  const resolvers = useMarkupResolvers();
+  return useCallback((files) => deliver(save, files, resolvers), [save, resolvers]);
+}
+async function deliver(save, files, resolvers) {
+  const handed = await Promise.all(
+    files.map(async (file) => {
+      if (file.url !== void 0) return { ...file, url: absoluteUrl(file.url) };
+      if (file.mimeType !== "text/html") return file;
+      return { ...file, text: await resolveHtmlStorageUrls(file.text, resolvers) };
+    })
   );
   try {
     const result = await save(handed);
@@ -1713,6 +2240,12 @@ function useFileDownloadShown(kind) {
   const files = use(ResultEnvContext).downloads?.files ?? true;
   return typeof files === "boolean" ? files : files.includes(kind);
 }
+function usePdfSaveShown() {
+  return use(ResultEnvContext).downloads?.pdf ?? true;
+}
+function useAskFileName() {
+  return use(ResultEnvContext).downloads?.askFileName ?? false;
+}
 function useProseImages() {
   return use(ResultEnvContext).proseImages ?? "link";
 }
@@ -1761,88 +2294,857 @@ var TooltipContent = React2.forwardRef(({ className, sideOffset = 6, ...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;
+function useFileNamePrompt() {
+  const asking = useAskFileName();
+  const [pending, setPending] = useState(null);
+  const ask = useCallback(
+    (stem2, extension) => {
+      if (!asking) return Promise.resolve(`${stem2}${extension}`);
+      return new Promise((resolve) => {
+        setPending({
+          stem: stem2,
+          extension,
+          settle: (name) => {
+            setPending(null);
+            resolve(name);
+          }
+        });
+      });
+    },
+    [asking]
+  );
+  const dialog = pending ? /* @__PURE__ */ jsx(
+    FileNameDialog,
+    {
+      stem: pending.stem,
+      extension: pending.extension,
+      onConfirm: (typed) => pending.settle(
+        `${typedFileStem(typed, pending.extension) || pending.stem}${pending.extension}`
+      ),
+      onCancel: () => pending.settle(null)
     }
-    :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;
+  ) : null;
+  return { ask, dialog };
+}
+function FileNameDialog({ stem: stem2, extension, onConfirm, onCancel }) {
+  const s = useFieldStrings();
+  const titleId = useId();
+  const extensionId = useId();
+  const [value, setValue] = useState(stem2);
+  const panel = useRef(null);
+  const field = useRef(null);
+  const pressedBackdrop = useRef(false);
+  useEffect(() => {
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    field.current?.focus();
+    field.current?.select();
+    return () => {
+      if (opener?.isConnected) opener.focus();
+    };
+  }, []);
+  const onKeyDown = (event) => {
+    event.stopPropagation();
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onCancel();
+      return;
     }
-    :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; }
-  `;
+    if (event.key !== "Tab") return;
+    const controls = Array.from(
+      panel.current?.querySelectorAll("input, button") ?? []
+    );
+    const first = controls[0];
+    const last = controls[controls.length - 1];
+    if (!first || !last) return;
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-file-name-backdrop": true,
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+      onMouseDown: (event) => {
+        event.stopPropagation();
+        pressedBackdrop.current = event.target === event.currentTarget;
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        if (pressedBackdrop.current && event.target === event.currentTarget) onCancel();
+        pressedBackdrop.current = false;
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panel,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          onKeyDown,
+          className: "w-full max-w-sm space-y-3 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg",
+          children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-[14px] font-medium", children: s.fileNameTitle }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border bg-input focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-ring", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: field,
+                  type: "text",
+                  value,
+                  onChange: (event) => setValue(event.target.value),
+                  onKeyDown: (event) => {
+                    if (event.key !== "Enter") return;
+                    event.preventDefault();
+                    onConfirm(value);
+                  },
+                  "aria-labelledby": titleId,
+                  ...extension ? { "aria-describedby": extensionId } : {},
+                  autoComplete: "off",
+                  spellCheck: false,
+                  className: "min-w-0 flex-1 bg-transparent px-2 py-1.5 text-[13px] text-foreground outline-none"
+                }
+              ),
+              extension ? /* @__PURE__ */ jsx("span", { id: extensionId, className: "shrink-0 pr-2 text-[13px] text-muted-foreground", children: extension }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onCancel,
+                  className: "rounded-md border border-border px-3 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                  children: s.fileNameCancel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onConfirm(value),
+                  className: "rounded-md bg-primary px-3 py-1 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                  children: s.fileNameConfirm
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
 }
-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("");
+
+// src/react/page-layout.ts
+var FIXED_ATTRIBUTE = "data-mthds-pdf-fixed";
+var ATOMIC_TAGS = /* @__PURE__ */ new Set([
+  "IMG",
+  "SVG",
+  "CANVAS",
+  "VIDEO",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "INPUT",
+  "TEXTAREA",
+  "SELECT",
+  "BUTTON",
+  "HR",
+  "PICTURE",
+  "svg"
+]);
+var HEADING_TAGS = /* @__PURE__ */ new Set(["H1", "H2", "H3", "H4", "H5", "H6"]);
+var FORCED = /* @__PURE__ */ new Set(["page", "always", "left", "right", "recto", "verso"]);
+var AVOIDED = /* @__PURE__ */ new Set(["avoid", "avoid-page"]);
+function measureFlow(doc) {
+  const win = doc.defaultView;
+  const root = doc.documentElement;
+  const offset = root.getBoundingClientRect().top;
+  const y = (value) => value - offset;
+  const spanOf = (el) => {
+    const rect = el.getBoundingClientRect();
+    return { top: y(rect.top), bottom: y(rect.bottom) };
+  };
+  const hard = [];
+  const avoid = [];
+  const forced = [];
+  const tables = [];
+  const fixed = [];
+  const keepAfter = [];
+  const keepBefore = [];
+  const walk = (el) => {
+    const style = win.getComputedStyle(el);
+    if (style.display === "none") return;
+    if (style.position === "fixed") {
+      fixed.push(el);
+      return;
+    }
+    const span = spanOf(el);
+    const display = style.display;
+    if (FORCED.has(style.breakBefore) || FORCED.has(style.getPropertyValue("page-break-before"))) {
+      forced.push(span.top);
+    }
+    if (FORCED.has(style.breakAfter) || FORCED.has(style.getPropertyValue("page-break-after"))) {
+      forced.push(span.bottom);
+    }
+    if (AVOIDED.has(style.breakAfter) || HEADING_TAGS.has(el.tagName)) keepAfter.push(span);
+    if (AVOIDED.has(style.breakBefore)) keepBefore.push(span);
+    const atomic = ATOMIC_TAGS.has(el.tagName) || display.startsWith("inline-");
+    if (atomic) {
+      if (span.bottom > span.top) hard.push(span);
+      return;
+    }
+    if (AVOIDED.has(style.breakInside) || AVOIDED.has(style.getPropertyValue("page-break-inside")) || display === "table-row") {
+      avoid.push(span);
+    }
+    if (display === "table" || display === "inline-table") {
+      tables.push(tableBox(el, span));
+    }
+    for (const child of Array.from(el.childNodes)) {
+      if (child.nodeType === 1) walk(child);
+      else if (child.nodeType === 3 && /\S/.test(child.textContent ?? "")) {
+        hard.push(...lineSpans(doc, child, y));
+      }
+    }
+  };
+  const tableBox = (table, span) => {
+    const box = { ...span };
+    for (const part of Array.from(table.children)) {
+      const display = win.getComputedStyle(part).display;
+      if (display === "table-header-group" && !box.head) box.head = spanOf(part);
+      if (display === "table-footer-group" && !box.foot) box.foot = spanOf(part);
+    }
+    return box;
+  };
+  walk(doc.body ?? root);
+  fixed.forEach((el) => el.setAttribute(FIXED_ATTRIBUTE, ""));
+  const lines = [...hard].sort((a, b) => a.top - b.top);
+  const firstLineFrom = (at) => lines.find((line) => line.top >= at - 0.5);
+  const lastLineBefore = (at) => [...lines].reverse().find((line) => line.bottom <= at + 0.5);
+  for (const span of keepAfter) {
+    const next = firstLineFrom(span.bottom);
+    if (next) avoid.push({ top: span.top, bottom: next.bottom });
+  }
+  for (const span of keepBefore) {
+    const previous = lastLineBefore(span.top);
+    const first = firstLineFrom(span.top);
+    if (previous && first) avoid.push({ top: previous.top, bottom: first.bottom });
+  }
+  for (const table of tables) {
+    if (!table.head) continue;
+    const next = firstLineFrom(table.head.bottom);
+    if (next && next.bottom <= (table.foot?.top ?? table.bottom) + 0.5) {
+      avoid.push({ top: table.top, bottom: next.bottom });
+    }
+  }
+  return {
+    layout: { height: root.scrollHeight, hard, avoid, forced, tables },
+    fixed
+  };
 }
-function escapeAttribute(value) {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+function lineSpans(doc, text, y) {
+  const range = doc.createRange();
+  range.selectNodeContents(text);
+  const spans = [];
+  for (const rect of Array.from(range.getClientRects())) {
+    if (rect.height === 0) continue;
+    const span = { top: y(rect.top), bottom: y(rect.bottom) };
+    const same = spans.find((line) => span.top < line.bottom && span.bottom > line.top);
+    if (same) {
+      same.top = Math.min(same.top, span.top);
+      same.bottom = Math.max(same.bottom, span.bottom);
+    } else spans.push(span);
+  }
+  return spans;
+}
+
+// src/react/paginate.ts
+var EPSILON = 0.5;
+function paginate(layout, pageHeight) {
+  const pages = [];
+  const end = layout.height;
+  const inkBottom = Math.max(0, ...layout.hard.map((span) => span.bottom));
+  const forced = [...layout.forced].sort((a, b) => a - b);
+  let start = 0;
+  for (let guard = 0; start < end - EPSILON && guard < 1e4; guard++) {
+    const heads = openAt(layout.tables, start).filter((table) => table.head && start >= table.head.bottom - EPSILON).map((table) => table.head);
+    const room = pageHeight - total(heads);
+    const nextForced = forced.find((at) => at > start + EPSILON && at < end - EPSILON);
+    if (end - start <= room + EPSILON && nextForced === void 0) {
+      pages.push({ heads, body: { top: start, bottom: end }, feet: [] });
+      break;
+    }
+    let feet = [];
+    let cut = start;
+    for (let pass = 0; pass < 4; pass++) {
+      const limit = start + room - total(feet);
+      cut = nextForced !== void 0 && nextForced <= limit + EPSILON ? nextForced : bestCut(layout, start, limit);
+      const needed = openAt(layout.tables, cut).filter((table) => table.foot).map((table) => table.foot).reverse();
+      if (total(needed) <= total(feet) + EPSILON) {
+        feet = needed;
+        break;
+      }
+      feet = needed;
+    }
+    pages.push({ heads, body: { top: start, bottom: cut }, feet });
+    start = cut;
+    if (inkBottom <= cut + EPSILON) break;
+  }
+  return pages;
+}
+function bestCut(layout, start, limit) {
+  const room = limit - start;
+  const hard = layout.hard.filter((span) => span.bottom - span.top <= room);
+  const avoid = layout.avoid.filter((span) => span.bottom - span.top <= room);
+  const candidates = /* @__PURE__ */ new Set([limit]);
+  for (const span of [...hard, ...avoid]) {
+    candidates.add(span.top);
+    candidates.add(span.bottom);
+  }
+  for (const table of layout.tables) {
+    candidates.add(table.top);
+    candidates.add(table.bottom);
+  }
+  const sorted = [...candidates].filter((at) => at > start + EPSILON && at <= limit + EPSILON).sort((a, b) => b - a);
+  for (const constraints of [[...hard, ...avoid], hard]) {
+    const cut = sorted.find((at) => !constraints.some((span) => inside(span, at)));
+    if (cut !== void 0) return Math.min(cut, limit);
+  }
+  return limit;
+}
+function inside(span, at) {
+  return at > span.top + EPSILON && at < span.bottom - EPSILON;
+}
+function openAt(tables, at) {
+  return tables.filter((table) => at > table.top + EPSILON && at < (table.foot?.top ?? table.bottom) - EPSILON).sort((a, b) => a.top - b.top);
+}
+function total(spans) {
+  return spans.reduce((sum, span) => sum + (span.bottom - span.top), 0);
+}
+
+// src/react/print-media.ts
+var PX_PER_MM = 96 / 25.4;
+var PAPER = {
+  a3: [297, 420],
+  a4: [210, 297],
+  a5: [148, 210],
+  b4: [250, 353],
+  b5: [176, 250],
+  "jis-b4": [257, 364],
+  "jis-b5": [182, 257],
+  letter: [215.9, 279.4],
+  legal: [215.9, 355.6],
+  ledger: [279.4, 431.8]
+};
+var DEFAULT_PAGE_BOX = {
+  width: 210 * PX_PER_MM,
+  height: 297 * PX_PER_MM,
+  margin: {
+    top: 10 * PX_PER_MM,
+    right: 10 * PX_PER_MM,
+    bottom: 10 * PX_PER_MM,
+    left: 10 * PX_PER_MM
+  }
+};
+function promotePrintRules(doc) {
+  for (const sheet of Array.from(doc.styleSheets)) {
+    if (sheet.media.length > 0) rewriteMedia(sheet.media);
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    rewriteRules(rules);
+  }
+}
+function rewriteRules(rules) {
+  for (const rule of Array.from(rules)) {
+    if (isMediaRule(rule)) rewriteMedia(rule.media);
+    if ("cssRules" in rule) rewriteRules(rule.cssRules);
+  }
+}
+function isMediaRule(rule) {
+  return rule.constructor.name === "CSSMediaRule" || rule.type === 4;
+}
+function rewriteMedia(media) {
+  const queries = Array.from({ length: media.length }, (_, i) => media.item(i) ?? "");
+  const printed = queries.map(onPaper);
+  if (printed.every((query, i) => query === queries[i])) return;
+  media.mediaText = printed.join(", ");
+}
+var MEDIA_QUERY = /^\s*(not\s+|only\s+)?([a-z][a-z-]*)(\s+and\s+[\s\S]*)?\s*$/i;
+function onPaper(query) {
+  const match = MEDIA_QUERY.exec(query);
+  if (!match) return query;
+  const [, prefix = "", type = "", rest = ""] = match;
+  const negated = /^not/i.test(prefix);
+  const typeHolds = ["print", "all"].includes(type.toLowerCase());
+  if (negated) return typeHolds ? `not all${rest}` : "all";
+  return typeHolds ? `all${rest}` : "not all";
+}
+function readPageBox(doc) {
+  let size = "";
+  const margin = {};
+  const visit = (rules) => {
+    for (const rule of Array.from(rules)) {
+      if (rule.constructor.name === "CSSPageRule" || rule.type === 6) {
+        const page = rule;
+        if (page.selectorText.trim() !== "") continue;
+        size = page.style.getPropertyValue("size") || size;
+        for (const side2 of ["top", "right", "bottom", "left"]) {
+          const value = page.style.getPropertyValue(`margin-${side2}`);
+          if (value) margin[side2] = value;
+        }
+      } else if (isMediaRule(rule)) {
+        if (doc.defaultView?.matchMedia(rule.media.mediaText).matches !== false)
+          visit(rule.cssRules);
+      } else if ("cssRules" in rule) {
+        visit(rule.cssRules);
+      }
+    }
+  };
+  for (const sheet of Array.from(doc.styleSheets)) {
+    try {
+      visit(sheet.cssRules);
+    } catch {
+    }
+  }
+  const [width, height] = pageSize(size);
+  const side = (name) => {
+    const declared = margin[name];
+    const px = declared === void 0 ? void 0 : toPx(declared);
+    return px ?? DEFAULT_PAGE_BOX.margin[name];
+  };
+  return {
+    width,
+    height,
+    margin: { top: side("top"), right: side("right"), bottom: side("bottom"), left: side("left") }
+  };
+}
+function pageSize(value) {
+  const words = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  const landscape = words.includes("landscape");
+  const named = words.find((word) => word in PAPER);
+  const lengths = words.map(toPx).filter((px) => px !== void 0);
+  let width = DEFAULT_PAGE_BOX.width;
+  let height = DEFAULT_PAGE_BOX.height;
+  if (named) {
+    [width, height] = PAPER[named].map((mm) => mm * PX_PER_MM);
+  } else if (lengths.length === 2) {
+    [width, height] = lengths;
+  } else if (lengths.length === 1) {
+    width = height = lengths[0];
+  }
+  if (landscape && width < height) [width, height] = [height, width];
+  return [width, height];
+}
+var UNIT_PX = {
+  px: 1,
+  in: 96,
+  cm: 10 * PX_PER_MM,
+  mm: PX_PER_MM,
+  q: PX_PER_MM / 4,
+  pt: 96 / 72,
+  pc: 16
+};
+function toPx(value) {
+  const match = /^(-?\d*\.?\d+)([a-z]*)$/i.exec(value.trim());
+  if (!match) return void 0;
+  const amount = Number(match[1]);
+  const unit = (match[2] || "px").toLowerCase();
+  if (amount === 0) return 0;
+  const factor = UNIT_PX[unit];
+  return factor === void 0 ? void 0 : amount * factor;
+}
+
+// src/react/html-pdf.ts
+var SETTLE_TIMEOUT_MS = 1e4;
+var PT_PER_PX = 72 / 96;
+async function renderHtmlPdf(content, {
+  imgSrc = DEFAULT_IMG_SRC,
+  fontSrc,
+  fontFamily = "system-ui, sans-serif",
+  title,
+  scale = 3,
+  quality = 0.92
+} = {}) {
+  const libraries = Promise.all([import('modern-screenshot'), import('jspdf')]);
+  const copy = await openCopy(content, {
+    imgSrc,
+    fontSrc: fontSrc ?? imgSrc,
+    fontFamily
+  });
+  try {
+    const { doc } = copy;
+    promotePrintRules(doc);
+    const page = readPageBox(doc);
+    const area = {
+      width: page.width - page.margin.left - page.margin.right,
+      height: page.height - page.margin.top - page.margin.bottom
+    };
+    copy.frame.style.width = `${area.width}px`;
+    copy.frame.style.height = `${area.height}px`;
+    await nextFrame();
+    await settle(doc);
+    const { layout, fixed } = measureFlow(doc);
+    const slices = paginate(layout, area.height);
+    const [{ domToForeignObjectSvg }, { jsPDF }] = await libraries;
+    const root = doc.documentElement;
+    const notOurs = (node) => node.nodeType !== 1 || !node.id.startsWith("__SANDBOX__");
+    const flow = await domToForeignObjectSvg(root, {
+      width: area.width,
+      height: layout.height,
+      filter: (node) => notOurs(node) && !isFixed(node)
+    });
+    const overlay = fixed.length > 0 ? await paintFixed(doc, fixed, area, domToForeignObjectSvg, notOurs) : void 0;
+    const landscape = page.width > page.height;
+    const pdf = new jsPDF({
+      unit: "pt",
+      format: [page.width * PT_PER_PX, page.height * PT_PER_PX],
+      orientation: landscape ? "landscape" : "portrait",
+      compress: true
+    });
+    if (title) pdf.setProperties({ title });
+    for (const [index, slice] of slices.entries()) {
+      const jpeg = await paintPage(slice, page, area, scale, quality, flow, overlay);
+      if (index > 0)
+        pdf.addPage(
+          [page.width * PT_PER_PX, page.height * PT_PER_PX],
+          landscape ? "landscape" : "portrait"
+        );
+      pdf.addImage(
+        jpeg,
+        "JPEG",
+        0,
+        0,
+        page.width * PT_PER_PX,
+        page.height * PT_PER_PX,
+        void 0,
+        "NONE"
+      );
+    }
+    return { blob: pdf.output("blob"), pageCount: slices.length, page };
+  } finally {
+    copy.frame.remove();
+  }
+}
+function isFixed(node) {
+  return node.nodeType === 1 && node.hasAttribute(FIXED_ATTRIBUTE);
+}
+async function paintFixed(doc, fixed, area, toSvg, notOurs) {
+  const root = doc.documentElement;
+  const keep = /* @__PURE__ */ new Set();
+  for (const el of fixed) {
+    for (let node = el; node; node = node.parentNode) keep.add(node);
+  }
+  const pins = new Map(fixed.map((el, i) => [String(i), el.getBoundingClientRect()]));
+  fixed.forEach((el, i) => el.setAttribute(FIXED_ATTRIBUTE, String(i)));
+  const previous = root.style.getPropertyValue("visibility");
+  root.style.setProperty("visibility", "hidden", "important");
+  fixed.forEach((el) => el.style.setProperty("visibility", "visible", "important"));
+  try {
+    return await toSvg(root, {
+      width: area.width,
+      height: area.height,
+      filter: (node) => notOurs(node) && (keep.has(node) || insideFixed(node, fixed)),
+      onCloneNode: (clone) => {
+        const cloned = clone;
+        cloned.style.setProperty("position", "relative");
+        for (const el of Array.from(cloned.querySelectorAll(`[${FIXED_ATTRIBUTE}]`))) {
+          const pin = pins.get(el.getAttribute(FIXED_ATTRIBUTE) ?? "");
+          if (!pin) continue;
+          Object.assign(el.style, {
+            position: "absolute",
+            top: `${pin.top}px`,
+            left: `${pin.left}px`,
+            width: `${pin.width}px`,
+            height: `${pin.height}px`,
+            right: "auto",
+            bottom: "auto",
+            margin: "0"
+          });
+        }
+      }
+    });
+  } finally {
+    if (previous) root.style.setProperty("visibility", previous);
+    else root.style.removeProperty("visibility");
+    fixed.forEach((el) => el.style.removeProperty("visibility"));
+  }
+}
+function insideFixed(node, fixed) {
+  return fixed.some((el) => el.contains(node));
+}
+async function paintPage(slice, page, area, scale, quality, flow, overlay) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.round(page.width * scale);
+  canvas.height = Math.round(page.height * scale);
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("No 2D canvas to paint the PDF page on");
+  context.fillStyle = "#fff";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  let y = page.margin.top;
+  for (const span of [...slice.heads, slice.body, ...slice.feet]) {
+    const height = span.bottom - span.top;
+    if (height <= 0) continue;
+    const image = await svgImage(flow, { top: span.top, width: area.width, height }, scale);
+    context.drawImage(
+      image,
+      page.margin.left * scale,
+      y * scale,
+      area.width * scale,
+      height * scale
+    );
+    y += height;
+  }
+  if (overlay) {
+    const image = await svgImage(overlay, { top: 0, ...area }, scale);
+    context.drawImage(
+      image,
+      page.margin.left * scale,
+      page.margin.top * scale,
+      area.width * scale,
+      area.height * scale
+    );
+  }
+  const blob = await new Promise(
+    (resolve) => canvas.toBlob(resolve, "image/jpeg", quality)
+  );
+  if (!blob) throw new Error("The PDF page could not be encoded");
+  return new Uint8Array(await blob.arrayBuffer());
+}
+async function svgImage(svg, { top, width, height }, scale) {
+  const copy = svg.cloneNode(false);
+  copy.setAttribute("viewBox", `0 ${top} ${width} ${height}`);
+  copy.setAttribute("width", String(Math.max(1, Math.round(width * scale))));
+  copy.setAttribute("height", String(Math.max(1, Math.round(height * scale))));
+  copy.setAttribute("preserveAspectRatio", "none");
+  for (const child of Array.from(svg.childNodes)) copy.appendChild(child.cloneNode(true));
+  const object = Array.from(copy.children).find((child) => child.localName === "foreignObject");
+  object?.setAttribute("width", svg.getAttribute("width") ?? String(width));
+  object?.setAttribute("height", svg.getAttribute("height") ?? String(top + height));
+  const markup = new XMLSerializer().serializeToString(copy).replace(/[\u0000-\u0008\v\f\u000E-\u001F￾￿]/g, "");
+  const image = new Image();
+  image.decoding = "sync";
+  image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+  await image.decode();
+  return image;
+}
+async function openCopy(content, { imgSrc, fontSrc, fontFamily }) {
+  const frame = document.createElement("iframe");
+  frame.setAttribute("sandbox", "allow-same-origin");
+  frame.setAttribute("aria-hidden", "true");
+  frame.setAttribute("data-mthds-pdf-copy", "");
+  frame.tabIndex = -1;
+  frame.title = "PDF";
+  Object.assign(frame.style, {
+    position: "fixed",
+    left: "-10000px",
+    top: "0",
+    width: "794px",
+    height: "1123px",
+    border: "0",
+    opacity: "0",
+    pointerEvents: "none"
+  });
+  frame.srcdoc = frameDocument(content, {
+    styles: frameStyles(pageTypography(fontFamily)),
+    imgSrc,
+    fontSrc
+  });
+  const loaded = new Promise(
+    (resolve) => frame.addEventListener("load", () => resolve(), { once: true })
+  );
+  document.body.append(frame);
+  try {
+    await loaded;
+    const doc = frame.contentDocument;
+    if (!doc?.defaultView) throw new Error("The PDF copy could not be opened");
+    await settle(doc);
+    return { frame, doc };
+  } catch (error) {
+    frame.remove();
+    throw error;
+  }
+}
+async function settle(doc) {
+  const images = Array.from(doc.images, (image) => {
+    image.loading = "eager";
+    if (image.complete) return Promise.resolve();
+    return new Promise((resolve) => {
+      image.addEventListener("load", () => resolve(), { once: true });
+      image.addEventListener("error", () => resolve(), { once: true });
+    });
+  });
+  const fonts = doc.fonts ? [
+    ...Array.from(doc.fonts, (face) => face.load().then(noop, noop)),
+    doc.fonts.ready.then(noop, noop)
+  ] : [];
+  let timer;
+  await Promise.race([
+    Promise.all([...images, ...fonts]),
+    new Promise((resolve) => {
+      timer = setTimeout(resolve, SETTLE_TIMEOUT_MS);
+    })
+  ]);
+  clearTimeout(timer);
+}
+function nextFrame() {
+  return new Promise((resolve) => {
+    const timer = setTimeout(resolve, 100);
+    requestAnimationFrame(() => {
+      clearTimeout(timer);
+      resolve();
+    });
+  });
+}
+function noop() {
+}
+function PdfDownloadButton({
+  content,
+  fileName,
+  path = "page",
+  imgSrc,
+  fontSrc,
+  primary = false,
+  className
+}) {
+  const s = useFieldStrings();
+  const save = useSaveFiles();
+  const resolvers = useMarkupResolvers();
+  const ref = useRef(null);
+  const statusId = useId();
+  const [state, setState] = useState("idle");
+  const failed = state === "failed";
+  const { ask, dialog } = useFileNamePrompt();
+  const name = `${pdfStem(fileName) || "page"}.pdf`;
+  const download = async () => {
+    const chosen = await ask(pdfStem(fileName) || "page", ".pdf");
+    if (chosen === null) return;
+    const title = chosen === name ? pdfStem(fileName) : pdfStem(chosen);
+    setState("busy");
+    try {
+      const fontFamily = ref.current ? getComputedStyle(ref.current).fontFamily : void 0;
+      const innerHtml = await resolveHtmlStorageUrls(content.innerHtml, resolvers);
+      const page = innerHtml === content.innerHtml ? content : { ...content, innerHtml };
+      const { blob } = await renderHtmlPdf(page, {
+        ...title ? { title } : {},
+        ...imgSrc === void 0 ? {} : { imgSrc },
+        ...fontSrc === void 0 ? {} : { fontSrc },
+        ...fontFamily ? { fontFamily } : {}
+      });
+      const { failed: missed } = await save([
+        {
+          name: chosen,
+          mimeType: "application/pdf",
+          kind: "markup",
+          path,
+          url: await dataUrl(blob)
+        }
+      ]);
+      setState(missed.length > 0 ? "failed" : "idle");
+    } catch {
+      setState("failed");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-pdf-download": true,
+        onClick: () => void download(),
+        disabled: state === "busy",
+        "aria-busy": state === "busy",
+        title: failed ? s.downloadPdfFailed : name,
+        ...failed ? { "aria-describedby": statusId } : {},
+        className: cn(
+          "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[12px] font-medium focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-70",
+          primary ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border border-border text-muted-foreground hover:text-foreground",
+          failed && (primary ? "bg-destructive text-white hover:bg-destructive/90" : "text-destructive"),
+          className
+        ),
+        children: [
+          state === "busy" ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-3.5 animate-spin" }) : failed ? /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(FileDown, { "aria-hidden": true, className: "size-3.5" }),
+          state === "busy" ? s.downloadPdfBusy : s.downloadPdf
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { id: statusId, role: "status", className: "sr-only", children: failed ? s.downloadPdfFailed : "" }),
+    dialog
+  ] });
+}
+function pdfStem(name) {
+  return (name ?? "").trim().replace(/\.pdf$/i, "").trim();
+}
+function dataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(reader.error ?? new Error("The PDF could not be read"));
+    reader.readAsDataURL(blob);
+  });
 }
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var FRAGMENT_MAX_HEIGHT = 1400;
+var FILL_MIN_HEIGHT = 320;
 function HtmlPreview({
   content,
-  maxHeight = 1400,
-  imgSrc = DEFAULT_IMG_SRC
+  maxHeight,
+  imgSrc = DEFAULT_IMG_SRC,
+  fontSrc,
+  downloadPdf,
+  pdfFileName: pdfFileName2,
+  bare = false,
+  fill = false
 }) {
   const hostRef = useRef(null);
   const frameRef = useRef(null);
+  const s = useFieldStrings();
   const [doc, setDoc] = useState(null);
   const [height, setHeight] = useState(0);
+  const resolvedHtml = useResolvedMarkup(content.innerHtml);
+  const resolved = useMemo(
+    () => resolvedHtml === void 0 ? void 0 : resolvedHtml === content.innerHtml ? content : { ...content, innerHtml: resolvedHtml },
+    [content, resolvedHtml]
+  );
+  const page = isWholeDocument(content.innerHtml);
+  const pdfSetting = usePdfSaveShown();
+  const pdfShown = downloadPdf ?? pdfSetting;
+  const limit = maxHeight ?? (page ? void 0 : FRAGMENT_MAX_HEIGHT);
+  const filling = page && fill;
   useIsomorphicLayoutEffect(() => {
     const host = hostRef.current;
-    if (!host) return;
+    if (!host || !resolved) return;
     const computed = getComputedStyle(host);
+    const typography = page ? pageTypography(computed.fontFamily) : {
+      color: computed.color,
+      mutedColor: computed.getPropertyValue("--muted-foreground").trim() || computed.color,
+      borderColor: computed.borderColor || computed.color,
+      font: computed.fontFamily
+    };
     setDoc(
-      frameDocument(
-        content,
-        frameStyles(
-          computed.color,
-          computed.getPropertyValue("--muted-foreground").trim() || computed.color,
-          computed.borderColor || computed.color,
-          computed.fontFamily
-        ),
-        imgSrc
-      )
+      frameDocument(resolved, {
+        styles: frameStyles(typography),
+        imgSrc,
+        fontSrc: fontSrc ?? imgSrc
+      })
     );
-  }, [content, imgSrc]);
+  }, [resolved, imgSrc, fontSrc, page]);
   const measure = () => {
-    const body = frameRef.current?.contentDocument?.body;
-    if (body) setHeight(body.scrollHeight);
+    const frameDoc = frameRef.current?.contentDocument;
+    const body = frameDoc?.body;
+    if (!frameDoc || !body) return;
+    setHeight(Math.max(body.scrollHeight, frameDoc.documentElement.scrollHeight));
+  };
+  const onLoad = () => {
+    measure();
+    void frameRef.current?.contentDocument?.fonts?.ready.then(measure, () => void 0);
   };
   useEffect(() => {
     if (!doc || !hostRef.current || typeof ResizeObserver === "undefined") return;
@@ -1850,30 +3152,110 @@ function HtmlPreview({
     observer.observe(hostRef.current);
     return () => observer.disconnect();
   }, [doc]);
-  return /* @__PURE__ */ jsx(
+  const frameBox = /* @__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(
+      ...page ? { "data-html-page": "" } : {},
+      className: cn(
+        page ? bare ? "overflow-hidden bg-white text-[13px] text-black" : "overflow-hidden rounded-lg border border-border bg-white text-[13px] text-black" : "overflow-hidden rounded-lg border border-border bg-card/40 px-3.5 py-3 text-[13px] text-foreground",
+        // A flex column that may shrink, so the frame inside can.
+        filling && "flex min-h-0 flex-col"
+      ),
+      children: resolved === void 0 ? (
+        // The page's stored pictures are being resolved: a short wait, said
+        // as such, rather than a page painted with broken images first.
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "status",
+            "data-html-resolving": true,
+            className: "flex min-h-24 items-center justify-center gap-2 text-[12px] text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin" }),
+              /* @__PURE__ */ jsx("span", { children: s.pageLoading })
+            ]
+          }
+        )
+      ) : doc === null ? null : /* @__PURE__ */ jsx(
         "iframe",
         {
           ref: frameRef,
           title: content.cssClass ? `HTML result (${content.cssClass})` : "HTML result",
           srcDoc: doc,
-          onLoad: measure,
+          onLoad,
           sandbox: "allow-same-origin",
           style: {
             display: "block",
             width: "100%",
             border: 0,
-            height: height === 0 ? void 0 : Math.min(height, maxHeight),
-            maxHeight
+            height: height === 0 ? void 0 : limit === void 0 ? height : Math.min(height, limit),
+            ...limit === void 0 ? {} : { maxHeight: limit },
+            // Its height is the page's, as a flex basis: in a bounded flex
+            // column it shrinks to what is left (never below the floor) and the
+            // page scrolls inside the frame; anywhere else it is the page's.
+            // `minHeight` is explicit because a replaced element's automatic
+            // minimum is its own height, which would forbid the shrink.
+            ...filling && height > 0 ? { flex: "0 1 auto", minHeight: Math.min(height, FILL_MIN_HEIGHT) } : {}
           }
         }
       )
     }
   );
+  if (!pdfShown) return frameBox;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      PdfDownloadButton,
+      {
+        content,
+        imgSrc,
+        ...fontSrc === void 0 ? {} : { fontSrc },
+        ...pdfFileName2 === void 0 ? {} : { fileName: pdfFileName2 }
+      }
+    ) }),
+    frameBox
+  ] });
+}
+function useResolvedMarkup(markup) {
+  const resolvers = useMarkupResolvers();
+  const needed = (resolvers.resolveUrl !== void 0 || resolvers.resolveUrls !== void 0) && mayHoldStorageRefs(markup);
+  const [shown, setShown] = useState(null);
+  useEffect(() => {
+    if (!needed) return;
+    let live = true;
+    const show = (bulk) => {
+      if (!live) return;
+      let html = markup;
+      try {
+        html = rewriteStorageRefs(markup, answerFor(bulk, resolvers.resolveUrl));
+      } catch {
+      }
+      setShown({ source: markup, html });
+    };
+    let refs = [];
+    try {
+      refs = storageRefsIn(markup);
+    } catch {
+      refs = [];
+    }
+    if (refs.length === 0 || !resolvers.resolveUrls) {
+      show();
+      return () => {
+        live = false;
+      };
+    }
+    const timer = setTimeout(() => show(), MARKUP_RESOLVE_TIMEOUT_MS);
+    void askBulkUntimed(resolvers.resolveUrls, refs).then((bulk) => {
+      clearTimeout(timer);
+      show(bulk);
+    });
+    return () => {
+      live = false;
+      clearTimeout(timer);
+    };
+  }, [needed, markup, resolvers]);
+  if (!needed) return markup;
+  return shown?.source === markup ? shown.html : void 0;
 }
 var LEX_OPTIONS = { gfm: true, breaks: true };
 function Markdown({ text, className, proseImages }) {
@@ -2325,6 +3707,7 @@ function FileDownloadButton({ file }) {
   const resolve = useResolveUrl();
   const save = useSaveFiles();
   const shown = useFileDownloadShown(file.kind);
+  const { ask, dialog } = useFileNamePrompt();
   const statusId = useId();
   const [attempt, setAttempt] = useState(null);
   useEffect(() => {
@@ -2351,13 +3734,15 @@ ${planned.url ?? planned.text}`;
       "button",
       {
         type: "button",
-        onClick: () => {
+        onClick: async () => {
+          const { stem: stem2, extension } = splitFileName(planned.name);
+          const name = await ask(stem2, extension);
+          if (name === null) return;
           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);
-          });
+          const result = await save([name === planned.name ? planned : { ...planned, name }]);
+          const settled = result.failed.length > 0 ? "failed" : "saved";
+          setAttempt((current) => current === started ? { identity, state: settled } : current);
         },
         disabled: state === "saving",
         "aria-label": label,
@@ -2370,7 +3755,8 @@ ${planned.url ?? planned.text}`;
         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 : "" })
+    /* @__PURE__ */ jsx("span", { id: statusId, role: "status", className: "sr-only", children: failed ? s.downloadFileFailed : "" }),
+    dialog
   ] });
 }
 function paintable(content, resolve) {
@@ -2807,7 +4193,7 @@ function CompositeValue({ members }) {
 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 });
+  if (html) return /* @__PURE__ */ jsx(HtmlPreview, { content: html, downloadPdf: false });
   const date = readDateContent(value);
   if (date) return /* @__PURE__ */ jsx("span", { className: "text-[13px] text-foreground", children: formatDateContent(date) });
   const document2 = readDocumentContent(value);
@@ -2887,6 +4273,7 @@ function ResultNode({ field, value, depth = 0, hideLabel = false }) {
   const s = useFieldStrings();
   const unwrapped = unwrap(field, value);
   const pageDownloadShown = useFileDownloadShown("markup");
+  const pdfShown = usePdfSaveShown();
   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;
@@ -2898,13 +4285,24 @@ function ResultNode({ 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;
+    const pagePath = location?.path.join(".");
+    const pageFile = pagePath === void 0 ? void 0 : readStuffFile("markup", unwrapped, pagePath);
+    const page = pageDownloadShown ? pageFile : void 0;
+    const pdfName = pdfShown && content && pageFile && location ? stem(planFileSave(pageFile, { baseName: location.baseName })?.name) : void 0;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      page ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      page || pdfName !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
         /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+        content && pdfName !== void 0 ? /* @__PURE__ */ jsx(
+          PdfDownloadButton,
+          {
+            content,
+            ...pagePath === void 0 ? {} : { path: pagePath },
+            ...pdfName ? { fileName: pdfName } : {}
+          }
+        ) : null,
         /* @__PURE__ */ jsx(FileActions, { file: page })
       ] }) : header,
-      content ? /* @__PURE__ */ jsx(HtmlPreview, { content }) : /* @__PURE__ */ jsx(Absent, {})
+      content ? /* @__PURE__ */ jsx(HtmlPreview, { content, downloadPdf: false }) : /* @__PURE__ */ jsx(Absent, {})
     ] });
   }
   if (isNativeCompositeNode(field)) {
@@ -3035,6 +4433,11 @@ function ResultNode({ field, value, depth = 0, hideLabel = false }) {
   }
   return null;
 }
+function stem(name) {
+  return name === void 0 ? "" : name.replace(/\.[^.]+$/, "");
+}
+var ALL_VIEWS = ["rendered", "json"];
+var RESULT_ONLY = ["rendered"];
 var JSON_TOKEN_RE = /("(?:\\.|[^"\\])*"\s*:)|("(?:\\.|[^"\\])*")|(\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g;
 function highlight(json) {
   const out = [];
@@ -3117,14 +4520,18 @@ function StuffPanel({
   field,
   value,
   name,
+  views: viewsProp,
   defaultView = "rendered",
   downloadBaseName,
   className
 }) {
   const s = useFieldStrings();
+  const presentation = useFieldPresentation();
+  const offered = viewsProp && viewsProp.length > 0 ? viewsProp : viewsProp || presentation === "app" ? RESULT_ONLY : ALL_VIEWS;
   const named = name ? { ...field, name } : field;
   const baseName = downloadBaseName ?? named.name ?? "result";
-  const [view, setView] = useState(defaultView);
+  const [chosen, setView] = useState(defaultView);
+  const view = offered.includes(chosen) ? chosen : offered[0] ?? "rendered";
   const [saving, setSaving] = useState(null);
   const [missed, setMissed] = useState(null);
   const latest = useRef(null);
@@ -3132,8 +4539,28 @@ function StuffPanel({
   const missedShown = missed && isShownResult(missed.attempt, field, baseName, value) ? missed.names : [];
   const resolveUrl = useResolveUrl();
   const save = useSaveFiles();
-  const downloadShown = useResultDownloadShown();
+  const resultDownloadShown = useResultDownloadShown();
+  const pageDownloadShown = useFileDownloadShown("markup");
+  const pdfShown = usePdfSaveShown();
+  const { ask, dialog } = useFileNamePrompt();
+  const page = isNativeHtmlNode(field) ? readHtmlContent(value) : void 0;
+  const downloadShown = resultDownloadShown || page !== void 0 && pageDownloadShown;
   const handleDownload = useCallback(async () => {
+    const options = resolveUrl ? { resolveUrl } : {};
+    let plan = planStuffSave(field, value, { baseName, ...options });
+    const only = plan.files.length === 1 ? plan.files[0] : void 0;
+    const json = plan.files.length > 1 ? plan.files[plan.files.length - 1] : void 0;
+    if (only) {
+      const { stem: stem2, extension } = splitFileName(only.name);
+      const name2 = await ask(stem2, extension);
+      if (name2 === null) return;
+      if (name2 !== only.name) plan = { ...plan, files: [{ ...only, name: name2 }] };
+    } else if (json) {
+      const { stem: stem2 } = splitFileName(json.name);
+      const name2 = await ask(stem2, "");
+      if (name2 === null) return;
+      if (name2 !== stem2) plan = planStuffSave(field, value, { baseName: name2, ...options });
+    }
     const attempt = {
       field,
       baseName,
@@ -3144,10 +4571,6 @@ function StuffPanel({
     setSaving(attempt);
     setMissed(null);
     try {
-      const plan = planStuffSave(field, value, {
-        baseName,
-        ...resolveUrl ? { resolveUrl } : {}
-      });
       const { failed } = await save(plan.files);
       if (latest.current !== attempt) return;
       setMissed({
@@ -3160,65 +4583,102 @@ function StuffPanel({
     } finally {
       setSaving((current) => current === attempt ? null : current);
     }
-  }, [field, value, baseName, resolveUrl, save]);
-  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: [
-        downloadShown && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => void handleDownload(),
-            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: [
-              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
-            ]
-          }
-        ),
-        /* @__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(
+  }, [field, value, baseName, resolveUrl, save, ask]);
+  const labels = { rendered: s.viewRendered, json: s.viewJson };
+  const pdfName = page && pdfShown ? pdfFileName(field, value, baseName) : void 0;
+  const pageView = page !== void 0 && view !== "json";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // A page shown as the view is a flex column that may shrink: in a host
+        // whose scrolling panel is a flex column (`flex min-h-0 flex-col
+        // overflow-y-auto`), the page's frame takes the panel's remaining
+        // height and scrolls inside itself, so there is one scroll container
+        // under the pointer and the first wheel scrolls the page. Anywhere
+        // else the column is as tall as its content and nothing changes.
+        pageView ? "flex min-h-0 flex-col gap-2" : "space-y-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center justify-between gap-x-4 gap-y-1", children: [
+          page && presentation === "app" ? /* @__PURE__ */ jsx("div", {}) : /* @__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: [
+            page && pdfName !== void 0 && /* @__PURE__ */ jsx(
+              PdfDownloadButton,
+              {
+                content: page,
+                path: field.name,
+                primary: true,
+                ...pdfName ? { fileName: pdfName } : {}
+              }
+            ),
+            downloadShown && /* @__PURE__ */ jsxs(
               "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
-            ))
+                onClick: () => void handleDownload(),
+                disabled: savingShown,
+                "aria-label": page ? s.downloadHtml : 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: [
+                  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 : page ? s.downloadHtml : s.download
+                ]
+              }
+            ),
+            dialog,
+            offered.length > 1 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "group",
+                "aria-label": s.resultViewGroup,
+                className: "flex rounded-md border border-border p-0.5",
+                children: offered.map((id) => /* @__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: labels[id]
+                  },
+                  id
+                ))
+              }
+            )
+          ] })
+        ] }),
+        downloadShown && /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "status",
+            className: cn(
+              "shrink-0 text-[12px] text-destructive",
+              missedShown.length === 0 && "sr-only"
+            ),
+            children: missedShown.length > 0 ? s.downloadIncomplete(missedShown) : ""
           }
-        )
-      ] })
-    ] }),
-    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 }) })
-  ] });
+        ),
+        view === "json" ? /* @__PURE__ */ jsx(JsonView, { value }) : page ? (
+          // The page is the panel's main view: drawn here rather than through
+          // `ResultField`, whose page arm would add a second control row saving
+          // the same file, and with no box around it.
+          /* @__PURE__ */ jsx(HtmlPreview, { content: page, downloadPdf: false, bare: true, fill: true })
+        ) : /* @__PURE__ */ jsx(ResultRoot, { baseName, path: [field.name], children: /* @__PURE__ */ jsx(ResultField, { field, value, hideLabel: true }) })
+      ]
+    }
+  );
+}
+function pdfFileName(field, value, baseName) {
+  const file = readStuffFile("markup", value, field.name);
+  const name = file ? planFileSave(file, { baseName })?.name : void 0;
+  return name === void 0 ? "" : name.replace(/\.[^.]+$/, "");
 }
 
-export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, HtmlPreview, ImageField, JsonView, ListField, Markdown, NumberField, ObjectField, OptionalToggle, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, cn, fieldControlClass, fieldStringsFor, humanizeFieldName, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-D2EQVWGN.js.map
-//# sourceMappingURL=chunk-D2EQVWGN.js.map
+export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, cn, fieldControlClass, fieldStringsFor, humanizeFieldName, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
+//# sourceMappingURL=chunk-7JRT6ZII.js.map
+//# sourceMappingURL=chunk-7JRT6ZII.js.map