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

package/dist/routers/index.js

@@ -0,0 +1,393 @@
+"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.routers = exports.SplitRouter = exports.TabRouter = exports.SidebarRouter = exports.StackRouter = exports.createRouteKey = void 0;
+exports.validateRoutes = validateRoutes;
+exports.clampColumnWidth = clampColumnWidth;
+exports.fitSplitWidths = fitSplitWidths;
+exports.splitColumnConfig = splitColumnConfig;
+exports.reduceNavigation = reduceNavigation;
+__exportStar(require("./types"), exports);
+let sequence = 0;
+const createRouteKey = (name) => `${name}-${Date.now().toString(36)}-${(++sequence).toString(36)}`;
+exports.createRouteKey = createRouteKey;
+function validateRoutes(options) {
+    const names = options.routes.map((r) => r.name);
+    if (!names.length)
+        throw new Error('A navigator requires at least one screen.');
+    if (new Set(names).size !== names.length)
+        throw new Error('Duplicate Screen name or Split.Column id.');
+    if (options.initialRouteName && !names.includes(options.initialRouteName))
+        throw new Error(`Unknown initialRouteName: ${options.initialRouteName}`);
+}
+const routeFor = (options, name, key = `${options.key}/${name}/initial`, params) => ({
+    key,
+    name,
+    params: params === undefined
+        ? options.routes.find((r) => r.name === name)?.initialParams
+        : params,
+});
+const top = (routes) => routes[routes.length - 1].key;
+const eligible = (options, name) => options.routes.some((r) => r.name === name && !r.hidden && !r.disabled);
+function withRoutes(state, routes, record = true) {
+    if (routes === state.routes)
+        return state;
+    return {
+        ...state,
+        routes,
+        activeRouteKey: top(routes),
+        history: state.history &&
+            (record
+                ? { past: [...state.history.past, state.routes], future: [] }
+                : state.history),
+    };
+}
+exports.StackRouter = {
+    getInitialState(options) {
+        validateRoutes(options);
+        const route = routeFor(options, options.initialRouteName ?? options.routes[0].name);
+        return {
+            type: 'stack',
+            key: options.key,
+            routes: [route],
+            activeRouteKey: route.key,
+            nextRouteId: 1,
+            ...(options.historyBehavior === 'desktop'
+                ? { history: { past: [], future: [] } }
+                : {}),
+        };
+    },
+    reduce(state, action, options) {
+        const routes = state.routes;
+        switch (action.type) {
+            case 'navigate':
+            case 'push':
+            case 'replace':
+            case 'popTo': {
+                const { name, params } = action.payload;
+                const key = action.payload.key ?? `${state.key}/${name}/${state.nextRouteId}`;
+                const fresh = { ...state, nextRouteId: state.nextRouteId + 1 };
+                if (!options.routes.some((r) => r.name === name))
+                    return null;
+                if (action.type === 'push')
+                    return withRoutes(fresh, [
+                        ...routes,
+                        routeFor(options, name, key, params),
+                    ]);
+                if (action.type === 'replace')
+                    return withRoutes(fresh, [
+                        ...routes.slice(0, -1),
+                        routeFor(options, name, key, params),
+                    ]);
+                let index = routes.length - 1;
+                while (index >= 0 && routes[index].name !== name)
+                    index--;
+                if (index < 0) {
+                    if (action.type === 'popTo') {
+                        console.warn(`popTo: route ${name} is not in the stack.`);
+                        return state;
+                    }
+                    return withRoutes(fresh, [
+                        ...routes,
+                        routeFor(options, name, key, params),
+                    ]);
+                }
+                if (index === routes.length - 1 && params === undefined)
+                    return state;
+                return withRoutes(state, [
+                    ...routes.slice(0, index),
+                    { ...routes[index], ...(params === undefined ? {} : { params }) },
+                ]);
+            }
+            case 'back':
+                if (state.history?.past.length) {
+                    const past = state.history.past;
+                    const previous = past[past.length - 1];
+                    return {
+                        ...state,
+                        routes: previous,
+                        activeRouteKey: top(previous),
+                        history: {
+                            past: past.slice(0, -1),
+                            future: [routes, ...state.history.future],
+                        },
+                    };
+                }
+                if (state.history)
+                    return null;
+                return routes.length > 1
+                    ? withRoutes(state, routes.slice(0, -1))
+                    : null;
+            case 'forward': {
+                if (!state.history?.future.length)
+                    return null;
+                const [next, ...future] = state.history.future;
+                return {
+                    ...state,
+                    routes: next,
+                    activeRouteKey: top(next),
+                    history: { past: [...state.history.past, routes], future },
+                };
+            }
+            case 'pop': {
+                const count = action.payload?.count ?? 1;
+                if (!Number.isInteger(count) || count < 1) {
+                    console.warn('pop count must be a positive integer.');
+                    return state;
+                }
+                if (count >= routes.length)
+                    console.warn('pop exceeds the stack root; keeping the root screen.');
+                return routes.length > 1
+                    ? withRoutes(state, routes.slice(0, Math.max(1, routes.length - count)))
+                    : state;
+            }
+            case 'popToRoot':
+                return routes.length > 1
+                    ? withRoutes(state, routes.slice(0, 1))
+                    : state;
+            default:
+                return null;
+        }
+    },
+};
+function selectionRouter(type) {
+    return {
+        getInitialState(options) {
+            validateRoutes(options);
+            const routes = options.routes.map((r) => routeFor(options, r.name));
+            const name = options.initialRouteName ??
+                options.routes.find((r) => !r.hidden && !r.disabled)?.name;
+            if (!name || !eligible(options, name))
+                throw new Error('Initial selection must be a visible, enabled screen.');
+            return {
+                type,
+                key: options.key,
+                routes,
+                activeRouteKey: routes.find((r) => r.name === name).key,
+                collapsed: options.defaultCollapsed ?? false,
+            };
+        },
+        reduce(state, action, options) {
+            if (action.type === 'navigate' || action.type === 'select') {
+                const name = action.payload.name;
+                const route = state.routes.find((r) => r.name === name);
+                if (!route)
+                    return null;
+                if (!eligible(options, name))
+                    return state;
+                const params = action.type === 'navigate' ? action.payload.params : undefined;
+                if (route.key === state.activeRouteKey && params === undefined)
+                    return state;
+                return {
+                    ...state,
+                    activeRouteKey: route.key,
+                    routes: params === undefined
+                        ? state.routes
+                        : state.routes.map((r) => r.key === route.key ? { ...r, params } : r),
+                };
+            }
+            if (type === 'tabs' &&
+                (action.type === 'nextTab' || action.type === 'previousTab')) {
+                const routes = state.routes.filter((r) => eligible(options, r.name));
+                if (!routes.length)
+                    return state;
+                const index = routes.findIndex((r) => r.key === state.activeRouteKey);
+                const next = (index + (action.type === 'nextTab' ? 1 : -1) + routes.length) %
+                    routes.length;
+                return { ...state, activeRouteKey: routes[next].key };
+            }
+            if (type === 'sidebar' &&
+                ['collapseSidebar', 'expandSidebar', 'toggleSidebar'].includes(action.type)) {
+                const collapsed = action.type === 'toggleSidebar'
+                    ? !state.collapsed
+                    : action.type === 'collapseSidebar';
+                return collapsed === state.collapsed ? state : { ...state, collapsed };
+            }
+            return null;
+        },
+    };
+}
+exports.SidebarRouter = selectionRouter('sidebar');
+exports.TabRouter = selectionRouter('tabs');
+function clampColumnWidth(width, config) {
+    const min = config.minWidth ?? 100, max = config.maxWidth ?? Number.MAX_SAFE_INTEGER;
+    if (!Number.isFinite(min) || min < 0 || !Number.isFinite(max) || max < min)
+        throw new Error('Invalid column width constraints.');
+    return Math.min(max, Math.max(min, Number.isFinite(width) ? width : min));
+}
+/** Fit visible columns to the available content width (excluding divider widths). */
+function fitSplitWidths(columns, widths, availableWidth) {
+    const fitted = Object.fromEntries(columns.map((c) => [
+        c.name,
+        clampColumnWidth(widths[c.name] ?? c.defaultWidth ?? c.minWidth ?? 240, c),
+    ]));
+    if (!columns.length || !Number.isFinite(availableWidth))
+        return fitted;
+    const last = columns[columns.length - 1];
+    const fixedWidth = columns
+        .slice(0, -1)
+        .reduce((sum, c) => sum + fitted[c.name], 0);
+    fitted[last.name] = clampColumnWidth(Math.max(0, availableWidth - fixedWidth), last);
+    let remaining = availableWidth -
+        Object.values(fitted).reduce((sum, width) => sum + width, 0);
+    // Respect all min/max constraints when the viewport grows or shrinks.
+    for (const column of [...columns].reverse()) {
+        const previous = fitted[column.name];
+        fitted[column.name] = clampColumnWidth(previous + remaining, column);
+        remaining -= fitted[column.name] - previous;
+    }
+    return fitted;
+}
+/** Collapsed columns stay at their Sidebar width, even below the expanded minimum. */
+function splitColumnConfig(state, config) {
+    const collapsed = state.collapsedColumns?.[config.name];
+    return collapsed
+        ? { ...config, minWidth: collapsed.width, maxWidth: collapsed.width }
+        : config;
+}
+exports.SplitRouter = {
+    getInitialState(options) {
+        validateRoutes(options);
+        if (options.routes.length < 2 || options.routes.length > 3)
+            throw new Error('Split requires 2–3 columns.');
+        const routes = options.routes.map((r) => routeFor(options, r.name));
+        return {
+            type: 'split',
+            key: options.key,
+            routes,
+            activeRouteKey: routes[0].key,
+            widths: Object.fromEntries(options.routes.map((r) => [
+                r.name,
+                clampColumnWidth(r.defaultWidth ?? r.minWidth ?? 240, r),
+            ])),
+            visibleColumnIds: routes.map((r) => r.name),
+        };
+    },
+    reduce(state, action, options) {
+        const configs = options.routes.map((config) => splitColumnConfig(state, config));
+        if (action.type === 'resizeBoundary') {
+            const index = state.visibleColumnIds.indexOf(action.payload.id);
+            const rightId = state.visibleColumnIds[index + 1];
+            if (index < 0 || !rightId)
+                return null;
+            const left = configs.find((c) => c.name === action.payload.id);
+            const right = configs.find((c) => c.name === rightId);
+            const total = state.widths[left.name] + state.widths[right.name];
+            const min = Math.max(left.minWidth ?? 100, total - (right.maxWidth ?? Number.MAX_SAFE_INTEGER));
+            const max = Math.min(left.maxWidth ?? Number.MAX_SAFE_INTEGER, total - (right.minWidth ?? 100));
+            if (min > max || !Number.isFinite(action.payload.width))
+                return state;
+            const width = Math.max(min, Math.min(max, action.payload.width));
+            if (width === state.widths[left.name])
+                return state;
+            return {
+                ...state,
+                widths: {
+                    ...state.widths,
+                    [left.name]: width,
+                    [right.name]: total - width,
+                },
+            };
+        }
+        if (action.type === 'resize') {
+            const config = configs.find((r) => r.name === action.payload.id);
+            if (!config)
+                return null;
+            const width = clampColumnWidth(action.payload.width, config);
+            return state.widths[config.name] === width
+                ? state
+                : { ...state, widths: { ...state.widths, [config.name]: width } };
+        }
+        if (action.type === 'layout') {
+            const ids = action.payload.ids;
+            if (!ids.length ||
+                new Set(ids).size !== ids.length ||
+                ids.some((id) => !state.routes.some((r) => r.name === id)))
+                throw new Error('Split layout must return unique, known column ids.');
+            let widths = { ...state.widths };
+            const collapsedColumns = { ...state.collapsedColumns };
+            const expanded = new Set();
+            let collapseChanged = false;
+            for (const [columnId, width] of Object.entries(action.payload.collapsedWidths ?? {})) {
+                const config = options.routes.find((c) => c.name === columnId);
+                if (!config)
+                    continue;
+                const previous = collapsedColumns[columnId];
+                if (width === null) {
+                    if (!previous)
+                        continue;
+                    widths[columnId] = clampColumnWidth(previous.expandedWidth, config);
+                    delete collapsedColumns[columnId];
+                    expanded.add(columnId);
+                }
+                else {
+                    if (!Number.isFinite(width) || width < 0)
+                        throw new Error('Invalid collapsed column width.');
+                    if (previous?.width === width)
+                        continue;
+                    collapsedColumns[columnId] = {
+                        width,
+                        expandedWidth: previous?.expandedWidth ?? widths[columnId],
+                    };
+                    widths[columnId] = width;
+                }
+                collapseChanged = true;
+            }
+            const nextConfigs = options.routes.map((config) => splitColumnConfig({ ...state, collapsedColumns }, config));
+            for (const config of nextConfigs) {
+                const width = action.payload.widths?.[config.name];
+                if (width !== undefined && ids.includes(config.name))
+                    widths[config.name] = clampColumnWidth(width, config);
+            }
+            if (action.payload.availableWidth !== undefined) {
+                const visibleConfigs = ids.map((id) => nextConfigs.find((c) => c.name === id));
+                // Restore an expanded trailing column before giving leftover space to its neighbors.
+                const fitOrder = [
+                    ...visibleConfigs.filter((c) => expanded.has(c.name)),
+                    ...visibleConfigs.filter((c) => !expanded.has(c.name)),
+                ];
+                widths = {
+                    ...widths,
+                    ...fitSplitWidths(fitOrder, widths, action.payload.availableWidth),
+                };
+            }
+            if (!collapseChanged &&
+                ids.join('\0') === state.visibleColumnIds.join('\0') &&
+                Object.keys(widths).every((id) => widths[id] === state.widths[id]))
+                return state;
+            const active = state.routes.find((r) => r.key === state.activeRouteKey);
+            return {
+                ...state,
+                visibleColumnIds: [...ids],
+                widths,
+                ...(collapseChanged && { collapsedColumns }),
+                activeRouteKey: ids.includes(active.name)
+                    ? active.key
+                    : state.routes.find((r) => r.name === ids[0]).key,
+            };
+        }
+        return null;
+    },
+};
+exports.routers = {
+    stack: exports.StackRouter,
+    sidebar: exports.SidebarRouter,
+    tabs: exports.TabRouter,
+    split: exports.SplitRouter,
+};
+function reduceNavigation(state, action, options) {
+    return exports.routers[state.type].reduce(state, action, options);
+}

package/dist/routers/types.d.ts

@@ -0,0 +1,116 @@
+export type ParamListBase = Record<string, unknown>;
+export type RouteName<P extends ParamListBase> = Extract<keyof P, string>;
+export type RouteArgs<P extends ParamListBase> = {
+    [N in RouteName<P>]: undefined extends P[N] ? [name: N, params?: P[N]] : [name: N, params: P[N]];
+}[RouteName<P>];
+export interface NavigationRoute<Name extends string = string, Params = unknown> {
+    key: string;
+    name: Name;
+    params: Params;
+}
+export type HistoryBehavior = 'stack' | 'desktop';
+export interface StackHistoryState {
+    past: NavigationRoute[][];
+    future: NavigationRoute[][];
+}
+export interface StackNavigationState {
+    type: 'stack';
+    key: string;
+    routes: NavigationRoute[];
+    activeRouteKey: string;
+    history?: StackHistoryState;
+    /** Monotonic route instance counter; independent of back/forward history. */
+    nextRouteId: number;
+}
+export interface SelectionNavigationState {
+    type: 'sidebar' | 'tabs';
+    key: string;
+    routes: NavigationRoute[];
+    activeRouteKey: string;
+    collapsed: boolean;
+}
+export interface SplitNavigationState {
+    type: 'split';
+    key: string;
+    routes: NavigationRoute[];
+    activeRouteKey: string;
+    widths: Record<string, number>;
+    visibleColumnIds: string[];
+    /** Saved expanded widths for columns currently following a collapsed Sidebar. */
+    collapsedColumns?: Record<string, {
+        width: number;
+        expandedWidth: number;
+    }>;
+}
+export type NavigationState = StackNavigationState | SelectionNavigationState | SplitNavigationState;
+export interface NavigationNode {
+    id: string;
+    parentId?: string;
+    parentRouteKey?: string;
+    type: NavigationState['type'];
+    state: NavigationState;
+}
+export interface RootNavigationState {
+    version: 1;
+    rootNodeId: string;
+    activeNodeId?: string;
+    nodes: Record<string, NavigationNode>;
+}
+export type NavigationAction = {
+    target?: string;
+} & ({
+    type: 'navigate' | 'push' | 'replace' | 'popTo';
+    payload: {
+        name: string;
+        params?: unknown;
+        key?: string;
+    };
+} | {
+    type: 'select';
+    payload: {
+        name: string;
+    };
+} | {
+    type: 'pop';
+    payload?: {
+        count?: number;
+    };
+} | {
+    type: 'back' | 'forward' | 'popToRoot' | 'nextTab' | 'previousTab' | 'collapseSidebar' | 'expandSidebar' | 'toggleSidebar';
+} | {
+    type: 'resize' | 'resizeBoundary';
+    payload: {
+        id: string;
+        width: number;
+    };
+} | {
+    type: 'layout';
+    payload: {
+        ids: string[];
+        widths?: Record<string, number>;
+        availableWidth?: number;
+        /** null restores the expanded width; omitted ids keep their current state. */
+        collapsedWidths?: Record<string, number | null>;
+    };
+});
+export interface RouteConfig {
+    name: string;
+    initialParams?: unknown;
+    hidden?: boolean;
+    disabled?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+}
+export interface RouterOptions {
+    key: string;
+    routes: RouteConfig[];
+    initialRouteName?: string;
+    historyBehavior?: HistoryBehavior;
+    defaultCollapsed?: boolean;
+}
+export interface Router<S extends NavigationState = NavigationState> {
+    getInitialState(options: RouterOptions): S;
+    /** null means unhandled and allows the store to bubble to the parent. */
+    reduce(state: S, action: NavigationAction, options: RouterOptions): S | null;
+}

package/dist/routers/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/sidebar/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ParamListBase, RouteName } from '../routers';
+import { type ScreenConfig } from '../core/builder';
+import { type SelectionNavigatorProps } from '../core/SelectionNavigator';
+import type { SidebarNavigation, SidebarScreenOptions, SidebarSectionOptions } from '../core/types';
+export interface SidebarNavigatorOptions extends SelectionNavigatorProps {
+}
+export declare function createSidebarNavigator<P extends ParamListBase = ParamListBase>(): {
+    Navigator: (props: Omit<SidebarNavigatorOptions, "initialRouteName"> & {
+        initialRouteName?: RouteName<P>;
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+    Screen: <N extends RouteName<P>>(_props: ScreenConfig<P, N, SidebarScreenOptions, SidebarNavigation<P>>) => null;
+    Section: (_props: SidebarSectionOptions & {
+        children: React.ReactNode;
+    }) => null;
+};

package/dist/sidebar/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSidebarNavigator = createSidebarNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const builder_1 = require("../core/builder");
+const SelectionNavigator_1 = require("../core/SelectionNavigator");
+function createSidebarNavigator() {
+    function Screen(_props) {
+        return null;
+    }
+    function Section(_props) {
+        return null;
+    }
+    function Navigator(props) {
+        return ((0, jsx_runtime_1.jsx)(SelectionNavigator_1.SelectionNavigator, { ...props, type: "sidebar", definitions: (0, builder_1.readScreens)(props.children, Screen, Section) }));
+    }
+    return { Navigator, Screen, Section };
+}

package/dist/split/index.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface SplitColumnProps {
+    id: string;
+    component: React.ComponentType;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+    /** Follow a directly nested Sidebar when it collapses (default: true). */
+    collapsible?: boolean;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Hide the entire resize handle, including its space and keyboard target. */
+    dividerShown?: boolean;
+    dividerStyle?: SplitDividerStyle;
+    renderDivider?: (props: SplitDividerRenderProps) => React.ReactNode;
+}
+export interface SplitDividerRenderProps {
+    columnId: string;
+    width: number;
+    dragging: boolean;
+}
+export type SplitDividerStyle = StyleProp<ViewStyle> | ((props: SplitDividerRenderProps) => StyleProp<ViewStyle>);
+export interface SplitNavigatorProps {
+    children: React.ReactNode;
+    id?: string;
+    style?: StyleProp<ViewStyle>;
+    columnStyle?: StyleProp<ViewStyle>;
+    /** Hide the entire resize handle, including its space and keyboard target. */
+    dividerShown?: boolean;
+    dividerStyle?: SplitDividerStyle;
+    renderDivider?: (props: SplitDividerRenderProps) => React.ReactNode;
+    layout?: (size: {
+        width: number;
+        height: number;
+    }) => string[];
+    onColumnResize?: (id: string, width: number) => void;
+}
+export declare function createSplitNavigator(): {
+    Navigator: (props: SplitNavigatorProps) => React.JSX.Element;
+    Column: (_props: SplitColumnProps) => null;
+};