@ng-native/fabric 0.3.0 → 0.4.0

package/dist/engine.js

@@ -7,7 +7,9 @@
  * 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 { 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";
@@ -240,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
@@ -274,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. */
@@ -478,6 +516,12 @@ const MODAL_HOST = 'ModalHostView';
  */
 export function registerViewName(elementName, viewName, defaultProps, options) {
     VIEW_NAMES[elementName] = viewName;
+    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]) {
         if (defaultProps)
             DEFAULT_PROPS[name] = defaultProps;
@@ -485,6 +529,8 @@ export function registerViewName(elementName, viewName, defaultProps, options) {
             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. */
@@ -500,6 +546,14 @@ function withTextContent(node, viewName, props) {
     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
@@ -514,7 +568,7 @@ function textContent(node) {
         else if (child.kind === 'element')
             nested = true;
     }
-    return nested ? text.trimStart() : text.trim();
+    return nested ? trimStart(text) : trimEnd(trimStart(text));
 }
 /** An element's registered view name, for the platform the host reported. */
 function registeredViewName(elementName) {
@@ -528,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. */
@@ -547,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'];
@@ -617,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) => {
@@ -631,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
@@ -658,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) {
@@ -763,6 +1049,10 @@ class RetainedNode {
     propsDirty = false;
     structureDirty = false;
     subtreeDirty = false;
+    touchWithin = undefined;
+    box = undefined;
+    anonymous = undefined;
+    styled = undefined;
     transitions;
     playing;
     scrolled;
@@ -896,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']);
@@ -910,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;
@@ -986,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 };
     }
@@ -1130,7 +1444,7 @@ export class Engine {
         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);
+            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());
@@ -1285,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) {
@@ -1396,6 +1729,12 @@ export class Engine {
     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;
@@ -1404,11 +1743,19 @@ export class Engine {
         // 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])
@@ -1464,7 +1811,7 @@ 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) {
@@ -1477,7 +1824,7 @@ 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) {
@@ -1490,7 +1837,7 @@ export class Engine {
         target.children.splice(at, 1);
         child.parent = null;
         this.removedSinceCommit.add(child);
-        this.markStructure(target);
+        this.markStructure(target, child);
         this.markTextContent(target, child);
     }
     /**
@@ -1620,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) {
@@ -1642,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`.
@@ -1709,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.
@@ -1717,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);
     }
@@ -1780,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() {
@@ -1873,23 +2303,18 @@ export class Engine {
         this.registerSheet(node.hostSheet);
         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 resolved = props['pointerEvents'];
+        writeOwnProps(node.props, props);
         withTextContent(node, viewName, props);
-        const style = flattenStyle(node.props['style'], 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)
@@ -1981,14 +2406,25 @@ export class Engine {
         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();
+        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() {
@@ -2018,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.
@@ -2044,6 +2481,7 @@ export class Engine {
             this.stopScrolled(node);
         if (!spec) {
             if (node.playing) {
+                this.cancelPlaying(node);
                 node.playing = undefined;
                 this.playing.delete(node);
             }
@@ -2051,12 +2489,13 @@ 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.
+            // 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);
-            if (this.dev)
-                this.reportMissingKeyframes(spec.name);
+            this.awaitingKeyframes.set(node, spec.name);
             return props;
         }
         if (spec.timeline)
@@ -2064,11 +2503,34 @@ 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, inherited),
@@ -2160,10 +2622,7 @@ export class Engine {
             return Object.assign(props, this.rescrolled(node, current, frames, props, inherited));
         }
         this.stopScrolled(node);
-        if (node.playing) {
-            node.playing = undefined;
-            this.playing.delete(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;
@@ -2280,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;
@@ -2391,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))
@@ -2404,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;
         }
@@ -2476,7 +2938,9 @@ export class Engine {
             return node.committed.handle;
         node.styleCommitted = style;
         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)
@@ -2495,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;
@@ -2533,19 +2997,62 @@ export class Engine {
         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')
+            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;
     }
+    /**
+     * 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.
+     *
+     * 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)
@@ -2625,6 +3132,14 @@ export class Engine {
         child.committedUnder = parent;
         return handle;
     }
+    /**
+     * 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.
@@ -2634,9 +3149,12 @@ export class Engine {
         node.committedUnder = null;
         node.styleCommitted = null;
         node.kept = undefined;
-        for (const child of node.children)
-            if (child.committed)
+        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) {
@@ -2678,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);
@@ -2747,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) {
@@ -2764,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
@@ -2775,11 +3295,13 @@ 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.`);
     }
@@ -3008,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.
      *