@perspective-dev/viewer-charts 4.5.2 → 5.0.0

package/src/ts/plugin/plugin.ts

@@ -154,7 +154,6 @@ export class HTMLPerspectiveViewerWebGLPluginElement
     private _renderer: RendererTransport | null = null;
     private _rendererPromise: Promise<RendererTransport> | null = null;
     private _rawEventForwarder: RawEventForwarder | null = null;
-    private _generation = 0;
     private _resetClickAbort: AbortController | null = null;
 
     /**
@@ -285,8 +284,7 @@ export class HTMLPerspectiveViewerWebGLPluginElement
         // is the dispose signal: if `this._rendererPromise` no longer
         // points at *this* build when it resolves, the element was
         // deleted (or a reconnect started a newer build) and we destroy
-        // the orphan instead of adopting it. Promise identity — not
-        // `_generation`, which every `draw`/`update` bumps — is the
+        // the orphan instead of adopting it. Promise identity is the
         // right token: a rapid draw→update must NOT tear down the
         // single in-flight build it shares via this memoized promise.
         const p: Promise<RendererTransport> = this._buildRenderer(view).then(
@@ -353,11 +351,16 @@ export class HTMLPerspectiveViewerWebGLPluginElement
 
     private async _buildRenderer(view: View): Promise<RendererTransport> {
         const viewer = this.parentElement as HTMLPerspectiveViewerElement;
-        const client = await viewer.getClient();
+        // This chart's own panel (its `slot`). Used to scope the client/table
+        // to THIS panel rather than the host's active/seed panel (the bare
+        // getClient()/getTable() resolve element-wide in a multi-panel viewer),
+        // and to tag the dispatched interaction events with their source panel.
+        const panel = this.getAttribute("slot") ?? undefined;
+        const client = await viewer.getClient({ panel });
         const viewer_class = customElements.get("perspective-viewer");
         const clientWasm = viewer_class.get_wasm_module();
         const clientWorkerURL = viewer_class.get_worker_url();
-        const table = await viewer?.getTable?.();
+        const table = await viewer?.getTable?.({ panel });
         const tableName: string | undefined = table
             ? await table.get_name()
             : undefined;
@@ -370,6 +373,7 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             client,
             view,
             tableName,
+            panel,
             clientWorkerURL,
             clientWasm,
             chartTag: this._chartType.tag,
@@ -553,8 +557,16 @@ export class HTMLPerspectiveViewerWebGLPluginElement
         return this._drawImpl(view);
     }
 
+    /**
+     * Shared body of `draw` / `update`. No re-entrancy guard: the host
+     * serializes every rendering call (`draw`, `update`, `render`,
+     * `resize`) and `delete` on its per-renderer draw lock, so this
+     * method never overlaps itself or a teardown. The one exception —
+     * an external DOM disconnect `delete()`ing the element mid-draw —
+     * is absorbed by `RendererTransport`, whose post-`destroy()`
+     * requests settle immediately instead of pending forever.
+     */
     private async _drawImpl(view: View): Promise<void> {
-        const gen = ++this._generation;
         let renderer: RendererTransport;
         try {
             renderer = await this._ensureRenderer(view);
@@ -564,19 +576,17 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             return;
         }
 
-        if (this._generation !== gen) {
-            return;
-        }
-
         renderer.setView(view);
         renderer.setBufferMaxCapacity(this._chartType.max_cells);
+        const panel = this.getAttribute("slot") ?? undefined;
         const viewer = this
             .parentElement as HTMLPerspectiveViewerElement | null;
-        const viewerConfig = (await viewer?.getViewConfig?.()) ?? {};
-        if (this._generation !== gen) {
+
+        if (viewer === null) {
             return;
         }
 
+        const viewerConfig = await viewer.getViewConfig({ panel });
         await renderer.loadAndRender({
             viewerConfig: {
                 group_by: viewerConfig?.group_by ?? [],
@@ -588,17 +598,78 @@ export class HTMLPerspectiveViewerWebGLPluginElement
     }
 
     async clear(): Promise<void> {
-        this._generation++;
         this._renderer?.clear();
     }
 
     async resize(): Promise<void> {
-        this._renderer?.resize();
+        // Hidden (an unslotted tab-stack panel, a `display: none` host):
+        // the 0×0 rect a hidden element reports would resize the worker
+        // canvas to zero — CLEARING the retained frame, so the next
+        // activation repaints from blank (the two-stage tab-switch
+        // artifact). Skip instead and keep the last frame for an instant,
+        // single-blit reveal — mirroring the datagrid's guard. The host's
+        // activation nudge is also a `resize()`, so a hidden panel's nudge
+        // is free by the same check.
+        if (!this.isConnected || this.offsetParent == null) {
+            return;
+        }
+
+        // AWAITED to the resized frame's PRESENT (the worker's
+        // `resizeAck`) — the host's presize protocol style-overrides
+        // this element to its target box and holds the layout commit on
+        // this promise, so resolving at message-post would commit the
+        // settings-pane layout against the old-dimensions bitmap (the
+        // aspect-ratio warp the datagrid's synchronous resize never
+        // shows).
+        await this._renderer?.resize();
+    }
+
+    /**
+     * OPTIONAL host presize protocol: render at the TARGET element box
+     * `(width, height)` — the box the host's pending layout commit will
+     * produce — holding the resulting frame offscreen, so nothing on
+     * screen changes during the round-trip. Resolves, once the resized
+     * frame is staged, to a present closure; the host calls it in the
+     * same task as the layout commit, landing geometry and pixels in
+     * one paint. Plugins without this method get the host's held
+     * style-override presize path instead.
+     */
+    async presize(width: number, height: number): Promise<(() => void) | void> {
+        if (
+            !this.isConnected ||
+            this.offsetParent == null ||
+            !this._renderer ||
+            !this._glCanvas
+        ) {
+            return;
+        }
+
+        // Target GL-canvas box = its current box shifted by the element's
+        // box delta — the chrome between the element edge and the canvas
+        // is constant across a resize.
+        const hostRect = this.getBoundingClientRect();
+        const glRect = this._glCanvas.getBoundingClientRect();
+        return await this._renderer.presize(
+            Math.max(0, glRect.width + (width - hostRect.width)),
+            Math.max(0, glRect.height + (height - hostRect.height)),
+        );
     }
 
     restyle() {
         this._renderer?.invalidateTheme();
-        return 5;
+    }
+
+    /**
+     * Clear any active selection state (pinned tooltip) WITHOUT emitting
+     * selection events — the host calls this when a global filter
+     * contributed by this panel's selection is removed from the global
+     * filter bar, so the pin can't outlive the filter it produced. The
+     * transport's `_lastInsertConfig` (remove-set memory) is deliberately
+     * RETAINED so a subsequent selection still replaces any leftover
+     * clauses rather than accumulating.
+     */
+    async deselect(): Promise<void> {
+        this._renderer?.deselect();
     }
 
     async render(view: View): Promise<Blob> {
@@ -627,7 +698,6 @@ export class HTMLPerspectiveViewerWebGLPluginElement
     }
 
     delete() {
-        this._generation++;
         if (this._rawEventForwarder) {
             this._rawEventForwarder.detach();
             this._rawEventForwarder = null;

package/src/ts/render/scheduler.ts

@@ -16,8 +16,8 @@ import type { WebGLContextManager } from "../webgl/context-manager";
  * Module-level render scheduler. The single entry point for driving a
  * chart frame. Every render-triggering caller — upload chunks, zoom /
  * pan, resize, theme invalidation, host-driven redraws — calls
- * `requestRender(glManager, fullRender)` and awaits the returned
- * promise.
+ * `requestRender(glManager, fullRender, render2D)` and awaits the
+ * returned promise.
  *
  * ## Guarantees
  *
@@ -51,9 +51,12 @@ import type { WebGLContextManager } from "../webgl/context-manager";
  *     begins, letting per-context GPU work overlap.
  *
  *   - **Phase 2 (parallel):** `Promise.all(snapshot.map(present))`
- *     where `present` does `await awaitGpuFence(); endFrame();
- *     resolve waiters`. Each entry's waiters resolve as soon as its
- *     own present completes — independent of other entries.
+ *     where `present` does `await awaitGpuFence(); render2D();
+ *     endFrame(); resolve waiters`. The `render2D()` step draws the 2D
+ *     layers (gridlines + chrome) only after the GPU fence, so the 2D
+ *     placeholder canvases don't present a frame ahead of the GL frame
+ *     on resize. Each entry's waiters resolve as soon as its own
+ *     present completes — independent of other entries.
  *
  * ## Failure modes
  *
@@ -78,6 +81,15 @@ import type { WebGLContextManager } from "../webgl/context-manager";
 interface Entry {
     glManager: WebGLContextManager;
     fullRender: () => void;
+    /**
+     * The chart's 2D-canvas draws (gridlines + chrome), split out of
+     * `fullRender` so they run *after* `awaitGpuFence` — see
+     * {@link present}. Deferring the 2D work past the GPU fence keeps
+     * the 2D placeholder canvases from pushing a resized frame to the
+     * compositor a frame ahead of the GL present (the GL/2D "distortion"
+     * on resize). Populated as captured closures during `fullRender`.
+     */
+    render2D: () => void;
     waiters: PromiseWithResolvers<void>[];
 }
 
@@ -105,25 +117,30 @@ const inFlight = new Set<WebGLContextManager>();
 const deferred = new Map<WebGLContextManager, (() => void)[]>();
 
 /**
- * Request a coalesced render of `glManager` whose body is
- * `fullRender`. Returns a promise that resolves when this entry's
- * Phase 2 (`awaitGpuFence` + `endFrame`) completes.
+ * Request a coalesced render of `glManager`. `fullRender` submits the
+ * GL commands (Phase 1, synchronous); `render2D` draws the 2D layers
+ * (gridlines + chrome) and runs in Phase 2 *after* `awaitGpuFence`, so
+ * the 2D canvases don't present ahead of the GL frame. Returns a
+ * promise that resolves when this entry's Phase 2 (`awaitGpuFence` +
+ * `render2D` + `endFrame`) completes.
  *
  * If a request is already pending for the same glManager, the new
- * call's `fullRender` closure replaces the prior one (latest call
- * wins; closures read chart state lazily so this is functionally a
- * no-op, but keeps the closure fresh) and the returned promise
- * resolves alongside the existing waiters.
+ * call's `fullRender` / `render2D` closures replace the prior ones
+ * (latest call wins; closures read chart state lazily so this is
+ * functionally a no-op, but keeps the closures fresh) and the returned
+ * promise resolves alongside the existing waiters.
  */
 export function requestRender(
     glManager: WebGLContextManager,
     fullRender: () => void,
+    render2D: () => void,
 ): Promise<void> {
     let entry = pending.get(glManager);
     if (entry) {
         entry.fullRender = fullRender;
+        entry.render2D = render2D;
     } else {
-        entry = { glManager, fullRender, waiters: [] };
+        entry = { glManager, fullRender, render2D, waiters: [] };
         pending.set(glManager, entry);
     }
 
@@ -354,6 +371,15 @@ async function present(entry: Entry): Promise<void> {
 
     try {
         await entry.glManager.awaitGpuFence();
+        // Draw the 2D layers (gridlines + chrome) only now that the GL
+        // frame's GPU work has completed. Issuing the 2D-canvas commands
+        // here — rather than inline in `fullRender` (Phase 1) — keeps the
+        // 2D placeholder canvases from pushing their resized frame to the
+        // compositor during the fence-wait yields, a frame ahead of the
+        // GL present. That early push is the visible GL/2D misalignment
+        // on resize. Failures fall through to the same present-failed
+        // path as the fence.
+        entry.render2D();
         entry.glManager.endFrame();
         for (const w of entry.waiters) {
             w.resolve();

package/src/ts/transport/protocol.ts

@@ -31,6 +31,7 @@ export type ControlMsg =
     | SetBufferMaxCapacityMsg
     | LoadAndRenderMsg
     | RedrawMsg
+    | DeselectMsg
     | ResizeMsg
     | ClearMsg
     | InvalidateThemeMsg
@@ -53,6 +54,7 @@ export type WorkerMsg =
     | UserClickMsg
     | UserSelectMsg
     | LoadAndRenderAckMsg
+    | ResizeAckMsg
     | FrameBitmapMsg
     | ErrorMsg;
 
@@ -300,13 +302,44 @@ export interface RedrawMsg {
     kind: "redraw";
 }
 
+/**
+ * Host → worker: silently clear the chart's selection state (pinned
+ * tooltip) — no `userSelect` reply, so the host filter-bar removal that
+ * triggered it can't echo back into the host's filter set. The worker's
+ * `TooltipController.dismiss()` posts `dismissTooltip` to tear down the
+ * host-side pinned artifact.
+ */
+export interface DeselectMsg {
+    kind: "deselect";
+}
+
+/**
+ * Host → worker: resize the chart to a new CSS box. Replied with
+ * {@link ResizeAckMsg} AFTER the resized frame PRESENTS — the host's
+ * `plugin.resize()` promise is the viewer's presize contract ("the
+ * plugin has repainted at the target box when this resolves"), so an
+ * ack at message-receipt would let the settings-pane layout commit
+ * against the old-dimensions bitmap (the aspect-ratio warp).
+ */
 export interface ResizeMsg {
     kind: "resize";
+    msgId: number;
     cssWidth: number;
     cssHeight: number;
     dpr: number;
 }
 
+/**
+ * Worker → host reply to a `ResizeMsg`, posted after the resized
+ * frame's present completes. Always sent — present failures and
+ * torn-down charts included — so the host's awaited promise resolves
+ * deterministically.
+ */
+export interface ResizeAckMsg {
+    kind: "resizeAck";
+    msgId: number;
+}
+
 export interface ClearMsg {
     kind: "clear";
 }

package/src/ts/transport/renderer-transport.ts

@@ -84,7 +84,11 @@ interface RendererHandle {
     terminate(): void;
 }
 
-type PendingRenderType = "saveZoom" | "loadAndRender" | "snapshotPng";
+type PendingRenderType =
+    | "saveZoom"
+    | "loadAndRender"
+    | "snapshotPng"
+    | "resize";
 interface PendingRenderRequest {
     kind: PendingRenderType;
     resolve: (v: any) => void;
@@ -110,11 +114,22 @@ interface PendingRenderRequest {
  */
 export class RendererTransport {
     private _handle: RendererHandle | null = null;
+
+    /**
+     * Set by {@link destroy}. Requests allocated after teardown settle
+     * immediately in `_allocPending` — `_post` is already a no-op once
+     * `_handle` is null, so a late request would otherwise never
+     * receive its reply and pend forever.
+     */
+    private _destroyed = false;
     private _proxyChannel: MessageChannel | null = null;
     private _proxySession: any = null;
     private _client: Client;
     private _view: View;
     private _tableName: string | undefined;
+    /** Source panel `slot`, tagged onto dispatched interaction events so the
+     * host can route them (master/detail, global filter) to the right panel. */
+    private _panel: string | undefined;
     private _clientWorkerURL: URL;
     private _clientWasm: WebAssembly.Module;
     private _chartTag: string;
@@ -158,6 +173,37 @@ export class RendererTransport {
      */
     private _displayCtx: CanvasRenderingContext2D | null = null;
 
+    /**
+     * Present-hold state for the staged-present presize protocol
+     * ({@link presize}). While holding, inbound `frameBitmap`s are
+     * STAGED (latest wins) instead of blitted, so the on-screen frame
+     * — old dimensions in the old, unchanged box — stays put until the
+     * host invokes the present closure `presize` resolved to, in the
+     * same task as its layout commit. Entered only by `presize`;
+     * exited by the present closure, by `presize`'s rejection path, or
+     * by `destroy` — every settle path releases the hold or hands the
+     * caller the release.
+     */
+    /**
+     * The last `(cssWidth, cssHeight, dpr)` posted to the worker — at init
+     * or any resize — i.e. the dimensions the worker has already rendered
+     * (or has an in-flight render for). {@link resize} short-circuits when
+     * its measurement matches (±0.5px, the presize protocol's own
+     * threshold): reactive resizes fan in from several host paths per
+     * layout transition (the post-commit fan-out, activation nudges, the
+     * fresh-restore tail), and every worker resize is an unconditional
+     * full re-render.
+     */
+    private _lastPostedSize: {
+        cssWidth: number;
+        cssHeight: number;
+        dpr: number;
+    } | null = null;
+
+    private _holdPresent = false;
+
+    private _stagedFrame: ImageBitmap | null = null;
+
     /**
      * Host-side sink for tooltip + cursor side-effects. The chart
      * inside the renderer calls into a `MessageHostSink` that posts
@@ -182,6 +228,7 @@ export class RendererTransport {
         client: Client;
         view: View;
         tableName?: string;
+        panel?: string;
         clientWasm: WebAssembly.Module;
         clientWorkerURL: URL;
         chartTag: string;
@@ -192,6 +239,7 @@ export class RendererTransport {
         this._client = opts.client;
         this._view = opts.view;
         this._tableName = opts.tableName;
+        this._panel = opts.panel;
         this._clientWorkerURL = opts.clientWorkerURL;
         this._clientWasm = opts.clientWasm;
         this._chartTag = opts.chartTag;
@@ -301,6 +349,11 @@ export class RendererTransport {
             precompileShaders: this._precompileShaders,
         };
 
+        this._lastPostedSize = {
+            cssWidth: rect.width,
+            cssHeight: rect.height,
+            dpr,
+        };
         this._handle = await this._createHandle(workerURL, initMsg);
         this._handle.addMessageListener((msg) =>
             this._handleRendererMsg(msg as WorkerMsg),
@@ -438,7 +491,8 @@ export class RendererTransport {
      * `loadAndRenderAck`. Per the worker's "resolve on stale"
      * contract, a mid-flight cancellation (a newer `loadAndRender`
      * superseding this one) still acks — the host's awaiter just
-     * resolves quietly.
+     * resolves quietly. Calls issued after `destroy()` resolve
+     * immediately (see `_allocPending`).
      */
     loadAndRender(opts: {
         viewerConfig: {
@@ -464,19 +518,96 @@ export class RendererTransport {
         this._post({ kind: "redraw" });
     }
 
-    resize(): void {
+    /**
+     * Silently clear the worker chart's selection state (pinned tooltip) —
+     * no selection events are emitted; the worker echoes `dismissTooltip`
+     * to drop the host-side pinned artifact. See `DeselectMsg`.
+     */
+    deselect(): void {
+        this._post({ kind: "deselect" });
+    }
+
+    /**
+     * Resize the chart to the GL canvas's CURRENT CSS box and resolve
+     * once the resized frame has PRESENTED (the worker's `resizeAck`) —
+     * not at message-post, which would let callers proceed while the
+     * old-dimensions bitmap is still on screen. Reactive geometry
+     * changes only; anticipated ones go through {@link presize}.
+     *
+     * A measurement matching {@link _lastPostedSize} resolves immediately
+     * WITHOUT a worker round trip: the worker has already rendered (or is
+     * presenting) that exact frame, and re-posting would be a full
+     * re-render of an identical bitmap.
+     */
+    resize(): Promise<void> {
         if (!this._hostGlCanvas) {
-            return;
+            return Promise.resolve();
         }
 
         const rect = this._hostGlCanvas.getBoundingClientRect();
         const dpr = window.devicePixelRatio || 1;
+        const last = this._lastPostedSize;
+        if (
+            last &&
+            Math.abs(last.cssWidth - rect.width) <= 0.5 &&
+            Math.abs(last.cssHeight - rect.height) <= 0.5 &&
+            last.dpr === dpr
+        ) {
+            return Promise.resolve();
+        }
+
+        return this._postResize(rect.width, rect.height);
+    }
+
+    /**
+     * Staged-present variant of {@link resize}: render at the given
+     * TARGET canvas CSS box (no measurement — the caller supplies the
+     * box the pending layout commit will produce), HOLDING the
+     * resulting frame (and any others that arrive meanwhile) offscreen
+     * instead of blitting, so nothing on screen changes. Resolves,
+     * once the resized frame is staged, to a present closure: calling
+     * it blits the latest staged frame and exits the hold — the host
+     * runs it in the same task as its layout commit so geometry and
+     * pixels land in one paint. On rejection (teardown) the hold is
+     * released here, so every settle path either frees the display or
+     * hands the caller the release.
+     */
+    presize(cssWidth: number, cssHeight: number): Promise<(() => void) | void> {
+        if (!this._hostGlCanvas) {
+            return Promise.resolve();
+        }
+
+        this._holdPresent = true;
+        return this._postResize(cssWidth, cssHeight).then(
+            () => () => this._presentStaged(),
+            (err) => {
+                this._presentStaged();
+                throw err;
+            },
+        );
+    }
+
+    private _postResize(cssWidth: number, cssHeight: number): Promise<void> {
+        const dpr = window.devicePixelRatio || 1;
+        const { id, promise } = this._allocPending<void>("resize");
+        this._lastPostedSize = { cssWidth, cssHeight, dpr };
         this._post({
             kind: "resize",
-            cssWidth: rect.width,
-            cssHeight: rect.height,
+            msgId: id,
+            cssWidth,
+            cssHeight,
             dpr,
         });
+        return promise;
+    }
+
+    private _presentStaged(): void {
+        this._holdPresent = false;
+        const staged = this._stagedFrame;
+        this._stagedFrame = null;
+        if (staged) {
+            this._drawFrameBitmap(staged);
+        }
     }
 
     clear() {
@@ -501,12 +632,39 @@ export class RendererTransport {
      * Allocate a pending request slot of the given `kind`. Returns the
      * id (encoded into the outgoing `ControlMsg`) and a promise that
      * resolves / rejects when the matching reply arrives or
-     * `destroy()` drains the table.
+     * `destroy()` drains the table. Requests issued *after* `destroy()`
+     * settle immediately with the same per-kind semantics as the drain.
      */
     private _allocPending<T>(kind: PendingRenderType): {
         id: number;
         promise: Promise<T>;
     } {
+        // A request issued after `destroy()` would never settle: `_post`
+        // no-ops with no handle, so no reply ever lands — and the host
+        // awaits `loadAndRender` while holding its per-renderer draw
+        // lock, so a pending-forever promise wedges that panel's lock
+        // permanently. (Reachable when an external DOM disconnect
+        // `delete()`s the element mid-draw; the host's own teardown
+        // paths are serialized behind the same lock.) Mirror the
+        // `destroy()` drain: `loadAndRender` resolves silently,
+        // reply-bearing kinds reject. The pre-attached no-op `catch`
+        // marks the rejection handled for fire-and-forget callers
+        // (`saveZoom`) without affecting real awaiters.
+        if (this._destroyed) {
+            if (kind === "loadAndRender") {
+                return {
+                    id: -1,
+                    promise: Promise.resolve(undefined as unknown as T),
+                };
+            }
+
+            const promise = Promise.reject<T>(
+                new Error("RendererTransport destroyed"),
+            );
+            promise.catch(() => {});
+            return { id: -1, promise };
+        }
+
         const id = ++this._pendingCounter;
         const promise = new Promise<T>((resolve, reject) => {
             this._pending.set(id, { kind, resolve, reject });
@@ -548,6 +706,7 @@ export class RendererTransport {
     }
 
     destroy(): void {
+        this._destroyed = true;
         this._post({ kind: "destroy" });
         if (this._proxySession) {
             this._proxySession.close().catch(() => {});
@@ -572,6 +731,9 @@ export class RendererTransport {
         // them, and so the GPU-backed 2D context can release earlier.
         this._hostGlCanvas = null;
         this._displayCtx = null;
+        this._holdPresent = false;
+        this._stagedFrame?.close();
+        this._stagedFrame = null;
 
         // Drain pending request promises with kind-aware semantics:
         //  - `loadAndRender` resolves silently (the host's awaited draw
@@ -633,7 +795,9 @@ export class RendererTransport {
                         {
                             bubbles: true,
                             composed: true,
-                            detail: msg.detail,
+                            // Tag with the source panel so a multi-panel host
+                            // can attribute the click to the right panel.
+                            detail: { ...msg.detail, panel: this._panel },
                         },
                     ),
                 );
@@ -658,6 +822,9 @@ export class RendererTransport {
                     removeConfigs as any,
                     insertConfigs as any,
                 );
+                // Tag with the source panel so the host's master/detail +
+                // global-filter routing can identify the originating panel.
+                detail.panel = this._panel;
                 this._dispatchOnViewer(
                     new CustomEvent<PerspectiveSelectDetail>(
                         "perspective-global-filter",
@@ -672,7 +839,13 @@ export class RendererTransport {
             }
 
             case "frameBitmap":
-                this._drawFrameBitmap(msg.bitmap);
+                if (this._holdPresent) {
+                    this._stagedFrame?.close();
+                    this._stagedFrame = msg.bitmap;
+                } else {
+                    this._drawFrameBitmap(msg.bitmap);
+                }
+
                 break;
             case "error":
                 this._rejectReady(new Error(msg.message));
@@ -680,6 +853,9 @@ export class RendererTransport {
             case "loadAndRenderAck":
                 this._resolvePending(msg.msgId, "loadAndRender", undefined);
                 break;
+            case "resizeAck":
+                this._resolvePending(msg.msgId, "resize", undefined);
+                break;
             case "snapshotPngReply":
                 this._resolvePending(msg.requestId, "snapshotPng", msg.blob);
                 break;

package/src/ts/webgl/instanced-attrs.ts

@@ -108,6 +108,12 @@ export function createQuadCornerBuffer(gl: GL): WebGLBuffer {
  * paint zero data). No-op return `true` when `attr` is negative
  * (optimized-out attribute — drawing the rest is still valid).
  *
+ * `firstInstance` byte-offsets the attribute pointer so the draw's
+ * instance 0 reads element `firstInstance` of the buffer — the WebGL
+ * substitute for a `baseInstance` draw parameter. Faceted renderers
+ * use it to draw a contiguous per-facet sub-range of a shared
+ * instance buffer.
+ *
  * Render-path uses `peek`, never `getOrCreate`: the latter recreates
  * with zero-initialized contents when `_totalCapacity` has grown past
  * the current buffer, which would wipe the previous draw's vertex
@@ -120,6 +126,7 @@ export function bindInstancedFloatAttr(
     attr: number,
     name: string,
     components: number,
+    firstInstance = 0,
 ): boolean {
     if (attr < 0) {
         return true;
@@ -133,7 +140,14 @@ export function bindInstancedFloatAttr(
     const gl: GL = glManager.gl;
     gl.bindBuffer(gl.ARRAY_BUFFER, buf.buffer);
     gl.enableVertexAttribArray(attr);
-    gl.vertexAttribPointer(attr, components, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribPointer(
+        attr,
+        components,
+        gl.FLOAT,
+        false,
+        0,
+        firstInstance * components * Float32Array.BYTES_PER_ELEMENT,
+    );
     instancing.setDivisor(attr, 1);
     return true;
 }