@greatapps/common 1.1.94 → 1.1.96

package/dist/components/layouts/AppMobileNavBar.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Image from "next/image";
 import { ProfilePopover } from "./ProfilePopover";
 import { useAccountModals } from "../../store/useAccountModals";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 function AppMobileNavBar({
   appIconActive = false,
   appIconIndicator = false,
@@ -17,26 +18,32 @@ function AppMobileNavBar({
   const { openConfigurations } = useAccountModals();
   return /* @__PURE__ */ jsxs("div", { className: "fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`,
-          onClick: onLogoClick,
-          children: [
-            /* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "GreatApps", width: 28, height: 28 }),
-            logoIndicator && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: `size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${appIconActive ? "bg-pages-300" : "bg-pages-50"} ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`,
-            onClick: onAppIconClick,
-            children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
+            className: `relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`,
+            onClick: onLogoClick,
+            children: [
+              /* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "GreatApps", width: 28, height: 28 }),
+              logoIndicator && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" })
+            ]
           }
-        ),
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "GreatApps" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${appIconActive ? "bg-pages-300" : "bg-pages-50"} ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`,
+              onClick: onAppIconClick,
+              children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "GreatPages" })
+        ] }),
         appIconIndicator && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl" })
       ] }),
       extraLeftSlot

package/dist/components/layouts/AppMobileNavBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Image from 'next/image';\nimport { ProfilePopover } from './ProfilePopover';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\n\nexport interface AppMobileNavBarProps {\n  appIconActive?: boolean;\n  /** Shows the colored indicator bar below the app icon */\n  appIconIndicator?: boolean;\n  /** Shows the gray indicator bar below the GreatApps logo */\n  logoIndicator?: boolean;\n  /** Called when the GreatApps logo is clicked */\n  onLogoClick?: () => void;\n  /** Called when the app icon (e.g. GreatPages) is clicked */\n  onAppIconClick?: () => void;\n  /** Extra slot rendered after the app icon (e.g. project selector) */\n  extraLeftSlot?: ReactNode;\n  /** Required: the right-side action element (toggle button, sheet button, etc.) */\n  rightActionSlot: ReactNode;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n  appIconActive = false,\n  appIconIndicator = false,\n  logoIndicator = false,\n  onLogoClick,\n  onAppIconClick,\n  extraLeftSlot,\n  rightActionSlot,\n  menuItems = [],\n  onCreditsClick,\n}: AppMobileNavBarProps) {\n  const { openConfigurations } = useAccountModals();\n\n  return (\n    <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n      <div className=\"flex items-center gap-1.5\">\n        <div\n          className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}\n          onClick={onLogoClick}\n        >\n          <Image src=\"/icons/great-icon.svg\" alt=\"GreatApps\" width={28} height={28} />\n          {logoIndicator && (\n            <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n          )}\n        </div>\n        <div className=\"relative\">\n          <div\n            className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${\n              appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n            } ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}\n            onClick={onAppIconClick}\n          >\n            <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n          </div>\n          {appIconIndicator && (\n            <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl\" />\n          )}\n        </div>\n        {extraLeftSlot}\n      </div>\n      <div className=\"flex items-center gap-1.5\">\n        <ProfilePopover\n          side=\"bottom\"\n          align=\"end\"\n          contentClassName=\"\"\n          onEditProfile={() => openConfigurations()}\n          onCreditsClick={onCreditsClick}\n          menuItems={menuItems}\n        />\n        {rightActionSlot}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA0CQ,SAIE,KAJF;AAvCR,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAqB1B,SAAS,gBAAgB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAyB;AACvB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,kFAAkF,cAAc,qCAAqC,EAAE;AAAA,UAClJ,SAAS;AAAA,UAET;AAAA,gCAAC,SAAM,KAAI,yBAAwB,KAAI,aAAY,OAAO,IAAI,QAAQ,IAAI;AAAA,YACzE,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA;AAAA;AAAA,MAE5G;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,sFACT,gBAAgB,iBAAiB,aACnC,IAAI,iBAAiB,oCAAoC,EAAE;AAAA,YAC3D,SAAS;AAAA,YAET,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,QAC9E;AAAA,QACC,oBACC,oBAAC,SAAI,WAAU,2FAA0F;AAAA,SAE7G;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,eAAe,MAAM,mBAAmB;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Image from 'next/image';\nimport { ProfilePopover } from './ProfilePopover';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\n\nexport interface AppMobileNavBarProps {\n  appIconActive?: boolean;\n  /** Shows the colored indicator bar below the app icon */\n  appIconIndicator?: boolean;\n  /** Shows the gray indicator bar below the GreatApps logo */\n  logoIndicator?: boolean;\n  /** Called when the GreatApps logo is clicked */\n  onLogoClick?: () => void;\n  /** Called when the app icon (e.g. GreatPages) is clicked */\n  onAppIconClick?: () => void;\n  /** Extra slot rendered after the app icon (e.g. project selector) */\n  extraLeftSlot?: ReactNode;\n  /** Required: the right-side action element (toggle button, sheet button, etc.) */\n  rightActionSlot: ReactNode;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n  appIconActive = false,\n  appIconIndicator = false,\n  logoIndicator = false,\n  onLogoClick,\n  onAppIconClick,\n  extraLeftSlot,\n  rightActionSlot,\n  menuItems = [],\n  onCreditsClick,\n}: AppMobileNavBarProps) {\n  const { openConfigurations } = useAccountModals();\n\n  return (\n    <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n      <div className=\"flex items-center gap-1.5\">\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <div\n              className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}\n              onClick={onLogoClick}\n            >\n              <Image src=\"/icons/great-icon.svg\" alt=\"GreatApps\" width={28} height={28} />\n              {logoIndicator && (\n                <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n              )}\n            </div>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">GreatApps</TooltipContent>\n        </Tooltip>\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <div\n                className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${\n                  appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n                } ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}\n                onClick={onAppIconClick}\n              >\n                <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">GreatPages</TooltipContent>\n          </Tooltip>\n          {appIconIndicator && (\n            <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl\" />\n          )}\n        </div>\n        {extraLeftSlot}\n      </div>\n      <div className=\"flex items-center gap-1.5\">\n        <ProfilePopover\n          side=\"bottom\"\n          align=\"end\"\n          contentClassName=\"\"\n          onEditProfile={() => openConfigurations()}\n          onCreditsClick={onCreditsClick}\n          menuItems={menuItems}\n        />\n        {rightActionSlot}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA6CY,SAIE,KAJF;AA1CZ,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAEjC,SAAS,SAAS,gBAAgB,sBAAsB;AAoBjD,SAAS,gBAAgB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAyB;AACvB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,2BAAC,WACC;AAAA,4BAAC,kBAAe,SAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,kFAAkF,cAAc,qCAAqC,EAAE;AAAA,YAClJ,SAAS;AAAA,YAET;AAAA,kCAAC,SAAM,KAAI,yBAAwB,KAAI,aAAY,OAAO,IAAI,QAAQ,IAAI;AAAA,cACzE,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA;AAAA;AAAA,QAE5G,GACF;AAAA,QACA,oBAAC,kBAAe,MAAK,UAAS,uBAAS;AAAA,SACzC;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,sFACT,gBAAgB,iBAAiB,aACnC,IAAI,iBAAiB,oCAAoC,EAAE;AAAA,cAC3D,SAAS;AAAA,cAET,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UAC9E,GACF;AAAA,UACA,oBAAC,kBAAe,MAAK,UAAS,wBAAU;AAAA,WAC1C;AAAA,QACC,oBACC,oBAAC,SAAI,WAAU,2FAA0F;AAAA,SAE7G;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,eAAe,MAAM,mBAAmB;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}

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.94",
+  "version": "1.1.96",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/layouts/AppMobileNavBar.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { ProfilePopover } from './ProfilePopover';
 import { useAccountModals } from '../../store/useAccountModals';
 import type { ProfileMenuItem } from './ProfilePopover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
 
 export interface AppMobileNavBarProps {
   appIconActive?: boolean;
@@ -40,24 +41,34 @@ export function AppMobileNavBar({
   return (
     <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
       <div className="flex items-center gap-1.5">
-        <div
-          className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}
-          onClick={onLogoClick}
-        >
-          <Image src="/icons/great-icon.svg" alt="GreatApps" width={28} height={28} />
-          {logoIndicator && (
-            <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
-          )}
-        </div>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}
+              onClick={onLogoClick}
+            >
+              <Image src="/icons/great-icon.svg" alt="GreatApps" width={28} height={28} />
+              {logoIndicator && (
+                <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
+              )}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">GreatApps</TooltipContent>
+        </Tooltip>
         <div className="relative">
-          <div
-            className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${
-              appIconActive ? 'bg-pages-300' : 'bg-pages-50'
-            } ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}
-            onClick={onAppIconClick}
-          >
-            <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
-          </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${
+                  appIconActive ? 'bg-pages-300' : 'bg-pages-50'
+                } ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}
+                onClick={onAppIconClick}
+              >
+                <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">GreatPages</TooltipContent>
+          </Tooltip>
           {appIconIndicator && (
             <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl" />
           )}

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>
   );
 }