@ng-native/fabric 0.4.0 → 0.5.0

package/dist/engine.js

@@ -7,7 +7,7 @@
  * because a persistent parent holds references to specific child handles. That bubble is
  * inherent and is what React's own Fabric renderer does.
  */
-import { boundDeclaration, inlineInherited, setsInherited, StyleResolver, } from "./css.js";
+import { boundDeclaration, inlineInherited, setsInherited, StyleResolver, usesActive, } 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";
@@ -15,8 +15,9 @@ 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 { firstFrame, rangeOf, scrollChannels } from "./scroll-animation.js";
+import { clockChannels, firstFrame, rangeOf, scrollChannels } from "./scroll-animation.js";
 import { FontFaces } from "./font-faces.js";
+import { premultipliedStops } from "./premultiplied-stops.js";
 /**
  * The animation a node's style asks for, with a play state from a rule of its own applied. Both
  * are instructions for this engine and nothing native has heard of them, so they come out of the
@@ -459,6 +460,124 @@ function centreSingleLine(viewName, props, fontScale) {
         : box.reduce((sum, part) => sum + part, 0);
     props['minHeight'] = Math.max(own, Math.min(content, max));
 }
+/**
+ * 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.
+ */
+function ownLayout(node, key) {
+    return (flattenStyle(node.props[STYLE_OVERRIDE], {})[key] ??
+        flattenStyle(node.props['style'], {})[key] ??
+        node.props[key] ??
+        node.styleCache?.style[key] ??
+        node.defaultStyle?.[key]);
+}
+/**
+ * A container's main axis and how it aligns across it, as `row` or `column` and a keyword. A
+ * `display: contents` node is no container: its children are laid out in the one above it.
+ */
+function containerOf(node) {
+    if (ownLayout(node, 'display') === 'contents')
+        return 'contents';
+    const direction = String(ownLayout(node, 'flexDirection') ?? 'column');
+    return `${direction.startsWith('row') ? 'row' : 'column'} ${ownLayout(node, 'alignItems') ?? 'stretch'}`;
+}
+/**
+ * The node a box is laid out in: its parent, or the one above every `display: contents` ancestor.
+ * Each of those is told a `fit-content` child passed through, so that when it stops being
+ * `contents`, and is the container, the child is worked out again.
+ */
+function layoutParent(node) {
+    let parent = node.parent;
+    while (parent && containerOf(parent) === 'contents') {
+        parent.fitContainer = 'contents';
+        parent = parent.parent;
+    }
+    return parent;
+}
+const STRETCHES = new Set([undefined, null, 'auto', 'stretch']);
+/**
+ * `width: fit-content` and `height: fit-content`, which Yoga has no size for.
+ *
+ * Along its container's main axis a box is as big as its content already, so the size is
+ * dropped. Across it a box stretches, where a browser keeps it at its content's size and at the
+ * start: `align-self: flex-start` does both. An alignment the container or the box asked for is
+ * kept, since it stops the stretch already.
+ */
+function fitContent(node, props) {
+    const width = props['width'] === 'fit-content';
+    const height = props['height'] === 'fit-content';
+    if (!width && !height)
+        return;
+    if (width)
+        delete props['width'];
+    if (height)
+        delete props['height'];
+    const parent = layoutParent(node);
+    if (!parent)
+        return;
+    const container = containerOf(parent);
+    parent.fitContainer = container;
+    const [direction, align] = container.split(' ');
+    const across = direction === 'row' ? height : width;
+    if (across && align === 'stretch' && STRETCHES.has(props['alignSelf'])) {
+        props['alignSelf'] = 'flex-start';
+    }
+}
+const isPercent = (value) => typeof value === 'string' && value.endsWith('%');
+/**
+ * Whether a box has a height a percentage can be taken of, as CSS defines one: a height of its
+ * own, or one the layout around it gives it. A box as tall as what it holds has none.
+ *
+ * Asked of each box on the way up, and remembered on it, so a change to any of them works out
+ * again the boxes beneath it. Where the answer is not known for certain it is yes, which leaves
+ * the percentage to Yoga as before: a view native sizes itself, or one placed out of the flow.
+ */
+function definiteHeight(node) {
+    return (node.heightBasis = hasDefiniteHeight(node));
+}
+function hasDefiniteHeight(node) {
+    // The root is the screen, and only a plain view is sized by its content alone.
+    if (!node.parent || node.kind !== 'element' || viewNameOf(node) !== 'View')
+        return true;
+    const parent = layoutParent(node);
+    if (!parent)
+        return true;
+    const height = ownLayout(node, 'height');
+    if (isPercent(height))
+        return definiteHeight(parent);
+    return sizesItself(node, height) || heightFromLayout(node, parent);
+}
+const NO_HEIGHT = new Set([undefined, null, 'auto', 'fit-content']);
+/** Whether a box has a height from its own style: written, or placed, or kept in proportion. */
+function sizesItself(node, height) {
+    if (!NO_HEIGHT.has(height))
+        return true;
+    return ownLayout(node, 'position') === 'absolute' || ownLayout(node, 'aspectRatio') != null;
+}
+/** Whether the container a box is in gives it a height: a row's, or a share of a column's. */
+function heightFromLayout(node, parent) {
+    const [direction, align] = containerOf(parent).split(' ');
+    if (direction === 'row') {
+        // Stretched across a row, it is as tall as the row.
+        const self = ownLayout(node, 'alignSelf');
+        return STRETCHES.has(self) && align === 'stretch';
+    }
+    // In a column it has the height it grows to, where the column has one to share out.
+    const grows = Number(ownLayout(node, 'flexGrow') ?? ownLayout(node, 'flex') ?? 0) > 0;
+    return grows && definiteHeight(parent);
+}
+/**
+ * `height: 50%` under a parent with no height to take it of, which CSS reads as `auto`. Yoga
+ * takes it of the space on offer, the screen's or everything a scroll view holds, so no height
+ * is sent.
+ */
+function percentHeight(node, props) {
+    if (!isPercent(props['height']))
+        return;
+    const parent = layoutParent(node);
+    if (parent && !definiteHeight(parent))
+        delete props['height'];
+}
 /**
  * Start a multiline Android text field's text at the top, as iOS and a `<textarea>` do.
  *
@@ -769,6 +888,30 @@ function holdsOnlyText(node) {
     }
     return true;
 }
+const ALIGNS = new Set(['center', 'flex-end', 'space-around', 'space-evenly']);
+/**
+ * Whether one of HTML's text elements is a flex container that aligns the one run of text it
+ * holds, as an avatar's initials are centred: `<span class="flex items-center justify-center">`.
+ *
+ * A browser makes the run a flex item and places it. A paragraph's text is its content, which no
+ * alignment moves, so such an element commits as a view, and its text as the paragraph any view's
+ * loose text is. Read from the node's own style on each reconcile, which a change to it brings
+ * about, so nothing is kept to go stale. A `<text>` is a paragraph whatever its style, and an
+ * element holding more than the one run is left as it was.
+ */
+function aligningText(node) {
+    if (node.kind !== 'element' || node.name === 'text' || !TEXT_ELEMENTS.has(node.name)) {
+        return false;
+    }
+    if (node.children.length !== 1 || node.children[0].kind !== 'text')
+        return false;
+    if (isTextElement(node.parent) || ownLayout(node, 'display') !== 'flex')
+        return false;
+    return (ALIGNS.has(ownLayout(node, 'alignItems')) ||
+        ALIGNS.has(ownLayout(node, 'justifyContent')));
+}
+/** The view a node is committed as: `viewNameOf`, but for a text element that aligns its text. */
+const committedViewName = (node) => aligningText(node) ? DEFAULT_VIEW : viewNameOf(node);
 /**
  * The native view a node commits as: `Paragraph` for a `<text>`, `VirtualText` for one nested in
  * another, `RawText` for a run of text, and `View` for anything unregistered, which is what an
@@ -795,7 +938,9 @@ export function viewNameOf(node) {
     if (node.name !== 'text' && TEXT_ELEMENTS.has(node.name) && !holdsOnlyText(node)) {
         return DEFAULT_VIEW;
     }
-    return isTextElement(node.parent) ? VIRTUAL_TEXT : PARAGRAPH;
+    // The paragraph the engine makes for a view's loose text is under a view, whatever the name
+    // of the element that view is.
+    return !node.anonymous && isTextElement(node.parent) ? VIRTUAL_TEXT : PARAGRAPH;
 }
 /**
  * The props every native view reads as a boolean: the `bool` fields of React Native's
@@ -846,22 +991,47 @@ function wasOrIsEmptyWithout(node, moved) {
     }
     return true;
 }
+/**
+ * Have the child that paints a node's background merged again with the node: nothing of the
+ * child's own moved, and what it paints may have.
+ */
+function repaint(node) {
+    if (node.paintsOn?.parent === node)
+        node.paintsOn.propsDirty = true;
+}
+/** A sixtieth of a second: how far apart the frames native is given for an animation are. */
+const NATIVE_FRAME = 1000 / 60;
+/** The style keys that are a view's background. */
+const PAINT_KEYS = [
+    'backgroundColor',
+    'experimental_backgroundImage',
+    'experimental_backgroundSize',
+    'experimental_backgroundPosition',
+    'experimental_backgroundRepeat',
+];
 /**
  * A node's own props onto what it commits with. No native prop has a hyphen: `data-*` and `aria-*`
  * attributes stay on the node for selectors to match, and an `aria-*` one is mapped to the prop
- * native reads.
+ * native reads. The node's `attributeOnly` names stay on it the same way.
  */
-function writeOwnProps(own, props) {
+function writeOwnProps(own, props, attributeOnly) {
     let aria = false;
     for (const key of Object.keys(own)) {
+        if (attributeOnly?.has(key))
+            continue;
         if (key.includes('-'))
             aria ||= key.startsWith('aria-');
         else if (key !== 'style' && key !== INTRINSIC_SIZE && key !== STYLE_OVERRIDE) {
             props[key] = committedProp(key, own[key]);
         }
     }
-    if (aria)
-        applyAria(own, props);
+    if (!aria)
+        return;
+    // An attribute-only `aria-*` is not mapped to the prop native reads either.
+    const mapped = attributeOnly?.size
+        ? Object.fromEntries(Object.entries(own).filter(([key]) => !attributeOnly.has(key)))
+        : own;
+    applyAria(mapped, props);
 }
 /** A prop as it is committed: a boolean view prop held as text is the boolean the text says. */
 function committedProp(key, value) {
@@ -1039,6 +1209,10 @@ class RetainedNode {
     styleCache = null;
     styleDirty = true;
     styleCommitted = null;
+    fitContainer = undefined;
+    heightBasis = undefined;
+    hasDirty = false;
+    stateDirty = false;
     ownStyle = undefined;
     claimed = undefined;
     dormantHoists = null;
@@ -1182,12 +1356,19 @@ class RetainedNode {
  * colours - `shouldRasterizeIOS` is a boolean.
  */
 const IS_COLOR_PROP = /color(android)?$/i;
+/**
+ * Colour props React Native does not name with a `color` suffix: `<switch>`'s pair ends in the
+ * state each one paints - `trackColorForTrue` and `trackColorForFalse`. They are the same type
+ * problem the `Android` suffix causes: Android's `ColorPropConverter` takes a number or a
+ * platform-colour map, refuses a string, and throws rather than approximating one.
+ */
+const STATE_COLOR_PROPS = new Set(['trackColorForTrue', 'trackColorForFalse']);
 /** Answers per key name, once: the regex ran for every prop of every node in every commit. */
 const colorProps = new Map();
 function isColorProp(key) {
     let answer = colorProps.get(key);
     if (answer === undefined) {
-        colorProps.set(key, (answer = IS_COLOR_PROP.test(key) || BRUSH_PROPS.has(key)));
+        colorProps.set(key, (answer = IS_COLOR_PROP.test(key) || STATE_COLOR_PROPS.has(key) || BRUSH_PROPS.has(key)));
     }
     return answer;
 }
@@ -1431,6 +1612,8 @@ export class Engine {
      * does, a child list can move without anything else needing to be looked at again.
      */
     structuralSheets = false;
+    /** Whether any sheet uses `:has()`. See `markBeneath`. */
+    hasSheets = false;
     resolveAssetSource;
     constructor(fabric, rootTag, options = {}) {
         this.fabric = fabric;
@@ -1442,6 +1625,8 @@ export class Engine {
         if (options.tokens)
             this.styles.setRootTokens(options.tokens);
         this.structuralSheets = options.globalStyles?.structural === true;
+        this.watchHas(options.globalStyles);
+        this.watchActive(options.globalStyles);
         this.dev = options.dev ?? globalThis.__DEV__ === true;
         if (this.dev) {
             this.styles.onUndefinedToken = (name, props, on) => this.reportUndefinedToken(name, props, on);
@@ -1506,11 +1691,70 @@ export class Engine {
             if (node.active === active)
                 continue;
             node.active = active;
-            this.markProps(node);
+            this.markActive(node);
             changed = true;
         }
         return changed;
     }
+    /** Whether any sheet styles a pressed element, and each compound that asks about one from another. */
+    activeUse = {
+        own: false,
+        elsewhere: [],
+    };
+    /** What each sheet in play asks about a pressed element: `activeUse` is all of them together. */
+    activeBySheet = new Map();
+    /** Note what a sheet in play asks about a pressed element. See `markActive`. */
+    watchActive(sheet) {
+        // Asked for every element a component's sheet is given to: noted once a sheet.
+        if (!sheet || this.activeBySheet.has(sheet))
+            return;
+        const use = usesActive(sheet);
+        this.activeBySheet.set(sheet, use);
+        if (!use.own && !use.elsewhere.length)
+            return;
+        this.countActive();
+        if (this.styles.tracksHas)
+            return;
+        // What a pressed element is compared with is the rules it matched, which no cache kept until
+        // a sheet asked. Nothing is resolved yet when the sheet is the one the engine was made with.
+        this.styles.tracksHas = true;
+        if (!this.root)
+            return;
+        this.root.styleDirty = true;
+        this.markPath(this.root);
+    }
+    /** A sheet has left play, by a hot swap or by being removed: what it asked goes with it. */
+    unwatchActive(sheet) {
+        if (this.activeBySheet.delete(sheet))
+            this.countActive();
+    }
+    countActive() {
+        const all = [...this.activeBySheet.values()];
+        this.activeUse = {
+            own: all.some((use) => use.own),
+            elsewhere: all.flatMap((use) => use.elsewhere),
+        };
+    }
+    /**
+     * A press began or ended on `node` or under it, which is all that changed about it. A press
+     * reaches every ancestor up to the root, and marking each as restyled would style the whole
+     * screen again, twice a press. So each is only matched again, and keeps its style and all
+     * that is under it unless it now matches other rules. An element a rule asks about from
+     * inside or beside it, `.card:active .title`, changes more than itself, and is restyled with
+     * everything under it as any other change is. With no rule for a pressed element at all there
+     * is nothing to match.
+     */
+    markActive(node) {
+        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)
+            return this.markProps(node);
+        node.stateDirty = true;
+        this.markPath(node.parent ?? node);
+    }
     /**
      * Custom properties the device knows and the stylesheet cannot, once they change.
      *
@@ -1533,6 +1777,8 @@ export class Engine {
             this.registerSheet(sheet);
         if (sheet.structural)
             this.structuralSheets = true;
+        this.watchHas(sheet);
+        this.watchActive(sheet);
         this.markPath(this.root);
         return true;
     }
@@ -1563,14 +1809,19 @@ export class Engine {
      * which is what makes Fabric dirty a measured node and measure it at the size now in effect.
      */
     remeasureText() {
+        const again = (measured) => {
+            measured.remeasure = true;
+            this.markProps(measured, false);
+        };
         const visit = (node) => {
             for (const child of node.children) {
+                // The paragraph of a run of text written straight into a view is kept on the text.
+                if (child.kind === 'text' && child.box?.committed)
+                    again(child.box);
                 if (child.kind !== 'element')
                     continue;
-                if (child.committed && MEASURED_VIEWS.has(viewNameOf(child))) {
-                    child.remeasure = true;
-                    this.markProps(child, false);
-                }
+                if (child.committed && MEASURED_VIEWS.has(committedViewName(child)))
+                    again(child);
                 visit(child);
             }
         };
@@ -1718,6 +1969,8 @@ export class Engine {
         node.sheet = sheet;
         if (sheet?.structural)
             this.structuralSheets = true;
+        this.watchHas(sheet);
+        this.watchActive(sheet);
         this.markProps(node);
     }
     /** The sheet each node given another's scope was created with. */
@@ -1758,6 +2011,8 @@ export class Engine {
         }
         if (sheet?.structural)
             this.structuralSheets = true;
+        this.watchHas(sheet);
+        this.watchActive(sheet);
         if (HOISTS[name])
             this.hoisted.add(node);
         return node;
@@ -1779,6 +2034,7 @@ export class Engine {
         if (node.hostSheet === sheet)
             return;
         node.hostSheet = sheet;
+        this.watchActive(sheet);
         this.markProps(node);
     }
     /**
@@ -1894,6 +2150,7 @@ export class Engine {
             node.playing = undefined;
             this.markProps(node, false);
         }
+        this.releasePlayedNatively();
         for (const nodes of this.scrollTimelines.values()) {
             for (const node of nodes) {
                 if (this.topOf(node) === this.root)
@@ -1928,8 +2185,14 @@ export class Engine {
     destroyNode(node) {
         node.listeners?.clear();
         node.listeners = null;
-        node.committed = null;
+        // With what it holds: a node Angular destroys can be put back, as content projected into
+        // an `@if` is, and its children's views would then be handed to the view it is made again
+        // as. Native gives a view one parent for its life, and aborts on a second.
+        if (node.committed)
+            this.forgetCommitted(node);
         node.transitions = undefined;
+        if (node.playing)
+            this.stopNative(node, node.playing);
         node.playing = undefined;
         this.stopScrolled(node);
         this.running.delete(node);
@@ -1950,6 +2213,9 @@ export class Engine {
         return siblings[siblings.indexOf(node) + 1] ?? null;
     }
     setProp(node, key, value) {
+        // A prop written again is a binding's, and is committed as any other is.
+        if (node.attributeOnly?.delete(key))
+            this.markProps(node, false);
         if (value === undefined || value === null) {
             // Nothing to remove, so nothing changed. Worth its own branch because it is the common
             // case, not a rare one: a host primitive carries a host binding for every prop React Native
@@ -1969,6 +2235,29 @@ export class Engine {
         // inline `direction` is the exception, because the paragraphs below it align by it.
         this.markProps(node, key !== 'style' || this.inlineReachesStyle(node));
     }
+    /**
+     * Paint a node's background on one of its children instead of on the node: the node keeps its
+     * `background-color` and `background-image` in the cascade, where a stylesheet wrote them, and
+     * the child is the view that draws them. What a view that masks its children and not itself
+     * needs, as `<gradient-text>` is.
+     */
+    paintOn(node, child) {
+        node.paintsOn = child;
+        this.markProps(node, false);
+        this.markProps(child, false);
+    }
+    /**
+     * Keep a prop the node already has as an attribute: on the node for a selector such as
+     * `:host([variant='primary'])` to match, and left out of what is committed to the native view.
+     * It is committed again once the prop is next written. What the platform adapter does with a
+     * static attribute that is an input of the host's component.
+     */
+    keepAsAttribute(node, key) {
+        if (!(key in node.props))
+            return;
+        (node.attributeOnly ??= new Set()).add(key);
+        this.markProps(node, false);
+    }
     /**
      * Whether a node's inline style can change what it or anything below it resolves to: it sets,
      * or until now set, a property its children inherit.
@@ -2072,11 +2361,35 @@ export class Engine {
             // state, though nothing about the sibling moved. Only sheets that ask about siblings pay.
             if (this.structuralSheets)
                 this.markLaterSiblings(node);
+            if (this.hasSheets)
+                this.markBeneath(node.parent);
         }
         // The root has no parent to carry the mark, so it carries its own: `.dark` on the root alone
         // restyles everything beneath it.
         this.markPath(node.parent ?? node);
     }
+    /** Start matching ancestors again on a change, once a sheet that uses `:has()` is in play. */
+    watchHas(sheet) {
+        if (!sheet?.has || this.hasSheets)
+            return;
+        this.hasSheets = true;
+        this.styles.tracksHas = true;
+        // What is already resolved kept no record of the rules it matched: resolve it again. Nothing
+        // is, when the sheet is the one the engine was made with.
+        if (!this.root)
+            return;
+        this.root.styleDirty = true;
+        this.markPath(this.root);
+    }
+    /**
+     * Something at or beneath `from` changed: every node from there up may match a `:has()` rule
+     * it did not, or stop matching one. They are matched again rather than marked for restyling,
+     * which would restyle everything under them. Only sheets that use `:has()` pay.
+     */
+    markBeneath(from) {
+        for (let node = from; node; node = node.parent)
+            node.hasDirty = true;
+    }
     markLaterSiblings(node) {
         const siblings = node.parent?.children;
         if (!siblings)
@@ -2099,6 +2412,8 @@ export class Engine {
             if (wasOrIsEmptyWithout(node, moved))
                 this.markLaterSiblings(node);
         }
+        if (this.hasSheets)
+            this.markBeneath(node);
         this.markPath(node.parent);
     }
     /** Walk up until we hit a node already known to have a dirty subtree. */
@@ -2304,11 +2619,17 @@ export class Engine {
         const props = { ...DEFAULT_PROPS[viewName], ...node.defaultStyle };
         Object.assign(props, this.styles.resolve(node, this.styleEpoch).style);
         const resolved = props['pointerEvents'];
-        writeOwnProps(node.props, props);
+        writeOwnProps(node.props, props, node.attributeOnly);
         withTextContent(node, viewName, props);
         const cascaded = props['transform'];
         const style = boundTransform(node, flattenStyle(node.props['style'], props), cascaded);
+        if (node.props['style']) {
+            this.styles.overOtherForms(flattenStyle(node.props['style'], {}), style);
+        }
         nativePointerEvents(node, style, resolved);
+        // Before an image's own size: `fit-content` is no size, so the image's is what it gets.
+        fitContent(node, style);
+        percentHeight(node, style);
         const intrinsic = node.props[INTRINSIC_SIZE];
         if (intrinsic)
             applyIntrinsicSize(style, intrinsic);
@@ -2322,8 +2643,53 @@ export class Engine {
         alignMultiline(viewName, style);
         const merged = composeTransform(node, this.animated(node, this.transitioned(node, style)));
         centreSingleLine(viewName, merged, this.fontScale);
+        this.movePaint(node, merged);
         return merged;
     }
+    /**
+     * Leave a node's background out of what it commits when a child paints it, and give that child
+     * its parent's: the cascade's, and over it the parent's inline style.
+     */
+    movePaint(node, merged) {
+        if (node.paintsOn)
+            for (const key of PAINT_KEYS)
+                delete merged[key];
+        const from = node.parent?.paintsOn === node ? node.parent : null;
+        if (!from)
+            return;
+        const paint = flattenStyle(from.props['style'], {
+            ...this.styles.resolve(from, this.styleEpoch).style,
+        });
+        for (const key of PAINT_KEYS)
+            if (paint[key] !== undefined)
+                merged[key] = paint[key];
+    }
+    /**
+     * A container whose direction or alignment changed since a child with a `fit-content` size
+     * read it, or whose height stopped or started being one a percentage is taken of since a child
+     * with a percentage height asked: those children are merged again. A change to a container
+     * marks nothing beneath it, since none of these is inherited.
+     */
+    refitChildren(node) {
+        // Both are asked, and both remembered, before either has the children merged again.
+        const basis = node.heightBasis;
+        const based = basis !== undefined && definiteHeight(node) !== basis;
+        const fitted = node.fitContainer !== undefined && containerOf(node) !== node.fitContainer;
+        if (fitted)
+            node.fitContainer = containerOf(node);
+        if (based || fitted)
+            this.refit(node);
+    }
+    /** Have a container's children merged again, through any `display: contents` among them. */
+    refit(container) {
+        for (const child of container.children) {
+            if (child.kind !== 'element')
+                continue;
+            child.propsDirty = true;
+            if (containerOf(child) === 'contents')
+                this.refit(child);
+        }
+    }
     /**
      * The text size cap that lays a paragraph or text input out again once a face it names has
      * registered: a step per face above the app's own cap where it set one (below 1 is none, on
@@ -2397,6 +2763,8 @@ export class Engine {
     sheetReplaced(sheet, next) {
         if (sheet === next && this.knownSheets.has(sheet))
             return;
+        this.unwatchActive(sheet);
+        this.watchActive(next);
         const at = this.sheetOrder.indexOf(sheet);
         if (at === -1) {
             this.registerSheet(next);
@@ -2459,11 +2827,17 @@ export class Engine {
     }
     /** Mark every element under `node` committed with a family, so it is matched again. */
     markFontText(node) {
+        const named = (text) => {
+            if (typeof text?.committed?.props['fontFamily'] === 'string')
+                this.markProps(text, false);
+        };
         for (const child of node.children) {
+            // The paragraph of a run of text written straight into a view is kept on the text.
+            if (child.kind === 'text')
+                named(child.box);
             if (child.kind !== 'element')
                 continue;
-            if (typeof child.committed?.props['fontFamily'] === 'string')
-                this.markProps(child, false);
+            named(child);
             this.markFontText(child);
         }
     }
@@ -2510,6 +2884,7 @@ export class Engine {
     handOverToScroll(node, spec) {
         if (!node.playing)
             return;
+        this.stopNative(node, node.playing);
         if (node.playing.spec.name !== spec.name)
             this.cancelPlaying(node);
         node.playing = undefined;
@@ -2521,9 +2896,88 @@ export class Engine {
      */
     cancelPlaying(node) {
         const running = node.playing;
+        if (running)
+            this.stopNative(node, running);
         if (running && !running.done)
             this.emitTransition(node, 'topAnimationcancel', running.spec.name);
     }
+    /** Stop on native each animation whose view has left the tree. */
+    releasePlayedNatively() {
+        for (const node of [...this.playedNatively]) {
+            if (this.topOf(node) === this.root)
+                continue;
+            this.stopNative(node, node.playing);
+            node.playing = undefined;
+            this.markProps(node, false);
+        }
+    }
+    /** Every node whose animation native is playing, with no frame of it in JavaScript. */
+    playedNatively = new Set();
+    /**
+     * Hand an animation that has just started to native, where native can play it: one that moves
+     * only opacity and transforms, starts at once, and repeats a whole number of times. Native then
+     * runs it frame by frame, and JavaScript hears of it again when it ends. Anything else is
+     * played from here, a commit a frame. See `NativeScrollDriver.play`.
+     */
+    playNatively(node, running, props) {
+        const { spec } = running;
+        if (!this.scrollDriver || spec.delay !== 0 || spec.duration <= 0)
+            return false;
+        const { channels, held, span } = clockChannels(running.tracks, spec, props);
+        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.
+        const count = spec.iterations === null ? -1 : spec.iterations / span;
+        if (count !== -1 && !(Number.isInteger(count) && count > 0))
+            return false;
+        const length = Math.max(2, Math.round((spec.duration * span) / NATIVE_FRAME) + 1);
+        const frames = Array.from({ length }, (_, i) => i / (length - 1));
+        const native = this.scrollDriver.play(node, channels, { frames, toValue: span, iterations: count }, (view) => this.tagOf(view), () => this.endedNatively(node, running));
+        if (!native)
+            return false;
+        running.native = native;
+        // 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 };
+        this.playedNatively.add(node);
+        return true;
+    }
+    /**
+     * Native reached the end of an animation it was playing. The frame it ends at, or the resting
+     * style where it does not fill, is committed before the view is let go, so nothing shows of
+     * the frame it started at, which is what the view had been committed with.
+     */
+    endedNatively(node, running) {
+        if (node.playing !== running || !running.native)
+            return;
+        const { native, spec } = running;
+        running.native = undefined;
+        this.playedNatively.delete(node);
+        const end = running.start + spec.duration * (spec.iterations ?? 1);
+        this.advancePlayer(node, Math.max(this.now(), end));
+        this.commit();
+        native.stop();
+    }
+    /** Take an animation back from native, which stops it there. The caller plays it on, or not. */
+    stopNative(node, running) {
+        if (!running.native)
+            return;
+        running.native.stop();
+        running.native = undefined;
+        this.playedNatively.delete(node);
+    }
+    /**
+     * Play on from JavaScript an animation native was playing, from where its clock has got to:
+     * what a pause, other frames or a view made again need, none of which native can be told of.
+     */
+    backToScript(node, running) {
+        if (!running.native)
+            return;
+        this.stopNative(node, running);
+        running.values = sample(running, this.now()).values;
+        if (!running.done && running.pausedAt === undefined)
+            this.playing.add(node);
+    }
     /** Start the clock on an animation, unless the node is already playing this one. */
     startPlaying(node, spec, frames, props) {
         const current = node.playing;
@@ -2531,6 +2985,8 @@ export class Engine {
         if (!current || !sameAnimation(current.spec, spec)) {
             if (current && current.spec.name !== spec.name)
                 this.cancelPlaying(node);
+            else if (current)
+                this.stopNative(node, current);
             const started = {
                 spec,
                 tracks: tracksOf(frames, props, inherited),
@@ -2551,12 +3007,16 @@ export class Engine {
             node.playing = started;
             if (spec.paused)
                 started.pausedAt = this.now();
-            else
+            else if (!this.playNatively(node, started, props))
                 this.playing.add(node);
             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)
+            this.backToScript(node, current);
         if (this.playedFrames.get(current) !== frames || inherited !== current.inherited) {
+            this.backToScript(node, current);
             this.reframe(node, current, frames, props, inherited);
         }
         this.playOrPause(node, node.playing, spec);
@@ -2594,6 +3054,7 @@ export class Engine {
         current.spec = spec;
         const now = this.now();
         if (spec.paused && current.pausedAt === undefined && !current.done) {
+            this.backToScript(node, current);
             current.pausedAt = now;
             this.playing.delete(node);
         }
@@ -2904,7 +3365,8 @@ export class Engine {
      *
      * A stop's colour is a colour like any other, but it is two levels down and nothing else looks
      * there: without this the device is handed the string `rgb(255, 0, 0)` where it wants a number,
-     * and paints nothing.
+     * and paints nothing. The stops are first rewritten so native's interpolation paints what
+     * CSS's premultiplied one does (see `premultipliedStops`).
      */
     processGradients(value) {
         if (!Array.isArray(value))
@@ -2915,7 +3377,7 @@ export class Engine {
                 return entry;
             return {
                 ...gradient,
-                colorStops: gradient.colorStops.map((stop) => ({
+                colorStops: premultipliedStops(gradient.colorStops).map((stop) => ({
                     ...stop,
                     color: this.color(stop.color),
                 })),
@@ -2937,7 +3399,9 @@ export class Engine {
         if (this.isClean(node) && !styleChanged)
             return node.committed.handle;
         node.styleCommitted = style;
-        const viewName = viewNameOf(node);
+        repaint(node);
+        this.refitChildren(node);
+        const viewName = committedViewName(node);
         this.forgetRenamed(node, viewName);
         const childHandles = this.reconcileChildren(node, viewName, style);
         noteTouches(node, style);
@@ -3276,7 +3740,10 @@ export class Engine {
      * layout bug. On the first commit of any known element with no component behind it, say so.
      */
     checkClaimed(node) {
-        if (node.kind !== 'element' || node.claimed || !PRIMITIVE_NAMES.has(node.name))
+        // The paragraph the engine wraps loose text in is its own: no template wrote it.
+        if (node.kind !== 'element' || node.claimed || node.anonymous)
+            return;
+        if (!PRIMITIVE_NAMES.has(node.name))
             return;
         if (this.reported.has(node.name))
             return;