@panphora/clayjs 1.17.0 → 1.18.1

package/src/page/export-assets.js

@@ -0,0 +1,357 @@
+// The readable snapshot's inventory, made self-contained: every displayed image and
+// included attachment the snapshot names is read once, within limits, and written
+// into the document as a data URL, so the file that comes out needs nothing fetched
+// again. What cannot be carried is named in a loss list rather than dropped in
+// silence: a cross-origin read the other origin refuses, a host that is not
+// reachable, a missing file, a type a reading copy does not carry, a resource over
+// its limit, an embed with no static rendering. Addresses are canonical before the
+// duplicate check, so one picture named twice is one request.
+/** The limits one export reads under: per resource, in total, and how long each waits. */
+export const EXPORT_LIMITS = Object.freeze({
+  perResource: 20 * 1024 * 1024,
+  total: 50 * 1024 * 1024,
+  timeout: 10_000,
+  inFlight: 3,
+});
+
+// What a reading copy carries inside itself: images, fonts and media, never anything
+// a browser would treat as a document, a script or a style. An active type such as
+// SVG or HTML is refused by name rather than inlined.
+const ALLOWED_MIME = [
+  /^image\/(?:png|jpe?g|gif|webp|avif|bmp|x-icon|vnd\.microsoft\.icon)$/i,
+  /^font\/(?:woff2?|ttf|otf|sfnt|collection|eot)$/i,
+  /^application\/(?:font-woff2?|vnd\.ms-fontobject|x-font-ttf|x-font-opentype|vnd\.ms-opentype)$/i,
+  /^audio\/[a-z0-9][a-z0-9.+-]*$/i,
+  /^video\/[a-z0-9][a-z0-9.+-]*$/i,
+];
+
+// What no attachment may carry: anything a browser would run or render as a document.
+const ACTIVE_MIME = /^(?:text\/(?:html|javascript|css|xml|xsl)|application\/(?:xhtml\+xml|xml|javascript|ecmascript|x-javascript|wasm)|image\/svg\+xml)$|\+xml$/i;
+
+/**
+ * Whether a response's declared type is one a reading copy carries inside itself. An image
+ * is drawn, so only the drawn types; an attachment is a link to a file, so any type that is
+ * not active.
+ */
+export function isAllowedMime(type, kind = "image") {
+  const base = String(type ?? "").split(";")[0].trim();
+  if (base === "") return false;
+  if (kind === "attachment") return !ACTIVE_MIME.test(base);
+  return ALLOWED_MIME.some((pattern) => pattern.test(base));
+}
+
+/**
+ * One address, as the duplicate check and the request both see it: resolved against
+ * the captured base URL, with the fragment gone. A value that names nothing, or that
+ * is not an address at all, answers null.
+ */
+export function canonicalUrl(raw, base = globalThis.document?.baseURI ?? null) {
+  const text = String(raw ?? "").trim();
+  if (!text || text.startsWith("#")) return null;
+  try {
+    const url = new URL(text, base ?? undefined);
+    url.hash = "";
+    return url.href;
+  } catch {
+    return null;
+  }
+}
+
+const squash = (value) => String(value ?? "").trim().replace(/[\u0000-\u0020]/g, "");
+const isLocalHost = (hostname) => /^(?:localhost|127(?:\.\d{1,3}){3}|0\.0\.0\.0|\[::1\]|::1)$/i.test(hostname || "") || /\.local$/i.test(hostname || "");
+const originOf = (href) => { try { return new URL(href).origin; } catch { return null; } };
+const hostOf = (href) => { try { return new URL(href).hostname; } catch { return null; } };
+const mb = (bytes) => (bytes >= 1024 * 1024 ? `${Math.round(bytes / (1024 * 1024))} MiB` : bytes >= 1024 ? `${Math.round(bytes / 1024)} KiB` : `${Math.round(bytes)} B`);
+
+const subject = (target) => (target.blockId ? `The ${target.kind} in block ${target.blockId}` : `The ${target.kind}`);
+const loss = (code, target, message) => ({ code, kind: target.kind ?? null, url: target.url ?? null, blockId: target.blockId ?? null, message });
+
+function embedLoss(entry, url) {
+  const blockId = entry.blockId ?? null;
+  const where = blockId ? ` in block ${blockId}` : "";
+  return {
+    code: "unsupported-embed",
+    kind: "embed",
+    url: entry.url ?? null,
+    blockId,
+    message: `The embed${where} is a live frame, which a reading copy cannot carry${url ? ` (${url})` : ""}`,
+  };
+}
+
+function urlLoss(entry) {
+  const blockId = entry.blockId ?? null;
+  const where = blockId ? ` in block ${blockId}` : "";
+  return {
+    code: "unsupported-url",
+    kind: entry.kind ?? null,
+    url: entry.url ?? null,
+    blockId,
+    message: `The ${entry.kind}${where} points at ${String(entry.url ?? "").trim().slice(0, 120)}, which is not an address a reading copy can fetch`,
+  };
+}
+
+const bytesOf = (value) => {
+  if (!value) return new Uint8Array(0);
+  if (value instanceof Uint8Array) return value;
+  if (value instanceof ArrayBuffer) return new Uint8Array(value);
+  if (ArrayBuffer.isView(value)) return new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
+  return new Uint8Array(value);
+};
+
+function toBase64(bytes) {
+  let binary = "";
+  for (let at = 0; at < bytes.length; at += 0x8000) binary += String.fromCharCode(...bytes.subarray(at, at + 0x8000));
+  return globalThis.btoa(binary);
+}
+
+const dataUrlOf = (type, bytes) => `data:${String(type).split(";")[0].trim()};base64,${toBase64(bytes)}`;
+
+// The body as bytes, never as a whole file at once: each chunk is counted against
+// both limits, so an oversized resource, or one that would push the file past its
+// total, stops at the chunk that crossed the line instead of after the download.
+async function readBytes(response, task, limits, budget) {
+  const declared = Number(response.headers?.get?.("content-length"));
+  if (Number.isFinite(declared) && declared > limits.perResource) {
+    throw loss("too-large", task.target, `${subject(task.target)} at ${task.target.url} is larger than ${mb(limits.perResource)}`);
+  }
+  const charge = () => {
+    if (task.bytes > limits.perResource) throw loss("too-large", task.target, `${subject(task.target)} at ${task.target.url} is larger than ${mb(limits.perResource)}`);
+    if (budget.exhausted || budget.spent + budget.live > budget.total) {
+      budget.exhausted = true;
+      throw loss("total-too-large", task.target, `The page's resources together are larger than ${mb(budget.total)}`);
+    }
+  };
+  const reader = response.body?.getReader?.();
+  if (!reader) {
+    const whole = bytesOf(typeof response.arrayBuffer === "function" ? await response.arrayBuffer() : response.body);
+    task.bytes += whole.byteLength;
+    budget.live += whole.byteLength;
+    try {
+      charge();
+    } finally {
+      budget.live -= whole.byteLength;
+      if (task.bytes <= limits.perResource) budget.spent += whole.byteLength;
+    }
+    return whole;
+  }
+  const chunks = [];
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      const part = bytesOf(value);
+      task.bytes += part.byteLength;
+      budget.live += part.byteLength;
+      charge();
+      chunks.push(part);
+    }
+  } catch (error) {
+    budget.live -= task.bytes;
+    task.bytes = 0;
+    try { await reader.cancel?.(); } catch {}
+    throw error;
+  }
+  budget.live -= task.bytes;
+  budget.spent += task.bytes;
+  const out = new Uint8Array(task.bytes);
+  let at = 0;
+  for (const part of chunks) { out.set(part, at); at += part.byteLength; }
+  return out;
+}
+
+// One resource: one request with the credentials its origin is owed, one timeout, one
+// cancellation, and one named loss if it cannot be carried. Nothing here throws past
+// the loss: an export reports every failure it found rather than the first.
+async function fetchOne(task, { fetchImpl, baseOrigin, baseHost, limits, budget, run }) {
+  const { target, controller } = task;
+  if (run.signal.aborted) return { target, loss: loss("cancelled", target, `Reading ${target.url} was cancelled`) };
+  const onCancel = () => controller.abort();
+  if (run.signal.aborted) controller.abort();
+  else run.signal.addEventListener("abort", onCancel, { once: true });
+  const timer = setTimeout(() => { task.timedOut = true; controller.abort(); }, limits.timeout);
+  const sameOrigin = baseOrigin != null && originOf(target.url) === baseOrigin;
+  try {
+    const response = await fetchImpl(target.url, {
+      credentials: sameOrigin ? "include" : "omit",
+      signal: controller.signal,
+    });
+    if (!response || response.ok === false) {
+      const status = response?.status ?? 0;
+      throw loss("missing-resource", target, `${subject(target)} is not at ${target.url} (the host answered ${status || "nothing"})`);
+    }
+    const type = response.headers?.get?.("content-type") ?? "";
+    if (!isAllowedMime(type, target.kind)) {
+      throw loss("mime-refused", target, `${subject(target)} at ${target.url} is ${String(type).split(";")[0].trim() || "of no stated type"}, which a reading copy does not carry`);
+    }
+    const bytes = await readBytes(response, task, limits, budget);
+    return { target, hit: { data: dataUrlOf(type, bytes), type: String(type).split(";")[0].trim(), bytes: bytes.byteLength } };
+  } catch (error) {
+    if (error && typeof error.code === "string" && typeof error.message === "string") return { target, loss: error };
+    if (task.timedOut) return { target, loss: loss("timeout", target, `${subject(target)} at ${target.url} did not arrive within ${Math.round(limits.timeout / 1000)} s`) };
+    if (run.signal.aborted || controller.signal.aborted) return { target, loss: loss("cancelled", target, `Reading ${target.url} was cancelled`) };
+    if (!sameOrigin) return { target, loss: loss("cross-origin-cors", target, `${subject(target)} at ${target.url} could not be read: ${originOf(target.url) ?? "the other origin"} refused a cross-origin read`) };
+    if (isLocalHost(baseHost)) return { target, loss: loss("offline-host", target, `${subject(target)} at ${target.url} could not be read: this copy's host is not reachable`) };
+    return { target, loss: loss("unreachable", target, `${subject(target)} at ${target.url} could not be read`) };
+  } finally {
+    clearTimeout(timer);
+    run.signal.removeEventListener("abort", onCancel);
+  }
+}
+
+async function pool(tasks, inFlight, worker) {
+  const queue = tasks.slice();
+  const run = async () => {
+    for (;;) {
+      const task = queue.shift();
+      if (!task) return;
+      await worker(task);
+    }
+  };
+  await Promise.all(Array.from({ length: Math.max(1, Math.min(inFlight, queue.length)) }, run));
+}
+
+// The document with the fetched bytes inside it and every remote reference gone: a
+// data URL where a picture or an attachment was, and nothing at all where a resource
+// could not be carried. A stylesheet or script element has no place in a reading copy,
+// and a `url()` or `@import` leaves a style declaration alone.
+function rewrite(html, hits, base) {
+  const parsed = new DOMParser().parseFromString(String(html ?? ""), "text/html");
+  for (const el of [...parsed.querySelectorAll("script, link, base, style[media]")]) el.remove();
+  for (const el of [...parsed.querySelectorAll("iframe, embed, object, video, audio, source, track, picture")]) el.remove();
+  for (const el of parsed.querySelectorAll("img")) {
+    const hit = hits.get(canonicalUrl(el.getAttribute("src"), base));
+    if (hit) el.setAttribute("src", hit.data);
+    else el.removeAttribute("src");
+    el.removeAttribute("srcset");
+    el.removeAttribute("poster");
+  }
+  for (const el of parsed.querySelectorAll('[data-type="file"]')) {
+    const hit = hits.get(canonicalUrl(el.getAttribute("data-src"), base)) ?? hits.get(canonicalUrl(el.querySelector("a[href]")?.getAttribute("href"), base));
+    if (hit) {
+      el.setAttribute("data-src", hit.data);
+      const link = el.querySelector("a[href]");
+      if (link) link.setAttribute("href", hit.data);
+    } else {
+      el.removeAttribute("data-src");
+      el.querySelector("a[href]")?.removeAttribute("href");
+    }
+  }
+  for (const el of parsed.querySelectorAll("[style]")) {
+    const kept = String(el.getAttribute("style")).split(";").filter((part) => !/url\s*\(|@import/i.test(part)).join(";").trim();
+    if (kept) el.setAttribute("style", kept);
+    else el.removeAttribute("style");
+  }
+  return `<!DOCTYPE html>\n${parsed.documentElement.outerHTML}`;
+}
+
+const CANDIDATES = [...String("src srcset poster data data-src xlink:href").split(" "), "href"];
+const carriesRemote = (value) => {
+  const s = squash(value);
+  if (!s || s.startsWith("#")) return false;
+  return !/^data:/i.test(s);
+};
+
+/**
+ * Every reference in a document that would make the browser request something the
+ * file does not hold: a source, a source set, a poster, an object's data, a
+ * stylesheet's or a script's address, a `url()` or `@import` in a style. An ordinary
+ * hyperlink is not one, and neither is a data URL or a fragment.
+ */
+export function remoteDependencies(html) {
+  const parsed = new DOMParser().parseFromString(String(html ?? ""), "text/html");
+  const out = [];
+  for (const el of parsed.querySelectorAll("*")) {
+    const tag = el.tagName.toLowerCase();
+    for (const name of CANDIDATES) {
+      if (!el.hasAttribute(name)) continue;
+      if (name === "href" && tag !== "link" && tag !== "script" && tag !== "base") continue;
+      if (name === "data" && tag !== "object") continue;
+      if (name === "data-src" && !el.closest?.('[data-type="file"]')) continue;
+      const value = el.getAttribute(name);
+      const candidates = name === "srcset" ? String(value).split(",").map((part) => part.trim().split(/\s+/)[0]) : [value];
+      for (const candidate of candidates) if (carriesRemote(candidate)) out.push({ tag, attr: name, value: candidate });
+    }
+    const style = el.getAttribute("style");
+    if (style && /url\s*\(|@import/i.test(style)) out.push({ tag, attr: "style", value: style });
+  }
+  for (const el of parsed.querySelectorAll("style")) {
+    if (/url\s*\(|@import/i.test(el.textContent ?? "")) out.push({ tag: "style", attr: "text", value: el.textContent });
+  }
+  return out;
+}
+
+/**
+ * One readable snapshot made self-contained: `html` with its images and attachments
+ * inside it, the named `losses` that stopped anything else being carried, and the
+ * `remote` references that still point off the file (empty when nothing does). The
+ * caller downloads only when both lists are empty.
+ */
+export async function inlineExportResources(html, {
+  resources = [],
+  base = globalThis.document?.baseURI ?? null,
+  fetch: fetchImpl = globalThis.fetch,
+  signal = null,
+  limits = EXPORT_LIMITS,
+} = {}) {
+  const capped = { ...EXPORT_LIMITS, ...(limits ?? {}) };
+  const losses = [];
+  const named = new Set();
+  const add = (entry) => {
+    const key = `${entry.code}\u0000${entry.blockId ?? ""}\u0000${entry.message}`;
+    if (named.has(key)) return;
+    named.add(key);
+    losses.push(entry);
+  };
+  const targets = new Map();
+  for (const entry of resources ?? []) {
+    if (!entry || entry.kind === "chart" || entry.inline) continue;
+    const url = entry.url ? canonicalUrl(entry.url, base) : null;
+    if (entry.kind === "embed") {
+      add(embedLoss(entry, url));
+      continue;
+    }
+    if (!url) {
+      add(urlLoss(entry));
+      continue;
+    }
+    const target = targets.get(url) ?? { url, kind: entry.kind, blockId: entry.blockId ?? null };
+    target.blockId ??= entry.blockId ?? null;
+    targets.set(url, target);
+  }
+
+  const listed = [...targets.values()];
+  const hits = new Map();
+  const budget = { spent: 0, live: 0, total: capped.total, exhausted: false };
+  if (listed.length && typeof fetchImpl !== "function") {
+    for (const target of listed) add(loss("unavailable", target, `${subject(target)} at ${target.url} could not be read: this page cannot fetch it`));
+  } else if (listed.length) {
+    const run = new AbortController();
+    const onCancel = () => run.abort();
+    if (signal) {
+      if (signal.aborted) run.abort();
+      else signal.addEventListener("abort", onCancel, { once: true });
+    }
+    const baseOrigin = base ? originOf(canonicalUrl(base, base) ?? base) : null;
+    const baseHost = base ? hostOf(canonicalUrl(base, base) ?? base) : null;
+    const answers = new Map();
+    try {
+      const tasks = listed.map((target) => ({ target, controller: new AbortController(), bytes: 0, timedOut: false }));
+      await pool(tasks, capped.inFlight, async (task) => {
+        if (run.signal.aborted) return;
+        answers.set(task.target.url, await fetchOne(task, { fetchImpl, baseOrigin, baseHost, limits: capped, budget, run }));
+      });
+    } finally {
+      signal?.removeEventListener("abort", onCancel);
+    }
+    for (const target of listed) {
+      const answer = answers.get(target.url);
+      if (answer?.hit) hits.set(target.url, answer.hit);
+      else if (answer?.loss) add(answer.loss);
+      else if (run.signal.aborted) add(loss("cancelled", target, `Reading ${target.url} was cancelled`));
+      else add(loss("unreachable", target, `${subject(target)} at ${target.url} could not be read`));
+    }
+  }
+
+  const out = rewrite(html, hits, base);
+  return { html: out, losses, remote: remoteDependencies(out), embedded: hits.size, bytes: budget.spent };
+}

package/src/page/export-html.js

@@ -0,0 +1,209 @@
+// The readable snapshot: one static HTML document rendered from the live page
+// model through the same projection the saved page carries, plus the inventory
+// of every image, attachment, chart and embed it references. Nothing here
+// fetches, downloads or writes a file: inlining those resources and the export
+// action belong to the feature that calls this.
+//
+// The document keeps the content and drops the machinery: no script, stylesheet,
+// live tag, save hook or block envelope, every toggle open, and a table of
+// contents as a plain list rather than links into a page that is not running.
+import { fragmentCleaner, renderModel } from "./projection.js";
+import { documentTitle } from "./document-title.js";
+
+/** A snapshot that cannot be produced without lying about its contents. */
+export class PageExportError extends Error {
+  constructor(code, message) {
+    super(message);
+    this.name = "PageExportError";
+    this.code = code;
+  }
+}
+
+const fail = (code, message) => { throw new PageExportError(code, message); };
+
+// A reference the document may carry: bytes already inside the file, an address
+// on the origin the page was read from, or a plain http(s) URL. A script URL or a
+// second document in a data URL is refused by name, never dropped in silence.
+const DATA_IMAGE = /^data:image\/(?:png|jpe?g|gif|webp);/i;
+const SCRIPT_URL = /^(?:javascript|vbscript|data):/i;
+const REMOTE = /^https?:\/\//i;
+const ROOTED = /^\/(?!\/)/;
+const squash = (value) => String(value ?? "").trim().replace(/[\u0000-\u0020]/g, "");
+const carriable = (value) => DATA_IMAGE.test(value) || !SCRIPT_URL.test(value);
+
+function reference(raw) {
+  const s = squash(raw);
+  if (!s || s.startsWith("#")) return null;
+  if (DATA_IMAGE.test(s)) return { url: s, inline: true };
+  if (/^\/\//.test(s)) return { url: `https:${s}`, inline: false };
+  if (ROOTED.test(s) || REMOTE.test(s)) return { url: s, inline: false };
+  return undefined;
+}
+
+const RESOURCE_TAGS = { img: "image", iframe: "embed", embed: "embed", object: "embed", video: "embed", audio: "embed", source: "embed", track: "embed" };
+const SOURCE_ATTR = { object: "data" };
+const STATIC_MEDIA = /<(?:img|svg|video|audio|canvas|iframe|table)\b/i;
+const STATIC_TEXT = /<(?:meta|style|img|br|hr|input)\b[^>]*>/gi;
+
+const blockOf = (el) => el.closest?.("[data-id]")?.getAttribute("data-id") || null;
+const where = (kind, blockId) => (blockId ? `${kind} in block ${blockId}` : kind);
+
+// Every reference the document carries, in the order it appears, each named by the
+// block that holds it. Charts are listed too: their drawing is already SVG inside
+// the file, so they name no address and need nothing fetched.
+function resourcesOf(container) {
+  const out = [];
+  const seen = new Set();
+  const add = (kind, raw, blockId) => {
+    const ref = reference(raw);
+    if (ref === undefined) {
+      fail("unsafe-url", `The ${where(kind, blockId)} points at ${String(raw).trim().slice(0, 120)}, which a reading copy cannot carry`);
+    }
+    if (!ref) return;
+    const key = `${kind}\u0000${ref.url}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    out.push({ kind, url: ref.url, blockId: blockId ?? null, inline: ref.inline });
+  };
+  for (const el of container.querySelectorAll("*")) {
+    const tag = el.tagName.toLowerCase();
+    const kind = RESOURCE_TAGS[tag];
+    if (kind) add(kind, el.getAttribute(SOURCE_ATTR[tag] ?? "src"), blockOf(el));
+    if (tag === "img" || tag === "source") {
+      for (const candidate of String(el.getAttribute("srcset") ?? "").split(",")) add("image", candidate.trim().split(/\s+/)[0], blockOf(el));
+    }
+  }
+  for (const el of container.querySelectorAll('[data-type="file"]')) {
+    add("attachment", el.getAttribute("data-src"), blockOf(el));
+    add("attachment", el.querySelector("a[href]")?.getAttribute("href"), blockOf(el));
+  }
+  for (const el of container.querySelectorAll('figure[data-type="chart"]')) {
+    const blockId = blockOf(el);
+    const key = `chart\u0000${blockId ?? ""}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({ kind: "chart", url: null, blockId: blockId ?? null, inline: true });
+  }
+  return out;
+}
+
+// The article as a reader gets it: no script, stylesheet or runtime attribute, and
+// no link to a script URL. A resource the document needs was already checked.
+function scrub(container) {
+  for (const el of [...container.querySelectorAll("script, style, link, meta, base")]) el.remove();
+  for (const el of container.querySelectorAll("*")) {
+    for (const { name, value } of [...el.attributes]) {
+      const attr = name.toLowerCase();
+      if (attr.startsWith("on") || attr === "clay" || attr === "merge" || attr === "live" || attr === "srcdoc" || attr.startsWith("data-clay") || attr.startsWith("clay-")) {
+        el.removeAttribute(name);
+        continue;
+      }
+      if (/^(href|src|action|formaction|poster|data-src|xlink:href)$/.test(attr) && !carriable(squash(value))) el.removeAttribute(name);
+    }
+  }
+}
+
+// The table of contents reads as a nested list of its entries; its anchors point at
+// a page that is not running here.
+function plainToc(container) {
+  for (const nav of container.querySelectorAll('nav[data-type="toc"]')) {
+    for (const link of [...nav.querySelectorAll("a")]) link.replaceWith(link.ownerDocument.createTextNode(link.textContent));
+  }
+}
+
+const openToggles = (model) => model.map((item) => (item.t === "toggle" ? { ...item, open: true } : item));
+
+const hasStatic = (html, clean) => {
+  const cleaned = clean.fallback(String(html ?? ""));
+  return STATIC_MEDIA.test(cleaned) || cleaned.replace(STATIC_TEXT, "").replace(/<[^>]+>/g, "").trim() !== "";
+};
+
+const escText = (text) => String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+const READER_CSS = `:root { color-scheme: light dark; }
+body { margin: 0; background: #ffffff; color: #37352f; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }
+article[data-page] { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
+article[data-page] > * { margin: 0.7em 0; }
+header[data-page-heading] { position: relative; margin-bottom: 1.6em; }
+header[data-page-heading] img[data-page-cover] { display: block; width: 100%; max-height: 18rem; object-fit: cover; border-radius: 6px; margin-bottom: 1em; }
+header[data-page-heading] span[data-page-icon] { display: block; font-size: 2.6em; line-height: 1.2; }
+h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 650; margin: 1.2em 0 0.3em; }
+h1 { font-size: 2em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.2em; }
+p, li { max-width: 100%; }
+a { color: #0b6bcb; }
+blockquote { margin-left: 0; padding-left: 1em; border-left: 3px solid rgba(55, 53, 47, 0.2); color: #5b5952; }
+aside.page-callout { border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 6px; padding: 0.8em 1em; background: rgba(55, 53, 47, 0.04); }
+pre { overflow-x: auto; padding: 0.9em 1em; border-radius: 6px; background: rgba(55, 53, 47, 0.06); font-size: 0.9em; }
+code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
+pre code { font-size: inherit; }
+details { margin: 0.4em 0; }
+details > summary { cursor: pointer; font-weight: 600; }
+details > summary h1, details > summary h2, details > summary h3 { display: inline; margin: 0; }
+hr { border: 0; border-top: 1px solid rgba(55, 53, 47, 0.18); }
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid rgba(55, 53, 47, 0.18); padding: 0.4em 0.6em; text-align: left; vertical-align: top; }
+th { background: rgba(55, 53, 47, 0.04); font-weight: 600; }
+figure { margin: 1em 0; }
+figure img { max-width: 100%; height: auto; border-radius: 4px; }
+figcaption { font-size: 0.88em; color: #78766f; margin-top: 0.4em; }
+figure[data-type="chart"] svg { max-width: 100%; height: auto; }
+section[data-type="board"] { display: flex; gap: 1em; overflow-x: auto; align-items: flex-start; }
+section[data-type="board"] > div { min-width: 12rem; border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 6px; padding: 0.6em 0.8em; }
+section[data-type="board"] h4 { margin: 0 0 0.4em; font-size: 0.95em; }
+section[data-type="board"] ul { list-style: none; margin: 0; padding: 0; }
+section[data-type="board"] li { border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 4px; padding: 0.4em 0.5em; margin-bottom: 0.4em; }
+nav[data-type="toc"] ul { list-style: none; padding-left: 0; }
+nav[data-type="toc"] ul ul { padding-left: 1.2em; }
+li > input[type="checkbox"] { margin-right: 0.4em; }
+[data-type="file"] a { display: inline-block; padding: 0.4em 0.7em; border: 1px solid rgba(55, 53, 47, 0.18); border-radius: 4px; }
+@media (prefers-color-scheme: dark) {
+  body { background: #191919; color: #d4d4d4; }
+  aside.page-callout, th, pre { background: rgba(255, 255, 255, 0.06); }
+  th, td, section[data-type="board"] > div, section[data-type="board"] li, [data-type="file"] a { border-color: rgba(255, 255, 255, 0.16); }
+  a { color: #6cb0f5; }
+}`;
+
+function standalone(title, body) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escText(title)}</title>
+<style>
+${READER_CSS}
+</style>
+</head>
+<body>
+<article data-page="1">
+${body}
+</article>
+</body>
+</html>
+`;
+}
+
+/**
+ * One readable HTML document for the page model, and the resources it references.
+ * An address the file cannot carry, or a tool with no static rendering, throws a
+ * PageExportError naming what stopped it rather than producing a truncated file.
+ */
+export function renderExportHtml(model, { title = null, fallbackOf = null, doc = globalThis.document } = {}) {
+  if (!Array.isArray(model)) throw new TypeError("page: an export renders a projection model");
+  const clean = fragmentCleaner(doc);
+  const fallback = fallbackOf ?? ((id) => model.find((item) => item.id === id)?.artifact?.fallbackHtml ?? "");
+  for (const item of model) {
+    if (item.t === "tool" && !hasStatic(fallback(item.id), clean)) {
+      fail("unsupported-tool", `Block ${item.id} holds a tool with no static rendering, which a reading copy cannot show`);
+    }
+  }
+  const container = doc.createElement("div");
+  container.innerHTML = renderModel(openToggles(model), { fallbackOf: fallback, clean });
+  const resources = resourcesOf(container);
+  scrub(container);
+  plainToc(container);
+  const name = title ?? documentTitle(model);
+  return { html: standalone(name, container.innerHTML), title: name, resources };
+}