@sigmela/router 0.1.2 → 0.2.0

package/lib/module/ScreenStackItem/ScreenStackItem.web.js

@@ -1,35 +1,95 @@
 "use strict";
 
-import { RouteLocalContext } from "../RouterContext.js";
-import { memo } from 'react';
+import { RouteLocalContext, useRouter } from "../RouterContext.js";
+import { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { useScreenStackItemsContext } from "../ScreenStack/ScreenStackContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const devLog = (_, __) => {};
 export const ScreenStackItem = /*#__PURE__*/memo(({
-  phase = 'active',
   item,
-  appearance
+  appearance,
+  style
 }) => {
+  const itemsContext = useScreenStackItemsContext();
+  const router = useRouter();
+  const key = item.key;
+  const itemState = itemsContext.items[key];
+  const presentationType = itemState?.presentationType;
+  const animationType = itemState?.animationType;
+  const phase = itemState?.phase;
+  const transitionStatus = itemState?.transitionStatus;
+  const zIndex = itemState?.zIndex ?? 0;
+  const presentation = item.options?.stackPresentation ?? 'push';
+  const isModalLike = ['modal', 'transparentModal', 'containedModal', 'containedTransparentModal', 'fullScreenModal', 'formSheet', 'pageSheet', 'sheet'].includes(presentation);
+  const className = useMemo(() => {
+    const classes = ['screen-stack-item'];
+    if (presentationType) {
+      classes.push(presentationType);
+    }
+    if (animationType) {
+      classes.push(animationType);
+    }
+    if (transitionStatus) {
+      classes.push(`transition-${transitionStatus}`);
+    }
+    if (phase) {
+      classes.push(`phase-${phase}`);
+    }
+    devLog('[ScreenStackItem] className', {
+      key: item.key,
+      path: item.path,
+      presentationType,
+      animationType,
+      phase,
+      transitionStatus,
+      className: classes.join(' ')
+    });
+    return classes.join(' ');
+  }, [presentationType, animationType, transitionStatus, phase, item.key, item.path]);
+  const mergedStyle = useMemo(() => ({
+    flex: 1,
+    ...style,
+    zIndex
+  }), [style, zIndex]);
   const value = {
-    presentation: item.options?.stackPresentation ?? 'push',
+    presentation,
     params: item.params,
     query: item.query,
     pattern: item.pattern,
     path: item.path
   };
-  return /*#__PURE__*/_jsx("div", {
-    "data-presentation": value.presentation,
-    className: "screen-stack-item",
-    "data-phase": phase,
-    children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
-      value: value,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.flex, appearance?.screen],
+  if (!itemState) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    style: mergedStyle,
+    className: className,
+    children: [isModalLike && /*#__PURE__*/_jsx("div", {
+      className: "stack-modal-overlay",
+      onClick: () => router.goBack()
+    }), /*#__PURE__*/_jsx("div", {
+      className: isModalLike ? 'stack-modal-container' : 'stack-screen-container',
+      children: appearance?.screen ? /*#__PURE__*/_jsx(View, {
+        style: [appearance?.screen, styles.flex],
+        children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
+          value: value,
+          children: /*#__PURE__*/_jsx(item.component, {
+            ...(item.passProps || {}),
+            appearance: appearance
+          })
+        })
+      }) : /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
+        value: value,
         children: /*#__PURE__*/_jsx(item.component, {
-          ...(item.passProps || {})
+          ...(item.passProps || {}),
+          appearance: appearance
         })
       })
-    })
+    })]
   });
+}, (prevProps, nextProps) => {
+  return prevProps.item.key === nextProps.item.key && prevProps.item === nextProps.item && prevProps.appearance === nextProps.appearance && prevProps.style === nextProps.style;
 });
 const styles = StyleSheet.create({
   flex: {

package/lib/module/ScreenStackSheetItem/ScreenStackSheetItem.native.js

@@ -28,8 +28,9 @@ export const ScreenStackSheetItem = /*#__PURE__*/memo(props => {
           Commands.dismiss(ref.current);
         }
       });
+      return () => router.unregisterSheetDismisser(item.key);
     }
-
+    return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const handleSheetDismissed = () => {

package/lib/module/ScreenStackSheetItem/ScreenStackSheetItem.web.js

@@ -1,5 +1,5 @@
 "use strict";
 
 export const ScreenStackSheetItem = () => {
-  return null; // TODO: Implement
+  return null;
 };

package/lib/module/SplitView/RenderSplitView.native.js

@@ -0,0 +1,85 @@
+"use strict";
+
+import { StackRenderer } from "../StackRenderer.js";
+import { SplitViewContext } from "./SplitViewContext.js";
+import { useRouter } from "../RouterContext.js";
+import { memo, useCallback, useSyncExternalStore } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StackSliceRenderer = /*#__PURE__*/memo(({
+  stack,
+  appearance,
+  fallbackToFirstRoute
+}) => {
+  const router = useRouter();
+  const stackId = stack.getId();
+  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
+  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
+  const history = useSyncExternalStore(subscribe, get, get);
+  let historyToRender = history;
+  if (fallbackToFirstRoute && historyToRender.length === 0) {
+    const first = stack.getFirstRoute();
+    if (first) {
+      const activePath = router.getActiveRoute()?.path;
+      historyToRender = [{
+        key: `splitview-seed-${stackId}`,
+        routeId: first.routeId,
+        component: first.component,
+        options: first.options,
+        stackId,
+        pattern: first.path,
+        path: activePath ?? first.path
+      }];
+    }
+  }
+  return /*#__PURE__*/_jsx(StackRenderer, {
+    appearance: appearance,
+    stack: stack,
+    history: historyToRender
+  });
+});
+StackSliceRenderer.displayName = 'SplitViewStackSliceRendererNative';
+export const RenderSplitView = /*#__PURE__*/memo(({
+  splitView,
+  appearance
+}) => {
+  const router = useRouter();
+  const secondaryId = splitView.secondary.getId();
+  const subscribe = useCallback(cb => router.subscribeStack(secondaryId, cb), [router, secondaryId]);
+  const get = useCallback(() => router.getStackHistory(secondaryId), [router, secondaryId]);
+  const secondaryHistory = useSyncExternalStore(subscribe, get, get);
+  const hasSecondary = secondaryHistory.length > 0;
+  return /*#__PURE__*/_jsx(SplitViewContext.Provider, {
+    value: splitView,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.primary,
+        pointerEvents: hasSecondary ? 'none' : 'auto',
+        children: /*#__PURE__*/_jsx(StackSliceRenderer, {
+          appearance: appearance,
+          stack: splitView.primary,
+          fallbackToFirstRoute: true
+        })
+      }), hasSecondary ? /*#__PURE__*/_jsx(View, {
+        style: styles.secondary,
+        children: /*#__PURE__*/_jsx(StackSliceRenderer, {
+          appearance: appearance,
+          stack: splitView.secondary
+        })
+      }) : null]
+    })
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  primary: {
+    flex: 1
+  },
+  secondary: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 2
+  }
+});

package/lib/module/SplitView/RenderSplitView.web.js

@@ -0,0 +1,79 @@
+"use strict";
+
+import { StackRenderer } from "../StackRenderer.js";
+import { SplitViewContext } from "./SplitViewContext.js";
+import { useRouter } from "../RouterContext.js";
+import { memo, useCallback, useMemo, useSyncExternalStore } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StackSliceRenderer = /*#__PURE__*/memo(({
+  stack,
+  appearance,
+  fallbackToFirstRoute
+}) => {
+  const router = useRouter();
+  const stackId = stack.getId();
+  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
+  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
+  const history = useSyncExternalStore(subscribe, get, get);
+  let historyToRender = history;
+
+  // When a container route (like /mail -> SplitView) is active, the child stack can be empty,
+  // yet we still want to render its root screen. We keep Router history intact and provide a
+  // renderer-only fallback item.
+  if (fallbackToFirstRoute && historyToRender.length === 0) {
+    const first = stack.getFirstRoute();
+    if (first) {
+      const activePath = router.getActiveRoute()?.path;
+      historyToRender = [{
+        key: `splitview-seed-${stackId}`,
+        routeId: first.routeId,
+        component: first.component,
+        options: first.options,
+        stackId,
+        pattern: first.path,
+        path: activePath ?? first.path
+      }];
+    }
+  }
+  return /*#__PURE__*/_jsx(StackRenderer, {
+    appearance: appearance,
+    stack: stack,
+    history: historyToRender
+  });
+});
+StackSliceRenderer.displayName = 'SplitViewStackSliceRenderer';
+export const RenderSplitView = /*#__PURE__*/memo(({
+  splitView,
+  appearance
+}) => {
+  const instanceClass = useMemo(() => `split-view-instance-${splitView.getId()}`, [splitView]);
+  const containerStyle = useMemo(() => {
+    return {
+      '--split-view-primary-max-width': `${splitView.primaryMaxWidth}px`
+    };
+  }, [splitView.primaryMaxWidth]);
+  return /*#__PURE__*/_jsx(SplitViewContext.Provider, {
+    value: splitView,
+    children: /*#__PURE__*/_jsx("div", {
+      className: instanceClass,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "split-view-container",
+        style: containerStyle,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "split-view-primary",
+          children: /*#__PURE__*/_jsx(StackSliceRenderer, {
+            appearance: appearance,
+            stack: splitView.primary,
+            fallbackToFirstRoute: true
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "split-view-secondary",
+          children: /*#__PURE__*/_jsx(StackSliceRenderer, {
+            appearance: appearance,
+            stack: splitView.secondary
+          })
+        })]
+      })
+    })
+  });
+});

package/lib/module/SplitView/SplitView.js

@@ -0,0 +1,89 @@
+"use strict";
+
+import React from 'react';
+import { RenderSplitView } from './RenderSplitView';
+class SecondaryStackWrapper {
+  constructor(stack) {
+    this.stack = stack;
+  }
+  getId() {
+    return this.stack.getId();
+  }
+  getNodeRoutes() {
+    // IMPORTANT:
+    // - do not mutate routes/options from the original NavigationStack
+    // - allowRootPop is used by Router.goBack so that a single-screen secondary can be dismissed
+    return this.stack.getNodeRoutes().map(r => ({
+      ...r,
+      options: {
+        ...(r.options ?? {}),
+        allowRootPop: true
+      }
+    }));
+  }
+  getNodeChildren() {
+    return this.stack.getNodeChildren();
+  }
+  getRenderer() {
+    return this.stack.getRenderer();
+  }
+  seed() {
+    return this.stack.seed?.() ?? null;
+  }
+  getDefaultOptions() {
+    return this.stack.getDefaultOptions?.();
+  }
+}
+export class SplitView {
+  constructor(options) {
+    this.splitViewId = `splitview-${Math.random().toString(36).slice(2)}`;
+    this.primary = options.primary;
+    this.secondary = options.secondary;
+    this.minWidth = options.minWidth;
+    this.primaryMaxWidth = options.primaryMaxWidth ?? 390;
+  }
+  getId() {
+    return this.splitViewId;
+  }
+  getNodeRoutes() {
+    return [];
+  }
+  getNodeChildren() {
+    return [{
+      prefix: '',
+      node: this.primary
+    }, {
+      prefix: '',
+      node: new SecondaryStackWrapper(this.secondary)
+    }];
+  }
+  getRenderer() {
+    // eslint-disable-next-line consistent-this
+    const instance = this;
+    return function SplitViewScreen(props) {
+      return /*#__PURE__*/React.createElement(RenderSplitView, {
+        splitView: instance,
+        appearance: props?.appearance
+      });
+    };
+  }
+  hasRoute(routeId) {
+    return this.primary.getRoutes().some(r => r.routeId === routeId) || this.secondary.getRoutes().some(r => r.routeId === routeId);
+  }
+  switchToRoute(_routeId) {
+    // SplitView does not have a single "active" child like TabBar.
+    // It renders both stacks (or overlays secondary on narrow via CSS).
+  }
+  setActiveChildByRoute(routeId) {
+    this.switchToRoute(routeId);
+  }
+  seed() {
+    const firstRoute = this.primary.getFirstRoute();
+    if (!firstRoute) return null;
+    return {
+      routeId: firstRoute.routeId,
+      path: firstRoute.path,
+      stackId: this.primary.getId()
+    };
+  }
+}

package/lib/module/SplitView/SplitViewContext.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import { createContext } from 'react';
+export const SplitViewContext = /*#__PURE__*/createContext(null);

package/lib/module/SplitView/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { SplitView } from "./SplitView.js";
+export { RenderSplitView } from './RenderSplitView';
+export { useSplitView } from "./useSplitView.js";

package/lib/module/SplitView/useSplitView.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { useContext } from 'react';
+import { SplitViewContext } from "./SplitViewContext.js";
+export const useSplitView = () => {
+  const splitView = useContext(SplitViewContext);
+  if (!splitView) {
+    throw new Error('useSplitView must be used within a SplitViewProvider');
+  }
+  return splitView;
+};

package/lib/module/StackRenderer.js

@@ -8,13 +8,15 @@ import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const StackRenderer = /*#__PURE__*/memo(({
   stack,
-  appearance
+  appearance,
+  history
 }) => {
   const router = useRouter();
   const stackId = stack.getId();
   const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
   const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
-  const historyForThisStack = useSyncExternalStore(subscribe, get, get);
+  const historyFromStore = useSyncExternalStore(subscribe, get, get);
+  const historyForThisStack = history ?? historyFromStore;
   return /*#__PURE__*/_jsx(ScreenStack, {
     style: [styles.flex, appearance?.screen],
     children: historyForThisStack.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {

package/lib/module/TabBar/RenderTabBar.native.js

@@ -7,7 +7,6 @@ import { BottomTabsScreen, BottomTabs, ScreenStackItem } from 'react-native-scre
 import { Platform, StyleSheet, View } from 'react-native';
 import { useCallback, useSyncExternalStore, memo, useEffect, useState } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Helpers outside render to avoid re-creation
 const isImageSource = value => {
   if (value == null) return false;
   const valueType = typeof value;
@@ -16,47 +15,141 @@ const isImageSource = value => {
   if (valueType === 'object') {
     const v = value;
     if ('uri' in v || 'width' in v || 'height' in v) return true;
+    // Check for new PlatformIcon format
+    if ('ios' in v || 'android' in v || 'shared' in v) return false;
+    // Check for legacy format
     if ('sfSymbolName' in v || 'imageSource' in v || 'templateSource' in v) return false;
+    // Check for new type-based format
+    if ('type' in v) return false;
   }
   return false;
 };
-const isRNSIcon = value => {
+const isPlatformIcon = value => {
+  if (value == null || typeof value !== 'object') return false;
+  const v = value;
+  return 'ios' in v || 'android' in v || 'shared' in v;
+};
+const isLegacyIOSIcon = value => {
   if (value == null || typeof value !== 'object') return false;
   const v = value;
   return 'sfSymbolName' in v || 'imageSource' in v || 'templateSource' in v;
 };
+const convertLegacyIOSIconToPlatformIconIOS = value => {
+  if (!value || typeof value !== 'object') return undefined;
+  const v = value;
+  if ('sfSymbolName' in v) {
+    return {
+      type: 'sfSymbol',
+      name: v.sfSymbolName
+    };
+  }
+  if ('templateSource' in v) {
+    return {
+      type: 'templateSource',
+      templateSource: v.templateSource
+    };
+  }
+  if ('imageSource' in v) {
+    return {
+      type: 'imageSource',
+      imageSource: v.imageSource
+    };
+  }
+  return undefined;
+};
 const buildIOSIcon = value => {
   if (!value) return undefined;
-  if (isRNSIcon(value)) return value;
-  return {
-    templateSource: value
-  };
+
+  // If it's already a PlatformIcon, extract ios
+  if (isPlatformIcon(value)) {
+    return value.ios;
+  }
+
+  // If it's a legacy format, convert it
+  if (isLegacyIOSIcon(value)) {
+    return convertLegacyIOSIconToPlatformIconIOS(value);
+  }
+
+  // If it's an ImageSourcePropType, convert to templateSource
+  if (isImageSource(value)) {
+    return {
+      type: 'templateSource',
+      templateSource: value
+    };
+  }
+  return undefined;
 };
+const buildPlatformIcon = (icon, selectedIcon) => {
+  if (!icon && !selectedIcon) return undefined;
+  const iosIcon = buildIOSIcon(icon);
+  const iosSelectedIcon = buildIOSIcon(selectedIcon);
 
-// Map unified tab icon props to RNS BottomTabsScreen platform-specific props
+  // If it's already a PlatformIcon, use it directly
+  if (isPlatformIcon(icon)) {
+    return {
+      ...icon,
+      ios: iosSelectedIcon || icon.ios
+    };
+  }
+
+  // Build new PlatformIcon
+  const result = {};
+  if (iosIcon || iosSelectedIcon) {
+    result.ios = iosSelectedIcon || iosIcon;
+  }
+
+  // For shared imageSource (works on both platforms)
+  if (isImageSource(icon) && !iosIcon) {
+    result.shared = {
+      type: 'imageSource',
+      imageSource: icon
+    };
+  }
+  return Object.keys(result).length > 0 ? result : undefined;
+};
 const getTabIcon = tab => {
   const {
     icon,
     selectedIcon
   } = tab;
-  if (icon || selectedIcon) {
-    if (Platform.OS === 'android' && isImageSource(icon)) {
-      return {
-        iconResource: icon
-      };
-    }
-    return {
-      selectedIcon: buildIOSIcon(selectedIcon),
-      icon: buildIOSIcon(icon)
+  if (!icon && !selectedIcon) return undefined;
+
+  // Build PlatformIcon for new API
+  const platformIcon = buildPlatformIcon(icon, selectedIcon);
+  if (!platformIcon) return undefined;
+
+  // For Android, if icon is a direct ImageSourcePropType, use shared
+  if (Platform.OS === 'android' && isImageSource(icon) && !platformIcon.shared) {
+    platformIcon.shared = {
+      type: 'imageSource',
+      imageSource: icon
     };
   }
-  return undefined;
+  return {
+    icon: platformIcon,
+    selectedIcon: platformIcon.ios
+  };
 };
+const TabStackRenderer = /*#__PURE__*/memo(({
+  stack,
+  appearance
+}) => {
+  const router = useRouter();
+  const stackId = stack.getId();
+  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
+  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
+  const history = useSyncExternalStore(subscribe, get, get);
+  return /*#__PURE__*/_jsx(StackRenderer, {
+    appearance: appearance,
+    stack: stack,
+    history: history
+  });
+});
+TabStackRenderer.displayName = 'TabStackRenderer';
 export const RenderTabBar = /*#__PURE__*/memo(({
   tabBar,
   appearance = {}
 }) => {
-  const router = useRouter();
   const subscribe = useCallback(cb => tabBar.subscribe(cb), [tabBar]);
   const snapshot = useSyncExternalStore(subscribe, tabBar.getState, tabBar.getState);
   const {
@@ -76,17 +169,14 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     badgeBackgroundColor,
     iOSShadowColor
   } = appearance?.tabBar ?? {};
-  useEffect(() => {
-    router.ensureTabSeed(index);
-  }, [index, router]);
   const onNativeFocusChange = useCallback(event => {
     const tabKey = event.nativeEvent.tabKey;
     const tabIndex = tabs.findIndex(route => route.tabKey === tabKey);
-    router.onTabIndexChange(tabIndex);
-  }, [tabs, router]);
+    tabBar.onIndexChange(tabIndex);
+  }, [tabs, tabBar]);
   const onTabPress = useCallback(nextIndex => {
-    router.onTabIndexChange(nextIndex);
-  }, [router]);
+    tabBar.onIndexChange(nextIndex);
+  }, [tabBar]);
   const containerProps = {
     tabBarBackgroundColor: backgroundColor,
     tabBarItemTitleFontFamily: title?.fontFamily,
@@ -129,11 +219,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
       }
     }
   });
-
-  // If a custom component is provided, render it instead of default native BottomTabs
   const CustomTabBar = config.component;
-
-  // Track visited tabs to lazily mount on first visit and keep mounted afterwards
   const [visited, setVisited] = useState({});
   useEffect(() => {
     const key = tabs[index]?.tabKey;
@@ -162,7 +248,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
             const ScreenForTab = tabBar.screens[tab.tabKey];
             return /*#__PURE__*/_jsx(View, {
               style: [styles.flex, !isActive && styles.hidden],
-              children: stackForTab ? /*#__PURE__*/_jsx(StackRenderer, {
+              children: stackForTab ? /*#__PURE__*/_jsx(TabStackRenderer, {
                 appearance: appearance,
                 stack: stackForTab
               }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
@@ -201,10 +287,9 @@ export const RenderTabBar = /*#__PURE__*/memo(({
             title: tab.title,
             badgeValue: tab.badgeValue,
             specialEffects: tab.specialEffects,
-            selectedIcon: icon?.selectedIcon,
-            iconResource: icon?.iconResource,
             icon: icon?.icon,
-            children: stack ? /*#__PURE__*/_jsx(StackRenderer, {
+            selectedIcon: icon?.selectedIcon,
+            children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
               appearance: appearance,
               stack: stack
             }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null