@ng-native/fabric 0.9.0 → 0.11.0

package/dist/engine.d.ts

@@ -323,6 +323,10 @@ export interface EngineNode extends HostNode {
     baselineFields?: Set<EngineNode>;
     /** Commit this node again with its children so Fabric measures it again. `remeasureText`. */
     remeasure?: true;
+    /** On a paragraph, whether its text was one word when it was last merged: `wholeWords`. */
+    oneWord?: boolean;
+    /** The z-index this view is drawn at for a box in it, where it has none: `Engine.raise`. */
+    raised?: number;
     /**
      * A modal host committed as visible on iOS whose dismissal native has not yet reported. It
      * stays committed after `visible` goes false until `topDismiss`, as React Native's Modal.js
@@ -830,6 +834,12 @@ export declare class Engine implements HostEngine {
      * changes it too, by keeping or dropping the space before it.
      */
     private markTextContent;
+    /**
+     * 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.
+     */
+    private markWords;
     /** A subtree that went out of the tree is back in: its hoisted nodes commit again. */
     private wakeHoists;
     /**
@@ -870,6 +880,11 @@ export declare class Engine implements HostEngine {
     parentNode(node: EngineNode): EngineNode | null;
     nextSibling(node: EngineNode): EngineNode | null;
     setProp(node: EngineNode, key: string, value: unknown): void;
+    /**
+     * 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`.
+     */
+    private markParagraph;
     /**
      * Paint a node's background on one of its children instead of on the node: the node keeps its
      * `background-color` and `background-image` in the cascade, where a stylesheet wrote them, and
@@ -926,6 +941,23 @@ export declare class Engine implements HostEngine {
      * which would restyle everything under them. Only sheets that use `:has()` pay.
      */
     private markBeneath;
+    /**
+     * 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.
+     */
+    private readonly hasReaders;
+    /** The nodes something changed beneath since the last commit, where any sheet has such a rule. */
+    private readonly changedBeneath;
+    /**
+     * 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.
+     */
+    private markUnderHas;
+    /**
+     * 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.
+     */
     private markLaterSiblings;
     /** `node`'s child list changed: `moved` came into it at `at`, or went out of it from there. */
     private markStructure;
@@ -1056,6 +1088,40 @@ export declare class Engine implements HostEngine {
     /** What a touch on an element that keeps a drag holds off, while it lasts: see `holdSwipe`. */
     private heldFor;
     private mergeProps;
+    /**
+     * 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.
+     */
+    private raisedBy;
+    /** Read how far a view is raised, once its children are committed: its props are, if it moved. */
+    private raise;
+    /**
+     * 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.
+     */
+    private borderInText;
+    /**
+     * 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.
+     */
+    private tallestRun;
+    /**
+     * 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.
+     */
+    private wholeWords;
     /**
      * 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.

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";
@@ -867,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
@@ -918,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.
  *
@@ -1574,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)
@@ -1677,6 +1759,8 @@ class RetainedNode {
     committedUnder = null;
     kept = undefined;
     remeasure = undefined;
+    oneWord = undefined;
+    raised = undefined;
     propsDirty = false;
     structureDirty = false;
     subtreeDirty = false;
@@ -2352,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);
             }
         };
@@ -2366,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);
@@ -2588,7 +2682,8 @@ 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. The same classes in
@@ -2667,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) {
@@ -2762,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);
@@ -2806,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
@@ -2861,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
@@ -2956,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;
@@ -2973,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. */
@@ -3056,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;
     }
@@ -3109,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();
@@ -3358,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);
@@ -3375,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'];
@@ -3382,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.
@@ -3500,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);
@@ -3927,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()`.
      *
@@ -4013,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
@@ -4672,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);
@@ -4782,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`. */