@ng-native/fabric 0.8.0 → 0.10.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, placeReadElsewhere, siblingReach, } from "./css.js";
+import { boundDeclaration, 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";
@@ -28,7 +28,7 @@ function animationOf(props) {
     let spec = props['$animation'];
     if (spec !== undefined)
         delete props['$animation'];
-    for (const [key, field] of Object.entries(ANIMATION_PARTS)) {
+    for (const [key, field] of ANIMATION_ENTRIES) {
         if (!(key in props))
             continue;
         const value = props[key];
@@ -47,6 +47,8 @@ const ANIMATION_PARTS = {
     $animationFill: 'fill',
     $playState: 'paused',
 };
+/** Listed once: `animationOf` reads them for every node that commits. */
+const ANIMATION_ENTRIES = Object.entries(ANIMATION_PARTS);
 function animationPart(field, value) {
     switch (field) {
         case 'iterations':
@@ -537,8 +539,8 @@ function lineBaseline(props, line, [, top, , bottom], fontScale) {
  * out on both platforms: on Android, `EditText` centres a line box taller than the font's own
  * about 1.7pt high of centre in a 44pt field, and centres the font's own exactly. A percentage
  * height sizes the field only where its parent's height is definite, which is known at layout
- * alone, so such a field is left as it was. Elsewhere Android sizes the field by the line height
- * and centres the text in it itself, and keeps it.
+ * alone, so on Android such a field is left as it was. Elsewhere Android sizes the field by the
+ * line height and centres the text in it itself, and keeps it.
  *
  * On iOS, React Native's field sets `lineHeight` as the paragraph's minimum and maximum line
  * height and, unlike a paragraph (`RCTApplyBaselineOffset`), never offsets the baseline, so the
@@ -561,10 +563,9 @@ function centreSingleLine(viewName, props, fontScale, onBaseline = false) {
         heightBaseline(props, height, onBaseline, fontScale);
         return;
     }
-    // A percentage is a fixed height only where the parent's is definite, known at layout alone.
-    if (isSet(height) && height !== 'auto')
-        return;
-    // Android sizes the field by its line height, and centres the text in it, itself.
+    // Android sizes the field by its line height, and centres the text in it, itself. A
+    // percentage is a fixed height only where the parent's is definite, known at layout alone:
+    // there too the line height is left out on iOS, and kept as the least the field is tall.
     if (viewName !== 'TextInput')
         return;
     const edge = (side, logical) => blockEdge(props, side, logical);
@@ -847,10 +848,11 @@ const TOUCHED_ALPHA = 0.011;
 function stillTouched(props) {
     // One told to take no touch is not to be sent one, seen or not.
     if (props['pointerEvents'] === 'none')
-        return;
+        return props;
     const opacity = props['opacity'];
     if (typeof opacity === 'number' && opacity < TOUCHED_ALPHA)
         props['opacity'] = TOUCHED_ALPHA;
+    return props;
 }
 /**
  * Leave `aspect-ratio` out for a box with both a width and a height. CSS takes the ratio only
@@ -865,6 +867,29 @@ function ratioForAutoSize(props) {
         delete props['aspectRatio'];
 }
 const OUTLINE_KEYS = ['outlineWidth', 'outlineStyle', 'outlineColor', 'outlineOffset'];
+/** Whether a side of a border has a width and nothing that gives it a colour. */
+function colourless(props, side, flipped) {
+    const width = props[side.width] ?? props['borderWidth'];
+    if (typeof width !== 'number' || width <= 0)
+        return false;
+    const given = [side.color, flipped ? side.flipped : side.logical, 'borderColor'];
+    return given.every((key) => props[key] == null);
+}
+/**
+ * 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_SIDES = [
+    ['Top', 'BlockStart', 'BlockStart'],
+    ['Right', 'End', 'Start'],
+    ['Bottom', 'BlockEnd', 'BlockEnd'],
+    ['Left', 'Start', 'End'],
+].map(([side, logical, flipped]) => ({
+    width: `border${side}Width`,
+    color: `border${side}Color`,
+    logical: `border${logical}Color`,
+    flipped: `border${flipped}Color`,
+}));
 /**
  * Send nothing for an outline of no width, which is what `outline: none` is: it draws nothing,
  * and a view with no outline is the same view. Sent, it is an update that is not one, and on
@@ -916,6 +941,64 @@ function alignMultiline(viewName, props) {
         return;
     props['textAlignVertical'] ??= 'top';
 }
+/** The props of a run of text that change how tall its line is drawn. */
+const SIZES_A_RUN = new Set(['style', 'allowFontScaling', 'maxFontSizeMultiplier']);
+/**
+ * Keep a paragraph as tall as one of its lines, as a browser's line box is whatever holds it.
+ * Yoga measures an item no taller than the room inside its container, and the text view cuts
+ * its letters off there: a 24 point line in a row with 16 points between its paddings. The
+ * line is the paragraph's own or a taller one of a run in it, `run`, which is scaled already. With it goes what is
+ * around the text and inside the height Yoga gives a view, its padding and border above and
+ * below, but for a content box. Only where a line height is a length, and nothing gives the
+ * paragraph a height of its own.
+ *
+ * The line is as the system text size draws it: native scales a line height with the text, so
+ * a line held to its points at a smaller size is shorter than its box and sits at the top of
+ * it, over what a row centres it beside.
+ */
+function lineTall(props, run, fontScale) {
+    const own = props['lineHeight'];
+    const line = Math.max(typeof own === 'number' ? own * textScale(props, fontScale) : 0, run);
+    if (line <= 0)
+        return;
+    const unset = (value) => value == null || value === 'auto';
+    if (!unset(props['height']) || !unset(props['minHeight']))
+        return;
+    const around = props['boxSizing'] === 'content-box' ? 0 : aroundALine(props);
+    // To a thousandth of a point: a product of two fractions is rarely the number it reads as.
+    props['minHeight'] = Math.round((line + around) * 1000) / 1000;
+}
+/** The points of padding and border above and below a view's content, where each is a length. */
+function aroundALine(props) {
+    const edge = (...keys) => {
+        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'));
+}
+/**
+ * Where a line may break: at a space, after a hyphen, and anywhere in a script written without
+ * spaces. A soft hyphen and a zero-width space are places to break that draw nothing.
+ */
+const BREAKS = /[\s\-\u00ad\u200b\u2010\u2e80-\u9fff\uac00-\ud7af\uf900-\ufaff\uff00-\uffef]/;
+/** Whether a paragraph's text, all its runs together, is one word: something, with no break. */
+function unbroken(node) {
+    let text = '';
+    const collect = (from) => {
+        for (const child of from.children) {
+            if (child.kind === 'text')
+                text += child.text;
+            else if (isTextElement(child))
+                collect(child);
+        }
+    };
+    collect(node);
+    const words = trimEnds(text);
+    return words !== '' && !BREAKS.test(words);
+}
 /**
  * Resolve a paragraph's `text-align` against its direction, as CSS does.
  *
@@ -1411,6 +1494,23 @@ const MOVES_BOXES = new Set([
     ...['aspectRatio', 'fontSize', 'lineHeight', 'fontFamily', 'fontWeight', 'letterSpacing'],
     ...['numberOfLines', 'start', 'end'],
 ]);
+/** Whether native is moving a view to a prop's value, by a transition or an animation it laid out. */
+function laidByNative(node, key) {
+    const eased = node.transitions?.get(key);
+    if (eased?.laid && !eased.done)
+        return true;
+    return node.playing?.laid === true && node.playing.tracks.has(key);
+}
+/** Whether an animation plays once through, forwards, with no wait before it. */
+const playedOnce = (spec) => spec.delay === 0 && spec.duration > 0 && spec.iterations === 1 && !spec.direction;
+/** Whether a track is two frames on one curve, the first of them where the view is drawn. */
+function fromWhereDrawn(track, drawn) {
+    const [first, last] = track;
+    if (track.length !== 2 || first.easing || last.value == null)
+        return false;
+    // One that ends where it starts moves nothing: there is nothing for native to lay out.
+    return Object.is(first.value, drawn) && !Object.is(first.value, last.value);
+}
 /** The curves a layout animation has, as the timing function each is. */
 const LAYOUT_CURVES = [
     ['linear', [0, 0, 1, 1]],
@@ -1555,6 +1655,7 @@ function noteTouches(node, style) {
     if (value === 'none')
         node.propsDirty = true;
 }
+const hasClasses = (node, names) => names.every((name) => node.classes?.has(name));
 /** Whether `node` is `ancestor` or somewhere under it. */
 function isWithin(node, ancestor) {
     for (let at = node; at; at = at.parent)
@@ -1645,6 +1746,7 @@ class RetainedNode {
     customProperties = null;
     styleCache = null;
     styleDirty = true;
+    ownDirty = false;
     styleCommitted = null;
     fitContainer = undefined;
     heightBasis = undefined;
@@ -1657,6 +1759,8 @@ class RetainedNode {
     committedUnder = null;
     kept = undefined;
     remeasure = undefined;
+    oneWord = undefined;
+    raised = undefined;
     propsDirty = false;
     structureDirty = false;
     subtreeDirty = false;
@@ -1861,6 +1965,8 @@ const TRANSITION_TIMING = {
     $transitionDelay: 'delay',
     $transitionEasing: 'easing',
 };
+/** Listed once, as `ANIMATION_ENTRIES` is. */
+const TRANSITION_ENTRIES = Object.entries(TRANSITION_TIMING);
 /**
  * The transition spec, with any timing set by a rule of its own laid over it: `.duration-700`
  * beside `.transition`. A rule that writes the timing itself compiles it to `null`, which is how
@@ -1874,7 +1980,7 @@ function transitionSpec(props) {
     let spec = props['$transition'];
     if (spec !== undefined)
         delete props['$transition'];
-    for (const [key, part] of Object.entries(TRANSITION_TIMING)) {
+    for (const [key, part] of TRANSITION_ENTRIES) {
         if (!(key in props))
             continue;
         const value = props[key];
@@ -1993,6 +2099,14 @@ const now = () => globalThis.performance?.now?.() ?? Date.now();
 function sameHandles(a, b) {
     return a.length === b.length && a.every((handle, i) => handle === b[i]);
 }
+/** Whether two sets of the same classes hold them in the same order. */
+function inOrder(a, b) {
+    const other = b.values();
+    for (const name of a)
+        if (other.next().value !== name)
+            return false;
+    return true;
+}
 /**
  * Whether a node could be the element a compound is written for, by its classes alone: its own,
  * and those of one alternative of each `:is()` on it, which is where Tailwind names a group or
@@ -2322,12 +2436,16 @@ export class Engine {
      */
     fontsSettled(families) {
         let held = false;
+        const release = (node) => {
+            if (node?.heldFamily === undefined || !families.has(node.heldFamily))
+                return;
+            this.markProps(node, false);
+            held = true;
+        };
         const visit = (node) => {
             for (const child of node.children) {
-                if (child.heldFamily !== undefined && families.has(child.heldFamily)) {
-                    this.markProps(child, false);
-                    held = true;
-                }
+                // The paragraph of a run of text written straight into a view is kept on the text.
+                release(child.kind === 'text' ? child.box : child);
                 visit(child);
             }
         };
@@ -2336,22 +2454,28 @@ export class Engine {
             this.commit();
     }
     fontsRegistered(families) {
+        /** Lay `node` out again where it is text naming one of the families, saying whether it was. */
+        const refresh = (node) => {
+            // As it is drawn: a text element placing its text is a view, with the paragraph inside it.
+            const viewName = committedViewName(node);
+            const input = TEXT_INPUTS.has(viewName);
+            const named = (viewName === PARAGRAPH || input) && namesFamily(node, families);
+            if (!node.committed || !named)
+                return false;
+            this.fontRefreshes.set(node, (this.fontRefreshes.get(node) ?? 0) + 1);
+            if (input)
+                this.fontResends.add(node);
+            this.fontsRefreshed = true;
+            this.markProps(node, false);
+            return true;
+        };
         const visit = (node) => {
             for (const child of node.children) {
-                if (child.kind !== 'element')
-                    continue;
-                const viewName = viewNameOf(child);
-                const input = TEXT_INPUTS.has(viewName);
-                if (child.committed && (viewName === PARAGRAPH || input) && namesFamily(child, families)) {
-                    this.fontRefreshes.set(child, (this.fontRefreshes.get(child) ?? 0) + 1);
-                    if (input)
-                        this.fontResends.add(child);
-                    this.fontsRefreshed = true;
-                    this.markProps(child, false);
-                }
-                else {
+                // The paragraph of a run of text written straight into a view is kept on the text.
+                if (child.kind === 'text' && child.box)
+                    refresh(child.box);
+                if (child.kind === 'element' && !refresh(child))
                     visit(child);
-                }
             }
         };
         visit(this.root);
@@ -2495,34 +2619,46 @@ export class Engine {
      * Mark a node whose classes changed, by what the rules that name those classes can restyle.
      *
      * A class no selector names changes no style: a library's own marker, of an overlay that is
-     * animating or a control that was touched. One named only as what a rule's element is
-     * inside, `.animating .close`, restyles the elements under the node that such rules are for.
-     * Either way a whole subtree is not styled again for a class that has no say in it. Any other
-     * class restyles the node and everything under it, as any other change to it does.
+     * animating or a control that was touched. One a rule is for the element of, `.on`, has that
+     * 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.
      *
      * 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.
      */
     markClasses(node, changed) {
+        // An element still being built, in no tree and never styled: nothing is styled by it yet,
+        // and it is styled when it is committed, with the classes it has then. Every element of a
+        // screen is given its classes this way, so what they reach is not asked for each.
+        if (node.parent === null && node.styleCache === null)
+            return this.markProps(node, false);
         const reach = this.styles.reachOf(changed);
         if (reach === true)
             return this.markProps(node);
         this.markProps(node, false);
-        if (reach)
+        if (!reach)
+            return;
+        if (reach.own)
+            node.ownDirty = true;
+        if (this.styles.reachesUnder(reach))
             this.markUnder(node, reach);
     }
-    /** Have styled again each element under a node that one of `subjects`' rules could be for. */
+    /**
+     * Have matched again each element under a node that one of `subjects`' rules could be for. One
+     * under another is marked too: what is under an element marked this way keeps its rules.
+     */
     markUnder(node, subjects) {
         for (const child of node.children) {
             if (child.kind !== 'element')
                 continue;
             if (this.styles.isFor(subjects, child)) {
-                // And with it all under it, which is styled from it.
-                child.styleDirty = true;
+                child.ownDirty = true;
                 this.markPath(child);
             }
-            else
-                this.markUnder(child, subjects);
+            this.markUnder(child, subjects);
         }
     }
     /**
@@ -2546,9 +2682,13 @@ export class Engine {
      */
     setDefaultStyle(node, style) {
         node.defaultStyle = style;
-        this.markProps(node);
+        // Under what the cascade comes to, and read by no selector: nothing is matched again.
+        this.markProps(node, false);
     }
-    /** `class="a b"` from a template. Replaces the set rather than adding to it. */
+    /**
+     * `class="a b"` from a template. Replaces the set rather than adding to it. The same classes in
+     * 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);
         const before = node.classes;
@@ -2558,7 +2698,8 @@ export class Engine {
         for (const name of before ?? [])
             if (!node.classes?.has(name))
                 changed.push(name);
-        this.markClasses(node, changed);
+        const reordered = !changed.length && !!before && !!node.classes && !inOrder(before, node.classes);
+        this.markClasses(node, reordered ? node.classes : changed);
     }
     /** Angular's `@if`/`@for`/`ViewContainerRef` markers. Ordered, never committed. */
     createAnchor() {
@@ -2570,6 +2711,7 @@ export class Engine {
         return node;
     }
     appendChild(parent, child) {
+        this.markAdopted(child, parent);
         this.detach(child);
         child.parent = parent;
         parent.children.push(child);
@@ -2579,6 +2721,7 @@ export class Engine {
         this.markTextContent(parent, child);
     }
     insertBefore(parent, child, ref) {
+        this.markAdopted(child, parent);
         this.detach(child);
         child.parent = parent;
         const at = ref ? parent.children.indexOf(ref) : -1;
@@ -2591,6 +2734,16 @@ export class Engine {
         this.markStructure(parent, child, at < 0 ? parent.children.length - 1 : at);
         this.markTextContent(parent, child);
     }
+    /**
+     * A node coming under a parent other than the one it is under, or under any once it has been
+     * taken out: what is over it may be other than it was styled under. The resolver sees that for
+     * itself by the parent's cache, except between two boxes that share one, where it is told here.
+     * Moved within its own parent, a row of a list reordered, it is styled as it was.
+     */
+    markAdopted(child, parent) {
+        if (child.parent !== parent && this.styles.styledUnderShared(child))
+            child.styleDirty = true;
+    }
     removeChild(parent, child) {
         const target = parent ?? child.parent;
         if (!target)
@@ -2609,8 +2762,27 @@ export class Engine {
      * changes it too, by keeping or dropping the space before it.
      */
     markTextContent(parent, child) {
-        if (child.kind !== 'anchor' && takesTextAsProp(parent))
+        if (child.kind === 'anchor')
+            return;
+        if (takesTextAsProp(parent))
             this.markProps(parent);
+        else if (isTextElement(parent))
+            this.markWords(parent, child.kind === 'element');
+    }
+    /**
+     * Text came, went or changed in a paragraph: where it has become one word, or stopped being
+     * one, the paragraph is merged again, since that is one line or as many as it takes. Asked
+     * of the paragraph's outermost element, which is the view; any other change leaves it be.
+     */
+    markWords(within, run = false) {
+        let root = within;
+        while (isTextElement(root.parent))
+            root = root.parent;
+        // A run that came or went can be the tallest line of the paragraph: see `lineTall`.
+        // ponytail: one restyled to another line height is not; mark its paragraph if seen cut.
+        const words = root.oneWord !== undefined && unbroken(root) !== root.oneWord;
+        if (run || words)
+            this.markProps(root, false);
     }
     /** A subtree that went out of the tree is back in: its hoisted nodes commit again. */
     wakeHoists(node) {
@@ -2704,6 +2876,11 @@ export class Engine {
             this.stopNative(node, node.playing);
         node.playing = undefined;
         this.stopScrolled(node);
+        // And what follows it, where it is the scroll view: each starts again if it is put back.
+        for (const follower of this.scrollTimelines.get(node) ?? []) {
+            this.stopScrolled(follower);
+            this.markProps(follower, false);
+        }
         this.running.delete(node);
         this.playing.delete(node);
         this.hoisted.delete(node);
@@ -2748,6 +2925,19 @@ export class Engine {
         // 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);
+        if (SIZES_A_RUN.has(key))
+            this.markParagraph(node);
+    }
+    /**
+     * Have the paragraph a run of text is in merged again: it is as tall as the tallest line of
+     * its runs, by a line height or a text scaling set on one of them. See `lineTall`.
+     */
+    markParagraph(run) {
+        let paragraph = run;
+        while (paragraph.parent && isTextElement(paragraph.parent))
+            paragraph = paragraph.parent;
+        if (paragraph !== run)
+            this.markProps(paragraph, false);
     }
     /**
      * Paint a node's background on one of its children instead of on the node: the node keeps its
@@ -2803,6 +2993,7 @@ export class Engine {
      */
     styleChanged(node) {
         this.markProps(node, this.inlineReachesStyle(node));
+        this.markParagraph(node);
     }
     /**
      * A bound declaration, `[style.color]`, whose value may be a `var()`. One that is, is kept as a
@@ -2842,7 +3033,10 @@ export class Engine {
         else {
             node.customProperties = { ...current, [name]: token };
         }
-        this.markProps(node);
+        // In scope for the node's own rules and for what is under it, and read by no selector: the
+        // node is styled again, and those under it from the rules they matched.
+        this.markProps(node, false);
+        node.ownDirty = true;
     }
     setText(node, value) {
         const filled = (node.text === '') !== (value === '');
@@ -2895,7 +3089,11 @@ export class Engine {
     }
     /** Start matching ancestors again on a change, once a sheet that uses `:has()` is in play. */
     watchHas(sheet) {
-        if (!sheet?.has || this.hasSheets)
+        if (!sheet?.has)
+            return;
+        if (!this.hasReaders.has(sheet))
+            this.hasReaders.set(sheet, hasAbove(sheet));
+        if (this.hasSheets)
             return;
         this.hasSheets = true;
         this.styles.tracksHas = true;
@@ -2912,15 +3110,53 @@ export class Engine {
      * which would restyle everything under them. Only sheets that use `:has()` pay.
      */
     markBeneath(from) {
-        for (let node = from; node; node = node.parent)
+        for (let node = from; node; node = node.parent) {
             node.hasDirty = true;
+            if (this.hasReaders.size)
+                this.changedBeneath.add(node);
+        }
     }
+    /**
+     * The boxes rules ask `:has()` of above the node they style, `.card:has(.x) .title`, by the
+     * sheet that asks: a sheet replaced or taken away asks no more.
+     */
+    hasReaders = new Map();
+    /** The nodes something changed beneath since the last commit, where any sheet has such a rule. */
+    changedBeneath = new Set();
+    /**
+     * 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.
+     */
+    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);
+                }
+            }
+        }
+        this.changedBeneath.clear();
+    }
+    /**
+     * 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.
+     */
     markLaterSiblings(node) {
-        const siblings = node.parent?.children;
+        let left = this.structuralAfter;
+        const siblings = left > 0 ? node.parent?.children : undefined;
         if (!siblings)
             return;
-        for (let i = siblings.indexOf(node) + 1; i < siblings.length; i++) {
-            siblings[i].styleDirty = true;
+        // Each matched again, and left as it was with all under it where it matches what it did:
+        // see `markPlace`.
+        for (let i = siblings.indexOf(node) + 1; i < siblings.length && left > 0; i++) {
+            const sibling = siblings[i];
+            this.markPlace(sibling);
+            if (sibling.kind === 'element')
+                left--;
         }
     }
     /** `node`'s child list changed: `moved` came into it at `at`, or went out of it from there. */
@@ -2995,9 +3231,16 @@ export class Engine {
      * which every such compound it could be asks for: a compound with none could be any element.
      */
     placeReadFromUnder(node) {
-        for (const compound of this.placeElsewhere) {
-            if (compound.classes.every((name) => node.classes?.has(name)))
+        for (const { compound, above, child } of this.placeElsewhere) {
+            if (!hasClasses(node, compound.classes))
+                continue;
+            // And by what the rule has it in, which a compound with no class is told from.
+            if (!above?.length)
                 return true;
+            for (let up = node.parent; up; up = child ? null : up.parent) {
+                if (hasClasses(up, above))
+                    return true;
+            }
         }
         return false;
     }
@@ -3048,6 +3291,7 @@ export class Engine {
         // completeRoot that changes nothing: during a fling that is one wasted native commit per
         // frame, since any listener firing marks the view for refresh.
         this.settleCreated();
+        this.markUnderHas();
         if (!this.root.structureDirty && !this.root.subtreeDirty)
             return false;
         const started = now();
@@ -3297,8 +3541,11 @@ export class Engine {
         flattenStyle(node.props[STYLE_OVERRIDE], style);
         this.fontFaces.apply(style);
         holdLoadingFamily(node, style);
-        if (viewName === PARAGRAPH)
+        if (viewName === PARAGRAPH) {
             alignText(style, this.directionOf(node, style));
+            this.wholeWords(node, style);
+            lineTall(style, this.tallestRun(node, style, 0), this.fontScale);
+        }
         if (this.fontsRefreshed)
             this.capForFonts(node, style);
         alignMultiline(viewName, style);
@@ -3314,6 +3561,7 @@ export class Engine {
         // After the basis, which is a size given where it is committed as one.
         ratioForAutoSize(merged);
         noOutline(merged);
+        this.borderInText(node, merged);
         // Last, on what is committed: an override or an animation can hide a box, or place it.
         hiddenOutOfFlow(merged);
         delete merged['touchAction'];
@@ -3321,8 +3569,103 @@ export class Engine {
             stillTouched(merged);
         this.heldFor(node, merged);
         this.movePaint(node, merged);
+        if (node.raised !== undefined)
+            merged['zIndex'] ??= node.raised;
         return merged;
     }
+    /**
+     * The z-index a view is drawn at for the boxes in it: the highest of theirs. A browser draws a
+     * box with a z-index over what follows the boxes it is in, and a native view is ordered among
+     * the views beside it and no further, so each view the box is in is raised as far. Read from
+     * what its children committed, which for a raised child is what raised it. A child with a
+     * z-index of its own answers with that and nothing from inside it, as the stacking context it
+     * is. Only a plain view is raised: a scroll view clips what is in it, and a screen is ordered
+     * by its stack.
+     *
+     * ponytail: a z-index is the one thing read as making a stacking context. Opacity and a
+     * transform make one in a browser too; read them here if a box is ever raised past one.
+     */
+    raisedBy(node, viewName) {
+        if (viewName !== DEFAULT_VIEW)
+            return undefined;
+        let over = 0;
+        for (const child of node.children) {
+            const z = child.committed?.props['zIndex'];
+            if (typeof z !== 'number' || z <= over)
+                continue;
+            if (!this.committedElsewhere(child) && !this.withheld(child))
+                over = z;
+        }
+        return over || undefined;
+    }
+    /** Read how far a view is raised, once its children are committed: its props are, if it moved. */
+    raise(node, viewName) {
+        const raised = this.raisedBy(node, viewName);
+        if (raised === node.raised)
+            return;
+        node.raised = raised;
+        node.propsDirty = true;
+    }
+    /**
+     * Draw a border that has a width and no colour in the colour of the text, as a browser does:
+     * `border-color` starts as `currentColor`, and native starts it as black. Each side with a
+     * width, where nothing gave that side a colour. Left to native where there is no text colour
+     * to take, which is black in a browser too.
+     */
+    borderInText(node, props) {
+        let text;
+        // The side a logical colour is for is the other one where text is read right to left.
+        const flipped = (props['borderStartColor'] != null || props['borderEndColor'] != null) &&
+            this.styles.readsRightToLeft(props);
+        for (const side of BORDER_SIDES) {
+            if (!colourless(props, side, flipped))
+                continue;
+            text ??= props['color'] ?? this.styles.resolve(node, this.styleEpoch).inherited['color'];
+            if (text == null)
+                return;
+            props[side.color] = text;
+        }
+    }
+    /**
+     * The tallest line, as the system text size draws it, of the runs of text in a paragraph:
+     * none is 0. A run scales as what it is in does, `within`, but for what it says of that
+     * itself: one that does not scale, or stops at a size, beside text that does.
+     */
+    tallestRun(node, within, tallest) {
+        for (const child of node.children) {
+            if (!isTextElement(child))
+                continue;
+            const scaling = {
+                allowFontScaling: child.props['allowFontScaling'] ?? within['allowFontScaling'],
+                maxFontSizeMultiplier: child.props['maxFontSizeMultiplier'] ?? within['maxFontSizeMultiplier'],
+            };
+            const line = inlineOf(child)['lineHeight'] ??
+                this.styles.resolve(child, this.styleEpoch).style['lineHeight'];
+            const drawn = typeof line === 'number' ? line * textScale(scaling, this.fontScale) : 0;
+            tallest = this.tallestRun(child, scaling, Math.max(tallest, drawn));
+        }
+        return tallest;
+    }
+    /**
+     * Keep a paragraph whose text has nowhere to wrap on one line, as a browser does: a word is
+     * not broken inside, and what does not fit is past the edge. Native breaks a word wider than
+     * its line between any two letters. Cut at the edge, where no rule says how it ends.
+     */
+    wholeWords(node, props) {
+        // Remembered, for its text changing to be told from its text changing what this answers.
+        node.oneWord = props['numberOfLines'] == null ? unbroken(node) : undefined;
+        if (!node.oneWord)
+            return;
+        props['numberOfLines'] = 1;
+        const ended = [
+            this.styles.resolve(node, this.styleEpoch).style,
+            node.props,
+            inlineOf(node),
+            flattenStyle(node.props[STYLE_OVERRIDE], {}),
+        ];
+        if (ended.every((from) => from['ellipsizeMode'] == null))
+            props['ellipsizeMode'] = 'clip';
+    }
     /**
      * Leave a node's background out of what it commits when a child paints it, and give that child
      * its parent's: the cascade's, and over it the parent's inline style.
@@ -3439,6 +3782,8 @@ export class Engine {
     sheetReplaced(sheet, next) {
         if (sheet === next && this.knownSheets.has(sheet))
             return;
+        this.hasReaders.delete(sheet);
+        this.watchHas(next);
         this.unwatchActive(sheet);
         this.watchActive(next);
         const at = this.sheetOrder.indexOf(sheet);
@@ -3538,7 +3883,8 @@ export class Engine {
             }
             return props;
         }
-        const frames = this.keyframes.get(spec.name);
+        const written = this.keyframesOf(node, spec.name);
+        const frames = written && this.framesFor(node, written);
         if (!frames) {
             // Keyframes a hot swap deleted, from under an animation that was playing them, or ones a
             // sheet later in this commit has: see `settleKeyframes`.
@@ -3554,6 +3900,49 @@ export class Engine {
         this.startPlaying(node, spec, frames, props);
         return Object.assign(props, playedOver(node));
     }
+    /**
+     * The keyframes a node's animation names: those of its own component's sheet where it has
+     * some by that name, as Angular scopes a component's keyframes in a browser, and otherwise
+     * whichever sheet has them, since any other is global.
+     *
+     * ponytail: a host is asked of the sheet it is written in before its own component's, so
+     * a `:host` animation is played by its parent's frames where both have the name.
+     */
+    keyframesOf(node, name) {
+        const own = node.sheet?.keyframes?.[name] ?? node.hostSheet?.keyframes?.[name];
+        return own ?? this.keyframes.get(name);
+    }
+    /** Each node's frames as they settle on it, kept for as long as they settle the same. */
+    settledFrames = new WeakMap();
+    /**
+     * An animation's frames for the node playing it: those with a value that waits for the node,
+     * a `var()` it sets, settled against it. The same frames are answered while they settle the
+     * same, and others once a variable changes, which is what an animation under way is played
+     * on from: see `reframe`.
+     */
+    framesFor(node, frames) {
+        if (!frames.some((frame) => frame.deferred))
+            return frames;
+        const kept = this.settledFrames.get(node);
+        // Styled as it was, it settles as it did: a commit a frame asks, and most change nothing.
+        const styled = node.styleCache;
+        if (kept?.of === frames && kept.styled === styled)
+            return kept.frames;
+        const settled = frames.map((frame) => frame.deferred && this.styles.settleFor(node, frame.deferred, this.styleEpoch));
+        const key = JSON.stringify(settled);
+        if (kept?.of === frames && kept.key === key) {
+            kept.styled = styled;
+            return kept.frames;
+        }
+        const made = frames.map((frame, at) => {
+            const values = Object.entries(settled[at] ?? {}).filter(([, value]) => value !== undefined);
+            return values.length
+                ? { ...frame, declarations: { ...frame.declarations, ...Object.fromEntries(values) } }
+                : frame;
+        });
+        this.settledFrames.set(node, { of: frames, styled, key, frames: made });
+        return made;
+    }
     /**
      * A clock animation the scroll plays instead: the same animation where only the timeline moved,
      * and one cancelled where the name changed.
@@ -3749,8 +4138,8 @@ export class Engine {
             node.playing = started;
             if (spec.paused)
                 started.pausedAt = this.now();
-            else if (!this.playNatively(node, started, props))
-                this.playing.add(node);
+            else
+                this.playSomewhere(node, started, props);
             this.emitTransition(node, 'topAnimationstart', spec.name);
             return;
         }
@@ -3764,6 +4153,13 @@ export class Engine {
         }
         this.playOrPause(node, node.playing, spec);
     }
+    /** Play an animation that has just started: by native's layout, by native's driver, or here. */
+    playSomewhere(node, started, props) {
+        if (this.layPlayed(node, started))
+            this.laidPlayed.push({ node, running: started });
+        else if (!this.playNatively(node, started, props))
+            this.playing.add(node);
+    }
     /**
      * The colour `node` inherits, for frames that set `color: currentColor`, which is that colour
      * wherever the animation has got to, as in CSS. Undefined for frames that do not.
@@ -3781,7 +4177,8 @@ export class Engine {
      */
     reframe(node, current, frames, props, inherited) {
         const tracks = tracksOf(frames, props, inherited);
-        const reframed = { ...current, tracks, inherited };
+        // One native was laying out goes on from JavaScript, by the clock it started on.
+        const reframed = { ...current, tracks, inherited, laid: undefined };
         const { values, finished } = sample(reframed, current.pausedAt ?? this.now());
         const holds = current.spec.fill === 'forwards' || current.spec.fill === 'both';
         reframed.values = finished && !holds ? {} : values;
@@ -3814,7 +4211,7 @@ export class Engine {
     /** Every node playing a scroll-driven animation, by the scroll view that plays it. */
     scrollTimelines = new Map();
     /** How far each such scroll view scrolls, along each axis, once one of its events has said. */
-    scrollExtents = new Map();
+    scrollExtents = new WeakMap();
     /**
      * An animation played by the nearest scroll view's offset: `animation-timeline: scroll()`.
      *
@@ -3900,8 +4297,13 @@ export class Engine {
             return;
         node.scrolled = undefined;
         scrolled.drive?.stop();
-        if (scrolled.source)
-            this.scrollTimelines.get(scrolled.source)?.delete(node);
+        const playing = scrolled.source && this.scrollTimelines.get(scrolled.source);
+        if (!playing)
+            return;
+        playing.delete(node);
+        // The last to follow this scroll view: a key left here keeps it, and all it is linked to.
+        if (!playing.size)
+            this.scrollTimelines.delete(scrolled.source);
     }
     /**
      * A scroll view has said how far it scrolls. Every animation on it with a range that depends on
@@ -3975,7 +4377,8 @@ export class Engine {
     }
     /** Nobody saw what the last commit gave a view it created, so this is where the view starts. */
     unseenTransitions(node) {
-        if (node.bornIn < this.unseen)
+        // One with no commit it was born in has been seen, whatever was committed since.
+        if (node.bornIn === undefined || node.bornIn < this.unseen)
             return;
         this.stopEased(node);
         node.transitions = undefined;
@@ -4037,36 +4440,101 @@ export class Engine {
             if (eased.laid && !eased.done)
                 props[key] = eased.to;
     }
+    /** The animations this commit lays out at their last frame, for native to move the views to. */
+    laidPlayed = [];
     /**
-     * Before a commit is handed over: ask native to move what it lays out, or take the
-     * transitions back to ease them from JavaScript where the commit moves anything else, and
-     * where they would not all take as long. Answers whether the tree has to be reconciled again.
+     * Whether an animation that has just started is one native can play by laying the view out
+     * at its last frame: two frames of sizes or places, played once from where the view is drawn
+     * now, which is where native moves it from. It is then committed at that frame; see `layOut`.
+     */
+    layPlayed(node, running) {
+        const drawn = node.committed?.props;
+        const { spec, tracks } = running;
+        if (!this.fabric.configureNextLayoutAnimation || !drawn || !tracks.size)
+            return false;
+        if (!playedOnce(spec))
+            return false;
+        for (const [key, track] of tracks) {
+            if (!LAID_OUT.has(key) || !fromWhereDrawn(track, drawn[key]))
+                return false;
+        }
+        running.laid = true;
+        running.values = Object.fromEntries([...tracks].map(([key, track]) => [key, track[1].value]));
+        return true;
+    }
+    /** Go on from JavaScript with an animation native was to lay out, by the clock it started on. */
+    playLaidHere(node, running) {
+        running.laid = undefined;
+        running.values = sample(running, this.now()).values;
+        this.playing.add(node);
+    }
+    /** An animation native laid out has had its time: it is at its last frame, and says so. */
+    endLaidPlayed(node, running) {
+        if (!running.laid || running.done || node.playing !== running)
+            return;
+        Object.assign(running, { done: true, laid: undefined });
+        if (!this.keeps(node, running)) {
+            running.values = {};
+            this.markProps(node, false);
+        }
+        this.emitTransition(node, 'topAnimationend', running.spec.name);
+        this.flushTransitionEvents();
+        if (this.pending)
+            this.commit();
+    }
+    /**
+     * Before a commit is handed over: ask native to move what it lays out, and take back to
+     * ease from JavaScript whatever it cannot: all of it where the commit moves anything else,
+     * and otherwise what would not take as long as the longest. Answers whether the tree has to
+     * be reconciled again.
      */
     layOut() {
         const laying = this.laying;
+        const played = this.laidPlayed.filter(({ node, running }) => node.playing === running);
         const others = this.movesOthers;
         this.laying = [];
+        this.laidPlayed = [];
         this.movesOthers = false;
-        if (!laying.length)
+        if (!laying.length && !played.length)
             return false;
-        const [first] = laying;
-        const alike = laying.every(({ eased }) => eased.duration === first.eased.duration);
-        if (others || !alike) {
-            for (const { node, eased } of laying) {
-                eased.laid = undefined;
-                this.running.add(node);
-            }
-            for (const { node } of laying)
-                this.markProps(node, false);
-            return true;
+        // Native takes one length of time for a commit: the longest asked of it, and whatever
+        // would take another is eased from JavaScript. None of it, where anything else moves.
+        const longest = Math.max(...laying.map(({ eased }) => eased.duration), ...played.map(({ running }) => running.spec.duration));
+        const kept = (duration) => !others && duration === longest;
+        const back = [];
+        for (const { node, eased } of laying) {
+            if (kept(eased.duration))
+                continue;
+            eased.laid = undefined;
+            this.running.add(node);
+            back.push(node);
+        }
+        for (const { node, running } of played) {
+            if (kept(running.spec.duration))
+                continue;
+            this.playLaidHere(node, running);
+            back.push(node);
         }
-        const { duration, easing } = first.eased;
+        for (const node of back)
+            this.markProps(node, false);
+        if (!others)
+            this.askLayout(laying, played, longest);
+        return back.length > 0;
+    }
+    /** Ask native to move what the commit lays out over `duration`, and end each when it is up. */
+    askLayout(laying, played, duration) {
+        const easing = laying.find(({ eased }) => eased.laid)?.eased.easing ??
+            played.find(({ running }) => running.laid).running.spec.easing;
         const nothing = () => undefined;
         this.fabric.configureNextLayoutAnimation({ duration, update: { type: layoutCurve(easing) } }, nothing, nothing);
         for (const { node, key, eased } of laying) {
-            setTimeout(() => this.endLaid(node, key, eased), duration);
+            if (eased.laid)
+                setTimeout(() => this.endLaid(node, key, eased), duration);
+        }
+        for (const { node, running } of played) {
+            if (running.laid)
+                setTimeout(() => this.endLaidPlayed(node, running), duration);
         }
-        return false;
     }
     /**
      * Note a commit that resizes or moves a box in no transition native lays out: a prop of one
@@ -4078,8 +4546,7 @@ export class Engine {
         if (resized)
             this.movesOthers = true;
         for (const key in payload) {
-            const eased = node.transitions?.get(key);
-            if (eased?.laid && !eased.done)
+            if (laidByNative(node, key))
                 continue;
             // Text as long as it was is taken to be as wide, as a grid takes it: see `shapeOf`.
             const longer = key === 'text' && String(payload[key]).length !== String(words).length;
@@ -4131,13 +4598,16 @@ export class Engine {
     }
     playEased(node, state, keys, props) {
         const first = state.get(keys[0]);
+        // Where the view is committed: one that takes a touch stops short of no opacity.
+        const touched = this.responders.has(node);
+        const seen = (key, value) => touched && key === 'opacity' ? stillTouched({ ...props, opacity: value })['opacity'] : value;
         const tracks = new Map(keys.map((key) => {
             const { current, to, easing } = state.get(key);
             return [
                 key,
                 [
-                    { offset: 0, value: current, easing },
-                    { offset: 1, value: to },
+                    { offset: 0, value: seen(key, current), easing },
+                    { offset: 1, value: seen(key, to) },
                 ],
             ];
         }));
@@ -4491,6 +4961,7 @@ export class Engine {
         this.noteBaselineFields(node);
         this.freshBaselines(node);
         const childHandles = this.reconcileChildren(node, viewName, style);
+        this.raise(node, viewName);
         noteTouches(node, style);
         const previous = node.committed;
         this.notePresented(node, viewName);
@@ -4601,8 +5072,12 @@ export class Engine {
         }
         box.parent = parent;
         // The text is not under the box in the tree, so a change to it never marked the box.
-        if (!this.isClean(text))
+        if (!this.isClean(text)) {
             box.subtreeDirty = true;
+            // Nor had it merged again where the text became one word, or stopped being one.
+            if (box.oneWord !== undefined && unbroken(box) !== box.oneWord)
+                box.propsDirty = true;
+        }
         return box;
     }
     /** Remember an iOS modal host committed as showing, so hiding it waits for `topDismiss`. */
@@ -4986,6 +5461,11 @@ export class Engine {
     setResponder(node, handlers) {
         this.registerEventHandler();
         this.responders.set(node, handlers);
+        // A fade native is playing was given to it as a view that takes no touch fades: to
+        // nothing. From here it is eased to where the view is committed.
+        const fade = node.transitions?.get('opacity')?.native;
+        if (fade)
+            this.backToScriptEased(node, fade, this.now());
         this.keepNative(node, true);
         // What it is committed with can hang on whether it takes a touch: see `stillTouched`.
         this.markProps(node);
@@ -5213,12 +5693,14 @@ export class Engine {
         this.currentResponder = null;
         this.tellNative(node, false);
         const handlers = this.responders.get(node);
+        // Before the handler is told: what it does is for the render pass after it to commit
+        // whole, and not to be drawn part made with the view no longer pressed.
+        if (changed)
+            this.commit();
         if (terminated)
             handlers?.onResponderTerminate?.(event);
         else
             handlers?.onResponderRelease?.(event);
-        if (changed)
-            this.commit();
     }
     tellNative(node, isResponder) {
         const handle = node.committed?.handle;