buninu-browser 0.4.0 → 0.5.0

package/lib/qml/shader/fragment.js

@@ -0,0 +1,83 @@
+// Experimental Qt-style GLSL fragment subset -> SkSL. No app-specific shaders.
+// This is not a general GLSL compiler: unsupported syntax is rejected by SkSL,
+// and unsupported interfaces/preprocessor features fail before compilation.
+export function translateFragment(source) {
+  if (/\b_qml_\w*/.test(String(source))) throw Error('Reserved shader adapter identifier');
+  source=String(source).replace(/\/\*[\s\S]*?\*\//g,' ').replace(/\/\/[^\n]*/g,'');
+  source=source.replace(/^\s*#version[^\n]*$/gm,'');
+  if(/^\s*#/m.test(source))throw Error('Shader preprocessor directives are not implemented');
+  if(/\b(?:gl_FragDepth|discard|samplerCube|sampler3D|image2D)\b/.test(source))throw Error('Unsupported fragment shader feature');
+  source=source.replace(/layout\s*\([^)]*\)\s*/g,'');
+  source=source.replace(/\bprecision\s+(?:lowp|mediump|highp)\s+\w+\s*;/g,'').replace(/\b(?:highp|mediump|lowp)\s+/g,'');
+  const blocks=[];
+  for(const m of source.matchAll(/struct\s+(\w+)\s*\{([^{}]*)\}\s*;/g)) {
+    const matches=[...source.matchAll(new RegExp('uniform\\s+'+m[1]+'\\s+(\\w+)\\s*;','g'))];
+    if(matches.length===1)blocks.push({declaration:m[0],body:m[2],uniform:matches[0][0],instance:matches[0][1]});
+  }
+  for(const block of blocks){
+    source=source.replace(block.declaration,'').replace(block.uniform,block.body.split(';').filter(s=>s.trim()).map(s=>'uniform '+s.trim()+';').join('\n'));
+    source=source.replace(new RegExp('\\b'+block.instance+'\\s*\\.\\s*','g'),'');
+  }
+  const samplers=[];
+  source=source.replace(/uniform\s+sampler2D\s+(\w+)\s*;/g,(_,name)=>{
+    samplers.push(name);
+    return `uniform shader ${name}; uniform float2 _qml_size_${name};`;
+  });
+  source=source.replace(/uniform\s+\w+\s*\{([^{}]*)\}\s*;/g,(_,body)=>body.split(';').filter(s=>s.trim()).map(s=>'uniform '+s.trim()+';').join('\n'));
+  let output=null,coordinates=false;
+  source=source.replace(/\bin\s+vec2\s+qt_TexCoord0\s*;/g,()=>{coordinates=true;return 'float2 qt_TexCoord0;';});
+  source=source.replace(/\bout\s+vec4\s+(\w+)\s*;/g,(_,name)=>{
+    if(output)throw Error('Multiple fragment outputs are not supported');
+    output=name;return `float4 ${name};`;
+  });
+  if(!output)throw Error('Fragment shader requires a vec4 output');
+  if(/\b(?:in|out)\s+\w+\s+\w+\s*;/.test(source))throw Error('Unsupported fragment varying');
+  const types={vec2:'float2',vec3:'float3',vec4:'float4',ivec2:'int2',ivec3:'int3',ivec4:'int4',bvec2:'bool2',bvec3:'bool3',bvec4:'bool4',mat2:'float2x2',mat3:'float3x3',mat4:'float4x4'};
+  source=source.replace(/\b(?:[ib]?vec[234]|mat[234])\b/g,type=>types[type]);
+  for (const call of source.matchAll(/\btextureSize\s*\(\s*\w+\s*,([^)]*)\)/g)) if (call[1].trim()!=='0') throw Error('Only base-level textureSize is supported');
+  source=source.replace(/\b(texture|textureSize)\s*\(\s*(\w+)\s*,/g,(_,operation,name)=>{
+    if(!samplers.includes(name))throw Error('Sampler expressions are not supported');
+    return `_qml_${operation}_${name}(`;
+  });
+  if(!/\bvoid\s+main\s*\(\s*(?:void)?\s*\)/.test(source))throw Error('Missing fragment main');
+  source=source.replace(/\bvoid\s+main\s*\(\s*(?:void)?\s*\)/,'void _qml_fragment()');
+  source=source.replace(/\bround\s*\(/g,'_qml_round(');
+  const rounding=['float','float2','float3','float4'].map(type=>`${type} _qml_round(${type} x) {return sign(x)*floor(abs(x)+0.5);}`).join('\n');
+  const helpers=rounding+'\n'+samplers.map(name=>`float4 _qml_texture_${name}(float2 uv) {return ${name}.eval(uv * _qml_size_${name});}\nint2 _qml_textureSize_${name}(int lod) {return int2(_qml_size_${name});}`).join('\n');
+  // Functions must follow their uniforms and precede their call sites.
+  const mainAt=source.search(/\b(?:void|float\w*|int\w*|bool\w*)\s+\w+\s*\(/);
+  source=source.slice(0,mainAt)+helpers+'\n'+source.slice(mainAt);
+  return {samplers,source:`uniform float2 _qml_viewport;\n${source}\nhalf4 main(float2 p) {${coordinates?'qt_TexCoord0 = p / _qml_viewport;':''}${output}=float4(0);_qml_fragment();return half4(${output});}`};
+}
+
+export function compileFragment(kit, source) {
+  const translated=translateFragment(source);
+  let diagnostic='';
+  const effect=kit.RuntimeEffect.Make(translated.source,message=>{diagnostic+=message;});
+  if(!effect)throw Error('Software fragment compilation failed: '+diagnostic);
+  return {...translated,effect};
+}
+
+// Reuse child shaders from the renderer's existing CanvasKit instance. The
+// caller owns the returned shader, effect and children; no pixel readback here.
+export function makeFragmentShader(compiled, {width,height,uniforms={},textures={}}) {
+  const values=new Float32Array(compiled.effect.getUniformFloatCount());
+  // CanvasKit converts integer uniforms from numeric float slots internally.
+  const supplied={qt_Opacity:1,qt_Matrix:[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],...uniforms,_qml_viewport:[width,height]};
+  const children=compiled.samplers.map(name=>{
+    const texture=textures[name];
+    if(!texture?.shader || !(texture.width>0) || !(texture.height>0))throw Error('Missing shader texture: '+name);
+    supplied['_qml_size_'+name]=[texture.width,texture.height];
+    return texture.shader;
+  });
+  for(let i=0;i<compiled.effect.getUniformCount();i++){
+    const name=compiled.effect.getUniformName(i),info=compiled.effect.getUniform(i);
+    const count=info.columns*info.rows;
+    const value=supplied[name] ?? Array(count).fill(0);
+    const parts=typeof value==='number' ? [value] : Array.from(value);
+    if(parts.length!==count)throw Error('Wrong shader uniform size: '+name);
+    if(parts.some(v=>!Number.isFinite(v)))throw Error('Nonfinite shader uniform: '+name);
+    values.set(parts,info.slot);
+  }
+  return compiled.effect.makeShaderWithChildren(values,children);
+}

package/lib/qml/shader/qsb.js

@@ -0,0 +1,27 @@
+import {inflateSync} from 'node:zlib';
+
+// QSB v9 stores QDataStream shader keys followed by length-prefixed source and
+// entrypoint QByteArrays. Reflection is intentionally opaque; validate complete
+// GLSL records rather than depending on its changing private schema.
+export function fragmentSource(bytes) {
+  bytes=Buffer.from(bytes);
+  if(bytes.subarray(0,256).toString().trimStart().startsWith('#version'))return bytes.toString();
+  const limit=8*1024*1024;
+  if(bytes.length<8||bytes.readUInt32BE(0)>limit)throw Error('Invalid or oversized QSB');
+  const data=inflateSync(bytes.subarray(4),{maxOutputLength:limit});
+  if(data.length!==bytes.readUInt32BE(0)||data.length<8||data.readUInt32BE(0)!==9||data.readUInt32BE(4)!==4)throw Error('Only QSB v9 fragment packages are supported');
+  const candidates=[];
+  for(let p=20;p<data.length;p++) {
+    if(data[p]!==35||data.subarray(p,p+8).toString()!=='#version')continue;
+    const size=data.readUInt32BE(p-4),end=p+size;
+    if(data.readUInt32BE(p-20)!==1||data.readUInt32BE(p-8)!==0||size>limit||end+8>data.length)continue;
+    const version=data.readUInt32BE(p-16),flags=data.readUInt32BE(p-12);
+    if(flags!==0||version<150||version>460)continue;
+    if(data.readUInt32BE(end)!==4||data.subarray(end+4,end+8).toString()!=='main')continue;
+    const source=data.subarray(p,end).toString();
+    if(!source.startsWith(`#version ${version}`)||source.includes('\0'))continue;
+    candidates.push({version,source});p=end+7;
+  }
+  if(!candidates.length)throw Error('QSB has no supported standard desktop GLSL fragment');
+  return candidates.sort((a,b)=>a.version-b.version)[0].source;
+}

package/lib/qml/shader/renderer.js

@@ -0,0 +1,39 @@
+import {readFileSync} from 'node:fs';
+import {fragmentSource} from './qsb.js';
+import {compileFragment,makeFragmentShader} from './fragment.js';
+
+// Local-QML capability. Native handles never enter the document realm.
+export function createShaderRenderer({kit,unwrap,valid,resource,paint,track}) {
+  function node(value) {const n=unwrap(value)??value;if(!valid(n))throw Error('Invalid QML shader element');return n;}
+  return url=>{
+    const address=new URL(String(url));
+    if(address.protocol!=='file:')throw Error('ShaderEffect requires a local shader file');
+    const compiled=compileFragment(kit,fragmentSource(readFileSync(address)));
+    let disposed=false;
+    const stop=track(()=>{disposed=true;compiled.effect.delete();});
+    const names=Array.from({length:compiled.effect.getUniformCount()},(_,i)=>compiled.effect.getUniformName(i)).filter(n=>!n.startsWith('_qml_')&&!['qt_Matrix','qt_Opacity'].includes(n));
+    return {
+      uniforms:names,samplers:compiled.samplers,
+      dispose:stop,
+      draw(target,uniforms,inputs,smooth=true) {
+        if(disposed)throw Error('ShaderEffect is disposed');
+        target=node(target);
+        if(target.tagName!=='CANVAS')throw Error('ShaderEffect target must be a canvas');
+        const children=[],textures={};let shader,p;
+        try {
+          for(const name of compiled.samplers){
+            if(!inputs[name]?.element)return false;
+            const r=resource(node(inputs[name].element));
+            if(!r?.image)return false;
+            const child=r.image.makeShaderOptions(kit.TileMode.Clamp,kit.TileMode.Clamp,inputs[name].smooth?kit.FilterMode.Linear:kit.FilterMode.Nearest,kit.MipmapMode.None);
+            children.push(child);textures[name]={shader:child,width:r.width,height:r.height};
+          }
+          shader=makeFragmentShader(compiled,{width:target.width,height:target.height,uniforms,textures});
+          p=new kit.Paint();p.setShader(shader);p.setBlendMode(kit.BlendMode.Src);
+          paint(target,canvas=>canvas.drawRect(kit.XYWHRect(0,0,target.width,target.height),p));
+          return true;
+        }finally{p?.delete();shader?.delete();for(const child of children)child.delete();}
+      },
+    };
+  };
+}

package/lib/qml/shader/runtime.js

@@ -0,0 +1,61 @@
+// Serialized local QML adapter. Rendering remains an ordinary HTML canvas.
+export function createQmlShaderEffects(api) {
+  const {effect,untrack,elements,host,cleanup}=api;
+  function make(v,type,element){
+    if(type!=='ShaderEffect')return;
+    Object.assign(v,{fragmentShader:'',vertexShader:'',status:0,log:'',blending:true,cullMode:0});
+    const canvas=document.createElement('canvas');
+    canvas.style.cssText='position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none';
+    element.appendChild(canvas);
+    let program=null,source=null,frame,disposed=false;
+    const fail=e=>{v.status=2;v.log=String(e.message||e);};
+    effect(()=>{
+      const url=v.fragmentShader,vertex=v.vertexShader;
+      untrack(()=>{
+        if(url===source&&!vertex)return;
+        source=url;program?.dispose();program=null;v.status=0;v.log='';
+        if(!url)return;
+        try{
+          if(vertex)throw Error('Custom vertex shaders are not implemented');
+          if(!host?.shader)throw Error('ShaderEffect requires a local QML renderer');
+          program=host.shader(api.resolve(v,url));v.status=1;
+        }catch(e){fail(e);}
+      });
+    });
+    effect(()=>{
+      v.status;v.fragmentShader;
+      const width=Math.ceil(v.width),height=Math.ceil(v.height),smooth=v.smooth!==false;
+      const uniforms={},inputs={};
+      if(program){
+        for(const name of program.uniforms){
+          const value=v[name];
+          uniforms[name]=value&&typeof value==='object' ? ('r' in value?[value.r,value.g,value.b,value.a]: 'x' in value?['x','y','z','w'].filter(k=>k in value).map(k=>value[k]):Array.from(value)):value;
+        }
+        for(const name of program.samplers){
+          const value=v[name];
+          if(!value)continue;
+          value.status;value.source;
+          const element=elements.get(value);
+          inputs[name]=element?.querySelector('img,canvas');
+          if(value.sourceItem!==undefined)inputs[name]=api.texture(value);
+          inputs[name]={element:inputs[name],smooth:value.smooth!==false};
+        }
+      }
+      untrack(()=>{
+        cancelAnimationFrame(frame);
+        if(!program||!(width>0&&height>0))return;
+        if(width>8192||height>8192||width*height>16777216){fail(Error('ShaderEffect size limit'));return;}
+        frame=requestAnimationFrame(()=>{
+          if(disposed||!program)return;
+          try{
+            if(canvas.width!==width)canvas.width=width;
+            if(canvas.height!==height)canvas.height=height;
+            program.draw(canvas,uniforms,inputs,smooth);
+          }catch(e){fail(e);}
+        });
+      });
+    });
+    cleanup(()=>{disposed=true;cancelAnimationFrame(frame);program?.dispose();canvas.remove();});
+  }
+  return {make};
+}

package/lib/qml/shapes.js

@@ -5,6 +5,13 @@ export function createQmlShapes(api) {
   const { elements, parents, owners, children, cssColor } = api;
   const roots = new WeakMap(),
     canvases = new WeakMap();
+  function multiline(paths) {
+    return (paths || []).map(points => points.map((p,i) => {
+      const x = Number(p.x ?? p[0]), y = Number(p.y ?? p[1]);
+      if (!Number.isFinite(x) || !Number.isFinite(y)) throw Error('Invalid PathMultiline point');
+      return `${i ? 'L' : 'M'}${x} ${y}`;
+    }).join(' ')).join(' ');
+  }
   function path(ctx, source) {
     const tokens =
       String(source).match(
@@ -189,6 +196,7 @@ export function createQmlShapes(api) {
     for (const child of children(v)) {
       const type = owners.get(child)?.type;
       if (type === 'PathSvg') path(context, child.path);
+      else if (type === 'PathMultiline') path(context, multiline(child.paths));
       else if (type === 'PathRectangle') {
         const radii = [
           'topLeftRadius',
@@ -239,5 +247,5 @@ export function createQmlShapes(api) {
       context.stroke();
     }
   }
-  return { make, paint };
+  return { make, paint, multiline };
 }

package/lib/qml/shortcuts.js

@@ -0,0 +1,65 @@
+// QML Shortcut adapter over the existing DOM keyboard events.
+export function createQmlShortcuts(api) {
+  const entries = new Set();
+  const names = {escape:'Escape',esc:'Escape',space:'Space',tab:'Tab',backtab:'Backtab',return:'Return',enter:'Enter',left:'Left',right:'Right',up:'Up',down:'Down',home:'Home',end:'End',pgup:'PgUp',pageup:'PgUp',pgdown:'PgDown',pagedown:'PgDown',delete:'Del',del:'Del',insert:'Ins',ins:'Ins',backspace:'Backspace'};
+  const keyName = key => names[String(key).toLowerCase()] || (/^f(?:[1-9]|[12]\d|3[0-5])$/i.test(key) ? key.toUpperCase() : [...String(key)].length===1 ? String(key).toUpperCase() : '');
+  function parse(value) {
+    if (typeof value !== 'string' || !value.trim()) return [];
+    const strokes = value.trim()===',' ? [','] : value.split(/,\s*/);
+    if (strokes.length>4) return [];
+    const result=[];
+    for(const stroke of strokes){
+      let rest=stroke.trim(), mods=[];
+      while(/^(ctrl|alt|shift|meta)\+/i.test(rest)){
+        const at=rest.indexOf('+');mods.push(rest.slice(0,at).toLowerCase());rest=rest.slice(at+1);
+      }
+      const key=keyName(rest);if(!key)return [];
+      result.push({key,mods:new Set(mods)});
+    }
+    return result;
+  }
+  const text = value => parse(value).map(({key,mods})=>['ctrl','alt','shift','meta'].filter(m=>mods.has(m)).map(m=>m[0].toUpperCase()+m.slice(1)).concat(key).join('+')).join(', ');
+  function matches(stroke,event){
+    const key=event.key===' ' ? 'Space' : event.key==='Enter' ? 'Return' : event.key?.replace(/^Arrow/,'');
+    if(stroke.key!==keyName(key) && !(stroke.key==='Enter' && key==='Return'))return false;
+    for(const name of ['ctrl','alt','meta'])if(stroke.mods.has(name)!==!!event[name+'Key'])return false;
+    // Shift is intrinsic to printable punctuation such as '+' and '?'.
+    if(stroke.mods.has('shift')!==!!event.shiftKey && !(event.shiftKey && !stroke.mods.has('shift') && key?.length===1 && !/[a-z0-9]/i.test(key)))return false;
+    return true;
+  }
+  function keydown(event){
+    if(event.defaultPrevented || event.isComposing)return;
+    const complete=[], partial=[];
+    for(const entry of entries){
+      const v=entry.v, window=v.Window?.window;
+      if(!v.enabled || (!v.autoRepeat && event.repeat) || (window && (window.visible===false || (v.context!==2 && api.activeWindow() && api.activeWindow()!==window)))){entry.pending=[];continue;}
+      const sequences=(v.sequences?.length?v.sequences:[v.sequence]).map(parse).filter(s=>s.length);
+      const candidates=entry.pending.length && Date.now()-entry.time<1000 ? entry.pending : sequences.map(s=>({s,at:0}));
+      entry.pending=[];
+      for(const candidate of candidates){
+        if(!matches(candidate.s[candidate.at],event))continue;
+        if(candidate.at+1===candidate.s.length)complete.push(entry);
+        else entry.pending.push({s:candidate.s,at:candidate.at+1});
+      }
+      if(entry.pending.length){entry.time=Date.now();partial.push(entry);}
+    }
+    if(!complete.length&&!partial.length)return;
+    event.preventDefault();event.stopImmediatePropagation();
+    const unique=[...new Set(complete)];
+    if(unique.length){
+      for(const entry of entries)entry.pending=[];
+      for(const entry of unique)api.emit(entry.v, unique.length>1||partial.length ? 'onActivatedAmbiguously':'onActivated');
+    }
+  }
+  function make(v,type){
+    if(type!=='Shortcut')return;
+    Object.assign(v,{sequence:'',sequences:[],autoRepeat:true,context:1});
+    Object.defineProperty(v,'portableText',{get:()=>text(v.sequences?.length?v.sequences[0]:v.sequence)});
+    Object.defineProperty(v,'nativeText',{get:()=>v.portableText});
+    const entry={v,pending:[],time:0};
+    if(!entries.size)document.addEventListener('keydown',keydown,true);
+    entries.add(entry);
+    api.cleanup(()=>{entries.delete(entry);if(!entries.size)document.removeEventListener('keydown',keydown,true);});
+  }
+  return {make};
+}

package/lib/qml/textures.js

@@ -24,7 +24,7 @@ export function createQmlTextures(api) {
     if (type !== 'ShaderEffectSource') return;
     if (!api.host) throw Error('ShaderEffectSource requires a local QML host renderer');
     Object.assign(v, { sourceItem: null, sourceRect: { x: 0, y: 0, width: 0, height: 0 },
-      textureSize: { width: 0, height: 0 }, hideSource: false, live: true,
+      mipmap:false, smooth:true, textureSize: { width: 0, height: 0 }, hideSource: false, live: true,
       scheduledUpdateCompleted: signal() });
     const canvas = document.createElement('canvas');
     canvas.width = canvas.height = 1;
@@ -55,6 +55,7 @@ export function createQmlTextures(api) {
       if (canvas.width !== w) canvas.width = w;
       if (canvas.height !== h) canvas.height = h;
       const ctx = canvas.getContext('2d');
+      ctx.imageSmoothingEnabled=v.smooth!==false;
       ctx.clearRect(0, 0, w, h);
       ctx.drawImage(input, rect.width > 0 ? rect.x : 0, rect.height > 0 ? rect.y : 0, sw, sh, 0, 0, w, h);
       entry.ready = true;
@@ -65,6 +66,8 @@ export function createQmlTextures(api) {
     v.scheduleUpdate = () => { requested = true; queue(); };
     effect(() => {
       const next = v.sourceItem, hide = v.hideSource;
+      v.smooth;
+      if(v.mipmap)throw Error("ShaderEffectSource mipmaps are not implemented");
       const live = v.live;
       const size = v.textureSize, rect = v.sourceRect;
       size.width; size.height; rect.x; rect.y; rect.width; rect.height;

package/lib/qml/window-constraints.js

@@ -0,0 +1,16 @@
+// Optional frontend adapter; xdg_toplevel size hints, not an application check.
+export function qmlWindowConstraints(client,window,context) {
+  let previous='';
+  return async()=>{
+    if(!previous&&!/\.qml(?:[?#]|$)/i.test(context.url||''))return;
+    const hints=await context.evaluate(`(()=>{const elements=[...document.querySelectorAll('[data-qml-window-min]')];const e=elements.find(e=>e.style.display!=='none');return e?[e.getAttribute('data-qml-window-min'),e.getAttribute('data-qml-window-max')]:null;})()`);
+    const key=JSON.stringify(hints);if(previous===key)return;
+    const parse=value=>{try{return JSON.parse(value).map(n=>Number.isFinite(n)?Math.max(0,Math.min(8192,Math.ceil(n))):0);}catch{return [0,0];}};
+    const min=parse(hints?.[0]),max=parse(hints?.[1]);
+    for(let i=0;i<2;i++)if(max[i]&&max[i]<min[i])max[i]=min[i];
+    client.request(window.toplevel,'set_min_size',...min);
+    client.request(window.toplevel,'set_max_size',...max);
+    client.request(window.surface,'commit');
+    previous=key;
+  };
+}

package/lib/renderer/bindings.js

@@ -205,6 +205,8 @@ export class BindingRealm {
   }
 
   /** The page's Range for an engine Range (one wrapper each). */
+  unwrapRange(range) { return RangeBinding.rangeOf(range); }
+
   wrapRange(range) {
     if (!range) return null;
     let wrapper = this.#ranges.get(range);
@@ -1372,7 +1374,7 @@ function isMedia(wrapper) {
 
 /** on* event handler properties (element.onclick = fn, script.onload = fn). */
 export const EVENT_HANDLER_NAMES = Object.freeze([
-  "click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave",
+  "click", "auxclick", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave",
   "keydown", "keyup", "keypress", "beforeinput", "input", "change", "submit", "reset", "focus", "blur", "load", "error",
   "abort", "scroll", "resize", "wheel", "contextmenu", "touchstart", "touchend", "touchmove",
   "pointerdown", "pointerup", "pointermove", "animationend", "transitionend", "readystatechange", "slotchange", "toggle", "invalid",
@@ -1696,6 +1698,8 @@ class DocumentBinding extends ParentBinding {
     return realmOf(this).wrap(nodeOf(this).createDocumentFragment());
   }
 
+  getSelection() { return realmOf(this).selection?.() ?? null; }
+
   createRange() {
     return realmOf(this).wrapRange(nodeOf(this).createRange());
   }

package/lib/renderer/canvas-2d.js

@@ -346,3 +346,19 @@ function copyImageData(image) {
   }
   return { width: image.width, height: image.height, data, colorSpace: "srgb" };
 }
+
+// qml handle begin: software fragment effects draw into the existing canvas surface
+export function paintQmlCanvas(node, draw) {
+  if (!canvasContext(node, "2d")) throw Error('Canvas renderer is unavailable');
+  const state = surfaces.get(node).state;
+  if (!state.raster) throw Error('Canvas surface is unavailable');
+  const canvas = state.raster.getCanvas();
+  canvas.save();
+  try {
+    const inverse = CanvasKit.Matrix.invert(canvas.getTotalMatrix());
+    if (!inverse) throw Error("Noninvertible QML canvas transform");
+    canvas.concat(inverse); draw(canvas);
+  }
+  finally { canvas.restore(); changed(state); }
+}
+// qml handle end

package/lib/renderer/document-selection.js

@@ -0,0 +1,19 @@
+// Keep engine nodes/ranges behind the same DOM wrappers as the rest of the realm.
+export function selectionBinding(window, realm, nodeOf, changed) {
+  const native=()=>window.getSelection();
+  const api={};
+  for(const key of ['anchorOffset','focusOffset','isCollapsed','rangeCount','type'])Object.defineProperty(api,key,{get:()=>native()[key]});
+  for(const key of ['anchorNode','focusNode'])Object.defineProperty(api,key,{get:()=>realm.wrap(native()[key])});
+  api.toString=()=>native().toString();
+  api.getRangeAt=i=>realm.wrapRange(native().getRangeAt(i));
+  const mutate=(name,args)=>{const result=native()[name](...args);changed();return result;};
+  for(const name of ['removeAllRanges','empty','collapseToStart','collapseToEnd','deleteFromDocument'])api[name]=()=>mutate(name,[]);
+  api.collapse=api.setPosition=(node,offset=0)=>mutate('collapse',[nodeOf(node),offset]);
+  api.extend=(node,offset=0)=>mutate('extend',[nodeOf(node),offset]);
+  api.setBaseAndExtent=(a,ao,f,fo)=>mutate('setBaseAndExtent',[nodeOf(a),ao,nodeOf(f),fo]);
+  api.selectAllChildren=node=>mutate('selectAllChildren',[nodeOf(node)]);
+  api.containsNode=(node,partial=false)=>native().containsNode(nodeOf(node),partial);
+  api.addRange=range=>mutate('addRange',[realm.unwrapRange(range)]);
+  api.removeRange=range=>mutate('removeRange',[realm.unwrapRange(range)]);
+  return api;
+}

package/lib/renderer/host.js

@@ -1,3 +1,4 @@
+import { RENDER_INTERVAL_FLAG, renderMinInterval } from "./render-interval.js";
 import {writeClipboard, readClipboard} from '../clipboard.js';
 /**
  * Controller-side handle for a renderer process.
@@ -16,6 +17,7 @@ import {writeClipboard, readClipboard} from '../clipboard.js';
 import {listenCompositor} from "./compositor-channel.js";
 import {RawFrames} from "../paint/raw-frames.js";
 import { PulseClient } from "../audio/pulse-client.js";
+import { SharedAudioConnection } from "../audio/shared-connection.js";
 import { logEnabled, pipeToLog, RENDERER_LOG_FLAG, writeLog } from "../log.js";
 import { NetworkService } from "../network/network-service.js";
 import { COMPOSITOR_FLAG, FULL_STYLE_FLAG, VERIFY_STYLE_FLAG } from "./flags.js";
@@ -33,14 +35,9 @@ const MAX_RESOURCE_BYTES = 32 * 1024 * 1024;
 // Audio output: one PulseAudio native-protocol connection (jspulse or a
 // PulseAudio daemon on 127.0.0.1:4713) shared by every renderer, opened on
 // first use. Renderers cannot open sockets, so their audio comes through here.
-let pulse = null;
-function pulseClient() {
-  pulse ??= PulseClient.connect().catch((error) => {
-    pulse = null;
-    throw new Error(`no PulseAudio server at 127.0.0.1:4713 (start jspulse): ${error.message}`);
-  });
-  return pulse;
-}
+const pulse = new SharedAudioConnection(() => PulseClient.connect().catch((error) => {
+  throw new Error(`no PulseAudio server at 127.0.0.1:4713 (start jspulse): ${error.message}`);
+}));
 const MAX_AUDIO_STREAMS = 8;
 const MAX_AUDIO_CHUNK = 4 * 1024 * 1024;
 
@@ -164,6 +161,7 @@ export class RendererHost {
 
       const child = Bun.spawn({
         cmd: [process.execPath, this.#entry, ...this.#args,
+          RENDER_INTERVAL_FLAG + renderMinInterval(process.env.BUNINU_RENDER_MIN_INTERVAL),
           ...(logging ? [RENDERER_LOG_FLAG] : []), ...(compositor ? [COMPOSITOR_FLAG, `--compositor-endpoint=${JSON.stringify(channel.transport.endpoint)}`] : []),
           ...(process.env.BUNINU_VERIFY_STYLE ? [VERIFY_STYLE_FLAG] : []), ...(process.env.BUNINU_FULL_STYLE ? [FULL_STYLE_FLAG] : [])],
         env,
@@ -543,20 +541,24 @@ export class RendererHost {
       return;
     }
     const entry = { child, stream: null, early: [] };
-    entry.opened = pulseClient()
-      .then((client) => client.openPlayback({
+    entry.opened = pulse.acquire(child)
+      .then((client) => {
+        if (this.#audio.get(id) !== entry) throw Error("Audio owner closed");
+        return client.openPlayback({
         rate, channels, name: String(name ?? "audio").slice(0, 200),
         leadSeconds: name === "piano" ? 0.12 : undefined,
         onRequest: (bytes) => send({ event: "request", bytes }),
         onTiming: name === "piano" ? null : (timing) => send({ event: "timing", ...timing }),
         onTimingError: (error) => send({ event: "timing-error", message: String(error?.message ?? error) }),
-      }))
+      });
+      })
       .then((stream) => {
         if (this.#audio.get(id) !== entry) return stream.close();
         entry.stream = stream;
         for (const data of entry.early.splice(0)) stream.write(data);
         send({ event: "ready" });
       }, (error) => {
+        if (this.#audio.get(id) !== entry) return;
         this.#audio.delete(id);
         send({ event: "error", message: String(error?.message ?? error) });
       });
@@ -564,6 +566,7 @@ export class RendererHost {
   }
 
   #closeAudio(child) {
+    pulse.release(child);
     for (const [id, entry] of this.#audio) {
       if (entry.child !== child) continue;
       this.#audio.delete(id);

package/lib/renderer/main.js

@@ -1,3 +1,4 @@
+import { RENDER_INTERVAL_FLAG, renderMinInterval } from "./render-interval.js";
 /**
  * Renderer process entry point.
  *
@@ -252,6 +253,7 @@ function clipboardWrite(text, type = 'clipboard-write') {
 }
 
 const renderer = await createPageRenderer({
+  renderMinInterval: renderMinInterval(process.argv.find(arg => arg.startsWith(RENDER_INTERVAL_FLAG))?.slice(RENDER_INTERVAL_FLAG.length)),
   fetchResource,
   rewriteScript,
   requestNavigation: (url, download = null, fragmentFrom = null, post = null) => process.send({ type: "navigate", url, download, fragmentFrom, post }),

package/lib/renderer/page-realm.js

@@ -1,3 +1,4 @@
+import {selectionBinding} from './document-selection.js';
 /**
  * The JavaScript environment of one document.
  *
@@ -352,6 +353,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     }
   };
 
+  let documentSelection;
   const realm = new BindingRealm(window, {
     touch: (node, features) => {
       if (!node || node === document || node.ownerDocument === document) hooks.touch(node, features);
@@ -567,6 +569,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   // HTMLCanvasElement width/height are the bitmap size (default 300×150), and
   // getContext("2d") is how pages sample colours and draw. Other elements do
   // not inherit these.
+  realm.selection=()=>documentSelection ??= selectionBinding(window,realm,nodeOf,()=>hooks.selectionChanged?.());
   const canvasPrototype = elementInterfacePrototypes.get("HTMLCanvasElement");
   for (const name of ["width", "height"]) {
     Object.defineProperty(canvasPrototype, name, {
@@ -1785,15 +1788,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
         element: node,
       });
     },
-    getSelection: () => ({
-      anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0,
-      isCollapsed: true, rangeCount: 0, type: "None",
-      addRange() {}, collapse() {}, collapseToEnd() {}, collapseToStart() {},
-      containsNode: () => false, deleteFromDocument() {}, empty() {}, extend() {},
-      getRangeAt: () => { throw new DOMException("Index out of range", "IndexSizeError"); },
-      modify() {}, removeAllRanges() {}, removeRange() {}, selectAllChildren() {}, setBaseAndExtent() {},
-      toString: () => "",
-    }),
+    getSelection: () => realm.selection(),
     matchMedia: (query) => {
       const { width, height, mobile } = hooks.viewport();
       return {