@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/page-image.ts

@@ -0,0 +1,1592 @@
+/**
+ * Draws the visible page onto a canvas without reading a computed style per element.
+ *
+ * The page is cloned natively (`cloneNode(true)`, a few milliseconds for thousands of nodes), the page's own
+ * stylesheets are inlined once (cached per page, with fonts and `url()` assets embedded as data URLs), and the
+ * result is rasterized through an SVG `<foreignObject>`. The previous renderer (modern-screenshot) copied the
+ * diff of ~400 computed properties for every element and its pseudo-elements, which cost about a second of
+ * main-thread time per capture on an ordinary page and grew with the page. This one spends the main thread on
+ * the clone walk and on the browser's own SVG layout, and nothing on the network once warmed.
+ *
+ * The copy is built to land every element exactly where the person sees it, whatever is scrolled:
+ *
+ * - A scrolled element's children are shifted by its scroll offset, the window's included, so the root is never
+ *   transformed and never clips the part of the page that scrolled into view.
+ * - `position: fixed` and `position: sticky` elements are pinned at their on-screen box, since neither survives a
+ *   scroll offset expressed as a translation (a transform re-anchors fixed descendants; a static image has nothing
+ *   to stick to). Every box is measured while the page is copied, never when it is drawn: drawing waits for
+ *   fonts and pictures, and a page that scrolled on in the meantime would put its header wherever it had got to.
+ * - What is in the browser's top layer (a modal dialog with its backdrop, an open popover) is drawn open, over
+ *   everything else.
+ * - What is moving (a CSS animation or transition, a script animation, one driven by scrolling) is drawn at the
+ *   frame it was on.
+ * - Replaced elements (images, video, canvas, iframes, plugins) keep their on-screen box and their own look
+ *   (border, margin, fit) whatever happens to their pixels, so a slow or refused asset never reflows what
+ *   follows it.
+ * - A classic (non-overlay) scrollbar's gutter is kept as padding, so content beside one is not laid out wider.
+ *
+ * What is not carried over: what the page itself may not read (a frame's or plugin's content, a closed shadow
+ * tree, a picture or video from another origin that sends no CORS header, a WebGL canvas that does not keep
+ * its drawing buffer): a blank box of the same size. And styles that depend on `:hover`/`:focus` (dropped,
+ * which is what a screenshot should show anyway).
+ */
+
+import { fieldIsSensitive } from "./redact.js";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+/** Attribute names SVG can parse. Framework leftovers such as `@click` or `:class` would break the image. */
+const XML_ATTRIBUTE = /^[A-Za-z_][\w.-]*(?::[A-Za-z_][\w.-]*)?$/;
+// oxlint-disable-next-line no-control-regex -- these are exactly the characters XML forbids
+const CONTROL_CHARS = /[\u0000-\u0008\v\f\u000E-\u001F\uD800-\uDFFF￾￿]/gu;
+const CSS_URL = /url\((['"]?)([^'")]+?)\1\)/g;
+/** How long one asset (a font, an image) may take before the capture goes on without it. */
+const ASSET_TIMEOUT_MS = 1500;
+/** Elements that never contribute pixels, or that must not run inside the image. */
+const DROPPED = new Set([
+  "SCRIPT",
+  "NOSCRIPT",
+  "STYLE",
+  "LINK",
+  "TEMPLATE",
+  "HEAD",
+  "META",
+  "TITLE",
+  "BASE",
+  "AUDIO",
+]);
+/** A gutter narrower than this is rounding between `offsetWidth` and `clientWidth`, not a scrollbar. */
+const MIN_GUTTER = 4;
+/**
+ * Animations restart from their first frame inside the image, so a popover drawn while its enter animation
+ * (`fade-in-0`, `zoom-in-95`) is at opacity 0 would be missing. Every animation is settled at its end state;
+ * one that is still running when the page is copied is held at its current frame instead (`holdMotion`).
+ */
+const SETTLED_MOTION =
+  "*,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;" +
+  "animation-iteration-count:1!important;transition:none!important}";
+/**
+ * The image draws no scrollbars. A classic scrollbar's gutter is already kept as padding (`reserveScrollbarGutter`);
+ * without this, an element whose scrollbar overlays on screen (macOS, headless Chrome) would get a classic one in the
+ * image and lay its content out narrower than the person sees it.
+ */
+const NO_SCROLLBARS = "*{scrollbar-width:none!important}";
+const TRANSPARENT_PIXEL =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
+/** An address that is not a picture: an `<img>` with it is drawn the way a browser draws one that failed. */
+const BROKEN_IMAGE = "data:image/png;base64,AA==";
+
+export type PageImageOptions = {
+  /** Device pixels per CSS pixel in the output. */
+  scale: number;
+  /** Upper bound on the whole capture. */
+  timeout?: number;
+  /** Subtrees to leave out (the toolbar). */
+  exclude?: (element: Element) => boolean;
+  /** Painted behind the page. */
+  backgroundColor?: string;
+  /** CSS width/height of the captured area; defaults to the viewport. */
+  width?: number;
+  height?: number;
+  /** Window scroll offsets the page is shifted by. */
+  scrollX?: number;
+  scrollY?: number;
+};
+
+type Viewport = { width: number; height: number };
+type Scroll = { left: number; top: number };
+
+function withTimeout<T>(promise: Promise<T>, ms: number, what: string): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(`${what} timed out`)), ms);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timer);
+        reject(error);
+      },
+    );
+  });
+}
+
+function toDataUrl(bytes: ArrayBuffer, type: string): string {
+  const view = new Uint8Array(bytes);
+  let binary = "";
+  // btoa wants a binary string; building it in slices keeps the argument list bounded.
+  for (let offset = 0; offset < view.length; offset += 0x8000) {
+    binary += String.fromCharCode(...view.subarray(offset, offset + 0x8000));
+  }
+  return `data:${type || "application/octet-stream"};base64,${btoa(binary)}`;
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * Assets: every URL is fetched at most once per page and kept as a data URL.
+ * ---------------------------------------------------------------------------------------------- */
+
+const assets = new Map<string, Promise<string | null>>();
+
+/** A data URL for `url`, or null when it can't be fetched in time. Never rejects. */
+export function assetDataUrl(url: string, timeout = ASSET_TIMEOUT_MS): Promise<string | null> {
+  if (url.startsWith("data:")) return Promise.resolve(url);
+  const cached = assets.get(url);
+  if (cached) return cached;
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeout);
+  const request = fetch(url, {
+    signal: controller.signal,
+    mode: "cors",
+    credentials: "same-origin",
+  })
+    .then(async (response) => {
+      if (!response.ok) throw new Error(`asset ${response.status}`);
+      const type = (response.headers.get("content-type") ?? "").split(";")[0]!.trim();
+      return toDataUrl(await response.arrayBuffer(), type);
+    })
+    .catch(() => null)
+    .finally(() => clearTimeout(timer));
+  assets.set(url, request);
+  // A failure is not remembered: the next capture tries again (the network may be back).
+  void request.then((value) => {
+    if (value === null) assets.delete(url);
+  });
+  return request;
+}
+
+/** Replaces every `url()` in `cssText` with a data URL. Unfetchable ones are left as they are. */
+export async function inlineCssUrls(cssText: string, baseHref: string): Promise<string> {
+  const found: Array<{ raw: string; quote: string; url: string }> = [];
+  cssText.replace(CSS_URL, (raw, quote: string, url: string) => {
+    // `#id` and `%23id` point inside the document (SVG masks, gradients), not at a file.
+    if (!url.startsWith("data:") && !url.startsWith("#") && !url.startsWith("%23"))
+      found.push({ raw, quote, url });
+    return raw;
+  });
+  if (!found.length) return cssText;
+  const resolved = await Promise.all(
+    found.map(async (item) => {
+      let absolute: string;
+      try {
+        absolute = new URL(item.url, baseHref).href;
+      } catch {
+        return null;
+      }
+      const data = await assetDataUrl(absolute);
+      return data ? { raw: item.raw, data } : null;
+    }),
+  );
+  let out = cssText;
+  for (const item of resolved) {
+    if (item) out = out.split(item.raw).join(`url("${item.data}")`);
+  }
+  return out;
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * Styles: the page's stylesheets as one string, cached until the set of sheets changes.
+ * ---------------------------------------------------------------------------------------------- */
+
+type StyleSource = { key: string; ownHref: string; text: string | null; href: string | null };
+
+/** The toolbar's own sheets: never part of the picture. */
+function ownSheets(doc: Document) {
+  return new Set(
+    Array.from(
+      doc.querySelectorAll<HTMLStyleElement>('style[id^="cs-style-"]'),
+      (node) => node.sheet,
+    ),
+  );
+}
+
+/** Text of one sheet's rules, following same-origin `@import`s. Null when the browser hides the rules. */
+function sheetText(sheet: CSSStyleSheet, seen: Set<CSSStyleSheet>): string | null {
+  if (seen.has(sheet)) return "";
+  seen.add(sheet);
+  let rules: CSSRuleList;
+  try {
+    rules = sheet.cssRules;
+  } catch {
+    return null;
+  }
+  let text = "";
+  for (const rule of rules) {
+    if (rule instanceof CSSImportRule) {
+      const nested = rule.styleSheet ? sheetText(rule.styleSheet, seen) : null;
+      text += nested ?? "";
+      continue;
+    }
+    text += `${rule.cssText}\n`;
+  }
+  return text;
+}
+
+/** The sheets that style the page, read in document order. */
+export function collectStyleSources(doc: Document): StyleSource[] {
+  const sources: StyleSource[] = [];
+  const seen = new Set<CSSStyleSheet>();
+  const ours = ownSheets(doc);
+  const list = [...Array.from(doc.styleSheets), ...(doc.adoptedStyleSheets ?? [])];
+  list.forEach((sheet, index) => {
+    if (!(sheet instanceof CSSStyleSheet) || sheet.disabled || ours.has(sheet)) return;
+    const text = sheetText(sheet, seen);
+    let length = 0;
+    try {
+      length = sheet.cssRules.length;
+    } catch {
+      length = -1;
+    }
+    sources.push({
+      key: `${sheet.href ?? `inline:${index}`}#${length}`,
+      ownHref: sheet.href ?? doc.baseURI,
+      text,
+      href: sheet.href,
+    });
+  });
+  return sources;
+}
+
+let styleCache: { key: string; text: Promise<string> } | null = null;
+
+/** Every page style as one block of CSS with assets embedded. Cached; refreshed when a sheet is added or grows. */
+export function pageStyleText(doc: Document = document): Promise<string> {
+  const sources = collectStyleSources(doc);
+  const key = sources.map((source) => source.key).join("|");
+  if (styleCache?.key === key) return styleCache.text;
+  const text = (async () => {
+    const parts = await Promise.all(
+      sources.map(async (source) => {
+        let css = source.text;
+        if (css === null && source.href) {
+          // Cross-origin sheet: the browser hides its rules, the network has them.
+          const data = await assetDataUrl(source.href, ASSET_TIMEOUT_MS * 2);
+          if (!data) return "";
+          try {
+            css = await (await fetch(data)).text();
+          } catch {
+            return "";
+          }
+        }
+        if (!css) return "";
+        return inlineCssUrls(css, source.ownHref);
+      }),
+    );
+    return parts.join("\n");
+  })();
+  styleCache = { key, text };
+  return text;
+}
+
+/** Fetches fonts and CSS assets now, so the first capture pays nothing on the network. */
+export function prewarmPageImage(doc: Document = document) {
+  void pageStyleText(doc).catch(() => {});
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * Clone: a native deep copy, then one pass that drops what the image doesn't need and copies live state.
+ * ---------------------------------------------------------------------------------------------- */
+
+function intersects(rect: DOMRect, viewport: Viewport) {
+  return (
+    rect.bottom > 0 && rect.top < viewport.height && rect.right > 0 && rect.left < viewport.width
+  );
+}
+
+function underExcluded(element: Element, exclude: (element: Element) => boolean): boolean {
+  for (let node: Element | null = element; node; node = node.parentElement) {
+    if (exclude(node)) return true;
+  }
+  return false;
+}
+
+/**
+ * The elements that paint inside the viewport, plus every ancestor of one. Elements without a box
+ * (`display: none`, `<option>`, SVG `<defs>`, `display: contents` wrappers) are not listed.
+ */
+export function visibleSet(
+  root: Element,
+  viewport: Viewport,
+  exclude: (element: Element) => boolean = () => false,
+): Set<Element> {
+  const keep = new Set<Element>([root]);
+  const all = root.querySelectorAll("*");
+  for (let index = 0; index < all.length; index += 1) {
+    const element = all[index]!;
+    // The toolbar is excluded from the picture. Measuring it forces layout on every open comment.
+    if (underExcluded(element, exclude)) continue;
+    if (
+      element.getClientRects().length === 0 ||
+      !intersects(element.getBoundingClientRect(), viewport)
+    )
+      continue;
+    for (let node: Element | null = element; node && !keep.has(node); node = node.parentElement)
+      keep.add(node);
+  }
+  return keep;
+}
+
+/**
+ * True for a `display: none` subtree (a closed menu, a dialog): it takes no space, so dropping it moves nothing.
+ * Offscreen elements with a box stay. Removing the rows above a scrolled-to spot pulls the content below them up,
+ * and the scroll offset applied afterwards then shifts that content out of the picture.
+ */
+function prunable(element: Element, view: Window): boolean {
+  if (element.getClientRects().length > 0) return false;
+  return element.firstElementChild !== null && view.getComputedStyle(element).display === "none";
+}
+
+/** Gives `cloned` the box `source` has on screen, whatever its pixels do inside the image. */
+function sizeLike(source: Element, cloned: Element) {
+  if (!(source instanceof HTMLElement) || !(cloned instanceof HTMLElement)) return;
+  cloned.style.setProperty("box-sizing", "border-box", "important");
+  cloned.style.setProperty("width", `${source.offsetWidth}px`, "important");
+  cloned.style.setProperty("height", `${source.offsetHeight}px`, "important");
+}
+
+/** Holds an element's place with a transparent pixel of the same size instead of fetching anything. */
+function placeholdImage(source: HTMLElement, cloned: HTMLElement) {
+  cloned.removeAttribute("srcset");
+  cloned.removeAttribute("sizes");
+  cloned.setAttribute("src", TRANSPARENT_PIXEL);
+  sizeLike(source, cloned);
+}
+
+function px(value: string) {
+  const number = parseFloat(value);
+  return Number.isFinite(number) ? number : 0;
+}
+
+function none(value: string | undefined) {
+  return !value || value === "none" || value === "normal";
+}
+
+/** `element`'s scroll offset; the root's is the window's, which `html.scrollTop` does not always report. */
+function scrollOf(element: Element, root: Element, rootScroll: Scroll): Scroll {
+  return element === root ? rootScroll : { left: element.scrollLeft, top: element.scrollTop };
+}
+
+/**
+ * Moves `cloned` by its parent's scroll offset, in front of whatever transform it already has: a scrolled
+ * element's children are translated rather than the element scrolled, which an image can't be. `own` is the
+ * element's own transform (its computed one, so one that comes from a class survives the inline override).
+ */
+function shiftByScroll(
+  cloned: Element,
+  scroll: Scroll,
+  own: { transform: string; origin: string },
+  shifted?: WeakSet<Element>,
+) {
+  if (!scroll.top && !scroll.left) return;
+  if (!(cloned instanceof HTMLElement) && !(cloned instanceof SVGElement)) return;
+  const keep = none(own.transform) ? "" : ` ${own.transform}`;
+  cloned.style.transform = `translate(${-scroll.left}px, ${-scroll.top}px)${keep}`;
+  if (keep) cloned.style.transformOrigin = own.origin;
+  shifted?.add(cloned);
+}
+
+/** The transform `source` has on screen, read for `shiftByScroll`. */
+function ownTransform(source: Element, view: Window) {
+  const style = view.getComputedStyle(source);
+  return { transform: style.transform, origin: style.transformOrigin };
+}
+
+function controlIsSensitive(
+  source: { readonly id: string; getAttribute(name: string): string | null },
+  type: string,
+) {
+  return fieldIsSensitive({
+    type,
+    name: source.getAttribute("name") ?? "",
+    id: source.id,
+    autocomplete: source.getAttribute("autocomplete") ?? "",
+    label: source.getAttribute("aria-label") ?? source.getAttribute("placeholder") ?? "",
+  });
+}
+
+function copyFormState(source: Element, cloned: Element) {
+  if (source instanceof HTMLInputElement && cloned instanceof HTMLInputElement) {
+    if (source.type === "checkbox" || source.type === "radio") {
+      if (source.checked) cloned.setAttribute("checked", "");
+      else cloned.removeAttribute("checked");
+      return;
+    }
+    if (source.type === "file" || controlIsSensitive(source, source.type)) {
+      cloned.removeAttribute("value");
+      return;
+    }
+    cloned.setAttribute("value", source.value);
+    return;
+  }
+  if (source instanceof HTMLTextAreaElement && cloned instanceof HTMLTextAreaElement) {
+    cloned.textContent = controlIsSensitive(source, "textarea") ? "" : source.value;
+    return;
+  }
+  if (source instanceof HTMLSelectElement && cloned instanceof HTMLSelectElement) {
+    if (controlIsSensitive(source, "select")) {
+      for (const option of cloned.options) option.removeAttribute("selected");
+      return;
+    }
+    Array.from(cloned.options).forEach((option, index) => {
+      if (index === source.selectedIndex) option.setAttribute("selected", "");
+      else option.removeAttribute("selected");
+    });
+  }
+}
+
+function scrubAttributes(cloned: Element) {
+  for (const name of cloned.getAttributeNames()) {
+    if (!XML_ATTRIBUTE.test(name)) cloned.removeAttribute(name);
+  }
+}
+
+/**
+ * Inherited colours that follow `color` unless a page says otherwise. Their computed value is a plain colour,
+ * and written inline that colour would be inherited as it stands: a link inside the element would be filled
+ * with the element's colour instead of its own.
+ */
+const FOLLOWS_COLOR = new Set([
+  "-webkit-text-fill-color",
+  "-webkit-text-stroke-color",
+  "text-emphasis-color",
+  "caret-color",
+]);
+
+/** `element`'s computed style as an inline declaration list. Custom properties are already resolved into it. */
+function computedStyleText(element: Element, view: Window, pseudo?: string) {
+  const computed = view.getComputedStyle(element, pseudo);
+  const colour = computed.getPropertyValue("color");
+  let text = "";
+  for (let index = 0; index < computed.length; index += 1) {
+    const name = computed[index]!;
+    if (name.startsWith("--")) continue;
+    const value = computed.getPropertyValue(name);
+    text += `${name}:${FOLLOWS_COLOR.has(name) && value === colour ? "currentcolor" : value};`;
+  }
+  return text;
+}
+
+/**
+ * Gives `cloned` the look `source` has on screen as inline style, under whatever inline style it already
+ * carries. For an element whose rules can no longer reach it: one that stands in under another tag, one whose
+ * rules live in a shadow tree, one moved to another place in the tree.
+ */
+function carryComputedStyle(source: Element, cloned: Element, view: Window) {
+  const own = cloned.getAttribute("style");
+  cloned.setAttribute("style", `${computedStyleText(source, view)}${own ?? ""}`);
+}
+
+function embedImage(source: HTMLImageElement, cloned: HTMLImageElement, waits: Promise<unknown>[]) {
+  cloned.removeAttribute("srcset");
+  cloned.removeAttribute("sizes");
+  cloned.removeAttribute("loading");
+  cloned.removeAttribute("decoding");
+  // The box is fixed before the pixels arrive: an image that can't be fetched in time, or at all, must not
+  // collapse to the transparent pixel and pull everything below it up.
+  sizeLike(source, cloned);
+  const url = source.currentSrc || source.src;
+  if (!url || url.startsWith("data:")) return;
+  cloned.src = TRANSPARENT_PIXEL;
+  waits.push(
+    assetDataUrl(url).then((data) => {
+      if (data) {
+        cloned.src = data;
+        return;
+      }
+      // The page's own copy failed to load too: drawn as the page shows it, broken, with its alt text.
+      if (source.complete && !source.naturalWidth && source.alt) {
+        cloned.src = BROKEN_IMAGE;
+        return;
+      }
+      // Not fetchable (cross-origin without CORS): the decoded pixels may still be readable.
+      try {
+        if (!source.complete || !source.naturalWidth) return;
+        const canvas = document.createElement("canvas");
+        canvas.width = source.naturalWidth;
+        canvas.height = source.naturalHeight;
+        canvas.getContext("2d")?.drawImage(source, 0, 0);
+        cloned.src = canvas.toDataURL("image/png");
+      } catch {
+        // Tainted canvas: the image stays transparent.
+      }
+    }),
+  );
+}
+
+/** `style="background-image: url(...)"` and friends: the image can't load those, so they're embedded too. */
+function embedInlineStyleUrls(cloned: Element, waits: Promise<unknown>[]) {
+  const inline = cloned.getAttribute("style");
+  if (!inline || !inline.includes("url(")) return;
+  waits.push(
+    inlineCssUrls(inline, cloned.ownerDocument.baseURI).then((next) => {
+      if (next !== inline) cloned.setAttribute("style", next);
+    }),
+  );
+}
+
+/**
+ * Puts an `<img>` carrying `cloned`'s attributes in its place. The page's rules for `source`'s own tag
+ * (`canvas { display: block }`, `iframe { border: 0 }`, a video's `object-fit: contain`) do not match an
+ * `<img>`, so the stand-in carries the look `source` has on screen.
+ */
+function swapForImage(source: Element, cloned: Element, view: Window): HTMLImageElement {
+  const image = cloned.ownerDocument.createElement("img");
+  for (const name of cloned.getAttributeNames()) {
+    const value = cloned.getAttribute(name);
+    if (value !== null) image.setAttribute(name, value);
+  }
+  carryComputedStyle(source, image, view);
+  cloned.replaceWith(image);
+  return image;
+}
+
+function embedCanvas(source: HTMLCanvasElement, cloned: HTMLCanvasElement, view: Window) {
+  const image = swapForImage(source, cloned, view);
+  try {
+    image.src = source.toDataURL("image/png");
+  } catch {
+    image.src = TRANSPARENT_PIXEL;
+  }
+  sizeLike(source, image);
+  return image;
+}
+
+/** The frame a video is showing, when its pixels may be read; otherwise a same-size blank. */
+function embedVideo(source: HTMLVideoElement, cloned: HTMLVideoElement, view: Window) {
+  const image = swapForImage(source, cloned, view);
+  image.removeAttribute("src");
+  image.removeAttribute("autoplay");
+  image.src = TRANSPARENT_PIXEL;
+  try {
+    if (source.readyState >= 2 && source.videoWidth) {
+      const canvas = document.createElement("canvas");
+      canvas.width = source.videoWidth;
+      canvas.height = source.videoHeight;
+      canvas.getContext("2d")?.drawImage(source, 0, 0);
+      image.src = canvas.toDataURL("image/png");
+    }
+  } catch {
+    // A cross-origin stream taints the canvas: the box stays blank.
+  }
+  sizeLike(source, image);
+  return image;
+}
+
+function isEmbed(element: Element): element is HTMLElement {
+  return (
+    element instanceof HTMLIFrameElement ||
+    element instanceof HTMLObjectElement ||
+    element instanceof HTMLEmbedElement
+  );
+}
+
+/**
+ * Form values and pixels the markup alone doesn't carry. `cloned` must already be in its tree. Every replaced
+ * element keeps the box it has on screen, so what its pixels do inside the image never moves anything else.
+ * Returns the element that stands for `source` in the copy from here on: `cloned`, or the `<img>` put in its
+ * place.
+ */
+function carryLiveState(
+  source: Element,
+  cloned: Element,
+  visible: boolean,
+  waits: Promise<unknown>[],
+  view: Window,
+): Element {
+  copyFormState(source, cloned);
+  if (!visible && (source instanceof HTMLImageElement || source instanceof HTMLCanvasElement)) {
+    // Fetching or encoding pixels nobody sees would only slow the capture down.
+    const image = cloned instanceof HTMLImageElement ? cloned : swapForImage(source, cloned, view);
+    placeholdImage(source, image);
+    return image;
+  }
+  if (source instanceof HTMLImageElement && cloned instanceof HTMLImageElement) {
+    embedImage(source, cloned, waits);
+    return cloned;
+  }
+  if (source instanceof HTMLCanvasElement && cloned instanceof HTMLCanvasElement)
+    return embedCanvas(source, cloned, view);
+  if (source instanceof HTMLVideoElement && cloned instanceof HTMLVideoElement)
+    return embedVideo(source, cloned, view);
+  if (isEmbed(source)) {
+    // Nothing of a frame or plugin can be drawn; its place is kept so the page around it stays put.
+    const image = swapForImage(source, cloned, view);
+    image.removeAttribute("srcdoc");
+    placeholdImage(source, image);
+    return image;
+  }
+  return cloned;
+}
+
+/**
+ * A custom element that shows something this page cannot read: it has a box, no children of its own and no
+ * shadow root it will hand over (a closed one). Its content can't be drawn, so its place is kept: the rules
+ * that size it (`:host`) are in the closed tree too.
+ */
+function holdOpaqueHost(source: Element, cloned: Element, view: Window) {
+  if (
+    source.shadowRoot ||
+    !source.localName.includes("-") ||
+    source.childNodes.length > 0 ||
+    source.getClientRects().length === 0
+  )
+    return;
+  carryComputedStyle(source, cloned, view);
+  sizeLike(source, cloned);
+}
+
+/**
+ * A classic scrollbar takes room inside the element's box that an image has no scrollbar to fill. The gutter
+ * becomes padding, and overflow is clipped, so the content beside it is laid out at the width it has on screen.
+ * Overlay scrollbars (macOS by default) take no room and change nothing.
+ */
+function reserveScrollbarGutter(source: Element, cloned: Element, style: CSSStyleDeclaration) {
+  if (!(source instanceof HTMLElement) || !(cloned instanceof HTMLElement)) return;
+  const { offsetWidth, offsetHeight, clientWidth, clientHeight } = source;
+  // Inline elements report no client box; there is nothing to measure.
+  if (!clientWidth && !clientHeight) return;
+  const gutterX =
+    offsetWidth - clientWidth - px(style.borderLeftWidth) - px(style.borderRightWidth);
+  const gutterY =
+    offsetHeight - clientHeight - px(style.borderTopWidth) - px(style.borderBottomWidth);
+  if (gutterX < MIN_GUTTER && gutterY < MIN_GUTTER) return;
+  const set = (name: string, value: string) => cloned.style.setProperty(name, value, "important");
+  set("overflow", "hidden");
+  set("box-sizing", "border-box");
+  set("width", `${offsetWidth}px`);
+  set("height", `${offsetHeight}px`);
+  if (gutterX >= MIN_GUTTER) set("padding-right", `${px(style.paddingRight) + gutterX}px`);
+  if (gutterY >= MIN_GUTTER) set("padding-bottom", `${px(style.paddingBottom) + gutterY}px`);
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * Motion: what is animating when the page is copied is drawn at the frame it was on.
+ * ---------------------------------------------------------------------------------------------- */
+
+/** The properties being animated on one element, and on its pseudo-elements (`::before` → names). */
+type Moving = { own: Set<string>; pseudo: Map<string, Set<string>> };
+
+/** Keys of a computed keyframe that are not properties. */
+const KEYFRAME_KEYS = new Set(["offset", "computedOffset", "easing", "composite"]);
+
+/** A keyframe's property key (`backgroundColor`, `cssFloat`, `--token`) as a CSS property name. */
+function cssPropertyName(key: string) {
+  if (key.startsWith("--")) return key;
+  if (key === "cssFloat") return "float";
+  if (key === "cssOffset") return "offset";
+  const name = key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+  return /^(webkit|moz|ms)-/.test(name) ? `-${name}` : name;
+}
+
+/**
+ * Everything animating in `root`'s document right now, by the element it animates: CSS animations and
+ * transitions, script animations, and animations driven by a scroll position. Finished animations that still
+ * hold their last frame are in the list too; they read the same either way.
+ */
+function movingElements(root: Element): Map<Element, Moving> {
+  const found = new Map<Element, Moving>();
+  const doc = root.ownerDocument;
+  if (typeof doc.getAnimations !== "function") return found;
+  for (const animation of doc.getAnimations()) {
+    const effect = animation.effect as KeyframeEffect | null;
+    const target = effect?.target;
+    if (!effect || !target || typeof effect.getKeyframes !== "function") continue;
+    let moving = found.get(target);
+    if (!moving) {
+      moving = { own: new Set(), pseudo: new Map() };
+      found.set(target, moving);
+    }
+    let names = moving.own;
+    if (effect.pseudoElement) {
+      names = moving.pseudo.get(effect.pseudoElement) ?? new Set();
+      moving.pseudo.set(effect.pseudoElement, names);
+    }
+    for (const frame of effect.getKeyframes()) {
+      for (const key of Object.keys(frame)) {
+        if (!KEYFRAME_KEYS.has(key)) names.add(cssPropertyName(key));
+      }
+    }
+  }
+  return found;
+}
+
+/**
+ * Holds `cloned` at the frame `source` is on. Inside the image an animation is settled at its end (see
+ * `SETTLED_MOTION`), a transition is gone and a script animation was never there, so each animated property is
+ * written into the copy with the value it has at this instant. `!important`, because a declaration from an
+ * animation outranks an ordinary one. Returns the rules that do the same for its pseudo-elements.
+ */
+function holdMotion(
+  source: Element,
+  cloned: Element,
+  moving: Moving | undefined,
+  view: Window,
+  shifted: boolean,
+  tag: () => string,
+): string {
+  if (!moving) return "";
+  if (!(cloned instanceof HTMLElement) && !(cloned instanceof SVGElement)) return "";
+  if (moving.own.size) {
+    const computed = view.getComputedStyle(source);
+    for (const name of moving.own) {
+      // The transform written for a scroll offset holds the element's own transform at this instant too.
+      const value =
+        name === "transform" && shifted ? cloned.style.transform : computed.getPropertyValue(name);
+      if (value) cloned.style.setProperty(name, value, "important");
+    }
+  }
+  let rules = "";
+  for (const [pseudo, names] of moving.pseudo) {
+    const computed = view.getComputedStyle(source, pseudo);
+    let declarations = "";
+    for (const name of names) {
+      const value = computed.getPropertyValue(name);
+      if (value) declarations += `${name}:${value}!important;`;
+    }
+    if (!declarations) continue;
+    let id = cloned.getAttribute("data-cs-held");
+    if (!id) {
+      id = tag();
+      cloned.setAttribute("data-cs-held", id);
+    }
+    rules += `[data-cs-held="${id}"]${pseudo}{${declarations}}\n`;
+  }
+  return rules;
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * Pinning: fixed, sticky and top-layer elements are placed where they are on screen.
+ * ---------------------------------------------------------------------------------------------- */
+
+/**
+ * Whether `style` makes its element the containing block of fixed descendants (and so does the clone's copy):
+ * a transform, perspective, filter or backdrop-filter, `will-change` naming one of those, or layout/paint
+ * containment. `container-type` is not one: it stopped implying layout containment, so a `@container`
+ * wrapper leaves fixed descendants anchored to the viewport.
+ */
+function formsContainingBlock(style: CSSStyleDeclaration) {
+  return (
+    !none(style.transform) ||
+    !none(style.translate) ||
+    !none(style.rotate) ||
+    !none(style.scale) ||
+    !none(style.filter) ||
+    !none(style.backdropFilter) ||
+    !none(style.perspective) ||
+    /transform|perspective|filter/.test(style.willChange ?? "") ||
+    /paint|layout|strict|content/.test(style.contain ?? "")
+  );
+}
+
+/** How much of each side of a box is cut off, in CSS pixels. */
+type Inset = { top: number; right: number; bottom: number; left: number };
+
+/**
+ * How a sticky element's pinned copy is built:
+ * - `box`: a copy beside it.
+ * - `cell`: a table cell; its copy goes inside it (see `pinInPlace`).
+ * - `rows`: a table row or row group; its copy is a table of its own with the columns' widths.
+ */
+type PinLayout = "box" | "cell" | "rows";
+
+/**
+ * One element to pin, with everything measured on the live page while it was copied. Placing it later (once
+ * the pictures in it have their pixels) reads nothing from the page: by then the page may have scrolled on.
+ */
+type Pinned = {
+  cloned: Element;
+  kind: "fixed" | "sticky";
+  layout: PinLayout;
+  /** Its box in the viewport, and its layout size. */
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  /** The corner of the box it is positioned from inside the clone, in the viewport. */
+  originTop: number;
+  originLeft: number;
+  /** Its computed `display`. */
+  display: string;
+  /** `cell` and `rows`: its whole computed style, for a copy its own rules no longer reach. */
+  styleText: string | null;
+  /** `cell`: where its content sits in its height (`vertical-align`, as `align-content`). */
+  alignContent: string | null;
+  /** `rows`: the table's border model, and the on-screen size of each cell. */
+  table: { collapse: string; spacing: string } | null;
+  cells: Map<Element, { width: number; height: number }> | null;
+  /** Sticky only: the part hidden by a box it scrolls in, or `hidden` when none of it shows. */
+  clip: Inset | "hidden" | null;
+  /** True when it is the containing block of the fixed boxes inside it. */
+  holdsFixed: boolean;
+  /** In the browser's top layer (a modal dialog, an open popover): drawn over everything else. */
+  topLayer: boolean;
+  /** Top layer only: the computed style of its `::backdrop`, when that paints something. */
+  backdrop: string | null;
+  /** True when nothing follows it in its parent. */
+  last: boolean;
+  /**
+   * True when it paints over its siblings only because it is positioned (no z-index of its own) and those
+   * siblings are translated in the clone for their parent's scroll offset. A translated box paints with the
+   * positioned ones, in document order, so the rows after a sticky heading would be drawn on top of it.
+   */
+  raised: boolean;
+};
+
+/** Highest z-index there is: what stands in for the top layer inside the image. */
+const TOP_LAYER_Z = "2147483647";
+/**
+ * Hidden, empty siblings put after a sticky element's pinned copy, so the two of them count as a multiple of
+ * 2, 3, 4, 5 and 6: rows after them keep their place in `:nth-child` patterns (stripes, every third card).
+ */
+const SIBLING_PADDING = 59;
+
+function clipsOverflow(value: string) {
+  return (
+    value === "hidden" ||
+    value === "auto" ||
+    value === "scroll" ||
+    value === "clip" ||
+    value === "overlay"
+  );
+}
+
+function inTopLayer(element: Element) {
+  return matchesState(element, ":modal") || matchesState(element, ":popover-open");
+}
+
+/**
+ * The children of scrolled elements that must be moved for the scroll offset without a transform, because a box
+ * fixed to the window sits somewhere inside them. A translated box is what the fixed boxes inside it are
+ * positioned from, and whatever clips that box clips them: a banner, a toast or a modal written inside a
+ * column that scrolls would be cut off at the column's edges. The window's own scroll is left as it is: the
+ * viewport clips everything anyway.
+ */
+function unanchoredChildren(
+  keep: ReadonlySet<Element>,
+  root: Element,
+  rootScroll: Scroll,
+  view: Window,
+): Set<Element> {
+  const found = new Set<Element>();
+  for (const element of keep) {
+    if (element === root || !(element instanceof HTMLElement)) continue;
+    const top = inTopLayer(element);
+    if (!top && view.getComputedStyle(element).position !== "fixed") continue;
+    const path: Element[] = [];
+    let anchored = false;
+    for (
+      let node = element.parentElement;
+      node && node !== root && node.parentElement !== root;
+      node = node.parentElement
+    ) {
+      // A transformed ancestor is what it is fixed to on the page too. The top layer answers to no ancestor.
+      if (!top && formsContainingBlock(view.getComputedStyle(node))) {
+        anchored = true;
+        break;
+      }
+      const scroll = scrollOf(node.parentElement!, root, rootScroll);
+      if (scroll.top || scroll.left) path.push(node);
+    }
+    if (!anchored) for (const node of path) found.add(node);
+  }
+  return found;
+}
+
+/**
+ * Moves `cloned` by its parent's scroll offset as a relatively positioned box. True when that could be done:
+ * a box that is already absolutely positioned, fixed or sticky can only be moved with a transform.
+ */
+function shiftInFlow(source: Element, cloned: Element, scroll: Scroll, view: Window) {
+  if (!(cloned instanceof HTMLElement)) return false;
+  const style = view.getComputedStyle(source);
+  const position = style.position || "static";
+  if (position !== "static" && position !== "relative") return false;
+  const relative = position === "relative";
+  const set = (name: string, value: string) => cloned.style.setProperty(name, value, "important");
+  set("position", "relative");
+  set("top", `${(relative ? px(style.top) : 0) - scroll.top}px`);
+  set("left", `${(relative ? px(style.left) : 0) - scroll.left}px`);
+  set("right", "auto");
+  set("bottom", "auto");
+  return true;
+}
+
+function matchesState(element: Element, selector: string) {
+  try {
+    return element.matches(selector);
+  } catch {
+    // A browser that does not know the pseudo-class has nothing in that state.
+    return false;
+  }
+}
+
+/**
+ * Where a `position: fixed` box inside the clone is measured from: the nearest ancestor the clone translates (a
+ * scrolled element's child) or that forms a containing block on the live page too, else the viewport (null).
+ * `from` is the live counterpart of the box's parent in the clone, the first ancestor considered.
+ * `unanchored` are the scrolled elements' children the clone moves without a transform (`unanchoredChildren`).
+ */
+function containingBlockInClone(
+  from: Element | null,
+  root: Element,
+  rootScroll: Scroll,
+  view: Window,
+  unanchored: ReadonlySet<Element>,
+): Element | null {
+  for (let node = from; node && node !== root; node = node.parentElement) {
+    const parent = node.parentElement;
+    if (parent && !unanchored.has(node)) {
+      const scroll = scrollOf(parent, root, rootScroll);
+      if (scroll.top || scroll.left) return node;
+    }
+    if (formsContainingBlock(view.getComputedStyle(node))) return node;
+  }
+  return null;
+}
+
+/**
+ * The part of a sticky element that the boxes it scrolls in hide. On the page those boxes clip it; its pinned
+ * copy is positioned from `block` (or the viewport), which no box between the two clips any more, so a heading
+ * scrolled out of an inner panel would be drawn on top of whatever is beside the panel.
+ */
+function hiddenPart(
+  source: Element,
+  rect: DOMRect,
+  block: Element | null,
+  root: Element,
+  view: Window,
+): Inset | "hidden" | null {
+  let top = -Infinity;
+  let left = -Infinity;
+  let right = Infinity;
+  let bottom = Infinity;
+  for (
+    let node = source.parentElement;
+    node && node !== block && node !== root;
+    node = node.parentElement
+  ) {
+    const style = view.getComputedStyle(node);
+    const clipsX = clipsOverflow(style.overflowX);
+    const clipsY = clipsOverflow(style.overflowY);
+    if (!clipsX && !clipsY) continue;
+    const box = node.getBoundingClientRect();
+    const edgeLeft = box.left + node.clientLeft;
+    const edgeTop = box.top + node.clientTop;
+    if (clipsX) {
+      left = Math.max(left, edgeLeft);
+      right = Math.min(right, edgeLeft + node.clientWidth);
+    }
+    if (clipsY) {
+      top = Math.max(top, edgeTop);
+      bottom = Math.min(bottom, edgeTop + node.clientHeight);
+    }
+  }
+  const inset = {
+    top: Math.max(0, top - rect.top),
+    right: Math.max(0, rect.right - right),
+    bottom: Math.max(0, rect.bottom - bottom),
+    left: Math.max(0, left - rect.left),
+  };
+  if (!inset.top && !inset.right && !inset.bottom && !inset.left) return null;
+  if (inset.top + inset.bottom >= rect.height || inset.left + inset.right >= rect.width)
+    return "hidden";
+  return inset;
+}
+
+function parentIsScrolled(source: Element, root: Element, rootScroll: Scroll) {
+  const parent = source.parentElement;
+  if (!parent) return false;
+  const scroll = scrollOf(parent, root, rootScroll);
+  return Boolean(scroll.top || scroll.left);
+}
+
+/** A table cell's `vertical-align` as the `align-content` that places a block's content the same way. */
+function alignContentFor(verticalAlign: string) {
+  if (verticalAlign === "middle") return "center";
+  if (verticalAlign === "bottom") return "end";
+  return "start";
+}
+
+/** Whether a `::backdrop` with this computed style paints anything. */
+function paints(style: CSSStyleDeclaration) {
+  if (style.display === "none") return false;
+  const colour = style.backgroundColor;
+  const clear = !colour || colour === "transparent" || /,\s*0\)$/.test(colour);
+  return !clear || !none(style.backgroundImage) || !none(style.backdropFilter);
+}
+
+/** Measures `source` for pinning. Called while the page is copied; reads the live page, changes nothing. */
+function measurePinned(
+  source: HTMLElement,
+  cloned: Element,
+  style: CSSStyleDeclaration,
+  topLayer: boolean,
+  root: Element,
+  rootScroll: Scroll,
+  view: Window,
+  unanchored: ReadonlySet<Element>,
+): Pinned {
+  const kind = style.position === "sticky" && !topLayer ? "sticky" : "fixed";
+  const display = style.display;
+  const layout: PinLayout =
+    kind !== "sticky"
+      ? "box"
+      : display === "table-cell"
+        ? "cell"
+        : /^table-(row|row-group|header-group|footer-group)$/.test(display)
+          ? "rows"
+          : "box";
+  const rect = source.getBoundingClientRect();
+  // A cell's copy goes inside the cell, so the cell is the first box it could be positioned from.
+  const block = containingBlockInClone(
+    layout === "cell" ? source : source.parentElement,
+    root,
+    rootScroll,
+    view,
+    unanchored,
+  );
+  let originTop = 0;
+  let originLeft = 0;
+  if (block) {
+    const box = block.getBoundingClientRect();
+    const blockStyle = view.getComputedStyle(block);
+    originTop = box.top + px(blockStyle.borderTopWidth);
+    originLeft = box.left + px(blockStyle.borderLeftWidth);
+  }
+  let table: Pinned["table"] = null;
+  let cells: Pinned["cells"] = null;
+  if (layout === "rows") {
+    const owner = source.closest("table");
+    const tableStyle = owner ? view.getComputedStyle(owner) : null;
+    table = {
+      collapse: tableStyle?.borderCollapse || "separate",
+      spacing: tableStyle?.borderSpacing || "0px",
+    };
+    cells = new Map();
+    for (const cell of source.querySelectorAll("td, th")) {
+      if (cell.closest("table") !== owner) continue;
+      const box = cell.getBoundingClientRect();
+      cells.set(cell, { width: box.width, height: box.height });
+    }
+  }
+  let backdrop: string | null = null;
+  if (topLayer && paints(view.getComputedStyle(source, "::backdrop")))
+    backdrop = computedStyleText(source, view, "::backdrop");
+  return {
+    cloned,
+    kind,
+    layout,
+    top: rect.top,
+    left: rect.left,
+    width: source.offsetWidth,
+    height: source.offsetHeight,
+    originTop,
+    originLeft,
+    display,
+    styleText: layout === "box" ? null : computedStyleText(source, view),
+    alignContent: layout === "cell" ? alignContentFor(style.verticalAlign) : null,
+    table,
+    cells,
+    clip: kind === "sticky" ? hiddenPart(source, rect, block, root, view) : null,
+    holdsFixed: formsContainingBlock(style),
+    topLayer,
+    backdrop,
+    last: source.nextElementSibling === null,
+    raised:
+      style.zIndex === "auto" && layout !== "cell" && parentIsScrolled(source, root, rootScroll),
+  };
+}
+
+/**
+ * Pins `cloned` at the box its element had on screen. A fixed element's clone sits inside whatever the clone
+ * translated for scrolling, which would carry it along; a sticky element's clone sits where it would be unstuck.
+ * Both are placed from their viewport box, measured against the box they're positioned from in the clone.
+ */
+function pinAtViewportBox(item: Pinned, cloned: Element) {
+  if (!(cloned instanceof HTMLElement)) return;
+  const set = (name: string, value: string) => cloned.style.setProperty(name, value, "important");
+  set("position", "fixed");
+  set("top", `${item.top - item.originTop}px`);
+  set("left", `${item.left - item.originLeft}px`);
+  set("right", "auto");
+  set("bottom", "auto");
+  set("margin", "0");
+  set("transform", "none");
+  set("translate", "none");
+  set("box-sizing", "border-box");
+  set("width", `${item.width}px`);
+  set("height", `${item.height}px`);
+  set("max-width", "none");
+  set("max-height", "none");
+  set("min-width", "0");
+  set("min-height", "0");
+  // Without its transform it would stop being what the fixed boxes inside it are positioned from.
+  if (item.holdsFixed) set("will-change", "transform");
+  if (item.clip && item.clip !== "hidden") {
+    const { top, right, bottom, left } = item.clip;
+    set("clip-path", `inset(${top}px ${right}px ${bottom}px ${left}px)`);
+  }
+  if (item.raised) set("z-index", "1");
+  if (item.topLayer) {
+    // An open popover is only displayed while it is in the top layer, which the image does not have.
+    set("display", item.display);
+    set("z-index", TOP_LAYER_Z);
+  }
+}
+
+/** The backdrop of a top-layer element, as a box of its own under it: the whole viewport, behind `cloned`. */
+function drawBackdrop(item: Pinned, cloned: Element, viewport: Viewport) {
+  if (!item.backdrop || !cloned.parentNode) return;
+  const backdrop = cloned.ownerDocument.createElement("div");
+  backdrop.setAttribute(
+    "style",
+    `${item.backdrop}display:block!important;position:fixed!important;` +
+      `top:${-item.originTop}px!important;left:${-item.originLeft}px!important;` +
+      `right:auto!important;bottom:auto!important;margin:0!important;transform:none!important;` +
+      `width:${viewport.width}px!important;height:${viewport.height}px!important;` +
+      `z-index:${TOP_LAYER_Z}!important;`,
+  );
+  cloned.parentNode.insertBefore(backdrop, cloned);
+}
+
+/**
+ * The sticky copy of a table row or row group. On its own, out of the table, its cells would shrink to their
+ * text: it is made a table itself, and every cell is given the width and height it has on screen.
+ */
+function shapeRows(item: Pinned, copy: HTMLElement, sources: Map<Element, Element>) {
+  const set = (target: HTMLElement, name: string, value: string) =>
+    target.style.setProperty(name, value, "important");
+  set(copy, "display", "table");
+  set(copy, "table-layout", "fixed");
+  set(copy, "border-collapse", item.table?.collapse ?? "separate");
+  set(copy, "border-spacing", item.table?.spacing ?? "0px");
+  // The copy has the shape of the clone it was made from, which has the shape `sources` knows.
+  const copies = copy.querySelectorAll("*");
+  const originals = item.cloned.querySelectorAll("*");
+  for (let index = 0; index < copies.length; index += 1) {
+    const cell = copies[index];
+    const source = sources.get(originals[index]!);
+    const size = source ? item.cells?.get(source) : undefined;
+    if (!size || !(cell instanceof HTMLElement)) continue;
+    set(cell, "box-sizing", "border-box");
+    set(cell, "width", `${size.width}px`);
+    set(cell, "height", `${size.height}px`);
+  }
+}
+
+/**
+ * Places every pinned element. A sticky element keeps its in-flow copy (made invisible, so siblings keep their
+ * layout) and gets a copy pinned where it is stuck. Run once the clone's pixels are in, so the copy has them.
+ * Innermost first: a sticky bar inside a sticky panel is pinned before the panel is copied, so the panel's copy
+ * holds the bar where it is seen, not where it would be unstuck.
+ *
+ * A sticky table cell's copy goes inside the in-flow cell, not beside it: Chrome gives a positioned `<th>` or
+ * `<td>` that sits in a row a column slot of its own, which shifts every column of the table under it. Nested,
+ * the copy no longer matches selectors such as `tr > th` or `th:first-child`, so it carries the cell's computed
+ * style inline, and the in-flow cell is hidden with `visibility`, which the copy can turn back on (`opacity`
+ * would fade it too).
+ */
+function pinInPlace(pinned: Pinned[], viewport: Viewport, sources: Map<Element, Element>) {
+  for (let index = pinned.length - 1; index >= 0; index -= 1) {
+    const item = pinned[index]!;
+    const { cloned } = item;
+    if (!(cloned instanceof HTMLElement)) continue;
+    if (item.kind === "fixed") {
+      pinAtViewportBox(item, cloned);
+      if (item.topLayer) drawBackdrop(item, cloned, viewport);
+      continue;
+    }
+    if (item.clip === "hidden") {
+      // Stuck out of sight: left where it would be unstuck, it could show there instead.
+      cloned.style.setProperty("visibility", "hidden", "important");
+      continue;
+    }
+    const copy = cloned.cloneNode(true) as HTMLElement;
+    if (item.layout === "cell") {
+      copy.setAttribute("style", item.styleText ?? "");
+      cloned.style.setProperty("visibility", "hidden", "important");
+      cloned.appendChild(copy);
+      pinAtViewportBox(item, copy);
+      copy.style.setProperty("visibility", "visible", "important");
+      // Out of its row the copy is a block, whose content starts at the top whatever `vertical-align` says.
+      copy.style.setProperty("align-content", item.alignContent ?? "start", "important");
+      continue;
+    }
+    cloned.style.setProperty("opacity", "0", "important");
+    if (item.layout === "rows") {
+      copy.setAttribute("style", `${item.styleText ?? ""}${copy.getAttribute("style") ?? ""}`);
+      shapeRows(item, copy, sources);
+    }
+    const parent = cloned.parentNode;
+    if (!parent) continue;
+    // After the element, unless it is the last one: there it goes before, so the element stays `:last-child`.
+    const before = item.last ? cloned : cloned.nextSibling;
+    // `insertBefore`, not `after`: the workspace type-checks this file with the Workers types, whose Element differs.
+    parent.insertBefore(copy, before);
+    for (let count = 0; count < SIBLING_PADDING; count += 1) {
+      const padding = cloned.cloneNode(false) as HTMLElement;
+      padding.removeAttribute("id");
+      padding.setAttribute("style", "display:none!important");
+      parent.insertBefore(padding, before);
+    }
+    pinAtViewportBox(item, copy);
+  }
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * The walk: the copy and the live page side by side, once.
+ * ---------------------------------------------------------------------------------------------- */
+
+/** What one copy of the page carries through its walk. */
+type CloneWork = {
+  exclude: (element: Element) => boolean;
+  view: Window;
+  waits: Promise<unknown>[];
+  moving: Map<Element, Moving>;
+  /** Rules for what inline style can't say (a held pseudo-element), added after the page's own. */
+  rules: string[];
+  held: number;
+  /** Copies whose inline transform is the scroll offset of their parent, in front of their own. */
+  shifted: WeakSet<Element>;
+  /** Children of scrolled elements moved without a transform (see `unanchoredChildren`). */
+  unanchored: Set<Element>;
+};
+
+function hold(source: Element, cloned: Element, work: CloneWork) {
+  const moving = work.moving.get(source);
+  if (!moving) return;
+  const rules = holdMotion(source, cloned, moving, work.view, work.shifted.has(cloned), () => {
+    work.held += 1;
+    return String(work.held);
+  });
+  if (rules) work.rules.push(rules);
+}
+
+/**
+ * Copies the flattened shadow tree under `parent` (slots replaced by what is assigned to them) into `into`.
+ *
+ * The image is one flat document, so a shadow root's own sheets can't stay scoped to it: a widget's `<style>`
+ * copied out of its shadow root restyles the whole page (React Grab's Tailwind build overrode a host app's
+ * `md:` utilities and theme colors). The sheets are left behind and each element carries its computed style
+ * inline instead. Shadow trees are small widgets, so reading every computed style here stays cheap.
+ * `::before`/`::after` content inside a shadow tree is not drawn.
+ */
+function cloneShadowTree(parent: Node, into: Element, work: CloneWork): number {
+  const { exclude, view, waits } = work;
+  let elements = 0;
+  const assigned = parent instanceof HTMLSlotElement ? parent.assignedNodes({ flatten: true }) : [];
+  // A slot with nothing assigned shows its fallback content.
+  const nodes = assigned.length ? assigned : Array.from(parent.childNodes);
+  const inSvg = into.namespaceURI === SVG_NS;
+  for (const node of nodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      into.appendChild(node.cloneNode(false));
+      continue;
+    }
+    if (!(node instanceof Element)) continue;
+    if (node instanceof HTMLSlotElement) {
+      elements += cloneShadowTree(node, into, work);
+      continue;
+    }
+    // Upper-cased so an SVG `<style>` (tagName "style") inside the tree is left behind too.
+    if (
+      DROPPED.has(node.tagName.toUpperCase()) ||
+      exclude(node) ||
+      (!inSvg && prunable(node, view))
+    )
+      continue;
+    const cloned = node.cloneNode(false) as Element;
+    scrubAttributes(cloned);
+    cloned.setAttribute("style", computedStyleText(node, view));
+    embedInlineStyleUrls(cloned, waits);
+    into.appendChild(cloned);
+    const scroll = { left: node.scrollLeft, top: node.scrollTop };
+    elements += 1 + cloneShadowTree(node.shadowRoot ?? node, cloned, work);
+    for (const child of Array.from(cloned.children)) {
+      if (child instanceof HTMLElement || child instanceof SVGElement)
+        shiftByScroll(
+          child,
+          scroll,
+          { transform: child.style.transform, origin: child.style.transformOrigin },
+          work.shifted,
+        );
+    }
+    hold(node, cloned, work);
+    carryLiveState(node, cloned, node.getClientRects().length > 0, waits, view);
+  }
+  return elements;
+}
+
+export type ClonedPage = {
+  root: Element;
+  waits: Promise<unknown>[];
+  elements: number;
+  /** Rules that belong after the page's own styles (see `renderSnapshot`). Empty for most pages. */
+  css: string;
+  /** Pins fixed and sticky elements where they are on screen. Call once `waits` have settled; runs once. */
+  finish: () => void;
+};
+
+/**
+ * A copy of `root` ready to serialize: `display: none` subtrees removed, offscreen images held by same-size
+ * placeholders, live form values, scroll offsets, canvases and visible images carried over. `waits` resolve
+ * when every visible image has its pixels. `scroll` is the window's offset, applied to the root's children.
+ *
+ * Everything the copy needs from the live page is read here, in one go. `finish` only rearranges the copy.
+ */
+export function clonePage(
+  root: Element,
+  viewport: Viewport,
+  exclude: (element: Element) => boolean,
+  view: Window = window,
+  scroll: Scroll = { left: view.scrollX, top: view.scrollY },
+): ClonedPage {
+  // The live page is never mutated, not even to hide the toolbar: detaching the subtree that holds the focused
+  // composer blurs it for good, and the next keystroke then lands on <body>, where a letter is a toolbar shortcut.
+  // Excluded subtrees are still never measured or walked; only their copies are dropped, below.
+  const copy = root.cloneNode(true) as Element;
+  const keep = visibleSet(root, viewport, exclude);
+  const waits: Promise<unknown>[] = [];
+  const pinned: Pinned[] = [];
+  /** Each copied element's original, for a pinned copy that needs its cells' sizes. */
+  const sources = new Map<Element, Element>();
+  const work: CloneWork = {
+    exclude,
+    view,
+    waits,
+    moving: movingElements(root),
+    rules: [],
+    held: 0,
+    shifted: new WeakSet(),
+    unanchored: unanchoredChildren(keep, root, scroll, view),
+  };
+  let elements = 0;
+  // Both trees have the same shape, so one stack of (source, clone) pairs walks them in step.
+  const stack: Array<[Element, Element]> = [[root, copy]];
+  while (stack.length) {
+    const [source, cloned] = stack.pop()!;
+    elements += 1;
+    const scrolled = scrollOf(source, root, scroll);
+    if (source.shadowRoot) {
+      // What paints is the shadow tree, not the light children (they show only through its slots). The host's
+      // own `:host` rules live in the sheets left behind, so it carries its computed style too.
+      cloned.replaceChildren();
+      cloned.setAttribute("style", computedStyleText(source, view));
+      elements += cloneShadowTree(source.shadowRoot, cloned, work);
+      for (const child of Array.from(cloned.children)) {
+        if (child instanceof HTMLElement || child instanceof SVGElement)
+          shiftByScroll(
+            child,
+            scrolled,
+            { transform: child.style.transform, origin: child.style.transformOrigin },
+            work.shifted,
+          );
+      }
+    } else {
+      const children = source.children;
+      const clonedChildren = cloned.children;
+      // Inside an <svg> everything stays: defs, symbols and gradients have no box but draw what references them.
+      const inSvg = source.namespaceURI === SVG_NS;
+      for (let index = children.length - 1; index >= 0; index -= 1) {
+        const child = children[index]!;
+        const childClone = clonedChildren[index]!;
+        if (DROPPED.has(child.tagName) || exclude(child) || (!inSvg && prunable(child, view))) {
+          childClone.remove();
+          continue;
+        }
+        if (scrolled.top || scrolled.left) {
+          if (!work.unanchored.has(child) || !shiftInFlow(child, childClone, scrolled, view)) {
+            work.unanchored.delete(child);
+            shiftByScroll(childClone, scrolled, ownTransform(child, view), work.shifted);
+          }
+        }
+        stack.push([child, childClone]);
+      }
+      holdOpaqueHost(source, cloned, view);
+    }
+    scrubAttributes(cloned);
+    embedInlineStyleUrls(cloned, waits);
+    hold(source, cloned, work);
+    const visible = keep.has(source);
+    // From here on `stand` is what the copy has for `source`: its clone, or the picture put in its place.
+    const stand = carryLiveState(source, cloned, visible, waits, view);
+    sources.set(stand, source);
+    if (visible && source !== root && source instanceof HTMLElement) {
+      const style = view.getComputedStyle(source);
+      const topLayer = inTopLayer(source);
+      if (style.position === "fixed" || style.position === "sticky" || topLayer)
+        pinned.push(
+          measurePinned(source, stand, style, topLayer, root, scroll, view, work.unanchored),
+        );
+      reserveScrollbarGutter(source, stand, style);
+    }
+  }
+  let finished = false;
+  return {
+    root: copy,
+    waits,
+    elements,
+    css: work.rules.join(""),
+    finish: () => {
+      if (finished) return;
+      finished = true;
+      pinInPlace(pinned, viewport, sources);
+    },
+  };
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * Assemble and rasterize.
+ * ---------------------------------------------------------------------------------------------- */
+
+/**
+ * The SVG document that draws `clone` with `css` applied, `width`×`height` CSS pixels.
+ *
+ * Inside the image the `<svg>` is the root element, not the cloned `<html>`, so `rem` resolves against the
+ * svg's font size. `rootFontSize` (the live root's computed size) is set on it: a page that scales itself by
+ * a root font size set from an attribute or class on `<html>` would otherwise lay out at the browser default
+ * while fixed and sticky boxes stay pinned at their live, differently scaled coordinates.
+ */
+export function pageSvg(
+  clone: Element,
+  css: string,
+  width: number,
+  height: number,
+  rootFontSize?: string,
+): string {
+  const markup = new XMLSerializer().serializeToString(clone).replace(CONTROL_CHARS, "");
+  const style = `${css}\n${SETTLED_MOTION}\n${NO_SCROLLBARS}`
+    .replace(CONTROL_CHARS, "")
+    .split("]]>")
+    .join("]]]]><![CDATA[>");
+  return (
+    `<svg xmlns="${SVG_NS}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"` +
+    `${rootFontSize ? ` style="font-size:${rootFontSize.replace(/["<>&]/g, "")}"` : ""}>` +
+    `<style><![CDATA[${style}]]></style>` +
+    `<foreignObject x="0" y="0" width="100%" height="100%">${markup}</foreignObject></svg>`
+  );
+}
+
+/**
+ * The root is the viewport: its own box, clipped, never transformed. The window's scroll offset is on its
+ * children (see `shiftByScroll`); a translated root would clip at its own height and lose the part of the page
+ * that scrolled into view, and would re-anchor every fixed element to itself.
+ */
+function rootStyle(
+  clone: Element,
+  options: Required<Pick<PageImageOptions, "width" | "height">> &
+    Pick<PageImageOptions, "backgroundColor"> & {
+      /**
+       * The live root's text colour. A page that leaves it to the browser gets its colour scheme's
+       * (`CanvasText`), which the image resolves without the page's scheme: white text came out black.
+       */
+      color: string;
+    },
+) {
+  if (!(clone instanceof HTMLElement)) return;
+  const style = clone.style;
+  style.setProperty("color", options.color);
+  style.setProperty("width", `${options.width}px`, "important");
+  style.setProperty("height", `${options.height}px`, "important");
+  style.setProperty("overflow", "hidden", "important");
+  style.setProperty("transform", "none", "important");
+  if (options.backgroundColor)
+    style.setProperty("background-color", options.backgroundColor, "important");
+}
+
+async function rasterize(
+  svg: string,
+  width: number,
+  height: number,
+  scale: number,
+  timeout: number,
+) {
+  // A data URL, not a blob URL: Chrome and Safari taint the canvas for a foreignObject SVG drawn from a blob.
+  const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  {
+    const image = new Image();
+    image.decoding = "async";
+    const loaded = new Promise<void>((resolve, reject) => {
+      image.onload = () => resolve();
+      image.onerror = () => reject(new Error("page image failed to load"));
+    });
+    image.src = url;
+    await withTimeout(loaded, timeout, "page image");
+    try {
+      await withTimeout(image.decode(), timeout, "page image decode");
+    } catch {
+      // Some browsers can't decode SVG off-thread; drawing still works once loaded.
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(width * scale));
+    canvas.height = Math.max(1, Math.round(height * scale));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("no 2d context");
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return canvas;
+  }
+}
+
+/** The page copied at one instant, with everything a later render needs. */
+export type PageSnapshot = {
+  page: ClonedPage;
+  css: Promise<string>;
+  width: number;
+  height: number;
+  /** The live root's computed font size, which `rem` resolves against inside the image too. */
+  rootFontSize: string;
+  backgroundColor?: string | undefined;
+};
+
+/**
+ * Copies the visible page now, synchronously, so the picture shows the page exactly as it was at this moment
+ * however long drawing it then takes. Rendering is `renderSnapshot`.
+ */
+export function snapshotPage(options: Omit<PageImageOptions, "scale" | "timeout">): PageSnapshot {
+  const width = options.width ?? document.documentElement.clientWidth;
+  const height = options.height ?? window.innerHeight;
+  const scroll = {
+    left: options.scrollX ?? window.scrollX,
+    top: options.scrollY ?? window.scrollY,
+  };
+  const exclude = options.exclude ?? (() => false);
+  const css = pageStyleText();
+  const page = clonePage(document.documentElement, { width, height }, exclude, window, scroll);
+  const live = window.getComputedStyle(document.documentElement);
+  rootStyle(page.root, {
+    width,
+    height,
+    backgroundColor: options.backgroundColor,
+    color: live.color,
+  });
+  const rootFontSize = live.fontSize;
+  return { page, css, width, height, rootFontSize, backgroundColor: options.backgroundColor };
+}
+
+/** Draws a snapshot onto a canvas at `scale` device pixels per CSS pixel. Throws when it can't be done in time. */
+export async function renderSnapshot(
+  snapshot: PageSnapshot,
+  scale: number,
+  timeout = 6000,
+): Promise<HTMLCanvasElement> {
+  const started = performance.now();
+  const { page, width, height, rootFontSize } = snapshot;
+  const remaining = () => Math.max(250, timeout - (performance.now() - started));
+  const css = await withTimeout(snapshot.css, remaining(), "page styles");
+  await withTimeout(Promise.allSettled(page.waits), remaining(), "page images");
+  page.finish();
+  // The copy's own rules go after the page's, so that between equals they win.
+  const svg = pageSvg(
+    page.root,
+    page.css ? `${css}\n${page.css}` : css,
+    width,
+    height,
+    rootFontSize,
+  );
+  return rasterize(svg, width, height, scale, remaining());
+}
+
+/** The visible page as a canvas. Throws when the page can't be drawn in time. */
+export async function drawPage(options: PageImageOptions): Promise<HTMLCanvasElement> {
+  return renderSnapshot(snapshotPage(options), options.scale, options.timeout);
+}