@natsuneko-laboratory/react-native-desktop-navigation 0.1.0-alpha.12

package/dist/core/NavigationItem.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navigationItemStyle = void 0;
+exports.NavigationItem = NavigationItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const context_1 = require("./context");
+function resolveStyle(style, state) {
+    return typeof style === 'function' ? style(state) : style;
+}
+/** The interactive shell remains owned by navigation when its content is customized. */
+function NavigationItem({ route, options, selected, focused, collapsed, sidebar, onFocus, onBlur, onPress, itemRef, }) {
+    const { colors } = (0, context_1.useNavigationTheme)();
+    const [pressed, setPressed] = react_1.default.useState(false);
+    const [hovered, setHovered] = react_1.default.useState(false);
+    const state = {
+        selected,
+        focused,
+        collapsed,
+        hovered,
+        pressed: pressed && !options.disabled,
+        disabled: !!options.disabled,
+    };
+    const label = options.label ?? options.title ?? route.name;
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [options.icon != null && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: resolveStyle(options.iconContainerStyle, state), children: typeof options.icon === 'function'
+                    ? options.icon({ focused: selected, disabled: state.disabled })
+                    : options.icon })), (!collapsed || !options.icon) && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                    { color: colors.text, flexShrink: 1 },
+                    resolveStyle(options.labelStyle, state),
+                ], children: collapsed ? label.slice(0, 1) : label })), !collapsed &&
+                options.badge != null &&
+                (typeof options.badge === 'string' ||
+                    typeof options.badge === 'number' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                        { color: colors.mutedText },
+                        resolveStyle(options.badgeStyle, state),
+                    ], children: options.badge })) : (options.badge))] }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ref: (target) => itemRef(target), accessible: true, focusable: !options.disabled, disabled: options.disabled, accessibilityRole: sidebar ? 'menuitem' : 'tab', accessibilityLabel: label, accessibilityState: { selected, disabled: state.disabled }, onFocus: onFocus, onBlur: () => {
+            setPressed(false);
+            onBlur();
+        }, onPress: onPress, onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false), onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), style: [
+            exports.navigationItemStyle,
+            {
+                opacity: state.disabled ? 0.45 : 1,
+                backgroundColor: selected ? colors.selectedBackground : 'transparent',
+                borderColor: focused ? colors.accent : 'transparent',
+            },
+            resolveStyle(options.itemStyle, state),
+        ], children: options.renderItemContent
+            ? options.renderItemContent({
+                ...state,
+                route,
+                label,
+                children: content,
+            })
+            : content }));
+}
+exports.navigationItemStyle = react_native_1.StyleSheet.create({
+    item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        padding: 10,
+        margin: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+}).item;

package/dist/core/Scene.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { NavigationRoute } from '../routers';
+import type { CommonScreenOptions, StackAnimation } from './types';
+export interface SceneProps {
+    nodeId: string;
+    route: NavigationRoute;
+    component: React.ComponentType<any>;
+    visible: boolean;
+    /** Native content slots must be laid out before restoring keyboard focus. */
+    focusReady?: boolean;
+    options: CommonScreenOptions;
+    animation?: StackAnimation;
+    overlay?: 'modal' | 'dialog';
+    overlayStyle?: StyleProp<ViewStyle>;
+    dialogStyle?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}
+export declare function Scene({ nodeId, route, component: Component, visible, focusReady, options, animation, overlay, overlayStyle, dialogStyle, children, }: SceneProps): React.JSX.Element | null;

package/dist/core/Scene.js

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scene = Scene;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const platform_1 = require("../platform");
+const context_1 = require("./context");
+const navigation_1 = require("./navigation");
+const focus_1 = require("./focus");
+function Scene({ nodeId, route, component: Component, visible, focusReady = true, options, animation = 'none', overlay, overlayStyle, dialogStyle, children, }) {
+    const store = (0, context_1.useStore)();
+    const { colors } = (0, context_1.useNavigationTheme)();
+    const platform = react_1.default.useContext(context_1.PlatformContext);
+    const snapshot = react_1.default.useCallback(() => store.isRouteFocused(nodeId, route.key), [store, nodeId, route.key]);
+    const focused = react_1.default.useSyncExternalStore(store.subscribe, snapshot, snapshot);
+    const navigation = react_1.default.useMemo(() => (0, navigation_1.createNavigation)(store, nodeId, route.key), [store, nodeId, route.key]);
+    const targets = react_1.default.useRef(new Map());
+    const last = react_1.default.useRef(undefined);
+    const registry = react_1.default.useMemo(() => ({
+        register(id, target) {
+            targets.current.set(id, target);
+            return () => {
+                targets.current.delete(id);
+            };
+        },
+        record(id) {
+            last.current = id;
+            store.setFocusedNode(nodeId);
+        },
+    }), [store, nodeId]);
+    const mounted = visible || options.inactiveBehavior !== 'unmount';
+    react_1.default.useEffect(() => {
+        if (!focused || !visible || !focusReady || options.focusBehavior === 'none')
+            return;
+        const previous = options.focusBehavior !== 'first' && last.current
+            ? targets.current.get(last.current)
+            : undefined;
+        (previous ?? targets.current.values().next().value)?.focus();
+    }, [focused, visible, focusReady, options.focusBehavior, mounted]);
+    const [progress] = react_1.default.useState(() => new react_native_1.Animated.Value(1));
+    react_1.default.useEffect(() => {
+        if (!visible || animation === 'none') {
+            progress.setValue(1);
+            return;
+        }
+        progress.setValue(0);
+        const transition = react_native_1.Animated.timing(progress, {
+            toValue: 1,
+            duration: platform.defaultTransitions.push.duration,
+            // react-native-macos's Fabric/bridgeless host does not reliably
+            // connect native-driven Animated values, leaving views stuck at
+            // their initial (invisible) frame. Drive this on the JS thread
+            // instead so the entrance transition actually completes.
+            useNativeDriver: false,
+        });
+        transition.start();
+        return () => transition.stop();
+    }, [visible, animation, progress, platform]);
+    if (!mounted)
+        return null;
+    const offset = platform.defaultTransitions.push.offset;
+    const animatedStyle = animation === 'none'
+        ? undefined
+        : {
+            opacity: progress,
+            transform: animation === 'fade'
+                ? []
+                : [
+                    {
+                        [animation === 'slide-vertical'
+                            ? 'translateY'
+                            : 'translateX']: progress.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [offset, 0],
+                        }),
+                    },
+                ],
+        };
+    return ((0, jsx_runtime_1.jsx)(context_1.ScopeContext.Provider, { value: { nodeId, routeKey: route.key }, children: (0, jsx_runtime_1.jsx)(context_1.ScreenContext.Provider, { value: { navigation, route, focused }, children: (0, jsx_runtime_1.jsx)(focus_1.FocusContext.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(platform_1.DesktopView, { testID: `scene-${route.name}`, onFocus: () => store.focusRoute(nodeId, route.key), pointerEvents: visible ? 'auto' : 'none', accessibilityElementsHidden: !visible, importantForAccessibility: visible ? 'auto' : 'no-hide-descendants', accessibilityViewIsModal: !!overlay && visible, style: [
+                        styles.scene,
+                        options.sceneStyle,
+                        overlay && styles.overlay,
+                        overlay === 'dialog' && styles.dialogBackdrop,
+                        overlay && overlayStyle,
+                        !visible && styles.hidden,
+                    ], children: (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+                            styles.content,
+                            overlay === 'dialog' && [
+                                styles.dialog,
+                                { backgroundColor: colors.surface },
+                            ],
+                            options.contentStyle,
+                            overlay === 'dialog' && dialogStyle,
+                            animatedStyle,
+                        ], children: [children, (0, jsx_runtime_1.jsx)(Component, { navigation: navigation, route: route })] }) }) }) }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    scene: { flex: 1 },
+    content: { flex: 1 },
+    hidden: { display: 'none' },
+    overlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0,0,0,0.25)',
+        zIndex: 1,
+    },
+    dialogBackdrop: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 32,
+    },
+    dialog: {
+        flex: 0,
+        width: '80%',
+        maxWidth: 640,
+        maxHeight: '90%',
+        minHeight: 160,
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+});

package/dist/core/SelectionNavigator.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { type Definition } from './builder';
+import type { SidebarScreenOptions, SidebarFooterProps } from './types';
+export interface SelectionNavigatorProps {
+    id?: string;
+    initialRouteName?: string;
+    screenOptions?: SidebarScreenOptions;
+    style?: StyleProp<ViewStyle>;
+    barStyle?: StyleProp<ViewStyle>;
+    barContentStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    sectionStyle?: StyleProp<ViewStyle>;
+    sectionTitleStyle?: StyleProp<TextStyle>;
+    /** Hide the default button independently of programmatic collapse actions. */
+    collapseButtonShown?: boolean;
+    sidebarFooterStyle?: StyleProp<ViewStyle>;
+    /** Replace the entire footer. Return null to remove it without reserving space. */
+    renderSidebarFooter?: (props: SidebarFooterProps) => React.ReactNode;
+    collapseButtonStyle?: StyleProp<ViewStyle>;
+    collapseLabelStyle?: StyleProp<TextStyle>;
+    renderCollapseButtonContent?: (props: {
+        collapsed: boolean;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    position?: 'left' | 'right';
+    /** Use 'fill' to follow the width of a containing Split.Column. */
+    width?: number | 'fill';
+    minWidth?: number;
+    maxWidth?: number;
+    collapsible?: boolean;
+    collapsedWidth?: number;
+    defaultCollapsed?: boolean;
+}
+export declare function SelectionNavigator({ type, definitions, ...props }: SelectionNavigatorProps & {
+    type: 'sidebar' | 'tabs';
+    definitions: Definition<SidebarScreenOptions>[];
+}): React.JSX.Element;

package/dist/core/SelectionNavigator.js

@@ -0,0 +1,194 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionNavigator = SelectionNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const builder_1 = require("./builder");
+const NavigationItem_1 = require("./NavigationItem");
+const Scene_1 = require("./Scene");
+const navigation_1 = require("./navigation");
+const context_1 = require("./context");
+const platform_1 = require("../platform");
+function SelectionNavigator({ type, definitions, ...props }) {
+    const platform = react_1.default.useContext(context_1.PlatformContext);
+    const { colors } = (0, context_1.useNavigationTheme)();
+    const configs = definitions.map((d) => ({
+        ...d,
+        ...props.screenOptions,
+        ...(typeof d.options === 'object' ? d.options : {}),
+    }));
+    const { id, state, store, navigation } = (0, builder_1.useNavigator)(type, {
+        routes: configs,
+        initialRouteName: props.initialRouteName,
+        defaultCollapsed: props.defaultCollapsed,
+    }, props.id);
+    const items = state.routes.map((route) => {
+        const definition = definitions.find((d) => d.name === route.name);
+        if (!definition)
+            throw new Error(`Missing Screen: ${route.name}. Remount to change the screen list.`);
+        return {
+            route,
+            definition,
+            options: (0, builder_1.resolveOptions)(definition, route, (0, navigation_1.createNavigation)(store, id, route.key), props.screenOptions),
+        };
+    });
+    react_1.default.useLayoutEffect(() => {
+        store.updateOptions(id, {
+            key: id,
+            routes: items.map((i) => ({ name: i.route.name, ...i.options })),
+        });
+        const current = items.find((i) => i.route.key === state.activeRouteKey);
+        if (current?.options.hidden || current?.options.disabled) {
+            const next = items.find((i) => !i.options.hidden && !i.options.disabled);
+            if (next)
+                navigation.select(next.route.name);
+        }
+    });
+    const visibleItems = items.filter((i) => !i.options.hidden);
+    const enabled = visibleItems.filter((i) => !i.options.disabled);
+    const [focusedKey, setFocusedKey] = react_1.default.useState('');
+    const refs = react_1.default.useRef(new Map());
+    const sidebar = type === 'sidebar';
+    const collapsed = sidebar && state.collapsed;
+    const splitColumn = react_1.default.useContext(context_1.SplitColumnContext);
+    const scope = react_1.default.useContext(context_1.ScopeContext);
+    const syncColumn = sidebar && splitColumn && scope.nodeId === splitColumn.nodeId
+        ? splitColumn.onSidebarChange
+        : undefined;
+    const columnId = splitColumn?.columnId;
+    const collapsedWidth = props.collapsedWidth ?? 56;
+    react_1.default.useLayoutEffect(() => {
+        if (syncColumn && columnId)
+            syncColumn(columnId, collapsed ? collapsedWidth : null);
+    }, [syncColumn, columnId, collapsed, collapsedWidth]);
+    react_1.default.useLayoutEffect(() => () => {
+        if (syncColumn && columnId)
+            syncColumn(columnId, null);
+    }, [syncColumn, columnId]);
+    const focusItem = (index) => {
+        const item = enabled[(index + enabled.length) % enabled.length];
+        if (!item)
+            return;
+        setFocusedKey(item.route.key);
+        refs.current.get(item.route.key)?.focus();
+    };
+    const bindings = sidebar
+        ? ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter'].map((key) => ({ key }))
+        : [
+            ...['ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter'].map((key) => ({
+                key,
+            })),
+            ...platform.keyboardShortcuts.nextTab,
+            ...platform.keyboardShortcuts.previousTab,
+        ];
+    const collapseContent = ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: colors.text }, props.collapseLabelStyle], children: collapsed ? '»' : '«' }));
+    const collapseButton = sidebar &&
+        props.collapsible !== false &&
+        props.collapseButtonShown !== false ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessible: true, focusable: true, accessibilityRole: "button", accessibilityLabel: collapsed ? 'Expand sidebar' : 'Collapse sidebar', onPress: () => navigation.toggleSidebar(), style: [NavigationItem_1.navigationItemStyle, props.collapseButtonStyle], children: props.renderCollapseButtonContent
+            ? props.renderCollapseButtonContent({
+                collapsed,
+                children: collapseContent,
+            })
+            : collapseContent })) : null;
+    const footer = sidebar && props.renderSidebarFooter
+        ? props.renderSidebarFooter({
+            collapsed,
+            collapseSidebar: navigation.collapseSidebar,
+            expandSidebar: navigation.expandSidebar,
+            toggleSidebar: navigation.toggleSidebar,
+            children: collapseButton,
+        })
+        : collapseButton;
+    const rail = ((0, jsx_runtime_1.jsxs)(platform_1.DesktopView, { accessibilityRole: sidebar ? 'menu' : 'tablist', keyDownEvents: bindings, focusable: true, onKeyDown: (event) => {
+            if ((0, platform_1.eventHandled)(event) ||
+                platform.isTextInputEvent(event) ||
+                !bindings.some((key) => (0, platform_1.matchesShortcut)(event, key)))
+                return;
+            store.setFocusedNode(id);
+            const index = enabled.findIndex((i) => i.route.key === (focusedKey || state.activeRouteKey));
+            const key = event.nativeEvent.key;
+            if (!sidebar &&
+                platform.keyboardShortcuts.nextTab.some((k) => (0, platform_1.matchesShortcut)(event, k)))
+                navigation.nextTab();
+            else if (!sidebar &&
+                platform.keyboardShortcuts.previousTab.some((k) => (0, platform_1.matchesShortcut)(event, k)))
+                navigation.previousTab();
+            else if (key === 'ArrowUp' || key === 'ArrowLeft')
+                focusItem(index - 1);
+            else if (key === 'ArrowDown' || key === 'ArrowRight')
+                focusItem(index + 1);
+            else if (key === 'Home')
+                focusItem(0);
+            else if (key === 'End')
+                focusItem(enabled.length - 1);
+            else if (key === 'Enter') {
+                const item = enabled.find((i) => i.route.key === (focusedKey || state.activeRouteKey));
+                if (item)
+                    navigation.select(item.route.name);
+            }
+            (0, platform_1.consumeKey)(event);
+        }, style: [
+            { backgroundColor: colors.surface, borderColor: colors.border },
+            sidebar
+                ? {
+                    width: collapsed
+                        ? (props.collapsedWidth ?? 56)
+                        : props.width === 'fill'
+                            ? '100%'
+                            : Math.min(props.maxWidth ?? Infinity, Math.max(props.minWidth ?? 120, props.width ?? platform.sidebar.defaultWidth)),
+                    maxWidth: '100%',
+                    ...(props.position === 'right'
+                        ? { borderLeftWidth: react_native_1.StyleSheet.hairlineWidth }
+                        : { borderRightWidth: react_native_1.StyleSheet.hairlineWidth }),
+                }
+                : { borderBottomWidth: react_native_1.StyleSheet.hairlineWidth },
+            props.barStyle,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: !sidebar, contentContainerStyle: [
+                    !sidebar && styles.tabItems,
+                    props.barContentStyle,
+                ], children: visibleItems.map((item, index) => {
+                    const { route, options, definition } = item;
+                    const selected = route.key === state.activeRouteKey;
+                    const section = definition.section;
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [sidebar &&
+                                !collapsed &&
+                                section?.title &&
+                                visibleItems[index - 1]?.definition.section?.key !==
+                                    section.key && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [props.sectionStyle, section.style], children: section.renderTitle ? (section.renderTitle({ title: section.title })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", style: [
+                                        styles.section,
+                                        { color: colors.mutedText },
+                                        props.sectionTitleStyle,
+                                        section.titleStyle,
+                                    ], children: section.title })) })), (0, jsx_runtime_1.jsx)(NavigationItem_1.NavigationItem, { route: route, options: options, selected: selected, focused: focusedKey === route.key, collapsed: collapsed, sidebar: sidebar, itemRef: (value) => {
+                                    if (value)
+                                        refs.current.set(route.key, value);
+                                    else
+                                        refs.current.delete(route.key);
+                                }, onFocus: () => {
+                                    setFocusedKey(route.key);
+                                    store.setFocusedNode(id);
+                                }, onBlur: () => setFocusedKey((current) => current === route.key ? '' : current), onPress: () => {
+                                    store.setFocusedNode(id);
+                                    navigation.select(route.name);
+                                } })] }, route.key));
+                }) }), sidebar && footer != null && footer !== false && ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "sidebar-footer", style: props.sidebarFooterStyle, children: footer }))] }));
+    return ((0, jsx_runtime_1.jsx)(builder_1.NavigatorStateContext.Provider, { value: state, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                styles.container,
+                sidebar && {
+                    flexDirection: props.position === 'right' ? 'row-reverse' : 'row',
+                },
+                props.style,
+            ], children: [rail, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.content, props.contentStyle], children: items.map(({ route, definition, options }) => ((0, jsx_runtime_1.jsx)(Scene_1.Scene, { nodeId: id, route: route, component: definition.component, visible: route.key === state.activeRouteKey &&
+                            !options.hidden &&
+                            !options.disabled, options: options }, route.key))) })] }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+    content: { flex: 1, minWidth: 0 },
+    tabItems: { flexDirection: 'row' },
+    section: { padding: 10, fontSize: 12, fontWeight: '600' },
+});

package/dist/core/builder.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type NavigationState, type RouterOptions, type ParamListBase, type RouteName, type NavigationRoute } from '../routers';
+import type { SidebarSectionOptions } from './types';
+import { type AnyNavigation } from './navigation';
+export declare const NavigatorStateContext: React.Context<NavigationState | null>;
+export interface ScreenConfig<P extends ParamListBase, N extends RouteName<P>, O, Nav = AnyNavigation<P>> {
+    name: N;
+    component: React.ComponentType<{
+        navigation: Nav;
+        route: NavigationRoute<N, P[N]>;
+    }>;
+    initialParams?: P[N];
+    options?: O | ((context: {
+        navigation: Nav;
+        route: NavigationRoute<N, P[N]>;
+    }) => O);
+}
+export interface Definition<O> {
+    name: string;
+    component: React.ComponentType<any>;
+    initialParams?: unknown;
+    options?: O | ((context: {
+        navigation: AnyNavigation;
+        route: NavigationRoute;
+    }) => O);
+    section?: SidebarSectionOptions & {
+        key: string;
+    };
+}
+export declare function readScreens<O>(children: React.ReactNode, Screen: React.ElementType, Section?: React.ElementType): Definition<O>[];
+export declare function useNavigator<S extends NavigationState>(type: S['type'], options: Omit<RouterOptions, 'key'>, explicitId?: string): {
+    id: string;
+    state: S;
+    store: import("./store").NavigationStore;
+    navigation: AnyNavigation<ParamListBase>;
+};
+export declare function resolveOptions<O>(definition: Definition<O>, route: NavigationRoute, navigation: AnyNavigation, defaults?: O | ((context: {
+    route: NavigationRoute;
+    navigation: AnyNavigation;
+}) => O)): O;

package/dist/core/builder.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigatorStateContext = void 0;
+exports.readScreens = readScreens;
+exports.useNavigator = useNavigator;
+exports.resolveOptions = resolveOptions;
+const react_1 = __importDefault(require("react"));
+const routers_1 = require("../routers");
+const context_1 = require("./context");
+const navigation_1 = require("./navigation");
+exports.NavigatorStateContext = react_1.default.createContext(null);
+function readScreens(children, Screen, Section) {
+    const result = [];
+    function visit(items, section) {
+        react_1.default.Children.forEach(items, (child) => {
+            if (!react_1.default.isValidElement(child)) {
+                if (child != null && typeof child !== 'boolean')
+                    throw new Error('Navigator children must be Screen elements.');
+                return;
+            }
+            const props = child.props;
+            if (child.type === react_1.default.Fragment)
+                visit(props.children, section);
+            else if (Section && child.type === Section)
+                visit(props.children, {
+                    key: String(child.key ?? result.length),
+                    title: props.title,
+                    style: props.style,
+                    titleStyle: props.titleStyle,
+                    renderTitle: props.renderTitle,
+                });
+            else if (child.type === Screen)
+                result.push({ ...child.props, section });
+            else
+                throw new Error('Navigator children must be Screen, Section, or Fragment elements.');
+        });
+    }
+    visit(children);
+    if (!result.length ||
+        new Set(result.map((r) => r.name)).size !== result.length)
+        throw new Error('Navigator requires unique Screen names.');
+    return result;
+}
+function useNavigator(type, options, explicitId) {
+    const store = (0, context_1.useStore)();
+    const parent = react_1.default.useContext(context_1.ScopeContext);
+    const id = parent.nodeId
+        ? `${parent.nodeId}/${parent.routeKey}/${explicitId ?? type}`
+        : (explicitId ?? 'root');
+    const config = { ...options, key: id };
+    const [initial] = react_1.default.useState(() => store.getNode(id)?.state ??
+        routers_1.routers[type].getInitialState(config));
+    const getSnapshot = react_1.default.useCallback(() => store.getNode(id)?.state ?? initial, [store, id, initial]);
+    const state = react_1.default.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+    react_1.default.useLayoutEffect(() => store.register({
+        id,
+        parentId: parent.nodeId,
+        parentRouteKey: parent.routeKey,
+        type,
+        state: initial,
+    }, config), [store, id]);
+    react_1.default.useLayoutEffect(() => {
+        store.updateOptions(id, config);
+    });
+    const navigation = react_1.default.useMemo(() => (0, navigation_1.createNavigation)(store, id), [store, id]);
+    return { id, state, store, navigation };
+}
+function resolveOptions(definition, route, navigation, defaults) {
+    const context = { route, navigation };
+    return {
+        ...(typeof defaults === 'function'
+            ? defaults(context)
+            : defaults),
+        ...(typeof definition.options === 'function'
+            ? definition.options(context)
+            : definition.options),
+    };
+}

package/dist/core/context.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { NavigationStore } from './store';
+import type { NavigationRoute } from '../routers';
+import type { AnyNavigation } from './navigation';
+import type { NavigationTheme } from './types';
+export declare const StoreContext: React.Context<NavigationStore | null>;
+export declare const ScopeContext: React.Context<{
+    nodeId?: string;
+    routeKey?: string;
+}>;
+/** Only a Sidebar directly owned by this Split column may resize it. */
+export declare const SplitColumnContext: React.Context<{
+    nodeId: string;
+    columnId: string;
+    onSidebarChange: (columnId: string, width: number | null) => void;
+} | null>;
+export declare const ScreenContext: React.Context<{
+    navigation: AnyNavigation;
+    route: NavigationRoute;
+    focused: boolean;
+} | null>;
+export declare const PlatformContext: React.Context<import("../platform").NavigationPlatformAdapter>;
+export declare const DefaultTheme: NavigationTheme;
+export declare const ThemeContext: React.Context<NavigationTheme>;
+export declare const useNavigationTheme: () => NavigationTheme;
+export declare function useStore(): NavigationStore;

package/dist/core/context.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigationTheme = exports.ThemeContext = exports.DefaultTheme = exports.PlatformContext = exports.ScreenContext = exports.SplitColumnContext = exports.ScopeContext = exports.StoreContext = void 0;
+exports.useStore = useStore;
+const react_1 = __importDefault(require("react"));
+const platform_1 = require("../platform");
+exports.StoreContext = react_1.default.createContext(null);
+exports.ScopeContext = react_1.default.createContext({});
+/** Only a Sidebar directly owned by this Split column may resize it. */
+exports.SplitColumnContext = react_1.default.createContext(null);
+exports.ScreenContext = react_1.default.createContext(null);
+exports.PlatformContext = react_1.default.createContext(platform_1.defaultPlatformAdapter);
+exports.DefaultTheme = {
+    dark: false,
+    colors: {
+        background: '#ffffff',
+        surface: '#f5f5f7',
+        text: '#202124',
+        mutedText: '#64656b',
+        border: '#d8d8dc',
+        accent: '#0067c0',
+        selectedBackground: '#dcecff',
+    },
+};
+exports.ThemeContext = react_1.default.createContext(exports.DefaultTheme);
+const useNavigationTheme = () => react_1.default.useContext(exports.ThemeContext);
+exports.useNavigationTheme = useNavigationTheme;
+function useStore() {
+    const store = react_1.default.useContext(exports.StoreContext);
+    if (!store)
+        throw new Error('Navigation must be rendered inside NavigationContainer.');
+    return store;
+}

package/dist/core/focus.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface FocusTarget {
+    focus(): void;
+}
+export interface FocusRegistry {
+    register(id: string, target: FocusTarget): () => void;
+    record(id: string): void;
+}
+export declare const FocusContext: React.Context<FocusRegistry | null>;
+/** Wrap a ref-forwarding native control (Pressable, TextInput, or a custom control). */
+export declare function NavigationFocusable({ id, children, }: {
+    id: string;
+    children: React.ReactElement<any>;
+}): React.ReactElement<any, string | React.JSXElementConstructor<any>>;