@sigmela/router 0.2.1 → 0.2.3

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();
@@ -345,6 +367,14 @@ export class Router {
       }
       return;
     }
+
+    // Ensure the root-level container (e.g. TabBar) is activated for the matched route.
+    // This is important when the matched route belongs to a nested stack inside a composite node
+    // like SplitView: stackActivators won't fire for the tab itself in that case.
+    const rootStackId = this.root?.getId();
+    if (rootStackId) {
+      this.activateContainerForRoute(base.routeId, rootStackId);
+    }
     const activator = base.stackId ? this.stackActivators.get(base.stackId) : undefined;
     if (activator) {
       activator();

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

@@ -5,7 +5,7 @@ import { TabBarContext } from "./TabBarContext.js";
 import { useRouter } from "../RouterContext.js";
 import { BottomTabsScreen, BottomTabs, ScreenStackItem } from 'react-native-screens';
 import { Platform, StyleSheet, View } from 'react-native';
-import { useCallback, useSyncExternalStore, memo, useEffect, useState } from 'react';
+import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isImageSource = value => {
   if (value == null) return false;
@@ -146,6 +146,16 @@ const TabStackRenderer = /*#__PURE__*/memo(({
   });
 });
 TabStackRenderer.displayName = 'TabStackRenderer';
+const TabNodeRenderer = /*#__PURE__*/memo(({
+  node,
+  appearance
+}) => {
+  const Renderer = useMemo(() => node.getRenderer(), [node]);
+  return /*#__PURE__*/_jsx(Renderer, {
+    appearance: appearance
+  });
+});
+TabNodeRenderer.displayName = 'TabNodeRenderer';
 export const RenderTabBar = /*#__PURE__*/memo(({
   tabBar,
   appearance = {}
@@ -245,12 +255,16 @@ export const RenderTabBar = /*#__PURE__*/memo(({
           children: tabs.filter(t => visited[t.tabKey]).map(tab => {
             const isActive = tab.tabKey === tabs[index]?.tabKey;
             const stackForTab = tabBar.stacks[tab.tabKey];
+            const nodeForTab = tabBar.nodes[tab.tabKey];
             const ScreenForTab = tabBar.screens[tab.tabKey];
             return /*#__PURE__*/_jsx(View, {
               style: [styles.flex, !isActive && styles.hidden],
               children: stackForTab ? /*#__PURE__*/_jsx(TabStackRenderer, {
                 appearance: appearance,
                 stack: stackForTab
+              }) : nodeForTab ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+                appearance: appearance,
+                node: nodeForTab
               }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
             }, `tab-content-${tab.tabKey}`);
           })
@@ -277,6 +291,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
         children: tabs.map(tab => {
           const isFocused = tab.tabKey === tabs[index]?.tabKey;
           const stack = tabBar.stacks[tab.tabKey];
+          const node = tabBar.nodes[tab.tabKey];
           const Screen = tabBar.screens[tab.tabKey];
           const icon = getTabIcon(tab);
           return /*#__PURE__*/_jsx(BottomTabsScreen, {
@@ -292,6 +307,9 @@ export const RenderTabBar = /*#__PURE__*/memo(({
             children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
               appearance: appearance,
               stack: stack
+            }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+              appearance: appearance,
+              node: node
             }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
           }, tab.tabKey);
         })

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

@@ -34,6 +34,29 @@ const TabStackRenderer = /*#__PURE__*/memo(({
   });
 });
 TabStackRenderer.displayName = 'TabStackRenderer';
+const TabNodeRenderer = /*#__PURE__*/memo(({
+  node,
+  appearance
+}) => {
+  const Renderer = useMemo(() => node.getRenderer(), [node]);
+  return /*#__PURE__*/_jsx(Renderer, {
+    appearance: appearance
+  });
+});
+TabNodeRenderer.displayName = 'TabNodeRenderer';
+const joinPrefixAndPath = (prefix, path) => {
+  const base = (prefix ?? '').trim();
+  const child = (path || '/').trim();
+  if (!base) return child || '/';
+  const baseNorm = base === '/' ? '' : base.endsWith('/') ? base.slice(0, -1) : base;
+  if (!child || child === '/') {
+    return baseNorm || '/';
+  }
+  if (child.startsWith('/')) {
+    return `${baseNorm}${child}`;
+  }
+  return `${baseNorm}/${child}`;
+};
 export const RenderTabBar = /*#__PURE__*/memo(({
   tabBar,
   appearance
@@ -48,11 +71,13 @@ export const RenderTabBar = /*#__PURE__*/memo(({
   } = snapshot;
   const focusedTab = tabs[index];
   const stack = focusedTab ? tabBar.stacks[focusedTab.tabKey] : undefined;
+  const node = focusedTab ? tabBar.nodes[focusedTab.tabKey] : undefined;
   const Screen = focusedTab ? tabBar.screens[focusedTab.tabKey] : undefined;
   const onTabClick = useCallback(nextIndex => {
     const targetTab = tabs[nextIndex];
     if (!targetTab) return;
     const targetStack = tabBar.stacks[targetTab.tabKey];
+    const targetNode = tabBar.nodes[targetTab.tabKey];
     if (targetStack) {
       // Keep TabBar UI in sync immediately.
       if (nextIndex !== index) {
@@ -65,6 +90,17 @@ export const RenderTabBar = /*#__PURE__*/memo(({
         router.reset(firstRoutePath);
         return;
       }
+    } else if (targetNode) {
+      // Keep TabBar UI in sync immediately.
+      if (nextIndex !== index) {
+        tabBar.onIndexChange(nextIndex);
+      }
+      const seedPath = targetNode.seed?.()?.path;
+      const fallbackFirstPath = targetNode.getNodeRoutes()?.[0]?.path;
+      const path = seedPath ?? fallbackFirstPath ?? '/';
+      const fullPath = joinPrefixAndPath(targetTab.tabPrefix, path);
+      router.reset(fullPath);
+      return;
     }
     if (nextIndex !== index) {
       tabBar.onIndexChange(nextIndex);
@@ -72,10 +108,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,
@@ -90,6 +133,9 @@ export const RenderTabBar = /*#__PURE__*/memo(({
       children: [stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
         appearance: appearance,
         stack: stack
+      }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+        appearance: appearance,
+        node: node
       }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null, CustomTabBar ? /*#__PURE__*/_jsx(CustomTabBar, {
         onTabPress: onTabClick,
         activeIndex: index,
@@ -97,37 +143,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

@@ -8,6 +8,7 @@ import { RenderTabBar } from './RenderTabBar';
 export class TabBar {
   screens = {};
   stacks = {};
+  nodes = {};
   listeners = new Set();
   constructor(options = {}) {
     this.tabBarId = `tabbar-${Math.random().toString(36).slice(2)}`;
@@ -23,6 +24,10 @@ export class TabBar {
     return this.tabBarId;
   }
   addTab(tab) {
+    const sourcesCount = (tab.stack ? 1 : 0) + (tab.node ? 1 : 0) + (tab.screen ? 1 : 0);
+    if (sourcesCount !== 1) {
+      throw new Error(`TabBar.addTab: exactly one of { stack, node, screen } must be provided (got ${sourcesCount})`);
+    }
     const {
       key,
       ...rest
@@ -31,6 +36,7 @@ export class TabBar {
     const tabKey = key ?? `tab-${nextIndex}`;
     const nextTabs = [...this.state.tabs, {
       tabKey,
+      tabPrefix: tab.prefix,
       ...rest
     }];
     this.setState({
@@ -38,6 +44,8 @@ export class TabBar {
     });
     if (tab.stack) {
       this.stacks[tabKey] = tab.stack;
+    } else if (tab.node) {
+      this.nodes[tabKey] = tab.node;
     } else if (tab.screen) {
       this.screens[tabKey] = tab.screen;
     }
@@ -102,8 +110,8 @@ export class TabBar {
   getActiveChildId() {
     const activeTab = this.state.tabs[this.state.index];
     if (!activeTab) return undefined;
-    const stack = this.stacks[activeTab.tabKey];
-    return stack?.getId();
+    const node = this.nodes[activeTab.tabKey] ?? this.stacks[activeTab.tabKey];
+    return node?.getId();
   }
   switchToRoute(routeId) {
     const idx = this.findTabIndexByRoute(routeId);
@@ -126,11 +134,11 @@ export class TabBar {
     const children = [];
     for (let idx = 0; idx < this.state.tabs.length; idx++) {
       const tab = this.state.tabs[idx];
-      const stack = tab ? this.stacks[tab.tabKey] : undefined;
-      if (stack) {
+      const node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
+      if (node) {
         children.push({
-          prefix: '',
-          node: stack,
+          prefix: tab?.tabPrefix ?? '',
+          node,
           onMatch: () => this.onIndexChange(idx)
         });
       }
@@ -150,6 +158,10 @@ export class TabBar {
   seed() {
     const activeTab = this.state.tabs[this.state.index];
     if (!activeTab) return null;
+    const node = this.nodes[activeTab.tabKey];
+    if (node) {
+      return node.seed?.() ?? null;
+    }
     const stack = this.stacks[activeTab.tabKey];
     if (!stack) return null;
     const firstRoute = stack.getFirstRoute();
@@ -163,9 +175,9 @@ export class TabBar {
   findTabIndexByRoute(routeId) {
     for (let i = 0; i < this.state.tabs.length; i++) {
       const tab = this.state.tabs[i];
-      const stack = tab && this.stacks[tab.tabKey];
-      if (!stack) continue;
-      const hasRoute = this.nodeHasRoute(stack, routeId);
+      const node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
+      if (!node) continue;
+      const hasRoute = this.nodeHasRoute(node, routeId);
       if (hasRoute) {
         return i;
       }

package/lib/module/styles.css

@@ -489,10 +489,25 @@
   position: relative;
 }
 
-.tab-stacks-container > .screen-stack {
+.tab-stacks-container > .screen-stack,
+.tab-stacks-container > .split-view-container {
   padding-bottom: calc(73px + env(safe-area-inset-bottom)); 
 }
 
+.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 +531,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 +601,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,13 +685,49 @@
   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 {
     flex-direction: row;
   }
 
-  .tab-stacks-container > .screen-stack {
+  .tab-stacks-container > .screen-stack,
+  .tab-stacks-container > .split-view-container {
     padding-bottom: 0;
     margin-left: 260px;
     min-width: 0;
@@ -660,10 +764,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/TabBar/TabBar.d.ts

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

package/package.json

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