@agent-native/core-corpus 0.214.0 → 0.217.0

package/corpus/templates/design/app/components/design/bridge/native-source-provider.ts

@@ -29,12 +29,25 @@ import {
   setNativeCaptureRoi,
   type NativeCaptureRoi,
 } from "./native-capture-roi";
+import {
+  isNativeElement,
+  isNativeHtmlElement,
+  isNativeHtmlTag,
+  isNativeNode,
+  isNativeSvgElement,
+  isNativeSvgRoot,
+} from "./native-dom";
 import { supportsNativeOutput2D } from "./native-effect-output-geometry";
 import {
   classifyNativeImageReplaySafety,
   type NativeReplaySafety,
 } from "./native-image-replay-safety";
+import {
+  resolveOpaquePublicAsset,
+  resolveOpaquePublicImage,
+} from "./native-opaque-public-asset";
 import { fitNativeRasterDensity } from "./native-preview-geometry";
+import { trustedOpaquePreviewParentOrigin } from "./native-preview-viewport-transport";
 import {
   composeNativeSourceAffine,
   invertNativeSourceAffine,
@@ -69,6 +82,8 @@ export class NativeSourceError extends Error {
   }
 }
 
+export class NativeSourceCapabilityError extends NativeSourceError {}
+
 export function nativePresentationVisible(
   canvas: HTMLCanvasElement,
   viewport: { width: number; height: number },
@@ -357,24 +372,47 @@ function authoredOpacity(
 
 export function nativeDocumentOrigin(): string {
   if (location.origin !== "null") return location.origin;
+  const parentOrigin =
+    window.frameElement?.ownerDocument.defaultView?.location.origin;
+  if (
+    parentOrigin &&
+    parentOrigin !== "null" &&
+    /^https?:$/.test(new URL(parentOrigin).protocol)
+  )
+    return parentOrigin;
   try {
-    const origin = window.parent.location.origin;
-    if (origin && origin !== "null") return origin;
+    return trustedOpaquePreviewParentOrigin(document.referrer);
   } catch {
     throw new NativeSourceError(
       "source-origin-unavailable",
       "The parent source origin could not be verified.",
     );
   }
-  throw new NativeSourceError(
-    "source-origin-unavailable",
-    "The source document has no trusted inherited origin.",
-  );
+}
+
+function nativeAssetUrl(raw: string): URL {
+  try {
+    return new URL(raw);
+  } catch {
+    const base = document.baseURI;
+    let resolvedBase: string;
+    try {
+      resolvedBase = /^https?:$/.test(new URL(base).protocol)
+        ? base
+        : document.referrer;
+      return new URL(raw, resolvedBase);
+    } catch {
+      throw new NativeSourceError(
+        "source-asset-url-unreadable",
+        "The source asset URL could not be resolved.",
+      );
+    }
+  }
 }
 
 function assertLocalAsset(raw: string): void {
   if (!raw || raw.startsWith("data:") || raw.startsWith("blob:")) return;
-  const url = new URL(raw, document.baseURI);
+  const url = nativeAssetUrl(raw);
   if (url.origin !== nativeDocumentOrigin()) {
     throw new NativeSourceError(
       "source-cross-origin",
@@ -389,13 +427,13 @@ function assertLeafSupported(
   readStyle: SourceStyleReader = getComputedStyle,
 ): void {
   if (element.shadowRoot) {
-    throw new NativeSourceError(
+    throw new NativeSourceCapabilityError(
       "source-shadow-dom",
       "Shadow DOM source content is unsupported.",
     );
   }
-  if (element instanceof HTMLIFrameElement) {
-    throw new NativeSourceError(
+  if (isNativeHtmlTag(element, "iframe")) {
+    throw new NativeSourceCapabilityError(
       "source-iframe",
       "Iframe source content is unsupported.",
     );
@@ -406,7 +444,7 @@ function assertLeafSupported(
     style.filter !== "none" ||
     style.backdropFilter !== "none"
   ) {
-    throw new NativeSourceError(
+    throw new NativeSourceCapabilityError(
       "source-css-composite",
       "CSS blend modes, filters, and backdrop filters need a separate compositor path.",
     );
@@ -417,15 +455,31 @@ function assertLeafSupported(
         "source-transform",
         "The selected source target has a 3D or perspective transform.",
       );
-  } else if (element instanceof HTMLElement) {
+  } else if (isNativeHtmlElement(element)) {
     nodeGlobalTransform(element, readStyle);
   }
   for (const animation of element.getAnimations({ subtree: false })) {
     if (animation.playState !== "running") continue;
-    const keyframes =
-      animation.effect instanceof KeyframeEffect
-        ? animation.effect.getKeyframes()
-        : [];
+    const effect = animation.effect;
+    if (effect === null) continue;
+    if (
+      !("getKeyframes" in effect) ||
+      typeof effect.getKeyframes !== "function"
+    ) {
+      throw new NativeSourceError(
+        "source-animation",
+        "The running source animation's keyframes are unreadable.",
+      );
+    }
+    let keyframes: ComputedKeyframe[];
+    try {
+      keyframes = effect.getKeyframes();
+    } catch {
+      throw new NativeSourceError(
+        "source-animation",
+        "The running source animation's keyframes are unreadable.",
+      );
+    }
     const keys = new Set(keyframes.flatMap((frame) => Object.keys(frame)));
     for (const key of keys) {
       if (
@@ -439,7 +493,7 @@ function assertLeafSupported(
           "scale",
         ].includes(key)
       ) {
-        throw new NativeSourceError(
+        throw new NativeSourceCapabilityError(
           "source-animation",
           "An animated source changes pixels; cached DOM capture supports transform-only motion.",
         );
@@ -453,7 +507,7 @@ function assertLeafSupported(
   for (const pseudo of ["::before", "::after"]) {
     const content = getComputedStyle(element, pseudo).content;
     if (content && content !== "none" && content !== "normal") {
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "source-pseudo",
         "CSS pseudo-element content is unsupported.",
       );
@@ -468,7 +522,7 @@ function hasDirectText(element: Element): boolean {
 }
 
 function isInlineFlowChild(element: Element): boolean {
-  if (element instanceof HTMLBRElement) return true;
+  if (isNativeHtmlTag(element, "br")) return true;
   const display = getComputedStyle(element).display;
   return display === "contents" || display.startsWith("inline");
 }
@@ -500,18 +554,18 @@ function isPureTextFlow(element: HTMLElement): boolean {
     )
       return false;
     if (
-      !(child instanceof HTMLElement) ||
-      child instanceof HTMLImageElement ||
-      child instanceof HTMLVideoElement ||
-      child instanceof HTMLCanvasElement ||
-      child instanceof HTMLIFrameElement ||
+      !isNativeHtmlElement(child) ||
+      isNativeHtmlTag(child, "img") ||
+      isNativeHtmlTag(child, "video") ||
+      isNativeHtmlTag(child, "canvas") ||
+      isNativeHtmlTag(child, "iframe") ||
       ["SCRIPT", "STYLE"].includes(child.tagName)
     )
       return false;
     const style = getComputedStyle(child);
     if (style.position === "absolute" || style.position === "fixed")
       return false;
-    if (child instanceof HTMLBRElement) continue;
+    if (isNativeHtmlTag(child, "br")) continue;
     if (child.textContent?.trim() && !isPureTextFlow(child)) return false;
   }
   return true;
@@ -558,6 +612,108 @@ export function nativeTextFlowUsesDocumentFont(element: HTMLElement): boolean {
   return false;
 }
 
+function nativeRenderedTextFlow(element: HTMLElement): {
+  read(node: Node, start: number, end: number): string;
+  dispose(): void;
+} {
+  const clone = element.cloneNode(true) as HTMLElement;
+  const originals = [element, ...element.querySelectorAll<HTMLElement>("*")];
+  const copies = [clone, ...clone.querySelectorAll<HTMLElement>("*")];
+  for (let index = 0; index < originals.length; index++) {
+    const copy = copies[index]!;
+    copyComputedCss(originals[index]!, copy);
+    copy.removeAttribute("id");
+    copy.removeAttribute("data-agent-native-node-id");
+    for (const attribute of [...copy.attributes])
+      if (attribute.name.startsWith("data-an-native-"))
+        copy.removeAttribute(attribute.name);
+    copy.style.setProperty("animation", "none", "important");
+    copy.style.setProperty("transition", "none", "important");
+  }
+  const language = element.closest("[lang]")?.getAttribute("lang");
+  if (language !== undefined && language !== null)
+    clone.setAttribute("lang", language);
+  clone.setAttribute("data-an-native-presentation", "");
+  for (const [name, value] of Object.entries({
+    position: "fixed",
+    left: "-100000px",
+    top: "0px",
+    opacity: "0",
+    visibility: "visible",
+    "pointer-events": "none",
+    width: `${element.getBoundingClientRect().width}px`,
+    "min-width": "0px",
+    "max-width": "none",
+    "box-sizing": "border-box",
+    transform: "none",
+    translate: "none",
+    rotate: "none",
+    scale: "none",
+  }))
+    clone.style.setProperty(name, value, "important");
+  const nodes = new Map<Node, Text>();
+  const sourceWalker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+  const cloneWalker = document.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
+  for (
+    let node = sourceWalker.nextNode();
+    node;
+    node = sourceWalker.nextNode()
+  ) {
+    const copy = cloneWalker.nextNode();
+    if (!copy)
+      throw new NativeSourceCapabilityError(
+        "source-webfont-layout",
+        "The rendered text clone has a different text structure.",
+      );
+    nodes.set(node, copy as Text);
+  }
+  document.body.append(clone);
+  const fail = (): never => {
+    throw new NativeSourceCapabilityError(
+      "source-webfont-style",
+      "The browser could not preserve transformed text while measuring its rendered lines.",
+    );
+  };
+  try {
+    if (
+      typeof element.innerText !== "string" ||
+      clone.innerText !== element.innerText
+    )
+      fail();
+  } catch (error) {
+    clone.remove();
+    throw error;
+  }
+  return {
+    read(node, start, end) {
+      const copy = nodes.get(node);
+      if (!copy?.parentNode || copy.textContent !== node.textContent)
+        return fail();
+      const value = copy.textContent ?? "";
+      const before = document.createTextNode(value.slice(0, start));
+      const after = document.createTextNode(value.slice(end));
+      const span = document.createElement("span");
+      span.style.cssText =
+        "all:inherit!important;display:inline!important;position:static!important;float:none!important;margin:0!important;padding:0!important;border:0!important;contain:none!important";
+      span.textContent = value.slice(start, end);
+      copy.replaceWith(before, span, after);
+      try {
+        if (
+          clone.innerText !== element.innerText ||
+          typeof span.innerText !== "string"
+        )
+          return fail();
+        return span.innerText;
+      } finally {
+        before.replaceWith(copy);
+        span.remove();
+        after.remove();
+      }
+    },
+    dispose: () => clone.remove(),
+  };
+}
+
 export async function paintNativeTextFlow(
   element: HTMLElement,
   canvas: HTMLCanvasElement,
@@ -566,7 +722,7 @@ export async function paintNativeTextFlow(
   captureRoi?: { density: number; pixelOffset: { x: number; y: number } },
 ): Promise<void> {
   if (!isPureTextFlow(element))
-    throw new NativeSourceError(
+    throw new NativeSourceCapabilityError(
       "source-webfont-layout",
       "Canvas text capture needs a text-only flow without embedded media.",
     );
@@ -588,7 +744,7 @@ export async function paintNativeTextFlow(
       Math.abs(matrix.c) > 1e-5 ||
       Math.abs(matrix.d - 1) > 1e-5
     )
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "source-webfont-transform-unsupported",
         "Viewport Range measurements cannot capture transformed webfont text in local coordinates.",
       );
@@ -611,96 +767,102 @@ export async function paintNativeTextFlow(
   if (captureRoi)
     context.translate(captureRoi.pixelOffset.x, captureRoi.pixelOffset.y);
   context.scale(scaleX, scaleY);
-  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-    const value = node.textContent ?? "";
-    if (!value.trim()) continue;
-    if (/[\u200d\uFE0F\p{Mark}]/u.test(value))
-      throw new NativeSourceError(
-        "source-webfont-grapheme",
-        "Complex joined glyphs need browser-shaped text capture.",
-      );
-    const parent = node.parentElement;
-    if (!parent || parent.closest("[data-an-native-canvas]")) continue;
-    const style = getComputedStyle(parent);
-    if (
-      style.writingMode !== "horizontal-tb" ||
-      style.direction !== "ltr" ||
-      style.textTransform !== "none" ||
-      style.textDecorationLine !== "none" ||
-      style.textShadow !== "none" ||
-      style.fontVariantCaps !== "normal"
-    )
-      throw new NativeSourceError(
-        "source-webfont-style",
-        "This text style needs browser-shaped glyph capture.",
-      );
-    const family = style.fontFamily;
-    const face = [...document.fonts].find((font) =>
-      family.split(",").some(
-        (name) =>
-          name
-            .trim()
-            .replace(/^['"]|['"]$/g, "")
-            .toLowerCase() ===
-          font.family.replace(/^['"]|['"]$/g, "").toLowerCase(),
-      ),
-    );
-    if (face && face.status !== "loaded")
-      throw new NativeSourceError(
-        "source-webfont-pending",
-        `Font ${face.family} is not loaded for Canvas2D capture.`,
-      );
-    context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
-    context.fontKerning = "normal";
-    context.letterSpacing = style.letterSpacing;
-    context.textBaseline = "alphabetic";
-    // guard:allow-raw-color — text masks encode opaque coverage, independent of the editor theme.
-    context.fillStyle = mask
-      ? OPAQUE_COVERAGE_COLOR
-      : (glyphColors?.get(parent) ?? style.color);
-    const segments: { index: number; segment: string }[] = [];
-    for (let index = 0; index < value.length; ) {
-      const segment = String.fromCodePoint(value.codePointAt(index)!);
-      segments.push({ index, segment });
-      index += segment.length;
-    }
-    let lineStart = 0;
-    let lineTop = Number.NaN;
-    let lineRect: DOMRect | null = null;
-    const drawLine = (end: number): void => {
-      if (!lineRect || end <= lineStart) return;
-      const text = value.slice(lineStart, end);
-      const metric = context.measureText(text);
-      const ascent =
-        metric.actualBoundingBoxAscent ||
-        Number.parseFloat(style.fontSize) * 0.8;
-      const descent =
-        metric.actualBoundingBoxDescent ||
-        Number.parseFloat(style.fontSize) * 0.2;
-      const baseline =
-        lineRect.top - bounds.top + (lineRect.height + ascent - descent) / 2;
-      context.fillText(text, lineRect.left - bounds.left, baseline);
-    };
-    for (const segment of segments) {
-      range.setStart(node, segment.index);
-      range.setEnd(node, segment.index + segment.segment.length);
-      const rect = range.getBoundingClientRect();
-      if (!rect.width && !rect.height) continue;
-      if (lineRect && Math.abs(rect.top - lineTop) > 1) {
-        drawLine(segment.index);
-        lineStart = segment.index;
-        lineRect = null;
+  let rendered: ReturnType<typeof nativeRenderedTextFlow> | undefined;
+  try {
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const value = node.textContent ?? "";
+      if (!value.trim()) continue;
+      if (/[\u200d\uFE0F\p{Mark}]/u.test(value))
+        throw new NativeSourceCapabilityError(
+          "source-webfont-grapheme",
+          "Complex joined glyphs need browser-shaped text capture.",
+        );
+      const parent = node.parentElement;
+      if (!parent || parent.closest("[data-an-native-canvas]")) continue;
+      const style = getComputedStyle(parent);
+      if (
+        style.writingMode !== "horizontal-tb" ||
+        style.direction !== "ltr" ||
+        style.textDecorationLine !== "none" ||
+        style.textShadow !== "none" ||
+        style.fontVariantCaps !== "normal"
+      )
+        throw new NativeSourceCapabilityError(
+          "source-webfont-style",
+          "This text style needs browser-shaped glyph capture.",
+        );
+      const renderedText = (start: number, end: number): string =>
+        style.textTransform === "none"
+          ? value.slice(start, end)
+          : (rendered ??= nativeRenderedTextFlow(element)).read(
+              node,
+              start,
+              end,
+            );
+      const font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+      context.font = font;
+      if (
+        document.fonts &&
+        (typeof document.fonts.check !== "function" ||
+          !document.fonts.check(font, renderedText(0, value.length)))
+      )
+        throw new NativeSourceError(
+          "source-webfont-pending",
+          "The font for the rendered glyphs is not loaded for Canvas2D capture.",
+        );
+      context.fontKerning = "normal";
+      context.letterSpacing = style.letterSpacing;
+      context.textBaseline = "alphabetic";
+      // guard:allow-raw-color — text masks encode opaque coverage, independent of the editor theme.
+      context.fillStyle = mask
+        ? OPAQUE_COVERAGE_COLOR
+        : (glyphColors?.get(parent) ?? style.color);
+      const segments: { index: number; segment: string }[] = [];
+      for (let index = 0; index < value.length; ) {
+        const segment = String.fromCodePoint(value.codePointAt(index)!);
+        segments.push({ index, segment });
+        index += segment.length;
       }
-      if (!lineRect) {
-        lineRect = rect;
-        lineTop = rect.top;
-        lineStart = segment.index;
+      let lineStart = 0;
+      let lineTop = Number.NaN;
+      let lineRect: DOMRect | null = null;
+      const drawLine = (end: number): void => {
+        if (!lineRect || end <= lineStart) return;
+        const text = renderedText(lineStart, end);
+        const metric = context.measureText(text);
+        const ascent =
+          metric.actualBoundingBoxAscent ||
+          Number.parseFloat(style.fontSize) * 0.8;
+        const descent =
+          metric.actualBoundingBoxDescent ||
+          Number.parseFloat(style.fontSize) * 0.2;
+        const baseline =
+          lineRect.top - bounds.top + (lineRect.height + ascent - descent) / 2;
+        context.fillText(text, lineRect.left - bounds.left, baseline);
+      };
+      for (const segment of segments) {
+        range.setStart(node, segment.index);
+        range.setEnd(node, segment.index + segment.segment.length);
+        const rect = range.getBoundingClientRect();
+        if (!rect.width && !rect.height) continue;
+        if (lineRect && Math.abs(rect.top - lineTop) > 1) {
+          drawLine(segment.index);
+          lineStart = segment.index;
+          lineRect = null;
+        }
+        if (!lineRect) {
+          lineRect = rect;
+          lineTop = rect.top;
+          lineStart = segment.index;
+        }
       }
+      drawLine(value.length);
     }
-    drawLine(value.length);
+  } finally {
+    rendered?.dispose();
+    context.restore();
+    range.detach();
   }
-  context.restore();
-  range.detach();
 }
 
 function preserveTextFlowStyles(
@@ -720,7 +882,7 @@ function preserveTextFlowStyles(
     }
     assertLeafSupported(child);
     copyComputedCss(child, copy);
-    if (child instanceof HTMLElement) preserveTextFlowStyles(child, copy);
+    if (isNativeHtmlElement(child)) preserveTextFlowStyles(child, copy);
   }
 }
 
@@ -745,6 +907,12 @@ function hasVisibleBoxPaint(style: CSSStyleDeclaration): boolean {
     // guard:allow-raw-color — this compares the browser's computed transparent pixel value.
     (style.backgroundColor !== "rgba(0, 0, 0, 0)" &&
       style.backgroundColor !== "transparent") ||
+    hasVisibleBoxDecoration(style)
+  );
+}
+
+function hasVisibleBoxDecoration(style: CSSStyleDeclaration): boolean {
+  return (
     style.boxShadow !== "none" ||
     (style.outlineStyle &&
       style.outlineStyle !== "none" &&
@@ -882,12 +1050,12 @@ function sizeOf(element: HTMLElement | SVGSVGElement): {
 } {
   const rect = element.getBoundingClientRect();
   const width = Math.ceil(
-    element instanceof HTMLElement
+    isNativeHtmlElement(element)
       ? element.offsetWidth || rect.width
       : rect.width,
   );
   const height = Math.ceil(
-    element instanceof HTMLElement
+    isNativeHtmlElement(element)
       ? element.offsetHeight || rect.height
       : rect.height,
   );
@@ -909,7 +1077,7 @@ function contentBoxOf(element: HTMLElement | SVGSVGElement): {
   width: number;
   height: number;
 } {
-  if (element instanceof SVGSVGElement) {
+  if (isNativeSvgRoot(element)) {
     let box: DOMRect;
     try {
       box = element.getBBox();
@@ -1257,7 +1425,7 @@ function sourceLayoutSize(
   const cache = memo?.matches(target, space) ? memo.sizes : undefined;
   const cached = cache?.get(element);
   if (cached) return cached;
-  if (element instanceof SVGSVGElement) return nativeSvgViewportSize(element);
+  if (isNativeSvgRoot(element)) return nativeSvgViewportSize(element);
   if (
     element === document.documentElement &&
     Number.isFinite(element.offsetWidth) &&
@@ -1341,7 +1509,7 @@ function viewportToTargetAffine(
   memo?: SourceGeometryMemo,
 ): NativeAffine2D {
   const inverted = invertNativeSourceAffine(
-    target instanceof SVGSVGElement
+    isNativeSvgRoot(target)
       ? nativeSvgViewportToClient(target)
       : viewportSourceAffine(target, readStyle, memo),
   );
@@ -1370,19 +1538,18 @@ function relativeAffine(
   rect: NativeAffineBox;
 } {
   if (
-    (element instanceof SVGSVGElement || target instanceof SVGSVGElement) &&
-    (element instanceof HTMLElement || element instanceof SVGSVGElement) &&
-    (target instanceof HTMLElement || target instanceof SVGSVGElement)
+    (isNativeSvgRoot(element) || isNativeSvgRoot(target)) &&
+    (isNativeHtmlElement(element) || isNativeSvgRoot(element)) &&
+    (isNativeHtmlElement(target) || isNativeSvgRoot(target))
   ) {
     const box = localBox ?? {
       x: 0,
       y: 0,
       ...(measuredSize ?? sourceLayoutSize(element, target, space, memo)),
     };
-    const elementToClient =
-      element instanceof SVGSVGElement
-        ? nativeSvgViewportToClient(element)
-        : viewportSourceAffine(element, readStyle);
+    const elementToClient = isNativeSvgRoot(element)
+      ? nativeSvgViewportToClient(element)
+      : viewportSourceAffine(element, readStyle);
     const matrix =
       space === "target-viewport-axis-aligned"
         ? composeAffine(
@@ -1412,7 +1579,7 @@ function relativeAffine(
       rect: geometry.physicalBounds,
     };
   }
-  if (!(element instanceof HTMLElement) || !(target instanceof HTMLElement))
+  if (!isNativeHtmlElement(element) || !isNativeHtmlElement(target))
     throw new NativeSourceError(
       "source-transform",
       "A source has no HTML layout box.",
@@ -1566,7 +1733,7 @@ export function sourceClipPlan(
       space === "target-local" ? target : undefined,
       readStyle,
     );
-    if (!(node instanceof HTMLElement) && !(node instanceof SVGSVGElement))
+    if (!isNativeHtmlElement(node) && !isNativeSvgRoot(node))
       throw new NativeSourceError(
         "source-clip-unreadable",
         "A source clip has no HTML border box.",
@@ -1736,12 +1903,12 @@ function nativeBackdropReceiver(
   ] as const) {
     let sibling = canvas[direction];
     while (
-      sibling instanceof HTMLCanvasElement &&
+      isNativeHtmlTag(sibling, "canvas") &&
       sibling.hasAttribute("data-an-native-backdrop-presentation")
     )
       sibling = sibling[direction];
     if (
-      (sibling instanceof HTMLElement || sibling instanceof SVGSVGElement) &&
+      (isNativeHtmlElement(sibling) || isNativeSvgRoot(sibling)) &&
       sibling.getAttribute("data-agent-native-node-id") === receiverNodeId
     )
       return sibling;
@@ -1765,9 +1932,9 @@ export function nativeTargetOverflowInsets(
   const overflow = classifyNativeComputedOverflowClip(style);
   if (!overflow.ok)
     throw new NativeSourceError(`source-${overflow.reason}`, overflow.detail);
-  if (target instanceof SVGSVGElement) {
+  if (isNativeSvgRoot(target)) {
     if (overflow.edge === "none")
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "source-svg-overflow-unsupported",
         "An SVG root needs a bounded vector viewport clip.",
       );
@@ -2237,12 +2404,12 @@ function laterPaintMayPrecedeReceiver(
         order.phase === "flow");
     if (
       precedes &&
-      ((element instanceof HTMLElement &&
+      ((isNativeHtmlElement(element) &&
         (hasOwnPaint(element) ||
-          element instanceof HTMLImageElement ||
-          element instanceof HTMLVideoElement ||
-          element instanceof HTMLCanvasElement)) ||
-        element instanceof SVGElement)
+          isNativeHtmlTag(element, "img") ||
+          isNativeHtmlTag(element, "video") ||
+          isNativeHtmlTag(element, "canvas"))) ||
+        isNativeSvgElement(element))
     ) {
       const rect = element.getBoundingClientRect();
       if (
@@ -2286,7 +2453,7 @@ function rasterOwnedStyleNodes(
   element: HTMLElement | SVGSVGElement,
   phase: NativeOwnPaintPhase,
 ): Element[] {
-  if (element instanceof SVGSVGElement)
+  if (isNativeSvgRoot(element))
     return [element, ...element.querySelectorAll("*")];
   if (
     phase === "background" ||
@@ -2538,12 +2705,12 @@ function cloneOwnPaint(
     }
     if (ownText && isInlineFlowChild(child)) {
       if (
-        !(child instanceof HTMLElement) ||
-        child instanceof HTMLImageElement ||
-        child instanceof HTMLCanvasElement ||
-        child instanceof HTMLVideoElement
+        !isNativeHtmlElement(child) ||
+        isNativeHtmlTag(child, "img") ||
+        isNativeHtmlTag(child, "canvas") ||
+        isNativeHtmlTag(child, "video")
       ) {
-        throw new NativeSourceError(
+        throw new NativeSourceCapabilityError(
           "source-inline-media",
           "Inline media mixed into a text flow needs a separate source path.",
         );
@@ -2552,7 +2719,7 @@ function cloneOwnPaint(
       continue;
     }
     if (ownText)
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "source-mixed-flow",
         "Block children mixed with direct text cannot be split without changing text layout.",
       );
@@ -2674,7 +2841,7 @@ function cloneOwnPaint(
       node.style.outlineColor = "transparent";
       for (const child of node.children)
         if (
-          child instanceof HTMLElement &&
+          isNativeHtmlElement(child) &&
           !child.hasAttribute("data-an-native-canvas")
         )
           clearBox(child);
@@ -2717,7 +2884,7 @@ export function cloneNativeTextFlow(element: HTMLElement): HTMLElement {
     node.style.boxShadow = "none";
     node.style.opacity = "1";
     for (const child of node.children)
-      if (child instanceof HTMLElement) whiten(child);
+      if (isNativeHtmlElement(child)) whiten(child);
   };
   whiten(clone);
   return clone;
@@ -2897,15 +3064,13 @@ function nativeLeafCaptureDensity(
   requested: number,
   phase: NativeOwnPaintPhase = "all",
 ): number {
-  const size =
-    element instanceof SVGSVGElement
-      ? nativeSvgViewportSize(element)
-      : sizeOf(element);
+  const size = isNativeSvgRoot(element)
+    ? nativeSvgViewportSize(element)
+    : sizeOf(element);
   const style = getComputedStyle(element);
-  const paint =
-    element instanceof SVGSVGElement
-      ? { x: 0, y: 0, ...size }
-      : nativeOwnPaintCaptureBox(style, phase, size);
+  const paint = isNativeSvgRoot(element)
+    ? { x: 0, y: 0, ...size }
+    : nativeOwnPaintCaptureBox(style, phase, size);
   const overflow = classifyNativeComputedOverflowClip(style);
   if (!overflow.ok)
     throw new NativeSourceError(`source-${overflow.reason}`, overflow.detail);
@@ -2962,7 +3127,7 @@ async function inlineMediaPaintImages(
       let sourceUrl: URL;
       try {
         assertLocalAsset(raw);
-        sourceUrl = new URL(raw, document.baseURI);
+        sourceUrl = nativeAssetUrl(raw);
       } catch (error) {
         if (error instanceof NativeSourceError) throw error;
         throw new NativeSourceError(
@@ -2971,7 +3136,7 @@ async function inlineMediaPaintImages(
         );
       }
       const image = new Image();
-      image.src = sourceUrl.href;
+      image.src = await resolveOpaquePublicAsset(sourceUrl.href);
       try {
         await image.decode();
       } catch {
@@ -3186,7 +3351,7 @@ async function rasterOwnPaint(
     nativeTextFlowUsesDocumentFont(element);
   if (canvasText) {
     if (!isPureTextFlow(element))
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "source-webfont-layout",
         "Webfont text mixed with independent child paint needs a separate source path.",
       );
@@ -3195,7 +3360,7 @@ async function rasterOwnPaint(
       node.style.setProperty("-webkit-text-fill-color", "transparent");
       node.style.textShadow = "none";
       for (const child of node.children)
-        if (child instanceof HTMLElement) clearText(child);
+        if (isNativeHtmlElement(child)) clearText(child);
     };
     clearText(clone);
   }
@@ -3334,7 +3499,7 @@ function motionOnlyStyleChange(before: string, after: string): boolean {
 function unchangedAttributeMutation(record: MutationRecord): boolean {
   return (
     record.type === "attributes" &&
-    record.target instanceof Element &&
+    isNativeElement(record.target) &&
     record.attributeName !== null &&
     record.oldValue === record.target.getAttribute(record.attributeName)
   );
@@ -3343,29 +3508,28 @@ function unchangedAttributeMutation(record: MutationRecord): boolean {
 function runtimeCanvasMutation(record: MutationRecord): boolean {
   const runtimeCanvas =
     "canvas[data-an-native-canvas],canvas[data-an-native-presentation]";
-  if (record.target instanceof Element && record.target.closest(runtimeCanvas))
+  if (isNativeElement(record.target) && record.target.closest(runtimeCanvas))
     return true;
   if (record.type !== "childList") return false;
   const changed = [...record.addedNodes, ...record.removedNodes];
   return (
     changed.length > 0 &&
     changed.every(
-      (node) => node instanceof Element && node.matches(runtimeCanvas),
+      (node) => isNativeElement(node) && node.matches(runtimeCanvas),
     )
   );
 }
 
 function omittedSourceMutation(record: MutationRecord): boolean {
-  const target =
-    record.target instanceof Element
-      ? record.target
-      : record.target.parentElement;
+  const target = isNativeElement(record.target)
+    ? record.target
+    : record.target.parentElement;
   if (target?.closest(OMIT)) return true;
   if (record.type !== "childList") return false;
   const changed = [...record.addedNodes, ...record.removedNodes];
   return (
     changed.length > 0 &&
-    changed.every((node) => node instanceof Element && node.matches(OMIT))
+    changed.every((node) => isNativeElement(node) && node.matches(OMIT))
   );
 }
 
@@ -3375,7 +3539,7 @@ export function isNativeSourceOmittedMutation(record: MutationRecord): boolean {
 
 function isNativeSvgVectorGroup(element: Element): boolean {
   return (
-    element instanceof HTMLElement &&
+    isNativeHtmlElement(element) &&
     element.hasAttribute("data-an-svg-vector-group")
   );
 }
@@ -3421,8 +3585,8 @@ export class CachedLeaf<T extends HTMLElement | SVGSVGElement = HTMLElement> {
       canvas: HTMLCanvasElement,
       density: number,
     ) => Promise<void> = async (element, canvas, density) => {
-      if (!(element instanceof HTMLElement))
-        throw new NativeSourceError(
+      if (!isNativeHtmlElement(element))
+        throw new NativeSourceCapabilityError(
           "source-inline-svg",
           "An SVG source needs its vector raster path.",
         );
@@ -3446,7 +3610,7 @@ export class CachedLeaf<T extends HTMLElement | SVGSVGElement = HTMLElement> {
           document.documentElement.hasAttribute(
             "data-an-native-source-idle-observer",
           ) &&
-          record.target instanceof Element &&
+          isNativeElement(record.target) &&
           record.attributeName
         ) {
           const target = record.target;
@@ -3621,10 +3785,10 @@ export class CachedLeaf<T extends HTMLElement | SVGSVGElement = HTMLElement> {
 
 function afterMaybePromise<T>(
   value: T | Promise<T>,
-  continuation: (resolved: T) => void,
+  continuation: (resolved: T) => void | Promise<void>,
 ): void | Promise<void> {
   if (value instanceof Promise) return value.then(continuation);
-  continuation(value);
+  return continuation(value);
 }
 
 function normalizeCachedLeafError(error: unknown, element?: Element): unknown {
@@ -3662,7 +3826,7 @@ async function readReplayImageSafety(
 ): Promise<NativeReplaySafety> {
   try {
     if (raw.length > MAX_REPLAY_IMAGE_BYTES * 2) return "unknown";
-    const url = new URL(raw, document.baseURI);
+    const url = nativeAssetUrl(raw);
     if (
       url.protocol !== "data:" &&
       url.protocol !== "blob:" &&
@@ -3672,7 +3836,8 @@ async function readReplayImageSafety(
     if (!["data:", "blob:", "http:", "https:"].includes(url.protocol))
       return "unknown";
     const network = url.protocol === "http:" || url.protocol === "https:";
-    const response = await fetch(url.href, {
+    const readableUrl = await resolveOpaquePublicAsset(url.href);
+    const response = await fetch(readableUrl, {
       signal,
       ...(network
         ? {
@@ -3715,10 +3880,10 @@ async function readReplayImageSafety(
 }
 
 function staticDomRecord(record: NativeSourceRecord): NativeReplaySafety {
-  if (record.node instanceof SVGSVGElement) {
+  if (isNativeSvgRoot(record.node)) {
     return validateNativeSvgPrimitiveMarkup(record.node.outerHTML);
   }
-  if (!(record.node instanceof HTMLElement)) return "unknown";
+  if (!isNativeHtmlElement(record.node)) return "unknown";
   try {
     for (const pseudo of [undefined, "::before", "::after"]) {
       const style = getComputedStyle(record.node, pseudo);
@@ -3855,7 +4020,7 @@ class SceneProvider implements NativeSceneProvider {
       let moved = false;
       const scope = this.placement === "backdrop" ? document.body : this.target;
       for (const record of records) {
-        if (!(record.target instanceof Element)) continue;
+        if (!isNativeElement(record.target)) continue;
         if (unchangedAttributeMutation(record) || runtimeCanvasMutation(record))
           continue;
         if (
@@ -3933,7 +4098,7 @@ class SceneProvider implements NativeSceneProvider {
 
   private omit(element: Element): boolean {
     if (
-      !(element instanceof HTMLCanvasElement) ||
+      !isNativeHtmlTag(element, "canvas") ||
       !element.hasAttribute("data-an-native-backdrop-presentation")
     )
       return element.matches(OMIT);
@@ -3966,7 +4131,7 @@ class SceneProvider implements NativeSceneProvider {
     element: HTMLElement | SVGSVGElement,
   ): { color: string; textFillColor: string } | undefined {
     if (
-      !(element instanceof HTMLElement) ||
+      !isNativeHtmlElement(element) ||
       this.targetCapture !== "content" ||
       element !== this.target ||
       !element.hasAttribute("data-an-native-text-suppressed")
@@ -4002,12 +4167,12 @@ class SceneProvider implements NativeSceneProvider {
 
   private wakeDynamicSource = (event: Event): void => {
     const scope = this.placement === "backdrop" ? document.body : this.target;
-    if (!(event.target instanceof Node)) return;
+    if (!isNativeNode(event.target)) return;
     const withinSource = scope.contains(event.target);
     const ancestorAnimation =
       (event.type.startsWith("animation") ||
         event.type.startsWith("transition")) &&
-      event.target instanceof Element &&
+      isNativeElement(event.target) &&
       event.target.contains(scope);
     if (withinSource || ancestorAnimation) this.onDirty();
   };
@@ -4142,25 +4307,42 @@ class SceneProvider implements NativeSceneProvider {
 
   needsContinuousFrames(): boolean {
     const scope = this.placement === "backdrop" ? document.body : this.target;
+    const captured = (element: Element): boolean => {
+      for (
+        let current: Element | null = element;
+        current;
+        current = current.parentElement
+      )
+        if (this.omit(current)) return false;
+      return true;
+    };
     if (
-      (scope instanceof HTMLVideoElement && !scope.paused && !scope.ended) ||
-      [...scope.querySelectorAll<HTMLVideoElement>("video")].some(
-        (video) => !video.paused && !video.ended,
-      ) ||
-      (scope instanceof HTMLCanvasElement &&
-        !scope.hasAttribute("data-an-native-canvas") &&
-        !scope.hasAttribute("data-an-native-presentation")) ||
-      scope.querySelector(
-        "canvas:not([data-an-native-canvas]):not([data-an-native-presentation])",
+      [scope, ...scope.querySelectorAll("video,canvas")].some(
+        (element) =>
+          captured(element) &&
+          ((isNativeHtmlTag(element, "video") &&
+            !element.paused &&
+            !element.ended) ||
+            (isNativeHtmlTag(element, "canvas") &&
+              !element.hasAttribute("data-an-native-canvas") &&
+              !element.hasAttribute("data-an-native-presentation"))),
       )
     )
       return true;
-    const animated = (element: Element): boolean =>
-      typeof element.getAnimations === "function" &&
-      element
-        .getAnimations({ subtree: true })
-        .some((animation) => animation.playState === "running");
-    if (animated(scope)) return true;
+    const running = (animation: Animation): boolean => {
+      if (animation.playState !== "running") return false;
+      try {
+        const target = (animation.effect as KeyframeEffect | null)?.target;
+        return !isNativeElement(target) || captured(target);
+      } catch {
+        return true;
+      }
+    };
+    if (
+      typeof scope.getAnimations === "function" &&
+      scope.getAnimations({ subtree: true }).some(running)
+    )
+      return true;
     for (
       let parent = scope.parentElement;
       parent;
@@ -4168,9 +4350,7 @@ class SceneProvider implements NativeSceneProvider {
     )
       if (
         typeof parent.getAnimations === "function" &&
-        parent
-          .getAnimations({ subtree: false })
-          .some((animation) => animation.playState === "running")
+        parent.getAnimations({ subtree: false }).some(running)
       )
         return true;
     return false;
@@ -4192,7 +4372,7 @@ class SceneProvider implements NativeSceneProvider {
     if (
       (this.placement !== "layer" && this.placement !== "fill") ||
       !this.groupLocalBackdropSource ||
-      !(element instanceof HTMLCanvasElement) ||
+      !isNativeHtmlTag(element, "canvas") ||
       !element.hasAttribute("data-an-native-backdrop-presentation") ||
       !element.getAttribute("data-an-native-canvas") ||
       !this.target.contains(element)
@@ -4585,7 +4765,7 @@ class SceneProvider implements NativeSceneProvider {
     readStyle: SourceStyleReader = getComputedStyle,
   ): NativeSourceIsolation[] | null {
     const isBackdropCanvas = (node: Element): node is HTMLCanvasElement =>
-      node instanceof HTMLCanvasElement &&
+      isNativeHtmlTag(node, "canvas") &&
       node.hasAttribute("data-an-native-backdrop-presentation") &&
       !!node.getAttribute("data-an-native-canvas");
     const receiverForCanvas = nativeBackdropReceiver;
@@ -4705,10 +4885,10 @@ class SceneProvider implements NativeSceneProvider {
         if (current !== stop && !transformOwner && hasSourceTransform(style))
           transformOwner = current;
         if (
-          !(current === record.node && current instanceof SVGSVGElement) &&
+          !(current === record.node && isNativeSvgRoot(current)) &&
           hasUnsupportedSourceMask(style.clipPath, style.maskImage)
         )
-          throw new NativeSourceError(
+          throw new NativeSourceCapabilityError(
             "source-mask-unsupported",
             "CSS clip-path and masks need an explicit source mask compositor.",
           );
@@ -4792,7 +4972,7 @@ class SceneProvider implements NativeSceneProvider {
         "[data-an-native-canvas],[data-an-native-fill-instance],[data-an-native-layer-instance]",
       )
     )
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "source-svg-group-native-composition-unsupported",
         "An SVG vector group with nested native effects needs a composed vector source.",
       );
@@ -4807,7 +4987,7 @@ class SceneProvider implements NativeSceneProvider {
     const children = [...element.children].filter((child) => !this.omit(child));
     if (
       hasDirectText(element) ||
-      children.some((child) => !(child instanceof SVGSVGElement))
+      children.some((child) => !isNativeSvgRoot(child))
     )
       throw new NativeSourceError(
         "receiver-svg-group-unsupported",
@@ -4824,7 +5004,7 @@ class SceneProvider implements NativeSceneProvider {
         return [];
       assertLeafSupported(svg);
       if (!supportsNativeOutput2D(style))
-        throw new NativeSourceError(
+        throw new NativeSourceCapabilityError(
           "source-svg-transform-unsupported",
           "An SVG vector group has unsupported child geometry.",
         );
@@ -4859,8 +5039,8 @@ class SceneProvider implements NativeSceneProvider {
     if (metrics) metrics.recordDirectStyleReads += 1;
     const style = getComputedStyle(element);
     if (style.display === "none" || style.visibility === "hidden") return;
-    if (element instanceof SVGSVGElement && element.hasAttribute("transform"))
-      throw new NativeSourceError(
+    if (isNativeSvgRoot(element) && element.hasAttribute("transform"))
+      throw new NativeSourceCapabilityError(
         "source-svg-transform-unsupported",
         "An SVG root transform needs an affine vector source path.",
       );
@@ -4875,7 +5055,7 @@ class SceneProvider implements NativeSceneProvider {
     ) {
       if (metrics) metrics.recordDirectStyleReads += 1;
       if (!supportsNativeOutput2D(getComputedStyle(ancestor)))
-        throw new NativeSourceError(
+        throw new NativeSourceCapabilityError(
           "source-svg-transform-unsupported",
           "An SVG source has a transformed HTML layout boundary.",
         );
@@ -4883,10 +5063,9 @@ class SceneProvider implements NativeSceneProvider {
     }
     if (isNativeSvgVectorGroup(element))
       this.assertSvgVectorGroupComposition(element);
-    const size =
-      element instanceof SVGSVGElement
-        ? nativeSvgViewportSize(element)
-        : sourceLayoutSize(element, this.target, this.coordinateSpace, memo);
+    const size = isNativeSvgRoot(element)
+      ? nativeSvgViewportSize(element)
+      : sourceLayoutSize(element, this.target, this.coordinateSpace, memo);
     const geometry = relativeAffine(
       element,
       this.target,
@@ -4912,7 +5091,7 @@ class SceneProvider implements NativeSceneProvider {
     const isolationPath = this.isolationPath(
       element,
       sourceClip.groupClips,
-      element instanceof SVGSVGElement,
+      isNativeSvgRoot(element),
     );
     if (
       !isolationPath ||
@@ -4932,10 +5111,10 @@ class SceneProvider implements NativeSceneProvider {
           nativeLeafCaptureDensity(
             element,
             this.density,
-            element instanceof SVGSVGElement ? "all" : "coverage",
+            isNativeSvgRoot(element) ? "all" : "coverage",
           ),
         (node, canvas, density) =>
-          node instanceof SVGSVGElement
+          isNativeSvgRoot(node)
             ? rasterNativeSvgSource(
                 node,
                 canvas,
@@ -4977,7 +5156,7 @@ class SceneProvider implements NativeSceneProvider {
           density: nativeLeafCaptureDensity(
             element,
             this.density,
-            element instanceof SVGSVGElement ? "all" : "coverage",
+            isNativeSvgRoot(element) ? "all" : "coverage",
           ),
           maxDimension: 4096,
           maxPixels: 8_388_608,
@@ -5036,7 +5215,7 @@ class SceneProvider implements NativeSceneProvider {
   ): void | Promise<void> {
     if (!element.isConnected || this.omit(element)) return;
     if (element.hasAttribute("data-an-native-receiver-suppressed")) return;
-    if (element instanceof SVGSVGElement)
+    if (isNativeSvgRoot(element))
       return this.recordSvg(
         element,
         out,
@@ -5044,12 +5223,12 @@ class SceneProvider implements NativeSceneProvider {
         memo,
         allowVisibleTargetOverflow,
       );
-    if (element instanceof SVGElement)
-      throw new NativeSourceError(
+    if (isNativeSvgElement(element))
+      throw new NativeSourceCapabilityError(
         "source-inline-svg",
         "An SVG fragment outside an SVG root cannot be captured.",
       );
-    if (!(element instanceof HTMLElement)) return;
+    if (!isNativeHtmlElement(element)) return;
     const recordStyles =
       memo?.styles ?? new Map<Element, CSSStyleDeclaration>();
     const readRecordStyle: SourceStyleReader = (node) => {
@@ -5081,7 +5260,7 @@ class SceneProvider implements NativeSceneProvider {
     )
       return;
     if (
-      element instanceof HTMLCanvasElement &&
+      isNativeHtmlTag(element, "canvas") &&
       element.hasAttribute("data-an-shader-canvas")
     ) {
       for (
@@ -5120,7 +5299,7 @@ class SceneProvider implements NativeSceneProvider {
       };
       const visible = intersect(box, sourceBounds);
       if (visible.width > 0 && visible.height > 0)
-        throw new NativeSourceError(
+        throw new NativeSourceCapabilityError(
           "source-legacy-shader-unsupported",
           "A visible legacy WebGL shader has no synchronized texture and clock source for native composition.",
         );
@@ -5146,7 +5325,7 @@ class SceneProvider implements NativeSceneProvider {
         !isCanvasBackgroundOnly(element, style) &&
         (hasDirectText(element) || hasVisibleBoxPaint(style))
       )
-        throw new NativeSourceError(
+        throw new NativeSourceCapabilityError(
           "source-empty-own-paint-unsupported",
           "A zero-size source has own paint that cannot be captured faithfully.",
         );
@@ -5164,14 +5343,13 @@ class SceneProvider implements NativeSceneProvider {
     );
     const box = geometry.rect;
     if (box.width <= 0 || box.height <= 0) return;
-    const nativeInstanceId =
-      element instanceof HTMLCanvasElement
-        ? element.getAttribute("data-an-native-canvas")
-        : null;
+    const nativeInstanceId = isNativeHtmlTag(element, "canvas")
+      ? element.getAttribute("data-an-native-canvas")
+      : null;
     const media =
-      element instanceof HTMLImageElement ||
-      element instanceof HTMLVideoElement ||
-      (element instanceof HTMLCanvasElement && !nativeInstanceId);
+      isNativeHtmlTag(element, "img") ||
+      isNativeHtmlTag(element, "video") ||
+      (isNativeHtmlTag(element, "canvas") && !nativeInstanceId);
     const ownOverflow = classifyNativeComputedOverflowClip(style);
     if (!ownOverflow.ok)
       throw new NativeSourceError(
@@ -5302,53 +5480,58 @@ class SceneProvider implements NativeSceneProvider {
       return recordMediaPaint(() => undefined);
     }
     const mediaBox = sourceClip.clips[0]?.localBox ?? geometry.localBox;
-    if (element instanceof HTMLImageElement) {
+    if (isNativeHtmlTag(element, "img")) {
       const imageSourceUrl = element.currentSrc || element.src;
       assertLocalAsset(imageSourceUrl);
-      const imageWidth = element.naturalWidth;
-      const imageHeight = element.naturalHeight;
-      const imageRendering = style.imageRendering;
-      if (!element.complete || imageWidth <= 0)
-        throw new NativeSourceError(
-          "source-image-pending",
-          "An image source has not finished loading.",
-        );
-      const image = mediaPlacement(
-        element,
-        mediaBox,
-        imageWidth,
-        imageHeight,
-        style,
+      return afterMaybePromise(
+        resolveOpaquePublicImage(element, imageSourceUrl),
+        (source) => {
+          const imageWidth = source.naturalWidth;
+          const imageHeight = source.naturalHeight;
+          const imageRendering = style.imageRendering;
+          if (!source.complete || imageWidth <= 0)
+            throw new NativeSourceError(
+              "source-image-pending",
+              "An image source has not finished loading.",
+            );
+          const image = mediaPlacement(
+            element,
+            mediaBox,
+            imageWidth,
+            imageHeight,
+            style,
+          );
+          const imageRect = relativeAffine(
+            element,
+            this.target,
+            this.coordinateSpace,
+            image.rect,
+            readRecordStyle,
+            undefined,
+            memo,
+          ).rect;
+          const appendImage = () => {
+            if (metrics) metrics.recordDirectAffineReads += 1;
+            out.push({
+              ...common,
+              rect: imageRect,
+              localBox: image.rect,
+              uv: image.uv,
+              kind: "image",
+              imageRendering: { value: imageRendering },
+              source,
+              imageSourceUrl,
+              width: imageWidth,
+              height: imageHeight,
+              revision: this.assetRevision,
+            });
+          };
+          recordStyles.clear();
+          return recordMediaPaint(appendImage);
+        },
       );
-      const imageRect = relativeAffine(
-        element,
-        this.target,
-        this.coordinateSpace,
-        image.rect,
-        readRecordStyle,
-        undefined,
-        memo,
-      ).rect;
-      const appendImage = () => {
-        if (metrics) metrics.recordDirectAffineReads += 1;
-        out.push({
-          ...common,
-          rect: imageRect,
-          localBox: image.rect,
-          uv: image.uv,
-          kind: "image",
-          imageRendering: { value: imageRendering },
-          source: element,
-          imageSourceUrl,
-          width: imageWidth,
-          height: imageHeight,
-          revision: this.assetRevision,
-        });
-      };
-      recordStyles.clear();
-      return recordMediaPaint(appendImage);
     }
-    if (element instanceof HTMLVideoElement) {
+    if (isNativeHtmlTag(element, "video")) {
       assertLocalAsset(element.currentSrc || element.src);
       if (
         !element.videoWidth ||
@@ -5396,7 +5579,7 @@ class SceneProvider implements NativeSceneProvider {
       recordStyles.clear();
       return recordMediaPaint(appendVideo);
     }
-    if (element instanceof HTMLCanvasElement) {
+    if (isNativeHtmlTag(element, "canvas")) {
       if (nativeInstanceId) {
         out.push({
           ...common,
@@ -5607,7 +5790,7 @@ class SceneProvider implements NativeSceneProvider {
     )
       return false;
     if (metrics) metrics.walkNodeVisits += 1;
-    if (element instanceof HTMLElement && element !== this.target) {
+    if (isNativeHtmlElement(element) && element !== this.target) {
       if (metrics) metrics.walkDirectLayoutSizeReads += 1;
       initialSize = sourceLayoutSize(
         element,
@@ -5626,8 +5809,12 @@ class SceneProvider implements NativeSceneProvider {
               overflow.detail,
             );
           if (overflow.edge !== "none") {
-            if (hasDirectText(element) || hasVisibleBoxPaint(style))
-              throw new NativeSourceError(
+            if (
+              hasDirectText(element) ||
+              hasVisibleBoxDecoration(style) ||
+              (overflow.outset > 0 && hasVisibleBoxPaint(style))
+            )
+              throw new NativeSourceCapabilityError(
                 "source-empty-own-paint-unsupported",
                 "A zero-size clipped source has own paint that cannot be captured faithfully.",
               );
@@ -5644,11 +5831,14 @@ class SceneProvider implements NativeSceneProvider {
     const layerInstance =
       (element !== this.target || this.targetCapture === "appearance") &&
       element.getAttribute("data-an-native-layer-instance");
-    const replacementInstance = layerInstance || fillInstance;
+    const replacementInstance =
+      initialSize && hasEmptySourceLayout(initialSize)
+        ? null
+        : layerInstance || fillInstance;
     if (replacementInstance) {
       const presentations = [...(element.parentElement?.children ?? [])].filter(
         (child): child is HTMLCanvasElement =>
-          child instanceof HTMLCanvasElement &&
+          isNativeHtmlTag(child, "canvas") &&
           child.hasAttribute("data-an-native-presentation") &&
           child.dataset.anNativeCanvas === replacementInstance,
       );
@@ -5775,7 +5965,7 @@ class SceneProvider implements NativeSceneProvider {
         );
     const boxBeforeNativeFill =
       fillCanvases.length > 0 &&
-      element instanceof HTMLElement &&
+      isNativeHtmlElement(element) &&
       !hasDirectText(element);
     if (boxBeforeNativeFill) {
       if (
@@ -5815,8 +6005,8 @@ class SceneProvider implements NativeSceneProvider {
       )
         crossedAsyncBoundary = true;
     }
-    if (element instanceof SVGSVGElement) return crossedAsyncBoundary;
-    if (element instanceof HTMLElement) {
+    if (isNativeSvgRoot(element)) return crossedAsyncBoundary;
+    if (isNativeHtmlElement(element)) {
       let size = initialSize;
       if (crossedAsyncBoundary || !size) {
         if (metrics) metrics.walkDirectLayoutSizeReads += 1;
@@ -5874,7 +6064,7 @@ class SceneProvider implements NativeSceneProvider {
       side === "before" ? "previousElementSibling" : "nextElementSibling";
     for (
       let sibling = this.target[direction];
-      sibling instanceof HTMLCanvasElement &&
+      isNativeHtmlTag(sibling, "canvas") &&
       sibling.hasAttribute("data-an-native-backdrop-presentation");
       sibling = sibling[direction]
     )
@@ -6102,14 +6292,14 @@ class SceneProvider implements NativeSceneProvider {
       getComputedStyle(root).opacity !== "1" ||
       (source !== root && style.opacity !== "1")
     )
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "source-viewport-background-unsupported",
         "The CSS canvas background extends beyond the root box and needs a supported opaque solid source.",
       );
     const hasImage = style.backgroundImage !== "none";
     if (!hasImage && alpha === 0) return null;
     if (!supportedViewportBackgroundImage(style.backgroundImage))
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "source-viewport-background-image-unsupported",
         "The CSS canvas background uses an image type the native renderer cannot capture.",
       );
@@ -6192,13 +6382,13 @@ class SceneProvider implements NativeSceneProvider {
           x: 0 - insets.left,
           y: 0 - insets.top,
           width:
-            (this.target instanceof SVGSVGElement
+            (isNativeSvgRoot(this.target)
               ? nativeSvgViewportSize(this.target).width
               : this.target.offsetWidth) +
             insets.left +
             insets.right,
           height:
-            (this.target instanceof SVGSVGElement
+            (isNativeSvgRoot(this.target)
               ? nativeSvgViewportSize(this.target).height
               : this.target.offsetHeight) +
             insets.top +
@@ -6297,10 +6487,9 @@ class SceneProvider implements NativeSceneProvider {
     if (isNativeSvgVectorGroup(target))
       this.assertSvgVectorGroupComposition(target);
     assertLeafSupported(target, target);
-    const size =
-      target instanceof SVGSVGElement
-        ? nativeSvgViewportSize(target)
-        : { width: target.offsetWidth, height: target.offsetHeight };
+    const size = isNativeSvgRoot(target)
+      ? nativeSvgViewportSize(target)
+      : { width: target.offsetWidth, height: target.offsetHeight };
     const density = nativeLeafCaptureDensity(
       target,
       Math.max(1, this.density),
@@ -6311,7 +6500,7 @@ class SceneProvider implements NativeSceneProvider {
       this.trackLeaf(
         target,
         key,
-        target instanceof SVGSVGElement ? "svg" : "own-paint",
+        isNativeSvgRoot(target) ? "svg" : "own-paint",
       );
       this.receiverLeaf = new CachedLeaf(
         target,
@@ -6323,7 +6512,7 @@ class SceneProvider implements NativeSceneProvider {
             "coverage",
           ),
         async (element, canvas, scale) => {
-          if (element instanceof SVGSVGElement) {
+          if (isNativeSvgRoot(element)) {
             await rasterNativeSvgSource(
               element,
               canvas,
@@ -6410,12 +6599,11 @@ class SceneProvider implements NativeSceneProvider {
       cssBox: expected.plan.cssBox,
       ...size,
       revision: this.receiverLeaf.revision,
-      geometryKind:
-        target instanceof SVGSVGElement
-          ? "svg-silhouette"
-          : isNativeSvgVectorGroup(target)
-            ? "svg-group-silhouette"
-            : "box",
+      geometryKind: isNativeSvgRoot(target)
+        ? "svg-silhouette"
+        : isNativeSvgVectorGroup(target)
+          ? "svg-group-silhouette"
+          : "box",
     };
   }
 
@@ -6454,7 +6642,12 @@ class SceneProvider implements NativeSceneProvider {
       this.svgFillLeaves.set(paint, leaf);
     }
     this.readSceneCalls += 1;
-    const source = await this.readSceneLeaf(leaf, undefined, phase);
+    // Background and inner coverage share one fill raster and cache snapshot.
+    const source = await this.readSceneLeaf(
+      leaf,
+      undefined,
+      paint === "fill" ? "background" : phase,
+    );
     const capture = nativeCaptureRoi(source);
     const box = { x: 0, y: 0, ...size };
     const expected = planNativeCaptureRoi({
@@ -6507,7 +6700,7 @@ class SceneProvider implements NativeSceneProvider {
         "source-placement-invalid",
         "Only a Fill target has an authored background capture.",
       );
-    if (this.target instanceof SVGSVGElement)
+    if (isNativeSvgRoot(this.target))
       return this.readSvgFillPhase(this.target, phase);
     const style = getComputedStyle(this.target);
     if (
@@ -6560,7 +6753,7 @@ class SceneProvider implements NativeSceneProvider {
       );
     if (
       this.placement !== "fill" ||
-      !(this.target instanceof HTMLElement) ||
+      !isNativeHtmlElement(this.target) ||
       !isPureTextFlow(this.target)
     )
       throw new NativeSourceError(
@@ -6596,7 +6789,7 @@ class SceneProvider implements NativeSceneProvider {
 
   hasFillGlyph(): boolean {
     return (
-      !(this.target instanceof SVGSVGElement) &&
+      !isNativeSvgRoot(this.target) &&
       isPureTextFlow(this.target) &&
       Boolean(this.target.textContent?.trim())
     );
@@ -6613,10 +6806,10 @@ class SceneProvider implements NativeSceneProvider {
         "fill-foreground-unavailable",
         "Only a Fill target has a foreground phase.",
       );
-    if (this.target instanceof SVGSVGElement) return this.markReplayRead([]);
+    if (isNativeSvgRoot(this.target)) return this.markReplayRead([]);
     if (isPureTextFlow(this.target)) return this.markReplayRead([]);
     if (hasDirectText(this.target))
-      throw new NativeSourceError(
+      throw new NativeSourceCapabilityError(
         "fill-mixed-text-layout-unsupported",
         "Direct text mixed with independent child paint needs an ordered text source.",
       );
@@ -6796,14 +6989,12 @@ class SceneProvider implements NativeSceneProvider {
         "source-capture-geometry-stale",
         "The Layer records no longer match the current source epoch.",
       );
-    const width =
-      this.target instanceof SVGSVGElement
-        ? nativeSvgViewportSize(this.target).width
-        : this.target.offsetWidth;
-    const height =
-      this.target instanceof SVGSVGElement
-        ? nativeSvgViewportSize(this.target).height
-        : this.target.offsetHeight;
+    const width = isNativeSvgRoot(this.target)
+      ? nativeSvgViewportSize(this.target).width
+      : this.target.offsetWidth;
+    const height = isNativeSvgRoot(this.target)
+      ? nativeSvgViewportSize(this.target).height
+      : this.target.offsetHeight;
     if (![width, height].every((value) => Number.isFinite(value) && value > 0))
       throw new NativeSourceError(
         "source-capture-geometry-invalid",
@@ -6883,15 +7074,16 @@ class SceneProvider implements NativeSceneProvider {
         if (staticDomRecord(record) === "unknown") safety = "unknown";
         continue;
       }
-      if (
-        record.kind !== "image" ||
-        !(record.source instanceof HTMLImageElement)
-      ) {
+      if (record.kind !== "image" || !isNativeHtmlTag(record.source, "img")) {
         safety = "unknown";
         continue;
       }
       const url = record.imageSourceUrl;
-      if (!url || (record.source.currentSrc || record.source.src) !== url) {
+      const localUrl = url ? await resolveOpaquePublicAsset(url) : null;
+      if (
+        !url ||
+        (record.source.currentSrc || record.source.src) !== localUrl
+      ) {
         safety = "unknown";
         continue;
       }
@@ -6910,7 +7102,7 @@ class SceneProvider implements NativeSceneProvider {
       }
       const imageSafety = await cached.result;
       if (!unchanged()) return "unknown";
-      if ((record.source.currentSrc || record.source.src) !== url)
+      if ((record.source.currentSrc || record.source.src) !== localUrl)
         return "unknown";
       if (imageSafety === "dynamic") return "dynamic";
       if (imageSafety === "unknown") safety = "unknown";