@ng-native/fabric 0.2.0 → 0.4.0

package/dist/engine.d.ts

@@ -7,8 +7,8 @@
  * because a persistent parent holds references to specific child handles. That bubble is
  * inherent and is what React's own Fabric renderer does.
  */
-import { type Conditions, type StyleCache, type StyleSheet, type TokenValue } from './css.ts';
-import { type AnimationSpec, type RunningAnimation, type Transition } from './transition.ts';
+import { type Conditions, type DeferredDeclaration, type StyleCache, type StyleSheet, type TokenValue } from './css.ts';
+import { type AnimationSpec, type Keyframe, type RunningAnimation, type Transition } from './transition.ts';
 import { type DrivenProperty, type EventFeed, type NativeAnimated, type ScrollAxis, type ScrollDrive, type ScrollRange, type StaticTransform } from './native-drive.ts';
 import type { DrivenChannels } from './scroll-animation.ts';
 export type FabricNode = {
@@ -19,12 +19,16 @@ import type { HostEngine, HostNode, Settling } from './host.ts';
 /** A node's scroll-driven animation: what it plays, what drives it, and the frame it commits. */
 interface ScrollAnimation {
     readonly spec: AnimationSpec;
+    /** The `@keyframes` it was laid out from, so a hot swap that edits them lays it out again. */
+    readonly frames: readonly Keyframe[];
     readonly tracks: ReadonlyMap<string, readonly {
         offset: number;
         value: unknown;
     }[]>;
     readonly resting: Record<string, unknown>;
     readonly first: Record<string, unknown>;
+    /** The colour the node inherits, which the tracks were built with, for frames that read it. */
+    readonly inherited: unknown;
     readonly source: EngineNode | null;
     readonly drive: {
         update(channels: DrivenChannels): void;
@@ -65,6 +69,17 @@ export interface FabricUIManager {
      */
     measureInWindow?(node: FabricNode, onSuccess: (x: number, y: number, width: number, height: number) => void): void;
 }
+/**
+ * RN's `directEventTypes`: delivered to the target only, never up the tree. Everything else
+ * bubbles, which matches RN's `bubblingEventTypes` for the touch and input events that matter.
+ * The web host's engine reads this set too, so both hosts deliver an event the same way.
+ *
+ * ponytail: a hand-kept set rather than real ViewConfigs. It is wrong only for a nested
+ * scroll view, where an ancestor listening for the same direct event would not fire (correct)
+ * but a third-party component's custom direct event would bubble (harmless in practice).
+ * Swap it for per-component ViewConfig metadata if that ever matters.
+ */
+export declare const DIRECT_EVENTS: ReadonlySet<string>;
 /**
  * What a listener receives. RN's synthetic event carries more, but `nativeEvent` is the part
  * every RN API is documented against, and `stopPropagation` is the part a nested control needs.
@@ -77,6 +92,11 @@ export interface FabricUIManager {
  */
 export interface NativeSyntheticEvent<T = unknown> {
     readonly nativeEvent: T;
+    /**
+     * The node the event happened on, which a listener further up can compare with its own: RN's
+     * `event.target`. Null where a host has no node to name.
+     */
+    readonly target?: unknown;
     stopPropagation(): void;
     isPropagationStopped(): boolean;
 }
@@ -87,8 +107,9 @@ export interface NativeSyntheticEvent<T = unknown> {
  */
 export declare class SyntheticEvent<T = unknown> implements NativeSyntheticEvent<T> {
     readonly nativeEvent: T;
+    readonly target: unknown;
     private stopped;
-    constructor(nativeEvent: T);
+    constructor(nativeEvent: T, target?: unknown);
     stopPropagation(): void;
     isPropagationStopped(): boolean;
 }
@@ -147,6 +168,8 @@ interface Committed {
     props: Record<string, unknown>;
     /** The child handles this node was committed with, in order. */
     childHandles: FabricNode[];
+    /** The native view it was created as, which a clone cannot change. */
+    viewName: string;
 }
 export interface EngineNode extends HostNode {
     readonly kind: NodeKind;
@@ -171,6 +194,27 @@ export interface EngineNode extends HostNode {
     styleCache: StyleCache | null;
     /** Set when something that could change what this node matches has changed. */
     styleDirty: boolean;
+    /** A family left out while it loads. See `loadingFamilies`. */
+    heldFamily?: string;
+    /** See `StyleTarget.inlineInherits`. */
+    inlineInherits?: boolean;
+    /** See `StyleTarget.boundStyle`: the declarations, and the same by the property each sets. */
+    boundStyle?: readonly DeferredDeclaration[] | null;
+    boundByProp?: Map<string, DeferredDeclaration>;
+    /**
+     * Whether this node, or one inside it, takes touches under a `pointer-events: none` it would
+     * otherwise inherit. Kept as each node is reconciled, children first. See `noteTouches`.
+     */
+    touchWithin?: boolean;
+    /**
+     * The paragraph the engine makes around a run of text written straight into a view. It is in no
+     * template and in no node's `children`: it holds the text, and commits where the text would.
+     */
+    box?: EngineNode;
+    /** A node the engine made, which no rule matches: it only inherits. */
+    anonymous?: true;
+    /** See `StyleTarget.styled`. */
+    styled?: true;
     /** `:focus`, from the native focus and blur events. */
     focused?: boolean;
     /** `:active`, set on the responder and every ancestor of it. */
@@ -203,6 +247,13 @@ export interface EngineNode extends HostNode {
         parts: readonly unknown[];
         value: unknown[];
     };
+    /** The commit that created this node's view, by its number: see `Engine.commitUnseen`. */
+    bornIn?: number;
+    /** The last bound `transform` string and the list it reads as, undefined where CSS cannot. */
+    boundTransform?: {
+        text: string;
+        list: unknown[] | undefined;
+    };
     /**
      * Set by the component that owns this element. A host primitive that reaches a commit without it
      * was written in a template that never imported the component, which is reported in dev.
@@ -214,6 +265,14 @@ export interface EngineNode extends HostNode {
      * knows. See `markComponentHost`.
      */
     componentHost?: true;
+    /** See `keepNativeView`. */
+    nativeView?: true;
+    /**
+     * Style weaker than every sheet, where no rule and no inline style says otherwise. What lets the
+     * root component's host fill the surface by default and still give way to its own `:host`. See
+     * `setDefaultStyle`.
+     */
+    defaultStyle?: Readonly<Record<string, unknown>>;
     /**
      * Hoisted nodes (`registerHoist`) inside this subtree while it is out of the tree, held here
      * rather than by the engine. See `Engine.releaseDetached`.
@@ -256,6 +315,12 @@ export declare function claimHost(node: HostNode): void;
  * with the host element in hand, whatever the component's selector.
  */
 export declare function markComponentHost(node: HostNode): void;
+/**
+ * Say that a component's host is the native view its element name is registered as: a typed
+ * wrapper for the view, where a component of the app's own with the same selector is a plain view.
+ * Called from the component's constructor. See `ViewNameOptions.yieldsToComponents`.
+ */
+export declare function keepNativeView(node: HostNode): void;
 /** Names Android registers differently. */
 export declare const ANDROID_VIEW_NAMES: Record<string, string>;
 export declare function nativePlatform(): string;
@@ -274,7 +339,23 @@ export declare function registerPlatformComponents(platform: string): void;
  * and skipping it is not cosmetic: `RNSScreenStackHeaderConfig` without its `position: absolute`
  * joins the screen's flex layout and pushes every page down by the height of the header.
  */
-export declare function registerViewName(elementName: string, viewName: string | PlatformViewName, defaultProps?: Record<string, unknown>): void;
+export declare function registerViewName(elementName: string, viewName: string | PlatformViewName, defaultProps?: Record<string, unknown>, options?: ViewNameOptions): void;
+/** What else a registered view needs the engine to know about it. */
+export interface ViewNameOptions {
+    /**
+     * The prop the view reads its text from, where it takes no children: SwiftUI's `Text` through
+     * `@expo/ui` reads `text`. The text written inside the element becomes that prop, as `<text>`
+     * takes its own content, and is not committed as children. An explicit prop wins over it.
+     */
+    readonly textContent?: string;
+    /**
+     * Whether the name gives way to a component of the app's own with the same selector, whose host
+     * is then a plain view. For a set of views registered under a prefix an app may also use for
+     * its design system, as `@expo/ui`'s are under `ui-`. A component that is the view itself, a
+     * typed wrapper for it, says so with `keepNativeView`.
+     */
+    readonly yieldsToComponents?: boolean;
+}
 /**
  * A view whose native name differs by platform. Chosen when the view is looked up rather than when
  * it is registered, so it does not matter which ran first: an app's imports register the router's
@@ -292,6 +373,16 @@ export declare function onFontsRegistered(listener: (families: ReadonlySet<strin
  * `Engine.fontsRegistered`.
  */
 export declare function fontsRegistered(families: Iterable<string>): void;
+/** Faces a load is about to ask the platform for. See `loadingFamilies`. */
+export declare function fontsLoading(families: Iterable<string>): void;
+/** Hear about loads settling, until the returned function is called. */
+export declare function onFontsSettled(listener: (families: ReadonlySet<string>) => void): () => void;
+/**
+ * Faces a load asked for and has finished with, registered or not, before `fontsRegistered`.
+ * Text held back for one that no load still asks for is laid out with the name again: see
+ * `Engine.fontsSettled`.
+ */
+export declare function fontsSettled(families: Iterable<string>): void;
 /**
  * Commit every `elementName` as a direct child of its nearest `ancestorName`, wherever the
  * template put it, e.g. `registerHoist('native-header', 'screen')`.
@@ -329,9 +420,12 @@ interface KeptHoist {
 export interface ViewNameNode {
     readonly kind: string;
     readonly name: string;
-    readonly parent: {
-        readonly name: string;
-    } | null;
+    readonly parent: ViewNameNode | null;
+    /** Whether a component is mounted on it, and whether that component is the native view. */
+    readonly componentHost?: boolean;
+    readonly nativeView?: boolean;
+    /** What it holds, which decides whether one of HTML's text elements is text or a view. */
+    readonly children?: readonly ViewNameNode[];
 }
 /**
  * The native view a node commits as: `Paragraph` for a `<text>`, `VirtualText` for one nested in
@@ -416,7 +510,7 @@ export interface EngineStats {
     firstCommitMs: number;
     /** Worst commit *after* the mount. This is the number that matters for frame rate. */
     worstCommitMs: number;
-    /** Commits that blew a 60fps frame budget, excluding the mount. */
+    /** Commits that took longer than 8ms, a frame at 120Hz, excluding the mount. */
     slowCommits: number;
     /**
      * Worst `begin()`..`end()` span, excluding the mount. This brackets Angular's whole render
@@ -452,15 +546,19 @@ export declare class Engine implements HostEngine {
      * for them. Only those in the tree: see `releaseDetached`.
      */
     private readonly hoisted;
-    /** Whether a child list has lost a member since the last commit. See `releaseDetached`. */
-    private removedSinceCommit;
+    /** The nodes taken out of a child list since the last commit. See `releaseDetached`. */
+    private readonly removedSinceCommit;
     /**
-     * `@keyframes` by name, across every sheet seen so far. One registry rather than one per sheet,
+     * `@keyframes` by name, across every sheet registered. One registry rather than one per sheet,
      * because that is the scope CSS gives them: a name defined in a global stylesheet is usable
      * from a component's. The cost is that two components defining the same name collide, last one
      * in wins, exactly as two stylesheets in a document would.
      */
     private readonly keyframes;
+    /** Every sheet registered, in the order a document would hold them. See `sheetReplaced`. */
+    private readonly sheetOrder;
+    /** The `@keyframes` each playing animation was started from. See `startPlaying`. */
+    private readonly playedFrames;
     /** Element names already reported as unclaimed, so a list of a thousand rows reports once. */
     private readonly reported;
     private readonly processColor;
@@ -499,6 +597,18 @@ export declare class Engine implements HostEngine {
      * a caller owns the properties it names and nothing else. Each owner writes all of its own at
      * once - four insets together, never one - so nothing is left over from a previous rotation.
      */
+    /**
+     * Match `sheet` against every node from now on, after the global sheet the engine was made
+     * with, and restyle everything; false, and nothing done, when it already is. How a platform
+     * applies a component whose CSS is not scoped, such as Angular's `ViewEncapsulation.None`.
+     * `replacing` is a sheet added before that this one takes the place of, after a hot swap.
+     */
+    addGlobalSheet(sheet: StyleSheet, replacing?: StyleSheet): boolean;
+    /**
+     * Stop matching a sheet `addGlobalSheet` added, and restyle everything; false, and nothing
+     * done, when it is not one. A hot swap that leaves a None component no rules, or makes it scoped.
+     */
+    removeGlobalSheet(sheet: StyleSheet): boolean;
     updateTokens(next: Readonly<Record<string, TokenValue>>): void;
     /**
      * The system text size changed: measure every text and text input again, and commit.
@@ -533,6 +643,11 @@ export declare class Engine implements HostEngine {
      * text attributes change, which the same cap does. Android sets it only when `fontFamily` is in
      * the props it is sent, and the engine sends only what changed, so it is sent again once.
      */
+    /**
+     * Loads have settled for these families: every node held back for one, a span inside a
+     * paragraph included, is laid out with the name again, registered or not. See `loadingFamilies`.
+     */
+    fontsSettled(families: ReadonlySet<string>): void;
     fontsRegistered(families: ReadonlySet<string>): void;
     /**
      * Put the cursor in a text input; bring anything else on screen, in the scroll view it is in.
@@ -563,16 +678,40 @@ export declare class Engine implements HostEngine {
      * the wrong height until something else changed.
      */
     remeasure(node: EngineNode): void;
+    /**
+     * A node's component rules are its creating sheet's, so this matches it against `like`'s, or
+     * against the one it was created with once `like` is null.
+     */
+    adoptScope(node: EngineNode, like: EngineNode | null): void;
+    /** The sheet each node given another's scope was created with. */
+    private readonly ownSheets;
     /** The window's size, from the conditions media queries use. Zero until the platform says. */
     get viewport(): {
         readonly width: number;
         readonly height: number;
     };
     private viewportSize;
+    /** The system text size, from the conditions. See `Conditions.fontScale`. */
+    private fontScale;
+    private readonly viewportWatchers;
+    /** Calls `listener` after each change of conditions, which is when `viewport` can change. */
+    watchViewport(listener: () => void): () => void;
     updateConditions(next: Conditions): void;
     createElement(name: string, sheet?: StyleSheet | null): EngineNode;
     addClass(node: EngineNode, name: string): void;
     removeClass(node: EngineNode, name: string): void;
+    /**
+     * The sheet of the component `node` hosts, whose `:host` rules it matches. Set again when a hot
+     * swap replaces the component's sheet, which recreates the views inside but not the host, so the
+     * host is styled afresh here.
+     */
+    setHostSheet(node: EngineNode, sheet: StyleSheet | null): void;
+    /**
+     * Style for `node` that any matched rule or inline style overrides, as a browser's own default
+     * for an element is. `mount` gives the root component's host the surface's height this way, as
+     * the web's mount point has, unless the app's `:host` sizes it otherwise.
+     */
+    setDefaultStyle(node: EngineNode, style: Readonly<Record<string, unknown>> | undefined): void;
     /** `class="a b"` from a template. Replaces the set rather than adding to it. */
     setClasses(node: EngineNode, value: string): void;
     /** Angular's `@if`/`@for`/`ViewContainerRef` markers. Ordered, never committed. */
@@ -581,6 +720,11 @@ export declare class Engine implements HostEngine {
     appendChild(parent: EngineNode, child: EngineNode): void;
     insertBefore(parent: EngineNode, child: EngineNode, ref: EngineNode | null): void;
     removeChild(parent: EngineNode | null, child: EngineNode): 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.
+     */
+    private markTextContent;
     /** A subtree that went out of the tree is back in: its hoisted nodes commit again. */
     private wakeHoists;
     /**
@@ -598,11 +742,18 @@ export declare class Engine implements HostEngine {
      * whole. So a hoisted node moves to the root of the subtree it left with, which is garbage along
      * with it if the subtree never returns, and is handed back when it does. An animation on a node
      * out of the tree stops rather than running a frame loop for something nobody can see, and
-     * starts again if the node returns.
+     * starts again if the node returns. And a node out of the tree when the commit runs forgets its
+     * committed views, as a withheld modal does: the commit unmounts them, Fabric never re-enables an
+     * unmounted view's events (`EventEmitter::setEnabled`), and committed again they would ignore
+     * every touch. It comes back created afresh, as React creates an element it mounts again. One
+     * put back before the commit never left, and keeps its views.
      *
-     * Once per commit, and only after a removal: the walks are the depth of a handful of nodes.
+     * Once per commit, and only after a removal: the walks are the depth of a handful of nodes, and
+     * forgetting walks each subtree that left once.
      */
     private releaseDetached;
+    /** Forget the committed views of each node removed since the last commit that is still out. */
+    private forgetDetached;
     /** The root of the tree a node is in: the engine's root while it is attached. */
     private topOf;
     /**
@@ -614,6 +765,11 @@ export declare class Engine implements HostEngine {
     parentNode(node: EngineNode): EngineNode | null;
     nextSibling(node: EngineNode): EngineNode | null;
     setProp(node: EngineNode, key: string, value: unknown): void;
+    /**
+     * Whether a node's inline style can change what it or anything below it resolves to: it sets,
+     * or until now set, a property its children inherit.
+     */
+    private inlineReachesStyle;
     /** Whether a node's inline style sets `direction`, remembering that one has. */
     private noteInlineDirection;
     /**
@@ -625,6 +781,12 @@ export declare class Engine implements HostEngine {
      * has changed for the props diff to notice.
      */
     styleChanged(node: EngineNode): void;
+    /**
+     * A bound declaration, `[style.color]`, whose value may be a `var()`. One that is, is kept as a
+     * declaration the cascade settles with the node's tokens, as a rule's is, and true is answered:
+     * the text is no value to put in the node's style. Any other value forgets what was kept.
+     */
+    setBoundStyle(node: EngineNode, prop: string, value: unknown): boolean;
     /**
      * Set a custom property on a node, `--tint` from `[style.--tint]`, or remove it with `null`.
      *
@@ -637,6 +799,7 @@ export declare class Engine implements HostEngine {
     setEventListener(node: EngineNode, topLevelType: string, fn: (event: unknown) => void): () => void;
     private markProps;
     private markLaterSiblings;
+    /** `node`'s child list changed: `moved` came into it or went out of it. */
     private markStructure;
     /** Walk up until we hit a node already known to have a dirty subtree. */
     private markPath;
@@ -648,6 +811,28 @@ export declare class Engine implements HostEngine {
      * optimisation.
      */
     commit(): boolean;
+    /** The first commit whose new views have not been drawn yet, while `commitUnseen` runs. */
+    private unseen;
+    /**
+     * A commit for what changed in the same turn as earlier commits, before a frame was drawn.
+     * `since` is how many commits there had been before the first of them (`stats.commits`).
+     *
+     * A view those commits created has not been seen in the style they gave it, so what this one
+     * gives it is where it starts, and no transition runs toward it. That is what a browser
+     * does with a class added to an element in the turn that inserted it, and what `animate.enter`
+     * is built on: Angular adds the enter class after the render pass that created the element, and
+     * takes it off a frame later, which is the one change the transition is for.
+     */
+    commitUnseen(since: number): boolean;
+    /** Nodes that asked for `@keyframes` this commit had not met, by the name they asked for. */
+    private readonly awaitingKeyframes;
+    /**
+     * A sheet is registered when the first node it styles is committed, so a node committed before
+     * it can name keyframes that arrive later in the same commit. Those nodes play them from another
+     * commit straight away, as a browser applies keyframes however the sheets arrived; a name still
+     * unknown once the commit is over is reported.
+     */
+    private settleKeyframes;
     private readonly scrollDriver;
     /** Whether native can move a view by a scroll with no JavaScript in between. */
     get drivesScroll(): boolean;
@@ -682,9 +867,9 @@ export declare class Engine implements HostEngine {
     /** Anchors take part in sibling ordering but never reach Fabric. */
     private visibleChildren;
     /**
-     * Everything a node renders with, unprocessed. Precedence, weakest first: native defaults,
-     * matched CSS, explicit props, inline style, a component's `styleOverride`. Inline wins over CSS for the same reason it does
-     * on the web.
+     * Everything a node renders with, unprocessed. Precedence, weakest first: native defaults, the
+     * node's `defaultStyle`, matched CSS, explicit props, inline style, a component's
+     * `styleOverride`. Inline wins over CSS for the same reason it does on the web.
      *
      * Raw, because this is what the next commit diffs against. Colours and asset ids are converted
      * on the way out instead (`processed`), and only for the keys that changed: the converters
@@ -724,6 +909,23 @@ export declare class Engine implements HostEngine {
      * sheets are few.
      */
     private registerSheet;
+    /**
+     * A hot swap edited a component's sheet into `next`, or took it away with null: `sheet`'s
+     * `@keyframes` go, and `next`'s take its place among the others, as an edited stylesheet keeps
+     * its place in a document. A name another sheet also defines falls back to that one. Every
+     * animation re-resolves the name it plays, so one whose keyframes went stops, as in a browser.
+     * A `sheet` already gone, such as a global sheet removed, leaves `next` registered last.
+     */
+    sheetReplaced(sheet: StyleSheet, next: StyleSheet | null): void;
+    /**
+     * Every sheet's `@font-face` rules again, in order, and every text that names a family matched
+     * again: a face whose rule went is no longer matched, though the platform keeps it registered.
+     */
+    private reindexFonts;
+    /** Every sheet's `@keyframes` again, in order, and every animation told to look them up. */
+    private reindexKeyframes;
+    /** Mark every node under `node` with an animation, so it looks its keyframes up again. */
+    private markAnimated;
     /** Every `@font-face` seen, global as on the web: a face declared in one sheet serves all. */
     private readonly fontFaces;
     /** Whether a sheet first used in this commit declared a face. See `rematchFonts`. */
@@ -734,6 +936,8 @@ export declare class Engine implements HostEngine {
      * Once per sheet that declares faces, so walking the tree costs nothing that matters.
      */
     private rematchFonts;
+    /** Mark every element under `node` committed with a family, so it is matched again. */
+    private markFontText;
     private readonly knownSheets;
     /**
      * Start, advance or stop the `@keyframes` animation a node's style asks for.
@@ -742,8 +946,29 @@ export declare class Engine implements HostEngine {
      * own frames, which is what lets an element animate in without differing from anything.
      */
     private animated;
+    /**
+     * A clock animation the scroll plays instead: the same animation where only the timeline moved,
+     * and one cancelled where the name changed.
+     */
+    private handOverToScroll;
+    /**
+     * `animationcancel` for an animation stopped before it ended: the element no longer asks for it,
+     * asks for another by name, or its keyframes went, as a browser fires it.
+     */
+    private cancelPlaying;
     /** Start the clock on an animation, unless the node is already playing this one. */
     private startPlaying;
+    /**
+     * The colour `node` inherits, for frames that set `color: currentColor`, which is that colour
+     * wherever the animation has got to, as in CSS. Undefined for frames that do not.
+     */
+    private inheritedColour;
+    /**
+     * The name an animation plays now has other frames: a hot swap edited them, or took away the
+     * sheet whose copy won. Or the colour its `color: currentColor` stands for has changed. It
+     * carries on along the new tracks, on its own clock, as a browser does, paused or not.
+     */
+    private reframe;
     /**
      * `animation-play-state` changed on an animation already playing: pausing holds the frame it
      * has reached, and running again carries on from there, the paused time left out of its clock.
@@ -763,6 +988,13 @@ export declare class Engine implements HostEngine {
      * changed on a later commit would reset what native is animating.
      */
     private scrollAnimated;
+    /**
+     * The first frame of a scroll-driven animation already playing. When the colour its
+     * `color: currentColor` stands for has changed, that frame's colour is taken from tracks built
+     * again. Native drives opacity and transforms only, so a colour holds its first frame, and
+     * nothing native animates is touched.
+     */
+    private rescrolled;
     /** Hand a scroll-driven animation's channels to native, fed by `source`'s scroll events. */
     private driveScrolled;
     /** The scroll view a scroll-driven animation on `node` follows: the nearest one it is inside. */
@@ -840,6 +1072,22 @@ export declare class Engine implements HostEngine {
      * which, per child, was most of what a one-row update cost.
      */
     private reconcileChildren;
+    /**
+     * The paragraph a run of text written straight into a view is drawn in, or nothing for a run of
+     * whitespace, which a browser draws nothing for between the items of a flex box either.
+     *
+     * It is the text's own, kept on the text node, and no part of the tree: its parent is the view,
+     * so it inherits what the view's text would, and no rule matches it.
+     */
+    /**
+     * A run of text under `parent`, which commits as `viewName`: the text itself inside a text, a
+     * paragraph of its own inside any other view, and nothing where the view takes its text as a
+     * prop (see `ViewNameOptions`) or the run is whitespace between a view's children.
+     */
+    private reconcileText;
+    private looseText;
+    /** Remember an iOS modal host committed as showing, so hiding it waits for `topDismiss`. */
+    private notePresented;
     /**
      * Whether a child is left out of its parent's commit: a modal host whose `visible` is false.
      *
@@ -849,9 +1097,11 @@ export declare class Engine implements HostEngine {
      * committed, with `visible` false, until native reports `topDismiss`: Modal.js keeps it that
      * long so the dismissal animates and `(dismiss)` fires. Android drops it at once, as Modal.js
      * does there.
+     *
+     * A withheld host is unmounted, and Fabric drops an unmounted view's event target for good
+     * (`EventEmitter::setEnabled`), so its committed handles are forgotten and it is created afresh
+     * when it is shown again, as Modal.js creates it afresh. Committed again, it ignores every touch.
      */
-    /** Remember an iOS modal host committed as showing, so hiding it waits for `topDismiss`. */
-    private notePresented;
     private withheld;
     /**
      * `reconcileChildren` for a node other nodes hoist into: its own children, each followed by
@@ -870,7 +1120,15 @@ export declare class Engine implements HostEngine {
      * Its native state goes with it, as it would there.
      */
     private reconcileUnder;
-    /** Let a node and everything under it be created again at the next commit. */
+    /**
+     * A node whose native view is no longer the one it was created as is created again: a text
+     * element that came to hold a view, or stopped. A clone keeps the view it was made as.
+     */
+    private forgetRenamed;
+    /**
+     * Let a node and everything under it be created again at the next commit. The views it keeps
+     * for hoisted names go too: they are children of the native view it is losing.
+     */
     private forgetCommitted;
     /** A hoisted node, which commits into an ancestor further up than the parent it is in. */
     private committedElsewhere;
@@ -896,7 +1154,7 @@ export declare class Engine implements HostEngine {
     private create;
     /**
      * Angular's own unknown-element check does not run in this pipeline, so a `<text>` in a
-     * template that never imported `Text` compiles, renders as a plain view, and looks like a
+     * template that never imported `Text` compiles, draws without the component, and looks like a
      * layout bug. On the first commit of any known element with no component behind it, say so.
      */
     private checkClaimed;
@@ -910,6 +1168,12 @@ export declare class Engine implements HostEngine {
     private readonly undefinedTokens;
     /** Said once per name: a phone has no inspector to show the declaration struck out. */
     private reportUndefinedToken;
+    private readonly unreadDisplays;
+    /**
+     * Said once per token and value: the compiler refuses `display: grid` written out, but a token
+     * is only known here, and without this the view lays out as flex with nothing said.
+     */
+    private reportUnreadDisplay;
     private checkProps;
     private isDeclared;
     /**
@@ -1023,6 +1287,11 @@ export declare class Engine implements HostEngine {
     private isAttached;
     /** The host's `resolveAssetSource`, for a component that needs an asset's size up front. */
     resolveAsset(value: unknown): unknown;
+    /**
+     * A colour prop as native takes it. A shape's `fill` or `stroke` the cascade settled from a
+     * token is the solid brush react-native-svg takes, and `none` no paint at all.
+     */
+    private painted;
     /**
      * The host's `processColor`, and the one place a platform colour becomes one.
      *