@symbiote-native/navigation 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build/angular/drawer/index.d.ts

@@ -0,0 +1,76 @@
+import { TemplateRef, type AfterContentInit, type OnChanges, type OnDestroy, type Type } from '@angular/core';
+import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import type { IDrawerDescriptorMap, IDrawerNavigatorHandle, IDrawerPosition, IDrawerRouterState, IDrawerSlot, IDrawerType, INavigationEmitter, IRoute } from '../../core';
+export type { IDrawerNavigatorHandle, IDrawerDescriptorMap } from '../../core';
+export type IDrawerContentContext = {
+    $implicit: {
+        state: IDrawerRouterState;
+        descriptors: IDrawerDescriptorMap;
+        navigation: IDrawerNavigatorHandle;
+    };
+};
+export declare class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNavigatorHandle {
+    private readonly drawerScreenChildren;
+    drawerContentTemplate?: TemplateRef<IDrawerContentContext>;
+    initialRouteName?: string;
+    drawerStyle?: IStyleProp<IViewStyle>;
+    drawerType?: IDrawerType;
+    drawerPosition?: IDrawerPosition;
+    drawerWidth?: number;
+    overlayColor?: string;
+    swipeEnabled?: boolean;
+    swipeEdgeWidth?: number;
+    swipeMinDistance?: number;
+    swipeMinVelocity?: number;
+    private readonly windowDimensions;
+    private readonly routeIdPrefix;
+    private readonly registry;
+    private drawerScreenChildrenSubscription;
+    private readonly stateSignal;
+    readonly state: import("@angular/core").Signal<Readonly<{
+        routes: readonly Readonly<{
+            key: string;
+            name: string;
+            params: unknown;
+        }>[];
+        index: number;
+        isOpen: boolean;
+    }> | undefined>;
+    private currentEmitterKey;
+    private currentEmitter;
+    private readonly progress;
+    private dragStartProgress;
+    readonly openDrawer: () => void;
+    readonly closeDrawer: () => void;
+    readonly toggleDrawer: () => void;
+    readonly jumpTo: (name: string) => void;
+    readonly panResponder: import("@symbiote-native/engine").IPanResponderInstance;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    private rebuildRegistry;
+    private routesFromRegistry;
+    private initializeState;
+    private dispatch;
+    private animateProgressTo;
+    private readonly optionsSnapshot;
+    private readonly drawerStyleSnapshot;
+    ngOnChanges(): void;
+    private buildOptionsSnapshot;
+    private overlayResponderPassthrough;
+    private readonly drawerRoot;
+    private readonly slotsMap;
+    isAnimated(): boolean;
+    slotOrder(): readonly IDrawerSlot[];
+    rootStyle(): Record<string, unknown>;
+    rootPanHandlers(): Record<string, unknown>;
+    slotAnimatedProps(slot: IDrawerSlot): Record<string, unknown>;
+    private slotStyle;
+    contentStyle(): Record<string, unknown>;
+    overlayStyle(): Record<string, unknown>;
+    panelStyle(): Record<string, unknown>;
+    focusedRoute(): IRoute<unknown> | undefined;
+    componentForRoute(route: IRoute<unknown>): Type<unknown> | null;
+    private resolveDrawerScreenOptions;
+    focusedRouteEmitter(): INavigationEmitter;
+    drawerContentContext(currentState: IDrawerRouterState): IDrawerContentContext;
+}

package/build/angular/drawer/index.js

@@ -0,0 +1,508 @@
+// Drawer, the Angular lifecycle half. The open/closed + focused-route router
+// (drawer-router-state) and the pure swipe/geometry math (drawer-options) live in
+// @symbiote-native/navigation core, shared verbatim with the React/Vue adapters; here Angular
+// supplies the lifecycle - a signal-backed router, a PanResponder (RN's own idiom, framework-
+// agnostic per `@symbiote-native/engine` - built ONCE as a class field, callbacks read LIVE `this`
+// state at call time, no ref-mirroring dance needed the way react/drawer.ts's `useRef`s are: a
+// class instance already gives every callback a live view of current state, closing the exact gap
+// React's own hook rules force it to work around), an Animated.Value driving the slide/opacity
+// transforms via the real `AnimatedView` component (`@symbiote-native/angular`), and
+// `openDrawer`/`closeDrawer`/`toggleDrawer`/`jumpTo` as plain public methods directly on the class,
+// mirroring tabs.ts's shape (Tab is the closer sibling: both are fixed-route-list,
+// no-react-native-screens navigators; Stack's push/pop + native-screen bridging don't apply here;
+// `Drawer implements IDrawerNavigatorHandle`).
+//
+// FEASIBILITY NOTE (mirrors react/drawer.ts's own header): the REAL @react-navigation/drawer is
+// built on react-native-gesture-handler + react-native-reanimated, neither of which this codebase
+// depends on. This reaches the same swipe-to-open/close + front/back/slide/permanent behavior with
+// only PanResponder + Animated, sufficient for a solid drawer but NOT byte-for-byte parity - same
+// explicit gap list as react/drawer.ts's tail comment (not repeated here, nothing Angular-specific
+// changes it).
+//
+// RESOLVED (see stack.ts's header, identical reasoning): `'Drawer'` has an `ANCHOR_HOST_COMPONENTS`
+// entry in `adapters/angular/src/renderer.ts`, so a real device build paints `<Drawer>` correctly
+// as a nested tag. `View`/`AnimatedView`, imported below, were already anchor-hosted.
+//
+// DRAWER CONTENT PROJECTION: react/drawer.ts's `renderDrawerContent` is a render-PROP callback
+// (`(props) => ReactNode`) - per CLAUDE.md's <prop_types_split_agnostic_vs_per_adapter>, a
+// render-callback returning a framework element is inherently per-adapter. Angular's own idiom for
+// "a caller-supplied template that needs live data" is a `TemplateRef` + `NgTemplateOutlet` with a
+// context object, NOT a callback @Input(): `<Drawer><ng-template #drawerContent let-ctx>...
+// {{ ctx.state }}...</ng-template></Drawer>`, read here via `@ContentChild('drawerContent', {read:
+// TemplateRef})`.
+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, ContentChild, ContentChildren, Input, QueryList, TemplateRef, computed, inject, signal, untracked, } from '@angular/core';
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { PanResponder, dlog, flattenStyle, } from '@symbiote-native/engine';
+import { Animated, AnimatedView, SymbioteHostPropsDirective, View, WindowDimensionsService, } from '@symbiote-native/angular';
+import { DRAWER_DEFAULT_OVERLAY_COLOR, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialDrawerRouterState, createNavigationEmitter, diffFocusedRoute, drawerChildOrder, drawerRouterReducer, isDrawerAnimated, renderDrawer, resolveDragProgress, resolveDrawerGeometry, resolveDrawerSlotInterpolation, resolveSwipeIntent, shouldClaimDrawerSwipe, } from '../../core/index.js';
+import { NavigationScopeDirective } from '../navigation-scope.directive.js';
+import { DrawerScreenDirective } from '../drawer-screen.directive.js';
+const DRAWER_SNAP_DURATION = 250;
+let drawerInstanceCounter = 0;
+let Drawer = (() => {
+    let _classDecorators = [Component({
+            selector: 'Drawer',
+            standalone: true,
+            imports: [
+                NgComponentOutlet,
+                NgTemplateOutlet,
+                NavigationScopeDirective,
+                SymbioteHostPropsDirective,
+                View,
+                AnimatedView,
+            ],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `
+    @if (state(); as currentState) {
+      <View [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
+        @for (slot of slotOrder(); track slot) {
+          @switch (slot) {
+            @case ('content') {
+              <AnimatedView [style]="contentStyle()" [animatedProps]="slotAnimatedProps('content')">
+                @if (focusedRoute(); as route) {
+                  @if (componentForRoute(route); as component) {
+                    <ng-container
+                      [symbioteNavigationScope]="route"
+                      [navigation]="this"
+                      [emitter]="focusedRouteEmitter()"
+                    >
+                      <ng-container *ngComponentOutlet="component" />
+                    </ng-container>
+                  }
+                }
+              </AnimatedView>
+            }
+            @case ('overlay') {
+              <AnimatedView
+                [style]="overlayStyle()"
+                [animatedProps]="slotAnimatedProps('overlay')"
+              />
+            }
+            @case ('panel') {
+              <AnimatedView [style]="panelStyle()" [animatedProps]="slotAnimatedProps('panel')">
+                @if (drawerContentTemplate) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      drawerContentTemplate;
+                      context: drawerContentContext(currentState)
+                    "
+                  />
+                }
+              </AnimatedView>
+            }
+          }
+        }
+      </View>
+    }
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _drawerScreenChildren_decorators;
+    let _drawerScreenChildren_initializers = [];
+    let _drawerScreenChildren_extraInitializers = [];
+    let _drawerContentTemplate_decorators;
+    let _drawerContentTemplate_initializers = [];
+    let _drawerContentTemplate_extraInitializers = [];
+    let _initialRouteName_decorators;
+    let _initialRouteName_initializers = [];
+    let _initialRouteName_extraInitializers = [];
+    let _drawerStyle_decorators;
+    let _drawerStyle_initializers = [];
+    let _drawerStyle_extraInitializers = [];
+    let _drawerType_decorators;
+    let _drawerType_initializers = [];
+    let _drawerType_extraInitializers = [];
+    let _drawerPosition_decorators;
+    let _drawerPosition_initializers = [];
+    let _drawerPosition_extraInitializers = [];
+    let _drawerWidth_decorators;
+    let _drawerWidth_initializers = [];
+    let _drawerWidth_extraInitializers = [];
+    let _overlayColor_decorators;
+    let _overlayColor_initializers = [];
+    let _overlayColor_extraInitializers = [];
+    let _swipeEnabled_decorators;
+    let _swipeEnabled_initializers = [];
+    let _swipeEnabled_extraInitializers = [];
+    let _swipeEdgeWidth_decorators;
+    let _swipeEdgeWidth_initializers = [];
+    let _swipeEdgeWidth_extraInitializers = [];
+    let _swipeMinDistance_decorators;
+    let _swipeMinDistance_initializers = [];
+    let _swipeMinDistance_extraInitializers = [];
+    let _swipeMinVelocity_decorators;
+    let _swipeMinVelocity_initializers = [];
+    let _swipeMinVelocity_extraInitializers = [];
+    var Drawer = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _drawerScreenChildren_decorators = [ContentChildren(DrawerScreenDirective)];
+            _drawerContentTemplate_decorators = [ContentChild('drawerContent', { read: TemplateRef })];
+            _initialRouteName_decorators = [Input()];
+            _drawerStyle_decorators = [Input()];
+            _drawerType_decorators = [Input()];
+            _drawerPosition_decorators = [Input()];
+            _drawerWidth_decorators = [Input()];
+            _overlayColor_decorators = [Input()];
+            _swipeEnabled_decorators = [Input()];
+            _swipeEdgeWidth_decorators = [Input()];
+            _swipeMinDistance_decorators = [Input()];
+            _swipeMinVelocity_decorators = [Input()];
+            __esDecorate(null, null, _drawerScreenChildren_decorators, { kind: "field", name: "drawerScreenChildren", static: false, private: false, access: { has: obj => "drawerScreenChildren" in obj, get: obj => obj.drawerScreenChildren, set: (obj, value) => { obj.drawerScreenChildren = value; } }, metadata: _metadata }, _drawerScreenChildren_initializers, _drawerScreenChildren_extraInitializers);
+            __esDecorate(null, null, _drawerContentTemplate_decorators, { kind: "field", name: "drawerContentTemplate", static: false, private: false, access: { has: obj => "drawerContentTemplate" in obj, get: obj => obj.drawerContentTemplate, set: (obj, value) => { obj.drawerContentTemplate = value; } }, metadata: _metadata }, _drawerContentTemplate_initializers, _drawerContentTemplate_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, _drawerStyle_decorators, { kind: "field", name: "drawerStyle", static: false, private: false, access: { has: obj => "drawerStyle" in obj, get: obj => obj.drawerStyle, set: (obj, value) => { obj.drawerStyle = value; } }, metadata: _metadata }, _drawerStyle_initializers, _drawerStyle_extraInitializers);
+            __esDecorate(null, null, _drawerType_decorators, { kind: "field", name: "drawerType", static: false, private: false, access: { has: obj => "drawerType" in obj, get: obj => obj.drawerType, set: (obj, value) => { obj.drawerType = value; } }, metadata: _metadata }, _drawerType_initializers, _drawerType_extraInitializers);
+            __esDecorate(null, null, _drawerPosition_decorators, { kind: "field", name: "drawerPosition", static: false, private: false, access: { has: obj => "drawerPosition" in obj, get: obj => obj.drawerPosition, set: (obj, value) => { obj.drawerPosition = value; } }, metadata: _metadata }, _drawerPosition_initializers, _drawerPosition_extraInitializers);
+            __esDecorate(null, null, _drawerWidth_decorators, { kind: "field", name: "drawerWidth", static: false, private: false, access: { has: obj => "drawerWidth" in obj, get: obj => obj.drawerWidth, set: (obj, value) => { obj.drawerWidth = value; } }, metadata: _metadata }, _drawerWidth_initializers, _drawerWidth_extraInitializers);
+            __esDecorate(null, null, _overlayColor_decorators, { kind: "field", name: "overlayColor", static: false, private: false, access: { has: obj => "overlayColor" in obj, get: obj => obj.overlayColor, set: (obj, value) => { obj.overlayColor = value; } }, metadata: _metadata }, _overlayColor_initializers, _overlayColor_extraInitializers);
+            __esDecorate(null, null, _swipeEnabled_decorators, { kind: "field", name: "swipeEnabled", static: false, private: false, access: { has: obj => "swipeEnabled" in obj, get: obj => obj.swipeEnabled, set: (obj, value) => { obj.swipeEnabled = value; } }, metadata: _metadata }, _swipeEnabled_initializers, _swipeEnabled_extraInitializers);
+            __esDecorate(null, null, _swipeEdgeWidth_decorators, { kind: "field", name: "swipeEdgeWidth", static: false, private: false, access: { has: obj => "swipeEdgeWidth" in obj, get: obj => obj.swipeEdgeWidth, set: (obj, value) => { obj.swipeEdgeWidth = value; } }, metadata: _metadata }, _swipeEdgeWidth_initializers, _swipeEdgeWidth_extraInitializers);
+            __esDecorate(null, null, _swipeMinDistance_decorators, { kind: "field", name: "swipeMinDistance", static: false, private: false, access: { has: obj => "swipeMinDistance" in obj, get: obj => obj.swipeMinDistance, set: (obj, value) => { obj.swipeMinDistance = value; } }, metadata: _metadata }, _swipeMinDistance_initializers, _swipeMinDistance_extraInitializers);
+            __esDecorate(null, null, _swipeMinVelocity_decorators, { kind: "field", name: "swipeMinVelocity", static: false, private: false, access: { has: obj => "swipeMinVelocity" in obj, get: obj => obj.swipeMinVelocity, set: (obj, value) => { obj.swipeMinVelocity = value; } }, metadata: _metadata }, _swipeMinVelocity_initializers, _swipeMinVelocity_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            Drawer = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        drawerScreenChildren = __runInitializers(this, _drawerScreenChildren_initializers, void 0);
+        drawerContentTemplate = (__runInitializers(this, _drawerScreenChildren_extraInitializers), __runInitializers(this, _drawerContentTemplate_initializers, void 0));
+        initialRouteName = (__runInitializers(this, _drawerContentTemplate_extraInitializers), __runInitializers(this, _initialRouteName_initializers, void 0));
+        drawerStyle = (__runInitializers(this, _initialRouteName_extraInitializers), __runInitializers(this, _drawerStyle_initializers, void 0));
+        drawerType = (__runInitializers(this, _drawerStyle_extraInitializers), __runInitializers(this, _drawerType_initializers, void 0));
+        drawerPosition = (__runInitializers(this, _drawerType_extraInitializers), __runInitializers(this, _drawerPosition_initializers, void 0));
+        drawerWidth = (__runInitializers(this, _drawerPosition_extraInitializers), __runInitializers(this, _drawerWidth_initializers, void 0));
+        overlayColor = (__runInitializers(this, _drawerWidth_extraInitializers), __runInitializers(this, _overlayColor_initializers, void 0));
+        swipeEnabled = (__runInitializers(this, _overlayColor_extraInitializers), __runInitializers(this, _swipeEnabled_initializers, void 0));
+        swipeEdgeWidth = (__runInitializers(this, _swipeEnabled_extraInitializers), __runInitializers(this, _swipeEdgeWidth_initializers, void 0));
+        swipeMinDistance = (__runInitializers(this, _swipeEdgeWidth_extraInitializers), __runInitializers(this, _swipeMinDistance_initializers, void 0));
+        swipeMinVelocity = (__runInitializers(this, _swipeMinDistance_extraInitializers), __runInitializers(this, _swipeMinVelocity_initializers, void 0));
+        windowDimensions = (__runInitializers(this, _swipeMinVelocity_extraInitializers), inject(WindowDimensionsService).dimensions);
+        routeIdPrefix = `drawer-${(drawerInstanceCounter += 1)}`;
+        // Keyed by name -> the LIVE DrawerScreenDirective 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();
+        drawerScreenChildrenSubscription;
+        stateSignal = signal(undefined);
+        state = this.stateSignal.asReadonly();
+        currentEmitterKey;
+        currentEmitter;
+        // progress: 0 closed -> 1 open. Always starts closed (createInitialDrawerRouterState's own
+        // contract), so a plain field initializer is safe - no dependency on `state` existing yet.
+        progress = new Animated.Value(0);
+        // Where a drag STARTS from, in progress units - always exactly 0 or 1 (see react/drawer.ts's
+        // matching field for why).
+        dragStartProgress = 0;
+        openDrawer = () => {
+            this.animateProgressTo(true);
+            this.dispatch({ type: 'openDrawer' });
+        };
+        closeDrawer = () => {
+            this.animateProgressTo(false);
+            this.dispatch({ type: 'closeDrawer' });
+        };
+        toggleDrawer = () => {
+            this.animateProgressTo(!(this.stateSignal()?.isOpen ?? false));
+            this.dispatch({ type: 'toggleDrawer' });
+        };
+        jumpTo = (name) => {
+            // Captured BEFORE dispatch, mirroring vue/drawer/index.ts's jumpTo: a signal (like Vue's ref)
+            // mutates synchronously inside dispatch, so reading isOpen after it would already see the
+            // reducer's own isOpen: false and never animate the panel closed.
+            const wasOpen = this.stateSignal()?.isOpen ?? false;
+            this.dispatch({ type: 'jumpTo', name });
+            if (wasOpen)
+                this.animateProgressTo(false);
+        };
+        panResponder = PanResponder.create({
+            onStartShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, this.windowDimensions().width, this.stateSignal()?.isOpen ?? false, this.optionsSnapshot(), 'start'),
+            onMoveShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, this.windowDimensions().width, this.stateSignal()?.isOpen ?? false, this.optionsSnapshot(), 'move'),
+            onPanResponderGrant: () => {
+                dlog('Drawer: gesture grant');
+                this.dragStartProgress = (this.stateSignal()?.isOpen ?? false) ? 1 : 0;
+            },
+            onPanResponderMove: (_event, gestureState) => {
+                this.progress.setValue(resolveDragProgress(gestureState, this.dragStartProgress, this.optionsSnapshot()));
+            },
+            onPanResponderRelease: (_event, gestureState) => {
+                const intent = resolveSwipeIntent(gestureState, this.stateSignal()?.isOpen ?? false, this.optionsSnapshot());
+                const open = intent === 'open';
+                dlog(`Drawer: gesture release -> ${open ? 'open' : 'close'}`);
+                this.animateProgressTo(open);
+                this.dispatch(open ? { type: 'openDrawer' } : { type: 'closeDrawer' });
+            },
+            onPanResponderTerminate: () => {
+                dlog('Drawer: gesture terminated, snapping back');
+                this.animateProgressTo(this.stateSignal()?.isOpen ?? false);
+            },
+        });
+        ngAfterContentInit() {
+            this.rebuildRegistry();
+            this.initializeState();
+            this.drawerScreenChildrenSubscription = this.drawerScreenChildren.changes.subscribe(() => {
+                this.rebuildRegistry();
+            });
+        }
+        ngOnDestroy() {
+            this.drawerScreenChildrenSubscription?.unsubscribe();
+            if (this.currentEmitter)
+                this.currentEmitter.emit(NAVIGATION_EVENT_BLUR);
+        }
+        rebuildRegistry() {
+            this.registry.clear();
+            for (const screen of this.drawerScreenChildren) {
+                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('Drawer: no <ng-template symbioteDrawerScreen> children registered');
+            this.stateSignal.set(createInitialDrawerRouterState(routes, this.initialRouteName));
+        }
+        dispatch(action) {
+            const current = this.stateSignal();
+            if (current === undefined)
+                return;
+            this.stateSignal.set(drawerRouterReducer(current, action));
+        }
+        animateProgressTo(open) {
+            dlog(`Drawer: animateProgressTo(open=${open})`);
+            Animated.timing(this.progress, {
+                toValue: open ? 1 : 0,
+                duration: DRAWER_SNAP_DURATION,
+                // Native-driver wiring is deferred for v1 - mirrors react/drawer.ts's own scope note.
+                useNativeDriver: false,
+            }).start();
+        }
+        // A plain writable signal, not a computed() - it mirrors @Input() properties, which are ordinary
+        // mutable fields Angular assigns directly rather than signals, so a computed() reading them would
+        // never register them as a tracked dependency and would go stale after its first evaluation.
+        // ngOnChanges (below) pushes every input change in here instead, which drawerRoot/slotsMap CAN
+        // track correctly since reading a signal (unlike a plain field) IS visible to computed()'s
+        // dependency collection.
+        optionsSnapshot = signal(this.buildOptionsSnapshot());
+        drawerStyleSnapshot = signal(this.drawerStyle);
+        ngOnChanges() {
+            this.optionsSnapshot.set(this.buildOptionsSnapshot());
+            this.drawerStyleSnapshot.set(this.drawerStyle);
+        }
+        buildOptionsSnapshot() {
+            return {
+                drawerType: this.drawerType,
+                drawerPosition: this.drawerPosition,
+                drawerWidth: this.drawerWidth,
+                overlayColor: this.overlayColor,
+                swipeEnabled: this.swipeEnabled,
+                swipeEdgeWidth: this.swipeEdgeWidth,
+                swipeMinDistance: this.swipeMinDistance,
+                swipeMinVelocity: this.swipeMinVelocity,
+            };
+        }
+        overlayResponderPassthrough() {
+            return {
+                pointerEvents: this.stateSignal()?.isOpen ? 'auto' : 'none',
+                onStartShouldSetResponder: () => true,
+                onResponderRelease: () => {
+                    this.animateProgressTo(false);
+                    this.dispatch({ type: 'closeDrawer' });
+                },
+            };
+        }
+        // Recomputed only when a dependency signal actually changes, so every template read within a
+        // single change-detection pass (rootStyle, plus slotStyle/slotAnimatedProps once per @for slot -
+        // 6-7 reads total) shares one cached descriptor tree instead of re-running renderDrawer /
+        // drawerChildOrder on each read.
+        drawerRoot = computed(() => renderDrawer({
+            overlayColor: this.optionsSnapshot().overlayColor ?? DRAWER_DEFAULT_OVERLAY_COLOR,
+            drawerStyle: this.drawerStyleSnapshot(),
+            contentPassthrough: {},
+            overlayPassthrough: this.isAnimated() ? this.overlayResponderPassthrough() : {},
+            panelPassthrough: {},
+        }, this.optionsSnapshot()));
+        slotsMap = computed(() => {
+            const root = this.drawerRoot();
+            const order = drawerChildOrder(this.optionsSnapshot());
+            const map = new Map();
+            order.forEach((slot, index) => {
+                const child = root.children[index];
+                if (child !== undefined && typeof child !== 'string')
+                    map.set(slot, child);
+            });
+            return map;
+        });
+        isAnimated() {
+            return isDrawerAnimated(this.optionsSnapshot());
+        }
+        slotOrder() {
+            return drawerChildOrder(this.optionsSnapshot());
+        }
+        rootStyle() {
+            return flattenStyle(this.drawerRoot().props.style);
+        }
+        rootPanHandlers() {
+            return { ...this.panResponder.panHandlers };
+        }
+        slotAnimatedProps(slot) {
+            const descriptor = this.slotsMap().get(slot);
+            if (!descriptor)
+                return {};
+            const { style: _style, ...rest } = descriptor.props;
+            return rest;
+        }
+        slotStyle(slot, animatedStyle) {
+            const base = this.slotsMap().get(slot)?.props.style;
+            return this.isAnimated() ? flattenStyle([base, animatedStyle()]) : flattenStyle(base);
+        }
+        contentStyle() {
+            return this.slotStyle('content', () => {
+                const g = resolveDrawerGeometry(this.optionsSnapshot());
+                const { translateX } = resolveDrawerSlotInterpolation(g, 'content');
+                return {
+                    transform: [{ translateX: this.progress.interpolate(translateX) }],
+                };
+            });
+        }
+        // The overlay's translateX follows content's own delta (see render-drawer.ts's comment on
+        // `overlayTranslateX`): for `slide`, content itself moves away, and without the overlay
+        // following it the dimming stays pinned full-screen instead of tracking the revealed panel.
+        overlayStyle() {
+            return this.slotStyle('overlay', () => {
+                const g = resolveDrawerGeometry(this.optionsSnapshot());
+                const { opacity, translateX } = resolveDrawerSlotInterpolation(g, 'overlay');
+                return {
+                    opacity: this.progress.interpolate(opacity),
+                    transform: [{ translateX: this.progress.interpolate(translateX) }],
+                };
+            });
+        }
+        panelStyle() {
+            return this.slotStyle('panel', () => {
+                const g = resolveDrawerGeometry(this.optionsSnapshot());
+                const { translateX } = resolveDrawerSlotInterpolation(g, 'panel');
+                return {
+                    transform: [{ translateX: this.progress.interpolate(translateX) }],
+                };
+            });
+        }
+        focusedRoute() {
+            const state = this.stateSignal();
+            return state?.routes[state.index];
+        }
+        componentForRoute(route) {
+            return this.registry.get(route.name)?.component ?? null;
+        }
+        resolveDrawerScreenOptions(entry, route) {
+            if (typeof entry.options === 'function') {
+                const props = { route, navigation: this };
+                return entry.options(props);
+            }
+            return entry.options ?? {};
+        }
+        // Lazily creates/replaces the focused route's emitter and synthesizes focus/blur - Drawer paints
+        // its own panel in pure JS (no native onAppear/onDisappear the way Stack's RNSScreen has), so
+        // focus/blur is synthesized here exactly like react/drawer.ts's own useEffect does, just
+        // idempotent per read instead of dependency-array gated. Keyed on the route KEY, not the object,
+        // so a no-op re-focus of the already-focused route doesn't spuriously 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 (see tabs.ts's
+        // identical fix for the full mechanism):
+        //
+        // 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.
+        // 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 - emitting FOCUS right here fires to zero listeners and is silently lost
+        //    forever. queueMicrotask defers the FOCUS emit past the end of the current refresh
+        //    (including the new screen's construction). BLUR doesn't need this: the outgoing screen's
+        //    listener was already attached on an earlier tick.
+        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('Drawer: 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(`Drawer: route "${this.focusedRoute()?.name}" focused`);
+                        emitter.emit(NAVIGATION_EVENT_FOCUS);
+                    });
+                }
+                return emitter;
+            });
+        }
+        drawerContentContext(currentState) {
+            const descriptors = {};
+            for (const route of currentState.routes) {
+                const entry = this.registry.get(route.name);
+                if (entry === undefined)
+                    continue;
+                descriptors[route.key] = {
+                    options: this.resolveDrawerScreenOptions(entry, route),
+                    navigation: this,
+                };
+            }
+            return { $implicit: { state: currentState, descriptors, navigation: this } };
+        }
+    };
+    return Drawer = _classThis;
+})();
+export { Drawer };

package/build/angular/drawer-screen.directive.d.ts

@@ -0,0 +1,14 @@
+import { type Type } from '@angular/core';
+import type { IDrawerScreenOptions, IRoute } from '../core';
+import type { IDrawerNavigatorHandle } from '../core';
+export type IDrawerScreenOptionsArgs = {
+    route: IRoute<unknown>;
+    navigation: IDrawerNavigatorHandle;
+};
+export type IDrawerScreenOptionsResolver = (props: IDrawerScreenOptionsArgs) => IDrawerScreenOptions;
+export declare class DrawerScreenDirective {
+    name: string;
+    component: Type<unknown>;
+    options?: IDrawerScreenOptions | IDrawerScreenOptionsResolver;
+    initialParams?: unknown;
+}