@fayz-ai/ui 0.8.2 → 0.8.4

package/dist/{chunk-XAOGMWLC.cjs → chunk-7ZQQZD4Q.cjs}

@@ -61,6 +61,7 @@ var ICON_MAP = {
   ShoppingCart: lucideReact.ShoppingCart,
   Target: lucideReact.Target,
   Wrench: lucideReact.Wrench,
+  Truck: lucideReact.Truck,
   Receipt: lucideReact.Receipt,
   ShoppingBag: lucideReact.ShoppingBag,
   ClipboardList: lucideReact.ClipboardList,
@@ -128,8 +129,17 @@ var ICON_MAP = {
   Workflow: lucideReact.Workflow,
   Boxes: lucideReact.Boxes,
   Clock3: lucideReact.Clock3,
-  FileCheck2: lucideReact.FileCheck2
+  FileCheck2: lucideReact.FileCheck2,
+  GraduationCap: lucideReact.GraduationCap,
+  Repeat: lucideReact.Repeat,
+  User: lucideReact.User,
+  Palette: lucideReact.Palette,
+  ShieldCheck: lucideReact.ShieldCheck,
+  SlidersHorizontal: lucideReact.SlidersHorizontal,
+  Puzzle: lucideReact.Puzzle
 };
+var RAIL_PUSH_MS = 260;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React3__namespace.useLayoutEffect : React3__namespace.useEffect;
 function getIcon(name) {
   return ICON_MAP[name] ?? lucideReact.Home;
 }
@@ -140,25 +150,23 @@ function NavItem({
   onNavigate
 }) {
   const Icon = getIcon(item.icon);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      onClick: () => onNavigate(item.route),
-      className: chunkH6OULCHF_cjs.cn(
-        "flex w-full items-center gap-3 rounded-md px-2.5 py-1.5 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"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 shrink-0" }),
-        !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: item.label }),
-          item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground", children: item.badge })
-        ] })
-      ]
-    }
+  const isExternal = !!item.href;
+  const className = chunkH6OULCHF_cjs.cn(
+    "flex w-full items-center gap-3 rounded-md px-2.5 py-1.5 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"
   );
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 shrink-0" }),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: item.label }),
+      isExternal && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "ml-auto h-3.5 w-3.5 shrink-0 opacity-50", "aria-hidden": true }),
+      item.premium && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crown, { className: chunkH6OULCHF_cjs.cn("h-3.5 w-3.5 shrink-0 text-amber-500", !isExternal && "ml-auto"), "aria-hidden": true }),
+      item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkH6OULCHF_cjs.cn("rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground", !isExternal && !item.premium && "ml-auto"), children: item.badge })
+    ] })
+  ] });
+  const content = isExternal ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", className, children: inner }) : /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onNavigate(item.route), className, children: inner });
   if (collapsed) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip__namespace.Root, { delayDuration: 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Trigger, { asChild: true, children: content }),
@@ -170,6 +178,7 @@ function NavItem({
           className: "fayz-glass-surface z-50 rounded-md bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
           children: [
             item.label,
+            item.premium && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crown, { className: "ml-1.5 inline h-3 w-3 text-amber-500", "aria-hidden": true }),
             item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 rounded-full bg-primary px-1.5 py-0.5 text-xs text-primary-foreground", children: item.badge }),
             /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Arrow, { className: "fill-popover" })
           ]
@@ -250,21 +259,18 @@ function NavGroup({
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 mt-0.5 space-y-0.5 border-l border-sidebar-border/50 pl-3", children: item.children?.map((child) => {
       const ChildIcon = getIcon(child.icon);
       const isActive = child.route === activeRoute;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: () => onNavigate(child.route),
-          className: chunkH6OULCHF_cjs.cn(
-            "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors",
-            isActive ? "font-medium text-sidebar-accent-foreground" : "text-sidebar-muted hover:text-sidebar-accent-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ChildIcon, { className: "h-3.5 w-3.5 shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: child.label })
-          ]
-        },
-        child.id
+      const childExternal = !!child.href;
+      const childClass = chunkH6OULCHF_cjs.cn(
+        "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors",
+        isActive ? "font-medium text-sidebar-accent-foreground" : "text-sidebar-muted hover:text-sidebar-accent-foreground"
       );
+      const childInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChildIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: child.label }),
+        childExternal && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50", "aria-hidden": true }),
+        child.premium && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crown, { className: "h-3 w-3 shrink-0 text-amber-500", "aria-hidden": true })
+      ] });
+      return childExternal ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: child.href, target: "_blank", rel: "noopener noreferrer", className: childClass, children: childInner }, child.id) : /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onNavigate(child.route), className: childClass, children: childInner }, child.id);
     }) })
   ] });
 }
@@ -282,7 +288,10 @@ function Sidebar({
   borderless,
   userMenuSlot,
   notificationSlot,
-  unreadCount = 0
+  unreadCount = 0,
+  sectionLabels,
+  navKey,
+  navDirection = "forward"
 }) {
   const currentPath = currentPathProp;
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
@@ -293,6 +302,47 @@ function Sidebar({
   const handleNavigate = (route) => {
     onNavigate?.(route);
   };
+  const sectionHeading = (label) => label && !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2.5 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-sidebar-muted", children: label }) : null;
+  const renderItem = (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsxRuntime.jsx(
+    NavItem,
+    {
+      item,
+      collapsed,
+      isActive: item.route === activeRoute,
+      onNavigate: handleNavigate
+    },
+    item.id
+  );
+  const navBody = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    topContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 space-y-2", children: React3__namespace.isValidElement(topContent) ? React3__namespace.cloneElement(topContent, { collapsed }) : topContent }),
+    mainItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+      sectionHeading(sectionLabels?.main),
+      mainItems.map(renderItem)
+    ] }),
+    secondaryItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 space-y-1", children: [
+      sectionHeading(sectionLabels?.secondary),
+      secondaryItems.map(renderItem)
+    ] })
+  ] });
+  const [outgoing, setOutgoing] = React3__namespace.useState(null);
+  const lastBodyRef = React3__namespace.useRef(null);
+  const lastKeyRef = React3__namespace.useRef(navKey);
+  const timerRef = React3__namespace.useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    if (lastKeyRef.current !== navKey) {
+      const previousBody = lastBodyRef.current;
+      lastKeyRef.current = navKey;
+      if (previousBody) {
+        setOutgoing({ body: previousBody, direction: navDirection });
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setOutgoing(null), RAIL_PUSH_MS);
+      }
+    }
+    lastBodyRef.current = navBody;
+  });
+  React3__namespace.useEffect(() => () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Provider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
@@ -336,33 +386,41 @@ function Sidebar({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex-1 space-y-1 overflow-y-auto p-2", children: [
-          topContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 space-y-2", children: topContent }),
-          mainItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: mainItems.map(
-            (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsxRuntime.jsx(
-              NavItem,
-              {
-                item,
-                collapsed,
-                isActive: item.route === activeRoute,
-                onNavigate: handleNavigate
-              },
-              item.id
-            )
-          ) }),
-          secondaryItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 space-y-1", children: secondaryItems.map(
-            (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsxRuntime.jsx(
-              NavItem,
-              {
-                item,
-                collapsed,
-                isActive: item.route === activeRoute,
-                onNavigate: handleNavigate
-              },
-              item.id
-            )
-          ) })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "nav",
+          {
+            className: chunkH6OULCHF_cjs.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: chunkH6OULCHF_cjs.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: chunkH6OULCHF_cjs.cn(
+                    "space-y-1",
+                    outgoing && (outgoing.direction === "back" ? "saas-rail-in-back" : "saas-rail-in-forward")
+                  ),
+                  children: navBody
+                },
+                navKey
+              )
+            ]
+          }
+        ),
         settingsItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH6OULCHF_cjs.cn("p-2 space-y-1", !borderless && "border-t border-sidebar-border"), children: settingsItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
           NavItem,
           {
@@ -408,6 +466,8 @@ function Sidebar({
 }
 function TopbarUserMenu({
   user,
+  userPlan,
+  billingLabel = "Subscription",
   onSignOut,
   onProfile,
   onSettings,
@@ -458,11 +518,35 @@ function TopbarUserMenu({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 space-y-0.5", children: [
             item("Perfil", onProfile, lucideReact.UserCog),
             item("Configura\xE7\xF5es", onSettings, lucideReact.Settings),
-            item("Cobran\xE7a", onBilling, lucideReact.CreditCard),
+            onBilling && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: billingLabel }),
+                  userPlan && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Crown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-3 w-3" }),
+                        userPlan.label
+                      ]
+                    }
+                  )
+                ]
+              },
+              "billing"
+            ),
             userMenuExtras?.map((e) => item(e.label, e.onClick)),
             onSignOut && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-border" }),
-              item("Sair", onSignOut)
+              item("Sair", onSignOut, lucideReact.LogOut)
             ] })
           ] })
         ]
@@ -570,7 +654,9 @@ var ICON_MAP2 = {
   Star: lucideReact.Star,
   Zap: lucideReact.Zap,
   Clapperboard: lucideReact.Clapperboard,
-  Newspaper: lucideReact.Newspaper
+  Newspaper: lucideReact.Newspaper,
+  GraduationCap: lucideReact.GraduationCap,
+  Repeat: lucideReact.Repeat
 };
 function getIcon2(name) {
   return ICON_MAP2[name] ?? lucideReact.Home;
@@ -634,6 +720,7 @@ function Topbar({
   logo,
   user,
   onMenuClick,
+  orgSwitcher,
   leftContent,
   rightContent,
   currentPath = "/",
@@ -643,6 +730,8 @@ function Topbar({
   onProfile,
   onSettings,
   onBilling,
+  userPlan,
+  billingLabel,
   userMenuExtras
 }) {
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
@@ -664,7 +753,8 @@ function Topbar({
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden shrink-0 items-center md:flex", children: logo ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-bold", children: "App" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden shrink-0 items-center md:flex", children: logo ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-bold", children: "App" }) }),
+        orgSwitcher && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden min-w-0 items-center md:flex", children: orgSwitcher })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-8 hidden max-w-sm flex-1 md:flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -685,6 +775,8 @@ function Topbar({
           TopbarUserMenu,
           {
             user,
+            userPlan,
+            billingLabel,
             onSignOut,
             onProfile,
             onSettings,
@@ -727,6 +819,7 @@ function Topbar({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label }),
+            item.premium && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crown, { className: "h-3 w-3 text-amber-500", "aria-hidden": true }),
             item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground", children: item.badge })
           ]
         },
@@ -766,7 +859,10 @@ function SidebarLayout({
   notificationSlot,
   unreadCount = 0,
   hasBottomNav = false,
-  mobileHeader = "minimal"
+  mobileHeader = "minimal",
+  sidebarSectionLabels,
+  sidebarNavKey,
+  sidebarNavDirection
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed);
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
@@ -800,7 +896,10 @@ function SidebarLayout({
         borderless: false,
         userMenuSlot,
         notificationSlot,
-        unreadCount
+        unreadCount,
+        sectionLabels: sidebarSectionLabels,
+        navKey: sidebarNavKey,
+        navDirection: sidebarNavDirection
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkH6OULCHF_cjs.cn(
@@ -830,7 +929,7 @@ function SidebarLayout({
           topbarEnd
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children }),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }),
       /* @__PURE__ */ jsxRuntime.jsx(chunkOW73RZOU_cjs.SaveBar, {})
     ] }),
     mobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -866,11 +965,15 @@ function TopbarLayout({
   onProfile,
   onSettings,
   onBilling,
+  userPlan,
+  billingLabel,
   userMenuExtras,
+  orgSwitcher,
   frame,
   currentPath,
   topbarStart,
   topbarEnd,
+  notificationSlot,
   hasBottomNav = false
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = React3__namespace.useState(false);
@@ -887,13 +990,19 @@ function TopbarLayout({
         onProfile,
         onSettings,
         onBilling,
+        userPlan,
+        billingLabel,
         userMenuExtras,
+        orgSwitcher,
         leftContent: topbarStart,
-        rightContent: topbarEnd,
+        rightContent: topbarEnd || notificationSlot ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          topbarEnd,
+          notificationSlot
+        ] }) : void 0,
         onMenuClick: hasBottomNav ? void 0 : () => setMobileMenuOpen(true)
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: chunkH6OULCHF_cjs.cn("flex-1 overflow-y-auto pb-16 md:pb-0", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH6OULCHF_cjs.cn("min-h-full", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: chunkH6OULCHF_cjs.cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH6OULCHF_cjs.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: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(chunkOW73RZOU_cjs.SaveBar, {}),
     mobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
       MobileOverlay,
@@ -907,6 +1016,7 @@ function TopbarLayout({
         onProfile,
         onSettings,
         onBilling,
+        orgSwitcher,
         userMenuSlot: user ? /* @__PURE__ */ jsxRuntime.jsx(DrawerUserRow, { user }) : void 0,
         onClose: () => setMobileMenuOpen(false)
       }
@@ -931,7 +1041,7 @@ function MinimalLayout({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-bold", children: "App" }) }),
       headerEnd && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: headerEnd })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children })
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children })
   ] });
 }
 function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
@@ -1081,6 +1191,8 @@ function AppShell({
   onProfile,
   onSettings,
   onBilling,
+  userPlan,
+  billingLabel,
   pageTitle,
   currentPath,
   userMenuExtras,
@@ -1094,7 +1206,17 @@ function AppShell({
   mobileHeader = "minimal",
   userMenuSlot,
   notificationSlot,
-  unreadCount = 0
+  unreadCount = 0,
+  sidebarSectionLabels,
+  sidebarNavKey,
+  sidebarNavDirection,
+  rightRail,
+  rightRailOpen = true,
+  defaultRightRailWidth,
+  onRightRailWidthChange,
+  rightRailMinWidth,
+  rightRailMaxWidth,
+  rightRailResizeLabel
 }) {
   const hasBottomNav = !!bottomNav?.length;
   const bottomBar = hasBottomNav ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1135,6 +1257,9 @@ function AppShell({
           unreadCount,
           hasBottomNav,
           mobileHeader,
+          sidebarSectionLabels,
+          sidebarNavKey,
+          sidebarNavDirection,
           children
         }
       );
@@ -1151,11 +1276,15 @@ function AppShell({
           onProfile,
           onSettings,
           onBilling,
+          userPlan,
+          billingLabel,
           userMenuExtras,
+          orgSwitcher,
           frame: contentFrame,
           currentPath,
           topbarStart,
           topbarEnd,
+          notificationSlot,
           hasBottomNav,
           children
         }
@@ -1169,11 +1298,142 @@ function AppShell({
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    layoutElement,
+    rightRail ? /* @__PURE__ */ jsxRuntime.jsx(
+      SplitWithRightRail,
+      {
+        rail: rightRail,
+        open: rightRailOpen,
+        frame: contentFrame,
+        defaultWidth: defaultRightRailWidth,
+        onWidthChange: onRightRailWidthChange,
+        minWidth: rightRailMinWidth,
+        maxWidth: rightRailMaxWidth,
+        resizeLabel: rightRailResizeLabel,
+        children: layoutElement
+      }
+    ) : layoutElement,
     floatingAvatar,
     bottomBar
   ] });
 }
+function SplitWithRightRail({
+  children,
+  rail,
+  open,
+  frame,
+  defaultWidth = 380,
+  onWidthChange,
+  minWidth = 300,
+  maxWidth = 720,
+  resizeLabel = "Resize panel"
+}) {
+  const [width, setWidth] = React3__namespace.useState(defaultWidth);
+  const [dragging, setDragging] = React3__namespace.useState(false);
+  const clamp = React3__namespace.useCallback(
+    (value) => Math.min(maxWidth, Math.max(minWidth, value)),
+    [minWidth, maxWidth]
+  );
+  React3__namespace.useEffect(() => {
+    if (!dragging) return;
+    const onMove = (event) => {
+      event.preventDefault();
+      setWidth(clamp(window.innerWidth - event.clientX));
+    };
+    const stop = () => setDragging(false);
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", stop);
+    window.addEventListener("pointercancel", stop);
+    const previousSelect = document.body.style.userSelect;
+    const previousCursor = document.body.style.cursor;
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", stop);
+      window.removeEventListener("pointercancel", stop);
+      document.body.style.userSelect = previousSelect;
+      document.body.style.cursor = previousCursor;
+    };
+  }, [dragging, clamp]);
+  React3__namespace.useEffect(() => {
+    if (dragging) return;
+    onWidthChange?.(width);
+  }, [dragging]);
+  const nudge = (delta) => setWidth((current) => clamp(current + delta));
+  return (
+    // Sidebar tone always: the gutter and the divider sit in the shell's
+    // chrome, next to the menu — painting them page-white put a bright strip
+    // between the dark chrome and the rail, which read as a seam rather than
+    // as space.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkH6OULCHF_cjs.cn("flex h-screen w-full overflow-hidden bg-sidebar", !frame && "md:bg-background"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "separator",
+          "aria-orientation": "vertical",
+          "aria-label": resizeLabel,
+          "aria-valuenow": width,
+          "aria-valuemin": minWidth,
+          "aria-valuemax": maxWidth,
+          tabIndex: 0,
+          onPointerDown: (event) => {
+            event.preventDefault();
+            setDragging(true);
+          },
+          onDoubleClick: () => setWidth(clamp(defaultWidth)),
+          onKeyDown: (event) => {
+            if (event.key === "ArrowLeft") {
+              event.preventDefault();
+              nudge(24);
+            } else if (event.key === "ArrowRight") {
+              event.preventDefault();
+              nudge(-24);
+            } else if (event.key === "Home") {
+              event.preventDefault();
+              setWidth(maxWidth);
+            } else if (event.key === "End") {
+              event.preventDefault();
+              setWidth(minWidth);
+            }
+          },
+          className: chunkH6OULCHF_cjs.cn(
+            "group relative hidden w-1 shrink-0 cursor-col-resize focus-visible:outline-none",
+            open && "md:block"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunkH6OULCHF_cjs.cn(
+                  "absolute inset-y-6 left-1/2 w-px -translate-x-1/2 rounded-full bg-transparent transition-colors",
+                  "group-hover:bg-primary/60 group-focus-visible:bg-primary",
+                  dragging && "bg-primary"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 -left-1.5 -right-1.5" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "aside",
+        {
+          style: { ["--fayz-rail-w"]: `${width}px` },
+          className: chunkH6OULCHF_cjs.cn(
+            "w-0 shrink-0 overflow-hidden",
+            // Animating WIDTH is what makes the app glide back instead of
+            // snapping; skipped mid-drag so the divider stays glued to the cursor.
+            !dragging && "motion-safe:transition-[width] motion-safe:duration-200 motion-safe:ease-out",
+            open && "md:w-[var(--fayz-rail-w)]",
+            frame && "md:py-2 md:pr-2"
+          ),
+          children: rail
+        }
+      )
+    ] })
+  );
+}
 var NavTransitionContext = React3__namespace.createContext("slide");
 function NavTransitionProvider({ value, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(NavTransitionContext.Provider, { value, children });
@@ -1203,6 +1463,11 @@ function PageHeaderActions({ children }) {
   if (slot) return reactDom.createPortal(children, slot);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
 }
+function PremiumBadge({ className }) {
+  const t = core.useTranslation();
+  const tip = t("upgrade.badgeTooltip");
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { title: tip, "aria-label": tip, className: chunkH6OULCHF_cjs.cn("inline-flex shrink-0", className), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crown, { className: "h-3.5 w-3.5 text-amber-500", "aria-hidden": true }) });
+}
 var ModuleLayoutContext = React3__namespace.createContext("rail");
 function ModuleLayoutProvider({ variant, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ModuleLayoutContext.Provider, { value: variant, children });
@@ -1229,11 +1494,12 @@ function NavItem2({ item }) {
         children: [
           Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left truncate", children: item.label }),
+          item.premium && /* @__PURE__ */ jsxRuntime.jsx(PremiumBadge, { className: "ml-1" }),
           hasChildren && (expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }))
         ]
       }
     ),
-    hasChildren && expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 mt-0.5 space-y-0.5 border-l pl-2", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+    hasChildren && expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 mt-0.5 space-y-0.5 border-l pl-2", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
@@ -1242,7 +1508,10 @@ function NavItem2({ item }) {
           "flex items-center w-full rounded-md px-2.5 py-1 text-xs transition-colors",
           child.active ? "text-primary font-medium bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
         ),
-        children: child.label
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left truncate", children: child.label }),
+          child.premium && /* @__PURE__ */ jsxRuntime.jsx(PremiumBadge, { className: "ml-1" })
+        ]
       },
       child.id
     )) })
@@ -1286,6 +1555,7 @@ function MobileTabs({ nav }) {
           children: [
             Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3 w-3" }),
             item.label,
+            item.premium && /* @__PURE__ */ jsxRuntime.jsx(PremiumBadge, {}),
             hasChildren && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: chunkH6OULCHF_cjs.cn("h-2.5 w-2.5 transition-transform", isExpanded && "rotate-180") })
           ]
         },
@@ -1295,7 +1565,7 @@ function MobileTabs({ nav }) {
     expandedId && (() => {
       const item = nav.find((n) => n.id === expandedId);
       if (!item?.children) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 px-2 pb-2 animate-in fade-in-0 slide-in-from-top-1", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 px-2 pb-2 animate-in fade-in-0 slide-in-from-top-1", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -1307,7 +1577,10 @@ function MobileTabs({ nav }) {
             "whitespace-nowrap rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors shrink-0",
             child.active ? "bg-foreground/10 text-foreground" : "text-muted-foreground hover:text-foreground"
           ),
-          children: child.label
+          children: [
+            child.label,
+            child.premium && /* @__PURE__ */ jsxRuntime.jsx(PremiumBadge, {})
+          ]
         },
         child.id
       )) });
@@ -1399,7 +1672,8 @@ function ModuleHeader({ nav }) {
         ),
         children: [
           Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
-          item.label
+          item.label,
+          item.premium && /* @__PURE__ */ jsxRuntime.jsx(PremiumBadge, {})
         ]
       },
       item.id
@@ -1545,5 +1819,5 @@ exports.useModuleHeaderActionsSlot = useModuleHeaderActionsSlot;
 exports.useModuleHeaderSlot = useModuleHeaderSlot;
 exports.useModuleLayout = useModuleLayout;
 exports.useNavTransition = useNavTransition;
-//# sourceMappingURL=chunk-XAOGMWLC.cjs.map
-//# sourceMappingURL=chunk-XAOGMWLC.cjs.map
+//# sourceMappingURL=chunk-7ZQQZD4Q.cjs.map
+//# sourceMappingURL=chunk-7ZQQZD4Q.cjs.map