@shiplightai/sdk 0.1.1

package/dist/chunk-GPZJYXUG.js

@@ -0,0 +1,3880 @@
+import{a as h}from"./chunk-YR4E7JSB.js";import{g as R}from"./chunk-UFLZ3URR.js";import{z as I}from"zod";var q=class{constructor(){this.tools=new Map}register(e){if(this.tools.has(e.name))throw new Error(`Tool '${e.name}' is already registered`);let i={name:e.name,description:e.description,schema:e.schema,execute:e.execute,usesElementIndex:e.usesElementIndex??!1,availability:{openai:e.availability?.openai??!0,mcp:e.availability?.mcp??!0}};this.tools.set(e.name,i)}get(e){return this.tools.get(e)}has(e){return this.tools.has(e)}getToolNames(){return Array.from(this.tools.keys())}getTools(){return Array.from(this.tools.values())}async execute(e,i,o){let l=this.tools.get(e);if(!l)throw new Error(`Tool not found: ${e}`);try{let t=i?.description,r={...i};delete r.description;let n=l.schema.parse(r),d={...o,actionDescription:t};return await l.execute(n,d)}catch(t){if(t instanceof I.ZodError){let r=t.issues.map(n=>`${n.path.join(".")}: ${n.message}`).join(", ");return{success:!1,error:`Invalid arguments for tool '${e}': ${r}`,actionEntity:{action_description:i?.description||`${e} (validation failed)`,action_data:{action_name:e,kwargs:i},feedback:`Validation error: ${r}`}}}throw t}}clear(){this.tools.clear()}size(){return this.tools.size}buildActionUnionSchema(){let e=this.getTools().filter(i=>i.availability.openai);return this.buildUnionSchemaFromTools(e)}buildActionUnionSchemaForTools(e){let i=new Set(e),o=this.getTools().filter(l=>i.has(l.name));return this.buildUnionSchemaFromTools(o)}buildUnionSchemaFromTools(e){if(e.length===0)return I.object({done:I.any()});let i=e.map(r=>{let n=r.schema;if(n instanceof I.ZodObject){let d=n._def.shape();Object.keys(d).length===0&&(n=I.object({_empty:I.boolean().optional()}))}return I.object({[r.name]:n})});if(i.length===1)return i[0];let[o,l,...t]=i;return I.union([o,l,...t])}},ie=new q;import{createAnthropic as K}from"@ai-sdk/anthropic";function H(e){let o=R().env?.ANTHROPIC_API_KEY;if(!o)throw new Error("ANTHROPIC_API_KEY not configured in SDK config");return h.debug(`Using Anthropic provider: model=${e}`),K({apiKey:o})(e)}function M(e){return{anthropic:{structuredOutputMode:"jsonTool"}}}import{createGoogleGenerativeAI as J}from"@ai-sdk/google";import{createVertex as Q}from"@ai-sdk/google-vertex";var O={MEDIA_RESOLUTION_HIGH:"MEDIA_RESOLUTION_HIGH",MEDIA_RESOLUTION_MEDIUM:"MEDIA_RESOLUTION_MEDIUM",MEDIA_RESOLUTION_LOW:"MEDIA_RESOLUTION_LOW"};function _(){let o=(R().env||{}).GOOGLE_GENAI_USE_VERTEXAI;return o==="True"||o==="true"}function P(e){let o=R().env||{};if(_()){let r=o.GOOGLE_CLOUD_PROJECT;if(!r)throw new Error("GOOGLE_CLOUD_PROJECT is required when using Vertex AI");let n=e==="gemini-3-flash-preview"?"global":o.GOOGLE_CLOUD_LOCATION;if(!n)throw new Error("GOOGLE_CLOUD_LOCATION is required when using Vertex AI");return h.debug(`Using Vertex AI provider: model=${e}, location=${n}`),Q({project:r,location:n})(e)}let l=o.GOOGLE_API_KEY||o.GOOGLE_GENERATIVE_AI_API_KEY;if(!l)throw new Error("Google API key is missing. Set GOOGLE_API_KEY or GOOGLE_GENERATIVE_AI_API_KEY in SDK config or environment.");return h.debug(`Using Google AI provider (API key): model=${e}`),J({apiKey:l})(e)}function W(e,i){let o={thinkingConfig:{thinkingBudget:512,includeThoughts:!0}},l={thinkingConfig:{thinkingLevel:"minimal",includeThoughts:!0},mediaResolution:O.MEDIA_RESOLUTION_HIGH},t;switch(i){case"gemini-3-flash-preview":t={...l};break;default:t={...o},e===1&&(t.mediaResolution=O.MEDIA_RESOLUTION_HIGH)}return _()?{vertex:t}:{google:t}}function be(e){if(e.startsWith("claude-"))return H(e);if(e.startsWith("gemini-"))return P(e);throw new Error(`Unsupported model: ${e}. Use 'claude-*' or 'gemini-*' models.`)}function ye(e,i){return e.startsWith("claude-")?M(e):W(i,e)}import S from"sharp";var F=768;async function D(e,i){let l=await S(e).metadata(),t=l.width||0,r=l.height||0;if(t===0||r===0)throw new Error("Invalid image dimensions");let n=r,d=0,c=Math.floor((t-n)/2),u=Math.max(0,t-n),a=(p,b)=>{let g=S(e).extract({left:p,top:0,width:b,height:n});return i?.resize&&(g=g.resize(F,F)),g.png().toBuffer()},[m,w,E]=await Promise.all([a(d,Math.min(n,t)),a(c,Math.min(n,t-c)),a(u,Math.min(n,t-u))]);return[m,w,E]}async function V(e){let i=S(e),o=await i.metadata(),l=o.width||0,t=o.height||0;if(l===0||t===0)throw new Error("Invalid image dimensions");let{data:r}=await i.grayscale().raw().toBuffer({resolveWithObject:!0}),n=[];for(let d=0;d<t;d++){n[d]=[];for(let c=0;c<l;c++)n[d][c]=r[d*l+c]}return{pixels:n,width:l,height:t}}var X=new Set(["button","link","textbox","checkbox","radio","combobox","listbox","menuitem","menuitemcheckbox","menuitemradio","option","tab","switch","slider","spinbutton","searchbox","scrollbar","treeitem","gridcell"]),$=new Set(["click","mousedown","mouseup","dblclick","pointerdown","pointerup","touchstart","touchend"]),B=["[onclick]","[onmousedown]","[ontouchstart]","div","span","li","tr","td","[role]",'[class*="btn"]','[class*="button"]','[class*="click"]',"[data-action]","[data-click]"],G=500;function Y(e,i){return e.length>i?e.slice(0,i)+"...":e}var z=["title","type","checked","name","role","value","placeholder","data-date-format","alt","aria-label","aria-expanded","data-state","aria-checked","data-id","data-testid","data-test-id","data-handlepos","data-item-id"],U={"react-flow__(\\S+)":"$1"};var j=class{constructor(e,i=null){this.isVisible=e,this.parent=i}},N=class extends j{constructor(e,i,o=null){super(i,o),this.text=e,this.type="TEXT_NODE"}hasParentWithHighlightIndex(){let e=this.parent;for(;e!==null;){if(e.highlightIndex!==null)return!0;e=e.parent}return!1}isParentInViewport(){return this.parent===null?!1:this.parent.isInViewport}isParentTopElement(){return this.parent===null?!1:this.parent.isTopElement}},C=class L extends j{constructor(i,o,l,t,r,n=!1,d=!1,c=!1,u=!1,a=!1,m=!1,w=null,E=null,p=null,b=null,g=null){super(r,g),this.tagName=i,this.xpath=o,this.attributes=l,this.children=t,this.isInteractive=n,this.isScrollable=d,this.markAsClickable=c,this.isTopElement=u,this.isInViewport=a,this.shadowRoot=m,this.highlightIndex=w,this.viewportCoordinates=E,this.pageCoordinates=p,this.viewportInfo=b,this.isNew=null}getAllTextTillNextClickableElement(i=-1){let o=[],l=(t,r)=>{if(!(i!==-1&&r>i)&&!(t instanceof L&&t!==this&&t.highlightIndex!==null)){if(t instanceof N)o.push(t.text);else if(t instanceof L)for(let n of t.children)l(n,r+1)}};return l(this,0),o.join(`
+`).trim()}clickableElementsToString(i){let o=i?.includeAttributes??z,l=i?.includeClassesWithRename??U,t=[],r=(n,d)=>{let c=d,u="	".repeat(d);if(n instanceof L){if(n.highlightIndex!==null){c+=1;let a=n.isScrollable?"":n.getAllTextTillNextClickableElement(),m=null;if(o.length>0){let s={};for(let y of Object.keys(n.attributes))if(o.includes(y)){let v=n.attributes[y].trim();v!==""&&(s[y]=v)}let f=o.filter(y=>y in s);if(f.length>1){let y=new Set,v={};for(let x of f){let k=s[x];k.length>5&&(k in v?y.add(x):v[k]=x)}for(let x of y)delete s[x]}n.tagName===s.role&&delete s.role;let T=["aria-label","placeholder","title"];for(let y of T)s[y]&&s[y].trim().toLowerCase()===a.trim().toLowerCase()&&delete s[y];Object.keys(s).length>0&&(m=Object.entries(s).map(([y,v])=>`${y}=${Y(v,200)}`).join(" "))}let w=n.isNew?`*[${n.highlightIndex}]`:`[${n.highlightIndex}]`,E=[];if(Object.keys(l).length>0&&n.attributes.class){let f=n.attributes.class.split(/\s+/);for(let T of f)for(let[y,v]of Object.entries(l))try{let x=new RegExp(`^${y}$`);if(T.match(x)){let A=T.replace(x,v);A&&E.push(A);break}}catch{continue}}let p=n.isScrollable?" (SCROLLABLE)":"",b=n.markAsClickable?" (CLICKABLE)":"",g=`${u}${w}${p}${b}<${n.tagName}`;if(E.length>0&&(g+=` ${E.join(" ")}`),m&&(g+=` ${m}`),a){let s=a.trim();m||(g+=" "),g+=`>${s}`}else m||(g+=" ");g+=" />",t.push(g)}for(let a of n.children)r(a,c)}else if(n instanceof N){if(n.hasParentWithHighlightIndex())return;n.parent&&n.parent.isVisible&&n.parent.isTopElement&&t.push(`${u}${n.text}`)}};return r(this,0),t.join(`
+`)}};var Z=`(
+  args = {
+    doHighlightElements: true,
+    focusHighlightIndex: -1,
+    viewportExpansion: 0,
+    debugMode: false,
+    interactiveClassNames: [],
+    alwaysHighlightFileInput: false,
+  }
+) => {
+  const EVENT_LISTENER_MAPPING = {
+    'onclick': 'click',
+    'onmousedown': 'mousedown',
+    'onmouseup': 'mouseup',
+    'ondblclick': 'dblclick',
+    'onmouseenter': 'mouseenter',
+    'onmouseleave': 'mouseleave',
+    'onmousemove': 'mousemove',
+    'onmouseout': 'mouseout',
+    'onmouseover': 'mouseover',
+    'onmouseup': 'mouseup',
+    'onmousewheel': 'mousewheel',
+    'onscroll': 'scroll',
+    'onselect': 'select',
+    'onchange': 'change',
+    'onfocus': 'focus',
+    'onblur': 'blur',
+    'onkeydown': 'keydown',
+    'onkeyup': 'keyup',
+    'onkeypress': 'keypress',
+    'oninput': 'input',
+  }
+
+  const INTERACTION_EVENTS = ['click', 'mousedown', 'mouseup', 'dblclick', 'input', 'mouseenter', 'mouseleave'];
+
+  const {
+    doHighlightElements,
+    focusHighlightIndex,
+    viewportExpansion,
+    debugMode,
+    interactiveClassNames,
+    alwaysHighlightFileInput,
+  } = args;
+
+  const buttonClassNames = ['button', 'dropdown-toggle'];
+  const heuristicClassPattern = /\\b(btn|const clickable|menu|item|entry|link)\\b/i;
+  const containerSelectors = 'button,a,[role="button"],.menu,.dropdown,.list,.toolbar';
+
+  let highlightIndex = 0; // Reset highlight index
+
+  /**
+   * Helper function to check if element has any of the specified class names.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @param {string[]} classNames - Array of class names to check for.
+   * @returns {boolean} Whether the element has any of the specified class names.
+   */
+  function hasAnyClassName(element, classNames) {
+    if (!element.classList || !classNames || classNames.length === 0) return false;
+    return classNames.some(className => element.classList.contains(className));
+  }
+
+  // Add caching mechanisms at the top level
+  const DOM_CACHE = {
+    boundingRects: new WeakMap(),
+    clientRects: new WeakMap(),
+    computedStyles: new WeakMap(),
+    nodeEventListeners: new WeakMap(),
+    clearCache: () => {
+      DOM_CACHE.boundingRects = new WeakMap();
+      DOM_CACHE.clientRects = new WeakMap();
+      DOM_CACHE.computedStyles = new WeakMap();
+      DOM_CACHE.nodeEventListeners = new WeakMap();
+    }
+  };
+
+  /**
+   * Gets the cached bounding rect for an element.
+   *
+   * @param {HTMLElement} element - The element to get the bounding rect for.
+   * @returns {DOMRect | null} The cached bounding rect, or null if the element is not found.
+   */
+  function getCachedBoundingRect(element) {
+    if (!element) return null;
+
+    if (DOM_CACHE.boundingRects.has(element)) {
+      return DOM_CACHE.boundingRects.get(element);
+    }
+
+    const rect = element.getBoundingClientRect();
+
+    if (rect) {
+      DOM_CACHE.boundingRects.set(element, rect);
+    }
+    return rect;
+  }
+
+  /**
+   * Gets the cached computed style for an element.
+   *
+   * @param {HTMLElement} element - The element to get the computed style for.
+   * @returns {CSSStyleDeclaration | null} The cached computed style, or null if the element is not found.
+   */
+  function getCachedComputedStyle(element) {
+    if (!element) return null;
+
+    if (DOM_CACHE.computedStyles.has(element)) {
+      return DOM_CACHE.computedStyles.get(element);
+    }
+
+    const style = window.getComputedStyle(element);
+
+    if (style) {
+      DOM_CACHE.computedStyles.set(element, style);
+    }
+    return style;
+  }
+
+  /**
+   * Gets the cached client rects for an element.
+   *
+   * @param {HTMLElement} element - The element to get the client rects for.
+   * @returns {DOMRectList | null} The cached client rects, or null if the element is not found.
+   */
+  function getCachedClientRects(element) {
+    if (!element) return null;
+
+    if (DOM_CACHE.clientRects.has(element)) {
+      return DOM_CACHE.clientRects.get(element);
+    }
+
+    const rects = element.getClientRects();
+
+    if (rects) {
+      DOM_CACHE.clientRects.set(element, rects);
+    }
+    return rects;
+  }
+
+  /**
+   * Gets the event listeners for a node.
+   *
+   * @param {HTMLElement} element - The element to get the event listeners for.
+   * @returns {string[]} The event listeners for the element.
+   */
+  function getNodeEventListeners(element) {
+    const set = new Set();
+    try  {
+      if (typeof getEventListeners === 'function') {
+        const listeners = getEventListeners(element);
+        for (const eventType in listeners) {
+          if (listeners[eventType] && listeners[eventType].length > 0) {
+            set.add(eventType);
+          }
+        }
+      }
+
+      const getEventListenersForNode = element?.ownerDocument?.defaultView?.getEventListenersForNode || window.getEventListenersForNode;
+      if (typeof getEventListenersForNode === 'function') {
+        const listeners = getEventListenersForNode(element);
+        for (const listener of listeners) {
+          if (listener.type) {
+            set.add(listener.type);
+          }
+        }
+      }
+
+      for (const attr in EVENT_LISTENER_MAPPING) {
+        if (element.hasAttribute(attr) || typeof element[attr] === 'function') {
+          set.add(EVENT_LISTENER_MAPPING[attr]);
+        }
+      }
+    } catch (error) {
+    }
+
+    const listenedEvents = Array.from(set);
+    return listenedEvents;
+  }
+
+  function getCachedNodeEventListeners(element) {
+    if (!element) return null;
+    if (DOM_CACHE.nodeEventListeners.has(element)) {
+      return DOM_CACHE.nodeEventListeners.get(element);
+    }
+    const listenedEvents = getNodeEventListeners(element);
+    if (listenedEvents) {
+      DOM_CACHE.nodeEventListeners.set(element, listenedEvents);
+    }
+    return listenedEvents;
+  }
+
+  /**
+   * Hash map of DOM nodes indexed by their highlight index.
+   *
+   * @type {Object<string, any>}
+   */
+  const DOM_HASH_MAP = {};
+
+  const ID = { current: 0 };
+
+  const HIGHLIGHT_CONTAINER_ID = "playwright-highlight-container";
+
+  // Add a WeakMap cache for XPath strings
+  const xpathCache = new WeakMap();
+
+  const existingLabelBoundingBoxes = [];
+
+  /**
+   * Highlights an element in the DOM and returns the index of the next element.
+   *
+   * @param {HTMLElement} element - The element to highlight.
+   * @param {number} index - The index of the element.
+   * @param {HTMLElement | null} parentIframe - The parent iframe node.
+   * @returns {number} The index of the next element.
+   */
+  function highlightElement(element, index, parentIframe = null) {
+    if (!element) return index;
+
+    const overlays = [];
+    /**
+     * @type {HTMLElement | null}
+     */
+    let label = null;
+    let labelWidth = 20;
+    let labelHeight = 16;
+    let cleanupFn = null;
+
+    try {
+      // Create or get highlight container
+      let container = document.getElementById(HIGHLIGHT_CONTAINER_ID);
+      if (!container) {
+        container = document.createElement("div");
+        container.id = HIGHLIGHT_CONTAINER_ID;
+        container.style.position = "fixed";
+        container.style.pointerEvents = "none";
+        container.style.top = "0";
+        container.style.left = "0";
+        container.style.width = "100%";
+        container.style.height = "100%";
+        // Use the maximum valid value in zIndex to ensure the element is not blocked by overlapping elements.
+        container.style.zIndex = "2147483647";
+        container.style.backgroundColor = 'transparent';
+        document.body.appendChild(container);
+      }
+
+      // Get element client rects
+      let rects = element.getClientRects(); // Use getClientRects()
+
+      if (!rects || rects.length === 0) return index; // Exit if no rects
+
+      // If element is inside an iframe, we need to transform the rects to main document coordinates
+      if (parentIframe) {
+        const transformedRects = [];
+        const iframeRect = parentIframe.getBoundingClientRect();
+
+        // Get iframe's content area offset and CSS transforms
+        const iframeStyle = window.getComputedStyle(parentIframe);
+        const borderLeft = parseFloat(iframeStyle.borderLeftWidth) || 0;
+        const borderTop = parseFloat(iframeStyle.borderTopWidth) || 0;
+        const paddingLeft = parseFloat(iframeStyle.paddingLeft) || 0;
+        const paddingTop = parseFloat(iframeStyle.paddingTop) || 0;
+
+        const contentOffsetX = borderLeft + paddingLeft;
+        const contentOffsetY = borderTop + paddingTop;
+
+        // Extract scale factor from CSS transform
+        let scaleX = 1, scaleY = 1;
+        const transform = iframeStyle.transform;
+        if (transform && transform !== 'none') {
+          // Parse scale from transform matrix or scale() function
+          const scaleMatch = transform.match(/scale\\(([^)]+)\\)/);
+          if (scaleMatch) {
+            const scaleValues = scaleMatch[1].split(',').map(v => parseFloat(v.trim()));
+            scaleX = scaleValues[0] || 1;
+            scaleY = scaleValues[1] || scaleX; // If only one value, use it for both X and Y
+          } else {
+            // Try to parse matrix() transform
+            const matrixMatch = transform.match(/matrix\\(([^)]+)\\)/);
+            if (matrixMatch) {
+              const values = matrixMatch[1].split(',').map(v => parseFloat(v.trim()));
+              if (values.length >= 6) {
+                scaleX = values[0]; // a value in matrix(a, b, c, d, e, f)
+                scaleY = values[3]; // d value in matrix(a, b, c, d, e, f)
+              }
+            }
+          }
+        }
+
+        // Get iframe scroll position
+        let scrollLeft = 0, scrollTop = 0;
+        try {
+          const iframeDoc = parentIframe.contentDocument || parentIframe.contentWindow?.document;
+          if (iframeDoc) {
+            scrollLeft = iframeDoc.documentElement?.scrollLeft || iframeDoc.body?.scrollLeft || 0;
+            scrollTop = iframeDoc.documentElement?.scrollTop || iframeDoc.body?.scrollTop || 0;
+          }
+        } catch (e) {
+          console.warn("Cannot access iframe scroll position (cross-origin):", e);
+        }
+
+        // Transform each rect accounting for iframe scaling
+        for (const rect of rects) {
+          // Apply scale factor to coordinates and dimensions
+          const scaledWidth = rect.width * scaleX;
+          const scaledHeight = rect.height * scaleY;
+          const scaledTop = rect.top * scaleY;
+          const scaledLeft = rect.left * scaleX;
+          const scaledScrollTop = scrollTop * scaleY;
+          const scaledScrollLeft = scrollLeft * scaleX;
+
+          const transformedRect = {
+            top: scaledTop + iframeRect.top + contentOffsetY - scaledScrollTop,
+            left: scaledLeft + iframeRect.left + contentOffsetX - scaledScrollLeft,
+            bottom: scaledTop + scaledHeight + iframeRect.top + contentOffsetY - scaledScrollTop,
+            right: scaledLeft + scaledWidth + iframeRect.left + contentOffsetX - scaledScrollLeft,
+            width: scaledWidth,
+            height: scaledHeight,
+            x: scaledLeft + iframeRect.left + contentOffsetX - scaledScrollLeft,
+            y: scaledTop + iframeRect.top + contentOffsetY - scaledScrollTop
+          };
+          transformedRects.push(transformedRect);
+        }
+
+        rects = transformedRects;
+      }
+
+      // Generate a color based on the index
+      const colors = [
+        "#FF0000",
+        "#00FF00",
+        "#0000FF",
+        "#FFA500",
+        "#800080",
+        "#008080",
+        "#FF69B4",
+        "#4B0082",
+        "#FF4500",
+        "#2E8B57",
+        "#DC143C",
+        "#4682B4",
+      ];
+      const colorIndex = index % colors.length;
+      const baseColor = colors[colorIndex];
+      const backgroundColor = baseColor + "1A"; // 10% opacity version of the color
+
+      // No need for iframe offset calculation since rects are already transformed to main document coordinates
+      const iframeOffset = { x: 0, y: 0 };
+
+      // Create fragment to hold overlay elements
+      const fragment = document.createDocumentFragment();
+
+      // Create highlight overlays for each client rect
+      for (const rect of rects) {
+        if (rect.width === 0 || rect.height === 0) continue; // Skip empty rects
+
+        const overlay = document.createElement("div");
+        overlay.style.position = "fixed";
+        overlay.style.border = \`1px solid \${baseColor}\`;
+        overlay.style.backgroundColor = "none";
+        overlay.style.pointerEvents = "none";
+        overlay.style.boxSizing = "border-box";
+
+        const top = rect.top + iframeOffset.y;
+        const left = rect.left + iframeOffset.x;
+
+        overlay.style.top = \`\${top}px\`;
+        overlay.style.left = \`\${left}px\`;
+        overlay.style.width = \`\${rect.width}px\`;
+        overlay.style.height = \`\${rect.height}px\`;
+
+        fragment.appendChild(overlay);
+        overlays.push({ element: overlay, initialRect: rect }); // Store overlay and its rect
+      }
+
+      // Create and position a single label relative to the first rect
+      const firstRect = rects[0];
+      label = document.createElement("div");
+      label.className = "playwright-highlight-label";
+      label.style.position = "fixed";
+      label.style.background = baseColor;
+      label.style.color = "white";
+      label.style.padding = "1px 4px";
+      label.style.borderRadius = "4px";
+      const fontSize = Math.min(index >= 100 ? 8 : 12, Math.max(8, firstRect.height / 2));
+      label.style.fontSize = \`\${fontSize}px\`;
+      label.textContent = index;
+
+      // labelWidth = label.offsetWidth > 0 ? label.offsetWidth : labelWidth; // Update actual width if possible
+      // labelHeight = label.offsetHeight > 0 ? label.offsetHeight : labelHeight; // Update actual height if possible
+      labelWidth *= fontSize / 12;
+      labelHeight *= fontSize / 12;
+      const digits = index.toString().length;
+      labelWidth += (digits - 2) * fontSize / 1.5;
+      labelHeight *= fontSize / 12;
+
+      const firstRectTop = firstRect.top + iframeOffset.y;
+      const firstRectLeft = firstRect.left + iframeOffset.x;
+
+      let labelTop = firstRectTop - labelHeight - 4 * 12 / fontSize;
+      let labelLeft = firstRectLeft + firstRect.width - labelWidth - 2;
+
+      // Adjust label position if first rect is too small
+      if (firstRect.width < labelWidth + 4 || firstRect.height < labelHeight + 4) {
+        labelTop = firstRectTop - labelHeight;
+        labelLeft = firstRectLeft + firstRect.width - labelWidth; // Align with right edge
+        if (labelLeft < iframeOffset.x) labelLeft = firstRectLeft; // Prevent going off-left
+      }
+
+      // // Check if the label is too close to any existing label
+      // const minDistance = 2; // Minimum distance between labels
+      // let hasOverlap = true;
+      // let attempts = 0;
+      // const maxAttempts = 5;
+
+      // const alignmentPositions = [
+      //   // align with right edge (current default)
+      //   firstRectLeft + firstRect.width - labelWidth - 2,
+      //   // 1/4 of the way from the right edge
+      //   firstRectLeft + (firstRect.width - labelWidth) / 2 + firstRect.width / 4,
+      //   // in middle
+      //   firstRectLeft + (firstRect.width - labelWidth) / 2,
+      //   firstRectLeft + (firstRect.width - labelWidth) / 2 - firstRect.width / 4,
+      //   // align with left edge
+      //   firstRectLeft,
+      // ];
+
+      // while (hasOverlap && attempts < maxAttempts) {
+      //   hasOverlap = false;
+
+      //   // Use the current alignment position
+      //   labelLeft = alignmentPositions[attempts];
+
+      //   // Current label bounding box
+      //   const currentLabel = {
+      //     xmin: labelLeft,
+      //     ymin: labelTop,
+      //     xmax: labelLeft + labelWidth,
+      //     ymax: labelTop + labelHeight,
+      //   };
+
+      //   for (const existingLabel of existingLabelBoundingBoxes) {
+      //     // Check if labels overlap or are too close (using minDistance buffer)
+      //     if (!(currentLabel.xmax + minDistance < existingLabel.xmin ||
+      //           currentLabel.xmin > existingLabel.xmax + minDistance ||
+      //           currentLabel.ymax + minDistance < existingLabel.ymin ||
+      //           currentLabel.ymin > existingLabel.ymax + minDistance)) {
+      //       hasOverlap = true;
+      //       break;
+      //     }
+      //   }
+
+      //   if (hasOverlap) {
+      //     attempts++;
+      //   }
+      // }
+
+      // Ensure label stays within viewport bounds slightly better
+      labelTop = Math.max(0, Math.min(labelTop, window.innerHeight - labelHeight));
+      labelLeft = Math.max(0, Math.min(labelLeft, window.innerWidth - labelWidth - 2));
+
+
+      label.style.top = \`\${labelTop}px\`;
+      label.style.left = \`\${labelLeft}px\`;
+
+      // Add the label to the existing label bounding boxes
+      existingLabelBoundingBoxes.push({
+        xmin: labelLeft,
+        ymin: labelTop,
+        xmax: labelLeft + labelWidth,
+        ymax: labelTop + labelHeight,
+      });
+
+      fragment.appendChild(label);
+
+      // Update positions on scroll/resize
+      const updatePositions = () => {
+        let newRects = element.getClientRects(); // Get fresh rects
+
+        // Transform rects if element is inside an iframe (same logic as initial highlighting)
+        if (parentIframe) {
+          const transformedRects = [];
+          const iframeRect = parentIframe.getBoundingClientRect();
+
+          // Get iframe's content area offset and CSS transforms
+          const iframeStyle = window.getComputedStyle(parentIframe);
+          const borderLeft = parseFloat(iframeStyle.borderLeftWidth) || 0;
+          const borderTop = parseFloat(iframeStyle.borderTopWidth) || 0;
+          const paddingLeft = parseFloat(iframeStyle.paddingLeft) || 0;
+          const paddingTop = parseFloat(iframeStyle.paddingTop) || 0;
+
+          const contentOffsetX = borderLeft + paddingLeft;
+          const contentOffsetY = borderTop + paddingTop;
+
+          // Extract scale factor from CSS transform
+          let scaleX = 1, scaleY = 1;
+          const transform = iframeStyle.transform;
+          if (transform && transform !== 'none') {
+            // Parse scale from transform matrix or scale() function
+            const scaleMatch = transform.match(/scale\\(([^)]+)\\)/);
+            if (scaleMatch) {
+              const scaleValues = scaleMatch[1].split(',').map(v => parseFloat(v.trim()));
+              scaleX = scaleValues[0] || 1;
+              scaleY = scaleValues[1] || scaleX; // If only one value, use it for both X and Y
+            } else {
+              // Try to parse matrix() transform
+              const matrixMatch = transform.match(/matrix\\(([^)]+)\\)/);
+              if (matrixMatch) {
+                const values = matrixMatch[1].split(',').map(v => parseFloat(v.trim()));
+                if (values.length >= 6) {
+                  scaleX = values[0]; // a value in matrix(a, b, c, d, e, f)
+                  scaleY = values[3]; // d value in matrix(a, b, c, d, e, f)
+                }
+              }
+            }
+          }
+
+          // Get iframe scroll position
+          let scrollLeft = 0, scrollTop = 0;
+          try {
+            const iframeDoc = parentIframe.contentDocument || parentIframe.contentWindow?.document;
+            if (iframeDoc) {
+              scrollLeft = iframeDoc.documentElement?.scrollLeft || iframeDoc.body?.scrollLeft || 0;
+              scrollTop = iframeDoc.documentElement?.scrollTop || iframeDoc.body?.scrollTop || 0;
+            }
+          } catch (e) {
+            console.warn("Cannot access iframe scroll position (cross-origin):", e);
+          }
+
+          // Transform each rect accounting for iframe scaling
+          for (const rect of newRects) {
+            // Apply scale factor to coordinates and dimensions
+            const scaledWidth = rect.width * scaleX;
+            const scaledHeight = rect.height * scaleY;
+            const scaledTop = rect.top * scaleY;
+            const scaledLeft = rect.left * scaleX;
+            const scaledScrollTop = scrollTop * scaleY;
+            const scaledScrollLeft = scrollLeft * scaleX;
+
+            const transformedRect = {
+              top: scaledTop + iframeRect.top + contentOffsetY - scaledScrollTop,
+              left: scaledLeft + iframeRect.left + contentOffsetX - scaledScrollLeft,
+              bottom: scaledTop + scaledHeight + iframeRect.top + contentOffsetY - scaledScrollTop,
+              right: scaledLeft + scaledWidth + iframeRect.left + contentOffsetX - scaledScrollLeft,
+              width: scaledWidth,
+              height: scaledHeight,
+              x: scaledLeft + iframeRect.left + contentOffsetX - scaledScrollLeft,
+              y: scaledTop + iframeRect.top + contentOffsetY - scaledScrollTop
+            };
+            transformedRects.push(transformedRect);
+          }
+
+          newRects = transformedRects;
+        }
+
+        const newIframeOffset = { x: 0, y: 0 }; // No offset needed since rects are already transformed
+
+        // Update each overlay
+        overlays.forEach((overlayData, i) => {
+          if (i < newRects.length) { // Check if rect still exists
+            const newRect = newRects[i];
+            const newTop = newRect.top + newIframeOffset.y;
+            const newLeft = newRect.left + newIframeOffset.x;
+
+            overlayData.element.style.top = \`\${newTop}px\`;
+            overlayData.element.style.left = \`\${newLeft}px\`;
+            overlayData.element.style.width = \`\${newRect.width}px\`;
+            overlayData.element.style.height = \`\${newRect.height}px\`;
+            overlayData.element.style.display = (newRect.width === 0 || newRect.height === 0) ? 'none' : 'block';
+          } else {
+            // If fewer rects now, hide extra overlays
+            overlayData.element.style.display = 'none';
+          }
+        });
+
+        // If there are fewer new rects than overlays, hide the extras
+        if (newRects.length < overlays.length) {
+          for (let i = newRects.length; i < overlays.length; i++) {
+            overlays[i].element.style.display = 'none';
+          }
+        }
+
+        // Update label position based on the first new rect
+        if (label && newRects.length > 0) {
+          const firstNewRect = newRects[0];
+          const firstNewRectTop = firstNewRect.top + newIframeOffset.y;
+          const firstNewRectLeft = firstNewRect.left + newIframeOffset.x;
+
+          let newLabelTop = firstNewRectTop + 2;
+          let newLabelLeft = firstNewRectLeft + firstNewRect.width - labelWidth - 2;
+
+          if (firstNewRect.width < labelWidth + 4 || firstNewRect.height < labelHeight + 4) {
+            newLabelTop = firstNewRectTop - labelHeight - 2;
+            newLabelLeft = firstNewRectLeft + firstNewRect.width - labelWidth;
+            if (newLabelLeft < newIframeOffset.x) newLabelLeft = firstNewRectLeft;
+          }
+
+          // Ensure label stays within viewport bounds
+          newLabelTop = Math.max(0, Math.min(newLabelTop, window.innerHeight - labelHeight));
+          newLabelLeft = Math.max(0, Math.min(newLabelLeft, window.innerWidth - labelWidth));
+
+          label.style.top = \`\${newLabelTop}px\`;
+          label.style.left = \`\${newLabelLeft}px\`;
+          label.style.display = 'block';
+        } else if (label) {
+          // Hide label if element has no rects anymore
+          label.style.display = 'none';
+        }
+      };
+
+      const throttleFunction = (func, delay) => {
+        let lastCall = 0;
+        return (...args) => {
+          const now = performance.now();
+          if (now - lastCall < delay) return;
+          lastCall = now;
+          return func(...args);
+        };
+      };
+
+      // const throttledUpdatePositions = throttleFunction(updatePositions, 16); // ~60fps
+      // window.addEventListener('scroll', throttledUpdatePositions, true);
+      // window.addEventListener('resize', throttledUpdatePositions);
+
+      // Add cleanup function
+      cleanupFn = () => {
+        // window.removeEventListener('scroll', throttledUpdatePositions, true);
+        // window.removeEventListener('resize', throttledUpdatePositions);
+        // Remove overlay elements if needed
+        overlays.forEach(overlay => overlay.element.remove());
+        if (label) label.remove();
+      };
+
+      // Then add fragment to container in one operation
+      container.appendChild(fragment);
+
+      return index + 1;
+    } finally {
+      // Store cleanup function for later use
+      if (cleanupFn) {
+        // Keep a reference to cleanup functions in a global array
+        (window._highlightCleanupFunctions = window._highlightCleanupFunctions || []).push(cleanupFn);
+      }
+    }
+  }
+
+
+  /**
+   * Gets the position of an element in its parent.
+   *
+   * @param {HTMLElement} currentElement - The element to get the position for.
+   * @returns {number} The position of the element in its parent.
+   */
+  function getElementPosition(currentElement) {
+    if (!currentElement.parentElement) {
+      return 0; // No parent means no siblings
+    }
+
+    const tagName = currentElement.nodeName.toLowerCase();
+
+    const siblings = Array.from(currentElement.parentElement.children)
+      .filter((sib) => sib.nodeName.toLowerCase() === tagName);
+
+    if (siblings.length === 1) {
+      return 0; // Only element of its type
+    }
+
+    const index = siblings.indexOf(currentElement) + 1; // 1-based index
+    return index;
+  }
+
+
+  function getXPathTree(element, stopAtBoundary = true) {
+    if (xpathCache.has(element)) return xpathCache.get(element);
+
+    const segments = [];
+    let currentElement = element;
+
+    while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE) {
+      // Stop if we hit a shadow root or iframe
+      if (
+        stopAtBoundary &&
+        (currentElement.parentNode instanceof ShadowRoot ||
+          currentElement.parentNode instanceof HTMLIFrameElement)
+      ) {
+        break;
+      }
+
+      const position = getElementPosition(currentElement);
+      const tagName = currentElement.nodeName.toLowerCase();
+      const xpathIndex = position > 0 ? \`[\${position}]\` : "";
+      segments.unshift(\`\${tagName}\${xpathIndex}\`);
+
+      currentElement = currentElement.parentNode;
+    }
+
+    const result = segments.join("/");
+    xpathCache.set(element, result);
+    return result;
+  }
+
+  /**
+   * Checks if a text node is visible.
+   *
+   * @param {Text} textNode - The text node to check.
+   * @returns {boolean} Whether the text node is visible.
+   */
+  function isTextNodeVisible(textNode) {
+    try {
+      // Special case: when viewportExpansion is -1, consider all text nodes as visible
+      if (viewportExpansion === -1) {
+        // Still check parent visibility for basic filtering
+        const parentElement = textNode.parentElement;
+        if (!parentElement) return false;
+
+        try {
+          return parentElement.checkVisibility({
+            checkOpacity: true,
+            checkVisibilityCSS: true,
+          });
+        } catch (e) {
+          // Fallback if checkVisibility is not supported
+          const style = window.getComputedStyle(parentElement);
+          return style.display !== 'none' &&
+            style.visibility !== 'hidden' &&
+            style.opacity !== '0';
+        }
+      }
+
+      const range = document.createRange();
+      range.selectNodeContents(textNode);
+      const rects = range.getClientRects(); // Use getClientRects for Range
+
+      if (!rects || rects.length === 0) {
+        return false;
+      }
+
+      let isAnyRectVisible = false;
+      let isAnyRectInViewport = false;
+
+      for (const rect of rects) {
+        // Check size
+        if (rect.width > 0 && rect.height > 0) {
+          isAnyRectVisible = true;
+
+          // Viewport check for this rect
+          if (!(
+            rect.bottom < -viewportExpansion ||
+            rect.top > window.innerHeight + viewportExpansion ||
+            rect.right < -viewportExpansion ||
+            rect.left > window.innerWidth + viewportExpansion
+          )) {
+            isAnyRectInViewport = true;
+            break; // Found a visible rect in viewport, no need to check others
+          }
+        }
+      }
+
+      if (!isAnyRectVisible || !isAnyRectInViewport) {
+        return false;
+      }
+
+      // Check parent visibility
+      const parentElement = textNode.parentElement;
+      if (!parentElement) return false;
+
+      try {
+        return parentElement.checkVisibility({
+          checkOpacity: true,
+          checkVisibilityCSS: true,
+        });
+      } catch (e) {
+        // Fallback if checkVisibility is not supported
+        const style = window.getComputedStyle(parentElement);
+        return style.display !== 'none' &&
+          style.visibility !== 'hidden' &&
+          style.opacity !== '0';
+      }
+    } catch (e) {
+      console.warn('Error checking text node visibility:', e);
+      return false;
+    }
+  }
+
+  /**
+   * Checks if an element is accepted.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Whether the element is accepted.
+   */
+  function isElementAccepted(element) {
+    if (!element || !element.tagName) return false;
+
+    // Always accept body and common container elements
+    const alwaysAccept = new Set([
+      "body", "div", "main", "article", "section", "nav", "header", "footer"
+    ]);
+    const tagName = element.tagName.toLowerCase();
+
+    if (alwaysAccept.has(tagName)) return true;
+
+    const leafElementDenyList = new Set([
+      "svg",
+      "script",
+      "style",
+      "link",
+      "meta",
+      "noscript",
+      "template",
+    ]);
+
+    return !leafElementDenyList.has(tagName);
+  }
+
+  /**
+   * Checks if an element is visible.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Whether the element is visible.
+   */
+  function isElementVisible(element) {
+    if (element.tagName.toLowerCase() === "input" && element.type === "date") {
+      return true;
+    }
+
+    if (alwaysHighlightFileInput && element.tagName.toLowerCase() === "input" && element.type === "file") return true;
+
+    // SVG elements need special handling for visibility
+    if (element.tagName.toLowerCase() === "svg") {
+      const rect = getCachedBoundingRect(element);
+      const style = getCachedComputedStyle(element);
+      return (
+        rect &&
+        rect.width > 0 &&
+        rect.height > 0 &&
+        style?.visibility !== "hidden" &&
+        style?.display !== "none"
+      );
+    }
+
+    const style = getCachedComputedStyle(element);
+    return (
+      element.offsetWidth > 0 &&
+      element.offsetHeight > 0 &&
+      style?.visibility !== "hidden" &&
+      style?.display !== "none"
+    );
+  }
+
+  /**
+   * Checks if an element is clickable (responds to click events).
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Whether the element is clickable.
+   */
+  function shouldMarkAsClickable(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+
+    const tagName = element.tagName.toLowerCase();
+
+    // Primarily clickable elements
+    const primaryClickableElements = new Set([
+      "a",          // Links
+      "button",     // Buttons
+      "details",    // Expandable details
+      "summary",    // Summary element (clickable part of details)
+      "label",      // Form labels (often clickable)
+      "option",     // Select options
+      "optgroup",   // Option groups
+    ]);
+
+    if (primaryClickableElements.has(tagName)) {
+      return false;
+    }
+
+    const role = element.getAttribute("role");
+
+    // Clickable roles
+    const clickableRoles = new Set([
+      'button',           // Directly clickable element
+      'link',            // Clickable link
+      'menuitem',        // Clickable menu item
+      'menuitemradio',   // Radio-style menu item (selectable)
+      'menuitemcheckbox', // Checkbox-style menu item (toggleable)
+      'radio',           // Radio button (selectable)
+      'checkbox',        // Checkbox (toggleable)
+      'tab',             // Tab (clickable to switch content)
+      'switch',          // Toggle switch (clickable to change state)
+      'option',          // Selectable option in a list
+    ]);
+
+    if (role && clickableRoles.has(role)) {
+      return true;
+    }
+
+    // Check for dropdown indicators
+    if (hasAnyClassName(element, buttonClassNames)) {
+      return true; // Return true for dropdown elements
+    }
+
+    if (
+      element.getAttribute('data-toggle') === 'dropdown' ||
+      element.getAttribute('aria-haspopup')
+    ) {
+      return true;
+    }
+
+    const clickEvents = ['click', 'mousedown', 'mouseup', 'dblclick'];
+    const listenedEvents = getCachedNodeEventListeners(element);
+    if (listenedEvents && listenedEvents.length > 0) {
+      for (const eventType of clickEvents) {
+        if (listenedEvents.includes(eventType)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Checks if an element is interactive.
+   *
+   * lots of comments, and uncommented code - to show the logic of what we already tried
+   *
+   * One of the things we tried at the beginning was also to use event listeners, and other fancy class, style stuff -> what actually worked best was just combining most things with computed cursor style :)
+   *
+   * @param {HTMLElement} element - The element to check.
+   */
+  function isInteractiveElement(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+
+    // Cache the tagName and style lookups
+    const tagName = element.tagName.toLowerCase();
+    const style = getCachedComputedStyle(element);
+
+    // Define interactive cursors
+    const interactiveCursors = new Set([
+      'pointer',    // Link/clickable elements
+      'move',       // Movable elements
+      'text',       // Text selection
+      'grab',       // Grabbable elements
+      'grabbing',   // Currently grabbing
+      'cell',       // Table cell selection
+      'copy',       // Copy operation
+      'alias',      // Alias creation
+      'all-scroll', // Scrollable content
+      'col-resize', // Column resize
+      'context-menu', // Context menu available
+      'crosshair',  // Precise selection
+      'e-resize',   // East resize
+      'ew-resize',  // East-west resize
+      'help',       // Help available
+      'n-resize',   // North resize
+      'ne-resize',  // Northeast resize
+      'nesw-resize', // Northeast-southwest resize
+      'ns-resize',  // North-south resize
+      'nw-resize',  // Northwest resize
+      'nwse-resize', // Northwest-southeast resize
+      'row-resize', // Row resize
+      's-resize',   // South resize
+      'se-resize',  // Southeast resize
+      'sw-resize',  // Southwest resize
+      'vertical-text', // Vertical text selection
+      'w-resize',   // West resize
+      'zoom-in',    // Zoom in
+      'zoom-out'    // Zoom out
+    ]);
+
+    // Define non-interactive cursors
+    const nonInteractiveCursors = new Set([
+      'not-allowed', // Action not allowed
+      'no-drop',     // Drop not allowed
+      'wait',        // Processing
+      'progress',    // In progress
+      'initial',     // Initial value
+      'inherit'      // Inherited value
+      //? Let's just include all potentially clickable elements that are not specifically blocked
+      // 'none',        // No cursor
+      // 'default',     // Default cursor
+      // 'auto',        // Browser default
+    ]);
+
+    /**
+     * Checks if an element has an interactive pointer.
+     *
+     * @param {HTMLElement} element - The element to check.
+     * @returns {boolean} Whether the element has an interactive pointer.
+     */
+    function doesElementHaveInteractivePointer(element) {
+      if (element.tagName.toLowerCase() === "html") return false;
+
+      if (style?.cursor && interactiveCursors.has(style.cursor)) return true;
+
+      return false;
+    }
+    // Disabled for now, since it adds too many false positives
+    // let isInteractiveCursor = doesElementHaveInteractivePointer(element);
+
+    // // Genius fix for almost all interactive elements
+    // if (isInteractiveCursor) {
+    //   return true;
+    // }
+
+    const interactiveElements = new Set([
+      "a",          // Links
+      "button",     // Buttons
+      "input",      // All input types (text, checkbox, radio, etc.)
+      "select",     // Dropdown menus
+      "textarea",   // Text areas
+      "details",    // Expandable details
+      "summary",    // Summary element (clickable part of details)
+      "label",      // Form labels (often clickable)
+      "option",     // Select options
+      "optgroup",   // Option groups
+      "fieldset",   // Form fieldsets (can be interactive with legend)
+      "legend",     // Fieldset legends
+    ]);
+
+    // Define explicit disable attributes and properties
+    const explicitDisableTags = new Set([
+      'disabled',           // Standard disabled attribute
+      // 'aria-disabled',      // ARIA disabled state
+      // 'readonly',          // Read-only state
+      // 'aria-readonly',     // ARIA read-only state
+      // 'aria-hidden',       // Hidden from accessibility
+      // 'hidden',            // Hidden attribute
+      // 'inert',             // Inert attribute
+      // 'aria-inert',        // ARIA inert state
+      // 'tabindex="-1"',     // Removed from tab order
+      // 'aria-hidden="true"' // Hidden from screen readers
+    ]);
+
+    // Check for non-interactive cursor
+    if (style?.cursor && nonInteractiveCursors.has(style.cursor)) {
+      return false;
+    }
+
+    // handle inputs, select, checkbox, radio, textarea, button and make sure they are not cursor style disabled/not-allowed
+    if (interactiveElements.has(tagName)) {
+      // Check for explicit disable attributes
+      for (const disableTag of explicitDisableTags) {
+        if (element.hasAttribute(disableTag) ||
+          element.getAttribute(disableTag) === 'true' ||
+          element.getAttribute(disableTag) === '') {
+          return false;
+        }
+      }
+
+      // Check for disabled property on form elements
+      if (element.disabled) {
+        return false;
+      }
+
+      // Don't mark as non-interactive yet
+      // Check for readonly property on form elements
+      if (element.readOnly) {
+        // return false;
+      }
+
+      // Check for inert property
+      if (element.inert) {
+        return false;
+      }
+
+      return true;
+    }
+
+    const role = element.getAttribute("role");
+    const ariaRole = element.getAttribute("aria-role");
+
+    // Check for contenteditable attribute
+    if (element.getAttribute("contenteditable") === "true" || element.isContentEditable) {
+      return true;
+    }
+
+    // Added enhancement to capture dropdown interactive elements
+    if (hasAnyClassName(element, buttonClassNames) ||
+        hasAnyClassName(element, interactiveClassNames) ||
+      element.getAttribute('data-index') ||
+      element.getAttribute('data-toggle') === 'dropdown' ||
+        element.getAttribute('aria-haspopup')) {
+      return true;
+    }
+
+
+    const interactiveRoles = new Set([
+      'button',           // Directly clickable element
+      'link',            // Clickable link
+      'menuitem',        // Clickable menu item
+      'menuitemradio',   // Radio-style menu item (selectable)
+      'menuitemcheckbox', // Checkbox-style menu item (toggleable)
+      'radio',           // Radio button (selectable)
+      'checkbox',        // Checkbox (toggleable)
+      'tab',             // Tab (clickable to switch content)
+      'switch',          // Toggle switch (clickable to change state)
+      'slider',          // Slider control (draggable)
+      'spinbutton',      // Number input with up/down controls
+      'combobox',        // Dropdown with text input
+      'searchbox',       // Search input field
+      'textbox',         // Text input field
+      'listbox',         // Selectable list
+      'option',          // Selectable option in a list
+      'scrollbar'        // Scrollable control
+    ]);
+
+
+    // Basic role/attribute checks
+    const hasInteractiveRole =
+      (role && interactiveRoles.has(role)) ||
+      (ariaRole && interactiveRoles.has(ariaRole));
+
+    if (hasInteractiveRole) return true;
+
+    const listenedEvents = getCachedNodeEventListeners(element);
+    if (listenedEvents && listenedEvents.length > 0) {
+      for (const eventType of INTERACTION_EVENTS) {
+        if (listenedEvents.includes(eventType)) {
+          return true;
+        }
+      }
+    }
+
+    return false
+  }
+
+
+  /**
+   * Checks if an element is the topmost element at its position.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Whether the element is the topmost element at its position.
+   */
+  function isTopElement(element) {
+    if (element.tagName.toLowerCase() === "input" && element.type === "date") {
+      return true;
+    }
+    // Special case: when viewportExpansion is -1, consider all elements as "top" elements
+    if (viewportExpansion === -1) {
+      return true;
+    }
+
+    const rects = getCachedClientRects(element); // Replace element.getClientRects()
+
+    if (!rects || rects.length === 0) {
+      return false; // No geometry, cannot be top
+    }
+
+    let isAnyRectInViewport = false;
+    for (const rect of rects) {
+      // Use the same logic as isInExpandedViewport check
+      if (rect.width > 0 && rect.height > 0 && !( // Only check non-empty rects
+        rect.bottom < -viewportExpansion ||
+        rect.top > window.innerHeight + viewportExpansion ||
+        rect.right < -viewportExpansion ||
+        rect.left > window.innerWidth + viewportExpansion
+      )) {
+        isAnyRectInViewport = true;
+        break;
+      }
+    }
+
+    if (!isAnyRectInViewport) {
+      return false; // All rects are outside the viewport area
+    }
+
+
+    // Find the correct document context and root element
+    let doc = element.ownerDocument;
+
+    // If we're in an iframe, elements are considered top by default
+    if (doc !== window.document) {
+      return true;
+    }
+
+    // For shadow DOM, we need to check within its own root context
+    const shadowRoot = element.getRootNode();
+    if (shadowRoot instanceof ShadowRoot) {
+      const centerX = rects[Math.floor(rects.length / 2)].left + rects[Math.floor(rects.length / 2)].width / 2;
+      const centerY = rects[Math.floor(rects.length / 2)].top + rects[Math.floor(rects.length / 2)].height / 2;
+
+      try {
+        const topEl = shadowRoot.elementFromPoint(centerX, centerY);
+        if (!topEl) return false;
+
+        let current = topEl;
+        while (current && current !== shadowRoot) {
+          if (current === element) return true;
+          current = current.parentElement;
+        }
+        return false;
+      } catch (e) {
+        return true;
+      }
+    }
+
+    // For elements in viewport, check if they're topmost
+    const centerX = rects[Math.floor(rects.length / 2)].left + rects[Math.floor(rects.length / 2)].width / 2;
+    const centerY = rects[Math.floor(rects.length / 2)].top + rects[Math.floor(rects.length / 2)].height / 2;
+
+    try {
+      const topEl = document.elementFromPoint(centerX, centerY);
+      if (!topEl) return false;
+
+      let current = topEl;
+      while (current && current !== document.documentElement) {
+        if (current === element) return true;
+        current = current.parentElement;
+      }
+      return false;
+    } catch (e) {
+      return true;
+    }
+  }
+
+  /**
+   * Checks if an element is within the expanded viewport.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @param {number} viewportExpansion - The viewport expansion.
+   * @returns {boolean} Whether the element is within the expanded viewport.
+   */
+  function isInExpandedViewport(element, viewportExpansion) {
+    if (viewportExpansion === -1) {
+      return true;
+    }
+
+    const rects = element.getClientRects(); // Use getClientRects
+
+    if (!rects || rects.length === 0) {
+      // Fallback to getBoundingClientRect if getClientRects is empty,
+      // useful for elements like <svg> that might not have client rects but have a bounding box.
+      const boundingRect = getCachedBoundingRect(element);
+      if (!boundingRect || boundingRect.width === 0 || boundingRect.height === 0) {
+        return false;
+      }
+      return !(
+        boundingRect.bottom < -viewportExpansion ||
+        boundingRect.top > window.innerHeight + viewportExpansion ||
+        boundingRect.right < -viewportExpansion ||
+        boundingRect.left > window.innerWidth + viewportExpansion
+      );
+    }
+
+    // Check if *any* client rect is within the viewport
+    for (const rect of rects) {
+      if (rect.width === 0 || rect.height === 0) continue; // Skip empty rects
+
+      if (!(
+        rect.bottom < -viewportExpansion ||
+        rect.top > window.innerHeight + viewportExpansion ||
+        rect.right < -viewportExpansion ||
+        rect.left > window.innerWidth + viewportExpansion
+      )) {
+        return true; // Found at least one rect in the viewport
+      }
+    }
+
+    return false; // No rects were found in the viewport
+  }
+
+  // /**
+  //  * Gets the effective scroll of an element.
+  //  *
+  //  * @param {HTMLElement} element - The element to get the effective scroll for.
+  //  * @returns {Object} The effective scroll of the element.
+  //  */
+  // function getEffectiveScroll(element) {
+  //   let currentEl = element;
+  //   let scrollX = 0;
+  //   let scrollY = 0;
+
+  //   while (currentEl && currentEl !== document.documentElement) {
+  //     if (currentEl.scrollLeft || currentEl.scrollTop) {
+  //       scrollX += currentEl.scrollLeft;
+  //       scrollY += currentEl.scrollTop;
+  //     }
+  //     currentEl = currentEl.parentElement;
+  //   }
+
+  //   scrollX += window.scrollX;
+  //   scrollY += window.scrollY;
+
+  //   return { scrollX, scrollY };
+  // }
+
+  /**
+   * Checks if an element is an interactive candidate.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Whether the element is an interactive candidate.
+   */
+  function isInteractiveCandidate(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;
+
+    const tagName = element.tagName.toLowerCase();
+
+    // Fast-path for common interactive elements
+    const interactiveElements = new Set([
+      "a", "button", "input", "select", "textarea", "details", "summary", "label"
+    ]);
+
+    if (interactiveElements.has(tagName)) return true;
+
+    // Quick attribute checks without getting full lists
+    const hasQuickInteractiveAttr = element.hasAttribute("onclick") ||
+      element.hasAttribute("role") ||
+      element.hasAttribute("tabindex") ||
+      element.hasAttribute("aria-") ||
+      element.hasAttribute("data-action") ||
+      element.getAttribute("contenteditable") === "true";
+
+    return hasQuickInteractiveAttr;
+  }
+
+  // --- Define constants for distinct interaction check ---
+  const DISTINCT_INTERACTIVE_TAGS = new Set([
+    'a', 'button', 'input', 'select', 'textarea', 'summary', 'details', 'label', 'option'
+  ]);
+  const INTERACTIVE_ROLES = new Set([
+    'button', 'link', 'menuitem', 'menuitemradio', 'menuitemcheckbox',
+    'radio', 'checkbox', 'tab', 'switch', 'slider', 'spinbutton',
+    'combobox', 'searchbox', 'textbox', 'listbox', 'option', 'scrollbar'
+  ]);
+
+
+  /**
+   * Heuristically determines if an element should be considered as independently interactive,
+   * even if it's nested inside another interactive container.
+   *
+   * This function helps detect deeply nested actionable elements (e.g., menu items within a button)
+   * that may not be picked up by strict interactivity checks.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Whether the element is heuristically interactive.
+   */
+  function isHeuristicallyInteractive(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;
+
+    // Skip non-visible elements early for performance
+    if (!isElementVisible(element)) return false;
+
+    // Check for common attributes that often indicate interactivity
+    const hasInteractiveAttributes =
+      element.hasAttribute('role') ||
+      element.hasAttribute('tabindex') ||
+      element.hasAttribute('onclick') ||
+      typeof element.onclick === 'function';
+
+    // Check for semantic class names suggesting interactivity
+    const hasInteractiveClass = heuristicClassPattern.test(element.className || '');
+
+    // Determine whether the element is inside a known interactive container
+    const isInKnownContainer = Boolean(
+      element.closest(containerSelectors)
+    );
+
+    // Ensure the element has at least one visible child (to avoid marking empty wrappers)
+    const hasVisibleChildren = [...element.children].some(isElementVisible);
+
+    // Avoid highlighting elements whose parent is <body> (top-level wrappers)
+    const isParentBody = element.parentElement && element.parentElement.isSameNode(document.body);
+
+    return (
+      (isInteractiveElement(element) || hasInteractiveAttributes || hasInteractiveClass) &&
+      hasVisibleChildren &&
+      isInKnownContainer &&
+      !isParentBody
+    );
+  }
+
+
+  /**
+   * Checks if an element likely represents a distinct interaction
+   * separate from its parent (if the parent is also interactive).
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @param {Object} nodeData - The node data object.
+   * @returns {boolean} Whether the element is a distinct interaction.
+   */
+  function isElementDistinctInteraction(element, nodeData) {
+    if (nodeData.isScrollable) {
+      return true;
+    }
+
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+
+    const tagName = element.tagName.toLowerCase();
+    const role = element.getAttribute('role');
+
+    // Check if it's an iframe - always distinct boundary
+    if (tagName === 'iframe') {
+      return true;
+    }
+
+    // Check tag name
+    if (DISTINCT_INTERACTIVE_TAGS.has(tagName)) {
+      return true;
+    }
+    // Check interactive roles
+    if (role && INTERACTIVE_ROLES.has(role)) {
+      return true;
+    }
+    // Check contenteditable
+    if (element.isContentEditable || element.getAttribute('contenteditable') === 'true') {
+      return true;
+    }
+    // Check for common testing/automation attributes
+    if (element.hasAttribute('data-testid') || element.hasAttribute('data-cy') || element.hasAttribute('data-test')) {
+      return true;
+    }
+    // Check for explicit onclick handler (attribute or property)
+    if (element.hasAttribute('onclick') || typeof element.onclick === 'function') {
+      return true;
+    }
+
+    if (element.hasAttribute('aria-haspopup')) {
+      return true;
+    }
+
+    if (hasAnyClassName(element, interactiveClassNames)) {
+      return true;
+    }
+
+    // return false
+
+    // Check for other common interaction event listeners
+    try {
+      const getEventListenersForNode = element?.ownerDocument?.defaultView?.getEventListenersForNode || window.getEventListenersForNode;
+      if (typeof getEventListenersForNode === 'function') {
+        const listeners = getEventListenersForNode(element);
+        const interactionEvents = ['click', 'mousedown', 'mouseup', 'dblclick', 'input', 'mouseenter', 'mouseleave', 'keydown', 'keyup', 'submit', 'change', 'focus', 'blur'];
+        for (const eventType of interactionEvents) {
+          for (const listener of listeners) {
+            if (listener.type === eventType) {
+              return true; // Found a common interaction listener
+            }
+          }
+        }
+      }
+      // Fallback: Check common event attributes if getEventListeners is not available (getEventListenersForNode doesn't work in page.evaluate context)
+      const commonEventAttrs = ['onmousedown', 'onmouseup', 'onkeydown', 'onkeyup', 'onsubmit', 'onmouseenter', 'onmouseleave', 'onchange', 'oninput', 'onfocus', 'onblur'];
+      if (commonEventAttrs.some(attr => element.hasAttribute(attr))) {
+        return true;
+      }
+    } catch (e) {
+      // console.warn(\`Could not check event listeners for \${element.tagName}:\`, e);
+      // If checking listeners fails, rely on other checks
+    }
+
+
+
+    // if the element is not strictly interactive but appears clickable based on heuristic signals
+    if (isHeuristicallyInteractive(element)) {
+      return true;
+    }
+
+    // Default to false: if it's interactive but doesn't match above,
+    // assume it triggers the same action as the parent.
+    return false;
+  }
+  // --- End distinct interaction check ---
+
+  /**
+   * Handles the logic for deciding whether to highlight an element and performing the highlight.
+   * @param {
+    {
+        tagName: string;
+        attributes: Record<string, string>;
+        xpath: any;
+        children: never[];
+        isVisible?: boolean;
+        isTopElement?: boolean;
+        isInteractive?: boolean;
+        isInViewport?: boolean;
+        highlightIndex?: number;
+        shadowRoot?: boolean;
+   }} nodeData - The node data object.
+   * @param {HTMLElement} node - The node to highlight.
+   * @param {HTMLElement | null} parentIframe - The parent iframe node.
+   * @param {boolean} isParentHighlighted - Whether the parent node is highlighted.
+   * @returns {boolean} Whether the element was highlighted.
+   */
+  function handleHighlighting(nodeData, node, parentIframe, isParentHighlighted) {
+    if (!nodeData.isInteractive) return false; // Not interactive, definitely don't highlight
+
+    let shouldHighlight = false;
+    if (!isParentHighlighted) {
+      // Parent wasn't highlighted, this interactive node can be highlighted.
+      shouldHighlight = true;
+    } else {
+      // Parent *was* highlighted. Only highlight this node if it represents a distinct interaction.
+      if (isElementDistinctInteraction(node, nodeData)) {
+        shouldHighlight = true;
+      } else {
+        // console.log(\`Skipping highlight for \${nodeData.tagName} (parent highlighted)\`);
+        shouldHighlight = false;
+      }
+    }
+
+    if (shouldHighlight) {
+      const attributeNames = node.getAttributeNames?.() || [];
+      for (const name of attributeNames) {
+        const value = node.getAttribute(name);
+        nodeData.attributes[name] = value;
+      }
+
+      // Check viewport status before assigning index and highlighting
+      if (nodeData.isInViewport === undefined) {
+        nodeData.isInViewport = isInExpandedViewport(node, viewportExpansion);
+      }
+
+      // When viewportExpansion is -1, all interactive elements should get a highlight index
+      // regardless of viewport status
+      if (nodeData.isInViewport || viewportExpansion === -1) {
+        nodeData.highlightIndex = highlightIndex++;
+
+        if (doHighlightElements) {
+          if (focusHighlightIndex >= 0) {
+            if (focusHighlightIndex === nodeData.highlightIndex) {
+              highlightElement(node, nodeData.highlightIndex, parentIframe);
+            }
+          } else {
+            highlightElement(node, nodeData.highlightIndex, parentIframe);
+          }
+          return true; // Successfully highlighted
+        }
+      } else {
+        // console.log(\`Skipping highlight for \${nodeData.tagName} (outside viewport)\`);
+      }
+    }
+
+    return false; // Did not highlight
+  }
+
+  function isElementScrollable(element) {
+    const listenedEvents = getCachedNodeEventListeners(element);
+    if (listenedEvents && listenedEvents.includes('scroll')) {
+      const hasScrollableX = element.scrollWidth > element.clientWidth;
+      const hasScrollableY = element.scrollHeight > element.clientHeight;
+      return hasScrollableX || hasScrollableY;
+    }
+
+    const style = getCachedComputedStyle(element);
+    const hasScrollableX = ['auto', 'scroll'].includes(style.overflowX) &&
+        element.scrollWidth > element.clientWidth;
+    const hasScrollableY = ['auto', 'scroll'].includes(style.overflowY) &&
+        element.scrollHeight > element.clientHeight;
+    return hasScrollableX || hasScrollableY;
+  }
+
+  /**
+   * Creates a node data object for a given node and its descendants.
+   *
+   * @param {HTMLElement} node - The node to process.
+   * @param {HTMLElement | null} parentIframe - The parent iframe node.
+   * @param {boolean} isParentHighlighted - Whether the parent node is highlighted.
+   * @returns {string | null} The ID of the node data object, or null if the node is not processed.
+   */
+  function buildDomTree(node, parentIframe = null, isParentHighlighted = false) {
+
+    // Fast rejection checks first
+    if (!node || node.id === HIGHLIGHT_CONTAINER_ID) {
+      return null;
+    }
+
+    if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.TEXT_NODE) {
+      return null;
+    }
+
+    // Special handling for root node (body)
+    if (node === document.body) {
+      const nodeData = {
+        tagName: 'body',
+        attributes: {},
+        xpath: '/body',
+        children: [],
+      };
+
+      // Process children of body
+      for (const child of node.childNodes) {
+        const domElement = buildDomTree(child, parentIframe, false); // Body's children have no highlighted parent initially
+        if (domElement) nodeData.children.push(domElement);
+      }
+
+      const id = \`\${ID.current++}\`;
+      DOM_HASH_MAP[id] = nodeData;
+      return id;
+    }
+
+    // Process text nodes
+    if (node.nodeType === Node.TEXT_NODE) {
+      const textContent = node.textContent?.trim();
+      if (!textContent) {
+        return null;
+      }
+
+      // Only check visibility for text nodes that might be visible
+      const parentElement = node.parentElement;
+      if (!parentElement || parentElement.tagName.toLowerCase() === 'script') {
+        return null;
+      }
+
+      const id = \`\${ID.current++}\`;
+      DOM_HASH_MAP[id] = {
+        type: "TEXT_NODE",
+        text: textContent,
+        isVisible: isTextNodeVisible(node),
+      };
+      return id;
+    }
+
+    // Quick checks for element nodes
+    if (node.nodeType === Node.ELEMENT_NODE && !isElementAccepted(node)) {
+      return null;
+    }
+
+    /**
+     * @type {
+      {
+          tagName: string;
+          attributes: Record<string, string | null>;
+          xpath: any;
+          children: never[];
+          isVisible?: boolean;
+          isTopElement?: boolean;
+          isInteractive?: boolean;
+          isInViewport?: boolean;
+          highlightIndex?: number;
+          shadowRoot?: boolean;
+      }
+    } nodeData - The node data object.
+     */
+    const nodeData = {
+      tagName: node.tagName.toLowerCase(),
+      attributes: {},
+      xpath: getXPathTree(node, true),
+      children: [],
+    };
+
+    // Get attributes for interactive elements or potential text containers
+    if (node.tagName.toLowerCase() === 'iframe' || node.tagName.toLowerCase() === 'body') {
+      const attributeNames = node.getAttributeNames?.() || [];
+      for (const name of attributeNames) {
+        const value = node.getAttribute(name);
+        nodeData.attributes[name] = value;
+      }
+    }
+
+    let nodeWasHighlighted = false;
+    // Perform visibility, interactivity, and highlighting checks
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      if (alwaysHighlightFileInput && node.tagName.toLowerCase() === 'input' && node.type === 'file') {
+        nodeData.isTopElement = true;
+        if (nodeData.isTopElement) {
+          nodeData.isInteractive = true;
+          nodeData.isInViewport = true; // File inputs should always be considered in viewport
+          // Call the dedicated highlighting function
+          nodeWasHighlighted = handleHighlighting(nodeData, node, parentIframe, isParentHighlighted);
+        }
+      } else {
+        nodeData.isVisible = isElementVisible(node); // isElementVisible uses offsetWidth/Height, which is fine
+
+        if (nodeData.isVisible) {
+          nodeData.isTopElement = isTopElement(node);
+          if (nodeData.isTopElement) {
+            let isScrollable = isElementScrollable(node);
+            nodeData.isInteractive = isInteractiveElement(node) || isScrollable;
+            nodeData.isScrollable = isScrollable;
+            nodeData.markAsClickable = shouldMarkAsClickable(node);
+            // Call the dedicated highlighting function
+            nodeWasHighlighted = handleHighlighting(nodeData, node, parentIframe, isParentHighlighted);
+          }
+        }
+      }
+    }
+
+    // Process children, with special handling for iframes and rich text editors
+    if (node.tagName) {
+      const tagName = node.tagName.toLowerCase();
+
+      // Handle iframes
+      if (tagName === "iframe") {
+        try {
+          const iframeDoc = node.contentDocument || node.contentWindow?.document;
+          if (iframeDoc) {
+            for (const child of iframeDoc.childNodes) {
+              const domElement = buildDomTree(child, node, false);
+              if (domElement) nodeData.children.push(domElement);
+            }
+          }
+        } catch (e) {
+          console.warn("Unable to access iframe:", e);
+        }
+      }
+      // Handle rich text editors and contenteditable elements
+      else if (
+        node.isContentEditable ||
+        node.getAttribute("contenteditable") === "true" ||
+        node.id === "tinymce" ||
+        node.classList.contains("mce-content-body") ||
+        (tagName === "body" && node.getAttribute("data-id")?.startsWith("mce_"))
+      ) {
+        // Process all child nodes to capture formatted text
+        for (const child of node.childNodes) {
+          const domElement = buildDomTree(child, parentIframe, nodeWasHighlighted);
+          if (domElement) nodeData.children.push(domElement);
+        }
+      }
+      else {
+        // Handle shadow DOM
+        if (node.shadowRoot) {
+          nodeData.shadowRoot = true;
+          for (const child of node.shadowRoot.childNodes) {
+            const domElement = buildDomTree(child, parentIframe, nodeWasHighlighted);
+            if (domElement) nodeData.children.push(domElement);
+          }
+        }
+        // Handle regular elements
+        for (const child of node.childNodes) {
+          // Pass the highlighted status of the *current* node to its children
+          const passHighlightStatusToChild = nodeWasHighlighted || isParentHighlighted;
+          const domElement = buildDomTree(child, parentIframe, passHighlightStatusToChild);
+          if (domElement) nodeData.children.push(domElement);
+        }
+      }
+    }
+
+    const id = \`\${ID.current++}\`;
+    DOM_HASH_MAP[id] = nodeData;
+    return id;
+  }
+
+  const rootId = buildDomTree(document.body);
+
+  // Clear the cache before starting
+  DOM_CACHE.clearCache();
+
+  return { rootId, map: DOM_HASH_MAP };
+}
+`,ee=`((args = {
+    doHighlightElements: true,
+    focusHighlightIndex: -1,
+    viewportExpansion: 0,
+    debugMode: false,
+    interactiveClassNames: [],
+    alwaysHighlightFileInput: false,
+    sameRectIoUThreshold: 0.85,
+}) => {
+    // Default threshold if not provided
+    const sameRectIoUThreshold = args.sameRectIoUThreshold ?? 0.85;
+    const EVENT_LISTENER_MAPPING = {
+        'onclick': 'click',
+        'onmousedown': 'mousedown',
+        'onmouseup': 'mouseup',
+        'ondblclick': 'dblclick',
+        'onmouseenter': 'mouseenter',
+        'onmouseleave': 'mouseleave',
+        'onmousemove': 'mousemove',
+        'onmouseout': 'mouseout',
+        'onmouseover': 'mouseover',
+        'onmousewheel': 'mousewheel',
+        'onscroll': 'scroll',
+        'onselect': 'select',
+        'onchange': 'change',
+        'onfocus': 'focus',
+        'onblur': 'blur',
+        'onkeydown': 'keydown',
+        'onkeyup': 'keyup',
+        'onkeypress': 'keypress',
+        'oninput': 'input',
+    };
+    const INTERACTION_EVENTS = ['click', 'mousedown', 'mouseup', 'dblclick', 'input', 'mouseenter', 'mouseleave'];
+    const { doHighlightElements, focusHighlightIndex, viewportExpansion, debugMode, interactiveClassNames, alwaysHighlightFileInput, grayscaleImage, uniformityTolerance = 32, captureDebugSnapshots = false, onSnapshot, onLog, phase, elementData: inputElementData, } = args;
+    // Helper to stream logs if callback provided
+    const streamLog = (msg) => {
+        if (onLog)
+            onLog(msg);
+    };
+    streamLog(\`[dom-tree] Starting phase=\${phase || 'legacy'}, grayscaleImage=\${!!grayscaleImage}, captureDebugSnapshots=\${captureDebugSnapshots}\`);
+    const buttonClassNames = ['button', 'dropdown-toggle'];
+    const cursorPointerClassNames = ['cursor-pointer', 'tw-cursor-pointer', 'clickable'];
+    const heuristicClassPattern = /\\b(btn|const clickable|menu|item|entry|link)\\b/i;
+    const containerSelectors = 'button,a,[role="button"],.menu,.dropdown,.list,.toolbar';
+    let highlightIndex = 0; // Reset highlight index
+    /**
+     * Helper function to check if element has any of the specified class names.
+     */
+    function hasAnyClassName(element, classNames) {
+        if (!element.classList || !classNames || classNames.length === 0)
+            return false;
+        return classNames.some(className => element.classList.contains(className));
+    }
+    // Add caching mechanisms at the top level
+    const DOM_CACHE = {
+        boundingRects: new WeakMap(),
+        clientRects: new WeakMap(),
+        computedStyles: new WeakMap(),
+        nodeEventListeners: new WeakMap(),
+        clearCache: () => {
+            DOM_CACHE.boundingRects = new WeakMap();
+            DOM_CACHE.clientRects = new WeakMap();
+            DOM_CACHE.computedStyles = new WeakMap();
+            DOM_CACHE.nodeEventListeners = new WeakMap();
+        }
+    };
+    /**
+     * Gets the cached bounding rect for an element.
+     */
+    function getCachedBoundingRect(element) {
+        if (!element)
+            return null;
+        if (DOM_CACHE.boundingRects.has(element)) {
+            return DOM_CACHE.boundingRects.get(element);
+        }
+        const rect = element.getBoundingClientRect();
+        if (rect) {
+            DOM_CACHE.boundingRects.set(element, rect);
+        }
+        return rect;
+    }
+    /**
+     * Gets the cached computed style for an element.
+     */
+    function getCachedComputedStyle(element) {
+        if (!element)
+            return null;
+        if (DOM_CACHE.computedStyles.has(element)) {
+            return DOM_CACHE.computedStyles.get(element);
+        }
+        const style = window.getComputedStyle(element);
+        if (style) {
+            DOM_CACHE.computedStyles.set(element, style);
+        }
+        return style;
+    }
+    /**
+     * Gets the cached client rects for an element.
+     */
+    function getCachedClientRects(element) {
+        if (!element)
+            return null;
+        if (DOM_CACHE.clientRects.has(element)) {
+            return DOM_CACHE.clientRects.get(element);
+        }
+        const rects = element.getClientRects();
+        if (rects) {
+            DOM_CACHE.clientRects.set(element, rects);
+        }
+        return rects;
+    }
+    /**
+     * Gets the event listeners for a node.
+     */
+    function getNodeEventListeners(element) {
+        const set = new Set();
+        try {
+            if (typeof getEventListeners === 'function') {
+                const listeners = getEventListeners(element);
+                for (const eventType in listeners) {
+                    if (listeners[eventType] && listeners[eventType].length > 0) {
+                        set.add(eventType);
+                    }
+                }
+            }
+            const getEventListenersForNode = element?.ownerDocument?.defaultView?.getEventListenersForNode || window.getEventListenersForNode;
+            if (typeof getEventListenersForNode === 'function') {
+                const listeners = getEventListenersForNode(element);
+                for (const listener of listeners) {
+                    if (listener.type) {
+                        set.add(listener.type);
+                    }
+                }
+            }
+            for (const attr in EVENT_LISTENER_MAPPING) {
+                if (element.hasAttribute(attr) || typeof element[attr] === 'function') {
+                    set.add(EVENT_LISTENER_MAPPING[attr]);
+                }
+            }
+        }
+        catch (error) {
+            // Silently ignore errors
+        }
+        const listenedEvents = Array.from(set);
+        return listenedEvents;
+    }
+    function getCachedNodeEventListeners(element) {
+        if (!element)
+            return null;
+        if (DOM_CACHE.nodeEventListeners.has(element)) {
+            return DOM_CACHE.nodeEventListeners.get(element);
+        }
+        const listenedEvents = getNodeEventListeners(element);
+        if (listenedEvents) {
+            DOM_CACHE.nodeEventListeners.set(element, listenedEvents);
+        }
+        return listenedEvents;
+    }
+    // ============================================================================
+    // Action Intent Predicates
+    // ============================================================================
+    const CLICKABLE_TAGS = new Set(['a', 'button', 'summary', 'label', 'option', 'optgroup']);
+    const CLICKABLE_ROLES = new Set([
+        'button', 'link', 'menuitem', 'menuitemradio', 'menuitemcheckbox',
+        'radio', 'checkbox', 'tab', 'switch', 'option', 'treeitem'
+    ]);
+    const CLICK_EVENTS = ['click', 'mousedown', 'mouseup', 'dblclick'];
+    const TEXT_INPUT_TYPES = new Set([
+        'text', 'email', 'password', 'search', 'tel', 'url', 'number',
+        'date', 'datetime-local', 'month', 'week', 'time'
+    ]);
+    const INPUT_ROLES = new Set(['textbox', 'searchbox', 'spinbutton', 'combobox']);
+    /**
+     * Checks if an element matches the 'click' intent.
+     * Includes: buttons, links, elements with click handlers, clickable roles
+     */
+    function isClickIntentElement(element) {
+        const tagName = element.tagName.toLowerCase();
+        if (CLICKABLE_TAGS.has(tagName))
+            return true;
+        const role = element.getAttribute('role');
+        if (role && CLICKABLE_ROLES.has(role))
+            return true;
+        // Check for click event listeners
+        const listeners = getCachedNodeEventListeners(element);
+        if (listeners?.some(e => CLICK_EVENTS.includes(e)))
+            return true;
+        // Dropdown/popup triggers
+        if (element.getAttribute('aria-haspopup') ||
+            element.getAttribute('data-toggle') === 'dropdown')
+            return true;
+        return false;
+    }
+    /**
+     * Checks if an element matches the 'input' intent.
+     * Includes: text inputs, textareas, contenteditable elements
+     */
+    function isInputIntentElement(element) {
+        const tagName = element.tagName.toLowerCase();
+        if (tagName === 'textarea')
+            return true;
+        if (tagName === 'input') {
+            const type = element.type?.toLowerCase() || 'text';
+            return TEXT_INPUT_TYPES.has(type);
+        }
+        if (element.isContentEditable ||
+            element.getAttribute('contenteditable') === 'true')
+            return true;
+        const role = element.getAttribute('role');
+        return role ? INPUT_ROLES.has(role) : false;
+    }
+    /**
+     * Checks if an element matches the 'scroll' intent.
+     * Delegates to existing isElementScrollable function.
+     */
+    function isScrollIntentElement(element) {
+        // Note: isElementScrollable is defined later but hoisted due to function declaration
+        return isElementScrollable(element);
+    }
+    /**
+     * Checks if an element matches the specified action intent.
+     */
+    function matchesActionIntent(element, intent) {
+        if (intent === 'all')
+            return true;
+        if (intent === 'click')
+            return isClickIntentElement(element);
+        if (intent === 'input')
+            return isInputIntentElement(element);
+        if (intent === 'scroll')
+            return isScrollIntentElement(element);
+        return true;
+    }
+    /**
+     * Hash map of DOM nodes indexed by their highlight index.
+     */
+    const DOM_HASH_MAP = {};
+    const ID = { current: 0 };
+    const HIGHLIGHT_CONTAINER_ID = "playwright-highlight-container";
+    // Add a WeakMap cache for XPath strings
+    const xpathCache = new WeakMap();
+    const debugLogs = [];
+    const debugLog = (msg) => {
+        debugLogs.push(msg);
+    };
+    // ============================================================================
+    // Grayscale Image Label Placement (Dynamic Convolution)
+    // ============================================================================
+    /**
+     * 1D sliding window min/max using monotonic deque (Lemire algorithm).
+     * O(n) time complexity - each element is pushed and popped at most once.
+     *
+     * @param arr - Array of values
+     * @param k - Window size
+     * @returns Object with maxResults and minResults arrays
+     */
+    function slidingWindowMinMax(arr, k) {
+        if (k <= 0 || arr.length === 0 || k > arr.length) {
+            return { maxResults: [], minResults: [] };
+        }
+        const maxDeque = []; // Indices, values in descending order
+        const minDeque = []; // Indices, values in ascending order
+        const maxResults = [];
+        const minResults = [];
+        for (let i = 0; i < arr.length; i++) {
+            const val = arr[i];
+            // Update max deque - remove smaller elements from back
+            while (maxDeque.length > 0 && arr[maxDeque[maxDeque.length - 1]] <= val) {
+                maxDeque.pop();
+            }
+            maxDeque.push(i);
+            // Remove front if outside window
+            if (maxDeque[0] <= i - k)
+                maxDeque.shift();
+            // Update min deque - remove larger elements from back
+            while (minDeque.length > 0 && arr[minDeque[minDeque.length - 1]] >= val) {
+                minDeque.pop();
+            }
+            minDeque.push(i);
+            // Remove front if outside window
+            if (minDeque[0] <= i - k)
+                minDeque.shift();
+            // Record result once window is full
+            if (i >= k - 1) {
+                maxResults.push(arr[maxDeque[0]]);
+                minResults.push(arr[minDeque[0]]);
+            }
+        }
+        return { maxResults, minResults };
+    }
+    /**
+     * Compute 2D min/max over sliding windows within a bounded region.
+     * Uses two-pass decomposition: horizontal pass then vertical pass.
+     *
+     * @param image - Full grayscale image (2D array where image[y][x] is intensity 0-255)
+     * @param regionX - Starting X of the region to scan
+     * @param regionY - Starting Y of the region to scan
+     * @param regionWidth - Width of the region to scan
+     * @param regionHeight - Height of the region to scan
+     * @param labelWidth - Width of the label (kernel width)
+     * @param labelHeight - Height of the label (kernel height)
+     * @returns Object with windowMax and windowMin 2D arrays
+     */
+    function compute2DMinMaxInRegion(image, regionX, regionY, regionWidth, regionHeight, labelWidth, labelHeight) {
+        // Handle edge cases
+        if (regionWidth < labelWidth || regionHeight < labelHeight) {
+            return { windowMax: [], windowMin: [] };
+        }
+        const imageHeight = image.length;
+        const imageWidth = image[0]?.length || 0;
+        // Step 1: Horizontal pass - compute row-wise min/max for each row in region
+        const rowMax = [];
+        const rowMin = [];
+        for (let dy = 0; dy < regionHeight; dy++) {
+            const y = regionY + dy;
+            if (y < 0 || y >= imageHeight) {
+                // Out of bounds - use empty arrays
+                rowMax[dy] = [];
+                rowMin[dy] = [];
+                continue;
+            }
+            // Extract the row slice from the region
+            const rowSlice = [];
+            for (let dx = 0; dx < regionWidth; dx++) {
+                const x = regionX + dx;
+                // Use 0 for out of bounds pixels (they'll fail uniformity check)
+                rowSlice.push(x >= 0 && x < imageWidth ? (image[y][x] ?? 0) : 0);
+            }
+            const { maxResults, minResults } = slidingWindowMinMax(rowSlice, labelWidth);
+            rowMax[dy] = maxResults;
+            rowMin[dy] = minResults;
+        }
+        // Step 2: Vertical pass - compute column-wise min/max on intermediate buffers
+        const resultWidth = regionWidth - labelWidth + 1;
+        const resultHeight = regionHeight - labelHeight + 1;
+        if (resultWidth <= 0 || resultHeight <= 0) {
+            return { windowMax: [], windowMin: [] };
+        }
+        const windowMax = [];
+        const windowMin = [];
+        for (let x = 0; x < resultWidth; x++) {
+            // Extract column from intermediate buffers
+            const colMax = [];
+            const colMin = [];
+            for (let y = 0; y < regionHeight; y++) {
+                colMax.push(rowMax[y]?.[x] ?? 0);
+                colMin.push(rowMin[y]?.[x] ?? 255);
+            }
+            const { maxResults: colMaxResults } = slidingWindowMinMax(colMax, labelHeight);
+            const { minResults: colMinResults } = slidingWindowMinMax(colMin, labelHeight);
+            for (let y = 0; y < resultHeight; y++) {
+                if (!windowMax[y])
+                    windowMax[y] = [];
+                if (!windowMin[y])
+                    windowMin[y] = [];
+                windowMax[y][x] = colMaxResults[y] ?? 0;
+                windowMin[y][x] = colMinResults[y] ?? 255;
+            }
+        }
+        return { windowMax, windowMin };
+    }
+    /**
+     * Draw a border on the grayscale image.
+     * Used to mark element bounding boxes after they've been processed.
+     *
+     * @param image - Grayscale image (modified in place)
+     * @param x - Left edge of the border
+     * @param y - Top edge of the border
+     * @param width - Width of the bordered region
+     * @param height - Height of the bordered region
+     * @param borderWidth - Width of the border in pixels (default 2)
+     * @param borderColor - Gray value for the border (default 128)
+     */
+    function drawBorderOnImage(image, x, y, width, height, borderWidth = 2, borderColor = 128) {
+        const imageHeight = image.length;
+        const imageWidth = image[0]?.length || 0;
+        const x1 = Math.floor(x);
+        const y1 = Math.floor(y);
+        const x2 = Math.floor(x + width);
+        const y2 = Math.floor(y + height);
+        // Top edge
+        for (let dy = 0; dy < borderWidth; dy++) {
+            const py = y1 + dy;
+            if (py >= 0 && py < imageHeight) {
+                for (let px = x1; px < x2; px++) {
+                    if (px >= 0 && px < imageWidth) {
+                        image[py][px] = borderColor;
+                    }
+                }
+            }
+        }
+        // Bottom edge
+        for (let dy = 0; dy < borderWidth; dy++) {
+            const py = y2 - 1 - dy;
+            if (py >= 0 && py < imageHeight) {
+                for (let px = x1; px < x2; px++) {
+                    if (px >= 0 && px < imageWidth) {
+                        image[py][px] = borderColor;
+                    }
+                }
+            }
+        }
+        // Left edge (excluding corners)
+        for (let py = y1 + borderWidth; py < y2 - borderWidth; py++) {
+            if (py >= 0 && py < imageHeight) {
+                for (let dx = 0; dx < borderWidth; dx++) {
+                    const px = x1 + dx;
+                    if (px >= 0 && px < imageWidth) {
+                        image[py][px] = borderColor;
+                    }
+                }
+            }
+        }
+        // Right edge (excluding corners)
+        for (let py = y1 + borderWidth; py < y2 - borderWidth; py++) {
+            if (py >= 0 && py < imageHeight) {
+                for (let dx = 0; dx < borderWidth; dx++) {
+                    const px = x2 - 1 - dx;
+                    if (px >= 0 && px < imageWidth) {
+                        image[py][px] = borderColor;
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Mark a region as occupied with a striped pattern (0, 255, 0, 255...).
+     * This guarantees max - min = 255 > tolerance, blocking any future label placement.
+     *
+     * Called after an element is done processing (bbox + label placed).
+     *
+     * @param image - Grayscale image (modified in place)
+     * @param x1 - Left edge of element bbox
+     * @param y1 - Top edge of element bbox
+     * @param x2 - Right edge of element bbox
+     * @param y2 - Bottom edge of element bbox
+     * @param labelX - Label top-left X
+     * @param labelY - Label top-left Y
+     * @param labelW - Label width
+     * @param labelH - Label height
+     */
+    function markRegionAsOccupied(image, x1, y1, x2, y2, labelX, labelY, labelW, labelH) {
+        const imageHeight = image.length;
+        const imageWidth = image[0]?.length || 0;
+        // Compute combined region (element + label)
+        const minX = Math.floor(Math.min(x1, labelX));
+        const minY = Math.floor(Math.min(y1, labelY));
+        const maxX = Math.floor(Math.max(x2, labelX + labelW));
+        const maxY = Math.floor(Math.max(y2, labelY + labelH));
+        // Fill with interleaving 0, 255 pattern to guarantee non-uniformity
+        for (let py = minY; py < maxY; py++) {
+            if (py >= 0 && py < imageHeight) {
+                for (let px = minX; px < maxX; px++) {
+                    if (px >= 0 && px < imageWidth) {
+                        image[py][px] = ((px + py) % 2 === 0) ? 0 : 255;
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Find a valid label position using dynamic convolution on grayscale image.
+     *
+     * Algorithm:
+     * 1. Define candidate region based on element bbox and label dimensions
+     * 2. Compute 2D min/max over the region using sliding window
+     * 3. Find first position where max - min <= tolerance (uniform region)
+     * 4. Return that position or fallback
+     *
+     * @param elementRect - The element's bounding rect
+     * @param labelW - Label width in pixels
+     * @param labelH - Label height in pixels
+     * @returns Position { x, y } for label top-left corner and whether grayscale was used
+     */
+    function findLabelPosition(elementRect, labelW, labelH) {
+        // If no grayscale image available, return fallback
+        if (!grayscaleImage || grayscaleImage.length === 0) {
+            return {
+                x: Math.max(0, elementRect.x),
+                y: Math.max(0, elementRect.y),
+                usedGrayscale: false,
+            };
+        }
+        const imageHeight = grayscaleImage.length;
+        const imageWidth = grayscaleImage[0]?.length || 0;
+        if (imageWidth === 0) {
+            return {
+                x: Math.max(0, elementRect.x),
+                y: Math.max(0, elementRect.y),
+                usedGrayscale: false,
+            };
+        }
+        const { x: X, y: Y, width: N, height: M } = elementRect;
+        const x1 = Math.floor(X);
+        const y1 = Math.floor(Y);
+        const x2 = Math.floor(X + N);
+        const y2 = Math.floor(Y + M);
+        // Define candidate region:
+        // Label can be placed from (x1 - labelW, y1 - labelH) to (x2, y2)
+        // This ensures label can touch any edge of the element
+        // +1 on right/bottom to allow labels adjacent to (not overlapping) the border
+        const regionX = Math.max(0, x1 - labelW);
+        const regionY = Math.max(0, y1 - labelH);
+        const regionX2 = Math.min(imageWidth, x2 + labelW);
+        const regionY2 = Math.min(imageHeight, y2 + labelH);
+        const regionWidth = regionX2 - regionX;
+        const regionHeight = regionY2 - regionY;
+        // Compute 2D min/max for the candidate region
+        const { windowMax, windowMin } = compute2DMinMaxInRegion(grayscaleImage, regionX, regionY, regionWidth, regionHeight, labelW, labelH);
+        if (windowMax.length === 0 || windowMin.length === 0) {
+            // Region too small for label, use fallback
+            const fallbackX = Math.max(0, Math.min(imageWidth - labelW, x2 - labelW));
+            const fallbackY = Math.max(0, y1 - labelH);
+            return { x: fallbackX, y: fallbackY, usedGrayscale: true };
+        }
+        // Search for a uniform position (max - min <= tolerance)
+        // Prefer positions near element center
+        const resultHeight = windowMax.length;
+        const resultWidth = windowMax[0]?.length || 0;
+        // Calculate center of candidate region (in result coordinates)
+        const centerResultX = Math.floor(resultWidth / 2);
+        const centerResultY = Math.floor(resultHeight / 2);
+        // BFS from center to find nearest uniform position
+        const visited = new Set();
+        const queue = [{ rx: centerResultX, ry: centerResultY }];
+        while (queue.length > 0) {
+            const pos = queue.shift();
+            const key = \`\${pos.rx},\${pos.ry}\`;
+            if (visited.has(key))
+                continue;
+            visited.add(key);
+            // Skip if already visited too many positions (performance limit)
+            if (visited.size > 5000)
+                break;
+            // Check bounds
+            if (pos.rx < 0 || pos.rx >= resultWidth || pos.ry < 0 || pos.ry >= resultHeight)
+                continue;
+            // Convert result coordinates to absolute image coordinates
+            const absX = regionX + pos.rx;
+            const absY = regionY + pos.ry;
+            // Check uniformity: max - min <= tolerance
+            const maxVal = windowMax[pos.ry]?.[pos.rx] ?? 255;
+            const minVal = windowMin[pos.ry]?.[pos.rx] ?? 0;
+            const diff = maxVal - minVal;
+            if (diff <= uniformityTolerance) {
+                // Uniform position found!
+                return { x: absX, y: absY, usedGrayscale: true };
+            }
+            // Position not uniform, keep searching
+            queue.push({ rx: pos.rx - 1, ry: pos.ry });
+            queue.push({ rx: pos.rx + 1, ry: pos.ry });
+            queue.push({ rx: pos.rx, ry: pos.ry - 1 });
+            queue.push({ rx: pos.rx, ry: pos.ry + 1 });
+        }
+        // No uniform position found - fallback to outside element (top-right)
+        const fallbackX = Math.max(0, Math.min(imageWidth - labelW, x2 - labelW));
+        const fallbackY = Math.max(0, y1 - labelH);
+        return { x: fallbackX, y: fallbackY, usedGrayscale: true };
+    }
+    /**
+     * Mark both the element and label region as occupied after processing.
+     * This prevents future labels from overlapping with already-labeled elements.
+     *
+     * In post-order traversal, children are labeled first. By marking the combined
+     * region as occupied, we ensure parent labels don't cross child element areas.
+     */
+    function markElementAndLabelAsOccupied(elementRect, labelX, labelY, labelW, labelH) {
+        if (!grayscaleImage)
+            return;
+        const { x, y, width, height } = elementRect;
+        markRegionAsOccupied(grayscaleImage, Math.floor(x), Math.floor(y), Math.floor(x + width), Math.floor(y + height), Math.floor(labelX), Math.floor(labelY), labelW, labelH);
+    }
+    const elementsToHighlight = [];
+    /**
+     * Reorder elements for post-order traversal (children before parents).
+     * This ensures child elements get their labels placed before their parent containers.
+     *
+     * Builds a tree based on actual DOM ancestry between highlighted elements,
+     * not the layout parent grouping used for flow detection.
+     */
+    function getPostOrderElements(elements) {
+        if (elements.length === 0)
+            return [];
+        // Build set of highlighted elements for quick lookup
+        const highlightedSet = new Set();
+        for (const info of elements) {
+            highlightedSet.add(info.element);
+        }
+        // For each element, find its nearest highlighted ancestor (if any)
+        // This builds a tree of highlighted elements based on DOM ancestry
+        const childrenOfHighlighted = new Map();
+        for (const info of elements) {
+            let highlightedParent = null;
+            let current = info.element.parentElement;
+            // Walk up the DOM to find nearest highlighted ancestor
+            while (current && current !== document.body) {
+                if (highlightedSet.has(current)) {
+                    highlightedParent = current;
+                    break;
+                }
+                current = current.parentElement;
+            }
+            // Group elements by their highlighted parent
+            if (!childrenOfHighlighted.has(highlightedParent)) {
+                childrenOfHighlighted.set(highlightedParent, []);
+            }
+            childrenOfHighlighted.get(highlightedParent).push(info.element);
+        }
+        // Build element -> ElementToHighlight lookup
+        const elementToInfo = new Map();
+        for (const info of elements) {
+            elementToInfo.set(info.element, info);
+        }
+        // Recursive post-order collection
+        const result = [];
+        const visited = new Set();
+        function visit(element) {
+            if (visited.has(element))
+                return;
+            visited.add(element);
+            // First, visit all highlighted children (post-order: children before parent)
+            const children = childrenOfHighlighted.get(element) || [];
+            for (const child of children) {
+                visit(child);
+            }
+            // Then add this element
+            const info = elementToInfo.get(element);
+            if (info)
+                result.push(info);
+        }
+        // Start from roots (elements with no highlighted parent)
+        const roots = childrenOfHighlighted.get(null) || [];
+        for (const root of roots) {
+            visit(root);
+        }
+        return result;
+    }
+    /**
+     * Process elements in recursive tree order:
+     * - Pre-order: Create bounding boxes and mark in hot map
+     * - Post-order: Create labels and mark in hot map
+     *
+     * This ensures children's boxes are visible before parent places its label,
+     * and children's labels are placed before parent's label.
+     */
+    // Collected element data during boxes phase, for return
+    const collectedElementData = [];
+    function processElementTreeRecursively(elements) {
+        if (elements.length === 0)
+            return;
+        // Build tree structure based on DOM ancestry (same as getPostOrderElements)
+        const highlightedSet = new Set();
+        for (const info of elements) {
+            highlightedSet.add(info.element);
+        }
+        const childrenOfHighlighted = new Map();
+        for (const info of elements) {
+            let highlightedParent = null;
+            let current = info.element.parentElement;
+            while (current && current !== document.body) {
+                if (highlightedSet.has(current)) {
+                    highlightedParent = current;
+                    break;
+                }
+                current = current.parentElement;
+            }
+            if (!childrenOfHighlighted.has(highlightedParent)) {
+                childrenOfHighlighted.set(highlightedParent, []);
+            }
+            childrenOfHighlighted.get(highlightedParent).push(info.element);
+        }
+        // Build element -> ElementToHighlight lookup
+        const elementToInfo = new Map();
+        for (const info of elements) {
+            elementToInfo.set(info.element, info);
+        }
+        // Get or create highlight container
+        let container = document.getElementById(HIGHLIGHT_CONTAINER_ID);
+        if (!container) {
+            container = document.createElement("div");
+            container.id = HIGHLIGHT_CONTAINER_ID;
+            container.style.position = "fixed";
+            container.style.pointerEvents = "none";
+            container.style.top = "0";
+            container.style.left = "0";
+            container.style.width = "100%";
+            container.style.height = "100%";
+            container.style.zIndex = "2147483647";
+            container.style.backgroundColor = 'transparent';
+            document.body.appendChild(container);
+        }
+        // Store element info after box creation for later label creation
+        const renderInfoMap = new Map();
+        // Recursive function that processes elements in correct order
+        function processElement(element) {
+            const info = elementToInfo.get(element);
+            if (!info)
+                return;
+            // === PRE-ORDER: Create bounding box ===
+            const renderInfo = createBoundingBoxForElement(info.element, info.index, info.parentIframe, container);
+            if (renderInfo) {
+                renderInfoMap.set(element, renderInfo);
+                // In boxes phase, collect element data for return (no grayscale drawing needed)
+                if (phase === 'boxes') {
+                    collectedElementData.push({
+                        index: renderInfo.index,
+                        xpath: getXPathTree(info.element),
+                        rect: { ...renderInfo.elementRect },
+                        color: renderInfo.color,
+                    });
+                }
+                // In legacy mode (no phase), draw border on grayscale image
+                // This ensures child labels don't get placed crossing this element's border
+                if (!phase && grayscaleImage) {
+                    drawBorderOnImage(grayscaleImage, renderInfo.elementRect.x, renderInfo.elementRect.y, renderInfo.elementRect.width, renderInfo.elementRect.height, 2, // borderWidth
+                    128 // borderColor (mid-gray to break uniformity)
+                    );
+                }
+            }
+            // === RECURSE: Process children ===
+            const children = childrenOfHighlighted.get(element) || [];
+            for (const child of children) {
+                processElement(child);
+            }
+            // === POST-ORDER: Create label (skip in boxes phase) ===
+            if (renderInfo && phase !== 'boxes') {
+                createLabelForElement(renderInfo);
+            }
+        }
+        // Process roots (elements with no highlighted parent)
+        const roots = childrenOfHighlighted.get(null) || [];
+        for (const root of roots) {
+            processElement(root);
+        }
+    }
+    /**
+     * Process labels phase using pre-collected element data.
+     * Called when phase === 'labels' with inputElementData.
+     */
+    function processLabelsPhase() {
+        if (!inputElementData || inputElementData.length === 0)
+            return;
+        streamLog(\`[dom-tree] Labels phase: processing \${inputElementData.length} elements\`);
+        // Get or create highlight container (should already exist from boxes phase)
+        let container = document.getElementById(HIGHLIGHT_CONTAINER_ID);
+        if (!container) {
+            container = document.createElement("div");
+            container.id = HIGHLIGHT_CONTAINER_ID;
+            container.style.position = "fixed";
+            container.style.pointerEvents = "none";
+            container.style.top = "0";
+            container.style.left = "0";
+            container.style.width = "100%";
+            container.style.height = "100%";
+            container.style.zIndex = "2147483647";
+            container.style.backgroundColor = 'transparent';
+            document.body.appendChild(container);
+        }
+        // Sort by index to maintain correct order
+        const sortedData = [...inputElementData].sort((a, b) => a.index - b.index);
+        // Create labels for each element
+        for (const data of sortedData) {
+            const renderInfo = {
+                element: null, // Not needed for label creation
+                index: data.index,
+                parentIframe: null,
+                elementRect: data.rect,
+                color: data.color,
+                container,
+            };
+            createLabelForElement(renderInfo);
+        }
+    }
+    /**
+     * Create bounding box overlays for an element and append to container.
+     * Returns element render info for later label creation.
+     */
+    function createBoundingBoxForElement(element, index, parentIframe, container) {
+        if (!element)
+            return null;
+        // Get element client rects
+        let rects = element.getClientRects();
+        if (!rects || rects.length === 0)
+            return null;
+        // Transform rects if inside an iframe
+        if (parentIframe) {
+            const transformedRects = [];
+            const iframeRect = parentIframe.getBoundingClientRect();
+            const iframeStyle = window.getComputedStyle(parentIframe);
+            const borderLeft = parseFloat(iframeStyle.borderLeftWidth) || 0;
+            const borderTop = parseFloat(iframeStyle.borderTopWidth) || 0;
+            const paddingLeft = parseFloat(iframeStyle.paddingLeft) || 0;
+            const paddingTop = parseFloat(iframeStyle.paddingTop) || 0;
+            const contentOffsetX = borderLeft + paddingLeft;
+            const contentOffsetY = borderTop + paddingTop;
+            let scaleX = 1, scaleY = 1;
+            const transform = iframeStyle.transform;
+            if (transform && transform !== 'none') {
+                const scaleMatch = transform.match(/scale\\(([^)]+)\\)/);
+                if (scaleMatch) {
+                    const scaleValues = scaleMatch[1].split(',').map(v => parseFloat(v.trim()));
+                    scaleX = scaleValues[0] || 1;
+                    scaleY = scaleValues[1] || scaleX;
+                }
+                else {
+                    const matrixMatch = transform.match(/matrix\\(([^)]+)\\)/);
+                    if (matrixMatch) {
+                        const values = matrixMatch[1].split(',').map(v => parseFloat(v.trim()));
+                        if (values.length >= 6) {
+                            scaleX = values[0];
+                            scaleY = values[3];
+                        }
+                    }
+                }
+            }
+            let scrollLeft = 0, scrollTop = 0;
+            try {
+                const iframeDoc = parentIframe.contentDocument || parentIframe.contentWindow?.document;
+                if (iframeDoc) {
+                    scrollLeft = iframeDoc.documentElement?.scrollLeft || iframeDoc.body?.scrollLeft || 0;
+                    scrollTop = iframeDoc.documentElement?.scrollTop || iframeDoc.body?.scrollTop || 0;
+                }
+            }
+            catch (e) {
+                console.warn("Cannot access iframe scroll position:", e);
+            }
+            for (const rect of rects) {
+                const scaledWidth = rect.width * scaleX;
+                const scaledHeight = rect.height * scaleY;
+                const scaledTop = rect.top * scaleY;
+                const scaledLeft = rect.left * scaleX;
+                const scaledScrollTop = scrollTop * scaleY;
+                const scaledScrollLeft = scrollLeft * scaleX;
+                transformedRects.push({
+                    top: scaledTop + iframeRect.top + contentOffsetY - scaledScrollTop,
+                    left: scaledLeft + iframeRect.left + contentOffsetX - scaledScrollLeft,
+                    bottom: scaledTop + scaledHeight + iframeRect.top + contentOffsetY - scaledScrollTop,
+                    right: scaledLeft + scaledWidth + iframeRect.left + contentOffsetX - scaledScrollLeft,
+                    width: scaledWidth,
+                    height: scaledHeight,
+                    x: scaledLeft + iframeRect.left + contentOffsetX - scaledScrollLeft,
+                    y: scaledTop + iframeRect.top + contentOffsetY - scaledScrollTop
+                });
+            }
+            rects = transformedRects;
+        }
+        // Generate color based on index
+        const colors = [
+            "#E53935", "#1E88E5", "#7B1FA2", "#00897B", "#F4511E",
+            "#3949AB", "#C2185B", "#00796B", "#5E35B1", "#D81B60",
+            "#039BE5", "#388E3C"
+        ];
+        const color = colors[index % colors.length];
+        // Create bounding box overlays
+        for (const rect of rects) {
+            if (rect.width === 0 || rect.height === 0)
+                continue;
+            const overlay = document.createElement("div");
+            overlay.style.position = "fixed";
+            overlay.style.border = \`1px solid \${color}\`;
+            overlay.style.backgroundColor = "none";
+            overlay.style.pointerEvents = "none";
+            overlay.style.boxSizing = "border-box";
+            overlay.setAttribute("data-element-index", String(index));
+            overlay.style.top = \`\${rect.top}px\`;
+            overlay.style.left = \`\${rect.left}px\`;
+            overlay.style.width = \`\${rect.width}px\`;
+            overlay.style.height = \`\${rect.height}px\`;
+            container.appendChild(overlay);
+        }
+        // Return element info for label creation
+        const firstRect = rects[0];
+        return {
+            element,
+            index,
+            parentIframe,
+            elementRect: {
+                x: firstRect.left,
+                y: firstRect.top,
+                width: firstRect.width,
+                height: firstRect.height
+            },
+            color,
+            container
+        };
+    }
+    /**
+     * Create and position label for an element and append to container.
+     */
+    function createLabelForElement(renderInfo) {
+        const { index, elementRect, color, container } = renderInfo;
+        // Capture BEFORE snapshot if debug mode enabled (stream via callback)
+        streamLog(\`[dom-tree] Element \${index}: captureDebugSnapshots=\${captureDebugSnapshots}, hasGrayscale=\${!!grayscaleImage}, hasOnSnapshot=\${!!onSnapshot}\`);
+        if (captureDebugSnapshots && grayscaleImage && onSnapshot) {
+            streamLog(\`[dom-tree] Calling onSnapshot for element \${index} (before)\`);
+            onSnapshot({ elementIndex: index, type: 'before', data: grayscaleImage.map(row => [...row]) });
+        }
+        // Calculate label dimensions based on digit count
+        const digits = index.toString().length;
+        const labelWidth = (digits * 8) + 8;
+        const labelHeight = 16;
+        // Find label position using grayscale image or fallback to heuristics
+        let labelTop = 0;
+        let labelLeft = 0;
+        const grayscaleResult = findLabelPosition(elementRect, labelWidth, labelHeight);
+        if (grayscaleResult.usedGrayscale) {
+            labelTop = grayscaleResult.y;
+            labelLeft = grayscaleResult.x;
+        }
+        else {
+            // Fallback to heuristic positioning (assume vertical flow)
+            const isNarrow = elementRect.width <= 32;
+            const centerX = elementRect.x + elementRect.width / 2;
+            let positions;
+            if (isNarrow) {
+                positions = [
+                    { top: elementRect.y + (elementRect.height - labelHeight) / 2, anchorX: elementRect.x, hAlign: 'right', name: 'left' },
+                    { top: elementRect.y + (elementRect.height - labelHeight) / 2, anchorX: elementRect.x + elementRect.width, hAlign: 'left', name: 'right' },
+                    { top: elementRect.y - labelHeight, anchorX: centerX, hAlign: 'center', name: 'top' },
+                    { top: elementRect.y + elementRect.height, anchorX: centerX, hAlign: 'center', name: 'bottom' },
+                ];
+            }
+            else {
+                positions = [
+                    { top: elementRect.y + (elementRect.height - labelHeight) / 2, anchorX: elementRect.x, hAlign: 'right', name: 'left' },
+                    { top: elementRect.y + (elementRect.height - labelHeight) / 2, anchorX: elementRect.x + elementRect.width, hAlign: 'left', name: 'right' },
+                    { top: elementRect.y - labelHeight, anchorX: elementRect.x + elementRect.width, hAlign: 'right', name: 'top-right' },
+                    { top: elementRect.y - labelHeight, anchorX: elementRect.x, hAlign: 'left', name: 'top-left' },
+                ];
+            }
+            // Use first position as default
+            const pos = positions[0];
+            labelTop = Math.max(0, Math.min(pos.top, window.innerHeight - labelHeight));
+            if (pos.hAlign === 'right') {
+                labelLeft = pos.anchorX - labelWidth;
+            }
+            else if (pos.hAlign === 'center') {
+                labelLeft = pos.anchorX - labelWidth / 2;
+            }
+            else {
+                labelLeft = pos.anchorX;
+            }
+            labelLeft = Math.max(0, Math.min(labelLeft, window.innerWidth - labelWidth));
+        }
+        // Always mark the label position on grayscale image to prevent future overlaps
+        markElementAndLabelAsOccupied(elementRect, labelLeft, labelTop, labelWidth, labelHeight);
+        // Capture AFTER snapshot if debug mode enabled (stream via callback)
+        if (captureDebugSnapshots && grayscaleImage && onSnapshot) {
+            streamLog(\`[dom-tree] Calling onSnapshot for element \${index} (after)\`);
+            onSnapshot({ elementIndex: index, type: 'after', data: grayscaleImage.map(row => [...row]) });
+        }
+        // Create label element with explicit dimensions matching theoretical calculation
+        const label = document.createElement("div");
+        label.className = "playwright-highlight-label";
+        label.style.position = "fixed";
+        label.style.background = color;
+        label.style.color = "white";
+        label.style.padding = "1px 4px";
+        label.style.fontSize = "12px";
+        label.style.width = \`\${labelWidth}px\`;
+        label.style.height = \`\${labelHeight}px\`;
+        label.style.boxSizing = "border-box";
+        label.style.textAlign = "center";
+        label.style.lineHeight = \`\${labelHeight - 2}px\`;
+        label.textContent = String(index);
+        label.setAttribute("data-element-index", String(index));
+        label.style.top = \`\${labelTop}px\`;
+        label.style.left = \`\${labelLeft}px\`;
+        container.appendChild(label);
+    }
+    /**
+     * Build tree entries for debug output showing element hierarchy.
+     *
+     * The tree collapses single-child chains: if A contains only B, which contains only C (highlighted),
+     * then A, B, C collapse into just C.
+     *
+     * Parents are only included if they have more than one highlighted descendant.
+     */
+    function buildTreeEntries() {
+        const treeEntries = [];
+        if (elementsToHighlight.length === 0)
+            return treeEntries;
+        // For each highlighted element, find all ancestors and count highlighted descendants
+        const ancestorCounts = new Map();
+        for (const { element } of elementsToHighlight) {
+            let current = element.parentElement;
+            while (current && current !== document.body) {
+                ancestorCounts.set(current, (ancestorCounts.get(current) || 0) + 1);
+                current = current.parentElement;
+            }
+        }
+        // Build tree structure: map each element to its layout parent
+        const childrenMap = new Map(); // parent -> children
+        for (const { element } of elementsToHighlight) {
+            let layoutParent = null;
+            let current = element.parentElement;
+            while (current && current !== document.body) {
+                const count = ancestorCounts.get(current) || 0;
+                if (count > 1) {
+                    layoutParent = current;
+                    break;
+                }
+                current = current.parentElement;
+            }
+            // Group children by parent
+            if (!childrenMap.has(layoutParent)) {
+                childrenMap.set(layoutParent, []);
+            }
+            childrenMap.get(layoutParent).push(element);
+        }
+        // Output tree structure to debug logs and build tree entries
+        const elementToIndex = new Map();
+        for (const { element, index } of elementsToHighlight) {
+            elementToIndex.set(element, index);
+        }
+        const describeElement = (el) => {
+            const tag = el.tagName.toLowerCase();
+            const id = el.id ? \`#\${el.id}\` : '';
+            const cls = el.className && typeof el.className === 'string'
+                ? '.' + el.className.split(' ').slice(0, 2).join('.')
+                : '';
+            return \`<\${tag}\${id}\${cls.slice(0, 30)}>\`;
+        };
+        debugLog(\`[Tree] Detected elements tree:\`);
+        // Get unique layout parents and sort by DOM order
+        const parents = Array.from(childrenMap.keys());
+        for (const parent of parents) {
+            const children = childrenMap.get(parent) || [];
+            const parentDesc = parent ? describeElement(parent) : '(root)';
+            debugLog(\`[Tree] \${parentDesc}\`);
+            // Add parent entry to tree
+            treeEntries.push({
+                type: 'parent',
+                label: parentDesc,
+            });
+            for (const child of children) {
+                const idx = elementToIndex.get(child) ?? -1;
+                debugLog(\`[Tree]   [\${idx}] \${describeElement(child)}\`);
+                // Add element entry to tree
+                treeEntries.push({
+                    type: 'element',
+                    highlightIndex: idx,
+                    label: describeElement(child),
+                });
+            }
+        }
+        return treeEntries;
+    }
+    /**
+     * Gets the position of an element in its parent.
+     */
+    function getElementPosition(currentElement) {
+        if (!currentElement.parentElement) {
+            return 0; // No parent means no siblings
+        }
+        const tagName = currentElement.nodeName.toLowerCase();
+        const siblings = Array.from(currentElement.parentElement.children)
+            .filter((sib) => sib.nodeName.toLowerCase() === tagName);
+        if (siblings.length === 1) {
+            return 0; // Only element of its type
+        }
+        const index = siblings.indexOf(currentElement) + 1; // 1-based index
+        return index;
+    }
+    function getXPathTree(element, stopAtBoundary = true) {
+        if (xpathCache.has(element))
+            return xpathCache.get(element);
+        const segments = [];
+        let currentElement = element;
+        while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE) {
+            // Stop if we hit a shadow root or iframe
+            if (stopAtBoundary &&
+                (currentElement.parentNode instanceof ShadowRoot ||
+                    currentElement.parentNode instanceof HTMLIFrameElement)) {
+                break;
+            }
+            const position = getElementPosition(currentElement);
+            const tagName = currentElement.nodeName.toLowerCase();
+            const xpathIndex = position > 0 ? \`[\${position}]\` : "";
+            segments.unshift(\`\${tagName}\${xpathIndex}\`);
+            currentElement = currentElement.parentNode;
+        }
+        const result = segments.join("/");
+        xpathCache.set(element, result);
+        return result;
+    }
+    /**
+     * Checks if a text node is visible.
+     */
+    function isTextNodeVisible(textNode) {
+        try {
+            // Special case: when viewportExpansion is -1, consider all text nodes as visible
+            if (viewportExpansion === -1) {
+                // Still check parent visibility for basic filtering
+                const parentElement = textNode.parentElement;
+                if (!parentElement)
+                    return false;
+                try {
+                    return parentElement.checkVisibility({
+                        checkOpacity: true,
+                        checkVisibilityCSS: true,
+                    });
+                }
+                catch (e) {
+                    // Fallback if checkVisibility is not supported
+                    const style = window.getComputedStyle(parentElement);
+                    return style.display !== 'none' &&
+                        style.visibility !== 'hidden' &&
+                        style.opacity !== '0';
+                }
+            }
+            const range = document.createRange();
+            range.selectNodeContents(textNode);
+            const rects = range.getClientRects(); // Use getClientRects for Range
+            if (!rects || rects.length === 0) {
+                return false;
+            }
+            let isAnyRectVisible = false;
+            let isAnyRectInViewport = false;
+            for (const rect of rects) {
+                // Check size
+                if (rect.width > 0 && rect.height > 0) {
+                    isAnyRectVisible = true;
+                    // Viewport check for this rect
+                    if (!(rect.bottom < -viewportExpansion ||
+                        rect.top > window.innerHeight + viewportExpansion ||
+                        rect.right < -viewportExpansion ||
+                        rect.left > window.innerWidth + viewportExpansion)) {
+                        isAnyRectInViewport = true;
+                        break; // Found a visible rect in viewport, no need to check others
+                    }
+                }
+            }
+            if (!isAnyRectVisible || !isAnyRectInViewport) {
+                return false;
+            }
+            // Check parent visibility
+            const parentElement = textNode.parentElement;
+            if (!parentElement)
+                return false;
+            try {
+                return parentElement.checkVisibility({
+                    checkOpacity: true,
+                    checkVisibilityCSS: true,
+                });
+            }
+            catch (e) {
+                // Fallback if checkVisibility is not supported
+                const style = window.getComputedStyle(parentElement);
+                return style.display !== 'none' &&
+                    style.visibility !== 'hidden' &&
+                    style.opacity !== '0';
+            }
+        }
+        catch (e) {
+            console.warn('Error checking text node visibility:', e);
+            return false;
+        }
+    }
+    /**
+     * Checks if an element is accepted.
+     */
+    function isElementAccepted(element) {
+        if (!element || !element.tagName)
+            return false;
+        // Always accept body and common container elements
+        const alwaysAccept = new Set([
+            "body", "div", "main", "article", "section", "nav", "header", "footer"
+        ]);
+        const tagName = element.tagName.toLowerCase();
+        if (alwaysAccept.has(tagName))
+            return true;
+        const leafElementDenyList = new Set([
+            "svg",
+            "script",
+            "style",
+            "link",
+            "meta",
+            "noscript",
+            "template",
+        ]);
+        return !leafElementDenyList.has(tagName);
+    }
+    /**
+     * Checks if an element is visible.
+     */
+    function isElementVisible(element) {
+        if (alwaysHighlightFileInput && element.tagName.toLowerCase() === "input" && element.type === "file")
+            return true;
+        // SVG elements need special handling for visibility
+        if (element.tagName.toLowerCase() === "svg") {
+            const rect = getCachedBoundingRect(element);
+            const style = getCachedComputedStyle(element);
+            return (rect !== null &&
+                rect.width > 0 &&
+                rect.height > 0 &&
+                style?.visibility !== "hidden" &&
+                style?.display !== "none");
+        }
+        const style = getCachedComputedStyle(element);
+        return (element.offsetWidth > 0 &&
+            element.offsetHeight > 0 &&
+            style?.visibility !== "hidden" &&
+            style?.display !== "none");
+    }
+    /**
+     * Checks if an element is clickable (responds to click events).
+     */
+    function shouldMarkAsClickable(element) {
+        if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+            return false;
+        }
+        const tagName = element.tagName.toLowerCase();
+        // Primarily clickable elements
+        const primaryClickableElements = new Set([
+            "a", // Links
+            "button", // Buttons
+            "summary", // Summary element (clickable part of details)
+            "label", // Form labels (often clickable)
+            "option", // Select options
+            "optgroup", // Option groups
+        ]);
+        if (primaryClickableElements.has(tagName)) {
+            return false;
+        }
+        const role = element.getAttribute("role");
+        // Clickable roles
+        const clickableRoles = new Set([
+            'button', // Directly clickable element
+            'link', // Clickable link
+            'menuitem', // Clickable menu item
+            'menuitemradio', // Radio-style menu item (selectable)
+            'menuitemcheckbox', // Checkbox-style menu item (toggleable)
+            'radio', // Radio button (selectable)
+            'checkbox', // Checkbox (toggleable)
+            'tab', // Tab (clickable to switch content)
+            'switch', // Toggle switch (clickable to change state)
+            'option', // Selectable option in a list
+        ]);
+        if (role && clickableRoles.has(role)) {
+            return true;
+        }
+        // Check for dropdown indicators
+        if (hasAnyClassName(element, buttonClassNames)) {
+            return true; // Return true for dropdown elements
+        }
+        if (element.getAttribute('data-toggle') === 'dropdown' ||
+            element.getAttribute('aria-haspopup')) {
+            return true;
+        }
+        const clickEvents = ['click', 'mousedown', 'mouseup', 'dblclick'];
+        const listenedEvents = getCachedNodeEventListeners(element);
+        if (listenedEvents && listenedEvents.length > 0) {
+            for (const eventType of clickEvents) {
+                if (listenedEvents.includes(eventType)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Checks if an element is interactive.
+     *
+     * lots of comments, and uncommented code - to show the logic of what we already tried
+     *
+     * One of the things we tried at the beginning was also to use event listeners, and other fancy class, style stuff -> what actually worked best was just combining most things with computed cursor style :)
+     */
+    function isInteractiveElement(element) {
+        if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+            return false;
+        }
+        // Cache the tagName and style lookups
+        const tagName = element.tagName.toLowerCase();
+        const style = getCachedComputedStyle(element);
+        // Define interactive cursors
+        const interactiveCursors = new Set([
+            'pointer', // Link/clickable elements
+            'move', // Movable elements
+            'text', // Text selection
+            'grab', // Grabbable elements
+            'grabbing', // Currently grabbing
+            'cell', // Table cell selection
+            'copy', // Copy operation
+            'alias', // Alias creation
+            'all-scroll', // Scrollable content
+            'col-resize', // Column resize
+            'context-menu', // Context menu available
+            'crosshair', // Precise selection
+            'e-resize', // East resize
+            'ew-resize', // East-west resize
+            'help', // Help available
+            'n-resize', // North resize
+            'ne-resize', // Northeast resize
+            'nesw-resize', // Northeast-southwest resize
+            'ns-resize', // North-south resize
+            'nw-resize', // Northwest resize
+            'nwse-resize', // Northwest-southeast resize
+            'row-resize', // Row resize
+            's-resize', // South resize
+            'se-resize', // Southeast resize
+            'sw-resize', // Southwest resize
+            'vertical-text', // Vertical text selection
+            'w-resize', // West resize
+            'zoom-in', // Zoom in
+            'zoom-out' // Zoom out
+        ]);
+        // Define non-interactive cursors
+        const nonInteractiveCursors = new Set([
+            'not-allowed', // Action not allowed
+            'no-drop', // Drop not allowed
+            'wait', // Processing
+            'progress', // In progress
+            'initial', // Initial value
+            'inherit' // Inherited value
+            //? Let's just include all potentially clickable elements that are not specifically blocked
+            // 'none',        // No cursor
+            // 'default',     // Default cursor
+            // 'auto',        // Browser default
+        ]);
+        /**
+         * Checks if an element has an interactive pointer.
+         */
+        function doesElementHaveInteractivePointer(element) {
+            if (element.tagName.toLowerCase() === "html")
+                return false;
+            if (style?.cursor && interactiveCursors.has(style.cursor))
+                return true;
+            return false;
+        }
+        // Disabled for now, since it adds too many false positives
+        // let isInteractiveCursor = doesElementHaveInteractivePointer(element);
+        // // Genius fix for almost all interactive elements
+        // if (isInteractiveCursor) {
+        //   return true;
+        // }
+        const interactiveElements = new Set([
+            "a", // Links
+            "button", // Buttons
+            "input", // All input types (text, checkbox, radio, etc.)
+            "select", // Dropdown menus
+            "textarea", // Text areas
+            "summary", // Summary element (clickable part of details)
+            "label", // Form labels (often clickable)
+            "option", // Select options
+            "optgroup", // Option groups
+            "fieldset", // Form fieldsets (can be interactive with legend)
+            "legend", // Fieldset legends
+        ]);
+        // Define explicit disable attributes and properties
+        const explicitDisableTags = new Set([
+            'disabled', // Standard disabled attribute
+            // 'aria-disabled',      // ARIA disabled state
+            // 'readonly',          // Read-only state
+            // 'aria-readonly',     // ARIA read-only state
+            // 'aria-hidden',       // Hidden from accessibility
+            // 'hidden',            // Hidden attribute
+            // 'inert',             // Inert attribute
+            // 'aria-inert',        // ARIA inert state
+            // 'tabindex="-1"',     // Removed from tab order
+            // 'aria-hidden="true"' // Hidden from screen readers
+        ]);
+        // Check for non-interactive cursor
+        if (style?.cursor && nonInteractiveCursors.has(style.cursor)) {
+            return false;
+        }
+        // handle inputs, select, checkbox, radio, textarea, button and make sure they are not cursor style disabled/not-allowed
+        if (interactiveElements.has(tagName)) {
+            // Check for explicit disable attributes
+            for (const disableTag of explicitDisableTags) {
+                if (element.hasAttribute(disableTag) ||
+                    element.getAttribute(disableTag) === 'true' ||
+                    element.getAttribute(disableTag) === '') {
+                    return false;
+                }
+            }
+            // Check for disabled property on form elements
+            if (element.disabled) {
+                return false;
+            }
+            // Don't mark as non-interactive yet
+            // Check for readonly property on form elements
+            if (element.readOnly) {
+                // return false;
+            }
+            // Check for inert property
+            if (element.inert) {
+                return false;
+            }
+            return true;
+        }
+        const role = element.getAttribute("role");
+        const ariaRole = element.getAttribute("aria-role");
+        // Check for contenteditable attribute
+        if (element.getAttribute("contenteditable") === "true" || element.isContentEditable) {
+            return true;
+        }
+        // Added enhancement to capture dropdown interactive elements
+        if (hasAnyClassName(element, buttonClassNames) ||
+            hasAnyClassName(element, interactiveClassNames) ||
+            hasAnyClassName(element, cursorPointerClassNames) ||
+            element.getAttribute('data-index') ||
+            element.getAttribute('data-toggle') === 'dropdown' ||
+            element.getAttribute('aria-haspopup')) {
+            return true;
+        }
+        const interactiveRoles = new Set([
+            'button', // Directly clickable element
+            'link', // Clickable link
+            'menuitem', // Clickable menu item
+            'menuitemradio', // Radio-style menu item (selectable)
+            'menuitemcheckbox', // Checkbox-style menu item (toggleable)
+            'radio', // Radio button (selectable)
+            'checkbox', // Checkbox (toggleable)
+            'tab', // Tab (clickable to switch content)
+            'switch', // Toggle switch (clickable to change state)
+            'slider', // Slider control (draggable)
+            'spinbutton', // Number input with up/down controls
+            'combobox', // Dropdown with text input
+            'searchbox', // Search input field
+            'textbox', // Text input field
+            'listbox', // Selectable list
+            'option', // Selectable option in a list
+            'scrollbar' // Scrollable control
+        ]);
+        // Basic role/attribute checks
+        const hasInteractiveRole = (role && interactiveRoles.has(role)) ||
+            (ariaRole && interactiveRoles.has(ariaRole));
+        if (hasInteractiveRole)
+            return true;
+        const listenedEvents = getCachedNodeEventListeners(element);
+        if (listenedEvents && listenedEvents.length > 0) {
+            for (const eventType of INTERACTION_EVENTS) {
+                if (listenedEvents.includes(eventType)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Checks if an element is the topmost element at its position.
+     */
+    function isTopElement(element) {
+        // Special case: when viewportExpansion is -1, consider all elements as "top" elements
+        if (viewportExpansion === -1) {
+            return true;
+        }
+        const rects = getCachedClientRects(element);
+        if (!rects || rects.length === 0) {
+            return false; // No geometry, cannot be top
+        }
+        let isAnyRectInViewport = false;
+        for (const rect of rects) {
+            // Use the same logic as isInExpandedViewport check
+            if (rect.width > 0 && rect.height > 0 && !( // Only check non-empty rects
+            rect.bottom < -viewportExpansion ||
+                rect.top > window.innerHeight + viewportExpansion ||
+                rect.right < -viewportExpansion ||
+                rect.left > window.innerWidth + viewportExpansion)) {
+                isAnyRectInViewport = true;
+                break;
+            }
+        }
+        if (!isAnyRectInViewport) {
+            return false; // All rects are outside the viewport area
+        }
+        // Find the correct document context and root element
+        let doc = element.ownerDocument;
+        // If we're in an iframe, elements are considered top by default
+        if (doc !== window.document) {
+            return true;
+        }
+        // For shadow DOM, we need to check within its own root context
+        const shadowRoot = element.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            const centerX = rects[Math.floor(rects.length / 2)].left + rects[Math.floor(rects.length / 2)].width / 2;
+            const centerY = rects[Math.floor(rects.length / 2)].top + rects[Math.floor(rects.length / 2)].height / 2;
+            try {
+                const topEl = shadowRoot.elementFromPoint(centerX, centerY);
+                if (!topEl)
+                    return false;
+                let current = topEl;
+                while (current && current !== shadowRoot) {
+                    if (current === element)
+                        return true;
+                    current = current.parentElement;
+                }
+                return false;
+            }
+            catch (e) {
+                return true;
+            }
+        }
+        // For elements in viewport, check if they're topmost
+        const centerX = rects[Math.floor(rects.length / 2)].left + rects[Math.floor(rects.length / 2)].width / 2;
+        const centerY = rects[Math.floor(rects.length / 2)].top + rects[Math.floor(rects.length / 2)].height / 2;
+        try {
+            const topEl = document.elementFromPoint(centerX, centerY);
+            if (!topEl)
+                return false;
+            let current = topEl;
+            while (current && current !== document.documentElement) {
+                if (current === element)
+                    return true;
+                current = current.parentElement;
+            }
+            return false;
+        }
+        catch (e) {
+            return true;
+        }
+    }
+    /**
+     * Checks if an element is within the expanded viewport.
+     */
+    function isInExpandedViewport(element, viewportExpansion) {
+        if (viewportExpansion === -1) {
+            return true;
+        }
+        const rects = element.getClientRects();
+        if (!rects || rects.length === 0) {
+            // Fallback to getBoundingClientRect if getClientRects is empty,
+            // useful for elements like <svg> that might not have client rects but have a bounding box.
+            const boundingRect = getCachedBoundingRect(element);
+            if (!boundingRect || boundingRect.width === 0 || boundingRect.height === 0) {
+                return false;
+            }
+            return !(boundingRect.bottom < -viewportExpansion ||
+                boundingRect.top > window.innerHeight + viewportExpansion ||
+                boundingRect.right < -viewportExpansion ||
+                boundingRect.left > window.innerWidth + viewportExpansion);
+        }
+        // Check if *any* client rect is within the viewport
+        for (const rect of rects) {
+            if (rect.width === 0 || rect.height === 0)
+                continue; // Skip empty rects
+            if (!(rect.bottom < -viewportExpansion ||
+                rect.top > window.innerHeight + viewportExpansion ||
+                rect.right < -viewportExpansion ||
+                rect.left > window.innerWidth + viewportExpansion)) {
+                return true; // Found at least one rect in the viewport
+            }
+        }
+        return false; // No rects were found in the viewport
+    }
+    // /**
+    //  * Gets the effective scroll of an element.
+    //  *
+    //  * @param {HTMLElement} element - The element to get the effective scroll for.
+    //  * @returns {Object} The effective scroll of the element.
+    //  */
+    // function getEffectiveScroll(element) {
+    //   let currentEl = element;
+    //   let scrollX = 0;
+    //   let scrollY = 0;
+    //   while (currentEl && currentEl !== document.documentElement) {
+    //     if (currentEl.scrollLeft || currentEl.scrollTop) {
+    //       scrollX += currentEl.scrollLeft;
+    //       scrollY += currentEl.scrollTop;
+    //     }
+    //     currentEl = currentEl.parentElement;
+    //   }
+    //   scrollX += window.scrollX;
+    //   scrollY += window.scrollY;
+    //   return { scrollX, scrollY };
+    // }
+    /**
+     * Checks if an element is an interactive candidate.
+     */
+    function isInteractiveCandidate(element) {
+        if (!element || element.nodeType !== Node.ELEMENT_NODE)
+            return false;
+        const tagName = element.tagName.toLowerCase();
+        // Fast-path for common interactive elements
+        const interactiveElements = new Set([
+            "a", "button", "input", "select", "textarea", "summary", "label"
+        ]);
+        if (interactiveElements.has(tagName))
+            return true;
+        // Quick attribute checks without getting full lists
+        const hasQuickInteractiveAttr = element.hasAttribute("onclick") ||
+            element.hasAttribute("role") ||
+            element.hasAttribute("tabindex") ||
+            element.hasAttribute("aria-") ||
+            element.hasAttribute("data-action") ||
+            element.getAttribute("contenteditable") === "true";
+        return hasQuickInteractiveAttr;
+    }
+    // --- Define constants for distinct interaction check ---
+    const DISTINCT_INTERACTIVE_TAGS = new Set([
+        'a', 'button', 'input', 'select', 'textarea', 'summary', 'label', 'option'
+    ]);
+    const INTERACTIVE_ROLES = new Set([
+        'button', 'link', 'menuitem', 'menuitemradio', 'menuitemcheckbox',
+        'radio', 'checkbox', 'tab', 'switch', 'slider', 'spinbutton',
+        'combobox', 'searchbox', 'textbox', 'listbox', 'option', 'scrollbar'
+    ]);
+    /**
+     * Heuristically determines if an element should be considered as independently interactive,
+     * even if it's nested inside another interactive container.
+     *
+     * This function helps detect deeply nested actionable elements (e.g., menu items within a button)
+     * that may not be picked up by strict interactivity checks.
+     */
+    function isHeuristicallyInteractive(element) {
+        if (!element || element.nodeType !== Node.ELEMENT_NODE)
+            return false;
+        // Skip non-visible elements early for performance
+        if (!isElementVisible(element))
+            return false;
+        // Check for common attributes that often indicate interactivity
+        const hasInteractiveAttributes = element.hasAttribute('role') ||
+            element.hasAttribute('tabindex') ||
+            element.hasAttribute('onclick') ||
+            typeof element.onclick === 'function';
+        // Check for semantic class names suggesting interactivity
+        const hasInteractiveClass = heuristicClassPattern.test(element.className || '');
+        // Determine whether the element is inside a known interactive container
+        const isInKnownContainer = Boolean(element.closest(containerSelectors));
+        // Ensure the element has at least one visible child (to avoid marking empty wrappers)
+        const hasVisibleChildren = [...element.children].some(child => isElementVisible(child));
+        // Avoid highlighting elements whose parent is <body> (top-level wrappers)
+        const isParentBody = element.parentElement && element.parentElement.isSameNode(document.body);
+        return ((isInteractiveElement(element) || hasInteractiveAttributes || hasInteractiveClass) &&
+            hasVisibleChildren &&
+            isInKnownContainer &&
+            !isParentBody);
+    }
+    /**
+     * Checks if an element likely represents a distinct interaction
+     * separate from its parent (if the parent is also interactive).
+     */
+    function isElementDistinctInteraction(element, nodeData) {
+        if (nodeData.isScrollable) {
+            return true;
+        }
+        if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+            return false;
+        }
+        const tagName = element.tagName.toLowerCase();
+        const role = element.getAttribute('role');
+        // Check if it's an iframe - always distinct boundary
+        if (tagName === 'iframe') {
+            return true;
+        }
+        // Check tag name
+        if (DISTINCT_INTERACTIVE_TAGS.has(tagName)) {
+            return true;
+        }
+        // Check interactive roles
+        if (role && INTERACTIVE_ROLES.has(role)) {
+            return true;
+        }
+        // Check contenteditable
+        if (element.isContentEditable || element.getAttribute('contenteditable') === 'true') {
+            return true;
+        }
+        // Check for common testing/automation attributes
+        if (element.hasAttribute('data-testid') || element.hasAttribute('data-cy') || element.hasAttribute('data-test')) {
+            return true;
+        }
+        // Check for explicit onclick handler (attribute or property)
+        if (element.hasAttribute('onclick') || typeof element.onclick === 'function') {
+            return true;
+        }
+        if (element.hasAttribute('aria-haspopup')) {
+            return true;
+        }
+        if (hasAnyClassName(element, interactiveClassNames)) {
+            return true;
+        }
+        // Check for cursor-pointer class names that indicate clickability
+        if (hasAnyClassName(element, cursorPointerClassNames)) {
+            return true;
+        }
+        // return false
+        // Check for other common interaction event listeners
+        try {
+            const getEventListenersForNode = element?.ownerDocument?.defaultView?.getEventListenersForNode || window.getEventListenersForNode;
+            if (typeof getEventListenersForNode === 'function') {
+                const listeners = getEventListenersForNode(element);
+                const interactionEvents = ['click', 'mousedown', 'mouseup', 'dblclick', 'input', 'mouseenter', 'mouseleave', 'keydown', 'keyup', 'submit', 'change', 'focus', 'blur'];
+                for (const eventType of interactionEvents) {
+                    for (const listener of listeners) {
+                        if (listener.type === eventType) {
+                            return true; // Found a common interaction listener
+                        }
+                    }
+                }
+            }
+            // Fallback: Check common event attributes if getEventListeners is not available (getEventListenersForNode doesn't work in page.evaluate context)
+            const commonEventAttrs = ['onmousedown', 'onmouseup', 'onkeydown', 'onkeyup', 'onsubmit', 'onmouseenter', 'onmouseleave', 'onchange', 'oninput', 'onfocus', 'onblur'];
+            if (commonEventAttrs.some(attr => element.hasAttribute(attr))) {
+                return true;
+            }
+        }
+        catch (e) {
+            // console.warn(\`Could not check event listeners for \${element.tagName}:\`, e);
+            // If checking listeners fails, rely on other checks
+        }
+        // if the element is not strictly interactive but appears clickable based on heuristic signals
+        if (isHeuristicallyInteractive(element)) {
+            return true;
+        }
+        // Default to false: if it's interactive but doesn't match above,
+        // assume it triggers the same action as the parent.
+        return false;
+    }
+    // --- End distinct interaction check ---
+    /**
+     * Calculates Intersection over Union (IoU) for two rectangles.
+     * Returns a value between 0 (no overlap) and 1 (identical).
+     */
+    function calculateIoU(rect1, rect2) {
+        // Calculate intersection
+        const xOverlap = Math.max(0, Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left));
+        const yOverlap = Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top));
+        const intersectionArea = xOverlap * yOverlap;
+        // Calculate union
+        const area1 = rect1.width * rect1.height;
+        const area2 = rect2.width * rect2.height;
+        const unionArea = area1 + area2 - intersectionArea;
+        // Avoid division by zero
+        if (unionArea === 0)
+            return 0;
+        return intersectionArea / unionArea;
+    }
+    /**
+     * Checks if two rects are effectively the same using IoU threshold.
+     */
+    function areRectsEqual(rect1, rect2) {
+        return calculateIoU(rect1, rect2) >= sameRectIoUThreshold;
+    }
+    /**
+     * Checks if an element can actually receive pointer events.
+     * Returns false if the element is hidden, disabled, or has pointer-events: none.
+     */
+    function canReceivePointerEvents(element) {
+        const style = getCachedComputedStyle(element);
+        // Check CSS properties that prevent events
+        if (style?.pointerEvents === 'none')
+            return false;
+        if (style?.visibility === 'hidden')
+            return false;
+        if (style?.display === 'none')
+            return false;
+        // Check disabled attribute for form elements
+        if (element.disabled)
+            return false;
+        return true;
+    }
+    /**
+     * Checks if an element has an interactive descendant with the same bounding rect.
+     * If so, the descendant should be highlighted instead of this element (innermost wins).
+     */
+    function hasInteractiveDescendantWithSameRect(element, rect) {
+        for (const child of element.children) {
+            if (!(child instanceof HTMLElement))
+                continue;
+            if (!canReceivePointerEvents(child))
+                continue;
+            const childRect = child.getBoundingClientRect();
+            if (!areRectsEqual(rect, childRect))
+                continue;
+            // Child has same rect - check if it's interactive
+            if (isInteractiveElement(child) || isElementScrollable(child)) {
+                return true;
+            }
+            // Child has same rect but isn't interactive - check its descendants
+            if (hasInteractiveDescendantWithSameRect(child, rect)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Handles the logic for deciding whether to highlight an element and performing the highlight.
+     */
+    function handleHighlighting(nodeData, node, parentIframe, parentHighlightedRect) {
+        if (!nodeData.isInteractive)
+            return { highlighted: false, rect: null }; // Not interactive, definitely don't highlight
+        // Apply action intent filter - skip elements that don't match the specified intent
+        const actionIntent = args.actionIntent || 'all';
+        if (actionIntent !== 'all' && !matchesActionIntent(node, actionIntent)) {
+            return { highlighted: false, rect: null };
+        }
+        // Check if element can actually receive pointer events
+        if (!canReceivePointerEvents(node)) {
+            return { highlighted: false, rect: null };
+        }
+        const currentRect = node.getBoundingClientRect();
+        // Check if there's an interactive descendant with the same rect
+        // If so, skip this element - let the innermost element be highlighted
+        if (hasInteractiveDescendantWithSameRect(node, currentRect)) {
+            return { highlighted: false, rect: null };
+        }
+        let shouldHighlight = false;
+        if (!parentHighlightedRect) {
+            // Parent wasn't highlighted, this interactive node can be highlighted.
+            shouldHighlight = true;
+        }
+        else {
+            // Parent *was* highlighted. Only highlight this node if it represents a distinct interaction.
+            if (areRectsEqual(currentRect, parentHighlightedRect)) {
+                // Same rect as parent - this is the innermost element, should be highlighted
+                // (parent should have been skipped by hasInteractiveDescendantWithSameRect)
+                shouldHighlight = true;
+            }
+            else if (isElementDistinctInteraction(node, nodeData)) {
+                shouldHighlight = true;
+            }
+            else {
+                // console.log(\`Skipping highlight for \${nodeData.tagName} (parent highlighted)\`);
+                shouldHighlight = false;
+            }
+        }
+        if (shouldHighlight) {
+            const attributeNames = node.getAttributeNames?.() || [];
+            for (const name of attributeNames) {
+                const value = node.getAttribute(name);
+                nodeData.attributes[name] = value;
+            }
+            // Check viewport status before assigning index and highlighting
+            if (nodeData.isInViewport === undefined) {
+                nodeData.isInViewport = isInExpandedViewport(node, viewportExpansion);
+            }
+            // When viewportExpansion is -1, all interactive elements should get a highlight index
+            // regardless of viewport status
+            if (nodeData.isInViewport || viewportExpansion === -1) {
+                nodeData.highlightIndex = highlightIndex++;
+                if (doHighlightElements) {
+                    // Collect elements for deferred highlighting (after tree-based flow detection)
+                    if (focusHighlightIndex >= 0) {
+                        if (focusHighlightIndex === nodeData.highlightIndex) {
+                            elementsToHighlight.push({ element: node, index: nodeData.highlightIndex, parentIframe });
+                        }
+                    }
+                    else {
+                        elementsToHighlight.push({ element: node, index: nodeData.highlightIndex, parentIframe });
+                    }
+                    return { highlighted: true, rect: currentRect }; // Will be highlighted after traversal
+                }
+                // Even if not drawing highlights, we still "highlighted" for tracking purposes
+                return { highlighted: true, rect: currentRect };
+            }
+            else {
+                // console.log(\`Skipping highlight for \${nodeData.tagName} (outside viewport)\`);
+            }
+        }
+        return { highlighted: false, rect: null }; // Did not highlight
+    }
+    function isElementScrollable(element) {
+        const listenedEvents = getCachedNodeEventListeners(element);
+        if (listenedEvents && listenedEvents.includes('scroll')) {
+            const hasScrollableX = element.scrollWidth > element.clientWidth;
+            const hasScrollableY = element.scrollHeight > element.clientHeight;
+            return hasScrollableX || hasScrollableY;
+        }
+        const style = getCachedComputedStyle(element);
+        const hasScrollableX = ['auto', 'scroll'].includes(style?.overflowX || '') &&
+            element.scrollWidth > element.clientWidth;
+        const hasScrollableY = ['auto', 'scroll'].includes(style?.overflowY || '') &&
+            element.scrollHeight > element.clientHeight;
+        return hasScrollableX || hasScrollableY;
+    }
+    /**
+     * Creates a node data object for a given node and its descendants.
+     */
+    function buildDomTree(node, parentIframe = null, parentHighlightedRect = null) {
+        // Fast rejection checks first
+        if (!node || node.id === HIGHLIGHT_CONTAINER_ID) {
+            return null;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.TEXT_NODE) {
+            return null;
+        }
+        // Special handling for root node (body)
+        if (node === document.body) {
+            const nodeData = {
+                tagName: 'body',
+                attributes: {},
+                xpath: '/body',
+                children: [],
+            };
+            // Process children of body
+            for (const child of node.childNodes) {
+                const domElement = buildDomTree(child, parentIframe, null); // Body's children have no highlighted parent initially
+                if (domElement)
+                    nodeData.children.push(domElement);
+            }
+            const id = \`\${ID.current++}\`;
+            DOM_HASH_MAP[id] = nodeData;
+            return id;
+        }
+        // Process text nodes
+        if (node.nodeType === Node.TEXT_NODE) {
+            const textContent = node.textContent?.trim();
+            if (!textContent) {
+                return null;
+            }
+            // Only check visibility for text nodes that might be visible
+            const parentElement = node.parentElement;
+            if (!parentElement || parentElement.tagName.toLowerCase() === 'script') {
+                return null;
+            }
+            const id = \`\${ID.current++}\`;
+            DOM_HASH_MAP[id] = {
+                type: "TEXT_NODE",
+                text: textContent,
+                isVisible: isTextNodeVisible(node),
+            };
+            return id;
+        }
+        // Quick checks for element nodes
+        if (node.nodeType === Node.ELEMENT_NODE && !isElementAccepted(node)) {
+            return null;
+        }
+        const element = node;
+        const nodeData = {
+            tagName: element.tagName.toLowerCase(),
+            attributes: {},
+            xpath: getXPathTree(element, true),
+            children: [],
+        };
+        // Get attributes for interactive elements or potential text containers
+        if (element.tagName.toLowerCase() === 'iframe' || element.tagName.toLowerCase() === 'body') {
+            const attributeNames = element.getAttributeNames?.() || [];
+            for (const name of attributeNames) {
+                const value = element.getAttribute(name);
+                nodeData.attributes[name] = value;
+            }
+        }
+        let highlightResult = { highlighted: false, rect: null };
+        // Perform visibility, interactivity, and highlighting checks
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            if (alwaysHighlightFileInput && element.tagName.toLowerCase() === 'input' && element.type === 'file') {
+                nodeData.isTopElement = true;
+                if (nodeData.isTopElement) {
+                    nodeData.isInteractive = true;
+                    nodeData.isInViewport = true; // File inputs should always be considered in viewport
+                    // Call the dedicated highlighting function
+                    highlightResult = handleHighlighting(nodeData, element, parentIframe, parentHighlightedRect);
+                }
+            }
+            else {
+                nodeData.isVisible = isElementVisible(element); // isElementVisible uses offsetWidth/Height, which is fine
+                if (nodeData.isVisible) {
+                    nodeData.isTopElement = isTopElement(element);
+                    if (nodeData.isTopElement) {
+                        let isScrollable = isElementScrollable(element);
+                        nodeData.isInteractive = isInteractiveElement(element) || isScrollable;
+                        nodeData.isScrollable = isScrollable;
+                        nodeData.markAsClickable = shouldMarkAsClickable(element);
+                        // Call the dedicated highlighting function
+                        highlightResult = handleHighlighting(nodeData, element, parentIframe, parentHighlightedRect);
+                    }
+                }
+            }
+        }
+        // Determine the rect to pass to children: use this element's rect if highlighted, otherwise parent's
+        const rectForChildren = highlightResult.highlighted ? highlightResult.rect : parentHighlightedRect;
+        // Process children, with special handling for iframes and rich text editors
+        if (element.tagName) {
+            const tagName = element.tagName.toLowerCase();
+            // Handle iframes
+            if (tagName === "iframe") {
+                try {
+                    const iframeEl = element;
+                    const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
+                    if (iframeDoc) {
+                        for (const child of iframeDoc.childNodes) {
+                            const domElement = buildDomTree(child, iframeEl, null); // iframes start fresh
+                            if (domElement)
+                                nodeData.children.push(domElement);
+                        }
+                    }
+                }
+                catch (e) {
+                    console.warn("Unable to access iframe:", e);
+                }
+            }
+            // Handle rich text editors and contenteditable elements
+            else if (element.isContentEditable ||
+                element.getAttribute("contenteditable") === "true" ||
+                element.id === "tinymce" ||
+                element.classList.contains("mce-content-body") ||
+                (tagName === "body" && element.getAttribute("data-id")?.startsWith("mce_"))) {
+                // Process all child nodes to capture formatted text
+                for (const child of element.childNodes) {
+                    const domElement = buildDomTree(child, parentIframe, rectForChildren);
+                    if (domElement)
+                        nodeData.children.push(domElement);
+                }
+            }
+            else {
+                // Handle shadow DOM
+                if (element.shadowRoot) {
+                    nodeData.shadowRoot = true;
+                    for (const child of element.shadowRoot.childNodes) {
+                        const domElement = buildDomTree(child, parentIframe, rectForChildren);
+                        if (domElement)
+                            nodeData.children.push(domElement);
+                    }
+                }
+                // Handle regular elements
+                for (const child of element.childNodes) {
+                    const domElement = buildDomTree(child, parentIframe, rectForChildren);
+                    if (domElement)
+                        nodeData.children.push(domElement);
+                }
+            }
+        }
+        const id = \`\${ID.current++}\`;
+        DOM_HASH_MAP[id] = nodeData;
+        return id;
+    }
+    const rootId = buildDomTree(document.body);
+    // After traversal, render all highlights
+    let treeEntries = [];
+    if (doHighlightElements) {
+        if (phase === 'labels') {
+            // Labels phase: use provided element data to place labels only
+            processLabelsPhase();
+        }
+        else if (elementsToHighlight.length > 0) {
+            // Boxes phase or legacy mode: traverse tree to draw boxes and optionally labels
+            treeEntries = buildTreeEntries();
+            // Use recursive tree processing for correct hot map behavior:
+            // - Pre-order: Mark bounding boxes in hot map (so children avoid parent borders)
+            // - Post-order: Place labels (so parent labels avoid children's labels, skipped in boxes phase)
+            processElementTreeRecursively(elementsToHighlight);
+        }
+    }
+    // Clear the cache before returning
+    DOM_CACHE.clearCache();
+    return {
+        rootId,
+        map: DOM_HASH_MAP,
+        debugLogs,
+        treeEntries,
+        highlightCount: highlightIndex,
+        // Return the final grayscale image state (after all boxes and labels marked) for debugging
+        finalGrayscaleImage: grayscaleImage ?? undefined,
+        // Note: labelSnapshots are now streamed via onSnapshot callback instead of returned
+        // Return element data from boxes phase for use in labels phase
+        elementData: phase === 'boxes' ? collectedElementData : undefined,
+    };
+})`;function te(e){return e==="about:blank"||e==="chrome://newtab/"||e==="edge://newtab/"||e==="about:newtab"}var Me=class{constructor(e={}){h.debug("\u{1F333} Initializing DomService with options:",e),this.useDomTreeTs=e.useDomTreeTs??!1,this.jsCode=this.useDomTreeTs?ee:Z}async getClickableElements(e,i={}){let{highlightElements:o=!0,focusElement:l=-1,viewportExpansion:t=0,interactiveClassNames:r=[],alwaysHighlightFileInput:n=!1,sameRectIoUThreshold:d,actionIntent:c="all"}=i,[u,a]=await this.buildDomTree(e,o,l,t,r,n,d,c);return{elementTree:u,selectorMap:a}}async getClickableElementsWithScreenshot(e,i={}){if(i.useAccessibilityTree)return this.getClickableElementsWithAXTree(e,i);let o;i.useCleanScreenshot&&(o=await e.screenshot({type:"png",fullPage:!1}));let l=await this.getClickableElements(e,i);await e.waitForTimeout(100),i.useCleanScreenshot||(o=await e.screenshot({type:"png",fullPage:!1})),await this.removeHighlights(e);let t=o.toString("base64"),r;if(i.useSlicedScreenshots)try{r=(await D(o,{resize:i.resizeSlicedScreenshots})).map(d=>d.toString("base64"))}catch(n){h.warn("Failed to slice screenshot:",n)}return{domState:l,screenshotBase64:t,slicedScreenshotsBase64:r}}async getClickableElementsWithAXTree(e,i={}){h.debug("\u{1F333} Using CDP Accessibility Tree for element detection");let o;i.useCleanScreenshot&&(o=await e.screenshot({type:"png",fullPage:!1}));let l=await e.context().newCDPSession(e),{nodes:t}=await l.send("Accessibility.getFullAXTree",{depth:-1});h.debug(`\u{1F4CA} Got ${t.length} AXNodes from accessibility tree`);let r=t.filter(s=>{if(s.ignored)return!1;let f=s.role?.value;return!(!f||!X.has(f)||s.properties?.find(y=>y.name==="disabled")?.value?.value||!s.backendDOMNodeId)});h.debug(`\u2705 Found ${r.length} interactive elements from AXTree`);let n=t.filter(s=>s.role?.value==="button");h.debug(`\u{1F518} Total buttons in AXTree: ${n.length}`);for(let s of n){let f=[];s.ignored&&f.push("ignored"),s.backendDOMNodeId||f.push("no-backendDOMNodeId"),s.properties?.find(y=>y.name==="disabled")?.value?.value&&f.push("disabled"),h.debug(`   - "${s.name?.value||"(no name)"}" ${f.length>0?`[SKIPPED: ${f.join(", ")}]`:"[INCLUDED]"}`)}let d=new Set(r.map(s=>s.backendDOMNodeId)),c=await this.getElementsWithEventListeners(l,i.eventListenerLimit??500),u=0;for(let s of c)d.has(s.backendNodeId)||(r.push({nodeId:`synthetic-${s.backendNodeId}`,ignored:!1,backendDOMNodeId:s.backendNodeId,role:{type:"role",value:"generic"},name:{type:"string",value:""},properties:[{name:"eventListeners",value:{type:"string",value:s.eventTypes.join(",")}}]}),d.add(s.backendNodeId),u++);h.debug(`\u{1F3AF} Added ${u} elements from event listeners (total: ${r.length})`);let a=await this.resolveAXNodesToDOM(l,r),m=a.filter(s=>s.isVisible&&s.isInViewport&&s.isTopElement&&s.boundingRect),w=a.filter(s=>!(s.isVisible&&s.isInViewport&&s.isTopElement&&s.boundingRect));if(w.length>0){h.debug(`\u{1F6AB} Filtered out ${w.length} elements:`);for(let s of w){let f=[];s.isVisible||f.push("not-visible"),s.isInViewport||f.push("not-in-viewport"),s.isTopElement||f.push("not-top-element"),s.boundingRect||f.push("no-bounding-rect"),h.debug(`   - <${s.tagName}> "${s.axNode.name?.value||""}" [${f.join(", ")}]`)}}h.debug(`\u{1F441}\uFE0F ${m.length} elements are visible and in viewport`);let{domState:E,highlightIndex:p}=await this.buildDomStateFromAXTree(m);i.highlightElements!==!1&&p>0&&(await this.renderHighlightsForAXElements(e,m.slice(0,p)),await e.waitForTimeout(100)),i.useCleanScreenshot||(o=await e.screenshot({type:"png",fullPage:!1})),await this.removeHighlights(e);try{await l.detach()}catch{}let b=o.toString("base64"),g;if(i.useSlicedScreenshots)try{g=(await D(o,{resize:i.resizeSlicedScreenshots})).map(f=>f.toString("base64"))}catch(s){h.warn("Failed to slice screenshot:",s)}return{domState:E,screenshotBase64:b,slicedScreenshotsBase64:g}}async resolveAXNodesToDOM(e,i){let o=[],l=i.map(r=>r.backendDOMNodeId).filter(r=>r!==void 0);if(l.length===0)return o;let t=[];for(let r of l)try{let{object:n}=await e.send("DOM.resolveNode",{backendNodeId:r});t.push(n.objectId||null)}catch{t.push(null)}for(let r=0;r<i.length;r++){let n=i[r],d=t[r];if(d)try{let{result:c}=await e.send("Runtime.callFunctionOn",{objectId:d,functionDeclaration:`function() {
+						const el = this;
+						const rect = el.getBoundingClientRect();
+						const rects = el.getClientRects();
+						const style = window.getComputedStyle(el);
+
+						// Check visibility
+						const isVisible =
+							el.offsetWidth > 0 &&
+							el.offsetHeight > 0 &&
+							style.visibility !== 'hidden' &&
+							style.display !== 'none' &&
+							style.opacity !== '0';
+
+						// Check if in viewport
+						const viewportWidth = window.innerWidth;
+						const viewportHeight = window.innerHeight;
+						const isInViewport = !(
+							rect.bottom < 0 ||
+							rect.top > viewportHeight ||
+							rect.right < 0 ||
+							rect.left > viewportWidth
+						);
+
+						// Check if topmost element
+						let isTopElement = false;
+						if (isVisible && isInViewport) {
+							const centerX = rect.left + rect.width / 2;
+							const centerY = rect.top + rect.height / 2;
+							const topEl = document.elementFromPoint(centerX, centerY);
+							if (topEl) {
+								let current = topEl;
+								while (current && current !== document.documentElement) {
+									if (current === el) {
+										isTopElement = true;
+										break;
+									}
+									current = current.parentElement;
+								}
+							}
+						}
+
+						// Get XPath
+						function getXPath(element) {
+							const segments = [];
+							let current = element;
+							while (current && current.nodeType === Node.ELEMENT_NODE) {
+								const tagName = current.nodeName.toLowerCase();
+								const siblings = current.parentElement
+									? Array.from(current.parentElement.children).filter(c => c.nodeName.toLowerCase() === tagName)
+									: [];
+								const index = siblings.length > 1 ? siblings.indexOf(current) + 1 : 0;
+								segments.unshift(index > 0 ? tagName + '[' + index + ']' : tagName);
+								current = current.parentNode;
+							}
+							return segments.join('/');
+						}
+
+						// Get attributes
+						const attributes = {};
+						for (const attr of el.attributes) {
+							attributes[attr.name] = attr.value;
+						}
+
+						// Convert client rects to plain objects
+						const clientRectsArray = [];
+						for (const r of rects) {
+							clientRectsArray.push({
+								x: r.x, y: r.y, width: r.width, height: r.height
+							});
+						}
+
+						return {
+							tagName: el.tagName.toLowerCase(),
+							xpath: getXPath(el),
+							attributes: attributes,
+							isVisible: isVisible,
+							isInViewport: isInViewport,
+							isTopElement: isTopElement,
+							boundingRect: rect.width > 0 && rect.height > 0 ? {
+								x: rect.x, y: rect.y, width: rect.width, height: rect.height
+							} : null,
+							clientRects: clientRectsArray
+						};
+					}`,returnByValue:!0});c.value&&o.push({axNode:n,...c.value})}catch(c){h.debug(`Failed to resolve element: ${c}`)}}return o}async getElementsWithEventListeners(e,i=G){let o=[];try{let{root:l}=await e.send("DOM.getDocument",{depth:0}),t=B.join(","),{nodeIds:r}=await e.send("DOM.querySelectorAll",{nodeId:l.nodeId,selector:t});h.debug(`\u{1F50D} Checking ${Math.min(r.length,i)} elements for event listeners`);for(let n of r.slice(0,i))try{let{object:d}=await e.send("DOM.resolveNode",{nodeId:n});if(!d.objectId)continue;let{listeners:c}=await e.send("DOMDebugger.getEventListeners",{objectId:d.objectId}),u=c.filter(a=>$.has(a.type));if(u.length>0){let{node:a}=await e.send("DOM.describeNode",{nodeId:n});o.push({backendNodeId:a.backendNodeId,eventTypes:u.map(m=>m.type)})}await e.send("Runtime.releaseObject",{objectId:d.objectId})}catch{}h.debug(`\u2705 Found ${o.length} elements with interaction event listeners`)}catch(l){h.warn("Failed to get elements with event listeners:",l)}return o}async buildDomStateFromAXTree(e){let i=new Map,o=new C("body","/body",{},[],!0,!1,!1,!1,!0,!0,!1,null),l=0;for(let t of e){let r=t.axNode.role?.value||"",n=t.axNode.name?.value||"",d=["button","link","menuitem","tab","switch"].includes(r),c=new C(t.tagName,t.xpath,t.attributes,[],t.isVisible,!0,r==="scrollbar",d,t.isTopElement,t.isInViewport,!1,l,t.boundingRect?{topLeft:{x:t.boundingRect.x,y:t.boundingRect.y},topRight:{x:t.boundingRect.x+t.boundingRect.width,y:t.boundingRect.y},bottomLeft:{x:t.boundingRect.x,y:t.boundingRect.y+t.boundingRect.height},bottomRight:{x:t.boundingRect.x+t.boundingRect.width,y:t.boundingRect.y+t.boundingRect.height},center:{x:t.boundingRect.x+t.boundingRect.width/2,y:t.boundingRect.y+t.boundingRect.height/2},width:t.boundingRect.width,height:t.boundingRect.height}:null,null,null,o);if(n){let u=new N(n,!0,c);c.children.push(u)}o.children.push(c),i.set(l,c),l++}return{domState:{elementTree:o,selectorMap:i},highlightIndex:l}}async renderHighlightsForAXElements(e,i){let o=["#FF0000","#00FF00","#0000FF","#FFA500","#800080","#008080","#FF69B4","#4B0082","#FF4500","#2E8B57","#DC143C","#4682B4"];await e.evaluate(({elements:l,colors:t})=>{let r="playwright-highlight-container",n=document.getElementById(r);n||(n=document.createElement("div"),n.id=r,n.style.position="fixed",n.style.pointerEvents="none",n.style.top="0",n.style.left="0",n.style.width="100%",n.style.height="100%",n.style.zIndex="2147483647",n.style.backgroundColor="transparent",document.body.appendChild(n)),l.forEach((d,c)=>{if(!d.boundingRect)return;let u=t[c%t.length],a=d.boundingRect,m=document.createElement("div");m.style.position="fixed",m.style.border=`1px solid ${u}`,m.style.backgroundColor="transparent",m.style.pointerEvents="none",m.style.boxSizing="border-box",m.style.top=`${a.y}px`,m.style.left=`${a.x}px`,m.style.width=`${a.width}px`,m.style.height=`${a.height}px`,n.appendChild(m);let w=document.createElement("div");w.style.position="fixed",w.style.background=u,w.style.color="white",w.style.padding="1px 4px",w.style.borderRadius="4px",w.style.fontSize=c>=100?"8px":"12px",w.textContent=String(c);let E=Math.max(0,a.y-16),p=Math.max(0,Math.min(a.x+a.width-20,window.innerWidth-25));w.style.top=`${E}px`,w.style.left=`${p}px`,n.appendChild(w)})},{elements:i,colors:o})}async removeHighlights(e){try{await e.evaluate(()=>{let i=document.getElementById("playwright-highlight-container");i&&i.remove(),window._highlightCleanupFunctions&&(window._highlightCleanupFunctions.forEach(o=>o()),window._highlightCleanupFunctions=[])}),h.debug("\u2705 Highlights removed from page")}catch(i){h.warn("Failed to remove highlights:",i.message)}}async getCrossOriginIframes(e){let i=await e.locator("iframe").filter({hasNot:e.locator(":visible")}).evaluateAll(d=>d.map(c=>c.src)),o=d=>{try{let c=new URL(d);return["doubleclick.net","adroll.com","googletagmanager.com"].some(a=>c.hostname.includes(a))}catch{return!1}},l=e.url(),t=new URL(l).hostname,r=e.frames(),n=[];for(let d of r){let c=d.url();try{let u=new URL(c).hostname;u&&u!==t&&!i.includes(c)&&!o(c)&&n.push(c)}catch{continue}}return n}async buildDomTree(e,i,o,l,t,r,n,d="all"){if(await e.evaluate("1+1")!==2)throw new Error("The page cannot evaluate javascript code properly");if(te(e.url()))return[new C("body","",{},[],!1,!1,!1,!1,!1,!1,!1,null),new Map];let u={doHighlightElements:i,focusHighlightIndex:o,viewportExpansion:l,debugMode:!1,interactiveClassNames:t,alwaysHighlightFileInput:r,sameRectIoUThreshold:n,actionIntent:d};h.debug(`\u{1F527} Starting JavaScript DOM analysis for ${e.url().slice(0,50)}...`);let a,m=null;if(this.useDomTreeTs&&i)try{let p={...u,phase:"boxes",grayscaleImage:null},b=await e.evaluate(({code:v,argsObj:x})=>new Function("return "+v)()(x),{code:this.jsCode,argsObj:p});h.debug(`\u{1F4E6} Phase 1: Drew ${b.elementData?.length||0} bounding boxes`);let g=await e.screenshot({type:"png",fullPage:!1});h.debug("\u{1F4F8} Captured screenshot with bounding boxes");let s=performance.now(),f=await V(g);m=f.pixels;let T=Math.round(performance.now()-s);h.debug(`\u{1F5BC}\uFE0F Generated grayscale image (${f.width}x${f.height}) in ${T}ms`);let y={...u,phase:"labels",grayscaleImage:m,elementData:b.elementData};a=await e.evaluate(({code:v,argsObj:x})=>new Function("return "+v)()(x),{code:this.jsCode,argsObj:y}),a.map=b.map,a.rootId=b.rootId,a.highlightCount=b.highlightCount,a.perfMetrics=b.perfMetrics,h.debug("\u2705 Phase 2: Labels placed using grayscale-based positioning")}catch(p){h.warn("Two-phase rendering failed, falling back to legacy mode:",p.message),m=null;let b={...u,grayscaleImage:null};a=await e.evaluate(({code:g,argsObj:s})=>new Function("return "+g)()(s),{code:this.jsCode,argsObj:b}),h.debug("\u2705 JavaScript DOM analysis completed (legacy mode)")}else try{a=await e.evaluate(({code:p,argsObj:b})=>new Function("return "+p)()(b),{code:this.jsCode,argsObj:u}),h.debug("\u2705 JavaScript DOM analysis completed")}catch(p){throw h.error("Error evaluating JavaScript:",p.message),p}if(!a||typeof a!="object")throw h.error("JavaScript returned invalid result:",a),new Error("JavaScript DOM analysis returned invalid result");if(!a.map||!a.rootId)throw h.error("JavaScript result missing map or rootId:",JSON.stringify(a,null,2)),new Error("JavaScript result missing required fields (map or rootId)");if(d!=="all"&&a.highlightCount===0){h.debug(`\u26A0\uFE0F No elements matched intent '${d}', falling back to 'all'`);let p={...u,actionIntent:"all"};a=await e.evaluate(({code:b,argsObj:g})=>new Function("return "+b)()(g),{code:this.jsCode,argsObj:p})}if(a&&a.perfMetrics){let b=a.perfMetrics.nodeMetrics?.totalNodes??0,g=0;if(a.map)for(let f of Object.values(a.map))typeof f=="object"&&f!==null&&f.isInteractive&&g++;let s=e.url().length>50?e.url().slice(0,50)+"...":e.url();h.debug(`\u{1F50E} Ran buildDOMTree.js interactive element detection on: ${s} interactive=${g}/${b}`)}h.debug("\u{1F504} Starting TypeScript DOM tree construction...");let E=await this.constructDomTree(a);return h.debug("\u2705 TypeScript DOM tree construction completed"),E}async constructDomTree(e){let i=e.map,o=e.rootId,l=new Map,t=new Map;for(let[n,d]of Object.entries(i)){let[c,u]=this.parseNode(d);if(c!==null&&(t.set(n,c),c instanceof C&&c.highlightIndex!==null&&l.set(c.highlightIndex,c),c instanceof C))for(let a of u){let m=t.get(a);m&&(m.parent=c,c.children.push(m))}}let r=t.get(o);if(!r||!(r instanceof C))throw new Error("Failed to parse HTML to dictionary");return[r,l]}parseNode(e){if(!e)return[null,[]];if(e.type==="TEXT_NODE")return[new N(e.text,e.isVisible,null),[]];let i=null;e.viewport&&(i={width:e.viewport.width,height:e.viewport.height,scrollX:e.viewport.scrollX,scrollY:e.viewport.scrollY});let o=new C(e.tagName,e.xpath,e.attributes||{},[],e.isVisible??!1,e.isInteractive??!1,e.isScrollable??!1,e.markAsClickable??!1,e.isTopElement??!1,e.isInViewport??!1,e.shadowRoot??!1,e.highlightIndex??null,e.viewportCoordinates??null,e.pageCoordinates??null,i,null),l=e.children||[];return[o,l]}};export{ie as a,be as b,ye as c,Me as d};