@sigmela/router 0.2.1 → 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();

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/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/package.json

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