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

package/node/layout.mjs

@@ -0,0 +1,546 @@
+import Yoga from 'yoga-layout';
+import { createCanvas, GlobalFonts, ImageData, loadImage } from '@napi-rs/canvas';
+import { transform } from 'lightningcss';
+import { parse as parseSelector, stringify as stringifySelector } from 'css-what';
+
+const inherited = [ 'font-family', 'font-size', 'font-weight', 'font-style', 'line-height', 'letter-spacing', 'color', 'text-align', 'text-transform', 'visibility' ];
+const camel = name => name.replace( /-([a-z])/g, ( _, letter ) => letter.toUpperCase() );
+const kebab = name => name.replace( /[A-Z]/g, letter => `-${letter.toLowerCase()}` );
+const rect = ( x, y, width, height ) => ( { x, y, width, height, left: x, top: y, right: x + width, bottom: y + height, toJSON() { return { x, y, width, height }; } } );
+// Skia's canvas font parser treats intermediate CSS weights (e.g. 650) as sizes.
+const fontFor = style => `${style[ 'font-style' ] || 'normal'} ${Number( style[ 'font-weight' ] ) ? Math.max( 100, Math.min( 900, Math.round( Number( style[ 'font-weight' ] ) / 100 ) * 100 ) ) : style[ 'font-weight' ]} ${style[ 'font-size' ]} ${style[ 'font-family' ]}`;
+
+// CSS block/flex layout and measured text for renderer hosts and DOM-synced text.
+// ponytail: supports block/flex, overlapping cells and fixed-column grids used by capture pages; complex grids/floats need a native layout engine extension.
+export async function installNativeLayout( dom ) {
+
+	const { document } = dom;
+	for ( const link of document.querySelectorAll( 'link[rel="stylesheet"]' ) ) {
+
+		const response = await fetch( link.getAttribute( 'href' ) );
+		if ( ! response.ok ) throw new Error( `Stylesheet ${link.href}: HTTP ${response.status}` );
+		const style = document.createElement( 'style' ); style.textContent = await response.text(); style.dataset.nativeURL = response.url;
+		link.after( style );
+
+	}
+	const context = createCanvas( 1, 1 ).getContext( '2d' );
+	const colors = new Map();
+	const backgroundImages = new Map();
+	const imageURL = value => /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)]*?))\s*\)/.exec( value ?? '' )?.slice( 1 ).find( value => value !== undefined );
+	const rgba = value => {
+
+		if ( colors.has( value ) ) return colors.get( value );
+		const mix = /^color-mix\(in srgb,\s*(.+?)\s+([\d.]+)%,\s*(.+?)(?:\s+([\d.]+)%)?\)$/.exec( value );
+		let result;
+		if ( mix ) {
+
+			const a = rgba( mix[ 1 ] ), b = rgba( mix[ 3 ] );
+			let weight = Number( mix[ 2 ] ) / 100, other = mix[ 4 ] === undefined ? 1 - weight : Number( mix[ 4 ] ) / 100;
+			const total = weight + other; if ( total > 1 ) { weight /= total; other /= total; }
+			const alpha = a[ 3 ] * weight + b[ 3 ] * other;
+			result = [ ...a.slice( 0, 3 ).map( ( channel, i ) => alpha ? Math.round( ( channel * a[ 3 ] * weight + b[ i ] * b[ 3 ] * other ) / alpha ) : 0 ), alpha ];
+
+		} else {
+
+			context.clearRect( 0, 0, 1, 1 ); context.fillStyle = '#000'; context.fillStyle = value; context.fillRect( 0, 0, 1, 1 );
+			result = [ ...context.getImageData( 0, 0, 1, 1 ).data ];
+
+		}
+		colors.set( value, result ); return result;
+
+	};
+	const color = value => { const [ r, g, b, a ] = rgba( value ); return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a / 255})`; };
+	const children = element => element.shadowRoot?.children ?? ( element.localName === 'slot' ? element.assignedElements( { flatten: true } ) : element.children );
+	let boxes = new Map(), styles = new Map(), dirty = true;
+	const observer = new dom.MutationObserver( () => { dirty = true; } );
+	observer.observe( document, { subtree: true, childList: true, attributes: true, characterData: true } );
+	globalThis.__THREE_BLOCKS_INVALIDATE_LAYOUT__ = () => { dirty = true; };
+	globalThis.addEventListener( 'resize', () => { dirty = true; } );
+	const compiledStyles = new WeakMap();
+	const layers = new Map();
+	const layerOrder = name => { if ( ! layers.has( name ) ) layers.set( name, layers.size ); return layers.get( name ); };
+	const registeredProperties = {};
+	const rules = root => [ ...root.querySelectorAll( 'style' ) ].flatMap( style => {
+
+		try {
+
+			let cached = compiledStyles.get( style );
+			if ( cached?.source !== style.textContent ) {
+
+				let sheet;
+				try { sheet = style.sheet; }
+				catch {
+					let css = transform( { filename: 'native.css', code: Buffer.from( style.textContent ), targets: { chrome: 90 << 16 } } ).code.toString();
+					const offsets = [ 0 ];
+					for ( let index = 0; index < css.length; index ++ ) if ( css[ index ] === '\n' ) offsets.push( index + 1 );
+					const replacements = [];
+					// CSSOM lacks cascade layers. Use Lightning CSS's parsed locations to
+					// lower only those headers to grouping rules, retaining their priority.
+					transform( { code: Buffer.from( css ), visitor: { Rule( rule ) {
+						if ( rule.type !== 'layer-block' && rule.type !== 'layer-statement' ) return;
+						const { line, column } = rule.value.loc;
+						const start = offsets[ line ] + column - 1;
+						const end = start + css.slice( start ).search( /[;{]/ ) + 1;
+						if ( rule.type === 'layer-statement' ) {
+							for ( const name of rule.value.names ) layerOrder( name.join( '.' ) );
+							replacements.push( { start, end, text: '' } );
+						} else {
+							const order = layerOrder( rule.value.name?.join( '.' ) ?? `anonymous-${layers.size}` );
+							replacements.push( { start, end, text: `@media (--three-blocks-layer: ${order}) {` } );
+						}
+					} } } );
+					for ( const replacement of replacements.sort( ( a, b ) => b.start - a.start ) ) css = css.slice( 0, replacement.start ) + replacement.text + css.slice( replacement.end );
+					const flattened = document.createElement( 'style' ); flattened.textContent = css;
+					sheet = flattened.sheet;
+				}
+
+				const collect = ( rules, layer, media = [] ) => rules.flatMap( rule => {
+					if ( rule.media ) {
+						const marker = /^\(--three-blocks-layer: (\d+)\)$/.exec( rule.media.mediaText );
+						return marker ? collect( [ ...rule.cssRules ], Number( marker[ 1 ] ), media ) : collect( [ ...rule.cssRules ], layer, [ ...media, rule.media.mediaText ] );
+					}
+					if ( rule.selectorText?.startsWith( '@property ' ) ) {
+						const initial = rule.style.getPropertyValue( 'initial-value' );
+						if ( initial ) registeredProperties[ rule.selectorText.slice( 10 ) ] = initial;
+						return [];
+					}
+					return [ Object.assign( rule, { layer, media, selectors: rule.selectorText ? parseSelector( rule.selectorText ).map( selector => stringifySelector( [ selector ] ) ) : [] } ) ];
+				} );
+				const parsed = collect( [ ...sheet.cssRules ] );
+				cached = { source: style.textContent, rules: parsed }; compiledStyles.set( style, cached );
+
+			}
+			return cached.rules.map( rule => ( { rule, base: style.dataset.nativeURL || location.href } ) );
+
+		}
+		catch ( error ) { throw new Error( `Native CSS could not be parsed: ${error.message}` ); }
+
+	} );
+	const length = ( value, font = 16 ) => {
+
+		if ( ! value || value === 'auto' || value === 'none' ) return undefined;
+		if ( typeof value === 'number' ) return value;
+		if ( value.startsWith( 'calc(' ) ) {
+
+			const source = value.replace( /calc\(/g, '(' );
+			const tokens = source.match( /(?:\d*\.)?\d+(?:px|rem|em|vw|vh)?|[()+*/-]/g ) ?? [];
+			if ( tokens.join( '' ) !== source.replace( /\s/g, '' ) ) return undefined;
+			let cursor = 0;
+			const atom = () => {
+
+				const token = tokens[ cursor ++ ];
+				if ( token === '-' ) return -atom();
+				if ( token === '+' ) return atom();
+				if ( token !== '(' ) return length( token, font );
+				const result = sum();
+				return tokens[ cursor ++ ] === ')' ? result : NaN;
+
+			};
+			const product = () => { let result = atom(); while ( /^(\*|\/)$/.test( tokens[ cursor ] ) ) { const op = tokens[ cursor ++ ], next = atom(); result = op === '*' ? result * next : result / next; } return result; };
+			const sum = () => { let result = product(); while ( /^(\+|-)$/.test( tokens[ cursor ] ) ) { const op = tokens[ cursor ++ ], next = product(); result = op === '+' ? result + next : result - next; } return result; };
+			const result = sum();
+			return cursor === tokens.length && Number.isFinite( result ) ? result : undefined;
+
+		}
+		const expression = /^(clamp|min|max)\((.*)\)$/.exec( value );
+		if ( expression ) {
+
+			const values = expression[ 2 ].split( ',' ).map( part => length( part.trim(), font ) );
+			if ( expression[ 1 ] === 'min' ) return Math.min( ...values );
+			if ( expression[ 1 ] === 'max' ) return Math.max( ...values );
+			return Math.max( values[ 0 ], Math.min( values[ 1 ], values[ 2 ] ) );
+
+		}
+		if ( value.endsWith( '%' ) ) return value;
+		const number = parseFloat( value );
+		if ( ! Number.isFinite( number ) ) return undefined;
+		if ( value.endsWith( 'ch' ) ) return number * context.measureText( '0' ).width;
+		return number * ( value.endsWith( 'rem' ) ? 16 : value.endsWith( 'em' ) ? font : value.endsWith( 'vw' ) ? innerWidth / 100 : value.endsWith( 'vh' ) ? innerHeight / 100 : 1 );
+
+	};
+	const computed = element => {
+
+		if ( styles.has( element ) ) return styles.get( element );
+		const parent = element.parentElement ?? element.getRootNode()?.host;
+		const parentStyle = parent ? computed( parent ) : {};
+		const result = { display: element.hidden || /^(STYLE|SCRIPT|LINK|HEAD|META)$/.test( element.tagName ) ? 'none' : 'block', 'font-size': '16px', 'font-weight': '400', 'font-family': 'sans-serif', 'line-height': 'normal', 'letter-spacing': '0px', color: 'rgb(0, 0, 0)', opacity: '1', 'text-align': 'left', 'text-transform': 'none', visibility: 'visible' };
+		for ( const name of inherited ) if ( parentStyle[ name ] ) result[ name ] = parentStyle[ name ];
+		Object.assign( result, registeredProperties );
+		for ( const [ name, value ] of Object.entries( parentStyle ) ) if ( name.startsWith( '--' ) ) result[ name ] = value;
+		const ranks = {};
+		const apply = ( declaration, priority, base = location.href, layer ) => {
+
+			for ( let i = 0; i < declaration.length; i ++ ) {
+
+				const name = declaration[ i ];
+				let value = declaration.getPropertyValue( name );
+				const url = /^background(?:-image)?$/.test( name ) ? imageURL( value ) : undefined;
+				if ( url !== undefined ) value = value.replace( url, new URL( url, base ).href );
+				const important = declaration.getPropertyPriority?.( name ) === 'important' || /!important\s*$/.test( value );
+				const rank = priority + ( important ? 1e9 - ( layer ?? 1000 ) * 10000 : ( layer ?? 1000 ) * 10000 );
+				if ( rank >= ( ranks[ name ] ?? -1 ) ) { ranks[ name ] = rank; result[ name ] = value.replace( /\s*!important\s*$/, '' ); }
+
+			}
+
+		};
+		const scopedRules = rules( element.getRootNode() );
+		if ( element.shadowRoot ) scopedRules.push( ...rules( element.shadowRoot ).filter( ( { rule } ) => rule.selectorText === ':host' ) );
+		for ( const { rule, base } of scopedRules ) {
+
+			if ( ! rule.selectorText || rule.media.some( query => ! matchMedia( query ).matches ) ) continue;
+			for ( const selector of rule.selectors ) {
+
+				if ( selector.includes( '::' ) ) continue;
+				try {
+
+					if ( selector === ':host' ? element.shadowRoot : element.matches( selector ) ) apply( rule.style, ( selector.match( /#/g )?.length ?? 0 ) * 100 + ( selector.match( /[.[:]/g )?.length ?? 0 ) * 10 + ( selector.match( /(?:^|\s|>)[a-z]/gi )?.length ?? 0 ), base, rule.layer );
+
+				} catch { /* Selectors unsupported by the DOM are not a match. */ }
+
+			}
+
+		}
+		apply( element.style, 1000 );
+		if ( result.font ) {
+
+			const font = /^(?:(.*?)\s+)?(clamp\([^)]*\)|[\d.]+(?:px|rem|em|vw|vh))(?:\/([^\s]+))?\s+(.+)$/.exec( result.font );
+			if ( font ) {
+
+				for ( const [ name, value ] of Object.entries( { 'font-size': font[ 2 ], 'font-family': font[ 4 ], 'line-height': font[ 3 ] || 'normal', 'font-weight': font[ 1 ] || '400' } ) ) if ( ( ranks[ name ] ?? -1 ) <= ranks.font ) result[ name ] = value;
+
+			}
+
+		}
+		const resolveVars = ( value, seen = new Set() ) => {
+			let output = '', cursor = 0, start;
+			while ( ( start = value.indexOf( 'var(', cursor ) ) !== -1 ) {
+				let end = start + 4, depth = 1;
+				for ( ; end < value.length && depth; end ++ ) { if ( value[ end ] === '(' ) depth ++; else if ( value[ end ] === ')' ) depth --; }
+				if ( depth ) return ''; // Invalid declarations cannot become measured CSS.
+				const argumentsText = value.slice( start + 4, end - 1 ), separator = argumentsText.indexOf( ',' );
+				const key = ( separator === -1 ? argumentsText : argumentsText.slice( 0, separator ) ).trim();
+				const fallback = separator === -1 ? '' : argumentsText.slice( separator + 1 ).trim();
+				const replacement = seen.has( key ) || result[ key ] === 'initial' ? fallback : result[ key ] ?? fallback;
+				output += value.slice( cursor, start ) + resolveVars( replacement, new Set( [ ...seen, key ] ) ); cursor = end;
+			}
+			return output + value.slice( cursor );
+		};
+		for ( const [ name, value ] of Object.entries( result ) ) {
+
+			const resolved = resolveVars( value );
+			result[ name ] = resolved === 'inherit' || resolved === 'unset' && inherited.includes( name ) ? parentStyle[ name ] ?? '' : resolved;
+
+		}
+		result.color = color( result.color );
+		for ( const name of [ 'background', 'background-color', '-webkit-text-fill-color' ] ) if ( result[ name ]?.startsWith( 'color-mix(' ) ) result[ name ] = color( result[ name ] );
+		const fontSize = length( result[ 'font-size' ], parseFloat( parentStyle[ 'font-size' ] ) || 16 ) ?? 16;
+		result[ 'font-size' ] = `${fontSize}px`;
+		styles.set( element, result ); return result;
+
+	};
+	const textLines = ( element, availableWidth, style ) => {
+
+		const fontSize = parseFloat( style[ 'font-size' ] );
+		const font = fontFor( style );
+		const spacing = length( style[ 'letter-spacing' ], fontSize ) ?? 0;
+		const measure = value => { context.font = font; return context.measureText( value ).width + Math.max( 0, value.length - 1 ) * spacing; };
+		const text = element.textContent ?? '';
+		const lines = []; let start = 0;
+		while ( start < text.length ) {
+
+			let end = start + 1, lastSpace = -1;
+			while ( end <= text.length && ( measure( text.slice( start, end ) ) <= availableWidth || end === start + 1 ) ) {
+
+				if ( /\s/.test( text[ end - 1 ] ) ) lastSpace = end;
+				end ++;
+
+			}
+			end --;
+			if ( end < text.length && lastSpace > start ) end = lastSpace;
+			lines.push( { start, end, text: text.slice( start, end ), width: measure( text.slice( start, end ) ) } ); start = end;
+
+		}
+		const lineHeight = style[ 'line-height' ] === 'normal' ? fontSize * 1.2 : /^\d*\.?\d+$/.test( style[ 'line-height' ] ) ? Number( style[ 'line-height' ] ) * fontSize : length( style[ 'line-height' ], fontSize );
+		return { lines, lineHeight, measure };
+
+	};
+	const layout = () => {
+
+		if ( observer.takeRecords().length ) dirty = true;
+		if ( ! dirty ) return;
+		dirty = false; boxes = new Map(); styles = new Map();
+		const records = [], fixed = [];
+		const make = element => {
+
+			const node = Yoga.Node.create(); const style = computed( element );
+			context.font = fontFor( style );
+			if ( element.shadowRoot ) observer.observe( element.shadowRoot, { subtree: true, childList: true, attributes: true, characterData: true } );
+			const font = parseFloat( style[ 'font-size' ] );
+			node.setFlexDirection( style.display === 'flex' && style[ 'flex-direction' ] !== 'column' ? Yoga.FLEX_DIRECTION_ROW : Yoga.FLEX_DIRECTION_COLUMN );
+			if ( style.display === 'grid' && /^repeat\(\d+,\s*[\d.]+px\)$/.test( style[ 'grid-template-columns' ] ?? '' ) ) { node.setFlexDirection( Yoga.FLEX_DIRECTION_ROW ); node.setFlexWrap( Yoga.WRAP_WRAP ); }
+			node.setFlexShrink( Number( style[ 'flex-shrink' ] ?? 0 ) );
+			if ( style.display === 'none' || /^(STYLE|SCRIPT|LINK|HEAD|META)$/.test( element.tagName ) ) node.setDisplay( Yoga.DISPLAY_NONE );
+			if ( [ 'absolute', 'fixed' ].includes( style.position ) ) node.setPositionType( Yoga.POSITION_TYPE_ABSOLUTE );
+			for ( const name of [ 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height' ] ) {
+
+				let value = length( style[ name ], font );
+				// Yoga expresses min(fixed, percentage) as a fixed size plus its
+				// percentage maximum, preserving the containing block's real width.
+				const minimum = /^min\(\s*([^,]+),\s*([\d.]+%)\s*\)$/.exec( style[ name ] ?? '' );
+				if ( minimum && [ 'width', 'height' ].includes( name ) ) {
+
+					value = length( minimum[ 1 ], font );
+					node[ name === 'width' ? 'setMaxWidth' : 'setMaxHeight' ]( minimum[ 2 ] );
+
+				}
+				if ( value === undefined && element.tagName === 'CANVAS' && [ 'width', 'height' ].includes( name ) ) value = element[ name ] / devicePixelRatio;
+				if ( value === undefined && element.tagName === 'IMG' && [ 'width', 'height' ].includes( name ) ) value = element[ name ];
+				if ( value === undefined && element.localName === 'svg' && [ 'width', 'height' ].includes( name ) ) value = length( element.getAttribute( name ), font );
+				if ( value !== undefined ) node[ `set${camel( name )[ 0 ].toUpperCase()}${camel( name ).slice( 1 )}` ]( value );
+
+			}
+			for ( const [ side, edge ] of [ [ 'top', Yoga.EDGE_TOP ], [ 'right', Yoga.EDGE_RIGHT ], [ 'bottom', Yoga.EDGE_BOTTOM ], [ 'left', Yoga.EDGE_LEFT ] ] ) {
+
+				for ( const property of [ 'margin', 'padding' ] ) {
+
+					const shorthand = ( style[ property ] ?? '' ).split( /\s+(?![^()]*\))/ );
+					const index = [ 'top', 'right', 'bottom', 'left' ].indexOf( side );
+					const value = length( style[ `${property}-${side}` ] ?? shorthand[ index ] ?? shorthand[ index % 2 ] ?? shorthand[ 0 ], font );
+					if ( value !== undefined ) node[ property === 'margin' ? 'setMargin' : 'setPadding' ]( edge, value );
+
+				}
+				const inset = ( style.inset ?? '' ).split( /\s+/ );
+				const index = [ 'top', 'right', 'bottom', 'left' ].indexOf( side );
+				const position = length( style[ side ] ?? inset[ index ] ?? inset[ index % 2 ] ?? inset[ 0 ], font );
+				if ( position !== undefined ) node.setPosition( edge, position );
+
+			}
+			const aligns = { center: Yoga.ALIGN_CENTER, 'flex-start': Yoga.ALIGN_FLEX_START, 'flex-end': Yoga.ALIGN_FLEX_END, stretch: Yoga.ALIGN_STRETCH };
+			const align = style[ 'align-items' ] ?? style[ 'place-items' ];
+			if ( aligns[ align ] !== undefined ) node.setAlignItems( aligns[ align ] );
+			if ( style.display === 'grid' && align === 'center' ) node.setJustifyContent( Yoga.JUSTIFY_CENTER );
+			if ( style.display === 'grid' && style[ 'align-content' ] === 'center' ) node.setJustifyContent( Yoga.JUSTIFY_CENTER );
+			if ( style[ 'justify-content' ] === 'space-between' ) node.setJustifyContent( Yoga.JUSTIFY_SPACE_BETWEEN );
+			if ( style.gap ) node.setGap( Yoga.GUTTER_ALL, length( style.gap, font ) );
+			if ( style[ 'grid-area' ] === '1 / 1' ) { node.setPositionType( Yoga.POSITION_TYPE_ABSOLUTE ); node.setPosition( Yoga.EDGE_LEFT, 0 ); node.setPosition( Yoga.EDGE_TOP, 0 ); node.setWidth( '100%' ); }
+			if ( style[ 'grid-column' ] === '1 / -1' ) node.setWidth( '100%' );
+			if ( style[ 'justify-content' ] === 'center' ) node.setJustifyContent( Yoga.JUSTIFY_CENTER );
+			if ( style[ 'flex-grow' ] ) node.setFlexGrow( Number( style[ 'flex-grow' ] ) );
+			const text = style.display !== 'none' && ( element.hasAttribute( 'data-canvas-text' ) || children( element ).length === 0 && element.textContent.trim() );
+			if ( text ) node.setMeasureFunc( width => {
+
+				const { lines, lineHeight } = textLines( element, Number.isFinite( width ) ? width : Infinity, style );
+				return { width: Math.max( 0, ...lines.map( line => line.width ) ), height: lines.length * lineHeight };
+
+			} );
+			else if ( element.localName !== 'svg' ) for ( const child of children( element ) ) {
+
+				const childNode = make( child );
+				if ( computed( child ).position === 'fixed' ) fixed.push( childNode );
+				else node.insertChild( childNode, node.getChildCount() );
+
+			}
+			records.push( { element, node, style, text } ); return node;
+
+		};
+		const root = make( document.body ); root.setWidth( innerWidth ); root.setMinHeight( innerHeight );
+		for ( const node of fixed ) root.insertChild( node, root.getChildCount() );
+		try {
+
+			root.calculateLayout( innerWidth, innerHeight, Yoga.DIRECTION_LTR );
+			const byNode = new Map( records.map( record => [ record.node, record.style ] ) );
+			for ( const { element, node, style, text } of records ) {
+
+				const box = node.getComputedLayout(); let x = 0, y = 0;
+				for ( let parent = node; parent; parent = parent.getParent() ) {
+
+					x += parent.getComputedLeft(); y += parent.getComputedTop();
+					const translate = /^translate(X|Y)?\((.*)\)$/.exec( byNode.get( parent )?.transform ?? '' );
+					if ( ! translate ) continue;
+					const [ first, second = '0' ] = translate[ 2 ].startsWith( 'clamp(' ) ? [ translate[ 2 ] ] : translate[ 2 ].split( /,\s*|\s+(?![^()]*\))/ );
+					const distance = ( value, size ) => value.endsWith( '%' ) ? parseFloat( value ) * size / 100 : length( value, parseFloat( style[ 'font-size' ] ) ) ?? 0;
+					if ( translate[ 1 ] !== 'Y' ) x += distance( first, parent.getComputedWidth() );
+					if ( translate[ 1 ] !== 'X' ) y += distance( translate[ 1 ] === 'Y' ? first : second, parent.getComputedHeight() );
+
+				}
+				boxes.set( element, { rect: rect( x - ( globalThis.scrollX || 0 ), y - ( globalThis.scrollY || 0 ), box.width, box.height ), style, ...( text ? textLines( element, box.width, style ) : {} ) } );
+
+			}
+
+		} finally { root.freeRecursive(); }
+
+	};
+	globalThis.getComputedStyle = element => {
+
+		layout(); const style = computed( element );
+		return new Proxy( style, { get: ( object, key ) => key === 'getPropertyValue' ? name => object[ name ] ?? '' : object[ kebab( String( key ) ) ] ?? '' } );
+
+	};
+	dom.HTMLElement.prototype.getBoundingClientRect = function () { layout(); return boxes.get( this )?.rect ?? rect( 0, 0, 0, 0 ); };
+	for ( const [ name, axis ] of Object.entries( { clientWidth: 'width', offsetWidth: 'width', clientHeight: 'height', offsetHeight: 'height' } ) ) Object.defineProperty( dom.HTMLElement.prototype, name, { configurable: true, get() { return this.getBoundingClientRect()[ axis ]; } } );
+	Object.defineProperty( dom.HTMLElement.prototype, 'offsetParent', { configurable: true, get() {
+
+		for ( let parent = this.parentElement; parent; parent = parent.parentElement ) if ( parent === document.body || /absolute|relative|fixed/.test( computed( parent ).position ?? '' ) ) return parent;
+		return null;
+
+	} } );
+	for ( const [ name, axis ] of [ [ 'offsetTop', 'top' ], [ 'offsetLeft', 'left' ] ] ) Object.defineProperty( dom.HTMLElement.prototype, name, { configurable: true, get() { return this.getBoundingClientRect()[ axis ] - ( this.offsetParent?.getBoundingClientRect()[ axis ] ?? 0 ); } } );
+	for ( const [ name, axis, edge, start ] of [ [ 'scrollWidth', 'width', 'right', 'left' ], [ 'scrollHeight', 'height', 'bottom', 'top' ] ] ) Object.defineProperty( dom.HTMLElement.prototype, name, { configurable: true, get() {
+
+		layout(); const box = this.getBoundingClientRect();
+		const extent = element => Math.max( boxes.get( element )?.rect[ edge ] ?? box[ start ], ...[ ...children( element ) ].map( extent ) );
+		return Math.max( box[ axis ], extent( this ) - box[ start ] );
+
+	} } );
+	const createRange = document.createRange.bind( document );
+	document.createRange = () => {
+
+		const range = createRange(); let node, start = 0, end = 0;
+		range.setStart = ( value, offset ) => { node = value; start = offset; };
+		range.setEnd = ( value, offset ) => { if ( value !== node ) throw new Error( 'Native text Range must stay inside one text node.' ); end = offset; };
+		range.getClientRects = () => {
+
+			layout(); const element = node.parentElement.closest( '[data-canvas-text]' ) ?? node.parentElement;
+			const record = boxes.get( element );
+			const lineIndex = record?.lines?.findIndex( line => start >= line.start && start < line.end ) ?? -1;
+			const values = [];
+			if ( lineIndex >= 0 ) {
+
+				const line = record.lines[ lineIndex ];
+				const leading = record.measure( element.textContent.slice( line.start, start ) );
+				const width = record.measure( element.textContent.slice( line.start, end ) ) - leading;
+				const align = record.style[ 'text-align' ];
+				const offset = align === 'center' ? ( record.rect.width - line.width ) / 2 : align === 'right' ? record.rect.width - line.width : 0;
+				values.push( rect( record.rect.x + offset + leading, record.rect.y + lineIndex * record.lineHeight, width, record.lineHeight ) );
+
+			}
+			values.item = index => values[ index ] ?? null; return values;
+
+		};
+		return range;
+
+	};
+	const fontLoads = new Map();
+	const loadFonts = async () => {
+
+		for ( const { rule, base } of rules( document ) ) {
+
+			if ( rule.type !== 5 ) continue;
+			const family = rule.style.getPropertyValue( 'font-family' ).replace( /['"]/g, '' );
+			const source = /url\(['"]?([^)'"\s]+)/.exec( rule.style.getPropertyValue( 'src' ) );
+			if ( ! source ) continue;
+			const url = new URL( source[ 1 ], base ).href;
+			if ( ! fontLoads.has( url ) ) fontLoads.set( url, ( async () => {
+
+				const response = await fetch( url );
+				if ( ! response.ok || ! GlobalFonts.register( Buffer.from( await response.arrayBuffer() ), family ) ) throw new Error( `Native font failed to load: ${url}` );
+				dirty = true;
+
+			} )() );
+
+		}
+		await Promise.all( fontLoads.values() ); return [];
+
+	};
+	document.fonts = Object.assign( new EventTarget(), { check: specification => GlobalFonts.has( specification.replace( /^.*?\d+(?:\.\d+)?px\s*/, '' ).replace( /['"]/g, '' ) ), load: loadFonts } );
+	Object.defineProperty( document.fonts, 'ready', { get: () => loadFonts() } );
+
+	// Compose actual canvas readbacks with the same measured DOM used by text sync.
+	// This also applies the page background to transparent canvas screenshots.
+	return async ( bounds, readPixels, omitBackground = false ) => {
+
+		await document.fonts.ready; layout();
+		const scale = devicePixelRatio;
+		const output = createCanvas( Math.round( bounds.width * scale ), Math.round( bounds.height * scale ) );
+		const paint = output.getContext( '2d' );
+		if ( ! omitBackground ) { paint.fillStyle = '#fff'; paint.fillRect( 0, 0, output.width, output.height ); }
+		paint.scale( scale, scale ); paint.translate( -bounds.x, -bounds.y );
+		const draw = async element => {
+
+			const record = boxes.get( element );
+			if ( ! record ) return;
+			const { rect: box, style } = record;
+			if ( style.display === 'none' || style.visibility === 'hidden' || Number( style.opacity ) === 0 ) return;
+			paint.save(); paint.globalAlpha *= Number( style.opacity ?? 1 );
+			const rotation = /^rotate\((-?[\d.]+)deg\)$/.exec( style.transform ?? '' );
+			if ( rotation ) { paint.translate( box.x + box.width / 2, box.y + box.height / 2 ); paint.rotate( Number( rotation[ 1 ] ) * Math.PI / 180 ); paint.translate( -box.x - box.width / 2, -box.y - box.height / 2 ); }
+			const background = style[ 'background-color' ] || style.background;
+			if ( background && ! /gradient|url\(/.test( background ) ) {
+
+				paint.fillStyle = background;
+				paint.beginPath(); paint.roundRect( box.x, box.y, box.width, box.height, Math.min( parseFloat( style[ 'border-radius' ] ) || 0, box.width / 2, box.height / 2 ) ); paint.fill();
+
+			}
+			const url = imageURL( style[ 'background-image' ] || style.background );
+			if ( url && box.width > 0 && box.height > 0 ) {
+
+				if ( ! backgroundImages.has( url ) ) backgroundImages.set( url, ( async () => {
+
+					const response = await fetch( url );
+					if ( ! response.ok ) throw new Error( `Background image ${url}: HTTP ${response.status}` );
+					return loadImage( Buffer.from( await response.arrayBuffer() ) );
+
+				} )() );
+				const image = await backgroundImages.get( url );
+				const size = style[ 'background-size' ] || style.background?.split( '/' )[ 1 ]?.trim();
+				const scale = size === 'contain' ? Math.min( box.width / image.width, box.height / image.height ) : size === 'cover' ? Math.max( box.width / image.width, box.height / image.height ) : 1;
+				const position = style[ 'background-position' ] || ( /\bcenter\b/.test( style.background ?? '' ) ? 'center' : '0% 0%' );
+				const [ x, y = x === 'center' ? 'center' : '50%' ] = position.split( /\s+/ );
+				const offset = ( value, available ) => value === 'center' ? available / 2 : /^(right|bottom)$/.test( value ) ? available : value.endsWith( '%' ) ? available * parseFloat( value ) / 100 : length( value ) || 0;
+				const repeat = style[ 'background-repeat' ] || /\b(no-repeat|repeat-x|repeat-y)\b/.exec( style.background ?? '' )?.[ 0 ] || 'repeat';
+				const pattern = paint.createPattern( image, repeat );
+				pattern.setTransform( { a: scale, b: 0, c: 0, d: scale, e: box.x + offset( x, box.width - image.width * scale ), f: box.y + offset( y, box.height - image.height * scale ) } );
+				paint.fillStyle = pattern; paint.fillRect( box.x, box.y, box.width, box.height );
+
+			}
+			const border = /([\d.]+)px\s+solid\s+(.+)/.exec( style.border ?? '' );
+			if ( border ) {
+
+				paint.lineWidth = Number( border[ 1 ] ); paint.strokeStyle = border[ 2 ];
+				paint.beginPath(); paint.roundRect( box.x, box.y, box.width, box.height, Math.min( parseFloat( style[ 'border-radius' ] ) || 0, box.width / 2, box.height / 2 ) ); paint.stroke();
+
+			}
+			if ( /hidden|auto|scroll/.test( style.overflow ?? '' ) ) { paint.beginPath(); paint.rect( box.x, box.y, box.width, box.height ); paint.clip(); }
+			const inset = /^inset\(([\d.]+)%\)$/.exec( style[ 'clip-path' ] ?? '' );
+			if ( inset ) { const ratio = Number( inset[ 1 ] ) / 100; paint.beginPath(); paint.rect( box.x + box.width * ratio, box.y + box.height * ratio, box.width * ( 1 - 2 * ratio ), box.height * ( 1 - 2 * ratio ) ); paint.clip(); }
+			if ( [ 'CANVAS', 'IMG', 'VIDEO' ].includes( element.tagName ) && box.width > 0 && box.height > 0 ) {
+
+				const image = element.tagName === 'CANVAS' ? await readPixels( element ) : element._toRGBA8?.();
+				if ( ! image?.width || ! image.height ) { paint.restore(); return; }
+				const data = new Uint8ClampedArray( image.data );
+				const layer = createCanvas( image.width, image.height );
+				layer.getContext( '2d' ).putImageData( new ImageData( data, image.width, image.height ), 0, 0 );
+				paint.drawImage( layer, box.x, box.y, box.width, box.height );
+
+			} else if ( element.localName === 'svg' && box.width > 0 && box.height > 0 ) {
+
+				const svg = element.cloneNode( true ); svg.setAttribute( 'xmlns', 'http://www.w3.org/2000/svg' );
+				const image = await loadImage( Buffer.from( svg.outerHTML.replace( /currentColor/g, style.color ) ) );
+				paint.drawImage( image, box.x, box.y, box.width, box.height );
+
+			} else if ( record.lines ) {
+
+				const fontSize = parseFloat( style[ 'font-size' ] );
+				paint.font = fontFor( style );
+				paint.fillStyle = style[ '-webkit-text-fill-color' ] || style.color;
+				paint.textBaseline = 'middle'; paint.letterSpacing = style[ 'letter-spacing' ];
+				for ( const [ index, line ] of record.lines.entries() ) {
+
+					const offset = style[ 'text-align' ] === 'center' ? ( box.width - line.width ) / 2 : style[ 'text-align' ] === 'right' ? box.width - line.width : 0;
+					const text = style[ 'text-transform' ] === 'uppercase' ? line.text.toUpperCase() : line.text;
+					paint.fillText( text, box.x + offset, box.y + ( index + 0.5 ) * record.lineHeight );
+
+				}
+
+			}
+			const ordered = [ ...children( element ) ].sort( ( a, b ) => ( Number( computed( a )[ 'z-index' ] ) || 0 ) - ( Number( computed( b )[ 'z-index' ] ) || 0 ) );
+			for ( const child of ordered ) await draw( child );
+			paint.restore();
+
+		};
+		await draw( document.body );
+		return { width: output.width, height: output.height, data: output.getContext( '2d' ).getImageData( 0, 0, output.width, output.height ).data };
+
+	};
+
+}

package/node/loader.mjs

@@ -0,0 +1,103 @@
+// Load the project's browser-transformed modules, including its import map.
+// Node's normal resolver remains responsible only for the runner's own modules.
+let pageURL;
+let imports;
+let modules;
+let scopes;
+let network;
+let networkId = 0;
+
+// Version-gated platform fixes; leave upstream packages and shader recipes intact.
+export function patchNativeThreeCode( source ) {
+
+	const canvasMarker = 'three-blocks-native-canvas-target-r185';
+	if ( /this\.isWebGLBackend\s*=\s*(?:true|!0)\b/.test( source ) && ! source.includes( canvasMarker ) ) {
+
+		const assignment = /this\.gl\s*=\s*[\w$]+(?=\s*[,;)}])/g;
+		if ( ! assignment.test( source ) ) throw new Error( 'Native Three.js CanvasTarget compatibility anchor changed.' );
+		source = source.replace( assignment, value => `/*${canvasMarker}*/(${value},globalThis.__THREE__===\`185\`&&globalThis.__THREE_BLOCKS_NATIVE_CANVAS_TARGET__?.(this),this.gl)` );
+
+	}
+	// r185 destroys the device before its timestamp pool's pending map settles.
+	// Keep actual errors visible; an AbortError after intentional disposal is expected.
+	const marker = 'three-blocks-native-timestamp-dispose-r185';
+	const label = 'Error resolving queries:';
+	if ( ! source.includes( 'WebGPUTimestampQueryPool' ) || ! source.includes( label ) || source.includes( marker ) ) return source;
+	const call = /((?:\(\s*0\s*,[^()]{1,400}\)|[\w$]+)\s*\(\s*\\?["'`]Error resolving queries:\\?["'`]\s*,\s*([\w$]+)\s*\))/;
+	const edits = [];
+	for ( let index = source.indexOf( label ); index >= 0; index = source.indexOf( label, index + label.length ) ) {
+
+		// Match only the call's neighborhood, never a megabyte-long inline source map.
+		const start = Math.max( 0, index - 450 );
+		const match = call.exec( source.slice( start, index + label.length + 80 ) );
+		if ( ! match ) throw new Error( 'Native Three.js timestamp-disposal compatibility anchor changed.' );
+		edits.push( { index: start + match.index, length: match[ 0 ].length, replacement: `/*${marker}*/((globalThis.__THREE__ === \`185\` && this.isDisposed && ${match[ 2 ]}?.name === \`AbortError\`) ? void 0 : ${match[ 0 ]})` } );
+
+	}
+	for ( const edit of edits.reverse() ) source = source.slice( 0, edit.index ) + edit.replacement + source.slice( edit.index + edit.length );
+	return source;
+
+}
+
+export function initialize( data ) {
+
+	( { pageURL, imports, modules, scopes = {}, network } = data );
+
+}
+
+export function resolve( specifier, context, nextResolve ) {
+
+	if ( /^(https?|blob|data):/.test( context.parentURL ?? '' ) ) {
+
+		const scoped = Object.keys( scopes ).sort( ( a, b ) => b.length - a.length ).find( scope => context.parentURL.startsWith( new URL( scope, pageURL ).href ) );
+		const mappings = { ...imports, ...scopes[ scoped ] };
+
+		const key = Object.keys( mappings ).sort( ( a, b ) => b.length - a.length ).find(
+			key => specifier === key || key.endsWith( '/' ) && specifier.startsWith( key )
+		);
+		if ( key ) specifier = new URL( mappings[ key ] + specifier.slice( key.length ), pageURL ).href;
+		else if ( /^[./]/.test( specifier ) ) specifier = new URL( specifier, context.parentURL ).href;
+		else if ( ! /^https?:/.test( specifier ) ) throw new Error( `Unmapped browser import: ${specifier}` );
+
+	}
+	if ( modules[ specifier ] !== undefined || /^https?:/.test( specifier ) ) return { url: specifier, shortCircuit: true };
+	return nextResolve( specifier, context );
+
+}
+
+export async function load( url, context, nextLoad ) {
+
+	if ( modules[ url ] === undefined && ! /^https?:/.test( url ) ) return nextLoad( url, context );
+	let source = modules[ url ];
+	if ( source === undefined ) {
+
+		const id = `module-${++ networkId}-${pageURL}`;
+		network?.postMessage( { event: 'network', phase: 'request', id, url, method: 'GET', headers: {}, resourceType: 'script' } );
+		try {
+
+			let response = await fetch( url );
+			// Vite can discover a dependency after navigation and invalidate its hash.
+			// Resolve the current optimized file once; ordinary HTTP failures stay fatal.
+			if ( response.status === 504 && response.statusText === 'Outdated Optimize Dep' ) {
+
+				const current = new URL( url ); current.searchParams.delete( 'v' );
+				response = await fetch( current );
+
+			}
+			network?.postMessage( { event: 'network', phase: 'response', id, status: response.status, statusText: response.statusText, headers: Object.fromEntries( response.headers ) } );
+			if ( ! response.ok ) throw new Error( `Module ${url}: HTTP ${response.status}` );
+			source = await response.text();
+			network?.postMessage( { event: 'network', phase: 'finished', id, body: Buffer.from( source ) } );
+
+		} catch ( error ) {
+
+			network?.postMessage( { event: 'network', phase: 'failed', id, error: String( error ) } );
+			throw error;
+
+		}
+
+	}
+	// WASM loaders must choose the browser branch, just as in the transformed app.
+	return { format: 'module', shortCircuit: true, source: `const process = undefined;\n${patchNativeThreeCode( source )}` };
+
+}