@ng-native/fabric 0.2.0 → 0.4.0

package/dist/engine.js

@@ -7,8 +7,10 @@
  * because a persistent parent holds references to specific child handles. That bubble is
  * 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 { boundDeclaration, inlineInherited, setsInherited, StyleResolver, } from "./css.js";
+import { applyAria } from "./aria-props.js";
+import { STYLED_ELEMENTS } from "./element-styles.js";
+import { animationEvent, bezier, interpolate, readsInheritedColour, sample, step, tracksOf, } from "./transition.js";
 import { isFormsInput } from "./forms-inputs.js";
 import { transformList } from "./inline-transform.js";
 import { tokenFromValue } from "./inline-token.js";
@@ -22,14 +24,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 +82,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 +138,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;
@@ -210,6 +242,34 @@ const VIEW_NAMES = {
  * `@ng-native/expo`, and warning about it would be noise.
  */
 const PRIMITIVE_NAMES = new Set(Object.keys(VIEW_NAMES));
+/**
+ * HTML's text elements, which a template can write as it would for a browser.
+ *
+ * Each is text when it holds only text and other text elements, and a view when it holds anything
+ * else: a box inside a paragraph has no layout, so `<span>Inbox<view class="dot" /></span>` is a
+ * view with its text in a paragraph of its own. Decided as the element is committed, by
+ * `viewNameOf`. They have no component to import, so they are not `PRIMITIVE_NAMES`.
+ */
+const TEXT_ELEMENTS = new Set([
+    ...['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'label', 'strong', 'b', 'em', 'i'],
+    ...['u', 's', 'small', 'code', 'mark', 'abbr', 'cite', 'time'],
+]);
+/** HTML's layout elements, each a plain view, as a browser's are boxes with a name. */
+const LAYOUT_ELEMENTS = [
+    ...['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'],
+];
+for (const name of TEXT_ELEMENTS)
+    VIEW_NAMES[name] = 'Paragraph';
+for (const name of LAYOUT_ELEMENTS)
+    VIEW_NAMES[name] = 'View';
+/**
+ * What an HTML element has for its name alone, given to the node as it is made: a heading's role,
+ * which a binding can replace as it can any prop, and whether the engine has styles for it.
+ */
+const HTML_ELEMENTS = new Map([
+    ...['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map((name) => [name, { role: 'header' }]),
+    ...[...STYLED_ELEMENTS].map((name) => [name, { styled: true }]),
+]);
 /**
  * The props each host primitive's native view is sent, by element name, as the components
  * declare them: every input the element's component has, and the props it writes that no input
@@ -244,6 +304,14 @@ export function claimHost(node) {
 export function markComponentHost(node) {
     node.componentHost = true;
 }
+/**
+ * Say that a component's host is the native view its element name is registered as: a typed
+ * wrapper for the view, where a component of the app's own with the same selector is a plain view.
+ * Called from the component's constructor. See `ViewNameOptions.yieldsToComponents`.
+ */
+export function keepNativeView(node) {
+    node.nativeView = true;
+}
 /** `text-input` -> `TextInput`: how the components package names the class for an element. */
 const className = (element) => element.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCase());
 /** Names Android registers differently. */
@@ -256,6 +324,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 +347,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 +389,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 +514,61 @@ 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;
+    if (options?.yieldsToComponents)
+        YIELDING.add(elementName);
+    else
+        YIELDING.delete(elementName);
+    // A name the app registers is the app's: no longer decided by what the element holds.
+    TEXT_ELEMENTS.delete(elementName);
     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 registered names that give way to a component's own host. See `ViewNameOptions`. */
+const YIELDING = new Set();
+/** 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 whitespace a paragraph drops at its ends is what CSS collapses: spaces, tabs and line
+ * breaks. A no-break space is text, as in a browser, so `&nbsp;` is how a value keeps a space at
+ * its end; `String.prototype.trim` would take that too.
+ */
+const trimStart = (text) => text.replace(/^[ \t\n\r\f]+/, '');
+const trimEnd = (text) => text.replace(/[ \t\n\r\f]+$/, '');
+const trimEnds = (text) => trimEnd(trimStart(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 ? trimStart(text) : trimEnd(trimStart(text));
 }
 /** An element's registered view name, for the platform the host reported. */
 function registeredViewName(elementName) {
@@ -381,6 +582,17 @@ function registeredViewName(elementName) {
  * a paragraph, and a text input on either platform. See `Engine.remeasureText`.
  */
 const MEASURED_VIEWS = new Set(['Paragraph', 'TextInput', 'AndroidTextInput']);
+/** Leave a family that is still loading out of `style`, remembering it. See `loadingFamilies`. */
+function holdLoadingFamily(node, style) {
+    const family = style['fontFamily'];
+    if (typeof family === 'string' && loadingFamilies.has(family)) {
+        delete style['fontFamily'];
+        node.heldFamily = family;
+    }
+    else if (node.heldFamily !== undefined) {
+        node.heldFamily = undefined;
+    }
+}
 /** What each mounted app does when faces register. See `fontsRegistered`. */
 const fontListeners = new Set();
 /** Hear about faces registering with the platform, until the returned function is called. */
@@ -400,6 +612,45 @@ export function fontsRegistered(families) {
     for (const listener of [...fontListeners])
         listener(names);
 }
+/**
+ * Families a load has asked the platform for and not yet settled, by how many loads asked. Text
+ * naming one is laid out in the fallback without the name until it settles: native caches a
+ * text's measurement by its family name, so a fallback measurement under the face's name would
+ * outlast the face arriving.
+ */
+const loadingFamilies = new Map();
+/** Faces a load is about to ask the platform for. See `loadingFamilies`. */
+export function fontsLoading(families) {
+    for (const family of families)
+        loadingFamilies.set(family, (loadingFamilies.get(family) ?? 0) + 1);
+}
+/** What each mounted app does when a load settles. See `fontsSettled`. */
+const settleListeners = new Set();
+/** Hear about loads settling, until the returned function is called. */
+export function onFontsSettled(listener) {
+    settleListeners.add(listener);
+    return () => settleListeners.delete(listener);
+}
+/**
+ * Faces a load asked for and has finished with, registered or not, before `fontsRegistered`.
+ * Text held back for one that no load still asks for is laid out with the name again: see
+ * `Engine.fontsSettled`.
+ */
+export function fontsSettled(families) {
+    const settled = new Set();
+    for (const family of families) {
+        const left = (loadingFamilies.get(family) ?? 1) - 1;
+        if (left > 0)
+            loadingFamilies.set(family, left);
+        else {
+            loadingFamilies.delete(family);
+            settled.add(family);
+        }
+    }
+    if (settled.size)
+        for (const listener of [...settleListeners])
+            listener(settled);
+}
 /** Whether a paragraph, or a span in it, was committed asking for one of these families. */
 function namesFamily(node, families) {
     const family = node.committed?.props['fontFamily'];
@@ -470,12 +721,13 @@ const STAND_INS = {};
  */
 function paragraphText(node) {
     let root = node.parent;
-    if (root?.name !== 'text')
-        return node.text;
+    // Text written straight into a view is a paragraph of its own, and all of it.
+    if (root === null || !isTextElement(root))
+        return node.box ? trimEnds(node.text) : node.text;
     // The commonest paragraph by far: one run and nothing else, so it is both the first and last.
-    if (root.children.length === 1 && root.parent?.name !== 'text')
-        return node.text.trim();
-    while (root.parent?.name === 'text')
+    if (root.children.length === 1 && !isTextElement(root.parent))
+        return trimEnds(node.text);
+    while (isTextElement(root.parent))
         root = root.parent;
     const runs = [];
     const collect = (from) => {
@@ -484,18 +736,39 @@ function paragraphText(node) {
                 if (child.text)
                     runs.push(child);
             }
-            else if (child.name === 'text')
+            else if (isTextElement(child))
                 collect(child);
         }
     };
     collect(root);
     let text = node.text;
     if (runs[0] === node)
-        text = text.replace(/^\s+/, '');
+        text = trimStart(text);
     if (runs[runs.length - 1] === node)
-        text = text.replace(/\s+$/, '');
+        text = trimEnd(text);
     return text;
 }
+/**
+ * Whether an element is text: a `<text>`, or one of HTML's text elements that holds only text and
+ * other such elements. Worked out each time, from the tree as it is, so nothing can go stale.
+ */
+function isTextElement(node) {
+    if (node === null || node.kind !== 'element')
+        return false;
+    if (node.name === 'text')
+        return true;
+    // One lookup settles nearly every other element, which is a view.
+    if (registeredViewName(node.name) !== PARAGRAPH)
+        return false;
+    return !TEXT_ELEMENTS.has(node.name) || holdsOnlyText(node);
+}
+function holdsOnlyText(node) {
+    for (const child of node.children ?? []) {
+        if (child.kind === 'element' && !isTextElement(child))
+            return false;
+    }
+    return true;
+}
 /**
  * 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
@@ -511,9 +784,169 @@ export function viewNameOf(node) {
     // RN models nested text as a span inside a paragraph: `Paragraph > [RawText, Text > RawText]`.
     // Committing a nested `<text>` as another Paragraph gives a paragraph inside a paragraph,
     // which lays out as a separate block instead of flowing inline.
-    if (node.name === 'text' && node.parent?.name === 'text')
-        return VIRTUAL_TEXT;
-    return registeredViewName(node.name) ?? DEFAULT_VIEW;
+    // A component of the app's own under a name a view set registered: its host is a plain view.
+    if (node.componentHost && !node.nativeView && YIELDING.has(node.name))
+        return DEFAULT_VIEW;
+    const registered = registeredViewName(node.name);
+    // Nearly every element: a view of some kind, by its name alone.
+    if (registered !== PARAGRAPH)
+        return registered ?? DEFAULT_VIEW;
+    // One of HTML's text elements that holds something other than text: a view.
+    if (node.name !== 'text' && TEXT_ELEMENTS.has(node.name) && !holdsOnlyText(node)) {
+        return DEFAULT_VIEW;
+    }
+    return isTextElement(node.parent) ? VIRTUAL_TEXT : PARAGRAPH;
+}
+/**
+ * The props every native view reads as a boolean: the `bool` fields of React Native's
+ * `BaseViewProps`, `AccessibilityProps` and `HostPlatformViewProps`, by the names JavaScript sends.
+ *
+ * An attribute arrives as text. A component that declares the prop as an input turns it into a
+ * boolean itself, but an element nothing claims, such as a component's own host, holds what it
+ * was given, and Android refuses a string where it reads a boolean: `focusable="false"` is
+ * `java.lang.String cannot be cast to java.lang.Boolean` at the first commit. iOS ignores it.
+ *
+ * So the text is made a boolean as it is committed, `"false"` false and anything else true, as an
+ * attribute reads in HTML. The node keeps the text, which is what `[focusable="false"]` in a
+ * stylesheet matches against.
+ */
+const BOOLEAN_VIEW_PROPS = new Set([
+    'accessibilityElementsHidden',
+    'accessibilityIgnoresInvertColors',
+    'accessibilityRespondsToUserInteraction',
+    'accessibilityShowsLargeContentViewer',
+    'accessibilityViewIsModal',
+    'accessible',
+    'collapsable',
+    'collapsableChildren',
+    'focusable',
+    'hasTVPreferredFocus',
+    'needsOffscreenAlphaCompositing',
+    // The flags native reads to know an event has a listener, which are booleans as well.
+    'onAccessibilityAction',
+    'onAccessibilityEscape',
+    'onAccessibilityMagicTap',
+    'onAccessibilityTap',
+    'onLayout',
+    'removeClippedSubviews',
+    'renderToHardwareTextureAndroid',
+    'screenReaderFocusable',
+    'shouldRasterizeIOS',
+]);
+/**
+ * Whether `node` holds nothing `:empty` sees besides `moved`: so it was empty before `moved` came,
+ * or is now that it has gone. An anchor is a comment on the web, which `:empty` does not see.
+ */
+function wasOrIsEmptyWithout(node, moved) {
+    if (moved.kind === 'anchor')
+        return false;
+    for (const child of node.children) {
+        if (child !== moved && child.kind !== 'anchor')
+            return false;
+    }
+    return true;
+}
+/**
+ * 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.
+ */
+function writeOwnProps(own, props) {
+    let aria = false;
+    for (const key of Object.keys(own)) {
+        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);
+}
+/** A prop as it is committed: a boolean view prop held as text is the boolean the text says. */
+function committedProp(key, value) {
+    return typeof value === 'string' && BOOLEAN_VIEW_PROPS.has(key) ? value !== 'false' : value;
+}
+/**
+ * The `pointer-events` an element ends up with, in the order its props are merged: its inline
+ * style's, then its `pointerEvents` prop, then what the sheets resolve. The inline one is read for
+ * itself because an element no rule matches resolves to what it inherits, with its own inline
+ * value only in what it hands down.
+ */
+function pointerEventsOf(node, resolved) {
+    const inline = node.inlineInherits ? inlineInherited(node.props['style']) : null;
+    const own = inline?.['pointerEvents'];
+    // Merged over the prop, so its `inherit` is what the sheets and the parent settled, not the prop.
+    if (own === 'inherit')
+        return resolved['pointerEvents'];
+    return own ?? node.props['pointerEvents'] ?? resolved['pointerEvents'];
+}
+/**
+ * A node's `pointer-events` as native takes it, once its props and styles are merged.
+ *
+ * In CSS `none` is the element alone, and a descendant's `auto` takes touches again, which native
+ * calls `box-none`: what a `none` with something inside to open it is committed as. Native's own
+ * `none` is the whole subtree. It is what a `none` with nothing inside to open it stays, because
+ * Android's text and images take no `pointerEvents` of their own and only an ancestor's `none`
+ * keeps touches off them. It is also what the `pointerEvents` prop means, so a `none` that is the
+ * prop's is left as it is.
+ *
+ * An inline `inherit` is what the element has without it, which is `resolved`: what the sheets
+ * and its parent settled.
+ */
+function nativePointerEvents(node, style, resolved) {
+    let value = style['pointerEvents'];
+    if (value === undefined)
+        return;
+    if (value === 'inherit') {
+        value = resolved;
+        if (value === undefined)
+            delete style['pointerEvents'];
+        else
+            style['pointerEvents'] = value;
+    }
+    if (value === 'none' && node.touchWithin && node.props['pointerEvents'] !== 'none') {
+        style['pointerEvents'] = 'box-none';
+    }
+}
+/** Whether `node`, whose `pointer-events` is `value`, takes touches or holds something that does. */
+function takesTouches(node, value, prop) {
+    if (value === undefined)
+        return false;
+    // The prop's `none` is native's: the whole subtree, whatever is inside it.
+    if (value === 'none' && prop === 'none')
+        return false;
+    // CSS's `none` and native's `box-none` take no touches themselves: their children answer.
+    if (value === 'none' || value === 'box-none') {
+        return node.children.some((child) => child.touchWithin);
+    }
+    return true;
+}
+/**
+ * Records on `node` whether it, or something inside it, takes touches where it would inherit
+ * `none`. When that changes a `none` element's own answer, its props are marked to be committed
+ * again.
+ *
+ * Called as a node is reconciled, after its children, so theirs are already current: a child that
+ * was skipped as clean has nothing beneath it that changed, and a change beneath marks every
+ * ancestor to come back through here.
+ */
+function noteTouches(node, style) {
+    if (!style)
+        return;
+    // Nearly every node: no `pointer-events` in any sheet, style or prop, and nothing recorded.
+    const resolved = style.style['pointerEvents'];
+    const prop = node.props['pointerEvents'];
+    if (resolved === undefined && prop === undefined && !node.inlineInherits && !node.touchWithin) {
+        return;
+    }
+    const value = pointerEventsOf(node, style.style);
+    const within = takesTouches(node, value, prop);
+    if (within === !!node.touchWithin)
+        return;
+    node.touchWithin = within;
+    if (value === 'none')
+        node.propsDirty = true;
 }
 /** Whether `node` is `ancestor` or somewhere under it. */
 function isWithin(node, ancestor) {
@@ -616,6 +1049,10 @@ class RetainedNode {
     propsDirty = false;
     structureDirty = false;
     subtreeDirty = false;
+    touchWithin = undefined;
+    box = undefined;
+    anonymous = undefined;
+    styled = undefined;
     transitions;
     playing;
     scrolled;
@@ -749,8 +1186,9 @@ const IS_COLOR_PROP = /color(android)?$/i;
 const colorProps = new Map();
 function isColorProp(key) {
     let answer = colorProps.get(key);
-    if (answer === undefined)
-        colorProps.set(key, (answer = IS_COLOR_PROP.test(key)));
+    if (answer === undefined) {
+        colorProps.set(key, (answer = IS_COLOR_PROP.test(key) || BRUSH_PROPS.has(key)));
+    }
     return answer;
 }
 const ASSET_PROPS = new Set(['source', 'defaultSource', 'loadingIndicatorSource']);
@@ -763,7 +1201,30 @@ const ASSET_PROPS = new Set(['source', 'defaultSource', 'loadingIndicatorSource'
  * approximated, it is dropped.
  */
 const NESTED_COLOR_LIST_PROPS = new Set(['boxShadow']);
+/** The props of an SVG shape that take a brush, not a colour. */
+const BRUSH_PROPS = new Set(['fill', 'stroke']);
 /** Styles arrive as objects, arrays, nested arrays and nulls. Reduce to one object. */
+/**
+ * A bound transform is still the CSS string: see `inline-transform.ts`. One CSS cannot read
+ * leaves the transform the rules set, as a browser drops it.
+ */
+function boundTransform(node, style, cascaded) {
+    const text = style['transform'];
+    if (typeof text !== 'string')
+        return style;
+    // The same list for the same string, commit after commit: a transition compares the two ends
+    // it is given, and a list made afresh each time reads as a new place to go.
+    if (node.boundTransform?.text !== text)
+        node.boundTransform = { text, list: transformList(text) };
+    const list = node.boundTransform.list ?? cascaded;
+    if (list === undefined)
+        delete style['transform'];
+    else
+        style['transform'] = list;
+    return style;
+}
+/** A transform string as the list native reads, and none for one CSS cannot read. */
+const transformOf = (value) => transformList(value) ?? [];
 function flattenStyle(value, into) {
     if (!value)
         return into;
@@ -839,7 +1300,7 @@ function composeTransform(node, props) {
     }
     else {
         // A bound style's transform is still the CSS string: see `inline-transform.ts`.
-        const own = typeof transform === 'string' ? transformList(transform) : transform;
+        const own = typeof transform === 'string' ? transformOf(transform) : transform;
         value = [translate, rotate, scale, own].flatMap((part) => (Array.isArray(part) ? part : []));
         node.composedTransform = { parts, value };
     }
@@ -949,15 +1410,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 +1438,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)
-            this.styles.onUndefinedToken = (name, props) => this.reportUndefinedToken(name, props);
+        if (this.dev) {
+            this.styles.onUndefinedToken = (name, props, on) => this.reportUndefinedToken(name, props, on);
+            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 +1518,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;
@@ -1102,6 +1599,25 @@ export class Engine {
      * text attributes change, which the same cap does. Android sets it only when `fontFamily` is in
      * the props it is sent, and the engine sends only what changed, so it is sent again once.
      */
+    /**
+     * Loads have settled for these families: every node held back for one, a span inside a
+     * paragraph included, is laid out with the name again, registered or not. See `loadingFamilies`.
+     */
+    fontsSettled(families) {
+        let held = false;
+        const visit = (node) => {
+            for (const child of node.children) {
+                if (child.heldFamily !== undefined && families.has(child.heldFamily)) {
+                    this.markProps(child, false);
+                    held = true;
+                }
+                visit(child);
+            }
+        };
+        visit(this.root);
+        if (held)
+            this.commit();
+    }
     fontsRegistered(families) {
         const visit = (node) => {
             for (const child of node.children) {
@@ -1189,23 +1705,57 @@ 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;
+    viewportWatchers = new Set();
+    /** Calls `listener` after each change of conditions, which is when `viewport` can change. */
+    watchViewport(listener) {
+        this.viewportWatchers.add(listener);
+        return () => this.viewportWatchers.delete(listener);
+    }
     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
         // be one: no view is dirty, so a tick does no work and never reaches the renderer at all.
         this.commit();
+        for (const watcher of this.viewportWatchers)
+            watcher();
     }
     // --- mutation API -----------------------------------------------------
     createElement(name, sheet = null) {
         const node = new RetainedNode('element', name, this);
         node.sheet = sheet;
+        const html = HTML_ELEMENTS.get(name);
+        if (html !== undefined) {
+            if (html.role)
+                node.props['accessibilityRole'] = html.role;
+            node.styled = html.styled;
+        }
         if (sheet?.structural)
             this.structuralSheets = true;
         if (HOISTS[name])
@@ -1220,6 +1770,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);
@@ -1241,7 +1811,8 @@ export class Engine {
         parent.children.push(child);
         if (child.dormantHoists)
             this.wakeHoists(child);
-        this.markStructure(parent);
+        this.markStructure(parent, child);
+        this.markTextContent(parent, child);
     }
     insertBefore(parent, child, ref) {
         this.detach(child);
@@ -1253,7 +1824,8 @@ export class Engine {
             parent.children.splice(at, 0, child);
         if (child.dormantHoists)
             this.wakeHoists(child);
-        this.markStructure(parent);
+        this.markStructure(parent, child);
+        this.markTextContent(parent, child);
     }
     removeChild(parent, child) {
         const target = parent ?? child.parent;
@@ -1264,8 +1836,17 @@ export class Engine {
             return;
         target.children.splice(at, 1);
         child.parent = null;
-        this.removedSinceCommit = true;
-        this.markStructure(target);
+        this.removedSinceCommit.add(child);
+        this.markStructure(target, child);
+        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 +1869,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 +1905,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;
@@ -1373,7 +1967,17 @@ export class Engine {
         // Inline style is applied after the cascade and inherited by nothing, so it cannot change
         // what any node matches or inherits. Every other prop can: `[disabled]` is a selector. An
         // inline `direction` is the exception, because the paragraphs below it align by it.
-        this.markProps(node, key !== 'style' || this.noteInlineDirection(node));
+        this.markProps(node, key !== 'style' || this.inlineReachesStyle(node));
+    }
+    /**
+     * 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.
+     */
+    inlineReachesStyle(node) {
+        const inherits = setsInherited(node.props['style']);
+        const inherited = node.inlineInherits === true;
+        node.inlineInherits = inherits;
+        return this.noteInlineDirection(node) || inherits || inherited;
     }
     /** Whether a node's inline style sets `direction`, remembering that one has. */
     noteInlineDirection(node) {
@@ -1395,7 +1999,26 @@ export class Engine {
      * has changed for the props diff to notice.
      */
     styleChanged(node) {
-        this.markProps(node, this.noteInlineDirection(node));
+        this.markProps(node, this.inlineReachesStyle(node));
+    }
+    /**
+     * A bound declaration, `[style.color]`, whose value may be a `var()`. One that is, is kept as a
+     * declaration the cascade settles with the node's tokens, as a rule's is, and true is answered:
+     * the text is no value to put in the node's style. Any other value forgets what was kept.
+     */
+    setBoundStyle(node, prop, value) {
+        const text = typeof value === 'string' && /^\s*var\(/i.test(value) ? value : undefined;
+        const bound = text === undefined ? null : boundDeclaration(prop, tokenFromValue(text), node.name);
+        if (!bound && !node.boundByProp?.has(prop))
+            return false;
+        const byProp = (node.boundByProp ??= new Map());
+        if (bound)
+            byProp.set(prop, bound);
+        else
+            byProp.delete(prop);
+        node.boundStyle = byProp.size ? [...byProp.values()] : null;
+        this.markProps(node);
+        return bound !== null;
     }
     /**
      * Set a custom property on a node, `--tint` from `[style.--tint]`, or remove it with `null`.
@@ -1421,6 +2044,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();
@@ -1460,7 +2085,8 @@ export class Engine {
             siblings[i].styleDirty = true;
         }
     }
-    markStructure(node) {
+    /** `node`'s child list changed: `moved` came into it or went out of it. */
+    markStructure(node, moved) {
         node.structureDirty = true;
         // A child list that moved changes what its members match, though nothing about them did:
         // the old last row is no longer the last. Only sheets that ask about position pay for this.
@@ -1468,6 +2094,10 @@ export class Engine {
             node.styleDirty = true;
             for (const child of node.children)
                 child.styleDirty = true;
+            // `.box:empty + .spacer`: what a later sibling matches can hang on whether this node is
+            // empty, which only its first child arriving or its last one leaving changes.
+            if (wasOrIsEmptyWithout(node, moved))
+                this.markLaterSiblings(node);
         }
         this.markPath(node.parent);
     }
@@ -1494,7 +2124,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 +2141,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);
@@ -1529,10 +2161,59 @@ export class Engine {
         }
         this.flushTransitionEvents();
         this.scrollDriver?.afterCommit();
-        if (this.facesAdded)
+        // Read first: the commit that settles keyframes starts by clearing it.
+        const facesAdded = this.facesAdded;
+        if (this.awaitingKeyframes.size)
+            this.settleKeyframes();
+        if (facesAdded)
             this.rematchFonts();
         return true;
     }
+    /** The first commit whose new views have not been drawn yet, while `commitUnseen` runs. */
+    unseen = Infinity;
+    /**
+     * A commit for what changed in the same turn as earlier commits, before a frame was drawn.
+     * `since` is how many commits there had been before the first of them (`stats.commits`).
+     *
+     * A view those commits created has not been seen in the style they gave it, so what this one
+     * gives it is where it starts, and no transition runs toward it. That is what a browser
+     * does with a class added to an element in the turn that inserted it, and what `animate.enter`
+     * is built on: Angular adds the enter class after the render pass that created the element, and
+     * takes it off a frame later, which is the one change the transition is for.
+     */
+    commitUnseen(since) {
+        this.unseen = since;
+        try {
+            return this.commit();
+        }
+        finally {
+            this.unseen = Infinity;
+        }
+    }
+    /** Nodes that asked for `@keyframes` this commit had not met, by the name they asked for. */
+    awaitingKeyframes = new Map();
+    /**
+     * A sheet is registered when the first node it styles is committed, so a node committed before
+     * it can name keyframes that arrive later in the same commit. Those nodes play them from another
+     * commit straight away, as a browser applies keyframes however the sheets arrived; a name still
+     * unknown once the commit is over is reported.
+     */
+    settleKeyframes() {
+        const waiting = [...this.awaitingKeyframes];
+        this.awaitingKeyframes.clear();
+        let found = false;
+        for (const [node, name] of waiting) {
+            if (this.keyframes.has(name)) {
+                this.markProps(node, false);
+                found = true;
+            }
+            else if (this.dev) {
+                this.reportMissingKeyframes(name);
+            }
+        }
+        if (found)
+            this.commit();
+    }
     scrollDriver;
     /** Whether native can move a view by a scroll with no JavaScript in between. */
     get drivesScroll() {
@@ -1599,12 +2280,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,29 +2301,28 @@ 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
-            // selectors to match, and the components package maps `aria-*` to what native reads.
-            if (key !== 'style' &&
-                key !== INTRINSIC_SIZE &&
-                key !== STYLE_OVERRIDE &&
-                !key.includes('-')) {
-                props[key] = node.props[key];
-            }
-        }
-        const style = flattenStyle(node.props['style'], props);
+        const resolved = props['pointerEvents'];
+        writeOwnProps(node.props, props);
+        withTextContent(node, viewName, props);
+        const cascaded = props['transform'];
+        const style = boundTransform(node, flattenStyle(node.props['style'], props), cascaded);
+        nativePointerEvents(node, style, resolved);
         const intrinsic = node.props[INTRINSIC_SIZE];
         if (intrinsic)
             applyIntrinsicSize(style, intrinsic);
         flattenStyle(node.props[STYLE_OVERRIDE], style);
         this.fontFaces.apply(style);
+        holdLoadingFamily(node, style);
         if (viewName === PARAGRAPH)
             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 +2380,70 @@ 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;
+        }
+        else {
+            this.sheetOrder.splice(at, 1);
+        }
+        if (sheet.keyframes || next?.keyframes)
+            this.reindexKeyframes();
+        if (sheet.fonts || next?.fonts)
+            this.reindexFonts();
+    }
+    /**
+     * Every sheet's `@font-face` rules again, in order, and every text that names a family matched
+     * again: a face whose rule went is no longer matched, though the platform keeps it registered.
+     */
+    reindexFonts() {
+        this.fontFaces.clear();
+        for (const sheet of this.sheetOrder)
+            if (sheet.fonts)
+                this.fontFaces.add(sheet.fonts);
+        this.markFontText(this.root);
+    }
+    /** 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`. */
@@ -1714,18 +2454,19 @@ export class Engine {
      * Once per sheet that declares faces, so walking the tree costs nothing that matters.
      */
     rematchFonts() {
-        const visit = (node) => {
-            for (const child of node.children) {
-                if (child.kind !== 'element')
-                    continue;
-                if (typeof child.committed?.props['fontFamily'] === 'string')
-                    this.markProps(child, false);
-                visit(child);
-            }
-        };
-        visit(this.root);
+        this.markFontText(this.root);
         this.commit();
     }
+    /** Mark every element under `node` committed with a family, so it is matched again. */
+    markFontText(node) {
+        for (const child of node.children) {
+            if (child.kind !== 'element')
+                continue;
+            if (typeof child.committed?.props['fontFamily'] === 'string')
+                this.markProps(child, false);
+            this.markFontText(child);
+        }
+    }
     knownSheets = new WeakSet();
     /**
      * Start, advance or stop the `@keyframes` animation a node's style asks for.
@@ -1740,6 +2481,7 @@ export class Engine {
             this.stopScrolled(node);
         if (!spec) {
             if (node.playing) {
+                this.cancelPlaying(node);
                 node.playing = undefined;
                 this.playing.delete(node);
             }
@@ -1747,8 +2489,13 @@ export class Engine {
         }
         const frames = this.keyframes.get(spec.name);
         if (!frames) {
-            if (this.dev)
-                this.reportMissingKeyframes(spec.name);
+            // Keyframes a hot swap deleted, from under an animation that was playing them, or ones a
+            // sheet later in this commit has: see `settleKeyframes`.
+            this.cancelPlaying(node);
+            node.playing = undefined;
+            this.playing.delete(node);
+            this.stopScrolled(node);
+            this.awaitingKeyframes.set(node, spec.name);
             return props;
         }
         if (spec.timeline)
@@ -1756,13 +2503,38 @@ export class Engine {
         this.startPlaying(node, spec, frames, props);
         return Object.assign(props, node.playing?.values ?? {});
     }
+    /**
+     * A clock animation the scroll plays instead: the same animation where only the timeline moved,
+     * and one cancelled where the name changed.
+     */
+    handOverToScroll(node, spec) {
+        if (!node.playing)
+            return;
+        if (node.playing.spec.name !== spec.name)
+            this.cancelPlaying(node);
+        node.playing = undefined;
+        this.playing.delete(node);
+    }
+    /**
+     * `animationcancel` for an animation stopped before it ended: the element no longer asks for it,
+     * asks for another by name, or its keyframes went, as a browser fires it.
+     */
+    cancelPlaying(node) {
+        const running = node.playing;
+        if (running && !running.done)
+            this.emitTransition(node, 'topAnimationcancel', running.spec.name);
+    }
     /** 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)) {
+            if (current && current.spec.name !== spec.name)
+                this.cancelPlaying(node);
             const started = {
                 spec,
-                tracks: tracksOf(frames, props),
+                tracks: tracksOf(frames, props, inherited),
+                inherited,
                 start: this.now(),
                 values: {},
                 done: false,
@@ -1775,6 +2547,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 +2556,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 +2617,13 @@ 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);
-        if (node.playing) {
-            node.playing = undefined;
-            this.playing.delete(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));
         }
-        const tracks = tracksOf(frames, props);
+        this.stopScrolled(node);
+        this.handOverToScroll(node, spec);
+        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 +2636,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)
@@ -1919,6 +2739,9 @@ 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;
         const spec = transitionSpec(props);
         if (!spec && !node.transitions)
             return props;
@@ -2030,7 +2853,7 @@ export class Engine {
             if (value === null || value === undefined)
                 out[key] = value;
             else if (isColorProp(key))
-                out[key] = this.color(value);
+                out[key] = this.painted(key, value);
             // A list of sources has already been resolved by whoever built it, as RN's resolver
             // also assumes: it passes any object through and only turns a number into one.
             else if (ASSET_PROPS.has(key) && !Array.isArray(value))
@@ -2043,7 +2866,7 @@ export class Engine {
                 out[key] = this.processFilters(value);
             // A bound style's transform is still the CSS string: see `inline-transform.ts`.
             else if (key === 'transform' && typeof value === 'string')
-                out[key] = transformList(value);
+                out[key] = transformOf(value);
             else
                 out[key] = value;
         }
@@ -2114,9 +2937,11 @@ 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);
+        this.forgetRenamed(node, viewName);
+        const childHandles = this.reconcileChildren(node, viewName, style);
+        noteTouches(node, style);
+        const previous = node.committed;
         this.notePresented(node, viewName);
         if (!previous)
             return this.create(node, viewName, this.mergeProps(node, viewName), childHandles);
@@ -2134,7 +2959,7 @@ export class Engine {
             handle = this.clone(previous.handle, propsPayload && this.processed(propsPayload), childrenChanged ? childHandles : null);
             // A clone is the same view, so it keeps the tag it was created with, not the newest tag
             // handed out, which is some other node's.
-            node.committed = { handle, tag: previous.tag, props, childHandles };
+            node.committed = { handle, tag: previous.tag, props, childHandles, viewName };
         }
         this.clearFlags(node);
         return handle;
@@ -2168,7 +2993,7 @@ 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);
@@ -2177,20 +3002,57 @@ export class Engine {
             if (child.kind === 'anchor' || this.committedElsewhere(child) || this.withheld(child)) {
                 continue;
             }
+            if (child.kind === 'text') {
+                const handle = this.reconcileText(node, child, viewName, context);
+                if (handle)
+                    handles.push(handle);
+                continue;
+            }
             handles.push(this.reconcileUnder(node, child, context));
         }
         return handles;
     }
     /**
-     * Whether a child is left out of its parent's commit: a modal host whose `visible` is false.
+     * The paragraph a run of text written straight into a view is drawn in, or nothing for a run of
+     * whitespace, which a browser draws nothing for between the items of a flex box either.
      *
-     * The native host covers the screen and takes every touch whether or not it presents anything,
-     * which is why React Native's Modal.js renders null while hidden. This is the same thing, so a
-     * hidden `<modal>` leaves the screen under it usable. On iOS a modal that was showing stays
-     * 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.
+     * It is the text's own, kept on the text node, and no part of the tree: its parent is the view,
+     * so it inherits what the view's text would, and no rule matches it.
+     */
+    /**
+     * A run of text under `parent`, which commits as `viewName`: the text itself inside a text, a
+     * paragraph of its own inside any other view, and nothing where the view takes its text as a
+     * prop (see `ViewNameOptions`) or the run is whitespace between a view's children.
      */
+    reconcileText(parent, text, viewName, context) {
+        if (TEXT_CONTENT_PROPS[viewName] !== undefined)
+            return null;
+        if (viewName === PARAGRAPH || viewName === VIRTUAL_TEXT) {
+            // Under a text element, the paragraph it had in a view is done with. Under that paragraph
+            // itself, which is where a loose run is committed, it is the one to keep.
+            if (text.box && text.box !== parent)
+                text.box = undefined;
+            return this.reconcileUnder(parent, text, context);
+        }
+        const box = this.looseText(parent, text);
+        return box ? this.reconcileUnder(parent, box, context) : null;
+    }
+    looseText(parent, text) {
+        if (!trimEnds(text.text))
+            return null;
+        let box = text.box;
+        if (!box) {
+            box = new RetainedNode('element', 'text', this);
+            box.anonymous = true;
+            box.children = [text];
+            text.box = box;
+        }
+        box.parent = parent;
+        // The text is not under the box in the tree, so a change to it never marked the box.
+        if (!this.isClean(text))
+            box.subtreeDirty = true;
+        return box;
+    }
     /** 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)
@@ -2198,10 +3060,28 @@ export class Engine {
         if (platformOS === 'ios')
             node.presented = true;
     }
+    /**
+     * Whether a child is left out of its parent's commit: a modal host whose `visible` is false.
+     *
+     * The native host covers the screen and takes every touch whether or not it presents anything,
+     * which is why React Native's Modal.js renders null while hidden. This is the same thing, so a
+     * hidden `<modal>` leaves the screen under it usable. On iOS a modal that was showing stays
+     * 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.
+     */
     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,14 +3132,29 @@ export class Engine {
         child.committedUnder = parent;
         return handle;
     }
-    /** Let a node and everything under it be created again at the next commit. */
+    /**
+     * A node whose native view is no longer the one it was created as is created again: a text
+     * element that came to hold a view, or stopped. A clone keeps the view it was made as.
+     */
+    forgetRenamed(node, viewName) {
+        if (node.committed && node.committed.viewName !== viewName)
+            this.forgetCommitted(node);
+    }
+    /**
+     * 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;
-        for (const child of node.children)
-            if (child.committed)
+        node.kept = undefined;
+        if (node.box?.committed)
+            this.forgetCommitted(node.box);
+        for (const child of node.children) {
+            if (child.committed || child.box?.committed)
                 this.forgetCommitted(child);
+        }
     }
     /** A hoisted node, which commits into an ancestor further up than the parent it is in. */
     committedElsewhere(child) {
@@ -2301,7 +3196,7 @@ export class Engine {
                 };
                 const payload = diffProps(kept.committed.props, props);
                 const handle = this.clone(kept.committed.handle, payload && this.processed(payload), []);
-                kept.committed = { handle, tag: kept.committed.tag, props, childHandles: [] };
+                kept.committed = { ...kept.committed, handle, props, childHandles: [] };
                 kept.node = null;
             }
             handles.push(kept.committed.handle);
@@ -2370,13 +3265,14 @@ export class Engine {
         const handle = this.fabric.createNode(tag, viewName, this.rootTag, this.processed(props), node);
         for (const child of childHandles)
             this.fabric.appendChild(handle, child);
-        node.committed = { handle, tag, props, childHandles };
+        node.committed = { handle, tag, props, childHandles, viewName };
+        node.bornIn = this.stats.commits;
         this.clearFlags(node);
         return handle;
     }
     /**
      * Angular's own unknown-element check does not run in this pipeline, so a `<text>` in a
-     * template that never imported `Text` compiles, renders as a plain view, and looks like a
+     * template that never imported `Text` compiles, draws without the component, and looks like a
      * layout bug. On the first commit of any known element with no component behind it, say so.
      */
     checkClaimed(node) {
@@ -2387,7 +3283,8 @@ export class Engine {
         this.reported.add(node.name);
         console.error(`[angular-native] <${node.name}> is used in a template that does not import ` +
             `${className(node.name)}. Add it to the component's \`imports\` from ` +
-            `'@ng-native/components'; without it the element renders as a plain view.`);
+            `'@ng-native/components'; without it the element has none of the component's inputs ` +
+            `or behavior, so a prop written on it stays the text it was written as.`);
     }
     /**
      * The misspelt-prop check. Angular's own "Can't bind to" check needs a DOM to run, so a
@@ -2398,14 +3295,30 @@ export class Engine {
      */
     undefinedTokens = new Set();
     /** Said once per name: a phone has no inspector to show the declaration struck out. */
-    reportUndefinedToken(name, props) {
+    reportUndefinedToken(name, props, on) {
         if (this.undefinedTokens.has(name))
             return;
         this.undefinedTokens.add(name);
-        console.warn(`[angular-native] var(${name}) in ${props.join(', ')} names a custom property nothing in` +
+        // A bound declaration has no rule to be found by, so it says which element it is on.
+        const where = on === undefined ? props.join(', ') : `${props.join(', ')}, bound on <${on}>,`;
+        console.warn(`[angular-native] var(${name}) in ${where} names a custom property nothing in` +
             ` 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;
@@ -2617,6 +3530,18 @@ export class Engine {
     resolveAsset(value) {
         return this.resolveAssetSource(value);
     }
+    /**
+     * A colour prop as native takes it. A shape's `fill` or `stroke` the cascade settled from a
+     * token is the solid brush react-native-svg takes, and `none` no paint at all.
+     */
+    painted(key, value) {
+        if (!BRUSH_PROPS.has(key))
+            return this.color(value);
+        // Already a brush, as the icon wrote it: only one the cascade settled is still text.
+        if (typeof value !== 'string')
+            return value;
+        return value === 'none' ? null : { type: 0, payload: this.color(value) };
+    }
     /**
      * The host's `processColor`, and the one place a platform colour becomes one.
      *
@@ -2767,7 +3692,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);