react-x11 2.35.0 → 2.36.0

package/package.json

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

package/src/backend/context2d.js

@@ -194,6 +194,19 @@ class LinearGradient {
 
 const clamp01 = (v) => Math.min(1, Math.max(0, Number(v) || 0));
 
+// What `textAlign`, `textBaseline` and `direction` take. A value outside
+// them is ignored and the last one stays, as canvas has it.
+const TEXT_ALIGNS = new Set(['start', 'end', 'left', 'right', 'center']);
+const TEXT_BASELINES = new Set([
+  'top',
+  'hanging',
+  'middle',
+  'alphabetic',
+  'ideographic',
+  'bottom',
+]);
+const DIRECTIONS = new Set(['ltr', 'rtl', 'inherit']);
+
 /**
  * The Render ops text draws with, numbered as XRender numbers them so a
  * caller's `ctx.Render?.PictOp?.Over ?? 3` reads the same on both
@@ -428,6 +441,9 @@ export class BackendContext2D {
       dash: [],
       dashOffset: 0,
       font: '10px sans-serif',
+      textAlign: 'start',
+      textBaseline: 'alphabetic',
+      direction: 'inherit',
       shadowBlur: 0,
       shadowOffsetX: 0,
       shadowOffsetY: 0,
@@ -654,6 +670,37 @@ export class BackendContext2D {
     this._state.font = String(value);
   }
 
+  /** Where `fillText`'s x is on the text: its start, end, left, right or
+   *  centre. */
+  get textAlign() {
+    return this._state.textAlign;
+  }
+
+  set textAlign(value) {
+    if (TEXT_ALIGNS.has(value)) this._state.textAlign = value;
+  }
+
+  /** Where `fillText`'s y is on the text: its alphabetic baseline, or the
+   *  top, middle or bottom of its em box, or its hanging or ideographic
+   *  baseline. */
+  get textBaseline() {
+    return this._state.textBaseline;
+  }
+
+  set textBaseline(value) {
+    if (TEXT_BASELINES.has(value)) this._state.textBaseline = value;
+  }
+
+  /** Which way `start` and `end` face. `inherit`, with no element to take
+   *  it from, is the text's own: right to left where it starts so. */
+  get direction() {
+    return this._state.direction;
+  }
+
+  set direction(value) {
+    if (DIRECTIONS.has(value)) this._state.direction = value;
+  }
+
   get shadowBlur() {
     return this._state.shadowBlur;
   }
@@ -1932,9 +1979,53 @@ export class BackendContext2D {
   fillText(text, x, y) {
     const layout = this._fontLayout(text);
     if (!layout) return;
-    // canvas fillText's y is the baseline; layouts draw from their top
-    const baseline = layout.lines[0]?.baseline ?? 0;
-    this._drawLayout(layout, x, y - baseline);
+    // canvas fillText's y is on the baseline `textBaseline` names, and x on
+    // the side `textAlign` does; a layout draws from its top left
+    const line = layout.lines[0];
+    const baseline = line?.baseline ?? 0;
+    this._drawLayout(
+      layout,
+      x + this._alignOffset(layout, line),
+      y - baseline + this._baselineOffset(line),
+    );
+  }
+
+  /** How far left of x the text starts: ntk's `_alignOffset`, so a label
+   *  centred on X11 is centred here too. */
+  _alignOffset(layout, line) {
+    let align = this._state.textAlign;
+    if (align === 'start' || align === 'end') {
+      const direction = this._state.direction;
+      const rtl =
+        direction === 'rtl' ||
+        (direction === 'inherit' &&
+          !!line?.runs?.find((r) => r.start === 0)?.rtl);
+      align = (align === 'start') !== rtl ? 'left' : 'right';
+    }
+    const width = layout.width ?? 0;
+    if (align === 'center') return -width / 2;
+    if (align === 'right') return -width;
+    return 0;
+  }
+
+  /** How far below y the alphabetic baseline is: ntk's `_baselineOffset`,
+   *  from the face's ascent and descent. */
+  _baselineOffset(line) {
+    const ascent = line?.ascent ?? 0;
+    const descent = line?.descent ?? 0;
+    switch (this._state.textBaseline) {
+      case 'top':
+        return ascent;
+      case 'hanging':
+        return ascent * 0.8;
+      case 'middle':
+        return (ascent - descent) / 2;
+      case 'bottom':
+      case 'ideographic':
+        return -descent;
+      default:
+        return 0;
+    }
   }
 
   _fontLayout(text, color) {

package/src/cocoa/presenter.js

@@ -29,7 +29,12 @@ import { cssColorStraight } from 'ntk/color';
 import { Node } from '../nodes/node.js';
 import { addDamageRect, damageToPaint } from '../nodes/damage.js';
 import { intersectRects } from '../nodes/rects.js';
-import { EASING_CONTROL_POINTS, TRANSITION_CONTROL_POINTS } from '../styles.js';
+import { now as animationNow } from '../nodes/animation.js';
+import {
+  EASING_CONTROL_POINTS,
+  TRANSITION_CONTROL_POINTS,
+  resolveBorderWidths,
+} from '../styles.js';
 import { BackendContext2D } from '../backend/context2d.js';
 
 export const RASTER_PAD = 2; // antialiasing/italic overhang outside the ink bounds
@@ -361,6 +366,33 @@ const ANIMATED_KEY_PATHS = Object.freeze({
   opacity: { keyPath: 'opacity' },
 });
 
+/**
+ * An inset of a node out of the flow moves that node and nothing else — no
+ * sibling, not its parent — so a loop on one is its layer's position: an
+ * offset added to where the layout put the node, which is at the inset's
+ * declared value while the render server runs the loop (the style is the
+ * model). Only for a node no pointer lands on (`pointerEvents: 'none'`),
+ * since input is hit against the layout's rect, which holds still: an
+ * indeterminate bar's block, a highlight that sweeps along a track. Which
+ * axis, and which way a larger value moves the layer; `start` and `end` are
+ * mirrored under RTL.
+ */
+const INSET_KEY_PATHS = Object.freeze({
+  left: { keyPath: 'position.x', axis: 'x', sign: 1 },
+  right: { keyPath: 'position.x', axis: 'x', sign: -1 },
+  start: { keyPath: 'position.x', axis: 'x', sign: 1, logical: true },
+  end: { keyPath: 'position.x', axis: 'x', sign: -1, logical: true },
+  top: { keyPath: 'position.y', axis: 'y', sign: 1 },
+  bottom: { keyPath: 'position.y', axis: 'y', sign: -1 },
+});
+
+/** Does a loop on `prop` move its node, where a presenter runs it
+ *  (`INSET_KEY_PATHS`)? */
+export const movesNode = (prop) => Object.hasOwn(INSET_KEY_PATHS, prop);
+
+// a length or a share of the room: `12`, `'-40%'`
+const PERCENT = /^\s*(-?(?:\d+\.?\d*|\.\d+))%\s*$/;
+
 // the ids the bridge reports an animation's end under: unique per process,
 // looked up per app (`_animationEnds`)
 let animationSeq = 0;
@@ -544,12 +576,16 @@ export class LayerAnimations {
    * is in its bitmap, not on its layer.
    */
   take(node, prop, entry) {
-    const map = ANIMATED_KEY_PATHS[prop];
+    const map = ANIMATED_KEY_PATHS[prop] ?? INSET_KEY_PATHS[prop];
     if (!map || !stylePaintsPlain(node, node._targetStyle ?? node.style)) {
       return false;
     }
-    if (this._value(map, entry.from) == null) return false;
-    if (this._value(map, entry.to) == null) return false;
+    if (map.axis) {
+      if (!this._insetOffsets(node, prop, entry)) return false;
+    } else {
+      if (this._value(map, entry.from) == null) return false;
+      if (this._value(map, entry.to) == null) return false;
+    }
     let pending = this.pending.get(node);
     if (!pending) this.pending.set(node, (pending = new Map()));
     pending.set(prop, entry);
@@ -559,7 +595,12 @@ export class LayerAnimations {
   /** Stop what runs for `prop` on `node`: a loop the window lost sight of,
    *  a declaration that changed, a transition the clock takes back. */
   cancel(node, prop) {
-    this.pending.get(node)?.delete(prop);
+    const pending = this.pending.get(node);
+    // …and nothing left waiting is no entry at all: an empty map still
+    // answers `has`, and a node with nothing to run went onto a layer it
+    // never gave back — a loop that went out of sight between its offer
+    // and its frame did
+    if (pending?.delete(prop) && pending.size === 0) this.pending.delete(node);
     this._removeLive(node, prop);
   }
 
@@ -585,6 +626,78 @@ export class LayerAnimations {
       : null;
   }
 
+  /**
+   * A loop on an inset of `node` as its layer's offsets from where the
+   * layout puts it, `[from, to]` in points — or null where it cannot be
+   * one: not a loop, a node in the flow or one a pointer can land on, an
+   * inset with no declared value to rest at, or a value that is neither a
+   * length nor a percentage. A percentage is a share of the parent's
+   * padding box, which is what the layout places a node out of the flow
+   * in, so the offsets change when the parent's size does (`follow`).
+   */
+  _insetOffsets(node, prop, entry) {
+    const map = INSET_KEY_PATHS[prop];
+    const style = node._targetStyle ?? node.style ?? {};
+    if (!entry.loop || style.position !== 'absolute') return null;
+    if (style.pointerEvents !== 'none') return null;
+    const parent = node.parent;
+    if (!parent?.abs) return null;
+    const edges = resolveBorderWidths(parent.style ?? {}, parent.direction);
+    const room =
+      map.axis === 'x'
+        ? parent.abs.width - edges.left - edges.right
+        : parent.abs.height - edges.top - edges.bottom;
+    const length = (value) => {
+      if (typeof value === 'number')
+        return Number.isFinite(value) ? value : null;
+      const share = typeof value === 'string' ? PERCENT.exec(value) : null;
+      return share ? (Number(share[1]) / 100) * room : null;
+    };
+    const rest = length(style[prop]);
+    const from = length(entry.from);
+    const to = length(entry.to);
+    if (rest === null || from === null || to === null) return null;
+    const sign = map.logical && node.direction === 'rtl' ? -map.sign : map.sign;
+    return [
+      (sign * (from - rest)) / this.scale,
+      (sign * (to - rest)) / this.scale,
+    ];
+  }
+
+  /**
+   * The offsets of a loop moving `node` as the layout has them now: one
+   * whose parent changed size runs again where it has got to in its cycle
+   * (`headStart`), and one that cannot run there any more goes back to the
+   * clock. Before `apply`, which attaches what this hands back.
+   */
+  follow(node, layer) {
+    const live = this.live.get(node);
+    if (!live) return;
+    for (const [id, run] of [...live]) {
+      if (!run.offsets) continue;
+      const offsets = this._insetOffsets(node, run.prop, run.entry);
+      if (
+        offsets &&
+        offsets[0] === run.offsets[0] &&
+        offsets[1] === run.offsets[1]
+      ) {
+        continue;
+      }
+      live.delete(id);
+      this._ends().delete(id);
+      this.native.removeAnimation(layer, run.key);
+      if (!offsets) {
+        node._offloadEnded(run.prop, run.entry);
+        continue;
+      }
+      run.entry.headStart = animationNow() - run.entry.start;
+      let pending = this.pending.get(node);
+      if (!pending) this.pending.set(node, (pending = new Map()));
+      pending.set(run.prop, run.entry);
+    }
+    if (live.size === 0) this.live.delete(node);
+  }
+
   /** The frame's half: attach what `take` accepted to `layer`, after the
    *  model value went out, inside the same transaction. */
   apply(node, layer) {
@@ -592,23 +705,43 @@ export class LayerAnimations {
     if (!pending) return;
     this.pending.delete(node);
     for (const [prop, entry] of pending) {
-      const map = ANIMATED_KEY_PATHS[prop];
+      const map = ANIMATED_KEY_PATHS[prop] ?? INSET_KEY_PATHS[prop];
       const id = `rx${++animationSeq}`;
       const key = `${prop}:${id}`;
       const opts = { duration: entry.duration / 1000, id };
+      let offsets = null;
+      if (map.axis) {
+        // an inset: the layer's offset from where the layout put it, added
+        // to its position — as the layout has the parent now, which may not
+        // be what it was at the swap
+        offsets = this._insetOffsets(node, prop, entry);
+        if (!offsets) {
+          node._offloadDeclined(prop, entry);
+          continue;
+        }
+      }
       if (entry.loop) {
         // a loop replaces whatever ran for the property: its declaration
         // changed, and a loop restarts from the top when it does
         this._removeLive(node, prop);
-        opts.from = this._value(map, entry.from);
-        opts.to = this._value(map, entry.to);
+        if (offsets) {
+          [opts.from, opts.to] = offsets;
+          opts.additive = true;
+        } else {
+          opts.from = this._value(map, entry.from);
+          opts.to = this._value(map, entry.to);
+        }
         opts.timing = EASING_CONTROL_POINTS[entry.easing];
         opts.repeat = Infinity;
         opts.autoreverse = entry.alternate;
         // CA's two halves of one CSS delay: a begin time the layer waits
-        // for showing `from`, or a time offset that starts it that far in
-        if (entry.delay > 0) opts.delay = entry.delay / 1000;
-        else if (entry.delay < 0) opts.timeOffset = -entry.delay / 1000;
+        // for showing `from`, or a time offset that starts it that far in.
+        // A loop the clock has been running comes over where it has got to
+        // (`headStart`, nodes/animation.js `_offerLoopsAgain`), which is
+        // the same delay that much shorter.
+        const wait = (entry.delay ?? 0) - (entry.headStart ?? 0);
+        if (wait > 0) opts.delay = wait / 1000;
+        else if (wait < 0) opts.timeOffset = -wait / 1000;
       } else if (map.colour) {
         // From where the pixels are — which is what "an interrupted
         // transition reverses from where it got to" means here. A colour
@@ -636,7 +769,7 @@ export class LayerAnimations {
       // looked up after the removals above, which may have pruned the map
       let live = this.live.get(node);
       if (!live) this.live.set(node, (live = new Map()));
-      live.set(id, { prop, key, entry });
+      live.set(id, { prop, key, entry, offsets });
       this._ends().set(id, (ev) => this._animationEnded(node, id, ev));
     }
   }
@@ -983,7 +1116,9 @@ export class CocoaLayerPresenter {
     visual.set(
       propBoxProps(node, this.window.app, this.scale, parentOrigin, order),
     );
-    // after the model value went out, inside the same transaction
+    // after the model value went out, inside the same transaction: what
+    // moves the node, as the layout has its parent now, then what waits
+    this.animations.follow(node, visual.layer);
     this.animations.apply(node, visual.layer);
   }
 

package/src/cocoa/promotion.js

@@ -23,16 +23,19 @@
 // part: a promoted layer sits above ALL the 2D content, so a node is
 // promoted only when nothing painted after it in the walk reaches into its
 // bounds — no later sibling at any level, no ancestor's border ring or
-// focus ring, no scrollbar — and only when every clipping ancestor holds
-// the whole of it, because the layer would not be clipped, and no ancestor
-// fades, because the layer would not be faded with it. Declining is
-// always safe: the frame clock runs the animation exactly as it does
-// without this file. And the same test runs again every frame, so a node
-// that becomes overlapped, hidden, clipped, faded or non-plain returns to
-// the bitmap in the frame that finds it, the animation handed back to the
-// clock. Overlays, toasts, drag ghosts, spinners and floating cards pass by
-// construction; a hover fade on a row in the middle of a list does not,
-// and stays on the clock. docs/macos.md §"Layer promotion" is the account.
+// focus ring — and only when every clipping ancestor with round corners
+// holds the whole of it, because the layer is not cut to a curve; one with
+// square corners cuts the layer to its box, a row half out of its list as
+// much as a spinner inside a card. A scrollbar's thumb drawn over it goes
+// on a layer of its own above it instead (`_syncThumbs`). And no ancestor
+// may fade, because the layer would not be faded with it. Declining is always
+// safe: the frame clock runs the animation exactly as it does without this
+// file. The same test runs again every frame, so a node that becomes
+// overlapped, hidden, clipped, faded or non-plain returns to the bitmap in
+// the frame that finds it, the animation handed back to the clock — and a
+// loop the clock runs is offered again once the scene would take it
+// (`wouldTake`), where it is in its cycle. docs/macos.md §"Layer
+// promotion" is the account.
 import { BoxNode } from '../nodes/box.js';
 import { addDamageRect, damageToPaint } from '../nodes/damage.js';
 import { intersectRects } from '../nodes/rects.js';
@@ -42,6 +45,7 @@ import {
   RASTER_PAD,
   RasterState,
   Visual,
+  movesNode,
   propBoxProps,
   stylePaintsPlain,
 } from './presenter.js';
@@ -49,6 +53,15 @@ import { SpriteLayers } from './sprites.js';
 
 const ORIGIN = Object.freeze({ x: 0, y: 0 });
 
+// A pane's thumbs come after everything inside it in the paint order — the
+// bars are painted over the pane's children — and before whatever is
+// painted after the pane: its key with this past any child's index.
+const AFTER_CHILDREN = 1e9;
+
+// What core paints a thumb in when the pane names no colour
+// (`paintScrollbarThumb`).
+const THUMB_COLOUR = 'rgba(0, 0, 0, 0.25)';
+
 // How long a node that has stopped animating keeps its layer. A hover card
 // fades in and, a moment later, out; a palette step ends one transition and
 // starts the next; a toast pulses again. Demoting on the last frame of each
@@ -207,9 +220,23 @@ function promotableNode(node) {
   return !paintsOutline(node);
 }
 
-/** The strip a scrollbar's track occupies, with the pad the thumb's
- * antialiasing needs. Mirrors the layer presenter's bar strip. */
-function scrollbarStrip(bar, scale) {
+/** Where a scrollbar puts ink: its thumb, with the pad the thumb's
+ * antialiasing needs. The track is not drawn, so a layer beside the thumb
+ * covers nothing of the bar's; one the thumb is drawn over has the thumb
+ * lifted above it (`_thumbsLiftable`). */
+function scrollbarInk(bar, scale) {
+  const pad = Math.ceil(2 * scale);
+  return {
+    x: bar.x - pad,
+    y: bar.y - pad,
+    width: bar.width + 2 * pad,
+    height: bar.height + 2 * pad,
+  };
+}
+
+/** …and everywhere the thumb can go, which a lifted thumb's layer may come
+ *  to stand over as the pane scrolls. */
+function scrollbarTrack(bar, scale) {
   const pad = Math.ceil(2 * scale);
   return bar.axis === 'x'
     ? {
@@ -226,6 +253,38 @@ function scrollbarStrip(bar, scale) {
       };
 }
 
+/**
+ * The clip a node's layer is cut to: the one `_clear` narrowed its reach to
+ * through the clipping ancestors around it, where that leaves any of the
+ * node out — and null where every one of them holds it whole, which keeps a
+ * node clear of its pane's edges on the window root as before. A rounded
+ * clip comes with its radius, and with the square clips that cut it again
+ * (`outer`), as an element's part's does.
+ */
+function clipOf(cut, reach) {
+  if (!cut.clip) return null;
+  const radius = cut.radius > 0 ? cut.radius : 0;
+  const held = radius > 0 ? insetRect(cut.clip, radius) : cut.clip;
+  if (!cut.outer && containsRect(held, reach)) return null;
+  return { rect: cut.clip, radius, outer: cut.outer ?? null };
+}
+
+/**
+ * Where a node's layer can be. Where the layout put it and what it holds
+ * reach — or, for a node a loop moves (an inset on a node out of the flow,
+ * which the render server runs as the layer's position, presenter.js
+ * `INSET_KEY_PATHS`), anywhere in the nearest box that clips it, the reach
+ * every frame of the loop stays inside (nodes/animation.js `_loopReach`).
+ * Null where nothing short of the window holds it, which no layer is
+ * cleared for.
+ */
+function reachOf(node) {
+  if (!node._loops?.some((loop) => movesNode(loop.prop))) {
+    return node._subtreeBounds();
+  }
+  return node._loopReach?.()?.rect ?? null;
+}
+
 /**
  * The surface window's promoted nodes: which ones have a layer, what each
  * layer shows, and the animations the render server runs on them.
@@ -263,6 +322,11 @@ export class CocoaPromotion {
     // the parts of elements' drawing they offer (`Node.sprites()`), each on
     // a layer of its own under the same rules (src/cocoa/sprites.js)
     this.sprites = new SpriteLayers(this);
+    // the scroll panes whose thumbs are on layers of their own, above the
+    // layers they are drawn over (`_syncThumbs`), and the ones this frame's
+    // layers are under
+    this.thumbs = new Map(); // pane -> Map(axis -> { layer, props })
+    this._thumbsWanted = null;
     this._claiming = false;
   }
 
@@ -417,12 +481,14 @@ export class CocoaPromotion {
       this.promoted.size === 0 &&
       this.candidates.size === 0 &&
       offers.size === 0 &&
-      this.sprites.hosts.size === 0
+      this.sprites.hosts.size === 0 &&
+      this.thumbs.size === 0
     ) {
       return;
     }
     const native = this.native;
     let lifted = null;
+    const wanted = (this._thumbsWanted = new Set());
     native.txBegin({ disableActions: true });
     try {
       // Later-painted first: a node painted after this one that is coming
@@ -439,8 +505,11 @@ export class CocoaPromotion {
         for (let i = candidates.length - 1; i >= 0; i--) {
           const { node, key } = candidates[i];
           if (this.promoted.has(node) || !this.animations.has(node)) continue;
-          if (key && promotableNode(node) && this._clear(node)) {
-            this._promote(node, root);
+          const cut = { thumbs: new Set(), round: true };
+          const reach = key && promotableNode(node) ? reachOf(node) : null;
+          if (reach && this._clear(node, reach, cut)) {
+            for (const pane of cut.thumbs) wanted.add(pane);
+            this._promote(node, root, clipOf(cut, reach));
           } else {
             this.denied.set(node, this.layoutGen);
             this.animations.drop(node, true);
@@ -450,18 +519,29 @@ export class CocoaPromotion {
       // Then the parts, against the layers this frame keeps: a node
       // promoted over a part is a layer above it, not ink on it.
       lifted = this.sprites.decide(root, offers);
-      // One order for every layer above the bitmap, nodes and parts alike.
+      // A thumb no layer is under any more goes back into the bitmap.
+      for (const pane of [...this.thumbs.keys()]) {
+        if (!wanted.has(pane)) this._dropThumbs(pane, root);
+      }
+      // One order for every layer above the bitmap, nodes, parts and
+      // thumbs alike.
       const order = this._inPaintOrder([...this.promoted.keys()]);
       for (const state of this.sprites.entries()) {
         order.push({ state, key: state.order });
       }
+      for (const pane of wanted) {
+        const key = this._paintKey(pane);
+        if (key) order.push({ pane, key: [...key, AFTER_CHILDREN] });
+      }
       order.sort(byPaintKey);
       for (let i = 0; i < order.length; i++) {
-        const { node, state } = order[i];
+        const { node, state, pane } = order[i];
         if (node) this._sync(node, i, root, layoutRan);
+        else if (pane) this._syncThumbs(pane, i, root);
         else this.sprites.sync(state, i);
       }
     } finally {
+      this._thumbsWanted = null;
       native.txCommit();
     }
     // An element told which of its parts are on layers now may claim,
@@ -472,17 +552,55 @@ export class CocoaPromotion {
   _mayStay(node, key) {
     if (!key || !promotableNode(node)) return false;
     if (this.releasing.has(node)) return false; // its grace ran out
-    return this._clear(node);
+    const cut = { thumbs: new Set(), round: true };
+    const reach = reachOf(node);
+    if (!reach || !this._clear(node, reach, cut)) return false;
+    for (const pane of cut.thumbs) this._thumbsWanted?.add(pane);
+    this.promoted.get(node).clip = clipOf(cut, reach);
+    return true;
   }
 
-  _promote(node, root) {
-    const visual = new Visual(this, node);
-    visual.attach(this.rootVisual);
-    this.promoted.set(node, {
-      visual,
+  /**
+   * Would a frame put `node` on a layer now? Asked of a loop the clock runs
+   * because a frame turned it down or gave it back (nodes/animation.js
+   * `_offerLoopsAgain`): the scene that refused it may have moved on — a
+   * fading ancestor arrived, a sibling went, a scroll took the thumb away —
+   * and nothing about the loop itself would ever ask again. The frame
+   * decides as it always does; this is what keeps a loop that would only
+   * be turned down again from being offered every frame.
+   */
+  wouldTake(node) {
+    if (this.window.destroyed || node.destroyed) return false;
+    if (this.promoted.has(node)) return true;
+    if (!promotableNode(node) || !this._paintKey(node)) return false;
+    const reach = reachOf(node);
+    if (!reach) return false;
+    if (!this._clear(node, reach, { thumbs: new Set(), round: true })) {
+      return false;
+    }
+    // asked of the scene as it is now, so a refusal from an earlier one —
+    // kept for the layout it was made in, and a fade that arrives lays
+    // nothing out — no longer stands
+    this.denied.delete(node);
+    return true;
+  }
+
+  _promote(node, root, clip = null) {
+    const p = {
+      visual: new Visual(this, node),
       content: null,
       dirty: { all: true, rects: [] },
-    });
+      // the clip a clipping ancestor cuts it to, or null (`clipOf`), the box
+      // that masks to it, and the box of the square clips around a rounded
+      // one
+      clip,
+      box: null,
+      boxProps: {},
+      outerBox: null,
+      outerProps: {},
+    };
+    this.promoted.set(node, p);
+    this._place(p);
     node._promoted = true;
     // the bitmap under it repaints without it, from this frame on — and so
     // does the raster of a promoted node it is in, which the claim that
@@ -505,12 +623,64 @@ export class CocoaPromotion {
     this.animations.drop(node, reclaim && !node.destroyed);
     this._dropContent(p);
     p.visual.destroy();
+    if (p.box) this.native.removeFromSuperlayer(p.outerBox ?? p.box);
     if (!node.destroyed && node.abs) {
       this._repaintHolder(node);
       this._claim(root, node.paintBounds());
     }
   }
 
+  /**
+   * The node's layer on the window root, or in a box of its clip's size
+   * that masks to it, where a clipping ancestor with square corners cuts it
+   * (`clipOf`) — a row half scrolled out of its list, as an element's part
+   * is cut (src/cocoa/sprites.js). A layer moved into or out of the box
+   * sends everything again (`Visual.attach`).
+   */
+  _place(p) {
+    const want = p.clip ? (p.clip.outer ? 2 : 1) : 0;
+    const have = p.outerBox ? 2 : p.box ? 1 : 0;
+    if (want === have) {
+      if (!want) p.visual.attach(this.rootVisual);
+      return;
+    }
+    if (p.box) {
+      p.visual.attach(this.rootVisual);
+      this.native.removeFromSuperlayer(p.outerBox ?? p.box);
+      p.box = null;
+      p.outerBox = null;
+    }
+    if (!want) return;
+    p.box = this.native.createLayer();
+    p.boxProps = {};
+    if (want === 2) {
+      p.outerBox = this.native.createLayer();
+      p.outerProps = {};
+      this.native.addSublayer(this.rootVisual.layer, p.outerBox);
+      this.native.addSublayer(p.outerBox, p.box);
+    } else {
+      this.native.addSublayer(this.rootVisual.layer, p.box);
+    }
+    p.visual.attach({ layer: p.box });
+  }
+
+  /** A box's properties, sent where they changed. */
+  _setBox(layer, p, field, next) {
+    const was = p[field];
+    for (const key of Object.keys(next)) {
+      const a = was[key];
+      const b = next[key];
+      const same = Array.isArray(b)
+        ? Array.isArray(a) && b.every((v, i) => v === a[i])
+        : a === b;
+      if (!same) {
+        this.native.setLayerProps(layer, next);
+        p[field] = next;
+        return;
+      }
+    }
+  }
+
   /**
    * A node coming off its layer inside a promoted node: the bitmap holds a
    * hole there, and the node's pixels belong in that node's raster — so the
@@ -597,8 +767,9 @@ export class CocoaPromotion {
    * it, and the parent must not fade: its group is drawn on the bitmap or on
    * its own layer, and either way a layer of the node's would be outside it.
    *
-   * With `cut`, the reach is an element's part (src/cocoa/sprites.js),
-   * whose layer can be cut to a rectangle: a clipping ancestor with square
+   * With `cut`, the layer can be cut to a rectangle — a node's
+   * (`clipOf`), or an element's part's (src/cocoa/sprites.js): a clipping
+   * ancestor with square
    * corners narrows `cut.clip` to its padding box — its border is drawn
    * over what it holds anyway — instead of having to hold the part whole,
    * and every test from there up is asked of what shows through the clip.
@@ -638,6 +809,30 @@ export class CocoaPromotion {
           return true;
         }
       }
+      // A node's layer may be cut to one rounded clip, the innermost that
+      // does not hold it — a block sliding along a bar's rounded track. Its
+      // padding box, with the corners its border leaves, and every square
+      // clip above it cuts it again as above (`outer`).
+      let roundCut = false;
+      if (
+        cut?.round &&
+        !cut.clip &&
+        !parent.isWindow &&
+        parent.clipsChildren?.() &&
+        typeof parent.style?.borderRadius === 'number' &&
+        parent.style.borderRadius > 0 &&
+        !containsRect(insetRect(parent.abs, parent.style.borderRadius), bounds)
+      ) {
+        const border = borderReach(parent);
+        cut.clip = insetRect(parent.abs, border);
+        cut.radius = Math.max(0, parent.style.borderRadius - border);
+        roundCut = true;
+        bounds = intersectRects(bounds, cut.clip);
+        if (!bounds) {
+          cut.bounds = null;
+          return true;
+        }
+      }
       const order = parent.paintOrder();
       for (let j = order.indexOf(n) + 1; j < order.length; j++) {
         if (this._reaches(order[j], bounds)) return false;
@@ -657,7 +852,7 @@ export class CocoaPromotion {
           if (!containsRect(insetRect(parent.abs, inside), bounds))
             return false;
         }
-        if (parent.clipsChildren?.()) {
+        if (parent.clipsChildren?.() && !roundCut) {
           const radius = parent.style?.borderRadius;
           const clip =
             typeof radius === 'number' && radius > 0
@@ -668,9 +863,12 @@ export class CocoaPromotion {
       }
       if (typeof parent._scrollbars === 'function') {
         for (const bar of parent._scrollbars()) {
-          if (rectsOverlap(scrollbarStrip(bar, this.scale), bounds)) {
-            return false;
-          }
+          if (!rectsOverlap(scrollbarInk(bar, this.scale), bounds)) continue;
+          // a thumb drawn over a node's layer goes on a layer of its own
+          // above it, where it can (`_thumbsLiftable`); an element's part
+          // keeps clear of it
+          if (!cut?.thumbs || !this._thumbsLiftable(parent)) return false;
+          cut.thumbs.add(parent);
         }
       }
     }
@@ -697,12 +895,143 @@ export class CocoaPromotion {
     return false;
   }
 
+  // --- a pane's thumbs above the rows they are drawn over ----------------------
+
+  /**
+   * Can `pane`'s thumbs go on a layer above everything inside it? The bars
+   * are painted after the pane's children, so a layer of theirs stands over
+   * the layers of the rows in the pane as the thumb stands over the rows —
+   * where nothing painted after the pane reaches anywhere the thumb can go,
+   * nothing above it fades, and every clip above it holds the track whole:
+   * `_clear` asked of the pane at its tracks. A pane that fades has its
+   * bars in its group.
+   */
+  _thumbsLiftable(pane) {
+    if (fadesAsGroup(pane)) return false;
+    for (const bar of pane._scrollbars()) {
+      if (!this._clear(pane, scrollbarTrack(bar, this.scale))) return false;
+    }
+    return true;
+  }
+
+  /** `pane`'s thumbs on layers of their own at `z` among the layers above
+   *  the bitmap, which stops painting them (`Scrollable._paintScrollbars`):
+   *  a colour and a radius, as core paints one, where the thumb is now. */
+  _syncThumbs(pane, z, root) {
+    let layers = this.thumbs.get(pane);
+    if (!layers) {
+      layers = new Map();
+      this.thumbs.set(pane, layers);
+      pane._thumbsLifted = true;
+      // the bitmap under it, repainted without it
+      for (const bar of pane._scrollbars()) {
+        this._claim(root, scrollbarInk(bar, this.scale));
+      }
+    }
+    const s = this.scale;
+    const backgroundColor = this.app._parseColor(
+      String(pane.props.scrollbarColor || THUMB_COLOUR),
+    ) ?? [0, 0, 0, 0.25];
+    const seen = new Set();
+    for (const bar of pane._scrollbars()) {
+      seen.add(bar.axis);
+      let entry = layers.get(bar.axis);
+      if (!entry) {
+        entry = { layer: this.native.createLayer(), props: {} };
+        this.native.addSublayer(this.rootVisual.layer, entry.layer);
+        layers.set(bar.axis, entry);
+      }
+      const next = {
+        frame: [bar.x / s, bar.y / s, bar.width / s, bar.height / s],
+        backgroundColor,
+        cornerRadius: 3,
+        zPosition: z,
+      };
+      const out = {};
+      let any = false;
+      for (const key of Object.keys(next)) {
+        const was = entry.props[key];
+        const value = next[key];
+        const same = Array.isArray(value)
+          ? Array.isArray(was) && value.every((v, i) => v === was[i])
+          : was === value;
+        if (!same) {
+          out[key] = value;
+          any = true;
+        }
+      }
+      if (any) {
+        this.native.setLayerProps(entry.layer, out);
+        entry.props = next;
+      }
+    }
+    for (const [axis, entry] of layers) {
+      if (seen.has(axis)) continue;
+      this.native.removeFromSuperlayer(entry.layer);
+      layers.delete(axis);
+    }
+  }
+
+  /** `pane`'s thumbs back into the bitmap, which paints them again where
+   *  they are now. */
+  _dropThumbs(pane, root) {
+    const layers = this.thumbs.get(pane);
+    if (!layers) return;
+    this.thumbs.delete(pane);
+    for (const entry of layers.values()) {
+      this.native.removeFromSuperlayer(entry.layer);
+    }
+    pane._thumbsLifted = false;
+    if (pane.destroyed) return;
+    for (const bar of pane._scrollbars()) {
+      this._claim(root, scrollbarInk(bar, this.scale));
+    }
+  }
+
   // --- what the layer shows ----------------------------------------------------
 
   _sync(node, order, root, layoutRan) {
     const p = this.promoted.get(node);
-    p.visual.set(propBoxProps(node, this.app, this.scale, ORIGIN, order));
-    // after the model value went out, inside the same transaction
+    this._place(p);
+    let origin = ORIGIN;
+    let z = order;
+    if (p.box) {
+      // the box stands at the node's place among the layers — or inside
+      // the box of the square clips around it, which does — and the node's
+      // layer is placed from the box's corner inside it
+      const s = this.scale;
+      const { rect: clip, radius, outer } = p.clip;
+      let base = ORIGIN;
+      let boxZ = order;
+      if (p.outerBox) {
+        this._setBox(p.outerBox, p, 'outerProps', {
+          frame: [outer.x / s, outer.y / s, outer.width / s, outer.height / s],
+          masksToBounds: true,
+          zPosition: order,
+        });
+        base = outer;
+        boxZ = 0;
+      }
+      this._setBox(p.box, p, 'boxProps', {
+        frame: [
+          (clip.x - base.x) / s,
+          (clip.y - base.y) / s,
+          clip.width / s,
+          clip.height / s,
+        ],
+        masksToBounds: true,
+        // a circle's arc, as wide as the box allows, where the clip is
+        // rounded
+        cornerRadius: Math.min(radius, clip.width / 2, clip.height / 2) / s,
+        zPosition: boxZ,
+      });
+      origin = clip;
+      z = 0;
+    }
+    p.visual.set(propBoxProps(node, this.app, this.scale, origin, z));
+    // after the model value went out, inside the same transaction: what
+    // moves the node, as the layout has its parent now, then what waits
+    this.animations.follow(node, p.visual.layer);
     this.animations.apply(node, p.visual.layer);
     this._syncContent(node, p, root, layoutRan);
   }
@@ -817,6 +1146,13 @@ export class CocoaPromotion {
   /** Everything off the root layer and freed: the window is going. */
   destroy() {
     this.sprites.destroy();
+    for (const [pane, layers] of this.thumbs) {
+      for (const entry of layers.values()) {
+        this.native.removeFromSuperlayer(entry.layer);
+      }
+      pane._thumbsLifted = false;
+    }
+    this.thumbs.clear();
     for (const timer of this.idle.values()) clearTimeout(timer);
     this.idle.clear();
     this.releasing.clear();
@@ -825,6 +1161,7 @@ export class CocoaPromotion {
       this.animations.drop(node, false);
       this._dropContent(p);
       p.visual.destroy();
+      if (p.box) this.native.removeFromSuperlayer(p.outerBox ?? p.box);
     }
     this.promoted.clear();
     this.candidates.clear();

package/src/cocoa/sprites.js

@@ -48,7 +48,7 @@
 import { RASTER_PAD, RasterState } from './presenter.js';
 import { CocoaPlayer, PlayerLift } from './player.js';
 import { VideoLift, canLiftVideo } from './video.js';
-import { intersectRects, rectContains } from '../nodes/rects.js';
+import { intersectRects, rectContains, rectsOverlap } from '../nodes/rects.js';
 import { DEV } from '../nodes/util.js';
 import { isVideoFrames } from '../videoframes.js';
 
@@ -497,6 +497,7 @@ export class SpriteLayers {
         state.extent = shown;
         now.set(sprite.key, state);
       }
+      if (place) this._underDrawn(host, list, now, was, root);
       if (was) {
         for (const [key, state] of was) {
           if (!now.has(key)) this._drop(state, root);
@@ -512,6 +513,44 @@ export class SpriteLayers {
     return changed;
   }
 
+  /**
+   * An element lists its parts in the order it paints them, and its layers
+   * stand in that order above the bitmap. A part this frame turned down is
+   * the element's to draw, in the bitmap, under every layer, so a part
+   * listed before it — painted under it — may not stay on a layer over it
+   * where the two meet: the later part's pixels would be under the earlier
+   * one's. An element may then offer a part that a later one of its own
+   * overlaps, on the word that the later one is lifted too, and this keeps
+   * that word. Walked from the end of the list, so a part given back here
+   * is under the ones before it in turn. One inside another's layer goes
+   * with that layer, and is not asked.
+   */
+  _underDrawn(host, list, now, was, root) {
+    const drawn = []; // where later parts are in the bitmap
+    const giveBack = (state) => {
+      for (const kid of state.kids) giveBack(kid);
+      now.delete(state.key);
+      // one lifted in an earlier frame goes with the rest of those
+      if (was?.get(state.key) !== state) this._drop(state, root);
+    };
+    for (let index = list.length - 1; index >= 0; index--) {
+      const sprite = list[index];
+      if (!isSprite(sprite) || sprite.parent !== undefined) continue;
+      const state = now.get(sprite.key);
+      if (state?.sprite === sprite) {
+        if (!state.extent) continue; // it shows nothing to be over
+        if (!drawn.some((rect) => rectsOverlap(rect, state.extent))) continue;
+        giveBack(state);
+        drawn.push(state.extent);
+        continue;
+      }
+      // the element draws it, where its own clip lets it show
+      const extent = extentOf(sprite);
+      const shows = sprite.clip ? intersectRects(extent, sprite.clip) : extent;
+      if (shows) drawn.push(shows);
+    }
+  }
+
   /** Every lifted part above the bitmap, with its place in the paint
    *  order: not one inside another's layer, which goes with it (`sync`). */
   entries() {

package/src/cocoa/window.js

@@ -256,6 +256,10 @@ export class CocoaWindow {
         this._promotion.animate(node, prop, entry);
       this.cancelNodeAnimation = (node, prop) =>
         this._promotion.cancel(node, prop);
+      // …and whether a loop the clock runs, turned down or given back by
+      // an earlier frame, would be taken now (nodes/animation.js
+      // `_offerLoopsAgain`)
+      this.wouldAnimateNode = (node) => this._promotion.wouldTake(node);
       this.noteInvalidate = (damage, layoutChanged) =>
         this._promotion.noteInvalidate(damage, layoutChanged);
       this.prepareFrame = (root, layoutRan) =>

package/src/components/ProgressBar.js

@@ -27,9 +27,9 @@ const CROSSING_MS = 1100;
  * [styling.md](../../docs/styling.md#loops)), not a timer here: it runs on
  * the window's own frame clock, claims the block as its damage every frame
  * instead of invalidating the window, and stops itself when the window is
- * unmapped, minimized or buried. A `setInterval` calling `setState` would
- * do none of those three, and would re-render this component sixty times a
- * second to move a rectangle.
+ * unmapped, minimized or buried, or the bar is scrolled out of sight. A
+ * `setInterval` calling `setState` would do none of those, and would
+ * re-render this component sixty times a second to move a rectangle.
  *
  * The travel is in **percentages of the track**, so nothing here measures
  * anything: the bar is right at whatever width its container gives it and
@@ -88,6 +88,10 @@ export function ProgressBar({
           start: moving ? `-${BLOCK}` : '30%',
           borderRadius: height / 2,
           backgroundColor: color ?? theme.accent,
+          // Nothing to press: the bar is the track. Said so, a presenter
+          // that runs the slide as the block's position (macOS) may, since
+          // input would otherwise be hit where the layout left the block.
+          pointerEvents: 'none',
           ...(moving && {
             animation: { start: { to: '100%', duration: CROSSING_MS } },
           }),

package/src/nodes/animation.js

@@ -12,6 +12,7 @@ import {
   interpolate,
   ease,
   isLayoutProp,
+  TEXT_LAYOUT_PROPS,
 } from '../styles.js';
 import { GRID_CONTAINER_PROPS, GRID_ITEM_PROPS } from '../grid.js';
 import { isPlaced } from '../layouts.js';
@@ -19,9 +20,19 @@ import { desktopSettings, watchDesktopSettings } from '../desktopsettings.js';
 import { watchWindowState, windowStateSnapshot } from '../windowstate.js';
 import { shadowExtentOf } from './boxpaint.js';
 import { inThemeWalk } from './cascade.js';
-import { insetRect } from './rects.js';
+import { insetRect, intersectRects, outerPixels } from './rects.js';
 import { shallowEqual } from './util.js';
 
+/** How often a loop the clock runs is offered to a presenter again, at
+ *  most (`_recheckLoops`): a check is a walk up the node's ancestors and
+ *  along what is painted after it, and the loop is a frame every refresh
+ *  for as long as it waits. */
+const REOFFER_MS = 250;
+
+/** The loopable properties that reach past the node's box without moving
+ *  anything: a ring that grows draws further out than the node did. */
+const REACH_PROPS = new Set(['outlineWidth', 'outlineOffset']);
+
 /** Two values of a grid property that lay out the same: an inline
  *  `gridTemplateAreas` array is a new array every render. */
 const sameGridValue = (a, b) =>
@@ -299,16 +310,53 @@ export class NodeAnimation {
   }
 
   /** The presenter could not run `entry` after all — the node turned into a
-   *  raster between the swap and the frame. The frame clock takes it from
-   *  the top; the property's declared start is where the pixels still are. */
+   *  raster between the swap and the frame, or its layer went. A transition
+   *  starts again from the top, since the property's declared start is
+   *  where its pixels still are. A loop goes on where it is in its cycle:
+   *  the render server ran it from `start` (`LayerAnimations.apply`), or it
+   *  never left the clock, so a spinner given back does not jump. */
   _offloadDeclined(prop, entry) {
     if (this._anim?.get(prop) !== entry || this.destroyed) return;
     entry.offloaded = false;
-    entry.start = now();
+    entry.headStart = undefined;
+    if (entry.loop) entry.value = animationValueAt(entry, now() - entry.start);
+    else entry.start = now();
     this.style = { ...this._targetStyle, ...this._animatedValues() };
     this.root?._startAnimating(this);
   }
 
+  /**
+   * Loops the frame clock runs that the presenter would take now: turned
+   * down by a frame, or given back, by a scene that has changed since — an
+   * ancestor done fading, a sibling gone, a thumb scrolled away. Nothing
+   * about a loop would ever ask again, so the window asks (`_recheckLoops`),
+   * and only where the presenter says a frame would take it
+   * (`wouldAnimateNode`), so a loop it would turn down again costs no swap.
+   * Handed over where it is in its cycle (`headStart`).
+   */
+  _offerLoopsAgain() {
+    const wnd = this.root?.window;
+    let asked = false;
+    let moved = false;
+    for (const [prop, a] of this._anim ?? []) {
+      if (!a.loop || a.offloaded) continue;
+      if (!asked) {
+        if (!wnd.wouldAnimateNode(this)) return;
+        asked = true;
+      }
+      a.headStart = now() - a.start;
+      if (this._offload(prop, a)) {
+        a.offloaded = true;
+        moved = true;
+      } else {
+        a.headStart = undefined;
+      }
+    }
+    if (!moved) return;
+    this.style = { ...this._targetStyle, ...this._animatedValues() };
+    this._scheduleAnimationFrames();
+  }
+
   /** Keep the frame clock running only for what the clock itself animates;
    *  an offloaded-only node needs one frame — the one that sends the model
    *  and the animation — and not a loop of them. */
@@ -383,13 +431,19 @@ export class NodeAnimation {
         // re-rendered — which is the frame after every state change in the
         // app.
         if (current?.loop && sameAnimation(current, spec)) {
-          // A loop the clock started before the window had a presenter —
-          // one declared at mount runs from `_setRoot`, before `realize` —
-          // moves over the first time a presenter can take it. Its phase is
-          // the render server's from here, which is what a restart costs.
-          if (!current.offloaded && this._offload(spec.prop, current)) {
-            current.offloaded = true;
-            changed = true;
+          // A loop the clock runs moves over the first time a presenter
+          // takes it: one declared at mount runs from `_setRoot`, before
+          // `realize`, and one a frame turned down runs until the next swap
+          // offers it again (or `_offerLoopsAgain` does). It goes where it
+          // has got to in its cycle (`headStart`), so nothing jumps.
+          if (!current.offloaded) {
+            current.headStart = now() - current.start;
+            if (this._offload(spec.prop, current)) {
+              current.offloaded = true;
+              changed = true;
+            } else {
+              current.headStart = undefined;
+            }
           }
           continue;
         }
@@ -443,7 +497,76 @@ export class NodeAnimation {
       return false;
     }
     if (desktopSettings(root.app).animations === false) return false;
-    return !this._hiddenInTree();
+    if (this._hiddenInTree()) return false;
+    // last, since it is the one that measures — and a hidden subtree's
+    // rects are wherever it was when it went
+    this._outOfSight = this._loopsOutOfSight();
+    return !this._outOfSight;
+  }
+
+  /**
+   * Whether nothing this node's loops draw can be seen: all of it is cut
+   * away by the boxes that clip it, or lies outside the window — a spinner
+   * in a row scrolled out of its list, a bar in a panel scrolled away.
+   * Judged against the arrangement the last layout pass left, and again
+   * after every pass that moved anything (`_recheckLoops`).
+   *
+   * Never from where a frame of the loop has the node *now*: a block that
+   * slides across a track is off it at the start of every crossing, and a
+   * loop stopped there would rest there, unseen, for good. What is judged is
+   * what holds every frame (`_loopReach`), and a loop whose frames can move
+   * what is around it is never judged out of sight at all.
+   */
+  _loopsOutOfSight() {
+    const window = this.root?.abs;
+    if (!this._placed || !window) return false;
+    const reach = this._loopReach();
+    if (!reach) return false;
+    let out = reach.rect;
+    for (let n = reach.from.parent; n && out; n = n.parent) {
+      if (n.isWindow) break;
+      if (n.clipsChildren()) out = intersectRects(out, outerPixels(n.abs));
+    }
+    return (
+      !out ||
+      !intersectRects(out, {
+        x: 0,
+        y: 0,
+        width: window.width,
+        height: window.height,
+      })
+    );
+  }
+
+  /**
+   * What every frame of this node's loops stays inside, as `{ rect, from }`
+   * — `from` is the node whose clipping ancestors cut `rect` — or null when
+   * nothing short of the window holds it.
+   *
+   * A loop on a colour, an opacity or a radius moves nothing and grows
+   * nothing, so it draws where the node and what it holds already reach.
+   * One that grows the node's outline, or moves or sizes a node out of the
+   * flow, can put it anywhere in the nearest box that clips it — and nowhere
+   * else, since a node out of the flow sizes nothing around it; with no such
+   * box, anywhere in the window. One that moves or sizes a node in the flow
+   * moves its siblings and can resize every box above it, the clipping ones
+   * among them, so no box holds it.
+   */
+  _loopReach() {
+    let inPlace = true;
+    for (const { prop } of this._loops ?? []) {
+      if (REACH_PROPS.has(prop)) {
+        inPlace = false;
+      } else if (isLayoutProp(prop) || TEXT_LAYOUT_PROPS.has(prop)) {
+        if (this.style?.position !== 'absolute') return null;
+        inPlace = false;
+      }
+    }
+    if (inPlace) return { rect: this.paintBounds(), from: this };
+    for (let n = this.parent; n && !n.isWindow; n = n.parent) {
+      if (n.clipsChildren()) return { rect: outerPixels(n.abs), from: n };
+    }
+    return null;
   }
 
   /** Whether anything between this node and its window has taken it off the
@@ -579,6 +702,42 @@ export class WindowAnimation {
     for (const node of [...this._loopNodes]) node._updateLoops();
   }
 
+  /**
+   * After the frame's layout and placements, before the presenter's word.
+   *
+   * Where a pass moved things (`moved`), a loop it put out of sight stops,
+   * and one it brought back runs again (`_loopsOutOfSight`) — from the top,
+   * as every stop here resumes, since nobody saw where it had got to. Only
+   * the loops whose answer changed are asked again, so a pass that moved
+   * nothing of theirs costs a walk up from each.
+   *
+   * And where a presenter can run a loop in the render server, a loop in
+   * sight that the clock runs is offered to it again (`_offerLoopsAgain`),
+   * each at most every `REOFFER_MS`: what turned it down can go without a
+   * layout pass — an ancestor's fade arriving is a paint — and the loop is
+   * a frame every refresh until it is taken.
+   */
+  _recheckLoops(moved) {
+    const offer = typeof this.window?.wouldAnimateNode === 'function';
+    if (!moved && !offer) return;
+    const t = offer ? now() : 0;
+    for (const node of [...this._loopNodes]) {
+      if (moved) {
+        const out = node._loopsOutOfSight();
+        if (out !== (node._outOfSight === true)) {
+          node._outOfSight = out;
+          node._updateLoops();
+          continue;
+        }
+      }
+      if (!offer || node._outOfSight === true || node.destroyed) continue;
+      if (!(t - (node._offeredAt ?? -Infinity) >= REOFFER_MS)) continue;
+      if (!node.root?._animating.has(node)) continue; // the clock runs none
+      node._offeredAt = t;
+      node._offerLoopsAgain();
+    }
+  }
+
   /** A node in this window started a transition. */
   _startAnimating(node) {
     this._animating.add(node);

package/src/nodes/scrollable.js

@@ -950,6 +950,9 @@ export const Scrollable = (Base) =>
      * its own route, since it paints through `_paintRegion` and never
      * through `Node.paint`. */
     _paintScrollbars(ctx) {
+      // on layers of their own, over the layers of the rows they are drawn
+      // over (src/cocoa/promotion.js `_syncThumbs`)
+      if (this._thumbsLifted) return;
       for (const bar of this._scrollbars()) {
         paintScrollbarThumb(ctx, bar, this.props.scrollbarColor);
       }

package/src/nodes/window/flush.js

@@ -286,9 +286,18 @@ export class WindowFlush {
     }
     // An animated placement asked for this frame and nothing laid out: its
     // pass runs on its own, against the arrangement the last one left
+    let placed = false;
     if (!layoutRan && this._placementsDue && this._placeNodes()) {
       this.needsPaint = true;
+      placed = true;
     }
+    // A loop this arrangement put out of sight stops, and one it brought
+    // back runs again; one the clock runs is offered to the presenter
+    // again (`_recheckLoops`). After the pass and the placements, so it is
+    // judged where things landed, and before the presenter's word, so a
+    // loop handed to it, or taken back, is in this frame. Nothing moves
+    // anything but these two passes, so sight is judged only after one.
+    if (this._loopNodes.size) this._recheckLoops(layoutRan || placed);
     // A presenter compositing part of the tree on layers of its own — the
     // surface presenter's promoted nodes (src/cocoa/promotion.js) — gets
     // its word in here: after layout, so it sees where everything landed,

package/src/types/system.d.ts

@@ -247,6 +247,12 @@ export interface DesktopSettings {
   readonly doubleClickDistance: number;
   /** How far a press moves before it is a drag rather than a click. */
   readonly dragThreshold: number;
+  /** **False means hold still** — the desktop asked for less motion:
+   *  `Gtk/EnableAnimations` off over XSETTINGS, reduce motion on macOS.
+   *  Core's loops do not start then (docs/styling.md, "Loops"); an element
+   *  that animates on a timer of its own holds still too, and draws its
+   *  resting frame. True wherever the desktop said nothing. */
+  readonly animations: boolean;
   /** `'xsettings'`; `'macos'` on the Cocoa backend, where only `animations`
    *  comes from the system (reduce motion) and the rest are the defaults; or
    *  null where no settings daemon answered and these are the renderer's own