@sigmela/router 0.2.2 → 0.2.4

package/lib/module/styles.css

@@ -48,7 +48,7 @@
 /* Show overlay only for modal-like presentations.
    IMPORTANT: use direct child (>) to avoid collapsing overlay from nested stacks,
    when modal ScreenStackItem is inside push ScreenStackItem container. */
-.screen-stack-item:not(.modal):not(.contained-modal):not(.fullscreen-modal):not(.formsheet):not(.pagesheet):not(.sheet)
+.screen-stack-item:not(.modal):not(.modal-right):not(.contained-modal):not(.fullscreen-modal):not(.formsheet):not(.pagesheet):not(.sheet)
   > .stack-modal-overlay {
   display: none;
 }
@@ -75,6 +75,7 @@
 
 /* Overlay in initial state — transparent */
 .screen-stack-item.modal.transition-preEnter > .stack-modal-overlay,
+.screen-stack-item.modal-right.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.contained-modal.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.fullscreen-modal.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.formsheet.transition-preEnter > .stack-modal-overlay,
@@ -88,6 +89,8 @@
 /* Overlay on enter — start animation */
 .screen-stack-item.modal.transition-entering > .stack-modal-overlay,
 .screen-stack-item.modal.phase-active.transition-preEnter > .stack-modal-overlay,
+.screen-stack-item.modal-right.transition-entering > .stack-modal-overlay,
+.screen-stack-item.modal-right.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.contained-modal.transition-entering > .stack-modal-overlay,
 .screen-stack-item.contained-modal.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.fullscreen-modal.transition-entering > .stack-modal-overlay,
@@ -106,6 +109,8 @@
 /* For modal-like in active / entered states — fully visible */
 .screen-stack-item.modal.phase-active > .stack-modal-overlay,
 .screen-stack-item.modal.transition-entered > .stack-modal-overlay,
+.screen-stack-item.modal-right.phase-active > .stack-modal-overlay,
+.screen-stack-item.modal-right.transition-entered > .stack-modal-overlay,
 .screen-stack-item.contained-modal.phase-active > .stack-modal-overlay,
 .screen-stack-item.contained-modal.transition-entered > .stack-modal-overlay,
 .screen-stack-item.fullscreen-modal.phase-active > .stack-modal-overlay,
@@ -124,6 +129,8 @@
 /* Overlay on modal-like close — disappearance animation */
 .screen-stack-item.modal.phase-exiting > .stack-modal-overlay,
 .screen-stack-item.modal.transition-exiting > .stack-modal-overlay,
+.screen-stack-item.modal-right.phase-exiting > .stack-modal-overlay,
+.screen-stack-item.modal-right.transition-exiting > .stack-modal-overlay,
 .screen-stack-item.contained-modal.phase-exiting > .stack-modal-overlay,
 .screen-stack-item.contained-modal.transition-exiting > .stack-modal-overlay,
 .screen-stack-item.fullscreen-modal.phase-exiting > .stack-modal-overlay,
@@ -153,6 +160,7 @@
 
 /* Modal-like content container always above overlay */
 .screen-stack-item.modal .stack-modal-container,
+.screen-stack-item.modal-right .stack-modal-container,
 .screen-stack-item.contained-modal .stack-modal-container,
 .screen-stack-item.fullscreen-modal .stack-modal-container,
 .screen-stack-item.formsheet .stack-modal-container,
@@ -202,6 +210,7 @@
 
 /* IMPORTANT: modal elements should not move like regular screens */
 .screen-stack > .screen-stack-item.modal,
+.screen-stack > .screen-stack-item.modal-right,
 .screen-stack > .screen-stack-item.sheet {
   transform: translate3d(0, 0, 0) !important;
 }
@@ -229,7 +238,12 @@
 
 /* PUSH BACKGROUND - background screen shifts left */
 /* Important: use !important to override general rules for inactive */
-.screen-stack-item.push.push-background {
+.screen-stack-item.push.push-background,
+.screen-stack-item.modal.push-background,
+.screen-stack-item.modal-right.push-background,
+.screen-stack-item.sheet.push-background,
+.screen-stack-item.formsheet.push-background,
+.screen-stack-item.pagesheet.push-background {
   transform: translateX(-25%) !important;
   transition:
     transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
@@ -238,7 +252,12 @@
 
 /* POP BACKGROUND - background screen on pop stays at -25% */
 /* Background elements on pop get pop-background instead of none, to preserve -25% position */
-.screen-stack-item.push.pop-background {
+.screen-stack-item.push.pop-background,
+.screen-stack-item.modal.pop-background,
+.screen-stack-item.modal-right.pop-background,
+.screen-stack-item.sheet.pop-background,
+.screen-stack-item.formsheet.pop-background,
+.screen-stack-item.pagesheet.pop-background {
   transform: translateX(-25%) !important;
   /* Don't set transition, so element stays in place without animation */
   filter: none;
@@ -294,7 +313,8 @@
 /* ==================== MOBILE MODAL (<= 639px) — bottom sheet ==================== */
 @media (max-width: 639px) {
   /* Inner container for modal — bottom sheet full width with top border radius */
-  .screen-stack-item.modal .stack-modal-container {
+  .screen-stack-item.modal .stack-modal-container,
+  .screen-stack-item.modal-right .stack-modal-container {
     width: 100%;
     margin: 0;
     border-radius: 0;
@@ -311,19 +331,23 @@
   }
 
   /* MODAL ENTER - modal enters (bottom to top) */
-  .screen-stack-item.modal.modal-enter.transition-preEnter .stack-modal-container {
+  .screen-stack-item.modal.modal-enter.transition-preEnter .stack-modal-container,
+  .screen-stack-item.modal-right.modal-right-enter.transition-preEnter .stack-modal-container {
     transform: translateY(100%);
     filter: none;
   }
 
   .screen-stack-item.modal.modal-enter.transition-entering .stack-modal-container,
-  .screen-stack-item.modal.modal-enter.transition-entered .stack-modal-container {
+  .screen-stack-item.modal.modal-enter.transition-entered .stack-modal-container,
+  .screen-stack-item.modal-right.modal-right-enter.transition-entering .stack-modal-container,
+  .screen-stack-item.modal-right.modal-right-enter.transition-entered .stack-modal-container {
     transform: translateY(0);
     filter: none;
   }
 
   /* MODAL EXIT - modal closes (exits downward) */
-  .screen-stack-item.modal.modal-exit.transition-exiting .stack-modal-container {
+  .screen-stack-item.modal.modal-exit.transition-exiting .stack-modal-container,
+  .screen-stack-item.modal-right.modal-right-exit.transition-exiting .stack-modal-container {
     transform: translateY(100%);
     filter: none;
     transition:
@@ -370,10 +394,57 @@
   }
 }
 
-/* ==================== DESKTOP MODAL (>= 640px) — sheet on right ==================== */
+/* ==================== DESKTOP MODAL (>= 640px) — centered card ==================== */
 @media (min-width: 640px) {
-  /* Inner container for modal — right sheet 393px, with margin and border radius */
+  /* Inner container for modal — centered card 600px width, 75% height */
   .screen-stack-item.modal .stack-modal-container {
+    width: 600px;
+    max-width: calc(100% - 48px);
+    height: 75vh;
+    max-height: calc(100% - 48px);
+    margin: auto; /* center in parent */
+    border-radius: 38px;
+    overflow: hidden;
+    background: #fff;
+
+    transform: translateY(0);
+    transition:
+      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
+      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  }
+
+  /* Center the modal container using flexbox on parent */
+  .screen-stack-item.modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* MODAL ENTER - modal enters (bottom to center) */
+  .screen-stack-item.modal.modal-enter.transition-preEnter .stack-modal-container {
+    transform: translateY(100vh);
+    filter: none;
+  }
+
+  .screen-stack-item.modal.modal-enter.transition-entering .stack-modal-container,
+  .screen-stack-item.modal.modal-enter.transition-entered .stack-modal-container {
+    transform: translateY(0);
+    filter: none;
+  }
+
+  /* MODAL EXIT - modal closes (exits downward) */
+  .screen-stack-item.modal.modal-exit.transition-exiting .stack-modal-container {
+    transform: translateY(100vh);
+    filter: none;
+    transition:
+      transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
+      filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  }
+
+  /* ==================== MODAL-RIGHT — slide from right (previous modal behavior) ==================== */
+
+  /* Inner container for modal-right — right sheet 393px */
+  .screen-stack-item.modal-right .stack-modal-container {
     width: 393px;
     max-width: calc(100% - 36px);
     height: calc(100% - 36px);
@@ -381,7 +452,7 @@
     margin-left: auto; /* align to right edge */
     border-radius: 16px;
     overflow: hidden;
-    background: #fff; /* or var(--modal-bg) */
+    background: #fff;
 
     transform: translateX(0);
     transition:
@@ -389,20 +460,20 @@
       filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
   }
 
-  /* MODAL ENTER - modal enters (right to left) */
-  .screen-stack-item.modal.modal-enter.transition-preEnter .stack-modal-container {
+  /* MODAL-RIGHT ENTER - modal enters (right to left) */
+  .screen-stack-item.modal-right.modal-right-enter.transition-preEnter .stack-modal-container {
     transform: translateX(100%);
     filter: none;
   }
 
-  .screen-stack-item.modal.modal-enter.transition-entering .stack-modal-container,
-  .screen-stack-item.modal.modal-enter.transition-entered .stack-modal-container {
+  .screen-stack-item.modal-right.modal-right-enter.transition-entering .stack-modal-container,
+  .screen-stack-item.modal-right.modal-right-enter.transition-entered .stack-modal-container {
     transform: translateX(0);
     filter: none;
   }
 
-  /* MODAL EXIT - modal closes (exits to right) */
-  .screen-stack-item.modal.modal-exit.transition-exiting .stack-modal-container {
+  /* MODAL-RIGHT EXIT - modal closes (exits to right) */
+  .screen-stack-item.modal-right.modal-right-exit.transition-exiting .stack-modal-container {
     transform: translateX(100%);
     filter: none;
     transition:
@@ -439,6 +510,10 @@
   .screen-stack:has(> .screen-stack-item.modal.phase-active)
     > .screen-stack-item.push.phase-inactive,
   .screen-stack:has(> .screen-stack-item.modal.phase-active)
+    > .screen-stack-item.push.phase-inactive.transition-entered,
+  .screen-stack:has(> .screen-stack-item.modal-right.phase-active)
+    > .screen-stack-item.push.phase-inactive,
+  .screen-stack:has(> .screen-stack-item.modal-right.phase-active)
     > .screen-stack-item.push.phase-inactive.transition-entered {
     transform: translate3d(0, 0, 0) !important;
     filter: none;
@@ -489,7 +564,8 @@
   position: relative;
 }
 
-.tab-stacks-container > .screen-stack {
+.tab-stacks-container > .screen-stack,
+.tab-stacks-container > .split-view-container {
   padding-bottom: calc(73px + env(safe-area-inset-bottom)); 
 }
 
@@ -725,7 +801,8 @@
     flex-direction: row;
   }
 
-  .tab-stacks-container > .screen-stack {
+  .tab-stacks-container > .screen-stack,
+  .tab-stacks-container > .split-view-container {
     padding-bottom: 0;
     margin-left: 260px;
     min-width: 0;

package/lib/module/types.js

@@ -1,3 +1,13 @@
 "use strict";
 
-export {};
+/**
+ * Presentations that behave like modals (overlay on top of content).
+ */
+export const MODAL_LIKE_PRESENTATIONS = new Set(['modal', 'modalRight', 'transparentModal', 'containedModal', 'containedTransparentModal', 'fullScreenModal', 'formSheet', 'pageSheet', 'sheet']);
+
+/**
+ * Check if a presentation type is modal-like (renders as overlay).
+ */
+export function isModalLikePresentation(presentation) {
+  return presentation !== undefined && MODAL_LIKE_PRESENTATIONS.has(presentation);
+}

package/lib/typescript/src/Navigation.d.ts

@@ -4,6 +4,14 @@ interface NavigationProps {
     router: Router;
     appearance?: NavigationAppearance;
 }
+/**
+ * Navigation component renders the root and global stacks.
+ *
+ * Modal stacks (NavigationStack added via addModal) are rendered as regular ScreenStackItems
+ * with their component being the StackRenderer that subscribes to its own stack history.
+ * This creates a clean recursive structure: stacks render their items, nested stacks
+ * (via childNode) render their own items through StackRenderer.
+ */
 export declare const Navigation: import("react").NamedExoticComponent<NavigationProps>;
 export {};
 //# sourceMappingURL=Navigation.d.ts.map

package/lib/typescript/src/NavigationStack.d.ts

@@ -1,4 +1,5 @@
 import type { ScreenOptions } from './types';
+import React from 'react';
 import { type MixedComponent } from './createController';
 import type { NavigationNode, NodeRoute, NodeChild } from './navigationNode';
 type BuiltRoute = NodeRoute;
@@ -17,8 +18,8 @@ export declare class NavigationStack implements NavigationNode {
     private log;
     getId(): string;
     addScreen(pathPattern: string, mixedComponent: MixedComponent | NavigationNode, options?: ScreenOptions): NavigationStack;
-    addModal(path: string, mixedComponent: MixedComponent, options?: ScreenOptions): NavigationStack;
-    addSheet(path: string, mixedComponent: MixedComponent, options?: ScreenOptions): NavigationStack;
+    addModal(path: string, mixedComponent: MixedComponent | NavigationNode, options?: ScreenOptions): NavigationStack;
+    addSheet(path: string, mixedComponent: MixedComponent | NavigationNode, options?: ScreenOptions): NavigationStack;
     addStack(prefixOrStack: string | NavigationStack, maybeStack?: NavigationStack): NavigationStack;
     getChildren(): ChildNode[];
     getRoutes(): BuiltRoute[];

package/lib/typescript/src/Router.d.ts

@@ -34,6 +34,7 @@ export declare class Router {
     private suppressHistorySyncCount;
     private navigationToken;
     constructor(config: RouterConfig);
+    isDebugEnabled(): boolean;
     private log;
     navigate: (path: string) => void;
     replace: (path: string, dedupe?: boolean) => void;
@@ -48,12 +49,22 @@ export declare class Router {
     registerSheetDismisser: (key: string, dismisser: () => void) => void;
     unregisterSheetDismisser: (key: string) => void;
     goBack: () => void;
+    /**
+     * Closes the nearest modal or sheet, regardless of navigation depth inside it.
+     * Useful when a NavigationStack is rendered inside a modal and you want to
+     * close the entire modal from any screen within it.
+     */
+    dismiss: () => void;
     getState: () => RouterState;
     subscribe(listener: Listener): () => void;
     getStackHistory: (stackId?: string) => HistoryItem[];
+    /**
+     * Returns all history items in navigation order.
+     * Useful for rendering all screens including modal stacks.
+     */
+    getFullHistory: () => HistoryItem[];
     subscribeStack: (stackId: string, cb: Listener) => (() => void);
     getRootStackId(): string | undefined;
-    getGlobalStackId(): string | undefined;
     subscribeRoot(listener: Listener): () => void;
     private emitRootChange;
     getRootTransition(): RootTransition | undefined;

package/lib/typescript/src/ScreenStack/ScreenStackContext.d.ts

@@ -1,7 +1,7 @@
 import type { ScreenStackItemPhase } from '../ScreenStackItem/ScreenStackItem.types';
 import type { TransitionStatus } from 'react-transition-state';
-export type PresentationTypeClass = 'push' | 'modal' | 'transparent-modal' | 'contained-modal' | 'contained-transparent-modal' | 'fullscreen-modal' | 'formsheet' | 'pagesheet' | 'sheet';
-export type AnimationType = 'push-enter' | 'push-exit' | 'push-background' | 'pop-enter' | 'pop-exit' | 'pop-background' | 'modal-enter' | 'modal-exit' | 'transparent-modal-enter' | 'transparent-modal-exit' | 'contained-modal-enter' | 'contained-modal-exit' | 'fullscreen-modal-enter' | 'fullscreen-modal-exit' | 'formsheet-enter' | 'formsheet-exit' | 'pagesheet-enter' | 'pagesheet-exit' | 'sheet-enter' | 'sheet-exit' | 'no-animate' | 'none';
+export type PresentationTypeClass = 'push' | 'modal' | 'modal-right' | 'transparent-modal' | 'contained-modal' | 'contained-transparent-modal' | 'fullscreen-modal' | 'formsheet' | 'pagesheet' | 'sheet';
+export type AnimationType = 'push-enter' | 'push-exit' | 'push-background' | 'pop-enter' | 'pop-exit' | 'pop-background' | 'modal-enter' | 'modal-exit' | 'modal-right-enter' | 'modal-right-exit' | 'transparent-modal-enter' | 'transparent-modal-exit' | 'contained-modal-enter' | 'contained-modal-exit' | 'fullscreen-modal-enter' | 'fullscreen-modal-exit' | 'formsheet-enter' | 'formsheet-exit' | 'pagesheet-enter' | 'pagesheet-exit' | 'sheet-enter' | 'sheet-exit' | 'no-animate' | 'none';
 export type ScreenStackItemState = {
     presentationType: PresentationTypeClass;
     animationType: AnimationType;

package/lib/typescript/src/SplitView/RenderSplitView.native.d.ts

@@ -4,5 +4,12 @@ export interface RenderSplitViewProps {
     splitView: SplitView;
     appearance?: NavigationAppearance;
 }
+/**
+ * On native (iPhone), SplitView renders primary and secondary screens
+ * in a SINGLE ScreenStack to get native push/pop animations.
+ *
+ * The combined history is: [...primaryHistory, ...secondaryHistory]
+ * This way, navigating from primary to secondary is a native push.
+ */
 export declare const RenderSplitView: import("react").NamedExoticComponent<RenderSplitViewProps>;
 //# sourceMappingURL=RenderSplitView.native.d.ts.map

package/lib/typescript/src/TabBar/TabBar.d.ts

@@ -17,6 +17,11 @@ export type InternalTabItem = Omit<TabItem, 'icon' | 'selectedIcon'> & {
     icon?: ExtendedIcon;
     selectedIcon?: ExtendedIcon;
     badgeValue?: string;
+    /**
+     * Optional base prefix for this tab's navigation subtree, e.g. '/mail'.
+     * Used by Router registry building via TabBar.getNodeChildren().
+     */
+    tabPrefix?: string;
 };
 export type TabBarProps = {
     onTabPress: (index: number) => void;
@@ -27,8 +32,25 @@ export type TabBarDescriptor = {
     renderer?: ComponentType<TabBarProps>;
 };
 type TabBarConfig = Omit<InternalTabItem, 'tabKey' | 'key'> & {
+    /**
+     * Legacy content type: a stack rendered in the tab.
+     */
     stack?: NavigationStack;
+    /**
+     * New content type: any NavigationNode (e.g. SplitView).
+     */
+    node?: NavigationNode;
+    /**
+     * Screen component rendered in the tab (no routing).
+     */
     screen?: React.ComponentType<any>;
+    /**
+     * Optional base prefix for node/stack routes, e.g. '/mail'.
+     */
+    prefix?: string;
+    /**
+     * Custom tab bar component (UI). Kept for compatibility.
+     */
     component?: ComponentType<TabBarProps>;
 };
 type TabBarOptions = {
@@ -40,6 +62,7 @@ export declare class TabBar implements NavigationNode {
     private readonly tabBarId;
     screens: Record<string, React.ComponentType<any>>;
     stacks: Record<string, NavigationStack>;
+    nodes: Record<string, NavigationNode>;
     private listeners;
     private state;
     constructor(options?: TabBarOptions);

package/lib/typescript/src/types.d.ts

@@ -1,6 +1,14 @@
 import type { ColorValue, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { BottomTabsScreenProps, ScreenProps as RNSScreenProps, ScreenStackHeaderConfigProps, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior } from 'react-native-screens';
-export type StackPresentationTypes = 'push' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet' | 'pageSheet' | 'sheet';
+export type StackPresentationTypes = 'push' | 'modal' | 'modalRight' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet' | 'pageSheet' | 'sheet';
+/**
+ * Presentations that behave like modals (overlay on top of content).
+ */
+export declare const MODAL_LIKE_PRESENTATIONS: ReadonlySet<StackPresentationTypes>;
+/**
+ * Check if a presentation type is modal-like (renders as overlay).
+ */
+export declare function isModalLikePresentation(presentation: StackPresentationTypes | undefined): boolean;
 export type TabItem = Omit<BottomTabsScreenProps, 'isFocused' | 'children'>;
 export type NavigationState<Route extends TabItem> = {
     index: number;
@@ -29,6 +37,11 @@ export type ScreenOptions = Partial<Omit<RNSScreenProps, 'stackPresentation'>> &
      * Useful for secondary stacks in split-view / overlays.
      */
     allowRootPop?: boolean;
+    /**
+     * Maximum width for modal presentation on web (in pixels).
+     * Only applies to modal-like presentations on web platform.
+     */
+    maxWidth?: number;
 };
 export type HistoryItem = {
     key: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",