@ng-native/fabric 0.7.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, 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";
 /**
@@ -394,6 +394,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.
@@ -576,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.
@@ -1319,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',
@@ -2579,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);
@@ -2624,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
@@ -2934,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);
@@ -3425,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,
@@ -3451,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)
@@ -3460,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();
@@ -3531,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.
@@ -3544,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 };
@@ -3620,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);
@@ -3691,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);
     }
     /**
@@ -3786,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) {
@@ -3812,24 +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();
+        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
@@ -4101,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);