react-x11 2.18.3 → 2.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.18.3",
+  "version": "2.18.4",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/Reconciler.js

@@ -67,6 +67,7 @@ import { watchAppearance } from './appearance.js';
 import { setDesktopIntegration } from './desktopintegration.js';
 import { ForeignNode } from './foreignnodes.js';
 import { GlAreaNode } from './glnodes.js';
+import { beginGlOverlay } from './gloverlay.js';
 import {
   createRegisteredNode,
   elementDefinition,
@@ -954,11 +955,17 @@ export async function createRoot(options = {}) {
   // extension; the scale ladder; the monitor layout and the work-area
   // property), so they run concurrently: each is internally a chain of one
   // to three round trips, and awaiting them in sequence made every app pay
-  // the sum where the slowest chain is the true floor.
+  // the sum where the slowest chain is the true floor. The fourth is a
+  // single extension query, too short to set that floor: whether this is
+  // XQuartz, the X server nothing can be drawn over a GL surface on, which
+  // decides whether a `<glarea>`'s children get panes and what
+  // `useSupports('glOverlay')` answers on the first render
+  // (src/gloverlay.js).
   await Promise.all([
     beginCompositing(app),
     beginScale(app, rest.scale),
     beginScreens(app),
+    beginGlOverlay(app),
   ]);
 
   // How fast a caret blinks, how long a double click has, how far a press

package/src/appcontext.js

@@ -60,9 +60,10 @@ export function useApp() {
 }
 
 // 'nativeControls', 'embedding' and 'glOverlay' are properties of the
-// backend, decided before the first render and never changing after — so
-// their subscription has nothing to deliver and their snapshot is a property
-// test.
+// backend — and 'glOverlay' of the X server too, which `createRoot` asks
+// before the first render (src/gloverlay.js) — decided before anything
+// renders and never changing after, so their subscription has nothing to
+// deliver and their snapshot is a property test.
 const NEVER_CHANGES = () => () => {};
 
 // What `useSupports` watches and reads, per feature. `read` answers a
@@ -169,7 +170,10 @@ const FEATURES = {
  * GL surface on this connection — laid out in its box, painted on panes over
  * the surface, hit before it. Both backends draw them; what differs is
  * translucency, composited by Core Animation on the Cocoa backend and opaque
- * on X11 (docs/elements.md says exactly how). It is the question to ask
+ * on X11 (docs/elements.md says exactly how). The exception is XQuartz,
+ * where it is false: the macOS window server composites every GL surface
+ * above everything the X server draws, so nothing can be drawn over one, and
+ * the children are laid out but never drawn. It is the question to ask
  * before handing a surface its HUD rather than drawing that some other way:
  *
  * ```jsx
@@ -177,7 +181,8 @@ const FEATURES = {
  * <glarea onDraw={drawMap}>{overlay && <Legend />}</glarea>
  * ```
  *
- * A property of the backend too, and it never changes.
+ * A property of the backend and the display, settled before the first
+ * render, and it never changes.
  */
 export function useSupports(feature) {
   const app = useApp();

package/src/glnodes.js

@@ -10,9 +10,10 @@ import { cssColorStraight } from 'ntk';
 // re-exported so the GL element layer stays one import for consumers
 export { directGLFailure, hasDirectGL } from './glbackend.js';
 
-import { GlOverlay, canOverlay } from './gloverlay.js';
+import { GlOverlay, canOverlay, overlayRefusal } from './gloverlay.js';
 import { layoutDiff } from './nodes/damage.js';
 import { Node } from './nodes/node.js';
+import { DEV } from './nodes/util.js';
 import { FramePacer, resolveFrameRate } from './pacing.js';
 
 // One visual query per (app, spec): GetFBConfigs is a round trip and every
@@ -37,6 +38,27 @@ function recordGlxFailure(app, err) {
   if (app && err && !glxFailures.has(app)) glxFailures.set(app, err);
 }
 
+// Apps already told that a <glarea>'s children are not drawn on their
+// display. Once per app, as for a <foreign> that cannot embed: the answer
+// belongs to the server, so the next surface to find out carries no news.
+const warnedNoOverlay = new WeakSet();
+
+/**
+ * Say, once per app and in development only, that the children of a
+ * `<glarea>` are not drawn here. They lay out and render like anyone's and
+ * nothing fails, so without this a HUD that never shows looks like a bug in
+ * the HUD.
+ */
+function warnNoOverlay(app) {
+  if (!DEV || !app || warnedNoOverlay.has(app)) return;
+  warnedNoOverlay.add(app);
+  const why = overlayRefusal(app);
+  console.warn(
+    'react-x11: the children of a <glarea> are not drawn on this connection, ' +
+      `and useSupports('glOverlay') is false${why ? ` — ${why}` : ''}.`,
+  );
+}
+
 /**
  * The visual and depth to create the GL child window with.
  *
@@ -121,7 +143,9 @@ const px = (v) => Math.max(1, Math.round(v || 0));
  * The X child window is stacked above everything drawn in the parent, so the
  * parent's 2D content cannot overlap it — but this node's own children do:
  * they are laid out in its box like a `<box>`'s and drawn above the surface,
- * on panes of their own (src/gloverlay.js).
+ * on panes of their own (src/gloverlay.js). Everywhere but XQuartz, where
+ * nothing can be drawn over a GL surface: there they are laid out and not
+ * drawn (`canOverlay`).
  *
  * Pointer input over the surface is the tree's, on both backends: a press,
  * a drag or a wheel over it is a synthetic event at the child under the
@@ -636,7 +660,14 @@ export class GlAreaNode extends Node {
    */
   _syncOverlay() {
     if (!this._overlay) {
-      if (this.children.length === 0 || !canOverlay(this.app)) {
+      // Where nothing can be drawn over the surface the children get no
+      // panes at all, rather than panes nobody sees: on XQuartz a pane over
+      // the whole surface is what hides the GL frame (src/gloverlay.js). So
+      // they are laid out and never drawn, and the pointer over them is the
+      // surface's.
+      const refused = this.children.length !== 0 && !canOverlay(this.app);
+      if (refused) warnNoOverlay(this.app);
+      if (this.children.length === 0 || refused) {
         this.root?._overlaid?.delete(this);
         return false;
       }

package/src/globalmenu.js

@@ -108,6 +108,13 @@ const NO_AUTO_START = 2;
  */
 const menuPathFor = (xid) => `/com/react_x11/menus/${xid}`;
 
+/**
+ * Per window, the moment it is free: settles once every exporter that has
+ * published on it so far has stopped. The next one to publish there waits for
+ * it — see `GlobalMenuExport.takeTurn()`.
+ */
+const vacancies = new Map();
+
 /**
  * The feature's off switch.
  *
@@ -167,6 +174,20 @@ export class GlobalMenuExport extends DbusMenuExport {
     this.path = null;
     this.xid = null;
     this.window = null;
+    /** The windows this exporter has queued for, by xid. Each is held until
+     *  `stop()`, so publishing on one again does not queue behind itself —
+     *  see `takeTurn()`. */
+    this.claimed = new Set();
+    /** Settles when `stop()` is called, `stopped` as a promise, so a publish
+     *  still waiting for its window stops waiting. */
+    this.halted = new Promise((resolve) => {
+      this.halt = resolve;
+    });
+    /** Settles once `stop()` has finished, which is what the next exporter on
+     *  a window this one claimed waits for — see `takeTurn()`. */
+    this.gone = new Promise((resolve) => {
+      this.markGone = resolve;
+    });
   }
 
   // ------------------------------------------------------------------ setup
@@ -281,6 +302,21 @@ export class GlobalMenuExport extends DbusMenuExport {
     // call" case rather than the "too early" one.
     if (!xid) return;
 
+    // One menu per window at a time — see `takeTurn()`.
+    const before = this.takeTurn(xid);
+    if (before) {
+      // Given up if this one is stopped meanwhile. That frees the window no
+      // sooner: whoever is next in line waits for `before` as well.
+      await Promise.race([before, this.halted]);
+      // How long that took is up to the menu ahead, and for a second bar in
+      // the window it is that bar's whole mount. So what `_sync()` decided
+      // before it is stale, and it decides again. A panel that went meanwhile
+      // would otherwise get a RegisterWindow sent to nobody, and the error
+      // ends `start()` in a teardown: a menu that never reaches the next
+      // panel either.
+      return this._sync();
+    }
+
     const dbus = await loadTransport();
     const path = menuPathFor(xid);
     if (!dbus.isValidObjectPath(path)) return;
@@ -320,6 +356,49 @@ export class GlobalMenuExport extends DbusMenuExport {
     this.onChange(true);
   }
 
+  /**
+   * Queue for a window, the first time this exporter publishes on it, and
+   * hand back what to wait for: the moment every exporter that published
+   * there before this one has stopped, or `null` when there is nothing to
+   * wait for.
+   *
+   * **One menu per window at a time.** Everything a menu holds is per window:
+   * the object at `menuPathFor(xid)`, the registrar's entry for the xid, and
+   * the two X properties. A `<MenuBar>` remounted in its window, or one with
+   * `globalMenu` switched off and on, puts a new exporter on all three while
+   * the old one is still leaving — its teardown asks `ListNames` and waits
+   * for `UnregisterWindow` before it unexports. That unexport is
+   * dbus-native's `registration.remove()`, which removes whatever is at the
+   * path when it runs, whoever exported it. So the new menu lost its object
+   * while the registrar and the properties still named it, and its bar,
+   * told `exported`, drew nothing: no menu anywhere. The old one's
+   * unregistration and property deletes race the new one's registration and
+   * property writes the same way. They happened to land first, which is
+   * harmless, but nothing made them, so the whole publish waits and not only
+   * the export. A second bar in a window that already has one waits too: it
+   * stays drawn in the window until the first one goes, rather than
+   * displacing it.
+   *
+   * Every one before it, not only the last: a menu stopped while it was
+   * still waiting is gone at once, and the one it was waiting for may not
+   * be.
+   *
+   * A window is held until this exporter stops, not only while it is
+   * published, so a panel that restarts gets the menu back from the same
+   * exporter without it queueing behind itself.
+   */
+  takeTurn(xid) {
+    if (this.claimed.has(xid)) return null;
+    this.claimed.add(xid);
+    const before = vacancies.get(xid);
+    const vacated = Promise.all([before, this.gone]);
+    vacancies.set(xid, vacated);
+    void vacated.then(() => {
+      if (vacancies.get(xid) === vacated) vacancies.delete(xid);
+    });
+    return before ?? null;
+  }
+
   /**
    * Plasma reads these instead of asking the registrar.
    *
@@ -390,15 +469,24 @@ export class GlobalMenuExport extends DbusMenuExport {
   async stop() {
     if (this.stopped) return;
     // Set first, so a publish already in flight sees it and undoes itself at
-    // its next checkpoint rather than finishing.
+    // its next checkpoint rather than finishing, and one still waiting for
+    // its window stops waiting.
     this.stopped = true;
-    // Then wait for it. `teardown()` reads `registration`, `xid` and `window`
-    // across several awaits of its own, so running it *beside* a publish lets
-    // each undo the other's work: the classic end state is `exported === true`
-    // with the object unexported and the window unregistered — no bar in the
-    // window, nothing in the panel, and no event left that could recover it.
-    await this.syncing?.catch(() => {});
-    await this.teardown();
+    this.halt();
+    try {
+      // Then wait for it. `teardown()` reads `registration`, `xid` and
+      // `window` across several awaits of its own, so running it *beside* a
+      // publish lets each undo the other's work: the classic end state is
+      // `exported === true` with the object unexported and the window
+      // unregistered — no bar in the window, nothing in the panel, and no
+      // event left that could recover it.
+      await this.syncing?.catch(() => {});
+      await this.teardown();
+    } finally {
+      // Whatever happened, the window is free: the next menu on it would
+      // otherwise wait for good, and never reach the panel.
+      this.markGone();
+    }
   }
 
   async teardown() {
@@ -427,6 +515,14 @@ export class GlobalMenuExport extends DbusMenuExport {
   }
 }
 
+/** Test seam, not public: forget which windows are held. A previous test's
+ *  menus are on a bus it has closed, so there is nothing to wait for, and one
+ *  a failed test never stopped would otherwise hold its window for the rest
+ *  of the run — every mock app numbers its first window alike. */
+export function _resetGlobalMenuState() {
+  vacancies.clear();
+}
+
 /**
  * Is this window's menu bar being drawn by the desktop?
  *

package/src/gloverlay.js

@@ -35,6 +35,15 @@
 //   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.
+// - **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
+//   in the window (hw/xquartz/xpr/dri.c makes it `XP_MAPPED_ABOVE`). X's
+//   stacking never reaches it: a pane stacked over the surface's window is
+//   drawn under the frame, cutting that window down with SHAPE leaves the
+//   frame covering all of it, and only a pane over the whole surface shows —
+//   by hiding the frame (issue #653). So no pane is made there, and
+//   `canOverlay` says so from the first render on (`beginGlOverlay`).
 //
 // A pane selects no input, so the pointer over one reaches the owning window
 // by the same propagation that brings it the pointer over the surface
@@ -75,18 +84,73 @@ 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';
 
+// 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();
+const probes = new WeakMap();
+
+const XQUARTZ =
+  'this display is XQuartz, where the macOS window server composites every ' +
+  'GL surface above everything the X server draws in its window. Draw the ' +
+  'overlay beside the surface or in GL instead, or run on the Cocoa backend ' +
+  '(the default on macOS), which composites it';
+
 /**
  * Whether the children of a `<glarea>` can be drawn over its surface on this
  * connection: a backend that composites a pane itself, or one that can make
- * the plain child window a pane is on X11. One function for the element and
- * for `useSupports('glOverlay')`, which have to agree — the rule `canEmbed`
- * follows for `<foreign>`.
+ * the plain child window a pane is on X11 — on any server but XQuartz, where
+ * nothing can be drawn over a GL surface (`beginGlOverlay`). One function
+ * for the element and for `useSupports('glOverlay')`, which have to agree —
+ * the rule `canEmbed` follows for `<foreign>`.
  */
 export function canOverlay(app) {
-  return (
-    typeof app?.createOverlayPane === 'function' ||
-    typeof app?.createWindow === 'function'
-  );
+  if (typeof app?.createOverlayPane === 'function') return true;
+  return typeof app?.createWindow === 'function' && !refusals.has(app);
+}
+
+/** Why nothing is drawn over a GL surface on this connection, for the
+ * warning a `<glarea>` with children gives there — or null. */
+export function overlayRefusal(app) {
+  return (app && refusals.get(app)) ?? null;
+}
+
+/**
+ * Is this an X server where nothing can be drawn over a GL surface? Asked
+ * in `createRoot`, with the other startup probes and before the first
+ * render, so that `canOverlay` answers the same from the first frame on —
+ * a component choosing how to draw by it would otherwise build one way and
+ * tear that down a frame later.
+ *
+ * The server is XQuartz, and the question is its Apple-DRI extension, which
+ * no other server has: every GL surface XQuartz makes comes from the
+ * machinery that extension exports, direct and indirect alike. Asked of the
+ * server rather than of `app.glCapabilities()`, because the default policy
+ * never probes direct rendering and XQuartz's indirect GLX hides the panes
+ * all the same. One QueryExtension; where ntk's direct-rendering probe has
+ * asked already, node-x11 answers it from the reply it kept.
+ */
+export function beginGlOverlay(app) {
+  if (!app) return Promise.resolve();
+  let pending = probes.get(app);
+  if (pending) return pending;
+  const X = app.X;
+  pending =
+    typeof app.createOverlayPane === 'function' ||
+    typeof X?.QueryExtension !== 'function'
+      ? Promise.resolve()
+      : new Promise((resolve) => {
+          try {
+            X.QueryExtension('Apple-DRI', (err, reply) => {
+              if (!err && reply?.present) refusals.set(app, XQUARTZ);
+              resolve();
+            });
+          } catch {
+            // a connection that cannot ask is one this cannot find out about
+            resolve();
+          }
+        });
+  probes.set(app, pending);
+  return pending;
 }
 
 /** A rect grown out to whole device pixels. */

package/src/index.d.ts

@@ -216,7 +216,10 @@ export function useClipboard(): Clipboard;
  * before it. Both backends draw them; translucency is the difference,
  * composited by Core Animation on Cocoa and opaque on X11, where what a
  * child leaves unpainted shows the surface's `clearColor` (docs/elements.md).
- * Ask it before handing a surface its HUD. A property of the backend.
+ * False on XQuartz, whose GL surfaces the macOS window server composites
+ * above everything the X server draws: nothing can be drawn over one there.
+ * Ask it before handing a surface its HUD. A property of the backend and the
+ * display, settled before the first render.
  */
 export type SupportsFeature =
   'transparency' | 'shaders' | 'nativeControls' | 'embedding' | 'glOverlay';

package/src/statusnotifier.js

@@ -101,6 +101,13 @@ const PIXMAP_SIGNATURE = 'a(iiay)';
  *  the *same* tray icon and must come back on the same path — see `stop()`. */
 let nextItemIndex = 1;
 
+/**
+ * Per slot, the moment it is free: settles once every item that has started
+ * on it so far has stopped. The next item to start on the slot waits for it —
+ * see `start()`.
+ */
+const vacancies = new Map();
+
 /** Claim a tray slot. `useTray()` takes one per hook instance, for its life. */
 export function allocateItemSlot() {
   return nextItemIndex++;
@@ -232,6 +239,11 @@ export class StatusNotifierItem {
     /** Set while withdrawing, so `Status` reads `Passive` on the way out —
      *  see `announcePassive()`. */
     this.withdrawing = false;
+    /** Settles once `stop()` has finished, which is what the next item on
+     *  this slot waits for — see `start()`. */
+    this.gone = new Promise((resolve) => {
+      this.markGone = resolve;
+    });
 
     this.ref = null;
     this.dbus = null;
@@ -252,6 +264,24 @@ export class StatusNotifierItem {
   // ------------------------------------------------------------------ setup
 
   async start() {
+    // **One item per slot at a time.** A hook switched off and on again puts
+    // its new item on the old one's path while the old one is still leaving:
+    // `announcePassive()` holds its object open for a moment, and its
+    // teardown comes after that. dbus-native's `registration.remove()`
+    // unexports whatever is at the path when it runs, whoever exported it,
+    // so a successor already there would lose its object — and its menu —
+    // while the watcher kept its registration: a dead icon. So an item starts
+    // once every item before it on the slot has stopped. Every one, not only
+    // the last: an item stopped while it was still waiting is gone at once,
+    // and the one it was waiting for may not be.
+    const before = vacancies.get(this.index);
+    const vacated = Promise.all([before, this.gone]);
+    vacancies.set(this.index, vacated);
+    void vacated.then(() => {
+      if (vacancies.get(this.index) === vacated) vacancies.delete(this.index);
+    });
+    await before;
+
     const ref = await sessionBus();
     // No bus is a first-class configuration, not a degraded one: ssh, a bare
     // startx, CI, Node 20 without the transport. There is simply no tray.
@@ -450,6 +480,8 @@ export class StatusNotifierItem {
    *
    * The pair to this is the **stable path** (`slot`): coming back re-registers
    * the same id, which a host dedupes to a reset rather than a second icon.
+   * The same path is why the item coming back waits for this hold, and the
+   * teardown after it, to finish — see `start()`.
    */
   async announcePassive() {
     if (!this.exported || !this.iface) return;
@@ -479,12 +511,18 @@ export class StatusNotifierItem {
   }
 
   async stop() {
-    // Announced **before** `stopped`, which gates `_sync()` and every other
-    // path that could tear the export out from under the signal.
-    await this.announcePassive();
-    this.stopped = true;
-    await this.syncing;
-    await this.teardown();
+    try {
+      // Announced **before** `stopped`, which gates `_sync()` and every other
+      // path that could tear the export out from under the signal.
+      await this.announcePassive();
+      this.stopped = true;
+      await this.syncing;
+      await this.teardown();
+    } finally {
+      // Whatever happened, the slot is free: the next item on it would
+      // otherwise wait for good, and the icon never come back.
+      this.markGone();
+    }
   }
 
   async teardown() {
@@ -746,7 +784,11 @@ export class StatusNotifierItem {
   }
 }
 
-/** Test seam, not public: make paths predictable across test files. */
+/** Test seam, not public: make paths predictable across test files, and
+ *  forget who held them. A previous test's items are on a bus it has closed,
+ *  so there is nothing to wait for, and one it never stopped would otherwise
+ *  hold its slot for the rest of the run. */
 export function _resetItemIndex() {
   nextItemIndex = 1;
+  vacancies.clear();
 }

package/src/svgnodes.js

@@ -51,23 +51,57 @@ function svgAttribs(props, skip) {
     const value = props[key];
     if (key === 'children' || value == null) continue;
     if (typeof value === 'function') continue;
+    // React's, not the drawing's. Since React 19 a ref arrives as an
+    // ordinary prop, and an object one — `useRef()` — was written into the
+    // document as `ref="[object Object]"`. `key` would be the same if React
+    // ever passed it on.
+    if (key === 'ref' || key === 'key') continue;
     if (skip && skip(key)) continue;
     attribs[toSvgAttrib(key)] = String(value);
   }
   return attribs;
 }
 
+/** Whether two `svgAttribs` results say the same thing. Order aside: the
+ * document reads an attribute by its name. */
+function sameAttribs(a, b) {
+  const names = Object.keys(a);
+  if (names.length !== Object.keys(b).length) return false;
+  for (const name of names) {
+    if (a[name] !== b[name]) return false;
+  }
+  return true;
+}
+
+// Props of the `<svg>` element that are react-x11's rather than the
+// drawing's: `source`, the other form of the content, and what lays the
+// element out, styles it and takes its input. `style` is one of them, an
+// object that reached the document as "[object Object]".
+const notAnAttribute = (key) =>
+  key === 'source' ||
+  key === 'style' ||
+  isLayoutProp(key) ||
+  isPaintProp(key) ||
+  key === 'cursor' ||
+  key === 'focusable' ||
+  key === 'pointerEvents';
+
 /**
  * An element inside <svg>: no yoga node, no painting of its own — it only
  * carries a tag name and props, and is serialized into the htmlparser2-style
- * DOM that SvgView consumes. Prop/child changes bubble to the owning
- * SvgNode via the _textContentChanged channel (also used by text chunks,
- * so string children of an SVG <text> invalidate the same way).
+ * DOM that SvgView consumes. A change that reaches that DOM — an attribute
+ * that serializes differently, a child added or removed — bubbles to the
+ * owning SvgNode via the _textContentChanged channel (also used by text
+ * chunks, so string children of an SVG <text> invalidate the same way).
  */
 export class SvgChildNode extends Node {
   constructor(tag, props, app) {
     super(tag, props, app, { yoga: false });
     this.isSvgChild = true;
+    /** What this element writes into the document: serialized once per
+     * change rather than once per rebuild, and what a commit is compared
+     * against. */
+    this._attribs = svgAttribs(props);
   }
 
   // <circle cx r fill>… is SVG's vocabulary, not the style channel's
@@ -81,14 +115,34 @@ export class SvgChildNode extends Node {
 
   applyProps(newProps, oldProps) {
     super.applyProps(newProps, oldProps);
+    // React commits every child of an `<svg>` it re-renders, each with a new
+    // props object and almost always with every attribute as it was — and a
+    // rebuild re-parses the whole drawing and re-measures the `<svg>`. So
+    // only a commit that serializes differently is a change.
+    const attribs = svgAttribs(newProps);
+    if (sameAttribs(attribs, this._attribs)) return;
+    this._attribs = attribs;
     this._textContentChanged();
   }
 
+  /**
+   * Nothing this node draws, whatever changed: the `<svg>` paints the whole
+   * document, and a change to it claims that element's box on the way
+   * (`SvgNode._textContentChanged`). This node has no box — its rect is an
+   * empty one at the window's origin — so core's answer, a claim of that
+   * rect whenever a prop is a new value, repainted a corner nothing here
+   * drew, on every commit that handed over an attribute rebuilt equal: a
+   * `points` or `strokeDasharray` array, say.
+   */
+  paintChanged() {
+    return false;
+  }
+
   toDom() {
     return {
       type: 'tag',
       name: this.kind,
-      attribs: svgAttribs(this.props),
+      attribs: this._attribs,
       children: this.children
         .map((c) =>
           c.kind === 'textchunk'
@@ -114,6 +168,9 @@ export class SvgNode extends Node {
     super('svg', props, app);
     this.view = null;
     this._stale = true;
+    /** This element's own attributes in children form, kept like a child's
+     * for the same comparison. */
+    this._attribs = svgAttribs(props, notAnAttribute);
     /** Bumped every time the document is rebuilt, and sampled at paint time,
      * so `paintCachePlan` can tell an animated document from a settled one.
      * See the note there. */
@@ -138,7 +195,9 @@ export class SvgNode extends Node {
     );
   }
 
-  /** Any change to the svg subtree (props, children, text) lands here. */
+  /** Any change to the document — `source`, an attribute, a child, a text
+   * chunk — lands here, and only such a change: a commit that serializes
+   * the same never calls it, so it rebuilds nothing and claims nothing. */
   _textContentChanged() {
     this._stale = true;
     this.invalidateMeasure('props');
@@ -155,17 +214,10 @@ export class SvgNode extends Node {
         (c) => c.isSvgChild || c.kind === 'textchunk',
       );
       if (children.length > 0) {
-        const skip = (key) =>
-          key === 'source' ||
-          isLayoutProp(key) ||
-          isPaintProp(key) ||
-          key === 'cursor' ||
-          key === 'focusable' ||
-          key === 'pointerEvents';
         const dom = {
           type: 'tag',
           name: 'svg',
-          attribs: svgAttribs(this.props, skip),
+          attribs: this._attribs,
           children: children.map((c) =>
             c.kind === 'textchunk' ? { type: 'text', data: c.text } : c.toDom(),
           ),
@@ -190,9 +242,18 @@ export class SvgNode extends Node {
   }
 
   applyProps(newProps, oldProps) {
+    const source = this.props.source;
     super.applyProps(newProps, oldProps);
-    // attributes live in props (children form) or in `source`; either way
-    // the SvgView is cheap to rebuild on the next measure/paint
+    // The document is `source`, or this element's attributes over its
+    // children's, whose changes arrive on their own. A commit that leaves
+    // both as they were — most of them: a parent re-rendering, a new style
+    // object, a new ref — has nothing to re-parse or re-measure. The style
+    // is core's to diff, like any element's.
+    const attribs = svgAttribs(newProps, notAnAttribute);
+    if (newProps.source === source && sameAttribs(attribs, this._attribs)) {
+      return;
+    }
+    this._attribs = attribs;
     this._textContentChanged();
   }
 

package/src/types/elements.d.ts

@@ -992,11 +992,12 @@ export type FrameLoop = 'demand' | 'always';
  * `<glarea>`: a GL surface in the layout. Its **children** are 2D content
  * drawn above the surface — laid out in its box like a `<box>`'s and cut to
  * it, painted over the GL frame, hit before it — composited on the Cocoa
- * backend and opaque on X11 (docs/elements.md); `useSupports('glOverlay')`
- * asks whether they will be. The pointer over it is the tree's, as over any
- * node: the handlers it inherits (`onMouseDown`, `onClick`, `onWheel`, …)
- * fire at the child under the pointer or the `<glarea>` and bubble, on both
- * backends, and `GlAreaNode.forwardsPointer` says so at run time.
+ * backend, opaque on X11 (docs/elements.md), and not drawn at all on
+ * XQuartz; `useSupports('glOverlay')` asks whether they will be. The
+ * pointer over it is the tree's, as over any node: the handlers it inherits
+ * (`onMouseDown`, `onClick`, `onWheel`, …) fire at the child under the
+ * pointer or the `<glarea>` and bubble, on both backends, and
+ * `GlAreaNode.forwardsPointer` says so at run time.
  */
 export interface GlAreaProps extends DrawnProps<DrawnNode> {
   /** CSS colour, or `[r, g, b, a]` floats. Default black. */