@fayz-ai/ui 0.6.0 → 0.7.0

package/dist/{chunk-CZ6X6PZT.js → chunk-COC5DDFG.js}

@@ -1,7 +1,7 @@
-import { useCrossModuleBack, useBackHandler, SaveBarProvider, SaveBar } from './chunk-E526FHZ4.js';
-import { cn } from './chunk-DNYVEOAX.js';
+import { useCrossModuleBack, useBackHandler, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SaveBarProvider, SaveBar } from './chunk-75EFDLST.js';
+import { cn, Button } from './chunk-YRVE4FOD.js';
 import * as React3 from 'react';
-import { Workflow, Star, MessageSquare, LayoutDashboard, Award, Zap, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, Banknote, CalendarDays, Radio, PartyPopper, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, Heart, PawPrint, Cat, Dog, Search, List, Plus, Filter, Building2, Contact, Handshake, MapPin, UtensilsCrossed, Camera, Tag, Percent, Globe, MessageCircle, BookOpen, UserCog, Briefcase, ClipboardList, Wrench, Target, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Package, Calendar, Bell, CreditCard, Settings, Users, Home, PanelLeftClose, PanelLeft, Menu, ChevronRight, ChevronLeft, TreePalm, UserPlus, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, Clock, CircleDollarSign, TrendingUp, Receipt, Landmark, TableProperties, SlidersHorizontal, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, ChevronDown } from 'lucide-react';
+import { FileCheck2, Clock3, Boxes, Workflow, UserX, UserPlus, UserCheck, TrendingUp, Star, Inbox, MessageSquare, LayoutDashboard, Award, Zap, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, CircleDollarSign, Landmark, Banknote, BadgeDollarSign, CalendarX, CalendarCheck2, CalendarDays, Radio, PartyPopper, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, FolderOpen, Heart, PawPrint, Cat, Dog, Clock, Ban, Shield, Search, ListPlus, List, Plus, Filter, Building2, Contact, Handshake, Map, MapPin, UtensilsCrossed, Camera, Tags, Tag, Percent, Globe, MessageCircle, BookOpenCheck, BookOpen, UserCog, Briefcase, ListChecks, ClipboardList, ShoppingBag, Receipt, Wrench, Target, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Activity, Package, CalendarClock, Calendar, Bell, CreditCard, Settings, Users, Home, PanelLeftClose, PanelLeft, Menu, ChevronRight, ChevronLeft, PanelRightOpen, PanelRightClose, PanelRight, Clapperboard, Box, TreePalm, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, TableProperties, SlidersHorizontal, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, ChevronDown, ClipboardCheck, PiggyBank } from 'lucide-react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { create } from 'zustand';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -26,7 +26,9 @@ var ICON_MAP = {
   CreditCard,
   Bell,
   Calendar,
+  CalendarClock,
   Package,
+  Activity,
   BarChart3,
   FileText,
   Mail,
@@ -35,28 +37,39 @@ var ICON_MAP = {
   ShoppingCart,
   Target,
   Wrench,
+  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,
@@ -65,7 +78,12 @@ var ICON_MAP = {
   PartyPopper,
   Radio,
   CalendarDays,
+  CalendarCheck2,
+  CalendarX,
+  BadgeDollarSign,
   Banknote,
+  Landmark,
+  CircleDollarSign,
   Layers,
   Music,
   Eye,
@@ -77,8 +95,16 @@ var ICON_MAP = {
   Award,
   LayoutDashboard,
   MessageSquare,
+  Inbox,
   Star,
-  Workflow
+  TrendingUp,
+  UserCheck,
+  UserPlus,
+  UserX,
+  Workflow,
+  Boxes,
+  Clock3,
+  FileCheck2
 };
 function getIcon(name) {
   return ICON_MAP[name] ?? Home;
@@ -129,19 +155,37 @@ function NavItem({
   }
   return content;
 }
+function routeMatchScore(route, path) {
+  if (path === route) return route.length + 1;
+  if (route !== "/" && path.startsWith(route + "/")) return route.length;
+  return -1;
+}
+function resolveActiveRoute(navigation, path) {
+  let best = null;
+  let bestScore = 0;
+  const consider = (route) => {
+    if (!route) return;
+    const score = routeMatchScore(route, path);
+    if (score > bestScore) {
+      bestScore = score;
+      best = route;
+    }
+  };
+  for (const item of navigation) {
+    consider(item.route);
+    for (const child of item.children ?? []) consider(child.route);
+  }
+  return best;
+}
 function NavGroup({
   item,
   collapsed,
-  currentPath,
+  activeRoute,
   onNavigate
 }) {
-  const [open, setOpen] = React3.useState(
-    () => item.children?.some((c) => currentPath === c.route || currentPath.startsWith(c.route + "/")) ?? false
-  );
+  const isChildActive = item.children?.some((c) => c.route === activeRoute);
+  const [open, setOpen] = React3.useState(() => isChildActive ?? false);
   const Icon = getIcon(item.icon);
-  const isChildActive = item.children?.some(
-    (c) => currentPath === c.route || currentPath.startsWith(c.route + "/")
-  );
   if (collapsed) {
     return /* @__PURE__ */ jsxs(Tooltip.Root, { delayDuration: 0, children: [
       /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -181,7 +225,7 @@ function NavGroup({
     ),
     open && /* @__PURE__ */ jsx("div", { className: "ml-4 mt-0.5 space-y-0.5 border-l border-sidebar-border/50 pl-3", children: item.children?.map((child) => {
       const ChildIcon = getIcon(child.icon);
-      const isActive = currentPath === child.route || currentPath.startsWith(child.route + "/");
+      const isActive = child.route === activeRoute;
       return /* @__PURE__ */ jsxs(
         "button",
         {
@@ -218,6 +262,7 @@ function Sidebar({
 }) {
   const currentPath = currentPathProp;
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
+  const activeRoute = resolveActiveRoute(navigation, currentPath);
   const mainItems = navigation.filter((item) => item.section === "main");
   const secondaryItems = navigation.filter((item) => item.section === "secondary");
   const settingsItems = navigation.filter((item) => item.section === "settings");
@@ -270,24 +315,24 @@ function Sidebar({
         /* @__PURE__ */ jsxs("nav", { className: "flex-1 space-y-1 overflow-y-auto p-2", children: [
           topContent && /* @__PURE__ */ jsx("div", { className: "mb-4 space-y-2", children: topContent }),
           mainItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1", children: mainItems.map(
-            (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, currentPath, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsx(
+            (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsx(
               NavItem,
               {
                 item,
                 collapsed,
-                isActive: currentPath === item.route || currentPath.startsWith(item.route + "/"),
+                isActive: item.route === activeRoute,
                 onNavigate: handleNavigate
               },
               item.id
             )
           ) }),
           secondaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6 space-y-1", children: secondaryItems.map(
-            (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, currentPath, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsx(
+            (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsx(
               NavItem,
               {
                 item,
                 collapsed,
-                isActive: currentPath === item.route || currentPath.startsWith(item.route + "/"),
+                isActive: item.route === activeRoute,
                 onNavigate: handleNavigate
               },
               item.id
@@ -299,7 +344,7 @@ function Sidebar({
           {
             item,
             collapsed,
-            isActive: currentPath === item.route || currentPath.startsWith(item.route + "/"),
+            isActive: item.route === activeRoute,
             onNavigate: handleNavigate
           },
           item.id
@@ -408,23 +453,29 @@ var ICON_MAP2 = {
   CreditCard: CreditCard,
   Bell: Bell,
   Calendar: Calendar,
+  CalendarClock: CalendarClock,
   Package: Package,
+  Activity: Activity,
   BarChart3: BarChart3,
   FileText: FileText,
   Mail: Mail,
   DollarSign: DollarSign,
   Megaphone: Megaphone,
   ShoppingCart: ShoppingCart,
+  ShoppingBag: ShoppingBag,
   Target: Target,
   Wrench: Wrench,
   ClipboardList: ClipboardList,
+  ClipboardCheck,
   Briefcase: Briefcase,
   UserCog: UserCog,
   BookOpen: BookOpen,
   MessageCircle: MessageCircle,
   Globe: Globe,
+  BookOpenCheck: BookOpenCheck,
   Percent: Percent,
   Tag: Tag,
+  Tags: Tags,
   Camera: Camera,
   UtensilsCrossed: UtensilsCrossed,
   Search: Search,
@@ -435,7 +486,10 @@ var ICON_MAP2 = {
   ChevronDown: ChevronDown,
   Filter: Filter,
   Plus: Plus,
+  Shield: Shield,
   List: List,
+  ListChecks: ListChecks,
+  FolderOpen: FolderOpen,
   Dog: Dog,
   Cat: Cat,
   PawPrint: PawPrint,
@@ -451,11 +505,11 @@ var ICON_MAP2 = {
   Plug,
   SlidersHorizontal,
   TableProperties,
-  Landmark,
-  Receipt,
-  TrendingUp,
-  CircleDollarSign,
-  Clock,
+  Landmark: Landmark,
+  Receipt: Receipt,
+  TrendingUp: TrendingUp,
+  CircleDollarSign: CircleDollarSign,
+  Clock: Clock,
   AlertTriangle,
   Sparkles,
   Wallet,
@@ -463,11 +517,16 @@ var ICON_MAP2 = {
   Ruler,
   ArrowUpRight,
   ArrowDownRight,
-  UserPlus,
+  UserPlus: UserPlus,
+  UserX: UserX,
   TreePalm,
+  Boxes: Boxes,
+  Box,
+  FileCheck2: FileCheck2,
   PartyPopper: PartyPopper,
   Radio: Radio,
   CalendarDays: CalendarDays,
+  BadgeDollarSign: BadgeDollarSign,
   Banknote: Banknote,
   Layers: Layers,
   Music: Music,
@@ -475,7 +534,18 @@ var ICON_MAP2 = {
   ListMusic: ListMusic,
   Disc3: Disc3,
   UsersRound: UsersRound,
-  Mic: Mic
+  Mic: Mic,
+  CalendarCheck2: CalendarCheck2,
+  CalendarX: CalendarX,
+  ListPlus: ListPlus,
+  Map: Map,
+  Ban: Ban,
+  Clock3: Clock3,
+  Inbox: Inbox,
+  UserCheck: UserCheck,
+  Star: Star,
+  Zap: Zap,
+  Clapperboard
 };
 function getIcon2(name) {
   return ICON_MAP2[name] ?? Home;
@@ -560,7 +630,7 @@ function Topbar({
   return /* @__PURE__ */ jsxs("header", { "data-print": "hide", className: "sticky top-0 z-50 w-full shrink-0", children: [
     /* @__PURE__ */ jsx("div", { className: "border-b border-sidebar-border bg-sidebar text-sidebar-foreground", children: /* @__PURE__ */ jsxs("div", { className: "flex h-14 w-full items-center justify-between px-4 md:px-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(
+        onMenuClick && /* @__PURE__ */ jsx(
           "button",
           {
             onClick: onMenuClick,
@@ -575,7 +645,7 @@ function Topbar({
         "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",
           children: [
             /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-sidebar-muted" }),
             /* @__PURE__ */ jsx("span", { className: "text-xs", children: searchPlaceholder }),
@@ -606,7 +676,7 @@ 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", children: allNav.map((item) => {
+    }, className: "flex items-center gap-0.5 overflow-x-auto scrollbar-none", children: allNav.map((item) => {
       if (item.children && item.children.length > 0) {
         return /* @__PURE__ */ jsx(
           NavDropdown,
@@ -669,14 +739,22 @@ function SidebarLayout({
   topbarEnd,
   userMenuSlot,
   notificationSlot,
-  unreadCount = 0
+  unreadCount = 0,
+  hasBottomNav = false,
+  mobileHeader = "minimal"
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed);
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
   const [headerSlot, setHeaderSlot] = React3.useState(null);
   const [actionsSlot, setActionsSlot] = React3.useState(null);
-  return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsx(ModuleHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(ModuleHeaderActionsSlotContext.Provider, { value: actionsSlot, children: /* @__PURE__ */ jsxs("div", { className: "flex h-screen overflow-hidden bg-background", children: [
+  return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsx(ModuleHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(ModuleHeaderActionsSlotContext.Provider, { value: actionsSlot, children: /* @__PURE__ */ jsxs("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"
+  ), children: [
     /* @__PURE__ */ jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx(
       Sidebar,
       {
@@ -704,9 +782,12 @@ 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"
     ), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("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"
+      ), children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ jsx(
+          !hasBottomNav && /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => setMobileMenuOpen(true),
@@ -724,7 +805,7 @@ function SidebarLayout({
           topbarEnd
         ] })
       ] }),
-      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto", children }),
+      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children }),
       /* @__PURE__ */ jsx(SaveBar, {})
     ] }),
     mobileMenuOpen && /* @__PURE__ */ jsx(
@@ -764,7 +845,8 @@ function TopbarLayout({
   frame,
   currentPath,
   topbarStart,
-  topbarEnd
+  topbarEnd,
+  hasBottomNav = false
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
   return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background", children: [
@@ -783,10 +865,10 @@ function TopbarLayout({
         userMenuExtras,
         leftContent: topbarStart,
         rightContent: topbarEnd,
-        onMenuClick: () => setMobileMenuOpen(true)
+        onMenuClick: hasBottomNav ? void 0 : () => setMobileMenuOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-y-auto", frame && "md:p-2"), children: /* @__PURE__ */ jsx("div", { className: cn("min-h-full", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children }) }),
+    /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-y-auto pb-16 md:pb-0", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsx("div", { className: cn("min-h-full", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children }) }),
     /* @__PURE__ */ jsx(SaveBar, {}),
     mobileMenuOpen && /* @__PURE__ */ jsx(
       MobileOverlay,
@@ -824,7 +906,7 @@ function MinimalLayout({
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
       headerEnd && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerEnd })
     ] }),
-    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto", children })
+    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children })
   ] });
 }
 function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
@@ -886,6 +968,82 @@ function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
     )
   ] });
 }
+var BOTTOM_NAV_ICONS = {
+  Home: Home,
+  Receipt: Receipt,
+  ArrowLeftRight: ArrowLeftRight,
+  Calendar: Calendar,
+  CreditCard: CreditCard,
+  Settings: Settings,
+  Menu: Menu,
+  MessageCircle: MessageCircle,
+  Wallet: Wallet,
+  PiggyBank,
+  Plus: Plus
+};
+function FloatingProfileAvatar({ user, onClick }) {
+  if (!user) return null;
+  const label = user.fullName || user.email;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": "Profile",
+      className: "fixed right-3 top-3 z-40 md:hidden",
+      children: user.avatarUrl ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: user.avatarUrl,
+          alt: "",
+          className: "h-9 w-9 rounded-full object-cover shadow-md ring-2 ring-background"
+        }
+      ) : /* @__PURE__ */ jsx("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", children: (label || "?").charAt(0).toUpperCase() })
+    }
+  );
+}
+function MobileBottomNav({
+  items,
+  currentPath,
+  onNavigate,
+  onAction
+}) {
+  const path = currentPath ?? "";
+  return /* @__PURE__ */ jsx("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", children: items.map((item) => {
+    if (item.kind === "action") {
+      const ActionIcon = BOTTOM_NAV_ICONS[item.icon] ?? Plus;
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-start justify-center", children: /* @__PURE__ */ jsx(
+        "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",
+          children: /* @__PURE__ */ jsx(ActionIcon, { className: "h-6 w-6" })
+        }
+      ) }, item.id);
+    }
+    const isActive = item.route === "/" ? path === "/" || path === "" : path === item.route || path.startsWith(item.route + "/");
+    const Icon = BOTTOM_NAV_ICONS[item.icon] ?? Home;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        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" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs", children: item.label })
+        ]
+      },
+      item.route
+    );
+  }) });
+}
 function AppShell({
   variant,
   contentFrame,
@@ -906,13 +1064,28 @@ function AppShell({
   topbarEnd,
   sidebarTopContent,
   sidebarFooterContent,
+  bottomNav,
+  onBottomNavAction,
+  mobileHeader = "minimal",
   userMenuSlot,
   notificationSlot,
   unreadCount = 0
 }) {
+  const hasBottomNav = !!bottomNav?.length;
+  const bottomBar = hasBottomNav ? /* @__PURE__ */ jsx(
+    MobileBottomNav,
+    {
+      items: bottomNav,
+      currentPath,
+      onNavigate,
+      onAction: onBottomNavAction
+    }
+  ) : null;
+  const floatingAvatar = mobileHeader === "transparent" && user ? /* @__PURE__ */ jsx(FloatingProfileAvatar, { user, onClick: onProfile }) : null;
+  let layoutElement;
   switch (variant) {
     case "sidebar":
-      return /* @__PURE__ */ jsx(
+      layoutElement = /* @__PURE__ */ jsx(
         SidebarLayout,
         {
           navigation,
@@ -935,11 +1108,14 @@ function AppShell({
           userMenuSlot,
           notificationSlot,
           unreadCount,
+          hasBottomNav,
+          mobileHeader,
           children
         }
       );
+      break;
     case "topbar":
-      return /* @__PURE__ */ jsx(
+      layoutElement = /* @__PURE__ */ jsx(
         TopbarLayout,
         {
           navigation,
@@ -955,15 +1131,23 @@ function AppShell({
           currentPath,
           topbarStart,
           topbarEnd,
+          hasBottomNav,
           children
         }
       );
+      break;
     case "minimal":
-      return /* @__PURE__ */ jsx(MinimalLayout, { logo, user, headerEnd: topbarEnd, children });
+      layoutElement = /* @__PURE__ */ jsx(MinimalLayout, { logo, user, headerEnd: topbarEnd, children });
+      break;
     default: {
       return null;
     }
   }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    layoutElement,
+    floatingAvatar,
+    bottomBar
+  ] });
 }
 var NavTransitionContext = React3.createContext("slide");
 function NavTransitionProvider({ value, children }) {
@@ -1052,7 +1236,7 @@ function MobileTabs({ nav }) {
     }
   }, [nav]);
   return /* @__PURE__ */ jsxs("div", { className: "md:hidden -mx-1 mb-4 no-print", children: [
-    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-hide", children: nav.map((item) => {
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-none", children: nav.map((item) => {
       const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
       const hasChildren = item.children && item.children.length > 0;
       const isActive = item.active || item.children?.some((c) => c.active);
@@ -1175,7 +1359,7 @@ function ModuleHeader({ nav }) {
     const kids = item.children ?? [];
     return kids.find((c) => /list/i.test(c.id) || /^list$/i.test(c.label)) ?? kids[kids.length - 1];
   }
-  const content = /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-hide", children: nav.map((item) => {
+  const content = /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-none", children: nav.map((item) => {
     const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
     const hasChildren = item.children && item.children.length > 0;
     const isActive = item.active || item.children?.some((c) => c.active);
@@ -1231,7 +1415,92 @@ function ModulePage({ title, subtitle, nav, children, className, headerAction, s
     ] })
   ] });
 }
+var ContentSplitContext = React3.createContext(null);
+function ContentSplit({
+  children,
+  aside,
+  asideTitle,
+  asideDescription,
+  asideWidth = "20rem",
+  asideOpen,
+  onAsideOpenChange,
+  collapsible = false,
+  defaultCollapsed = false,
+  className
+}) {
+  const [internalOpen, setInternalOpen] = React3.useState(false);
+  const open = asideOpen ?? internalOpen;
+  const setOpen = onAsideOpenChange ?? setInternalOpen;
+  const [collapsed, setCollapsed] = React3.useState(collapsible && defaultCollapsed);
+  return /* @__PURE__ */ jsxs(ContentSplitContext.Provider, { value: { open, setOpen }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("lg:grid lg:items-start lg:gap-6", className),
+        style: { gridTemplateColumns: `minmax(0, 1fr) ${collapsed ? "auto" : asideWidth}` },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0", children }),
+          /* @__PURE__ */ jsx("aside", { className: "hidden lg:block lg:sticky lg:top-4", children: collapsed ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => setCollapsed(false),
+              className: "h-9 w-9 p-0",
+              "aria-label": typeof asideTitle === "string" ? asideTitle : void 0,
+              title: typeof asideTitle === "string" ? asideTitle : void 0,
+              children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-4 w-4" })
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "rounded-card border border-border bg-card", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 border-b border-border px-4 py-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: asideTitle }),
+                asideDescription && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: asideDescription })
+              ] }),
+              collapsible && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setCollapsed(true),
+                  className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+                  "aria-label": "collapse",
+                  children: /* @__PURE__ */ jsx(PanelRightClose, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-4", children: aside })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(SheetContent, { width: "max-w-sm", children: [
+      /* @__PURE__ */ jsxs(SheetHeader, { children: [
+        /* @__PURE__ */ jsx(SheetTitle, { children: asideTitle }),
+        asideDescription && /* @__PURE__ */ jsx(SheetDescription, { children: asideDescription })
+      ] }),
+      /* @__PURE__ */ jsx(SheetBody, { children: aside })
+    ] }) }) })
+  ] });
+}
+function ContentSplitTrigger({ label, iconOnly, className }) {
+  const ctx = React3.useContext(ContentSplitContext);
+  if (!ctx) return null;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      onClick: () => ctx.setOpen(true),
+      className: cn("lg:hidden", className),
+      "aria-label": typeof label === "string" ? label : void 0,
+      children: [
+        /* @__PURE__ */ jsx(PanelRight, { className: cn("h-4 w-4", !iconOnly && "mr-1.5") }),
+        !iconOnly && label
+      ]
+    }
+  );
+}
 
-export { AppShell, BackStyleProvider, ICON_MAP, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTransition, Sidebar, SubpageHeader, Topbar, useBackStyle, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition };
-//# sourceMappingURL=chunk-CZ6X6PZT.js.map
-//# sourceMappingURL=chunk-CZ6X6PZT.js.map
+export { AppShell, BackStyleProvider, ContentSplit, ContentSplitTrigger, ICON_MAP, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTransition, Sidebar, SubpageHeader, Topbar, useBackStyle, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition };
+//# sourceMappingURL=chunk-COC5DDFG.js.map
+//# sourceMappingURL=chunk-COC5DDFG.js.map