@ng-native/fabric 0.18.1 → 0.19.0

package/dist/engine.d.ts

@@ -228,12 +228,8 @@ export interface EngineNode extends HostNode {
     nodeText: string;
     childList: EngineNode[];
     parent: EngineNode | null;
-    /**
-     * A child of this node that holds what is put in it: `appendChild` and `insertBefore` on this
-     * node put the child there instead, so a component's template lands inside a view its owner
-     * placed in the host element. Only the view itself goes in this node.
-     */
-    contentView?: EngineNode;
+    /** Set by `Engine.wrapChildren`: the view this node's children are committed in. */
+    wrapper?: Wrapper;
     listeners: Map<string, Set<(event: unknown) => void>> | null;
     /** CSS classes on this node, for selector matching. */
     classes: Set<string> | null;
@@ -311,11 +307,11 @@ export interface EngineNode extends HostNode {
     scrollsOverflow?: true;
     /** Set while this element is one: see `Engine.settleScrolling`. */
     scrollView?: true;
-    /** The view a scrolling element's children are in, as it was last committed. */
-    inside?: {
-        handle: FabricNode;
-        childHandles: FabricNode[];
-    };
+    /**
+     * The view a scrolling element's children are in, or a wrapped one's (`wrapper`), as it was
+     * last committed: a wrapper's with the props it was committed with.
+     */
+    inside?: Inside;
     /** Set while `settleLine` has given an always-inline element a line for the boxes it holds. */
     lined?: true;
     /** Set while an always-inline element is a flex box or a grid by its own style. */
@@ -545,6 +541,21 @@ export declare function markPage(node: EngineNode): void;
  * and its `overflow` is layout alone.
  */
 export declare function scrollsOverflow(node: EngineNode): void;
+/**
+ * A view the engine commits an element's children in, which is no node of the tree: see
+ * `Engine.wrapChildren`.
+ */
+export interface Wrapper {
+    readonly viewName: string;
+    readonly props: Readonly<Record<string, unknown>>;
+}
+/** The view an element's children are committed in, as `inside` keeps it. */
+interface Inside {
+    handle: FabricNode;
+    childHandles: FabricNode[];
+    /** A wrapper's props, as it was committed with them. */
+    props?: Record<string, unknown>;
+}
 /**
  * Mark an element as the host of a component. The platform adapter calls this from
  * `RendererFactory2.createRenderer`, which Angular calls once for every component it mounts,
@@ -1172,12 +1183,30 @@ export declare class Engine implements HostEngine {
      * keyboard's top edge, for a field the keyboard would otherwise hide.
      *
      * Measured in the window, all of it, so the scroll view's offset needs no tracking: it is how
-     * far its content's top edge is above its own.
+     * far its content's top edge is above its own. In a sheet on iOS the window is the sheet's: see
+     * `sheetTop`.
+     *
+     * A scroll view under a navigation bar rests scrolled above zero, by the inset the bar adds, and
+     * is not scrolled up past where it rests, nor past zero from below it: how far above zero it can
+     * go is known only while it is there.
      */
     reveal(node: EngineNode, options?: {
         visibleBottom?: number;
         margin?: number;
     }): void;
+    /**
+     * How far down the window the iOS sheet a node is presented in starts, where that is known, so
+     * the keyboard's `visibleBottom` can be brought into the sheet. React Native measures a view in a
+     * presented sheet from the sheet's own top: the sheet's place on the screen is UIKit's, and the
+     * shadow tree has the sheet at the top of the window.
+     *
+     * A sheet as wide as the window is attached to its bottom edge, so it starts the window's height
+     * less its own down. One that is narrower (an iPad's form sheet, or one floating at a partial
+     * detent) could be anywhere, and one no taller than the room above the keyboard may have risen
+     * over it, so for those nothing is known and nothing is taken off. On Android the sheet is laid
+     * out in the shadow tree, so nothing is either.
+     */
+    private sheetTop;
     /**
      * The view a scroll view's content is in: an element that scrolls its overflow holds its
      * children in one of its own, and any other scroll view's first child is it.
@@ -1344,8 +1373,8 @@ export declare class Engine implements HostEngine {
     /** Angular's `@if`/`@for`/`ViewContainerRef` markers. Ordered, never committed. */
     createAnchor(): EngineNode;
     createText(value: string): EngineNode;
-    appendChild(into: EngineNode, child: EngineNode): void;
-    insertBefore(into: EngineNode, child: EngineNode, ref: EngineNode | null): void;
+    appendChild(parent: EngineNode, child: EngineNode): void;
+    insertBefore(parent: EngineNode, child: EngineNode, ref: EngineNode | null): void;
     /**
      * A node coming under a parent other than the one it is under, or under any once it has been
      * taken out: what is over it may be other than it was styled under. The resolver sees that for
@@ -1354,6 +1383,19 @@ export declare class Engine implements HostEngine {
      */
     private markAdopted;
     removeChild(parent: EngineNode | null, child: EngineNode): void;
+    /**
+     * Commit an element's children inside a view of the engine's own, `wrapper.viewName` with
+     * `wrapper.props`, and the element's own view around it; null commits them in the element
+     * again. For a native view that wants its content in a child of a kind it names, where the
+     * element is a component's host: the tree keeps the children in the element, so the
+     * component's `:host` rules, a `:host >` selector and what is inherited reach them as written,
+     * and how the element places its children (`flex-direction`, `justify-content`, `align-items`,
+     * `gap`) is committed on the wrapper, which holds them. What is hoisted into the element and
+     * its fixed boxes stay its own, after the wrapper. Called again with another wrapper's props,
+     * the wrapper is cloned with them; another view name makes the element and what it holds again,
+     * as native gives a view one parent for as long as it lives.
+     */
+    wrapChildren(node: EngineNode, wrapper: Wrapper | null): void;
     /**
      * A child came or went under a view that takes its text as a prop: that prop changed. A span
      * changes it too, by keeping or dropping the space before it.
@@ -3096,6 +3138,18 @@ export declare class Engine implements HostEngine {
      * for a content that was cloned.
      */
     private reconcileScroller;
+    /**
+     * `reconcile` for an element whose children are in a wrapper (`wrapChildren`): its own view,
+     * holding the wrapper and then `beside`, and the wrapper holding its children. The wrapper is
+     * created with the element and cloned for what changed of its own, as a scroll view's content
+     * is.
+     */
+    private reconcileWrapped;
+    /** `noteClone` for a wrapped element, whose children are counted in its wrapper. */
+    private noteWrappedClone;
+    /** A wrapper cloned for what changed of its props, and for children that moved. */
+    private clonedWrapper;
+    private createWrapped;
     /** A view cloned for the props and the children that changed, or itself where neither did. */
     private clonedFor;
     private createScroller;
@@ -3233,7 +3287,8 @@ export declare class Engine implements HostEngine {
     /**
      * `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
-     * keeps for hoisted nodes that are gone.
+     * keeps for hoisted nodes that are gone. A wrapped node's hoisted nodes and kept views go in
+     * `beside`, beside its wrapper and not in it, in the same order.
      */
     private reconcileHoistTarget;
     /**
@@ -3531,8 +3586,8 @@ export declare class Engine implements HostEngine {
      * `unstable_*EventPriority` constants) is read into the facade but not acted on. Angular's
      * zoneless scheduler already flushes on a microtask, which is soon enough for taps. It stops
      * being soon enough for a controlled TextInput, where the echo has to beat the next
-     * keystroke. `mostRecentEventCount` covers that today by letting native reject a stale write;
-     * a synchronous flush for discrete priority is the fix if it ever stops being enough.
+     * keystroke. The text input's event count covers that today by letting native reject a stale
+     * write; a synchronous flush for discrete priority is the fix if it ever stops being enough.
      *
      * **Nothing thrown here may escape.** Fabric calls this synchronously from C++
      * (`UIManagerBinding::dispatchEventToJS`), often from inside a mounting transaction, and a throw

package/dist/engine.js

@@ -341,6 +341,8 @@ const ENGINE_PROPS = new Set([
     'disabled',
     'intrinsicSize',
     'styleOverride',
+    // A text field's latest event count, committed as `mostRecentEventCount`: see `echoedEventCount`.
+    'latestEventCount',
     ...Object.values(EVENT_OPT_IN_PROPS),
     ...Object.values(VIEW_EVENT_OPT_IN_PROPS).flatMap((props) => Object.values(props)),
 ]);
@@ -459,15 +461,33 @@ export function markPage(node) {
 export function scrollsOverflow(node) {
     node.scrollsOverflow = true;
 }
+/** How a flex container places its children, which the view they are in takes. */
+const CHILD_PLACING_KEYS = [
+    ...['flexDirection', 'flexWrap', 'alignItems', 'alignContent', 'justifyContent'],
+    ...['gap', 'rowGap', 'columnGap'],
+];
 /** What a scrolling element lays out what it holds by, which its content view takes. */
 const CONTENT_KEYS = new Set([
     ...['padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
     ...['paddingHorizontal', 'paddingVertical', 'paddingStart', 'paddingEnd'],
     ...['paddingInline', 'paddingBlock', 'paddingInlineStart', 'paddingInlineEnd'],
     ...['paddingBlockStart', 'paddingBlockEnd'],
-    ...['flexDirection', 'flexWrap', 'alignItems', 'alignContent', 'justifyContent'],
-    ...['gap', 'rowGap', 'columnGap'],
+    ...CHILD_PLACING_KEYS,
 ]);
+const CHILD_PLACING = new Set(CHILD_PLACING_KEYS);
+/**
+ * A wrapped element's props split between its two views: the box it is, on its own view, and how
+ * its children are placed, on the wrapper, after the wrapper's own props. Its padding stays on
+ * the element, outside what the wrapper insets by.
+ */
+function splitWrapped(props, own = {}) {
+    const box = {};
+    const content = { ...own };
+    for (const [key, value] of Object.entries(props)) {
+        (CHILD_PLACING.has(key) ? content : box)[key] = value;
+    }
+    return { box, content };
+}
 /** A scrolling element's props split between its two views: see `scrollerProps`. */
 function splitScroller(props) {
     const box = {};
@@ -3442,6 +3462,65 @@ function alignMultiline(viewName, props) {
         return;
     props['textAlignVertical'] ??= 'top';
 }
+/** The props React Native builds a text field's text attributes from, as `BaseTextProps` reads them. */
+const TEXT_ATTRIBUTES = [
+    'color',
+    'backgroundColor',
+    'opacity',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'fontVariant',
+    'fontVariationSettings',
+    'allowFontScaling',
+    'maxFontSizeMultiplier',
+    'dynamicTypeRamp',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'writingDirection',
+    'direction',
+    'lineBreakStrategyIOS',
+    'lineBreakModeIOS',
+    'textDecorationLine',
+    'textDecorationColor',
+    'textDecorationStyle',
+    'textShadowColor',
+    'textShadowOffset',
+    'textShadowRadius',
+    'textTransform',
+];
+/**
+ * The prop a text field that echoes its text puts its latest event count in, for
+ * `echoedEventCount` to commit as `mostRecentEventCount`. It never reaches native.
+ */
+const LATEST_EVENT_COUNT = 'latestEventCount';
+/**
+ * The event count a text field that echoes its text is committed with: the latest on Android, and
+ * on iOS 0, the count native starts at, but for a commit that changes a multiline field's text
+ * style, which carries the latest.
+ *
+ * iOS takes the `text` prop only with the count it holds, and then replaces the field's text unless
+ * the two compare equal, attributes and all. UIKit gives an empty field's first typed text a
+ * paragraph style whose line break strategy differs from the one RN compares it with, so an echo
+ * of that very text replaces it, and the keystrokes queued behind the replace are lost. Text from
+ * code goes as `setTextAndSelection` instead, which carries the count. A restyle still needs the
+ * replace on a multiline field: a single-line one restyles its text from its new default
+ * attributes, a multiline one only takes them for what is typed next.
+ *
+ * A field that sets `mostRecentEventCount` itself, and never echoes, is left as it is.
+ */
+function echoedEventCount(viewName, props, previous) {
+    const latest = props[LATEST_EVENT_COUNT];
+    if (latest === undefined)
+        return;
+    delete props[LATEST_EVENT_COUNT];
+    const restyled = props['multiline'] === true &&
+        previous !== undefined &&
+        TEXT_ATTRIBUTES.some((key) => !Object.is(previous[key], props[key]));
+    props['mostRecentEventCount'] = viewName !== 'TextInput' || restyled ? latest : 0;
+}
 /** The props of a run of text that change how tall its line is drawn. */
 const SIZES_A_RUN = new Set(['style', 'allowFontScaling', 'maxFontSizeMultiplier']);
 /**
@@ -3631,6 +3710,12 @@ function seenByCss(merged) {
 /** A screen of a native stack, which is what the swipe back is a gesture of. */
 const STACK_SCREEN = 'RNSScreen';
 const FIXED_BOUNDARIES = new Set([MODAL_HOST, STACK_SCREEN, 'RNSFullWindowOverlay']);
+/**
+ * The presentations that can leave a sheet short of the top of the screen on iOS: a screen's
+ * `stackPresentation` (`modal` is a page sheet from iOS 13) or a modal host's `presentationStyle`.
+ * The others cover the screen, or what they are presented over.
+ */
+const SHEETS = new Set(['modal', 'formSheet', 'pageSheet']);
 /** 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'];
@@ -4726,6 +4811,7 @@ class RetainedNode {
     inlineInherits = undefined;
     line = undefined;
     inside = undefined;
+    wrapper = undefined;
     transitions;
     playing;
     scrolled;
@@ -4945,7 +5031,7 @@ const ENGINE_NODE_FIELDS = {
     structureDirty: true,
     subtreeDirty: true,
     inside: true,
-    contentView: true,
+    wrapper: true,
     scrollsOverflow: true,
     engine: true,
 };
@@ -6011,7 +6097,12 @@ export class Engine {
      * keyboard's top edge, for a field the keyboard would otherwise hide.
      *
      * Measured in the window, all of it, so the scroll view's offset needs no tracking: it is how
-     * far its content's top edge is above its own.
+     * far its content's top edge is above its own. In a sheet on iOS the window is the sheet's: see
+     * `sheetTop`.
+     *
+     * A scroll view under a navigation bar rests scrolled above zero, by the inset the bar adds, and
+     * is not scrolled up past where it rests, nor past zero from below it: how far above zero it can
+     * go is known only while it is there.
      */
     reveal(node, options = {}) {
         const scroll = scrollingDown(node);
@@ -6019,23 +6110,68 @@ export class Engine {
         if (!scroll || !content)
             return;
         const margin = options.margin ?? 16;
+        const { visibleBottom } = options;
+        const covered = visibleBottom === undefined ? Infinity : visibleBottom - this.sheetTop(node, visibleBottom);
         this.measure(scroll, (view) => {
             this.measureHandle(content, (inner) => {
                 this.measure(node, (target) => {
                     const offset = view.y - inner.y;
                     const top = view.y + margin;
-                    const bottom = Math.min(view.y + view.height, options.visibleBottom ?? Infinity) - margin;
+                    const bottom = Math.min(view.y + view.height, covered) - margin;
                     let by = 0;
                     if (target.y + target.height > bottom)
                         by = target.y + target.height - bottom;
                     else if (target.y < top)
                         by = target.y - top;
                     if (by !== 0)
-                        this.dispatchCommand(scroll, 'scrollTo', [0, Math.max(0, offset + by), true]);
+                        this.dispatchCommand(scroll, 'scrollTo', [
+                            0,
+                            Math.max(Math.min(0, offset), offset + by),
+                            true,
+                        ]);
                 });
             });
         });
     }
+    /**
+     * How far down the window the iOS sheet a node is presented in starts, where that is known, so
+     * the keyboard's `visibleBottom` can be brought into the sheet. React Native measures a view in a
+     * presented sheet from the sheet's own top: the sheet's place on the screen is UIKit's, and the
+     * shadow tree has the sheet at the top of the window.
+     *
+     * A sheet as wide as the window is attached to its bottom edge, so it starts the window's height
+     * less its own down. One that is narrower (an iPad's form sheet, or one floating at a partial
+     * detent) could be anywhere, and one no taller than the room above the keyboard may have risen
+     * over it, so for those nothing is known and nothing is taken off. On Android the sheet is laid
+     * out in the shadow tree, so nothing is either.
+     */
+    sheetTop(node, keyboardTop) {
+        if (platformOS !== 'ios')
+            return 0;
+        for (let up = node.parent; up; up = up.parent) {
+            if (up.nodeKind !== 'element')
+                continue;
+            const viewName = viewNameOf(up);
+            // React Native's own modal measures what it holds from its own top, wherever it is written.
+            const modal = viewName === MODAL_HOST;
+            const presented = modal
+                ? up.props['presentationStyle']
+                : viewName === STACK_SCREEN && up.props['stackPresentation'];
+            // A screen pushed in a stack is measured in whatever it is pushed in.
+            if (!modal && (!presented || presented === 'push'))
+                continue;
+            if (!SHEETS.has(String(presented)))
+                return 0;
+            let top = 0;
+            this.measure(up, (sheet) => {
+                if (sheet.width < this.viewportSize.width || sheet.height <= keyboardTop)
+                    return;
+                top = Math.max(0, this.viewportSize.height - (modal ? 0 : sheet.y) - sheet.height);
+            });
+            return top;
+        }
+        return 0;
+    }
     /**
      * The view a scroll view's content is in: an element that scrolls its overflow holds its
      * children in one of its own, and any other scroll view's first child is it.
@@ -6496,8 +6632,7 @@ export class Engine {
         node.nodeText = value;
         return node;
     }
-    appendChild(into, child) {
-        const parent = into.contentView && into.contentView !== child ? into.contentView : into;
+    appendChild(parent, child) {
         this.markAdopted(child, parent);
         this.detach(child);
         this.markReturned(child);
@@ -6512,8 +6647,7 @@ export class Engine {
         this.markStructure(parent, child, parent.childList.length - 1);
         this.markTextContent(parent, child);
     }
-    insertBefore(into, child, ref) {
-        const parent = into.contentView && into.contentView !== child ? into.contentView : into;
+    insertBefore(parent, child, ref) {
         this.markAdopted(child, parent);
         this.detach(child);
         this.markReturned(child);
@@ -6557,6 +6691,25 @@ export class Engine {
         this.markStructure(target, child, at);
         this.markTextContent(target, child);
     }
+    /**
+     * Commit an element's children inside a view of the engine's own, `wrapper.viewName` with
+     * `wrapper.props`, and the element's own view around it; null commits them in the element
+     * again. For a native view that wants its content in a child of a kind it names, where the
+     * element is a component's host: the tree keeps the children in the element, so the
+     * component's `:host` rules, a `:host >` selector and what is inherited reach them as written,
+     * and how the element places its children (`flex-direction`, `justify-content`, `align-items`,
+     * `gap`) is committed on the wrapper, which holds them. What is hoisted into the element and
+     * its fixed boxes stay its own, after the wrapper. Called again with another wrapper's props,
+     * the wrapper is cloned with them; another view name makes the element and what it holds again,
+     * as native gives a view one parent for as long as it lives.
+     */
+    wrapChildren(node, wrapper) {
+        const was = node.wrapper;
+        node.wrapper = wrapper ?? undefined;
+        if (was?.viewName !== wrapper?.viewName && node.committed)
+            this.forgetCommitted(node);
+        this.markProps(node, false);
+    }
     /**
      * A child came or went under a view that takes its text as a prop: that prop changed. A span
      * changes it too, by keeping or dropping the space before it.
@@ -10323,6 +10476,8 @@ export class Engine {
         // 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));
+        if (field)
+            echoedEventCount(viewName, merged, node.committed?.props);
         // After a transition, which eases the basis as the basis it was written as.
         basisAsSize(node, merged);
         // Each asked of the key it reads first, here and in `engineLayout`: it is asked of every node
@@ -12636,15 +12791,19 @@ export class Engine {
         this.forgetRenamed(node, viewName);
         this.noteBaselineFields(node);
         this.freshBaselines(node);
-        const childHandles = this.reconcileChildren(node, viewName, style);
+        // A wrapped node's own views beside the wrapper: what is hoisted into it, and its fixed boxes.
+        const beside = node.wrapper && [];
+        const childHandles = this.reconcileChildren(node, viewName, style, beside);
         if (this.heldMoves.size)
             this.heldHandles(node, childHandles);
         if (this.fixedIn.size)
-            this.fixedHandles(node, childHandles);
+            this.fixedHandles(node, beside ?? childHandles);
         this.raise(node, viewName);
         noteTouches(node, style);
         if (scroller)
             return this.reconcileScroller(node, viewName, childHandles, styleChanged);
+        if (beside)
+            return this.reconcileWrapped(node, viewName, childHandles, beside, styleChanged);
         const previous = node.committed;
         this.notePresented(node, viewName);
         if (!previous)
@@ -12744,6 +12903,62 @@ export class Engine {
         this.clearFlags(node);
         return handle;
     }
+    /**
+     * `reconcile` for an element whose children are in a wrapper (`wrapChildren`): its own view,
+     * holding the wrapper and then `beside`, and the wrapper holding its children. The wrapper is
+     * created with the element and cloned for what changed of its own, as a scroll view's content
+     * is.
+     */
+    reconcileWrapped(node, viewName, childHandles, beside, styleChanged) {
+        const previous = node.committed;
+        const held = node.inside;
+        if (!previous || !held?.props)
+            return this.createWrapped(node, viewName, childHandles, beside);
+        const propsMoved = node.propsDirty || styleChanged;
+        const props = propsMoved ? this.mergeProps(node, viewName) : previous.props;
+        const payload = propsMoved ? this.propsPayload(node, previous.props, props) : null;
+        if (this.asked & LAYOUTS)
+            this.noteHow(node, payload);
+        const moved = this.childrenMoved(node, childHandles, held.childHandles);
+        this.noteWrappedClone(node, payload, moved, childHandles, previous, held);
+        const content = propsMoved ? splitWrapped(props, node.wrapper.props).content : held.props;
+        const inside = this.clonedWrapper(held, content, moved ? childHandles : null);
+        const around = [inside, ...beside];
+        const aroundMoved = !sameHandles(around, previous.childHandles);
+        const box = payload && someProps(splitWrapped(payload).box);
+        const boxPayload = this.paintNatively(node, viewName, props, box, aroundMoved);
+        const handle = this.clonedFor(previous.handle, boxPayload, aroundMoved ? around : null);
+        node.committed = { handle, tag: previous.tag, props, childHandles: around, viewName };
+        node.inside = { handle: inside, childHandles, props: content };
+        this.clearFlags(node);
+        return handle;
+    }
+    /** `noteClone` for a wrapped element, whose children are counted in its wrapper. */
+    noteWrappedClone(node, payload, moved, childHandles, previous, held) {
+        if (!this.notesMoves)
+            return;
+        const before = { ...previous, childHandles: held.childHandles };
+        this.noteClone(node, payload, moved, childHandles, before);
+    }
+    /** A wrapper cloned for what changed of its props, and for children that moved. */
+    clonedWrapper(held, props, children) {
+        const payload = props === held.props ? null : diffProps(held.props, props);
+        return this.clonedFor(held.handle, payload, children);
+    }
+    createWrapped(node, viewName, childHandles, beside) {
+        const wrapper = node.wrapper;
+        const props = this.mergeProps(node, viewName);
+        const { box, content } = splitWrapped(props, wrapper.props);
+        // A touch on the wrapper lands on the element, as one on a scroll view's content does.
+        const inside = this.fabric.createNode(nextTag(), wrapper.viewName, this.rootTag, this.processed(content, false), node);
+        this.stats.createdNodes++;
+        for (const child of childHandles)
+            this.fabric.appendChild(inside, child);
+        const handle = this.create(node, viewName, box, [inside, ...beside]);
+        node.committed = { ...node.committed, props };
+        node.inside = { handle: inside, childHandles, props: content };
+        return handle;
+    }
     /** A view cloned for the props and the children that changed, or itself where neither did. */
     clonedFor(handle, props, children) {
         if (!props && !children)
@@ -12803,12 +13018,12 @@ export class Engine {
     // Exempt from the complexity limit as `mergeProps` is: run for every node with children, where
     // the loop in a function of its own was a call more a node in `pnpm bench`.
     // eslint-disable-next-line complexity
-    reconcileChildren(node, viewName, style) {
+    reconcileChildren(node, viewName, style, beside) {
         const context = style?.context;
         if (HOIST_ONLY.has(node.tag))
             return this.reconcileOnlyHoisted(node);
         if (HOIST_TARGETS.has(node.tag))
-            return this.reconcileHoistTarget(node, context);
+            return this.reconcileHoistTarget(node, context, beside);
         if (node.flow !== undefined)
             return this.reconcileInFlow(node, node.flow, viewName, context);
         // A node with no flow of its own holds nothing in a line: each child is its own view under it.
@@ -13206,10 +13421,12 @@ export class Engine {
     /**
      * `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
-     * keeps for hoisted nodes that are gone.
+     * keeps for hoisted nodes that are gone. A wrapped node's hoisted nodes and kept views go in
+     * `beside`, beside its wrapper and not in it, in the same order.
      */
-    reconcileHoistTarget(node, context) {
+    reconcileHoistTarget(node, context, beside) {
         const handles = [];
+        const landing = beside ?? handles;
         const hoisted = this.hoistedInto(node);
         const landed = new Set();
         // One written directly in the node goes after its siblings: a page writes its header first,
@@ -13227,13 +13444,13 @@ export class Engine {
             const moved = hoisted?.get(child);
             for (const written of moved ?? []) {
                 if (!this.undisplayedUnder(node, written))
-                    handles.push(this.land(node, written, landed));
+                    landing.push(this.land(node, written, landed));
             }
         }
         for (const child of direct)
-            handles.push(this.land(node, child, landed));
+            landing.push(this.land(node, child, landed));
         if (node.kept)
-            this.standIn(node, landed, handles);
+            this.standIn(node, landed, landing);
         return handles;
     }
     /**
@@ -14006,8 +14223,8 @@ export class Engine {
      * `unstable_*EventPriority` constants) is read into the facade but not acted on. Angular's
      * zoneless scheduler already flushes on a microtask, which is soon enough for taps. It stops
      * being soon enough for a controlled TextInput, where the echo has to beat the next
-     * keystroke. `mostRecentEventCount` covers that today by letting native reject a stale write;
-     * a synchronous flush for discrete priority is the fix if it ever stops being enough.
+     * keystroke. The text input's event count covers that today by letting native reject a stale
+     * write; a synchronous flush for discrete priority is the fix if it ever stops being enough.
      *
      * **Nothing thrown here may escape.** Fabric calls this synchronously from C++
      * (`UIManagerBinding::dispatchEventToJS`), often from inside a mounting transaction, and a throw