react-x11 2.46.0 → 2.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.46.0",
+  "version": "2.47.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.27.0",
+    "@windowkit/appkit": "^0.28.0",
     "@windowkit/wayland": "^3.1.1",
     "@windowkit/win32": "^0.0.9",
     "dbus-native": "^0.16.0",

package/src/backend/context2d.js

@@ -28,6 +28,7 @@ import { cssColorStraight } from 'ntk/color';
 import { normalizeRadii, planShadowTiles } from 'ntk/shadow-tiles';
 
 import {
+  blurPixels,
   filterColour,
   filterPixels,
   filterStops,
@@ -183,9 +184,10 @@ function warnUndrawable(image) {
   );
 }
 
-class LinearGradient {
-  constructor(x0, y0, x1, y1) {
-    this._coords = [x0, y0, x1, y1];
+/** A canvas gradient's stops, which `fillStyle` takes: `LinearGradient`
+ *  and `RadialGradient` are where they run. */
+class Gradient {
+  constructor() {
     this._stops = [];
   }
 
@@ -194,6 +196,25 @@ class LinearGradient {
     this._stops.push(offset, r, g, b, a);
   }
 
+  /** The stops as `[offset, r, g, b, a]`, in order of offset, two at
+   *  least: one stop is a colour from end to end. */
+  _sorted() {
+    const stops = [];
+    for (let i = 0; i + 4 < this._stops.length; i += 5) {
+      stops.push(this._stops.slice(i, i + 5));
+    }
+    stops.sort((p, q) => p[0] - q[0]);
+    if (stops.length === 1) stops.push([...stops[0]]);
+    return stops;
+  }
+}
+
+class LinearGradient extends Gradient {
+  constructor(x0, y0, x1, y1) {
+    super();
+    this._coords = [x0, y0, x1, y1];
+  }
+
   /**
    * CoreGraphics requires stop locations inside [0, 1]; the decorations
    * parser deliberately pads a gradient's line past both ends (its end
@@ -203,13 +224,8 @@ class LinearGradient {
    * remaps into [0, 1].
    */
   _normalized() {
-    const stops = [];
-    for (let i = 0; i + 4 < this._stops.length; i += 5) {
-      stops.push(this._stops.slice(i, i + 5));
-    }
-    stops.sort((p, q) => p[0] - q[0]);
+    const stops = this._sorted();
     if (stops.length === 0) return { coords: this._coords, flat: [] };
-    if (stops.length === 1) stops.push([...stops[0]]);
     const min = Math.min(0, stops[0][0]);
     const max = Math.max(1, stops[stops.length - 1][0]);
     let [x0, y0, x1, y1] = this._coords;
@@ -230,6 +246,35 @@ class LinearGradient {
   }
 }
 
+/**
+ * Canvas's radial gradient: the colours spread from the start circle to
+ * the end one (@windowkit/appkit's `ctxFillRadialGradient`, whose
+ * CoreGraphics gradient is canvas's two-circle one). Canvas keeps every
+ * stop's offset in [0, 1], so they are only put in order.
+ */
+class RadialGradient extends Gradient {
+  constructor(x0, y0, r0, x1, y1, r1) {
+    super();
+    this._circles = [x0, y0, r0, x1, y1, r1];
+  }
+
+  _normalized() {
+    const stops = this._sorted();
+    for (const stop of stops) stop[0] = Math.min(1, Math.max(0, stop[0]));
+    return { circles: this._circles, flat: stops.flat() };
+  }
+}
+
+/**
+ * `createRadialGradient` on a bridge with no radial fill: a linear gradient
+ * along no line, which paints flat, as every radial gradient did before
+ * the bridge had one. It takes no circles, which is how a caller tells it
+ * from the one that draws them (`<Html>` asks `createRadialGradient.length`).
+ */
+function flatRadialGradient() {
+  return new LinearGradient(0, 0, 0, 0);
+}
+
 const clamp01 = (v) => Math.min(1, Math.max(0, Number(v) || 0));
 
 // What `textAlign`, `textBaseline` and `direction` take. A value outside
@@ -431,6 +476,10 @@ function meets(a, b) {
   );
 }
 
+/** How many pixels across a blur's standard deviation is kept as the
+ *  source is scaled down for it (`_drawBlurred`). */
+const BLUR_SCALE = 2;
+
 /** The qualities `imageSmoothingQuality` takes, canvas's. */
 const SMOOTHING_QUALITIES = new Set(['low', 'medium', 'high']);
 
@@ -525,6 +574,15 @@ export class BackendContext2D {
     this._filters = ['createSurface', 'ctxGetImageData', 'ctxPutImageData']
       .map((name) => name in native && typeof native[name] === 'function')
       .every(Boolean);
+    // and a radial gradient's fill, @windowkit/appkit 0.28.0's: where the
+    // bridge has none, the flat stand-in it always had, which takes no
+    // circles — the one a caller asks for, and keys on
+    if (!(
+      'ctxFillRadialGradient' in native &&
+      typeof native.ctxFillRadialGradient === 'function'
+    )) {
+      this.createRadialGradient = flatRadialGradient;
+    }
     this._onDirty = null;
     // the recorded path, and whether the native one still matches it (a
     // chunked stroke leaves only its last chunk behind)
@@ -1330,9 +1388,13 @@ export class BackendContext2D {
     return new LinearGradient(x0, y0, x1, y1);
   }
 
-  createRadialGradient() {
-    // radial paints flat until someone needs it; the stop list still works
-    return new LinearGradient(0, 0, 0, 0);
+  createRadialGradient(x0, y0, r0, x1, y1, r1) {
+    if (r0 < 0 || r1 < 0) {
+      throw new RangeError(
+        "Failed to execute 'createRadialGradient': a radius is negative.",
+      );
+    }
+    return new RadialGradient(x0, y0, r0, x1, y1, r1);
   }
 
   _applyFill() {
@@ -1452,7 +1514,14 @@ export class BackendContext2D {
   _fillPath(rule) {
     this._path();
     const style = this._state.fillStyle;
-    if (style instanceof LinearGradient) {
+    if (style instanceof RadialGradient) {
+      const { circles, flat: stops } = style._normalized();
+      this._native.ctxFillRadialGradient(
+        this._s(),
+        ...circles,
+        this._stops(stops),
+      );
+    } else if (style instanceof LinearGradient) {
       const { coords, flat: stops } = style._normalized();
       const flat = this._stops(stops);
       this._native.ctxFillLinearGradient(
@@ -1688,7 +1757,18 @@ export class BackendContext2D {
 
   _fillRectNow(x, y, w, h) {
     const style = this._state.fillStyle;
-    if (style instanceof LinearGradient) {
+    if (style instanceof RadialGradient) {
+      const { circles, flat: stops } = style._normalized();
+      this._native.ctxFillRadialGradient(
+        this._s(),
+        ...circles,
+        this._stops(stops),
+        x,
+        y,
+        w,
+        h,
+      );
+    } else if (style instanceof LinearGradient) {
       const { coords, flat: stops } = style._normalized();
       const flat = this._stops(stops);
       this._native.ctxFillLinearGradient(
@@ -1802,6 +1882,10 @@ export class BackendContext2D {
    * resampling an `imageSmoothingQuality` sets all take as before.
    */
   _drawFiltered(src, size, [sx, sy, sw, sh, dx, dy, dw, dh], ink) {
+    if (ink.blur > 0) {
+      this._drawBlurred(src, size, [sx, sy, sw, sh, dx, dy, dw, dh], ink);
+      return;
+    }
     const x0 = Math.max(0, Math.floor(sx));
     const y0 = Math.max(0, Math.floor(sy));
     const w = Math.min(size.width, Math.ceil(sx + sw)) - x0;
@@ -1832,6 +1916,83 @@ export class BackendContext2D {
     }
   }
 
+  /**
+   * `drawImage` under a filter with a `blur()`: the part of the source the
+   * source rect covers and as far round it as the blur reaches, three
+   * standard deviations, scaled down so that the blur is a few pixels
+   * across — the resampling the bridge does as it draws, which averages —
+   * blurred and run through the rest of the filter there, and drawn back up
+   * over the destination and as far round it, smoothed. A Gaussian is
+   * smooth to the scale it was taken at, so the pixels it lost scaling down
+   * were ones it would have blurred away, as Skia blurs a large radius. What
+   * is past the source is nothing, which a blur fades into, as canvas has it.
+   */
+  _drawBlurred(src, size, [sx, sy, sw, sh, dx, dy, dw, dh], ink) {
+    if (!(sw > 0 && sh > 0 && dw !== 0 && dh !== 0)) return;
+    // the blur in source pixels, across and down
+    const bx = (ink.blur * sw) / Math.abs(dw);
+    const by = (ink.blur * sh) / Math.abs(dh);
+    const mx = Math.ceil(3 * bx);
+    const my = Math.ceil(3 * by);
+    // what is read, in source pixels, the source's part of it, and the
+    // factor it is scaled down by
+    const left = Math.floor(sx) - mx;
+    const top = Math.floor(sy) - my;
+    const across = Math.ceil(sx + sw) + mx - left;
+    const down = Math.ceil(sy + sh) + my - top;
+    const factor = Math.max(1, Math.floor(Math.min(bx, by) / BLUR_SCALE));
+    const w = Math.max(1, Math.ceil(across / factor));
+    const h = Math.max(1, Math.ceil(down / factor));
+    const n = this._native;
+    const small = n.createSurface(w, h, 1);
+    const st = this._state;
+    try {
+      const ix = Math.max(0, left);
+      const iy = Math.max(0, top);
+      const iw = Math.min(size.width, left + across) - ix;
+      const ih = Math.min(size.height, top + down) - iy;
+      if (iw > 0 && ih > 0) {
+        if (this._smoothing) n.ctxSetImageSmoothing(small, 'high');
+        n.ctxDrawSurface(
+          small,
+          src,
+          ix,
+          iy,
+          iw,
+          ih,
+          (ix - left) / factor,
+          (iy - top) / factor,
+          iw / factor,
+          ih / factor,
+        );
+      }
+      const pixels = n.ctxGetImageData(small, 0, 0, w, h);
+      blurPixels(pixels, w, h, Math.min(bx, by) / factor);
+      if (ink.matrices.length || ink.alpha < 1) {
+        filterPixels(pixels, pixels, ink);
+      }
+      n.ctxPutImageData(small, pixels, w, h, 0, 0);
+      st.filterInk = null;
+      // the destination's units a source pixel is
+      const kx = dw / sw;
+      const ky = dh / sh;
+      this.drawImage(
+        { _surfaceHandle: small },
+        0,
+        0,
+        across / factor,
+        down / factor,
+        dx + (left - sx) * kx,
+        dy + (top - sy) * ky,
+        across * kx,
+        down * ky,
+      );
+    } finally {
+      st.filterInk = ink;
+      release(n, small);
+    }
+  }
+
   /**
    * Whether a surface is drawn under this `globalAlpha` from its pixels
    * scaled by it (@windowkit/appkit's `ctxDrawSurfaceFaded`): where the
@@ -2129,7 +2290,7 @@ export class BackendContext2D {
       ];
     }
     const style = this._state.fillStyle;
-    return style instanceof LinearGradient ? BLACK : parseColor(style);
+    return style instanceof Gradient ? BLACK : parseColor(style);
   }
 
   // --- text (minimal: enough for <canvas onDraw> users) --------------------

package/src/backend/filter.js

@@ -9,10 +9,21 @@
 // glyph run's ink and a symbol's colour are filtered by filtering the colour
 // they are drawn in, exactly. An image and a surface are filtered pixel by
 // pixel, and a text layout that carries colours of its own on a surface of
-// its own (src/backend/context2d.js). `blur()`, `drop-shadow()` and a
-// `url()` reach past what is drawn, which a colour cannot say; this context
-// does not apply them, so a list with one in it does not stick, and a
-// caller knows from reading the property back.
+// its own (src/backend/context2d.js). `drop-shadow()` and a `url()` reach
+// past what is drawn, which a colour cannot say; this context does not
+// apply them, so a list with one in it does not stick, and a caller knows
+// from reading the property back.
+//
+// `blur()` reaches past what is drawn too, and is applied to an image or a
+// surface drawn — `drawImage`, what a renderer composites a layer of its
+// own with, CSS's `backdrop-filter` among them — by blurring its pixels
+// (`blurPixels`). A fill, a stroke and text are drawn sharp under it, in
+// the colours the rest of the list makes. Its standard deviation is in the
+// units `drawImage`'s destination is given in. Several `blur()`s are one,
+// the root of the sum of their squares, as two Gaussians make one; and each
+// colour function here is a linear map on premultiplied colour, which a
+// blur, a weighted sum of premultiplied pixels, commutes with, so where in
+// the list a blur is written changes nothing but where the clamps fall.
 
 /** A function's amount where none is written: all of the effect for the
  *  ones whose argument is how much of it to take, and none for the others
@@ -38,17 +49,19 @@ const ANGLE_UNITS = {
 };
 
 /**
- * A filter list as this context applies it: `{ matrices, alpha }`, the
- * colour matrices in the order written, each over straight RGB in 0–1 with
- * an offset — none for a function that changes no colour — and what alpha
- * is multiplied by. Null for `none`; undefined for what is no filter list,
- * or one with a function this context does not apply.
+ * A filter list as this context applies it: `{ matrices, alpha, blur }`,
+ * the colour matrices in the order written, each over straight RGB in 0–1
+ * with an offset — none for a function that changes no colour — what alpha
+ * is multiplied by, and the standard deviation of the blur, 0 for none.
+ * Null for `none`; undefined for what is no filter list, or one with a
+ * function this context does not apply.
  */
 export function parseCanvasFilter(value) {
   const text = String(value).trim();
   if (text.toLowerCase() === 'none') return null;
   const matrices = [];
   let alpha = 1;
+  let blur2 = 0;
   let rest = text;
   let seen = 0;
   while (rest.length) {
@@ -57,8 +70,14 @@ export function parseCanvasFilter(value) {
     rest = rest.slice(m[0].length);
     seen += 1;
     const name = m[1].toLowerCase();
-    if (!COLOUR.has(name)) return undefined;
     const arg = m[2].trim();
+    if (name === 'blur') {
+      const radius = arg ? lengthOf(arg) : 0;
+      if (radius === null || radius < 0) return undefined;
+      blur2 += radius * radius;
+      continue;
+    }
+    if (!COLOUR.has(name)) return undefined;
     if (name === 'hue-rotate') {
       const angle = arg ? angleOf(arg) : 0;
       if (angle === null) return undefined;
@@ -76,12 +95,24 @@ export function parseCanvasFilter(value) {
     if (matrix) matrices.push(matrix);
   }
   if (!seen) return undefined;
-  return { matrices, alpha };
+  return { matrices, alpha, blur: Math.sqrt(blur2) };
 }
 
 /** Whether a parsed filter changes anything drawn. */
 export function filters(filter) {
-  return !!filter && (filter.matrices.length > 0 || filter.alpha < 1);
+  return (
+    !!filter &&
+    (filter.matrices.length > 0 || filter.alpha < 1 || filter.blur > 0)
+  );
+}
+
+/** A length in pixels; a bare 0 is one. */
+function lengthOf(arg) {
+  const m = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(px)?$/i.exec(arg);
+  if (!m) return null;
+  const n = Number(m[1]);
+  if (!Number.isFinite(n)) return null;
+  return m[2] || n === 0 ? n : null;
 }
 
 /** A number or a percentage of one. */
@@ -283,3 +314,117 @@ export function filterPixels(src, dst, filter) {
 function clampByte(v) {
   return v <= 0 ? 0 : v >= 255 ? 255 : Math.round(v);
 }
+
+/**
+ * Straight RGBA pixels, 0–255, `width` by `height`, blurred in place by a
+ * Gaussian of standard deviation `sigma` pixels: three box blurs across and
+ * three down, each as wide as the Gaussian they come to (Kovesi, "Fast
+ * almost-Gaussian filtering", 2010), on premultiplied colour — a blur of
+ * straight colour bleeds the colour of what is transparent into its edge —
+ * with nothing past the edge, as canvas has it.
+ */
+export function blurPixels(pixels, width, height, sigma) {
+  if (!(sigma > 0) || !(width > 0 && height > 0)) return;
+  const n = width * height;
+  // premultiplied, the four channels of a pixel side by side
+  const plane = new Float32Array(n * 4);
+  for (let p = 0; p < n * 4; p += 4) {
+    const alpha = pixels[p + 3] / 255;
+    plane[p] = pixels[p] * alpha;
+    plane[p + 1] = pixels[p + 1] * alpha;
+    plane[p + 2] = pixels[p + 2] * alpha;
+    plane[p + 3] = pixels[p + 3];
+  }
+  const line = new Float32Array(Math.max(width, height) * 4);
+  for (const radius of boxRadii(sigma)) {
+    if (radius < 1) continue;
+    boxPass(plane, width, height, radius, 4, width * 4, line);
+    boxPass(plane, height, width, radius, width * 4, 4, line);
+  }
+  for (let p = 0; p < n * 4; p += 4) {
+    const alpha = plane[p + 3];
+    if (alpha <= 0.5) {
+      pixels[p] = pixels[p + 1] = pixels[p + 2] = pixels[p + 3] = 0;
+      continue;
+    }
+    const k = 255 / alpha;
+    pixels[p] = clampByte(plane[p] * k);
+    pixels[p + 1] = clampByte(plane[p + 1] * k);
+    pixels[p + 2] = clampByte(plane[p + 2] * k);
+    pixels[p + 3] = clampByte(alpha);
+  }
+}
+
+/** The radii of three box blurs that come to a Gaussian of `sigma`. */
+function boxRadii(sigma) {
+  const passes = 3;
+  const ideal = Math.sqrt((12 * sigma * sigma) / passes + 1);
+  let lower = Math.floor(ideal);
+  if (lower % 2 === 0) lower -= 1;
+  const upper = lower + 2;
+  const m = Math.round(
+    (12 * sigma * sigma -
+      passes * lower * lower -
+      4 * passes * lower -
+      3 * passes) /
+      (-4 * lower - 4),
+  );
+  const out = [];
+  for (let i = 0; i < passes; i += 1) {
+    out.push(((i < m ? lower : upper) - 1) / 2);
+  }
+  return out;
+}
+
+/**
+ * One box blur of `radius` along every line of a plane of RGBA pixels:
+ * `lines` lines of `length` pixels, a pixel `step` values from the next
+ * along a line and a line `stride` values from the next. Past either end
+ * is nothing.
+ */
+function boxPass(plane, length, lines, radius, step, stride, line) {
+  const scale = 1 / (2 * radius + 1);
+  for (let l = 0; l < lines; l += 1) {
+    const base = l * stride;
+    for (let i = 0, q = base; i < length; i += 1, q += step) {
+      const o = i * 4;
+      line[o] = plane[q];
+      line[o + 1] = plane[q + 1];
+      line[o + 2] = plane[q + 2];
+      line[o + 3] = plane[q + 3];
+    }
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    let a = 0;
+    for (let i = 0; i <= radius && i < length; i += 1) {
+      const o = i * 4;
+      r += line[o];
+      g += line[o + 1];
+      b += line[o + 2];
+      a += line[o + 3];
+    }
+    for (let i = 0, q = base; i < length; i += 1, q += step) {
+      plane[q] = r * scale;
+      plane[q + 1] = g * scale;
+      plane[q + 2] = b * scale;
+      plane[q + 3] = a * scale;
+      const enter = i + radius + 1;
+      if (enter < length) {
+        const o = enter * 4;
+        r += line[o];
+        g += line[o + 1];
+        b += line[o + 2];
+        a += line[o + 3];
+      }
+      const leave = i - radius;
+      if (leave >= 0) {
+        const o = leave * 4;
+        r -= line[o];
+        g -= line[o + 1];
+        b -= line[o + 2];
+        a -= line[o + 3];
+      }
+    }
+  }
+}

package/src/frame/childmain.js

@@ -168,6 +168,18 @@ export async function runFrameChild(transport, options = {}) {
   }
   markFramed();
 
+  // The host's watchdog asks whether this process is still answering; the
+  // answer comes from the event loop, which is the thing it asks about.
+  // From the first moment, since the host asks from its hello on.
+  transport.onMessage((msg) => {
+    if (msg?.type !== 'ping') return;
+    try {
+      transport.send({ type: 'pong', seq: msg.seq });
+    } catch {
+      // the host is going away
+    }
+  });
+
   const hello = await new Promise((resolve) => {
     const off = transport.onMessage((msg) => {
       if (msg?.type !== 'hello') return;

package/src/frame/index.js

@@ -146,6 +146,32 @@ function paneEnv(env, display) {
  * something else restarts the pane. Throws on what a fork cannot take,
  * which the session reports as a `spawn` failure.
  */
+/** How long a pane may go without answering by default: long enough for a
+ *  pane that is working, through a collection or a long layout, short
+ *  enough that one that is not is noticed before the reader gives up. */
+const WATCHDOG_MS = 15000;
+
+/**
+ * The watchdog's limit, in ms, or 0 where the pane is not watched: `false`,
+ * or a pane started under the inspector — by its own flags, this process's
+ * that it inherits, or `NODE_OPTIONS` — which a debugger stops on purpose.
+ * The flags that turn the inspector on, and not its kin that only set it
+ * up: Node's test runner hands every test process `--inspect-port` and
+ * `--inspect-publish-uid`, and a pane in a test is not being debugged.
+ */
+function watchdogMs(watchdog, execArgv) {
+  if (watchdog === false) return 0;
+  const limit = Number(watchdog);
+  if (!(limit > 0)) return 0;
+  const flags = [
+    ...process.execArgv,
+    ...(execArgv ?? []),
+    ...(process.env.NODE_OPTIONS ?? '').split(/\s+/),
+  ];
+  return flags.some((flag) => INSPECTING.test(flag)) ? 0 : limit;
+}
+const INSPECTING = /^--inspect(?:-brk|-wait)?(?:=|$)/;
+
 function launchOf(execArgv, env) {
   if (
     execArgv !== undefined &&
@@ -275,6 +301,7 @@ export function Frame({
   display,
   execArgv,
   env: processEnv,
+  watchdog = WATCHDOG_MS,
   bridge = true,
   fallback,
   focusable,
@@ -328,6 +355,8 @@ export function Frame({
   }
   const paneProcess = useRef(null);
   paneProcess.current = { execArgv: execArgv ?? [], env: processEnv ?? {} };
+  // how long the pane may go without answering, where it is watched at all
+  const watched = watchdogMs(watchdog, execArgv);
 
   // The session: one child process per (src, display, the process's flags
   // and environment, transport, restart).
@@ -382,6 +411,8 @@ export function Frame({
       fatal: null,
       sent: null,
       shutdown: null,
+      answered: performance.now(),
+      watch: null,
     };
     session.current = s;
 
@@ -410,6 +441,8 @@ export function Frame({
           pid: t.pid ?? null,
           windowId: msg.windowId,
         });
+      } else if (msg?.type === 'pong') {
+        s.answered = performance.now();
       } else if (msg?.type === 'invoke') {
         s.table.invoke(msg.id, msg.args);
       } else if (msg?.type === 'fatal') {
@@ -427,6 +460,7 @@ export function Frame({
     };
     offExit = t.onExit(({ code = null, signal = null, error } = {}) => {
       clearEscalation?.();
+      clearInterval(s.watch);
       detach();
       const expected = s.closing;
       if (alive && !expected) {
@@ -455,6 +489,7 @@ export function Frame({
     s.shutdown = () => {
       if (s.closing) return;
       s.closing = true;
+      clearInterval(s.watch);
       let sent = false;
       try {
         t.send({ type: 'unmount' });
@@ -503,6 +538,48 @@ export function Frame({
       ...(paneApp?.playsForPanes && { players: true }),
     });
 
+    // The watchdog. A pane whose event loop is stuck stays `running`, is
+    // sent updates it never reads, and on X11 holds the keys while the
+    // pointer is over it — and says nothing. So it is asked, about once a
+    // second, and answers from its event loop (`runFrameChild`); one that
+    // has not answered in `watchdog` ms has stopped, and goes the way a
+    // pane that crashed goes: failed, phase `'unresponsive'`, and its
+    // process ended, so `fallback` can offer to start it again. A tick of
+    // this side's own that comes late — the machine slept, or this
+    // process was the one stuck — is no news of the pane's, and the
+    // count starts again from it.
+    if (watched > 0) {
+      const every = Math.max(50, Math.min(1000, watched / 4));
+      let ticked = performance.now();
+      let seq = 0;
+      s.watch = setInterval(() => {
+        if (s.closing) return;
+        const now = performance.now();
+        const late = now - ticked > every * 3;
+        ticked = now;
+        if (late) s.answered = now;
+        else if (now - s.answered > watched) {
+          clearInterval(s.watch);
+          const message = `the pane stopped answering for ${Math.round(
+            now - s.answered,
+          )} ms`;
+          s.fatal = { phase: 'unresponsive', message };
+          fail(Object.assign(new Error(message), { phase: 'unresponsive' }));
+          // it cannot read an unmount: ended, from outside
+          t.kill?.('SIGTERM');
+          const kill = setTimeout(() => t.kill?.('SIGKILL'), 2000);
+          kill.unref?.();
+          return;
+        }
+        try {
+          t.send({ type: 'ping', seq: (seq += 1) });
+        } catch {
+          // the channel is going; the exit says the rest
+        }
+      }, every);
+      s.watch.unref?.();
+    }
+
     return () => {
       alive = false;
       s.shutdown();
@@ -512,7 +589,15 @@ export function Frame({
       // ask, and everything is unref'd so nothing holds the host open
       if (session.current === s) session.current = null;
     };
-  }, [source, display, launch, generation, makeTransport, canShowPane]);
+  }, [
+    source,
+    display,
+    launch,
+    generation,
+    makeTransport,
+    canShowPane,
+    watched,
+  ]);
 
   // One update per commit that changed the pane's inputs, props and env in
   // the same message — so a theme flip and the state change that caused it

package/src/frame/protocol.js

@@ -3,17 +3,19 @@
 // channel (the fork transport), a loopback pair (the tests), or whatever a
 // custom transport is built on.
 //
-// Six messages, all objects with a `type`:
+// Eight messages, all objects with a `type`:
 //
 //   parent → child
 //     hello    { protocol, src, display, rect, props, env, players? }   first, once
 //     update   { props, env }        full snapshots, one per parent commit
 //     unmount  {}                    run close handlers, unmount, exit
+//     ping     { seq }               the watchdog: still answering?
 //
 //   child → parent
 //     ready    { windowId }          the pane mounted; embed this
 //     invoke   { id, args }          a bridged callback fired
 //     fatal    { phase, message, stack }   why the exit about to happen is one
+//     pong     { seq }               yes, from the event loop
 //
 // Values cross by **structured clone** (fork uses `serialization:
 // 'advanced'`), so Dates, Maps, TypedArrays and cycles survive — and
@@ -33,7 +35,9 @@
 // what makes the grace window about racing messages rather than about how
 // the app was written.
 
-export const PROTOCOL = 1;
+// 2: the watchdog's ping and pong. A pane of protocol 1 answers no ping,
+// and would be ended as one that stopped; it fails the handshake instead.
+export const PROTOCOL = 2;
 
 /** The marker key a function in `props` becomes on the wire. */
 export const CALLBACK = '$$reactX11FrameCallback';

package/src/node.d.ts

@@ -90,10 +90,11 @@ export interface Context2D {
    * Canvas's: a CSS filter list applied to what is drawn after it. Native
    * contexts only (macOS, Windows), and only the colour functions —
    * `grayscale()`, `sepia()`, `saturate()`, `hue-rotate()`, `invert()`,
-   * `brightness()`, `contrast()` and `opacity()` — over a bridge that reads
-   * a surface's pixels back. Anything else does not stick: assign and read
-   * back to know. Absent on X11, whose server runs no colour matrix and
-   * answers a read a round trip later.
+   * `brightness()`, `contrast()` and `opacity()` — and `blur()`, which
+   * blurs what `drawImage` draws and leaves fills, strokes and text sharp,
+   * over a bridge that reads a surface's pixels back. Anything else does
+   * not stick: assign and read back to know. Absent on X11, whose server
+   * runs no colour matrix and answers a read a round trip later.
    */
   filter?: string;
   save(): void;

package/src/types/frame.d.ts

@@ -16,7 +16,7 @@ export type FrameProps = Record<string, unknown>;
 /** Why a pane is not running, for `fallback` and `onExit` to read. */
 export interface FrameError extends Error {
   /** Where it went wrong: `'spawn' | 'load' | 'connect' | 'handshake' |
-   * 'runtime' | 'send' | 'embed' | 'exit'`. */
+   * 'runtime' | 'send' | 'embed' | 'unresponsive' | 'exit'`. */
   phase?: string;
   code?: number | null;
   signal?: string | null;
@@ -53,6 +53,14 @@ export interface FrameComponentProps {
    * the same flags in a new array do not.
    */
   execArgv?: readonly string[];
+  /**
+   * How long the pane may go without answering, in ms, before it is taken
+   * for one whose event loop is stuck: failed with phase `'unresponsive'`,
+   * its process ended, and `fallback` shown. Asked about once a second,
+   * from its event loop. Default 15000; `false` never. A pane started
+   * under the inspector is never watched.
+   */
+  watchdog?: number | false;
   /**
    * Environment variables for the pane's process, over this one's; a value
    * of `undefined` takes a variable away. `DISPLAY` is `display`'s and

package/src/wayland/glcontext.js

@@ -255,7 +255,11 @@ export class WaylandGLContext {
     if (this.destroyed) return null;
     const w = this.window.bufferWidth;
     const h = this.window.bufferHeight;
-    const surface = this.chain.surfaceFor(w, h);
+    // a window whose viewport shows part of a buffer keeps its buffers
+    // through a resize that fits them (`surfaceFor`'s slack)
+    const surface = this.chain.surfaceFor(w, h, {
+      slack: this.window.showsPartOfBuffer === true,
+    });
     this._surface = surface;
     this.gpu.makeCurrent(surface);
     let resized = false;
@@ -321,11 +325,12 @@ export class WaylandGLContext {
     // next buffer might be missing. Then the GPU work is settled (optionally
     // through a fence rather than a stall) before the swap hands it over.
     const rects = this.chain.blitHint(damage);
+    // into the top left of a buffer that may be larger than the window
     this.backing.blitTo(
       null,
       rects === 'all' ? null : rects,
-      this.chain.width,
-      this.chain.height,
+      this.chain.allocWidth,
+      this.chain.allocHeight,
     );
     await this._settleGpu();
 
@@ -338,6 +343,9 @@ export class WaylandGLContext {
     // is EGL_BAD_SURFACE (0x300d): the second window of examples/windows.jsx.
     this.gpu.makeCurrent(this._surface);
     const presented = await this.chain.swap(damage);
+    // the part of the buffer just attached that is the window — only with a
+    // buffer, since the one shown otherwise is the last, of its own size
+    if (presented) win.showBufferPart?.(this.chain.width, this.chain.height);
     // `swap` attached and damaged but did not commit; and when nothing went
     // out — every buffer busy — the frame request still needs a commit to be
     // delivered. Either way, exactly one commit.

package/src/wayland/swapchain.js

@@ -59,6 +59,20 @@ import { importDmabuf, DmabufRefused } from './dmabuf.js';
 /** How many frames may be in the compositor's hands at once. */
 const DEFAULT_MAX_IN_FLIGHT = 2;
 
+/**
+ * Buffers are made a multiple of this larger than the window where they
+ * may be (`slack`), so that a resize a few pixels at a time — a window edge
+ * dragged — shows a different part of the same buffers rather than making
+ * new ones at every step.
+ */
+const SLACK_STEP = 128;
+/** A visible area this many times smaller than the buffers makes them
+ *  again, smaller: a window shrunk far is not to hold its old size's
+ *  memory. */
+const SLACK_SHRINK = 4;
+/** Frames at one size before buffers grown for a drag are cut back to it. */
+const SLACK_SETTLE = 60;
+
 /**
  * Damage sets are kept small: past a handful of rectangles the bookkeeping
  * costs more than the full-surface copy it is trying to avoid, and the
@@ -92,8 +106,14 @@ export class WaylandSwapchain {
     this.gbm = null;
     /** `${generation}:${key}` -> { wlBuffer, busy, damage, key, generation } */
     this.buffers = new Map();
+    /** the part of each buffer shown: the window's buffer size */
     this.width = 0;
     this.height = 0;
+    /** the buffers' own size, at least the part shown (`slack`) */
+    this.allocWidth = 0;
+    this.allocHeight = 0;
+    /** frames since the size shown last changed */
+    this._sameSize = 0;
     /** set once the compositor has refused a tiled buffer */
     this.linear = false;
     /** swaps since a buffer was last seen for the first time */
@@ -111,14 +131,66 @@ export class WaylandSwapchain {
   /**
    * Point the chain at a size.
    *
+   * With `slack` — where the window has a viewport, whose source rectangle
+   * shows part of a buffer — the buffers are made larger than the size and
+   * kept while it fits in them: dragging a window's edge used to make the
+   * chain's buffers again at every step, and import each one into the
+   * compositor, a dozen requests and a GPU allocation a step. Without it,
+   * the buffers are the size exactly, as a surface with no viewport shows
+   * all of its buffer.
+   *
+   * @param {number} width
+   * @param {number} height
+   * @param {{ slack?: boolean }} [opts]
    * @returns the GBM surface to draw into
    */
-  surfaceFor(width, height) {
+  surfaceFor(width, height, { slack = false } = {}) {
     const w = Math.max(1, Math.round(width));
     const h = Math.max(1, Math.round(height));
-    if (!this.gbm) return this._create(w, h);
-    if (w === this.width && h === this.height) return this.gbm;
+    if (!this.gbm) {
+      const [aw, ah] = slack ? slackFor(w, h, 1) : [w, h];
+      this._create(aw, ah);
+      this.width = w;
+      this.height = h;
+      return this.gbm;
+    }
+    if (w === this.width && h === this.height) {
+      // A size held a while is given buffers its own size again, where a
+      // drag left them larger than it needs.
+      if (
+        ++this._sameSize === SLACK_SETTLE &&
+        (this.allocWidth !== w || this.allocHeight !== h)
+      ) {
+        const [aw, ah] = slack ? slackFor(w, h, 1) : [w, h];
+        if (aw !== this.allocWidth || ah !== this.allocHeight)
+          this._resize(aw, ah);
+      }
+      return this.gbm;
+    }
+    this._sameSize = 0;
+    if (
+      slack &&
+      w <= this.allocWidth &&
+      h <= this.allocHeight &&
+      w * h * SLACK_SHRINK >= this.allocWidth * this.allocHeight
+    ) {
+      // The buffers hold it: show another part of them. What each holds is
+      // of the old size, so all of it is owed to it.
+      this.width = w;
+      this.height = h;
+      for (const entry of this.buffers.values()) entry.damage = 'all';
+      return this.gbm;
+    }
+    const growing = w > this.allocWidth || h > this.allocHeight;
+    const [aw, ah] = slack ? slackFor(w, h, growing ? 1.25 : 1) : [w, h];
+    this._resize(aw, ah);
+    this.width = w;
+    this.height = h;
+    return this.gbm;
+  }
 
+  /** Give the chain buffers of this size, keeping its GBM surface. */
+  _resize(w, h) {
     // In place: the handle stays valid, the context keeps its GL objects and
     // stays current. Buffers from the old generation are gone, so their
     // `wl_buffer`s go with them — the compositor may still be showing one, so
@@ -132,14 +204,13 @@ export class WaylandSwapchain {
           { cause: err },
         ),
       );
-      return this.gbm;
+      return;
     }
     this._dropBuffers();
-    this.width = w;
-    this.height = h;
+    this.allocWidth = w;
+    this.allocHeight = h;
     this.inFlight = 0;
     this._swapsSinceNew = 0;
-    return this.gbm;
   }
 
   _create(w, h) {
@@ -157,8 +228,8 @@ export class WaylandSwapchain {
         { cause: err },
       );
     }
-    this.width = w;
-    this.height = h;
+    this.allocWidth = w;
+    this.allocHeight = h;
     this._swapsSinceNew = 0;
     return this.gbm;
   }
@@ -285,7 +356,8 @@ export class WaylandSwapchain {
       this.policy.linearFallback &&
       !this.linear
     ) {
-      const { width, height } = this;
+      // the buffers again, at the size they were: the part shown stays
+      const { allocWidth: width, allocHeight: height } = this;
       this.linear = true;
       this._dropBuffers();
       try {
@@ -409,3 +481,14 @@ export function unionDamage(a, b) {
   const merged = [...a, ...b];
   return merged.length > MAX_RECTS ? 'all' : merged;
 }
+
+/**
+ * Buffers for a size, with room to grow: each side rounded up to a
+ * multiple of `SLACK_STEP`, after `grow` — 1.25 for a size outgrowing the
+ * buffers it had, so a window dragged wider makes a few sets of buffers
+ * rather than one a bucket.
+ */
+function slackFor(w, h, grow) {
+  const up = (v) => Math.ceil((v * grow) / SLACK_STEP) * SLACK_STEP;
+  return [up(w), up(h)];
+}

package/src/wayland/window.js

@@ -182,6 +182,8 @@ export class WaylandWindow extends EventEmitter {
       this._onConfigured = resolve;
     });
     this._viewport = null;
+    /** the part of the buffer the viewport shows, once one is attached */
+    this._shownPart = null;
     this._fractional = null;
     this._geometry = null;
     /** the xdg-decoration object, where the compositor has the protocol (ssd.js) */
@@ -545,6 +547,31 @@ export class WaylandWindow extends EventEmitter {
     }
   }
 
+  /**
+   * Whether the surface shows a part of its buffer, the top left
+   * `bufferWidth` by `bufferHeight` of it, rather than all of it: where the
+   * compositor has a viewport to say so. The buffer may then be larger than
+   * the window, and is kept as the window is resized within it.
+   */
+  get showsPartOfBuffer() {
+    return this._viewport !== null;
+  }
+
+  /**
+   * Show the top left `width` by `height` of the buffer the next commit
+   * attaches (`showsPartOfBuffer`). Only with a commit that attaches one at
+   * least that large: a source rectangle past the buffer shown is a protocol
+   * error, and a commit with no new buffer — every buffer busy, a configure
+   * acked — shows the old one. In buffer pixels, the buffer scale being 1.
+   */
+  showBufferPart(width, height) {
+    if (!this._viewport) return;
+    const shown = this._shownPart;
+    if (shown && shown.width === width && shown.height === height) return;
+    this._shownPart = { width, height };
+    this._viewport.$.set_source(0, 0, width, height);
+  }
+
   /** The size the backing buffer has to be for the current scale. */
   get bufferWidth() {
     return Math.max(1, Math.round(this.width * this.scale));