@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/navigation/HashScrollManager.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  hashIdFromHref,
+  instantScrollToHash,
+  instantScrollToId,
+  isSamePageHashHref,
+  readScrollAnchor,
+  scrollTopForAnchor,
+  type ScrollAnchor,
+} from "./hashScroll";
+
+const STORE = "dg-scroll:";
+/** Late layout (fonts, measured grids) can still move content this long after load. */
+const RESTORE_MS = 1500;
+const RESIZE_SETTLE_MS = 300;
+
+const storeKey = () => `${STORE}${window.location.pathname}${window.location.search}`;
+
+function readSaved(): ScrollAnchor | null {
+  try {
+    const raw = window.sessionStorage.getItem(storeKey());
+    const saved = raw ? (JSON.parse(raw) as ScrollAnchor) : null;
+    return saved && typeof saved.y === "number" && typeof saved.frac === "number" ? saved : null;
+  } catch {
+    return null;
+  }
+}
+
+function save(anchor: ScrollAnchor) {
+  try {
+    window.sessionStorage.setItem(storeKey(), JSON.stringify(anchor));
+  } catch {
+    /* storage full or blocked: position keeping is best-effort */
+  }
+}
+
+/**
+ * Owns page scroll position:
+ * - same-page hash links jump instantly to their target section instead of
+ *   smooth-scrolling through tall scroll-driven blocks (pipeline, card stack, etc.);
+ * - a reload or back/forward lands where the reader was, not on the URL hash;
+ * - a width change (browser zoom, rotation, window resize) keeps the reader on
+ *   the same point of the same section. Height-only changes on touch devices
+ *   are ignored — that is the mobile URL bar, and it moves under a live thumb.
+ */
+export function HashScrollManager() {
+  useEffect(() => {
+    const nav = performance.getEntriesByType("navigation")[0] as
+      PerformanceNavigationTiming | undefined;
+    const returning = nav?.type === "reload" || nav?.type === "back_forward";
+    const saved = returning ? readSaved() : null;
+
+    let anchor: ScrollAnchor = saved ?? readScrollAnchor();
+    let holdUntil = 0;
+    let frame = 0;
+    let saveTimer = 0;
+    const timers: number[] = [];
+    let width = window.innerWidth;
+    let height = window.innerHeight;
+    const coarse = window.matchMedia("(pointer: coarse)").matches;
+
+    const place = () => {
+      if (performance.now() > holdUntil) return;
+      window.scrollTo({ top: Math.max(0, scrollTopForAnchor(anchor)), behavior: "instant" });
+    };
+    const hold = (ms: number) => {
+      holdUntil = Math.max(holdUntil, performance.now() + ms);
+    };
+    const release = () => {
+      holdUntil = 0;
+      if (window.history.scrollRestoration === "manual") window.history.scrollRestoration = "auto";
+    };
+
+    if (saved) {
+      window.history.scrollRestoration = "manual";
+      hold(RESTORE_MS);
+      requestAnimationFrame(place);
+      for (const ms of [250, 700, RESTORE_MS - 100]) timers.push(window.setTimeout(place, ms));
+      timers.push(window.setTimeout(release, RESTORE_MS));
+      void document.fonts?.ready.then(place);
+    } else if (window.location.hash) {
+      requestAnimationFrame(() => instantScrollToHash(window.location.hash));
+    }
+
+    const onScroll = () => {
+      if (performance.now() < holdUntil) return;
+      /* A width change (zoom/rotation/resize) is in flight: the scroll event it
+         produces must not overwrite the anchor, otherwise the resize handler
+         would re-place to a lower section and cut off the hero. */
+      if (window.innerWidth !== width) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        anchor = readScrollAnchor();
+        window.clearTimeout(saveTimer);
+        saveTimer = window.setTimeout(() => save(anchor), 150);
+      });
+    };
+
+    const onResize = () => {
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      const moved = w !== width || (h !== height && !coarse);
+      width = w;
+      height = h;
+      if (!moved) return;
+      hold(RESIZE_SETTLE_MS + 50);
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(place);
+      timers.push(window.setTimeout(place, RESIZE_SETTLE_MS));
+    };
+
+    /* The reader takes over: stop steering. */
+    const onInput = () => {
+      if (holdUntil) release();
+    };
+
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+      const link = (event.target as Element | null)?.closest("a[href]");
+      if (!(link instanceof HTMLAnchorElement)) return;
+
+      const href = link.getAttribute("href");
+      if (!href || !isSamePageHashHref(href)) return;
+
+      const id = hashIdFromHref(href);
+      if (!id) return;
+
+      event.preventDefault();
+      const url = new URL(href, window.location.href);
+      window.history.pushState(null, "", `${url.pathname}${url.search}${url.hash}`);
+      instantScrollToId(id);
+    };
+
+    const onHashChange = () => {
+      if (!window.location.hash) return;
+      instantScrollToHash(window.location.hash);
+    };
+
+    const onHide = () => save(readScrollAnchor());
+
+    const inputs = ["wheel", "touchstart", "keydown", "pointerdown"] as const;
+    for (const type of inputs) window.addEventListener(type, onInput, { passive: true });
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+    window.addEventListener("pagehide", onHide);
+    document.addEventListener("click", onClick);
+    window.addEventListener("hashchange", onHashChange);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      window.clearTimeout(saveTimer);
+      for (const id of timers) window.clearTimeout(id);
+      for (const type of inputs) window.removeEventListener(type, onInput);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("pagehide", onHide);
+      document.removeEventListener("click", onClick);
+      window.removeEventListener("hashchange", onHashChange);
+    };
+  }, []);
+
+  return null;
+}

package/src/navigation/hashScroll.ts

@@ -0,0 +1,78 @@
+/** Whether `href` targets a hash on the current document (same origin + path). */
+export function isSamePageHashHref(href: string, locationHref = window.location.href): boolean {
+  if (!href || href.startsWith("mailto:") || href.startsWith("tel:")) return false;
+
+  let url: URL;
+  try {
+    url = new URL(href, locationHref);
+  } catch {
+    return false;
+  }
+
+  const current = new URL(locationHref);
+  if (url.origin !== current.origin || !url.hash) return false;
+
+  const normalize = (pathname: string) => {
+    if (pathname === "/index.html") return "/";
+    return pathname;
+  };
+
+  return normalize(url.pathname) === normalize(current.pathname);
+}
+
+export function hashIdFromHref(href: string, locationHref = window.location.href): string | null {
+  if (!isSamePageHashHref(href, locationHref)) return null;
+  const hash = new URL(href, locationHref).hash;
+  return hash.length > 1 ? hash.slice(1) : null;
+}
+
+/** Jump directly to a section — no smooth scroll through intermediate scroll-driven UI. */
+export function instantScrollToId(id: string): boolean {
+  const el = document.getElementById(id);
+  if (!el) return false;
+  el.scrollIntoView({ behavior: "instant", block: "start" });
+  return true;
+}
+
+export function instantScrollToHash(hash: string): boolean {
+  const id = hash.replace(/^#/, "");
+  return id ? instantScrollToId(id) : false;
+}
+
+/**
+ * Where the reader is, as content rather than pixels: the innermost
+ * `main section[id]` under the line just below the fixed bar, and how far
+ * through it that line sits. Viewport-sized bands (pinned tours, scrolly
+ * grids) change height with the viewport, so a raw scrollY lands somewhere
+ * else after a zoom; the same fraction of the same section does not.
+ */
+export interface ScrollAnchor {
+  id: string | null;
+  frac: number;
+  y: number;
+}
+
+function anchorLine(): number {
+  const pad = Number.parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop);
+  return (Number.isFinite(pad) ? pad : 0) + 1;
+}
+
+export function readScrollAnchor(): ScrollAnchor {
+  const line = anchorLine();
+  let anchor: ScrollAnchor = { id: null, frac: 0, y: window.scrollY };
+  if (window.scrollY < 1) return anchor;
+  for (const el of document.querySelectorAll<HTMLElement>("main section[id]")) {
+    const box = el.getBoundingClientRect();
+    if (box.height > 0 && box.top <= line && box.bottom > line) {
+      anchor = { id: el.id, frac: (line - box.top) / box.height, y: window.scrollY };
+    }
+  }
+  return anchor;
+}
+
+export function scrollTopForAnchor(anchor: ScrollAnchor): number {
+  const el = anchor.id ? document.getElementById(anchor.id) : null;
+  if (!el) return anchor.y;
+  const box = el.getBoundingClientRect();
+  return window.scrollY + box.top + anchor.frac * box.height - anchorLine();
+}

package/src/replay/browser.ts

@@ -0,0 +1,280 @@
+/**
+ * Download the active thread as one HTML file. Styles and same-origin images
+ * come from the live page. The rest of the page (other threads, the memory
+ * sidebar) is not included.
+ */
+
+import { downloadTextFile } from "../components/chat/transcript";
+import { setExportKeepMounted } from "./export-mount";
+import { snapshotFilename } from "./filename";
+import {
+  deploymentText,
+  keepAnswerOnly,
+  messageAnchor,
+  omitScrollLockCss,
+  questionText,
+  serializeSnapshot,
+  snapshotSource,
+  transformSnapshotDom,
+} from "./snapshot";
+
+// Bounded runs keep this linear on page CSS (CodeQL js/polynomial-redos). The
+// value cannot start or end with whitespace, so the \s runs never compete with it.
+const URL_RE =
+  /url\([ \t\n]{0,16}(['"]?)([^'"()\s](?:[^'"()]{0,4094}[^'"()\s])?)\1[ \t\n]{0,16}\)/g;
+
+/** One slow asset must not hang the export; it is dropped instead. */
+const ASSET_TIMEOUT_MS = 8000;
+
+function fetchAsset(fetchImpl: typeof fetch, url: string): Promise<Response> {
+  const signal =
+    typeof AbortSignal !== "undefined" && typeof AbortSignal.timeout === "function"
+      ? AbortSignal.timeout(ASSET_TIMEOUT_MS)
+      : undefined;
+  return fetchImpl(url, signal ? { signal } : undefined);
+}
+
+export function liveSheetText(
+  doc: Document | null = typeof document === "undefined" ? null : document,
+): string {
+  if (!doc) return "";
+  const chunks: string[] = [];
+  for (const sheet of Array.from(doc.styleSheets)) {
+    try {
+      for (const rule of Array.from(sheet.cssRules)) {
+        const text = omitScrollLockCss(rule.cssText);
+        if (text.trim()) chunks.push(text);
+      }
+    } catch {
+      /* A cross-origin sheet cannot be read. Those rules are dropped. */
+    }
+  }
+  return chunks.join("\n");
+}
+
+export async function inlineAssetUrls(
+  css: string,
+  options: {
+    origin?: string;
+    href?: string;
+    fetchImpl?: typeof fetch;
+  } = {},
+): Promise<string> {
+  const origin = options.origin ?? (typeof location === "undefined" ? "" : location.origin);
+  const href = options.href ?? (typeof location === "undefined" ? "" : location.href);
+  const fetchImpl = options.fetchImpl ?? fetch;
+  URL_RE.lastIndex = 0;
+  if (!origin || origin === "null") return css;
+  const replacements = new Map<string, string>();
+  for (const match of css.matchAll(URL_RE)) {
+    const raw = match[2];
+    if (!raw || raw.startsWith("data:") || raw.startsWith("#")) continue;
+    if (replacements.has(raw)) continue;
+    const absolute = sameOriginUrl(raw, origin, href);
+    if (!absolute) {
+      replacements.set(raw, "");
+      continue;
+    }
+    try {
+      const res = await fetchAsset(fetchImpl, absolute);
+      if (!res.ok) {
+        replacements.set(raw, "");
+        continue;
+      }
+      const bytes = new Uint8Array(await res.arrayBuffer());
+      const mime = (res.headers.get("content-type") || mimeOf(absolute)).split(";")[0].trim();
+      if (!isSavableAsset(mime)) {
+        replacements.set(raw, "");
+        continue;
+      }
+      const encoded = bytesToBase64(bytes);
+      replacements.set(raw, `data:${mime || "application/octet-stream"};base64,${encoded}`);
+    } catch {
+      replacements.set(raw, "");
+    }
+  }
+  return css.replace(URL_RE, (full, _quote: string, raw: string) => {
+    if (!replacements.has(raw)) return full;
+    const data = replacements.get(raw);
+    return data ? `url("${data}")` : "none";
+  });
+}
+
+export async function inlineDomAssets(
+  root: ParentNode,
+  options: {
+    origin?: string;
+    href?: string;
+    fetchImpl?: typeof fetch;
+  } = {},
+): Promise<void> {
+  const origin = options.origin ?? (typeof location === "undefined" ? "" : location.origin);
+  const href = options.href ?? (typeof location === "undefined" ? "" : location.href);
+  const fetchImpl = options.fetchImpl ?? fetch;
+  const nodes = [...root.querySelectorAll<HTMLElement>("img, image, use, source, video")];
+  for (const node of nodes) {
+    node.removeAttribute("srcset");
+    for (const attr of ["src", "href", "poster"] as const) {
+      const raw = node.getAttribute(attr);
+      if (!raw || raw.startsWith("data:") || raw.startsWith("#")) continue;
+      const absolute = origin ? sameOriginUrl(raw, origin, href) : null;
+      if (!absolute) {
+        node.removeAttribute(attr);
+        continue;
+      }
+      try {
+        const res = await fetchAsset(fetchImpl, absolute);
+        if (!res.ok) {
+          node.removeAttribute(attr);
+          continue;
+        }
+        const bytes = new Uint8Array(await res.arrayBuffer());
+        const mime = (res.headers.get("content-type") || mimeOf(absolute)).split(";")[0].trim();
+        if (!isSavableAsset(mime)) {
+          node.removeAttribute(attr);
+          continue;
+        }
+        node.setAttribute(
+          attr,
+          `data:${mime || "application/octet-stream"};base64,${bytesToBase64(bytes)}`,
+        );
+      } catch {
+        node.removeAttribute(attr);
+      }
+    }
+  }
+  if (!origin) return;
+  for (const el of root.querySelectorAll<HTMLElement>("[style]")) {
+    const style = el.getAttribute("style");
+    if (!style || !style.includes("url(")) continue;
+    el.setAttribute("style", await inlineAssetUrls(style, { origin, href, fetchImpl }));
+  }
+}
+
+export const MISSING_THREAD_MESSAGE = "No open thread to export.";
+export const MISSING_MESSAGE_MESSAGE = "Couldn't find that message to export.";
+
+/** A failure the open page can show. The same slot is updated, not stacked. */
+export function showSnapshotError(doc: Document, message: string): void {
+  const host = doc.body ?? doc.documentElement;
+  if (!host) return;
+  let banner = host.querySelector<HTMLElement>("[data-slot='snapshot-export-error']");
+  if (!banner) {
+    banner = doc.createElement("div");
+    banner.setAttribute("role", "alert");
+    banner.setAttribute("data-slot", "snapshot-export-error");
+    host.prepend(banner);
+  }
+  banner.textContent = message;
+}
+
+async function saveSnapshot(
+  doc: Document,
+  shell: HTMLElement,
+  exportedAt: string,
+  question = questionText(shell),
+): Promise<void> {
+  const css = await inlineAssetUrls(liveSheetText(doc));
+  transformSnapshotDom(shell);
+  await inlineDomAssets(shell);
+  const html = serializeSnapshot(shell, css);
+  const name = snapshotFilename(deploymentText(doc), exportedAt, question);
+  downloadTextFile(name, html, "text/html;charset=utf-8");
+}
+
+export async function downloadThreadSnapshot(
+  doc: Document | null = typeof document === "undefined" ? null : document,
+  exportedAt = new Date().toISOString(),
+  anchor?: HTMLElement | null,
+): Promise<void> {
+  if (!doc?.documentElement) throw new Error(MISSING_THREAD_MESSAGE);
+  // Closed reasoning and tool panels unmount on the live page. Mount them
+  // only for this read, then put the page back.
+  setExportKeepMounted(true);
+  try {
+    const shell = snapshotSource(doc, anchor);
+    if (!shell) {
+      const message = anchor ? MISSING_MESSAGE_MESSAGE : MISSING_THREAD_MESSAGE;
+      showSnapshotError(doc, message);
+      throw new Error(message);
+    }
+    await saveSnapshot(doc, shell, exportedAt);
+  } finally {
+    setExportKeepMounted(false);
+  }
+}
+
+/**
+ * The message-menu export. `trigger` is the menu button inside that
+ * assistant message. A miss shows an error and does not save the thread.
+ */
+export async function downloadMessageSnapshot(
+  doc: Document | null = typeof document === "undefined" ? null : document,
+  exportedAt = new Date().toISOString(),
+  messageId = "",
+  trigger: HTMLElement | null = null,
+  options: { answerOnly?: boolean } = {},
+): Promise<void> {
+  if (!doc?.documentElement) throw new Error(MISSING_THREAD_MESSAGE);
+  setExportKeepMounted(true);
+  try {
+    const anchor = messageAnchor(trigger, messageId);
+    if (!anchor?.isConnected) {
+      showSnapshotError(doc, MISSING_MESSAGE_MESSAGE);
+      throw new Error(MISSING_MESSAGE_MESSAGE);
+    }
+    const shell = snapshotSource(doc, anchor);
+    if (!shell) {
+      showSnapshotError(doc, MISSING_MESSAGE_MESSAGE);
+      throw new Error(MISSING_MESSAGE_MESSAGE);
+    }
+    // The question names the file even when the file holds the answer only.
+    const question = questionText(shell);
+    if (options.answerOnly !== false) keepAnswerOnly(shell);
+    await saveSnapshot(doc, shell, exportedAt, question);
+  } finally {
+    setExportKeepMounted(false);
+  }
+}
+
+function sameOriginUrl(raw: string, origin: string, href: string): string | null {
+  try {
+    const url = new URL(raw, href || origin);
+    if (url.origin !== origin) return null;
+    return url.href;
+  } catch {
+    return null;
+  }
+}
+
+/** JSON and HTML bodies are not assets. Only images and fonts are inlined. */
+function isSavableAsset(mime: string): boolean {
+  const type = mime.toLowerCase();
+  return (
+    type.startsWith("image/") ||
+    type.startsWith("font/") ||
+    type === "application/font-woff" ||
+    type === "application/font-woff2" ||
+    type === "application/x-font-woff"
+  );
+}
+
+function mimeOf(url: string): string {
+  const path = url.split("?")[0]?.toLowerCase() ?? "";
+  if (path.endsWith(".woff2")) return "font/woff2";
+  if (path.endsWith(".woff")) return "font/woff";
+  if (path.endsWith(".svg")) return "image/svg+xml";
+  if (path.endsWith(".png")) return "image/png";
+  if (path.endsWith(".css")) return "text/css";
+  return "application/octet-stream";
+}
+
+function bytesToBase64(bytes: Uint8Array): string {
+  if (typeof Buffer !== "undefined") return Buffer.from(bytes).toString("base64");
+  let binary = "";
+  const size = 0x8000;
+  for (let i = 0; i < bytes.length; i += size) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + size));
+  }
+  return btoa(binary);
+}

package/src/replay/chat-export-run.ts

@@ -0,0 +1,121 @@
+/**
+ * Run an export: the conversation or one assistant message, as markdown or
+ * HTML. Every skin's message menu and the chat-level `/export` call these,
+ * so the formats, file names and errors are the same everywhere.
+ */
+
+import {
+  chatExportStrings,
+  conversationMarkdown,
+  downloadMarkdown,
+  lastQuestion,
+  messageMarkdown,
+  transcriptTurn,
+  transcriptTurns,
+  type ChatExportFormat,
+  type ChatExportStrings,
+} from "../components/chat/transcript";
+import { isChatPrivateMode } from "../components/chat/stock/chat-private-mode";
+import { downloadMessageSnapshot, downloadThreadSnapshot, showSnapshotError } from "./browser";
+import { exportFilename } from "./filename";
+import { deploymentText } from "./snapshot";
+
+const EXPORT_FAILED = "Export failed.";
+
+/**
+ * A private session exports nothing: the stored messages still hold the real
+ * typed text, and the file name carries a slug of the question. The menus
+ * already hide the rows; this is the guard behind them.
+ */
+function exportBlocked(input: { privateMode?: boolean | undefined }): boolean {
+  return input.privateMode === true || isChatPrivateMode();
+}
+
+function liveDocument(): Document | null {
+  return typeof document === "undefined" ? null : document;
+}
+
+function reportError(doc: Document | null, error: unknown): void {
+  const message = error instanceof Error ? error.message : EXPORT_FAILED;
+  if (doc) showSnapshotError(doc, message);
+  console.error("chat export failed", error);
+}
+
+export type ConversationExportInput = {
+  format: ChatExportFormat;
+  /** Runtime thread messages, in order. */
+  messages: readonly unknown[];
+  strings?: ChatExportStrings;
+  doc?: Document | null;
+  now?: string;
+  /** The caller's private flag. The shared one is checked as well. */
+  privateMode?: boolean | undefined;
+};
+
+/**
+ * The whole conversation. Resolves after the file is handed to the browser.
+ * Saves nothing in a private session.
+ */
+export async function exportConversation(input: ConversationExportInput): Promise<void> {
+  if (exportBlocked(input)) return;
+  const doc = input.doc === undefined ? liveDocument() : input.doc;
+  const now = input.now ?? new Date().toISOString();
+  try {
+    if (input.format === "html") {
+      await downloadThreadSnapshot(doc, now);
+      return;
+    }
+    const turns = transcriptTurns(input.messages);
+    const md = conversationMarkdown(turns, input.strings ?? chatExportStrings());
+    if (!md) return;
+    const deployment = doc ? deploymentText(doc) : "";
+    downloadMarkdown(exportFilename(deployment, now, lastQuestion(turns), "md"), md);
+  } catch (error) {
+    reportError(doc, error);
+  }
+}
+
+export type MessageExportInput = {
+  format: ChatExportFormat;
+  /** The assistant message's runtime state. */
+  message: unknown;
+  messageId: string;
+  /** The thread's messages, for the question that names the file. */
+  messages?: readonly unknown[];
+  /** The menu trigger inside that message. HTML needs it to find the message. */
+  trigger: HTMLElement | null;
+  doc?: Document | null;
+  now?: string;
+  /** The caller's private flag. The shared one is checked as well. */
+  privateMode?: boolean | undefined;
+};
+
+/**
+ * One assistant message, without the question before it: the answer text
+ * only, in both formats. Saves nothing in a private session.
+ */
+export async function exportMessage(input: MessageExportInput): Promise<void> {
+  if (exportBlocked(input)) return;
+  const doc = input.doc === undefined ? liveDocument() : input.doc;
+  const now = input.now ?? new Date().toISOString();
+  try {
+    if (input.format === "html") {
+      await downloadMessageSnapshot(doc, now, input.messageId, input.trigger);
+      return;
+    }
+    const md = messageMarkdown(transcriptTurn(input.message));
+    if (!md) return;
+    const deployment = doc ? deploymentText(doc) : "";
+    downloadMarkdown(exportFilename(deployment, now, messageQuestion(input), "md"), md);
+  } catch (error) {
+    reportError(doc, error);
+  }
+}
+
+function messageQuestion(input: MessageExportInput): string {
+  const all = input.messages ?? [];
+  const index = all.findIndex(
+    (m) => !!m && typeof m === "object" && (m as { id?: unknown }).id === input.messageId,
+  );
+  return index < 0 ? "" : lastQuestion(transcriptTurns(all.slice(0, index)));
+}

package/src/replay/export-format.ts

@@ -0,0 +1,25 @@
+import { showSnapshotError } from "./browser";
+
+/** Shown when `/export` is given a format other than markdown or html. */
+export const UNSUPPORTED_EXPORT_FORMAT = "Unsupported format.";
+
+/**
+ * `/export`, `/export md`, and `/export markdown` save markdown.
+ * `/export html` saves the thread. Anything else shows an error.
+ */
+export function applyExportSlash(
+  format: string,
+  doc: Document,
+  actions: { html: () => void; markdown: () => void },
+): void {
+  const value = format.trim().toLowerCase();
+  if (value === "html") {
+    actions.html();
+    return;
+  }
+  if (value === "" || value === "md" || value === "markdown") {
+    actions.markdown();
+    return;
+  }
+  showSnapshotError(doc, UNSUPPORTED_EXPORT_FORMAT);
+}