@ng-native/fabric 0.13.0 → 0.15.0

package/dist/engine.js

@@ -7,7 +7,7 @@
  * because a persistent parent holds references to specific child handles. That bubble is
  * inherent and is what React's own Fabric renderer does.
  */
-import { boundDeclaration, faded, fills, inlineInherited, setsInherited, StyleResolver, usesActive, elementsAtEnd, hasAbove, placeReadElsewhere, siblingReach, } from "./css.js";
+import { boundDeclaration, boundRelativeLength, CSS_SPACE, isNegativeLineHeight, faded, fills, inlineInherited, setsInherited, StyleResolver, usesActive, elementsAtEnd, hasAbove, joinSubjects, placeReadElsewhere, siblingReach, } from "./css.js";
 import { applyAria } from "./aria-props.js";
 import { STYLED_ELEMENTS } from "./element-styles.js";
 import { aimsElsewhere, animationEvent, bezier, interpolate, readsInheritedColour, sample, step, steppedKeys, tracksOf, } from "./transition.js";
@@ -15,7 +15,7 @@ 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 { clockChannels, colourChannels, firstFrame, movesByShare, rangeOf, scrollChannels, sharesAsPoints, } from "./scroll-animation.js";
+import { clockChannels, colourChannels, firstFrame, heldTransform, movesByShare, rangeOf, scrollChannels, sharesAsPoints, } from "./scroll-animation.js";
 import { FontFaces } from "./font-faces.js";
 import { premultipliedStops } from "./premultiplied-stops.js";
 /**
@@ -189,6 +189,13 @@ const VIEW_EVENT_OPT_IN_PROPS = {
         topError: 'shouldNotifyLoadEvents',
         topProgress: 'shouldNotifyLoadEvents',
     },
+    // `ReactTextInputManager` watches each of these only behind a prop of the handler's name,
+    // which `TextInput.js` sets by passing the handler through. iOS's field sends them unasked.
+    AndroidTextInput: {
+        topContentSizeChange: 'onContentSizeChange',
+        topScroll: 'onScroll',
+        topKeyPress: 'onKeyPress',
+    },
 };
 /**
  * Props the engine itself writes or reads off a node, so never a misspelling: the style, the
@@ -461,10 +468,14 @@ const blockEdge = (props, side, logical) => [
 /**
  * A multiline field's `rows` as its height, where it was given none: that many lines of its
  * line height at the system text size, inside its padding and border, as a browser sizes a `<textarea>`. A native field
- * is as tall as its text, which is one line before anything is typed.
+ * is as tall as its text, which is one line before anything is typed. Taken off the props once
+ * read: neither platform's native field has a prop of that name.
  */
-function rowsTall(props, fontScale) {
+function rowsTall(viewName, props, fontScale) {
+    if (!TEXT_INPUTS.has(viewName))
+        return;
     const rows = Number(props['rows']);
+    delete props['rows'];
     const line = props['lineHeight'];
     if (props['multiline'] !== true || !(rows > 0) || typeof line !== 'number')
         return;
@@ -837,6 +848,12 @@ function placeholderFaded(props) {
     else if (opacity <= 0)
         props['placeholderTextColor'] = 'rgba(0, 0, 0, 0)';
 }
+/**
+ * What a removed prop travels as: null, which native resets the prop on, except `pointerEvents`,
+ * which react-native-svg's Android root reads as a string and stops the app on a null. `auto` is
+ * what no value means.
+ */
+const cleared = (key) => (key === 'pointerEvents' ? 'auto' : null);
 /** The least alpha iOS sends a touch to a view at: under a hundredth it is passed over. */
 const TOUCHED_ALPHA = 0.011;
 /**
@@ -854,6 +871,133 @@ function stillTouched(props) {
         props['opacity'] = TOUCHED_ALPHA;
     return props;
 }
+/** Every prop `setOwned` can set, as a payload that changes them all. */
+const RESET_OWNED = { opacity: undefined, transform: undefined };
+/** As Animated does: a view native sets values on is kept, or there is no view to set them on. */
+function keptForNative(node, props) {
+    if (node.owned && props['collapsable'] === undefined)
+        props['collapsable'] = false;
+}
+/**
+ * How a paragraph is truncated, which native does by its props: one the engine made around a
+ * view's own words is truncated as the view says, as a browser truncates a block's own text.
+ */
+const TRUNCATION = ['numberOfLines', 'ellipsizeMode'];
+/**
+ * The truncation each paragraph made around a view's words was merged with, as the view said it.
+ * Not what it was committed with, which has the paragraph's own defaults in it.
+ */
+const truncatedBy = new WeakMap();
+/** What a view says of how its own words are truncated. */
+const truncationOf = (parent) => TRUNCATION.map((key) => ownLayout(parent, key) ?? null);
+/** Whether a paragraph made around a view's words is truncated other than the view now says. */
+function truncationMoved(box, parent) {
+    const merged = truncatedBy.get(box);
+    if (!merged)
+        return false;
+    return truncationOf(parent).some((said, at) => said !== merged[at]);
+}
+function truncatedAs(box, props) {
+    if (!box.anonymous || !box.parent)
+        return;
+    const said = truncationOf(box.parent);
+    truncatedBy.set(box, said);
+    TRUNCATION.forEach((key, at) => {
+        if (said[at] !== null)
+            props[key] = said[at];
+    });
+}
+/**
+ * Stretch the lines of a wrapping flex container that says nothing of `align-content`, as CSS
+ * starts them (`normal`, which is `stretch` in a flex container). Yoga starts them at
+ * `flex-start`, as tall as what is in them, where an item that stretches across its line has
+ * no size. A container that does not wrap has one line, which Yoga stretches already.
+ */
+function wrappedLinesStretch(props) {
+    const wraps = props['flexWrap'] === 'wrap' || props['flexWrap'] === 'wrap-reverse';
+    if (wraps && props['alignContent'] == null)
+        props['alignContent'] = 'stretch';
+}
+/**
+ * A flex item that stretches across its line, with its size across the line `auto`, as CSS has
+ * it: as wide as a column, or as tall as a row, where Yoga takes the ratio over the stretch. In a
+ * column, a height given leaves the ratio nothing to work out. In a row, the line is as tall as
+ * the ratio makes the item from its width, at least, which is then the item's least height.
+ *
+ * ponytail: a width in points that does not grow, in a row, with any least or most height in
+ * points. One that grows, or is a share, keeps the ratio, as Yoga has it. A plain view only: an image keeps its picture's proportions.
+ */
+function stretchedOverRatio(node, props) {
+    if (!isSet(props['aspectRatio']) || props['position'] === 'absolute')
+        return;
+    if (viewNameOf(node) !== DEFAULT_VIEW)
+        return;
+    const parent = layoutParent(node);
+    if (!parent)
+        return;
+    const container = containerOf(parent);
+    // Remembered on the container, so the item is merged again when its direction changes.
+    parent.fitContainer = container;
+    const [direction, align] = container.split(' ');
+    if (align !== 'stretch' || !stretchesAcross(props, direction === 'row'))
+        return;
+    if (direction === 'row')
+        ratioAsLeast(props);
+    else if (isSet(props['height']) && props['height'] !== 'auto')
+        delete props['aspectRatio'];
+}
+/** Whether an item stretches across its line: its own size and margins across it are `auto`. */
+function stretchesAcross(props, row) {
+    if (!STRETCHES.has(props['alignSelf']))
+        return false;
+    const size = row ? 'height' : 'width';
+    if (isSet(props[size]) && props[size] !== 'auto')
+        return false;
+    const sides = row
+        ? MARGINS_ACROSS_ROW
+        : props['direction'] === 'rtl'
+            ? MARGINS_ACROSS_COLUMN_RTL
+            : MARGINS_ACROSS_COLUMN;
+    return sides.every((keys) => keys.map((key) => props[key]).find(isSet) !== 'auto');
+}
+/** The margins across a line, a side each, as Yoga reads them: the first set wins. */
+const MARGINS_ACROSS_ROW = [
+    ['marginTop', 'marginVertical', 'margin'],
+    ['marginBottom', 'marginVertical', 'margin'],
+];
+const MARGINS_ACROSS_COLUMN = [
+    ['marginStart', 'marginLeft', 'marginHorizontal', 'margin'],
+    ['marginEnd', 'marginRight', 'marginHorizontal', 'margin'],
+];
+/** Right to left, where the start is the right side. */
+const MARGINS_ACROSS_COLUMN_RTL = [
+    ['marginEnd', 'marginLeft', 'marginHorizontal', 'margin'],
+    ['marginStart', 'marginRight', 'marginHorizontal', 'margin'],
+];
+/** In a row, the height a ratio gives a width in points, as the item's least height. */
+function ratioAsLeast(props) {
+    const [width, ratio] = [props['width'], props['aspectRatio']];
+    if (typeof width !== 'number' || typeof ratio !== 'number' || ratio <= 0)
+        return;
+    const [least, most] = [props['minHeight'], props['maxHeight']];
+    const inPoints = (bound) => !isSet(bound) || typeof bound === 'number';
+    if (props['boxSizing'] === 'content-box' || !inPoints(least) || !inPoints(most))
+        return;
+    if (sizedAlong(props))
+        return;
+    props['minHeight'] = heldTo(width / ratio, least, most);
+    delete props['aspectRatio'];
+}
+/** Whether an item's width is not what it is along its line: it has a basis, or it grows. */
+function sizedAlong(props) {
+    const basis = props['flexBasis'];
+    return (isSet(basis) && basis !== 'auto') || Number(props['flexGrow'] ?? props['flex'] ?? 0) > 0;
+}
+/** A height held to the least and most given, which CSS keeps: the least wins over the most. */
+function heldTo(height, least, most) {
+    const under = typeof most === 'number' ? Math.min(height, most) : height;
+    return typeof least === 'number' ? Math.max(under, least) : under;
+}
 /**
  * Leave `aspect-ratio` out for a box with both a width and a height. CSS takes the ratio only
  * for a size that is `auto`; Yoga takes it over one of two that are given, the height in a
@@ -879,6 +1023,20 @@ function colourless(props, side, flipped) {
  * Each side a border has: its width, its colour, and the logical colour React Native takes for
  * it too, read left to right and, `flipped`, right to left.
  */
+const BORDER_DRAWN = /^border\w*(Width|Style)$/;
+const BORDER_COLOUR = /^border\w*Color$/;
+/**
+ * Send a border's colours again with an update that gives it a width or a style: Android draws
+ * the border black when that update does not carry its colour, though it was given one before.
+ * A box made without a border and given one later, a file attachment that is done, has one.
+ */
+function borderColoursAgain(payload, props) {
+    if (!Object.keys(payload).some((key) => BORDER_DRAWN.test(key)))
+        return;
+    for (const key in props)
+        if (BORDER_COLOUR.test(key) && !(key in payload))
+            payload[key] = props[key];
+}
 const BORDER_SIDES = [
     ['Top', 'BlockStart', 'BlockStart'],
     ['Right', 'End', 'Start'],
@@ -970,14 +1128,63 @@ function lineTall(props, run, fontScale) {
 }
 /** The points of padding and border above and below a view's content, where each is a length. */
 function aroundALine(props) {
-    const edge = (...keys) => {
+    return around(props, 'Height');
+}
+/**
+ * The props each side's padding and border are read from, across a height and across a width,
+ * the first set winning, as React Native and then Yoga read them: an alias of React Native's over
+ * Yoga's own, a logical side over the physical one, and the start on the left unless the box is
+ * right to left. A block's start and end are under the top and bottom.
+ */
+function sides(props, size) {
+    if (size === 'Height') {
+        const block = ['paddingBlock', 'paddingVertical', 'padding'];
+        return [
+            ['paddingTop', 'paddingBlockStart', ...block],
+            ['borderTopWidth', 'borderWidth'],
+            ['paddingBottom', 'paddingBlockEnd', ...block],
+            ['borderBottomWidth', 'borderWidth'],
+        ];
+    }
+    const rtl = props['direction'] === 'rtl';
+    const inline = ['paddingInline', 'paddingHorizontal', 'padding'];
+    return ['Left', 'Right'].flatMap((physical, at) => {
+        const logical = (at === 0) !== rtl ? 'Start' : 'End';
+        return [
+            [`paddingInline${logical}`, `padding${logical}`, `padding${physical}`, ...inline],
+            [`border${logical}Width`, `border${physical}Width`, 'borderWidth'],
+        ];
+    });
+}
+/** The points of padding and border across a view's height or width, where each is a length. */
+function around(props, size) {
+    let total = 0;
+    for (const keys of sides(props, size)) {
         const found = keys.map((key) => props[key]).find((value) => value != null);
-        return typeof found === 'number' ? found : 0;
-    };
-    return (edge('paddingTop', 'paddingVertical', 'padding') +
-        edge('paddingBottom', 'paddingVertical', 'padding') +
-        edge('borderTopWidth', 'borderWidth') +
-        edge('borderBottomWidth', 'borderWidth'));
+        if (typeof found === 'number')
+            total += found;
+    }
+    return total;
+}
+/** The most and the least of each size, by name: asked of every node merged. */
+const MOST = { Height: 'maxHeight', Width: 'maxWidth' };
+const LEAST = { Height: 'minHeight', Width: 'minWidth' };
+/**
+ * A most size under the least: under a `min-height`, or a border box's padding and border, which
+ * CSS lets win (CSS 2.2, 10.7). React Native's Yoga holds the box to its most, and the box around
+ * it to that, so the most is raised to the least. A most and a least in points: a share on either
+ * side is left to Yoga.
+ */
+function leastWins(props, size) {
+    const most = props[MOST[size]];
+    if (typeof most !== 'number')
+        return;
+    const written = props[LEAST[size]];
+    let least = typeof written === 'number' ? written : 0;
+    if (props['boxSizing'] !== 'content-box')
+        least = Math.max(least, around(props, size));
+    if (most < least)
+        props[MOST[size]] = least;
 }
 /**
  * Where a line may break: at a space, after a hyphen, and anywhere in a script written without
@@ -1096,8 +1303,18 @@ export function registerViewName(elementName, viewName, defaultProps, options) {
             LOOSE_TEXT[name] = options.looseText;
         else
             delete LOOSE_TEXT[name];
+        if (options?.fontNames)
+            FONT_NAMES[name] = options.fontNames;
+        else
+            delete FONT_NAMES[name];
     }
 }
+/** How each view that names fonts in its own props rewrites them. See `ViewNameOptions`. */
+const FONT_NAMES = {};
+/** Rewrites the fonts a view's own props name, for a view that says how. See `ViewNameOptions`. */
+function renameFonts(viewName, props, postScriptName) {
+    FONT_NAMES[viewName]?.(props, postScriptName);
+}
 /** The element loose text in a view is drawn by, for the views that say. See `ViewNameOptions`. */
 const LOOSE_TEXT = {};
 /** The registered names that give way to a component's own host. See `ViewNameOptions`. */
@@ -1245,6 +1462,10 @@ const SCROLL_VIEWS = new Set(['ScrollView', 'AndroidHorizontalScrollView']);
 const HOISTS = {};
 /** The `ancestorName`s, so a commit asks only those nodes what to hoist into them. */
 const HOIST_TARGETS = new Set();
+/** The `ancestorName`s that commit only what is hoisted into them. See `HoistOptions.only`. */
+const HOIST_ONLY = new Set();
+/** Element name -> the ancestor names it never hoists past. See `HoistOptions.stopAt`. */
+const HOIST_STOPS = {};
 /**
  * Commit every `elementName` as a direct child of its nearest `ancestorName`, wherever the
  * template put it, e.g. `registerHoist('native-header', 'screen')`.
@@ -1263,6 +1484,12 @@ export function registerHoist(elementName, ancestorName, options = {}) {
     HOIST_TARGETS.add(ancestorName);
     if (options.standIn)
         STAND_INS[elementName] = options.standIn;
+    if (options.only)
+        HOIST_ONLY.add(ancestorName);
+    if (options.stopAt)
+        HOIST_STOPS[elementName] = new Set(options.stopAt);
+    else
+        delete HOIST_STOPS[elementName];
 }
 /** Element name -> the props it leaves behind in its ancestor. See `HoistOptions.standIn`. */
 const STAND_INS = {};
@@ -1295,10 +1522,12 @@ function paragraphText(node) {
     // 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;
+    // A text element a view stands in for, which places what it holds: no paragraph runs past it.
+    const inParagraph = (above) => isTextElement(above) && !aligningText(above);
     // The commonest paragraph by far: one run and nothing else, so it is both the first and last.
-    if (root.children.length === 1 && !isTextElement(root.parent))
+    if (root.children.length === 1 && !inParagraph(root.parent))
         return trimEnds(node.text);
-    while (isTextElement(root.parent))
+    while (inParagraph(root.parent))
         root = root.parent;
     const runs = [];
     const collect = (from) => {
@@ -1326,12 +1555,12 @@ function paragraphText(node) {
 function isTextElement(node) {
     if (node === null || node.kind !== 'element')
         return false;
-    if (node.name === 'text')
+    if (node.tag === 'text')
         return true;
     // One lookup settles nearly every other element, which is a view.
-    if (registeredViewName(node.name) !== PARAGRAPH)
+    if (registeredViewName(node.tag) !== PARAGRAPH)
         return false;
-    return !TEXT_ELEMENTS.has(node.name) || holdsOnlyText(node);
+    return !TEXT_ELEMENTS.has(node.tag) || holdsOnlyText(node);
 }
 /** Whether a text element holds text and nothing else. One that holds nothing holds no text. */
 function holdsOnlyText(node) {
@@ -1351,25 +1580,48 @@ const ALIGNS = new Set(['center', 'flex-end', 'space-around', 'space-evenly']);
  * 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. The run can be a text element of its own, a label in a
- * span, which is then the item placed. A `<text>` is a paragraph whatever its style, and an
- * element holding more than the one run is left as it was.
+ * span, which is then the item placed. So is a column of text elements, each an item under the
+ * last. A `<text>` is a paragraph whatever its style, and any other 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)) {
+    if (node.kind !== 'element' || node.tag === 'text' || !TEXT_ELEMENTS.has(node.tag)) {
         return false;
     }
-    if (node.children.length !== 1 || !oneRun(node.children[0]))
+    const stacked = stacksRuns(node);
+    if (!stacked && (node.children.length !== 1 || !oneRun(node.children[0])))
         return false;
     // Under a text element it is a span of that paragraph, unless that one is a view placing it.
     if (isTextElement(node.parent) && !aligningText(node.parent))
         return false;
+    return placesByFlex(node, stacked);
+}
+/** Whether a flex container's own style places the run it holds, or stacks the runs it holds. */
+function placesByFlex(node, stacked) {
     if (ownLayout(node, 'display') !== 'flex')
         return false;
+    // A column of them: each a line of its own, where one paragraph would run them on.
+    if (stacked)
+        return String(ownLayout(node, 'flexDirection') ?? 'column').startsWith('column');
     return (ALIGNS.has(ownLayout(node, 'alignItems')) ||
         ALIGNS.has(ownLayout(node, 'justifyContent')));
 }
+/**
+ * Whether a text element holds two or more text elements and nothing else but whitespace and
+ * the anchors control flow leaves: a label around a name and a hint, which a flex column has one under the other.
+ */
+function stacksRuns(node) {
+    let runs = 0;
+    for (const child of node.children) {
+        if (child.kind === 'element' && TEXT_ELEMENTS.has(child.tag))
+            runs++;
+        else if (child.kind === 'text' ? trimEnds(child.text) : child.kind !== 'anchor')
+            return false;
+    }
+    return runs > 1;
+}
 /** One run of text to place: text itself, or a text element around some, a label in a span. */
-const oneRun = (child) => child.kind === 'text' || (child.kind === 'element' && TEXT_ELEMENTS.has(child.name));
+const oneRun = (child) => child.kind === 'text' || (child.kind === 'element' && TEXT_ELEMENTS.has(child.tag));
 /** 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);
 /**
@@ -1388,14 +1640,14 @@ export function viewNameOf(node) {
     // Committing a nested `<text>` as another Paragraph gives a paragraph inside a paragraph,
     // which lays out as a separate block instead of flowing inline.
     // 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))
+    if (node.componentHost && !node.nativeView && YIELDING.has(node.tag))
         return DEFAULT_VIEW;
-    const registered = registeredViewName(node.name);
+    const registered = registeredViewName(node.tag);
     // 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)) {
+    if (node.tag !== 'text' && TEXT_ELEMENTS.has(node.tag) && !holdsOnlyText(node)) {
         return DEFAULT_VIEW;
     }
     // The paragraph the engine makes for a view's loose text is under a view, whatever the name
@@ -1544,6 +1796,8 @@ const EASED_COLOURS = new Set([
     'borderLeftColor',
 ]);
 const NATIVELY_EASED = new Set(['opacity', 'transform', ...EASED_COLOURS]);
+/** What a node that hands its background colour over has handed so far: nothing. */
+const UNREPORTED = Symbol('unreported');
 /** The style keys that are a view's background. */
 const PAINT_KEYS = [
     'backgroundColor',
@@ -1552,6 +1806,15 @@ const PAINT_KEYS = [
     'experimental_backgroundPosition',
     'experimental_backgroundRepeat',
 ];
+/** Note a prop written on a node that keeps `writes`: see there. */
+function noteWrite(node, key, value) {
+    if (!node.writes)
+        return;
+    if (value === undefined || value === null)
+        node.writes.delete(key);
+    else
+        node.writes.add(key);
+}
 /**
  * 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
@@ -1718,6 +1981,17 @@ function reportHover(host) {
     hoverReported = true;
     console.warn('[angular-native] @defer (on hover) fires when a pointer enters the trigger, which takes a trackpad or a mouse (an iPad, or an Android device with one), or when the trigger takes focus. On a phone it waits for focus alone; add another trigger, such as on interaction or on viewport.');
 }
+/** A bound value the cascade works out from tokens: a `var()`, a `color-mix()`, a relative colour. */
+const BOUND_TOKEN = /^[ \t\n\r\f]*(?:var|color-mix)\(|^[ \t\n\r\f]*[a-z]+\([ \t\n\r\f]*from[ \t\n\r\f]/i;
+/**
+ * A bound value kept as a declaration the cascade settles: a `var()`, a colour made of tokens, or
+ * a relative length.
+ */
+function boundFrom(prop, text, on) {
+    return BOUND_TOKEN.test(text)
+        ? boundDeclaration(prop, tokenFromValue(text), on)
+        : boundRelativeLength(prop, text, on);
+}
 /** Whether a value is one of the engine's own nodes. */
 export function isEngineNode(value) {
     return value instanceof RetainedNode;
@@ -1777,17 +2051,18 @@ class RetainedNode {
     transitions;
     playing;
     scrolled;
+    owned;
     kind;
-    name;
+    tag;
     /** See `HostNode.host`. */
     host;
-    constructor(kind, name, host) {
+    constructor(kind, tag, host) {
         this.kind = kind;
-        this.name = name;
+        this.tag = tag;
         this.host = host;
     }
     get tagName() {
-        return this.name;
+        return this.tag;
     }
     /** Angular's dev-mode assertion compares this against `Node.ELEMENT_NODE`. */
     get nodeType() {
@@ -2102,6 +2377,26 @@ function applyIntrinsicSize(props, size) {
     }
 }
 const now = () => globalThis.performance?.now?.() ?? Date.now();
+/** How many boxes `node` is under. */
+/**
+ * How deep a node is, with the depth of every box on its way up kept in `known`: the boxes that
+ * changed beneath are a node and its ancestors, so each is counted once, not once a box.
+ */
+function depthOf(node, known) {
+    const path = [];
+    let depth = -1;
+    for (let up = node; up; up = up.parent) {
+        const found = known.get(up);
+        if (found !== undefined) {
+            depth = found;
+            break;
+        }
+        path.push(up);
+    }
+    for (let i = path.length - 1; i >= 0; i--)
+        known.set(path[i], ++depth);
+    return depth;
+}
 function sameHandles(a, b) {
     return a.length === b.length && a.every((handle, i) => handle === b[i]);
 }
@@ -2124,6 +2419,11 @@ function couldBe(compound, node) {
     return (compound.is ?? []).every((alternatives) => alternatives.some((option) => couldBe(option, node)));
 }
 const FRAME_BUDGET_MS = 8;
+/** A solid brush with no colour in it, which stops react-native-svg. */
+const emptyBrush = (value) => typeof value === 'object' &&
+    value !== null &&
+    value.type === 0 &&
+    value.payload == null;
 export class Engine {
     /** Scopes the CSS resolver's memo. Bumped once per commit. */
     styleEpoch = 0;
@@ -2214,7 +2514,7 @@ export class Engine {
         this.processColor = options.processColor ?? ((value) => value);
         this.resolveAssetSource = options.resolveAssetSource ?? ((value) => value);
         this.scrollDriver = options.nativeAnimated
-            ? new NativeScrollDriver(options.nativeAnimated)
+            ? new NativeScrollDriver(options.nativeAnimated, (view, tag, keys) => this.touchedNatively(view, tag, keys))
             : null;
         // Eagerly, not on the first listener. Fabric holds exactly one event handler and
         // `ReactFabric` installs React's at module scope, so until we claim it every native event
@@ -2262,15 +2562,29 @@ export class Engine {
      */
     setActiveChain(from, active) {
         let changed = false;
-        for (let node = from; node; node = node.parent) {
+        const set = (node) => {
             if (node.active === active)
-                continue;
+                return;
             node.active = active;
             this.markActive(node);
             changed = true;
+        };
+        for (let node = from; node; node = node.parent) {
+            set(node);
+            if (active)
+                this.activeNodes.add(node);
+        }
+        if (!active) {
+            // Every node the press set, too: one the pressed node was moved or removed from mid-press
+            // is no longer above it.
+            for (const node of this.activeNodes)
+                set(node);
+            this.activeNodes.clear();
         }
         return changed;
     }
+    /** The nodes a press has set `:active` on, to clear whatever happens to the tree meanwhile. */
+    activeNodes = new Set();
     /** Whether any sheet styles a pressed element, and each compound that asks about one from another. */
     activeUse = {
         own: false,
@@ -2563,7 +2877,7 @@ export class Engine {
         if (sheet === undefined || node.sheet === sheet)
             return;
         node.sheet = sheet;
-        this.styles.noteSheet(sheet);
+        this.styles.noteSheet(sheet, true);
         this.watchStructure(sheet);
         this.watchHas(sheet);
         this.watchActive(sheet);
@@ -2599,7 +2913,7 @@ export class Engine {
     createElement(name, sheet = null) {
         const node = new RetainedNode('element', name, this);
         node.sheet = sheet;
-        this.styles.noteSheet(sheet);
+        this.styles.noteSheet(sheet, true);
         const html = HTML_ELEMENTS.get(name);
         if (html !== undefined) {
             if (html.role)
@@ -2629,8 +2943,10 @@ export class Engine {
      * element matched again, and one named as what a rule's element is inside, `.animating .close`
      * or `.close:is(.animating *)`, the elements under the node that such rules are for. What is
      * under any of those is styled again from the rules it matched, for what it inherits: a `dark`
-     * class on the root finds no rule again for an element no `dark` rule is for. Any other class
-     * has the node and everything under it matched again, as any other change to it does.
+     * class on the root finds no rule again for an element no `dark` rule is for. One named in
+     * `:has()`, or answering a test of the class attribute there, has the boxes above the node
+     * asked again, and one named only in `:has(> )` the box right above it. Any other class has the node and everything under it matched again, as any
+     * other change to it does.
      *
      * A sheet that names a class later restyles what it is for as it arrives, and a node not yet
      * committed is styled when it is, with the class as it is then.
@@ -2649,8 +2965,43 @@ export class Engine {
             return;
         if (reach.own)
             node.ownDirty = true;
-        if (this.styles.reachesUnder(reach))
+        if (this.hasSheets && reach.beneath)
+            this.markBeneath(node.parent);
+        // `:has(> .on)`: only the box right above the node can answer it.
+        else if (this.hasSheets && reach.parentHas)
+            this.markBeneath(node.parent, node.parent?.parent);
+        if (this.styles.reachesUnder(reach)) {
+            this.classesAbove += 1;
             this.markUnder(node, reach);
+        }
+    }
+    /**
+     * How many class changes have restyled what is under an element. `markUnder` walks the tree as
+     * it is, so an element out of it then is not reached: one that comes back after any is matched
+     * again, with all that is under it.
+     */
+    classesAbove = 0;
+    /**
+     * The count when each element went out of the tree, for the ones still out. `detach` sets it
+     * for a node that only moves too, so `markReturned` runs after it and clears that.
+     */
+    outSince = new WeakMap();
+    /** Have matched again a node coming back into the tree that missed a class change above it. */
+    markReturned(child) {
+        const since = this.outSince.get(child);
+        if (since === undefined)
+            return;
+        this.outSince.delete(child);
+        if (since !== this.classesAbove)
+            this.markAllUnder(child);
+    }
+    markAllUnder(node) {
+        if (node.kind !== 'element')
+            return;
+        node.ownDirty = true;
+        this.markPath(node);
+        for (const child of node.children)
+            this.markAllUnder(child);
     }
     /**
      * Have matched again each element under a node that one of `subjects`' rules could be for. One
@@ -2676,8 +3027,9 @@ export class Engine {
         if (node.hostSheet === sheet)
             return;
         node.hostSheet = sheet;
-        this.styles.noteSheet(sheet);
+        this.styles.noteSheet(sheet, true);
         this.watchStructure(sheet);
+        this.watchHas(sheet);
         this.watchActive(sheet);
         this.markProps(node);
     }
@@ -2687,6 +3039,7 @@ export class Engine {
      * the web's mount point has, unless the app's `:host` sizes it otherwise.
      */
     setDefaultStyle(node, style) {
+        this.noteEasing(style);
         node.defaultStyle = style;
         // Under what the cascade comes to, and read by no selector: nothing is matched again.
         this.markProps(node, false);
@@ -2696,7 +3049,8 @@ export class Engine {
      * another order are a change too, to a selector that reads the class attribute, `[class^="a"]`.
      */
     setClasses(node, value) {
-        const names = value.split(/\s+/).filter(Boolean);
+        // By HTML's spaces, which are CSS's: a vertical tab or a no-break space is part of a name.
+        const names = value.split(CSS_SPACE).filter(Boolean);
         const before = node.classes;
         node.classes = names.length ? new Set(names) : null;
         // Each class that came or went: one in both changes nothing.
@@ -2719,6 +3073,7 @@ export class Engine {
     appendChild(parent, child) {
         this.markAdopted(child, parent);
         this.detach(child);
+        this.markReturned(child);
         child.parent = parent;
         parent.children.push(child);
         if (child.dormantHoists)
@@ -2729,6 +3084,7 @@ export class Engine {
     insertBefore(parent, child, ref) {
         this.markAdopted(child, parent);
         this.detach(child);
+        this.markReturned(child);
         child.parent = parent;
         const at = ref ? parent.children.indexOf(ref) : -1;
         if (at < 0)
@@ -2759,6 +3115,7 @@ export class Engine {
             return;
         target.children.splice(at, 1);
         child.parent = null;
+        this.outSince.set(child, this.classesAbove);
         this.removedSinceCommit.add(child);
         this.markStructure(target, child, at);
         this.markTextContent(target, child);
@@ -2846,7 +3203,26 @@ export class Engine {
             }
         }
         if (this.focusedNode && this.topOf(this.focusedNode) !== this.root)
-            this.focusedNode = null;
+            this.dropFocus();
+        this.dropDetachedPress();
+    }
+    /** A pressed node out of the tree gets no release: native has no view to end the touch on. */
+    dropDetachedPress() {
+        const pressed = this.currentResponder;
+        if (!pressed || this.topOf(pressed) === this.root)
+            return;
+        this.setActiveChain(pressed, false);
+        this.currentResponder = null;
+    }
+    /**
+     * Forget the focused node, which has left the tree without a blur: off the node as well as the
+     * engine, or a `:focus` rule styles it again when it is put back.
+     */
+    dropFocus() {
+        const node = this.focusedNode;
+        node.focused = false;
+        this.markProps(node);
+        this.focusedNode = null;
     }
     /** Forget the committed views of each node removed since the last commit that is still out. */
     forgetDetached() {
@@ -2893,7 +3269,7 @@ export class Engine {
         node.kept = undefined;
         // A field popped with the keyboard up never sends its blur.
         if (this.focusedNode === node)
-            this.focusedNode = null;
+            this.dropFocus();
     }
     parentNode(node) {
         return node.parent;
@@ -2904,7 +3280,46 @@ export class Engine {
             return null;
         return siblings[siblings.indexOf(node) + 1] ?? null;
     }
+    /**
+     * Whether any declaration the engine was given transitions or animates: until one does, a
+     * node's style is committed as it is, with nothing asked of what eases it. See `eased`.
+     */
+    eases = false;
+    noteEasing(declarations) {
+        if (this.eases || !declarations)
+            return;
+        for (const key in declarations) {
+            if (key.startsWith('$transition') || key.startsWith('$animation'))
+                this.eases = true;
+        }
+    }
+    /** A node's style as its transitions and animation have it: a declaration asks for one. */
+    eased(node, style) {
+        if (!this.eases)
+            return style;
+        return this.animated(node, this.transitioned(node, style));
+    }
+    /** Note a sheet any of whose rules transitions or animates: see `eases`. */
+    noteSheetEasing(sheet) {
+        for (const rule of this.eases ? [] : sheet.rules) {
+            this.noteEasing(rule.declarations);
+            this.noteEasing(rule.important);
+            // One a token holds: `animation: var(--motion)`.
+            for (const deferred of rule.deferred ?? []) {
+                this.noteEasing(Object.fromEntries(deferred.props.map((key) => [key, true])));
+            }
+        }
+    }
+    /** Note a prop, or a style set as one, that transitions or animates: see `eases`. */
+    noteEasingProp(key, value) {
+        this.noteEasing({ [key]: value });
+        if (key === 'style' || key === STYLE_OVERRIDE)
+            this.noteEasing(flattenStyle(value, {}));
+    }
     setProp(node, key, value) {
+        if (!this.eases)
+            this.noteEasingProp(key, value);
+        noteWrite(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);
@@ -2930,7 +3345,9 @@ export class Engine {
         // And only a prop some selector names: `aria-valuenow` on every tick of a progress bar, a
         // field's text on every key, match nothing they did not.
         const read = key === 'style' ? this.inlineReachesStyle(node) : this.styles.reads(key);
-        this.markProps(node, read || heirs);
+        // And restyles the elements after it only where a rule asks the prop of an element before
+        // another, `[data-on] ~ .x`: a point of a chart set as a finger moves leaves those after it.
+        this.markProps(node, read || heirs, this.styles.readsBeside(key));
         if (SIZES_A_RUN.has(key))
             this.markParagraph(node);
     }
@@ -2956,6 +3373,40 @@ export class Engine {
         this.markProps(node, false);
         this.markProps(child, false);
     }
+    /**
+     * Hand a node's background colour to `listener` instead of painting it: what its stylesheets,
+     * tokens and inline style resolve `background-color` to, or undefined for none. Called after
+     * each commit that changes it, the first one included. What a component needs whose colour is
+     * drawn by a native view the node is not, from a prop of that view's, as a bottom sheet's is.
+     * The function returned stops it, and the node paints its own background again.
+     */
+    takePaint(node, listener) {
+        node.paintTaker = listener;
+        node.paintTaken = UNREPORTED;
+        this.markProps(node, false);
+        return () => {
+            if (node.paintTaker !== listener)
+                return;
+            node.paintTaker = undefined;
+            this.paintReports.delete(node);
+            this.markProps(node, false);
+        };
+    }
+    /** Nodes whose background colour is to be handed over once the commit running ends. */
+    paintReports = new Set();
+    reportPaint() {
+        const nodes = [...this.paintReports];
+        this.paintReports.clear();
+        // One listener that throws stops neither the rest nor what the commit does after them.
+        for (const node of nodes) {
+            try {
+                node.paintTaker?.(node.paintTaken);
+            }
+            catch (error) {
+                this.reportEventError(error, 'paint');
+            }
+        }
+    }
     /**
      * 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.
@@ -2998,27 +3449,43 @@ export class Engine {
      * has changed for the props diff to notice.
      */
     styleChanged(node) {
-        this.markProps(node, this.inlineReachesStyle(node));
+        if (!this.eases)
+            this.noteEasingProp('style', node.props['style']);
+        // As `setProp` restyles for a new style object: a child that takes one of its values, an
+        // `inherit`, follows the one changed in place too.
+        this.markProps(node, this.inlineReachesStyle(node) || node.styleCache?.heirs === true);
         this.markParagraph(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.
+     * A bound declaration, `[style.color]`, whose value may be a `var()`, or a length in `em` or a
+     * viewport unit. One that is, is kept as a declaration the cascade settles with the node's
+     * tokens, font size and viewport, as a rule's is, and true is answered: the text is no value to
+     * put in the node's style. A negative `line-height` is dropped, with a warning, and true is
+     * answered too. 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);
+        const text = typeof value === 'string' ? value : undefined;
+        const refused = text !== undefined && this.refusedBound(node, prop, text);
+        const bound = text === undefined || refused ? null : boundFrom(prop, text, node.tag);
         if (!bound && !node.boundByProp?.has(prop))
-            return false;
+            return refused;
         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;
+        // Settled by the cascade as the node is styled, and asked about by no selector: nothing after
+        // the node matches otherwise for it.
+        this.markProps(node, true, false);
+        return bound !== null || refused;
+    }
+    /** Whether a bound value is one CSS has none of, which is dropped with a warning. */
+    refusedBound(node, prop, text) {
+        if (!isNegativeLineHeight(prop, text))
+            return false;
+        this.reportDroppedDeclaration('line-height', text, node.tag, 'it is negative');
+        return true;
     }
     /**
      * Set a custom property on a node, `--tint` from `[style.--tint]`, or remove it with `null`.
@@ -3074,7 +3541,7 @@ export class Engine {
         return () => set.delete(fn);
     }
     // --- dirty marking ----------------------------------------------------
-    markProps(node, affectsStyle = true) {
+    markProps(node, affectsStyle = true, beside = true) {
         node.propsDirty = true;
         // Classes, `nativeID` and anything else a selector can read live in props, so any of them
         // changing can change what this node matches, and through it what its whole subtree does.
@@ -3084,7 +3551,8 @@ export class Engine {
             node.styleDirty = true;
             // `.peer:focus ~ .label`: what a later sibling matches can hang on this node's classes and
             // state, though nothing about the sibling moved. Only sheets that ask about siblings pay.
-            if (this.structuralSheets)
+            // Not for a change `beside` says no rule asks of an element before another.
+            if (this.structuralSheets && beside)
                 this.markLaterSiblings(node);
             if (this.hasSheets)
                 this.markBeneath(node.parent);
@@ -3112,11 +3580,12 @@ export class Engine {
     }
     /**
      * 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.
+     * it did not, or stop matching one, up to `upTo` and not it. 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) {
+    markBeneath(from, upTo = null) {
+        for (let node = from; node && node !== upTo; node = node.parent) {
             node.hasDirty = true;
             if (this.hasReaders.size)
                 this.changedBeneath.add(node);
@@ -3133,20 +3602,49 @@ export class Engine {
      * Have matched again what is under each box that changed beneath and that such a rule could
      * be asking: the nodes the rule is for, and no other. Once for a commit, however many changes
      * there were beneath the box: a table gains its rows one at a time.
+     *
+     * A rule asked of a box above is walked under the highest box that asks it, which reaches what
+     * is under the boxes beneath that one as well: a rule `:has()` asks of any box is asked by every
+     * box from the change up to the root, and walked once, from the root. The rules a box asks are
+     * walked together, the tree beneath it once.
      */
     markUnderHas() {
         if (!this.changedBeneath.size)
             return;
-        for (const node of this.changedBeneath) {
-            for (const readers of this.hasReaders.values()) {
-                for (const { classes, subjects } of readers) {
-                    if (classes.every((name) => node.classes?.has(name)))
-                        this.markUnder(node, subjects);
-                }
-            }
+        const readers = [...this.hasReaders.values()].flat();
+        const depths = new Map();
+        for (const node of this.changedBeneath)
+            depthOf(node, depths);
+        const boxes = [...this.changedBeneath].sort((a, b) => depths.get(a) - depths.get(b));
+        // By box walked, the rules walked under it and under every box above it.
+        const walked = new Map();
+        for (const node of boxes) {
+            let above;
+            for (let up = node.parent; up && !above; up = up.parent)
+                above = walked.get(up);
+            const all = this.markUnderBox(node, readers, above);
+            if (all)
+                walked.set(node, all);
         }
         this.changedBeneath.clear();
     }
+    /**
+     * `markUnderHas` for one box: the rules it asks that no box above it was walked for, walked
+     * together. What was walked under it and above it, which is `above` where it asks no more.
+     */
+    markUnderBox(node, readers, above) {
+        const asked = [];
+        for (const reader of readers) {
+            if (above?.has(reader) || !reader.classes.every((name) => node.classes?.has(name)))
+                continue;
+            asked.push(reader);
+        }
+        if (!asked.length)
+            return above;
+        const subjects = asked.map((reader) => reader.subjects);
+        this.markUnder(node, subjects.length === 1 ? subjects[0] : joinSubjects(subjects));
+        return new Set([...(above ?? []), ...asked]);
+    }
     /**
      * What `node` matches changed, which the elements after it can read: as many of them as a rule
      * steps along from one, every one for a `~`, and none where no sheet steps at all.
@@ -3332,6 +3830,7 @@ export class Engine {
                 this.stats.slowCommits++;
         }
         this.flushTransitionEvents();
+        this.reportPaint();
         this.playSized();
         this.scrollDriver?.afterCommit();
         // Read first: the commit that settles keyframes starts by clearing it.
@@ -3340,8 +3839,17 @@ export class Engine {
             this.settleKeyframes();
         if (facesAdded)
             this.rematchFonts();
+        this.blurHidden();
         return true;
     }
+    /** A field went out of view focused, in the commit running: see `undisplayed`. */
+    blurAfterCommit = false;
+    blurHidden() {
+        if (!this.blurAfterCommit)
+            return;
+        this.blurAfterCommit = false;
+        this.setFocused(null);
+    }
     beforeCommit = null;
     announceCommit() {
         const run = this.beforeCommit;
@@ -3364,14 +3872,14 @@ export class Engine {
     /** 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 commit for what changed after earlier commits, before a frame has drawn them. `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.
+     * 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 before the frame after it was inserted, 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;
@@ -3531,6 +4039,7 @@ export class Engine {
         const resolved = props['pointerEvents'];
         writeOwnProps(node.props, props, node.attributeOnly);
         withTextContent(node, viewName, props);
+        truncatedAs(node, props);
         const cascaded = props['transform'];
         const inline = inlineOf(node);
         const style = boundTransform(node, Object.assign(props, inline), cascaded);
@@ -3547,6 +4056,8 @@ export class Engine {
         flattenStyle(node.props[STYLE_OVERRIDE], style);
         this.fontFaces.apply(style);
         holdLoadingFamily(node, style);
+        // Once the face is matched: a family a view's own font names is the face its weight chose.
+        renameFonts(viewName, style, this.postScriptName);
         if (viewName === PARAGRAPH) {
             alignText(style, this.directionOf(node, style));
             this.wholeWords(node, style);
@@ -3555,8 +4066,8 @@ export class Engine {
         if (this.fontsRefreshed)
             this.capForFonts(node, style);
         alignMultiline(viewName, style);
-        rowsTall(style, this.fontScale);
-        const merged = composeTransform(node, this.animated(node, this.transitioned(node, style)));
+        rowsTall(viewName, style, this.fontScale);
+        const merged = composeTransform(node, this.eased(node, style));
         // On iOS: Android's field says the baseline of the line it is sized and centred by.
         // Still under the row that marked it: a row taken away is not committed again to unmark it.
         const row = node.onBaseline;
@@ -3566,6 +4077,10 @@ export class Engine {
         basisAsSize(node, merged);
         // After the basis, which is a size given where it is committed as one.
         ratioForAutoSize(merged);
+        wrappedLinesStretch(merged);
+        stretchedOverRatio(node, merged);
+        leastWins(merged, 'Height');
+        leastWins(merged, 'Width');
         noOutline(merged);
         this.borderInText(node, merged);
         // Last, on what is committed: an override or an animation can hide a box, or place it.
@@ -3577,6 +4092,7 @@ export class Engine {
         this.movePaint(node, merged);
         if (node.raised !== undefined)
             merged['zIndex'] ??= node.raised;
+        keptForNative(node, merged);
         return merged;
     }
     /**
@@ -3677,6 +4193,11 @@ export class Engine {
      * its parent's: the cascade's, and over it the parent's inline style.
      */
     movePaint(node, merged) {
+        if (node.paintTaker) {
+            // Only the colour is handed over: a background image stays painted on the node.
+            this.takenPaint(node, merged['backgroundColor']);
+            delete merged['backgroundColor'];
+        }
         if (node.paintsOn)
             for (const key of PAINT_KEYS)
                 delete merged[key];
@@ -3688,6 +4209,13 @@ export class Engine {
             if (paint[key] !== undefined)
                 merged[key] = paint[key];
     }
+    /** Note the background colour a node that hands it over resolves to, where it changed. */
+    takenPaint(node, color) {
+        if (color === node.paintTaken)
+            return;
+        node.paintTaken = color;
+        this.paintReports.add(node);
+    }
     /**
      * 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
@@ -3770,6 +4298,7 @@ export class Engine {
         if (!sheet || this.knownSheets.has(sheet))
             return;
         this.knownSheets.add(sheet);
+        this.noteSheetEasing(sheet);
         this.styles.noteSheet(sheet);
         this.sheetOrder.push(sheet);
         for (const name of Object.keys(sheet.keyframes ?? {})) {
@@ -3800,6 +4329,7 @@ export class Engine {
         this.knownSheets.delete(sheet);
         if (next && !this.knownSheets.has(next)) {
             this.knownSheets.add(next);
+            this.noteSheetEasing(next);
             this.styles.noteSheet(next);
             this.sheetOrder[at] = next;
         }
@@ -3842,6 +4372,7 @@ export class Engine {
     }
     /** Every `@font-face` seen, global as on the web: a face declared in one sheet serves all. */
     fontFaces = new FontFaces();
+    postScriptName = (name) => this.fontFaces.postScriptName(name);
     /** Whether a sheet first used in this commit declared a face. See `rematchFonts`. */
     facesAdded = false;
     /**
@@ -3865,7 +4396,10 @@ export class Engine {
                 named(child.box);
             if (child.kind !== 'element')
                 continue;
-            named(child);
+            if (child.committed && FONT_NAMES[child.committed.viewName])
+                this.markProps(child, false);
+            else
+                named(child);
             this.markFontText(child);
         }
     }
@@ -4081,8 +4615,9 @@ export class Engine {
     }
     /**
      * 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.
+     * style where it does not fill, is committed, and set on native where the animation set the
+     * prop (see `setOwned`). The view is let go first, which puts nothing back on Fabric: it is
+     * drawn where the animation left it until then.
      */
     endedNatively(node, running) {
         if (node.playing !== running || !running.native)
@@ -4091,9 +4626,62 @@ export class Engine {
         running.native = undefined;
         this.playedNatively.delete(node);
         const end = running.start + spec.duration * (spec.iterations ?? 1);
+        native.stop();
         this.advancePlayer(node, Math.max(this.now(), end));
         this.commit();
-        native.stop();
+        // The commit sets only what it changed, and the style the view rests at can be the frame it
+        // was committed with as it played: native has drawn it elsewhere since.
+        const committed = node.committed;
+        if (node.owned && committed)
+            this.setOwned(node, RESET_OWNED, committed.props);
+    }
+    /** A graph of native's was connected to a view: see `Touched`. */
+    touchedNatively(node, tag, keys) {
+        const taken = keys.filter((key) => key === 'opacity' || key === 'transform');
+        if (!taken.length)
+            return;
+        if (node.owned?.tag !== tag)
+            node.owned = { tag, keys: new Set() };
+        for (const key of taken)
+            node.owned.keys.add(key);
+    }
+    /**
+     * Set on native a change of a prop a graph of native's has set on the view before, while no
+     * graph of its holds it: the commit cannot change it (see `Touched`). The payload is committed
+     * as well, so the shadow node is as the view is drawn. A transform native cannot take as
+     * numbers, a matrix, is left committed alone.
+     */
+    setOwned(node, payload, props) {
+        const owned = node.owned;
+        const tag = node.committed?.tag;
+        if (tag === undefined || owned.tag !== tag || !this.scrollDriver)
+            return;
+        const held = this.scrollDriver.held(node);
+        const free = (key) => key in payload && owned.keys.has(key) && !held.has(key);
+        const values = {};
+        if (free('opacity')) {
+            const opacity = props['opacity'];
+            values.opacity = typeof opacity === 'number' ? opacity : 1;
+        }
+        if (free('transform')) {
+            const transform = heldTransform(props['transform'], () => this.boxSize(node));
+            if (transform)
+                values.transform = transform;
+        }
+        if (values.opacity !== undefined || values.transform) {
+            this.scrollDriver.set(node, tag, values);
+        }
+    }
+    /** The size a view is laid out at, where it has been. */
+    boxSize(node) {
+        let size;
+        this.measure(node, (frame) => (size = frame));
+        return size;
+    }
+    /** Forget the props native set on a node's view, which is gone or made again. */
+    disown(node) {
+        node.owned = undefined;
+        this.scrollDriver?.forget(node);
     }
     /** Take an animation back from native, which stops it there. The caller plays it on, or not. */
     stopNative(node, running) {
@@ -4369,8 +4957,9 @@ export class Engine {
         this.takeBackEased(node, state, props, spec, now);
         this.takeBackLaid(state, props, spec, now);
         const started = [];
+        const before = spec && this.paintedBefore(node);
         for (const key of steppedKeys(props, spec, state)) {
-            if (step(state, key, props, spec?.[key] ?? spec?.['all'], now)) {
+            if (step(state, key, props, spec?.[key] ?? spec?.['all'], now, before)) {
                 this.running.add(node);
                 started.push(key);
                 this.emitTransition(node, 'topTransitionstart', key);
@@ -4381,6 +4970,29 @@ export class Engine {
             node.transitions = undefined;
         return props;
     }
+    /**
+     * What a view was last painted with, by property, for a transition that arrives with the change
+     * it eases: CSS takes the transition from the style after the change and eases from the value
+     * before it. Nothing for a view nobody has seen yet, which starts where it is. The individual
+     * transforms are read back from the parts the painted transform was put together from.
+     */
+    paintedBefore(node) {
+        const painted = node.committed?.props;
+        // A view that paints its background on a child does not commit it as its own.
+        if (!painted || node.paintsOn)
+            return undefined;
+        if (node.bornIn !== undefined && node.bornIn >= this.unseen)
+            return undefined;
+        const composed = node.composedTransform;
+        if (!composed || painted['transform'] !== composed.value)
+            return (key) => painted[key];
+        return (key) => {
+            if (key === 'transform')
+                return composed.parts[3];
+            const part = INDIVIDUAL_TRANSFORMS.indexOf(key);
+            return part === -1 ? painted[key] : composed.parts[part];
+        };
+    }
     /** Nobody saw what the last commit gave a view it created, so this is where the view starts. */
     unseenTransitions(node) {
         // One with no commit it was born in has been seen, whatever was committed since.
@@ -4428,17 +5040,26 @@ export class Engine {
     /**
      * Commit where it ends each transition of a size or a place that just started, for native to
      * move the view there: a layout animation, which the commit asks for once it is known that
-     * nothing else in it moves. One still on its way is committed where it ends too.
+     * nothing else in it moves. One still on its way is committed where it ends too. On a host
+     * with no layout animation they are eased from JavaScript, but for one sent on again and again.
      *
      * A width eased from JavaScript is a commit a frame, and a commit lays the whole screen out.
      */
     layEased(node, state, started, props, now) {
-        if (!this.fabric.configureNextLayoutAnimation)
-            return;
+        const native = this.fabric.configureNextLayoutAnimation !== undefined;
         for (const key of started) {
             const eased = state.get(key);
             if (!LAID_OUT.has(key) || eased.start > now || eased.duration <= 0)
                 continue;
+            if (this.sentOnAgain(node, key, eased, now)) {
+                // Where it ends, at once: see `sentOnAgain`.
+                Object.assign(eased, { current: eased.to, done: true });
+                this.emitTransition(node, 'topTransitionend', key);
+                props[key] = eased.to;
+                continue;
+            }
+            if (!native)
+                continue;
             eased.laid = true;
             this.laying.push({ node, key, eased });
         }
@@ -4446,6 +5067,24 @@ export class Engine {
             if (eased.laid && !eased.done)
                 props[key] = eased.to;
     }
+    /** When each size in transition was last started, and how many starts in a row came soon. */
+    laidStarts = new WeakMap();
+    /**
+     * Whether a transition of a size is one sent on again and again, each before the last had
+     * ended: a progress bar that steps every 50ms and eases each step over 150. Native moves the
+     * view, and lays the screen out, every frame while a layout animation runs, and JavaScript
+     * commits every frame while it eases one, so one started at every step is one that never
+     * stops. The first, and one sent back before it ends, are played; from the second sent on in
+     * a row, each is committed where it ends, and the steps are the motion. Played again once the
+     * size has been left alone for as long as it lasts.
+     */
+    sentOnAgain(node, key, eased, now) {
+        const starts = this.laidStarts.get(node) ?? this.laidStarts.set(node, new Map()).get(node);
+        const last = starts.get(key);
+        const soon = last && now - last.at < eased.duration ? last.soon + 1 : 0;
+        starts.set(key, { at: now, soon });
+        return soon >= 2;
+    }
     /** The animations this commit lays out at their last frame, for native to move the views to. */
     laidPlayed = [];
     /**
@@ -4725,6 +5364,17 @@ export class Engine {
         this.lettingGo.add(node);
         return true;
     }
+    /** Whether a node, or an element it is in, is `display: none`. */
+    boxless(node) {
+        for (let at = node; at; at = at.parent) {
+            if (at.kind !== 'element')
+                continue;
+            this.styles.resolve(at, this.styleEpoch);
+            if (ownLayout(at, 'display') === 'none')
+                return true;
+        }
+        return false;
+    }
     /** One `@keyframes` player, one frame on. */
     advancePlayer(node, now) {
         const running = node.playing;
@@ -4736,6 +5386,17 @@ export class Engine {
             this.playing.delete(node);
             return;
         }
+        // One with no box, or in a box with none, paints nothing, and an endless one would keep the
+        // frame loop going for good. It is cancelled, as a browser cancels it, and starts again when
+        // the node is shown, as it is made again.
+        if (this.boxless(node)) {
+            this.cancelPlaying(node);
+            this.playing.delete(node);
+            node.playing = undefined;
+            // A commit, for its `animationcancel` to be sent after, and to drop its last frame.
+            this.markProps(node, false);
+            return;
+        }
         // Frames that say nothing paint nothing: a keyframe's one declaration refused at build time
         // leaves these. No frame of it is committed, and one that never ends has nothing left to do.
         const idle = running.tracks.size === 0;
@@ -4815,15 +5476,21 @@ export class Engine {
         }
         return this.animating;
     }
-    /** The host's conversions, applied to a copy. A removed prop travels as null and stays null. */
-    processed(props) {
+    /**
+     * The host's conversions, applied to a copy. A removed prop travels as `cleared` says, null for
+     * nearly every one. On an update a colour dropped as unreadable is null too: JSI leaves out an
+     * undefined key, and Fabric keeps what a clone leaves out.
+     */
+    processed(props, update) {
         const out = {};
         for (const key of Object.keys(props)) {
             const value = props[key];
-            if (value === null || value === undefined)
+            if (value === null)
+                out[key] = cleared(key);
+            else if (value === undefined)
                 out[key] = value;
             else if (isColorProp(key))
-                out[key] = this.painted(key, value);
+                out[key] = this.colourProp(key, value, update);
             // 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))
@@ -4985,7 +5652,7 @@ export class Engine {
         this.noteMoved(node, propsPayload, childHandles.length !== previous.childHandles.length, previous.props['text']);
         let handle = previous.handle;
         if (childrenChanged || propsPayload) {
-            handle = this.clone(previous.handle, propsPayload && this.processed(propsPayload), childrenChanged ? childHandles : null);
+            handle = this.clone(previous.handle, propsPayload && this.processed(propsPayload, true), 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, viewName };
@@ -4996,6 +5663,10 @@ export class Engine {
     /** What a clone sends: the props that changed, and a text input's font once it registered. */
     propsPayload(node, previous, props) {
         const payload = diffProps(previous, props);
+        if (payload)
+            borderColoursAgain(payload, props);
+        if (payload && node.owned)
+            this.setOwned(node, payload, props);
         if (payload && this.fontsRefreshed && this.fontResends.delete(node)) {
             payload['fontFamily'] = props['fontFamily'];
         }
@@ -5024,10 +5695,17 @@ export class Engine {
      */
     reconcileChildren(node, viewName, style) {
         const context = style?.context;
-        if (HOIST_TARGETS.has(node.name))
+        if (HOIST_ONLY.has(node.tag))
+            return this.reconcileOnlyHoisted(node);
+        if (HOIST_TARGETS.has(node.tag))
             return this.reconcileHoistTarget(node, context);
         const handles = [];
         for (const child of node.children) {
+            const clean = this.cleanUnder(node, child, context);
+            if (clean) {
+                handles.push(clean);
+                continue;
+            }
             if (child.kind === 'anchor' || this.committedElsewhere(child) || this.withheld(child)) {
                 continue;
             }
@@ -5071,7 +5749,7 @@ export class Engine {
             return null;
         let box = text.box;
         // One made for another element, before the view was registered again, is done with.
-        if (box && box.name !== drawnBy) {
+        if (box && box.tag !== drawnBy) {
             if (box.committed)
                 this.forgetCommitted(box);
             box = undefined;
@@ -5083,6 +5761,9 @@ export class Engine {
             text.box = box;
         }
         box.parent = parent;
+        // Merged before the view is, so the view's truncation is read here: see `truncatedAs`.
+        if (truncationMoved(box, parent))
+            box.propsDirty = true;
         // 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;
@@ -5143,10 +5824,12 @@ export class Engine {
             return false;
         if (child.committed) {
             this.forgetCommitted(child);
-            // A field in it has no view to send its blur from.
+            // A field in it has no view to send its blur from. Blurred once this commit is done: a
+            // `:focus` rule that hid it then no longer holds, and the commit that follows shows it.
             if (isWithin(this.focusedNode, child))
-                this.setFocused(null);
+                this.blurAfterCommit = true;
         }
+        settlePaths(child);
         return true;
     }
     /**
@@ -5177,13 +5860,13 @@ export class Engine {
         // which RNS keeps clear by never letting the header config be the first.
         const direct = [];
         for (const child of node.children) {
-            if (child.kind === 'anchor' || this.committedElsewhere(child) || this.withheld(child)) {
+            const taken = this.takenByTarget(node, child, context);
+            if (taken === null)
                 continue;
-            }
-            if (this.hoisted.has(child))
+            if (taken === 'direct')
                 direct.push(child);
             else
-                handles.push(this.reconcileUnder(node, child, context));
+                handles.push(taken);
             const moved = hoisted?.get(child);
             for (const written of moved ?? []) {
                 if (!this.undisplayedUnder(node, written))
@@ -5196,6 +5879,33 @@ export class Engine {
             this.standIn(node, landed, handles);
         return handles;
     }
+    /**
+     * `reconcileHoistTarget` for a node that commits only what is hoisted into it
+     * (`HoistOptions.only`): those nodes, in the order they were written, and none of its own.
+     */
+    reconcileOnlyHoisted(node) {
+        const handles = [];
+        const hoisted = this.hoistedInto(node);
+        const landed = new Set();
+        for (const child of node.children) {
+            if (child.kind === 'anchor' || this.committedElsewhere(child) || this.withheld(child)) {
+                continue;
+            }
+            if (this.hoisted.has(child)) {
+                handles.push(this.land(node, child, landed));
+                continue;
+            }
+            for (const written of hoisted?.get(child) ?? []) {
+                if (!this.undisplayedUnder(node, written))
+                    handles.push(this.land(node, written, landed));
+            }
+            // Not committed, so the marks a change left on the way down to it are cleared here.
+            settlePaths(child);
+        }
+        if (node.kept)
+            this.standIn(node, landed, handles);
+        return handles;
+    }
     /**
      * A child's handle as a child of `parent`, created again when it was committed under another.
      *
@@ -5228,8 +5938,19 @@ export class Engine {
     forgetCommitted(node) {
         node.committed = null;
         node.committedUnder = null;
+        // Another view, with another tag, which no graph has set anything on.
+        if (node.owned)
+            this.disown(node);
         node.styleCommitted = null;
         node.kept = undefined;
+        // A scroll-driven animation is bound to native views by their tags: its own, and its scroll
+        // view's. Made again, each has another, so what drives it starts again with the new ones.
+        if (node.scrolled?.drive)
+            this.stopScrolled(node);
+        for (const follower of this.scrollTimelines.get(node) ?? []) {
+            this.stopScrolled(follower);
+            this.markProps(follower, false);
+        }
         if (node.box?.committed)
             this.forgetCommitted(node.box);
         for (const child of node.children) {
@@ -5246,9 +5967,9 @@ export class Engine {
      * keeps for its name when it has one (`HoistOptions.standIn`), and keep the view it commits as.
      */
     land(target, child, landed) {
-        if (!STAND_INS[child.name])
+        if (!STAND_INS[child.tag])
             return this.reconcileUnder(target, child);
-        const kept = target.kept?.get(child.name);
+        const kept = target.kept?.get(child.tag);
         if (kept && kept.node !== child && child.committed === null && !isWithin(kept.node, target)) {
             // A node taken out without being destroyed would otherwise come back holding this tag too.
             if (kept.node)
@@ -5258,8 +5979,8 @@ export class Engine {
         }
         const handle = this.reconcile(child);
         child.committedUnder = target;
-        (target.kept ??= new Map()).set(child.name, { node: child, committed: child.committed });
-        landed.add(child.name);
+        (target.kept ??= new Map()).set(child.tag, { node: child, committed: child.committed });
+        landed.add(child.tag);
         return handle;
     }
     /**
@@ -5276,13 +5997,40 @@ export class Engine {
                     ...STAND_INS[name],
                 };
                 const payload = diffProps(kept.committed.props, props);
-                const handle = this.clone(kept.committed.handle, payload && this.processed(payload), []);
+                const handle = this.clone(kept.committed.handle, payload && this.processed(payload, true), []);
                 kept.committed = { ...kept.committed, handle, props, childHandles: [] };
                 kept.node = null;
             }
             handles.push(kept.committed.handle);
         }
     }
+    /**
+     * What a hoist target takes of a child written in it: the child's handle, `direct` for one
+     * hoisted into it, which goes after its siblings, or null for none.
+     */
+    takenByTarget(node, child, context) {
+        if (this.hoisted.has(child)) {
+            if (this.committedElsewhere(child) || this.withheld(child))
+                return null;
+            return 'direct';
+        }
+        const clean = this.cleanUnder(node, child, context);
+        if (clean)
+            return clean;
+        if (child.kind === 'anchor' || this.withheld(child))
+            return null;
+        return this.reconcileUnder(node, child, context);
+    }
+    /**
+     * A clean element's handle under `parent`, before anything else is asked of it: one committed
+     * there and unchanged since was displayed and in its place, and is still. The siblings of what
+     * changed are most of what a commit steps over: a list one row of which ticks.
+     */
+    cleanUnder(parent, child, context) {
+        if (child.kind !== 'element' || child.committedUnder !== parent)
+            return null;
+        return this.stillCommitted(child, context);
+    }
     /** A clean child's committed handle, when its style still holds under its parent's. */
     stillCommitted(child, context) {
         const committed = child.committed;
@@ -5305,11 +6053,13 @@ export class Engine {
     hoistedInto(node) {
         let found = null;
         for (const candidate of this.hoisted) {
-            if (candidate.parent === node || HOISTS[candidate.name] !== node.name)
+            if (candidate.parent === node || HOISTS[candidate.tag] !== node.tag)
                 continue;
             let written = candidate;
             let above = candidate.parent;
-            while (above && above !== node && above.name !== node.name) {
+            while (above && above !== node && above.tag !== node.tag) {
+                if (HOIST_STOPS[candidate.tag]?.has(above.tag))
+                    break;
                 written = above;
                 above = above.parent;
             }
@@ -5326,12 +6076,14 @@ export class Engine {
     }
     /** Whether a hoisted node commits further up than the parent it was written in. */
     hoistsAbove(node) {
-        const target = HOISTS[node.name];
-        if (node.parent?.name === target)
+        const target = HOISTS[node.tag];
+        if (node.parent?.tag === target)
             return false;
-        for (let above = node.parent?.parent; above; above = above.parent) {
-            if (above.name === target)
+        for (let above = node.parent; above; above = above.parent) {
+            if (above.tag === target)
                 return true;
+            if (HOIST_STOPS[node.tag]?.has(above.tag))
+                return false;
         }
         return false;
     }
@@ -5343,7 +6095,7 @@ export class Engine {
         const tag = nextTag();
         this.stats.createdNodes++;
         // instanceHandle is the retained node itself: it is what Fabric hands back on events.
-        const handle = this.fabric.createNode(tag, viewName, this.rootTag, this.processed(props), node);
+        const handle = this.fabric.createNode(tag, viewName, this.rootTag, this.processed(props, false), node);
         for (const child of childHandles)
             this.fabric.appendChild(handle, child);
         node.committed = { handle, tag, props, childHandles, viewName };
@@ -5360,13 +6112,13 @@ export class Engine {
         // 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))
+        if (!PRIMITIVE_NAMES.has(node.tag))
             return;
-        if (this.reported.has(node.name))
+        if (this.reported.has(node.tag))
             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 ` +
+        this.reported.add(node.tag);
+        console.error(`[angular-native] <${node.tag}> is used in a template that does not import ` +
+            `${className(node.tag)}. Add it to the component's \`imports\` from ` +
             `'@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.`);
     }
@@ -5389,6 +6141,19 @@ export class Engine {
             ` scope defines, so the declaration is dropped, as a browser drops it. Define ${name} on` +
             ` :root or an ancestor, or give the var() a fallback.`);
     }
+    droppedDeclarations = new Set();
+    /**
+     * A declaration in a style, written or bound, that is no value its property takes, so it is
+     * dropped as a browser drops it. Said once per element name and declaration, in development.
+     */
+    reportDroppedDeclaration(prop, value, on, why) {
+        const report = `${on} ${prop}: ${value}`;
+        if (!this.dev || this.droppedDeclarations.has(report))
+            return;
+        this.droppedDeclarations.add(report);
+        console.warn(`[angular-native] ${prop}: ${value}, in a style on <${on}>, is no value ${prop} takes:` +
+            ` ${why}. The declaration is dropped, as a browser drops it.`);
+    }
     unreadDisplays = new Set();
     /**
      * Said once per token and value: the compiler refuses `display: grid` written out, but a token
@@ -5404,23 +6169,23 @@ export class Engine {
             ` and contents, and reads block, inline, inline-block, flow-root and inline-flex as flex.`);
     }
     checkProps(node) {
-        if (!node.claimed || !PRIMITIVE_NAMES.has(node.name))
+        if (!node.claimed || !PRIMITIVE_NAMES.has(node.tag))
             return;
-        const declared = DECLARED_PROPS.get(node.name);
+        const declared = DECLARED_PROPS.get(node.tag);
         if (!declared)
             return;
         for (const key of Object.keys(node.props)) {
             if (this.isDeclared(declared, key, node.props[key]))
                 continue;
-            const report = `${node.name} ${key}`;
+            const report = `${node.tag} ${key}`;
             if (this.reported.has(report))
                 continue;
             this.reported.add(report);
             const meant = [...declared].find((name) => name.toLowerCase() === key.toLowerCase());
-            console.warn(`[angular-native] <${node.name}> has no prop '${key}', so native ignores it.` +
+            console.warn(`[angular-native] <${node.tag}> has no prop '${key}', so native ignores it.` +
                 (meant ? ` Did you mean '${meant}'?` : '') +
-                ` Check the spelling against the ${className(node.name)} page, or declare it with` +
-                ` declareNativeProps('${node.name}', ['${key}']) if the native view does read it.`);
+                ` Check the spelling against the ${className(node.tag)} page, or declare it with` +
+                ` declareNativeProps('${node.tag}', ['${key}']) if the native view does read it.`);
         }
     }
     isDeclared(declared, key, value) {
@@ -5460,12 +6225,12 @@ export class Engine {
      * the trade for not holding a registry per component, and the typo is the case that matters.
      */
     checkKnown(node) {
-        if (node.kind !== 'element' || node.componentHost || node.name in VIEW_NAMES)
+        if (node.kind !== 'element' || node.componentHost || node.tag in VIEW_NAMES)
             return;
-        if (this.declaredElements.has(node.name) || this.reported.has(node.name))
+        if (this.declaredElements.has(node.tag) || this.reported.has(node.tag))
             return;
-        this.reported.add(node.name);
-        console.error(`[angular-native] <${node.name}> is not a known element: no component, directive or ` +
+        this.reported.add(node.tag);
+        console.error(`[angular-native] <${node.tag}> is not a known element: no component, directive or ` +
             `registered native view claims it, so it renders as an empty view. Check the spelling, ` +
             `or import the component that owns it.`);
     }
@@ -5605,7 +6370,7 @@ export class Engine {
      */
     get focused() {
         if (this.focusedNode && !this.isAttached(this.focusedNode))
-            this.focusedNode = null;
+            this.dropFocus();
         return this.focusedNode;
     }
     /** Whether a node is still part of the tree, rather than in a subtree that was removed. */
@@ -5622,17 +6387,29 @@ export class Engine {
     resolveAsset(value) {
         return this.resolveAssetSource(value);
     }
+    /** A colour prop as `processed` sends it: one dropped as unreadable is null on an update. */
+    colourProp(key, value, update) {
+        const painted = this.painted(key, value);
+        return painted === undefined && update ? null : painted;
+    }
     /**
      * 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.
+     * token is the solid brush react-native-svg takes, `none` no paint at all, and one the host
+     * reads no colour in no paint of the shape's own.
      */
     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.
+        // Already a brush, as the icon wrote it: only one the cascade settled is still text. An
+        // icon's solid brush holds whatever the host read, which is nothing for an unreadable colour.
         if (typeof value !== 'string')
-            return value;
-        return value === 'none' ? null : { type: 0, payload: this.color(value) };
+            return emptyBrush(value) ? undefined : value;
+        if (value === 'none')
+            return null;
+        // A colour the host cannot read is dropped, as a browser drops it: a solid brush with no
+        // colour in it stops the app.
+        const payload = this.color(value);
+        return payload == null ? undefined : { type: 0, payload };
     }
     /**
      * The host's `processColor`, and the one place a platform colour becomes one.
@@ -5973,7 +6750,7 @@ export class Engine {
         for (let n = target; n; n = DIRECT_EVENTS.has(topLevelType) ? null : n.parent) {
             matched += n.listeners?.get(topLevelType)?.size ?? 0;
         }
-        console.log('[event]', topLevelType, target?.name ?? '(no handle)', matched);
+        console.log('[event]', topLevelType, target?.tag ?? '(no handle)', matched);
     }
     /**
      * `:focus` follows the native events rather than being inferred from a tap, so it is right for a
@@ -6032,4 +6809,17 @@ export class Engine {
             this.removeChild(child.parent, child);
     }
 }
+/**
+ * Clear the marks that lead a commit down to a change, under a node no commit goes into: one with
+ * no box. Left set, a later change under it stops climbing at them, as it stops at any mark already
+ * there, and never reaches the root: nothing is committed, and an ancestor's `:has()` reading into
+ * it is not asked again. What is under it has no views, so it is reconciled whole when it is shown.
+ */
+function settlePaths(node) {
+    if (!node.subtreeDirty)
+        return;
+    node.subtreeDirty = false;
+    for (const child of node.children)
+        settlePaths(child);
+}
 //# sourceMappingURL=engine.js.map