fauna-api 1.0.765 → 1.0.771

package/dist/src/marmot/web.js

@@ -144,9 +144,10 @@ export function serializeDocumentStyles(doc = document) {
 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.
+// Framed documents are inlined into their host page's copy, and the viewer replays each as a
+// nested frame. Serialized as HTML, their html, head, and body become divs marked
+// `data-fauna-frame`, since a parser keeps no document inside another; recorded as nodes they
+// keep their own tags.
 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";
@@ -224,11 +225,8 @@ export function deepFreezeClone(source) {
             }
             catch { /* skip */ }
         }
-        if (frameRoot) {
+        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", "");
@@ -539,13 +537,7 @@ export class DomRecorder {
             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 };
+        into[id] = { id, kind: "element", tag: el.localName, attributes, children };
         return id;
     }
     /** The one child a frame's wrapper holds: its document root, or a placeholder text. */
@@ -697,39 +689,25 @@ export class DomRecorder {
         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")} }`;
-}
+// A wrapper replays as an iframe that never loads anything: the replayer writes its document.
+const FRAME_BOX_SKIP = new Set(["src", "srcdoc", "sandbox", "allow", "data", "loading", "name"]);
+/** A frame showing a placeholder instead of a document centers it. */
+const FRAME_PLACEHOLDER_BODY = "margin:0;height:100vh;display:flex;align-items:center;justify-content:center;color:#666;font:12px/1.4 system-ui,sans-serif";
+const SVG_NS = "http://www.w3.org/2000/svg";
+const MATH_NS = "http://www.w3.org/1998/Math/MathML";
+/** How long a scroll keeps being reapplied while its document grows into it. */
+const SCROLL_SETTLE_MS = 3000;
 /**
  * Re-render a shared page into a frame inside `mount` and apply incoming `WebMutation`s.
  * The page is someone else's, so the frame is sandboxed without scripts: the replayer
  * writes into it from this page, and nothing the page carries ever runs. The replayer
  * keeps its own id->Node map mirroring the recorder's synthetic ids.
+ *
+ * Every frame the page holds replays as a nested iframe of that frame, which inherits the
+ * sandbox, so a framed page lays out against its own viewport: fixed positions, viewport
+ * units and media queries resolve against the frame, as they did on the host. Nothing
+ * inside the copy can run, so no event there ever reaches this page; the replayer places
+ * each frame's document right after the frame joins the copy.
  */
 export class DomReplayer {
     constructor(mount) {
@@ -745,6 +723,12 @@ export class DomReplayer {
             writable: true,
             value: new Map()
         });
+        Object.defineProperty(this, "ids", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
         Object.defineProperty(this, "_viewport", {
             enumerable: true,
             configurable: true,
@@ -771,25 +755,34 @@ export class DomReplayer {
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "frameScopes", {
+        Object.defineProperty(this, "boxes", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: 0
+            value: new WeakMap()
         });
-        Object.defineProperty(this, "scopedSheets", {
+        /** The box each framed document's node sits in. */
+        Object.defineProperty(this, "boxOf", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new WeakSet()
+            value: new WeakMap()
         });
-        Object.defineProperty(this, "boxSheet", {
+        /** Boxes built before they joined the copy, so without a document yet. */
+        Object.defineProperty(this, "unplaced", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: null
+            value: new Set()
         });
-        Object.defineProperty(this, "boxes", {
+        /** Where the host has each scrolled element, and since when. */
+        Object.defineProperty(this, "scrolls", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "scrollFrame", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -844,7 +837,7 @@ export class DomReplayer {
      * The `<html>/<head>/<body>` structure and DFS ids match the host's.
      */
     async applyHtml(html, viewport) {
-        this.nodes.clear();
+        this.reset();
         this._viewport = viewport ?? null;
         const load = ++this.loads;
         // Drop scripts that survived capture so Chrome doesn't log a sandbox error for each.
@@ -860,10 +853,14 @@ export class DomReplayer {
         if (!iframe)
             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") ?? "";
+        this.unfold(iframe.contentDocument);
+        this.settle();
+        for (const doc of this.documents()) {
+            this.mirrorStates(doc);
+            // A textarea shows its text, not its value attribute.
+            for (const field of Array.from(doc.querySelectorAll("textarea[value]"))) {
+                field.value = field.getAttribute("value") ?? "";
+            }
         }
         this.flushQueued();
     }
@@ -879,7 +876,7 @@ export class DomReplayer {
         let nextId = 1;
         const walk = (node) => {
             if (node.nodeType === Node.TEXT_NODE) {
-                this.nodes.set(nextId++, node);
+                this.bind(nextId++, node);
                 return;
             }
             if (node.nodeType !== Node.ELEMENT_NODE)
@@ -888,11 +885,11 @@ export class DomReplayer {
             // 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))
+            this.bind(nextId++, el);
+            for (const child of this.boxes.get(el)?.content ?? Array.from(el.childNodes))
                 walk(child);
         };
-        walk(this.docRoot());
+        walk(root);
     }
     /** 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
@@ -905,13 +902,15 @@ export class DomReplayer {
                 const el = node;
                 const id = el.getAttribute("data-fauna-node");
                 if (id)
-                    this.nodes.set(Number(id), el);
+                    this.bind(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);
+                    this.bind(Number(textId), text);
                 }
+                for (const child of this.boxes.get(el)?.content ?? [])
+                    this.bindMarked(child);
                 continue;
             }
             const match = /^fauna:(\d+)$/.exec(node.nodeValue ?? "");
@@ -921,127 +920,249 @@ export class DomReplayer {
             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);
+                this.bind(Number(match[1]), text);
         }
     }
-    /** The document the replay renders into: its iframe's for full documents, else the mount's. */
-    getDocument() {
-        return this.ownerDoc();
+    bind(id, node) {
+        this.nodes.set(id, node);
+        this.ids.set(node, id);
     }
-    /** 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();
+    /** `next` takes over the id `old` was bound to. */
+    rebind(old, next) {
+        const id = this.ids.get(old);
+        if (id !== undefined)
+            this.bind(id, next);
+    }
+    reset() {
+        this.nodes.clear();
+        this.ids = new WeakMap();
+        this.boxes = new WeakMap();
+        this.boxOf = new WeakMap();
+        this.unplaced.clear();
+        this.scrolls.clear();
     }
     /**
-     * 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.
+     * A replay's HTML can't hold one document inside another, so an inlined frame's html,
+     * head and body arrive as divs marked `data-fauna-frame`. Every wrapper becomes a frame
+     * box, holding them as the html, head and body they stand for, under the ids they were
+     * bound to. Wrappers come in document order, so a frame's box is in the copy, with its
+     * document, before the frames inside it are unfolded.
      */
-    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 : "";
+    unfold(doc) {
+        const real = (div, tag) => {
+            const el = doc.createElement(tag);
+            for (const attr of Array.from(div.attributes))
+                if (attr.name !== "data-fauna-frame")
+                    el.setAttribute(attr.name, attr.value);
+            this.rebind(div, el);
+            return el;
         };
-        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)
+        for (const wrapper of Array.from(doc.querySelectorAll("[data-fauna-iframe]"))) {
+            const frame = this.createBox(doc, Array.from(wrapper.attributes, (attr) => [attr.name, attr.value]));
+            const content = Array.from(wrapper.childNodes, (child) => {
+                if (child.nodeType !== Node.ELEMENT_NODE || child.getAttribute("data-fauna-frame") !== "html")
+                    return child;
+                const html = real(child, "html");
+                for (const part of Array.from(child.childNodes)) {
+                    const name = part.nodeType === Node.ELEMENT_NODE ? part.getAttribute("data-fauna-frame") : null;
+                    if (name !== "head" && name !== "body") {
+                        html.appendChild(part);
+                        continue;
+                    }
+                    const el = real(part, name);
+                    el.append(...Array.from(part.childNodes));
+                    html.appendChild(el);
+                }
+                return html;
+            });
+            this.rebind(wrapper, frame);
+            wrapper.replaceWith(frame);
+            for (const node of content)
+                this.insertInto(frame, node, null);
+        }
+    }
+    /** An iframe standing for a frame's wrapper, which never loads anything of its own. */
+    createBox(doc, attributes) {
+        const frame = doc.createElement("iframe");
+        for (const [name, value] of attributes) {
+            if (FRAME_BOX_SKIP.has(name.toLowerCase()))
                 continue;
-            let box = el.getAttribute("data-fauna-box");
-            if (!box) {
-                box = String(++this.boxes);
-                el.setAttribute("data-fauna-box", box);
+            try {
+                frame.setAttribute(name, value);
             }
-            const declarations = [width && `width: ${width}`, height && `height: ${height}`, borderless && "border: 0"].filter(Boolean);
-            rules.push(`:where([data-fauna-box="${box}"]) { ${declarations.join("; ")} }`);
+            catch { /* invalid attr name — skip */ }
         }
-        this.boxSheet.replaceSync(rules.join("\n"));
+        this.boxes.set(frame, { content: [] });
+        return frame;
     }
-    /** 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;
+    /** Insert into `parent`, or, for a frame box, into the framed document it shows. */
+    insertInto(parent, node, before) {
+        const frame = parent;
+        const box = this.boxes.get(frame);
+        if (!box) {
+            parent.insertBefore(node, before?.parentNode === parent ? before : null);
+            return;
+        }
+        const at = before ? box.content.indexOf(before) : -1;
+        box.content.splice(at < 0 ? box.content.length : at, 0, node);
+        this.boxOf.set(node, frame);
+        this.place(frame, box);
     }
     /**
-     * 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.
+     * Put a box's framed document into the box's own document: its html as the document's
+     * root, and anything else (a placeholder) into a body of its own. A box gets its
+     * document the moment it joins the copy; until then what it shows waits in `content`,
+     * where changes apply all the same.
      */
-    scopeFrames() {
-        const doc = this.iframe?.contentDocument;
-        if (!doc)
+    place(frame, box) {
+        const doc = frame.isConnected ? frame.contentDocument : null;
+        if (!doc) {
+            this.unplaced.add(frame);
             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.unplaced.delete(frame);
+        const root = box.content.find((node) => node.nodeName === "HTML");
+        if (root && doc.documentElement !== root) {
+            if (doc.documentElement)
+                doc.replaceChild(root, doc.documentElement);
+            else
+                doc.appendChild(root);
+            this.mirrorStates(doc);
+        }
+        const rest = box.content.filter((node) => node !== root);
+        if (!rest.length)
+            return;
+        const html = doc.documentElement ?? doc.appendChild(doc.createElement("html"));
+        const body = doc.body ?? html.appendChild(doc.createElement("body"));
+        if (!root)
+            body.setAttribute("style", FRAME_PLACEHOLDER_BODY);
+        for (const node of rest)
+            if (node.parentNode !== body)
+                body.appendChild(node);
+    }
+    /** Give every box that has joined the copy its document, the boxes inside them included. */
+    settle() {
+        for (let placed = true; placed && this.unplaced.size;) {
+            placed = false;
+            for (const frame of [...this.unplaced]) {
+                if (!frame.isConnected)
+                    continue;
+                const box = this.boxes.get(frame);
+                if (box)
+                    this.place(frame, box);
+                placed || (placed = !this.unplaced.has(frame));
             }
-            this.scopedSheets.add(sheet);
-            let scope = root.getAttribute("data-fauna-scope");
-            if (!scope) {
-                scope = String(++this.frameScopes);
-                root.setAttribute("data-fauna-scope", scope);
+        }
+    }
+    /** The copy's document and every framed document in it. */
+    documents() {
+        const out = [];
+        const visit = (doc) => {
+            if (!doc)
+                return;
+            out.push(doc);
+            for (const frame of Array.from(doc.querySelectorAll("iframe")))
+                visit(frame.contentDocument);
+        };
+        visit(this.iframe?.contentDocument);
+        return out;
+    }
+    /** Take a removed node out of the copy, and every id under it, framed documents included. */
+    drop(node) {
+        const frame = this.boxOf.get(node);
+        const content = frame ? this.boxes.get(frame)?.content : undefined;
+        const at = content?.indexOf(node) ?? -1;
+        if (at >= 0)
+            content.splice(at, 1);
+        this.boxOf.delete(node);
+        node.parentNode?.removeChild(node);
+        for (const stack = [node]; stack.length;) {
+            const next = stack.pop();
+            const id = this.ids.get(next);
+            if (id !== undefined && this.nodes.get(id) === next)
+                this.nodes.delete(id);
+            if (next.nodeType === Node.ELEMENT_NODE) {
+                this.scrolls.delete(next);
+                this.unplaced.delete(next);
             }
-            for (let i = 0; i < rules.length; i++) {
-                const original = rules[i].cssText;
-                const inner = frameScopedRule(rules[i]);
-                if (inner === null)
+            for (const child of this.boxes.get(next)?.content ?? Array.from(next.childNodes))
+                stack.push(child);
+        }
+    }
+    /** Keep `el` (a framed document's html for the frame's own scroll) where the host has it. */
+    scrollTo(el) {
+        const [x = 0, y = 0] = (el.getAttribute("data-fauna-scroll") ?? "").split(",").map((n) => Number(n) || 0);
+        if (!x && !y)
+            this.scrolls.delete(el);
+        else
+            this.scrolls.set(el, { x, y, since: Date.now() });
+        this.scrollOnce(el, x, y);
+        this.rescroll();
+    }
+    /** Whether `el` is where the host has it, after moving it there. */
+    scrollOnce(el, x, y) {
+        if (!el.isConnected)
+            return false;
+        const doc = el.ownerDocument;
+        if (el === doc.documentElement) {
+            const view = doc.defaultView;
+            if (!view)
+                return false;
+            if (view.scrollX !== x || view.scrollY !== y)
+                view.scrollTo(x, y);
+            return view.scrollX === x && view.scrollY === y;
+        }
+        if (el.scrollLeft !== x)
+            el.scrollLeft = x;
+        if (el.scrollTop !== y)
+            el.scrollTop = y;
+        return el.scrollLeft === x && el.scrollTop === y;
+    }
+    /**
+     * A scroll lands only once its document is long enough, which can be after the changes
+     * that grow it, or after its images and fonts load. Once a frame after any change, and
+     * every frame while a recent scroll hasn't landed, scrolls go back where the host has them.
+     */
+    rescroll() {
+        const view = this.mount.ownerDocument?.defaultView;
+        if (this.scrollFrame || !this.scrolls.size || !view)
+            return;
+        this.scrollFrame = view.requestAnimationFrame(() => {
+            this.scrollFrame = 0;
+            const now = Date.now();
+            let short = false;
+            for (const [el, at] of this.scrolls) {
+                if (!el.isConnected)
                     continue;
-                sheet.deleteRule(i);
-                try {
-                    sheet.insertRule(`@scope ([data-fauna-scope="${scope}"]) { ${inner} }`, i);
-                }
-                catch {
-                    sheet.insertRule(original, i);
-                }
+                if (!this.scrollOnce(el, at.x, at.y) && now - at.since < SCROLL_SETTLE_MS)
+                    short = true;
             }
-        }
+            if (short)
+                this.rescroll();
+        });
+    }
+    /** The document the replay renders into: its iframe's for full documents, else the mount's. */
+    getDocument() {
+        return this.ownerDoc();
     }
     /**
      * `: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.
+     * attributes instead; both weigh the same in the cascade. Only the copy's own documents
+     * are rewritten: its frame's, and each framed document's.
      */
-    mirrorStates() {
-        const doc = this.iframe?.contentDocument;
-        if (!doc)
+    mirrorStates(doc) {
+        if (doc === this.mount.ownerDocument)
             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.
+                if (typeof style.selectorText === "string" && /:(hover|focus)/.test(style.selectorText)) {
                     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]");
+                        .replace(/:focus(?![-\w])/g, "[data-fauna-focus]");
                 }
                 const nested = rule.cssRules;
                 if (nested)
@@ -1058,58 +1179,79 @@ export class DomReplayer {
     ownerDoc() {
         return this.iframe?.contentDocument ?? this.mount.ownerDocument;
     }
-    /** `seen` keeps a subtree that names a node twice (or itself) from building forever. */
-    build(id, map, seen = new Set()) {
+    /**
+     * `seen` keeps a subtree that names a node twice (or itself) from building forever. SVG
+     * and MathML take their namespace from where they sit, as the HTML parser gives it.
+     */
+    build(id, map, ns, seen = new Set()) {
         const spec = map[id];
         if (!spec || seen.has(id))
             return null;
         seen.add(id);
+        const doc = this.ownerDoc();
         if (spec.kind === "text") {
-            const text = this.ownerDoc().createTextNode(spec.text);
-            this.nodes.set(id, text);
+            const text = doc.createTextNode(spec.text);
+            this.bind(id, text);
             return text;
         }
         let el;
+        const box = "data-fauna-iframe" in spec.attributes;
+        const space = spec.tag === "svg" ? SVG_NS : spec.tag === "math" ? MATH_NS : ns;
         try {
-            el = this.ownerDoc().createElement(spec.tag);
+            if (box)
+                el = this.createBox(doc, Object.entries(spec.attributes));
+            else
+                el = space ? doc.createElementNS(space, spec.tag) : doc.createElement(spec.tag);
         }
         catch {
             return null;
         }
-        for (const [name, value] of Object.entries(spec.attributes)) {
-            try {
-                el.setAttribute(name, value);
+        if (!box) {
+            for (const [name, value] of Object.entries(spec.attributes)) {
+                try {
+                    el.setAttribute(name, value);
+                }
+                catch { /* invalid attr name — skip */ }
             }
-            catch { /* invalid attr name — skip */ }
         }
-        this.nodes.set(id, el);
+        this.bind(id, el);
+        const inner = space === SVG_NS && spec.tag === "foreignObject" ? null : space;
         for (const childId of spec.children) {
-            const child = this.build(childId, map, seen);
+            const child = this.build(childId, map, inner, seen);
             if (child)
-                el.appendChild(child);
+                this.insertInto(el, child, null);
         }
+        if (el.localName === "textarea")
+            el.value = el.getAttribute("value") ?? "";
+        if (el.hasAttribute("data-fauna-scroll"))
+            this.scrollTo(el);
         return el;
     }
-    buildFromList(node, list) {
+    buildFromList(node, list, parent) {
         const map = {};
         for (const n of list)
             map[n.id] = n;
-        return this.build(node.id, map);
+        const el = parent;
+        const foreign = (el.namespaceURI === SVG_NS || el.namespaceURI === MATH_NS) && el.localName !== "foreignObject";
+        return this.build(node.id, map, foreign ? el.namespaceURI : null);
     }
     /** Render a fresh snapshot, replacing whatever the mount currently holds. */
     async apply(snapshot) {
-        this.nodes.clear();
+        this.reset();
         this._viewport = snapshot.viewport ?? null;
         const load = ++this.loads;
         const iframe = await this.openFrame("<!doctype html><html><head></head><body></body></html>", load);
         if (!iframe)
             return;
         const doc = iframe.contentDocument;
-        const root = this.build(snapshot.root, snapshot.nodes);
+        const root = this.build(snapshot.root, snapshot.nodes, null);
         if (root?.nodeName === "HTML")
             doc.replaceChild(root, doc.documentElement);
         else if (root)
             doc.body.replaceChildren(root);
+        this.settle();
+        this.mirrorStates(doc);
+        this.rescroll();
         this.flushQueued();
     }
     /** Apply one incremental mutation to the rendered tree. */
@@ -1121,10 +1263,12 @@ export class DomReplayer {
         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();
+                if (!node)
+                    return;
+                node.textContent = mutation.text;
+                if (node.parentNode?.nodeName === "STYLE")
+                    this.mirrorStates(node.ownerDocument);
+                this.rescroll();
                 return;
             }
             case "attribute": {
@@ -1134,6 +1278,8 @@ export class DomReplayer {
                 if (node?.nodeType !== Node.ELEMENT_NODE)
                     return;
                 const el = node;
+                if (this.boxes.has(el) && FRAME_BOX_SKIP.has(mutation.name.toLowerCase()))
+                    return;
                 if (mutation.value === null)
                     el.removeAttribute(mutation.name);
                 else {
@@ -1147,32 +1293,31 @@ export class DomReplayer {
                     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();
-                }
+                    this.scrollTo(el);
+                else
+                    this.rescroll();
                 return;
             }
             case "remove": {
                 const node = this.nodes.get(mutation.id);
-                if (node && node.parentNode)
-                    node.parentNode.removeChild(node);
-                this.nodes.delete(mutation.id);
+                if (node)
+                    this.drop(node);
                 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);
+                const built = this.buildFromList(mutation.node, mutation.subtree, parent);
                 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();
+                this.insertInto(parent, built, sibling);
+                this.settle();
+                if (parent.nodeName === "STYLE" || mutation.subtree.some((n) => n.kind === "element" && n.tag === "style")) {
+                    this.mirrorStates(built.ownerDocument);
+                }
+                this.rescroll();
                 return;
             }
             case "viewport":
@@ -1419,6 +1564,7 @@ export function pageToHtml(root = document.documentElement) {
                     return style;
                 }
             }
+            // A framed document's html, head and body go out as divs the replay turns back into them.
             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());
@@ -1431,11 +1577,8 @@ export function pageToHtml(root = document.documentElement) {
                 catch { /* skip */ }
             }
             mark(clone, el);
-            if (frameRoot) {
+            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;
@@ -1508,8 +1651,8 @@ export function pageToHtml(root = document.documentElement) {
 }
 /** Install a MutationObserver that posts WebMutations to `window[pushName]` as
  *  `{ token, mutation }`, so the host knows which recorder sent each one.
- *  Framed documents are walked, observed, and re-inlined on navigation, with
- *  their html, head, and body addressed as the divs `pageToHtml` emits.
+ *  Framed documents are walked, observed, and re-inlined on navigation, each
+ *  as its own html, head, and body, which viewers replay as a nested frame.
  *  With `remoteFrames`, a frame whose document this page can't read is left to
  *  the host, which streams it from the frame itself: its wrapper says
  *  `data-fauna-iframe="remote"` and holds nothing. With `framed`, this document
@@ -1762,12 +1905,6 @@ export function pageInstallRecorder(pushName, options) {
             return null;
         }
     };
-    const frameRootTag = (el) => {
-        if (el.ownerDocument === document && !framed)
-            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.
@@ -1810,8 +1947,7 @@ export function pageInstallRecorder(pushName, options) {
     };
     // 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.
+    // nothing cross origin. A sheet still loading sends its rules when it loads.
     const isFrameSheet = (el) => el.tagName === "LINK" && (el.ownerDocument !== document || framed) && /\bstylesheet\b/i.test(el.getAttribute("rel") ?? "");
     const sheetCss = (link) => {
         try {
@@ -2016,13 +2152,7 @@ export function pageInstallRecorder(pushName, options) {
         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 };
+        into[id] = { id, kind: "element", tag: el.localName, attributes, children };
         return id;
     };
     const reinline = (el) => {