@idealyst/navigation 1.2.115 → 1.2.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.2.115",
+  "version": "1.2.116",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -45,9 +45,9 @@
   },
   "peerDependencies": {
     "@idealyst/camera": "^1.2.30",
-    "@idealyst/components": "^1.2.115",
+    "@idealyst/components": "^1.2.116",
     "@idealyst/microphone": "^1.2.30",
-    "@idealyst/theme": "^1.2.115",
+    "@idealyst/theme": "^1.2.116",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/drawer": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
@@ -74,13 +74,13 @@
     "@idealyst/animate": "^1.2.38",
     "@idealyst/blur": "^1.2.40",
     "@idealyst/camera": "^1.2.30",
-    "@idealyst/components": "^1.2.115",
+    "@idealyst/components": "^1.2.116",
     "@idealyst/datagrid": "^1.2.30",
     "@idealyst/datepicker": "^1.2.30",
     "@idealyst/lottie": "^1.2.38",
-    "@idealyst/markdown": "^1.2.115",
+    "@idealyst/markdown": "^1.2.116",
     "@idealyst/microphone": "^1.2.30",
-    "@idealyst/theme": "^1.2.115",
+    "@idealyst/theme": "^1.2.116",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "react": "^19.1.0",

package/src/context/NavigatorContext.native.tsx

@@ -207,6 +207,7 @@ const parseParameterizedPath = (path: string, rootRoute: any): { routeName: stri
 const UnwrappedNavigatorProvider = ({ route, floatingComponent }: NavigatorProviderProps) => {
 
     const navigation = useNavigation();
+    const navState = navigation.getState?.();
 
     const navigate = (params: NavigateParams, _redirectCount = 0) => {
         // Validate params - catch common mistake of passing string directly
@@ -326,6 +327,7 @@ const UnwrappedNavigatorProvider = ({ route, floatingComponent }: NavigatorProvi
     return (
         <NavigatorContext.Provider value={{
             route,
+            currentPath: navState?.routes?.[navState.index]?.name ?? '/',
             navigate,
             replace,
             canGoBack,
@@ -461,7 +463,7 @@ const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation:
     };
 
     return (
-        <DrawerNavigatorContext.Provider value={{ navigate, replace, route, canGoBack, goBack }}>
+        <DrawerNavigatorContext.Provider value={{ navigate, replace, route, currentPath: '/', canGoBack, goBack }}>
             {children}
         </DrawerNavigatorContext.Provider>
     );

package/src/context/NavigatorContext.web.tsx

@@ -3,13 +3,19 @@ import { useNavigate, useParams, useLocation } from '../router';
 import { NavigateParams, NavigatorProviderProps, NavigatorContextValue } from './types';
 import { buildNavigator, NavigatorParam } from '../routing';
 
-const NavigatorContext = createContext<NavigatorContextValue>({
-    navigate: () => {},
-    replace: () => {},
-    route: undefined,
-    canGoBack: () => false,
-    goBack: () => {},
-});
+// Use Symbol.for() to ensure a single context instance even if this module
+// is loaded multiple times by the bundler (e.g. Vite with symlinked packages).
+const CONTEXT_KEY = Symbol.for('idealyst.navigator.context');
+const _global = globalThis as any;
+const NavigatorContext: React.Context<NavigatorContextValue> = _global[CONTEXT_KEY] ||
+    (_global[CONTEXT_KEY] = createContext<NavigatorContextValue>({
+        navigate: () => {},
+        replace: () => {},
+        route: undefined,
+        currentPath: '/',
+        canGoBack: () => false,
+        goBack: () => {},
+    }));
 
 /**
  * Normalize a path and substitute variables
@@ -313,6 +319,7 @@ export const NavigatorProvider = ({
     return (
         <NavigatorContext.Provider value={{
             route,
+            currentPath: location.pathname,
             navigate: navigateFunction,
             replace,
             canGoBack,

package/src/context/types.ts

@@ -41,6 +41,11 @@ export type NavigatorProviderProps = {
  */
 export type NavigatorContextValue = {
     route: NavigatorParam | undefined;
+    /**
+     * The current URL path (web) or active route path (native).
+     * Useful for highlighting active navigation items in sidebars/drawers.
+     */
+    currentPath: string;
     navigate: (params: NavigateParams) => void;
     /**
      * Replace the current screen with a new one. The current screen unmounts

package/src/examples/CustomTabLayout.tsx

@@ -56,7 +56,9 @@ function TabButton({route, onNavigate, currentPath}: TabButtonProps) {
         onPress={() => onNavigate(route.path)}
         style={{ margin: 4 }}
     >
-        {route.options?.tabBarIcon?.({ size: 20, color: currentPath === route.path ? 'blue' : 'black' })}
+        {typeof route.options?.tabBarIcon === 'string'
+          ? null /* string icons handled by default layout */
+          : route.options?.tabBarIcon?.({ focused: currentPath === route.path, size: 'sm', color: currentPath === route.path ? 'blue' : 'black' })}
         <Text style={{ color: currentPath === route.fullPath ? 'blue' : 'black' }}>
             {route.fullPath === '/' ? 'Home' : route.fullPath}
         </Text>

package/src/layouts/DefaultDrawerLayout.tsx

@@ -0,0 +1,134 @@
+import React from 'react'
+import { View, Text, Pressable, Icon } from '@idealyst/components'
+import { TabLayoutProps, DrawerSidebarProps } from '../routing/types'
+import { Outlet } from '../router'
+import { useNavigator } from '../context'
+
+export interface DrawerLayoutProps extends TabLayoutProps {
+    /**
+     * Optional custom sidebar component.
+     * When provided, replaces the default sidebar navigation.
+     */
+    sidebarComponent?: React.ComponentType<DrawerSidebarProps>
+}
+
+/**
+ * Default Drawer Layout Component for Web
+ * Provides a sidebar + content navigation interface using @idealyst/components.
+ * The sidebar displays navigation items from routes with active state highlighting.
+ * If a custom sidebarComponent is provided, it renders that instead of the default sidebar.
+ */
+export const DefaultDrawerLayout: React.FC<DrawerLayoutProps> = ({
+    options,
+    routes,
+    currentPath,
+    sidebarComponent: SidebarComponent
+}) => {
+    const navigator = useNavigator()
+
+    return (
+        <View style={{ height: '100vh', flexDirection: 'column' }}>
+            {/* Header */}
+            {(options?.headerTitle || options?.headerLeft || options?.headerRight) && (
+                <View style={{
+                    padding: 16,
+                    borderBottomWidth: 1,
+                    borderBottomColor: '#e0e0e0',
+                    backgroundColor: '#f8f9fa'
+                }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                            {options?.headerLeft && React.createElement(options.headerLeft as any)}
+
+                            {options?.headerTitle && (
+                                typeof options.headerTitle === 'string' ? (
+                                    <Text typography="h4" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
+                                        {options.headerTitle}
+                                    </Text>
+                                ) : (
+                                    React.createElement(options.headerTitle as any)
+                                )
+                            )}
+                        </View>
+
+                        {options?.headerRight && React.createElement(options.headerRight as any)}
+                    </View>
+                </View>
+            )}
+
+            {/* Sidebar + Content */}
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+                {/* Sidebar */}
+                {SidebarComponent ? (
+                    <View style={{
+                        width: 240,
+                        borderRightWidth: 1,
+                        borderRightColor: '#e0e0e0',
+                        backgroundColor: '#f8f9fa'
+                    }}>
+                        <SidebarComponent currentPath={currentPath} />
+                    </View>
+                ) : (
+                    <View style={{
+                        width: 240,
+                        borderRightWidth: 1,
+                        borderRightColor: '#e0e0e0',
+                        backgroundColor: '#f8f9fa',
+                        paddingTop: 8
+                    }}>
+                        {routes.map((route) => {
+                            if (route.type !== 'screen') return null
+
+                            const isActive = currentPath === route.fullPath
+                                || (route.fullPath !== '/' && currentPath.startsWith(route.fullPath + '/'))
+                            const screenRoute = route as any
+                            const label = screenRoute.options?.tabBarLabel
+                                || screenRoute.options?.title
+                                || (route.fullPath === '/' ? 'Home' : route.fullPath)
+                            const icon = screenRoute.options?.tabBarIcon
+
+                            return (
+                                <Pressable
+                                    key={route.path}
+                                    onPress={() => {
+                                        navigator.navigate({ path: route.fullPath })
+                                    }}
+                                    style={{
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        paddingVertical: 10,
+                                        paddingHorizontal: 16,
+                                        gap: 10,
+                                        backgroundColor: isActive ? '#e8f0fe' : 'transparent',
+                                        borderRightWidth: isActive ? 3 : 0,
+                                        borderRightColor: isActive ? '#1a73e8' : 'transparent'
+                                    }}
+                                >
+                                    {icon && typeof icon === 'string' && (
+                                        <Icon
+                                            name={icon as any}
+                                            size="sm"
+                                            color={isActive ? 'blue' : 'gray'}
+                                        />
+                                    )}
+                                    <Text
+                                        typography="body2"
+                                        weight={isActive ? 'semibold' : 'normal'}
+                                        color={isActive ? 'primary' : undefined}
+                                    >
+                                        {label}
+                                    </Text>
+                                </Pressable>
+                            )
+                        })}
+                    </View>
+                )}
+
+                {/* Content Area */}
+                <View style={{ flex: 1, padding: 20 }}>
+                    <Outlet />
+                </View>
+            </View>
+        </View>
+    )
+}

package/src/layouts/index.ts

@@ -1,3 +1,5 @@
 export { DefaultTabLayout } from './DefaultTabLayout'
 export { DefaultStackLayout } from './DefaultStackLayout'
-export type { TabLayoutProps, StackLayoutProps, TabLayoutComponent, StackLayoutComponent } from '../routing/types' 
+export { DefaultDrawerLayout } from './DefaultDrawerLayout'
+export type { DrawerLayoutProps } from './DefaultDrawerLayout'
+export type { TabLayoutProps, StackLayoutProps, TabLayoutComponent, StackLayoutComponent } from '../routing/types'

package/src/routing/DrawerContentWrapper.native.tsx

@@ -17,9 +17,14 @@ export const DrawerContentWrapper: React.FC<{
     // Get safe area insets from React Native Safe Area Context
     const insets = useSafeAreaInsets();
 
+    // Compute current path from navigation state
+    const state = drawerProps.state;
+    const currentRoute = state.routes[state.index];
+    const currentPath = currentRoute?.path ?? `/${currentRoute?.name ?? ''}`;
+
     return (
         <DrawerNavigatorProvider navigation={drawerProps.navigation} route={route}>
-            <Content insets={insets} />
+            <Content currentPath={currentPath} insets={insets} />
         </DrawerNavigatorProvider>
     );
 };

package/src/routing/router.web.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useState, useRef } from 'react'
 import { Routes, Route, useLocation, useParams } from '../router'
 import { DefaultStackLayout } from '../layouts/DefaultStackLayout'
 import { DefaultTabLayout } from '../layouts/DefaultTabLayout'
-import { NavigatorParam, RouteParam, ScreenParam, NotFoundComponentProps, StackLayoutProps, TabLayoutProps, RouteWithFullPath } from './types'
+import { DefaultDrawerLayout } from '../layouts/DefaultDrawerLayout'
+import { NavigatorParam, RouteParam, ScreenParam, NotFoundComponentProps, StackLayoutProps, TabLayoutProps, DrawerSidebarProps, RouteWithFullPath } from './types'
+import { DrawerLayoutProps } from '../layouts/DefaultDrawerLayout'
 import { NavigateParams } from '../context/types'
 
 /**
@@ -90,19 +92,22 @@ const NotFoundWrapper = ({
 }
 
 /**
- * Wrapper component that provides currentPath to layout components
+ * Wrapper component that provides currentPath to layout components.
+ * For drawer layouts, also passes through the optional sidebarComponent.
  */
 const LayoutWrapper: React.FC<{
-    LayoutComponent: React.ComponentType<StackLayoutProps | TabLayoutProps>
+    LayoutComponent: React.ComponentType<StackLayoutProps | TabLayoutProps | DrawerLayoutProps>
     options?: any
     routes: RouteWithFullPath[]
-}> = ({ LayoutComponent, options, routes }) => {
+    sidebarComponent?: React.ComponentType<DrawerSidebarProps>
+}> = ({ LayoutComponent, options, routes, sidebarComponent }) => {
     const location = useLocation()
     return (
         <LayoutComponent
             options={options}
             routes={routes}
             currentPath={location.pathname}
+            {...(sidebarComponent ? { sidebarComponent } : {})}
         />
     )
 }
@@ -173,9 +178,11 @@ const buildRoute = (params: RouteParam, index: number, isNested = false, parentP
             />
         );
     } else if (params.type === 'navigator') {
-        // Get the layout component directly
+        // Get the layout component based on navigator layout type
         const LayoutComponent = params.layoutComponent ||
-            (params.layout === 'tab' ? DefaultTabLayout : DefaultStackLayout);
+            (params.layout === 'tab' ? DefaultTabLayout :
+             params.layout === 'drawer' ? DefaultDrawerLayout :
+             DefaultStackLayout);
 
         // Compute the full path for this navigator
         const navigatorFullPath = joinPaths(parentPath, params.path);
@@ -235,6 +242,9 @@ const buildRoute = (params: RouteParam, index: number, isNested = false, parentP
             );
         }
 
+        // Extract sidebarComponent for drawer navigators
+        const sidebarComponent = params.layout === 'drawer' ? params.sidebarComponent : undefined;
+
         // Build the main navigator route with layout
         // Use LayoutWrapper to provide reactive currentPath
         const navigatorRoute = (
@@ -246,6 +256,7 @@ const buildRoute = (params: RouteParam, index: number, isNested = false, parentP
                         LayoutComponent={LayoutComponent}
                         options={params.options}
                         routes={routesWithFullPaths}
+                        sidebarComponent={sidebarComponent}
                     />
                 }
             >

package/src/routing/types.ts

@@ -11,10 +11,17 @@ export const NOT_FOUND_SCREEN_NAME = '__notFound__';
  */
 export type TabBarScreenOptions = {
     /**
-     * Icon component for tab/drawer navigation (React.ComponentType, React.ReactElement, function, or string)
+     * Icon for tab/drawer navigation.
+     *
+     * Can be:
+     * - A **string** (icon name) — e.g. `"home"`, `"cog"`. The default layout renders
+     *   `<Icon name={tabBarIcon} size="sm" />` automatically.
+     * - A **render function** — receives `{ focused, color, size }`. The `size` param is
+     *   a number (from native tab bars); **ignore it** and use a Size token instead:
+     *   `tabBarIcon: ({ focused }) => <Icon name={focused ? 'home' : 'home-outline'} size="sm" />`
      */
-    tabBarIcon?: ((props: { focused: boolean; color: string; size: string | number }) => React.ReactElement)
-    
+    tabBarIcon?: string | ((props: { focused: boolean; color: string; size: string | number }) => React.ReactElement)
+
     /**
      * Label for tab/drawer navigation
      */
@@ -130,10 +137,12 @@ export type StackNavigatorParam = {
 } & BaseNavigatorParam
 
 /**
- * Props passed to drawer sidebar components on mobile
- * Includes safe area insets for proper layout
+ * Props passed to drawer sidebar components
+ * Includes the current path and safe area insets for proper layout
  */
 export type DrawerSidebarProps = {
+    /** Current URL path, useful for highlighting active nav items */
+    currentPath: string;
     /**
      * Safe area insets (mobile only)
      * Use these to add padding to avoid notches, status bars, etc.