@ubio/webvision 1.2.6 → 2.0.0

package/build/page.mjs

@@ -1,243 +1,273 @@
-// src/page/highlight.ts
-function highlightSnapshot(snapshot, refMap) {
-  removeHighlight();
-  const container = getHighlightContainer();
-  container.innerHTML = "";
-  highlightRecursive(snapshot, refMap, container);
-}
-function highlightRecursive(snapshot, refMap, container) {
-  highlightEl(snapshot, refMap, container);
-  for (const child of snapshot.children ?? []) {
-    highlightRecursive(child, refMap, container);
-  }
-}
-function highlightEl(snapshot, refMap, container) {
-  const isContainerEl = !snapshot.leaf && snapshot.children?.every((child) => child.nodeType === "element");
-  if (isContainerEl) {
-    return;
+// src/page/counter.ts
+var Counter = class {
+  constructor(value = 0) {
+    this.value = value;
   }
-  const node = refMap.get(snapshot.ref);
-  if (!(node instanceof Element)) {
-    return;
+  next() {
+    this.value += 1;
+    return this.value;
   }
-  const color = getColor(snapshot.ref);
-  const rect = node.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;
-  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(snapshot.ref);
+  current() {
+    return this.value;
+  }
+};
+
+// src/page/dom.ts
+var ORIGINAL_STYLE_SYMBOL = Symbol("vx:originalStyle");
+var INTERACTIVE_TAGS = ["a", "button", "input", "textarea", "select", "label"];
+var INTERACTIVE_ROLES = [
+  "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 removeHighlight() {
-  const container = getHighlightContainer();
-  document.documentElement.removeChild(container);
+function getNormalizedText(el) {
+  return normalizeText(el.textContent ?? "");
 }
-function getHighlightContainer() {
-  let container = document.querySelector("#webvision-highlight");
-  if (!container) {
-    container = document.createElement("div");
-    container.id = "webvision-highlight";
-    container.style.position = "absolute";
-    container.style.pointerEvents = "none";
-    container.style.top = "0";
-    container.style.left = "0";
-    container.style.width = "100%";
-    container.style.height = "100%";
-    container.style.zIndex = "2147483646";
-    document.documentElement.appendChild(container);
+function normalizeText(str) {
+  return str.replace(/\p{Cf}/gu, " ").replace(/\s+/g, " ").trim();
+}
+function truncateAttrValue(value, limit = 100) {
+  if (value.match(/^(javascript:)?void/)) {
+    return "";
   }
-  return container;
+  if (value.startsWith("data:")) {
+    return "";
+  }
+  if (value.length > limit) {
+    return value.slice(0, limit) + "\u2026";
+  }
+  return value;
 }
-function getColor(index) {
-  const hue = index * 120 * 0.382 % 360;
-  return `hsl(${hue}, 85%, 50%)`;
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\r?\n/g, " ");
 }
-
-// src/page/html.ts
-function captureAncestorsHtml(el, includeText = true) {
-  const path = [];
-  let current = el;
+function containsSelector(el, selector) {
+  return el.matches(selector) || !!el.querySelector(selector);
+}
+function getOffsetTop(node) {
+  let y = 0;
+  let current = node;
   while (current) {
-    path.push(captureHtmlLine(current));
-    current = current.parentElement;
-  }
-  if (includeText) {
-    const anyEl = el;
-    path.unshift(anyEl.value || anyEl.innerText || anyEl.textContent || "");
+    y += current.offsetTop ?? 0;
+    current = current.offsetParent;
   }
-  return path.reverse().filter(Boolean);
+  return y;
 }
-function captureHtmlLine(el) {
-  const html = [];
-  if (el instanceof HTMLElement) {
-    html.push(`${el.tagName.toLowerCase()}`);
-    for (const attr of el.attributes) {
-      html.push(`${attr.name}="${attr.value}"`);
-    }
-    return `<${html.join(" ")}>`;
+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 (el instanceof Text) {
-    return el.textContent;
+  if (!hasVisibleArea(element)) {
+    return [...element.children].every((el) => isDeepHidden(el));
   }
-  return "";
+  return false;
 }
-function captureHtml(el) {
-  if (el instanceof HTMLElement) {
-    const anyEl = el;
-    return [
-      captureHtmlLine(el),
-      anyEl.value || anyEl.innerText || anyEl.textContent || "",
-      `</${el.tagName.toLowerCase()}>`
-    ].filter(Boolean).join("");
+function isInteractive(el) {
+  const htmlEl = el;
+  if (INTERACTIVE_TAGS.includes(el.tagName.toLowerCase())) {
+    return true;
   }
-  if (el instanceof Text) {
-    return el.textContent;
+  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;
   }
-  return "";
+  if (htmlEl.onclick != null) {
+    return true;
+  }
+  return false;
 }
-
-// src/page/render.ts
-function renderSnapshot(snapshot, options = {}) {
-  const opts = {
-    depth: 0,
-    includeRef: false,
-    includeClassList: false,
-    ...options
+function getViewportSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
   };
-  if (opts.maxHeight && snapshot.rect.y > opts.maxHeight) {
-    return "";
+}
+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 buffer = [
-    renderLine(snapshot, opts)
-  ];
-  for (const child of snapshot.children ?? []) {
-    const childSnapshot = renderSnapshot(child, {
-      ...opts,
-      depth: opts.depth + 1
-    });
-    if (childSnapshot) {
-      buffer.push(childSnapshot);
-    }
+  const rect = el.getBoundingClientRect();
+  if (rect.width < 500 || rect.height < 500) {
+    return;
   }
-  return buffer.join("\n");
+  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 renderLine(snapshot, options) {
-  const indent = "  ".repeat(options.depth);
-  const components = [indent];
-  if (snapshot.nodeType === "text") {
-    return [indent, snapshot.textContent].filter(Boolean).join(" ");
+function removeAlpha(color) {
+  const rgba = color.match(/^rgba\((.*)\)$/);
+  if (!rgba) {
+    return color;
   }
-  components.push(snapshot.tagName ?? "");
-  if (options.includeRef) {
-    components.push(`[ref=${snapshot.ref}]`);
+  const [r, g, b, a] = rgba[1].split(",").map(parseFloat);
+  if (a > 0 && a < 1) {
+    return `rgba(${r},${g},${b},1)`;
   }
-  if (options.includeClassList) {
-    for (const className of snapshot.classList ?? []) {
-      components.push(`.${className}`);
-    }
-  }
-  if (snapshot.src) {
-    components.push(`(${snapshot.src})`);
+  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 (snapshot.href) {
-    components.push(`(${snapshot.href})`);
+  if (/[^eyuioa]{4,}/.test(str)) {
+    return false;
   }
-  if (snapshot.textContent) {
-    components.push(" " + snapshot.textContent);
+  if (/[eyuioa]{4,}/.test(str)) {
+    return false;
   }
-  return components.filter(Boolean).join("");
+  return true;
 }
-
-// src/page/utils.ts
-function isHidden(element, options = {}) {
-  const {
-    checkOpacity = true,
-    checkVisibility = true,
-    checkTransform = true
-  } = options;
-  const style = getComputedStyle(element);
-  const opacity = Number(style.opacity);
-  const display = style.display;
-  const visibility = style.visibility;
-  const transform = style.transform;
-  if (display === "none" || checkOpacity && opacity === 0 || checkVisibility && visibility === "hidden" || checkTransform && transform.includes("scale(0)")) {
+function isRandomString(str) {
+  if (/^[0-9a-f]+$/i.test(str) && /[0-9]/.test(str)) {
     return true;
   }
-  if (!element.checkVisibility()) {
+  if (/[0-9][^0-9]+[0-9]/.test(str)) {
     return true;
   }
   return false;
 }
-function hasVisibleArea(element) {
-  const rect = element.getBoundingClientRect();
-  const area = rect.width * rect.height;
-  return area > 100;
-}
-function deepIsHidden(element, options = {}) {
-  if (isHidden(element, options)) {
-    return true;
+function fixZIndex(el) {
+  const style = getComputedStyle(el);
+  if (Number(style.zIndex) > 2147483600) {
+    el.style.setProperty("z-index", "2147483600", "important");
   }
-  if (!hasVisibleArea(element)) {
-    return [...element.children].every((el) => deepIsHidden(el, options));
-  }
-  return false;
-}
-function normalizeText(str) {
-  return str.replace(/\p{Cf}/gu, " ").replace(/\s+/g, " ").trim();
 }
-function containsSelector(el, selector) {
-  return el.matches(selector) || !!el.querySelector(selector);
-}
-function isRecursiveInline(el, ignoreTags = []) {
-  for (const child of el.childNodes) {
-    if (child instanceof Element) {
-      if (ignoreTags.includes(child.tagName.toLowerCase())) {
-        return false;
+
+// src/page/probe.ts
+function probeViewport(gridSize = 32) {
+  const { width, height } = getViewportSize();
+  const elements = [];
+  for (let y = gridSize / 2; y < height; y += gridSize) {
+    for (let x = gridSize / 2; x < width; x += gridSize) {
+      const element = document.elementFromPoint(x, y);
+      if (element && !elements.includes(element)) {
+        elements.push(element);
       }
-      const display = getComputedStyle(child).display;
-      const inline = display === "inline" || display === "inline-block";
-      if (!inline) {
-        return false;
+    }
+  }
+  return elements;
+}
+function checkOccluded(element, gridSize = 8) {
+  let total = 0;
+  let hits = 0;
+  const { top, left, width, height } = element.getBoundingClientRect();
+  for (let x = left + gridSize / 2; x < left + width; x += gridSize) {
+    for (let y = top + gridSize / 2; y < top + height; y += gridSize) {
+      total++;
+      const el = document.elementFromPoint(x, y);
+      if (!el) {
+        continue;
       }
-      if (!isRecursiveInline(child, ignoreTags)) {
-        return false;
+      if (element.contains(el) || el.contains(element)) {
+        hits++;
       }
     }
   }
-  return true;
+  return hits / total < 0.5;
+}
+
+// src/page/util.ts
+function findFrameTreeByRef(frameTrees, ref) {
+  for (const frameTree of frameTrees) {
+    if (ref >= frameTree.refRange[0] && ref <= frameTree.refRange[1]) {
+      return frameTree;
+    }
+  }
+  return null;
+}
+function findParentFrameTree(frameTrees, frameTree) {
+  const { iframeRef } = frameTree;
+  if (iframeRef == null) {
+    return null;
+  }
+  return findFrameTreeByRef(frameTrees, iframeRef);
+}
+function checkFrameOmitted(frameTrees, frameTree) {
+  const parentFrameTree = findParentFrameTree(frameTrees, frameTree);
+  return parentFrameTree?.isOmitted ?? false;
+}
+function isContainerNode(vxNode) {
+  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/snapshot.ts
-var DEFAULT_SKIP_TAGS = ["svg", "script", "noscript", "style", "link", "meta"];
-var DEFAULT_SEMANTIC_TAGS = [
+// 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_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",
-  "section",
-  "article",
-  "main",
-  "header",
-  "footer",
-  "nav",
-  "aside",
   "h1",
   "h2",
   "h3",
@@ -250,6 +280,20 @@ var DEFAULT_SEMANTIC_TAGS = [
   "dl",
   "dt",
   "dd",
+  "section",
+  "article",
+  "main",
+  "header",
+  "footer",
+  "nav",
+  "aside",
+  "form",
+  "input",
+  "textarea",
+  "select",
+  "option",
+  "fieldset",
+  "legend",
   "p",
   "pre",
   "code",
@@ -262,204 +306,528 @@ var DEFAULT_SEMANTIC_TAGS = [
   "tr",
   "td",
   "th",
-  "form",
-  "input",
-  "textarea",
-  "select",
-  "option",
-  "fieldset",
-  "legend",
   "strong",
   "em",
   "sub",
   "sup"
 ];
-function createSnapshot(root, options = {}) {
-  document.querySelectorAll("script, noscript, style").forEach((el) => {
-    el.style.display = "none";
-  });
-  const opts = {
-    startId: 0,
-    skipHidden: true,
-    skipEmptyText: true,
-    skipImages: false,
-    skipIframes: false,
-    skipTags: DEFAULT_SKIP_TAGS,
-    tagPreference: DEFAULT_SEMANTIC_TAGS,
-    collapseInline: true,
-    ...options
-  };
-  const counter = new Counter(opts.startId);
-  const refMap = /* @__PURE__ */ new Map();
-  const tree = new SnapshotTree(root, null, counter, opts);
-  tree.fillMap(refMap);
-  return {
-    refMap,
-    snapshot: tree.toJson(),
-    maxId: counter.value
-  };
-}
-var SnapshotTree = class _SnapshotTree {
-  constructor(node, parent, counter, options) {
-    this.node = node;
-    this.parent = parent;
-    this.counter = counter;
+var VX_KEEP_SELECTOR = "a, button, input, textarea, select, label, iframe";
+var VxTreeParser = class {
+  constructor(options = {}) {
     this.options = options;
-    this.children = [];
-    this.ref = this.counter.next();
-    this.classList = [...this.element?.classList ?? []];
-    if (this.element) {
-      this.parseTree(this.element, this.getAcceptedChildren(this.element));
+    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(8);
     }
+    const vxRoot = this.parseDocument();
+    this.refRange = [startRef, this.counter.current()];
+    this.vxNodes = this.pruneRecursive(vxRoot);
   }
-  get element() {
-    return this.node instanceof Element ? this.node : null;
-  }
-  get depth() {
-    return this.parent ? this.parent.depth + 1 : 0;
+  parseDocument() {
+    return this.parseNode(document.documentElement, null);
   }
-  get leaf() {
-    return this.children.length === 0;
+  getNodes() {
+    return this.vxNodes;
   }
-  get tagName() {
-    return this.node instanceof Element ? this.node.tagName.toLowerCase() : void 0;
+  getRefRange() {
+    return this.refRange;
   }
-  get href() {
-    return this.node instanceof HTMLAnchorElement ? this.node.href : void 0;
+  getDomMap() {
+    return this.domRefMap;
   }
-  get src() {
-    return this.node.src ?? void 0;
+  parseNode(node, parent) {
+    if (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);
+      }
+      fixZIndex(node);
+      return this.parseElement(node);
+    }
+    return null;
   }
-  get clientRect() {
-    if (this.node instanceof Element) {
-      return this.node.getBoundingClientRect();
+  parseElement(el) {
+    if (VX_IGNORE_TAGS.includes(el.tagName.toLowerCase())) {
+      return null;
     }
-    const range = document.createRange();
-    range.selectNodeContents(this.node);
-    return range.getBoundingClientRect();
+    if (isHidden(el)) {
+      return null;
+    }
+    const rect = el.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(el),
+      isInteractive: isInteractive(el),
+      isOutsideViewport: !isRectInViewport(rect, this.viewport),
+      isProbeHit: this.isProbeHit(el),
+      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 vxNode = {
+      ...spec,
+      ref
+    };
+    this.domRefMap.set(ref, node);
+    node[VX_NODE_SYMBOL] = vxNode;
+    return vxNode;
   }
-  parseTree(el, childNodes) {
-    this.children = [];
-    if (childNodes.length === 1) {
-      return this.collapseWrapper(el, childNodes[0]);
+  pruneRecursive(vxNode) {
+    if (!vxNode) {
+      return [];
     }
-    if (this.options.collapseInline && isRecursiveInline(el, this.options.tagPreference)) {
-      return;
+    const children = vxNode.children ?? [];
+    const newChildren = children.flatMap((child) => this.pruneRecursive(child));
+    if (this.shouldOmit(vxNode)) {
+      return newChildren;
     }
-    for (const childNode of childNodes) {
-      const snapshot = new _SnapshotTree(childNode, this, this.counter, this.options);
-      this.children.push(snapshot);
+    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
+    });
   }
-  /**
-   * Collapses an element with only one visible child into one.
-   *
-   * Wrapper element is preferred if it's a link or a button,
-   * in other cases child element is preferred.
-   */
-  collapseWrapper(el, child) {
-    if (child instanceof Text) {
-      this.textContent = normalizeText(child.textContent ?? "");
-      return;
+  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;
     }
-    this.classList.push(...child.classList);
-    const parentRank = this.options.tagPreference.indexOf(el.tagName.toLowerCase());
-    const childRank = this.options.tagPreference.indexOf(child.tagName.toLowerCase());
-    const preferParent = parentRank !== -1 && (parentRank < childRank || childRank === -1);
-    if (!preferParent) {
-      this.node = child;
+    if (this.options.probeViewport && !vxNode.isProbeHit) {
+      return true;
     }
-    if (this.element) {
-      this.parseTree(this.element, this.getAcceptedChildren(child));
+    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;
   }
-  getAcceptedChildren(el) {
-    const childNodes = [...el.childNodes];
-    return childNodes.filter((node) => {
-      if (!(node instanceof Element || node instanceof Text)) {
-        return false;
+  isProbeHit(el) {
+    for (const probeEl of this.probeElements) {
+      if (el.contains(probeEl) || probeEl.contains(el)) {
+        return true;
       }
-      if (node instanceof Element) {
-        if (this.options.skipHidden && deepIsHidden(node)) {
-          return false;
-        }
-        if (containsSelector(node, "input")) {
-          return true;
-        }
-        if (!this.options.skipIframes && containsSelector(node, "iframe")) {
-          return true;
-        }
-        if (!this.options.skipImages && containsSelector(node, "img")) {
-          return true;
-        }
-        if (this.options.skipTags.includes(node.tagName.toLowerCase())) {
-          return false;
-        }
+    }
+    return false;
+  }
+  collectLabelAttrs(el) {
+    const attrs = {};
+    for (const attr of VX_LABEL_ATTRS) {
+      const value = truncateAttrValue(el.getAttribute(attr) ?? "");
+      if (value) {
+        attrs[attr] = value;
       }
-      if (this.options.skipEmptyText) {
-        const isEmptyText = normalizeText(node.textContent ?? "").length === 0;
-        if (isEmptyText) {
-          return false;
-        }
+    }
+    return attrs;
+  }
+  collectValueAttrs(el) {
+    const attrs = {};
+    for (const attr of VX_VALUE_ATTRS) {
+      const value = el[attr] ?? "";
+      if (value) {
+        attrs[attr] = String(value);
       }
-      return true;
-    });
+    }
+    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;
+  }
+};
+
+// 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 highlightEl(el, ref = 0) {
+  if (!(el instanceof Element)) {
+    return;
+  }
+  const container = getOverlayContainer();
+  const color = getColor(ref);
+  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;
+  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 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;
+}
+function getColor(index) {
+  const hue = index * 120 * 0.382 % 360;
+  return `hsl(${hue}, 85%, 50%)`;
+}
+
+// src/page/traverse.ts
+function* traverseVxNode(vxNode, depth = 0) {
+  yield { vxNode, depth };
+  for (const child of vxNode.children ?? []) {
+    yield* traverseVxNode(child, depth + 1);
   }
-  fillMap(map) {
-    map.set(this.ref, this.node);
-    for (const child of this.children) {
-      child.fillMap(map);
+}
+
+// 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;
+      }
     }
+    const indent = "    ".repeat(depth);
+    buffer.push(renderIndentedLine(indent, vxNode, options));
   }
-  toJson() {
-    const { top, left, width, height } = this.clientRect;
-    return {
-      ref: this.ref,
-      nodeType: this.node instanceof Element ? "element" : "text",
-      leaf: this.leaf,
-      tagName: this.tagName,
-      rect: {
-        x: left,
-        y: top,
-        width,
-        height
-      },
-      classList: this.node instanceof Element ? this.classList : void 0,
-      textContent: this.textContent,
-      href: this.href,
-      src: this.src,
-      children: this.leaf ? void 0 : this.children.map((child) => child.toJson())
-    };
+  return buffer.join("\n");
+}
+function renderIndentedLine(indent, vxNode, options = {}) {
+  if (!vxNode.tagName) {
+    return [indent, vxNode.textContent].filter(Boolean).join("");
+  }
+  const tagLine = renderTagLine(vxNode, options);
+  const htmlStyle = options.renderStyle === "html";
+  return [
+    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/view.ts
+var VxPageView = class {
+  constructor(frameTrees) {
+    this.frameTrees = frameTrees;
+    this.vxTreeViewMap = /* @__PURE__ */ new Map();
+    for (const frameTree of frameTrees) {
+      const vxTreeView = new VxTreeView(this, frameTree);
+      this.vxTreeViewMap.set(frameTree.frameId, vxTreeView);
+    }
+  }
+  get vxTrees() {
+    return Array.from(this.vxTreeViewMap.values());
+  }
+  findTreeByFrameId(frameId) {
+    return this.vxTreeViewMap.get(frameId) ?? null;
+  }
+  getTreeByFrameId(frameId) {
+    const vxTreeView = this.vxTreeViewMap.get(frameId);
+    if (vxTreeView == null) {
+      throw new Error(`Frame tree not found for [frameId=${frameId}]`);
+    }
+    return vxTreeView;
+  }
+  findTreeByRef(ref) {
+    const frameTree = this.frameTrees.find(
+      (tree) => ref >= tree.refRange[0] && ref <= tree.refRange[1]
+    );
+    if (!frameTree) {
+      return null;
+    }
+    return this.vxTreeViewMap.get(frameTree.frameId) ?? null;
+  }
+  getTreeByRef(ref) {
+    const vxTreeView = this.findTreeByRef(ref);
+    if (vxTreeView == null) {
+      throw new Error(`Frame tree not found for [ref=${ref}]`);
+    }
+    return vxTreeView;
+  }
+  renderAll(options) {
+    return this.frameTrees.map((frameTree) => {
+      return frameTree.nodes.map((node) => {
+        return renderVxNode(node, options);
+      }).join("\n");
+    }).join("\n\n");
   }
 };
-var Counter = class {
-  constructor(value = 0) {
-    this.value = value;
+var VxTreeView = class {
+  constructor(vxPage, vxTree) {
+    this.vxPage = vxPage;
+    this.vxTree = vxTree;
+    this.refMap = /* @__PURE__ */ new Map();
+    this.buildRefMap(vxTree.nodes);
   }
-  next() {
-    this.value += 1;
-    return this.value;
+  get frameId() {
+    return this.vxTree.frameId;
+  }
+  get refRange() {
+    return this.vxTree.refRange;
+  }
+  findNode(ref) {
+    return this.refMap.get(ref) ?? null;
+  }
+  *traverse() {
+    for (const vxNode of this.vxTree.nodes) {
+      yield* traverseVxNode(vxNode, 0);
+    }
+  }
+  findParentTree() {
+    const { iframeRef } = this.vxTree;
+    if (iframeRef == null) {
+      return null;
+    }
+    return this.vxPage.findTreeByRef(iframeRef);
+  }
+  isFrameShown() {
+    const parentTree = this.findParentTree();
+    const { iframeRef } = this.vxTree;
+    if (parentTree == null || iframeRef == null) {
+      return true;
+    }
+    const existsInParent = !!parentTree.findNode(iframeRef);
+    return existsInParent ? parentTree.isFrameShown() : false;
+  }
+  collectRefs(leafOnly = true) {
+    const refs = [];
+    for (const { vxNode } of this.traverse()) {
+      if (leafOnly && isContainerNode(vxNode)) {
+        continue;
+      }
+      refs.push(vxNode.ref);
+    }
+    return refs;
+  }
+  buildRefMap(nodes) {
+    for (const node of nodes) {
+      this.refMap.set(node.ref, node);
+      this.buildRefMap(node.children ?? []);
+    }
   }
 };
 export {
   Counter,
-  DEFAULT_SEMANTIC_TAGS,
-  DEFAULT_SKIP_TAGS,
-  SnapshotTree,
-  captureAncestorsHtml,
-  captureHtml,
-  captureHtmlLine,
+  INTERACTIVE_ROLES,
+  INTERACTIVE_TAGS,
+  VX_IGNORE_SYMBOL,
+  VX_IGNORE_TAGS,
+  VX_LABEL_ATTRS,
+  VX_NODE_SYMBOL,
+  VX_SRC_ATTRS,
+  VX_TAG_PREFERENCE,
+  VX_VALUE_ATTRS,
+  VxPageView,
+  VxTreeParser,
+  VxTreeView,
+  checkFrameOmitted,
+  checkOccluded,
+  clearOverlay,
   containsSelector,
-  createSnapshot,
-  deepIsHidden,
-  getHighlightContainer,
+  escapeAttribute,
+  findFrameTreeByRef,
+  findParentFrameTree,
+  fixZIndex,
+  getNormalizedText,
+  getOffsetTop,
+  getViewportSize,
   hasVisibleArea,
   highlightEl,
-  highlightSnapshot,
+  isContainerNode,
+  isDeepHidden,
   isHidden,
-  isRecursiveInline,
+  isInteractive,
+  isObjectEmpty,
+  isRandomIdentifier,
+  isRectInViewport,
+  makeOverlaysOpaque,
   normalizeText,
-  removeHighlight,
-  renderLine,
-  renderSnapshot
+  probeViewport,
+  renderVxNode,
+  showPoint,
+  traverseVxNode,
+  truncateAttrValue
 };