@sigmela/router 0.2.0 → 0.2.2

package/README.md

@@ -72,7 +72,7 @@ const rootStack = new NavigationStack()
   .addScreen('/', HomeScreen, { header: { title: 'Home' } })
   .addScreen('/details/:id', DetailsScreen, { header: { title: 'Details' } });
 
-const router = new Router({ root: rootStack });
+const router = new Router({ roots: { app: rootStack }, root: 'app' });
 
 export default function App() {
   return <Navigation router={router} />;
@@ -94,7 +94,7 @@ const tabBar = new TabBar({ initialIndex: 0 })
   .addTab({ key: 'home', stack: homeStack, title: 'Home' })
   .addTab({ key: 'catalog', stack: catalogStack, title: 'Catalog' });
 
-const router = new Router({ root: tabBar });
+const router = new Router({ roots: { app: tabBar }, root: 'app' });
 
 export default function App() {
   return <Navigation router={router} />;
@@ -158,7 +158,8 @@ The `Router` holds navigation state and performs path matching.
 
 ```ts
 const router = new Router({
-  root, // NavigationNode (NavigationStack, TabBar, SplitView, ...)
+  roots: { app: root }, // NavigationNode (NavigationStack, TabBar, SplitView, ...)
+  root: 'app',
   screenOptions, // optional defaults
   debug, // optional
 });
@@ -169,7 +170,7 @@ Navigation:
 - `router.replace(path, dedupe?)` — replace top of the active stack
 - `router.goBack()` — pop top of the active stack
 - `router.reset(path)` — **web-only**: rebuild Router state as if app loaded at `path`
-- `router.setRoot(nextRoot, { transition? })` — swap root at runtime
+- `router.setRoot(rootKey, { transition? })` — swap root at runtime (`rootKey` from `config.roots`)
 
 State/subscriptions:
 - `router.getState()` → `{ history: HistoryItem[] }`

package/lib/module/Navigation.js

@@ -47,7 +47,7 @@ export const Navigation = /*#__PURE__*/memo(({
         stackId: globalId,
         item: item
       }, `global-${item.key}`))]
-    })
+    }, rootId ?? 'root')
   });
 });
 const styles = StyleSheet.create({

package/lib/module/Router.js

@@ -27,6 +27,9 @@ export class Router {
   activeRoute = null;
   rootListeners = new Set();
   rootTransition = undefined;
+  // Root swaps should behave like a fresh initial mount (no enter animation).
+  // We keep the API option for compatibility, but suppress transition application.
+  suppressRootTransitionOnNextRead = false;
   lastBrowserIndex = 0;
   suppressHistorySyncCount = 0;
 
@@ -36,7 +39,13 @@ export class Router {
     this.debugEnabled = config.debug ?? false;
     this.routerScreenOptions = config.screenOptions;
     this.log('ctor');
-    this.root = config.root;
+    this.roots = config.roots;
+    this.activeRootKey = config.root;
+    const initialRoot = this.roots[this.activeRootKey];
+    if (!initialRoot) {
+      throw new Error(`Router: root "${String(this.activeRootKey)}" not found in config.roots`);
+    }
+    this.root = initialRoot;
     this.buildRegistry();
     if (this.isWebEnv()) {
       this.setupBrowserHistory();
@@ -174,11 +183,24 @@ export class Router {
     this.rootListeners.forEach(l => l());
   }
   getRootTransition() {
+    if (this.suppressRootTransitionOnNextRead) {
+      this.suppressRootTransitionOnNextRead = false;
+      // Ensure we don't accidentally apply it on subsequent renders.
+      this.rootTransition = undefined;
+      return undefined;
+    }
     return this.rootTransition;
   }
-  setRoot(nextRoot, options) {
+  setRoot(nextRootKey, options) {
+    const nextRoot = this.roots[nextRootKey];
+    if (!nextRoot) {
+      throw new Error(`Router: root "${String(nextRootKey)}" not found in config.roots`);
+    }
+    this.activeRootKey = nextRootKey;
     this.root = nextRoot;
     this.rootTransition = options?.transition ?? undefined;
+    // Make the incoming root behave like initial: suppress enter animation.
+    this.suppressRootTransitionOnNextRead = true;
     this.registry.length = 0;
     this.stackById.clear();
     this.routeById.clear();
@@ -351,6 +373,27 @@ export class Router {
     }
     const matchResult = base.matchPath(pathname);
     const params = matchResult ? matchResult.params : undefined;
+
+    // Smart navigate:
+    // If navigate(push) targets the currently active routeId within the same stack, treat it as
+    // "same screen, new data" and perform a replace (preserving the existing key) by default.
+    //
+    // Consumers can opt out per-route via ScreenOptions.allowMultipleInstances=true.
+    if (action === 'push' && base.stackId) {
+      const mergedOptions = this.mergeOptions(base.options, base.stackId);
+      const allowMultipleInstances = mergedOptions?.allowMultipleInstances === true;
+      const isActiveSameStack = this.activeRoute?.stackId === base.stackId;
+      const isActiveSameRoute = this.activeRoute?.routeId === base.routeId;
+
+      // Optional safety: only apply to push-presentation screens by default.
+      const presentation = mergedOptions?.stackPresentation ?? 'push';
+      const isPushPresentation = presentation === 'push';
+      if (!allowMultipleInstances && isPushPresentation && isActiveSameStack && isActiveSameRoute) {
+        const newItem = this.createHistoryItem(base, params, query, pathname);
+        this.applyHistoryChange('replace', newItem);
+        return;
+      }
+    }
     if (action === 'push') {
       if (base.stackId) {
         let existing = this.findExistingRoute(base.stackId, base.routeId, pathname, params ?? {});

package/lib/module/ScreenStack/ScreenStack.web.js

@@ -2,7 +2,7 @@
 
 import { memo, useRef, useLayoutEffect, useMemo, useEffect, Children, isValidElement, Fragment } from 'react';
 import { useTransitionMap } from 'react-transition-state';
-import { ScreenStackItemsContext, ScreenStackAnimatingContext } from "./ScreenStackContext.js";
+import { ScreenStackItemsContext, ScreenStackAnimatingContext, useScreenStackConfig } from "./ScreenStackContext.js";
 import { getPresentationTypeClass, computeAnimationType } from "./animationHelpers.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const devLog = (_, __) => {};
@@ -61,6 +61,8 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   });
   const containerRef = useRef(null);
   const isInitialMountRef = useRef(true);
+  const suppressEnterAfterEmptyRef = useRef(false);
+  const suppressedEnterKeyRef = useRef(null);
   const prevKeysRef = useRef([]);
   const lastDirectionRef = useRef('forward');
   const childMapRef = useRef(new Map());
@@ -146,6 +148,8 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     routeKeys,
     direction
   });
+  const screenStackConfig = useScreenStackConfig();
+  const animateFirstScreenAfterEmpty = screenStackConfig.animateFirstScreenAfterEmpty ?? true;
   const isInitialPhase = isInitialMountRef.current;
   const keysToRender = useMemo(() => {
     const routeKeySet = new Set(routeKeys);
@@ -179,10 +183,27 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     }
     const newKeys = routeKeys.filter(key => !existingKeySet.has(key));
     const removedKeys = [...existingKeySet].filter(key => !routeKeySet.has(key));
+
+    // Track "became empty" state to suppress the next enter animation when configured.
+    // This is SplitView-secondary-only (via ScreenStackConfigContext), not global behavior.
+    if (!animateFirstScreenAfterEmpty) {
+      if (routeKeys.length === 0) {
+        suppressEnterAfterEmptyRef.current = true;
+        suppressedEnterKeyRef.current = null;
+      }
+    }
     devLog('[ScreenStack] Lifecycle diff', {
       newKeys,
       removedKeys
     });
+
+    // If this is the first pushed key after the stack was empty, remember its key so we can
+    // suppress only its enter animation (without affecting exit animations).
+    if (!animateFirstScreenAfterEmpty && suppressEnterAfterEmptyRef.current && routeKeys.length > 0 && newKeys.length > 0) {
+      const candidate = newKeys[newKeys.length - 1] ?? null;
+      suppressedEnterKeyRef.current = candidate;
+      suppressEnterAfterEmptyRef.current = false;
+    }
     for (const key of newKeys) {
       devLog(`[ScreenStack] Adding item: ${key}`);
       setItem(key);
@@ -206,7 +227,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     }
     lastDirectionRef.current = direction;
     devLog('[ScreenStack] === LIFECYCLE EFFECT END ===');
-  }, [routeKeys, direction, setItem, toggle, stateMapEntries, stateMap]);
+  }, [routeKeys, direction, setItem, toggle, stateMapEntries, stateMap, animateFirstScreenAfterEmpty]);
   useLayoutEffect(() => {
     devLog('[ScreenStack] === CLEANUP EFFECT START ===');
     const routeKeySet = new Set(routeKeys);
@@ -240,15 +261,31 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     // If the stack mounts empty, we still want the first pushed screen to animate.
     // Mark initial mount as completed immediately in that case.
     if (!hasMountedItem && routeKeys.length === 0) {
-      isInitialMountRef.current = false;
-      devLog('[ScreenStack] Initial mount completed (empty stack)');
+      if (animateFirstScreenAfterEmpty) {
+        isInitialMountRef.current = false;
+        devLog('[ScreenStack] Initial mount completed (empty stack)');
+      }
       return;
     }
     if (hasMountedItem) {
       isInitialMountRef.current = false;
       devLog('[ScreenStack] Initial mount completed');
     }
-  }, [stateMapEntries, routeKeys.length]);
+  }, [stateMapEntries, routeKeys.length, animateFirstScreenAfterEmpty]);
+
+  // Clear suppression key once it is no longer the top screen (so it can animate normally as
+  // a background when new screens are pushed).
+  useLayoutEffect(() => {
+    if (animateFirstScreenAfterEmpty) return;
+    const topKey = routeKeys[routeKeys.length - 1] ?? null;
+    if (!topKey) {
+      suppressedEnterKeyRef.current = null;
+      return;
+    }
+    if (suppressedEnterKeyRef.current && suppressedEnterKeyRef.current !== topKey) {
+      suppressedEnterKeyRef.current = null;
+    }
+  }, [routeKeys, animateFirstScreenAfterEmpty]);
   useEffect(() => {
     if (!containerRef.current) return;
     const items = containerRef.current.querySelectorAll('.screen-stack-item');
@@ -289,7 +326,12 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       const routeIndex = routeKeys.indexOf(key);
       const zIndex = routeIndex >= 0 ? routeIndex + 1 : keysToRender.length + index + 1;
       const presentationType = getPresentationTypeClass(presentation);
-      const animationType = computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated);
+      let animationType = computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated);
+
+      // SplitView-secondary-only: suppress enter animation for the first screen after empty.
+      if (!animateFirstScreenAfterEmpty && isTop && direction === 'forward' && suppressedEnterKeyRef.current === key) {
+        animationType = 'none';
+      }
       items[key] = {
         presentationType,
         animationType,
@@ -316,7 +358,10 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
         phase = 'inactive';
       }
       const presentationType = getPresentationTypeClass(presentation);
-      const animationType = isInitialPhase ? 'none' : computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated);
+      let animationType = isInitialPhase ? 'none' : computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated);
+      if (!animateFirstScreenAfterEmpty && isTop && direction === 'forward' && suppressedEnterKeyRef.current === key) {
+        animationType = 'none';
+      }
       items[key] = {
         presentationType,
         animationType,
@@ -328,7 +373,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     return {
       items
     };
-  }, [keysToRender, stateMap, childMap, routeKeySet, topKey, isInitialPhase, routeKeys, direction]);
+  }, [keysToRender, stateMap, childMap, routeKeySet, topKey, isInitialPhase, routeKeys, direction, animateFirstScreenAfterEmpty]);
   const animating = useMemo(() => {
     return stateMapEntries.some(([, state]) => state.isMounted && (state.status === 'entering' || state.status === 'exiting' || state.status === 'preEnter' || state.status === 'preExit'));
   }, [stateMapEntries]);

package/lib/module/ScreenStack/ScreenStackContext.js

@@ -3,6 +3,12 @@
 import { createContext, useContext } from 'react';
 export const ScreenStackItemsContext = /*#__PURE__*/createContext(null);
 export const ScreenStackAnimatingContext = /*#__PURE__*/createContext(false);
+export const ScreenStackConfigContext = /*#__PURE__*/createContext({
+  animateFirstScreenAfterEmpty: true
+});
+export const useScreenStackConfig = () => {
+  return useContext(ScreenStackConfigContext);
+};
 export const useScreenStackItemsContext = () => {
   const ctx = useContext(ScreenStackItemsContext);
   if (!ctx) {

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

@@ -3,7 +3,8 @@
 import { StackRenderer } from "../StackRenderer.js";
 import { SplitViewContext } from "./SplitViewContext.js";
 import { useRouter } from "../RouterContext.js";
-import { memo, useCallback, useMemo, useSyncExternalStore } from 'react';
+import { ScreenStackConfigContext } from "../ScreenStack/ScreenStackContext.js";
+import { memo, useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StackSliceRenderer = /*#__PURE__*/memo(({
   stack,
@@ -46,7 +47,31 @@ export const RenderSplitView = /*#__PURE__*/memo(({
   splitView,
   appearance
 }) => {
-  const instanceClass = useMemo(() => `split-view-instance-${splitView.getId()}`, [splitView]);
+  const [isWide, setIsWide] = useState(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return false;
+    }
+    return window.matchMedia(`(min-width: ${splitView.minWidth}px)`).matches;
+  });
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return;
+    }
+    const mq = window.matchMedia(`(min-width: ${splitView.minWidth}px)`);
+    const onChange = ev => setIsWide(ev.matches);
+
+    // Sync immediately.
+    setIsWide(mq.matches);
+    if (typeof mq.addEventListener === 'function') {
+      mq.addEventListener('change', onChange);
+      return () => mq.removeEventListener('change', onChange);
+    }
+
+    // Safari < 14 fallback (deprecated, but still needed).
+    const mqAny = mq;
+    mqAny.addListener?.(onChange);
+    return () => mqAny.removeListener?.(onChange);
+  }, [splitView.minWidth]);
   const containerStyle = useMemo(() => {
     return {
       '--split-view-primary-max-width': `${splitView.primaryMaxWidth}px`
@@ -54,26 +79,31 @@ export const RenderSplitView = /*#__PURE__*/memo(({
   }, [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__*/_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: isWide ? /*#__PURE__*/_jsx(ScreenStackConfigContext.Provider, {
+          value: {
+            animateFirstScreenAfterEmpty: false
+          },
           children: /*#__PURE__*/_jsx(StackSliceRenderer, {
             appearance: appearance,
             stack: splitView.secondary
           })
-        })]
-      })
+        }) : /*#__PURE__*/_jsx(StackSliceRenderer, {
+          appearance: appearance,
+          stack: splitView.secondary
+        })
+      })]
     })
   });
 });

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

@@ -72,10 +72,17 @@ export const RenderTabBar = /*#__PURE__*/memo(({
   }, [router, tabBar, tabs, index]);
   const tabBarStyle = useMemo(() => {
     const tabBarBg = toColorString(appearance?.tabBar?.backgroundColor);
-    return tabBarBg ? {
-      backgroundColor: tabBarBg
-    } : undefined;
-  }, [appearance?.tabBar?.backgroundColor]);
+    const style = {
+      ...(tabBarBg ? {
+        ['--tabbar-bg']: tabBarBg
+      } : null),
+      ...(tabs.length ? {
+        ['--tabbar-tabs-count']: String(tabs.length),
+        ['--tabbar-active-index']: String(index)
+      } : null)
+    };
+    return Object.keys(style).length ? style : undefined;
+  }, [appearance?.tabBar?.backgroundColor, tabs.length, index]);
   const titleBaseStyle = useMemo(() => ({
     fontFamily: appearance?.tabBar?.title?.fontFamily,
     fontSize: appearance?.tabBar?.title?.fontSize,
@@ -97,37 +104,51 @@ export const RenderTabBar = /*#__PURE__*/memo(({
       }) : /*#__PURE__*/_jsx("div", {
         className: "tab-bar",
         style: tabBarStyle,
-        children: /*#__PURE__*/_jsx("div", {
+        "data-tabs-count": tabs.length,
+        "data-active-index": index,
+        children: /*#__PURE__*/_jsxs("div", {
           className: "tab-bar-inner",
-          children: tabs.map((tab, i) => {
-            const isActive = i === index;
-            const iconTint = toColorString(isActive ? appearance?.tabBar?.iconColorActive : appearance?.tabBar?.iconColor);
-            const title = appearance?.tabBar?.title;
-            const labelColor = isActive ? toColorString(title?.activeColor) ?? toColorString(title?.color) : toColorString(title?.color);
-            const labelStyle = {
-              ...titleBaseStyle,
-              color: labelColor
-            };
-            return /*#__PURE__*/_jsxs("button", {
-              "data-index": i,
-              className: `tab-item${isActive ? ' active' : ''}`,
-              onClick: () => onTabClick(i),
-              children: [/*#__PURE__*/_jsx("div", {
-                className: "tab-item-icon",
-                children: isImageSource(tab.icon) ? /*#__PURE__*/_jsx(TabIcon, {
-                  source: tab.icon,
-                  tintColor: iconTint
-                }) : null
-              }), /*#__PURE__*/_jsx("div", {
-                className: "tab-item-label",
-                style: labelStyle,
-                children: tab.title
-              }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
-                className: "tab-item-label-badge",
-                children: tab.badgeValue
-              }) : null]
-            }, tab.tabKey);
-          })
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "tab-bar-glass",
+            "aria-hidden": "true"
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "tab-bar-content",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "tab-bar-active-indicator",
+              "aria-hidden": "true"
+            }), tabs.map((tab, i) => {
+              const isActive = i === index;
+              const iconTint = toColorString(isActive ? appearance?.tabBar?.iconColorActive : appearance?.tabBar?.iconColor);
+              const title = appearance?.tabBar?.title;
+              const labelColor = isActive ? toColorString(title?.activeColor) ?? toColorString(title?.color) : toColorString(title?.color);
+              const labelStyle = {
+                ...titleBaseStyle,
+                color: labelColor
+              };
+              return /*#__PURE__*/_jsxs("button", {
+                type: "button",
+                "data-index": i,
+                "data-active": isActive ? 'true' : 'false',
+                "aria-current": isActive ? 'page' : undefined,
+                className: `tab-item${isActive ? ' active' : ''}`,
+                onClick: () => onTabClick(i),
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: "tab-item-icon",
+                  children: isImageSource(tab.icon) ? /*#__PURE__*/_jsx(TabIcon, {
+                    source: tab.icon,
+                    tintColor: iconTint
+                  }) : null
+                }), /*#__PURE__*/_jsx("div", {
+                  className: "tab-item-label",
+                  style: labelStyle,
+                  children: tab.title
+                }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
+                  className: "tab-item-label-badge",
+                  children: tab.badgeValue
+                }) : null]
+              }, tab.tabKey);
+            })]
+          })]
         })
       })]
     })

package/lib/module/TabBar/TabBar.js

@@ -82,7 +82,6 @@ export class TabBar {
       } catch (e) {
         // TabBar has no debug flag; keep behavior quiet in production.
         if (__DEV__) {
-          // eslint-disable-next-line no-console
           console.error('[TabBar] listener error', e);
         }
       }

package/lib/module/TabBar/useTabBarHeight.js

@@ -8,7 +8,7 @@ export const TAB_BAR_HEIGHT = 57;
 /**
  * Hook that returns the height of the TabBar
  * @returns {number} The height of the TabBar in pixels
- * 
+ *
  * @example
  * ```tsx
  * const TabBarExample = () => {

package/lib/module/styles.css

@@ -493,6 +493,20 @@
   padding-bottom: calc(73px + env(safe-area-inset-bottom)); 
 }
 
+.tab-bar {
+  /* CSS variables for theming / behavior */
+  --tabbar-bg: #ffffff;
+  --tabbar-gap: 4px;
+  --tabbar-radius: 9999px;
+  --tabbar-padding: 6px;
+  --tabbar-item-radius: 9999px;
+  --tabbar-height: 56px;
+
+  /* Used by active indicator (set inline in RenderTabBar.web.tsx) */
+  --tabbar-tabs-count: 1;
+  --tabbar-active-index: 0;
+}
+
 .tab-bar-blur-overlay {
   position: fixed;
   bottom: 0;
@@ -516,23 +530,69 @@
   bottom: 0;
   left: 0;
   right: 0;
-  padding: 8px 16px;
-  padding-bottom: max(16px, env(safe-area-inset-bottom));
+  padding: 10px 12px;
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
   background: transparent;
   z-index: 100;
 }
 
 .tab-bar-inner {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  border-radius: var(--tabbar-radius);
+  overflow: hidden;
+  isolation: isolate;
+  width: 100%;
+  max-width: 100%;
+}
+
+.tab-bar-glass {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.tab-bar-content {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
-  background: #FFFFFF;
-  box-shadow: 0 2px 8px #00000014;
-  border-radius: 100px;
-  padding: 4px;
-  gap: 4px;
   width: 100%;
   max-width: 100%;
+  gap: var(--tabbar-gap);
+  padding: var(--tabbar-padding);
+}
+
+.tab-bar-active-indicator {
+  position: absolute;
+  top: var(--tabbar-padding);
+  bottom: var(--tabbar-padding);
+  left: var(--tabbar-padding);
+  border-radius: var(--tabbar-item-radius);
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition:
+    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.tab-bar[data-tabs-count]:not([data-tabs-count="0"]) .tab-bar-active-indicator {
+  opacity: 1;
+  width: calc(
+    (
+        100% -
+          (var(--tabbar-padding) * 2) -
+          (var(--tabbar-gap) * (var(--tabbar-tabs-count) - 1))
+      ) / var(--tabbar-tabs-count)
+  );
+  transform: translateX(
+    calc((var(--tabbar-active-index) * (100% + var(--tabbar-gap))))
+  );
 }
 
 .tab-item {
@@ -540,37 +600,44 @@
   background: transparent;
   border: 0;
   margin: 0;
-  padding: 8px 16px;
-  height: 49px;
+  padding: 6px 10px;
+  height: var(--tabbar-height);
   color: inherit;
   display: flex;
-  flex: 1;
+  flex: 1 1 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   position: relative;
   cursor: pointer;
-  border-radius: 100px;
-  transition: all 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  border-radius: var(--tabbar-item-radius);
+  transition:
+    transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 .tab-item.active {
-  background: #EDEDED;
+  background: transparent;
 }
 
 .tab-item:hover:not(.active) {
-  background: color-mix(in srgb, currentColor 8%, transparent);
+  background: color-mix(in srgb, #0a0a0a 6%, transparent);
 }
 
+.tab-item:active {
+  transform: scale(0.98);
+}
 
 .tab-item:focus {
   outline: none;
 }
 
 .tab-item:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, currentColor 40%, transparent),
+    0 10px 28px rgba(0, 0, 0, 0.12);
 }
 
 .tab-item-icon {
@@ -617,6 +684,41 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
+/* ==================== MOBILE TAB BAR (<= 640px) — iOS-like floating glass pill ==================== */
+@media (max-width: 640px) {
+  .tab-bar-inner {
+    max-width: 560px;
+    margin: 0 auto;
+  }
+
+  .tab-bar-glass {
+    /* Fallbacks first (in case color-mix isn't supported) */
+    background-color: rgba(255, 255, 255, 0.72);
+    background: rgba(255, 255, 255, 0.72);
+    /* Preferred (overrides when supported) */
+    background: color-mix(in srgb, var(--tabbar-bg, #ffffff) 76%, transparent);
+    backdrop-filter: blur(28px) saturate(180%);
+    -webkit-backdrop-filter: blur(28px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    border: 0.5px solid color-mix(in srgb, #ffffff 55%, transparent);
+    box-shadow:
+      0 8px 26px rgba(0, 0, 0, 0.18),
+      0 1px 0 rgba(255, 255, 255, 0.4) inset;
+  }
+
+  .tab-bar-active-indicator {
+    background-color: rgba(255, 255, 255, 0.60);
+    background: color-mix(in srgb, #ffffff 62%, transparent);
+    box-shadow:
+      0 1px 0 rgba(255, 255, 255, 0.5) inset,
+      0 8px 20px rgba(0, 0, 0, 0.10);
+  }
+
+  .tab-item:hover:not(.active) {
+    background: color-mix(in srgb, #ffffff 22%, transparent);
+  }
+}
+
 /* ==================== DESKTOP TAB BAR (>= 641px) ==================== */
 @media (min-width: 641px) {
   .tab-stacks-container {
@@ -660,10 +762,26 @@
     border-radius: 0;
     padding: 12px 0 0 0;
     gap: 0;
-    background: #FFFFFF;
+    background: var(--tabbar-bg, #ffffff);
     box-shadow: none;
   }
 
+  .tab-bar-glass {
+    display: none;
+  }
+
+  .tab-bar-content {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 0;
+    gap: 0;
+  }
+
+  .tab-bar-active-indicator {
+    display: none;
+  }
+
   .tab-item {
     margin: 0 12px;
     margin-bottom: 4px;

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

@@ -2,7 +2,8 @@ import type { NavigationNode } from './navigationNode';
 import type { HistoryItem, ScreenOptions, ActiveRoute, QueryPattern } from './types';
 type Listener = () => void;
 export interface RouterConfig {
-    root: NavigationNode;
+    roots: Record<string, NavigationNode>;
+    root: string;
     screenOptions?: ScreenOptions;
     debug?: boolean;
 }
@@ -12,6 +13,8 @@ type RouterState = {
 };
 export declare class Router {
     root: NavigationNode | null;
+    private readonly roots;
+    private activeRootKey;
     private readonly listeners;
     private readonly registry;
     private state;
@@ -26,6 +29,7 @@ export declare class Router {
     private activeRoute;
     private rootListeners;
     private rootTransition?;
+    private suppressRootTransitionOnNextRead;
     private lastBrowserIndex;
     private suppressHistorySyncCount;
     private navigationToken;
@@ -53,7 +57,7 @@ export declare class Router {
     subscribeRoot(listener: Listener): () => void;
     private emitRootChange;
     getRootTransition(): RootTransition | undefined;
-    setRoot(nextRoot: NavigationNode, options?: {
+    setRoot(nextRootKey: string, options?: {
         transition?: RootTransition;
     }): void;
     getActiveRoute: () => ActiveRoute;

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

@@ -17,6 +17,15 @@ export type ScreenStackItemsContextValue = {
 export type ScreenStackAnimatingContextValue = boolean;
 export declare const ScreenStackItemsContext: import("react").Context<ScreenStackItemsContextValue | null>;
 export declare const ScreenStackAnimatingContext: import("react").Context<boolean>;
+export type ScreenStackConfig = {
+    /**
+     * When false, the first screen pushed after the stack becomes empty will NOT animate
+     * (treated as an initial render). Subsequent pushes/pops still animate normally.
+     */
+    animateFirstScreenAfterEmpty?: boolean;
+};
+export declare const ScreenStackConfigContext: import("react").Context<ScreenStackConfig>;
+export declare const useScreenStackConfig: () => ScreenStackConfig;
 export declare const useScreenStackItemsContext: () => ScreenStackItemsContextValue;
 export declare const useScreenStackAnimatingContext: () => boolean;
 //# sourceMappingURL=ScreenStackContext.d.ts.map

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

@@ -16,6 +16,14 @@ export type ScreenOptions = Partial<Omit<RNSScreenProps, 'stackPresentation'>> &
     syncWithUrl?: boolean;
     tabBarIcon?: TabBarIcon;
     animated?: boolean;
+    /**
+     * Allows pushing multiple instances of the same screen (same routeId) onto a stack.
+     *
+     * By default, Router.navigate() will behave like "replace" when targeting the currently
+     * active routeId in the same stack (i.e. treat it as "same screen, new data").
+     * Set this to true to force "push" even when navigating to the active routeId.
+     */
+    allowMultipleInstances?: boolean;
     /**
      * Allows Router.goBack() to pop the last (root) screen of a stack.
      * Useful for secondary stacks in split-view / overlays.

package/package.json

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