@ng-native/fabric 0.17.1 → 0.18.1

package/dist/engine.js

@@ -7,19 +7,35 @@
  * 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, boundRelativeLength, CSS_SPACE, isNegativeLineHeight, faded, fills, inlineInherited, setsInherited, attributeOf, handsDownPaint, StyleResolver, underOwnShorthands, usesActive, elementsAtEnd, hasAbove, couldAsk, hasBeside, forgetHasAnswers, keepHasAnswers, joinSubjects, placeReadElsewhere, siblingReach, isGenerated, noteGeneratedBoxes, } from "./css.js";
+import { boundDeclaration, boundRelativeLength, CSS_SPACE, isNegativeLineHeight, faded, fills, inlineInherited, setsInherited, attributeOf, handsDownPaint, StyleResolver, underOwnShorthands, usesActive, elementsAtEnd, hasAbove, couldAsk, hasBeside, forgetHasAnswers, keepHasAnswers, joinSubjects, placeReadElsewhere, siblingReach, isGenerated, noteGeneratedBoxes, settleUnsidedBorder, } from "./css.js";
 import { applyAria } from "./aria-props.js";
 import { STYLED_ELEMENTS } from "./element-styles.js";
-import { aimsElsewhere, animationEvent, bezier, interpolate, readsInheritedColour, sample, step, steppedKeys, tracksOf, } from "./transition.js";
+import { aimsElsewhere, animationEvent, bezier, interpolate, readsInheritedColour, sample, parseColor, 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, pinnedRange, scrollFeed, } from "./native-drive.js";
+import { amount } from "./scroll-animation.js";
+import { NativePainter } from "./native-paint.js";
 import { clockChannels, colourChannels, firstFrame, heldTransform, movesByShare, rangeOf, scrollChannels, sharesAsPoints, } from "./scroll-animation.js";
 import { layOutGrid } from "./grid.js";
 import { isBlockContainer, placeInFlow, planFlow, } from "./flow.js";
 import { FontFaces } from "./font-faces.js";
 import { premultipliedStops } from "./premultiplied-stops.js";
+/** The lowest node both are in, either of them included, or nothing for two separate trees. */
+function commonAncestor(a, b) {
+    // Most often `b` is inside `a`, which a walk up from it finds with no set made each move.
+    for (let node = b; node; node = node.parent)
+        if (node === a)
+            return a;
+    const above = new Set();
+    for (let node = a; node; node = node.parent)
+        above.add(node);
+    for (let node = b; node; node = node.parent)
+        if (above.has(node))
+            return node;
+    return null;
+}
 /**
  * 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
@@ -87,6 +103,118 @@ const SPEC_FIELDS = [
     'direction',
     'timeline',
 ];
+/** No key: what a view holds with no graph of the driver's connected to it. */
+const NO_KEYS = new Set();
+/** How soon after one change of paint the next makes a run of them: see `paintedAgain`. */
+const PAINT_RUN_MS = 1000;
+/** How long a view native paints is left alone before its shadow node is brought up to date. */
+const PAINT_QUIET_MS = 500;
+const SHARED_SIDE = { translateX: 2, translateY: 3 };
+/**
+ * A transform as native's transform node takes it, each entry's amount a number, and a move by a
+ * share of the box the points it is of the box `boxOf` answers. Null for one it cannot take: a
+ * matrix, or a share of a box with no size yet.
+ */
+function paintedTransform(value, boxOf) {
+    const list = typeof value === 'string' ? transformList(value) : value;
+    if (!Array.isArray(list))
+        return null;
+    const out = [];
+    for (const entry of list) {
+        const pairs = Object.entries((entry ?? {}));
+        if (pairs.length !== 1)
+            return null;
+        const [property, raw] = pairs[0];
+        const flat = property === 'matrix' ? flatMatrix(raw) : null;
+        if (flat) {
+            out.push(...flat);
+            continue;
+        }
+        const points = amount(property, raw) ?? shareInPoints(property, raw, boxOf);
+        if (points === null || !Number.isFinite(points))
+            return null;
+        out.push({ property, value: points });
+    }
+    return out;
+}
+/** Where each number of a flat matrix is in React Native's sixteen, by column. */
+const FLAT = { a: 0, b: 1, c: 4, d: 5, e: 12, f: 13 };
+/** What the rest of a flat matrix's sixteen are. */
+const FLAT_REST = [
+    [2, 0],
+    [3, 0],
+    [6, 0],
+    [7, 0],
+    [8, 0],
+    [9, 0],
+    [10, 1],
+    [11, 0],
+    [14, 0],
+    [15, 1],
+];
+/**
+ * A matrix in two dimensions as the move, turn, skew and scale it is, in that order, as CSS
+ * decomposes one: numbers native's transform node takes. Null for one in three dimensions, or
+ * one that flattens the view to a line, which are painted whole.
+ *
+ * A matrix painted whole is a list in a list, and Android's `overrideBySynchronousMountProps`,
+ * which puts what native last set back over each commit carrying a transform, copies back only
+ * the numbers and strings of each entry: the matrix comes back as nothing, and the view is drawn
+ * where it was never moved.
+ */
+function flatMatrix(raw) {
+    if (!Array.isArray(raw) || raw.length !== 16 || !raw.every(Number.isFinite))
+        return null;
+    const m = raw;
+    if (FLAT_REST.some(([at, value]) => m[at] !== value))
+        return null;
+    const [a, b, c, d] = [m[FLAT.a], m[FLAT.b], m[FLAT.c], m[FLAT.d]];
+    const scaleX = Math.hypot(a, b);
+    if (scaleX === 0)
+        return null;
+    const [cos, sin] = [a / scaleX, b / scaleX];
+    const shear = cos * c + sin * d;
+    const scaleY = cos * (d - sin * shear) - sin * (c - cos * shear);
+    if (scaleY === 0)
+        return null;
+    return [
+        { property: 'translateX', value: m[FLAT.e] },
+        { property: 'translateY', value: m[FLAT.f] },
+        { property: 'rotate', value: Math.atan2(sin, cos) },
+        { property: 'skewX', value: Math.atan(shear / scaleY) },
+        { property: 'scaleX', value: scaleX },
+        { property: 'scaleY', value: scaleY },
+    ];
+}
+/** Whether a transform moves by a share of the box, which `paintedTransform` makes points of. */
+function sharesBox(value) {
+    return (typeof value === 'string' ? value : JSON.stringify(value)).includes('%');
+}
+/** A transform as a commit carries it, a list, for native to be given whole. */
+function literalTransform(value) {
+    if (typeof value === 'string')
+        return transformOf(value);
+    return Array.isArray(value) ? value : [];
+}
+/** Whether there is anything to paint in a set of values. */
+function hasPaint(values) {
+    if (values.opacity !== undefined || values.transform !== undefined)
+        return true;
+    return Object.keys(values.colors ?? {}).length > 0;
+}
+/** A move by a share of the box, `translateX(-40%)`, as the points it is of the box. */
+function shareInPoints(property, raw, boxOf) {
+    const side = SHARED_SIDE[property];
+    if (!side || typeof raw !== 'string' || !raw.endsWith('%'))
+        return null;
+    const box = boxOf();
+    return box ? (box[side] * Number.parseFloat(raw)) / 100 : null;
+}
+/** As Animated does: a view native paints is kept, or there is no view for it to paint. */
+function keptForPaint(node, props) {
+    if (node.paint && props['collapsable'] === undefined)
+        props['collapsable'] = false;
+}
 /**
  * The scroll events that mean a finger is dragging the list rather than tapping something in it.
  *
@@ -129,6 +257,8 @@ export const DIRECT_EVENTS = new Set([
     'topWillDisappear',
     'topDisappear',
     'topHeaderHeightChange',
+    // Sent on the screen whose arrow it is: one bubbling to the screen a stack sits in pops that too.
+    'topHeaderBackButtonClicked',
     'topTransitionProgress',
     'topFinishTransitioning',
     // The tabs host reports its own selection, and only the host it happened in wants to know.
@@ -197,6 +327,7 @@ const VIEW_EVENT_OPT_IN_PROPS = {
         topContentSizeChange: 'onContentSizeChange',
         topScroll: 'onScroll',
         topKeyPress: 'onKeyPress',
+        topSelectionChange: 'onSelectionChange',
     },
 };
 /**
@@ -308,6 +439,17 @@ export function declareNativeProps(elementName, props) {
 export function claimHost(node) {
     node.claimed = true;
 }
+/**
+ * Make a view the page of what is inside it: a `position: fixed` box there is placed against this
+ * view and not the screen, as it is against a screen of a stack, and follows it as it is given
+ * another size. For a layer that is the window to what it holds and need not be the size of the
+ * screen. Marked before anything fixed is put in it: it is for as long as the view is. Not for
+ * a view that scrolls its overflow: what is fixed in it is committed in what scrolls, and would
+ * scroll with it.
+ */
+export function markPage(node) {
+    node.page = true;
+}
 /**
  * Say that an element scrolls what overflows it, as a browser's does: with `overflow: auto` or
  * `scroll` it is committed as a scroll view, around one view that holds what it holds. For a
@@ -1442,11 +1584,13 @@ const GRID_KEYS = [
     'justifyItems',
     'justifySelf',
 ];
+/** Each inset a box can be given, the logical ones too. */
+const INSET_SIDES = ['top', 'right', 'bottom', 'left', 'start', 'end'];
 /** What places a box among its siblings, which the grid does for an item instead. */
 const PLACING_KEYS = [
     ...['margin', 'marginVertical', 'marginHorizontal'],
     ...['marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginStart', 'marginEnd'],
-    ...['top', 'right', 'bottom', 'left', 'start', 'end'],
+    ...INSET_SIDES,
     ...['flex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf'],
 ];
 const SIZE_LIMITS = ['minWidth', 'maxWidth', 'minHeight', 'maxHeight'];
@@ -1481,6 +1625,15 @@ function gridLayout(node, props) {
         if (node.grid && props['position'] === 'static')
             props['position'] = 'relative';
     }
+    // A transform, a filter and the rest make a box what its absolute boxes are placed against,
+    // static or not, and Yoga knows only positions: see `placesItself`.
+    if (props['position'] === 'static' && containsAbsolutes((key) => props[key])) {
+        props['position'] = 'relative';
+        // Still static to what places it: an inset moves no static box, in a grid or out of one.
+        for (const key of INSET_SIDES)
+            if (props[key] !== undefined)
+                delete props[key];
+    }
     const state = gridOver(node);
     if (state)
         gridItem(node, state, props);
@@ -1624,9 +1777,16 @@ function sharesRow(node) {
  * the flow is a share of a box it has no part in the width of, a focus ring over a chip.
  */
 function sharesWidth(node) {
-    if (!isShare(readStyle(node, 'width')) && !isShare(readStyle(node, 'minWidth')))
-        return false;
-    return !OUT_OF_FLOW.has(readStyle(node, 'position'));
+    const share = isShare(readStyle(node, 'width')) || isShare(readStyle(node, 'minWidth')) || basisOfRow(node);
+    return share && !OUT_OF_FLOW.has(readStyle(node, 'position'));
+}
+/**
+ * Whether a box's basis is a share of the row it is an item of, which is a share of its width
+ * as a percentage width is: a chip's cell, `flex-basis: 100%` in the chip.
+ */
+function basisOfRow(node) {
+    const row = node.parent;
+    return row?.nodeKind === 'element' && isShare(readStyle(node, 'flexBasis')) && isRow(row);
 }
 /** A percentage: of the box a node is in, for a width or the least it may be. */
 const isShare = (value) => typeof value === 'string' && value.endsWith('%');
@@ -1693,13 +1853,23 @@ const engineMoves = (value) => Array.isArray(value) ? value.filter((entry) => EN
 const sameEntries = (a, b) => a === b || (Array.isArray(a) && a.length === b.length && a.every((entry, i) => entry === b[i]));
 /**
  * Take off what is read here and is no style of a native view: `order`, by the container in
- * `inOrder`, and `justify-self`, by the block a box is in.
+ * `inOrder`, `justify-self`, by the block a box is in, `table-layout`, by what lays a table out,
+ * the band a library's sheet clips a box to, by what draws an image through it, and what makes a
+ * box what its absolute boxes are placed against, by `containsAbsolutes`. The band is
+ * `clipBand`: `clipPath` is the clip path a react-native-svg shape names, which reaches native.
  */
 function notNative(props) {
     if (props['order'] !== undefined)
         delete props['order'];
     if (props['justifySelf'] !== undefined)
         delete props['justifySelf'];
+    if (props['tableLayout'] !== undefined)
+        delete props['tableLayout'];
+    if (props['clipBand'] !== undefined)
+        delete props['clipBand'];
+    for (const key of CONTAINING_ONLY)
+        if (props[key] !== undefined)
+            delete props[key];
 }
 /**
  * What the engine lays out in Yoga's place, written on a node's props last of all: a box sized
@@ -1983,11 +2153,56 @@ function mixedValues(parts, [width, height], own, inColumn = false) {
 const SIZE_KEYS = new Set([
     ...['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flexBasis'],
 ]);
+/** What makes a box a containing block that no native view has a style for: `containsAbsolutes`. */
+const CONTAINING_ONLY = ['willChange', 'contain', 'perspective', 'backdropFilter'];
 /**
  * What only the engine reads, whatever it is set to: no native view lays out by any of them, or
- * draws by `visibility` or a clip to nothing (`seenByCss`).
+ * draws by `visibility`, a clip to nothing (`seenByCss`) or a clip to a band (`notNative`).
+ */
+const LAID_OUT_HERE = new Set([
+    ...GRID_KEYS,
+    'order',
+    'visibility',
+    'clipped',
+    'tableLayout',
+    'clipBand',
+    ...CONTAINING_ONLY,
+]);
+/**
+ * Whether a box is what an absolute box in it is placed against: one that is not static, or one
+ * CSS makes a containing block however it is positioned (see `containsAbsolutes`).
+ */
+function placesItself(node) {
+    return (readStyle(node, 'position') !== 'static' || containsAbsolutes((key) => readStyle(node, key)));
+}
+/**
+ * Whether a style makes its box the containing block of its absolute boxes, positioned or not: a
+ * transform, a filter, a backdrop filter or a perspective other than `none`, a containment of
+ * layout or paint, or a `will-change` naming one of those or `position`.
  */
-const LAID_OUT_HERE = new Set([...GRID_KEYS, 'order', 'visibility', 'clipped']);
+function containsAbsolutes(style) {
+    if (CONTAINING_KEYS.some((key) => given(style(key))))
+        return true;
+    const contain = style('contain');
+    if (typeof contain === 'string' && contain.split(/\s+/).some((word) => CONTAINS.has(word)))
+        return true;
+    const willChange = style('willChange');
+    return (typeof willChange === 'string' &&
+        willChange.split(',').some((name) => WILL_CONTAIN.has(name.trim())));
+}
+/** What makes a box a containing block where it is set to anything but `none`. */
+const CONTAINING_KEYS = ['transform', 'filter', 'backdropFilter', 'perspective'];
+/** The containments that make one: of layout or paint, alone or as `strict` or `content`. */
+const CONTAINS = new Set(['layout', 'paint', 'strict', 'content']);
+/** The properties a `will-change` makes one by naming, as Chrome has it. */
+const WILL_CONTAIN = new Set([
+    ...['transform', 'translate', 'rotate', 'scale', 'perspective'],
+    ...['filter', 'backdrop-filter', 'contain', 'position'],
+]);
+/** Whether a value is one: a list or text of one, not `none`, or a number. */
+const given = (value) => Array.isArray(value)
+    ? value.length > 0
+    : typeof value === 'number' || (typeof value === 'string' && value !== '' && value !== 'none');
 const POSITIONS_HERE = new Set(['static', 'fixed', 'sticky']);
 /** What a declaration can ask of the engine that an app of plain flex does not: see `asks`. */
 const CSS_LAYOUT = 1;
@@ -2047,9 +2262,10 @@ const SHARES_OF = {
     minWidth: SHARED_WIDTHS,
     height: SHARED_HEIGHTS,
     minHeight: SHARED_HEIGHTS,
-    flexBasis: SHARED_HEIGHTS,
+    // Of a column's height, or of a row's width: which, the box it is in says.
+    flexBasis: SHARED_HEIGHTS | SHARED_WIDTHS,
 };
-const heightShare = (key) => SHARES_OF[key] === SHARED_HEIGHTS ? SHARED_HEIGHTS : 0;
+const heightShare = (key) => (SHARES_OF[key] ?? 0) & SHARED_HEIGHTS;
 /** What a size asks for: a share of its box, an automatic minimum, or a keyword of CSS's. */
 function asksBySize(key, value) {
     const least = key === 'minWidth' || key === 'minHeight';
@@ -2488,7 +2704,7 @@ function defined(css) {
  * margins (see `hang`), on the bottom of the row the line is.
  */
 function lineStrut(inherited, container, first, fontScale) {
-    if (risenLine(container, first))
+    if (risenLine(container, first) || emptyLine(container, first))
         return RISEN;
     const under = underLine(container, first);
     const above = strutOf(inherited).above * textScale(inherited, fontScale);
@@ -2535,6 +2751,56 @@ function knownHeight(style, whole) {
 const risenLine = (container, first) => container.flow?.plan.lines.get(first)?.boxes.some((box) => container.flow?.rises?.has(box)) ===
     true;
 const RISEN = { minHeight: 0, alignContent: 'flex-start' };
+/** A block whose lines have nothing on them: no room is kept for any. */
+function nothingOnLines(flow) {
+    flow.lifts = new Map();
+    flow.unders = new Map();
+    flow.rises = new Map();
+    flow.risen = true;
+    if (flow.plan.kind === 'lines')
+        flow.under = 0;
+}
+/** A line among blocks with nothing on it: see `addsNothing`. */
+const emptyLine = (container, first) => container.flow?.plan.lines.get(first)?.boxes.every(addsNothing) === true;
+/**
+ * Whether a box puts nothing on a line: an element a browser lays out inline that holds
+ * nothing, or only more such elements, with no size, padding, border or margin of its own. A
+ * line of nothing else has no height (CSS 2.2, 9.4.2): a component's empty host after a field,
+ * a datepicker's, which draws in an overlay, adds no strut under the field.
+ */
+function addsNothing(node) {
+    if (!node.inlineLevel)
+        return false;
+    // A display of its own, an inline-block written in a sheet, is a box on the line however
+    // empty: only the one the engine gives an inline element is not.
+    if (ownStyle(node, 'display') != null)
+        return false;
+    // Nothing in it but more of the same, and text of no length.
+    for (const child of node.childList) {
+        if (child.nodeKind === 'text' ? child.nodeText !== '' : !emptyOrNotABox(child))
+            return false;
+    }
+    return BOX_KEYS.every((key) => {
+        const value = readStyle(node, key);
+        return value == null || value === 0 || value === 'auto';
+    });
+}
+/** Whether a node in an inline element adds nothing to its line: see `addsNothing`. */
+const emptyOrNotABox = (node) => node.nodeKind !== 'element' || addsNothing(node);
+/** What gives a box a size on a line, whatever it holds. */
+const BOX_KEYS = [
+    ...['width', 'height', 'minWidth', 'minHeight', 'flexBasis', 'aspectRatio'],
+    ...['padding', 'paddingHorizontal', 'paddingVertical', 'paddingTop', 'paddingBottom'],
+    ...['paddingLeft', 'paddingRight', 'paddingStart', 'paddingEnd'],
+    ...['margin', 'marginHorizontal', 'marginVertical', 'marginTop', 'marginBottom'],
+    ...['marginLeft', 'marginRight', 'marginStart', 'marginEnd'],
+    ...['borderWidth', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth'],
+    ...['borderStartWidth', 'borderEndWidth'],
+    ...['paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'],
+    ...['paddingInline', 'paddingInlineStart', 'paddingInlineEnd'],
+    ...['marginBlock', 'marginBlockStart', 'marginBlockEnd'],
+    ...['marginInline', 'marginInlineStart', 'marginInlineEnd'],
+];
 /** The room under the baseline of a line among blocks, by its first box. */
 const underLine = (container, first) => container.flow?.unders?.get(first) ?? 0;
 const sameStrut = (a, b) => a?.minHeight === b.minHeight && a.alignContent === b.alignContent;
@@ -2869,7 +3135,12 @@ function strutted(node, props) {
         (isSet(props['aspectRatio']) && props['aspectRatio'] !== 'auto');
     // Between two insets an out-of-flow box is as tall as they leave it.
     const held = OUT_OF_FLOW.has(props['position']) && isSet(props['top']) && isSet(props['bottom']);
-    return !tall && !held && !holdsText(node);
+    if (tall || held || holdsText(node))
+        return false;
+    // No line at all, in a block that holds nothing, or lines with nothing on them: see
+    // `addsNothing`.
+    const boxes = node.childList.filter((child) => child.nodeKind === 'element');
+    return !boxes.every(addsNothing);
 }
 /**
  * Whether a generated box has text for its content, a space included: nothing is seen of a
@@ -2921,6 +3192,10 @@ function styleKey(value, key) {
 }
 /** What a node's own style says for `key`, as `ownLayout` answers it, without an allocation. */
 function readStyle(node, key) {
+    return ownStyle(node, key) ?? node.defaultStyle?.[key];
+}
+/** The same, without the default an element is given for its name or by the engine. */
+function ownStyle(node, key) {
     const props = node.props;
     // Asked of most nodes more than once a commit, and most have neither of the first two.
     const over = props[STYLE_OVERRIDE];
@@ -2934,8 +3209,7 @@ function readStyle(node, key) {
                 ? inline[key]
                 : styleKey(inline, key)) ??
         props[key] ??
-        node.styleCache?.style[key] ??
-        node.defaultStyle?.[key]);
+        node.styleCache?.style[key]);
 }
 /** Whether a plan lays `child` out the same way in both: in the flow, with the same margins. */
 function sameFlow(child, before, after) {
@@ -3713,6 +3987,10 @@ const UNCAPPED = 1000;
 const FONT_REFRESH_STEP = 0.006;
 /** The views that take a cursor, on either platform. */
 const TEXT_INPUTS = new Set(['TextInput', 'AndroidTextInput']);
+/** Whether a view name is a text input's, for a committed view, which has a name and no node. */
+export const isTextInputView = (viewName) => TEXT_INPUTS.has(viewName);
+/** Whether a node commits as a text input, the view that takes a cursor, on either platform. */
+export const isTextInput = (node) => isTextInputView(viewNameOf(node));
 /**
  * Android's horizontal scroll view and the view that holds its content. RN's `ScrollView.js`
  * commits them in place of `ScrollView` and its plain content view when `horizontal` is set, and
@@ -3923,6 +4201,16 @@ function stacksRuns(node) {
 }
 /** One run of text to place: text itself, or a text element around some, a label in a span. */
 const oneRun = (child) => child.nodeKind === 'text' || (child.nodeKind === 'element' && TEXT_ELEMENTS.has(child.tag));
+/**
+ * The node whose view native has a node's view in, through a line box it is committed in, or
+ * the node it is in where it is not committed.
+ */
+function drawnIn(node) {
+    const under = node.committedUnder;
+    if (!under)
+        return node.parent;
+    return 'nodeKind' in under ? under : under.in;
+}
 /**
  * The view a node is committed as: `viewNameOf`, but for a text element that aligns its text, and
  * for the content view of a horizontal scroll view on Android, which RN commits as a view of its
@@ -4106,6 +4394,8 @@ function laidByNative(node, key) {
         return true;
     return node.playing?.laid === true && node.playing.tracks.has(key);
 }
+/** Whether an animation stays at its last frame once it has ended: by its fill, or held there. */
+const fillsForwards = (running) => running.held === true || running.spec.fill === 'forwards' || running.spec.fill === 'both';
 /** Whether an animation plays once through, forwards, with no wait before it. */
 const playedOnce = (spec) => spec.delay === 0 && spec.duration > 0 && spec.iterations === 1 && !spec.direction;
 /** Whether a track is two frames on one curve, the first of them where the view is drawn. */
@@ -4143,6 +4433,26 @@ const EASED_COLOURS = new Set([
     'borderLeftColor',
 ]);
 const NATIVELY_EASED = new Set(['opacity', 'transform', ...EASED_COLOURS]);
+const SIDE_COLOURS = ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'];
+/**
+ * Ease a view's unsided border colour with its four sides where they ease alike: Android dashes
+ * a rounded border only from `borderColor`, and only while every side equals it. Asked of what
+ * the view is committed with, which the element's own sides can make uniform too.
+ */
+function unsidedBorderTrack(tracks, props) {
+    if (tracks.has('borderColor'))
+        return;
+    const [top, ...rest] = SIDE_COLOURS.map((key) => tracks.get(key));
+    if (!top || rest.some((track) => !sameTrack(track, top)))
+        return;
+    const settled = { ...props };
+    settleUnsidedBorder(settled);
+    if (settled['borderColor'] !== undefined)
+        tracks.set('borderColor', top);
+}
+const sameTrack = (one, other) => one !== undefined &&
+    one.length === other.length &&
+    one.every((point, at) => point.value === other[at].value);
 /** What a node that hands its background colour over has handed so far: nothing. */
 const UNREPORTED = Symbol('unreported');
 /** The style keys that are a view's background. */
@@ -4584,6 +4894,7 @@ const ENGINE_NODE_FIELDS = {
     resolved: true,
     sticky: true,
     fixedTo: true,
+    page: true,
     ordered: true,
     fit: true,
     fitMin: true,
@@ -4604,6 +4915,8 @@ const ENGINE_NODE_FIELDS = {
     playing: true,
     scrolled: true,
     owned: true,
+    paint: true,
+    unsynced: true,
     composedTransform: true,
     bornIn: true,
     boundTransform: true,
@@ -4627,10 +4940,12 @@ const ENGINE_NODE_FIELDS = {
     oneWord: true,
     raised: true,
     presented: true,
+    held: true,
     propsDirty: true,
     structureDirty: true,
     subtreeDirty: true,
     inside: true,
+    contentView: true,
     scrollsOverflow: true,
     engine: true,
 };
@@ -4738,7 +5053,11 @@ const colorProps = new Map();
 function isColorProp(key) {
     let answer = colorProps.get(key);
     if (answer === undefined) {
-        colorProps.set(key, (answer = IS_COLOR_PROP.test(key) || STATE_COLOR_PROPS.has(key) || BRUSH_PROPS.has(key)));
+        colorProps.set(key, (answer =
+            IS_COLOR_PROP.test(key) ||
+                STATE_COLOR_PROPS.has(key) ||
+                BRUSH_PROPS.has(key) ||
+                COLOR_LIST_PROPS.has(key)));
     }
     return answer;
 }
@@ -4752,6 +5071,11 @@ const ASSET_PROPS = new Set(['source', 'defaultSource', 'loadingIndicatorSource'
  * approximated, it is dropped.
  */
 const NESTED_COLOR_LIST_PROPS = new Set(['boxShadow']);
+/**
+ * Props whose value is a list of colours: the spinner colours of Android's swipe layout and an SF
+ * Symbol's palette, each of which React Native or Expo runs through `processColorArray`.
+ */
+const COLOR_LIST_PROPS = new Set(['colors']);
 /** The props of an SVG shape that take a brush, not a colour. */
 const BRUSH_PROPS = new Set(['fill', 'stroke']);
 /** The brush that paints a shape in the colour of the view it is in: `currentColor`. */
@@ -5257,6 +5581,7 @@ export class Engine {
         worstRenderMs: 0,
         createdNodes: 0,
         clonedNodes: 0,
+        paintedNatively: 0,
     };
     eventsRegistered = false;
     root = new RetainedNode('element', 'root', this);
@@ -5267,6 +5592,7 @@ export class Engine {
     styles;
     /** Whether to run the development checks, which a release build skips. */
     dev;
+    /** The clock transitions and animations run on, which a script reads where one has got to. */
     now;
     onDirty;
     onError;
@@ -5344,6 +5670,7 @@ export class Engine {
         if (this.dev) {
             this.styles.onUndefinedToken = (name, props, on) => this.reportUndefinedToken(name, props, on);
             this.styles.onUnreadDisplay = (name, value) => this.reportUnreadDisplay(name, value);
+            this.styles.onPlatformColour = (name, props, on) => this.reportPlatformColour(name, props, on);
         }
         this.now = options.now ?? (() => globalThis.performance?.now?.() ?? Date.now());
         this.onDirty = options.onDirty;
@@ -5354,6 +5681,10 @@ export class Engine {
         this.scrollDriver = options.nativeAnimated
             ? new NativeScrollDriver(options.nativeAnimated, (view, tag, keys) => this.touchedNatively(view, tag, keys))
             : null;
+        // The painter's graph takes the props it paints from commits as any graph does: see `Touched`.
+        this.painter = options.nativeAnimated
+            ? new NativePainter(options.nativeAnimated, (view, tag, keys) => this.touchedNatively(view, tag, keys))
+            : null;
         // Eagerly, not on the first listener. Fabric holds exactly one event handler and
         // `ReactFabric` installs React's at module scope, so until we claim it every native event
         // lands in React's event plugins. Those look the name up in a view config registry we never
@@ -5821,6 +6152,73 @@ export class Engine {
             this.generate(node);
         return node;
     }
+    /**
+     * Commit a node without it being seen or touched, or let it be again. A browser paints nothing
+     * until a task and its animation frame are over, and native draws each commit as it comes: what
+     * a library inserts, measures and only then styles is held for the frame between. Over every
+     * opacity and `pointerEvents` it has, an eased one included, which it is committed with again
+     * once let go. Nothing it matches changes, so nothing is styled again.
+     */
+    hold(node, held) {
+        if ((node.held === true) === held)
+            return;
+        if (held)
+            node.held = true;
+        else
+            delete node.held;
+        this.markProps(node, false);
+    }
+    /**
+     * Stop showing the last frame of a node's finished `@keyframes` animation, where nothing holds
+     * it there any more: script took its hold away after it ended. The node is what the cascade
+     * gives it again with the next commit.
+     */
+    releaseFinished(node) {
+        const running = node.playing;
+        if (!running?.done || fillsForwards(running))
+            return;
+        running.values = {};
+        this.markProps(node, false);
+    }
+    /**
+     * End a node's `@keyframes` animation now, as a script's `finish()` or `cancel()` does: at its
+     * end, which is its last frame where it fills forwards and its resting style where it does not,
+     * or with no effect of it at all. Native is stopped where it plays it, and what the view is drawn
+     * at set there too (see `endedNatively`). It stays ended while the node asks for the same one.
+     */
+    endPlaying(node, how) {
+        const running = node.playing;
+        // One that never ends has no end to go to: a script is refused it first.
+        if (!running || (how === 'finish' && running.spec.iterations === null))
+            return;
+        if (running.done) {
+            // Ended already, and held at its last frame by its fill: a cancel lets that go.
+            if (how === 'cancel' && Object.keys(running.values).length) {
+                running.values = {};
+                this.markProps(node, false);
+            }
+            return;
+        }
+        const native = running.native !== undefined;
+        this.stopNative(node, running);
+        running.pausedAt = undefined;
+        if (how === 'finish') {
+            const { spec } = running;
+            const end = running.start + spec.delay + spec.duration * (spec.iterations ?? 1);
+            this.advancePlayer(node, Math.max(this.now(), end));
+        }
+        else {
+            running.values = {};
+            running.done = true;
+            this.playing.delete(node);
+            this.markProps(node, false);
+            this.emitTransition(node, 'topAnimationcancel', running.spec.name);
+        }
+        this.commit();
+        const committed = node.committed;
+        if (native && node.owned && committed)
+            this.setOwned(node, RESET_OWNED, committed.props);
+    }
     addClass(node, name) {
         const was = this.classAttribute(node);
         (node.classes ??= new Set()).add(name);
@@ -6098,7 +6496,8 @@ export class Engine {
         node.nodeText = value;
         return node;
     }
-    appendChild(parent, child) {
+    appendChild(into, child) {
+        const parent = into.contentView && into.contentView !== child ? into.contentView : into;
         this.markAdopted(child, parent);
         this.detach(child);
         this.markReturned(child);
@@ -6113,7 +6512,8 @@ export class Engine {
         this.markStructure(parent, child, parent.childList.length - 1);
         this.markTextContent(parent, child);
     }
-    insertBefore(parent, child, ref) {
+    insertBefore(into, child, ref) {
+        const parent = into.contentView && into.contentView !== child ? into.contentView : into;
         this.markAdopted(child, parent);
         this.detach(child);
         this.markReturned(child);
@@ -6146,6 +6546,10 @@ export class Engine {
         if (at < 0)
             return;
         this.carryHoists(child);
+        if (this.holdsMoves)
+            this.holdMove(target, child, at);
+        if (this.heldMoves.size)
+            this.releaseHeldUnder(child);
         target.childList.splice(at, 1);
         child.parent = null;
         this.outSince.set(child, this.classesAbove);
@@ -6309,6 +6713,9 @@ export class Engine {
     /** Forget the committed views of each node removed since the last commit that is still out. */
     forgetDetached() {
         for (const node of this.removedSinceCommit) {
+            // One a finger is on goes once the finger lifts: see `holdMove`.
+            if (this.heldMoves.has(node))
+                continue;
             if (node.committed && this.topOf(node) !== this.root)
                 this.forgetCommitted(node);
         }
@@ -6335,6 +6742,8 @@ export class Engine {
         // as. Native gives a view one parent for its life, and aborts on a second.
         if (node.committed)
             this.forgetCommitted(node);
+        // Destroyed, it is held no longer: it is gone from native with its parent's next commit.
+        this.heldMoves.delete(node);
         this.stopEased(node);
         node.transitions = undefined;
         if (node.playing)
@@ -7172,6 +7581,8 @@ export class Engine {
         this.placesMarkedAfter.clear();
         if (!this.root.structureDirty && !this.root.subtreeDirty)
             return false;
+        if (this.heldMoves.size)
+            this.markHolders();
         const started = now();
         // Faces registered before the walk, the global sheet's among them, reach every node in it.
         this.facesAdded = false;
@@ -7183,13 +7594,19 @@ export class Engine {
         this.quietly.clear();
         this.loudly.clear();
         this.holders = undefined;
+        const sent = this.rootsSent;
+        this.paintedInstead = false;
         this.commitAsAsked();
+        if (this.paintedOnly(sent))
+            return false;
         // Each a layout of the engine's, which an app of plain flex has asked for none of.
         if (!this.paintOnly && this.asked & LAYOUTS)
             this.settleLayout();
         this.paintOnly = false;
         this.changesHeld = true;
         this.countCommit(now() - started);
+        if (this.paintedNodes.size)
+            this.repaintShares();
         this.flushTransitionEvents();
         this.reportPaint();
         this.playSized();
@@ -7203,6 +7620,17 @@ export class Engine {
         this.blurHidden();
         return true;
     }
+    /**
+     * Whether a commit sent native nothing, every change in it being paint native was given
+     * directly: see `paintNatively`. Nothing was laid out, so nothing is read back.
+     */
+    paintedOnly(sentBefore) {
+        if (this.rootsSent !== sentBefore || !this.paintedInstead)
+            return false;
+        this.paintOnly = false;
+        this.flushTransitionEvents();
+        return true;
+    }
     /** Count a commit that reached native, and how long it took, in `stats`. */
     countCommit(elapsed) {
         this.stats.commits++;
@@ -7605,12 +8033,23 @@ export class Engine {
             // What that found resized is the transitions themselves, at the frame they are eased to.
             this.movesOthers = false;
         }
+        this.clearFlags(this.root);
+        // The same views as the last commit, where what changed was painted by native instead: as
+        // before otherwise, since a commit of nothing new is what has a box read back again.
+        if (this.paintedInstead && this.sentHandles && sameHandles(handles, this.sentHandles))
+            return;
+        this.sentHandles = handles;
+        this.rootsSent++;
         for (const handle of handles)
             this.fabric.appendChildToSet(set, handle);
-        this.clearFlags(this.root);
         this.announceCommit();
         this.fabric.completeRoot(this.rootTag, set);
     }
+    /** The views the last `completeRoot` was given, and how many there have been. */
+    sentHandles = null;
+    /** Set in a commit where a change was given to native to paint in place of being committed. */
+    paintedInstead = false;
+    rootsSent = 0;
     /** The fixed boxes each page, or the root, is committed with. */
     fixedIn = new Map();
     /** Boxes found to be fixed while they were being committed under their parent. */
@@ -7619,6 +8058,109 @@ export class Engine {
     fingerOn = null;
     /** Boxes that became fixed or absolute with the finger on them, left under their parents. */
     fixedUnderFinger = new Set();
+    /** Whether a node moved with a finger on it waits for the finger to lift: `holdMovesUnderFinger`. */
+    holdsMoves = false;
+    /**
+     * The nodes taken out of the parent they are committed under with a finger on them, each with
+     * that parent and the element that came after it there, which it stays before.
+     */
+    heldMoves = new Map();
+    /**
+     * Have a node that is moved to another parent, or taken out, while the first finger down is on
+     * it or on something in it stay committed where it was until the last finger lifts, and then
+     * go where it is. A native view moved to another parent is a view made again, which loses the
+     * touch on it: a web library that drags an element moves it as the drag begins, out of its list
+     * and on to the body, and its drag stopped there. The tree is moved at once, so what reads it
+     * finds the node where it was put, and only what native is told waits. Off, what is held goes
+     * where it is with the next commit.
+     */
+    holdMovesUnderFinger(on) {
+        this.holdsMoves = on;
+        if (!on && this.heldMoves.size)
+            this.releaseMoves();
+    }
+    /** A node is taken out of `parent` from `at`: held there, where a finger is on it. */
+    holdMove(parent, child, at) {
+        if (this.heldMoves.has(child) || child.committed === null)
+            return;
+        // Under the root it is one of the root's handles, which hold no node from elsewhere.
+        if (child.committedUnder !== parent || parent === this.root)
+            return;
+        if (!isWithin(this.fingerOn, child))
+            return;
+        const before = parent.childList.slice(at + 1).find((next) => next.nodeKind === 'element');
+        this.heldMoves.set(child, { under: parent, before: before ?? null });
+    }
+    /** Whether a node is held under a parent other than the one it is in now. */
+    heldElsewhere(child) {
+        const held = this.heldMoves.get(child);
+        return held !== undefined && held.under !== child.parent;
+    }
+    /**
+     * Add to a node's child handles each node held under it that has gone from it, before the
+     * element it came before where that is still there: reconciled where it is in the tree, so it
+     * is drawn as it is styled, and as it was last committed once it is out of the tree.
+     */
+    heldHandles(node, handles) {
+        for (const [child, held] of this.heldMoves) {
+            if (held.under !== node || child.parent === node)
+                continue;
+            const handle = child.parent ? this.reconcileUnder(node, child) : child.committed?.handle;
+            if (!handle)
+                continue;
+            const next = held.before?.committedUnder === node ? held.before.committed : null;
+            const at = next ? handles.indexOf(next.handle) : -1;
+            if (at < 0)
+                handles.push(handle);
+            else
+                handles.splice(at, 0, handle);
+        }
+    }
+    /**
+     * Have each parent a node is held under committed with its children again: a change to the node
+     * marks the way up from where it is in the tree, and not from where it is committed.
+     */
+    markHolders() {
+        for (const { under } of this.heldMoves.values()) {
+            for (let at = under; at && !at.subtreeDirty; at = at.parent) {
+                at.subtreeDirty = true;
+            }
+        }
+    }
+    /**
+     * A node is taken out of the page: each node held under it, or under what it holds, is let go,
+     * as there is nowhere left to draw it where it was. One moved elsewhere is drawn there.
+     */
+    releaseHeldUnder(removed) {
+        for (const [node, { under }] of [...this.heldMoves]) {
+            if (node === removed || !isWithin(under, removed))
+                continue;
+            this.heldMoves.delete(node);
+            if (node.parent) {
+                node.parent.structureDirty = true;
+                this.markPath(node.parent);
+            }
+            else
+                this.removedSinceCommit.add(node);
+        }
+    }
+    /** The last finger is up: each node held goes where it is with the next commit. */
+    releaseMoves() {
+        const held = [...this.heldMoves];
+        this.heldMoves.clear();
+        for (const [node, { under }] of held) {
+            under.structureDirty = true;
+            this.markPath(under);
+            if (node.parent) {
+                node.parent.structureDirty = true;
+                this.markPath(node.parent);
+            }
+            else {
+                // Out of the tree, it is let go of as any node taken out is: see `forgetDetached`.
+                this.removedSinceCommit.add(node);
+            }
+        }
+    }
     /** Note what a finger comes down on, and once the last has lifted move what waited for it. */
     trackFinger(target, type, nativeEvent) {
         const fingers = nativeEvent?.touches?.length ?? 0;
@@ -7628,6 +8170,8 @@ export class Engine {
         if ((type !== 'topTouchEnd' && type !== 'topTouchCancel') || fingers > 0)
             return;
         this.fingerOn = null;
+        if (this.heldMoves.size)
+            this.releaseMoves();
         for (const node of this.fixedUnderFinger) {
             if (!isWithin(node, this.root))
                 continue;
@@ -7639,7 +8183,7 @@ export class Engine {
     /** The page a box is on: the nearest view that holds one, or the root. */
     pageOf(node) {
         let page = node.parent;
-        while (page?.parent && !FIXED_BOUNDARIES.has(viewNameOf(page))) {
+        while (page?.parent && !page.page && !FIXED_BOUNDARIES.has(viewNameOf(page))) {
             page = page.parent;
         }
         return page;
@@ -8444,7 +8988,8 @@ export class Engine {
     }
     /**
      * The boxes inside `node` that Yoga sizes from the room on offer and not from their content:
-     * one with a percentage width, and one that takes a share of a row from a basis of nothing.
+     * one with a percentage width or a percentage basis in a row, and one that takes a share of a
+     * row from a basis of nothing.
      * Nothing under a box with a width of its own in points is looked at: that width is its
      * content's room whatever it holds.
      */
@@ -8454,7 +8999,10 @@ export class Engine {
             if (child.nodeKind !== 'element')
                 continue;
             const width = readStyle(child, 'width');
-            const shares = typeof readStyle(child, 'flex') === 'number' || isNoBasis(readStyle(child, 'flexBasis'));
+            const basis = readStyle(child, 'flexBasis');
+            const shares = typeof readStyle(child, 'flex') === 'number' ||
+                isNoBasis(basis) ||
+                (isShare(basis) && isRow(node));
             if (typeof width === 'string' || shares || isShare(readStyle(child, 'minWidth'))) {
                 found.push(child);
             }
@@ -8706,7 +9254,7 @@ export class Engine {
         const inGrid = () => node.parent?.grid !== undefined;
         // Under a box that is not positioned, it is placed against one further up, and a share of
         // a size is a share of that one's.
-        const through = () => node.parent != null && readStyle(node.parent, 'position') === 'static';
+        const through = () => node.parent != null && !placesItself(node.parent);
         // In a block, or in a line of one: a container the engine lays out as a browser's flow.
         const block = node.parent?.flow !== undefined;
         if (position === 'fixed' || block || auto() || inGrid() || through())
@@ -8875,7 +9423,7 @@ export class Engine {
     /** The box Yoga positions an out-of-flow node by: the nearest ancestor that is not static. */
     containingBlock(node) {
         for (let up = node.parent; up; up = up.parent) {
-            if (up.nodeKind !== 'element' || readStyle(up, 'position') !== 'static')
+            if (up.nodeKind !== 'element' || placesItself(up))
                 return up;
         }
         return this.root;
@@ -9686,8 +10234,13 @@ export class Engine {
      * 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`. */
+    /**
+     * What a touch on an element that keeps a drag holds off, while it lasts (see `holdSwipe`), and
+     * a node held unseen (see `hold`).
+     */
     heldFor(node, merged) {
+        if (node.held)
+            Object.assign(merged, UNSEEN);
         if (node === this.swipeHeld)
             merged['gestureResponseDistance'] = NO_SWIPE;
         if (this.scrollHeld.size && this.scrollHeld.has(node))
@@ -9765,6 +10318,8 @@ export class Engine {
         if (field)
             fieldStyled(viewName, style, this.fontScale);
         const merged = composeTransform(node, this.eased(node, style));
+        // From the sides as committed: the element's own, and each frame of a transition.
+        settleUnsidedBorder(merged);
         // On iOS: Android's field says the baseline of the line it is sized and centred by.
         if (field)
             centreSingleLine(viewName, merged, this.fontScale, isOnBaseline(node, viewName));
@@ -9793,6 +10348,7 @@ export class Engine {
         // Asked of the namespace first: it is asked of every node merged.
         if (node.namespace !== undefined && viewName.startsWith('RNSVG')) {
             drawnAsShape(node, viewName, merged);
+            this.fillUnread(merged);
         }
         if (node.raised !== undefined)
             merged['zIndex'] ??= node.raised;
@@ -9808,6 +10364,7 @@ export class Engine {
             if (merged['maxWidth'] !== undefined)
                 leastWins(merged, 'Width');
         }
+        keptForPaint(node, merged);
         return merged;
     }
     /** A run of text as it is committed: a word to a line while how narrow it goes is read. */
@@ -9962,11 +10519,17 @@ export class Engine {
      * an element is not seen here until the inline form compiles to one.
      */
     liftLines(node, flow) {
-        const runs = flow.plan.kind === 'lines'
+        const all = flow.plan.kind === 'lines'
             ? [this.onLines(node)]
             : [...flow.plan.lines.values()].map((line) => line.boxes);
-        if (!runs.some((boxes) => boxes.length))
+        // A line with nothing on it has no height, and its boxes are given no room: see
+        // `addsNothing`.
+        const runs = all.filter((boxes) => !boxes.every(addsNothing));
+        if (!runs.length) {
+            if (all.some((boxes) => boxes.length))
+                nothingOnLines(flow);
             return;
+        }
         const below = this.strutBelow(node);
         const lifts = new Map();
         const unders = new Map();
@@ -10565,6 +11128,10 @@ export class Engine {
             if (this.topOf(node) !== this.root)
                 this.stopEased(node);
         }
+        for (const node of [...this.paintedNodes]) {
+            if (this.topOf(node) !== this.root)
+                this.stopPainting(node);
+        }
     }
     /** Every node whose animation native is playing, with no frame of it in JavaScript. */
     playedNatively = new Set();
@@ -10647,6 +11214,7 @@ export class Engine {
             return false;
         const length = Math.max(2, Math.round((spec.duration * span) / NATIVE_FRAME) + 1);
         const frames = Array.from({ length }, (_, i) => i / (length - 1));
+        this.leavePainting(node);
         const native = this.scrollDriver.play(node, channels, { frames, toValue: span, iterations: count }, (view) => this.tagOf(view), () => this.endedNatively(node, running));
         if (!native)
             return false;
@@ -10700,6 +11268,21 @@ export class Engine {
         if (!running.done && running.pausedAt === undefined)
             this.playing.add(node);
     }
+    /** Each animation started on a node held unseen (see `hold`), to be played once it is let go. */
+    startsUnheld = new WeakSet();
+    /**
+     * Play an animation started on a node held unseen, once it is let go: its clock starts here, as
+     * a browser starts it as it first paints the element. Not where it was paused meanwhile, nor a
+     * second time where it was run again while held, which plays it here already.
+     */
+    playUnheld(node, current, spec, props) {
+        if (!this.startsUnheld.delete(current) || spec.paused)
+            return;
+        current.start = this.now();
+        if (current.pausedAt === undefined && !this.playing.has(node)) {
+            this.playSomewhere(node, current, props);
+        }
+    }
     /** Start the clock on an animation, unless the node is already playing this one. */
     startPlaying(node, spec, frames, props) {
         const current = node.playing;
@@ -10734,6 +11317,7 @@ export class Engine {
             this.emitTransition(node, 'topAnimationstart', spec.name);
             return;
         }
+        this.playUnheld(node, current, spec, props);
         // A view made again is another view: the one native was moving is gone. And one whose
         // important declarations changed is moving what it now must not, or not what it now may.
         if (node.committed === null || pinsChanged(node, current))
@@ -10746,7 +11330,11 @@ export class Engine {
     }
     /** Play an animation that has just started: by native's layout, by native's driver, or here. */
     playSomewhere(node, started, props) {
-        if (this.layPlayed(node, started))
+        // A browser starts it as it first paints the element: a graph native plays would set its
+        // opacity over the hold's. See `playUnheld`.
+        if (node.held)
+            this.startsUnheld.add(started);
+        else if (this.layPlayed(node, started))
             this.laidPlayed.push({ node, running: started });
         else if (!this.playNatively(node, started, props))
             this.playing.add(node);
@@ -10771,8 +11359,7 @@ export class Engine {
         // One native was laying out goes on from JavaScript, by the clock it started on.
         const reframed = { ...current, tracks, inherited, laid: undefined };
         const { values, finished } = sample(reframed, current.pausedAt ?? this.now());
-        const holds = current.spec.fill === 'forwards' || current.spec.fill === 'both';
-        reframed.values = finished && !holds ? {} : values;
+        reframed.values = finished && !fillsForwards(current) ? {} : 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.
@@ -11218,8 +11805,13 @@ export class Engine {
             const clock = `${eased.duration} ${eased.easing.join()}`;
             clocks.set(clock, [...(clocks.get(clock) ?? []), key]);
         }
-        for (const keys of clocks.values())
-            this.playEased(node, state, keys, props);
+        for (const keys of clocks.values()) {
+            // Eased on the graph native already paints the view by, or from here: never on a second.
+            if (node.paint)
+                this.easePainted(node, state, keys, props);
+            else
+                this.playEased(node, state, keys, props);
+        }
     }
     playEased(node, state, keys, props) {
         const first = state.get(keys[0]);
@@ -11254,6 +11846,7 @@ export class Engine {
                 ],
             ];
         }));
+        unsidedBorderTrack(tracks, props);
         const spec = {
             name: '',
             duration: first.duration,
@@ -11334,6 +11927,351 @@ export class Engine {
         clock.stop();
         this.forgetEased(node);
     }
+    painter;
+    /** The views native paints, for letting go of those that leave the tree. */
+    paintedNodes = new Set();
+    /** When each prop a view paints with last changed: see `paintedAgain`. */
+    paintChanges = new WeakMap();
+    quietTimer = null;
+    /**
+     * Give native the paint a commit would carry, where it is all that changed: a view whose
+     * transform, opacity or background is changed again and again, a progress bar stepped every
+     * 50ms, is painted by a native animated graph and leaves nothing to commit. Answers what is
+     * left of `payload` to commit.
+     *
+     * The first change of a prop is committed as any other. The second within `PAINT_RUN_MS` is
+     * committed too, with `collapsable: false` so the view is kept for native to paint, and from
+     * the next native paints it. The shadow node falls behind what is drawn; it is brought up to
+     * date with the next commit of the view for anything else, once the view has been left alone
+     * for `PAINT_QUIET_MS`, and before anything measures where it is drawn.
+     *
+     * A view a graph of native's has set a transform or an opacity on before is left to
+     * `setOwned`, which sets each later change of those on native: see `Touched`.
+     */
+    paintNatively(node, viewName, props, payload, cloned) {
+        if (node.unsynced)
+            return this.synced(node, props, payload);
+        if (!payload && !node.paint?.sync)
+            return payload;
+        const held = this.heldOn(node);
+        const runs = this.paintsHere(node, viewName);
+        const state = node.paint;
+        if (!state)
+            return runs ? this.startPainting(node, props, payload) : payload;
+        const { changed, inRun } = this.paintRun(node, state, payload, runs);
+        if (changed)
+            this.paintNow(node, state, props, held);
+        else if (!state.sync)
+            return payload;
+        return this.leftOver(node, state, props, payload, held, cloned || !inRun);
+    }
+    /** The props other graphs of native's set on a view now. */
+    heldOn(node) {
+        return this.scrollDriver?.held(node) ?? NO_KEYS;
+    }
+    /**
+     * What is left to commit of a payload native was given: nothing, where all it changed is
+     * painted in a run, and otherwise all of it, with what native painted ahead of the shadow node.
+     */
+    leftOver(node, state, props, payload, held, commits) {
+        const others = Object.keys(payload ?? {}).some((key) => !state.keys.has(key) || held.has(key));
+        if (commits || others || state.sync)
+            return this.withStale(state, props, payload);
+        return this.leftToNative(node, state, props, payload);
+    }
+    /** Set on native what a view paints, of the props no other graph of native's holds. */
+    paintNow(node, state, props, held) {
+        const keys = held.size ? [...state.keys].filter((key) => !held.has(key)) : state.keys;
+        const { values, refused } = this.paintValues(node, keys, (key) => this.paintedValue(node, key, props));
+        // A colour native cannot take is committed: no graph owns a colour.
+        for (const key of refused)
+            state.keys.delete(key);
+        state.shares = values.shares;
+        if (!hasPaint(values))
+            return;
+        this.painter.paint(node, node.committed.tag, values);
+        this.stats.paintedNatively++;
+    }
+    /**
+     * Whether a run of changes can hand a view to native: a plain view no animation of native's
+     * plays. A transition native plays is played on the painter's graph from then on, and a prop
+     * another graph holds now is committed as before (`heldOn`).
+     */
+    paintsHere(node, viewName) {
+        if (!this.painter || viewName !== DEFAULT_VIEW || node.committed === null)
+            return false;
+        return !node.playing?.native && !node.scrolled;
+    }
+    /** Have native paint a view, with no props yet: `paintRun` adds them. */
+    paintFrom(node) {
+        // One graph a view: the setter's, which `setOwned` connected, goes as the painter's comes.
+        this.scrollDriver?.forget(node);
+        const state = { keys: new Set(), stale: new Set() };
+        node.paint = state;
+        this.paintedNodes.add(node);
+        return state;
+    }
+    /**
+     * Whether a payload changes paint native could paint, and whether each such change is in a
+     * run, where a run can hand the view over. Takes on each prop in a run, and each a graph of
+     * native's has set on the view, which a commit no longer changes (see `Touched`).
+     * A change in no run is committed as well as painted: a fade a press starts and a transition
+     * that ends are a commit each, as they were, and the shadow node is never behind for them.
+     */
+    paintRun(node, state, payload, runs) {
+        let changed = false;
+        let inRun = runs;
+        for (const key in payload) {
+            if (!NATIVELY_EASED.has(key))
+                continue;
+            changed = true;
+            const again = runs && this.paintedAgain(node, key);
+            if (!again)
+                inRun = false;
+            if (again || this.owns(node, key))
+                state.keys.add(key);
+        }
+        return { changed, inRun };
+    }
+    /**
+     * Nothing to commit of a change native has painted: the view keeps its shadow node, and its
+     * committed props are what the next change is measured from.
+     */
+    leftToNative(node, state, props, payload) {
+        for (const key in payload)
+            state.stale.add(key);
+        node.committed = { ...node.committed, props };
+        this.paintedInstead = true;
+        this.quietLater();
+        return null;
+    }
+    /** A payload with what native painted ahead of the shadow node, which it brings up to date. */
+    withStale(state, props, payload) {
+        state.sync = undefined;
+        if (!state.stale.size)
+            return payload;
+        const out = { ...payload };
+        for (const key of state.stale)
+            if (!(key in out))
+                out[key] = props[key] ?? null;
+        state.stale.clear();
+        return out;
+    }
+    /** Have native paint a view from the next change, where this one is the second of a run. */
+    startPainting(node, props, payload) {
+        const keys = [];
+        for (const key in payload) {
+            if (NATIVELY_EASED.has(key) && this.paintedAgain(node, key))
+                keys.push(key);
+        }
+        if (!keys.length)
+            return payload;
+        const state = this.paintFrom(node);
+        for (const key of keys)
+            state.keys.add(key);
+        if (props['collapsable'] !== undefined)
+            return payload;
+        props['collapsable'] = false;
+        return { ...payload, collapsable: false };
+    }
+    /**
+     * Whether a change of a prop a view paints with is the second of a run, soon after the last.
+     * Two at the same moment are one: an animation's last frame and the style it rests at.
+     */
+    paintedAgain(node, key) {
+        const now = this.now();
+        const changes = this.paintChanges.get(node) ?? new Map();
+        this.paintChanges.set(node, changes);
+        const last = changes.get(key);
+        if (last === now)
+            return false;
+        changes.set(key, now);
+        return last !== undefined && now - last < PAINT_RUN_MS;
+    }
+    /** What a view paints for a key: where a transition native eases it is going, if it is. */
+    paintedValue(node, key, props) {
+        const eased = node.transitions?.get(key);
+        return eased?.native ? eased.to : props[key];
+    }
+    /**
+     * What native is to paint for these keys, and those it cannot take: a colour it cannot
+     * parse. A transform the transform node cannot take, a matrix or a move by a share of a box
+     * with no size yet, is painted whole (`PaintValues.transform`).
+     */
+    paintValues(node, keys, valueOf) {
+        const values = {};
+        const colors = {};
+        const refused = [];
+        for (const key of keys) {
+            const value = valueOf(key) ?? null;
+            if (key === 'opacity') {
+                if (value !== null && typeof value !== 'number')
+                    refused.push(key);
+                else
+                    values.opacity = this.touchedOpacity(node, value ?? 1);
+            }
+            else if (key === 'transform') {
+                Object.assign(values, this.transformPainted(node, value));
+            }
+            else {
+                const rgba = value === null ? [0, 0, 0, 0] : parseColor(value);
+                if (rgba)
+                    colors[key] = rgba;
+                else
+                    refused.push(key);
+            }
+        }
+        values.colors = colors;
+        return { values, refused };
+    }
+    /**
+     * An opacity as native is to paint it: no lower than what still takes a touch, on a view that
+     * takes presses, as a commit sends it (`stillTouched`).
+     */
+    touchedOpacity(node, opacity) {
+        if (!this.responders.has(node))
+            return opacity;
+        return stillTouched({ opacity, pointerEvents: node.committed?.props['pointerEvents'] })['opacity'];
+    }
+    /** A transform as native is to paint it, and whether it is a share of the view's box. */
+    transformPainted(node, value) {
+        const list = value === null ? [] : paintedTransform(value, () => this.boxOf(node));
+        if (!list)
+            return { transform: { literal: literalTransform(value) } };
+        return sharesBox(value) ? { transform: list, shares: true } : { transform: list };
+    }
+    /**
+     * Paint again each view painted with a move by a share of its box, after a commit that can
+     * have resized it: the points it was painted with are a share of the box it had.
+     */
+    repaintShares() {
+        for (const node of this.paintedNodes) {
+            const state = node.paint;
+            if (!state.shares || !node.committed || !this.painter.paints(node))
+                continue;
+            if (node.transitions?.get('transform')?.native)
+                continue;
+            const held = this.heldOn(node);
+            if (held.has('transform'))
+                continue;
+            const props = node.committed.props;
+            const keys = [...state.keys].filter((key) => !held.has(key));
+            const { values } = this.paintValues(node, keys, (key) => this.paintedValue(node, key, props));
+            this.painter.paint(node, node.committed.tag, values);
+        }
+    }
+    /**
+     * Ease a transition on the graph native paints the view by, from where native has it: a
+     * transition aimed somewhere else every 50ms is a value eased on native each time, with no
+     * commit to start it. One native cannot ease this way is eased from JavaScript, and each of
+     * its frames is painted.
+     */
+    easePainted(node, state, keys, props) {
+        const tag = node.committed?.tag;
+        const paint = node.paint;
+        if (!this.painter?.eases || tag === undefined)
+            return;
+        if (INDIVIDUAL_TRANSFORMS.some((key) => props[key] !== undefined))
+            return;
+        // A prop the graph has none of builds it again, which stops what it eases: each of those is
+        // taken back by JavaScript from where it has got to first, so none is left native's.
+        if (keys.some((key) => !paint.keys.has(key)))
+            this.backToScriptAll(node, keys);
+        for (const key of keys)
+            paint.keys.add(key);
+        const ends = this.easedEnds(node, state, keys, props);
+        if (!ends)
+            return;
+        const first = state.get(keys[0]);
+        const length = Math.max(2, Math.round(first.duration / NATIVE_FRAME) + 1);
+        const frames = Array.from({ length }, (_, i) => bezier(first.easing, i / (length - 1)));
+        const clock = { keys, stop: () => undefined };
+        for (const key of keys)
+            state.get(key).native = clock;
+        this.easedNatively.add(node);
+        const eased = this.painter.ease(node, tag, ends.from, ends.to, frames, () => this.endedEased(node, clock));
+        clock.stop = () => eased.stop();
+    }
+    /**
+     * Where a transition on a view native paints starts and ends, as native eases them: null
+     * where either is not numbers, which is eased from JavaScript and each frame painted.
+     */
+    easedEnds(node, state, keys, props) {
+        const at = (end) => (key) => keys.includes(key) ? state.get(key)[end] : this.paintedValue(node, key, props);
+        const ends = [at('current'), at('to')].map((valueOf) => this.paintValues(node, node.paint.keys, valueOf));
+        const numbers = ends.every(({ values, refused }) => !refused.length && Array.isArray(values.transform ?? []));
+        return numbers ? { from: ends[0].values, to: ends[1].values } : null;
+    }
+    /** Whether a graph of native's has set a prop on the view the node is committed as. */
+    owns(node, key) {
+        const owned = node.owned;
+        return !!owned && owned.tag === node.committed?.tag && owned.keys.has(key);
+    }
+    /**
+     * Let the painter go, for a graph of an animation to move the view: one graph moves a view,
+     * and what the painter eased goes on from JavaScript.
+     */
+    leavePainting(node) {
+        if (!node.paint)
+            return;
+        // What native painted that the shadow node has not got is committed with the view next.
+        if (node.paint.stale.size)
+            node.unsynced = new Set(node.paint.stale);
+        this.backToScriptAll(node, []);
+        this.stopPainting(node);
+    }
+    /** A payload with what native painted before the painter let the view go: see `leavePainting`. */
+    synced(node, props, payload) {
+        const out = { ...payload };
+        for (const key of node.unsynced)
+            if (!(key in out))
+                out[key] = props[key] ?? null;
+        node.unsynced = undefined;
+        return out;
+    }
+    /** Take back from native every clock it eases on a view but those of `keys`. */
+    backToScriptAll(node, keys) {
+        const clocks = new Set();
+        for (const [key, eased] of node.transitions ?? []) {
+            if (eased.native && !keys.includes(key))
+                clocks.add(eased.native);
+        }
+        for (const clock of clocks)
+            this.backToScriptEased(node, clock, this.now());
+    }
+    /** Native no longer paints a view, which has left the tree. */
+    stopPainting(node) {
+        this.painter?.release(node);
+        node.paint = undefined;
+        this.paintedNodes.delete(node);
+    }
+    /** Bring every view native paints up to date in the shadow tree, once they are left alone. */
+    quietLater() {
+        if (this.quietTimer !== null)
+            clearTimeout(this.quietTimer);
+        this.quietTimer = setTimeout(() => {
+            this.quietTimer = null;
+            this.commitPainted();
+        }, PAINT_QUIET_MS);
+    }
+    /**
+     * Commit what native painted ahead of the shadow tree, on every view it paints: where a view
+     * is drawn takes in the transform of each view its native view is in, which is not always
+     * one of its parents here (a hoisted or fixed box is committed elsewhere).
+     */
+    commitPainted() {
+        const behind = [];
+        for (const each of this.paintedNodes) {
+            if (!each.paint?.stale.size)
+                continue;
+            each.paint.sync = true;
+            behind.push(each);
+        }
+        if (!behind.length)
+            return;
+        this.touch(behind);
+        this.commit();
+    }
     /** A graph of native's was connected to a view: see `Touched`. */
     touchedNatively(node, tag, keys) {
         const taken = keys.filter((key) => key === 'opacity' || key === 'transform');
@@ -11396,13 +12334,13 @@ export class Engine {
             clock.stop();
     }
     /**
-     * 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`.
+     * Whether an animation that has finished goes on holding its last frame. With a forwards fill,
+     * or held there by script, 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')
+        if (fillsForwards(running))
             return true;
         // One that listened and has stopped takes its set with it: nobody to hear it.
         if (!node.listeners?.has('topAnimationend'))
@@ -11556,6 +12494,12 @@ export class Engine {
         }
         return out;
     }
+    /** Copy a list of colours, each through the host's converter, one it cannot read transparent. */
+    processColorList(value) {
+        if (!Array.isArray(value))
+            return value;
+        return value.map((entry) => this.color(entry) ?? 0);
+    }
     /** Copy a list of shadow-like objects, running each `color` through the host's converter. */
     processNestedColors(value) {
         if (!Array.isArray(value))
@@ -11693,6 +12637,8 @@ export class Engine {
         this.noteBaselineFields(node);
         this.freshBaselines(node);
         const childHandles = this.reconcileChildren(node, viewName, style);
+        if (this.heldMoves.size)
+            this.heldHandles(node, childHandles);
         if (this.fixedIn.size)
             this.fixedHandles(node, childHandles);
         this.raise(node, viewName);
@@ -11711,10 +12657,12 @@ export class Engine {
         // is here only because something beneath it moved has the props it had.
         const propsMoved = node.propsDirty || styleChanged;
         const props = propsMoved ? this.mergeProps(node, viewName) : previous.props;
-        const propsPayload = propsMoved ? this.propsPayload(node, previous.props, props) : null;
+        const payload = propsMoved ? this.propsPayload(node, previous.props, props) : null;
         if (this.asked & LAYOUTS)
-            this.noteHow(node, propsPayload);
+            this.noteHow(node, payload);
         const childrenChanged = this.childrenMoved(node, childHandles, previous.childHandles);
+        // What native was given to paint is left out of the clone: see `paintNatively`.
+        const propsPayload = this.paintNatively(node, viewName, props, payload, childrenChanged);
         if (this.notesMoves)
             this.noteClone(node, propsPayload, childrenChanged, childHandles, previous);
         let handle = previous.handle;
@@ -11820,7 +12768,7 @@ export class Engine {
         const payload = diffProps(previous, props);
         if (payload)
             borderColoursAgain(payload, props);
-        if (payload && node.owned)
+        if (payload && node.owned && !node.paint)
             this.setOwned(node, payload, props);
         // A frame of a transform is committed with no layout settled after it: see `composeSticky`.
         if (payload && node.sticky?.drive && 'transform' in payload) {
@@ -12167,6 +13115,9 @@ export class Engine {
      * when it is shown again, as Modal.js creates it afresh. Committed again, it ignores every touch.
      */
     withheld(child) {
+        // Moved with a finger on it, it is committed where it was: see `heldHandles`.
+        if (this.heldMoves.size && this.heldElsewhere(child))
+            return true;
         // A box drawn and then hidden is `display: none`, as any element is.
         if (this.generated !== null && isGenerated(child.tag)) {
             return this.undrawn(child) || this.undisplayed(child);
@@ -12577,6 +13528,24 @@ export class Engine {
         console.warn(`[angular-native] ${prop}: ${value}, in a style on <${on}>, is no value ${prop} takes:` +
             ` ${why}. The declaration is dropped, as a browser drops it.`);
     }
+    platformColours = new Set();
+    /**
+     * Said once per token and props: a colour worked out of a token that holds a platform colour,
+     * which has no channels to work with, is dropped. The compiler says so where one sheet holds
+     * both; a token set in one sheet, or bound, and read in another is only known here.
+     */
+    reportPlatformColour(name, props, on) {
+        const report = `${name} ${props.join(',')} ${on ?? ''}`;
+        if (this.platformColours.has(report))
+            return;
+        this.platformColours.add(report);
+        const where = on === undefined ? props.join(', ') : `${props.join(', ')}, bound on <${on}>,`;
+        console.warn(`[angular-native] ${where} works a colour out of var(${name}), which holds a platform` +
+            ` colour (platform-color() or a system colour). The platform resolves that by name and` +
+            ` it has no channels to mix, fade or draw in a gradient or a shadow, so the declaration` +
+            ` is dropped. Use var(${name}) on its own, where a colour property takes it whole, or a` +
+            ` colour written out.`);
+    }
     unreadDisplays = new Set();
     /**
      * Said once per token and value: the compiler refuses `display: grid` written out, but a token
@@ -12772,6 +13741,9 @@ export class Engine {
      * overlay would believe it and place itself in the corner.
      */
     measure(node, into) {
+        // Where it is drawn takes in every transform above it, which the shadow nodes must have.
+        if (this.paintedNodes.size)
+            this.commitPainted();
         const handle = node.committed?.handle;
         if (handle)
             this.measureHandle(handle, into);
@@ -12827,6 +13799,15 @@ export class Engine {
             this.dropFocus();
         return this.focusedNode;
     }
+    get focusedField() {
+        const node = this.focused;
+        return node && TEXT_INPUTS.has(viewNameOf(node)) ? node : null;
+    }
+    blurFocused() {
+        const field = this.focusedField;
+        if (field)
+            this.dispatchCommand(field, 'blur');
+    }
     /** Whether a node is still part of the tree, rather than in a subtree that was removed. */
     isAttached(node) {
         let current = node;
@@ -12841,6 +13822,17 @@ export class Engine {
     resolveAsset(value) {
         return this.resolveAssetSource(value);
     }
+    /**
+     * A drawing's fill that is no colour the host reads, `contrast` as Highcharts writes one for a
+     * label, as the text's colour: native's own black is lost on a dark shape, and the text's is
+     * seen. A stroke native cannot read is left to be dropped, as a browser drops it.
+     */
+    fillUnread(merged) {
+        const fill = merged['fill'];
+        if (typeof fill !== 'string' || fill === 'none' || this.color(fill) != null)
+            return;
+        merged['fill'] = CURRENT_BRUSH;
+    }
     /** A colour prop as `processed` sends it: one dropped as unreadable is null on an update. */
     colourProp(key, value, update) {
         const painted = this.painted(key, value);
@@ -12852,6 +13844,8 @@ export class Engine {
      * reads no colour in no paint of the shape's own.
      */
     painted(key, value) {
+        if (COLOR_LIST_PROPS.has(key))
+            return this.processColorList(value);
         if (!BRUSH_PROPS.has(key))
             return this.color(value);
         // Already a brush, as the icon wrote it: only one the cascade settled is still text. An
@@ -12893,8 +13887,13 @@ export class Engine {
             path.push(current);
         return path.reverse();
     }
-    negotiate(target, event, phase) {
-        const path = this.pathTo(target);
+    /**
+     * Who asks for the touch: the nodes from the root down to `from`, which is the target, or for a
+     * move while a node holds the touch, the lowest node above both it and the target, as React's
+     * responder plugin walks. A node inside the responder never takes the touch back from it.
+     */
+    negotiate(target, event, phase, from = target) {
+        const path = this.pathTo(from);
         const capture = `on${phase}ShouldSetResponderCapture`;
         const bubble = `on${phase}ShouldSetResponder`;
         // Capture runs root -> target, so an ancestor can claim before its children see it.
@@ -12965,22 +13964,29 @@ export class Engine {
                 this.grant(elected, event);
             return;
         }
-        if (type === TOUCH_MOVE) {
-            if (this.currentResponder) {
-                this.responders.get(this.currentResponder)?.onResponderMove?.(event);
-            }
-            else {
-                const elected = this.negotiate(target, event, 'Move');
-                if (elected)
-                    this.grant(elected, event);
-            }
-            return;
-        }
-        if (type === TOUCH_END)
+        if (type === TOUCH_MOVE)
+            this.moveResponder(target, event);
+        else if (type === TOUCH_END)
             this.release(event, false);
         else if (type === TOUCH_CANCEL)
             this.release(event, true);
     }
+    /**
+     * Asked on every move, not only while nobody holds the touch: a scroll view or a list row's
+     * swipe actions takes a drag from a pressable inside it this way. The responder answering for
+     * itself keeps the touch, as in React. The move then goes to whoever holds the touch after the
+     * asking, the new responder included.
+     */
+    moveResponder(target, event) {
+        const holder = this.currentResponder;
+        const from = holder ? commonAncestor(holder, target) : target;
+        const elected = from ? this.negotiate(target, event, 'Move', from) : null;
+        if (elected && elected !== holder)
+            this.grant(elected, event);
+        if (this.currentResponder) {
+            this.responders.get(this.currentResponder)?.onResponderMove?.(event);
+        }
+    }
     // --- events -----------------------------------------------------------
     registerEventHandler() {
         if (this.eventsRegistered || !this.fabric.registerEventHandler)
@@ -13153,10 +14159,16 @@ export class Engine {
      * Stop every scroll view a node is in from scrolling, until the touch ends: one held off hands
      * the drag to the one around it. 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
-     * each is told not to scroll.
+     * each is told not to scroll. The scroll views are the ones native has the node's view in,
+     * which is where the finger is: an element moved with a finger on it stays there until the
+     * finger lifts (see `holdMove`), and CDK's drag and drop moves the item it drags to the body in
+     * the move whose default it prevents.
      */
     holdScroll(node) {
-        for (let up = node.parent; up; up = up.parent) {
+        // Each once: a view's parent native has it in and one it is in since are both followed.
+        const seen = new Set();
+        for (let up = drawnIn(node); up && !seen.has(up); up = drawnIn(up)) {
+            seen.add(up);
             if (up.nodeKind !== 'element' || !SCROLL_VIEWS.has(committedViewName(up)))
                 continue;
             this.scrollHeld.add(up);