@zumer/snapdom-plugins 2.2.2 → 3.0.0-beta.0

package/redact-inputs.js

@@ -0,0 +1,175 @@
+/**
+ * redactInputs - Official SnapDOM Plugin
+ * Mask typed values and optionally exclude blocks or remove named attributes in captures.
+ *
+ * Core captures what the browser paints, which is the whole point of a fidelity-first
+ * renderer: an `email` or `tel` field shows its value in plain text on screen, so the
+ * capture shows it too. The ONE exception core makes is `type="password"`, and only because
+ * the control already paints bullets, so masking it costs zero fidelity.
+ *
+ * Redacting anything else is a deliberate loss of fidelity, so it is opt-in and lives here.
+ * Defaults cover the fields that are usually sensitive AND rendered in the clear.
+ *
+ * The default mask keeps the string's length. Glyph widths can differ, so wrapping and
+ * truncation may change. `mask: () => ''` blanks a field outright.
+ *
+ * The built-in mask without a selector permits unchanged-repeat memoization. Custom maskers
+ * and selectors (including block/attribute rules) run on every capture because they may
+ * read changing external state. Official semantic exporters share this capture's policy.
+ * A changed tree rebuilds fully: the differential path cannot skip this afterClone transformation.
+ * Pinned by __tests__/plugins.transforms.v3.test.js.
+ * @module plugins/redact-inputs
+ *
+ * @param {Object} [options]
+ * @param {string[]} [options.types] - input `type` values to redact. Default:
+ *   ['email', 'tel']. Note 'password' is already masked by core.
+ * @param {string[]} [options.autocomplete] - autocomplete tokens to redact. A trailing '*'
+ *   matches by prefix. Default: ['cc-*', 'current-password', 'new-password', 'one-time-code'].
+ * @param {string} [options.selector] - extra CSS selector for inputs and textareas
+ *   (use it for textareas and app-specific fields).
+ * @param {boolean} [options.all=false] - redact EVERY input and textarea, ignoring the lists.
+ * @param {(value: string, el: Element) => string} [options.mask] - custom masker.
+ * @param {string|string[]} [options.blocks] - CSS selectors for subtrees to exclude,
+ *   honoring the capture's excludeMode (hide by default).
+ * @param {{selector: string, names: string[]}[]} [options.attributes] - exact attributes
+ *   to remove from matching source elements. Does not remove copies in visible text/CSS.
+ * @returns {Object} SnapDOM plugin
+ */
+import { createPrivacyPolicy, getPrivacyPolicy, setPrivacyPolicy } from './privacy-policy.js';
+import { sanitizeClone } from './redact-clone.js';
+
+export function redactInputs(options = {}) {
+  const {
+    types = ['email', 'tel'],
+    autocomplete = ['cc-*', 'current-password', 'new-password', 'one-time-code'],
+    selector = '',
+    all = false,
+    mask = (value) => '•'.repeat(value.length),
+  } = options;
+
+  const blockInput = options.blocks ?? [];
+  const blocks = typeof blockInput === 'string' ? [blockInput] : blockInput;
+  if (!Array.isArray(blocks) || blocks.some(value => typeof value !== 'string' || !value.trim())) {
+    throw new TypeError('[snapdom] redact-inputs: blocks must be a selector or an array of non-empty selectors');
+  }
+  const blockSelectors = [...new Set(blocks.map(value => value.trim()))];
+  const attributeInput = options.attributes ?? [];
+  if (!Array.isArray(attributeInput)) throw new TypeError('[snapdom] redact-inputs: attributes must be an array of rules');
+  const attributes = attributeInput.map(rule => {
+    if (!rule || typeof rule.selector !== 'string' || !rule.selector.trim() || !Array.isArray(rule.names) ||
+        rule.names.some(name => typeof name !== 'string' || !/^[a-zA-Z_][\w:.-]*$/.test(name))) {
+      throw new TypeError('[snapdom] redact-inputs: attribute rules need a selector and exact attribute names');
+    }
+    return { selector: rule.selector.trim(), names: [...new Set(rule.names)] };
+  }).filter(rule => rule.names.length);
+  const extended = blockSelectors.length > 0 || attributes.length > 0;
+  const validatedDocuments = new WeakSet();
+  const validateSelectors = (doc) => {
+    if (!extended || validatedDocuments.has(doc)) return;
+    const probe = doc.createElement('div');
+    for (const value of [...blockSelectors, ...attributes.map(rule => rule.selector)]) {
+      try { probe.matches(value); }
+      catch { throw new TypeError(`[snapdom] redact-inputs: invalid privacy selector ${JSON.stringify(value)}`); }
+    }
+    validatedDocuments.add(doc);
+  };
+
+  const typeSet = new Set(types.map((t) => String(t).toLowerCase()));
+  const acExact = new Set();
+  const acPrefixes = [];
+  for (const token of autocomplete) {
+    const t = String(token).toLowerCase();
+    if (t.endsWith('*')) acPrefixes.push(t.slice(0, -1));
+    else acExact.add(t);
+  }
+
+  function matchesAutocomplete(el) {
+    const ac = (el.getAttribute('autocomplete') || '').toLowerCase();
+    if (!ac) return false;
+    for (const token of ac.split(/\s+/)) {
+      if (acExact.has(token)) return true;
+      for (const prefix of acPrefixes) {
+        if (token.startsWith(prefix)) return true;
+      }
+    }
+    return false;
+  }
+
+  function shouldRedact(el) {
+    if (all) return true;
+    if (selector) {
+      try {
+        if (el.matches(selector)) return true;
+      } catch { /* invalid selector: the other rules still apply */ }
+    }
+    // Read the ATTRIBUTE, not el.type: an unknown type attribute reflects as 'text' through
+    // the property, so a `type="email"` the engine does not implement would slip through.
+    if (el.tagName === 'INPUT' && typeSet.has((el.getAttribute('type') || 'text').toLowerCase())) return true;
+    return matchesAutocomplete(el);
+  }
+
+  return {
+    name: 'redact-inputs',
+    pure: options.mask === undefined && !selector && !extended,
+
+    beforeSnap(ctx) {
+      validateSelectors(ctx.element.ownerDocument);
+      const policy = createPrivacyPolicy(blockSelectors, attributes, shouldRedact);
+      setPrivacyPolicy(ctx, policy);
+      if (blockSelectors.length) {
+        // createContext's compiled exclusion policy closes over this array. Extend it
+        // in place so core and semantic exporters see the same policy before cloning.
+        const exclude = ctx.exclude;
+        if (!Array.isArray(exclude)) throw new Error('[snapdom] redact-inputs requires normalized capture exclusions');
+        for (const value of blockSelectors) if (!exclude.includes(value)) exclude.push(value);
+        // Capturing a child of a private region must not escape that region's policy.
+        if (policy.isBlocked(ctx.element) && !exclude.includes('*')) exclude.push('*');
+        const previous = ctx.shouldExclude;
+        ctx.shouldExclude = (el) => policy.isBlocked(el) || previous(el);
+        if (ctx.excludeMode === 'remove' && policy.isBlocked(ctx.element)) {
+          throw new Error('[snapdom] redact-inputs: cannot remove the capture root; use excludeMode: "hide"');
+        }
+      }
+    },
+
+    // Asset/pseudo phases can create attributes and clone referenced SVG definitions.
+    // Only the extended rules need this pass; the default field plugin keeps its route.
+    ...(extended ? { beforeRender(ctx) { sanitizeClone(ctx, getPrivacyPolicy(ctx), { final: true }); } } : {}),
+
+    afterClone(ctx) {
+      const root = ctx.clone;
+      if (!root || !root.querySelectorAll) return;
+      // querySelectorAll skips the root itself, and the capture root IS routinely a single
+      // field. Include it explicitly (this is the #461 shape of bug).
+      const nodes = [...root.querySelectorAll('input, textarea')];
+      if (root.matches?.('input, textarea')) nodes.unshift(root);
+
+      for (const el of nodes) {
+        // Core turns date/time controls into text on Firefox/WebKit. Their source still
+        // carries the type and selector state the caller asked to match.
+        if (!shouldRedact(ctx.nodeMap?.get(el) || el)) continue;
+        if (el.tagName === 'TEXTAREA') {
+          const masked = String(mask(el.textContent || '', el));
+          // Native canvas rendering and later plugins read value; SVG serialization reads text.
+          el.value = masked;
+          el.textContent = masked;
+          continue;
+        }
+        const masked = String(mask(el.value || '', el));
+        try { el.value = masked; } catch {
+          // File inputs reject non-empty values. A redacted clone must display the mask,
+          // not abort the capture before the remaining fields have been processed.
+          el.type = 'text';
+          el.value = masked;
+        }
+        if (el.value !== masked) {
+          // Number/date controls silently sanitize arbitrary mask text to an empty value.
+          el.type = 'text';
+          el.value = masked;
+        }
+        el.setAttribute('value', masked);
+      }
+      if (extended) sanitizeClone(ctx, getPrivacyPolicy(ctx) || createPrivacyPolicy(blockSelectors, attributes, shouldRedact));
+    }
+  };
+}

package/replace-text.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Type declarations for `@zumer/snapdom-plugins/replace-text`.
+ *
+ * The plugin instance type comes from the core package: one definition of what a plugin IS,
+ * so a plugin that stops matching the host's contract fails to typecheck instead of failing
+ * at capture time.
+ */
+import type { SnapdomPlugin } from '@zumer/snapdom';
+
+export interface TextReplacement {
+  find: string | RegExp;
+  replace: string;
+}
+
+export interface ReplaceTextOptions {
+  replacements?: TextReplacement[];
+}
+
+/** Replaces DOM text in the clone, leaving stylesheet/script text unchanged. */
+export declare function replaceText(options?: ReplaceTextOptions): SnapdomPlugin;

package/replace-text.js

@@ -1,6 +1,9 @@
 /**
  * replaceText - Official SnapDOM Plugin
  * Find-and-replace text in the captured clone.
+ * Preserves stylesheet/script text; replacement arrays remain live between captures.
+ * Pinned by __tests__/plugins.transforms.v3.test.js.
+ * @module plugins/replace-text
  *
  * @param {Object} [options]
  * @param {Array<{find: string|RegExp, replace: string}>} [options.replacements=[]]
@@ -12,12 +15,15 @@ export function replaceText(options = {}) {
   } = options;
 
   function walkTextNodes(node, fn) {
+    // Retained CSS is text too, but changing it would replace styles, URLs and selectors.
+    if (node.nodeType === Node.ELEMENT_NODE && /^(style|script)$/i.test(node.localName)) return;
     if (node.nodeType === Node.TEXT_NODE) {
       fn(node);
     } else {
       for (const child of node.childNodes) {
         walkTextNodes(child, fn);
       }
+      if (node.localName === 'textarea') node.value = node.textContent;
     }
   }
 

package/timestamp-overlay.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Type declarations for `@zumer/snapdom-plugins/timestamp-overlay`.
+ *
+ * The plugin instance type comes from the core package: one definition of what a plugin IS,
+ * so a plugin that stops matching the host's contract fails to typecheck instead of failing
+ * at capture time.
+ */
+import type { SnapdomPlugin } from '@zumer/snapdom';
+
+export interface TimestampOverlayOptions {
+  format?: 'datetime' | 'date' | 'time' | 'iso' | ((date: Date) => string);
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  background?: string;
+  color?: string;
+  fontSize?: number;
+}
+
+/** Adds a timestamp label, evaluating the clock/formatter again for every capture. */
+export declare function timestampOverlay(options?: TimestampOverlayOptions): SnapdomPlugin;

package/timestamp-overlay.js

@@ -1,9 +1,12 @@
 /**
  * timestampOverlay - Official SnapDOM Plugin
  * Adds a translucent timestamp label to the captured clone.
+ * Reads the clock/formatter for every capture; it does not opt into unchanged-repeat memoization.
+ * Pinned by __tests__/plugins.transforms.v3.test.js.
+ * @module plugins/timestamp-overlay
  *
  * @param {Object} [options]
- * @param {string} [options.format='datetime'] - 'datetime' | 'date' | 'time' | 'iso' | custom function
+ * @param {string|((date: Date) => string)} [options.format='datetime'] - 'datetime' | 'date' | 'time' | 'iso' | custom formatter
  * @param {string} [options.position='bottom-right'] - 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  * @param {string} [options.background='rgba(0,0,0,0.6)']
  * @param {string} [options.color='#fff']

package/video-export.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Type declarations for `@zumer/snapdom-plugins/video-export`.
+ *
+ * The plugin instance type comes from the core package: one definition of what a plugin IS,
+ * so a plugin that stops matching the host's contract fails to typecheck instead of failing
+ * at capture time.
+ */
+import type { SnapdomPlugin } from '@zumer/snapdom';
+
+export interface VideoExportOptions {
+  fps?: number;
+  /** Total duration in ms. Ignored when `frames` is set. */
+  duration?: number;
+  /** Explicit frame count; overrides `duration`. */
+  frames?: number;
+  /** Color composited under transparent pixels. */
+  background?: string;
+  /** Capture scale; inherits the original capture when omitted. */
+  scale?: number;
+  /** `videoBitsPerSecond` passed to MediaRecorder. */
+  bitrate?: number;
+  /** Download filename; the default follows the actual .mp4/.webm container. */
+  filename?: string;
+}
+
+/** Adds `result.toMp4()`: records through MediaRecorder, with WebM fallback when needed. */
+export declare function videoExport(options?: VideoExportOptions): SnapdomPlugin;
+export default videoExport;

package/video-export.js

@@ -13,12 +13,12 @@
  * @param {number} [options.duration=2000] - Total duration in ms (ignored if options.frames is set)
  * @param {number} [options.frames] - Explicit frame count (overrides duration)
  * @param {string} [options.background='#ffffff'] - Color composited under transparent pixels
- * @param {number} [options.scale=1] - Capture scale
+ * @param {number} [options.scale] - Capture scale (inherits the capture when omitted)
  * @param {number} [options.bitrate] - videoBitsPerSecond passed to MediaRecorder
- * @param {string} [options.filename] - Download filename (extension auto-set to .mp4/.webm)
+ * @param {string} [options.filename] - Download filename (default follows the recorded container)
  * @returns {Object} SnapDOM plugin
  */
-import { snapdom } from '@zumer/snapdom';
+import { rememberCanvas, exportOption, frameOptions } from './capture-frames.js';
 
 const MIME_CANDIDATES = [
   'video/mp4;codecs=avc1',
@@ -34,7 +34,7 @@ export function videoExport(options = {}) {
     duration = 2000,
     frames: frameOpt = null,
     background = '#ffffff',
-    scale = 1,
+    scale,
     bitrate = null,
     filename = null,
   } = options;
@@ -42,45 +42,28 @@ export function videoExport(options = {}) {
   return {
     name: 'video-export',
 
-    // The export ctx comes from createContext (no `element`). Stash the live
-    // element during a capture hook so toMp4() can re-capture frames from it.
-    beforeSnap(ctx) {
-      if (ctx && ctx.options) ctx.options.__snapSource = ctx.element;
-    },
-
-    defineExports() {
+    defineExports(context) {
+      rememberCanvas(context);
       return {
         mp4: async (ctx, opts = {}) => {
           if (typeof MediaRecorder === 'undefined') {
             throw new Error('[snapdom] video-export: MediaRecorder is not available in this environment');
           }
-          const el = ctx.__snapSource || ctx.element;
+          if (typeof HTMLCanvasElement.prototype.captureStream !== 'function') {
+            throw new Error('[snapdom] video-export: canvas.captureStream is not available in this environment');
+          }
+          const el = ctx.element;
           if (!el) throw new Error('[snapdom] video-export: no source element on context');
 
-          const _fps = opts.fps ?? fps;
-          const _dur = opts.duration ?? duration;
-          const _count = Math.max(1, opts.frames ?? frameOpt ?? Math.round((_dur / 1000) * _fps));
-          const _bg = opts.background ?? background;
-          const _scale = opts.scale ?? scale ?? ctx.scale ?? 1;
-          const _bitrate = opts.bitrate ?? bitrate;
+          const recording = frameOptions(ctx, opts, { fps, duration, frames: frameOpt, scale, background }, 'video-export');
+          const { fps: _fps, count: _count, background: _bg } = recording;
+          const _bitrate = exportOption(ctx, opts, 'bitrate', bitrate);
           const frameMs = 1000 / _fps;
 
-          // 1) Pre-render every frame onto a fixed-size canvas.
-          let W = 0, H = 0;
-          const frames = [];
-          for (let i = 0; i < _count; i++) {
-            const cap = await snapdom(el, { scale: _scale, backgroundColor: _bg, fast: true });
-            const src = await cap.toCanvas();
-            if (i === 0) { W = src.width; H = src.height; }
-            const fc = document.createElement('canvas');
-            fc.width = W; fc.height = H;
-            const fx = fc.getContext('2d');
-            fx.fillStyle = _bg;
-            fx.fillRect(0, 0, W, H);
-            fx.drawImage(src, 0, 0, W, H);
-            frames.push(fc);
-            if (i < _count - 1) await new Promise(r => setTimeout(r, frameMs));
-          }
+          // 1) Recapture the live first frame, retaining the caller's capture policy.
+          // Later frames use the same options and the engine's normal freshness checks.
+          const firstSrc = await recording.next();
+          const W = firstSrc.width, H = firstSrc.height;
 
           // 2) Pick the best supported container/codec.
           const mimeType = MIME_CANDIDATES.find(t =>
@@ -90,33 +73,68 @@ export function videoExport(options = {}) {
             console.warn(`[snapdom] video-export: MP4 not supported by this browser's MediaRecorder; falling back to ${mimeType}`);
           }
 
-          // 3) Play the frames onto a stage canvas while recording its stream.
+          // 3) Request each painted frame where supported. MediaRecorder uses a real-time
+          // clock: slow captures can still stretch timing; requestFrame supplies no timestamp.
           const stage = document.createElement('canvas');
           stage.width = W; stage.height = H;
           const sctx = stage.getContext('2d');
-          const stream = stage.captureStream(_fps);
-
+          const paint = (src) => {
+            sctx.fillStyle = _bg;
+            sctx.fillRect(0, 0, W, H);
+            sctx.drawImage(src, 0, 0, W, H);
+          };
           const recOpts = {};
           if (mimeType) recOpts.mimeType = mimeType;
           if (_bitrate) recOpts.videoBitsPerSecond = _bitrate;
-          const rec = new MediaRecorder(stream, recOpts);
-
           const chunks = [];
-          rec.ondataavailable = e => { if (e.data && e.data.size) chunks.push(e.data); };
-          const stopped = new Promise(res => { rec.onstop = res; });
+          let stream, rec;
+          try {
+            stream = stage.captureStream(0);
+            let track = stream.getVideoTracks()[0];
+            if (!track) throw new Error('[snapdom] video-export: captureStream produced no video track');
+            if (typeof track.requestFrame !== 'function') {
+              // A zero-rate track without requestFrame never receives later paintings.
+              for (const t of stream.getTracks()) t.stop();
+              stream = stage.captureStream(_fps);
+              track = stream.getVideoTracks()[0];
+              if (!track) throw new Error('[snapdom] video-export: captureStream produced no video track');
+            }
+            const pushFrame = () => track.requestFrame?.();
+            rec = new MediaRecorder(stream, recOpts);
+            rec.ondataavailable = e => { if (e.data && e.data.size) chunks.push(e.data); };
+            const stopped = new Promise(resolve => { rec.onstop = resolve; });
+            const failed = new Promise((_, reject) => {
+              rec.onerror = event => reject(event.error || new Error('[snapdom] video-export: MediaRecorder failed'));
+            });
+            // An error can arrive between awaited frame operations. Mark it handled now;
+            // every wait below still observes the original rejection and exits the recorder.
+            failed.catch(() => {});
+            const wait = promise => Promise.race([promise, failed]);
+            const sleep = ms => wait(new Promise(resolve => setTimeout(resolve, ms)));
 
-          rec.start();
-          for (let i = 0; i < frames.length; i++) {
-            sctx.clearRect(0, 0, W, H);
-            sctx.drawImage(frames[i], 0, 0);
-            await new Promise(r => setTimeout(r, frameMs));
+            rec.start();
+            paint(firstSrc);
+            pushFrame();
+            // Hold the first frame too; immediately painting the second used to erase it.
+            await sleep(frameMs);
+            for (let i = 1; i < _count; i++) {
+              const t0 = performance.now();
+              paint(await wait(recording.next()));
+              pushFrame();
+              const remaining = frameMs - (performance.now() - t0);
+              // Give the last painting a full frame interval before stopping the encoder.
+              if (i === _count - 1 || remaining > 0) await sleep(i === _count - 1 ? frameMs : remaining);
+            }
+            rec.stop();
+            await wait(stopped);
+          } finally {
+            if (rec && rec.state !== 'inactive') { try { rec.stop(); } catch { /* already failed */ } }
+            for (const track of stream?.getTracks() || []) track.stop();
           }
-          await new Promise(r => setTimeout(r, frameMs)); // let the last frame land
-          rec.stop();
-          await stopped;
 
-          const isMp4 = mimeType.startsWith('video/mp4');
-          const blob = new Blob(chunks, { type: (mimeType || 'video/webm').split(';')[0] });
+          const actualType = (rec.mimeType || chunks.find(chunk => chunk.type)?.type || mimeType || 'video/webm').split(';')[0];
+          const isMp4 = actualType.startsWith('video/mp4');
+          const blob = new Blob(chunks, { type: actualType });
 
           const dl = opts.download;
           if (dl) {
@@ -124,7 +142,7 @@ export function videoExport(options = {}) {
             const a = document.createElement('a');
             a.href = objUrl;
             const fallbackName = isMp4 ? 'capture.mp4' : 'capture.webm';
-            a.download = typeof dl === 'string' ? dl : (opts.filename || filename || fallbackName);
+            a.download = typeof dl === 'string' ? dl : exportOption(ctx, opts, 'filename', filename || fallbackName);
             a.click();
             setTimeout(() => URL.revokeObjectURL(objUrl), 5000);
           }

package/html-in-canvas.js

@@ -1,139 +0,0 @@
-/**
- * Experimental plugin for WICG html-in-canvas (issue #172).
- * Uses drawElementImage() to render the snapdom clone directly into canvas,
- * bypassing SVG/foreignObject.
- *
- * Requires: Chrome with chrome://flags/#canvas-draw-element enabled.
- * @see https://github.com/WICG/html-in-canvas
- */
-
-const PLUGIN_NAME = 'html-in-canvas'
-
-/**
- * The WICG canvas-place-element spec evolved: Chrome ~130+ exposes drawElement(),
- * earlier flagged builds shipped drawElementImage(). Detect either.
- * @returns {'drawElement'|'drawElementImage'|null}
- */
-function detectDrawApi() {
-  try {
-    const c = document.createElement('canvas')
-    const ctx = c.getContext('2d')
-    if (!ctx) return null
-    if (typeof ctx.drawElement === 'function') return 'drawElement'
-    if (typeof ctx.drawElementImage === 'function') return 'drawElementImage'
-    return null
-  } catch {
-    return null
-  }
-}
-
-/**
- * @returns {import('../../src/core/plugins.js').Plugin}
- */
-export function htmlInCanvasPlugin() {
-  const drawApi = detectDrawApi()
-  const available = !!drawApi
-  if (!available) {
-    console.warn('[snapdom] html-in-canvas plugin: drawElement / drawElementImage not available. Enable chrome://flags/#canvas-draw-element')
-  }
-
-  return {
-    name: PLUGIN_NAME,
-
-    beforeRender(state) {
-      if (!available) return
-      if (!state.clone || !state.element) return
-      state.options.__htmlInCanvas = {
-        clone: state.clone,
-        baseCSS: state.baseCSS || '',
-        fontsCSS: state.fontsCSS || '',
-        classCSS: state.classCSS || '',
-        element: state.element,
-        w0: null,
-        h0: null
-      }
-    },
-
-    afterRender(state) {
-      if (!available) return
-      const meta = state.options?.meta
-      const stored = state.options?.__htmlInCanvas
-      if (meta && stored) {
-        stored.w0 = meta.w0
-        stored.h0 = meta.h0
-      }
-    },
-
-    async defineExports(ctx) {
-      if (!available) return {}
-      const stored = ctx.__htmlInCanvas
-      if (!stored) return {}
-
-      return {
-        htmlInCanvas: async (opts = {}) => {
-          const { clone, baseCSS, fontsCSS, classCSS, element } = stored
-          const w0 = stored.w0 ?? element?.offsetWidth
-          const h0 = stored.h0 ?? element?.offsetHeight
-          const scale = opts.scale ?? ctx.scale ?? 1
-          const dpr = opts.dpr ?? (typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1)
-
-          const rect = element?.getBoundingClientRect?.()
-          const width = w0 ?? rect?.width ?? 100
-          const height = h0 ?? rect?.height ?? 100
-          const outW = Math.round(width * scale * dpr)
-          const outH = Math.round(height * scale * dpr)
-
-          const canvas = document.createElement('canvas')
-          canvas.width = outW
-          canvas.height = outH
-          canvas.setAttribute('layoutsubtree', '')
-
-          const wrapper = document.createElement('div')
-          wrapper.style.cssText = `width:${width}px;height:${height}px;overflow:visible;box-sizing:border-box;`
-          wrapper.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
-
-          const styleTag = document.createElement('style')
-          styleTag.textContent = `${baseCSS}${fontsCSS}svg{overflow:visible;}${classCSS}`
-          wrapper.appendChild(styleTag)
-
-          const cloneCopy = clone.cloneNode(true)
-          wrapper.appendChild(cloneCopy)
-
-          canvas.appendChild(wrapper)
-
-          // Append directly to body, taken out of flow with position:fixed + z-index:-1
-          // so it sits behind the page's content (covered by body/main backgrounds)
-          // while still being painted. visibility:hidden / opacity:0 / left:-9999px
-          // skip the paint pass and trigger "No cached paint record".
-          canvas.style.cssText = 'position:fixed;top:0;left:0;z-index:-1;'
-          document.body.appendChild(canvas)
-
-          try {
-            canvas.getBoundingClientRect()
-            await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)))
-
-            const ctx2d = canvas.getContext('2d')
-            const fn = ctx2d && (ctx2d[drawApi] || ctx2d.drawElement || ctx2d.drawElementImage)
-            if (typeof fn !== 'function') {
-              throw new Error('drawElement / drawElementImage not available on this canvas context')
-            }
-            ctx2d.save()
-            ctx2d.scale(dpr * scale, dpr * scale)
-            fn.call(ctx2d, wrapper, 0, 0, width, height)
-            ctx2d.restore()
-            return canvas
-          } catch (e) {
-            if (e && /paint record/i.test(e.message || '')) {
-              throw new Error('Browser had no paint record for the element. Make sure the document is fully loaded and visible before calling html-in-canvas (drawElement requires a real paint pass).')
-            }
-            throw e
-          } finally {
-            try { canvas.remove() } catch {}
-          }
-        }
-      }
-    }
-  }
-}
-
-export default htmlInCanvasPlugin