@browserbasehq/stagehand 1.0.1

package/dist/dom/build/index.js

@@ -0,0 +1,474 @@
+(() => {
+  // lib/dom/process.ts
+  async function processDom(chunksSeen) {
+    const { chunk, chunksArray } = await pickChunk(chunksSeen);
+    const { outputString, selectorMap } = await processElements2(chunk);
+    console.log(
+      `Stagehand (Browser Process): Extracted dom elements:
+${outputString}`
+    );
+    return {
+      outputString,
+      selectorMap,
+      chunk,
+      chunks: chunksArray
+    };
+  }
+  async function processAllOfDom() {
+    console.log("Stagehand (Browser Process): Processing all of DOM");
+    const viewportHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+    const totalChunks = Math.ceil(documentHeight / viewportHeight);
+    let index = 0;
+    const results = [];
+    for (let chunk = 0; chunk < totalChunks; chunk++) {
+      const result = await processElements2(chunk, true, index);
+      results.push(result);
+      index += Object.keys(result.selectorMap).length;
+    }
+    await scrollToHeight(0);
+    const allOutputString = results.map((result) => result.outputString).join("");
+    const allSelectorMap = results.reduce(
+      (acc, result) => ({ ...acc, ...result.selectorMap }),
+      {}
+    );
+    console.log(
+      `Stagehand (Browser Process): All dom elements: ${allOutputString}`
+    );
+    return {
+      outputString: allOutputString,
+      selectorMap: allSelectorMap
+    };
+  }
+  async function scrollToHeight(height) {
+    window.scrollTo({ top: height, left: 0, behavior: "smooth" });
+    await new Promise((resolve) => {
+      let scrollEndTimer;
+      const handleScrollEnd = () => {
+        clearTimeout(scrollEndTimer);
+        scrollEndTimer = window.setTimeout(() => {
+          window.removeEventListener("scroll", handleScrollEnd);
+          resolve();
+        }, 200);
+      };
+      window.addEventListener("scroll", handleScrollEnd, { passive: true });
+      handleScrollEnd();
+    });
+  }
+  async function processElements2(chunk, scrollToChunk = true, indexOffset = 0) {
+    console.time("processElements:total");
+    const viewportHeight = window.innerHeight;
+    const chunkHeight = viewportHeight * chunk;
+    const maxScrollTop = document.documentElement.scrollHeight - window.innerHeight;
+    const offsetTop = Math.min(chunkHeight, maxScrollTop);
+    if (scrollToChunk) {
+      console.time("processElements:scroll");
+      await scrollToHeight(offsetTop);
+      console.timeEnd("processElements:scroll");
+    }
+    const candidateElements = [];
+    const DOMQueue = [...document.body.childNodes];
+    const xpathCache = /* @__PURE__ */ new Map();
+    console.log("Stagehand (Browser Process): Generating candidate elements");
+    console.time("processElements:findCandidates");
+    while (DOMQueue.length > 0) {
+      const element = DOMQueue.pop();
+      let shouldAddElement = false;
+      if (element && isElementNode(element)) {
+        const childrenCount = element.childNodes.length;
+        for (let i = childrenCount - 1; i >= 0; i--) {
+          const child = element.childNodes[i];
+          DOMQueue.push(child);
+        }
+        if (isInteractiveElement(element)) {
+          if (isActive(element) && isVisible(element)) {
+            shouldAddElement = true;
+          }
+        }
+        if (isLeafElement(element)) {
+          if (isActive(element) && isVisible(element)) {
+            shouldAddElement = true;
+          }
+        }
+      }
+      if (element && isTextNode(element) && isTextVisible(element)) {
+        shouldAddElement = true;
+      }
+      if (shouldAddElement) {
+        candidateElements.push(element);
+      }
+    }
+    console.timeEnd("processElements:findCandidates");
+    const selectorMap = {};
+    let outputString = "";
+    console.log(
+      `Stagehand (Browser Process): Processing candidate elements: ${candidateElements.length}`
+    );
+    console.time("processElements:processCandidates");
+    candidateElements.forEach((element, index) => {
+      let xpath = xpathCache.get(element);
+      if (!xpath) {
+        xpath = generateXPath(element);
+        xpathCache.set(element, xpath);
+      }
+      if (isTextNode(element)) {
+        const textContent = element.textContent?.trim();
+        if (textContent) {
+          outputString += `${index + indexOffset}:${textContent}
+`;
+        }
+      } else if (isElementNode(element)) {
+        const tagName = element.tagName.toLowerCase();
+        const attributes = collectEssentialAttributes(element);
+        const openingTag = `<${tagName}${attributes ? " " + attributes : ""}>`;
+        const closingTag = `</${tagName}>`;
+        const textContent = element.textContent?.trim() || "";
+        outputString += `${index + indexOffset}:${openingTag}${textContent}${closingTag}
+`;
+      }
+      selectorMap[index + indexOffset] = xpath;
+    });
+    console.timeEnd("processElements:processCandidates");
+    console.timeEnd("processElements:total");
+    return {
+      outputString,
+      selectorMap
+    };
+  }
+  function collectEssentialAttributes(element) {
+    const essentialAttributes = [
+      "id",
+      "class",
+      "href",
+      "src",
+      "aria-label",
+      "aria-name",
+      "aria-role",
+      "aria-description",
+      "aria-expanded",
+      "aria-haspopup"
+    ];
+    const attrs = essentialAttributes.map((attr) => {
+      const value = element.getAttribute(attr);
+      return value ? `${attr}="${value}"` : "";
+    }).filter((attr) => attr !== "");
+    Array.from(element.attributes).forEach((attr) => {
+      if (attr.name.startsWith("data-")) {
+        attrs.push(`${attr.name}="${attr.value}"`);
+      }
+    });
+    return attrs.join(" ");
+  }
+  window.processDom = processDom;
+  window.processAllOfDom = processAllOfDom;
+  window.processElements = processElements2;
+  window.scrollToHeight = scrollToHeight;
+  function generateXPath(element) {
+    if (isElementNode(element) && element.id) {
+      return `//*[@id='${element.id}']`;
+    }
+    const parts = [];
+    while (element && (isTextNode(element) || isElementNode(element))) {
+      let index = 0;
+      let hasSameTypeSiblings = false;
+      const siblings = element.parentElement ? Array.from(element.parentElement.childNodes) : [];
+      for (let i = 0; i < siblings.length; i++) {
+        const sibling = siblings[i];
+        if (sibling.nodeType === element.nodeType && sibling.nodeName === element.nodeName) {
+          index = index + 1;
+          hasSameTypeSiblings = true;
+          if (sibling.isSameNode(element)) {
+            break;
+          }
+        }
+      }
+      if (element.nodeName !== "#text") {
+        const tagName = element.nodeName.toLowerCase();
+        const pathIndex = hasSameTypeSiblings ? `[${index}]` : "";
+        parts.unshift(`${tagName}${pathIndex}`);
+      }
+      element = element.parentElement;
+    }
+    return parts.length ? `/${parts.join("/")}` : "";
+  }
+  var leafElementDenyList = ["SVG", "IFRAME", "SCRIPT", "STYLE", "LINK"];
+  var interactiveElementTypes = [
+    "A",
+    "BUTTON",
+    "DETAILS",
+    "EMBED",
+    "INPUT",
+    "LABEL",
+    "MENU",
+    "MENUITEM",
+    "OBJECT",
+    "SELECT",
+    "TEXTAREA",
+    "SUMMARY"
+  ];
+  var interactiveRoles = [
+    "button",
+    "menu",
+    "menuitem",
+    "link",
+    "checkbox",
+    "radio",
+    "slider",
+    "tab",
+    "tabpanel",
+    "textbox",
+    "combobox",
+    "grid",
+    "listbox",
+    "option",
+    "progressbar",
+    "scrollbar",
+    "searchbox",
+    "switch",
+    "tree",
+    "treeitem",
+    "spinbutton",
+    "tooltip"
+  ];
+  var interactiveAriaRoles = ["menu", "menuitem", "button"];
+  function isElementNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+  }
+  function isTextNode(node) {
+    const trimmedText = node.textContent?.trim().replace(/\s/g, "");
+    return node.nodeType === Node.TEXT_NODE && trimmedText !== "";
+  }
+  var isVisible = (element) => {
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0 || rect.top < 0 || rect.top > window.innerHeight) {
+      return false;
+    }
+    if (!isTopElement(element, rect)) {
+      return false;
+    }
+    const visible = element.checkVisibility({
+      checkOpacity: true,
+      checkVisibilityCSS: true
+    });
+    return visible;
+  };
+  var isTextVisible = (element) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const rect = range.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0 || rect.top < 0 || rect.top > window.innerHeight) {
+      return false;
+    }
+    const parent = element.parentElement;
+    if (!parent) {
+      return false;
+    }
+    if (!isTopElement(parent, rect)) {
+      return false;
+    }
+    const visible = parent.checkVisibility({
+      checkOpacity: true,
+      checkVisibilityCSS: true
+    });
+    return visible;
+  };
+  function isTopElement(elem, rect) {
+    const points = [
+      { x: rect.left + rect.width * 0.25, y: rect.top + rect.height * 0.25 },
+      { x: rect.left + rect.width * 0.75, y: rect.top + rect.height * 0.25 },
+      { x: rect.left + rect.width * 0.25, y: rect.top + rect.height * 0.75 },
+      { x: rect.left + rect.width * 0.75, y: rect.top + rect.height * 0.75 },
+      { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+    ];
+    return points.some((point) => {
+      const topEl = document.elementFromPoint(point.x, point.y);
+      let current = topEl;
+      while (current && current !== document.body) {
+        if (current.isSameNode(elem)) {
+          return true;
+        }
+        current = current.parentElement;
+      }
+      return false;
+    });
+  }
+  var isActive = (element) => {
+    if (element.hasAttribute("disabled") || element.hasAttribute("hidden") || element.getAttribute("aria-disabled") === "true") {
+      return false;
+    }
+    return true;
+  };
+  var isInteractiveElement = (element) => {
+    const elementType = element.tagName;
+    const elementRole = element.getAttribute("role");
+    const elementAriaRole = element.getAttribute("aria-role");
+    return elementType && interactiveElementTypes.includes(elementType) || elementRole && interactiveRoles.includes(elementRole) || elementAriaRole && interactiveAriaRoles.includes(elementAriaRole);
+  };
+  var isLeafElement = (element) => {
+    if (element.textContent === "") {
+      return false;
+    }
+    if (element.childNodes.length === 0) {
+      return !leafElementDenyList.includes(element.tagName);
+    }
+    if (element.childNodes.length === 1 && isTextNode(element.childNodes[0])) {
+      return true;
+    }
+    return false;
+  };
+  async function pickChunk(chunksSeen) {
+    const viewportHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+    const chunks = Math.ceil(documentHeight / viewportHeight);
+    const chunksArray = Array.from({ length: chunks }, (_, i) => i);
+    const chunksRemaining = chunksArray.filter((chunk2) => {
+      return !chunksSeen.includes(chunk2);
+    });
+    const currentScrollPosition = window.scrollY;
+    const closestChunk = chunksRemaining.reduce((closest, current) => {
+      const currentChunkTop = viewportHeight * current;
+      const closestChunkTop = viewportHeight * closest;
+      return Math.abs(currentScrollPosition - currentChunkTop) < Math.abs(currentScrollPosition - closestChunkTop) ? current : closest;
+    }, chunksRemaining[0]);
+    const chunk = closestChunk;
+    if (chunk === void 0) {
+      throw new Error(`No chunks remaining to check: ${chunksRemaining}`);
+    }
+    return {
+      chunk,
+      chunksArray
+    };
+  }
+
+  // lib/dom/utils.ts
+  async function waitForDomSettle() {
+    return new Promise((resolve) => {
+      const createTimeout = () => {
+        return setTimeout(() => {
+          resolve();
+        }, 2e3);
+      };
+      let timeout = createTimeout();
+      const observer = new MutationObserver(() => {
+        clearTimeout(timeout);
+        timeout = createTimeout();
+      });
+      observer.observe(window.document.body, { childList: true, subtree: true });
+    });
+  }
+  window.waitForDomSettle = waitForDomSettle;
+
+  // lib/dom/debug.ts
+  async function debugDom() {
+    window.chunkNumber = 0;
+    const { selectorMap, outputString } = await window.processElements(
+      window.chunkNumber
+    );
+    drawChunk(selectorMap);
+    setupChunkNav();
+  }
+  function drawChunk(selectorMap) {
+    cleanupMarkers();
+    Object.entries(selectorMap).forEach(([_index, selector]) => {
+      const element = document.evaluate(
+        selector,
+        document,
+        null,
+        XPathResult.FIRST_ORDERED_NODE_TYPE,
+        null
+      ).singleNodeValue;
+      if (element) {
+        let rect;
+        if (element.nodeType === Node.ELEMENT_NODE) {
+          rect = element.getBoundingClientRect();
+        } else {
+          const range = document.createRange();
+          range.selectNodeContents(element);
+          rect = range.getBoundingClientRect();
+        }
+        const color = "grey";
+        const overlay = document.createElement("div");
+        overlay.style.position = "absolute";
+        overlay.style.left = `${rect.left + window.scrollX}px`;
+        overlay.style.top = `${rect.top + window.scrollY}px`;
+        overlay.style.padding = "2px";
+        overlay.style.width = `${rect.width}px`;
+        overlay.style.height = `${rect.height}px`;
+        overlay.style.backgroundColor = color;
+        overlay.className = "stagehand-marker";
+        overlay.style.opacity = "0.3";
+        overlay.style.zIndex = "1000000000";
+        overlay.style.border = "1px solid";
+        overlay.style.pointerEvents = "none";
+        document.body.appendChild(overlay);
+      }
+    });
+  }
+  async function cleanupDebug() {
+    cleanupMarkers();
+    cleanupNav();
+  }
+  function cleanupMarkers() {
+    const markers = document.querySelectorAll(".stagehand-marker");
+    markers.forEach((marker) => {
+      marker.remove();
+    });
+  }
+  function cleanupNav() {
+    const stagehandNavElements = document.querySelectorAll(".stagehand-nav");
+    stagehandNavElements.forEach((element) => {
+      element.remove();
+    });
+  }
+  function setupChunkNav() {
+    const viewportHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+    const totalChunks = Math.ceil(documentHeight / viewportHeight);
+    if (window.chunkNumber > 0) {
+      const prevChunkButton = document.createElement("button");
+      prevChunkButton.className = "stagehand-nav";
+      prevChunkButton.textContent = "Previous";
+      prevChunkButton.style.marginLeft = "50px";
+      prevChunkButton.style.position = "fixed";
+      prevChunkButton.style.bottom = "10px";
+      prevChunkButton.style.left = "50%";
+      prevChunkButton.style.transform = "translateX(-50%)";
+      prevChunkButton.style.zIndex = "1000000000";
+      prevChunkButton.onclick = async () => {
+        cleanupMarkers();
+        cleanupNav();
+        window.chunkNumber -= 1;
+        window.scrollTo(0, window.chunkNumber * window.innerHeight);
+        await window.waitForDomSettle();
+        const { selectorMap } = await processElements(window.chunkNumber);
+        drawChunk(selectorMap);
+        setupChunkNav();
+      };
+      document.body.appendChild(prevChunkButton);
+    }
+    if (totalChunks > window.chunkNumber) {
+      const nextChunkButton = document.createElement("button");
+      nextChunkButton.className = "stagehand-nav";
+      nextChunkButton.textContent = "Next";
+      nextChunkButton.style.marginRight = "50px";
+      nextChunkButton.style.position = "fixed";
+      nextChunkButton.style.bottom = "10px";
+      nextChunkButton.style.right = "50%";
+      nextChunkButton.style.transform = "translateX(50%)";
+      nextChunkButton.style.zIndex = "1000000000";
+      nextChunkButton.onclick = async () => {
+        cleanupMarkers();
+        cleanupNav();
+        window.chunkNumber += 1;
+        window.scrollTo(0, window.chunkNumber * window.innerHeight);
+        await window.waitForDomSettle();
+        const { selectorMap } = await processElements(window.chunkNumber);
+        drawChunk(selectorMap);
+        setupChunkNav();
+      };
+      document.body.appendChild(nextChunkButton);
+    }
+  }
+  window.debugDom = debugDom;
+  window.cleanupDebug = cleanupDebug;
+})();