@ng-native/fabric 0.7.0 → 0.9.0

package/dist/engine.js

@@ -10,12 +10,12 @@
 import { boundDeclaration, faded, fills, inlineInherited, setsInherited, StyleResolver, usesActive, elementsAtEnd, placeReadElsewhere, siblingReach, } from "./css.js";
 import { applyAria } from "./aria-props.js";
 import { STYLED_ELEMENTS } from "./element-styles.js";
-import { animationEvent, bezier, interpolate, readsInheritedColour, sample, step, steppedKeys, tracksOf, } from "./transition.js";
+import { aimsElsewhere, animationEvent, bezier, interpolate, readsInheritedColour, sample, step, steppedKeys, tracksOf, } from "./transition.js";
 import { isFormsInput } from "./forms-inputs.js";
 import { transformList } from "./inline-transform.js";
 import { tokenFromValue } from "./inline-token.js";
 import { NativeScrollDriver, scrollFeed, } from "./native-drive.js";
-import { clockChannels, firstFrame, movesByShare, rangeOf, scrollChannels, sharesAsPoints, } from "./scroll-animation.js";
+import { clockChannels, colourChannels, firstFrame, movesByShare, rangeOf, scrollChannels, sharesAsPoints, } from "./scroll-animation.js";
 import { FontFaces } from "./font-faces.js";
 import { premultipliedStops } from "./premultiplied-stops.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':
@@ -394,6 +396,24 @@ const PARAGRAPH = 'Paragraph';
  * that is laid out in its flow. Words written straight into the view are the paragraph the
  * engine makes around them, and a child that is not displayed has no view to ask.
  */
+/**
+ * A view with a transition is a native view for as long as it has one, as an `Animated.View` is.
+ *
+ * React Native gives a view a native view of its own for an opacity under 1, a transform or a
+ * background, and takes it away when the last such reason goes. A wrapper that fades in was one
+ * for the length of the fade and none after, and Fabric moved everything inside it to the view
+ * above as the fade ended. Being moved takes a focused field out of the window for a moment, and
+ * it lost its focus: a field focused as its container faded in blurred when the fade finished.
+ *
+ * A floor, as `keepNative` is: a `collapsable` written on the element is left alone. Not for
+ * `transition: none`, which transitions nothing.
+ */
+function keepForTransition(node, props, spec) {
+    if (viewNameOf(node) !== DEFAULT_VIEW || props['collapsable'] !== undefined)
+        return;
+    if (Object.keys(spec).length > 0)
+        props['collapsable'] = false;
+}
 function firstInFlow(node) {
     for (const child of node.children ?? []) {
         // Not the paragraph itself, which holds the words it was made around.
@@ -519,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
@@ -543,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);
@@ -576,6 +595,44 @@ function inlineOf(node) {
         delete inline[key];
     return inline;
 }
+/**
+ * What a node's `@keyframes` animation sets this frame, less each property a rule it matches
+ * declared `!important`: an important author declaration is above the animation in the cascade.
+ * A transition is above both, so `transitioned` takes no such care.
+ */
+function playedOver(node) {
+    const values = node.playing?.values;
+    const important = node.styleCache?.important;
+    if (!values || !important)
+        return values ?? NO_STYLE;
+    const played = { ...values };
+    for (const key of important)
+        delete played[key];
+    return played;
+}
+/**
+ * The properties among an animation's tracks that a rule `node` matches declared `!important`,
+ * which native is not handed: what native plays it sets on the view, over what the rule says.
+ */
+function pinnedIn(node, tracks) {
+    const important = node.styleCache?.important;
+    return important ? [...tracks.keys()].filter((key) => important.has(key)) : [];
+}
+/** Whether native is playing an animation whose important properties are no longer the ones left out. */
+function pinsChanged(node, running) {
+    if (!running.native)
+        return false;
+    return pinnedIn(node, running.tracks).join(' ') !== running.pinned?.join(' ');
+}
+/** `tracks` less the properties named. */
+function unpinned(tracks, pinned) {
+    if (!pinned.length)
+        return tracks;
+    const kept = new Map(tracks);
+    for (const key of pinned)
+        kept.delete(key);
+    return kept;
+}
 /**
  * What a container's own style says for `key`, in the order `mergeProps` applies them: a
  * component's override, inline, a prop, its stylesheet, its default.
@@ -791,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
@@ -1319,6 +1377,86 @@ function repaint(node) {
 }
 /** A sixtieth of a second: how far apart the frames native is given for an animation are. */
 const NATIVE_FRAME = 1000 / 60;
+/**
+ * What native eases a set of transitions on one clock by: a colour by its own channels, opacity
+ * and a transform as an animation of them is. Nothing where any of them is no value native can
+ * ease, which leaves them all to JavaScript.
+ */
+function easedChannels(tracks, spec, props) {
+    const tinted = new Map([...tracks].filter(([key]) => EASED_COLOURS.has(key)));
+    const moved = new Map([...tracks].filter(([key]) => !EASED_COLOURS.has(key)));
+    const colors = colourChannels(tinted, spec);
+    const { channels, held } = clockChannels(moved, spec, props);
+    if (!colors || held.length)
+        return null;
+    const any = channels.opacity || channels.transform.length || tinted.size;
+    return any ? { ...channels, colors } : null;
+}
+/** The sides a length is written for, and the two it is written for at once. */
+const EDGES = ['', 'Top', 'Right', 'Bottom', 'Left', 'Horizontal', 'Vertical'];
+/**
+ * The properties of a transition that resize or move a box, which native eases by laying the
+ * view out where it ends: see `layEased`.
+ */
+const LAID_OUT = new Set([
+    ...['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'],
+    ...['top', 'right', 'bottom', 'left', 'flexBasis'],
+    ...EDGES.map((edge) => `margin${edge}`),
+]);
+/** Every prop that can resize or move a box, a view's own or another's. */
+const MOVES_BOXES = new Set([
+    ...LAID_OUT,
+    ...EDGES.map((edge) => `padding${edge}`),
+    ...['borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
+    ...['flex', 'flexGrow', 'flexShrink', 'flexDirection', 'flexWrap', 'alignItems', 'alignSelf'],
+    ...['alignContent', 'justifyContent', 'gap', 'rowGap', 'columnGap', 'display', 'position'],
+    ...['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]],
+    ['easeIn', [0.42, 0, 1, 1]],
+    ['easeOut', [0, 0, 0.58, 1]],
+    ['easeInEaseOut', [0.42, 0, 0.58, 1]],
+];
+/** The curve of a layout animation nearest a timing function, by where each is along the way. */
+function layoutCurve(easing) {
+    const along = [0.2, 0.4, 0.6, 0.8];
+    const apart = (curve) => along.reduce((sum, at) => sum + (bezier(curve, at) - bezier(easing, at)) ** 2, 0);
+    let nearest = LAYOUT_CURVES[0];
+    for (const curve of LAYOUT_CURVES)
+        if (apart(curve[1]) < apart(nearest[1]))
+            nearest = curve;
+    return nearest[0];
+}
+/** The properties of a transition native can play: see `easeNatively`. */
+const EASED_COLOURS = new Set([
+    'backgroundColor',
+    'borderColor',
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+]);
+const NATIVELY_EASED = new Set(['opacity', 'transform', ...EASED_COLOURS]);
 /** The style keys that are a view's background. */
 const PAINT_KEYS = [
     'backgroundColor',
@@ -1526,6 +1664,7 @@ class RetainedNode {
     customProperties = null;
     styleCache = null;
     styleDirty = true;
+    ownDirty = false;
     styleCommitted = null;
     fitContainer = undefined;
     heightBasis = undefined;
@@ -1742,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
@@ -1755,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];
@@ -1874,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
@@ -2376,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);
         }
     }
     /**
@@ -2429,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;
@@ -2439,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() {
@@ -2451,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);
@@ -2460,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;
@@ -2472,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)
@@ -2579,6 +2756,7 @@ export class Engine {
         // as. Native gives a view one parent for its life, and aborts on a second.
         if (node.committed)
             this.forgetCommitted(node);
+        this.stopEased(node);
         node.transitions = undefined;
         if (node.playing)
             this.stopNative(node, node.playing);
@@ -2624,7 +2802,10 @@ export class Engine {
         // inline `direction` is the exception, because the paragraphs below it align by it.
         // And a child that takes one of this node's own values, an `inherit`, follows it.
         const heirs = node.styleCache?.heirs === true;
-        this.markProps(node, key !== 'style' || this.inlineReachesStyle(node) || heirs);
+        // And only a prop some selector names: `aria-valuenow` on every tick of a progress bar, a
+        // field's text on every key, match nothing they did not.
+        const read = key === 'style' ? this.inlineReachesStyle(node) : this.styles.reads(key);
+        this.markProps(node, read || heirs);
     }
     /**
      * Paint a node's background on one of its children instead of on the node: the node keeps its
@@ -2719,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 === '');
@@ -2934,11 +3118,15 @@ export class Engine {
         // Faces registered before the walk, the global sheet's among them, reach every node in it.
         this.facesAdded = false;
         const set = this.fabric.createChildSet(this.rootTag);
-        for (const child of this.visibleChildren(this.root)) {
-            if (this.withheld(child))
-                continue;
-            this.fabric.appendChildToSet(set, this.reconcileUnder(this.root, child));
+        let handles = this.rootHandles();
+        // Again, where transitions it laid out where they end are to be eased from JavaScript.
+        if (this.layOut()) {
+            handles = this.rootHandles();
+            // What that found resized is the transitions themselves, at the frame they are eased to.
+            this.movesOthers = false;
         }
+        for (const handle of handles)
+            this.fabric.appendChildToSet(set, handle);
         this.clearFlags(this.root);
         this.announceCommit();
         this.fabric.completeRoot(this.rootTag, set);
@@ -3411,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`.
@@ -3425,7 +3614,50 @@ export class Engine {
         if (spec.timeline)
             return this.scrollAnimated(node, spec, frames, props);
         this.startPlaying(node, spec, frames, props);
-        return Object.assign(props, node.playing?.values ?? {});
+        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,
@@ -3451,7 +3683,7 @@ export class Engine {
         if (running && !running.done)
             this.emitTransition(node, 'topAnimationcancel', running.spec.name);
     }
-    /** Stop on native each animation whose view has left the tree. */
+    /** Stop on native each animation and transition whose view has left the tree. */
     releasePlayedNatively() {
         for (const node of [...this.playedNatively]) {
             if (this.topOf(node) === this.root)
@@ -3460,6 +3692,10 @@ export class Engine {
             node.playing = undefined;
             this.markProps(node, false);
         }
+        for (const node of [...this.easedNatively]) {
+            if (this.topOf(node) !== this.root)
+                this.stopEased(node);
+        }
     }
     /** Every node whose animation native is playing, with no frame of it in JavaScript. */
     playedNatively = new Set();
@@ -3531,7 +3767,9 @@ export class Engine {
         const sized = this.scrollDriver ? this.sized(node, running, props) : null;
         if (!this.scrollDriver || !sized)
             return false;
-        const { channels, held, span } = clockChannels(sized.tracks, spec, sized.resting);
+        const pinned = pinnedIn(node, sized.tracks);
+        const tracks = unpinned(sized.tracks, pinned);
+        const { channels, held, span } = clockChannels(tracks, spec, sized.resting);
         if (held.length || !(channels.opacity || channels.transform.length))
             return false;
         // There and back is one native animation: an odd number of ways has no whole number of them.
@@ -3544,6 +3782,7 @@ export class Engine {
         if (!native)
             return false;
         running.native = native;
+        running.pinned = pinned;
         // As Animated does: Fabric flattens a view that only lays out, and then there is no native
         // view for the animation to move.
         running.values = { ...running.values, collapsable: false };
@@ -3615,13 +3854,14 @@ 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;
         }
-        // A view made again is another view: the one native was moving is gone.
-        if (node.committed === null)
+        // A view made again is another view: the one native was moving is gone. And one whose
+        // important declarations changed is moving what it now must not, or not what it now may.
+        if (node.committed === null || pinsChanged(node, current))
             this.backToScript(node, current);
         if (this.playedFrames.get(current) !== frames || inherited !== current.inherited) {
             this.backToScript(node, current);
@@ -3629,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.
@@ -3646,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;
@@ -3691,25 +3939,28 @@ export class Engine {
     scrollAnimated(node, spec, frames, props) {
         const current = node.scrolled;
         const inherited = this.inheritedColour(node, frames);
-        if (current?.frames === frames && sameAnimation(current.spec, spec)) {
+        const same = current?.frames === frames && sameAnimation(current.spec, spec);
+        if (same && pinnedIn(node, current.tracks).join(' ') === current.pinned.join(' ')) {
             return Object.assign(props, this.rescrolled(node, current, frames, props, inherited));
         }
         this.stopScrolled(node);
         this.handOverToScroll(node, spec);
         const tracks = tracksOf(frames, props, inherited);
+        const pinned = pinnedIn(node, tracks);
+        const played = unpinned(tracks, pinned);
         const source = this.scrollSourceOf(node);
         const extent = source ? (this.scrollExtents.get(source)?.[spec.timeline] ?? null) : null;
         const range = rangeOf(spec, extent);
-        const first = firstFrame(tracks, spec, range);
+        const first = firstFrame(played, spec, range);
         const resting = { ...props };
         if (!source && this.dev)
             this.reportUnscrolled(spec.name);
-        const drive = source ? this.driveScrolled(node, source, spec, tracks, resting, range) : null;
+        const drive = source ? this.driveScrolled(node, source, spec, played, resting, range) : null;
         // As Animated does: Fabric flattens a view that only lays out, and then there is no native
         // view for the animation to move. Committed with the first frame, so it stays put.
         if (drive)
             first['collapsable'] = false;
-        node.scrolled = { spec, frames, tracks, resting, first, source, drive, inherited };
+        node.scrolled = { spec, frames, tracks, pinned, resting, first, source, drive, inherited };
         return Object.assign(props, first);
     }
     /**
@@ -3786,7 +4037,7 @@ export class Engine {
             if (!scrolled?.drive)
                 continue;
             const range = rangeOf(scrolled.spec, extent[scrolled.spec.timeline]);
-            scrolled.drive.update(scrollChannels(scrolled.tracks, scrolled.spec, scrolled.resting, range).channels);
+            scrolled.drive.update(scrollChannels(unpinned(scrolled.tracks, scrolled.pinned), scrolled.spec, scrolled.resting, range).channels);
         }
     }
     reportUnscrolled(name) {
@@ -3812,24 +4063,358 @@ export class Engine {
             `has loaded, so the block has to exist somewhere by the time the animation starts.`);
     }
     transitioned(node, props) {
-        // Nobody saw what the last commit gave a view it created, so this is where the view starts.
-        if (node.bornIn >= this.unseen)
-            node.transitions = undefined;
+        this.unseenTransitions(node);
         const spec = transitionSpec(props);
         if (!spec && !node.transitions)
             return props;
+        if (spec)
+            keepForTransition(node, props, spec);
         const state = (node.transitions ??= new Map());
         const now = this.now();
+        this.takeBackEased(node, state, props, spec, now);
+        this.takeBackLaid(state, props, spec, now);
+        const started = [];
         for (const key of steppedKeys(props, spec, state)) {
             if (step(state, key, props, spec?.[key] ?? spec?.['all'], now)) {
                 this.running.add(node);
+                started.push(key);
                 this.emitTransition(node, 'topTransitionstart', key);
             }
         }
+        this.easeNatively(node, state, started, props, now);
         if (state.size === 0)
             node.transitions = undefined;
         return props;
     }
+    /** Nobody saw what the last commit gave a view it created, so this is where the view starts. */
+    unseenTransitions(node) {
+        // 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;
+    }
+    /** The elements native is playing a transition of. */
+    easedNatively = new Set();
+    /**
+     * Hand to native each transition that just started and that it can play: opacity and
+     * transforms, with no wait before they start. Those that start together, take as long and ease
+     * alike share a clock. Nothing of them runs in JavaScript until native says they have ended:
+     * a press that fades or slides something is a commit to start it and a commit to end it.
+     *
+     * ponytail: a colour is eased from JavaScript still, a commit a frame, and so is anything
+     * that waits. Native has a colour node for the first; give the driver a channel for it.
+     */
+    easeNatively(node, state, started, props, now) {
+        if (started.length)
+            this.startEased(node, state, started, props, now);
+        this.layEased(node, state, started, props, now);
+        const inScript = [...state.values()].some((eased) => !eased.done && !eased.native && !eased.laid);
+        if (!inScript)
+            this.running.delete(node);
+        // As Animated does: Fabric flattens a view that only lays out, and then there is no native
+        // view for a transition to move.
+        if (this.easedNatively.has(node))
+            props['collapsable'] = false;
+    }
+    /** The root's children as the views they are committed as, each reconciled. */
+    rootHandles() {
+        const handles = [];
+        for (const child of this.visibleChildren(this.root)) {
+            if (!this.withheld(child))
+                handles.push(this.reconcileUnder(this.root, child));
+        }
+        return handles;
+    }
+    /** The transitions this commit lays out where they end, for native to move the views to. */
+    laying = [];
+    /** Whether this commit resizes or moves a box that is in no such transition. */
+    movesOthers = false;
+    /**
+     * Commit where it ends each transition of a size or a place that just started, for native to
+     * move the view there: a layout animation, which the commit asks for once it is known that
+     * nothing else in it moves. One still on its way is committed where it ends too.
+     *
+     * A width eased from JavaScript is a commit a frame, and a commit lays the whole screen out.
+     */
+    layEased(node, state, started, props, now) {
+        if (!this.fabric.configureNextLayoutAnimation)
+            return;
+        for (const key of started) {
+            const eased = state.get(key);
+            if (!LAID_OUT.has(key) || eased.start > now || eased.duration <= 0)
+                continue;
+            eased.laid = true;
+            this.laying.push({ node, key, eased });
+        }
+        for (const [key, eased] of state)
+            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 = [];
+    /**
+     * 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 && !played.length)
+            return false;
+        // 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);
+        }
+        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) {
+            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);
+        }
+    }
+    /**
+     * 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.
+     */
+    noteMoved(node, payload, resized, words) {
+        if (this.movesOthers)
+            return;
+        if (resized)
+            this.movesOthers = true;
+        for (const key in payload) {
+            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;
+            if (MOVES_BOXES.has(key) || longer)
+                this.movesOthers = true;
+        }
+    }
+    /** A transition native laid out has had its time: it is where it ends, and says so. */
+    endLaid(node, key, eased) {
+        if (!eased.laid || eased.done || node.transitions?.get(key) !== eased)
+            return;
+        Object.assign(eased, { current: eased.to, done: true, laid: undefined });
+        this.emitTransition(node, 'topTransitionend', key);
+        // No commit comes of it, which is what tells listeners otherwise: it is where it ends.
+        this.flushTransitionEvents();
+        // And what a listener did, taking away an element that has left, is committed.
+        if (this.pending)
+            this.commit();
+    }
+    /**
+     * Bring a transition native laid out to where its clock has got to, where it is sent another
+     * way or its rule has gone: that is where it goes on from.
+     */
+    takeBackLaid(state, props, spec, now) {
+        for (const [key, eased] of state) {
+            if (!eased.laid || eased.done)
+                continue;
+            const kept = spec?.[key] ?? spec?.['all'];
+            if (kept && !aimsElsewhere(eased, key, props))
+                continue;
+            const progress = Math.min(1, Math.max(0, (now - eased.start) / eased.duration));
+            eased.current = interpolate(eased.from, eased.to, bezier(eased.easing, progress));
+            eased.laid = undefined;
+        }
+    }
+    startEased(node, state, started, props, now) {
+        if (!this.scrollDriver)
+            return;
+        const clocks = new Map();
+        for (const key of started) {
+            const eased = state.get(key);
+            if (!NATIVELY_EASED.has(key) || eased.start > now || eased.duration <= 0)
+                continue;
+            const clock = `${eased.duration} ${eased.easing.join()}`;
+            clocks.set(clock, [...(clocks.get(clock) ?? []), key]);
+        }
+        for (const keys of clocks.values())
+            this.playEased(node, state, keys, props);
+    }
+    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: seen(key, current), easing },
+                    { offset: 1, value: seen(key, to) },
+                ],
+            ];
+        }));
+        const spec = {
+            name: '',
+            duration: first.duration,
+            delay: 0,
+            easing: first.easing,
+            iterations: 1,
+            fill: 'both',
+        };
+        const channels = easedChannels(tracks, spec, props);
+        if (!channels)
+            return;
+        const length = Math.max(2, Math.round(first.duration / NATIVE_FRAME) + 1);
+        const frames = Array.from({ length }, (_, i) => i / (length - 1));
+        const clock = { keys, stop: () => undefined };
+        const native = this.scrollDriver.play(node, channels, { frames, toValue: 1, iterations: 1 }, (view) => this.tagOf(view), () => this.endedEased(node, clock));
+        if (!native)
+            return;
+        clock.stop = () => native.stop();
+        for (const key of keys)
+            state.get(key).native = clock;
+        this.easedNatively.add(node);
+    }
+    /**
+     * Native reached the end of the transitions on one clock. Where they end is committed before
+     * the view is let go, so nothing shows of where they started, which is what it was committed
+     * with.
+     */
+    endedEased(node, clock) {
+        const state = node.transitions;
+        const keys = clock.keys.filter((key) => state?.get(key)?.native === clock);
+        for (const key of keys) {
+            const eased = state.get(key);
+            Object.assign(eased, { current: eased.to, done: true, native: undefined });
+            this.emitTransition(node, 'topTransitionend', key);
+            this.markProps(node, false);
+        }
+        this.forgetEased(node);
+        if (keys.length)
+            this.commit();
+        clock.stop();
+    }
+    /** No longer one native is easing, once none of its transitions is native's. */
+    forgetEased(node) {
+        for (const eased of node.transitions?.values() ?? [])
+            if (eased.native)
+                return;
+        this.easedNatively.delete(node);
+    }
+    /**
+     * Take back from native each transition it can no longer play as it was started: one sent
+     * another way, one whose rule has gone, any of a view that was made again. Each is brought to
+     * where its clock has got to, which is where it goes on from, here or on native again.
+     */
+    takeBackEased(node, state, props, spec, now) {
+        if (!this.easedNatively.has(node))
+            return;
+        const remade = node.committed === null;
+        for (const [key, eased] of state) {
+            if (!eased.native)
+                continue;
+            const kept = spec?.[key] ?? spec?.['all'];
+            if (remade || !kept || aimsElsewhere(eased, key, props)) {
+                this.backToScriptEased(node, eased.native, now);
+            }
+        }
+    }
+    /** Stop a clock native runs, and go on from JavaScript with each transition it was playing. */
+    backToScriptEased(node, clock, now) {
+        for (const key of clock.keys) {
+            const eased = node.transitions?.get(key);
+            if (eased?.native !== clock)
+                continue;
+            eased.native = undefined;
+            const progress = Math.min(1, Math.max(0, (now - eased.start) / eased.duration));
+            eased.current = interpolate(eased.from, eased.to, bezier(eased.easing, progress));
+            this.running.add(node);
+        }
+        clock.stop();
+        this.forgetEased(node);
+    }
+    /** Let go of what native is easing on an element that is going, or gone. */
+    stopEased(node) {
+        if (!this.easedNatively.delete(node))
+            return;
+        const clocks = new Set();
+        for (const eased of node.transitions?.values() ?? []) {
+            if (eased.native)
+                clocks.add(eased.native);
+            eased.native = undefined;
+        }
+        for (const clock of clocks)
+            clock.stop();
+    }
     /**
      * Whether an animation that has finished goes on holding its last frame. With a forwards fill
      * it does, for good: without one the element falls back to whatever the cascade gives it, and
@@ -4101,6 +4686,7 @@ export class Engine {
         const props = propsMoved ? this.mergeProps(node, viewName) : previous.props;
         const propsPayload = propsMoved ? this.propsPayload(node, previous.props, props) : null;
         const childrenChanged = this.childrenMoved(node, childHandles, previous.childHandles);
+        this.noteMoved(node, propsPayload, childHandles.length !== previous.childHandles.length, previous.props['text']);
         let handle = previous.handle;
         if (childrenChanged || propsPayload) {
             handle = this.clone(previous.handle, propsPayload && this.processed(propsPayload), childrenChanged ? childHandles : null);
@@ -4581,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);
@@ -4808,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;