@ng-native/fabric 0.6.0 → 0.8.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, 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";
 /**
@@ -389,6 +389,51 @@ const VIRTUAL_TEXT = 'VirtualText';
 const DEFAULT_VIEW = 'View';
 /** A top-level text, the one view that aligns its lines. A nested text is a `VirtualText`. */
 const PARAGRAPH = 'Paragraph';
+/**
+ * The box Yoga takes a view's baseline from where the view has none of its own: its first child
+ * 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.
+        if (child.kind === 'text' && child.box)
+            return child.box === node ? undefined : child.box;
+        if (child.kind !== 'element' || ownLayout(child, 'display') === 'none')
+            continue;
+        if (ownLayout(child, 'position') !== 'absolute')
+            return child;
+    }
+    return undefined;
+}
+const isNode = (node) => node !== undefined;
+/** Whether a row lays a child out among its others, and so can take its baseline from it. */
+const inFlow = (child) => child.kind === 'element' && ownLayout(child, 'position') !== 'absolute';
+/** The text field a row's box takes its baseline from: itself, or the first in its flow down. */
+function fieldOnBaseline(item) {
+    let at = item;
+    while (at?.kind === 'element' && !TEXT_INPUTS.has(viewNameOf(at)))
+        at = firstInFlow(at);
+    return at?.kind === 'element' ? at : undefined;
+}
 const textDirection = (value) => value === 'ltr' || value === 'rtl' ? value : undefined;
 /**
  * What iOS scales a text's `lineHeight` by: the system text size, capped by the text's own
@@ -433,6 +478,57 @@ function rowsTall(props, fontScale) {
     const lines = rows * line * textScale(props, fontScale);
     props['height'] = edges.reduce((sum, part) => sum + part, lines);
 }
+/** A field's own minimum height: none where it says `auto`, which a web element starts with. */
+const ownMinimum = (minHeight) => (minHeight === 'auto' ? 0 : (minHeight ?? 0));
+/** How tall the system's font is, as a share of its size: its rise over the baseline and fall under. */
+const FONT_LINE = 0.95 + 0.24;
+/**
+ * How tall a field is by its line: the line, padding and border of a border-box field, Yoga's
+ * default, and its content alone for a content-box one, which Yoga adds the padding and border
+ * to itself. In a row aligned by baseline some of the line is kept as padding: `lineBaseline`.
+ */
+function lineBox(props, box, onBaseline, fontScale) {
+    const half = onBaseline ? lineBaseline(props, box[0], box, fontScale) : 0;
+    if (props['boxSizing'] === 'content-box')
+        return box[0] - 2 * half;
+    return box.reduce((sum, part) => sum + part, 0);
+}
+/**
+ * `lineBaseline` for a field a height sizes: the room is what the height leaves its text, and
+ * the field stays that height. A content-box field's height is its content's, so what is now
+ * padding comes out of it.
+ */
+function heightBaseline(props, height, onBaseline, fontScale) {
+    if (!onBaseline)
+        return;
+    const edges = [...blockEdge(props, 'Top', 'Start'), ...blockEdge(props, 'Bottom', 'End')];
+    if (!edges.every((part) => typeof part === 'number'))
+        return;
+    const content = props['boxSizing'] === 'content-box';
+    const room = content ? height : edges.reduce((left, part) => left - part, height);
+    const half = lineBaseline(props, room, [room, ...edges], fontScale);
+    if (content)
+        props['height'] = height - 2 * half;
+}
+/**
+ * Give a field with its line height left out the baseline of a paragraph in a line as tall, for
+ * a field in a row aligned by baseline: half the room the line has over the font is kept as
+ * padding over and under the text. React Native says a field's baseline from its text and its
+ * top padding, so without this it is the font's own, and the row lifts the paragraphs beside the
+ * field to it: a form field's prefix and suffix sit higher than what is typed. Answers the half.
+ *
+ * ponytail: the font is taken to be as tall as the system's, `FONT_LINE` of its size. Read from
+ * the font if a field in another face is seen a point off its prefix.
+ */
+function lineBaseline(props, line, [, top, , bottom], fontScale) {
+    const size = props['fontSize'];
+    if (typeof size !== 'number')
+        return 0;
+    const half = Math.max(0, (line - size * textScale(props, fontScale) * FONT_LINE) / 2);
+    props['paddingTop'] = top + half;
+    props['paddingBottom'] = bottom + half;
+    return half;
+}
 /**
  * Centre the text of a single-line text field that has a line height, as Chrome centres an
  * input's, keeping the height the line height gives it.
@@ -453,7 +549,7 @@ function rowsTall(props, fontScale) {
  * height alone for a content-box one. A null `height` is no height. A value that is not a number
  * cannot be added up, and leaves the field as it was.
  */
-function centreSingleLine(viewName, props, fontScale) {
+function centreSingleLine(viewName, props, fontScale, onBaseline = false) {
     const lineHeight = props['lineHeight'];
     if (!TEXT_INPUTS.has(viewName) || typeof lineHeight !== 'number')
         return;
@@ -462,6 +558,7 @@ function centreSingleLine(viewName, props, fontScale) {
     const height = props['height'];
     if (typeof height === 'number') {
         delete props['lineHeight'];
+        heightBaseline(props, height, onBaseline, fontScale);
         return;
     }
     // A percentage is a fixed height only where the parent's is definite, known at layout alone.
@@ -473,15 +570,12 @@ function centreSingleLine(viewName, props, fontScale) {
     const edge = (side, logical) => blockEdge(props, side, logical);
     const line = lineHeight * textScale(props, fontScale);
     const box = [line, ...edge('Top', 'Start'), ...edge('Bottom', 'End')];
-    const own = props['minHeight'] ?? 0;
+    const own = ownMinimum(props['minHeight']);
     const max = props['maxHeight'] ?? Infinity;
     if (![...box, own, max].every((part) => typeof part === 'number'))
         return;
     delete props['lineHeight'];
-    // A content-box field's minHeight is its content's: Yoga adds the padding and border itself.
-    const content = props['boxSizing'] === 'content-box'
-        ? line
-        : box.reduce((sum, part) => sum + part, 0);
+    const content = lineBox(props, box, onBaseline, fontScale);
     props['minHeight'] = Math.max(own, Math.min(content, max));
 }
 const NO_STYLE = {};
@@ -500,6 +594,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.
@@ -544,6 +676,10 @@ const STRETCHES = new Set([undefined, null, 'auto', 'stretch']);
  * kept, since it stops the stretch already.
  */
 function fitContent(node, props) {
+    const capped = {
+        row: capAtContent(props, 'width', 'maxWidth'),
+        column: capAtContent(props, 'height', 'maxHeight'),
+    };
     const width = props['width'] === 'fit-content';
     const height = props['height'] === 'fit-content';
     if (!width && !height)
@@ -558,11 +694,46 @@ function fitContent(node, props) {
     const container = containerOf(parent);
     parent.fitContainer = container;
     const [direction, align] = container.split(' ');
+    if (capped[direction === 'row' ? 'row' : 'column'])
+        withoutGrowth(props);
     const across = direction === 'row' ? height : width;
     if (across && align === 'stretch' && STRETCHES.has(props['alignSelf'])) {
         props['alignSelf'] = 'flex-start';
     }
 }
+/**
+ * A box capped at its content along its container's main axis, where it would grow: a browser
+ * clamps a growing item by its maximum, and there is no such cap to hand Yoga. So it does not
+ * grow, and starts from its content, which is as far as the cap would let it get. It may still
+ * shrink.
+ */
+function withoutGrowth(props) {
+    if (typeof props['flex'] === 'number' && props['flex'] > 0) {
+        delete props['flex'];
+        props['flexShrink'] ??= 1;
+    }
+    delete props['flexGrow'];
+    delete props['flexBasis'];
+}
+/**
+ * `max-width: max-content`, and the same of a height: no bigger than its content, which for a
+ * box that would fill its container is `fit-content`. Yoga has no such cap. Answers whether the
+ * box is the size of its content for it: one that would fill, or one that was `fit-content` as
+ * written.
+ *
+ * ponytail: a size in points is left as it is, since nothing here knows how big the content
+ * is. Measure it if a box is ever given both.
+ */
+function capAtContent(props, size, cap) {
+    if (props[cap] !== 'max-content')
+        return false;
+    delete props[cap];
+    const own = props[size];
+    const fills = own == null || own === 'auto' || (typeof own === 'string' && own.endsWith('%'));
+    if (fills)
+        props[size] = 'fit-content';
+    return fills || own === 'fit-content';
+}
 const isPercent = (value) => typeof value === 'string' && value.endsWith('%');
 /** Whether a `flex-basis` is a length or a percentage of something: not zero, and not `auto`. */
 const isSizedBasis = (basis) => isPercent(basis)
@@ -1204,6 +1375,69 @@ 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'],
+]);
+/** 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',
@@ -1759,6 +1993,16 @@ const now = () => globalThis.performance?.now?.() ?? Date.now();
 function sameHandles(a, b) {
     return a.length === b.length && a.every((handle, i) => handle === b[i]);
 }
+/**
+ * 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
+ * a peer. A compound with no class in either could be any element.
+ */
+function couldBe(compound, node) {
+    if (!compound.classes.every((name) => node.classes?.has(name)))
+        return false;
+    return (compound.is ?? []).every((alternatives) => alternatives.some((option) => couldBe(option, node)));
+}
 const FRAME_BUDGET_MS = 8;
 export class Engine {
     /** Scopes the CSS resolver's memo. Bumped once per commit. */
@@ -1959,9 +2203,7 @@ export class Engine {
         const { own, elsewhere } = this.activeUse;
         if (!own && !elsewhere.length)
             return;
-        // By its classes alone: a compound with none could be any element.
-        const asked = elsewhere.some((compound) => compound.classes.every((name) => node.classes?.has(name)));
-        if (asked)
+        if (elsewhere.some((compound) => couldBe(compound, node)))
             return this.markProps(node);
         node.stateDirty = true;
         this.markPath(node.parent ?? node);
@@ -2456,6 +2698,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);
@@ -2501,7 +2744,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
@@ -2811,11 +3057,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);
@@ -3054,7 +3304,11 @@ export class Engine {
         alignMultiline(viewName, style);
         rowsTall(style, this.fontScale);
         const merged = composeTransform(node, this.animated(node, this.transitioned(node, style)));
-        centreSingleLine(viewName, merged, this.fontScale);
+        // On iOS: Android's field says the baseline of the line it is sized and centred by.
+        // Still under the row that marked it: a row taken away is not committed again to unmark it.
+        const row = node.onBaseline;
+        const onBaseline = viewName === 'TextInput' && row !== undefined && isWithin(node, row);
+        centreSingleLine(viewName, merged, this.fontScale, onBaseline);
         // After a transition, which eases the basis as the basis it was written as.
         basisAsSize(node, merged);
         // After the basis, which is a size given where it is committed as one.
@@ -3298,7 +3552,7 @@ 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));
     }
     /**
      * A clock animation the scroll plays instead: the same animation where only the timeline moved,
@@ -3324,7 +3578,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)
@@ -3333,6 +3587,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();
@@ -3404,7 +3662,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.
@@ -3417,6 +3677,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 };
@@ -3493,8 +3754,9 @@ export class Engine {
             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);
@@ -3564,25 +3826,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);
     }
     /**
@@ -3659,7 +3924,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) {
@@ -3685,29 +3950,290 @@ 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();
-        // The properties a transition *names*, even where the node has none yet. A property is only
-        // transitioned once it has been seen settling, and one that does not exist is never seen - so
-        // `transition: transform` with no transform until a class adds one would arrive instantly,
-        // which is the commonest way to write one. `all` names nothing, so it keeps the old rule.
-        const named = spec ? Object.keys(spec).filter((key) => key !== 'all') : [];
-        for (const key of new Set([...Object.keys(props), ...named])) {
+        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) {
+        if (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;
+    }
+    /**
+     * 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.
+     */
+    layOut() {
+        const laying = this.laying;
+        const others = this.movesOthers;
+        this.laying = [];
+        this.movesOthers = false;
+        if (!laying.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;
+        }
+        const { duration, easing } = first.eased;
+        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);
+        }
+        return false;
+    }
+    /**
+     * 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) {
+            const eased = node.transitions?.get(key);
+            if (eased?.laid && !eased.done)
+                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]);
+        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 },
+                ],
+            ];
+        }));
+        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
@@ -3867,6 +4393,58 @@ export class Engine {
             };
         });
     }
+    /**
+     * Mark the text field each box of a row aligned by baseline takes its baseline from, before
+     * the field is merged, and unmark it when the row is aligned another way.
+     */
+    noteBaselineFields(row) {
+        const aligned = ownLayout(row, 'alignItems') === 'baseline';
+        const before = row.baselineFields;
+        if (!aligned && !before)
+            return;
+        const now = new Set(aligned ? row.children.filter(inFlow).map(fieldOnBaseline).filter(isNode) : []);
+        // One that is no longer this row's, and that no other row has marked since.
+        for (const field of before ?? []) {
+            if (!now.has(field) && field.onBaseline === row)
+                this.onBaselineOf(field, undefined);
+        }
+        for (const field of now)
+            if (field.onBaseline !== row)
+                this.onBaselineOf(field, row);
+        row.baselineFields = now.size ? now : undefined;
+    }
+    onBaselineOf(field, row) {
+        field.onBaseline = row;
+        this.markProps(field, false);
+    }
+    /**
+     * Have the text a row aligned by baseline takes a baseline from measured again, where that
+     * text is inside one of the row's boxes and the row is committed again. React Native keeps
+     * what a paragraph measured on the one copy of its node that was measured, and Yoga copies a
+     * node it lays out around: a row that is laid out again asks a box for its baseline, the box
+     * asks the paragraph in it, and a copy that was never measured works it out then, on a node
+     * that is by then not to be changed. A debug build stops there. Committed to be measured
+     * again (`remeasure`), the paragraph is measured in this commit and has the answer.
+     *
+     * ponytail: the first box in the flow at each level, which is the one Yoga asks unless
+     * another is aligned by baseline itself. A row a commit lays out again without the engine
+     * cloning it, as its room changing does, is not reached: clone on a layout event if one is
+     * seen to stop there.
+     */
+    freshBaselines(row) {
+        if (!row.committed || ownLayout(row, 'alignItems') !== 'baseline')
+            return;
+        for (const item of row.children) {
+            let at = firstInFlow(item);
+            while (at?.committed && committedViewName(at) !== PARAGRAPH)
+                at = firstInFlow(at);
+            if (!at?.committed)
+                continue;
+            at.remeasure = true;
+            for (let up = at; up && up !== row; up = up.parent)
+                up.subtreeDirty = true;
+        }
+    }
     /**
      * Copy a list of gradients, running every stop's colour through the host's converter.
      *
@@ -3910,6 +4488,8 @@ export class Engine {
         this.refitChildren(node);
         const viewName = committedViewName(node);
         this.forgetRenamed(node, viewName);
+        this.noteBaselineFields(node);
+        this.freshBaselines(node);
         const childHandles = this.reconcileChildren(node, viewName, style);
         noteTouches(node, style);
         const previous = node.committed;
@@ -3925,6 +4505,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);