react-x11 2.24.0 → 2.25.0

package/src/events.js

@@ -431,6 +431,10 @@ export class EventManager {
     this._wheelOwed = { x: 0, y: 0 };
     // the window's DragSession while a press has armed it (src/dnd.js)
     this._dragArmed = null;
+    // where the pointer last was over this window — the motion or the wheel
+    // that said so — for asking again what is under it once what is under
+    // it has moved (`refreshHover`). Null while the pointer is elsewhere.
+    this._pointer = null;
     // on a *top-level* window's manager: the chords bound anywhere in its
     // tree, newest last (`registerAccelerator`). Null until one is bound,
     // which is the common case and costs one null check per key.
@@ -792,6 +796,7 @@ export class EventManager {
    * render it started for the notch before.
    */
   _onWheel(native) {
+    this._pointer = native;
     // The first wheel is what says this window wants smooth scrolling. It was
     // created on core events — an XI2 selection costs four times as many
     // bytes per *pointer move*, which a window that is never scrolled would
@@ -1004,6 +1009,7 @@ export class EventManager {
   }
 
   _onMouseMove(native) {
+    this._pointer = native;
     if (inspectHandler) {
       inspectHandler('move', this._hit(native), native);
       return;
@@ -1090,6 +1096,7 @@ export class EventManager {
     // ancestor was told the pointer had gone and then that it was back, and
     // `onMouseOut` that it had left a window it was still in.
     if (this._leftIntoSurface(native)) return;
+    this._pointer = null;
     runWithPriority(ContinuousEventPriority, () => {
       this._updateHover([], native);
       // the pointer is somewhere else entirely: whatever it was heading for
@@ -1186,6 +1193,41 @@ export class EventManager {
     this.pressPath = path;
   }
 
+  /**
+   * Hover follows content. The pointer stayed where it was and what is
+   * under it moved — a scroll, or a layout that put something else there —
+   * so the question a motion asks is asked again at the point, as a browser
+   * asks it at the frame after a scroll: `:hover`, enter and leave change
+   * as a motion would change them, and the node under the pointer hears
+   * `defaultMouseMove` there, since an element that paints its own hover
+   * (a document, a graph) has content that moved under the point even where
+   * the node did not. The application's `onMouseMove` is not called: the
+   * pointer did not move. Nothing is asked while a press or a capture holds
+   * the pointer, where hover is frozen for the gesture.
+   *
+   * Called by the window after a frame that laid out (nodes/window/flush.js),
+   * which is every frame a scroll moves content in.
+   */
+  refreshHover() {
+    const at = this._pointer;
+    if (!at || inspectHandler || this.node.destroyed) return;
+    if (this._captured() || this.downNode || this._dragArmed) return;
+    runWithPriority(ContinuousEventPriority, () => {
+      const target = this._hit(at);
+      const path = this._path(target);
+      const old = this.hoverPath;
+      if (
+        path.length !== old.length ||
+        path.some((node, i) => node !== old[i])
+      ) {
+        this._updateHover(path, at);
+      }
+      if (typeof target.defaultMouseMove === 'function') {
+        target.defaultMouseMove(this._makeEvent('mouseMove', at, target));
+      }
+    });
+  }
+
   /** enter/leave do not propagate: each node on the diff gets its own call. */
   _updateHover(newPath, native) {
     const oldPath = this.hoverPath;

package/src/node.d.ts

@@ -48,6 +48,10 @@ export interface ImageDataLike {
  * Anything ntk documents beyond this is reachable at runtime and is
  * ntk's to change.
  */
+/** One corner's radius for `roundRect`: circular, or elliptical as a
+ * `DOMPointInit`. */
+export type RoundRectRadius = number | { x?: number; y?: number };
+
 export interface Context2D {
   fillStyle: string | CanvasGradientLike;
   strokeStyle: string | CanvasGradientLike;
@@ -125,12 +129,16 @@ export interface Context2D {
     anticlockwise?: boolean,
   ): void;
   rect(x: number, y: number, width: number, height: number): void;
+  /** Canvas's `roundRect`: a radius for every corner, a `{ x, y }` point
+   * for an elliptical one, or a list of one to four of either, clockwise
+   * from the top left. A shadowed `fill` of one — or of a `rect` less one,
+   * filled `'evenodd'` — is drawn from a shadow tile made once. */
   roundRect(
     x: number,
     y: number,
     width: number,
     height: number,
-    radii: number | number[],
+    radii: RoundRectRadius | RoundRectRadius[],
   ): void;
   fill(fillRule?: 'nonzero' | 'evenodd'): void;
   stroke(): void;
@@ -515,6 +523,17 @@ export declare class Node {
    * paint, whatever the props. A translucent element answers `null`.
    */
   opaqueRect(): Rect | null;
+  /**
+   * What this element draws that stays put in the viewport of the scroll
+   * pane it is in while the pane scrolls — a document's fixed background, a
+   * `position: fixed` header — as rects in window coordinates, device
+   * pixels, or null, the default, for drawing that moves with the content.
+   * A scroll of that pane that blits repaints them where they are and where
+   * the copy dragged their image; one that covers most of the viewport
+   * makes the scroll a repaint. Only the nearest scroll pane asks. Read on
+   * each scroll the pane blits, after layout.
+   */
+  viewportFixedRects(): Rect[] | null;
   /**
    * How far this element's own drawing reaches past its box, in device
    * pixels on every side — 0, the default, for an element that stays inside

package/src/nodes/boxpaint.js

@@ -267,10 +267,42 @@ export class NodeBoxPaint {
         ctx.fillShadow(rect, r, shadow.blur, color);
         continue;
       }
+      // No X server to bake a blur on — CoreGraphics, Direct2D: the
+      // context's own shadow, which draws a rounded rect's from a tile it
+      // keeps (src/backend/shadowtiles.js). The coverage route below needs
+      // RENDER and drew nothing there.
+      if (!this.app?.display?.Render) {
+        this._paintShadowOnContext(ctx, rect, r, shadow.blur, color);
+        continue;
+      }
       this._paintBlurredShadow(ctx, rect, r, shadow.blur, color);
     }
   }
 
+  /**
+   * One blurred shadow through the context's `shadowBlur`: the rounded rect
+   * filled clear of the surface to its left, and its shadow thrown back by
+   * as much, so that only the shadow lands. Offsets are device pixels and
+   * the shape moves in the context's own units, hence the scale between.
+   */
+  _paintShadowOnContext(ctx, rect, radius, blur, color) {
+    if (!('shadowBlur' in ctx) || typeof ctx.roundRect !== 'function') return;
+    const m = ctx.getTransform?.() ?? { a: 1, e: 0 };
+    const reach = Math.ceil(blur * 1.5) + 1;
+    const away =
+      Math.ceil(Math.abs(rect.x) + rect.width + Math.abs(m.e) + reach) + 1;
+    ctx.save();
+    ctx.shadowColor = color;
+    ctx.shadowBlur = blur;
+    ctx.shadowOffsetX = away * m.a;
+    ctx.shadowOffsetY = 0;
+    ctx.fillStyle = '#000000';
+    ctx.beginPath();
+    ctx.roundRect(rect.x - away, rect.y, rect.width, rect.height, radius);
+    ctx.fill();
+    ctx.restore();
+  }
+
   /**
    * One blurred shadow, through the paint cache when there is one.
    *

package/src/nodes/invalidate.js

@@ -114,6 +114,29 @@ export class NodeInvalidate {
     return null;
   }
 
+  /**
+   * What this element draws that stays put in the viewport of the scroll
+   * pane it is in while the pane scrolls, as rects in window coordinates,
+   * device pixels, like `abs` — or null, the default, for an element
+   * whose drawing moves with the content. A document's fixed background or
+   * `position: fixed` header is drawn where the pane's viewport is, not
+   * where the content under it is, and a scroll's blit copies the pane's
+   * pixels with the content: it dragged the header along, and left the
+   * background scrolling with the text.
+   *
+   * A pane scroll that blits repaints what these rects answer where they
+   * are and where the copy dragged their image, as it does the corners of
+   * a rounded box around the pane; one that covers most of the viewport
+   * makes the scroll a repaint. Only the nearest scroll pane's scroll is
+   * asked about: a pane further out moves the inner one, and what is fixed
+   * to it, with its content. Read on each scroll the pane blits, after
+   * layout, so it may follow `abs` and the pane's `contentBox()`; the
+   * element draws those rects in its `paint` from the same geometry.
+   */
+  viewportFixedRects() {
+    return null;
+  }
+
   /**
    * How far this element's own drawing reaches past its box — device
    * pixels, on every side — or 0, the default, for one that stays inside

package/src/nodes/node.js

@@ -607,6 +607,7 @@ export class Node {
     // nothing else ever asks for a frame
     this.root?._animating.delete(this);
     this.root?._opaqueNodes?.delete(this);
+    this.root?._viewportFixedNodes?.delete(this);
     // a surface that goes away takes its selection with it, and the app-wide
     // claim on being the one showing one goes with it too
     this._textSelection?.destroy();
@@ -625,11 +626,15 @@ export class Node {
       this.root?._layoutHosts?.delete(this);
       root?._layoutHosts?.add(this);
     }
-    // an element answering `opaqueRect()` is one the window asks per pass
+    // an element answering `opaqueRect()` is one the window asks per pass,
+    // and one answering `viewportFixedRects()` one it asks per scroll blit
     const opaque = this.opaqueRect !== Node.prototype.opaqueRect;
+    const fixed = this.viewportFixedRects !== Node.prototype.viewportFixedRects;
     if (opaque) this.root?._opaqueNodes?.delete(this);
+    if (fixed) this.root?._viewportFixedNodes?.delete(this);
     this.root = root;
     if (opaque) root?._opaqueNodes?.add(this);
+    if (fixed) root?._viewportFixedNodes?.add(this);
     // styled before it had a window, so this is where a placed node is
     // first registered (WindowNode._placeNodes)
     if (this.style && isPlaced(this.style)) root?._placedNodes?.add(this);

package/src/nodes/paint.js

@@ -135,9 +135,9 @@ export class NodePaint {
    * wherever nothing inside it overlaps.
    */
   _paintGroup(ctx, opacity) {
-    const rect = this._groupRect();
+    let rect = this._groupRect();
     if (!rect) return;
-    const surface = this._groupSurfaceFor(rect.width, rect.height);
+    let surface = this._groupSurfaceFor(rect.width, rect.height);
     const alpha = ctx.globalAlpha ?? 1;
     if (!surface) {
       ctx.globalAlpha = alpha * opacity;
@@ -148,17 +148,32 @@ export class NodePaint {
       }
       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);
-    });
+    const draw = () =>
+      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);
+      });
+    draw();
+    // A paragraph learns how far its ink reaches past its box by drawing
+    // (`TextNode._keepInkReach`). One its paint lays out at a width nothing
+    // measured it at — a box of no width is drawn unwrapped — learns it only
+    // here, after the surface was sized, which cut its overflow off on the
+    // first frame and drew it whole on every frame after. Drawn once more,
+    // at the size it turned out to need: the one time it is not known.
+    const after = this._groupRect();
+    if (after && !rectContains(rect, after)) {
+      rect = after;
+      surface = this._groupSurfaceFor(rect.width, rect.height);
+      if (!surface) return;
+      draw();
+    }
     ctx.globalAlpha = alpha * opacity;
     try {
       ctx.drawImage(surface, rect.x, rect.y);
@@ -522,6 +537,16 @@ export class NodePaint {
   }
 }
 
+/** Whether `outer` holds all of `inner`. */
+function rectContains(outer, inner) {
+  return (
+    inner.x >= outer.x &&
+    inner.y >= outer.y &&
+    inner.x + inner.width <= outer.x + outer.width &&
+    inner.y + inner.height <= outer.y + outer.height
+  );
+}
+
 /** WindowNode's half of the paint walk, installed onto `WindowNode.prototype` by window/window.js. */
 export class WindowPaint {
   /** Repaint one damage rect, or the whole window when `damage` is null. */

package/src/nodes/scrollable.js

@@ -67,6 +67,8 @@ function contentReach(node, top) {
   const boxes = layoutDiff.boxes;
   for (const child of node.children) {
     if (child.isWindow || !child.yoga || child.hidden) continue;
+    // not laid out, and not there: see `absolutize`
+    if (child.style.display === 'none') continue;
     const box = child.yoga.getComputedLayout();
     // …for the walk that places this child, later in the same one
     boxes?.set(child, box);
@@ -239,12 +241,20 @@ export const Scrollable = (Base) =>
       try {
         this._assignAbs(x, y, width, height);
         if (this.props.onLayout) this._reportLayout();
-        this._absolutizeChildren(
-          this.abs.x,
-          this.abs.y,
-          this.abs.x - wasX,
-          this.abs.y - wasY,
-        );
+        // A `display: 'none'` subtree takes part in no layout: yoga leaves
+        // its children where the last pass that reached them did — and a
+        // child inserted or moved while it was hidden with no layout at all,
+        // NaN, which a scroll pane in there measured its content from and
+        // threw on, out of the frame. The box itself has its empty rect;
+        // what is inside is placed when it is shown and laid out again.
+        if (this.style.display !== 'none') {
+          this._absolutizeChildren(
+            this.abs.x,
+            this.abs.y,
+            this.abs.x - wasX,
+            this.abs.y - wasY,
+          );
+        }
       } finally {
         if (move) {
           layoutDiff.shift = null;

package/src/nodes/scrollblit.js

@@ -218,6 +218,13 @@ function unionIsBox(a, b) {
   );
 }
 
+/** Two lists of pins as one, either of which may be null. */
+function joinPins(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  return [...a, ...b];
+}
+
 /** Is `rect` inside one of `pins`, the furniture an element blit pinned —
  * repaired whole after the copy, whatever changed in it (issue #682)? */
 function insidePinned(rect, pins) {
@@ -862,7 +869,13 @@ export class WindowScrollBlit {
     // (issue #691) and repaired below, where they are and where the copy
     // dragged their image. Refused instead, a list or a document inside a
     // rounded frame repainted its whole viewport on every step of a scroll.
-    const corners = this._cornerPins(node, vp, target.top);
+    // …and so is what an element in the pane draws fixed to its viewport
+    // (`viewportFixedRects()`): a document's fixed background or header,
+    // which the copy would drag along with the text under it
+    const corners = joinPins(
+      this._cornerPins(node, vp, target.top),
+      this._viewportFixedPins(node, vp),
+    );
     if (!this._scrollBlitSafe(node, vp, target.top, null, corners)) return;
     // The band the scrolled bar's thumb travels in is repaired on its own.
     // The thumb's rects are thin and run along the viewport's edge, and a
@@ -1189,6 +1202,30 @@ export class WindowScrollBlit {
    * Ancestors below `upTo`, the node the blit's surface belongs to
    * (`_blitTarget`): a pane is a rectangle no corner above it clips.
    */
+  /**
+   * What the elements in scroll pane `node` draw fixed to its viewport
+   * (`viewportFixedRects()`), inside `vp` and out to whole pixels: pinned
+   * like a rounded ancestor's corners, repaired where they are and where the
+   * blit dragged their image. Asked only of an element whose nearest scroll
+   * pane is `node` — a pane further in moves with the content, and whatever
+   * is fixed to it with it — and not of one hidden or gone.
+   */
+  _viewportFixedPins(node, vp) {
+    let out = null;
+    for (const fixed of this._viewportFixedNodes ?? []) {
+      if (fixed.destroyed || fixed.hidden || fixed.root !== this) continue;
+      let pane = fixed.parent;
+      while (pane && !pane.isWindow && !pane.isScroller?.()) pane = pane.parent;
+      if (pane !== node) continue;
+      for (const rect of fixed.viewportFixedRects() ?? []) {
+        if (!rectsOverlap(rect, vp)) continue;
+        const inside = intersectRects(outerPixels(rect), vp);
+        if (inside) (out ??= []).push(inside);
+      }
+    }
+    return out;
+  }
+
   _cornerPins(node, vp, upTo = this) {
     let out = null;
     for (let n = node.parent; n && n !== upTo; n = n.parent) {

package/src/nodes/text.js

@@ -52,6 +52,72 @@ function outside(ink, box) {
 /** `TextNode._trim`'s answer, per layout. */
 const trims = new WeakMap();
 
+/** {@link glyphInk}'s answer, per layout. */
+const glyphInks = new WeakMap();
+
+/**
+ * Where a layout's glyphs put ink past its lines' boxes, from its origin —
+ * or null where the engine cannot say. A glyph inks past its advance: a `j`
+ * that starts a line hooks back over the line's start and an `f` that ends
+ * one reaches past its end, by their own boxes (`glyphExtents`, ntk's). And
+ * a line set tighter than its face has ascenders over its top and
+ * descenders under its bottom, by the face's own reach (`metrics`).
+ *
+ * Found once per layout, and only where it can leave the layout's box: at a
+ * line's two ends, and over the first line and under the last. A glyph an
+ * em inside a line's ends reaches neither end, and measuring every glyph
+ * cost about as much again as laying the paragraph out.
+ */
+function glyphInk(layout) {
+  const known = glyphInks.get(layout);
+  if (known !== undefined) return known;
+  let left = Infinity;
+  let top = Infinity;
+  let right = -Infinity;
+  let bottom = -Infinity;
+  const lines = layout.lines;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const outer = i === 0 || i === lines.length - 1;
+    const start = line.x;
+    const end = line.x + line.width;
+    for (const placed of line.runs ?? []) {
+      const run = placed.run;
+      if (!run?.glyphs) continue;
+      if (outer) {
+        const m = run.font?.metrics?.(run.size);
+        if (m && m.ascent >= 0 && m.descent >= 0) {
+          top = Math.min(top, line.baseline - m.ascent);
+          bottom = Math.max(bottom, line.baseline + m.descent);
+        }
+      }
+      // the pen as `layout.draw` moves it
+      let pen = line.x + placed.x;
+      for (const glyph of run.glyphs) {
+        const gx = pen + glyph.dx;
+        const gy = line.baseline - glyph.dy;
+        pen += glyph.ax;
+        if (gx - run.size > start && gx + run.size < end) continue;
+        // a face that cannot say leaves its glyphs to the lines' boxes, and
+        // a blank glyph — a space — has no ink to reach anywhere with
+        const face = glyph.font ?? run.font;
+        const e = face?.glyphExtents?.(glyph.id, run.size);
+        if (!e || !(e.maxX > e.minX && e.maxY > e.minY)) continue;
+        left = Math.min(left, gx + e.minX);
+        right = Math.max(right, gx + e.maxX);
+        if (outer) {
+          top = Math.min(top, gy + e.minY);
+          bottom = Math.max(bottom, gy + e.maxY);
+        }
+      }
+    }
+  }
+  const ink =
+    left <= right || top <= bottom ? { left, top, right, bottom } : null;
+  glyphInks.set(layout, ink);
+  return ink;
+}
+
 /** The size under which this connection's text is painted as strips. */
 export function setTextStripBelow(app, below) {
   if (below === undefined) return;
@@ -739,7 +805,8 @@ export class TextNode extends Node {
     if (placed) layoutDiff.sink(insetRect(placed, -DAMAGE_SLOP), this);
   }
 
-  /** The rect the lines of a placed layout cover, in window coordinates. */
+  /** The rect the lines of a placed layout cover, and their glyphs' ink
+   *  where it reaches past them, in window coordinates. */
   _inkOf({ layout, x, y }) {
     const lines = layout.lines;
     if (!lines?.length) return null;
@@ -749,11 +816,21 @@ export class TextNode extends Node {
       left = Math.min(left, line.x);
       right = Math.max(right, line.x + line.width);
     }
+    let top = 0;
+    let bottom = layout.height;
+    const glyphs = glyphInk(layout);
+    if (glyphs) {
+      // each is ±Infinity where nothing was found to reach that way
+      left = Math.min(left, glyphs.left);
+      right = Math.max(right, glyphs.right);
+      top = Math.min(top, glyphs.top);
+      bottom = Math.max(bottom, glyphs.bottom);
+    }
     return {
       x: x + left,
-      y,
+      y: y + top,
       width: right - left,
-      height: layout.height,
+      height: bottom - top,
     };
   }
 

package/src/nodes/window/floors.js

@@ -56,7 +56,7 @@ export function captureLeafHeights(node, out) {
  * is back to meaning only how eagerly the space *above* the floor is given
  * up.
  */
-function namesOwnFloor(node, axis) {
+export function namesOwnFloor(node, axis) {
   const style = node.style;
   if (style.overflow === 'scroll' || style.overflow === 'hidden') return true;
   return (

package/src/nodes/window/flush.js

@@ -138,6 +138,14 @@ export class WindowFlush {
         if (!this.destroyed) this._scheduleFrame();
       }
     }
+    // A frame that laid out may have moved what is under a pointer that did
+    // not move — a scroll does, every frame of it — and hover follows the
+    // content (`EventManager.refreshHover`). After the frame: what hover
+    // changes is the next frame's to paint.
+    if (this._hoverRecheck) {
+      this._hoverRecheck = false;
+      if (!this.destroyed) this.events?.refreshHover();
+    }
   }
 
   /** The frame itself. True when it painted or presented something. */
@@ -289,7 +297,11 @@ export class WindowFlush {
     // like `presentFrame`; an ntk window has no such half.
     this.window.prepareFrame?.(this, layoutRan);
     // any node this pass laid out may be what an open popup is anchored to
-    if (layoutRan) this._notifyAnchorChange();
+    // — or what a pointer that has not moved is over now (`flush`)
+    if (layoutRan) {
+      this._notifyAnchorChange();
+      this._hoverRecheck = true;
+    }
     // A subtree that only moved and covers its box opaquely is copied where
     // it went, and the frame paints around the copy — or its move is
     // claimed, where it was and where it is (nodes/moveblit.js). Once every

package/src/nodes/window/size.js

@@ -2,7 +2,7 @@
 // floors, laying the root out, deferring floors during a live resize and
 // catching up after, and refitting the window to what it holds.
 
-import { measuringExactly } from '../../styles.js';
+import { exactLayoutConfig, measuringExactly } from '../../styles.js';
 import { availableArea } from '../../screens.js';
 import { Yoga } from '../../yoga.js';
 import {
@@ -11,6 +11,7 @@ import {
   columnHeightSpan,
   markUnreadLeaves,
   declaresOwnMinimum,
+  namesOwnFloor,
   dirtyOutside,
   floorBoundaryOf,
   probeHeightFloors,
@@ -327,12 +328,18 @@ export class WindowSize {
 
   /**
    * One spine root's floors, measured with it laid out alone — at the width
-   * it has in each of the passes over the whole tree (`spine.js`), and with
-   * no height on offer in either height pass, because down a column whose
-   * height is its content's the pass over the whole tree has none to offer
-   * it either. Its own extents are written here: unlike a box that sizes
-   * itself, a root's are its content's, and the column it sits in is summed
-   * from them (`_sumSpine`).
+   * it has in each of the passes over the whole tree (`spine.js`), and, for
+   * its heights, as the one item of a column that offers it what each of
+   * those passes does: no height in the first, and in the collapse what
+   * the column it sits in offers there (`frameFor`), which is 0 under the
+   * window. Laid out as an item rather than as a root, it is resolved as
+   * its column resolves it there — a basis counts, a floor of its own is
+   * given way to — and what it holds is laid out in the bound yoga passes
+   * down, which squashes a pane in it that names a floor: laid out with no
+   * height at all, a <Tree>'s pane came out as tall as its 100,000 rows.
+   * Its own extents are written here: unlike a box that sizes itself, a
+   * root's are its content's, and the column it sits in is summed from
+   * them (`_sumSpine`).
    */
   _measureSpineRoot(root, widths, axis, probe = false) {
     onExactCopy(root, () =>
@@ -356,33 +363,50 @@ export class WindowSize {
       restoreShrink(shrunk);
       return;
     }
-    this._scopedFloorPasses += 1;
-    yoga.calculateLayout(widths.width, undefined, dir);
-    if (probe) {
-      const hit = { marked: false, owed: false };
-      probeHeightFloors(root, this, hit, root);
-      if (hit.marked) {
-        this._writeFloors('height');
-        this._scopedFloorPasses += 1;
-        yoga.calculateLayout(widths.width, undefined, dir);
+    // the column it is laid out in (`frameFor`), as wide as the one it sits in
+    const column = Yoga.Node.create(exactLayoutConfig());
+    if (widths.frame.scrolls) column.setOverflow(Yoga.OVERFLOW_SCROLL);
+    column.insertChild(yoga, 0);
+    const pass = (height) => {
+      this._scopedFloorPasses += 1;
+      column.calculateLayout(widths.width, height, dir);
+    };
+    try {
+      pass(undefined);
+      if (probe) {
+        const hit = { marked: false, owed: false };
+        probeHeightFloors(root, this, hit, root);
+        if (hit.marked) {
+          this._writeFloors('height');
+          pass(undefined);
+        }
       }
+      const intrinsic = new Map();
+      captureLeafHeights(root, intrinsic);
+      const frozen = [];
+      freezeWidths(root, frozen);
+      const shrunk = [];
+      setMeasuringShrink(root, axis, shrunk);
+      // …and gives way in it as `setMeasuringShrink` has everything else
+      // give way: to a floor it names, and to nothing else
+      const shrink = namesOwnFloor(root, axis) ? 1 : 0;
+      if ((root.style.flexShrink ?? 1) !== shrink) {
+        yoga.setFlexShrink(shrink);
+        shrunk.push(root);
+      }
+      pass(widths.frame.height);
+      const span = contentSpan(root, axis, intrinsic, this);
+      root._floorH = declaresOwnMinimum(root, axis)
+        ? yoga.getComputedHeight()
+        : span;
+      root._floorAtW = yoga.getComputedWidth();
+      this._floorsMeasured += 1;
+      restoreWidths(frozen);
+      restoreShrink(shrunk);
+    } finally {
+      column.removeChild(yoga);
+      column.free();
     }
-    const intrinsic = new Map();
-    captureLeafHeights(root, intrinsic);
-    const frozen = [];
-    freezeWidths(root, frozen);
-    const shrunk = [];
-    setMeasuringShrink(root, axis, shrunk);
-    this._scopedFloorPasses += 1;
-    yoga.calculateLayout(widths.width, undefined, dir);
-    const span = contentSpan(root, axis, intrinsic, this);
-    root._floorH = declaresOwnMinimum(root, axis)
-      ? yoga.getComputedHeight()
-      : span;
-    root._floorAtW = yoga.getComputedWidth();
-    this._floorsMeasured += 1;
-    restoreWidths(frozen);
-    restoreShrink(shrunk);
   }
 
   /** The columns of this frame's spines, deepest first, summed from their