@ng-native/fabric 0.12.0 → 0.14.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, 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";
 /**
@@ -854,6 +854,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 +1006,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 +1111,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 +1286,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 +1445,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 +1467,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 +1505,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 +1538,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 +1563,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 +1623,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
@@ -1718,6 +1953,12 @@ 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 kept as a declaration the cascade settles: a `var()` or a relative length. */
+function boundFrom(prop, text, on) {
+    return /^\s*var\(/i.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 +2018,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() {
@@ -2214,7 +2456,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 +2504,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,
@@ -2649,8 +2905,38 @@ export class Engine {
             return;
         if (reach.own)
             node.ownDirty = true;
-        if (this.styles.reachesUnder(reach))
+        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
@@ -2687,6 +2973,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 +2983,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 +3007,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 +3018,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 +3049,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 +3137,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 +3203,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 +3214,45 @@ 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);
         // A prop written again is a binding's, and is committed as any other is.
         if (node.attributeOnly?.delete(key))
             this.markProps(node, false);
@@ -2998,19 +3346,26 @@ 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);
@@ -3018,7 +3373,14 @@ export class Engine {
             byProp.delete(prop);
         node.boundStyle = byProp.size ? [...byProp.values()] : null;
         this.markProps(node);
-        return bound !== null;
+        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`.
@@ -3340,8 +3702,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;
@@ -3531,6 +3902,8 @@ export class Engine {
         const resolved = props['pointerEvents'];
         writeOwnProps(node.props, props, node.attributeOnly);
         withTextContent(node, viewName, props);
+        renameFonts(viewName, props, this.postScriptName);
+        truncatedAs(node, props);
         const cascaded = props['transform'];
         const inline = inlineOf(node);
         const style = boundTransform(node, Object.assign(props, inline), cascaded);
@@ -3556,7 +3929,7 @@ export class Engine {
             this.capForFonts(node, style);
         alignMultiline(viewName, style);
         rowsTall(style, this.fontScale);
-        const merged = composeTransform(node, this.animated(node, this.transitioned(node, style)));
+        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 +3939,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 +3954,7 @@ export class Engine {
         this.movePaint(node, merged);
         if (node.raised !== undefined)
             merged['zIndex'] ??= node.raised;
+        keptForNative(node, merged);
         return merged;
     }
     /**
@@ -3770,6 +4148,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 +4179,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 +4222,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 +4246,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 +4465,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 +4476,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 +4807,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 +4820,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.
@@ -4439,6 +4901,13 @@ export class Engine {
             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;
+            }
             eased.laid = true;
             this.laying.push({ node, key, eased });
         }
@@ -4446,6 +4915,23 @@ 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, 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 +5211,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 +5233,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;
@@ -4996,6 +5504,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 +5536,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 +5590,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 +5602,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 +5665,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 +5701,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 +5720,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 +5779,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 +5808,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 +5820,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;
     }
     /**
@@ -5283,6 +5845,33 @@ export class Engine {
             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 +5894,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 +5917,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;
     }
@@ -5360,13 +5953,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 +5982,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 +6010,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 +6066,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 +6211,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. */
@@ -5973,7 +6579,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 +6638,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