react-x11 2.15.3 → 2.16.1

package/src/nodes/scope.js

@@ -0,0 +1,259 @@
+// Where a `<ThemeProvider>` meets the windows. At the root of the tree: what
+// the container holds — top-level windows and popups — and the node a
+// provider written above them becomes. And directly inside a window: the box
+// a provider becomes there, which passes a nested window on to that window.
+
+import { hooks as a11yHooks } from '../a11y.js';
+import { baseTheme } from '../palette.js';
+import { BoxNode } from './box.js';
+import { THEME_SCOPE } from './kinds.js';
+import { Node } from './node.js';
+
+/**
+ * Put `node` at the top of the tree: realize a window against the screen
+ * root, and record it among the container's top-level windows — the list
+ * every "which windows does this app have" question reads
+ * (`app._rootChildren`). A theme scope puts its windows there instead of
+ * itself, so the list stays one of windows.
+ *
+ * Idempotent, because React reorders a keyed list at the root by inserting
+ * a child that is already mounted: a second entry for the same window would
+ * be a window counted twice, and announced to assistive technology twice.
+ */
+export function attachTopLevel(app, node) {
+  if (node.isThemeScope) {
+    node._attach();
+    return;
+  }
+  // realize the whole subtree top-down against the screen root
+  if (!node.window) node.realize(null);
+  // React's getPublicRootInstance answers from the root fiber's first
+  // child, and only when that child is a host component. `render()` wraps
+  // the tree in a context provider, which is not one, so it would answer
+  // null — the container keeps the list instead.
+  const roots = (app._rootChildren ??= []);
+  if (roots.includes(node)) return;
+  roots.push(node);
+  a11yHooks.rootMounted?.(node);
+}
+
+/** Take `node` back off the top of the tree, before its subtree is
+ * destroyed — the bridge reads the subtree to say what went. */
+export function detachTopLevel(app, node) {
+  if (node.isThemeScope) {
+    node._detach();
+    return;
+  }
+  const roots = app._rootChildren;
+  const at = roots ? roots.indexOf(node) : -1;
+  if (at !== -1) roots.splice(at, 1);
+  a11yHooks.rootUnmounted?.(node);
+}
+
+/**
+ * `<ThemeProvider>` above the windows (#584).
+ *
+ * A provider has to put its palette on a node, because a `$token` resolves by
+ * walking the node tree and knows nothing about React context. Inside a window
+ * that node is a `<box>`. At the root it cannot be — nothing drawn can be
+ * there, and a window cannot be inside a box — so the provider used to put
+ * the palette on the windows it could see among its children instead. It
+ * could only see literal `<window>` elements: a component that renders one,
+ * a window that is closed, a fragment of two, all planted a box at the root.
+ *
+ * This is the node for that position. It draws nothing, lays nothing out and
+ * holds only windows, popups and other scopes, and the windows under it take
+ * their palette from it: a top-level window keeps **no parent** — a window
+ * with a parent is a nested one to everything that asks, the accessibility
+ * bridge first — and reads the scope through `_scope` instead
+ * (`Node.theme`).
+ *
+ * The scope itself is never in `app._rootChildren`; its windows are, from
+ * the moment it is attached to the container (`attachTopLevel`).
+ */
+export class ThemeScopeNode extends Node {
+  constructor(props, app) {
+    super(THEME_SCOPE, props, app, { yoga: false });
+    this.isThemeScope = true;
+    // the scope this one is written inside, when providers nest at the root
+    this._scope = null;
+    // in the container: its windows are realized and on the root list
+    this._attached = false;
+    // React's hide (`<Suspense>`, `<Activity>`), which lands on the topmost
+    // host instance under the boundary — this, when the provider is there
+    this._reactHidden = false;
+  }
+
+  /**
+   * The palette the windows under this scope inherit: this scope's own
+   * `theme` over the scope around it, or over the desktop's palette.
+   *
+   * Not cached, unlike `Node.theme`. Nothing tells a scope that the
+   * desktop's palette moved — `appearanceChanged` walks the windows — and a
+   * cached merge would hand them the old base. Each window caches what it
+   * read, so this runs once per window per theme change.
+   */
+  get theme() {
+    const inherited = this._scope ? this._scope.theme : baseTheme();
+    const own = this.props.theme;
+    return own ? { ...inherited, ...own } : inherited;
+  }
+
+  insertBefore(child, beforeChild) {
+    const from = this.children.indexOf(child);
+    if (from !== -1) this.children.splice(from, 1);
+    const before =
+      beforeChild == null ? -1 : this.children.indexOf(beforeChild);
+    this.children.splice(
+      before === -1 ? this.children.length : before,
+      0,
+      child,
+    );
+    // a keyed reorder: the child is already linked, themed and attached
+    if (from !== -1) return;
+    child._scope = this;
+    // Built while detached, the subtree resolved its tokens against the
+    // desktop's palette; this is the attach walk that re-resolves them, the
+    // same one `Node.insertBefore` runs — a mount, so it claims no damage.
+    child._themeChanged(true);
+    if (this._hiddenByReact()) child._applyHidden();
+    if (this._attached) attachTopLevel(this.app, child);
+  }
+
+  removeChild(child) {
+    const at = this.children.indexOf(child);
+    if (at === -1) return;
+    this.children.splice(at, 1);
+    if (this._attached) detachTopLevel(this.app, child);
+    child._scope = null;
+    child.destroySubtree();
+  }
+
+  applyProps(newProps, oldProps) {
+    const before = oldProps ?? this.props;
+    this.props = newProps;
+    // A swap walks the windows as a live change, which repaints them. The
+    // `style` a provider passes lays out a box inside a window and means
+    // nothing here: a direction it names is in the palette as well, which
+    // is what a window reads its direction from.
+    if (newProps.theme !== before.theme) this._themeChanged();
+  }
+
+  setHidden(hidden) {
+    this._reactHidden = hidden;
+    this._applyHidden();
+  }
+
+  /** The hidden state above the windows moved: each one re-derives its own. */
+  _applyHidden() {
+    for (const child of this.children) child._applyHidden();
+  }
+
+  /** Whether React hides this scope, here or at a scope around it. */
+  _hiddenByReact() {
+    return this._reactHidden || (this._scope?._hiddenByReact() ?? false);
+  }
+
+  _attach() {
+    this._attached = true;
+    for (const child of this.children) attachTopLevel(this.app, child);
+  }
+
+  _detach() {
+    this._attached = false;
+    for (const child of this.children) detachTopLevel(this.app, child);
+  }
+}
+
+/**
+ * `<ThemeProvider>` written directly inside a `<window>` (or a `<popup>`).
+ *
+ * There it is a box that fills its parent, like a provider anywhere else in
+ * a window — but a window may nest windows, and a provider wrapped around one
+ * has to hand it on, since a window cannot live inside a box. So a nested
+ * window put under this box is **passed through** to the window the box is
+ * in: that window holds it, realizes and stacks it the way it does any
+ * nested window, and the window reads its palette from here through
+ * `_scope`, which a palette lookup asks before the parent (`Node.theme`).
+ *
+ * React still sees the window as this box's child, so the calls it makes on
+ * the box for that window — a move, a removal — are forwarded as well, and
+ * the box answers for the passed windows in the three things it owns over its
+ * subtree: a theme swap, a hide, and its own removal.
+ *
+ * Only here. Under a provider that is inside a `<box>` there is no window to
+ * pass a window to, and `Node.insertBefore` says so.
+ */
+export class ThemeBoxNode extends BoxNode {
+  constructor(props, app) {
+    super(props, app);
+    // the nested windows React put under this box, in the order it did
+    this._windows = [];
+  }
+
+  insertBefore(child, beforeChild) {
+    if (!child.isWindow || child.isPopup) {
+      super.insertBefore(child, beforeChild);
+      return;
+    }
+    if (!this._windows.includes(child)) {
+      this._windows.push(child);
+      child._scope = this;
+    }
+    // Before the box is in its window the window waits here, and `_setRoot`
+    // passes it on at the attach. A move is re-inserted at the end: nested
+    // windows stack among themselves, not among the box's drawn children.
+    if (this.parent) this.parent.insertBefore(child, null);
+  }
+
+  removeChild(child) {
+    const at = this._windows.indexOf(child);
+    if (at === -1) {
+      super.removeChild(child);
+      return;
+    }
+    this._windows.splice(at, 1);
+    // the window destroys it, and takes it off its stacking list
+    if (child.parent) child.parent.removeChild(child);
+    else child.destroySubtree();
+    child._scope = null;
+  }
+
+  _setRoot(root) {
+    const attaching = this.root !== root;
+    super._setRoot(root);
+    if (!attaching || !this.parent) return;
+    for (const win of this._windows) {
+      if (win.parent !== this.parent) this.parent.insertBefore(win, null);
+    }
+  }
+
+  _themeChanged(mounting = false) {
+    super._themeChanged(mounting);
+    for (const win of this._windows) win._themeChanged(mounting);
+  }
+
+  setHidden(hidden) {
+    super.setHidden(hidden);
+    for (const win of this._windows) win._applyHidden();
+  }
+
+  /** React hid this box — the hide a `<Suspense>` around the provider
+   * lands on, which the windows passed on from here have to follow. */
+  _hiddenByReact() {
+    return this.hidden;
+  }
+
+  destroySubtree() {
+    super.destroySubtree();
+    // React removes the box alone, never the windows under it, so they go
+    // with it — out of the window that holds them, which is each one's
+    // parent (the box's own is already cleared by now), unless that window
+    // is being destroyed itself and is walking its children as it does.
+    for (const win of this._windows) {
+      const holder = win.parent;
+      if (holder && !holder.destroyed) holder.removeChild(win);
+      else if (!win.destroyed) win.destroySubtree();
+    }
+  }
+}

package/src/nodes/scrollable.js

@@ -59,6 +59,17 @@ function replayHeld({ base, steps }, max) {
 // walked per node per hit test.
 const EMPTY_SCROLLBARS = Object.freeze([]);
 
+/** Do two answers from `_scrollbar` paint the same thumb? Neither painting
+ *  one counts. */
+const sameThumb = (a, b) =>
+  a === b ||
+  (a !== undefined &&
+    b !== undefined &&
+    a.x === b.x &&
+    a.y === b.y &&
+    a.width === b.width &&
+    a.height === b.height);
+
 /**
  * Scrolling, as a style rather than as a species of node.
  *
@@ -177,6 +188,9 @@ export const Scrollable = (Base) =>
         this._childOrigin != null &&
         !this._scrollMeasureDirty &&
         !this.yoga.hasNewLayout();
+      // The thumbs as they stand, for a bounded frame to hold the measure
+      // below against (`_claimThumbs`)
+      const thumbsWere = !clean && layoutDiff.sink ? this._scrollbars() : null;
       if (!clean) {
         const size = this.measureScrollContent();
         if (!Number.isFinite(size?.width) || !Number.isFinite(size?.height)) {
@@ -208,8 +222,13 @@ export const Scrollable = (Base) =>
       // once and scrollIntoView waits for the pass.
       this._resolveScrollTo();
       this._resolveScrollIntoView();
+      const askedX = this.scrollX;
+      const askedY = this.scrollY;
       this.scrollY = clampScroll(this.scrollY, this._maxScroll('y'));
       this.scrollX = clampScroll(this.scrollX, this._maxScroll('x'));
+      // Of those three moves the clamp's is the one no call claimed when it
+      // was asked for — the diff below claims it
+      const clamped = this.scrollX !== askedX || this.scrollY !== askedY;
       this._reportViewport();
       this._reportScrollTo(from);
       // `scrollX` is how far the content has moved **from its start**, which
@@ -271,14 +290,22 @@ export const Scrollable = (Base) =>
             }
           };
           layoutDiff.shift = { x: ox - wasOrigin.x, y: oy - wasOrigin.y };
-        } else if (shifted) {
-          layoutDiff.sink = null;
         } else {
           const vp = insetRect(this.abs, -DAMAGE_SLOP);
-          layoutDiff.sink = (rect) => {
-            const clipped = intersectRects(rect, vp);
-            if (clipped) outer(clipped);
-          };
+          if (shifted) {
+            layoutDiff.sink = null;
+            // …which holds for a scroll's shift and not for the clamp's: the
+            // content shrank, or the viewport grew, under the offset — a row
+            // collapsing at the end of a list scrolled to its end — and
+            // nothing claimed the viewport every child just moved in.
+            if (clamped) outer(vp);
+          } else {
+            layoutDiff.sink = (rect) => {
+              const clipped = intersectRects(rect, vp);
+              if (clipped) outer(clipped);
+            };
+          }
+          this._claimThumbs(thumbsWere, outer);
         }
       }
       try {
@@ -818,6 +845,26 @@ export const Scrollable = (Base) =>
       return [this._scrollbar('y'), this._scrollbar('x')].filter(Boolean);
     }
 
+    /**
+     * A bounded layout pass's claim for the thumbs it changed, where each
+     * was and where it is. The pane paints them, not a node with a rect of
+     * its own, so content growing or shrinking under a pane that stays put
+     * slides a thumb or resizes it and the layout diff sees nothing move.
+     * `was` is `_scrollbars()` from before the pass measured the content.
+     */
+    _claimThumbs(was, sink) {
+      const now = this._scrollbars();
+      for (const axis of ['y', 'x']) {
+        const before = was.find((bar) => bar.axis === axis);
+        const after = now.find((bar) => bar.axis === axis);
+        if (sameThumb(before, after)) continue;
+        // a pixel of slop for the rounded corners' antialiasing, as the
+        // blit's own thumb repair takes
+        if (before) sink(insetRect(before, -1));
+        if (after) sink(insetRect(after, -1));
+      }
+    }
+
     /**
      * The bar belongs to the scroller, not to the content under it — the same
      * rule a browser applies. Without this a press on the thumb would be

package/src/nodes/text.js

@@ -338,6 +338,8 @@ export class TextNode extends Node {
           variations: style.variations,
           textRendering: style.textRendering,
           color: style.color,
+          letterSpacing: style.letterSpacing,
+          features: style.features,
         });
       } else if (child.kind === 'text') {
         child.collectSpans(out);

package/src/nodes/textarea.js

@@ -137,7 +137,7 @@ export class TextAreaNode extends TextInputNode {
       width === undefined || direction !== 'rtl'
         ? width
         : Math.max(0, width - CARET_RESERVE * this.scale);
-    const key = `${width}|${color}|${shown}|${s.family}|${s.size}|${s.weight}|${s.style}|${direction}|${align}`;
+    const key = `${width}|${color}|${shown}|${s.family}|${s.size}|${s.weight}|${s.style}|${direction}|${align}|${s.letterSpacing}|${JSON.stringify(s.features ?? null)}`;
     if (this._valueLayoutKey !== key) {
       this._valueLayoutKey = key;
       this._valueLayoutCache = fonts.layout([{ text: shown, ...s, color }], s, {

package/src/nodes/textinput.js

@@ -302,7 +302,7 @@ export class TextInputNode extends Node {
     const text = this._displayValue();
     const s = this.resolvedTextStyle();
     const direction = this.direction;
-    const key = `${text}|${s.family}|${s.size}|${s.weight}|${s.style}|${direction}`;
+    const key = `${text}|${s.family}|${s.size}|${s.weight}|${s.style}|${direction}|${s.letterSpacing}|${JSON.stringify(s.features ?? null)}`;
     if (this._valueLayoutKey !== key) {
       this._valueLayoutKey = key;
       this._valueLayoutCache = fonts.layout(text, s, { direction });

package/src/nodes/window/anchoring.js

@@ -1,7 +1,7 @@
 // A window anchored to a rect in another (#255, #280): where it goes, and
 // following the anchor as it moves.
 
-import { anchorOffscreen, anchorRect } from '../../anchor.js';
+import { anchorOffscreen, anchorRect, anchorScreenRect } from '../../anchor.js';
 
 /** Anchoring, installed onto `WindowNode.prototype` by window.js. */
 export class WindowAnchoring {
@@ -32,18 +32,33 @@ export class WindowAnchoring {
    *  anchor to yet — a ref whose node has not been laid out. */
   _anchorPlacement(size) {
     const anchor = this.props.anchor;
-    const node = this._anchorTarget(anchor?.to);
-    if (!node) return null;
+    if (!anchor) return null;
     // `anchorRect` is public API and speaks logical pixels on both sides;
     // this caller's `size` came from `_measure` (device) and its result is
     // headed for CreateWindow (device), so both convert here.
     const s = this.scale;
-    const rect = anchorRect(node, {
-      ...anchor,
-      alignTo: this._anchorTarget(anchor.alignTo) ?? undefined,
-      width: size.width / s,
-      height: size.height / s,
-    });
+    let rect;
+    if (anchor.rect) {
+      // A rect on the screen with no node behind it — the tray item a click
+      // reported. The popup's own scale and direction stand in for the
+      // node's.
+      rect = anchorScreenRect(this.app, anchor.rect, {
+        ...anchor,
+        scale: s,
+        direction: anchor.direction ?? this.direction,
+        width: size.width / s,
+        height: size.height / s,
+      });
+    } else {
+      const node = this._anchorTarget(anchor.to);
+      if (!node) return null;
+      rect = anchorRect(node, {
+        ...anchor,
+        alignTo: this._anchorTarget(anchor.alignTo) ?? undefined,
+        width: size.width / s,
+        height: size.height / s,
+      });
+    }
     if (!rect || s === 1) return rect;
     return {
       ...rect,
@@ -76,13 +91,7 @@ export class WindowAnchoring {
    */
   _followAnchor(size = this._requestedSize) {
     if (this.destroyed || !this.window || !this.props.anchor) return;
-    const node = this._anchorTarget(this.props.anchor.to);
-    // A ref that has not attached yet counts as gone, and for the same
-    // reason: there is nowhere for the popup to be. Refs attach in the
-    // commit phase a popup realizes in, so one written *above* its own
-    // trigger in the JSX gets a frame of this — and waiting it out is
-    // better than a frame in the corner of the screen.
-    const lost = !node || anchorOffscreen(node, this.props.anchor.at);
+    const lost = this._anchorGone();
     if (lost !== Boolean(this._anchorLost)) {
       this._anchorLost = lost;
       // The grab goes with it and comes back with it. X releases a pointer
@@ -93,6 +102,7 @@ export class WindowAnchoring {
       // keeps it beside the map on every route back to the screen.
       if (lost) {
         if (this.props.grab) this.window.ungrabPointer?.();
+        if (this.props.grabKeyboard) this.window.ungrabKeyboard?.();
         this.window.unmap?.();
       } else {
         this._mapNow();
@@ -110,14 +120,31 @@ export class WindowAnchoring {
     }
   }
 
+  /**
+   * Whether there is nothing for this window to point at: the anchor's node
+   * has scrolled out of view, or is a ref that has not attached yet — which
+   * counts as gone for the same reason, since there is nowhere for the popup
+   * to be. Refs attach in the commit phase a popup realizes in, so one
+   * written *above* its own trigger in the JSX gets a frame of this, and
+   * waiting it out is better than a frame in the corner of the screen. A
+   * rect on the screen is never gone.
+   */
+  _anchorGone() {
+    const anchor = this.props.anchor;
+    if (anchor.rect) return false;
+    const node = this._anchorTarget(anchor.to);
+    return !node || anchorOffscreen(node, anchor.at);
+  }
+
   /**
    * Subscribe to whatever can move the anchor. On the **owner's** window,
    * not on this one: what moves is the trigger, and this window's own
-   * layout passes say nothing about where it sits on screen.
+   * layout passes say nothing about where it sits on screen. A rect on the
+   * screen moves only when the app hands a new one, which is a commit.
    */
   _watchAnchor() {
     this._unwatchAnchor();
-    if (!this.props.anchor) return;
+    if (!this.props.anchor || this.props.anchor.rect) return;
     // The anchor's own window where the ref has attached, and the window
     // this popup was *written into* otherwise — which is the same one in
     // every case that matters, and is what makes an unattached ref a

package/src/nodes/window/flush.js

@@ -75,8 +75,8 @@ export class WindowFlush {
 
   /**
    * The backend's half of a frame's cost, where it has one: the Cocoa
-   * present — the swapchain flip and its catch-up copy — runs after the
-   * flush returns, on the same thread, and is part of what the frame cost
+   * present — the swapchain flip — runs after the flush returns, on the
+   * same thread, and is part of what the frame cost
    * (src/cocoa/window.js reports it). An ntk window's present is one
    * request, and reports nothing.
    */
@@ -335,11 +335,12 @@ export class WindowFlush {
     // after every region: an entry drawn in one damage rect must not be
     // evicted before the next rect of the same frame asks for it
     this._paintCache?.endFrame();
-    // The swapchain seam: a backend presenting from double buffers has to
+    // The swapchain seam: a backend presenting from a swapchain has to
     // know exactly which pixels each flush touched — several flushes can
     // land between two presents, so reading only the last frame's rects
-    // would leave the flipped-in back buffer stale where an earlier flush
-    // painted. Feature-detected like presentFrame; null means everything.
+    // would leave the next buffer it draws into stale where an earlier
+    // flush painted. Feature-detected like presentFrame; null means
+    // everything.
     this.window.noteFrameDamage?.(damage ?? null);
     if (frameHook) {
       frameHook({

package/src/nodes/window/popup.js

@@ -30,15 +30,25 @@ export class PopupNode extends WindowNode {
    * from realize looked equivalent until `hidden` existed, and would have
    * left a revealed menu holding no grab: open forever behind the first
    * outside click, with nothing saying why.
+   *
+   * `grabKeyboard` is the keyboard's half, taken and dropped with the map
+   * the same way: keys come to this popup while it is up, whatever holds
+   * the focus — what a popover a tray click opened needs, since a menu-bar
+   * app has no window of its own for the keys to reach. On Cocoa it is a
+   * property of the window rather than a grab, and was decided when the
+   * window was made (src/cocoa/window.js); on Wayland a grabbing popup has
+   * the keyboard already.
    */
   _mapNow() {
     if (!super._mapNow()) return false;
     if (this.props.grab) this.window.grabPointer?.({}, () => {});
+    if (this.props.grabKeyboard) this.window.grabKeyboard?.({}, () => {});
     return true;
   }
 
   destroySubtree() {
     if (this.props.grab) this.window?.ungrabPointer?.();
+    if (this.props.grabKeyboard) this.window?.ungrabKeyboard?.();
     super.destroySubtree();
   }
 

package/src/nodes/window/size.js

@@ -398,6 +398,18 @@ export class WindowSize {
       return { width: props.width, height: props.height, hints };
     }
 
+    // **The floors on hand are the last frame's content.** A node whose
+    // content shrank still carries the minimum the old content needed — the
+    // automatic minimum size this window wrote into yoga — and a natural-size
+    // pass would read it back as content the tree cannot give up, so an
+    // `'auto'` window could only ever grow (#586). The stale ones come off
+    // first, which is exactly what `_applyContentFloors` does ahead of its
+    // own measurement: a node whose extent is stale gets the minimum its
+    // style asks for, and a node whose extent still stands keeps the floor it
+    // earned. The pass after this one measures and writes them again.
+    this._writeFloors('width');
+    this._writeFloors('height');
+
     const dir = this._rootDirection;
     const measure = () => {
       this._sweepLayoutHosts();
@@ -525,9 +537,14 @@ export class WindowSize {
     );
     if (!tracking && !bounded) return;
     const asked = this._requestedSize;
-    const next = this._measure();
-    this._sendSizeHints(props, next.hints);
+    const measured = this._measure();
+    this._sendSizeHints(props, measured.hints);
     if (!tracking) return;
+    // The size the backend will really give, compared against the last one
+    // for the same reason it is recorded: two natural sizes a third of a
+    // point apart are one window size, and asking again every frame for a
+    // size that cannot change is a configure per frame.
+    const next = this._snapSize(measured);
     if (asked && next.width === asked.width && next.height === asked.height) {
       return;
     }
@@ -553,6 +570,27 @@ export class WindowSize {
     this._followAnchor({ width: next.width, height: next.height });
   }
 
+  /**
+   * The size the backend will really take for one this window asks for.
+   *
+   * A window is not always free to be exactly the size its content wants:
+   * Cocoa puts one on the **point** grid, so a natural height of 201 device
+   * pixels at scale 2 is a window 202 tall. Every record of
+   * `_requestedSize` goes through here, because that record is what the
+   * resize echo is compared against — and an echo that does not match it
+   * reads as the user or the window manager taking the size over, which
+   * ends an `'auto'` window's tracking for good (#586). A backend that
+   * takes any size, X11's, answers with the size it was handed.
+   */
+  _snapSize(size) {
+    return (
+      this.window?.snapSize?.(size.width, size.height) ?? {
+        width: size.width,
+        height: size.height,
+      }
+    );
+  }
+
   /** One layout pass at the window's size, with the content floors it
    *  needs: fresh ones when something changed them, the ones in hand during
    *  a live resize, none when nothing moved them. */