@symbiote-native/navigation 1.0.0

package/build/angular/stack/index.js

@@ -0,0 +1,386 @@
+// Stack, the Angular lifecycle half. The route-stack transitions (navigator-state) and the
+// options/props folds (screen-options, render-stack) live in @symbiote-native/navigation core,
+// shared verbatim with the React/Vue adapters; here Angular supplies the lifecycle - a signal for
+// the pushed-route stack, a per-instance counter for route-key generation, push/pop/replace/... as
+// plain public methods directly on the class (no `useImperativeHandle`/forwardRef equivalent
+// needed: an Angular component instance IS its own "ref", same shape as MatDrawer.open(), reached
+// via a template reference variable, e.g. `<Stack #nav>` then `nav.push(...)`; `Stack implements
+// INavigatorHandle` so the instance itself is what NavigationScopeDirective hands to
+// NavigationContextService - the DI scope every mounted screen reads its navigation/route from via
+// injectStackNavigation()/injectRoute(), never a component input) - plus the descriptor bridge for
+// the header config leaf via the raw
+// native-view element tags below. Pushing/popping a route is an ordinary child render/removal:
+// RNSScreenStack diffs its RNSScreen children natively, so no imperative native command is needed
+// here at all. Neither this nor ScreenDirective imports react-native-screens' own React components
+// (hooks, crashes a non-React adapter); the native views are driven directly through the
+// ViewConfig ../register registers. See CLAUDE.md <third_party_rn_packages_are_react_only>.
+//
+// RAW NATIVE TAGS + NO_ERRORS_SCHEMA: RNSScreenStack/RNSScreen/RNSModalScreen/
+// RNSScreenContentWrapper/RNSScreenStackHeaderConfig/RNSScreenStackHeaderSubview/RNSSearchBar are
+// react-native-screens' native Fabric views, not Angular components - core's render-stack.ts
+// deliberately hands back PLAIN PROPS OBJECTS for the leaves this adapter builds itself with real
+// framework children (see its header comment), the same split react/stack.ts's `createElement`
+// calls implement. A non-dashed raw tag name only satisfies Angular's DOM element schema check
+// under `NO_ERRORS_SCHEMA` (`CUSTOM_ELEMENTS_SCHEMA` only relaxes tags containing a "-", confirmed
+// against `.vendors/angular/packages/compiler/src/schema/dom_element_schema_registry.ts`'s
+// `hasElement`) - every other Angular component in this codebase only ever names dashed
+// `symbiote-*` primitives or real `@Component` selectors, so this is the first legitimate need for
+// the looser schema in this codebase; every prop still routes through the real, declared
+// `[symbioteHostProps]` input (primitives/shared.ts, `@symbiote-native/angular`), never a bare
+// unknown-property binding.
+//
+// RESOLVED: `Stack` itself (like `Tab`/`Drawer`) is a composed Angular `@Component` used as a
+// plain `<Stack>` tag by consuming app code. It is NOT hardcoded into `adapters/angular/src/
+// renderer/index.ts`'s `ANCHOR_HOST_COMPONENTS` Set - as an app/package-owned selector it
+// self-registers instead: `adapters/angular/babel-register-composed.cjs` (a Metro babel preset
+// applied bundle-wide, not scoped to adapters/angular) scans this package's own AOT-compiled
+// (`ngc`) `ɵɵngDeclareComponent({selector: 'Stack', ...})` output and auto-calls
+// `registerComposedComponent('Stack')` at bundle time - same mechanism `.examples/angular`
+// navigation-demo screens and `@symbiote-native/slider`'s `Slider` rely on for their own composed
+// components mounted statically or via `NgComponentOutlet`. Unregistered, `createElement('Stack')`
+// falls through to a real `createNode` call and RN paints its own "Unimplemented component"
+// fallback instead. vitest never runs that Metro/babel pipeline, so `stack.test.ts` calls
+// `registerComposedComponent('Stack')` itself. Every raw react-native-screens tag above is
+// correctly EXEMPT from this mechanism (they must fall through to a real `createNode` to paint at
+// all).
+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, NO_ERRORS_SCHEMA, QueryList, signal, } from '@angular/core';
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { SymbioteHostPropsDirective } from '@symbiote-native/angular';
+import { Platform, dlog } from '@symbiote-native/engine';
+import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, NAVIGATION_EVENT_STATE, RNS_MODAL_SCREEN_VIEW_NAME, SCREEN_ON_APPEAR, SCREEN_ON_DISAPPEAR, SCREEN_ON_DISMISSED, SCREEN_ON_HEADER_BACK_BUTTON_CLICKED, STACK_ON_FINISH_TRANSITIONING, buildSearchBarPassthrough, createInitialNavigatorState, createNavigationEmitter, navigatorReducer, resolveHeaderInModalStackStyle, resolveScreenRenderPlan, resolveStackProps, } from '../../core/index.js';
+import { NavigationScopeDirective } from '../navigation-scope.directive.js';
+import { SearchBarRefDirective } from '../search-bar-ref.directive.js';
+import { ScreenDirective } from '../screen.directive.js';
+// backTitleVisible defaults to `true` on both platforms per the codegen spec's own default - no
+// ios/android divergence in v1 scope (mirrors react/stack.ts's own constant exactly).
+const NAVIGATOR_PLATFORM = { defaultHeaderBackTitleVisible: true };
+let stackInstanceCounter = 0;
+let Stack = (() => {
+    let _classDecorators = [Component({
+            selector: 'Stack',
+            standalone: true,
+            schemas: [NO_ERRORS_SCHEMA],
+            imports: [
+                NgTemplateOutlet,
+                NgComponentOutlet,
+                NavigationScopeDirective,
+                SearchBarRefDirective,
+                SymbioteHostPropsDirective,
+            ],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `
+    @if (state(); as currentState) {
+      <RNSScreenStack [symbioteHostProps]="stackHostProps()">
+        @for (route of currentState.routes; track route.key; let idx = $index) {
+          <ng-container
+            [ngTemplateOutlet]="screenTpl"
+            [ngTemplateOutletContext]="{ $implicit: route, index: idx }"
+          />
+        }
+      </RNSScreenStack>
+    }
+
+    <ng-template #screenTpl let-route let-index="index">
+      @if (outerScreenIsModal(route, index)) {
+        <RNSModalScreen [symbioteHostProps]="screenHostProps(route, index)">
+          <ng-container
+            [ngTemplateOutlet]="innerTpl"
+            [ngTemplateOutletContext]="{ $implicit: route, index: index }"
+          />
+        </RNSModalScreen>
+      } @else {
+        <RNSScreen [symbioteHostProps]="screenHostProps(route, index)">
+          <ng-container
+            [ngTemplateOutlet]="innerTpl"
+            [ngTemplateOutletContext]="{ $implicit: route, index: index }"
+          />
+        </RNSScreen>
+      }
+    </ng-template>
+
+    <ng-template #innerTpl let-route let-index="index">
+      @if (isInModal(route, index)) {
+        <RNSScreenStack [symbioteHostProps]="innerStackProps()">
+          <RNSScreen [symbioteHostProps]="innerScreenProps(route, index)">
+            <ng-container
+              [ngTemplateOutlet]="headerAndContentTpl"
+              [ngTemplateOutletContext]="{ $implicit: route, index: index }"
+            />
+          </RNSScreen>
+        </RNSScreenStack>
+      } @else {
+        <ng-container
+          [ngTemplateOutlet]="headerAndContentTpl"
+          [ngTemplateOutletContext]="{ $implicit: route, index: index }"
+        />
+      }
+    </ng-template>
+
+    <ng-template #headerAndContentTpl let-route let-index="index">
+      <RNSScreenStackHeaderConfig [symbioteHostProps]="headerConfigProps(route, index)">
+        @if (hasSearchBar(route)) {
+          <RNSScreenStackHeaderSubview [symbioteHostProps]="headerSubviewProps">
+            <RNSSearchBar
+              [symbioteSearchBarRef]="searchBarRef(route)"
+              [symbioteHostProps]="searchBarProps(route, index)"
+            />
+          </RNSScreenStackHeaderSubview>
+        }
+      </RNSScreenStackHeaderConfig>
+      <RNSScreenContentWrapper [symbioteHostProps]="contentWrapperProps(route, index)">
+        <ng-container
+          [symbioteNavigationScope]="route"
+          [navigation]="this"
+          [emitter]="emitterFor(route.key)"
+        >
+          <ng-container *ngComponentOutlet="componentFor(route)" />
+        </ng-container>
+      </RNSScreenContentWrapper>
+    </ng-template>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _screenChildren_decorators;
+    let _screenChildren_initializers = [];
+    let _screenChildren_extraInitializers = [];
+    let _initialRouteName_decorators;
+    let _initialRouteName_initializers = [];
+    let _initialRouteName_extraInitializers = [];
+    let _screenOptions_decorators;
+    let _screenOptions_initializers = [];
+    let _screenOptions_extraInitializers = [];
+    var Stack = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _screenChildren_decorators = [ContentChildren(ScreenDirective)];
+            _initialRouteName_decorators = [Input()];
+            _screenOptions_decorators = [Input()];
+            __esDecorate(null, null, _screenChildren_decorators, { kind: "field", name: "screenChildren", static: false, private: false, access: { has: obj => "screenChildren" in obj, get: obj => obj.screenChildren, set: (obj, value) => { obj.screenChildren = value; } }, metadata: _metadata }, _screenChildren_initializers, _screenChildren_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);
+            Stack = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        screenChildren = __runInitializers(this, _screenChildren_initializers, void 0);
+        initialRouteName = (__runInitializers(this, _screenChildren_extraInitializers), __runInitializers(this, _initialRouteName_initializers, void 0));
+        screenOptions = (__runInitializers(this, _initialRouteName_extraInitializers), __runInitializers(this, _screenOptions_initializers, void 0));
+        headerSubviewProps = (__runInitializers(this, _screenOptions_extraInitializers), { type: 'searchBar' });
+        routeIdPrefix = `stack-${(stackInstanceCounter += 1)}`;
+        // Keyed by name -> the LIVE ScreenDirective instance, not a snapshot copy of its fields:
+        // @ContentChildren's `changes` Observable only fires on a STRUCTURAL change to the query
+        // results (screens added/removed/reordered), never when an already-matched instance's own
+        // `[options]`/`[component]` binding is merely reassigned a new value - a snapshot copy taken at
+        // rebuild time would go stale the instant an app changes e.g. `[options]` on an existing
+        // `<ng-template symbioteScreen>` without also adding/removing one. Reading straight off the
+        // directive instance means Angular's own ordinary Input binding keeps every field live for free.
+        registry = new Map();
+        emitters = new Map();
+        // Keyed by `${route.key}:${index}`, cleared on every dispatch: the ~7 template-bound
+        // accessors below (outerScreenIsModal/isInModal/screenHostProps/...) all resolve the SAME
+        // route+index through planFor per change-detection cycle, so caching here turns ~7 runs of
+        // the 14-step resolveScreenRenderPlan chain into 1 per actual state change.
+        planCache = new Map();
+        routeSequence = 0;
+        screenChildrenSubscription;
+        stateSignal = signal(undefined);
+        state = this.stateSignal.asReadonly();
+        push = (name, params) => this.dispatch({ type: 'push', route: this.createRoute(name, params) });
+        pop = (count) => this.dispatch({ type: 'pop', count });
+        popToTop = () => this.dispatch({ type: 'popToTop' });
+        popTo = (key) => this.dispatch({ type: 'popTo', key });
+        replace = (name, params) => this.dispatch({ type: 'replace', route: this.createRoute(name, params) });
+        setParams = (params, key) => this.dispatch({ type: 'setParams', key, params });
+        reset = (nextState) => this.dispatch({ type: 'reset', state: nextState });
+        canGoBack = () => (this.stateSignal()?.routes.length ?? 0) > 1;
+        ngAfterContentInit() {
+            this.rebuildRegistry();
+            this.initializeState();
+            this.screenChildrenSubscription = this.screenChildren.changes.subscribe(() => {
+                this.rebuildRegistry();
+            });
+        }
+        ngOnDestroy() {
+            this.screenChildrenSubscription?.unsubscribe();
+        }
+        rebuildRegistry() {
+            this.registry.clear();
+            for (const screen of this.screenChildren) {
+                this.registry.set(screen.name, screen);
+            }
+        }
+        initializeState() {
+            if (this.stateSignal() !== undefined)
+                return;
+            const initialRouteName = this.initialRouteName ?? this.registry.keys().next().value;
+            if (initialRouteName === undefined) {
+                dlog('Stack: no <ng-template symbioteScreen> children registered');
+                this.stateSignal.set(createInitialNavigatorState({ key: this.routeIdPrefix, name: '', params: undefined }));
+                return;
+            }
+            this.stateSignal.set(createInitialNavigatorState(this.createRoute(initialRouteName, this.registry.get(initialRouteName)?.initialParams)));
+        }
+        createRoute(name, params) {
+            this.routeSequence += 1;
+            return { key: `${this.routeIdPrefix}-${name}-${this.routeSequence}`, name, params };
+        }
+        dispatch(action) {
+            const current = this.stateSignal();
+            if (current === undefined)
+                return;
+            const next = navigatorReducer(current, action);
+            this.planCache.clear();
+            this.stateSignal.set(next);
+            const liveRouteKeys = new Set(next.routes.map(route => route.key));
+            for (const route of next.routes) {
+                this.emitterFor(route.key).emit(NAVIGATION_EVENT_STATE, next);
+            }
+            for (const routeKey of this.emitters.keys()) {
+                if (!liveRouteKeys.has(routeKey))
+                    this.emitters.delete(routeKey);
+            }
+        }
+        emitterFor(routeKey) {
+            let emitter = this.emitters.get(routeKey);
+            if (!emitter) {
+                emitter = createNavigationEmitter();
+                this.emitters.set(routeKey, emitter);
+            }
+            return emitter;
+        }
+        mergedOptionsFor(route) {
+            const entry = this.registry.get(route.name);
+            const optionsArgs = { route, navigation: this };
+            const own = entry === undefined
+                ? undefined
+                : typeof entry.options === 'function'
+                    ? entry.options(optionsArgs)
+                    : entry.options;
+            return { ...this.screenOptions, ...own };
+        }
+        componentFor(route) {
+            return this.registry.get(route.name)?.component ?? null;
+        }
+        stackHostProps() {
+            return resolveStackProps({
+                passthrough: {
+                    [STACK_ON_FINISH_TRANSITIONING]: () => dlog(`Stack: onFinishTransitioning at t=${Date.now()}`),
+                },
+            });
+        }
+        // Threads a route's merged options through the shared ~14-call resolver sequence (see
+        // core/render-stack.ts's resolveScreenRenderPlan) every per-route template method below picks
+        // its one field from. Angular has no per-route closure scope the way React's `.map`/Vue's render
+        // loop do, so each template-bound method calls this per change-detection cycle - cached below
+        // by `${route.key}:${index}` so the ~7 accessors that share a route+index resolve the plan once
+        // per actual state change instead of once per template read; `dispatch` clears the cache before
+        // recomputing so no stale entry survives a state transition. Screen appear/disappear stay
+        // adapter-owned (close over `this.dispatch`/`this.emitterFor`); the search bar passthrough
+        // carries no dlog wrapper, unlike React/Vue (see this file's own review notes) - its imperative
+        // ref rides a separate directive (searchBarRef/[symbioteSearchBarRef]), not this passthrough map.
+        planFor(route, index) {
+            const cacheKey = `${route.key}:${index}`;
+            const cached = this.planCache.get(cacheKey);
+            if (cached)
+                return cached;
+            const mergedOptions = this.mergedOptionsFor(route);
+            const searchBarOptions = mergedOptions.headerSearchBarOptions;
+            const plan = resolveScreenRenderPlan({
+                screenId: route.key,
+                index,
+                routeCount: this.stateSignal()?.routes.length ?? 1,
+                options: mergedOptions,
+                platform: NAVIGATOR_PLATFORM,
+                isAndroid: Platform.OS === 'android',
+                screenPassthrough: {
+                    [SCREEN_ON_DISMISSED]: () => this.dispatch({ type: 'pop', count: 1 }),
+                    [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () => this.dispatch({ type: 'pop', count: 1 }),
+                    [SCREEN_ON_APPEAR]: () => {
+                        dlog(`Stack: route "${route.name}" appeared (focus)`);
+                        this.emitterFor(route.key).emit(NAVIGATION_EVENT_FOCUS);
+                    },
+                    [SCREEN_ON_DISAPPEAR]: () => {
+                        dlog(`Stack: route "${route.name}" disappeared (blur)`);
+                        this.emitterFor(route.key).emit(NAVIGATION_EVENT_BLUR);
+                    },
+                },
+                searchBarPassthrough: searchBarOptions
+                    ? buildSearchBarPassthrough(searchBarOptions)
+                    : undefined,
+            });
+            this.planCache.set(cacheKey, plan);
+            return plan;
+        }
+        outerScreenIsModal(route, index) {
+            return this.planFor(route, index).screenViewName === RNS_MODAL_SCREEN_VIEW_NAME;
+        }
+        isInModal(route, index) {
+            return this.planFor(route, index).inModal;
+        }
+        screenHostProps(route, index) {
+            return this.planFor(route, index).screenProps;
+        }
+        innerStackProps() {
+            return { style: resolveHeaderInModalStackStyle() };
+        }
+        innerScreenProps(route, index) {
+            const plan = this.planFor(route, index);
+            return { style: plan.innerScreenStyle, activityState: plan.activityState };
+        }
+        contentWrapperProps(route, index) {
+            return this.planFor(route, index).contentWrapperProps;
+        }
+        headerConfigProps(route, index) {
+            return this.planFor(route, index).headerConfig.props;
+        }
+        hasSearchBar(route) {
+            return this.mergedOptionsFor(route).headerSearchBarOptions !== undefined;
+        }
+        searchBarRef(route) {
+            return this.mergedOptionsFor(route).headerSearchBarOptions?.ref;
+        }
+        searchBarProps(route, index) {
+            return this.planFor(route, index).searchBarProps ?? {};
+        }
+    };
+    return Stack = _classThis;
+})();
+export { Stack };

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

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

package/build/angular/tab-screen.directive.js

@@ -0,0 +1,87 @@
+// [symbioteTabScreen]: Tab's twin of screen.directive.ts's ScreenDirective - a declarative marker
+// read via @ContentChildren to build the static name -> {component, options} registry, then Tab
+// mounts the FOCUSED route's component itself. Mirrors react/tab-screen.ts's TabScreen minus the
+// stack-only concepts (no push/pop lifecycle events to wire).
+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 { Directive, Input } from '@angular/core';
+let TabScreenDirective = (() => {
+    let _classDecorators = [Directive({
+            selector: 'ng-template[symbioteTabScreen]',
+            standalone: true,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _component_decorators;
+    let _component_initializers = [];
+    let _component_extraInitializers = [];
+    let _options_decorators;
+    let _options_initializers = [];
+    let _options_extraInitializers = [];
+    let _initialParams_decorators;
+    let _initialParams_initializers = [];
+    let _initialParams_extraInitializers = [];
+    var TabScreenDirective = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _name_decorators = [Input({ required: true })];
+            _component_decorators = [Input({ required: true })];
+            _options_decorators = [Input()];
+            _initialParams_decorators = [Input()];
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _component_decorators, { kind: "field", name: "component", static: false, private: false, access: { has: obj => "component" in obj, get: obj => obj.component, set: (obj, value) => { obj.component = value; } }, metadata: _metadata }, _component_initializers, _component_extraInitializers);
+            __esDecorate(null, null, _options_decorators, { kind: "field", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
+            __esDecorate(null, null, _initialParams_decorators, { kind: "field", name: "initialParams", static: false, private: false, access: { has: obj => "initialParams" in obj, get: obj => obj.initialParams, set: (obj, value) => { obj.initialParams = value; } }, metadata: _metadata }, _initialParams_initializers, _initialParams_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            TabScreenDirective = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        name = __runInitializers(this, _name_initializers, void 0);
+        component = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _component_initializers, void 0));
+        options = (__runInitializers(this, _component_extraInitializers), __runInitializers(this, _options_initializers, void 0));
+        initialParams = (__runInitializers(this, _options_extraInitializers), __runInitializers(this, _initialParams_initializers, void 0));
+        constructor() {
+            __runInitializers(this, _initialParams_extraInitializers);
+        }
+    };
+    return TabScreenDirective = _classThis;
+})();
+export { TabScreenDirective };

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

@@ -0,0 +1,42 @@
+import { type AfterContentInit, type OnDestroy, type Type } from '@angular/core';
+import type { IDescriptor } from '@symbiote-native/components';
+import type { INavigationEmitter, IRoute, ITabNavigatorHandle, ITabOptions } from '../../core';
+export type { ITabNavigatorHandle } from '../../core';
+export declare class Tab implements AfterContentInit, OnDestroy, ITabNavigatorHandle {
+    private readonly tabScreenChildren;
+    initialRouteName?: string;
+    screenOptions?: ITabOptions;
+    readonly rootStyle: {
+        flex: number;
+    };
+    readonly contentStyle: {
+        flex: number;
+    };
+    private readonly routeIdPrefix;
+    private readonly registry;
+    private tabScreenChildrenSubscription;
+    private readonly stateSignal;
+    readonly state: import("@angular/core").Signal<Readonly<{
+        routes: readonly Readonly<{
+            key: string;
+            name: string;
+            params: unknown;
+        }>[];
+        index: number;
+    }> | undefined>;
+    private currentEmitterKey;
+    private currentEmitter;
+    readonly jumpTo: (name: string, params?: unknown) => void;
+    readonly setParams: (params: unknown, key: string) => void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    private rebuildRegistry;
+    private routesFromRegistry;
+    private initializeState;
+    private dispatch;
+    private resolveTabOptions;
+    focusedRoute(): IRoute<unknown> | undefined;
+    componentForRoute(route: IRoute<unknown>): Type<unknown> | null;
+    focusedRouteEmitter(): INavigationEmitter;
+    tabBarDescriptor(): IDescriptor;
+}