@ng-native/fabric 0.5.0 → 0.7.0

package/dist/engine.js

@@ -7,15 +7,15 @@
  * 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, inlineInherited, setsInherited, StyleResolver, usesActive, } from "./css.js";
+import { boundDeclaration, faded, fills, inlineInherited, setsInherited, StyleResolver, usesActive, elementsAtEnd, placeReadElsewhere, siblingReach, } from "./css.js";
 import { applyAria } from "./aria-props.js";
 import { STYLED_ELEMENTS } from "./element-styles.js";
-import { animationEvent, bezier, interpolate, readsInheritedColour, sample, step, tracksOf, } from "./transition.js";
+import { animationEvent, bezier, interpolate, readsInheritedColour, sample, step, steppedKeys, tracksOf, } from "./transition.js";
 import { isFormsInput } from "./forms-inputs.js";
 import { transformList } from "./inline-transform.js";
 import { tokenFromValue } from "./inline-token.js";
 import { NativeScrollDriver, scrollFeed, } from "./native-drive.js";
-import { clockChannels, firstFrame, rangeOf, scrollChannels } from "./scroll-animation.js";
+import { clockChannels, firstFrame, movesByShare, rangeOf, scrollChannels, sharesAsPoints, } from "./scroll-animation.js";
 import { FontFaces } from "./font-faces.js";
 import { premultipliedStops } from "./premultiplied-stops.js";
 /**
@@ -389,6 +389,33 @@ const VIRTUAL_TEXT = 'VirtualText';
 const DEFAULT_VIEW = 'View';
 /** A top-level text, the one view that aligns its lines. A nested text is a `VirtualText`. */
 const PARAGRAPH = 'Paragraph';
+/**
+ * The box Yoga takes a view's baseline from where the view has none of its own: its first child
+ * that is laid out in its flow. Words written straight into the view are the paragraph the
+ * engine makes around them, and a child that is not displayed has no view to ask.
+ */
+function firstInFlow(node) {
+    for (const child of node.children ?? []) {
+        // Not the paragraph itself, which holds the words it was made around.
+        if (child.kind === 'text' && child.box)
+            return child.box === node ? undefined : child.box;
+        if (child.kind !== 'element' || ownLayout(child, 'display') === 'none')
+            continue;
+        if (ownLayout(child, 'position') !== 'absolute')
+            return child;
+    }
+    return undefined;
+}
+const isNode = (node) => node !== undefined;
+/** Whether a row lays a child out among its others, and so can take its baseline from it. */
+const inFlow = (child) => child.kind === 'element' && ownLayout(child, 'position') !== 'absolute';
+/** The text field a row's box takes its baseline from: itself, or the first in its flow down. */
+function fieldOnBaseline(item) {
+    let at = item;
+    while (at?.kind === 'element' && !TEXT_INPUTS.has(viewNameOf(at)))
+        at = firstInFlow(at);
+    return at?.kind === 'element' ? at : undefined;
+}
 const textDirection = (value) => value === 'ltr' || value === 'rtl' ? value : undefined;
 /**
  * What iOS scales a text's `lineHeight` by: the system text size, capped by the text's own
@@ -401,6 +428,89 @@ function textScale(props, fontScale = 1) {
     const cap = props['maxFontSizeMultiplier'];
     return typeof cap === 'number' && cap >= 1 ? Math.min(fontScale, cap) : fontScale;
 }
+/** A field's padding and border on its top or bottom edge, as they are written. */
+const blockEdge = (props, side, logical) => [
+    props[`padding${side}`] ??
+        props[`paddingBlock${logical}`] ??
+        props['paddingBlock'] ??
+        props['paddingVertical'] ??
+        props['padding'] ??
+        0,
+    props[`border${side}Width`] ?? props['borderWidth'] ?? 0,
+];
+/**
+ * A multiline field's `rows` as its height, where it was given none: that many lines of its
+ * line height at the system text size, inside its padding and border, as a browser sizes a `<textarea>`. A native field
+ * is as tall as its text, which is one line before anything is typed.
+ */
+function rowsTall(props, fontScale) {
+    const rows = Number(props['rows']);
+    const line = props['lineHeight'];
+    if (props['multiline'] !== true || !(rows > 0) || typeof line !== 'number')
+        return;
+    if (isSet(props['height']) && props['height'] !== 'auto')
+        return;
+    // A content box's height is its lines alone: Yoga adds the padding and border itself.
+    const edges = props['boxSizing'] === 'content-box'
+        ? []
+        : [...blockEdge(props, 'Top', 'Start'), ...blockEdge(props, 'Bottom', 'End')];
+    if (!edges.every((part) => typeof part === 'number'))
+        return;
+    // At the system text size, which the field's lines are drawn at.
+    const lines = rows * line * textScale(props, fontScale);
+    props['height'] = edges.reduce((sum, part) => sum + part, lines);
+}
+/** A field's own minimum height: none where it says `auto`, which a web element starts with. */
+const ownMinimum = (minHeight) => (minHeight === 'auto' ? 0 : (minHeight ?? 0));
+/** How tall the system's font is, as a share of its size: its rise over the baseline and fall under. */
+const FONT_LINE = 0.95 + 0.24;
+/**
+ * How tall a field is by its line: the line, padding and border of a border-box field, Yoga's
+ * default, and its content alone for a content-box one, which Yoga adds the padding and border
+ * to itself. In a row aligned by baseline some of the line is kept as padding: `lineBaseline`.
+ */
+function lineBox(props, box, onBaseline, fontScale) {
+    const half = onBaseline ? lineBaseline(props, box[0], box, fontScale) : 0;
+    if (props['boxSizing'] === 'content-box')
+        return box[0] - 2 * half;
+    return box.reduce((sum, part) => sum + part, 0);
+}
+/**
+ * `lineBaseline` for a field a height sizes: the room is what the height leaves its text, and
+ * the field stays that height. A content-box field's height is its content's, so what is now
+ * padding comes out of it.
+ */
+function heightBaseline(props, height, onBaseline, fontScale) {
+    if (!onBaseline)
+        return;
+    const edges = [...blockEdge(props, 'Top', 'Start'), ...blockEdge(props, 'Bottom', 'End')];
+    if (!edges.every((part) => typeof part === 'number'))
+        return;
+    const content = props['boxSizing'] === 'content-box';
+    const room = content ? height : edges.reduce((left, part) => left - part, height);
+    const half = lineBaseline(props, room, [room, ...edges], fontScale);
+    if (content)
+        props['height'] = height - 2 * half;
+}
+/**
+ * Give a field with its line height left out the baseline of a paragraph in a line as tall, for
+ * a field in a row aligned by baseline: half the room the line has over the font is kept as
+ * padding over and under the text. React Native says a field's baseline from its text and its
+ * top padding, so without this it is the font's own, and the row lifts the paragraphs beside the
+ * field to it: a form field's prefix and suffix sit higher than what is typed. Answers the half.
+ *
+ * ponytail: the font is taken to be as tall as the system's, `FONT_LINE` of its size. Read from
+ * the font if a field in another face is seen a point off its prefix.
+ */
+function lineBaseline(props, line, [, top, , bottom], fontScale) {
+    const size = props['fontSize'];
+    if (typeof size !== 'number')
+        return 0;
+    const half = Math.max(0, (line - size * textScale(props, fontScale) * FONT_LINE) / 2);
+    props['paddingTop'] = top + half;
+    props['paddingBottom'] = bottom + half;
+    return half;
+}
 /**
  * Centre the text of a single-line text field that has a line height, as Chrome centres an
  * input's, keeping the height the line height gives it.
@@ -421,7 +531,7 @@ function textScale(props, fontScale = 1) {
  * height alone for a content-box one. A null `height` is no height. A value that is not a number
  * cannot be added up, and leaves the field as it was.
  */
-function centreSingleLine(viewName, props, fontScale) {
+function centreSingleLine(viewName, props, fontScale, onBaseline = false) {
     const lineHeight = props['lineHeight'];
     if (!TEXT_INPUTS.has(viewName) || typeof lineHeight !== 'number')
         return;
@@ -430,6 +540,7 @@ function centreSingleLine(viewName, props, fontScale) {
     const height = props['height'];
     if (typeof height === 'number') {
         delete props['lineHeight'];
+        heightBaseline(props, height, onBaseline, fontScale);
         return;
     }
     // A percentage is a fixed height only where the parent's is definite, known at layout alone.
@@ -438,35 +549,40 @@ function centreSingleLine(viewName, props, fontScale) {
     // Android sizes the field by its line height, and centres the text in it, itself.
     if (viewName !== 'TextInput')
         return;
-    const edge = (side, logical) => [
-        props[`padding${side}`] ??
-            props[`paddingBlock${logical}`] ??
-            props['paddingBlock'] ??
-            props['paddingVertical'] ??
-            props['padding'] ??
-            0,
-        props[`border${side}Width`] ?? props['borderWidth'] ?? 0,
-    ];
+    const edge = (side, logical) => blockEdge(props, side, logical);
     const line = lineHeight * textScale(props, fontScale);
     const box = [line, ...edge('Top', 'Start'), ...edge('Bottom', 'End')];
-    const own = props['minHeight'] ?? 0;
+    const own = ownMinimum(props['minHeight']);
     const max = props['maxHeight'] ?? Infinity;
     if (![...box, own, max].every((part) => typeof part === 'number'))
         return;
     delete props['lineHeight'];
-    // A content-box field's minHeight is its content's: Yoga adds the padding and border itself.
-    const content = props['boxSizing'] === 'content-box'
-        ? line
-        : box.reduce((sum, part) => sum + part, 0);
+    const content = lineBox(props, box, onBaseline, fontScale);
     props['minHeight'] = Math.max(own, Math.min(content, max));
 }
+const NO_STYLE = {};
+/**
+ * An element's inline style, less each property a rule it matches declared `!important`: an
+ * inline style is the last of the plain declarations, under every important one.
+ *
+ * ponytail: by the name a property is committed under, so an inline `padding` is not taken out
+ * by an important `padding-top`. Expand the inline shorthand here if one is ever written so.
+ */
+function inlineOf(node) {
+    if (!node.props['style'])
+        return NO_STYLE;
+    const inline = flattenStyle(node.props['style'], {});
+    for (const key of node.styleCache?.important ?? [])
+        delete inline[key];
+    return inline;
+}
 /**
  * What a container's own style says for `key`, in the order `mergeProps` applies them: a
  * component's override, inline, a prop, its stylesheet, its default.
  */
 function ownLayout(node, key) {
     return (flattenStyle(node.props[STYLE_OVERRIDE], {})[key] ??
-        flattenStyle(node.props['style'], {})[key] ??
+        inlineOf(node)[key] ??
         node.props[key] ??
         node.styleCache?.style[key] ??
         node.defaultStyle?.[key]);
@@ -504,6 +620,10 @@ const STRETCHES = new Set([undefined, null, 'auto', 'stretch']);
  * kept, since it stops the stretch already.
  */
 function fitContent(node, props) {
+    const capped = {
+        row: capAtContent(props, 'width', 'maxWidth'),
+        column: capAtContent(props, 'height', 'maxHeight'),
+    };
     const width = props['width'] === 'fit-content';
     const height = props['height'] === 'fit-content';
     if (!width && !height)
@@ -518,12 +638,83 @@ function fitContent(node, props) {
     const container = containerOf(parent);
     parent.fitContainer = container;
     const [direction, align] = container.split(' ');
+    if (capped[direction === 'row' ? 'row' : 'column'])
+        withoutGrowth(props);
     const across = direction === 'row' ? height : width;
     if (across && align === 'stretch' && STRETCHES.has(props['alignSelf'])) {
         props['alignSelf'] = 'flex-start';
     }
 }
+/**
+ * A box capped at its content along its container's main axis, where it would grow: a browser
+ * clamps a growing item by its maximum, and there is no such cap to hand Yoga. So it does not
+ * grow, and starts from its content, which is as far as the cap would let it get. It may still
+ * shrink.
+ */
+function withoutGrowth(props) {
+    if (typeof props['flex'] === 'number' && props['flex'] > 0) {
+        delete props['flex'];
+        props['flexShrink'] ??= 1;
+    }
+    delete props['flexGrow'];
+    delete props['flexBasis'];
+}
+/**
+ * `max-width: max-content`, and the same of a height: no bigger than its content, which for a
+ * box that would fill its container is `fit-content`. Yoga has no such cap. Answers whether the
+ * box is the size of its content for it: one that would fill, or one that was `fit-content` as
+ * written.
+ *
+ * ponytail: a size in points is left as it is, since nothing here knows how big the content
+ * is. Measure it if a box is ever given both.
+ */
+function capAtContent(props, size, cap) {
+    if (props[cap] !== 'max-content')
+        return false;
+    delete props[cap];
+    const own = props[size];
+    const fills = own == null || own === 'auto' || (typeof own === 'string' && own.endsWith('%'));
+    if (fills)
+        props[size] = 'fit-content';
+    return fills || own === 'fit-content';
+}
 const isPercent = (value) => typeof value === 'string' && value.endsWith('%');
+/** Whether a `flex-basis` is a length or a percentage of something: not zero, and not `auto`. */
+const isSizedBasis = (basis) => isPercent(basis)
+    ? Number.parseFloat(basis) !== 0
+    : typeof basis === 'number' && basis !== 0;
+/**
+ * A `flex-basis` that is a length or a percentage, as the size it is along its container's main
+ * axis: a width in a row and a height in a column, over one written for that axis.
+ *
+ * Yoga works a `flexBasis` out once for a view and keeps the answer, and React Native never has
+ * it forgotten when the view's props change (`computedFlexBasis`, cleared only by
+ * `markDirtyAndPropagate`). A basis that changes after the first layout is not read again, and
+ * a percentage does not follow the box it is a share of. A size is worked out on every pass, and
+ * with no basis Yoga takes the size along the main axis as the basis: the same sum.
+ *
+ * A basis of zero is left as it is, which is every `flex: 1`: under a container with no size on
+ * its main axis Yoga passes over a basis and sizes the box by its content, where a size of zero
+ * would be zero. A box out of the flow is no flex item, and keeps its own size.
+ */
+function basisAsSize(node, props) {
+    const basis = props['flexBasis'];
+    if (!isSizedBasis(basis) || props['position'] === 'absolute')
+        return;
+    const parent = layoutParent(node);
+    if (!parent)
+        return;
+    const container = containerOf(parent);
+    // Remembered on the container, so the box is merged again when the direction changes.
+    parent.fitContainer = container;
+    delete props['flexBasis'];
+    if (container.startsWith('row'))
+        props['width'] = basis;
+    else {
+        props['height'] = basis;
+        percentHeight(node, props);
+    }
+}
 /**
  * Whether a box has a height a percentage can be taken of, as CSS defines one: a height of its
  * own, or one the layout around it gives it. A box as tall as what it holds has none.
@@ -558,14 +749,90 @@ function sizesItself(node, height) {
 function heightFromLayout(node, parent) {
     const [direction, align] = containerOf(parent).split(' ');
     if (direction === 'row') {
-        // Stretched across a row, it is as tall as the row.
+        // Stretched across a row, it is as tall as the row, where the row has a height to be. One
+        // as tall as its content gives none: Yoga takes the percentage of the space on offer there
+        // too, the screen's, where a browser takes it of the row once its content has sized it.
         const self = ownLayout(node, 'alignSelf');
-        return STRETCHES.has(self) && align === 'stretch';
+        return STRETCHES.has(self) && align === 'stretch' && definiteHeight(parent);
     }
     // In a column it has the height it grows to, where the column has one to share out.
     const grows = Number(ownLayout(node, 'flexGrow') ?? ownLayout(node, 'flex') ?? 0) > 0;
     return grows && definiteHeight(parent);
 }
+/**
+ * A placeholder's opacity, which native has none for, as its colour faded by that share: none of
+ * it at 0, which is how a stylesheet hides a placeholder under a label, and all of it at 1.
+ *
+ * ponytail: with no colour of its own the placeholder is native's default, and a platform colour
+ * is native's to resolve: neither is known here, so each is hidden at 0 and left as it is above
+ * that. Name the platform's default, or read the colour back, if one is faded part of the way.
+ */
+function placeholderFaded(props) {
+    const opacity = props['placeholderOpacity'];
+    if (opacity === undefined)
+        return;
+    delete props['placeholderOpacity'];
+    if (typeof opacity !== 'number' || opacity >= 1)
+        return;
+    const colour = props['placeholderTextColor'];
+    if (typeof colour === 'string')
+        props['placeholderTextColor'] = faded(colour, Math.max(opacity, 0));
+    else if (opacity <= 0)
+        props['placeholderTextColor'] = 'rgba(0, 0, 0, 0)';
+}
+/** The least alpha iOS sends a touch to a view at: under a hundredth it is passed over. */
+const TOUCHED_ALPHA = 0.011;
+/**
+ * A view that takes a touch and has no opacity, committed with the least there is to be sent
+ * one. A browser sends a press to an element at `opacity: 0`, which is how a see-through
+ * backdrop hears a press outside a menu; iOS passes over a view it would not draw. A hundredth
+ * of what the view draws is not seen.
+ */
+function stillTouched(props) {
+    // One told to take no touch is not to be sent one, seen or not.
+    if (props['pointerEvents'] === 'none')
+        return;
+    const opacity = props['opacity'];
+    if (typeof opacity === 'number' && opacity < TOUCHED_ALPHA)
+        props['opacity'] = TOUCHED_ALPHA;
+}
+/**
+ * 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
+ * column and the width in a row.
+ */
+function ratioForAutoSize(props) {
+    if (!isSet(props['aspectRatio']))
+        return;
+    const given = (size) => isSet(size) && size !== 'auto';
+    if (given(props['width']) && given(props['height']))
+        delete props['aspectRatio'];
+}
+const OUTLINE_KEYS = ['outlineWidth', 'outlineStyle', 'outlineColor', 'outlineOffset'];
+/**
+ * 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
+ * Android a text field given an outline prop after it is first drawn has its background set
+ * again, with which the padding Android gives a text field comes back over the padding it was
+ * laid out with: a field as tall as its line clips its text away. A stylesheet takes a
+ * browser's focus ring off a field with `outline: none` for the focused field alone.
+ */
+function noOutline(props) {
+    if (props['outlineWidth'] !== 0)
+        return;
+    for (const key of OUTLINE_KEYS)
+        delete props[key];
+}
+/**
+ * A box with `display: none`, out of the flow as well. It takes no room either way, but Yoga
+ * reads an item's baseline from its first child that is in the flow, and a hidden one has no
+ * layout to read: under a row with `align-items: baseline` the baseline is not a number, and
+ * the row comes to no height with nothing in it placed. Out of the flow it is passed over.
+ */
+function hiddenOutOfFlow(props) {
+    if (props['display'] === 'none')
+        props['position'] = 'absolute';
+}
 /**
  * `height: 50%` under a parent with no height to take it of, which CSS reads as `auto`. Yoga
  * takes it of the space on offer, the screen's or everything a scroll view holds, so no height
@@ -574,6 +841,9 @@ function heightFromLayout(node, parent) {
 function percentHeight(node, props) {
     if (!isPercent(props['height']))
         return;
+    // Out of the flow, it is of the box that holds it, which is laid out first and has a height.
+    if (props['position'] === 'absolute')
+        return;
     const parent = layoutParent(node);
     if (parent && !definiteHeight(parent))
         delete props['height'];
@@ -623,6 +893,43 @@ const TEXT_ALIGN = {
 };
 /** The native modal host, which is left out of a commit while `visible` is false. */
 const MODAL_HOST = 'ModalHostView';
+/**
+ * A screen's `gestureResponseDistance` that no touch is within: how far from each edge a swipe
+ * back may start, with -1 for no limit, and none at all from the leading edge. It is what
+ * `react-native-screens` reads as the swipe is about to begin; whether the swipe is enabled it
+ * read when the finger came down, before anything here had heard of the touch.
+ */
+const NO_SWIPE = Object.freeze({ start: -1, end: 0, top: -1, bottom: -1 });
+/** A screen of a native stack, which is what the swipe back is a gesture of. */
+const STACK_SCREEN = 'RNSScreen';
+/** What an element's `touch-action` is: bound on it, or from the rules it matches. */
+function touchActionOf(node) {
+    return inlineOf(node)['touchAction'] ?? node.styleCache?.style['touchAction'];
+}
+/** Where a touch is on the screen: its own point, or its first finger's. */
+function pointOf(nativeEvent) {
+    const event = (nativeEvent ?? {});
+    const touch = event.pageX === undefined ? event.touches?.[0] : event;
+    return { x: touch?.pageX ?? 0, y: touch?.pageY ?? 0 };
+}
+/**
+ * What a touch on a node leaves to the browser: the `touch-action` of it, or of the nearest
+ * element over it that says. Nothing where none does, which leaves everything.
+ */
+function touchActions(node) {
+    for (let up = node; up; up = up.parent) {
+        const said = up.kind === 'element' ? touchActionOf(up) : undefined;
+        if (typeof said === 'string')
+            return said.split(' ');
+    }
+    return undefined;
+}
+const PANS_ACROSS = ['auto', 'manipulation', 'pan-x', 'pan-left', 'pan-right'];
+const PANS_ALONG = ['auto', 'manipulation', 'pan-y', 'pan-up', 'pan-down'];
+/** Whether an element keeps a drag in one direction: its `touch-action` leaves no pan that way. */
+const keeps = (actions, pans) => actions !== undefined && !actions.some((action) => pans.includes(action));
+/** How far a finger moves before a browser has settled which way a drag is going. */
+const DRAG_SLOP = 4;
 /**
  * Register a codegen'd third-party Fabric component, e.g.
  * `registerViewName('rns-screen', 'RNSScreen')`, which is how the router reaches
@@ -881,12 +1188,14 @@ function isTextElement(node) {
         return false;
     return !TEXT_ELEMENTS.has(node.name) || holdsOnlyText(node);
 }
+/** Whether a text element holds text and nothing else. One that holds nothing holds no text. */
 function holdsOnlyText(node) {
-    for (const child of node.children ?? []) {
+    const children = node.children ?? [];
+    for (const child of children) {
         if (child.kind === 'element' && !isTextElement(child))
             return false;
     }
-    return true;
+    return children.length > 0;
 }
 const ALIGNS = new Set(['center', 'flex-end', 'space-around', 'space-evenly']);
 /**
@@ -896,20 +1205,26 @@ const ALIGNS = new Set(['center', 'flex-end', 'space-around', 'space-evenly']);
  * A browser makes the run a flex item and places it. A paragraph's text is its content, which no
  * alignment moves, so such an element commits as a view, and its text as the paragraph any view's
  * loose text is. Read from the node's own style on each reconcile, which a change to it brings
- * about, so nothing is kept to go stale. A `<text>` is a paragraph whatever its style, and an
+ * 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.
  */
 function aligningText(node) {
     if (node.kind !== 'element' || node.name === 'text' || !TEXT_ELEMENTS.has(node.name)) {
         return false;
     }
-    if (node.children.length !== 1 || node.children[0].kind !== 'text')
+    if (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;
-    if (isTextElement(node.parent) || ownLayout(node, 'display') !== 'flex')
+    if (ownLayout(node, 'display') !== 'flex')
         return false;
     return (ALIGNS.has(ownLayout(node, 'alignItems')) ||
         ALIGNS.has(ownLayout(node, 'justifyContent')));
 }
+/** 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));
 /** 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);
 /**
@@ -940,8 +1255,15 @@ export function viewNameOf(node) {
     }
     // The paragraph the engine makes for a view's loose text is under a view, whatever the name
     // of the element that view is.
-    return !node.anonymous && isTextElement(node.parent) ? VIRTUAL_TEXT : PARAGRAPH;
+    return nestedText(node) ? VIRTUAL_TEXT : PARAGRAPH;
 }
+/**
+ * Whether a text element is a span of the paragraph above it: under another text element, but
+ * not one that is a view for placing this one (see `aligningText`), nor the engine's own box.
+ */
+const nestedText = (node) => !node.anonymous && isTextElement(node.parent) && !placesText(node.parent);
+/** Whether a node's parent is a text element committed as a view, to place the run it holds. */
+const placesText = (parent) => parent != null && 'props' in parent && aligningText(parent);
 /**
  * The props every native view reads as a boolean: the `bool` fields of React Native's
  * `BaseViewProps`, `AccessibilityProps` and `HostPlatformViewProps`, by the names JavaScript sends.
@@ -980,16 +1302,12 @@ const BOOLEAN_VIEW_PROPS = new Set([
 ]);
 /**
  * Whether `node` holds nothing `:empty` sees besides `moved`: so it was empty before `moved` came,
- * or is now that it has gone. An anchor is a comment on the web, which `:empty` does not see.
+ * or is now that it has gone. What `:empty` does not see is `fills` in css.ts to say.
  */
 function wasOrIsEmptyWithout(node, moved) {
-    if (moved.kind === 'anchor')
+    if (!fills(moved))
         return false;
-    for (const child of node.children) {
-        if (child !== moved && child.kind !== 'anchor')
-            return false;
-    }
-    return true;
+    return !node.children.some((child) => child !== moved && fills(child));
 }
 /**
  * Have the child that paints a node's background merged again with the node: nothing of the
@@ -1556,6 +1874,16 @@ const now = () => globalThis.performance?.now?.() ?? Date.now();
 function sameHandles(a, b) {
     return a.length === b.length && a.every((handle, i) => handle === b[i]);
 }
+/**
+ * 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
+ * a peer. A compound with no class in either could be any element.
+ */
+function couldBe(compound, node) {
+    if (!compound.classes.every((name) => node.classes?.has(name)))
+        return false;
+    return (compound.is ?? []).every((alternatives) => alternatives.some((option) => couldBe(option, node)));
+}
 const FRAME_BUDGET_MS = 8;
 export class Engine {
     /** Scopes the CSS resolver's memo. Bumped once per commit. */
@@ -1612,6 +1940,14 @@ export class Engine {
      * does, a child list can move without anything else needing to be looked at again.
      */
     structuralSheets = false;
+    /** How many children after a change in a list one of them reaches. See `siblingReach`. */
+    structuralAfter = 0;
+    /** Whether one of them reaches the children before it. */
+    structuralBefore = false;
+    /** The compounds of theirs that read an element's place from under it. See `markPlace`. */
+    placeElsewhere = new Set();
+    /** The sheets `watchStructure` has read, which it is asked about once an element. */
+    watchedStructure = new WeakSet();
     /** Whether any sheet uses `:has()`. See `markBeneath`. */
     hasSheets = false;
     resolveAssetSource;
@@ -1624,7 +1960,7 @@ export class Engine {
         this.fontScale = conditions.fontScale;
         if (options.tokens)
             this.styles.setRootTokens(options.tokens);
-        this.structuralSheets = options.globalStyles?.structural === true;
+        this.watchStructure(options.globalStyles);
         this.watchHas(options.globalStyles);
         this.watchActive(options.globalStyles);
         this.dev = options.dev ?? globalThis.__DEV__ === true;
@@ -1748,9 +2084,7 @@ export class Engine {
         const { own, elsewhere } = this.activeUse;
         if (!own && !elsewhere.length)
             return;
-        // By its classes alone: a compound with none could be any element.
-        const asked = elsewhere.some((compound) => compound.classes.every((name) => node.classes?.has(name)));
-        if (asked)
+        if (elsewhere.some((compound) => couldBe(compound, node)))
             return this.markProps(node);
         node.stateDirty = true;
         this.markPath(node.parent ?? node);
@@ -1775,13 +2109,26 @@ export class Engine {
             this.sheetReplaced(replacing, sheet);
         else
             this.registerSheet(sheet);
-        if (sheet.structural)
-            this.structuralSheets = true;
+        this.watchStructure(sheet);
         this.watchHas(sheet);
         this.watchActive(sheet);
         this.markPath(this.root);
+        this.markWrittenFor(sheet, this.root);
         return true;
     }
+    /**
+     * Have styled again each node a sheet just added could match. The rest keep the style they
+     * have, which the resolver lets stand for a node none of the sheet's rules is written for,
+     * so a commit steps over them: the walk here is what finds the ones it must not step over.
+     */
+    markWrittenFor(sheet, node) {
+        if (node.kind === 'element' && this.styles.couldMatch(sheet, node)) {
+            node.styleDirty = true;
+            this.markPath(node);
+        }
+        for (const child of node.children)
+            this.markWrittenFor(sheet, child);
+    }
     /**
      * Stop matching a sheet `addGlobalSheet` added, and restyle everything; false, and nothing
      * done, when it is not one. A hot swap that leaves a None component no rules, or makes it scoped.
@@ -1967,8 +2314,8 @@ export class Engine {
         if (sheet === undefined || node.sheet === sheet)
             return;
         node.sheet = sheet;
-        if (sheet?.structural)
-            this.structuralSheets = true;
+        this.styles.noteSheet(sheet);
+        this.watchStructure(sheet);
         this.watchHas(sheet);
         this.watchActive(sheet);
         this.markProps(node);
@@ -2003,14 +2350,14 @@ export class Engine {
     createElement(name, sheet = null) {
         const node = new RetainedNode('element', name, this);
         node.sheet = sheet;
+        this.styles.noteSheet(sheet);
         const html = HTML_ELEMENTS.get(name);
         if (html !== undefined) {
             if (html.role)
                 node.props['accessibilityRole'] = html.role;
             node.styled = html.styled;
         }
-        if (sheet?.structural)
-            this.structuralSheets = true;
+        this.watchStructure(sheet);
         this.watchHas(sheet);
         this.watchActive(sheet);
         if (HOISTS[name])
@@ -2019,11 +2366,45 @@ export class Engine {
     }
     addClass(node, name) {
         (node.classes ??= new Set()).add(name);
-        this.markProps(node);
+        this.markClasses(node, [name]);
     }
     removeClass(node, name) {
         node.classes?.delete(name);
-        this.markProps(node);
+        this.markClasses(node, [name]);
+    }
+    /**
+     * 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.
+     *
+     * 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) {
+        const reach = this.styles.reachOf(changed);
+        if (reach === true)
+            return this.markProps(node);
+        this.markProps(node, false);
+        if (reach)
+            this.markUnder(node, reach);
+    }
+    /** Have styled again each element under a node that one of `subjects`' rules could be for. */
+    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;
+                this.markPath(child);
+            }
+            else
+                this.markUnder(child, subjects);
+        }
     }
     /**
      * The sheet of the component `node` hosts, whose `:host` rules it matches. Set again when a hot
@@ -2034,6 +2415,8 @@ export class Engine {
         if (node.hostSheet === sheet)
             return;
         node.hostSheet = sheet;
+        this.styles.noteSheet(sheet);
+        this.watchStructure(sheet);
         this.watchActive(sheet);
         this.markProps(node);
     }
@@ -2049,8 +2432,14 @@ export class Engine {
     /** `class="a b"` from a template. Replaces the set rather than adding to it. */
     setClasses(node, value) {
         const names = value.split(/\s+/).filter(Boolean);
+        const before = node.classes;
         node.classes = names.length ? new Set(names) : null;
-        this.markProps(node);
+        // Each class that came or went: one in both changes nothing.
+        const changed = [...names.filter((name) => !before?.has(name))];
+        for (const name of before ?? [])
+            if (!node.classes?.has(name))
+                changed.push(name);
+        this.markClasses(node, changed);
     }
     /** Angular's `@if`/`@for`/`ViewContainerRef` markers. Ordered, never committed. */
     createAnchor() {
@@ -2067,7 +2456,7 @@ export class Engine {
         parent.children.push(child);
         if (child.dormantHoists)
             this.wakeHoists(child);
-        this.markStructure(parent, child);
+        this.markStructure(parent, child, parent.children.length - 1);
         this.markTextContent(parent, child);
     }
     insertBefore(parent, child, ref) {
@@ -2080,7 +2469,7 @@ export class Engine {
             parent.children.splice(at, 0, child);
         if (child.dormantHoists)
             this.wakeHoists(child);
-        this.markStructure(parent, child);
+        this.markStructure(parent, child, at < 0 ? parent.children.length - 1 : at);
         this.markTextContent(parent, child);
     }
     removeChild(parent, child) {
@@ -2093,7 +2482,7 @@ export class Engine {
         target.children.splice(at, 1);
         child.parent = null;
         this.removedSinceCommit.add(child);
-        this.markStructure(target, child);
+        this.markStructure(target, child, at);
         this.markTextContent(target, child);
     }
     /**
@@ -2233,7 +2622,9 @@ export class Engine {
         // Inline style is applied after the cascade and inherited by nothing, so it cannot change
         // what any node matches or inherits. Every other prop can: `[disabled]` is a selector. An
         // inline `direction` is the exception, because the paragraphs below it align by it.
-        this.markProps(node, key !== 'style' || this.inlineReachesStyle(node));
+        // And a child that takes one of this node's own values, an `inherit`, follows it.
+        const heirs = node.styleCache?.heirs === true;
+        this.markProps(node, key !== 'style' || this.inlineReachesStyle(node) || heirs);
     }
     /**
      * Paint a node's background on one of its children instead of on the node: the node keeps its
@@ -2331,10 +2722,21 @@ export class Engine {
         this.markProps(node);
     }
     setText(node, value) {
+        const filled = (node.text === '') !== (value === '');
         node.text = value;
         this.markProps(node);
-        if (node.parent)
-            this.markTextContent(node.parent, node);
+        if (!node.parent)
+            return;
+        this.markTextContent(node.parent, node);
+        // Text of no length is nothing to `:empty`: its first character and its last change what
+        // the element it is in matches, and what comes after that element.
+        if (filled && this.structuralSheets)
+            this.markFilled(node.parent);
+    }
+    markFilled(node) {
+        node.styleDirty = true;
+        this.markLaterSiblings(node);
+        this.markPath(node);
     }
     setEventListener(node, topLevelType, fn) {
         this.registerEventHandler();
@@ -2398,24 +2800,101 @@ export class Engine {
             siblings[i].styleDirty = true;
         }
     }
-    /** `node`'s child list changed: `moved` came into it or went out of it. */
-    markStructure(node, moved) {
+    /** `node`'s child list changed: `moved` came into it at `at`, or went out of it from there. */
+    markStructure(node, moved, at) {
         node.structureDirty = true;
         // A child list that moved changes what its members match, though nothing about them did:
         // the old last row is no longer the last. Only sheets that ask about position pay for this.
         if (this.structuralSheets) {
-            node.styleDirty = true;
-            for (const child of node.children)
-                child.styleDirty = true;
-            // `.box:empty + .spacer`: what a later sibling matches can hang on whether this node is
-            // empty, which only its first child arriving or its last one leaving changes.
-            if (wasOrIsEmptyWithout(node, moved))
+            moved.styleDirty = true;
+            this.markRepositioned(node.children, at, moved);
+            // What the node itself matches hangs on its child list only through `:empty`, which only
+            // its first child arriving or its last one leaving changes: and then what a later sibling
+            // matches can too, `.box:empty + .spacer`. Styled again for any other change, everything
+            // under it would be resolved again with it.
+            if (wasOrIsEmptyWithout(node, moved)) {
+                node.styleDirty = true;
                 this.markLaterSiblings(node);
+            }
         }
         if (this.hasSheets)
             this.markBeneath(node);
         this.markPath(node.parent);
     }
+    /**
+     * Mark the children whose place in a child list that changed at `at` a sheet could read
+     * differently. The two at each end always, which are the old first and last and the new. Those
+     * from `at` on where some sheet counts from the start or asks about any one before, since a
+     * child's place from the start hangs only on those before it; and those before `at` where one
+     * counts from the end. Styling one again resolves everything under it again, so a long list
+     * gaining a row at its end is not the whole list.
+     *
+     * Where the sheets ask no further than the element just before (`+`), a rule steps a known
+     * number of elements along from one whose own match changed, and those are all there is to
+     * mark: that many after the change, and that many after the two at the start, either of which
+     * may have stopped or started being first. Nothing comes after the two at the end.
+     */
+    markRepositioned(children, at, moved) {
+        const steps = this.structuralAfter;
+        const pastFirst = steps === Infinity ? 0 : steps;
+        for (const child of elementsAtEnd(children, 2 + pastFirst, false))
+            this.markPlace(child);
+        for (const child of elementsAtEnd(children, 2, true))
+            this.markPlace(child);
+        if (this.structuralBefore)
+            for (let i = 0; i < at; i++)
+                this.markPlace(children[i]);
+        // The elements after the change, not counting the one that came, which is marked already.
+        let left = steps;
+        for (let i = at; i < children.length && left > 0; i++) {
+            const child = children[i];
+            this.markPlace(child);
+            if (child.kind === 'element' && child !== moved)
+                left--;
+        }
+    }
+    /**
+     * A child's place in its list changed, which is all that changed about it. It is matched
+     * again, and keeps its style and all that is under it unless it now matches other rules: its
+     * place is read by the rules that style it and by no other. Not where a rule reads the place
+     * of an element like it from under it, `.row:nth-child(odd) .label`: that changes more than
+     * the element itself, which is then styled again with everything under it, as is a child
+     * that is no element.
+     */
+    markPlace(child) {
+        if (child.kind !== 'element' || this.placeReadFromUnder(child))
+            child.styleDirty = true;
+        else
+            child.stateDirty = true;
+    }
+    /**
+     * Whether a rule could read this element's place from another element. By its classes alone,
+     * 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)))
+                return true;
+        }
+        return false;
+    }
+    /** Note what a sheet coming into play asks about a child list. None is unset: see `structural`. */
+    watchStructure(sheet) {
+        if (!sheet?.structural || this.watchedStructure.has(sheet))
+            return;
+        this.watchedStructure.add(sheet);
+        this.structuralSheets = true;
+        const reach = siblingReach(sheet);
+        this.structuralAfter = Math.max(this.structuralAfter, reach.after);
+        if (reach.before)
+            this.structuralBefore = true;
+        for (const compound of placeReadElsewhere(sheet))
+            this.placeElsewhere.add(compound);
+        // What a child whose place changed is compared with is the rules it matched, which a cache
+        // keeps from here on. One made before has none, and is styled again the first time, as it
+        // was before any sheet asked.
+        this.styles.tracksHas = true;
+    }
     /** Walk up until we hit a node already known to have a dirty subtree. */
     markPath(node) {
         const wasClean = !this.root.structureDirty && !this.root.subtreeDirty;
@@ -2461,6 +2940,7 @@ export class Engine {
             this.fabric.appendChildToSet(set, this.reconcileUnder(this.root, child));
         }
         this.clearFlags(this.root);
+        this.announceCommit();
         this.fabric.completeRoot(this.rootTag, set);
         const elapsed = now() - started;
         this.stats.commits++;
@@ -2475,6 +2955,7 @@ export class Engine {
                 this.stats.slowCommits++;
         }
         this.flushTransitionEvents();
+        this.playSized();
         this.scrollDriver?.afterCommit();
         // Read first: the commit that settles keyframes starts by clearing it.
         const facesAdded = this.facesAdded;
@@ -2484,6 +2965,25 @@ export class Engine {
             this.rematchFonts();
         return true;
     }
+    beforeCommit = null;
+    announceCommit() {
+        const run = this.beforeCommit;
+        this.beforeCommit = null;
+        run?.();
+    }
+    /**
+     * Run `run` once, as the next commit hands its tree to the host and before the host has it: the
+     * moment for something the host applies to its next commit, which is only this one from here.
+     * A pass that changes nothing commits nothing and runs nothing, so a request waits until it is
+     * taken back with the function returned. A later request replaces an earlier one.
+     */
+    beforeNextCommit(run) {
+        this.beforeCommit = run;
+        return () => {
+            if (this.beforeCommit === run)
+                this.beforeCommit = null;
+        };
+    }
     /** The first commit whose new views have not been drawn yet, while `commitUnseen` runs. */
     unseen = Infinity;
     /**
@@ -2588,11 +3088,36 @@ export class Engine {
         if (this.transitionEvents.length === 0)
             return;
         for (const { node, type, property } of this.transitionEvents.splice(0)) {
+            // One listener that throws stops neither the rest nor the node being let go.
             for (const listener of [...(node.listeners?.get(type) ?? [])]) {
-                listener(animationEvent(type, node, property));
+                try {
+                    listener(animationEvent(type, node, property));
+                }
+                catch (error) {
+                    this.reportEventError(error, type);
+                }
             }
+            if (type === 'topAnimationend')
+                this.letGo(node);
         }
     }
+    /**
+     * The nodes whose animation has ended with no fill and is still held at its last frame, until
+     * its `animationend` has been heard. A browser runs that listener before it paints again, and
+     * an exit animation's listener takes the element away: it is never seen back at rest. Here the
+     * listener runs after the commit, so the commit that ends the animation paints the last frame,
+     * and the element goes back to rest once the listener has run and left it there.
+     */
+    lettingGo = new Set();
+    letGo(node) {
+        if (!this.lettingGo.delete(node))
+            return;
+        const running = node.playing;
+        if (!running?.done)
+            return;
+        running.values = {};
+        this.markProps(node, false);
+    }
     /** Anchors take part in sibling ordering but never reach Fabric. */
     visibleChildren(node) {
         // A view that takes its text as a prop has no text children to commit. See `ViewNameOptions`.
@@ -2602,13 +3127,21 @@ export class Engine {
     /**
      * Everything a node renders with, unprocessed. Precedence, weakest first: native defaults, the
      * node's `defaultStyle`, matched CSS, explicit props, inline style, a component's
-     * `styleOverride`. Inline wins over CSS for the same reason it does on the web.
+     * `styleOverride`. Inline wins over CSS as it does on the web, but for a declaration marked
+     * `!important`, which stands over it: see `inlineOf`.
      *
      * Raw, because this is what the next commit diffs against. Colours and asset ids are converted
      * on the way out instead (`processed`), and only for the keys that changed: the converters
      * return fresh objects, so diffing their output would re-send every image and shadow on every
      * unrelated change.
      */
+    /** What a touch on an element that keeps a drag holds off, while it lasts: see `holdSwipe`. */
+    heldFor(node, merged) {
+        if (node === this.swipeHeld)
+            merged['gestureResponseDistance'] = NO_SWIPE;
+        if (node === this.scrollHeld)
+            merged['scrollEnabled'] = false;
+    }
     mergeProps(node, viewName) {
         if (node.kind === 'text')
             return { text: paragraphText(node) };
@@ -2622,14 +3155,15 @@ export class Engine {
         writeOwnProps(node.props, props, node.attributeOnly);
         withTextContent(node, viewName, props);
         const cascaded = props['transform'];
-        const style = boundTransform(node, flattenStyle(node.props['style'], props), cascaded);
-        if (node.props['style']) {
-            this.styles.overOtherForms(flattenStyle(node.props['style'], {}), style);
-        }
+        const inline = inlineOf(node);
+        const style = boundTransform(node, Object.assign(props, inline), cascaded);
+        if (inline !== NO_STYLE)
+            this.styles.overOtherForms(inline, style);
         nativePointerEvents(node, style, resolved);
         // Before an image's own size: `fit-content` is no size, so the image's is what it gets.
         fitContent(node, style);
         percentHeight(node, style);
+        placeholderFaded(style);
         const intrinsic = node.props[INTRINSIC_SIZE];
         if (intrinsic)
             applyIntrinsicSize(style, intrinsic);
@@ -2641,8 +3175,24 @@ export class Engine {
         if (this.fontsRefreshed)
             this.capForFonts(node, style);
         alignMultiline(viewName, style);
+        rowsTall(style, this.fontScale);
         const merged = composeTransform(node, this.animated(node, this.transitioned(node, style)));
-        centreSingleLine(viewName, merged, this.fontScale);
+        // 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;
+        const onBaseline = viewName === 'TextInput' && row !== undefined && isWithin(node, row);
+        centreSingleLine(viewName, merged, this.fontScale, onBaseline);
+        // After a transition, which eases the basis as the basis it was written as.
+        basisAsSize(node, merged);
+        // After the basis, which is a size given where it is committed as one.
+        ratioForAutoSize(merged);
+        noOutline(merged);
+        // Last, on what is committed: an override or an animation can hide a box, or place it.
+        hiddenOutOfFlow(merged);
+        delete merged['touchAction'];
+        if (this.responders.has(node))
+            stillTouched(merged);
+        this.heldFor(node, merged);
         this.movePaint(node, merged);
         return merged;
     }
@@ -2657,9 +3207,7 @@ export class Engine {
         const from = node.parent?.paintsOn === node ? node.parent : null;
         if (!from)
             return;
-        const paint = flattenStyle(from.props['style'], {
-            ...this.styles.resolve(from, this.styleEpoch).style,
-        });
+        const paint = { ...this.styles.resolve(from, this.styleEpoch).style, ...inlineOf(from) };
         for (const key of PAINT_KEYS)
             if (paint[key] !== undefined)
                 merged[key] = paint[key];
@@ -2718,7 +3266,7 @@ export class Engine {
         if (!this.inlineDirection)
             return own;
         for (let at = node; at; at = at.parent) {
-            const inline = textDirection(flattenStyle(at.props['style'], {})['direction']);
+            const inline = textDirection(inlineOf(at)['direction']);
             if (inline)
                 return inline;
             const cascaded = textDirection(at.styleCache?.style['direction']);
@@ -2746,6 +3294,7 @@ export class Engine {
         if (!sheet || this.knownSheets.has(sheet))
             return;
         this.knownSheets.add(sheet);
+        this.styles.noteSheet(sheet);
         this.sheetOrder.push(sheet);
         for (const name of Object.keys(sheet.keyframes ?? {})) {
             this.keyframes.set(name, sheet.keyframes[name]);
@@ -2773,6 +3322,7 @@ export class Engine {
         this.knownSheets.delete(sheet);
         if (next && !this.knownSheets.has(next)) {
             this.knownSheets.add(next);
+            this.styles.noteSheet(next);
             this.sheetOrder[at] = next;
         }
         else {
@@ -2919,11 +3469,69 @@ export class Engine {
      * runs it frame by frame, and JavaScript hears of it again when it ends. Anything else is
      * played from here, a commit a frame. See `NativeScrollDriver.play`.
      */
+    /**
+     * The nodes whose animation moves them by a share of their own size and had no size yet when
+     * it started, each with the style it rests at: asked again once the commit has laid them out.
+     */
+    unsized = new Map();
+    /**
+     * An animation's frames as native can interpolate them: a move by a share of the box,
+     * `translateX(200%)`, as the points that is of the size the view is laid out at. Nothing where
+     * the view has no size yet, which is every view until its first commit: it is played from
+     * JavaScript, and handed over once that commit has laid it out. See `playSized`.
+     *
+     * ponytail: the size it had when it started. A box that changes size goes on moving by the
+     * points of the old one until the animation starts again; restart it from the box's layout
+     * event if a bar that resizes mid-animation comes up.
+     */
+    sized(node, running, props) {
+        // One that waits, or takes no time, is played from here whatever it moves by.
+        if (running.spec.delay !== 0 || running.spec.duration <= 0)
+            return null;
+        if (!movesByShare(running.tracks, props))
+            return { tracks: running.tracks, resting: props };
+        let size;
+        this.measure(node, (frame) => (size = frame));
+        if (size)
+            return sharesAsPoints(running.tracks, props, size);
+        this.unsized.set(node, props);
+        return null;
+    }
+    /**
+     * Hand to native each animation that was waiting for its view to have a size. The commit just
+     * made painted its first frame, so its clock starts here: no frame of it has been seen move.
+     */
+    playSized() {
+        if (!this.unsized.size)
+            return;
+        const waiting = [...this.unsized];
+        this.unsized.clear();
+        for (const [node, props] of waiting) {
+            const running = node.playing;
+            if (!running || running.done || running.native || !this.playing.has(node))
+                continue;
+            // Native plays it from its first frame, so its clock starts here: but only where native
+            // takes it. Left in JavaScript, it goes on from the clock it started on.
+            const started = running.start;
+            running.start = this.now();
+            if (this.playNatively(node, running, props)) {
+                this.playing.delete(node);
+                // `collapsable`, which keeps a view for native to move, is in what it holds now.
+                this.markProps(node, false);
+            }
+            else {
+                running.start = started;
+            }
+        }
+        // One with no size after its commit is not laid out at all, and is played from JavaScript.
+        this.unsized.clear();
+    }
     playNatively(node, running, props) {
         const { spec } = running;
-        if (!this.scrollDriver || spec.delay !== 0 || spec.duration <= 0)
+        const sized = this.scrollDriver ? this.sized(node, running, props) : null;
+        if (!this.scrollDriver || !sized)
             return false;
-        const { channels, held, span } = clockChannels(running.tracks, spec, props);
+        const { channels, held, span } = clockChannels(sized.tracks, spec, sized.resting);
         if (held.length || !(channels.opacity || channels.transform.length))
             return false;
         // There and back is one native animation: an odd number of ways has no whole number of them.
@@ -3044,6 +3652,10 @@ export class Engine {
         reframed.values = finished && !holds ? {} : values;
         this.playedFrames.set(reframed, frames);
         node.playing = reframed;
+        // One that had nothing to paint was let go of: with frames that say something it plays on.
+        const stopped = reframed.done || reframed.pausedAt !== undefined || reframed.native;
+        if (!stopped)
+            this.playing.add(node);
     }
     /**
      * `animation-play-state` changed on an animation already playing: pausing holds the frame it
@@ -3208,12 +3820,7 @@ export class Engine {
             return props;
         const state = (node.transitions ??= new Map());
         const now = this.now();
-        // The properties a transition *names*, even where the node has none yet. A property is only
-        // transitioned once it has been seen settling, and one that does not exist is never seen - so
-        // `transition: transform` with no transform until a class adds one would arrive instantly,
-        // which is the commonest way to write one. `all` names nothing, so it keeps the old rule.
-        const named = spec ? Object.keys(spec).filter((key) => key !== 'all') : [];
-        for (const key of new Set([...Object.keys(props), ...named])) {
+        for (const key of steppedKeys(props, spec, state)) {
             if (step(state, key, props, spec?.[key] ?? spec?.['all'], now)) {
                 this.running.add(node);
                 this.emitTransition(node, 'topTransitionstart', key);
@@ -3223,6 +3830,21 @@ export class Engine {
             node.transitions = undefined;
         return props;
     }
+    /**
+     * Whether an animation that has finished goes on holding its last frame. With a forwards fill
+     * it does, for good: without one the element falls back to whatever the cascade gives it, and
+     * 'backwards' fills the start only. Heard, it holds until whoever listens has been told: see
+     * `lettingGo`.
+     */
+    keeps(node, running) {
+        if (running.spec.fill === 'forwards' || running.spec.fill === 'both')
+            return true;
+        // One that listened and has stopped leaves an empty set behind: nobody to hear it.
+        if (!node.listeners?.get('topAnimationend')?.size)
+            return false;
+        this.lettingGo.add(node);
+        return true;
+    }
     /** One `@keyframes` player, one frame on. */
     advancePlayer(node, now) {
         const running = node.playing;
@@ -3234,12 +3856,19 @@ export class Engine {
             this.playing.delete(node);
             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;
         const { values, finished } = sample(running, now);
-        // Without a forwards fill a finished animation stops holding anything, and the element falls
-        // back to whatever the cascade gives it. 'backwards' fills the start only.
-        const holds = running.spec.fill === 'forwards' || running.spec.fill === 'both';
-        running.values = finished && !holds ? {} : values;
-        this.markProps(node, false);
+        // One of no time is finished already, endless or not, and ends as any other does.
+        if (idle && !finished && running.spec.iterations === null) {
+            this.playing.delete(node);
+            return;
+        }
+        running.values = finished && !this.keeps(node, running) ? {} : values;
+        // Its end is still a commit: that is what its `animationend` is sent after.
+        if (!idle || finished)
+            this.markProps(node, false);
         if (!finished)
             return;
         running.done = true;
@@ -3360,6 +3989,58 @@ export class Engine {
             };
         });
     }
+    /**
+     * Mark the text field each box of a row aligned by baseline takes its baseline from, before
+     * the field is merged, and unmark it when the row is aligned another way.
+     */
+    noteBaselineFields(row) {
+        const aligned = ownLayout(row, 'alignItems') === 'baseline';
+        const before = row.baselineFields;
+        if (!aligned && !before)
+            return;
+        const now = new Set(aligned ? row.children.filter(inFlow).map(fieldOnBaseline).filter(isNode) : []);
+        // One that is no longer this row's, and that no other row has marked since.
+        for (const field of before ?? []) {
+            if (!now.has(field) && field.onBaseline === row)
+                this.onBaselineOf(field, undefined);
+        }
+        for (const field of now)
+            if (field.onBaseline !== row)
+                this.onBaselineOf(field, row);
+        row.baselineFields = now.size ? now : undefined;
+    }
+    onBaselineOf(field, row) {
+        field.onBaseline = row;
+        this.markProps(field, false);
+    }
+    /**
+     * Have the text a row aligned by baseline takes a baseline from measured again, where that
+     * text is inside one of the row's boxes and the row is committed again. React Native keeps
+     * what a paragraph measured on the one copy of its node that was measured, and Yoga copies a
+     * node it lays out around: a row that is laid out again asks a box for its baseline, the box
+     * asks the paragraph in it, and a copy that was never measured works it out then, on a node
+     * that is by then not to be changed. A debug build stops there. Committed to be measured
+     * again (`remeasure`), the paragraph is measured in this commit and has the answer.
+     *
+     * ponytail: the first box in the flow at each level, which is the one Yoga asks unless
+     * another is aligned by baseline itself. A row a commit lays out again without the engine
+     * cloning it, as its room changing does, is not reached: clone on a layout event if one is
+     * seen to stop there.
+     */
+    freshBaselines(row) {
+        if (!row.committed || ownLayout(row, 'alignItems') !== 'baseline')
+            return;
+        for (const item of row.children) {
+            let at = firstInFlow(item);
+            while (at?.committed && committedViewName(at) !== PARAGRAPH)
+                at = firstInFlow(at);
+            if (!at?.committed)
+                continue;
+            at.remeasure = true;
+            for (let up = at; up && up !== row; up = up.parent)
+                up.subtreeDirty = true;
+        }
+    }
     /**
      * Copy a list of gradients, running every stop's colour through the host's converter.
      *
@@ -3403,6 +4084,8 @@ export class Engine {
         this.refitChildren(node);
         const viewName = committedViewName(node);
         this.forgetRenamed(node, viewName);
+        this.noteBaselineFields(node);
+        this.freshBaselines(node);
         const childHandles = this.reconcileChildren(node, viewName, style);
         noteTouches(node, style);
         const previous = node.committed;
@@ -3539,6 +4222,8 @@ export class Engine {
      * when it is shown again, as Modal.js creates it afresh. Committed again, it ignores every touch.
      */
     withheld(child) {
+        if (this.undisplayed(child))
+            return true;
         if (child.props['visible'] !== false || child.presented)
             return false;
         if (viewNameOf(child) !== MODAL_HOST)
@@ -3547,6 +4232,42 @@ export class Engine {
             this.forgetCommitted(child);
         return true;
     }
+    /**
+     * Whether an element is `display: none`, which has no box and so no view, nor has anything
+     * in it. A view that is committed and not displayed looks the same, but Yoga marks one as
+     * laid out each time it measures what holds it, and React Native clears the mark only where it
+     * reads that parent's layout: a debug build stops at the mark, on a later commit that has the
+     * parent's layout already. Shown again it is made again, as an element put back in the tree
+     * is: what its views held of their own, a scroll offset, is not kept.
+     */
+    undisplayed(child) {
+        if (child.kind !== 'element')
+            return false;
+        this.styles.resolve(child, this.styleEpoch);
+        if (ownLayout(child, 'display') !== 'none')
+            return false;
+        if (child.committed) {
+            this.forgetCommitted(child);
+            // A field in it has no view to send its blur from.
+            if (isWithin(this.focusedNode, child))
+                this.setFocused(null);
+        }
+        return true;
+    }
+    /**
+     * Whether a node hoisted into `target` is not displayed where it was written: it, or a box
+     * between it and the child of `target` it was written in. That child is asked before this is.
+     */
+    undisplayedUnder(target, written) {
+        for (let at = written; at && at.parent !== target; at = at.parent) {
+            if (!this.undisplayed(at))
+                continue;
+            if (written.committed)
+                this.forgetCommitted(written);
+            return true;
+        }
+        return false;
+    }
     /**
      * `reconcileChildren` for a node other nodes hoist into: its own children, each followed by
      * the hoisted nodes written inside it, then those written in it directly, then the views it
@@ -3569,9 +4290,10 @@ export class Engine {
             else
                 handles.push(this.reconcileUnder(node, child, context));
             const moved = hoisted?.get(child);
-            if (moved)
-                for (const written of moved)
+            for (const written of moved ?? []) {
+                if (!this.undisplayedUnder(node, written))
                     handles.push(this.land(node, written, landed));
+            }
         }
         for (const child of direct)
             handles.push(this.land(node, child, landed));
@@ -3860,9 +4582,12 @@ export class Engine {
         this.registerEventHandler();
         this.responders.set(node, handlers);
         this.keepNative(node, true);
+        // What it is committed with can hang on whether it takes a touch: see `stillTouched`.
+        this.markProps(node);
         return () => {
             this.responders.delete(node);
             this.keepNative(node, false);
+            this.markProps(node);
             if (this.currentResponder !== node)
                 return;
             // Torn down under the finger: no release is coming, so the chain it marked is cleared
@@ -4094,7 +4819,9 @@ export class Engine {
         const handle = node.committed?.handle;
         if (!handle || !this.fabric.setIsJSResponder)
             return;
-        const block = this.responders.get(node)?.blockNativeResponder ?? false;
+        const asked = this.responders.get(node)?.blockNativeResponder ?? false;
+        // And for a drag an element's `touch-action` keeps from the page: see `holdSwipe`.
+        const block = asked || this.drag?.held === true;
         this.fabric.setIsJSResponder(handle, isResponder, block);
     }
     /** Runs before listener propagation, as React's responder plugin does. */
@@ -4156,6 +4883,10 @@ export class Engine {
     dispatchEvent(instanceHandle, topLevelType, nativeEvent) {
         const target = instanceHandle;
         this.trace(target, topLevelType);
+        // What has the focus does not take it again: native answering a focus it was told of, where
+        // whoever asked has already said so.
+        if (topLevelType === 'topFocus' && target !== null && this.focusedNode === target)
+            return;
         // Listeners get RN's documented shape, `{nativeEvent}`. Fabric hands us the payload bare;
         // React wraps it in a synthetic event and every RN API is written against `event.nativeEvent`,
         // so handlers ported from RN would silently read undefined otherwise.
@@ -4166,6 +4897,7 @@ export class Engine {
             if (topLevelType === 'topScroll' && target && this.scrollTimelines.has(target)) {
                 this.measuredScroll(target, nativeEvent);
             }
+            this.holdSwipe(target, topLevelType, nativeEvent);
             this.trackFocus(target, topLevelType);
             if (target)
                 this.cancelPressForScroll(target, topLevelType, event);
@@ -4177,6 +4909,116 @@ export class Engine {
         }
         this.propagate(target, topLevelType, event);
     }
+    /** The screen whose swipe back is held off while a finger is on what keeps a sideways drag. */
+    swipeHeld = null;
+    /**
+     * Hold a screen's swipe back off for a touch that starts on an element whose `touch-action`
+     * keeps a drag to the side for itself, and give it back when the last finger lifts. From iOS
+     * 26 the swipe starts anywhere on a screen once a finger has moved a little to the right, and
+     * takes the touch from whatever was following it: a slider's thumb stops and the screen
+     * leaves. The screen is told before the finger has moved that far.
+     */
+    holdSwipe(target, type, nativeEvent) {
+        if (type === TOUCH_START)
+            this.holdFrom(target, nativeEvent);
+        else if (type === 'topTouchMove')
+            this.settleDrag(nativeEvent);
+        else if (type === 'topTouchEnd' || type === 'topTouchCancel')
+            this.releaseSwipe(nativeEvent);
+    }
+    /**
+     * A touch on an element that keeps a drag to the side: where it began, and whether native's
+     * own gestures are held off for it. Held from the start where the element keeps a drag down
+     * the page too (`none`); from the moment the finger sets off across where it leaves that one
+     * to the page (`pan-y`), and never for that touch where it sets off down.
+     */
+    drag = null;
+    holdFrom(target, nativeEvent) {
+        // A first finger down is a new touch: the last one's end never came where what it was on
+        // went from under the finger.
+        const fingers = nativeEvent?.touches?.length;
+        if (this.drag && fingers === 1)
+            this.releaseSwipe(null);
+        if (this.drag || !target)
+            return;
+        const actions = touchActions(target);
+        if (!keeps(actions, PANS_ACROSS))
+            return;
+        const all = keeps(actions, PANS_ALONG);
+        this.drag = { ...pointOf(nativeEvent), settled: all, held: all, on: target };
+        if (all)
+            this.holdScroll(target);
+        const screen = this.screenOf(target);
+        if (!screen)
+            return;
+        this.swipeHeld = screen;
+        this.tellScreen(screen);
+    }
+    /** The scroll view whose scrolling is off while a drag over it is an element's own. */
+    scrollHeld = null;
+    /**
+     * Stop the scroll view a node is in from scrolling, until the touch ends. Telling native who
+     * holds the touch does this on Android. On iOS a scroll view is held off only by a responder
+     * that is over it, never one inside it, so it is told not to scroll.
+     */
+    holdScroll(node) {
+        for (let up = node.parent; up; up = up.parent) {
+            if (up.kind !== 'element' || !SCROLL_VIEWS.has(viewNameOf(up)))
+                continue;
+            this.scrollHeld = up;
+            this.tellScreen(up);
+            return;
+        }
+    }
+    /** Settle which way a drag set off, and hold native's own off one that set off across. */
+    settleDrag(nativeEvent) {
+        const drag = this.drag;
+        if (!drag || drag.settled)
+            return;
+        const at = pointOf(nativeEvent);
+        const [across, along] = [Math.abs(at.x - drag.x), Math.abs(at.y - drag.y)];
+        if (Math.max(across, along) < DRAG_SLOP)
+            return;
+        drag.settled = true;
+        drag.held = across > along;
+        if (!drag.held)
+            return;
+        if (this.currentResponder)
+            this.tellNative(this.currentResponder, true);
+        this.holdScroll(drag.on);
+    }
+    /** Give the swipe back once the last finger has lifted. */
+    releaseSwipe(nativeEvent) {
+        const left = nativeEvent?.touches?.length ?? 0;
+        if (left > 0)
+            return;
+        this.drag = null;
+        for (const held of [this.scrollHeld, this.swipeHeld]) {
+            if (held === this.scrollHeld)
+                this.scrollHeld = null;
+            else
+                this.swipeHeld = null;
+            if (held)
+                this.tellScreen(held);
+        }
+    }
+    /**
+     * Commit a screen or a scroll view again now, not with whatever next changes: the swipe begins
+     * once the finger has moved ten points or so, which is a frame or two after it came down.
+     */
+    tellScreen(screen) {
+        // Its props alone: nothing a selector reads moved, so nothing under it is styled again.
+        this.markProps(screen, false);
+        this.commit();
+    }
+    /** The screen of a native stack a node is on, or nothing where it is on none. */
+    screenOf(node) {
+        for (let up = node; up; up = up.parent) {
+            if (up.kind === 'element' && viewNameOf(up) === STACK_SCREEN)
+                return up;
+        }
+        return null;
+    }
     /** A presented modal host has finished leaving, so a hidden one can come out of the tree. */
     dismissed(target) {
         if (!target.presented)