@fayz-ai/ui 0.8.1 → 0.8.3

package/dist/{chunk-MZZMZYSE.js → chunk-ID2HQK2Q.js}

@@ -1,10 +1,10 @@
 import { useCrossModuleBack, useBackHandler, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SaveBarProvider, SaveBar } from './chunk-75EFDLST.js';
 import { cn, Button } from './chunk-YRVE4FOD.js';
 import * as React3 from 'react';
-import { FileCheck2, Clock3, Boxes, Workflow, UserX, UserPlus, UserCheck, TrendingUp, Star, Inbox, MessageSquare, LayoutDashboard, Award, Zap, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, CircleDollarSign, Landmark, Banknote, BadgeDollarSign, CalendarX, CalendarCheck2, CalendarDays, Radio, PartyPopper, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, FolderOpen, Heart, PawPrint, Cat, Dog, Clock, Ban, Shield, Search, ListPlus, List, Plus, Filter, Building2, Contact, Handshake, Map, MapPin, UtensilsCrossed, Camera, Tags, Tag, Percent, Globe, MessageCircle, BookOpenCheck, BookOpen, UserCog, Briefcase, ListChecks, ClipboardList, ShoppingBag, Receipt, Wrench, Target, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Activity, Package, CalendarClock, Calendar, Bell, CreditCard, Settings, Users, Home, PanelLeftClose, PanelLeft, Menu, ChevronRight, ChevronLeft, PanelRightOpen, PanelRightClose, PanelRight, Newspaper, Clapperboard, Box, TreePalm, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, TableProperties, SlidersHorizontal, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, ChevronDown, ClipboardCheck, PiggyBank } from 'lucide-react';
+import { Puzzle, SlidersHorizontal, ShieldCheck, Palette, User, Repeat, GraduationCap, FileCheck2, Clock3, Boxes, Workflow, UserX, UserPlus, UserCheck, TrendingUp, Star, Inbox, MessageSquare, LayoutDashboard, Award, Zap, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, CircleDollarSign, Landmark, Banknote, BadgeDollarSign, CalendarX, CalendarCheck2, CalendarDays, Radio, PartyPopper, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, FolderOpen, Heart, PawPrint, Cat, Dog, Clock, Ban, Shield, Search, ListPlus, List, Plus, Filter, Building2, Contact, Handshake, Map, MapPin, UtensilsCrossed, Camera, Tags, Tag, Percent, Globe, MessageCircle, BookOpenCheck, BookOpen, UserCog, Briefcase, ListChecks, ClipboardList, ShoppingBag, Receipt, Wrench, Target, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Activity, Package, CalendarClock, Calendar, Bell, CreditCard, Settings, Users, Home, PanelLeftClose, PanelLeft, Menu, Crown, ChevronRight, ChevronLeft, PanelRightOpen, PanelRightClose, PanelRight, Newspaper, Clapperboard, Box, TreePalm, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, TableProperties, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, ChevronDown, ClipboardCheck, PiggyBank, LogOut } from 'lucide-react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { create } from 'zustand';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as Popover from '@radix-ui/react-popover';
 import { createPortal } from 'react-dom';
 import { useTranslation } from '@fayz-ai/core';
@@ -104,8 +104,17 @@ var ICON_MAP = {
   Workflow,
   Boxes,
   Clock3,
-  FileCheck2
+  FileCheck2,
+  GraduationCap,
+  Repeat,
+  User,
+  Palette,
+  ShieldCheck,
+  SlidersHorizontal,
+  Puzzle
 };
+var RAIL_PUSH_MS = 260;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React3.useLayoutEffect : React3.useEffect;
 function getIcon(name) {
   return ICON_MAP[name] ?? Home;
 }
@@ -130,6 +139,7 @@ function NavItem({
         /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
         !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: item.label }),
+          item.premium && /* @__PURE__ */ jsx(Crown, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-amber-500", "aria-hidden": true }),
           item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground", children: item.badge })
         ] })
       ]
@@ -146,6 +156,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__ */ jsx(Crown, { className: "ml-1.5 inline h-3 w-3 text-amber-500", "aria-hidden": true }),
             item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-primary px-1.5 py-0.5 text-xs text-primary-foreground", children: item.badge }),
             /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "fill-popover" })
           ]
@@ -258,7 +269,10 @@ function Sidebar({
   borderless,
   userMenuSlot,
   notificationSlot,
-  unreadCount = 0
+  unreadCount = 0,
+  sectionLabels,
+  navKey,
+  navDirection = "forward"
 }) {
   const currentPath = currentPathProp;
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
@@ -269,6 +283,47 @@ 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 renderItem = (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsx(
+    NavItem,
+    {
+      item,
+      collapsed,
+      isActive: item.route === activeRoute,
+      onNavigate: handleNavigate
+    },
+    item.id
+  );
+  const navBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+    topContent && /* @__PURE__ */ jsx("div", { className: "mb-4 space-y-2", children: topContent }),
+    mainItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      sectionHeading(sectionLabels?.main),
+      mainItems.map(renderItem)
+    ] }),
+    secondaryItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-1", children: [
+      sectionHeading(sectionLabels?.secondary),
+      secondaryItems.map(renderItem)
+    ] })
+  ] });
+  const [outgoing, setOutgoing] = React3.useState(null);
+  const lastBodyRef = React3.useRef(null);
+  const lastKeyRef = React3.useRef(navKey);
+  const timerRef = React3.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.useEffect(() => () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }, []);
   return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -312,33 +367,39 @@ function Sidebar({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("nav", { className: "flex-1 space-y-1 overflow-y-auto p-2", children: [
-          topContent && /* @__PURE__ */ jsx("div", { className: "mb-4 space-y-2", children: topContent }),
-          mainItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1", children: mainItems.map(
-            (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsx(
-              NavItem,
-              {
-                item,
-                collapsed,
-                isActive: item.route === activeRoute,
-                onNavigate: handleNavigate
-              },
-              item.id
-            )
-          ) }),
-          secondaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6 space-y-1", children: secondaryItems.map(
-            (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsx(
-              NavItem,
-              {
-                item,
-                collapsed,
-                isActive: item.route === activeRoute,
-                onNavigate: handleNavigate
-              },
-              item.id
-            )
-          ) })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            className: cn(
+              "relative flex-1 p-2",
+              outgoing ? "overflow-hidden" : "overflow-y-auto"
+            ),
+            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,
           {
@@ -384,6 +445,8 @@ function Sidebar({
 }
 function TopbarUserMenu({
   user,
+  userPlan,
+  billingLabel = "Subscription",
   onSignOut,
   onProfile,
   onSettings,
@@ -434,11 +497,35 @@ function TopbarUserMenu({
           /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-0.5", children: [
             item("Perfil", onProfile, UserCog),
             item("Configura\xE7\xF5es", onSettings, Settings),
-            item("Cobran\xE7a", onBilling, CreditCard),
+            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)
+              item("Sair", onSignOut, LogOut)
             ] })
           ] })
         ]
@@ -503,7 +590,7 @@ var ICON_MAP2 = {
   ArrowUpCircle,
   ArrowLeftRight,
   Plug,
-  SlidersHorizontal,
+  SlidersHorizontal: SlidersHorizontal,
   TableProperties,
   Landmark: Landmark,
   Receipt: Receipt,
@@ -546,7 +633,9 @@ var ICON_MAP2 = {
   Star: Star,
   Zap: Zap,
   Clapperboard,
-  Newspaper
+  Newspaper,
+  GraduationCap: GraduationCap,
+  Repeat: Repeat
 };
 function getIcon2(name) {
   return ICON_MAP2[name] ?? Home;
@@ -610,6 +699,7 @@ function Topbar({
   logo,
   user,
   onMenuClick,
+  orgSwitcher,
   leftContent,
   rightContent,
   currentPath = "/",
@@ -619,6 +709,8 @@ function Topbar({
   onProfile,
   onSettings,
   onBilling,
+  userPlan,
+  billingLabel,
   userMenuExtras
 }) {
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
@@ -640,7 +732,8 @@ function Topbar({
             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: "hidden shrink-0 items-center md:flex", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
+        orgSwitcher && /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 items-center md:flex", children: orgSwitcher })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "mx-8 hidden max-w-sm flex-1 md:flex", children: /* @__PURE__ */ jsxs(
         "button",
@@ -661,6 +754,8 @@ function Topbar({
           TopbarUserMenu,
           {
             user,
+            userPlan,
+            billingLabel,
             onSignOut,
             onProfile,
             onSettings,
@@ -703,6 +798,7 @@ function Topbar({
           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 })
           ]
         },
@@ -742,7 +838,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);
@@ -776,7 +875,10 @@ function SidebarLayout({
         borderless: false,
         userMenuSlot,
         notificationSlot,
-        unreadCount
+        unreadCount,
+        sectionLabels: sidebarSectionLabels,
+        navKey: sidebarNavKey,
+        navDirection: sidebarNavDirection
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: cn(
@@ -806,7 +908,7 @@ function SidebarLayout({
           topbarEnd
         ] })
       ] }),
-      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children }),
+      /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }),
       /* @__PURE__ */ jsx(SaveBar, {})
     ] }),
     mobileMenuOpen && /* @__PURE__ */ jsx(
@@ -842,11 +944,15 @@ function TopbarLayout({
   onProfile,
   onSettings,
   onBilling,
+  userPlan,
+  billingLabel,
   userMenuExtras,
+  orgSwitcher,
   frame,
   currentPath,
   topbarStart,
   topbarEnd,
+  notificationSlot,
   hasBottomNav = false
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
@@ -863,13 +969,19 @@ function TopbarLayout({
         onProfile,
         onSettings,
         onBilling,
+        userPlan,
+        billingLabel,
         userMenuExtras,
+        orgSwitcher,
         leftContent: topbarStart,
-        rightContent: topbarEnd,
+        rightContent: topbarEnd || notificationSlot ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          topbarEnd,
+          notificationSlot
+        ] }) : void 0,
         onMenuClick: hasBottomNav ? void 0 : () => setMobileMenuOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-y-auto pb-16 md:pb-0", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsx("div", { className: cn("min-h-full", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children }) }),
+    /* @__PURE__ */ jsx("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__ */ jsx("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: /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }) }) }),
     /* @__PURE__ */ jsx(SaveBar, {}),
     mobileMenuOpen && /* @__PURE__ */ jsx(
       MobileOverlay,
@@ -883,6 +995,7 @@ function TopbarLayout({
         onProfile,
         onSettings,
         onBilling,
+        orgSwitcher,
         userMenuSlot: user ? /* @__PURE__ */ jsx(DrawerUserRow, { user }) : void 0,
         onClose: () => setMobileMenuOpen(false)
       }
@@ -907,7 +1020,7 @@ function MinimalLayout({
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
       headerEnd && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerEnd })
     ] }),
-    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children })
+    /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children })
   ] });
 }
 function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
@@ -1057,6 +1170,8 @@ function AppShell({
   onProfile,
   onSettings,
   onBilling,
+  userPlan,
+  billingLabel,
   pageTitle,
   currentPath,
   userMenuExtras,
@@ -1070,7 +1185,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__ */ jsx(
@@ -1111,6 +1236,9 @@ function AppShell({
           unreadCount,
           hasBottomNav,
           mobileHeader,
+          sidebarSectionLabels,
+          sidebarNavKey,
+          sidebarNavDirection,
           children
         }
       );
@@ -1127,11 +1255,15 @@ function AppShell({
           onProfile,
           onSettings,
           onBilling,
+          userPlan,
+          billingLabel,
           userMenuExtras,
+          orgSwitcher,
           frame: contentFrame,
           currentPath,
           topbarStart,
           topbarEnd,
+          notificationSlot,
           hasBottomNav,
           children
         }
@@ -1145,11 +1277,142 @@ function AppShell({
     }
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    layoutElement,
+    rightRail ? /* @__PURE__ */ 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.useState(defaultWidth);
+  const [dragging, setDragging] = React3.useState(false);
+  const clamp = React3.useCallback(
+    (value) => Math.min(maxWidth, Math.max(minWidth, value)),
+    [minWidth, maxWidth]
+  );
+  React3.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.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__ */ jsxs("div", { className: cn("flex h-screen w-full overflow-hidden bg-sidebar", !frame && "md:bg-background"), children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+      /* @__PURE__ */ 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: cn(
+            "group relative hidden w-1 shrink-0 cursor-col-resize focus-visible:outline-none",
+            open && "md:block"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: 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__ */ jsx("span", { className: "absolute inset-y-0 -left-1.5 -right-1.5" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "aside",
+        {
+          style: { ["--fayz-rail-w"]: `${width}px` },
+          className: 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.createContext("slide");
 function NavTransitionProvider({ value, children }) {
   return /* @__PURE__ */ jsx(NavTransitionContext.Provider, { value, children });
@@ -1179,6 +1442,11 @@ function PageHeaderActions({ children }) {
   if (slot) return createPortal(children, slot);
   return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
 }
+function PremiumBadge({ className }) {
+  const t = useTranslation();
+  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 = React3.createContext("rail");
 function ModuleLayoutProvider({ variant, children }) {
   return /* @__PURE__ */ jsx(ModuleLayoutContext.Provider, { value: variant, children });
@@ -1205,11 +1473,12 @@ function NavItem2({ item }) {
         children: [
           Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
           /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: item.label }),
+          item.premium && /* @__PURE__ */ jsx(PremiumBadge, { className: "ml-1" }),
           hasChildren && (expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }))
         ]
       }
     ),
-    hasChildren && expanded && /* @__PURE__ */ jsx("div", { className: "ml-4 mt-0.5 space-y-0.5 border-l pl-2", children: item.children.map((child) => /* @__PURE__ */ jsx(
+    hasChildren && expanded && /* @__PURE__ */ jsx("div", { className: "ml-4 mt-0.5 space-y-0.5 border-l pl-2", children: item.children.map((child) => /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -1218,7 +1487,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__ */ jsx("span", { className: "flex-1 text-left truncate", children: child.label }),
+          child.premium && /* @__PURE__ */ jsx(PremiumBadge, { className: "ml-1" })
+        ]
       },
       child.id
     )) })
@@ -1262,6 +1534,7 @@ function MobileTabs({ nav }) {
           children: [
             Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
             item.label,
+            item.premium && /* @__PURE__ */ jsx(PremiumBadge, {}),
             hasChildren && /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-2.5 w-2.5 transition-transform", isExpanded && "rotate-180") })
           ]
         },
@@ -1271,7 +1544,7 @@ function MobileTabs({ nav }) {
     expandedId && (() => {
       const item = nav.find((n) => n.id === expandedId);
       if (!item?.children) return null;
-      return /* @__PURE__ */ 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__ */ jsx(
+      return /* @__PURE__ */ 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__ */ jsxs(
         "button",
         {
           type: "button",
@@ -1283,7 +1556,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__ */ jsx(PremiumBadge, {})
+          ]
         },
         child.id
       )) });
@@ -1375,7 +1651,8 @@ function ModuleHeader({ nav }) {
         ),
         children: [
           Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
-          item.label
+          item.label,
+          item.premium && /* @__PURE__ */ jsx(PremiumBadge, {})
         ]
       },
       item.id
@@ -1503,5 +1780,5 @@ function ContentSplitTrigger({ label, iconOnly, className }) {
 }
 
 export { AppShell, BackStyleProvider, ContentSplit, ContentSplitTrigger, ICON_MAP, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTransition, Sidebar, SubpageHeader, Topbar, useBackStyle, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition };
-//# sourceMappingURL=chunk-MZZMZYSE.js.map
-//# sourceMappingURL=chunk-MZZMZYSE.js.map
+//# sourceMappingURL=chunk-ID2HQK2Q.js.map
+//# sourceMappingURL=chunk-ID2HQK2Q.js.map