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

package/dist/native/index.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSplitNavigator = exports.createSidebarNavigator = exports.createStackNavigator = exports.restoreNavigationState = exports.serializeNavigationState = exports.NavigationStore = exports.useNavigationTheme = exports.DefaultTheme = exports.NavigationFocusable = exports.useIsFocused = exports.useFocusEffect = exports.useNavigationState = exports.useRoute = exports.useNavigation = exports.createNavigationRef = exports.NavigationContainer = void 0;
+// Same context, Store, Router and hooks as the JS-rendered navigators.
+var NavigationContainer_1 = require("../core/NavigationContainer");
+Object.defineProperty(exports, "NavigationContainer", { enumerable: true, get: function () { return NavigationContainer_1.NavigationContainer; } });
+var navigation_1 = require("../core/navigation");
+Object.defineProperty(exports, "createNavigationRef", { enumerable: true, get: function () { return navigation_1.createNavigationRef; } });
+var hooks_1 = require("../core/hooks");
+Object.defineProperty(exports, "useNavigation", { enumerable: true, get: function () { return hooks_1.useNavigation; } });
+Object.defineProperty(exports, "useRoute", { enumerable: true, get: function () { return hooks_1.useRoute; } });
+Object.defineProperty(exports, "useNavigationState", { enumerable: true, get: function () { return hooks_1.useNavigationState; } });
+Object.defineProperty(exports, "useFocusEffect", { enumerable: true, get: function () { return hooks_1.useFocusEffect; } });
+Object.defineProperty(exports, "useIsFocused", { enumerable: true, get: function () { return hooks_1.useIsFocused; } });
+var focus_1 = require("../core/focus");
+Object.defineProperty(exports, "NavigationFocusable", { enumerable: true, get: function () { return focus_1.NavigationFocusable; } });
+var context_1 = require("../core/context");
+Object.defineProperty(exports, "DefaultTheme", { enumerable: true, get: function () { return context_1.DefaultTheme; } });
+Object.defineProperty(exports, "useNavigationTheme", { enumerable: true, get: function () { return context_1.useNavigationTheme; } });
+var store_1 = require("../core/store");
+Object.defineProperty(exports, "NavigationStore", { enumerable: true, get: function () { return store_1.NavigationStore; } });
+Object.defineProperty(exports, "serializeNavigationState", { enumerable: true, get: function () { return store_1.serializeNavigationState; } });
+Object.defineProperty(exports, "restoreNavigationState", { enumerable: true, get: function () { return store_1.restoreNavigationState; } });
+__exportStar(require("../routers"), exports);
+var stack_1 = require("./stack");
+Object.defineProperty(exports, "createStackNavigator", { enumerable: true, get: function () { return stack_1.createStackNavigator; } });
+var sidebar_1 = require("./sidebar");
+Object.defineProperty(exports, "createSidebarNavigator", { enumerable: true, get: function () { return sidebar_1.createSidebarNavigator; } });
+var split_1 = require("./split");
+Object.defineProperty(exports, "createSplitNavigator", { enumerable: true, get: function () { return split_1.createSplitNavigator; } });

package/dist/native/sidebar.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { ParamListBase, RouteName } from '../routers';
+import { type ScreenConfig } from '../core/builder';
+import type { CommonScreenOptions, SidebarFooterProps, SidebarNavigation } from '../core/types';
+import { type NativeAppearance } from './host';
+import { type NativeSidebarIconOption } from './icons';
+export interface NativeSidebarScreenOptions extends CommonScreenOptions {
+    label?: string;
+    icon?: NativeSidebarIconOption;
+    /** Square slot size for React icons, in points / DIPs (default 24). */
+    iconSize?: number;
+    hidden?: boolean;
+    disabled?: boolean;
+    /** Native item badge. Numbers <= 0 and empty strings hide it. */
+    badge?: number | string;
+}
+export interface NativeSidebarNavigatorProps {
+    children: React.ReactNode;
+    id?: string;
+    initialRouteName?: string;
+    defaultCollapsed?: boolean;
+    width?: number;
+    style?: StyleProp<ViewStyle>;
+    appearance?: NativeAppearance;
+    screenOptions?: NativeSidebarScreenOptions;
+    /** React content below the native item list. `children` is always null. */
+    renderSidebarFooter?: (props: SidebarFooterProps) => React.ReactNode;
+}
+export declare function createSidebarNavigator<P extends ParamListBase = ParamListBase>(): {
+    Navigator: (props: Omit<NativeSidebarNavigatorProps, "initialRouteName"> & {
+        initialRouteName?: RouteName<P>;
+    }) => React.JSX.Element;
+    Screen: <N extends RouteName<P>>(_props: ScreenConfig<P, N, NativeSidebarScreenOptions, SidebarNavigation<P>>) => null;
+    Section: (_props: {
+        title?: string;
+        children: React.ReactNode;
+    }) => null;
+};

package/dist/native/sidebar.js

@@ -0,0 +1,126 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSidebarNavigator = createSidebarNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const builder_1 = require("../core/builder");
+const Scene_1 = require("../core/Scene");
+const navigation_1 = require("../core/navigation");
+const host_1 = require("./host");
+const icons_1 = require("./icons");
+function resolveBadge(badge) {
+    if (typeof badge === 'number')
+        return Number.isFinite(badge) && badge > 0 ? String(badge) : undefined;
+    return typeof badge === 'string' && badge !== '' ? badge : undefined;
+}
+function createSidebarNavigator() {
+    function Screen(_props) {
+        return null;
+    }
+    function Section(_props) {
+        return null;
+    }
+    function Navigator(props) {
+        if (props.width !== undefined &&
+            (!Number.isFinite(props.width) || props.width < 100))
+            throw new Error('Native sidebar width must be a finite number of at least 100.');
+        const definitions = (0, builder_1.readScreens)(props.children, Screen, Section);
+        const { id, state, store, navigation } = (0, builder_1.useNavigator)('sidebar', {
+            routes: definitions.map((d) => ({
+                ...d,
+                ...props.screenOptions,
+                ...(typeof d.options === 'object' ? d.options : {}),
+            })),
+            initialRouteName: props.initialRouteName,
+            defaultCollapsed: props.defaultCollapsed,
+        }, props.id);
+        const [footerHeight, setFooterHeight] = react_1.default.useState(0);
+        const collapseSidebar = () => store.dispatch({ target: id, type: 'collapseSidebar' });
+        const expandSidebar = () => store.dispatch({ target: id, type: 'expandSidebar' });
+        const footer = props.renderSidebarFooter?.({
+            collapsed: state.collapsed,
+            collapseSidebar,
+            expandSidebar,
+            toggleSidebar: () => state.collapsed ? expandSidebar() : collapseSidebar(),
+            children: null,
+        });
+        const hasFooter = footer != null && footer !== false;
+        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.`);
+            const options = (0, builder_1.resolveOptions)(definition, route, (0, navigation_1.createNavigation)(store, id, route.key), props.screenOptions);
+            const iconState = {
+                focused: route.key === state.activeRouteKey,
+                disabled: options.disabled ?? false,
+            };
+            const icon = typeof options.icon === 'function'
+                ? options.icon(iconState)
+                : options.icon;
+            return {
+                route,
+                definition,
+                options,
+                icon,
+                nativeIcon: (0, icons_1.resolveNativeIcon)(icon, iconState, options.iconSize),
+            };
+        });
+        react_1.default.useLayoutEffect(() => {
+            store.updateOptions(id, {
+                key: id,
+                routes: items.map((i) => ({ name: i.route.name, ...i.options })),
+            });
+            const active = items.find((i) => i.route.key === state.activeRouteKey);
+            if (active?.options.disabled || active?.options.hidden) {
+                const next = items.find((i) => !i.options.disabled && !i.options.hidden);
+                if (next)
+                    navigation.select(next.route.name);
+            }
+        });
+        return ((0, jsx_runtime_1.jsx)(builder_1.NavigatorStateContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(host_1.NativeSurface, { style: props.style, configuration: {
+                    mode: 'sidebar',
+                    items: items.map((i) => ({
+                        key: i.route.key,
+                        title: i.options.label ?? i.options.title ?? i.route.name,
+                        hidden: i.options.hidden,
+                        disabled: i.options.disabled,
+                        section: i.definition.section?.title,
+                        icon: i.nativeIcon,
+                        badge: resolveBadge(i.options.badge),
+                    })),
+                    activeKey: state.activeRouteKey,
+                    collapsed: state.collapsed,
+                    paneWidth: props.width ?? 240,
+                    footerHeight: hasFooter && footerHeight > 0 ? footerHeight : undefined,
+                    appearance: props.appearance,
+                }, footer: hasFooter ? footer : undefined, onFooterHeight: (height) => setFooterHeight((previous) => 
+                // Sub-point changes would only churn native revisions.
+                Math.abs(previous - height) < 0.5 ? previous : Math.ceil(height)), icons: items.flatMap((i) => react_1.default.isValidElement(i.icon) && !i.options.hidden
+                    ? [{ key: i.route.key, content: i.icon }]
+                    : []), onRequest: (request) => {
+                    if (request.type === 'collapse')
+                        request.collapsed ? collapseSidebar() : expandSidebar();
+                    if (request.type === 'select') {
+                        const item = items.find((i) => i.route.key === request.key &&
+                            !i.options.hidden &&
+                            !i.options.disabled);
+                        if (item) {
+                            store.setFocusedNode(id);
+                            navigation.select(item.route.name);
+                        }
+                    }
+                }, slots: items.map(({ route, definition, options }) => ({
+                    key: route.key,
+                    visible: route.key === state.activeRouteKey &&
+                        !options.hidden &&
+                        !options.disabled,
+                    content: (ready) => ((0, jsx_runtime_1.jsx)(Scene_1.Scene, { focusReady: ready, nodeId: id, route: route, component: definition.component, visible: route.key === state.activeRouteKey &&
+                            !options.hidden &&
+                            !options.disabled, options: options })),
+                })) }) }));
+    }
+    return { Navigator, Screen, Section };
+}

package/dist/native/specs/DesktopNavigationHostNativeComponent.d.ts

@@ -0,0 +1,10 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+export interface NativeProps extends ViewProps {
+    configuration: string;
+    onNavigationEvent?: DirectEventHandler<Readonly<{
+        payload: string;
+    }>>;
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/dist/native/specs/DesktopNavigationHostNativeComponent.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+exports.default = (0, react_native_1.codegenNativeComponent)('DesktopNavigationHost');

package/dist/native/split.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type NativeAppearance } from './host';
+export interface NativeSplitColumnProps {
+    id: string;
+    component: React.ComponentType;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+}
+export interface NativeSplitNavigatorProps {
+    children: React.ReactNode;
+    id?: string;
+    style?: StyleProp<ViewStyle>;
+    appearance?: NativeAppearance;
+    layout?: (size: {
+        width: number;
+        height: number;
+    }) => string[];
+    onColumnResize?: (id: string, width: number) => void;
+}
+export declare function createSplitNavigator(): {
+    Navigator: (props: NativeSplitNavigatorProps) => React.JSX.Element;
+    Column: (_props: NativeSplitColumnProps) => null;
+};

package/dist/native/split.js

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSplitNavigator = createSplitNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const routers_1 = require("../routers");
+const builder_1 = require("../core/builder");
+const Scene_1 = require("../core/Scene");
+const context_1 = require("../core/context");
+const host_1 = require("./host");
+function createSplitNavigator() {
+    function Column(_props) {
+        return null;
+    }
+    function Navigator(props) {
+        const columns = [];
+        react_1.default.Children.forEach(props.children, (child) => {
+            if (child == null || typeof child === 'boolean')
+                return;
+            if (!react_1.default.isValidElement(child) || child.type !== Column)
+                throw new Error('Split.Navigator children must be Split.Column elements.');
+            columns.push(child.props);
+        });
+        const { id, state, store } = (0, builder_1.useNavigator)('split', { routes: columns.map((c) => ({ ...c, name: c.id })) }, props.id);
+        const [size, setSize] = react_1.default.useState(null);
+        react_1.default.useLayoutEffect(() => {
+            if (!size)
+                return;
+            const ids = props.layout ? props.layout(size) : columns.map((c) => c.id);
+            store.dispatch({ type: 'layout', target: id, payload: { ids } });
+        });
+        return ((0, jsx_runtime_1.jsx)(builder_1.NavigatorStateContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(host_1.NativeSurface, { style: props.style, onMeasurements: (frames) => {
+                    const before = store.getNode(id)?.state;
+                    if (!before)
+                        return;
+                    const widths = Object.fromEntries(before.visibleColumnIds
+                        .filter((key) => frames[key]?.width > 0)
+                        .map((key) => [key, frames[key].width]));
+                    store.dispatch({
+                        type: 'layout',
+                        target: id,
+                        payload: { ids: before.visibleColumnIds, widths },
+                    });
+                    const after = store.getNode(id).state;
+                    for (const key of before.visibleColumnIds)
+                        if (after.widths[key] !== before.widths[key])
+                            props.onColumnResize?.(key, after.widths[key]);
+                }, onLayout: (event) => {
+                    const { width, height } = event.nativeEvent.layout;
+                    setSize((previous) => previous?.width === width && previous.height === height
+                        ? previous
+                        : { width, height });
+                }, configuration: {
+                    mode: 'split',
+                    items: columns.map((c) => ({ key: c.id, title: c.id })),
+                    activeKey: state.activeRouteKey,
+                    appearance: props.appearance,
+                    columns: state.visibleColumnIds.map((key) => {
+                        const c = columns.find((c) => c.id === key);
+                        const constraints = (0, routers_1.splitColumnConfig)(state, {
+                            ...c,
+                            name: c.id,
+                        });
+                        return {
+                            key,
+                            width: state.widths[key],
+                            minWidth: constraints.minWidth ?? 100,
+                            maxWidth: constraints.maxWidth,
+                        };
+                    }),
+                }, onRequest: (request) => {
+                    if (request.type !== 'resize' ||
+                        !state.visibleColumnIds.includes(request.key))
+                        return;
+                    const before = store.getNode(id).state;
+                    store.dispatch({
+                        type: 'resize',
+                        target: id,
+                        payload: { id: request.key, width: request.width },
+                    });
+                    const after = store.getNode(id).state;
+                    if (before.widths[request.key] !== after.widths[request.key])
+                        props.onColumnResize?.(request.key, after.widths[request.key]);
+                }, slots: state.routes.map((route) => {
+                    const column = columns.find((c) => c.id === route.name);
+                    if (!column)
+                        throw new Error(`Missing Column: ${route.name}. Remount to change the column list.`);
+                    const visible = state.visibleColumnIds.includes(route.name);
+                    return {
+                        key: route.name,
+                        visible,
+                        content: (ready) => ((0, jsx_runtime_1.jsx)(context_1.SplitColumnContext.Provider, { value: null, children: (0, jsx_runtime_1.jsx)(context_1.ScopeContext.Provider, { value: { nodeId: id, routeKey: route.key }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ flex: 1 }, column.style], children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { focusReady: ready, nodeId: id, route: route, component: column.component, visible: visible, options: {
+                                            focusBehavior: 'none',
+                                            inactiveBehavior: 'keep',
+                                            contentStyle: column.contentStyle,
+                                        } }) }) }) })),
+                    };
+                }) }) }));
+    }
+    return { Navigator, Column };
+}

package/dist/native/stack.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { HistoryBehavior, ParamListBase, RouteName } from '../routers';
+import { type ScreenConfig } from '../core/builder';
+import type { StackNavigation, StackScreenOptions } from '../core/types';
+import { type NativeAppearance } from './host';
+import type { StyleProp, ViewStyle } from 'react-native';
+/** Native stacks currently support card presentation without RN entrance animations. */
+export type NativeStackScreenOptions = Omit<StackScreenOptions, 'animation' | 'presentation' | 'overlayStyle' | 'dialogStyle'>;
+export interface NativeStackNavigatorProps {
+    children: React.ReactNode;
+    id?: string;
+    initialRouteName?: string;
+    historyBehavior?: HistoryBehavior;
+    screenOptions?: NativeStackScreenOptions | ((context: {
+        navigation: StackNavigation;
+        route: import('../routers').NavigationRoute;
+    }) => NativeStackScreenOptions);
+    style?: StyleProp<ViewStyle>;
+    appearance?: NativeAppearance;
+}
+export declare function createStackNavigator<P extends ParamListBase = ParamListBase>(): {
+    Navigator: (props: Omit<NativeStackNavigatorProps, "initialRouteName"> & {
+        initialRouteName?: RouteName<P>;
+    }) => React.JSX.Element;
+    Screen: <N extends RouteName<P>>(_props: ScreenConfig<P, N, NativeStackScreenOptions, StackNavigation<P>>) => null;
+};

package/dist/native/stack.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStackNavigator = createStackNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const builder_1 = require("../core/builder");
+const Scene_1 = require("../core/Scene");
+const navigation_1 = require("../core/navigation");
+const stack_1 = require("../stack");
+const host_1 = require("./host");
+function createStackNavigator() {
+    function Screen(_props) {
+        return null;
+    }
+    function Navigator(props) {
+        const definitions = (0, builder_1.readScreens)(props.children, Screen);
+        const { id, state, store } = (0, builder_1.useNavigator)('stack', {
+            routes: definitions,
+            initialRouteName: props.initialRouteName,
+            historyBehavior: props.historyBehavior,
+        }, props.id);
+        const snapshot = react_1.default.useCallback(() => store.canDispatch('back', id), [store, id]);
+        const canGoBack = react_1.default.useSyncExternalStore(store.subscribe, snapshot, snapshot);
+        const scenes = 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.`);
+            const navigation = (0, navigation_1.createNavigation)(store, id, route.key);
+            const options = (0, builder_1.resolveOptions)(definition, route, navigation, props.screenOptions);
+            // Any RN header customization selects the existing customizable header.
+            const customHeader = Object.keys(options).some((key) => key.startsWith('header') &&
+                !['headerShown', 'headerBackTitle'].includes(key));
+            return { route, definition, navigation, options, customHeader };
+        });
+        const active = scenes.find((scene) => scene.route.key === state.activeRouteKey);
+        return ((0, jsx_runtime_1.jsx)(builder_1.NavigatorStateContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(host_1.NativeSurface, { style: props.style, configuration: {
+                    mode: 'stack',
+                    items: scenes.map((s) => ({
+                        key: s.route.key,
+                        title: s.options.title ?? s.route.name,
+                    })),
+                    activeKey: state.activeRouteKey,
+                    appearance: props.appearance,
+                    headerShown: active.options.headerShown !== false && !active.customHeader,
+                    canGoBack,
+                    backTitle: active.options.headerBackTitle ?? 'Back',
+                }, onRequest: (request) => {
+                    if (request.type === 'back')
+                        store.dispatch({ type: 'back', target: id });
+                    if (request.type === 'pop' && request.count < state.routes.length)
+                        store.dispatch({
+                            type: 'pop',
+                            target: id,
+                            payload: { count: request.count },
+                        });
+                }, slots: scenes.map(({ route, definition, navigation, options, customHeader }) => ({
+                    key: route.key,
+                    visible: route.key === state.activeRouteKey,
+                    content: (ready) => ((0, jsx_runtime_1.jsx)(Scene_1.Scene, { focusReady: ready, nodeId: id, route: route, component: definition.component, visible: route.key === state.activeRouteKey, options: options, children: customHeader && ((0, jsx_runtime_1.jsx)(stack_1.StackHeader, { route: route, navigation: navigation, options: options, canGoBack: canGoBack })) })),
+                })) }) }));
+    }
+    return { Navigator, Screen };
+}

package/dist/platform/index.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+export interface KeyboardShortcut {
+    key: string;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    shiftKey?: boolean;
+}
+export interface DesktopKeyEvent {
+    nativeEvent: KeyboardShortcut & {
+        handled?: boolean;
+        isTextInput?: boolean;
+        target?: unknown;
+    };
+    defaultPrevented?: boolean;
+    isPropagationStopped?: () => boolean;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+}
+export interface TransitionPreset {
+    duration: number;
+    offset: number;
+}
+export interface NavigationPlatformAdapter {
+    defaultTransitions: {
+        push: TransitionPreset;
+        pop: TransitionPreset;
+    };
+    keyboardShortcuts: {
+        back: KeyboardShortcut[];
+        forward: KeyboardShortcut[];
+        nextTab: KeyboardShortcut[];
+        previousTab: KeyboardShortcut[];
+    };
+    sidebar: {
+        defaultWidth: number;
+    };
+    isTextInputEvent(event: DesktopKeyEvent): boolean;
+}
+export declare const defaultPlatformAdapter: NavigationPlatformAdapter;
+export declare function isTextInputEvent(event: DesktopKeyEvent): boolean;
+export declare function matchesShortcut(event: DesktopKeyEvent, shortcut: KeyboardShortcut): boolean;
+export declare const eventHandled: (event: DesktopKeyEvent) => boolean;
+export declare function consumeKey(event: DesktopKeyEvent): void;
+export interface DesktopViewProps extends ViewProps {
+    onKeyDown?: (event: DesktopKeyEvent) => void;
+    keyDownEvents?: KeyboardShortcut[];
+    onFocus?: () => void;
+    focusable?: boolean;
+}
+export declare const DesktopView: React.ComponentType<DesktopViewProps & React.RefAttributes<View>>;

package/dist/platform/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopView = exports.eventHandled = exports.defaultPlatformAdapter = void 0;
+exports.isTextInputEvent = isTextInputEvent;
+exports.matchesShortcut = matchesShortcut;
+exports.consumeKey = consumeKey;
+const react_native_1 = require("react-native");
+const macos_1 = require("./macos");
+const windows_1 = require("./windows");
+exports.defaultPlatformAdapter = react_native_1.Platform.OS === 'windows' ? windows_1.windowsAdapter : macos_1.macosAdapter;
+function isTextInputEvent(event) {
+    return (event.nativeEvent.isTextInput === true ||
+        react_native_1.TextInput.State.currentlyFocusedInput() != null);
+}
+function matchesShortcut(event, shortcut) {
+    return (event.nativeEvent.key === shortcut.key &&
+        ['metaKey', 'ctrlKey', 'altKey', 'shiftKey'].every((key) => !!event.nativeEvent[key] === !!shortcut[key]));
+}
+const eventHandled = (event) => !!(event.defaultPrevented ||
+    event.nativeEvent.handled ||
+    event.isPropagationStopped?.());
+exports.eventHandled = eventHandled;
+function consumeKey(event) {
+    event.preventDefault?.();
+    event.stopPropagation?.();
+}
+// RN desktop adds these native View props. Keep the platform type extension in one place.
+exports.DesktopView = react_native_1.View;

package/dist/platform/macos.d.ts

@@ -0,0 +1,2 @@
+import { type NavigationPlatformAdapter } from './index';
+export declare const macosAdapter: NavigationPlatformAdapter;

package/dist/platform/macos.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.macosAdapter = void 0;
+const index_1 = require("./index");
+exports.macosAdapter = {
+    defaultTransitions: {
+        push: { duration: 160, offset: 12 },
+        pop: { duration: 120, offset: -12 },
+    },
+    keyboardShortcuts: {
+        back: [{ key: '[', metaKey: true }],
+        forward: [{ key: ']', metaKey: true }],
+        nextTab: [{ key: 'Tab', ctrlKey: true }],
+        previousTab: [{ key: 'Tab', ctrlKey: true, shiftKey: true }],
+    },
+    sidebar: { defaultWidth: 220 },
+    isTextInputEvent: index_1.isTextInputEvent,
+};

package/dist/platform/windows.d.ts

@@ -0,0 +1,2 @@
+import { type NavigationPlatformAdapter } from './index';
+export declare const windowsAdapter: NavigationPlatformAdapter;

package/dist/platform/windows.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.windowsAdapter = void 0;
+const index_1 = require("./index");
+exports.windowsAdapter = {
+    defaultTransitions: {
+        push: { duration: 160, offset: 16 },
+        pop: { duration: 120, offset: -16 },
+    },
+    keyboardShortcuts: {
+        back: [{ key: 'ArrowLeft', altKey: true }],
+        forward: [{ key: 'ArrowRight', altKey: true }],
+        nextTab: [{ key: 'Tab', ctrlKey: true }],
+        previousTab: [{ key: 'Tab', ctrlKey: true, shiftKey: true }],
+    },
+    sidebar: { defaultWidth: 240 },
+    isTextInputEvent: index_1.isTextInputEvent,
+};

package/dist/routers/index.d.ts

@@ -0,0 +1,23 @@
+import type { NavigationState, Router, RouterOptions, StackNavigationState, SelectionNavigationState, SplitNavigationState, NavigationAction, RouteConfig } from './types';
+export * from './types';
+export declare const createRouteKey: (name: string) => string;
+export declare function validateRoutes(options: RouterOptions): void;
+export declare const StackRouter: Router<StackNavigationState>;
+export declare const SidebarRouter: Router<SelectionNavigationState>;
+export declare const TabRouter: Router<SelectionNavigationState>;
+export declare function clampColumnWidth(width: number, config: {
+    minWidth?: number;
+    maxWidth?: number;
+}): number;
+/** Fit visible columns to the available content width (excluding divider widths). */
+export declare function fitSplitWidths(columns: RouterOptions['routes'], widths: Record<string, number>, availableWidth: number): Record<string, number>;
+/** Collapsed columns stay at their Sidebar width, even below the expanded minimum. */
+export declare function splitColumnConfig(state: SplitNavigationState, config: RouteConfig): RouteConfig;
+export declare const SplitRouter: Router<SplitNavigationState>;
+export declare const routers: {
+    stack: Router<StackNavigationState>;
+    sidebar: Router<SelectionNavigationState>;
+    tabs: Router<SelectionNavigationState>;
+    split: Router<SplitNavigationState>;
+};
+export declare function reduceNavigation(state: NavigationState, action: NavigationAction, options: RouterOptions): NavigationState | null;