react-x11 2.34.0 → 2.36.0

package/src/cocoa/sprites.js

@@ -29,6 +29,13 @@
 // ask for: on an older one nothing is asked and every part is drawn by its
 // element.
 //
+// A part none of which shows — scrolled out of its pane, or outside its own
+// clip — keeps its layer, cut to show nothing, up to a budget of raster for
+// such parts: its element's clock would otherwise run for it, and it is
+// already where its animation has it the frame a scroll brings it back. A
+// clip with round corners that a square ancestor cuts again is a box of its
+// own inside a box of the square one's.
+//
 // A part may be inside another of its element's (`parent`): a spinner in a
 // card that fades. Its layer is lifted inside the parent's, so it fades,
 // turns and is cut with it, and the parent's raster leaves it out — the
@@ -41,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';
 
@@ -50,6 +57,11 @@ import { isVideoFrames } from '../videoframes.js';
 // upload for every new version.
 const MAX_SIDE = 8192;
 
+// The raster a window keeps for parts that show nothing — scrolled out of
+// their pane, or outside their own clip — in device pixels: 32 MB. Past it
+// such a part is its element's, which runs it on its own clock.
+const HIDDEN_BUDGET = 8 * 1024 * 1024;
+
 // Sorted after the element's children, which its own drawing comes after
 // (`Node.paint` paints the children first), and before its next sibling.
 const AFTER_CHILDREN = Number.MAX_SAFE_INTEGER;
@@ -61,6 +73,13 @@ const ORIGIN = Object.freeze({ x: 0, y: 0 });
 // what a part with no part lifted inside it is handed
 const NO_KIDS = Object.freeze(new Set());
 
+// keyframes already found good, by the property they were found good for
+const CHECKED = new WeakMap();
+
+// where a part can be about its origin, by its one transform animation's
+// keyframes, and what that was worked out for (`extentOf`)
+const EXTENTS = new WeakMap();
+
 // what a part's raster holds before its first paint
 const UNPAINTED = Symbol('unpainted');
 
@@ -99,8 +118,13 @@ function isAnimation(a) {
   if (!finite(a.duration) || !(a.duration > 0)) return false;
   const values = a.values;
   if (!Array.isArray(values) || values.length < 2) return false;
-  const value = a.property === 'opacity' ? finite : isMatrix;
-  if (!values.every(value)) return false;
+  // an element hands the same keyframes over from frame to frame: they
+  // are read once
+  if (CHECKED.get(values) !== a.property) {
+    const value = a.property === 'opacity' ? finite : isMatrix;
+    if (!values.every(value)) return false;
+    CHECKED.set(values, a.property);
+  }
   if (a.keyTimes !== undefined) {
     const t = a.keyTimes;
     if (!Array.isArray(t) || t.length !== values.length || t[0] !== 0) {
@@ -227,11 +251,38 @@ function unionRect(a, b) {
 function extentOf(sprite) {
   const reach = sprite.reach ?? sprite.rect;
   const origin = originOf(sprite);
-  let box = mapRect(reach, sprite.transform ?? IDENTITY, origin);
+  const m0 = sprite.transform ?? IDENTITY;
+  // About its origin, where it can be is the same for a part that only
+  // moved: kept by its keyframes, which an element hands over from frame
+  // to frame, rather than every keyframe mapped every frame.
+  const rel = {
+    x: reach.x - origin.x,
+    y: reach.y - origin.y,
+    width: reach.width,
+    height: reach.height,
+  };
+  let turns = null;
   for (const a of sprite.animations ?? []) {
     if (a.property !== 'transform') continue;
-    for (const m of a.values) box = unionRect(box, mapRect(reach, m, origin));
+    turns = turns === null ? a.values : undefined;
+  }
+  const key = `${rel.x},${rel.y},${rel.width},${rel.height},${m0.join(',')}`;
+  let about = turns ? EXTENTS.get(turns) : null;
+  if (about?.key !== key) {
+    let box = mapRect(rel, m0, ORIGIN);
+    for (const a of sprite.animations ?? []) {
+      if (a.property !== 'transform') continue;
+      for (const m of a.values) box = unionRect(box, mapRect(rel, m, ORIGIN));
+    }
+    about = { key, box };
+    if (turns) EXTENTS.set(turns, about);
   }
+  const box = {
+    x: about.box.x + origin.x,
+    y: about.box.y + origin.y,
+    width: about.box.width,
+    height: about.box.height,
+  };
   const x = Math.floor(box.x) - RASTER_PAD;
   const y = Math.floor(box.y) - RASTER_PAD;
   return {
@@ -332,6 +383,8 @@ export class SpriteLayers {
       this.hosts.delete(host);
       if (!host.destroyed) changed.add(host);
     }
+    // the raster kept for parts that show nothing, this frame
+    let hidden = 0;
     for (const [host, list] of offers) {
       const was = this.hosts.get(host);
       const now = new Map();
@@ -378,17 +431,31 @@ export class SpriteLayers {
         };
         const extent = extentOf(sprite);
         const bounds = cut.clip ? intersectRects(extent, cut.clip) : extent;
-        if (!bounds) continue;
         if (parent) {
           // the parent was asked about everywhere it can be, and its layer
           // carries this one: nothing more to ask where it stays inside the
           // parent's raster, and its element draws it where it does not
-          if (!rectContains(rasterRectOf(parent.sprite), bounds)) continue;
+          if (bounds && !rectContains(rasterRectOf(parent.sprite), bounds)) {
+            continue;
+          }
           cut.bounds = bounds;
+        } else if (!bounds) {
+          // its own clip shows nothing of it
+          cut.bounds = null;
         } else if (!this.promotion._clear(host, bounds, cut)) {
           continue;
         }
         const shown = cut.bounds;
+        // A part that shows nothing stays on its layer, cut to show nothing,
+        // so that its element's clock is not kept running for it, and is
+        // where it should be the frame a scroll brings it into view — but
+        // for a source, and past the budget of raster kept for such parts.
+        if (!shown) {
+          if (contents !== null) continue;
+          const px = raster.width * raster.height;
+          if (hidden + px > HIDDEN_BUDGET) continue;
+          hidden += px;
+        }
         let state = was?.get(sprite.key);
         // a clip that comes or goes is a layer in a box or out of one: lifted
         // again, rather than a running layer moved between parents — and so
@@ -397,6 +464,7 @@ export class SpriteLayers {
         if (
           state &&
           (Boolean(state.clip) !== Boolean(cut.clip) ||
+            Boolean(state.outer) !== Boolean(cut.outer) ||
             state.contents !== contents ||
             state.parent !== parent)
         ) {
@@ -411,10 +479,12 @@ export class SpriteLayers {
             cut.clip !== null,
             contents,
             parent,
+            Boolean(cut.outer),
           );
         }
         state.sprite = sprite;
         state.clip = cut.clip;
+        state.outer = cut.outer ?? null;
         state.radius = cut.radius;
         state.order = parent ? null : [...place, AFTER_CHILDREN, index];
         state.kids = [];
@@ -423,10 +493,11 @@ export class SpriteLayers {
         // frame on; where it went since, it is the element's own claims
         // that move the hole. A child is under its parent's layer, whose
         // raster leaves it out instead (`sync`).
-        if (lifting && !parent) this.promotion._claim(root, shown);
+        if (lifting && !parent && shown) this.promotion._claim(root, shown);
         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);
@@ -442,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() {
@@ -473,16 +582,25 @@ export class SpriteLayers {
     return isVideoFrames(contents) && this.videos;
   }
 
-  _lift(host, key, clipped, contents = null, parent = null) {
+  _lift(host, key, clipped, contents = null, parent = null, outered = false) {
     const layer = this.native.createLayer();
     // a part cut to a clip is in a box of the clip's size that masks to it,
     // and the box is what stands among the layers above the bitmap — or
-    // among its parent's children, for a part inside another's layer
+    // among its parent's children, for a part inside another's layer. A
+    // clip with round corners that a square one cuts again is in a box of
+    // its own inside a box of the square one's (`outer`).
     const above = parent ? parent.layer : this.promotion.rootVisual.layer;
     let box = null;
+    let outerBox = null;
     if (clipped) {
       box = this.native.createLayer();
-      this.native.addSublayer(above, box);
+      if (outered) {
+        outerBox = this.native.createLayer();
+        this.native.addSublayer(above, outerBox);
+        this.native.addSublayer(outerBox, box);
+      } else {
+        this.native.addSublayer(above, box);
+      }
       this.native.addSublayer(box, layer);
     } else {
       this.native.addSublayer(above, layer);
@@ -492,6 +610,9 @@ export class SpriteLayers {
       key,
       layer,
       box,
+      outerBox,
+      outerProps: {},
+      outer: null, // the square clips around a rounded one, device pixels
       // the part whose layer this one is in, and the parts in this one's
       parent,
       kids: [],
@@ -528,7 +649,9 @@ export class SpriteLayers {
    *  element drawing it again. */
   _drop(state, root) {
     state.lift?.release();
-    this.native.removeFromSuperlayer(state.box ?? state.layer);
+    this.native.removeFromSuperlayer(
+      state.outerBox ?? state.box ?? state.layer,
+    );
     state.raster.release(this.native);
     for (const run of state.runs.values()) this._ends().delete(run.caId);
     state.runs.clear();
@@ -571,16 +694,40 @@ export class SpriteLayers {
     // where its layer's coordinates start: the window's corner, or the
     // corner of its parent's raster, for a part inside another's layer
     const base = state.parent?.rect ?? ORIGIN;
+    // in a box of the square clips around its own, where a square one cuts
+    // a rounded clip again: placed from the window's corner, at the part's
+    // place among the layers
+    const outer = state.outer;
+    if (state.outerBox) {
+      const frame = [
+        (outer.x - base.x) / s,
+        (outer.y - base.y) / s,
+        outer.width / s,
+        outer.height / s,
+      ];
+      const was = state.outerProps;
+      if (!sameMatrix(was.frame, frame) || was.zPosition !== z) {
+        this.native.setLayerProps(state.outerBox, {
+          frame,
+          masksToBounds: true,
+          zPosition: z,
+        });
+        state.outerProps = { frame, zPosition: z };
+      }
+    }
     // in its box, where it is cut to a clip: placed from the clip's corner,
-    // and the box at the part's place among the layers
+    // and the box at the part's place among the layers, or from the outer
+    // box's corner inside it
     const clip = state.clip;
     if (state.box) {
+      const from = state.outerBox ? outer : base;
       const frame = [
-        (clip.x - base.x) / s,
-        (clip.y - base.y) / s,
+        (clip.x - from.x) / s,
+        (clip.y - from.y) / s,
         clip.width / s,
         clip.height / s,
       ];
+      const boxZ = state.outerBox ? 0 : z;
       // its corners rounded where the clip's are: a circle's arc, as wide
       // as the box allows
       const cornerRadius =
@@ -588,16 +735,16 @@ export class SpriteLayers {
       const was = state.boxProps;
       if (
         !sameMatrix(was.frame, frame) ||
-        was.zPosition !== z ||
+        was.zPosition !== boxZ ||
         was.cornerRadius !== cornerRadius
       ) {
         this.native.setLayerProps(state.box, {
           frame,
           masksToBounds: true,
           cornerRadius,
-          zPosition: z,
+          zPosition: boxZ,
         });
-        state.boxProps = { frame, zPosition: z, cornerRadius };
+        state.boxProps = { frame, zPosition: boxZ, cornerRadius };
       }
     }
     const ox = state.box ? clip.x : base.x;
@@ -749,7 +896,9 @@ export class SpriteLayers {
     for (const lifted of this.hosts.values()) {
       for (const state of lifted.values()) {
         state.lift?.release();
-        this.native.removeFromSuperlayer(state.box ?? state.layer);
+        this.native.removeFromSuperlayer(
+          state.outerBox ?? state.box ?? state.layer,
+        );
         state.raster.release(this.native);
         for (const run of state.runs.values()) this._ends().delete(run.caId);
       }

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