@apexnative/navigation 1.0.0-alpha.3 → 1.0.0-alpha.5

package/src/engine/options.ts

@@ -1,17 +1,27 @@
 import { DynamicColorIOS, Image, Platform, processColor } from 'react-native';
 import type { ColorValue, ImageSourcePropType } from 'react-native';
 import { nextId } from './ids';
-import { rememberButtonRoot, setProps } from './props';
+import { rememberButtonRoot, rememberOptionsComponent, setProps } from './props';
 
 type Fields = Record<string, unknown>;
 
 /**
  * The options as the native side reads them: colors in the format of the platform, images resolved, and every
  * component in them with an id of its own (its props stay in JavaScript). Options come in their own form only:
- * animations with `enter` and `exit`, `searchBar` and `interpolation` as objects.
+ * animations with `enter` and `exit`, `searchBar` and `interpolation` as objects. `owner` is the id of the node the
+ * options are for, or `'defaultOptions'`: a component without an id of its own gets one made of the owner, its place
+ * in the options and its name, the same for every `mergeOptions` of the node, so the native side keeps the mounted
+ * component and only its props change. Without an owner each conversion gives it a new one.
  */
-export function toNativeOptions<T>(options: T): T {
-  return convert(options) as T;
+export function toNativeOptions<T>(options: T, owner?: string): T {
+  return convert(options, undefined, { owner, path: '' }) as T;
+}
+
+// Where a value is in the options being converted: the node they are for, and the path to the value
+// (`topBar.rightButtons[0].component`).
+interface Place {
+  owner: string | undefined;
+  path: string;
 }
 
 /**
@@ -35,11 +45,16 @@ function isGroup(value: unknown): value is Fields {
   return isFields(value) && !Array.isArray(value);
 }
 
-function convert(value: unknown, key?: string): unknown {
+function convert(value: unknown, key: string | undefined, place: Place): unknown {
   if (key !== undefined && isColor(key)) return nativeColor(value);
   if (key !== undefined && isImage(key)) return nativeImage(value);
   if (Array.isArray(value)) {
-    const items = value.map((item) => convert(item));
+    // An item is known by its id where it has one (a button, a suggestion), so a component keeps its root when the
+    // list around it changes; by its place in the list otherwise.
+    const items = value.map((item, index) => {
+      const id = isFields(item) && typeof item.id === 'string' && item.id ? item.id : index;
+      return convert(item, undefined, { ...place, path: `${place.path}[${id}]` });
+    });
     if (key?.endsWith('Buttons') || key === 'buttons') items.forEach(noteButtonRoot);
     return key?.endsWith('Buttons') ? items.map(takeButtonProps) : items;
   }
@@ -47,9 +62,12 @@ function convert(value: unknown, key?: string): unknown {
   const result: Fields = {};
   for (const [name, item] of Object.entries(withSymbols(value))) {
     // The props of a component are its own, not options.
-    result[name] = name === 'passProps' ? item : convert(item, name);
+    const path = place.path ? `${place.path}.${name}` : name;
+    result[name] = name === 'passProps' ? item : convert(item, name, { ...place, path });
   }
-  return key === 'component' || key === 'resultsComponent' ? takeComponentProps(result) : result;
+  return key === 'component' || key === 'resultsComponent'
+    ? takeComponentProps(result, place)
+    : result;
 }
 
 function isColor(key: string): boolean {
@@ -105,13 +123,23 @@ function isFields(value: unknown): value is Fields {
   return typeof value === 'object' && value !== null;
 }
 
-// A component in the options gets an id; the native side creates it with that id, and its props wait here.
-function takeComponentProps({ passProps, ...component }: Fields): Fields {
-  const componentId = (component.id as string | undefined) || nextId('CustomComponent');
+// A component in the options gets an id; the native side creates it with that id, and its props wait here. Without
+// an id of its own it is the owner's, the place of the component (`topBar.title`, `topBar.rightButtons[Save]` by the
+// button's id, `topBar.searchBar.resultsComponent`) and its name: another name there is another component.
+function takeComponentProps({ passProps, ...component }: Fields, place: Place): Fields {
+  const componentId = (component.id as string | undefined) || componentIdAt(place, component.name);
   if (passProps) setProps(componentId, passProps as object);
   return { ...component, componentId };
 }
 
+function componentIdAt({ owner, path }: Place, name: unknown): string {
+  if (owner === undefined) return nextId('CustomComponent');
+  const at = path.endsWith('.component') ? path.slice(0, -'.component'.length) : path;
+  const id = `${owner}/${at}/${String(name)}`;
+  rememberOptionsComponent(owner, id);
+  return id;
+}
+
 // The component of a bar button (the top bar's `*Buttons`, the toolbar's `buttons`) is a root the native side only
 // sizes: its wrapper centers the content in the button's slot.
 function noteButtonRoot(button: unknown): void {

package/src/engine/places.ts

@@ -1,6 +1,7 @@
 import type { SplitViewColumnsStackedEvent } from '../interfaces/Events';
 import type { LayoutNode } from './layout';
 import { onNativeEvent } from './native';
+import { forgetProps } from './props';
 import { screenNameOf } from './slots';
 
 // Where each screen is, noted as the engine builds the layouts of the commands: what it shows in and its place in its
@@ -51,6 +52,11 @@ const stackedSplits = new Set<string>();
 let listeningToSplitViews = false;
 // The primaries of pairs shown alone, noted as their node is built, until their place is noted.
 const alone = new Set<string>();
+// The layouts each screen shows in (its stack, pair, tabs, menu, split view, and the root of its layer), and how many
+// live screens each layout holds. A layout whose last screen went is gone, and with it the props of the components the
+// library named in its options: they stay as long as any of its screens may show them again.
+const layoutsOfScreen = new Map<string, readonly string[]>();
+const screensInLayout = new Map<string, number>();
 // The last screens that went, so a command from one of them can say so; a screen the engine never saw is not one.
 const gone = new Set<string>();
 const GONE_KEPT = 200;
@@ -59,6 +65,15 @@ export function placeOf(screenId: string): ScreenPlace | undefined {
   return places.get(screenId);
 }
 
+/** The first screen of a stack, as the engine noted it; with a pair first, its primary. */
+export function firstScreenOf(stack: string): string | undefined {
+  for (const [id, place] of places) {
+    if (place.stack === stack && place.index === 0 && place.arrangement?.placement !== 'secondary')
+      return id;
+  }
+  return undefined;
+}
+
 /** Notes that a screen is the primary of a pair shown alone, where the native side shows no pairs. */
 export function noteAlone(screenId: string): void {
   alone.add(screenId);
@@ -69,9 +84,15 @@ export function isGone(screenId: string): boolean {
   return gone.has(screenId);
 }
 
+/** The layouts the screen shows in, outermost first: those whose screens come with it in a command go in it too. */
+export function layoutsOf(screenId: string): readonly string[] {
+  return layoutsOfScreen.get(screenId) ?? [];
+}
+
 /**
  * Notes the screens of a layout, the first of a stack at `index`. A modal or an overlay given as a whole is a layer of
- * its own; screens added to one, such as a push, take the layer of the screen they come from.
+ * its own; screens added to one, such as a push, take the layer of the screen they come from, and `within`, the
+ * layouts they show in (`layoutsOf` that screen).
  */
 export function notePlaces(
   node: LayoutNode,
@@ -79,12 +100,14 @@ export function notePlaces(
   stack: string | null = null,
   index = 0,
   menu?: ScreenPlace['menu'],
-  layer: string = container === 'root' ? 'root' : node.id
+  layer: string = container === 'root' ? 'root' : node.id,
+  within: readonly string[] = []
 ): void {
   if (node.type === 'Component' || node.type === 'ExternalComponent') {
     const name = node.data.name ?? '';
     gone.delete(node.id);
     columnOfScreen.delete(node.id);
+    noteLayouts(node.id, within);
     places.set(node.id, {
       name: screenNameOf(name),
       container,
@@ -99,7 +122,7 @@ export function notePlaces(
   } else if (node.type === 'Arrangement') {
     // One entry of its stack: both screens have its place there, and each knows the pair.
     node.children.forEach((child, childIndex) => {
-      notePlaces(child, container, stack, index, menu, layer);
+      notePlaces(child, container, stack, index, menu, layer, [...within, node.id]);
       const place = places.get(child.id);
       if (place) {
         const placement = childIndex === 0 ? 'primary' : 'secondary';
@@ -109,7 +132,7 @@ export function notePlaces(
   } else if (node.type === 'Stack') {
     columnOfStack.delete(node.id);
     node.children.forEach((child, childIndex) =>
-      notePlaces(child, container, node.id, childIndex, menu, layer)
+      notePlaces(child, container, node.id, childIndex, menu, layer, [...within, node.id])
     );
   } else if (node.type === 'SplitView') {
     // A split view sent again with its id starts anew: its columns are noted again, and it isn't one stack until the
@@ -118,7 +141,7 @@ export function notePlaces(
     const columns = node.data.columns ?? [];
     const stacks: Partial<Record<string, string>> = {};
     node.children.forEach((child, childIndex) => {
-      notePlaces(child, container, null, 0, menu, layer);
+      notePlaces(child, container, null, 0, menu, layer, [...within, node.id]);
       const column = columns[childIndex];
       if (!column) return;
       if (child.type === 'Stack') stacks[column] = child.id;
@@ -128,12 +151,46 @@ export function notePlaces(
   } else if (node.type === 'SideMenuRoot') {
     for (const part of node.children) {
       const side = MENU_PARTS[part.type];
+      const parts = [...within, node.id, part.id];
       part.children.forEach((child) =>
-        notePlaces(child, container, null, 0, side ? { id: node.id, part: side } : menu, layer)
+        notePlaces(
+          child,
+          container,
+          null,
+          0,
+          side ? { id: node.id, part: side } : menu,
+          layer,
+          parts
+        )
       );
     }
   } else {
-    node.children.forEach((child) => notePlaces(child, container, null, 0, menu, layer));
+    node.children.forEach((child) =>
+      notePlaces(child, container, null, 0, menu, layer, [...within, node.id])
+    );
+  }
+}
+
+// A screen noted again under its id (a layout sent again) leaves the layouts it was in before.
+function noteLayouts(screenId: string, within: readonly string[]): void {
+  leaveLayouts(screenId);
+  const layouts = [...new Set(within)];
+  layoutsOfScreen.set(screenId, layouts);
+  for (const layout of layouts) screensInLayout.set(layout, (screensInLayout.get(layout) ?? 0) + 1);
+}
+
+function leaveLayouts(screenId: string): void {
+  const layouts = layoutsOfScreen.get(screenId);
+  if (!layouts) return;
+  layoutsOfScreen.delete(screenId);
+  for (const layout of layouts) {
+    const count = (screensInLayout.get(layout) ?? 1) - 1;
+    if (count > 0) {
+      screensInLayout.set(layout, count);
+      continue;
+    }
+    screensInLayout.delete(layout);
+    forgetProps(layout);
   }
 }
 
@@ -198,6 +255,7 @@ export function listenToSplitViews(): void {
 
 /** The screen is gone. */
 export function forgetPlace(screenId: string): void {
+  leaveLayouts(screenId);
   places.delete(screenId);
   columnOfScreen.delete(screenId);
   gone.add(screenId);

package/src/engine/props.ts

@@ -7,6 +7,11 @@ const watchers = new Map<string, Set<() => void>>();
 const none = {};
 // The roots that are the components of bar buttons: their wrapper centers the content in the button's slot.
 const buttonRoots = new Set<string>();
+// The ids the library gave components in options, by the node whose options they are in. Such an id stays the same
+// for every show of the node and may have several roots at once (a component of the default or a stack's options):
+// its props go with the node, not with a root.
+const optionComponents = new Map<string, Set<string>>();
+const optionComponentIds = new Set<string>();
 
 export function setProps(id: string, props: object | undefined): void {
   if (props === undefined) byId.delete(id);
@@ -38,8 +43,32 @@ export function isButtonRoot(id: string): boolean {
   return buttonRoots.has(id);
 }
 
-/** The view is gone: its props, and whether it is a button's root, are not needed again. */
+/** Notes an id the library gave a component in the options of the node `owner`. */
+export function rememberOptionsComponent(owner: string, id: string): void {
+  let ids = optionComponents.get(owner);
+  if (!ids) optionComponents.set(owner, (ids = new Set()));
+  ids.add(id);
+  optionComponentIds.add(id);
+}
+
+/** Whether the library gave the id to a component in options: its props go with the node, not with a root. */
+export function isOptionsComponent(id: string): boolean {
+  return optionComponentIds.has(id);
+}
+
+/**
+ * The view is gone: its props, and whether it is a button's root, are not needed again; nor are those of the
+ * components the library named in its options.
+ */
 export function forgetProps(id: string): void {
   byId.delete(id);
   buttonRoots.delete(id);
+  const ids = optionComponents.get(id);
+  if (!ids) return;
+  optionComponents.delete(id);
+  for (const component of ids) {
+    byId.delete(component);
+    buttonRoots.delete(component);
+    optionComponentIds.delete(component);
+  }
 }

package/src/engine/rememberedOptions.ts

@@ -60,7 +60,10 @@ export function rootGoesOut(nodes: LayoutNode[], again: SentRoot | undefined): v
     pairNodes(before.nodes, nodes, (old, node) => {
       const options = remembered.get(old.id);
       if (!options) return;
-      node.data.options = mergeNativeOptions(node.data.options ?? {}, toNativeOptions(options));
+      node.data.options = mergeNativeOptions(
+        node.data.options ?? {},
+        toNativeOptions(options, node.id)
+      );
       moved.set(node.id, options);
     });
   }

package/src/engine/screens.tsx

@@ -2,7 +2,7 @@ import React, { type ComponentType, useCallback, useEffect, useSyncExternalStore
 import { AppRegistry } from 'react-native';
 import type { Options } from '../interfaces/Options';
 import { forgetPlace } from './places';
-import { forgetProps, propsOf, watchProps } from './props';
+import { forgetProps, isOptionsComponent, propsOf, watchProps } from './props';
 import { forgetMergedOptions } from './rememberedOptions';
 import { hasSlot } from './slots';
 import type { NativeControllerProps } from './nativeScreens';
@@ -55,11 +55,12 @@ export type ScreenRootProps = { componentId: string } & Record<string, unknown>;
 const screens = new Map<string, EngineScreen>();
 const roots = new Map<string, ComponentType<{ componentId: string; rootTag?: number }>>();
 let unmounted: ((screenId: string) => void) | undefined;
-// The React root that shows each screen, by its root tag. After a JavaScript reload React Native starts the roots of
-// the old screens again in the new runtime, under the ids the new screens get too, and unmounts them once the new ones
-// show; their root tags are older, as the native side counts them up for as long as the app runs. A slot of the app's
-// one tree has no tag: while the one tree shows a screen with the id, no root of that id lets it go.
-const owners = new Map<string, number>();
+// The React roots mounted under each id, by their root tags. One id can have several: after a JavaScript reload React
+// Native starts the roots of the old screens again in the new runtime, under the ids the new screens get too, and
+// unmounts them once the new ones show; a component of the default or a stack's options has one id and a root in the
+// bar of every screen that shows it. The id lets its props go only with the last of them. A slot of the app's one tree
+// has no tag: while the one tree shows a screen with the id, no root of that id lets it go.
+const owners = new Map<string, Set<number>>();
 
 /** What runs when the root of a screen unmounts: the screen is gone. */
 export function onScreenUnmounted(listener: (screenId: string) => void): void {
@@ -214,17 +215,26 @@ export function screenRoot(
       );
       const props = useSyncExternalStore(watch, () => propsOf(componentId));
       useEffect(() => {
-        if (rootTag !== undefined && rootTag > (owners.get(componentId) ?? -1)) {
-          owners.set(componentId, rootTag);
+        if (rootTag !== undefined) {
+          const tags = owners.get(componentId) ?? new Set<number>();
+          tags.add(rootTag);
+          owners.set(componentId, tags);
         }
         return () => {
-          // An old root of the same id leaves the screen alone, and so does any root while the one tree still has a slot
-          // with the id: a later screen under the id, the restarted root of a screen after a reload into the one tree
-          // (its slot may mount only once the app's provider lets it), the screen rendering again under the provider.
-          if (rootTag !== undefined && owners.get(componentId) !== rootTag) return;
+          // A root while another root of the id is mounted leaves the screen alone, and so does any root while the one
+          // tree still has a slot with the id: a later screen under the id, the restarted root of a screen after a
+          // reload into the one tree (its slot may mount only once the app's provider lets it), the screen rendering
+          // again under the provider.
+          const tags = owners.get(componentId);
+          if (rootTag !== undefined && tags) {
+            tags.delete(rootTag);
+            if (tags.size > 0) return;
+          }
           if (hasSlot(componentId)) return;
           owners.delete(componentId);
-          forgetProps(componentId);
+          // A component the library named in options keeps its props for the next root under its id (the node shows
+          // it again, or another screen shows the same default): they go with the node.
+          if (!isOptionsComponent(componentId)) forgetProps(componentId);
           forgetPlace(componentId);
           forgetMergedOptions(componentId);
           unmounted?.(componentId);

package/src/interfaces/ComponentEvents.ts

@@ -10,7 +10,7 @@ export type ComponentType =
 
 /** The fields every appearance event has. */
 interface ComponentAppearanceEvent {
-  /** The id of the component: the screen, or the screen the bar component belongs to. */
+  /** The id of the component: of the screen, or the bar component's own id. */
   componentId: string;
   /** The name of the component: for a screen, its name without any internal prefix. */
   componentName: string;
@@ -60,7 +60,7 @@ export interface NavigationButtonPressedEvent {
    * `ApexNavigation.back`; the hardware back of a modal has `ApexNavigation.hardwareBackButton`.
    */
   buttonId: string;
-  /** (iOS) For a button with `toggle`: its new state, already written into the options of the screen. */
+  /** (iOS) For a button with `toggle`: its new state, which the screen keeps. */
   selected?: boolean;
 }
 

package/src/interfaces/Events.ts

@@ -54,8 +54,12 @@ export interface NavigationStateChangedEvent {
 
 /**
  * A tab was selected by the user: a press on the tab, a pick from the "More" list or a press on "More" that showed a
- * tab (iOS). It is sent after the selection, and only when the tab changed; a press on the current tab is reported by
- * `BottomTabPressedEvent` alone. Selecting a tab from code sends nothing.
+ * tab (iOS). It goes right after the `ComponentDidAppear` of the new tab's screen, before the navigation state and
+ * before the tab that was left goes back to its first screen (`popToRootOnBlur`), and only when the tab changed: a
+ * press on the selected tab or on a `selectTabOnPress: false` tab is reported by `BottomTabPressedEvent` alone.
+ * Selecting a tab from code sends nothing. A switch still running when another press, long press or choice from code
+ * comes ends first, with this event, so the events of one press never mix with the next; when that tab's screen
+ * hasn't drawn yet, this event goes before its held `ComponentDidAppear`.
  */
 export interface BottomTabSelectedEvent {
   /** The index of the tab that is now selected. */
@@ -67,24 +71,28 @@ export interface BottomTabSelectedEvent {
 }
 
 /**
- * A tab was pressed, the selected one too. It is sent before the tab is selected; with `selectTabOnPress: false` it is
- * the only thing that happens. A long press sends `BottomTabLongPressedEvent` instead.
+ * A tab was pressed, on the bar or on a cell of `bottomTabs.customRow`, the selected one too. It goes first, before
+ * anything the press does. Another tab: then the switch's `ComponentWillAppear`, `ComponentDidDisappear` and
+ * `ComponentDidAppear`, then `BottomTabSelectedEvent`. The selected tab again (`wasSelected: true`): its stack goes
+ * back to its first screen with the events of the user's back (`ScreenPopped`), or, on the first screen, its content
+ * scrolls to the top; with `popToRootOnPress: false` nothing follows. With `selectTabOnPress: false` it is the only
+ * event and the selection stays. A long press sends `BottomTabLongPressedEvent` instead.
  */
 export interface BottomTabPressedEvent {
   /** The index of the tab that was pressed. */
   tabIndex: number;
   /** The id of the tabs. */
   bottomTabsId: string;
-  /** The id of the screen the tab shows: the top of its stack. */
+  /** The id of the screen the tab shows: the top of its stack, or the tab itself when it is a screen. */
   screenId?: string;
   /** Whether the tab was the selected one already; a press on the selected tab scrolls its content to the top. */
   wasSelected: boolean;
 }
 
 /**
- * A tab was pressed and held. The tab is not selected and gets no press event. On iOS it is not sent for the tabs
- * that are components (`bottomTab.component`, `bottomTabs.customRow`), for "More", or for the tab strip at the top of an
- * iPad. On Android it replaces the tooltip of the tab.
+ * A tab was pressed and held, on the bar or on a cell of `bottomTabs.customRow`. The tab is not selected and gets no
+ * press event. On iOS it is not sent for "More" or for the tab strip at the top of an iPad. On Android it replaces the
+ * tooltip of the tab.
  */
 export interface BottomTabLongPressedEvent {
   /** The index of the tab that was pressed. */
@@ -195,11 +203,12 @@ export type HingeState = 'closed' | 'partiallyOpen' | 'fullyOpen' | 'unknown';
  */
 export interface HingeChangedEvent {
   /**
-   * The state of the hinge. On Android `closed` means the device has no fold, or its angle is below 90 degrees.
+   * The state of the hinge. On Android `closed` means the app's window has no fold, or the angle is below 90 degrees,
+   * so a device open flat with a window off the fold (split screen) reports `closed`; Android never gives `unknown`.
    */
   state?: HingeState;
   /**
-   * The angle of the hinge in degrees (on iOS to tenths). Missing when the state is `unknown` and where the system
+   * The angle of the hinge in degrees, to tenths. Missing when the state is `unknown` and where the system
    * gives no angle.
    */
   angle?: number;

package/src/interfaces/Options.ts

@@ -107,6 +107,7 @@ export type {
   ScreenAnimationOptions,
   SharedElementTransition,
   StackAnimationOptions,
+  StackPopAnimationOptions,
   StackPushAnimationOptions,
   TopBarAnimationOptions,
   ViewAnimationOptions,

package/src/interfaces/contract/commands.json

@@ -0,0 +1,101 @@
+{
+  "description": "Every command with a promise (an async method of src/adapters/NativeANNTurboModule.ts): what it resolves with, whether the navigation state goes before its answer (`state`), and whether `ANN.CommandCompleted` follows the answer (`completed`). scripts/contract.mjs makes ios/Contract/ANNCommandContract.{h,mm} and android/.../react/CommandContract.kt from it, and fails when a command of the spec is missing here or a command here is not in the spec.",
+  "commands": [
+    {
+      "name": "setRoot",
+      "resolves": "the id of the root, once the root and the layout's modals and overlays show",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "push",
+      "resolves": "the id of the screen that shows; of a pair, the pair's id",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "preparePush",
+      "resolves": "the frame `{ width, height, padding }` of the prepared screen, or null; always null on iOS",
+      "state": false,
+      "completed": false
+    },
+    {
+      "name": "pop",
+      "resolves": "the id of the screen that went",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "popTo",
+      "resolves": "the id of the screen it went back to",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "popToRoot",
+      "resolves": "the id of the first screen of the stack",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "setStackRoot",
+      "resolves": "the id of the new top screen",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "showModal",
+      "resolves": "the id of the modal's root",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "dismissModal",
+      "resolves": "the id of the modal's root",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "dismissAllModals",
+      "resolves": "an empty string",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "showOverlay",
+      "resolves": "the id of the overlay's root",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "dismissOverlay",
+      "resolves": "the id of the overlay's root",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "dismissAllOverlays",
+      "resolves": "an empty string",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "showInColumn",
+      "resolves": "the id of the screen that shows",
+      "state": true,
+      "completed": true
+    },
+    {
+      "name": "setColumnShown",
+      "resolves": "nothing once the columns stopped moving (`undefined` on iOS, `null` on Android)",
+      "state": true,
+      "completed": false
+    },
+    {
+      "name": "getLaunchLink",
+      "resolves": "the link that launched the app, or null",
+      "state": false,
+      "completed": false
+    }
+  ]
+}

package/src/interfaces/options/animations.ts

@@ -354,8 +354,11 @@ export interface StackAnimationOptions {
   enabled?: boolean;
   /**
    * Whether to wait for the new top screen to be drawn before the transition. Without it, the transition waits for the
-   * content of a screen with an animation of its own for half a second at most, `true` waits as long as it takes,
-   * `false` starts at once, also with an animation of its own.
+   * first mount of the new top's content, half a second at most, with the platform's transition as with an animation
+   * of its own; on a push the options the screen sets as it renders for the first time (`useScreenOptions`, such as
+   * its title) are in its bar from the first frame. `true` waits as long as it takes, `false` starts at once, the
+   * content drawing as it comes ((Android) a push with `appProvider` still renders the screen first). (iOS) The
+   * components of the bar are waited for too, each to its own limit.
    */
   waitForRender?: boolean;
   /**
@@ -402,6 +405,20 @@ export interface StackPushAnimationOptions extends StackAnimationOptions {
   zoom?: ZoomTransitionOptions;
 }
 
+/**
+ * The animation of a pop, read from the screen that goes. As {@link StackAnimationOptions}, with the preview of the
+ * back gesture on Android.
+ */
+export interface StackPopAnimationOptions extends StackAnimationOptions {
+  /**
+   * (Android 14+) Whether the back gesture on a pushed screen previews its pop as the user swipes: the screen shrinks
+   * and follows the finger, the screen under it shows behind. `false` pops the screen when the gesture is released,
+   * as on Android 13 and older; back still pops it. iOS ignores it: its swipe back is UIKit's.
+   * @default true
+   */
+  preview?: boolean;
+}
+
 /**
  * The animation of `setStackRoot`, read from the new top screen. As {@link StackAnimationOptions}: without an animation
  * of its own, iOS plays the push animation of the new top screen or UIKit's transition, and Android plays a fade
@@ -465,8 +482,11 @@ export interface ModalAnimationOptions extends EnterExitAnimationOptions {
 export interface AnimationOptions {
   /** The push of a screen, read from the screen that comes. */
   push?: StackPushAnimationOptions;
-  /** The pop of a screen, also `popTo` and `popToRoot`, read from the screen that goes. A swipe back is always the system's. */
-  pop?: StackAnimationOptions;
+  /**
+   * The pop of a screen, also `popTo` and `popToRoot`, read from the screen that goes. The swipe back of iOS is
+   * UIKit's; the back gesture of Android previews the pop (`preview`).
+   */
+  pop?: StackPopAnimationOptions;
   /** The replacing of the screens of a stack, read from the new top screen. */
   setStackRoot?: SetStackRootAnimationOptions;
   /**

package/src/interfaces/options/buttons.ts

@@ -138,8 +138,10 @@ export type OptionsTopBarButtonMenuElement =
 /**
  * A menu of the top bar: the menu of a button, the overflow menu, the menu of the title. A list of `items` sent with
  * `mergeOptions` replaces the earlier list as a whole, and `items: []` removes the menu; `title` and
- * `singleSelection` merge field by field (iOS). What the user picks in a `singleSelection` menu is written back into
- * the options of the screen and survives the screen showing again.
+ * `singleSelection` merge field by field (iOS). What the user picks in a `singleSelection` menu stays with the screen,
+ * through it showing again, a `mergeOptions` that sends the same items again and `setDefaultOptions`; a `mergeOptions`
+ * into the screen that changes the checks of that menu's level, or takes the item away, replaces it. A merge into the
+ * stack or the tabs around the screen doesn't.
  */
 export interface OptionsTopBarButtonMenu {
   /** The title above the items. (iOS) Android doesn't show it. */
@@ -285,8 +287,10 @@ export interface OptionsTopBarButton {
   badgeTextColor?: Color;
   /**
    * (iOS) Whether the button is a toggle: every press flips `selected` and sends a press with the new state. The state
-   * is written into the options of the screen under the button's id, so it survives the screen showing again, and a
-   * button set again without `selected` takes the state of the button with the same id. Not for component buttons,
+   * stays with the screen under the button's id, through it showing again, a `mergeOptions` that sends the same
+   * buttons again and `setDefaultOptions`; a `mergeOptions` into the screen that changes `selected` replaces it (a merge
+   * into the stack around it doesn't). A button set again
+   * without `selected` takes the state of the button with the same id. Not for component buttons,
    * buttons with `iconBackground`, and `showText` buttons.
    */
   toggle?: boolean;
@@ -351,7 +355,11 @@ export interface OptionsTopBarButton {
  * replaces it.
  */
 export interface OptionsTopBarButtonComponent {
-  /** The id of the component. Without it, the library gives one. The same `name` and `id` mean the same component. */
+  /**
+   * The id of the component. Without it, the library gives one made of the screen, the component's place in the
+   * options and its `name`: it stays the same for every `mergeOptions` of the screen, so the mounted component stays
+   * and only its props change. The same `name` and `id` mean the same component.
+   */
   id?: string;
   /** The name of the registered component. */
   name: string;