buninu-browser 0.6.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,
@@ -44,15 +48,10 @@ export class CdpServer {
       const offset = frame?.scrollOffset;
       const scrollOffset = Number.isFinite(offset?.x) && Number.isFinite(offset?.y)
         ? { x: offset.x, y: offset.y } : null;
-      for (const target of state.targets.values()) {
-        if (target.screencast && target.screencastEmit) {
-          target.screencastScrollOffset = scrollOffset;
-          pushScreencastFrame(context, state, target);
-        }
-      }
-      if (state.implicitTarget?.screencast) {
-        state.implicitTarget.screencastScrollOffset = scrollOffset;
-        pushScreencastFrame(context, state, state.implicitTarget);
+      for (const target of [...state.targets.values(), state.implicitTarget]) {
+        if (!target) continue;
+        for (const stream of screencasts(target)) stream.scrollOffset = scrollOffset;
+        void pushScreencastFrame(context, state, target);
       }
     });
     context.onLifecycle?.((name) => {
@@ -173,6 +172,8 @@ export class CdpServer {
             const msg = JSON.parse(text);
             id = msg.id;
             sessionId = msg.sessionId;
+            if (sessionId && state.sessionOwners.get(sessionId) !== ws)
+              throw Error("No session owned by this connection");
             let dispatchSessionId = sessionId;
             if (!dispatchSessionId && ws.data?.targetId) {
               dispatchSessionId = `page-${ws.data.targetId}`;
@@ -218,13 +219,19 @@ export class CdpServer {
           }
         },
         close(ws) {
+          state.dialogListeners.delete(ws);
           for (const target of state.targets.values()) {
-            if (target.screencastEmit?.owner === ws) stopScreencast(target);
+            stopScreencast(target, ws);
             if (target.lifecycleEmit?.owner === ws) target.lifecycleEmit = null;
           }
           const implicit = state.implicitTarget;
-          if (implicit?.screencastEmit?.owner === ws) stopScreencast(implicit);
+          if (implicit) stopScreencast(implicit, ws);
           if (implicit?.lifecycleEmit?.owner === ws) implicit.lifecycleEmit = null;
+          for (const [id, owner] of state.sessionOwners) {
+            if (owner !== ws) continue;
+            state.sessionOwners.delete(id);
+            state.sessions.delete(id);
+          }
           serverLog("[CdpServer] client disconnected");
         },
       },
@@ -288,6 +295,8 @@ function createCdpState() {
     nextScreencastFrameId: 1,
     targets: new Map(),
     sessions: new Map(),
+    sessionOwners: new Map(),
+    dialogListeners: new Map(),
     objects: new Map(),
     initialNavigations: new Map(),
     implicitTarget: null,
@@ -329,6 +338,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
         const target = state.targets.get(targetId);
         target.attached = true;
         state.sessions.set(attachedSessionId, targetId);
+        state.sessionOwners.set(attachedSessionId, emit.owner);
         emit("Target.attachedToTarget", {
           sessionId: attachedSessionId,
           targetInfo: createTargetInfo(target),
@@ -345,6 +355,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       const sessionId = `session-${state.nextSessionId++}`;
       target.attached = true;
       state.sessions.set(sessionId, params.targetId);
+      state.sessionOwners.set(sessionId, emit.owner);
       return { sessionId };
     }
     case "Target.getTargets":
@@ -378,6 +389,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       for (const [attachedSessionId, targetId] of state.sessions) {
         if (targetId !== params.targetId) continue;
         state.sessions.delete(attachedSessionId);
+        state.sessionOwners.delete(attachedSessionId);
         emit("Target.detachedFromTarget", {
           sessionId: attachedSessionId,
           targetId,
@@ -387,11 +399,31 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       emit("Target.targetDestroyed", { targetId: params.targetId });
       return { success: true };
     }
-    case "Target.detachFromTarget":
+    case "Target.detachFromTarget": {
+      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": {
+      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.enable":
+    }
+    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);
@@ -470,7 +502,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       // A javascript: URL runs in the current document: no new loader or history entry.
       if (/^\s*javascript:/i.test(String(params.url))) {
         await ctx.navigate?.(String(params.url).trim());
-        if (target.screencast) await pushScreencastFrame(ctx, state, target);
+        if (target.screencasts.size) await pushScreencastFrame(ctx, state, target);
         return { frameId: target.frameId, loaderId: target.loaderId };
       }
       // Events of the next document belong to its new loader.
@@ -479,7 +511,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       navigateTarget(state, target, params.url, emit, { addHistory: true });
       target.title = await getContextTitle(ctx, target);
       target.history[target.historyIndex].title = target.title;
-      if (target.screencast) {
+      if (target.screencasts.size) {
         await pushScreencastFrame(ctx, state, target);
       }
       state.initialNavigations.get(target.targetId)?.navigated.resolve();
@@ -532,22 +564,26 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
     }
     case "Page.startScreencast": {
       const target = getSessionTarget(state, sessionId);
-      stopScreencast(target);
-      target.screencast = { ...params };
-      target.screencastEmit = emit;
-      // As in Chrome, the reply does not wait for the first frame (nor the
-      // renderer, which may still be starting); frames follow as events.
-      void pushScreencastFrame(ctx, state, target);
+      stopScreencast(target, emit.owner, sessionId ?? null);
+      let sessions = target.screencasts.get(emit.owner);
+      if (!sessions) target.screencasts.set(emit.owner, sessions = new Map());
+      const stream = { params: { ...params }, emit, active: true, busy: false,
+        pending: false, scrollOffset: null, frames: new Set() };
+      sessions.set(sessionId ?? null, stream);
+      // Do not wait for a capture; each viewer owns its own backpressure.
+      void pushScreencastFrame(ctx, state, target, stream);
       return {};
     }
     case "Page.screencastFrameAck": {
       const target = getSessionTarget(state, sessionId);
-      if (target.screencastFrames.delete(params.sessionId) && target.screencastPending) void pushScreencastFrame(ctx, state, target);
+      const stream = target.screencasts.get(emit.owner)?.get(sessionId ?? null);
+      if (stream?.frames.delete(params.sessionId) && stream.pending)
+        void pushScreencastFrame(ctx, state, target, stream);
       return {};
     }
     case "Page.stopScreencast": {
       const target = getSessionTarget(state, sessionId);
-      stopScreencast(target);
+      stopScreencast(target, emit.owner, sessionId ?? null);
       return {};
     }
     case "Page.reload": {
@@ -727,7 +763,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
           navigateTarget(state,target,navigation.url,emit,{addHistory:true});
           target.title=navigation.title ?? await getContextTitle(ctx,target);
           target.history[target.historyIndex].title=target.title;
-          if(target.screencast)await pushScreencastFrame(ctx,state,target);
+          if(target.screencasts.size)await pushScreencastFrame(ctx,state,target);
         }
         return {};
       }
@@ -743,28 +779,34 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
           navigateTarget(state, target, navigation.url, emit, { addHistory: true });
           target.title = navigation.title ?? await getContextTitle(ctx, target);
           target.history[target.historyIndex].title = target.title;
-          if (target.screencast) await pushScreencastFrame(ctx, state, target);
+          if (target.screencasts.size) await pushScreencastFrame(ctx, state, target);
         }
       }
       return {};
     }
     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 ?? "",
@@ -774,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 {};
     }
@@ -848,13 +895,11 @@ 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,
     },
-    screencast: null,
-    screencastScrollOffset: null,
-    screencastFrames: new Set(),
+    screencasts: new Map(),
   };
   state.targets.set(targetId, target);
   state.initialNavigations.set(targetId, {
@@ -898,54 +943,67 @@ function emitLifecycle(target, name) {
 // Bound the amount of image data queued to a slow CDP client. Two outstanding
 // frames keep the pipe moving while acknowledging one; later updates coalesce.
 const MAX_SCREENCAST_FRAMES = 2;
-function stopScreencast(target) {
-  target.screencast = null;
-  target.screencastEmit = null;
-  target.screencastPending = false;
-  target.screencastScrollOffset = null;
-  target.screencastFrames.clear();
+function* screencasts(target) {
+  for (const sessions of target.screencasts.values()) yield* sessions.values();
 }
 
-/** One capture at a time, with bounded unacknowledged frames. */
-async function pushScreencastFrame(ctx, state, target) {
-  if (!target.screencast || !target.screencastEmit) return;
-  if (target.screencastBusy || target.screencastFrames.size >= MAX_SCREENCAST_FRAMES) {
-    target.screencastPending = true;
+// No owner means target destruction. An owner without a session means disconnect.
+function stopScreencast(target, owner, sessionId) {
+  const owners = owner === undefined ? target.screencasts : new Map([[owner, target.screencasts.get(owner)]]);
+  for (const [key, sessions] of owners) {
+    if (!sessions) continue;
+    for (const [id, stream] of sessions) {
+      if (sessionId !== undefined && id !== sessionId) continue;
+      stream.active = false;
+      stream.pending = false;
+      stream.scrollOffset = null;
+      stream.frames.clear();
+      sessions.delete(id);
+    }
+    if (!sessions.size) target.screencasts.delete(key);
+  }
+}
+
+/** One capture at a time per viewer, with bounded unacknowledged frames. */
+async function pushScreencastFrame(ctx, state, target, stream) {
+  if (!stream) {
+    await Promise.all([...screencasts(target)].map(s => pushScreencastFrame(ctx, state, target, s)));
+    return;
+  }
+  if (!stream.active) return;
+  if (stream.busy || stream.frames.size >= MAX_SCREENCAST_FRAMES) {
+    stream.pending = true;
     return;
   }
-  target.screencastBusy = true;
+  stream.busy = true;
   try {
     do {
-      target.screencastPending = false;
-      await emitScreencastFrame(ctx, state, target);
-    } while (target.screencastPending && target.screencast && target.screencastEmit
-      && target.screencastFrames.size < MAX_SCREENCAST_FRAMES);
+      stream.pending = false;
+      await emitScreencastFrame(ctx, state, target, stream);
+    } while (stream.pending && stream.active && stream.frames.size < MAX_SCREENCAST_FRAMES);
   } catch (error) {
     serverError(`[CdpServer] screencast frame failed: ${error?.message ?? error}`);
   } finally {
-    target.screencastBusy = false;
+    stream.busy = false;
   }
 }
 
-async function emitScreencastFrame(ctx, state, target) {
-  const stream = target.screencast, emit = target.screencastEmit;
+async function emitScreencastFrame(ctx, state, target, stream) {
+  const options = stream.params, emit = stream.emit;
   const loaderId = target.loaderId;
-  // This belongs to one invalidation, not a lasting cache. Pending updates
-  // replace it with the latest position; start/restart without one still query.
-  const notifiedOffset = target.screencastScrollOffset;
-  target.screencastScrollOffset = null;
-  // Private zero-area screencast: signal invalidation without rendering pixels.
-  // captureScreenshot keeps its ordinary clip validation.
-  const zeroArea = stream.clip?.width === 0 && stream.clip?.height === 0;
+  // Pending updates replace this snapshot with the latest position.
+  const notifiedOffset = stream.scrollOffset;
+  stream.scrollOffset = null;
+  const zeroArea = options.clip?.width === 0 && options.clip?.height === 0;
   const data = zeroArea
     ? "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Wl6SAAAAABJRU5ErkJggg=="
-    : await screenshotData(ctx, target, stream);
-  if (!data || stream !== target.screencast || emit !== target.screencastEmit || loaderId !== target.loaderId) return;
+    : await screenshotData(ctx, target, options);
+  if (!data || !stream.active || loaderId !== target.loaderId) return;
   const scrollOffset = zeroArea && notifiedOffset ? notifiedOffset
     : await ctx.scrollOffset?.() ?? { x: 0, y: 0 };
-  if (stream !== target.screencast || emit !== target.screencastEmit || loaderId !== target.loaderId) return;
+  if (!stream.active || loaderId !== target.loaderId) return;
   const sessionId = state.nextScreencastFrameId++;
-  target.screencastFrames.add(sessionId);
+  stream.frames.add(sessionId);
   emit("Page.screencastFrame", {
     data,
     metadata: {
@@ -972,7 +1030,7 @@ function getPendingInitialNavigationTarget(state) {
 
 function navigateTarget(state, target, url, emit, options = {}) {
   const deferLifecycle = typeof state.context?.onLifecycle === "function";
-  target.screencastScrollOffset = null;
+  for (const stream of screencasts(target)) stream.scrollOffset = null;
   target.lifecycleEmit = null;
   target.url = url;
   loadDocument(target, url);
@@ -1067,9 +1125,7 @@ function getImplicitTarget(state) {
 
   state.implicitTarget = {
     targetId: "implicit-target",
-    screencast: null,
-    screencastScrollOffset: null,
-    screencastFrames: new Set(),
+    screencasts: new Map(),
     frameId: "implicit-target",
     loaderId: "implicit-loader",
     type: "page",
@@ -1089,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>`;
+ }
+}