buninu-browser 0.4.0 → 0.5.0

package/lib/qml/runtime.js

@@ -9,6 +9,9 @@ export function createQmlRuntime(
   createQmlImages,
   createQmlTextures,
   createQmlMedia,
+  createQmlCanvas,
+  createQmlShortcuts,
+  createQmlShaderEffects,
 ) {
   const { untrack } = reactive;
   // Qt.binding may also replace an unbound/default property (e.g. Item.visible).
@@ -20,9 +23,10 @@ export function createQmlRuntime(
     untrack(start);
     return true;
   });
+  const socketStates = new WeakMap();
   let disposers = null;
-  const effect = (fn) => {
-    const stop = reactive.effect(fn);
+  const effect = (fn, options) => {
+    const stop = reactive.effect(fn, options);
     disposers?.push(stop);
     return stop;
   };
@@ -82,12 +86,13 @@ export function createQmlRuntime(
     'ShellRoot',
     'Scale',
     'Translate',
-    'Repeater',
+    'Shortcut', 'Instantiator', 'Repeater',
     'TapHandler',
     'HoverHandler',
     'QtObject',
     'Singleton',
     'FileView',
+    'Socket',
     'Process',
     'Timer',
     'Connections',
@@ -190,6 +195,24 @@ export function createQmlRuntime(
       }[edge] ?? 0)
     );
   };
+  // Layout preferred size: explicit hint, then positive implicit size, then
+  // the initial item size. Never feed a layout-assigned stretched size back
+  // into its own preference (Qt also caches this last-resort size hint).
+  const layoutFallbackSizes = new WeakMap();
+  const layoutPreferred = (item, suffix) => {
+    const hint = item.Layout['preferred' + suffix];
+    if (hint >= 0) return hint;
+    const implicit = item['implicit' + suffix];
+    if (implicit > 0) return implicit;
+    let saved = layoutFallbackSizes.get(item);
+    if (!saved) layoutFallbackSizes.set(item, saved = state({}));
+    if (!(suffix in saved)) {
+      const initial = untrack(() => item[suffix === 'Width' ? 'width' : 'height']);
+      saved[suffix] = Math.max(0, Number(initial) || 0);
+    }
+    return saved[suffix] || 0;
+  };
+
   const dimension = (v, key, topLevel = false) => {
     const a = v.anchors,
       start = key === 'width' ? 'left' : 'top',
@@ -202,7 +225,7 @@ export function createQmlRuntime(
         margin(v, start) -
         margin(v, end)
       );
-    if (owners.get(v)?.type === 'FloatingWindow') return viewport[key];
+    if (owners.get(v)?.type === 'FloatingWindow') return Math.max(v.minimumSize?.[key]||0,Math.min(v.maximumSize?.[key]>0?v.maximumSize[key]:Infinity,viewport[key]));
     return (
       v[key === 'width' ? 'implicitWidth' : 'implicitHeight'] ??
       (topLevel ? viewport[key] : 0)
@@ -507,7 +530,9 @@ export function createQmlRuntime(
       disposeScope(stops);
     };
     try {
-      value = factory(parent, properties);
+      // Imperative construction must not subscribe the caller binding to all
+      // properties read while initializing the newly created object.
+      value = untrack(() => factory(parent, properties));
       value.destroy = (delay = 0) =>
         delay > 0 ? setTimeout(destroy, delay) : destroy();
     } catch (error) {
@@ -639,6 +664,10 @@ export function createQmlRuntime(
     // QML signal handlers execute with their declaring object as `this`,
     // including handlers connected later or merged with inherited handlers.
     fn = fn.bind(value);
+    if(name==='Window.onWindowChanged'){
+      initial.push(()=>effect(()=>{const window=value.Window.window;untrack(()=>fn(window));}));
+      return;
+    }
     let map = handlers.get(value);
     if (!map) handlers.set(value, (map = new Map()));
     const previous = map.get(name);
@@ -651,8 +680,8 @@ export function createQmlRuntime(
   };
   const emit = (value, name, ...args) =>
     untrack(() => handlers.get(value)?.get(name)?.(...args));
+  const pendingPropertyHandlers = new Map();
   const start = () => {
-    const propertyHandlers = [];
     if (!nodes.some((node) => started.has(node.value)))
       host?.hyprEvents((event) => Hyprland.rawEvent(event));
     let pending = initial.splice(0),
@@ -702,7 +731,7 @@ export function createQmlRuntime(
         // Initial bindings can change a parent property before child built-in
         // methods exist. Install change observers after this component's nodes
         // have started, while retaining the pre-binding value for notification.
-        propertyHandlers.push(() => {
+        pendingPropertyHandlers.set(v, () => {
           const previous = disposers;
           disposers = node.scope;
           try {
@@ -765,6 +794,17 @@ export function createQmlRuntime(
                 (event.ctrlKey ? Qt.ControlModifier : 0) |
                 (event.altKey ? Qt.AltModifier : 0) |
                 (event.metaKey ? Qt.MetaModifier : 0),
+              matches:standard=>{
+                const key=String(event.key).toLowerCase();
+                if(event.altKey)return false;
+                const command=event.ctrlKey||event.metaKey;
+                return standard===10 ? (command&&!event.shiftKey&&key==='v')||(event.shiftKey&&!command&&key==='insert')
+                  : standard===9 ? command&&!event.shiftKey&&key==='c'
+                  : standard===8 ? command&&!event.shiftKey&&key==='x'
+                  : standard===26 ? command&&!event.shiftKey&&key==='a'
+                  : standard===11 ? command&&!event.shiftKey&&key==='z'
+                  : standard===12 ? command&&(key==='y'||event.shiftKey&&key==='z') : false;
+              },
               isAutoRepeat: !!event.repeat,
               accepted: !!callbacks?.has(specific),
             };
@@ -877,7 +917,7 @@ export function createQmlRuntime(
               finally { areaTarget.style.pointerEvents = old; }
             }
           });
-          for (const type of ['mouseup', 'click', 'dblclick'])
+          for (const type of ['mouseup', 'click', 'auxclick', 'dblclick'])
             listen(areaTarget, type, event => { if (passTarget) forward(event, passTarget); });
           listen(document, 'mousemove', (event) => {
             if (v.pressed || v.hoverEnabled)
@@ -888,7 +928,7 @@ export function createQmlRuntime(
             v.pressed = false;
             emit(v, 'onReleased', update(event));
           });
-          listen(areaTarget, 'click', (event) => {
+          for (const type of ['click', 'auxclick']) listen(areaTarget, type, (event) => {
             if (!passTarget && enabled(v) && v.acceptedButtons & button(event))
               emit(v, 'onClicked', update(event));
           });
@@ -1185,16 +1225,21 @@ export function createQmlRuntime(
             }
           });
         }
-        if (type === 'Repeater') {
+        if (type === 'Repeater' || type === 'Instantiator') {
           let instances = [];
           const clear = () => {
-            for (const instance of instances) instance.dispose();
+            for (const [index, instance] of instances.entries()) {
+              if (type === 'Instantiator') emit(v, 'onObjectRemoved', index, instance.value);
+              instance.dispose();
+            }
             instances = [];
           };
           disposers?.push(clear);
-          v.itemAt = (index) => instances[index]?.value ?? null;
+          if (type === 'Instantiator') v.objectAt = index => instances[index]?.value ?? null;
+          else v.itemAt = (index) => instances[index]?.value ?? null;
           effect(() => {
-            const model = v.model ?? [];
+            if (type === 'Instantiator' && v.asynchronous) throw Error('Instantiator asynchronous creation is not implemented');
+            const model = type === 'Instantiator' && !v.active ? [] : (v.model ?? []);
             if (
               typeof model === 'number' &&
               (!Number.isFinite(model) || model < 0 || model > 1000)
@@ -1206,7 +1251,7 @@ export function createQmlRuntime(
                     { length: Math.max(0, Math.floor(model)) },
                     (_, i) => i,
                   )
-                : model;
+                : models.rows(model) ?? model;
             if (!Array.isArray(data) || data.length > 1000)
               throw Error('Repeater supports arrays or counts up to 1000');
             untrack(() => {
@@ -1236,6 +1281,10 @@ export function createQmlRuntime(
                 });
               }
               v.count = instances.length;
+              if (type === 'Instantiator') {
+                v.object = instances[0]?.value ?? null;
+                for (const [index, instance] of instances.entries()) emit(v, 'onObjectAdded', index, instance.value);
+              }
             });
           });
         } else if (type === 'Loader') {
@@ -1377,7 +1426,7 @@ export function createQmlRuntime(
               v.pressed = false;
             }
           });
-          listen(target, 'click', (event) => {
+          for (const type of ['click', 'auxclick']) listen(target, type, (event) => {
             if (
               !v.enabled ||
               !enabled(parents.get(v)) ||
@@ -1469,6 +1518,43 @@ export function createQmlRuntime(
                 unwatch = host.watch(path, () => emit(v, 'onFileChanged'));
             }
           });
+        } else if (type === 'Socket') {
+          const status = socketStates.get(v);
+          let connection = null, generation = 0, pending = '';
+          const stop = () => { generation++; connection?.(); connection = null; pending = ''; status.actual = false; };
+          disposers?.push(stop);
+          v.write = text => { if (status.actual) connection?.write(text); };
+          v.flush = () => connection?.flush();
+          effect(() => {
+            const wanted = status.wanted, path = v.path;
+            if (!wanted) { untrack(stop); return; }
+            if (!path || connection) return;
+            untrack(() => {
+              const current = ++generation;
+              connection = host.socket(path, {
+                open() { if (current === generation) status.actual = true; },
+                data(chunk) {
+                  if (current !== generation) return;
+                  pending += chunk;
+                  const parser = v.parser;
+                  if (!parser) { pending = ''; return; }
+                  const marker = String(parser.splitMarker ?? '\n');
+                  if (!marker) { const text = pending; pending = ''; emit(parser, 'onRead', text); return; }
+                  let at;
+                  while ((at = pending.indexOf(marker)) >= 0) {
+                    const text = pending.slice(0, at); pending = pending.slice(at + marker.length);
+                    emit(parser, 'onRead', text);
+                    if (current !== generation) return;
+                  }
+                },
+                error(error) { if (current === generation) emit(v, 'onError', error); },
+                close() {
+                  if (current !== generation) return;
+                  connection = null; pending = ''; status.actual = false; status.wanted = false;
+                },
+              });
+            });
+          });
         } else if (type === 'Process') {
           let child = null,
             generation = 0;
@@ -1646,7 +1732,10 @@ export function createQmlRuntime(
         disposers = previousScope;
       }
     }
-    for (const install of propertyHandlers) install();
+    for (const [value, install] of [...pendingPropertyHandlers]) {
+      pendingPropertyHandlers.delete(value);
+      if (!destroyedNodes.has(value)) install();
+    }
     reactive.flush();
   };
   const cssColor = (v) =>
@@ -1682,6 +1771,8 @@ export function createQmlRuntime(
       ].includes(type)
         ? 'black'
         : 'transparent',
+      smooth:true,
+      antialiasing:true, // Existing CSS/CanvasKit geometry is antialiased.
       radius: 0,
       opacity: 1,
       visible: true,
@@ -1862,10 +1953,13 @@ export function createQmlRuntime(
         b = elements.get(item)?.getBoundingClientRect() ?? { x: 0, y: 0 };
       return { x: b.x - a.x + x, y: b.y - a.y + y };
     };
-    let windowValue = type === 'FloatingWindow' ? value : parent;
-    while (windowValue && owners.get(windowValue)?.type !== 'FloatingWindow')
-      windowValue = parents.get(windowValue);
-    value.Window = { window: windowValue ?? null };
+    value.Window=state({window:null});
+    effect(()=>{
+      structure.version;
+      let windowValue=type==='FloatingWindow'?value:parents.get(value);
+      while(windowValue&&owners.get(windowValue)?.type!=='FloatingWindow')windowValue=parents.get(windowValue);
+      value.Window.window=windowValue??null;
+    });
     let viewValue = parent;
     while (
       viewValue &&
@@ -1879,36 +1973,54 @@ export function createQmlRuntime(
       view: owners.get(viewValue)?.type === 'GridView' ? viewValue : null,
     };
     if (type === 'FloatingWindow') {
+      value.minimumSize=state({width:0,height:0});value.maximumSize=state({width:0,height:0});
+      value.sceneGraphInvalidated=signal();
+      disposers?.push(()=>value.sceneGraphInvalidated());
+      effect(()=>{element.setAttribute('data-qml-window-min',JSON.stringify([value.minimumSize.width,value.minimumSize.height]));element.setAttribute('data-qml-window-max',JSON.stringify([value.maximumSize.width,value.maximumSize.height]));});
       value.sceneGraphError = signal();
       value.afterAnimating = signal();
       value.afterSynchronizing = signal();
       value.frameSwapped = signal();
       value.activeFocusItem = null;
       let frame,
-        hadFrame = false;
+        hadFrame = false,
+        updateRequested = false,
+        disposed = false;
+      const schedule = () => {
+        if (!disposed && frame === undefined) frame = requestAnimationFrame(tick);
+      };
+      value.update = () => {
+        if (disposed) return;
+        updateRequested = true;
+        schedule();
+      };
       const tick = () => {
         frame = undefined;
+        if (disposed) return;
         if (
+          !updateRequested &&
           !value.afterAnimating.listenerCount &&
           !value.afterSynchronizing.listenerCount &&
           !value.frameSwapped.listenerCount
         )
           return;
+        updateRequested = false;
         if (hadFrame) value.frameSwapped();
         value.afterAnimating();
         textures.flush();
         value.afterSynchronizing();
         hadFrame = true;
-        frame = requestAnimationFrame(tick);
+        schedule();
       };
       for (const event of [value.afterAnimating, value.afterSynchronizing, value.frameSwapped]) {
         const connect = event.connect;
         event.connect = (fn) => {
           connect(fn);
-          if (frame === undefined) frame = requestAnimationFrame(tick);
+          schedule();
         };
       }
       disposers?.push(() => {
+        disposed = true;
         if (frame !== undefined) cancelAnimationFrame(frame);
       });
 
@@ -2180,10 +2292,13 @@ export function createQmlRuntime(
         rowSpacing: null,
         columnSpacing: null,
       });
+    if (type === 'PathMultiline') value.paths = [];
+    if (type === 'GridLayout') Object.assign(value, {columns:0,rows:0,columnSpacing:5,rowSpacing:5});
     if (type === 'PathSvg') value.path = '';
     if (type === 'LinearGradient')
       Object.assign(value, { x1: 0, y1: 0, x2: 0, y2: 0 });
 
+    if (type === 'Instantiator') Object.assign(value, {model:1,count:0,active:true,asynchronous:false,object:null,objectAt:()=>null});
     if (type === 'Repeater')
       Object.assign(value, { model: [], count: 0, itemAt: () => null });
     if (type === 'MouseArea')
@@ -2274,6 +2389,12 @@ export function createQmlRuntime(
     }
     if (type === 'StdioCollector') Object.assign(value, { text: '', data: new ArrayBuffer(0) });
     if (type === 'SplitParser') Object.assign(value, { splitMarker: '\n' });
+    if (type === 'Socket') {
+      const status = state({ wanted: false, actual: false });
+      socketStates.set(value, status);
+      Object.assign(value, { path: '', parser: null, error: signal() });
+      alias(value, 'connected', () => status.actual, connected => { status.wanted = !!connected; }, false);
+    }
     if (type === 'Process')
       Object.assign(value, {
         running: false,
@@ -2369,9 +2490,31 @@ export function createQmlRuntime(
     }
     media.defaults(value,type);
     textures.make(value, type, element);
+    canvases.make(value, type, element);
+    shaders.make(value,type,element);
+    shortcuts.make(value, type);
     shapes.make(value, type, element, parent);
     models.make(value, type, element, parent);
     if (nonvisual.has(type)) return value;
+    const grabFrames=new Set();
+    disposers?.push(()=>{for(const frame of grabFrames)cancelAnimationFrame(frame);grabFrames.clear();});
+    value.grabToImage=(callback,size)=>{
+      if(!host||typeof callback!=='function'||!element.isConnected)return false;
+      const w=Math.ceil(size?.width??value.width),h=Math.ceil(size?.height??value.height);
+      if(!(w>0&&h>0)||w>8192||h>8192||w*h>16777216)return false;
+      const frame=requestAnimationFrame(()=>{
+        grabFrames.delete(frame);
+        if(!element.isConnected)return;
+        const canvas=document.createElement('canvas');canvas.width=w;canvas.height=h;
+        try{
+          textures.flush();
+          canvas.getContext('2d').drawImage(element,0,0,w,h);
+          callback({url:canvas.toDataURL('image/png')});
+        }finally{canvas.width=canvas.height=1;}
+      });
+      grabFrames.add(frame);
+      return true;
+    };
     focusElements.set(element, value);
     listen(element, 'focus', () => activateFocus(value));
     listen(element, 'blur', (event) =>
@@ -2487,6 +2630,35 @@ export function createQmlRuntime(
         value.implicitWidth = w + value.leftPadding + value.rightPadding;
         value.implicitHeight = h + value.topPadding + value.bottomPadding;
       });
+    if (type === 'GridLayout')
+      effect(() => {
+        const items=childrenOf(value).filter(c=>c.visible!==false);
+        const cols=Math.max(1, value.columns || (value.rows ? Math.ceil(items.length/value.rows) : items.length));
+        const rows=Math.ceil(items.length/cols), widths=Array(cols).fill(0), heights=Array(rows).fill(0);
+        const preferred=(c,axis)=>Math.max(c.Layout['minimum'+axis],Math.min(c.Layout['maximum'+axis],layoutPreferred(c,axis)));
+        items.forEach((c,i)=>{widths[i%cols]=Math.max(widths[i%cols],preferred(c,'Width'));heights[Math.floor(i/cols)]=Math.max(heights[Math.floor(i/cols)],preferred(c,'Height'));});
+        value.implicitWidth=widths.reduce((a,b)=>a+b,0)+Math.max(0,cols-1)*value.columnSpacing;
+        value.implicitHeight=heights.reduce((a,b)=>a+b,0)+Math.max(0,rows-1)*value.rowSpacing;
+        for(const [sizes,axis,available,gap] of [[widths,'Width',value.width,value.columnSpacing],[heights,'Height',value.height,value.rowSpacing]]){
+          const tracks=new Set(items.flatMap((c,i)=>c.Layout['fill'+axis]?[axis==='Width'?i%cols:Math.floor(i/cols)]:[]));
+          let extra=available-sizes.reduce((a,b)=>a+b,0)-Math.max(0,sizes.length-1)*gap;
+          const minimum=sizes.map((_,index)=>Math.max(0,...items.filter((c,i)=>(axis==='Width'?i%cols:Math.floor(i/cols))===index).map(c=>c.Layout['minimum'+axis])));
+          for(let pass=0;pass<sizes.length && Math.abs(extra)>0.01;pass++){
+            const adjustable=[...tracks].filter(index=>extra>0||sizes[index]>minimum[index]);
+            if(!adjustable.length)break;
+            const share=extra/adjustable.length;let used=0;
+            for(const index of adjustable){const next=Math.max(minimum[index],sizes[index]+share);used+=next-sizes[index];sizes[index]=next;}
+            extra-=used;
+          }
+        }
+        items.forEach((c,i)=>{
+          const col=i%cols,row=Math.floor(i/cols),l=c.Layout;
+          c.width=l.fillWidth?Math.max(l.minimumWidth,Math.min(l.maximumWidth,widths[col])):preferred(c,'Width');
+          c.height=l.fillHeight?Math.max(l.minimumHeight,Math.min(l.maximumHeight,heights[row])):preferred(c,'Height');
+          c.x=widths.slice(0,col).reduce((a,b)=>a+b+value.columnSpacing,0)+(l.alignment&2?widths[col]-c.width:l.alignment&4?(widths[col]-c.width)/2:0);
+          c.y=heights.slice(0,row).reduce((a,b)=>a+b+value.rowSpacing,0)+(l.alignment&64?heights[row]-c.height:l.alignment&128?(heights[row]-c.height)/2:0);
+        });
+      });
     if (type === 'RowLayout' || type === 'ColumnLayout')
       effect(() => {
         const horizontal = type === 'RowLayout',
@@ -2500,10 +2672,7 @@ export function createQmlRuntime(
           gap = value.spacing;
         const boxes = children.map((c) => {
           const l = c.Layout;
-          const preferred =
-            l['preferred' + suffix] >= 0
-              ? l['preferred' + suffix]
-              : c['implicit' + suffix];
+          const preferred = layoutPreferred(c, suffix);
           return {
             c,
             l,
@@ -2544,10 +2713,7 @@ export function createQmlRuntime(
         );
         for (const b of boxes) {
           const { c, l } = b;
-          const preferredCross =
-            l['preferred' + opposite] >= 0
-              ? l['preferred' + opposite]
-              : c['implicit' + opposite];
+          const preferredCross = layoutPreferred(c, opposite);
           const size = Math.max(
             l['minimum' + opposite],
             Math.min(
@@ -2568,7 +2734,10 @@ export function createQmlRuntime(
                 : alignment & (horizontal ? 128 : 4)
                   ? (value[cross] - size) / 2
                   : 0;
-          maxCross = Math.max(maxCross, size + c[other]);
+          // Intrinsic size must not depend on the space allocated by a parent
+          // layout: that feeds stretched sizes back into sibling allocation.
+          const intrinsic = Math.max(l['minimum' + opposite], Math.min(l['maximum' + opposite], preferredCross));
+          maxCross = Math.max(maxCross, intrinsic + (horizontal && alignment & 256 ? baseline - c.baselineOffset : 0));
         }
         value['implicit' + suffix] = preferred;
         value['implicit' + opposite] = maxCross;
@@ -2636,13 +2805,19 @@ export function createQmlRuntime(
             value.lineHeightMode === 1
               ? value.lineHeight
               : line * value.lineHeight;
+        // A custom Control contentItem supplies its natural size. Its actual
+        // width is assigned by the control, so reading width here would create
+        // a layout cycle and collapse adjacent RowLayout items onto its text.
+        const custom = type === 'Button' && value.contentItem;
+        const padding = Math.max(0, Number(value.padding) || 0);
         if (!explicit.includes('implicitWidth'))
-          value.implicitWidth =
-            natural + (control ? 22 : value.leftPadding + value.rightPadding);
+          value.implicitWidth = custom
+            ? Math.max(value.background?.implicitWidth || 0, (custom.implicitWidth || 0) + padding * 2)
+            : natural + (control ? 22 : value.leftPadding + value.rightPadding);
         if (!explicit.includes('implicitHeight'))
-          value.implicitHeight =
-            count * lineBox +
-            (control ? 18 : value.topPadding + value.bottomPadding);
+          value.implicitHeight = custom
+            ? Math.max(value.background?.implicitHeight || 0, (custom.implicitHeight || 0) + padding * 2)
+            : count * lineBox + (control ? 18 : value.topPadding + value.bottomPadding);
         value.baselineOffset =
           (metrics.fontBoundingBoxAscent || value.font.pixelSize * 0.8) +
           value.topPadding;
@@ -2669,6 +2844,7 @@ export function createQmlRuntime(
         autoScroll: true,
         persistentSelection: false,
         cursorVisible: true,
+        cursorDelegate:null,
         selectionColor: '#3874f2',
         selectedTextColor: 'white',
       });
@@ -2746,10 +2922,24 @@ export function createQmlRuntime(
         )
           element.selectionStart = element.selectionEnd = value.cursorPosition;
       });
+      let cursorItem=null,cursorFactory=null;
+      effect(()=>{
+        const factory=value.cursorDelegate;
+        if(factory!==cursorFactory)untrack(()=>{
+          cursorItem?.destroy();cursorItem=null;cursorFactory=factory;
+          if(factory)cursorItem=factory.createObject(value);
+        });
+        if(cursorItem){
+          const rect=value.cursorRectangle;
+          cursorItem.x=rect.x+value.leftPadding;cursorItem.y=rect.y+value.topPadding;cursorItem.height=rect.height;
+          cursorItem.visible=value.cursorVisible&&value.activeFocus;
+        }
+      });
+      disposers?.push(()=>cursorItem?.destroy());
       effect(() => {
         // Presentation options only; editing and blinking belong to HTML controls.
         host?.inputPresentation?.(element, {
-          persistent:value.persistentSelection, visible:value.cursorVisible,
+          persistent:value.persistentSelection, visible:value.cursorVisible&&!value.cursorDelegate,
           background:cssColor(value.selectionColor), selectedColor:cssColor(value.selectedTextColor),
           color:cssColor(value.color), height:value.font.pixelSize,
         });
@@ -2771,6 +2961,19 @@ export function createQmlRuntime(
       });
 
     }
+    if(type==='Button'){
+      Object.assign(value,{padding:8,contentItem:null,background:null,focusPolicy:3,hovered:false,pressed:false,down:false});
+      listen(element,'mouseenter',()=>{value.hovered=true;});
+      listen(element,'mouseleave',()=>{value.hovered=false;value.pressed=false;value.down=false;});
+      listen(element,'mousedown',e=>{if(e.button===0&&enabled(value)){value.pressed=true;value.down=true;}if(value.focusPolicy===0)e.preventDefault();});
+      listen(document,'mouseup',()=>{value.pressed=false;value.down=false;});
+      effect(()=>{
+        const pad=Math.max(0,Number(value.padding)||0),content=value.contentItem,bg=value.background;
+        if(content){content.x=pad;content.y=pad;content.width=Math.max(0,value.width-pad*2);content.height=Math.max(0,value.height-pad*2);}
+        if(bg){bg.x=bg.y=0;bg.width=value.width;bg.height=value.height;bg.z=-1;}
+        value.activeFocusOnTab=!!(value.focusPolicy&1);
+      });
+    }
     if (type === 'Button')
       element.addEventListener('keydown', (event) => {
         if (
@@ -2889,7 +3092,7 @@ export function createQmlRuntime(
         }
         if (type === 'TextField' || type === 'Button') {
           element.disabled = !value.enabled;
-          s.padding = '8px 10px';
+          s.padding = type==='Button'?Math.max(0,Number(value.padding)||0)+'px':'8px 10px';
           s.backgroundColor = type === 'Button' ? '#bcebf0' : '#ffffff';
           s.border = '1px solid #6a8791';
           s.borderRadius = '5px';
@@ -2967,6 +3170,7 @@ export function createQmlRuntime(
         }))
           element.setAttribute(key, String(v));
       }
+      if (type === 'PathMultiline') element.setAttribute('d', shapes.multiline(value.paths));
       if (type === 'PathSvg') element.setAttribute('d', value.path);
       if (type === 'PathRectangle')
         for (const [key, v] of Object.entries({
@@ -2993,6 +3197,10 @@ export function createQmlRuntime(
           ')';
       }
 
+      if(type==='Button'){
+        if(value.background){s.backgroundColor='transparent';s.border='none';s.borderRadius='0';s.isolation='isolate';}
+        if(textNode)textNode.style.display=value.contentItem?'none':'contents';
+      }
       const style = element.style;
       // Reuse our input values (CSS getters may normalize colors/shorthands).
       // If another QML helper or script changed inline styles, reconcile them.
@@ -3015,6 +3223,7 @@ export function createQmlRuntime(
   // Bind through a setter supplied by generated code. A separate flag avoids
   // treating a binding's own write as an imperative assignment.
   const bind = (target, key, read, readonly = false, type = null) => {
+    if (socketStates.has(target) && key === 'connected') return bindAlias(target, key, read);
     if (key === 'parent' && owners.has(target)) {
       initial.push(() => {
         const previous = disposers;
@@ -3080,6 +3289,14 @@ export function createQmlRuntime(
       try {
         stop = effect(() => {
           const value = read();
+          // A parent's layout can run before this explicit size binding's
+          // first evaluation. Replace that provisional zero with the declared
+          // size, and invalidate the layout through reactive hint storage.
+          if ((key === 'width' || key === 'height') && descriptions.get(target)?.properties.includes(key)) {
+            let hint = layoutFallbackSizes.get(target);
+            if (!hint) layoutFallbackSizes.set(target, hint = state({}));
+            hint[key === 'width' ? 'Width' : 'Height'] = Math.max(0, Number(value) || 0);
+          }
           writing = true;
           try {
             target[key] = value;
@@ -3165,7 +3382,7 @@ export function createQmlRuntime(
     });
   };
   const create = (type, index, parent, before, persistent = false) => {
-    const svgTag = { ShapePath: 'g', PathSvg: 'path', PathRectangle: 'rect' }[
+    const svgTag = { ShapePath: 'g', PathMultiline: 'path', PathSvg: 'path', PathRectangle: 'rect' }[
       type
     ];
     const element = svgTag
@@ -3223,6 +3440,9 @@ export function createQmlRuntime(
     host,
     cleanup: (fn) => disposers?.push(fn),
   });
+  const shortcuts=createQmlShortcuts({emit,activeWindow:()=>activeWindow,cleanup:fn=>disposers?.push(fn)});
+  const shaders=createQmlShaderEffects({effect,untrack,elements,host,texture:v=>textures.image(v),cleanup:fn=>disposers?.push(fn),resolve:(v,url)=>new URL(String(url),descriptions.get(v)?.url||document.baseURI).href});
+  const canvases=createQmlCanvas({effect,untrack,emit,cssColor,cleanup:fn=>disposers?.push(fn)});
   const media=createQmlMedia({document,elements,effect,untrack,watchWrite,listen,host,emit,
     cleanup:fn=>disposers?.push(fn),resolve:(v,url)=>new URL(String(url),descriptions.get(v)?.url||document.baseURI).href});
   const models = createQmlModels({
@@ -3336,6 +3556,8 @@ export function createQmlRuntime(
           get: () => {
             if (changed) return changed;
             changed = signal();
+            // QML property notify signals are synchronous: connected handlers
+            // can mirror state which the caller reads immediately afterward.
             let previous = untrack(() => value[key]);
             const previousScope = disposers;
             disposers = owners.get(value)?.scope ?? null;
@@ -3346,7 +3568,7 @@ export function createQmlRuntime(
                   previous = next;
                   changed();
                 }
-              });
+              }, { sync: true });
             } finally {
               disposers = previousScope;
             }