react-x11 2.22.7 → 2.22.9

package/src/gloverlay.js

@@ -24,17 +24,38 @@
 // - **X11: no.** A child window is opaque without a compositor, and a
 //   compositor would not change that: it redirects top-level windows, not
 //   the children inside one. So a pane is a plain child window just big
-//   enough for what it holds, one per region the children reach, and the
-//   surface shows between them. Inside a pane the ground is the surface's
-//   `clearColor` — the colour its frames start from — so a pixel a child
-//   leaves unpainted there (a rounded corner, a translucent background, text
-//   with no box behind it) shows that colour, never the GL frame.
+//   enough for what it holds, one per child, and the surface shows between
+//   them. Inside a pane the ground is the surface's `clearColor` — the
+//   colour its frames start from — so a pixel a child leaves unpainted there
+//   (a rounded corner, a translucent background, text with no box behind
+//   it) shows that colour, never the GL frame.
 //
-//   A window per region rather than one window shaped by the SHAPE
-//   extension, for two reasons: SHAPE is near-universal but not universal —
-//   node-x11's in-process server, where this is tested, has none — and a
-//   window as big as the surface would keep a backing pixmap the size of a
-//   map to show a legend in its corner.
+//   One pane per child, kept by the child, and holding that child and what
+//   is under it where the two meet — never what is over it (`_paintPane`).
+//   Two children that overlap keep a pane each, stacked in their order, the
+//   upper one holding the lower one's pixels where they meet. So a card
+//   dragged across another moves its own pane and leaves the other one's
+//   alone: nothing the other holds changed. Panes used to be one per region
+//   the children reached, overlapping ones merged, handed out by position in
+//   a list — and a card dragged into a neighbour's reach re-cut the regions,
+//   so every pane after it in the list went to someone else's place with
+//   that someone's pixels in it, for a frame, on every step.
+//
+//   A pane's window takes a new place and the pixels that go there together
+//   (`X11PaneWindow`), and keeps its contents in the server while it is
+//   mapped, as the surface's window does (src/glnodes.js): a pane or a
+//   frame another pane moves off is put back by the server at once, not
+//   after an Expose and a repaint.
+//
+//   Each pane is cut with the SHAPE extension to what its child painted
+//   (`X11PaneWindow.cutToInk`), so the frame shows around a child and not
+//   only between the children's reaches — a card's handles and rounded
+//   corners, not the rectangle its canvas reaches. A window per child
+//   rather than one window over the surface cut to all of them keeps each
+//   pixmap as small as what it holds: one the size of the surface would
+//   hold a map's worth of pixels to show a legend in its corner. Where the
+//   server has no SHAPE — node-x11's in-process one — a pane is the
+//   rectangle of its child's reach, as it always was.
 // - **XQuartz: no, and not opaquely either.** Every GL surface there, the
 //   direct ones Apple-DRI exports and indirect GLX's alike, is a surface of
 //   the macOS window server, composited above everything the X server draws
@@ -51,11 +72,13 @@
 //
 // A pane keeps what it holds between frames, so a child that only moved is
 // already painted, one shift away (issue #644). The layout pass reports such
-// a child instead of claiming it (`GlAreaNode._absolutizeChild`), and the
-// frame moves its pixels inside the pane — `scrollRegion`, the verb the
-// scroll blit uses on a window — and repaints only what the move uncovered
-// and what it now overlaps differently (`settleMoves`). A pan over a
-// graph's mounted node bodies is that frame, sixty times a second.
+// a child instead of claiming it (`GlAreaNode._absolutizeChild`). On X11 its
+// pane goes with it, and the window's move carries its pixels; on a
+// composited backend the frame moves them inside the one pane —
+// `scrollRegion`, the verb the scroll blit uses on a window. Either way the
+// frame repaints only what the move uncovered and what it now overlaps
+// differently (`settleMoves`). A pan over a graph's mounted node bodies is
+// that frame, sixty times a second.
 //
 // A leaf module, like src/embedding.js: `appcontext.js` asks `canOverlay`
 // for `useSupports('glOverlay')`, and it imports nothing of ours but the
@@ -76,6 +99,10 @@ import {
 // ConfigureWindow's stack mode: directly above the sibling it names
 const STACK_ABOVE = 0;
 
+// How many rects one pane's own list keeps before merging the closest pair
+// (`Pane.owe`): each is a pass over that pane alone, which is small.
+const OWED_CAP = 4;
+
 // Past this share of the pixels a move carries, the frame would repaint
 // most of them anyway — around what it claims itself, or around the other
 // children the copy reached — and the copy only adds to the bill.
@@ -86,6 +113,10 @@ const MOVE_BLIT_MAX_REPAINT = 0.75;
 // one variable away from the plain repaint (docs/debugging.md).
 const NO_BLIT = process.env.REACT_X11_NO_SCROLL_BLIT === '1';
 
+// …and the one for cutting an X11 pane to its ink (`X11PaneWindow.cutToInk`):
+// with it set, every pane is the rectangle of its child's reach
+const NO_PANE_SHAPE = process.env.REACT_X11_NO_PANE_SHAPE === '1';
+
 // Connections on which nothing can be drawn over a GL surface, each with the
 // reason (`beginGlOverlay`), and the probe that finds out, once per app.
 const refusals = new WeakMap();
@@ -185,17 +216,6 @@ const overlaps = (a, b) =>
   a.y < b.y + b.height &&
   b.y < a.y + a.height;
 
-function around(a, b) {
-  const x = Math.min(a.x, b.x);
-  const y = Math.min(a.y, b.y);
-  return {
-    x,
-    y,
-    width: Math.max(a.x + a.width, b.x + b.width) - x,
-    height: Math.max(a.y + a.height, b.y + b.height) - y,
-  };
-}
-
 const sameRect = (a, b) =>
   a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 
@@ -209,35 +229,464 @@ function shown(node) {
 }
 
 /**
- * Where the children put ink, as rects no two of which overlap: each drawn
- * child's reach in whole pixels, cut to the surface, and any two that
- * overlap merged into the box around both. A pane is a rectangle, and two
- * panes over one pixel would each have to hold what the other draws there.
+ * Where each child puts ink, in paint order: its reach in whole pixels, cut
+ * to the surface — the rect of the X11 pane that is that child's. Two that
+ * overlap keep a rect each (see the header).
  *
  * The reach is `_subtreeBounds()`, the rect the damage model culls against —
  * so a child's shadow, its outline and a descendant that sticks out of it
  * are all inside its pane.
  */
-export function overlayRegions(area, surface) {
-  const rects = [];
+export function childRegions(area, surface) {
+  const regions = [];
   for (const child of area.paintOrder()) {
-    const reach = intersectRects(whole(child._subtreeBounds()), surface);
-    if (reach) rects.push(reach);
-  }
-  for (let merged = true; merged;) {
-    merged = false;
-    search: for (let i = 0; i < rects.length; i++) {
-      for (let j = i + 1; j < rects.length; j++) {
-        if (overlaps(rects[i], rects[j])) {
-          rects[i] = around(rects[i], rects[j]);
-          rects.splice(j, 1);
-          merged = true;
-          break search;
-        }
+    const rect = intersectRects(whole(child._subtreeBounds()), surface);
+    if (rect) regions.push({ node: child, rect });
+  }
+  return regions;
+}
+
+// ChangeWindowAttributes' backing-store value: the server keeps what the
+// window shows while it is mapped
+const BACKING_STORE_WHEN_MAPPED = 1;
+// a resize keeps what the window shows at its top-left corner rather than
+// discarding it
+const NORTH_WEST_GRAVITY = 1;
+// a background of None: an exposure shows what was there, not a fill colour
+const NO_BACKGROUND = 0;
+// The step an X11 pane's pixmap grows in. A pane whose child is zooming is
+// a new size every frame, and a pixmap and its picture made per frame per
+// pane is a round of requests for nothing; within the step the one it has
+// does.
+const PIXMAP_STEP = 64;
+
+/**
+ * An X11 pane's drawable: a plain child window of the owning window, and a
+ * pixmap the pane is painted in — its double buffer — with the verbs a pane
+ * asks of its window (`Pane`).
+ *
+ * Not an ntk window's own backing store, because of *when* that shows. ntk
+ * presents a backing store on its own schedule — the next vblank, through
+ * Present — while a window moves and resizes the moment its ConfigureWindow
+ * reaches the server. So a pane that went somewhere else showed its old
+ * pixels in the new place for a frame, and one that grew was shown cut to
+ * the size ntk had not heard back about yet. Here the geometry waits for
+ * the paint: `present` sends the ConfigureWindow and the CopyArea of what
+ * was painted back to back, and the server applies the move and the pixels
+ * that go with it together.
+ *
+ * The window keeps its contents in the server while it is mapped (X backing
+ * store), so what a pane moving off another uncovers is put back at once;
+ * its background is None, so an exposure it does get is filled from the
+ * pixmap with nothing flashed first; and a resize keeps what it shows at
+ * the corner until the copy lands.
+ *
+ * **Cut to its ink** where the server has SHAPE (`cutToInk`). A pane is a
+ * rectangle as big as its child's reach, and a child's reach is more than
+ * it paints: a card's canvas reaches past the card for its handles, a
+ * rounded box leaves its corners, a shadow its falloff. As a rectangle, all
+ * of that covered the GL frame with the pane's ground — a graph's edges
+ * stopped short of every card and lost their arrowheads, which the 2D
+ * renderer of the same graph drew. Cut, the children are painted on a
+ * transparent ground, and the window's bounding shape is where they left
+ * half their alpha or more: the frame shows everywhere they did not paint.
+ * What stays is the X11 limit on translucency — a pixel inside the shape
+ * blends with the ground, not with the frame.
+ */
+export class X11PaneWindow {
+  /** Whether the app is one this can be made on: an ntk connection. */
+  static usable(app) {
+    return (
+      typeof app?.X?.CopyArea === 'function' &&
+      typeof app.createPixmap === 'function' &&
+      typeof app.createWindow === 'function'
+    );
+  }
+
+  /**
+   * @param shape the SHAPE extension to cut the pane to its ink with, or
+   *   null for a rectangle (`cutToInk` can still cut it later)
+   */
+  constructor(app, owner, rect, shape = null) {
+    this.app = app;
+    this.X = app.X;
+    // where the window is on the server, and where the next present puts it
+    this.rect = { ...rect };
+    this._next = null;
+    // mapped once there is something to show, and while the pane is shown
+    this._mapped = false;
+    this._shown = false;
+    this._painted = false;
+    // pane-local rects painted since the last present
+    this._owed = [];
+    // cut to its ink: the SHAPE extension, and the ground its alpha is laid
+    // over, straight floats (`_paintPane` sets it)
+    this._shape = null;
+    this.ground = [0, 0, 0];
+    this.window = app.createWindow({
+      parent: owner,
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      // ntk's double buffer, which this replaces — not X's backing store
+      backingStore: false,
+      backgroundPixmap: NO_BACKGROUND,
+      bitGravity: NORTH_WEST_GRAVITY,
+    });
+    this.id = this.window.id;
+    this.depth =
+      this.window.depth || owner.depth || app.display.screen[0].root_depth;
+    this.X.ChangeWindowAttributes(this.id, {
+      backingStore: BACKING_STORE_WHEN_MAPPED,
+    });
+    this._gc = this.X.AllocID();
+    this.X.CreateGC(this._gc, this.id, { graphicsExposures: 0 });
+    // the pixmaps: `buffer`, what the window is copied from; cut to its
+    // ink, `argb`, what the children paint in, and `mask`, a bit a pixel
+    // of where they did
+    this._store = null;
+    this._ctx = null;
+    if (!this.cutToInk(shape)) this._grow(rect.width, rect.height);
+    // An exposure the server could not fill from its own copy — one with no
+    // backing store, or one that let it go — is filled from the pixmap.
+    // Adding the listener is what selects Exposure (ntk).
+    this.window.on('expose', (ev) => {
+      if (this._painted) this._copy([ev]);
+    });
+  }
+
+  /**
+   * Paint on a transparent ground from now on, and show only where the
+   * children painted: the window's bounding shape follows their alpha. True
+   * when it changed — the pane's pixels are gone, and it is painted whole
+   * next — and false where it cannot: no SHAPE, no 1-bit picture format,
+   * or already cut.
+   */
+  cutToInk(shape) {
+    if (NO_PANE_SHAPE || this._shape || !shape) return false;
+    const R = this.app.display.Render;
+    if (!R?.mono1 || !R.rgba32) return false;
+    this._shape = shape;
+    this._free(this._store);
+    this._store = null;
+    this._grow(this.rect.width, this.rect.height);
+    return true;
+  }
+
+  /** What a pane asks of its window's event selection: none of the pointer. */
+  get eventMask() {
+    return this.window.eventMask;
+  }
+
+  /** A pane asks for the context every pass: it is the pixmap's, and a pane
+   *  that grew past its pixmap has a new one. */
+  get ownsContext() {
+    return true;
+  }
+
+  /** Painted on a transparent ground, which the pane lays over `ground`. */
+  get paintsAlpha() {
+    return this._shape !== null;
+  }
+
+  /** Whether a present is owed without a paint: a place to take, or pixels
+   *  a blit moved. */
+  get presentOwed() {
+    return this._next !== null || this._owed.length !== 0 || !this._mapped;
+  }
+
+  getContext(name) {
+    if (name !== '2d') return null;
+    const store = this._store;
+    return (this._ctx ??= (store.argb ?? store.buffer).getContext('2d'));
+  }
+
+  /** The pixmaps, at least `width`×`height`, grown in steps and never
+   *  shrunk. */
+  _grow(width, height) {
+    const cur = this._store;
+    if (cur && cur.width >= width && cur.height >= height) return;
+    const up = (v) =>
+      Math.max(PIXMAP_STEP, Math.ceil(v / PIXMAP_STEP) * PIXMAP_STEP);
+    const w = up(Math.max(width, cur?.width ?? 0));
+    const h = up(Math.max(height, cur?.height ?? 0));
+    const app = this.app;
+    const X = this.X;
+    const pixmap = (depth, visual) =>
+      app.createPixmap({
+        parent: this.window,
+        width: w,
+        height: h,
+        depth,
+        visual,
+      });
+    // the window's pixels, read through the window's visual
+    const store = {
+      width: w,
+      height: h,
+      buffer: pixmap(this.depth, this.window.visualId),
+    };
+    if (this._shape) {
+      const R = app.display.Render;
+      const picture = (drawable, format) => {
+        const id = X.AllocID();
+        R.CreatePicture(id, drawable.id, format);
+        return id;
+      };
+      store.bufferPicture = picture(
+        store.buffer,
+        this.depth === 32 ? R.rgba32 : R.rgb24,
+      );
+      store.argb = pixmap(32);
+      store.argbPicture = picture(store.argb, R.rgba32);
+      store.argbGc = X.AllocID();
+      X.CreateGC(store.argbGc, store.argb.id, { graphicsExposures: 0 });
+      store.mask = pixmap(1);
+      store.maskPicture = picture(store.mask, R.mono1);
+      // nothing painted yet is nothing shown
+      R.FillRectangles(
+        R.PictOp.Src,
+        store.maskPicture,
+        [0, 0, 0, 0],
+        [0, 0, w, h],
+      );
+    }
+    this._free(cur);
+    this._store = store;
+    this._ctx = null;
+    // what the old pixmaps held is gone: the pane is painted whole next
+    this._painted = false;
+  }
+
+  _free(store) {
+    if (!store) return;
+    const R = this.app.display.Render;
+    try {
+      for (const id of [
+        store.bufferPicture,
+        store.argbPicture,
+        store.maskPicture,
+      ]) {
+        if (id) R.FreePicture(id);
       }
+      if (store.argbGc) this.X.FreeGC(store.argbGc);
+    } catch {
+      // the connection is closing, and takes them with it
+    }
+    store.buffer.destroy();
+    store.argb?.destroy();
+    store.mask?.destroy();
+  }
+
+  /** Where the next present puts the window. A new size may be new
+   *  pixmaps, which the pane paints whole anyway (`Pane.place`). */
+  setState(rect) {
+    this._next = { ...rect };
+    this._grow(rect.width, rect.height);
+  }
+
+  /** Pixels painted at `rect`, pane-local, for the next present to show. */
+  owe(rect) {
+    this._owed.push(rect);
+    this._painted = true;
+  }
+
+  /** `rect` in whole pixels, cut to the pane's size — or null. */
+  _clamp(rect) {
+    const { width, height } = this._next ?? this.rect;
+    const x0 = Math.max(0, Math.floor(rect.x));
+    const y0 = Math.max(0, Math.floor(rect.y));
+    const x1 = Math.min(width, Math.ceil(rect.x + rect.width));
+    const y1 = Math.min(height, Math.ceil(rect.y + rect.height));
+    return x1 > x0 && y1 > y0 ? { x0, y0, x1, y1 } : null;
+  }
+
+  /**
+   * `Window.scrollRegion`'s contract, on the pixmap the children are
+   * painted in: the band of `rect` (pane-local) that survives the shift
+   * moves, and all of `rect` is owed to the window at the next present.
+   */
+  scrollRegion(rect, dx, dy) {
+    if (!this._painted) return false;
+    if (
+      !Number.isInteger(dx) ||
+      !Number.isInteger(dy) ||
+      (dx === 0 && dy === 0)
+    ) {
+      return false;
+    }
+    const r = this._clamp(rect);
+    if (!r) return false;
+    const { x0, y0, x1, y1 } = r;
+    const dstX0 = Math.max(x0, x0 + dx);
+    const dstY0 = Math.max(y0, y0 + dy);
+    const dstX1 = Math.min(x1, x1 + dx);
+    const dstY1 = Math.min(y1, y1 + dy);
+    if (dstX1 <= dstX0 || dstY1 <= dstY0) return false;
+    const store = this._store;
+    const target = store.argb ?? store.buffer;
+    this.X.CopyArea(
+      target.id,
+      target.id,
+      store.argbGc ?? this._gc,
+      dstX0 - dx,
+      dstY0 - dy,
+      dstX0,
+      dstY0,
+      dstX1 - dstX0,
+      dstY1 - dstY0,
+    );
+    this.owe({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 });
+    return true;
+  }
+
+  /**
+   * Show what was painted, where it goes: the ConfigureWindow of a new
+   * place; where the pane is cut to its ink, the painted rects laid over the
+   * ground and their alpha into the mask, and the shape set from it; the
+   * map of a pane shown for the first time; and the copies of what was
+   * painted since — back to back, one batch the server applies together.
+   * The shape goes before the copies: a pixel it takes in shows what was
+   * under it, never the pane's old one, until its copy lands.
+   */
+  present() {
+    const X = this.X;
+    const next = this._next;
+    if (next) {
+      this._next = null;
+      const change = {};
+      if (next.x !== this.rect.x) change.x = next.x;
+      if (next.y !== this.rect.y) change.y = next.y;
+      if (next.width !== this.rect.width) change.width = next.width;
+      if (next.height !== this.rect.height) change.height = next.height;
+      this.rect = next;
+      if (Object.keys(change).length !== 0) X.ConfigureWindow(this.id, change);
+    }
+    if (!this._painted) return;
+    const owed = [];
+    for (const rect of this._owed) {
+      const r = this._clamp(rect);
+      if (r) owed.push(r);
+    }
+    this._owed = [];
+    const store = this._store;
+    if (this._shape && owed.length !== 0) {
+      const R = this.app.display.Render;
+      const [r, g, b] = this.ground;
+      for (const { x0, y0, x1, y1 } of owed) {
+        const w = x1 - x0;
+        const h = y1 - y0;
+        R.FillRectangles(
+          R.PictOp.Src,
+          store.bufferPicture,
+          [r, g, b, 1],
+          [x0, y0, w, h],
+        );
+        R.Composite(
+          R.PictOp.Over,
+          store.argbPicture,
+          0,
+          store.bufferPicture,
+          x0,
+          y0,
+          0,
+          0,
+          x0,
+          y0,
+          w,
+          h,
+        );
+        R.Composite(
+          R.PictOp.Src,
+          store.argbPicture,
+          0,
+          store.maskPicture,
+          x0,
+          y0,
+          0,
+          0,
+          x0,
+          y0,
+          w,
+          h,
+        );
+      }
+      const S = this._shape;
+      S.Mask(S.Op.Set, S.Kind.Bounding, this.id, 0, 0, store.mask.id);
+    }
+    if (this._shown && !this._mapped) {
+      X.MapWindow(this.id);
+      this._mapped = true;
+    }
+    for (const { x0, y0, x1, y1 } of owed) {
+      X.CopyArea(
+        store.buffer.id,
+        this.id,
+        this._gc,
+        x0,
+        y0,
+        x0,
+        y0,
+        x1 - x0,
+        y1 - y0,
+      );
+    }
+  }
+
+  /** The buffer's pixels at `rects` (pane-local), onto the window. */
+  _copy(rects) {
+    const { width, height } = this.rect;
+    for (const r of rects) {
+      const x0 = Math.max(0, Math.floor(r.x));
+      const y0 = Math.max(0, Math.floor(r.y));
+      const x1 = Math.min(width, Math.ceil(r.x + r.width));
+      const y1 = Math.min(height, Math.ceil(r.y + r.height));
+      if (x1 <= x0 || y1 <= y0) continue;
+      this.X.CopyArea(
+        this._store.buffer.id,
+        this.id,
+        this._gc,
+        x0,
+        y0,
+        x0,
+        y0,
+        x1 - x0,
+        y1 - y0,
+      );
+    }
+  }
+
+  map() {
+    this._shown = true;
+    // a pane with nothing painted yet is mapped by the present that shows it
+    if (this._painted && !this._mapped) {
+      this.X.MapWindow(this.id);
+      this._mapped = true;
+      this._copy([
+        { x: 0, y: 0, width: this.rect.width, height: this.rect.height },
+      ]);
+    }
+  }
+
+  unmap() {
+    this._shown = false;
+    if (!this._mapped) return;
+    this.X.UnmapWindow(this.id);
+    this._mapped = false;
+  }
+
+  destroy() {
+    this.window.destroy?.();
+    this._free(this._store);
+    this._store = null;
+    this._ctx = null;
+    try {
+      this.X.FreeGC(this._gc);
+    } catch {
+      // the connection is closing, and takes the GC with it
     }
   }
-  return rects;
 }
 
 /**
@@ -247,12 +696,45 @@ export function overlayRegions(area, surface) {
  * the pane's own last frame rather than show anything under it.
  */
 function groundOf(props) {
+  const [r, g, b] = groundRgb(props);
+  const byte = (c) => Math.round(c * 255);
+  return `rgb(${byte(r)}, ${byte(g)}, ${byte(b)})`;
+}
+
+/** `groundOf` as straight [r, g, b] floats, for a pane that lays its
+ * children over it itself (`X11PaneWindow.present`). */
+function groundRgb(props) {
   const value = props.clearColor ?? 'black';
   const [r, g, b] = Array.isArray(value)
     ? value
     : (cssColorStraight(value) ?? [0, 0, 0, 1]);
-  const byte = (c) => Math.round(Math.max(0, Math.min(1, c)) * 255);
-  return `rgb(${byte(r)}, ${byte(g)}, ${byte(b)})`;
+  const clamp = (c) => Math.max(0, Math.min(1, c));
+  return [clamp(r), clamp(g), clamp(b)];
+}
+
+/**
+ * The SHAPE extension of an app's connection, asked once: resolves to it,
+ * or to null where the server has none — node-x11's in-process server, for
+ * one. Asked by the first overlay that makes X11 panes rather than at
+ * startup, so an app with no `<glarea>` children never asks.
+ */
+const shapeQueries = new WeakMap();
+function askShape(app) {
+  let pending = shapeQueries.get(app);
+  if (!pending) {
+    pending = new Promise((resolve) => {
+      try {
+        app.X.require('shape', (err, ext) =>
+          resolve(err ? null : (ext ?? null)),
+        );
+      } catch {
+        // a connection that cannot ask has none to give
+        resolve(null);
+      }
+    });
+    shapeQueries.set(app, pending);
+  }
+  return pending;
 }
 
 /**
@@ -262,10 +744,17 @@ function groundOf(props) {
  * a fresh one with subscriptions of its own on every `getContext`.
  */
 class Pane {
-  constructor(wnd, rect, transparent) {
+  /**
+   * @param node the child an X11 pane is kept by and holds, up to — null for
+   *   a composited pane, which holds every child
+   * @param overlay the panes it is one of, which `canBlit` asks about
+   */
+  constructor(wnd, rect, transparent, node = null, overlay = null) {
     this.wnd = wnd;
     this.rect = rect;
     this.transparent = transparent;
+    this.node = node;
+    this.overlay = overlay;
     this.full = true;
     this.ctx = null;
     // placed this frame: what the pane holds is where the children were in
@@ -275,15 +764,30 @@ class Pane {
     // moved pixels this frame, which has to reach the screen even when no
     // pass follows it (`GlOverlay.paint`)
     this.blitted = false;
+    // what this pane alone is owed this frame, beside the damage every pane
+    // is cut from: the pixels a moved child's pane carried wrongly, or the
+    // ones of it a pane over it holds (`_settleMove`)
+    this.owed = [];
+    // X11: placed this frame by exactly its child's move, which the window's
+    // move carried (`_syncChildren`, `_settleCarried`)
+    this.carried = false;
   }
 
   context() {
+    // an X11 pane's is its pixmap's, which a pane that grew has a new one of
+    if (this.wnd.ownsContext) return this.wnd.getContext('2d');
     if (!this.ctx && typeof this.wnd.getContext === 'function') {
       this.ctx = this.wnd.getContext('2d');
     }
     return this.ctx;
   }
 
+  /** One rect more for this pane alone, window coordinates. */
+  owe(rect) {
+    const hit = rect && intersectRects(rect, this.rect);
+    if (hit) this.owed = addDamageRect(this.owed, hit, OWED_CAP);
+  }
+
   /** Somewhere else. A new size is a new backing — a pixmap on X11, a
    * bitmap on Cocoa — and has to be painted whole; a move keeps what the
    * pane holds, which moved with the children it shows. */
@@ -322,6 +826,11 @@ class Pane {
    * the Cocoa pane's own): the band that survives inside `rect` moves, the
    * rest of it is left as it was. False when the backend could not, which
    * leaves the pane exactly as it was.
+   *
+   * A child's pane on X11 is not the only one holding those pixels: every
+   * pane over it that reaches into `rect` holds a copy, which the move
+   * leaves where it was. Those are owed `rect` (`owe`), so they repaint
+   * what they hold of it.
    */
   blit(rect, dx, dy) {
     const local = {
@@ -332,6 +841,12 @@ class Pane {
     };
     if (!this.wnd.scrollRegion(local, dx, dy)) return false;
     this.blitted = true;
+    const panes = this.node ? this.overlay?.panes : null;
+    if (panes) {
+      for (let i = panes.indexOf(this) + 1; i < panes.length; i++) {
+        panes[i].owe(rect);
+      }
+    }
     return true;
   }
 
@@ -353,7 +868,23 @@ export class GlOverlay {
     this.app = area.app;
     // one pane over the whole surface, where the backend composites it
     this.composited = typeof this.app?.createOverlayPane === 'function';
+    // bottom to top: the children's order on X11, one pane each
     this.panes = [];
+    // X11: each child's pane, kept by the child for as long as it has one
+    this.byNode = new Map();
+    // X11: the SHAPE extension the panes are cut to their ink with — null
+    // until the server has answered, and for good where it has none
+    this.shape = null;
+    if (!this.composited && X11PaneWindow.usable(this.app)) {
+      askShape(this.app).then((shape) => {
+        if (!shape || this.destroyed) return;
+        this.shape = shape;
+        // panes made before the answer: cut now, painted whole next frame
+        for (const pane of this.panes) {
+          if (pane.wnd.cutToInk?.(shape)) this._lost(pane);
+        }
+      });
+    }
     // the children this frame's layout moved and nothing else, reported
     // rather than claimed (`GlAreaNode._absolutizeChild`) and settled after
     // the panes are (`settleMoves`)
@@ -373,42 +904,115 @@ export class GlOverlay {
     const area = this.area;
     const abs = area.abs;
     for (const pane of this.panes) pane.placed = false;
-    let rects = [];
-    if (shown(area) && abs.width > 0 && abs.height > 0) {
-      // the surface's own rect, rounded the way its window's is
-      const surface = area._geometry();
-      if (!this.composited) rects = overlayRegions(area, surface);
-      else if (area.paintOrder().length) rects = [surface];
-    }
+    const visible = shown(area) && abs.width > 0 && abs.height > 0;
+    // the surface's own rect, rounded the way its window's is
+    const surface = visible ? area._geometry() : null;
+    if (!this.composited) return this._syncChildren(surface);
+    const rects = surface && area.paintOrder().length ? [surface] : [];
     let changed = false;
     while (this.panes.length > rects.length) {
       this.panes.pop().destroy();
       changed = true;
     }
-    let made = false;
     for (let i = 0; i < rects.length; i++) {
       const pane = this.panes[i];
       if (!pane) {
-        this.panes.push(this._makePane(rects[i]));
-        made = changed = true;
+        this.panes.push(this._makePane(rects[i], null));
+        changed = true;
       } else if (!sameRect(pane.rect, rects[i])) {
         pane.place(rects[i]);
         changed = true;
       }
     }
-    if (made) this.restack();
     return changed;
   }
 
-  _makePane(rect) {
+  /**
+   * `sync` on X11: a pane per child, kept by the child. A child that is new
+   * gets one, a child that went takes its with it, and one whose reach moved
+   * has its pane placed there — and painted whole, unless the move was the
+   * child's own and nothing else, which the window's move carries
+   * (`_settleMove` repaints what it does not). A change of order restacks
+   * them, and repaints whichever overlap another: what a pane holds is what
+   * is under its child.
+   */
+  _syncChildren(surface) {
+    const regions = surface ? childRegions(this.area, surface) : [];
+    const moved = new Map();
+    for (const move of this.moves) moved.set(move.node, move);
+    const next = [];
+    let changed = false;
+    let made = false;
+    const kept = new Set();
+    for (const pane of this.panes) pane.carried = false;
+    for (const { node, rect } of regions) {
+      let pane = this.byNode.get(node);
+      if (!pane) {
+        pane = this._makePane(rect, node);
+        this.byNode.set(node, pane);
+        made = changed = true;
+      } else if (!sameRect(pane.rect, rect)) {
+        const move = moved.get(node);
+        const carried =
+          move !== undefined &&
+          !pane.full &&
+          rect.width === pane.rect.width &&
+          rect.height === pane.rect.height &&
+          rect.x === pane.rect.x + move.dx &&
+          rect.y === pane.rect.y + move.dy;
+        pane.place(rect);
+        if (carried) pane.carried = true;
+        else pane.full = true;
+        changed = true;
+      }
+      kept.add(node);
+      next.push(pane);
+    }
+    for (const [node, pane] of this.byNode) {
+      if (kept.has(node)) continue;
+      pane.destroy();
+      this.byNode.delete(node);
+      changed = true;
+    }
+    const reordered =
+      next.length !== this.panes.length ||
+      next.some((pane, i) => pane !== this.panes[i]);
+    this.panes = next;
+    if (reordered) {
+      this.restack();
+      if (!made) {
+        // what each pane holds is its child and what is under it: a new
+        // order is new contents wherever two of them meet
+        for (const pane of next) {
+          if (
+            next.some(
+              (other) => other !== pane && overlaps(other.rect, pane.rect),
+            )
+          ) {
+            pane.full = true;
+          }
+        }
+      }
+      changed = true;
+    }
+    return changed;
+  }
+
+  _makePane(rect, node) {
     const owner = this.area.root.window;
     const attributes = { parent: owner, ...rect };
-    const pane = this.composited
-      ? new Pane(this.app.createOverlayPane(attributes), rect, true)
-      : // A plain child window on the owning window's visual, selecting
-        // nothing but what ntk selects for itself — the structure events and
-        // the exposures its backing store answers. The pointer is the tree's.
-        new Pane(this.app.createWindow(attributes), rect, false);
+    let wnd;
+    if (this.composited) wnd = this.app.createOverlayPane(attributes);
+    else if (X11PaneWindow.usable(this.app)) {
+      // a child window and its own double buffer, selecting nothing but the
+      // exposures a pixmap answers — the pointer is the tree's
+      wnd = new X11PaneWindow(this.app, owner, rect, this.shape);
+    } else {
+      // an app with no X connection to speak for itself — the headless mock
+      // — makes its panes as plain windows
+      wnd = this.app.createWindow(attributes);
+    }
+    const pane = new Pane(wnd, rect, this.composited, node, this);
     // ntk asks for a redraw when the backing no longer holds the picture — a
     // resize it could not carry over — and a pane has nothing to redraw from
     // but the children, on the next frame of the window they live in
@@ -480,6 +1084,22 @@ export class GlOverlay {
     if (!root || root.destroyed || root._paneDamage === FULL_DAMAGE) {
       return true;
     }
+    if (!this.composited) {
+      // Each child's move is its own pane's to settle: carried by the
+      // window's move where its pane went with it, moved on the pane where
+      // the pane stayed — cut to the surface, say, which a box bigger than
+      // it is — or claimed.
+      const reaches = new Map();
+      for (const move of moves) reaches.set(move.node, move.reach);
+      for (const move of moves) {
+        const own = this.byNode.get(move.node);
+        if (own?.carried) this._settleCarried(move, reaches);
+        else if (!own || !this._blitMove(root, move, own)) {
+          this._claimMove(root, move);
+        }
+      }
+      return true;
+    }
     const surface = this.area._geometry();
     let best = null;
     let most = 0;
@@ -498,6 +1118,46 @@ export class GlOverlay {
     return true;
   }
 
+  /**
+   * A child that only moved, on X11, whose pane went with it (`sync`): what
+   * each pane is owed for it, and nothing in the frame's damage, which every
+   * pane is cut from.
+   *
+   * - Its own pane: the window's move brought the child's pixels and the
+   *   ground around them, which is one colour, and took along whatever of
+   *   the children under it the pane held. Those are owed where they are
+   *   now and where the move put their old pixels — and when nothing is
+   *   under it, nothing is, which is a card dragged through open graph: one
+   *   ConfigureWindow a step.
+   * - The panes over it, which hold its pixels where they meet it: where it
+   *   was, and where it is.
+   * - The panes under it hold nothing of it, and are owed nothing.
+   */
+  _settleCarried({ node, reach, dx, dy }, reaches) {
+    const panes = this.panes;
+    const at = panes.indexOf(this.byNode.get(node));
+    const own = panes[at];
+    const order = this.area.paintOrder();
+    const upTo = order.indexOf(node);
+    for (let i = 0; i < upTo; i++) {
+      const under = order[i];
+      const bounds = [whole(under.paintBounds())];
+      // one that moved this frame as well was somewhere else in the pane
+      const before = reaches.get(under);
+      if (before) bounds.push(whole(before));
+      for (const b of bounds) {
+        own.owe(b);
+        own.owe(shiftRect(b, dx, dy));
+      }
+    }
+    const was = whole(reach);
+    const now = whole(node.paintBounds());
+    for (let i = at + 1; i < panes.length; i++) {
+      panes[i].owe(was);
+      panes[i].owe(now);
+    }
+  }
+
   /** Where a move's child was and where it is, claimed the ordinary way —
    * cut to the surface's box, which clips the children (`clipsChildren`). */
   _claimMove(root, { node, reach }) {
@@ -534,7 +1194,7 @@ export class GlOverlay {
    * Past `MOVE_BLIT_MAX_REPAINT` of `dest` those repaint most of what the
    * copy saves, and the plain claims have the frame.
    */
-  _blitMove(root, { node, reach, dx, dy }) {
+  _blitMove(root, { node, reach, dx, dy }, own = null) {
     if (NO_BLIT || !Number.isInteger(dx) || !Number.isInteger(dy)) {
       return false;
     }
@@ -549,9 +1209,12 @@ export class GlOverlay {
     const now = intersectRects(whole(node.paintBounds()), box);
     // nothing of it was on show, so there is nothing to carry
     if (!was) return false;
-    const pane = this.panes.find(
-      (p) => p.canBlit(was) && (!now || p.canBlit(now)),
-    );
+    // the child's own pane on X11, the one over the whole surface elsewhere
+    const pane = own
+      ? own.canBlit(was) && (!now || own.canBlit(now))
+        ? own
+        : null
+      : this.panes.find((p) => p.canBlit(was) && (!now || p.canBlit(now)));
     if (!pane) return false;
     const view = intersectRects(pane.rect, box);
     const dest = intersectRects(shiftRect(was, dx, dy), view);
@@ -566,7 +1229,13 @@ export class GlOverlay {
       add(intersectRects(shiftRect(claim, dx, dy), dest));
     for (const piece of outside(was, dest)) add(piece);
     if (now) for (const piece of outside(now, dest)) add(piece);
-    for (const other of area.paintOrder()) {
+    // the children whose pixels the pane holds: every other one on a pane
+    // over the whole surface, and on X11 the ones under this child — the
+    // panes over it are owed the copy by `Pane.blit`
+    const order = area.paintOrder();
+    const upTo = own ? order.indexOf(node) : order.length;
+    for (let i = 0; i < upTo; i++) {
+      const other = order[i];
       if (other === node) continue;
       const theirs = whole(other.paintBounds());
       add(intersectRects(theirs, dest));
@@ -607,15 +1276,20 @@ export class GlOverlay {
         passes = [];
         for (const rect of damage) {
           const hit = intersectRects(rect, pane.rect);
-          if (hit) passes.push(hit);
+          if (hit) passes = addDamageRect(passes, hit, OWED_CAP);
+        }
+        for (const rect of pane.owed) {
+          passes = addDamageRect(passes, rect, OWED_CAP);
         }
       }
+      pane.owed = [];
       const blitted = pane.blitted;
       pane.blitted = false;
       pane.placed = false;
       if (passes.length === 0) {
-        // pixels moved and nothing else owed: they still go out
-        if (blitted) pane.wnd.present?.();
+        // pixels moved, or a place to take, and nothing else owed: they
+        // still go out
+        if (blitted || pane.wnd.presentOwed) pane.wnd.present?.();
         continue;
       }
       pane.full = false;
@@ -628,8 +1302,12 @@ export class GlOverlay {
     const root = area.root;
     if (!root) return;
     // an opaque pane is filled with what the surface starts its frames from;
-    // a composited one is cleared, and shows the frame itself
-    const ground = pane.transparent ? null : groundOf(area.props);
+    // a composited one is cleared, and shows the frame itself; and one cut
+    // to its ink is cleared too, and lays the ground under what the children
+    // painted itself, where the frame is not shown (`X11PaneWindow`)
+    const alpha = pane.transparent || pane.wnd.paintsAlpha === true;
+    const ground = alpha ? null : groundOf(area.props);
+    if (pane.wnd.paintsAlpha) pane.wnd.ground = groundRgb(area.props);
     // one pass, drawn by a context in window coordinates
     const paintPass = (ctx, pass) => {
       ctx.save();
@@ -644,7 +1322,9 @@ export class GlOverlay {
           ctx.clearRect(pass.x, pass.y, pass.width, pass.height);
         }
         root._paintDamage = pass;
-        area._paintChildren(ctx);
+        // an X11 pane holds its child and what is under it, and never
+        // what is over it — the pane over it holds that (see the header)
+        area._paintChildren(ctx, pane.node);
       } finally {
         root._paintDamage = null;
         ctx.restore();
@@ -667,8 +1347,19 @@ export class GlOverlay {
         ctx.restore();
       }
     }
-    // A layer's contents are a copy the bitmap is pushed to; an X window's
+    // What was painted goes out with the place it goes to (`X11PaneWindow`);
+    // a layer's contents are a copy the bitmap is pushed to; an ntk window's
     // backing store is blitted by ntk on its own, from the paint above
+    if (typeof pane.wnd.owe === 'function') {
+      for (const pass of passes) {
+        pane.wnd.owe({
+          x: pass.x - pane.rect.x,
+          y: pass.y - pane.rect.y,
+          width: pass.width,
+          height: pass.height,
+        });
+      }
+    }
     pane.wnd.present?.();
   }
 
@@ -678,7 +1369,9 @@ export class GlOverlay {
   }
 
   destroy() {
+    this.destroyed = true;
     for (const pane of this.panes) pane.destroy();
     this.panes = [];
+    this.byNode.clear();
   }
 }