@greatapps/common 1.1.95 → 1.1.96

package/dist/components/navigation/AppNavigation.mjs

@@ -10,12 +10,12 @@ import { ProjectSelector } from "./subcomponents/ProjectSelector";
 import { PlanCard } from "./subcomponents/PlanCard";
 import { CreditsCard } from "./subcomponents/CreditsCard";
 import { NavItemsContext } from "./NavItemsContext";
-function AppNavigationRoot({ children, mobileVariant = "sheet" }) {
+function AppNavigationRoot({ children, mobileVariant = "sheet", mobileTabsOffset }) {
   const [navItems, setNavItems] = useState([]);
   return /* @__PURE__ */ jsxs(NavItemsContext.Provider, { value: { navItems, setNavItems, mobileVariant }, children: [
     /* @__PURE__ */ jsx(DesktopShell, { children }),
     /* @__PURE__ */ jsx(MdShell, { children }),
-    mobileVariant === "sheet" ? /* @__PURE__ */ jsx(MobileShell, { children }) : /* @__PURE__ */ jsx(TabsMobileShell, { children })
+    mobileVariant === "sheet" ? /* @__PURE__ */ jsx(MobileShell, { children }) : /* @__PURE__ */ jsx(TabsMobileShell, { topOffset: mobileTabsOffset, children })
   ] });
 }
 const AppNavigation = Object.assign(AppNavigationRoot, {

package/dist/components/navigation/AppNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/navigation/AppNavigation.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { DesktopShell } from './shells/DesktopShell';\r\nimport { MdShell } from './shells/MdShell';\r\nimport { MobileShell } from './shells/MobileShell';\r\nimport { TabsMobileShell } from './shells/TabsMobileShell';\r\nimport { NavItems } from './subcomponents/NavItems';\r\nimport { ProjectSelector } from './subcomponents/ProjectSelector';\r\nimport { PlanCard } from './subcomponents/PlanCard';\r\nimport { CreditsCard } from './subcomponents/CreditsCard';\r\nimport { NavItemsContext } from './NavItemsContext';\r\nimport type { NavItemConfig } from './subcomponents/NavItems';\r\n\r\nexport type { NavItemConfig } from './subcomponents/NavItems';\r\nexport type { ProjectSelectorProps } from './subcomponents/ProjectSelector';\r\nexport type { PlanCardProps } from './subcomponents/PlanCard';\r\nexport type { CreditsCardProps } from './subcomponents/CreditsCard';\r\n\r\ninterface AppNavigationProps {\r\n  children: ReactNode;\r\n  mobileVariant?: 'sheet' | 'tabs';\r\n}\r\n\r\nfunction AppNavigationRoot({ children, mobileVariant = 'sheet' }: AppNavigationProps) {\r\n  const [navItems, setNavItems] = useState<NavItemConfig[]>([]);\r\n\r\n  return (\r\n    <NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>\r\n      <DesktopShell>{children}</DesktopShell>\r\n      <MdShell>{children}</MdShell>\r\n      {mobileVariant === 'sheet' ? (\r\n        <MobileShell>{children}</MobileShell>\r\n      ) : (\r\n        <TabsMobileShell>{children}</TabsMobileShell>\r\n      )}\r\n    </NavItemsContext.Provider>\r\n  );\r\n}\r\n\r\nexport const AppNavigation = Object.assign(AppNavigationRoot, {\r\n  NavItems,\r\n  ProjectSelector,\r\n  PlanCard,\r\n  CreditsCard,\r\n});\r\n"],"mappings":";AA4BI,SACE,KADF;AA1BJ,SAAoB,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAahC,SAAS,kBAAkB,EAAE,UAAU,gBAAgB,QAAQ,GAAuB;AACpF,QAAM,CAAC,UAAU,WAAW,IAAI,SAA0B,CAAC,CAAC;AAE5D,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,aAAa,cAAc,GACtE;AAAA,wBAAC,gBAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,UAAS;AAAA,IAClB,kBAAkB,UACjB,oBAAC,eAAa,UAAS,IAEvB,oBAAC,mBAAiB,UAAS;AAAA,KAE/B;AAEJ;AAEO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/navigation/AppNavigation.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { DesktopShell } from './shells/DesktopShell';\r\nimport { MdShell } from './shells/MdShell';\r\nimport { MobileShell } from './shells/MobileShell';\r\nimport { TabsMobileShell } from './shells/TabsMobileShell';\r\nimport { NavItems } from './subcomponents/NavItems';\r\nimport { ProjectSelector } from './subcomponents/ProjectSelector';\r\nimport { PlanCard } from './subcomponents/PlanCard';\r\nimport { CreditsCard } from './subcomponents/CreditsCard';\r\nimport { NavItemsContext } from './NavItemsContext';\r\nimport type { NavItemConfig } from './subcomponents/NavItems';\r\n\r\nexport type { NavItemConfig } from './subcomponents/NavItems';\r\nexport type { ProjectSelectorProps } from './subcomponents/ProjectSelector';\r\nexport type { PlanCardProps } from './subcomponents/PlanCard';\r\nexport type { CreditsCardProps } from './subcomponents/CreditsCard';\r\n\r\ninterface AppNavigationProps {\r\n  children: ReactNode;\r\n  mobileVariant?: 'sheet' | 'tabs';\r\n  mobileTabsOffset?: string;\r\n}\r\n\r\nfunction AppNavigationRoot({ children, mobileVariant = 'sheet', mobileTabsOffset }: AppNavigationProps) {\r\n  const [navItems, setNavItems] = useState<NavItemConfig[]>([]);\r\n\r\n  return (\r\n    <NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>\r\n      <DesktopShell>{children}</DesktopShell>\r\n      <MdShell>{children}</MdShell>\r\n      {mobileVariant === 'sheet' ? (\r\n        <MobileShell>{children}</MobileShell>\r\n      ) : (\r\n        <TabsMobileShell topOffset={mobileTabsOffset}>{children}</TabsMobileShell>\r\n      )}\r\n    </NavItemsContext.Provider>\r\n  );\r\n}\r\n\r\nexport const AppNavigation = Object.assign(AppNavigationRoot, {\r\n  NavItems,\r\n  ProjectSelector,\r\n  PlanCard,\r\n  CreditsCard,\r\n});\r\n"],"mappings":";AA6BI,SACE,KADF;AA3BJ,SAAoB,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAchC,SAAS,kBAAkB,EAAE,UAAU,gBAAgB,SAAS,iBAAiB,GAAuB;AACtG,QAAM,CAAC,UAAU,WAAW,IAAI,SAA0B,CAAC,CAAC;AAE5D,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,aAAa,cAAc,GACtE;AAAA,wBAAC,gBAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,UAAS;AAAA,IAClB,kBAAkB,UACjB,oBAAC,eAAa,UAAS,IAEvB,oBAAC,mBAAgB,WAAW,kBAAmB,UAAS;AAAA,KAE5D;AAEJ;AAEO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;","names":[]}

package/dist/components/navigation/shells/TabsMobileShell.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { AppNavigationContext } from "../AppNavigationContext";
 import { useNavItemsContext } from "../NavItemsContext";
-function InternalTabsBar() {
+function InternalTabsBar({ topOffset = "72px" }) {
   const { navItems } = useNavItemsContext();
   const tabsListRef = useRef(null);
   const activeTabRef = useRef(null);
@@ -23,7 +23,8 @@ function InternalTabsBar() {
     "div",
     {
       ref: tabsListRef,
-      className: "md:hidden fixed top-[72px] left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide",
+      className: "md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide",
+      style: { top: topOffset },
       children: navItems.map((item) => /* @__PURE__ */ jsxs(
         "button",
         {
@@ -46,10 +47,10 @@ function InternalTabsBar() {
     }
   );
 }
-function TabsMobileShell({ children }) {
+function TabsMobileShell({ children, topOffset }) {
   return /* @__PURE__ */ jsxs(AppNavigationContext.Provider, { value: { breakpoint: "mobile" }, children: [
     /* @__PURE__ */ jsx("div", { className: "hidden", children }),
-    /* @__PURE__ */ jsx(InternalTabsBar, {})
+    /* @__PURE__ */ jsx(InternalTabsBar, { topOffset })
   ] });
 }
 export {

package/dist/components/navigation/shells/TabsMobileShell.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/navigation/shells/TabsMobileShell.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useRef, useEffect } from 'react';\nimport { AppNavigationContext } from '../AppNavigationContext';\nimport { useNavItemsContext } from '../NavItemsContext';\n\nfunction InternalTabsBar() {\n  const { navItems } = useNavItemsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const activeTabRef = useRef<HTMLButtonElement>(null);\n\n  const activeLabel = navItems.find((i) => i.isActive)?.label;\n\n  // Scroll active tab into center when active item changes\n  useEffect(() => {\n    if (activeTabRef.current && tabsListRef.current) {\n      const tabsList = tabsListRef.current;\n      const activeTabElement = activeTabRef.current;\n      const tabsListRect = tabsList.getBoundingClientRect();\n      const activeTabRect = activeTabElement.getBoundingClientRect();\n      const scrollLeft =\n        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;\n      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });\n    }\n  }, [activeLabel]);\n\n  if (!navItems.length) return null;\n\n  return (\n    <div\n      ref={tabsListRef}\n      className=\"md:hidden fixed top-[72px] left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide\"\n    >\n      {navItems.map((item) => (\n        <button\n          key={item.label}\n          ref={item.isActive ? activeTabRef : undefined}\n          onClick={item.onClick}\n          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${\n            item.isActive\n              ? 'border-gray-950 text-gray-950'\n              : 'border-transparent text-gray-500 hover:text-gray-900'\n          }`}\n        >\n          {item.icon && <item.icon size={16} className=\"shrink-0\" />}\n          <span\n            className={\n              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'\n            }\n          >\n            {item.label}\n          </span>\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport function TabsMobileShell({ children }: { children: ReactNode }) {\n  return (\n    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>\n      {/*\n        Children are hidden visually, but NavItems' useEffect still fires inside\n        display:none — React effects are tied to commit phase, not layout visibility.\n        This registers navItems in NavItemsContext so InternalTabsBar can read them.\n      */}\n      <div className=\"hidden\">{children}</div>\n      <InternalTabsBar />\n    </AppNavigationContext.Provider>\n  );\n}\n"],"mappings":";AAkCQ,SAUgB,KAVhB;AAhCR,SAAoB,QAAQ,iBAAiB;AAC7C,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AACzB,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,eAAe,OAA0B,IAAI;AAEnD,QAAM,cAAc,SAAS,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AAGtD,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,YAAY,SAAS;AAC/C,YAAM,WAAW,YAAY;AAC7B,YAAM,mBAAmB,aAAa;AACtC,YAAM,eAAe,SAAS,sBAAsB;AACpD,YAAM,gBAAgB,iBAAiB,sBAAsB;AAC7D,YAAM,aACJ,iBAAiB,aAAa,aAAa,QAAQ,IAAI,cAAc,QAAQ;AAC/E,eAAS,SAAS,EAAE,MAAM,KAAK,IAAI,GAAG,UAAU,GAAG,UAAU,SAAS,CAAC;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,MAAI,CAAC,SAAS,OAAQ,QAAO;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MAET,mBAAS,IAAI,CAAC,SACb;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,KAAK,WAAW,eAAe;AAAA,UACpC,SAAS,KAAK;AAAA,UACd,WAAW,2EACT,KAAK,WACD,kCACA,sDACN;AAAA,UAEC;AAAA,iBAAK,QAAQ,oBAAC,KAAK,MAAL,EAAU,MAAM,IAAI,WAAU,YAAW;AAAA,YACxD;AAAA,cAAC;AAAA;AAAA,gBACC,WACE,KAAK,WAAW,6BAA6B;AAAA,gBAG9C,eAAK;AAAA;AAAA,YACR;AAAA;AAAA;AAAA,QAhBK,KAAK;AAAA,MAiBZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,gBAAgB,EAAE,SAAS,GAA4B;AACrE,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,SAAS,GAM3D;AAAA,wBAAC,SAAI,WAAU,UAAU,UAAS;AAAA,IAClC,oBAAC,mBAAgB;AAAA,KACnB;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/navigation/shells/TabsMobileShell.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useRef, useEffect } from 'react';\nimport { AppNavigationContext } from '../AppNavigationContext';\nimport { useNavItemsContext } from '../NavItemsContext';\n\nfunction InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {\n  const { navItems } = useNavItemsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const activeTabRef = useRef<HTMLButtonElement>(null);\n\n  const activeLabel = navItems.find((i) => i.isActive)?.label;\n\n  // Scroll active tab into center when active item changes\n  useEffect(() => {\n    if (activeTabRef.current && tabsListRef.current) {\n      const tabsList = tabsListRef.current;\n      const activeTabElement = activeTabRef.current;\n      const tabsListRect = tabsList.getBoundingClientRect();\n      const activeTabRect = activeTabElement.getBoundingClientRect();\n      const scrollLeft =\n        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;\n      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });\n    }\n  }, [activeLabel]);\n\n  if (!navItems.length) return null;\n\n  return (\n    <div\n      ref={tabsListRef}\n      className=\"md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide\"\n      style={{ top: topOffset }}\n    >\n      {navItems.map((item) => (\n        <button\n          key={item.label}\n          ref={item.isActive ? activeTabRef : undefined}\n          onClick={item.onClick}\n          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${\n            item.isActive\n              ? 'border-gray-950 text-gray-950'\n              : 'border-transparent text-gray-500 hover:text-gray-900'\n          }`}\n        >\n          {item.icon && <item.icon size={16} className=\"shrink-0\" />}\n          <span\n            className={\n              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'\n            }\n          >\n            {item.label}\n          </span>\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {\n  return (\n    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>\n      {/*\n        Children are hidden visually, but NavItems' useEffect still fires inside\n        display:none — React effects are tied to commit phase, not layout visibility.\n        This registers navItems in NavItemsContext so InternalTabsBar can read them.\n      */}\n      <div className=\"hidden\">{children}</div>\n      <InternalTabsBar topOffset={topOffset} />\n    </AppNavigationContext.Provider>\n  );\n}\n"],"mappings":";AAmCQ,SAUgB,KAVhB;AAjCR,SAAoB,QAAQ,iBAAiB;AAC7C,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAEnC,SAAS,gBAAgB,EAAE,YAAY,OAAO,GAA2B;AACvE,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,eAAe,OAA0B,IAAI;AAEnD,QAAM,cAAc,SAAS,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AAGtD,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,YAAY,SAAS;AAC/C,YAAM,WAAW,YAAY;AAC7B,YAAM,mBAAmB,aAAa;AACtC,YAAM,eAAe,SAAS,sBAAsB;AACpD,YAAM,gBAAgB,iBAAiB,sBAAsB;AAC7D,YAAM,aACJ,iBAAiB,aAAa,aAAa,QAAQ,IAAI,cAAc,QAAQ;AAC/E,eAAS,SAAS,EAAE,MAAM,KAAK,IAAI,GAAG,UAAU,GAAG,UAAU,SAAS,CAAC;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,MAAI,CAAC,SAAS,OAAQ,QAAO;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO,EAAE,KAAK,UAAU;AAAA,MAEvB,mBAAS,IAAI,CAAC,SACb;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,KAAK,WAAW,eAAe;AAAA,UACpC,SAAS,KAAK;AAAA,UACd,WAAW,2EACT,KAAK,WACD,kCACA,sDACN;AAAA,UAEC;AAAA,iBAAK,QAAQ,oBAAC,KAAK,MAAL,EAAU,MAAM,IAAI,WAAU,YAAW;AAAA,YACxD;AAAA,cAAC;AAAA;AAAA,gBACC,WACE,KAAK,WAAW,6BAA6B;AAAA,gBAG9C,eAAK;AAAA;AAAA,YACR;AAAA;AAAA;AAAA,QAhBK,KAAK;AAAA,MAiBZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,gBAAgB,EAAE,UAAU,UAAU,GAAgD;AACpG,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,SAAS,GAM3D;AAAA,wBAAC,SAAI,WAAU,UAAU,UAAS;AAAA,IAClC,oBAAC,mBAAgB,WAAsB;AAAA,KACzC;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.95",
+  "version": "1.1.96",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/navigation/AppNavigation.tsx

@@ -20,9 +20,10 @@ export type { CreditsCardProps } from './subcomponents/CreditsCard';
 interface AppNavigationProps {
   children: ReactNode;
   mobileVariant?: 'sheet' | 'tabs';
+  mobileTabsOffset?: string;
 }
 
-function AppNavigationRoot({ children, mobileVariant = 'sheet' }: AppNavigationProps) {
+function AppNavigationRoot({ children, mobileVariant = 'sheet', mobileTabsOffset }: AppNavigationProps) {
   const [navItems, setNavItems] = useState<NavItemConfig[]>([]);
 
   return (
@@ -32,7 +33,7 @@ function AppNavigationRoot({ children, mobileVariant = 'sheet' }: AppNavigationP
       {mobileVariant === 'sheet' ? (
         <MobileShell>{children}</MobileShell>
       ) : (
-        <TabsMobileShell>{children}</TabsMobileShell>
+        <TabsMobileShell topOffset={mobileTabsOffset}>{children}</TabsMobileShell>
       )}
     </NavItemsContext.Provider>
   );

package/src/components/navigation/shells/TabsMobileShell.tsx

@@ -4,7 +4,7 @@ import { ReactNode, useRef, useEffect } from 'react';
 import { AppNavigationContext } from '../AppNavigationContext';
 import { useNavItemsContext } from '../NavItemsContext';
 
-function InternalTabsBar() {
+function InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {
   const { navItems } = useNavItemsContext();
   const tabsListRef = useRef<HTMLDivElement>(null);
   const activeTabRef = useRef<HTMLButtonElement>(null);
@@ -29,7 +29,8 @@ function InternalTabsBar() {
   return (
     <div
       ref={tabsListRef}
-      className="md:hidden fixed top-[72px] left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
+      className="md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
+      style={{ top: topOffset }}
     >
       {navItems.map((item) => (
         <button
@@ -56,7 +57,7 @@ function InternalTabsBar() {
   );
 }
 
-export function TabsMobileShell({ children }: { children: ReactNode }) {
+export function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {
   return (
     <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>
       {/*
@@ -65,7 +66,7 @@ export function TabsMobileShell({ children }: { children: ReactNode }) {
         This registers navItems in NavItemsContext so InternalTabsBar can read them.
       */}
       <div className="hidden">{children}</div>
-      <InternalTabsBar />
+      <InternalTabsBar topOffset={topOffset} />
     </AppNavigationContext.Provider>
   );
 }