@fluid-app/rep-sdk 0.1.3 → 0.1.4

package/dist/index.d.cts

@@ -394,6 +394,12 @@ interface RawManifestResponse {
                 definition_id: number;
                 navigation_items?: RawApiNavigationItem[];
             };
+            mobile_navigation?: {
+                id: number;
+                name?: string;
+                definition_id: number;
+                navigation_items?: RawApiNavigationItem[];
+            };
         };
     };
 }
@@ -2510,11 +2516,12 @@ declare function SdkNavigation({ navItems, currentSlug, onNavigate, navSlugs, }:
 
 interface SdkHeaderProps {
     tabs: NavigationItem[];
+    mobileTabs?: NavigationItem[];
     currentSlug: string;
     onNavigate: (slug: string) => void;
     navSlugs: string[];
 }
-declare function SdkHeader({ tabs, currentSlug, onNavigate, navSlugs, }: SdkHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SdkHeader({ tabs, mobileTabs, currentSlug, onNavigate, navSlugs, }: SdkHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface PageRouterProps {
     currentSlug: string;

package/dist/index.d.ts

@@ -394,6 +394,12 @@ interface RawManifestResponse {
                 definition_id: number;
                 navigation_items?: RawApiNavigationItem[];
             };
+            mobile_navigation?: {
+                id: number;
+                name?: string;
+                definition_id: number;
+                navigation_items?: RawApiNavigationItem[];
+            };
         };
     };
 }
@@ -2510,11 +2516,12 @@ declare function SdkNavigation({ navItems, currentSlug, onNavigate, navSlugs, }:
 
 interface SdkHeaderProps {
     tabs: NavigationItem[];
+    mobileTabs?: NavigationItem[];
     currentSlug: string;
     onNavigate: (slug: string) => void;
     navSlugs: string[];
 }
-declare function SdkHeader({ tabs, currentSlug, onNavigate, navSlugs, }: SdkHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SdkHeader({ tabs, mobileTabs, currentSlug, onNavigate, navSlugs, }: SdkHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface PageRouterProps {
     currentSlug: string;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { themes_exports, useFluidApi, transformManifestToRepAppData, useThemeContext, useFluidAuthContext, MessagingScreen } from './chunk-7JMNKWPN.js';
-export { AUTH_CONSTANTS, ApiError, DEFAULT_AUTH_URL, DEFAULT_SDK_WIDGET_REGISTRY, FluidAuthProvider, FluidProvider, FluidThemeProvider, MessagingScreen, STORAGE_KEYS, URL_PARAMS, USER_TYPES, buildThemeDefinition, cleanTokenFromUrl, clearTokens, createDefaultAuthRedirect, createFluidClient, createFluidFileUploader, decodeToken, extractAllTokensFromUrl, extractCompanyTokenFromUrl, extractTokenFromUrl, getActiveThemeId, getStoredToken, getTokenExpiration, getTokenTimeRemaining, hasStoredToken, hasTokenInUrl, isApiError, isTokenExpired, isUserType, isValidToken, messagingScreenPropertySchema, normalizeComponentTree, storeToken, toNavigationItem, toScreenDefinition, transformManifestToRepAppData, transformThemes, useFluidApi, useFluidAuthContext, useFluidContext, useMessagingAuth, useMessagingConfig, useThemeContext, validateToken } from './chunk-7JMNKWPN.js';
+import { themes_exports, useFluidApi, transformManifestToRepAppData, useThemeContext, useFluidAuthContext, MessagingScreen } from './chunk-R4SXB6EV.js';
+export { AUTH_CONSTANTS, ApiError, DEFAULT_AUTH_URL, DEFAULT_SDK_WIDGET_REGISTRY, FluidAuthProvider, FluidProvider, FluidThemeProvider, MessagingScreen, STORAGE_KEYS, URL_PARAMS, USER_TYPES, buildThemeDefinition, cleanTokenFromUrl, clearTokens, createDefaultAuthRedirect, createFluidClient, createFluidFileUploader, decodeToken, extractAllTokensFromUrl, extractCompanyTokenFromUrl, extractTokenFromUrl, getActiveThemeId, getStoredToken, getTokenExpiration, getTokenTimeRemaining, hasStoredToken, hasTokenInUrl, isApiError, isTokenExpired, isUserType, isValidToken, messagingScreenPropertySchema, normalizeComponentTree, storeToken, toNavigationItem, toScreenDefinition, transformManifestToRepAppData, transformThemes, useFluidApi, useFluidAuthContext, useFluidContext, useMessagingAuth, useMessagingConfig, useThemeContext, validateToken } from './chunk-R4SXB6EV.js';
 import { ContactsScreen } from './chunk-CMF2FYTD.js';
 export { ContactsScreen, contactsScreenPropertySchema } from './chunk-CMF2FYTD.js';
 import { OrdersScreen } from './chunk-WFPYEYC7.js';
@@ -10,6 +10,7 @@ import { ProductsScreen } from './chunk-QZMWG7EM.js';
 export { ProductsScreen, productsScreenPropertySchema } from './chunk-QZMWG7EM.js';
 import { CoreScreenPlaceholder } from './chunk-RS4OSTES.js';
 import './chunk-424PT5DM.js';
+import * as React2 from 'react';
 import { createContext, memo, forwardRef, useContext, useRef, useEffect, useMemo, useState, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useQuery } from '@tanstack/react-query';
@@ -21,10 +22,12 @@ import { AppShellLayout } from '@fluid-app/rep-core/shell/AppShellLayout';
 import { useThemeMode, ThemeModeProvider } from '@fluid-app/rep-core/shell/ThemeModeContext';
 export { ThemeModeProvider, getThemeModeAttribute, useThemeMode } from '@fluid-app/rep-core/shell/ThemeModeContext';
 import { normalizeSlug, getSystemNavigationBySection, isSystemNavigationItem } from '@fluid-app/rep-core/navigation/system-navigation-items';
-import { resolveTheme, applyTheme, removeAllThemes } from '@fluid-app/rep-core/theme';
-import { SidebarMenu, SidebarGroupLabel, SidebarMenuItem, SidebarMenuButton, useSidebar } from '@fluid-app/rep-core/shell/sidebar';
-import { RepIcon } from '@fluid-app/rep-core/components/RepIcon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEllipsis } from '@fortawesome/pro-regular-svg-icons/faEllipsis';
+import { faXmark } from '@fortawesome/pro-regular-svg-icons/faXmark';
+import { RepIcon } from '@fluid-app/rep-core/components/RepIcon';
+import { SidebarMenu, SidebarGroupLabel, SidebarMenuItem, SidebarMenuButton, useSidebar } from '@fluid-app/rep-core/shell/sidebar';
+import { resolveTheme, applyTheme, removeAllThemes } from '@fluid-app/rep-core/theme';
 import { faBars } from '@fortawesome/pro-regular-svg-icons/faBars';
 import { faSun } from '@fortawesome/pro-regular-svg-icons/faSun';
 import { faMoon } from '@fortawesome/pro-regular-svg-icons/faMoon';
@@ -1653,7 +1656,7 @@ function RequireAuth({
 
 // src/screens/index.ts
 var screenPropertySchemas = {
-  MessagingScreen: () => import('./MessagingScreen-4H7ZBO3V.js').then((m) => m.messagingScreenPropertySchema),
+  MessagingScreen: () => import('./MessagingScreen-5TEWFUX4.js').then((m) => m.messagingScreenPropertySchema),
   ContactsScreen: () => import('./ContactsScreen-33AJ5XUB.js').then((m) => m.contactsScreenPropertySchema),
   OrdersScreen: () => import('./OrdersScreen-IPPZLEYF.js').then((m) => m.ordersScreenPropertySchema),
   CustomersScreen: () => import('./CustomersScreen-E4HXBKV7.js').then((m) => m.customersScreenPropertySchema),
@@ -1759,6 +1762,113 @@ function registerCorePageTemplates() {
   });
 }
 registerCorePageTemplates();
+function isInSection(item, currentSlug) {
+  const normalized = normalizeSlug(currentSlug);
+  if (normalizeSlug(item.slug) === normalized) return true;
+  return item.children?.some((child) => normalizeSlug(child.slug) === normalized) ?? false;
+}
+function getNavTarget(item) {
+  if (item.slug && (!item.children || item.children.length === 0)) {
+    return normalizeSlug(item.slug);
+  }
+  if (item.children && item.children.length > 0) {
+    const firstChild = item.children[0];
+    if (firstChild?.slug) return normalizeSlug(firstChild.slug);
+  }
+  return null;
+}
+function SdkBottomNav({
+  navItems,
+  currentSlug,
+  onNavigate,
+  maxVisibleItems = 5
+}) {
+  const { isMobile, useBottomNav } = useSidebar();
+  const [moreOpen, setMoreOpen] = React2.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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ 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__ */ jsx(RepIcon, { name: item.icon, className: "size-5" }) : /* @__PURE__ */ jsx("span", { className: "size-5" }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-[72px] truncate", children: item.label })
+            ]
+          },
+          item.id ?? item.slug ?? item.label
+        );
+      }),
+      hasOverflow && /* @__PURE__ */ 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__ */ jsx(FontAwesomeIcon, { icon: faEllipsis, className: "size-5" }),
+            /* @__PURE__ */ jsx("span", { children: "More" })
+          ]
+        }
+      )
+    ] }),
+    moreOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex-1 bg-black/50",
+          onClick: () => setMoreOpen(false),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-t-2xl bg-sidebar pb-[env(safe-area-inset-bottom)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-4 pb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "More" }),
+          /* @__PURE__ */ 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__ */ jsx(FontAwesomeIcon, { icon: faXmark, className: "size-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-2 pb-4", children: overflowItems.map((item) => {
+          const isActive = isInSection(item, currentSlug);
+          return /* @__PURE__ */ 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__ */ jsx(RepIcon, { name: item.icon, className: "size-5" }),
+                /* @__PURE__ */ 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;
@@ -1965,6 +2075,7 @@ function QuickLinksDropdown({ onNavigate }) {
 }
 function SdkHeader({
   tabs,
+  mobileTabs,
   currentSlug,
   onNavigate,
   navSlugs
@@ -1974,8 +2085,9 @@ function SdkHeader({
   const match = matchSlugPrefix(currentSlug, navSlugs);
   const baseSlug = match?.matchedSlug ?? normalizeSlug(currentSlug);
   const themeIcon = themeMode.mode === "dark" ? faMoon : faSun;
+  const activeTabs = sidebar.isMobile && sidebar.useBottomNav && mobileTabs ? mobileTabs : tabs;
   return /* @__PURE__ */ jsxs("header", { className: "flex h-[52px] shrink-0 items-center gap-2 bg-sidebar px-6", children: [
-    sidebar.isMobile && /* @__PURE__ */ jsx(
+    sidebar.isMobile && !sidebar.useBottomNav && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1985,7 +2097,7 @@ function SdkHeader({
         children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faBars, className: "size-5" })
       }
     ),
-    /* @__PURE__ */ jsx("nav", { className: "scrollbar-none flex flex-1 items-center gap-1 overflow-x-auto", children: tabs.map((tab) => {
+    /* @__PURE__ */ jsx("nav", { className: "scrollbar-none flex flex-1 items-center gap-1 overflow-x-auto", children: activeTabs.map((tab) => {
       const tabSlug = normalizeSlug(tab.slug);
       if (!tabSlug) return null;
       const isActive = tabSlug === baseSlug;
@@ -2224,6 +2336,11 @@ function AppShell({
     if (profileNav && profileNav.length > 0) return profileNav;
     return DEFAULT_NAVIGATION;
   }, [navigationProp, appData?.profile?.navigation?.navigation_items]);
+  const mobileNavItems = 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 = useMemo(() => collectNavSlugs(navItems), [navItems]);
   const [themeMode, setThemeMode] = useState(getInitialThemeMode);
@@ -2289,6 +2406,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__ */ jsx(
     PageRouter,
@@ -2337,6 +2456,7 @@ function AppShell({
                     SdkHeader,
                     {
                       tabs: secondLevelTabs,
+                      mobileTabs: mobileSecondLevelTabs,
                       currentSlug: activeSlug,
                       onNavigate: handleNavigate,
                       navSlugs
@@ -2344,6 +2464,15 @@ function AppShell({
                   ),
                   sidebarHeader,
                   sidebarFooter,
+                  useBottomNav: true,
+                  afterContent: /* @__PURE__ */ jsx(
+                    SdkBottomNav,
+                    {
+                      navItems: mobileNavItems,
+                      currentSlug: activeSlug,
+                      onNavigate: handleNavigate
+                    }
+                  ),
                   children: content
                 }
               )