@comty.io/core 0.1.3 → 0.1.4

package/src/capture.js

@@ -1,474 +1,258 @@
-export function createScreenshotCapture() {
-    function nextAnimationFrame() {
-      return new Promise((resolve) => {
-        requestAnimationFrame(() => resolve());
-      });
-    }
-
-    async function waitForPaint() {
-      await nextAnimationFrame();
-      await nextAnimationFrame();
-    }
-
-    async function waitForCustomElements(el, timeout = 1600) {
-      if (
-        !(el instanceof Element) ||
-        !window.customElements ||
-        typeof window.customElements.whenDefined !== "function"
-      ) {
-        return;
-      }
-
-      const names = new Set();
-      let current = el;
-      while (current && current instanceof Element) {
-        const tagName = current.tagName.toLowerCase();
-        if (tagName.includes("-")) {
-          names.add(tagName);
-        }
-        current = current.parentElement;
-      }
-
-      if (names.size === 0) return;
-
-      const definitions = [...names].map((name) =>
-        window.customElements.whenDefined(name).catch(() => undefined),
-      );
-      await Promise.race([
-        Promise.all(definitions),
-        new Promise((resolve) => setTimeout(resolve, timeout)),
-      ]);
-    }
+import * as captureEngine from "./capture-engine.js";
+import { createCaptureResources, captureFontCSS } from "./capture-resources.js";
 
-    function syncFormValues(sourceRoot, cloneRoot) {
-      const sourceFields = sourceRoot.querySelectorAll(
-        "input, textarea, select",
-      );
-      const clonedFields = cloneRoot.querySelectorAll(
-        "input, textarea, select",
-      );
-
-      sourceFields.forEach((sourceField, index) => {
-        const clonedField = clonedFields[index];
-        if (!clonedField) return;
-
-        if (sourceField instanceof HTMLTextAreaElement) {
-          clonedField.textContent = sourceField.value;
-          clonedField.setAttribute("value", sourceField.value);
-          return;
-        }
+export function captureContext() {
+  return { url: location.href, width: innerWidth, height: innerHeight, scrollX, scrollY };
+}
 
-        if (sourceField instanceof HTMLInputElement) {
-          clonedField.setAttribute("value", sourceField.value);
-          if (sourceField.checked) {
-            clonedField.setAttribute("checked", "");
-          } else {
-            clonedField.removeAttribute("checked");
-          }
-          return;
-        }
+export async function yieldCapture() {
+  if (globalThis.scheduler?.yield) await globalThis.scheduler.yield();
+  else await new Promise(resolve => setTimeout(resolve, 0));
+}
 
-        if (sourceField instanceof HTMLSelectElement) {
-          Array.from(sourceField.options).forEach((option, optionIndex) => {
-            const clonedOption = clonedField.options[optionIndex];
-            if (!clonedOption) return;
-            if (option.selected) {
-              clonedOption.setAttribute("selected", "");
-            } else {
-              clonedOption.removeAttribute("selected");
-            }
-          });
-        }
-      });
-    }
+const captureExcluded = "#comty-root, .comty-sidepanel, .comty-pin, .comty-bubble, .comty-create-bubble, .comty-popover, .comty-temp-pin, [data-comty-capture-exclude]";
+const transparentPixel = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
 
-    function toAbsoluteUrl(value) {
-      if (!value || value.startsWith("data:") || value.startsWith("blob:")) {
-        return value;
-      }
+export function createScreenshotCapture({ apiUrl, projectKey, getHeaders = () => ({}) } = {}) {
+  async function bounded(promise, ms) {
+    let timer;
+    try { return await Promise.race([promise, new Promise(resolve => { timer = setTimeout(resolve, ms); })]); }
+    finally { clearTimeout(timer); }
+  }
 
-      try {
-        return new URL(value, window.location.href).toString();
-      } catch {
-        return value;
+  async function captureViewportScreenshot({ context = captureContext(), annotation } = {}) {
+    if (document.visibilityState === "hidden") return null;
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 15000);
+    const { signal } = controller;
+    const untilAborted = promise => new Promise((resolve, reject) => {
+      const aborted = () => reject(new Error("Screenshot timed out"));
+      signal.addEventListener("abort", aborted, { once: true });
+      Promise.resolve(promise).then(resolve, reject).finally(() => signal.removeEventListener("abort", aborted));
+      if (signal.aborted) aborted();
+    });
+    let frozen = false;
+    let lastYield = performance.now();
+    const checkContext = () => {
+      signal.throwIfAborted();
+      if (!frozen && (context.url !== location.href || context.width !== innerWidth || context.height !== innerHeight || context.scrollX !== scrollX || context.scrollY !== scrollY)) {
+        throw new Error("Page moved before its screenshot was ready");
       }
-    }
-
-    function isExportSafeUrl(value) {
-      if (!value || value.startsWith("data:")) return true;
-
-      try {
-        const url = new URL(value, window.location.href);
-        return url.origin === window.location.origin;
-      } catch {
-        return false;
+    };
+    const cooperate = async () => {
+      checkContext();
+      if (performance.now() - lastYield >= 6) {
+        await yieldCapture();
+        lastYield = performance.now();
+        checkContext();
       }
-    }
-
-    function blobToDataUrl(blob) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-      });
-    }
-
-    async function urlToDataUrl(value) {
-      const absoluteUrl = toAbsoluteUrl(value);
-      if (!absoluteUrl || absoluteUrl.startsWith("data:")) return absoluteUrl;
-      if (absoluteUrl.startsWith("blob:")) return "";
-
-      try {
-        const response = await fetch(absoluteUrl, {
-          credentials: isExportSafeUrl(absoluteUrl) ? "same-origin" : "omit",
-          mode: "cors",
-        });
-        if (!response.ok) return "";
-        return await blobToDataUrl(await response.blob());
-      } catch {
-        return "";
-      }
-    }
-
-    async function inlineImageResources(clone) {
-      const images = Array.from(clone.querySelectorAll("img"));
-      await Promise.all(
-        images.map(async (image) => {
-          const dataUrl = await urlToDataUrl(image.getAttribute("src") ?? "");
-          if (!dataUrl) {
-            image.removeAttribute("src");
-            image.removeAttribute("srcset");
-            image.style.visibility = "hidden";
-            return;
+    };
+    try {
+      await yieldCapture();
+      await bounded(document.fonts?.ready || Promise.resolve(), 1200);
+      checkContext();
+      const resources = createCaptureResources({ apiUrl, projectKey, getHeaders, signal });
+      const fontFamilies = new Set();
+      const sheets = new Set([...document.styleSheets, ...document.adoptedStyleSheets]);
+      const addFonts = value => value.split(",").forEach(family => fontFamilies.add(family.trim().replace(/^['"]|['"]$/g, "").toLowerCase()));
+      const positioned = [];
+      let cloningAnnotation = false;
+      const options = {
+        resourceCache: Object.create(null),
+        includeQueryParams: true,
+        imagePlaceholder: transparentPixel,
+        signal,
+        fetchRequestInit: { captureFetch: resources },
+        beforeClone: cooperate,
+        placeholder(source) {
+          if (cloningAnnotation) return null;
+          // Offscreen leaf boxes still occupy their exact layout space, but need no
+          // text, fonts or hundreds of computed declarations in the exported SVG.
+          if (!(source instanceof HTMLElement)) return null;
+          if (/^(IFRAME|OBJECT|EMBED)$/.test(source.tagName)) {
+            const spacer = document.createElement("div");
+            const style = getComputedStyle(source);
+            for (const property of style) spacer.style.setProperty(property, style.getPropertyValue(property));
+            return spacer;
           }
-          image.setAttribute("src", dataUrl);
-          image.removeAttribute("srcset");
-        }),
-      );
-
-      clone.querySelectorAll("source").forEach((source) => {
-        source.removeAttribute("src");
-        source.removeAttribute("srcset");
-      });
-    }
-
-    function convertViewportUnits(value, viewportWidth, viewportHeight) {
-      return value.replace(
-        /(-?\d*\.?\d+)(dvh|svh|lvh|vh|dvw|svw|lvw|vw|vmin|vmax)\b/gi,
-        (_, amount, unit) => {
-          const number = Number(amount);
-          if (!Number.isFinite(number)) return `${amount}${unit}`;
-          const normalizedUnit = String(unit).toLowerCase();
-          const base =
-            normalizedUnit === "vw" ||
-            normalizedUnit === "dvw" ||
-            normalizedUnit === "svw" ||
-            normalizedUnit === "lvw"
-              ? viewportWidth
-              : normalizedUnit === "vmin"
-                ? Math.min(viewportWidth, viewportHeight)
-                : normalizedUnit === "vmax"
-                  ? Math.max(viewportWidth, viewportHeight)
-                  : viewportHeight;
-          return `${(number / 100) * base}px`;
+          if (source.children.length || source.shadowRoot) return null;
+          const rect = source.getBoundingClientRect();
+          if (!rect.width || !rect.height || (rect.bottom > 0 && rect.top < context.height && rect.right > 0 && rect.left < context.width)) return null;
+          const style = getComputedStyle(source);
+          if (!["static", "relative"].includes(style.position) || !["block", "flex", "grid"].includes(style.display) || style.transform !== "none") return null;
+          const spacer = document.createElement("div");
+          for (const property of ["display", "margin", "flex", "align-self", "grid-area", "order"]) spacer.style.setProperty(property, style.getPropertyValue(property));
+          Object.assign(spacer.style, { width: `${rect.width}px`, height: `${rect.height}px`, boxSizing: "border-box", visibility: "hidden" });
+          return spacer;
         },
-      );
-    }
-
-    function sanitizeCssForExport(css, viewportWidth, viewportHeight) {
-      return convertViewportUnits(css, viewportWidth, viewportHeight)
-        .replace(/@font-face\s*{[^}]*}/gi, "")
-        .replace(/url\((?!['"]?data:)[^)]+\)/gi, "none");
-    }
-
-    function sanitizeInlineStyles(clone, viewportWidth, viewportHeight) {
-      clone.querySelectorAll("[style]").forEach((node) => {
-        node.setAttribute(
-          "style",
-          sanitizeCssForExport(
-            node.getAttribute("style") ?? "",
-            viewportWidth,
-            viewportHeight,
-          ),
-        );
-      });
-    }
-
-    function removeCaptureLockStyles(clone) {
-      clone.querySelectorAll("[style]").forEach((node) => {
-        const style = node.getAttribute("style") ?? "";
-        const hasCaptureLock =
-          /max-width:\s*none/i.test(style) &&
-          /max-height:\s*none/i.test(style) &&
-          /transform:\s*none/i.test(style) &&
-          /margin:\s*0px/i.test(style);
-
-        if (!hasCaptureLock) return;
-
-        node.style.removeProperty("width");
-        node.style.removeProperty("height");
-        node.style.removeProperty("max-width");
-        node.style.removeProperty("max-height");
-        node.style.removeProperty("margin");
-        node.style.removeProperty("transform");
-        node.style.removeProperty("inset");
-      });
-    }
-
-    function removeExportUnsafeNodes(clone) {
-      clone
-        .querySelectorAll("iframe, canvas, video, audio, object, embed")
-        .forEach((node) => node.remove());
-      clone
-        .querySelectorAll("link[rel~='stylesheet'], link[rel~='preload']")
-        .forEach((node) => node.remove());
-      clone
-        .querySelectorAll(
-          "#comty-root, .comty-sidepanel, .comty-pin:not([data-comty-capture-keep]), .comty-bubble:not([data-comty-capture-keep]), .comty-create-bubble:not([data-comty-capture-keep]), .comty-popover",
-        )
-        .forEach((node) => node.remove());
-    }
-
-    function makeCloneUrlsAbsolute(clone) {
-      clone.querySelectorAll("[src]").forEach((node) => {
-        node.setAttribute("src", toAbsoluteUrl(node.getAttribute("src")));
-      });
-      clone.querySelectorAll("[href]").forEach((node) => {
-        node.setAttribute("href", toAbsoluteUrl(node.getAttribute("href")));
-      });
-      clone.querySelectorAll("[srcset]").forEach((node) => {
-        const srcset = node
-          .getAttribute("srcset")
-          .split(",")
-          .map((entry) => {
-            const parts = entry.trim().split(/\s+/);
-            if (!parts[0]) return "";
-            parts[0] = toAbsoluteUrl(parts[0]);
-            return parts.join(" ");
-          })
-          .filter(Boolean)
-          .join(", ");
-        node.setAttribute("srcset", srcset);
-      });
-    }
-
-    function inlineAccessibleStyles(clone, viewportWidth, viewportHeight) {
-      const style = clone.ownerDocument.createElement("style");
-      let css = "";
-
-      Array.from(document.styleSheets).forEach((styleSheet) => {
-        try {
-          css += Array.from(styleSheet.cssRules)
-            .map((rule) => rule.cssText)
-            .join("\n");
-        } catch {
-          // Cross-origin stylesheets cannot be exported safely into canvas.
-        }
-      });
-
-      if (!css) return;
-      style.textContent = sanitizeCssForExport(
-        css,
-        viewportWidth,
-        viewportHeight,
-      );
-      clone.querySelector("head")?.appendChild(style);
-    }
-
-    function markCaptureElements(root, attributeName) {
-      return [root, ...Array.from(root.querySelectorAll("*"))].map(
-        (element, index) => {
-          const previousValue = element.getAttribute(attributeName);
-          element.setAttribute(attributeName, String(index));
-          return { element, index, previousValue };
+        filter(node) {
+          if (!(node instanceof Element)) return true;
+          if ((!cloningAnnotation && node.matches(captureExcluded)) || /^(SCRIPT|STYLE|LINK|HEAD|NOSCRIPT|AUDIO)$/.test(node.tagName)) return false;
+          return getComputedStyle(node).display !== "none";
         },
-      );
-    }
-
-    function restoreCaptureElementMarks(markedElements, attributeName) {
-      markedElements.forEach(({ element, previousValue }) => {
-        if (previousValue === null) {
-          element.removeAttribute(attributeName);
-          return;
-        }
-        element.setAttribute(attributeName, previousValue);
-      });
-    }
-
-    function removeCaptureElementMarks(clone, attributeName) {
-      clone.removeAttribute(attributeName);
-      clone
-        .querySelectorAll(`[${attributeName}]`)
-        .forEach((element) => element.removeAttribute(attributeName));
-    }
-
-    function pinFixedElementsToViewport(
-      clone,
-      markedElements,
-      attributeName,
-      scrollX,
-      scrollY,
-      viewportWidth,
-      viewportHeight,
-    ) {
-      markedElements.forEach(({ element, index }) => {
-        if (window.getComputedStyle(element).position !== "fixed") return;
-
-        const clonedElement = clone.querySelector(
-          `[${attributeName}="${index}"]`,
-        );
-        if (!(clonedElement instanceof HTMLElement)) return;
-
-        const rect = element.getBoundingClientRect();
-        clonedElement.style.position = "absolute";
-        clonedElement.style.left = `${rect.left + scrollX}px`;
-        clonedElement.style.top = `${rect.top + scrollY}px`;
-        clonedElement.style.right = "auto";
-        clonedElement.style.bottom = "auto";
-        clonedElement.style.boxSizing = "border-box";
-        clonedElement.style.width = `${rect.width || viewportWidth}px`;
-        clonedElement.style.height = `${rect.height || viewportHeight}px`;
-        clonedElement.style.transform = "none";
-      });
-    }
-
-    function syncScrollableElementOffsets(
-      clone,
-      markedElements,
-      attributeName,
-    ) {
-      markedElements.forEach(({ element, index }) => {
-        if (element === document.documentElement || element === document.body) {
-          return;
-        }
-
-        const scrollLeft = element.scrollLeft;
-        const scrollTop = element.scrollTop;
-        if (!scrollLeft && !scrollTop) return;
-
-        const clonedElement = clone.querySelector(
-          `[${attributeName}="${index}"]`,
-        );
-        if (!(clonedElement instanceof HTMLElement)) return;
-
-        const children = Array.from(clonedElement.childNodes);
-        if (!children.length) return;
-
-        const scrollWrapper = clone.ownerDocument.createElement("div");
-        const computedStyle = window.getComputedStyle(element);
-        scrollWrapper.style.transform = `translate(${-scrollLeft}px, ${-scrollTop}px)`;
-        scrollWrapper.style.transformOrigin = "top left";
-        scrollWrapper.style.width = `${Math.max(
-          element.scrollWidth,
-          element.clientWidth,
-        )}px`;
-        scrollWrapper.style.minHeight = `${Math.max(
-          element.scrollHeight,
-          element.clientHeight,
-        )}px`;
-
-        if (computedStyle.display.includes("flex")) {
-          scrollWrapper.style.display = computedStyle.display;
-          scrollWrapper.style.flexDirection = computedStyle.flexDirection;
-          scrollWrapper.style.flexWrap = computedStyle.flexWrap;
-          scrollWrapper.style.alignItems = computedStyle.alignItems;
-          scrollWrapper.style.justifyContent = computedStyle.justifyContent;
-          scrollWrapper.style.gap = computedStyle.gap;
-        } else if (computedStyle.display.includes("grid")) {
-          scrollWrapper.style.display = computedStyle.display;
-          scrollWrapper.style.gridTemplateColumns =
-            computedStyle.gridTemplateColumns;
-          scrollWrapper.style.gridTemplateRows = computedStyle.gridTemplateRows;
-          scrollWrapper.style.gap = computedStyle.gap;
+        afterClone(source, clone) {
+          if (!(source instanceof Element) || !clone.style) return clone;
+          const style = getComputedStyle(source);
+          addFonts(style.fontFamily);
+          for (const pseudo of ["::before", "::after"]) {
+            const pseudoStyle = getComputedStyle(source, pseudo);
+            if (pseudoStyle.content && !["none", "normal"].includes(pseudoStyle.content)) addFonts(pseudoStyle.fontFamily);
+          }
+          if (source.shadowRoot) {
+            for (const sheet of [...source.shadowRoot.styleSheets, ...source.shadowRoot.adoptedStyleSheets]) sheets.add(sheet);
+          }
+          clone.style.setProperty("animation", "none", "important");
+          clone.style.setProperty("transition", "none", "important");
+          clone.style.setProperty("caret-color", "transparent", "important");
+          // Chromium 140 exposes these values but omits them from style enumeration.
+          for (const property of ["text-underline-offset", "text-decoration-thickness"]) {
+            clone.style.setProperty(property, style.getPropertyValue(property));
+          }
+          // WebKit scrollbar pseudo-styles are not part of the computed element style.
+          if ([style.overflowX, style.overflowY].some(value => value === "auto" || value === "scroll") && getComputedStyle(source, "::-webkit-scrollbar").display === "none") {
+            clone.style.setProperty("scrollbar-width", "none", "important");
+          }
+          // A cloned document must not re-run handlers or select a different responsive image.
+          for (const attribute of [...clone.attributes]) {
+            if (attribute.name.startsWith("on")) clone.removeAttribute(attribute.name);
+          }
+          if (source instanceof HTMLImageElement) {
+            clone.removeAttribute("srcset");
+            clone.removeAttribute("sizes");
+            clone.src = source.currentSrc || source.src || transparentPixel;
+            clone.loading = "eager";
+          }
+          if (source instanceof HTMLSourceElement) {
+            clone.removeAttribute("srcset");
+            clone.removeAttribute("src");
+          }
+          if (source instanceof HTMLInputElement) {
+            if (source.type === "password") clone.setAttribute("value", "•".repeat(source.value.length));
+            clone.toggleAttribute("checked", source.checked);
+          }
+          if (source instanceof HTMLSelectElement) {
+            [...clone.options].forEach((option, index) => option.toggleAttribute("selected", source.options[index]?.selected));
+          }
+          const rect = source.getBoundingClientRect();
+          if (!cloningAnnotation && ["fixed", "sticky"].includes(style.position)) {
+            // Composite viewport-bound elements independently of the document's scroll.
+            // Keep a spacer for sticky flow; the real source is never moved or restyled.
+            positioned.push({ clone, rect, zIndex: Number.parseInt(style.zIndex, 10) || 0 });
+            const spacer = document.createElement("div");
+            if (style.position === "sticky") {
+              spacer.style.cssText = clone.style.cssText;
+              spacer.style.position = "static";
+              spacer.style.visibility = "hidden";
+              spacer.style.width = `${source.offsetWidth}px`;
+              spacer.style.height = `${source.offsetHeight}px`;
+            } else spacer.style.display = "none";
+            return spacer;
+          }
+          if (source !== document.documentElement && source !== document.body && (source.scrollTop || source.scrollLeft)) {
+            const wrapper = document.createElement("div");
+            for (const property of ["display", "flex-direction", "flex-wrap", "align-items", "justify-content", "gap", "grid-template-columns", "grid-template-rows"]) {
+              wrapper.style.setProperty(property, style.getPropertyValue(property));
+            }
+            const horizontalPadding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            wrapper.style.width = `${Math.max(source.scrollWidth, source.clientWidth) - horizontalPadding}px`;
+            wrapper.style.transform = `translate(${-source.scrollLeft}px, ${-source.scrollTop}px)`;
+            wrapper.style.transformOrigin = "top left";
+            wrapper.append(...clone.childNodes);
+            clone.append(wrapper);
+            clone.style.display = "block";
+          }
+          return clone;
+        },
+      };
+      const clone = await captureEngine.cloneNode(document.documentElement, options, true);
+      checkContext();
+      frozen = true;
+      const stage = document.createElement("div");
+      stage.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+      stage.style.position = "relative";
+      stage.style.width = `${context.width}px`;
+      stage.style.height = `${context.height}px`;
+      stage.style.overflow = "hidden";
+      // The browser propagates the root (or body's) background to the viewport;
+      // an HTML clone inside SVG does not, especially with collapsed margins.
+      const rootStyle = getComputedStyle(document.documentElement);
+      stage.style.backgroundColor = rootStyle.backgroundColor === "rgba(0, 0, 0, 0)" && rootStyle.backgroundImage === "none"
+        ? getComputedStyle(document.body).backgroundColor : rootStyle.backgroundColor;
+      const documentLayer = document.createElement("div");
+      documentLayer.style.transform = `translate(${-context.scrollX}px, ${-context.scrollY}px)`;
+      documentLayer.style.transformOrigin = "top left";
+      clone.style.width = `${context.width}px`;
+      clone.style.height = `${Math.max(document.documentElement.scrollHeight, context.height)}px`;
+      clone.style.overflow = "visible";
+      clone.style.margin = "0";
+      documentLayer.append(clone);
+      stage.append(documentLayer);
+      for (const item of positioned.sort((a, b) => a.zIndex - b.zIndex)) {
+        const { clone: node, rect } = item;
+        if (rect.bottom <= 0 || rect.right <= 0 || rect.top >= context.height || rect.left >= context.width) continue;
+        Object.assign(node.style, { position: "absolute", left: `${rect.left}px`, top: `${rect.top}px`, right: "auto", bottom: "auto", width: `${rect.width}px`, height: `${rect.height}px`, boxSizing: "border-box", margin: "0", transform: "none" });
+        stage.append(node);
+      }
+      if (annotation) {
+        // Measure the real Comty components in an invisible host, then include
+        // their styled clones in the same font/image embedding as the page.
+        const mounted = annotation();
+        try {
+          cloningAnnotation = true;
+          for (const source of mounted.elements) {
+            const rect = source.getBoundingClientRect();
+            const node = await captureEngine.cloneNode(source, options, true);
+            Object.assign(node.style, { position: "absolute", left: `${rect.left}px`, top: `${rect.top}px`, right: "auto", bottom: "auto", width: `${rect.width}px`, height: `${rect.height}px`, boxSizing: "border-box", margin: "0", transform: "none" });
+            stage.append(node);
+          }
+        } finally {
+          cloningAnnotation = false;
+          mounted.dispose();
         }
-
-        children.forEach((child) => scrollWrapper.appendChild(child));
-        clonedElement.appendChild(scrollWrapper);
-      });
-    }
-
-    async function captureViewportScreenshot() {
-      await waitForPaint();
-
-      const width = window.innerWidth;
-      const height = window.innerHeight;
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
-      const captureWidth = Math.max(width + scrollX, width);
-      const documentHeight = Math.max(
-        document.documentElement.scrollHeight,
-        document.body?.scrollHeight ?? 0,
-        height,
-      );
-      const captureIdAttribute = "data-comty-capture-id";
-      const markedElements = markCaptureElements(
-        document.documentElement,
-        captureIdAttribute,
-      );
-      let clone;
-
-      try {
-        clone = document.documentElement.cloneNode(true);
-        pinFixedElementsToViewport(
-          clone,
-          markedElements,
-          captureIdAttribute,
-          scrollX,
-          scrollY,
-          width,
-          height,
-        );
-        syncScrollableElementOffsets(clone, markedElements, captureIdAttribute);
-      } finally {
-        restoreCaptureElementMarks(markedElements, captureIdAttribute);
       }
-
-      clone.querySelectorAll("script").forEach((node) => node.remove());
-      syncFormValues(document, clone);
-      makeCloneUrlsAbsolute(clone);
-      await inlineImageResources(clone);
-      inlineAccessibleStyles(clone, width, height);
-      sanitizeInlineStyles(clone, width, height);
-      removeCaptureLockStyles(clone);
-      removeExportUnsafeNodes(clone);
-      removeCaptureElementMarks(clone, captureIdAttribute);
-      clone.style.width = `${captureWidth}px`;
-      clone.style.height = `${documentHeight}px`;
-      clone.style.margin = "0";
-      clone.style.overflow = "visible";
-
-      const clonedBody = clone.querySelector("body");
-      if (clonedBody instanceof HTMLElement) {
-        clonedBody.style.width = getComputedStyle(document.body).width;
-        clonedBody.style.minHeight = `${documentHeight}px`;
-        clonedBody.style.margin = clonedBody.style.margin || "0";
+      const fonts = await untilAborted(captureFontCSS(sheets, fontFamilies, resources, captureEngine.embedResources, options));
+      if (fonts) {
+        const style = document.createElement("style");
+        style.textContent = fonts;
+        stage.prepend(style);
       }
-
-      const wrapper = document.createElement("div");
-      wrapper.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-      wrapper.style.position = "relative";
-      wrapper.style.width = `${captureWidth}px`;
-      wrapper.style.height = `${documentHeight}px`;
-      wrapper.style.overflow = "hidden";
-      wrapper.style.transform = `translate(${-scrollX}px, ${-scrollY}px)`;
-      wrapper.style.transformOrigin = "top left";
-      wrapper.appendChild(clone);
-
-      const markup = new XMLSerializer().serializeToString(wrapper);
-      const svg = `
-        <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-          <foreignObject width="100%" height="100%">${markup}</foreignObject>
-        </svg>
-      `;
-      return {
-        blob: new Blob([svg], { type: "image/svg+xml" }),
-        width,
-        height,
-      };
+      // Pseudo-element styles are generated by the library and need their URLs embedded too.
+      for (const style of stage.querySelectorAll("style")) {
+        await cooperate();
+        style.textContent = await captureEngine.embedResources(style.textContent, document.baseURI, options);
+      }
+      await untilAborted(captureEngine.embedImages(stage, options));
+      checkContext();
+      await yieldCapture();
+      const svg = await captureEngine.nodeToDataURL(stage, context.width, context.height);
+      const image = new Image();
+      image.src = svg;
+      await untilAborted(image.decode());
+      checkContext();
+      const scale = Math.min(2, devicePixelRatio || 1, 2560 / context.width, 2560 / context.height);
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.round(context.width * scale);
+      canvas.height = Math.round(context.height * scale);
+      const ctx = canvas.getContext("2d");
+      ctx.scale(scale, scale);
+      ctx.drawImage(image, 0, 0);
+      let blob = await untilAborted(new Promise(resolve => canvas.toBlob(resolve, "image/png")));
+      if (!blob) throw new Error("Screenshot encoding failed");
+      if (blob.size > 2800000) {
+        ctx.globalCompositeOperation = "destination-over";
+        ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue("background-color");
+        ctx.fillRect(0, 0, context.width, context.height);
+        blob = await untilAborted(new Promise(resolve => canvas.toBlob(resolve, "image/jpeg", 0.9)));
+        if (!blob) throw new Error("Screenshot encoding failed");
+      }
+      // CSS dimensions keep the eyedropper's coordinate system independent of DPR.
+      return { blob, width: canvas.width, height: canvas.height, cssWidth: context.width, cssHeight: context.height };
+    } finally {
+      clearTimeout(timeout);
+      controller.abort();
     }
-
-    return { waitForPaint, waitForCustomElements, captureViewportScreenshot };
+  }
+  return { captureViewportScreenshot };
 }
 
 // Page-local counterpart of the native eyedropper; never captures outside the page.
@@ -516,7 +300,9 @@ export function createColorMagnifier({ root, isComtyElement, capture }) {
     sampledHex = null;
     if (!enabled) return;
     try {
-      const { blob } = await capture();
+      const screenshot = await capture();
+      if (!screenshot) return;
+      const { blob, cssWidth, cssHeight } = screenshot;
       if (!enabled || version !== revision) return;
       const dataUrl = await new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -532,7 +318,11 @@ export function createColorMagnifier({ root, isComtyElement, capture }) {
       const probe = document.createElement('canvas').getContext('2d');
       probe.drawImage(next, 0, 0);
       probe.getImageData(0, 0, 1, 1);
-      image = next;
+      const scaled = document.createElement('canvas');
+      scaled.width = cssWidth || next.width;
+      scaled.height = cssHeight || next.height;
+      scaled.getContext('2d').drawImage(next, 0, 0, scaled.width, scaled.height);
+      image = scaled;
       paint();
     } catch { /* The CSS-colour fallback remains available without screen permission. */ }
   }