@ng-native/fabric 0.3.0 → 0.5.0

package/dist/element-styles.d.ts

@@ -0,0 +1,15 @@
+/**
+ * What HTML's text elements look like with no rule of the app's: the few a browser's own sheet
+ * styles that Tailwind's preflight leaves alone. A heading and a paragraph are not here: they are
+ * plain text, as preflight makes them, and the web host's reset says the same. `code` is in the
+ * font each platform uses for code, by the class the root carries for its platform, as
+ * `@ng-native/tailwind`'s `font-mono` is.
+ *
+ * `ELEMENT_STYLES` is `ELEMENT_STYLES_CSS` compiled, written out because the engine has no
+ * compiler. `element-styles.test.ts` fails when the two disagree.
+ */
+import type { StyleSheet } from './css.ts';
+export declare const ELEMENT_STYLES_CSS = "\nstrong, b { font-weight: bold }\nem, i, cite { font-style: italic }\nu { text-decoration-line: underline }\ns { text-decoration-line: line-through }\nsmall { font-size: 80% }\ncode { font-family: Courier New }\n.platform-ios code { font-family: Menlo }\n.platform-android code { font-family: monospace }\nmark { background-color: rgb(255, 255, 0); color: rgb(0, 0, 0) }\n";
+export declare const ELEMENT_STYLES: StyleSheet;
+/** The element names `ELEMENT_STYLES` has a rule for. */
+export declare const STYLED_ELEMENTS: ReadonlySet<string>;

package/dist/element-styles.js

@@ -0,0 +1,103 @@
+export const ELEMENT_STYLES_CSS = `
+strong, b { font-weight: bold }
+em, i, cite { font-style: italic }
+u { text-decoration-line: underline }
+s { text-decoration-line: line-through }
+small { font-size: 80% }
+code { font-family: Courier New }
+.platform-ios code { font-family: Menlo }
+.platform-android code { font-family: monospace }
+mark { background-color: rgb(255, 255, 0); color: rgb(0, 0, 0) }
+`;
+export const ELEMENT_STYLES = {
+    rules: [
+        {
+            compounds: [{ classes: [], type: 'strong' }],
+            combinators: [],
+            specificity: 1,
+            order: 0,
+            declarations: { fontWeight: '700' },
+        },
+        {
+            compounds: [{ classes: [], type: 'b' }],
+            combinators: [],
+            specificity: 1,
+            order: 1,
+            declarations: { fontWeight: '700' },
+        },
+        {
+            compounds: [{ classes: [], type: 'em' }],
+            combinators: [],
+            specificity: 1,
+            order: 2,
+            declarations: { fontStyle: 'italic' },
+        },
+        {
+            compounds: [{ classes: [], type: 'i' }],
+            combinators: [],
+            specificity: 1,
+            order: 3,
+            declarations: { fontStyle: 'italic' },
+        },
+        {
+            compounds: [{ classes: [], type: 'cite' }],
+            combinators: [],
+            specificity: 1,
+            order: 4,
+            declarations: { fontStyle: 'italic' },
+        },
+        {
+            compounds: [{ classes: [], type: 'u' }],
+            combinators: [],
+            specificity: 1,
+            order: 5,
+            declarations: { textDecorationLine: 'underline' },
+        },
+        {
+            compounds: [{ classes: [], type: 's' }],
+            combinators: [],
+            specificity: 1,
+            order: 6,
+            declarations: { textDecorationLine: 'line-through' },
+        },
+        {
+            compounds: [{ classes: [], type: 'small' }],
+            combinators: [],
+            specificity: 1,
+            order: 7,
+            declarations: {},
+            deferred: [{ props: ['fontSize'], compute: { unit: 'em', factor: 0.8 } }],
+        },
+        {
+            compounds: [{ classes: [], type: 'code' }],
+            combinators: [],
+            specificity: 1,
+            order: 8,
+            declarations: { fontFamily: 'Courier New' },
+        },
+        {
+            compounds: [{ classes: [], type: 'mark' }],
+            combinators: [],
+            specificity: 1,
+            order: 11,
+            declarations: { backgroundColor: 'rgb(255, 255, 0)', color: 'rgb(0, 0, 0)' },
+        },
+        {
+            compounds: [{ classes: ['platform-ios'] }, { classes: [], type: 'code' }],
+            combinators: ['descendant'],
+            specificity: 1001,
+            order: 9,
+            declarations: { fontFamily: 'Menlo' },
+        },
+        {
+            compounds: [{ classes: ['platform-android'] }, { classes: [], type: 'code' }],
+            combinators: ['descendant'],
+            specificity: 1001,
+            order: 10,
+            declarations: { fontFamily: 'monospace' },
+        },
+    ],
+};
+/** The element names `ELEMENT_STYLES` has a rule for. */
+export const STYLED_ELEMENTS = new Set(ELEMENT_STYLES.rules.map((rule) => rule.compounds.at(-1).type));
+//# sourceMappingURL=element-styles.js.map

package/dist/element-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-styles.js","sourceRoot":"","sources":["../src/element-styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * What HTML's text elements look like with no rule of the app's: the few a browser's own sheet\n * styles that Tailwind's preflight leaves alone. A heading and a paragraph are not here: they are\n * plain text, as preflight makes them, and the web host's reset says the same. `code` is in the\n * font each platform uses for code, by the class the root carries for its platform, as\n * `@ng-native/tailwind`'s `font-mono` is.\n *\n * `ELEMENT_STYLES` is `ELEMENT_STYLES_CSS` compiled, written out because the engine has no\n * compiler. `element-styles.test.ts` fails when the two disagree.\n */\nimport type { StyleSheet } from './css.ts';\n\nexport const ELEMENT_STYLES_CSS = `\nstrong, b { font-weight: bold }\nem, i, cite { font-style: italic }\nu { text-decoration-line: underline }\ns { text-decoration-line: line-through }\nsmall { font-size: 80% }\ncode { font-family: Courier New }\n.platform-ios code { font-family: Menlo }\n.platform-android code { font-family: monospace }\nmark { background-color: rgb(255, 255, 0); color: rgb(0, 0, 0) }\n`;\n\nexport const ELEMENT_STYLES = {\n  rules: [\n    {\n      compounds: [{ classes: [], type: 'strong' }],\n      combinators: [],\n      specificity: 1,\n      order: 0,\n      declarations: { fontWeight: '700' },\n    },\n    {\n      compounds: [{ classes: [], type: 'b' }],\n      combinators: [],\n      specificity: 1,\n      order: 1,\n      declarations: { fontWeight: '700' },\n    },\n    {\n      compounds: [{ classes: [], type: 'em' }],\n      combinators: [],\n      specificity: 1,\n      order: 2,\n      declarations: { fontStyle: 'italic' },\n    },\n    {\n      compounds: [{ classes: [], type: 'i' }],\n      combinators: [],\n      specificity: 1,\n      order: 3,\n      declarations: { fontStyle: 'italic' },\n    },\n    {\n      compounds: [{ classes: [], type: 'cite' }],\n      combinators: [],\n      specificity: 1,\n      order: 4,\n      declarations: { fontStyle: 'italic' },\n    },\n    {\n      compounds: [{ classes: [], type: 'u' }],\n      combinators: [],\n      specificity: 1,\n      order: 5,\n      declarations: { textDecorationLine: 'underline' },\n    },\n    {\n      compounds: [{ classes: [], type: 's' }],\n      combinators: [],\n      specificity: 1,\n      order: 6,\n      declarations: { textDecorationLine: 'line-through' },\n    },\n    {\n      compounds: [{ classes: [], type: 'small' }],\n      combinators: [],\n      specificity: 1,\n      order: 7,\n      declarations: {},\n      deferred: [{ props: ['fontSize'], compute: { unit: 'em', factor: 0.8 } }],\n    },\n    {\n      compounds: [{ classes: [], type: 'code' }],\n      combinators: [],\n      specificity: 1,\n      order: 8,\n      declarations: { fontFamily: 'Courier New' },\n    },\n    {\n      compounds: [{ classes: [], type: 'mark' }],\n      combinators: [],\n      specificity: 1,\n      order: 11,\n      declarations: { backgroundColor: 'rgb(255, 255, 0)', color: 'rgb(0, 0, 0)' },\n    },\n    {\n      compounds: [{ classes: ['platform-ios'] }, { classes: [], type: 'code' }],\n      combinators: ['descendant'],\n      specificity: 1001,\n      order: 9,\n      declarations: { fontFamily: 'Menlo' },\n    },\n    {\n      compounds: [{ classes: ['platform-android'] }, { classes: [], type: 'code' }],\n      combinators: ['descendant'],\n      specificity: 1001,\n      order: 10,\n      declarations: { fontFamily: 'monospace' },\n    },\n  ],\n} as unknown as StyleSheet;\n\n/** The element names `ELEMENT_STYLES` has a rule for. */\nexport const STYLED_ELEMENTS: ReadonlySet<string> = new Set(\n  ELEMENT_STYLES.rules.map((rule) => rule.compounds.at(-1)!.type as string),\n);\n"]}

package/dist/engine.d.ts

@@ -7,7 +7,7 @@
  * because a persistent parent holds references to specific child handles. That bubble is
  * inherent and is what React's own Fabric renderer does.
  */
-import { type Conditions, type StyleCache, type StyleSheet, type TokenValue } from './css.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';
@@ -168,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;
@@ -192,6 +194,31 @@ export interface EngineNode extends HostNode {
     styleCache: StyleCache | null;
     /** Set when something that could change what this node matches has changed. */
     styleDirty: boolean;
+    /** See `StyleTarget.hasDirty`. */
+    hasDirty: boolean;
+    /** See `StyleTarget.stateDirty`. */
+    stateDirty: 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. */
@@ -207,6 +234,18 @@ export interface EngineNode extends HostNode {
     ownStyle?: object;
     /** The resolved style this node was last committed with, for the skip check in `reconcile`. */
     styleCommitted: StyleCache | null;
+    /**
+     * How this node laid its children out when one of them last had a `fit-content` size, as
+     * `containerOf` says it. Set by such a child, and compared on each reconcile so the children
+     * are worked out again when the direction or alignment changes. Unset on every other node.
+     */
+    fitContainer?: string;
+    /**
+     * Whether this node had a height a percentage could be taken of, when a box beneath it with a
+     * percentage height last asked, as `definiteHeight` says it. Compared on each reconcile so its
+     * children are worked out again when it changes. Unset on every other node.
+     */
+    heightBasis?: boolean;
     /**
      * Per-property transition state, for every property this node has ever seen a `transition` for.
      * A finished entry stays, because its target is what the next change is measured against.
@@ -224,6 +263,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.
@@ -235,6 +281,12 @@ export interface EngineNode extends HostNode {
      * knows. See `markComponentHost`.
      */
     componentHost?: true;
+    /** See `keepNativeView`. */
+    nativeView?: true;
+    /** Props kept for selectors to match and left out of what is committed. See `keepAsAttribute`. */
+    attributeOnly?: Set<string>;
+    /** The child this node's background is painted on instead of itself. See `paintOn`. */
+    paintsOn?: EngineNode;
     /**
      * 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
@@ -283,6 +335,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;
@@ -310,6 +368,13 @@ export interface ViewNameOptions {
      * 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
@@ -328,6 +393,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')`.
@@ -365,9 +440,14 @@ 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[];
+    /** Set on the paragraph the engine makes for a run of text written straight into a view. */
+    readonly anonymous?: boolean;
 }
 /**
  * The native view a node commits as: `Paragraph` for a `<text>`, `VirtualText` for one nested in
@@ -452,7 +532,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
@@ -509,6 +589,8 @@ export declare class Engine implements HostEngine {
      * does, a child list can move without anything else needing to be looked at again.
      */
     private structuralSheets;
+    /** Whether any sheet uses `:has()`. See `markBeneath`. */
+    private hasSheets;
     private readonly resolveAssetSource;
     constructor(fabric: FabricUIManager, rootTag: number, options?: EngineOptions);
     /**
@@ -532,6 +614,25 @@ export declare class Engine implements HostEngine {
      * binding, so nothing marks an Angular view dirty and no change-detection pass would follow.
      */
     private setActiveChain;
+    /** Whether any sheet styles a pressed element, and each compound that asks about one from another. */
+    private activeUse;
+    /** What each sheet in play asks about a pressed element: `activeUse` is all of them together. */
+    private readonly activeBySheet;
+    /** Note what a sheet in play asks about a pressed element. See `markActive`. */
+    private watchActive;
+    /** A sheet has left play, by a hot swap or by being removed: what it asked goes with it. */
+    private unwatchActive;
+    private countActive;
+    /**
+     * A press began or ended on `node` or under it, which is all that changed about it. A press
+     * reaches every ancestor up to the root, and marking each as restyled would style the whole
+     * screen again, twice a press. So each is only matched again, and keeps its style and all
+     * that is under it unless it now matches other rules. An element a rule asks about from
+     * inside or beside it, `.card:active .title`, changes more than itself, and is restyled with
+     * everything under it as any other change is. With no rule for a pressed element at all there
+     * is nothing to match.
+     */
+    private markActive;
     /**
      * Custom properties the device knows and the stylesheet cannot, once they change.
      *
@@ -585,6 +686,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.
@@ -630,6 +736,9 @@ export declare class Engine implements HostEngine {
     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;
@@ -699,6 +808,25 @@ export declare class Engine implements HostEngine {
     parentNode(node: EngineNode): EngineNode | null;
     nextSibling(node: EngineNode): EngineNode | null;
     setProp(node: EngineNode, key: string, value: unknown): void;
+    /**
+     * Paint a node's background on one of its children instead of on the node: the node keeps its
+     * `background-color` and `background-image` in the cascade, where a stylesheet wrote them, and
+     * the child is the view that draws them. What a view that masks its children and not itself
+     * needs, as `<gradient-text>` is.
+     */
+    paintOn(node: EngineNode, child: EngineNode): void;
+    /**
+     * Keep a prop the node already has as an attribute: on the node for a selector such as
+     * `:host([variant='primary'])` to match, and left out of what is committed to the native view.
+     * It is committed again once the prop is next written. What the platform adapter does with a
+     * static attribute that is an input of the host's component.
+     */
+    keepAsAttribute(node: EngineNode, key: string): 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;
     /**
@@ -710,6 +838,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`.
      *
@@ -721,7 +855,16 @@ export declare class Engine implements HostEngine {
     setText(node: EngineNode, value: string): void;
     setEventListener(node: EngineNode, topLevelType: string, fn: (event: unknown) => void): () => void;
     private markProps;
+    /** Start matching ancestors again on a change, once a sheet that uses `:has()` is in play. */
+    private watchHas;
+    /**
+     * Something at or beneath `from` changed: every node from there up may match a `:has()` rule
+     * it did not, or stop matching one. They are matched again rather than marked for restyling,
+     * which would restyle everything under them. Only sheets that use `:has()` pay.
+     */
+    private markBeneath;
     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;
@@ -733,6 +876,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;
@@ -777,6 +942,20 @@ export declare class Engine implements HostEngine {
      * unrelated change.
      */
     private mergeProps;
+    /**
+     * Leave a node's background out of what it commits when a child paints it, and give that child
+     * its parent's: the cascade's, and over it the parent's inline style.
+     */
+    private movePaint;
+    /**
+     * A container whose direction or alignment changed since a child with a `fit-content` size
+     * read it, or whose height stopped or started being one a percentage is taken of since a child
+     * with a percentage height asked: those children are merged again. A change to a container
+     * marks nothing beneath it, since none of these is inherited.
+     */
+    private refitChildren;
+    /** Have a container's children merged again, through any `display: contents` among them. */
+    private refit;
     /**
      * The text size cap that lays a paragraph or text input out again once a face it names has
      * registered: a step per face above the app's own cap where it set one (below 1 is none, on
@@ -817,6 +996,11 @@ export declare class Engine implements HostEngine {
      * 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. */
@@ -831,6 +1015,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.
@@ -839,6 +1025,40 @@ 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;
+    /** Stop on native each animation whose view has left the tree. */
+    private releasePlayedNatively;
+    /** Every node whose animation native is playing, with no frame of it in JavaScript. */
+    private readonly playedNatively;
+    /**
+     * Hand an animation that has just started to native, where native can play it: one that moves
+     * only opacity and transforms, starts at once, and repeats a whole number of times. Native then
+     * runs it frame by frame, and JavaScript hears of it again when it ends. Anything else is
+     * played from here, a commit a frame. See `NativeScrollDriver.play`.
+     */
+    private playNatively;
+    /**
+     * Native reached the end of an animation it was playing. The frame it ends at, or the resting
+     * style where it does not fill, is committed before the view is let go, so nothing shows of
+     * the frame it started at, which is what the view had been committed with.
+     */
+    private endedNatively;
+    /** Take an animation back from native, which stops it there. The caller plays it on, or not. */
+    private stopNative;
+    /**
+     * Play on from JavaScript an animation native was playing, from where its clock has got to:
+     * what a pause, other frames or a view made again need, none of which native can be told of.
+     */
+    private backToScript;
     /** Start the clock on an animation, unless the node is already playing this one. */
     private startPlaying;
     /**
@@ -930,7 +1150,8 @@ export declare class Engine implements HostEngine {
      *
      * A stop's colour is a colour like any other, but it is two levels down and nothing else looks
      * there: without this the device is handed the string `rgb(255, 0, 0)` where it wants a number,
-     * and paints nothing.
+     * and paints nothing. The stops are first rewritten so native's interpolation paints what
+     * CSS's premultiplied one does (see `premultipliedStops`).
      */
     private processGradients;
     private clearFlags;
@@ -955,6 +1176,20 @@ 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;
     /**
@@ -989,6 +1224,11 @@ export declare class Engine implements HostEngine {
      * Its native state goes with it, as it would there.
      */
     private reconcileUnder;
+    /**
+     * 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.
@@ -1018,7 +1258,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;
@@ -1151,6 +1391,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.
      *