react-x11 2.44.0 → 2.44.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.44.0",
+  "version": "2.44.1",
   "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/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 {
@@ -261,6 +267,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 +362,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 +416,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 +440,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 +499,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 +524,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/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/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();
   }
 }