arcy.js 0.0.2 → 0.1.1

package/dist/picker-JPESE6JJ.js

@@ -0,0 +1,2134 @@
+import { PICKER_CONTRACT, PICKER_GLOBAL } from './chunk-DKYMIAYF.js';
+import { createShell, injectStyles, warn, HOST_ATTRIBUTE } from './chunk-LGWYJSYX.js';
+import { matchTarget } from './chunk-NIHUDSWK.js';
+import { resolveInteractiveTarget, createTargetFingerprint, captureEventFingerprint, closestAcrossShadow, isStableId, containsPii, SELECTOR_CANDIDATES_MAX, collectElementsDeep, querySelectorAllDeep } from './chunk-NY3NXM2V.js';
+
+/* arcy.js — https://arcyai.com */
+
+// src/fingerprint/selector.ts
+var TIER_TEST_ATTR = 1;
+var TIER_SEMANTIC_ATTR = 2;
+var TIER_SEMANTIC_CLASS = 5;
+var TEST_ATTRS = ["data-testid", "data-test", "data-cy"];
+var SEMANTIC_ATTRS = ["name", "for", "aria-label"];
+var UTILITY_BARE = /* @__PURE__ */ new Set([
+  "flex",
+  "grid",
+  "block",
+  "hidden",
+  "inline",
+  "contents",
+  "table",
+  "isolate",
+  "static",
+  "fixed",
+  "absolute",
+  "relative",
+  "sticky",
+  "visible",
+  "invisible",
+  "truncate",
+  "italic",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "antialiased",
+  "container",
+  "border",
+  "rounded",
+  "shadow",
+  "ring",
+  "outline",
+  "transition",
+  "underline",
+  "grow",
+  "shrink",
+  "sr-only"
+]);
+var UTILITY_PREFIX = /^-?(?:p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|space|w|h|min-w|min-h|max-w|max-h|inset|top|right|bottom|left|z|text|font|leading|tracking|bg|border|rounded|shadow|opacity|flex|grid|col|row|order|basis|justify|items|content|self|place|overflow|object|aspect|size|translate|scale|rotate|duration|delay|ease|transition|ring|outline|fill|stroke|divide|decoration|cursor|select|list|align|whitespace|break|animate|blur|backdrop)-(.+)$/;
+var UTILITY_SUFFIX_WORDS = /* @__PURE__ */ new Set([
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "full",
+  "auto",
+  "none",
+  "center",
+  "start",
+  "end",
+  "between",
+  "around",
+  "evenly",
+  "baseline",
+  "stretch",
+  "wrap",
+  "nowrap",
+  "reverse",
+  "col",
+  "row",
+  "bold",
+  "semibold",
+  "medium",
+  "normal",
+  "light",
+  "thin",
+  "black",
+  "white",
+  "transparent",
+  "current",
+  "scroll",
+  "clip",
+  "ellipsis",
+  "pointer",
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "middle",
+  "justify",
+  "screen",
+  "fit",
+  "min",
+  "max",
+  "visible",
+  "hidden",
+  "dashed",
+  "dotted",
+  "solid",
+  "double",
+  "in",
+  "out",
+  // shadcn/Tailwind theme tokens (`bg-background`, `border-border`)
+  "border",
+  "background",
+  "foreground",
+  "muted",
+  "primary",
+  "secondary",
+  "accent",
+  "destructive",
+  "card",
+  "popover",
+  "input"
+]);
+function isUtilityShape(raw) {
+  const cls = raw.startsWith("!") ? raw.slice(1) : raw;
+  if (cls.includes(":") || cls.includes("[") || cls.includes("]") || cls.includes("/"))
+    return true;
+  if (UTILITY_BARE.has(cls)) return true;
+  const match = UTILITY_PREFIX.exec(cls);
+  if (match === null) return false;
+  const suffix = match[1];
+  if (/\d/.test(suffix)) return true;
+  return suffix.split("-").every((part) => UTILITY_SUFFIX_WORDS.has(part));
+}
+var GENERATED_CLASS_PREFIXES = ["css-", "sc-", "jss-"];
+function looksGenerated(cls) {
+  for (const prefix of GENERATED_CLASS_PREFIXES) {
+    if (cls.startsWith(prefix)) return true;
+  }
+  const segment = cls.split(/[_-]/).pop() ?? "";
+  return segment.length >= 5 && /\d/.test(segment) && /[a-z]/.test(segment) && /[A-Z]/.test(segment);
+}
+function countClasses(doc) {
+  const all = collectElementsDeep(doc);
+  const counts = /* @__PURE__ */ new Map();
+  for (const el of all) {
+    const classList = el.classList;
+    for (let j = 0; j < classList.length; j += 1) {
+      const cls = classList[j];
+      counts.set(cls, (counts.get(cls) ?? 0) + 1);
+    }
+  }
+  return { counts, total: all.length };
+}
+var FREQUENCY_MIN = 10;
+var FREQUENCY_RATIO = 0.02;
+function frequencyThreshold(totalElements) {
+  return Math.max(FREQUENCY_MIN, Math.ceil(totalElements * FREQUENCY_RATIO));
+}
+var SELECTOR_VALUE_MAX = 80;
+function attrValue(el, attr) {
+  const raw = el.getAttribute(attr);
+  if (raw === null) return null;
+  if (raw.trim() === "" || raw.length > SELECTOR_VALUE_MAX) return null;
+  if (/[\n\r\t\f]/.test(raw)) return null;
+  if (containsPii(raw)) return null;
+  return raw;
+}
+function attrSelector(attr, value) {
+  return `[${attr}="${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"]`;
+}
+function cssEscapeIdent(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function")
+    return CSS.escape(value);
+  let escaped = value.replace(/[^a-zA-Z0-9_\u00A0-\uFFFF-]/g, (ch) => "\\" + ch);
+  if (/^\d/.test(escaped)) escaped = `\\3${escaped[0]} ${escaped.slice(1)}`;
+  else if (/^-\d/.test(escaped))
+    escaped = `-\\3${escaped[1]} ${escaped.slice(2)}`;
+  else if (escaped === "-") escaped = "\\-";
+  return escaped;
+}
+function matchCountFor(doc, selector, el) {
+  let matches;
+  try {
+    matches = querySelectorAllDeep(doc, selector);
+  } catch {
+    return null;
+  }
+  return matches.includes(el) ? matches.length : null;
+}
+var XHTML_NS = "http://www.w3.org/1999/xhtml";
+function rankSelectors(el) {
+  try {
+    return rank(el);
+  } catch {
+    return { candidates: [], autoSelector: null };
+  }
+}
+function rank(el) {
+  const doc = el.ownerDocument;
+  const tag = el.namespaceURI === null || el.namespaceURI === XHTML_NS ? el.tagName.toLowerCase() : el.tagName;
+  const raw = [];
+  for (const attr of TEST_ATTRS) {
+    const value = attrValue(el, attr);
+    if (value !== null)
+      raw.push({ selector: attrSelector(attr, value), tier: TIER_TEST_ATTR });
+  }
+  const id = el.getAttribute("id");
+  if (id !== null && isStableId(id) && !containsPii(id)) {
+    raw.push({ selector: `#${cssEscapeIdent(id)}`, tier: TIER_SEMANTIC_ATTR });
+  }
+  for (const attr of SEMANTIC_ATTRS) {
+    const value = attrValue(el, attr);
+    if (value !== null)
+      raw.push({
+        selector: attrSelector(attr, value),
+        tier: TIER_SEMANTIC_ATTR
+      });
+  }
+  const role = attrValue(el, "role");
+  if (role !== null) {
+    raw.push({
+      selector: `${tag}${attrSelector("role", role)}`,
+      tier: TIER_SEMANTIC_ATTR
+    });
+  }
+  if (el.classList.length > 0) {
+    const { counts, total } = countClasses(doc);
+    const threshold = frequencyThreshold(total);
+    const classList = el.classList;
+    const seenClasses = /* @__PURE__ */ new Set();
+    for (let i = 0; i < classList.length; i += 1) {
+      const cls = classList[i];
+      if (seenClasses.has(cls)) continue;
+      seenClasses.add(cls);
+      if (isUtilityShape(cls) || looksGenerated(cls) || containsPii(cls))
+        continue;
+      if ((counts.get(cls) ?? 0) > threshold) continue;
+      raw.push({
+        selector: `${tag}.${cssEscapeIdent(cls)}`,
+        tier: TIER_SEMANTIC_CLASS
+      });
+    }
+  }
+  const candidates = [];
+  for (const entry of raw) {
+    const matchCount = matchCountFor(doc, entry.selector, el);
+    if (matchCount === null) continue;
+    candidates.push({ selector: entry.selector, tier: entry.tier, matchCount });
+  }
+  candidates.sort((a, b) => a.tier - b.tier || a.matchCount - b.matchCount);
+  const capped = candidates.slice(0, SELECTOR_CANDIDATES_MAX);
+  const top = capped[0];
+  const autoSelector = top !== void 0 && top.tier <= TIER_SEMANTIC_ATTR && top.matchCount === 1 ? top.selector : null;
+  return { candidates: capped.map((c) => c.selector), autoSelector };
+}
+var PREFIX = "[modern-screenshot]";
+var IN_BROWSER = typeof window !== "undefined";
+var SUPPORT_WEB_WORKER = IN_BROWSER && "Worker" in window;
+var USER_AGENT = IN_BROWSER ? window.navigator?.userAgent : "";
+var IN_CHROME = USER_AGENT.includes("Chrome");
+var IN_SAFARI = USER_AGENT.includes("AppleWebKit") && !IN_CHROME;
+var IN_FIREFOX = USER_AGENT.includes("Firefox");
+var isContext = (value) => value && "__CONTEXT__" in value;
+var isCssFontFaceRule = (rule) => rule.constructor.name === "CSSFontFaceRule";
+var isCSSImportRule = (rule) => rule.constructor.name === "CSSImportRule";
+var isLayerBlockRule = (rule) => rule.constructor.name === "CSSLayerBlockRule";
+var isElementNode = (node) => node.nodeType === 1;
+var isSVGElementNode = (node) => typeof node.className === "object";
+var isSVGImageElementNode = (node) => node.tagName === "image";
+var isSVGUseElementNode = (node) => node.tagName === "use";
+var isHTMLElementNode = (node) => isElementNode(node) && typeof node.style !== "undefined" && !isSVGElementNode(node);
+var isCommentNode = (node) => node.nodeType === 8;
+var isTextNode = (node) => node.nodeType === 3;
+var isImageElement = (node) => node.tagName === "IMG";
+var isVideoElement = (node) => node.tagName === "VIDEO";
+var isCanvasElement = (node) => node.tagName === "CANVAS";
+var isTextareaElement = (node) => node.tagName === "TEXTAREA";
+var isInputElement = (node) => node.tagName === "INPUT";
+var isStyleElement = (node) => node.tagName === "STYLE";
+var isScriptElement = (node) => node.tagName === "SCRIPT";
+var isSelectElement = (node) => node.tagName === "SELECT";
+var isSlotElement = (node) => node.tagName === "SLOT";
+var isIFrameElement = (node) => node.tagName === "IFRAME";
+var consoleWarn = (...args) => console.warn(PREFIX, ...args);
+function supportWebp(ownerDocument) {
+  const canvas = ownerDocument?.createElement?.("canvas");
+  if (canvas) {
+    canvas.height = canvas.width = 1;
+  }
+  return Boolean(canvas) && "toDataURL" in canvas && Boolean(canvas.toDataURL("image/webp").includes("image/webp"));
+}
+var isDataUrl = (url) => url.startsWith("data:");
+function resolveUrl(url, baseUrl) {
+  if (url.match(/^[a-z]+:\/\//i))
+    return url;
+  if (IN_BROWSER && url.match(/^\/\//))
+    return window.location.protocol + url;
+  if (url.match(/^[a-z]+:/i))
+    return url;
+  if (!IN_BROWSER)
+    return url;
+  const doc = getDocument().implementation.createHTMLDocument();
+  const base = doc.createElement("base");
+  const a = doc.createElement("a");
+  doc.head.appendChild(base);
+  doc.body.appendChild(a);
+  if (baseUrl)
+    base.href = baseUrl;
+  a.href = url;
+  return a.href;
+}
+function getDocument(target) {
+  return (target && isElementNode(target) ? target?.ownerDocument : target) ?? window.document;
+}
+var XMLNS = "http://www.w3.org/2000/svg";
+function createSvg(width, height, ownerDocument) {
+  const svg = getDocument(ownerDocument).createElementNS(XMLNS, "svg");
+  svg.setAttributeNS(null, "width", width.toString());
+  svg.setAttributeNS(null, "height", height.toString());
+  svg.setAttributeNS(null, "viewBox", `0 0 ${width} ${height}`);
+  return svg;
+}
+function svgToDataUrl(svg, removeControlCharacter) {
+  let xhtml = new XMLSerializer().serializeToString(svg);
+  if (removeControlCharacter) {
+    xhtml = xhtml.replace(/[\u0000-\u0008\v\f\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/gu, "");
+  }
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xhtml)}`;
+}
+function readBlob(blob, type) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.onabort = () => reject(new Error(`Failed read blob to ${type}`));
+    {
+      reader.readAsDataURL(blob);
+    }
+  });
+}
+var blobToDataUrl = (blob) => readBlob(blob, "dataUrl");
+function createImage(url, ownerDocument) {
+  const img = getDocument(ownerDocument).createElement("img");
+  img.decoding = "sync";
+  img.loading = "eager";
+  img.src = url;
+  return img;
+}
+function loadMedia(media, options) {
+  return new Promise((resolve) => {
+    const { timeout, ownerDocument, onError: userOnError, onWarn } = options ?? {};
+    const node = typeof media === "string" ? createImage(media, getDocument(ownerDocument)) : media;
+    let timer = null;
+    let removeEventListeners = null;
+    function onResolve() {
+      resolve(node);
+      timer && clearTimeout(timer);
+      removeEventListeners?.();
+    }
+    if (timeout) {
+      timer = setTimeout(onResolve, timeout);
+    }
+    if (isVideoElement(node)) {
+      const currentSrc = node.currentSrc || node.src;
+      if (!currentSrc) {
+        if (node.poster) {
+          return loadMedia(node.poster, options).then(resolve);
+        }
+        return onResolve();
+      }
+      if (node.readyState >= 2) {
+        return onResolve();
+      }
+      const onLoadeddata = onResolve;
+      const onError = (error) => {
+        onWarn?.(
+          "Failed video load",
+          currentSrc,
+          error
+        );
+        userOnError?.(error);
+        onResolve();
+      };
+      removeEventListeners = () => {
+        node.removeEventListener("loadeddata", onLoadeddata);
+        node.removeEventListener("error", onError);
+      };
+      node.addEventListener("loadeddata", onLoadeddata, { once: true });
+      node.addEventListener("error", onError, { once: true });
+    } else {
+      const currentSrc = isSVGImageElementNode(node) ? node.href.baseVal : node.currentSrc || node.src;
+      if (!currentSrc) {
+        return onResolve();
+      }
+      const onLoad = async () => {
+        if (isImageElement(node) && "decode" in node) {
+          try {
+            await node.decode();
+          } catch (error) {
+            onWarn?.(
+              "Failed to decode image, trying to render anyway",
+              node.dataset.originalSrc || currentSrc,
+              error
+            );
+          }
+        }
+        onResolve();
+      };
+      const onError = (error) => {
+        onWarn?.(
+          "Failed image load",
+          node.dataset.originalSrc || currentSrc,
+          error
+        );
+        onResolve();
+      };
+      if (isImageElement(node) && node.complete) {
+        return onLoad();
+      }
+      removeEventListeners = () => {
+        node.removeEventListener("load", onLoad);
+        node.removeEventListener("error", onError);
+      };
+      node.addEventListener("load", onLoad, { once: true });
+      node.addEventListener("error", onError, { once: true });
+    }
+  });
+}
+async function waitUntilLoad(node, options) {
+  if (isHTMLElementNode(node)) {
+    if (isImageElement(node) || isVideoElement(node)) {
+      await loadMedia(node, options);
+    } else {
+      await Promise.all(
+        ["img", "video"].flatMap((selectors) => {
+          return Array.from(node.querySelectorAll(selectors)).map((el) => loadMedia(el, options));
+        })
+      );
+    }
+  }
+}
+var uuid = /* @__PURE__ */ (function uuid2() {
+  let counter = 0;
+  const random = () => `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4);
+  return () => {
+    counter += 1;
+    return `u${random()}${counter}`;
+  };
+})();
+function splitFontFamily(fontFamily) {
+  return fontFamily?.split(",").map((val) => val.trim().replace(/"|'/g, "").toLowerCase()).filter(Boolean);
+}
+var uid = 0;
+function createLogger(debug) {
+  const prefix = `${PREFIX}[#${uid}]`;
+  uid++;
+  return {
+    // eslint-disable-next-line no-console
+    time: (label) => debug && console.time(`${prefix} ${label}`),
+    // eslint-disable-next-line no-console
+    timeEnd: (label) => debug && console.timeEnd(`${prefix} ${label}`),
+    warn: (...args) => debug && consoleWarn(...args)
+  };
+}
+function getDefaultRequestInit(bypassingCache) {
+  return {
+    cache: bypassingCache ? "no-cache" : "force-cache"
+  };
+}
+async function orCreateContext(node, options) {
+  return isContext(node) ? node : createContext(node, { ...options, autoDestruct: true });
+}
+async function createContext(node, options) {
+  const { scale = 1, workerUrl, workerNumber = 1 } = options || {};
+  const debug = Boolean(options?.debug);
+  const features = options?.features ?? true;
+  const ownerDocument = node.ownerDocument ?? (IN_BROWSER ? window.document : void 0);
+  const ownerWindow = node.ownerDocument?.defaultView ?? (IN_BROWSER ? window : void 0);
+  const requests = /* @__PURE__ */ new Map();
+  const context = {
+    // Options
+    width: 0,
+    height: 0,
+    quality: 1,
+    type: "image/png",
+    scale,
+    backgroundColor: null,
+    style: null,
+    filter: null,
+    maximumCanvasSize: 0,
+    timeout: 3e4,
+    progress: null,
+    debug,
+    fetch: {
+      requestInit: getDefaultRequestInit(options?.fetch?.bypassingCache),
+      placeholderImage: "data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+      bypassingCache: false,
+      ...options?.fetch
+    },
+    fetchFn: null,
+    font: {},
+    drawImageInterval: 100,
+    workerUrl: null,
+    workerNumber,
+    onCloneEachNode: null,
+    onCloneNode: null,
+    onEmbedNode: null,
+    onCreateForeignObjectSvg: null,
+    includeStyleProperties: null,
+    autoDestruct: false,
+    ...options,
+    // InternalContext
+    __CONTEXT__: true,
+    log: createLogger(debug),
+    node,
+    ownerDocument,
+    ownerWindow,
+    dpi: scale === 1 ? null : 96 * scale,
+    svgStyleElement: createStyleElement(ownerDocument),
+    svgDefsElement: ownerDocument?.createElementNS(XMLNS, "defs"),
+    svgStyles: /* @__PURE__ */ new Map(),
+    defaultComputedStyles: /* @__PURE__ */ new Map(),
+    workers: [
+      ...Array.from({
+        length: SUPPORT_WEB_WORKER && workerUrl && workerNumber ? workerNumber : 0
+      })
+    ].map(() => {
+      try {
+        const worker = new Worker(workerUrl);
+        worker.onmessage = async (event) => {
+          const { url, result } = event.data;
+          if (result) {
+            requests.get(url)?.resolve?.(result);
+          } else {
+            requests.get(url)?.reject?.(new Error(`Error receiving message from worker: ${url}`));
+          }
+        };
+        worker.onmessageerror = (event) => {
+          const { url } = event.data;
+          requests.get(url)?.reject?.(new Error(`Error receiving message from worker: ${url}`));
+        };
+        return worker;
+      } catch (error) {
+        context.log.warn("Failed to new Worker", error);
+        return null;
+      }
+    }).filter(Boolean),
+    fontFamilies: /* @__PURE__ */ new Map(),
+    fontCssTexts: /* @__PURE__ */ new Map(),
+    acceptOfImage: `${[
+      supportWebp(ownerDocument) && "image/webp",
+      "image/svg+xml",
+      "image/*",
+      "*/*"
+    ].filter(Boolean).join(",")};q=0.8`,
+    requests,
+    drawImageCount: 0,
+    tasks: [],
+    features,
+    isEnable: (key) => {
+      if (key === "restoreScrollPosition") {
+        return typeof features === "boolean" ? false : features[key] ?? false;
+      }
+      if (typeof features === "boolean") {
+        return features;
+      }
+      return features[key] ?? true;
+    },
+    shadowRoots: []
+  };
+  context.log.time("wait until load");
+  await waitUntilLoad(node, { timeout: context.timeout, onWarn: context.log.warn });
+  context.log.timeEnd("wait until load");
+  const { width, height } = resolveBoundingBox(node, context);
+  context.width = width;
+  context.height = height;
+  return context;
+}
+function createStyleElement(ownerDocument) {
+  if (!ownerDocument)
+    return void 0;
+  const style = ownerDocument.createElement("style");
+  const cssText = style.ownerDocument.createTextNode(`
+.______background-clip--text {
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+`);
+  style.appendChild(cssText);
+  return style;
+}
+function resolveBoundingBox(node, context) {
+  let { width, height } = context;
+  if (isElementNode(node) && (!width || !height)) {
+    const box = node.getBoundingClientRect();
+    width = width || box.width || Number(node.getAttribute("width")) || 0;
+    height = height || box.height || Number(node.getAttribute("height")) || 0;
+  }
+  return { width, height };
+}
+async function imageToCanvas(image, context) {
+  const {
+    log,
+    timeout,
+    drawImageCount,
+    drawImageInterval
+  } = context;
+  log.time("image to canvas");
+  const loaded = await loadMedia(image, { timeout, onWarn: context.log.warn });
+  const { canvas, context2d } = createCanvas(image.ownerDocument, context);
+  const drawImage = () => {
+    try {
+      context2d?.drawImage(loaded, 0, 0, canvas.width, canvas.height);
+    } catch (error) {
+      context.log.warn("Failed to drawImage", error);
+    }
+  };
+  drawImage();
+  if (context.isEnable("fixSvgXmlDecode")) {
+    for (let i = 0; i < drawImageCount; i++) {
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          context2d?.clearRect(0, 0, canvas.width, canvas.height);
+          drawImage();
+          resolve();
+        }, i + drawImageInterval);
+      });
+    }
+  }
+  context.drawImageCount = 0;
+  log.timeEnd("image to canvas");
+  return canvas;
+}
+function createCanvas(ownerDocument, context) {
+  const { width, height, scale, backgroundColor, maximumCanvasSize: max } = context;
+  const canvas = ownerDocument.createElement("canvas");
+  canvas.width = Math.floor(width * scale);
+  canvas.height = Math.floor(height * scale);
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  if (max) {
+    if (canvas.width > max || canvas.height > max) {
+      if (canvas.width > max && canvas.height > max) {
+        if (canvas.width > canvas.height) {
+          canvas.height *= max / canvas.width;
+          canvas.width = max;
+        } else {
+          canvas.width *= max / canvas.height;
+          canvas.height = max;
+        }
+      } else if (canvas.width > max) {
+        canvas.height *= max / canvas.width;
+        canvas.width = max;
+      } else {
+        canvas.width *= max / canvas.height;
+        canvas.height = max;
+      }
+    }
+  }
+  const context2d = canvas.getContext("2d");
+  if (context2d && backgroundColor) {
+    context2d.fillStyle = backgroundColor;
+    context2d.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  return { canvas, context2d };
+}
+function cloneCanvas(canvas, context) {
+  if (canvas.ownerDocument) {
+    try {
+      const dataURL = canvas.toDataURL();
+      if (dataURL !== "data:,") {
+        return createImage(dataURL, canvas.ownerDocument);
+      }
+    } catch (error) {
+      context.log.warn("Failed to clone canvas", error);
+    }
+  }
+  const cloned = canvas.cloneNode(false);
+  const ctx = canvas.getContext("2d");
+  const clonedCtx = cloned.getContext("2d");
+  try {
+    if (ctx && clonedCtx) {
+      clonedCtx.putImageData(
+        ctx.getImageData(0, 0, canvas.width, canvas.height),
+        0,
+        0
+      );
+    }
+    return cloned;
+  } catch (error) {
+    context.log.warn("Failed to clone canvas", error);
+  }
+  return cloned;
+}
+function cloneIframe(iframe, context) {
+  try {
+    if (iframe?.contentDocument?.documentElement) {
+      return cloneNode(iframe.contentDocument.documentElement, context);
+    }
+  } catch (error) {
+    context.log.warn("Failed to clone iframe", error);
+  }
+  return iframe.cloneNode(false);
+}
+function cloneImage(image) {
+  const cloned = image.cloneNode(false);
+  if (image.currentSrc && image.currentSrc !== image.src) {
+    cloned.src = image.currentSrc;
+    cloned.srcset = "";
+  }
+  if (cloned.loading === "lazy") {
+    cloned.loading = "eager";
+  }
+  return cloned;
+}
+async function cloneVideo(video, context) {
+  if (video.ownerDocument && !video.currentSrc && video.poster) {
+    return createImage(video.poster, video.ownerDocument);
+  }
+  const cloned = video.cloneNode(false);
+  cloned.crossOrigin = "anonymous";
+  if (video.currentSrc && video.currentSrc !== video.src) {
+    cloned.src = video.currentSrc;
+  }
+  const ownerDocument = cloned.ownerDocument;
+  if (ownerDocument) {
+    let canPlay = true;
+    await loadMedia(cloned, { onError: () => canPlay = false, onWarn: context.log.warn });
+    if (!canPlay) {
+      if (video.poster) {
+        return createImage(video.poster, video.ownerDocument);
+      }
+      return cloned;
+    }
+    cloned.currentTime = video.currentTime;
+    await new Promise((resolve) => {
+      cloned.addEventListener("seeked", resolve, { once: true });
+    });
+    const canvas = ownerDocument.createElement("canvas");
+    canvas.width = video.offsetWidth;
+    canvas.height = video.offsetHeight;
+    try {
+      const ctx = canvas.getContext("2d");
+      if (ctx)
+        ctx.drawImage(cloned, 0, 0, canvas.width, canvas.height);
+    } catch (error) {
+      context.log.warn("Failed to clone video", error);
+      if (video.poster) {
+        return createImage(video.poster, video.ownerDocument);
+      }
+      return cloned;
+    }
+    return cloneCanvas(canvas, context);
+  }
+  return cloned;
+}
+function cloneElement(node, context) {
+  if (isCanvasElement(node)) {
+    return cloneCanvas(node, context);
+  }
+  if (isIFrameElement(node)) {
+    return cloneIframe(node, context);
+  }
+  if (isImageElement(node)) {
+    return cloneImage(node);
+  }
+  if (isVideoElement(node)) {
+    return cloneVideo(node, context);
+  }
+  return node.cloneNode(false);
+}
+function getSandBox(context) {
+  let sandbox = context.sandbox;
+  if (!sandbox) {
+    const { ownerDocument } = context;
+    try {
+      if (ownerDocument) {
+        sandbox = ownerDocument.createElement("iframe");
+        sandbox.id = `__SANDBOX__${uuid()}`;
+        sandbox.width = "0";
+        sandbox.height = "0";
+        sandbox.style.visibility = "hidden";
+        sandbox.style.position = "fixed";
+        ownerDocument.body.appendChild(sandbox);
+        sandbox.srcdoc = '<!DOCTYPE html><meta charset="UTF-8"><title></title><body>';
+        context.sandbox = sandbox;
+      }
+    } catch (error) {
+      context.log.warn("Failed to getSandBox", error);
+    }
+  }
+  return sandbox;
+}
+var ignoredStyles = [
+  "width",
+  "height",
+  "-webkit-text-fill-color"
+];
+var includedAttributes = [
+  "stroke",
+  "fill"
+];
+function getDefaultStyle(node, pseudoElement, context) {
+  const { defaultComputedStyles } = context;
+  const nodeName = node.nodeName.toLowerCase();
+  const isSvgNode = isSVGElementNode(node) && nodeName !== "svg";
+  const attributes = isSvgNode ? includedAttributes.map((name) => [name, node.getAttribute(name)]).filter(([, value]) => value !== null) : [];
+  const key = [
+    isSvgNode && "svg",
+    nodeName,
+    attributes.map((name, value) => `${name}=${value}`).join(","),
+    pseudoElement
+  ].filter(Boolean).join(":");
+  if (defaultComputedStyles.has(key))
+    return defaultComputedStyles.get(key);
+  const sandbox = getSandBox(context);
+  const sandboxWindow = sandbox?.contentWindow;
+  if (!sandboxWindow)
+    return /* @__PURE__ */ new Map();
+  const sandboxDocument = sandboxWindow?.document;
+  let root;
+  let el;
+  if (isSvgNode) {
+    root = sandboxDocument.createElementNS(XMLNS, "svg");
+    el = root.ownerDocument.createElementNS(root.namespaceURI, nodeName);
+    attributes.forEach(([name, value]) => {
+      el.setAttributeNS(null, name, value);
+    });
+    root.appendChild(el);
+  } else {
+    root = el = sandboxDocument.createElement(nodeName);
+  }
+  el.textContent = " ";
+  sandboxDocument.body.appendChild(root);
+  const computedStyle = sandboxWindow.getComputedStyle(el, pseudoElement);
+  const styles = /* @__PURE__ */ new Map();
+  for (let len = computedStyle.length, i = 0; i < len; i++) {
+    const name = computedStyle.item(i);
+    if (ignoredStyles.includes(name))
+      continue;
+    styles.set(name, computedStyle.getPropertyValue(name));
+  }
+  sandboxDocument.body.removeChild(root);
+  defaultComputedStyles.set(key, styles);
+  return styles;
+}
+function getDiffStyle(style, defaultStyle, includeStyleProperties) {
+  const diffStyle = /* @__PURE__ */ new Map();
+  const prefixs = [];
+  const prefixTree = /* @__PURE__ */ new Map();
+  if (includeStyleProperties) {
+    for (const name of includeStyleProperties) {
+      applyTo(name);
+    }
+  } else {
+    for (let len = style.length, i = 0; i < len; i++) {
+      const name = style.item(i);
+      applyTo(name);
+    }
+  }
+  for (let len = prefixs.length, i = 0; i < len; i++) {
+    prefixTree.get(prefixs[i])?.forEach((value, name) => diffStyle.set(name, value));
+  }
+  function applyTo(name) {
+    const value = style.getPropertyValue(name);
+    const priority = style.getPropertyPriority(name);
+    const subIndex = name.lastIndexOf("-");
+    const prefix = subIndex > -1 ? name.substring(0, subIndex) : void 0;
+    if (prefix) {
+      let map = prefixTree.get(prefix);
+      if (!map) {
+        map = /* @__PURE__ */ new Map();
+        prefixTree.set(prefix, map);
+      }
+      map.set(name, [value, priority]);
+    }
+    if (defaultStyle.get(name) === value && !priority)
+      return;
+    if (prefix) {
+      prefixs.push(prefix);
+    } else {
+      diffStyle.set(name, [value, priority]);
+    }
+  }
+  return diffStyle;
+}
+function copyCssStyles(node, cloned, isRoot, context) {
+  const { ownerWindow, includeStyleProperties, currentParentNodeStyle } = context;
+  const clonedStyle = cloned.style;
+  const computedStyle = ownerWindow.getComputedStyle(node);
+  const defaultStyle = getDefaultStyle(node, null, context);
+  currentParentNodeStyle?.forEach((_, key) => {
+    defaultStyle.delete(key);
+  });
+  const style = getDiffStyle(computedStyle, defaultStyle, includeStyleProperties);
+  style.delete("transition-property");
+  style.delete("all");
+  style.delete("d");
+  style.delete("content");
+  if (isRoot) {
+    style.delete("position");
+    style.delete("margin-top");
+    style.delete("margin-right");
+    style.delete("margin-bottom");
+    style.delete("margin-left");
+    style.delete("margin-block-start");
+    style.delete("margin-block-end");
+    style.delete("margin-inline-start");
+    style.delete("margin-inline-end");
+    style.set("box-sizing", ["border-box", ""]);
+  }
+  if (style.get("background-clip")?.[0] === "text") {
+    cloned.classList.add("______background-clip--text");
+  }
+  if (IN_CHROME) {
+    if (!style.has("font-kerning"))
+      style.set("font-kerning", ["normal", ""]);
+    if ((style.get("overflow-x")?.[0] === "hidden" || style.get("overflow-y")?.[0] === "hidden") && style.get("text-overflow")?.[0] === "ellipsis" && node.scrollWidth === node.clientWidth) {
+      style.set("text-overflow", ["clip", ""]);
+    }
+  }
+  for (let len = clonedStyle.length, i = 0; i < len; i++) {
+    clonedStyle.removeProperty(clonedStyle.item(i));
+  }
+  style.forEach(([value, priority], name) => {
+    clonedStyle.setProperty(name, value, priority);
+  });
+  return style;
+}
+function copyInputValue(node, cloned) {
+  if (isTextareaElement(node) || isInputElement(node) || isSelectElement(node)) {
+    cloned.setAttribute("value", node.value);
+  }
+}
+var pseudoClasses = [
+  "::before",
+  "::after"
+  // '::placeholder', TODO
+];
+var scrollbarPseudoClasses = [
+  "::-webkit-scrollbar",
+  "::-webkit-scrollbar-button",
+  // '::-webkit-scrollbar:horizontal', TODO
+  "::-webkit-scrollbar-thumb",
+  "::-webkit-scrollbar-track",
+  "::-webkit-scrollbar-track-piece",
+  // '::-webkit-scrollbar:vertical', TODO
+  "::-webkit-scrollbar-corner",
+  "::-webkit-resizer"
+];
+function copyPseudoClass(node, cloned, copyScrollbar, context, addWordToFontFamilies) {
+  const { ownerWindow, svgStyleElement, svgStyles, currentNodeStyle } = context;
+  if (!svgStyleElement || !ownerWindow)
+    return;
+  function copyBy(pseudoClass) {
+    const computedStyle = ownerWindow.getComputedStyle(node, pseudoClass);
+    let content = computedStyle.getPropertyValue("content");
+    if (!content || content === "none")
+      return;
+    addWordToFontFamilies?.(content);
+    content = content.replace(/(')|(")|(counter\(.+\))/g, "");
+    const klasses = [uuid()];
+    const defaultStyle = getDefaultStyle(node, pseudoClass, context);
+    currentNodeStyle?.forEach((_, key) => {
+      defaultStyle.delete(key);
+    });
+    const style = getDiffStyle(computedStyle, defaultStyle, context.includeStyleProperties);
+    style.delete("content");
+    style.delete("-webkit-locale");
+    if (style.get("background-clip")?.[0] === "text") {
+      cloned.classList.add("______background-clip--text");
+    }
+    const cloneStyle = [
+      `content: '${content}';`
+    ];
+    style.forEach(([value, priority], name) => {
+      cloneStyle.push(`${name}: ${value}${priority ? " !important" : ""};`);
+    });
+    if (cloneStyle.length === 1)
+      return;
+    try {
+      cloned.className = [cloned.className, ...klasses].join(" ");
+    } catch (err) {
+      context.log.warn("Failed to copyPseudoClass", err);
+      return;
+    }
+    const cssText = cloneStyle.join("\n  ");
+    let allClasses = svgStyles.get(cssText);
+    if (!allClasses) {
+      allClasses = [];
+      svgStyles.set(cssText, allClasses);
+    }
+    allClasses.push(`.${klasses[0]}${pseudoClass}`);
+  }
+  pseudoClasses.forEach(copyBy);
+  if (copyScrollbar)
+    scrollbarPseudoClasses.forEach(copyBy);
+}
+var excludeParentNodes = /* @__PURE__ */ new Set([
+  "symbol"
+  // test/fixtures/svg.symbol.html
+]);
+async function appendChildNode(node, cloned, child, context, addWordToFontFamilies) {
+  if (isElementNode(child) && (isStyleElement(child) || isScriptElement(child)))
+    return;
+  if (context.filter && !context.filter(child))
+    return;
+  if (excludeParentNodes.has(cloned.nodeName) || excludeParentNodes.has(child.nodeName)) {
+    context.currentParentNodeStyle = void 0;
+  } else {
+    context.currentParentNodeStyle = context.currentNodeStyle;
+  }
+  const childCloned = await cloneNode(child, context, false, addWordToFontFamilies);
+  if (context.isEnable("restoreScrollPosition")) {
+    restoreScrollPosition(node, childCloned);
+  }
+  cloned.appendChild(childCloned);
+}
+async function cloneChildNodes(node, cloned, context, addWordToFontFamilies) {
+  let firstChild = node.firstChild;
+  if (isElementNode(node)) {
+    if (node.shadowRoot) {
+      firstChild = node.shadowRoot?.firstChild;
+      context.shadowRoots.push(node.shadowRoot);
+    }
+  }
+  for (let child = firstChild; child; child = child.nextSibling) {
+    if (isCommentNode(child))
+      continue;
+    if (isElementNode(child) && isSlotElement(child) && typeof child.assignedNodes === "function") {
+      const nodes = child.assignedNodes();
+      for (let i = 0; i < nodes.length; i++) {
+        await appendChildNode(node, cloned, nodes[i], context, addWordToFontFamilies);
+      }
+    } else {
+      await appendChildNode(node, cloned, child, context, addWordToFontFamilies);
+    }
+  }
+}
+function restoreScrollPosition(node, chlidCloned) {
+  if (!isHTMLElementNode(node) || !isHTMLElementNode(chlidCloned))
+    return;
+  const { scrollTop, scrollLeft } = node;
+  if (!scrollTop && !scrollLeft) {
+    return;
+  }
+  const { transform } = chlidCloned.style;
+  const matrix = new DOMMatrix(transform);
+  const { a, b, c, d } = matrix;
+  matrix.a = 1;
+  matrix.b = 0;
+  matrix.c = 0;
+  matrix.d = 1;
+  matrix.translateSelf(-scrollLeft, -scrollTop);
+  matrix.a = a;
+  matrix.b = b;
+  matrix.c = c;
+  matrix.d = d;
+  chlidCloned.style.transform = matrix.toString();
+}
+function applyCssStyleWithOptions(cloned, context) {
+  const { backgroundColor, width, height, style: styles } = context;
+  const clonedStyle = cloned.style;
+  if (backgroundColor)
+    clonedStyle.setProperty("background-color", backgroundColor, "important");
+  if (width)
+    clonedStyle.setProperty("width", `${width}px`, "important");
+  if (height)
+    clonedStyle.setProperty("height", `${height}px`, "important");
+  if (styles) {
+    for (const name in styles) clonedStyle[name] = styles[name];
+  }
+}
+var NORMAL_ATTRIBUTE_RE = /^[\w-:]+$/;
+async function cloneNode(node, context, isRoot = false, addWordToFontFamilies) {
+  const { ownerDocument, ownerWindow, fontFamilies, onCloneEachNode } = context;
+  if (ownerDocument && isTextNode(node)) {
+    if (addWordToFontFamilies && /\S/.test(node.data)) {
+      addWordToFontFamilies(node.data);
+    }
+    return ownerDocument.createTextNode(node.data);
+  }
+  if (ownerDocument && ownerWindow && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
+    const cloned2 = await cloneElement(node, context);
+    if (context.isEnable("removeAbnormalAttributes")) {
+      const names = cloned2.getAttributeNames();
+      for (let len = names.length, i = 0; i < len; i++) {
+        const name = names[i];
+        if (!NORMAL_ATTRIBUTE_RE.test(name)) {
+          cloned2.removeAttribute(name);
+        }
+      }
+    }
+    const style = context.currentNodeStyle = copyCssStyles(node, cloned2, isRoot, context);
+    if (isRoot)
+      applyCssStyleWithOptions(cloned2, context);
+    let copyScrollbar = false;
+    if (context.isEnable("copyScrollbar")) {
+      const overflow = [
+        style.get("overflow-x")?.[0],
+        style.get("overflow-y")?.[0]
+      ];
+      copyScrollbar = overflow.includes("scroll") || (overflow.includes("auto") || overflow.includes("overlay")) && (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth);
+    }
+    const textTransform = style.get("text-transform")?.[0];
+    const families = splitFontFamily(style.get("font-family")?.[0]);
+    const addWordToFontFamilies2 = families ? (word) => {
+      if (textTransform === "uppercase") {
+        word = word.toUpperCase();
+      } else if (textTransform === "lowercase") {
+        word = word.toLowerCase();
+      } else if (textTransform === "capitalize") {
+        word = word[0].toUpperCase() + word.substring(1);
+      }
+      families.forEach((family) => {
+        let fontFamily = fontFamilies.get(family);
+        if (!fontFamily) {
+          fontFamilies.set(family, fontFamily = /* @__PURE__ */ new Set());
+        }
+        word.split("").forEach((text) => fontFamily.add(text));
+      });
+    } : void 0;
+    copyPseudoClass(
+      node,
+      cloned2,
+      copyScrollbar,
+      context,
+      addWordToFontFamilies2
+    );
+    copyInputValue(node, cloned2);
+    if (!isVideoElement(node)) {
+      await cloneChildNodes(
+        node,
+        cloned2,
+        context,
+        addWordToFontFamilies2
+      );
+    }
+    await onCloneEachNode?.(cloned2);
+    return cloned2;
+  }
+  const cloned = node.cloneNode(false);
+  await cloneChildNodes(node, cloned, context);
+  await onCloneEachNode?.(cloned);
+  return cloned;
+}
+function destroyContext(context) {
+  context.ownerDocument = void 0;
+  context.ownerWindow = void 0;
+  context.svgStyleElement = void 0;
+  context.svgDefsElement = void 0;
+  context.svgStyles.clear();
+  context.defaultComputedStyles.clear();
+  if (context.sandbox) {
+    try {
+      context.sandbox.remove();
+    } catch (err) {
+      context.log.warn("Failed to destroyContext", err);
+    }
+    context.sandbox = void 0;
+  }
+  context.workers = [];
+  context.fontFamilies.clear();
+  context.fontCssTexts.clear();
+  context.requests.clear();
+  context.tasks = [];
+  context.shadowRoots = [];
+}
+function baseFetch(options) {
+  const { url, timeout, responseType, ...requestInit } = options;
+  const controller = new AbortController();
+  const timer = timeout ? setTimeout(() => controller.abort(), timeout) : void 0;
+  return fetch(url, { signal: controller.signal, ...requestInit }).then((response) => {
+    if (!response.ok) {
+      throw new Error("Failed fetch, not 2xx response", { cause: response });
+    }
+    switch (responseType) {
+      case "arrayBuffer":
+        return response.arrayBuffer();
+      case "dataUrl":
+        return response.blob().then(blobToDataUrl);
+      case "text":
+      default:
+        return response.text();
+    }
+  }).finally(() => clearTimeout(timer));
+}
+function contextFetch(context, options) {
+  const { url: rawUrl, requestType = "text", responseType = "text", imageDom } = options;
+  let url = rawUrl;
+  const {
+    timeout,
+    acceptOfImage,
+    requests,
+    fetchFn,
+    fetch: {
+      requestInit,
+      bypassingCache,
+      placeholderImage
+    },
+    font,
+    workers,
+    fontFamilies
+  } = context;
+  if (requestType === "image" && (IN_SAFARI || IN_FIREFOX)) {
+    context.drawImageCount++;
+  }
+  let request = requests.get(rawUrl);
+  if (!request) {
+    if (bypassingCache) {
+      if (bypassingCache instanceof RegExp && bypassingCache.test(url)) {
+        url += (/\?/.test(url) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
+      }
+    }
+    const canFontMinify = requestType.startsWith("font") && font && font.minify;
+    const fontTexts = /* @__PURE__ */ new Set();
+    if (canFontMinify) {
+      const families = requestType.split(";")[1].split(",");
+      families.forEach((family) => {
+        if (!fontFamilies.has(family))
+          return;
+        fontFamilies.get(family).forEach((text) => fontTexts.add(text));
+      });
+    }
+    const needFontMinify = canFontMinify && fontTexts.size;
+    const baseFetchOptions = {
+      url,
+      timeout,
+      responseType: needFontMinify ? "arrayBuffer" : responseType,
+      headers: requestType === "image" ? { accept: acceptOfImage } : void 0,
+      ...requestInit
+    };
+    request = {
+      type: requestType,
+      resolve: void 0,
+      reject: void 0,
+      response: null
+    };
+    request.response = (async () => {
+      if (fetchFn && requestType === "image") {
+        const result = await fetchFn(rawUrl);
+        if (result)
+          return result;
+      }
+      if (!IN_SAFARI && rawUrl.startsWith("http") && workers.length) {
+        return new Promise((resolve, reject) => {
+          const worker = workers[requests.size & workers.length - 1];
+          worker.postMessage({ rawUrl, ...baseFetchOptions });
+          request.resolve = resolve;
+          request.reject = reject;
+        });
+      }
+      return baseFetch(baseFetchOptions);
+    })().catch((error) => {
+      requests.delete(rawUrl);
+      if (requestType === "image" && placeholderImage) {
+        context.log.warn("Failed to fetch image base64, trying to use placeholder image", url);
+        return typeof placeholderImage === "string" ? placeholderImage : placeholderImage(imageDom);
+      }
+      throw error;
+    });
+    requests.set(rawUrl, request);
+  }
+  return request.response;
+}
+async function replaceCssUrlToDataUrl(cssText, baseUrl, context, isImage) {
+  if (!hasCssUrl(cssText))
+    return cssText;
+  for (const [rawUrl, url] of parseCssUrls(cssText, baseUrl)) {
+    try {
+      const dataUrl = await contextFetch(
+        context,
+        {
+          url,
+          requestType: isImage ? "image" : "text",
+          responseType: "dataUrl"
+        }
+      );
+      cssText = cssText.replace(toRE(rawUrl), `$1${dataUrl}$3`);
+    } catch (error) {
+      context.log.warn("Failed to fetch css data url", rawUrl, error);
+    }
+  }
+  return cssText;
+}
+function hasCssUrl(cssText) {
+  return /url\((['"]?)([^'"]+?)\1\)/.test(cssText);
+}
+var URL_RE = /url\((['"]?)([^'"]+?)\1\)/g;
+function parseCssUrls(cssText, baseUrl) {
+  const result = [];
+  cssText.replace(URL_RE, (raw, quotation, url) => {
+    result.push([url, resolveUrl(url, baseUrl)]);
+    return raw;
+  });
+  return result.filter(([url]) => !isDataUrl(url));
+}
+function toRE(url) {
+  const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
+  return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
+}
+var properties = [
+  "background-image",
+  "border-image-source",
+  "-webkit-border-image",
+  "-webkit-mask-image",
+  "list-style-image"
+];
+function embedCssStyleImage(style, context) {
+  return properties.map((property) => {
+    const value = style.getPropertyValue(property);
+    if (!value || value === "none") {
+      return null;
+    }
+    if (IN_SAFARI || IN_FIREFOX) {
+      context.drawImageCount++;
+    }
+    return replaceCssUrlToDataUrl(value, null, context, true).then((newValue) => {
+      if (!newValue || value === newValue)
+        return;
+      style.setProperty(
+        property,
+        newValue,
+        style.getPropertyPriority(property)
+      );
+    });
+  }).filter(Boolean);
+}
+function embedImageElement(cloned, context) {
+  if (isImageElement(cloned)) {
+    const originalSrc = cloned.currentSrc || cloned.src;
+    if (!isDataUrl(originalSrc)) {
+      return [
+        contextFetch(context, {
+          url: originalSrc,
+          imageDom: cloned,
+          requestType: "image",
+          responseType: "dataUrl"
+        }).then((url) => {
+          if (!url)
+            return;
+          cloned.srcset = "";
+          cloned.dataset.originalSrc = originalSrc;
+          cloned.src = url || "";
+        })
+      ];
+    }
+    if (IN_SAFARI || IN_FIREFOX) {
+      context.drawImageCount++;
+    }
+  } else if (isSVGElementNode(cloned) && !isDataUrl(cloned.href.baseVal)) {
+    const originalSrc = cloned.href.baseVal;
+    return [
+      contextFetch(context, {
+        url: originalSrc,
+        imageDom: cloned,
+        requestType: "image",
+        responseType: "dataUrl"
+      }).then((url) => {
+        if (!url)
+          return;
+        cloned.dataset.originalSrc = originalSrc;
+        cloned.href.baseVal = url || "";
+      })
+    ];
+  }
+  return [];
+}
+function embedSvgUse(cloned, context) {
+  const { ownerDocument, svgDefsElement } = context;
+  const href = cloned.getAttribute("href") ?? cloned.getAttribute("xlink:href");
+  if (!href)
+    return [];
+  const [svgUrl, id] = href.split("#");
+  if (id) {
+    const query = `#${id}`;
+    const definition = context.shadowRoots.reduce(
+      (res, root) => {
+        return res ?? root.querySelector(`svg ${query}`);
+      },
+      ownerDocument?.querySelector(`svg ${query}`)
+    );
+    if (svgUrl) {
+      cloned.setAttribute("href", query);
+    }
+    if (svgDefsElement?.querySelector(query))
+      return [];
+    if (definition) {
+      svgDefsElement?.appendChild(definition.cloneNode(true));
+      return [];
+    } else if (svgUrl) {
+      return [
+        contextFetch(context, {
+          url: svgUrl,
+          responseType: "text"
+        }).then((svgData) => {
+          svgDefsElement?.insertAdjacentHTML("beforeend", svgData);
+        })
+      ];
+    }
+  }
+  return [];
+}
+function embedNode(cloned, context) {
+  const { tasks } = context;
+  if (isElementNode(cloned)) {
+    if (isImageElement(cloned) || isSVGImageElementNode(cloned)) {
+      tasks.push(...embedImageElement(cloned, context));
+    }
+    if (isSVGUseElementNode(cloned)) {
+      tasks.push(...embedSvgUse(cloned, context));
+    }
+  }
+  if (isHTMLElementNode(cloned)) {
+    tasks.push(...embedCssStyleImage(cloned.style, context));
+  }
+  cloned.childNodes.forEach((child) => {
+    embedNode(child, context);
+  });
+}
+async function embedWebFont(clone, context) {
+  const {
+    ownerDocument,
+    svgStyleElement,
+    fontFamilies,
+    fontCssTexts,
+    tasks,
+    font
+  } = context;
+  if (!ownerDocument || !svgStyleElement || !fontFamilies.size) {
+    return;
+  }
+  if (font && font.cssText) {
+    const cssText = filterPreferredFormat(font.cssText, context);
+    svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText}
+`));
+  } else {
+    const styleSheets = Array.from(ownerDocument.styleSheets).filter((styleSheet) => {
+      try {
+        return "cssRules" in styleSheet && Boolean(styleSheet.cssRules.length);
+      } catch (error) {
+        context.log.warn(`Error while reading CSS rules from ${styleSheet.href}`, error);
+        return false;
+      }
+    });
+    const tempDoc = ownerDocument.implementation.createHTMLDocument("");
+    const tempStyleEl = tempDoc.createElement("style");
+    tempDoc.head.appendChild(tempStyleEl);
+    const tempStyleSheet = tempStyleEl.sheet;
+    await Promise.all(
+      styleSheets.flatMap((styleSheet) => {
+        return Array.from(styleSheet.cssRules).map(async (cssRule) => {
+          if (isCSSImportRule(cssRule)) {
+            const baseUrl = cssRule.href;
+            let cssText = "";
+            try {
+              cssText = await contextFetch(context, {
+                url: baseUrl,
+                requestType: "text",
+                responseType: "text"
+              });
+            } catch (error) {
+              context.log.warn(`Error fetch remote css import from ${baseUrl}`, error);
+            }
+            const replacedCssText = cssText.replace(
+              URL_RE,
+              (raw, quotation, url) => raw.replace(url, resolveUrl(url, baseUrl))
+            );
+            for (const rule of parseCss(replacedCssText)) {
+              try {
+                tempStyleSheet.insertRule(rule, tempStyleSheet.cssRules.length);
+              } catch (error) {
+                context.log.warn("Error inserting rule from remote css import", { rule, error });
+              }
+            }
+          }
+        });
+      })
+    );
+    if (tempStyleSheet.cssRules.length)
+      styleSheets.push(tempStyleSheet);
+    const cssRules = [];
+    styleSheets.forEach((sheet) => {
+      unwrapCssLayers(sheet.cssRules, cssRules);
+    });
+    cssRules.filter((cssRule) => isCssFontFaceRule(cssRule) && hasCssUrl(cssRule.style.getPropertyValue("src")) && splitFontFamily(cssRule.style.getPropertyValue("font-family"))?.some((val) => fontFamilies.has(val))).forEach((value) => {
+      const rule = value;
+      const cssText = fontCssTexts.get(rule.cssText);
+      if (cssText) {
+        svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText}
+`));
+      } else {
+        tasks.push(
+          replaceCssUrlToDataUrl(
+            rule.cssText,
+            rule.parentStyleSheet ? rule.parentStyleSheet.href : null,
+            context
+          ).then((cssText2) => {
+            cssText2 = filterPreferredFormat(cssText2, context);
+            fontCssTexts.set(rule.cssText, cssText2);
+            svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText2}
+`));
+          })
+        );
+      }
+    });
+  }
+}
+var COMMENTS_RE = /(\/\*[\s\S]*?\*\/)/g;
+var KEYFRAMES_RE = /((@.*?keyframes [\s\S]*?){([\s\S]*?}\s*?)})/gi;
+function parseCss(source) {
+  if (source == null)
+    return [];
+  const result = [];
+  let cssText = source.replace(COMMENTS_RE, "");
+  while (true) {
+    const matches = KEYFRAMES_RE.exec(cssText);
+    if (!matches)
+      break;
+    result.push(matches[0]);
+  }
+  cssText = cssText.replace(KEYFRAMES_RE, "");
+  const IMPORT_RE = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
+  const UNIFIED_RE = new RegExp(
+    // eslint-disable-next-line
+    "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})",
+    "gi"
+  );
+  while (true) {
+    let matches = IMPORT_RE.exec(cssText);
+    if (!matches) {
+      matches = UNIFIED_RE.exec(cssText);
+      if (!matches) {
+        break;
+      } else {
+        IMPORT_RE.lastIndex = UNIFIED_RE.lastIndex;
+      }
+    } else {
+      UNIFIED_RE.lastIndex = IMPORT_RE.lastIndex;
+    }
+    result.push(matches[0]);
+  }
+  return result;
+}
+var URL_WITH_FORMAT_RE = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
+var FONT_SRC_RE = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
+function filterPreferredFormat(str, context) {
+  const { font } = context;
+  const preferredFormat = font ? font?.preferredFormat : void 0;
+  return preferredFormat ? str.replace(FONT_SRC_RE, (match) => {
+    while (true) {
+      const [src, , format] = URL_WITH_FORMAT_RE.exec(match) || [];
+      if (!format)
+        return "";
+      if (format === preferredFormat)
+        return `src: ${src};`;
+    }
+  }) : str;
+}
+function unwrapCssLayers(rules, out = []) {
+  for (const rule of Array.from(rules)) {
+    if (isLayerBlockRule(rule)) {
+      out.push(...unwrapCssLayers(rule.cssRules));
+    } else if ("cssRules" in rule) {
+      unwrapCssLayers(rule.cssRules, out);
+    } else {
+      out.push(rule);
+    }
+  }
+  return out;
+}
+var SVG_EXTERNAL_RESOURCE_REGEX = /\bx?link:?href\s*=\s*["'](?!data:)[^"']+["']/i;
+function svgHasExternalResources(svg) {
+  return SVG_EXTERNAL_RESOURCE_REGEX.test(svg.innerHTML);
+}
+async function domToForeignObjectSvg(node, options) {
+  const context = await orCreateContext(node, options);
+  if (isElementNode(context.node) && isSVGElementNode(context.node) && !svgHasExternalResources(context.node))
+    return context.node;
+  const {
+    ownerDocument,
+    log,
+    tasks,
+    svgStyleElement,
+    svgDefsElement,
+    svgStyles,
+    font,
+    progress,
+    autoDestruct,
+    onCloneNode,
+    onEmbedNode,
+    onCreateForeignObjectSvg
+  } = context;
+  log.time("clone node");
+  const clone = await cloneNode(context.node, context, true);
+  if (svgStyleElement && ownerDocument) {
+    let allCssText = "";
+    svgStyles.forEach((klasses, cssText) => {
+      allCssText += `${klasses.join(",\n")} {
+  ${cssText}
+}
+`;
+    });
+    svgStyleElement.appendChild(ownerDocument.createTextNode(allCssText));
+  }
+  log.timeEnd("clone node");
+  await onCloneNode?.(clone);
+  if (font !== false && isElementNode(clone)) {
+    log.time("embed web font");
+    await embedWebFont(clone, context);
+    log.timeEnd("embed web font");
+  }
+  log.time("embed node");
+  embedNode(clone, context);
+  const count = tasks.length;
+  let current = 0;
+  const runTask = async () => {
+    while (true) {
+      const task = tasks.pop();
+      if (!task)
+        break;
+      try {
+        await task;
+      } catch (error) {
+        context.log.warn("Failed to run task", error);
+      }
+      progress?.(++current, count);
+    }
+  };
+  progress?.(current, count);
+  await Promise.all([...Array.from({ length: 4 })].map(runTask));
+  log.timeEnd("embed node");
+  await onEmbedNode?.(clone);
+  const svg = createForeignObjectSvg(clone, context);
+  svgDefsElement && svg.insertBefore(svgDefsElement, svg.children[0]);
+  svgStyleElement && svg.insertBefore(svgStyleElement, svg.children[0]);
+  autoDestruct && destroyContext(context);
+  await onCreateForeignObjectSvg?.(svg);
+  return svg;
+}
+function createForeignObjectSvg(clone, context) {
+  const { width, height } = context;
+  const svg = createSvg(width, height, clone.ownerDocument);
+  const foreignObject = svg.ownerDocument.createElementNS(svg.namespaceURI, "foreignObject");
+  foreignObject.setAttributeNS(null, "x", "0%");
+  foreignObject.setAttributeNS(null, "y", "0%");
+  foreignObject.setAttributeNS(null, "width", "100%");
+  foreignObject.setAttributeNS(null, "height", "100%");
+  foreignObject.append(clone);
+  svg.appendChild(foreignObject);
+  return svg;
+}
+async function domToCanvas(node, options) {
+  const context = await orCreateContext(node, options);
+  const svg = await domToForeignObjectSvg(context);
+  const dataUrl = svgToDataUrl(svg, context.isEnable("removeControlCharacter"));
+  if (!context.autoDestruct) {
+    context.svgStyleElement = createStyleElement(context.ownerDocument);
+    context.svgDefsElement = context.ownerDocument?.createElementNS(XMLNS, "defs");
+    context.svgStyles.clear();
+  }
+  const image = createImage(dataUrl, svg.ownerDocument);
+  return await imageToCanvas(image, context);
+}
+
+// src/picker/screenshot.ts
+var CROP_MARGIN_RATIO = 0.25;
+var CROP_MARGIN_MAX_PX = 160;
+var CROP_MARGIN_MIN_PX = 28;
+var CROP_MAX_WIDTH = 1600;
+var CROP_MAX_HEIGHT = 1200;
+var OUTPUT_MAX_DPR = 2;
+var OUTPUT_MAX_PIXELS = 26e5;
+var DATA_URL_SOFT_MAX = 36e5;
+var RENDER_TIMEOUT_MS = 8e3;
+var PII_PATTERNS = [
+  /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g,
+  /\b\d{3}-\d{2}-\d{4}\b/g,
+  /\b\d(?:[ -]?\d){12,18}\b/g
+];
+var MASK = "[masked]";
+var OUTLINE_COLOR = "#f04e23";
+function maskPiiText(text) {
+  let masked = text;
+  for (const pattern of PII_PATTERNS) {
+    pattern.lastIndex = 0;
+    masked = masked.replace(pattern, MASK);
+  }
+  return masked;
+}
+function cropMargin(size) {
+  return Math.min(
+    Math.max(size * CROP_MARGIN_RATIO, CROP_MARGIN_MIN_PX),
+    CROP_MARGIN_MAX_PX
+  );
+}
+function computeCropRect(target, viewportWidth, viewportHeight) {
+  const marginX = cropMargin(target.width);
+  const marginY = cropMargin(target.height);
+  let left = Math.max(0, target.left - marginX);
+  let top = Math.max(0, target.top - marginY);
+  const right = Math.min(viewportWidth, target.left + target.width + marginX);
+  const bottom = Math.min(viewportHeight, target.top + target.height + marginY);
+  const width = Math.min(right - left, CROP_MAX_WIDTH);
+  const height = Math.min(bottom - top, CROP_MAX_HEIGHT);
+  if (right - left > width) left += (right - left - width) / 2;
+  if (bottom - top > height) top += (bottom - top - height) / 2;
+  return { left, top, width: Math.max(0, width), height: Math.max(0, height) };
+}
+function isTextualField(el) {
+  if (el instanceof HTMLTextAreaElement) return true;
+  if (!(el instanceof HTMLInputElement)) return false;
+  const type = el.type;
+  return type !== "checkbox" && type !== "radio" && type !== "hidden" && type !== "file";
+}
+function isCapturable(node) {
+  return !(node instanceof Element && node.hasAttribute(HOST_ATTRIBUTE));
+}
+function maskClone(root) {
+  const doc = root.ownerDocument ?? root;
+  const view = doc.defaultView;
+  const walker = doc.createTreeWalker(
+    root,
+    (view?.NodeFilter ?? NodeFilter).SHOW_ELEMENT | (view?.NodeFilter ?? NodeFilter).SHOW_TEXT
+  );
+  const hosts = [];
+  let node = walker.currentNode;
+  while (node) {
+    if (node.nodeType === 3) {
+      const text = node.nodeValue;
+      if (text && text.trim()) {
+        const masked = maskPiiText(text);
+        if (masked !== text) node.nodeValue = masked;
+      }
+    } else if (node instanceof Element || node.tagName) {
+      const el = node;
+      if (el.hasAttribute(HOST_ATTRIBUTE)) {
+        hosts.push(el);
+      } else if (isTextualField(el)) {
+        const isPassword = el instanceof HTMLInputElement && el.type === "password";
+        const raw = el.getAttribute("value") ?? el.value ?? "";
+        const masked = isPassword && raw ? MASK : maskPiiText(raw);
+        if (el instanceof HTMLTextAreaElement) {
+          el.textContent = masked;
+          el.value = masked;
+        } else {
+          el.setAttribute("value", masked);
+          el.value = masked;
+        }
+        const placeholder = el.getAttribute("placeholder");
+        if (placeholder) el.setAttribute("placeholder", maskPiiText(placeholder));
+      }
+    }
+    node = walker.nextNode();
+  }
+  for (const host of hosts) host.parentNode?.removeChild(host);
+}
+function drawOutline(ctx, targetRect, cropRect, scale) {
+  ctx.save();
+  ctx.strokeStyle = OUTLINE_COLOR;
+  ctx.lineWidth = 2 * scale;
+  const inset = scale;
+  ctx.strokeRect(
+    (targetRect.left - cropRect.left) * scale + inset,
+    (targetRect.top - cropRect.top) * scale + inset,
+    targetRect.width * scale - inset * 2,
+    targetRect.height * scale - inset * 2
+  );
+  ctx.restore();
+}
+function outputScale(view, cropRect) {
+  const dpr = Math.min(view.devicePixelRatio || 1, OUTPUT_MAX_DPR);
+  const area = cropRect.width * cropRect.height;
+  if (area <= 0) return 1;
+  return Math.max(0.5, Math.min(dpr, Math.sqrt(OUTPUT_MAX_PIXELS / area)));
+}
+function halve(canvas, doc) {
+  const small = doc.createElement("canvas");
+  small.width = Math.max(1, Math.round(canvas.width / 2));
+  small.height = Math.max(1, Math.round(canvas.height / 2));
+  const ctx = small.getContext("2d");
+  if (!ctx) return null;
+  ctx.drawImage(canvas, 0, 0, small.width, small.height);
+  return small;
+}
+async function captureElementScreenshot(el) {
+  try {
+    const doc = el.ownerDocument;
+    const view = doc.defaultView;
+    if (!view || !doc.documentElement || !el.isConnected) return null;
+    const targetRectRaw = el.getBoundingClientRect();
+    const targetRect = {
+      left: targetRectRaw.left,
+      top: targetRectRaw.top,
+      width: targetRectRaw.width,
+      height: targetRectRaw.height
+    };
+    if (targetRect.width <= 0 || targetRect.height <= 0) return null;
+    const cropRect = computeCropRect(targetRect, view.innerWidth, view.innerHeight);
+    if (cropRect.width <= 0 || cropRect.height <= 0) return null;
+    const scale = outputScale(view, cropRect);
+    const shiftX = -(cropRect.left + (view.scrollX || 0));
+    const shiftY = -(cropRect.top + (view.scrollY || 0));
+    const canvas = await domToCanvas(doc.documentElement, {
+      width: cropRect.width,
+      height: cropRect.height,
+      scale,
+      backgroundColor: "#ffffff",
+      timeout: RENDER_TIMEOUT_MS,
+      filter: isCapturable,
+      onCloneNode: (cloned) => {
+        maskClone(cloned);
+      },
+      font: { preferredFormat: "woff2" },
+      style: {
+        transform: `translate(${shiftX}px, ${shiftY}px)`,
+        transformOrigin: "top left",
+        width: `${view.innerWidth}px`,
+        minHeight: `${view.innerHeight}px`,
+        margin: "0",
+        overflow: "visible"
+      }
+    });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    drawOutline(ctx, targetRect, cropRect, scale);
+    let dataUrl = canvas.toDataURL("image/png");
+    if (dataUrl.length > DATA_URL_SOFT_MAX) {
+      const smaller = halve(canvas, doc);
+      if (!smaller) return null;
+      dataUrl = smaller.toDataURL("image/png");
+    }
+    return dataUrl;
+  } catch {
+    return null;
+  }
+}
+
+// src/picker/overlay.ts
+var PICKER_HOST_ID = "arcy-picker";
+var BANNER_CLASS = "arcy-picker-banner";
+var HIGHLIGHT_CLASS = "arcy-picker-highlight";
+var PICKER_CSS = `
+.${BANNER_CLASS} {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: #101828;
+  color: #ffffff;
+  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28);
+  white-space: nowrap;
+}
+.${BANNER_CLASS}__title {
+  font-weight: 600;
+  margin-right: 2px;
+}
+.${BANNER_CLASS}__status {
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #d0d5dd;
+}
+.${BANNER_CLASS} button {
+  appearance: none;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px;
+  background: transparent;
+  color: #ffffff;
+  font: inherit;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.${BANNER_CLASS} button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.${BANNER_CLASS} button.is-active {
+  background: #f04e23;
+  border-color: #f04e23;
+}
+.${HIGHLIGHT_CLASS} {
+  border-radius: 3px;
+}
+`;
+function applySurvivalStyle(el, pointerEvents, offsets = []) {
+  el.style.setProperty("position", "absolute", "important");
+  el.style.setProperty("pointer-events", pointerEvents, "important");
+  for (const [property, value] of offsets) {
+    el.style.setProperty(property, value, "important");
+  }
+}
+var HIGHLIGHT_STYLE = [
+  ["box-sizing", "border-box"],
+  ["border", "2px solid #f04e23"],
+  ["background", "rgba(240, 78, 35, 0.08)"]
+];
+var BANNER_OFFSET = [
+  ["left", "50%"],
+  ["bottom", "24px"]
+];
+var BANNER_STYLE = [
+  ["transform", "translateX(-50%)"]
+];
+function statusLabel(target) {
+  const { text, tag } = target.core;
+  return text ? `Sent "${text}" to ARCY` : `Sent <${tag}> to ARCY`;
+}
+function createPickerOverlay(context) {
+  let shell = createShell({ id: PICKER_HOST_ID });
+  if (!shell) return null;
+  const doc = shell.host.ownerDocument;
+  let mode = "pick";
+  let destroyed = false;
+  let hovered = null;
+  let screenshotToken = 0;
+  injectStyles(shell, PICKER_CSS);
+  const highlight = doc.createElement("div");
+  highlight.className = HIGHLIGHT_CLASS;
+  applySurvivalStyle(highlight, "none");
+  for (const [property, value] of HIGHLIGHT_STYLE) {
+    highlight.style.setProperty(property, value);
+  }
+  hideHighlight();
+  const banner = doc.createElement("div");
+  banner.className = BANNER_CLASS;
+  applySurvivalStyle(banner, "auto", BANNER_OFFSET);
+  for (const [property, value] of BANNER_STYLE) {
+    banner.style.setProperty(property, value);
+  }
+  const title = doc.createElement("span");
+  title.className = `${BANNER_CLASS}__title`;
+  title.textContent = "ARCY element picker";
+  const pickButton = doc.createElement("button");
+  pickButton.type = "button";
+  pickButton.textContent = "Pick";
+  const browseButton = doc.createElement("button");
+  browseButton.type = "button";
+  browseButton.textContent = "Browse";
+  const status = doc.createElement("span");
+  status.className = `${BANNER_CLASS}__status`;
+  status.textContent = "Click the element you want this step to target.";
+  const exitButton = doc.createElement("button");
+  exitButton.type = "button";
+  exitButton.textContent = "Exit";
+  banner.append(title, pickButton, browseButton, status, exitButton);
+  shell.root.append(highlight, banner);
+  function setMode(next) {
+    mode = next;
+    pickButton.classList.toggle("is-active", next === "pick");
+    browseButton.classList.toggle("is-active", next === "browse");
+    status.textContent = next === "pick" ? "Click the element you want this step to target." : "Browsing. Clicks work normally; switch back to pick.";
+    if (next === "browse") hideHighlight();
+  }
+  function hideHighlight() {
+    highlight.style.setProperty("display", "none", "important");
+  }
+  function moveHighlight(el) {
+    try {
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) {
+        hideHighlight();
+        return;
+      }
+      highlight.style.setProperty("left", `${rect.left}px`, "important");
+      highlight.style.setProperty("top", `${rect.top}px`, "important");
+      highlight.style.setProperty("width", `${rect.width}px`, "important");
+      highlight.style.setProperty("height", `${rect.height}px`, "important");
+      highlight.style.setProperty("display", "block", "important");
+    } catch {
+      hideHighlight();
+    }
+  }
+  function isExcluded(target) {
+    return target instanceof Element && closestAcrossShadow(target, `[${HOST_ATTRIBUTE}]`) !== null;
+  }
+  function composedTarget(event) {
+    if (typeof event.composedPath === "function") {
+      const path = event.composedPath();
+      if (path.length > 0) return path[0];
+    }
+    return event.target;
+  }
+  function hostGone() {
+    if (shell !== null && shell.host.isConnected) return false;
+    destroy();
+    return true;
+  }
+  const onPointerMove = (event) => {
+    try {
+      if (hostGone() || mode !== "pick") return;
+      const target = composedTarget(event);
+      if (isExcluded(target) || !(target instanceof Element)) {
+        hovered = null;
+        hideHighlight();
+        return;
+      }
+      hovered = resolveInteractiveTarget(target);
+      moveHighlight(hovered);
+    } catch {
+    }
+  };
+  const onViewportShift = () => {
+    try {
+      if (hostGone() || mode !== "pick") return;
+      if (hovered && hovered.isConnected) moveHighlight(hovered);
+      else hideHighlight();
+    } catch {
+    }
+  };
+  const onPress = (event) => {
+    try {
+      if (hostGone() || mode !== "pick") return;
+      if (isExcluded(composedTarget(event))) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    } catch {
+    }
+  };
+  const onClick = (event) => {
+    try {
+      if (hostGone() || mode !== "pick") return;
+      const target = composedTarget(event);
+      if (isExcluded(target)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      if (!(target instanceof Element)) return;
+      const el = resolveInteractiveTarget(target);
+      const fingerprint = createTargetFingerprint(captureEventFingerprint(el));
+      const ranked = rankSelectors(el);
+      fingerprint.selector = ranked.autoSelector;
+      fingerprint.selectorCandidates = ranked.candidates;
+      status.textContent = statusLabel(fingerprint);
+      hovered = el;
+      moveHighlight(el);
+      let matchCount = 0;
+      try {
+        matchCount = matchTarget(fingerprint, doc).matchCount;
+      } catch {
+      }
+      context.onPick(fingerprint, matchCount);
+      if (context.screenshotsEnabled === false) return;
+      const token = ++screenshotToken;
+      void captureElementScreenshot(el).then((screenshot) => {
+        if (!screenshot || destroyed || token !== screenshotToken) return;
+        try {
+          context.onScreenshot?.(screenshot);
+        } catch {
+        }
+      });
+    } catch (error) {
+      warn(`The element picker could not read that element. ${String(error)}`);
+    }
+  };
+  function isEditable(target) {
+    if (!(target instanceof Element)) return false;
+    const tag = target.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+    return target.isContentEditable === true;
+  }
+  const onKeyDown = (event) => {
+    try {
+      if (hostGone()) return;
+      const key = event;
+      if (!key.altKey || key.code !== "KeyS" && key.key.toLowerCase() !== "s")
+        return;
+      if (isEditable(composedTarget(key))) return;
+      key.preventDefault();
+      setMode(mode === "pick" ? "browse" : "pick");
+    } catch {
+    }
+  };
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    try {
+      doc.removeEventListener("pointerdown", onPress, true);
+      doc.removeEventListener("mousedown", onPress, true);
+      doc.removeEventListener("mouseup", onPress, true);
+      doc.removeEventListener("auxclick", onPress, true);
+      doc.removeEventListener("click", onClick, true);
+      doc.removeEventListener("mousemove", onPointerMove, true);
+      doc.removeEventListener("keydown", onKeyDown, true);
+      doc.defaultView?.removeEventListener("scroll", onViewportShift, true);
+      doc.defaultView?.removeEventListener("resize", onViewportShift);
+    } catch {
+    }
+    shell?.destroy();
+    shell = null;
+  }
+  const keepFocusWhereItIs = (event) => {
+    try {
+      event.preventDefault();
+    } catch {
+    }
+  };
+  banner.addEventListener("pointerdown", keepFocusWhereItIs);
+  banner.addEventListener("mousedown", keepFocusWhereItIs);
+  pickButton.addEventListener("click", () => setMode("pick"));
+  browseButton.addEventListener("click", () => setMode("browse"));
+  exitButton.addEventListener("click", () => {
+    destroy();
+    try {
+      context.onExit();
+    } catch {
+    }
+  });
+  doc.addEventListener("pointerdown", onPress, true);
+  doc.addEventListener("mousedown", onPress, true);
+  doc.addEventListener("mouseup", onPress, true);
+  doc.addEventListener("auxclick", onPress, true);
+  doc.addEventListener("click", onClick, true);
+  doc.addEventListener("mousemove", onPointerMove, true);
+  doc.addEventListener("keydown", onKeyDown, true);
+  doc.defaultView?.addEventListener("scroll", onViewportShift, true);
+  doc.defaultView?.addEventListener("resize", onViewportShift);
+  setMode("pick");
+  return { destroy };
+}
+
+// src/picker/index.ts
+var registration = {
+  contract: PICKER_CONTRACT,
+  mount: (context) => {
+    try {
+      return createPickerOverlay(context);
+    } catch {
+      return null;
+    }
+  }
+};
+if (typeof window !== "undefined") {
+  try {
+    ;
+    window[PICKER_GLOBAL] = registration;
+  } catch {
+  }
+}