@ng-native/fabric 0.1.3 → 0.3.0

package/dist/engine.js

@@ -8,7 +8,7 @@
  * inherent and is what React's own Fabric renderer does.
  */
 import { StyleResolver, } from "./css.js";
-import { animationEvent, bezier, interpolate, sample, step, tracksOf, } from "./transition.js";
+import { animationEvent, bezier, interpolate, readsInheritedColour, sample, step, tracksOf, } from "./transition.js";
 import { isFormsInput } from "./forms-inputs.js";
 import { transformList } from "./inline-transform.js";
 import { tokenFromValue } from "./inline-token.js";
@@ -22,14 +22,41 @@ import { FontFaces } from "./font-faces.js";
  * and this runs for every node that commits.
  */
 function animationOf(props) {
-    const spec = props['$animation'];
+    let spec = props['$animation'];
     if (spec !== undefined)
         delete props['$animation'];
-    const playState = props['$playState'];
-    if (playState === undefined)
-        return spec;
-    delete props['$playState'];
-    return spec && { ...spec, paused: playState === 'paused' };
+    for (const [key, field] of Object.entries(ANIMATION_PARTS)) {
+        if (!(key in props))
+            continue;
+        const value = props[key];
+        delete props[key];
+        if (spec && value !== null)
+            spec = { ...spec, ...animationPart(field, value) };
+    }
+    return spec;
+}
+const ANIMATION_PARTS = {
+    $animationDuration: 'duration',
+    $animationDelay: 'delay',
+    $animationEasing: 'easing',
+    $animationIterations: 'iterations',
+    $animationDirection: 'direction',
+    $animationFill: 'fill',
+    $playState: 'paused',
+};
+function animationPart(field, value) {
+    switch (field) {
+        case 'iterations':
+            return { iterations: value === 'infinite' ? null : value };
+        case 'direction':
+            return {
+                direction: value === 'normal' ? undefined : value,
+            };
+        case 'paused':
+            return { paused: value === 'paused' ? true : undefined };
+        default:
+            return { [field]: value };
+    }
 }
 /**
  * Whether two specs ask for the same animation. By what they say rather than which object they
@@ -53,23 +80,24 @@ const SPEC_FIELDS = [
     'direction',
     'timeline',
 ];
+/**
+ * The scroll events that mean a finger is dragging the list rather than tapping something in it.
+ *
+ * `topScrollBeginDrag` is the precise one; `topScroll` is here because a scroll view configured
+ * without drag events still reports movement, and a press surviving that is the bug either way.
+ */
+const SCROLL_CANCELS_PRESS = new Set(['topScroll', 'topScrollBeginDrag']);
 /**
  * RN's `directEventTypes`: delivered to the target only, never up the tree. Everything else
  * bubbles, which matches RN's `bubblingEventTypes` for the touch and input events that matter.
+ * The web host's engine reads this set too, so both hosts deliver an event the same way.
  *
  * ponytail: a hand-kept set rather than real ViewConfigs. It is wrong only for a nested
  * scroll view, where an ancestor listening for the same direct event would not fire (correct)
  * but a third-party component's custom direct event would bubble (harmless in practice).
  * Swap it for per-component ViewConfig metadata if that ever matters.
  */
-/**
- * The scroll events that mean a finger is dragging the list rather than tapping something in it.
- *
- * `topScrollBeginDrag` is the precise one; `topScroll` is here because a scroll view configured
- * without drag events still reports movement, and a press surviving that is the bug either way.
- */
-const SCROLL_CANCELS_PRESS = new Set(['topScroll', 'topScrollBeginDrag']);
-const DIRECT_EVENTS = new Set([
+export const DIRECT_EVENTS = new Set([
     'topScroll',
     'topScrollBeginDrag',
     'topScrollEndDrag',
@@ -108,9 +136,11 @@ const DIRECT_EVENTS = new Set([
  */
 export class SyntheticEvent {
     nativeEvent;
+    target;
     stopped = false;
-    constructor(nativeEvent) {
+    constructor(nativeEvent, target = null) {
         this.nativeEvent = nativeEvent;
+        this.target = target;
     }
     stopPropagation() {
         this.stopped = true;
@@ -256,6 +286,11 @@ export const ANDROID_VIEW_NAMES = {
     'safe-area-view': 'View',
     'input-accessory-view': 'View',
 };
+/**
+ * iOS's names for the elements Android names differently, so reporting iOS after Android puts
+ * them back.
+ */
+const IOS_VIEW_NAMES = Object.fromEntries(Object.keys(ANDROID_VIEW_NAMES).map((element) => [element, VIEW_NAMES[element]]));
 /**
  * The platform the host reported at startup. Defaults to iOS, which is what the view-name table
  * above assumes too.
@@ -274,11 +309,9 @@ export function nativePlatform() {
  */
 export function registerPlatformComponents(platform) {
     platformOS = platform;
-    if (platform !== 'android')
-        return;
-    for (const [element, viewName] of Object.entries(ANDROID_VIEW_NAMES)) {
+    const names = platform === 'android' ? ANDROID_VIEW_NAMES : IOS_VIEW_NAMES;
+    for (const [element, viewName] of Object.entries(names))
         registerViewName(element, viewName);
-    }
 }
 /**
  * Props RN's JS wrappers apply before the caller's, per native view name.
@@ -318,6 +351,88 @@ const DEFAULT_VIEW = 'View';
 /** A top-level text, the one view that aligns its lines. A nested text is a `VirtualText`. */
 const PARAGRAPH = 'Paragraph';
 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
+ * `maxFontSizeMultiplier` where it is at least 1, and 1 without font scaling
+ * (`RCTEffectiveFontSizeMultiplierFromTextAttributes`).
+ */
+function textScale(props, fontScale = 1) {
+    if (props['allowFontScaling'] === false)
+        return 1;
+    const cap = props['maxFontSizeMultiplier'];
+    return typeof cap === 'number' && cap >= 1 ? Math.min(fontScale, cap) : fontScale;
+}
+/**
+ * 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.
+ *
+ * Where a `height` in points sizes the field, the line height has nothing left to do, and is left
+ * out on both platforms: on Android, `EditText` centres a line box taller than the font's own
+ * about 1.7pt high of centre in a 44pt field, and centres the font's own exactly. A percentage
+ * height sizes the field only where its parent's height is definite, which is known at layout
+ * alone, so such a field is left as it was. Elsewhere Android sizes the field by the line height
+ * and centres the text in it itself, and keeps it.
+ *
+ * On iOS, React Native's field sets `lineHeight` as the paragraph's minimum and maximum line
+ * height and, unlike a paragraph (`RCTApplyBaselineOffset`), never offsets the baseline, so the
+ * glyphs sit at the bottom of a line box taller than the font. One line has nothing to space, so
+ * the line height is left out. What it does in Chrome, and on Android, is set the field's height:
+ * line height, padding and border. That is kept as a `minHeight`, the larger of it and the field's
+ * own, within its `maxHeight`: the whole sum for a border-box field, Yoga's default, and the line
+ * 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) {
+    const lineHeight = props['lineHeight'];
+    if (!TEXT_INPUTS.has(viewName) || typeof lineHeight !== 'number')
+        return;
+    if (props['multiline'] === true)
+        return;
+    const height = props['height'];
+    if (typeof height === 'number') {
+        delete props['lineHeight'];
+        return;
+    }
+    // A percentage is a fixed height only where the parent's is definite, known at layout alone.
+    if (isSet(height) && height !== 'auto')
+        return;
+    // Android sizes the field by its line height, and centres the text in it, itself.
+    if (viewName !== 'TextInput')
+        return;
+    const edge = (side, logical) => [
+        props[`padding${side}`] ??
+            props[`paddingBlock${logical}`] ??
+            props['paddingBlock'] ??
+            props['paddingVertical'] ??
+            props['padding'] ??
+            0,
+        props[`border${side}Width`] ?? props['borderWidth'] ?? 0,
+    ];
+    const line = lineHeight * textScale(props, fontScale);
+    const box = [line, ...edge('Top', 'Start'), ...edge('Bottom', 'End')];
+    const own = props['minHeight'] ?? 0;
+    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);
+    props['minHeight'] = Math.max(own, Math.min(content, max));
+}
+/**
+ * Start a multiline Android text field's text at the top, as iOS and a `<textarea>` do.
+ *
+ * React Native maps an unset `textAlignVertical` to `Gravity.NO_GRAVITY`, which `ReactEditText`
+ * reads as the `EditText`'s own gravity, `center_vertical`. One the app set, through the input or
+ * a CSS `vertical-align`, stays.
+ */
+function alignMultiline(viewName, props) {
+    if (viewName !== 'AndroidTextInput' || props['multiline'] !== true)
+        return;
+    props['textAlignVertical'] ??= 'top';
+}
 /**
  * Resolve a paragraph's `text-align` against its direction, as CSS does.
  *
@@ -361,13 +476,45 @@ const MODAL_HOST = 'ModalHostView';
  * and skipping it is not cosmetic: `RNSScreenStackHeaderConfig` without its `position: absolute`
  * joins the screen's flex layout and pushes every page down by the height of the header.
  */
-export function registerViewName(elementName, viewName, defaultProps) {
+export function registerViewName(elementName, viewName, defaultProps, options) {
     VIEW_NAMES[elementName] = viewName;
-    if (!defaultProps)
-        return;
     for (const name of typeof viewName === 'string' ? [viewName] : [viewName.ios, viewName.android]) {
-        DEFAULT_PROPS[name] = defaultProps;
+        if (defaultProps)
+            DEFAULT_PROPS[name] = defaultProps;
+        if (options?.textContent)
+            TEXT_CONTENT_PROPS[name] = options.textContent;
+    }
+}
+/** The prop each view that takes its text content as a prop reads it from. See `ViewNameOptions`. */
+const TEXT_CONTENT_PROPS = {};
+/** Whether `node` takes its text content as a prop rather than as text children. */
+function takesTextAsProp(node) {
+    return node.kind === 'element' && TEXT_CONTENT_PROPS[viewNameOf(node)] !== undefined;
+}
+/** Sets a view's text prop from its content, unless the prop is set explicitly. */
+function withTextContent(node, viewName, props) {
+    const prop = TEXT_CONTENT_PROPS[viewName];
+    if (!prop || node.props[prop] !== undefined)
+        return;
+    const text = textContent(node);
+    if (text)
+        props[prop] = text;
+}
+/**
+ * The text written inside a view that takes it as a prop: every run joined, with the whitespace at
+ * the two ends dropped as a paragraph drops it, and kept inside. A nested view is drawn after the
+ * text, as SwiftUI's `Text` through `@expo/ui` draws a child `Text`, so the space before it stays.
+ */
+function textContent(node) {
+    let text = '';
+    let nested = false;
+    for (const child of node.children) {
+        if (child.kind === 'text')
+            text += child.text;
+        else if (child.kind === 'element')
+            nested = true;
     }
+    return nested ? text.trimStart() : text.trim();
 }
 /** An element's registered view name, for the platform the host reported. */
 function registeredViewName(elementName) {
@@ -949,15 +1096,19 @@ export class Engine {
      * for them. Only those in the tree: see `releaseDetached`.
      */
     hoisted = new Set();
-    /** Whether a child list has lost a member since the last commit. See `releaseDetached`. */
-    removedSinceCommit = false;
+    /** The nodes taken out of a child list since the last commit. See `releaseDetached`. */
+    removedSinceCommit = new Set();
     /**
-     * `@keyframes` by name, across every sheet seen so far. One registry rather than one per sheet,
+     * `@keyframes` by name, across every sheet registered. One registry rather than one per sheet,
      * because that is the scope CSS gives them: a name defined in a global stylesheet is usable
      * from a component's. The cost is that two components defining the same name collide, last one
      * in wins, exactly as two stylesheets in a document would.
      */
     keyframes = new Map();
+    /** Every sheet registered, in the order a document would hold them. See `sheetReplaced`. */
+    sheetOrder = [];
+    /** The `@keyframes` each playing animation was started from. See `startPlaying`. */
+    playedFrames = new WeakMap();
     /** Element names already reported as unclaimed, so a list of a thousand rows reports once. */
     reported = new Set();
     processColor;
@@ -973,12 +1124,15 @@ export class Engine {
         const conditions = options.conditions ?? { width: 0, height: 0, colorScheme: 'light' };
         this.styles = new StyleResolver(options.globalStyles ?? null, conditions);
         this.viewportSize = { width: conditions.width, height: conditions.height };
+        this.fontScale = conditions.fontScale;
         if (options.tokens)
             this.styles.setRootTokens(options.tokens);
         this.structuralSheets = options.globalStyles?.structural === true;
         this.dev = options.dev ?? globalThis.__DEV__ === true;
-        if (this.dev)
+        if (this.dev) {
             this.styles.onUndefinedToken = (name, props) => this.reportUndefinedToken(name, props);
+            this.styles.onUnreadDisplay = (name, value) => this.reportUnreadDisplay(name, value);
+        }
         this.now = options.now ?? (() => globalThis.performance?.now?.() ?? Date.now());
         this.onDirty = options.onDirty;
         this.onError = options.onError;
@@ -1050,6 +1204,35 @@ export class Engine {
      * a caller owns the properties it names and nothing else. Each owner writes all of its own at
      * once - four insets together, never one - so nothing is left over from a previous rotation.
      */
+    /**
+     * Match `sheet` against every node from now on, after the global sheet the engine was made
+     * with, and restyle everything; false, and nothing done, when it already is. How a platform
+     * applies a component whose CSS is not scoped, such as Angular's `ViewEncapsulation.None`.
+     * `replacing` is a sheet added before that this one takes the place of, after a hot swap.
+     */
+    addGlobalSheet(sheet, replacing) {
+        if (!this.styles.addGlobalSheet(sheet, replacing))
+            return false;
+        if (replacing)
+            this.sheetReplaced(replacing, sheet);
+        else
+            this.registerSheet(sheet);
+        if (sheet.structural)
+            this.structuralSheets = true;
+        this.markPath(this.root);
+        return true;
+    }
+    /**
+     * Stop matching a sheet `addGlobalSheet` added, and restyle everything; false, and nothing
+     * done, when it is not one. A hot swap that leaves a None component no rules, or makes it scoped.
+     */
+    removeGlobalSheet(sheet) {
+        if (!this.styles.removeGlobalSheet(sheet))
+            return false;
+        this.sheetReplaced(sheet, null);
+        this.markPath(this.root);
+        return true;
+    }
     updateTokens(next) {
         this.styles.setRootTokens({ ...this.styles.rootTokens, ...next });
         this.root.subtreeDirty = true;
@@ -1189,13 +1372,33 @@ export class Engine {
         this.markProps(node, false);
         this.commit();
     }
+    /**
+     * A node's component rules are its creating sheet's, so this matches it against `like`'s, or
+     * against the one it was created with once `like` is null.
+     */
+    adoptScope(node, like) {
+        if (like && !this.ownSheets.has(node))
+            this.ownSheets.set(node, node.sheet);
+        const sheet = like ? like.sheet : this.ownSheets.get(node);
+        if (sheet === undefined || node.sheet === sheet)
+            return;
+        node.sheet = sheet;
+        if (sheet?.structural)
+            this.structuralSheets = true;
+        this.markProps(node);
+    }
+    /** The sheet each node given another's scope was created with. */
+    ownSheets = new WeakMap();
     /** The window's size, from the conditions media queries use. Zero until the platform says. */
     get viewport() {
         return this.viewportSize;
     }
     viewportSize;
+    /** The system text size, from the conditions. See `Conditions.fontScale`. */
+    fontScale;
     updateConditions(next) {
         this.viewportSize = { width: next.width, height: next.height };
+        this.fontScale = next.fontScale;
         this.styles.setConditions(next);
         this.root.subtreeDirty = true;
         // Committed here rather than left to the next change-detection pass, because there may not
@@ -1220,6 +1423,26 @@ export class Engine {
         node.classes?.delete(name);
         this.markProps(node);
     }
+    /**
+     * The sheet of the component `node` hosts, whose `:host` rules it matches. Set again when a hot
+     * swap replaces the component's sheet, which recreates the views inside but not the host, so the
+     * host is styled afresh here.
+     */
+    setHostSheet(node, sheet) {
+        if (node.hostSheet === sheet)
+            return;
+        node.hostSheet = sheet;
+        this.markProps(node);
+    }
+    /**
+     * Style for `node` that any matched rule or inline style overrides, as a browser's own default
+     * for an element is. `mount` gives the root component's host the surface's height this way, as
+     * the web's mount point has, unless the app's `:host` sizes it otherwise.
+     */
+    setDefaultStyle(node, style) {
+        node.defaultStyle = style;
+        this.markProps(node);
+    }
     /** `class="a b"` from a template. Replaces the set rather than adding to it. */
     setClasses(node, value) {
         const names = value.split(/\s+/).filter(Boolean);
@@ -1242,6 +1465,7 @@ export class Engine {
         if (child.dormantHoists)
             this.wakeHoists(child);
         this.markStructure(parent);
+        this.markTextContent(parent, child);
     }
     insertBefore(parent, child, ref) {
         this.detach(child);
@@ -1254,6 +1478,7 @@ export class Engine {
         if (child.dormantHoists)
             this.wakeHoists(child);
         this.markStructure(parent);
+        this.markTextContent(parent, child);
     }
     removeChild(parent, child) {
         const target = parent ?? child.parent;
@@ -1264,8 +1489,17 @@ export class Engine {
             return;
         target.children.splice(at, 1);
         child.parent = null;
-        this.removedSinceCommit = true;
+        this.removedSinceCommit.add(child);
         this.markStructure(target);
+        this.markTextContent(target, child);
+    }
+    /**
+     * A child came or went under a view that takes its text as a prop: that prop changed. A span
+     * changes it too, by keeping or dropping the space before it.
+     */
+    markTextContent(parent, child) {
+        if (child.kind !== 'anchor' && takesTextAsProp(parent))
+            this.markProps(parent);
     }
     /** A subtree that went out of the tree is back in: its hoisted nodes commit again. */
     wakeHoists(node) {
@@ -1288,12 +1522,17 @@ export class Engine {
      * whole. So a hoisted node moves to the root of the subtree it left with, which is garbage along
      * with it if the subtree never returns, and is handed back when it does. An animation on a node
      * out of the tree stops rather than running a frame loop for something nobody can see, and
-     * starts again if the node returns.
+     * starts again if the node returns. And a node out of the tree when the commit runs forgets its
+     * committed views, as a withheld modal does: the commit unmounts them, Fabric never re-enables an
+     * unmounted view's events (`EventEmitter::setEnabled`), and committed again they would ignore
+     * every touch. It comes back created afresh, as React creates an element it mounts again. One
+     * put back before the commit never left, and keeps its views.
      *
-     * Once per commit, and only after a removal: the walks are the depth of a handful of nodes.
+     * Once per commit, and only after a removal: the walks are the depth of a handful of nodes, and
+     * forgetting walks each subtree that left once.
      */
     releaseDetached() {
-        this.removedSinceCommit = false;
+        this.forgetDetached();
         for (const node of this.hoisted) {
             const top = this.topOf(node);
             if (top === this.root)
@@ -1319,6 +1558,14 @@ export class Engine {
         if (this.focusedNode && this.topOf(this.focusedNode) !== this.root)
             this.focusedNode = null;
     }
+    /** Forget the committed views of each node removed since the last commit that is still out. */
+    forgetDetached() {
+        for (const node of this.removedSinceCommit) {
+            if (node.committed && this.topOf(node) !== this.root)
+                this.forgetCommitted(node);
+        }
+        this.removedSinceCommit.clear();
+    }
     /** The root of the tree a node is in: the engine's root while it is attached. */
     topOf(node) {
         let top = node;
@@ -1421,6 +1668,8 @@ export class Engine {
     setText(node, value) {
         node.text = value;
         this.markProps(node);
+        if (node.parent)
+            this.markTextContent(node.parent, node);
     }
     setEventListener(node, topLevelType, fn) {
         this.registerEventHandler();
@@ -1494,7 +1743,7 @@ export class Engine {
      * optimisation.
      */
     commit() {
-        if (this.removedSinceCommit)
+        if (this.removedSinceCommit.size)
             this.releaseDetached();
         // The root is never reconciled itself, so it has no `committed` record and `isClean` would
         // always say dirty. Ask the flags directly, or every change-detection pass ends in a
@@ -1511,6 +1760,8 @@ export class Engine {
         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));
         }
         this.clearFlags(this.root);
@@ -1599,12 +1850,14 @@ export class Engine {
     }
     /** Anchors take part in sibling ordering but never reach Fabric. */
     visibleChildren(node) {
-        return node.children.filter((child) => child.kind !== 'anchor');
+        // A view that takes its text as a prop has no text children to commit. See `ViewNameOptions`.
+        const textAsProp = takesTextAsProp(node);
+        return node.children.filter((child) => child.kind !== 'anchor' && !(textAsProp && child.kind === 'text'));
     }
     /**
-     * Everything a node renders with, unprocessed. Precedence, weakest first: native defaults,
-     * matched CSS, explicit props, inline style, a component's `styleOverride`. Inline wins over CSS for the same reason it does
-     * on the web.
+     * Everything a node renders with, unprocessed. Precedence, weakest first: native defaults, the
+     * node's `defaultStyle`, matched CSS, explicit props, inline style, a component's
+     * `styleOverride`. Inline wins over CSS for the same reason it does on the web.
      *
      * Raw, because this is what the next commit diffs against. Colours and asset ids are converted
      * on the way out instead (`processed`), and only for the keys that changed: the converters
@@ -1618,7 +1871,7 @@ export class Engine {
             this.checkProps(node);
         this.registerSheet(node.sheet);
         this.registerSheet(node.hostSheet);
-        const props = { ...DEFAULT_PROPS[viewName] };
+        const props = { ...DEFAULT_PROPS[viewName], ...node.defaultStyle };
         Object.assign(props, this.styles.resolve(node, this.styleEpoch).style);
         for (const key of Object.keys(node.props)) {
             // No native prop has a hyphen. `data-*` and `aria-*` attributes stay on the node for
@@ -1630,6 +1883,7 @@ export class Engine {
                 props[key] = node.props[key];
             }
         }
+        withTextContent(node, viewName, props);
         const style = flattenStyle(node.props['style'], props);
         const intrinsic = node.props[INTRINSIC_SIZE];
         if (intrinsic)
@@ -1640,7 +1894,10 @@ export class Engine {
             alignText(style, this.directionOf(node, style));
         if (this.fontsRefreshed)
             this.capForFonts(node, style);
-        return composeTransform(node, this.animated(node, this.transitioned(node, style)));
+        alignMultiline(viewName, style);
+        const merged = composeTransform(node, this.animated(node, this.transitioned(node, style)));
+        centreSingleLine(viewName, merged, this.fontScale);
+        return merged;
     }
     /**
      * The text size cap that lays a paragraph or text input out again once a face it names has
@@ -1698,12 +1955,59 @@ export class Engine {
         if (!sheet || this.knownSheets.has(sheet))
             return;
         this.knownSheets.add(sheet);
+        this.sheetOrder.push(sheet);
         for (const name of Object.keys(sheet.keyframes ?? {})) {
             this.keyframes.set(name, sheet.keyframes[name]);
         }
         if (sheet.fonts && this.fontFaces.add(sheet.fonts))
             this.facesAdded = true;
     }
+    /**
+     * A hot swap edited a component's sheet into `next`, or took it away with null: `sheet`'s
+     * `@keyframes` go, and `next`'s take its place among the others, as an edited stylesheet keeps
+     * its place in a document. A name another sheet also defines falls back to that one. Every
+     * animation re-resolves the name it plays, so one whose keyframes went stops, as in a browser.
+     * A `sheet` already gone, such as a global sheet removed, leaves `next` registered last.
+     */
+    sheetReplaced(sheet, next) {
+        if (sheet === next && this.knownSheets.has(sheet))
+            return;
+        const at = this.sheetOrder.indexOf(sheet);
+        if (at === -1) {
+            this.registerSheet(next);
+            return;
+        }
+        this.knownSheets.delete(sheet);
+        if (next && !this.knownSheets.has(next)) {
+            this.knownSheets.add(next);
+            this.sheetOrder[at] = next;
+            if (next.fonts && this.fontFaces.add(next.fonts))
+                this.facesAdded = true;
+        }
+        else {
+            this.sheetOrder.splice(at, 1);
+        }
+        if (sheet.keyframes || next?.keyframes)
+            this.reindexKeyframes();
+    }
+    /** Every sheet's `@keyframes` again, in order, and every animation told to look them up. */
+    reindexKeyframes() {
+        this.keyframes.clear();
+        for (const sheet of this.sheetOrder) {
+            for (const name of Object.keys(sheet.keyframes ?? {})) {
+                this.keyframes.set(name, sheet.keyframes[name]);
+            }
+        }
+        this.markAnimated(this.root);
+    }
+    /** Mark every node under `node` with an animation, so it looks its keyframes up again. */
+    markAnimated(node) {
+        for (const child of node.children) {
+            if (child.playing || child.scrolled)
+                this.markProps(child, false);
+            this.markAnimated(child);
+        }
+    }
     /** Every `@font-face` seen, global as on the web: a face declared in one sheet serves all. */
     fontFaces = new FontFaces();
     /** Whether a sheet first used in this commit declared a face. See `rematchFonts`. */
@@ -1747,6 +2051,10 @@ export class Engine {
         }
         const frames = this.keyframes.get(spec.name);
         if (!frames) {
+            // Keyframes a hot swap deleted, from under an animation that was playing them.
+            node.playing = undefined;
+            this.playing.delete(node);
+            this.stopScrolled(node);
             if (this.dev)
                 this.reportMissingKeyframes(spec.name);
             return props;
@@ -1759,10 +2067,12 @@ export class Engine {
     /** Start the clock on an animation, unless the node is already playing this one. */
     startPlaying(node, spec, frames, props) {
         const current = node.playing;
+        const inherited = this.inheritedColour(node, frames);
         if (!current || !sameAnimation(current.spec, spec)) {
             const started = {
                 spec,
-                tracks: tracksOf(frames, props),
+                tracks: tracksOf(frames, props, inherited),
+                inherited,
                 start: this.now(),
                 values: {},
                 done: false,
@@ -1775,6 +2085,7 @@ export class Engine {
             // resting style: `animation-fill-mode: backwards` behaviour, always. It is what an entrance
             // wants, and the alternative is the flash again.
             started.values = sample(started, this.now()).values;
+            this.playedFrames.set(started, frames);
             node.playing = started;
             if (spec.paused)
                 started.pausedAt = this.now();
@@ -1783,7 +2094,34 @@ export class Engine {
             this.emitTransition(node, 'topAnimationstart', spec.name);
             return;
         }
-        this.playOrPause(node, current, spec);
+        if (this.playedFrames.get(current) !== frames || inherited !== current.inherited) {
+            this.reframe(node, current, frames, props, inherited);
+        }
+        this.playOrPause(node, node.playing, spec);
+    }
+    /**
+     * The colour `node` inherits, for frames that set `color: currentColor`, which is that colour
+     * wherever the animation has got to, as in CSS. Undefined for frames that do not.
+     */
+    inheritedColour(node, frames) {
+        if (!readsInheritedColour(frames))
+            return undefined;
+        const parent = node.parent && this.styles.resolve(node.parent, this.styleEpoch);
+        return parent?.inherited['color'] ?? 'black';
+    }
+    /**
+     * The name an animation plays now has other frames: a hot swap edited them, or took away the
+     * sheet whose copy won. Or the colour its `color: currentColor` stands for has changed. It
+     * carries on along the new tracks, on its own clock, as a browser does, paused or not.
+     */
+    reframe(node, current, frames, props, inherited) {
+        const tracks = tracksOf(frames, props, inherited);
+        const reframed = { ...current, tracks, inherited };
+        const { values, finished } = sample(reframed, current.pausedAt ?? this.now());
+        const holds = current.spec.fill === 'forwards' || current.spec.fill === 'both';
+        reframed.values = finished && !holds ? {} : values;
+        this.playedFrames.set(reframed, frames);
+        node.playing = reframed;
     }
     /**
      * `animation-play-state` changed on an animation already playing: pausing holds the frame it
@@ -1817,15 +2155,16 @@ export class Engine {
      */
     scrollAnimated(node, spec, frames, props) {
         const current = node.scrolled;
-        if (current && sameAnimation(current.spec, spec))
-            return Object.assign(props, current.first);
-        if (current)
-            this.stopScrolled(node);
+        const inherited = this.inheritedColour(node, frames);
+        if (current?.frames === frames && sameAnimation(current.spec, spec)) {
+            return Object.assign(props, this.rescrolled(node, current, frames, props, inherited));
+        }
+        this.stopScrolled(node);
         if (node.playing) {
             node.playing = undefined;
             this.playing.delete(node);
         }
-        const tracks = tracksOf(frames, props);
+        const tracks = tracksOf(frames, props, inherited);
         const source = this.scrollSourceOf(node);
         const extent = source ? (this.scrollExtents.get(source)?.[spec.timeline] ?? null) : null;
         const range = rangeOf(spec, extent);
@@ -1838,9 +2177,31 @@ export class Engine {
         // view for the animation to move. Committed with the first frame, so it stays put.
         if (drive)
             first['collapsable'] = false;
-        node.scrolled = { spec, tracks, resting, first, source, drive };
+        node.scrolled = { spec, frames, tracks, resting, first, source, drive, inherited };
         return Object.assign(props, first);
     }
+    /**
+     * The first frame of a scroll-driven animation already playing. When the colour its
+     * `color: currentColor` stands for has changed, that frame's colour is taken from tracks built
+     * again. Native drives opacity and transforms only, so a colour holds its first frame, and
+     * nothing native animates is touched.
+     */
+    rescrolled(node, current, frames, props, inherited) {
+        if (inherited === current.inherited)
+            return current.first;
+        // The element's own colour, which a track with no first frame starts at, may be the one it
+        // inherits, so it is read again too.
+        const resting = { ...current.resting, color: props['color'] };
+        const tracks = tracksOf(frames, resting, inherited);
+        const extent = current.source ? this.scrollExtents.get(current.source) : undefined;
+        const range = rangeOf(current.spec, extent?.[current.spec.timeline] ?? null);
+        const first = { ...current.first };
+        const colour = firstFrame(tracks, current.spec, range)['color'];
+        if ('color' in first)
+            first['color'] = colour;
+        node.scrolled = { ...current, tracks, resting, first, inherited };
+        return first;
+    }
     /** Hand a scroll-driven animation's channels to native, fed by `source`'s scroll events. */
     driveScrolled(node, source, spec, tracks, resting, range) {
         if (!this.scrollDriver)
@@ -2114,9 +2475,9 @@ export class Engine {
         if (this.isClean(node) && !styleChanged)
             return node.committed.handle;
         node.styleCommitted = style;
-        const childHandles = this.reconcileChildren(node, style);
-        const previous = node.committed;
         const viewName = viewNameOf(node);
+        const childHandles = this.reconcileChildren(node, viewName, style);
+        const previous = node.committed;
         this.notePresented(node, viewName);
         if (!previous)
             return this.create(node, viewName, this.mergeProps(node, viewName), childHandles);
@@ -2168,19 +2529,30 @@ export class Engine {
      * handle as it stands, so it is answered here without the call, the resolve and the walk -
      * which, per child, was most of what a one-row update cost.
      */
-    reconcileChildren(node, style) {
+    reconcileChildren(node, viewName, style) {
         const context = style?.context;
         if (HOIST_TARGETS.has(node.name))
             return this.reconcileHoistTarget(node, context);
+        // A view that takes its text as a prop has no text children to commit. See `ViewNameOptions`.
+        const textAsProp = TEXT_CONTENT_PROPS[viewName] !== undefined;
         const handles = [];
         for (const child of node.children) {
             if (child.kind === 'anchor' || this.committedElsewhere(child) || this.withheld(child)) {
                 continue;
             }
+            if (textAsProp && child.kind === 'text')
+                continue;
             handles.push(this.reconcileUnder(node, child, context));
         }
         return handles;
     }
+    /** Remember an iOS modal host committed as showing, so hiding it waits for `topDismiss`. */
+    notePresented(node, viewName) {
+        if (viewName !== MODAL_HOST || node.props['visible'] === false)
+            return;
+        if (platformOS === 'ios')
+            node.presented = true;
+    }
     /**
      * Whether a child is left out of its parent's commit: a modal host whose `visible` is false.
      *
@@ -2190,18 +2562,19 @@ export class Engine {
      * committed, with `visible` false, until native reports `topDismiss`: Modal.js keeps it that
      * long so the dismissal animates and `(dismiss)` fires. Android drops it at once, as Modal.js
      * does there.
+     *
+     * A withheld host is unmounted, and Fabric drops an unmounted view's event target for good
+     * (`EventEmitter::setEnabled`), so its committed handles are forgotten and it is created afresh
+     * when it is shown again, as Modal.js creates it afresh. Committed again, it ignores every touch.
      */
-    /** Remember an iOS modal host committed as showing, so hiding it waits for `topDismiss`. */
-    notePresented(node, viewName) {
-        if (viewName !== MODAL_HOST || node.props['visible'] === false)
-            return;
-        if (platformOS === 'ios')
-            node.presented = true;
-    }
     withheld(child) {
         if (child.props['visible'] !== false || child.presented)
             return false;
-        return viewNameOf(child) === MODAL_HOST;
+        if (viewNameOf(child) !== MODAL_HOST)
+            return false;
+        if (child.committed)
+            this.forgetCommitted(child);
+        return true;
     }
     /**
      * `reconcileChildren` for a node other nodes hoist into: its own children, each followed by
@@ -2252,11 +2625,15 @@ export class Engine {
         child.committedUnder = parent;
         return handle;
     }
-    /** Let a node and everything under it be created again at the next commit. */
+    /**
+     * Let a node and everything under it be created again at the next commit. The views it keeps
+     * for hoisted names go too: they are children of the native view it is losing.
+     */
     forgetCommitted(node) {
         node.committed = null;
         node.committedUnder = null;
         node.styleCommitted = null;
+        node.kept = undefined;
         for (const child of node.children)
             if (child.committed)
                 this.forgetCommitted(child);
@@ -2406,6 +2783,20 @@ export class Engine {
             ` scope defines, so the declaration is dropped, as a browser drops it. Define ${name} on` +
             ` :root or an ancestor, or give the var() a fallback.`);
     }
+    unreadDisplays = new Set();
+    /**
+     * Said once per token and value: the compiler refuses `display: grid` written out, but a token
+     * is only known here, and without this the view lays out as flex with nothing said.
+     */
+    reportUnreadDisplay(name, value) {
+        const report = `${name} ${value}`;
+        if (this.unreadDisplays.has(report))
+            return;
+        this.unreadDisplays.add(report);
+        console.warn(`[angular-native] display: var(${name}) is ${value ?? 'no keyword'}, which is no display` +
+            ` native has, so display is unset and the view lays out as flex. Native has flex, none` +
+            ` and contents, and reads block, inline, inline-block, flow-root and inline-flex as flex.`);
+    }
     checkProps(node) {
         if (!node.claimed || !PRIMITIVE_NAMES.has(node.name))
             return;
@@ -2767,7 +3158,7 @@ export class Engine {
         // Listeners get RN's documented shape, `{nativeEvent}`. Fabric hands us the payload bare;
         // React wraps it in a synthetic event and every RN API is written against `event.nativeEvent`,
         // so handlers ported from RN would silently read undefined otherwise.
-        const event = new SyntheticEvent(nativeEvent);
+        const event = new SyntheticEvent(nativeEvent, target);
         try {
             if (topLevelType === 'topDismiss' && target)
                 this.dismissed(target);