@page-agent/page-controller 1.7.0 → 1.8.0-beta.0

package/dist/lib/PageController.d.ts

@@ -48,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;
@@ -95,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;
 
@@ -256,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-CU7szDjy.js → SimulatorMask-BfJiQVCo.js}

@@ -92,19 +92,6 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-var __defProp = Object.defineProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _cursor, _currentCursorX, _currentCursorY, _targetCursorX, _targetCursorY, _SimulatorMask_instances, createCursor_fn, moveCursorToTarget_fn;
 import { Motion } from "ai-motion";
 function hasDarkModeClass() {
   const DEFAULT_DARK_MODE_CLASSES = ["dark", "dark-mode", "theme-dark", "night", "night-mode"];
@@ -121,7 +108,6 @@ function hasDarkModeClass() {
   }
   return false;
 }
-__name(hasDarkModeClass, "hasDarkModeClass");
 function parseRgbColor(colorString) {
   const rgbMatch = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(colorString);
   if (!rgbMatch) {
@@ -133,7 +119,6 @@ function parseRgbColor(colorString) {
     b: parseInt(rgbMatch[3])
   };
 }
-__name(parseRgbColor, "parseRgbColor");
 function isColorDark(colorString, threshold = 128) {
   if (!colorString || colorString === "transparent" || colorString.startsWith("rgba(0, 0, 0, 0)")) {
     return false;
@@ -145,7 +130,6 @@ function isColorDark(colorString, threshold = 128) {
   const luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
   return luminance < threshold;
 }
-__name(isColorDark, "isColorDark");
 function isBackgroundDark() {
   const htmlStyle = window.getComputedStyle(document.documentElement);
   const bodyStyle = window.getComputedStyle(document.body || document.documentElement);
@@ -158,7 +142,6 @@ function isBackgroundDark() {
   }
   return false;
 }
-__name(isBackgroundDark, "isBackgroundDark");
 function isPageDark() {
   try {
     if (hasDarkModeClass()) {
@@ -173,7 +156,6 @@ function isPageDark() {
     return false;
   }
 }
-__name(isPageDark, "isPageDark");
 const wrapper = "_wrapper_1ooyb_1";
 const visible = "_visible_1ooyb_11";
 const styles = {
@@ -192,18 +174,18 @@ const cursorStyles = {
   cursorRipple,
   clicking
 };
-const _SimulatorMask = class _SimulatorMask extends EventTarget {
+class SimulatorMask extends EventTarget {
+  shown = false;
+  wrapper = document.createElement("div");
+  motion = null;
+  #disposed = false;
+  #cursor = document.createElement("div");
+  #currentCursorX = 0;
+  #currentCursorY = 0;
+  #targetCursorX = 0;
+  #targetCursorY = 0;
   constructor() {
     super();
-    __privateAdd(this, _SimulatorMask_instances);
-    __publicField(this, "shown", false);
-    __publicField(this, "wrapper", document.createElement("div"));
-    __publicField(this, "motion", null);
-    __privateAdd(this, _cursor, document.createElement("div"));
-    __privateAdd(this, _currentCursorX, 0);
-    __privateAdd(this, _currentCursorY, 0);
-    __privateAdd(this, _targetCursorX, 0);
-    __privateAdd(this, _targetCursorY, 0);
     this.wrapper.id = "page-agent-runtime_simulator-mask";
     this.wrapper.className = styles.wrapper;
     this.wrapper.setAttribute("data-browser-use-ignore", "true");
@@ -247,22 +229,22 @@ const _SimulatorMask = class _SimulatorMask extends EventTarget {
       e.stopPropagation();
       e.preventDefault();
     });
-    __privateMethod(this, _SimulatorMask_instances, createCursor_fn).call(this);
+    this.#createCursor();
     document.body.appendChild(this.wrapper);
-    __privateMethod(this, _SimulatorMask_instances, moveCursorToTarget_fn).call(this);
-    const movePointerToListener = /* @__PURE__ */ __name((event) => {
+    this.#moveCursorToTarget();
+    const movePointerToListener = (event) => {
       const { x, y } = event.detail;
       this.setCursorPosition(x, y);
-    }, "movePointerToListener");
-    const clickPointerListener = /* @__PURE__ */ __name(() => {
+    };
+    const clickPointerListener = () => {
       this.triggerClickAnimation();
-    }, "clickPointerListener");
-    const enablePassThroughListener = /* @__PURE__ */ __name(() => {
+    };
+    const enablePassThroughListener = () => {
       this.wrapper.style.pointerEvents = "none";
-    }, "enablePassThroughListener");
-    const disablePassThroughListener = /* @__PURE__ */ __name(() => {
+    };
+    const disablePassThroughListener = () => {
       this.wrapper.style.pointerEvents = "auto";
-    }, "disablePassThroughListener");
+    };
     window.addEventListener("PageAgent::MovePointerTo", movePointerToListener);
     window.addEventListener("PageAgent::ClickPointer", clickPointerListener);
     window.addEventListener("PageAgent::EnablePassThrough", enablePassThroughListener);
@@ -274,90 +256,86 @@ const _SimulatorMask = class _SimulatorMask extends EventTarget {
       window.removeEventListener("PageAgent::DisablePassThrough", disablePassThroughListener);
     });
   }
+  #createCursor() {
+    this.#cursor.className = cursorStyles.cursor;
+    const rippleContainer = document.createElement("div");
+    rippleContainer.className = cursorStyles.cursorRipple;
+    this.#cursor.appendChild(rippleContainer);
+    const fillingLayer = document.createElement("div");
+    fillingLayer.className = cursorStyles.cursorFilling;
+    this.#cursor.appendChild(fillingLayer);
+    const borderLayer = document.createElement("div");
+    borderLayer.className = cursorStyles.cursorBorder;
+    this.#cursor.appendChild(borderLayer);
+    this.wrapper.appendChild(this.#cursor);
+  }
+  #moveCursorToTarget() {
+    if (this.#disposed) return;
+    const newX = this.#currentCursorX + (this.#targetCursorX - this.#currentCursorX) * 0.2;
+    const newY = this.#currentCursorY + (this.#targetCursorY - this.#currentCursorY) * 0.2;
+    const xDistance = Math.abs(newX - this.#targetCursorX);
+    if (xDistance > 0) {
+      if (xDistance < 2) {
+        this.#currentCursorX = this.#targetCursorX;
+      } else {
+        this.#currentCursorX = newX;
+      }
+      this.#cursor.style.left = `${this.#currentCursorX}px`;
+    }
+    const yDistance = Math.abs(newY - this.#targetCursorY);
+    if (yDistance > 0) {
+      if (yDistance < 2) {
+        this.#currentCursorY = this.#targetCursorY;
+      } else {
+        this.#currentCursorY = newY;
+      }
+      this.#cursor.style.top = `${this.#currentCursorY}px`;
+    }
+    requestAnimationFrame(() => this.#moveCursorToTarget());
+  }
   setCursorPosition(x, y) {
-    __privateSet(this, _targetCursorX, x);
-    __privateSet(this, _targetCursorY, y);
+    if (this.#disposed) return;
+    this.#targetCursorX = x;
+    this.#targetCursorY = y;
   }
   triggerClickAnimation() {
-    __privateGet(this, _cursor).classList.remove(cursorStyles.clicking);
-    void __privateGet(this, _cursor).offsetHeight;
-    __privateGet(this, _cursor).classList.add(cursorStyles.clicking);
+    if (this.#disposed) return;
+    this.#cursor.classList.remove(cursorStyles.clicking);
+    void this.#cursor.offsetHeight;
+    this.#cursor.classList.add(cursorStyles.clicking);
   }
   show() {
-    if (this.shown) return;
+    if (this.shown || this.#disposed) return;
     this.shown = true;
     this.motion?.start();
     this.motion?.fadeIn();
     this.wrapper.classList.add(styles.visible);
-    __privateSet(this, _currentCursorX, window.innerWidth / 2);
-    __privateSet(this, _currentCursorY, window.innerHeight / 2);
-    __privateSet(this, _targetCursorX, __privateGet(this, _currentCursorX));
-    __privateSet(this, _targetCursorY, __privateGet(this, _currentCursorY));
-    __privateGet(this, _cursor).style.left = `${__privateGet(this, _currentCursorX)}px`;
-    __privateGet(this, _cursor).style.top = `${__privateGet(this, _currentCursorY)}px`;
+    this.#currentCursorX = window.innerWidth / 2;
+    this.#currentCursorY = window.innerHeight / 2;
+    this.#targetCursorX = this.#currentCursorX;
+    this.#targetCursorY = this.#currentCursorY;
+    this.#cursor.style.left = `${this.#currentCursorX}px`;
+    this.#cursor.style.top = `${this.#currentCursorY}px`;
   }
   hide() {
-    if (!this.shown) return;
+    if (!this.shown || this.#disposed) return;
     this.shown = false;
     this.motion?.fadeOut();
     this.motion?.pause();
-    __privateGet(this, _cursor).classList.remove(cursorStyles.clicking);
+    this.#cursor.classList.remove(cursorStyles.clicking);
     setTimeout(() => {
       this.wrapper.classList.remove(styles.visible);
     }, 800);
   }
   dispose() {
+    this.#disposed = true;
     console.log("dispose SimulatorMask");
     this.motion?.dispose();
     this.wrapper.remove();
     this.dispatchEvent(new Event("dispose"));
   }
-};
-_cursor = new WeakMap();
-_currentCursorX = new WeakMap();
-_currentCursorY = new WeakMap();
-_targetCursorX = new WeakMap();
-_targetCursorY = new WeakMap();
-_SimulatorMask_instances = new WeakSet();
-createCursor_fn = /* @__PURE__ */ __name(function() {
-  __privateGet(this, _cursor).className = cursorStyles.cursor;
-  const rippleContainer = document.createElement("div");
-  rippleContainer.className = cursorStyles.cursorRipple;
-  __privateGet(this, _cursor).appendChild(rippleContainer);
-  const fillingLayer = document.createElement("div");
-  fillingLayer.className = cursorStyles.cursorFilling;
-  __privateGet(this, _cursor).appendChild(fillingLayer);
-  const borderLayer = document.createElement("div");
-  borderLayer.className = cursorStyles.cursorBorder;
-  __privateGet(this, _cursor).appendChild(borderLayer);
-  this.wrapper.appendChild(__privateGet(this, _cursor));
-}, "#createCursor");
-moveCursorToTarget_fn = /* @__PURE__ */ __name(function() {
-  const newX = __privateGet(this, _currentCursorX) + (__privateGet(this, _targetCursorX) - __privateGet(this, _currentCursorX)) * 0.2;
-  const newY = __privateGet(this, _currentCursorY) + (__privateGet(this, _targetCursorY) - __privateGet(this, _currentCursorY)) * 0.2;
-  const xDistance = Math.abs(newX - __privateGet(this, _targetCursorX));
-  if (xDistance > 0) {
-    if (xDistance < 2) {
-      __privateSet(this, _currentCursorX, __privateGet(this, _targetCursorX));
-    } else {
-      __privateSet(this, _currentCursorX, newX);
-    }
-    __privateGet(this, _cursor).style.left = `${__privateGet(this, _currentCursorX)}px`;
-  }
-  const yDistance = Math.abs(newY - __privateGet(this, _targetCursorY));
-  if (yDistance > 0) {
-    if (yDistance < 2) {
-      __privateSet(this, _currentCursorY, __privateGet(this, _targetCursorY));
-    } else {
-      __privateSet(this, _currentCursorY, newY);
-    }
-    __privateGet(this, _cursor).style.top = `${__privateGet(this, _currentCursorY)}px`;
-  }
-  requestAnimationFrame(() => __privateMethod(this, _SimulatorMask_instances, moveCursorToTarget_fn).call(this));
-}, "#moveCursorToTarget");
-__name(_SimulatorMask, "SimulatorMask");
-let SimulatorMask = _SimulatorMask;
+}
 export {
   SimulatorMask
 };
-//# sourceMappingURL=SimulatorMask-CU7szDjy.js.map
+//# sourceMappingURL=SimulatorMask-BfJiQVCo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimulatorMask-BfJiQVCo.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#disposed = false\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\tif (this.#disposed) return\n\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\tif (this.#disposed) return\n\n\t\tthis.#targetCursorX = x\n\t\tthis.#targetCursorY = y\n\t}\n\n\ttriggerClickAnimation() {\n\t\tif (this.#disposed) return\n\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 || this.#disposed) 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 || this.#disposed) 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\tthis.#disposed = true\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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"}