@page-agent/page-controller 1.6.3 → 1.7.1

package/dist/lib/PageController.d.ts

@@ -20,7 +20,10 @@ export declare interface BrowserState {
 declare function cleanUpHighlights(): void;
 
 /**
- * Simulate a click on the element
+ * Simulate a full click following W3C Pointer Events + UI Events spec order:
+ * pointerover/enter → mouseover/enter → pointerdown → mousedown → [focus] →
+ * pointerup → mouseup → click
+ *
  * @private Internal method, subject to change at any time.
  */
 export declare function clickElement(element: HTMLElement): Promise<void>;
@@ -45,6 +48,11 @@ declare interface DomConfig {
     includeAttributes?: string[];
     highlightOpacity?: number;
     highlightLabelOpacity?: number;
+    /**
+     * Preserve semantic landmark tags in dehydrated output even if not interactive
+     * @note maybe confusing for LLM combining with page scrolling, use with caution
+     **/
+    keepSemanticTags?: boolean;
 }
 
 declare type DomNode = TextDomNode | ElementDomNode | InteractiveElementDomNode;
@@ -92,7 +100,7 @@ declare interface FlatDomTree {
  *
  * @todo 数据脱敏过滤器
  */
-declare function flatTreeToString(flatTree: FlatDomTree, includeAttributes?: string[]): string;
+declare function flatTreeToString(flatTree: FlatDomTree, includeAttributes?: string[], keepSemanticTags?: boolean): string;
 
 declare const getAllTextTillNextClickableElement: (node: TreeNode, maxDepth?: number) => string;
 
@@ -253,20 +261,14 @@ export declare interface PageControllerConfig extends dom.DomConfig {
 
 declare function resolveViewportExpansion(viewportExpansion?: number): number;
 
-/**
- * @private Internal method, subject to change at any time.
- */
-export declare function scrollHorizontally(right: boolean, scroll_amount: number, element?: HTMLElement | null): Promise<string>;
+export declare function scrollHorizontally(scroll_amount: number, element?: HTMLElement | null): Promise<string>;
 
 /**
  * @private Internal method, subject to change at any time.
  */
 export declare function scrollIntoViewIfNeeded(element: Element): Promise<void>;
 
-/**
- * @private Internal method, subject to change at any time.
- */
-export declare function scrollVertically(down: boolean, scroll_amount: number, element?: HTMLElement | null): Promise<string>;
+export declare function scrollVertically(scroll_amount: number, element?: HTMLElement | null): Promise<string>;
 
 /**
  * @todo browser-use version is very complex and supports menu tags, need to follow up

package/dist/lib/{SimulatorMask-BHnQ6LmL.js → SimulatorMask-CU7szDjy.js}

@@ -192,8 +192,9 @@ const cursorStyles = {
   cursorRipple,
   clicking
 };
-const _SimulatorMask = class _SimulatorMask {
+const _SimulatorMask = class _SimulatorMask extends EventTarget {
   constructor() {
+    super();
     __privateAdd(this, _SimulatorMask_instances);
     __publicField(this, "shown", false);
     __publicField(this, "wrapper", document.createElement("div"));
@@ -249,12 +250,28 @@ const _SimulatorMask = class _SimulatorMask {
     __privateMethod(this, _SimulatorMask_instances, createCursor_fn).call(this);
     document.body.appendChild(this.wrapper);
     __privateMethod(this, _SimulatorMask_instances, moveCursorToTarget_fn).call(this);
-    window.addEventListener("PageAgent::MovePointerTo", (event) => {
+    const movePointerToListener = /* @__PURE__ */ __name((event) => {
       const { x, y } = event.detail;
       this.setCursorPosition(x, y);
-    });
-    window.addEventListener("PageAgent::ClickPointer", (event) => {
+    }, "movePointerToListener");
+    const clickPointerListener = /* @__PURE__ */ __name(() => {
       this.triggerClickAnimation();
+    }, "clickPointerListener");
+    const enablePassThroughListener = /* @__PURE__ */ __name(() => {
+      this.wrapper.style.pointerEvents = "none";
+    }, "enablePassThroughListener");
+    const disablePassThroughListener = /* @__PURE__ */ __name(() => {
+      this.wrapper.style.pointerEvents = "auto";
+    }, "disablePassThroughListener");
+    window.addEventListener("PageAgent::MovePointerTo", movePointerToListener);
+    window.addEventListener("PageAgent::ClickPointer", clickPointerListener);
+    window.addEventListener("PageAgent::EnablePassThrough", enablePassThroughListener);
+    window.addEventListener("PageAgent::DisablePassThrough", disablePassThroughListener);
+    this.addEventListener("dispose", () => {
+      window.removeEventListener("PageAgent::MovePointerTo", movePointerToListener);
+      window.removeEventListener("PageAgent::ClickPointer", clickPointerListener);
+      window.removeEventListener("PageAgent::EnablePassThrough", enablePassThroughListener);
+      window.removeEventListener("PageAgent::DisablePassThrough", disablePassThroughListener);
     });
   }
   setCursorPosition(x, y) {
@@ -290,8 +307,10 @@ const _SimulatorMask = class _SimulatorMask {
     }, 800);
   }
   dispose() {
+    console.log("dispose SimulatorMask");
     this.motion?.dispose();
     this.wrapper.remove();
+    this.dispatchEvent(new Event("dispose"));
   }
 };
 _cursor = new WeakMap();
@@ -341,4 +360,4 @@ let SimulatorMask = _SimulatorMask;
 export {
   SimulatorMask
 };
-//# sourceMappingURL=SimulatorMask-BHnQ6LmL.js.map
+//# sourceMappingURL=SimulatorMask-CU7szDjy.js.map

package/dist/lib/SimulatorMask-CU7szDjy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimulatorMask-CU7szDjy.js","sources":["../../src/mask/checkDarkMode.ts","../../src/mask/SimulatorMask.ts"],"sourcesContent":["/**\n * Checks for common dark mode CSS classes on the html or body elements.\n * @returns {boolean} - True if a common dark mode class is found.\n */\nfunction hasDarkModeClass() {\n\tconst DEFAULT_DARK_MODE_CLASSES = ['dark', 'dark-mode', 'theme-dark', 'night', 'night-mode']\n\n\tconst htmlElement = document.documentElement\n\tconst bodyElement = document.body || document.documentElement // can be null in some cases\n\n\t// Check class names on <html> and <body>\n\tfor (const className of DEFAULT_DARK_MODE_CLASSES) {\n\t\tif (htmlElement.classList.contains(className) || bodyElement?.classList.contains(className)) {\n\t\t\treturn true\n\t\t}\n\t}\n\n\t// Some sites use data attributes\n\tconst darkThemeAttribute = htmlElement.getAttribute('data-theme')\n\tif (darkThemeAttribute?.toLowerCase().includes('dark')) {\n\t\treturn true\n\t}\n\n\treturn false\n}\n\n/**\n * Parses an RGB or RGBA color string and returns an object with r, g, b properties.\n * @param {string} colorString - e.g., \"rgb(34, 34, 34)\" or \"rgba(0, 0, 0, 0.5)\"\n * @returns {{r: number, g: number, b: number}|null}\n */\nfunction parseRgbColor(colorString: string) {\n\tconst rgbMatch = /rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/.exec(colorString)\n\tif (!rgbMatch) {\n\t\treturn null // Not a valid rgb/rgba string\n\t}\n\treturn {\n\t\tr: parseInt(rgbMatch[1]),\n\t\tg: parseInt(rgbMatch[2]),\n\t\tb: parseInt(rgbMatch[3]),\n\t}\n}\n\n/**\n * Determines if a color is \"dark\" based on its calculated luminance.\n * @param {string} colorString - The CSS color string (e.g., \"rgb(50, 50, 50)\").\n * @param {number} threshold - A value between 0 and 255. Colors with luminance below this will be considered dark. Default is 128.\n * @returns {boolean} - True if the color is considered dark.\n */\nfunction isColorDark(colorString: string, threshold = 128) {\n\tif (!colorString || colorString === 'transparent' || colorString.startsWith('rgba(0, 0, 0, 0)')) {\n\t\treturn false // Transparent is not dark\n\t}\n\n\tconst rgb = parseRgbColor(colorString)\n\tif (!rgb) {\n\t\treturn false // Could not parse color\n\t}\n\n\t// Calculate perceived luminance using the standard formula\n\tconst luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b\n\n\treturn luminance < threshold\n}\n\n/**\n * Checks the background color of the body element to determine if the page is dark.\n * @returns {boolean}\n */\nfunction isBackgroundDark() {\n\t// We check both <html> and <body> because some pages set the color on <html>\n\tconst htmlStyle = window.getComputedStyle(document.documentElement)\n\tconst bodyStyle = window.getComputedStyle(document.body || document.documentElement)\n\n\t// Get background colors\n\tconst htmlBgColor = htmlStyle.backgroundColor\n\tconst bodyBgColor = bodyStyle.backgroundColor\n\n\t// The body's background might be transparent, in which case we should\n\t// fall back to the html element's background.\n\tif (isColorDark(bodyBgColor)) {\n\t\treturn true\n\t} else if (bodyBgColor === 'transparent' || bodyBgColor.startsWith('rgba(0, 0, 0, 0)')) {\n\t\treturn isColorDark(htmlBgColor)\n\t}\n\n\treturn false\n}\n\n/**\n * A comprehensive function to determine if the page is currently in a dark theme.\n * It combines class checking and background color analysis.\n * @returns {boolean} - True if the page is likely dark.\n */\nexport function isPageDark() {\n\ttry {\n\t\t// Strategy 1: Check for common dark mode classes\n\t\tif (hasDarkModeClass()) {\n\t\t\treturn true\n\t\t}\n\n\t\t// Strategy 2: Analyze the computed background color\n\t\tif (isBackgroundDark()) {\n\t\t\treturn true\n\t\t}\n\n\t\t// @TODO add more checks here, e.g., analyzing text color,\n\t\t// or checking the background of major layout elements like <main> or #app.\n\n\t\treturn false\n\t} catch (error) {\n\t\tconsole.warn('Error determining if page is dark:', error)\n\t\treturn false\n\t}\n}\n","import { Motion } from 'ai-motion'\n\nimport { isPageDark } from './checkDarkMode'\n\nimport styles from './SimulatorMask.module.css'\nimport cursorStyles from './cursor.module.css'\n\nexport class SimulatorMask extends EventTarget {\n\tshown: boolean = false\n\twrapper = document.createElement('div')\n\tmotion: Motion | null = null\n\n\t#cursor = document.createElement('div')\n\n\t#currentCursorX = 0\n\t#currentCursorY = 0\n\n\t#targetCursorX = 0\n\t#targetCursorY = 0\n\n\tconstructor() {\n\t\tsuper()\n\n\t\tthis.wrapper.id = 'page-agent-runtime_simulator-mask'\n\t\tthis.wrapper.className = styles.wrapper\n\t\tthis.wrapper.setAttribute('data-browser-use-ignore', 'true')\n\t\tthis.wrapper.setAttribute('data-page-agent-ignore', 'true')\n\n\t\ttry {\n\t\t\tconst motion = new Motion({\n\t\t\t\tmode: isPageDark() ? 'dark' : 'light',\n\t\t\t\tstyles: { position: 'absolute', inset: '0' },\n\t\t\t})\n\t\t\tthis.motion = motion\n\t\t\tthis.wrapper.appendChild(motion.element)\n\t\t\tmotion.autoResize(this.wrapper)\n\t\t} catch (e) {\n\t\t\tconsole.warn('[SimulatorMask] Motion overlay unavailable:', e)\n\t\t}\n\n\t\t// Capture all mouse, keyboard, and wheel events\n\t\tthis.wrapper.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mousedown', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mouseup', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mousemove', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('wheel', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('keydown', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('keyup', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\n\t\t// Create AI cursor\n\t\tthis.#createCursor()\n\t\t// this.show()\n\n\t\tdocument.body.appendChild(this.wrapper)\n\n\t\tthis.#moveCursorToTarget()\n\n\t\t// global events\n\t\t// @note Mask should be isolated from the rest of the code.\n\t\t// Global events are easier to manage and cleanup.\n\n\t\tconst movePointerToListener = (event: Event) => {\n\t\t\tconst { x, y } = (event as CustomEvent).detail\n\t\t\tthis.setCursorPosition(x, y)\n\t\t}\n\t\tconst clickPointerListener = () => {\n\t\t\tthis.triggerClickAnimation()\n\t\t}\n\t\tconst enablePassThroughListener = () => {\n\t\t\tthis.wrapper.style.pointerEvents = 'none'\n\t\t}\n\t\tconst disablePassThroughListener = () => {\n\t\t\tthis.wrapper.style.pointerEvents = 'auto'\n\t\t}\n\n\t\twindow.addEventListener('PageAgent::MovePointerTo', movePointerToListener)\n\t\twindow.addEventListener('PageAgent::ClickPointer', clickPointerListener)\n\t\twindow.addEventListener('PageAgent::EnablePassThrough', enablePassThroughListener)\n\t\twindow.addEventListener('PageAgent::DisablePassThrough', disablePassThroughListener)\n\n\t\tthis.addEventListener('dispose', () => {\n\t\t\twindow.removeEventListener('PageAgent::MovePointerTo', movePointerToListener)\n\t\t\twindow.removeEventListener('PageAgent::ClickPointer', clickPointerListener)\n\t\t\twindow.removeEventListener('PageAgent::EnablePassThrough', enablePassThroughListener)\n\t\t\twindow.removeEventListener('PageAgent::DisablePassThrough', disablePassThroughListener)\n\t\t})\n\t}\n\n\t#createCursor() {\n\t\tthis.#cursor.className = cursorStyles.cursor\n\n\t\t// Create ripple effect container\n\t\tconst rippleContainer = document.createElement('div')\n\t\trippleContainer.className = cursorStyles.cursorRipple\n\t\tthis.#cursor.appendChild(rippleContainer)\n\n\t\t// Create filling layer\n\t\tconst fillingLayer = document.createElement('div')\n\t\tfillingLayer.className = cursorStyles.cursorFilling\n\t\tthis.#cursor.appendChild(fillingLayer)\n\n\t\t// Create border layer\n\t\tconst borderLayer = document.createElement('div')\n\t\tborderLayer.className = cursorStyles.cursorBorder\n\t\tthis.#cursor.appendChild(borderLayer)\n\n\t\tthis.wrapper.appendChild(this.#cursor)\n\t}\n\n\t#moveCursorToTarget() {\n\t\tconst newX = this.#currentCursorX + (this.#targetCursorX - this.#currentCursorX) * 0.2\n\t\tconst newY = this.#currentCursorY + (this.#targetCursorY - this.#currentCursorY) * 0.2\n\n\t\tconst xDistance = Math.abs(newX - this.#targetCursorX)\n\t\tif (xDistance > 0) {\n\t\t\tif (xDistance < 2) {\n\t\t\t\tthis.#currentCursorX = this.#targetCursorX\n\t\t\t} else {\n\t\t\t\tthis.#currentCursorX = newX\n\t\t\t}\n\t\t\tthis.#cursor.style.left = `${this.#currentCursorX}px`\n\t\t}\n\n\t\tconst yDistance = Math.abs(newY - this.#targetCursorY)\n\t\tif (yDistance > 0) {\n\t\t\tif (yDistance < 2) {\n\t\t\t\tthis.#currentCursorY = this.#targetCursorY\n\t\t\t} else {\n\t\t\t\tthis.#currentCursorY = newY\n\t\t\t}\n\t\t\tthis.#cursor.style.top = `${this.#currentCursorY}px`\n\t\t}\n\n\t\trequestAnimationFrame(() => this.#moveCursorToTarget())\n\t}\n\n\tsetCursorPosition(x: number, y: number) {\n\t\tthis.#targetCursorX = x\n\t\tthis.#targetCursorY = y\n\t}\n\n\ttriggerClickAnimation() {\n\t\tthis.#cursor.classList.remove(cursorStyles.clicking)\n\t\t// Force reflow to restart animation\n\t\tvoid this.#cursor.offsetHeight\n\t\tthis.#cursor.classList.add(cursorStyles.clicking)\n\t}\n\n\tshow() {\n\t\tif (this.shown) return\n\n\t\tthis.shown = true\n\t\tthis.motion?.start()\n\t\tthis.motion?.fadeIn()\n\n\t\tthis.wrapper.classList.add(styles.visible)\n\n\t\t// Initialize cursor position\n\t\tthis.#currentCursorX = window.innerWidth / 2\n\t\tthis.#currentCursorY = window.innerHeight / 2\n\t\tthis.#targetCursorX = this.#currentCursorX\n\t\tthis.#targetCursorY = this.#currentCursorY\n\t\tthis.#cursor.style.left = `${this.#currentCursorX}px`\n\t\tthis.#cursor.style.top = `${this.#currentCursorY}px`\n\t}\n\n\thide() {\n\t\tif (!this.shown) return\n\n\t\tthis.shown = false\n\t\tthis.motion?.fadeOut()\n\t\tthis.motion?.pause()\n\n\t\tthis.#cursor.classList.remove(cursorStyles.clicking)\n\n\t\tsetTimeout(() => {\n\t\t\tthis.wrapper.classList.remove(styles.visible)\n\t\t}, 800) // Match the animation duration\n\t}\n\n\tdispose() {\n\t\tconsole.log('dispose SimulatorMask')\n\t\tthis.motion?.dispose()\n\t\tthis.wrapper.remove()\n\t\tthis.dispatchEvent(new Event('dispose'))\n\t}\n}\n"],"names":[],"mappings":"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"}

package/dist/lib/page-controller.js

@@ -35,15 +35,28 @@ async function waitFor(seconds) {
   await new Promise((resolve) => setTimeout(resolve, seconds * 1e3));
 }
 __name(waitFor, "waitFor");
-async function movePointerToElement(element) {
-  const rect = element.getBoundingClientRect();
+async function movePointerToElement(element, x, y) {
   const offset = getIframeOffset(element);
-  const x = rect.left + rect.width / 2 + offset.x;
-  const y = rect.top + rect.height / 2 + offset.y;
-  window.dispatchEvent(new CustomEvent("PageAgent::MovePointerTo", { detail: { x, y } }));
+  window.dispatchEvent(
+    new CustomEvent("PageAgent::MovePointerTo", {
+      detail: { x: x + offset.x, y: y + offset.y }
+    })
+  );
   await waitFor(0.3);
 }
 __name(movePointerToElement, "movePointerToElement");
+async function clickPointer() {
+  window.dispatchEvent(new CustomEvent("PageAgent::ClickPointer"));
+}
+__name(clickPointer, "clickPointer");
+async function enablePassThrough() {
+  window.dispatchEvent(new CustomEvent("PageAgent::EnablePassThrough"));
+}
+__name(enablePassThrough, "enablePassThrough");
+async function disablePassThrough() {
+  window.dispatchEvent(new CustomEvent("PageAgent::DisablePassThrough"));
+}
+__name(disablePassThrough, "disablePassThrough");
 function getElementByIndex(selectorMap, index) {
   const interactiveNode = selectorMap.get(index);
   if (!interactiveNode) {
@@ -62,13 +75,11 @@ __name(getElementByIndex, "getElementByIndex");
 let lastClickedElement = null;
 function blurLastClickedElement() {
   if (lastClickedElement) {
+    lastClickedElement.dispatchEvent(new PointerEvent("pointerout", { bubbles: true }));
+    lastClickedElement.dispatchEvent(new PointerEvent("pointerleave", { bubbles: false }));
+    lastClickedElement.dispatchEvent(new MouseEvent("mouseout", { bubbles: true }));
+    lastClickedElement.dispatchEvent(new MouseEvent("mouseleave", { bubbles: false }));
     lastClickedElement.blur();
-    lastClickedElement.dispatchEvent(
-      new MouseEvent("mouseout", { bubbles: true, cancelable: true })
-    );
-    lastClickedElement.dispatchEvent(
-      new MouseEvent("mouseleave", { bubbles: false, cancelable: true })
-    );
     lastClickedElement = null;
   }
 }
@@ -79,15 +90,35 @@ async function clickElement(element) {
   await scrollIntoViewIfNeeded(element);
   const frame = element.ownerDocument.defaultView?.frameElement;
   if (frame) await scrollIntoViewIfNeeded(frame);
-  await movePointerToElement(element);
-  window.dispatchEvent(new CustomEvent("PageAgent::ClickPointer"));
+  const rect = element.getBoundingClientRect();
+  const x = rect.left + rect.width / 2;
+  const y = rect.top + rect.height / 2;
+  await movePointerToElement(element, x, y);
+  await clickPointer();
   await waitFor(0.1);
-  element.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true, cancelable: true }));
-  element.dispatchEvent(new MouseEvent("mouseover", { bubbles: true, cancelable: true }));
-  element.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
-  element.focus();
-  element.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true }));
-  element.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  const doc = element.ownerDocument;
+  await enablePassThrough();
+  const hitTarget = doc.elementFromPoint(x, y);
+  await disablePassThrough();
+  const target = hitTarget instanceof HTMLElement && element.contains(hitTarget) ? hitTarget : element;
+  const pointerOpts = {
+    bubbles: true,
+    cancelable: true,
+    clientX: x,
+    clientY: y,
+    pointerType: "mouse"
+  };
+  const mouseOpts = { bubbles: true, cancelable: true, clientX: x, clientY: y, button: 0 };
+  target.dispatchEvent(new PointerEvent("pointerover", pointerOpts));
+  target.dispatchEvent(new PointerEvent("pointerenter", { ...pointerOpts, bubbles: false }));
+  target.dispatchEvent(new MouseEvent("mouseover", mouseOpts));
+  target.dispatchEvent(new MouseEvent("mouseenter", { ...mouseOpts, bubbles: false }));
+  target.dispatchEvent(new PointerEvent("pointerdown", pointerOpts));
+  target.dispatchEvent(new MouseEvent("mousedown", mouseOpts));
+  element.focus({ preventScroll: true });
+  target.dispatchEvent(new PointerEvent("pointerup", pointerOpts));
+  target.dispatchEvent(new MouseEvent("mouseup", mouseOpts));
+  target.click();
   await waitFor(0.2);
 }
 __name(clickElement, "clickElement");
@@ -177,7 +208,7 @@ async function scrollIntoViewIfNeeded(element) {
   }
 }
 __name(scrollIntoViewIfNeeded, "scrollIntoViewIfNeeded");
-async function scrollVertically(down, scroll_amount, element) {
+async function scrollVertically(scroll_amount, element) {
   if (element) {
     const targetElement = element;
     let currentElement = targetElement;
@@ -188,7 +219,7 @@ async function scrollVertically(down, scroll_amount, element) {
     const dy2 = scroll_amount;
     while (currentElement && attempts < 10) {
       const computedStyle = window.getComputedStyle(currentElement);
-      const hasScrollableY = /(auto|scroll|overlay)/.test(computedStyle.overflowY);
+      const hasScrollableY = /(auto|scroll|overlay)/.test(computedStyle.overflowY) || computedStyle.scrollbarWidth && computedStyle.scrollbarWidth !== "auto" || computedStyle.scrollbarGutter && computedStyle.scrollbarGutter !== "auto";
       const canScrollVertically = currentElement.scrollHeight > currentElement.clientHeight;
       if (hasScrollableY && canScrollVertically) {
         const beforeScroll = currentElement.scrollTop;
@@ -242,6 +273,8 @@ async function scrollVertically(down, scroll_amount, element) {
     if (reachedTop) return `✅ Scrolled page by ${scrolled}px. Reached the top of the page.`;
     return `✅ Scrolled page by ${scrolled}px.`;
   } else {
+    const warningMsg = `The document is not scrollable. Falling back to container scroll.`;
+    console.log(`[PageController] ${warningMsg}`);
     const scrollBefore = el.scrollTop;
     const scrollMax = el.scrollHeight - el.clientHeight;
     el.scrollBy({ top: dy, behavior: "smooth" });
@@ -249,19 +282,19 @@ async function scrollVertically(down, scroll_amount, element) {
     const scrollAfter = el.scrollTop;
     const scrolled = scrollAfter - scrollBefore;
     if (Math.abs(scrolled) < 1) {
-      return dy > 0 ? `⚠️ Already at the bottom of container (${el.tagName}), cannot scroll down further.` : `⚠️ Already at the top of container (${el.tagName}), cannot scroll up further.`;
+      return dy > 0 ? `⚠️ ${warningMsg} Already at the bottom of container (${el.tagName}), cannot scroll down further.` : `⚠️ ${warningMsg} Already at the top of container (${el.tagName}), cannot scroll up further.`;
     }
     const reachedBottom = dy > 0 && scrollAfter >= scrollMax - 1;
     const reachedTop = dy < 0 && scrollAfter <= 1;
     if (reachedBottom)
-      return `✅ Scrolled container (${el.tagName}) by ${scrolled}px. Reached the bottom.`;
+      return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px. Reached the bottom.`;
     if (reachedTop)
-      return `✅ Scrolled container (${el.tagName}) by ${scrolled}px. Reached the top.`;
-    return `✅ Scrolled container (${el.tagName}) by ${scrolled}px.`;
+      return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px. Reached the top.`;
+    return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px.`;
   }
 }
 __name(scrollVertically, "scrollVertically");
-async function scrollHorizontally(right, scroll_amount, element) {
+async function scrollHorizontally(scroll_amount, element) {
   if (element) {
     const targetElement = element;
     let currentElement = targetElement;
@@ -269,10 +302,10 @@ async function scrollHorizontally(right, scroll_amount, element) {
     let scrolledElement = null;
     let scrollDelta = 0;
     let attempts = 0;
-    const dx2 = right ? scroll_amount : -scroll_amount;
+    const dx2 = scroll_amount;
     while (currentElement && attempts < 10) {
       const computedStyle = window.getComputedStyle(currentElement);
-      const hasScrollableX = /(auto|scroll|overlay)/.test(computedStyle.overflowX);
+      const hasScrollableX = /(auto|scroll|overlay)/.test(computedStyle.overflowX) || computedStyle.scrollbarWidth && computedStyle.scrollbarWidth !== "auto" || computedStyle.scrollbarGutter && computedStyle.scrollbarGutter !== "auto";
       const canScrollHorizontally = currentElement.scrollWidth > currentElement.clientWidth;
       if (hasScrollableX && canScrollHorizontally) {
         const beforeScroll = currentElement.scrollLeft;
@@ -305,7 +338,7 @@ async function scrollHorizontally(right, scroll_amount, element) {
       return `No horizontally scrollable container found for element (${targetElement.tagName})`;
     }
   }
-  const dx = right ? scroll_amount : -scroll_amount;
+  const dx = scroll_amount;
   const bigEnough = /* @__PURE__ */ __name((el2) => el2.clientWidth >= window.innerWidth * 0.5, "bigEnough");
   const canScroll = /* @__PURE__ */ __name((el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowX) && el2.scrollWidth > el2.clientWidth && bigEnough(el2), "canScroll");
   let el = document.activeElement;
@@ -327,6 +360,8 @@ async function scrollHorizontally(right, scroll_amount, element) {
     if (reachedLeft) return `✅ Scrolled page by ${scrolled}px. Reached the left edge of the page.`;
     return `✅ Scrolled page horizontally by ${scrolled}px.`;
   } else {
+    const warningMsg = `The document is not scrollable. Falling back to container scroll.`;
+    console.log(`[PageController] ${warningMsg}`);
     const scrollBefore = el.scrollLeft;
     const scrollMax = el.scrollWidth - el.clientWidth;
     el.scrollBy({ left: dx, behavior: "smooth" });
@@ -334,15 +369,15 @@ async function scrollHorizontally(right, scroll_amount, element) {
     const scrollAfter = el.scrollLeft;
     const scrolled = scrollAfter - scrollBefore;
     if (Math.abs(scrolled) < 1) {
-      return dx > 0 ? `⚠️ Already at the right edge of container (${el.tagName}), cannot scroll right further.` : `⚠️ Already at the left edge of container (${el.tagName}), cannot scroll left further.`;
+      return dx > 0 ? `⚠️ ${warningMsg} Already at the right edge of container (${el.tagName}), cannot scroll right further.` : `⚠️ ${warningMsg} Already at the left edge of container (${el.tagName}), cannot scroll left further.`;
     }
     const reachedRight = dx > 0 && scrollAfter >= scrollMax - 1;
     const reachedLeft = dx < 0 && scrollAfter <= 1;
     if (reachedRight)
-      return `✅ Scrolled container (${el.tagName}) by ${scrolled}px. Reached the right edge.`;
+      return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px. Reached the right edge.`;
     if (reachedLeft)
-      return `✅ Scrolled container (${el.tagName}) by ${scrolled}px. Reached the left edge.`;
-    return `✅ Scrolled container (${el.tagName}) horizontally by ${scrolled}px.`;
+      return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px. Reached the left edge.`;
+    return `✅ ${warningMsg} Scrolled container (${el.tagName}) horizontally by ${scrolled}px.`;
   }
 }
 __name(scrollHorizontally, "scrollHorizontally");
@@ -599,9 +634,10 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     const overflowX = style.overflowX;
     const overflowY = style.overflowY;
+    const hasScrollbarSignal = style.scrollbarWidth && style.scrollbarWidth !== "auto" || style.scrollbarGutter && style.scrollbarGutter !== "auto";
     const scrollableX = overflowX === "auto" || overflowX === "scroll";
     const scrollableY = overflowY === "auto" || overflowY === "scroll";
-    if (!scrollableX && !scrollableY) {
+    if (!scrollableX && !scrollableY && !hasScrollbarSignal) {
       return null;
     }
     const scrollWidth = element.scrollWidth - element.clientWidth;
@@ -610,10 +646,10 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (scrollWidth < threshold && scrollHeight < threshold) {
       return null;
     }
-    if (!scrollableY && scrollWidth < threshold) {
+    if (!scrollableY && !hasScrollbarSignal && scrollWidth < threshold) {
       return null;
     }
-    if (!scrollableX && scrollHeight < threshold) {
+    if (!scrollableX && !hasScrollbarSignal && scrollHeight < threshold) {
       return null;
     }
     const distanceToTop = element.scrollTop;
@@ -630,6 +666,7 @@ const domTree = /* @__PURE__ */ __name((args = {
       scrollable: true,
       scrollData
     });
+    console.log("scrollData!!!", scrollData);
     return scrollData;
   }
   __name(isScrollableElement, "isScrollableElement");
@@ -1064,6 +1101,28 @@ const domTree = /* @__PURE__ */ __name((args = {
     return false;
   }
   __name(isInExpandedViewport, "isInExpandedViewport");
+  const INTERACTIVE_ARIA_ATTRS = [
+    "aria-expanded",
+    "aria-checked",
+    "aria-selected",
+    "aria-pressed",
+    "aria-haspopup",
+    "aria-controls",
+    "aria-owns",
+    "aria-activedescendant",
+    "aria-valuenow",
+    "aria-valuetext",
+    "aria-valuemax",
+    "aria-valuemin",
+    "aria-autocomplete"
+  ];
+  function hasInteractiveAria(el) {
+    for (let i = 0; i < INTERACTIVE_ARIA_ATTRS.length; i++) {
+      if (el.hasAttribute(INTERACTIVE_ARIA_ATTRS[i])) return true;
+    }
+    return false;
+  }
+  __name(hasInteractiveAria, "hasInteractiveAria");
   function isInteractiveCandidate(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;
     const tagName = element.tagName.toLowerCase();
@@ -1078,7 +1137,7 @@ const domTree = /* @__PURE__ */ __name((args = {
       "label"
     ]);
     if (interactiveElements.has(tagName)) return true;
-    const hasQuickInteractiveAttr = element.hasAttribute("onclick") || element.hasAttribute("role") || element.hasAttribute("tabindex") || element.hasAttribute("aria-") || element.hasAttribute("data-action") || element.getAttribute("contenteditable") === "true";
+    const hasQuickInteractiveAttr = element.hasAttribute("onclick") || element.hasAttribute("role") || element.hasAttribute("tabindex") || hasInteractiveAria(element) || element.hasAttribute("data-action") || element.getAttribute("contenteditable") === "true";
     return hasQuickInteractiveAttr;
   }
   __name(isInteractiveCandidate, "isInteractiveCandidate");
@@ -1091,9 +1150,10 @@ const domTree = /* @__PURE__ */ __name((args = {
     "summary",
     "details",
     "label",
-    "option"
+    "option",
+    "li"
   ]);
-  const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
+  const DISTINCT_INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
     "button",
     "link",
     "menuitem",
@@ -1109,6 +1169,9 @@ const domTree = /* @__PURE__ */ __name((args = {
     "searchbox",
     "textbox",
     "listbox",
+    "listitem",
+    "treeitem",
+    "row",
     "option",
     "scrollbar"
   ]);
@@ -1139,7 +1202,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (DISTINCT_INTERACTIVE_TAGS.has(tagName)) {
       return true;
     }
-    if (role && INTERACTIVE_ROLES.has(role)) {
+    if (role && DISTINCT_INTERACTIVE_ROLES.has(role)) {
       return true;
     }
     if (element.isContentEditable || element.getAttribute("contenteditable") === "true") {
@@ -1151,6 +1214,9 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (element.hasAttribute("onclick") || typeof element.onclick === "function") {
       return true;
     }
+    if (hasInteractiveAria(element)) {
+      return true;
+    }
     try {
       const getEventListenersForNode = element?.ownerDocument?.defaultView?.getEventListenersForNode || window.getEventListenersForNode;
       if (typeof getEventListenersForNode === "function") {
@@ -1194,6 +1260,9 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (isHeuristicallyInteractive(element)) {
       return true;
     }
+    if (extraData.get(element)?.scrollable) {
+      return true;
+    }
     return false;
   }
   __name(isElementDistinctInteraction, "isElementDistinctInteraction");
@@ -1384,6 +1453,17 @@ function resolveViewportExpansion(viewportExpansion) {
   return viewportExpansion ?? DEFAULT_VIEWPORT_EXPANSION;
 }
 __name(resolveViewportExpansion, "resolveViewportExpansion");
+const SEMANTIC_TAGS = /* @__PURE__ */ new Set([
+  "nav",
+  "menu",
+  // 'main',
+  "header",
+  "footer",
+  "aside",
+  // 'article',
+  // 'form',
+  "dialog"
+]);
 const newElementsCache = /* @__PURE__ */ new WeakMap();
 function getFlatTree(config) {
   const viewportExpansion = resolveViewportExpansion(config.viewportExpansion);
@@ -1458,7 +1538,7 @@ function matchAttributes(attrs, patterns) {
   return result2;
 }
 __name(matchAttributes, "matchAttributes");
-function flatTreeToString(flatTree, includeAttributes) {
+function flatTreeToString(flatTree, includeAttributes = [], keepSemanticTags = false) {
   const DEFAULT_INCLUDE_ATTRIBUTES = [
     "title",
     "type",
@@ -1485,7 +1565,7 @@ function flatTreeToString(flatTree, includeAttributes) {
     // content editable
     "contenteditable"
   ];
-  const includeAttrs = [...includeAttributes || [], ...DEFAULT_INCLUDE_ATTRIBUTES];
+  const includeAttrs = [...includeAttributes, ...DEFAULT_INCLUDE_ATTRIBUTES];
   const capTextLength = /* @__PURE__ */ __name((text, maxLength) => {
     if (text.length > maxLength) {
       return text.substring(0, maxLength) + "...";
@@ -1554,6 +1634,7 @@ function flatTreeToString(flatTree, includeAttributes) {
     let nextDepth = depth;
     const depthStr = "	".repeat(depth);
     if (node.type === "element") {
+      const isSemantic = keepSemanticTags && node.tagName && SEMANTIC_TAGS.has(node.tagName);
       if (node.highlightIndex !== void 0) {
         nextDepth += 1;
         const text = getAllTextTillNextClickableElement(node);
@@ -1621,9 +1702,22 @@ function flatTreeToString(flatTree, includeAttributes) {
         line += " />";
         result22.push(line);
       }
+      const emitSemantic = isSemantic && node.highlightIndex === void 0;
+      const mark = emitSemantic ? result22.length : -1;
+      if (emitSemantic) {
+        result22.push(`${depthStr}<${node.tagName}>`);
+        nextDepth += 1;
+      }
       for (const child of node.children) {
         processNode(child, nextDepth, result22);
       }
+      if (emitSemantic) {
+        if (result22.length === mark + 1) {
+          result22.pop();
+        } else {
+          result22.push(`${depthStr}</${node.tagName}>`);
+        }
+      }
     } else if (node.type === "text") {
       if (hasParentWithHighlightIndex(node)) {
         return;
@@ -1794,7 +1888,7 @@ const _PageController = class _PageController extends EventTarget {
   initMask() {
     if (this.maskReady !== null) return;
     this.maskReady = (async () => {
-      const { SimulatorMask } = await import("./SimulatorMask-BHnQ6LmL.js");
+      const { SimulatorMask } = await import("./SimulatorMask-CU7szDjy.js");
       this.mask = new SimulatorMask();
     })();
   }
@@ -1858,7 +1952,11 @@ ${scrollHintAbove}`;
       ...this.config,
       interactiveBlacklist: blacklist
     });
-    this.simplifiedHTML = flatTreeToString(this.flatTree, this.config.includeAttributes);
+    this.simplifiedHTML = flatTreeToString(
+      this.flatTree,
+      this.config.includeAttributes,
+      this.config.keepSemanticTags
+    );
     this.selectorMap.clear();
     this.selectorMap = getSelectorMap(this.flatTree);
     this.elementTextMap.clear();
@@ -1874,6 +1972,7 @@ ${scrollHintAbove}`;
    * Clean up all element highlights
    */
   async cleanUpHighlights() {
+    console.log("[PageController] cleanUpHighlights");
     cleanUpHighlights();
   }
   // ======= Element Actions =======
@@ -1959,9 +2058,9 @@ ${scrollHintAbove}`;
     try {
       const { down, numPages, pixels, index } = options;
       this.assertIndexed();
-      const scrollAmount = pixels ?? numPages * (down ? 1 : -1) * window.innerHeight;
+      const scrollAmount = (pixels ?? numPages * window.innerHeight) * (down ? 1 : -1);
       const element = index !== void 0 ? getElementByIndex(this.selectorMap, index) : null;
-      const message = await scrollVertically(down, scrollAmount, element);
+      const message = await scrollVertically(scrollAmount, element);
       return {
         success: true,
         message
@@ -1982,7 +2081,7 @@ ${scrollHintAbove}`;
       this.assertIndexed();
       const scrollAmount = pixels * (right ? 1 : -1);
       const element = index !== void 0 ? getElementByIndex(this.selectorMap, index) : null;
-      const message = await scrollHorizontally(right, scrollAmount, element);
+      const message = await scrollHorizontally(scrollAmount, element);
       return {
         success: true,
         message