@ng-native/fabric 0.8.0 → 0.9.0

package/dist/engine.d.ts

@@ -206,6 +206,8 @@ export interface EngineNode extends HostNode {
     styleCache: StyleCache | null;
     /** Set when something that could change what this node matches has changed. */
     styleDirty: boolean;
+    /** See `StyleTarget.ownDirty`. */
+    ownDirty: boolean;
     /** See `StyleTarget.hasDirty`. */
     hasDirty: boolean;
     /** See `StyleTarget.stateDirty`. */
@@ -777,16 +779,21 @@ export declare class Engine implements HostEngine {
      * Mark a node whose classes changed, by what the rules that name those classes can restyle.
      *
      * A class no selector names changes no style: a library's own marker, of an overlay that is
-     * animating or a control that was touched. One named only as what a rule's element is
-     * inside, `.animating .close`, restyles the elements under the node that such rules are for.
-     * Either way a whole subtree is not styled again for a class that has no say in it. Any other
-     * class restyles the node and everything under it, as any other change to it does.
+     * animating or a control that was touched. One a rule is for the element of, `.on`, has that
+     * element matched again, and one named as what a rule's element is inside, `.animating .close`
+     * or `.close:is(.animating *)`, the elements under the node that such rules are for. What is
+     * under any of those is styled again from the rules it matched, for what it inherits: a `dark`
+     * class on the root finds no rule again for an element no `dark` rule is for. Any other class
+     * has the node and everything under it matched again, as any other change to it does.
      *
      * A sheet that names a class later restyles what it is for as it arrives, and a node not yet
      * committed is styled when it is, with the class as it is then.
      */
     private markClasses;
-    /** Have styled again each element under a node that one of `subjects`' rules could be for. */
+    /**
+     * Have matched again each element under a node that one of `subjects`' rules could be for. One
+     * under another is marked too: what is under an element marked this way keeps its rules.
+     */
     private markUnder;
     /**
      * The sheet of the component `node` hosts, whose `:host` rules it matches. Set again when a hot
@@ -800,13 +807,23 @@ export declare class Engine implements HostEngine {
      * the web's mount point has, unless the app's `:host` sizes it otherwise.
      */
     setDefaultStyle(node: EngineNode, style: Readonly<Record<string, unknown>> | undefined): void;
-    /** `class="a b"` from a template. Replaces the set rather than adding to it. */
+    /**
+     * `class="a b"` from a template. Replaces the set rather than adding to it. The same classes in
+     * another order are a change too, to a selector that reads the class attribute, `[class^="a"]`.
+     */
     setClasses(node: EngineNode, value: string): void;
     /** Angular's `@if`/`@for`/`ViewContainerRef` markers. Ordered, never committed. */
     createAnchor(): EngineNode;
     createText(value: string): EngineNode;
     appendChild(parent: EngineNode, child: EngineNode): void;
     insertBefore(parent: EngineNode, child: EngineNode, ref: EngineNode | null): void;
+    /**
+     * A node coming under a parent other than the one it is under, or under any once it has been
+     * taken out: what is over it may be other than it was styled under. The resolver sees that for
+     * itself by the parent's cache, except between two boxes that share one, where it is told here.
+     * Moved within its own parent, a row of a list reordered, it is styled as it was.
+     */
+    private markAdopted;
     removeChild(parent: EngineNode | null, child: EngineNode): void;
     /**
      * A child came or went under a view that takes its text as a prop: that prop changed. A span
@@ -1122,6 +1139,24 @@ export declare class Engine implements HostEngine {
      * own frames, which is what lets an element animate in without differing from anything.
      */
     private animated;
+    /**
+     * The keyframes a node's animation names: those of its own component's sheet where it has
+     * some by that name, as Angular scopes a component's keyframes in a browser, and otherwise
+     * whichever sheet has them, since any other is global.
+     *
+     * ponytail: a host is asked of the sheet it is written in before its own component's, so
+     * a `:host` animation is played by its parent's frames where both have the name.
+     */
+    private keyframesOf;
+    /** Each node's frames as they settle on it, kept for as long as they settle the same. */
+    private readonly settledFrames;
+    /**
+     * An animation's frames for the node playing it: those with a value that waits for the node,
+     * a `var()` it sets, settled against it. The same frames are answered while they settle the
+     * same, and others once a variable changes, which is what an animation under way is played
+     * on from: see `reframe`.
+     */
+    private framesFor;
     /**
      * A clock animation the scroll plays instead: the same animation where only the timeline moved,
      * and one cancelled where the name changed.
@@ -1179,6 +1214,8 @@ export declare class Engine implements HostEngine {
     private backToScript;
     /** Start the clock on an animation, unless the node is already playing this one. */
     private startPlaying;
+    /** Play an animation that has just started: by native's layout, by native's driver, or here. */
+    private playSomewhere;
     /**
      * The colour `node` inherits, for frames that set `color: currentColor`, which is that colour
      * wherever the animation has got to, as in CSS. Undefined for frames that do not.
@@ -1258,12 +1295,27 @@ export declare class Engine implements HostEngine {
      * A width eased from JavaScript is a commit a frame, and a commit lays the whole screen out.
      */
     private layEased;
+    /** The animations this commit lays out at their last frame, for native to move the views to. */
+    private laidPlayed;
+    /**
+     * Whether an animation that has just started is one native can play by laying the view out
+     * at its last frame: two frames of sizes or places, played once from where the view is drawn
+     * now, which is where native moves it from. It is then committed at that frame; see `layOut`.
+     */
+    private layPlayed;
+    /** Go on from JavaScript with an animation native was to lay out, by the clock it started on. */
+    private playLaidHere;
+    /** An animation native laid out has had its time: it is at its last frame, and says so. */
+    private endLaidPlayed;
     /**
-     * Before a commit is handed over: ask native to move what it lays out, or take the
-     * transitions back to ease them from JavaScript where the commit moves anything else, and
-     * where they would not all take as long. Answers whether the tree has to be reconciled again.
+     * Before a commit is handed over: ask native to move what it lays out, and take back to
+     * ease from JavaScript whatever it cannot: all of it where the commit moves anything else,
+     * and otherwise what would not take as long as the longest. Answers whether the tree has to
+     * be reconciled again.
      */
     private layOut;
+    /** Ask native to move what the commit lays out over `duration`, and end each when it is up. */
+    private askLayout;
     /**
      * Note a commit that resizes or moves a box in no transition native lays out: a prop of one
      * that moves boxes, children that came or went, text longer or shorter than it was.

package/dist/engine.js

@@ -28,7 +28,7 @@ function animationOf(props) {
     let spec = props['$animation'];
     if (spec !== undefined)
         delete props['$animation'];
-    for (const [key, field] of Object.entries(ANIMATION_PARTS)) {
+    for (const [key, field] of ANIMATION_ENTRIES) {
         if (!(key in props))
             continue;
         const value = props[key];
@@ -47,6 +47,8 @@ const ANIMATION_PARTS = {
     $animationFill: 'fill',
     $playState: 'paused',
 };
+/** Listed once: `animationOf` reads them for every node that commits. */
+const ANIMATION_ENTRIES = Object.entries(ANIMATION_PARTS);
 function animationPart(field, value) {
     switch (field) {
         case 'iterations':
@@ -537,8 +539,8 @@ function lineBaseline(props, line, [, top, , bottom], fontScale) {
  * out on both platforms: on Android, `EditText` centres a line box taller than the font's own
  * about 1.7pt high of centre in a 44pt field, and centres the font's own exactly. A percentage
  * height sizes the field only where its parent's height is definite, which is known at layout
- * alone, so such a field is left as it was. Elsewhere Android sizes the field by the line height
- * and centres the text in it itself, and keeps it.
+ * alone, so on Android such a field is left as it was. Elsewhere Android sizes the field by the
+ * line height and centres the text in it itself, and keeps it.
  *
  * On iOS, React Native's field sets `lineHeight` as the paragraph's minimum and maximum line
  * height and, unlike a paragraph (`RCTApplyBaselineOffset`), never offsets the baseline, so the
@@ -561,10 +563,9 @@ function centreSingleLine(viewName, props, fontScale, onBaseline = false) {
         heightBaseline(props, height, onBaseline, fontScale);
         return;
     }
-    // A percentage is a fixed height only where the parent's is definite, known at layout alone.
-    if (isSet(height) && height !== 'auto')
-        return;
-    // Android sizes the field by its line height, and centres the text in it, itself.
+    // Android sizes the field by its line height, and centres the text in it, itself. A
+    // percentage is a fixed height only where the parent's is definite, known at layout alone:
+    // there too the line height is left out on iOS, and kept as the least the field is tall.
     if (viewName !== 'TextInput')
         return;
     const edge = (side, logical) => blockEdge(props, side, logical);
@@ -847,10 +848,11 @@ const TOUCHED_ALPHA = 0.011;
 function stillTouched(props) {
     // One told to take no touch is not to be sent one, seen or not.
     if (props['pointerEvents'] === 'none')
-        return;
+        return props;
     const opacity = props['opacity'];
     if (typeof opacity === 'number' && opacity < TOUCHED_ALPHA)
         props['opacity'] = TOUCHED_ALPHA;
+    return props;
 }
 /**
  * Leave `aspect-ratio` out for a box with both a width and a height. CSS takes the ratio only
@@ -1411,6 +1413,23 @@ const MOVES_BOXES = new Set([
     ...['aspectRatio', 'fontSize', 'lineHeight', 'fontFamily', 'fontWeight', 'letterSpacing'],
     ...['numberOfLines', 'start', 'end'],
 ]);
+/** Whether native is moving a view to a prop's value, by a transition or an animation it laid out. */
+function laidByNative(node, key) {
+    const eased = node.transitions?.get(key);
+    if (eased?.laid && !eased.done)
+        return true;
+    return node.playing?.laid === true && node.playing.tracks.has(key);
+}
+/** Whether an animation plays once through, forwards, with no wait before it. */
+const playedOnce = (spec) => spec.delay === 0 && spec.duration > 0 && spec.iterations === 1 && !spec.direction;
+/** Whether a track is two frames on one curve, the first of them where the view is drawn. */
+function fromWhereDrawn(track, drawn) {
+    const [first, last] = track;
+    if (track.length !== 2 || first.easing || last.value == null)
+        return false;
+    // One that ends where it starts moves nothing: there is nothing for native to lay out.
+    return Object.is(first.value, drawn) && !Object.is(first.value, last.value);
+}
 /** The curves a layout animation has, as the timing function each is. */
 const LAYOUT_CURVES = [
     ['linear', [0, 0, 1, 1]],
@@ -1645,6 +1664,7 @@ class RetainedNode {
     customProperties = null;
     styleCache = null;
     styleDirty = true;
+    ownDirty = false;
     styleCommitted = null;
     fitContainer = undefined;
     heightBasis = undefined;
@@ -1861,6 +1881,8 @@ const TRANSITION_TIMING = {
     $transitionDelay: 'delay',
     $transitionEasing: 'easing',
 };
+/** Listed once, as `ANIMATION_ENTRIES` is. */
+const TRANSITION_ENTRIES = Object.entries(TRANSITION_TIMING);
 /**
  * The transition spec, with any timing set by a rule of its own laid over it: `.duration-700`
  * beside `.transition`. A rule that writes the timing itself compiles it to `null`, which is how
@@ -1874,7 +1896,7 @@ function transitionSpec(props) {
     let spec = props['$transition'];
     if (spec !== undefined)
         delete props['$transition'];
-    for (const [key, part] of Object.entries(TRANSITION_TIMING)) {
+    for (const [key, part] of TRANSITION_ENTRIES) {
         if (!(key in props))
             continue;
         const value = props[key];
@@ -1993,6 +2015,14 @@ const now = () => globalThis.performance?.now?.() ?? Date.now();
 function sameHandles(a, b) {
     return a.length === b.length && a.every((handle, i) => handle === b[i]);
 }
+/** Whether two sets of the same classes hold them in the same order. */
+function inOrder(a, b) {
+    const other = b.values();
+    for (const name of a)
+        if (other.next().value !== name)
+            return false;
+    return true;
+}
 /**
  * Whether a node could be the element a compound is written for, by its classes alone: its own,
  * and those of one alternative of each `:is()` on it, which is where Tailwind names a group or
@@ -2495,34 +2525,46 @@ export class Engine {
      * Mark a node whose classes changed, by what the rules that name those classes can restyle.
      *
      * A class no selector names changes no style: a library's own marker, of an overlay that is
-     * animating or a control that was touched. One named only as what a rule's element is
-     * inside, `.animating .close`, restyles the elements under the node that such rules are for.
-     * Either way a whole subtree is not styled again for a class that has no say in it. Any other
-     * class restyles the node and everything under it, as any other change to it does.
+     * animating or a control that was touched. One a rule is for the element of, `.on`, has that
+     * element matched again, and one named as what a rule's element is inside, `.animating .close`
+     * or `.close:is(.animating *)`, the elements under the node that such rules are for. What is
+     * under any of those is styled again from the rules it matched, for what it inherits: a `dark`
+     * class on the root finds no rule again for an element no `dark` rule is for. Any other class
+     * has the node and everything under it matched again, as any other change to it does.
      *
      * A sheet that names a class later restyles what it is for as it arrives, and a node not yet
      * committed is styled when it is, with the class as it is then.
      */
     markClasses(node, changed) {
+        // An element still being built, in no tree and never styled: nothing is styled by it yet,
+        // and it is styled when it is committed, with the classes it has then. Every element of a
+        // screen is given its classes this way, so what they reach is not asked for each.
+        if (node.parent === null && node.styleCache === null)
+            return this.markProps(node, false);
         const reach = this.styles.reachOf(changed);
         if (reach === true)
             return this.markProps(node);
         this.markProps(node, false);
-        if (reach)
+        if (!reach)
+            return;
+        if (reach.own)
+            node.ownDirty = true;
+        if (this.styles.reachesUnder(reach))
             this.markUnder(node, reach);
     }
-    /** Have styled again each element under a node that one of `subjects`' rules could be for. */
+    /**
+     * Have matched again each element under a node that one of `subjects`' rules could be for. One
+     * under another is marked too: what is under an element marked this way keeps its rules.
+     */
     markUnder(node, subjects) {
         for (const child of node.children) {
             if (child.kind !== 'element')
                 continue;
             if (this.styles.isFor(subjects, child)) {
-                // And with it all under it, which is styled from it.
-                child.styleDirty = true;
+                child.ownDirty = true;
                 this.markPath(child);
             }
-            else
-                this.markUnder(child, subjects);
+            this.markUnder(child, subjects);
         }
     }
     /**
@@ -2548,7 +2590,10 @@ export class Engine {
         node.defaultStyle = style;
         this.markProps(node);
     }
-    /** `class="a b"` from a template. Replaces the set rather than adding to it. */
+    /**
+     * `class="a b"` from a template. Replaces the set rather than adding to it. The same classes in
+     * another order are a change too, to a selector that reads the class attribute, `[class^="a"]`.
+     */
     setClasses(node, value) {
         const names = value.split(/\s+/).filter(Boolean);
         const before = node.classes;
@@ -2558,7 +2603,8 @@ export class Engine {
         for (const name of before ?? [])
             if (!node.classes?.has(name))
                 changed.push(name);
-        this.markClasses(node, changed);
+        const reordered = !changed.length && !!before && !!node.classes && !inOrder(before, node.classes);
+        this.markClasses(node, reordered ? node.classes : changed);
     }
     /** Angular's `@if`/`@for`/`ViewContainerRef` markers. Ordered, never committed. */
     createAnchor() {
@@ -2570,6 +2616,7 @@ export class Engine {
         return node;
     }
     appendChild(parent, child) {
+        this.markAdopted(child, parent);
         this.detach(child);
         child.parent = parent;
         parent.children.push(child);
@@ -2579,6 +2626,7 @@ export class Engine {
         this.markTextContent(parent, child);
     }
     insertBefore(parent, child, ref) {
+        this.markAdopted(child, parent);
         this.detach(child);
         child.parent = parent;
         const at = ref ? parent.children.indexOf(ref) : -1;
@@ -2591,6 +2639,16 @@ export class Engine {
         this.markStructure(parent, child, at < 0 ? parent.children.length - 1 : at);
         this.markTextContent(parent, child);
     }
+    /**
+     * A node coming under a parent other than the one it is under, or under any once it has been
+     * taken out: what is over it may be other than it was styled under. The resolver sees that for
+     * itself by the parent's cache, except between two boxes that share one, where it is told here.
+     * Moved within its own parent, a row of a list reordered, it is styled as it was.
+     */
+    markAdopted(child, parent) {
+        if (child.parent !== parent && this.styles.styledUnderShared(child))
+            child.styleDirty = true;
+    }
     removeChild(parent, child) {
         const target = parent ?? child.parent;
         if (!target)
@@ -2842,7 +2900,10 @@ export class Engine {
         else {
             node.customProperties = { ...current, [name]: token };
         }
-        this.markProps(node);
+        // In scope for the node's own rules and for what is under it, and read by no selector: the
+        // node is styled again, and those under it from the rules they matched.
+        this.markProps(node, false);
+        node.ownDirty = true;
     }
     setText(node, value) {
         const filled = (node.text === '') !== (value === '');
@@ -3538,7 +3599,8 @@ export class Engine {
             }
             return props;
         }
-        const frames = this.keyframes.get(spec.name);
+        const written = this.keyframesOf(node, spec.name);
+        const frames = written && this.framesFor(node, written);
         if (!frames) {
             // Keyframes a hot swap deleted, from under an animation that was playing them, or ones a
             // sheet later in this commit has: see `settleKeyframes`.
@@ -3554,6 +3616,49 @@ export class Engine {
         this.startPlaying(node, spec, frames, props);
         return Object.assign(props, playedOver(node));
     }
+    /**
+     * The keyframes a node's animation names: those of its own component's sheet where it has
+     * some by that name, as Angular scopes a component's keyframes in a browser, and otherwise
+     * whichever sheet has them, since any other is global.
+     *
+     * ponytail: a host is asked of the sheet it is written in before its own component's, so
+     * a `:host` animation is played by its parent's frames where both have the name.
+     */
+    keyframesOf(node, name) {
+        const own = node.sheet?.keyframes?.[name] ?? node.hostSheet?.keyframes?.[name];
+        return own ?? this.keyframes.get(name);
+    }
+    /** Each node's frames as they settle on it, kept for as long as they settle the same. */
+    settledFrames = new WeakMap();
+    /**
+     * An animation's frames for the node playing it: those with a value that waits for the node,
+     * a `var()` it sets, settled against it. The same frames are answered while they settle the
+     * same, and others once a variable changes, which is what an animation under way is played
+     * on from: see `reframe`.
+     */
+    framesFor(node, frames) {
+        if (!frames.some((frame) => frame.deferred))
+            return frames;
+        const kept = this.settledFrames.get(node);
+        // Styled as it was, it settles as it did: a commit a frame asks, and most change nothing.
+        const styled = node.styleCache;
+        if (kept?.of === frames && kept.styled === styled)
+            return kept.frames;
+        const settled = frames.map((frame) => frame.deferred && this.styles.settleFor(node, frame.deferred, this.styleEpoch));
+        const key = JSON.stringify(settled);
+        if (kept?.of === frames && kept.key === key) {
+            kept.styled = styled;
+            return kept.frames;
+        }
+        const made = frames.map((frame, at) => {
+            const values = Object.entries(settled[at] ?? {}).filter(([, value]) => value !== undefined);
+            return values.length
+                ? { ...frame, declarations: { ...frame.declarations, ...Object.fromEntries(values) } }
+                : frame;
+        });
+        this.settledFrames.set(node, { of: frames, styled, key, frames: made });
+        return made;
+    }
     /**
      * A clock animation the scroll plays instead: the same animation where only the timeline moved,
      * and one cancelled where the name changed.
@@ -3749,8 +3854,8 @@ export class Engine {
             node.playing = started;
             if (spec.paused)
                 started.pausedAt = this.now();
-            else if (!this.playNatively(node, started, props))
-                this.playing.add(node);
+            else
+                this.playSomewhere(node, started, props);
             this.emitTransition(node, 'topAnimationstart', spec.name);
             return;
         }
@@ -3764,6 +3869,13 @@ export class Engine {
         }
         this.playOrPause(node, node.playing, spec);
     }
+    /** Play an animation that has just started: by native's layout, by native's driver, or here. */
+    playSomewhere(node, started, props) {
+        if (this.layPlayed(node, started))
+            this.laidPlayed.push({ node, running: started });
+        else if (!this.playNatively(node, started, props))
+            this.playing.add(node);
+    }
     /**
      * The colour `node` inherits, for frames that set `color: currentColor`, which is that colour
      * wherever the animation has got to, as in CSS. Undefined for frames that do not.
@@ -3781,7 +3893,8 @@ export class Engine {
      */
     reframe(node, current, frames, props, inherited) {
         const tracks = tracksOf(frames, props, inherited);
-        const reframed = { ...current, tracks, inherited };
+        // One native was laying out goes on from JavaScript, by the clock it started on.
+        const reframed = { ...current, tracks, inherited, laid: undefined };
         const { values, finished } = sample(reframed, current.pausedAt ?? this.now());
         const holds = current.spec.fill === 'forwards' || current.spec.fill === 'both';
         reframed.values = finished && !holds ? {} : values;
@@ -3975,7 +4088,8 @@ export class Engine {
     }
     /** Nobody saw what the last commit gave a view it created, so this is where the view starts. */
     unseenTransitions(node) {
-        if (node.bornIn < this.unseen)
+        // One with no commit it was born in has been seen, whatever was committed since.
+        if (node.bornIn === undefined || node.bornIn < this.unseen)
             return;
         this.stopEased(node);
         node.transitions = undefined;
@@ -4037,36 +4151,101 @@ export class Engine {
             if (eased.laid && !eased.done)
                 props[key] = eased.to;
     }
+    /** The animations this commit lays out at their last frame, for native to move the views to. */
+    laidPlayed = [];
     /**
-     * Before a commit is handed over: ask native to move what it lays out, or take the
-     * transitions back to ease them from JavaScript where the commit moves anything else, and
-     * where they would not all take as long. Answers whether the tree has to be reconciled again.
+     * Whether an animation that has just started is one native can play by laying the view out
+     * at its last frame: two frames of sizes or places, played once from where the view is drawn
+     * now, which is where native moves it from. It is then committed at that frame; see `layOut`.
+     */
+    layPlayed(node, running) {
+        const drawn = node.committed?.props;
+        const { spec, tracks } = running;
+        if (!this.fabric.configureNextLayoutAnimation || !drawn || !tracks.size)
+            return false;
+        if (!playedOnce(spec))
+            return false;
+        for (const [key, track] of tracks) {
+            if (!LAID_OUT.has(key) || !fromWhereDrawn(track, drawn[key]))
+                return false;
+        }
+        running.laid = true;
+        running.values = Object.fromEntries([...tracks].map(([key, track]) => [key, track[1].value]));
+        return true;
+    }
+    /** Go on from JavaScript with an animation native was to lay out, by the clock it started on. */
+    playLaidHere(node, running) {
+        running.laid = undefined;
+        running.values = sample(running, this.now()).values;
+        this.playing.add(node);
+    }
+    /** An animation native laid out has had its time: it is at its last frame, and says so. */
+    endLaidPlayed(node, running) {
+        if (!running.laid || running.done || node.playing !== running)
+            return;
+        Object.assign(running, { done: true, laid: undefined });
+        if (!this.keeps(node, running)) {
+            running.values = {};
+            this.markProps(node, false);
+        }
+        this.emitTransition(node, 'topAnimationend', running.spec.name);
+        this.flushTransitionEvents();
+        if (this.pending)
+            this.commit();
+    }
+    /**
+     * Before a commit is handed over: ask native to move what it lays out, and take back to
+     * ease from JavaScript whatever it cannot: all of it where the commit moves anything else,
+     * and otherwise what would not take as long as the longest. Answers whether the tree has to
+     * be reconciled again.
      */
     layOut() {
         const laying = this.laying;
+        const played = this.laidPlayed.filter(({ node, running }) => node.playing === running);
         const others = this.movesOthers;
         this.laying = [];
+        this.laidPlayed = [];
         this.movesOthers = false;
-        if (!laying.length)
+        if (!laying.length && !played.length)
             return false;
-        const [first] = laying;
-        const alike = laying.every(({ eased }) => eased.duration === first.eased.duration);
-        if (others || !alike) {
-            for (const { node, eased } of laying) {
-                eased.laid = undefined;
-                this.running.add(node);
-            }
-            for (const { node } of laying)
-                this.markProps(node, false);
-            return true;
+        // Native takes one length of time for a commit: the longest asked of it, and whatever
+        // would take another is eased from JavaScript. None of it, where anything else moves.
+        const longest = Math.max(...laying.map(({ eased }) => eased.duration), ...played.map(({ running }) => running.spec.duration));
+        const kept = (duration) => !others && duration === longest;
+        const back = [];
+        for (const { node, eased } of laying) {
+            if (kept(eased.duration))
+                continue;
+            eased.laid = undefined;
+            this.running.add(node);
+            back.push(node);
+        }
+        for (const { node, running } of played) {
+            if (kept(running.spec.duration))
+                continue;
+            this.playLaidHere(node, running);
+            back.push(node);
         }
-        const { duration, easing } = first.eased;
+        for (const node of back)
+            this.markProps(node, false);
+        if (!others)
+            this.askLayout(laying, played, longest);
+        return back.length > 0;
+    }
+    /** Ask native to move what the commit lays out over `duration`, and end each when it is up. */
+    askLayout(laying, played, duration) {
+        const easing = laying.find(({ eased }) => eased.laid)?.eased.easing ??
+            played.find(({ running }) => running.laid).running.spec.easing;
         const nothing = () => undefined;
         this.fabric.configureNextLayoutAnimation({ duration, update: { type: layoutCurve(easing) } }, nothing, nothing);
         for (const { node, key, eased } of laying) {
-            setTimeout(() => this.endLaid(node, key, eased), duration);
+            if (eased.laid)
+                setTimeout(() => this.endLaid(node, key, eased), duration);
+        }
+        for (const { node, running } of played) {
+            if (running.laid)
+                setTimeout(() => this.endLaidPlayed(node, running), duration);
         }
-        return false;
     }
     /**
      * Note a commit that resizes or moves a box in no transition native lays out: a prop of one
@@ -4078,8 +4257,7 @@ export class Engine {
         if (resized)
             this.movesOthers = true;
         for (const key in payload) {
-            const eased = node.transitions?.get(key);
-            if (eased?.laid && !eased.done)
+            if (laidByNative(node, key))
                 continue;
             // Text as long as it was is taken to be as wide, as a grid takes it: see `shapeOf`.
             const longer = key === 'text' && String(payload[key]).length !== String(words).length;
@@ -4131,13 +4309,16 @@ export class Engine {
     }
     playEased(node, state, keys, props) {
         const first = state.get(keys[0]);
+        // Where the view is committed: one that takes a touch stops short of no opacity.
+        const touched = this.responders.has(node);
+        const seen = (key, value) => touched && key === 'opacity' ? stillTouched({ ...props, opacity: value })['opacity'] : value;
         const tracks = new Map(keys.map((key) => {
             const { current, to, easing } = state.get(key);
             return [
                 key,
                 [
-                    { offset: 0, value: current, easing },
-                    { offset: 1, value: to },
+                    { offset: 0, value: seen(key, current), easing },
+                    { offset: 1, value: seen(key, to) },
                 ],
             ];
         }));
@@ -4986,6 +5167,11 @@ export class Engine {
     setResponder(node, handlers) {
         this.registerEventHandler();
         this.responders.set(node, handlers);
+        // A fade native is playing was given to it as a view that takes no touch fades: to
+        // nothing. From here it is eased to where the view is committed.
+        const fade = node.transitions?.get('opacity')?.native;
+        if (fade)
+            this.backToScriptEased(node, fade, this.now());
         this.keepNative(node, true);
         // What it is committed with can hang on whether it takes a touch: see `stillTouched`.
         this.markProps(node);
@@ -5213,12 +5399,14 @@ export class Engine {
         this.currentResponder = null;
         this.tellNative(node, false);
         const handlers = this.responders.get(node);
+        // Before the handler is told: what it does is for the render pass after it to commit
+        // whole, and not to be drawn part made with the view no longer pressed.
+        if (changed)
+            this.commit();
         if (terminated)
             handlers?.onResponderTerminate?.(event);
         else
             handlers?.onResponderRelease?.(event);
-        if (changed)
-            this.commit();
     }
     tellNative(node, isResponder) {
         const handle = node.committed?.handle;