react-x11 2.15.3 → 2.16.0

package/src/nodes/node.js

@@ -34,7 +34,7 @@ import { NO_DAMAGE } from './damage.js';
 import { NodeHitTest } from './hittest.js';
 import { installMethods } from './install.js';
 import { NodeInvalidate } from './invalidate.js';
-import { CUSTOM_SELF_DAMAGED } from './kinds.js';
+import { CUSTOM_SELF_DAMAGED, THEME_SCOPE } from './kinds.js';
 import { NodeLayout } from './layout.js';
 import { NodeLayoutHost } from './layouthost.js';
 import { NodePaint } from './paint.js';
@@ -154,6 +154,9 @@ export class Node {
     // subtree's hit reach, invalidated through _clearHitBounds()
     this._paintOrderCache = null;
     this._hitBoundsCache = null;
+    // the surface an `opacity` below 1 draws this subtree through, kept from
+    // one frame to the next while it fits (`NodePaint._paintGroup`)
+    this._groupSurface = null;
     // a `$token` the theme does not define, held for `commitMount` to throw
     // on this node's own fiber — see `_tokenProblem`. Strict mode only.
     // `null` is "commitMount is still to come", `false` is "it has been and
@@ -327,9 +330,19 @@ export class Node {
       return;
     }
     if (child.isWindow) {
+      // A `<ThemeProvider>` inside a window is drawn as a box, which the
+      // developer never wrote — so the message names what they did write.
+      // Directly inside a window it passes a nested window on
+      // (nodes/scope.js, `ThemeBoxNode`); this is one further down.
       throw new Error(
-        `react-x11: <window> cannot be nested inside <${this.kind}>; ` +
-          'windows may only appear at the root or inside another <window>.',
+        this._reactFiber?.type === THEME_SCOPE
+          ? 'react-x11: a <window> under this <ThemeProvider> cannot be ' +
+              'nested — the provider is inside a <box>, where it is a box ' +
+              'itself, and a window nests only in a window. Put the ' +
+              'provider directly inside the outer <window>, or inside the ' +
+              'nested one.'
+          : `react-x11: <window> cannot be nested inside <${this.kind}>; ` +
+              'windows may only appear at the root or inside another <window>.',
       );
     }
     // A registered element that declared childrenAllowed: false says so
@@ -499,6 +512,7 @@ export class Node {
    * freed by the caller via freeRecursive on the subtree top. */
   destroySubtree() {
     this.destroyed = true;
+    if (this._groupSurface) this._releaseGroupSurface();
     // a loop outlives nothing: the window drops it from the set that keeps
     // its frame clock alive, and stops watching visibility with the last one
     this.root?._forgetLoopNode(this);

package/src/nodes/paint.js

@@ -3,6 +3,7 @@
 // window, background first.
 
 import { isPlaced } from '../layouts.js';
+import { Surface } from '../ntk.js';
 import { isPaintedColor } from './boxpaint.js';
 import { DAMAGE_SLOP } from './damage.js';
 import { DRAWN_KINDS } from './kinds.js';
@@ -97,6 +98,122 @@ export class NodePaint {
 
   paint(ctx) {
     if (this.hidden) return;
+    const opacity = this.style.opacity;
+    // A retained presenter replaying this node's own paint into a layer puts
+    // the opacity on the layer instead (src/cocoa/presenter.js), and a group
+    // drawn here as well would fade it twice.
+    if (opacity !== undefined && opacity < 1 && !this._ownPaintOnly) {
+      // Nothing to see, so nothing to draw — NaN included. The node is still
+      // laid out and still hit, as CSS's `opacity: 0` is.
+      if (!(opacity > 0)) return;
+      this._paintGroup(ctx, opacity);
+      return;
+    }
+    // back to opaque: the surface a fade drew through is not needed any more
+    if (this._groupSurface) this._releaseGroupSurface();
+    this._paintNode(ctx);
+  }
+
+  /**
+   * `opacity` below 1: this node and everything under it drawn **once**, into
+   * a surface, and composited at that alpha — so it fades as a group. An icon
+   * over its own card does not show the card through the icon, a border does
+   * not double up where it meets a background, and text keeps the colour it
+   * had. That is CSS's `opacity`, and the reason it is not a `globalAlpha` on
+   * each draw.
+   *
+   * The surface is the subtree's paint bounds inside the window — stable
+   * across frames, so a fade reuses it — and only this pass's damage is drawn
+   * into it. Where the backend makes no surfaces (the headless mock) the
+   * subtree is drawn with the alpha on each draw instead: the same pixels
+   * wherever nothing inside it overlaps.
+   */
+  _paintGroup(ctx, opacity) {
+    const rect = this._groupRect();
+    if (!rect) return;
+    const surface = this._groupSurfaceFor(rect.width, rect.height);
+    const alpha = ctx.globalAlpha ?? 1;
+    if (!surface) {
+      ctx.globalAlpha = alpha * opacity;
+      try {
+        this._paintNode(ctx);
+      } finally {
+        ctx.globalAlpha = alpha;
+      }
+      return;
+    }
+    surface.render((sctx) => {
+      sctx.clearRect(0, 0, rect.width, rect.height);
+      sctx.translate(-rect.x, -rect.y);
+      const damage = this.root?._paintDamage;
+      if (damage) {
+        sctx.beginPath();
+        sctx.rect(damage.x, damage.y, damage.width, damage.height);
+        sctx.clip();
+      }
+      this._paintNode(sctx);
+    });
+    ctx.globalAlpha = alpha * opacity;
+    try {
+      ctx.drawImage(surface, rect.x, rect.y);
+    } finally {
+      ctx.globalAlpha = alpha;
+    }
+  }
+
+  /** Where a group's surface goes: the subtree's paint bounds, on whole
+   *  pixels, cut to the window — a faded pane scrolled far off the top has
+   *  nothing of its own down there to keep. Null when none of it is on the
+   *  window at all. */
+  _groupRect() {
+    const b = this._subtreeBounds();
+    const win = this.root?.abs;
+    let x0 = Math.floor(b.x);
+    let y0 = Math.floor(b.y);
+    let x1 = Math.ceil(b.x + b.width);
+    let y1 = Math.ceil(b.y + b.height);
+    if (win) {
+      x0 = Math.max(x0, 0);
+      y0 = Math.max(y0, 0);
+      x1 = Math.min(x1, Math.ceil(win.width));
+      y1 = Math.min(y1, Math.ceil(win.height));
+    }
+    if (x1 <= x0 || y1 <= y0) return null;
+    return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+  }
+
+  /** The group surface at this size, kept from the last frame when it fits —
+   *  a fade asks for the same one every frame. Null where the backend has
+   *  none to give. */
+  _groupSurfaceFor(width, height) {
+    const kept = this._groupSurface;
+    if (kept && kept.width === width && kept.height === height) return kept;
+    if (kept) this._releaseGroupSurface();
+    const app = this.app;
+    if (!app?.display?.Render && typeof app?.createSurface !== 'function') {
+      return null;
+    }
+    try {
+      this._groupSurface = new Surface(app, { width, height });
+    } catch {
+      // no pixmap to be had: the fallback draws with the alpha instead
+      this._groupSurface = null;
+    }
+    return this._groupSurface;
+  }
+
+  _releaseGroupSurface() {
+    const surface = this._groupSurface;
+    this._groupSurface = null;
+    try {
+      surface?.destroy();
+    } catch {
+      // gone with its connection
+    }
+  }
+
+  /** Everything this node draws, and its children: `paint` minus the group. */
+  _paintNode(ctx) {
     // Outside the box and under everything, which is the whole of what makes
     // a shadow different from a colour: it is drawn before this node's own
     // background so a translucent background does not sit on top of it, and

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