buninu-browser 0.4.0 → 0.5.0

package/lib/qml/canvas.js

@@ -0,0 +1,76 @@
+// QML lifecycle adapter; all pixels and drawing commands use HTML Canvas 2D.
+export function createQmlCanvas(api) {
+  const {effect, untrack, emit, cleanup} = api;
+  function make(v, type, element) {
+    if (type !== 'Canvas') return;
+    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 frame, disposed = false, ready = false;
+    const callbacks = new Set();
+    Object.assign(v, {available:false, contextType:'2d', canvasSize:{width:0,height:0}});
+    const images=new Map();
+    v.loadImage=url=>{
+      url=String(url);if(images.has(url))return;
+      const image=document.createElement('img'),entry={image,status:'loading'};
+      images.set(url,entry);
+      entry.loaded=()=>{if(disposed||images.get(url)!==entry||!image.naturalWidth||!image.naturalHeight)return;entry.status='loaded';emit(v,'onImageLoaded');};
+      image.addEventListener('load',entry.loaded);
+      entry.failed=()=>{if(disposed||images.get(url)!==entry)return;entry.status='error';};
+      image.addEventListener('error',entry.failed);
+      image.style.display='none';element.appendChild(image);image.src=url;
+    };
+    v.unloadImage=url=>{const entry=images.get(String(url));if(entry){entry.image.removeEventListener('load',entry.loaded);entry.image.removeEventListener('error',entry.failed);entry.image.remove();images.delete(String(url));}};
+    v.isImageLoaded=url=>images.get(String(url))?.status==='loaded';
+    v.isImageLoading=url=>images.get(String(url))?.status==='loading';
+    v.isImageError=url=>images.get(String(url))?.status==='error';
+    const context = canvas.getContext('2d');
+    // QML Context2D.reset resets state and pixels. Reuse HTML canvas's
+    // dimension-reset behavior when the underlying 2D implementation lacks it.
+    const qmlContext = new Proxy(context, {
+      get(target, key) {
+        if (key === 'reset' && typeof target.reset !== 'function') return () => {canvas.width = canvas.width;};
+        if(key==='createImageData')return (...args)=>{
+          if(args.length!==1||typeof args[0]!=='string')return target.createImageData(...args);
+          const entry=images.get(args[0]);if(entry?.status!=='loaded')return null;
+          const tmp=document.createElement('canvas');tmp.width=entry.image.naturalWidth;tmp.height=entry.image.naturalHeight;
+          try{const ctx=tmp.getContext('2d');ctx.drawImage(entry.image,0,0);return ctx.getImageData(0,0,tmp.width,tmp.height);}
+          finally{tmp.width=tmp.height=1;}
+        };
+        const value = target[key];
+        return typeof value === 'function' ? value.bind(target) : value;
+      },
+      set(target, key, value) {target[key]=(key==='fillStyle'||key==='strokeStyle') && value && typeof value==='object' && 'r' in value ? api.cssColor(value) : value;return true;},
+    });
+    v.getContext = type => type === '2d' ? qmlContext : null;
+    Object.defineProperty(v, 'context', {get:()=>v.contextType === '2d' && v.available ? v.getContext('2d') : null});
+    v.requestPaint = () => {
+      if (disposed || frame !== undefined) return;
+      frame = requestAnimationFrame(() => {
+        frame = undefined;
+        if (disposed || !ready) return;
+        untrack(() => {
+          emit(v, 'onPaint', {x:0,y:0,width:canvas.width,height:canvas.height});
+          emit(v, 'onPainted');
+        });
+      });
+    };
+    v.markDirty = () => v.requestPaint();
+    v.requestAnimationFrame = callback => {
+      if (disposed) return 0;
+      const id = requestAnimationFrame(time => {callbacks.delete(id);if (!disposed) callback(time);});
+      callbacks.add(id);
+      return id;
+    };
+    v.cancelRequestAnimationFrame = id => {callbacks.delete(id);cancelAnimationFrame(id);};
+    effect(() => {
+      const w = Math.max(0,Math.ceil(v.canvasSize.width || v.width));
+      const h = Math.max(0,Math.ceil(v.canvasSize.height || v.height));
+      if (canvas.width !== w) canvas.width = w;
+      if (canvas.height !== h) canvas.height = h;
+      untrack(() => {ready=true;v.available=true;v.requestPaint();});
+    });
+    cleanup(() => {disposed=true;for(const url of images.keys())v.unloadImage(url);cancelAnimationFrame(frame);for (const id of callbacks) cancelAnimationFrame(id);callbacks.clear();});
+  }
+  return {make};
+}

package/lib/qml/document.js

@@ -1,3 +1,6 @@
+import {createQmlShaderEffects} from './shader/runtime.js';
+import { createQmlShortcuts } from './shortcuts.js';
+import { createQmlCanvas } from './canvas.js';
 import { nonvisualTypes, typeProperties, createQt } from './builtins.js';
 import { createInertWindow } from '../happy-dom/parser.js';
 import { parseQml } from './parser.js';
@@ -25,6 +28,8 @@ const defaults = [
   'Layout',
   'Keys',
   'opacity',
+  'smooth',
+  'antialiasing',
   'visible',
   'enabled',
   'clip',
@@ -79,6 +84,7 @@ const defaults = [
   'elide',
   'lineHeight',
   'lineHeightMode',
+  'grabToImage',
   'forceActiveFocus',
   'contains',
   'mapToItem',
@@ -444,7 +450,7 @@ export function createQmlDocument(
       });
     let template = null;
     const constants =
-      'const MediaPlayer={NoError:0,ResourceError:1,NetworkError:2,FormatError:3,AccessDeniedError:4,StoppedState:0,PlayingState:1,PausedState:2,NoMedia:0,LoadingMedia:1,LoadedMedia:2,StalledMedia:3,BufferingMedia:4,BufferedMedia:5,EndOfMedia:6,InvalidMedia:7,Infinite:-1};const VideoOutput={Stretch:0,PreserveAspectFit:1,PreserveAspectCrop:2};const XmlListModel={Null:0,Ready:1,Loading:2,Error:3};const LoggingCategory={Debug:0,Info:4,Warning:1,Critical:2,Fatal:3};const Flow={LeftToRight:0,TopToBottom:1};const ListView={Beginning:0,Center:1,End:2,Visible:3,Contain:4,SnapPosition:5,Vertical:2,Horizontal:1,NoHighlightRange:0};const GridView={...ListView,FlowLeftToRight:0,FlowTopToBottom:1};const Binding={RestoreNone:0,RestoreBinding:1,RestoreValue:2,RestoreBindingOrValue:3};const Gradient={Vertical:0,Horizontal:1};const PointerHandler={CanTakeOverFromAnything:31,ApprovesTakeOverByAnything:511,TakeOverForbidden:0};const Drag={None:0,Automatic:1,Internal:2};const Application={styleHints:{wheelScrollLines:3,mouseDoubleClickInterval:400}};const Flickable={AutoFlickDirection:0,HorizontalFlick:1,VerticalFlick:2,HorizontalAndVerticalFlick:3,StopAtBounds:0,DragOverBounds:1,OvershootBounds:2,DragAndOvershootBounds:3};const Image={Null:0,Ready:1,Loading:2,Error:3,Stretch:0,PreserveAspectFit:1,PreserveAspectCrop:2,Tile:3,Pad:6};const TextInput={AlignLeft:1,AlignRight:2,AlignHCenter:4,AlignTop:32,AlignBottom:64,AlignVCenter:128,Normal:0,Password:2,NoEcho:1,PasswordEchoOnEdit:3,NativeRendering:1};const TextEdit=TextInput;const Text={AlignLeft:1,AlignRight:2,AlignHCenter:4,AlignTop:32,AlignBottom:64,AlignVCenter:128,PlainText:0,RichText:1,AutoText:2,StyledText:3,MarkdownText:4,NoWrap:0,WordWrap:1,WrapAnywhere:2,Wrap:3,WrapAtWordBoundaryOrAnywhere:3,ElideNone:0,ElideLeft:1,ElideRight:2,ElideMiddle:3,ProportionalHeight:0,FixedHeight:1};const Font={MixedCase:0,AllUppercase:1,AllLowercase:2,SmallCaps:3,Capitalize:4};const Accessible={Button:43,CheckBox:44};const Shape={CurveRenderer:1};const ShapePath={SquareCap:16,FlatCap:0,RoundCap:32,MiterJoin:0,BevelJoin:64,RoundJoin:128,DashLine:2,WindingFill:1,OddEvenFill:0};const Easing={Linear:0,InQuad:1,OutQuad:2,InOutQuad:3,InCubic:5,OutCubic:6,InOutCubic:7,OutQuart:10,OutQuint:14,OutSine:18,OutExpo:22,OutBack:34};const Animation={Infinite:-1};const Component={Null:0,Ready:1,Loading:2,Error:3};const Loader=Component;const TapHandler={ReleaseWithinBounds:1};const Qt=r.Qt,Quickshell=r.Quickshell,Hyprland=r.Hyprland,FileViewError={FileNotFound:"ENOENT"};';
+      'const Locale={LongFormat:0,ShortFormat:1,NarrowFormat:2,MetricSystem:0,ImperialUSSystem:1,ImperialUKSystem:2};const StandardKey={Copy:9,Paste:10,Cut:8,SelectAll:26,Undo:11,Redo:12};const ShaderEffect={Uncompiled:0,Compiled:1,Error:2,NoCulling:0,BackFaceCulling:1,FrontFaceCulling:2};const MediaPlayer={NoError:0,ResourceError:1,NetworkError:2,FormatError:3,AccessDeniedError:4,StoppedState:0,PlayingState:1,PausedState:2,NoMedia:0,LoadingMedia:1,LoadedMedia:2,StalledMedia:3,BufferingMedia:4,BufferedMedia:5,EndOfMedia:6,InvalidMedia:7,Infinite:-1};const VideoOutput={Stretch:0,PreserveAspectFit:1,PreserveAspectCrop:2};const XmlListModel={Null:0,Ready:1,Loading:2,Error:3};const LoggingCategory={Debug:0,Info:4,Warning:1,Critical:2,Fatal:3};const Flow={LeftToRight:0,TopToBottom:1};const ListView={Beginning:0,Center:1,End:2,Visible:3,Contain:4,SnapPosition:5,Vertical:2,Horizontal:1,NoHighlightRange:0};const GridView={...ListView,FlowLeftToRight:0,FlowTopToBottom:1};const Binding={RestoreNone:0,RestoreBinding:1,RestoreValue:2,RestoreBindingOrValue:3};const Gradient={Vertical:0,Horizontal:1};const PointerHandler={CanTakeOverFromAnything:31,ApprovesTakeOverByAnything:511,TakeOverForbidden:0};const Drag={None:0,Automatic:1,Internal:2};const Application={styleHints:{wheelScrollLines:3,mouseDoubleClickInterval:400}};const Flickable={AutoFlickDirection:0,HorizontalFlick:1,VerticalFlick:2,HorizontalAndVerticalFlick:3,StopAtBounds:0,DragOverBounds:1,OvershootBounds:2,DragAndOvershootBounds:3};const Image={Null:0,Ready:1,Loading:2,Error:3,Stretch:0,PreserveAspectFit:1,PreserveAspectCrop:2,Tile:3,Pad:6};const TextInput={AlignLeft:1,AlignRight:2,AlignHCenter:4,AlignTop:32,AlignBottom:64,AlignVCenter:128,Normal:0,Password:2,NoEcho:1,PasswordEchoOnEdit:3,NativeRendering:1};const TextEdit=TextInput;const Text={AlignLeft:1,AlignRight:2,AlignHCenter:4,AlignTop:32,AlignBottom:64,AlignVCenter:128,PlainText:0,RichText:1,AutoText:2,StyledText:3,MarkdownText:4,NoWrap:0,WordWrap:1,WrapAnywhere:2,Wrap:3,WrapAtWordBoundaryOrAnywhere:3,ElideNone:0,ElideLeft:1,ElideRight:2,ElideMiddle:3,ProportionalHeight:0,FixedHeight:1};const Font={MixedCase:0,AllUppercase:1,AllLowercase:2,SmallCaps:3,Capitalize:4};const Accessible={Button:43,CheckBox:44};const Shape={CurveRenderer:1};const ShapePath={SquareCap:16,FlatCap:0,RoundCap:32,MiterJoin:0,BevelJoin:64,RoundJoin:128,DashLine:2,WindingFill:1,OddEvenFill:0};const Easing={Linear:0,InQuad:1,OutQuad:2,InOutQuad:3,InCubic:5,OutCubic:6,InOutCubic:7,OutQuart:10,OutQuint:14,OutSine:18,OutExpo:22,OutBack:34};const Animation={Infinite:-1};const Component={Null:0,Ready:1,Loading:2,Error:3};const Loader=Component;const TapHandler={ReleaseWithinBounds:1};const Qt=r.Qt,Quickshell=r.Quickshell,Hyprland=r.Hyprland,FileViewError={FileNotFound:"ENOENT"};';
     const ref = (record) =>
       record.external ?? `${generatedPrefix}n${record.index}`;
     function context(
@@ -538,7 +544,7 @@ export function createQmlDocument(
               'alias',
               'double',
               'url',
-              'point',
+              'point','vector2d','vector3d','vector4d',
               'size',
               'rect',
             ].includes(p.propertyType) &&
@@ -554,7 +560,7 @@ export function createQmlDocument(
         } else if (
           !record.names.has(p.key) &&
           !groups.has(p.key) &&
-          !/^(?:Keys\.|Accessible\.|Drag\.|ListView\.|GridView\.)?on[A-Z_]/.test(
+          !/^(?:Keys\.|Accessible\.|Drag\.|Window\.|ListView\.|GridView\.)?on[A-Z_]/.test(
             p.key,
           ) &&
           !['Component.onCompleted', 'Component.onDestruction'].includes(p.key)
@@ -567,7 +573,7 @@ export function createQmlDocument(
         // Each component layer connects its own signal handler. Overriding a
         // property binding must not discard the base component's connections.
         if (previous && !p.method && !p.signal &&
-            (/^(?:Keys\.|Accessible\.|Drag\.|ListView\.|GridView\.)?on[A-Z_]/.test(p.key) ||
+            (/^(?:Keys\.|Accessible\.|Drag\.|Window\.|ListView\.|GridView\.)?on[A-Z_]/.test(p.key) ||
              ['Component.onCompleted', 'Component.onDestruction'].includes(p.key)))
           (record.inheritedHandlers ??= []).push(previous);
         if (previous?.p.readonly && !p.custom)
@@ -622,7 +628,7 @@ export function createQmlDocument(
     function buildPropertyObject(p, record, ctx, chain) {
       const slot = aliasSlot(record, p.key);
       const child = build(
-        p.key === 'sourceComponent' && p.object.type !== 'Component'
+        ['sourceComponent','cursorDelegate'].includes(p.key) && p.object.type !== 'Component'
           ? { type: 'Component', properties: [], children: [p.object] }
           : p.object,
         slot ?? record,
@@ -664,7 +670,7 @@ export function createQmlDocument(
           if (
             p.object &&
             !(
-              ['Repeater', 'ListView', 'GridView'].includes(record.type) &&
+              ['Instantiator', 'Repeater', 'ListView', 'GridView'].includes(record.type) &&
               p.key === 'delegate'
             )
           )
@@ -676,7 +682,7 @@ export function createQmlDocument(
       const type = resolution?.builtin ?? object.type;
       if (!types.has(type)) throw Error(`Unsupported QML type: ${object.type}`);
       if (records.length >= 2000) throw Error('QML expanded object limit');
-      const svgTag = { ShapePath: 'g', PathSvg: 'path', PathRectangle: 'rect' }[
+      const svgTag = { ShapePath: 'g', PathMultiline: 'path', PathSvg: 'path', PathRectangle: 'rect' }[
         type
       ];
       const element = svgTag
@@ -727,12 +733,12 @@ export function createQmlDocument(
       if (type === 'Button') element.setAttribute('type', 'button');
       (parent?.element ?? document.body).appendChild(element);
       addProperties(record, object, ctx);
-      if (['Repeater', 'ListView', 'GridView', 'Component'].includes(type)) {
+      if (['Instantiator', 'Repeater', 'ListView', 'GridView', 'Component'].includes(type)) {
         const delegate =
           type === 'Component'
             ? object.children[0]
             : (record.properties.get('delegate')?.p.object ??
-              (type === 'Repeater' ? object.children[0] : null));
+              (['Repeater', 'Instantiator'].includes(type) ? object.children[0] : null));
         if (!delegate) throw Error(type + ' requires an object delegate');
         if (type === 'Component' && object.children.length !== 1)
           throw Error('Component requires exactly one root');
@@ -745,9 +751,11 @@ export function createQmlDocument(
           kind:
             type === 'Component'
               ? 'component'
-              : type === 'Repeater'
-                ? 'repeater'
-                : 'view',
+              : type === 'Instantiator'
+                ? 'instantiator'
+                : type === 'Repeater'
+                  ? 'repeater'
+                  : 'view',
         };
         template = group;
         const delegateContext = {
@@ -761,7 +769,7 @@ export function createQmlDocument(
           if (p.key === 'id') delegateContext.ids.delete(p.code);
         group.root = build(
           delegate,
-          ['ListView', 'GridView'].includes(type) ? record : parent,
+          ['Instantiator', 'ListView', 'GridView'].includes(type) ? record : parent,
           delegateContext,
           chain,
         );
@@ -775,7 +783,7 @@ export function createQmlDocument(
         if (
           p.object &&
           !(
-            ['Repeater', 'ListView', 'GridView'].includes(record.type) &&
+            ['Instantiator', 'Repeater', 'ListView', 'GridView'].includes(record.type) &&
             p.key === 'delegate'
           )
         )
@@ -783,7 +791,7 @@ export function createQmlDocument(
       if (
         type !== 'Component' &&
         !(
-          type === 'Repeater' &&
+          ['Repeater', 'Instantiator'].includes(type) &&
           !object.properties.some((p) => p.key === 'delegate')
         )
       )
@@ -804,8 +812,7 @@ export function createQmlDocument(
             record.template.root === record
           ) &&
           !(
-            record.template?.root === record &&
-            ['index', 'modelData'].includes(p.key)
+            record.template?.root === record && record.template.kind !== 'component'
           )
         )
           throw Error(`Missing required QML property: ${p.key}`);
@@ -813,7 +820,7 @@ export function createQmlDocument(
     // Do not parse a second copy of the entire runtime for every lazy pane.
     const runtimeSource = component
       ? 'globalThis.__qmlRuntime'
-      : `globalThis.__qmlRuntime??=(${createQmlRuntime.toString()})((${createReactive.toString()})(),(${createQt.toString()})(),(${createQmlModels.toString()}),(${createQmlText.toString()}),(${createQmlShapes.toString()}),(${createQmlImages.toString()}),(${createQmlTextures.toString()}),(${createQmlMedia.toString()}))`;
+      : `globalThis.__qmlRuntime??=(${createQmlRuntime.toString()})((${createReactive.toString()})(),(${createQt.toString()})(),(${createQmlModels.toString()}),(${createQmlText.toString()}),(${createQmlShapes.toString()}),(${createQmlImages.toString()}),(${createQmlTextures.toString()}),(${createQmlMedia.toString()}),(${createQmlCanvas.toString()}),(${createQmlShortcuts.toString()}),(${createQmlShaderEffects.toString()}))`;
     const code = [
       `(()=>{const r=${runtimeSource};if(!r)throw Error('QML component requires an initialized page');const ${runtimeRef}=r;`,
       constants,
@@ -887,6 +894,8 @@ export function createQmlDocument(
         if (
           group &&
           ![
+            'Canvas',
+            'ShaderEffect',
             'ShaderEffectSource',
             'LinearGradient',
             'XmlListModel',
@@ -894,7 +903,7 @@ export function createQmlDocument(
             'WorkerScript',
             'LoggingCategory',
             'Flow',
-            'RowLayout',
+            'GridLayout', 'RowLayout',
             'ColumnLayout',
             'ListView',
             'GridView',
@@ -905,7 +914,7 @@ export function createQmlDocument(
             'Binding',
             'Gradient',
             'GradientStop',
-            'PathRectangle',
+            'PathMultiline', 'PathRectangle',
             'IpcHandler',
             'DropArea',
             'DragHandler',
@@ -924,6 +933,7 @@ export function createQmlDocument(
             'PropertyAction',
             'Timer',
             'Connections',
+            'Socket',
             'Process',
             'StdioCollector',
             'SplitParser',
@@ -949,7 +959,7 @@ export function createQmlDocument(
             'FocusScope',
             'Loader',
             'Component',
-            'Repeater',
+            'Shortcut', 'Instantiator', 'Repeater',
             'TapHandler',
             'HoverHandler',
           ].includes(record.type)
@@ -988,6 +998,12 @@ export function createQmlDocument(
                   ? '""'
                   : p.propertyType === 'color'
                     ? '"transparent"'
+                    : p.propertyType === 'size' ? '({width:0,height:0})'
+                    : p.propertyType === 'point' ? '({x:0,y:0})'
+                    : p.propertyType === 'rect' ? '({x:0,y:0,width:0,height:0})'
+                    : p.propertyType === 'vector2d' ? '({x:0,y:0})'
+                    : p.propertyType === 'vector3d' ? '({x:0,y:0,z:0})'
+                    : p.propertyType === 'vector4d' ? '({x:0,y:0,z:0,w:0})'
                     : p.propertyType === 'var'
                       ? 'undefined'
                       : 'null';
@@ -1015,6 +1031,12 @@ export function createQmlDocument(
         code.push(
           `${ref(group.root)}.index=index;${ref(group.root)}.modelData=modelData;r.attachDelegate(${ref(group.root)},index,${ref(group.owner)});`,
         );
+      if(group && group.kind!=='component'){
+        for(const {p} of group.root.properties.values())if(p.required&&!['index','modelData'].includes(p.key)){
+          code.push(`if(modelData==null||!Object.hasOwn(Object(modelData),${JSON.stringify(p.key)}))throw Error('Missing model role: '+${JSON.stringify(p.key)});`);
+          code.push(`r.bind(${ref(group.root)},${JSON.stringify(p.key)},()=>modelData[${JSON.stringify(p.key)}],false,${JSON.stringify(p.propertyType)});`);
+        }
+      }
       for (const record of members)
         if (record.delegate) {
           code.push(
@@ -1036,7 +1058,7 @@ export function createQmlDocument(
             const expr = expression(p, scope);
             if (
               record.type === 'Connections' &&
-              /^(?:Keys\.|Accessible\.|Drag\.|ListView\.|GridView\.)?on[A-Z_]/.test(
+              /^(?:Keys\.|Accessible\.|Drag\.|Window\.|ListView\.|GridView\.)?on[A-Z_]/.test(
                 p.key,
               )
             )
@@ -1112,7 +1134,7 @@ export function createQmlDocument(
             continue;
           }
           if (
-            /^(?:Keys\.|Accessible\.|Drag\.|ListView\.|GridView\.)?on[A-Z_]/.test(
+            /^(?:Keys\.|Accessible\.|Drag\.|Window\.|ListView\.|GridView\.)?on[A-Z_]/.test(
               p.key,
             ) &&
             p.key !== 'onClicked'
@@ -1143,7 +1165,8 @@ export function createQmlDocument(
             `${override ? `if(!Object.hasOwn(properties,${JSON.stringify(p.key)})) ` : ''}r.bind(${target},${JSON.stringify(key)},()=>(${value}),${!!p.readonly},${JSON.stringify(p.propertyType)});`,
           );
         }
-        if (record.nonvisual) code.push(`${n}.visible=false;`);
+        // Nonvisual DOM nodes are already hidden. Their QML visible property
+        // may be an application-defined readonly value; never overwrite it.
       }
       if ((component && !group) || group?.kind === 'component') {
         const root = group?.root ?? entryContext.root;

package/lib/qml/fonts.js

@@ -0,0 +1,69 @@
+import {readdir, realpath, stat} from 'node:fs/promises';
+import {join, resolve} from 'node:path';
+import {registerTypeface} from '../renderer/font-loading.js';
+
+// Capture before a host-mode document can replace globals/environment.
+const directory = process.env.QT_QPA_FONTDIR || '';
+const cache = new WeakMap();
+const MAX_FILE = 32 * 1024 * 1024;
+const MAX_TOTAL = 128 * 1024 * 1024;
+
+// QT_QPA_FONTDIR is one directory, not a PATH-style list. Recursion is our
+// extension; canonical paths prevent directory symlink cycles and duplicates.
+export async function qmlFontFiles(root, warn = () => {}) {
+  const files = [], seen = new Set();
+  async function walk(path, depth = 0) {
+    if (depth > 16 || seen.size >= 4096) return;
+    try {
+      path = await realpath(path);
+      if (seen.has(path)) return;
+      seen.add(path);
+      const info = await stat(path);
+      if (info.isDirectory()) {
+        for (const name of (await readdir(path)).sort()) await walk(join(path, name), depth + 1);
+      } else if (info.isFile() && /\.(ttf|otf)$/i.test(path)) files.push({path, size:info.size});
+    } catch (error) { warn(`QML font: ${path}: ${error.message}`); }
+  }
+  if (root) await walk(resolve(root));
+  return files.sort((a,b)=>Number(!/regular/i.test(a.path))-Number(!/regular/i.test(b.path)) || a.path.localeCompare(b.path));
+}
+
+// One private collection per graphics instance, shared by its local QML pages.
+// The ordinary HTML collection and font aliases are never mutated.
+export function loadQmlFonts(base, warn = () => {}, root = directory) {
+  if (!root) return Promise.resolve(base);
+  let roots = cache.get(base);
+  if (!roots) cache.set(base, roots = new Map());
+  const key = resolve(root);
+  if (!roots.has(key)) roots.set(key, build(base, key, warn));
+  return roots.get(key);
+}
+async function build(base, root, warn) {
+  const {CanvasKit} = base;
+  const extra = [];
+  let total = 0;
+  for (const file of await qmlFontFiles(root, warn)) {
+    if (file.size > MAX_FILE || total + file.size > MAX_TOTAL || extra.length >= 128) {
+      warn(`QML font: skipped ${file.path}: font loading limit`);continue;
+    }
+    try {
+      const bytes = await Bun.file(file.path).bytes();
+      if (bytes.length > MAX_FILE || total + bytes.length > MAX_TOTAL) continue;
+      const typeface = CanvasKit.Typeface.MakeTypefaceFromData(bytes);
+      if (!typeface) throw Error('unsupported or invalid font');
+      total += bytes.length;
+      extra.push({family:`Buninu QML Fallback ${extra.length}`, name:typeface.getFamilyName(), typeface});
+    } catch(error) {warn(`QML font: ${file.path}: ${error.message}`);}
+  }
+  if (!extra.length) return base;
+  const provider = CanvasKit.TypefaceFontProvider.Make();
+  const builtinTypefaces = [...base.builtinTypefaces, ...extra];
+  for (const face of builtinTypefaces) registerTypeface(CanvasKit, provider, face.typeface, face.family);
+  const fontCollection = CanvasKit.FontCollection.Make();
+  fontCollection.setDefaultFontManager(provider);
+  fontCollection.enableFontFallback();
+  const loadedFamilies = new Map(base.loadedFamilies);
+  for (const face of extra) if (!loadedFamilies.has(face.name.toLowerCase())) loadedFamilies.set(face.name.toLowerCase(), face.family);
+  return {...base, fontCollection, loadedFamilies, builtinTypefaces,
+    fontFamilies:[...base.fontFamilies, ...extra.map(face=>face.family)]};
+}

package/lib/qml/host.js

@@ -1,4 +1,5 @@
 import {readClipboard, writeClipboard} from '../clipboard.js';
+import { createConnection } from 'node:net';
 import { Worker } from 'node:worker_threads';
 import { loadQmlGraphSync } from './loader.js';
 import { createQmlDocument } from './document.js';
@@ -233,6 +234,28 @@ export function createQmlHost(url) {
       resources.add(stop);
       return stop;
     },
+    socket(name, handlers) {
+      check();
+      const socket = createConnection({path: path(name)});
+      let stopped = false;
+      socket.setEncoding('utf8');
+      socket.on('connect', () => { if (!stopped) handlers.open(); });
+      socket.on('data', chunk => { if (!stopped) handlers.data(chunk); });
+      socket.on('error', error => { if (!stopped) handlers.error(error.code || String(error)); });
+      socket.on('close', () => {
+        resources.delete(stop);
+        if (!stopped) { stopped = true; handlers.close(); }
+      });
+      const stop = () => {
+        stopped = true;
+        resources.delete(stop);
+        socket.destroy();
+      };
+      stop.write = text => { if (!stopped && !socket.connecting) socket.write(String(text)); };
+      stop.flush = () => {}; // node:net queues writes immediately, including backpressure.
+      resources.add(stop);
+      return stop;
+    },
     run(command, callback, options = {}) {
       check();
       if (!Array.isArray(command) || !command.length)
@@ -311,6 +334,11 @@ export function createQmlHost(url) {
         });
       return stop;
     },
+    trackResource(dispose) {
+      check();let stopped=false;
+      const stop=()=>{if(stopped)return;stopped=true;resources.delete(stop);dispose();};
+      resources.add(stop);return stop;
+    },
     dispose() {
       if (closed) return;
       closed = true;

package/lib/qml/loader.js

@@ -4,6 +4,8 @@ import { parseQml } from './parser.js';
 import { parse } from '../../vendor/acorn/dist/acorn.mjs';
 export const builtinTypes = new Set([
   'MediaPlayer', 'AudioOutput', 'VideoOutput', 'IdleInhibitor',
+  'Canvas',
+  'ShaderEffect',
   'ShaderEffectSource',
   'LinearGradient',
   'XmlListModel',
@@ -11,7 +13,7 @@ export const builtinTypes = new Set([
   'WorkerScript',
   'LoggingCategory',
   'Flow',
-  'RowLayout',
+  'GridLayout', 'RowLayout',
   'ColumnLayout',
   'ListView',
   'GridView',
@@ -22,7 +24,7 @@ export const builtinTypes = new Set([
   'Binding',
   'Gradient',
   'GradientStop',
-  'PathRectangle',
+  'PathMultiline', 'PathRectangle',
   'IpcHandler',
   'DropArea',
   'DragHandler',
@@ -47,10 +49,11 @@ export const builtinTypes = new Set([
   'Timer',
   'Connections',
   'FileView',
+  'Socket',
   'Process',
   'StdioCollector',
   'SplitParser',
-  'Repeater',
+  'Shortcut', 'Instantiator', 'Repeater',
   'TapHandler',
   'HoverHandler',
   'Row',
@@ -80,6 +83,7 @@ const builtinModules = new Set([
   'QtMultimedia',
   'Quickshell.Wayland',
   'QtQuick',
+  'QtQuick.Window',
   'QtQuick.Controls',
   'QtQuick.Shapes',
   'QtQuick.Layouts',

package/lib/qml/models.js

@@ -618,5 +618,5 @@ export function createQmlModels(api) {
     });
     effect(layout);
   }
-  return { make, start, attachDelegate };
+  return { make, start, attachDelegate, rows:model=>{const data=lists.get(model)||xmlModels.get(model);if(!data)return null;data.version;return data.rows;} };
 }

package/lib/qml/reactive.js

@@ -4,17 +4,38 @@ export function createReactive() {
   let active = null,
     pending = new Set(),
     scheduled = false;
+  let invalidationDepth = 0, drainingSync = false;
+  const synchronous = new Set();
   const track = new WeakMap(),
     raw = new WeakMap();
   const mark = (job) => {
     if (job.stopped || job.dirty || job.running) return;
     job.dirty = true;
     pending.add(job);
+    if (job.sync) synchronous.add(job);
     job.invalidate?.();
   };
   const invalidate = (target, key) => {
-    for (const job of track.get(raw.get(target) ?? target)?.get(key) ?? [])
-      mark(job);
+    invalidationDepth++;
+    try {
+      for (const job of track.get(raw.get(target) ?? target)?.get(key) ?? []) mark(job);
+    } finally {
+      invalidationDepth--;
+    }
+    // Invalidate the whole dependency chain before synchronous observers read
+    // it. Their handlers may write more properties; drain without recursive
+    // Set iteration, while ordinary rendering effects remain batched.
+    if (invalidationDepth || drainingSync) return;
+    drainingSync = true;
+    try {
+      let passes = 0;
+      while (synchronous.size) {
+        if (++passes > 100) throw new Error('QML binding cycle');
+        const jobs = [...synchronous];
+        synchronous.clear();
+        for (const job of jobs) { pending.delete(job); run(job); }
+      }
+    } finally { drainingSync = false; }
   };
   const clean = (job) => {
     for (const set of job.deps) set.delete(job);
@@ -105,9 +126,10 @@ export function createReactive() {
     raw.set(proxy, initial);
     return proxy;
   };
-  const effect = (fn) => {
+  const effect = (fn, { sync = false } = {}) => {
     const job = {
       fn,
+      sync,
       deps: new Set(),
       stopped: false,
       dirty: true,
@@ -125,6 +147,7 @@ export function createReactive() {
       job.stopped = true;
       clean(job);
       pending.delete(job);
+      synchronous.delete(job);
     };
     stop.run = () => run(job);
     Object.defineProperty(stop, 'onInvalidate', {