buninu-browser 0.2.2 → 0.2.4

package/lib/renderer/piano-input.js

@@ -0,0 +1,22 @@
+import { pianoNote } from "../audio/piano.js";
+
+// Keep a real editable input so mobile keyboards can open, but consume piano
+// input before text editing. Terminals and IMEs may commit several keys at once.
+export function handlePianoInput(element, input, play) {
+  if (element?.getAttribute?.("id") !== "buninu-piano-input" || element.disabled || element.readOnly) return false;
+  // CDP key events also carry text (often "" on rawKeyDown). Only a text-only
+  // commit belongs here; otherwise use key/code, including Space and F1–F12.
+  if (input.key === undefined && input.text !== undefined) {
+    for (const key of String(input.text)) {
+      const note = pianoNote(key);
+      if (note !== null) play?.(note);
+    }
+    return true;
+  }
+  const note = pianoNote(String(input.key), String(input.code ?? ""));
+  if (note === null) return false;
+  // Suppressing text insertion must not depend on whether a note is retriggered
+  // or an audio backend is available. Shift still selects a physical piano key.
+  if (!input.repeat && !(Number(input.modifiers) & 7)) play?.(note);
+  return true;
+}

package/lib/renderer/pointer-move.js

@@ -0,0 +1,29 @@
+const previousTargets = new WeakMap();
+
+/** Deliver pointer/mouse boundary events before movement, as a real pointer does. */
+export function dispatchPointerMove(window, realm, target, x, y) {
+  const document = window.document;
+  const previous = previousTargets.get(document) ?? null;
+  previousTargets.set(document, target);
+  const ancestors = node => { const list = []; for (; node?.nodeType === 1; node = node.parentElement) list.push(node); return list; };
+  const before = ancestors(previous), after = ancestors(target);
+  const send = (node, type, relatedTarget, bubbles = true) => {
+    if (!node) return;
+    const pointer = type.startsWith('pointer');
+    const Constructor = pointer ? window.PointerEvent : window.MouseEvent;
+    const event = new Constructor(type, { clientX: x, clientY: y, relatedTarget, bubbles,
+      composed: bubbles, cancelable: bubbles, button: pointer ? -1 : 0, buttons: 0,
+      pointerId: 1, pointerType: 'mouse', isPrimary: true });
+    if (realm) realm.dispatch(node, event); else node.dispatchEvent(event);
+  };
+  if (previous !== target) {
+    for (const prefix of ['pointer', 'mouse']) {
+      send(previous, `${prefix}out`, target);
+      for (const node of before) if (!after.includes(node)) send(node, `${prefix}leave`, target, false);
+      send(target, `${prefix}over`, previous);
+      for (const node of after.toReversed()) if (!before.includes(node)) send(node, `${prefix}enter`, previous, false);
+    }
+  }
+  send(target, 'pointermove', null);
+  send(target, 'mousemove', null);
+}

package/lib/renderer/prepared-script-cache.js

@@ -0,0 +1,50 @@
+import { escapeSesHtmlComments, rewriteClassicScriptSource } from "./script-rewrite.js";
+
+/**
+ * Reuse deterministic source preparation across documents and repeated evals.
+ * Only strings/parse flags are retained, never a document, AST, or executable
+ * closure. Evaluation still happens in the current page's SES compartment.
+ */
+export class PreparedScriptCache {
+  #entries = new Map();
+  #bytes = 0;
+  #maxBytes;
+  #maxEntries;
+  #prepare;
+
+  constructor({ maxBytes = 4 * 1024 * 1024, maxEntries = 128, prepare = prepareSource } = {}) {
+    this.#maxBytes = Math.max(0, maxBytes);
+    this.#maxEntries = Math.max(0, maxEntries);
+    this.#prepare = prepare;
+  }
+
+  prepare(source) {
+    const cached = this.#entries.get(source);
+    if (cached) {
+      this.#entries.delete(source);
+      this.#entries.set(source, cached);
+      return cached.result;
+    }
+    const result = Object.freeze(this.#prepare(source));
+    // Conservative UTF-16 accounting, including both the key and rewritten
+    // source, even when the engine can share their underlying string storage.
+    const bytes = (source.length + result.code.length) * 2;
+    if (!this.#maxEntries || bytes > this.#maxBytes) return result;
+    while (this.#entries.size && (this.#entries.size >= this.#maxEntries || this.#bytes + bytes > this.#maxBytes)) {
+      const key = this.#entries.keys().next().value;
+      this.#bytes -= this.#entries.get(key).bytes;
+      this.#entries.delete(key);
+    }
+    this.#entries.set(source, { result, bytes });
+    this.#bytes += bytes;
+    return result;
+  }
+}
+
+function prepareSource(source) {
+  const classic = rewriteClassicScriptSource(source);
+  return { code: escapeSesHtmlComments(classic.code), parsed: classic.parsed, strict: classic.strict };
+}
+
+const mainThreadCache = new PreparedScriptCache();
+export const prepareClassicScript = source => mainThreadCache.prepare(source);

package/lib/renderer/rendered-text.js

@@ -0,0 +1,108 @@
+/** HTML innerText's rendered-text collection using the engine's computed styles. */
+export function renderedText(element, computedStyle) {
+  if (!element.isConnected) return element.textContent;
+  const styles = new Map();
+  const styleOf = (node) => {
+    if (!styles.has(node)) styles.set(node, computedStyle(node));
+    return styles.get(node);
+  };
+  // An element outside rendering (including a display:none ancestor) returns
+  // raw descendant text. Hidden descendants of a rendered element do not.
+  for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) {
+    if (styleOf(ancestor)?.display === "none") return element.textContent;
+  }
+  for (let child = element, ancestor = element.parentElement; ancestor; child = ancestor, ancestor = ancestor.parentElement) {
+    if (ancestor.tagName === "DETAILS" && !ancestor.open && child !== firstSummary(ancestor)) return "";
+  }
+  let output = "";
+  let breaks = 0;
+  let space = false;
+  const boundary = (count) => { breaks = Math.max(breaks, count); space = false; };
+  const beforeText = () => {
+    if (breaks && output) output += "\n".repeat(breaks);
+    else if (space && output && !output.endsWith("\n")) output += " ";
+    breaks = 0;
+    space = false;
+  };
+  const text = (value, style) => {
+    if (style?.visibility === "hidden" || style?.visibility === "collapse") return;
+    value = value.replace(/\r\n?/g, "\n");
+    if (style?.textTransform === "uppercase") value = value.toUpperCase();
+    else if (style?.textTransform === "lowercase") value = value.toLowerCase();
+    else if (style?.textTransform === "capitalize") value = value.replace(/(^|\s)\S/g, (part) => part.toUpperCase());
+    if (["pre", "pre-wrap", "break-spaces"].includes(style?.whiteSpace)) {
+      if (!value) return;
+      beforeText();
+      output += value;
+      return;
+    }
+    // Collapse across adjacent text nodes too: separate spans do not create
+    // extra spaces, and whitespace at block boundaries is not rendered.
+    const pattern = style?.whiteSpace === "pre-line" ? /([\t\f ]+|\n)/g : /([\t\f \n]+)/g;
+    for (const token of value.split(pattern)) {
+      if (!token) continue;
+      if (style?.whiteSpace === "pre-line" && token === "\n") {
+        beforeText();
+        output += "\n";
+      } else if (/^[\t\f \n]+$/.test(token)) space = !breaks;
+      else { beforeText(); output += token; }
+    }
+  };
+  const stack = [{ node: element, root: true }];
+  while (stack.length) {
+    const item = stack.pop();
+    if (item.after) {
+      if (item.tab) { beforeText(); output += "\t"; }
+      if (item.breaks) boundary(item.breaks);
+      continue;
+    }
+    const node = item.node;
+    if (node.nodeType === 3) { text(node.data, styleOf(node.parentElement)); continue; }
+    if (node.nodeType !== 1) continue;
+    // SVG descriptive/resource elements never paint their own text, even
+    // though getComputedStyle(title).display is "inline" in browsers.
+    if (node.namespaceURI === SVG_NAMESPACE && NON_RENDERED_SVG.has(node.localName)) continue;
+    const style = styleOf(node);
+    if (style?.display === "none") continue;
+    if (node.tagName === "BR") {
+      if (style?.visibility !== "hidden" && style?.visibility !== "collapse") {
+        beforeText(); output += "\n";
+      }
+      continue;
+    }
+    const count = item.root ? 0 : node.tagName === "P" ? 2
+      : BLOCK_DISPLAYS.has(style?.display) ? 1 : 0;
+    if (count) boundary(count);
+    const tab = style?.display === "table-cell" && node.nextElementSibling !== null;
+    if (count || tab) stack.push({ after: true, breaks: count, tab });
+    if (node.tagName === "DETAILS" && !node.open) {
+      const summary = firstSummary(node);
+      if (summary) stack.push({ node: summary });
+      continue;
+    }
+    for (let child = node.lastChild; child; child = child.previousSibling) stack.push({ node: child });
+  }
+  return output;
+}
+
+function firstSummary(details) {
+  for (const child of details.children) if (child.tagName === "SUMMARY") return child;
+  return null;
+}
+
+const BLOCK_DISPLAYS = new Set(["block", "flow-root", "flex", "grid", "list-item", "table", "table-caption", "table-row"]);
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const NON_RENDERED_SVG = new Set(["title", "desc", "metadata", "defs", "symbol", "clipPath", "mask", "pattern",
+  "linearGradient", "radialGradient", "filter"]);
+
+/** innerText assignment turns CR/LF line boundaries into BR elements. */
+export function setRenderedText(element, value) {
+  const document = element.ownerDocument;
+  const fragment = document.createDocumentFragment();
+  const lines = String(value ?? "").split(/\r\n|[\r\n]/);
+  for (let index = 0; index < lines.length; index++) {
+    if (index) fragment.appendChild(document.createElement("br"));
+    if (lines[index]) fragment.appendChild(document.createTextNode(lines[index]));
+  }
+  element.replaceChildren(fragment);
+}

package/lib/renderer/rewrite-worker.js

@@ -7,13 +7,14 @@
  * Messages: { id, source } → { id, result: { code, parsed, strict } } or
  * { id, error }. The worker only transforms strings; page code never runs here.
  */
-import { escapeSesHtmlComments, rewriteClassicScriptSource } from "./script-rewrite.js";
+import { PreparedScriptCache } from "./prepared-script-cache.js";
+
+const preparedScripts = new PreparedScriptCache({ maxBytes: 16 * 1024 * 1024, maxEntries: 64 });
 
 self.addEventListener("message", ({ data }) => {
   const { id, source } = data ?? {};
   try {
-    const classic = rewriteClassicScriptSource(String(source));
-    self.postMessage({ id, result: { code: escapeSesHtmlComments(classic.code), parsed: classic.parsed, strict: classic.strict } });
+    self.postMessage({ id, result: preparedScripts.prepare(String(source)) });
   } catch (error) {
     self.postMessage({ id, error: String(error?.message ?? error) });
   }

package/lib/renderer/script-rewrite.js

@@ -118,8 +118,19 @@ export function rewriteClassicScript(source, parsed = null) {
   const text = (start, end) => {
     let result = "";
     let at = start;
-    for (const edit of innerEdits) {
-      if (edit.start < start || edit.end > end) continue;
+    // Function declarations and initializers usually span only a handful
+    // of edits. Locate that range instead of rescanning every edit in the
+    // bundle for each declaration (quadratic for many top-level functions).
+    let low = 0, high = innerEdits.length;
+    while (low < high) {
+      const middle = (low + high) >>> 1;
+      if (innerEdits[middle].start < start) low = middle + 1;
+      else high = middle;
+    }
+    for (let index = low; index < innerEdits.length; index++) {
+      const edit = innerEdits[index];
+      if (edit.start >= end) break;
+      if (edit.end > end) continue;
       result += `${source.slice(at, edit.start)}${edit.text}`;
       at = edit.end;
     }

package/lib/renderer/scroll-into-view.js

@@ -0,0 +1,28 @@
+/** CSSOM View's boolean/dictionary overload and logical alignment options. */
+export function scrollIntoViewOptions(value = undefined) {
+  const dictionary = value !== null && (typeof value === "object" || typeof value === "function") ? value : {};
+  const { block: requestedBlock = "start", inline = "nearest", behavior = "auto", container = "all" } = dictionary;
+  const block = value !== null && value !== undefined && typeof value !== "object" && typeof value !== "function"
+    ? (Boolean(value) ? "start" : "end") : requestedBlock;
+  const options = {
+    block: String(block), inline: String(inline), behavior: String(behavior), container: String(container),
+  };
+  for (const key of ["block", "inline"]) {
+    if (!["start", "center", "end", "nearest"].includes(options[key])) throw new TypeError(`Invalid scrollIntoView ${key}`);
+  }
+  if (!["auto", "instant", "smooth"].includes(options.behavior)) throw new TypeError("Invalid scrollIntoView behavior");
+  if (!["all", "nearest"].includes(options.container)) throw new TypeError("Invalid scrollIntoView container");
+  return options;
+}
+
+/** Signed scroll distance for one axis, with the target relative to the scrollport. */
+export function scrollAlignmentDelta(start, size, viewportSize, alignment) {
+  const end = start + size;
+  if (alignment === "start") return start;
+  if (alignment === "end") return end - viewportSize;
+  if (alignment === "center") return start + (size - viewportSize) / 2;
+  // Nearest leaves both fully visible and viewport-spanning boxes alone.
+  if ((start >= 0 && end <= viewportSize) || (start <= 0 && end >= viewportSize)) return 0;
+  const endDelta = end - viewportSize;
+  return Math.abs(start) < Math.abs(endDelta) ? start : endDelta;
+}

package/lib/renderer/slot-assignment.js

@@ -0,0 +1,60 @@
+// DOM slot assignment, shared by the page bindings and flattened-tree users.
+// Keep only manual assignments: named slots follow the current tree directly.
+const manualNodes = new WeakMap();
+const manualOwner = new WeakMap();
+const isSlottable = node => node?.nodeType === 1 || node?.nodeType === 3;
+
+export function assignedSlot(node) {
+  const root = node?.parentElement?.shadowRoot;
+  if (!root || !isSlottable(node)) return null;
+  if (root.slotAssignment === "manual") {
+    const slot = manualOwner.get(node);
+    return slot?.getRootNode() === root ? slot : null;
+  }
+  const name = node.nodeType === 1 ? node.getAttribute("slot") ?? "" : "";
+  return [...root.querySelectorAll("slot")].find(slot => (slot.getAttribute("name") ?? "") === name) ?? null;
+}
+
+export function slotAssignedNodes(slot, flatten = false, visiting = new Set()) {
+  const root = slot.getRootNode();
+  if (!root.host || visiting.has(slot)) return [];
+  let nodes;
+  if (root.slotAssignment === "manual") {
+    nodes = (manualNodes.get(slot) ?? []).filter(node => node.parentNode === root.host);
+  } else {
+    const name = slot.getAttribute("name") ?? "";
+    const first = [...root.querySelectorAll("slot")].find(candidate => (candidate.getAttribute("name") ?? "") === name);
+    nodes = first !== slot ? [] : [...root.host.childNodes].filter(node => isSlottable(node)
+      && (node.nodeType === 1 ? node.getAttribute("slot") ?? "" : "") === name);
+  }
+  if (!flatten) return nodes;
+  visiting.add(slot);
+  const flattened = [];
+  if (!nodes.length) nodes = [...slot.childNodes].filter(isSlottable);
+  for (const node of nodes) {
+    if (node.localName === "slot" && node.getRootNode().host) flattened.push(...slotAssignedNodes(node, true, visiting));
+    else flattened.push(node);
+  }
+  visiting.delete(slot);
+  return flattened;
+}
+
+export function assignSlotNodes(slot, nodes, notify) {
+  if (nodes.some(node => !isSlottable(node))) throw new TypeError("Assigned nodes must be elements or text nodes");
+  if (slot.getRootNode().slotAssignment !== "manual") return;
+  const unique = [...new Set(nodes)];
+  const previous = manualNodes.get(slot) ?? [];
+  const changed = unique.length !== previous.length || unique.some((node, index) => node !== previous[index]);
+  if (!changed) return;
+  for (const node of previous) if (manualOwner.get(node) === slot) manualOwner.delete(node);
+  for (const node of unique) {
+    const old = manualOwner.get(node);
+    if (old && old !== slot) {
+      manualNodes.set(old, (manualNodes.get(old) ?? []).filter(item => item !== node));
+      notify(old);
+    }
+    manualOwner.set(node, slot);
+  }
+  manualNodes.set(slot, unique);
+  notify(slot);
+}

package/lib/renderer/video-presentation.js

@@ -0,0 +1,145 @@
+import { seekVideoKeyframe } from "../media/video-keyframe.js";
+
+// Runs in the compositor Worker, never in the page's JavaScript turn. Both
+// queue duration and decoded pixel memory are bounded. No audio extrapolation.
+export class VideoPresentation {
+  constructor(engine, changed, report) {
+    this.engine = engine;
+    this.changed = changed;
+    this.report = report;
+    this.epoch = 0;
+    this.timer = null;
+    this.clocks = new Map();
+  }
+  async open(config) {
+    this.stop();
+    const epoch = this.epoch;
+    this.config = config;
+    config.started = performance.now();
+    try {
+      const decoder = await this.engine.decode(config.bytes, config.options);
+      if (epoch !== this.epoch) { decoder.close(); return; }
+      this.decoder = decoder;
+      const startTime = config.startTime ?? 0;
+      const endTime = config.endTime ?? Infinity;
+      this.nextTime = config.time >= endTime ? endTime
+        : config.time > startTime ? seekVideoKeyframe(decoder, config.time, startTime) : startTime;
+      this.width = Math.max(1, Math.min(480, decoder.width));
+      this.height = Math.max(1, Math.round(this.width * decoder.height / Math.max(1, decoder.width)));
+      if (this.height > 480) {
+        this.width = Math.max(1, Math.round(this.width * 480 / this.height));
+        this.height = 480;
+      }
+      this.limit = Math.max(2, Math.min(30, Math.floor(16 * 1024 * 1024 / (this.width * this.height * 4))));
+      this.step();
+    } catch (error) {
+      if (epoch === this.epoch) this.report({ id: config.id, error: String(error) });
+    }
+  }
+  stop(id) {
+    if (id !== undefined && this.config?.id !== id) return;
+    this.epoch++;
+    clearTimeout(this.timer);
+    this.decoder?.close();
+    this.decoder = null;
+    this.queue = [];
+    this.frame = null;
+    this.eof = false;
+    this.reportedEnd = false;
+    this.config = null;
+  }
+  timing(id, seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0) return;
+    this.clocks.set(id, seconds);
+    // Audio stream identifiers increase monotonically within this renderer.
+    if (this.clocks.size > 32) this.clocks.delete(this.clocks.keys().next().value);
+  }
+  bind(id, audioId, audioStart, time, endTime) {
+    if (this.config?.id !== id) return;
+    if (audioId !== undefined) this.config.audioId = audioId;
+    if (audioStart !== undefined) this.config.audioStart = audioStart;
+    if (time !== undefined) Object.assign(this.config, { time, started: performance.now() });
+    if (endTime !== undefined) {
+      this.config.endTime = endTime;
+      // These frames may have been queued before the next init's first
+      // media segment established where the old configuration stops.
+      this.queue = this.queue.filter(frame => frame.time + 1e-6 < endTime);
+    }
+  }
+  time() {
+    const c = this.config;
+    if (c.audioId != null) return c.audioStart + (this.clocks.get(c.audioId) ?? 0);
+    // Until its audio stream exists, a known audio track holds the image.
+    if (c.hasAudio) return c.time;
+    return c.time + (performance.now() - c.started) / 1000;
+  }
+  step() {
+    if (!this.decoder || !this.config) return;
+    const time = this.time();
+    const endTime = this.config.endTime ?? Infinity;
+    const deadline = performance.now() + 8;
+    try {
+      while (!this.eof && this.queue.length < this.limit && this.nextTime <= time + 0.75
+        && this.nextTime + 1e-6 < endTime) {
+        const pixels = this.decoder.nextFrame(this.width, this.height);
+        if (!pixels) { this.eof = true; break; }
+        const frame = { pixels, time: this.nextTime, width: this.width, height: this.height };
+        this.nextTime += 1 / (this.decoder.fps || 30);
+        // A reopened decoder starts at an earlier keyframe. Decode through
+        // that prefix without flashing it over the last displayed picture.
+        if (frame.time + 1 / (this.decoder.fps || 30) > this.config.time) this.queue.push(frame);
+        if (performance.now() >= deadline) break;
+      }
+    } catch {
+      // Growing snapshots can throw at their current end. The main thread
+      // owns network/refill policy and decides whether this is EOF or an error.
+      this.eof = true;
+    }
+    // A later init can replace buffered frames before this snapshot's EOF.
+    // Finish at that media boundary; the renderer opens its next snapshot.
+    if (this.nextTime + 1e-6 >= endTime) {
+      this.eof = true;
+      this.nextTime = endTime;
+    }
+    let latest = null;
+    while (this.queue.length && this.queue[0].time <= time + 1e-6) latest = this.queue.shift();
+    if (latest) {
+      this.frame = latest;
+      if (this.config.shared) {
+        const meta = new Int32Array(this.config.shared, 0, 4);
+        Atomics.add(meta, 0, 1);
+        new Uint8Array(this.config.shared, 16, latest.pixels.length).set(latest.pixels);
+        Atomics.store(meta, 1, latest.width);
+        Atomics.store(meta, 2, latest.height);
+        Atomics.add(meta, 0, 1);
+      }
+      this.changed();
+      this.report({ id: this.config.id, time: latest.time });
+    }
+    if (this.eof && !this.queue.length && time >= this.nextTime && !this.reportedEnd) {
+      this.reportedEnd = true;
+      this.report({ id: this.config.id, end: this.nextTime });
+    }
+    this.timer = setTimeout(() => this.step(), 10);
+  }
+}
+
+// Black/white raster passes capture the video's contribution after clipping,
+// opacity, subtitles and controls. This preserves foreground pixels instead of
+// pasting a rectangular video over the page's UI.
+export function compositeVideo(tile, frame) {
+  const layer = tile.videoLayer;
+  if (!layer || !frame) return tile;
+  const pixels = new Uint8Array(layer.base);
+  const { x, y, width, height } = layer.rect;
+  for (let py = Math.max(0, Math.floor(y)); py < Math.min(tile.pixelHeight, Math.ceil(y + height)); py++) {
+    const sy = Math.max(0, Math.min(frame.height - 1, Math.floor((py - y) / height * frame.height)));
+    for (let px = Math.max(0, Math.floor(x)); px < Math.min(tile.pixelWidth, Math.ceil(x + width)); px++) {
+      const sx = Math.max(0, Math.min(frame.width - 1, Math.floor((px - x) / width * frame.width)));
+      const dst = (py * tile.pixelWidth + px) * 4, src = (sy * frame.width + sx) * 4;
+      for (let c = 0; c < 3; c++) pixels[dst + c] = Math.min(255,
+        layer.base[dst + c] + Math.round(frame.pixels[src + c] * layer.mask[dst + c] / 255));
+    }
+  }
+  return { ...tile, pixels };
+}

package/lib/renderer/workers.js

@@ -57,7 +57,7 @@ const hostClearTimeout = globalThis.clearTimeout;
  * @returns {{ Worker: Function, dispose(): void }}
  */
 export function createWorkers({
-  realm, documentUrl, fetchScript, runTask, callPage, reportError, DOMException, globals, constructorHelper, pagePorts,
+  realm, documentUrl, documentBaseUrl = documentUrl, fetchScript, runTask, callPage, reportError, DOMException, globals, constructorHelper, pagePorts,
 }) {
   const live = new Set();
 
@@ -94,7 +94,7 @@ export function createWorkers({
     if (!new.target) throw new TypeError("Constructor Worker requires 'new'");
     let url;
     try {
-      url = new URL(String(scriptURL), documentUrl());
+      url = new URL(String(scriptURL), documentBaseUrl());
     } catch {
       throw new DOMException(`Failed to construct 'Worker': invalid URL '${scriptURL}'`, "SyntaxError");
     }