buninu-browser 0.2.3 → 0.3.0

package/lib/renderer/broadcast-channel.js

@@ -0,0 +1,76 @@
+// Bun supplies the structured-clone transport. Names are scoped by browser
+// origin; the native channels and their event objects never reach page code.
+const NativeBroadcastChannel = globalThis.BroadcastChannel;
+
+export function createBroadcastChannels({ origin, EventTarget, realm, runTask, DOMException }) {
+  // Renderer workers have separate module state but share Bun's channel
+  // transport, so a counter would collide for unrelated opaque documents.
+  const scope = origin === "null" ? `opaque:${crypto.randomUUID()}` : origin;
+  const states = new WeakMap();
+  const live = new Set();
+  let disposed = false;
+  const stateOf = object => {
+    const state = states.get(object);
+    if (!state) throw new TypeError("Illegal invocation");
+    return state;
+  };
+  function BroadcastChannel(name) {
+    if (!new.target) throw new TypeError("Constructor BroadcastChannel requires 'new'");
+    if (!arguments.length) throw new TypeError("BroadcastChannel requires a name");
+    if (disposed) throw new DOMException("The document is no longer active", "InvalidStateError");
+    const self = Reflect.construct(EventTarget, [], new.target);
+    const channelName = String(name);
+    const native = new NativeBroadcastChannel(JSON.stringify([scope, channelName]));
+    const state = { native, name: channelName, closed: false, handlers: new Map() };
+    states.set(self, state);
+    live.add(state);
+    for (const type of ["message", "messageerror"]) {
+      native.addEventListener(type, incoming => {
+        if (disposed || state.closed) return;
+        runTask(() => {
+          const event = realm.messageEvent(type, { data: incoming.data, origin });
+          realm.markTrusted(event);
+          EventTarget.prototype.dispatchEvent.call(self, event);
+        });
+      });
+    }
+    return self;
+  }
+  BroadcastChannel.prototype = Object.create(EventTarget.prototype, {
+    constructor: { value: BroadcastChannel, writable: true, configurable: true },
+    name: { get() { return stateOf(this).name; }, enumerable: true, configurable: true },
+    postMessage: { value(message) {
+      const state = stateOf(this);
+      if (state.closed) throw new DOMException("The channel is closed", "InvalidStateError");
+      if (!arguments.length) throw new TypeError("postMessage requires a message");
+      try { state.native.postMessage(message); }
+      catch (error) { throw new DOMException(String(error.message ?? error), error.name === "DataCloneError" ? "DataCloneError" : "InvalidStateError"); }
+    }, writable: true, enumerable: true, configurable: true },
+    close: { value() {
+      const state = stateOf(this);
+      if (state.closed) return;
+      state.closed = true;
+      state.native.close();
+      live.delete(state);
+    }, writable: true, enumerable: true, configurable: true },
+    [Symbol.toStringTag]: { value: "BroadcastChannel", configurable: true },
+  });
+  for (const type of ["message", "messageerror"]) Object.defineProperty(BroadcastChannel.prototype, `on${type}`, {
+    get() { return stateOf(this).handlers.get(type) ?? null; },
+    set(handler) {
+      const state = stateOf(this);
+      const previous = state.handlers.get(type);
+      if (previous) EventTarget.prototype.removeEventListener.call(this, type, previous);
+      state.handlers.delete(type);
+      if (typeof handler === "function") {
+        state.handlers.set(type, handler);
+        EventTarget.prototype.addEventListener.call(this, type, handler);
+      }
+    }, enumerable: true, configurable: true,
+  });
+  return { BroadcastChannel, dispose() {
+    disposed = true;
+    for (const state of live) { state.closed = true; state.native.close(); }
+    live.clear();
+  } };
+}

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

@@ -22,9 +22,90 @@ export function setCanvasKit(kit) {
 }
 
 const surfaces = new WeakMap();
+// A WeakMap does not release the malloc-backed CanvasKit surface. Track
+// resources without retaining DOM nodes or context proxies, so either page
+// teardown or collection of an unused canvas can release them.
+const documentSurfaces = new WeakMap();
+const documentChanges = new WeakMap();
+const collectedContexts = new FinalizationRegistry(releaseSurface);
+const DRAW_METHODS = new Set(["clearRect", "drawImage", "fill", "fillRect", "fillText", "stroke", "strokeRect", "strokeText", "putImageData"]);
+const CONTEXT_METHODS = new Set(("arc arcTo beginPath bezierCurveTo clearRect clip closePath createImageData createLinearGradient createPattern createRadialGradient drawFocusIfNeeded drawImage ellipse fill fillRect fillText getImageData getLineDash getTransform isPointInPath isPointInStroke lineTo measureText moveTo putImageData quadraticCurveTo rect reset resetTransform restore rotate roundRect save scale setLineDash setTransform stroke strokeRect strokeText transform translate").split(" "));
+const CONTEXT_PROPERTIES = new Set(("canvas direction fillStyle filter font fontKerning fontStretch fontVariantCaps globalAlpha globalCompositeOperation imageSmoothingEnabled imageSmoothingQuality letterSpacing lineCap lineDashOffset lineJoin lineWidth miterLimit shadowBlur shadowColor shadowOffsetX shadowOffsetY strokeStyle textAlign textBaseline textRendering wordSpacing").split(" "));
+const nativeStyles = new WeakMap();
+const publicStyles = new WeakMap();
+const collectedStyles = new FinalizationRegistry(native => native.ie());
+
+// CanvasKit's gradient/pattern shims expose shader handles and disposal
+// methods. Only the standard author-facing methods may cross into a page.
+function publicStyle(native) {
+  if (native === null || typeof native !== "object") return native;
+  let wrapper = publicStyles.get(native)?.deref();
+  if (wrapper) return wrapper;
+  const gradient = typeof native.addColorStop === "function";
+  const method = gradient ? "addColorStop" : "setTransform";
+  wrapper = Object.create(null);
+  Object.defineProperties(wrapper, {
+    [method]: { value(...args) {
+      // WebIDL converts these before entering the native implementation.
+      // The shim otherwise stores the original offset object in its stops,
+      // which could retain the facade/DOM through finalizer holdings.
+      if (gradient) native.addColorStop(Number(args[0]), String(args[1]));
+      else native.setTransform(...args);
+    }, writable: true, configurable: true, enumerable: true },
+    [Symbol.toStringTag]: { value: gradient ? "CanvasGradient" : "CanvasPattern", configurable: true },
+  });
+  // A gradient reused after its creator's bitmap reset can own a later
+  // shader outside that old context's cleanup list. Its facade owns that
+  // last shader; use a weak reverse link so finalizer holdings cannot retain
+  // the facade through this map. Context style/save state keeps it alive.
+  publicStyles.set(native, new WeakRef(wrapper));
+  nativeStyles.set(wrapper, native);
+  // The current pattern shim may retain its page-supplied image object;
+  // do not root that DOM graph in finalizer holdings. Gradients retain only
+  // numeric coordinates/colors and their private native shader.
+  if (gradient) {
+    collectedStyles.unregister(native);
+    collectedStyles.register(wrapper, native, native);
+  }
+  return wrapper;
+}
+
+/** Drawing changes paint, without requiring a DOM mutation or full layout. */
+export function observeDocumentCanvases(document, changed) {
+  documentChanges.set(document, changed);
+}
+
+function changed(state) {
+  state.image?.delete();
+  state.image = null;
+  state.resource = null;
+  const node = state.node.deref();
+  if (node) documentChanges.get(node.ownerDocument)?.(node);
+}
+
+function releaseSurface(state) {
+  if (!state.surface) return;
+  state.image?.delete();
+  state.image = state.resource = null;
+  state.surface.dispose();
+  state.surface = null;
+  state.raster = null;
+  state.context = null;
+  state.owner?.delete(state);
+  collectedContexts.unregister(state);
+}
+
+/** Release connected and detached canvases belonging to a discarded document. */
+export function disposeDocumentCanvases(document) {
+  documentChanges.delete(document);
+  const owned = documentSurfaces.get(document);
+  if (!owned) return;
+  for (const state of owned) releaseSurface(state);
+  documentSurfaces.delete(document);
+}
 
 /** The element's 2d context, or null for any other context id or before CanvasKit loads. */
-export function canvasContext(node, type) {
+export function canvasContext(node, type, options = null) {
   if (type !== "2d" || !CanvasKit) return null;
   let entry = surfaces.get(node);
   if (!entry) {
@@ -32,6 +113,7 @@ export function canvasContext(node, type) {
     if (!entry) return null;
     surfaces.set(node, entry);
   }
+  if (options) entry.configure(options);
   return entry.proxy;
 }
 
@@ -40,6 +122,42 @@ export function resetCanvas(node) {
   surfaces.get(node)?.reopen();
 }
 
+/** A refcounted native snapshot: no PNG/base64/readPixels round trip. */
+export function canvasResource(node) {
+  const state = surfaces.get(node)?.state;
+  if (!state?.surface || !state.raster) return null;
+  if (!state.resource) {
+    state.raster.flush();
+    state.image = state.raster.makeImageSnapshot();
+    if (!state.image) return null;
+    state.resource = { image: state.image, width: state.width, height: state.height, originClean: state.originClean };
+  }
+  return state.resource;
+}
+
+/** Encoded bytes are only needed when the page explicitly exports its canvas. */
+export function encodeCanvas(node, requestedType = "image/png", quality) {
+  if (!node.width || !node.height) return null;
+  canvasContext(node, "2d");
+  const state = surfaces.get(node).state;
+  if (!state.originClean) throw new DOMException("The canvas contains cross-origin image data.", "SecurityError");
+  const type = String(requestedType).toLowerCase();
+  const format = type === "image/jpeg" ? CanvasKit.ImageFormat.JPEG
+    : type === "image/webp" ? CanvasKit.ImageFormat.WEBP : CanvasKit.ImageFormat.PNG;
+  let supportedType = format === CanvasKit.ImageFormat.JPEG ? "image/jpeg"
+    : format === CanvasKit.ImageFormat.WEBP ? "image/webp" : "image/png";
+  const image = canvasResource(node)?.image;
+  const level = typeof quality === "number" && quality >= 0 && quality <= 1 ? Math.round(quality * 100) : 92;
+  let bytes = image?.encodeToBytes(format ?? CanvasKit.ImageFormat.PNG, level);
+  // CanvasKit builds may omit optional encoders. HTML requires the PNG
+  // fallback for unsupported types rather than a mislabeled or empty result.
+  if (!bytes && format !== CanvasKit.ImageFormat.PNG) {
+    bytes = image?.encodeToBytes(CanvasKit.ImageFormat.PNG, level);
+    supportedType = "image/png";
+  }
+  return bytes ? { bytes, type: supportedType } : null;
+}
+
 // A zero bitmap makes MakeSurface fail and getImageData reject the rectangle.
 // The element can still report 0; drawing uses one pixel until it grows.
 function bitmapSize(node) {
@@ -47,32 +165,143 @@ function bitmapSize(node) {
 }
 
 function open(node) {
-  let surface = makeSurface(node);
+  const surface = makeSurface(node);
   if (!surface) return null;
-  let context = surface.getContext("2d");
+  let owner = null;
+  if (node.ownerDocument) {
+    owner = documentSurfaces.get(node.ownerDocument);
+    if (!owner) documentSurfaces.set(node.ownerDocument, owner = new Set());
+  }
+  const [width, height] = bitmapSize(node);
+  const state = { surface, raster: nativeSurface(surface), context: surface.getContext("2d"), owner,
+    node: new WeakRef(node), width, height, image: null, resource: null, originClean: true };
+  owner?.add(state);
+  const methods = new Map();
+  let publicCanvas = null, resolveImage = null, parseFont = null, text = null;
+  const textDefaults = () => ({ font: "10px sans-serif", parsedFont: { fontSize: 10, fontFamily: ["sans-serif"], fontWeight: 400, fontStyle: "normal", fontStretch: 100 },
+    textAlign: "start", textBaseline: "alphabetic", direction: "inherit" });
+  let settings = textDefaults();
+  const settingsStack = [];
+  let styleValues = { fillStyle: null, strokeStyle: null };
+  const styleStack = [];
+  const currentContext = () => {
+    if (!state.context) throw new DOMException("The canvas document has been discarded.", "InvalidStateError");
+    return state.context;
+  };
   const proxy = new Proxy(Object.create(null), {
     get(_target, property) {
-      if (property === "getImageData") return (sx, sy, sw, sh) => copyImageData(context.getImageData(sx, sy, sw, sh));
+      if (property === "canvas") return publicCanvas;
+      if (!CONTEXT_METHODS.has(property) && !CONTEXT_PROPERTIES.has(property)) return undefined;
+      const context = currentContext();
+      if (text && Object.hasOwn(settings, property) && property !== "parsedFont") return settings[property];
+      // The shim's strokeStyle getter assumes every value is a color, even
+      // after accepting a gradient. Keep the page's branded style identity.
+      if ((property === "fillStyle" || property === "strokeStyle") && styleValues[property]) return styleValues[property];
       const value = context[property];
-      return typeof value === "function" ? value.bind(context) : value;
+      if (property === "fillStyle" || property === "strokeStyle") return publicStyle(value);
+      const custom = property === "getTransform";
+      if (typeof value !== "function" && !custom) return value;
+      let method = methods.get(property);
+      if (!method) {
+        // A saved method follows width/height resets too. Binding the proxy
+        // keeps its resource alive while a caller retains only the method.
+        method = function (...args) {
+          const context = currentContext();
+          if (property === "getTransform") {
+            const matrix = state.raster.getCanvas().getTotalMatrix();
+            return { a: matrix[0], b: matrix[3], c: matrix[1], d: matrix[4], e: matrix[2], f: matrix[5], is2D: true };
+          }
+          if (text && ["fillText", "strokeText", "measureText"].includes(property)) {
+            const result = text({ operation: property, args, context, canvas: state.raster.getCanvas(), settings,
+              paintStyle: nativeStyles.get(styleValues[property === "strokeText" ? "strokeStyle" : "fillStyle"]),
+            });
+            if (property !== "measureText") changed(state);
+            return result;
+          }
+          if (property === "getImageData" && !state.originClean) {
+            throw new DOMException("The canvas contains cross-origin image data.", "SecurityError");
+          }
+          let source;
+          if (property === "drawImage" && resolveImage) {
+            source = resolveImage(args[0]);
+            if (!source?.image) return;
+            args[0] = source.image;
+          }
+          const result = context[property](...args);
+          if (property === "save") {
+            settingsStack.push({ ...settings });
+            styleStack.push({ ...styleValues });
+          } else if (property === "restore" && settingsStack.length) {
+            settings = settingsStack.pop();
+            styleValues = styleStack.pop();
+            // Native save() copies style shims. The DOM retains the actual
+            // gradient/pattern object, including later color-stop changes.
+            for (const name of ["fillStyle", "strokeStyle"]) if (styleValues[name]) context[name] = nativeStyles.get(styleValues[name]);
+          }
+          if (source?.originClean === false) state.originClean = false;
+          if (DRAW_METHODS.has(property)) changed(state);
+          if (property === "createLinearGradient" || property === "createRadialGradient" || property === "createPattern") return publicStyle(result);
+          return property === "getImageData" ? copyImageData(result) : result;
+        }.bind(proxy);
+        methods.set(property, method);
+      }
+      return method;
     },
     set(_target, property, value) {
-      context[property] = value;
+      if (!CONTEXT_PROPERTIES.has(property) || property === "canvas") return false;
+      if (property === "fillStyle" || property === "strokeStyle") {
+        const native = value !== null && typeof value === "object" ? nativeStyles.get(value) : undefined;
+        // Do not pass arbitrary page objects to the shim's private pe()
+        // shader protocol. Only strings or our branded wrappers are styles.
+        if (native || typeof value === "string") {
+          currentContext()[property] = native ?? value;
+          styleValues[property] = native ? value : null;
+        }
+        return true;
+      }
+      if (text && property === "font") {
+        const parsed = parseFont?.(String(value));
+        if (parsed) { settings.font = String(value); settings.parsedFont = parsed; }
+        return true;
+      }
+      if (text && Object.hasOwn(settings, property)) {
+        const values = { textAlign: ["start", "end", "left", "right", "center"], textBaseline: ["top", "hanging", "middle", "alphabetic", "ideographic", "bottom"], direction: ["inherit", "ltr", "rtl"] };
+        if (values[property]?.includes(String(value))) settings[property] = String(value);
+        return true;
+      }
+      currentContext()[property] = value;
       return true;
     },
     has(_target, property) {
-      return property in context;
+      return property === "canvas" || property === "getTransform" || (CONTEXT_METHODS.has(property) || CONTEXT_PROPERTIES.has(property)) && (property in currentContext() || text && Object.hasOwn(settings, property));
     },
   });
+  collectedContexts.register(proxy, state, state);
   return {
+    state,
     proxy,
+    configure(options) {
+      publicCanvas = options.canvas;
+      resolveImage = options.resolveImage;
+      parseFont = options.parseFont;
+      text = options.text;
+    },
     reopen() {
+      if (!state.surface) return;
       const next = makeSurface(node);
       if (!next) return;
-      const previous = surface;
-      surface = next;
-      context = surface.getContext("2d");
-      previous.dispose?.();
+      const previous = state.surface;
+      state.surface = next;
+      state.raster = nativeSurface(next);
+      state.context = next.getContext("2d");
+      state.originClean = true;
+      settings = textDefaults();
+      settingsStack.length = 0;
+      styleValues = { fillStyle: null, strokeStyle: null };
+      styleStack.length = 0;
+      [state.width, state.height] = bitmapSize(node);
+      changed(state);
+      previous.dispose();
     },
   };
 }
@@ -82,11 +311,25 @@ function makeSurface(node) {
   return CanvasKit.MakeCanvas(width, height);
 }
 
+function nativeSurface(canvas) {
+  // The bundled CanvasKit canvas shim owns its SkSurface in an enumerable
+  // field, renamed by minification. Use its native API instead of depending
+  // on that generated field name or encoding/decoding a canvas data URL.
+  return Object.values(canvas).find(value => value && typeof value.makeImageSnapshot === "function"
+    && typeof value.getCanvas === "function") ?? null;
+}
+
 function copyImageData(image) {
   if (!image?.data) throw new DOMException("The source rectangle is empty.", "IndexSizeError");
   const count = image.width * image.height * 4;
-  const data = new Uint8ClampedArray(count);
-  const source = new Uint8ClampedArray(image.data.buffer, image.data.byteOffset, Math.min(count, image.data.length));
-  data.set(source);
+  // Current CanvasKit returns a fresh, exact-sized copy from readPixels.
+  // Keep that array; only copy when the backing buffer exposes other pixels
+  // (or the WASM heap), as some CanvasKit versions do.
+  let data = image.data;
+  if (!(data instanceof Uint8ClampedArray) || data.byteOffset !== 0 || data.buffer.byteLength !== count || data.length !== count) {
+    data = new Uint8ClampedArray(count);
+    const source = new Uint8ClampedArray(image.data.buffer, image.data.byteOffset, Math.min(count, image.data.length));
+    data.set(source);
+  }
   return { width: image.width, height: image.height, data, colorSpace: "srgb" };
 }

package/lib/renderer/canvas-text.js

@@ -0,0 +1,120 @@
+import { parseFontShorthand } from "../style/computed-style.js";
+
+const STRETCH = { "ultra-condensed": 50, "extra-condensed": 62.5, condensed: 75, "semi-condensed": 87.5,
+  normal: 100, "semi-expanded": 112.5, expanded: 125, "extra-expanded": 150, "ultra-expanded": 200 };
+const SIZES = { "xx-small": 9, "x-small": 10, small: 13, medium: 16, large: 18, "x-large": 24, "xx-large": 32, "xxx-large": 48 };
+
+export function parseCanvasFont(value, base = 16, root = 16) {
+  const font = parseFontShorthand(String(value));
+  if (!font) return null;
+  const size = font.size.toLowerCase();
+  const length = size.match(/^(\d*\.?\d+)(px|pt|pc|in|cm|mm|q|em|rem|ex|ch|%)$/);
+  const factors = { px: 1, pt: 4 / 3, pc: 16, in: 96, cm: 96 / 2.54, mm: 96 / 25.4, q: 96 / 101.6,
+    em: base, rem: root, ex: base / 2, ch: base / 2, "%": base / 100 };
+  const fontSize = SIZES[size] ?? (size === "larger" ? base * 1.2 : size === "smaller" ? base / 1.2
+    : length ? Number(length[1]) * factors[length[2]] : NaN);
+  if (!Number.isFinite(fontSize) || fontSize <= 0) return null;
+  const fontFamily = font.family.match(/(?:"(?:\\.|[^"])*"|'(?:\\.|[^'])*'|[^,])+/g)?.map(family => family.trim().replace(/^(?:"(.*)"|'(.*)')$/, "$1$2"));
+  if (!fontFamily?.length || fontFamily.some(family => !family)) return null;
+  return { fontSize, fontFamily, fontWeight: font.weight === "bold" ? 700 : Number(font.weight) || 400,
+    fontStyle: font.style, fontStretch: STRETCH[font.stretch] ?? 100 };
+}
+
+/** Draw with the same shaped fonts, fallbacks and Unicode handling as DOM text. */
+export function createCanvasTextRenderer(CanvasKit, makeParagraph) {
+  const paragraphs = new Map();
+  let characters = 0;
+  const render = request => canvasText(CanvasKit, makeParagraph, request, {
+    get(key) {
+      const entry = paragraphs.get(key);
+      if (entry) { paragraphs.delete(key); paragraphs.set(key, entry); }
+      return entry?.paragraph;
+    },
+    set(key, paragraph, count) {
+      paragraphs.set(key, { paragraph, count });
+      characters += count;
+      while (paragraphs.size > 128 || characters > 16000) {
+        const [old, entry] = paragraphs.entries().next().value;
+        entry.paragraph.delete(); characters -= entry.count; paragraphs.delete(old);
+      }
+    },
+  });
+  render.clear = () => {
+    for (const { paragraph } of paragraphs.values()) paragraph.delete();
+    paragraphs.clear(); characters = 0;
+  };
+  return render;
+}
+
+function canvasText(CanvasKit, makeParagraph, { context, canvas, settings, style, operation, args, paintStyle }, cache) {
+  const text = String(args[0]).replace(/[\t\n\f\r]/g, " ");
+  const stroke = operation === "strokeText";
+  const measure = operation === "measureText";
+  // CanvasKit's strokeStyle getter serializes every style as a color. The
+  // context facade supplies its already-unwrapped gradient/pattern directly.
+  const color = paintStyle ?? (stroke ? context.strokeStyle : context.fillStyle);
+  const retained = text.length <= 4096 && (measure || typeof color === "string");
+  const key = retained ? JSON.stringify([text, style, measure ? "measure" : [stroke, color, context.globalAlpha,
+    context.globalCompositeOperation, context.lineWidth, context.miterLimit, context.lineJoin]]) : null;
+  let paint, paragraph = retained ? cache.get(key) : null;
+  let owned = !paragraph;
+  try {
+    if (!paragraph && !measure) {
+      paint = new CanvasKit.Paint();
+      paint.setAntiAlias(true);
+      if (typeof color === "string") {
+        const rgba = CanvasKit.parseColorString(color);
+        rgba[3] *= context.globalAlpha;
+        paint.setColor(rgba);
+      } else if (typeof color?.pe === "function") {
+        paint.setShader(color.pe(canvas.getTotalMatrix()));
+        paint.setColor(CanvasKit.Color(0, 0, 0, context.globalAlpha));
+      }
+      if (stroke) {
+        paint.setStyle(CanvasKit.PaintStyle.Stroke);
+        paint.setStrokeWidth(context.lineWidth);
+        paint.setStrokeMiter(context.miterLimit);
+        paint.setStrokeJoin({ round: CanvasKit.StrokeJoin.Round, bevel: CanvasKit.StrokeJoin.Bevel }[context.lineJoin] ?? CanvasKit.StrokeJoin.Miter);
+      }
+      const blends = { "source-over": "SrcOver", "source-in": "SrcIn", "source-out": "SrcOut", "source-atop": "SrcATop",
+        "destination-over": "DstOver", "destination-in": "DstIn", "destination-out": "DstOut", "destination-atop": "DstATop",
+        lighter: "Plus", copy: "Src", xor: "Xor", multiply: "Multiply", screen: "Screen", overlay: "Overlay", darken: "Darken",
+        lighten: "Lighten", "color-dodge": "ColorDodge", "color-burn": "ColorBurn", "hard-light": "HardLight", "soft-light": "SoftLight",
+        difference: "Difference", exclusion: "Exclusion", hue: "Hue", saturation: "Saturation", color: "Color", luminosity: "Luminosity" };
+      paint.setBlendMode(CanvasKit.BlendMode[blends[context.globalCompositeOperation] ?? "SrcOver"]);
+    }
+    if (!paragraph) {
+      paragraph = makeParagraph(text, style, undefined, 1, paint);
+      paragraph.layout(1e7);
+      if (retained) { cache.set(key, paragraph, text.length); owned = false; }
+    }
+    const width = paragraph.getMaxIntrinsicWidth();
+    const line = paragraph.getLineMetrics()[0];
+    const alphabetic = paragraph.getAlphabeticBaseline();
+    const ascent = line?.ascent ?? alphabetic, descent = line?.descent ?? paragraph.getHeight() - alphabetic;
+    const baseline = { top: 0, hanging: alphabetic - ascent * 0.8, middle: (alphabetic - ascent + alphabetic + descent) / 2,
+      alphabetic, ideographic: paragraph.getIdeographicBaseline(), bottom: alphabetic + descent }[settings.textBaseline] ?? alphabetic;
+    let align = settings.textAlign;
+    if (align === "start") align = settings.direction === "rtl" ? "right" : "left";
+    if (align === "end") align = settings.direction === "rtl" ? "left" : "right";
+    const offset = align === "center" ? width / 2 : align === "right" ? width : 0;
+    if (measure) return { width, actualBoundingBoxLeft: offset, actualBoundingBoxRight: width - offset,
+      actualBoundingBoxAscent: baseline - (alphabetic - ascent), actualBoundingBoxDescent: alphabetic + descent - baseline,
+      fontBoundingBoxAscent: baseline, fontBoundingBoxDescent: paragraph.getHeight() - baseline,
+      emHeightAscent: ascent, emHeightDescent: descent, hangingBaseline: alphabetic - ascent * 0.8,
+      alphabeticBaseline: alphabetic - baseline, ideographicBaseline: paragraph.getIdeographicBaseline() - baseline };
+    const [x, y] = args.slice(1, 3).map(Number);
+    const maxWidth = args.length > 3 ? Number(args[3]) : Infinity;
+    if (!Number.isFinite(x) || !Number.isFinite(y) || !(maxWidth > 0) || !text) return;
+    const scale = width > maxWidth ? maxWidth / width : 1;
+    canvas.save();
+    try {
+      canvas.translate(x - offset * scale, y - baseline);
+      canvas.scale(scale, 1);
+      canvas.drawParagraph(paragraph, 0, 0);
+    } finally { canvas.restore(); }
+  } finally {
+    if (owned) paragraph?.delete();
+    paint?.delete();
+  }
+}

package/lib/renderer/compositor-channel.js

@@ -0,0 +1,103 @@
+// Private loopback transport, connected before renderer seccomp. No inherited
+// numeric descriptors: node:net also supports Windows sockets.
+import {createServer, createConnection} from 'node:net';
+import {randomBytes} from 'node:crypto';
+const MAX_JSON = 96 * 1024 * 1024;
+const MAX_PIXELS = 64 * 1024 * 1024;
+const MAX_QUEUE = 128 * 1024 * 1024;
+
+// Length-prefixed JSON followed by optional binary pixels. Copy once into an
+// owned packet so a raster lease may be released before the socket drains.
+export function encodePacket(message, pixels = null) {
+  const json = Buffer.from(JSON.stringify(message));
+  const size = pixels?.byteLength ?? 0;
+  if (json.length > MAX_JSON || size > MAX_PIXELS || json.length + size > MAX_QUEUE) throw Error('Compositor packet too large');
+  const packet = Buffer.allocUnsafe(8 + json.length + size);
+  packet.writeUInt32LE(json.length, 0); packet.writeUInt32LE(size, 4);
+  packet.set(json, 8); if (size) packet.set(pixels, 8 + json.length);
+  return packet;
+}
+
+export class PacketReader {
+  constructor(receive, limit = MAX_QUEUE) { this.receive = receive; this.limit = limit; this.header = Buffer.alloc(8); this.used = 0; this.packet = null; }
+  push(chunk) {
+    let offset = 0;
+    while (offset < chunk.length) {
+      const target = this.packet ?? this.header;
+      const count = Math.min(target.length - this.used, chunk.length - offset);
+      target.set(chunk.subarray(offset, offset + count), this.used);
+      this.used += count; offset += count;
+      if (this.used !== target.length) continue;
+      this.used = 0;
+      if (!this.packet) {
+        this.jsonLength = this.header.readUInt32LE(0);
+        const binaryLength = this.header.readUInt32LE(4);
+        const total = this.jsonLength + binaryLength;
+        if (!this.jsonLength || this.jsonLength > MAX_JSON || binaryLength > MAX_PIXELS || total > this.limit) throw Error('Invalid compositor packet size');
+        this.packet = Buffer.allocUnsafe(total);
+      } else {
+        const packet = this.packet; this.packet = null;
+        const message = JSON.parse(packet.subarray(0, this.jsonLength).toString());
+        const pixels = packet.subarray(this.jsonLength);
+        this.receive(message, pixels);
+      }
+    }
+  }
+}
+
+function attach(socket, receive, closed, limit) {
+  socket.setNoDelay(true);
+  const reader = new PacketReader(receive, limit);
+  socket.on('data', chunk => { try { reader.push(chunk); } catch { socket.destroy(); } });
+  socket.on('error', () => {});
+  socket.once('close', closed);
+  return {
+    reader,
+    send(message, pixels) {
+      if (socket.destroyed) throw Error('Compositor channel closed');
+      const packet = encodePacket(message, pixels);
+      if (socket.writableLength + packet.length > MAX_QUEUE) { socket.destroy(); throw Error('Compositor channel backpressure limit'); }
+      socket.write(packet);
+    },
+    close() { socket.destroy(); },
+  };
+}
+
+export async function listenCompositor(receive, closed) {
+  const token = randomBytes(32).toString('hex');
+  const sockets = new Set(); let peer = null, ended = false;
+  const server = createServer(socket => {
+    if (ended || peer || sockets.size >= 4) { socket.destroy(); return; }
+    sockets.add(socket);
+    const timer = setTimeout(() => socket.destroy(), 3000);
+    const candidate = attach(socket, (message, pixels) => {
+      if (!peer) {
+        if (pixels.length || message?.type !== 'hello' || message.token !== token) { socket.destroy(); return; }
+        peer = candidate; clearTimeout(timer); candidate.reader.limit = MAX_QUEUE;
+        for (const other of sockets) if (other !== socket) other.destroy();
+        server.close(); candidate.send({type:'accepted'});
+      } else if (peer === candidate) receive(message, pixels);
+    }, () => { clearTimeout(timer); sockets.delete(socket); if (peer === candidate && !ended) closed(); }, 4096);
+  });
+  await new Promise((resolve, reject) => { server.once('error', reject); server.listen(0, '127.0.0.1', resolve); });
+  return {
+    endpoint: {port:server.address().port, token},
+    send(message) { if (!peer || ended) throw Error('Compositor not connected'); peer.send(message); },
+    close() { ended = true; server.close(); for (const socket of sockets) socket.destroy(); },
+  };
+}
+
+export function connectCompositor(endpoint, receive, closed) {
+  return new Promise((resolve, reject) => {
+    const socket = createConnection({host:'127.0.0.1', port:endpoint.port});
+    let accepted = false;
+    const timer = setTimeout(() => socket.destroy(), 5000);
+    const peer = attach(socket, (message, pixels) => {
+      if (!accepted) {
+        if (message?.type !== 'accepted' || pixels.length) { socket.destroy(); return; }
+        accepted = true; clearTimeout(timer); resolve(peer);
+      } else receive(message, pixels);
+    }, () => { clearTimeout(timer); if (!accepted) reject(Error('Compositor connection failed')); else closed(); });
+    socket.once('connect', () => peer.send({type:'hello', token:endpoint.token}));
+  });
+}