@fayz-ai/ui 0.14.0 → 0.15.0

package/dist/{chunk-MVH64JFG.js → chunk-NA3GE4H3.js}

@@ -1,8 +1,9 @@
-import { cn, useHasPageHeaderHost, usePageHeader, useLayoutStore, useRegisterPageActions, useHasPageHeaderBack, usePageHeaderSlot, useHasPageHeaderOutlet, useHasPageActions, usePageHeaderHost } from './chunk-LFZFBN3P.js';
-import { ICON_MAP } from './chunk-UZYXFEQS.js';
+import { useHasPageHeaderHost, usePageHeader, useLayoutStore, useRegisterPageActions, useHasPageHeaderBack, usePageHeaderSlot, useHasPageHeaderOutlet, useHasPageActions, usePageHeaderHost } from './chunk-FFJ2C5YH.js';
+import { cn } from './chunk-OKZ6WQB3.js';
+import { ICON_MAP } from './chunk-4GK6IHOI.js';
 import * as React7 from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, Loader2, ArrowLeft, Menu, Search, Crown, PanelLeftClose, PanelLeft, Bell, Repeat, GraduationCap, Newspaper, Clapperboard, Zap, Star, UserCheck, Inbox, Clock3, Ban, Map, ListPlus, CalendarX, CalendarCheck2, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, Banknote, BadgeDollarSign, CalendarDays, Radio, PartyPopper, FileCheck2, Box, Boxes, TreePalm, UserX, UserPlus, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, Clock, CircleDollarSign, TrendingUp, Receipt, Landmark, TableProperties, SlidersHorizontal, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, Heart, PawPrint, Cat, Dog, FolderOpen, ListChecks, List, Shield, Plus, Filter, ChevronDown, Building2, Contact, Handshake, MapPin, UtensilsCrossed, Camera, Tags, Tag, Percent, BookOpenCheck, Globe, MessageCircle, BookOpen, UserCog, Briefcase, ClipboardCheck, ClipboardList, Wrench, Target, ShoppingBag, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Activity, Package, CalendarClock, Calendar, CreditCard, Settings, Users, Home, ChevronRight, ChevronLeft, ExternalLink, PiggyBank, LogOut } from 'lucide-react';
+import { X, Loader2, ArrowLeft, Search, Bell, PanelLeft, PanelLeftClose, Menu, Crown, ChevronDown, ChevronRight, ChevronLeft, ExternalLink, CreditCard, Sparkles, Home, Plus, PiggyBank, Wallet, MessageCircle, Settings, Calendar, ArrowLeftRight, Receipt, UserCog, LogOut } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslation, useNavReferrer, routeModule, navHistoryBack } from '@fayz-ai/core';
 import * as Popover from '@radix-ui/react-popover';
@@ -40,12 +41,26 @@ var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SheetOverlay.displayName = "SheetOverlay";
-var SheetContent = React7.forwardRef(({ className, children, width, hideClose, overlay = "blur", ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+var SheetContent = React7.forwardRef(({ className, children, width, hideClose, overlay = "blur", onPointerDownOutside, onInteractOutside, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
   /* @__PURE__ */ jsx(SheetOverlay, { className: overlay === "none" ? "bg-transparent backdrop-blur-0" : overlay === "dim" ? "backdrop-blur-0" : void 0 }),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
     {
       ref,
+      onPointerDownOutside: (e) => {
+        const target = e.target;
+        if (target.closest("[data-modal-passthrough]") || target.closest("[data-radix-popper-content-wrapper]")) {
+          e.preventDefault();
+        }
+        onPointerDownOutside?.(e);
+      },
+      onInteractOutside: (e) => {
+        const target = e.target;
+        if (target.closest("[data-modal-passthrough]") || target.closest("[data-radix-popper-content-wrapper]")) {
+          e.preventDefault();
+        }
+        onInteractOutside?.(e);
+      },
       className: cn(
         "fayz-glass-surface saas-sheet-content fixed inset-y-0 right-0 z-50 flex flex-col border-l bg-card shadow-2xl outline-none",
         "w-full",
@@ -318,370 +333,6 @@ function PageHeader({ title, onBack, parentLabel, backLabel }) {
   if (hasHost) return null;
   return /* @__PURE__ */ jsx("div", { className: "mb-4", children: node });
 }
-function TopbarUserMenu({
-  user,
-  userPlan,
-  billingLabel = "Subscription",
-  onSignOut,
-  onProfile,
-  onSettings,
-  onBilling,
-  userMenuExtras
-}) {
-  const [open, setOpen] = React7.useState(false);
-  if (!user) return null;
-  const initial = (user.fullName?.trim()?.[0] ?? user.email?.[0] ?? "?").toUpperCase();
-  const item = (label, onClick, Icon) => onClick ? /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: () => {
-        setOpen(false);
-        onClick();
-      },
-      className: "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-popover-foreground transition-colors hover:bg-muted/70",
-      children: [
-        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsx("span", { children: label })
-      ]
-    },
-    label
-  ) : null;
-  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        "aria-label": "User menu",
-        className: "ml-1 flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-primary text-xs font-semibold text-primary-foreground ring-2 ring-transparent transition hover:ring-sidebar-border",
-        children: user.avatarUrl ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx("img", { src: user.avatarUrl, alt: "", className: "h-full w-full object-cover" })
-        ) : initial
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
-      Popover.Content,
-      {
-        align: "end",
-        sideOffset: 8,
-        className: "fayz-glass-surface z-50 min-w-[220px] rounded-xl border border-border bg-popover p-1.5 shadow-lg animate-in fade-in-0 zoom-in-95",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-3 py-2", children: [
-            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: user.fullName || user.email }),
-            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-0.5", children: [
-            item("Perfil", onProfile, UserCog),
-            item("Configura\xE7\xF5es", onSettings, Settings),
-            onBilling && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => {
-                  setOpen(false);
-                  onBilling();
-                },
-                className: "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-popover-foreground transition-colors hover:bg-muted/70",
-                children: [
-                  /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: billingLabel }),
-                  userPlan && /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      className: userPlan.paid ? "inline-flex items-center gap-1 rounded-full border border-amber-400/40 bg-amber-400/15 px-2 py-0.5 text-[10px] font-semibold text-amber-600 dark:text-amber-300" : "inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
-                      children: [
-                        userPlan.paid ? /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3" }),
-                        userPlan.label
-                      ]
-                    }
-                  )
-                ]
-              },
-              "billing"
-            ),
-            userMenuExtras?.map((e) => item(e.label, e.onClick)),
-            onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
-              item("Sair", onSignOut, LogOut)
-            ] })
-          ] })
-        ]
-      }
-    ) })
-  ] });
-}
-var ICON_MAP2 = {
-  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,
-  Clapperboard,
-  Newspaper,
-  GraduationCap,
-  Repeat
-};
-function getIcon(name) {
-  return ICON_MAP2[name] ?? Home;
-}
-function NavDropdown({ item, currentPath, onNavigate }) {
-  const [open, setOpen] = React7.useState(false);
-  const Icon = getIcon(item.icon);
-  const isChildActive = item.children?.some(
-    (child) => currentPath === child.route || currentPath.startsWith(child.route + "/")
-  );
-  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        "data-nav-active": isChildActive || void 0,
-        className: cn(
-          "flex items-center gap-1.5 whitespace-nowrap border-b-2 px-3 py-2 text-sm transition-colors",
-          isChildActive ? "border-sidebar-accent-foreground font-semibold text-sidebar-foreground" : "border-transparent text-sidebar-muted hover:text-sidebar-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { children: item.label }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", open && "rotate-180") })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-      Popover.Content,
-      {
-        align: "start",
-        sideOffset: 4,
-        className: "fayz-glass-surface z-50 min-w-[200px] rounded-xl border border-border bg-popover p-1.5 shadow-lg animate-in fade-in-0 zoom-in-95",
-        children: item.children?.map((child) => {
-          const ChildIcon = getIcon(child.icon);
-          const isActive = currentPath === child.route || currentPath.startsWith(child.route + "/");
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => {
-                onNavigate(child.route);
-                setOpen(false);
-              },
-              className: cn(
-                "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors",
-                isActive ? "bg-muted font-medium text-foreground" : "text-popover-foreground hover:bg-muted/70"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(ChildIcon, { className: "h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsx("span", { children: child.label })
-              ]
-            },
-            child.id
-          );
-        })
-      }
-    ) })
-  ] });
-}
-function Topbar({
-  navigation,
-  logo,
-  user,
-  onMenuClick,
-  orgSwitcher,
-  leftContent,
-  rightContent,
-  currentPath = "/",
-  onNavigate,
-  searchPlaceholder = "Search...",
-  onSignOut,
-  onProfile,
-  onSettings,
-  onBilling,
-  userPlan,
-  billingLabel,
-  userMenuExtras
-}) {
-  const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
-  const mainNav = navigation.filter((item) => item.section === "main");
-  const secondaryNav = navigation.filter((item) => item.section === "secondary");
-  const allNav = [...mainNav, ...secondaryNav];
-  const handleNavigate = (route) => {
-    onNavigate?.(route);
-  };
-  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: [
-        onMenuClick && /* @__PURE__ */ jsx(
-          "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",
-            children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center md:flex", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mx-8 hidden max-w-sm flex-1 md:flex", children: /* @__PURE__ */ jsxs(
-        "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: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 }),
-            /* @__PURE__ */ jsx("kbd", { className: "ml-auto hidden rounded border border-sidebar-border bg-sidebar-accent px-1.5 py-0.5 text-[10px] font-medium text-sidebar-muted sm:inline-block", children: "\u2318K" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
-        orgSwitcher && /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 items-center md:flex", children: orgSwitcher }),
-        leftContent,
-        rightContent,
-        /* @__PURE__ */ jsx(
-          TopbarUserMenu,
-          {
-            user,
-            userPlan,
-            billingLabel,
-            onSignOut,
-            onProfile,
-            onSettings,
-            onBilling,
-            userMenuExtras
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "hidden md:block bg-sidebar", children: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-full items-center px-4 md:px-6", children: /* @__PURE__ */ jsx("nav", { ref: (el) => {
-      if (!el) return;
-      const active = el.querySelector('[data-nav-active="true"]');
-      if (active) {
-        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-none", children: allNav.map((item) => {
-      if (item.children && item.children.length > 0) {
-        return /* @__PURE__ */ jsx(
-          NavDropdown,
-          {
-            item,
-            currentPath,
-            onNavigate: handleNavigate
-          },
-          item.id
-        );
-      }
-      const Icon = getIcon(item.icon);
-      const isActive = item.route === "/" ? currentPath === "/" : currentPath === item.route || currentPath.startsWith(item.route + "/");
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          "data-nav-active": isActive || void 0,
-          onClick: () => handleNavigate(item.route),
-          className: cn(
-            "flex items-center gap-1.5 whitespace-nowrap border-b-2 px-3 py-2 text-sm transition-colors",
-            isActive ? "border-primary font-semibold text-sidebar-foreground" : "border-transparent text-sidebar-muted hover:text-sidebar-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { children: item.label }),
-            item.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 text-amber-500", "aria-hidden": true }),
-            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground", children: item.badge })
-          ]
-        },
-        item.id
-      );
-    }) }) }) })
-  ] });
-}
 var GUTTER_PX = 8;
 var CLOSE_DELAY_MS = 140;
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React7.useLayoutEffect : React7.useEffect;
@@ -895,7 +546,7 @@ function FlyoutBody({
 }
 var RAIL_PUSH_MS = 260;
 var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React7.useLayoutEffect : React7.useEffect;
-function getIcon2(name) {
+function getIcon(name) {
   return ICON_MAP[name] ?? Home;
 }
 function shortcutKey() {
@@ -928,7 +579,7 @@ function NavItem({
   onNavigate,
   flyout
 }) {
-  const Icon = getIcon2(item.icon);
+  const Icon = getIcon(item.icon);
   const isExternal = !!item.href;
   const hoverProps = collapsed && flyout ? flyout.rowProps(flyoutContentOf(item)) : void 0;
   const className = cn(
@@ -938,7 +589,7 @@ function NavItem({
     // as cramped rather than as dense.
     "flex w-full items-center gap-3 rounded-button px-2.5 py-2 text-[13px] font-medium transition-colors",
     "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
-    isActive ? "bg-sidebar-accent font-semibold text-sidebar-accent-foreground shadow-sm" : "text-sidebar-foreground/80",
+    isActive ? "bg-sidebar-accent font-semibold text-sidebar-accent-foreground" : "text-sidebar-foreground/80",
     collapsed && "justify-center px-2"
   );
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -995,7 +646,7 @@ function NavGroup({
 }) {
   const isChildActive = item.children?.some((c) => c.route === activeRoute);
   const [open, setOpen] = React7.useState(() => isChildActive ?? false);
-  const Icon = getIcon2(item.icon);
+  const Icon = getIcon(item.icon);
   if (collapsed) {
     const hoverProps = flyout?.rowProps(flyoutContentOf(item));
     return /* @__PURE__ */ jsx(
@@ -1050,7 +701,7 @@ function NavGroup({
       // along with the labels and land the arrowhead on top of the text.
       childConnector ? "relative" : "ml-4 space-y-0.5 border-l border-sidebar-border/50 pl-3"
     ), children: item.children?.map((child, childIndex) => {
-      const ChildIcon = getIcon2(child.icon);
+      const ChildIcon = getIcon(child.icon);
       const isActive = child.route === activeRoute;
       const childExternal = !!child.href;
       const childClass = cn(
@@ -1144,6 +795,7 @@ function Sidebar({
   user: _user,
   orgSwitcher,
   topContent,
+  identity,
   navTop,
   footerContent,
   borderless,
@@ -1154,7 +806,8 @@ function Sidebar({
   sectionLabels,
   navKey,
   navDirection = "forward",
-  navChildConnector
+  navChildConnector,
+  drawer
 }) {
   const currentPath = currentPathProp;
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
@@ -1205,7 +858,6 @@ function Sidebar({
     item.id
   );
   const navBody = /* @__PURE__ */ jsxs(Fragment, { children: [
-    navTop && /* @__PURE__ */ jsx("div", { className: "mb-2", children: withCollapsed(navTop, collapsed) }),
     mainItems.length > 0 && renderSection(mainItems, sectionLabels?.main),
     secondaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: renderSection(secondaryItems, sectionLabels?.secondary) })
   ] });
@@ -1234,162 +886,435 @@ function Sidebar({
     /* @__PURE__ */ jsx(RailFlyoutProvider, { value: flyout, children: /* @__PURE__ */ jsxs(
       "aside",
       {
-        ref: railRef,
-        "data-print": "hide",
-        onBlur: (event) => {
-          if (!event.currentTarget.contains(event.relatedTarget)) flyout.dismiss();
-        },
+        ref: railRef,
+        "data-print": "hide",
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) flyout.dismiss();
+        },
+        className: cn(
+          // `relative` anchors the flyout, which hangs off the rail's right edge
+          // and has to escape the nav's own scroll box to do it.
+          "relative flex h-full flex-col bg-sidebar text-sidebar-foreground transition-all duration-200",
+          !borderless && "border-r border-sidebar-border",
+          // 14rem expanded. It was 16rem, which is the width a rail needs when
+          // its entries are sentences ("GlossGenius Financing", "Configure your
+          // payment methods"); these are one or two words, so the extra 2rem was
+          // paid for by the content column on every screen in every app. The
+          // labels still truncate, and a long one now truncates 32px earlier —
+          // which is the trade, taken deliberately.
+          collapsed ? "w-16" : "w-56"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", !borderless && "border-b border-sidebar-border"), children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-1 px-2",
+                  // h-12 com a conta embaixo (48 + 44 + 8 = 100px, na régua de 4/8),
+                  // h-14 quando a marca é a única coisa aqui e a linha tem de bater
+                  // com o cabeçalho da página.
+                  identity ? "h-12" : "h-14",
+                  collapsed && "justify-center"
+                ),
+                children: [
+                  topContent ? /* @__PURE__ */ jsx("div", { className: cn("min-w-0", collapsed ? "flex justify-center" : "flex-1"), children: withCollapsed(topContent, collapsed) }) : !collapsed && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 px-1.5", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
+                  drawer && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: onToggle,
+                      className: "fz-tap shrink-0 rounded-button p-1.5 text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                      "aria-label": "Close menu",
+                      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                    }
+                  )
+                ]
+              }
+            ),
+            identity && /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-2", collapsed && "flex justify-center"), children: withCollapsed(identity, collapsed) })
+          ] }),
+          navTop ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 pt-2", children: withCollapsed(navTop, collapsed) }) : (
+            /* Search — above the first destination. It used to be a 16px magnifier
+                tucked beside the avatar at the very bottom, which is where you put
+                something nobody is meant to find: the fastest way through an admin
+                with thirty screens was the one control shaped like an afterthought.
+                Here it reads as what it is — a field — and says which key opens it.
+                Clicking it opens the same palette ⌘K does; it is a button, not an
+                input, because typing happens there. */
+            /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 pt-2", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setCommandPaletteOpen(true),
+                "aria-keyshortcuts": "Meta+K Control+K",
+                className: cn(
+                  // Tonal surface, no outline. On a dark rail a 1px border is a hard
+                  // edge competing with every other hard edge; a lighter fill of the
+                  // same hue reads as "a field" without drawing a box around it — and
+                  // leaves the outline treatment free to mean focus, which it must.
+                  "fz-tap group flex items-center rounded-lg bg-sidebar-accent/40 text-sidebar-muted transition-colors",
+                  "hover:bg-sidebar-accent/70 hover:text-sidebar-foreground",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-accent-foreground/50",
+                  collapsed ? "h-9 w-9 justify-center" : "h-9 w-full gap-2.5 px-2.5"
+                ),
+                "aria-label": searchLabel,
+                title: collapsed ? searchLabel : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0" }),
+                  !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left text-[13px]", children: searchLabel }),
+                    /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11px] font-medium tabular-nums text-sidebar-muted/60 transition-opacity group-hover:opacity-100 md:opacity-70", children: [
+                      shortcutKey(),
+                      "K"
+                    ] })
+                  ] })
+                ]
+              }
+            ) })
+          ),
+          /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              className: cn(
+                "relative flex-1 p-2",
+                // scrollbar-none: the rail still scrolls, but without the native
+                // scrollbar gutter eating into the nav items.
+                outgoing ? "overflow-hidden" : "overflow-y-auto scrollbar-none"
+              ),
+              children: [
+                outgoing && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: cn(
+                      "pointer-events-none absolute inset-x-2 top-2 space-y-1",
+                      outgoing.direction === "back" ? "saas-rail-out-back" : "saas-rail-out-forward"
+                    ),
+                    children: outgoing.body
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "space-y-1",
+                      outgoing && (outgoing.direction === "back" ? "saas-rail-in-back" : "saas-rail-in-forward")
+                    ),
+                    children: navBody
+                  },
+                  navKey
+                )
+              ]
+            }
+          ),
+          settingsItems.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("p-2 space-y-1", !borderless && "border-t border-sidebar-border"), children: settingsItems.map((item) => /* @__PURE__ */ jsx(
+            NavItem,
+            {
+              item,
+              collapsed,
+              isActive: item.route === activeRoute,
+              onNavigate: handleNavigate,
+              flyout
+            },
+            item.id
+          )) }),
+          footerContent && // `empty:hidden` — slot children may all render null (e.g. the
+          // SeuSiteWidget self-hides when the tenant has no project); without
+          // it the padded/bordered wrapper shows as a blank block.
+          /* @__PURE__ */ jsx("div", { className: cn("space-y-2 p-2 empty:hidden", !borderless && "border-t border-sidebar-border"), children: footerContent }),
+          withCollapsed(orgSwitcher, collapsed),
+          /* @__PURE__ */ jsx("div", { className: cn("p-2", !borderless && "border-t border-sidebar-border"), children: /* @__PURE__ */ jsxs("div", { className: cn(
+            "flex items-center rounded-button",
+            collapsed ? "flex-col gap-1" : "gap-1 px-1"
+          ), children: [
+            userMenuSlot,
+            !collapsed && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+            notificationSlot ?? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "fz-tap relative inline-flex shrink-0 items-center justify-center rounded-button p-2 text-sidebar-muted transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
+                "aria-label": unreadCount > 0 ? `${unreadCount} unread notifications` : "Notifications",
+                children: [
+                  /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }),
+                  unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 h-2 w-2 rounded-full bg-destructive" })
+                ]
+              }
+            ),
+            !drawer && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onToggle,
+                className: "fz-tap inline-flex shrink-0 items-center justify-center rounded-button p-2 text-sidebar-muted transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
+                "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                children: collapsed ? /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+              }
+            )
+          ] }) }),
+          flyout.panel
+        ]
+      }
+    ) })
+  );
+}
+function TopbarUserMenu({
+  user,
+  userPlan,
+  billingLabel = "Subscription",
+  onSignOut,
+  onProfile,
+  onSettings,
+  onBilling,
+  userMenuExtras
+}) {
+  const [open, setOpen] = React7.useState(false);
+  if (!user) return null;
+  const initial = (user.fullName?.trim()?.[0] ?? user.email?.[0] ?? "?").toUpperCase();
+  const item = (label, onClick, Icon) => onClick ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => {
+        setOpen(false);
+        onClick();
+      },
+      className: "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-popover-foreground transition-colors hover:bg-muted/70",
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    },
+    label
+  ) : null;
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "User menu",
+        className: "ml-1 flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-primary text-xs font-semibold text-primary-foreground ring-2 ring-transparent transition hover:ring-sidebar-border",
+        children: user.avatarUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx("img", { src: user.avatarUrl, alt: "", className: "h-full w-full object-cover" })
+        ) : initial
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align: "end",
+        sideOffset: 8,
+        className: "fayz-glass-surface z-50 min-w-[220px] rounded-xl border border-border bg-popover p-1.5 shadow-lg animate-in fade-in-0 zoom-in-95",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: user.fullName || user.email }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-0.5", children: [
+            item("Perfil", onProfile, UserCog),
+            item("Configura\xE7\xF5es", onSettings, Settings),
+            onBilling && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => {
+                  setOpen(false);
+                  onBilling();
+                },
+                className: "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-popover-foreground transition-colors hover:bg-muted/70",
+                children: [
+                  /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: billingLabel }),
+                  userPlan && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: userPlan.paid ? "inline-flex items-center gap-1 rounded-full border border-amber-400/40 bg-amber-400/15 px-2 py-0.5 text-[10px] font-semibold text-amber-600 dark:text-amber-300" : "inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+                      children: [
+                        userPlan.paid ? /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3" }),
+                        userPlan.label
+                      ]
+                    }
+                  )
+                ]
+              },
+              "billing"
+            ),
+            userMenuExtras?.map((e) => item(e.label, e.onClick)),
+            onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+              item("Sair", onSignOut, LogOut)
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+function getIcon2(name) {
+  return ICON_MAP[name] ?? Home;
+}
+function NavDropdown({ item, currentPath, onNavigate }) {
+  const [open, setOpen] = React7.useState(false);
+  const Icon = getIcon2(item.icon);
+  const isChildActive = item.children?.some(
+    (child) => currentPath === child.route || currentPath.startsWith(child.route + "/")
+  );
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-nav-active": isChildActive || void 0,
         className: cn(
-          // `relative` anchors the flyout, which hangs off the rail's right edge
-          // and has to escape the nav's own scroll box to do it.
-          "relative flex h-full flex-col bg-sidebar text-sidebar-foreground transition-all duration-200",
-          !borderless && "border-r border-sidebar-border",
-          // 14rem expanded. It was 16rem, which is the width a rail needs when
-          // its entries are sentences ("GlossGenius Financing", "Configure your
-          // payment methods"); these are one or two words, so the extra 2rem was
-          // paid for by the content column on every screen in every app. The
-          // labels still truncate, and a long one now truncates 32px earlier —
-          // which is the trade, taken deliberately.
-          collapsed ? "w-16" : "w-56"
+          "flex items-center gap-1.5 whitespace-nowrap border-b-2 px-3 py-2 text-sm transition-colors",
+          isChildActive ? "border-sidebar-accent-foreground font-semibold text-sidebar-foreground" : "border-transparent text-sidebar-muted hover:text-sidebar-foreground"
         ),
         children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex h-14 items-center justify-between px-4",
-                !borderless && "border-b border-sidebar-border",
-                collapsed && "justify-center px-2"
-              ),
-              children: [
-                !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: onToggle,
-                      className: "ml-auto rounded-button p-1.5 text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                      "aria-label": "Collapse sidebar",
-                      children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
-                    }
-                  )
-                ] }),
-                collapsed && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: onToggle,
-                    className: "rounded-button p-1.5 text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                    "aria-label": "Expand sidebar",
-                    children: /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" })
-                  }
-                )
-              ]
-            }
-          ),
-          topContent && /* @__PURE__ */ jsx("div", { className: "px-2 pt-2", children: withCollapsed(topContent, collapsed) }),
-          /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 pt-2", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", open && "rotate-180") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: "fayz-glass-surface z-50 min-w-[200px] rounded-xl border border-border bg-popover p-1.5 shadow-lg animate-in fade-in-0 zoom-in-95",
+        children: item.children?.map((child) => {
+          const ChildIcon = getIcon2(child.icon);
+          const isActive = currentPath === child.route || currentPath.startsWith(child.route + "/");
+          return /* @__PURE__ */ jsxs(
             "button",
             {
-              onClick: () => setCommandPaletteOpen(true),
-              "aria-keyshortcuts": "Meta+K Control+K",
-              className: cn(
-                // Tonal surface, no outline. On a dark rail a 1px border is a hard
-                // edge competing with every other hard edge; a lighter fill of the
-                // same hue reads as "a field" without drawing a box around it — and
-                // leaves the outline treatment free to mean focus, which it must.
-                "fz-tap group flex items-center rounded-lg bg-sidebar-accent/40 text-sidebar-muted transition-colors",
-                "hover:bg-sidebar-accent/70 hover:text-sidebar-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-accent-foreground/50",
-                collapsed ? "h-9 w-9 justify-center" : "h-9 w-full gap-2.5 px-2.5"
-              ),
-              "aria-label": searchLabel,
-              title: collapsed ? searchLabel : void 0,
-              children: [
-                /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0" }),
-                !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left text-[13px]", children: searchLabel }),
-                  /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11px] font-medium tabular-nums text-sidebar-muted/60 transition-opacity group-hover:opacity-100 md:opacity-70", children: [
-                    shortcutKey(),
-                    "K"
-                  ] })
-                ] })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            "nav",
-            {
+              onClick: () => {
+                onNavigate(child.route);
+                setOpen(false);
+              },
               className: cn(
-                "relative flex-1 p-2",
-                // scrollbar-none: the rail still scrolls, but without the native
-                // scrollbar gutter eating into the nav items.
-                outgoing ? "overflow-hidden" : "overflow-y-auto scrollbar-none"
+                "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors",
+                isActive ? "bg-muted font-medium text-foreground" : "text-popover-foreground hover:bg-muted/70"
               ),
               children: [
-                outgoing && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "aria-hidden": true,
-                    className: cn(
-                      "pointer-events-none absolute inset-x-2 top-2 space-y-1",
-                      outgoing.direction === "back" ? "saas-rail-out-back" : "saas-rail-out-forward"
-                    ),
-                    children: outgoing.body
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "space-y-1",
-                      outgoing && (outgoing.direction === "back" ? "saas-rail-in-back" : "saas-rail-in-forward")
-                    ),
-                    children: navBody
-                  },
-                  navKey
-                )
+                /* @__PURE__ */ jsx(ChildIcon, { className: "h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { children: child.label })
               ]
-            }
-          ),
-          settingsItems.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("p-2 space-y-1", !borderless && "border-t border-sidebar-border"), children: settingsItems.map((item) => /* @__PURE__ */ jsx(
-            NavItem,
-            {
-              item,
-              collapsed,
-              isActive: item.route === activeRoute,
-              onNavigate: handleNavigate,
-              flyout
             },
-            item.id
-          )) }),
-          footerContent && // `empty:hidden` — slot children may all render null (e.g. the
-          // SeuSiteWidget self-hides when the tenant has no project); without
-          // it the padded/bordered wrapper shows as a blank block.
-          /* @__PURE__ */ jsx("div", { className: cn("space-y-2 p-2 empty:hidden", !borderless && "border-t border-sidebar-border"), children: footerContent }),
-          withCollapsed(orgSwitcher, collapsed),
-          /* @__PURE__ */ jsx("div", { className: cn("p-2", !borderless && "border-t border-sidebar-border"), children: /* @__PURE__ */ jsxs("div", { className: cn(
-            "flex items-center rounded-button",
-            collapsed ? "flex-col gap-1" : "gap-1 px-1"
-          ), children: [
-            userMenuSlot,
-            !collapsed && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-            notificationSlot ?? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                className: "fz-tap relative inline-flex shrink-0 items-center justify-center rounded-button p-2 text-sidebar-muted transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
-                "aria-label": unreadCount > 0 ? `${unreadCount} unread notifications` : "Notifications",
-                children: [
-                  /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }),
-                  unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 h-2 w-2 rounded-full bg-destructive" })
-                ]
-              }
-            )
-          ] }) }),
-          flyout.panel
-        ]
+            child.id
+          );
+        })
       }
     ) })
-  );
+  ] });
+}
+function Topbar({
+  navigation,
+  logo,
+  user,
+  onMenuClick,
+  orgSwitcher,
+  leftContent,
+  rightContent,
+  currentPath = "/",
+  onNavigate,
+  searchPlaceholder = "Search...",
+  onSignOut,
+  onProfile,
+  onSettings,
+  onBilling,
+  userPlan,
+  billingLabel,
+  userMenuExtras,
+  userMenuSlot
+}) {
+  const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
+  const mainNav = navigation.filter((item) => item.section === "main");
+  const secondaryNav = navigation.filter((item) => item.section === "secondary");
+  const allNav = [...mainNav, ...secondaryNav];
+  const handleNavigate = (route) => {
+    onNavigate?.(route);
+  };
+  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 min-w-0 items-center gap-3", children: [
+        onMenuClick && /* @__PURE__ */ jsx(
+          "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",
+            children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 shrink-0 items-center md:flex", children: orgSwitcher ?? logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mx-8 hidden max-w-sm flex-1 md:flex", children: /* @__PURE__ */ jsxs(
+        "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: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 }),
+            /* @__PURE__ */ jsx("kbd", { className: "ml-auto hidden rounded border border-sidebar-border bg-sidebar-accent px-1.5 py-0.5 text-[10px] font-medium text-sidebar-muted sm:inline-block", children: "\u2318K" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+        leftContent,
+        rightContent,
+        userMenuSlot ?? /* @__PURE__ */ jsx(
+          TopbarUserMenu,
+          {
+            user,
+            userPlan,
+            billingLabel,
+            onSignOut,
+            onProfile,
+            onSettings,
+            onBilling,
+            userMenuExtras
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "hidden md:block bg-sidebar", children: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-full items-center px-4 md:px-6", children: /* @__PURE__ */ jsx("nav", { ref: (el) => {
+      if (!el) return;
+      const active = el.querySelector('[data-nav-active="true"]');
+      if (active) {
+        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-none", children: allNav.map((item) => {
+      if (item.children && item.children.length > 0) {
+        return /* @__PURE__ */ jsx(
+          NavDropdown,
+          {
+            item,
+            currentPath,
+            onNavigate: handleNavigate
+          },
+          item.id
+        );
+      }
+      const Icon = getIcon2(item.icon);
+      const isActive = item.route === "/" ? currentPath === "/" : currentPath === item.route || currentPath.startsWith(item.route + "/");
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          "data-nav-active": isActive || void 0,
+          onClick: () => handleNavigate(item.route),
+          className: cn(
+            "flex items-center gap-1.5 whitespace-nowrap border-b-2 px-3 py-2 text-sm transition-colors",
+            isActive ? "border-primary font-semibold text-sidebar-foreground" : "border-transparent text-sidebar-muted hover:text-sidebar-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { children: item.label }),
+            item.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 text-amber-500", "aria-hidden": true }),
+            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground", children: item.badge })
+          ]
+        },
+        item.id
+      );
+    }) }) }) })
+  ] });
 }
 var ModuleHeaderSlotContext = React7.createContext(null);
 function useModuleHeaderSlot() {
@@ -1423,6 +1348,7 @@ function SidebarLayout({
   userMenuExtras: _userMenuExtras,
   orgSwitcher,
   sidebarTopContent,
+  sidebarIdentity,
   sidebarNavTop,
   sidebarFooterContent,
   frame,
@@ -1440,7 +1366,8 @@ function SidebarLayout({
   sidebarSectionLabels,
   sidebarNavKey,
   sidebarNavDirection,
-  sidebarNavChildConnector
+  sidebarNavChildConnector,
+  railOpen
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed);
   const pageHeaderSlot = usePageHeaderSlot();
@@ -1474,6 +1401,7 @@ function SidebarLayout({
         onBilling,
         orgSwitcher,
         topContent: sidebarTopContent,
+        identity: sidebarIdentity,
         navTop: sidebarNavTop,
         footerContent: sidebarFooterContent,
         borderless: frame,
@@ -1492,7 +1420,13 @@ function SidebarLayout({
       // `content`, not `card`: this is the page's own surface, and cards have
       // to sit ON it. Painted card, the frame was the same tone as everything
       // inside it and the page read as one flat sheet.
-      frame && "md:m-2 md:rounded-xl md:border md:border-border md:bg-content"
+      frame && "md:my-2 md:ml-2 md:rounded-xl md:border md:border-border md:bg-content",
+      // With a companion rail open, the page and the rail are ONE card: the
+      // right edge opens and the rail closes it. Two cards with a strip of
+      // chrome between them made the assistant read as a separate window
+      // parked next to the app rather than as a column of it — the rail's own
+      // left border is then the single seam between the two.
+      frame && (railOpen ? "md:rounded-r-none md:border-r-0" : "md:mr-2")
     ), children: [
       /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
       /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 flex-col overflow-hidden", children: [
@@ -1539,6 +1473,7 @@ function SidebarLayout({
         onBilling,
         orgSwitcher,
         topContent: sidebarTopContent,
+        identity: sidebarIdentity,
         navTop: sidebarNavTop,
         footerContent: sidebarFooterContent,
         userMenuSlot,
@@ -1563,6 +1498,7 @@ function TopbarLayout({
   userPlan,
   billingLabel,
   userMenuExtras,
+  userMenuSlot,
   orgSwitcher,
   frame,
   currentPath,
@@ -1599,6 +1535,7 @@ function TopbarLayout({
         userPlan,
         billingLabel,
         userMenuExtras,
+        userMenuSlot,
         orgSwitcher,
         leftContent: topbarStart,
         rightContent: topbarEnd || notificationSlot ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1710,6 +1647,7 @@ function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
             ...sidebarProps,
             collapsed: false,
             onToggle: close,
+            drawer: true,
             borderless: true,
             onNavigate: (route) => {
               onNavigate?.(route);
@@ -1723,16 +1661,16 @@ function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
 }
 var BOTTOM_NAV_ICONS = {
   Home: Home,
-  Receipt: Receipt,
-  ArrowLeftRight: ArrowLeftRight,
-  Calendar: Calendar,
+  Receipt,
+  ArrowLeftRight,
+  Calendar,
   CreditCard: CreditCard,
   Settings: Settings,
   Menu: Menu,
-  MessageCircle: MessageCircle,
-  Wallet: Wallet,
+  MessageCircle,
+  Wallet,
   PiggyBank,
-  Plus: Plus
+  Plus
 };
 function FloatingProfileAvatar({ user, onClick }) {
   if (!user) return null;
@@ -1819,6 +1757,7 @@ function AppShell({
   topbarStart,
   topbarEnd,
   sidebarTopContent,
+  sidebarIdentity,
   sidebarNavTop,
   sidebarFooterContent,
   bottomNav,
@@ -1868,6 +1807,7 @@ function AppShell({
           userMenuExtras,
           orgSwitcher,
           sidebarTopContent,
+          sidebarIdentity,
           sidebarNavTop,
           sidebarFooterContent,
           frame: contentFrame,
@@ -1886,6 +1826,7 @@ function AppShell({
           sidebarNavKey,
           sidebarNavDirection,
           sidebarNavChildConnector,
+          railOpen: !!rightRail && rightRailOpen,
           children
         }
       );
@@ -1905,6 +1846,7 @@ function AppShell({
           userPlan,
           billingLabel,
           userMenuExtras,
+          userMenuSlot,
           orgSwitcher,
           frame: contentFrame,
           currentPath,
@@ -2026,7 +1968,11 @@ function SplitWithRightRail({
             }
           },
           className: cn(
-            "group relative hidden w-1 shrink-0 cursor-col-resize focus-visible:outline-none",
+            // Zero width: the divider USED to be a 4px gutter, which meant the
+            // page and the rail could never touch — there was always a strip of
+            // chrome between them. It now sits exactly on the seam the rail's own
+            // left border draws, and lights that border up when you reach for it.
+            "group relative hidden w-0 shrink-0 cursor-col-resize focus-visible:outline-none",
             open && "md:block"
           ),
           children: [
@@ -2034,7 +1980,7 @@ function SplitWithRightRail({
               "span",
               {
                 className: cn(
-                  "absolute inset-y-6 left-1/2 w-px -translate-x-1/2 rounded-full bg-transparent transition-colors",
+                  "absolute inset-y-6 -left-px w-0.5 rounded-full bg-transparent transition-colors",
                   "group-hover:bg-primary/60 group-focus-visible:bg-primary",
                   dragging && "bg-primary"
                 )
@@ -2067,6 +2013,7 @@ function HeaderTabs({
   value,
   onChange,
   className,
+  fill,
   ...rest
 }) {
   return /* @__PURE__ */ jsx(
@@ -2075,7 +2022,8 @@ function HeaderTabs({
       role: "tablist",
       "aria-label": rest["aria-label"],
       className: cn(
-        "inline-flex max-w-full items-center gap-5 overflow-x-auto scrollbar-none",
+        "inline-flex max-w-full gap-5 overflow-x-auto scrollbar-none",
+        fill ? "items-stretch" : "items-center",
         className
       ),
       children: tabs.map((tab) => {
@@ -2089,7 +2037,10 @@ function HeaderTabs({
             "aria-selected": active,
             onClick: () => onChange(tab.value),
             className: cn(
-              "relative flex shrink-0 items-center gap-1.5 whitespace-nowrap pb-1.5 text-sm transition-colors",
+              "relative flex shrink-0 items-center gap-1.5 whitespace-nowrap text-sm transition-colors",
+              // Filled: the row owns the band's height and the underline sits on
+              // its bottom edge. Otherwise the underline trails the label by 6px.
+              fill ? "h-full" : "pb-1.5",
               active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
             ),
             children: [
@@ -2173,7 +2124,7 @@ function useModuleLayout() {
 }
 function RailNavItem({ item }) {
   const [expanded, setExpanded] = React7.useState(true);
-  const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
+  const Icon = item.icon ? ICON_MAP[item.icon] ?? null : null;
   const hasChildren = item.children && item.children.length > 0;
   const hasActiveChild = hasChildren && item.children.some((c) => c.active);
   const isActive = item.active || hasActiveChild;
@@ -2227,7 +2178,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-none", children: nav.map((item) => {
-      const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
+      const Icon = item.icon ? ICON_MAP[item.icon] ?? null : null;
       const hasChildren = item.children && item.children.length > 0;
       const isActive = item.active || item.children?.some((c) => c.active);
       const isExpanded = expandedId === item.id;
@@ -2298,7 +2249,7 @@ function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, ba
   const effectiveOnBack = inline ? onBack : cross.onBack;
   const effectiveParentLabel = inline ? parentLabel : cross.parentLabel;
   useBackHandler(effectiveOnBack);
-  const Icon = icon ? ICON_MAP2[icon] ?? null : null;
+  const Icon = icon ? ICON_MAP[icon] ?? null : null;
   if (inline && effectiveOnBack) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
@@ -2399,7 +2350,7 @@ function ModuleHeader({ nav }) {
   const tabs = nav.map((item) => ({
     value: item.id,
     label: item.label,
-    icon: item.icon ? ICON_MAP2[item.icon] ?? void 0 : void 0,
+    icon: item.icon ? ICON_MAP[item.icon] ?? void 0 : void 0,
     // Plan-gated views keep their upgrade marker — dropping it would hide the
     // only signal that the tab costs an upgrade.
     badge: item.premium ? /* @__PURE__ */ jsx(PremiumBadge, {}) : void 0
@@ -2445,5 +2396,5 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
 }
 
 export { AppShell, BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageRail, PageTabs, PageTransition, RailNavItem, SaveBar, SaveBarProvider, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SubpageHeader, Topbar, useBackHandler, useBackStyle, useCrossModuleBack, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, useRailRow, useSaveBar, useSaveBarVisible };
-//# sourceMappingURL=chunk-MVH64JFG.js.map
-//# sourceMappingURL=chunk-MVH64JFG.js.map
+//# sourceMappingURL=chunk-NA3GE4H3.js.map
+//# sourceMappingURL=chunk-NA3GE4H3.js.map