fauna-api 0.0.0-stage → 1.0.676

package/dist/src/marmot/web.js

@@ -0,0 +1,2586 @@
+/**
+ * Marmot-owned live web-room client: DOM capture/replay, HTTP bootstrap/assets,
+ * and the WebRoom socket. Transport-agnostic capture plus the fauna share
+ * routes (`/extensions/web/live`, `/bootstrap`, `/asset`). Session orchestration
+ * (startWebShare, invite, chat pairing) stays in extensions/web.
+ */
+import { Room, Presence, connect } from "../shared/server.js";
+import { Marmot } from "./index.js";
+// Attributes we never ship: they either leak host-local state or would break
+// the viewer's isolated rendering (scripts, event handlers, live media).
+const BLOCKED_ATTR_PREFIXES = ["on"];
+const BLOCKED_TAGS = new Set(["SCRIPT", "NOSCRIPT"]);
+/** Placeholder scheme rewritten into guest blob: URLs after asset download. */
+export const WEB_ASSET_SCHEME = "fauna-web-asset:";
+const MEDIA_SRC_TAGS = new Set(["IMG", "SOURCE", "VIDEO", "AUDIO", "TRACK", "EMBED", "INPUT"]);
+const MEDIA_HREF_TAGS = new Set(["IMAGE", "USE"]); // SVG; not <a> / generic links
+const EXTENSION_ROOT_ID = "fauna-extension-root";
+let mediaFetcher = null;
+/** Install a privileged media fetcher (e.g. chrome.runtime fetch-bytes). */
+export function setMediaFetcher(fetcher) {
+    mediaFetcher = fetcher;
+}
+function isBlockedAttr(name) {
+    return BLOCKED_ATTR_PREFIXES.some((prefix) => name.toLowerCase().startsWith(prefix));
+}
+function considerUrl(raw, into) {
+    if (!raw)
+        return;
+    const trimmed = raw.trim();
+    if (!trimmed || trimmed.startsWith(WEB_ASSET_SCHEME) || trimmed.startsWith("javascript:"))
+        return;
+    if (trimmed.startsWith("#") || trimmed.startsWith("mailto:") || trimmed.startsWith("tel:"))
+        return;
+    if (trimmed.startsWith("blob:"))
+        return;
+    // Leave data: URIs inline. Harvesting them is unnecessary (already self-
+    // contained) and a naive url() regex can truncate SVG data URIs at the
+    // first quote/paren, then rewrite the prefix and leave a base64 tail that
+    // the browser fetches as a relative path → HTTP 431.
+    if (trimmed.startsWith("data:"))
+        return;
+    into.add(trimmed);
+}
+/**
+ * Walk `url(...)` tokens in CSS. Quoted values may contain `)` / quotes that
+ * would break a naive `[^'")]+` character class (common in SVG data URIs).
+ */
+function forEachCssUrlToken(css, visit) {
+    const re = /url\(\s*/gi;
+    let match;
+    while ((match = re.exec(css))) {
+        let i = match.index + match[0].length;
+        if (i >= css.length)
+            break;
+        const first = css[i];
+        if (first === '"' || first === "'") {
+            const quote = first;
+            const begin = i + 1;
+            const closeQuote = css.indexOf(quote, begin);
+            if (closeQuote < 0)
+                break;
+            const closeParen = css.indexOf(")", closeQuote + 1);
+            if (closeParen < 0)
+                break;
+            visit(css.slice(begin, closeQuote), quote, match.index, closeParen + 1);
+            re.lastIndex = closeParen + 1;
+            continue;
+        }
+        const closeParen = css.indexOf(")", i);
+        if (closeParen < 0)
+            break;
+        visit(css.slice(i, closeParen).trim(), "", match.index, closeParen + 1);
+        re.lastIndex = closeParen + 1;
+    }
+}
+/** Pull url(...) and @import targets out of CSS text (preserves @media as-is). */
+export function extractCssUrls(css) {
+    const found = new Set();
+    forEachCssUrlToken(css, (raw) => considerUrl(raw, found));
+    const importRe = /@import\s+(?:url\(\s*(['"]?)([^'")]+)\1\s*\)|(['"])([^'"]+)\3)\s*;?/gi;
+    let match;
+    while ((match = importRe.exec(css))) {
+        considerUrl(match[2] ?? match[4] ?? null, found);
+    }
+    return [...found];
+}
+/** Rewrite url()/ @import targets in CSS using fauna-web-asset codes. */
+export function rewriteCssUrls(css, map) {
+    let out = "";
+    let cursor = 0;
+    forEachCssUrlToken(css, (raw, quote, start, end) => {
+        const trimmed = raw.trim();
+        const code = map.get(trimmed);
+        out += css.slice(cursor, start);
+        if (!code)
+            out += css.slice(start, end);
+        else {
+            const q = quote || "";
+            out += `url(${q}${WEB_ASSET_SCHEME}${code}${q})`;
+        }
+        cursor = end;
+    });
+    out += css.slice(cursor);
+    out = out.replace(/@import\s+(?:url\(\s*(['"]?)([^'")]+)\1\s*\)|(['"])([^'"]+)\3)\s*;?/gi, (all, _q1, u1, _q2, u2) => {
+        const trimmed = (u1 || u2 || "").trim();
+        if (trimmed.startsWith("data:"))
+            return all;
+        const code = map.get(trimmed);
+        if (!code)
+            return all;
+        return `@import url("${WEB_ASSET_SCHEME}${code}");`;
+    });
+    return out;
+}
+/**
+ * Serialize readable document stylesheets as rule text (keeps @media / @supports).
+ * Opaque cross-origin sheets are skipped unless their <style> text is available.
+ */
+export function serializeDocumentStyles(doc = document) {
+    const parts = [];
+    const urls = new Set();
+    for (const sheet of Array.from(doc.styleSheets)) {
+        let css = "";
+        try {
+            const rules = sheet.cssRules;
+            for (const rule of Array.from(rules))
+                css += `${rule.cssText}\n`;
+        }
+        catch {
+            const owner = sheet.ownerNode;
+            if (owner instanceof HTMLStyleElement)
+                css = owner.textContent || "";
+            else
+                continue;
+        }
+        if (!css.trim())
+            continue;
+        for (const u of extractCssUrls(css))
+            urls.add(u);
+        parts.push(css);
+    }
+    return { css: parts.join("\n"), urls: [...urls] };
+}
+function ownerDocOf(el) {
+    return el.ownerDocument || document;
+}
+// Framed documents are inlined into their host page. Their html, head, and body
+// become divs so the viewer's HTML parser keeps the same tree the recorder walks,
+// which keeps synthetic ids aligned across frames.
+const FRAME_TAGS = new Set(["IFRAME", "FRAME", "OBJECT", "EMBED"]);
+const FRAME_SKIP_ATTRS = new Set(["src", "srcdoc", "sandbox", "allow", "data"]);
+const FRAME_PLACEHOLDER_TEXT = "Embedded frame unavailable in share";
+const FRAME_PLACEHOLDER_STYLE = "display:flex;align-items:center;justify-content:center;min-height:48px;"
+    + "background:#f3f3f3;color:#666;font:12px/1.4 system-ui,sans-serif;border:1px dashed #bbb;";
+function frameDocument(el) {
+    try {
+        const nested = el.contentDocument;
+        return nested?.documentElement ? nested : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** `html`, `head`, or `body` when `el` is the root structure of a framed document. */
+function frameRootTag(el) {
+    if (el.ownerDocument === document)
+        return null;
+    const tag = el.tagName.toLowerCase();
+    return tag === "html" || tag === "head" || tag === "body" ? tag : null;
+}
+/**
+ * Deep-serialize an element tree: strip scripts/extension UI, flatten open
+ * shadow roots into light DOM, replace opaque iframes with placeholders.
+ */
+export function deepFreezeClone(source) {
+    const doc = ownerDocOf(source);
+    const cloneNodeDeep = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return doc.createTextNode(node.textContent ?? "");
+        }
+        if (node.nodeType === Node.COMMENT_NODE)
+            return null;
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return null;
+        const el = node;
+        if (el.id === EXTENSION_ROOT_ID || BLOCKED_TAGS.has(el.tagName))
+            return null;
+        if (FRAME_TAGS.has(el.tagName)) {
+            const wrap = doc.createElement("div");
+            for (const attr of Array.from(el.attributes)) {
+                if (isBlockedAttr(attr.name) || FRAME_SKIP_ATTRS.has(attr.name))
+                    continue;
+                try {
+                    wrap.setAttribute(attr.name, attr.value);
+                }
+                catch { /* skip */ }
+            }
+            const nested = frameDocument(el);
+            const frameClone = nested ? cloneNodeDeep(nested.documentElement) : null;
+            if (frameClone instanceof Element) {
+                wrap.setAttribute("data-fauna-iframe", "inlined");
+                wrap.appendChild(frameClone);
+                return wrap;
+            }
+            wrap.setAttribute("data-fauna-iframe", "blocked");
+            wrap.setAttribute("style", FRAME_PLACEHOLDER_STYLE);
+            wrap.appendChild(doc.createTextNode(FRAME_PLACEHOLDER_TEXT));
+            return wrap;
+        }
+        // Drop live stylesheet <link>s — document sheets are injected as frozen
+        // <style data-fauna-sheets>. Keep inline <style> (incl. open shadows).
+        if (el.tagName === "LINK") {
+            const rel = (el.getAttribute("rel") || "").toLowerCase();
+            if (rel.includes("stylesheet"))
+                return null;
+        }
+        const frameRoot = frameRootTag(el);
+        const clone = doc.createElement(frameRoot ? "div" : el.tagName.toLowerCase());
+        for (const attr of Array.from(el.attributes)) {
+            if (isBlockedAttr(attr.name))
+                continue;
+            try {
+                clone.setAttribute(attr.name, attr.value);
+            }
+            catch { /* skip */ }
+        }
+        if (frameRoot) {
+            clone.setAttribute("data-fauna-frame", frameRoot);
+            if (frameRoot === "head")
+                clone.setAttribute("hidden", "");
+        }
+        // A framed document's inputs aren't this window's HTMLInputElement, so go by tag.
+        if (el.tagName === "INPUT" && el.type === "password") {
+            clone.setAttribute("value", "");
+        }
+        else if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
+            try {
+                clone.setAttribute("value", el.value);
+            }
+            catch { /* skip */ }
+        }
+        for (const child of Array.from(el.childNodes)) {
+            const c = cloneNodeDeep(child);
+            if (c)
+                clone.appendChild(c);
+        }
+        const shadow = el.shadowRoot;
+        if (shadow) {
+            const wrap = doc.createElement("div");
+            wrap.setAttribute("data-fauna-shadow", "");
+            for (const child of Array.from(shadow.childNodes)) {
+                const c = cloneNodeDeep(child);
+                if (c)
+                    wrap.appendChild(c);
+            }
+            clone.appendChild(wrap);
+        }
+        return clone;
+    };
+    const cloned = cloneNodeDeep(source);
+    if (!(cloned instanceof Element)) {
+        throw new Error("deepFreezeClone failed to clone root element");
+    }
+    return cloned;
+}
+/** True when this element carries a fetchable page asset (image/media), not a nav link. */
+function isMediaElement(el) {
+    if (MEDIA_SRC_TAGS.has(el.tagName))
+        return true;
+    if (MEDIA_HREF_TAGS.has(el.tagName))
+        return true;
+    if (el.tagName === "LINK") {
+        const rel = (el.getAttribute("rel") || "").toLowerCase();
+        return rel.includes("icon") || rel.includes("preload") || rel.includes("apple-touch-icon");
+    }
+    return false;
+}
+/** Collect absolute/resolvable media URLs from a cleaned element tree. */
+export function collectMediaUrls(root) {
+    const found = new Set();
+    const walk = (el) => {
+        if (isMediaElement(el)) {
+            if (el.hasAttribute("src"))
+                considerUrl(el.getAttribute("src"), found);
+            if (el.hasAttribute("poster"))
+                considerUrl(el.getAttribute("poster"), found);
+            if (el.hasAttribute("href"))
+                considerUrl(el.getAttribute("href"), found);
+            const srcset = el.getAttribute("srcset");
+            if (srcset) {
+                for (const part of srcset.split(",")) {
+                    considerUrl(part.trim().split(/\s+/)[0] ?? null, found);
+                }
+            }
+        }
+        for (const child of Array.from(el.children))
+            walk(child);
+    };
+    walk(root);
+    return [...found];
+}
+/** Rewrite media URLs in-place using `map` (original URL → fauna-web-asset:code). */
+export function rewriteMediaUrls(root, map) {
+    const rewrite = (raw) => {
+        if (!raw)
+            return raw;
+        const trimmed = raw.trim();
+        const code = map.get(trimmed);
+        return code ? `${WEB_ASSET_SCHEME}${code}` : raw;
+    };
+    const walk = (el) => {
+        if (el.tagName === "STYLE" && el.textContent) {
+            el.textContent = rewriteCssUrls(el.textContent, map);
+        }
+        if (isMediaElement(el)) {
+            for (const name of ["src", "poster", "href"]) {
+                if (!el.hasAttribute(name))
+                    continue;
+                const next = rewrite(el.getAttribute(name));
+                if (next !== null)
+                    el.setAttribute(name, next);
+            }
+            const srcset = el.getAttribute("srcset");
+            if (srcset) {
+                const parts = srcset.split(",").map((part) => {
+                    const bits = part.trim().split(/\s+/);
+                    const url = bits[0] ?? "";
+                    const code = map.get(url);
+                    if (!code)
+                        return part.trim();
+                    return [`${WEB_ASSET_SCHEME}${code}`, ...bits.slice(1)].join(" ");
+                });
+                el.setAttribute("srcset", parts.join(", "));
+            }
+        }
+        for (const child of Array.from(el.children))
+            walk(child);
+    };
+    walk(root);
+}
+export function extractAssetCodes(html) {
+    const codes = new Set();
+    const re = /fauna-web-asset:([0-9A-Za-z_-]+)/g;
+    let match;
+    while ((match = re.exec(html)))
+        codes.add(match[1]);
+    return [...codes];
+}
+/** Replace `fauna-web-asset:CODE` markers with blob/object URLs from `blobs`. */
+export function materializeAssetUrls(html, blobs) {
+    return html.replace(/fauna-web-asset:([0-9A-Za-z_-]+)/g, (_all, code) => {
+        return blobs.get(code) ?? _all;
+    });
+}
+/**
+ * Deep-freeze `root` + inject serialized stylesheets. Does not rewrite assets —
+ * call `collectMediaUrls` / `rewriteMediaUrls` (and CSS urls) afterward.
+ */
+export function toHtml(root = document.documentElement) {
+    return pageToHtml(root);
+}
+function decodeDataUrl(url) {
+    const comma = url.indexOf(",");
+    if (comma < 0)
+        return null;
+    const header = url.slice(5, comma);
+    const payload = url.slice(comma + 1);
+    const contentType = header.split(";")[0] || "application/octet-stream";
+    if (header.includes(";base64")) {
+        const bin = atob(payload);
+        const data = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++)
+            data[i] = bin.charCodeAt(i);
+        return { data, contentType };
+    }
+    return { data: new TextEncoder().encode(decodeURIComponent(payload)), contentType };
+}
+/** Best-effort fetch of a media URL — prefers privileged `setMediaFetcher`. */
+export async function fetchMediaBytes(url) {
+    try {
+        if (url.startsWith("data:"))
+            return decodeDataUrl(url);
+        if (mediaFetcher) {
+            const via = await mediaFetcher(url);
+            if (via)
+                return via;
+        }
+        const response = await fetch(url, { credentials: "include", mode: "cors" });
+        if (!response.ok)
+            return null;
+        const contentType = response.headers.get("Content-Type") || "application/octet-stream";
+        return { data: new Uint8Array(await response.arrayBuffer()), contentType };
+    }
+    catch {
+        return null;
+    }
+}
+/** Absolute-resolve a URL against the current page (or a provided base). */
+export function absoluteUrl(url, base) {
+    if (url.startsWith("data:") || url.startsWith("blob:") || url.startsWith(WEB_ASSET_SCHEME))
+        return url;
+    try {
+        return new URL(url, base
+            || (typeof location !== "undefined" ? location.href : "https://localhost/")).href;
+    }
+    catch {
+        return url;
+    }
+}
+/** Collect media + CSS urls from a frozen clone / stylesheet list. */
+export function collectAllAssetUrls(root, cssUrls = []) {
+    const found = new Set(collectMediaUrls(root));
+    for (const u of cssUrls)
+        found.add(u);
+    for (const style of Array.from(root.querySelectorAll("style"))) {
+        for (const u of extractCssUrls(style.textContent || ""))
+            found.add(u);
+    }
+    return [...found];
+}
+/**
+ * Serialize a live DOM subtree into a flat `WebSnapshot`. The recorder tags each
+ * captured node with a synthetic id via a WeakMap so later mutations can
+ * reference nodes by that id without relying on DOM identity crossing the wire.
+ */
+export class DomRecorder {
+    constructor(root = document.documentElement) {
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: root
+        });
+        Object.defineProperty(this, "nextId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1
+        });
+        Object.defineProperty(this, "ids", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
+        Object.defineProperty(this, "observer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "frames", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "onMutation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "detachResize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+    }
+    /**
+     * Reset and DFS-assign synthetic ids on the live tree (same order as
+     * `serializeNode`, descending into framed documents). Call after publishing
+     * HTML bootstrap so mutations align with the guest's `applyHtml` bind.
+     */
+    bindIds() {
+        this.nextId = 1;
+        this.ids = new WeakMap();
+        const walk = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                this.idFor(node);
+                return;
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return;
+            const el = node;
+            if (BLOCKED_TAGS.has(el.tagName))
+                return;
+            this.idFor(node);
+            if (FRAME_TAGS.has(el.tagName)) {
+                const entry = this.watchFrame(el);
+                if (entry.doc)
+                    walk(entry.doc.documentElement);
+                else
+                    entry.placeholder = this.nextId++;
+                return;
+            }
+            for (const child of Array.from(el.childNodes))
+                walk(child);
+        };
+        walk(this.root);
+    }
+    idFor(node) {
+        let id = this.ids.get(node);
+        if (id === undefined) {
+            id = this.nextId++;
+            this.ids.set(node, id);
+        }
+        return id;
+    }
+    serializeNode(node, into) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const id = this.idFor(node);
+            into[id] = { id, kind: "text", text: node.textContent ?? "" };
+            return id;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return null;
+        const el = node;
+        if (BLOCKED_TAGS.has(el.tagName))
+            return null;
+        const id = this.idFor(node);
+        const attributes = {};
+        const frame = FRAME_TAGS.has(el.tagName);
+        for (const attr of Array.from(el.attributes)) {
+            if (isBlockedAttr(attr.name) || (frame && FRAME_SKIP_ATTRS.has(attr.name)))
+                continue;
+            attributes[attr.name] = attr.value;
+        }
+        const children = [];
+        if (frame) {
+            const entry = this.watchFrame(el);
+            children.push(this.serializeFrameContent(entry, into, attributes));
+            into[id] = { id, kind: "element", tag: "div", attributes, children };
+            return id;
+        }
+        for (const child of Array.from(el.childNodes)) {
+            const childId = this.serializeNode(child, into);
+            if (childId !== null)
+                children.push(childId);
+        }
+        const frameRoot = frameRootTag(el);
+        if (frameRoot) {
+            attributes["data-fauna-frame"] = frameRoot;
+            if (frameRoot === "head")
+                attributes.hidden = "";
+        }
+        into[id] = { id, kind: "element", tag: frameRoot ? "div" : el.tagName.toLowerCase(), attributes, children };
+        return id;
+    }
+    /** The one child a frame's wrapper holds: its document root, or a placeholder text. */
+    serializeFrameContent(entry, into, attributes) {
+        if (entry.doc) {
+            attributes["data-fauna-iframe"] = "inlined";
+            return this.serializeNode(entry.doc.documentElement, into);
+        }
+        attributes["data-fauna-iframe"] = "blocked";
+        attributes.style = FRAME_PLACEHOLDER_STYLE;
+        const textId = entry.placeholder ?? this.nextId++;
+        entry.placeholder = textId;
+        into[textId] = { id: textId, kind: "text", text: FRAME_PLACEHOLDER_TEXT };
+        return textId;
+    }
+    /** Track a frame: observe its document and re-inline it when it navigates. */
+    watchFrame(el) {
+        let entry = this.frames.get(el);
+        if (!entry) {
+            const created = { doc: null, placeholder: null, observer: null, onLoad: () => this.reinline(el) };
+            el.addEventListener("load", created.onLoad);
+            this.frames.set(el, created);
+            entry = created;
+        }
+        const doc = frameDocument(el);
+        if (doc !== entry.doc) {
+            entry.observer?.disconnect();
+            entry.observer = null;
+            entry.doc = doc;
+        }
+        if (doc && !entry.observer && this.onMutation && typeof MutationObserver !== "undefined") {
+            const onMutation = this.onMutation;
+            entry.observer = new MutationObserver((records) => this.handle(records, onMutation));
+            entry.observer.observe(doc, { subtree: true, childList: true, attributes: true, characterData: true });
+        }
+        return entry;
+    }
+    reinline(el) {
+        const parent = this.ids.get(el);
+        const entry = this.frames.get(el);
+        if (parent === undefined || !entry || !this.onMutation)
+            return;
+        const previous = entry.doc ? this.ids.get(entry.doc.documentElement) : entry.placeholder;
+        entry.placeholder = null;
+        this.watchFrame(el);
+        if (previous !== undefined && previous !== null)
+            this.onMutation({ kind: "remove", id: previous });
+        const map = {};
+        const childId = this.serializeFrameContent(entry, map, {});
+        const node = map[childId];
+        if (node)
+            this.onMutation({ kind: "insert", parent, node, subtree: Object.values(map), before: null });
+    }
+    /** Serialize a single node and its whole subtree into a flat node list (used
+     *  to describe inserted subtrees in mutations). */
+    serializeSubtree(node) {
+        const map = {};
+        const rootId = this.serializeNode(node, map);
+        return { rootId, nodes: Object.values(map) };
+    }
+    /** Capture the current document as a snapshot. */
+    snapshot() {
+        const nodes = {};
+        const root = this.serializeNode(this.root, nodes);
+        return {
+            root: root ?? 0,
+            nodes,
+            viewport: {
+                width: typeof window !== "undefined" ? window.innerWidth : 0,
+                height: typeof window !== "undefined" ? window.innerHeight : 0,
+            },
+        };
+    }
+    handle(records, onMutation) {
+        for (const record of records) {
+            if (record.type === "characterData") {
+                const id = this.ids.get(record.target);
+                if (id !== undefined)
+                    onMutation({ kind: "text", id, text: record.target.textContent ?? "" });
+                continue;
+            }
+            if (record.type === "attributes") {
+                const el = record.target;
+                const id = this.ids.get(el);
+                if (id === undefined || !record.attributeName)
+                    continue;
+                if (isBlockedAttr(record.attributeName))
+                    continue;
+                if (FRAME_TAGS.has(el.tagName) && FRAME_SKIP_ATTRS.has(record.attributeName))
+                    continue;
+                onMutation({ kind: "attribute", id, name: record.attributeName, value: el.getAttribute(record.attributeName) });
+                continue;
+            }
+            if (record.type === "childList") {
+                for (const removed of Array.from(record.removedNodes)) {
+                    const id = this.ids.get(removed);
+                    if (id !== undefined)
+                        onMutation({ kind: "remove", id });
+                }
+                const parentId = this.ids.get(record.target);
+                if (parentId === undefined)
+                    continue;
+                for (const added of Array.from(record.addedNodes)) {
+                    const { rootId, nodes } = this.serializeSubtree(added);
+                    if (rootId === null)
+                        continue;
+                    const node = nodes.find((n) => n.id === rootId);
+                    const beforeSibling = added.nextSibling;
+                    const before = beforeSibling ? (this.ids.get(beforeSibling) ?? null) : null;
+                    onMutation({ kind: "insert", parent: parentId, node, subtree: nodes, before });
+                }
+            }
+        }
+    }
+    /**
+     * Start observing the document, and every framed document it inlines.
+     * `onMutation` fires with a batched-flattened `WebMutation` for every DOM
+     * change. Also emits `viewport` mutations on resize. Call `stop()` to detach.
+     */
+    start(onMutation) {
+        if (typeof MutationObserver === "undefined")
+            return;
+        this.onMutation = onMutation;
+        this.observer = new MutationObserver((records) => this.handle(records, onMutation));
+        this.observer.observe(this.root, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            characterData: true,
+        });
+        for (const el of this.frames.keys())
+            this.watchFrame(el);
+        if (typeof window !== "undefined") {
+            const onResize = () => onMutation({ kind: "viewport", width: window.innerWidth, height: window.innerHeight });
+            window.addEventListener("resize", onResize);
+            this.detachResize = () => window.removeEventListener("resize", onResize);
+        }
+    }
+    stop() {
+        this.observer?.disconnect();
+        this.observer = null;
+        for (const [el, entry] of this.frames) {
+            entry.observer?.disconnect();
+            el.removeEventListener("load", entry.onLoad);
+        }
+        this.frames.clear();
+        this.onMutation = null;
+        this.detachResize?.();
+        this.detachResize = null;
+    }
+}
+/** An iframe's own defaults, for the divs inlined frames become. A framed document inherits
+ *  nothing from the page around it, so its html starts from initial values. */
+const FRAME_BOX_CSS = `:where([data-fauna-iframe]) { display: inline-block; width: 300px; height: 150px; border: 2px inset; overflow: hidden; vertical-align: baseline }
+:where([data-fauna-iframe]) > :where([data-fauna-frame="html"]) { all: initial; display: block; width: 100%; height: 100%; overflow: auto }`;
+const FRAME_ELEMENT_SELECTOR = /(^|[\s>+~,(])i?frame(?=$|[\s>+~,.#:[)])/gi;
+const FRAME_ROOT_SELECTOR = /(^|[\s>+~,(])(?:html|:root)(?=$|[\s>+~,.#:[)])/g;
+const FRAME_BODY_SELECTOR = /(^|[\s>+~,(])body(?=$|[\s>+~,.#:[)])/g;
+/** A framed document's rule for inside `@scope` at its html div, with its root and body
+ *  pointed at the divs standing in for them. Null for rules `@scope` can't hold
+ *  (fonts, keyframes, imports), which stay where they are. */
+function frameScopedRule(rule) {
+    const text = rule.cssText;
+    const open = text.indexOf("{");
+    if (open < 0)
+        return null;
+    const selector = rule.selectorText;
+    if (typeof selector === "string") {
+        const scoped = selector.replace(FRAME_ROOT_SELECTOR, "$1:scope").replace(FRAME_BODY_SELECTOR, '$1[data-fauna-frame="body"]');
+        return `${scoped} ${text.slice(open)}`;
+    }
+    const children = rule.cssRules;
+    if (!children || !/^@(media|supports|container|layer)\b/.test(text))
+        return null;
+    const inner = Array.from(children).map(frameScopedRule);
+    if (inner.some((t) => t === null))
+        return null;
+    return `${text.slice(0, open)}{ ${inner.join("\n")} }`;
+}
+/**
+ * Re-render a `WebSnapshot` into a target document (typically an isolated iframe
+ * or shadow root on the viewer) and apply incoming `WebMutation`s. The replayer
+ * keeps its own id->Node map mirroring the recorder's synthetic ids.
+ */
+export class DomReplayer {
+    constructor(mount) {
+        Object.defineProperty(this, "mount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: mount
+        });
+        Object.defineProperty(this, "nodes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "_viewport", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "iframe", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Mutations that arrive while a full document's frame loads. They follow its
+        // snapshot, so they apply once its ids are bound; a newer snapshot drops them.
+        Object.defineProperty(this, "queued", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "loads", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "frameScopes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "scopedSheets", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakSet()
+        });
+        Object.defineProperty(this, "boxSheet", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "boxes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+    }
+    /** Host viewport from the last snapshot / viewport mutation (advisory). */
+    getViewport() {
+        return this._viewport;
+    }
+    docRoot() {
+        if (this.iframe?.contentDocument?.documentElement) {
+            return this.iframe.contentDocument.documentElement;
+        }
+        return this.mount;
+    }
+    /**
+     * Apply a full cleaned HTML document (or fragment). Uses an iframe when the
+     * payload looks like a full document so `<html>/<head>/<body>` structure and
+     * DFS ids match the host.
+     */
+    async applyHtml(html, viewport) {
+        this.nodes.clear();
+        this._viewport = viewport ?? null;
+        const looksFull = /<html[\s>]/i.test(html);
+        const load = ++this.loads;
+        if (looksFull) {
+            this.queued = [];
+            this.mount.replaceChildren();
+            const iframe = this.mount.ownerDocument.createElement("iframe");
+            // Scripts/handlers are stripped on the host; keep the frame inert.
+            // No allow-scripts — shared pages must not execute host JS in the guest.
+            iframe.setAttribute("sandbox", "allow-same-origin allow-forms");
+            iframe.style.cssText = "border:0;width:100%;height:100%;background:#fff;display:block;";
+            this.mount.appendChild(iframe);
+            this.iframe = iframe;
+            // Defense in depth: drop scripts that survived capture so Chrome doesn't spam
+            // sandbox console errors (no allow-scripts by design). Script preloads stay as
+            // inert links: the host numbers them, so removing one would shift every id after.
+            const inert = html
+                .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+                .replace(/<script\b[^>]*\/>/gi, "")
+                .replace(/<link\b[^>]*rel=["'][^"']*preload[^"']*["'][^>]*>/gi, (tag) => /\bas=["'](script|module)["']/i.test(tag) || /rel=["']modulepreload["']/i.test(tag)
+                ? tag.replace(/rel=["'][^"']*["']/i, 'rel="fauna-inert"')
+                : tag);
+            try {
+                await new Promise((resolve, reject) => {
+                    iframe.onload = () => resolve();
+                    iframe.onerror = () => reject(new Error("Failed to load shared page frame."));
+                    iframe.srcdoc = inert;
+                });
+            }
+            catch (err) {
+                if (load === this.loads)
+                    this.queued = null;
+                throw err;
+            }
+            if (load !== this.loads)
+                return;
+            this.bindIds();
+            this.restyle();
+            // A textarea shows its text, not its value attribute.
+            for (const field of Array.from(iframe.contentDocument?.querySelectorAll("textarea[value]") ?? [])) {
+                field.value = field.getAttribute("value") ?? "";
+            }
+            const queued = this.queued ?? [];
+            this.queued = null;
+            for (const mutation of queued)
+                this.mutate(mutation);
+            return;
+        }
+        this.queued = null;
+        this.iframe = null;
+        this.mount.innerHTML = html;
+        this.bindIds();
+    }
+    /** Bind synthetic ids: from the ids a recorded snapshot carries, else in DFS order to
+     *  match a recorder that numbers in that order. */
+    bindIds() {
+        this.nodes.clear();
+        const root = this.docRoot();
+        if (root.hasAttribute("data-fauna-node") || root.querySelector("[data-fauna-node]")) {
+            this.bindMarked(root);
+            return;
+        }
+        let nextId = 1;
+        const walk = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                this.nodes.set(nextId++, node);
+                return;
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return;
+            const el = node;
+            // The snapshot's combined sheet isn't a node on the host.
+            if (BLOCKED_TAGS.has(el.tagName) || el.hasAttribute("data-fauna-sheets"))
+                return;
+            this.nodes.set(nextId++, el);
+            for (const child of Array.from(el.childNodes))
+                walk(child);
+        };
+        walk(this.docRoot());
+    }
+    /** Elements carry `data-fauna-node`, text-only elements name their text with
+     *  `data-fauna-text`, and every other text node follows a `fauna:N` comment. A marker
+     *  with no text after it was an empty text node on the host, so one is made here. */
+    bindMarked(root) {
+        const doc = root.ownerDocument;
+        const walker = doc.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+        for (let node = walker.currentNode; node; node = walker.nextNode()) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const id = el.getAttribute("data-fauna-node");
+                if (id)
+                    this.nodes.set(Number(id), el);
+                const textId = el.getAttribute("data-fauna-text");
+                if (textId) {
+                    const text = Array.from(el.childNodes).find((child) => child.nodeType === Node.TEXT_NODE)
+                        ?? el.appendChild(doc.createTextNode(""));
+                    this.nodes.set(Number(textId), text);
+                }
+                continue;
+            }
+            const match = /^fauna:(\d+)$/.exec(node.nodeValue ?? "");
+            if (!match)
+                continue;
+            let text = node.nextSibling;
+            if (!text || text.nodeType !== Node.TEXT_NODE)
+                text = node.parentNode?.insertBefore(doc.createTextNode(""), node.nextSibling) ?? null;
+            if (text)
+                this.nodes.set(Number(match[1]), text);
+        }
+    }
+    /** The document the replay renders into: its iframe's for full documents, else the mount's. */
+    getDocument() {
+        return this.ownerDoc();
+    }
+    /** Scope inlined frames' styles, mirror hover and focus, and size frame boxes, for a full document's frame. */
+    restyle() {
+        this.scopeFrames();
+        this.mirrorStates();
+        this.frameBoxes();
+    }
+    /**
+     * Inlined frames are divs, so they get an iframe's box: inline block, 300 by 150 and
+     * clipped unless the page says otherwise, their `width`, `height` and `frameborder`
+     * attributes as sizes and border, and the framed document filling them. All at zero
+     * specificity in a sheet of its own, so page CSS wins, like a real iframe's
+     * presentational hints. No nodes join the replay, so ids stay aligned.
+     */
+    frameBoxes() {
+        const doc = this.iframe?.contentDocument;
+        const view = doc?.defaultView;
+        if (!doc || !view)
+            return;
+        if (!this.boxSheet || !doc.adoptedStyleSheets.includes(this.boxSheet)) {
+            this.boxSheet = new view.CSSStyleSheet();
+            doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, this.boxSheet];
+        }
+        const size = (value) => {
+            const v = value?.trim() ?? "";
+            return /^\d+(\.\d+)?$/.test(v) ? `${v}px` : /^\d+(\.\d+)?(px|%)$/.test(v) ? v : "";
+        };
+        const rules = [FRAME_BOX_CSS];
+        for (const el of Array.from(doc.querySelectorAll("[data-fauna-iframe]"))) {
+            const width = size(el.getAttribute("width"));
+            const height = size(el.getAttribute("height"));
+            const borderless = el.getAttribute("frameborder") === "0";
+            if (!width && !height && !borderless)
+                continue;
+            let box = el.getAttribute("data-fauna-box");
+            if (!box) {
+                box = String(++this.boxes);
+                el.setAttribute("data-fauna-box", box);
+            }
+            const declarations = [width && `width: ${width}`, height && `height: ${height}`, borderless && "border: 0"].filter(Boolean);
+            rules.push(`:where([data-fauna-box="${box}"]) { ${declarations.join("; ")} }`);
+        }
+        this.boxSheet.replaceSync(rules.join("\n"));
+    }
+    /** Scroll a replayed element, or a framed document's html, to the host's `data-fauna-scroll`. */
+    applyScroll(el) {
+        const [x, y] = (el.getAttribute("data-fauna-scroll") ?? "").split(",").map((n) => Number(n) || 0);
+        el.scrollLeft = x ?? 0;
+        el.scrollTop = y ?? 0;
+    }
+    /**
+     * A framed document is inlined into the replay, so its stylesheets would style the
+     * whole copy: a site's `body { background }` repaints the page around its frame. Each
+     * of its sheets goes inside `@scope` at the frame's html div instead. Sheets from other
+     * origins can't be read, so they stay as they are.
+     */
+    scopeFrames() {
+        const doc = this.iframe?.contentDocument;
+        if (!doc)
+            return;
+        for (const sheet of Array.from(doc.styleSheets)) {
+            if (this.scopedSheets.has(sheet))
+                continue;
+            const root = sheet.ownerNode?.closest?.('[data-fauna-frame="html"]');
+            if (!root)
+                continue;
+            let rules;
+            try {
+                rules = sheet.cssRules;
+            }
+            catch {
+                continue;
+            }
+            this.scopedSheets.add(sheet);
+            let scope = root.getAttribute("data-fauna-scope");
+            if (!scope) {
+                scope = String(++this.frameScopes);
+                root.setAttribute("data-fauna-scope", scope);
+            }
+            for (let i = 0; i < rules.length; i++) {
+                const original = rules[i].cssText;
+                const inner = frameScopedRule(rules[i]);
+                if (inner === null)
+                    continue;
+                sheet.deleteRule(i);
+                try {
+                    sheet.insertRule(`@scope ([data-fauna-scope="${scope}"]) { ${inner} }`, i);
+                }
+                catch {
+                    sheet.insertRule(original, i);
+                }
+            }
+        }
+    }
+    /**
+     * `:hover` and `:focus` never apply in a replay. The host marks what they would match
+     * with `data-fauna-hover` and the focus attributes, so point those selectors at the
+     * attributes instead; both weigh the same in the cascade. Only a full document's own
+     * frame is rewritten.
+     */
+    mirrorStates() {
+        const doc = this.iframe?.contentDocument;
+        if (!doc)
+            return;
+        const visit = (rules) => {
+            for (const rule of Array.from(rules)) {
+                const style = rule;
+                if (typeof style.selectorText === "string" && /:(hover|focus)|frame/i.test(style.selectorText)) {
+                    // Inlined frames are divs, so rules for iframes point at their marker.
+                    style.selectorText = style.selectorText
+                        .replace(/:hover\b/g, "[data-fauna-hover]")
+                        .replace(/:focus-visible\b/g, "[data-fauna-focus-visible]")
+                        .replace(/:focus-within\b/g, "[data-fauna-focus-within]")
+                        .replace(/:focus(?![-\w])/g, "[data-fauna-focus]")
+                        .replace(FRAME_ELEMENT_SELECTOR, "$1[data-fauna-iframe]");
+                }
+                const nested = rule.cssRules;
+                if (nested)
+                    visit(nested);
+            }
+        };
+        for (const sheet of Array.from(doc.styleSheets)) {
+            try {
+                visit(sheet.cssRules);
+            }
+            catch { /* unreadable sheet */ }
+        }
+    }
+    ownerDoc() {
+        return this.iframe?.contentDocument ?? this.mount.ownerDocument;
+    }
+    build(id, map) {
+        const spec = map[id];
+        if (!spec)
+            return null;
+        if (spec.kind === "text") {
+            const text = this.ownerDoc().createTextNode(spec.text);
+            this.nodes.set(id, text);
+            return text;
+        }
+        const el = this.ownerDoc().createElement(spec.tag);
+        for (const [name, value] of Object.entries(spec.attributes)) {
+            try {
+                el.setAttribute(name, value);
+            }
+            catch { /* invalid attr name — skip */ }
+        }
+        this.nodes.set(id, el);
+        for (const childId of spec.children) {
+            const child = this.build(childId, map);
+            if (child)
+                el.appendChild(child);
+        }
+        return el;
+    }
+    buildFromList(node, list) {
+        const map = {};
+        for (const n of list)
+            map[n.id] = n;
+        return this.build(node.id, map);
+    }
+    /** Render a fresh snapshot, replacing whatever the mount currently holds. */
+    apply(snapshot) {
+        this.loads++;
+        this.queued = null;
+        this.nodes.clear();
+        this.iframe = null;
+        this.mount.innerHTML = "";
+        this._viewport = snapshot.viewport ?? null;
+        const root = this.build(snapshot.root, snapshot.nodes);
+        if (root)
+            this.mount.appendChild(root);
+    }
+    /** Apply one incremental mutation to the rendered tree. */
+    mutate(mutation) {
+        if (this.queued) {
+            this.queued.push(mutation);
+            return;
+        }
+        switch (mutation.kind) {
+            case "text": {
+                const node = this.nodes.get(mutation.id);
+                if (node)
+                    node.textContent = mutation.text;
+                if (node?.parentNode?.nodeName === "STYLE")
+                    this.restyle();
+                return;
+            }
+            case "attribute": {
+                // A full document replays in its own frame, whose nodes aren't this window's
+                // Element, so check the node type rather than instanceof.
+                const node = this.nodes.get(mutation.id);
+                if (node?.nodeType !== Node.ELEMENT_NODE)
+                    return;
+                const el = node;
+                if (mutation.value === null)
+                    el.removeAttribute(mutation.name);
+                else {
+                    try {
+                        el.setAttribute(mutation.name, mutation.value);
+                    }
+                    catch { /* skip */ }
+                }
+                // The attribute stops showing in a field once its text was set, and never shows in a textarea.
+                if (mutation.name === "value" && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) {
+                    el.value = mutation.value ?? "";
+                }
+                if (mutation.name === "data-fauna-scroll")
+                    this.applyScroll(el);
+                if ((mutation.name === "width" || mutation.name === "height" || mutation.name === "frameborder") && el.hasAttribute("data-fauna-iframe")) {
+                    this.frameBoxes();
+                }
+                return;
+            }
+            case "remove": {
+                const node = this.nodes.get(mutation.id);
+                if (node && node.parentNode)
+                    node.parentNode.removeChild(node);
+                this.nodes.delete(mutation.id);
+                return;
+            }
+            case "insert": {
+                const parent = this.nodes.get(mutation.parent);
+                if (!parent || (parent.nodeType !== Node.ELEMENT_NODE && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE))
+                    return;
+                const built = this.buildFromList(mutation.node, mutation.subtree);
+                if (!built)
+                    return;
+                const sibling = mutation.before !== null ? this.nodes.get(mutation.before) ?? null : null;
+                parent.insertBefore(built, sibling?.parentNode === parent ? sibling : null);
+                if (parent.nodeName === "STYLE" || mutation.subtree.some((n) => n.kind === "element" && n.tag === "style"))
+                    this.restyle();
+                else if (mutation.subtree.some((n) => n.kind === "element" && "data-fauna-iframe" in n.attributes))
+                    this.frameBoxes();
+                return;
+            }
+            case "viewport":
+                this._viewport = { width: mutation.width, height: mutation.height };
+                return;
+        }
+    }
+}
+/**
+ * Self-contained freeze + style serialize for `page.evaluate`. Closures over
+ * module helpers break Puppeteer serialization, so helpers live inside.
+ */
+export function pageToHtml(root = document.documentElement) {
+    const BLOCKED_ATTR_PREFIXES = ["on"];
+    const BLOCKED_TAGS = new Set(["SCRIPT", "NOSCRIPT"]);
+    const FRAME_TAGS = new Set(["IFRAME", "FRAME", "OBJECT", "EMBED"]);
+    const FRAME_SKIP_ATTRS = new Set(["src", "srcdoc", "sandbox", "allow", "data"]);
+    const EXTENSION_ROOT_ID = "fauna-extension-root";
+    // URLs go out absolute, against their own document. Same rules as the recorder.
+    const URL_ATTRS = new Set(["src", "href", "poster", "action", "data"]);
+    const KEEP_URL = /^(data:|blob:|javascript:|#|mailto:|tel:|about:)/i;
+    function isBlockedAttr(name) {
+        return BLOCKED_ATTR_PREFIXES.some((prefix) => name.toLowerCase().startsWith(prefix));
+    }
+    function absoluteUrl(raw, base) {
+        const trimmed = raw.trim();
+        if (!trimmed || KEEP_URL.test(trimmed))
+            return raw;
+        try {
+            return new URL(trimmed, base).href;
+        }
+        catch {
+            return raw;
+        }
+    }
+    function absoluteCss(css, base) {
+        return css.replace(/url\(\s*(['"]?)([^'")]*)\1\s*\)/gi, (all, quote, url) => {
+            const next = absoluteUrl(url, base);
+            return next === url ? all : `url(${quote}${next}${quote})`;
+        });
+    }
+    function absoluteAttr(el, name, value) {
+        if (URL_ATTRS.has(name))
+            return absoluteUrl(value, el.baseURI);
+        if (name === "srcset") {
+            return value.split(",").map((part) => {
+                const bits = part.trim().split(/\s+/);
+                if (bits[0])
+                    bits[0] = absoluteUrl(bits[0], el.baseURI);
+                return bits.join(" ");
+            }).join(", ");
+        }
+        if (name === "style")
+            return absoluteCss(value, el.baseURI);
+        return value;
+    }
+    /** A linked stylesheet's rules, or "" while it loads or when it can't be read. */
+    function sheetCss(link) {
+        try {
+            const sheet = link.sheet;
+            if (!sheet)
+                return "";
+            let css = "";
+            for (const rule of Array.from(sheet.cssRules))
+                css += `${rule.cssText}\n`;
+            return absoluteCss(css, sheet.href || link.href);
+        }
+        catch {
+            return "";
+        }
+    }
+    function ownerDocOf(el) {
+        return el.ownerDocument || document;
+    }
+    function forEachCssUrlToken(css, visit) {
+        const re = /url\(\s*/gi;
+        let match;
+        while ((match = re.exec(css))) {
+            let i = match.index + match[0].length;
+            if (i >= css.length)
+                break;
+            const first = css[i];
+            if (first === '"' || first === "'") {
+                const quote = first;
+                const begin = i + 1;
+                const closeQuote = css.indexOf(quote, begin);
+                if (closeQuote < 0)
+                    break;
+                const closeParen = css.indexOf(")", closeQuote + 1);
+                if (closeParen < 0)
+                    break;
+                visit(css.slice(begin, closeQuote), quote, match.index, closeParen + 1);
+                re.lastIndex = closeParen + 1;
+                continue;
+            }
+            const closeParen = css.indexOf(")", i);
+            if (closeParen < 0)
+                break;
+            visit(css.slice(i, closeParen).trim(), "", match.index, closeParen + 1);
+            re.lastIndex = closeParen + 1;
+        }
+    }
+    function extractCssUrls(css) {
+        const found = new Set();
+        const consider = (raw) => {
+            if (!raw)
+                return;
+            const trimmed = raw.trim();
+            if (!trimmed || trimmed.startsWith("javascript:") || trimmed.startsWith("fauna-web-asset:"))
+                return;
+            if (trimmed.startsWith("#") || trimmed.startsWith("mailto:") || trimmed.startsWith("tel:"))
+                return;
+            if (trimmed.startsWith("blob:") || trimmed.startsWith("data:"))
+                return;
+            found.add(trimmed);
+        };
+        forEachCssUrlToken(css, (raw) => consider(raw));
+        const importRe = /@import\s+(?:url\(\s*(['"]?)([^'")]+)\1\s*\)|(['"])([^'"]+)\3)\s*;?/gi;
+        let match;
+        while ((match = importRe.exec(css)))
+            consider(match[2] ?? match[4] ?? null);
+        return [...found];
+    }
+    function serializeDocumentStyles(doc) {
+        const parts = [];
+        const urls = new Set();
+        for (const sheet of Array.from(doc.styleSheets)) {
+            let css = "";
+            try {
+                const rules = sheet.cssRules;
+                for (const rule of Array.from(rules))
+                    css += `${rule.cssText}\n`;
+            }
+            catch {
+                const owner = sheet.ownerNode;
+                if (owner instanceof HTMLStyleElement)
+                    css = owner.textContent || "";
+                else
+                    continue;
+            }
+            if (!css.trim())
+                continue;
+            css = absoluteCss(css, sheet.href || doc.baseURI);
+            for (const u of extractCssUrls(css))
+                urls.add(u);
+            parts.push(css);
+        }
+        return { css: parts.join("\n"), urls: [...urls] };
+    }
+    // With a recorder installed in this task, every node carries the id it numbered: elements
+    // as data-fauna-node, text nodes as a <!--fauna:N--> comment just before them (which
+    // also keeps neighbouring text apart and marks empty text), and the text of elements
+    // whose content can't hold comments as data-fauna-text. The replay binds by these, so
+    // it never depends on the HTML parsing back into the same nodes.
+    const recorder = window.__faunaRecorder;
+    const RAW_TEXT = new Set(["STYLE", "TITLE", "TEXTAREA", "XMP", "NOEMBED", "NOFRAMES"]);
+    function deepFreezeClone(source) {
+        const doc = ownerDocOf(source);
+        const mark = (clone, node) => {
+            const id = recorder?.id(node);
+            if (id !== undefined)
+                clone.setAttribute("data-fauna-node", String(id));
+        };
+        const markedText = (text, id) => {
+            const node = doc.createTextNode(text);
+            if (id === undefined)
+                return node;
+            const both = doc.createDocumentFragment();
+            both.append(doc.createComment(`fauna:${id}`), node);
+            return both;
+        };
+        const cloneNodeDeep = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const parent = node.parentNode;
+                const raw = node.textContent ?? "";
+                const text = parent?.nodeName === "STYLE" ? absoluteCss(raw, parent.baseURI) : raw;
+                if (parent && RAW_TEXT.has(parent.nodeName))
+                    return doc.createTextNode(text);
+                return markedText(text, recorder?.id(node));
+            }
+            if (node.nodeType === Node.COMMENT_NODE)
+                return null;
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return null;
+            const el = node;
+            if (el.id === EXTENSION_ROOT_ID || BLOCKED_TAGS.has(el.tagName))
+                return null;
+            if (FRAME_TAGS.has(el.tagName)) {
+                const wrap = doc.createElement("div");
+                for (const attr of Array.from(el.attributes)) {
+                    if (isBlockedAttr(attr.name) || FRAME_SKIP_ATTRS.has(attr.name))
+                        continue;
+                    try {
+                        wrap.setAttribute(attr.name, attr.value);
+                    }
+                    catch { /* skip */ }
+                }
+                mark(wrap, el);
+                let nested = null;
+                try {
+                    nested = el.contentDocument;
+                }
+                catch {
+                    nested = null;
+                }
+                const frameClone = nested?.documentElement ? cloneNodeDeep(nested.documentElement) : null;
+                if (frameClone instanceof Element) {
+                    wrap.setAttribute("data-fauna-iframe", "inlined");
+                    wrap.appendChild(frameClone);
+                    return wrap;
+                }
+                wrap.setAttribute("data-fauna-iframe", "blocked");
+                wrap.setAttribute("style", "display:flex;align-items:center;justify-content:center;min-height:48px;background:#f3f3f3;color:#666;font:12px/1.4 system-ui,sans-serif;border:1px dashed #bbb;");
+                wrap.appendChild(markedText("Embedded frame unavailable in share", recorder?.placeholder(el)));
+                return wrap;
+            }
+            if (el.tagName === "LINK") {
+                const rel = (el.getAttribute("rel") || "").toLowerCase();
+                if (rel.includes("stylesheet")) {
+                    // The top document's sheets all go into one <style data-fauna-sheets> below,
+                    // which the replay doesn't number. The link stays as an inert placeholder,
+                    // so the replay numbers the same nodes as the recorder.
+                    if (el.ownerDocument === document) {
+                        const placeholder = doc.createElement("link");
+                        placeholder.setAttribute("rel", "fauna-inert");
+                        placeholder.setAttribute("data-fauna-link", "");
+                        mark(placeholder, el);
+                        return placeholder;
+                    }
+                    // A framed document's sheet stays in place with one text node, as the
+                    // recorder numbers it.
+                    const style = doc.createElement("style");
+                    style.setAttribute("data-fauna-sheet", el.href);
+                    mark(style, el);
+                    const sheetText = recorder?.sheetText(el);
+                    if (sheetText !== undefined)
+                        style.setAttribute("data-fauna-text", String(sheetText));
+                    style.appendChild(doc.createTextNode(sheetCss(el) || " "));
+                    return style;
+                }
+            }
+            const rootTag = el.ownerDocument !== document ? el.tagName.toLowerCase() : "";
+            const frameRoot = rootTag === "html" || rootTag === "head" || rootTag === "body" ? rootTag : "";
+            const clone = doc.createElement(frameRoot ? "div" : el.tagName.toLowerCase());
+            for (const attr of Array.from(el.attributes)) {
+                if (isBlockedAttr(attr.name))
+                    continue;
+                try {
+                    clone.setAttribute(attr.name, absoluteAttr(el, attr.name, attr.value));
+                }
+                catch { /* skip */ }
+            }
+            mark(clone, el);
+            if (frameRoot) {
+                clone.setAttribute("data-fauna-frame", frameRoot);
+                if (frameRoot === "head")
+                    clone.setAttribute("hidden", "");
+            }
+            if (RAW_TEXT.has(el.nodeName)) {
+                const text = Array.from(el.childNodes).find((child) => child.nodeType === Node.TEXT_NODE);
+                const textId = text ? recorder?.id(text) : undefined;
+                if (textId !== undefined)
+                    clone.setAttribute("data-fauna-text", String(textId));
+            }
+            if (el.tagName === "INPUT" && el.type === "password")
+                clone.setAttribute("value", "");
+            else if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
+                try {
+                    clone.setAttribute("value", el.value);
+                }
+                catch { /* skip */ }
+            }
+            for (const child of Array.from(el.childNodes)) {
+                const c = cloneNodeDeep(child);
+                if (c)
+                    clone.appendChild(c);
+            }
+            const shadow = el.shadowRoot;
+            if (shadow) {
+                const wrap = doc.createElement("div");
+                wrap.setAttribute("data-fauna-shadow", "");
+                mark(wrap, shadow);
+                for (const child of Array.from(shadow.childNodes)) {
+                    const c = cloneNodeDeep(child);
+                    if (c)
+                        wrap.appendChild(c);
+                }
+                clone.appendChild(wrap);
+            }
+            return clone;
+        };
+        const cloned = cloneNodeDeep(source);
+        if (!(cloned instanceof Element))
+            throw new Error("deepFreezeClone failed to clone root element");
+        return cloned;
+    }
+    if (root.nodeType !== Node.ELEMENT_NODE)
+        throw new Error("toHtml requires an Element root");
+    const source = root;
+    const doc = ownerDocOf(source);
+    const clone = deepFreezeClone(source);
+    const frozen = serializeDocumentStyles(doc);
+    const head = clone.tagName === "HTML"
+        ? (clone.querySelector("head") || (() => {
+            const h = doc.createElement("head");
+            clone.insertBefore(h, clone.firstChild);
+            return h;
+        })())
+        : null;
+    if (frozen.css.trim()) {
+        const style = doc.createElement("style");
+        style.setAttribute("data-fauna-sheets", "");
+        style.textContent = frozen.css;
+        if (head)
+            head.appendChild(style);
+        else
+            clone.insertBefore(style, clone.firstChild);
+    }
+    return {
+        html: clone.outerHTML,
+        viewport: {
+            width: typeof window !== "undefined" ? window.innerWidth : 0,
+            height: typeof window !== "undefined" ? window.innerHeight : 0,
+        },
+        clone,
+        cssUrls: frozen.urls,
+    };
+}
+/** Install a MutationObserver that posts WebMutations to `window[pushName]`.
+ *  Framed documents are walked, observed, and re-inlined on navigation, with
+ *  their html, head, and body addressed as the divs `pageToHtml` emits. */
+export function pageInstallRecorder(pushName) {
+    const BLOCKED_ATTR_PREFIXES = ["on"];
+    const BLOCKED_TAGS = new Set(["SCRIPT", "NOSCRIPT"]);
+    const FRAME_TAGS = new Set(["IFRAME", "FRAME", "OBJECT", "EMBED"]);
+    const FRAME_SKIP_ATTRS = new Set(["src", "srcdoc", "sandbox", "allow", "data"]);
+    const PLACEHOLDER_TEXT = "Embedded frame unavailable in share";
+    const PLACEHOLDER_STYLE = "display:flex;align-items:center;justify-content:center;min-height:48px;background:#f3f3f3;color:#666;font:12px/1.4 system-ui,sans-serif;border:1px dashed #bbb;";
+    const root = document.documentElement;
+    const ids = new WeakMap();
+    let nextId = 1;
+    const frames = new Map();
+    // `:hover` isn't in the DOM, so the chain it would match carries this attribute and
+    // streams like any other; `DomReplayer` points the copy's `:hover` rules at it.
+    const HOVER = "data-fauna-hover";
+    let hovered = [];
+    const hoverParent = (node) => {
+        if (node.parentNode)
+            return node.parentNode;
+        if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE)
+            return node.host ?? null;
+        if (node.nodeType === Node.DOCUMENT_NODE)
+            return node.defaultView?.frameElement ?? null;
+        return null;
+    };
+    const hoverChain = (target) => {
+        const chain = [];
+        for (let node = target; node; node = hoverParent(node)) {
+            if (node.nodeType === Node.ELEMENT_NODE)
+                chain.push(node);
+        }
+        return chain;
+    };
+    const setHover = (chain) => {
+        const next = new Set(chain);
+        const previous = new Set(hovered);
+        for (const el of hovered)
+            if (!next.has(el))
+                el.removeAttribute(HOVER);
+        for (const el of chain)
+            if (!previous.has(el))
+                el.setAttribute(HOVER, "");
+        hovered = chain;
+    };
+    const onOver = (event) => setHover(hoverChain(event.target));
+    const onOut = (event) => { if (!event.relatedTarget)
+        setHover([]); };
+    // Focus, the caret and a field's live text aren't in the DOM either. They go out as
+    // attribute mutations the page itself never sees, so pages watching their own
+    // attributes aren't disturbed: the focused element carries FOCUS (and FOCUS_VISIBLE
+    // when it matches :focus-visible), its chain FOCUS_WITHIN, a text field CARET as
+    // "start,end,scrollLeft,scrollTop", and `value` its current text.
+    const FOCUS = "data-fauna-focus";
+    const FOCUS_VISIBLE = "data-fauna-focus-visible";
+    const FOCUS_WITHIN = "data-fauna-focus-within";
+    const CARET = "data-fauna-caret";
+    const FOCUS_EVENTS = ["focusin", "focusout", "selectionchange", "keyup", "mouseup", "scroll"];
+    let focus = { chain: [], visible: false, caret: null };
+    const values = new WeakMap();
+    let focusQueued = false;
+    let stopped = false;
+    const pushAttr = (el, name, value) => {
+        const id = ids.get(el);
+        if (id !== undefined)
+            push?.({ kind: "attribute", id, name, value });
+    };
+    const textField = (el) => {
+        if (el.tagName !== "INPUT" && el.tagName !== "TEXTAREA")
+            return null;
+        const field = el;
+        return field.type === "password" ? null : field;
+    };
+    const pushValue = (el, force = false) => {
+        const field = textField(el);
+        if (!field || (!force && values.get(field) === field.value))
+            return;
+        values.set(field, field.value);
+        pushAttr(field, "value", field.value);
+    };
+    const caretOf = (el) => {
+        const field = textField(el);
+        if (!field)
+            return null;
+        let start = null;
+        let end = null;
+        try {
+            start = field.selectionStart;
+            end = field.selectionEnd;
+        }
+        catch { /* a type without a selection */ }
+        if (start === null || end === null)
+            return null;
+        return `${start},${end},${Math.round(field.scrollLeft)},${Math.round(field.scrollTop)}`;
+    };
+    const deepFocus = () => {
+        let el = document.activeElement;
+        while (el && FRAME_TAGS.has(el.tagName)) {
+            let inner = null;
+            try {
+                inner = el.contentDocument?.activeElement ?? null;
+            }
+            catch {
+                inner = null;
+            }
+            if (!inner || inner === inner.ownerDocument.body)
+                break;
+            el = inner;
+        }
+        return el && el !== el.ownerDocument.body && el !== el.ownerDocument.documentElement ? el : null;
+    };
+    const syncFocus = (force = false) => {
+        const el = deepFocus();
+        const chain = el ? hoverChain(el) : [];
+        let visible = false;
+        try {
+            visible = !!el?.matches(":focus-visible");
+        }
+        catch { /* an engine without it */ }
+        const caret = el ? caretOf(el) : null;
+        const before = focus;
+        const was = before.chain[0] ?? null;
+        const next = new Set(chain);
+        const previous = new Set(before.chain);
+        for (const old of before.chain)
+            if (!next.has(old))
+                pushAttr(old, FOCUS_WITHIN, null);
+        for (const now of chain)
+            if (force || !previous.has(now))
+                pushAttr(now, FOCUS_WITHIN, "");
+        if (was && was !== el) {
+            pushAttr(was, FOCUS, null);
+            if (before.visible)
+                pushAttr(was, FOCUS_VISIBLE, null);
+            if (before.caret !== null)
+                pushAttr(was, CARET, null);
+        }
+        if (el) {
+            const moved = force || was !== el;
+            if (moved)
+                pushAttr(el, FOCUS, "");
+            if (moved || visible !== before.visible)
+                pushAttr(el, FOCUS_VISIBLE, visible ? "" : null);
+            pushValue(el, force);
+            if (moved || caret !== before.caret)
+                pushAttr(el, CARET, caret);
+        }
+        focus = { chain, visible, caret };
+    };
+    const queueFocus = () => {
+        if (focusQueued || stopped)
+            return;
+        focusQueued = true;
+        setTimeout(() => {
+            focusQueued = false;
+            if (!stopped)
+                syncFocus();
+        }, 0);
+    };
+    const onInput = (event) => {
+        if (event.target && event.target.nodeType === Node.ELEMENT_NODE)
+            pushValue(event.target);
+        queueFocus();
+    };
+    // Scroll positions aren't in the DOM either. A scrolled element carries SCROLL as "x,y",
+    // and a framed document's scroll goes on its html; the copy scrolls to match. The top
+    // document's own scroll travels with the pointer instead.
+    const SCROLL = "data-fauna-scroll";
+    const SCROLL_MS = 50;
+    const scrolls = new WeakMap();
+    let scrollQueue = null;
+    const scrollTarget = (target) => {
+        const node = target;
+        if (!node)
+            return null;
+        if (node.nodeType === Node.DOCUMENT_NODE)
+            return node === document ? null : node.documentElement;
+        return node.nodeType === Node.ELEMENT_NODE ? node : null;
+    };
+    const scrollOf = (el) => {
+        if (el === el.ownerDocument.documentElement) {
+            const view = el.ownerDocument.defaultView;
+            return `${Math.round(view?.scrollX ?? 0)},${Math.round(view?.scrollY ?? 0)}`;
+        }
+        return `${Math.round(el.scrollLeft)},${Math.round(el.scrollTop)}`;
+    };
+    const pushScroll = (el) => {
+        const value = scrollOf(el);
+        const at = value === "0,0" ? null : value;
+        if ((scrolls.get(el) ?? null) === at)
+            return;
+        if (at)
+            scrolls.set(el, at);
+        else
+            scrolls.delete(el);
+        pushAttr(el, SCROLL, at);
+    };
+    // Scrolled before this install, so a fresh bootstrap shows them where they are.
+    const scrolledAtInstall = [];
+    const onScroll = (event) => {
+        const el = scrollTarget(event.target);
+        if (!el || stopped)
+            return;
+        if (!scrollQueue) {
+            const queue = new Set();
+            scrollQueue = queue;
+            setTimeout(() => {
+                scrollQueue = null;
+                if (!stopped)
+                    for (const target of queue)
+                        pushScroll(target);
+            }, SCROLL_MS);
+        }
+        scrollQueue.add(el);
+    };
+    const listenFocus = (doc) => {
+        for (const name of FOCUS_EVENTS)
+            doc.addEventListener(name, queueFocus, true);
+        doc.addEventListener("input", onInput, true);
+        doc.addEventListener("scroll", onScroll, true);
+    };
+    const unlistenFocus = (doc) => {
+        for (const name of FOCUS_EVENTS)
+            doc.removeEventListener(name, queueFocus, true);
+        doc.removeEventListener("input", onInput, true);
+        doc.removeEventListener("scroll", onScroll, true);
+    };
+    const push = window[pushName];
+    const isBlockedAttr = (name) => BLOCKED_ATTR_PREFIXES.some((p) => name.toLowerCase().startsWith(p));
+    const idFor = (node) => {
+        let id = ids.get(node);
+        if (id === undefined) {
+            id = nextId++;
+            ids.set(node, id);
+        }
+        return id;
+    };
+    const frameDocument = (el) => {
+        try {
+            const nested = el.contentDocument;
+            return nested?.documentElement ? nested : null;
+        }
+        catch {
+            return null;
+        }
+    };
+    const frameRootTag = (el) => {
+        if (el.ownerDocument === document)
+            return "";
+        const tag = el.tagName.toLowerCase();
+        return tag === "html" || tag === "head" || tag === "body" ? tag : "";
+    };
+    // URLs resolve against their own document. The copy, and the host fetching assets
+    // from the top page, would resolve a framed document's against something else, so
+    // they go out absolute. Same rules as pageToHtml.
+    const URL_ATTRS = new Set(["src", "href", "poster", "action", "data"]);
+    const KEEP_URL = /^(data:|blob:|javascript:|#|mailto:|tel:|about:)/i;
+    const absoluteUrl = (raw, base) => {
+        const trimmed = raw.trim();
+        if (!trimmed || KEEP_URL.test(trimmed))
+            return raw;
+        try {
+            return new URL(trimmed, base).href;
+        }
+        catch {
+            return raw;
+        }
+    };
+    const absoluteCss = (css, base) => css.replace(/url\(\s*(['"]?)([^'")]*)\1\s*\)/gi, (all, quote, url) => {
+        const next = absoluteUrl(url, base);
+        return next === url ? all : `url(${quote}${next}${quote})`;
+    });
+    const absoluteAttr = (el, name, value) => {
+        if (URL_ATTRS.has(name))
+            return absoluteUrl(value, el.baseURI);
+        if (name === "srcset") {
+            return value.split(",").map((part) => {
+                const bits = part.trim().split(/\s+/);
+                if (bits[0])
+                    bits[0] = absoluteUrl(bits[0], el.baseURI);
+                return bits.join(" ");
+            }).join(", ");
+        }
+        if (name === "style")
+            return absoluteCss(value, el.baseURI);
+        return value;
+    };
+    const textOf = (node) => {
+        const text = node.textContent ?? "";
+        const parent = node.parentNode;
+        return parent?.nodeName === "STYLE" ? absoluteCss(text, parent.baseURI) : text;
+    };
+    // A framed document's linked stylesheet goes out in place as a <style> with one text
+    // node holding its rules, like pageToHtml, so both number the same nodes. Viewers fetch
+    // nothing cross origin, and the copy can scope it. A sheet still loading sends its
+    // rules when it loads.
+    const isFrameSheet = (el) => el.tagName === "LINK" && el.ownerDocument !== document && /\bstylesheet\b/i.test(el.getAttribute("rel") ?? "");
+    const sheetCss = (link) => {
+        try {
+            const sheet = link.sheet;
+            if (!sheet)
+                return "";
+            let css = "";
+            for (const rule of Array.from(sheet.cssRules))
+                css += `${rule.cssText}\n`;
+            return absoluteCss(css, sheet.href || link.href);
+        }
+        catch {
+            return "";
+        }
+    };
+    const sheetTexts = new Map();
+    const sheetLoads = [];
+    const sheetTextId = (link) => {
+        let id = sheetTexts.get(link);
+        if (id === undefined) {
+            const textId = nextId++;
+            id = textId;
+            sheetTexts.set(link, textId);
+            const onLoad = () => {
+                if (!stopped)
+                    push?.({ kind: "text", id: textId, text: sheetCss(link) || " " });
+            };
+            link.addEventListener("load", onLoad);
+            sheetLoads.push([link, onLoad]);
+        }
+        return id;
+    };
+    // Nodes serialized and nodes removed in the batch being handled. A node added inside a
+    // subtree that was itself added in the same task is reported twice: once in that
+    // subtree's insert, then on its own. Sending it again would show it twice.
+    let sent = null;
+    let gone = null;
+    const handle = (records) => {
+        sent = new Set();
+        gone = new Set();
+        try {
+            handleRecords(records);
+            // A focused node sent again arrives without its focus attributes.
+            const resent = sent;
+            if (focus.chain.some((el) => resent.has(el)))
+                syncFocus(true);
+        }
+        finally {
+            sent = null;
+            gone = null;
+        }
+    };
+    const handleRecords = (records) => {
+        for (const record of records) {
+            if (record.type === "characterData") {
+                const id = ids.get(record.target);
+                if (id !== undefined)
+                    push?.({ kind: "text", id, text: textOf(record.target) });
+                continue;
+            }
+            if (record.type === "attributes") {
+                const el = record.target;
+                const id = ids.get(el);
+                const name = record.attributeName;
+                if (id === undefined || !name || isBlockedAttr(name))
+                    continue;
+                if (FRAME_TAGS.has(el.tagName) && FRAME_SKIP_ATTRS.has(name))
+                    continue;
+                const value = el.getAttribute(name);
+                push?.({ kind: "attribute", id, name, value: value === null ? null : absoluteAttr(el, name, value) });
+                continue;
+            }
+            if (record.type === "childList") {
+                for (const removed of Array.from(record.removedNodes)) {
+                    gone?.add(removed);
+                    const id = ids.get(removed);
+                    if (id !== undefined)
+                        push?.({ kind: "remove", id });
+                }
+                const parentId = ids.get(record.target);
+                if (parentId === undefined)
+                    continue;
+                for (const added of Array.from(record.addedNodes)) {
+                    if (sent?.has(added) && !gone?.has(added))
+                        continue;
+                    const map = {};
+                    const rootId = serializeNode(added, map);
+                    if (rootId === null)
+                        continue;
+                    const node = map[rootId];
+                    const beforeSibling = added.nextSibling;
+                    const before = beforeSibling ? (ids.get(beforeSibling) ?? null) : null;
+                    push?.({ kind: "insert", parent: parentId, node, subtree: Object.values(map), before });
+                }
+            }
+        }
+    };
+    // An open shadow root goes out as a <div data-fauna-shadow> after its host's own
+    // children, like pageToHtml, and is watched like the rest of the page.
+    const shadowObserver = new MutationObserver((records) => handle(records));
+    const watched = new WeakSet();
+    const shadowOf = (el) => el.shadowRoot ?? null;
+    const watchShadow = (shadow) => {
+        if (watched.has(shadow))
+            return;
+        watched.add(shadow);
+        shadowObserver.observe(shadow, { subtree: true, childList: true, attributes: true, characterData: true });
+    };
+    const serializeShadow = (shadow, into) => {
+        const id = idFor(shadow);
+        sent?.add(shadow);
+        watchShadow(shadow);
+        const children = [];
+        for (const child of Array.from(shadow.childNodes)) {
+            const childId = serializeNode(child, into);
+            if (childId !== null)
+                children.push(childId);
+        }
+        into[id] = { id, kind: "element", tag: "div", attributes: { "data-fauna-shadow": "" }, children };
+        return id;
+    };
+    const watchFrame = (el) => {
+        let frame = frames.get(el);
+        if (!frame) {
+            const created = { doc: null, placeholder: null, observer: null, onLoad: () => reinline(el) };
+            el.addEventListener("load", created.onLoad);
+            frames.set(el, created);
+            frame = created;
+        }
+        const doc = frameDocument(el);
+        if (doc !== frame.doc) {
+            frame.observer?.disconnect();
+            frame.observer = null;
+            if (frame.doc) {
+                frame.doc.removeEventListener("mouseover", onOver, true);
+                unlistenFocus(frame.doc);
+            }
+            frame.doc = doc;
+        }
+        if (doc && !frame.observer) {
+            frame.observer = new MutationObserver(handle);
+            frame.observer.observe(doc, { subtree: true, childList: true, attributes: true, characterData: true });
+            doc.addEventListener("mouseover", onOver, true);
+            listenFocus(doc);
+        }
+        return frame;
+    };
+    const serializeFrameContent = (frame, into, attributes) => {
+        if (frame.doc) {
+            attributes["data-fauna-iframe"] = "inlined";
+            return serializeNode(frame.doc.documentElement, into);
+        }
+        attributes["data-fauna-iframe"] = "blocked";
+        attributes.style = PLACEHOLDER_STYLE;
+        const textId = frame.placeholder ?? nextId++;
+        frame.placeholder = textId;
+        into[textId] = { id: textId, kind: "text", text: PLACEHOLDER_TEXT };
+        return textId;
+    };
+    const serializeNode = (node, into) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const id = idFor(node);
+            sent?.add(node);
+            into[id] = { id, kind: "text", text: textOf(node) };
+            return id;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return null;
+        const el = node;
+        if (BLOCKED_TAGS.has(el.tagName))
+            return null;
+        const id = idFor(node);
+        sent?.add(node);
+        if (isFrameSheet(el)) {
+            const textId = sheetTextId(el);
+            into[textId] = { id: textId, kind: "text", text: sheetCss(el) || " " };
+            into[id] = { id, kind: "element", tag: "style", attributes: { "data-fauna-sheet": el.href }, children: [textId] };
+            return id;
+        }
+        const isFrame = FRAME_TAGS.has(el.tagName);
+        const attributes = {};
+        for (const attr of Array.from(el.attributes)) {
+            if (isBlockedAttr(attr.name) || (isFrame && FRAME_SKIP_ATTRS.has(attr.name)))
+                continue;
+            attributes[attr.name] = absoluteAttr(el, attr.name, attr.value);
+        }
+        if (isFrame) {
+            const children = [serializeFrameContent(watchFrame(el), into, attributes)];
+            into[id] = { id, kind: "element", tag: "div", attributes, children };
+            return id;
+        }
+        const children = [];
+        for (const child of Array.from(el.childNodes)) {
+            const childId = serializeNode(child, into);
+            if (childId !== null)
+                children.push(childId);
+        }
+        const shadow = shadowOf(el);
+        if (shadow)
+            children.push(serializeShadow(shadow, into));
+        const frameRoot = frameRootTag(el);
+        if (frameRoot) {
+            attributes["data-fauna-frame"] = frameRoot;
+            if (frameRoot === "head")
+                attributes.hidden = "";
+        }
+        into[id] = { id, kind: "element", tag: frameRoot ? "div" : el.tagName.toLowerCase(), attributes, children };
+        return id;
+    };
+    const reinline = (el) => {
+        const parent = ids.get(el);
+        const frame = frames.get(el);
+        if (parent === undefined || !frame)
+            return;
+        const previous = frame.doc ? ids.get(frame.doc.documentElement) : frame.placeholder;
+        frame.placeholder = null;
+        watchFrame(el);
+        if (previous !== undefined && previous !== null)
+            push?.({ kind: "remove", id: previous });
+        const map = {};
+        const wrapper = {};
+        const childId = serializeFrameContent(frame, map, wrapper);
+        // A frame that was blocked and now loads drops its placeholder look, and back.
+        push?.({ kind: "attribute", id: parent, name: "data-fauna-iframe", value: wrapper["data-fauna-iframe"] ?? null });
+        const style = el.getAttribute("style");
+        push?.({ kind: "attribute", id: parent, name: "style", value: wrapper.style ?? (style === null ? null : absoluteAttr(el, "style", style)) });
+        const node = map[childId];
+        if (node)
+            push?.({ kind: "insert", parent, node, subtree: Object.values(map), before: null });
+    };
+    const walkBind = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            idFor(node);
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const el = node;
+        if (BLOCKED_TAGS.has(el.tagName))
+            return;
+        idFor(node);
+        // A recorder reinstalled for a fresh bootstrap picks up the hover its predecessor left.
+        if (el.hasAttribute(HOVER))
+            hovered.push(el);
+        if (isFrameSheet(el)) {
+            sheetTextId(el);
+            return;
+        }
+        if (FRAME_TAGS.has(el.tagName)) {
+            const frame = watchFrame(el);
+            if (frame.doc) {
+                walkBind(frame.doc.documentElement);
+                const view = frame.doc.defaultView;
+                if (view?.scrollX || view?.scrollY)
+                    scrolledAtInstall.push(frame.doc.documentElement);
+            }
+            else
+                frame.placeholder = nextId++;
+            return;
+        }
+        if (el !== document.documentElement && (el.scrollTop || el.scrollLeft))
+            scrolledAtInstall.push(el);
+        for (const child of Array.from(el.childNodes))
+            walkBind(child);
+        const shadow = shadowOf(el);
+        if (shadow) {
+            idFor(shadow);
+            watchShadow(shadow);
+            for (const child of Array.from(shadow.childNodes))
+                walkBind(child);
+        }
+    };
+    const prev = window.__faunaStopRecorder;
+    prev?.();
+    walkBind(root);
+    window.__faunaRecorder = {
+        id: (node) => ids.get(node),
+        sheetText: (link) => sheetTexts.get(link),
+        placeholder: (el) => frames.get(el)?.placeholder ?? undefined,
+    };
+    const observer = new MutationObserver(handle);
+    observer.observe(root, { subtree: true, childList: true, attributes: true, characterData: true });
+    const onResize = () => push?.({ kind: "viewport", width: window.innerWidth, height: window.innerHeight });
+    window.addEventListener("resize", onResize);
+    document.addEventListener("mouseover", onOver, true);
+    document.addEventListener("mouseout", onOut, true);
+    listenFocus(document);
+    // Everything pushed after this belongs to the bootstrap serialized alongside this
+    // install. The host holds it until that bootstrap has gone out.
+    push?.({ kind: "epoch" });
+    syncFocus(true);
+    for (const el of scrolledAtInstall)
+        pushScroll(el);
+    window.__faunaStopRecorder = () => {
+        stopped = true;
+        delete window.__faunaRecorder;
+        observer.disconnect();
+        shadowObserver.disconnect();
+        for (const [link, onLoad] of sheetLoads)
+            link.removeEventListener("load", onLoad);
+        for (const [el, frame] of frames) {
+            frame.observer?.disconnect();
+            if (frame.doc) {
+                frame.doc.removeEventListener("mouseover", onOver, true);
+                unlistenFocus(frame.doc);
+            }
+            el.removeEventListener("load", frame.onLoad);
+        }
+        frames.clear();
+        window.removeEventListener("resize", onResize);
+        document.removeEventListener("mouseover", onOver, true);
+        document.removeEventListener("mouseout", onOut, true);
+        unlistenFocus(document);
+    };
+}
+export function pageStopRecorder() {
+    const stop = window.__faunaStopRecorder;
+    stop?.();
+}
+/** Runs in the page: the pointer at (x, y) with the CSS cursor of whatever is under it,
+ *  looking inside frames the recorder inlines. */
+export function pageReadPointer(x = 0, y = 0, visible = true) {
+    let shape = "default";
+    if (typeof document !== "undefined") {
+        let px = x;
+        let py = y;
+        let el = document.elementFromPoint(px, py);
+        while (el && (el.tagName === "IFRAME" || el.tagName === "FRAME")) {
+            let inner = null;
+            try {
+                inner = el.contentDocument;
+            }
+            catch {
+                inner = null;
+            }
+            if (!inner)
+                break;
+            const rect = el.getBoundingClientRect();
+            px -= rect.left;
+            py -= rect.top;
+            el = inner.elementFromPoint(px, py);
+        }
+        if (el) {
+            const cursor = ((el.ownerDocument.defaultView ?? window).getComputedStyle(el).cursor || "").split(",").pop().trim();
+            if (cursor && cursor !== "auto")
+                shape = cursor;
+        }
+    }
+    return {
+        x,
+        y,
+        scrollX: typeof window !== "undefined" ? window.scrollX : 0,
+        scrollY: typeof window !== "undefined" ? window.scrollY : 0,
+        visible,
+        shape,
+    };
+}
+/** In-page media fetch for Puppeteer evaluate (cookies, no chrome.runtime). */
+export async function pageFetchMedia(url) {
+    try {
+        if (url.startsWith("data:")) {
+            const comma = url.indexOf(",");
+            if (comma < 0)
+                return null;
+            const header = url.slice(5, comma);
+            const payload = url.slice(comma + 1);
+            const contentType = header.split(";")[0] || "application/octet-stream";
+            if (header.includes(";base64"))
+                return { dataBase64: payload, contentType };
+            const raw = decodeURIComponent(payload);
+            return { dataBase64: btoa(raw), contentType };
+        }
+        const response = await fetch(url, { credentials: "include", mode: "cors" });
+        if (!response.ok)
+            return null;
+        const buf = new Uint8Array(await response.arrayBuffer());
+        let binary = "";
+        for (let i = 0; i < buf.length; i++)
+            binary += String.fromCharCode(buf[i]);
+        return {
+            dataBase64: btoa(binary),
+            contentType: response.headers.get("Content-Type") || "application/octet-stream",
+        };
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Upload cleaned HTML as a raw stream (XHR for upload progress, Drive-style).
+ */
+export function uploadBootstrap(authorization, target, html, options = {}) {
+    const body = typeof html === "string" ? new TextEncoder().encode(html) : html;
+    const version = options.version ?? 1;
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", `${Marmot.getURL()}/extensions/web/bootstrap`);
+        xhr.setRequestHeader("Authorization", "email" in authorization ? `Token ${authorization.token}` : `ApiKey ${authorization.id}`);
+        if ("code" in target)
+            xhr.setRequestHeader("Access-Code", target.code);
+        else
+            xhr.setRequestHeader("Server", target.reference);
+        xhr.setRequestHeader("Content-Type", options.contentType ?? "text/html; charset=utf-8");
+        xhr.setRequestHeader("Bootstrap-Version", String(version));
+        if (options.viewport) {
+            xhr.setRequestHeader("Viewport-Width", String(options.viewport.width));
+            xhr.setRequestHeader("Viewport-Height", String(options.viewport.height));
+        }
+        xhr.upload.onprogress = (event) => {
+            if (event.lengthComputable && event.total > 0 && options.onProgress) {
+                options.onProgress(Math.min(Math.max(event.loaded / event.total, 0), 1));
+            }
+        };
+        xhr.onload = () => {
+            options.onProgress?.(1);
+            if (xhr.status >= 200 && xhr.status < 300) {
+                try {
+                    resolve(JSON.parse(xhr.responseText));
+                }
+                catch {
+                    resolve({ ok: true, version });
+                }
+            }
+            else {
+                reject(new Error(xhr.responseText || `${xhr.status}: bootstrap upload failed`));
+            }
+        };
+        xhr.onerror = () => reject(new Error("Failed to upload bootstrap."));
+        xhr.send(new Uint8Array(body));
+    });
+}
+/**
+ * Download the room HTML bootstrap with download progress when Content-Length is known.
+ */
+export async function downloadBootstrap(authorization, target, onProgress) {
+    const response = await fetch(`${Marmot.getURL()}/extensions/web/bootstrap`, {
+        method: "GET",
+        headers: {
+            Authorization: "email" in authorization
+                ? `Token ${authorization.token}`
+                : `ApiKey ${authorization.id}`,
+            ...("code" in target
+                ? { "Access-Code": target.code }
+                : { Server: target.reference }),
+        },
+    });
+    if (!response.ok)
+        throw new Error(await response.text());
+    const contentType = response.headers.get("Content-Type") || "text/html; charset=utf-8";
+    const contentLength = Number(response.headers.get("Content-Length") || "0");
+    const buffer = await readBody(response, contentLength, onProgress);
+    return { html: new TextDecoder().decode(buffer), contentLength, contentType };
+}
+/**
+ * Upload one media asset; returns a per-asset access code for guest download.
+ */
+export function uploadAsset(authorization, target, data, contentType, options = {}) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", `${Marmot.getURL()}/extensions/web/asset`);
+        xhr.setRequestHeader("Authorization", "email" in authorization ? `Token ${authorization.token}` : `ApiKey ${authorization.id}`);
+        if ("code" in target)
+            xhr.setRequestHeader("Access-Code", target.code);
+        else
+            xhr.setRequestHeader("Server", target.reference);
+        const safeType = (contentType || "application/octet-stream").split(";")[0]?.trim() || "application/octet-stream";
+        xhr.setRequestHeader("Content-Type", safeType);
+        if (options.assetId)
+            xhr.setRequestHeader("Asset-Id", options.assetId);
+        xhr.upload.onprogress = (event) => {
+            if (event.lengthComputable && event.total > 0 && options.onProgress) {
+                options.onProgress(Math.min(Math.max(event.loaded / event.total, 0), 1));
+            }
+        };
+        xhr.onload = () => {
+            options.onProgress?.(1);
+            if (xhr.status >= 200 && xhr.status < 300) {
+                try {
+                    resolve(JSON.parse(xhr.responseText));
+                }
+                catch (err) {
+                    reject(err);
+                }
+            }
+            else {
+                reject(new Error(xhr.responseText || `${xhr.status}: asset upload failed`));
+            }
+        };
+        xhr.onerror = () => reject(new Error("Failed to upload asset."));
+        xhr.send(new Uint8Array(data));
+    });
+}
+/** Download one asset by its file access code. */
+export async function downloadAsset(authorization, accessCode, onProgress) {
+    const response = await fetch(`${Marmot.getURL()}/extensions/web/asset`, {
+        method: "GET",
+        headers: {
+            Authorization: "email" in authorization
+                ? `Token ${authorization.token}`
+                : `ApiKey ${authorization.id}`,
+            "File-Access-Code": accessCode,
+        },
+    });
+    if (!response.ok)
+        throw new Error(await response.text());
+    const contentType = response.headers.get("Content-Type") || "application/octet-stream";
+    const contentLength = Number(response.headers.get("Content-Length") || "0");
+    const data = await readBody(response, contentLength, onProgress);
+    return { data, contentType };
+}
+async function readBody(response, contentLength, onProgress) {
+    if (!response.body) {
+        const buf = new Uint8Array(await response.arrayBuffer());
+        onProgress?.(1);
+        return buf;
+    }
+    const reader = response.body.getReader();
+    const chunks = [];
+    let loaded = 0;
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        if (value) {
+            chunks.push(value);
+            loaded += value.byteLength;
+            if (onProgress && contentLength > 0) {
+                onProgress(Math.min(loaded / contentLength, 1));
+            }
+        }
+    }
+    onProgress?.(1);
+    const out = new Uint8Array(loaded);
+    let offset = 0;
+    for (const chunk of chunks) {
+        out.set(chunk, offset);
+        offset += chunk.byteLength;
+    }
+    return out;
+}
+/** Aggregate sequential upload/download stages into a single 0..1 progress. */
+export function weightedProgress(stages, onProgress) {
+    const total = stages.reduce((sum, s) => sum + Math.max(s.weight, 0), 0) || 1;
+    let completed = 0;
+    return stages.reduce(async (prev, stage) => {
+        await prev;
+        const weight = Math.max(stage.weight, 0);
+        await stage.run((p) => {
+            const clamped = Math.min(Math.max(p, 0), 1);
+            onProgress?.((completed + clamped * weight) / total);
+        });
+        completed += weight;
+        onProgress?.(completed / total);
+    }, Promise.resolve());
+}
+/**
+ * A live web room for page sharing. `WebRoom extends Room` and carries presence
+ * + small DOM mutations. Initial HTML and media bytes travel over HTTP
+ * bootstrap/asset routes, not this socket.
+ */
+export class WebRoom extends Room {
+    constructor(ws, authorization, id, hooks, connectionState, opts) {
+        // Room.generateAccessCode POSTs `${endpoint}/access-code`; mountRoom
+        // registers that under the live base, not the service root.
+        super(opts?.endpoint ?? `${Marmot.getURL()}/extensions/web/live`, ws, authorization, id);
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "latest", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "bootstrap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "toolHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pendingTools", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        /** Tagged host principal from the live connection (`credentials:` / `group:` / …). */
+        Object.defineProperty(this, "hostPrincipal", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** Server-computed: whether this caller may invite others to the share. */
+        Object.defineProperty(this, "_canInvite", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "owned", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.hooks = hooks;
+        this.owned = opts?.owned !== false;
+        const roomMeta = connectionState?.room;
+        if (roomMeta?.hostPrincipal)
+            this.hostPrincipal = String(roomMeta.hostPrincipal);
+        if (typeof roomMeta?.canInvite === "boolean")
+            this._canInvite = roomMeta.canInvite;
+    }
+    setHooks(hooks) {
+        this.hooks = { ...this.hooks, ...hooks };
+    }
+    /** Ingest-only child of a BrowserRoom (same socket). */
+    static fromParent(parent, hooks = {}, connectionState) {
+        return new WebRoom(parent.ws, parent.authorization, parent.id, hooks, connectionState, {
+            owned: false,
+            endpoint: parent.endpoint,
+        });
+    }
+    /** Host principal tagged string, if the connection provided it. */
+    getHostPrincipal() {
+        return this.hostPrincipal;
+    }
+    /** Whether this signed-in caller may invite others (server-gated). */
+    canInvite() {
+        return this._canInvite;
+    }
+    getSnapshot() {
+        return this.latest;
+    }
+    getBootstrap() {
+        return this.bootstrap;
+    }
+    disconnect() {
+        if (!this.owned)
+            return;
+        super.disconnect();
+    }
+    ingestSnapshot(snapshot) {
+        this.latest = snapshot;
+        this.hooks.onSnapshot?.(this, snapshot);
+    }
+    ingestBootstrap(meta) {
+        this.bootstrap = meta;
+        this.hooks.onBootstrap?.(this, meta);
+    }
+    publishBootstrap(meta) {
+        this.bootstrap = meta;
+        this.post({ event: "web-bootstrap", data: { bootstrap: meta } });
+    }
+    publishSnapshot(snapshot) {
+        this.latest = snapshot;
+        this.post({ event: "web-snapshot", data: { snapshot } });
+    }
+    publishMutation(mutation) {
+        this.post({ event: "web-mutation", data: { mutation } });
+    }
+    publishClosed() {
+        this.post({ event: "web-closed", data: {} });
+    }
+    /** Host: fulfill inbound `web-tool-call` frames. */
+    setToolHandler(handler) {
+        this.toolHandler = handler;
+        return () => {
+            if (this.toolHandler === handler)
+                this.toolHandler = null;
+        };
+    }
+    /** Any member: ask the host to run a page tool. */
+    invokeTool(name, params = {}, timeoutMs = 30000) {
+        if (this.toolHandler) {
+            return this.toolHandler(name, params);
+        }
+        const id = crypto.randomUUID();
+        return new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+                this.pendingTools.delete(id);
+                reject(new Error(`Tool timed out: ${name}`));
+            }, timeoutMs);
+            this.pendingTools.set(id, {
+                resolve: (v) => { clearTimeout(timer); resolve(v); },
+                reject: (e) => { clearTimeout(timer); reject(e); },
+            });
+            this.post({ event: "web-tool-call", data: { id, name, params } });
+        });
+    }
+    handleEvent(packet) {
+        switch (packet.event) {
+            case "web-bootstrap": {
+                this.bootstrap = packet.data?.bootstrap ?? null;
+                if (this.bootstrap)
+                    this.hooks.onBootstrap?.(this, this.bootstrap);
+                return true;
+            }
+            case "web-snapshot": {
+                this.latest = packet.data?.snapshot ?? null;
+                if (this.latest)
+                    this.hooks.onSnapshot?.(this, this.latest);
+                return true;
+            }
+            case "web-mutation": {
+                if (packet.data?.mutation)
+                    this.hooks.onMutation?.(this, packet.data.mutation);
+                return true;
+            }
+            case "web-tool-call": {
+                void this.handleToolCall(packet.data);
+                return true;
+            }
+            case "web-tool-result": {
+                const id = packet.data?.id;
+                if (!id)
+                    return true;
+                const pending = this.pendingTools.get(id);
+                if (!pending)
+                    return true;
+                this.pendingTools.delete(id);
+                if (packet.data?.error)
+                    pending.reject(new Error(String(packet.data.error)));
+                else
+                    pending.resolve(String(packet.data?.result ?? ""));
+                return true;
+            }
+            case "web-closed":
+            case "server-closed": {
+                this.hooks.onClosed?.(this);
+                return true;
+            }
+            default:
+                return false;
+        }
+    }
+    async handleToolCall(data) {
+        const id = data?.id;
+        const name = data?.name;
+        if (!id || !name || !this.toolHandler)
+            return;
+        try {
+            const result = await this.toolHandler(String(name), data?.params ?? {});
+            this.post({ event: "web-tool-result", data: { id, result } });
+        }
+        catch (err) {
+            this.post({
+                event: "web-tool-result",
+                data: { id, error: err?.message ?? String(err) },
+            });
+        }
+    }
+}
+/**
+ * Connect to a web room. `target` is an access code (viewer joining a shared
+ * page) or a room reference (host opening its own room).
+ */
+export async function connectWebRoom(authorization, target, hooks = {}) {
+    const auth = "code" in target
+        ? { authorization, accessCode: target.code }
+        : { authorization, server: target.reference };
+    let created;
+    const notify = () => {
+        if (created)
+            hooks.onPresence?.(created);
+    };
+    const self = await connect(auth, `${Marmot.getURL()}/extensions/web/live`, {
+        createRoom: (_endpoint, ws, a, id, state) => {
+            created = new WebRoom(ws, a, id, hooks, state);
+            if (state?.bootstrap)
+                created.ingestBootstrap(state.bootstrap);
+            if (state?.snapshot)
+                created.ingestSnapshot(state.snapshot);
+            return created;
+        },
+        createPresence: (room, data) => {
+            const presence = new Presence(room, data.id, data.profile);
+            presence.update(data);
+            queueMicrotask(notify);
+            return presence;
+        },
+        removePresence: () => {
+            queueMicrotask(notify);
+        },
+        onEvent: (room, packet) => room.handleEvent(packet),
+        onClosed: (room) => hooks.onClosed?.(room),
+    });
+    notify();
+    return { room: created, self };
+}