@sigx/lynx-navigation 0.2.0 → 0.4.1

package/src/internal/layer-plan.ts

@@ -0,0 +1,187 @@
+/**
+ * Pure layer-plan computation for `<Stack>`'s render.
+ *
+ * Given (stack, transition, progress), produces an ordered list of
+ * `Layer`s — each is an entry to render plus an optional transform
+ * spec for animation. The Stack render emits one absolutely-positioned
+ * `<view>` per layer, stacked bottom-to-top in document order.
+ *
+ * Why this is its own module: the layer-selection logic is the only
+ * non-obvious part of the navigator's render path, and the rules are
+ * easier to read (and unit-test) as a pure function over the
+ * navigator's state than as inline render branches.
+ *
+ * Rules:
+ *
+ *  - **Idle (no transition).** Render the topmost non-overlay entry
+ *    as the base, plus every overlay entry above it. Overlays
+ *    (`modal` / `fullScreen` / `transparent-modal`) keep their
+ *    underneath mounted; cards replace their underneath in the base
+ *    layer.
+ *
+ *  - **Card transition.** Two layers: the underneath entry (animated
+ *    with the parallax-card-underneath spec) and the top entry
+ *    (animated with the slide-in-from-right spec). After the
+ *    transition completes, the idle rule kicks in — the underneath
+ *    unmounts because the new top becomes the sole base.
+ *
+ *  - **Overlay transition.** The full idle layer stack up through the
+ *    underneath entry stays static (no transform). The animated top
+ *    is the only layer with a transform. After the transition, the
+ *    overlay either joins the static idle stack (push) or unmounts
+ *    (pop).
+ *
+ * The Layer.key for the Stack render is
+ * `layer-${entry.key}-${animVariant(layer.animation)}`. The variant
+ * suffix forces a remount when an entry transitions from animated to
+ * static (or vice versa) — `useAnimatedStyle` can't re-bind mid-life,
+ * so we get a fresh `useAnimatedStyle` call per animation state.
+ * Modal underneath layers never animate, so they stay statically
+ * keyed across the modal lifecycle and their state (per-tab Stack,
+ * scroll, in-flight inputs) survives.
+ */
+import type { SharedValue } from '@sigx/lynx';
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from './screen-width.js';
+import type {
+    Presentation,
+    StackEntry,
+    TransitionKind,
+    TransitionState,
+} from '../types.js';
+
+const PARALLAX_FACTOR = 0.3;
+
+export type LayerAnimation = {
+    axis: 'translateX' | 'translateY';
+    inputRange: readonly [number, number];
+    outputRange: readonly [number, number];
+    progress: SharedValue<number>;
+};
+
+export interface Layer {
+    /** The entry whose component renders inside this layer. */
+    readonly entry: StackEntry;
+    /** When non-null, the layer's host view binds a `useAnimatedStyle` mapper. */
+    readonly animation: LayerAnimation | null;
+}
+
+export function isOverlayPresentation(p: Presentation): boolean {
+    return p === 'modal' || p === 'fullScreen' || p === 'transparent-modal';
+}
+
+/**
+ * Suffix used in a layer's render key. Stable for the layer's
+ * lifetime (same entry, same animation kind) and changes when the
+ * animation transitions on/off so the Layer remounts and rebinds.
+ */
+export function animationVariant(animation: LayerAnimation | null): string {
+    if (!animation) return 'static';
+    // Output range alone identifies the transition shape — different
+    // animations (card-top vs card-underneath vs overlay-top, push vs
+    // pop) all land on different range tuples.
+    return `${animation.axis}:${animation.outputRange[0]}->${animation.outputRange[1]}`;
+}
+
+/**
+ * Card-presentation transition transforms. `role='top'` is the entry
+ * being pushed/popped; `role='underneath'` is the one parallaxing.
+ */
+function cardAnimation(
+    role: 'top' | 'underneath',
+    kind: TransitionKind,
+    progress: SharedValue<number>,
+): LayerAnimation {
+    if (kind === 'push') {
+        if (role === 'top') {
+            return { axis: 'translateX', inputRange: [0, 1], outputRange: [SCREEN_WIDTH, 0], progress };
+        }
+        return { axis: 'translateX', inputRange: [0, 1], outputRange: [0, -PARALLAX_FACTOR * SCREEN_WIDTH], progress };
+    }
+    // pop
+    if (role === 'top') {
+        return { axis: 'translateX', inputRange: [0, 1], outputRange: [0, SCREEN_WIDTH], progress };
+    }
+    return { axis: 'translateX', inputRange: [0, 1], outputRange: [-PARALLAX_FACTOR * SCREEN_WIDTH, 0], progress };
+}
+
+/**
+ * Overlay-presentation transition transform for the animated top.
+ * The underneath of an overlay transition does not animate (modal
+ * doesn't reposition its background); we render it as a static layer
+ * instead, so this function only produces the top's transform.
+ */
+function overlayTopAnimation(
+    kind: TransitionKind,
+    progress: SharedValue<number>,
+): LayerAnimation {
+    if (kind === 'push') {
+        return { axis: 'translateY', inputRange: [0, 1], outputRange: [SCREEN_HEIGHT, 0], progress };
+    }
+    return { axis: 'translateY', inputRange: [0, 1], outputRange: [0, SCREEN_HEIGHT], progress };
+}
+
+/**
+ * Compute the visible-layer list for one render of `<Stack>`. Pure —
+ * unit-testable independently of the renderer.
+ */
+export function computeLayers(
+    stack: readonly StackEntry[],
+    transition: TransitionState | null,
+    progress: SharedValue<number> | null,
+): Layer[] {
+    if (!transition) {
+        // Idle: topmost non-overlay base + any overlays above it.
+        let baseIdx = stack.length - 1;
+        while (baseIdx > 0 && isOverlayPresentation(stack[baseIdx].presentation)) {
+            baseIdx -= 1;
+        }
+        return stack.slice(baseIdx).map((entry) => ({ entry, animation: null }));
+    }
+
+    // A transition is in flight. `progress` may still be null when
+    // animations are disabled — produce static layers in that case
+    // (the animation never plays; the transition timer just ticks).
+    const isOverlay = isOverlayPresentation(transition.topEntry.presentation);
+    if (!isOverlay) {
+        // Card transition: just the two participating entries, both
+        // animated (parallax underneath + slide top).
+        return [
+            {
+                entry: transition.underneathEntry,
+                animation: progress ? cardAnimation('underneath', transition.kind, progress) : null,
+            },
+            {
+                entry: transition.topEntry,
+                animation: progress ? cardAnimation('top', transition.kind, progress) : null,
+            },
+        ];
+    }
+
+    // Overlay transition: render the full idle layer stack up through
+    // the underneath entry (all static — they don't animate) plus the
+    // animated top.
+    const underneathIdx = stack.findIndex(
+        (e) => e.key === transition.underneathEntry.key,
+    );
+    // If the underneath isn't in the stack (e.g. mid-pop where the
+    // stack mutation already removed an entry), fall back to the
+    // current top of the stack.
+    const lastStaticIdx = underneathIdx >= 0 ? underneathIdx : stack.length - 1;
+
+    let baseIdx = lastStaticIdx;
+    while (baseIdx > 0 && isOverlayPresentation(stack[baseIdx].presentation)) {
+        baseIdx -= 1;
+    }
+
+    const staticLayers: Layer[] = stack
+        .slice(baseIdx, lastStaticIdx + 1)
+        .map((entry) => ({ entry, animation: null }));
+
+    return [
+        ...staticLayers,
+        {
+            entry: transition.topEntry,
+            animation: progress ? overlayTopAnimation(transition.kind, progress) : null,
+        },
+    ];
+}

package/src/internal/screen-width.ts

@@ -1,34 +1,42 @@
 /**
- * Logical screen width (in dp) read from `lynx.SystemInfo` at module load.
- * Falls back to 400 (typical phone) if SystemInfo isn't available — module
- * load happens BG-side after the bundle initializes, by which time
- * `lynx.SystemInfo` is populated, so the fallback only fires in tests / SSR /
- * non-Lynx hosts.
+ * Logical screen dimensions (in dp) read from `lynx.SystemInfo` at module
+ * load. Falls back to typical phone values if SystemInfo isn't available —
+ * module load happens BG-side after the bundle initializes, by which time
+ * `lynx.SystemInfo` is populated, so the fallback only fires in tests /
+ * SSR / non-Lynx hosts.
  *
  * Used by:
- *   - `<ScreenContainer>` for the slide-from-right transform output range.
+ *   - `<ScreenContainer>` for the slide-from-right (translateX) and
+ *     slide-from-bottom (translateY, modal) transform output ranges.
  *   - `<EdgeBackHandle>` for the gesture commit threshold (`dx / width`).
  *
  * Both must agree, otherwise the commit threshold and the animation
- * geometry won't line up. Single shared constant avoids drift.
+ * geometry won't line up. Single shared module avoids drift.
  */
 
 declare const lynx:
-    | { SystemInfo?: { pixelWidth?: number; pixelRatio?: number } }
+    | {
+        SystemInfo?: {
+            pixelWidth?: number;
+            pixelHeight?: number;
+            pixelRatio?: number;
+        };
+    }
     | undefined;
 
-function readScreenWidth(): number {
+function readDp(prop: 'pixelWidth' | 'pixelHeight', fallback: number): number {
     try {
         const info = typeof lynx !== 'undefined' ? lynx?.SystemInfo : undefined;
-        const pw = info?.pixelWidth;
+        const px = info?.[prop];
         const pr = info?.pixelRatio || 1;
-        if (typeof pw === 'number' && pw > 0) {
-            return Math.round(pw / pr);
+        if (typeof px === 'number' && px > 0) {
+            return Math.round(px / pr);
         }
     } catch {
         // Lynx globals not present (test env / SSR) — use fallback.
     }
-    return 400;
+    return fallback;
 }
 
-export const SCREEN_WIDTH = readScreenWidth();
+export const SCREEN_WIDTH = readDp('pixelWidth', 400);
+export const SCREEN_HEIGHT = readDp('pixelHeight', 800);

package/src/navigator/core.ts

@@ -61,7 +61,8 @@ export interface NavigatorState {
      */
     readonly _screens: {
         register(registry: ScreenRegistry): void;
-        unregister(entryKey: string): void;
+        /** Identity-checked: no-op when a newer registry has taken the slot. */
+        unregister(registry: ScreenRegistry): void;
         get(entryKey: string): ScreenRegistry | undefined;
     };
     /**
@@ -520,8 +521,18 @@ function createScreenRegistries(): NavigatorState['_screens'] {
             // would self-loop, so we untrack the bump.
             untrack(() => { version.v = version.v + 1; });
         },
-        unregister(key: string) {
-            byKey.delete(key);
+        // Identity-checked unregister: deletes the entry only if the
+        // currently-registered registry is the *same instance* the caller
+        // holds. Without this, the transition→idle handoff (which can
+        // mount a new `<EntryScope>` for the same entry-key before the
+        // old one unmounts) would let the old scope's `onUnmounted` wipe
+        // out the fresh registry — leaving `screens.get(key)` returning
+        // undefined and chrome consumers (NavHeader) falling back to the
+        // route-name as title with all slot fills gone.
+        unregister(reg: ScreenRegistry) {
+            const cur = byKey.get(reg.entry.key);
+            if (cur !== reg) return;
+            byKey.delete(reg.entry.key);
             untrack(() => { version.v = version.v + 1; });
         },
         get(key: string) {

package/dist/components/ScreenContainer.d.ts

@@ -1,18 +0,0 @@
-import { type ComponentFactory, type Define, type SharedValue } from '@sigx/lynx';
-import type { RouteMap, StackEntry, TransitionKind, TransitionRole } from '../types.js';
-type ScreenContainerProps = Define.Prop<'entry', StackEntry, true> & Define.Prop<'routes', RouteMap, true> & Define.Prop<'role', TransitionRole, true> & Define.Prop<'kind', TransitionKind, true> & Define.Prop<'progress', SharedValue<number>, true>;
-/**
- * Animated screen slot — absolutely positioned, MT-bound translateX driven by
- * the navigator's progress SharedValue. Used during transitions to render the
- * top + underneath entries together.
- *
- * Each instance is keyed by `${entry.key}-${role}-${kind}` in the parent so a
- * role/kind change forces a fresh mount with a fresh `useAnimatedStyle`
- * binding (the binding is set at setup and can't be re-keyed mid-life). State
- * loss across transition boundaries is accepted in v0.2; persistent screen
- * state (scroll position, input fields surviving navigations) is a polish
- * item for Phase 0.5+.
- */
-export declare const ScreenContainer: ComponentFactory<ScreenContainerProps, void, {}>;
-export {};
-//# sourceMappingURL=ScreenContainer.d.ts.map

package/dist/components/ScreenContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScreenContainer.d.ts","sourceRoot":"","sources":["../../src/components/ScreenContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,gBAAgB,EACrB,KAAK,MAAM,EAEX,KAAK,WAAW,EACnB,MAAM,YAAY,CAAC;AAIpB,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAwCxF,KAAK,oBAAoB,GACnB,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,CAAC,GACtC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,GACrC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,IAAI,CAAC,GACzC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,IAAI,CAAC,GACzC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;AAEzD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,kDA0C1B,CAAC"}

package/dist/components/ScreenContainer.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
-import { component, useMainThreadRef, useAnimatedStyle, } from '@sigx/lynx';
-import { Suspense, isLazyComponent } from '@sigx/lynx';
-import { SCREEN_WIDTH } from '../internal/screen-width.js';
-import { EntryScope } from './EntryScope.js';
-/**
- * Slide-from-right transition geometry. `SCREEN_WIDTH` is read from
- * `lynx.SystemInfo` at module load so the animation lands the screen at
- * exactly translateX=0 (centered) at progress=1, rather than overshooting
- * into the parent's clip region. `<EdgeBackHandle>` reads the same
- * constant — they have to agree, otherwise the gesture commit threshold
- * and the animation geometry don't line up.
- */
-const PARALLAX_FACTOR = 0.3;
-/**
- * Compute the `translateX` range for a given (role, kind) pair. Progress
- * always runs 0 → 1; the role and kind decide what visual state each end of
- * the progress represents.
- *
- * Slide-from-right semantics:
- *  - PUSH: new top slides in from the right; old top parallaxes left.
- *  - POP:  current top slides out to the right; underneath returns from the
- *    parallax-left position.
- */
-function getRangeParams(role, kind) {
-    if (kind === 'push') {
-        if (role === 'top') {
-            return { inputRange: [0, 1], outputRange: [SCREEN_WIDTH, 0] };
-        }
-        return { inputRange: [0, 1], outputRange: [0, -PARALLAX_FACTOR * SCREEN_WIDTH] };
-    }
-    // pop
-    if (role === 'top') {
-        return { inputRange: [0, 1], outputRange: [0, SCREEN_WIDTH] };
-    }
-    return { inputRange: [0, 1], outputRange: [-PARALLAX_FACTOR * SCREEN_WIDTH, 0] };
-}
-/**
- * Animated screen slot — absolutely positioned, MT-bound translateX driven by
- * the navigator's progress SharedValue. Used during transitions to render the
- * top + underneath entries together.
- *
- * Each instance is keyed by `${entry.key}-${role}-${kind}` in the parent so a
- * role/kind change forces a fresh mount with a fresh `useAnimatedStyle`
- * binding (the binding is set at setup and can't be re-keyed mid-life). State
- * loss across transition boundaries is accepted in v0.2; persistent screen
- * state (scroll position, input fields surviving navigations) is a polish
- * item for Phase 0.5+.
- */
-export const ScreenContainer = component(({ props }) => {
-    const ref = useMainThreadRef(null);
-    const params = getRangeParams(props.role, props.kind);
-    useAnimatedStyle(ref, props.progress, 'translateX', params);
-    return () => {
-        const route = props.routes[props.entry.route];
-        if (!route)
-            return null;
-        const Comp = route.component;
-        if (typeof Comp !== 'function')
-            return null;
-        const entryParams = props.entry.params;
-        // Wrap lazy screens that declare a fallback in Suspense — see Stack.tsx
-        // for rationale.
-        const body = isLazyComponent(Comp) && route.fallback
-            ? (_jsx(Suspense, { fallback: route.fallback, children: _jsx(Comp, { ...entryParams }) }))
-            : _jsx(Comp, { ...entryParams });
-        return (_jsx("view", { "main-thread:ref": ref, style: {
-                position: 'absolute',
-                top: '0',
-                left: '0',
-                right: '0',
-                bottom: '0',
-                backgroundColor: '#0f172a',
-            }, children: _jsx(EntryScope, { entry: props.entry, children: body }, props.entry.key) }));
-    };
-});
-//# sourceMappingURL=ScreenContainer.js.map

package/dist/components/ScreenContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScreenContainer.js","sourceRoot":"","sources":["../../src/components/ScreenContainer.tsx"],"names":[],"mappings":"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"}

package/src/components/ScreenContainer.tsx

@@ -1,114 +0,0 @@
-import {
-    component,
-    useMainThreadRef,
-    useAnimatedStyle,
-    type ComponentFactory,
-    type Define,
-    type MainThread,
-    type SharedValue,
-} from '@sigx/lynx';
-import { Suspense, isLazyComponent } from '@sigx/lynx';
-import type { MapperParams } from '@sigx/lynx';
-import { SCREEN_WIDTH } from '../internal/screen-width.js';
-import type { RouteMap, StackEntry, TransitionKind, TransitionRole } from '../types.js';
-import { EntryScope } from './EntryScope.js';
-
-/**
- * Slide-from-right transition geometry. `SCREEN_WIDTH` is read from
- * `lynx.SystemInfo` at module load so the animation lands the screen at
- * exactly translateX=0 (centered) at progress=1, rather than overshooting
- * into the parent's clip region. `<EdgeBackHandle>` reads the same
- * constant — they have to agree, otherwise the gesture commit threshold
- * and the animation geometry don't line up.
- */
-const PARALLAX_FACTOR = 0.3;
-
-/**
- * Compute the `translateX` range for a given (role, kind) pair. Progress
- * always runs 0 → 1; the role and kind decide what visual state each end of
- * the progress represents.
- *
- * Slide-from-right semantics:
- *  - PUSH: new top slides in from the right; old top parallaxes left.
- *  - POP:  current top slides out to the right; underneath returns from the
- *    parallax-left position.
- */
-function getRangeParams(
-    role: TransitionRole,
-    kind: TransitionKind,
-): MapperParams['translateX'] {
-    if (kind === 'push') {
-        if (role === 'top') {
-            return { inputRange: [0, 1], outputRange: [SCREEN_WIDTH, 0] };
-        }
-        return { inputRange: [0, 1], outputRange: [0, -PARALLAX_FACTOR * SCREEN_WIDTH] };
-    }
-    // pop
-    if (role === 'top') {
-        return { inputRange: [0, 1], outputRange: [0, SCREEN_WIDTH] };
-    }
-    return { inputRange: [0, 1], outputRange: [-PARALLAX_FACTOR * SCREEN_WIDTH, 0] };
-}
-
-type ScreenContainerProps =
-    & Define.Prop<'entry', StackEntry, true>
-    & Define.Prop<'routes', RouteMap, true>
-    & Define.Prop<'role', TransitionRole, true>
-    & Define.Prop<'kind', TransitionKind, true>
-    & Define.Prop<'progress', SharedValue<number>, true>;
-
-/**
- * Animated screen slot — absolutely positioned, MT-bound translateX driven by
- * the navigator's progress SharedValue. Used during transitions to render the
- * top + underneath entries together.
- *
- * Each instance is keyed by `${entry.key}-${role}-${kind}` in the parent so a
- * role/kind change forces a fresh mount with a fresh `useAnimatedStyle`
- * binding (the binding is set at setup and can't be re-keyed mid-life). State
- * loss across transition boundaries is accepted in v0.2; persistent screen
- * state (scroll position, input fields surviving navigations) is a polish
- * item for Phase 0.5+.
- */
-export const ScreenContainer = component<ScreenContainerProps>(({ props }) => {
-    const ref = useMainThreadRef<MainThread.Element | null>(null);
-    const params = getRangeParams(props.role, props.kind);
-    useAnimatedStyle(ref, props.progress, 'translateX', params);
-
-    return () => {
-        const route = props.routes[props.entry.route];
-        if (!route) return null;
-        const Comp = route.component as unknown as ComponentFactory<
-            Record<string, unknown>,
-            unknown,
-            unknown
-        >;
-        if (typeof Comp !== 'function') return null;
-        const entryParams = props.entry.params as Record<string, unknown>;
-        // Wrap lazy screens that declare a fallback in Suspense — see Stack.tsx
-        // for rationale.
-        const body = isLazyComponent(Comp) && route.fallback
-            ? (
-                <Suspense fallback={route.fallback as never}>
-                    <Comp {...entryParams} />
-                </Suspense>
-            )
-            : <Comp {...entryParams} />;
-        return (
-            <view
-                main-thread:ref={ref}
-                style={{
-                    position: 'absolute',
-                    top: '0',
-                    left: '0',
-                    right: '0',
-                    bottom: '0',
-                    backgroundColor: '#0f172a',
-                }}
-            >
-                <EntryScope key={props.entry.key} entry={props.entry}>
-                    {body}
-                </EntryScope>
-            </view>
-        );
-    };
-});