@three-blocks/devtools 11.0.0 → 11.1.0-alpha.395.g9b8ccb48a515

package/node/worker.mjs

@@ -0,0 +1,1314 @@
+import { register } from 'node:module';
+import { resolveObjectURL } from 'node:buffer';
+import { runInThisContext } from 'node:vm';
+import { formatWithOptions } from 'node:util';
+import { performance as nativePerformance } from 'node:perf_hooks';
+import { setTimeout as delay } from 'node:timers/promises';
+import { installDOM, Canvas, Image, ImageBitmap, registerImageDecoder } from '@onirenaud/node-webgl';
+import { parentPort, workerData, Worker as Thread, MessageChannel, receiveMessageOnPort } from 'node:worker_threads';
+import { createCanvas, loadImage, Image as SkiaImage, ImageData as SkiaImageData } from '@napi-rs/canvas';
+import jpeg from '@cwasm/jpeg-turbo';
+import { installMedia, installExternalTextures } from './media.mjs';
+import { parseHTML, NodeFilter } from 'linkedom';
+import * as domTypes from 'linkedom';
+import { PNG } from 'pngjs';
+import cssEscape from 'css.escape';
+import { CookieJar } from 'tough-cookie';
+import { patchNativeThreeCode } from './loader.mjs';
+import { encodeIPC, decodeIPC } from './ipc.mjs';
+
+const jsonIPC = process.env.THREE_BLOCKS_NODE_JSON_IPC === '1';
+
+let pageURL;
+let pageViewport;
+let cookieJar;
+let gpuEnabled = true;
+let paintPage;
+let importMap = {};
+let surfaceId = 0;
+let networkId = 0;
+let importScopes = {};
+const handles = new Map();
+let handleId = 0;
+const wallNow = nativePerformance.now.bind( nativePerformance );
+const transferredSurfaces = new Map();
+let routes = false;
+let routeId = 0;
+const routeRequests = new Map();
+const surfaces = new Map();
+const canvasTargetBackends = new WeakSet();
+const send = message => {
+
+	if ( parentPort ) parentPort.postMessage( { native: message } );
+	else if ( process.connected ) process.send( jsonIPC ? encodeIPC( message ) : message );
+
+};
+const failure = error => send( { event: 'pageerror', error: error?.stack ?? error?.message ?? String( error ) } );
+const unsupported = feature => { throw new Error( `Unsupported native rendering capability: ${feature}` ); };
+process.on( 'uncaughtException', failure );
+process.on( 'unhandledRejection', error => send( { event: 'unhandledrejection', error: error?.stack ?? String( error ) } ) );
+for ( const level of [ 'log', 'info', 'warn', 'error', 'debug' ] ) console[ level ] = ( ...args ) => send( {
+	event: 'console', level: level === 'warn' ? 'warning' : level, text: formatWithOptions( { depth: 6 }, ...args ),
+} );
+
+const originalFetch = globalThis.fetch;
+const OriginalRequest = globalThis.Request;
+async function routedFetch( input, init, resourceType ) {
+
+	const request = new Request( input instanceof Request ? input : new URL( input, pageURL ), init );
+	if ( routes ) {
+
+		const id = ++ routeId;
+		const response = await new Promise( resolve => {
+
+			routeRequests.set( id, resolve );
+			void request.clone().arrayBuffer().then( body => send( {
+				event: 'route', id, url: request.url, method: request.method, headers: Object.fromEntries( request.headers ), resourceType, body: Buffer.from( body ),
+			} ) );
+
+		} );
+		if ( response?.error ) throw new Error( `Request aborted: ${response.error} (${request.url})` );
+		if ( response ) return new Response( response.body ?? null, {
+			status: response.status ?? 200,
+			headers: { ...response.headers, ...( response.contentType ? { 'content-type': response.contentType } : {} ) },
+		} );
+
+	}
+	return originalFetch( request );
+
+}
+
+async function fetchPage( input, init, resourceType = 'fetch' ) {
+
+	let request = new Request( input instanceof Request ? input : new URL( input, pageURL ), init );
+	const redirectMode = request.redirect;
+	for ( let redirects = 0; ; redirects ++ ) {
+	const sameOrigin = new URL( request.url ).origin === new URL( pageURL ).origin;
+	// Authenticated cross-origin capture needs a CORS implementation, not Node's
+	// unrestricted fetch. Fail closed until an actual capture requires it.
+	if ( ! sameOrigin && request.credentials === 'include' ) unsupported( 'cross-origin credentialed fetch' );
+	const credentials = /^https?:/.test( request.url ) && sameOrigin && request.credentials !== 'omit';
+	const headers = new Headers( request.headers );
+	if ( credentials ) {
+		const cookie = cookieJar.getCookieStringSync( request.url );
+		if ( cookie ) headers.set( 'cookie', cookie );
+	}
+	if ( resourceType !== 'document' && ! [ 'GET', 'HEAD' ].includes( request.method ) ) headers.set( 'origin', new URL( pageURL ).origin );
+	request = new Request( request, { headers, redirect: 'manual' } );
+	const replay = request.clone();
+	const id = `${parentPort ? 'thread' : 'page'}-${++ networkId}-${pageURL}`;
+	send( { event: 'network', phase: 'request', id, url: request.url, method: request.method, headers: Object.fromEntries( request.headers ), resourceType } );
+	try {
+
+		const response = await routedFetch( request, undefined, resourceType );
+		if ( credentials ) {
+			for ( const cookie of response.headers.getSetCookie() ) cookieJar.setCookieSync( cookie, request.url, { ignoreError: true } );
+			if ( response.headers.has( 'set-cookie' ) ) send( { event: 'cookies', cookies: cookieJar.serializeSync() } );
+		}
+		Object.defineProperty( response, 'url', { value: request.url, configurable: true } );
+		Object.defineProperty( response, 'redirected', { value: redirects > 0, configurable: true } );
+		send( { event: 'network', phase: 'response', id, status: response.status, statusText: response.statusText, headers: Object.fromEntries( response.headers ) } );
+		// Drain a clone without delaying the app's streaming reader.
+		void response.clone().arrayBuffer().then( body => send( { event: 'network', phase: 'finished', id, body: Buffer.from( body ) } ), error => send( { event: 'network', phase: 'failed', id, error: String( error ) } ) );
+		if ( [ 301, 302, 303, 307, 308 ].includes( response.status ) && response.headers.has( 'location' ) && redirectMode !== 'manual' ) {
+			if ( redirectMode === 'error' || redirects >= 20 ) throw new TypeError( 'Fetch redirect rejected.' );
+			const next = new URL( response.headers.get( 'location' ), request.url );
+			headers.delete( 'cookie' );
+			if ( next.origin !== new URL( request.url ).origin ) headers.delete( 'authorization' );
+			const get = response.status === 303 && request.method !== 'HEAD' || [ 301, 302 ].includes( response.status ) && request.method === 'POST';
+			if ( get ) { headers.delete( 'content-type' ); headers.delete( 'content-length' ); }
+			request = new Request( next, { method: get ? 'GET' : request.method, headers, credentials: request.credentials, signal: request.signal,
+				...( ! get && ! [ 'GET', 'HEAD' ].includes( request.method ) ? { body: await replay.arrayBuffer() } : {} ) } );
+			await response.body?.cancel();
+			continue;
+		}
+		return response;
+
+	} catch ( error ) { send( { event: 'network', phase: 'failed', id, error: String( error ) } ); throw error; }
+	}
+
+}
+
+function run( source, filename = pageURL ) {
+
+	return runInThisContext( patchNativeThreeCode( source ), {
+		filename,
+		importModuleDynamically: specifier => import( new URL( specifier, pageURL ).href ),
+	} );
+
+}
+
+async function navigate( { url, viewport, scripts: initialScripts = [], routes: intercept, thread, imports = {}, source, blob, scopes = {}, storage = {}, media = [], cookies, gpu = true } ) {
+
+	pageURL = url; pageViewport = viewport; routes = intercept; importMap = imports;
+	cookieJar = cookies ? CookieJar.deserializeSync( cookies ) : new CookieJar();
+	gpuEnabled = gpu;
+	globalThis.Request = class Request extends OriginalRequest {
+
+		constructor( input, init ) { super( input instanceof OriginalRequest ? input : new URL( input, pageURL ), init ); }
+
+	};
+	globalThis.fetch = fetchPage;
+	const response = thread ? null : await fetchPage( url, undefined, 'document' );
+	if ( response && ! response.ok ) throw new Error( `Page ${url}: HTTP ${response.status}` );
+	if ( response?.url ) { url = pageURL = response.url; send( { event: 'url', url } ); }
+	const html = response ? await response.text() : '<html><body></body></html>';
+	const { document, window: dom } = parseHTML( html );
+	// HTML entity callbacks in LinkeDOM split adjacent text nodes. Browsers merge
+	// them, and React hydrates against that single text node.
+	dom.Node.prototype.normalize = function () {
+		for ( let child = this.firstChild; child; ) {
+			if ( child.nodeType === 3 ) {
+				while ( child.nextSibling?.nodeType === 3 ) { child.data += child.nextSibling.data; child.nextSibling.remove(); }
+				const next = child.nextSibling; if ( child.data === '' ) child.remove(); child = next;
+			} else { child.normalize(); child = child.nextSibling; }
+		}
+	};
+	document.normalize();
+	// LinkeDOM assumes head/body adjacency; valid pages can put styles between them.
+	for ( const tag of [ 'head', 'body' ] ) {
+
+		const get = Object.getOwnPropertyDescriptor( Object.getPrototypeOf( document ), tag ).get;
+		Object.defineProperty( document, tag, { get: () => document.querySelector( tag ) ?? get.call( document ) } );
+
+	}
+	installDOM( { fetch: false, innerWidth: viewport.width, innerHeight: viewport.height, frameInterval: viewport.frameIntervalMs ?? 0 } );
+	installAnimationFrames( viewport.frameIntervalMs ?? 0 );
+	globalThis.__THREE_BLOCKS_NATIVE_CANVAS_TARGET__ = installCanvasTargets;
+	FileReader.prototype.fire = function ( type ) {
+
+		const event = new Event( type );
+		// node-webgl 0.2.0 calls property handlers before dispatch sets their target.
+		Object.defineProperties( event, { target: { value: this }, currentTarget: { value: this } } );
+		this[ `on${type}` ]?.call( this, event );
+		this.dispatchEvent( event );
+
+	};
+	const locationURL = new URL( url );
+	const navigateTo = value => { setTimeout( () => send( { event: 'navigate', url: new URL( value, pageURL ).href } ), 0 ); };
+	const location = new Proxy( locationURL, {
+		get( target, key ) { const value = Reflect.get( target, key ); return typeof value === 'function' ? value.bind( target ) : value; },
+		set( target, key, value ) {
+			if ( [ 'href', 'pathname', 'search', 'hash', 'host', 'hostname', 'port', 'protocol' ].includes( key ) ) {
+				const next = key === 'href' ? new URL( value, target.href ) : new URL( target.href );
+				if ( key !== 'href' ) next[ key ] = value;
+				navigateTo( next ); return true;
+			}
+			return Reflect.set( target, key, value );
+		},
+	} );
+	Object.assign( globalThis, { NodeFilter, document, location } );
+	// ponytail: name lookups are snapshots; add a live collection if a caller retains one across mutations.
+	document.getElementsByName = name => [ ...document.querySelectorAll( '[name]' ) ].filter( element => element.getAttribute( 'name' ) === String( name ) );
+	document.queryCommandSupported = () => false;
+	globalThis.CSS = { escape: cssEscape };
+	Object.defineProperties( document, {
+		cookie: { get: () => cookieJar.getCookieStringSync( pageURL, { http: false } ), set: value => {
+			cookieJar.setCookieSync( String( value ), pageURL, { http: false, ignoreError: true } );
+			send( { event: 'cookies', cookies: cookieJar.serializeSync() } );
+		} },
+		location: { get: () => globalThis.location },
+	} );
+	globalThis.Window = class Window { static [ Symbol.hasInstance ]( value ) { return value === globalThis; } };
+	Object.defineProperties( navigator, { userAgent: { configurable: true, value: `Node.js/${process.versions.node} ANGLE/Dawn` }, platform: { configurable: true, value: process.platform } } );
+	navigator.getGamepads = () => []; // Captures have no connected input devices.
+	globalThis.__THREE_BLOCKS_NODE_MEMORY__ = () => process.memoryUsage();
+	globalThis[ Symbol.for( 'three-blocks.native.event-loop-census' ) ] = () => {
+
+		const entries = []; let previous = wallNow();
+		const sample = () => {
+
+			const now = wallNow(), duration = now - previous - 1;
+			if ( duration >= 50 ) entries.push( { startTime: previous + 1, duration } );
+			previous = now;
+
+		};
+		const timer = setInterval( sample, 1 ); timer.unref();
+		return { supported: true, source: 'node-event-loop-delay', entries, flush: sample, disconnect: () => clearInterval( timer ) };
+
+	};
+	for ( const name of [ 'Node', 'Element', 'HTMLElement', 'HTMLCanvasElement', 'HTMLDivElement', 'HTMLDetailsElement', 'Document', 'DOMParser', 'customElements', 'CSSStyleSheet', 'ShadowRoot' ] ) globalThis[ name ] = dom[ name ];
+	for ( const [ name, type ] of Object.entries( domTypes ) ) if ( /^HTML\w+Element$/.test( name ) ) globalThis[ name ] = type;
+	Object.defineProperty( dom.HTMLScriptElement.prototype, 'src', {
+		configurable: true,
+		get() { const value = this.getAttribute( 'src' ); return value === null ? '' : new URL( value, pageURL ).href; },
+		set( value ) { this.setAttribute( 'src', String( value ) ); },
+	} );
+	const elementAttributes = Object.getOwnPropertyDescriptor( dom.Element.prototype, 'attributes' );
+	const liveAttributes = new WeakMap();
+	Object.defineProperty( dom.Element.prototype, 'attributes', { ...elementAttributes, get() {
+
+		if ( ! liveAttributes.has( this ) ) liveAttributes.set( this, new Proxy( {}, { get: ( _target, name ) => {
+
+			const snapshot = elementAttributes.get.call( this ), value = Reflect.get( snapshot, name );
+			return typeof value === 'function' ? value.bind( snapshot ) : value;
+
+		} } ) );
+		return liveAttributes.get( this );
+
+	} } );
+	const elementStyle = Object.getOwnPropertyDescriptor( dom.Element.prototype, 'style' );
+	const styleDeclarations = new WeakMap();
+	Object.defineProperty( dom.Element.prototype, 'style', { ...elementStyle, get() {
+
+		if ( ! styleDeclarations.has( this ) ) styleDeclarations.set( this, new Proxy( elementStyle.get.call( this ), { get( style, name ) {
+
+			if ( name === 'getPropertyValue' ) return property => String( style.getPropertyValue( property ) ?? '' ).replace( /\s*!important\s*$/, '' );
+			if ( name === 'getPropertyPriority' ) return property => /!important\s*$/.test( style.getPropertyValue( property ) ?? '' ) ? 'important' : '';
+			if ( name === 'setProperty' ) return ( property, value, priority = '' ) => { if ( priority === '' || priority === 'important' ) style.setProperty( property, `${value}${priority ? ' !important' : ''}` ); };
+			return Reflect.get( style, name ) ?? ( typeof name === 'string' ? '' : undefined );
+
+		} } ) );
+		return styleDeclarations.get( this );
+
+	} } );
+	const innerHTML = Object.getOwnPropertyDescriptor( dom.Element.prototype, 'innerHTML' );
+	Object.defineProperty( dom.Element.prototype, 'innerHTML', { ...innerHTML, set( value ) { innerHTML.set.call( this, value === null ? '' : String( value ) ); this.normalize(); } } );
+	Object.defineProperty( dom.HTMLElement.prototype, 'innerText', {
+		...Object.getOwnPropertyDescriptor( dom.Element.prototype, 'innerText' ),
+		set( value ) {
+
+			this.replaceChildren();
+			for ( const [ index, line ] of ( value === null ? '' : String( value ) ).split( /\r\n|\r|\n/ ).entries() ) {
+
+				if ( index ) this.appendChild( document.createElement( 'br' ) );
+				this.appendChild( document.createTextNode( line ) );
+
+			}
+
+		},
+	} );
+	Object.defineProperty( dom.ShadowRoot.prototype, 'textContent', Object.getOwnPropertyDescriptor( dom.Element.prototype, 'textContent' ) );
+	const checkedInputs = new WeakMap();
+	Object.defineProperty( dom.HTMLInputElement.prototype, 'checked', { configurable: true,
+		get() { return checkedInputs.get( this ) ?? this.hasAttribute( 'checked' ); },
+		set( value ) { checkedInputs.set( this, Boolean( value ) ); },
+	} );
+	dom.HTMLElement.prototype.click = function () {
+		if ( this.disabled ) return;
+		const checkbox = this.localName === 'input' && this.type === 'checkbox';
+		const previous = this.checked;
+		if ( checkbox ) checkedInputs.set( this, ! previous );
+		if ( ! this.dispatchEvent( new dom.Event( 'click', { bubbles: true, cancelable: true } ) ) ) {
+			if ( checkbox ) checkedInputs.set( this, previous );
+		} else if ( checkbox ) {
+			for ( const type of [ 'input', 'change' ] ) this.dispatchEvent( new dom.Event( type, { bubbles: true } ) );
+		}
+	};
+	// ponytail: the gallery's only WAAPI effect is a linear rotation. Reject
+	// other effects until a capture actually needs a wider animation engine.
+	dom.Element.prototype.animate = function ( keyframes, options ) {
+
+		const angles = Array.isArray( keyframes ) && keyframes.map( frame => /^rotate\((-?[\d.]+)deg\)$/.exec( frame.transform ?? '' ) );
+		if ( ! angles || angles.length !== 2 || angles.some( angle => ! angle ) || options.easing && options.easing !== 'linear' ) unsupported( 'Element.animate effect' );
+		const animation = new EventTarget(), started = wallNow(), duration = Number( options.duration ), iterations = options.iterations ?? 1;
+		if ( ! ( duration > 0 ) || ! ( iterations > 0 ) ) throw new TypeError( 'Animation duration and iterations must be positive.' );
+		let timer, resolve;
+		const previous = this.style.transform;
+		animation.playState = 'running'; animation.finished = new Promise( done => { resolve = done; } );
+		animation.cancel = () => { clearTimeout( timer ); this.style.transform = previous; animation.playState = 'idle'; resolve( animation ); };
+		const tick = () => {
+
+			if ( ! this.isConnected ) { animation.cancel(); return; }
+			const elapsed = wallNow() - started, finished = elapsed >= duration * iterations;
+			const progress = finished ? 1 : elapsed % duration / duration;
+			this.style.transform = `rotate(${Number( angles[ 0 ][ 1 ] ) + ( Number( angles[ 1 ][ 1 ] ) - Number( angles[ 0 ][ 1 ] ) ) * progress}deg)`;
+			if ( finished ) { animation.playState = 'finished'; resolve( animation ); animation.dispatchEvent( new Event( 'finish' ) ); }
+			else timer = setTimeout( tick, 16 );
+
+		};
+		timer = setTimeout( tick, 0 ); return animation;
+
+	};
+	// LinkeDOM mutates dispatch bookkeeping, whereas Node's Event fields are read-only.
+	const dispatchDOMEvent = dom.EventTarget.prototype.dispatchEvent;
+	const addDOMListener = dom.EventTarget.prototype.addEventListener;
+	const removeDOMListener = dom.EventTarget.prototype.removeEventListener;
+	const captureListeners = new WeakMap();
+	dom.EventTarget.prototype.addEventListener = function ( type, listener, options ) {
+
+		if ( options !== true && ! options?.capture ) return addDOMListener.call( this, type, listener, options );
+		if ( ! captureListeners.has( this ) ) captureListeners.set( this, new Map() );
+		const types = captureListeners.get( this );
+		if ( ! types.has( type ) ) types.set( type, new Map() );
+		types.get( type ).set( listener, options );
+
+	};
+	dom.EventTarget.prototype.removeEventListener = function ( type, listener, options ) {
+
+		if ( options === true || options?.capture ) captureListeners.get( this )?.get( type )?.delete( listener );
+		else removeDOMListener.call( this, type, listener );
+
+	};
+	dom.EventTarget.prototype.dispatchEvent = function ( event ) {
+
+		const copy = event instanceof dom.Event ? event : Object.assign(
+			new dom.Event( event.type, { bubbles: event.bubbles, cancelable: event.cancelable, composed: event.composed } ),
+			{ detail: event.detail }, Object.fromEntries( Object.keys( event ).map( key => [ key, event[ key ] ] ) ),
+		);
+		// LinkeDOM only delivers bubbling listeners; details/focus also need capture.
+		const path = [];
+		for ( let node = this; node; node = node._getParent?.() ) path.unshift( node );
+		copy.target = this;
+		for ( const node of path ) {
+
+			copy.currentTarget = node; copy.eventPhase = node === this ? copy.AT_TARGET : copy.CAPTURING_PHASE;
+			for ( const [ listener, options ] of captureListeners.get( node )?.get( copy.type ) ?? [] ) {
+
+				if ( options?.once ) captureListeners.get( node ).get( copy.type ).delete( listener );
+				if ( typeof listener === 'function' ) listener.call( node, copy ); else listener?.handleEvent( copy );
+				if ( copy._stopImmediatePropagationFlag ) break;
+
+			}
+			if ( copy.cancelBubble ) break;
+
+		}
+		const accepted = copy.cancelBubble ? ! copy.defaultPrevented : dispatchDOMEvent.call( this, copy );
+		if ( ! accepted ) event.preventDefault();
+		return accepted;
+
+	};
+	// LinkeDOM parses details as generic HTMLElements. Reflect its boolean state.
+	Object.defineProperty( dom.HTMLDetailsElement, Symbol.hasInstance, { configurable: true, value: element => element?.localName === 'details' } );
+	Object.defineProperty( dom.HTMLElement.prototype, 'open', { configurable: true, get() { return this.localName === 'details' ? this.hasAttribute( 'open' ) : undefined; }, set( value ) {
+
+		if ( this.localName !== 'details' ) { Object.defineProperty( this, 'open', { configurable: true, writable: true, value } ); return; }
+		if ( this.open === Boolean( value ) ) return;
+		this.toggleAttribute( 'open', Boolean( value ) );
+		queueMicrotask( () => this.dispatchEvent( new dom.Event( 'toggle' ) ) );
+
+	} } );
+	let focused;
+	Object.defineProperty( document, 'activeElement', { get: () => focused?.getRootNode()?.host ?? focused ?? document.body } );
+	Object.defineProperty( dom.ShadowRoot.prototype, 'activeElement', { configurable: true, get() { return focused?.getRootNode() === this ? focused : null; } } );
+	dom.HTMLElement.prototype.focus = function () {
+
+		if ( focused === this ) return;
+		focused?.blur(); focused = this;
+		this.dispatchEvent( new dom.Event( 'focus' ) );
+		this.dispatchEvent( new dom.Event( 'focusin', { bubbles: true } ) );
+
+	};
+	dom.HTMLElement.prototype.blur = function () {
+
+		if ( focused !== this ) return;
+		focused = undefined;
+		this.dispatchEvent( new dom.Event( 'blur' ) );
+		this.dispatchEvent( new dom.Event( 'focusout', { bubbles: true } ) );
+
+	};
+	installLayout( dom, viewport, storage, media );
+	Object.assign( locationURL, { reload: () => navigateTo( pageURL ), replace: navigateTo, assign: navigateTo } );
+	const historyEntries = [ { url, state: null } ];
+	let historyIndex = 0;
+	const changeHistory = ( state, value, replace ) => {
+
+		const next = new URL( value ?? location.href, location.href );
+		if ( next.origin !== location.origin ) throw new DOMException( 'History URL must share the document origin.', 'SecurityError' );
+		const entry = { url: next.href, state: structuredClone( state ) };
+		if ( replace ) historyEntries[ historyIndex ] = entry;
+		else { historyEntries.splice( historyIndex + 1, Infinity, entry ); historyIndex ++; }
+		locationURL.href = pageURL = next.href;
+		send( { event: 'url', url: pageURL } );
+
+	};
+	globalThis.history = {
+		get length() { return historyEntries.length; }, get state() { return historyEntries[ historyIndex ].state; }, scrollRestoration: 'auto',
+		pushState: ( state, _unused, value ) => changeHistory( state, value, false ),
+		replaceState: ( state, _unused, value ) => changeHistory( state, value, true ),
+		go( delta = 0 ) {
+
+			if ( delta === 0 ) return location.reload();
+			const next = historyIndex + Math.trunc( delta );
+			if ( next < 0 || next >= historyEntries.length ) return;
+			setTimeout( () => {
+
+				historyIndex = next; locationURL.href = pageURL = historyEntries[ next ].url;
+				send( { event: 'url', url: pageURL } );
+				globalThis.dispatchEvent( Object.assign( new Event( 'popstate' ), { state: history.state } ) );
+
+			}, 0 );
+
+		},
+		back() { this.go( -1 ); }, forward() { this.go( 1 ); },
+	};
+	globalThis.ProgressEvent = class extends Event {
+
+		constructor( type, options ) { super( type ); Object.assign( this, options ); }
+
+	};
+	globalThis.CustomEvent = class extends Event {
+
+		constructor( type, options ) { super( type ); this.detail = options?.detail; }
+
+	};
+	globalThis.UIEvent = class UIEvent extends Event {
+
+		constructor( type, options = {} ) { super( type, options ); this.view = options.view ?? null; this.detail = options.detail ?? 0; }
+
+	};
+	globalThis.KeyboardEvent = class extends UIEvent {
+
+		constructor( type, options = {} ) {
+
+			super( type, options );
+			for ( const key of [ 'key', 'code' ] ) this[ key ] = options[ key ] ?? '';
+			for ( const key of [ 'altKey', 'ctrlKey', 'metaKey', 'shiftKey', 'repeat', 'isComposing' ] ) this[ key ] = options[ key ] ?? false;
+
+		}
+
+	};
+	const events = new EventTarget();
+	if ( ! parentPort ) {
+
+		globalThis.parent = globalThis.top = globalThis;
+		globalThis.postMessage = ( value, targetOrigin = '/' ) => {
+
+			if ( targetOrigin !== '*' && targetOrigin !== '/' && targetOrigin !== location.origin ) return;
+			const data = structuredClone( value );
+			queueMicrotask( () => events.dispatchEvent( new MessageEvent( 'message', { data, origin: location.origin, source: null } ) ) );
+
+		};
+
+	}
+	for ( const method of [ 'addEventListener', 'removeEventListener', 'dispatchEvent' ] ) globalThis[ method ] = events[ method ].bind( events );
+	for ( const name of [ 'PointerEvent', 'MouseEvent', 'WheelEvent' ] ) globalThis[ name ] = class extends dom.Event { constructor( type, options ) { super( type, options ); Object.assign( this, options ); } };
+	globalThis.Worker = NativeWorker;
+	globalThis.OffscreenCanvas = NativeOffscreenCanvas;
+	Object.defineProperty( globalThis, 'crossOriginIsolated', { value: true, configurable: true } );
+	Object.defineProperties( document, {
+		readyState: { value: 'loading', writable: true }, currentScript: { value: null, writable: true }, hidden: { value: false }, visibilityState: { value: 'visible' },
+	} );
+	const createElement = document.createElement.bind( document );
+	const images = new WeakMap();
+	const prepareImage = element => {
+
+		if ( images.has( element ) ) return element;
+		const native = new Image(); images.set( element, native );
+		const setAttribute = element.setAttribute.bind( element );
+		for ( const name of [ 'src', 'currentSrc', 'complete', 'naturalWidth', 'naturalHeight', 'width', 'height', 'crossOrigin', 'decoding' ] ) Object.defineProperty( element, name, {
+			configurable: true, get: () => native[ name ], set: value => {
+				if ( name === 'src' ) { setAttribute( name, value ); value = new URL( value, pageURL ).href; }
+				native[ name ] = value;
+			},
+		} );
+		element.decode = () => native.decode(); element._toRGBA8 = () => native._toRGBA8();
+		element.setAttribute = ( name, value ) => { setAttribute( name, value ); if ( [ 'src', 'width', 'height' ].includes( name ) ) element[ name ] = name === 'src' ? value : Number( value ); };
+		for ( const type of [ 'load', 'error' ] ) native.addEventListener( type, event => {
+
+			globalThis.__THREE_BLOCKS_INVALIDATE_LAYOUT__?.();
+			element.dispatchEvent( Object.assign( new dom.Event( type ), { error: event.error, message: event.message } ) );
+
+		} );
+		if ( element.getAttribute( 'src' ) ) element.src = element.getAttribute( 'src' );
+		return element;
+
+	};
+	globalThis.HTMLImageElement = dom.HTMLImageElement;
+	globalThis.Image = class ImageElement {
+
+		static [ Symbol.hasInstance ]( value ) { return value instanceof dom.HTMLImageElement; }
+		constructor( width, height ) {
+
+			const element = prepareImage( createElement( 'img' ) );
+			if ( width !== undefined ) element.width = width;
+			if ( height !== undefined ) element.height = height;
+			return element;
+
+		}
+
+	};
+	document.createElement = ( tag, ...args ) => {
+
+		if ( tag.toLowerCase() === 'video' ) return new HTMLVideoElement();
+		if ( /^(audio|iframe)$/i.test( tag ) ) unsupported( `<${tag}>` );
+		if ( tag.toLowerCase() === 'img' ) return new globalThis.Image();
+		const element = createElement( tag, ...args );
+		if ( tag.toLowerCase() === 'canvas' ) prepareCanvas( element );
+		return element;
+
+	};
+	const createElementNS = document.createElementNS.bind( document );
+	document.createElementNS = ( ns, tag ) => ns === 'http://www.w3.org/1999/xhtml' ? document.createElement( tag ) : createElementNS( ns, tag );
+	// Also prepare canvases created by innerHTML and support capability probes.
+	dom.HTMLCanvasElement.prototype.getContext = function ( ...args ) { prepareCanvas( this ); return surfaces.get( this ).canvas.getContext( ...args ); };
+	dom.HTMLCanvasElement.prototype.transferControlToOffscreen = function () { prepareCanvas( this ); return this.transferControlToOffscreen(); };
+	for ( const canvas of document.querySelectorAll( 'canvas' ) ) prepareCanvas( canvas );
+	for ( const element of document.querySelectorAll( 'img' ) ) prepareImage( element );
+	registerImageDecoder( { name: 'libjpeg-turbo', test: bytes => bytes[ 0 ] === 0xff && bytes[ 1 ] === 0xd8, decode: jpeg.decode } );
+	registerImageDecoder( { name: 'pngjs', test: bytes => bytes[ 0 ] === 0x89 && bytes[ 1 ] === 0x50, decode: bytes => {
+
+		// GLB buffer views may include up to three zero alignment bytes after IEND.
+		// Its fixed CRC ends in 0x82, so trimming only that padding preserves validation.
+		let end = bytes.length;
+		while ( end > bytes.length - 3 && bytes[ end - 1 ] === 0 ) end --;
+		return PNG.sync.read( Buffer.from( bytes.subarray( 0, end ) ) );
+
+	} } );
+	registerImageDecoder( { name: 'skia', test: bytes => bytes[ 0 ] !== 0x89 && bytes[ 0 ] !== 0xff, decode: bytes => {
+		const image = new SkiaImage(); image.src = Buffer.from( bytes );
+		if ( ! image.complete || image.width < 1 || image.height < 1 ) throw new Error( 'Native image could not be decoded.' );
+		const canvas = createCanvas( image.width, image.height ), context = canvas.getContext( '2d' );
+		context.drawImage( image, 0, 0 );
+		return context.getImageData( 0, 0, image.width, image.height );
+	} } );
+	const prepareVideo = await installMedia( createElement );
+	for ( const element of document.querySelectorAll( 'video' ) ) prepareVideo( element );
+	// Keep PNG and libjpeg-turbo uploads unchanged; Skia handles other formats.
+	const bitmap = globalThis.createImageBitmap;
+	globalThis.createImageBitmap = async ( source, ...options ) => {
+
+		if ( source instanceof Blob ) {
+
+			const bytes = Buffer.from( await source.arrayBuffer() );
+			if ( bytes[ 0 ] !== 0x89 && bytes[ 0 ] !== 0xff ) {
+				const image = await loadImage( bytes );
+				const canvas = createCanvas( image.width, image.height );
+				canvas.getContext( '2d' ).drawImage( image, 0, 0 );
+				source = new Blob( [ await canvas.encode( 'png' ) ], { type: 'image/png' } );
+			}
+
+		}
+		if ( surfaces.get( source )?.context ) source = await readPixels( source );
+		if ( source instanceof VideoFrame ) await source.preparePixels();
+		return bitmap( source, ...options );
+
+	};
+	if ( gpu ) {
+	const { create, globals } = await import( 'webgpu' );
+	Object.assign( globalThis, globals, { GPUCanvasContext: NativeGPUCanvasContext } );
+	const backend = process.env.THREE_BLOCKS_NODE_WEBGPU_BACKEND
+		?? ( process.platform === 'darwin' ? 'metal' : process.platform === 'win32' ? 'd3d12' : 'vulkan' );
+	navigator.gpu = create( [ `backend=${backend}` ] );
+	const requestAdapter = navigator.gpu.requestAdapter.bind( navigator.gpu );
+	navigator.gpu.requestAdapter = async options => {
+
+		const adapter = await requestAdapter( options );
+		if ( ! adapter ) throw new Error( `No native WebGPU adapter for ${backend}.` );
+		const requestDevice = adapter.requestDevice.bind( adapter );
+		adapter.requestDevice = async descriptor => {
+
+			const device = await requestDevice( descriptor );
+			const copyYUV = installExternalTextures( device );
+			device.addEventListener( 'uncapturederror', event => failure( event.error ) );
+			device.lost.then( info => { if ( info.reason !== 'destroyed' ) failure( new Error( `WebGPU device lost: ${info.message}` ) ); } );
+			device.queue.copyExternalImageToTexture = ( source, destination, size ) => {
+
+				if ( ! /^rgba8unorm(-srgb)?$/.test( destination.texture.format ) ) throw new Error( `Unsupported image upload format: ${destination.texture.format}` );
+				const image = source.source._toRGBA8?.();
+				if ( ! image ) unsupported( 'external image source' );
+				if ( copyYUV( image, source, destination, size ) ) return;
+				const width = size.width ?? size[ 0 ];
+				const height = size.height ?? size[ 1 ] ?? 1;
+				const x = source.origin?.x ?? source.origin?.[ 0 ] ?? 0;
+				const y = source.origin?.y ?? source.origin?.[ 1 ] ?? 0;
+				if ( x + width > image.width || y + height > image.height ) throw new Error( 'External image copy exceeds source bounds.' );
+				const pixels = new Uint8Array( width * height * 4 );
+				for ( let row = 0; row < height; row ++ ) {
+
+					const offset = ( ( source.flipY ? image.height - 1 - y - row : y + row ) * image.width + x ) * 4;
+					pixels.set( image.data.subarray( offset, offset + width * 4 ), row * width * 4 );
+
+				}
+				if ( destination.premultipliedAlpha ) for ( let i = 0; i < pixels.length; i += 4 ) for ( let c = 0; c < 3; c ++ ) pixels[ i + c ] = Math.round( pixels[ i + c ] * pixels[ i + 3 ] / 255 );
+				device.queue.writeTexture( destination, pixels, { bytesPerRow: width * 4 }, size );
+
+			};
+			return device;
+
+		};
+		return adapter;
+
+	};
+	} else { delete navigator.gpu; }
+	const scripts = [ ...document.querySelectorAll( 'script' ) ];
+	Object.assign( importMap, ...scripts.filter( script => script.type === 'importmap' ).map( script => {
+
+		const map = JSON.parse( script.textContent );
+		Object.assign( scopes, map.scopes );
+		return map.imports;
+
+	} ) );
+	importScopes = scopes;
+	const modules = {};
+	if ( blob ) modules[ url ] = await blob.text();
+	for ( const [ index, script ] of scripts.entries() ) if ( script.type === 'module' && ! script.src ) modules[ `${url.split( '#' )[ 0 ]}#inline-${index}` ] = script.textContent;
+	const { port1, port2 } = new MessageChannel();
+	port1.on( 'message', send ); port1.unref();
+	register( './loader.mjs', import.meta.url, { data: { pageURL, imports: importMap, modules, scopes, network: port2 }, transferList: [ port2 ] } );
+	if ( thread ) {
+
+		delete globalThis.document; delete globalThis.window;
+		globalThis.onmessage = null; globalThis.onerror = null;
+		globalThis.postMessage = ( value, transfer = [] ) => {
+
+			if ( ! Array.isArray( transfer ) ) transfer = transfer.transfer ?? [];
+			parentPort.postMessage( { data: pack( value, transfer ) }, nativeTransfers( transfer ) );
+
+		};
+		globalThis.close = () => process.exit( 0 );
+		if ( thread === 'classic' ) globalThis.importScripts = ( ...urls ) => {
+
+			for ( const specifier of urls ) {
+
+				const url = new URL( specifier, pageURL ).href;
+				const signal = new Int32Array( new SharedArrayBuffer( 4 ) );
+				const { port1, port2 } = new MessageChannel();
+				try {
+
+					// The parent owns async fetch/routing while the worker must block.
+					parentPort.postMessage( { importScript: url, signal, port: port2 }, [ port2 ] );
+					if ( Atomics.wait( signal, 0, 0, 45_000 ) === 'timed-out' ) throw new Error( `importScripts timed out: ${url}` );
+					const result = receiveMessageOnPort( port1 ).message;
+					if ( result.error ) throw new DOMException( result.error, 'NetworkError' );
+					run( result.source, url );
+
+				} finally { port1.close(); }
+
+			}
+
+		};
+		if ( thread === 'module' ) await import( url );
+		else run( `(() => { const process = undefined;\n${source ?? modules[ url ] ?? await ( await fetchPage( url ) ).text()}\n})();` );
+		return;
+
+	}
+	const { installNativeLayout } = await import( './layout.mjs' );
+	paintPage = await installNativeLayout( dom );
+	// Match addInitScript's function scope: capture internals must not become
+	// enumerable window properties and accidental application shader owners.
+	for ( const source of initialScripts ) run( `(() => {\n${source}\n})();` );
+	let classicExecution = Promise.resolve();
+	const executeScript = async ( script, inlineURL ) => {
+
+		if ( script.noModule || script.hasAttribute( 'nomodule' ) || script.hasAttribute( 'noModule' ) || script.type === 'importmap' || script.type && ! [ 'module', 'text/javascript', 'application/javascript' ].includes( script.type ) ) return;
+		if ( script.type === 'module' ) {
+
+			if ( ! script.src && ! inlineURL ) unsupported( 'dynamic inline module script' );
+			await import( script.src ? new URL( script.src, pageURL ).href : inlineURL );
+
+		}
+		else {
+
+			const source = script.src ? await ( await fetchPage( script.src, undefined, 'script' ) ).text() : script.textContent;
+			const execute = async () => {
+
+				document.currentScript = script;
+				try {
+
+					// Discard completion values, then drain microtasks before clearing currentScript.
+					// A nextTick queued from this Promise job runs after the microtask queue empties.
+					run( source, script.src || url );
+					await new Promise( resolve => process.nextTick( resolve ) );
+
+				} finally { document.currentScript = null; }
+
+			};
+			await ( classicExecution = classicExecution.then( execute, execute ) );
+
+		}
+		script.dispatchEvent( new dom.Event( 'load' ) );
+
+	};
+	const executedScripts = new WeakSet( scripts );
+	const insertedScripts = new dom.MutationObserver( records => {
+
+		for ( const record of records ) for ( const node of record.addedNodes ) {
+
+			if ( node.nodeType !== 1 ) continue;
+			for ( const script of [ ...( node.localName === 'script' ? [ node ] : [] ), ...node.querySelectorAll( 'script' ) ] ) {
+
+				if ( executedScripts.has( script ) || ! script.isConnected ) continue;
+				executedScripts.add( script );
+				void executeScript( script ).catch( error => { script.dispatchEvent( new dom.Event( 'error' ) ); failure( error ); } );
+
+			}
+
+		}
+
+	} );
+	insertedScripts.observe( document, { childList: true, subtree: true } );
+	for ( const [ index, script ] of scripts.entries() ) {
+
+		await executeScript( script, `${url.split( '#' )[ 0 ]}#inline-${index}` );
+
+	}
+	document.readyState = 'interactive';
+	document.dispatchEvent( new dom.Event( 'DOMContentLoaded' ) );
+	document.readyState = 'complete';
+	globalThis.onload?.( new Event( 'load' ) );
+	globalThis.dispatchEvent( new Event( 'load' ) );
+
+}
+
+function installAnimationFrames( interval ) {
+
+	const callbacks = new Map();
+	let id = 0, timer, deadline = wallNow() + interval;
+	globalThis.requestAnimationFrame = callback => {
+
+		if ( typeof callback !== 'function' ) throw new TypeError( 'Animation callback must be a function.' );
+		const token = ++ id; callbacks.set( token, callback );
+		if ( timer === undefined ) {
+
+			const now = wallNow();
+			if ( interval > 0 && deadline < now ) deadline += Math.ceil( ( now - deadline ) / interval ) * interval;
+			timer = setTimeout( () => {
+
+				timer = undefined; deadline += interval;
+				const timestamp = wallNow();
+				for ( const token of [ ...callbacks.keys() ] ) {
+
+					const callback = callbacks.get( token ); callbacks.delete( token );
+					try { callback?.( timestamp ); } catch ( error ) { failure( error ); }
+
+				}
+
+			}, Math.max( 0, deadline - now ) );
+
+		}
+		return token;
+
+	};
+	globalThis.cancelAnimationFrame = token => {
+
+		callbacks.delete( token );
+		if ( callbacks.size === 0 && timer !== undefined ) { clearTimeout( timer ); timer = undefined; }
+
+	};
+
+}
+
+function installCanvasTargets( backend ) {
+
+	if ( backend.isWebGLBackend !== true || ! backend.gl || canvasTargetBackends.has( backend ) ) return;
+	canvasTargetBackends.add( backend );
+	const source = backend.gl.canvas;
+	const begin = backend.beginRender, finish = backend.finishRender;
+	backend.beginRender = function ( context ) {
+
+		if ( context.textures === null ) {
+
+			const { width, height } = this.getDrawingBufferSize();
+			if ( source.width !== width ) source.width = width;
+			if ( source.height !== height ) source.height = height;
+
+		}
+		return begin.call( this, context );
+
+	};
+	backend.finishRender = function ( context ) {
+
+		const result = finish.call( this, context );
+		const target = this.renderer.getCanvasTarget().domElement;
+		if ( context.textures === null && surfaces.get( target ) !== surfaces.get( source ) ) {
+
+			// ponytail: one readback per alternate canvas; share native framebuffers if this path becomes a bottleneck.
+			const output = target.getContext( '2d' );
+			if ( ! output ) throw new Error( 'Native WebGL CanvasTarget has an incompatible context.' );
+			output.clearRect( 0, 0, target.width, target.height );
+			output.drawImage( source, 0, 0 );
+
+		}
+		return result;
+
+	};
+
+}
+
+function prepareCanvas( element ) {
+
+	if ( surfaces.has( element ) ) return;
+	const canvas = new NativeOffscreenCanvas( Number( element.getAttribute( 'width' ) ?? 300 ), Number( element.getAttribute( 'height' ) ?? 150 ) );
+	surfaces.set( element, surfaces.get( canvas ) );
+	for ( const key of [ 'width', 'height' ] ) Object.defineProperty( element, key, {
+		get: () => canvas[ key ], set: value => { canvas[ key ] = value; globalThis.__THREE_BLOCKS_INVALIDATE_LAYOUT__?.(); }, configurable: true,
+	} );
+	element._toRGBA8 = () => canvas._toRGBA8();
+	element.toDataURL = ( ...args ) => canvas.toDataURL( ...args );
+	element.toBlob = ( ...args ) => canvas.toBlob( ...args );
+	element.transferControlToOffscreen = () => {
+
+		if ( canvas._ctx || surfaces.get( canvas ).context || surfaces.get( canvas ).canvas2d || canvas.transferred ) throw new DOMException( 'Canvas already has a context or was transferred.', 'InvalidStateError' );
+		canvas.transferred = true;
+		return canvas;
+
+	};
+
+}
+
+class NativeOffscreenCanvas extends Canvas {
+
+	constructor( width, height ) {
+
+		super( width, height );
+		this.surfaceId = `${parentPort ? 'thread' : 'page'}-${++ surfaceId}`;
+		surfaces.set( this, { canvas: this } );
+		transferredSurfaces.set( this.surfaceId, this );
+
+	}
+	getContext( type, options ) {
+
+		if ( this.detached ) throw new DOMException( 'Canvas was transferred.', 'InvalidStateError' );
+		if ( ! gpuEnabled && [ 'webgpu', 'webgl', 'webgl2', 'experimental-webgl' ].includes( type ) ) return null;
+		const surface = surfaces.get( this );
+		if ( surface.kind && surface.kind !== type ) return null;
+		surface.kind = type;
+		if ( type === 'webgpu' ) return gpuContext( this );
+		if ( type === '2d' ) {
+
+			if ( ! surface.canvas2d ) {
+
+				surface.canvas2d = createCanvas( this.width, this.height );
+				const context = surface.canvas2d.getContext( '2d', options );
+				const getImageData = context.getImageData.bind( context );
+				context.getImageData = ( x, y, width, height, settings ) => {
+
+					if ( settings?.pixelFormat && settings.pixelFormat !== 'rgba-unorm8' ) unsupported( `Canvas2D pixel format ${settings.pixelFormat}` );
+					return getImageData( x, y, width, height, typeof settings === 'object' ? settings?.colorSpace : settings );
+
+				};
+				const drawImage = context.drawImage.bind( context );
+				context.drawImage = ( source, ...args ) => {
+
+					const pixels = source._toRGBA8?.();
+					if ( pixels ) {
+
+						const copy = createCanvas( pixels.width, pixels.height );
+						copy.getContext( '2d' ).putImageData( new SkiaImageData( new Uint8ClampedArray( pixels.data ), pixels.width, pixels.height ), 0, 0 );
+						source = copy;
+
+					}
+					return drawImage( source, ...args );
+
+				};
+				const putImageData = context.putImageData.bind( context );
+				context.putImageData = ( source, ...args ) => putImageData( source instanceof SkiaImageData ? source : new SkiaImageData( source.data, source.width, source.height ), ...args );
+			}
+			return surface.canvas2d.getContext( '2d', options );
+
+		}
+		const context = super.getContext( type, options );
+		surface.premultiplied = context?.getContextAttributes?.().premultipliedAlpha === true;
+		return context;
+
+	}
+	get width() { return super.width; }
+	set width( value ) { super.width = value; const raster = surfaces.get( this )?.canvas2d; if ( raster ) raster.width = this.width; }
+	get height() { return super.height; }
+	set height( value ) { super.height = value; const raster = surfaces.get( this )?.canvas2d; if ( raster ) raster.height = this.height; }
+	getImageData() {
+
+		const surface = surfaces.get( this );
+		if ( surface.context ) throw new Error( 'Use await createImageBitmap(canvas) to read a native WebGPU canvas.' );
+		return surface.canvas2d?.getContext( '2d' ).getImageData( 0, 0, this.width, this.height ) ?? super.getImageData();
+
+	}
+	_toRGBA8() {
+
+		return straightRGBA( { ...super._toRGBA8(), premultiplied: surfaces.get( this ).premultiplied } );
+
+	}
+	async convertToBlob( options = {} ) { return new Blob( [ PNG.sync.write( await readPixels( this ) ) ], { type: 'image/png' } ); }
+	transferToImageBitmap() {
+
+		const { width, height, data } = this._toRGBA8();
+		const result = new ImageBitmap( width, height, data.slice() );
+		this.width = width;
+		return result;
+
+	}
+
+}
+
+class NativeGPUCanvasContext {
+
+	#configuration;
+	#texture;
+	constructor( canvas ) { this.canvas = canvas; }
+	configure( value ) { this.#texture?.destroy(); this.#texture = undefined; this.#configuration = value; }
+	unconfigure() { this.#texture?.destroy(); this.#texture = undefined; this.#configuration = undefined; }
+	get device() { return this.#configuration.device; }
+	get alphaMode() { return this.#configuration.alphaMode ?? 'opaque'; }
+	getCurrentTexture() {
+
+		if ( ! this.#configuration ) throw new Error( 'WebGPU canvas is not configured.' );
+		const { canvas } = this;
+		if ( ! this.#texture || this.#texture.width !== canvas.width || this.#texture.height !== canvas.height ) {
+
+			this.#texture?.destroy();
+			this.#texture = this.device.createTexture( {
+				size: [ canvas.width, canvas.height ], format: this.#configuration.format,
+				usage: ( this.#configuration.usage ?? GPUTextureUsage.RENDER_ATTACHMENT ) | GPUTextureUsage.COPY_SRC,
+			} );
+
+		}
+		return this.#texture;
+
+	}
+
+}
+
+function gpuContext( canvas ) {
+
+	const surface = surfaces.get( canvas );
+	return surface.context ??= new NativeGPUCanvasContext( canvas );
+
+}
+
+async function screenshot( { selector, index = 0, handle, clip, omitBackground } ) {
+
+	const element = handle ? handles.get( handle ) : selector ? document.querySelectorAll( selector )[ index ] : null;
+	if ( ( handle || selector ) && ! element ) throw new Error( 'Native capture element was not found.' );
+	const bounds = clip ?? element?.getBoundingClientRect() ?? { x: 0, y: 0, width: innerWidth, height: innerHeight };
+	return PNG.sync.write( await paintPage( bounds, readPixels, omitBackground ) );
+
+}
+
+async function readPixels( canvas ) {
+
+	const surface = surfaces.get( canvas );
+	if ( ! surface ) throw new Error( 'Native capture has no renderer surface.' );
+	if ( surface.worker ) return surface.worker.readPixels( surface.canvas.surfaceId );
+	const { width, height } = canvas;
+	let data;
+	if ( surface.context ) {
+
+		const { device } = surface.context;
+		const texture = surface.context.getCurrentTexture();
+		if ( ! [ 'rgba8unorm', 'bgra8unorm' ].includes( texture.format ) ) unsupported( `HDR canvas (${texture.format})` );
+		const bytesPerRow = Math.ceil( width * 4 / 256 ) * 256;
+		const buffer = device.createBuffer( { size: bytesPerRow * height, usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ } );
+		try {
+
+			const encoder = device.createCommandEncoder();
+			encoder.copyTextureToBuffer( { texture }, { buffer, bytesPerRow }, [ width, height ] );
+			device.queue.submit( [ encoder.finish() ] );
+			await buffer.mapAsync( GPUMapMode.READ );
+			const mapped = new Uint8Array( buffer.getMappedRange() );
+			data = Buffer.alloc( width * height * 4 );
+			for ( let y = 0; y < height; y ++ ) data.set( mapped.subarray( y * bytesPerRow, y * bytesPerRow + width * 4 ), y * width * 4 );
+			if ( texture.format === 'bgra8unorm' ) for ( let i = 0; i < data.length; i += 4 ) [ data[ i ], data[ i + 2 ] ] = [ data[ i + 2 ], data[ i ] ];
+			buffer.unmap();
+
+		} finally { buffer.destroy(); }
+
+	} else data = Buffer.from( surface.canvas.getImageData().data );
+	if ( surface.context?.alphaMode === 'opaque' ) for ( let i = 3; i < data.length; i += 4 ) data[ i ] = 255;
+	return straightRGBA( { width, height, data, premultiplied: surface.context ? surface.context.alphaMode === 'premultiplied' : surface.premultiplied === true } );
+
+}
+
+function straightRGBA( image ) {
+
+	if ( image.premultiplied ) for ( let i = 0; i < image.data.length; i += 4 ) {
+
+		const alpha = image.data[ i + 3 ];
+		if ( alpha > 0 && alpha < 255 ) for ( let c = 0; c < 3; c ++ ) image.data[ i + c ] = Math.min( 255, Math.round( image.data[ i + c ] * 255 / alpha ) );
+
+	}
+	return { ...image, premultiplied: false };
+
+}
+
+const evaluate = ( { source, arg, args, callable } ) => {
+
+	globalThis.__nativeArgument = args ?? [ arg ];
+	try { return run( callable ? `(${source})(...globalThis.__nativeArgument)` : source, 'three-blocks-native-evaluate.mjs' ); }
+	finally { delete globalThis.__nativeArgument; }
+
+};
+
+// Page evaluation returns data, not executable properties such as bridge.settle.
+// Preserve typed arrays, special numbers and cycles used by GPU harness reports.
+function evaluationData( value, seen = new Map() ) {
+
+	if ( typeof value === 'function' || typeof value === 'symbol' ) return undefined;
+	if ( value === null || typeof value !== 'object' ) return value;
+	if ( seen.has( value ) ) return seen.get( value );
+	if ( ! Array.isArray( value ) && Object.getPrototypeOf( value ) !== Object.prototype ) return value;
+	const result = Array.isArray( value ) ? [] : {};
+	seen.set( value, result );
+	for ( const [ key, child ] of Object.entries( value ) ) result[ key ] = evaluationData( child, seen );
+	return result;
+
+}
+
+async function command( message ) {
+
+	if ( message.route ) {
+
+		routeRequests.get( message.route )?.( message.response ); routeRequests.delete( message.route ); return;
+
+	}
+	try {
+
+		let value;
+		if ( message.method === 'goto' ) value = await navigate( message.args );
+		else if ( message.method === 'evaluate' ) value = evaluationData( await evaluate( message.args ) );
+		else if ( message.method === 'handle' ) {
+
+			const object = await evaluate( message.args );
+			const id = ++ handleId; handles.set( id, object ); value = { id, element: object instanceof Element };
+
+		} else if ( message.method === 'releaseHandle' ) handles.delete( message.args.id );
+		else if ( message.method === 'handleEvaluate' ) value = evaluationData( await evaluate( { ...message.args, args: [ handles.get( message.args.id ), ...message.args.args ], callable: true } ) );
+		else if ( message.method === 'pixels' ) value = await readPixels( document.querySelector( 'canvas' ) );
+		else if ( message.method === 'screenshot' ) value = await screenshot( message.args );
+		else if ( message.method === 'wait' ) {
+
+			const deadline = wallNow() + message.args.timeout;
+			while ( ! await evaluate( message.args ) ) {
+
+				if ( wallNow() >= deadline ) throw new Error( `Native waitForFunction timed out after ${message.args.timeout}ms: ${message.args.source}` );
+				await delay( 5 );
+
+			}
+
+		} else throw new Error( `Unknown native command: ${message.method}` );
+		send( { id: message.id, value } );
+
+	} catch ( error ) { send( { id: message.id, error: error.stack ?? String( error ) } ); }
+
+}
+
+function installLayout( dom, viewport, storage, media ) {
+
+	globalThis.__THREE_BLOCKS_LOCATE__ = steps => {
+
+		const query = ( root, selector ) => {
+
+			const found = [ ...root.querySelectorAll( selector ) ];
+			for ( const element of root.querySelectorAll( '*' ) ) if ( element.shadowRoot ) found.push( ...query( element.shadowRoot, selector ) );
+			if ( root.shadowRoot ) found.push( ...query( root.shadowRoot, selector ) );
+			return found;
+
+		};
+		let elements = [ document ];
+		for ( const { selector, text, index } of steps ) {
+
+			elements = [ ...new Set( elements.flatMap( element => query( element, selector ) ) ) ];
+			if ( text !== undefined ) elements = elements.filter( element => text instanceof RegExp ? text.test( element.textContent ) : element.textContent.includes( text ) );
+			if ( index !== undefined ) elements = elements[ index ] ? [ elements[ index ] ] : [];
+
+		}
+		return elements;
+
+	};
+
+	globalThis.ResizeObserver = class {
+
+		#callback; #elements = new Set();
+		constructor( callback ) { this.#callback = callback; }
+		observe( target ) {
+
+			this.#elements.add( target );
+			queueMicrotask( () => {
+
+				if ( ! this.#elements.has( target ) ) return;
+				const contentRect = target.getBoundingClientRect();
+				const size = [ { inlineSize: contentRect.width, blockSize: contentRect.height } ];
+				this.#callback( [ { target, contentRect, contentBoxSize: size, borderBoxSize: size, devicePixelContentBoxSize: size } ], this );
+
+			} );
+
+		}
+		unobserve( target ) { this.#elements.delete( target ); }
+		disconnect() { this.#elements.clear(); }
+
+	};
+	globalThis.IntersectionObserver = class {
+
+		#callback; #elements = new Set();
+		constructor( callback ) { this.#callback = callback; }
+		observe( target ) {
+
+			this.#elements.add( target );
+			queueMicrotask( () => {
+
+				if ( ! this.#elements.has( target ) ) return;
+				const rect = target.getBoundingClientRect();
+				const visible = getComputedStyle( target ).display !== 'none' && rect.width > 0 && rect.height > 0;
+				this.#callback( [ { target, isIntersecting: visible, intersectionRatio: visible ? 1 : 0, boundingClientRect: rect, intersectionRect: rect, time: performance.now() } ], this );
+
+			} );
+
+		}
+		unobserve( target ) { this.#elements.delete( target ); }
+		disconnect() { this.#elements.clear(); }
+		takeRecords() { return []; }
+
+	};
+	globalThis.matchMedia = query => Object.assign( new EventTarget(), { media: query, matches: media.some( feature => query.includes( `${feature.name}: ${feature.value}` ) ), onchange: null, addListener() {}, removeListener() {} } );
+	globalThis.screen = { width: viewport.width, height: viewport.height };
+	globalThis.devicePixelRatio = viewport.deviceScaleFactor ?? 1;
+	globalThis.MutationObserver = dom.MutationObserver;
+	for ( const name of [ 'localStorage', 'sessionStorage' ] ) {
+
+		const values = storage[ name ] ??= {};
+		const save = () => send( { event: 'storage', storage } );
+		globalThis[ name ] = { get length() { return Object.keys( values ).length; }, key: index => Object.keys( values )[ index ] ?? null, getItem: key => values[ key ] ?? null, setItem: ( key, value ) => { values[ key ] = String( value ); save(); }, removeItem: key => { delete values[ key ]; save(); }, clear: () => { for ( const key of Object.keys( values ) ) delete values[ key ]; save(); } };
+
+	}
+
+}
+
+// Native objects need an explicit wire representation; ArrayBuffers and ports
+// retain worker_threads' real transfer/detachment semantics.
+function nativeTransfers( transfer ) { return transfer.filter( value => ! ( value instanceof NativeOffscreenCanvas || value instanceof ImageBitmap || value instanceof VideoFrame ) ); }
+function pack( value, transfer, owner, seen = new Map() ) {
+
+	if ( value === null || typeof value !== 'object' ) return value;
+	if ( seen.has( value ) ) return seen.get( value );
+	if ( value instanceof NativeOffscreenCanvas ) {
+
+		if ( ! transfer.includes( value ) || value.detached ) throw new DOMException( 'OffscreenCanvas must be transferred exactly once.', 'DataCloneError' );
+		const result = { __tbNative: 'canvas', id: value.surfaceId, width: value.width, height: value.height };
+		value.detached = true; surfaces.get( value ).worker = owner;
+		return result;
+
+	}
+	if ( value instanceof ImageBitmap || value instanceof VideoFrame ) {
+
+		const result = { __tbNative: value instanceof ImageBitmap ? 'bitmap' : 'frame', ...value._toRGBA8(), timestamp: value.timestamp };
+		if ( transfer.includes( value ) ) value.close();
+		return result;
+
+	}
+	if ( ! Array.isArray( value ) && Object.getPrototypeOf( value ) !== Object.prototype ) return value;
+	const result = Array.isArray( value ) ? [] : {};
+	seen.set( value, result );
+	for ( const [ key, child ] of Object.entries( value ) ) result[ key ] = pack( child, transfer, owner, seen );
+	return result;
+
+}
+function unpack( value, seen = new Map() ) {
+
+	if ( value === null || typeof value !== 'object' ) return value;
+	if ( seen.has( value ) ) return seen.get( value );
+	if ( value.__tbNative === 'canvas' ) {
+
+		const canvas = new NativeOffscreenCanvas( value.width, value.height );
+		transferredSurfaces.delete( canvas.surfaceId ); canvas.surfaceId = value.id;
+		transferredSurfaces.set( value.id, canvas ); return canvas;
+
+	}
+	if ( value.__tbNative === 'bitmap' ) return new ImageBitmap( value.width, value.height, value.data );
+	if ( value.__tbNative === 'frame' ) return new VideoFrame( value.data, { format: 'RGBA', codedWidth: value.width, codedHeight: value.height, timestamp: value.timestamp } );
+	if ( ! Array.isArray( value ) && Object.getPrototypeOf( value ) !== Object.prototype ) return value;
+	const result = Array.isArray( value ) ? [] : {};
+	seen.set( value, result );
+	for ( const [ key, child ] of Object.entries( value ) ) result[ key ] = unpack( child, seen );
+	return result;
+
+}
+
+class NativeWorker extends EventTarget {
+
+	#thread;
+	#pixels = new Map();
+	#id = 0;
+	constructor( url, options = {} ) {
+
+		super();
+		url = new URL( url, pageURL ).href;
+		this.#thread = new Thread( new URL( './worker.mjs', import.meta.url ), {
+			execArgv: [ '--experimental-vm-modules' ], workerData: { url, viewport: pageViewport, thread: options.type ?? 'classic', imports: importMap, scopes: importScopes, routes, gpu: gpuEnabled, cookies: cookieJar.serializeSync(), blob: url.startsWith( 'blob:' ) ? resolveObjectURL( url ) : undefined },
+		} );
+		this.#thread.on( 'message', message => {
+
+			if ( message.importScript ) {
+
+				void ( async () => {
+
+					try {
+
+						const response = await fetchPage( message.importScript, undefined, 'script' );
+						if ( ! response.ok ) throw new Error( `importScripts ${message.importScript}: HTTP ${response.status}` );
+						message.port.postMessage( { source: await response.text() } );
+
+					} catch ( error ) { message.port.postMessage( { error: String( error ) } ); }
+					finally { message.port.close(); Atomics.store( message.signal, 0, 1 ); Atomics.notify( message.signal, 0 ); }
+
+				} )();
+				return;
+
+			}
+			if ( message.native ) {
+
+				if ( message.native.event === 'route' ) {
+
+					const id = ++ routeId;
+					routeRequests.set( id, response => this.#thread.postMessage( { nativeRoute: message.native.id, response } ) );
+					send( { ...message.native, id } );
+
+				} else send( message.native );
+				return;
+
+			}
+			if ( message.pixels ) {
+
+				const request = this.#pixels.get( message.pixels ); this.#pixels.delete( message.pixels );
+				if ( message.error ) request.reject( new Error( message.error ) ); else request.resolve( message.value );
+				return;
+
+			}
+			const event = new MessageEvent( 'message', { data: unpack( message.data ) } );
+			this.onmessage?.( event ); this.dispatchEvent( event );
+
+		} );
+		this.#thread.on( 'error', error => {
+
+			const event = Object.assign( new Event( 'error' ), { message: error.message, error } );
+			this.onerror?.( event ); this.dispatchEvent( event ); failure( error );
+
+		} );
+
+	}
+	postMessage( value, transfer = [] ) {
+
+		if ( ! Array.isArray( transfer ) ) transfer = transfer.transfer ?? [];
+		this.#thread.postMessage( { data: pack( value, transfer, this ) }, nativeTransfers( transfer ) );
+
+	}
+	readPixels( canvas ) {
+
+		const id = ++ this.#id;
+		return new Promise( ( resolve, reject ) => { this.#pixels.set( id, { resolve, reject } ); this.#thread.postMessage( { readPixels: canvas, id } ); } );
+
+	}
+	terminate() {
+
+		for ( const request of this.#pixels.values() ) request.reject( new Error( 'Render worker terminated.' ) );
+		this.#pixels.clear(); return this.#thread.terminate();
+
+	}
+
+}
+
+if ( parentPort ) {
+
+	const queued = [];
+	let ready = false;
+	const receive = async message => {
+
+		if ( message.nativeRoute ) { routeRequests.get( message.nativeRoute )?.( message.response ); routeRequests.delete( message.nativeRoute ); return; }
+
+		if ( ! ready ) { queued.push( message ); return; }
+		if ( message.readPixels ) {
+
+			try { parentPort.postMessage( { pixels: message.id, value: await readPixels( transferredSurfaces.get( message.readPixels ) ) } ); }
+			catch ( error ) { parentPort.postMessage( { pixels: message.id, error: error.stack } ); }
+			return;
+
+		}
+		const event = new MessageEvent( 'message', { data: unpack( message.data ) } );
+		globalThis.onmessage?.( event ); globalThis.dispatchEvent( event );
+
+	};
+	parentPort.on( 'message', receive );
+	await navigate( workerData );
+	ready = true;
+	for ( const message of queued ) await receive( message );
+
+} else process.on( 'message', message => command( jsonIPC ? decodeIPC( message ) : message ) );