@idealyst/navigation 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -43,8 +43,10 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.1.6",
-    "@idealyst/theme": "^1.1.6",
+    "@idealyst/camera": "^1.1.6",
+    "@idealyst/components": "^1.1.8",
+    "@idealyst/microphone": "^1.1.7",
+    "@idealyst/theme": "^1.1.8",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/drawer": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
@@ -59,11 +61,21 @@
     "react-router": ">=6.0.0",
     "react-router-dom": ">=6.0.0"
   },
+  "peerDependenciesMeta": {
+    "@idealyst/camera": {
+      "optional": true
+    },
+    "@idealyst/microphone": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@idealyst/components": "^1.1.6",
+    "@idealyst/camera": "^1.1.6",
+    "@idealyst/components": "^1.1.8",
     "@idealyst/datagrid": "^1.0.93",
     "@idealyst/datepicker": "^1.0.93",
-    "@idealyst/theme": "^1.1.6",
+    "@idealyst/microphone": "^1.1.7",
+    "@idealyst/theme": "^1.1.8",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "react": "^19.1.0",

package/src/context/NavigatorContext.native.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, memo, useContext, useMemo } from 'react';
 import { NavigateParams, NavigatorProviderProps, NavigatorContextValue } from './types';
-import { useNavigation, DarkTheme, DefaultTheme, NavigationContainer, CommonActions } from '@react-navigation/native';
+import { useNavigation, DarkTheme, DefaultTheme, NavigationContainer, CommonActions, StackActions } from '@react-navigation/native';
 import { buildNavigator, NavigatorParam, NOT_FOUND_SCREEN_NAME } from '../routing';
 import { useUnistyles } from 'react-native-unistyles';
 
@@ -89,6 +89,29 @@ function hasNotFoundComponent(route: NavigatorParam): boolean {
     return false;
 }
 
+/**
+ * Normalize a path and substitute variables
+ */
+function normalizePath(path: string, vars?: Record<string, string>): string {
+    let normalizedPath = path;
+
+    // Convert empty string to '/'
+    if (normalizedPath === '' || normalizedPath === '/') {
+        normalizedPath = '/';
+    } else if (!normalizedPath.startsWith('/')) {
+        normalizedPath = `/${normalizedPath}`;
+    }
+
+    // Substitute variables in the path if provided
+    if (vars) {
+        Object.entries(vars).forEach(([key, value]) => {
+            normalizedPath = normalizedPath.replace(`:${key}`, value);
+        });
+    }
+
+    return normalizedPath;
+}
+
 // Utility function to parse path with parameters and find matching route
 const parseParameterizedPath = (path: string, rootRoute: any): { routeName: string, params: Record<string, string> } | null => {
     // Handle absolute paths like /event/123
@@ -103,35 +126,40 @@ const parseParameterizedPath = (path: string, rootRoute: any): { routeName: stri
                 const cleanPath = route.path.startsWith('/') ? route.path.slice(1) : route.path;
                 const fullRoutePath = pathPrefix ? `${pathPrefix}/${cleanPath}` : route.path;
                 
-                if (routeSegments.length === segments.length - startIndex) {
-                    let isMatch = true;
-                    const extractedParams: Record<string, string> = {};
-                    
+                // Check if route segments match the path segments at current position
+                const remainingSegments = segments.length - startIndex;
+
+                // Check if this route's segments match as a prefix (for nested routes) or exactly
+                let prefixMatches = routeSegments.length <= remainingSegments;
+                const extractedParams: Record<string, string> = {};
+
+                if (prefixMatches) {
                     for (let i = 0; i < routeSegments.length; i++) {
                         const routeSegment = routeSegments[i];
                         const pathSegment = segments[startIndex + i];
-                        
+
                         if (routeSegment.startsWith(':')) {
                             // Parameter segment - extract value
                             const paramName = routeSegment.slice(1);
                             extractedParams[paramName] = pathSegment;
                         } else if (routeSegment !== pathSegment) {
                             // Literal segment must match exactly
-                            isMatch = false;
+                            prefixMatches = false;
                             break;
                         }
                     }
-                    
-                    if (isMatch) {
-                        return { route, params: extractedParams, fullPath: fullRoutePath };
-                    }
                 }
-                
-                // Check nested routes
-                if (route.routes) {
+
+                // Exact match - route segments consume all remaining path segments
+                if (prefixMatches && routeSegments.length === remainingSegments) {
+                    return { route, params: extractedParams, fullPath: fullRoutePath };
+                }
+
+                // Check nested routes ONLY if this route's path is a prefix of the target path
+                if (prefixMatches && route.routes) {
                     const nestedMatch = findMatchingRoute(
-                        route.routes, 
-                        segments, 
+                        route.routes,
+                        segments,
                         startIndex + routeSegments.length,
                         fullRoutePath
                     );
@@ -166,14 +194,17 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
             return;
         }
 
+        // Normalize path and substitute variables (e.g., /visit/:id with vars { id: "123" } becomes /visit/123)
+        const normalizedPath = normalizePath(params.path, params.vars);
+
         // Parse parameterized path for mobile
-        const parsed = parseParameterizedPath(params.path, route);
+        const parsed = parseParameterizedPath(normalizedPath, route);
 
         if (!parsed) {
             // Invalid route - try to find a handler
-            const handler = findInvalidRouteHandler(route, params.path);
+            const handler = findInvalidRouteHandler(route, normalizedPath);
             if (handler) {
-                const redirectParams = handler(params.path);
+                const redirectParams = handler(normalizedPath);
                 if (redirectParams) {
                     // Handler returned NavigateParams - redirect
                     return navigate(
@@ -187,14 +218,13 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
             // Navigate to 404 screen if configured
             if (route.notFoundComponent) {
                 navigation.navigate(NOT_FOUND_SCREEN_NAME as never, {
-                    path: params.path,
-                    params: params.vars
+                    path: normalizedPath,
                 } as never);
                 return;
             }
 
             // No handler and no 404 screen - log warning
-            console.warn(`Navigation: Invalid route "${params.path}" and no handler or notFoundComponent configured.`);
+            console.warn(`Navigation: Invalid route "${normalizedPath}" and no handler or notFoundComponent configured.`);
             return;
         }
 
@@ -205,12 +235,9 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
         };
 
         if (params.replace) {
-            // Use CommonActions.reset to replace the current route
+            // Use StackActions.replace to replace the current screen in the stack
             navigation.dispatch(
-                CommonActions.reset({
-                    index: 0,
-                    routes: [{ name: parsed.routeName, params: navigationParams }],
-                })
+                StackActions.replace(parsed.routeName, navigationParams)
             );
         } else {
             // Navigate to the pattern route with extracted parameters
@@ -218,6 +245,30 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
         }
     };
 
+    const replace = (params: Omit<NavigateParams, 'replace'>) => {
+        // Normalize path and substitute variables
+        const normalizedPath = normalizePath(params.path, params.vars);
+
+        // Parse parameterized path for mobile
+        const parsed = parseParameterizedPath(normalizedPath, route);
+
+        if (!parsed) {
+            console.warn(`Navigation: Cannot replace to invalid route "${normalizedPath}".`);
+            return;
+        }
+
+        // Merge route params with navigation state
+        const navigationParams = {
+            ...parsed.params,
+            ...(params.state || {}),
+        };
+
+        // Use StackActions.replace to replace the current screen
+        navigation.dispatch(
+            StackActions.replace(parsed.routeName, navigationParams)
+        );
+    };
+
     const RouteComponent = useMemo(() => {
         // Memoize the navigator to prevent unnecessary re-renders
         return memo(buildNavigator(route));
@@ -235,6 +286,7 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
         <NavigatorContext.Provider value={{
             route,
             navigate,
+            replace,
             canGoBack,
             goBack,
         }}>
@@ -245,7 +297,7 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
 
 const NavigatorProvider = ({ route }: NavigatorProviderProps) => {
     const {rt} = useUnistyles()
-    
+
     const isDarkMode = rt.themeName === 'dark';
 
     return (
@@ -264,14 +316,17 @@ const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation:
             return;
         }
 
+        // Normalize path and substitute variables (e.g., /visit/:id with vars { id: "123" } becomes /visit/123)
+        const normalizedPath = normalizePath(params.path, params.vars);
+
         // Parse parameterized path for mobile
-        const parsed = parseParameterizedPath(params.path, route);
+        const parsed = parseParameterizedPath(normalizedPath, route);
 
         if (!parsed) {
             // Invalid route - try to find a handler
-            const handler = findInvalidRouteHandler(route, params.path);
+            const handler = findInvalidRouteHandler(route, normalizedPath);
             if (handler) {
-                const redirectParams = handler(params.path);
+                const redirectParams = handler(normalizedPath);
                 if (redirectParams) {
                     // Handler returned NavigateParams - redirect
                     return navigate(
@@ -285,14 +340,13 @@ const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation:
             // Navigate to 404 screen if configured
             if (route.notFoundComponent) {
                 navigation.navigate(NOT_FOUND_SCREEN_NAME as never, {
-                    path: params.path,
-                    params: params.vars
+                    path: normalizedPath,
                 } as never);
                 return;
             }
 
             // No handler and no 404 screen - log warning
-            console.warn(`Navigation: Invalid route "${params.path}" and no handler or notFoundComponent configured.`);
+            console.warn(`Navigation: Invalid route "${normalizedPath}" and no handler or notFoundComponent configured.`);
             return;
         }
 
@@ -303,12 +357,9 @@ const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation:
         };
 
         if (params.replace) {
-            // Use CommonActions.reset to replace the current route
+            // Use StackActions.replace to replace the current screen in the stack
             navigation.dispatch(
-                CommonActions.reset({
-                    index: 0,
-                    routes: [{ name: parsed.routeName, params: navigationParams }],
-                })
+                StackActions.replace(parsed.routeName, navigationParams)
             );
         } else {
             // Navigate to the pattern route with extracted parameters
@@ -316,6 +367,30 @@ const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation:
         }
     };
 
+    const replace = (params: Omit<NavigateParams, 'replace'>) => {
+        // Normalize path and substitute variables
+        const normalizedPath = normalizePath(params.path, params.vars);
+
+        // Parse parameterized path for mobile
+        const parsed = parseParameterizedPath(normalizedPath, route);
+
+        if (!parsed) {
+            console.warn(`Navigation: Cannot replace to invalid route "${normalizedPath}".`);
+            return;
+        }
+
+        // Merge route params with navigation state
+        const navigationParams = {
+            ...parsed.params,
+            ...(params.state || {}),
+        };
+
+        // Use StackActions.replace to replace the current screen
+        navigation.dispatch(
+            StackActions.replace(parsed.routeName, navigationParams)
+        );
+    };
+
     const canGoBack = () => navigation.canGoBack();
 
     const goBack = () => {
@@ -325,7 +400,7 @@ const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation:
     };
 
     return (
-        <DrawerNavigatorContext.Provider value={{ navigate, route, canGoBack, goBack }}>
+        <DrawerNavigatorContext.Provider value={{ navigate, replace, route, canGoBack, goBack }}>
             {children}
         </DrawerNavigatorContext.Provider>
     );

package/src/context/NavigatorContext.web.tsx

@@ -5,6 +5,7 @@ import { buildNavigator, NavigatorParam } from '../routing';
 
 const NavigatorContext = createContext<NavigatorContextValue>({
     navigate: () => {},
+    replace: () => {},
     route: undefined,
     canGoBack: () => false,
     goBack: () => {},
@@ -278,10 +279,16 @@ export const NavigatorProvider = ({
         }
     };
 
+    const replace = (params: Omit<NavigateParams, 'replace'>) => {
+        // On web, replace just delegates to navigate (no special handling needed)
+        navigateFunction(params);
+    };
+
     return (
         <NavigatorContext.Provider value={{
             route,
             navigate: navigateFunction,
+            replace,
             canGoBack,
             goBack,
         }}>

package/src/context/types.ts

@@ -34,6 +34,13 @@ export type NavigatorProviderProps = {
 export type NavigatorContextValue = {
     route: NavigatorParam | undefined;
     navigate: (params: NavigateParams) => void;
+    /**
+     * Replace the current screen with a new one. The current screen unmounts
+     * and the new screen takes its place in the navigation stack.
+     * On native, this uses StackActions.replace() to swap the current screen.
+     * On web, this behaves the same as navigate (no special handling needed).
+     */
+    replace: (params: Omit<NavigateParams, 'replace'>) => void;
     /**
      * Returns true if there is a parent route in the route hierarchy to navigate back to.
      * On web, this checks for parent routes (not browser history).

package/src/examples/ExampleNavigationRouter.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, LinkExamples, PopoverExamples, ScreenExamples, SelectExamples, SliderExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples, SwitchExamples, RadioButtonExamples, ProgressExamples, TextAreaExamples, TabBarExamples, TooltipExamples, AccordionExamples, ListExamples, TableExamples, MenuExamples, ImageExamples, VideoExamples, AlertExamples, SkeletonExamples, ChipExamples, BreadcrumbExamples } from '@idealyst/components/examples';
 import { DataGridShowcase } from '@idealyst/datagrid/examples';
 import { DatePickerExamples } from '@idealyst/datepicker/examples';
+import { CameraExamples } from '@idealyst/camera/examples';
+import { MicrophoneExamples } from '@idealyst/microphone/examples';
 import { Text, View, Card, Screen, Icon, Button } from '@idealyst/components';
 import { NavigatorParam, RouteParam, NotFoundComponentProps } from '../routing';
 import { ExampleWebLayout } from './ExampleWebLayout';
@@ -329,6 +331,8 @@ const ExampleNavigationRouter: NavigatorParam = {
         { path: "breadcrumb", type: 'screen', component: BreadcrumbExamples, options: { title: "Breadcrumb" } },
         { path: "image", type: 'screen', component: ImageExamples, options: { title: "Image" } },
         { path: "video", type: 'screen', component: VideoExamples, options: { title: "Video" } },
+        { path: "camera", type: 'screen', component: CameraExamples, options: { title: "Camera" } },
+        { path: "microphone", type: 'screen', component: MicrophoneExamples, options: { title: "Microphone" } },
         { path: "datagrid", type: 'screen', component: DataGridShowcase, options: { title: "Data Grid" } },
         { path: "datepicker", type: 'screen', component: DatePickerExamples, options: { title: "Date Picker" } },
         { path: "theme-extension", type: 'screen', component: ThemeExtensionExamples, options: { title: "Theme Extension" } },

package/src/examples/ExampleSidebar.tsx

@@ -77,6 +77,8 @@ const componentGroups: ComponentGroup[] = [
             { label: 'Image', path: '/image', icon: 'image' },
             { label: 'SVG Image', path: '/svg-image', icon: 'image' },
             { label: 'Video', path: '/video', icon: 'video' },
+            { label: 'Camera', path: '/camera', icon: 'camera' },
+            { label: 'Microphone', path: '/microphone', icon: 'microphone' },
         ],
     },
     {
@@ -91,6 +93,7 @@ const componentGroups: ComponentGroup[] = [
         title: 'Theme',
         items: [
             { label: 'Theme Extension', path: '/theme-extension', icon: 'palette' },
+            { label: 'StyleBuilder Test', path: '/stylebuilder-test', icon: 'test-tube' },
         ],
     },
 ];

package/src/examples/ExampleWebLayout.tsx

@@ -13,10 +13,11 @@ export const ExampleWebLayout: React.FC = () => {
     const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
     const [showSearch, setShowSearch] = useState(false);
     const currentTheme = UnistylesRuntime.themeName || 'light';
-    const { theme } = useUnistyles();
 
+    const { theme } = useUnistyles();
+    
     const cycleTheme = () => {
-        const nextTheme = getNextTheme(currentTheme);
+        const nextTheme = UnistylesRuntime.themeName === 'light' ? 'dark' : 'light';
         UnistylesRuntime.setTheme(nextTheme as any);
     };
 

package/src/examples/HeaderRight.tsx

@@ -4,13 +4,14 @@ import { UnistylesRuntime } from 'react-native-unistyles';
 import ExampleSearchDialog from './ExampleSearchDialog';
 
 export default function HeaderRight() {
-    const [isDark, setIsDark] = useState(false);
+    // const [isDark, setIsDark] = useState(false);
     const [showDialog, setShowDialog] = useState(false);
+    const isDark = false
 
     const toggleTheme = () => {
-        const newTheme = isDark ? 'light' : 'dark';
+        const newTheme = UnistylesRuntime.themeName === 'light' ? 'dark' : 'light';
         UnistylesRuntime.setTheme(newTheme);
-        setIsDark(!isDark);
+        // setIsDark(!isDark);
     };
 
     return (

package/src/routing/router.native.tsx

@@ -7,73 +7,7 @@ import { createDrawerNavigator } from "@react-navigation/drawer";
 import { DrawerContentWrapper } from './DrawerContentWrapper.native';
 import { HeaderWrapper } from './HeaderWrapper.native';
 import React from 'react';
-import { useUnistyles } from 'react-native-unistyles';
-import { useIsFocused } from '@react-navigation/native';
 
-/**
- * Wrapper that makes screen components reactive to theme changes
- * Only updates when the screen is focused
- */
-const ThemeAwareScreenWrapper: React.FC<{
-    Component: React.ComponentType<any>;
-    [key: string]: any;
-}> = ({ Component, ...props }) => {
-    const isFocused = useIsFocused();
-
-    // Force update mechanism
-    const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
-
-    // Subscribe to theme changes
-    const { rt } = useUnistyles();
-
-    // Force re-render when theme changes (only when focused)
-    React.useEffect(() => {
-        if (isFocused) {
-            console.log('[ThemeAwareScreenWrapper] Theme changed, forcing update. New theme:', rt.themeName);
-            forceUpdate();
-        }
-    }, [rt.themeName, isFocused]);
-
-    // Log when component renders
-    React.useEffect(() => {
-        if (isFocused) {
-            console.log('[ThemeAwareScreenWrapper] Screen rendered with theme:', rt.themeName);
-        }
-    });
-
-    // Only render when focused to optimize performance
-    if (!isFocused) {
-        return null;
-    }
-
-    return <Component {...props} />;
-};
-
-/**
- * Cache for wrapped components to maintain stable references across renders
- */
-const wrappedComponentCache = new WeakMap<React.ComponentType<any>, React.ComponentType<any>>();
-
-/**
- * Creates a theme-aware component wrapper with a stable reference
- * This prevents React Navigation warnings about inline components
- */
-const createThemeAwareComponent = (OriginalComponent: React.ComponentType<any>) => {
-    // Check cache first to return the same wrapped component reference
-    if (wrappedComponentCache.has(OriginalComponent)) {
-        return wrappedComponentCache.get(OriginalComponent)!;
-    }
-
-    const Wrapped = React.memo((props: any) => (
-        <ThemeAwareScreenWrapper Component={OriginalComponent} {...props} />
-    ));
-    Wrapped.displayName = `ThemeAware(${OriginalComponent.displayName || OriginalComponent.name || 'Component'})`;
-
-    // Store in cache for future lookups
-    wrappedComponentCache.set(OriginalComponent, Wrapped);
-
-    return Wrapped;
-};
 
 /**
  * Internal screen name for 404 pages
@@ -208,29 +142,69 @@ const buildScreen = (params: RouteParam, Navigator: TypedNavigator, parentPath =
     // Determine the component - wrap screens with ThemeAwareScreenWrapper
     let component: React.ComponentType<any>;
     if (params.type === 'screen') {
-        component = createThemeAwareComponent(params.component);
+        component = params.component
     } else {
         component = buildNavigator(params, fullPath);
     }
 
-    // Build screen options, adding fullScreen presentation if specified
-    let screenOptions = params.options;
-    if (params.type === 'screen' && params.options?.fullScreen) {
-        screenOptions = {
-            ...params.options,
-            // Use fullScreenModal presentation to bypass parent navigator chrome
-            presentation: 'fullScreenModal',
-            // Hide header for true fullScreen experience
-            headerShown: params.options.headerShown ?? false,
-        } as ScreenOptions;
-    }
+    // Build screen options
+    // React Navigation expects headerLeft/headerRight to be functions returning elements
+    const buildScreenOptions = (navProps: any) => {
+        let options = params.options || {};
+
+        // Handle fullScreen presentation
+        if (params.type === 'screen' && options?.fullScreen) {
+            options = {
+                ...options,
+                presentation: 'fullScreenModal',
+                headerShown: options.headerShown ?? false,
+            };
+        }
+
+        // Wrap headerLeft if it's a component
+        if (options.headerLeft) {
+            const HeaderLeftContent = options.headerLeft as React.ComponentType<any>;
+            options = {
+                ...options,
+                headerLeft: () => (
+                    <HeaderWrapper
+                        content={HeaderLeftContent}
+                        route={params as NavigatorParam}
+                        navigation={navProps.navigation}
+                    />
+                ),
+            };
+        }
+
+        // Wrap headerRight if it's a component
+        if (options.headerRight) {
+            const HeaderRightContent = options.headerRight as React.ComponentType<any>;
+            options = {
+                ...options,
+                headerRight: () => (
+                    <HeaderWrapper
+                        content={HeaderRightContent}
+                        route={params as NavigatorParam}
+                        navigation={navProps.navigation}
+                    />
+                ),
+            };
+        }
+
+        return options;
+    };
+
+    // Use function form of options to access navigation props for header wrappers
+    const screenOptions = (params.options?.headerLeft || params.options?.headerRight)
+        ? buildScreenOptions
+        : params.options;
 
     return (
         <Navigator.Screen
             key={`${fullPath}-${index}`}
             name={fullPath}
             component={component}
-            options={screenOptions}
+            options={screenOptions as any}
         />
     )
 }