@fayz-ai/ui 0.5.0 → 0.6.6

package/src/layout/AppShell.tsx

@@ -1,5 +1,18 @@
 import * as React from 'react'
-import { Menu } from 'lucide-react'
+import {
+  Menu,
+  Home,
+  Receipt,
+  ArrowLeftRight,
+  Calendar,
+  CreditCard,
+  Settings,
+  MessageCircle,
+  Wallet,
+  PiggyBank,
+  Plus,
+  type LucideIcon,
+} from 'lucide-react'
 import { Sidebar, type NavigationItem, type SidebarUser, type SidebarProps } from './Sidebar'
 import { Topbar } from './Topbar'
 import { SaveBar, SaveBarProvider } from './SaveBar'
@@ -35,6 +48,41 @@ export interface AppShellUser {
   email: string
 }
 
+// ---------------------------------------------------------------------------
+// Bottom-nav item model
+//
+// Two kinds share the mobile tab bar:
+//  - route  (default): a normal tab that navigates to `route`.
+//  - action: a NON-route item rendered as a raised, elevated circular center
+//    button (Mobills style). It fires `onBottomNavAction(id)` instead of
+//    navigating — e.g. a global quick-add "+".
+// ---------------------------------------------------------------------------
+
+export interface BottomNavRouteItem {
+  kind?: 'route'
+  label: string
+  icon: string
+  route: string
+}
+
+export interface BottomNavActionItem {
+  kind: 'action'
+  /** Identifier passed to onBottomNavAction. */
+  id: string
+  icon: string
+  /** Optional accessible label. */
+  label?: string
+}
+
+export type BottomNavItem = BottomNavRouteItem | BottomNavActionItem
+
+/** Mobile header treatment (small screens, <md). Desktop is unaffected.
+ *  - 'minimal'     : a small top header bar (the default / today's behavior).
+ *  - 'transparent' : NO header bar; content is edge-to-edge with a floating
+ *                    profile avatar pinned top-right (calls onProfile).
+ *  - 'hidden'      : no header bar and no floating avatar. */
+export type MobileHeaderVariant = 'transparent' | 'minimal' | 'hidden'
+
 export interface AppShellProps {
   /** Layout variant */
   variant: 'sidebar' | 'topbar' | 'minimal'
@@ -58,7 +106,11 @@ export interface AppShellProps {
   topbarEnd?: React.ReactNode
   sidebarTopContent?: React.ReactNode
   sidebarFooterContent?: React.ReactNode
-  bottomNav?: Array<{ label: string; icon: string; route: string }>
+  bottomNav?: BottomNavItem[]
+  /** Fired when a bottom-nav `action` item (e.g. the center "+") is tapped. */
+  onBottomNavAction?: (id: string) => void
+  /** Mobile header treatment (<md). Default: 'minimal'. Desktop unaffected. */
+  mobileHeader?: MobileHeaderVariant
   /** Rendered in sidebar bottom user slot */
   userMenuSlot?: React.ReactNode
   /** Rendered in sidebar bottom notification slot */
@@ -93,6 +145,8 @@ function SidebarLayout({
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
+  hasBottomNav = false,
+  mobileHeader = 'minimal',
 }: {
   navigation?: NavigationItem[]
   logo?: React.ReactNode
@@ -115,6 +169,11 @@ function SidebarLayout({
   userMenuSlot?: React.ReactNode
   notificationSlot?: React.ReactNode
   unreadCount?: number
+  /** When a mobile bottom-nav bar is present, the mobile hamburger is
+   *  suppressed so the bottom nav is the primary mobile navigation. */
+  hasBottomNav?: boolean
+  /** Mobile header treatment (<md). Desktop keeps its top bar untouched. */
+  mobileHeader?: MobileHeaderVariant
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed)
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed)
@@ -126,7 +185,13 @@ function SidebarLayout({
     <SaveBarProvider>
     <ModuleHeaderSlotContext.Provider value={headerSlot}>
     <ModuleHeaderActionsSlotContext.Provider value={actionsSlot}>
-    <div className="flex h-screen overflow-hidden bg-background">
+    <div className={cn(
+      'flex h-screen overflow-hidden bg-background',
+      // Frame mode: the inset gap around the framed card takes the sidebar (menu)
+      // color, so the white card reads as a panel floating on the same tone as the
+      // left menu. The card's own md:m-2 margin reveals this behind it.
+      frame && 'md:bg-sidebar',
+    )}>
       {/* Desktop Sidebar — always flush / full-height (GoHighLevel style) */}
       <div className="hidden md:flex">
         <Sidebar
@@ -158,16 +223,27 @@ function SidebarLayout({
         'relative flex flex-1 flex-col overflow-hidden',
         frame && 'md:m-2 md:rounded-xl md:border md:border-border md:bg-card'
       )}>
-        {/* Top bar — mobile hamburger + module header slot (title + sub-nav) + actions */}
-        <div className="flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 py-2">
+        {/* Top bar — mobile hamburger + module header slot (title + sub-nav) + actions.
+            On mobile the bar is suppressed for the 'transparent' / 'hidden' header
+            treatments (content goes edge-to-edge); desktop keeps it always. The
+            portal targets below stay mounted (display:none on mobile) so module
+            pages can still portal their sub-nav on desktop without crashing. */}
+        <div className={cn(
+          'flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 py-2',
+          mobileHeader !== 'minimal' && 'hidden md:flex',
+        )}>
           <div className="flex min-w-0 flex-1 items-center gap-3">
-            <button
-              onClick={() => setMobileMenuOpen(true)}
-              className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden"
-              aria-label="Open menu"
-            >
-              <Menu className="h-5 w-5" />
-            </button>
+            {/* Mobile hamburger — suppressed when a bottom-nav bar owns mobile
+                navigation (mobile-first apps). Desktop sidebar is untouched. */}
+            {!hasBottomNav && (
+              <button
+                onClick={() => setMobileMenuOpen(true)}
+                className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden"
+                aria-label="Open menu"
+              >
+                <Menu className="h-5 w-5" />
+              </button>
+            )}
             {pageTitle && <h2 className="font-semibold text-lg">{pageTitle}</h2>}
             {topbarStart}
             {/* Module pages (tabs variant) portal their sub-nav here */}
@@ -181,7 +257,7 @@ function SidebarLayout({
         </div>
 
         {/* Page content */}
-        <main className="flex-1 overflow-y-auto">
+        <main className="flex-1 overflow-y-auto pb-16 md:pb-0">
           {children}
         </main>
 
@@ -236,6 +312,7 @@ function TopbarLayout({
   currentPath,
   topbarStart,
   topbarEnd,
+  hasBottomNav = false,
 }: {
   navigation?: NavigationItem[]
   logo?: React.ReactNode
@@ -251,6 +328,9 @@ function TopbarLayout({
   currentPath?: string
   topbarStart?: React.ReactNode
   topbarEnd?: React.ReactNode
+  /** When a mobile bottom-nav bar is present, the mobile hamburger is
+   *  suppressed so the bottom nav is the primary mobile navigation. */
+  hasBottomNav?: boolean
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
 
@@ -271,10 +351,12 @@ function TopbarLayout({
         userMenuExtras={userMenuExtras}
         leftContent={topbarStart}
         rightContent={topbarEnd}
-        onMenuClick={() => setMobileMenuOpen(true)}
+        onMenuClick={hasBottomNav ? undefined : () => setMobileMenuOpen(true)}
       />
-      {/* Frame inset/border only from md up, so mobile stays edge-to-edge. */}
-      <main className={cn('flex-1 overflow-y-auto', frame && 'md:p-2')}>
+      {/* Frame inset/border only from md up, so mobile stays edge-to-edge. The
+          inset gap behind the framed card is the header color (bg-sidebar), so the
+          white card reads as a panel floating on the same navy as the topbar. */}
+      <main className={cn('flex-1 overflow-y-auto pb-16 md:pb-0', frame && 'md:bg-sidebar md:p-2')}>
         <div className={cn('min-h-full', frame && 'md:rounded-xl md:border md:border-border md:bg-card')}>
           {children}
         </div>
@@ -345,7 +427,7 @@ function MinimalLayout({
         </div>
         {headerEnd && <div className="flex items-center gap-2">{headerEnd}</div>}
       </header>
-      <main className="flex-1 overflow-y-auto">
+      <main className="flex-1 overflow-y-auto pb-16 md:pb-0">
         {children}
       </main>
     </div>
@@ -426,6 +508,111 @@ function MobileOverlay({ onClose, onNavigate, ...sidebarProps }: MobileOverlayPr
   )
 }
 
+// ---------------------------------------------------------------------------
+// Mobile bottom tab bar — rendered for every variant on small screens.
+// ui must NOT import from saas, so the icon lookup is a small local map (a
+// mirror of the saas icon convention). Unknown icon names fall back to Home.
+// ---------------------------------------------------------------------------
+
+const BOTTOM_NAV_ICONS: Record<string, LucideIcon> = {
+  Home,
+  Receipt,
+  ArrowLeftRight,
+  Calendar,
+  CreditCard,
+  Settings,
+  Menu,
+  MessageCircle,
+  Wallet,
+  PiggyBank,
+  Plus,
+}
+
+// Floating profile avatar — mobile-only (md:hidden), pinned top-right over the
+// content. Used with the 'transparent' mobile header treatment so there is no
+// header bar but the user still has a one-tap route into their profile.
+function FloatingProfileAvatar({ user, onClick }: { user?: AppShellUser; onClick?: () => void }) {
+  if (!user) return null
+  const label = user.fullName || user.email
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Profile"
+      className="fixed right-3 top-3 z-40 md:hidden"
+    >
+      {user.avatarUrl ? (
+        <img
+          src={user.avatarUrl}
+          alt=""
+          className="h-9 w-9 rounded-full object-cover shadow-md ring-2 ring-background"
+        />
+      ) : (
+        <span className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground shadow-md ring-2 ring-background">
+          {(label || '?').charAt(0).toUpperCase()}
+        </span>
+      )}
+    </button>
+  )
+}
+
+function MobileBottomNav({
+  items,
+  currentPath,
+  onNavigate,
+  onAction,
+}: {
+  items: NonNullable<AppShellProps['bottomNav']>
+  currentPath?: string
+  onNavigate?: (route: string) => void
+  onAction?: (id: string) => void
+}) {
+  const path = currentPath ?? ''
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-50 flex h-16 items-center justify-around border-t border-border bg-background md:hidden">
+      {items.map((item) => {
+        // Elevated center ACTION button (Mobills style) — raised above the bar,
+        // circular, primary-filled; fires onBottomNavAction instead of routing.
+        if (item.kind === 'action') {
+          const ActionIcon = BOTTOM_NAV_ICONS[item.icon] ?? Plus
+          return (
+            <div key={item.id} className="flex flex-1 items-start justify-center">
+              <button
+                type="button"
+                onClick={() => onAction?.(item.id)}
+                aria-label={item.label ?? 'Add'}
+                className="-mt-6 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg shadow-primary/30 ring-4 ring-background transition-transform active:scale-95"
+              >
+                <ActionIcon className="h-6 w-6" />
+              </button>
+            </div>
+          )
+        }
+        const isActive =
+          item.route === '/'
+            ? path === '/' || path === ''
+            : path === item.route || path.startsWith(item.route + '/')
+        const Icon = BOTTOM_NAV_ICONS[item.icon] ?? Home
+        return (
+          <button
+            key={item.route}
+            type="button"
+            onClick={() => onNavigate?.(item.route)}
+            className={cn(
+              'flex flex-1 flex-col items-center justify-center gap-0.5 px-1 py-1 transition-colors',
+              isActive ? 'text-primary' : 'text-muted-foreground',
+            )}
+            aria-current={isActive ? 'page' : undefined}
+          >
+            <Icon className="h-5 w-5" />
+            <span className="text-xs">{item.label}</span>
+          </button>
+        )
+      })}
+    </nav>
+  )
+}
+
 // ---------------------------------------------------------------------------
 // AppShell — main entry point
 // ---------------------------------------------------------------------------
@@ -450,13 +637,32 @@ export function AppShell({
   topbarEnd,
   sidebarTopContent,
   sidebarFooterContent,
+  bottomNav,
+  onBottomNavAction,
+  mobileHeader = 'minimal',
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
 }: AppShellProps) {
+  const hasBottomNav = !!bottomNav?.length
+  const bottomBar = hasBottomNav ? (
+    <MobileBottomNav
+      items={bottomNav!}
+      currentPath={currentPath}
+      onNavigate={onNavigate}
+      onAction={onBottomNavAction}
+    />
+  ) : null
+  // Transparent mobile header → no bar, a floating avatar top-right instead.
+  const floatingAvatar =
+    mobileHeader === 'transparent' && user ? (
+      <FloatingProfileAvatar user={user} onClick={onProfile} />
+    ) : null
+
+  let layoutElement: React.ReactNode
   switch (variant) {
     case 'sidebar':
-      return (
+      layoutElement = (
         <SidebarLayout
           navigation={navigation}
           logo={logo}
@@ -478,13 +684,16 @@ export function AppShell({
           userMenuSlot={userMenuSlot}
           notificationSlot={notificationSlot}
           unreadCount={unreadCount}
+          hasBottomNav={hasBottomNav}
+          mobileHeader={mobileHeader}
         >
           {children}
         </SidebarLayout>
       )
+      break
 
     case 'topbar':
-      return (
+      layoutElement = (
         <TopbarLayout
           navigation={navigation}
           logo={logo}
@@ -499,21 +708,32 @@ export function AppShell({
           currentPath={currentPath}
           topbarStart={topbarStart}
           topbarEnd={topbarEnd}
+          hasBottomNav={hasBottomNav}
         >
           {children}
         </TopbarLayout>
       )
+      break
 
     case 'minimal':
-      return (
+      layoutElement = (
         <MinimalLayout logo={logo} user={user} headerEnd={topbarEnd}>
           {children}
         </MinimalLayout>
       )
+      break
 
     default: {
       const _exhaustive: never = variant
       return null
     }
   }
+
+  return (
+    <>
+      {layoutElement}
+      {floatingAvatar}
+      {bottomBar}
+    </>
+  )
 }

package/src/layout/ModulePage.tsx

@@ -139,7 +139,7 @@ function MobileTabs({ nav }: { nav: ModuleNavItem[] }) {
 
   return (
     <div className="md:hidden -mx-1 mb-4 no-print">
-      <div ref={scrollRef} className="flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-hide">
+      <div ref={scrollRef} className="flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-none">
         {nav.map((item) => {
           const Icon = item.icon ? (ICON_MAP[item.icon] ?? null) : null
           const hasChildren = item.children && item.children.length > 0
@@ -340,7 +340,7 @@ function ModuleHeader({ nav }: { nav: ModuleNavItem[] }) {
 
   const content = (
     <div className="flex w-full min-w-0 items-center gap-4">
-      <div className="flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-hide">
+      <div className="flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-none">
         {nav.map((item) => {
           const Icon = item.icon ? (ICON_MAP[item.icon] ?? null) : null
           const hasChildren = item.children && item.children.length > 0

package/src/layout/Sidebar.tsx

@@ -7,40 +7,53 @@ import {
   CreditCard,
   Bell,
   Calendar,
+  CalendarClock,
   Package,
+  Activity,
   BarChart3,
   FileText,
   Mail,
   PanelLeftClose,
   PanelLeft,
   Search,
+  Shield,
   DollarSign,
   Megaphone,
+  Receipt,
   ShoppingCart,
+  ShoppingBag,
   Target,
   Wrench,
   ClipboardList,
+  ListChecks,
   Briefcase,
   UserCog,
   BookOpen,
+  BookOpenCheck,
   MessageCircle,
   Globe,
   Percent,
   Tag,
+  Tags,
   Camera,
   UtensilsCrossed,
   MapPin,
+  Map,
   Handshake,
   Contact,
   Building2,
   Filter,
   Plus,
   List,
+  ListPlus,
   ChevronDown,
+  Ban,
+  Clock,
   Dog,
   Cat,
   PawPrint,
   Heart,
+  FolderOpen,
   LayoutTemplate,
   LeafyGreen,
   Apple,
@@ -49,7 +62,12 @@ import {
   PartyPopper,
   Radio,
   CalendarDays,
+  CalendarCheck2,
+  CalendarX,
+  BadgeDollarSign,
   Banknote,
+  Landmark,
+  CircleDollarSign,
   Layers,
   Music,
   Eye,
@@ -61,8 +79,16 @@ import {
   Award,
   LayoutDashboard,
   MessageSquare,
+  Inbox,
   Star,
+  TrendingUp,
+  UserCheck,
+  UserPlus,
+  UserX,
   Workflow,
+  Boxes,
+  Clock3,
+  FileCheck2,
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../utils/cn'
@@ -112,13 +138,13 @@ export interface SidebarProps {
 }
 
 const ICON_MAP: Record<string, LucideIcon> = {
-  Home, Users, Settings, CreditCard, Bell, Calendar, Package, BarChart3,
+  Home, Users, Settings, CreditCard, Bell, Calendar, CalendarClock, Package, Activity, BarChart3,
   FileText, Mail, DollarSign, Megaphone, ShoppingCart, Target, Wrench,
-  ClipboardList, Briefcase, UserCog, BookOpen, MessageCircle, Globe,
-  Percent, Tag, Camera, UtensilsCrossed, MapPin, Handshake, Contact,
-  Building2, Filter, Plus, List, Search, Dog, Cat, PawPrint, Heart, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
-  PartyPopper, Radio, CalendarDays, Banknote, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
-  Zap, Award, LayoutDashboard, MessageSquare, Star, Workflow,
+  Receipt, ShoppingBag, ClipboardList, ListChecks, Briefcase, UserCog, BookOpen, BookOpenCheck, MessageCircle, Globe,
+  Percent, Tag, Tags, Camera, UtensilsCrossed, MapPin, Map, Handshake, Contact,
+  Building2, Filter, Plus, List, ListPlus, Search, Shield, Ban, Clock, Dog, Cat, PawPrint, Heart, FolderOpen, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
+  PartyPopper, Radio, CalendarDays, CalendarCheck2, CalendarX, BadgeDollarSign, Banknote, Landmark, CircleDollarSign, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
+  Zap, Award, LayoutDashboard, MessageSquare, Inbox, Star, TrendingUp, UserCheck, UserPlus, UserX, Workflow, Boxes, Clock3, FileCheck2,
 }
 
 export { ICON_MAP }

package/src/layout/Topbar.tsx

@@ -11,23 +11,29 @@ import {
   CreditCard,
   Bell,
   Calendar,
+  CalendarClock,
   Package,
+  Activity,
   BarChart3,
   FileText,
   Mail,
   DollarSign,
   Megaphone,
   ShoppingCart,
+  ShoppingBag,
   Target,
   Wrench,
   ClipboardList,
+  ClipboardCheck,
   Briefcase,
   UserCog,
   BookOpen,
+  BookOpenCheck,
   MessageCircle,
   Globe,
   Percent,
   Tag,
+  Tags,
   Camera,
   UtensilsCrossed,
   MapPin,
@@ -35,7 +41,11 @@ import {
   Contact,
   Building2,
   Plus,
+  Shield,
   List,
+  ListChecks,
+  FileCheck2,
+  FolderOpen,
   Dog,
   Cat,
   PawPrint,
@@ -64,18 +74,32 @@ import {
   SlidersHorizontal,
   TableProperties,
   UserPlus,
+  UserCheck,
+  UserX,
   TreePalm,
+  Boxes,
+  Box,
   PartyPopper,
   Radio,
   CalendarDays,
+  CalendarCheck2,
+  CalendarX,
+  BadgeDollarSign,
   Banknote,
   Layers,
   Music,
   Eye,
   ListMusic,
+  ListPlus,
+  Map,
+  Ban,
+  Clock3,
   Disc3,
   UsersRound,
   Mic,
+  Inbox,
+  Star,
+  Zap,
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../utils/cn'
@@ -175,13 +199,14 @@ function TopbarUserMenu({
 }
 
 export const ICON_MAP: Record<string, LucideIcon> = {
-  Home, Users, Settings, CreditCard, Bell, Calendar, Package, BarChart3,
-  FileText, Mail, DollarSign, Megaphone, ShoppingCart, Target, Wrench,
-  ClipboardList, Briefcase, UserCog, BookOpen, MessageCircle, Globe,
-  Percent, Tag, Camera, UtensilsCrossed, Search, MapPin, Handshake,
-  Contact, Building2, ChevronDown, Filter, Plus, List, Dog, Cat, PawPrint, Heart, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
-  ArrowDownCircle, ArrowUpCircle, ArrowLeftRight, Plug, SlidersHorizontal, TableProperties, Landmark, Receipt, TrendingUp, CircleDollarSign, Clock, AlertTriangle, Sparkles, Wallet, Warehouse, Ruler, ArrowUpRight, ArrowDownRight, UserPlus, TreePalm,
-  PartyPopper, Radio, CalendarDays, Banknote, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
+  Home, Users, Settings, CreditCard, Bell, Calendar, CalendarClock, Package, Activity, BarChart3,
+  FileText, Mail, DollarSign, Megaphone, ShoppingCart, ShoppingBag, Target, Wrench,
+  ClipboardList, ClipboardCheck, Briefcase, UserCog, BookOpen, MessageCircle, Globe,
+  BookOpenCheck, Percent, Tag, Tags, Camera, UtensilsCrossed, Search, MapPin, Handshake,
+  Contact, Building2, ChevronDown, Filter, Plus, Shield, List, ListChecks, FolderOpen, Dog, Cat, PawPrint, Heart, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
+  ArrowDownCircle, ArrowUpCircle, ArrowLeftRight, Plug, SlidersHorizontal, TableProperties, Landmark, Receipt, TrendingUp, CircleDollarSign, Clock, AlertTriangle, Sparkles, Wallet, Warehouse, Ruler, ArrowUpRight, ArrowDownRight, UserPlus, UserX, TreePalm,
+  Boxes, Box, FileCheck2, PartyPopper, Radio, CalendarDays, BadgeDollarSign, Banknote, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
+  CalendarCheck2, CalendarX, ListPlus, Map, Ban, Clock3, Inbox, UserCheck, Star, Zap,
 }
 
 function getIcon(name: string): LucideIcon {
@@ -281,15 +306,19 @@ export function Topbar({
       {/* Row 1: Logo + Search + Actions */}
       <div className="border-b border-sidebar-border bg-sidebar text-sidebar-foreground">
         <div className="flex h-14 w-full items-center justify-between px-4 md:px-6">
-          {/* Left: Mobile menu + Logo */}
+          {/* Left: Mobile menu + Logo — the hamburger is only rendered when an
+              onMenuClick handler is supplied. Mobile-first apps with a bottom
+              nav omit it so the bottom bar is the primary navigation. */}
           <div className="flex items-center gap-3">
-            <button
-              onClick={onMenuClick}
-              className="inline-flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar/30 hover:text-sidebar-foreground md:hidden"
-              aria-label="Open menu"
-            >
-              <Menu className="h-5 w-5" />
-            </button>
+            {onMenuClick && (
+              <button
+                onClick={onMenuClick}
+                className="inline-flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar/30 hover:text-sidebar-foreground md:hidden"
+                aria-label="Open menu"
+              >
+                <Menu className="h-5 w-5" />
+              </button>
+            )}
             <div className="hidden shrink-0 items-center md:flex">
               {logo ?? <span className="text-lg font-bold">App</span>}
             </div>
@@ -299,7 +328,7 @@ export function Topbar({
           <div className="mx-8 hidden max-w-sm flex-1 md:flex">
             <button
               onClick={() => setCommandPaletteOpen(true)}
-              className="relative flex h-8 w-full items-center rounded-md border border-sidebar-border bg-sidebar-accent px-3 pl-8 text-sm text-sidebar-muted shadow-sm transition-colors hover:bg-card"
+              className="relative flex h-8 w-full items-center rounded-md border border-sidebar-border bg-sidebar-accent px-3 pl-8 text-sm text-sidebar-muted shadow-sm transition-colors hover:border-sidebar-foreground/25 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground"
             >
               <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-sidebar-muted" />
               <span className="text-xs">{searchPlaceholder}</span>
@@ -335,7 +364,7 @@ export function Topbar({
               const left = active.offsetLeft - el.offsetWidth / 2 + active.offsetWidth / 2
               el.scrollTo({ left: Math.max(0, left), behavior: 'smooth' })
             }
-          }} className="flex items-center gap-0.5 overflow-x-auto scrollbar-hide">
+          }} className="flex items-center gap-0.5 overflow-x-auto scrollbar-none">
             {allNav.map((item) => {
               if (item.children && item.children.length > 0) {
                 return (

package/src/layout/index.ts

@@ -1,4 +1,12 @@
-export { AppShell, type AppShellProps, type AppShellUser } from './AppShell'
+export {
+  AppShell,
+  type AppShellProps,
+  type AppShellUser,
+  type BottomNavItem,
+  type BottomNavRouteItem,
+  type BottomNavActionItem,
+  type MobileHeaderVariant,
+} from './AppShell'
 export { Sidebar, type SidebarProps, type SidebarUser, type NavigationItem, ICON_MAP } from './Sidebar'
 export { Topbar, type TopbarProps } from './Topbar'
 export {