@omnivoice/page-agent 0.3.0 → 0.5.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 SimonLuvRamen
+Copyright (c) 2026 Alibaba Group Holding Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,13 +1,85 @@
-# PageAgent Lab — Fork with Voice Integration
+# @omnivoice/page-agent
 
-Laboratório local para observar o `page-agent` controlando uma página real, com formulário, animações, cursor visual, console de debug e proxy seguro para OpenAI.
+Agente de GUI para aplicações web: um script (ou um `mountWidget()`) dá a qualquer página o seu próprio agente que
+lê o DOM e age nele. Este pacote é um fork do [`page-agent`](https://github.com/alibaba/page-agent) (Alibaba, MIT) com
+um widget central, um gateway que guarda a chave do provedor e um módulo de voz **opcional**.
 
-**Recursos desta fork:**
-- OpenAI Realtime full-duplex voice integration
-- Suporte a motores local (on-device) e realtime (cloud)
-- Documentação em `src/voice/README.md`
+## Instalação
 
-## Rodar
+```bash
+npm install @omnivoice/page-agent zod
+```
+
+`zod` (`^3.25.0 || ^4.0.0`) é peer dependency. O pacote não depende de `@omnivoice/core`, `llms`, `page-controller`
+nem `ui`: esses módulos vão embutidos no build.
+
+## Uso (ESM)
+
+```ts
+import { mountWidget } from "@omnivoice/page-agent";
+
+const widget = mountWidget({
+  model: "gpt-4o-mini",
+  baseURL: "https://seu-gateway.exemplo.com/v1",
+  language: "pt-BR",
+});
+
+await widget.run("Preencha o nome com Maria Oliveira");
+```
+
+`mountWidget` só cria o botão lançador. O agente é criado ao abrir o painel (ou em `widget.ready()` / `widget.run()`).
+A voz do navegador (`createVoice`) só é criada nessa hora, e o reconhecimento de fala só abre quando a pessoa clica
+no botão de microfone. Para desligá-la: `voice: { input: false, output: false }`.
+
+Também são exportados `PageAgent`, `createVoice`, `tool` e os tipos `PageAgentConfig`, `Widget`, `WidgetOptions`,
+`Voice` e `VoiceOptions`.
+
+## Uso por CDN (IIFE)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@omnivoice/page-agent@VERSAO/dist/iife/page-agent.demo.js"
+        data-auto-init="false"></script>
+<script>
+  window.PageAgent.mountWidget({ model: "gpt-4o-mini", baseURL: "/agent/v1" });
+</script>
+```
+
+Sem `data-auto-init="false"` (ou com `?autoInit` diferente de `false` na URL do script) o script cria um agente de
+demonstração ao carregar. Troque `VERSAO` por uma versão publicada.
+
+## Gateway (chave do provedor só no servidor)
+
+```bash
+AGENT_API_KEY=... AGENT_BASE_URL=https://api.openai.com/v1 AGENT_MODEL=gpt-4o-mini npx omnivoice-agent-gateway
+```
+
+O gateway expõe `GET /config`, `POST /v1/chat/completions` e `GET /health`, e injeta a chave ao chamar o provedor.
+As variáveis `AGENT_*` estão descritas no cabeçalho de `server/agent-gateway.mjs`.
+
+## Voz em tempo real (opcional)
+
+`@omnivoice/page-agent/voice` é um módulo à parte. **Importar o agente não o carrega**, e importá-lo, criar a
+configuração ou criar motores não liga microfone, conexão de áudio nem síntese: isso só acontece quando você chama
+`createVoiceSession(...)`. Veja o uso, os modos (`local` e `realtime`), a configuração e o protocolo em
+[`src/voice/README.md`](./src/voice/README.md).
+
+## Verificação do pacote
+
+```bash
+npm ci
+npm run build:package    # dist/esm, dist/iife, dist/voice e server/
+npm run verify:package   # identidade, tarball efetivo, dist atual, tipos
+npm run test:consumer    # empacota e testa o tarball num projeto novo
+```
+
+`npm publish` roda o build e o guard em modo `--release` antes de enviar.
+
+## Desenvolvimento do laboratório
+
+O restante deste documento descreve o laboratório local deste repositório (`index.html`, `src/main.ts`, proxy
+`server.mjs`), que consome o fork vendorizado em `vendor/page-agent` e não o pacote npm.
+
+### Rodar
 
 Requisitos: Node `^22.22.1 || >=24` e npm `^11.6.3`, mais uma conexão para instalar os pacotes.
 
@@ -16,7 +88,7 @@ O piso de versão vem de `vendor/page-agent`, não do laboratório: o monorepo d
 verifica essa precondição antes de comparar os artefatos.
 
 ```bash
-cd /home/bugson/PycharmProjects/test-pageagent
+cd <raiz deste repositório>
 cp .env.example .env
 # edite .env e coloque OPENAI_API_KEY=...
 npm install
@@ -32,13 +104,13 @@ Abra <http://127.0.0.1:8797>.
 
 O mesmo processo serve o frontend e o proxy da API. O endpoint `http://127.0.0.1:8797/api/health` mostra se a chave foi carregada. A porta `8787` pertence a outro serviço (`agent-relay`) e não é usada pelo laboratório.
 
-## Suíte de desafios
+### Suíte de desafios
 
 O laboratório agora contém mais de 100 desafios locais em 10 categorias: formulários, navegação, loading, recuperação, DOM profundo, dados, permissões, interação visual, adversarial e limites. O seletor mostra no máximo 12 cards por vez para não poluir o DOM que o PageAgent precisa observar; todos continuam disponíveis por busca e filtro.
 
 Cada desafio tem uma tarefa, uma dificuldade, um alvo renderizado, reset determinístico e evidência esperada. Os casos de cross-origin, gesto real e canvas são representados como limites explícitos da superfície local, não como falsos sucessos.
 
-## Comandos do laboratório
+### Comandos do laboratório
 
 Para não precisar controlar processos manualmente:
 
@@ -54,7 +126,7 @@ make test     # executa os testes Playwright
 
 O navegador recebe apenas `local-browser-session`. A chave real fica no `.env` e é usada pelo `server.mjs`, que encaminha chamadas para `https://api.openai.com/v1/chat/completions`.
 
-## Como testar
+### Como testar
 
 1. Clique em `Preencher nome`, `Escolher especialidade` ou `Clicar em agendar` para preparar uma tarefa.
 2. Clique em `Executar com PageAgent`.
@@ -69,7 +141,7 @@ Se aparecer `EADDRINUSE` na porta `8797`, não troque a porta: verifique qual pr
 
 O `make down` encerra somente a sessão registrada em `.pageagent.pid`; ele não encerra serviços externos.
 
-## Testes automatizados
+### Testes automatizados
 
 ```bash
 npx playwright install chromium
@@ -78,7 +150,7 @@ npm test
 
 Os testes cobrem o carregamento da página, acessibilidade básica, envio do formulário, animação do cursor e botões de comando rápido. A execução do LLM não é incluída no teste automatizado para não consumir créditos.
 
-## Arquivos principais
+### Arquivos principais
 
 - `src/main.ts`: instancia o `PageAgent` real e monta o laboratório.
 - `src/durable-runtime.ts`: checkpoint IndexedDB, lease por aba, recuperação após `pagehide` e proteção contra replay cego.
@@ -90,11 +162,11 @@ Os testes cobrem o carregamento da página, acessibilidade básica, envio do for
 - `tests/lab.spec.ts`: testes Playwright.
 - `vite.config.ts`: encaminha `/api` para o proxy local.
 
-## Evidência em tempo real
+### Evidência em tempo real
 
 Durante cada execução, o laboratório inicia um `ActionJournal` antes do agente. Ele captura `input`, `change`, `click`, `submit` e mutações relevantes do DOM enquanto a ferramenta está executando. A evidência é coalescida por `actionId` e adicionada ao histórico do próximo passo; ela indica que houve alteração, mas o sucesso final continua dependendo do verificador do desafio.
 
-## Retomada e recursos do navegador
+### Retomada e recursos do navegador
 
 O widget agora cria um `runId` e salva checkpoints locais em IndexedDB. Em refresh ou navegação completa, a última ação fica como `unknown`; o agente não a repete automaticamente sem reconciliação. O lease em `localStorage` evita duas abas executarem o mesmo run, e `pagehide`/`pageshow` fazem a transição do documento.
 

package/dist/esm/SimulatorMask-DIoKZt1z.js

@@ -0,0 +1,379 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(`._wrapper_1ooyb_1 {
+	position: fixed;
+	inset: 0;
+	z-index: 2147483641; /* 确保在所有元素之上，除了 panel */
+	cursor: wait;
+	overflow: hidden;
+
+	display: none;
+}
+
+._wrapper_1ooyb_1._visible_1ooyb_11 {
+	display: block;
+}
+/* AI 光标样式 */
+._cursor_1dgwb_2 {
+	position: absolute;
+	width: var(--cursor-size, 75px);
+	height: var(--cursor-size, 75px);
+	pointer-events: none;
+	z-index: 10000;
+}
+
+._cursorBorder_1dgwb_10 {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));
+	mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%3e%3cg%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='none'%20stroke='%23000000'%20stroke-width='6'%20stroke-miterlimit='10'%20style='stroke:%20light-dark(rgb(0,%200,%200),%20rgb(255,%20255,%20255));'/%3e%3c/g%3e%3c/svg%3e");
+	mask-size: 100% 100%;
+	mask-repeat: no-repeat;
+
+	transform-origin: center;
+	transform: rotate(-135deg) scale(1.2);
+	margin-left: -10px;
+	margin-top: -18px;
+}
+
+._cursorFilling_1dgwb_25 {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3e%3cdefs%3e%3c/defs%3e%3cg%20xmlns='http://www.w3.org/2000/svg'%20style='filter:%20drop-shadow(light-dark(rgba(0,%200,%200,%200.4),%20rgba(237,%20237,%20237,%200.4))%203px%204px%204px);'%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='%23ffffff'%20stroke='none'%20style='fill:%20%23ffffff;'/%3e%3c/g%3e%3c/svg%3e");
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+
+	transform-origin: center;
+	transform: rotate(-135deg) scale(1.2);
+	margin-left: -10px;
+	margin-top: -18px;
+}
+
+._cursorRipple_1dgwb_39 {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	margin-left: -50%;
+	margin-top: -50%;
+
+	&::after {
+		content: '';
+		opacity: 0;
+		position: absolute;
+		inset: 0;
+		border: 4px solid rgba(57, 182, 255, 1);
+		border-radius: 50%;
+	}
+}
+
+._cursor_1dgwb_2._clicking_1dgwb_57 ._cursorRipple_1dgwb_39::after {
+	animation: _cursor-ripple_1dgwb_1 300ms ease-out forwards;
+}
+
+@keyframes _cursor-ripple_1dgwb_1 {
+	0% {
+		transform: scale(0);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(2);
+		opacity: 0;
+	}
+}`));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import { Motion } from "ai-motion";
+function isPageDark() {
+  try {
+    if (hasDarkModeClass()) return true;
+    if (hasDarkModeDataAttribute()) return true;
+    if (isColorSchemeDark()) return true;
+    if (isBackgroundDark()) return true;
+    if (isMainContentBackgroundDark()) return true;
+    if (isTextColorLight()) return true;
+    return false;
+  } catch (error) {
+    console.warn("Error determining if page is dark:", error);
+    return false;
+  }
+}
+function hasDarkModeClass() {
+  const DEFAULT_DARK_MODE_CLASSES = ["dark", "dark-mode", "theme-dark", "night", "night-mode"];
+  const htmlElement = document.documentElement;
+  const bodyElement = document.body || document.documentElement;
+  for (const className of DEFAULT_DARK_MODE_CLASSES) {
+    if (htmlElement.classList.contains(className) || bodyElement?.classList.contains(className)) {
+      return true;
+    }
+  }
+  return false;
+}
+function hasDarkModeDataAttribute() {
+  const htmlElement = document.documentElement;
+  const bodyElement = document.body || document.documentElement;
+  const dataAttrs = ["data-theme", "data-color-mode", "data-bs-theme", "data-mui-color-scheme"];
+  for (const attr of dataAttrs) {
+    const bodyValue = bodyElement?.getAttribute(attr);
+    const htmlValue = htmlElement.getAttribute(attr);
+    if (bodyValue?.toLowerCase() === "dark" || htmlValue?.toLowerCase() === "dark") {
+      return true;
+    }
+  }
+  return false;
+}
+function isColorSchemeDark() {
+  const meta = document.querySelector('meta[name="color-scheme"]');
+  const metaContent = meta?.content.toLowerCase();
+  if (metaContent === "dark" || metaContent === "only dark") return true;
+  const rootStyle = window.getComputedStyle(document.documentElement);
+  const colorScheme = rootStyle.getPropertyValue("color-scheme").trim().toLowerCase();
+  return colorScheme === "dark" || colorScheme === "only dark";
+}
+function isBackgroundDark() {
+  const htmlStyle = window.getComputedStyle(document.documentElement);
+  const bodyStyle = window.getComputedStyle(document.body || document.documentElement);
+  const htmlBgColor = htmlStyle.backgroundColor;
+  const bodyBgColor = bodyStyle.backgroundColor;
+  if (isColorDark(bodyBgColor)) {
+    return true;
+  } else if (bodyBgColor === "transparent" || bodyBgColor.startsWith("rgba(0, 0, 0, 0)")) {
+    return isColorDark(htmlBgColor);
+  }
+  return false;
+}
+function isTextColorLight() {
+  const LIGHT_TEXT_LUMINANCE = 200;
+  const bodyStyle = window.getComputedStyle(document.body || document.documentElement);
+  const luminance = getLuminance(bodyStyle.color);
+  return luminance !== null && luminance > LIGHT_TEXT_LUMINANCE;
+}
+function isMainContentBackgroundDark() {
+  const { innerWidth: vw, innerHeight: vh } = window;
+  const minArea = vw * vh * 0.5;
+  const selectors = ["#app", "#root", "#__next"];
+  for (const selector of selectors) {
+    const el = document.querySelector(selector);
+    if (!el) continue;
+    const rect = el.getBoundingClientRect();
+    if (rect.width * rect.height < minArea) continue;
+    if (isColorDark(window.getComputedStyle(el).backgroundColor)) return true;
+  }
+  return false;
+}
+function parseRgbColor(colorString) {
+  const rgbMatch = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(colorString);
+  if (!rgbMatch) {
+    return null;
+  }
+  return {
+    r: parseInt(rgbMatch[1]),
+    g: parseInt(rgbMatch[2]),
+    b: parseInt(rgbMatch[3])
+  };
+}
+function getLuminance(colorString) {
+  if (!colorString || colorString === "transparent" || colorString.startsWith("rgba(0, 0, 0, 0)")) {
+    return null;
+  }
+  const rgb = parseRgbColor(colorString);
+  if (!rgb) {
+    return null;
+  }
+  return 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
+}
+function isColorDark(colorString, threshold = 128) {
+  const luminance = getLuminance(colorString);
+  return luminance !== null && luminance < threshold;
+}
+const wrapper = "_wrapper_1ooyb_1";
+const visible = "_visible_1ooyb_11";
+const styles = {
+  wrapper,
+  visible
+};
+const cursor = "_cursor_1dgwb_2";
+const cursorBorder = "_cursorBorder_1dgwb_10";
+const cursorFilling = "_cursorFilling_1dgwb_25";
+const cursorRipple = "_cursorRipple_1dgwb_39";
+const clicking = "_clicking_1dgwb_57";
+const cursorStyles = {
+  cursor,
+  cursorBorder,
+  cursorFilling,
+  cursorRipple,
+  clicking
+};
+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();
+    this.wrapper.id = "page-agent-runtime_simulator-mask";
+    this.wrapper.className = styles.wrapper;
+    this.wrapper.setAttribute("data-browser-use-ignore", "true");
+    this.wrapper.setAttribute("data-page-agent-ignore", "true");
+    try {
+      const motion = new Motion({
+        mode: isPageDark() ? "dark" : "light",
+        styles: { position: "absolute", inset: "0" }
+      });
+      this.motion = motion;
+      this.wrapper.appendChild(motion.element);
+      motion.autoResize(this.wrapper);
+    } catch (e) {
+      console.warn("[SimulatorMask] Motion overlay unavailable:", e);
+    }
+    this.wrapper.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("mousedown", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("mouseup", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("mousemove", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("wheel", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("keyup", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.#createCursor();
+    document.body.appendChild(this.wrapper);
+    this.#moveCursorToTarget();
+    const movePointerToListener = (event) => {
+      const { x, y } = event.detail;
+      this.setCursorPosition(x, y);
+    };
+    const clickPointerListener = () => {
+      this.triggerClickAnimation();
+    };
+    const enablePassThroughListener = () => {
+      this.wrapper.style.pointerEvents = "none";
+    };
+    const disablePassThroughListener = () => {
+      this.wrapper.style.pointerEvents = "auto";
+    };
+    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);
+    });
+  }
+  #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) {
+    if (this.#disposed) return;
+    this.#targetCursorX = x;
+    this.#targetCursorY = y;
+  }
+  triggerClickAnimation() {
+    if (this.#disposed) return;
+    this.#cursor.classList.remove(cursorStyles.clicking);
+    this.#cursor.getBoundingClientRect();
+    this.#cursor.classList.add(cursorStyles.clicking);
+  }
+  show() {
+    if (this.shown || this.#disposed) return;
+    this.shown = true;
+    this.motion?.start();
+    this.motion?.fadeIn();
+    this.wrapper.classList.add(styles.visible);
+    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 || this.#disposed) return;
+    this.shown = false;
+    this.motion?.fadeOut();
+    this.motion?.pause();
+    this.#cursor.classList.remove(cursorStyles.clicking);
+    setTimeout(() => {
+      this.wrapper.classList.remove(styles.visible);
+    }, 800);
+  }
+  dispose() {
+    this.#disposed = true;
+    this.motion?.dispose();
+    this.wrapper.remove();
+    this.dispatchEvent(new Event("dispose"));
+  }
+}
+export {
+  SimulatorMask
+};
+//# sourceMappingURL=SimulatorMask-DIoKZt1z.js.map

package/dist/esm/SimulatorMask-DIoKZt1z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimulatorMask-DIoKZt1z.js","sources":["../../vendor/page-agent/packages/page-controller/src/mask/checkDarkMode.ts","../../vendor/page-agent/packages/page-controller/src/mask/SimulatorMask.ts"],"sourcesContent":["/**\n * A comprehensive function to determine if the page is currently in a dark theme.\n * Heuristic check. Only work for common patterns. Return false by default.\n */\nexport function isPageDark() {\n\ttry {\n\t\tif (hasDarkModeClass()) return true\n\t\tif (hasDarkModeDataAttribute()) return true\n\t\tif (isColorSchemeDark()) return true\n\t\tif (isBackgroundDark()) return true\n\t\tif (isMainContentBackgroundDark()) return true\n\t\tif (isTextColorLight()) return true\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\n/**\n * Checks for common dark mode CSS classes on the html or body elements.\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\treturn false\n}\n\n/**\n * Some UI frameworks use data attributes to indicate theme\n */\nfunction hasDarkModeDataAttribute() {\n\tconst htmlElement = document.documentElement\n\tconst bodyElement = document.body || document.documentElement // can be null in some cases\n\n\tconst dataAttrs = ['data-theme', 'data-color-mode', 'data-bs-theme', 'data-mui-color-scheme']\n\tfor (const attr of dataAttrs) {\n\t\tconst bodyValue = bodyElement?.getAttribute(attr)\n\t\tconst htmlValue = htmlElement.getAttribute(attr)\n\n\t\tif (bodyValue?.toLowerCase() === 'dark' || htmlValue?.toLowerCase() === 'dark') {\n\t\t\treturn true\n\t\t}\n\t}\n\n\treturn false\n}\n\n/**\n * Checks the CSS `color-scheme` property and `<meta name=\"color-scheme\">` tag.\n * Only \"dark\"/\"only dark\" counts as dark; \"light dark\" is ambiguous and ignored.\n */\nfunction isColorSchemeDark() {\n\t// Check <meta name=\"color-scheme\" content=\"dark\">\n\tconst meta = document.querySelector<HTMLMetaElement>('meta[name=\"color-scheme\"]')\n\tconst metaContent = meta?.content.toLowerCase()\n\tif (metaContent === 'dark' || metaContent === 'only dark') return true\n\n\t// Check the computed color-scheme CSS property on :root\n\tconst rootStyle = window.getComputedStyle(document.documentElement)\n\tconst colorScheme = rootStyle.getPropertyValue('color-scheme').trim().toLowerCase()\n\treturn colorScheme === 'dark' || colorScheme === 'only dark'\n}\n\n/**\n * Checks the background color of the body element to determine if the page is dark.\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 * Checks if the text color on the body is light, which implies a dark background.\n */\nfunction isTextColorLight() {\n\t/** Luminance (0-255) above which body text is considered light */\n\tconst LIGHT_TEXT_LUMINANCE = 200\n\n\tconst bodyStyle = window.getComputedStyle(document.body || document.documentElement)\n\tconst luminance = getLuminance(bodyStyle.color)\n\n\t// Light text has high luminance (e.g. white text on dark bg)\n\treturn luminance !== null && luminance > LIGHT_TEXT_LUMINANCE\n}\n\n/**\n * Checks the background color of major layout elements (#app, #root, etc.).\n * Many SPAs render into a container that may have its own dark background while\n * <body> remains transparent.\n */\nfunction isMainContentBackgroundDark() {\n\tconst { innerWidth: vw, innerHeight: vh } = window\n\tconst minArea = vw * vh * 0.5\n\n\tconst selectors = ['#app', '#root', '#__next']\n\tfor (const selector of selectors) {\n\t\tconst el = document.querySelector(selector)\n\t\tif (!el) continue\n\n\t\tconst rect = el.getBoundingClientRect()\n\t\tif (rect.width * rect.height < minArea) continue\n\n\t\tif (isColorDark(window.getComputedStyle(el).backgroundColor)) return true\n\t}\n\treturn false\n}\n\n// --- utils ---\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 * Calculates the perceived luminance (0-255) of a CSS color string.\n * @param {string} colorString - e.g., \"rgb(50, 50, 50)\" or \"rgba(0, 0, 0, 0.5)\"\n * @returns {number|null} - The luminance, or null if the color is transparent or unparseable.\n */\nfunction getLuminance(colorString: string): number | null {\n\tif (!colorString || colorString === 'transparent' || colorString.startsWith('rgba(0, 0, 0, 0)')) {\n\t\treturn null // Transparent has no meaningful luminance\n\t}\n\n\tconst rgb = parseRgbColor(colorString)\n\tif (!rgb) {\n\t\treturn null // Could not parse color\n\t}\n\n\t// Standard perceived luminance formula\n\treturn 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b\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 */\nfunction isColorDark(colorString: string, threshold = 128) {\n\tconst luminance = getLuminance(colorString)\n\treturn luminance !== null && luminance < threshold\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\tthis.#cursor.getBoundingClientRect()\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\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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"}