@ubio/webvision 2.6.1 → 2.6.3

package/build/webvision.global.js

@@ -0,0 +1,1001 @@
+"use strict";
+var Webvision = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/page/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    Counter: () => Counter,
+    INTERACTIVE_ROLES: () => INTERACTIVE_ROLES,
+    INTERACTIVE_TAGS: () => INTERACTIVE_TAGS,
+    PointSet: () => PointSet,
+    VX_DOM_SYMBOL: () => VX_DOM_SYMBOL,
+    VX_IGNORE_SYMBOL: () => VX_IGNORE_SYMBOL,
+    VX_IGNORE_TAGS: () => VX_IGNORE_TAGS,
+    VX_LABEL_ATTRS: () => VX_LABEL_ATTRS,
+    VX_LABEL_ATTR_PATTERNS: () => VX_LABEL_ATTR_PATTERNS,
+    VX_LAST_REFS_SYMBOL: () => VX_LAST_REFS_SYMBOL,
+    VX_NODE_SYMBOL: () => VX_NODE_SYMBOL,
+    VX_SRC_ATTRS: () => VX_SRC_ATTRS,
+    VX_TAG_PREFERENCE: () => VX_TAG_PREFERENCE,
+    VX_TREE_SYMBOL: () => VX_TREE_SYMBOL,
+    VX_VALUE_ATTRS: () => VX_VALUE_ATTRS,
+    VxPageView: () => VxPageView,
+    VxTreeParser: () => VxTreeParser,
+    VxTreeView: () => VxTreeView,
+    captureSnapshot: () => captureSnapshot,
+    clearOverlay: () => clearOverlay,
+    containsSelector: () => containsSelector,
+    escapeAttribute: () => escapeAttribute,
+    fixZIndex: () => fixZIndex,
+    getNormalizedText: () => getNormalizedText,
+    getOffsetTop: () => getOffsetTop,
+    getOverlayContainer: () => getOverlayContainer,
+    getSnapshot: () => getSnapshot,
+    getViewportSize: () => getViewportSize,
+    hasVisibleArea: () => hasVisibleArea,
+    highlightEl: () => highlightEl,
+    isContainerNode: () => isContainerNode,
+    isDeepHidden: () => isDeepHidden,
+    isHidden: () => isHidden,
+    isInteractive: () => isInteractive,
+    isObjectEmpty: () => isObjectEmpty,
+    isRandomIdentifier: () => isRandomIdentifier,
+    isRectInViewport: () => isRectInViewport,
+    makeOverlaysOpaque: () => makeOverlaysOpaque,
+    normalizeText: () => normalizeText,
+    probeViewport: () => probeViewport,
+    renderVxNode: () => renderVxNode,
+    resolveDomNode: () => resolveDomNode,
+    showPoint: () => showPoint,
+    traverseElements: () => traverseElements,
+    traverseVxNode: () => traverseVxNode,
+    truncateAttrValue: () => truncateAttrValue
+  });
+
+  // src/page/counter.ts
+  var Counter = class {
+    constructor(value = 0) {
+      this.value = value;
+    }
+    next() {
+      this.value += 1;
+      return this.value;
+    }
+    current() {
+      return this.value;
+    }
+  };
+
+  // src/page/dom.ts
+  var ORIGINAL_STYLE_SYMBOL = Symbol("vx:originalStyle");
+  var INTERACTIVE_TAGS = ["a", "button", "input", "textarea", "select", "label", "option", "optgroup"];
+  var INTERACTIVE_ROLES = [
+    "clickable",
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "textbox",
+    "combobox",
+    "listbox",
+    "menu",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "optgroup",
+    "progressbar",
+    "scrollbar",
+    "slider",
+    "spinbutton",
+    "switch",
+    "tab",
+    "tablist",
+    "timer",
+    "toolbar"
+  ];
+  function isHidden(el) {
+    const style = getComputedStyle(el);
+    if (style.display === "none") {
+      return true;
+    }
+    if (style.visibility === "hidden") {
+      return true;
+    }
+    if (style.opacity === "0") {
+      return true;
+    }
+    return false;
+  }
+  function getNormalizedText(el) {
+    return normalizeText(el.textContent ?? "");
+  }
+  function normalizeText(str) {
+    return str.replace(/\p{Cf}/gu, " ").replace(/\s+/g, " ").trim();
+  }
+  function truncateAttrValue(value, limit = 100) {
+    if (value.match(/^(javascript:)?void/)) {
+      return "";
+    }
+    if (value.startsWith("data:")) {
+      return "";
+    }
+    if (value.length > limit) {
+      return value.slice(0, limit) + "\u2026";
+    }
+    return value;
+  }
+  function escapeAttribute(value) {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\r?\n/g, " ");
+  }
+  function containsSelector(el, selector) {
+    return el.matches(selector) || !!el.querySelector(selector);
+  }
+  function getOffsetTop(node) {
+    let y = 0;
+    let current = node;
+    while (current) {
+      y += current.offsetTop ?? 0;
+      current = current.offsetParent;
+    }
+    return y;
+  }
+  function hasVisibleArea(element) {
+    const rect = element.getBoundingClientRect();
+    const area = rect.width * rect.height;
+    return area > 64;
+  }
+  function isDeepHidden(element) {
+    if (isHidden(element)) {
+      return true;
+    }
+    if (!hasVisibleArea(element)) {
+      return [...element.children].every((el) => isDeepHidden(el));
+    }
+    return false;
+  }
+  function isInteractive(el) {
+    const htmlEl = el;
+    if (INTERACTIVE_TAGS.includes(el.tagName.toLowerCase())) {
+      return true;
+    }
+    const tabindex = htmlEl.getAttribute("tabindex");
+    if (tabindex && parseInt(tabindex) >= 0) {
+      return true;
+    }
+    const role = htmlEl.getAttribute("role") ?? htmlEl.getAttribute("aria-role") ?? "";
+    if (INTERACTIVE_ROLES.includes(role)) {
+      return true;
+    }
+    if (htmlEl.onclick != null) {
+      return true;
+    }
+    const styles = getComputedStyle(htmlEl);
+    if (styles.cursor === "pointer") {
+      return true;
+    }
+    return false;
+  }
+  function getViewportSize() {
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+  function isRectInViewport(rect, viewport) {
+    return rect.left < viewport.width && rect.right > 0 && rect.top < viewport.height && rect.bottom > 0;
+  }
+  function makeOverlaysOpaque(el) {
+    if (!el[ORIGINAL_STYLE_SYMBOL]) {
+      el[ORIGINAL_STYLE_SYMBOL] = el.getAttribute("style");
+    }
+    const rect = el.getBoundingClientRect();
+    if (rect.width < 500 || rect.height < 500) {
+      return;
+    }
+    const style = getComputedStyle(el);
+    if (style.pointerEvents === "none") {
+      return;
+    }
+    el.style.setProperty("animation", "none", "important");
+    el.style.setProperty("transition", "none", "important");
+    el.style.setProperty("backdrop-filter", "none", "important");
+    el.style.setProperty("mix-blend-mode", "normal", "important");
+    el.style.setProperty("opacity", "1", "important");
+    el.style.setProperty("filter", "none", "important");
+    const bg = style.backgroundColor;
+    el.style.setProperty("background-color", removeAlpha(bg));
+  }
+  function removeAlpha(color) {
+    const rgba = color.match(/^rgba\((.*)\)$/);
+    if (!rgba) {
+      return color;
+    }
+    const [r, g, b, a] = rgba[1].split(",").map(parseFloat);
+    if (a > 0 && a < 1) {
+      return `rgba(${r},${g},${b},1)`;
+    }
+    return color;
+  }
+  function isRandomIdentifier(str) {
+    const words = str.split(/[_-]/g);
+    return !words.some((w) => isWordLike(w)) || words.some((w) => isRandomString(w));
+  }
+  function isWordLike(str) {
+    if (str.length <= 2) {
+      return false;
+    }
+    if (/[^eyuioa]{4,}/.test(str)) {
+      return false;
+    }
+    if (/[eyuioa]{4,}/.test(str)) {
+      return false;
+    }
+    return true;
+  }
+  function isRandomString(str) {
+    if (/^[0-9a-f]+$/i.test(str) && /[0-9]/.test(str)) {
+      return true;
+    }
+    if (/[0-9][^0-9]+[0-9]/.test(str)) {
+      return true;
+    }
+    return false;
+  }
+  function fixZIndex(el) {
+    const _style = getComputedStyle(el);
+    const zIndex = parseInt(_style.zIndex);
+    if (!isNaN(zIndex)) {
+      const maxZIndex = 2147483647;
+      if (zIndex > maxZIndex - 200) {
+        el.style.zIndex = String(zIndex - 1);
+      }
+    }
+  }
+
+  // src/page/traverse.ts
+  function* traverseVxNode(vxNode, depth = 0) {
+    yield { vxNode, depth };
+    for (const child of vxNode.children ?? []) {
+      yield* traverseVxNode(child, depth + 1);
+    }
+  }
+  function* traverseElements(element) {
+    yield element;
+    for (const child of element.children) {
+      yield* traverseElements(child);
+    }
+  }
+
+  // src/page/probe.ts
+  function probeViewport() {
+    const { width, height } = getViewportSize();
+    const points = new PointSet(width, height);
+    const result = /* @__PURE__ */ new Set();
+    for (const el of traverseElements(document.body)) {
+      const rect = el.getBoundingClientRect();
+      points.add(rect.left, rect.top);
+      points.add(rect.right, rect.top);
+      points.add(rect.left, rect.bottom);
+      points.add(rect.right, rect.bottom);
+      points.add(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    }
+    for (const { x, y } of points.getAll()) {
+      const element = document.elementFromPoint(x, y);
+      if (element && !result.has(element)) {
+        result.add(element);
+      }
+    }
+    return Array.from(result);
+  }
+  var PointSet = class {
+    constructor(maxX, maxY) {
+      this.maxX = maxX;
+      this.maxY = maxY;
+      this.map = /* @__PURE__ */ new Map();
+    }
+    *getAll() {
+      for (const [y, set] of this.map.entries()) {
+        for (const x of set) {
+          yield { x, y };
+        }
+      }
+    }
+    has(x, y) {
+      if (x > this.maxX || y > this.maxY) {
+        return false;
+      }
+      const set = this.map.get(y);
+      return set ? set.has(x) : false;
+    }
+    add(x, y) {
+      if (x > this.maxX || y > this.maxY) {
+        return;
+      }
+      const set = this.map.get(y);
+      if (set) {
+        set.add(x);
+      } else {
+        this.map.set(y, /* @__PURE__ */ new Set([x]));
+      }
+    }
+  };
+
+  // src/page/util.ts
+  function isContainerNode(vxNode) {
+    if (vxNode.tagName === "select") {
+      return false;
+    }
+    const children = vxNode.children ?? [];
+    const hasTextChildren = children.some((child) => !child.tagName);
+    return children.length > 0 && !hasTextChildren;
+  }
+  function isObjectEmpty(obj) {
+    return !Object.values(obj).some((value) => !!value);
+  }
+
+  // src/page/parser.ts
+  var VX_NODE_SYMBOL = Symbol("vx:node");
+  var VX_IGNORE_SYMBOL = Symbol("vx:ignore");
+  var VX_IGNORE_TAGS = ["svg", "script", "noscript", "style", "link", "meta"];
+  var VX_LABEL_ATTRS = ["title", "alt", "placeholder", "aria-label"];
+  var VX_LABEL_ATTR_PATTERNS = [
+    /^aria-.+/,
+    // aria-* attributes
+    /^data-label/,
+    // data-label attributes
+    /title/i
+    // title-* attributes
+  ];
+  var VX_VALUE_ATTRS = ["value", "checked", "selected", "disabled", "readonly"];
+  var VX_SRC_ATTRS = ["src", "href"];
+  var VX_TAG_PREFERENCE = [
+    "a",
+    "iframe",
+    "input",
+    "button",
+    "select",
+    "textarea",
+    "img",
+    "label",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "ul",
+    "ol",
+    "li",
+    "dl",
+    "dt",
+    "dd",
+    "section",
+    "article",
+    "main",
+    "header",
+    "footer",
+    "nav",
+    "aside",
+    "form",
+    "input",
+    "textarea",
+    "select",
+    "option",
+    "fieldset",
+    "legend",
+    "p",
+    "pre",
+    "code",
+    "blockquote",
+    "figure",
+    "figcaption",
+    "table",
+    "thead",
+    "tbody",
+    "tr",
+    "td",
+    "th",
+    "strong",
+    "em",
+    "sub",
+    "sup"
+  ];
+  var VX_KEEP_SELECTOR = "a, button, input, textarea, select, label, iframe, option, optgroup";
+  var VxTreeParser = class {
+    constructor(options = {}) {
+      this.options = options;
+      this.probeElements = [];
+      this.domRefMap = /* @__PURE__ */ new Map();
+      const { startRef = 0 } = options;
+      this.viewport = getViewportSize();
+      this.counter = new Counter(startRef);
+      if (options.probeViewport) {
+        this.probeElements = probeViewport();
+      }
+      const vxRoot = this.parseDocument();
+      this.refRange = [startRef, this.counter.current()];
+      this.vxNodes = this.pruneRecursive(vxRoot);
+    }
+    parseDocument() {
+      return this.parseNode(document.documentElement, null);
+    }
+    getTree() {
+      return new VxTreeView(this.vxNodes, this.refRange);
+    }
+    getNodes() {
+      return this.vxNodes;
+    }
+    getRefRange() {
+      return this.refRange;
+    }
+    getDomMap() {
+      return this.domRefMap;
+    }
+    parseNode(node, parent) {
+      if (!node || node[VX_IGNORE_SYMBOL]) {
+        return null;
+      }
+      if (node instanceof Text) {
+        const textContent = normalizeText(node.textContent ?? "");
+        if (textContent) {
+          return this.makeNode(node, {
+            textContent,
+            hasVisibleArea: parent?.hasVisibleArea,
+            isOutsideViewport: parent?.isOutsideViewport,
+            isProbeHit: parent?.isProbeHit
+          });
+        }
+        return null;
+      }
+      if (node instanceof Element) {
+        if (this.options.opaqueOverlays) {
+          makeOverlaysOpaque(node);
+        }
+        return this.parseElement(node);
+      }
+      return null;
+    }
+    parseElement(el) {
+      const skip = VX_IGNORE_TAGS.includes(el.tagName.toLowerCase()) || isHidden(el);
+      if (skip) {
+        this.clearRecursive(el);
+        return null;
+      }
+      const parentEl = el.matches("option, optgroup") ? el.closest("select") ?? el : el;
+      const rect = parentEl.getBoundingClientRect();
+      const id = el.getAttribute("id") ?? "";
+      const vxNode = this.makeNode(el, {
+        tagName: el.tagName.toLowerCase(),
+        id: isRandomIdentifier(id) ? void 0 : id,
+        classList: Array.from(el.classList).filter((cls) => !isRandomIdentifier(cls)).slice(0, 4),
+        labelAttrs: this.collectLabelAttrs(el),
+        valueAttrs: this.collectValueAttrs(el),
+        srcAttrs: this.collectSrcAttrs(el),
+        hasVisibleArea: hasVisibleArea(parentEl),
+        isInteractive: isInteractive(parentEl),
+        isOutsideViewport: !isRectInViewport(rect, this.viewport),
+        isProbeHit: this.isProbeHit(parentEl),
+        isKept: el.matches(VX_KEEP_SELECTOR)
+      });
+      const children = [...el.childNodes].map((child) => this.parseNode(child, vxNode)).filter((_) => _ != null);
+      if (children.length === 1 && !children[0]?.tagName) {
+        vxNode.textContent = normalizeText(children[0].textContent ?? "");
+      } else {
+        vxNode.children = children;
+      }
+      return vxNode;
+    }
+    makeNode(node, spec) {
+      const ref = this.counter.next();
+      const isNew = !node[VX_NODE_SYMBOL];
+      const vxNode = {
+        ...spec,
+        ref,
+        isNew
+      };
+      this.domRefMap.set(ref, node);
+      node[VX_NODE_SYMBOL] = vxNode;
+      return vxNode;
+    }
+    pruneRecursive(vxNode) {
+      if (!vxNode) {
+        return [];
+      }
+      const children = vxNode.children ?? [];
+      const newChildren = children.flatMap((child) => this.pruneRecursive(child));
+      if (this.shouldOmit(vxNode)) {
+        return newChildren;
+      }
+      vxNode.children = newChildren;
+      if (newChildren.length === 1) {
+        const child = newChildren[0];
+        return this.collapseSingleChild(vxNode, child);
+      }
+      return [vxNode];
+    }
+    collapseSingleChild(parent, child) {
+      const preferParent = this.collapsePreferParent(parent, child);
+      const merged = preferParent ? this.collapseMerge(parent, child) : this.collapseMerge(child, parent);
+      return this.pruneRecursive({
+        ...merged,
+        children: child.children,
+        textContent: child.textContent
+      });
+    }
+    collapsePreferParent(parent, child) {
+      const parentRank = VX_TAG_PREFERENCE.indexOf(parent.tagName ?? "");
+      const childRank = VX_TAG_PREFERENCE.indexOf(child.tagName ?? "");
+      if (parentRank === -1 && childRank === -1) {
+        const parentAttrCount = Object.keys({
+          ...parent.labelAttrs,
+          ...parent.valueAttrs,
+          ...parent.srcAttrs
+        }).length;
+        const childAttrCount = Object.keys({
+          ...child.labelAttrs,
+          ...child.valueAttrs,
+          ...child.srcAttrs
+        }).length;
+        return parentAttrCount > childAttrCount;
+      }
+      return parentRank !== -1 && (childRank === -1 || parentRank < childRank);
+    }
+    collapseMerge(a, b) {
+      return {
+        ...b,
+        ...a,
+        labelAttrs: { ...b.labelAttrs, ...a.labelAttrs },
+        valueAttrs: { ...b.valueAttrs, ...a.valueAttrs },
+        srcAttrs: { ...b.srcAttrs, ...a.srcAttrs }
+      };
+    }
+    shouldOmit(vxNode) {
+      const tagName = vxNode.tagName ?? "";
+      if (!vxNode.hasVisibleArea) {
+        return true;
+      }
+      if (this.options.viewportOnly && vxNode.isOutsideViewport) {
+        return true;
+      }
+      if (this.options.probeViewport && !vxNode.isProbeHit) {
+        return true;
+      }
+      if (this.options.skipImages && vxNode.tagName === "img") {
+        return true;
+      }
+      const hasText = !!vxNode.textContent;
+      const hasChildren = (vxNode.children ?? []).length > 0;
+      const hasAttrs = [vxNode.labelAttrs, vxNode.valueAttrs, vxNode.srcAttrs].some((attrs) => !isObjectEmpty(attrs ?? {}));
+      if (this.options.unnestDivs) {
+        const isDivOrSpan = ["div", "span"].includes(tagName);
+        if (isDivOrSpan && hasChildren && !hasAttrs) {
+          return true;
+        }
+      }
+      if (vxNode.isKept) {
+        return false;
+      }
+      return !hasText && !hasAttrs && !hasChildren;
+    }
+    isProbeHit(el) {
+      for (const probeEl of this.probeElements) {
+        if (el.contains(probeEl)) {
+          return true;
+        }
+      }
+      return false;
+    }
+    collectLabelAttrs(el) {
+      const attrs = {};
+      for (const attr of el.attributes) {
+        const attrName = attr.name;
+        const value = truncateAttrValue(attr.value);
+        if (!value) {
+          continue;
+        }
+        if (VX_LABEL_ATTRS.includes(attrName)) {
+          attrs[attrName] = value;
+          continue;
+        }
+        if (VX_LABEL_ATTR_PATTERNS.some((pattern) => pattern.test(attrName))) {
+          attrs[attrName] = value;
+        }
+      }
+      return attrs;
+    }
+    collectValueAttrs(el) {
+      const attrs = {};
+      for (const attr of VX_VALUE_ATTRS) {
+        const value = el[attr] ?? "";
+        if (value) {
+          attrs[attr] = String(value);
+        }
+      }
+      return attrs;
+    }
+    collectSrcAttrs(el) {
+      const attrs = {};
+      for (const attr of VX_SRC_ATTRS) {
+        const value = truncateAttrValue(el[attr] ?? "");
+        if (value) {
+          attrs[attr] = value;
+        }
+      }
+      return attrs;
+    }
+    clearRecursive(node) {
+      node[VX_NODE_SYMBOL] = null;
+      if (node instanceof Element) {
+        for (const child of node.children) {
+          this.clearRecursive(child);
+        }
+      }
+    }
+  };
+
+  // src/page/overlay.ts
+  function showPoint(x, y, clear = true) {
+    if (clear) {
+      clearOverlay();
+    }
+    const point = document.createElement("div");
+    point.style.position = "absolute";
+    point.style.left = `${x}px`;
+    point.style.top = `${y}px`;
+    point.style.width = "32px";
+    point.style.height = "32px";
+    point.style.transform = "translate(-50%, -50%)";
+    point.style.backgroundColor = "red";
+    point.style.borderRadius = "100%";
+    point.style.opacity = "0.5";
+    const container = getOverlayContainer();
+    container.appendChild(point);
+  }
+  function clearOverlay() {
+    const container = getOverlayContainer();
+    container.remove();
+  }
+  function getOverlayContainer() {
+    let container = document.querySelector("#webvision-overlay");
+    if (!container) {
+      container = document.createElement("div");
+      container[VX_IGNORE_SYMBOL] = true;
+      container.id = "webvision-overlay";
+      container.style.position = "fixed";
+      container.style.top = "0";
+      container.style.left = "0";
+      container.style.bottom = "0";
+      container.style.right = "0";
+      container.style.zIndex = "2147483647";
+      container.style.pointerEvents = "none";
+      document.body.appendChild(container);
+    }
+    return container;
+  }
+
+  // src/page/highlight.ts
+  function highlightEl(el, ref = 0, color) {
+    if (!(el instanceof Element)) {
+      return;
+    }
+    if (el instanceof HTMLOptGroupElement) {
+      return;
+    }
+    if (el instanceof HTMLOptionElement) {
+      return;
+    }
+    const container = getOverlayContainer();
+    const rect = el.getBoundingClientRect();
+    const overlay = document.createElement("div");
+    container.appendChild(overlay);
+    overlay.style.position = "absolute";
+    overlay.style.top = `${rect.top}px`;
+    overlay.style.left = `${rect.left}px`;
+    overlay.style.width = `${rect.width}px`;
+    overlay.style.height = `${rect.height}px`;
+    overlay.style.border = `2px solid ${color}`;
+    const label = document.createElement("div");
+    overlay.appendChild(label);
+    label.style.position = "absolute";
+    label.style.bottom = `100%`;
+    label.style.left = `0`;
+    label.style.backgroundColor = color ?? getRandomColor(ref);
+    label.style.color = "white";
+    label.style.fontSize = "10px";
+    label.style.fontFamily = "monospace";
+    label.style.fontWeight = "normal";
+    label.style.fontStyle = "normal";
+    label.style.opacity = "0.8";
+    label.style.padding = "0 2px";
+    label.style.transform = "translateY(50%)";
+    label.textContent = String(ref);
+  }
+  function getRandomColor(index) {
+    const hue = index * 120 * 0.382 % 360;
+    return `hsl(${hue}, 85%, 50%)`;
+  }
+
+  // src/page/render.ts
+  function renderVxNode(scope, options = {}) {
+    const buffer = [];
+    const whitelistRefs = options.whitelistRefs ?? [];
+    for (const { vxNode, depth } of traverseVxNode(scope)) {
+      if (whitelistRefs.length > 0) {
+        if (!whitelistRefs.includes(vxNode.ref)) {
+          continue;
+        }
+      }
+      if (options.skipNonInteractive && !vxNode.isInteractive) {
+        continue;
+      }
+      const indent = options.skipNonInteractive ? "" : "    ".repeat(depth);
+      buffer.push(renderIndentedLine(indent, vxNode, options));
+    }
+    return buffer.join("\n");
+  }
+  function renderIndentedLine(indent, vxNode, options = {}) {
+    const diffPrefix = options.renderDiff ? vxNode.isNew ? "+ " : "  " : "";
+    if (!vxNode.tagName) {
+      return [diffPrefix, indent, vxNode.textContent].filter(Boolean).join("");
+    }
+    const tagLine = renderTagLine(vxNode, options);
+    const htmlStyle = options.renderStyle === "html";
+    return [
+      diffPrefix,
+      indent,
+      tagLine,
+      htmlStyle ? "" : " ",
+      vxNode.textContent ?? ""
+    ].join("");
+  }
+  function renderTagLine(vxNode, options) {
+    const htmlStyle = options.renderStyle === "html";
+    const components = [];
+    if (options.renderTagNames && vxNode.tagName) {
+      components.push(vxNode.tagName);
+    }
+    if (options.renderIds && vxNode.id) {
+      if (htmlStyle) {
+        components.push(`id="${vxNode.id}"`);
+      } else {
+        components.push(`#${vxNode.id}`);
+      }
+    }
+    if (options.renderClassNames && vxNode.classList?.length) {
+      if (htmlStyle) {
+        components.push(`class="${vxNode.classList.join(" ")}"`);
+      } else {
+        components.push("." + vxNode.classList.join("."));
+      }
+    }
+    if (options.renderRefs) {
+      const isRenderRef = [
+        options.renderRefs === "all",
+        options.renderRefs === true && !isContainerNode(vxNode)
+      ].some(Boolean);
+      if (isRenderRef) {
+        components.push(`[@${vxNode.ref}]`);
+      }
+    }
+    const attrs = [];
+    if (options.renderLabelAttrs) {
+      for (const [attr, value] of Object.entries(vxNode.labelAttrs ?? {})) {
+        attrs.push(`${attr}="${truncateAttrValue(value)}"`);
+      }
+    }
+    if (options.renderValueAttrs) {
+      for (const [attr, value] of Object.entries(vxNode.valueAttrs ?? {})) {
+        attrs.push(`${attr}="${truncateAttrValue(value)}"`);
+      }
+    }
+    if (options.renderSrcAttrs) {
+      for (const [attr, value] of Object.entries(vxNode.srcAttrs ?? {})) {
+        attrs.push(`${attr}="${truncateAttrValue(value)}"`);
+      }
+    }
+    if (htmlStyle) {
+      components.push(...attrs);
+    } else {
+      components.push(...attrs.map((attr) => `[${attr}]`));
+    }
+    return htmlStyle ? `<${components.join(" ")}>` : components.join("");
+  }
+
+  // src/page/snapshot.ts
+  var VX_DOM_SYMBOL = Symbol("vx:dom");
+  var VX_TREE_SYMBOL = Symbol("vx:tree");
+  var VX_LAST_REFS_SYMBOL = Symbol("vx:lastRefs");
+  function captureSnapshot(options = {}) {
+    const parser = new VxTreeParser(options);
+    const domMap = parser.getDomMap();
+    const vxTree = parser.getTree();
+    globalThis[VX_DOM_SYMBOL] = domMap;
+    globalThis[VX_TREE_SYMBOL] = vxTree;
+    return vxTree;
+  }
+  function getSnapshot() {
+    const vxTree = globalThis[VX_TREE_SYMBOL];
+    if (!vxTree) {
+      throw new Error("[VX] Snapshot not found");
+    }
+    return vxTree;
+  }
+  function resolveDomNode(ref) {
+    const domMap = globalThis[VX_DOM_SYMBOL];
+    if (!domMap) {
+      return null;
+    }
+    return domMap.get(ref) ?? null;
+  }
+
+  // src/page/tree.ts
+  var VxTreeView = class {
+    constructor(nodes, refRange) {
+      this.nodes = nodes;
+      this.refRange = refRange;
+      this.refMap = /* @__PURE__ */ new Map();
+      this.buildRefMap(nodes);
+    }
+    get nodeCount() {
+      return this.refMap.size;
+    }
+    *traverse() {
+      for (const vxNode of this.nodes) {
+        yield* traverseVxNode(vxNode, 0);
+      }
+    }
+    buildRefMap(nodes) {
+      for (const node of nodes) {
+        this.refMap.set(node.ref, node);
+        this.buildRefMap(node.children ?? []);
+      }
+    }
+    findNode(ref) {
+      return this.refMap.get(ref) ?? null;
+    }
+    render(options = {}) {
+      return this.nodes.map((node) => {
+        return renderVxNode(node, options);
+      }).join("\n");
+    }
+    highlight(options = {}) {
+      if (options.clearOverlay) {
+        clearOverlay();
+      }
+      const leafOnly = !options.includeAll;
+      const refs = this.collectRefs(leafOnly, options.filterRefs);
+      this.highlightRefs(refs, options);
+    }
+    highlightRefs(refs, options = {}) {
+      for (const ref of refs) {
+        const el = resolveDomNode(ref);
+        if (el instanceof Element) {
+          const vxNode = this.findNode(ref);
+          const isNew = vxNode?.isNew ?? false;
+          const color = options.useColors ? void 0 : isNew ? "#0a0" : "#060";
+          highlightEl(el, ref, color);
+        }
+      }
+    }
+    collectRefs(leafOnly = true, filterRefs) {
+      const refs = [];
+      for (const { vxNode } of this.traverse()) {
+        if (leafOnly && isContainerNode(vxNode)) {
+          continue;
+        }
+        if (filterRefs && !filterRefs.includes(vxNode.ref)) {
+          continue;
+        }
+        refs.push(vxNode.ref);
+      }
+      return refs;
+    }
+  };
+
+  // src/page/frame.ts
+  var VxPageView = class {
+    constructor(vxFrames) {
+      this.vxFrames = vxFrames;
+      this.vxFrameMap = /* @__PURE__ */ new Map();
+      this.vxTreeMap = /* @__PURE__ */ new Map();
+      for (const frame of vxFrames) {
+        this.vxFrameMap.set(frame.frameId, frame);
+        this.vxTreeMap.set(frame.frameId, new VxTreeView(frame.nodes, frame.refRange));
+      }
+    }
+    get vxTrees() {
+      return [...this.vxTreeMap.values()];
+    }
+    get nodeCount() {
+      return this.vxTrees.reduce((acc, vxTree) => acc + vxTree.nodeCount, 0);
+    }
+    findNodeByRef(ref) {
+      const vxTree = this.findTreeByRef(ref);
+      if (vxTree == null) {
+        return null;
+      }
+      return vxTree.findNode(ref);
+    }
+    findTreeByFrameId(frameId) {
+      return this.vxTreeMap.get(frameId) ?? null;
+    }
+    findTreeByRef(ref) {
+      const vxFrame = this.findFrameByRef(ref);
+      if (vxFrame == null) {
+        return null;
+      }
+      return this.vxTreeMap.get(vxFrame.frameId) ?? null;
+    }
+    findFrameByFrameId(frameId) {
+      return this.vxFrameMap.get(frameId) ?? null;
+    }
+    findFrameByRef(ref) {
+      const vxFrame = this.vxFrames.find(
+        (frame) => ref >= frame.refRange[0] && ref <= frame.refRange[1]
+      );
+      if (!vxFrame) {
+        return null;
+      }
+      return this.vxFrameMap.get(vxFrame.frameId) ?? null;
+    }
+    getFrameByRef(ref) {
+      const vxFrame = this.findFrameByRef(ref);
+      if (vxFrame == null) {
+        throw new Error(`[VX] Frame not found for [ref=${ref}]`);
+      }
+      return vxFrame;
+    }
+    findParentFrame(frameId) {
+      const frame = this.findFrameByFrameId(frameId);
+      const iframeRef = frame?.iframeRef;
+      if (iframeRef == null) {
+        return null;
+      }
+      return this.findFrameByRef(iframeRef);
+    }
+    isFrameShown(frameId) {
+      const frame = this.findFrameByFrameId(frameId);
+      if (!frame) {
+        return false;
+      }
+      const parentFrame = this.findParentFrame(frameId);
+      const { iframeRef } = frame;
+      if (parentFrame == null || iframeRef == null) {
+        return true;
+      }
+      const vxTree = this.vxTreeMap.get(frameId);
+      const existsInParent = !!vxTree?.findNode(iframeRef);
+      return existsInParent ? this.isFrameShown(parentFrame.frameId) : false;
+    }
+    renderAll(options) {
+      return this.vxFrames.map((frame) => {
+        const vxTree = this.vxTreeMap.get(frame.frameId);
+        const rendered = vxTree?.render(options);
+        return [
+          `FRAME ${frame.frameId}${frame.iframeRef ? ` [@${frame.iframeRef}]` : ""}`,
+          rendered
+        ].join("\n\n");
+      }).join("\n\n");
+    }
+  };
+  return __toCommonJS(index_exports);
+})();
+//# sourceMappingURL=webvision.global.js.map