@fayz-ai/ui 0.11.0 → 0.14.0

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

@@ -1,40 +1,720 @@
-import { useHasPageHeaderHost, useCrossModuleBack, useBackHandler, PageHeaderCrumb, usePageHeader, PageHeaderOutlet, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, HeaderTabs, usePageHeaderSlot, useHasPageHeaderOutlet, usePageHeaderHost, SaveBarProvider, SaveBar } from './chunk-VAKWUUVC.js';
-import { useLayoutStore } from './chunk-ZBQ772DU.js';
-import { cn, Button } from './chunk-OKZ6WQB3.js';
-import { ICON_MAP } from './chunk-22EVFMS3.js';
-import * as React from 'react';
-import { PanelLeftClose, PanelLeft, Search, Bell, Menu, Crown, 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, PanelRightOpen, PanelRightClose, PanelRight, ExternalLink, PiggyBank, LogOut } from 'lucide-react';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { cn, useHasPageHeaderHost, usePageHeader, useLayoutStore, useRegisterPageActions, useHasPageHeaderBack, usePageHeaderSlot, useHasPageHeaderOutlet, useHasPageActions, usePageHeaderHost } from './chunk-LFZFBN3P.js';
+import { ICON_MAP } from './chunk-UZYXFEQS.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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useTranslation, useNavReferrer, routeModule, navHistoryBack } from '@fayz-ai/core';
 import * as Popover from '@radix-ui/react-popover';
 import { createPortal } from 'react-dom';
-import { useTranslation } from '@fayz-ai/core';
 
+var STYLE_ID = "saas-sheet-styles";
+if (typeof document !== "undefined" && !document.getElementById(STYLE_ID)) {
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    @keyframes saas-sheet-fade-in { from { opacity: 0 } to { opacity: 1 } }
+    @keyframes saas-sheet-fade-out { from { opacity: 1 } to { opacity: 0 } }
+    @keyframes saas-sheet-slide-in { from { transform: translateX(100%) } to { transform: translateX(0) } }
+    @keyframes saas-sheet-slide-out { from { transform: translateX(0) } to { transform: translateX(100%) } }
+    .saas-sheet-overlay[data-state="open"] { animation: saas-sheet-fade-in 200ms ease-out }
+    .saas-sheet-overlay[data-state="closed"] { animation: saas-sheet-fade-out 150ms ease-in }
+    .saas-sheet-content[data-state="open"] { animation: saas-sheet-slide-in 280ms cubic-bezier(0.16, 1, 0.3, 1) }
+    .saas-sheet-content[data-state="closed"] { animation: saas-sheet-slide-out 200ms ease-in }
+  `;
+  document.head.appendChild(style);
+}
+var Sheet = DialogPrimitive.Root;
+var SheetTrigger = DialogPrimitive.Trigger;
+var SheetClose = DialogPrimitive.Close;
+var SheetPortal = DialogPrimitive.Portal;
+var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "saas-sheet-overlay fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+SheetOverlay.displayName = "SheetOverlay";
+var SheetContent = React7.forwardRef(({ className, children, width, hideClose, overlay = "blur", ...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,
+      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",
+        width ?? "max-w-md",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        !hideClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 z-10 flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = "SheetContent";
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col gap-1 px-5 py-4 border-b shrink-0", className),
+      ...props
+    }
+  );
+}
+SheetHeader.displayName = "SheetHeader";
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2 px-5 py-3 border-t shrink-0", className),
+      ...props
+    }
+  );
+}
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-sm font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-xs text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = "SheetDescription";
+function SheetBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex-1 overflow-y-auto px-5 py-5", className),
+      ...props
+    }
+  );
+}
+SheetBody.displayName = "SheetBody";
+var SaveBarApiContext = React7.createContext(null);
+var SaveBarStateContext = React7.createContext({ visible: false, saving: false });
+var _saveBarVisible = false;
+var _saveBarSubs = /* @__PURE__ */ new Set();
+function setSaveBarVisibleSignal(v) {
+  if (v === _saveBarVisible) return;
+  _saveBarVisible = v;
+  _saveBarSubs.forEach((fn) => fn());
+}
+function useSaveBarVisible() {
+  return React7.useSyncExternalStore(
+    (cb) => {
+      _saveBarSubs.add(cb);
+      return () => {
+        _saveBarSubs.delete(cb);
+      };
+    },
+    () => _saveBarVisible,
+    () => false
+  );
+}
+function SaveBarProvider({ children }) {
+  const [state, setState] = React7.useState({ visible: false, saving: false });
+  const handlers = React7.useRef({});
+  const api = React7.useMemo(() => ({ setState, handlers }), []);
+  const backStack = React7.useRef([]);
+  const backApi = React7.useMemo(() => ({ stack: backStack }), []);
+  React7.useEffect(() => {
+    setSaveBarVisibleSignal(state.visible);
+  }, [state.visible]);
+  React7.useEffect(() => {
+    function onKey(e) {
+      if (state.visible && !state.saving) {
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          handlers.current.onSave?.();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          handlers.current.onDiscard?.();
+        }
+        return;
+      }
+      if (e.key === "Escape" && !e.defaultPrevented && !isEditableTarget(e.target)) {
+        for (let i = backStack.current.length - 1; i >= 0; i--) {
+          const back = backStack.current[i].current;
+          if (back) {
+            e.preventDefault();
+            back();
+            return;
+          }
+        }
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [state.visible, state.saving]);
+  return /* @__PURE__ */ jsx(SaveBarApiContext.Provider, { value: api, children: /* @__PURE__ */ jsx(BackNavApiContext.Provider, { value: backApi, children: /* @__PURE__ */ jsx(SaveBarStateContext.Provider, { value: state, children }) }) });
+}
+var BackNavApiContext = React7.createContext(null);
+function isEditableTarget(target) {
+  const el = target;
+  if (!el || !el.tagName) return false;
+  const tag = el.tagName.toLowerCase();
+  return tag === "input" || tag === "textarea" || tag === "select" || el.isContentEditable;
+}
+function useBackHandler(onBack) {
+  const api = React7.useContext(BackNavApiContext);
+  const ref = React7.useRef(onBack);
+  React7.useEffect(() => {
+    ref.current = onBack;
+  });
+  React7.useEffect(() => {
+    if (!api) return;
+    const stack = api.stack.current;
+    stack.push(ref);
+    return () => {
+      const i = stack.indexOf(ref);
+      if (i !== -1) stack.splice(i, 1);
+    };
+  }, [api]);
+}
+function useSaveBar({ dirty, saving = false, onSave, onDiscard, message, saveLabel, discardLabel }) {
+  const api = React7.useContext(SaveBarApiContext);
+  React7.useEffect(() => {
+    if (api) api.handlers.current = { onSave, onDiscard };
+  });
+  React7.useEffect(() => {
+    if (!api) return;
+    api.setState({ visible: dirty, saving, message, saveLabel, discardLabel });
+    return () => api.setState((s) => ({ ...s, visible: false }));
+  }, [api, dirty, saving, message, saveLabel, discardLabel]);
+}
+function SaveBar({ className }) {
+  const state = React7.useContext(SaveBarStateContext);
+  const api = React7.useContext(SaveBarApiContext);
+  const t = useTranslation();
+  const [rendered, setRendered] = React7.useState(state.visible);
+  const [closing, setClosing] = React7.useState(false);
+  React7.useEffect(() => {
+    if (state.visible) {
+      setRendered(true);
+      setClosing(false);
+      return;
+    }
+    if (!rendered) return;
+    setClosing(true);
+    const id = setTimeout(() => {
+      setRendered(false);
+      setClosing(false);
+    }, 200);
+    return () => clearTimeout(id);
+  }, [state.visible, rendered]);
+  if (!api || !rendered) return null;
+  const { saving, message, saveLabel, discardLabel } = state;
+  return /* @__PURE__ */ jsx("div", { className: cn("pointer-events-none fixed inset-x-0 bottom-5 z-40 flex justify-center px-4", className), children: /* @__PURE__ */ jsxs("div", { className: cn(
+    "pointer-events-auto flex items-center gap-5 rounded-full bg-foreground py-2 pl-5 pr-2 text-background shadow-xl ring-1 ring-black/5 duration-200",
+    closing ? "animate-out fade-out slide-out-to-bottom-2" : "animate-in fade-in slide-in-from-bottom-2"
+  ), children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm font-medium", children: [
+      /* @__PURE__ */ jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-amber-400" }),
+      message ?? t("saveBar.unsaved")
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: saving,
+          onClick: () => api.handlers.current.onDiscard?.(),
+          className: "rounded-full px-3 py-1.5 text-sm font-medium text-background/70 transition-colors hover:bg-background/10 hover:text-background disabled:opacity-50",
+          children: discardLabel ?? t("common.discard")
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: saving,
+          onClick: () => api.handlers.current.onSave?.(),
+          className: "inline-flex items-center rounded-full bg-background px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-background/90 disabled:opacity-60",
+          children: [
+            saving && /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }),
+            saveLabel ?? t("common.save")
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+function useCrossModuleBack(onBack, parentLabel) {
+  const currentPath = typeof window !== "undefined" ? (window.location.hash ? window.location.hash.slice(1) : window.location.pathname) || "/" : "/";
+  const referrer = useNavReferrer(currentPath);
+  const cross = referrer && referrer.label && routeModule(referrer.path) !== routeModule(currentPath) ? referrer : null;
+  return {
+    onBack: cross ? () => navHistoryBack(onBack) : onBack,
+    parentLabel: cross ? cross.label : parentLabel,
+    isCrossModule: !!cross
+  };
+}
+function PageHeaderCrumb({
+  title,
+  parentLabel,
+  onBack
+}) {
+  if (!onBack) {
+    return title ? /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate text-lg font-semibold", children: title }) : null;
+  }
+  return /* @__PURE__ */ jsxs("nav", { className: "flex min-w-0 items-center gap-1.5 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "inline-flex shrink-0 items-center gap-1 transition-colors hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3.5 w-3.5" }),
+          parentLabel ?? "Voltar"
+        ]
+      }
+    ),
+    title != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0", children: "/" }),
+      title === "" ? (
+        // Title still waiting on data: a pulsing bar, otherwise the line
+        // appears from nowhere and shoves the rest when the record lands.
+        /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-24 animate-pulse rounded bg-muted align-middle" })
+      ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-foreground", children: title })
+    ] })
+  ] });
+}
+function PageHeader({ title, onBack, parentLabel, backLabel }) {
+  const hasHost = useHasPageHeaderHost();
+  const { onBack: effectiveOnBack, parentLabel: effectiveParent } = useCrossModuleBack(onBack, parentLabel);
+  useBackHandler(effectiveOnBack);
+  const node = React7.useMemo(() => /* @__PURE__ */ jsx(
+    PageHeaderCrumb,
+    {
+      title,
+      parentLabel: effectiveParent ?? backLabel,
+      onBack: effectiveOnBack
+    }
+  ), [effectiveOnBack, effectiveParent, backLabel, title]);
+  usePageHeader(hasHost ? node : null, { back: !!effectiveOnBack });
+  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" ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React7.useLayoutEffect : React7.useEffect;
 function iconOf(name) {
   if (!name) return null;
   return ICON_MAP[name] ?? null;
 }
+var RailFlyoutContext = React7.createContext(null);
+var RailFlyoutProvider = RailFlyoutContext.Provider;
+function useRailRow(content) {
+  const flyout = React7.useContext(RailFlyoutContext);
+  if (!flyout || !content) return {};
+  return flyout.rowProps(content);
+}
 function useRailFlyout({
   enabled,
   railRef,
   activeRoute,
   onNavigate
 }) {
-  const [state, setState] = React.useState(null);
-  const [pos, setPos] = React.useState({ top: 0, arrow: 20 });
-  const [animate, setAnimate] = React.useState(false);
-  const panelRef = React.useRef(null);
-  const closeTimer = React.useRef(null);
-  const lastContent = React.useRef(null);
-  const cancelClose = React.useCallback(() => {
+  const [state, setState] = React7.useState(null);
+  const [pos, setPos] = React7.useState({ top: 0, arrow: 20 });
+  const [animate, setAnimate] = React7.useState(false);
+  const panelRef = React7.useRef(null);
+  const closeTimer = React7.useRef(null);
+  const lastContent = React7.useRef(null);
+  const cancelClose = React7.useCallback(() => {
     if (closeTimer.current) {
       clearTimeout(closeTimer.current);
       closeTimer.current = null;
     }
   }, []);
-  const show = React.useCallback(
+  const show = React7.useCallback(
     (anchor, content2) => {
       if (!enabled) return;
       cancelClose();
@@ -42,19 +722,19 @@ function useRailFlyout({
     },
     [enabled, cancelClose]
   );
-  const hide = React.useCallback(() => {
+  const hide = React7.useCallback(() => {
     cancelClose();
     closeTimer.current = setTimeout(() => setState(null), CLOSE_DELAY_MS);
   }, [cancelClose]);
-  const dismiss = React.useCallback(() => {
+  const dismiss = React7.useCallback(() => {
     cancelClose();
     setState(null);
   }, [cancelClose]);
-  React.useEffect(() => () => cancelClose(), [cancelClose]);
-  React.useEffect(() => {
+  React7.useEffect(() => () => cancelClose(), [cancelClose]);
+  React7.useEffect(() => {
     if (!enabled) dismiss();
   }, [enabled, dismiss]);
-  const reposition = React.useCallback(() => {
+  const reposition = React7.useCallback(() => {
     const rail = railRef.current;
     const anchor = state?.anchor;
     if (!rail || !anchor) return;
@@ -69,7 +749,7 @@ function useRailFlyout({
     setPos({ top, arrow });
   }, [railRef, state]);
   useIsomorphicLayoutEffect(reposition, [reposition, state?.content.key]);
-  React.useEffect(() => {
+  React7.useEffect(() => {
     if (!state) return;
     const rail = railRef.current;
     const onScroll = () => reposition();
@@ -81,7 +761,7 @@ function useRailFlyout({
     };
   }, [state, railRef, reposition]);
   const visible = !!state;
-  React.useEffect(() => {
+  React7.useEffect(() => {
     if (!visible) {
       setAnimate(false);
       return;
@@ -89,7 +769,7 @@ function useRailFlyout({
     const id = requestAnimationFrame(() => setAnimate(true));
     return () => cancelAnimationFrame(id);
   }, [visible]);
-  React.useEffect(() => {
+  React7.useEffect(() => {
     if (!visible) return;
     const onKey = (event) => {
       if (event.key === "Escape") dismiss();
@@ -97,7 +777,7 @@ function useRailFlyout({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [visible, dismiss]);
-  const rowProps = React.useCallback(
+  const rowProps = React7.useCallback(
     (content2) => ({
       onMouseEnter: (event) => show(event.currentTarget, content2),
       onFocus: (event) => show(event.currentTarget, content2),
@@ -214,8 +894,8 @@ function FlyoutBody({
   ] });
 }
 var RAIL_PUSH_MS = 260;
-var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-function getIcon(name) {
+var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React7.useLayoutEffect : React7.useEffect;
+function getIcon2(name) {
   return ICON_MAP[name] ?? Home;
 }
 function shortcutKey() {
@@ -248,11 +928,15 @@ function NavItem({
   onNavigate,
   flyout
 }) {
-  const Icon = getIcon(item.icon);
+  const Icon = getIcon2(item.icon);
   const isExternal = !!item.href;
   const hoverProps = collapsed && flyout ? flyout.rowProps(flyoutContentOf(item)) : void 0;
   const className = cn(
-    "flex w-full items-center gap-3 rounded-button px-2.5 py-1.5 text-[13px] font-medium transition-colors",
+    // 36px rows. The rail was condensed to 28px while it listed every
+    // destination flat; with the destinations folded into collapsible groups it
+    // shows a handful of rows at rest, and at that length the tight rhythm read
+    // 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",
     collapsed && "justify-center px-2"
@@ -310,8 +994,8 @@ function NavGroup({
   flyout
 }) {
   const isChildActive = item.children?.some((c) => c.route === activeRoute);
-  const [open, setOpen] = React.useState(() => isChildActive ?? false);
-  const Icon = getIcon(item.icon);
+  const [open, setOpen] = React7.useState(() => isChildActive ?? false);
+  const Icon = getIcon2(item.icon);
   if (collapsed) {
     const hoverProps = flyout?.rowProps(flyoutContentOf(item));
     return /* @__PURE__ */ jsx(
@@ -337,7 +1021,9 @@ function NavGroup({
       {
         onClick: () => setOpen(!open),
         className: cn(
-          "flex w-full items-center gap-3 rounded-button px-2.5 py-1.5 text-[13px] font-medium transition-colors",
+          // Same metrics as NavItem — a group header and a plain link are peers
+          // in the rail and must share a baseline.
+          "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",
           isChildActive ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/80"
         ),
@@ -364,7 +1050,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 = getIcon(child.icon);
+      const ChildIcon = getIcon2(child.icon);
       const isActive = child.route === activeRoute;
       const childExternal = !!child.href;
       const childClass = cn(
@@ -382,7 +1068,7 @@ function NavGroup({
         child.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 shrink-0 text-amber-500", "aria-hidden": true })
       ] });
       const row = childExternal ? /* @__PURE__ */ jsx("a", { href: child.href, target: "_blank", rel: "noopener noreferrer", className: childClass, children: childInner }) : /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(child.route), className: childClass, children: childInner });
-      if (!childConnector) return /* @__PURE__ */ jsx(React.Fragment, { children: row }, child.id);
+      if (!childConnector) return /* @__PURE__ */ jsx(React7.Fragment, { children: row }, child.id);
       const activeIndex = item.children.findIndex((c) => c.route === activeRoute);
       const onPath = activeIndex >= 0 && childIndex < activeIndex;
       return (
@@ -444,9 +1130,9 @@ function NavGroup({
   ] });
 }
 function withCollapsed(slot, collapsed) {
-  if (!React.isValidElement(slot)) return slot;
+  if (!React7.isValidElement(slot)) return slot;
   if (typeof slot.type === "string") return slot;
-  return React.cloneElement(slot, { collapsed });
+  return React7.cloneElement(slot, { collapsed });
 }
 function Sidebar({
   navigation,
@@ -473,7 +1159,7 @@ function Sidebar({
   const currentPath = currentPathProp;
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
   const activeRoute = resolveActiveRoute(navigation, currentPath);
-  const railRef = React.useRef(null);
+  const railRef = React7.useRef(null);
   const flyout = useRailFlyout({
     enabled: collapsed,
     railRef,
@@ -486,7 +1172,7 @@ function Sidebar({
   const handleNavigate = (route) => {
     onNavigate?.(route);
   };
-  const sectionHeading = (label) => label && !collapsed ? /* @__PURE__ */ jsx("p", { className: "px-2.5 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-sidebar-muted", children: label }) : null;
+  const sectionHeading = (label) => label && !collapsed ? /* @__PURE__ */ jsx("p", { className: "px-2.5 pb-0.5 pt-1 text-[10px] font-semibold uppercase tracking-wider text-sidebar-muted", children: label }) : null;
   const groupRuns = (items) => {
     const runs = [];
     for (const item of items) {
@@ -498,10 +1184,14 @@ function Sidebar({
   };
   const renderSection = (items, label) => {
     const runs = groupRuns(items);
-    return runs.map((run, i) => /* @__PURE__ */ jsxs("div", { className: i === 0 ? "space-y-1" : "mt-6 space-y-1", children: [
-      sectionHeading(run.group ?? label),
-      run.items.map(renderItem)
-    ] }, run.group ?? `ungrouped-${i}`));
+    return runs.map((run, i) => (
+      // 4px between rows, 20px between runs (a run being a `group` heading's
+      // worth of entries — see NavigationItem.group).
+      /* @__PURE__ */ jsxs("div", { className: i === 0 ? "space-y-1" : "mt-5 space-y-1", children: [
+        sectionHeading(run.group ?? label),
+        run.items.map(renderItem)
+      ] }, run.group ?? `ungrouped-${i}`)
+    ));
   };
   const renderItem = (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate, childConnector: navChildConnector, flyout }, item.id) : /* @__PURE__ */ jsx(
     NavItem,
@@ -519,10 +1209,10 @@ function Sidebar({
     mainItems.length > 0 && renderSection(mainItems, sectionLabels?.main),
     secondaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: renderSection(secondaryItems, sectionLabels?.secondary) })
   ] });
-  const [outgoing, setOutgoing] = React.useState(null);
-  const lastBodyRef = React.useRef(null);
-  const lastKeyRef = React.useRef(navKey);
-  const timerRef = React.useRef(null);
+  const [outgoing, setOutgoing] = React7.useState(null);
+  const lastBodyRef = React7.useRef(null);
+  const lastKeyRef = React7.useRef(navKey);
+  const timerRef = React7.useRef(null);
   useIsomorphicLayoutEffect2(() => {
     if (lastKeyRef.current !== navKey) {
       const previousBody = lastBodyRef.current;
@@ -535,533 +1225,183 @@ function Sidebar({
     }
     lastBodyRef.current = navBody;
   });
-  React.useEffect(() => () => {
+  React7.useEffect(() => () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
-  return /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      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",
-        collapsed ? "w-16" : "w-64"
-      ),
-      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(
-          "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" })
-              ]
-            }
-          )
-        ] }) }),
-        flyout.panel
-      ]
-    }
-  );
-}
-function TopbarUserMenu({
-  user,
-  userPlan,
-  billingLabel = "Subscription",
-  onSignOut,
-  onProfile,
-  onSettings,
-  onBilling,
-  userMenuExtras
-}) {
-  const [open, setOpen] = React.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: Home,
-  Users,
-  Settings: Settings,
-  CreditCard,
-  Bell: 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: Search,
-  MapPin,
-  Handshake,
-  Contact,
-  Building2,
-  ChevronDown: 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 getIcon2(name) {
-  return ICON_MAP2[name] ?? Home;
-}
-function NavDropdown({ item, currentPath, onNavigate }) {
-  const [open, setOpen] = React.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",
+  return (
+    // O handle do flyout desce por contexto para QUALQUER linha da trilha —
+    // inclusive os widgets que os plugins montam no pé dela. Ver useRailRow.
+    /* @__PURE__ */ jsx(RailFlyoutProvider, { value: flyout, children: /* @__PURE__ */ jsxs(
+      "aside",
       {
-        "data-nav-active": isChildActive || void 0,
+        ref: railRef,
+        "data-print": "hide",
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) flyout.dismiss();
+        },
         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"
+          // `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__ */ 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(
+          /* @__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(
             "button",
             {
-              onClick: () => {
-                onNavigate(child.route);
-                setOpen(false);
-              },
+              onClick: () => setCommandPaletteOpen(true),
+              "aria-keyshortcuts": "Meta+K Control+K",
               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"
+                // 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(ChildIcon, { className: "h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsx("span", { children: child.label })
+                /* @__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
             },
-            child.id
-          );
-        })
+            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
+        ]
       }
     ) })
-  ] });
-}
-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 = 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 = React.createContext(null);
+var ModuleHeaderSlotContext = React7.createContext(null);
 function useModuleHeaderSlot() {
-  return React.useContext(ModuleHeaderSlotContext);
+  return React7.useContext(ModuleHeaderSlotContext);
 }
-var ModuleHeaderActionsSlotContext = React.createContext(null);
+var ModuleHeaderActionsSlotContext = React7.createContext(null);
 function useModuleHeaderActionsSlot() {
-  return React.useContext(ModuleHeaderActionsSlotContext);
+  return React7.useContext(ModuleHeaderActionsSlotContext);
+}
+var PageRailSlotContext = React7.createContext(null);
+function usePageRailSlot() {
+  return React7.useContext(PageRailSlotContext);
 }
 function ShellPageTitle({
   title,
@@ -1106,11 +1446,13 @@ function SidebarLayout({
   const pageHeaderSlot = usePageHeaderSlot();
   usePageHeaderHost();
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
-  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
-  const [headerSlot, setHeaderSlot] = React.useState(null);
-  const [actionsSlot, setActionsSlot] = React.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: cn(
-    "flex h-screen overflow-hidden bg-background",
+  const [mobileMenuOpen, setMobileMenuOpen] = React7.useState(false);
+  const [headerSlot, setHeaderSlot] = React7.useState(null);
+  const [actionsSlot, setActionsSlot] = React7.useState(null);
+  const [pageRailSlot, setPageRailSlot] = React7.useState(null);
+  const hasPageActions = useHasPageActions();
+  return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsx(ModuleHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(ModuleHeaderActionsSlotContext.Provider, { value: actionsSlot, children: /* @__PURE__ */ jsx(PageRailSlotContext.Provider, { value: pageRailSlot, children: /* @__PURE__ */ jsxs("div", { className: cn(
+    "shell-enter 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.
@@ -1134,7 +1476,7 @@ function SidebarLayout({
         topContent: sidebarTopContent,
         navTop: sidebarNavTop,
         footerContent: sidebarFooterContent,
-        borderless: false,
+        borderless: frame,
         userMenuSlot,
         notificationSlot,
         unreadCount,
@@ -1146,34 +1488,42 @@ function SidebarLayout({
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: cn(
-      "relative flex flex-1 flex-col overflow-hidden",
-      frame && "md:m-2 md:rounded-xl md:border md:border-border md:bg-card"
+      "relative flex flex-1 overflow-hidden",
+      // `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"
     ), 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: [
-          !hasBottomNav && /* @__PURE__ */ jsx(
-            "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",
-              children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
-            }
-          ),
-          pageHeaderSlot ?? /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack }),
-          topbarStart,
-          /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
+      /* @__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: [
+        /* @__PURE__ */ jsxs("div", { className: cn(
+          "flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-2",
+          // …unless the page put its actions in it. Hiding the bar on mobile
+          // used to hide the only "Novo" the screen had.
+          mobileHeader !== "minimal" && !hasPageActions && "hidden md:flex"
+        ), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            !hasBottomNav && /* @__PURE__ */ jsx(
+              "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",
+                children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+              }
+            ),
+            pageHeaderSlot ?? /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack }),
+            topbarStart,
+            /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex items-center gap-2" }),
+            topbarEnd
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex items-center gap-2" }),
-          topbarEnd
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }),
-      /* @__PURE__ */ jsx(SaveBar, {})
+        /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }),
+        /* @__PURE__ */ jsx(SaveBar, {})
+      ] })
     ] }),
     mobileMenuOpen && /* @__PURE__ */ jsx(
       MobileOverlay,
@@ -1198,7 +1548,7 @@ function SidebarLayout({
         onClose: () => setMobileMenuOpen(false)
       }
     )
-  ] }) }) }) });
+  ] }) }) }) }) });
 }
 function TopbarLayout({
   navigation = [],
@@ -1223,13 +1573,17 @@ function TopbarLayout({
   notificationSlot,
   hasBottomNav = false
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = React7.useState(false);
+  const [headerSlot, setHeaderSlot] = React7.useState(null);
+  const [actionsSlot, setActionsSlot] = React7.useState(null);
+  const [pageRailSlot, setPageRailSlot] = React7.useState(null);
   const rawSlot = usePageHeaderSlot();
   const hasOutlet = useHasPageHeaderOutlet();
+  const hasPageActions = useHasPageActions();
   usePageHeaderHost();
   const pageHeaderSlot = hasOutlet ? null : rawSlot;
   const showTitle = !hasOutlet && !!pageTitle;
-  return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-screen flex-col 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__ */ jsx(PageRailSlotContext.Provider, { value: pageRailSlot, children: /* @__PURE__ */ jsxs("div", { className: "shell-enter relative flex h-screen flex-col overflow-hidden bg-background", children: [
     /* @__PURE__ */ jsx(
       Topbar,
       {
@@ -1254,9 +1608,18 @@ function TopbarLayout({
         onMenuClick: hasBottomNav ? void 0 : () => setMobileMenuOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx("main", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children: [
-      (pageHeaderSlot || pageBack || showTitle) && /* @__PURE__ */ jsx("div", { className: "flex min-h-12 shrink-0 items-center gap-3 border-b border-border px-4 py-2", children: pageHeaderSlot ?? /* @__PURE__ */ jsx(ShellPageTitle, { title: showTitle ? pageTitle : void 0, back: pageBack }) }),
-      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", children })
+    /* @__PURE__ */ jsx("main", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 min-h-0 flex-1 overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-content"), children: [
+      /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", children: [
+        (pageHeaderSlot || pageBack || hasPageActions) && /* @__PURE__ */ jsxs("div", { className: "flex min-h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            pageHeaderSlot ?? /* @__PURE__ */ jsx(ShellPageTitle, { title: showTitle ? pageTitle : void 0, back: pageBack }),
+            /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex shrink-0 items-center gap-2" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", children })
+      ] })
     ] }) }),
     /* @__PURE__ */ jsx(SaveBar, {}),
     mobileMenuOpen && /* @__PURE__ */ jsx(
@@ -1276,7 +1639,7 @@ function TopbarLayout({
         onClose: () => setMobileMenuOpen(false)
       }
     )
-  ] }) });
+  ] }) }) }) }) });
 }
 function DrawerUserRow({ user }) {
   const label = user.fullName || user.email;
@@ -1291,7 +1654,7 @@ function MinimalLayout({
   children,
   headerEnd
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "shell-enter flex h-screen flex-col", children: [
     /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center justify-between border-b border-border bg-card px-4 md:px-6", children: [
       /* @__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 })
@@ -1300,23 +1663,23 @@ function MinimalLayout({
   ] });
 }
 function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
-  const [visible, setVisible] = React.useState(false);
-  React.useEffect(() => {
+  const [visible, setVisible] = React7.useState(false);
+  React7.useEffect(() => {
     const id = requestAnimationFrame(() => setVisible(true));
     return () => cancelAnimationFrame(id);
   }, []);
-  const close = React.useCallback(() => {
+  const close = React7.useCallback(() => {
     setVisible(false);
     window.setTimeout(onClose, 250);
   }, [onClose]);
-  React.useEffect(() => {
+  React7.useEffect(() => {
     const previous = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = previous;
     };
   }, []);
-  React.useEffect(() => {
+  React7.useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -1592,13 +1955,13 @@ function SplitWithRightRail({
   maxWidth = 720,
   resizeLabel = "Resize panel"
 }) {
-  const [width, setWidth] = React.useState(defaultWidth);
-  const [dragging, setDragging] = React.useState(false);
-  const clamp = React.useCallback(
+  const [width, setWidth] = React7.useState(defaultWidth);
+  const [dragging, setDragging] = React7.useState(false);
+  const clamp = React7.useCallback(
     (value) => Math.min(maxWidth, Math.max(minWidth, value)),
     [minWidth, maxWidth]
   );
-  React.useEffect(() => {
+  React7.useEffect(() => {
     if (!dragging) return;
     const onMove = (event) => {
       event.preventDefault();
@@ -1620,7 +1983,7 @@ function SplitWithRightRail({
       document.body.style.cursor = previousCursor;
     };
   }, [dragging, clamp]);
-  React.useEffect(() => {
+  React7.useEffect(() => {
     if (dragging) return;
     onWidthChange?.(width);
   }, [dragging]);
@@ -1699,40 +2062,74 @@ function SplitWithRightRail({
     ] })
   );
 }
-function BootSpinner({ className }) {
+function HeaderTabs({
+  tabs,
+  value,
+  onChange,
+  className,
+  ...rest
+}) {
   return /* @__PURE__ */ jsx(
-    "span",
+    "div",
     {
-      "aria-hidden": true,
+      role: "tablist",
+      "aria-label": rest["aria-label"],
       className: cn(
-        "block h-7 w-7 animate-spin rounded-full border-2 border-sidebar-foreground/20 border-t-sidebar-foreground/70",
-        "motion-reduce:animate-none motion-reduce:border-t-sidebar-foreground/20 motion-reduce:animate-pulse",
+        "inline-flex max-w-full items-center gap-5 overflow-x-auto scrollbar-none",
         className
-      )
+      ),
+      children: tabs.map((tab) => {
+        const active = tab.value === value;
+        const Icon = tab.icon;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "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",
+              active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }) : null,
+              /* @__PURE__ */ jsx("span", { children: tab.label }),
+              tab.count != null && /* @__PURE__ */ jsx("span", { className: cn(
+                "ml-0.5 rounded-full px-1.5 text-[11px] tabular-nums",
+                active ? "bg-muted text-foreground" : "bg-muted/70 text-muted-foreground"
+              ), children: tab.count }),
+              tab.badge,
+              active && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-foreground" })
+            ]
+          },
+          tab.value
+        );
+      })
     }
   );
 }
-function AppShellSkeleton({ label, className }) {
+function PageTabs({ actions, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      role: "status",
-      "aria-busy": "true",
-      className: cn("flex h-screen items-center justify-center overflow-hidden bg-sidebar", className),
+      className: cn(
+        "-mx-3 -mt-3 mb-4 flex flex-wrap items-end justify-between gap-3 border-b border-border px-3 pt-2 md:-mx-6 md:-mt-4 md:px-6",
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
-        /* @__PURE__ */ jsx(BootSpinner, {})
+        /* @__PURE__ */ jsx(HeaderTabs, { ...props, className: "-mb-px" }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 pb-1.5", children: actions })
       ]
     }
   );
 }
-AppShellSkeleton.displayName = "AppShellSkeleton";
-var NavTransitionContext = React.createContext("slide");
+var NavTransitionContext = React7.createContext("slide");
 function NavTransitionProvider({ value, children }) {
   return /* @__PURE__ */ jsx(NavTransitionContext.Provider, { value, children });
 }
 function useNavTransition() {
-  return React.useContext(NavTransitionContext);
+  return React7.useContext(NavTransitionContext);
 }
 function resolveTransitionClass(transition, direction) {
   if (transition === "none") return "";
@@ -1751,8 +2148,14 @@ function PageTransition({
   const animClass = resolveTransitionClass(transition, direction);
   return /* @__PURE__ */ jsx("div", { className: cn(animClass, className), children }, transitionKey);
 }
+function PageRail({ children }) {
+  const slot = usePageRailSlot();
+  if (slot) return createPortal(children, slot);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
 function PageHeaderActions({ children }) {
   const slot = useModuleHeaderActionsSlot();
+  useRegisterPageActions();
   if (slot) return createPortal(children, slot);
   return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
 }
@@ -1761,15 +2164,15 @@ function PremiumBadge({ className }) {
   const tip = t("upgrade.badgeTooltip");
   return /* @__PURE__ */ jsx("span", { title: tip, "aria-label": tip, className: cn("inline-flex shrink-0", className), children: /* @__PURE__ */ jsx(Crown, { className: "h-3.5 w-3.5 text-amber-500", "aria-hidden": true }) });
 }
-var ModuleLayoutContext = React.createContext("rail");
+var ModuleLayoutContext = React7.createContext("rail");
 function ModuleLayoutProvider({ variant, children }) {
   return /* @__PURE__ */ jsx(ModuleLayoutContext.Provider, { value: variant, children });
 }
 function useModuleLayout() {
-  return React.useContext(ModuleLayoutContext);
+  return React7.useContext(ModuleLayoutContext);
 }
-function NavItem2({ item }) {
-  const [expanded, setExpanded] = React.useState(true);
+function RailNavItem({ item }) {
+  const [expanded, setExpanded] = React7.useState(true);
   const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
   const hasChildren = item.children && item.children.length > 0;
   const hasActiveChild = hasChildren && item.children.some((c) => c.active);
@@ -1811,9 +2214,9 @@ function NavItem2({ item }) {
   ] });
 }
 function MobileTabs({ nav }) {
-  const scrollRef = React.useRef(null);
-  const [expandedId, setExpandedId] = React.useState(null);
-  React.useEffect(() => {
+  const scrollRef = React7.useRef(null);
+  const [expandedId, setExpandedId] = React7.useState(null);
+  React7.useEffect(() => {
     const container = scrollRef.current;
     if (!container) return;
     const activeEl = container.querySelector('[data-active="true"]');
@@ -1880,12 +2283,12 @@ function MobileTabs({ nav }) {
     })()
   ] });
 }
-var BackStyleContext = React.createContext("link");
+var BackStyleContext = React7.createContext("link");
 function BackStyleProvider({ style, children }) {
   return /* @__PURE__ */ jsx(BackStyleContext.Provider, { value: style, children });
 }
 function useBackStyle() {
-  return React.useContext(BackStyleContext);
+  return React7.useContext(BackStyleContext);
 }
 function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, backStyle, inline }) {
   const t = useTranslation();
@@ -1981,13 +2384,11 @@ function ShellSubpageHeader({
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
       Icon && !onBack && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
       /* @__PURE__ */ jsx(PageHeaderCrumb, { title, parentLabel, onBack })
-    ] })
+    ] }),
+    { back: !!onBack }
   );
-  if (!subtitle && !actions) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
-    subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsx("span", {}),
-    actions && /* @__PURE__ */ jsx("div", { className: "no-print flex shrink-0 items-center gap-2", children: actions })
-  ] });
+  if (!actions) return null;
+  return /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsx("div", { className: "no-print flex shrink-0 items-center gap-2", children: actions }) });
 }
 function ModuleHeader({ nav }) {
   function defaultChild(item) {
@@ -2010,12 +2411,13 @@ function ModuleHeader({ nav }) {
     if (hasChildren) defaultChild(item)?.onClick?.();
     else item.onClick?.();
   };
-  return /* @__PURE__ */ jsx("div", { className: "mb-6 flex flex-wrap items-center justify-between gap-3", children: /* @__PURE__ */ jsx(HeaderTabs, { tabs, value: activeItem?.id ?? nav[0]?.id ?? "", onChange }) });
+  return /* @__PURE__ */ jsx(PageTabs, { tabs, value: activeItem?.id ?? nav[0]?.id ?? "", onChange });
 }
-function ModulePage({ title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction }) {
+function ModulePage({ title: _title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction }) {
   const ctxVariant = useModuleLayout();
   const variant = navVariant ?? ctxVariant;
   const transitionKey = viewKey ?? "view";
+  const onSubpage = useHasPageHeaderBack();
   if (variant === "sidebar") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
@@ -2024,148 +2426,24 @@ function ModulePage({ title, subtitle, nav, children, className, headerAction, s
   }
   if (variant === "tabs") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ModuleHeader, { nav }),
+      !onSubpage && /* @__PURE__ */ jsx(ModuleHeader, { nav }),
       showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
       /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, className: cn("min-w-0", className), children })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-6 -mt-2", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-48 shrink-0 hidden md:block no-print", children: /* @__PURE__ */ jsxs("div", { className: cn(sidebarFooter && "sticky top-4 flex flex-col"), style: sidebarFooter ? { height: "calc(100vh - 8rem)" } : void 0, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2.5 mb-2", children: title }),
-        /* @__PURE__ */ jsx("nav", { className: "space-y-0.5", children: nav.map((item) => /* @__PURE__ */ jsx(NavItem2, { item }, item.id)) })
-      ] }),
-      sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto", children: sidebarFooter })
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsx(PageRail, { children: /* @__PURE__ */ jsxs("div", { className: "hidden w-48 shrink-0 flex-col overflow-y-auto border-r border-border p-3 no-print md:flex", children: [
+      /* @__PURE__ */ jsx("nav", { className: "space-y-0.5", children: nav.map((item) => /* @__PURE__ */ jsx(RailNavItem, { item }, item.id)) }),
+      sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: sidebarFooter })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx(PageHeaderOutlet, {}),
-      showHeader && /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: title }),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
-        ] }),
-        headerAction
-      ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
       /* @__PURE__ */ jsx(MobileTabs, { nav }),
       /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, children })
     ] })
   ] });
 }
-var EMPTY = [];
-var PageTrailContext = React.createContext(EMPTY);
-function PageTrail({
-  label,
-  href,
-  onNavigate,
-  children
-}) {
-  const parent = React.useContext(PageTrailContext);
-  const trail = React.useMemo(
-    () => [...parent, { label, href, onNavigate }],
-    [parent, label, href, onNavigate]
-  );
-  return /* @__PURE__ */ jsx(PageTrailContext.Provider, { value: trail, children });
-}
-function usePageTrail() {
-  return React.useContext(PageTrailContext);
-}
-function usePageTrailParent(href) {
-  const trail = React.useContext(PageTrailContext);
-  return React.useMemo(() => {
-    const above = href ? trail.filter((c) => c.href !== href) : trail;
-    return above[above.length - 1];
-  }, [trail, href]);
-}
-function navigateToCrumb(crumb) {
-  if (crumb.onNavigate) crumb.onNavigate();
-  else window.location.hash = crumb.href;
-}
-var ContentSplitContext = React.createContext(null);
-function ContentSplit({
-  children,
-  aside,
-  asideTitle,
-  asideDescription,
-  asideWidth = "20rem",
-  asideOpen,
-  onAsideOpenChange,
-  collapsible = false,
-  defaultCollapsed = false,
-  className
-}) {
-  const [internalOpen, setInternalOpen] = React.useState(false);
-  const open = asideOpen ?? internalOpen;
-  const setOpen = onAsideOpenChange ?? setInternalOpen;
-  const [collapsed, setCollapsed] = React.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 = React.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, AppShellSkeleton, BackStyleProvider, ContentSplit, ContentSplitTrigger, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTrail, PageTransition, Sidebar, SubpageHeader, Topbar, navigateToCrumb, useBackStyle, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, usePageTrail, usePageTrailParent };
-//# sourceMappingURL=chunk-QSHA2Q27.js.map
-//# sourceMappingURL=chunk-QSHA2Q27.js.map
+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