@ng-native/fabric 0.3.0 → 0.5.0

package/dist/engine.js

@@ -7,14 +7,17 @@
  * 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, usesActive, } from "./css.js";
+import { applyAria } from "./aria-props.js";
+import { STYLED_ELEMENTS } from "./element-styles.js";
 import { animationEvent, bezier, interpolate, readsInheritedColour, sample, step, tracksOf, } from "./transition.js";
 import { isFormsInput } from "./forms-inputs.js";
 import { transformList } from "./inline-transform.js";
 import { tokenFromValue } from "./inline-token.js";
 import { NativeScrollDriver, scrollFeed, } from "./native-drive.js";
-import { firstFrame, rangeOf, scrollChannels } from "./scroll-animation.js";
+import { clockChannels, firstFrame, rangeOf, scrollChannels } from "./scroll-animation.js";
 import { FontFaces } from "./font-faces.js";
+import { premultipliedStops } from "./premultiplied-stops.js";
 /**
  * The animation a node's style asks for, with a play state from a rule of its own applied. Both
  * are instructions for this engine and nothing native has heard of them, so they come out of the
@@ -240,6 +243,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 +305,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. */
@@ -421,6 +460,124 @@ function centreSingleLine(viewName, props, fontScale) {
         : box.reduce((sum, part) => sum + part, 0);
     props['minHeight'] = Math.max(own, Math.min(content, max));
 }
+/**
+ * What a container's own style says for `key`, in the order `mergeProps` applies them: a
+ * component's override, inline, a prop, its stylesheet, its default.
+ */
+function ownLayout(node, key) {
+    return (flattenStyle(node.props[STYLE_OVERRIDE], {})[key] ??
+        flattenStyle(node.props['style'], {})[key] ??
+        node.props[key] ??
+        node.styleCache?.style[key] ??
+        node.defaultStyle?.[key]);
+}
+/**
+ * A container's main axis and how it aligns across it, as `row` or `column` and a keyword. A
+ * `display: contents` node is no container: its children are laid out in the one above it.
+ */
+function containerOf(node) {
+    if (ownLayout(node, 'display') === 'contents')
+        return 'contents';
+    const direction = String(ownLayout(node, 'flexDirection') ?? 'column');
+    return `${direction.startsWith('row') ? 'row' : 'column'} ${ownLayout(node, 'alignItems') ?? 'stretch'}`;
+}
+/**
+ * The node a box is laid out in: its parent, or the one above every `display: contents` ancestor.
+ * Each of those is told a `fit-content` child passed through, so that when it stops being
+ * `contents`, and is the container, the child is worked out again.
+ */
+function layoutParent(node) {
+    let parent = node.parent;
+    while (parent && containerOf(parent) === 'contents') {
+        parent.fitContainer = 'contents';
+        parent = parent.parent;
+    }
+    return parent;
+}
+const STRETCHES = new Set([undefined, null, 'auto', 'stretch']);
+/**
+ * `width: fit-content` and `height: fit-content`, which Yoga has no size for.
+ *
+ * Along its container's main axis a box is as big as its content already, so the size is
+ * dropped. Across it a box stretches, where a browser keeps it at its content's size and at the
+ * start: `align-self: flex-start` does both. An alignment the container or the box asked for is
+ * kept, since it stops the stretch already.
+ */
+function fitContent(node, props) {
+    const width = props['width'] === 'fit-content';
+    const height = props['height'] === 'fit-content';
+    if (!width && !height)
+        return;
+    if (width)
+        delete props['width'];
+    if (height)
+        delete props['height'];
+    const parent = layoutParent(node);
+    if (!parent)
+        return;
+    const container = containerOf(parent);
+    parent.fitContainer = container;
+    const [direction, align] = container.split(' ');
+    const across = direction === 'row' ? height : width;
+    if (across && align === 'stretch' && STRETCHES.has(props['alignSelf'])) {
+        props['alignSelf'] = 'flex-start';
+    }
+}
+const isPercent = (value) => typeof value === 'string' && value.endsWith('%');
+/**
+ * Whether a box has a height a percentage can be taken of, as CSS defines one: a height of its
+ * own, or one the layout around it gives it. A box as tall as what it holds has none.
+ *
+ * Asked of each box on the way up, and remembered on it, so a change to any of them works out
+ * again the boxes beneath it. Where the answer is not known for certain it is yes, which leaves
+ * the percentage to Yoga as before: a view native sizes itself, or one placed out of the flow.
+ */
+function definiteHeight(node) {
+    return (node.heightBasis = hasDefiniteHeight(node));
+}
+function hasDefiniteHeight(node) {
+    // The root is the screen, and only a plain view is sized by its content alone.
+    if (!node.parent || node.kind !== 'element' || viewNameOf(node) !== 'View')
+        return true;
+    const parent = layoutParent(node);
+    if (!parent)
+        return true;
+    const height = ownLayout(node, 'height');
+    if (isPercent(height))
+        return definiteHeight(parent);
+    return sizesItself(node, height) || heightFromLayout(node, parent);
+}
+const NO_HEIGHT = new Set([undefined, null, 'auto', 'fit-content']);
+/** Whether a box has a height from its own style: written, or placed, or kept in proportion. */
+function sizesItself(node, height) {
+    if (!NO_HEIGHT.has(height))
+        return true;
+    return ownLayout(node, 'position') === 'absolute' || ownLayout(node, 'aspectRatio') != null;
+}
+/** Whether the container a box is in gives it a height: a row's, or a share of a column's. */
+function heightFromLayout(node, parent) {
+    const [direction, align] = containerOf(parent).split(' ');
+    if (direction === 'row') {
+        // Stretched across a row, it is as tall as the row.
+        const self = ownLayout(node, 'alignSelf');
+        return STRETCHES.has(self) && align === 'stretch';
+    }
+    // In a column it has the height it grows to, where the column has one to share out.
+    const grows = Number(ownLayout(node, 'flexGrow') ?? ownLayout(node, 'flex') ?? 0) > 0;
+    return grows && definiteHeight(parent);
+}
+/**
+ * `height: 50%` under a parent with no height to take it of, which CSS reads as `auto`. Yoga
+ * takes it of the space on offer, the screen's or everything a scroll view holds, so no height
+ * is sent.
+ */
+function percentHeight(node, props) {
+    if (!isPercent(props['height']))
+        return;
+    const parent = layoutParent(node);
+    if (parent && !definiteHeight(parent))
+        delete props['height'];
+}
 /**
  * Start a multiline Android text field's text at the top, as iOS and a `<textarea>` do.
  *
@@ -478,6 +635,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 +648,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 +665,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 +687,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 +701,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 +731,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 +840,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 +855,63 @@ 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;
+}
+const ALIGNS = new Set(['center', 'flex-end', 'space-around', 'space-evenly']);
+/**
+ * Whether one of HTML's text elements is a flex container that aligns the one run of text it
+ * holds, as an avatar's initials are centred: `<span class="flex items-center justify-center">`.
+ *
+ * A browser makes the run a flex item and places it. A paragraph's text is its content, which no
+ * alignment moves, so such an element commits as a view, and its text as the paragraph any view's
+ * loose text is. Read from the node's own style on each reconcile, which a change to it brings
+ * about, so nothing is kept to go stale. A `<text>` is a paragraph whatever its style, and an
+ * element holding more than the one run is left as it was.
+ */
+function aligningText(node) {
+    if (node.kind !== 'element' || node.name === 'text' || !TEXT_ELEMENTS.has(node.name)) {
+        return false;
+    }
+    if (node.children.length !== 1 || node.children[0].kind !== 'text')
+        return false;
+    if (isTextElement(node.parent) || ownLayout(node, 'display') !== 'flex')
+        return false;
+    return (ALIGNS.has(ownLayout(node, 'alignItems')) ||
+        ALIGNS.has(ownLayout(node, 'justifyContent')));
+}
+/** The view a node is committed as: `viewNameOf`, but for a text element that aligns its text. */
+const committedViewName = (node) => aligningText(node) ? DEFAULT_VIEW : viewNameOf(node);
 /**
  * The native view a node commits as: `Paragraph` for a `<text>`, `VirtualText` for one nested in
  * another, `RawText` for a run of text, and `View` for anything unregistered, which is what an
@@ -658,9 +927,196 @@ 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;
+    }
+    // The paragraph the engine makes for a view's loose text is under a view, whatever the name
+    // of the element that view is.
+    return !node.anonymous && isTextElement(node.parent) ? VIRTUAL_TEXT : PARAGRAPH;
+}
+/**
+ * The props every native view reads as a boolean: the `bool` fields of React Native's
+ * `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;
+}
+/**
+ * Have the child that paints a node's background merged again with the node: nothing of the
+ * child's own moved, and what it paints may have.
+ */
+function repaint(node) {
+    if (node.paintsOn?.parent === node)
+        node.paintsOn.propsDirty = true;
+}
+/** A sixtieth of a second: how far apart the frames native is given for an animation are. */
+const NATIVE_FRAME = 1000 / 60;
+/** The style keys that are a view's background. */
+const PAINT_KEYS = [
+    'backgroundColor',
+    'experimental_backgroundImage',
+    'experimental_backgroundSize',
+    'experimental_backgroundPosition',
+    'experimental_backgroundRepeat',
+];
+/**
+ * A node's own props onto what it commits with. No native prop has a hyphen: `data-*` and `aria-*`
+ * attributes stay on the node for selectors to match, and an `aria-*` one is mapped to the prop
+ * native reads. The node's `attributeOnly` names stay on it the same way.
+ */
+function writeOwnProps(own, props, attributeOnly) {
+    let aria = false;
+    for (const key of Object.keys(own)) {
+        if (attributeOnly?.has(key))
+            continue;
+        if (key.includes('-'))
+            aria ||= key.startsWith('aria-');
+        else if (key !== 'style' && key !== INTRINSIC_SIZE && key !== STYLE_OVERRIDE) {
+            props[key] = committedProp(key, own[key]);
+        }
+    }
+    if (!aria)
+        return;
+    // An attribute-only `aria-*` is not mapped to the prop native reads either.
+    const mapped = attributeOnly?.size
+        ? Object.fromEntries(Object.entries(own).filter(([key]) => !attributeOnly.has(key)))
+        : own;
+    applyAria(mapped, props);
+}
+/** A prop as it is committed: a boolean view prop held as text is the boolean the text says. */
+function committedProp(key, value) {
+    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) {
@@ -753,6 +1209,10 @@ class RetainedNode {
     styleCache = null;
     styleDirty = true;
     styleCommitted = null;
+    fitContainer = undefined;
+    heightBasis = undefined;
+    hasDirty = false;
+    stateDirty = false;
     ownStyle = undefined;
     claimed = undefined;
     dormantHoists = null;
@@ -763,6 +1223,10 @@ class RetainedNode {
     propsDirty = false;
     structureDirty = false;
     subtreeDirty = false;
+    touchWithin = undefined;
+    box = undefined;
+    anonymous = undefined;
+    styled = undefined;
     transitions;
     playing;
     scrolled;
@@ -892,12 +1356,20 @@ class RetainedNode {
  * colours - `shouldRasterizeIOS` is a boolean.
  */
 const IS_COLOR_PROP = /color(android)?$/i;
+/**
+ * Colour props React Native does not name with a `color` suffix: `<switch>`'s pair ends in the
+ * state each one paints - `trackColorForTrue` and `trackColorForFalse`. They are the same type
+ * problem the `Android` suffix causes: Android's `ColorPropConverter` takes a number or a
+ * platform-colour map, refuses a string, and throws rather than approximating one.
+ */
+const STATE_COLOR_PROPS = new Set(['trackColorForTrue', 'trackColorForFalse']);
 /** Answers per key name, once: the regex ran for every prop of every node in every commit. */
 const colorProps = new Map();
 function isColorProp(key) {
     let answer = colorProps.get(key);
-    if (answer === undefined)
-        colorProps.set(key, (answer = IS_COLOR_PROP.test(key)));
+    if (answer === undefined) {
+        colorProps.set(key, (answer = IS_COLOR_PROP.test(key) || STATE_COLOR_PROPS.has(key) || BRUSH_PROPS.has(key)));
+    }
     return answer;
 }
 const ASSET_PROPS = new Set(['source', 'defaultSource', 'loadingIndicatorSource']);
@@ -910,7 +1382,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 +1481,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 };
     }
@@ -1117,6 +1612,8 @@ export class Engine {
      * does, a child list can move without anything else needing to be looked at again.
      */
     structuralSheets = false;
+    /** Whether any sheet uses `:has()`. See `markBeneath`. */
+    hasSheets = false;
     resolveAssetSource;
     constructor(fabric, rootTag, options = {}) {
         this.fabric = fabric;
@@ -1128,9 +1625,11 @@ export class Engine {
         if (options.tokens)
             this.styles.setRootTokens(options.tokens);
         this.structuralSheets = options.globalStyles?.structural === true;
+        this.watchHas(options.globalStyles);
+        this.watchActive(options.globalStyles);
         this.dev = options.dev ?? globalThis.__DEV__ === true;
         if (this.dev) {
-            this.styles.onUndefinedToken = (name, props) => 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());
@@ -1192,11 +1691,70 @@ export class Engine {
             if (node.active === active)
                 continue;
             node.active = active;
-            this.markProps(node);
+            this.markActive(node);
             changed = true;
         }
         return changed;
     }
+    /** Whether any sheet styles a pressed element, and each compound that asks about one from another. */
+    activeUse = {
+        own: false,
+        elsewhere: [],
+    };
+    /** What each sheet in play asks about a pressed element: `activeUse` is all of them together. */
+    activeBySheet = new Map();
+    /** Note what a sheet in play asks about a pressed element. See `markActive`. */
+    watchActive(sheet) {
+        // Asked for every element a component's sheet is given to: noted once a sheet.
+        if (!sheet || this.activeBySheet.has(sheet))
+            return;
+        const use = usesActive(sheet);
+        this.activeBySheet.set(sheet, use);
+        if (!use.own && !use.elsewhere.length)
+            return;
+        this.countActive();
+        if (this.styles.tracksHas)
+            return;
+        // What a pressed element is compared with is the rules it matched, which no cache kept until
+        // a sheet asked. Nothing is resolved yet when the sheet is the one the engine was made with.
+        this.styles.tracksHas = true;
+        if (!this.root)
+            return;
+        this.root.styleDirty = true;
+        this.markPath(this.root);
+    }
+    /** A sheet has left play, by a hot swap or by being removed: what it asked goes with it. */
+    unwatchActive(sheet) {
+        if (this.activeBySheet.delete(sheet))
+            this.countActive();
+    }
+    countActive() {
+        const all = [...this.activeBySheet.values()];
+        this.activeUse = {
+            own: all.some((use) => use.own),
+            elsewhere: all.flatMap((use) => use.elsewhere),
+        };
+    }
+    /**
+     * A press began or ended on `node` or under it, which is all that changed about it. A press
+     * reaches every ancestor up to the root, and marking each as restyled would style the whole
+     * screen again, twice a press. So each is only matched again, and keeps its style and all
+     * that is under it unless it now matches other rules. An element a rule asks about from
+     * inside or beside it, `.card:active .title`, changes more than itself, and is restyled with
+     * everything under it as any other change is. With no rule for a pressed element at all there
+     * is nothing to match.
+     */
+    markActive(node) {
+        const { own, elsewhere } = this.activeUse;
+        if (!own && !elsewhere.length)
+            return;
+        // By its classes alone: a compound with none could be any element.
+        const asked = elsewhere.some((compound) => compound.classes.every((name) => node.classes?.has(name)));
+        if (asked)
+            return this.markProps(node);
+        node.stateDirty = true;
+        this.markPath(node.parent ?? node);
+    }
     /**
      * Custom properties the device knows and the stylesheet cannot, once they change.
      *
@@ -1219,6 +1777,8 @@ export class Engine {
             this.registerSheet(sheet);
         if (sheet.structural)
             this.structuralSheets = true;
+        this.watchHas(sheet);
+        this.watchActive(sheet);
         this.markPath(this.root);
         return true;
     }
@@ -1249,14 +1809,19 @@ export class Engine {
      * which is what makes Fabric dirty a measured node and measure it at the size now in effect.
      */
     remeasureText() {
+        const again = (measured) => {
+            measured.remeasure = true;
+            this.markProps(measured, false);
+        };
         const visit = (node) => {
             for (const child of node.children) {
+                // The paragraph of a run of text written straight into a view is kept on the text.
+                if (child.kind === 'text' && child.box?.committed)
+                    again(child.box);
                 if (child.kind !== 'element')
                     continue;
-                if (child.committed && MEASURED_VIEWS.has(viewNameOf(child))) {
-                    child.remeasure = true;
-                    this.markProps(child, false);
-                }
+                if (child.committed && MEASURED_VIEWS.has(committedViewName(child)))
+                    again(child);
                 visit(child);
             }
         };
@@ -1285,6 +1850,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) {
@@ -1385,6 +1969,8 @@ export class Engine {
         node.sheet = sheet;
         if (sheet?.structural)
             this.structuralSheets = true;
+        this.watchHas(sheet);
+        this.watchActive(sheet);
         this.markProps(node);
     }
     /** The sheet each node given another's scope was created with. */
@@ -1396,6 +1982,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,13 +1996,23 @@ 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;
+        this.watchHas(sheet);
+        this.watchActive(sheet);
         if (HOISTS[name])
             this.hoisted.add(node);
         return node;
@@ -1432,6 +2034,7 @@ export class Engine {
         if (node.hostSheet === sheet)
             return;
         node.hostSheet = sheet;
+        this.watchActive(sheet);
         this.markProps(node);
     }
     /**
@@ -1464,7 +2067,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 +2080,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 +2093,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);
     }
     /**
@@ -1547,6 +2150,7 @@ export class Engine {
             node.playing = undefined;
             this.markProps(node, false);
         }
+        this.releasePlayedNatively();
         for (const nodes of this.scrollTimelines.values()) {
             for (const node of nodes) {
                 if (this.topOf(node) === this.root)
@@ -1581,8 +2185,14 @@ export class Engine {
     destroyNode(node) {
         node.listeners?.clear();
         node.listeners = null;
-        node.committed = null;
+        // With what it holds: a node Angular destroys can be put back, as content projected into
+        // an `@if` is, and its children's views would then be handed to the view it is made again
+        // as. Native gives a view one parent for its life, and aborts on a second.
+        if (node.committed)
+            this.forgetCommitted(node);
         node.transitions = undefined;
+        if (node.playing)
+            this.stopNative(node, node.playing);
         node.playing = undefined;
         this.stopScrolled(node);
         this.running.delete(node);
@@ -1603,6 +2213,9 @@ export class Engine {
         return siblings[siblings.indexOf(node) + 1] ?? null;
     }
     setProp(node, key, value) {
+        // A prop written again is a binding's, and is committed as any other is.
+        if (node.attributeOnly?.delete(key))
+            this.markProps(node, false);
         if (value === undefined || value === null) {
             // Nothing to remove, so nothing changed. Worth its own branch because it is the common
             // case, not a rare one: a host primitive carries a host binding for every prop React Native
@@ -1620,7 +2233,40 @@ 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));
+    }
+    /**
+     * Paint a node's background on one of its children instead of on the node: the node keeps its
+     * `background-color` and `background-image` in the cascade, where a stylesheet wrote them, and
+     * the child is the view that draws them. What a view that masks its children and not itself
+     * needs, as `<gradient-text>` is.
+     */
+    paintOn(node, child) {
+        node.paintsOn = child;
+        this.markProps(node, false);
+        this.markProps(child, false);
+    }
+    /**
+     * Keep a prop the node already has as an attribute: on the node for a selector such as
+     * `:host([variant='primary'])` to match, and left out of what is committed to the native view.
+     * It is committed again once the prop is next written. What the platform adapter does with a
+     * static attribute that is an input of the host's component.
+     */
+    keepAsAttribute(node, key) {
+        if (!(key in node.props))
+            return;
+        (node.attributeOnly ??= new Set()).add(key);
+        this.markProps(node, false);
+    }
+    /**
+     * Whether a node's inline style can change what it or anything below it resolves to: it sets,
+     * or until now set, a property its children inherit.
+     */
+    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 +2288,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`.
@@ -1696,11 +2361,35 @@ export class Engine {
             // state, though nothing about the sibling moved. Only sheets that ask about siblings pay.
             if (this.structuralSheets)
                 this.markLaterSiblings(node);
+            if (this.hasSheets)
+                this.markBeneath(node.parent);
         }
         // The root has no parent to carry the mark, so it carries its own: `.dark` on the root alone
         // restyles everything beneath it.
         this.markPath(node.parent ?? node);
     }
+    /** Start matching ancestors again on a change, once a sheet that uses `:has()` is in play. */
+    watchHas(sheet) {
+        if (!sheet?.has || this.hasSheets)
+            return;
+        this.hasSheets = true;
+        this.styles.tracksHas = true;
+        // What is already resolved kept no record of the rules it matched: resolve it again. Nothing
+        // is, when the sheet is the one the engine was made with.
+        if (!this.root)
+            return;
+        this.root.styleDirty = true;
+        this.markPath(this.root);
+    }
+    /**
+     * Something at or beneath `from` changed: every node from there up may match a `:has()` rule
+     * it did not, or stop matching one. They are matched again rather than marked for restyling,
+     * which would restyle everything under them. Only sheets that use `:has()` pay.
+     */
+    markBeneath(from) {
+        for (let node = from; node; node = node.parent)
+            node.hasDirty = true;
+    }
     markLaterSiblings(node) {
         const siblings = node.parent?.children;
         if (!siblings)
@@ -1709,7 +2398,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,7 +2407,13 @@ 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);
         }
+        if (this.hasSheets)
+            this.markBeneath(node);
         this.markPath(node.parent);
     }
     /** Walk up until we hit a node already known to have a dirty subtree. */
@@ -1780,10 +2476,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 +2618,24 @@ 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, node.attributeOnly);
         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);
+        if (node.props['style']) {
+            this.styles.overOtherForms(flattenStyle(node.props['style'], {}), style);
+        }
+        nativePointerEvents(node, style, resolved);
+        // Before an image's own size: `fit-content` is no size, so the image's is what it gets.
+        fitContent(node, style);
+        percentHeight(node, style);
         const intrinsic = node.props[INTRINSIC_SIZE];
         if (intrinsic)
             applyIntrinsicSize(style, intrinsic);
         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)
@@ -1897,8 +2643,53 @@ export class Engine {
         alignMultiline(viewName, style);
         const merged = composeTransform(node, this.animated(node, this.transitioned(node, style)));
         centreSingleLine(viewName, merged, this.fontScale);
+        this.movePaint(node, merged);
         return merged;
     }
+    /**
+     * Leave a node's background out of what it commits when a child paints it, and give that child
+     * its parent's: the cascade's, and over it the parent's inline style.
+     */
+    movePaint(node, merged) {
+        if (node.paintsOn)
+            for (const key of PAINT_KEYS)
+                delete merged[key];
+        const from = node.parent?.paintsOn === node ? node.parent : null;
+        if (!from)
+            return;
+        const paint = flattenStyle(from.props['style'], {
+            ...this.styles.resolve(from, this.styleEpoch).style,
+        });
+        for (const key of PAINT_KEYS)
+            if (paint[key] !== undefined)
+                merged[key] = paint[key];
+    }
+    /**
+     * A container whose direction or alignment changed since a child with a `fit-content` size
+     * read it, or whose height stopped or started being one a percentage is taken of since a child
+     * with a percentage height asked: those children are merged again. A change to a container
+     * marks nothing beneath it, since none of these is inherited.
+     */
+    refitChildren(node) {
+        // Both are asked, and both remembered, before either has the children merged again.
+        const basis = node.heightBasis;
+        const based = basis !== undefined && definiteHeight(node) !== basis;
+        const fitted = node.fitContainer !== undefined && containerOf(node) !== node.fitContainer;
+        if (fitted)
+            node.fitContainer = containerOf(node);
+        if (based || fitted)
+            this.refit(node);
+    }
+    /** Have a container's children merged again, through any `display: contents` among them. */
+    refit(container) {
+        for (const child of container.children) {
+            if (child.kind !== 'element')
+                continue;
+            child.propsDirty = true;
+            if (containerOf(child) === 'contents')
+                this.refit(child);
+        }
+    }
     /**
      * The text size cap that lays a paragraph or text input out again once a face it names has
      * registered: a step per face above the app's own cap where it set one (below 1 is none, on
@@ -1972,6 +2763,8 @@ export class Engine {
     sheetReplaced(sheet, next) {
         if (sheet === next && this.knownSheets.has(sheet))
             return;
+        this.unwatchActive(sheet);
+        this.watchActive(next);
         const at = this.sheetOrder.indexOf(sheet);
         if (at === -1) {
             this.registerSheet(next);
@@ -1981,14 +2774,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 +2822,25 @@ 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) {
+        const named = (text) => {
+            if (typeof text?.committed?.props['fontFamily'] === 'string')
+                this.markProps(text, false);
+        };
+        for (const child of node.children) {
+            // The paragraph of a run of text written straight into a view is kept on the text.
+            if (child.kind === 'text')
+                named(child.box);
+            if (child.kind !== 'element')
+                continue;
+            named(child);
+            this.markFontText(child);
+        }
+    }
     knownSheets = new WeakSet();
     /**
      * Start, advance or stop the `@keyframes` animation a node's style asks for.
@@ -2044,6 +2855,7 @@ export class Engine {
             this.stopScrolled(node);
         if (!spec) {
             if (node.playing) {
+                this.cancelPlaying(node);
                 node.playing = undefined;
                 this.playing.delete(node);
             }
@@ -2051,12 +2863,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 +2877,116 @@ 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;
+        this.stopNative(node, node.playing);
+        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)
+            this.stopNative(node, running);
+        if (running && !running.done)
+            this.emitTransition(node, 'topAnimationcancel', running.spec.name);
+    }
+    /** Stop on native each animation whose view has left the tree. */
+    releasePlayedNatively() {
+        for (const node of [...this.playedNatively]) {
+            if (this.topOf(node) === this.root)
+                continue;
+            this.stopNative(node, node.playing);
+            node.playing = undefined;
+            this.markProps(node, false);
+        }
+    }
+    /** Every node whose animation native is playing, with no frame of it in JavaScript. */
+    playedNatively = new Set();
+    /**
+     * Hand an animation that has just started to native, where native can play it: one that moves
+     * only opacity and transforms, starts at once, and repeats a whole number of times. Native then
+     * runs it frame by frame, and JavaScript hears of it again when it ends. Anything else is
+     * played from here, a commit a frame. See `NativeScrollDriver.play`.
+     */
+    playNatively(node, running, props) {
+        const { spec } = running;
+        if (!this.scrollDriver || spec.delay !== 0 || spec.duration <= 0)
+            return false;
+        const { channels, held, span } = clockChannels(running.tracks, spec, props);
+        if (held.length || !(channels.opacity || channels.transform.length))
+            return false;
+        // There and back is one native animation: an odd number of ways has no whole number of them.
+        const count = spec.iterations === null ? -1 : spec.iterations / span;
+        if (count !== -1 && !(Number.isInteger(count) && count > 0))
+            return false;
+        const length = Math.max(2, Math.round((spec.duration * span) / NATIVE_FRAME) + 1);
+        const frames = Array.from({ length }, (_, i) => i / (length - 1));
+        const native = this.scrollDriver.play(node, channels, { frames, toValue: span, iterations: count }, (view) => this.tagOf(view), () => this.endedNatively(node, running));
+        if (!native)
+            return false;
+        running.native = native;
+        // As Animated does: Fabric flattens a view that only lays out, and then there is no native
+        // view for the animation to move.
+        running.values = { ...running.values, collapsable: false };
+        this.playedNatively.add(node);
+        return true;
+    }
+    /**
+     * Native reached the end of an animation it was playing. The frame it ends at, or the resting
+     * style where it does not fill, is committed before the view is let go, so nothing shows of
+     * the frame it started at, which is what the view had been committed with.
+     */
+    endedNatively(node, running) {
+        if (node.playing !== running || !running.native)
+            return;
+        const { native, spec } = running;
+        running.native = undefined;
+        this.playedNatively.delete(node);
+        const end = running.start + spec.duration * (spec.iterations ?? 1);
+        this.advancePlayer(node, Math.max(this.now(), end));
+        this.commit();
+        native.stop();
+    }
+    /** Take an animation back from native, which stops it there. The caller plays it on, or not. */
+    stopNative(node, running) {
+        if (!running.native)
+            return;
+        running.native.stop();
+        running.native = undefined;
+        this.playedNatively.delete(node);
+    }
+    /**
+     * Play on from JavaScript an animation native was playing, from where its clock has got to:
+     * what a pause, other frames or a view made again need, none of which native can be told of.
+     */
+    backToScript(node, running) {
+        if (!running.native)
+            return;
+        this.stopNative(node, running);
+        running.values = sample(running, this.now()).values;
+        if (!running.done && running.pausedAt === undefined)
+            this.playing.add(node);
+    }
     /** Start the clock on an animation, unless the node is already playing this one. */
     startPlaying(node, spec, frames, props) {
         const current = node.playing;
         const inherited = this.inheritedColour(node, frames);
         if (!current || !sameAnimation(current.spec, spec)) {
+            if (current && current.spec.name !== spec.name)
+                this.cancelPlaying(node);
+            else if (current)
+                this.stopNative(node, current);
             const started = {
                 spec,
                 tracks: tracksOf(frames, props, inherited),
@@ -2089,12 +3007,16 @@ export class Engine {
             node.playing = started;
             if (spec.paused)
                 started.pausedAt = this.now();
-            else
+            else if (!this.playNatively(node, started, props))
                 this.playing.add(node);
             this.emitTransition(node, 'topAnimationstart', spec.name);
             return;
         }
+        // A view made again is another view: the one native was moving is gone.
+        if (node.committed === null)
+            this.backToScript(node, current);
         if (this.playedFrames.get(current) !== frames || inherited !== current.inherited) {
+            this.backToScript(node, current);
             this.reframe(node, current, frames, props, inherited);
         }
         this.playOrPause(node, node.playing, spec);
@@ -2132,6 +3054,7 @@ export class Engine {
         current.spec = spec;
         const now = this.now();
         if (spec.paused && current.pausedAt === undefined && !current.done) {
+            this.backToScript(node, current);
             current.pausedAt = now;
             this.playing.delete(node);
         }
@@ -2160,10 +3083,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 +3200,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 +3314,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 +3327,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;
         }
@@ -2442,7 +3365,8 @@ export class Engine {
      *
      * A stop's colour is a colour like any other, but it is two levels down and nothing else looks
      * there: without this the device is handed the string `rgb(255, 0, 0)` where it wants a number,
-     * and paints nothing.
+     * and paints nothing. The stops are first rewritten so native's interpolation paints what
+     * CSS's premultiplied one does (see `premultipliedStops`).
      */
     processGradients(value) {
         if (!Array.isArray(value))
@@ -2453,7 +3377,7 @@ export class Engine {
                 return entry;
             return {
                 ...gradient,
-                colorStops: gradient.colorStops.map((stop) => ({
+                colorStops: premultipliedStops(gradient.colorStops).map((stop) => ({
                     ...stop,
                     color: this.color(stop.color),
                 })),
@@ -2475,8 +3399,12 @@ export class Engine {
         if (this.isClean(node) && !styleChanged)
             return node.committed.handle;
         node.styleCommitted = style;
-        const viewName = viewNameOf(node);
+        repaint(node);
+        this.refitChildren(node);
+        const viewName = committedViewName(node);
+        this.forgetRenamed(node, viewName);
         const childHandles = this.reconcileChildren(node, viewName, style);
+        noteTouches(node, style);
         const previous = node.committed;
         this.notePresented(node, viewName);
         if (!previous)
@@ -2495,7 +3423,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 +3461,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 +3596,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 +3613,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 +3660,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,24 +3729,29 @@ 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) {
-        if (node.kind !== 'element' || node.claimed || !PRIMITIVE_NAMES.has(node.name))
+        // The paragraph the engine wraps loose text in is its own: no template wrote it.
+        if (node.kind !== 'element' || node.claimed || node.anonymous)
+            return;
+        if (!PRIMITIVE_NAMES.has(node.name))
             return;
         if (this.reported.has(node.name))
             return;
         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 +3762,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 +3997,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.
      *