@fluid-app/rep-sdk 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -1,15 +1,16 @@
 'use strict';
 
-var chunkV3IMQZIG_cjs = require('./chunk-V3IMQZIG.cjs');
+var chunkW37C774B_cjs = require('./chunk-W37C774B.cjs');
 var chunkEOXYOOWS_cjs = require('./chunk-EOXYOOWS.cjs');
 var chunkFG2CI6HA_cjs = require('./chunk-FG2CI6HA.cjs');
 var chunkMHPK7YQ2_cjs = require('./chunk-MHPK7YQ2.cjs');
 var chunk5UBEM3AX_cjs = require('./chunk-5UBEM3AX.cjs');
 var chunkB6S6BEPL_cjs = require('./chunk-B6S6BEPL.cjs');
 require('./chunk-HDQ2JUQT.cjs');
-var react = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
+var auth = require('@fluid-app/auth');
 var types = require('@fluid-app/rep-core/types');
 var widgets = require('@fluid-app/rep-widgets/widgets');
 var widgetUtils = require('@fluid-app/rep-core/widget-utils');
@@ -17,10 +18,12 @@ var registries = require('@fluid-app/rep-core/registries');
 var AppShellLayout = require('@fluid-app/rep-core/shell/AppShellLayout');
 var ThemeModeContext = require('@fluid-app/rep-core/shell/ThemeModeContext');
 var systemNavigationItems = require('@fluid-app/rep-core/navigation/system-navigation-items');
-var theme = require('@fluid-app/rep-core/theme');
-var sidebar = require('@fluid-app/rep-core/shell/sidebar');
-var RepIcon = require('@fluid-app/rep-core/components/RepIcon');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
+var faEllipsis = require('@fortawesome/pro-regular-svg-icons/faEllipsis');
+var faXmark = require('@fortawesome/pro-regular-svg-icons/faXmark');
+var RepIcon = require('@fluid-app/rep-core/components/RepIcon');
+var sidebar = require('@fluid-app/rep-core/shell/sidebar');
+var theme = require('@fluid-app/rep-core/theme');
 var faBars = require('@fortawesome/pro-regular-svg-icons/faBars');
 var faSun = require('@fortawesome/pro-regular-svg-icons/faSun');
 var faMoon = require('@fortawesome/pro-regular-svg-icons/faMoon');
@@ -28,6 +31,26 @@ var faTableCellsLarge = require('@fortawesome/pro-regular-svg-icons/faTableCells
 var DataAwareWidget = require('@fluid-app/rep-core/data-sources/DataAwareWidget');
 var contexts = require('@fluid-app/rep-widgets/contexts');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
 // src/types/page-template.ts
 var PAGE_CATEGORIES = {
   CORE: "core",
@@ -244,16 +267,16 @@ function validateNavigationPages(navigation) {
   };
 }
 var EMPTY_TEMPLATES = [];
-var PageTemplateContext = react.createContext(
+var PageTemplateContext = React2.createContext(
   null
 );
 function PageTemplateProvider({
   children,
   templates = EMPTY_TEMPLATES
 }) {
-  const registeredIds = react.useRef([]);
+  const registeredIds = React2.useRef([]);
   const templateKey = templates.map((t) => t.id).join(",");
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const registered = [];
     for (const template of templates) {
       if (!PageTemplateRegistry.has(template.id)) {
@@ -276,7 +299,7 @@ function PageTemplateProvider({
       registeredIds.current = [];
     };
   }, [templateKey]);
-  const contextValue = react.useMemo(
+  const contextValue = React2.useMemo(
     () => ({
       resolvePages: resolveNavigationPages,
       listTemplates: () => PageTemplateRegistry.listAll(),
@@ -288,7 +311,7 @@ function PageTemplateProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(PageTemplateContext.Provider, { value: contextValue, children });
 }
 function usePageTemplates() {
-  const context = react.useContext(PageTemplateContext);
+  const context = React2.useContext(PageTemplateContext);
   if (!context) {
     throw new Error(
       "usePageTemplates must be used within a PageTemplateProvider"
@@ -298,11 +321,11 @@ function usePageTemplates() {
 }
 function useResolvedPages(navigation) {
   const { resolvePages } = usePageTemplates();
-  return react.useMemo(() => resolvePages(navigation), [resolvePages, navigation]);
+  return React2.useMemo(() => resolvePages(navigation), [resolvePages, navigation]);
 }
 var PROFILE_QUERY_KEY = ["fluid", "profile"];
 function useFluidProfile() {
-  const api = chunkV3IMQZIG_cjs.useFluidApi();
+  const api = chunkW37C774B_cjs.useFluidApi();
   return reactQuery.useQuery({
     queryKey: PROFILE_QUERY_KEY,
     queryFn: () => api.profile.get()
@@ -855,24 +878,24 @@ function createPersister() {
 var APP_DATA_QUERY_KEY = ["fluid", "app"];
 var appDataPersister = typeof window !== "undefined" ? createPersister() : void 0;
 function useFluidApp(options) {
-  const api = chunkV3IMQZIG_cjs.useFluidApi();
+  const api = chunkW37C774B_cjs.useFluidApi();
   return reactQuery.useQuery({
     queryKey: APP_DATA_QUERY_KEY,
     queryFn: () => api.app.getRaw(),
-    select: chunkV3IMQZIG_cjs.transformManifestToRepAppData,
+    select: chunkW37C774B_cjs.transformManifestToRepAppData,
     ...appDataPersister && { persister: appDataPersister.persisterFn },
     ...options?.enabled !== void 0 && { enabled: options.enabled }
   });
 }
 var PERMISSIONS_QUERY_KEY = ["fluid", "permissions"];
 function useFluidPermissions() {
-  const api = chunkV3IMQZIG_cjs.useFluidApi();
+  const api = chunkW37C774B_cjs.useFluidApi();
   const query = reactQuery.useQuery({
     queryKey: PERMISSIONS_QUERY_KEY,
     queryFn: () => api.permissions.get()
   });
   const permissions = query.data;
-  const can = react.useMemo(() => {
+  const can = React2.useMemo(() => {
     return (resource, action = "view") => {
       if (!permissions) {
         return false;
@@ -898,7 +921,7 @@ function useFluidPermissions() {
 
 // src/hooks/use-fluid-theme.ts
 function useFluidTheme() {
-  const { currentTheme, setTheme, setThemeMode, mode } = chunkV3IMQZIG_cjs.useThemeContext();
+  const { currentTheme, setTheme, setThemeMode, mode } = chunkW37C774B_cjs.useThemeContext();
   return {
     currentTheme,
     setTheme,
@@ -908,7 +931,7 @@ function useFluidTheme() {
 }
 var CURRENT_REP_QUERY_KEY = ["fluid", "currentRep"];
 function useCurrentRep() {
-  const api = chunkV3IMQZIG_cjs.useFluidApi();
+  const api = chunkW37C774B_cjs.useFluidApi();
   return reactQuery.useQuery({
     queryKey: CURRENT_REP_QUERY_KEY,
     queryFn: () => api.reps.current()
@@ -917,7 +940,7 @@ function useCurrentRep() {
 
 // src/hooks/use-fluid-auth.ts
 function useFluidAuth() {
-  return chunkV3IMQZIG_cjs.useFluidAuthContext();
+  return chunkW37C774B_cjs.useFluidAuthContext();
 }
 
 // src/hooks/demo-data/calendar-events.ts
@@ -1588,7 +1611,7 @@ function ensureSpinStyle() {
   document.head.appendChild(style);
 }
 function AuthLoading() {
-  react.useEffect(() => {
+  React2.useEffect(() => {
     ensureSpinStyle();
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1649,7 +1672,7 @@ function RequireAuth({
 
 // src/screens/index.ts
 var screenPropertySchemas = {
-  MessagingScreen: () => import('./MessagingScreen-UPFXQZV3.cjs').then((m) => m.messagingScreenPropertySchema),
+  MessagingScreen: () => import('./MessagingScreen-PLRU75YQ.cjs').then((m) => m.messagingScreenPropertySchema),
   ContactsScreen: () => import('./ContactsScreen-ATASCZO2.cjs').then((m) => m.contactsScreenPropertySchema),
   OrdersScreen: () => import('./OrdersScreen-X7FYUROL.cjs').then((m) => m.ordersScreenPropertySchema),
   CustomersScreen: () => import('./CustomersScreen-XMPMKSQA.cjs').then((m) => m.customersScreenPropertySchema),
@@ -1755,6 +1778,113 @@ function registerCorePageTemplates() {
   });
 }
 registerCorePageTemplates();
+function isInSection(item, currentSlug) {
+  const normalized = systemNavigationItems.normalizeSlug(currentSlug);
+  if (systemNavigationItems.normalizeSlug(item.slug) === normalized) return true;
+  return item.children?.some((child) => systemNavigationItems.normalizeSlug(child.slug) === normalized) ?? false;
+}
+function getNavTarget(item) {
+  if (item.slug && (!item.children || item.children.length === 0)) {
+    return systemNavigationItems.normalizeSlug(item.slug);
+  }
+  if (item.children && item.children.length > 0) {
+    const firstChild = item.children[0];
+    if (firstChild?.slug) return systemNavigationItems.normalizeSlug(firstChild.slug);
+  }
+  return null;
+}
+function SdkBottomNav({
+  navItems,
+  currentSlug,
+  onNavigate,
+  maxVisibleItems = 5
+}) {
+  const { isMobile, useBottomNav } = sidebar.useSidebar();
+  const [moreOpen, setMoreOpen] = React2__namespace.useState(false);
+  if (!isMobile || !useBottomNav) return null;
+  const navigableItems = navItems.filter((item) => !item.parent_id).filter((item) => item.slug || item.children && item.children.length > 0);
+  const hasOverflow = navigableItems.length > maxVisibleItems;
+  const visibleItems = hasOverflow ? navigableItems.slice(0, maxVisibleItems - 1) : navigableItems;
+  const overflowItems = hasOverflow ? navigableItems.slice(maxVisibleItems - 1) : [];
+  const handleItemClick = (item) => {
+    const target = getNavTarget(item);
+    if (target) onNavigate(target);
+    setMoreOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "fixed right-0 bottom-0 left-0 z-40 flex h-16 items-end justify-around border-t border-border bg-sidebar pb-[env(safe-area-inset-bottom)]", children: [
+      visibleItems.map((item) => {
+        const isActive = isInSection(item, currentSlug);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleItemClick(item),
+            className: `flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[10px] font-medium transition-colors ${isActive ? "text-primary" : "text-muted-foreground"}`,
+            children: [
+              item.icon ? /* @__PURE__ */ jsxRuntime.jsx(RepIcon.RepIcon, { name: item.icon, className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[72px] truncate", children: item.label })
+            ]
+          },
+          item.id ?? item.slug ?? item.label
+        );
+      }),
+      hasOverflow && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMoreOpen(true),
+          className: `flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[10px] font-medium transition-colors ${overflowItems.some((item) => isInSection(item, currentSlug)) ? "text-primary" : "text-muted-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faEllipsis.faEllipsis, className: "size-5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "More" })
+          ]
+        }
+      )
+    ] }),
+    moreOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "flex-1 bg-black/50",
+          onClick: () => setMoreOpen(false),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-t-2xl bg-sidebar pb-[env(safe-area-inset-bottom)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-4 pb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: "More" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setMoreOpen(false),
+              className: "flex items-center justify-center rounded-full p-1 text-muted-foreground hover:bg-sidebar-accent",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faXmark.faXmark, className: "size-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-4", children: overflowItems.map((item) => {
+          const isActive = isInSection(item, currentSlug);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleItemClick(item),
+              className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${isActive ? "bg-sidebar-primary text-sidebar-primary-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"}`,
+              children: [
+                item.icon && /* @__PURE__ */ jsxRuntime.jsx(RepIcon.RepIcon, { name: item.icon, className: "size-5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+              ]
+            },
+            item.id ?? item.slug ?? item.label
+          );
+        }) })
+      ] })
+    ] })
+  ] });
+}
 var SPIN_STYLE_ID2 = "fluid-app-shell-loading-spin";
 function ensureSpinStyle2() {
   if (typeof document === "undefined") return;
@@ -1765,7 +1895,7 @@ function ensureSpinStyle2() {
   document.head.appendChild(style);
 }
 function AppShellLoading() {
-  react.useEffect(() => {
+  React2.useEffect(() => {
     ensureSpinStyle2();
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1877,11 +2007,11 @@ function SdkNavigation({
   }) });
 }
 function QuickLinksDropdown({ onNavigate }) {
-  const [open, setOpen] = react.useState(false);
-  const panelRef = react.useRef(null);
-  const buttonRef = react.useRef(null);
-  const close = react.useCallback(() => setOpen(false), []);
-  react.useEffect(() => {
+  const [open, setOpen] = React2.useState(false);
+  const panelRef = React2.useRef(null);
+  const buttonRef = React2.useRef(null);
+  const close = React2.useCallback(() => setOpen(false), []);
+  React2.useEffect(() => {
     if (!open) return;
     const handleMouseDown = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) {
@@ -1961,6 +2091,7 @@ function QuickLinksDropdown({ onNavigate }) {
 }
 function SdkHeader({
   tabs,
+  mobileTabs,
   currentSlug,
   onNavigate,
   navSlugs
@@ -1970,8 +2101,9 @@ function SdkHeader({
   const match = matchSlugPrefix(currentSlug, navSlugs);
   const baseSlug = match?.matchedSlug ?? systemNavigationItems.normalizeSlug(currentSlug);
   const themeIcon = themeMode.mode === "dark" ? faMoon.faMoon : faSun.faSun;
+  const activeTabs = sidebar$1.isMobile && sidebar$1.useBottomNav && mobileTabs ? mobileTabs : tabs;
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-[52px] shrink-0 items-center gap-2 bg-sidebar px-6", children: [
-    sidebar$1.isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+    sidebar$1.isMobile && !sidebar$1.useBottomNav && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1981,7 +2113,7 @@ function SdkHeader({
         children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faBars.faBars, className: "size-5" })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "scrollbar-none flex flex-1 items-center gap-1 overflow-x-auto", children: tabs.map((tab) => {
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "scrollbar-none flex flex-1 items-center gap-1 overflow-x-auto", children: activeTabs.map((tab) => {
       const tabSlug = systemNavigationItems.normalizeSlug(tab.slug);
       if (!tabSlug) return null;
       const isActive = tabSlug === baseSlug;
@@ -2040,9 +2172,9 @@ function BuilderScreenViewImpl({ screen, className }) {
     );
   }) });
 }
-var BuilderScreenView = react.memo(BuilderScreenViewImpl);
+var BuilderScreenView = React2.memo(BuilderScreenViewImpl);
 var SYSTEM_SLUG_SCREEN_MAP = {
-  messages: chunkV3IMQZIG_cjs.MessagingScreen,
+  messages: chunkW37C774B_cjs.MessagingScreen,
   contacts: chunkEOXYOOWS_cjs.ContactsScreen,
   shop: chunkFG2CI6HA_cjs.OrdersScreen,
   customers: chunkMHPK7YQ2_cjs.CustomersScreen,
@@ -2056,15 +2188,15 @@ function PageRouter({
   baseSlug,
   restParams
 }) {
-  const screenById = react.useMemo(() => {
+  const screenById = React2.useMemo(() => {
     if (!screens || screens.length === 0) return void 0;
     return new Map(screens.map((s) => [s.id, s]));
   }, [screens]);
-  const screenBySlug = react.useMemo(() => {
+  const screenBySlug = React2.useMemo(() => {
     if (!screens || screens.length === 0) return void 0;
     return new Map(screens.filter((s) => s.slug).map((s) => [s.slug, s]));
   }, [screens]);
-  const builderScreen = react.useMemo(() => {
+  const builderScreen = React2.useMemo(() => {
     if (currentNavItem?.screen_id && screenById) {
       const byId = screenById.get(currentNavItem.screen_id);
       if (byId) return byId;
@@ -2102,7 +2234,7 @@ function PageRouter({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(chunkB6S6BEPL_cjs.CoreScreenPlaceholder, { name: currentNavItem?.label ?? currentSlug });
 }
-var AppNavigationContext = react.createContext(
+var AppNavigationContext = React2.createContext(
   null
 );
 function AppNavigationProvider({
@@ -2111,20 +2243,20 @@ function AppNavigationProvider({
   navigate,
   children
 }) {
-  const buildHref = react.useMemo(() => {
+  const buildHref = React2.useMemo(() => {
     return (slug) => {
       if (basePath === "/") return `/${slug}`;
       return `${basePath}/${slug}`;
     };
   }, [basePath]);
-  const value = react.useMemo(
+  const value = React2.useMemo(
     () => ({ currentSlug, basePath, navigate, buildHref }),
     [currentSlug, basePath, navigate, buildHref]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AppNavigationContext.Provider, { value, children });
 }
 function useAppNavigation() {
-  const ctx = react.useContext(AppNavigationContext);
+  const ctx = React2.useContext(AppNavigationContext);
   if (!ctx) {
     throw new Error(
       "useAppNavigation must be used within an <AppShell> or <AppNavigationProvider>"
@@ -2192,7 +2324,7 @@ function AppShell({
   sidebarFooter,
   children
 }) {
-  const normalizedBasePath = react.useMemo(() => {
+  const normalizedBasePath = React2.useMemo(() => {
     const stripped = basePath.replace(/^\/|\/$/g, "");
     return stripped ? `/${stripped}` : "/";
   }, [basePath]);
@@ -2200,13 +2332,13 @@ function AppShell({
     enabled: !appDataProp
   });
   const appData = appDataProp ?? fetchedAppData;
-  const activeTheme = react.useMemo(() => {
+  const activeTheme = React2.useMemo(() => {
     if (!appData?.profile?.themes?.length) return void 0;
     const themes = appData.profile.themes;
     const activeId = appData.profile.activeThemeId;
     return activeId ? themes.find((t) => t.id === activeId) ?? themes[0] : themes[0];
   }, [appData?.profile?.themes, appData?.profile?.activeThemeId]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!activeTheme) return;
     const resolved = theme.resolveTheme(activeTheme);
     theme.applyTheme(resolved);
@@ -2214,29 +2346,34 @@ function AppShell({
       theme.removeAllThemes();
     };
   }, [activeTheme]);
-  const navItems = react.useMemo(() => {
+  const navItems = React2.useMemo(() => {
     if (navigationProp) return navigationProp;
     const profileNav = appData?.profile?.navigation?.navigation_items;
     if (profileNav && profileNav.length > 0) return profileNav;
     return DEFAULT_NAVIGATION;
   }, [navigationProp, appData?.profile?.navigation?.navigation_items]);
+  const mobileNavItems = React2.useMemo(() => {
+    const mobileNav = appData?.profile?.mobile_navigation?.navigation_items;
+    if (mobileNav && mobileNav.length > 0) return mobileNav;
+    return navItems;
+  }, [appData?.profile?.mobile_navigation?.navigation_items, navItems]);
   const screens = appData?.screens;
-  const navSlugs = react.useMemo(() => collectNavSlugs(navItems), [navItems]);
-  const [themeMode, setThemeMode] = react.useState(getInitialThemeMode);
-  const handleThemeModeChange = react.useCallback((mode) => {
+  const navSlugs = React2.useMemo(() => collectNavSlugs(navItems), [navItems]);
+  const [themeMode, setThemeMode] = React2.useState(getInitialThemeMode);
+  const handleThemeModeChange = React2.useCallback((mode) => {
     setThemeMode(mode);
     if (typeof window !== "undefined") {
       localStorage.setItem(THEME_STORAGE_KEY, mode);
     }
   }, []);
-  const [pathSlug, setPathSlug] = react.useState(() => {
+  const [pathSlug, setPathSlug] = React2.useState(() => {
     if (typeof window === "undefined") return "";
     return extractSlugFromPathname(
       window.location.pathname,
       normalizedBasePath
     );
   });
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (controlledSlug !== void 0) return;
     if (typeof window === "undefined") return;
     const currentPath = extractSlugFromPathname(
@@ -2252,7 +2389,7 @@ function AppShell({
       }
     }
   }, [navItems, controlledSlug, normalizedBasePath]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (controlledSlug !== void 0) return;
     const handlePopState = () => {
       const slug = extractSlugFromPathname(
@@ -2265,7 +2402,7 @@ function AppShell({
     return () => window.removeEventListener("popstate", handlePopState);
   }, [controlledSlug, normalizedBasePath]);
   const activeSlug = controlledSlug ?? pathSlug;
-  const handleNavigate = react.useCallback(
+  const handleNavigate = React2.useCallback(
     (slug) => {
       if (onNavigateProp) {
         onNavigateProp(slug);
@@ -2277,7 +2414,7 @@ function AppShell({
     },
     [onNavigateProp, normalizedBasePath]
   );
-  const slugMatch = react.useMemo(
+  const slugMatch = React2.useMemo(
     () => matchSlugPrefix(activeSlug, navSlugs),
     [activeSlug, navSlugs]
   );
@@ -2285,6 +2422,8 @@ function AppShell({
   const restParams = slugMatch?.rest ?? "";
   const currentSection = findCurrentSection(navItems, baseSlug);
   const secondLevelTabs = currentSection?.children ?? [];
+  const mobileCurrentSection = findCurrentSection(mobileNavItems, baseSlug);
+  const mobileSecondLevelTabs = mobileCurrentSection?.children ?? [];
   const currentNavItem = findNavItem(navItems, baseSlug);
   const content = typeof children === "function" ? children({ currentSlug: activeSlug, currentNavItem }) : children ?? /* @__PURE__ */ jsxRuntime.jsx(
     PageRouter,
@@ -2333,6 +2472,7 @@ function AppShell({
                     SdkHeader,
                     {
                       tabs: secondLevelTabs,
+                      mobileTabs: mobileSecondLevelTabs,
                       currentSlug: activeSlug,
                       onNavigate: handleNavigate,
                       navSlugs
@@ -2340,6 +2480,15 @@ function AppShell({
                   ),
                   sidebarHeader,
                   sidebarFooter,
+                  useBottomNav: true,
+                  afterContent: /* @__PURE__ */ jsxRuntime.jsx(
+                    SdkBottomNav,
+                    {
+                      navItems: mobileNavItems,
+                      currentSlug: activeSlug,
+                      onNavigate: handleNavigate
+                    }
+                  ),
                   children: content
                 }
               )
@@ -2350,7 +2499,7 @@ function AppShell({
     }
   );
 }
-var AppLink = react.forwardRef(
+var AppLink = React2.forwardRef(
   function AppLink2({ to, onClick, children, ...rest }, ref) {
     const { navigate, buildHref } = useAppNavigation();
     const handleClick = (e) => {
@@ -2365,243 +2514,243 @@ var AppLink = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx("a", { ref, href: buildHref(to), onClick: handleClick, ...rest, children });
   }
 );
-var export_DEFAULT_COLORS = chunkV3IMQZIG_cjs.themes_exports.DEFAULT_COLORS;
-var export_DEFAULT_FONT_FAMILIES = chunkV3IMQZIG_cjs.themes_exports.DEFAULT_FONT_FAMILIES;
-var export_DEFAULT_FONT_SIZES = chunkV3IMQZIG_cjs.themes_exports.DEFAULT_FONT_SIZES;
-var export_DEFAULT_RADII = chunkV3IMQZIG_cjs.themes_exports.DEFAULT_RADII;
-var export_DEFAULT_SPACING = chunkV3IMQZIG_cjs.themes_exports.DEFAULT_SPACING;
-var export_DEFAULT_THEME_ID = chunkV3IMQZIG_cjs.themes_exports.DEFAULT_THEME_ID;
-var export_DEFAULT_THEME_NAME = chunkV3IMQZIG_cjs.themes_exports.DEFAULT_THEME_NAME;
-var export_FONT_FAMILY_KEYS = chunkV3IMQZIG_cjs.themes_exports.FONT_FAMILY_KEYS;
-var export_FONT_SIZE_KEYS = chunkV3IMQZIG_cjs.themes_exports.FONT_SIZE_KEYS;
-var export_RADIUS_KEYS = chunkV3IMQZIG_cjs.themes_exports.RADIUS_KEYS;
-var export_SEMANTIC_COLOR_NAMES = chunkV3IMQZIG_cjs.themes_exports.SEMANTIC_COLOR_NAMES;
-var export_SHADE_STEPS = chunkV3IMQZIG_cjs.themes_exports.SHADE_STEPS;
-var export_applyTheme = chunkV3IMQZIG_cjs.themes_exports.applyTheme;
-var export_deriveDarkVariant = chunkV3IMQZIG_cjs.themes_exports.deriveDarkVariant;
-var export_deserialiseTheme = chunkV3IMQZIG_cjs.themes_exports.deserialiseTheme;
-var export_generateShades = chunkV3IMQZIG_cjs.themes_exports.generateShades;
-var export_generateThemeCSS = chunkV3IMQZIG_cjs.themes_exports.generateThemeCSS;
-var export_getDefaultThemeDefinition = chunkV3IMQZIG_cjs.themes_exports.getDefaultThemeDefinition;
-var export_getForegroundColor = chunkV3IMQZIG_cjs.themes_exports.getForegroundColor;
-var export_mergeDarkOverrides = chunkV3IMQZIG_cjs.themes_exports.mergeDarkOverrides;
-var export_parseColor = chunkV3IMQZIG_cjs.themes_exports.parseColor;
-var export_removeAllThemes = chunkV3IMQZIG_cjs.themes_exports.removeAllThemes;
-var export_removeTheme = chunkV3IMQZIG_cjs.themes_exports.removeTheme;
-var export_resolveTheme = chunkV3IMQZIG_cjs.themes_exports.resolveTheme;
-var export_serialiseTheme = chunkV3IMQZIG_cjs.themes_exports.serialiseTheme;
+var export_DEFAULT_COLORS = chunkW37C774B_cjs.themes_exports.DEFAULT_COLORS;
+var export_DEFAULT_FONT_FAMILIES = chunkW37C774B_cjs.themes_exports.DEFAULT_FONT_FAMILIES;
+var export_DEFAULT_FONT_SIZES = chunkW37C774B_cjs.themes_exports.DEFAULT_FONT_SIZES;
+var export_DEFAULT_RADII = chunkW37C774B_cjs.themes_exports.DEFAULT_RADII;
+var export_DEFAULT_SPACING = chunkW37C774B_cjs.themes_exports.DEFAULT_SPACING;
+var export_DEFAULT_THEME_ID = chunkW37C774B_cjs.themes_exports.DEFAULT_THEME_ID;
+var export_DEFAULT_THEME_NAME = chunkW37C774B_cjs.themes_exports.DEFAULT_THEME_NAME;
+var export_FONT_FAMILY_KEYS = chunkW37C774B_cjs.themes_exports.FONT_FAMILY_KEYS;
+var export_FONT_SIZE_KEYS = chunkW37C774B_cjs.themes_exports.FONT_SIZE_KEYS;
+var export_RADIUS_KEYS = chunkW37C774B_cjs.themes_exports.RADIUS_KEYS;
+var export_SEMANTIC_COLOR_NAMES = chunkW37C774B_cjs.themes_exports.SEMANTIC_COLOR_NAMES;
+var export_SHADE_STEPS = chunkW37C774B_cjs.themes_exports.SHADE_STEPS;
+var export_applyTheme = chunkW37C774B_cjs.themes_exports.applyTheme;
+var export_deriveDarkVariant = chunkW37C774B_cjs.themes_exports.deriveDarkVariant;
+var export_deserialiseTheme = chunkW37C774B_cjs.themes_exports.deserialiseTheme;
+var export_generateShades = chunkW37C774B_cjs.themes_exports.generateShades;
+var export_generateThemeCSS = chunkW37C774B_cjs.themes_exports.generateThemeCSS;
+var export_getDefaultThemeDefinition = chunkW37C774B_cjs.themes_exports.getDefaultThemeDefinition;
+var export_getForegroundColor = chunkW37C774B_cjs.themes_exports.getForegroundColor;
+var export_mergeDarkOverrides = chunkW37C774B_cjs.themes_exports.mergeDarkOverrides;
+var export_parseColor = chunkW37C774B_cjs.themes_exports.parseColor;
+var export_removeAllThemes = chunkW37C774B_cjs.themes_exports.removeAllThemes;
+var export_removeTheme = chunkW37C774B_cjs.themes_exports.removeTheme;
+var export_resolveTheme = chunkW37C774B_cjs.themes_exports.resolveTheme;
+var export_serialiseTheme = chunkW37C774B_cjs.themes_exports.serialiseTheme;
 
-Object.defineProperty(exports, "AUTH_CONSTANTS", {
-  enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.AUTH_CONSTANTS; }
-});
 Object.defineProperty(exports, "ApiError", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.ApiError; }
+  get: function () { return chunkW37C774B_cjs.ApiError; }
 });
 Object.defineProperty(exports, "DEFAULT_AUTH_URL", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.DEFAULT_AUTH_URL; }
+  get: function () { return chunkW37C774B_cjs.DEFAULT_AUTH_URL; }
 });
 Object.defineProperty(exports, "DEFAULT_SDK_WIDGET_REGISTRY", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.DEFAULT_SDK_WIDGET_REGISTRY; }
+  get: function () { return chunkW37C774B_cjs.DEFAULT_SDK_WIDGET_REGISTRY; }
 });
 Object.defineProperty(exports, "FluidAuthProvider", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.FluidAuthProvider; }
+  get: function () { return chunkW37C774B_cjs.FluidAuthProvider; }
 });
 Object.defineProperty(exports, "FluidProvider", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.FluidProvider; }
+  get: function () { return chunkW37C774B_cjs.FluidProvider; }
 });
 Object.defineProperty(exports, "FluidThemeProvider", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.FluidThemeProvider; }
+  get: function () { return chunkW37C774B_cjs.FluidThemeProvider; }
 });
 Object.defineProperty(exports, "MessagingScreen", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.MessagingScreen; }
+  get: function () { return chunkW37C774B_cjs.MessagingScreen; }
 });
-Object.defineProperty(exports, "STORAGE_KEYS", {
+Object.defineProperty(exports, "buildThemeDefinition", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.STORAGE_KEYS; }
+  get: function () { return chunkW37C774B_cjs.buildThemeDefinition; }
 });
-Object.defineProperty(exports, "URL_PARAMS", {
+Object.defineProperty(exports, "createDefaultAuthRedirect", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.URL_PARAMS; }
+  get: function () { return chunkW37C774B_cjs.createDefaultAuthRedirect; }
 });
-Object.defineProperty(exports, "USER_TYPES", {
+Object.defineProperty(exports, "createFluidClient", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.USER_TYPES; }
+  get: function () { return chunkW37C774B_cjs.createFluidClient; }
 });
-Object.defineProperty(exports, "buildThemeDefinition", {
+Object.defineProperty(exports, "createFluidFileUploader", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.buildThemeDefinition; }
+  get: function () { return chunkW37C774B_cjs.createFluidFileUploader; }
 });
-Object.defineProperty(exports, "cleanTokenFromUrl", {
+Object.defineProperty(exports, "getActiveThemeId", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.cleanTokenFromUrl; }
+  get: function () { return chunkW37C774B_cjs.getActiveThemeId; }
 });
-Object.defineProperty(exports, "clearTokens", {
+Object.defineProperty(exports, "isApiError", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.clearTokens; }
+  get: function () { return chunkW37C774B_cjs.isApiError; }
 });
-Object.defineProperty(exports, "createDefaultAuthRedirect", {
+Object.defineProperty(exports, "messagingScreenPropertySchema", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.createDefaultAuthRedirect; }
+  get: function () { return chunkW37C774B_cjs.messagingScreenPropertySchema; }
 });
-Object.defineProperty(exports, "createFluidClient", {
+Object.defineProperty(exports, "normalizeComponentTree", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.createFluidClient; }
+  get: function () { return chunkW37C774B_cjs.normalizeComponentTree; }
 });
-Object.defineProperty(exports, "createFluidFileUploader", {
+Object.defineProperty(exports, "toNavigationItem", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.createFluidFileUploader; }
+  get: function () { return chunkW37C774B_cjs.toNavigationItem; }
 });
-Object.defineProperty(exports, "decodeToken", {
+Object.defineProperty(exports, "toScreenDefinition", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.decodeToken; }
+  get: function () { return chunkW37C774B_cjs.toScreenDefinition; }
 });
-Object.defineProperty(exports, "extractAllTokensFromUrl", {
+Object.defineProperty(exports, "transformManifestToRepAppData", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.extractAllTokensFromUrl; }
+  get: function () { return chunkW37C774B_cjs.transformManifestToRepAppData; }
 });
-Object.defineProperty(exports, "extractCompanyTokenFromUrl", {
+Object.defineProperty(exports, "transformThemes", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.extractCompanyTokenFromUrl; }
+  get: function () { return chunkW37C774B_cjs.transformThemes; }
 });
-Object.defineProperty(exports, "extractTokenFromUrl", {
+Object.defineProperty(exports, "useFluidApi", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.extractTokenFromUrl; }
+  get: function () { return chunkW37C774B_cjs.useFluidApi; }
 });
-Object.defineProperty(exports, "getActiveThemeId", {
+Object.defineProperty(exports, "useFluidAuthContext", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.getActiveThemeId; }
+  get: function () { return chunkW37C774B_cjs.useFluidAuthContext; }
 });
-Object.defineProperty(exports, "getStoredToken", {
+Object.defineProperty(exports, "useFluidContext", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.getStoredToken; }
+  get: function () { return chunkW37C774B_cjs.useFluidContext; }
 });
-Object.defineProperty(exports, "getTokenExpiration", {
+Object.defineProperty(exports, "useMessagingAuth", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.getTokenExpiration; }
+  get: function () { return chunkW37C774B_cjs.useMessagingAuth; }
 });
-Object.defineProperty(exports, "getTokenTimeRemaining", {
+Object.defineProperty(exports, "useMessagingConfig", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.getTokenTimeRemaining; }
+  get: function () { return chunkW37C774B_cjs.useMessagingConfig; }
 });
-Object.defineProperty(exports, "hasStoredToken", {
+Object.defineProperty(exports, "useThemeContext", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.hasStoredToken; }
+  get: function () { return chunkW37C774B_cjs.useThemeContext; }
 });
-Object.defineProperty(exports, "hasTokenInUrl", {
+Object.defineProperty(exports, "ContactsScreen", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.hasTokenInUrl; }
+  get: function () { return chunkEOXYOOWS_cjs.ContactsScreen; }
 });
-Object.defineProperty(exports, "isApiError", {
+Object.defineProperty(exports, "contactsScreenPropertySchema", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.isApiError; }
+  get: function () { return chunkEOXYOOWS_cjs.contactsScreenPropertySchema; }
 });
-Object.defineProperty(exports, "isTokenExpired", {
+Object.defineProperty(exports, "OrdersScreen", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.isTokenExpired; }
+  get: function () { return chunkFG2CI6HA_cjs.OrdersScreen; }
 });
-Object.defineProperty(exports, "isUserType", {
+Object.defineProperty(exports, "ordersScreenPropertySchema", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.isUserType; }
+  get: function () { return chunkFG2CI6HA_cjs.ordersScreenPropertySchema; }
 });
-Object.defineProperty(exports, "isValidToken", {
+Object.defineProperty(exports, "CustomersScreen", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.isValidToken; }
+  get: function () { return chunkMHPK7YQ2_cjs.CustomersScreen; }
 });
-Object.defineProperty(exports, "messagingScreenPropertySchema", {
+Object.defineProperty(exports, "customersScreenPropertySchema", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.messagingScreenPropertySchema; }
+  get: function () { return chunkMHPK7YQ2_cjs.customersScreenPropertySchema; }
 });
-Object.defineProperty(exports, "normalizeComponentTree", {
+Object.defineProperty(exports, "ProductsScreen", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.normalizeComponentTree; }
+  get: function () { return chunk5UBEM3AX_cjs.ProductsScreen; }
 });
-Object.defineProperty(exports, "storeToken", {
+Object.defineProperty(exports, "productsScreenPropertySchema", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.storeToken; }
+  get: function () { return chunk5UBEM3AX_cjs.productsScreenPropertySchema; }
 });
-Object.defineProperty(exports, "toNavigationItem", {
+Object.defineProperty(exports, "AUTH_CONSTANTS", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.toNavigationItem; }
+  get: function () { return auth.AUTH_CONSTANTS; }
 });
-Object.defineProperty(exports, "toScreenDefinition", {
+Object.defineProperty(exports, "STORAGE_KEYS", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.toScreenDefinition; }
+  get: function () { return auth.STORAGE_KEYS; }
 });
-Object.defineProperty(exports, "transformManifestToRepAppData", {
+Object.defineProperty(exports, "URL_PARAMS", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.transformManifestToRepAppData; }
+  get: function () { return auth.URL_PARAMS; }
 });
-Object.defineProperty(exports, "transformThemes", {
+Object.defineProperty(exports, "USER_TYPES", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.transformThemes; }
+  get: function () { return auth.USER_TYPES; }
 });
-Object.defineProperty(exports, "useFluidApi", {
+Object.defineProperty(exports, "cleanTokenFromUrl", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.useFluidApi; }
+  get: function () { return auth.cleanTokenFromUrl; }
 });
-Object.defineProperty(exports, "useFluidAuthContext", {
+Object.defineProperty(exports, "clearTokens", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.useFluidAuthContext; }
+  get: function () { return auth.clearTokens; }
 });
-Object.defineProperty(exports, "useFluidContext", {
+Object.defineProperty(exports, "decodeToken", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.useFluidContext; }
+  get: function () { return auth.decodeToken; }
 });
-Object.defineProperty(exports, "useMessagingAuth", {
+Object.defineProperty(exports, "extractAllTokensFromUrl", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.useMessagingAuth; }
+  get: function () { return auth.extractAllTokensFromUrl; }
 });
-Object.defineProperty(exports, "useMessagingConfig", {
+Object.defineProperty(exports, "extractCompanyTokenFromUrl", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.useMessagingConfig; }
+  get: function () { return auth.extractCompanyTokenFromUrl; }
 });
-Object.defineProperty(exports, "useThemeContext", {
+Object.defineProperty(exports, "extractTokenFromUrl", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.useThemeContext; }
+  get: function () { return auth.extractTokenFromUrl; }
 });
-Object.defineProperty(exports, "validateToken", {
+Object.defineProperty(exports, "getStoredToken", {
   enumerable: true,
-  get: function () { return chunkV3IMQZIG_cjs.validateToken; }
+  get: function () { return auth.getStoredToken; }
 });
-Object.defineProperty(exports, "ContactsScreen", {
+Object.defineProperty(exports, "getTokenExpiration", {
   enumerable: true,
-  get: function () { return chunkEOXYOOWS_cjs.ContactsScreen; }
+  get: function () { return auth.getTokenExpiration; }
 });
-Object.defineProperty(exports, "contactsScreenPropertySchema", {
+Object.defineProperty(exports, "getTokenTimeRemaining", {
   enumerable: true,
-  get: function () { return chunkEOXYOOWS_cjs.contactsScreenPropertySchema; }
+  get: function () { return auth.getTokenTimeRemaining; }
 });
-Object.defineProperty(exports, "OrdersScreen", {
+Object.defineProperty(exports, "hasStoredToken", {
   enumerable: true,
-  get: function () { return chunkFG2CI6HA_cjs.OrdersScreen; }
+  get: function () { return auth.hasStoredToken; }
 });
-Object.defineProperty(exports, "ordersScreenPropertySchema", {
+Object.defineProperty(exports, "hasTokenInUrl", {
   enumerable: true,
-  get: function () { return chunkFG2CI6HA_cjs.ordersScreenPropertySchema; }
+  get: function () { return auth.hasTokenInUrl; }
 });
-Object.defineProperty(exports, "CustomersScreen", {
+Object.defineProperty(exports, "isTokenExpired", {
   enumerable: true,
-  get: function () { return chunkMHPK7YQ2_cjs.CustomersScreen; }
+  get: function () { return auth.isTokenExpired; }
 });
-Object.defineProperty(exports, "customersScreenPropertySchema", {
+Object.defineProperty(exports, "isUserType", {
   enumerable: true,
-  get: function () { return chunkMHPK7YQ2_cjs.customersScreenPropertySchema; }
+  get: function () { return auth.isUserType; }
 });
-Object.defineProperty(exports, "ProductsScreen", {
+Object.defineProperty(exports, "isValidToken", {
   enumerable: true,
-  get: function () { return chunk5UBEM3AX_cjs.ProductsScreen; }
+  get: function () { return auth.isValidToken; }
 });
-Object.defineProperty(exports, "productsScreenPropertySchema", {
+Object.defineProperty(exports, "storeToken", {
   enumerable: true,
-  get: function () { return chunk5UBEM3AX_cjs.productsScreenPropertySchema; }
+  get: function () { return auth.storeToken; }
+});
+Object.defineProperty(exports, "validateToken", {
+  enumerable: true,
+  get: function () { return auth.validateToken; }
 });
 Object.defineProperty(exports, "WIDGET_TYPE_NAMES", {
   enumerable: true,