@probolabs/playwright 1.0.16 → 1.0.19

package/dist/index.js

@@ -1,4 +1,4 @@
-const highlighterCode = "(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n  typeof define === 'function' && define.amd ? define(['exports'], factory) :\n  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ProboLabs = {}));\n})(this, (function (exports) { 'use strict';\n\n  const ElementTag = {\n    CLICKABLE: \"CLICKABLE\", // button, link, toggle switch, checkbox, radio, dropdowns, clickable divs\n    FILLABLE: \"FILLABLE\", // input, textarea content_editable, date picker??\n    SELECTABLE: \"SELECTABLE\", // select\n    NON_INTERACTIVE_ELEMENT: 'NON_INTERACTIVE_ELEMENT',\n  };\n\n  class ElementInfo {\n    constructor(element, index, {tag, type, text, html, xpath, css_selector, bounding_box, iframe_selector, short_css_selector, short_iframe_selector}) {\n      this.index = index.toString();\n      this.tag = tag;\n      this.type = type;\n      this.text = text;\n      this.html = html;\n      this.xpath = xpath;\n      this.css_selector = css_selector;\n      this.bounding_box = bounding_box;\n      this.iframe_selector = iframe_selector;\n      this.element = element;\n      this.depth = -1;\n      this.short_css_selector = short_css_selector;\n      this.short_iframe_selector = short_iframe_selector;\n    }\n\n    getSelector() {\n      return this.xpath ? this.xpath : this.css_selector;\n    }\n\n    getDepth() {\n      if (this.depth >= 0) {\n        return this.depth;\n      }\n      \n      this.depth = 0;\n      let currentElement = this.element;\n      \n      while (currentElement.nodeType === Node.ELEMENT_NODE) {          \n        this.depth++;\n        currentElement = getParentNode(currentElement);\n      }\n          \n      return this.depth;\n    }\n  }\n\n  function getParentNode(element) {\n    if (!element || element.nodeType !== Node.ELEMENT_NODE) return null;\n    \n    let parent = null;\n    // SF is using slots and shadow DOM heavily\n    // However, there might be slots in the light DOM which shouldn't be traversed\n    if (element.assignedSlot && element.getRootNode() instanceof ShadowRoot)\n      parent = element.assignedSlot;\n    else      \n      parent = element.parentNode;\n    \n    // Check if we're at a shadow root\n    if (parent && parent.nodeType !== Node.ELEMENT_NODE && parent.getRootNode() instanceof ShadowRoot)      \n      parent = parent.getRootNode().host;       \n\n    return parent;\n  }\n\n  // License: MIT\n  // Author: Anton Medvedev <anton@medv.io>\n  // Source: https://github.com/antonmedv/finder\n  const acceptedAttrNames = new Set(['role', 'name', 'aria-label', 'rel', 'href']);\n  /** Check if attribute name and value are word-like. */\n  function attr(name, value) {\n      let nameIsOk = acceptedAttrNames.has(name);\n      nameIsOk ||= name.startsWith('data-') && wordLike(name);\n      let valueIsOk = wordLike(value) && value.length < 100;\n      valueIsOk ||= value.startsWith('#') && wordLike(value.slice(1));\n      return nameIsOk && valueIsOk;\n  }\n  /** Check if id name is word-like. */\n  function idName(name) {\n      return wordLike(name);\n  }\n  /** Check if class name is word-like. */\n  function className(name) {\n      return wordLike(name);\n  }\n  /** Check if tag name is word-like. */\n  function tagName(name) {\n      return true;\n  }\n  /** Finds unique CSS selectors for the given element. */\n  function finder(input, options) {\n      if (input.nodeType !== Node.ELEMENT_NODE) {\n          throw new Error(`Can't generate CSS selector for non-element node type.`);\n      }\n      if (input.tagName.toLowerCase() === 'html') {\n          return 'html';\n      }\n      const defaults = {\n          root: document.body,\n          idName: idName,\n          className: className,\n          tagName: tagName,\n          attr: attr,\n          timeoutMs: 1000,\n          seedMinLength: 3,\n          optimizedMinLength: 2,\n          maxNumberOfPathChecks: Infinity,\n      };\n      const startTime = new Date();\n      const config = { ...defaults, ...options };\n      const rootDocument = findRootDocument(config.root, defaults);\n      let foundPath;\n      let count = 0;\n      for (const candidate of search(input, config, rootDocument)) {\n          const elapsedTimeMs = new Date().getTime() - startTime.getTime();\n          if (elapsedTimeMs > config.timeoutMs ||\n              count >= config.maxNumberOfPathChecks) {\n              const fPath = fallback(input, rootDocument);\n              if (!fPath) {\n                  throw new Error(`Timeout: Can't find a unique selector after ${config.timeoutMs}ms`);\n              }\n              return selector(fPath);\n          }\n          count++;\n          if (unique(candidate, rootDocument)) {\n              foundPath = candidate;\n              break;\n          }\n      }\n      if (!foundPath) {\n          throw new Error(`Selector was not found.`);\n      }\n      const optimized = [\n          ...optimize(foundPath, input, config, rootDocument, startTime),\n      ];\n      optimized.sort(byPenalty);\n      if (optimized.length > 0) {\n          return selector(optimized[0]);\n      }\n      return selector(foundPath);\n  }\n  function* search(input, config, rootDocument) {\n      const stack = [];\n      let paths = [];\n      let current = input;\n      let i = 0;\n      while (current && current !== rootDocument) {\n          const level = tie(current, config);\n          for (const node of level) {\n              node.level = i;\n          }\n          stack.push(level);\n          current = current.parentElement;\n          i++;\n          paths.push(...combinations(stack));\n          if (i >= config.seedMinLength) {\n              paths.sort(byPenalty);\n              for (const candidate of paths) {\n                  yield candidate;\n              }\n              paths = [];\n          }\n      }\n      paths.sort(byPenalty);\n      for (const candidate of paths) {\n          yield candidate;\n      }\n  }\n  function wordLike(name) {\n      if (/^[a-z\\-]{3,}$/i.test(name)) {\n          const words = name.split(/-|[A-Z]/);\n          for (const word of words) {\n              if (word.length <= 2) {\n                  return false;\n              }\n              if (/[^aeiou]{4,}/i.test(word)) {\n                  return false;\n              }\n          }\n          return true;\n      }\n      return false;\n  }\n  function tie(element, config) {\n      const level = [];\n      const elementId = element.getAttribute('id');\n      if (elementId && config.idName(elementId)) {\n          level.push({\n              name: '#' + CSS.escape(elementId),\n              penalty: 0,\n          });\n      }\n      for (let i = 0; i < element.classList.length; i++) {\n          const name = element.classList[i];\n          if (config.className(name)) {\n              level.push({\n                  name: '.' + CSS.escape(name),\n                  penalty: 1,\n              });\n          }\n      }\n      for (let i = 0; i < element.attributes.length; i++) {\n          const attr = element.attributes[i];\n          if (config.attr(attr.name, attr.value)) {\n              level.push({\n                  name: `[${CSS.escape(attr.name)}=\"${CSS.escape(attr.value)}\"]`,\n                  penalty: 2,\n              });\n          }\n      }\n      const tagName = element.tagName.toLowerCase();\n      if (config.tagName(tagName)) {\n          level.push({\n              name: tagName,\n              penalty: 5,\n          });\n          const index = indexOf(element, tagName);\n          if (index !== undefined) {\n              level.push({\n                  name: nthOfType(tagName, index),\n                  penalty: 10,\n              });\n          }\n      }\n      const nth = indexOf(element);\n      if (nth !== undefined) {\n          level.push({\n              name: nthChild(tagName, nth),\n              penalty: 50,\n          });\n      }\n      return level;\n  }\n  function selector(path) {\n      let node = path[0];\n      let query = node.name;\n      for (let i = 1; i < path.length; i++) {\n          const level = path[i].level || 0;\n          if (node.level === level - 1) {\n              query = `${path[i].name} > ${query}`;\n          }\n          else {\n              query = `${path[i].name} ${query}`;\n          }\n          node = path[i];\n      }\n      return query;\n  }\n  function penalty(path) {\n      return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);\n  }\n  function byPenalty(a, b) {\n      return penalty(a) - penalty(b);\n  }\n  function indexOf(input, tagName) {\n      const parent = input.parentNode;\n      if (!parent) {\n          return undefined;\n      }\n      let child = parent.firstChild;\n      if (!child) {\n          return undefined;\n      }\n      let i = 0;\n      while (child) {\n          if (child.nodeType === Node.ELEMENT_NODE &&\n              (tagName === undefined ||\n                  child.tagName.toLowerCase() === tagName)) {\n              i++;\n          }\n          if (child === input) {\n              break;\n          }\n          child = child.nextSibling;\n      }\n      return i;\n  }\n  function fallback(input, rootDocument) {\n      let i = 0;\n      let current = input;\n      const path = [];\n      while (current && current !== rootDocument) {\n          const tagName = current.tagName.toLowerCase();\n          const index = indexOf(current, tagName);\n          if (index === undefined) {\n              return;\n          }\n          path.push({\n              name: nthOfType(tagName, index),\n              penalty: NaN,\n              level: i,\n          });\n          current = current.parentElement;\n          i++;\n      }\n      if (unique(path, rootDocument)) {\n          return path;\n      }\n  }\n  function nthChild(tagName, index) {\n      if (tagName === 'html') {\n          return 'html';\n      }\n      return `${tagName}:nth-child(${index})`;\n  }\n  function nthOfType(tagName, index) {\n      if (tagName === 'html') {\n          return 'html';\n      }\n      return `${tagName}:nth-of-type(${index})`;\n  }\n  function* combinations(stack, path = []) {\n      if (stack.length > 0) {\n          for (let node of stack[0]) {\n              yield* combinations(stack.slice(1, stack.length), path.concat(node));\n          }\n      }\n      else {\n          yield path;\n      }\n  }\n  function findRootDocument(rootNode, defaults) {\n      if (rootNode.nodeType === Node.DOCUMENT_NODE) {\n          return rootNode;\n      }\n      if (rootNode === defaults.root) {\n          return rootNode.ownerDocument;\n      }\n      return rootNode;\n  }\n  function unique(path, rootDocument) {\n      const css = selector(path);\n      switch (rootDocument.querySelectorAll(css).length) {\n          case 0:\n              throw new Error(`Can't select any node with this selector: ${css}`);\n          case 1:\n              return true;\n          default:\n              return false;\n      }\n  }\n  function* optimize(path, input, config, rootDocument, startTime) {\n      if (path.length > 2 && path.length > config.optimizedMinLength) {\n          for (let i = 1; i < path.length - 1; i++) {\n              const elapsedTimeMs = new Date().getTime() - startTime.getTime();\n              if (elapsedTimeMs > config.timeoutMs) {\n                  return;\n              }\n              const newPath = [...path];\n              newPath.splice(i, 1);\n              if (unique(newPath, rootDocument) &&\n                  rootDocument.querySelector(selector(newPath)) === input) {\n                  yield newPath;\n                  yield* optimize(newPath, input, config, rootDocument, startTime);\n              }\n          }\n      }\n  }\n\n  // import { realpath } from \"fs\";\n\n  function getAllDocumentElementsIncludingShadow(selectors, root = document) {\n    const elements = Array.from(root.querySelectorAll(selectors));\n\n    root.querySelectorAll('*').forEach(el => {\n        if (el.shadowRoot) {\n            elements.push(...getAllDocumentElementsIncludingShadow(selectors, el.shadowRoot));\n        }\n    });\n    return elements;\n  }\n\n  function getAllFrames(root = document) {\n    const result = [root];\n    const frames = getAllDocumentElementsIncludingShadow('frame, iframe', root);  \n    frames.forEach(frame => {\n        try {\n            const frameDocument = frame.contentDocument || frame.contentWindow.document;\n            if (frameDocument) {\n                result.push(frameDocument);\n            }\n        } catch (e) {\n            // Skip cross-origin frames\n            console.warn('Could not access frame content:', e.message);\n        }\n    });\n\n    return result;\n  }\n\n  function getAllElementsIncludingShadow(selectors, root = document) {\n    const elements = [];\n\n    getAllFrames(root).forEach(doc => {\n      elements.push(...getAllDocumentElementsIncludingShadow(selectors, doc));\n    });\n\n    return elements;\n  }\n\n  /**\n   * Deeply searches through DOM trees including Shadow DOM and frames/iframes\n   * @param {string} selector - CSS selector to search for\n   * @param {Document|Element} [root=document] - Starting point for the search\n   * @param {Object} [options] - Search options\n   * @param {boolean} [options.searchShadow=true] - Whether to search Shadow DOM\n   * @param {boolean} [options.searchFrames=true] - Whether to search frames/iframes\n   * @returns {Element[]} Array of found elements\n   \n  function getAllElementsIncludingShadow(selector, root = document, options = {}) {\n    const {\n        searchShadow = true,\n        searchFrames = true\n    } = options;\n\n    const results = new Set();\n    \n    // Helper to check if an element is valid and not yet found\n    const addIfValid = (element) => {\n        if (element && !results.has(element)) {\n            results.add(element);\n        }\n    };\n\n    // Helper to process a single document or element\n    function processNode(node) {\n        // Search regular DOM\n        node.querySelectorAll(selector).forEach(addIfValid);\n\n        if (searchShadow) {\n            // Search all shadow roots\n            const treeWalker = document.createTreeWalker(\n                node,\n                NodeFilter.SHOW_ELEMENT,\n                {\n                    acceptNode: (element) => {\n                        return element.shadowRoot ? \n                            NodeFilter.FILTER_ACCEPT : \n                            NodeFilter.FILTER_SKIP;\n                    }\n                }\n            );\n\n            while (treeWalker.nextNode()) {\n                const element = treeWalker.currentNode;\n                if (element.shadowRoot) {\n                    // Search within shadow root\n                    element.shadowRoot.querySelectorAll(selector).forEach(addIfValid);\n                    // Recursively process the shadow root for nested shadow DOMs\n                    processNode(element.shadowRoot);\n                }\n            }\n        }\n\n        if (searchFrames) {\n            // Search frames and iframes\n            const frames = node.querySelectorAll('frame, iframe');\n            frames.forEach(frame => {\n                try {\n                    const frameDocument = frame.contentDocument;\n                    if (frameDocument) {\n                        processNode(frameDocument);\n                    }\n                } catch (e) {\n                    // Skip cross-origin frames\n                    console.warn('Could not access frame content:', e.message);\n                }\n            });\n        }\n    }\n\n    // Start processing from the root\n    processNode(root);\n\n    return Array.from(results);\n  }\n  */\n  // <div x=1 y=2 role='combobox'> </div>\n  function findDropdowns() {\n    const dropdowns = [];\n    \n    // Native select elements\n    dropdowns.push(...getAllElementsIncludingShadow('select'));\n    \n    // Elements with dropdown roles that don't have <input>..</input>\n    const roleElements = getAllElementsIncludingShadow('[role=\"combobox\"], [role=\"listbox\"], [role=\"dropdown\"], [role=\"option\"], [role=\"menu\"], [role=\"menuitem\"]').filter(el => {\n      return el.tagName.toLowerCase() !== 'input' || ![\"button\", \"checkbox\", \"radio\"].includes(el.getAttribute(\"type\"));\n    });\n    dropdowns.push(...roleElements);\n    \n    // Common dropdown class patterns\n    const dropdownPattern = /.*(dropdown|select|combobox|menu).*/i;\n    const elements = getAllElementsIncludingShadow('*');\n    const dropdownClasses = Array.from(elements).filter(el => {\n      const hasDropdownClass = dropdownPattern.test(el.className);\n      const validTag = ['li', 'ul', 'span', 'div', 'p', 'a', 'button'].includes(el.tagName.toLowerCase());\n      const style = window.getComputedStyle(el); \n      const result = hasDropdownClass && validTag && (style.cursor === 'pointer' || el.tagName.toLowerCase() === 'a' || el.tagName.toLowerCase() === 'button');\n      return result;\n    });\n    \n    dropdowns.push(...dropdownClasses);\n    \n    // Elements with aria-haspopup attribute\n    dropdowns.push(...getAllElementsIncludingShadow('[aria-haspopup=\"true\"], [aria-haspopup=\"listbox\"], [aria-haspopup=\"menu\"]'));\n\n    // Improve navigation element detection\n    // Semantic nav elements with list items\n    dropdowns.push(...getAllElementsIncludingShadow('nav ul li, nav ol li'));\n    \n    // Navigation elements in common design patterns\n    dropdowns.push(...getAllElementsIncludingShadow('header a, .header a, .nav a, .navigation a, .menu a, .sidebar a, aside a'));\n    \n    // Elements in primary navigation areas with common attributes\n    dropdowns.push(...getAllElementsIncludingShadow('[role=\"navigation\"] a, [aria-label*=\"navigation\"] a, [aria-label*=\"menu\"] a'));\n\n    return dropdowns;\n  }\n\n  function findClickables() {\n    const clickables = [];\n    \n    const checkboxPattern = /checkbox/i;\n    // Collect all clickable elements first\n    const nativeLinks = [...getAllElementsIncludingShadow('a')];\n    const nativeButtons = [...getAllElementsIncludingShadow('button')];\n    const inputButtons = [...getAllElementsIncludingShadow('input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"]')];\n    const roleButtons = [...getAllElementsIncludingShadow('[role=\"button\"]')];\n    // const tabbable = [...getAllElementsIncludingShadow('[tabindex=\"0\"]')];\n    const clickHandlers = [...getAllElementsIncludingShadow('[onclick]')];\n    const dropdowns = findDropdowns();\n    const nativeCheckboxes = [...getAllElementsIncludingShadow('input[type=\"checkbox\"]')];  \n    const fauxCheckboxes = getAllElementsIncludingShadow('*').filter(el => {\n      if (checkboxPattern.test(el.className)) {\n        const realCheckboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]', el);\n        if (realCheckboxes.length === 1) {\n          const boundingRect = realCheckboxes[0].getBoundingClientRect();\n          return boundingRect.width <= 1 && boundingRect.height <= 1      \n        }\n      }\n      return false;\n    });\n    const nativeRadios = [...getAllElementsIncludingShadow('input[type=\"radio\"]')];\n    const toggles = findToggles();\n    const pointerElements = findElementsWithPointer();\n    // Add all elements at once\n    clickables.push(\n      ...nativeLinks,\n      ...nativeButtons,\n      ...inputButtons,\n      ...roleButtons,\n      // ...tabbable,\n      ...clickHandlers,\n      ...dropdowns,\n      ...nativeCheckboxes,\n      ...fauxCheckboxes,\n      ...nativeRadios,\n      ...toggles,\n      ...pointerElements\n    );\n\n    // Only uniquify once at the end\n    return clickables;  // Let findElements handle the uniquification\n  }\n\n  function findToggles() {\n    const toggles = [];\n    const checkboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]');\n    const togglePattern = /switch|toggle|slider/i;\n\n    checkboxes.forEach(checkbox => {\n      let isToggle = false;\n\n      // Check the checkbox itself\n      if (togglePattern.test(checkbox.className) || togglePattern.test(checkbox.getAttribute('role') || '')) {\n        isToggle = true;\n      }\n\n      // Check parent elements (up to 3 levels)\n      if (!isToggle) {\n        let element = checkbox;\n        for (let i = 0; i < 3; i++) {\n          const parent = element.parentElement;\n          if (!parent) break;\n\n          const className = parent.className || '';\n          const role = parent.getAttribute('role') || '';\n\n          if (togglePattern.test(className) || togglePattern.test(role)) {\n            isToggle = true;\n            break;\n          }\n          element = parent;\n        }\n      }\n\n      // Check next sibling\n      if (!isToggle) {\n        const nextSibling = checkbox.nextElementSibling;\n        if (nextSibling) {\n          const className = nextSibling.className || '';\n          const role = nextSibling.getAttribute('role') || '';\n          if (togglePattern.test(className) || togglePattern.test(role)) {\n            isToggle = true;\n          }\n        }\n      }\n\n      if (isToggle) {\n        toggles.push(checkbox);\n      }\n    });\n\n    return toggles;\n  }\n\n  function findNonInteractiveElements() {\n    // Get all elements in the document\n    const all = Array.from(getAllElementsIncludingShadow('*'));\n    \n    // Filter elements based on Python implementation rules\n    return all.filter(element => {\n      if (!element.firstElementChild) {\n        const tag = element.tagName.toLowerCase();      \n        if (!['select', 'button', 'a'].includes(tag)) {\n          const validTags = ['p', 'span', 'div', 'input', 'textarea','td','th'].includes(tag) || /^h\\d$/.test(tag) || /text/.test(tag);\n          const boundingRect = element.getBoundingClientRect();\n          return validTags && boundingRect.height > 1 && boundingRect.width > 1;\n        }\n      }\n      return false;\n    });\n  }\n\n\n\n  // export function findNonInteractiveElements() {\n  //   const all = [];\n  //   try {\n  //     const elements = getAllElementsIncludingShadow('*');\n  //     all.push(...elements);\n  //   } catch (e) {\n  //     console.warn('Error getting elements:', e);\n  //   }\n    \n  //   console.debug('Total elements found:', all.length);\n    \n  //   return all.filter(element => {\n  //     try {\n  //       const tag = element.tagName.toLowerCase();      \n\n  //       // Special handling for input elements\n  //       if (tag === 'input' || tag === 'textarea') {\n  //         const boundingRect = element.getBoundingClientRect();\n  //         const value = element.value || '';\n  //         const placeholder = element.placeholder || '';\n  //         return boundingRect.height > 1 && \n  //                boundingRect.width > 1 && \n  //                (value.trim() !== '' || placeholder.trim() !== '');\n  //       }\n\n       \n  //       // Check if it's a valid tag for text content\n  //       const validTags = ['p', 'span', 'div', 'label', 'th', 'td', 'li', 'button', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'select'].includes(tag) || \n  //                        /^h\\d$/.test(tag) || \n  //                        /text/.test(tag);\n\n  //       const boundingRect = element.getBoundingClientRect();\n\n  //       // Get direct text content, excluding child element text\n  //       let directText = '';\n  //       for (const node of element.childNodes) {\n  //         // Only include text nodes (nodeType 3)\n  //         if (node.nodeType === 3) {\n  //           directText += node.textContent || '';\n  //         }\n  //       }\n        \n  //       // If no direct text and it's a table cell or heading, check label content\n  //       if (!directText.trim() && (tag === 'th' || tag === 'td' || tag === 'h1')) {\n  //         const labels = element.getElementsByTagName('label');\n  //         for (const label of labels) {\n  //           directText += label.textContent || '';\n  //         }\n  //       }\n\n  //       // If still no text and it's a heading, get all text content\n  //       if (!directText.trim() && tag === 'h1') {\n  //         directText = element.textContent || '';\n  //       }\n\n  //       directText = directText.trim();\n\n  //       // Debug logging\n  //       if (directText) {\n  //         console.debugg('Text element found:', {\n  //           tag,\n  //           text: directText,\n  //           dimensions: boundingRect,\n  //           element\n  //         });\n  //       }\n\n  //       return validTags && \n  //              boundingRect.height > 1 && \n  //              boundingRect.width > 1 && \n  //              directText !== '';\n               \n  //     } catch (e) {\n  //       console.warn('Error processing element:', e);\n  //       return false;\n  //     }\n  //   });\n  // }\n\n\n\n\n\n  function findElementsWithPointer() {\n    const elements = [];\n    const allElements = getAllElementsIncludingShadow('*');\n    \n    console.log('Checking elements with pointer style...');\n    \n    allElements.forEach(element => {\n      // Skip SVG elements for now\n      if (element instanceof SVGElement || element.tagName.toLowerCase() === 'svg') {\n        return;\n      }\n      \n      const style = window.getComputedStyle(element);\n      if (style.cursor === 'pointer') {\n        elements.push(element);\n      }\n    });\n    \n    console.log(`Found ${elements.length} elements with pointer cursor`);\n    return elements;\n  }\n\n  function findCheckables() {\n    const elements = [];\n\n    elements.push(...getAllElementsIncludingShadow('input[type=\"checkbox\"]'));\n    elements.push(...getAllElementsIncludingShadow('input[type=\"radio\"]'));\n    const all_elements = getAllElementsIncludingShadow('label');\n    const radioClasses = Array.from(all_elements).filter(el => {\n      return /.*radio.*/i.test(el.className);    \n    });\n    elements.push(...radioClasses);\n    return elements;\n  }\n\n  function findFillables() {\n    const elements = [];\n\n    const inputs = [...getAllElementsIncludingShadow('input:not([type=\"radio\"]):not([type=\"checkbox\"])')];\n    console.log('Found inputs:', inputs.length, inputs);\n    elements.push(...inputs);\n    \n    const textareas = [...getAllElementsIncludingShadow('textarea')];\n    console.log('Found textareas:', textareas.length);\n    elements.push(...textareas);\n    \n    const editables = [...getAllElementsIncludingShadow('[contenteditable=\"true\"]')];\n    console.log('Found editables:', editables.length);\n    elements.push(...editables);\n\n    return elements;\n  }\n\n  // Helper function to check if element is a form control\n  function isFormControl(elementInfo) {\n    return /^(input|select|textarea|button|label)$/i.test(elementInfo.tag);\n  }\n\n  const isDropdownItem = (elementInfo) => {\n    const dropdownPatterns = [\n      /dropdown[-_]?item/i,    // matches: dropdown-item, dropdownitem, dropdown_item\n      /menu[-_]?item/i,        // matches: menu-item, menuitem, menu_item\n      /dropdown[-_]?link/i,    // matches: dropdown-link, dropdownlink, dropdown_link\n      /list[-_]?item/i,       // matches: list-item, listitem, list_item\n      /select[-_]?item/i,     // matches: select-item, selectitem, select_item  \n    ];\n\n    const rolePatterns = [\n      /menu[-_]?item/i,       // matches: menuitem, menu-item\n      /option/i,              // matches: option\n      /list[-_]?item/i,      // matches: listitem, list-item\n      /tree[-_]?item/i       // matches: treeitem, tree-item\n    ];\n\n    const hasMatchingClass = elementInfo.element.className && \n                            dropdownPatterns.some(pattern => \n                              pattern.test(elementInfo.element.className)\n                            );\n\n    const hasMatchingRole = elementInfo.element.getAttribute('role') && \n                           rolePatterns.some(pattern => \n                             pattern.test(elementInfo.element.getAttribute('role'))\n                           );\n\n    return hasMatchingClass || hasMatchingRole;\n  };\n\n  /**\n   * Finds the first element matching a CSS selector, traversing Shadow DOM if necessary\n   * @param {string} selector - CSS selector to search for\n   * @param {Element} [root=document] - Root element to start searching from\n   * @returns {Element|null} - The first matching element or null if not found\n   */\n  function querySelectorShadow(selector, root = document) {\n    // First try to find in light DOM\n    let element = root.querySelector(selector);\n    if (element) return element;\n    \n    // Get all elements with shadow root\n    const shadowElements = Array.from(root.querySelectorAll('*'))\n        .filter(el => el.shadowRoot);\n    \n    // Search through each shadow root until we find a match\n    for (const el of shadowElements) {\n        element = querySelectorShadow(selector, el.shadowRoot);\n        if (element) return element;\n    }\n    \n    return null;\n  }\n\n  const getElementByXPathOrCssSelector = (element_info) => {\n    console.log('getElementByXPathOrCssSelector:', element_info);\n\n    findElement(document, element_info.iframe_selector, element_info.css_selector);\n  };\n\n  const findElement = (root, iframeSelector, cssSelector) => {\n    let element;\n    \n    if (iframeSelector) {      \n      const frames = getAllDocumentElementsIncludingShadow('iframe', root);\n      \n      // Iterate over all frames and compare their CSS selectors\n      for (const frame of frames) {\n        const selector = generateCssPath(frame);\n        if (selector === iframeSelector) {\n          const frameDocument = frame.contentDocument || frame.contentWindow.document;\n          element = querySelectorShadow(cssSelector, frameDocument);\n          console.log('found element ', element);\n          break;\n        }        \n      }  }\n    else\n      element = querySelectorShadow(cssSelector, root);\n      \n    if (!element) {\n      console.warn('Failed to find element with CSS selector:', cssSelector);\n    }\n\n    return element;\n  };\n\n\n  function isDecendent(parent, child) {\n    let element = child;\n    while (element && element !== parent && element.nodeType === Node.ELEMENT_NODE) {              \n        element = getParentNode(element);      \n    }\n    return element === parent;\n  }\n\n  function generateXPath(element) {\n    return '/'+extractElementPath(element).map(item => `${item.tagName}${item.onlyChild ? '' : `[${item.index}]`}`).join('/');\n  }\n\n  function generateCssPath(element) {\n    return extractElementPath(element).map(item => `${item.tagName}:nth-of-type(${item.index})`).join(' > ');\n  }\n\n  function extractElementPath(element) {\n    if (!element) {\n      console.error('ERROR: No element provided to generatePath');\n      return [];\n    }\n    const path = [];\n    // traversing up the DOM tree\n    while (element && element.nodeType === Node.ELEMENT_NODE) {    \n      let tagName = element.nodeName.toLowerCase();\n          \n      let sibling = element;\n      let index = 1;\n      \n      while (sibling = sibling.previousElementSibling) {\n        if (sibling.nodeName.toLowerCase() === tagName) index++;\n      }\n      sibling = element;\n      \n      let onlyChild = (index === 1);\n      while (onlyChild && (sibling = sibling.nextElementSibling)) {\n        if (sibling.nodeName.toLowerCase() === tagName) onlyChild = false;\n      }\n         \n      // add a tuple with tagName, index (nth), and onlyChild    \n      path.unshift({\n        tagName: tagName,\n        index: index,\n        onlyChild: onlyChild      \n      });    \n\n      element = getParentNode(element);\n    }\n    \n    return path;\n  }\n\n  function cleanHTML(rawHTML) {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(rawHTML, \"text/html\");\n\n    function cleanElement(element) {\n      const allowedAttributes = new Set([\n        \"role\",\n        \"type\",\n        \"class\",\n        \"href\",\n        \"alt\",\n        \"title\",\n        \"readonly\",\n        \"checked\",\n        \"enabled\",\n        \"disabled\",\n      ]);\n\n      [...element.attributes].forEach(attr => {\n        const name = attr.name.toLowerCase();\n        const value = attr.value;\n\n        const isTestAttribute = /^(testid|test-id|data-test-id)$/.test(name);\n        const isDataAttribute = name.startsWith(\"data-\") && value;\n        const isBooleanAttribute = [\"readonly\", \"checked\", \"enabled\", \"disabled\"].includes(name);\n\n        if (!allowedAttributes.has(name) && !isDataAttribute && !isTestAttribute && !isBooleanAttribute) {\n          element.removeAttribute(name);\n        }\n      });\n\n      // Handle SVG content - more aggressive replacement\n      if (element.tagName.toLowerCase() === \"svg\") {\n        // Remove all attributes except class and role\n        [...element.attributes].forEach(attr => {\n          const name = attr.name.toLowerCase();\n          if (name !== \"class\" && name !== \"role\") {\n            element.removeAttribute(name);\n          }\n        });\n        element.innerHTML = \"CONTENT REMOVED\";\n      } else {\n        // Recursively clean child elements\n        Array.from(element.children).forEach(cleanElement);\n      }\n\n      // Only remove empty elements that aren't semantic or icon elements\n      const keepEmptyElements = ['i', 'span', 'svg', 'button', 'input'];\n      if (!keepEmptyElements.includes(element.tagName.toLowerCase()) && \n          !element.children.length && \n          !element.textContent.trim()) {\n        element.remove();\n      }\n    }\n\n    // Process all elements in the document body\n    Array.from(doc.body.children).forEach(cleanElement);\n    return doc.body.innerHTML;\n  }\n\n  function getContainingIframe(element) {\n    // If not in an iframe, return null\n    if (element.ownerDocument.defaultView === window.top) {\n      return null;\n    }\n    \n    // Try to find the iframe in the parent document that contains our element\n    try {\n      const parentDocument = element.ownerDocument.defaultView.parent.document;\n      const iframes = parentDocument.querySelectorAll('iframe');\n      \n      for (const iframe of iframes) {\n        if (iframe.contentWindow === element.ownerDocument.defaultView) {\n          return iframe;\n        }\n      }\n    } catch (e) {\n      // Cross-origin restriction\n      return \"Cross-origin iframe - cannot access details\";\n    }\n    \n    return null;\n  }\n\n  function getElementInfo(element, index) {\n    // Get text content with spaces between elements\n    /* function getTextContent(element) {\n      const walker = document.createTreeWalker(\n        element,\n        NodeFilter.SHOW_TEXT,\n        null,\n        false\n      );\n\n      let text = '';\n      let node;\n\n      while (node = walker.nextNode()) {\n        const trimmedText = node.textContent.trim();\n        if (trimmedText) {\n          // Add space if there's already text\n          if (text) {\n             text += ' ';\n          }\n          text += trimmedText;\n        }\n      }\n\n      return text;\n    } */\n    \n    const xpath = generateXPath(element);\n    const css_selector = generateCssPath(element);\n    //disabled since it's blocking event handling in recorder\n    const short_css_selector = ''; //getRobustSelector(element);\n\n    const iframe = getContainingIframe(element);  \n    const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\n    //disabled since it's blocking event handling in recorder\n    const short_iframe_selector = ''; //iframe ? getRobustSelector(iframe) : \"\";\n\n    // Return element info with pre-calculated values\n    return new ElementInfo(element, index, {\n      tag: element.tagName.toLowerCase(),\n      type: element.type || '',\n      text: element.innerText || element.placeholder || '', //getTextContent(element),\n      html: cleanHTML(element.outerHTML),\n      xpath: xpath,\n      css_selector: css_selector,\n      bounding_box: element.getBoundingClientRect(),\n      iframe_selector: iframe_selector,\n      short_css_selector: short_css_selector,\n      short_iframe_selector: short_iframe_selector\n    });\n  }\n\n  function getAriaLabelledByText(elementInfo, includeHidden=true) {\n    if (!elementInfo.element.hasAttribute('aria-labelledby')) return '';\n\n    const ids = elementInfo.element.getAttribute('aria-labelledby').split(/\\s+/);\n    let labelText = '';\n\n    //locate root (document or iFrame document if element is contained in an iframe)\n    let root = document;\n    if (elementInfo.iframe_selector) {      \n      const frames = getAllDocumentElementsIncludingShadow('iframe', document);\n      \n      // Iterate over all frames and compare their CSS selectors\n      for (const frame of frames) {\n        const selector = generateCssPath(frame);\n        if (selector === elementInfo.iframe_selector) {\n          root = frame.contentDocument || frame.contentWindow.document;        \n          break;\n        }\n      } \n    }\n\n    ids.forEach(id => {\n      const el = querySelectorShadow(`#${CSS.escape(id)}`, root);\n      if (el) {\n        if (includeHidden || el.offsetParent !== null || getComputedStyle(el).display !== 'none') {\n          labelText += el.textContent.trim() + ' ';\n        }\n      }\n    });\n\n    return labelText.trim();\n  }\n\n\n\n  const filterZeroDimensions = (elementInfo) => {\n    const rect = elementInfo.bounding_box;\n    //single pixel elements are typically faux controls and should be filtered too\n    const hasSize = rect.width > 1 && rect.height > 1;\n    const style = window.getComputedStyle(elementInfo.element);\n    const isVisible = style.display !== 'none' && style.visibility !== 'hidden';\n    \n    if (!hasSize || !isVisible) {\n      \n      return false;\n    }\n    return true;\n  };\n\n\n\n  function uniquifyElements(elements) {\n    const seen = new Set();\n\n    console.log(`Starting uniquification with ${elements.length} elements`);\n\n    // Filter out testing infrastructure elements first\n    const filteredInfrastructure = elements.filter(element_info => {\n      // Skip the highlight-overlay element completely - it's part of the testing infrastructure\n      if (element_info.element.id === 'highlight-overlay' || \n          (element_info.css_selector && element_info.css_selector.includes('#highlight-overlay'))) {\n        console.log('Filtered out testing infrastructure element:', element_info.css_selector);\n        return false;\n      }\n      \n      // Filter out UI framework container/manager elements\n      const el = element_info.element;\n      // UI framework container checks - generic detection for any framework\n      if ((el.getAttribute('data-rendered-by') || \n           el.getAttribute('data-reactroot') || \n           el.getAttribute('ng-version') || \n           el.getAttribute('data-component-id') ||\n           el.getAttribute('data-root') ||\n           el.getAttribute('data-framework')) && \n          (el.className && \n           typeof el.className === 'string' && \n           (el.className.includes('Container') || \n            el.className.includes('container') || \n            el.className.includes('Manager') || \n            el.className.includes('manager')))) {\n        console.log('Filtered out UI framework container element:', element_info.css_selector);\n        return false;\n      }\n      \n      // Direct filter for framework container elements that shouldn't be interactive\n      // Consolidating multiple container detection patterns into one efficient check\n      const isFullViewport = element_info.bounding_box && \n                           element_info.bounding_box.x <= 5 && \n                           element_info.bounding_box.y <= 5 && \n                           element_info.bounding_box.width >= (window.innerWidth * 0.95) && \n                           element_info.bounding_box.height >= (window.innerHeight * 0.95);\n                           \n      // Empty content check\n      const isEmpty = !el.innerText || el.innerText.trim() === '';\n      \n      // Check if it's a framework container element\n      if (element_info.element.tagName === 'DIV' && \n          isFullViewport && \n          isEmpty && \n          (\n            // Pattern matching for root containers\n            (element_info.xpath && \n              (element_info.xpath.match(/^\\/html\\[\\d+\\]\\/body\\[\\d+\\]\\/div\\[\\d+\\]\\/div\\[\\d+\\]$/) || \n               element_info.xpath.match(/^\\/\\/\\*\\[@id='[^']+'\\]\\/div\\[\\d+\\]$/))) ||\n            \n            // Simple DOM structure\n            (element_info.css_selector.split(' > ').length <= 4 && element_info.depth <= 5) ||\n            \n            // Empty or container-like classes\n            (!el.className || el.className === '' || \n             (typeof el.className === 'string' && \n              (el.className.includes('overlay') || \n               el.className.includes('container') || \n               el.className.includes('wrapper'))))\n          )) {\n        console.log('Filtered out framework container element:', element_info.css_selector);\n        return false;\n      }\n      \n      return true;\n    });\n\n    // First filter out elements with zero dimensions\n    const nonZeroElements = filteredInfrastructure.filter(filterZeroDimensions);\n    // sort by CSS selector depth so parents are processed first\n    nonZeroElements.sort((a, b) => a.getDepth() - b.getDepth());\n    console.log(`After dimension filtering: ${nonZeroElements.length} elements remain (${elements.length - nonZeroElements.length} removed)`);\n    \n    const filteredByParent = nonZeroElements.filter(element_info => {\n\n      const parent = findClosestParent(seen, element_info);\n      const keep = parent == null || shouldKeepNestedElement(element_info, parent);\n      // console.log(\"node \", element_info.index, \": keep=\", keep, \" parent=\", parent);\n      // if (!keep && !element_info.xpath) {\n      //   console.log(\"Filtered out element \", element_info,\" because it's a nested element of \", parent);\n      // }\n      if (keep)\n        seen.add(element_info.css_selector);\n\n      return keep;\n    });\n\n    console.log(`After parent/child filtering: ${filteredByParent.length} elements remain (${nonZeroElements.length - filteredByParent.length} removed)`);\n\n    // Final overlap filtering\n    const filteredResults = filteredByParent.filter(element => {\n\n       // Look for any element that came BEFORE this one in the array\n      const hasEarlierOverlap = filteredByParent.some(other => {\n        // Only check elements that came before (lower index)\n        if (filteredByParent.indexOf(other) >= filteredByParent.indexOf(element)) {\n          return false;\n        }\n        \n        const isOverlapping = areElementsOverlapping(element, other); \n        return isOverlapping;\n      });  \n\n      // Keep element if it has no earlier overlapping elements\n      return !hasEarlierOverlap;\n    });\n    \n    \n    \n    // Check for overlay removal\n    console.log(`After filtering: ${filteredResults.length} (${filteredByParent.length - filteredResults.length} removed by overlap)`);\n    \n    const nonOverlaidElements = filteredResults.filter(element => {\n      return !isOverlaid(element);\n    });\n\n    console.log(`Final elements after overlay removal: ${nonOverlaidElements.length} (${filteredResults.length - nonOverlaidElements.length} removed)`);\n    \n    return nonOverlaidElements;\n\n  }\n\n\n\n  const areElementsOverlapping = (element1, element2) => {\n    if (element1.css_selector === element2.css_selector) {\n      return true;\n    }\n    \n    const box1 = element1.bounding_box;\n    const box2 = element2.bounding_box;\n    \n    return box1.x === box2.x &&\n           box1.y === box2.y &&\n           box1.width === box2.width &&\n           box1.height === box2.height;\n          //  element1.text === element2.text &&\n          //  element2.tag === 'a';\n  };\n\n  function findClosestParent(seen, element_info) {  \n    \n    // Split the xpath into segments\n    const segments = element_info.css_selector.split(' > ');\n    \n    // Try increasingly shorter paths until we find one in the seen set\n    for (let i = segments.length - 1; i > 0; i--) {\n      const parentPath = segments.slice(0, i).join(' > ');\n      if (seen.has(parentPath)) {\n        return parentPath;\n      }\n    }\n\n    return null;\n  }\n\n  function shouldKeepNestedElement(elementInfo, parentPath) {\n    let result = false;\n    const parentSegments = parentPath.split(' > ');\n\n    const isParentLink = /^a(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\n    if (isParentLink) {\n      return false;    \n    }\n    // If this is a checkbox/radio input\n    if (elementInfo.tag === 'input' && \n        (elementInfo.type === 'checkbox' || elementInfo.type === 'radio')) {\n      \n      // Check if parent is a label by looking at the parent xpath's last segment\n      \n      const isParentLabel = /^label(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\n      \n      // If parent is a label, don't keep the input (we'll keep the label instead)\n      if (isParentLabel) {\n        return false;\n      }\n    }\n    \n    // Keep all other form controls and dropdown items\n    if (isFormControl(elementInfo) || isDropdownItem(elementInfo)) {\n      result = true;\n    }\n\n    if(isTableCell(elementInfo)) {\n      result = true;\n    }\n    \n    \n    // console.log(`shouldKeepNestedElement: ${elementInfo.tag} ${elementInfo.text} ${elementInfo.xpath} -> ${parentXPath} -> ${result}`);\n    return result;\n  }\n\n\n  function isTableCell(elementInfo) {\n    const element = elementInfo.element;\n    if(!element || !(element instanceof HTMLElement)) {\n      return false;\n    }\n    const validTags = new Set(['td', 'th']);\n    const validRoles = new Set(['cell', 'gridcell', 'columnheader', 'rowheader']);\n    \n    const tag = element.tagName.toLowerCase();\n    const role = element.getAttribute('role')?.toLowerCase();\n\n    if (validTags.has(tag) || (role && validRoles.has(role))) {\n      return true;\n    }\n    return false;\n    \n  }\n\n  function isOverlaid(elementInfo) {\n    const element = elementInfo.element;\n    const boundingRect = elementInfo.bounding_box;\n    \n\n    \n    \n    // Create a diagnostic logging function that only logs when needed\n    const diagnosticLog = (...args) => {\n      { // set to true for debugging\n        console.log('[OVERLAY-DEBUG]', ...args);\n      }\n    };\n\n    // Special handling for tooltips\n    if (elementInfo.element.className && typeof elementInfo.element.className === 'string' && \n        elementInfo.element.className.includes('tooltip')) {\n      diagnosticLog('Element is a tooltip, not considering it overlaid');\n      return false;\n    }\n    \n    \n      \n        // Get element at the center point to check if it's covered by a popup/modal\n        const middleX = boundingRect.x + boundingRect.width/2;\n        const middleY = boundingRect.y + boundingRect.height/2;\n        const elementAtMiddle = element.ownerDocument.elementFromPoint(middleX, middleY);\n        \n        if (elementAtMiddle && \n            elementAtMiddle !== element && \n            !isDecendent(element, elementAtMiddle) && \n            !isDecendent(elementAtMiddle, element)) {\n\n        \n        return true;\n      }\n        \n        \n      return false;\n    \n    }\n\n\n\n  /**\n   * Get the “best” short, unique, and robust CSS selector for an element.\n   * \n   * @param {Element} element\n   * @returns {string} A selector guaranteed to find exactly that element in its context\n   */\n  function getRobustSelector(element) {\n    // 1. Figure out the real “root” (iframe doc, shadow root, or main doc)\n    const root = (() => {\n      const rootNode = element.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        return rootNode;\n      }\n      return element.ownerDocument;\n    })();\n\n    // 2. Options to bias toward stable attrs and away from auto-generated classes\n    const options = {\n      root,\n      // only use data-*, id or aria-label by default\n      attr(name, value) {\n        if (name === 'id' || name.startsWith('data-') || name === 'aria-label') {\n          return true;\n        }\n        return false;\n      },\n      // skip framework junk\n      filter(name, value) {\n        if (name.startsWith('ng-') || name.startsWith('_ngcontent') || /^p-/.test(name)) {\n          return false;\n        }\n        return true;\n      },\n      // let finder try really short seeds\n      seedMinLength: 1,\n      optimizedMinLength: 1,\n    };\n\n    let selector;\n    try {\n      selector = finder(element, options);\n      // 3. Verify it really works in the context\n      const found = root.querySelectorAll(selector);\n      if (found.length !== 1 || found[0] !== element) {\n        throw new Error('not unique or not found');\n      }\n      return selector;\n    } catch (err) {\n      // 4. Fallback: full path (you already have this utility)\n      console.warn('[getRobustSelector] finder failed, falling back to full path:', err);\n      return generateCssPath(element); // you’d import or define this elsewhere\n    }\n  }\n\n  /**\n   * Checks if an element is scrollable (has scrollable content)\n   * \n   * @param element - The element to check\n   * @returns boolean indicating if the element is scrollable\n   */\n  function isScrollableContainer(element) {\n    if (!element) return false;\n    \n    const style = window.getComputedStyle(element);\n    \n    // Reliable way to detect if an element has scrollbars or is scrollable\n    const hasScrollHeight = element.scrollHeight > element.clientHeight;\n    const hasScrollWidth = element.scrollWidth > element.clientWidth;\n    \n    // Check actual style properties\n    const hasOverflowY = style.overflowY === 'auto' || \n                        style.overflowY === 'scroll' || \n                        style.overflowY === 'overlay';\n    const hasOverflowX = style.overflowX === 'auto' || \n                        style.overflowX === 'scroll' || \n                        style.overflowX === 'overlay';\n    \n    // Check common class names and attributes for scrollable containers across frameworks\n    const hasScrollClasses = element.classList.contains('scroll') || \n                            element.classList.contains('scrollable') ||\n                            element.classList.contains('overflow') ||\n                            element.classList.contains('overflow-auto') ||\n                            element.classList.contains('overflow-scroll') ||\n                            element.getAttribute('data-scrollable') === 'true';\n                            \n    // Check for height/max-height constraints that often indicate scrolling content\n    const hasHeightConstraint = style.maxHeight && \n                               style.maxHeight !== 'none' && \n                               style.maxHeight !== 'auto';\n    \n    // An element is scrollable if it has:\n    // 1. Actual scrollbars in use (most reliable check) OR\n    // 2. Overflow styles allowing scrolling AND content that would require scrolling\n    return (hasScrollHeight && hasOverflowY) || \n           (hasScrollWidth && hasOverflowX) ||\n           (hasScrollClasses && (hasScrollHeight || hasScrollWidth)) ||\n           (hasHeightConstraint && hasScrollHeight);\n  }\n\n  /**\n   * Detects scrollable containers that are ancestors of the target element\n   * \n   * This function traverses up the DOM tree from the target element and identifies\n   * all scrollable containers (elements that have scrollable content).\n   * \n   * @param target - The target element to start the search from\n   * @returns Array of objects with selector and scroll properties\n   */\n  function detectScrollableContainers(target) {\n    const scrollableContainers = [];\n    \n    if (!target) {\n      return scrollableContainers;\n    }\n    \n    console.log('🔍 [detectScrollableContainers] Starting detection for target:', target.tagName, target.id, target.className);\n    \n    // Detect if target is inside an iframe\n    const iframe = getContainingIframe(target);\n    const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\n    \n    console.log('🔍 [detectScrollableContainers] Iframe context:', iframe ? 'inside iframe' : 'main document', 'selector:', iframe_selector);\n    \n    // Start from the target element and traverse up the DOM tree\n    let currentElement = target;\n    let depth = 0;\n    const MAX_DEPTH = 10; // Limit traversal depth to avoid infinite loops\n    \n    while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE && depth < MAX_DEPTH) {        \n      // Check if the current element is scrollable\n      if (isScrollableContainer(currentElement)) {\n        console.log('🔍 [detectScrollableContainers] Found scrollable container at depth', depth, ':', currentElement.tagName, currentElement.id, currentElement.className);\n        \n        const container = {\n          containerEl: currentElement,\n          selector: generateCssPath(currentElement),\n          iframe_selector: iframe_selector,\n          scrollTop: currentElement.scrollTop,\n          scrollLeft: currentElement.scrollLeft,\n          scrollHeight: currentElement.scrollHeight,\n          scrollWidth: currentElement.scrollWidth,\n          clientHeight: currentElement.clientHeight,\n          clientWidth: currentElement.clientWidth\n        };\n        \n        scrollableContainers.push(container);\n      }\n      \n      // Move to parent element\n      currentElement = getParentNode(currentElement);\n      \n      depth++;\n    }\n    \n    console.log('🔍 [detectScrollableContainers] Detection complete. Found', scrollableContainers.length, 'scrollable containers');\n    return scrollableContainers;\n  }\n\n  class DOMSerializer {\n      constructor(options = {}) {\n        this.options = {\n          includeStyles: true,\n          includeScripts: false, // Security consideration\n          includeFrames: true,\n          includeShadowDOM: true,\n          maxDepth: 50,\n          ...options\n        };\n        this.serializedFrames = new Map();\n        this.shadowRoots = new Map();\n      }\n    \n      /**\n       * Serialize a complete document or element\n       */\n      serialize(rootElement = document) {\n        try {\n          const serialized = {\n            type: 'document',\n            doctype: this.serializeDoctype(rootElement),\n            documentElement: this.serializeElement(rootElement.documentElement || rootElement),\n            frames: [],\n            timestamp: Date.now(),\n            url: rootElement.URL || window.location?.href,\n            metadata: {\n              title: rootElement.title,\n              charset: rootElement.characterSet,\n              contentType: rootElement.contentType\n            }\n          };\n    \n          // Serialize frames and iframes if enabled\n          if (this.options.includeFrames) {\n            serialized.frames = this.serializeFrames(rootElement);\n          }\n    \n          return serialized;\n        } catch (error) {\n          console.error('Serialization error:', error);\n          throw new Error(`DOM serialization failed: ${error.message}`);\n        }\n      }\n    \n      /**\n       * Serialize document type declaration\n       */\n      serializeDoctype(doc) {\n        if (!doc.doctype) return null;\n        \n        return {\n          name: doc.doctype.name,\n          publicId: doc.doctype.publicId,\n          systemId: doc.doctype.systemId\n        };\n      }\n    \n      /**\n       * Serialize an individual element and its children\n       */\n      serializeElement(element, depth = 0) {\n        if (depth > this.options.maxDepth) {\n          return { type: 'text', content: '<!-- Max depth exceeded -->' };\n        }\n    \n        const nodeType = element.nodeType;\n        \n        switch (nodeType) {\n          case Node.ELEMENT_NODE:\n            return this.serializeElementNode(element, depth);\n          case Node.TEXT_NODE:\n            return this.serializeTextNode(element);\n          case Node.COMMENT_NODE:\n            return this.serializeCommentNode(element);\n          case Node.DOCUMENT_FRAGMENT_NODE:\n            return this.serializeDocumentFragment(element, depth);\n          default:\n            return null;\n        }\n      }\n    \n      /**\n       * Serialize element node with attributes and children\n       */\n      serializeElementNode(element, depth) {\n        const tagName = element.tagName.toLowerCase();\n        \n        // Skip script tags for security unless explicitly enabled\n        if (tagName === 'script' && !this.options.includeScripts) {\n          return { type: 'comment', content: '<!-- Script tag removed for security -->' };\n        }\n    \n        const serialized = {\n          type: 'element',\n          tagName: tagName,\n          attributes: this.serializeAttributes(element),\n          children: [],\n          shadowRoot: null\n        };\n    \n        // Handle Shadow DOM\n        if (this.options.includeShadowDOM && element.shadowRoot) {\n          serialized.shadowRoot = this.serializeShadowRoot(element.shadowRoot, depth + 1);\n        }\n    \n        // Handle special elements\n        if (tagName === 'iframe' || tagName === 'frame') {\n          serialized.frameData = this.serializeFrameElement(element);\n        }\n    \n        // Serialize children\n        for (const child of element.childNodes) {\n          const serializedChild = this.serializeElement(child, depth + 1);\n          if (serializedChild) {\n            serialized.children.push(serializedChild);\n          }\n        }\n    \n        // Include computed styles if enabled\n        if (this.options.includeStyles && element.nodeType === Node.ELEMENT_NODE) {\n          serialized.computedStyle = this.serializeComputedStyle(element);\n        }\n    \n        return serialized;\n      }\n    \n      /**\n       * Serialize element attributes\n       */\n      serializeAttributes(element) {\n        const attributes = {};\n        \n        if (element.attributes) {\n          for (const attr of element.attributes) {\n            attributes[attr.name] = attr.value;\n          }\n        }\n    \n        return attributes;\n      }\n    \n      /**\n       * Serialize computed styles\n       */\n      serializeComputedStyle(element) {\n        try {\n          const computedStyle = window.getComputedStyle(element);\n          const styles = {};\n          \n          // Only serialize non-default values to reduce size\n          const importantStyles = [\n            'display', 'position', 'width', 'height', 'margin', 'padding',\n            'border', 'background', 'color', 'font-family', 'font-size',\n            'text-align', 'visibility', 'z-index', 'transform'\n          ];\n    \n          for (const prop of importantStyles) {\n            const value = computedStyle.getPropertyValue(prop);\n            if (value && value !== 'initial' && value !== 'normal') {\n              styles[prop] = value;\n            }\n          }\n    \n          return styles;\n        } catch (error) {\n          return {};\n        }\n      }\n    \n      /**\n       * Serialize text node\n       */\n      serializeTextNode(node) {\n        return {\n          type: 'text',\n          content: node.textContent\n        };\n      }\n    \n      /**\n       * Serialize comment node\n       */\n      serializeCommentNode(node) {\n        return {\n          type: 'comment',\n          content: node.textContent\n        };\n      }\n    \n      /**\n       * Serialize document fragment\n       */\n      serializeDocumentFragment(fragment, depth) {\n        const serialized = {\n          type: 'fragment',\n          children: []\n        };\n    \n        for (const child of fragment.childNodes) {\n          const serializedChild = this.serializeElement(child, depth + 1);\n          if (serializedChild) {\n            serialized.children.push(serializedChild);\n          }\n        }\n    \n        return serialized;\n      }\n    \n      /**\n       * Serialize Shadow DOM\n       */\n      serializeShadowRoot(shadowRoot, depth) {\n        const serialized = {\n          type: 'shadowRoot',\n          mode: shadowRoot.mode,\n          children: []\n        };\n    \n        for (const child of shadowRoot.childNodes) {\n          const serializedChild = this.serializeElement(child, depth + 1);\n          if (serializedChild) {\n            serialized.children.push(serializedChild);\n          }\n        }\n    \n        return serialized;\n      }\n    \n      /**\n       * Serialize frame/iframe elements\n       */\n      serializeFrameElement(frameElement) {\n        const frameData = {\n          src: frameElement.src,\n          name: frameElement.name,\n          id: frameElement.id,\n          sandbox: frameElement.sandbox?.toString() || '',\n          allowfullscreen: frameElement.allowFullscreen\n        };\n    \n        // Try to access frame content (may fail due to CORS)\n        try {\n          const frameDoc = frameElement.contentDocument;\n          if (frameDoc && this.options.includeFrames) {\n            frameData.content = this.serialize(frameDoc);\n          }\n        } catch (error) {\n          frameData.accessError = 'Cross-origin frame content not accessible';\n        }\n    \n        return frameData;\n      }\n    \n      /**\n       * Serialize all frames in document\n       */\n      serializeFrames(doc) {\n        const frames = [];\n        const frameElements = doc.querySelectorAll('iframe, frame');\n    \n        for (const frameElement of frameElements) {\n          try {\n            const frameDoc = frameElement.contentDocument;\n            if (frameDoc) {\n              frames.push({\n                element: this.serializeElement(frameElement),\n                content: this.serialize(frameDoc)\n              });\n            }\n          } catch (error) {\n            frames.push({\n              element: this.serializeElement(frameElement),\n              error: 'Frame content not accessible'\n            });\n          }\n        }\n    \n        return frames;\n      }\n    \n      /**\n       * Deserialize serialized DOM data back to DOM nodes\n       */\n      deserialize(serializedData, targetDocument = document) {\n        try {\n          if (serializedData.type === 'document') {\n            return this.deserializeDocument(serializedData, targetDocument);\n          } else {\n            return this.deserializeElement(serializedData, targetDocument);\n          }\n        } catch (error) {\n          console.error('Deserialization error:', error);\n          throw new Error(`DOM deserialization failed: ${error.message}`);\n        }\n      }\n    \n      /**\n       * Deserialize complete document\n       */\n      deserializeDocument(serializedDoc, targetDoc) {\n        // Create new document if needed\n        const doc = targetDoc || document.implementation.createHTMLDocument();\n    \n        // Set doctype if present\n        if (serializedDoc.doctype) {\n          const doctype = document.implementation.createDocumentType(\n            serializedDoc.doctype.name,\n            serializedDoc.doctype.publicId,\n            serializedDoc.doctype.systemId\n          );\n          doc.replaceChild(doctype, doc.doctype);\n        }\n    \n        // Deserialize document element\n        if (serializedDoc.documentElement) {\n          const newDocElement = this.deserializeElement(serializedDoc.documentElement, doc);\n          doc.replaceChild(newDocElement, doc.documentElement);\n        }\n    \n        // Handle metadata\n        if (serializedDoc.metadata) {\n          doc.title = serializedDoc.metadata.title || '';\n        }\n    \n        return doc;\n      }\n    \n      /**\n       * Deserialize individual element\n       */\n      deserializeElement(serializedNode, doc) {\n        switch (serializedNode.type) {\n          case 'element':\n            return this.deserializeElementNode(serializedNode, doc);\n          case 'text':\n            return doc.createTextNode(serializedNode.content);\n          case 'comment':\n            return doc.createComment(serializedNode.content);\n          case 'fragment':\n            return this.deserializeDocumentFragment(serializedNode, doc);\n          case 'shadowRoot':\n            // Shadow roots are handled during element creation\n            return null;\n          default:\n            return null;\n        }\n      }\n    \n      /**\n       * Deserialize element node\n       */\n      deserializeElementNode(serializedElement, doc) {\n        const element = doc.createElement(serializedElement.tagName);\n    \n        // Set attributes\n        if (serializedElement.attributes) {\n          for (const [name, value] of Object.entries(serializedElement.attributes)) {\n            try {\n              element.setAttribute(name, value);\n            } catch (error) {\n              console.warn(`Failed to set attribute ${name}:`, error);\n            }\n          }\n        }\n    \n        // Apply computed styles if available\n        if (serializedElement.computedStyle && this.options.includeStyles) {\n          for (const [prop, value] of Object.entries(serializedElement.computedStyle)) {\n            try {\n              element.style.setProperty(prop, value);\n            } catch (error) {\n              console.warn(`Failed to set style ${prop}:`, error);\n            }\n          }\n        }\n    \n        // Create shadow root if present\n        if (serializedElement.shadowRoot && element.attachShadow) {\n          try {\n            const shadowRoot = element.attachShadow({ \n              mode: serializedElement.shadowRoot.mode || 'open' \n            });\n            \n            // Deserialize shadow root children\n            for (const child of serializedElement.shadowRoot.children) {\n              const childElement = this.deserializeElement(child, doc);\n              if (childElement) {\n                shadowRoot.appendChild(childElement);\n              }\n            }\n          } catch (error) {\n            console.warn('Failed to create shadow root:', error);\n          }\n        }\n    \n        // Deserialize children\n        if (serializedElement.children) {\n          for (const child of serializedElement.children) {\n            const childElement = this.deserializeElement(child, doc);\n            if (childElement) {\n              element.appendChild(childElement);\n            }\n          }\n        }\n    \n        // Handle frame content\n        if (serializedElement.frameData && serializedElement.frameData.content) {\n          // Frame content deserialization would happen after the frame loads\n          element.addEventListener('load', () => {\n            try {\n              const frameDoc = element.contentDocument;\n              if (frameDoc) {\n                this.deserializeDocument(serializedElement.frameData.content, frameDoc);\n              }\n            } catch (error) {\n              console.warn('Failed to deserialize frame content:', error);\n            }\n          });\n        }\n    \n        return element;\n      }\n    \n      /**\n       * Deserialize document fragment\n       */\n      deserializeDocumentFragment(serializedFragment, doc) {\n        const fragment = doc.createDocumentFragment();\n    \n        if (serializedFragment.children) {\n          for (const child of serializedFragment.children) {\n            const childElement = this.deserializeElement(child, doc);\n            if (childElement) {\n              fragment.appendChild(childElement);\n            }\n          }\n        }\n    \n        return fragment;\n      }\n    }\n    \n    // Usage example and utility functions\n    class DOMUtils {\n      /**\n       * Create serializer with common presets\n       */\n      static createSerializer(preset = 'default') {\n        const presets = {\n          default: {\n            includeStyles: true,\n            includeScripts: false,\n            includeFrames: true,\n            includeShadowDOM: true\n          },\n          minimal: {\n            includeStyles: false,\n            includeScripts: false,\n            includeFrames: false,\n            includeShadowDOM: false\n          },\n          complete: {\n            includeStyles: true,\n            includeScripts: true,\n            includeFrames: true,\n            includeShadowDOM: true\n          },\n          secure: {\n            includeStyles: true,\n            includeScripts: false,\n            includeFrames: false,\n            includeShadowDOM: true\n          }\n        };\n    \n        return new DOMSerializer(presets[preset] || presets.default);\n      }\n    \n      /**\n       * Serialize DOM to JSON string\n       */\n      static serializeToJSON(element, options) {\n        const serializer = new DOMSerializer(options);\n        const serialized = serializer.serialize(element);\n        return JSON.stringify(serialized, null, 2);\n      }\n    \n      /**\n       * Deserialize from JSON string\n       */\n      static deserializeFromJSON(jsonString, targetDocument) {\n        const serialized = JSON.parse(jsonString);\n        const serializer = new DOMSerializer();\n        return serializer.deserialize(serialized, targetDocument);\n      }\n    \n      /**\n       * Clone DOM with full fidelity including Shadow DOM\n       */\n      static deepClone(element, options) {\n        const serializer = new DOMSerializer(options);\n        const serialized = serializer.serialize(element);\n        return serializer.deserialize(serialized, element.ownerDocument);\n      }\n    \n      /**\n       * Compare two DOM structures\n       */\n      static compare(element1, element2, options) {\n        const serializer = new DOMSerializer(options);\n        const serialized1 = serializer.serialize(element1);\n        const serialized2 = serializer.serialize(element2);\n        \n        return JSON.stringify(serialized1) === JSON.stringify(serialized2);\n      }\n    }\n    \n    /*\n    // Export for use\n    if (typeof module !== 'undefined' && module.exports) {\n      module.exports = { DOMSerializer, DOMUtils };\n    } else if (typeof window !== 'undefined') {\n      window.DOMSerializer = DOMSerializer;\n      window.DOMUtils = DOMUtils;\n    }\n    */\n\n    /* Usage Examples:\n    \n    // Basic serialization\n    const serializer = new DOMSerializer();\n    const serialized = serializer.serialize(document);\n    console.log(JSON.stringify(serialized, null, 2));\n    \n    // Deserialize back to DOM\n    const clonedDoc = serializer.deserialize(serialized);\n    \n    // Using presets\n    const minimalSerializer = DOMUtils.createSerializer('minimal');\n    const secureSerializer = DOMUtils.createSerializer('secure');\n    \n    // Serialize specific element with Shadow DOM\n    const customElement = document.querySelector('my-custom-element');\n    const serializedElement = serializer.serialize(customElement);\n    \n    // JSON utilities\n    const jsonString = DOMUtils.serializeToJSON(document.body);\n    const restored = DOMUtils.deserializeFromJSON(jsonString);\n    \n    // Deep clone with Shadow DOM support\n    const clone = DOMUtils.deepClone(document.body, { includeShadowDOM: true });\n    \n    */\n\n    function serializeNodeToJSON(nodeElement) {\n      return DOMUtils.serializeToJSON(nodeElement, {includeStyles: false});\n    }\n\n    function deserializeNodeFromJSON(jsonString) {\n      return DOMUtils.deserializeFromJSON(jsonString);\n    }\n\n  /**\n   * Checks if a point is inside a bounding box\n   * \n   * @param point The point to check\n   * @param box The bounding box\n   * @returns boolean indicating if the point is inside the box\n   */\n  function isPointInsideBox(point, box) {\n    return point.x >= box.x &&\n          point.x <= box.x + box.width &&\n          point.y >= box.y &&\n          point.y <= box.y + box.height;\n  }\n\n  /**\n   * Calculates the overlap area between two bounding boxes\n   * \n   * @param box1 First bounding box\n   * @param box2 Second bounding box\n   * @returns The overlap area\n   */\n  function calculateOverlap(box1, box2) {\n    const xOverlap = Math.max(0,\n      Math.min(box1.x + box1.width, box2.x + box2.width) -\n      Math.max(box1.x, box2.x)\n    );\n    const yOverlap = Math.max(0,\n      Math.min(box1.y + box1.height, box2.y + box2.height) -\n      Math.max(box1.y, box2.y)\n    );\n    return xOverlap * yOverlap;\n  }\n\n  /**\n   * Finds an exact match between candidate elements and the actual interaction element\n   * \n   * @param candidate_elements Array of candidate element infos\n   * @param actualInteractionElementInfo The actual interaction element info\n   * @returns The matching candidate element info, or null if no match is found\n   */\n  function findExactMatch(candidate_elements, actualInteractionElementInfo) {\n    if (!actualInteractionElementInfo.element) {\n      return null;\n    }\n\n    const exactMatch = candidate_elements.find(elementInfo => \n      elementInfo.element && elementInfo.element === actualInteractionElementInfo.element\n    );\n    \n    if (exactMatch) {\n      console.log('✅ Found exact element match:', {\n        matchedElement: exactMatch.element?.tagName,\n        matchedElementClass: exactMatch.element?.className,\n        index: exactMatch.index\n      });\n      return exactMatch;\n    }\n    \n    return null;\n  }\n\n  /**\n   * Finds a match by traversing up the parent elements\n   * \n   * @param candidate_elements Array of candidate element infos\n   * @param actualInteractionElementInfo The actual interaction element info\n   * @returns The matching candidate element info, or null if no match is found\n   */\n  function findParentMatch(candidate_elements, actualInteractionElementInfo) {\n    if (!actualInteractionElementInfo.element) {\n      return null;\n    }\n\n    let element = actualInteractionElementInfo.element;\n    while (element.parentElement) {\n      element = element.parentElement;\n      const parentMatch = candidate_elements.find(candidate => \n        candidate.element && candidate.element === element\n      );\n      \n      if (parentMatch) {\n        console.log('✅ Found parent element match:', {\n          matchedElement: parentMatch.element?.tagName,\n          matchedElementClass: parentMatch.element?.className,\n          index: parentMatch.index,\n          depth: element.tagName\n        });\n        return parentMatch;\n      }\n      \n      // Stop if we hit another candidate element\n      if (candidate_elements.some(candidate => \n        candidate.element && candidate.element === element\n      )) {\n        console.log('⚠️ Stopped parent search - hit another candidate element:', element.tagName);\n        break;\n      }\n    }\n    \n    return null;\n  }\n\n  /**\n   * Finds a match based on spatial relationships between elements\n   * \n   * @param candidate_elements Array of candidate element infos\n   * @param actualInteractionElementInfo The actual interaction element info\n   * @returns The matching candidate element info, or null if no match is found\n   */\n  function findSpatialMatch(candidate_elements, actualInteractionElementInfo) {\n    if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\n      return null;\n    }\n\n    const actualBox = actualInteractionElementInfo.bounding_box;\n    let bestMatch = null;\n    let bestScore = 0;\n\n    for (const candidateInfo of candidate_elements) {\n      if (!candidateInfo.bounding_box) continue;\n      \n      const candidateBox = candidateInfo.bounding_box;\n      let score = 0;\n\n      // Check if actual element is contained within candidate\n      if (isPointInsideBox({ x: actualBox.x, y: actualBox.y }, candidateBox) &&\n          isPointInsideBox({ x: actualBox.x + actualBox.width, y: actualBox.y + actualBox.height }, candidateBox)) {\n        score += 100; // High score for containment\n      }\n\n      // Calculate overlap area as a factor\n      const overlap = calculateOverlap(actualBox, candidateBox);\n      score += overlap;\n\n      // Consider proximity if no containment\n      if (score === 0) {\n        const distance = Math.sqrt(\n          Math.pow((actualBox.x + actualBox.width/2) - (candidateBox.x + candidateBox.width/2), 2) +\n          Math.pow((actualBox.y + actualBox.height/2) - (candidateBox.y + candidateBox.height/2), 2)\n        );\n        // Convert distance to a score (closer = higher score)\n        score = 1000 / (distance + 1);\n      }\n\n      if (score > bestScore) {\n        bestScore = score;\n        bestMatch = candidateInfo;\n        console.log('📏 New best spatial match:', {\n          element: candidateInfo.element?.tagName,\n          class: candidateInfo.element?.className,\n          index: candidateInfo.index,\n          score: score\n        });\n      }\n    }\n\n    if (bestMatch) {\n      console.log('✅ Final spatial match selected:', {\n      element: bestMatch.element?.tagName,\n      class: bestMatch.element?.className,\n      index: bestMatch.index,\n      finalScore: bestScore\n    });\n    return bestMatch;\n  }\n\n  return null;\n  }\n\n  /**\n   * Finds a matching candidate element for an actual interaction element\n   * \n   * @param candidate_elements Array of candidate element infos\n   * @param actualInteractionElementInfo The actual interaction element info\n   * @returns The matching candidate element info, or null if no match is found\n   */\n  function findMatchingCandidateElementInfo(candidate_elements, actualInteractionElementInfo) {\n    if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\n      console.error('❌ Missing required properties in actualInteractionElementInfo');\n      return null;\n    }\n\n    console.log('🔍 Starting element matching for:', {\n      clickedElement: actualInteractionElementInfo.element.tagName,\n      clickedElementClass: actualInteractionElementInfo.element.className,\n      totalCandidates: candidate_elements.length\n    });\n\n    // First try exact element match\n    const exactMatch = findExactMatch(candidate_elements, actualInteractionElementInfo);\n    if (exactMatch) {\n      return exactMatch;\n    }\n    console.log('❌ No exact element match found, trying parent matching...');\n\n    // Try finding closest clickable parent\n    const parentMatch = findParentMatch(candidate_elements, actualInteractionElementInfo);\n    if (parentMatch) {\n      return parentMatch;\n    }\n    console.log('❌ No parent match found, falling back to spatial matching...');\n\n    // If no exact or parent match, look for spatial relationships\n    const spatialMatch = findSpatialMatch(candidate_elements, actualInteractionElementInfo);\n    if (spatialMatch) {\n      return spatialMatch;\n    }\n\n    console.error('❌ No matching element found for actual interaction element:', actualInteractionElementInfo);\n    return null;\n  }\n\n  const highlight = {\n    execute: async function(elementTypes, handleScroll=false) {\n      const elements = await findElements(elementTypes);\n      highlightElements(elements, handleScroll);\n      return elements;\n    },\n\n    unexecute: function(handleScroll=false) {\n      unhighlightElements(handleScroll);\n    },\n\n    generateJSON: async function() {\n      const json = {};\n\n     // Capture viewport dimensions\n     const viewportData = {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      documentWidth: document.documentElement.clientWidth,\n      documentHeight: document.documentElement.clientHeight,\n      timestamp: new Date().toISOString()\n    };\n\n      // Add viewport data to the JSON output\n      json.viewport = viewportData;\n\n\n      await Promise.all(Object.values(ElementTag).map(async elementType => {\n        const elements = await findElements(elementType);\n        json[elementType] = elements;\n      }));\n\n      // Serialize the JSON object\n      const jsonString = JSON.stringify(json, null, 4); // Pretty print with 4 spaces\n\n      console.log(`JSON: ${jsonString}`);\n      return jsonString;\n    },\n\n    getElementInfo\n  };\n\n\n  function unhighlightElements(handleScroll=false) {\n    const documents = getAllFrames();\n    documents.forEach(doc => {\n      const overlay = doc.getElementById('highlight-overlay');\n      if (overlay) {\n        if (handleScroll) {\n          // Remove event listeners\n          doc.removeEventListener('scroll', overlay.scrollHandler, true);\n          doc.removeEventListener('resize', overlay.resizeHandler);\n        }\n        overlay.remove();\n      }\n    });\n  }\n\n\n\n\n  async function findElements(elementTypes, verbose=true) {\n    const typesArray = Array.isArray(elementTypes) ? elementTypes : [elementTypes];\n    console.log('Starting element search for types:', typesArray);\n\n    const elements = [];\n    typesArray.forEach(elementType => {\n      if (elementType === ElementTag.FILLABLE) {\n        elements.push(...findFillables());\n      }\n      if (elementType === ElementTag.SELECTABLE) {\n        elements.push(...findDropdowns());\n      }\n      if (elementType === ElementTag.CLICKABLE) {\n        elements.push(...findClickables());\n        elements.push(...findToggles());\n        elements.push(...findCheckables());\n      }\n      if (elementType === ElementTag.NON_INTERACTIVE_ELEMENT) {\n        elements.push(...findNonInteractiveElements());\n      }\n    });\n\n    // console.log('Before uniquify:', elements.length);\n    const elementsWithInfo = elements.map((element, index) => \n      getElementInfo(element, index)\n    );\n\n    \n    \n    const uniqueElements = uniquifyElements(elementsWithInfo);\n    console.log(`Found ${uniqueElements.length} elements:`);\n    \n    // More comprehensive visibility check\n    const visibleElements = uniqueElements.filter(elementInfo => {\n      const el = elementInfo.element;\n      const style = getComputedStyle(el);\n      \n      // Check various style properties that affect visibility\n      if (style.display === 'none' || \n          style.visibility === 'hidden') {\n        return false;\n      }\n      \n      // Check if element has non-zero dimensions\n      const rect = el.getBoundingClientRect();\n      if (rect.width === 0 || rect.height === 0) {\n        return false;\n      }\n      \n      // Check if element is within viewport\n      if (rect.bottom < 0 || \n          rect.top > window.innerHeight || \n          rect.right < 0 || \n          rect.left > window.innerWidth) {\n        // Element is outside viewport, but still might be valid \n        // if user scrolls to it, so we'll include it\n        return true;\n      }\n      \n      return true;\n    });\n    \n    console.log(`Out of which ${visibleElements.length} elements are visible:`);\n    if (verbose) {\n      visibleElements.forEach(info => {\n        console.log(`Element ${info.index}:`, info);\n      });\n    }\n    \n    return visibleElements;\n  }\n\n  // elements is an array of objects with index, xpath\n  function highlightElements(elements, handleScroll=false) {\n    // console.log('[highlightElements] called with', elements.length, 'elements');\n    // Create overlay if it doesn't exist and store it in a dictionary\n    const documents = getAllFrames();  \n    let overlays = {};\n    documents.forEach(doc => {\n      let overlay = doc.getElementById('highlight-overlay');\n      if (!overlay) {\n        overlay = doc.createElement('div');\n        overlay.id = 'highlight-overlay';\n        overlay.style.cssText = `\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        z-index: 2147483647;\n      `;\n        doc.body.appendChild(overlay);\n        // console.log('[highlightElements] Created overlay in document:', doc);\n      }\n      overlays[doc.documentURI] = overlay;\n    });\n    \n\n    const updateHighlights = (doc = null) => {\n      if (doc) {\n        overlays[doc.documentURI].innerHTML = '';\n      } else {\n        Object.values(overlays).forEach(overlay => { overlay.innerHTML = ''; });\n      }    \n      elements.forEach((elementInfo, idx) => {\n        //console.log(`[highlightElements] Processing element ${idx}:`, elementInfo.tag, elementInfo.css_selector, elementInfo.bounding_box);\n        let element = elementInfo.element; //getElementByXPathOrCssSelector(elementInfo);\n        if (!element) {\n          element = getElementByXPathOrCssSelector(elementInfo);\n          if (!element) {\n            console.warn('[highlightElements] Could not find element for:', elementInfo);\n            return;\n          }\n        }\n        //if highlights requested for a specific doc, skip unrelated elements\n        if (doc && element.ownerDocument !== doc) {\n          console.log(\"[highlightElements] Skipped element since it doesn't belong to document\", doc);\n          return;\n        }\n        const rect = element.getBoundingClientRect();\n        if (rect.width === 0 || rect.height === 0) {\n          console.warn('[highlightElements] Element has zero dimensions:', elementInfo);\n          return;\n        }\n        // Create border highlight (red rectangle)\n        // use ownerDocument to support iframes/frames\n        const highlight = element.ownerDocument.createElement('div');\n        highlight.style.cssText = `\n        position: fixed;\n        left: ${rect.x}px;\n        top: ${rect.y}px;\n        width: ${rect.width}px;\n        height: ${rect.height}px;\n        border: 1px solid rgb(255, 0, 0);\n        transition: all 0.2s ease-in-out;\n      `;\n        // Create index label container - now positioned to the right and slightly up\n        const labelContainer = element.ownerDocument.createElement('div');\n        labelContainer.style.cssText = `\n        position: absolute;\n        right: -10px;     /* Offset to the right */\n        top: -10px;       /* Offset upwards */\n        padding: 4px;\n        background-color: rgba(255, 255, 0, 0.6);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      `;\n        const text = element.ownerDocument.createElement('span');\n        text.style.cssText = `\n        color: rgb(0, 0, 0, 0.8);\n        font-family: 'Courier New', Courier, monospace;\n        font-size: 12px;\n        font-weight: bold;\n        line-height: 1;\n      `;\n        text.textContent = elementInfo.index;\n        labelContainer.appendChild(text);\n        highlight.appendChild(labelContainer);      \n        overlays[element.ownerDocument.documentURI].appendChild(highlight);\n        \n      });\n    };\n\n    // Initial highlight\n    updateHighlights();\n\n    if (handleScroll) {\n      documents.forEach(doc => {\n        // Update highlights on scroll and resize\n        console.log('registering scroll and resize handlers for document: ', doc);\n        const scrollHandler = () => {\n          requestAnimationFrame(() => updateHighlights(doc));\n        };\n        const resizeHandler = () => {\n          updateHighlights(doc);\n        };\n        doc.addEventListener('scroll', scrollHandler, true);\n        doc.addEventListener('resize', resizeHandler);\n        // Store event handlers for cleanup\n        overlays[doc.documentURI].scrollHandler = scrollHandler;\n        overlays[doc.documentURI].resizeHandler = resizeHandler;\n      });    \n    }\n  }\n\n  // function unexecute() {\n  //   unhighlightElements();\n  // }\n\n  // Make it available globally for both Extension and Playwright\n  if (typeof window !== 'undefined') {\n    function stripElementRefs(elementInfo) {\n      if (!elementInfo) return null;\n      const { element, ...rest } = elementInfo;\n      return rest;\n    }\n\n    window.ProboLabs = window.ProboLabs || {};\n\n    // --- Caching State ---\n    window.ProboLabs.candidates = [];\n    window.ProboLabs.actual = null;\n    window.ProboLabs.matchingCandidate = null;\n\n    // --- Methods ---\n    /**\n     * Find and cache candidate elements of a given type (e.g., 'CLICKABLE').\n     * NOTE: This function is async and must be awaited from Playwright/Node.\n     */\n    window.ProboLabs.findAndCacheCandidateElements = async function(elementType) {\n      //console.log('[ProboLabs] findAndCacheCandidateElements called with:', elementType);\n      const found = await findElements(elementType);\n      window.ProboLabs.candidates = found;\n      // console.log('[ProboLabs] candidates set to:', found, 'type:', typeof found, 'isArray:', Array.isArray(found));\n      return found.length;\n    };\n\n    window.ProboLabs.findAndCacheActualElement = function(cssSelector, iframeSelector, isHover=false) {\n      // console.log('[ProboLabs] findAndCacheActualElement called with:', cssSelector, iframeSelector);\n      let el = findElement(document, iframeSelector, cssSelector);\n      if(isHover) {\n        const visibleElement = findClosestVisibleElement(el);\n        if (visibleElement) {\n          el = visibleElement;\n        }\n      }\n      if (!el) {\n        window.ProboLabs.actual = null;\n        // console.log('[ProboLabs] actual set to null');\n        return false;\n      }\n      window.ProboLabs.actual = getElementInfo(el, -1);\n      // console.log('[ProboLabs] actual set to:', window.ProboLabs.actual);\n      return true;\n    };\n\n    window.ProboLabs.findAndCacheMatchingCandidate = function() {\n      // console.log('[ProboLabs] findAndCacheMatchingCandidate called');\n      if (!window.ProboLabs.candidates.length || !window.ProboLabs.actual) {\n        window.ProboLabs.matchingCandidate = null;\n        // console.log('[ProboLabs] matchingCandidate set to null');\n        return false;\n      }\n      window.ProboLabs.matchingCandidate = findMatchingCandidateElementInfo(window.ProboLabs.candidates, window.ProboLabs.actual);\n      // console.log('[ProboLabs] matchingCandidate set to:', window.ProboLabs.matchingCandidate);\n      return !!window.ProboLabs.matchingCandidate;\n    };\n\n    window.ProboLabs.highlightCachedElements = function(which) {\n      let elements = [];\n      if (which === 'candidates') elements = window.ProboLabs.candidates;\n      if (which === 'actual' && window.ProboLabs.actual) elements = [window.ProboLabs.actual];\n      if (which === 'matching' && window.ProboLabs.matchingCandidate) elements = [window.ProboLabs.matchingCandidate];\n      console.log(`[ProboLabs] highlightCachedElements ${which} with ${elements.length} elements`);\n      highlightElements(elements);\n    };\n\n    window.ProboLabs.unhighlight = function() {\n      // console.log('[ProboLabs] unhighlight called');\n      unhighlightElements();\n    };\n\n    window.ProboLabs.reset = function() {\n      console.log('[ProboLabs] reset called');\n      window.ProboLabs.candidates = [];\n      window.ProboLabs.actual = null;\n      window.ProboLabs.matchingCandidate = null;\n      unhighlightElements();\n    };\n\n    window.ProboLabs.getCandidates = function() {\n      // console.log('[ProboLabs] getCandidates called. candidates:', window.ProboLabs.candidates, 'type:', typeof window.ProboLabs.candidates, 'isArray:', Array.isArray(window.ProboLabs.candidates));\n      const arr = Array.isArray(window.ProboLabs.candidates) ? window.ProboLabs.candidates : [];\n      return arr.map(stripElementRefs);\n    };\n    window.ProboLabs.getActual = function() {\n      return stripElementRefs(window.ProboLabs.actual);\n    };\n    window.ProboLabs.getMatchingCandidate = function() {\n      return stripElementRefs(window.ProboLabs.matchingCandidate);\n    };\n\n    // Retain existing API for backward compatibility\n    window.ProboLabs.ElementTag = ElementTag;\n    window.ProboLabs.highlightElements = highlightElements;\n    window.ProboLabs.unhighlightElements = unhighlightElements;\n    window.ProboLabs.findElements = findElements;\n    window.ProboLabs.getElementInfo = getElementInfo;\n    window.ProboLabs.highlight = window.ProboLabs.highlight;\n    window.ProboLabs.unhighlight = window.ProboLabs.unhighlight;\n\n    // --- Utility Functions ---\n    function findClosestVisibleElement(element) {\n      let current = element;\n      while (current) {\n        const style = window.getComputedStyle(current);\n        if (\n          style &&\n          style.display !== 'none' &&\n          style.visibility !== 'hidden' &&\n          current.offsetWidth > 0 &&\n          current.offsetHeight > 0\n        ) {\n          return current;\n        }\n        if (!current.parentElement || current === document.body) break;\n        current = current.parentElement;\n      }\n      return null;\n    }\n  }\n\n  exports.ElementInfo = ElementInfo;\n  exports.ElementTag = ElementTag;\n  exports.deserializeNodeFromJSON = deserializeNodeFromJSON;\n  exports.detectScrollableContainers = detectScrollableContainers;\n  exports.findElement = findElement;\n  exports.findElements = findElements;\n  exports.generateCssPath = generateCssPath;\n  exports.getAriaLabelledByText = getAriaLabelledByText;\n  exports.getContainingIframe = getContainingIframe;\n  exports.getElementInfo = getElementInfo;\n  exports.getParentNode = getParentNode;\n  exports.getRobustSelector = getRobustSelector;\n  exports.highlight = highlight;\n  exports.highlightElements = highlightElements;\n  exports.isScrollableContainer = isScrollableContainer;\n  exports.serializeNodeToJSON = serializeNodeToJSON;\n  exports.unhighlightElements = unhighlightElements;\n\n}));\n//# sourceMappingURL=probolabs.umd.js.map\n";
+const highlighterCode = "(function (global, factory) {\n    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n    typeof define === 'function' && define.amd ? define(['exports'], factory) :\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ProboLabs = {}));\n})(this, (function (exports) { 'use strict';\n\n    /**\n     * Element tag constants for different types of interactive elements\n     */\n    const ElementTag = {\n        CLICKABLE: \"CLICKABLE\",\n        FILLABLE: \"FILLABLE\",\n        SELECTABLE: \"SELECTABLE\",\n        NON_INTERACTIVE_ELEMENT: 'NON_INTERACTIVE_ELEMENT',\n    };\n\n    var ApplyAIStatus;\n    (function (ApplyAIStatus) {\n        ApplyAIStatus[\"PREPARE_START\"] = \"PREPARE_START\";\n        ApplyAIStatus[\"PREPARE_SUCCESS\"] = \"PREPARE_SUCCESS\";\n        ApplyAIStatus[\"PREPARE_ERROR\"] = \"PREPARE_ERROR\";\n        ApplyAIStatus[\"SEND_START\"] = \"SEND_START\";\n        ApplyAIStatus[\"SEND_SUCCESS\"] = \"SEND_SUCCESS\";\n        ApplyAIStatus[\"SEND_ERROR\"] = \"SEND_ERROR\";\n        ApplyAIStatus[\"APPLY_AI_ERROR\"] = \"APPLY_AI_ERROR\";\n        ApplyAIStatus[\"APPLY_AI_CANCELLED\"] = \"APPLY_AI_CANCELLED\";\n        ApplyAIStatus[\"SUMMARY_COMPLETED\"] = \"SUMMARY_COMPLETED\";\n        ApplyAIStatus[\"SUMMARY_ERROR\"] = \"SUMMARY_ERROR\";\n    })(ApplyAIStatus || (ApplyAIStatus = {}));\n    var ReplayStatus;\n    (function (ReplayStatus) {\n        ReplayStatus[\"REPLAY_START\"] = \"REPLAY_START\";\n        ReplayStatus[\"REPLAY_SUCCESS\"] = \"REPLAY_SUCCESS\";\n        ReplayStatus[\"REPLAY_ERROR\"] = \"REPLAY_ERROR\";\n        ReplayStatus[\"REPLAY_CANCELLED\"] = \"REPLAY_CANCELLED\";\n    })(ReplayStatus || (ReplayStatus = {}));\n\n    // Action constants\n    var PlaywrightAction;\n    (function (PlaywrightAction) {\n        PlaywrightAction[\"VISIT_BASE_URL\"] = \"VISIT_BASE_URL\";\n        PlaywrightAction[\"VISIT_URL\"] = \"VISIT_URL\";\n        PlaywrightAction[\"CLICK\"] = \"CLICK\";\n        PlaywrightAction[\"FILL_IN\"] = \"FILL_IN\";\n        PlaywrightAction[\"SELECT_DROPDOWN\"] = \"SELECT_DROPDOWN\";\n        PlaywrightAction[\"SELECT_MULTIPLE_DROPDOWN\"] = \"SELECT_MULTIPLE_DROPDOWN\";\n        PlaywrightAction[\"CHECK_CHECKBOX\"] = \"CHECK_CHECKBOX\";\n        PlaywrightAction[\"SELECT_RADIO\"] = \"SELECT_RADIO\";\n        PlaywrightAction[\"TOGGLE_SWITCH\"] = \"TOGGLE_SWITCH\";\n        PlaywrightAction[\"SET_SLIDER\"] = \"SET_SLIDER\";\n        PlaywrightAction[\"TYPE_KEYS\"] = \"TYPE_KEYS\";\n        PlaywrightAction[\"HOVER\"] = \"HOVER\";\n        PlaywrightAction[\"ASSERT_EXACT_VALUE\"] = \"ASSERT_EXACT_VALUE\";\n        PlaywrightAction[\"ASSERT_CONTAINS_VALUE\"] = \"ASSERT_CONTAINS_VALUE\";\n        PlaywrightAction[\"ASSERT_URL\"] = \"ASSERT_URL\";\n        PlaywrightAction[\"SCROLL_TO_ELEMENT\"] = \"SCROLL_TO_ELEMENT\";\n        PlaywrightAction[\"EXTRACT_VALUE\"] = \"EXTRACT_VALUE\";\n        PlaywrightAction[\"ASK_AI\"] = \"ASK_AI\";\n        PlaywrightAction[\"EXECUTE_SCRIPT\"] = \"EXECUTE_SCRIPT\";\n        PlaywrightAction[\"UPLOAD_FILES\"] = \"UPLOAD_FILES\";\n        PlaywrightAction[\"WAIT_FOR\"] = \"WAIT_FOR\";\n        PlaywrightAction[\"WAIT_FOR_OTP\"] = \"WAIT_FOR_OTP\";\n        PlaywrightAction[\"GEN_TOTP\"] = \"GEN_TOTP\";\n    })(PlaywrightAction || (PlaywrightAction = {}));\n\n    /**\n     * Checks if any string in the array matches the given regular expression pattern.\n     *\n     * @param array - Array of strings to test.\n     * @param pattern - Regular expression to test against each string.\n     * @returns true if at least one string matches the pattern, false otherwise.\n     */\n    function testArray(array, pattern) {\n        return array.some(item => pattern.test(item));\n    }\n    /**\n     * Determines if an element is clickable\n     *\n     * @param element The DOM element to check\n     * @returns boolean indicating if the element is fillable\n     */\n    function isClickableElement(element) {\n        if (!element)\n            return false;\n        let depth = 0;\n        while (depth < 5 && element && element.nodeType === Node.ELEMENT_NODE) {\n            if (isClickableElementHelper(element) === IsClickable.YES)\n                return true;\n            if (isClickableElementHelper(element) === IsClickable.NO)\n                return false;\n            // if maybe, continue searching up to 5 levels up the DOM tree\n            element = element.parentNode;\n            depth++;\n        }\n        return false;\n    }\n    // clickable element detection result\n    var IsClickable;\n    (function (IsClickable) {\n        IsClickable[\"YES\"] = \"YES\";\n        IsClickable[\"NO\"] = \"NO\";\n        IsClickable[\"MAYBE\"] = \"MAYBE\";\n    })(IsClickable || (IsClickable = {}));\n    function isClickableElementHelper(element) {\n        var _a, _b;\n        if (!element)\n            return IsClickable.NO;\n        //check for tag name\n        const tagName = element.tagName.toLowerCase();\n        const clickableTags = [\n            'a', 'button',\n        ];\n        if (clickableTags.includes(tagName))\n            return IsClickable.YES;\n        //check for clickable <input>\n        const inputType = (_a = element.type) === null || _a === void 0 ? void 0 : _a.toLowerCase();\n        const clickableTypes = [\n            'button', 'submit', 'reset', 'checkbox', 'radio',\n        ];\n        const ariaAutocompleteValues = [\n            'list', 'both',\n        ];\n        if (tagName === 'input') {\n            if (clickableTypes.includes(inputType) || ariaAutocompleteValues.includes((_b = element.getAttribute('aria-autocomplete')) !== null && _b !== void 0 ? _b : ''))\n                return IsClickable.YES;\n            if (['date', 'number', 'range'].includes(inputType))\n                return IsClickable.NO; //don't record the click as a change event will be generated for elements that generate an input change event\n        }\n        // check for cursor type\n        const style = window.getComputedStyle(element);\n        if (style.cursor === 'pointer')\n            return IsClickable.YES;\n        // check for attributes\n        const clickableRoles = [\n            'button', 'combobox', 'listbox', 'dropdown', 'option', 'menu', 'menuitem',\n            'navigation', 'checkbox', 'switch', 'toggle', 'slider', 'textbox', 'listitem',\n            'presentation',\n        ];\n        const ariaPopupValues = [\n            'true', 'listbox', 'menu',\n        ];\n        if (element.hasAttribute('onclick') ||\n            clickableRoles.includes(element.getAttribute('role') || '') ||\n            ariaPopupValues.includes(element.getAttribute('aria-haspopup') || ''))\n            return IsClickable.YES;\n        // check for tabindex (means element is focusable and therefore clickable)\n        if (parseInt(element.getAttribute('tabindex') || '-1') >= 0)\n            return IsClickable.YES;\n        // extract class names\n        const classNames = Array.from(element.classList);\n        // check for checkbox/radio-like class name - TODO: check if can be removed\n        const checkboxPattern = /checkbox|switch|toggle|slider/i;\n        if (testArray(classNames, checkboxPattern))\n            return IsClickable.YES;\n        // check for Material UI class names\n        const muiClickableClassPattern = /MuiButton|MuiIconButton|MuiChip|MuiMenuItem|MuiListItem|MuiInputBase|MuiOutlinedInput|MuiSelect|MuiAutocomplete|MuiToggleButton|MuiBackdrop-root|MuiBackdrop-invisible/;\n        if (testArray(classNames, muiClickableClassPattern))\n            return IsClickable.YES;\n        // check for SalesForce class names\n        const sfClassPattern = /slds-button|slds-dropdown|slds-combobox|slds-picklist|slds-tabs|slds-pill|slds-action|slds-row-action|slds-context-bar|slds-input|slds-rich-text-area|slds-radio|slds-checkbox|slds-toggle|slds-link|slds-accordion|slds-tree/;\n        if (testArray(classNames, sfClassPattern))\n            return IsClickable.YES;\n        // check for chart dots\n        const chartClickableClassPattern = /recharts-dot/;\n        if (testArray(classNames, chartClickableClassPattern))\n            return IsClickable.YES;\n        // check for React component classes\n        const reactClickableClassPattern = /react-select|ant-select|rc-select|react-dropdown|react-autocomplete|react-datepicker|react-modal|react-tooltip|react-popover|react-menu|react-tabs|react-accordion|react-collapse|react-toggle|react-switch|react-checkbox|react-radio|react-button|react-link|react-card|react-list-item|react-menu-item|react-option|react-tab|react-panel|react-drawer|react-sidebar|react-nav|react-breadcrumb|react-pagination|react-stepper|react-wizard|react-carousel|react-slider|react-range|react-progress|react-badge|react-chip|react-tag|react-avatar|react-icon|react-fab|react-speed-dial|react-floating|react-sticky|react-affix|react-backdrop|react-overlay|react-portal|react-transition|react-animate|react-spring|react-framer|react-gesture|react-drag|react-drop|react-sortable|react-resizable|react-split|react-grid|react-table|react-datagrid|react-tree|react-treeview|react-file|react-upload|react-cropper|react-image|react-gallery|react-lightbox|react-player|react-video|react-audio|react-chart|react-graph|react-diagram|react-flow|react-d3|react-plotly|react-vega|react-vis|react-nivo|react-recharts|react-victory|react-echarts|react-highcharts|react-google-charts|react-fusioncharts|react-apexcharts|react-chartjs|react-chartkick|react-sparklines|react-trend|react-smooth|react-animated|react-lottie|react-spring|react-framer-motion|react-pose|react-motion|react-transition-group|react-router|react-navigation/i;\n        if (testArray(classNames, reactClickableClassPattern))\n            return IsClickable.YES;\n        //check for cloudinary class names\n        const cloudinaryClickableClassPattern = /cld-combobox|cld-upload-button|cld-controls|cld-player|cld-tab|cld-menu-item|cld-close|cld-play|cld-pause|cld-fullscreen|cld-browse|cld-cancel|cld-retry/;\n        if (testArray(classNames, cloudinaryClickableClassPattern))\n            return IsClickable.YES;\n        return IsClickable.MAYBE;\n    }\n    function getParentNode(element) {\n        if (!element || element.nodeType !== Node.ELEMENT_NODE)\n            return null;\n        let parent = null;\n        // SF is using slots and shadow DOM heavily\n        // However, there might be slots in the light DOM which shouldn't be traversed\n        if (element.assignedSlot && element.getRootNode() instanceof ShadowRoot)\n            parent = element.assignedSlot;\n        else\n            parent = element.parentNode;\n        // Check if we're at a shadow root\n        if (parent && parent.nodeType !== Node.ELEMENT_NODE && parent.getRootNode() instanceof ShadowRoot)\n            parent = parent.getRootNode().host;\n        return parent;\n    }\n    function getElementDepth(element) {\n        let depth = 0;\n        let currentElement = element;\n        while ((currentElement === null || currentElement === void 0 ? void 0 : currentElement.nodeType) === Node.ELEMENT_NODE) {\n            depth++;\n            currentElement = getParentNode(currentElement);\n        }\n        return depth;\n    }\n\n    // WebSocketsMessageType enum for WebSocket and event message types shared across the app\n    var WebSocketsMessageType;\n    (function (WebSocketsMessageType) {\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_PREPARE_START\"] = \"INTERACTION_APPLY_AI_PREPARE_START\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_PREPARE_SUCCESS\"] = \"INTERACTION_APPLY_AI_PREPARE_SUCCESS\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_PREPARE_ERROR\"] = \"INTERACTION_APPLY_AI_PREPARE_ERROR\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_SEND_TO_LLM_START\"] = \"INTERACTION_APPLY_AI_SEND_TO_LLM_START\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_SEND_TO_LLM_SUCCESS\"] = \"INTERACTION_APPLY_AI_SEND_TO_LLM_SUCCESS\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_SEND_TO_LLM_ERROR\"] = \"INTERACTION_APPLY_AI_SEND_TO_LLM_ERROR\";\n        WebSocketsMessageType[\"INTERACTION_REPLAY_START\"] = \"INTERACTION_REPLAY_START\";\n        WebSocketsMessageType[\"INTERACTION_REPLAY_SUCCESS\"] = \"INTERACTION_REPLAY_SUCCESS\";\n        WebSocketsMessageType[\"INTERACTION_REPLAY_ERROR\"] = \"INTERACTION_REPLAY_ERROR\";\n        WebSocketsMessageType[\"INTERACTION_REPLAY_CANCELLED\"] = \"INTERACTION_REPLAY_CANCELLED\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_CANCELLED\"] = \"INTERACTION_APPLY_AI_CANCELLED\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_ERROR\"] = \"INTERACTION_APPLY_AI_ERROR\";\n        WebSocketsMessageType[\"INTERACTION_STEP_CREATED\"] = \"INTERACTION_STEP_CREATED\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_SUMMARY_COMPLETED\"] = \"INTERACTION_APPLY_AI_SUMMARY_COMPLETED\";\n        WebSocketsMessageType[\"INTERACTION_APPLY_AI_SUMMARY_ERROR\"] = \"INTERACTION_APPLY_AI_SUMMARY_ERROR\";\n        WebSocketsMessageType[\"OTP_RETRIEVED\"] = \"OTP_RETRIEVED\";\n    })(WebSocketsMessageType || (WebSocketsMessageType = {}));\n\n    /**\n     * Logging levels for Probo\n     */\n    var ProboLogLevel;\n    (function (ProboLogLevel) {\n        ProboLogLevel[\"DEBUG\"] = \"DEBUG\";\n        ProboLogLevel[\"INFO\"] = \"INFO\";\n        ProboLogLevel[\"LOG\"] = \"LOG\";\n        ProboLogLevel[\"WARN\"] = \"WARN\";\n        ProboLogLevel[\"ERROR\"] = \"ERROR\";\n    })(ProboLogLevel || (ProboLogLevel = {}));\n    const logLevelOrder = {\n        [ProboLogLevel.DEBUG]: 0,\n        [ProboLogLevel.INFO]: 1,\n        [ProboLogLevel.LOG]: 2,\n        [ProboLogLevel.WARN]: 3,\n        [ProboLogLevel.ERROR]: 4,\n    };\n    class ProboLogger {\n        constructor(prefix, level = ProboLogLevel.INFO) {\n            this.prefix = prefix;\n            this.level = level;\n        }\n        setLogLevel(level) {\n            console.log(`[${this.prefix}] Setting log level to: ${level} (was: ${this.level})`);\n            this.level = level;\n        }\n        shouldLog(level) {\n            return logLevelOrder[level] >= logLevelOrder[this.level];\n        }\n        preamble(level) {\n            const now = new Date();\n            const hours = String(now.getHours()).padStart(2, '0');\n            const minutes = String(now.getMinutes()).padStart(2, '0');\n            const seconds = String(now.getSeconds()).padStart(2, '0');\n            const milliseconds = String(now.getMilliseconds()).padStart(3, '0');\n            return `[${hours}:${minutes}:${seconds}.${milliseconds}] [${this.prefix}] [${level}]`;\n        }\n        debug(...args) { if (this.shouldLog(ProboLogLevel.DEBUG))\n            console.debug(this.preamble(ProboLogLevel.DEBUG), ...args); }\n        info(...args) { if (this.shouldLog(ProboLogLevel.INFO))\n            console.info(this.preamble(ProboLogLevel.INFO), ...args); }\n        log(...args) { if (this.shouldLog(ProboLogLevel.LOG))\n            console.log(this.preamble(ProboLogLevel.LOG), ...args); }\n        warn(...args) { if (this.shouldLog(ProboLogLevel.WARN))\n            console.warn(this.preamble(ProboLogLevel.WARN), ...args); }\n        error(...args) { if (this.shouldLog(ProboLogLevel.ERROR))\n            console.error(this.preamble(ProboLogLevel.ERROR), ...args); }\n    }\n    function doubleQuoteString(str) {\n        if (!str)\n            return '';\n        return `\"${str.replace(/\"/g, '\\\\\"')}\"`;\n    }\n\n    new ProboLogger('apiclient');\n\n    /**\n     * Available AI models for LLM operations\n     */\n    var AIModel;\n    (function (AIModel) {\n        AIModel[\"AZURE_GPT4\"] = \"azure-gpt4\";\n        AIModel[\"AZURE_GPT4_MINI\"] = \"azure-gpt4-mini\";\n        AIModel[\"GEMINI_1_5_FLASH\"] = \"gemini-1.5-flash\";\n        AIModel[\"GEMINI_2_5_FLASH\"] = \"gemini-2.5-flash\";\n        AIModel[\"GPT4\"] = \"gpt4\";\n        AIModel[\"GPT4_MINI\"] = \"gpt4-mini\";\n        AIModel[\"CLAUDE_3_5\"] = \"claude-3.5\";\n        AIModel[\"CLAUDE_SONNET_4_5\"] = \"claude-sonnet-4.5\";\n        AIModel[\"CLAUDE_HAIKU_4_5\"] = \"claude-haiku-4.5\";\n        AIModel[\"CLAUDE_OPUS_4_1\"] = \"claude-opus-4.1\";\n        AIModel[\"GROK_2\"] = \"grok-2\";\n        AIModel[\"LLAMA_4_SCOUT\"] = \"llama-4-scout\";\n        AIModel[\"DEEPSEEK_V3\"] = \"deepseek-v3\";\n    })(AIModel || (AIModel = {}));\n\n    const highlighterLogger = new ProboLogger('highlighter');\n\n    // Get text content of an element (recursively including child elements)\n    function getElementText(element) {\n      if (!element) return '';\n      return element.textContent || '';\n    }\n\n    // Get placeholder text of an element\n    function getElementPlaceholder(element) {\n      if (!element) return '';\n      return element.placeholder || '';\n    }\n\n    // Get CSS selector of an element (not recursively, just for a single element)\n    function getElementCssSelector(element) {\n      if (!(element instanceof Element)) return '';\n      \n      const tag = element.tagName.toLowerCase();\n      let selector = tag;\n            \n      // Find nth-of-type for elements without ID\n      let nth = 1;\n      let sibling = element.previousElementSibling;\n      while (sibling) {\n        if (sibling.nodeName.toLowerCase() === tag) nth++;\n        sibling = sibling.previousElementSibling;\n      }\n      if (nth > 1 || element.nextElementSibling) selector += `:nth-of-type(${nth})`;\n      \n      return selector;\n    }\n\n    // Helper function to check if element is a form control\n    function isFormControl(elementInfo) {\n      return /^(input|select|textarea|button|label)$/i.test(elementInfo.tag);\n    }\n\n    // Helper function to check if element is a dropdown item\n    const isDropdownItem = (elementInfo) => {\n      const dropdownPatterns = [\n        /dropdown[-_]?item/i,    // matches: dropdown-item, dropdownitem, dropdown_item\n        /menu[-_]?item/i,        // matches: menu-item, menuitem, menu_item\n        /dropdown[-_]?link/i,    // matches: dropdown-link, dropdownlink, dropdown_link\n        /list[-_]?item/i,       // matches: list-item, listitem, list_item\n        /select[-_]?item/i,     // matches: select-item, selectitem, select_item  \n      ];\n\n      const rolePatterns = [\n        /menu[-_]?item/i,       // matches: menuitem, menu-item\n        /option/i,              // matches: option\n        /list[-_]?item/i,      // matches: listitem, list-item\n        /tree[-_]?item/i       // matches: treeitem, tree-item\n      ];\n\n      const hasMatchingClass = elementInfo.element.className && \n                              dropdownPatterns.some(pattern => \n                                pattern.test(elementInfo.element.className)\n                              );\n\n      const hasMatchingRole = elementInfo.element.getAttribute('role') && \n                             rolePatterns.some(pattern => \n                               pattern.test(elementInfo.element.getAttribute('role'))\n                             );\n\n      return hasMatchingClass || hasMatchingRole;\n    };\n\n    /**\n     * Element Query Utilities\n     */\n\n    function getAllDocumentElementsIncludingShadow(selectors, root = document) {\n      const elements = Array.from(root.querySelectorAll(selectors));\n\n      root.querySelectorAll('*').forEach(el => {\n          if (el.shadowRoot) {\n              elements.push(...getAllDocumentElementsIncludingShadow(selectors, el.shadowRoot));\n          }\n      });\n      return elements;\n    }\n\n    function getAllFrames(root = document) {\n      const result = [root];\n      const frames = getAllDocumentElementsIncludingShadow('frame, iframe', root);  \n      frames.forEach(frame => {\n          try {\n              const frameDocument = frame.contentDocument || frame.contentWindow.document;\n              if (frameDocument) {\n                  result.push(frameDocument);\n              }\n          } catch (e) {\n              // Skip cross-origin frames\n              highlighterLogger.warn('Could not access frame content:', e.message);\n          }\n      });\n\n      return result;\n    }\n\n    function getAllElementsIncludingShadow(selectors, root = document) {\n      const elements = [];\n\n      getAllFrames(root).forEach(doc => {\n        elements.push(...getAllDocumentElementsIncludingShadow(selectors, doc));\n      });\n\n      return elements;\n    }\n\n    /**\n     * Finds the first element matching a CSS selector, traversing Shadow DOM if necessary\n     * @param {string} selector - CSS selector to search for\n     * @param {Element} [root=document] - Root element to start searching from\n     * @returns {Element|null} - The first matching element or null if not found\n     */\n    function robustQuerySelector(selector, root = document, all = false) {\n      // First try to find in light DOM\n      let elements = all ? root.querySelectorAll(selector) : root.querySelector(selector);\n      if (elements) return elements;\n      \n      // Get all shadow roots\n      const shadowElements = Array.from(root.querySelectorAll('*'))\n          .filter(el => el.shadowRoot);\n      \n      // Search through each shadow root until we find a match\n      for (const el of shadowElements) {\n          elements = robustQuerySelector(selector, el.shadowRoot, all);\n          if (elements) return elements;\n      }\n      \n      return all ? [] : null;\n    }\n\n\n    function isDecendent(parent, child) {\n      let element = child;\n      while (element && element !== parent && element.nodeType === Node.ELEMENT_NODE) {              \n          element = getParentNode(element);      \n      }\n      return element === parent;\n    }\n\n    function generateXPath(element) {\n      return '/'+extractElementPath(element).map(item => `${item.tagName}${item.onlyChild ? '' : `[${item.index}]`}`).join('/');\n    }\n\n    function generateCssPath(element) {\n      return extractElementPath(element).map(item => `${item.tagName}:nth-of-type(${item.index})`).join(' > ');\n    }\n\n    // unified path generation for xpath and css selector\n    function extractElementPath(element) {\n      if (!element) {\n        highlighterLogger.error('ERROR: No element provided to generatePath');\n        return [];\n      }\n      const path = [];\n      // traversing up the DOM tree\n      while (element && element.nodeType === Node.ELEMENT_NODE) {    \n        let tagName = element.nodeName.toLowerCase();\n            \n        let sibling = element;\n        let index = 1;\n        \n        while (sibling = sibling.previousElementSibling) {\n          if (sibling.nodeName.toLowerCase() === tagName) index++;\n        }\n        sibling = element;\n        \n        let onlyChild = (index === 1);\n        while (onlyChild && (sibling = sibling.nextElementSibling)) {\n          if (sibling.nodeName.toLowerCase() === tagName) onlyChild = false;\n        }\n           \n        // add a tuple with tagName, index (nth), and onlyChild    \n        path.unshift({\n          tagName: tagName,\n          index: index,\n          onlyChild: onlyChild      \n        });    \n\n        element = getParentNode(element);\n      }\n      \n      return path;\n    }\n\n    function cleanHTML(rawHTML) {\n      const parser = new DOMParser();\n      const doc = parser.parseFromString(rawHTML, \"text/html\");\n\n      function cleanElement(element) {\n        const allowedAttributes = new Set([\n          \"role\",\n          \"type\",\n          \"class\",\n          \"href\",\n          \"alt\",\n          \"title\",\n          \"readonly\",\n          \"checked\",\n          \"enabled\",\n          \"disabled\",\n        ]);\n\n        [...element.attributes].forEach(attr => {\n          const name = attr.name.toLowerCase();\n          const value = attr.value;\n\n          const isTestAttribute = /^(testid|test-id|data-test-id)$/.test(name);\n          const isDataAttribute = name.startsWith(\"data-\") && value;\n          const isBooleanAttribute = [\"readonly\", \"checked\", \"enabled\", \"disabled\"].includes(name);\n\n          if (!allowedAttributes.has(name) && !isDataAttribute && !isTestAttribute && !isBooleanAttribute) {\n            element.removeAttribute(name);\n          }\n        });\n\n        // Handle SVG content - more aggressive replacement\n        if (element.tagName.toLowerCase() === \"svg\") {\n          // Remove all attributes except class and role\n          [...element.attributes].forEach(attr => {\n            const name = attr.name.toLowerCase();\n            if (name !== \"class\" && name !== \"role\") {\n              element.removeAttribute(name);\n            }\n          });\n          element.innerHTML = \"CONTENT REMOVED\";\n        } else {\n          // Recursively clean child elements\n          Array.from(element.children).forEach(cleanElement);\n        }\n\n        // Only remove empty elements that aren't semantic or icon elements\n        const keepEmptyElements = ['i', 'span', 'svg', 'button', 'input'];\n        if (!keepEmptyElements.includes(element.tagName.toLowerCase()) && \n            !element.children.length && \n            !element.textContent.trim()) {\n          element.remove();\n        }\n      }\n\n      // Process all elements in the document body\n      Array.from(doc.body.children).forEach(cleanElement);\n      return doc.body.innerHTML;\n    }\n\n    function getContainingIFrame(element) {\n      // If not in an iframe, return null\n      if (element.ownerDocument.defaultView === window.top) {\n        return null;\n      }\n      \n      // Try to find the iframe in the parent document that contains our element\n      try {\n        const parentDocument = element.ownerDocument.defaultView.parent.document;\n        const iframes = parentDocument.querySelectorAll('iframe');\n        \n        for (const iframe of iframes) {\n          if (iframe.contentWindow === element.ownerDocument.defaultView) {\n            return iframe;\n          }\n        }\n      } catch (e) {\n        // Cross-origin restriction\n        return \"Cross-origin iframe - cannot access details\";\n      }\n      \n      return null;\n    }\n\n    function getAriaLabelledByText(elementInfo, includeHidden=true) {\n      if (!elementInfo.element.hasAttribute('aria-labelledby')) return '';\n\n      const ids = elementInfo.element.getAttribute('aria-labelledby').split(/\\s+/);\n      let labelText = '';\n\n      //locate root (document or iFrame document if element is contained in an iframe)\n      let root = document;\n      if (elementInfo.iframe_selector) {      \n        const frames = getAllDocumentElementsIncludingShadow('iframe', document);\n        \n        // Iterate over all frames and compare their CSS selectors\n        for (const frame of frames) {\n          const selector = generateCssPath(frame);\n          if (selector === elementInfo.iframe_selector) {\n            root = frame.contentDocument || frame.contentWindow.document;        \n            break;\n          }\n        } \n      }\n\n      ids.forEach(id => {\n        const el = robustQuerySelector(`#${CSS.escape(id)}`, root);\n        if (el) {\n          if (includeHidden || el.offsetParent !== null || getComputedStyle(el).display !== 'none') {\n            labelText += el.textContent.trim() + ' ';\n          }\n        }\n      });\n\n      return labelText.trim();\n    }\n\n\n\n    const filterZeroDimensions = (elementInfo) => {\n      const rect = elementInfo.bounding_box;\n      //single pixel elements are typically faux controls and should be filtered too\n      const hasSize = rect.width > 1 && rect.height > 1;\n      const style = window.getComputedStyle(elementInfo.element);\n      const isVisible = style.display !== 'none' && style.visibility !== 'hidden';\n      \n      if (!hasSize || !isVisible) {\n        \n        return false;\n      }\n      return true;\n    };\n\n\n\n    function uniquifyElements(elements) {\n      const seen = new Set();\n\n      highlighterLogger.debug(`Starting uniquification with ${elements.length} elements`);\n\n      // Filter out testing infrastructure elements first\n      const filteredInfrastructure = elements.filter(element_info => {\n        // Skip the highlight-overlay element completely - it's part of the testing infrastructure\n        if (element_info.element.id === 'highlight-overlay' || \n            (element_info.css_selector && element_info.css_selector.includes('#highlight-overlay'))) {\n          highlighterLogger.debug('Filtered out testing infrastructure element:', element_info.css_selector);\n          return false;\n        }\n        \n        // Filter out UI framework container/manager elements\n        const el = element_info.element;\n        // UI framework container checks - generic detection for any framework\n        if ((el.getAttribute('data-rendered-by') || \n             el.getAttribute('data-reactroot') || \n             el.getAttribute('ng-version') || \n             el.getAttribute('data-component-id') ||\n             el.getAttribute('data-root') ||\n             el.getAttribute('data-framework')) && \n            (el.className && \n             typeof el.className === 'string' && \n             (el.className.includes('Container') || \n              el.className.includes('container') || \n              el.className.includes('Manager') || \n              el.className.includes('manager')))) {\n          highlighterLogger.debug('Filtered out UI framework container element:', element_info.css_selector);\n          return false;\n        }\n        \n        // Direct filter for framework container elements that shouldn't be interactive\n        // Consolidating multiple container detection patterns into one efficient check\n        const isFullViewport = element_info.bounding_box && \n                             element_info.bounding_box.x <= 5 && \n                             element_info.bounding_box.y <= 5 && \n                             element_info.bounding_box.width >= (window.innerWidth * 0.95) && \n                             element_info.bounding_box.height >= (window.innerHeight * 0.95);\n                             \n        // Empty content check\n        const isEmpty = !el.innerText || el.innerText.trim() === '';\n        \n        // Check if it's a framework container element\n        if (element_info.element.tagName === 'DIV' && \n            isFullViewport && \n            isEmpty && \n            (\n              // Pattern matching for root containers\n              (element_info.xpath && \n                (element_info.xpath.match(/^\\/html\\[\\d+\\]\\/body\\[\\d+\\]\\/div\\[\\d+\\]\\/div\\[\\d+\\]$/) || \n                 element_info.xpath.match(/^\\/\\/\\*\\[@id='[^']+'\\]\\/div\\[\\d+\\]$/))) ||\n              \n              // Simple DOM structure\n              (element_info.css_selector.split(' > ').length <= 4 && element_info.depth <= 5) ||\n              \n              // Empty or container-like classes\n              (!el.className || el.className === '' || \n               (typeof el.className === 'string' && \n                (el.className.includes('overlay') || \n                 el.className.includes('container') || \n                 el.className.includes('wrapper'))))\n            )) {\n          highlighterLogger.debug('Filtered out framework container element:', element_info.css_selector);\n          return false;\n        }\n        \n        return true;\n      });\n\n      // First filter out elements with zero dimensions\n      const nonZeroElements = filteredInfrastructure.filter(filterZeroDimensions);\n      // sort by CSS selector depth so parents are processed first\n      nonZeroElements.sort((a, b) => a.depth - b.depth);\n      highlighterLogger.debug(`After dimension filtering: ${nonZeroElements.length} elements remain (${elements.length - nonZeroElements.length} removed)`);\n      \n      const filteredByParent = nonZeroElements.filter(element_info => {\n\n        const parent = findClosestParent(seen, element_info);\n        const keep = parent == null || shouldKeepNestedElement(element_info, parent);\n        // console.log(\"node \", element_info.index, \": keep=\", keep, \" parent=\", parent);\n        // if (!keep && !element_info.xpath) {\n        //   console.log(\"Filtered out element \", element_info,\" because it's a nested element of \", parent);\n        // }\n        if (keep)\n          seen.add(element_info.css_selector);\n\n        return keep;\n      });\n\n      highlighterLogger.debug(`After parent/child filtering: ${filteredByParent.length} elements remain (${nonZeroElements.length - filteredByParent.length} removed)`);\n\n      // Final overlap filtering\n      const filteredResults = filteredByParent.filter(element => {\n\n         // Look for any element that came BEFORE this one in the array\n        const hasEarlierOverlap = filteredByParent.some(other => {\n          // Only check elements that came before (lower index)\n          if (filteredByParent.indexOf(other) >= filteredByParent.indexOf(element)) {\n            return false;\n          }\n          \n          const isOverlapping = areElementsOverlapping(element, other); \n          return isOverlapping;\n        });  \n\n        // Keep element if it has no earlier overlapping elements\n        return !hasEarlierOverlap;\n      });\n      \n      \n      \n      // Check for overlay removal\n      highlighterLogger.debug(`After filtering: ${filteredResults.length} (${filteredByParent.length - filteredResults.length} removed by overlap)`);\n      \n      const nonOverlaidElements = filteredResults.filter(element => {\n        return !isOverlaid(element);\n      });\n\n      highlighterLogger.debug(`Final elements after overlay removal: ${nonOverlaidElements.length} (${filteredResults.length - nonOverlaidElements.length} removed)`);\n      \n      return nonOverlaidElements;\n\n    }\n\n\n\n    const areElementsOverlapping = (element1, element2) => {\n      if (element1.css_selector === element2.css_selector) {\n        return true;\n      }\n      \n      const box1 = element1.bounding_box;\n      const box2 = element2.bounding_box;\n      \n      return box1.x === box2.x &&\n             box1.y === box2.y &&\n             box1.width === box2.width &&\n             box1.height === box2.height;\n            //  element1.text === element2.text &&\n            //  element2.tag === 'a';\n    };\n\n    function findClosestParent(seen, element_info) {  \n      \n      // Split the xpath into segments\n      const segments = element_info.css_selector.split(' > ');\n      \n      // Try increasingly shorter paths until we find one in the seen set\n      for (let i = segments.length - 1; i > 0; i--) {\n        const parentPath = segments.slice(0, i).join(' > ');\n        if (seen.has(parentPath)) {\n          return parentPath;\n        }\n      }\n\n      return null;\n    }\n\n    function shouldKeepNestedElement(elementInfo, parentPath) {\n      let result = false;\n      const parentSegments = parentPath.split(' > ');\n\n      const isParentLink = /^a(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\n      if (isParentLink) {\n        return false;    \n      }\n      // If this is a checkbox/radio input\n      if (elementInfo.tag === 'input' && \n          (elementInfo.type === 'checkbox' || elementInfo.type === 'radio')) {\n        \n        // Check if parent is a label by looking at the parent xpath's last segment\n        \n        const isParentLabel = /^label(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\n        \n        // If parent is a label, don't keep the input (we'll keep the label instead)\n        if (isParentLabel) {\n          return false;\n        }\n      }\n      \n      // Keep all other form controls and dropdown items\n      if (isFormControl(elementInfo) || isDropdownItem(elementInfo)) {\n        result = true;\n      }\n\n      if(isTableCell(elementInfo)) {\n        result = true;\n      }\n      \n      \n      // console.log(`shouldKeepNestedElement: ${elementInfo.tag} ${elementInfo.text} ${elementInfo.xpath} -> ${parentXPath} -> ${result}`);\n      return result;\n    }\n\n\n    function isTableCell(elementInfo) {\n      const element = elementInfo.element;\n      if(!element || !(element instanceof HTMLElement)) {\n        return false;\n      }\n      const validTags = new Set(['td', 'th']);\n      const validRoles = new Set(['cell', 'gridcell', 'columnheader', 'rowheader']);\n      \n      const tag = element.tagName.toLowerCase();\n      const role = element.getAttribute('role')?.toLowerCase();\n\n      if (validTags.has(tag) || (role && validRoles.has(role))) {\n        return true;\n      }\n      return false;\n      \n    }\n\n    function isOverlaid(elementInfo) {\n      const element = elementInfo.element;\n      const boundingRect = elementInfo.bounding_box;\n      \n\n      \n      \n      // Create a diagnostic logging function that only logs when needed\n      const diagnosticLog = (...args) => {\n        { // set to true for debugging\n          highlighterLogger.debug('[OVERLAY-DEBUG]', ...args);\n        }\n      };\n\n      // Special handling for tooltips\n      if (elementInfo.element.className && typeof elementInfo.element.className === 'string' && \n          elementInfo.element.className.includes('tooltip')) {\n        diagnosticLog('Element is a tooltip, not considering it overlaid');\n        return false;\n      }\n      \n      \n        \n          // Get element at the center point to check if it's covered by a popup/modal\n          const middleX = boundingRect.x + boundingRect.width/2;\n          const middleY = boundingRect.y + boundingRect.height/2;\n          const elementAtMiddle = element.ownerDocument.elementFromPoint(middleX, middleY);\n          \n          if (elementAtMiddle && \n              elementAtMiddle !== element && \n              !isDecendent(element, elementAtMiddle) && \n              !isDecendent(elementAtMiddle, element)) {\n\n          \n          return true;\n        }\n          \n          \n        return false;\n      \n      }\n\n    /**\n     * Checks if an element is scrollable (has scrollable content)\n     * \n     * @param element - The element to check\n     * @returns boolean indicating if the element is scrollable\n     */\n    function isScrollableContainer(element) {\n      if (!element) return false;\n      \n      const style = window.getComputedStyle(element);\n      \n      // Reliable way to detect if an element has scrollbars or is scrollable\n      const hasScrollHeight = element.scrollHeight > element.clientHeight;\n      const hasScrollWidth = element.scrollWidth > element.clientWidth;\n      \n      // Check actual style properties\n      const hasOverflowY = style.overflowY === 'auto' || \n                          style.overflowY === 'scroll' || \n                          style.overflowY === 'overlay';\n      const hasOverflowX = style.overflowX === 'auto' || \n                          style.overflowX === 'scroll' || \n                          style.overflowX === 'overlay';\n      \n      // Check common class names and attributes for scrollable containers across frameworks\n      const hasScrollClasses = element.classList.contains('scroll') || \n                              element.classList.contains('scrollable') ||\n                              element.classList.contains('overflow') ||\n                              element.classList.contains('overflow-auto') ||\n                              element.classList.contains('overflow-scroll') ||\n                              element.getAttribute('data-scrollable') === 'true';\n                              \n      // Check for height/max-height constraints that often indicate scrolling content\n      const hasHeightConstraint = style.maxHeight && \n                                 style.maxHeight !== 'none' && \n                                 style.maxHeight !== 'auto';\n      \n      // An element is scrollable if it has:\n      // 1. Actual scrollbars in use (most reliable check) OR\n      // 2. Overflow styles allowing scrolling AND content that would require scrolling\n      return (hasScrollHeight && hasOverflowY) || \n             (hasScrollWidth && hasOverflowX) ||\n             (hasScrollClasses && (hasScrollHeight || hasScrollWidth)) ||\n             (hasHeightConstraint && hasScrollHeight);\n    }\n\n    /**\n     * Detects scrollable containers that are ancestors of the target element\n     * \n     * This function traverses up the DOM tree from the target element and identifies\n     * all scrollable containers (elements that have scrollable content).\n     * \n     * @param target - The target element to start the search from\n     * @returns Array of objects with selector and scroll properties\n     */\n    function detectScrollableContainers(target) {\n      const scrollableContainers = [];\n      \n      if (!target) {\n        return scrollableContainers;\n      }\n      \n      highlighterLogger.debug('🔍 [detectScrollableContainers] Starting detection for target:', target.tagName, target.id, target.className);\n      \n      // Detect if target is inside an iframe\n      const iframe = getContainingIFrame(target);\n      const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\n      \n      highlighterLogger.debug('🔍 [detectScrollableContainers] Iframe context:', iframe ? 'inside iframe' : 'main document', 'selector:', iframe_selector);\n      \n      // Start from the target element and traverse up the DOM tree\n      let currentElement = target;\n      let depth = 0;\n      const MAX_DEPTH = 10; // Limit traversal depth to avoid infinite loops\n      \n      while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE && depth < MAX_DEPTH) {        \n        // Check if the current element is scrollable\n        if (isScrollableContainer(currentElement)) {\n          highlighterLogger.debug('🔍 [detectScrollableContainers] Found scrollable container at depth', depth, ':', currentElement.tagName, currentElement.id, currentElement.className);\n          \n          const container = {\n            containerEl: currentElement,\n            selector: generateCssPath(currentElement),\n            iframe_selector: iframe_selector,\n            scrollTop: currentElement.scrollTop,\n            scrollLeft: currentElement.scrollLeft,\n            scrollHeight: currentElement.scrollHeight,\n            scrollWidth: currentElement.scrollWidth,\n            clientHeight: currentElement.clientHeight,\n            clientWidth: currentElement.clientWidth\n          };\n          \n          scrollableContainers.push(container);\n        }\n        \n        // Move to parent element\n        currentElement = getParentNode(currentElement);\n        \n        depth++;\n      }\n      \n      highlighterLogger.debug('🔍 [detectScrollableContainers] Detection complete. Found', scrollableContainers.length, 'scrollable containers');\n      return scrollableContainers;\n    }\n\n    class DOMSerializer {\n        constructor(options = {}) {\n          this.options = {\n            includeStyles: true,\n            includeScripts: false, // Security consideration\n            includeFrames: true,\n            includeShadowDOM: true,\n            maxDepth: 50,\n            ...options\n          };\n          this.serializedFrames = new Map();\n          this.shadowRoots = new Map();\n        }\n      \n        /**\n         * Serialize a complete document or element\n         */\n        serialize(rootElement = document) {\n          try {\n            const serialized = {\n              type: 'document',\n              doctype: this.serializeDoctype(rootElement),\n              documentElement: this.serializeElement(rootElement.documentElement || rootElement),\n              frames: [],\n              timestamp: Date.now(),\n              url: rootElement.URL || window.location?.href,\n              metadata: {\n                title: rootElement.title,\n                charset: rootElement.characterSet,\n                contentType: rootElement.contentType\n              }\n            };\n      \n            // Serialize frames and iframes if enabled\n            if (this.options.includeFrames) {\n              serialized.frames = this.serializeFrames(rootElement);\n            }\n      \n            return serialized;\n          } catch (error) {\n            console.error('Serialization error:', error);\n            throw new Error(`DOM serialization failed: ${error.message}`);\n          }\n        }\n      \n        /**\n         * Serialize document type declaration\n         */\n        serializeDoctype(doc) {\n          if (!doc.doctype) return null;\n          \n          return {\n            name: doc.doctype.name,\n            publicId: doc.doctype.publicId,\n            systemId: doc.doctype.systemId\n          };\n        }\n      \n        /**\n         * Serialize an individual element and its children\n         */\n        serializeElement(element, depth = 0) {\n          if (depth > this.options.maxDepth) {\n            return { type: 'text', content: '<!-- Max depth exceeded -->' };\n          }\n      \n          const nodeType = element.nodeType;\n          \n          switch (nodeType) {\n            case Node.ELEMENT_NODE:\n              return this.serializeElementNode(element, depth);\n            case Node.TEXT_NODE:\n              return this.serializeTextNode(element);\n            case Node.COMMENT_NODE:\n              return this.serializeCommentNode(element);\n            case Node.DOCUMENT_FRAGMENT_NODE:\n              return this.serializeDocumentFragment(element, depth);\n            default:\n              return null;\n          }\n        }\n      \n        /**\n         * Serialize element node with attributes and children\n         */\n        serializeElementNode(element, depth) {\n          const tagName = element.tagName.toLowerCase();\n          \n          // Skip script tags for security unless explicitly enabled\n          if (tagName === 'script' && !this.options.includeScripts) {\n            return { type: 'comment', content: '<!-- Script tag removed for security -->' };\n          }\n      \n          const serialized = {\n            type: 'element',\n            tagName: tagName,\n            attributes: this.serializeAttributes(element),\n            children: [],\n            shadowRoot: null\n          };\n      \n          // Handle Shadow DOM\n          if (this.options.includeShadowDOM && element.shadowRoot) {\n            serialized.shadowRoot = this.serializeShadowRoot(element.shadowRoot, depth + 1);\n          }\n      \n          // Handle special elements\n          if (tagName === 'iframe' || tagName === 'frame') {\n            serialized.frameData = this.serializeFrameElement(element);\n          }\n      \n          // Serialize children\n          for (const child of element.childNodes) {\n            const serializedChild = this.serializeElement(child, depth + 1);\n            if (serializedChild) {\n              serialized.children.push(serializedChild);\n            }\n          }\n      \n          // Include computed styles if enabled\n          if (this.options.includeStyles && element.nodeType === Node.ELEMENT_NODE) {\n            serialized.computedStyle = this.serializeComputedStyle(element);\n          }\n      \n          return serialized;\n        }\n      \n        /**\n         * Serialize element attributes\n         */\n        serializeAttributes(element) {\n          const attributes = {};\n          \n          if (element.attributes) {\n            for (const attr of element.attributes) {\n              attributes[attr.name] = attr.value;\n            }\n          }\n      \n          return attributes;\n        }\n      \n        /**\n         * Serialize computed styles\n         */\n        serializeComputedStyle(element) {\n          try {\n            const computedStyle = window.getComputedStyle(element);\n            const styles = {};\n            \n            // Only serialize non-default values to reduce size\n            const importantStyles = [\n              'display', 'position', 'width', 'height', 'margin', 'padding',\n              'border', 'background', 'color', 'font-family', 'font-size',\n              'text-align', 'visibility', 'z-index', 'transform'\n            ];\n      \n            for (const prop of importantStyles) {\n              const value = computedStyle.getPropertyValue(prop);\n              if (value && value !== 'initial' && value !== 'normal') {\n                styles[prop] = value;\n              }\n            }\n      \n            return styles;\n          } catch (error) {\n            return {};\n          }\n        }\n      \n        /**\n         * Serialize text node\n         */\n        serializeTextNode(node) {\n          return {\n            type: 'text',\n            content: node.textContent\n          };\n        }\n      \n        /**\n         * Serialize comment node\n         */\n        serializeCommentNode(node) {\n          return {\n            type: 'comment',\n            content: node.textContent\n          };\n        }\n      \n        /**\n         * Serialize document fragment\n         */\n        serializeDocumentFragment(fragment, depth) {\n          const serialized = {\n            type: 'fragment',\n            children: []\n          };\n      \n          for (const child of fragment.childNodes) {\n            const serializedChild = this.serializeElement(child, depth + 1);\n            if (serializedChild) {\n              serialized.children.push(serializedChild);\n            }\n          }\n      \n          return serialized;\n        }\n      \n        /**\n         * Serialize Shadow DOM\n         */\n        serializeShadowRoot(shadowRoot, depth) {\n          const serialized = {\n            type: 'shadowRoot',\n            mode: shadowRoot.mode,\n            children: []\n          };\n      \n          for (const child of shadowRoot.childNodes) {\n            const serializedChild = this.serializeElement(child, depth + 1);\n            if (serializedChild) {\n              serialized.children.push(serializedChild);\n            }\n          }\n      \n          return serialized;\n        }\n      \n        /**\n         * Serialize frame/iframe elements\n         */\n        serializeFrameElement(frameElement) {\n          const frameData = {\n            src: frameElement.src,\n            name: frameElement.name,\n            id: frameElement.id,\n            sandbox: frameElement.sandbox?.toString() || '',\n            allowfullscreen: frameElement.allowFullscreen\n          };\n      \n          // Try to access frame content (may fail due to CORS)\n          try {\n            const frameDoc = frameElement.contentDocument;\n            if (frameDoc && this.options.includeFrames) {\n              frameData.content = this.serialize(frameDoc);\n            }\n          } catch (error) {\n            frameData.accessError = 'Cross-origin frame content not accessible';\n          }\n      \n          return frameData;\n        }\n      \n        /**\n         * Serialize all frames in document\n         */\n        serializeFrames(doc) {\n          const frames = [];\n          const frameElements = doc.querySelectorAll('iframe, frame');\n      \n          for (const frameElement of frameElements) {\n            try {\n              const frameDoc = frameElement.contentDocument;\n              if (frameDoc) {\n                frames.push({\n                  element: this.serializeElement(frameElement),\n                  content: this.serialize(frameDoc)\n                });\n              }\n            } catch (error) {\n              frames.push({\n                element: this.serializeElement(frameElement),\n                error: 'Frame content not accessible'\n              });\n            }\n          }\n      \n          return frames;\n        }\n      \n        /**\n         * Deserialize serialized DOM data back to DOM nodes\n         */\n        deserialize(serializedData, targetDocument = document) {\n          try {\n            if (serializedData.type === 'document') {\n              return this.deserializeDocument(serializedData, targetDocument);\n            } else {\n              return this.deserializeElement(serializedData, targetDocument);\n            }\n          } catch (error) {\n            console.error('Deserialization error:', error);\n            throw new Error(`DOM deserialization failed: ${error.message}`);\n          }\n        }\n      \n        /**\n         * Deserialize complete document\n         */\n        deserializeDocument(serializedDoc, targetDoc) {\n          // Create new document if needed\n          const doc = targetDoc || document.implementation.createHTMLDocument();\n      \n          // Set doctype if present\n          if (serializedDoc.doctype) {\n            const doctype = document.implementation.createDocumentType(\n              serializedDoc.doctype.name,\n              serializedDoc.doctype.publicId,\n              serializedDoc.doctype.systemId\n            );\n            doc.replaceChild(doctype, doc.doctype);\n          }\n      \n          // Deserialize document element\n          if (serializedDoc.documentElement) {\n            const newDocElement = this.deserializeElement(serializedDoc.documentElement, doc);\n            doc.replaceChild(newDocElement, doc.documentElement);\n          }\n      \n          // Handle metadata\n          if (serializedDoc.metadata) {\n            doc.title = serializedDoc.metadata.title || '';\n          }\n      \n          return doc;\n        }\n      \n        /**\n         * Deserialize individual element\n         */\n        deserializeElement(serializedNode, doc) {\n          switch (serializedNode.type) {\n            case 'element':\n              return this.deserializeElementNode(serializedNode, doc);\n            case 'text':\n              return doc.createTextNode(serializedNode.content);\n            case 'comment':\n              return doc.createComment(serializedNode.content);\n            case 'fragment':\n              return this.deserializeDocumentFragment(serializedNode, doc);\n            case 'shadowRoot':\n              // Shadow roots are handled during element creation\n              return null;\n            default:\n              return null;\n          }\n        }\n      \n        /**\n         * Deserialize element node\n         */\n        deserializeElementNode(serializedElement, doc) {\n          const element = doc.createElement(serializedElement.tagName);\n      \n          // Set attributes\n          if (serializedElement.attributes) {\n            for (const [name, value] of Object.entries(serializedElement.attributes)) {\n              try {\n                element.setAttribute(name, value);\n              } catch (error) {\n                console.warn(`Failed to set attribute ${name}:`, error);\n              }\n            }\n          }\n      \n          // Apply computed styles if available\n          if (serializedElement.computedStyle && this.options.includeStyles) {\n            for (const [prop, value] of Object.entries(serializedElement.computedStyle)) {\n              try {\n                element.style.setProperty(prop, value);\n              } catch (error) {\n                console.warn(`Failed to set style ${prop}:`, error);\n              }\n            }\n          }\n      \n          // Create shadow root if present\n          if (serializedElement.shadowRoot && element.attachShadow) {\n            try {\n              const shadowRoot = element.attachShadow({ \n                mode: serializedElement.shadowRoot.mode || 'open' \n              });\n              \n              // Deserialize shadow root children\n              for (const child of serializedElement.shadowRoot.children) {\n                const childElement = this.deserializeElement(child, doc);\n                if (childElement) {\n                  shadowRoot.appendChild(childElement);\n                }\n              }\n            } catch (error) {\n              console.warn('Failed to create shadow root:', error);\n            }\n          }\n      \n          // Deserialize children\n          if (serializedElement.children) {\n            for (const child of serializedElement.children) {\n              const childElement = this.deserializeElement(child, doc);\n              if (childElement) {\n                element.appendChild(childElement);\n              }\n            }\n          }\n      \n          // Handle frame content\n          if (serializedElement.frameData && serializedElement.frameData.content) {\n            // Frame content deserialization would happen after the frame loads\n            element.addEventListener('load', () => {\n              try {\n                const frameDoc = element.contentDocument;\n                if (frameDoc) {\n                  this.deserializeDocument(serializedElement.frameData.content, frameDoc);\n                }\n              } catch (error) {\n                console.warn('Failed to deserialize frame content:', error);\n              }\n            });\n          }\n      \n          return element;\n        }\n      \n        /**\n         * Deserialize document fragment\n         */\n        deserializeDocumentFragment(serializedFragment, doc) {\n          const fragment = doc.createDocumentFragment();\n      \n          if (serializedFragment.children) {\n            for (const child of serializedFragment.children) {\n              const childElement = this.deserializeElement(child, doc);\n              if (childElement) {\n                fragment.appendChild(childElement);\n              }\n            }\n          }\n      \n          return fragment;\n        }\n      }\n      \n      // Usage example and utility functions\n      class DOMUtils {\n        /**\n         * Create serializer with common presets\n         */\n        static createSerializer(preset = 'default') {\n          const presets = {\n            default: {\n              includeStyles: true,\n              includeScripts: false,\n              includeFrames: true,\n              includeShadowDOM: true\n            },\n            minimal: {\n              includeStyles: false,\n              includeScripts: false,\n              includeFrames: false,\n              includeShadowDOM: false\n            },\n            complete: {\n              includeStyles: true,\n              includeScripts: true,\n              includeFrames: true,\n              includeShadowDOM: true\n            },\n            secure: {\n              includeStyles: true,\n              includeScripts: false,\n              includeFrames: false,\n              includeShadowDOM: true\n            }\n          };\n      \n          return new DOMSerializer(presets[preset] || presets.default);\n        }\n      \n        /**\n         * Serialize DOM to JSON string\n         */\n        static serializeToJSON(element, options) {\n          const serializer = new DOMSerializer(options);\n          const serialized = serializer.serialize(element);\n          return JSON.stringify(serialized, null, 2);\n        }\n      \n        /**\n         * Deserialize from JSON string\n         */\n        static deserializeFromJSON(jsonString, targetDocument) {\n          const serialized = JSON.parse(jsonString);\n          const serializer = new DOMSerializer();\n          return serializer.deserialize(serialized, targetDocument);\n        }\n      \n        /**\n         * Clone DOM with full fidelity including Shadow DOM\n         */\n        static deepClone(element, options) {\n          const serializer = new DOMSerializer(options);\n          const serialized = serializer.serialize(element);\n          return serializer.deserialize(serialized, element.ownerDocument);\n        }\n      \n        /**\n         * Compare two DOM structures\n         */\n        static compare(element1, element2, options) {\n          const serializer = new DOMSerializer(options);\n          const serialized1 = serializer.serialize(element1);\n          const serialized2 = serializer.serialize(element2);\n          \n          return JSON.stringify(serialized1) === JSON.stringify(serialized2);\n        }\n      }\n      \n      /*\n      // Export for use\n      if (typeof module !== 'undefined' && module.exports) {\n        module.exports = { DOMSerializer, DOMUtils };\n      } else if (typeof window !== 'undefined') {\n        window.DOMSerializer = DOMSerializer;\n        window.DOMUtils = DOMUtils;\n      }\n      */\n\n      /* Usage Examples:\n      \n      // Basic serialization\n      const serializer = new DOMSerializer();\n      const serialized = serializer.serialize(document);\n      console.log(JSON.stringify(serialized, null, 2));\n      \n      // Deserialize back to DOM\n      const clonedDoc = serializer.deserialize(serialized);\n      \n      // Using presets\n      const minimalSerializer = DOMUtils.createSerializer('minimal');\n      const secureSerializer = DOMUtils.createSerializer('secure');\n      \n      // Serialize specific element with Shadow DOM\n      const customElement = document.querySelector('my-custom-element');\n      const serializedElement = serializer.serialize(customElement);\n      \n      // JSON utilities\n      const jsonString = DOMUtils.serializeToJSON(document.body);\n      const restored = DOMUtils.deserializeFromJSON(jsonString);\n      \n      // Deep clone with Shadow DOM support\n      const clone = DOMUtils.deepClone(document.body, { includeShadowDOM: true });\n      \n      */\n\n      function serializeNodeToJSON(nodeElement) {\n        return DOMUtils.serializeToJSON(nodeElement, {includeStyles: false});\n      }\n\n      function deserializeNodeFromJSON(jsonString) {\n        return DOMUtils.deserializeFromJSON(jsonString);\n      }\n\n    function findDropdowns() {\n      const dropdowns = [];\n      \n      // Native select elements\n      dropdowns.push(...getAllElementsIncludingShadow('select'));\n      \n      // Elements with dropdown roles that don't have <input>..</input>\n      const roleElements = getAllElementsIncludingShadow('[role=\"combobox\"], [role=\"listbox\"], [role=\"dropdown\"], [role=\"option\"], [role=\"menu\"], [role=\"menuitem\"]').filter(el => {\n        return el.tagName.toLowerCase() !== 'input' || ![\"button\", \"checkbox\", \"radio\"].includes(el.getAttribute(\"type\"));\n      });\n      dropdowns.push(...roleElements);\n      \n      // Common dropdown class patterns\n      const dropdownPattern = /.*(dropdown|select|combobox|menu).*/i;\n      const elements = getAllElementsIncludingShadow('*');\n      const dropdownClasses = Array.from(elements).filter(el => {\n        const hasDropdownClass = dropdownPattern.test(el.className);\n        const validTag = ['li', 'ul', 'span', 'div', 'p', 'a', 'button'].includes(el.tagName.toLowerCase());\n        const style = window.getComputedStyle(el); \n        const result = hasDropdownClass && validTag && (style.cursor === 'pointer' || el.tagName.toLowerCase() === 'a' || el.tagName.toLowerCase() === 'button');\n        return result;\n      });\n      \n      dropdowns.push(...dropdownClasses);\n      \n      // Elements with aria-haspopup attribute\n      dropdowns.push(...getAllElementsIncludingShadow('[aria-haspopup=\"true\"], [aria-haspopup=\"listbox\"], [aria-haspopup=\"menu\"]'));\n\n      // Improve navigation element detection\n      // Semantic nav elements with list items\n      dropdowns.push(...getAllElementsIncludingShadow('nav ul li, nav ol li'));\n      \n      // Navigation elements in common design patterns\n      dropdowns.push(...getAllElementsIncludingShadow('header a, .header a, .nav a, .navigation a, .menu a, .sidebar a, aside a'));\n      \n      // Elements in primary navigation areas with common attributes\n      dropdowns.push(...getAllElementsIncludingShadow('[role=\"navigation\"] a, [aria-label*=\"navigation\"] a, [aria-label*=\"menu\"] a'));\n\n      return dropdowns;\n    }\n\n    function findClickables() {\n      const clickables = [];\n      \n      const checkboxPattern = /checkbox/i;\n      // Collect all clickable elements first\n      const nativeLinks = [...getAllElementsIncludingShadow('a')];\n      const nativeButtons = [...getAllElementsIncludingShadow('button')];\n      const inputButtons = [...getAllElementsIncludingShadow('input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"]')];\n      const roleButtons = [...getAllElementsIncludingShadow('[role=\"button\"]')];\n      // const tabbable = [...getAllElementsIncludingShadow('[tabindex=\"0\"]')];\n      const clickHandlers = [...getAllElementsIncludingShadow('[onclick]')];\n      const dropdowns = findDropdowns();\n      const nativeCheckboxes = [...getAllElementsIncludingShadow('input[type=\"checkbox\"]')];  \n      const fauxCheckboxes = getAllElementsIncludingShadow('*').filter(el => {\n        if (checkboxPattern.test(el.className)) {\n          const realCheckboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]', el);\n          if (realCheckboxes.length === 1) {\n            const boundingRect = realCheckboxes[0].getBoundingClientRect();\n            return boundingRect.width <= 1 && boundingRect.height <= 1      \n          }\n        }\n        return false;\n      });\n      const nativeRadios = [...getAllElementsIncludingShadow('input[type=\"radio\"]')];\n      const toggles = findToggles();\n      const pointerElements = findElementsWithPointer();\n      // Add all elements at once\n      clickables.push(\n        ...nativeLinks,\n        ...nativeButtons,\n        ...inputButtons,\n        ...roleButtons,\n        // ...tabbable,\n        ...clickHandlers,\n        ...dropdowns,\n        ...nativeCheckboxes,\n        ...fauxCheckboxes,\n        ...nativeRadios,\n        ...toggles,\n        ...pointerElements\n      );\n\n      // Only uniquify once at the end\n      return clickables;  // Let findElements handle the uniquification\n    }\n\n    function findToggles() {\n      const toggles = [];\n      const checkboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]');\n      const togglePattern = /switch|toggle|slider/i;\n\n      checkboxes.forEach(checkbox => {\n        let isToggle = false;\n\n        // Check the checkbox itself\n        if (togglePattern.test(checkbox.className) || togglePattern.test(checkbox.getAttribute('role') || '')) {\n          isToggle = true;\n        }\n\n        // Check parent elements (up to 3 levels)\n        if (!isToggle) {\n          let element = checkbox;\n          for (let i = 0; i < 3; i++) {\n            const parent = element.parentElement;\n            if (!parent) break;\n\n            const className = parent.className || '';\n            const role = parent.getAttribute('role') || '';\n\n            if (togglePattern.test(className) || togglePattern.test(role)) {\n              isToggle = true;\n              break;\n            }\n            element = parent;\n          }\n        }\n\n        // Check next sibling\n        if (!isToggle) {\n          const nextSibling = checkbox.nextElementSibling;\n          if (nextSibling) {\n            const className = nextSibling.className || '';\n            const role = nextSibling.getAttribute('role') || '';\n            if (togglePattern.test(className) || togglePattern.test(role)) {\n              isToggle = true;\n            }\n          }\n        }\n\n        if (isToggle) {\n          toggles.push(checkbox);\n        }\n      });\n\n      return toggles;\n    }\n\n    function findNonInteractiveElements() {\n      // Get all elements in the document\n      const all = Array.from(getAllElementsIncludingShadow('*'));\n      \n      // Filter elements based on Python implementation rules\n      return all.filter(element => {\n        if (!element.firstElementChild) {\n          const tag = element.tagName.toLowerCase();      \n          if (!['select', 'button', 'a'].includes(tag)) {\n            const validTags = ['p', 'span', 'div', 'input', 'textarea','td','th'].includes(tag) || /^h\\d$/.test(tag) || /text/.test(tag);\n            const boundingRect = element.getBoundingClientRect();\n            return validTags && boundingRect.height > 1 && boundingRect.width > 1;\n          }\n        }\n        return false;\n      });\n    }\n\n\n\n    function findElementsWithPointer() {\n      const elements = [];\n      const allElements = getAllElementsIncludingShadow('*');\n      \n      highlighterLogger.debug('Checking elements with pointer style...');\n      \n      allElements.forEach(element => {\n        // Skip SVG elements for now\n        if (element instanceof SVGElement || element.tagName.toLowerCase() === 'svg') {\n          return;\n        }\n        \n        const style = window.getComputedStyle(element);\n        if (style.cursor === 'pointer') {\n          elements.push(element);\n        }\n      });\n      \n      highlighterLogger.debug(`Found ${elements.length} elements with pointer cursor`);\n      return elements;\n    }\n\n    function findCheckables() {\n      const elements = [];\n\n      elements.push(...getAllElementsIncludingShadow('input[type=\"checkbox\"]'));\n      elements.push(...getAllElementsIncludingShadow('input[type=\"radio\"]'));\n      const all_elements = getAllElementsIncludingShadow('label');\n      const radioClasses = Array.from(all_elements).filter(el => {\n        return /.*radio.*/i.test(el.className);    \n      });\n      elements.push(...radioClasses);\n      return elements;\n    }\n\n    function findFillables() {\n      const elements = [];\n\n      const inputs = [...getAllElementsIncludingShadow('input:not([type=\"radio\"]):not([type=\"checkbox\"])')];\n      highlighterLogger.debug('Found inputs:', inputs.length, inputs);\n      elements.push(...inputs);\n      \n      const textareas = [...getAllElementsIncludingShadow('textarea')];\n      highlighterLogger.debug('Found textareas:', textareas.length);\n      elements.push(...textareas);\n      \n      const editables = [...getAllElementsIncludingShadow('[contenteditable=\"true\"]')];\n      highlighterLogger.debug('Found editables:', editables.length);\n      elements.push(...editables);\n\n      return elements;\n    }\n\n    // maximum number of characters in a logical name\n    const MAX_LOGICAL_NAME_LENGTH = 25;\n      \n    /**\n      * Query elements by CSS selector with :has-text(\"...\") pseudo-selector\n      * @param {string} selector - CSS selector with optional :has-text(\"...\") pseudo-selector\n      * @param {Element|Document} context - Context element to query within (defaults to document)\n      * @returns {Element[]} Array of matched elements\n      * @example\n      * // Find all buttons with text \"Submit\"\n      * querySelectorAllByText('button:has-text(\"Submit\")')\n      * \n      * // Find element with specific role and text\n      * querySelectorAllByText('[role=\"button\"]:has-text(\"Click me\")')\n      * \n      * // Complex selector with descendants\n      * querySelectorAllByText('button:has-text(\"foo\") > div > ul')\n      * \n      * // Multiple components\n      * querySelectorAllByText('.container > button:has-text(\"Submit\")')\n      * \n      * // Multiple text filters\n      * querySelectorAllByText('button:has-text(\"foo\") > div:has-text(\"bar\") > span')\n      */\n      function querySelectorAllByText(selector, context = document) {\n    \t// Local helper function to compare two strings by normalizing whitespace and ignoring case\n    \t// mimic the behavior of Playwright's :has-text() selector modifier\n    \tfunction pwHasText(str1, str2) {\n    \t\tif (!str1 || !str2) return false;\n    \t\t\n    \t\t// Normalize whitespace by replacing multiple spaces with single space and trim\n    \t\tconst normalize = (str) => cleanText(str.toLowerCase());\n    \t\t\n    \t\tconst normalized1 = normalize(str1);\n    \t\tconst normalized2 = normalize(str2);\n    \t\t\n    \t\treturn normalized1.includes(normalized2);\n    \t}\n    \t\n    \t// Check if selector contains :has-text() pseudo-selector\n    \tif (!selector.includes(':has-text(')) {\n    \t\t// No :has-text pseudo-selector, use regular querySelectorAll\n    \t\treturn Array.from(robustQuerySelector(selector, context, true));\n    \t}\n    \t\n    \t// Split selector by combinators while preserving them\n    \t// Matches: >, +, ~, or space (descendant combinator)\n    \tconst parts = [];\n    \tlet currentPart = '';\n    \tlet inBracket = false;\n    \tlet inTextPseudo = false;\n    \tlet inTextQuotes = false;\n    \tlet i = 0;\n    \t\n    \twhile (i < selector.length) {\n    \t\tconst char = selector[i];\n    \t\t\n    \t\t// Track :has-text(\"...\") to avoid splitting inside it\n    \t\tif (selector.substring(i, i + 10) === ':has-text(') {\n    \t\t\tinTextPseudo = true;\n    \t\t\tinTextQuotes = false;\n    \t\t}\n    \t\tif (inTextPseudo && char === '\"' && !inTextQuotes) {\n    \t\t\tinTextQuotes = true;\n    \t\t} else if (inTextPseudo && char === '\"' && inTextQuotes) {\n    \t\t\t// Check if this quote is escaped\n    \t\t\tif (i > 0 && selector[i - 1] === '\\\\') ; else {\n    \t\t\t\tinTextQuotes = false;\n    \t\t\t}\n    \t\t}\n    \t\tif (inTextPseudo && char === ')' && !inTextQuotes) {\n    \t\t\tinTextPseudo = false;\n    \t\t\tcurrentPart += char;\n    \t\t\ti++;\n    \t\t\tcontinue;\n    \t\t}\n    \t\t\n    \t\t// Track brackets to avoid splitting on combinators inside attribute selectors\n    \t\tif (char === '[') inBracket = true;\n    \t\tif (char === ']') inBracket = false;\n    \t\t\n    \t\t// Check for combinators (not inside brackets or :has-text())\n    \t\tif (!inBracket && !inTextPseudo && (char === '>' || char === '+' || char === '~')) {\n    \t\t\tif (currentPart.trim()) parts.push({ selector: currentPart.trim(), combinator: null });\n    \t\t\tparts.push({ selector: null, combinator: char.trim() });\n    \t\t\tcurrentPart = '';\n    \t\t\ti++;\n    \t\t\tcontinue;\n    \t\t}\n    \t\t\n    \t\t// Check for space combinator (descendant)\n    \t\tif (!inBracket && !inTextPseudo && char === ' ') {\n    \t\t\t// Skip multiple spaces\n    \t\t\twhile (i < selector.length && selector[i] === ' ') i++;\n    \t\t\t// Check if next char is a combinator (>, +, ~)\n    \t\t\tif (i < selector.length && !'><+~'.includes(selector[i])) {\n    \t\t\t\tif (currentPart.trim()) {\n    \t\t\t\t\tparts.push({ selector: currentPart.trim(), combinator: null });\n    \t\t\t\t\tparts.push({ selector: null, combinator: ' ' });\n    \t\t\t\t\tcurrentPart = '';\n    \t\t\t\t}\n    \t\t\t}\n    \t\t\tcontinue;\n    \t\t}\n    \t\t\n    \t\tcurrentPart += char;\n    \t\ti++;\n    \t}\n    \tif (currentPart.trim()) parts.push({ selector: currentPart.trim(), combinator: null });\n    \t\n    \t// Filter out combinator-only entries and rebuild as selector+combinator pairs\n    \tconst selectorParts = [];\n    \tfor (let j = 0; j < parts.length; j++) {\n    \t\tif (parts[j].selector) {\n    \t\t\tconst combinator = (j + 1 < parts.length && parts[j + 1].combinator) ? parts[j + 1].combinator : null;\n    \t\t\t// Extract text value if present\n    \t\t\tconst textMatch = parts[j].selector.match(/:has-text\\(\"((?:[^\"\\\\]|\\\\.)*)\"\\)/);\n    \t\t\tconst textValue = textMatch ? textMatch[1] : null;\n    \t\t\tconst selectorWithoutText = textMatch ? parts[j].selector.replace(/:has-text\\(\"((?:[^\"\\\\]|\\\\.)*)\"\\)/, '') : parts[j].selector;\n    \t\t\t\n    \t\t\tselectorParts.push({ \n    \t\t\t\tselector: parts[j].selector,\n    \t\t\t\tselectorWithoutText,\n    \t\t\t\ttextValue,\n    \t\t\t\tcombinator \n    \t\t\t});\n    \t\t}\n    \t}\n    \t\n    \t// Process selector parts sequentially, applying text filters as we go\n    \tlet currentElements = [context];\n    \t\n    \tfor (let partIndex = 0; partIndex < selectorParts.length; partIndex++) {\n    \t\tconst part = selectorParts[partIndex];\n    \t\tconst nextElements = [];\n    \t\t\n    \t\tfor (const ctx of currentElements) {\n    \t\t\tlet candidates;\n    \t\t\t\n    \t\t\tif (partIndex === 0 && ctx === context) {\n    \t\t\t\t// First part, query from document/context\n    \t\t\t\tconst querySelector = part.selectorWithoutText.trim() || '*';\n    \t\t\t\tcandidates = Array.from(robustQuerySelector(querySelector, ctx, true));\n    \t\t\t\thighlighterLogger.debug(`querySelectorAllByText: first part, querySelector=${querySelector}, candidates=`, candidates);\n    \t\t\t} \n    \t\t\telse {\n    \t\t\t\t// Subsequent parts, use combinator\n    \t\t\t\tconst prevPart = selectorParts[partIndex - 1];\n    \t\t\t\tconst combinator = prevPart.combinator;\n    \t\t\t\tconst querySelector = part.selectorWithoutText.trim() || '*';\n    \t\t\t\t\n    \t\t\t\tif (combinator === '>') {\n    \t\t\t\t\t// Direct children\n    \t\t\t\t\tcandidates = Array.from(ctx.children).filter(child => {\n    \t\t\t\t\t\treturn child.matches(querySelector);\n    \t\t\t\t\t});\n    \t\t\t\t} else if (combinator === '+') {\n    \t\t\t\t\t// Next sibling\n    \t\t\t\t\tconst sibling = ctx.nextElementSibling;\n    \t\t\t\t\tcandidates = (sibling && sibling.matches(querySelector)) ? [sibling] : [];\n    \t\t\t\t} else if (combinator === '~') {\n    \t\t\t\t\t// Following siblings\n    \t\t\t\t\tcandidates = [];\n    \t\t\t\t\tlet sibling = ctx.nextElementSibling;\n    \t\t\t\t\twhile (sibling) {\n    \t\t\t\t\t\tif (sibling.matches(querySelector)) {\n    \t\t\t\t\t\t\tcandidates.push(sibling);\n    \t\t\t\t\t\t}\n    \t\t\t\t\t\tsibling = sibling.nextElementSibling;\n    \t\t\t\t\t}\n    \t\t\t\t} \n    \t\t\t\telse {\n    \t\t\t\t\t// Descendant (space)\n    \t\t\t\t\tcandidates = Array.from(robustQuerySelector(querySelector, ctx, true));\n    \t\t\t\t}\n    \t\t\t}\n    \t\t\t\n    \t\t\t// Apply text filter if present\n    \t\t\tif (part.textValue !== null) {\n    \t\t\t\tcandidates = candidates.filter(el => pwHasText(getElementText(el), part.textValue));\n    \t\t\t}\n    \t\t\t\n    \t\t\tnextElements.push(...candidates);\n    \t\t}\n    \t\t\n    \t\tcurrentElements = nextElements;\n    \t\t\n    \t\t// If no matches, bail early\n    \t\tif (currentElements.length === 0) {\n    \t\t\treturn [];\n    \t\t}\n    \t}\n    \t\n    \treturn currentElements;\n    }\n\n    const cleanText = (text) => {\n    \treturn text.replace(/\\s+/g, ' ').trim();\n    };\n\n    // Helper function to get name selector\n    const getNameSelector = (element) => {\n    \tconst text = cleanText(getElementText(element));\n    \tconst title = element.getAttribute('title');\n    \tconst name = element.getAttribute('name');\n    \tconst ariaLabel = element.getAttribute('aria-label');\n    \tif (!text && !title && !name && !ariaLabel) throw new Error('No name attribute provided');\n    \tif (text) return `:has-text(${doubleQuoteString(text)})`;\n    \tif (title) return `[title=${doubleQuoteString(title)}]`;\n    \tif (ariaLabel) return `[aria-label=${doubleQuoteString(ariaLabel)}]`;\n    \treturn `[name=${doubleQuoteString(name)}]`;        \n    };\n\n    const getLogicalName = (element) => {\n    \tconst text = cleanText(getElementText(element));\n    \tconst title = element.getAttribute('title');\n    \tconst name = element.getAttribute('name');\n    \tconst ariaLabel = element.getAttribute('aria-label');\n    \tconst role = element.getAttribute('role');\n    \tconst logicalName = text || title || name || ariaLabel;\n    \treturn {\n    \t\thasLogicalName: logicalName && logicalName.length < MAX_LOGICAL_NAME_LENGTH && !role?.startsWith('row'),\n    \t\tlogicalName: logicalName\n    \t};\n    };\n\n\n    /**\n     * Individual strategy functions\n     */\n\n    function tryRoleStrategy(element) {    \n    \tconst role = element.getAttribute('role');\n    \tconst tag = element.tagName.toLowerCase();\n    \tconst { hasLogicalName, logicalName } = getLogicalName(element);\n    \tif (role && hasLogicalName) {\n    \t\treturn { \n    \t\t\tstrategy: 'role', \n    \t\t\tselector: `[role=${doubleQuoteString(role)}]${getNameSelector(element)}`\n    \t\t};\n    \t}\n    \t\n    \t// Tag-based role (button, a, input, etc.) + name\n    \tif (['button', 'a', 'input', 'textarea', 'select'].includes(tag) && hasLogicalName) {\n    \t\treturn { \n    \t\t\tstrategy: 'role', \n    \t\t\tselector: `${tag}${getNameSelector(element)}`\n    \t\t};\n    \t}\n    \t\n    \treturn null;\n    }\n\n    function tryPlaceholderStrategy(element) {\n    \tconst placeholder = element.getAttribute('placeholder');\n    \tif (placeholder) {\n    \t\treturn { \n    \t\t\tstrategy: 'placeholder', \n    \t\t\tselector: `[placeholder=${doubleQuoteString(placeholder)}]` \n    \t\t};\n    \t}\n    \treturn null;\n    }\n\n    function tryLabelStrategy(element) {\n    \tconst tag = element.tagName.toLowerCase();\n    \tif (['input', 'textarea', 'select'].includes(tag)) {\n    \t\tconst id = element.id;\n    \t\tif (id) {\n    \t\t\tconst labels = robustQuerySelector(`label[for=${doubleQuoteString(id)}]`, document, true);\n    \t\t\tif (labels.length === 1) { //make sure id is unique\n    \t\t\t\tconst labelText = cleanText(getElementText(labels[0]));\n    \t\t\t\tif (labelText) {\n    \t\t\t\t\tconst labelSelector = `label:has-text(${doubleQuoteString(labelText)})`;\n    \t\t\t\t\ttry {\n    \t\t\t\t\t\tconst els = querySelectorAllByText(labelSelector, document);\n    \t\t\t\t\t\tif (els.length === 1) {\n    \t\t\t\t\t\t\treturn { \n    \t\t\t\t\t\t\t\tstrategy: 'label for',\n    \t\t\t\t\t\t\t\tlabel_selector: labelSelector\n    \t\t\t\t\t\t\t};\n    \t\t\t\t\t\t}\n    \t\t\t\t\t} catch (error) {\n    \t\t\t\t\t\thighlighterLogger.error(`internal error: while querying label selector ${labelSelector} for element ${element.outerHTML}`, error);\n    \t\t\t\t\t\tthrow error;\n    \t\t\t\t\t}\n    \t\t\t\t}\n    \t\t\t}\n    \t\t}\n    \t}\n    \treturn null;\n    }\n\n    function tryAriaLabelledByStrategy(element) {\n    \tconst arialabeledBy = element.getAttribute('aria-labelledby');\n    \tconst tag = element.tagName.toLowerCase();\n    \t\n    \tif (arialabeledBy) {\n    \t\tconst labels = robustQuerySelector(`#${CSS.escape(arialabeledBy)}`, document, true);\n    \t\tif (labels.length === 1) {\n    \t\t\tconst labelText = cleanText(getElementText(labels[0]));\n    \t\t\tif (labelText) { //verify the label text is unique\n    \t\t\t\tconst labelSelector = `${tag}:has-text(${doubleQuoteString(labelText)})`;\n    \t\t\t\ttry {\n    \t\t\t\t\tconst els = querySelectorAllByText(labelSelector, document);\n    \t\t\t\t\tif (els.length === 1) {\n    \t\t\t\t\t\treturn { \n    \t\t\t\t\t\t\tstrategy: 'label by',   \n    \t\t\t\t\t\t\tlabel_selector: labelSelector\n    \t\t\t\t\t\t};\n    \t\t\t\t\t}\n    \t\t\t\t} catch (error) {\n    \t\t\t\t\thighlighterLogger.error(`internal error: while querying aria-labelledby selector ${labelSelector} for element ${element.outerHTML}`, error);\n    \t\t\t\t\tthrow error;\n    \t\t\t\t}\n    \t\t\t}\n    \t\t}\n    \t}\n    \treturn null;\n    }\n\n    // Only use text strategy if element is clickable/interactive          \n    function tryNameStrategy(element) {\t\n    \tconst { hasLogicalName } = getLogicalName(element);\n    \tconst classes = Array.from(element.classList).map(cls => CSS.escape(cls));\n    \t\n    \t// Only use name strategy if element is clickable/interactive          \n    \tif (isClickableElement(element) && hasLogicalName && classes.length > 0) {\n    \t\treturn { \n    \t\t\tstrategy: 'name', \n    \t\t\tselector: `.${classes.join('.')}${getNameSelector(element)}` \n    \t\t\t// selector: `${element.tagName.toLowerCase()}${getNameSelector(element)}`\n    \t\t};\n    \t}\n    \treturn null;\n    }\n\n    function tryDataTestIdStrategy(element) {\n    \tconst dataTestId = element.getAttribute('data-testid');\n    \tif (dataTestId) {\n    \t\treturn { \n    \t\t\tstrategy: 'data-testid',\t\t\t\n    \t\t\tselector: `[data-testid=${doubleQuoteString(dataTestId)}]` \n    \t\t};\n    \t}\n    \treturn null;\n    }\n\n    function tryIdStrategy(element) {\n    \tconst id = element.getAttribute('id');\n    \tif (id && !/:|\\s|\\\\/.test(id)) { //avoid using id if it contain unusual characters (react creates ids like this: \":r:42\")\n    \t\treturn { \n    \t\t\tstrategy: 'id', \n    \t\t\tselector: `#${CSS.escape(id)}` \n    \t\t};\n    \t}\n    \treturn null;\n    }\n\n    // Try all strategies on an element in order of precedence\n    function attemptStrategiesOnElement(element) {\n    \tconst strategies = [\n    \t\ttryRoleStrategy,      \t\t\n    \t\ttryAriaLabelledByStrategy,\n    \t\ttryNameStrategy,\n    \t\ttryLabelStrategy,\n    \t\ttryDataTestIdStrategy,\n    \t\ttryPlaceholderStrategy,\n    \t\ttryIdStrategy,\t\t\n    \t\t// tryClassStrategy\n    \t];\n    \t\n    \tfor (const strategy of strategies) {\n    \t\tconst result = strategy(element);      \n    \t\tif (result) {        \n    \t\t\treturn result;\n    \t\t}\n    \t}\n    \treturn null;\n    }\n\n    /**\n     * Generate a smart selector for an element\n     * @param {Element} element - The element to generate a locator for\n     * @param {string} childPath - The child path to generate a locator for\n     * @returns {Object} The selector for the element\n     */\n    function generateSmartSelector(element, childPath = '') {\n    \t// Terminate recursion\n    \tif (!element || element.nodeType !== Node.ELEMENT_NODE) {\n    \t\treturn {\n    \t\t\tstrategy: 'css',\n    \t\t\tselector: childPath\n    \t\t};\n    \t}\n    \t\n    \t// Try strategies 1-6 on current element\n    \tconst result = attemptStrategiesOnElement(element);\n    \tconst is_label = result?.strategy === 'label for' || result?.strategy === 'label by';\n\n    \tif (result) { // found a strategy\t\t\t\n    \t\t// If we have a child path, concatenate parent strategy result with child CSS path            \n    \t\tlet extendedResult = result;        \n    \t\tif (childPath) {\n    \t\t\tconst selector = is_label ? `${childPath}` : `${result?.selector} > ${childPath}`;\n    \t\t\textendedResult = {\n    \t\t\t\t...extendedResult,\n    \t\t\t\tselector: selector,\n    \t\t\t\tstrategy: `${extendedResult.strategy} (concatenated with child CSS path)`\n    \t\t\t};\n    \t\t}      \t\t\n    \t\t// check if the combined selector is unique and if not add the index to the strategy\n    \t\tif (!is_label) { //label element is already checked for uniqueness\n    \t\t\ttry {\n    \t\t\t\tconst matchedElements = querySelectorAllByText(result?.selector);   \n    \t\t\t\thighlighterLogger.debug(`querySelectorAllByText(${result?.selector}) matched ${matchedElements.length} elements`);\n    \t\t\t\thighlighterLogger.debug(matchedElements);\n    \t\t\t\tif (matchedElements.length > 1) {\n    \t\t\t\t\tconst index = matchedElements.findIndex(el => el === element);\n    \t\t\t\t\tif (index === -1) {\n    \t\t\t\t\t\thighlighterLogger.error('internal error: Element not found in matched elements', element, result?.selector, matchedElements);\n    \t\t\t\t\t\treturn null;\n    \t\t\t\t\t}\n    \t\t\t\t\textendedResult = {\n    \t\t\t\t\t\t...extendedResult,\n    \t\t\t\t\t\tstrategy: `${extendedResult.strategy} (by index)`,\n    \t\t\t\t\t\tindex,\n    \t\t\t\t\t};        \n    \t\t\t\t}\n    \t\t\t} catch (error) {\n    \t\t\t\thighlighterLogger.error(`internal error: while checking if selector ${result?.selector} is unique for element ${element.outerHTML}`, error);\n    \t\t\t\tthrow error;\n    \t\t\t}\t\t\t\n    \t\t}\n    \t\treturn extendedResult;\n    \t}\n    \t\n    \t// Get CSS selector for current element and build child path    \n    \tlet newChildPath;\n    \t// didn't find strategy\n    \tconst elementSelector = getElementCssSelector(element);\n    \tnewChildPath = childPath ? `${elementSelector} > ${childPath}` : elementSelector;\n    \tconst matchedElements = robustQuerySelector(newChildPath, document, true);\n    \tif (matchedElements.length === 1) {\n    \t\treturn {\n    \t\t\tstrategy: 'css',\t\t\t\t\n    \t\t\tselector: newChildPath\n    \t\t};\n    \t}\n\n    \t// Recursively try parent element\n    \treturn generateSmartSelector(getParentNode(element), newChildPath);\n    }\n\n    const findElementByInfo = (elementInfo, useSmartSelectors = false) => {\n    \thighlighterLogger.debug('findElementByInfo:', elementInfo);\n    \tif (useSmartSelectors) {\n    \t  return findElementBySelectors(elementInfo.smart_iframe_selector, elementInfo.smart_selector, true);\n    \t}\n    \treturn findElementBySelectors(elementInfo.iframe_selector, elementInfo.css_selector, false);\n    };\n\n    const compareSelectors = (selector1, selector2, useSmartSelectors = false) => {\n    \tif (useSmartSelectors) {\n    \t\treturn JSON.stringify(selector1) === JSON.stringify(selector2);\n    \t}\n    \treturn selector1 === selector2;\n    };\n\n    const findElementBySelectors = (iframeSelector, elementSelector, useSmartSelectors = false) => {\n    \tlet element;\n    \t\n    \t// first find the iframe that contains the element\n    \tif (iframeSelector) {      \n    \t  const frames = getAllDocumentElementsIncludingShadow('iframe', document);\n    \t  \n    \t  // Iterate over all frames and compare their CSS selectors\n    \t  for (const frame of frames) {\n    \t\tconst selector = useSmartSelectors ? generateSmartSelector(frame) : generateCssPath(frame);\n    \t\tif (compareSelectors(selector, iframeSelector, useSmartSelectors)) {\n    \t\t  const frameDocument = frame.contentDocument || frame.contentWindow.document;\n    \t\t  element = useSmartSelectors ? findElementBySmartSelector(elementSelector, frameDocument) : robustQuerySelector(elementSelector, frameDocument);\t\t  \n    \t\t  break;\n    \t\t}        \n    \t  }\t}\n    \telse {\t\t\n    \t\telement = useSmartSelectors ? findElementBySmartSelector(elementSelector, document) : robustQuerySelector(elementSelector, document);\t\t\n    \t}\n    \t  \n    \tif (element) {\n    \t\thighlighterLogger.debug('findElementBySelectors: found element ', element);\n    \t}\n    \telse {\n    \t  highlighterLogger.warn('findElementBySelectors: failed to find element with CSS selector:', JSON.stringify(elementSelector));\n    \t}\n      \n    \treturn element;\n      };\n      \n    function findElementBySmartSelector(smartSelector, root = document) {\t\n    \thighlighterLogger.debug(`findElementBySmartSelector: called with smartSelector=${JSON.stringify(smartSelector)}`);\n    \tlet combinedSelector;\n    \tconst mainStrategy = smartSelector.strategy.split(' ')[0]; //extract the main strategy from the full strategy string\n    \tswitch(mainStrategy) {\n            case 'role': \n            case 'placeholder':\n            case 'name':\n            case 'data-testid':\n            case 'id':\n            case 'css':\n            case 'class':\n    \t\t  highlighterLogger.debug(`findElementBySmartSelector: strategy='${smartSelector.strategy}', selector=${smartSelector?.selector}, index=${smartSelector?.index}`);\n              if (typeof smartSelector?.index === 'number') {\n                return querySelectorAllByText(smartSelector.selector, root)[smartSelector.index];\n              }\n              else {\n                return querySelectorAllByText(smartSelector.selector, root)[0];\n              }\t\t  \n            case 'label':\n    \t\t\tif (smartSelector.strategy === 'label for') {\n    \t\t\t\thighlighterLogger.debug(`findElementBySmartSelector: strategy='label for', label_selector=${smartSelector.label_selector}`);\n    \t\t\t\tconst label_for = querySelectorAllByText(smartSelector.label_selector, root)[0];\n    \t\t\t\tcombinedSelector = smartSelector?.selector ? `#${label_for.getAttribute('for')} > ${smartSelector.selector}` : `#${label_for.getAttribute('for')}`;\n    \t\t\t\treturn robustQuerySelector(combinedSelector, root);\n    \t\t\t}\n    \t\t\telse if (smartSelector.strategy === 'label by') {\n    \t\t\t\thighlighterLogger.debug(`findElementBySmartSelector: strategy='label by', label_selector=${smartSelector.label_selector}`);\n    \t\t\t\tconst label_by = querySelectorAllByText(smartSelector.label_selector, root)[0];\n    \t\t\t\tcombinedSelector = smartSelector?.selector ? `[aria-labelledby=\"${label_by.getAttribute('id')}\"] > ${smartSelector.selector}` : `[aria-labelledby=\"${label_by.getAttribute('id')}\"]`;\n    \t\t\t\treturn robustQuerySelector(combinedSelector, root);\n    \t\t\t}\n    \t\t\telse {\n    \t\t\t\thighlighterLogger.error(`findElementBySmartSelector: unsupported label strategy: ${smartSelector.strategy}`);\n    \t\t\t\treturn null;\n    \t\t\t}        \n            default:\n              highlighterLogger.error(`findElementBySmartSelector: Unsupported smart selector strategy: ${smartSelector.strategy}`);\n              return null;\n            }\n    }\n\n    function getElementInfo(element, index) {    \t\t\t\n    \tconst iframe = getContainingIFrame(element);  \n    \tconst iframe_selector = iframe ? generateCssPath(iframe) : \"\";\t\n    \tconst smart_iframe_selector = iframe ? generateSmartSelector(iframe) : null;\n    \t\n    \t// Return element info with pre-calculated values\n    \treturn {\n    \t\tindex: index ?? -1,\n    \t\ttag: element.tagName.toLowerCase(),\n    \t\ttype: element.type || '',\n    \t\ttext: getElementText(element) || getElementPlaceholder(element),\n    \t\thtml: cleanHTML(element.outerHTML),\n    \t\txpath: generateXPath(element),\n    \t\tcss_selector: generateCssPath(element),\n    \t\tbounding_box: element.getBoundingClientRect(),\t\t\n    \t\tiframe_selector: iframe_selector,\t\t\n    \t\tsmart_selector: generateSmartSelector(element),\n    \t\tsmart_iframe_selector: smart_iframe_selector,\n    \t\telement: element,\n    \t\tdepth: getElementDepth(element)\n    \t};\n    }\n\n    /**\n     * Checks if a point is inside a bounding box\n     * \n     * @param point The point to check\n     * @param box The bounding box\n     * @returns boolean indicating if the point is inside the box\n     */\n    function isPointInsideBox(point, box) {\n      return point.x >= box.x &&\n            point.x <= box.x + box.width &&\n            point.y >= box.y &&\n            point.y <= box.y + box.height;\n    }\n\n    /**\n     * Calculates the overlap area between two bounding boxes\n     * \n     * @param box1 First bounding box\n     * @param box2 Second bounding box\n     * @returns The overlap area\n     */\n    function calculateOverlap(box1, box2) {\n      const xOverlap = Math.max(0,\n        Math.min(box1.x + box1.width, box2.x + box2.width) -\n        Math.max(box1.x, box2.x)\n      );\n      const yOverlap = Math.max(0,\n        Math.min(box1.y + box1.height, box2.y + box2.height) -\n        Math.max(box1.y, box2.y)\n      );\n      return xOverlap * yOverlap;\n    }\n\n    /**\n     * Finds an exact match between candidate elements and the actual interaction element\n     * \n     * @param candidate_elements Array of candidate element infos\n     * @param actualInteractionElementInfo The actual interaction element info\n     * @returns The matching candidate element info, or null if no match is found\n     */\n    function findExactMatch(candidate_elements, actualInteractionElementInfo) {\n      if (!actualInteractionElementInfo.element) {\n        return null;\n      }\n\n      const exactMatch = candidate_elements.find(elementInfo => \n        elementInfo.element && elementInfo.element === actualInteractionElementInfo.element\n      );\n      \n      if (exactMatch) {\n        highlighterLogger.debug('✅ Found exact element match:', {\n          matchedElement: exactMatch.element?.tagName,\n          matchedElementClass: exactMatch.element?.className,\n          index: exactMatch.index\n        });\n        return exactMatch;\n      }\n      \n      return null;\n    }\n\n    /**\n     * Finds a match by traversing up the parent elements\n     * \n     * @param candidate_elements Array of candidate element infos\n     * @param actualInteractionElementInfo The actual interaction element info\n     * @returns The matching candidate element info, or null if no match is found\n     */\n    function findParentMatch(candidate_elements, actualInteractionElementInfo) {\n      if (!actualInteractionElementInfo.element) {\n        return null;\n      }\n\n      let element = actualInteractionElementInfo.element;\n      while (element.parentElement) {\n        element = element.parentElement;\n        const parentMatch = candidate_elements.find(candidate => \n          candidate.element && candidate.element === element\n        );\n        \n        if (parentMatch) {\n          highlighterLogger.debug('✅ Found parent element match:', {\n            matchedElement: parentMatch.element?.tagName,\n            matchedElementClass: parentMatch.element?.className,\n            index: parentMatch.index,\n            depth: element.tagName\n          });\n          return parentMatch;\n        }\n        \n        // Stop if we hit another candidate element\n        if (candidate_elements.some(candidate => \n          candidate.element && candidate.element === element\n        )) {\n          highlighterLogger.debug('⚠️ Stopped parent search - hit another candidate element:', element.tagName);\n          break;\n        }\n      }\n      \n      return null;\n    }\n\n    /**\n     * Finds a match based on spatial relationships between elements\n     * \n     * @param candidate_elements Array of candidate element infos\n     * @param actualInteractionElementInfo The actual interaction element info\n     * @returns The matching candidate element info, or null if no match is found\n     */\n    function findSpatialMatch(candidate_elements, actualInteractionElementInfo) {\n      if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\n        return null;\n      }\n\n      const actualBox = actualInteractionElementInfo.bounding_box;\n      let bestMatch = null;\n      let bestScore = 0;\n\n      for (const candidateInfo of candidate_elements) {\n        if (!candidateInfo.bounding_box) continue;\n        \n        const candidateBox = candidateInfo.bounding_box;\n        let score = 0;\n\n        // Check if actual element is contained within candidate\n        if (isPointInsideBox({ x: actualBox.x, y: actualBox.y }, candidateBox) &&\n            isPointInsideBox({ x: actualBox.x + actualBox.width, y: actualBox.y + actualBox.height }, candidateBox)) {\n          score += 100; // High score for containment\n        }\n\n        // Calculate overlap area as a factor\n        const overlap = calculateOverlap(actualBox, candidateBox);\n        score += overlap;\n\n        // Consider proximity if no containment\n        if (score === 0) {\n          const distance = Math.sqrt(\n            Math.pow((actualBox.x + actualBox.width/2) - (candidateBox.x + candidateBox.width/2), 2) +\n            Math.pow((actualBox.y + actualBox.height/2) - (candidateBox.y + candidateBox.height/2), 2)\n          );\n          // Convert distance to a score (closer = higher score)\n          score = 1000 / (distance + 1);\n        }\n\n        if (score > bestScore) {\n          bestScore = score;\n          bestMatch = candidateInfo;\n          highlighterLogger.debug('📏 New best spatial match:', {\n            element: candidateInfo.element?.tagName,\n            class: candidateInfo.element?.className,\n            index: candidateInfo.index,\n            score: score\n          });\n        }\n      }\n\n      if (bestMatch) {\n        highlighterLogger.debug('✅ Final spatial match selected:', {\n        element: bestMatch.element?.tagName,\n        class: bestMatch.element?.className,\n        index: bestMatch.index,\n        finalScore: bestScore\n      });\n      return bestMatch;\n    }\n\n    return null;\n    }\n\n    /**\n     * Finds a matching candidate element for an actual interaction element\n     * \n     * @param candidate_elements Array of candidate element infos\n     * @param actualInteractionElementInfo The actual interaction element info\n     * @returns The matching candidate element info, or null if no match is found\n     */\n    function findMatchingCandidateElementInfo(candidate_elements, actualInteractionElementInfo) {\n      if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\n        highlighterLogger.error('❌ Missing required properties in actualInteractionElementInfo');\n        return null;\n      }\n\n      highlighterLogger.debug('🔍 Starting element matching for:', {\n        clickedElement: actualInteractionElementInfo.element.tagName,\n        clickedElementClass: actualInteractionElementInfo.element.className,\n        totalCandidates: candidate_elements.length\n      });\n\n      // First try exact element match\n      const exactMatch = findExactMatch(candidate_elements, actualInteractionElementInfo);\n      if (exactMatch) {\n        return exactMatch;\n      }\n      highlighterLogger.debug('❌ No exact element match found, trying parent matching...');\n\n      // Try finding closest clickable parent\n      const parentMatch = findParentMatch(candidate_elements, actualInteractionElementInfo);\n      if (parentMatch) {\n        return parentMatch;\n      }\n      highlighterLogger.debug('❌ No parent match found, falling back to spatial matching...');\n\n      // If no exact or parent match, look for spatial relationships\n      const spatialMatch = findSpatialMatch(candidate_elements, actualInteractionElementInfo);\n      if (spatialMatch) {\n        return spatialMatch;\n      }\n\n      highlighterLogger.error('❌ No matching element found for actual interaction element:', actualInteractionElementInfo);\n      return null;\n    }\n\n    const highlight = {\n      execute: async function(elementTypes, handleScroll=false) {\n        const elements = await findElements(elementTypes);\n        highlightElements(elements, false,handleScroll);\n        return elements;\n      },\n\n      unexecute: function(handleScroll=false) {\n        unhighlightElements(handleScroll);\n      },\n\n      generateJSON: async function() {\n        const json = {};\n\n       // Capture viewport dimensions\n       const viewportData = {\n        width: window.innerWidth,\n        height: window.innerHeight,\n        documentWidth: document.documentElement.clientWidth,\n        documentHeight: document.documentElement.clientHeight,\n        timestamp: new Date().toISOString()\n      };\n\n        // Add viewport data to the JSON output\n        json.viewport = viewportData;\n\n\n        await Promise.all(Object.values(ElementTag).map(async elementType => {\n          const elements = await findElements(elementType);\n          json[elementType] = elements;\n        }));\n\n        // Serialize the JSON object\n        const jsonString = JSON.stringify(json, null, 4); // Pretty print with 4 spaces\n\n        highlighterLogger.log(`JSON: ${jsonString}`);\n        return jsonString;\n      },\n\n      getElementInfo\n    };\n\n\n    function unhighlightElements(handleScroll=false) {\n      const documents = getAllFrames();\n      documents.forEach(doc => {\n        const overlay = doc.getElementById('highlight-overlay');\n        if (overlay) {\n          if (handleScroll) {\n            // Remove event listeners\n            doc.removeEventListener('scroll', overlay.scrollHandler, true);\n            doc.removeEventListener('resize', overlay.resizeHandler);\n          }\n          overlay.remove();\n        }\n      });\n    }\n\n\n    async function findElements(elementTypes, verbose=true) {\n      const typesArray = Array.isArray(elementTypes) ? elementTypes : [elementTypes];\n      highlighterLogger.debug('Starting element search for types:', typesArray);\n\n      const elements = [];\n      typesArray.forEach(elementType => {\n        if (elementType === ElementTag.FILLABLE) {\n          elements.push(...findFillables());\n        }\n        if (elementType === ElementTag.SELECTABLE) {\n          elements.push(...findDropdowns());\n        }\n        if (elementType === ElementTag.CLICKABLE) {\n          elements.push(...findClickables());\n          elements.push(...findToggles());\n          elements.push(...findCheckables());\n        }\n        if (elementType === ElementTag.NON_INTERACTIVE_ELEMENT) {\n          elements.push(...findNonInteractiveElements());\n        }\n      });\n\n      // console.log('Before uniquify:', elements.length);\n      const elementsWithInfo = elements.map((element, index) => \n        getElementInfo(element, index)\n      );\n\n      \n      \n      const uniqueElements = uniquifyElements(elementsWithInfo);\n      highlighterLogger.debug(`Found ${uniqueElements.length} elements:`);\n      \n      // More comprehensive visibility check\n      const visibleElements = uniqueElements.filter(elementInfo => {\n        const el = elementInfo.element;\n        const style = getComputedStyle(el);\n        \n        // Check various style properties that affect visibility\n        if (style.display === 'none' || \n            style.visibility === 'hidden') {\n          return false;\n        }\n        \n        // Check if element has non-zero dimensions\n        const rect = el.getBoundingClientRect();\n        if (rect.width === 0 || rect.height === 0) {\n          return false;\n        }\n        \n        // Check if element is within viewport\n        if (rect.bottom < 0 || \n            rect.top > window.innerHeight || \n            rect.right < 0 || \n            rect.left > window.innerWidth) {\n          // Element is outside viewport, but still might be valid \n          // if user scrolls to it, so we'll include it\n          return true;\n        }\n        \n        return true;\n      });\n      \n      highlighterLogger.debug(`Out of which ${visibleElements.length} elements are visible:`);\n      if (verbose) {\n        visibleElements.forEach(info => {\n          highlighterLogger.debug(`Element ${info.index}:`, info);\n        });\n      }\n      \n      return visibleElements;\n    }\n\n    // elements is an array of objects with index, xpath\n    function highlightElements(elements, enableSmartSelectors=false, handleScroll=false) {\n      // console.log('[highlightElements] called with', elements.length, 'elements');\n      // Create overlay if it doesn't exist and store it in a dictionary\n      const documents = getAllFrames();  \n      let overlays = {};\n      documents.forEach(doc => {\n        let overlay = doc.getElementById('highlight-overlay');\n        if (!overlay) {\n          overlay = doc.createElement('div');\n          overlay.id = 'highlight-overlay';\n          overlay.style.cssText = `\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        z-index: 2147483647;\n      `;\n          doc.body.appendChild(overlay);\n          // console.log('[highlightElements] Created overlay in document:', doc);\n        }\n        overlays[doc.documentURI] = overlay;\n      });\n      \n\n      const updateHighlights = (doc = null) => {\n        if (doc) {\n          overlays[doc.documentURI].innerHTML = '';\n        } else {\n          Object.values(overlays).forEach(overlay => { overlay.innerHTML = ''; });\n        }    \n        elements.forEach((elementInfo, idx) => {\n          //console.log(`[highlightElements] Processing element ${idx}:`, elementInfo.tag, elementInfo.css_selector, elementInfo.bounding_box);\n          let element = elementInfo.element;\n          if (!element) {\n            element = findElementByInfo(elementInfo, enableSmartSelectors);\n            if (!element) {\n              highlighterLogger.warn('[highlightElements] Could not find element for:', elementInfo);\n              return;\n            }\n          }\n          //if highlights requested for a specific doc, skip unrelated elements\n          if (doc && element.ownerDocument !== doc) {\n            highlighterLogger.debug(\"[highlightElements] Skipped element since it doesn't belong to document\", doc);\n            return;\n          }\n          const rect = element.getBoundingClientRect();\n          if (rect.width === 0 || rect.height === 0) {\n            highlighterLogger.warn('[highlightElements] Element has zero dimensions:', elementInfo);\n            return;\n          }\n          // Create border highlight (red rectangle)\n          // use ownerDocument to support iframes/frames\n          const highlight = element.ownerDocument.createElement('div');\n          highlight.style.cssText = `\n        position: fixed;\n        left: ${rect.x}px;\n        top: ${rect.y}px;\n        width: ${rect.width}px;\n        height: ${rect.height}px;\n        border: 1px solid rgb(255, 0, 0);\n        transition: all 0.2s ease-in-out;\n      `;\n          // Create index label container - now positioned to the right and slightly up\n          const labelContainer = element.ownerDocument.createElement('div');\n          labelContainer.style.cssText = `\n        position: absolute;\n        right: -10px;     /* Offset to the right */\n        top: -10px;       /* Offset upwards */\n        padding: 4px;\n        background-color: rgba(255, 255, 0, 0.6);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      `;\n          const text = element.ownerDocument.createElement('span');\n          text.style.cssText = `\n        color: rgb(0, 0, 0, 0.8);\n        font-family: 'Courier New', Courier, monospace;\n        font-size: 12px;\n        font-weight: bold;\n        line-height: 1;\n      `;\n          text.textContent = elementInfo.index.toString();\n          labelContainer.appendChild(text);\n          highlight.appendChild(labelContainer);      \n          overlays[element.ownerDocument.documentURI].appendChild(highlight);\n          \n        });\n      };\n\n      // Initial highlight\n      updateHighlights();\n\n      if (handleScroll) {\n        documents.forEach(doc => {\n          // Update highlights on scroll and resize\n          highlighterLogger.debug('registering scroll and resize handlers for document: ', doc);\n          const scrollHandler = () => {\n            requestAnimationFrame(() => updateHighlights(doc));\n          };\n          const resizeHandler = () => {\n            updateHighlights(doc);\n          };\n          doc.addEventListener('scroll', scrollHandler, true);\n          doc.addEventListener('resize', resizeHandler);\n          // Store event handlers for cleanup\n          overlays[doc.documentURI].scrollHandler = scrollHandler;\n          overlays[doc.documentURI].resizeHandler = resizeHandler;\n        });    \n      }\n    }\n\n    // function unexecute() {\n    //   unhighlightElements();\n    // }\n\n    // Make it available globally for both Extension and Playwright\n    if (typeof window !== 'undefined') {\n      function stripElementRefs(elementInfo) {\n        if (!elementInfo) return null;\n        const { element, ...rest } = elementInfo;\n        return rest;\n      }\n\n      window.ProboLabs = window.ProboLabs || {};\n\n      // --- Caching State ---\n      window.ProboLabs.candidates = [];\n      window.ProboLabs.actual = null;\n      window.ProboLabs.matchingCandidate = null;\n\n      // --- Methods ---\n      /**\n       * Find and cache candidate elements of a given type (e.g., 'CLICKABLE').\n       * NOTE: This function is async and must be awaited from Playwright/Node.\n       */\n      window.ProboLabs.findAndCacheCandidateElements = async function(elementType) {\n        //console.log('[ProboLabs] findAndCacheCandidateElements called with:', elementType);\n        const found = await findElements(elementType);\n        window.ProboLabs.candidates = found;\n        // console.log('[ProboLabs] candidates set to:', found, 'type:', typeof found, 'isArray:', Array.isArray(found));\n        return found.length;\n      };\n\n      window.ProboLabs.findAndCacheActualElement = function(iframeSelector, elementSelector, isHover=false, useSmartSelectors=false) {\n        // console.log('[ProboLabs] findAndCacheActualElement called with:', cssSelector, iframeSelector);\n        highlighterLogger.debug(`[ProboLabs] findAndCacheActualElement called with: iframeSelector=${iframeSelector}, elementSelector=${elementSelector}, useSmartSelectors=${useSmartSelectors}`);\n        let el = findElementBySelectors(iframeSelector, elementSelector, useSmartSelectors);\n        if(isHover) {\n          const visibleElement = findClosestVisibleElement(el);\n          if (visibleElement) {\n            el = visibleElement;\n          }\n        }\n        if (!el) {\n          window.ProboLabs.actual = null;\n          // console.log('[ProboLabs] actual set to null');\n          return false;\n        }\n        window.ProboLabs.actual = getElementInfo(el, -1);\n        // console.log('[ProboLabs] actual set to:', window.ProboLabs.actual);\n        return true;\n      };\n\n      window.ProboLabs.findAndCacheMatchingCandidate = function() {\n        // console.log('[ProboLabs] findAndCacheMatchingCandidate called');\n        if (!window.ProboLabs.candidates.length || !window.ProboLabs.actual) {\n          window.ProboLabs.matchingCandidate = null;\n          // console.log('[ProboLabs] matchingCandidate set to null');\n          return false;\n        }\n        window.ProboLabs.matchingCandidate = findMatchingCandidateElementInfo(window.ProboLabs.candidates, window.ProboLabs.actual);\n        // console.log('[ProboLabs] matchingCandidate set to:', window.ProboLabs.matchingCandidate);\n        return !!window.ProboLabs.matchingCandidate;\n      };\n\n      window.ProboLabs.highlightCachedElements = function(which) {\n        let elements = [];\n        if (which === 'candidates') elements = window.ProboLabs.candidates;\n        if (which === 'actual' && window.ProboLabs.actual) elements = [window.ProboLabs.actual];\n        if (which === 'matching' && window.ProboLabs.matchingCandidate) elements = [window.ProboLabs.matchingCandidate];\n        highlighterLogger.debug(`[ProboLabs] highlightCachedElements ${which} with ${elements.length} elements`);\n        highlightElements(elements);\n      };\n\n      window.ProboLabs.unhighlight = function() {\n        // console.log('[ProboLabs] unhighlight called');\n        unhighlightElements();\n      };\n\n      window.ProboLabs.reset = function() {\n        highlighterLogger.debug('[ProboLabs] reset called');\n        window.ProboLabs.candidates = [];\n        window.ProboLabs.actual = null;\n        window.ProboLabs.matchingCandidate = null;\n        unhighlightElements();\n      };\n\n      window.ProboLabs.getCandidates = function() {\n        // console.log('[ProboLabs] getCandidates called. candidates:', window.ProboLabs.candidates, 'type:', typeof window.ProboLabs.candidates, 'isArray:', Array.isArray(window.ProboLabs.candidates));\n        const arr = Array.isArray(window.ProboLabs.candidates) ? window.ProboLabs.candidates : [];\n        return arr.map(stripElementRefs);\n      };\n      window.ProboLabs.getActual = function() {\n        return stripElementRefs(window.ProboLabs.actual);\n      };\n      window.ProboLabs.getMatchingCandidate = function() {\n        return stripElementRefs(window.ProboLabs.matchingCandidate);\n      };\n\n      window.ProboLabs.setLoggerDebugLevel = function(debugLevel) {\n        highlighterLogger.setLogLevel(debugLevel);\n      };\n\n      // Retain existing API for backward compatibility\n      window.ProboLabs.ElementTag = ElementTag;\n      window.ProboLabs.highlightElements = highlightElements;\n      window.ProboLabs.unhighlightElements = unhighlightElements;\n      window.ProboLabs.findElements = findElements;\n      window.ProboLabs.getElementInfo = getElementInfo;\n      window.ProboLabs.highlight = window.ProboLabs.highlight;\n      window.ProboLabs.unhighlight = window.ProboLabs.unhighlight;\n\n      // --- Utility Functions ---\n      function findClosestVisibleElement(element) {\n        let current = element;\n        while (current) {\n          const style = window.getComputedStyle(current);\n          if (\n            style &&\n            style.display !== 'none' &&\n            style.visibility !== 'hidden' &&\n            current.offsetWidth > 0 &&\n            current.offsetHeight > 0\n          ) {\n            return current;\n          }\n          if (!current.parentElement || current === document.body) break;\n          current = current.parentElement;\n        }\n        return null;\n      }\n    }\n\n    exports.deserializeNodeFromJSON = deserializeNodeFromJSON;\n    exports.detectScrollableContainers = detectScrollableContainers;\n    exports.findElementByInfo = findElementByInfo;\n    exports.findElementBySelectors = findElementBySelectors;\n    exports.findElements = findElements;\n    exports.generateCssPath = generateCssPath;\n    exports.generateSmartSelector = generateSmartSelector;\n    exports.getAriaLabelledByText = getAriaLabelledByText;\n    exports.getContainingIFrame = getContainingIFrame;\n    exports.getElementInfo = getElementInfo;\n    exports.highlight = highlight;\n    exports.highlightElements = highlightElements;\n    exports.isScrollableContainer = isScrollableContainer;\n    exports.serializeNodeToJSON = serializeNodeToJSON;\n    exports.unhighlightElements = unhighlightElements;\n\n}));\n//# sourceMappingURL=probolabs.umd.js.map\n";
 /**
  * Element tag constants for different types of interactive elements
  */
@@ -55,6 +55,7 @@ var PlaywrightAction;
     PlaywrightAction["UPLOAD_FILES"] = "UPLOAD_FILES";
     PlaywrightAction["WAIT_FOR"] = "WAIT_FOR";
     PlaywrightAction["WAIT_FOR_OTP"] = "WAIT_FOR_OTP";
+    PlaywrightAction["GEN_TOTP"] = "GEN_TOTP";
 })(PlaywrightAction || (PlaywrightAction = {}));
 
 /**
@@ -85,6 +86,13 @@ function resolveElementTag(action) {
             throw new Error(`Unknown action: ${action}`);
     }
 }
+// clickable element detection result
+var IsClickable;
+(function (IsClickable) {
+    IsClickable["YES"] = "YES";
+    IsClickable["NO"] = "NO";
+    IsClickable["MAYBE"] = "MAYBE";
+})(IsClickable || (IsClickable = {}));
 
 // WebSocketsMessageType enum for WebSocket and event message types shared across the app
 var WebSocketsMessageType;
@@ -131,122 +139,30 @@ class ProboLogger {
         this.level = level;
     }
     setLogLevel(level) {
+        console.log(`[${this.prefix}] Setting log level to: ${level} (was: ${this.level})`);
         this.level = level;
     }
     shouldLog(level) {
         return logLevelOrder[level] >= logLevelOrder[this.level];
     }
-    preamble() {
+    preamble(level) {
         const now = new Date();
         const hours = String(now.getHours()).padStart(2, '0');
         const minutes = String(now.getMinutes()).padStart(2, '0');
         const seconds = String(now.getSeconds()).padStart(2, '0');
         const milliseconds = String(now.getMilliseconds()).padStart(3, '0');
-        return `[${hours}:${minutes}:${seconds}.${milliseconds}] [${this.prefix}]`;
+        return `[${hours}:${minutes}:${seconds}.${milliseconds}] [${this.prefix}] [${level}]`;
     }
     debug(...args) { if (this.shouldLog(ProboLogLevel.DEBUG))
-        console.debug(this.preamble(), ...args); }
+        console.debug(this.preamble(ProboLogLevel.DEBUG), ...args); }
     info(...args) { if (this.shouldLog(ProboLogLevel.INFO))
-        console.info(this.preamble(), ...args); }
+        console.info(this.preamble(ProboLogLevel.INFO), ...args); }
     log(...args) { if (this.shouldLog(ProboLogLevel.LOG))
-        console.log(this.preamble(), ...args); }
+        console.log(this.preamble(ProboLogLevel.LOG), ...args); }
     warn(...args) { if (this.shouldLog(ProboLogLevel.WARN))
-        console.warn(this.preamble(), ...args); }
+        console.warn(this.preamble(ProboLogLevel.WARN), ...args); }
     error(...args) { if (this.shouldLog(ProboLogLevel.ERROR))
-        console.error(this.preamble(), ...args); }
-}
-/**
- * Interfaces for element information (unchanged)
- */
-/* export interface ElementInfo {
-  index: string;
-  tag: string;
-  type: string;
-  text: string;
-  html: string;
-  xpath: string;
-  css_selector: string;
-  bounding_box: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-  };
-  iframe_selector: string;
-  element: any;
-  depth?: number;
-  getSelector(): string;
-  getDepth(): number;
-}
- */
-/* export interface CleanElementInfo {
-  index: string;
-  tag: string;
-  type: string;
-  text: string;
-  html: string;
-  xpath: string;
-  css_selector: string;
-  iframe_selector: string;
-  bounding_box: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-  };
-  depth: number;
-} */
-// Element cleaner logging
-const elementLogger = new ProboLogger('element-cleaner');
-/**
- * Cleans and returns a minimal element info structure.
- */
-function cleanupElementInfo(elementInfo) {
-    var _a;
-    elementLogger.debug(`Cleaning up element info for ${elementInfo.tag} at index ${elementInfo.index}`);
-    const depth = (_a = elementInfo.depth) !== null && _a !== void 0 ? _a : elementInfo.getDepth();
-    const cleanEl = {
-        index: elementInfo.index,
-        tag: elementInfo.tag,
-        type: elementInfo.type,
-        text: elementInfo.text,
-        html: elementInfo.html,
-        xpath: elementInfo.xpath,
-        css_selector: elementInfo.css_selector,
-        iframe_selector: elementInfo.iframe_selector,
-        bounding_box: elementInfo.bounding_box,
-        depth
-    };
-    elementLogger.debug(`Cleaned element: ${JSON.stringify(cleanEl)}`);
-    return cleanEl;
-}
-/**
- * Cleans highlighted elements in an instruction payload.
- */
-function cleanupInstructionElements(instruction) {
-    var _a;
-    if (!((_a = instruction === null || instruction === void 0 ? void 0 : instruction.result) === null || _a === void 0 ? void 0 : _a.highlighted_elements)) {
-        elementLogger.debug('No highlighted elements to clean');
-        return instruction;
-    }
-    elementLogger.debug(`Cleaning ${instruction.result.highlighted_elements.length} highlighted elements`);
-    const cleaned = {
-        ...instruction,
-        result: {
-            ...instruction.result,
-            highlighted_elements: instruction.result.highlighted_elements.map((el) => cleanupElementInfo(el))
-        }
-    };
-    elementLogger.debug('Instruction cleaning completed');
-    return cleaned;
+        console.error(this.preamble(ProboLogLevel.ERROR), ...args); }
 }
 function matchRegex(str, regex) {
     //parse the regex string
@@ -286,6 +202,49 @@ const setupBrowserConsoleLogs = (page, enableConsoleLogs, logger = null) => {
     };
     page.on('console', listener);
 };
+/**
+ * Safely interpolates template literals in a string using the provided context.
+ * Similar to JavaScript template literals, but executed safely at runtime.
+ * Recursively interpolates until no more template literals remain.
+ *
+ * This function only interpolates the argument string itself, not the entire context.
+ * When a template literal resolves to another string containing template literals,
+ * it recursively interpolates that result.
+ *
+ * @param str The string containing template literal syntax (e.g., "Hello ${name}")
+ * @param context The context object containing variables for interpolation
+ * @param maxDepth Maximum recursion depth to prevent infinite loops (default: 10)
+ * @returns The interpolated string, or the original string if no interpolation is needed
+ */
+function interpolateTemplate(str, context, maxDepth = 10) {
+    if (typeof str !== 'string' || !str.includes('${')) {
+        return str;
+    }
+    if (maxDepth <= 0) {
+        console.warn('⚠️ Maximum interpolation depth reached, returning partially interpolated string');
+        return str;
+    }
+    try {
+        // Escape backticks in the template to prevent template literal injection
+        const escapedTemplate = str.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
+        // Create a safe template execution function
+        const compiled = new Function('ctx', `
+      const {${Object.keys(context).join(',')}} = ctx;
+      return \`${escapedTemplate}\`;
+    `);
+        const rendered = compiled(context);
+        // If the result still contains template literals, recursively interpolate
+        // This handles cases like: Employee_Name = '${firstName + middleName}' and then assert_1 = '${Employee_Name}'
+        if (rendered.includes('${') && rendered !== str) {
+            return interpolateTemplate(rendered, context, maxDepth - 1);
+        }
+        return rendered;
+    }
+    catch (e) {
+        console.warn('⚠️ Template evaluation failed, using original string:', e);
+        return str;
+    }
+}
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -883,23 +842,26 @@ class ApiClient {
             return;
         });
     }
-    async resolveNextInstruction(stepId, instruction, aiModel) {
-        apiLogger.debug(`resolving next instruction: ${instruction}`);
-        return this.requestWithRetry('resolveNextInstruction', async () => {
-            apiLogger.debug(`API client: Resolving next instruction for step ${stepId}`);
-            const cleanInstruction = cleanupInstructionElements(instruction);
-            const response = await fetch(`${this.apiUrl}/step-runners/${stepId}/run/`, {
-                method: 'POST',
-                headers: this.getHeaders(),
-                body: JSON.stringify({
-                    executed_instruction: cleanInstruction,
-                    ai_model: aiModel
-                }),
-            });
-            const data = await this.handleResponse(response);
-            return data.instruction;
+    /* async resolveNextInstruction(stepId: string, instruction: Instruction | null, aiModel?: string) {
+      apiLogger.debug(`resolving next instruction: ${instruction}`);
+      return this.requestWithRetry('resolveNextInstruction', async () => {
+        apiLogger.debug(`API client: Resolving next instruction for step ${stepId}`);
+        
+        const cleanInstruction = cleanupInstructionElements(instruction);
+        
+        const response = await fetch(`${this.apiUrl}/step-runners/${stepId}/run/`, {
+          method: 'POST',
+          headers: this.getHeaders(),
+          body: JSON.stringify({
+            executed_instruction: cleanInstruction,
+            ai_model: aiModel
+          }),
         });
-    }
+        
+        const data = await this.handleResponse(response);
+        return data.instruction;
+      });
+    } */
     async uploadScreenshot(screenshot_bytes) {
         return this.requestWithRetry('uploadScreenshot', async () => {
             const response = await fetch(`${this.apiUrl}/upload-screenshots/`, {
@@ -968,7 +930,7 @@ class ApiClient {
         // Backend will create new step or update existing one based on interaction_id
         apiLogger.debug(`converting interaction #${interaction.interactionId} to step`);
         return this.requestWithRetry('interactionToStep', async () => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const response = await fetch(`${this.apiUrl}/interaction-to-step/`, {
                 method: 'POST',
                 headers: this.getHeaders(),
@@ -980,6 +942,8 @@ class ApiClient {
                     argument: interaction.argument,
                     element_css_selector: ((_a = interaction.elementInfo) === null || _a === void 0 ? void 0 : _a.css_selector) || '',
                     iframe_selector: ((_b = interaction.elementInfo) === null || _b === void 0 ? void 0 : _b.iframe_selector) || '',
+                    smart_selector: ((_c = interaction.elementInfo) === null || _c === void 0 ? void 0 : _c.smart_selector) || null,
+                    smart_iframe_selector: ((_d = interaction.elementInfo) === null || _d === void 0 ? void 0 : _d.smart_iframe_selector) || null,
                     prompt: interaction.nativeDescription,
                     vanilla_prompt: interaction.nativeDescription,
                     is_vanilla_prompt_robust: interaction.isNativeDescriptionElaborate || false,
@@ -1079,6 +1043,9 @@ var AIModel;
     AIModel["GPT4"] = "gpt4";
     AIModel["GPT4_MINI"] = "gpt4-mini";
     AIModel["CLAUDE_3_5"] = "claude-3.5";
+    AIModel["CLAUDE_SONNET_4_5"] = "claude-sonnet-4.5";
+    AIModel["CLAUDE_HAIKU_4_5"] = "claude-haiku-4.5";
+    AIModel["CLAUDE_OPUS_4_1"] = "claude-opus-4.1";
     AIModel["GROK_2"] = "grok-2";
     AIModel["LLAMA_4_SCOUT"] = "llama-4-scout";
     AIModel["DEEPSEEK_V3"] = "deepseek-v3";
@@ -1104,7 +1071,7 @@ const DEFAULT_PLAYWRIGHT_TIMEOUT_CONFIG = {
 };
 
 // Default logger instance
-const proboLogger = new ProboLogger('probolib');
+const proboLogger = new ProboLogger('proboLib');
 
 /**
  * Wait for DOM mutations to settle using MutationObserver logic
@@ -1183,8 +1150,10 @@ async function findClosestVisibleElement(locator) {
 }
 
 class Highlighter {
-    constructor(enableConsoleLogs = true) {
+    constructor(enableSmartSelectors = false, enableConsoleLogs = true, debugLevel = ProboLogLevel.INFO) {
+        this.enableSmartSelectors = enableSmartSelectors;
         this.enableConsoleLogs = enableConsoleLogs;
+        this.debugLevel = debugLevel;
     }
     async ensureHighlighterScript(page, maxRetries = 3) {
         for (let attempt = 0; attempt < maxRetries; attempt++) {
@@ -1199,6 +1168,7 @@ class Highlighter {
             typeof window.ProboLabs?.highlight?.execute === 'function'
           `);
                     proboLogger.debug('Script injection verified:', verified);
+                    await page.evaluate(`window.ProboLabs.setLoggerDebugLevel('${this.debugLevel}');`);
                 }
                 return; // Success - exit the function
             }
@@ -1240,10 +1210,10 @@ class Highlighter {
             (_b = (_a = window === null || window === void 0 ? void 0 : window.ProboLabs) === null || _a === void 0 ? void 0 : _a.highlight) === null || _b === void 0 ? void 0 : _b.unexecute();
         });
     }
-    async highlightElement(page, element_css_selector, iframe_selector, element_index) {
+    async highlightElement(page, element_css_selector, iframe_selector, smart_selector, smart_iframe_selector, element_index) {
         await this.ensureHighlighterScript(page);
-        proboLogger.debug('Highlighting element with:', { element_css_selector, iframe_selector, element_index });
-        await page.evaluate(({ css_selector, iframe_selector, index }) => {
+        proboLogger.debug('Highlighting element with:', { element_css_selector, iframe_selector, smart_selector, smart_iframe_selector, enableSmartSelectors: this.enableSmartSelectors, element_index });
+        await page.evaluate(({ css_selector, iframe_selector, smart_selector, smart_iframe_selector, index }) => {
             const proboLabs = window.ProboLabs;
             if (!proboLabs) {
                 proboLogger.warn('ProboLabs not initialized');
@@ -1253,13 +1223,17 @@ class Highlighter {
             const elementInfo = {
                 css_selector: css_selector,
                 iframe_selector: iframe_selector,
+                smart_selector: smart_selector,
+                smart_iframe_selector: smart_iframe_selector,
                 index: index
             };
             // Call highlightElements directly
-            proboLabs.highlightElements([elementInfo]);
+            proboLabs.highlightElements([elementInfo], this.enableSmartSelectors);
         }, {
             css_selector: element_css_selector,
             iframe_selector: iframe_selector,
+            smart_selector: smart_selector,
+            smart_iframe_selector: smart_iframe_selector,
             index: element_index
         });
     }
@@ -1280,12 +1254,12 @@ class Highlighter {
      * Find and cache the actual interaction element by CSS and iframe selector.
      * Returns true if found, false otherwise.
      */
-    async findAndCacheActualElement(page, cssSelector, iframeSelector, isHover = false) {
+    async findAndCacheActualElement(page, iframeSelector, elementSelector, isHover = false) {
         await this.ensureHighlighterScript(page);
         const result = await page.evaluate((params) => {
             var _a, _b;
-            return (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.findAndCacheActualElement) === null || _b === void 0 ? void 0 : _b.call(_a, params.css, params.iframe, params.isHover);
-        }, { css: cssSelector, iframe: iframeSelector, isHover: isHover });
+            return (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.findAndCacheActualElement) === null || _b === void 0 ? void 0 : _b.call(_a, params.iframeSelector, params.elementSelector, params.isHover, params.useSmartSelectors);
+        }, { iframeSelector: iframeSelector, elementSelector: elementSelector, isHover: isHover, useSmartSelectors: this.enableSmartSelectors });
         return result !== null && result !== void 0 ? result : false;
     }
     /**
@@ -1806,7 +1780,7 @@ class NavTracker {
         this.inflightGraceMs = (_g = options.inflightGraceMs) !== null && _g !== void 0 ? _g : 4000;
         this.waitForStabilityVerbose = (_h = options.waitForStabilityVerbose) !== null && _h !== void 0 ? _h : false;
         proboLogger.debug(`NavTracker constructor set values: quietTimeout=${this.waitForStabilityQuietTimeout}, initialDelay=${this.waitForStabilityInitialDelay}, globalTimeout=${this.waitForStabilityGlobalTimeout}, verbose=${this.waitForStabilityVerbose}`);
-        this.instanceId = Math.random().toString(36).substr(2, 9);
+        this.instanceId = Math.random().toString(36).substring(2, 11);
         // Initialize timestamps
         const now = Date.now();
         this.lastHardNavAt = now;
@@ -2080,22 +2054,1871 @@ class NavTracker {
 }
 NavTracker.instance = null;
 
+//! otpauth 9.4.1 | (c) Héctor Molinero Fernández | MIT | https://github.com/hectorm/otpauth
+//! noble-hashes 1.8.0 | (c) Paul Miller | MIT | https://github.com/paulmillr/noble-hashes
+/// <reference types="./otpauth.d.ts" />
+// @ts-nocheck
+/**
+ * Converts an integer to an Uint8Array.
+ * @param {number} num Integer.
+ * @returns {Uint8Array} Uint8Array.
+ */ const uintDecode = (num)=>{
+    const buf = new ArrayBuffer(8);
+    const arr = new Uint8Array(buf);
+    let acc = num;
+    for(let i = 7; i >= 0; i--){
+        if (acc === 0) break;
+        arr[i] = acc & 255;
+        acc -= arr[i];
+        acc /= 256;
+    }
+    return arr;
+};
+
+/**
+ * Utilities for hex, bytes, CSPRNG.
+ * @module
+ */ /*! noble-hashes - MIT License (c) 2022 Paul Miller (paulmillr.com) */ // We use WebCrypto aka globalThis.crypto, which exists in browsers and node.js 16+.
+// node.js versions earlier than v19 don't declare it in global scope.
+// For node.js, package.json#exports field mapping rewrites import
+// from `crypto` to `cryptoNode`, which imports native module.
+// Makes the utils un-importable in browsers without a bundler.
+// Once node.js 18 is deprecated (2025-04-30), we can just drop the import.
+/** Checks if something is Uint8Array. Be careful: nodejs Buffer will return true. */ function isBytes(a) {
+    return a instanceof Uint8Array || ArrayBuffer.isView(a) && a.constructor.name === 'Uint8Array';
+}
+/** Asserts something is positive integer. */ function anumber(n) {
+    if (!Number.isSafeInteger(n) || n < 0) throw new Error('positive integer expected, got ' + n);
+}
+/** Asserts something is Uint8Array. */ function abytes(b, ...lengths) {
+    if (!isBytes(b)) throw new Error('Uint8Array expected');
+    if (lengths.length > 0 && !lengths.includes(b.length)) throw new Error('Uint8Array expected of length ' + lengths + ', got length=' + b.length);
+}
+/** Asserts something is hash */ function ahash(h) {
+    if (typeof h !== 'function' || typeof h.create !== 'function') throw new Error('Hash should be wrapped by utils.createHasher');
+    anumber(h.outputLen);
+    anumber(h.blockLen);
+}
+/** Asserts a hash instance has not been destroyed / finished */ function aexists(instance, checkFinished = true) {
+    if (instance.destroyed) throw new Error('Hash instance has been destroyed');
+    if (checkFinished && instance.finished) throw new Error('Hash#digest() has already been called');
+}
+/** Asserts output is properly-sized byte array */ function aoutput(out, instance) {
+    abytes(out);
+    const min = instance.outputLen;
+    if (out.length < min) {
+        throw new Error('digestInto() expects output buffer of length at least ' + min);
+    }
+}
+/** Cast u8 / u16 / u32 to u32. */ function u32(arr) {
+    return new Uint32Array(arr.buffer, arr.byteOffset, Math.floor(arr.byteLength / 4));
+}
+/** Zeroize a byte array. Warning: JS provides no guarantees. */ function clean(...arrays) {
+    for(let i = 0; i < arrays.length; i++){
+        arrays[i].fill(0);
+    }
+}
+/** Create DataView of an array for easy byte-level manipulation. */ function createView(arr) {
+    return new DataView(arr.buffer, arr.byteOffset, arr.byteLength);
+}
+/** The rotate right (circular right shift) operation for uint32 */ function rotr(word, shift) {
+    return word << 32 - shift | word >>> shift;
+}
+/** The rotate left (circular left shift) operation for uint32 */ function rotl(word, shift) {
+    return word << shift | word >>> 32 - shift >>> 0;
+}
+/** Is current platform little-endian? Most are. Big-Endian platform: IBM */ const isLE = /* @__PURE__ */ (()=>new Uint8Array(new Uint32Array([
+        0x11223344
+    ]).buffer)[0] === 0x44)();
+/** The byte swap operation for uint32 */ function byteSwap(word) {
+    return word << 24 & 0xff000000 | word << 8 & 0xff0000 | word >>> 8 & 0xff00 | word >>> 24 & 0xff;
+}
+/** In place byte swap for Uint32Array */ function byteSwap32(arr) {
+    for(let i = 0; i < arr.length; i++){
+        arr[i] = byteSwap(arr[i]);
+    }
+    return arr;
+}
+const swap32IfBE = isLE ? (u)=>u : byteSwap32;
+/**
+ * Converts string to bytes using UTF8 encoding.
+ * @example utf8ToBytes('abc') // Uint8Array.from([97, 98, 99])
+ */ function utf8ToBytes(str) {
+    if (typeof str !== 'string') throw new Error('string expected');
+    return new Uint8Array(new TextEncoder().encode(str)); // https://bugzil.la/1681809
+}
+/**
+ * Normalizes (non-hex) string or Uint8Array to Uint8Array.
+ * Warning: when Uint8Array is passed, it would NOT get copied.
+ * Keep in mind for future mutable operations.
+ */ function toBytes(data) {
+    if (typeof data === 'string') data = utf8ToBytes(data);
+    abytes(data);
+    return data;
+}
+/** For runtime check if class implements interface */ class Hash {
+}
+/** Wraps hash function, creating an interface on top of it */ function createHasher(hashCons) {
+    const hashC = (msg)=>hashCons().update(toBytes(msg)).digest();
+    const tmp = hashCons();
+    hashC.outputLen = tmp.outputLen;
+    hashC.blockLen = tmp.blockLen;
+    hashC.create = ()=>hashCons();
+    return hashC;
+}
+
+class HMAC extends Hash {
+    update(buf) {
+        aexists(this);
+        this.iHash.update(buf);
+        return this;
+    }
+    digestInto(out) {
+        aexists(this);
+        abytes(out, this.outputLen);
+        this.finished = true;
+        this.iHash.digestInto(out);
+        this.oHash.update(out);
+        this.oHash.digestInto(out);
+        this.destroy();
+    }
+    digest() {
+        const out = new Uint8Array(this.oHash.outputLen);
+        this.digestInto(out);
+        return out;
+    }
+    _cloneInto(to) {
+        // Create new instance without calling constructor since key already in state and we don't know it.
+        to || (to = Object.create(Object.getPrototypeOf(this), {}));
+        const { oHash, iHash, finished, destroyed, blockLen, outputLen } = this;
+        to = to;
+        to.finished = finished;
+        to.destroyed = destroyed;
+        to.blockLen = blockLen;
+        to.outputLen = outputLen;
+        to.oHash = oHash._cloneInto(to.oHash);
+        to.iHash = iHash._cloneInto(to.iHash);
+        return to;
+    }
+    clone() {
+        return this._cloneInto();
+    }
+    destroy() {
+        this.destroyed = true;
+        this.oHash.destroy();
+        this.iHash.destroy();
+    }
+    constructor(hash, _key){
+        super();
+        this.finished = false;
+        this.destroyed = false;
+        ahash(hash);
+        const key = toBytes(_key);
+        this.iHash = hash.create();
+        if (typeof this.iHash.update !== 'function') throw new Error('Expected instance of class which extends utils.Hash');
+        this.blockLen = this.iHash.blockLen;
+        this.outputLen = this.iHash.outputLen;
+        const blockLen = this.blockLen;
+        const pad = new Uint8Array(blockLen);
+        // blockLen can be bigger than outputLen
+        pad.set(key.length > blockLen ? hash.create().update(key).digest() : key);
+        for(let i = 0; i < pad.length; i++)pad[i] ^= 0x36;
+        this.iHash.update(pad);
+        // By doing update (processing of first block) of outer hash here we can re-use it between multiple calls via clone
+        this.oHash = hash.create();
+        // Undo internal XOR && apply outer XOR
+        for(let i = 0; i < pad.length; i++)pad[i] ^= 0x36 ^ 0x5c;
+        this.oHash.update(pad);
+        clean(pad);
+    }
+}
+/**
+ * HMAC: RFC2104 message authentication code.
+ * @param hash - function that would be used e.g. sha256
+ * @param key - message key
+ * @param message - message data
+ * @example
+ * import { hmac } from '@noble/hashes/hmac';
+ * import { sha256 } from '@noble/hashes/sha2';
+ * const mac1 = hmac(sha256, 'key', 'message');
+ */ const hmac = (hash, key, message)=>new HMAC(hash, key).update(message).digest();
+hmac.create = (hash, key)=>new HMAC(hash, key);
+
+/** Polyfill for Safari 14. https://caniuse.com/mdn-javascript_builtins_dataview_setbiguint64 */ function setBigUint64(view, byteOffset, value, isLE) {
+    if (typeof view.setBigUint64 === 'function') return view.setBigUint64(byteOffset, value, isLE);
+    const _32n = BigInt(32);
+    const _u32_max = BigInt(0xffffffff);
+    const wh = Number(value >> _32n & _u32_max);
+    const wl = Number(value & _u32_max);
+    const h = isLE ? 4 : 0;
+    const l = isLE ? 0 : 4;
+    view.setUint32(byteOffset + h, wh, isLE);
+    view.setUint32(byteOffset + l, wl, isLE);
+}
+/** Choice: a ? b : c */ function Chi(a, b, c) {
+    return a & b ^ ~a & c;
+}
+/** Majority function, true if any two inputs is true. */ function Maj(a, b, c) {
+    return a & b ^ a & c ^ b & c;
+}
+/**
+ * Merkle-Damgard hash construction base class.
+ * Could be used to create MD5, RIPEMD, SHA1, SHA2.
+ */ class HashMD extends Hash {
+    update(data) {
+        aexists(this);
+        data = toBytes(data);
+        abytes(data);
+        const { view, buffer, blockLen } = this;
+        const len = data.length;
+        for(let pos = 0; pos < len;){
+            const take = Math.min(blockLen - this.pos, len - pos);
+            // Fast path: we have at least one block in input, cast it to view and process
+            if (take === blockLen) {
+                const dataView = createView(data);
+                for(; blockLen <= len - pos; pos += blockLen)this.process(dataView, pos);
+                continue;
+            }
+            buffer.set(data.subarray(pos, pos + take), this.pos);
+            this.pos += take;
+            pos += take;
+            if (this.pos === blockLen) {
+                this.process(view, 0);
+                this.pos = 0;
+            }
+        }
+        this.length += data.length;
+        this.roundClean();
+        return this;
+    }
+    digestInto(out) {
+        aexists(this);
+        aoutput(out, this);
+        this.finished = true;
+        // Padding
+        // We can avoid allocation of buffer for padding completely if it
+        // was previously not allocated here. But it won't change performance.
+        const { buffer, view, blockLen, isLE } = this;
+        let { pos } = this;
+        // append the bit '1' to the message
+        buffer[pos++] = 0b10000000;
+        clean(this.buffer.subarray(pos));
+        // we have less than padOffset left in buffer, so we cannot put length in
+        // current block, need process it and pad again
+        if (this.padOffset > blockLen - pos) {
+            this.process(view, 0);
+            pos = 0;
+        }
+        // Pad until full block byte with zeros
+        for(let i = pos; i < blockLen; i++)buffer[i] = 0;
+        // Note: sha512 requires length to be 128bit integer, but length in JS will overflow before that
+        // You need to write around 2 exabytes (u64_max / 8 / (1024**6)) for this to happen.
+        // So we just write lowest 64 bits of that value.
+        setBigUint64(view, blockLen - 8, BigInt(this.length * 8), isLE);
+        this.process(view, 0);
+        const oview = createView(out);
+        const len = this.outputLen;
+        // NOTE: we do division by 4 later, which should be fused in single op with modulo by JIT
+        if (len % 4) throw new Error('_sha2: outputLen should be aligned to 32bit');
+        const outLen = len / 4;
+        const state = this.get();
+        if (outLen > state.length) throw new Error('_sha2: outputLen bigger than state');
+        for(let i = 0; i < outLen; i++)oview.setUint32(4 * i, state[i], isLE);
+    }
+    digest() {
+        const { buffer, outputLen } = this;
+        this.digestInto(buffer);
+        const res = buffer.slice(0, outputLen);
+        this.destroy();
+        return res;
+    }
+    _cloneInto(to) {
+        to || (to = new this.constructor());
+        to.set(...this.get());
+        const { blockLen, buffer, length, finished, destroyed, pos } = this;
+        to.destroyed = destroyed;
+        to.finished = finished;
+        to.length = length;
+        to.pos = pos;
+        if (length % blockLen) to.buffer.set(buffer);
+        return to;
+    }
+    clone() {
+        return this._cloneInto();
+    }
+    constructor(blockLen, outputLen, padOffset, isLE){
+        super();
+        this.finished = false;
+        this.length = 0;
+        this.pos = 0;
+        this.destroyed = false;
+        this.blockLen = blockLen;
+        this.outputLen = outputLen;
+        this.padOffset = padOffset;
+        this.isLE = isLE;
+        this.buffer = new Uint8Array(blockLen);
+        this.view = createView(this.buffer);
+    }
+}
+/**
+ * Initial SHA-2 state: fractional parts of square roots of first 16 primes 2..53.
+ * Check out `test/misc/sha2-gen-iv.js` for recomputation guide.
+ */ /** Initial SHA256 state. Bits 0..32 of frac part of sqrt of primes 2..19 */ const SHA256_IV = /* @__PURE__ */ Uint32Array.from([
+    0x6a09e667,
+    0xbb67ae85,
+    0x3c6ef372,
+    0xa54ff53a,
+    0x510e527f,
+    0x9b05688c,
+    0x1f83d9ab,
+    0x5be0cd19
+]);
+/** Initial SHA224 state. Bits 32..64 of frac part of sqrt of primes 23..53 */ const SHA224_IV = /* @__PURE__ */ Uint32Array.from([
+    0xc1059ed8,
+    0x367cd507,
+    0x3070dd17,
+    0xf70e5939,
+    0xffc00b31,
+    0x68581511,
+    0x64f98fa7,
+    0xbefa4fa4
+]);
+/** Initial SHA384 state. Bits 0..64 of frac part of sqrt of primes 23..53 */ const SHA384_IV = /* @__PURE__ */ Uint32Array.from([
+    0xcbbb9d5d,
+    0xc1059ed8,
+    0x629a292a,
+    0x367cd507,
+    0x9159015a,
+    0x3070dd17,
+    0x152fecd8,
+    0xf70e5939,
+    0x67332667,
+    0xffc00b31,
+    0x8eb44a87,
+    0x68581511,
+    0xdb0c2e0d,
+    0x64f98fa7,
+    0x47b5481d,
+    0xbefa4fa4
+]);
+/** Initial SHA512 state. Bits 0..64 of frac part of sqrt of primes 2..19 */ const SHA512_IV = /* @__PURE__ */ Uint32Array.from([
+    0x6a09e667,
+    0xf3bcc908,
+    0xbb67ae85,
+    0x84caa73b,
+    0x3c6ef372,
+    0xfe94f82b,
+    0xa54ff53a,
+    0x5f1d36f1,
+    0x510e527f,
+    0xade682d1,
+    0x9b05688c,
+    0x2b3e6c1f,
+    0x1f83d9ab,
+    0xfb41bd6b,
+    0x5be0cd19,
+    0x137e2179
+]);
+
+/** Initial SHA1 state */ const SHA1_IV = /* @__PURE__ */ Uint32Array.from([
+    0x67452301,
+    0xefcdab89,
+    0x98badcfe,
+    0x10325476,
+    0xc3d2e1f0
+]);
+// Reusable temporary buffer
+const SHA1_W = /* @__PURE__ */ new Uint32Array(80);
+/** SHA1 legacy hash class. */ class SHA1 extends HashMD {
+    get() {
+        const { A, B, C, D, E } = this;
+        return [
+            A,
+            B,
+            C,
+            D,
+            E
+        ];
+    }
+    set(A, B, C, D, E) {
+        this.A = A | 0;
+        this.B = B | 0;
+        this.C = C | 0;
+        this.D = D | 0;
+        this.E = E | 0;
+    }
+    process(view, offset) {
+        for(let i = 0; i < 16; i++, offset += 4)SHA1_W[i] = view.getUint32(offset, false);
+        for(let i = 16; i < 80; i++)SHA1_W[i] = rotl(SHA1_W[i - 3] ^ SHA1_W[i - 8] ^ SHA1_W[i - 14] ^ SHA1_W[i - 16], 1);
+        // Compression function main loop, 80 rounds
+        let { A, B, C, D, E } = this;
+        for(let i = 0; i < 80; i++){
+            let F, K;
+            if (i < 20) {
+                F = Chi(B, C, D);
+                K = 0x5a827999;
+            } else if (i < 40) {
+                F = B ^ C ^ D;
+                K = 0x6ed9eba1;
+            } else if (i < 60) {
+                F = Maj(B, C, D);
+                K = 0x8f1bbcdc;
+            } else {
+                F = B ^ C ^ D;
+                K = 0xca62c1d6;
+            }
+            const T = rotl(A, 5) + F + E + K + SHA1_W[i] | 0;
+            E = D;
+            D = C;
+            C = rotl(B, 30);
+            B = A;
+            A = T;
+        }
+        // Add the compressed chunk to the current hash value
+        A = A + this.A | 0;
+        B = B + this.B | 0;
+        C = C + this.C | 0;
+        D = D + this.D | 0;
+        E = E + this.E | 0;
+        this.set(A, B, C, D, E);
+    }
+    roundClean() {
+        clean(SHA1_W);
+    }
+    destroy() {
+        this.set(0, 0, 0, 0, 0);
+        clean(this.buffer);
+    }
+    constructor(){
+        super(64, 20, 8, false);
+        this.A = SHA1_IV[0] | 0;
+        this.B = SHA1_IV[1] | 0;
+        this.C = SHA1_IV[2] | 0;
+        this.D = SHA1_IV[3] | 0;
+        this.E = SHA1_IV[4] | 0;
+    }
+}
+/** SHA1 (RFC 3174) legacy hash function. It was cryptographically broken. */ const sha1 = /* @__PURE__ */ createHasher(()=>new SHA1());
+
+/**
+ * Internal helpers for u64. BigUint64Array is too slow as per 2025, so we implement it using Uint32Array.
+ * @todo re-check https://issues.chromium.org/issues/42212588
+ * @module
+ */ const U32_MASK64 = /* @__PURE__ */ BigInt(2 ** 32 - 1);
+const _32n = /* @__PURE__ */ BigInt(32);
+function fromBig(n, le = false) {
+    if (le) return {
+        h: Number(n & U32_MASK64),
+        l: Number(n >> _32n & U32_MASK64)
+    };
+    return {
+        h: Number(n >> _32n & U32_MASK64) | 0,
+        l: Number(n & U32_MASK64) | 0
+    };
+}
+function split(lst, le = false) {
+    const len = lst.length;
+    let Ah = new Uint32Array(len);
+    let Al = new Uint32Array(len);
+    for(let i = 0; i < len; i++){
+        const { h, l } = fromBig(lst[i], le);
+        [Ah[i], Al[i]] = [
+            h,
+            l
+        ];
+    }
+    return [
+        Ah,
+        Al
+    ];
+}
+// for Shift in [0, 32)
+const shrSH = (h, _l, s)=>h >>> s;
+const shrSL = (h, l, s)=>h << 32 - s | l >>> s;
+// Right rotate for Shift in [1, 32)
+const rotrSH = (h, l, s)=>h >>> s | l << 32 - s;
+const rotrSL = (h, l, s)=>h << 32 - s | l >>> s;
+// Right rotate for Shift in (32, 64), NOTE: 32 is special case.
+const rotrBH = (h, l, s)=>h << 64 - s | l >>> s - 32;
+const rotrBL = (h, l, s)=>h >>> s - 32 | l << 64 - s;
+// Left rotate for Shift in [1, 32)
+const rotlSH = (h, l, s)=>h << s | l >>> 32 - s;
+const rotlSL = (h, l, s)=>l << s | h >>> 32 - s;
+// Left rotate for Shift in (32, 64), NOTE: 32 is special case.
+const rotlBH = (h, l, s)=>l << s - 32 | h >>> 64 - s;
+const rotlBL = (h, l, s)=>h << s - 32 | l >>> 64 - s;
+// JS uses 32-bit signed integers for bitwise operations which means we cannot
+// simple take carry out of low bit sum by shift, we need to use division.
+function add(Ah, Al, Bh, Bl) {
+    const l = (Al >>> 0) + (Bl >>> 0);
+    return {
+        h: Ah + Bh + (l / 2 ** 32 | 0) | 0,
+        l: l | 0
+    };
+}
+// Addition with more than 2 elements
+const add3L = (Al, Bl, Cl)=>(Al >>> 0) + (Bl >>> 0) + (Cl >>> 0);
+const add3H = (low, Ah, Bh, Ch)=>Ah + Bh + Ch + (low / 2 ** 32 | 0) | 0;
+const add4L = (Al, Bl, Cl, Dl)=>(Al >>> 0) + (Bl >>> 0) + (Cl >>> 0) + (Dl >>> 0);
+const add4H = (low, Ah, Bh, Ch, Dh)=>Ah + Bh + Ch + Dh + (low / 2 ** 32 | 0) | 0;
+const add5L = (Al, Bl, Cl, Dl, El)=>(Al >>> 0) + (Bl >>> 0) + (Cl >>> 0) + (Dl >>> 0) + (El >>> 0);
+const add5H = (low, Ah, Bh, Ch, Dh, Eh)=>Ah + Bh + Ch + Dh + Eh + (low / 2 ** 32 | 0) | 0;
+
+/**
+ * Round constants:
+ * First 32 bits of fractional parts of the cube roots of the first 64 primes 2..311)
+ */ // prettier-ignore
+const SHA256_K = /* @__PURE__ */ Uint32Array.from([
+    0x428a2f98,
+    0x71374491,
+    0xb5c0fbcf,
+    0xe9b5dba5,
+    0x3956c25b,
+    0x59f111f1,
+    0x923f82a4,
+    0xab1c5ed5,
+    0xd807aa98,
+    0x12835b01,
+    0x243185be,
+    0x550c7dc3,
+    0x72be5d74,
+    0x80deb1fe,
+    0x9bdc06a7,
+    0xc19bf174,
+    0xe49b69c1,
+    0xefbe4786,
+    0x0fc19dc6,
+    0x240ca1cc,
+    0x2de92c6f,
+    0x4a7484aa,
+    0x5cb0a9dc,
+    0x76f988da,
+    0x983e5152,
+    0xa831c66d,
+    0xb00327c8,
+    0xbf597fc7,
+    0xc6e00bf3,
+    0xd5a79147,
+    0x06ca6351,
+    0x14292967,
+    0x27b70a85,
+    0x2e1b2138,
+    0x4d2c6dfc,
+    0x53380d13,
+    0x650a7354,
+    0x766a0abb,
+    0x81c2c92e,
+    0x92722c85,
+    0xa2bfe8a1,
+    0xa81a664b,
+    0xc24b8b70,
+    0xc76c51a3,
+    0xd192e819,
+    0xd6990624,
+    0xf40e3585,
+    0x106aa070,
+    0x19a4c116,
+    0x1e376c08,
+    0x2748774c,
+    0x34b0bcb5,
+    0x391c0cb3,
+    0x4ed8aa4a,
+    0x5b9cca4f,
+    0x682e6ff3,
+    0x748f82ee,
+    0x78a5636f,
+    0x84c87814,
+    0x8cc70208,
+    0x90befffa,
+    0xa4506ceb,
+    0xbef9a3f7,
+    0xc67178f2
+]);
+/** Reusable temporary buffer. "W" comes straight from spec. */ const SHA256_W = /* @__PURE__ */ new Uint32Array(64);
+class SHA256 extends HashMD {
+    get() {
+        const { A, B, C, D, E, F, G, H } = this;
+        return [
+            A,
+            B,
+            C,
+            D,
+            E,
+            F,
+            G,
+            H
+        ];
+    }
+    // prettier-ignore
+    set(A, B, C, D, E, F, G, H) {
+        this.A = A | 0;
+        this.B = B | 0;
+        this.C = C | 0;
+        this.D = D | 0;
+        this.E = E | 0;
+        this.F = F | 0;
+        this.G = G | 0;
+        this.H = H | 0;
+    }
+    process(view, offset) {
+        // Extend the first 16 words into the remaining 48 words w[16..63] of the message schedule array
+        for(let i = 0; i < 16; i++, offset += 4)SHA256_W[i] = view.getUint32(offset, false);
+        for(let i = 16; i < 64; i++){
+            const W15 = SHA256_W[i - 15];
+            const W2 = SHA256_W[i - 2];
+            const s0 = rotr(W15, 7) ^ rotr(W15, 18) ^ W15 >>> 3;
+            const s1 = rotr(W2, 17) ^ rotr(W2, 19) ^ W2 >>> 10;
+            SHA256_W[i] = s1 + SHA256_W[i - 7] + s0 + SHA256_W[i - 16] | 0;
+        }
+        // Compression function main loop, 64 rounds
+        let { A, B, C, D, E, F, G, H } = this;
+        for(let i = 0; i < 64; i++){
+            const sigma1 = rotr(E, 6) ^ rotr(E, 11) ^ rotr(E, 25);
+            const T1 = H + sigma1 + Chi(E, F, G) + SHA256_K[i] + SHA256_W[i] | 0;
+            const sigma0 = rotr(A, 2) ^ rotr(A, 13) ^ rotr(A, 22);
+            const T2 = sigma0 + Maj(A, B, C) | 0;
+            H = G;
+            G = F;
+            F = E;
+            E = D + T1 | 0;
+            D = C;
+            C = B;
+            B = A;
+            A = T1 + T2 | 0;
+        }
+        // Add the compressed chunk to the current hash value
+        A = A + this.A | 0;
+        B = B + this.B | 0;
+        C = C + this.C | 0;
+        D = D + this.D | 0;
+        E = E + this.E | 0;
+        F = F + this.F | 0;
+        G = G + this.G | 0;
+        H = H + this.H | 0;
+        this.set(A, B, C, D, E, F, G, H);
+    }
+    roundClean() {
+        clean(SHA256_W);
+    }
+    destroy() {
+        this.set(0, 0, 0, 0, 0, 0, 0, 0);
+        clean(this.buffer);
+    }
+    constructor(outputLen = 32){
+        super(64, outputLen, 8, false);
+        // We cannot use array here since array allows indexing by variable
+        // which means optimizer/compiler cannot use registers.
+        this.A = SHA256_IV[0] | 0;
+        this.B = SHA256_IV[1] | 0;
+        this.C = SHA256_IV[2] | 0;
+        this.D = SHA256_IV[3] | 0;
+        this.E = SHA256_IV[4] | 0;
+        this.F = SHA256_IV[5] | 0;
+        this.G = SHA256_IV[6] | 0;
+        this.H = SHA256_IV[7] | 0;
+    }
+}
+class SHA224 extends SHA256 {
+    constructor(){
+        super(28);
+        this.A = SHA224_IV[0] | 0;
+        this.B = SHA224_IV[1] | 0;
+        this.C = SHA224_IV[2] | 0;
+        this.D = SHA224_IV[3] | 0;
+        this.E = SHA224_IV[4] | 0;
+        this.F = SHA224_IV[5] | 0;
+        this.G = SHA224_IV[6] | 0;
+        this.H = SHA224_IV[7] | 0;
+    }
+}
+// SHA2-512 is slower than sha256 in js because u64 operations are slow.
+// Round contants
+// First 32 bits of the fractional parts of the cube roots of the first 80 primes 2..409
+// prettier-ignore
+const K512 = /* @__PURE__ */ (()=>split([
+        '0x428a2f98d728ae22',
+        '0x7137449123ef65cd',
+        '0xb5c0fbcfec4d3b2f',
+        '0xe9b5dba58189dbbc',
+        '0x3956c25bf348b538',
+        '0x59f111f1b605d019',
+        '0x923f82a4af194f9b',
+        '0xab1c5ed5da6d8118',
+        '0xd807aa98a3030242',
+        '0x12835b0145706fbe',
+        '0x243185be4ee4b28c',
+        '0x550c7dc3d5ffb4e2',
+        '0x72be5d74f27b896f',
+        '0x80deb1fe3b1696b1',
+        '0x9bdc06a725c71235',
+        '0xc19bf174cf692694',
+        '0xe49b69c19ef14ad2',
+        '0xefbe4786384f25e3',
+        '0x0fc19dc68b8cd5b5',
+        '0x240ca1cc77ac9c65',
+        '0x2de92c6f592b0275',
+        '0x4a7484aa6ea6e483',
+        '0x5cb0a9dcbd41fbd4',
+        '0x76f988da831153b5',
+        '0x983e5152ee66dfab',
+        '0xa831c66d2db43210',
+        '0xb00327c898fb213f',
+        '0xbf597fc7beef0ee4',
+        '0xc6e00bf33da88fc2',
+        '0xd5a79147930aa725',
+        '0x06ca6351e003826f',
+        '0x142929670a0e6e70',
+        '0x27b70a8546d22ffc',
+        '0x2e1b21385c26c926',
+        '0x4d2c6dfc5ac42aed',
+        '0x53380d139d95b3df',
+        '0x650a73548baf63de',
+        '0x766a0abb3c77b2a8',
+        '0x81c2c92e47edaee6',
+        '0x92722c851482353b',
+        '0xa2bfe8a14cf10364',
+        '0xa81a664bbc423001',
+        '0xc24b8b70d0f89791',
+        '0xc76c51a30654be30',
+        '0xd192e819d6ef5218',
+        '0xd69906245565a910',
+        '0xf40e35855771202a',
+        '0x106aa07032bbd1b8',
+        '0x19a4c116b8d2d0c8',
+        '0x1e376c085141ab53',
+        '0x2748774cdf8eeb99',
+        '0x34b0bcb5e19b48a8',
+        '0x391c0cb3c5c95a63',
+        '0x4ed8aa4ae3418acb',
+        '0x5b9cca4f7763e373',
+        '0x682e6ff3d6b2b8a3',
+        '0x748f82ee5defb2fc',
+        '0x78a5636f43172f60',
+        '0x84c87814a1f0ab72',
+        '0x8cc702081a6439ec',
+        '0x90befffa23631e28',
+        '0xa4506cebde82bde9',
+        '0xbef9a3f7b2c67915',
+        '0xc67178f2e372532b',
+        '0xca273eceea26619c',
+        '0xd186b8c721c0c207',
+        '0xeada7dd6cde0eb1e',
+        '0xf57d4f7fee6ed178',
+        '0x06f067aa72176fba',
+        '0x0a637dc5a2c898a6',
+        '0x113f9804bef90dae',
+        '0x1b710b35131c471b',
+        '0x28db77f523047d84',
+        '0x32caab7b40c72493',
+        '0x3c9ebe0a15c9bebc',
+        '0x431d67c49c100d4c',
+        '0x4cc5d4becb3e42b6',
+        '0x597f299cfc657e2a',
+        '0x5fcb6fab3ad6faec',
+        '0x6c44198c4a475817'
+    ].map((n)=>BigInt(n))))();
+const SHA512_Kh = /* @__PURE__ */ (()=>K512[0])();
+const SHA512_Kl = /* @__PURE__ */ (()=>K512[1])();
+// Reusable temporary buffers
+const SHA512_W_H = /* @__PURE__ */ new Uint32Array(80);
+const SHA512_W_L = /* @__PURE__ */ new Uint32Array(80);
+class SHA512 extends HashMD {
+    // prettier-ignore
+    get() {
+        const { Ah, Al, Bh, Bl, Ch, Cl, Dh, Dl, Eh, El, Fh, Fl, Gh, Gl, Hh, Hl } = this;
+        return [
+            Ah,
+            Al,
+            Bh,
+            Bl,
+            Ch,
+            Cl,
+            Dh,
+            Dl,
+            Eh,
+            El,
+            Fh,
+            Fl,
+            Gh,
+            Gl,
+            Hh,
+            Hl
+        ];
+    }
+    // prettier-ignore
+    set(Ah, Al, Bh, Bl, Ch, Cl, Dh, Dl, Eh, El, Fh, Fl, Gh, Gl, Hh, Hl) {
+        this.Ah = Ah | 0;
+        this.Al = Al | 0;
+        this.Bh = Bh | 0;
+        this.Bl = Bl | 0;
+        this.Ch = Ch | 0;
+        this.Cl = Cl | 0;
+        this.Dh = Dh | 0;
+        this.Dl = Dl | 0;
+        this.Eh = Eh | 0;
+        this.El = El | 0;
+        this.Fh = Fh | 0;
+        this.Fl = Fl | 0;
+        this.Gh = Gh | 0;
+        this.Gl = Gl | 0;
+        this.Hh = Hh | 0;
+        this.Hl = Hl | 0;
+    }
+    process(view, offset) {
+        // Extend the first 16 words into the remaining 64 words w[16..79] of the message schedule array
+        for(let i = 0; i < 16; i++, offset += 4){
+            SHA512_W_H[i] = view.getUint32(offset);
+            SHA512_W_L[i] = view.getUint32(offset += 4);
+        }
+        for(let i = 16; i < 80; i++){
+            // s0 := (w[i-15] rightrotate 1) xor (w[i-15] rightrotate 8) xor (w[i-15] rightshift 7)
+            const W15h = SHA512_W_H[i - 15] | 0;
+            const W15l = SHA512_W_L[i - 15] | 0;
+            const s0h = rotrSH(W15h, W15l, 1) ^ rotrSH(W15h, W15l, 8) ^ shrSH(W15h, W15l, 7);
+            const s0l = rotrSL(W15h, W15l, 1) ^ rotrSL(W15h, W15l, 8) ^ shrSL(W15h, W15l, 7);
+            // s1 := (w[i-2] rightrotate 19) xor (w[i-2] rightrotate 61) xor (w[i-2] rightshift 6)
+            const W2h = SHA512_W_H[i - 2] | 0;
+            const W2l = SHA512_W_L[i - 2] | 0;
+            const s1h = rotrSH(W2h, W2l, 19) ^ rotrBH(W2h, W2l, 61) ^ shrSH(W2h, W2l, 6);
+            const s1l = rotrSL(W2h, W2l, 19) ^ rotrBL(W2h, W2l, 61) ^ shrSL(W2h, W2l, 6);
+            // SHA256_W[i] = s0 + s1 + SHA256_W[i - 7] + SHA256_W[i - 16];
+            const SUMl = add4L(s0l, s1l, SHA512_W_L[i - 7], SHA512_W_L[i - 16]);
+            const SUMh = add4H(SUMl, s0h, s1h, SHA512_W_H[i - 7], SHA512_W_H[i - 16]);
+            SHA512_W_H[i] = SUMh | 0;
+            SHA512_W_L[i] = SUMl | 0;
+        }
+        let { Ah, Al, Bh, Bl, Ch, Cl, Dh, Dl, Eh, El, Fh, Fl, Gh, Gl, Hh, Hl } = this;
+        // Compression function main loop, 80 rounds
+        for(let i = 0; i < 80; i++){
+            // S1 := (e rightrotate 14) xor (e rightrotate 18) xor (e rightrotate 41)
+            const sigma1h = rotrSH(Eh, El, 14) ^ rotrSH(Eh, El, 18) ^ rotrBH(Eh, El, 41);
+            const sigma1l = rotrSL(Eh, El, 14) ^ rotrSL(Eh, El, 18) ^ rotrBL(Eh, El, 41);
+            //const T1 = (H + sigma1 + Chi(E, F, G) + SHA256_K[i] + SHA256_W[i]) | 0;
+            const CHIh = Eh & Fh ^ ~Eh & Gh;
+            const CHIl = El & Fl ^ ~El & Gl;
+            // T1 = H + sigma1 + Chi(E, F, G) + SHA512_K[i] + SHA512_W[i]
+            // prettier-ignore
+            const T1ll = add5L(Hl, sigma1l, CHIl, SHA512_Kl[i], SHA512_W_L[i]);
+            const T1h = add5H(T1ll, Hh, sigma1h, CHIh, SHA512_Kh[i], SHA512_W_H[i]);
+            const T1l = T1ll | 0;
+            // S0 := (a rightrotate 28) xor (a rightrotate 34) xor (a rightrotate 39)
+            const sigma0h = rotrSH(Ah, Al, 28) ^ rotrBH(Ah, Al, 34) ^ rotrBH(Ah, Al, 39);
+            const sigma0l = rotrSL(Ah, Al, 28) ^ rotrBL(Ah, Al, 34) ^ rotrBL(Ah, Al, 39);
+            const MAJh = Ah & Bh ^ Ah & Ch ^ Bh & Ch;
+            const MAJl = Al & Bl ^ Al & Cl ^ Bl & Cl;
+            Hh = Gh | 0;
+            Hl = Gl | 0;
+            Gh = Fh | 0;
+            Gl = Fl | 0;
+            Fh = Eh | 0;
+            Fl = El | 0;
+            ({ h: Eh, l: El } = add(Dh | 0, Dl | 0, T1h | 0, T1l | 0));
+            Dh = Ch | 0;
+            Dl = Cl | 0;
+            Ch = Bh | 0;
+            Cl = Bl | 0;
+            Bh = Ah | 0;
+            Bl = Al | 0;
+            const All = add3L(T1l, sigma0l, MAJl);
+            Ah = add3H(All, T1h, sigma0h, MAJh);
+            Al = All | 0;
+        }
+        // Add the compressed chunk to the current hash value
+        ({ h: Ah, l: Al } = add(this.Ah | 0, this.Al | 0, Ah | 0, Al | 0));
+        ({ h: Bh, l: Bl } = add(this.Bh | 0, this.Bl | 0, Bh | 0, Bl | 0));
+        ({ h: Ch, l: Cl } = add(this.Ch | 0, this.Cl | 0, Ch | 0, Cl | 0));
+        ({ h: Dh, l: Dl } = add(this.Dh | 0, this.Dl | 0, Dh | 0, Dl | 0));
+        ({ h: Eh, l: El } = add(this.Eh | 0, this.El | 0, Eh | 0, El | 0));
+        ({ h: Fh, l: Fl } = add(this.Fh | 0, this.Fl | 0, Fh | 0, Fl | 0));
+        ({ h: Gh, l: Gl } = add(this.Gh | 0, this.Gl | 0, Gh | 0, Gl | 0));
+        ({ h: Hh, l: Hl } = add(this.Hh | 0, this.Hl | 0, Hh | 0, Hl | 0));
+        this.set(Ah, Al, Bh, Bl, Ch, Cl, Dh, Dl, Eh, El, Fh, Fl, Gh, Gl, Hh, Hl);
+    }
+    roundClean() {
+        clean(SHA512_W_H, SHA512_W_L);
+    }
+    destroy() {
+        clean(this.buffer);
+        this.set(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
+    }
+    constructor(outputLen = 64){
+        super(128, outputLen, 16, false);
+        // We cannot use array here since array allows indexing by variable
+        // which means optimizer/compiler cannot use registers.
+        // h -- high 32 bits, l -- low 32 bits
+        this.Ah = SHA512_IV[0] | 0;
+        this.Al = SHA512_IV[1] | 0;
+        this.Bh = SHA512_IV[2] | 0;
+        this.Bl = SHA512_IV[3] | 0;
+        this.Ch = SHA512_IV[4] | 0;
+        this.Cl = SHA512_IV[5] | 0;
+        this.Dh = SHA512_IV[6] | 0;
+        this.Dl = SHA512_IV[7] | 0;
+        this.Eh = SHA512_IV[8] | 0;
+        this.El = SHA512_IV[9] | 0;
+        this.Fh = SHA512_IV[10] | 0;
+        this.Fl = SHA512_IV[11] | 0;
+        this.Gh = SHA512_IV[12] | 0;
+        this.Gl = SHA512_IV[13] | 0;
+        this.Hh = SHA512_IV[14] | 0;
+        this.Hl = SHA512_IV[15] | 0;
+    }
+}
+class SHA384 extends SHA512 {
+    constructor(){
+        super(48);
+        this.Ah = SHA384_IV[0] | 0;
+        this.Al = SHA384_IV[1] | 0;
+        this.Bh = SHA384_IV[2] | 0;
+        this.Bl = SHA384_IV[3] | 0;
+        this.Ch = SHA384_IV[4] | 0;
+        this.Cl = SHA384_IV[5] | 0;
+        this.Dh = SHA384_IV[6] | 0;
+        this.Dl = SHA384_IV[7] | 0;
+        this.Eh = SHA384_IV[8] | 0;
+        this.El = SHA384_IV[9] | 0;
+        this.Fh = SHA384_IV[10] | 0;
+        this.Fl = SHA384_IV[11] | 0;
+        this.Gh = SHA384_IV[12] | 0;
+        this.Gl = SHA384_IV[13] | 0;
+        this.Hh = SHA384_IV[14] | 0;
+        this.Hl = SHA384_IV[15] | 0;
+    }
+}
+/**
+ * SHA2-256 hash function from RFC 4634.
+ *
+ * It is the fastest JS hash, even faster than Blake3.
+ * To break sha256 using birthday attack, attackers need to try 2^128 hashes.
+ * BTC network is doing 2^70 hashes/sec (2^95 hashes/year) as per 2025.
+ */ const sha256 = /* @__PURE__ */ createHasher(()=>new SHA256());
+/** SHA2-224 hash function from RFC 4634 */ const sha224 = /* @__PURE__ */ createHasher(()=>new SHA224());
+/** SHA2-512 hash function from RFC 4634. */ const sha512 = /* @__PURE__ */ createHasher(()=>new SHA512());
+/** SHA2-384 hash function from RFC 4634. */ const sha384 = /* @__PURE__ */ createHasher(()=>new SHA384());
+
+// No __PURE__ annotations in sha3 header:
+// EVERYTHING is in fact used on every export.
+// Various per round constants calculations
+const _0n = BigInt(0);
+const _1n = BigInt(1);
+const _2n = BigInt(2);
+const _7n = BigInt(7);
+const _256n = BigInt(256);
+const _0x71n = BigInt(0x71);
+const SHA3_PI = [];
+const SHA3_ROTL = [];
+const _SHA3_IOTA = [];
+for(let round = 0, R = _1n, x = 1, y = 0; round < 24; round++){
+    // Pi
+    [x, y] = [
+        y,
+        (2 * x + 3 * y) % 5
+    ];
+    SHA3_PI.push(2 * (5 * y + x));
+    // Rotational
+    SHA3_ROTL.push((round + 1) * (round + 2) / 2 % 64);
+    // Iota
+    let t = _0n;
+    for(let j = 0; j < 7; j++){
+        R = (R << _1n ^ (R >> _7n) * _0x71n) % _256n;
+        if (R & _2n) t ^= _1n << (_1n << /* @__PURE__ */ BigInt(j)) - _1n;
+    }
+    _SHA3_IOTA.push(t);
+}
+const IOTAS = split(_SHA3_IOTA, true);
+const SHA3_IOTA_H = IOTAS[0];
+const SHA3_IOTA_L = IOTAS[1];
+// Left rotation (without 0, 32, 64)
+const rotlH = (h, l, s)=>s > 32 ? rotlBH(h, l, s) : rotlSH(h, l, s);
+const rotlL = (h, l, s)=>s > 32 ? rotlBL(h, l, s) : rotlSL(h, l, s);
+/** `keccakf1600` internal function, additionally allows to adjust round count. */ function keccakP(s, rounds = 24) {
+    const B = new Uint32Array(5 * 2);
+    // NOTE: all indices are x2 since we store state as u32 instead of u64 (bigints to slow in js)
+    for(let round = 24 - rounds; round < 24; round++){
+        // Theta θ
+        for(let x = 0; x < 10; x++)B[x] = s[x] ^ s[x + 10] ^ s[x + 20] ^ s[x + 30] ^ s[x + 40];
+        for(let x = 0; x < 10; x += 2){
+            const idx1 = (x + 8) % 10;
+            const idx0 = (x + 2) % 10;
+            const B0 = B[idx0];
+            const B1 = B[idx0 + 1];
+            const Th = rotlH(B0, B1, 1) ^ B[idx1];
+            const Tl = rotlL(B0, B1, 1) ^ B[idx1 + 1];
+            for(let y = 0; y < 50; y += 10){
+                s[x + y] ^= Th;
+                s[x + y + 1] ^= Tl;
+            }
+        }
+        // Rho (ρ) and Pi (π)
+        let curH = s[2];
+        let curL = s[3];
+        for(let t = 0; t < 24; t++){
+            const shift = SHA3_ROTL[t];
+            const Th = rotlH(curH, curL, shift);
+            const Tl = rotlL(curH, curL, shift);
+            const PI = SHA3_PI[t];
+            curH = s[PI];
+            curL = s[PI + 1];
+            s[PI] = Th;
+            s[PI + 1] = Tl;
+        }
+        // Chi (χ)
+        for(let y = 0; y < 50; y += 10){
+            for(let x = 0; x < 10; x++)B[x] = s[y + x];
+            for(let x = 0; x < 10; x++)s[y + x] ^= ~B[(x + 2) % 10] & B[(x + 4) % 10];
+        }
+        // Iota (ι)
+        s[0] ^= SHA3_IOTA_H[round];
+        s[1] ^= SHA3_IOTA_L[round];
+    }
+    clean(B);
+}
+/** Keccak sponge function. */ class Keccak extends Hash {
+    clone() {
+        return this._cloneInto();
+    }
+    keccak() {
+        swap32IfBE(this.state32);
+        keccakP(this.state32, this.rounds);
+        swap32IfBE(this.state32);
+        this.posOut = 0;
+        this.pos = 0;
+    }
+    update(data) {
+        aexists(this);
+        data = toBytes(data);
+        abytes(data);
+        const { blockLen, state } = this;
+        const len = data.length;
+        for(let pos = 0; pos < len;){
+            const take = Math.min(blockLen - this.pos, len - pos);
+            for(let i = 0; i < take; i++)state[this.pos++] ^= data[pos++];
+            if (this.pos === blockLen) this.keccak();
+        }
+        return this;
+    }
+    finish() {
+        if (this.finished) return;
+        this.finished = true;
+        const { state, suffix, pos, blockLen } = this;
+        // Do the padding
+        state[pos] ^= suffix;
+        if ((suffix & 0x80) !== 0 && pos === blockLen - 1) this.keccak();
+        state[blockLen - 1] ^= 0x80;
+        this.keccak();
+    }
+    writeInto(out) {
+        aexists(this, false);
+        abytes(out);
+        this.finish();
+        const bufferOut = this.state;
+        const { blockLen } = this;
+        for(let pos = 0, len = out.length; pos < len;){
+            if (this.posOut >= blockLen) this.keccak();
+            const take = Math.min(blockLen - this.posOut, len - pos);
+            out.set(bufferOut.subarray(this.posOut, this.posOut + take), pos);
+            this.posOut += take;
+            pos += take;
+        }
+        return out;
+    }
+    xofInto(out) {
+        // Sha3/Keccak usage with XOF is probably mistake, only SHAKE instances can do XOF
+        if (!this.enableXOF) throw new Error('XOF is not possible for this instance');
+        return this.writeInto(out);
+    }
+    xof(bytes) {
+        anumber(bytes);
+        return this.xofInto(new Uint8Array(bytes));
+    }
+    digestInto(out) {
+        aoutput(out, this);
+        if (this.finished) throw new Error('digest() was already called');
+        this.writeInto(out);
+        this.destroy();
+        return out;
+    }
+    digest() {
+        return this.digestInto(new Uint8Array(this.outputLen));
+    }
+    destroy() {
+        this.destroyed = true;
+        clean(this.state);
+    }
+    _cloneInto(to) {
+        const { blockLen, suffix, outputLen, rounds, enableXOF } = this;
+        to || (to = new Keccak(blockLen, suffix, outputLen, enableXOF, rounds));
+        to.state32.set(this.state32);
+        to.pos = this.pos;
+        to.posOut = this.posOut;
+        to.finished = this.finished;
+        to.rounds = rounds;
+        // Suffix can change in cSHAKE
+        to.suffix = suffix;
+        to.outputLen = outputLen;
+        to.enableXOF = enableXOF;
+        to.destroyed = this.destroyed;
+        return to;
+    }
+    // NOTE: we accept arguments in bytes instead of bits here.
+    constructor(blockLen, suffix, outputLen, enableXOF = false, rounds = 24){
+        super();
+        this.pos = 0;
+        this.posOut = 0;
+        this.finished = false;
+        this.destroyed = false;
+        this.enableXOF = false;
+        this.blockLen = blockLen;
+        this.suffix = suffix;
+        this.outputLen = outputLen;
+        this.enableXOF = enableXOF;
+        this.rounds = rounds;
+        // Can be passed from user as dkLen
+        anumber(outputLen);
+        // 1600 = 5x5 matrix of 64bit.  1600 bits === 200 bytes
+        // 0 < blockLen < 200
+        if (!(0 < blockLen && blockLen < 200)) throw new Error('only keccak-f1600 function is supported');
+        this.state = new Uint8Array(200);
+        this.state32 = u32(this.state);
+    }
+}
+const gen = (suffix, blockLen, outputLen)=>createHasher(()=>new Keccak(blockLen, suffix, outputLen));
+/** SHA3-224 hash function. */ const sha3_224 = /* @__PURE__ */ (()=>gen(0x06, 144, 224 / 8))();
+/** SHA3-256 hash function. Different from keccak-256. */ const sha3_256 = /* @__PURE__ */ (()=>gen(0x06, 136, 256 / 8))();
+/** SHA3-384 hash function. */ const sha3_384 = /* @__PURE__ */ (()=>gen(0x06, 104, 384 / 8))();
+/** SHA3-512 hash function. */ const sha3_512 = /* @__PURE__ */ (()=>gen(0x06, 72, 512 / 8))();
+
+/**
+ * "globalThis" ponyfill.
+ * @see [A horrifying globalThis polyfill in universal JavaScript](https://mathiasbynens.be/notes/globalthis)
+ * @type {Object.<string, *>}
+ */ const globalScope = (()=>{
+    if (typeof globalThis === "object") return globalThis;
+    else {
+        Object.defineProperty(Object.prototype, "__GLOBALTHIS__", {
+            get () {
+                return this;
+            },
+            configurable: true
+        });
+        try {
+            // @ts-expect-error
+            // eslint-disable-next-line no-undef
+            if (typeof __GLOBALTHIS__ !== "undefined") return __GLOBALTHIS__;
+        } finally{
+            // @ts-expect-error
+            delete Object.prototype.__GLOBALTHIS__;
+        }
+    }
+    // Still unable to determine "globalThis", fall back to a naive method.
+    if (typeof self !== "undefined") return self;
+    else if (typeof window !== "undefined") return window;
+    else if (typeof global !== "undefined") return global;
+    return undefined;
+})();
+
+/**
+ * @noble/hashes hash functions.
+ * @type {Object.<string, sha1|sha224|sha256|sha384|sha512|sha3_224|sha3_256|sha3_384|sha3_512>}
+ */ const nobleHashes = {
+    SHA1: sha1,
+    SHA224: sha224,
+    SHA256: sha256,
+    SHA384: sha384,
+    SHA512: sha512,
+    "SHA3-224": sha3_224,
+    "SHA3-256": sha3_256,
+    "SHA3-384": sha3_384,
+    "SHA3-512": sha3_512
+};
+/**
+ * Canonicalizes a hash algorithm name.
+ * @param {string} algorithm Hash algorithm name.
+ * @returns {"SHA1"|"SHA224"|"SHA256"|"SHA384"|"SHA512"|"SHA3-224"|"SHA3-256"|"SHA3-384"|"SHA3-512"} Canonicalized hash algorithm name.
+ */ const canonicalizeAlgorithm = (algorithm)=>{
+    switch(true){
+        case /^(?:SHA-?1|SSL3-SHA1)$/i.test(algorithm):
+            return "SHA1";
+        case /^SHA(?:2?-)?224$/i.test(algorithm):
+            return "SHA224";
+        case /^SHA(?:2?-)?256$/i.test(algorithm):
+            return "SHA256";
+        case /^SHA(?:2?-)?384$/i.test(algorithm):
+            return "SHA384";
+        case /^SHA(?:2?-)?512$/i.test(algorithm):
+            return "SHA512";
+        case /^SHA3-224$/i.test(algorithm):
+            return "SHA3-224";
+        case /^SHA3-256$/i.test(algorithm):
+            return "SHA3-256";
+        case /^SHA3-384$/i.test(algorithm):
+            return "SHA3-384";
+        case /^SHA3-512$/i.test(algorithm):
+            return "SHA3-512";
+        default:
+            throw new TypeError(`Unknown hash algorithm: ${algorithm}`);
+    }
+};
+/**
+ * Calculates an HMAC digest.
+ * @param {string} algorithm Algorithm.
+ * @param {Uint8Array} key Key.
+ * @param {Uint8Array} message Message.
+ * @returns {Uint8Array} Digest.
+ */ const hmacDigest = (algorithm, key, message)=>{
+    if (hmac) {
+        const hash = nobleHashes[algorithm] ?? nobleHashes[canonicalizeAlgorithm(algorithm)];
+        return hmac(hash, key, message);
+    } else {
+        throw new Error("Missing HMAC function");
+    }
+};
+
+/**
+ * RFC 4648 base32 alphabet without pad.
+ * @type {string}
+ */ const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
+/**
+ * Converts a base32 string to an Uint8Array (RFC 4648).
+ * @see [LinusU/base32-decode](https://github.com/LinusU/base32-decode)
+ * @param {string} str Base32 string.
+ * @returns {Uint8Array} Uint8Array.
+ */ const base32Decode = (str)=>{
+    // Remove spaces (although they are not allowed by the spec, some issuers add them for readability).
+    str = str.replace(/ /g, "");
+    // Canonicalize to all upper case and remove padding if it exists.
+    let end = str.length;
+    while(str[end - 1] === "=")--end;
+    str = (end < str.length ? str.substring(0, end) : str).toUpperCase();
+    const buf = new ArrayBuffer(str.length * 5 / 8 | 0);
+    const arr = new Uint8Array(buf);
+    let bits = 0;
+    let value = 0;
+    let index = 0;
+    for(let i = 0; i < str.length; i++){
+        const idx = ALPHABET.indexOf(str[i]);
+        if (idx === -1) throw new TypeError(`Invalid character found: ${str[i]}`);
+        value = value << 5 | idx;
+        bits += 5;
+        if (bits >= 8) {
+            bits -= 8;
+            arr[index++] = value >>> bits;
+        }
+    }
+    return arr;
+};
+/**
+ * Converts an Uint8Array to a base32 string (RFC 4648).
+ * @see [LinusU/base32-encode](https://github.com/LinusU/base32-encode)
+ * @param {Uint8Array} arr Uint8Array.
+ * @returns {string} Base32 string.
+ */ const base32Encode = (arr)=>{
+    let bits = 0;
+    let value = 0;
+    let str = "";
+    for(let i = 0; i < arr.length; i++){
+        value = value << 8 | arr[i];
+        bits += 8;
+        while(bits >= 5){
+            str += ALPHABET[value >>> bits - 5 & 31];
+            bits -= 5;
+        }
+    }
+    if (bits > 0) {
+        str += ALPHABET[value << 5 - bits & 31];
+    }
+    return str;
+};
+
+/**
+ * Converts a hexadecimal string to an Uint8Array.
+ * @param {string} str Hexadecimal string.
+ * @returns {Uint8Array} Uint8Array.
+ */ const hexDecode = (str)=>{
+    // Remove spaces (although they are not allowed by the spec, some issuers add them for readability).
+    str = str.replace(/ /g, "");
+    const buf = new ArrayBuffer(str.length / 2);
+    const arr = new Uint8Array(buf);
+    for(let i = 0; i < str.length; i += 2){
+        arr[i / 2] = parseInt(str.substring(i, i + 2), 16);
+    }
+    return arr;
+};
+/**
+ * Converts an Uint8Array to a hexadecimal string.
+ * @param {Uint8Array} arr Uint8Array.
+ * @returns {string} Hexadecimal string.
+ */ const hexEncode = (arr)=>{
+    let str = "";
+    for(let i = 0; i < arr.length; i++){
+        const hex = arr[i].toString(16);
+        if (hex.length === 1) str += "0";
+        str += hex;
+    }
+    return str.toUpperCase();
+};
+
+/**
+ * Converts a Latin-1 string to an Uint8Array.
+ * @param {string} str Latin-1 string.
+ * @returns {Uint8Array} Uint8Array.
+ */ const latin1Decode = (str)=>{
+    const buf = new ArrayBuffer(str.length);
+    const arr = new Uint8Array(buf);
+    for(let i = 0; i < str.length; i++){
+        arr[i] = str.charCodeAt(i) & 0xff;
+    }
+    return arr;
+};
+/**
+ * Converts an Uint8Array to a Latin-1 string.
+ * @param {Uint8Array} arr Uint8Array.
+ * @returns {string} Latin-1 string.
+ */ const latin1Encode = (arr)=>{
+    let str = "";
+    for(let i = 0; i < arr.length; i++){
+        str += String.fromCharCode(arr[i]);
+    }
+    return str;
+};
+
+/**
+ * TextEncoder instance.
+ * @type {TextEncoder|null}
+ */ const ENCODER = globalScope.TextEncoder ? new globalScope.TextEncoder() : null;
+/**
+ * TextDecoder instance.
+ * @type {TextDecoder|null}
+ */ const DECODER = globalScope.TextDecoder ? new globalScope.TextDecoder() : null;
+/**
+ * Converts an UTF-8 string to an Uint8Array.
+ * @param {string} str String.
+ * @returns {Uint8Array} Uint8Array.
+ */ const utf8Decode = (str)=>{
+    if (!ENCODER) {
+        throw new Error("Encoding API not available");
+    }
+    return ENCODER.encode(str);
+};
+/**
+ * Converts an Uint8Array to an UTF-8 string.
+ * @param {Uint8Array} arr Uint8Array.
+ * @returns {string} String.
+ */ const utf8Encode = (arr)=>{
+    if (!DECODER) {
+        throw new Error("Encoding API not available");
+    }
+    return DECODER.decode(arr);
+};
+
+/**
+ * Returns random bytes.
+ * @param {number} size Size.
+ * @returns {Uint8Array} Random bytes.
+ */ const randomBytes = (size)=>{
+    if (globalScope.crypto?.getRandomValues) {
+        return globalScope.crypto.getRandomValues(new Uint8Array(size));
+    } else {
+        throw new Error("Cryptography API not available");
+    }
+};
+
+/**
+ * OTP secret key.
+ */ class Secret {
+    /**
+   * Converts a Latin-1 string to a Secret object.
+   * @param {string} str Latin-1 string.
+   * @returns {Secret} Secret object.
+   */ static fromLatin1(str) {
+        return new Secret({
+            buffer: latin1Decode(str).buffer
+        });
+    }
+    /**
+   * Converts an UTF-8 string to a Secret object.
+   * @param {string} str UTF-8 string.
+   * @returns {Secret} Secret object.
+   */ static fromUTF8(str) {
+        return new Secret({
+            buffer: utf8Decode(str).buffer
+        });
+    }
+    /**
+   * Converts a base32 string to a Secret object.
+   * @param {string} str Base32 string.
+   * @returns {Secret} Secret object.
+   */ static fromBase32(str) {
+        return new Secret({
+            buffer: base32Decode(str).buffer
+        });
+    }
+    /**
+   * Converts a hexadecimal string to a Secret object.
+   * @param {string} str Hexadecimal string.
+   * @returns {Secret} Secret object.
+   */ static fromHex(str) {
+        return new Secret({
+            buffer: hexDecode(str).buffer
+        });
+    }
+    /**
+   * Secret key buffer.
+   * @deprecated For backward compatibility, the "bytes" property should be used instead.
+   * @type {ArrayBufferLike}
+   */ get buffer() {
+        return this.bytes.buffer;
+    }
+    /**
+   * Latin-1 string representation of secret key.
+   * @type {string}
+   */ get latin1() {
+        Object.defineProperty(this, "latin1", {
+            enumerable: true,
+            writable: false,
+            configurable: false,
+            value: latin1Encode(this.bytes)
+        });
+        return this.latin1;
+    }
+    /**
+   * UTF-8 string representation of secret key.
+   * @type {string}
+   */ get utf8() {
+        Object.defineProperty(this, "utf8", {
+            enumerable: true,
+            writable: false,
+            configurable: false,
+            value: utf8Encode(this.bytes)
+        });
+        return this.utf8;
+    }
+    /**
+   * Base32 string representation of secret key.
+   * @type {string}
+   */ get base32() {
+        Object.defineProperty(this, "base32", {
+            enumerable: true,
+            writable: false,
+            configurable: false,
+            value: base32Encode(this.bytes)
+        });
+        return this.base32;
+    }
+    /**
+   * Hexadecimal string representation of secret key.
+   * @type {string}
+   */ get hex() {
+        Object.defineProperty(this, "hex", {
+            enumerable: true,
+            writable: false,
+            configurable: false,
+            value: hexEncode(this.bytes)
+        });
+        return this.hex;
+    }
+    /**
+   * Creates a secret key object.
+   * @param {Object} [config] Configuration options.
+   * @param {ArrayBufferLike} [config.buffer] Secret key buffer.
+   * @param {number} [config.size=20] Number of random bytes to generate, ignored if 'buffer' is provided.
+   */ constructor({ buffer, size = 20 } = {}){
+        /**
+     * Secret key.
+     * @type {Uint8Array}
+     * @readonly
+     */ this.bytes = typeof buffer === "undefined" ? randomBytes(size) : new Uint8Array(buffer);
+        // Prevent the "bytes" property from being modified.
+        Object.defineProperty(this, "bytes", {
+            enumerable: true,
+            writable: false,
+            configurable: false,
+            value: this.bytes
+        });
+    }
+}
+
+/**
+ * Returns true if a is equal to b, without leaking timing information that would allow an attacker to guess one of the values.
+ * @param {string} a String a.
+ * @param {string} b String b.
+ * @returns {boolean} Equality result.
+ */ const timingSafeEqual = (a, b)=>{
+    {
+        if (a.length !== b.length) {
+            throw new TypeError("Input strings must have the same length");
+        }
+        let i = -1;
+        let out = 0;
+        while(++i < a.length){
+            out |= a.charCodeAt(i) ^ b.charCodeAt(i);
+        }
+        return out === 0;
+    }
+};
+
+/**
+ * HOTP: An HMAC-based One-time Password Algorithm.
+ * @see [RFC 4226](https://datatracker.ietf.org/doc/html/rfc4226)
+ */ class HOTP {
+    /**
+   * Default configuration.
+   * @type {{
+   *   issuer: string,
+   *   label: string,
+   *   issuerInLabel: boolean,
+   *   algorithm: string,
+   *   digits: number,
+   *   counter: number
+   *   window: number
+   * }}
+   */ static get defaults() {
+        return {
+            issuer: "",
+            label: "OTPAuth",
+            issuerInLabel: true,
+            algorithm: "SHA1",
+            digits: 6,
+            counter: 0,
+            window: 1
+        };
+    }
+    /**
+   * Generates an HOTP token.
+   * @param {Object} config Configuration options.
+   * @param {Secret} config.secret Secret key.
+   * @param {string} [config.algorithm='SHA1'] HMAC hashing algorithm.
+   * @param {number} [config.digits=6] Token length.
+   * @param {number} [config.counter=0] Counter value.
+   * @returns {string} Token.
+   */ static generate({ secret, algorithm = HOTP.defaults.algorithm, digits = HOTP.defaults.digits, counter = HOTP.defaults.counter }) {
+        const digest = hmacDigest(algorithm, secret.bytes, uintDecode(counter));
+        const offset = digest[digest.byteLength - 1] & 15;
+        const otp = ((digest[offset] & 127) << 24 | (digest[offset + 1] & 255) << 16 | (digest[offset + 2] & 255) << 8 | digest[offset + 3] & 255) % 10 ** digits;
+        return otp.toString().padStart(digits, "0");
+    }
+    /**
+   * Generates an HOTP token.
+   * @param {Object} [config] Configuration options.
+   * @param {number} [config.counter=this.counter++] Counter value.
+   * @returns {string} Token.
+   */ generate({ counter = this.counter++ } = {}) {
+        return HOTP.generate({
+            secret: this.secret,
+            algorithm: this.algorithm,
+            digits: this.digits,
+            counter
+        });
+    }
+    /**
+   * Validates an HOTP token.
+   * @param {Object} config Configuration options.
+   * @param {string} config.token Token value.
+   * @param {Secret} config.secret Secret key.
+   * @param {string} [config.algorithm='SHA1'] HMAC hashing algorithm.
+   * @param {number} [config.digits=6] Token length.
+   * @param {number} [config.counter=0] Counter value.
+   * @param {number} [config.window=1] Window of counter values to test.
+   * @returns {number|null} Token delta or null if it is not found in the search window, in which case it should be considered invalid.
+   */ static validate({ token, secret, algorithm, digits = HOTP.defaults.digits, counter = HOTP.defaults.counter, window = HOTP.defaults.window }) {
+        // Return early if the token length does not match the digit number.
+        if (token.length !== digits) return null;
+        let delta = null;
+        const check = (/** @type {number} */ i)=>{
+            const generatedToken = HOTP.generate({
+                secret,
+                algorithm,
+                digits,
+                counter: i
+            });
+            if (timingSafeEqual(token, generatedToken)) {
+                delta = i - counter;
+            }
+        };
+        check(counter);
+        for(let i = 1; i <= window && delta === null; ++i){
+            check(counter - i);
+            if (delta !== null) break;
+            check(counter + i);
+            if (delta !== null) break;
+        }
+        return delta;
+    }
+    /**
+   * Validates an HOTP token.
+   * @param {Object} config Configuration options.
+   * @param {string} config.token Token value.
+   * @param {number} [config.counter=this.counter] Counter value.
+   * @param {number} [config.window=1] Window of counter values to test.
+   * @returns {number|null} Token delta or null if it is not found in the search window, in which case it should be considered invalid.
+   */ validate({ token, counter = this.counter, window }) {
+        return HOTP.validate({
+            token,
+            secret: this.secret,
+            algorithm: this.algorithm,
+            digits: this.digits,
+            counter,
+            window
+        });
+    }
+    /**
+   * Returns a Google Authenticator key URI.
+   * @returns {string} URI.
+   */ toString() {
+        const e = encodeURIComponent;
+        return "otpauth://hotp/" + `${this.issuer.length > 0 ? this.issuerInLabel ? `${e(this.issuer)}:${e(this.label)}?issuer=${e(this.issuer)}&` : `${e(this.label)}?issuer=${e(this.issuer)}&` : `${e(this.label)}?`}` + `secret=${e(this.secret.base32)}&` + `algorithm=${e(this.algorithm)}&` + `digits=${e(this.digits)}&` + `counter=${e(this.counter)}`;
+    }
+    /**
+   * Creates an HOTP object.
+   * @param {Object} [config] Configuration options.
+   * @param {string} [config.issuer=''] Account provider.
+   * @param {string} [config.label='OTPAuth'] Account label.
+   * @param {boolean} [config.issuerInLabel=true] Include issuer prefix in label.
+   * @param {Secret|string} [config.secret=Secret] Secret key.
+   * @param {string} [config.algorithm='SHA1'] HMAC hashing algorithm.
+   * @param {number} [config.digits=6] Token length.
+   * @param {number} [config.counter=0] Initial counter value.
+   */ constructor({ issuer = HOTP.defaults.issuer, label = HOTP.defaults.label, issuerInLabel = HOTP.defaults.issuerInLabel, secret = new Secret(), algorithm = HOTP.defaults.algorithm, digits = HOTP.defaults.digits, counter = HOTP.defaults.counter } = {}){
+        /**
+     * Account provider.
+     * @type {string}
+     */ this.issuer = issuer;
+        /**
+     * Account label.
+     * @type {string}
+     */ this.label = label;
+        /**
+     * Include issuer prefix in label.
+     * @type {boolean}
+     */ this.issuerInLabel = issuerInLabel;
+        /**
+     * Secret key.
+     * @type {Secret}
+     */ this.secret = typeof secret === "string" ? Secret.fromBase32(secret) : secret;
+        /**
+     * HMAC hashing algorithm.
+     * @type {string}
+     */ this.algorithm = canonicalizeAlgorithm(algorithm);
+        /**
+     * Token length.
+     * @type {number}
+     */ this.digits = digits;
+        /**
+     * Initial counter value.
+     * @type {number}
+     */ this.counter = counter;
+    }
+}
+
+/**
+ * TOTP: Time-Based One-Time Password Algorithm.
+ * @see [RFC 6238](https://datatracker.ietf.org/doc/html/rfc6238)
+ */ class TOTP {
+    /**
+   * Default configuration.
+   * @type {{
+   *   issuer: string,
+   *   label: string,
+   *   issuerInLabel: boolean,
+   *   algorithm: string,
+   *   digits: number,
+   *   period: number
+   *   window: number
+   * }}
+   */ static get defaults() {
+        return {
+            issuer: "",
+            label: "OTPAuth",
+            issuerInLabel: true,
+            algorithm: "SHA1",
+            digits: 6,
+            period: 30,
+            window: 1
+        };
+    }
+    /**
+   * Calculates the counter. i.e. the number of periods since timestamp 0.
+   * @param {Object} [config] Configuration options.
+   * @param {number} [config.period=30] Token time-step duration.
+   * @param {number} [config.timestamp=Date.now] Timestamp value in milliseconds.
+   * @returns {number} Counter.
+   */ static counter({ period = TOTP.defaults.period, timestamp = Date.now() } = {}) {
+        return Math.floor(timestamp / 1000 / period);
+    }
+    /**
+   * Calculates the counter. i.e. the number of periods since timestamp 0.
+   * @param {Object} [config] Configuration options.
+   * @param {number} [config.timestamp=Date.now] Timestamp value in milliseconds.
+   * @returns {number} Counter.
+   */ counter({ timestamp = Date.now() } = {}) {
+        return TOTP.counter({
+            period: this.period,
+            timestamp
+        });
+    }
+    /**
+   * Calculates the remaining time in milliseconds until the next token is generated.
+   * @param {Object} [config] Configuration options.
+   * @param {number} [config.period=30] Token time-step duration.
+   * @param {number} [config.timestamp=Date.now] Timestamp value in milliseconds.
+   * @returns {number} counter.
+   */ static remaining({ period = TOTP.defaults.period, timestamp = Date.now() } = {}) {
+        return period * 1000 - timestamp % (period * 1000);
+    }
+    /**
+   * Calculates the remaining time in milliseconds until the next token is generated.
+   * @param {Object} [config] Configuration options.
+   * @param {number} [config.timestamp=Date.now] Timestamp value in milliseconds.
+   * @returns {number} counter.
+   */ remaining({ timestamp = Date.now() } = {}) {
+        return TOTP.remaining({
+            period: this.period,
+            timestamp
+        });
+    }
+    /**
+   * Generates a TOTP token.
+   * @param {Object} config Configuration options.
+   * @param {Secret} config.secret Secret key.
+   * @param {string} [config.algorithm='SHA1'] HMAC hashing algorithm.
+   * @param {number} [config.digits=6] Token length.
+   * @param {number} [config.period=30] Token time-step duration.
+   * @param {number} [config.timestamp=Date.now] Timestamp value in milliseconds.
+   * @returns {string} Token.
+   */ static generate({ secret, algorithm, digits, period = TOTP.defaults.period, timestamp = Date.now() }) {
+        return HOTP.generate({
+            secret,
+            algorithm,
+            digits,
+            counter: TOTP.counter({
+                period,
+                timestamp
+            })
+        });
+    }
+    /**
+   * Generates a TOTP token.
+   * @param {Object} [config] Configuration options.
+   * @param {number} [config.timestamp=Date.now] Timestamp value in milliseconds.
+   * @returns {string} Token.
+   */ generate({ timestamp = Date.now() } = {}) {
+        return TOTP.generate({
+            secret: this.secret,
+            algorithm: this.algorithm,
+            digits: this.digits,
+            period: this.period,
+            timestamp
+        });
+    }
+    /**
+   * Validates a TOTP token.
+   * @param {Object} config Configuration options.
+   * @param {string} config.token Token value.
+   * @param {Secret} config.secret Secret key.
+   * @param {string} [config.algorithm='SHA1'] HMAC hashing algorithm.
+   * @param {number} [config.digits=6] Token length.
+   * @param {number} [config.period=30] Token time-step duration.
+   * @param {number} [config.timestamp=Date.now] Timestamp value in milliseconds.
+   * @param {number} [config.window=1] Window of counter values to test.
+   * @returns {number|null} Token delta or null if it is not found in the search window, in which case it should be considered invalid.
+   */ static validate({ token, secret, algorithm, digits, period = TOTP.defaults.period, timestamp = Date.now(), window }) {
+        return HOTP.validate({
+            token,
+            secret,
+            algorithm,
+            digits,
+            counter: TOTP.counter({
+                period,
+                timestamp
+            }),
+            window
+        });
+    }
+    /**
+   * Validates a TOTP token.
+   * @param {Object} config Configuration options.
+   * @param {string} config.token Token value.
+   * @param {number} [config.timestamp=Date.now] Timestamp value in milliseconds.
+   * @param {number} [config.window=1] Window of counter values to test.
+   * @returns {number|null} Token delta or null if it is not found in the search window, in which case it should be considered invalid.
+   */ validate({ token, timestamp, window }) {
+        return TOTP.validate({
+            token,
+            secret: this.secret,
+            algorithm: this.algorithm,
+            digits: this.digits,
+            period: this.period,
+            timestamp,
+            window
+        });
+    }
+    /**
+   * Returns a Google Authenticator key URI.
+   * @returns {string} URI.
+   */ toString() {
+        const e = encodeURIComponent;
+        return "otpauth://totp/" + `${this.issuer.length > 0 ? this.issuerInLabel ? `${e(this.issuer)}:${e(this.label)}?issuer=${e(this.issuer)}&` : `${e(this.label)}?issuer=${e(this.issuer)}&` : `${e(this.label)}?`}` + `secret=${e(this.secret.base32)}&` + `algorithm=${e(this.algorithm)}&` + `digits=${e(this.digits)}&` + `period=${e(this.period)}`;
+    }
+    /**
+   * Creates a TOTP object.
+   * @param {Object} [config] Configuration options.
+   * @param {string} [config.issuer=''] Account provider.
+   * @param {string} [config.label='OTPAuth'] Account label.
+   * @param {boolean} [config.issuerInLabel=true] Include issuer prefix in label.
+   * @param {Secret|string} [config.secret=Secret] Secret key.
+   * @param {string} [config.algorithm='SHA1'] HMAC hashing algorithm.
+   * @param {number} [config.digits=6] Token length.
+   * @param {number} [config.period=30] Token time-step duration.
+   */ constructor({ issuer = TOTP.defaults.issuer, label = TOTP.defaults.label, issuerInLabel = TOTP.defaults.issuerInLabel, secret = new Secret(), algorithm = TOTP.defaults.algorithm, digits = TOTP.defaults.digits, period = TOTP.defaults.period } = {}){
+        /**
+     * Account provider.
+     * @type {string}
+     */ this.issuer = issuer;
+        /**
+     * Account label.
+     * @type {string}
+     */ this.label = label;
+        /**
+     * Include issuer prefix in label.
+     * @type {boolean}
+     */ this.issuerInLabel = issuerInLabel;
+        /**
+     * Secret key.
+     * @type {Secret}
+     */ this.secret = typeof secret === "string" ? Secret.fromBase32(secret) : secret;
+        /**
+     * HMAC hashing algorithm.
+     * @type {string}
+     */ this.algorithm = canonicalizeAlgorithm(algorithm);
+        /**
+     * Token length.
+     * @type {number}
+     */ this.digits = digits;
+        /**
+     * Token time-step duration.
+     * @type {number}
+     */ this.period = period;
+    }
+}
+
 class ProboPlaywright {
-    constructor(timeoutConfig = {}, page = null) {
+    constructor({ enableSmartSelectors = false, timeoutConfig = {}, debugLevel = ProboLogLevel.INFO }, page = null) {
         this.page = null;
-        // Merge provided config with defaults to ensure all properties are defined
+        this.params = {};
+        this.enableSmartSelectors = enableSmartSelectors;
         this.timeoutConfig = {
             ...DEFAULT_PLAYWRIGHT_TIMEOUT_CONFIG,
             ...timeoutConfig
         };
         this.setPage(page);
+        proboLogger.setLogLevel(debugLevel);
     }
     /**
-     * Sets the Playwright page instance for this ProboPlaywright instance.
-     * Also applies the configured default navigation and action timeouts to the page.
-     *
-     * @param page - The Playwright Page instance to use, or null to unset.
-     */
+    * Sets the Playwright page instance for this ProboPlaywright instance.
+    * Also applies the configured default navigation and action timeouts to the page.
+    *
+    * @param page - The Playwright Page instance to use, or null to unset.
+    */
     setPage(page) {
         this.page = page;
         if (this.page) {
@@ -2104,18 +3927,49 @@ class ProboPlaywright {
         }
     }
     /**
-     * Executes a single step in the test scenario with the specified action on the target element.
-     * Handles iframe navigation, element highlighting, and various Playwright actions like click, fill, validate, etc.
-     *
-     * @param params - Configuration object containing element selectors, action type, arguments, and display options
-     * @returns Promise that resolves to a result object for extract actions, or void for other actions
-     * @throws Error if element is not found or validation fails
+     * Sets the parameters object for template literal interpolation
+     * Stores a reference to the params object so mutations are automatically reflected
+     * @param params The parameters object containing values to use for interpolation
      */
+    setParams(params) {
+        this.params = params;
+    }
+    /**
+     * Interpolates a string using the current params and optional additional context
+     * @param str The string to interpolate (may contain ${variable} syntax)
+     * @param additionalContext Optional additional context to merge with params
+     * @returns The interpolated string
+     */
+    interpolate(str, additionalContext = {}) {
+        const context = { ...this.params, ...additionalContext };
+        return interpolateTemplate(str, context);
+    }
+    /**
+     * Executes a single step in the test scenario with the specified action on the target element.
+    * Handles iframe navigation, element highlighting, and various Playwright actions like click, fill, validate, etc.
+    *
+    * @param params - Configuration object containing element selectors, action type, arguments, and display options
+    * @returns Promise that resolves to a string for extract actions, boolean for assert actions, or void for other actions
+    * @throws Error if element is not found or validation fails
+    */
     async runStep(params) {
-        const { action, argument = '', iframeSelector = '', elementSelector = '', annotation = '', } = params;
+        let { action, argument = '', iframeSelector = '', elementSelector = '', smartSelector = null, smartIFrameSelector = null, annotation = '', } = params;
         // 0. Check that page is set
         if (!this.page) {
-            throw new Error('ProboPlaywright: Page is not set');
+            throw new Error('Page is not set');
+        }
+        // Interpolate argument if it's a string with template literals
+        if (typeof argument === 'string' && argument.includes('${')) {
+            argument = this.interpolate(argument);
+        }
+        else if (Array.isArray(argument)) {
+            // Handle array arguments (e.g., for UPLOAD_FILES or SELECT_DROPDOWN)
+            argument = argument.map((arg) => {
+                if (typeof arg === 'string' && arg.includes('${')) {
+                    return this.interpolate(arg);
+                }
+                return arg;
+            });
         }
         // 1. Check if we need to visit a url
         if (action === PlaywrightAction.VISIT_URL || action === PlaywrightAction.VISIT_BASE_URL) {
@@ -2147,10 +4001,11 @@ class ProboPlaywright {
         const startTime = Date.now();
         let locator;
         if (iframeSelector && iframeSelector.length > 0) {
-            locator = this.page.frameLocator(iframeSelector).locator(elementSelector);
+            const frameLocator = await this.getLocator(iframeSelector, smartIFrameSelector, true);
+            locator = await this.getLocator(elementSelector, smartSelector, false, frameLocator);
         }
         else {
-            locator = this.page.locator(elementSelector);
+            locator = await this.getLocator(elementSelector, smartSelector);
         }
         // Fail fast: immediately validate that the element exists for non-wait actions
         const locator_timeout = (action === PlaywrightAction.WAIT_FOR) ? params.timeout || 10000 : this.timeoutConfig.playwrightLocatorTimeout;
@@ -2158,7 +4013,25 @@ class ProboPlaywright {
             await locator.waitFor({ state: 'attached', timeout: locator_timeout });
         }
         catch (e) {
-            throw new Error(`Element not found with selector: ${elementSelector}${iframeSelector ? ` in iframe: ${iframeSelector}` : ''} after ${locator_timeout}ms`);
+            if (this.enableSmartSelectors) { //fallback to CSS selector
+                try {
+                    proboLogger.warn(`Element not found with smart selector: ${JSON.stringify(smartSelector)} ${smartIFrameSelector ? `with iframe smart selector: ${JSON.stringify(smartIFrameSelector)}` : ''}. Falling back to CSS selector`);
+                    if (iframeSelector && iframeSelector.length > 0) {
+                        const frameLocator = await this.getLocatorOrFrame(iframeSelector, true);
+                        locator = await this.getLocatorOrFrame(elementSelector, false, frameLocator);
+                    }
+                    else {
+                        locator = await this.getLocatorOrFrame(elementSelector, false);
+                    }
+                    await locator.waitFor({ state: 'attached', timeout: 200 }); //only small timeout is needed as we've already waited for the locator_timeout
+                }
+                catch (e) {
+                    throw new Error(`Element not found with CSS selector: ${elementSelector} ${iframeSelector ? `in iframe: ${iframeSelector}` : ''} after ${locator_timeout}ms`);
+                }
+            }
+            else {
+                throw new Error(`Element not found with CSS selector: ${elementSelector} ${iframeSelector ? `in iframe: ${iframeSelector}` : ''} after ${locator_timeout}ms`);
+            }
         }
         if (action === PlaywrightAction.HOVER) {
             const visibleLocator = await findClosestVisibleElement(locator);
@@ -2177,13 +4050,13 @@ class ProboPlaywright {
             case PlaywrightAction.CLICK:
             case PlaywrightAction.CHECK_CHECKBOX:
             case PlaywrightAction.SELECT_RADIO:
-                await this.robustClick(locator);
+                await this.robustMouseAction(locator, 'click');
                 break;
             case PlaywrightAction.FILL_IN:
                 await this.robustFill(locator, argument);
                 break;
             case PlaywrightAction.SELECT_DROPDOWN:
-                await locator.selectOption(argument);
+                await locator.selectOption(argument, { timeout: this.timeoutConfig.playwrightActionTimeout });
                 break;
             case PlaywrightAction.SET_SLIDER:
                 await this.setSliderValue(locator, argument);
@@ -2192,11 +4065,31 @@ class ProboPlaywright {
                 // till we figure out how to get the inbox name we will wait for ANY OTP in all inboxes  
                 const otp = await OTP.waitForOTP({ checkRecentMessagesSinceMs: 120000 });
                 if (otp) {
-                    console.log(`✅ OTP found: ${otp}`);
-                    await locator.fill(otp);
+                    proboLogger.log(`✅ OTP found: ${otp}`);
+                    await locator.fill(otp, { timeout: this.timeoutConfig.playwrightActionTimeout });
                 }
                 else {
-                    console.log(`❌ OTP not found`);
+                    proboLogger.log(`❌ OTP not found`);
+                }
+                break;
+            case PlaywrightAction.GEN_TOTP:
+                // Use secret from argument and auxiliary config (digits/algorithm) from totpConfig
+                const totpAux = params.totpConfig;
+                const secretArg = params.argument;
+                if (secretArg && totpAux) {
+                    try {
+                        const totpCode = this.generateOTP(secretArg, totpAux.digits || 6, totpAux.algorithm || 'SHA1');
+                        proboLogger.log(`✅ TOTP generated`);
+                        await locator.fill(totpCode, { timeout: this.timeoutConfig.playwrightActionTimeout });
+                    }
+                    catch (error) {
+                        proboLogger.error(`❌ TOTP generation failed: ${error}`);
+                        throw new Error(`TOTP generation failed: ${error}`);
+                    }
+                }
+                else {
+                    proboLogger.log(`❌ Missing TOTP argument or config`);
+                    throw new Error(`Missing TOTP argument or config`);
                 }
                 break;
             case PlaywrightAction.ASSERT_CONTAINS_VALUE:
@@ -2204,38 +4097,39 @@ class ProboPlaywright {
                 if (!matchRegex(containerText, argument)) {
                     throw new Error(`Validation failed. Expected text "${containerText}" to match "${argument}".`);
                 }
-                break;
+                return true; // Return true for successful assertion
             case PlaywrightAction.ASSERT_EXACT_VALUE:
                 const actualText = await this.getTextValue(locator);
                 if (actualText !== argument) {
                     throw new Error(`Validation failed. Expected text "${argument}", but got "${actualText}".`);
                 }
-                break;
+                return true; // Return true for successful assertion
             case PlaywrightAction.HOVER:
-                //console.log('HOVER', locator);
                 if (locator) {
-                    //console.log('executing HOVER on closest visible ancestor');
-                    await locator.hover();
+                    await this.robustMouseAction(locator, 'hover');
+                }
+                else {
+                    throw new Error('not executing HOVER because no visible ancestor found');
                 }
                 break;
             case PlaywrightAction.SCROLL_TO_ELEMENT:
                 //  Restore exact scroll positions from recording
                 const scrollData = JSON.parse(argument);
                 try {
-                    console.log('🔄 Restoring scroll position for container:', locator, 'scrollTop:', scrollData.scrollTop, 'scrollLeft:', scrollData.scrollLeft);
+                    proboLogger.log('🔄 Restoring scroll position for container:', locator, 'scrollTop:', scrollData.scrollTop, 'scrollLeft:', scrollData.scrollLeft);
                     await locator.evaluate((el, scrollData) => {
                         // el.scrollTop = scrollData.scrollTop;
                         // el.scrollLeft = scrollData.scrollLeft;
                         el.scrollTo({ left: scrollData.scrollLeft, top: scrollData.scrollTop, behavior: 'smooth' });
-                    }, { scrollTop: scrollData.scrollTop, scrollLeft: scrollData.scrollLeft }, { timeout: 2000 });
+                    }, { scrollTop: scrollData.scrollTop, scrollLeft: scrollData.scrollLeft }, { timeout: this.timeoutConfig.playwrightActionTimeout });
                 }
                 catch (e) {
-                    console.error('🔄 Failed to restore scroll position for container:', locator, 'scrollTop:', scrollData.scrollTop, 'scrollLeft:', scrollData.scrollLeft, 'error:', e);
+                    proboLogger.error('🔄 Failed to restore scroll position for container:', locator, 'scrollTop:', scrollData.scrollTop, 'scrollLeft:', scrollData.scrollLeft, 'error:', e);
                 }
                 await this.page.waitForTimeout(500);
                 break;
             case PlaywrightAction.UPLOAD_FILES:
-                await locator.setInputFiles(argument);
+                await locator.setInputFiles(argument, { timeout: this.timeoutConfig.playwrightActionTimeout });
                 break;
             case PlaywrightAction.EXTRACT_VALUE:
                 let extractedText = await this.getTextValue(locator);
@@ -2256,7 +4150,7 @@ class ProboPlaywright {
                             // Check if the text matches (using the same logic as ASSERT_CONTAINS_VALUE)
                             if (matchRegex(currentText, expectedText)) {
                                 textMatches = true;
-                                console.log(`✅ Wait for text completed successfully. Found: "${currentText}"`);
+                                proboLogger.log(`✅ Wait for text completed successfully. Found: "${currentText}"`);
                             }
                             else {
                                 // Text doesn't match yet, wait for the polling interval
@@ -2286,12 +4180,105 @@ class ProboPlaywright {
         }
     }
     /**
-     * Creates a visual highlight overlay on the target element with optional annotation text.
-     * The highlight appears as a red border around the element and can include descriptive text.
-     *
-     * @param locator - The Playwright locator for the element to highlight
-     * @param annotation - Optional text annotation to display above/below the highlighted element
+     * Public method to generate TOTP code using the provided secret, digits, and algorithm
+     * @param secret - The TOTP secret (base32 encoded)
+     * @param digits - Number of digits in the TOTP code (default: 6)
+     * @param algorithm - Hash algorithm to use (default: 'SHA1')
+     * @returns The generated TOTP code
      */
+    generateOTP(secret, digits = 6, algorithm = 'SHA1') {
+        const otp = new TOTP({
+            algorithm,
+            digits,
+            secret,
+        });
+        return otp.generate();
+    }
+    async getLocator(elementSelector, smartSelector, getIFrameLocator = false, frameLocator = null) {
+        if (!this.page) {
+            throw new Error('Page is not set');
+        }
+        if (this.enableSmartSelectors && smartSelector && Object.keys(smartSelector).length > 0) {
+            const { strategy, selector, index, label_selector } = smartSelector;
+            proboLogger.debug(`getLocator: smartSelector=${JSON.stringify(smartSelector)}`);
+            let labelLocator;
+            let combinedSelector;
+            let id;
+            const mainStrategy = smartSelector.strategy.split(' ')[0]; //extract the main strategy from the full strategy string
+            switch (mainStrategy) {
+                case 'role':
+                case 'placeholder':
+                case 'name':
+                case 'data-testid':
+                case 'id':
+                case 'css':
+                case 'class':
+                    proboLogger.debug(`getLocator: strategy=${mainStrategy}, index=${index}`);
+                    if (typeof index === 'number') {
+                        const matchedLocators = await this.getLocatorOrFrame(selector, getIFrameLocator, frameLocator);
+                        if (!getIFrameLocator) {
+                            proboLogger.debug(`getLocator: matched ${await matchedLocators.count()} elements`);
+                            for (const [index, element] of (await matchedLocators.all()).entries()) {
+                                // Get outerHTML
+                                const html = await element.evaluate(el => el.outerHTML);
+                                proboLogger.debug(`[${index}] ${html}`);
+                            }
+                        }
+                        return matchedLocators.nth(index);
+                    }
+                    else {
+                        return this.getLocatorOrFrame(selector, getIFrameLocator, frameLocator);
+                    }
+                case 'label':
+                    if (smartSelector.strategy === 'label for') {
+                        proboLogger.debug(`getLocator: strategy=${smartSelector.strategy}, label_selector=${label_selector}`);
+                        labelLocator = this.getLocatorOrFrame(label_selector, false, frameLocator);
+                        id = await labelLocator.getAttribute('for');
+                        proboLogger.debug(`getLocator: labelLocator.getAttribute('for')=${id}`);
+                        combinedSelector = selector ? `#${id} > ${selector}` : `#${id}`;
+                        proboLogger.debug(`getLocator: combinedSelector=${combinedSelector}`);
+                        return this.getLocatorOrFrame(combinedSelector, getIFrameLocator, frameLocator);
+                    }
+                    else if (smartSelector.strategy === 'label by') {
+                        proboLogger.debug(`getLocator: strategy=${smartSelector.strategy}, label_selector=${label_selector}`);
+                        labelLocator = this.getLocatorOrFrame(label_selector, false, frameLocator);
+                        id = await labelLocator.getAttribute('id');
+                        proboLogger.debug(`getLocator: labelLocator.getAttribute('id')=${id}`);
+                        combinedSelector = selector ? `[aria-labelledby="${id}"] > ${selector}` : `[aria-labelledby="${id}"]`;
+                        proboLogger.debug(`getLocator: combinedSelector=${combinedSelector}`);
+                        return this.getLocatorOrFrame(combinedSelector, getIFrameLocator, frameLocator);
+                    }
+                    else {
+                        throw new Error(`Unsupported label strategy: ${smartSelector.strategy}`);
+                    }
+                default:
+                    throw new Error(`Unsupported smart selector strategy: ${strategy}`);
+            }
+        }
+        // fallback to standard locator
+        return this.getLocatorOrFrame(elementSelector, getIFrameLocator, frameLocator);
+    }
+    getLocatorOrFrame(selector, getIFrameLocator, frameLocator = null) {
+        if (!this.page) {
+            throw new Error('Page is not set');
+        }
+        if (getIFrameLocator) {
+            proboLogger.debug(`getLocatorOrFrame: getting frame locator for selector=${selector}`);
+            if (frameLocator) {
+                throw new Error(`getLocatorOrFrame: frameLocator must be null when getIFrameLocator is true`);
+            }
+            return this.page.frameLocator(selector);
+        }
+        proboLogger.debug(`getLocatorOrFrame: ${frameLocator ? `frameLocator.locator("${selector}")` : `page.locator("${selector}")`}`);
+        return frameLocator ? frameLocator.locator(selector) : this.page.locator(selector);
+    }
+    /**
+    * Creates a visual highlight overlay on the target element with optional annotation text.
+    * The highlight appears as a red border around the element and can include descriptive text.
+    *
+    * @param locator - The Playwright locator for the element to highlight
+    * @param annotation - Optional text annotation to display above/below the highlighted element
+    */
     async highlight(locator, annotation = null) {
         try {
             await locator.evaluate((el) => {
@@ -2322,7 +4309,7 @@ class ProboPlaywright {
             }, { timeout: 500 });
         }
         catch (e) {
-            console.log('highlight: failed to run locator.evaluate()', e);
+            proboLogger.log('highlight: failed to run locator.evaluate()', e);
         }
         if (annotation) {
             await locator.evaluate((el, annotation) => {
@@ -2356,11 +4343,11 @@ class ProboPlaywright {
     }
     ;
     /**
-     * Removes the highlight overlay from the target element.
-     * Cleans up the visual highlighting created by the highlight method.
-     *
-     * @param locator - The Playwright locator for the element to unhighlight
-     */
+    * Removes the highlight overlay from the target element.
+    * Cleans up the visual highlighting created by the highlight method.
+    *
+    * @param locator - The Playwright locator for the element to unhighlight
+    */
     async unhighlight(locator) {
         try {
             await locator.evaluate((el) => {
@@ -2371,48 +4358,48 @@ class ProboPlaywright {
             }, { timeout: 500 });
         }
         catch (e) {
-            console.log('unhighlight: failed to run locator.evaluate()', e);
+            proboLogger.log('unhighlight: failed to run locator.evaluate()', e);
         }
     }
     ;
     /**
-     * Attempts to fill a form field with the specified value using multiple fallback strategies.
-     * First tries the standard fill method, then falls back to click + type if needed.
-     *
-     * @param locator - The Playwright locator for the input element
-     * @param value - The text value to fill into the input field
-     */
+    * Attempts to fill a form field with the specified value using multiple fallback strategies.
+    * First tries the standard fill method, then falls back to click + type if needed.
+    *
+    * @param locator - The Playwright locator for the input element
+    * @param value - The text value to fill into the input field
+    */
     async robustFill(locator, value) {
         if (!this.page) {
-            throw new Error('ProboPlaywright: Page is not set');
+            throw new Error('Page is not set');
         }
         try {
-            await locator.fill(value);
+            await locator.fill(value, { timeout: this.timeoutConfig.playwrightActionTimeout });
             return;
         }
         catch (err) {
-            console.warn('robustFill: failed to run locator.fill()', err);
+            proboLogger.warn('robustFill: failed to run locator.fill(), trying fallback', err);
         }
         // fallback: click and type
         try {
-            await locator.focus();
+            await locator.focus({ timeout: this.timeoutConfig.playwrightActionTimeout });
             await this.page.keyboard.type(value);
             return;
         }
         catch (err) {
-            console.warn('robustFill: failed to run locator.click() and page.keyboard.type()', err);
+            proboLogger.warn('robustFill: failed to run locator.focus() and page.keyboard.type()', err);
         }
     }
     ;
     async robustTypeKeys(value) {
         if (!this.page) {
-            throw new Error('ProboPlaywright: Page is not set');
+            throw new Error('Page is not set');
         }
         /* try {
-          await locator.press(value);
-          return;
+        await locator.press(value);
+        return;
         } catch (err) {
-          console.warn('robustTypeKeys: failed to run locator.type()', err);
+        proboLogger.warn('robustTypeKeys: failed to run locator.type()', err);
         } */
         // fallback: click and type
         try {
@@ -2421,69 +4408,98 @@ class ProboPlaywright {
             return;
         }
         catch (err) {
-            console.warn('robustTypeKeys: failed to run page.keyboard.type()', err);
+            proboLogger.warn('robustTypeKeys: failed to run page.keyboard.type()', err);
         }
     }
     /**
-     * Performs a robust click operation using multiple fallback strategies.
-     * Attempts standard click first, then mouse click at center coordinates, and finally native DOM events.
-     *
-     * @param locator - The Playwright locator for the element to click
-     * @throws Error if all click methods fail
-     */
-    async robustClick(locator) {
+    * Performs a robust mouse action (click or hover) using multiple fallback strategies.
+    * Attempts standard click first, then mouse click at center coordinates, and finally native DOM events.
+    *
+    * @param locator - The Playwright locator for the element to click
+    * @param action - The mouse action to perform ('click' or 'hover')
+    * @throws Error if all mouse action methods fail
+    */
+    async robustMouseAction(locator, action) {
         if (!this.page) {
-            throw new Error('ProboPlaywright: Page is not set');
+            throw new Error('Page is not set');
         }
         // start with a standard click
         try {
-            await locator.click({ noWaitAfter: false, timeout: this.timeoutConfig.playwrightActionTimeout });
+            if (action === 'click') {
+                await locator.click({ noWaitAfter: false, timeout: this.timeoutConfig.playwrightActionTimeout });
+            }
+            else if (action === 'hover') {
+                await locator.hover({ timeout: this.timeoutConfig.playwrightActionTimeout });
+            }
+            else {
+                throw new Error(`Unsupported mouse action: ${action}`);
+            }
             return;
         }
         catch (err) {
-            console.warn('robustClick: failed to run locator.click(), trying mouse.click()');
+            proboLogger.warn(`robustMouseAction: failed to run locator.${action}(), trying mouse.${action}()`);
         }
         // try clicking using mouse at the center of the element
         try {
             const bbox = await locator.boundingBox({ timeout: this.timeoutConfig.playwrightLocatorTimeout });
             if (bbox) {
-                await this.page.mouse.click(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
+                if (action === 'click') {
+                    await this.page.mouse.click(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
+                }
+                else if (action === 'hover') {
+                    await this.page.mouse.move(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
+                }
                 return;
             }
             else {
-                console.warn('robustClick: bounding box not found');
+                proboLogger.warn('robustMouseAction: bounding box not found');
             }
         }
         catch (err2) {
-            console.warn('robustClick: failed to run page.mouse.click()');
+            proboLogger.warn(`robustMouseAction: failed to run page.mouse.${action}(), trying dispatching an event`);
         }
         // fallback: dispatch native mouse events manually
         try {
-            await locator.evaluate((el) => {
-                ['mousedown', 'mouseup', 'click'].forEach(type => {
-                    const event = new MouseEvent(type, {
-                        bubbles: true,
-                        cancelable: true,
-                        view: window
+            if (action === 'click') {
+                await locator.evaluate((el) => {
+                    ['mousedown', 'mouseup', 'click'].forEach(type => {
+                        const event = new MouseEvent(type, {
+                            bubbles: true,
+                            cancelable: true,
+                            view: window
+                        });
+                        el.dispatchEvent(event);
                     });
-                    el.dispatchEvent(event);
-                });
-            }, { timeout: this.timeoutConfig.playwrightActionTimeout });
+                }, { timeout: this.timeoutConfig.playwrightActionTimeout });
+            }
+            else if (action === 'hover') {
+                await locator.evaluate((el) => {
+                    ['mouseenter', 'mouseover', 'focusin', 'focus'].forEach(type => {
+                        const event = new MouseEvent(type, {
+                            bubbles: true,
+                            cancelable: true,
+                            view: window
+                        });
+                        el.dispatchEvent(event);
+                    });
+                }, { timeout: this.timeoutConfig.playwrightActionTimeout });
+            }
         }
         catch (err3) {
-            console.error('robustClick: all click methods failed:', err3);
-            throw err3; // Re-throw final error if all fallbacks fail
+            proboLogger.error(`robustMouseAction: all ${action} methods failed:`);
+            // not re-throwing playwright errors as they are long and not useful for the user
+            throw new Error(`robustMouseAction: all ${action} methods failed`);
         }
     }
     ;
     /**
-     * Extracts text content from an element using multiple strategies.
-     * Tries textContent first, then inputValue, and finally looks for nested input elements.
-     * Returns normalized and trimmed text for consistent comparison.
-     *
-     * @param locator - The Playwright locator for the element to extract text from
-     * @returns Normalized text content with consistent whitespace handling
-     */
+    * Extracts text content from an element using multiple strategies.
+    * Tries textContent first, then inputValue, and finally looks for nested input elements.
+    * Returns normalized and trimmed text for consistent comparison.
+    *
+    * @param locator - The Playwright locator for the element to extract text from
+    * @returns Normalized text content with consistent whitespace handling
+    */
     async getTextValue(locator) {
         let textValue = await locator.textContent();
         if (!textValue) {
@@ -2491,7 +4507,7 @@ class ProboPlaywright {
                 textValue = await locator.inputValue();
             }
             catch (err) {
-                console.warn('getTextValue: failed to run locator.inputValue()', err);
+                // proboLogger.warn('getTextValue: failed to run locator.inputValue()', err);
             }
         }
         if (!textValue) {
@@ -2499,7 +4515,7 @@ class ProboPlaywright {
                 textValue = await locator.locator('input').inputValue();
             }
             catch (err) {
-                console.warn('getTextValue: failed to run locator.locator("input").inputValue()', err);
+                // proboLogger.warn('getTextValue: failed to run locator.locator("input").inputValue()', err);
             }
         }
         if (!textValue) {
@@ -2510,16 +4526,31 @@ class ProboPlaywright {
     }
     ;
     async setSliderValue(locator, value) {
-        await locator.evaluate((el, value) => {
-            el.value = value;
-            el.dispatchEvent(new Event('input', { bubbles: true }));
-            el.dispatchEvent(new Event('change', { bubbles: true }));
-        }, value, { timeout: this.timeoutConfig.playwrightActionTimeout });
+        try {
+            await locator.fill(value, { timeout: this.timeoutConfig.playwrightActionTimeout });
+            return;
+        }
+        catch (err) {
+            proboLogger.warn('setSliderValue: failed to run locator.fill(), trying fallback', err);
+        }
+        // fallback    
+        try {
+            await locator.focus();
+            await locator.evaluate((el, value) => {
+                el.value = value;
+                el.dispatchEvent(new Event('input', { bubbles: true }));
+                el.dispatchEvent(new Event('change', { bubbles: true }));
+            }, value, { timeout: this.timeoutConfig.playwrightActionTimeout });
+        }
+        catch (err) {
+            proboLogger.error('setSliderValue: failed to run locator.evaluate()', err);
+        }
     }
 } /* class ProboPlaywright */
 
 class Probo {
-    constructor({ scenarioName, token = '', apiUrl = '', enableConsoleLogs = false, logToConsole = true, logToFile = false, debugLevel = ProboLogLevel.INFO, aiModel = AIModel.AZURE_GPT4_MINI, timeoutConfig = {} }) {
+    constructor({ scenarioName, token = '', apiUrl = '', enableConsoleLogs = false, enableSmartSelectors = false, logToConsole = true, logToFile = false, debugLevel = ProboLogLevel.INFO, aiModel = AIModel.AZURE_GPT4_MINI, timeoutConfig = {} }) {
+        this.params = {};
         // Configure logger transports and level
         // configureLogger({ logToConsole, logToFile, level: debugLevel });
         proboLogger.setLogLevel(debugLevel);
@@ -2533,26 +4564,50 @@ class Probo {
             proboLogger.error("API endpoint wasn't provided. Pass 'apiUrl' or set PROBO_API_ENDPOINT");
             throw new Error('Probo API endpoint not provided');
         }
-        this.highlighter = new Highlighter(enableConsoleLogs);
+        this.highlighter = new Highlighter(enableSmartSelectors, enableConsoleLogs);
         this.apiClient = new ApiClient(apiEndPoint, apiKey);
+        this.debugLevel = debugLevel;
         this.enableConsoleLogs = enableConsoleLogs;
         this.scenarioName = scenarioName;
         this.aiModel = aiModel;
+        this.enableSmartSelectors = enableSmartSelectors;
         this.timeoutConfig = { ...DEFAULT_PLAYWRIGHT_TIMEOUT_CONFIG, ...timeoutConfig };
         // set the log level for the api client
-        apiLogger.setLogLevel(debugLevel);
+        apiLogger.setLogLevel(this.debugLevel);
         proboLogger.info(`Initializing: scenario=${scenarioName}, apiUrl=${apiEndPoint}, ` +
             `enableConsoleLogs=${enableConsoleLogs}, debugLevel=${debugLevel}, aiModel=${aiModel}`);
     }
-    async askAI(page, question, options) {
+    /**
+     * Sets the parameters object for template literal interpolation
+     * Stores a reference to the params object so mutations are automatically reflected
+     * @param params The parameters object containing values to use for interpolation
+     */
+    setParams(params) {
+        this.params = params;
+    }
+    /**
+     * Interpolates a string using the current params and optional additional context
+     * @param str The string to interpolate (may contain ${variable} syntax)
+     * @param additionalContext Optional additional context to merge with params
+     * @returns The interpolated string
+     */
+    interpolate(str, additionalContext = {}) {
+        const context = { ...this.params, ...additionalContext };
+        return interpolateTemplate(str, context);
+    }
+    async askAI(page, question, options, assertAnswer = '') {
         var _a, _b;
-        const response = await this.askAIHelper(page, question, options);
+        const response = await this.askAIHelper(page, question, options, assertAnswer);
         if ((_a = response === null || response === void 0 ? void 0 : response.result) === null || _a === void 0 ? void 0 : _a.error) {
             throw new Error(response.result.error);
         }
         return (_b = response === null || response === void 0 ? void 0 : response.result) === null || _b === void 0 ? void 0 : _b.answer;
     }
     async runStep(page, stepPrompt, argument = null, options = { aiModel: this.aiModel, timeoutConfig: this.timeoutConfig }) {
+        // Interpolate argument if it's a string with template literals
+        if (typeof argument === 'string' && argument.includes('${')) {
+            argument = this.interpolate(argument);
+        }
         const runStepStartTime = Date.now();
         try {
             // Determine which AI model to use for this step
@@ -2623,7 +4678,7 @@ class Probo {
             proboLogger.debug(`⏱️  findBestCandidateElement took ${findBestCandidateTime}ms`);
             proboLogger.debug(`AI selected candidate element at index: ${index}`);
             // STEP 8: Find the actual element object from the candidates
-            const actualElement = candidate_elements.find(element => Number(element.index) === index);
+            const actualElement = candidate_elements.find(element => element.index === index);
             if (!actualElement) {
                 throw new Error(`No candidate element found with index ${index}. Available indices: ${candidate_elements.map(e => e.index).join(', ')}`);
             }
@@ -2662,11 +4717,17 @@ class Probo {
         proboLogger.log(`Found existing step with ID: ${result.id} going to perform action: ${result.action} with value: ${actionArgument}`);
         try {
             // Create ProboPlaywright instance with the page
-            const proboPlaywright = new ProboPlaywright(this.timeoutConfig, page);
+            const proboPlaywright = new ProboPlaywright({
+                enableSmartSelectors: this.enableSmartSelectors,
+                debugLevel: this.debugLevel,
+                timeoutConfig: this.timeoutConfig
+            }, page);
             // Call runStep with the cached action
             const runStepResult = await proboPlaywright.runStep({
                 iframeSelector: result.iframe_selector,
                 elementSelector: result.element_css_selector,
+                smartSelector: result.smart_selector,
+                smartIFrameSelector: result.smart_iframe_selector,
                 action: result.action,
                 argument: actionArgument,
             });
@@ -2710,8 +4771,8 @@ class Probo {
     async unhighlightElements(page) {
         return this.highlighter.unhighlightElements(page);
     }
-    async highlightElement(page, element_css_selector, iframe_selector, element_index) {
-        return this.highlighter.highlightElement(page, element_css_selector, iframe_selector, element_index);
+    async highlightElement(page, element_css_selector, iframe_selector, smart_selector, smart_iframe_selector, element_index) {
+        return this.highlighter.highlightElement(page, element_css_selector, iframe_selector, smart_selector, smart_iframe_selector, element_index);
     }
     async waitForMutationsToSettle(page, timeout, initTimeout) {
         const mutationTimeout = timeout !== null && timeout !== void 0 ? timeout : DEFAULT_PLAYWRIGHT_TIMEOUT_CONFIG.mutationsTimeout;
@@ -2721,7 +4782,7 @@ class Probo {
     async screenshot(page) {
         proboLogger.debug(`taking screenshot of current page: ${page.url()}`);
         // await page.evaluate(() => document.fonts?.ready.catch(() => {}));
-        const screenshot_bytes = await page.screenshot({ fullPage: true, animations: 'disabled' });
+        const screenshot_bytes = await page.screenshot({ fullPage: true, animations: 'disabled', timeout: 10000 });
         // make an api call to upload the screenshot to cloud
         proboLogger.debug('uploading image data to cloud');
         const screenshot_url = await this.apiClient.uploadScreenshot(screenshot_bytes);
@@ -2732,17 +4793,25 @@ class Probo {
         const element_css_selector = actualElement.css_selector;
         const iframe_selector = actualElement.iframe_selector;
         const element_index = actualElement.index;
-        proboLogger.debug('Handling perform action:', action);
+        const smart_selector = actualElement.smart_selector;
+        const smart_iframe_selector = actualElement.smart_iframe_selector;
+        proboLogger.debug('Handling perform action:', { action, element_css_selector, iframe_selector, smart_selector, smart_iframe_selector, element_index });
         if (action !== PlaywrightAction.VISIT_URL) {
             await this.unhighlightElements(page);
             proboLogger.debug('Unhighlighted elements');
-            await this.highlightElement(page, element_css_selector, iframe_selector, element_index);
+            await this.highlightElement(page, element_css_selector, iframe_selector, smart_selector, smart_iframe_selector, element_index);
             proboLogger.debug('Highlighted element');
         }
         const pre_action_screenshot_url = await this.screenshot(page);
-        const returnValue = await new ProboPlaywright(this.timeoutConfig, page).runStep({
+        const returnValue = await new ProboPlaywright({
+            enableSmartSelectors: this.enableSmartSelectors,
+            debugLevel: this.debugLevel,
+            timeoutConfig: this.timeoutConfig
+        }, page).runStep({
             iframeSelector: iframe_selector,
             elementSelector: element_css_selector,
+            smartSelector: smart_selector,
+            smartIFrameSelector: smart_iframe_selector,
             action: action,
             argument: value,
             highlightTimeout: 0
@@ -2756,7 +4825,8 @@ class Probo {
         });
         return returnValue;
     }
-    async askAIHelper(page, question, options) {
+    async askAIHelper(page, question, options, assertAnswer = '') {
+        var _a, _b;
         // Set default value for createStep to true if not provided
         const createStep = (options === null || options === void 0 ? void 0 : options.createStep) !== undefined ? options.createStep : true;
         const stepId = options === null || options === void 0 ? void 0 : options.stepId;
@@ -2824,6 +4894,14 @@ class Probo {
                 proboLogger.debug(`✅ [askAI] Step created successfully with ID: ${stepId}`);
             }
             // Return the answer from the result, or the reasoning if no answer
+            if (assertAnswer) {
+                const actualAnswer = (_b = (_a = serverResponse === null || serverResponse === void 0 ? void 0 : serverResponse.result) === null || _a === void 0 ? void 0 : _a.answer) === null || _b === void 0 ? void 0 : _b.toString();
+                const interpolatedAssertAnswer = this.interpolate(assertAnswer);
+                if (actualAnswer !== interpolatedAssertAnswer) {
+                    proboLogger.error(`❌ [askAI] Expected answer to be ${interpolatedAssertAnswer}, but got ${actualAnswer}`);
+                    throw new Error(`Expected answer to be ${interpolatedAssertAnswer}, but got ${actualAnswer}`);
+                }
+            }
             return serverResponse;
         }
         catch (error) {
@@ -2833,5 +4911,5 @@ class Probo {
     }
 }
 
-export { Highlighter, NavTracker, OTP, PlaywrightAction, Probo, ProboLogLevel, ProboPlaywright, findClosestVisibleElement };
+export { AIModel, Highlighter, NavTracker, OTP, PlaywrightAction, Probo, ProboLogLevel, ProboPlaywright, findClosestVisibleElement };
 //# sourceMappingURL=index.js.map