buninu-browser 0.7.0 → 0.9.0

package/lib/browser-dialog.js

@@ -0,0 +1,116 @@
+import {FilePicker} from './file-picker.js';
+import {writeClipboard} from "./clipboard.js";
+import {RendererHost} from './renderer/host.js';
+
+// Browser-owned modal UI, isolated from the page's DOM and JavaScript realm.
+// Reuse the normal HTML renderer for scrolling, selection, caret and clipboard.
+export class BrowserDialog {
+  constructor({viewport, background, changed, opened, closed, clipboard}) {
+    Object.assign(this,{viewport,background,changed,opened,closed,clipboard});
+    this.active=null;
+  }
+  open(request,signal) {
+    if(signal?.aborted)return Promise.resolve({accept:false});
+    if(this.active)return Promise.resolve({accept:false});
+    const answer=Promise.withResolvers();
+    const entry={request,answer,host:null,ready:null};this.active=entry;
+    entry.abort=()=>this.finish({accept:false},entry);entry.signal=signal;
+    signal?.addEventListener('abort',entry.abort,{once:true});
+    entry.ready=this.prepare(entry).catch(error=>{if(this.active===entry)console.error('buninu-browser: dialog:',error.message);this.finish({accept:false},entry);});
+    this.opened(request);
+    return answer.promise;
+  }
+  async prepare(entry) {
+    const size=this.viewport();
+    // Capture directly from the compositor: page scripts may be paused in load.
+    let background='';try{background=await this.background();}catch{}
+    if(this.active!==entry)return;
+    const host=new RendererHost({onFrame:()=>{if(this.active===entry)this.changed();},
+      ...(this.clipboard?{clipboardRead:()=>this.clipboard.read(),clipboardWrite:text=>this.clipboard.write(text)}:{})});
+    entry.host=host;
+    await host.call('resize',size.width,size.height,size.deviceScaleFactor);
+    entry.background=background;
+    if(entry.request.type==='file'){entry.picker=new FilePicker(entry.request);await entry.picker.browse('.');}
+    await host.call('loadDocument',{url:'about:dialog',source:entry.picker?entry.picker.document(size,background):dialogDocument(entry.request,size,background),contentType:'text/html'});
+    if(this.active===entry)this.changed();
+  }
+  async invoke(method,...args) {
+    const entry=this.active;if(!entry)return;
+    await entry.ready;
+    if(this.active!==entry||!entry.host)return;
+    if(method==='press' && (args[1]?.modifiers & 6) && String(args[0]).toLowerCase()==='c') {
+      const selected=await entry.host.call('evaluate','window.getSelection().toString()');
+      if(selected){if(this.clipboard)await this.clipboard.write(selected);else await writeClipboard(selected);return;}
+    }
+    const value=method==='screenshot'||method==='scrollOffset'||method==='scroll'
+      ? await entry.host.composite(method,...args):await entry.host.call(method,...args);
+    if(['press','type','click'].includes(method)) {
+      if(entry.picker){const action=await entry.host.call('evaluate','window.__fileAction');
+        if(action){await entry.host.call('evaluate','window.__fileAction=null');
+          const directory=entry.picker.directory;
+          const scroll=await entry.host.call('evaluate','[document.getElementById("message").scrollTop,document.getElementById("dialog").scrollTop]');
+          const answer=await entry.picker.action(action);
+          if(answer){this.finish(answer,entry);return value;}
+          await entry.host.call('loadDocument',{url:'about:dialog',source:entry.picker.document(this.viewport(),entry.background),contentType:'text/html'});
+          if(directory===entry.picker.directory)await entry.host.call('evaluate',`document.getElementById('message').scrollTop=${Number(scroll?.[0])||0};document.getElementById('dialog').scrollTop=${Number(scroll?.[1])||0}`);
+          this.changed();}
+      }
+      const result=await entry.host.call('evaluate','window.__dialogAnswer');
+      if(result && typeof result.accept==='boolean')this.finish(result,entry);
+    }
+    return value;
+  }
+  async resize(width,height,dpr) {
+    const entry=this.active;if(!entry)return;
+    await entry.ready;if(this.active!==entry)return;
+    await entry.host.call('resize',width,height,dpr);
+    const w=Math.max(1,Math.min(entry.picker?720:480,width-24)),x=Math.max(0,(width-w)/2),y=Math.min(48,Math.max(0,height/12));
+    await entry.host.call('evaluate',`Object.assign(document.getElementById('dialog').style,{width:'${w}px',left:'${x}px',top:'${y}px',maxHeight:'${Math.max(1,height-y-8)}px'});document.getElementById('message').style.maxHeight='${Math.max(20,height-y-180)}px';`);
+    this.changed();
+  }
+  finish(result,entry=this.active) {
+    if(!entry||this.active!==entry)return;
+    this.active=null;
+    entry.signal?.removeEventListener('abort',entry.abort);
+    entry.host?.close();
+    entry.answer.resolve({accept:Boolean(result.accept),promptText:String(result.promptText??''),...(entry.picker?{files:result.files??[]}: {})});
+    this.closed(result);this.changed();
+  }
+  close(){this.finish({accept:false});}
+}
+
+export function dialogDocument({type,message,defaultPrompt='',url=''}, {width,height}, background='') {
+  const escape=value=>Bun.escapeHTML(String(value));
+  const w=Math.max(1,Math.min(480,width-24)),x=Math.max(0,(width-w)/2),y=Math.min(48,Math.max(0,height/12));
+  const maxMessage=Math.max(20,height-y-180);
+  let origin;try{origin=new URL(url).origin;}catch{origin='';}
+  if(!origin||origin==='null')origin='This page';
+  return `<!doctype html><meta charset="utf-8"><style>
+html,body{margin:0;width:100%;height:100%;overflow:hidden;font:16px sans-serif;color:#202124}
+body{background:#444}#background{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none}
+#shade{position:fixed;inset:0;background:rgba(0,0,0,.4)}
+#dialog{position:absolute;left:${x}px;top:${y}px;width:${w}px;max-height:${Math.max(1,height-y-8)}px;overflow:auto;box-sizing:border-box;padding:20px;background:#fff;border:1px solid #aaa;border-radius:12px}
+h2{font-size:16px;margin:0 0 16px}#message{white-space:pre-wrap;overflow-wrap:anywhere;max-height:${maxMessage}px;overflow:auto;user-select:text;margin-bottom:16px;outline:none}
+input{display:block;box-sizing:border-box;width:100%;font:16px sans-serif;padding:8px;margin-bottom:16px}
+#buttons{display:flex;justify-content:flex-end;gap:8px}button{font:14px sans-serif;padding:8px 18px;border:1px solid #888;border-radius:6px;background:#fff;color:#202124}#ok{background:#1769d2;color:white}
+</style>${background?`<img id="background" src="data:image/png;base64,${background}">`:''}<div id="shade"></div><section id="dialog" role="${type==='alert'?'alertdialog':'dialog'}" aria-modal="true" aria-labelledby="heading" aria-describedby="message">
+<h2 id="heading">${escape(origin)} says</h2><div id="message" tabindex="0">${escape(message)}</div>
+${type==='prompt'?`<input id="answer" aria-label="Response" value="${escape(defaultPrompt)}">`:''}
+<div id="buttons">${type!=='alert'?'<button id="cancel" onclick="finish(false)">Cancel</button>':''}<button id="ok" onclick="finish(true)">OK</button></div></section>
+<script>
+window.__dialogAnswer=null;
+function finish(accept){window.__dialogAnswer={accept:accept,promptText:document.getElementById('answer')?.value||''};}
+document.addEventListener('keydown',function(e){
+  const active=document.activeElement;
+  if(e.key==='Escape'){e.preventDefault();finish(false);}
+  else if(e.key==='Enter'||(e.key===' '&&active?.tagName==='BUTTON')){e.preventDefault();finish(active?.id!=='cancel');}
+  else if(active?.tagName!=='INPUT'&&!e.ctrlKey&&!e.metaKey&&!e.altKey){
+    const message=document.getElementById('message'),step=Math.max(20,message.clientHeight-20);
+    const delta={ArrowUp:-31,ArrowDown:31,PageUp:-step,PageDown:step,' ':step}[e.key];
+    if(delta!==undefined){e.preventDefault();message.scrollTop+=delta;}
+    else if(e.key==='Home'||e.key==='End'){e.preventDefault();message.scrollTop=e.key==='Home'?0:message.scrollHeight;}
+  }
+});
+const input=document.getElementById('answer');if(input){input.focus();input.select();}else document.getElementById('message').focus();
+</script>`;
+}

package/lib/cdp-server.js

@@ -36,6 +36,10 @@ export class CdpServer {
     const context = this.#context;
     const state = createCdpState();
     state.context = context;
+    context.onDialog?.((request, result) => {
+      for(const sessions of state.dialogListeners.values())for(const emit of sessions.values())
+        emit(request?'Page.javascriptDialogOpening':'Page.javascriptDialogClosed',request?{...request,hasBrowserHandler:true}:{result:result.accept,userInput:result.promptText??''});
+    });
     const remoteAllowOrigins = parseAllowedOrigins(options.remoteAllowOrigins);
     // Pages change on their own (loading stages, scripts, compositor
     // scrolling): push a screencast frame whenever the context reports one,
@@ -215,6 +219,7 @@ export class CdpServer {
           }
         },
         close(ws) {
+          state.dialogListeners.delete(ws);
           for (const target of state.targets.values()) {
             stopScreencast(target, ws);
             if (target.lifecycleEmit?.owner === ws) target.lifecycleEmit = null;
@@ -291,6 +296,7 @@ function createCdpState() {
     targets: new Map(),
     sessions: new Map(),
     sessionOwners: new Map(),
+    dialogListeners: new Map(),
     objects: new Map(),
     initialNavigations: new Map(),
     implicitTarget: null,
@@ -397,12 +403,27 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       const target = state.targets.get(state.sessions.get(params.sessionId));
       if (state.sessionOwners.get(params.sessionId) !== emit.owner) throw Error("No session owned by this connection");
       if (target) stopScreencast(target, emit.owner, params.sessionId);
+      state.dialogListeners.get(emit.owner)?.delete(params.sessionId);
       state.sessions.delete(params.sessionId);
       state.sessionOwners.delete(params.sessionId);
       return {};
     }
-    case "Page.enable":
+    case "Page.enable": {
+      let sessions=state.dialogListeners.get(emit.owner);
+      if(!sessions)state.dialogListeners.set(emit.owner,sessions=new Map());
+      sessions.set(sessionId??null,emit);
+      if(ctx.dialogState)emit('Page.javascriptDialogOpening',{...ctx.dialogState,hasBrowserHandler:true});
+      return {};
+    }
+    case "Page.disable": {
+      state.dialogListeners.get(emit.owner)?.delete(sessionId??null);
       return {};
+    }
+    case "Page.handleJavaScriptDialog": {
+      if(!ctx.dialogState)throw Error('No JavaScript dialog is open');
+      ctx.handleDialog?.({accept:Boolean(params.accept),promptText:String(params.promptText??'')});
+      return {};
+    }
     case "Page.getResourceContent": {
       // The main document only: its bytes exactly as they arrived.
       const resource = await ctx.resourceContent?.(params.url);
@@ -765,21 +786,27 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
     }
     case "Input.dispatchKeyEvent": {
       const target = getSessionTarget(state, sessionId);
-      const key = params.key ?? params.text ?? "";
-      const signature = `${params.code ?? key}:${params.modifiers ?? 0}`;
+      const key = params.type === 'char' ? params.key || params.text || '' : params.key ?? params.text ?? '';
+      // Several real or synthesized keys may be held simultaneously. Releasing
+      // one key must not erase another key's state or duplicate its char event.
+      const signature = params.code || key;
+      const held = target.cdpKeysDown ??= new Map();
       if (params.type === "rawKeyDown" || params.type === "keyDown") {
-        if (target.cdpKeyDown !== signature || params.autoRepeat) {
+        if (!held.has(signature) || params.autoRepeat) {
+          // Record arrival order before awaiting renderer IPC. A later key-up
+          // must not be overwritten when a slow key-down finally completes.
+          held.set(signature,key);
           await ctx.press?.(key, {
+            eventType: "keydown",
             modifiers: params.modifiers ?? 0,
             text: params.text ?? "",
             code: params.code ?? "",
             repeat: !!params.autoRepeat,
             windowsVirtualKeyCode: params.windowsVirtualKeyCode,
           });
-          target.cdpKeyDown = signature;
         }
       } else if (params.type === "char") {
-        if (!target.cdpKeyDown) {
+        if (!held.has(signature) && (params.code || ![...held.values()].includes(key))) {
           await ctx.press?.(key, {
             modifiers: params.modifiers ?? 0,
             text: params.text ?? "",
@@ -789,7 +816,12 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
           });
         }
       } else if (params.type === "keyUp") {
-        target.cdpKeyDown = null;
+        if(params.code)held.delete(signature);
+        else for(const [id,value] of held)if(id===signature||value===key)held.delete(id);
+        await ctx.press?.(key, {
+          eventType: "keyup", modifiers: params.modifiers ?? 0,
+          code: params.code ?? "", windowsVirtualKeyCode: params.windowsVirtualKeyCode,
+        });
       }
       return {};
     }
@@ -863,8 +895,8 @@ function createTarget(state, url = "about:blank", options = {}) {
     history: [{ id: state.nextHistoryEntryId++, url, title: "" }],
     historyIndex: 0,
     viewport: {
-      width: options.width ?? 800,
-      height: options.height ?? 600,
+      width: options.width ?? state.context?.viewport?.width ?? 800,
+      height: options.height ?? state.context?.viewport?.height ?? 600,
       deviceScaleFactor: 1,
     },
     screencasts: new Map(),
@@ -1113,8 +1145,8 @@ function getImplicitTarget(state) {
     ],
     historyIndex: 0,
     viewport: {
-      width: 800,
-      height: 600,
+      width: state.context?.viewport?.width ?? 800,
+      height: state.context?.viewport?.height ?? 600,
       deviceScaleFactor: 1,
     },
   };

package/lib/file-picker.js

@@ -0,0 +1,48 @@
+import {readdir,stat,realpath} from 'node:fs/promises';
+import {resolve,dirname} from 'node:path';
+import {homedir} from 'node:os';
+const esc=value=>Bun.escapeHTML(String(value));
+export class FilePicker {
+ constructor(request){this.request=request;this.directory=homedir();this.selected=new Map();this.entries=[];this.error='';}
+ async browse(path){
+  try {const directory=await realpath(resolve(this.directory,path));const entries=await readdir(directory,{withFileTypes:true});
+   this.directory=directory;this.entries=[];
+   for(const e of entries){let folder=e.isDirectory();if(e.isSymbolicLink()){try{folder=(await stat(resolve(directory,e.name))).isDirectory();}catch{continue;}}
+    this.entries.push({name:e.name,path:resolve(directory,e.name),folder});}
+   this.entries.sort((a,b)=>Number(b.folder)-Number(a.folder)||a.name.localeCompare(b.name));this.error='';
+  }catch(e){this.error=e.message;}
+ }
+ async action(action){
+  if(action.kind==='browse'){await this.browse(action.path);return;}
+  if(action.kind==='up'){await this.browse(dirname(this.directory));return;}
+  if(action.kind==='select'){
+   const entry=this.entries[action.index];if(!entry)return;
+   if(entry.folder){await this.browse(entry.path);return;}
+   if(this.selected.has(entry.path))this.selected.delete(entry.path);
+   else {if(!this.request.multiple)this.selected.clear();this.selected.set(entry.path,entry.name);}return;
+  }
+  if(action.kind==='open'){
+   try{const files=[];let total=0;
+    for(const [path,name] of this.selected){const file=Bun.file(path);const info=await stat(path);if(!info.isFile())continue;
+     total+=info.size;if(total>32*1024*1024)throw Error('Please select at most 32 MiB at a time.');
+     const bytes=new Uint8Array(await file.slice(0,info.size+1).arrayBuffer());
+     if(bytes.length>info.size)throw Error('The selected file changed; please select it again.');
+     files.push({name,type:file.type,lastModified:info.mtimeMs,data:bytes.toBase64()});}
+    if(files.length)return {accept:true,files};
+   }catch(e){this.error=e.message;}
+  }
+ }
+ document({width,height},background=''){
+  const w=Math.max(1,Math.min(720,width-24)),h=Math.max(80,height-100);
+  const entries=this.entries.map((e,index)=>`<button class="entry" onclick="act({kind:'select',index:${index}})">${this.selected.has(e.path)?'☑ ':''}${e.folder?'📁':/\.(png|jpe?g|webp|gif|svg)$/i.test(e.name)?'🖼️':/\.(mp3|wav|ogg)$/i.test(e.name)?'🎵':'📄'} ${esc(e.name)}</button>`).join('');
+  return `<!doctype html><meta charset="utf-8"><style>
+body{margin:0;font:16px sans-serif;color:#202124;background:#444}#background{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#shade{position:fixed;inset:0;background:rgba(0,0,0,.4)}
+#dialog{position:absolute;left:${Math.max(0,(width-w)/2)}px;top:24px;width:${w}px;max-height:${height-32}px;box-sizing:border-box;overflow:auto;background:white;padding:16px;border:1px solid #aaa;border-radius:10px}
+h2{font-size:18px;margin:0 0 12px}input{width:100%;box-sizing:border-box;font:16px sans-serif;padding:6px}button{font:16px sans-serif;padding:7px;margin:2px;border:1px solid #bbb;border-radius:4px;background:#fafafa;color:#111}
+#message{max-height:${Math.max(50,h-220)}px;overflow:auto}.entry{display:block;width:98%;text-align:left;overflow-wrap:anywhere}.footer{margin-top:10px}#error{color:#a00}#chosen{font-size:13px;overflow-wrap:anywhere}</style>
+${background?`<img id="background" src="data:image/png;base64,${background}">`:''}<div id="shade"></div><section id="dialog" role="dialog" aria-modal="true"><h2>Choose ${this.request.multiple?'files':'a file'}</h2>
+<input id="path" aria-label="Folder" value="${esc(this.directory)}"><button onclick="act({kind:'browse',path:document.getElementById('path').value})">Go</button><button onclick="act({kind:'up'})">📁 Up</button>
+<div id="error">${esc(this.error)}</div><div id="message">${entries||'Empty folder'}</div><div id="chosen">${esc([...this.selected.values()].join(', '))}</div><div class="footer"><button onclick="window.__dialogAnswer={accept:false}">Cancel</button><button onclick="act({kind:'open'})">Open</button></div></section>
+<script>window.__dialogAnswer=null;window.__fileAction=null;function act(a){window.__fileAction=a;}document.addEventListener('keydown',e=>{if(e.key==='Escape')window.__dialogAnswer={accept:false};else if(e.key==='Enter'){e.preventDefault();act(document.activeElement.id==='path'?{kind:'browse',path:document.getElementById('path').value}:{kind:'open'});}});</script>`;
+ }
+}

package/lib/headless-shell.js

@@ -1,3 +1,4 @@
+import {BrowserDialog} from "./browser-dialog.js";
 // qml handle begin: select a dedicated local application renderer
 import {isQmlDocument} from './qml/format.js';
 // Local QML uses a dedicated host renderer.
@@ -15,6 +16,7 @@ import {isQmlDocument} from './qml/format.js';
  * always passes it) but ignored. `--dangerously-allow-host-js` relaxes
  * the renderer sandbox for every page.
  */
+import { parseWindowSize } from "./window-size.js";
 import { CdpServer } from "./cdp-server.js";
 import { DEFAULT_DOWNLOAD_DIR, isAttachment, saveDownload, suggestedFilename } from "./download.js";
 import { audioDemoDocument, displayDocument } from "./document-types.js";
@@ -31,6 +33,7 @@ export const DANGEROUSLY_ALLOW_HOST_JS = "--dangerously-allow-host-js";
 
 export async function runHeadlessShell(args = Bun.argv.slice(2)) {
   installLog(logFileFromEnv());
+  const initialViewport = parseWindowSize(args);
   const allowHostJs = args.includes(DANGEROUSLY_ALLOW_HOST_JS);
   if (args.includes("--no-sandbox")) {
     console.error(`buninu-browser: --no-sandbox is ignored; use ${DANGEROUSLY_ALLOW_HOST_JS} to disable the page sandbox`);
@@ -44,7 +47,7 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
 
   // The endpoint opens while the first renderer starts: a client's first
   // navigation fetches its document meanwhile.
-  const browser = await createBrowser({ allowHostJs, mobile, webkit: webkitFromArgs(args), waitForRenderer: false });
+  const browser = await createBrowser({ initialViewport, allowHostJs, mobile, webkit: webkitFromArgs(args), waitForRenderer: false });
   const portArgument = args.find((argument) => argument.startsWith("--remote-debugging-port="));
   const requestedPort = Number(portArgument?.slice("--remote-debugging-port=".length) ?? 9222);
   const server = CdpServer.create(browser.context).listen(requestedPort, "127.0.0.1");
@@ -85,14 +88,14 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
  * anything that needs a renderer waits for it.
  *
  * @param {{ allowHostJs?: boolean, spareRenderer?: boolean, network?: NetworkService, rendererTimeout?: number,
- *   waitForRenderer?: boolean, mobile?: boolean, webkit?: boolean,
+ *   waitForRenderer?: boolean, mobile?: boolean, webkit?: boolean, initialViewport?: {width: number, height: number},
  *   clipboard?: {read: Function, write: Function} }} options
  * WebKit identity defaults on; webkit: false selects Chromium. Mobile takes priority.
  */
 export async function createBrowser({
   allowHostJs = false, spareRenderer = true, network = new NetworkService(), rendererTimeout = 0, mobile = false,
   waitForRenderer = true, webkit = true,
-  clipboard = null,
+  clipboard = null, initialViewport = { width: 800, height: 600 },
 } = {}) {
   // Explicit presentation profiles fix the identity for requests and scripts.
   const initialUserAgent = mobile ? MOBILE_USER_AGENT : webkit ? WEBKIT_USER_AGENT : DESKTOP_USER_AGENT;
@@ -111,12 +114,18 @@ export async function createBrowser({
   let rendererReady = null;
   const documentReady = new WeakMap();
   // Renderer-independent state replayed into every new renderer.
-  const viewport = { width: 800, height: 600, deviceScaleFactor: 1 };
+  const viewport = { ...initialViewport, deviceScaleFactor: 1 };
   let userAgent = webkit ? initialUserAgent : null;
   // Page.addScriptToEvaluateOnNewDocument: source by identifier, run in every new document before its scripts.
   const initScripts = new Map();
   let nextInitScript = 1;
   // Listeners for frame and lifecycle notifications (the CDP server).
+  let dialogHandler = null;
+  const dialogs = new BrowserDialog({viewport:()=>({...viewport}),
+    background:()=>current?.composite('screenshot',{format:'png'}),
+    changed:()=>notify(frameListeners),
+    opened:request=>dialogHandler?.(request),
+    closed:result=>dialogHandler?.(null,result),clipboard});
   const frameListeners = new Set();
   const lifecycleListeners = new Set();
   const downloadListeners = new Set();
@@ -173,6 +182,7 @@ export async function createBrowser({
     // qml handle end
 
     const host = new RendererHost({
+      onDialog: (request,signal) => host===current ? dialogs.open({...request,url:host.documentUrl},signal) : {accept:false},
       // Native frontends supply one clipboard for page APIs and input defaults.
       ...(clipboard?{clipboardRead:()=>clipboard.read(),clipboardWrite:text=>clipboard.write(text)}:{}),
       network,
@@ -327,6 +337,7 @@ export async function createBrowser({
    * restarted renderer).
    */
   async function load(url, invoke = null, downloadName = null, post = null, referrer = null) {
+    dialogs.close();
     const started = performance.now();
     if (downloadName !== null && resource && withoutHash(url) === withoutHash(resource.url)) {
       return download({ url: resource.url, body: resource.body, attributeName: downloadName, totalBytes: resource.body.byteLength });
@@ -428,6 +439,7 @@ export async function createBrowser({
       await call("runJavaScriptURL", resolved);
       return;
     }
+    dialogs.close();
     await rememberScroll();
     let shown = resolved;
     if (!post && downloadName === null && withoutHash(resolved) === withoutHash(currentUrl)) {
@@ -458,6 +470,7 @@ export async function createBrowser({
 
   async function traverseHistory(index) {
     if (index < 0 || index >= history.length || index === historyIndex) return;
+    dialogs.close();
     await rememberScroll();
     historyIndex = index;
     const entry = history[index];
@@ -466,6 +479,10 @@ export async function createBrowser({
   }
 
   const context = {
+    onDialog(handler) { dialogHandler = handler; },
+    get dialogState() { return dialogs.active?.request ?? null; },
+    handleDialog(result) { dialogs.finish(result); },
+    get viewport() { return { ...viewport }; },
     get url() { return currentUrl; },
     navigate,
     get userAgent() { return userAgent ?? initialUserAgent; },
@@ -482,6 +499,7 @@ export async function createBrowser({
     goForward: () => traverseHistory(historyIndex + 1),
     resize(width, height, deviceScaleFactor = 1) {
       Object.assign(viewport, { width, height, deviceScaleFactor });
+      if(dialogs.active){Promise.resolve(applyState("resize",resizeArguments)).catch(()=>{});return dialogs.resize(width,height,deviceScaleFactor);}
       return applyState("resize", resizeArguments);
     },
     setUserAgent(value) {
@@ -501,13 +519,13 @@ export async function createBrowser({
       if (!initScripts.delete(String(identifier))) return;
       applyState("setInitScripts", () => [[...initScripts.values()]]);
     },
-    screenshot: (options = {}) => composite("screenshot", {
+    screenshot: (options = {}) => (dialogs.active ? dialogs.invoke.bind(dialogs) : composite)("screenshot", {
       format: ["jpeg", "webp", "rgba", "bgra"].includes(options.format) ? options.format : "png",
       quality: Number.isFinite(options.quality) ? options.quality : 80,
       optimizeForSpeed: options.optimizeForSpeed === true,
-      clip: options.clip ? {...options.clip,x:options.clip.x/pageScale(),y:options.clip.y/pageScale(),width:options.clip.width/pageScale(),height:options.clip.height/pageScale()} : undefined,
+      clip: options.clip ? {...options.clip,x:options.clip.x/(dialogs.active?1:pageScale()),y:options.clip.y/(dialogs.active?1:pageScale()),width:options.clip.width/(dialogs.active?1:pageScale()),height:options.clip.height/(dialogs.active?1:pageScale())} : undefined,
     }),
-    title: () => call("title"),
+    title: () => dialogs.active ? currentUrl : call("title"),
     /**
      * The document's response body as it arrived (CDP Page.getResourceContent),
      * for the current document's URL with or without its fragment; else null.
@@ -530,6 +548,7 @@ export async function createBrowser({
      * first; the page scrolls when nothing there takes it.
      */
     async scroll(deltaX, deltaY, at = null) {
+      if(dialogs.active)return at?dialogs.invoke("wheel",at.x,at.y,deltaX,deltaY):dialogs.invoke("scroll",deltaX,deltaY);
       const scale = pageScale();
       let left = { x: deltaX / scale, y: deltaY / scale };
       if (at && Number.isFinite(at.x) && Number.isFinite(at.y)) {
@@ -538,9 +557,9 @@ export async function createBrowser({
       }
       return composite("scroll", left.x, left.y);
     },
-    press: (key, options) => call("press", key, options),
-    type: (text) => call("type", text),
-    scrollOffset: () => composite("scrollOffset"),
+    press: (key, options) => dialogs.active ? dialogs.invoke("press",key,options) : call("press", key, options),
+    type: (text) => dialogs.active ? dialogs.invoke("type",text) : call("type", text),
+    scrollOffset: () => dialogs.active ? Promise.resolve({x:0,y:0}) : composite("scrollOffset"),
     /** Calls `listener(frame?)` when the viewport changes, with its measured scroll offset when available. */
     onFrame(listener) {
       frameListeners.add(listener);
@@ -556,12 +575,14 @@ export async function createBrowser({
       return [...reachedLifecycle(committed.host, committed.generation)];
     },
     move(x, y, options = {}) {
+      if(dialogs.active)return dialogs.invoke("move",x,y,options);
       return call("move", x / pageScale(), y / pageScale(), options);
     },
     pointerButton(x, y, button, state, options = {}) {
       return this.click(x, y, {...options, button:button===273?'right':button===274?'middle':'left', phase:state?'down':'up'});
     },
     async click(x, y, options = {}) {
+      if(dialogs.active){await dialogs.invoke("click",x,y,options);return null;}
       const clicked = await call("click", x / pageScale(), y / pageScale(), options);
       const href = typeof clicked === "string" ? clicked : clicked?.url;
       if (typeof href !== "string") return null;
@@ -573,10 +594,10 @@ export async function createBrowser({
         referrer: current.documentUrl });
       return result === null ? null : { url: href, title: await call("title") };
     },
-    evaluate: (expression) => call("evaluate", String(expression)),
+    evaluate: (expression) => dialogs.active ? dialogs.invoke("evaluate",String(expression)) : call("evaluate", String(expression)),
     async cdp(method) {
       if(method==='Page.getLayoutMetrics') {
-        const offset=await composite('scrollOffset');
+        const offset=dialogs.active?{x:0,y:0}:await composite('scrollOffset');
         const visual={pageX:offset.x*pageScale(),pageY:offset.y*pageScale(),offsetX:0,offsetY:0,clientWidth:viewport.width,clientHeight:viewport.height,scale:1,zoom:1};
         return {cssVisualViewport:visual,cssLayoutViewport:visual,visualViewport:visual,layoutViewport:visual};
       }
@@ -612,6 +633,7 @@ export async function createBrowser({
     },
     close() {
       closed = true;
+      dialogs.close();
       cancelSparePreparation();
       current?.close();
       spare?.close();