@ng-native/fabric 0.4.0 → 0.6.0

package/dist/engine.js

@@ -7,7 +7,7 @@
  * because a persistent parent holds references to specific child handles. That bubble is
  * inherent and is what React's own Fabric renderer does.
  */
-import { boundDeclaration, inlineInherited, setsInherited, StyleResolver, } 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";
@@ -15,8 +15,9 @@ 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 { 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";
 /**
  * The animation a node's style asks for, with a play state from a rule of its own applied. Both
  * are instructions for this engine and nothing native has heard of them, so they come out of the
@@ -400,6 +401,38 @@ 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);
+}
 /**
  * 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.
@@ -437,15 +470,7 @@ 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;
@@ -459,6 +484,255 @@ function centreSingleLine(viewName, props, fontScale) {
         : box.reduce((sum, part) => sum + part, 0);
     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] ??
+        inlineOf(node)[key] ??
+        node.props[key] ??
+        node.styleCache?.style[key] ??
+        node.defaultStyle?.[key]);
+}
+/**
+ * A container's main axis and how it aligns across it, as `row` or `column` and a keyword. A
+ * `display: contents` node is no container: its children are laid out in the one above it.
+ */
+function containerOf(node) {
+    if (ownLayout(node, 'display') === 'contents')
+        return 'contents';
+    const direction = String(ownLayout(node, 'flexDirection') ?? 'column');
+    return `${direction.startsWith('row') ? 'row' : 'column'} ${ownLayout(node, 'alignItems') ?? 'stretch'}`;
+}
+/**
+ * The node a box is laid out in: its parent, or the one above every `display: contents` ancestor.
+ * Each of those is told a `fit-content` child passed through, so that when it stops being
+ * `contents`, and is the container, the child is worked out again.
+ */
+function layoutParent(node) {
+    let parent = node.parent;
+    while (parent && containerOf(parent) === 'contents') {
+        parent.fitContainer = 'contents';
+        parent = parent.parent;
+    }
+    return parent;
+}
+const STRETCHES = new Set([undefined, null, 'auto', 'stretch']);
+/**
+ * `width: fit-content` and `height: fit-content`, which Yoga has no size for.
+ *
+ * Along its container's main axis a box is as big as its content already, so the size is
+ * dropped. Across it a box stretches, where a browser keeps it at its content's size and at the
+ * start: `align-self: flex-start` does both. An alignment the container or the box asked for is
+ * kept, since it stops the stretch already.
+ */
+function fitContent(node, props) {
+    const width = props['width'] === 'fit-content';
+    const height = props['height'] === 'fit-content';
+    if (!width && !height)
+        return;
+    if (width)
+        delete props['width'];
+    if (height)
+        delete props['height'];
+    const parent = layoutParent(node);
+    if (!parent)
+        return;
+    const container = containerOf(parent);
+    parent.fitContainer = container;
+    const [direction, align] = container.split(' ');
+    const across = direction === 'row' ? height : width;
+    if (across && align === 'stretch' && STRETCHES.has(props['alignSelf'])) {
+        props['alignSelf'] = 'flex-start';
+    }
+}
+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.
+ *
+ * Asked of each box on the way up, and remembered on it, so a change to any of them works out
+ * again the boxes beneath it. Where the answer is not known for certain it is yes, which leaves
+ * the percentage to Yoga as before: a view native sizes itself, or one placed out of the flow.
+ */
+function definiteHeight(node) {
+    return (node.heightBasis = hasDefiniteHeight(node));
+}
+function hasDefiniteHeight(node) {
+    // The root is the screen, and only a plain view is sized by its content alone.
+    if (!node.parent || node.kind !== 'element' || viewNameOf(node) !== 'View')
+        return true;
+    const parent = layoutParent(node);
+    if (!parent)
+        return true;
+    const height = ownLayout(node, 'height');
+    if (isPercent(height))
+        return definiteHeight(parent);
+    return sizesItself(node, height) || heightFromLayout(node, parent);
+}
+const NO_HEIGHT = new Set([undefined, null, 'auto', 'fit-content']);
+/** Whether a box has a height from its own style: written, or placed, or kept in proportion. */
+function sizesItself(node, height) {
+    if (!NO_HEIGHT.has(height))
+        return true;
+    return ownLayout(node, 'position') === 'absolute' || ownLayout(node, 'aspectRatio') != null;
+}
+/** Whether the container a box is in gives it a height: a row's, or a share of a column's. */
+function heightFromLayout(node, parent) {
+    const [direction, align] = containerOf(parent).split(' ');
+    if (direction === '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' && 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
+ * is sent.
+ */
+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'];
+}
 /**
  * Start a multiline Android text field's text at the top, as iOS and a `<textarea>` do.
  *
@@ -504,6 +778,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
@@ -762,13 +1073,45 @@ 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']);
+/**
+ * Whether one of HTML's text elements is a flex container that aligns the one run of text it
+ * holds, as an avatar's initials are centred: `<span class="flex items-center justify-center">`.
+ *
+ * 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. 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 || !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 (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);
 /**
  * The native view a node commits as: `Paragraph` for a `<text>`, `VirtualText` for one nested in
  * another, `RawText` for a run of text, and `View` for anything unregistered, which is what an
@@ -795,8 +1138,17 @@ export function viewNameOf(node) {
     if (node.name !== 'text' && TEXT_ELEMENTS.has(node.name) && !holdsOnlyText(node)) {
         return DEFAULT_VIEW;
     }
-    return isTextElement(node.parent) ? VIRTUAL_TEXT : PARAGRAPH;
+    // 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 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.
@@ -835,33 +1187,54 @@ 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
+ * child's own moved, and what it paints may have.
+ */
+function repaint(node) {
+    if (node.paintsOn?.parent === node)
+        node.paintsOn.propsDirty = true;
 }
+/** A sixtieth of a second: how far apart the frames native is given for an animation are. */
+const NATIVE_FRAME = 1000 / 60;
+/** The style keys that are a view's background. */
+const PAINT_KEYS = [
+    'backgroundColor',
+    'experimental_backgroundImage',
+    'experimental_backgroundSize',
+    'experimental_backgroundPosition',
+    'experimental_backgroundRepeat',
+];
 /**
  * A node's own props onto what it commits with. No native prop has a hyphen: `data-*` and `aria-*`
  * attributes stay on the node for selectors to match, and an `aria-*` one is mapped to the prop
- * native reads.
+ * native reads. The node's `attributeOnly` names stay on it the same way.
  */
-function writeOwnProps(own, props) {
+function writeOwnProps(own, props, attributeOnly) {
     let aria = false;
     for (const key of Object.keys(own)) {
+        if (attributeOnly?.has(key))
+            continue;
         if (key.includes('-'))
             aria ||= key.startsWith('aria-');
         else if (key !== 'style' && key !== INTRINSIC_SIZE && key !== STYLE_OVERRIDE) {
             props[key] = committedProp(key, own[key]);
         }
     }
-    if (aria)
-        applyAria(own, props);
+    if (!aria)
+        return;
+    // An attribute-only `aria-*` is not mapped to the prop native reads either.
+    const mapped = attributeOnly?.size
+        ? Object.fromEntries(Object.entries(own).filter(([key]) => !attributeOnly.has(key)))
+        : own;
+    applyAria(mapped, props);
 }
 /** A prop as it is committed: a boolean view prop held as text is the boolean the text says. */
 function committedProp(key, value) {
@@ -1039,6 +1412,10 @@ class RetainedNode {
     styleCache = null;
     styleDirty = true;
     styleCommitted = null;
+    fitContainer = undefined;
+    heightBasis = undefined;
+    hasDirty = false;
+    stateDirty = false;
     ownStyle = undefined;
     claimed = undefined;
     dormantHoists = null;
@@ -1182,12 +1559,19 @@ class RetainedNode {
  * colours - `shouldRasterizeIOS` is a boolean.
  */
 const IS_COLOR_PROP = /color(android)?$/i;
+/**
+ * Colour props React Native does not name with a `color` suffix: `<switch>`'s pair ends in the
+ * state each one paints - `trackColorForTrue` and `trackColorForFalse`. They are the same type
+ * problem the `Android` suffix causes: Android's `ColorPropConverter` takes a number or a
+ * platform-colour map, refuses a string, and throws rather than approximating one.
+ */
+const STATE_COLOR_PROPS = new Set(['trackColorForTrue', 'trackColorForFalse']);
 /** Answers per key name, once: the regex ran for every prop of every node in every commit. */
 const colorProps = new Map();
 function isColorProp(key) {
     let answer = colorProps.get(key);
     if (answer === undefined) {
-        colorProps.set(key, (answer = IS_COLOR_PROP.test(key) || BRUSH_PROPS.has(key)));
+        colorProps.set(key, (answer = IS_COLOR_PROP.test(key) || STATE_COLOR_PROPS.has(key) || BRUSH_PROPS.has(key)));
     }
     return answer;
 }
@@ -1431,6 +1815,16 @@ 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;
     constructor(fabric, rootTag, options = {}) {
         this.fabric = fabric;
@@ -1441,7 +1835,9 @@ 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;
         if (this.dev) {
             this.styles.onUndefinedToken = (name, props, on) => this.reportUndefinedToken(name, props, on);
@@ -1506,11 +1902,70 @@ export class Engine {
             if (node.active === active)
                 continue;
             node.active = active;
-            this.markProps(node);
+            this.markActive(node);
             changed = true;
         }
         return changed;
     }
+    /** Whether any sheet styles a pressed element, and each compound that asks about one from another. */
+    activeUse = {
+        own: false,
+        elsewhere: [],
+    };
+    /** What each sheet in play asks about a pressed element: `activeUse` is all of them together. */
+    activeBySheet = new Map();
+    /** Note what a sheet in play asks about a pressed element. See `markActive`. */
+    watchActive(sheet) {
+        // Asked for every element a component's sheet is given to: noted once a sheet.
+        if (!sheet || this.activeBySheet.has(sheet))
+            return;
+        const use = usesActive(sheet);
+        this.activeBySheet.set(sheet, use);
+        if (!use.own && !use.elsewhere.length)
+            return;
+        this.countActive();
+        if (this.styles.tracksHas)
+            return;
+        // What a pressed element is compared with is the rules it matched, which no cache kept until
+        // a sheet asked. Nothing is resolved yet when the sheet is the one the engine was made with.
+        this.styles.tracksHas = true;
+        if (!this.root)
+            return;
+        this.root.styleDirty = true;
+        this.markPath(this.root);
+    }
+    /** A sheet has left play, by a hot swap or by being removed: what it asked goes with it. */
+    unwatchActive(sheet) {
+        if (this.activeBySheet.delete(sheet))
+            this.countActive();
+    }
+    countActive() {
+        const all = [...this.activeBySheet.values()];
+        this.activeUse = {
+            own: all.some((use) => use.own),
+            elsewhere: all.flatMap((use) => use.elsewhere),
+        };
+    }
+    /**
+     * A press began or ended on `node` or under it, which is all that changed about it. A press
+     * reaches every ancestor up to the root, and marking each as restyled would style the whole
+     * screen again, twice a press. So each is only matched again, and keeps its style and all
+     * that is under it unless it now matches other rules. An element a rule asks about from
+     * inside or beside it, `.card:active .title`, changes more than itself, and is restyled with
+     * everything under it as any other change is. With no rule for a pressed element at all there
+     * is nothing to match.
+     */
+    markActive(node) {
+        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)
+            return this.markProps(node);
+        node.stateDirty = true;
+        this.markPath(node.parent ?? node);
+    }
     /**
      * Custom properties the device knows and the stylesheet cannot, once they change.
      *
@@ -1531,11 +1986,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.
@@ -1563,14 +2033,19 @@ export class Engine {
      * which is what makes Fabric dirty a measured node and measure it at the size now in effect.
      */
     remeasureText() {
+        const again = (measured) => {
+            measured.remeasure = true;
+            this.markProps(measured, false);
+        };
         const visit = (node) => {
             for (const child of node.children) {
+                // The paragraph of a run of text written straight into a view is kept on the text.
+                if (child.kind === 'text' && child.box?.committed)
+                    again(child.box);
                 if (child.kind !== 'element')
                     continue;
-                if (child.committed && MEASURED_VIEWS.has(viewNameOf(child))) {
-                    child.remeasure = true;
-                    this.markProps(child, false);
-                }
+                if (child.committed && MEASURED_VIEWS.has(committedViewName(child)))
+                    again(child);
                 visit(child);
             }
         };
@@ -1716,8 +2191,10 @@ 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);
     }
     /** The sheet each node given another's scope was created with. */
@@ -1750,25 +2227,61 @@ 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])
             this.hoisted.add(node);
         return node;
     }
     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
@@ -1779,6 +2292,9 @@ export class Engine {
         if (node.hostSheet === sheet)
             return;
         node.hostSheet = sheet;
+        this.styles.noteSheet(sheet);
+        this.watchStructure(sheet);
+        this.watchActive(sheet);
         this.markProps(node);
     }
     /**
@@ -1793,8 +2309,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() {
@@ -1811,7 +2333,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) {
@@ -1824,7 +2346,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) {
@@ -1837,7 +2359,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);
     }
     /**
@@ -1894,6 +2416,7 @@ export class Engine {
             node.playing = undefined;
             this.markProps(node, false);
         }
+        this.releasePlayedNatively();
         for (const nodes of this.scrollTimelines.values()) {
             for (const node of nodes) {
                 if (this.topOf(node) === this.root)
@@ -1928,8 +2451,14 @@ export class Engine {
     destroyNode(node) {
         node.listeners?.clear();
         node.listeners = null;
-        node.committed = null;
+        // With what it holds: a node Angular destroys can be put back, as content projected into
+        // an `@if` is, and its children's views would then be handed to the view it is made again
+        // as. Native gives a view one parent for its life, and aborts on a second.
+        if (node.committed)
+            this.forgetCommitted(node);
         node.transitions = undefined;
+        if (node.playing)
+            this.stopNative(node, node.playing);
         node.playing = undefined;
         this.stopScrolled(node);
         this.running.delete(node);
@@ -1950,6 +2479,9 @@ export class Engine {
         return siblings[siblings.indexOf(node) + 1] ?? null;
     }
     setProp(node, key, value) {
+        // A prop written again is a binding's, and is committed as any other is.
+        if (node.attributeOnly?.delete(key))
+            this.markProps(node, false);
         if (value === undefined || value === null) {
             // Nothing to remove, so nothing changed. Worth its own branch because it is the common
             // case, not a rare one: a host primitive carries a host binding for every prop React Native
@@ -1967,7 +2499,32 @@ 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
+     * `background-color` and `background-image` in the cascade, where a stylesheet wrote them, and
+     * the child is the view that draws them. What a view that masks its children and not itself
+     * needs, as `<gradient-text>` is.
+     */
+    paintOn(node, child) {
+        node.paintsOn = child;
+        this.markProps(node, false);
+        this.markProps(child, false);
+    }
+    /**
+     * Keep a prop the node already has as an attribute: on the node for a selector such as
+     * `:host([variant='primary'])` to match, and left out of what is committed to the native view.
+     * It is committed again once the prop is next written. What the platform adapter does with a
+     * static attribute that is an input of the host's component.
+     */
+    keepAsAttribute(node, key) {
+        if (!(key in node.props))
+            return;
+        (node.attributeOnly ??= new Set()).add(key);
+        this.markProps(node, false);
     }
     /**
      * Whether a node's inline style can change what it or anything below it resolves to: it sets,
@@ -2042,10 +2599,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();
@@ -2072,11 +2640,35 @@ export class Engine {
             // state, though nothing about the sibling moved. Only sheets that ask about siblings pay.
             if (this.structuralSheets)
                 this.markLaterSiblings(node);
+            if (this.hasSheets)
+                this.markBeneath(node.parent);
         }
         // The root has no parent to carry the mark, so it carries its own: `.dark` on the root alone
         // restyles everything beneath it.
         this.markPath(node.parent ?? node);
     }
+    /** Start matching ancestors again on a change, once a sheet that uses `:has()` is in play. */
+    watchHas(sheet) {
+        if (!sheet?.has || this.hasSheets)
+            return;
+        this.hasSheets = true;
+        this.styles.tracksHas = true;
+        // What is already resolved kept no record of the rules it matched: resolve it again. Nothing
+        // is, when the sheet is the one the engine was made with.
+        if (!this.root)
+            return;
+        this.root.styleDirty = true;
+        this.markPath(this.root);
+    }
+    /**
+     * Something at or beneath `from` changed: every node from there up may match a `:has()` rule
+     * it did not, or stop matching one. They are matched again rather than marked for restyling,
+     * which would restyle everything under them. Only sheets that use `:has()` pay.
+     */
+    markBeneath(from) {
+        for (let node = from; node; node = node.parent)
+            node.hasDirty = true;
+    }
     markLaterSiblings(node) {
         const siblings = node.parent?.children;
         if (!siblings)
@@ -2085,22 +2677,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;
@@ -2146,6 +2817,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++;
@@ -2160,6 +2832,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;
@@ -2169,6 +2842,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;
     /**
@@ -2273,11 +2965,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`.
@@ -2287,13 +3004,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) };
@@ -2304,11 +3029,18 @@ export class Engine {
         const props = { ...DEFAULT_PROPS[viewName], ...node.defaultStyle };
         Object.assign(props, this.styles.resolve(node, this.styleEpoch).style);
         const resolved = props['pointerEvents'];
-        writeOwnProps(node.props, props);
+        writeOwnProps(node.props, props, node.attributeOnly);
         withTextContent(node, viewName, props);
         const cascaded = props['transform'];
-        const style = boundTransform(node, flattenStyle(node.props['style'], props), cascaded);
+        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);
@@ -2320,10 +3052,65 @@ 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);
+        // 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;
     }
+    /**
+     * 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.
+     */
+    movePaint(node, merged) {
+        if (node.paintsOn)
+            for (const key of PAINT_KEYS)
+                delete merged[key];
+        const from = node.parent?.paintsOn === node ? node.parent : null;
+        if (!from)
+            return;
+        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];
+    }
+    /**
+     * A container whose direction or alignment changed since a child with a `fit-content` size
+     * read it, or whose height stopped or started being one a percentage is taken of since a child
+     * with a percentage height asked: those children are merged again. A change to a container
+     * marks nothing beneath it, since none of these is inherited.
+     */
+    refitChildren(node) {
+        // Both are asked, and both remembered, before either has the children merged again.
+        const basis = node.heightBasis;
+        const based = basis !== undefined && definiteHeight(node) !== basis;
+        const fitted = node.fitContainer !== undefined && containerOf(node) !== node.fitContainer;
+        if (fitted)
+            node.fitContainer = containerOf(node);
+        if (based || fitted)
+            this.refit(node);
+    }
+    /** Have a container's children merged again, through any `display: contents` among them. */
+    refit(container) {
+        for (const child of container.children) {
+            if (child.kind !== 'element')
+                continue;
+            child.propsDirty = true;
+            if (containerOf(child) === 'contents')
+                this.refit(child);
+        }
+    }
     /**
      * The text size cap that lays a paragraph or text input out again once a face it names has
      * registered: a step per face above the app's own cap where it set one (below 1 is none, on
@@ -2352,7 +3139,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']);
@@ -2380,6 +3167,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]);
@@ -2397,6 +3185,8 @@ export class Engine {
     sheetReplaced(sheet, next) {
         if (sheet === next && this.knownSheets.has(sheet))
             return;
+        this.unwatchActive(sheet);
+        this.watchActive(next);
         const at = this.sheetOrder.indexOf(sheet);
         if (at === -1) {
             this.registerSheet(next);
@@ -2405,6 +3195,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 {
@@ -2459,11 +3250,17 @@ export class Engine {
     }
     /** Mark every element under `node` committed with a family, so it is matched again. */
     markFontText(node) {
+        const named = (text) => {
+            if (typeof text?.committed?.props['fontFamily'] === 'string')
+                this.markProps(text, false);
+        };
         for (const child of node.children) {
+            // The paragraph of a run of text written straight into a view is kept on the text.
+            if (child.kind === 'text')
+                named(child.box);
             if (child.kind !== 'element')
                 continue;
-            if (typeof child.committed?.props['fontFamily'] === 'string')
-                this.markProps(child, false);
+            named(child);
             this.markFontText(child);
         }
     }
@@ -2510,6 +3307,7 @@ export class Engine {
     handOverToScroll(node, spec) {
         if (!node.playing)
             return;
+        this.stopNative(node, node.playing);
         if (node.playing.spec.name !== spec.name)
             this.cancelPlaying(node);
         node.playing = undefined;
@@ -2521,9 +3319,146 @@ export class Engine {
      */
     cancelPlaying(node) {
         const running = node.playing;
+        if (running)
+            this.stopNative(node, running);
         if (running && !running.done)
             this.emitTransition(node, 'topAnimationcancel', running.spec.name);
     }
+    /** Stop on native each animation whose view has left the tree. */
+    releasePlayedNatively() {
+        for (const node of [...this.playedNatively]) {
+            if (this.topOf(node) === this.root)
+                continue;
+            this.stopNative(node, node.playing);
+            node.playing = undefined;
+            this.markProps(node, false);
+        }
+    }
+    /** Every node whose animation native is playing, with no frame of it in JavaScript. */
+    playedNatively = new Set();
+    /**
+     * Hand an animation that has just started to native, where native can play it: one that moves
+     * only opacity and transforms, starts at once, and repeats a whole number of times. Native then
+     * 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;
+        const sized = this.scrollDriver ? this.sized(node, running, props) : null;
+        if (!this.scrollDriver || !sized)
+            return false;
+        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.
+        const count = spec.iterations === null ? -1 : spec.iterations / span;
+        if (count !== -1 && !(Number.isInteger(count) && count > 0))
+            return false;
+        const length = Math.max(2, Math.round((spec.duration * span) / NATIVE_FRAME) + 1);
+        const frames = Array.from({ length }, (_, i) => i / (length - 1));
+        const native = this.scrollDriver.play(node, channels, { frames, toValue: span, iterations: count }, (view) => this.tagOf(view), () => this.endedNatively(node, running));
+        if (!native)
+            return false;
+        running.native = native;
+        // As Animated does: Fabric flattens a view that only lays out, and then there is no native
+        // view for the animation to move.
+        running.values = { ...running.values, collapsable: false };
+        this.playedNatively.add(node);
+        return true;
+    }
+    /**
+     * Native reached the end of an animation it was playing. The frame it ends at, or the resting
+     * style where it does not fill, is committed before the view is let go, so nothing shows of
+     * the frame it started at, which is what the view had been committed with.
+     */
+    endedNatively(node, running) {
+        if (node.playing !== running || !running.native)
+            return;
+        const { native, spec } = running;
+        running.native = undefined;
+        this.playedNatively.delete(node);
+        const end = running.start + spec.duration * (spec.iterations ?? 1);
+        this.advancePlayer(node, Math.max(this.now(), end));
+        this.commit();
+        native.stop();
+    }
+    /** Take an animation back from native, which stops it there. The caller plays it on, or not. */
+    stopNative(node, running) {
+        if (!running.native)
+            return;
+        running.native.stop();
+        running.native = undefined;
+        this.playedNatively.delete(node);
+    }
+    /**
+     * Play on from JavaScript an animation native was playing, from where its clock has got to:
+     * what a pause, other frames or a view made again need, none of which native can be told of.
+     */
+    backToScript(node, running) {
+        if (!running.native)
+            return;
+        this.stopNative(node, running);
+        running.values = sample(running, this.now()).values;
+        if (!running.done && running.pausedAt === undefined)
+            this.playing.add(node);
+    }
     /** Start the clock on an animation, unless the node is already playing this one. */
     startPlaying(node, spec, frames, props) {
         const current = node.playing;
@@ -2531,6 +3466,8 @@ export class Engine {
         if (!current || !sameAnimation(current.spec, spec)) {
             if (current && current.spec.name !== spec.name)
                 this.cancelPlaying(node);
+            else if (current)
+                this.stopNative(node, current);
             const started = {
                 spec,
                 tracks: tracksOf(frames, props, inherited),
@@ -2551,12 +3488,16 @@ export class Engine {
             node.playing = started;
             if (spec.paused)
                 started.pausedAt = this.now();
-            else
+            else if (!this.playNatively(node, started, props))
                 this.playing.add(node);
             this.emitTransition(node, 'topAnimationstart', spec.name);
             return;
         }
+        // A view made again is another view: the one native was moving is gone.
+        if (node.committed === null)
+            this.backToScript(node, current);
         if (this.playedFrames.get(current) !== frames || inherited !== current.inherited) {
+            this.backToScript(node, current);
             this.reframe(node, current, frames, props, inherited);
         }
         this.playOrPause(node, node.playing, spec);
@@ -2584,6 +3525,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
@@ -2594,6 +3539,7 @@ export class Engine {
         current.spec = spec;
         const now = this.now();
         if (spec.paused && current.pausedAt === undefined && !current.done) {
+            this.backToScript(node, current);
             current.pausedAt = now;
             this.playing.delete(node);
         }
@@ -2762,6 +3708,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;
@@ -2773,12 +3734,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;
@@ -2904,7 +3872,8 @@ export class Engine {
      *
      * A stop's colour is a colour like any other, but it is two levels down and nothing else looks
      * there: without this the device is handed the string `rgb(255, 0, 0)` where it wants a number,
-     * and paints nothing.
+     * and paints nothing. The stops are first rewritten so native's interpolation paints what
+     * CSS's premultiplied one does (see `premultipliedStops`).
      */
     processGradients(value) {
         if (!Array.isArray(value))
@@ -2915,7 +3884,7 @@ export class Engine {
                 return entry;
             return {
                 ...gradient,
-                colorStops: gradient.colorStops.map((stop) => ({
+                colorStops: premultipliedStops(gradient.colorStops).map((stop) => ({
                     ...stop,
                     color: this.color(stop.color),
                 })),
@@ -2937,7 +3906,9 @@ export class Engine {
         if (this.isClean(node) && !styleChanged)
             return node.committed.handle;
         node.styleCommitted = style;
-        const viewName = viewNameOf(node);
+        repaint(node);
+        this.refitChildren(node);
+        const viewName = committedViewName(node);
         this.forgetRenamed(node, viewName);
         const childHandles = this.reconcileChildren(node, viewName, style);
         noteTouches(node, style);
@@ -3075,6 +4046,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)
@@ -3083,6 +4056,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
@@ -3105,9 +4114,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));
@@ -3276,7 +4286,10 @@ export class Engine {
      * layout bug. On the first commit of any known element with no component behind it, say so.
      */
     checkClaimed(node) {
-        if (node.kind !== 'element' || node.claimed || !PRIMITIVE_NAMES.has(node.name))
+        // The paragraph the engine wraps loose text in is its own: no template wrote it.
+        if (node.kind !== 'element' || node.claimed || node.anonymous)
+            return;
+        if (!PRIMITIVE_NAMES.has(node.name))
             return;
         if (this.reported.has(node.name))
             return;
@@ -3393,9 +4406,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
@@ -3627,7 +4643,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. */
@@ -3689,6 +4707,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.
@@ -3699,6 +4721,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);
@@ -3710,6 +4733,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)