buninu-browser 0.2.3 → 0.2.4

package/lib/renderer/font-loading.js

@@ -0,0 +1,227 @@
+// Web fonts belong to the document. Built-in typefaces are shared native
+// references: registering their byte buffers again would copy tens of MB for
+// every document and iframe.
+const encoder = new TextEncoder();
+const MAX_FONT_BYTES = 32 * 1024 * 1024;
+
+export function registerTypeface(CanvasKit, provider, typeface, family) {
+  const bytes = encoder.encode(`${family}\0`);
+  const memory = CanvasKit.Malloc(Uint8Array, bytes.length);
+  try {
+    memory.toTypedArray().set(bytes);
+    // This is the entry point the bundled registerFont(bytes, family) uses
+    // after creating a Typeface. Skia retains the typeface and copies the name.
+    provider._registerFont(typeface, memory.byteOffset);
+  } finally {
+    CanvasKit.Free(memory);
+  }
+}
+
+function styleRank(face, wanted) {
+  const order = wanted === "italic" ? ["italic", "oblique", "normal"]
+    : wanted === "oblique" ? ["oblique", "italic", "normal"] : ["normal", "oblique", "italic"];
+  return order.indexOf(face.style ?? "normal");
+}
+
+/** CSS Fonts weight fallback order, including the special 400..500 interval. */
+function weightRank(face, wanted) {
+  const [low, high] = face.weight ?? [400, 400];
+  if (low <= wanted && wanted <= high) return 0;
+  if (wanted >= 400 && wanted <= 500) {
+    if (low > wanted && low <= 500) return low - wanted;
+    if (high < wanted) return 1000 + wanted - high;
+    return 2000 + low - wanted;
+  }
+  if (wanted < 400) return high < wanted ? wanted - high : 1000 + low - wanted;
+  return low > wanted ? low - wanted : 1000 + wanted - high;
+}
+
+function covers(face, point) {
+  return (face.unicodeRanges ?? [[0, 0x10ffff]]).some(([from, to]) => from <= point && point <= to);
+}
+
+function stretchRank(face, wanted) {
+  const [low, high] = face.stretch ?? [100, 100];
+  if (low <= wanted && wanted <= high) return 0;
+  if (wanted <= 100) return high < wanted ? wanted - high : 1000 + low - wanted;
+  return low > wanted ? low - wanted : 1000 + wanted - high;
+}
+
+function ranked(faces, weight, style, stretch = 100) {
+  return faces.toReversed().sort((left, right) => stretchRank(left, stretch) - stretchRank(right, stretch)
+    || styleRank(left, style) - styleRank(right, style)
+    || weightRank(left, weight) - weightRank(right, weight));
+}
+
+/** Only request faces needed by text which actually participates in layout. */
+export function neededFontFaces(faces, textRuns, availableFamilies = new Set()) {
+  const families = new Map();
+  for (const face of faces) {
+    const key = face.family.toLowerCase();
+    if (!families.has(key)) families.set(key, []);
+    families.get(key).push(face);
+  }
+  const needed = new Set();
+  const choices = new Map();
+  for (const { text, style } of textRuns) {
+    if (!text || !style) continue;
+    const points = new Set([...text].map(character => character.codePointAt(0)));
+    for (const family of style.fontFamily ?? []) {
+      const definitions = families.get(family.toLowerCase());
+      if (!definitions) {
+        if (availableFamilies.has(family.toLowerCase())) break;
+        continue;
+      }
+      const key = `${family.toLowerCase()}\n${style.fontWeight ?? 400}/${style.fontStyle ?? "normal"}/${style.fontStretch ?? 100}`;
+      let ordered = choices.get(key);
+      if (!ordered) choices.set(key, ordered = ranked(definitions, style.fontWeight ?? 400, style.fontStyle ?? "normal", style.fontStretch ?? 100));
+      for (const point of points) {
+        const face = ordered.find(face => covers(face, point));
+        if (face) { needed.add(face); points.delete(point); }
+      }
+      if (!points.size) break;
+    }
+  }
+  return needed;
+}
+
+export class DocumentFonts {
+  #CanvasKit;
+  #builtins;
+  #defaultCollection;
+  #fetch;
+  #changed;
+  #error;
+  #provider = null;
+  #collection = null;
+  #faces = [];
+  #records = new Map();
+  #sources = new Map();
+  #pending = new Set();
+  #requests = new Set();
+  #closed = false;
+  #nextAlias = 1;
+  #availableFamilies;
+  #hasUnicodeRanges = false;
+
+  constructor({ CanvasKit, builtins, defaultCollection, fetch, availableFamilies = new Set(), changed = () => {}, error = () => {} }) {
+    this.#CanvasKit = CanvasKit;
+    this.#builtins = builtins;
+    this.#defaultCollection = defaultCollection;
+    this.#fetch = fetch;
+    this.#changed = changed;
+    this.#error = error;
+    this.#availableFamilies = availableFamilies;
+  }
+
+  get collection() { return this.#collection ?? this.#defaultCollection; }
+
+  get hasUnicodeRanges() { return this.#hasUnicodeRanges; }
+
+  setFaces(faces) {
+    this.#faces = faces;
+    this.#hasUnicodeRanges = faces.some(face => face.unicodeRanges?.length
+      && !(face.unicodeRanges.length === 1 && face.unicodeRanges[0][0] === 0 && face.unicodeRanges[0][1] === 0x10ffff));
+  }
+
+  update(faces, textRuns) {
+    if (this.#closed) return;
+    this.setFaces(faces);
+    for (const face of neededFontFaces(faces, textRuns, this.#availableFamilies)) {
+      const key = JSON.stringify(face);
+      if (this.#records.has(key)) continue;
+      const record = { face, alias: null };
+      this.#records.set(key, record);
+      const pending = this.#load(record).catch(error => {
+        if (!this.#closed) this.#error(error);
+      }).finally(() => this.#pending.delete(pending));
+      this.#pending.add(pending);
+    }
+  }
+
+  /** Available faces in CSS fallback order; unicode-subset files share a family. */
+  resolve(family, weight = 400, style = "normal", point = null, stretch = 100) {
+    const definitions = this.#faces.filter(face => face.family.toLowerCase() === family.toLowerCase()
+      && (point === null || covers(face, point)));
+    return ranked(definitions, weight, style, stretch).map(face => this.#records.get(JSON.stringify(face))?.alias).filter(Boolean);
+  }
+
+  async ready() {
+    while (!this.#closed && this.#pending.size) await Promise.all([...this.#pending]);
+  }
+
+  #ensureProvider() {
+    if (this.#provider) return;
+    const kit = this.#CanvasKit;
+    this.#provider = kit.TypefaceFontProvider.Make();
+    for (const { family, typeface } of this.#builtins) registerTypeface(kit, this.#provider, typeface, family);
+    this.#collection = kit.FontCollection.Make();
+    this.#collection.setDefaultFontManager(this.#provider);
+    this.#collection.enableFontFallback();
+  }
+
+  async #load(record) {
+    let failure;
+    for (const source of record.face.sources) {
+      if (this.#closed) return;
+      try {
+        let typeface;
+        if (source.local) {
+          typeface = this.#builtins.find(entry => entry.family.toLowerCase() === source.local.toLowerCase())?.typeface;
+          if (!typeface) continue;
+        } else {
+          if (!source.url || (source.format && !/^(?:woff2?|truetype|opentype)(?:-variations)?$/i.test(source.format))) continue;
+          let pending = this.#sources.get(source.url);
+          if (!pending) {
+            pending = this.#loadSource(source.url);
+            this.#sources.set(source.url, pending);
+          }
+          typeface = await pending;
+          if (this.#closed) return;
+        }
+        this.#ensureProvider();
+        const alias = `Buninu Web Font ${this.#nextAlias++}`;
+        registerTypeface(this.#CanvasKit, this.#provider, typeface, alias);
+        record.alias = alias;
+        this.#changed();
+        return;
+      } catch (error) { failure = error; }
+    }
+    if (failure) throw failure;
+  }
+
+  async #loadSource(url) {
+    // Fonts use CORS even though images and classic stylesheets normally do
+    // not. This goes through the controller's existing page-fetch policy.
+    const request = this.#fetch({ url, method: "GET", headers: [], body: null,
+      mode: "cors", credentials: "same-origin", redirect: "follow" });
+    this.#requests.add(request);
+    try {
+      const response = await request;
+      if (this.#closed) return null;
+      if (response.status < 200 || response.status >= 300) throw new Error(`Font HTTP ${response.status}`);
+      const bytes = response.body instanceof Uint8Array ? response.body : await Bun.readableStreamToBytes(response.body);
+      if (this.#closed) return null;
+      if (!bytes.length || bytes.length > MAX_FONT_BYTES) throw new Error("Font size exceeds the renderer limit");
+      const typeface = this.#CanvasKit.Typeface.MakeTypefaceFromData(bytes);
+      if (!typeface) throw new Error("Font decoding failed");
+      return typeface;
+    } finally {
+      this.#requests.delete(request);
+    }
+  }
+
+  dispose() {
+    if (this.#closed) return;
+    this.#closed = true;
+    for (const request of this.#requests) request.abort?.();
+    this.#requests.clear();
+    this.#collection?.delete();
+    this.#provider?.delete();
+    this.#collection = this.#provider = null;
+    for (const source of this.#sources.values()) source.then(typeface => typeface?.delete(), () => {});
+    this.#sources.clear();
+    this.#records.clear();
+    this.#faces = [];
+  }
+}

package/lib/renderer/host.js

@@ -73,6 +73,7 @@ export class RendererHost {
   #audio = new Map();
   // In-flight page fetches, so AbortController reaches the actual HTTP request.
   #pageFetches = new Map();
+  #resourceFetches = new Map();
   #nextId = 1;
   #queue = Promise.resolve();
   #restarting = false;
@@ -189,6 +190,7 @@ export class RendererHost {
       this.call("applyCompositorScroll", x, y).catch(() => {});
     }
     if ((method === "loadDocument" || method === "showFragment") && params[0]) {
+      if (method === "loadDocument") this.#closeResourceFetches(this.#child);
       this.#documentUrl = String(method === "loadDocument" ? params[0].url : params[0]);
     }
     const run = () => this.#call(method, params);
@@ -534,6 +536,7 @@ export class RendererHost {
   }
 
   #closePageFetches(child) {
+    this.#closeResourceFetches(child);
     for (const [id, entry] of this.#pageFetches) {
       if (entry.child !== child) continue;
       this.#pageFetches.delete(id);
@@ -541,6 +544,14 @@ export class RendererHost {
     }
   }
 
+  #closeResourceFetches(child) {
+    for (const [id, entry] of this.#resourceFetches) {
+      if (entry.child !== child) continue;
+      this.#resourceFetches.delete(id);
+      entry.controller.abort();
+    }
+  }
+
   #closeSockets(child) {
     for (const [id, entry] of this.#sockets) {
       if (entry.child !== child) continue;
@@ -552,6 +563,16 @@ export class RendererHost {
   }
 
   async #fetchForRenderer(child, { id, url, kind }) {
+    const entry = { child, controller: new AbortController() };
+    this.#resourceFetches.set(id, entry);
+    try {
+      await this.#fetchResource(child, { id, url, kind }, entry.controller.signal);
+    } finally {
+      if (this.#resourceFetches.get(id) === entry) this.#resourceFetches.delete(id);
+    }
+  }
+
+  async #fetchResource(child, { id, url, kind }, signal) {
     const reply = (payload) => {
       if (this.#child === child) child.send({ type: "fetch-result", id, ...payload });
     };
@@ -561,7 +582,10 @@ export class RendererHost {
     } catch {
       return reply({ error: "invalid URL" });
     }
-    if (!ALLOWED_SCHEMES.has(target.protocol) || !RESOURCE_KINDS.has(kind)) {
+    // Local documents may render local resources. Authorize this from the
+    // controller's document URL, never from a renderer-supplied referrer.
+    const localFile = target.protocol === "file:" && new URL(this.#documentUrl).protocol === "file:";
+    if ((!ALLOWED_SCHEMES.has(target.protocol) && !localFile) || !RESOURCE_KINDS.has(kind)) {
       return reply({ error: `blocked ${kind} request for ${target.protocol}` });
     }
     // A renderer only ever holds documents of its own origin (site isolation
@@ -570,7 +594,7 @@ export class RendererHost {
     // being framed.
     const frame = kind === "iframe";
     if (frame && !sameOrigin(target.href, this.#documentUrl)) return reply({ error: "cross-origin frame" });
-    // Video and audio over http(s) stream. data: stays one response: it is
+    // Video and audio over http(s)/file stream. data: stays one response: it is
     // already in hand, and the renderer wraps it in a finished pipe.
     if ((kind === "video" || kind === "audio") && target.protocol !== "data:") {
       const send = (payload) => {
@@ -599,7 +623,7 @@ export class RendererHost {
           } else if (event.type === "error") {
             send({ type: "fetch-error", id, error: String(event.error ?? "media fetch failed") });
           }
-        });
+        }, { signal });
       } catch (error) {
         send({ type: "fetch-error", id, error: String(error?.message ?? error) });
       }
@@ -608,7 +632,7 @@ export class RendererHost {
     try {
       const response = target.protocol === "data:"
         ? await dataResponse(target)
-        : await this.#network.subresource(target.href, this.#documentUrl, kind);
+        : await this.#network.subresource(target.href, this.#documentUrl, kind, { signal });
       if (response.body.byteLength > MAX_RESOURCE_BYTES) return reply({ error: "resource too large" });
       if (frame && !sameOrigin(response.url || target.href, this.#documentUrl)) return reply({ error: "cross-origin frame" });
       if (frame && framingDenied(response.rawHeaders ?? [])) return reply({ error: "framing denied" });

package/lib/renderer/image-resources.js

@@ -0,0 +1,65 @@
+/**
+ * Coalesce concurrent requests for the same image within one document. Each
+ * consumer gets its own CanvasKit handle, sharing the underlying pixels, so
+ * removing one element cannot delete another element's image. Completed
+ * requests are dropped; HTTP freshness and persistent caching belong to the
+ * controller's network service.
+ */
+export function imageCrossOrigin(element) {
+  const value = element.getAttribute("crossorigin");
+  return value === null ? null : value.toLowerCase() === "use-credentials" ? "include" : "same-origin";
+}
+
+export function imageRequestKey(src, credentials) {
+  return JSON.stringify([src, credentials]);
+}
+
+export function createImageResourceLoader(CanvasKit, fetchResource, fetchCors) {
+  const documents = new WeakMap();
+  const corsRequests = new WeakMap();
+  const loadImage = function (document, url, credentials = null) {
+    let requests = documents.get(document);
+    if (!requests) documents.set(document, requests = new Map());
+    const key = imageRequestKey(url, credentials);
+    let entry = requests.get(key);
+    if (!entry) {
+      entry = { consumers: 0, ready: (async () => {
+        let response;
+        if (credentials !== null) {
+          const request = fetchCors({ url, method: "GET", headers: [], body: null,
+            mode: "cors", credentials, redirect: "follow" });
+          let pending = corsRequests.get(document);
+          if (!pending) corsRequests.set(document, pending = new Set());
+          pending.add(request);
+          try {
+            const result = await request;
+            const body = result.body instanceof Uint8Array ? result.body : await Bun.readableStreamToBytes(result.body);
+            response = { ...result, body };
+          } finally { pending.delete(request); }
+        } else response = await fetchResource(url, "image");
+        if (!(response.ok ?? (response.status >= 200 && response.status < 300))) throw new Error(`HTTP ${response.status}`);
+        // Keep Bun's header validation/decompression-size guard before Skia
+        // takes ownership of these untrusted encoded bytes.
+        const { width, height } = await new Bun.Image(response.body).metadata();
+        const image = CanvasKit.MakeImageFromEncoded(response.body);
+        if (!image) throw new Error("Image decoding failed");
+        return { width, height, image, url: response.url ?? url, requestedURL: url, crossOrigin: credentials,
+          originClean: credentials !== null ? true : undefined };
+      })() };
+      requests.set(key, entry);
+    }
+    entry.consumers++;
+    return entry.ready.then(resource => Object.freeze({ ...resource, image: resource.image.clone() })).finally(() => {
+      if (--entry.consumers) return;
+      requests.delete(key);
+      // All successful consumers already own their clone. Failures have no
+      // image to release, and must allow a later request to try again.
+      entry.ready.then(resource => resource.image.delete(), () => {});
+    });
+  };
+  loadImage.cancelDocument = (document) => {
+    for (const request of corsRequests.get(document) ?? []) request.abort?.();
+    corsRequests.delete(document);
+  };
+  return loadImage;
+}

package/lib/renderer/interfaces.js

@@ -74,6 +74,34 @@ export function platformObject(name, template, { parent = Object.prototype, base
 
 const accessor = (object, key) => Object.getOwnPropertyDescriptor(object, key);
 
+/** A page-local Error constructor around SES's tamed intrinsic, retaining native error branding. */
+export function errorInterface(BaseError, isError) {
+  const Error = function Error(message, options) {
+    return Reflect.construct(BaseError, arguments, new.target ?? Error);
+  };
+  const prototype = Object.create(BaseError.prototype);
+  for (const key of Reflect.ownKeys(BaseError.prototype)) {
+    if (key === "constructor") continue;
+    const descriptor = Object.getOwnPropertyDescriptor(BaseError.prototype, key);
+    Object.defineProperty(prototype, key, { ...descriptor, configurable: true, ...("value" in descriptor ? { writable: true } : {}) });
+  }
+  Object.defineProperty(prototype, "constructor", { value: Error, writable: true, configurable: true });
+  Error.prototype = prototype;
+  Object.setPrototypeOf(Error, BaseError);
+  for (const key of Reflect.ownKeys(BaseError)) {
+    if (["length", "name", "prototype"].includes(key)) continue;
+    const descriptor = Object.getOwnPropertyDescriptor(BaseError, key);
+    Object.defineProperty(Error, key, { ...descriptor, configurable: true, ...("value" in descriptor ? { writable: true } : {}) });
+  }
+  Object.defineProperty(Error, "length", { value: 1, configurable: true });
+  Object.defineProperty(Error, Symbol.hasInstance, {
+    value(value) { return Function.prototype[Symbol.hasInstance].call(this === Error ? BaseError : this, value); },
+    configurable: true,
+  });
+  if (isError) Object.defineProperty(Error, "isError", { value: isError, writable: true, configurable: true });
+  return Error;
+}
+
 /**
  * window.localStorage and sessionStorage (HTML §12.2.1): the methods on
  * Storage.prototype, and the stored items as each storage's own properties

package/lib/renderer/layout-observers.js

@@ -0,0 +1,236 @@
+/**
+ * Per-document layout observers. A layout/scroll notification schedules one
+ * measurement pass for all observers; page callbacks run only after every
+ * target has been measured, avoiding a layout flush for each lazy image.
+ * Geometry comes from the renderer, never from Happy DOM's zero-size boxes.
+ */
+export function createLayoutObservers({ nodeOf, boundsOf, computedStyle, viewport, schedule, cancel, call, now }) {
+  const intersections = new Set();
+  const resizes = new Set();
+  let pending = null;
+  let measuring = false;
+  let disposed = false;
+  let lastGeometry = null;
+
+  const queue = () => {
+    if (disposed || measuring || pending !== null || (!intersections.size && !resizes.size)) return;
+    pending = schedule(flush);
+  };
+  function flush() {
+    pending = null;
+    if (disposed) return;
+    measuring = true;
+    const deliveries = [];
+    // Multiple observers commonly watch the same ancestor or target.
+    const bounds = new Map();
+    const styles = new Map();
+    const rectOf = (node) => {
+      if (!bounds.has(node)) bounds.set(node, node?.isConnected ? boundsOf(node) : null);
+      return bounds.get(node);
+    };
+    const styleOf = (node) => {
+      if (!styles.has(node)) styles.set(node, computedStyle(node));
+      return styles.get(node);
+    };
+    try {
+      for (const observer of resizes) {
+        const state = resizeStates.get(observer);
+        const entries = [];
+        for (const [node, target] of state.targets) {
+          const rect = rectOf(node);
+          const style = rect ? styleOf(node) : null;
+          const border = style?.borderWidths ?? ZERO_EDGES;
+          const padding = style?.padding ?? ZERO_EDGES;
+          const width = Math.max(0, (rect?.width ?? 0) - sum(border, 1, 3) - sum(padding, 1, 3));
+          const height = Math.max(0, (rect?.height ?? 0) - sum(border, 0, 2) - sum(padding, 0, 2));
+          const scale = viewport().devicePixelRatio || 1;
+          const entry = {
+            target: target.wrapper,
+            contentRect: rectangle({ left: number(padding[3]), top: number(padding[0]), width, height }),
+            borderBoxSize: [size(rect?.width ?? 0, rect?.height ?? 0)],
+            contentBoxSize: [size(width, height)],
+            devicePixelContentBoxSize: [size(Math.round(width * scale), Math.round(height * scale))],
+          };
+          const selected = target.box === "border-box" ? entry.borderBoxSize[0]
+            : target.box === "device-pixel-content-box" ? entry.devicePixelContentBoxSize[0] : entry.contentBoxSize[0];
+          if (!target.last || selected.inlineSize !== target.last.inlineSize || selected.blockSize !== target.last.blockSize) {
+            target.last = selected;
+            entries.push(entry);
+          }
+        }
+        if (entries.length) deliveries.push([state.callback, observer, entries]);
+      }
+      for (const observer of intersections) {
+        const state = intersectionStates.get(observer);
+        const rootNode = nodeOf(state.root);
+        const screen = viewport();
+        const rootRect = rootNode?.nodeType === 1 ? rectOf(rootNode) : { left: 0, top: 0, width: screen.width, height: screen.height };
+        const rootBounds = rootRect ? marginRect(rectangle(rootRect), state.margin) : rectangle(ZERO_RECT);
+        for (const [node, target] of state.targets) {
+          const raw = rectOf(node);
+          const boundingClientRect = rectangle(raw ?? ZERO_RECT);
+          let intersection = raw && rootRect && (rootNode?.nodeType !== 1 || rootNode.contains(node))
+            ? boundingClientRect : null;
+          // Clip through scrolling/overflow ancestors before the root.
+          for (let ancestor = node.parentElement; intersection && ancestor && ancestor !== rootNode; ancestor = ancestor.parentElement) {
+            const style = styleOf(ancestor);
+            if (style?.overflowX === "clip" || style?.overflowY === "clip") {
+              const clip = rectOf(ancestor);
+              intersection = clip ? intersect(intersection, rectangle(clip), style.overflowX === "clip", style.overflowY === "clip") : null;
+            }
+          }
+          if (intersection) intersection = intersect(intersection, rootBounds);
+          const isIntersecting = intersection !== null;
+          const area = boundingClientRect.width * boundingClientRect.height;
+          const ratio = area ? (intersection ? intersection.width * intersection.height / area : 0) : (isIntersecting ? 1 : 0);
+          const thresholdIndex = state.thresholds.findIndex((threshold) => threshold > ratio);
+          const index = thresholdIndex === -1 ? state.thresholds.length : thresholdIndex;
+          if (target.index !== index || target.intersecting !== isIntersecting) {
+            target.index = index;
+            target.intersecting = isIntersecting;
+            state.records.push({ target: target.wrapper, time: now(), isIntersecting, intersectionRatio: ratio,
+              boundingClientRect, intersectionRect: intersection ?? rectangle(ZERO_RECT), rootBounds });
+          }
+        }
+        if (state.records.length) deliveries.push([state.callback, observer, state.records.splice(0)]);
+      }
+    } finally {
+      measuring = false;
+    }
+    for (const [callback, observer, entries] of deliveries) call(callback, observer, [entries, observer]);
+  }
+
+  const element = (target) => {
+    const node = nodeOf(target);
+    if (node?.nodeType !== 1) throw new TypeError("The target must be an Element.");
+    return node;
+  };
+  const intersectionStates = new WeakMap();
+  class IntersectionObserver {
+    constructor(callback, options = {}) {
+      if (typeof callback !== "function") throw new TypeError("IntersectionObserver callback must be a function.");
+      const root = options?.root ?? null;
+      const rootNode = root === null ? null : nodeOf(root);
+      if (root !== null && rootNode?.nodeType !== 1 && rootNode?.nodeType !== 9) {
+        throw new TypeError("IntersectionObserver root must be an Element or Document.");
+      }
+      const margin = parseMargin(options?.rootMargin ?? "0px");
+      const raw = options?.threshold ?? 0;
+      const thresholds = (typeof raw === "object" && raw !== null ? Array.from(raw, Number) : [Number(raw)]).sort((a, b) => a - b);
+      if (thresholds.some((value) => !Number.isFinite(value) || value < 0 || value > 1)) {
+        throw new RangeError("IntersectionObserver thresholds must be between 0 and 1.");
+      }
+      if (!thresholds.length) thresholds.push(0);
+      intersectionStates.set(this, { callback, root, margin, thresholds: Object.freeze(thresholds), targets: new Map(), records: [] });
+    }
+    get root() { return intersectionState(this).root; }
+    get rootMargin() { return intersectionState(this).margin.map(({ value, unit }) => `${value}${unit}`).join(" "); }
+    get thresholds() { return intersectionState(this).thresholds; }
+    observe(target) {
+      const state = intersectionState(this);
+      const node = element(target);
+      if (state.targets.has(node)) return;
+      state.targets.set(node, { wrapper: target, index: -1, intersecting: false });
+      intersections.add(this);
+      queue();
+    }
+    unobserve(target) {
+      const state = intersectionState(this);
+      state.targets.delete(element(target));
+      if (!state.targets.size) intersections.delete(this);
+    }
+    disconnect() {
+      intersectionState(this).targets.clear();
+      intersections.delete(this);
+    }
+    takeRecords() { return intersectionState(this).records.splice(0); }
+  }
+  const intersectionState = (observer) => {
+    const state = intersectionStates.get(observer);
+    if (!state) throw new TypeError("Illegal invocation");
+    return state;
+  };
+
+  const resizeStates = new WeakMap();
+  class ResizeObserver {
+    constructor(callback) {
+      if (typeof callback !== "function") throw new TypeError("ResizeObserver callback must be a function.");
+      resizeStates.set(this, { callback, targets: new Map() });
+    }
+    observe(target, options = {}) {
+      const state = resizeState(this);
+      const node = element(target);
+      const box = String(options?.box ?? "content-box");
+      if (!["content-box", "border-box", "device-pixel-content-box"].includes(box)) throw new TypeError("Invalid ResizeObserver box option.");
+      if (state.targets.get(node)?.box === box) return;
+      state.targets.set(node, { wrapper: target, box, last: size(0, 0) });
+      resizes.add(this);
+      queue();
+    }
+    unobserve(target) {
+      const state = resizeState(this);
+      state.targets.delete(element(target));
+      if (!state.targets.size) resizes.delete(this);
+    }
+    disconnect() {
+      resizeState(this).targets.clear();
+      resizes.delete(this);
+    }
+  }
+  const resizeState = (observer) => {
+    const state = resizeStates.get(observer);
+    if (!state) throw new TypeError("Illegal invocation");
+    return state;
+  };
+
+  return {
+    IntersectionObserver, ResizeObserver,
+    update(...geometry) {
+      // Video frames and screenshots can repaint without changing layout.
+      // They must not cause an O(targets × ancestors) observer pass each time.
+      if (geometry.length && lastGeometry && geometry.every((value, index) => value === lastGeometry[index])) return;
+      lastGeometry = geometry;
+      queue();
+    },
+    dispose() {
+      disposed = true;
+      if (pending !== null) cancel(pending);
+      pending = null;
+      intersections.clear();
+      resizes.clear();
+    },
+  };
+}
+
+const ZERO_RECT = Object.freeze({ left: 0, top: 0, width: 0, height: 0 });
+const ZERO_EDGES = Object.freeze([0, 0, 0, 0]);
+const number = (value) => typeof value === "number" && Number.isFinite(value) ? value : 0;
+const sum = (edges, a, b) => number(edges[a]) + number(edges[b]);
+const size = (inlineSize, blockSize) => ({ inlineSize, blockSize });
+function rectangle({ left, top, width, height }) {
+  return { x: left, y: top, left, top, width, height, right: left + width, bottom: top + height,
+    toJSON() { return { x: this.x, y: this.y, width: this.width, height: this.height,
+      top: this.top, right: this.right, bottom: this.bottom, left: this.left }; } };
+}
+function parseMargin(value) {
+  const tokens = String(value).trim().split(/\s+/);
+  if (!tokens.length || tokens.length > 4) throw new DOMException("Invalid rootMargin.", "SyntaxError");
+  const parts = tokens.map((token) => {
+    const match = /^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/.exec(token);
+    if (!match) throw new DOMException("rootMargin values must be pixels or percent.", "SyntaxError");
+    return { value: Number(match[1]), unit: match[2] };
+  });
+  const [top, right = top, bottom = top, left = right] = parts;
+  return [top, right, bottom, left];
+}
+function marginRect(rect, margin) {
+  const [top, right, bottom, left] = margin.map(({ value, unit }) => unit === "%" ? value * rect.width / 100 : value);
+  return rectangle({ left: rect.left - left, top: rect.top - top, width: rect.width + left + right, height: rect.height + top + bottom });
+}
+function intersect(a, b, x = true, y = true) {
+  const left = x ? Math.max(a.left, b.left) : a.left;
+  const right = x ? Math.min(a.right, b.right) : a.right;
+  const top = y ? Math.max(a.top, b.top) : a.top;
+  const bottom = y ? Math.min(a.bottom, b.bottom) : a.bottom;
+  return left <= right && top <= bottom ? rectangle({ left, top, width: right - left, height: bottom - top }) : null;
+}