buninu-browser 0.3.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

@@ -0,0 +1,251 @@
+// Solid QML paths keep the existing SVG DOM path. A gradient path uses a normal
+// page canvas because this browser's inline-SVG painter has no gradient support.
+// No image encoding, readback or extra CanvasKit instance is involved.
+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(
+        /[a-zA-Z]|[-+]?(?:\d*\.\d+|\d+\.?\d*)(?:[eE][-+]?\d+)?/g,
+      ) || [];
+    let i = 0,
+      x = 0,
+      y = 0,
+      sx = 0,
+      sy = 0,
+      cx = 0,
+      cy = 0,
+      previous = '',
+      command = '';
+    const number = () => {
+      const n = Number(tokens[i++]);
+      if (!Number.isFinite(n)) throw Error('Invalid QML SVG path');
+      return n;
+    };
+    const point = (relative) => {
+      const a = number(),
+        b = number();
+      return [a + (relative ? x : 0), b + (relative ? y : 0)];
+    };
+    while (i < tokens.length) {
+      if (/^[a-zA-Z]$/.test(tokens[i])) command = tokens[i++];
+      if (!command) throw Error('Missing SVG path command');
+      const relative = command === command.toLowerCase(),
+        kind = command.toUpperCase();
+      if (kind === 'Z') {
+        ctx.closePath();
+        x = sx;
+        y = sy;
+        previous = kind;
+        command = '';
+        continue;
+      }
+      if (kind === 'M' || kind === 'L' || kind === 'T') {
+        const [nx, ny] = point(relative);
+        if (kind === 'M') {
+          ctx.moveTo(nx, ny);
+          sx = nx;
+          sy = ny;
+          command = relative ? 'l' : 'L';
+        } else if (kind === 'T') {
+          const a = ['Q', 'T'].includes(previous) ? 2 * x - cx : x,
+            b = ['Q', 'T'].includes(previous) ? 2 * y - cy : y;
+          ctx.quadraticCurveTo(a, b, nx, ny);
+          cx = a;
+          cy = b;
+        } else ctx.lineTo(nx, ny);
+        x = nx;
+        y = ny;
+      } else if (kind === 'H') {
+        x = number() + (relative ? x : 0);
+        ctx.lineTo(x, y);
+      } else if (kind === 'V') {
+        y = number() + (relative ? y : 0);
+        ctx.lineTo(x, y);
+      } else if (kind === 'C') {
+        const a = point(relative),
+          b = point(relative),
+          end = point(relative);
+        ctx.bezierCurveTo(...a, ...b, ...end);
+        [cx, cy] = b;
+        [x, y] = end;
+      } else if (kind === 'S') {
+        const a = ['C', 'S'].includes(previous)
+            ? [2 * x - cx, 2 * y - cy]
+            : [x, y],
+          b = point(relative),
+          end = point(relative);
+        ctx.bezierCurveTo(...a, ...b, ...end);
+        [cx, cy] = b;
+        [x, y] = end;
+      } else if (kind === 'Q') {
+        const a = point(relative),
+          end = point(relative);
+        ctx.quadraticCurveTo(...a, ...end);
+        [cx, cy] = a;
+        [x, y] = end;
+      } else if (kind === 'A') {
+        let rx = Math.abs(number()),
+          ry = Math.abs(number());
+        const phi = (number() * Math.PI) / 180,
+          large = number() !== 0,
+          sweep = number() !== 0,
+          [nx, ny] = point(relative);
+        if (!rx || !ry) ctx.lineTo(nx, ny);
+        else if (x !== nx || y !== ny) {
+          const cos = Math.cos(phi),
+            sin = Math.sin(phi),
+            dx = (x - nx) / 2,
+            dy = (y - ny) / 2,
+            px = cos * dx + sin * dy,
+            py = -sin * dx + cos * dy;
+          const scale = (px * px) / (rx * rx) + (py * py) / (ry * ry);
+          if (scale > 1) {
+            rx *= Math.sqrt(scale);
+            ry *= Math.sqrt(scale);
+          }
+          const numerator = Math.max(
+              0,
+              rx * rx * ry * ry - rx * rx * py * py - ry * ry * px * px,
+            ),
+            denominator = rx * rx * py * py + ry * ry * px * px;
+          const factor =
+              (large === sweep ? -1 : 1) * Math.sqrt(numerator / denominator),
+            ax = (factor * rx * py) / ry,
+            ay = (-factor * ry * px) / rx;
+          const centerX = cos * ax - sin * ay + (x + nx) / 2,
+            centerY = sin * ax + cos * ay + (y + ny) / 2;
+          const start = Math.atan2((py - ay) / ry, (px - ax) / rx),
+            end = Math.atan2((-py - ay) / ry, (-px - ax) / rx);
+          ctx.ellipse(centerX, centerY, rx, ry, phi, start, end, !sweep);
+        }
+        x = nx;
+        y = ny;
+      } else throw Error('Unsupported QML SVG command: ' + command);
+      previous = kind;
+    }
+  }
+  function make(v, type, element, parent) {
+    if (type === 'Shape') {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.style.cssText =
+        'position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none';
+      while (element.firstChild) svg.appendChild(element.firstChild);
+      element.appendChild(svg);
+      roots.set(v, svg);
+    } else if (type === 'ShapePath' && roots.has(parent))
+      roots.get(parent).appendChild(element);
+  }
+  function paint(v, type) {
+    if (type === 'Shape') {
+      const svg = roots.get(v);
+      svg.setAttribute('width', String(v.width));
+      svg.setAttribute('height', String(v.height));
+      svg.setAttribute(
+        'viewBox',
+        '0 0 ' + (v.width || 1) + ' ' + (v.height || 1),
+      );
+    }
+    if (type !== 'ShapePath') return;
+    const element = elements.get(v),
+      root = parents.get(v),
+      gradient = v.fillGradient,
+      fillItem = v.fillItem;
+    if (!gradient && !fillItem) {
+      const old = canvases.get(v);
+      if (old) old.style.display = 'none';
+      return;
+    }
+    if (gradient && owners.get(gradient)?.type !== 'LinearGradient')
+      throw Error('Unsupported QML shape gradient');
+    const host = elements.get(root);
+    let canvas = canvases.get(v);
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('data-qml-gradient', '');
+      canvas.style.cssText =
+        'position:absolute;left:0;top:0;pointer-events:none';
+      host.appendChild(canvas);
+      canvases.set(v, canvas);
+      api.cleanup(() => {
+        canvas.width = 1;
+        canvas.height = 1;
+        canvas.remove();
+      });
+    }
+    canvas.style.display = 'block';
+    element.style.display = 'none';
+    const width = Math.max(1, Math.ceil(root.width)),
+      height = Math.max(1, Math.ceil(root.height));
+    if (canvas.width !== width) canvas.width = width;
+    if (canvas.height !== height) canvas.height = height;
+    canvas.style.width = root.width + 'px';
+    canvas.style.height = root.height + 'px';
+    const context = canvas.getContext('2d');
+    context.clearRect(0, 0, width, height);
+    context.beginPath();
+    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',
+          'topRightRadius',
+          'bottomRightRadius',
+          'bottomLeftRadius',
+        ].map((key) => child[key] ?? child.radius ?? 0);
+        // CanvasKit's 2D shim lacks roundRect; build the same path with arcTo.
+        const x = child.x, y = child.y, w = child.width, h = child.height;
+        const r = radii.map(value => Math.max(0, Number(value) || 0));
+        const factor = Math.min(1, w / (r[0] + r[1] || 1), w / (r[2] + r[3] || 1),
+          h / (r[0] + r[3] || 1), h / (r[1] + r[2] || 1));
+        for (let i = 0; i < 4; i++) r[i] *= Math.max(0, factor);
+        context.moveTo(x + r[0], y);
+        context.lineTo(x + w - r[1], y);context.arcTo(x + w, y, x + w, y + r[1], r[1]);
+        context.lineTo(x + w, y + h - r[2]);context.arcTo(x + w, y + h, x + w - r[2], y + h, r[2]);
+        context.lineTo(x + r[3], y + h);context.arcTo(x, y + h, x, y + h - r[3], r[3]);
+        context.lineTo(x, y + r[0]);context.arcTo(x, y, x + r[0], y, r[0]);
+        context.closePath();
+      }
+    }
+    if (fillItem) {
+      const bitmap = api.texture(fillItem);
+      if (bitmap) {
+        context.save();
+        context.clip(v.fillRule === 0 ? 'evenodd' : 'nonzero');
+        context.drawImage(bitmap, 0, 0, width, height);
+        context.restore();
+      }
+    } else {
+      const fill = context.createLinearGradient(gradient.x1, gradient.y1, gradient.x2, gradient.y2);
+      for (const stop of children(gradient))
+        fill.addColorStop(Math.max(0, Math.min(1, stop.position)), cssColor(stop.color));
+      context.fillStyle = fill;
+      context.fill(v.fillRule === 0 ? 'evenodd' : 'nonzero');
+    }
+    if (v.strokeWidth > 0) {
+      context.strokeStyle = cssColor(v.strokeColor);
+      context.lineWidth = v.strokeWidth;
+      context.lineCap =
+        v.capStyle === 32 ? 'round' : v.capStyle === 16 ? 'square' : 'butt';
+      context.lineJoin =
+        v.joinStyle === 128 ? 'round' : v.joinStyle === 64 ? 'bevel' : 'miter';
+      context.setLineDash(
+        v.strokeStyle === 2 ? v.dashPattern.map((n) => n * v.strokeWidth) : [],
+      );
+      context.lineDashOffset = v.dashOffset * v.strokeWidth;
+      context.stroke();
+    }
+  }
+  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/text.js

@@ -0,0 +1,109 @@
+// Qt Text's markup is content, not generated QML HTML. Build an inert, restricted
+// DOM fragment; embedded scripts, handlers and external resource tags are never
+// transferred to the live document. Rendering stays in the browser's CSS engine.
+export function createQmlText(document, markdown) {
+  const cache = new WeakMap();
+  const tags = new Set(
+    'a b strong i em u s strike sub sup span font br p div pre code ul ol li h1 h2 h3 h4 h5 h6 blockquote table thead tbody tr td th hr'.split(
+      ' ',
+    ),
+  );
+  const blocks = new Set(
+    'p div pre li h1 h2 h3 h4 h5 h6 blockquote tr'.split(' '),
+  );
+  function copy(source, target, collapse = false, pre = false) {
+    for (const child of source.childNodes) {
+      if (child.nodeType === 3) {
+        // Markdown emits formatting newlines between block tags. They are not
+        // extra text lines, and must not inflate a Text item's implicitHeight.
+        if (/^\s*$/.test(child.textContent) &&
+            (blocks.has(child.previousSibling?.localName) || blocks.has(child.nextSibling?.localName))) continue;
+        const text = collapse && !pre ? child.textContent.replace(/[ \t\r\n\f]+/g, ' ') : child.textContent;
+        target.appendChild(document.createTextNode(text));
+        continue;
+      }
+      if (child.nodeType !== 1) continue;
+      const tag = child.localName.toLowerCase();
+      if (['script', 'style', 'iframe', 'object', 'embed'].includes(tag))
+        continue;
+      if (!tags.has(tag)) {
+        copy(child, target, collapse, pre);
+        continue;
+      }
+      const node = document.createElement(tag === 'font' ? 'span' : tag);
+      if (blocks.has(tag) || ['blockquote', 'ul', 'ol'].includes(tag))
+        node.style.margin = '0';
+      if (tag === 'a') {
+        const href = child.getAttribute('href');
+        if (href && !/^\s*(?:javascript|vbscript|data):/i.test(href)) {
+          node.setAttribute('href', href);
+          node.style.pointerEvents = 'auto';
+        }
+      }
+      if (tag === 'font') {
+        if (child.hasAttribute('color'))
+          node.style.color = child.getAttribute('color');
+        if (child.hasAttribute('face'))
+          node.style.fontFamily = child.getAttribute('face');
+      }
+      for (const key of [
+        'color',
+        'background-color',
+        'font-family',
+        'font-size',
+        'font-weight',
+        'font-style',
+        'text-decoration',
+        'vertical-align',
+        'white-space',
+      ]) {
+        const value = child.style?.getPropertyValue(key);
+        if (value && !/url\s*\(|expression\s*\(/i.test(value))
+          node.style.setProperty(key, value);
+      }
+      copy(child, node, collapse, pre || tag === 'pre');
+      target.appendChild(node);
+    }
+  }
+  const plain = (node) => {
+    let out = '';
+    for (const child of node.childNodes) {
+      if (child.nodeType === 3) out += child.textContent;
+      else if (child.nodeType === 1) {
+        if (child.localName === 'br') out += '\n';
+        else {
+          out += plain(child);
+          if (blocks.has(child.localName) && !out.endsWith('\n')) out += '\n';
+        }
+      }
+    }
+    return out;
+  };
+  return (value) => {
+    const source = String(value.text),
+      format = value.textFormat ?? 0;
+    let entry = cache.get(value);
+    if (entry?.source === source && entry.format === format) return entry;
+    const container = entry?.container ?? document.createElement('span');
+    container.style.display = 'contents';
+    container.replaceChildren();
+    const isPlain =
+      format === 0 ||
+      (format === 2 && !/<[a-z][\w:-]*(?:\s|\/?>)/i.test(source));
+    if (isPlain) container.textContent = source;
+    else if ([1, 2, 3, 4].includes(format)) {
+      const html = format === 4 ? markdown(source) : source;
+      const template = document.createElement('template');
+      template.innerHTML = html;
+      copy(template.content, container, format === 4);
+    } else throw Error('Unsupported QML textFormat: ' + format);
+    entry = {
+      source,
+      format,
+      container,
+      plain: isPlain ? source : plain(container).replace(/\n$/, ''),
+    };
+    cache.set(value, entry);
+    return entry;
+  };
+}