@symbiote-native/navigation 2.0.1 → 2.0.2

package/build/angular/tabs/index.js

@@ -0,0 +1,263 @@
+// Tab, the Angular lifecycle half. The focused-index router (tab-router-state) and the tab-bar
+// Descriptor builder (render-tabs) live in @symbiote-native/navigation core, shared verbatim with
+// the React/Vue adapters; here Angular supplies the lifecycle - a signal for the focused index, a
+// per-instance counter for route-key generation, `jumpTo`/`setParams` as plain public methods
+// directly on the class (no ref forwarding needed, see stack.ts's header, same reasoning: `Tab
+// implements ITabNavigatorHandle`) - plus the descriptor bridge (`symbiote-descriptor-outlet`,
+// `@symbiote-native/angular`) for the tab-bar leaf, exactly like Stack bridges its header config.
+// Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints
+// ordinary `symbiote-view`/`symbiote-text` primitives via the shared render fn, so there is no
+// react-native-screens ViewConfig to register - Tab needs no `../register` import. Every tag this
+// template names (`View`, `symbiote-descriptor-outlet`) is a REAL imported Angular component (no
+// raw non-dashed native tag names the way stack.ts needs `NO_ERRORS_SCHEMA` for), so no loosened
+// schema is needed here at all.
+//
+// RESOLVED (see stack.ts's header, identical reasoning): `'Tab'` has an `ANCHOR_HOST_COMPONENTS`
+// entry in `adapters/angular/src/renderer.ts`, so a real device build paints `<Tab>` correctly as
+// a nested tag.
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, signal, untracked, } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { dlog } from '@symbiote-native/engine';
+import { DescriptorOutlet, View } from '@symbiote-native/angular';
+import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialTabState, createNavigationEmitter, diffFocusedRoute, isFocusedRoute, renderTabBar, tabRouterReducer, } from '../../core/index.js';
+import { NavigationScopeDirective } from '../navigation-scope.directive.js';
+import { TabScreenDirective } from '../tab-screen.directive.js';
+const TAB_ROOT_STYLE = { flex: 1 };
+const TAB_CONTENT_STYLE = { flex: 1 };
+let tabInstanceCounter = 0;
+let Tab = (() => {
+    let _classDecorators = [Component({
+            selector: 'Tab',
+            standalone: true,
+            imports: [NgComponentOutlet, NavigationScopeDirective, DescriptorOutlet, View],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `
+    <View [style]="rootStyle">
+      <View [style]="contentStyle">
+        @if (focusedRoute(); as route) {
+          @if (componentForRoute(route); as component) {
+            <ng-container
+              [symbioteNavigationScope]="route"
+              [navigation]="this"
+              [emitter]="focusedRouteEmitter()"
+            >
+              <ng-container *ngComponentOutlet="component" />
+            </ng-container>
+          }
+        }
+      </View>
+      <symbiote-descriptor-outlet [node]="tabBarDescriptor()" />
+    </View>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _tabScreenChildren_decorators;
+    let _tabScreenChildren_initializers = [];
+    let _tabScreenChildren_extraInitializers = [];
+    let _initialRouteName_decorators;
+    let _initialRouteName_initializers = [];
+    let _initialRouteName_extraInitializers = [];
+    let _screenOptions_decorators;
+    let _screenOptions_initializers = [];
+    let _screenOptions_extraInitializers = [];
+    var Tab = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _tabScreenChildren_decorators = [ContentChildren(TabScreenDirective)];
+            _initialRouteName_decorators = [Input()];
+            _screenOptions_decorators = [Input()];
+            __esDecorate(null, null, _tabScreenChildren_decorators, { kind: "field", name: "tabScreenChildren", static: false, private: false, access: { has: obj => "tabScreenChildren" in obj, get: obj => obj.tabScreenChildren, set: (obj, value) => { obj.tabScreenChildren = value; } }, metadata: _metadata }, _tabScreenChildren_initializers, _tabScreenChildren_extraInitializers);
+            __esDecorate(null, null, _initialRouteName_decorators, { kind: "field", name: "initialRouteName", static: false, private: false, access: { has: obj => "initialRouteName" in obj, get: obj => obj.initialRouteName, set: (obj, value) => { obj.initialRouteName = value; } }, metadata: _metadata }, _initialRouteName_initializers, _initialRouteName_extraInitializers);
+            __esDecorate(null, null, _screenOptions_decorators, { kind: "field", name: "screenOptions", static: false, private: false, access: { has: obj => "screenOptions" in obj, get: obj => obj.screenOptions, set: (obj, value) => { obj.screenOptions = value; } }, metadata: _metadata }, _screenOptions_initializers, _screenOptions_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            Tab = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        tabScreenChildren = __runInitializers(this, _tabScreenChildren_initializers, void 0);
+        initialRouteName = (__runInitializers(this, _tabScreenChildren_extraInitializers), __runInitializers(this, _initialRouteName_initializers, void 0));
+        screenOptions = (__runInitializers(this, _initialRouteName_extraInitializers), __runInitializers(this, _screenOptions_initializers, void 0));
+        rootStyle = (__runInitializers(this, _screenOptions_extraInitializers), TAB_ROOT_STYLE);
+        contentStyle = TAB_CONTENT_STYLE;
+        routeIdPrefix = `tab-${(tabInstanceCounter += 1)}`;
+        // Keyed by name -> the LIVE TabScreenDirective instance - see stack.ts's matching comment for
+        // why a snapshot copy would go stale on an in-place `[options]`/`[component]` change.
+        registry = new Map();
+        tabScreenChildrenSubscription;
+        stateSignal = signal(undefined);
+        state = this.stateSignal.asReadonly();
+        currentEmitterKey;
+        currentEmitter;
+        jumpTo = (name, params) => this.dispatch({ type: 'jumpTo', name, params });
+        setParams = (params, key) => this.dispatch({ type: 'setParams', key, params });
+        ngAfterContentInit() {
+            this.rebuildRegistry();
+            this.initializeState();
+            this.tabScreenChildrenSubscription = this.tabScreenChildren.changes.subscribe(() => {
+                this.rebuildRegistry();
+            });
+        }
+        ngOnDestroy() {
+            this.tabScreenChildrenSubscription?.unsubscribe();
+            if (this.currentEmitter)
+                this.currentEmitter.emit(NAVIGATION_EVENT_BLUR);
+        }
+        rebuildRegistry() {
+            this.registry.clear();
+            for (const screen of this.tabScreenChildren) {
+                this.registry.set(screen.name, screen);
+            }
+        }
+        routesFromRegistry() {
+            return Array.from(this.registry.entries()).map(([name, entry]) => ({
+                key: `${this.routeIdPrefix}-${name}`,
+                name,
+                params: entry.initialParams,
+            }));
+        }
+        initializeState() {
+            if (this.stateSignal() !== undefined)
+                return;
+            const routes = this.routesFromRegistry();
+            if (routes.length === 0)
+                dlog('Tab: no <ng-template symbioteTabScreen> children registered');
+            this.stateSignal.set(createInitialTabState(routes, this.initialRouteName));
+        }
+        dispatch(action) {
+            const current = this.stateSignal();
+            if (current === undefined)
+                return;
+            this.stateSignal.set(tabRouterReducer(current, action));
+        }
+        resolveTabOptions(entry, route) {
+            const props = { route, navigation: this };
+            const own = typeof entry.options === 'function' ? entry.options(props) : entry.options;
+            return { ...this.screenOptions, ...own };
+        }
+        focusedRoute() {
+            const state = this.stateSignal();
+            return state?.routes[state.index];
+        }
+        componentForRoute(route) {
+            return this.registry.get(route.name)?.component ?? null;
+        }
+        // Lazily creates/replaces the focused route's emitter and synthesizes focus/blur - Tab paints
+        // its own bar in pure JS (no native onAppear/onDisappear the way Stack's RNSScreen has), so
+        // focus/blur is synthesized here exactly like react/tabs.ts's own useEffect does, just idempotent
+        // per read (called repeatedly with the same key during one CD pass) instead of dependency-array
+        // gated. Keyed on the route KEY, not the object, so a setParams-only change doesn't re-fire.
+        //
+        // Called from the template ([emitter]="focusedRouteEmitter()"), which runs inside Angular's
+        // reactive-read tracking context for the current CD pass - unlike React's useEffect, which runs
+        // in a separate post-commit phase. Two consequences of that, both fixed below:
+        //
+        // 1. Writing a signal from inside a tracked template read throws Angular's NG600 ("signal write
+        //    during a template execution") - untracked() opts this whole synthesis out of that tracking
+        //    context, matching what the post-commit useEffect phase gives React for free.
+        // 2. The NEW route's screen component (injectIsFocused's listener source) is created by
+        //    *ngComponentOutlet AFTER this binding is evaluated, but still within the SAME synchronous
+        //    template refresh - so emitting FOCUS right here fires to zero listeners and is silently
+        //    lost forever (isFocused stays false permanently, even for the very first-focused screen).
+        //    queueMicrotask defers the FOCUS emit past the end of the current synchronous refresh
+        //    (which includes the new screen's construction), guaranteeing its injectIsFocused()
+        //    listener is already attached by the time it fires. BLUR doesn't need this: the outgoing
+        //    screen's listener was already attached on an earlier tick, so it's safe to fire now.
+        focusedRouteEmitter() {
+            const key = this.focusedRoute()?.key;
+            return untracked(() => {
+                if (key === this.currentEmitterKey && this.currentEmitter)
+                    return this.currentEmitter;
+                const { blurKey, focusKey } = diffFocusedRoute(this.currentEmitterKey, key);
+                if (blurKey !== undefined && this.currentEmitter) {
+                    dlog('Tab: previous route blurred');
+                    this.currentEmitter.emit(NAVIGATION_EVENT_BLUR);
+                }
+                const emitter = createNavigationEmitter();
+                this.currentEmitter = emitter;
+                this.currentEmitterKey = key;
+                if (focusKey !== undefined) {
+                    queueMicrotask(() => {
+                        if (this.currentEmitter !== emitter)
+                            return; // superseded by a later switch
+                        dlog(`Tab: route "${this.focusedRoute()?.name}" focused`);
+                        emitter.emit(NAVIGATION_EVENT_FOCUS);
+                    });
+                }
+                return emitter;
+            });
+        }
+        tabBarDescriptor() {
+            const state = this.stateSignal();
+            const routes = state?.routes ?? [];
+            const focusedIndex = state?.index ?? 0;
+            const items = routes.map((route, index) => {
+                const entry = this.registry.get(route.name);
+                const focused = isFocusedRoute(index, focusedIndex);
+                if (!entry) {
+                    dlog(`Tab: no screen registered for route name "${route.name}"`);
+                    return { key: route.key, focused, label: route.name, passthrough: {} };
+                }
+                const options = this.resolveTabOptions(entry, route);
+                return {
+                    key: route.key,
+                    focused,
+                    label: options.tabBarLabel ?? options.title ?? route.name,
+                    icon: options.tabBarIcon,
+                    badge: options.tabBarBadge,
+                    activeTintColor: options.tabBarActiveTintColor,
+                    inactiveTintColor: options.tabBarInactiveTintColor,
+                    passthrough: {
+                        onPress: () => this.jumpTo(route.name),
+                        accessibilityRole: 'tab',
+                        accessibilityState: { selected: focused },
+                    },
+                };
+            });
+            const focusedRoute = this.focusedRoute();
+            const focusedEntry = focusedRoute ? this.registry.get(focusedRoute.name) : undefined;
+            const focusedOptions = focusedEntry && focusedRoute
+                ? this.resolveTabOptions(focusedEntry, focusedRoute)
+                : this.screenOptions;
+            return renderTabBar({ items, style: focusedOptions?.tabBarStyle, passthrough: {} });
+        }
+    };
+    return Tab = _classThis;
+})();
+export { Tab };

package/build/core/constants.d.ts

@@ -0,0 +1,27 @@
+export declare const RNS_SCREEN_VIEW_NAME = "RNSScreen";
+export declare const RNS_MODAL_SCREEN_VIEW_NAME = "RNSModalScreen";
+export declare const RNS_SCREEN_STACK_VIEW_NAME = "RNSScreenStack";
+export declare const RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME = "RNSScreenStackHeaderConfig";
+export declare const RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME = "RNSScreenStackHeaderSubview";
+export declare const RNS_SEARCH_BAR_VIEW_NAME = "RNSSearchBar";
+export declare const RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME = "RNSScreenContentWrapper";
+export declare const SCREEN_ON_APPEAR = "onAppear";
+export declare const SCREEN_ON_DISAPPEAR = "onDisappear";
+export declare const SCREEN_ON_WILL_APPEAR = "onWillAppear";
+export declare const SCREEN_ON_WILL_DISAPPEAR = "onWillDisappear";
+export declare const SCREEN_ON_DISMISSED = "onDismissed";
+export declare const SCREEN_ON_HEADER_BACK_BUTTON_CLICKED = "onHeaderBackButtonClicked";
+export declare const STACK_ON_FINISH_TRANSITIONING = "onFinishTransitioning";
+export declare const HEADER_ON_PRESS_BAR_BUTTON_ITEM = "onPressHeaderBarButtonItem";
+export declare const HEADER_ON_PRESS_BAR_BUTTON_MENU_ITEM = "onPressHeaderBarButtonMenuItem";
+export declare const SEARCH_BAR_ON_FOCUS = "onSearchFocus";
+export declare const SEARCH_BAR_ON_BLUR = "onSearchBlur";
+export declare const SEARCH_BAR_ON_SEARCH_BUTTON_PRESS = "onSearchButtonPress";
+export declare const SEARCH_BAR_ON_CANCEL_BUTTON_PRESS = "onCancelButtonPress";
+export declare const SEARCH_BAR_ON_CHANGE_TEXT = "onChangeText";
+export declare const SEARCH_BAR_ON_CLOSE = "onClose";
+export declare const SEARCH_BAR_ON_OPEN = "onOpen";
+export declare const SCREEN_ACTIVITY_STATE_FOCUSED = 2;
+export declare const SCREEN_ACTIVITY_STATE_INACTIVE = 0;
+export declare const STACK_DEFAULT_ANIMATION = "default";
+export declare const STACK_DEFAULT_PRESENTATION = "push";

package/build/core/constants.js

@@ -0,0 +1,61 @@
+// Framework-agnostic constants for the react-native-screens native stack primitives. symbiote
+// ships zero ViewConfig metadata for these views at runtime - the engine derives events and
+// color processors from react-native-screens' own codegen ViewConfig - this file only names the
+// Fabric view names and event prop keys every adapter binds against, plus the RNS activityState
+// convention (mirrors @react-navigation/native-stack's internal screen focus signaling).
+// The Fabric view names react-native-screens' codegen components register. descriptorFor passes
+// any non-`symbiote-` string through as a raw Fabric name, so the render fns emit these directly.
+export const RNS_SCREEN_VIEW_NAME = 'RNSScreen';
+// The modal-presentation twin of RNSScreen - see resolveScreenViewName's comment in
+// render-stack.ts for why a formSheet/modal screen MUST use this different Fabric name.
+export const RNS_MODAL_SCREEN_VIEW_NAME = 'RNSModalScreen';
+export const RNS_SCREEN_STACK_VIEW_NAME = 'RNSScreenStack';
+export const RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME = 'RNSScreenStackHeaderConfig';
+// The header-subview leaf react-native-screens itself uses to host arbitrary framework children
+// (left/right/back/title/center/searchBar) inside the header. Registered here for ground-truth
+// parity, but unconsumed by any fold in v1 scope: renderHeaderConfig's Descriptor never takes
+// framework children (see render-stack.ts), so mounting a subview child is left to the adapter.
+export const RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME = 'RNSScreenStackHeaderSubview';
+export const RNS_SEARCH_BAR_VIEW_NAME = 'RNSSearchBar';
+// react-native-screens' own JS layer (ScreenStackItem -> DebugContainer -> ScreenContentWrapper)
+// ALWAYS wraps a screen's content in this native view, `collapsable: false` so Fabric can never
+// flatten it away. RNSScreen.mm's `registerContentWrapper:contentHeightErrata:` is a no-op for
+// `push` (early-returns NO), but for `formSheet` it's how the native side ever learns the
+// content's real size - RNSScreenContentWrapper's `willMoveToWindow` walks up to the ancestor
+// RNSScreen and registers itself, and its `receivedReactFrame:` delegate callback is what feeds
+// the sheet's own height/detent machinery. Skipping this wrapper is harmless for `push` (why it
+// went unnoticed) but leaves a formSheet screen's native side with nothing to attach to at all.
+export const RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME = 'RNSScreenContentWrapper';
+// RNSScreen event prop keys (all DirectEventHandler in the codegen spec).
+export const SCREEN_ON_APPEAR = 'onAppear';
+export const SCREEN_ON_DISAPPEAR = 'onDisappear';
+export const SCREEN_ON_WILL_APPEAR = 'onWillAppear';
+export const SCREEN_ON_WILL_DISAPPEAR = 'onWillDisappear';
+export const SCREEN_ON_DISMISSED = 'onDismissed';
+export const SCREEN_ON_HEADER_BACK_BUTTON_CLICKED = 'onHeaderBackButtonClicked';
+// RNSScreenStack event prop key.
+export const STACK_ON_FINISH_TRANSITIONING = 'onFinishTransitioning';
+// RNSScreenStackHeaderConfig event prop keys (both DirectEventHandler in the codegen spec): a
+// plain bar-button-item press, and a press on a (possibly nested) menu action of a 'menu'-type
+// bar-button item.
+export const HEADER_ON_PRESS_BAR_BUTTON_ITEM = 'onPressHeaderBarButtonItem';
+export const HEADER_ON_PRESS_BAR_BUTTON_MENU_ITEM = 'onPressHeaderBarButtonMenuItem';
+// RNSSearchBar event prop keys (all DirectEventHandler in the codegen spec). onClose/onOpen are
+// Android-only per the codegen spec's own comment.
+export const SEARCH_BAR_ON_FOCUS = 'onSearchFocus';
+export const SEARCH_BAR_ON_BLUR = 'onSearchBlur';
+export const SEARCH_BAR_ON_SEARCH_BUTTON_PRESS = 'onSearchButtonPress';
+export const SEARCH_BAR_ON_CANCEL_BUTTON_PRESS = 'onCancelButtonPress';
+export const SEARCH_BAR_ON_CHANGE_TEXT = 'onChangeText';
+export const SEARCH_BAR_ON_CLOSE = 'onClose';
+export const SEARCH_BAR_ON_OPEN = 'onOpen';
+// activityState RNS reads to decide which screen is attached to the native hierarchy. Per
+// react-native-screens' native RNSScreen.mm (maybeAssertActivityStateProgressionOldValue), an
+// already-mounted NativeStack screen's activityState can never DECREASE via a plain prop update -
+// only 0 (detached) and 2 (attached + focused) are used; there is no "1 = transitioning" value in
+// @react-navigation/native-stack's actual algorithm (NativeStackView.native.tsx computes
+// `activityState={isInactive ? 0 : 2}`, never 1). See computeActivityState for the full rationale.
+export const SCREEN_ACTIVITY_STATE_FOCUSED = 2;
+export const SCREEN_ACTIVITY_STATE_INACTIVE = 0;
+export const STACK_DEFAULT_ANIMATION = 'default';
+export const STACK_DEFAULT_PRESENTATION = 'push';

package/build/core/drawer-options/index.d.ts

@@ -0,0 +1,64 @@
+import type { IPanResponderGestureState, ISymbioteEvent } from '@symbiote-native/engine';
+export type IDrawerType = 'front' | 'back' | 'slide' | 'permanent';
+export type IDrawerPosition = 'left' | 'right';
+export interface IDrawerOptions {
+    drawerType?: IDrawerType;
+    drawerPosition?: IDrawerPosition;
+    drawerWidth?: number;
+    overlayColor?: string;
+    swipeEnabled?: boolean;
+    swipeEdgeWidth?: number;
+    swipeMinDistance?: number;
+    swipeMinVelocity?: number;
+}
+export interface IDrawerScreenOptions {
+    title?: string;
+    drawerLabel?: string;
+}
+export declare const DRAWER_DEFAULT_TYPE: IDrawerType;
+export declare const DRAWER_DEFAULT_POSITION: IDrawerPosition;
+export declare const DRAWER_DEFAULT_WIDTH = 280;
+export declare const DRAWER_DEFAULT_OVERLAY_COLOR = "rgba(0, 0, 0, 0.5)";
+export declare const DRAWER_DEFAULT_SWIPE_ENABLED = true;
+export declare const DRAWER_DEFAULT_SWIPE_EDGE_WIDTH = 32;
+export declare const DRAWER_DEFAULT_SWIPE_MIN_DISTANCE = 60;
+export declare const DRAWER_DEFAULT_SWIPE_MIN_VELOCITY = 0.5;
+export declare function resolveDrawerWidth(options: IDrawerOptions): number;
+export declare function resolveDrawerType(options: IDrawerOptions): IDrawerType;
+export declare function resolveDrawerPosition(options: IDrawerOptions): IDrawerPosition;
+export type IDrawerGeometry = {
+    panelTranslateXClosed: number;
+    panelTranslateXOpen: number;
+    contentTranslateXClosed: number;
+    contentTranslateXOpen: number;
+    overlayOpacityClosed: number;
+    overlayOpacityOpen: number;
+};
+export declare function isDrawerAnimated(options: IDrawerOptions): boolean;
+export declare function isDrawerOverlayVisible(options: IDrawerOptions): boolean;
+export declare function resolveDrawerGeometry(options: IDrawerOptions): IDrawerGeometry;
+export type IDrawerInterpolationRange = {
+    inputRange: readonly [number, number];
+    outputRange: readonly [number, number];
+};
+export type IDrawerContentSlotInterpolation = {
+    translateX: IDrawerInterpolationRange;
+};
+export type IDrawerOverlaySlotInterpolation = {
+    opacity: IDrawerInterpolationRange;
+    translateX: IDrawerInterpolationRange;
+};
+export type IDrawerPanelSlotInterpolation = {
+    translateX: IDrawerInterpolationRange;
+};
+export declare function resolveDrawerSlotInterpolation(geometry: IDrawerGeometry, slot: 'content'): IDrawerContentSlotInterpolation;
+export declare function resolveDrawerSlotInterpolation(geometry: IDrawerGeometry, slot: 'overlay'): IDrawerOverlaySlotInterpolation;
+export declare function resolveDrawerSlotInterpolation(geometry: IDrawerGeometry, slot: 'panel'): IDrawerPanelSlotInterpolation;
+export declare function isSwipeStartInEdge(startX: number, screenWidth: number, isOpen: boolean, options: IDrawerOptions): boolean;
+export declare function isHorizontalDrag(gestureState: IPanResponderGestureState): boolean;
+export type ISwipeIntent = 'open' | 'close';
+export declare function resolveSwipeIntent(gestureState: IPanResponderGestureState, isOpen: boolean, options: IDrawerOptions): ISwipeIntent;
+export declare function clamp01(value: number): number;
+export declare function startPageXOf(event: ISymbioteEvent): number | undefined;
+export declare function resolveDragProgress(gestureState: IPanResponderGestureState, dragStartProgress: number, options: IDrawerOptions): number;
+export declare function shouldClaimDrawerSwipe(event: ISymbioteEvent, gestureState: IPanResponderGestureState, screenWidth: number, isOpen: boolean, options: IDrawerOptions, phase: 'start' | 'move'): boolean;

package/build/core/drawer-options/index.js

@@ -0,0 +1,200 @@
+// Drawer option types + the pure swipe/geometry math. Framework-agnostic (numbers and
+// booleans only, per CLAUDE.md <prop_types_split_agnostic_vs_per_adapter>), shared verbatim by
+// every adapter. Mirrors react-navigation's Drawer prop surface (confirmed against the current
+// @react-navigation/drawer docs): drawerType 'front'/'back'/'slide'/'permanent', drawerPosition,
+// drawerWidth, overlayColor, swipeEnabled + the three swipe-tuning knobs. What is NOT ported:
+// `configureGestureHandler` - a react-native-gesture-handler-specific escape hatch with no
+// PanResponder equivalent (see packages/navigation's README / the drawer feasibility note for the
+// full gap list).
+import { isRecord } from '../guards.js';
+export const DRAWER_DEFAULT_TYPE = 'front';
+export const DRAWER_DEFAULT_POSITION = 'left';
+export const DRAWER_DEFAULT_WIDTH = 280;
+export const DRAWER_DEFAULT_OVERLAY_COLOR = 'rgba(0, 0, 0, 0.5)';
+export const DRAWER_DEFAULT_SWIPE_ENABLED = true;
+export const DRAWER_DEFAULT_SWIPE_EDGE_WIDTH = 32;
+export const DRAWER_DEFAULT_SWIPE_MIN_DISTANCE = 60;
+// react-navigation's 500 is px/second; gestureState.vx is px/ms, so the default converts.
+export const DRAWER_DEFAULT_SWIPE_MIN_VELOCITY = 0.5;
+// Exported so render-drawer.ts and the adapter can resolve the same defaults without
+// re-declaring the `??` fallback (a second copy would drift the instant a default changes).
+export function resolveDrawerWidth(options) {
+    return options.drawerWidth ?? DRAWER_DEFAULT_WIDTH;
+}
+export function resolveDrawerType(options) {
+    return options.drawerType ?? DRAWER_DEFAULT_TYPE;
+}
+export function resolveDrawerPosition(options) {
+    return options.drawerPosition ?? DRAWER_DEFAULT_POSITION;
+}
+export function isDrawerAnimated(options) {
+    return resolveDrawerType(options) !== 'permanent';
+}
+export function isDrawerOverlayVisible(options) {
+    const type = resolveDrawerType(options);
+    return type === 'front' || type === 'slide';
+}
+// front: only the panel moves (-width -> 0), content stays put, overlay fades in.
+// back: only the content moves, away from the position edge, to reveal the stationary panel;
+//   no overlay (the panel sits fully behind the content, nothing to dim).
+// slide: panel AND content move together by the same delta, overlay fades in (content still
+//   covers the panel partially as they slide in tandem, same as front visually at rest).
+// permanent: static, all zero (isDrawerAnimated() gates callers off this path already).
+export function resolveDrawerGeometry(options) {
+    const width = resolveDrawerWidth(options);
+    const type = resolveDrawerType(options);
+    const sign = resolveDrawerPosition(options) === 'left' ? 1 : -1;
+    const closedPanelX = -sign * width;
+    const openContentX = sign * width;
+    switch (type) {
+        case 'back':
+            return {
+                panelTranslateXClosed: 0,
+                panelTranslateXOpen: 0,
+                contentTranslateXClosed: 0,
+                contentTranslateXOpen: openContentX,
+                overlayOpacityClosed: 0,
+                overlayOpacityOpen: 0,
+            };
+        case 'slide':
+            return {
+                panelTranslateXClosed: closedPanelX,
+                panelTranslateXOpen: 0,
+                contentTranslateXClosed: 0,
+                contentTranslateXOpen: openContentX,
+                overlayOpacityClosed: 0,
+                overlayOpacityOpen: 1,
+            };
+        case 'front':
+        case 'permanent':
+        default:
+            return {
+                panelTranslateXClosed: closedPanelX,
+                panelTranslateXOpen: 0,
+                contentTranslateXClosed: 0,
+                contentTranslateXOpen: 0,
+                overlayOpacityClosed: 0,
+                overlayOpacityOpen: 1,
+            };
+    }
+}
+const DRAWER_PROGRESS_INPUT_RANGE = [0, 1];
+export function resolveDrawerSlotInterpolation(geometry, slot) {
+    switch (slot) {
+        case 'content':
+            return {
+                translateX: {
+                    inputRange: DRAWER_PROGRESS_INPUT_RANGE,
+                    outputRange: [geometry.contentTranslateXClosed, geometry.contentTranslateXOpen],
+                },
+            };
+        case 'overlay':
+            return {
+                opacity: {
+                    inputRange: DRAWER_PROGRESS_INPUT_RANGE,
+                    outputRange: [geometry.overlayOpacityClosed, geometry.overlayOpacityOpen],
+                },
+                translateX: {
+                    inputRange: DRAWER_PROGRESS_INPUT_RANGE,
+                    outputRange: [geometry.contentTranslateXClosed, geometry.contentTranslateXOpen],
+                },
+            };
+        case 'panel':
+            return {
+                translateX: {
+                    inputRange: DRAWER_PROGRESS_INPUT_RANGE,
+                    outputRange: [geometry.panelTranslateXClosed, geometry.panelTranslateXOpen],
+                },
+            };
+    }
+}
+// onStartShouldSetPanResponder gate: while closed, a swipe must START within swipeEdgeWidth of
+// the drawer's position edge (mirrors react-navigation's swipeEdgeWidth). While open, the whole
+// content + overlay area is fair game to drag-close, matching the intuitive "swipe anywhere to
+// dismiss an open drawer" behavior every drawer implementation (including RN's dropped native
+// DrawerLayoutAndroid) shares.
+export function isSwipeStartInEdge(startX, screenWidth, isOpen, options) {
+    if (isOpen)
+        return true;
+    const edgeWidth = options.swipeEdgeWidth ?? DRAWER_DEFAULT_SWIPE_EDGE_WIDTH;
+    return resolveDrawerPosition(options) === 'left'
+        ? startX <= edgeWidth
+        : startX >= screenWidth - edgeWidth;
+}
+// onMoveShouldSetPanResponder gate: only claim the gesture once it reads as a horizontal drag
+// (RN's own PanResponder examples use this exact dominant-axis check to stay out of a vertical
+// ScrollView's way).
+const MOVE_CLAIM_THRESHOLD = 5;
+export function isHorizontalDrag(gestureState) {
+    return (Math.abs(gestureState.dx) > MOVE_CLAIM_THRESHOLD &&
+        Math.abs(gestureState.dx) > Math.abs(gestureState.dy));
+}
+// The release-time decision, structurally the same shape as switch.ts's shouldSnapBack: a pure
+// predicate over the accumulated gesture plus the option thresholds, no framework. Distance OR
+// velocity past its threshold, in the direction that would move the drawer toward the opposite
+// of its current state, snaps it there; anything else snaps back to where it started.
+export function resolveSwipeIntent(gestureState, isOpen, options) {
+    const sign = resolveDrawerPosition(options) === 'left' ? 1 : -1;
+    // Positive `signedDelta` means "dragging toward open" for a left drawer's rightward drag (and
+    // symmetrically for a right drawer's leftward drag).
+    const signedDx = sign * gestureState.dx;
+    const signedVx = sign * gestureState.vx;
+    const minDistance = options.swipeMinDistance ?? DRAWER_DEFAULT_SWIPE_MIN_DISTANCE;
+    const minVelocity = options.swipeMinVelocity ?? DRAWER_DEFAULT_SWIPE_MIN_VELOCITY;
+    const pastDistance = Math.abs(signedDx) >= minDistance;
+    const pastVelocity = Math.abs(signedVx) >= minVelocity;
+    if (!pastDistance && !pastVelocity)
+        return isOpen ? 'open' : 'close';
+    // Velocity wins the direction call when it clears its own threshold (a fast flick can reverse
+    // a short drag); otherwise the drag distance's sign decides.
+    const towardOpen = pastVelocity ? signedVx > 0 : signedDx > 0;
+    return towardOpen ? 'open' : 'close';
+}
+export function clamp01(value) {
+    return Math.min(1, Math.max(0, value));
+}
+function toFiniteNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+// The touch's real starting page-X, read off the raw event rather than gestureState.x0: the
+// engine's capture phase (core/engine/src/pan-responder/index.ts's
+// onStartShouldSetResponderCapture/onMoveShouldSetResponderCapture) resets gestureState before
+// the bubble-phase onStartShouldSetPanResponder/onMoveShouldSetPanResponder gates run, so x0 is
+// only populated later, inside onResponderGrant. Shaped like core/engine/src/events/index.ts's
+// readTouchPoint but not the same function: that one requires both pageX AND pageY and returns
+// an {x, y} pair for touch-history bookkeeping; this only needs pageX and is private to the
+// SET-gate below, so it stays a separate, narrower helper rather than forcing a shared contract
+// onto two callers with different needs.
+export function startPageXOf(event) {
+    const { nativeEvent } = event;
+    const direct = toFiniteNumber(nativeEvent.pageX);
+    if (direct !== undefined)
+        return direct;
+    const touches = nativeEvent.touches;
+    if (Array.isArray(touches) && isRecord(touches[0]))
+        return toFiniteNumber(touches[0].pageX);
+    return undefined;
+}
+// onPanResponderMove's drag-to-progress math: how far the touch has traveled, in progress units
+// (0..1), added to wherever the drag started from. Mirrors the SAME sign convention as
+// resolveSwipeIntent (left drawer: rightward drag is positive-toward-open).
+export function resolveDragProgress(gestureState, dragStartProgress, options) {
+    const width = resolveDrawerWidth(options);
+    const sign = resolveDrawerPosition(options) === 'right' ? -1 : 1;
+    const delta = (sign * gestureState.dx) / width;
+    return clamp01(dragStartProgress + delta);
+}
+// The composed onStartShouldSetPanResponder/onMoveShouldSetPanResponder gate: swipeEnabled ->
+// isDrawerAnimated -> isSwipeStartInEdge, then (move only) isHorizontalDrag on top. The start
+// gate omits the dominant-axis check on purpose (react-navigation's own edge-swipe idiom: claim
+// on entering the edge, confirm direction only once movement exists to measure).
+export function shouldClaimDrawerSwipe(event, gestureState, screenWidth, isOpen, options, phase) {
+    if ((options.swipeEnabled ?? DRAWER_DEFAULT_SWIPE_ENABLED) === false)
+        return false;
+    if (!isDrawerAnimated(options))
+        return false;
+    const startX = startPageXOf(event) ?? gestureState.x0;
+    if (!isSwipeStartInEdge(startX, screenWidth, isOpen, options))
+        return false;
+    return phase === 'start' ? true : isHorizontalDrag(gestureState);
+}

package/build/core/drawer-router-state/index.d.ts

@@ -0,0 +1,21 @@
+import type { IRoute } from '../navigator-state';
+export type { IRoute } from '../navigator-state';
+type IRouteEntry = IRoute<unknown>;
+export type IDrawerRouterState = Readonly<{
+    routes: readonly IRouteEntry[];
+    index: number;
+    isOpen: boolean;
+}>;
+export type IDrawerRouterAction = {
+    type: 'jumpTo';
+    name: string;
+} | {
+    type: 'openDrawer';
+} | {
+    type: 'closeDrawer';
+} | {
+    type: 'toggleDrawer';
+};
+export declare function createInitialDrawerRouterState(routes: readonly IRouteEntry[], initialRouteName?: string): IDrawerRouterState;
+export declare function drawerRouterReducer(state: IDrawerRouterState, action: IDrawerRouterAction): IDrawerRouterState;
+export declare function focusedDrawerRoute(state: IDrawerRouterState): IRouteEntry | undefined;