buninu-browser 0.3.0 → 0.5.0

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/format.js

@@ -0,0 +1,9 @@
+export const QML_MIME = 'text/x-qml';
+export function isQmlDocument(url, contentType = '') {
+  const mime = contentType.split(';')[0].trim().toLowerCase();
+  if (['text/x-qml', 'application/x-qml'].includes(mime)) return true;
+  // An explicit HTML response must retain HTML behavior, even at a .qml URL.
+  return ['', 'text/plain', 'application/octet-stream'].includes(mime)
+    && /\.qml$/i.test(new URL(url, 'file:///').pathname);
+}
+

package/lib/qml/host.js

@@ -0,0 +1,352 @@
+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';
+// Local QML application capabilities. No imports from this module are exposed to HTML.
+import {
+  readFileSync,
+  writeFileSync,
+  renameSync,
+  unlinkSync,
+  statSync,
+  watch,
+} from 'node:fs';
+import { resolve, delimiter } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+const spawn = Bun.spawn.bind(Bun);
+const hostFetch = globalThis.fetch.bind(globalThis);
+const hostTimeout = AbortSignal.timeout.bind(AbortSignal);
+const environment = { ...process.env };
+const active = new Set();
+let installed = false;
+export function createQmlHost(url) {
+  if (new URL(url).protocol !== 'file:')
+    throw Error('QML host requires a local document');
+  if (!installed) {
+    installed = true;
+    process.on('exit', () => {
+      for (const host of active) host.dispose();
+    });
+    process.on('SIGTERM', () => {
+      for (const host of active) host.dispose();
+      process.exit(0);
+    });
+  }
+  let closed = false;
+  const resources = new Set(),
+    base = new URL('.', url);
+  const check = () => {
+    if (closed) throw Error('QML host is closed');
+  };
+  const path = (value) =>
+    String(value).startsWith('file:')
+      ? fileURLToPath(value)
+      : resolve(fileURLToPath(base), String(value));
+  let clipboardEndpoint;
+  const clipboardRequest = async (operation, text) => {
+    check();
+    if (!clipboardEndpoint) return operation==='read' ? readClipboard() : writeClipboard(text);
+    const response=await hostFetch(clipboardEndpoint,{method:'POST',body:JSON.stringify({operation,text}),signal:hostTimeout(4000)});
+    if(!response.ok)throw Error('Wayland clipboard unavailable');
+    return (await response.json()).text;
+  };
+  const host = {
+    setClipboardEndpoint(endpoint) {
+      check(); const u=new URL(endpoint);
+      if(u.protocol!=='http:' || u.hostname!=='127.0.0.1')throw Error('Invalid clipboard endpoint');
+      clipboardEndpoint=u.href;
+    },
+    clipboardRead() {return clipboardRequest('read');},
+    clipboardWrite(text) {return clipboardRequest('write',String(text));},
+    worker(url, onMessage, onReady, onError) {
+      check();
+      if (new URL(url).protocol !== 'file:')
+        throw Error('WorkerScript requires a local source');
+      const worker = new Worker(
+        new URL('./worker-thread.js', import.meta.url),
+        { workerData: { url } },
+      );
+      let stopped = false;
+      worker.on('message', (data) => {
+        if (stopped) return;
+        if (data.kind === 'ready') onReady();
+        else if (data.kind === 'message') onMessage(data.message);
+        else if (data.kind === 'error') onError(data.error);
+      });
+      worker.on('error', (error) => {
+        if (!stopped) onError(String(error.stack || error));
+      });
+      const stop = () => {
+        if (stopped) return;
+        stopped = true;
+        resources.delete(stop);
+        void worker.terminate();
+      };
+      resources.add(stop);
+      stop.send = (message) => {
+        if (stopped) throw Error('WorkerScript has stopped');
+        worker.postMessage(message);
+      };
+      return stop;
+    },
+    markdown: (source) => {
+      check();
+      return Bun.markdown.html(String(source));
+    },
+    shellDir: fileURLToPath(base).replace(/\/$/, ''),
+    processId: process.pid,
+    compile(href, externalSingletons = []) {
+      check();
+      if (new URL(href).protocol !== 'file:')
+        throw Error('Synchronous application components must be local files');
+      const source = readFileSync(fileURLToPath(href), 'utf8');
+      const fetchResource = (url) => {
+        if (new URL(url).protocol !== 'file:')
+          throw Error('Local component imports must be local files');
+        try {
+          return { status: 200, body: readFileSync(fileURLToPath(url)) };
+        } catch (e) {
+          if (e.code === 'ENOENT' || e.code === 'ENOTDIR')
+            return { status: 404 };
+          throw e;
+        }
+      };
+      const graph = loadQmlGraphSync(source, href, fetchResource, {
+        importRoots: host.importRoots,
+      });
+      const { document } = createQmlDocument(source, href, {
+        graph,
+        component: true,
+        externalSingletons,
+      });
+      const program = document.querySelector('script')?.textContent;
+      if (!program)
+        throw Error(
+          document.querySelector('p')?.textContent ||
+            'Component compilation failed',
+        );
+      return program;
+    },
+    env(name) {
+      check();
+      return environment[String(name)] ?? null;
+    },
+    hyprEvents(callback) {
+      const signature = environment.HYPRLAND_INSTANCE_SIGNATURE;
+      if (!signature) return () => {};
+      const socketPath = resolve(
+        environment.XDG_RUNTIME_DIR || '/tmp',
+        'hypr',
+        signature,
+        '.socket2.sock',
+      );
+      let socket,
+        buffer = '',
+        stopped = false;
+      const stop = () => {
+        stopped = true;
+        socket?.end();
+        resources.delete(stop);
+      };
+      resources.add(stop);
+      Bun.connect({
+        unix: socketPath,
+        socket: {
+          open(s) {
+            socket = s;
+            if (stopped) s.end();
+          },
+          data(s, bytes) {
+            buffer += new TextDecoder().decode(bytes);
+            let end;
+            while ((end = buffer.indexOf('\n')) >= 0) {
+              const line = buffer.slice(0, end);
+              buffer = buffer.slice(end + 1);
+              const at = line.indexOf('>>');
+              if (at >= 0 && !closed)
+                callback({ name: line.slice(0, at), data: line.slice(at + 2) });
+            }
+          },
+          error() {},
+          close() {
+            resources.delete(stop);
+          },
+        },
+      }).catch(() => resources.delete(stop));
+      return stop;
+    },
+    importRoots: (environment.QML_IMPORT_PATH || '')
+      .split(delimiter)
+      .filter(Boolean)
+      .map((p) => pathToFileURL(resolve(p) + '/').href),
+    write(name, data, atomic = true) {
+      check();
+      const target = path(name);
+      let temporary;
+      try {
+        if (atomic) {
+          let mode = 0o600;
+          try {
+            mode = statSync(target).mode & 0o777;
+          } catch (error) {
+            if (error.code !== 'ENOENT') throw error;
+          }
+          temporary =
+            target + '.qml-write-' + process.pid + '-' + crypto.randomUUID();
+          writeFileSync(temporary, data, { flag: 'wx', mode });
+          renameSync(temporary, target);
+          temporary = null;
+        } else writeFileSync(target, data);
+        return { error: null };
+      } catch (error) {
+        return { error: error.code || String(error) };
+      } finally {
+        if (temporary)
+          try {
+            unlinkSync(temporary);
+          } catch {}
+      }
+    },
+    read(name) {
+      check();
+      try {
+        return { text: readFileSync(path(name), 'utf8'), error: null };
+      } catch (e) {
+        return { text: '', error: e.code || String(e) };
+      }
+    },
+    watch(name, callback) {
+      check();
+      const target = path(name);
+      let watcher;
+      try {
+        watcher = watch(target, () => {
+          if (!closed) callback();
+        });
+      } catch {
+        return () => {};
+      }
+      const stop = () => {
+        watcher.close();
+        resources.delete(stop);
+      };
+      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)
+        throw Error('Process.command must be a nonempty array');
+      let child;
+      try {
+        child = spawn({
+          cmd: command.map(String),
+          cwd: options.cwd ? path(options.cwd) : fileURLToPath(base),
+          env: {
+            ...(options.clearEnvironment ? {} : environment),
+            ...(options.environment || {}),
+          },
+          stdin: options.stdin ? 'pipe' : 'ignore',
+          stdout: 'pipe',
+          stderr: 'pipe',
+        });
+      } catch (error) {
+        queueMicrotask(() => {
+          if (!closed)
+            callback({
+              exitCode: 127,
+              stdout: '',
+              stderr: String(error),
+              error: String(error),
+            });
+        });
+        return () => {};
+      }
+      const stop = () => {
+        child.kill();
+        resources.delete(stop);
+      };
+      stop.write = (text) => {
+        if (!options.stdin) throw Error('Process stdin is disabled');
+        child.stdin.write(String(text));
+        child.stdin.flush();
+      };
+      stop.closeWriteChannel = () => {
+        if (options.stdin) child.stdin.end();
+      };
+      stop.signal = (signal) => child.kill(Number(signal));
+      stop.processId = child.pid;
+      resources.add(stop);
+      const read = async (stream, onData) => {
+        let text = '';
+        const decoder = new TextDecoder();
+        for await (const bytes of stream) {
+          const chunk = decoder.decode(bytes, { stream: true });
+          text += chunk;
+          if (!closed) onData?.(chunk, bytes);
+        }
+        const tail = decoder.decode();
+        text += tail;
+        if (tail && !closed) onData?.(tail);
+        return text;
+      };
+      Promise.all([
+        read(child.stdout, options.stdout),
+        read(child.stderr, options.stderr),
+        child.exited,
+      ])
+        .then(([stdout, stderr, exitCode]) => {
+          resources.delete(stop);
+          if (!closed) callback({ stdout, stderr, exitCode });
+        })
+        .catch((error) => {
+          resources.delete(stop);
+          if (!closed)
+            callback({
+              exitCode: 1,
+              stdout: '',
+              stderr: String(error),
+              error: String(error),
+            });
+        });
+      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;
+      for (const stop of [...resources]) stop();
+      resources.clear();
+      active.delete(host);
+    },
+  };
+  active.add(host);
+  return host;
+}

package/lib/qml/images.js

@@ -0,0 +1,199 @@
+// QML Image uses existing raster decoding or an inert inline SVG DOM. The SVG
+// subset matches the browser's renderer; it does not rasterize/re-encode SVG.
+export function createQmlImages(api) {
+  const { document, effect, host, cleanup } = api;
+  const ns = 'http://www.w3.org/2000/svg';
+  function svg(source) {
+    if (source.length > 4 * 1024 * 1024) throw Error('QML SVG exceeds 4 MiB');
+    const parsed = new DOMParser().parseFromString(source, 'image/svg+xml');
+    const root = parsed.documentElement;
+    if (root?.localName !== 'svg' || parsed.querySelector('parsererror'))
+      throw Error('Invalid SVG image');
+    const supported = new Set([
+      'svg',
+      'g',
+      'path',
+      'rect',
+      'circle',
+      'ellipse',
+      'line',
+      'polyline',
+      'polygon',
+    ]);
+    const ignored = new Set(['title', 'desc', 'metadata']);
+    let nodes = 0;
+    function copy(from) {
+      if (++nodes > 10000) throw Error('QML SVG element limit');
+      if (!supported.has(from.localName))
+        throw Error('Unsupported QML SVG element: ' + from.localName);
+      const to = document.createElementNS(ns, from.localName);
+      for (const attr of from.attributes) {
+        if (
+          /^on/i.test(attr.name) ||
+          ['href', 'xlink:href'].includes(attr.name) ||
+          /url\s*\(/i.test(attr.value)
+        )
+          throw Error('Unsupported active/external QML SVG attribute');
+        to.setAttribute(attr.name, attr.value);
+      }
+      for (const child of from.children) {
+        if (!ignored.has(child.localName)) to.appendChild(copy(child));
+      }
+      return to;
+    }
+    const element = copy(root),
+      box = (root.getAttribute('viewBox') || '')
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    const width = parseFloat(root.getAttribute('width')) || box[2],
+      height = parseFloat(root.getAttribute('height')) || box[3];
+    if (!(width > 0 && height > 0)) throw Error('SVG image has no dimensions');
+    if (!element.hasAttribute('viewBox'))
+      element.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    return { element, width, height };
+  }
+  return (v, element, url) => {
+    let generation = 0,
+      current,
+      node = null,
+      pendingImage = null;
+    const remove = () => {
+      node?.remove();
+      node = null;
+    };
+    const fit = () => {
+      v.status;
+      if (!node) return;
+      node.style.position = 'absolute';
+      node.style.pointerEvents = 'none';
+      node.style.width = v.width + 'px';
+      node.style.height = v.height + 'px';
+      node.style.left = '0';
+      node.style.top = '0';
+      node.style.objectFit =
+        v.fillMode === 1
+          ? 'contain'
+          : v.fillMode === 2
+            ? 'cover'
+            : v.fillMode === 6
+              ? 'none'
+              : 'fill';
+      node.style.imageRendering = v.smooth ? 'auto' : 'pixelated';
+      node.style.transform = v.mirror ? 'scaleX(-1)' : '';
+      const ratio =
+        v.fillMode === 6
+          ? 1
+          : (v.fillMode === 2 ? Math.max : Math.min)(
+              v.width / (v.implicitWidth || 1),
+              v.height / (v.implicitHeight || 1),
+            );
+      v.paintedWidth = [1, 2, 6].includes(v.fillMode)
+        ? v.implicitWidth * ratio
+        : v.width;
+      v.paintedHeight = [1, 2, 6].includes(v.fillMode)
+        ? v.implicitHeight * ratio
+        : v.height;
+      if (node.localName === 'svg') {
+        // The inline SVG renderer always preserves its viewBox ratio. Fit by
+        // sizing the DOM box, then let the QML wrapper clip crop/pad overflow.
+        node.style.width = v.paintedWidth + 'px';
+        node.style.height = v.paintedHeight + 'px';
+        node.style.left = (v.width - v.paintedWidth) / 2 + 'px';
+        node.style.top = (v.height - v.paintedHeight) / 2 + 'px';
+      }
+      element.style.overflow = 'hidden';
+    };
+    effect(() => {
+      if (current === v.source) return;
+      current = v.source;
+      const token = ++generation;
+      pendingImage?.remove();
+      pendingImage = null;
+      if (!current) {
+        remove();
+        v.status = 0;
+        v.progress = 0;
+        v.implicitWidth = 0;
+        v.implicitHeight = 0;
+        return;
+      }
+      if (!v.retainWhileLoading) remove();
+      v.status = 2;
+      v.progress = 0;
+      const source = new URL(current, url).href;
+      const ready = (next, width, height) => {
+        if (token !== generation) {
+          next.remove();
+          return;
+        }
+        remove();
+        node = next;
+        element.appendChild(node);
+        v.implicitWidth = width;
+        v.implicitHeight = height;
+        v.status = 1;
+        v.progress = 1;
+        fit();
+      };
+      const failed = () => {
+        if (token === generation) {
+          remove();
+          v.status = 3;
+          v.progress = 0;
+        }
+      };
+      if (
+        /\.svg(?:[?#]|$)/i.test(source) ||
+        /^data:image\/svg\+xml/i.test(source)
+      ) {
+        (async () => {
+          let text;
+          if (source.startsWith('file:')) {
+            if (!host) throw Error('Local SVG requires local QML');
+            const result = host.read(source);
+            if (result.error) throw Error(result.error);
+            text = result.text;
+          } else {
+            const response = await fetch(source);
+            if (!response.ok) throw Error('SVG HTTP ' + response.status);
+            text = await response.text();
+          }
+          const result = svg(text);
+          ready(result.element, result.width, result.height);
+        })().catch(failed);
+      } else {
+        const image = document.createElement('img');
+        pendingImage = image;
+        image.style.display = 'none';
+        element.appendChild(image);
+        image.addEventListener(
+          'load',
+          () => {
+            if (pendingImage === image) pendingImage = null;
+            image.style.display = 'block';
+            ready(image, image.naturalWidth, image.naturalHeight);
+          },
+          { once: true },
+        );
+        image.addEventListener(
+          'error',
+          () => {
+            if (pendingImage === image) pendingImage = null;
+            image.remove();
+            failed();
+          },
+          { once: true },
+        );
+        image.src = source;
+      }
+    });
+    effect(fit);
+    cleanup(() => {
+      generation++;
+      pendingImage?.remove();
+      pendingImage = null;
+      remove();
+    });
+  };
+}