@atolljs/islands 0.1.9 → 0.1.11

package/src/worker/dom/document.ts

@@ -5,14 +5,17 @@ import {
   getActiveInstance,
   getLastActiveInstance,
   getInstanceSize,
+  getInstanceRect,
+  setInstanceRect,
   instances,
+  lookupInstance,
   markInstanceActive,
   pushOp,
   registerHandler,
   unregisterHandler,
 } from '../instance';
 import type { ElementInstance, HostInstance, TextInstance } from '../instance';
-import type { EventPayload, Op } from '../../ops';
+import type { EventPayload, MeasuredRect, Op } from '../../ops';
 
 import {
   ProxyNode,
@@ -105,6 +108,18 @@ export interface ProxyDocument {
    * fill the island's box (a map viewport, a canvas host).
    */
   markContainer(el: ProxyElement): void;
+  /**
+   * Request REAL geometry for `el` — emits a `measure` op asking the driver
+   * to measure the actual node and ResizeObserver it. `cb` fires inside the
+   * instance's task scope on every `setRects` push (the first arrives as
+   * soon as the driver answers, then on every element resize), so observer
+   * mutations emit ops like onResize handlers. The element's geometry reads
+   * (`clientWidth`, `getBoundingClientRect`, …) serve the last pushed rect
+   * from then on. Returns a detacher — removing the last observer emits
+   * `unmeasure`. This backs the `ResizeObserver` shim; call it directly for
+   * the plain (rect) => void form.
+   */
+  observeSize(el: ProxyElement, cb: (rect: MeasuredRect) => void): () => void;
   /**
    * Register a handler fired every time the driver pushes a new container
    * size — the app's resize signal. Handlers run inside the instance's task
@@ -140,6 +155,11 @@ export class InternalDocument implements ProxyDocument {
   readonly _containerIds = new Set<number>([0]);
   /** Handlers fired when a setSize task pushes a new container size. */
   private readonly _resizeHandlers = new Set<(w: number, h: number) => void>();
+  /** element id → observeSize callbacks, fired on each setRects push. */
+  private readonly _sizeObservers = new Map<number, Set<(rect: MeasuredRect) => void>>();
+  /** ids a `measure` op was already emitted for — dedupes observeSize and
+   *  the lazy auto-request a bare geometry read performs. */
+  readonly _measureRequested = new Set<number>();
   /** The window facade bundle — built lazily by windowFacadeFor, shared by
    *  installDomShim and the instance dispatcher. */
   _windowBundle?: WindowFacadeBundle;
@@ -198,11 +218,21 @@ export class InternalDocument implements ProxyDocument {
     }
   }
 
-  _warn(feature: string): void {
+  _warn(feature: string, message?: string): void {
     if (this._warned.has(feature)) return;
     this._warned.add(feature);
     console.warn(
-      `[proxyDom] '${feature}' has no measurement channel — the only geometry the worker sees is the pushed container size (setSize); reads on unmarked elements return 0/empty.`,
+      message ??
+        `[proxyDom] '${feature}' has no synchronous answer — a measure request was emitted and reads return real geometry once the driver pushes it; subscribe via doc.observeSize or a ResizeObserver for updates.`,
+    );
+  }
+
+  /** Scroll-geometry warn — the measure channel delivers border boxes, not
+   *  scroll offsets/overflow extents, so scroll* reads stay honest 0. */
+  _scrollWarn(feature: string): void {
+    this._warn(
+      feature,
+      `[proxyDom] '${feature}' has no channel — the worker sees border-box geometry only (setSize/measure pushes); scroll offsets and overflow extents read 0.`,
     );
   }
 
@@ -212,13 +242,71 @@ export class InternalDocument implements ProxyDocument {
   }
 
   /**
-   * The size a geometry read on `el` may report: the pushed container box
-   * when `el` is the root or was markContainer()ed, undefined otherwise
+   * Emit `measure` for `el` exactly once — shared by observeSize (explicit
+   * subscription) and by geometry reads on unmarked connected elements (the
+   * lazy path: a library reading clientWidth gets the honest 0 for now, and
+   * REAL geometry on subsequent reads once the driver's push lands).
+   * Disconnected/phantom nodes have no driver-side element to measure;
+   * requesting is skipped until the read happens while connected.
+   */
+  _requestMeasure(el: ProxyElement): void {
+    if (!el.isConnected) return;
+    const id = el.instance.id;
+    if (this._measureRequested.has(id)) return;
+    this._measureRequested.add(id);
+    el._op({ t: 'measure', id });
+  }
+
+  observeSize(el: ProxyElement, cb: (rect: MeasuredRect) => void): () => void {
+    this._assertAlive();
+    const id = el.instance.id;
+    let set = this._sizeObservers.get(id);
+    if (set === undefined) this._sizeObservers.set(id, (set = new Set()));
+    set.add(cb);
+    // Connected or not, request now: the driver's ResizeObserver delivers
+    // the first rect when the element mounts, so an early observe is safe.
+    if (!this._measureRequested.has(id)) {
+      this._measureRequested.add(id);
+      el._op({ t: 'measure', id });
+    }
+    return () => {
+      const observers = this._sizeObservers.get(id);
+      if (observers === undefined) return;
+      observers.delete(cb);
+      if (observers.size === 0) {
+        this._sizeObservers.delete(id);
+        this._measureRequested.delete(id);
+        el._op({ t: 'unmeasure', id });
+      }
+    };
+  }
+
+  /**
+   * Store pushed rects and fire per-element observers — the `setRects`
+   * task calls this inside the instance's scope, so observer mutations
+   * emit ops and ride back in the task's return batch.
+   */
+  _notifyRects(rects: MeasuredRect[]): void {
+    for (const rect of rects) {
+      setInstanceRect(this.instance, rect);
+      const observers = this._sizeObservers.get(rect.id);
+      if (observers !== undefined) for (const cb of [...observers]) cb(rect);
+    }
+  }
+
+  /**
+   * The rect a geometry read on `el` may report: the element's own measured
+   * box when a setRects push arrived for it, else the pushed CONTAINER box
+   * when `el` is the root or was markContainer()ed (the old contract — a
+   * marked element claims "my box is the container's"), undefined otherwise
    * (also undefined when nothing has been pushed yet — reads return 0).
    */
-  _sizeFor(el: ProxyElement): { w: number; h: number } | undefined {
+  _rectFor(el: ProxyElement): { x: number; y: number; w: number; h: number } | undefined {
+    const measured = getInstanceRect(this.instance, el.instance.id);
+    if (measured !== undefined) return measured;
     if (!this._containerIds.has(el.instance.id)) return undefined;
-    return getInstanceSize(this.instance);
+    const size = getInstanceSize(this.instance);
+    return size === undefined ? undefined : { x: 0, y: 0, ...size };
   }
 
   onResize(cb: (w: number, h: number) => void): void {
@@ -288,7 +376,7 @@ export class InternalDocument implements ProxyDocument {
     if (self !== undefined) out.currentTarget = self;
     const id = payload.targetId;
     if (typeof id === 'number') {
-      const instance = instances.get(id);
+      const instance = lookupInstance(id);
       if (instance !== undefined) {
         const node = this._wrap(instance);
         // Reflect the dispatched form state into the SHADOW attrs —
@@ -307,6 +395,13 @@ export class InternalDocument implements ProxyDocument {
         out.target = node;
       }
     }
+    // Materialize relatedTarget the same way — over/out handlers walk it
+    // (zrender's isLocalEl climbs parentNode to the listener root) to tell
+    // "moved to a child" apart from "actually left".
+    if (typeof payload.relatedTargetId === 'number') {
+      const related = lookupInstance(payload.relatedTargetId);
+      if (related !== undefined) out.relatedTarget = this._wrap(related);
+    }
     if (out.composedPath === undefined) {
       const path: unknown[] = [];
       let n = out.target as ProxyNode | undefined;
@@ -521,11 +616,23 @@ export class InternalDocument implements ProxyDocument {
     return out;
   }
 
-  getComputedStyle(_el: ProxyElement): CSSStyleDeclaration {
-    this._warn('getComputedStyle');
-    // Every property reads ''; getPropertyValue('x') returns '' too.
-    return new Proxy({} as Record<string, unknown>, {
-      get: (_t, prop) => (prop === 'getPropertyValue' ? () => '' : ''),
+  getComputedStyle(el: ProxyElement): CSSStyleDeclaration {
+    // A measured box doubles as the computed box — 'width'/'height' are
+    // what layout libraries actually read (zrender's parseInt(stl.width),
+    // echarts' elementFromPoint-free sizing). Every other property stays
+    // the honest empty string.
+    const rect = this._rectFor(el);
+    const w = rect === undefined ? '' : `${rect.w}px`;
+    const h = rect === undefined ? '' : `${rect.h}px`;
+    if (rect === undefined) {
+      this._requestMeasure(el);
+      this._warn('getComputedStyle');
+    }
+    return new Proxy({ width: w, height: h } as Record<string, unknown>, {
+      get: (t, prop) =>
+        prop === 'getPropertyValue'
+          ? (k: string): string => (k === 'width' ? w : k === 'height' ? h : '')
+          : (t[prop as string] ?? ''),
     }) as unknown as CSSStyleDeclaration;
   }
 
@@ -537,6 +644,8 @@ export class InternalDocument implements ProxyDocument {
     this._disposed = true;
     if (instanceDocs.get(this.instance) === this) instanceDocs.delete(this.instance);
     this._resizeHandlers.clear();
+    this._sizeObservers.clear();
+    this._measureRequested.clear();
     for (const hid of this._handlerIds) unregisterHandler(hid);
     this._handlerIds.clear();
   }

package/src/worker/dom/element.ts

@@ -16,6 +16,7 @@ import type { EventPayload, Op } from '../../ops';
 import {
   ProxyNode,
   ProxyFragment,
+  camelize,
   listenerOptsForWire,
   normalizeListenerOptions,
   type ProxyEventHandler,
@@ -437,16 +438,18 @@ export class ProxyElement extends ProxyNode {
     return copy;
   }
 
-  /* ── Pushed-size geometry. The ONLY measured box is the island container:
-   *  `doc.body`/`documentElement` and markContainer()ed elements report the
-   *  last setSize push; everything else keeps the honest 0 and warns once
-   *  per document per API. A marked element reports the CONTAINER's box —
-   *  the driver can only measure the island's root, so "marked" means
-   *  "pretend my box is the container's", which is only honest for elements
-   *  that genuinely fill it. ── */
+  /* ── Geometry. Two pushed channels: the island container's setSize box
+   *  (root + markContainer()ed elements) and per-element setRects boxes for
+   *  elements the worker asked the driver to measure — via doc.observeSize,
+   *  a ResizeObserver shim, or lazily by any of the reads below. Until the
+   *  first push lands a read keeps the honest 0 and warns once per doc per
+   *  API; a marked element keeps reporting the CONTAINER's box — "marked"
+   *  still means "pretend my box is the container's" and is only honest
+   *  for elements that genuinely fill it. ── */
   getBoundingClientRect(): DOMRect {
-    const size = this.doc._sizeFor(this);
-    if (size === undefined) {
+    const rect = this.doc._rectFor(this);
+    if (rect === undefined) {
+      this.doc._requestMeasure(this);
       this.doc._warn('getBoundingClientRect');
       return {
         x: 0, y: 0, top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0,
@@ -454,22 +457,23 @@ export class ProxyElement extends ProxyNode {
       } as DOMRect;
     }
     return {
-      x: 0, y: 0, top: 0, left: 0, right: size.w, bottom: size.h,
-      width: size.w, height: size.h,
+      x: rect.x, y: rect.y, top: rect.y, left: rect.x,
+      right: rect.x + rect.w, bottom: rect.y + rect.h,
+      width: rect.w, height: rect.h,
       toJSON: () => ({}),
     } as DOMRect;
   }
   get clientWidth(): number {
-    return this._geom('clientWidth', (s) => s.w);
+    return this._geom('clientWidth', (r) => r.w);
   }
   get clientHeight(): number {
-    return this._geom('clientHeight', (s) => s.h);
+    return this._geom('clientHeight', (r) => r.h);
   }
   get offsetWidth(): number {
-    return this._geom('offsetWidth', (s) => s.w);
+    return this._geom('offsetWidth', (r) => r.w);
   }
   get offsetHeight(): number {
-    return this._geom('offsetHeight', (s) => s.h);
+    return this._geom('offsetHeight', (r) => r.h);
   }
   /** Border edge widths — honestly 0 (the pushed box doesn't measure borders). */
   get clientLeft(): number {
@@ -489,25 +493,25 @@ export class ProxyElement extends ProxyNode {
     return null;
   }
   get scrollTop(): number {
-    this.doc._warn('scrollTop');
+    this.doc._scrollWarn('scrollTop');
     return 0;
   }
   set scrollTop(_v: number) {
-    this.doc._warn('scrollTop');
+    this.doc._scrollWarn('scrollTop');
   }
   get scrollLeft(): number {
-    this.doc._warn('scrollLeft');
+    this.doc._scrollWarn('scrollLeft');
     return 0;
   }
   set scrollLeft(_v: number) {
-    this.doc._warn('scrollLeft');
+    this.doc._scrollWarn('scrollLeft');
   }
   get scrollHeight(): number {
-    this.doc._warn('scrollHeight');
+    this.doc._scrollWarn('scrollHeight');
     return 0;
   }
   get scrollWidth(): number {
-    this.doc._warn('scrollWidth');
+    this.doc._scrollWarn('scrollWidth');
     return 0;
   }
 
@@ -622,21 +626,51 @@ export class ProxyElement extends ProxyNode {
   }
 
   /* internals */
-  /** Geometry read shared by the pushed-size getters above. */
-  _geom(feature: string, pick: (size: { w: number; h: number }) => number): number {
-    const size = this.doc._sizeFor(this);
-    if (size === undefined) {
+  /** Geometry read shared by the size getters above. */
+  _geom(
+    feature: string,
+    pick: (rect: { x: number; y: number; w: number; h: number }) => number,
+  ): number {
+    const rect = this.doc._rectFor(this);
+    if (rect === undefined) {
+      // Lazy measure request — the read keeps its honest 0 for now, but
+      // the driver's setRects push makes later reads real (and observeSize
+      // subscribers fire).
+      this.doc._requestMeasure(this);
       this.doc._warn(feature);
       return 0;
     }
-    return pick(size);
+    return pick(rect);
   }
   _writeStyle(key: string, value: string): void {
     this.doc._assertAlive();
+    // '' is the protocol's "clear this key" — tracked as an empty entry so
+    // `key in style` stays true for touched props, like real CSSOM.
     if (this._styleProps[key] === value) return;
     this._styleProps[key] = value;
     this._op({ t: 'style', id: this.instance.id, props: { [key]: value } });
   }
+
+  /** style.cssText — a FULL replace, not another key. Parse the declarations
+   *  and write each through the dedup path; keys absent from the new text
+   *  clear. Storing the text under a 'cssText' key left stale per-key values
+   *  that deduped real writes away (a hide's `visibility:hidden` stuck after
+   *  a show's cssText replay). */
+  _replaceStyleText(cssText: string): void {
+    const next = new Map<string, string>();
+    for (const decl of cssText.split(';')) {
+      const sep = decl.indexOf(':');
+      if (sep <= 0) continue;
+      const raw = decl.slice(0, sep).trim();
+      const value = decl.slice(sep + 1).trim();
+      if (raw === '' || value === '') continue;
+      next.set(raw.startsWith('--') ? raw : camelize(raw), value);
+    }
+    for (const key of Object.keys(this._styleProps)) {
+      if (!next.has(key)) this._writeStyle(key, '');
+    }
+    for (const [key, value] of next) this._writeStyle(key, value);
+  }
   private _setAttr(name: string, value: string): void {
     this.doc._assertAlive();
     const v = String(value);

package/src/worker/dom/html.ts

@@ -94,6 +94,7 @@ export function serializeNode(node: ProxyNode): string {
   const tag = node.instance.type;
   const attrs = new Map(node._attrs);
   const styleText = Object.entries(node._styleProps)
+    .filter(([, v]) => v !== '')
     .map(([k, v]) => `${hyphenate(k)}: ${v};`)
     .join(' ');
   if (styleText !== '') attrs.set('style', styleText);

package/src/worker/dom/node.ts

@@ -1,6 +1,8 @@
 import {
   allocId,
+  attachInstance,
   bumpOpsVersion,
+  detachInstance,
   getActiveInstance,
   getLastActiveInstance,
   getInstanceSize,
@@ -251,11 +253,21 @@ export class ProxyNode {
       this._children.splice(index, 0, child);
       if (ref.instance.id > 0) beforeId = ref.instance.id;
     }
+    // Restore instance/handler records if this child was previously
+    // tombstoned by a removeChild — re-append is legal (renderers reorder).
+    child._attachRecords();
     // Phantom nodes (fragments, shadow-only texts) have NEGATIVE ids and no
     // driver-side counterpart — skip ops when either endpoint is phantom.
     // Id 0 is NOT phantom: it's the island's real root container.
     if (this.instance.id >= 0 && child.instance.id > 0) {
       this._op({ t: 'append', parent: this.instance.id, child: child.instance.id, before: beforeId });
+      // A `remove` op unobserved this element driver-side — if it was still
+      // measure-requested worker-side, re-request so the driver's RO
+      // re-arms on the fresh attachment. Subtree descendants keep their
+      // driver-side observation (only the removed ROOT unobserved).
+      if (child.nodeType === 1 && this.doc._measureRequested.has(child.instance.id)) {
+        child._op({ t: 'measure', id: child.instance.id });
+      }
     }
     return child;
   }
@@ -268,6 +280,9 @@ export class ProxyNode {
     }
     this._children.splice(index, 1);
     child._parent = null;
+    // Tombstone the subtree's instance/handler records — without this the
+    // shared maps retain every node ever created. Re-append restores them.
+    child._detachRecords();
     if (this.instance.id >= 0 && child.instance.id > 0) {
       this._op({ t: 'remove', child: child.instance.id });
     }
@@ -351,6 +366,27 @@ export class ProxyNode {
     if (i !== -1) this._children.splice(i, 1);
     child._parent = null;
   }
+
+  /** Handler ids this node's records own: addEventListener hids (element
+   *  subclass only) plus the prop-listener slots on the instance record. */
+  _recordHandlerIds(): number[] {
+    const listeners = (this as { _listeners?: Array<{ hid: number }> })._listeners;
+    const slots = (this.instance as ElementInstance).listenerSlots;
+    return [...(listeners?.map((l) => l.hid) ?? []), ...Object.values(slots ?? {})];
+  }
+
+  /** Tombstone this subtree's instance/handler records (removeChild). */
+  _detachRecords(): void {
+    if (this.instance.id > 0) detachInstance(this.instance.id, this._recordHandlerIds());
+    for (const c of this._children) c._detachRecords();
+  }
+
+  /** Restore this subtree's records on re-append (idempotent — a live node
+   *  is simply not in the tombstone maps). */
+  _attachRecords(): void {
+    if (this.instance.id > 0) attachInstance(this.instance.id, this._recordHandlerIds());
+    for (const c of this._children) c._attachRecords();
+  }
 }
 
 /* ── ProxyText ─────────────────────────────────────────────────────────── */

package/src/worker/dom/resizeObserver.ts

@@ -0,0 +1,104 @@
+import type { MeasuredRect } from '../../ops';
+import {
+  activeInstanceDoc,
+  ambientDoc,
+  type InternalDocument,
+} from './document';
+import { ProxyElement } from './element';
+import type { HostInstance } from '../instance';
+
+/**
+ * A `ResizeObserver` over the pushed-measure channel — the class
+ * `globalThis.ResizeObserver`/`window.ResizeObserver` resolve to inside an
+ * island instance. Each `observe(el)` registers a `doc.observeSize`
+ * subscription (which emits the `measure` op once per element); each pushed
+ * rect invokes the callback with a single-entry batch, matching how real RO
+ * delivers per-element observations (the driver already batches the wire
+ * push, the DOM API just doesn't promise same-batch grouping).
+ *
+ * Entries carry the fields layout libraries read: `target`, `contentRect`
+ * (the measured box), and `borderBoxSize`/`contentBoxSize`/`devicePixelContentBoxSize`
+ * arrays (echarts zrender, recharts' ResponsiveContainer, and RO-polyfill-
+ * style code paths). Box options are accepted but ignored — the channel
+ * delivers one box and it answers both reads.
+ *
+ * No doc resolvable (module-scope or post-unmount construction) means there
+ * is nothing that could ever be measured — observe() silently no-ops rather
+ * than pinning a foreign document, the same resolution rule the
+ * `document`/`window` global dispatchers use.
+ */
+export class ProxyResizeObserver {
+  private readonly _callback: ResizeObserverCallback;
+  /** proxy el → the observeSize detacher (unobserve/disconnect paths). */
+  private readonly _targets = new Map<ProxyElement, () => void>();
+
+  constructor(callback: ResizeObserverCallback) {
+    this._callback = callback;
+  }
+
+  observe(target: unknown, _options?: ResizeObserverOptions): void {
+    const doc = activeInstanceDoc() ?? ambientDoc();
+    if (doc === undefined) return;
+    const el = toProxyElement(doc, target);
+    if (el === null || this._targets.has(el)) return;
+    const unobserve = (doc as InternalDocument).observeSize(el, (rect) => {
+      this._callback(
+        [entryFor(el, rect)] as unknown as ResizeObserverEntry[],
+        this as unknown as ResizeObserver,
+      );
+    });
+    this._targets.set(el, unobserve);
+  }
+
+  unobserve(target: unknown): void {
+    const doc = activeInstanceDoc() ?? ambientDoc();
+    if (doc === undefined) return;
+    const el = toProxyElement(doc, target);
+    if (el === null) return;
+    this._targets.get(el)?.();
+    this._targets.delete(el);
+  }
+
+  disconnect(): void {
+    for (const unobserve of this._targets.values()) unobserve();
+    this._targets.clear();
+  }
+}
+
+/** Normalize an observe target — React/framework refs arrive adopted
+ *  (ProxyElement) already, but a raw HostInstance record reached through a
+ *  portal/instance lookup adopts on the spot. Anything else can't be
+ *  measured. */
+const toProxyElement = (doc: InternalDocument, target: unknown): ProxyElement | null => {
+  if (target instanceof ProxyElement) return target;
+  if (
+    target !== null &&
+    typeof target === 'object' &&
+    (target as HostInstance).kind === 'element'
+  ) {
+    const adopted = doc.adopt(target as HostInstance);
+    return adopted instanceof ProxyElement ? adopted : null;
+  }
+  return null;
+};
+
+/** The per-push entry: measured box as contentRect plus the *BoxSize
+ *  triple libraries feature-probe for. `target` is the proxy element so
+ *  handlers can correlate against their own refs. */
+const entryFor = (el: ProxyElement, rect: MeasuredRect): Record<string, unknown> => ({
+  target: el,
+  contentRect: {
+    x: rect.x,
+    y: rect.y,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.w,
+    bottom: rect.y + rect.h,
+    width: rect.w,
+    height: rect.h,
+    toJSON: () => ({}),
+  },
+  borderBoxSize: [{ inlineSize: rect.w, blockSize: rect.h }],
+  contentBoxSize: [{ inlineSize: rect.w, blockSize: rect.h }],
+  devicePixelContentBoxSize: [{ inlineSize: rect.w, blockSize: rect.h }],
+});

package/src/worker/dom/window.ts

@@ -23,6 +23,7 @@ import {
   type ProxyDocument,
 } from './document';
 import { ProxyElement } from './element';
+import { ProxyResizeObserver } from './resizeObserver';
 import {
   ProxyNode,
   ProxyText,
@@ -58,6 +59,9 @@ export interface WindowShim {
   ): number;
   clearInterval(id?: number): void;
   getComputedStyle(el: unknown): Record<string, never>;
+  /** ResizeObserver over the pushed-measure channel — observe() registers
+   *  a doc.observeSize subscription, pushed rects arrive as entries. */
+  ResizeObserver: typeof ProxyResizeObserver;
   /** Media queries can't be answered worker-side — always `matches: false`. */
   matchMedia(query: string): MediaQueryList;
   addEventListener(
@@ -251,9 +255,14 @@ const buildWindowFacade = (internal: InternalDocument): WindowFacadeBundle => {
       intervals.delete(id);
       globalClearInterval(id);
     },
-    // No measurement channel — an empty declaration, same honesty rule as
-    // doc.getComputedStyle (which warns once); the facade stays silent.
-    getComputedStyle: () => ({}),
+    // Delegates to doc.getComputedStyle — measured elements report real
+    // width/height ('NNpx'), the unmeasured path warns once doc-side.
+    getComputedStyle: (el: unknown) =>
+      (el instanceof ProxyElement ? internal.getComputedStyle(el) : {}) as Record<string, never>,
+    // The measure channel as a DOM-standard observer — chart/map libraries
+    // that size off ResizeObserver (echarts, recharts ResponsiveContainer)
+    // get real pushed boxes unmodified.
+    ResizeObserver: ProxyResizeObserver,
     // No preference/quiz surface exists worker-side — media queries never
     // match. The shape is complete enough for feature-detection code.
     matchMedia: (query: string) =>
@@ -356,6 +365,7 @@ export function installInstanceDispatcher(): void {
   const prevComment = g.Comment;
   const prevMedia = g.HTMLMediaElement;
   const prevCustomElements = g.customElements;
+  const prevResizeObserver = g.ResizeObserver;
   // Explicit assignments override the fallback (never the in-instance doc) —
   // keeps pre-dispatcher semantics for out-of-instance code, and lets test
   // harnesses/suites restore globals by plain assignment.
@@ -438,6 +448,9 @@ export function installInstanceDispatcher(): void {
     prevCustomElements !== undefined ? prevCustomElements : CUSTOM_ELEMENTS_STUB,
     prevCustomElements,
   );
+  // A REAL ResizeObserver (happy-dom tests) keeps serving out-of-instance
+  // code; in-instance resolves to the measure-channel shim.
+  installClassGlobal('ResizeObserver', ProxyResizeObserver, prevResizeObserver);
 }
 
 /**
@@ -492,6 +505,7 @@ export function installDomShim(doc: ProxyDocument): () => void {
   const prevComment = g.Comment;
   const prevMedia = g.HTMLMediaElement;
   const prevCustomElements = g.customElements;
+  const prevResizeObserver = g.ResizeObserver;
 
   // The installed document becomes the ambient one for out-of-instance
   // readers: the explicit assignment wins the dispatcher's resolution,
@@ -506,6 +520,7 @@ export function installDomShim(doc: ProxyDocument): () => void {
   g.Comment = ProxyComment;
   if (typeof g.HTMLMediaElement !== 'function') g.HTMLMediaElement = HTML_MEDIA_STUB;
   if (g.customElements === undefined) g.customElements = CUSTOM_ELEMENTS_STUB;
+  if (g.ResizeObserver === undefined) g.ResizeObserver = ProxyResizeObserver;
 
   const uninstall = (): void => {
     bundle.teardown();
@@ -518,6 +533,7 @@ export function installDomShim(doc: ProxyDocument): () => void {
     g.Comment = prevComment;
     g.HTMLMediaElement = prevMedia;
     g.customElements = prevCustomElements;
+    g.ResizeObserver = prevResizeObserver;
     markInstanceActive(prevInstance);
     if (activeShimUninstall === uninstall) activeShimUninstall = null;
   };

package/src/worker/index.ts

@@ -69,6 +69,7 @@ export {
   ProxyElement,
   ProxyFragment,
   ProxyNode,
+  ProxyResizeObserver,
   ProxyText,
   docForInstance,
 } from './proxyDom';
@@ -82,7 +83,7 @@ export type {
   WireListenerOpts,
 } from './proxyDom';
 
-export type { EventPayload, IslandWorkerMethods, Op, WireProps } from '../ops';
+export type { EventPayload, IslandWorkerMethods, MeasuredRect, Op, WireProps } from '../ops';
 export { isEventRef } from '../ops';
 export { renderMemory } from '../memory';
 export type { DoorbellSpec } from '../memory';