buninu-browser 0.2.4 → 0.4.0

package/lib/qml/shapes.js

@@ -0,0 +1,243 @@
+// 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 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 === '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 };
+}

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;
+  };
+}

package/lib/qml/textures.js

@@ -0,0 +1,123 @@
+// Serialized into the QML realm. Snapshot ownership stays in ordinary canvases.
+export function createQmlTextures(api) {
+  const { elements, state, effect, untrack, signal, cleanup } = api;
+  const entries = new WeakMap(), refs = new WeakMap(), pending = new Set();
+  const reference = value => {
+    let ref = refs.get(value);
+    if (!ref) refs.set(value, ref = state({ count: 0, hidden: 0 }));
+    return ref;
+  };
+  function attach(value, delta, hide) {
+    if (!value) return;
+    const ref = reference(value);
+    ref.count += delta;
+    if (hide) ref.hidden += delta;
+    const element = elements.get(value);
+    if (element) {
+      if (ref.count) element.setAttribute('data-qml-texture-source', '');
+      else element.removeAttribute('data-qml-texture-source');
+      if (ref.hidden || (!value.visible && ref.count)) element.setAttribute('data-qml-source-hidden', '');
+      else element.removeAttribute('data-qml-source-hidden');
+    }
+  }
+  function make(v, type, element) {
+    if (type !== 'ShaderEffectSource') return;
+    if (!api.host) throw Error('ShaderEffectSource requires a local QML host renderer');
+    Object.assign(v, { sourceItem: null, sourceRect: { x: 0, y: 0, width: 0, height: 0 },
+      textureSize: { width: 0, height: 0 }, hideSource: false, live: true,
+      scheduledUpdateCompleted: signal() });
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = 1;
+    canvas.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none';
+    canvas.setAttribute('data-qml-texture', '');
+    element.appendChild(canvas);
+    const entry = { canvas, revision: state({ value: 0 }), ready: false };
+    entries.set(v, entry);
+    let source = null, hiding = false, observer, frame, disposed = false, requested = true;
+    const queue = () => {
+      if (!disposed && frame === undefined) { pending.add(capture); frame = requestAnimationFrame(capture); }
+    };
+    const capture = () => {
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      pending.delete(capture);
+      frame = undefined;
+      if (disposed || !source || !requested) return;
+      const input = elements.get(source);
+      if (!input?.isConnected || !(source.width > 0 && source.height > 0)) return;
+      const rect = v.sourceRect;
+      const sw = rect.width > 0 ? rect.width : source.width;
+      const sh = rect.height > 0 ? rect.height : source.height;
+      const w = Math.ceil(v.textureSize.width > 0 ? v.textureSize.width : sw);
+      const h = Math.ceil(v.textureSize.height > 0 ? v.textureSize.height : sh);
+      if (!(w > 0 && h > 0) || w > 8192 || h > 8192 || w * h > 16777216)
+        throw Error('QML texture exceeds snapshot size limit');
+      requested = false;
+      if (canvas.width !== w) canvas.width = w;
+      if (canvas.height !== h) canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, w, h);
+      ctx.drawImage(input, rect.width > 0 ? rect.x : 0, rect.height > 0 ? rect.y : 0, sw, sh, 0, 0, w, h);
+      entry.ready = true;
+      entry.revision.value++;
+      // Only signal once pixels are actually in the destination canvas.
+      v.scheduledUpdateCompleted();
+    };
+    v.scheduleUpdate = () => { requested = true; queue(); };
+    effect(() => {
+      const next = v.sourceItem, hide = v.hideSource;
+      const live = v.live;
+      const size = v.textureSize, rect = v.sourceRect;
+      size.width; size.height; rect.x; rect.y; rect.width; rect.height;
+      if (next) { next.width; next.height; next.visible; }
+      untrack(() => {
+        if (next !== source || hide !== hiding) {
+          observer?.disconnect();
+          attach(source, -1, hiding);
+          source = next; hiding = hide;
+          attach(source, 1, hiding);
+          if (source) {
+            const input = elements.get(source);
+            if (!input) throw Error('ShaderEffectSource.sourceItem must be an Item');
+            observer = new MutationObserver(() => {
+              if (v.live) { requested = true; queue(); }
+            });
+            observer.observe(input, { subtree: true, attributes: true, childList: true, characterData: true });
+          } else {
+            entry.ready = false;
+            canvas.width = canvas.height = 1;
+            entry.revision.value++;
+          }
+        }
+        if (live || !entry.ready || requested) { requested = true; queue(); }
+      });
+    });
+    cleanup(() => {
+      disposed = true;
+      pending.delete(capture);
+      observer?.disconnect();
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      untrack(() => attach(source, -1, hiding));
+      canvas.width = canvas.height = 1;
+      canvas.remove();
+      entries.delete(v);
+    });
+  }
+  function keepLayout(v) {
+    const ref = reference(v);
+    const keep = ref.count > 0;
+    const element = elements.get(v);
+    const hidden = ref.hidden > 0 || (keep && !v.visible);
+    if (element && element.hasAttribute('data-qml-source-hidden') !== hidden) {
+      if (hidden) element.setAttribute('data-qml-source-hidden', '');
+      else element.removeAttribute('data-qml-source-hidden');
+    }
+    return keep;
+  }
+  function image(v) {
+    const entry = entries.get(v);
+    if (!entry) throw Error('ShapePath.fillItem currently requires ShaderEffectSource');
+    entry.revision.value;
+    return entry.ready ? entry.canvas : null;
+  }
+  return { make, keepLayout, image, flush: () => { for (const capture of [...pending]) capture(); } };
+}

package/lib/qml/wayland-clipboard.js

@@ -0,0 +1,32 @@
+// Optional local-QML bridge to the frontend's standard Wayland clipboard.
+// Ordinary HTML never needs this HTTP endpoint. Create it lazily before the
+// first local QML navigation, including navigation after an about:blank launch.
+export async function attachQmlClipboard(client,browser,done) {
+  const clipboard=client.clipboard;
+  if(!clipboard)return;
+  const navigate=browser.context.navigate;
+  let server,setup,closed=false;
+  const prepare=()=>setup??=(async()=>{
+    const token=crypto.randomUUID();
+    server=Bun.serve({hostname:'127.0.0.1',port:0,maxRequestBodySize:1024*1024+1024,
+      async fetch(request) {
+        if(request.method!=='POST'||new URL(request.url).pathname!=='/'+token||request.headers.has('origin'))return new Response(null,{status:403});
+        try {
+          const {operation,text}=await request.json();
+          if(operation==='read')return Response.json({text:await clipboard.read()});
+          if(operation!=='write'||typeof text!=='string')return new Response(null,{status:400});
+          await clipboard.write(text);return Response.json({});
+        }catch{return new Response(null,{status:503});}
+      }});
+    await browser.context.addInitScript(`globalThis.__qmlHost?.setClipboardEndpoint(${JSON.stringify(`http://127.0.0.1:${server.port}/${token}`)});`);
+  })();
+  const wrapped=async function(url,...args) {
+    if(!closed&&/^file:.*\.qml(?:[?#]|$)/i.test(String(url)))await prepare();
+    return navigate.call(this,url,...args);
+  };
+  browser.context.navigate=wrapped;
+  done.finally(()=>{
+    closed=true;server?.stop(true);
+    if(browser.context.navigate===wrapped)browser.context.navigate=navigate;
+  });
+}

package/lib/qml/worker-thread.js

@@ -0,0 +1,70 @@
+// Local WorkerScript application code executes on its own Bun worker thread.
+// Qt.include uses one script global scope; it is not the QML import resolver.
+import { parentPort, workerData } from 'node:worker_threads';
+import { readFileSync } from 'node:fs';
+import { createContext, Script } from 'node:vm';
+let current = workerData.url,
+  bytes = 0,
+  depth = 0;
+const context = createContext({
+  console,
+  WorkerScript: {
+    onMessage: null,
+    sendMessage: (message) =>
+      parentPort.postMessage({ kind: 'message', message }),
+  },
+});
+const run = (url) => {
+  if (new URL(url).protocol !== 'file:')
+    throw Error('WorkerScript imports must be local files');
+  if (++depth > 48) throw Error('WorkerScript include depth exceeded');
+  const previous = current;
+  current = url;
+  try {
+    const source = readFileSync(new URL(url), 'utf8');
+    bytes += Buffer.byteLength(source);
+    if (bytes > 4 * 1024 * 1024)
+      throw Error('WorkerScript source limit exceeded');
+    // Like Qt.include in a WorkerScript, directives supply no import aliases.
+    const code = source.replace(
+      /^\s*\.(?:pragma\s+library|import\s+[^\n]+)\s*$/gm,
+      '',
+    );
+    new Script(code, { filename: url }).runInContext(context);
+  } finally {
+    current = previous;
+    depth--;
+  }
+};
+context.Qt = {
+  include: (relative, callback) => {
+    let result;
+    try {
+      run(new URL(relative, current).href);
+      result = { status: 0 };
+    } catch (exception) {
+      result = { status: 3, exception };
+    }
+    callback?.(result);
+    return result;
+  },
+};
+try {
+  run(current);
+  parentPort.postMessage({ kind: 'ready' });
+  parentPort.on('message', (message) => {
+    try {
+      context.WorkerScript.onMessage?.(message);
+    } catch (error) {
+      parentPort.postMessage({
+        kind: 'error',
+        error: String(error.stack || error),
+      });
+    }
+  });
+} catch (error) {
+  parentPort.postMessage({
+    kind: 'error',
+    error: String(error.stack || error),
+  });
+}

package/lib/render-tree/index.js

@@ -1,6 +1,8 @@
 import { extractSvg } from "./svg.js";
 import { computeElementStyle, controlKind } from "../style/computed-style.js";
 
+import {textInputSelection} from '../renderer/text-input-paint.js';
+
 const PLACEHOLDER_COLOR = "rgba(117, 117, 117, 1)";
 const CHECKED_COLOR = "rgba(0, 117, 255, 1)";
 const DEFAULT_SUMMARY = Object.freeze({ tagName: "SUMMARY", getAttribute: () => null, hasAttribute: () => false });
@@ -99,6 +101,7 @@ export class RenderTreeBuilder {
     let keys = this.#pseudoKeys.get(element);
     if (!keys) this.#pseudoKeys.set(element, keys = { before: {}, after: {}, beforeText: {}, afterText: {} });
     keys.value ??= {};
+    const controlType=boxType(style)==="inline"?"inline-block":boxType(style);
     let boxStyle = style;
     let text = "";
     let textStyle = style;
@@ -134,10 +137,22 @@ export class RenderTreeBuilder {
         textStyle = Object.freeze({ ...style, color: PLACEHOLDER_COLOR });
       }
     }
+
+    if (control === "text" || control === "textarea") {
+      const selected = textInputSelection(element, text, textStyle, (part, type, properties, domNode) => {
+        keys.inputSelection ??= {};
+        keys.inputSelection[part] ??= {};
+        return this.#node(domNode, type, nodesById, properties, keys.inputSelection[part]);
+      });
+      if (selected) return this.#node(element, controlType, nodesById, {
+        tagName: element.tagName, style: boxStyle, children: Object.freeze(selected),
+      });
+    }
+
     const children = text
       ? [this.#node(element, "text", nodesById, { text, style: textStyle, pseudo: "value", children: Object.freeze([]) }, keys.value)]
       : [];
-    return this.#node(element, "inline-block", nodesById, {
+    return this.#node(element, controlType, nodesById, {
       tagName: element.tagName,
       style: boxStyle,
       children: Object.freeze(children),

package/lib/renderer/bindings.js

@@ -21,6 +21,7 @@ const isCanvasSizeAttribute = (node, name, namespace = null) => !namespace
   && node.namespaceURI === "http://www.w3.org/1999/xhtml" && node.tagName === "CANVAS"
   && (name === "width" || name === "height");
 const REFLECTED_PROPERTIES = [
+  "selectionStart", "selectionEnd", "selectionDirection", "maxLength",
   "value", "checked", "disabled", "type", "name", "href", "src", "alt", "title",
   "placeholder", "selected", "readOnly", "required", "min", "max", "step", "rel", "target",
   "htmlFor", "lang", "dir", "tabIndex", "hidden", "defaultValue", "action", "method",
@@ -1097,6 +1098,16 @@ class ElementBinding extends ParentBinding {
 
   get validity() { return this.#validity ??= realmOf(this).wrapValidity(nodeOf(this).validity); }
 
+  setSelectionRange(start, end, direction = 'none') {
+    if(arguments.length<2)throw new TypeError('setSelectionRange requires start and end');
+    nodeOf(this).setSelectionRange(Number(start),Number(end),String(direction));touch(this);
+  }
+  setRangeText(replacement, ...args) {
+    if(!arguments.length)throw new TypeError('setRangeText requires replacement');
+    nodeOf(this).setRangeText(String(replacement),...args.map((v,i)=>i<2?Number(v):String(v)));touch(this);
+  }
+  select() {nodeOf(this).select();touch(this);}
+
   setCustomValidity(message) {
     if (!arguments.length) throw new TypeError("setCustomValidity requires a message");
     nodeOf(this).setCustomValidity(String(message));

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

@@ -14,6 +14,10 @@
  * whole WASM heap. The copy handed back is only the requested rectangle.
  */
 
+// qml handle begin: consume local-QML DOM snapshots without exposing native images
+import { drawQmlDomImage } from "../qml/canvas-dom.js";
+// qml handle end
+
 let CanvasKit = null;
 
 /** The CanvasKit `loadGraphics` instantiated. Page canvases share it. */
@@ -225,6 +229,15 @@ function open(node) {
           if (property === "drawImage" && resolveImage) {
             source = resolveImage(args[0]);
             if (!source?.image) return;
+
+            // qml handle begin: temporary DOM images have synchronous ownership
+            if (drawQmlDomImage(source, state.node.deref(), context, args)) {
+              if (source.originClean === false) state.originClean = false;
+              changed(state);
+              return;
+            }
+            // qml handle end
+
             args[0] = source.image;
           }
           const result = context[property](...args);