react-x11 2.44.0 → 2.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.44.0",
+  "version": "2.45.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -109,7 +109,7 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.25.0",
+    "@windowkit/appkit": "^0.27.0",
     "@windowkit/wayland": "^3.1.1",
     "@windowkit/win32": "^0.0.9",
     "dbus-native": "^0.16.0",

package/src/cocoa/app.js

@@ -1014,8 +1014,11 @@ export class CocoaApp {
         wnd?._shown?.(msg.seq);
       } else if (msg?.type === 'pane-rect') {
         pane.setPaneSize(msg.width, msg.height, msg.scale, msg.screen);
+        if (typeof msg.live === 'boolean') pane.setLive(msg.live);
         this._flushPaneOutbox();
         this._afterInput();
+      } else if (msg?.type === 'pane-live') {
+        pane.setLive(msg.live === true);
       } else if (msg?.type === 'pane-menu-answer') {
         const answer = this._paneMenus?.get(msg.menu);
         this._paneMenus?.delete(msg.menu);
@@ -1687,6 +1690,9 @@ export class CocoaApp {
     const wnd = this._window(ev);
     if (!wnd || wnd.destroyed) return;
     wnd.liveResizing = ev.phase === 'begin';
+    // and what lives in the window without being it hears: a `<Frame>`'s
+    // pane, which has no window of its own to be resized live
+    wnd.emit('liveresize', { live: wnd.liveResizing });
   }
 
   /**

package/src/cocoa/panehost.js

@@ -77,21 +77,30 @@ class PaneLayer {
   }
 
   /**
-   * Whether a pane's last frame is shown at its size in its layer until a
-   * frame of the layer's new size lands, or stretched to it. The host gives
-   * the layer its new size the moment the window lays out, and the pane's
-   * frame of that size comes a pane frame later: Core Animation stretches
-   * the frame it has to the new bounds meanwhile, and a page's left column
-   * was drawn scaled a little at every step of a window dragged wider, and
-   * then at its size again. A pane that keeps up has its frame shown at its
-   * size instead, its edge carried over what it does not cover yet
-   * (`_edgeProps`); one that falls behind the budget is stretched, which is
-   * the better picture for the long wait — a pane repainting at three
-   * frames a second shows a squeezed page, not a page and a smeared strip.
-   * The budget is the window's live-resize handshake's
-   * (`createRoot({ cocoa: { resizeWait } })`), how long a frame of a new
-   * size may take before the old one is shown in its place: 0 stretches
-   * always, as before.
+   * Whether a pane's last frame is shown at its size across its layer until
+   * a frame of the layer's new size lands, or stretched across it. The host
+   * gives the layer its new size the moment the window lays out, and the
+   * pane's frame of that size comes a pane frame later: Core Animation
+   * stretches the frame it has to the new bounds meanwhile, and a page's
+   * left column was drawn scaled a little at every step of a window dragged
+   * wider, and then at its size again. A pane that keeps up has its frame
+   * shown at its size instead, its edge carried over what it does not cover
+   * yet (`_edgeProps`); one that falls behind the budget is stretched
+   * across, which is the better picture for the long wait — a pane
+   * repainting at three frames a second shows a squeezed page, not a page
+   * and a smeared strip. The budget is the window's live-resize
+   * handshake's (`createRoot({ cocoa: { resizeWait } })`), how long a frame
+   * of a new size may take before the old one is shown in its place: 0
+   * stretches always, both ways, as before.
+   *
+   * Down the layer the frame is at its size whatever this says. A width
+   * moves where a page's lines break, and what comes is a page laid out
+   * again, which a squeezed one is nearer to than one cut off with a strip
+   * beside it. A height moves nothing a page lays out — its lines are as
+   * wide as they were, its blocks where they were — so what comes is the
+   * frame as it is with more of the page under it, and a frame stretched
+   * down was the page drawn too tall at every refresh of the wait, where
+   * at its size only the strip under it is not yet the page's.
    *
    * Behind is a pane whose frames come later than the budget, not one with
    * a size waiting that long. `<Frame>` sends a pane the newest size once
@@ -125,8 +134,11 @@ class PaneLayer {
    * carried over the rest (`contentsCenter`, the part of the contents that
    * stretches while everything else keeps its size) — the last column
    * across a window dragged wider, the last row down one dragged taller,
-   * and the corner pixel into the corner. Both rects are the whole when
-   * the frame is stretched, and when it is the layer's size.
+   * and the corner pixel into the corner. Across a pane that fell behind
+   * the frame is stretched, and down it is still at its size
+   * (`_anchoredNow`): the whole of each row stretched to the new width,
+   * cropped or with its last row carried down. Both rects are the whole
+   * when the frame is the layer's size, and at a budget of 0.
    *
    * Anchored by gravity alone, the strip the frame did not cover showed
    * whatever was under the pane, which is the `<Frame>`'s background: in
@@ -147,15 +159,19 @@ class PaneLayer {
     const rect = this._rect;
     let crop = null;
     let edge = null;
-    if (frame && rect && this._anchoredNow()) {
-      const w = Math.min(frame.width, rect.width);
+    const budget = this.app._resizeWait ?? RESIZE_WAIT_MS;
+    if (frame && rect && budget > 0) {
+      // across at its size while the pane keeps up, and down always; an
+      // axis stretched is shown whole, the frame's every column across
+      const across = this._anchoredNow();
+      const w = across ? Math.min(frame.width, rect.width) : frame.width;
       const h = Math.min(frame.height, rect.height);
       if (w < frame.width || h < frame.height) {
         crop = [0, 0, w / frame.width, h / frame.height];
       }
-      // in the shown part's own unit square; an axis that did not grow is
-      // all centre, stretched by one
-      const wider = rect.width > w;
+      // in the shown part's own unit square; an axis that did not grow, or
+      // is stretched, is all centre
+      const wider = across && rect.width > w;
       const taller = rect.height > h;
       if (wider || taller) {
         edge = [

package/src/cocoa/panewindow.js

@@ -30,6 +30,12 @@ import { BackendContext2D } from '../backend/context2d.js';
 // the pane drawing.
 const ANSWER_TIMEOUT_MS = 250;
 
+// Where a ring's slot with no buffer made yet ranks among the buffers a
+// frame may take (`_takeBack`): after every one done with and let go of,
+// ranked by their present's sequence number, and before one the
+// WindowServer still reads, ranked from 2 ** 32 up.
+const EMPTY_SLOT = 2 ** 32 - 1;
+
 let nextPaneId = 1;
 
 export class CocoaPaneWindow {
@@ -44,6 +50,8 @@ export class CocoaPaneWindow {
     // polls it through the pane's ref, so both spellings answer
     this.id = this.windowId;
     this.windowNumber = this.windowId;
+    // the host's word, which the pane has no AppKit to hear (`setLive`)
+    this.liveResizing = false;
     this.scale = app.scale ?? 2;
     // Device pixels, as every window's attributes are (`windowAttributes`
     // multiplies the props through once): the size the pane is born at,
@@ -106,6 +114,20 @@ export class CocoaPaneWindow {
    * a host that does not say. A move alone is a `resize` that `moved`, the
    * event a window's own move is, so what is anchored here follows it.
    */
+  /**
+   * Whether the window the pane is in is being resized live, as the host
+   * says (`pane-rect`, `pane-live`, src/frame/index.js): what a window's
+   * `liveResizing` is in a process of its own, where AppKit brackets the
+   * drag of its edge. Core defers a content floor's measurement while it
+   * is (src/nodes/window/size.js), and catches it up the frame after it
+   * ends; and it is announced as a window announces its own.
+   */
+  setLive(live) {
+    if (this.destroyed || this.liveResizing === live) return;
+    this.liveResizing = live;
+    this.emit('liveresize', { live });
+  }
+
   setPaneSize(width, height, scale, screen) {
     if (this.destroyed) return;
     if (scale) this.scale = scale;
@@ -261,6 +283,8 @@ export class CocoaPaneWindow {
     let done = false;
     for (let i = 0; i < this._ring.length; i += 1) {
       const s = this._ring[i];
+      // a slot with no buffer yet gets one, which nothing names
+      if (!s) return false;
       if (i === this._shownIndex || !this._done(s)) continue;
       if (!this._held(s)) return false;
       done = true;
@@ -354,6 +378,7 @@ export class CocoaPaneWindow {
     const release = this._native.releaseSurface;
     if (typeof release !== 'function') return;
     for (const s of ring) {
+      if (!s) continue;
       if (s.presentedSeq > this._shownSeq) this._retired.push(s);
       else release.call(this._native, s.handle);
     }
@@ -407,6 +432,20 @@ export class CocoaPaneWindow {
     for (const s of retired) release.call(this._native, s.handle);
   }
 
+  /**
+   * A buffer of the ring, `w` by `h` device px, made the first time a frame
+   * takes its slot rather than with the ring. A drag resizes the pane a
+   * tick at a time and gives each size one frame, so a ring made whole was
+   * three buffers made and cleared for the one drawn into: Zen Garden 101
+   * in the browser example spent 4.4 ms of every 12 ms frame of a drag in
+   * `_ensureSurface`. Cleared where nothing is copied over it.
+   */
+  _newBuffer(w, h, clear) {
+    const s = this._native.createSurfaceIOSurface(w, h, this.scale, true);
+    if (clear) this._native.ctxClearRect(s.handle, 0, 0, w, h);
+    return s;
+  }
+
   _ensureSurface() {
     const w = this.width;
     const h = this.height;
@@ -417,12 +456,10 @@ export class CocoaPaneWindow {
     ) {
       const hadSurface = Boolean(this._ring);
       this._releaseRing();
-      this._ring = [];
-      for (let i = 0; i < CocoaPaneWindow.RING; i += 1) {
-        const s = this._native.createSurfaceIOSurface(w, h, this.scale, true);
-        this._native.ctxClearRect(s.handle, 0, 0, w, h);
-        this._ring.push(s);
-      }
+      // the buffer this frame draws into, and the rest of the ring as a
+      // frame first takes it (`_takeBack`)
+      this._ring = new Array(CocoaPaneWindow.RING).fill(null);
+      this._ring[0] = this._newBuffer(w, h, true);
       this._drawIndex = 0;
       this._shownIndex = -1;
       this._native.surfaceLock(this._ring[0].handle);
@@ -478,6 +515,15 @@ export class CocoaPaneWindow {
     for (let i = 0; i < ring.length; i += 1) {
       const s = ring[i];
       if (s === last) continue;
+      // a slot no buffer has been made for yet: after one let go of, which
+      // costs nothing to take, and before any the WindowServer still reads
+      if (!s) {
+        if (EMPTY_SLOT < rank) {
+          rank = EMPTY_SLOT;
+          pick = i;
+        }
+        continue;
+      }
       // done and let go of, then done, then on its way, then on the layer:
       // the oldest of the best — but of the done, the one the screen showed
       // before the host's latest answers last
@@ -494,7 +540,13 @@ export class CocoaPaneWindow {
         pick = i;
       }
     }
-    const back = ring[pick];
+    // what the frame just presented is copied over whole, below, and only a
+    // slot with none to copy is cleared
+    const back = (ring[pick] ??= this._newBuffer(
+      this._surfaceSize.width,
+      this._surfaceSize.height,
+      !last,
+    ));
     this._drawIndex = pick;
     this._surface = back.handle;
     // a different native surface owns the graphics state now — the context

package/src/cocoa/window.js

@@ -278,6 +278,12 @@ export class CocoaWindow {
     let list = this._handlers.get(name);
     if (!list) this._handlers.set(name, (list = []));
     list.push(fn);
+    // and the way to stop listening, for a listener that goes before the
+    // window does (`<Frame>`'s, for `liveresize`)
+    return () => {
+      const at = list.indexOf(fn);
+      if (at >= 0) list.splice(at, 1);
+    };
   }
 
   emit(name, ev) {

package/src/frame/index.js

@@ -574,6 +574,20 @@ function PaneHostView({
     let acks = false;
     let inFlight = false;
     let waiting = null;
+    // And whether the window is being resized live — AppKit's drag of its
+    // edge, from its begin to its end (`liveResizing`) — which the pane
+    // has no window to hear. Core defers measuring a content floor for a
+    // drag's length and catches it up after it (src/nodes/window/size.js),
+    // and an element puts off what it would rather do once the drag ends:
+    // a pane measured its floors at every step, a document a pixel wide
+    // among them, and laid a document out whole at every rest of the drag.
+    // With every rect, and on its own where only that changed — the end
+    // of a drag comes after its last size.
+    const hostWindow = node.root?.window;
+    const liveNow = () => hostWindow?.liveResizing === true;
+    const offLive = hostWindow?.on?.('liveresize', (ev) =>
+      s.trySend?.({ type: 'pane-live', live: ev?.live === true }),
+    );
     const transmit = (rect) => {
       sent = rect;
       s.trySend?.({
@@ -581,6 +595,7 @@ function PaneHostView({
         width: rect.width,
         height: rect.height,
         scale: rect.scale,
+        live: liveNow(),
         ...(rect.screen && { screen: rect.screen }),
       });
       if (!acks) return;
@@ -685,6 +700,7 @@ function PaneHostView({
       waiting = null;
       offAnchor?.();
       offFocus?.();
+      if (typeof offLive === 'function') offLive();
       node.defaultCursor = undefined;
       node.root?.events?.refreshCursor();
       node.absolutize = origAbsolutize;

package/src/index.d.ts

@@ -292,8 +292,9 @@ export interface RootOptions {
    * the frame is painted on another thread (50 by default; 0 lets the edge
    * move without waiting). A `<Frame>` pane's frames of a new size are held
    * to it as well: within it, the pane's last frame stays at its size while
-   * the next comes, and past it, it is stretched to the pane's new size, as
-   * every one is at 0.
+   * the next comes, and past it, it is stretched across to the pane's new
+   * width and stays at its size down it; at 0 every one is stretched both
+   * ways.
    * `screenPoll` is how often the screen layout is re-read while a
    * {@link useScreens} subscriber is mounted, in ms — 500 by default, 0 for
    * never. macOS has no event for a display plugged in, unplugged or

package/src/node.d.ts

@@ -750,6 +750,20 @@ export declare class Node {
    * each scroll the pane blits, after layout.
    */
   viewportFixedRects(): Rect[] | null;
+  /**
+   * What this element draws under the viewport of the scroll pane it is in
+   * moved by (dx, dy) device pixels, and what the viewport shows is to stay
+   * where it is on screen: the pane's offsets move by as much, in the
+   * layout pass running now, after it measures what it holds and before it
+   * places it (CSS Scroll Anchoring 1) — a document laid out again at
+   * another width, whose text above the fold broke into more lines or
+   * fewer. Asked of the nearest scroll pane; shifts in one pass add up.
+   * Ask from the layout pass (`measureContent`); asked outside one, the
+   * shift waits for the next and asks for it. A `scrollTo` made since the
+   * last pass drops it, a `scrollIntoView` lands after it, and the result
+   * is clamped as any scroll. Returns whether a pane took it.
+   */
+  anchorScrollBy(dx: number, dy: number): boolean;
   /**
    * How far this element's own drawing reaches past its box, in device
    * pixels on every side — 0, the default, for an element that stays inside

package/src/nodes/invalidate.js

@@ -137,6 +137,36 @@ export class NodeInvalidate {
     return null;
   }
 
+  /**
+   * What this element draws under the viewport of the scroll pane it is
+   * in moved by (dx, dy) device pixels, and what the viewport shows is to
+   * stay where it is on screen: the pane's offsets move by as much, in the
+   * layout pass running now, after it measures what it holds and before it
+   * places it (CSS Scroll Anchoring 1). A document laid out again at
+   * another width is the case: its text above the fold breaks into more
+   * lines or fewer, and the paragraph at the top of the viewport moves
+   * down or up the document by the difference — which, unanswered, scrolls
+   * the reader a page away from where they were.
+   *
+   * Asked of the nearest scroll pane, the one whose viewport the element
+   * is seen through; shifts asked of it in one pass add up. Ask from the
+   * layout pass — `measureContent`, or what it calls — where the pane
+   * places its content after; asked outside one, the shift waits for the
+   * next pass, and asks for it. A `scrollTo` the application made since
+   * the last pass drops it, since the shift was measured against the
+   * offsets before that scroll; a `scrollIntoView` lands after it; and the
+   * pane clamps the result to what it holds, as any scroll. Returns
+   * whether a pane took it: false where nothing scrolls the element.
+   */
+  anchorScrollBy(dx, dy) {
+    for (let n = this.parent; n; n = n.parent) {
+      if (typeof n._anchorScrollBy === 'function' && n.isScroller()) {
+        return n._anchorScrollBy(dx, dy);
+      }
+    }
+    return false;
+  }
+
   /**
    * How far this element's own drawing reaches past its box — device
    * pixels, on every side — or 0, the default, for one that stays inside

package/src/nodes/scrollable.js

@@ -330,6 +330,10 @@ export const Scrollable = (Base) =>
       // the viewport grew, under it. A browser fires `scroll` for each, so
       // `onScroll` hears of them too, once the pass is over.
       const from = { x: this.scrollX, y: this.scrollY };
+      // What the content asked to keep in place lands before them all
+      // (`anchorScrollBy`): it moved under the viewport in this pass, and
+      // a scroll anyone asks for is from where it shows what it did
+      this._applyAnchorShift();
       // A scrollTo held for this pass lands first, so a node asked into view
       // in the same frame is brought in from where that scroll put the pane:
       // the order the two have on a laid-out pane, where scrollTo applies at
@@ -607,6 +611,10 @@ export const Scrollable = (Base) =>
       }
       this.scrollX = next.x;
       this.scrollY = next.y;
+      // a scroll asked for since the last pass is where the pane goes: a
+      // shift the content asks for in the next was measured against the
+      // offsets before it (`_applyAnchorShift`)
+      this._scrolledSincePass = true;
       if (moved) this.props.onScroll?.(this._scrollEvent());
       // A scroll reflows this viewport's contents and nothing else, and the
       // viewport clips them, so the damage is this node's own rect. It is a
@@ -707,6 +715,47 @@ export const Scrollable = (Base) =>
       return true;
     }
 
+    /**
+     * The pane's half of `Node.anchorScrollBy`: a shift of the offsets the
+     * content asked for, added up until the pass applies it
+     * (`_applyAnchorShift`). The pass measures the content again, since
+     * what moved under the viewport moved by being laid out; one asked
+     * outside a pass asks for one.
+     */
+    _anchorScrollBy(dx, dy) {
+      if (!Number.isFinite(dx) || !Number.isFinite(dy)) return false;
+      if (dx === 0 && dy === 0) return true;
+      const shift = (this._anchorShift ??= { x: 0, y: 0 });
+      shift.x += dx;
+      shift.y += dy;
+      this._scrollMeasureDirty = true;
+      const root = this.root;
+      if (root && !root._inFlush) root.invalidate(true, this, 'scroll');
+      return true;
+    }
+
+    /**
+     * Apply the shift the content asked for (`_anchorScrollBy`), before
+     * anything else the pass moves the offsets by: on each axis it scrolls,
+     * the clamp after takes it into the extent just measured. Its
+     * `onScroll` and its claim of the viewport are the pass's, as for a
+     * held `scrollTo`. A scroll the application asked for since the last
+     * pass drops it: the shift was measured against the offsets before
+     * that scroll, which is where the application wants the pane now.
+     */
+    _applyAnchorShift() {
+      const shift = this._anchorShift;
+      const scrolled = this._scrolledSincePass === true;
+      this._scrolledSincePass = false;
+      if (!shift) return;
+      this._anchorShift = null;
+      if (scrolled) return;
+      // `scrollX` is a distance from the start in either direction, and
+      // content that moved towards the end is followed the same way
+      this.scrollX += this.direction === 'rtl' ? -shift.x : shift.x;
+      this.scrollY += shift.y;
+    }
+
     /**
      * Answer a held request (`_holdScrollTo`) against the extent this pass
      * has just measured: each held axis's base, clamped, then each step

package/src/nodes/window/floors.js

@@ -533,10 +533,12 @@ export function setMeasuringShrink(node, axis, out) {
  * It is still laid out, though, and a leaf's answer could reach something
  * that is read through its size. So it is marked only where it cannot:
  *
- * - every box from the root down to it is as wide as something other than
- *   its content — the root offered no room, a width it names, a column
- *   stretching it — so the width the leaf answers is one yoga replaces, and
- *   nothing above it is sized from it;
+ * - every box from `node` down to it is as wide as something other than
+ *   its content — `node` the width the pass gives it (no room, for the
+ *   window; its column's, for a spine root; its own, for a box that sizes
+ *   itself), and below it a width it names or a column stretching it — so
+ *   the width the leaf answers is one yoga replaces, and nothing above it
+ *   is sized from it;
  * - no box is handed a share of space the leaf's height changed, which is
  *   how a height could become somebody's width — an aspect ratio, a column
  *   that wraps, an image sized to the height it is given. Every column from
@@ -656,15 +658,28 @@ function stretchedAlong(node, axis) {
  * names are numbers — a height, a basis (a height, down a column), a floor or
  * a ceiling; and `'unknown'` for a share of something (a percentage), which
  * a pass with no height on offer resolves as it likes.
+ *
+ * A floor of nothing bounds nothing: a box as tall as its content is at
+ * least that tall already, so its height is its content's. It is how a box
+ * says it may shrink, and a browser's page has one on every box from the
+ * window down to its scroller, so that a page taller than the window
+ * scrolls. Read as a height of the box's own, it stopped the walk at the
+ * first of them, where the scroller gives way: the whole document in the
+ * scroller was set a word to a line each time the tree was measured, 100
+ * to 250 ms of a frame for a long Wikipedia article, and nothing read any
+ * of it. And it took the box pinned to both edges of such a column for one
+ * whose height nothing in flow decides, which it is.
  */
 function heightOf(yoga) {
+  const floor = yoga.getMinHeight();
   let own = false;
   for (const value of [
     yoga.getHeight(),
     yoga.getFlexBasis(),
-    yoga.getMinHeight(),
+    floor.value === 0 ? null : floor,
     yoga.getMaxHeight(),
   ]) {
+    if (value === null) continue;
     if (value.unit === Yoga.UNIT_PERCENT) return 'unknown';
     if (value.unit === Yoga.UNIT_POINT) own = true;
   }

package/src/nodes/window/size.js

@@ -354,12 +354,28 @@ export class WindowSize {
     if (axis === 'width') {
       const shrunk = [];
       setMeasuringShrink(root, axis, shrunk);
+      // Nothing reads a root's own width — only heights travel up a spine
+      // (spine.js) — so what it holds is read only where a floor is written
+      // from it, as down the window's columns, and a leaf that is the root
+      // is laid out at the width its column offers, which is no answer of
+      // its own: a document in a scroller is a root when it changes.
+      const read = NO_UNREAD_WIDTHS || this._readEveryWidth;
+      const unread = [];
+      if (!read && root._measureFn) {
+        root._widthUnread = true;
+        unread.push(root);
+      } else if (!read) {
+        markUnreadLeaves(root, unread);
+      }
       this._scopedFloorPasses += 1;
-      yoga.calculateLayout(widths.widthPass, undefined, dir);
-      const span = contentSpan(root, axis, null, this);
-      root._floorW = declaresOwnMinimum(root, axis)
-        ? yoga.getComputedWidth()
-        : span;
+      try {
+        yoga.calculateLayout(widths.widthPass, undefined, dir);
+      } finally {
+        for (const leaf of unread) leaf._widthUnread = false;
+      }
+      const span = contentSpan(root, axis, null, this, read);
+      const own = declaresOwnMinimum(root, axis);
+      if (own || read) root._floorW = own ? yoga.getComputedWidth() : span;
       restoreShrink(shrunk);
       return;
     }
@@ -443,9 +459,18 @@ export class WindowSize {
     if (axis === 'width') {
       const shrunk = [];
       setMeasuringShrink(boundary, axis, shrunk);
+      // its own extent is its style's, so what it holds is read only where
+      // a floor is written from it, as down the window's columns
+      const read = NO_UNREAD_WIDTHS || this._readEveryWidth;
+      const unread = [];
+      if (!read) markUnreadLeaves(boundary, unread);
       this._scopedFloorPasses += 1;
-      yoga.calculateLayout(undefined, undefined, dir);
-      contentSpan(boundary, axis, null, this);
+      try {
+        yoga.calculateLayout(undefined, undefined, dir);
+      } finally {
+        for (const leaf of unread) leaf._widthUnread = false;
+      }
+      contentSpan(boundary, axis, null, this, read);
       restoreShrink(shrunk);
       return;
     }

package/src/wayland/context2d.js

@@ -92,6 +92,9 @@ const SWIZZLE_STRAIGHT = 2; // straight RGBA (ImageData)
 /** floats per vertex: pos(2) uv(2) color(4) params(4) */
 const STRIDE = 12;
 const MAX_VERTS = 6 * 4096;
+/** What a context's vertex array starts at: a surface that draws a handful
+ *  of quads should not pay for the window's batch. */
+const FIRST_VERTS = 6 * 64;
 const TRI = [0, 1, 2, 0, 2, 3];
 
 const VERT = `
@@ -265,6 +268,63 @@ function parseColorUncached(value) {
  * use. Interpolated premultiplied, which is what keeps a fade to transparent
  * from passing through grey.
  */
+/**
+ * The textures made for a gradient or an image are found by the object, in
+ * a WeakMap — and a WeakMap cannot say when its key goes, so its entry went
+ * with the key and the texture stayed in the driver. A page that makes its
+ * gradients as it paints made a texture a paint, and every surface context
+ * left behind what it had uploaded. Each is registered here and deleted
+ * when its key is collected, unless the context that made it was destroyed
+ * first and deleted it then (`made` is that context's set, which is all the
+ * registration holds of it).
+ */
+const textureReaper = new FinalizationRegistry(({ gl, tex, made }) => {
+  if (!made.delete(tex)) return;
+  try {
+    gl.deleteTexture(tex);
+  } catch {
+    // the device went first
+  }
+});
+
+/**
+ * What the contexts on one device share (device.js): the program and its
+ * locations, the GL buffer a batch goes up through, and the glyph atlas.
+ * Each was a context's own, so every offscreen surface compiled and linked
+ * the program, allocated a buffer as large as the window's batch and
+ * rasterised every glyph it drew into an empty atlas — a few milliseconds a
+ * surface, which <Html> made at every width of a resize. Counted by the
+ * contexts that hold it; the last one destroyed deletes it.
+ *
+ * Not the vertex array: the device's owner is the only context with quads
+ * buffered, but `releaseDevice` lets a context keep a batch across foreign
+ * GL with no owner at all, and another context's quads written into a
+ * shared array would land on top of it. Each context keeps its own, grown
+ * as it draws. The GL buffer is filled from it immediately before each draw,
+ * so sharing that is safe.
+ */
+function sharedOf(device, gl) {
+  if (device.shared) return device.shared;
+  const atlas = new GlyphAtlas(gl);
+  const shared = {
+    refs: 0,
+    program: null,
+    loc: null,
+    buffer: null,
+    atlas,
+    /** the contexts with glyph quads buffered against the atlas */
+    glyphHolders: new Set(),
+  };
+  // Quads already buffered against the atlas must be drawn before it lays
+  // itself out again under them — every context's, owner or not: drawing
+  // one claims the device and puts its own state back first.
+  atlas.onBeforeGrow = () => {
+    for (const ctx of [...shared.glyphHolders]) ctx._flush();
+  };
+  device.shared = shared;
+  return shared;
+}
+
 class Gradient {
   constructor(kind, a) {
     this.kind = kind; // 'linear' | 'radial'
@@ -378,18 +438,16 @@ export class WaylandContext2D {
     this.fontManager = fontManager;
     /** @see ./device.js — the state this context shares with its siblings */
     this._device = glDevice(gl);
+    this._shared = sharedOf(this._device, gl);
+    this._shared.refs++;
     this._makeCurrent = makeCurrent ?? null;
     // `TextLayout.draw` opens with `ctx.window.app.display.Render` and reads
     // one constant from it. Satisfy the shape rather than fork the layout.
     this.window = { app: { display: { Render: RENDER } } };
-    this.atlas = new GlyphAtlas(gl);
-    // Quads already buffered against the atlas must be drawn before the
-    // atlas re-lays itself out under them.
-    this.atlas.onBeforeGrow = () => this._flush();
-    // Path fills that go through the CPU rasteriser land here as A8 masks,
-    // drawn like glyphs; emptied every frame, since a mask is one draw.
-    this.masks = new GlyphAtlas(gl, { size: 256 });
-    this.masks.onBeforeGrow = () => this._flush();
+    /** the device's glyph atlas (`sharedOf`) */
+    this.atlas = this._shared.atlas;
+    /** this context's mask atlas, made the first time a fill needs one */
+    this._masks = null;
     this._maskSeq = 0;
     /** the non-rectangular clips in force, device space, outermost first */
     this._clipPath = null;
@@ -426,7 +484,7 @@ export class WaylandContext2D {
     this._width = 0;
     this._height = 0;
 
-    this._verts = new Float32Array(MAX_VERTS * STRIDE);
+    this._verts = new Float32Array(FIRST_VERTS * STRIDE);
     this._n = 0;
     this._mode = MODE_SOLID;
     this._texture = null;
@@ -439,26 +497,69 @@ export class WaylandContext2D {
     /** image object -> { tex, w, h } */
     this._textures = new WeakMap();
     this._gradTex = new WeakMap();
+    /** the textures the two maps above hold, for `destroy()` */
+    this._madeTextures = new Set();
+  }
+
+  /**
+   * Path fills that go through the CPU rasteriser land here as A8 masks,
+   * drawn like glyphs; emptied every frame, since a mask is one draw. A
+   * mask's key is this context's own count (`_maskSeq`), so the atlas is
+   * this context's — and only made once a fill needs it.
+   */
+  get masks() {
+    if (!this._masks) {
+      this._masks = new GlyphAtlas(this.gl, { size: 256 });
+      this._masks.onBeforeGrow = () => this._flush();
+    }
+    return this._masks;
   }
 
   // ---- lifecycle --------------------------------------------------------
 
-  /** Compile the program and allocate the vertex buffer. Context must be current. */
+  /** Take the device's program and buffer, compiling and allocating them
+   *  the first time. Context must be current. */
   init() {
-    const gl = this.gl;
     if (this._program) return;
+    const shared = this._shared;
+    if (!shared.program) this._build(shared);
+    this._program = shared.program;
+    this._loc = shared.loc;
+    this._buffer = shared.buffer;
+  }
+
+  /** Compile the program and allocate the vertex buffer the device shares. */
+  _build(shared) {
+    const gl = this.gl;
     const vs = compile(gl, gl.VERTEX_SHADER, VERT, 'vertex');
-    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG, 'fragment');
+    let fs;
+    try {
+      fs = compile(gl, gl.FRAGMENT_SHADER, FRAG, 'fragment');
+    } catch (err) {
+      gl.deleteShader(vs);
+      throw err;
+    }
     const p = gl.createProgram();
     gl.attachShader(p, vs);
     gl.attachShader(p, fs);
     gl.linkProgram(p);
-    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
-      throw new Error(`2d program failed to link: ${gl.getProgramInfoLog(p)}`);
+    const linked = gl.getProgramParameter(p, gl.LINK_STATUS);
+    const log = linked ? '' : gl.getProgramInfoLog(p);
+    // The shader objects are ours to delete once the program is linked.
+    // Deleting a program detaches its shaders and leaves them (GLES 3.0,
+    // 7.3), so every context — a window's, and each offscreen surface's —
+    // left two behind, and a resize that makes a surface a frame left two a
+    // frame. Deleted while attached, they are flagged and go with the
+    // program.
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    if (!linked) {
+      gl.deleteProgram(p);
+      throw new Error(`2d program failed to link: ${log}`);
     }
-    this._program = p;
+    shared.program = p;
     const u = (n) => gl.getUniformLocation(p, n);
-    this._loc = {
+    shared.loc = {
       aPos: gl.getAttribLocation(p, 'aPos'),
       aUV: gl.getAttribLocation(p, 'aUV'),
       aColor: gl.getAttribLocation(p, 'aColor'),
@@ -471,11 +572,16 @@ export class WaylandContext2D {
       uGradA: u('uGradA'),
       uGradB: u('uGradB'),
     };
-    this._buffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, this._buffer);
+    shared.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, shared.buffer);
     // The addon's bufferData takes a TypedArray, not the byte-length
-    // overload WebGL also accepts. Allocated once; frames use bufferSubData.
-    gl.bufferData(gl.ARRAY_BUFFER, this._verts, gl.DYNAMIC_DRAW);
+    // overload WebGL also accepts. Allocated once a device, as large as a
+    // batch can be; frames use bufferSubData.
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array(MAX_VERTS * STRIDE),
+      gl.DYNAMIC_DRAW,
+    );
   }
 
   /** Where this context draws. A window's backing, or a surface's target. */
@@ -521,7 +627,7 @@ export class WaylandContext2D {
     this._clipPath = null;
     this._stencilling = false;
     this._maskSeq = 0;
-    this.masks.reset();
+    this._masks?.reset();
     this._applyState();
     // scratch for paths and clips: a frame starts with it clean
     const gl = this.gl;
@@ -1059,6 +1165,7 @@ export class WaylandContext2D {
     const ramp = grad.ramp();
     if (!tex) {
       tex = gl.createTexture();
+      this._keepTexture(grad, tex);
       gl.bindTexture(gl.TEXTURE_2D, tex);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
@@ -1631,8 +1738,9 @@ export class WaylandContext2D {
         ? data
         : new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
     if (!entry || entry.w !== w || entry.h !== h) {
-      if (entry) gl.deleteTexture(entry.tex);
+      if (entry) this._dropTexture(entry.tex);
       const tex = gl.createTexture();
+      this._keepTexture(img, tex);
       gl.bindTexture(gl.TEXTURE_2D, tex);
       gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -1792,13 +1900,12 @@ export class WaylandContext2D {
       const size = run.size ?? font.size ?? 16;
       const color = this._color(run.color ?? this.fillStyle);
       if (color[3] === 0) continue;
-      const key = fontKey(font);
+      const table = this.atlas.table(`${fontKey(font)}|${size}`);
       const tex = this.atlas.bind();
       this._setMode(MODE_GLYPH, tex, SWIZZLE_RGBA);
+      this._shared.glyphHolders.add(this);
       for (const g of run.glyphs) {
-        const entry = this.atlas.get(`${key}|${size}|${g.id}`, () =>
-          font.rasterize(g.id, size),
-        );
+        const entry = this.atlas.glyph(table, font, g.id, size);
         if (entry.empty) continue;
         // `left`/`top` are the bitmap's offset from the glyph origin in the
         // rasteriser's **y-down** pixel space: a cap-height glyph has a
@@ -1807,31 +1914,20 @@ export class WaylandContext2D {
         const oy = Math.round(applyY(m, g.x, g.y)) + entry.top;
         // the atlas may have grown mid-run; rebind so the batch names the
         // new texture (the old quads were flushed by onBeforeGrow)
-        if (this.atlas.texture !== this._texture)
+        if (this.atlas.texture !== this._texture) {
           this._setMode(MODE_GLYPH, this.atlas.bind(), SWIZZLE_RGBA);
-        this._quad(
-          [
-            ox,
-            oy,
-            ox + entry.w,
-            oy,
-            ox + entry.w,
-            oy + entry.h,
-            ox,
-            oy + entry.h,
-          ],
-          [
-            entry.u0,
-            entry.v0,
-            entry.u1,
-            entry.v0,
-            entry.u1,
-            entry.v1,
-            entry.u0,
-            entry.v1,
-          ],
+          this._shared.glyphHolders.add(this);
+        }
+        this._quadRect(
+          ox,
+          oy,
+          ox + entry.w,
+          oy + entry.h,
+          entry.u0,
+          entry.v0,
+          entry.u1,
+          entry.v1,
           color,
-          ZERO4,
         );
         this.shapeStats.glyphs++;
       }
@@ -1992,7 +2088,7 @@ export class WaylandContext2D {
     // `_take` is the only thing that can get it issued before someone reads
     // the pixels it makes. A property compare in the common case.
     this._claim();
-    if (this._n + 6 > MAX_VERTS) this._flush();
+    this._room(6);
     const v = this._verts;
     const each = params.length === 16 ? 4 : 0;
     let o = this._n * STRIDE;
@@ -2019,7 +2115,7 @@ export class WaylandContext2D {
   /** One triangle, for the stencil pass. Colour and params are irrelevant. */
   _tri(x0, y0, x1, y1, x2, y2) {
     this._claim();
-    if (this._n + 3 > MAX_VERTS) this._flush();
+    this._room(3);
     const v = this._verts;
     let o = this._n * STRIDE;
     const pts = [x0, y0, x1, y1, x2, y2];
@@ -2031,11 +2127,61 @@ export class WaylandContext2D {
     this._n += 3;
   }
 
+  /**
+   * An axis-aligned quad, TL-TR-BR-BL, with no params: `_quad` for a glyph,
+   * written straight into the batch rather than through two arrays of
+   * corners made for it — a glyph's worth of garbage a glyph.
+   */
+  _quadRect(x0, y0, x1, y1, u0, v0, u1, v1, color) {
+    this._claim();
+    this._room(6);
+    const v = this._verts;
+    let o = this._n * STRIDE;
+    const r = color[0];
+    const g = color[1];
+    const b = color[2];
+    const a = color[3];
+    for (let k = 0; k < 6; k++) {
+      const i = TRI[k];
+      const right = i === 1 || i === 2;
+      const bottom = i >= 2;
+      v[o++] = right ? x1 : x0;
+      v[o++] = bottom ? y1 : y0;
+      v[o++] = right ? u1 : u0;
+      v[o++] = bottom ? v1 : v0;
+      v[o++] = r;
+      v[o++] = g;
+      v[o++] = b;
+      v[o++] = a;
+      v[o++] = 0;
+      v[o++] = 0;
+      v[o++] = 0;
+      v[o++] = 0;
+    }
+    this._n += 6;
+    this.shapeStats.quads++;
+  }
+
+  /** Room for `count` more vertices: the batch drawn where it is full, and
+   *  the array grown where it is smaller than a batch can be. */
+  _room(count) {
+    if (this._n + count > MAX_VERTS) this._flush();
+    const need = (this._n + count) * STRIDE;
+    if (need <= this._verts.length) return;
+    const grown = new Float32Array(
+      Math.min(MAX_VERTS * STRIDE, Math.max(need, this._verts.length * 2)),
+    );
+    grown.set(this._verts.subarray(0, this._n * STRIDE));
+    this._verts = grown;
+  }
+
   _flush() {
     // Before the early return, not after: `clearRect` and `putImageData`
     // flush, change the blend function and flush again, and the second
     // flush must not be the one that re-takes the device and puts the
     // blending back.
+    // drawn or empty, nothing of this context's is left against the atlas
+    this._shared.glyphHolders.delete(this);
     this._claim();
     if (this._n === 0) return;
     const gl = this.gl;
@@ -2072,7 +2218,8 @@ export class WaylandContext2D {
       // then it samples texels those glyphs never reached: garbled text,
       // kept until that region is next repainted.
       if (this._texture === this.atlas.texture) this.atlas.bind();
-      else if (this._texture === this.masks.texture) this.masks.bind();
+      else if (this._masks && this._texture === this._masks.texture)
+        this._masks.bind();
       gl.activeTexture(gl.TEXTURE0);
       gl.bindTexture(gl.TEXTURE_2D, this._texture);
       gl.uniform1i(this._loc.uTex, 0);
@@ -2127,14 +2274,41 @@ export class WaylandContext2D {
     };
   }
 
+  /** A texture made for `key`: deleted when `key` is collected, or when
+   *  this context is destroyed, whichever comes first. */
+  _keepTexture(key, tex) {
+    this._madeTextures.add(tex);
+    textureReaper.register(key, {
+      gl: this.gl,
+      tex,
+      made: this._madeTextures,
+    });
+  }
+
+  /** A texture made for a key that is being given another. */
+  _dropTexture(tex) {
+    if (this._madeTextures.delete(tex)) this.gl.deleteTexture(tex);
+  }
+
   destroy() {
     // Nothing of this context's is installed any more, and the device
     // record should not be the one thing still holding on to it.
+    if (this._destroyed) return;
+    this._destroyed = true;
     this._release();
-    this.atlas.destroy();
-    this.masks.destroy();
-    if (this._buffer) this.gl.deleteBuffer(this._buffer);
-    if (this._program) this.gl.deleteProgram(this._program);
+    for (const tex of this._madeTextures) this.gl.deleteTexture(tex);
+    this._madeTextures.clear();
+    this._masks?.destroy();
+    this._masks = null;
+    const shared = this._shared;
+    shared.glyphHolders.delete(this);
+    if (--shared.refs === 0) {
+      // the last context on the device: what it shared goes with it
+      shared.atlas.destroy();
+      if (shared.buffer) this.gl.deleteBuffer(shared.buffer);
+      if (shared.program) this.gl.deleteProgram(shared.program);
+      if (this._device.shared === shared) this._device.shared = null;
+    }
     this._buffer = null;
     this._program = null;
   }
@@ -2328,9 +2502,9 @@ function compile(gl, type, src, what) {
   gl.shaderSource(sh, src);
   gl.compileShader(sh);
   if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
-    throw new Error(
-      `${what} shader failed to compile: ${gl.getShaderInfoLog(sh)}`,
-    );
+    const log = gl.getShaderInfoLog(sh);
+    gl.deleteShader(sh);
+    throw new Error(`${what} shader failed to compile: ${log}`);
   }
   return sh;
 }

package/src/wayland/glyphatlas.js

@@ -34,6 +34,8 @@ export class GlyphAtlas {
     this.size = size;
     /** key -> { x, y, w, h, left, top, u0, v0, u1, v1 } */
     this.entries = new Map();
+    /** a face at a size -> (glyph id -> entry), for `glyph()` */
+    this._tables = new Map();
     this._shelfY = PAD;
     this._shelfH = 0;
     this._shelfX = PAD;
@@ -58,17 +60,47 @@ export class GlyphAtlas {
   get(key, raster) {
     const hit = this.entries.get(key);
     if (hit) return hit;
+    const entry = this._insert(raster());
+    if (entry.kept) this.entries.set(key, entry);
+    return entry;
+  }
+
+  /**
+   * The entries of one face at one size, by glyph id. A run of text looks
+   * its table up once, by the string that names the face and the size, and
+   * each glyph in it by number (`glyph()`): a string key built and hashed a
+   * glyph was most of what drawing text cost once the glyphs were in.
+   *
+   * A table is emptied in place when the atlas grows or resets, so one held
+   * across a `glyph()` that grew the atlas finds its glyphs missing rather
+   * than placed where they no longer are.
+   */
+  table(key) {
+    let table = this._tables.get(key);
+    if (!table) this._tables.set(key, (table = new Map()));
+    return table;
+  }
+
+  /** One glyph of a `table()`, rasterised by `font` on a miss. */
+  glyph(table, font, id, size) {
+    const hit = table.get(id);
+    if (hit) return hit;
+    const entry = this._insert(font.rasterize(id, size));
+    if (entry.kept) table.set(id, entry);
+    return entry;
+  }
 
-    const g = raster();
+  /** Place a rasterised glyph, or say it has no ink. `kept` is whether the
+   *  answer is worth remembering: a glyph the atlas had no room for is not,
+   *  so the next frame asks again. */
+  _insert(g) {
     // A space has no ink. Cache the absence so the miss is paid once.
     if (!g || g.width <= 0 || g.height <= 0) {
-      const empty = { empty: true, left: g?.left ?? 0, top: g?.top ?? 0 };
-      this.entries.set(key, empty);
-      return empty;
+      return { empty: true, kept: true, left: g?.left ?? 0, top: g?.top ?? 0 };
     }
 
     const spot = this._place(g.width, g.height);
-    if (!spot) return { empty: true, left: g.left, top: g.top };
+    if (!spot) return { empty: true, kept: false, left: g.left, top: g.top };
 
     for (let row = 0; row < g.height; row++) {
       const src = row * g.width;
@@ -78,8 +110,9 @@ export class GlyphAtlas {
     this._markDirty(spot.x, spot.y, g.width, g.height);
 
     const inv = 1 / this.size;
-    const entry = {
+    return {
       empty: false,
+      kept: true,
       x: spot.x,
       y: spot.y,
       w: g.width,
@@ -91,8 +124,6 @@ export class GlyphAtlas {
       u1: (spot.x + g.width) * inv,
       v1: (spot.y + g.height) * inv,
     };
-    this.entries.set(key, entry);
-    return entry;
   }
 
   _markDirty(x, y, w, h) {
@@ -139,6 +170,7 @@ export class GlyphAtlas {
     this.size *= 2;
     this._pixels = new Uint8Array(this.size * this.size);
     this.entries.clear();
+    for (const table of this._tables.values()) table.clear();
     this._shelfX = PAD;
     this._shelfY = PAD;
     this._shelfH = 0;
@@ -158,8 +190,9 @@ export class GlyphAtlas {
    * the CPU copy until new entries overwrite them; nothing names them.
    */
   reset() {
-    if (this.entries.size === 0) return;
+    if (this.entries.size === 0 && this._tables.size === 0) return;
     this.entries.clear();
+    for (const table of this._tables.values()) table.clear();
     this._shelfX = PAD;
     this._shelfY = PAD;
     this._shelfH = 0;
@@ -233,5 +266,6 @@ export class GlyphAtlas {
     if (this.texture) this.gl.deleteTexture(this.texture);
     this.texture = null;
     this.entries.clear();
+    for (const table of this._tables.values()) table.clear();
   }
 }