@fayz-ai/ui 0.31.0 → 0.33.1

package/dist/{chunk-VBYFN5ZL.js → chunk-33A7SN2N.js}

@@ -1,7 +1,7 @@
 import { cn } from './chunk-OKZ6WQB3.js';
 import { ICON_MAP } from './chunk-ATDIWKBD.js';
 import * as React11 from 'react';
-import { Loader2, ChevronLeft, ArrowLeft, X, Bell, PanelLeft, PanelLeftClose, Search, CornerDownLeft, Menu, Crown, ChevronDown, ChevronRight, Info, ExternalLink, CreditCard, Sparkles, Home, ChevronUp, Plus, Settings, UserCog, LogOut } from 'lucide-react';
+import { Loader2, ChevronLeft, ArrowLeft, X, Bell, PanelLeft, PanelLeftClose, Search, CornerDownLeft, Menu, Crown, ChevronsRight, ChevronsLeft, ChevronDown, ChevronRight, Info, ExternalLink, CreditCard, Sparkles, Home, ChevronUp, Plus, Settings, UserCog, LogOut } from 'lucide-react';
 import { useTranslation, useNavReferrer, routeModule, navHistoryBack, recordNavigation } from '@fayz-ai/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -215,10 +215,14 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var usePageHeaderStore = create((set, get) => ({
+  moduleViewLabel: null,
+  setModuleViewLabel: (moduleViewLabel) => set((state) => state.moduleViewLabel === moduleViewLabel ? state : { moduleViewLabel }),
   shellSlot: null,
   setShellSlot: (element) => set({ shellSlot: element }),
   outletSlot: null,
   setOutletSlot: (element) => set({ outletSlot: element }),
+  outletActionsSlot: null,
+  setOutletActionsSlot: (element) => set({ outletActionsSlot: element }),
   claimed: false,
   owner: null,
   hasBack: false,
@@ -253,6 +257,9 @@ function usePageHeaderClaimed() {
 function usePageTitleSlot() {
   return usePageHeaderStore((s) => s.outletSlot ?? s.shellSlot);
 }
+function usePageActionsOutletSlot() {
+  return usePageHeaderStore((s) => s.outletActionsSlot);
+}
 function usePageTitleSlotHost() {
   return usePageHeaderStore((s) => s.setShellSlot);
 }
@@ -270,19 +277,30 @@ function useHasPageHeaderHost() {
 function useHasPageHeaderOutlet() {
   return usePageHeaderStore((s) => s.outlets > 0);
 }
-function PageHeaderOutlet({ className }) {
+function PageHeaderOutlet({ className, active = true }) {
   const setOutletSlot = usePageHeaderStore((s) => s.setOutletSlot);
+  const setOutletActionsSlot = usePageHeaderStore((s) => s.setOutletActionsSlot);
   const claimed = usePageHeaderStore((s) => s.claimed);
+  const hasActions = usePageHeaderStore((s) => s.actions > 0);
   const addOutlet = usePageHeaderStore((s) => s.addOutlet);
   const removeOutlet = usePageHeaderStore((s) => s.removeOutlet);
   React11.useEffect(() => {
+    if (!active) return;
     addOutlet();
     return removeOutlet;
-  }, [addOutlet, removeOutlet]);
-  return React11.createElement("div", {
-    ref: setOutletSlot,
-    className: `${className ?? "mb-4"}${claimed ? "" : " hidden"}`
-  });
+  }, [active, addOutlet, removeOutlet]);
+  React11.useEffect(() => {
+    if (active) return;
+    setOutletSlot(null);
+    setOutletActionsSlot(null);
+  }, [active, setOutletSlot, setOutletActionsSlot]);
+  if (!active) return null;
+  return React11.createElement(
+    "div",
+    { className: `flex min-h-9 items-center justify-between gap-3${claimed || hasActions ? "" : " hidden"} ${className ?? "mb-3"}` },
+    React11.createElement("div", { ref: setOutletSlot, className: "flex min-w-0 flex-1 items-center" }),
+    React11.createElement("div", { ref: setOutletActionsSlot, className: "flex shrink-0 items-center gap-2" })
+  );
 }
 function usePageHeader(active, options) {
   const id = React11.useId();
@@ -301,6 +319,16 @@ function usePageHeader(active, options) {
 function useHasPageHeaderBack() {
   return usePageHeaderStore((s) => s.hasBack);
 }
+function useModuleViewLabel() {
+  return usePageHeaderStore((s) => s.moduleViewLabel);
+}
+function usePublishModuleViewLabel(label) {
+  const setLabel = usePageHeaderStore((s) => s.setModuleViewLabel);
+  React11.useEffect(() => {
+    setLabel(label ?? null);
+    return () => setLabel(null);
+  }, [label, setLabel]);
+}
 function PageTitlePortal({ children }) {
   const slot = usePageTitleSlot();
   if (!slot) return React11.createElement(React11.Fragment, null, children);
@@ -539,6 +567,7 @@ function useRailFlyout({
         "div",
         {
           ref: panelRef,
+          style: { borderTopLeftRadius: 2, borderBottomLeftRadius: 2 },
           className: cn(
             // Sidebar tone, sidebar border: the panel is the menu leaning out,
             // not a popover from the page underneath it.
@@ -619,6 +648,51 @@ function FlyoutBody({
     ] })
   ] });
 }
+function NavChildConnector({ onPath, active }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    onPath && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute bottom-0 left-[13px] top-0 w-[1.5px] bg-current"
+      }
+    ),
+    active && /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute left-1 top-0",
+        width: "21",
+        height: "32",
+        viewBox: "0 0 21 32",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M9.75 0 V11 Q9.75 16 14.75 16 H20",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              fill: "none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M17 13 L20 16 L17 19",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              fill: "none"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 var RAIL_PUSH_MS = 260;
 var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React11.useLayoutEffect : React11.useEffect;
 function getIcon(name) {
@@ -845,47 +919,7 @@ function NavGroup({
         // to /70 when inactive, and a line fading along with the label it
         // points AT was nearly invisible on a dark rail.
         /* @__PURE__ */ jsxs("div", { className: "relative h-8 text-sidebar-foreground/45", children: [
-          onPath && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              className: "pointer-events-none absolute bottom-0 left-[13px] top-0 w-[1.5px] bg-current"
-            }
-          ),
-          isActive && /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              "aria-hidden": true,
-              className: "pointer-events-none absolute left-1 top-0",
-              width: "21",
-              height: "32",
-              viewBox: "0 0 21 32",
-              fill: "none",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: "M9.75 0 V11 Q9.75 16 14.75 16 H20",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    fill: "none"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: "M17 13 L20 16 L17 19",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    fill: "none"
-                  }
-                )
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsx(NavChildConnector, { onPath, active: isActive }),
           row
         ] }, child.id)
       );
@@ -926,6 +960,7 @@ function Sidebar({
   borderless,
   userMenuSlot,
   notificationSlot,
+  hideNotifications = false,
   unreadCount = 0,
   searchLabel: _searchLabel,
   sectionLabels,
@@ -1197,7 +1232,7 @@ function Sidebar({
               ), children: [
                 withCollapsed(userMenuSlot, collapsed),
                 !collapsed && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-                withCollapsed(notificationSlot, collapsed) ?? /* @__PURE__ */ jsxs(
+                !hideNotifications && (withCollapsed(notificationSlot, collapsed) ?? /* @__PURE__ */ jsxs(
                   "button",
                   {
                     ...collapsed ? flyout.rowProps({
@@ -1211,7 +1246,7 @@ function Sidebar({
                       unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 h-2 w-2 rounded-full bg-destructive" })
                     ]
                   }
-                ),
+                )),
                 !drawer && /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -1914,7 +1949,9 @@ function SidebarLayout({
   railOpen
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed);
-  const pageHeaderClaimed = usePageHeaderClaimed();
+  const rawClaimed = usePageHeaderClaimed();
+  const hasOutlet = useHasPageHeaderOutlet();
+  const pageHeaderClaimed = hasOutlet ? false : rawClaimed;
   const setTitleSlot = usePageTitleSlotHost();
   usePageHeaderHost();
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
@@ -1959,7 +1996,7 @@ function SidebarLayout({
         footerContent: sidebarFooterContent,
         borderless: frame,
         userMenuSlot,
-        notificationSlot,
+        hideNotifications: true,
         unreadCount,
         searchLabel,
         sectionLabels: menuNavigation ? void 0 : sidebarSectionLabels,
@@ -2025,19 +2062,22 @@ function SidebarLayout({
               ]
             }
           ),
-          !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack, primary: pagePrimary }),
-          /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
           topbarStart,
           /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 flex-1 justify-center px-2 md:flex", children: /* @__PURE__ */ jsx(ShellSearch, { tone: "bar", label: searchLabel, className: "w-full max-w-[280px]" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 items-center justify-end gap-2 md:flex-1", children: [
-          /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex items-center gap-2", style: { "--primary": "var(--primary-on-rail)", "--primary-foreground": "var(--primary-on-rail-foreground)" } }),
-          topbarEnd
+          topbarEnd,
+          notificationSlot
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { "data-frame": frame || void 0, className: cn(
-        "relative flex min-w-0 flex-1 overflow-hidden",
+        // `flex-col`: a faixa da página é a PRIMEIRA fila do cartão e
+        // atravessa-o inteiro; a trilha da página e o conteúdo dividem a fila
+        // de baixo. Era uma coluna só, com a trilha ao lado da faixa: a
+        // migalha começava depois do menu de Configurações e a régua sob ela
+        // parava no meio do cartão, como se fossem duas telas encostadas.
+        "relative flex min-w-0 flex-1 flex-col 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.
@@ -2054,10 +2094,49 @@ function SidebarLayout({
         frame && (railOpen ? "md:rounded-r-none md:border-r-0" : "md:mr-2"),
         immersive && "md:overflow-hidden"
       ), children: [
-        /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
-        /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-          /* @__PURE__ */ jsx("main", { className: cn("min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", menuOpen && "invisible md:visible"), children }),
-          /* @__PURE__ */ jsx(SaveBar, {})
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              // A RÉGUA NÃO ATRAVESSA A COLUNA DO MÓDULO.
+              //
+              // Ela fecha o cabeçalho, e o cabeçalho termina onde a coluna começa:
+              // sobre a coluna, a mesma linha separava duas coisas que são uma só —
+              // o nome da tela e o menu que pende dele. Tapar o pedaço com um pixel
+              // da cor do papel funcionava num tema e falhava no outro, porque o
+              // papel do cartão e o `--page-surface` nem sempre são a mesma tinta.
+              //
+              // Então ela NASCE depois: a régua é um degradê de 1px que só começa
+              // em `--page-rail-seam` — a largura da coluna mais o raio da curva,
+              // publicado por quem a desenha (ver RailColumn). Sem coluna, a
+              // variável não existe e a régua começa em zero, como sempre.
+              backgroundImage: "linear-gradient(to right, transparent 0 var(--page-rail-seam, 0px), hsl(var(--border)) var(--page-rail-seam, 0px) 100%)",
+              backgroundSize: "100% 1px",
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "left bottom"
+            },
+            className: cn(
+              // O MESMO vidro da coluna do módulo logo abaixo — uma classe só,
+              // senão as duas superfícies encostadas saem em tons diferentes e
+              // a emenda que acabamos de apagar volta como degrau de cor.
+              "fz-liquid-glass relative z-20 flex min-h-12 shrink-0 items-center justify-between gap-3 px-3 md:px-6",
+              menuOpen && "invisible md:visible"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+                !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack, primary: pagePrimary }),
+                /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex shrink-0 items-center gap-2" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 min-h-0 flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", children: [
+            /* @__PURE__ */ jsx("main", { className: cn("min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", menuOpen && "invisible md:visible"), children }),
+            /* @__PURE__ */ jsx(SaveBar, {})
+          ] })
         ] })
       ] })
     ] }),
@@ -2185,43 +2264,49 @@ function TopbarLayout({
         hideMobileChrome: barOwnsNav
       }
     ),
-    /* @__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", { "data-frame": frame || void 0, className: cn("fz-page-surface 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: [
-        (pageHeaderClaimed || pageBack || hasPageActions || barOwnsNav) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              // `relative` + glass for the same reason as the sidebar
-              // layout's band: on a phone this IS the navigation bar.
-              "relative flex min-h-[44px] md:min-h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-2",
-              menuOpen && "invisible md:visible",
-              "fayz-glass-topbar",
-              !(pageHeaderClaimed || pageBack || hasPageActions) && "md:hidden"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-                mobileBackToMenu && /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: mobileBackToMenu,
-                    className: "fz-ios-tint fz-tap -ml-1 inline-flex shrink-0 items-center gap-0.5 text-[15px] md:hidden",
-                    children: [
-                      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }),
-                      /* @__PURE__ */ jsx("span", { children: "Voltar" })
-                    ]
-                  }
-                ),
-                !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: showTitle ? pageTitle : void 0, back: pageBack, primary: pagePrimary }),
-                /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
-                /* @__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", style: { "--primary": "var(--primary-on-rail)", "--primary-foreground": "var(--primary-on-rail-foreground)" } })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", menuOpen && "invisible md:visible"), 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", { "data-frame": frame || void 0, className: cn("fz-page-surface flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-content"), children: [
+      (pageHeaderClaimed || pageBack || hasPageActions || barOwnsNav) && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            backgroundImage: "linear-gradient(to right, transparent 0 var(--page-rail-seam, 0px), hsl(var(--border)) var(--page-rail-seam, 0px) 100%)",
+            backgroundSize: "100% 1px",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "left bottom"
+          },
+          className: cn(
+            // `relative` + glass for the same reason as the sidebar
+            // layout's band: on a phone this IS the navigation bar.
+            "relative flex min-h-[44px] md:min-h-12 shrink-0 items-center justify-between gap-3 px-4 py-2",
+            menuOpen && "invisible md:visible",
+            "fayz-glass-topbar",
+            !(pageHeaderClaimed || pageBack || hasPageActions) && "md:hidden"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+              mobileBackToMenu && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: mobileBackToMenu,
+                  className: "fz-ios-tint fz-tap -ml-1 inline-flex shrink-0 items-center gap-0.5 text-[15px] md:hidden",
+                  children: [
+                    /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }),
+                    /* @__PURE__ */ jsx("span", { children: "Voltar" })
+                  ]
+                }
+              ),
+              !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: showTitle ? pageTitle : void 0, back: pageBack, primary: pagePrimary }),
+              /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
+              /* @__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", style: { "--primary": "var(--primary-on-rail)", "--primary-foreground": "var(--primary-on-rail-foreground)" } })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 min-h-0 flex-1 overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
+        /* @__PURE__ */ jsx("div", { className: cn("min-w-0 min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", menuOpen && "invisible md:visible"), children })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(SaveBar, {}),
@@ -3337,13 +3422,26 @@ function HeaderTabs({
     }
   );
 }
+var PAGE_BAND_CLASS = "sticky top-0 z-20 -mx-3 -mt-3 mb-4 flex flex-nowrap items-end justify-between gap-3 border-b border-border px-3 pt-2 md:-mx-6 md:-mt-4 md:px-6 md:min-h-[2.5rem]";
+var PAGE_BAND_SURFACE = { background: "var(--page-surface, hsl(var(--background)))" };
+function PageBand({ children, actions, className }) {
+  return /* @__PURE__ */ jsxs("div", { style: PAGE_BAND_SURFACE, className: cn(PAGE_BAND_CLASS, "items-center", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-3", children }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 empty:hidden", children: actions })
+  ] });
+}
 function PageTabs({ actions, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: { background: "var(--page-surface, hsl(var(--background)))" },
       className: cn(
-        "sticky top-0 z-20 -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",
+        // `flex-nowrap`: a faixa NÃO quebra mais. Quebrando, o slot da direita
+        // (filtros, modos de ver) descia para uma segunda linha e a tela ganhava
+        // um terceiro andar de chrome antes do conteúdo — e, pior, as abas
+        // comiam a largura dele primeiro. Agora o slot da direita tem lugar
+        // garantido e são as ABAS que rolam na horizontal quando não cabem.
+        "sticky top-0 z-20 -mx-3 -mt-3 mb-4 flex flex-nowrap items-end justify-between gap-3 border-b border-border px-3 pt-2 md:-mx-6 md:-mt-4 md:px-6",
         // 48px no desktop, a mesma altura do subcabeçalho dos painéis do
         // assistente à direita (TasksFilterBar, NotebookPanel). Eram 34 aqui e
         // 48 lá: os dois fios que fecham as duas faixas paravam em alturas
@@ -3354,8 +3452,8 @@ function PageTabs({ actions, className, ...props }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(HeaderTabs, { ...props, className: "-mb-px" }),
-        actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2 pb-1.5", children: actions })
+        /* @__PURE__ */ jsx(HeaderTabs, { ...props, className: "-mb-px min-w-0 flex-1" }),
+        actions && /* @__PURE__ */ jsx("div", { className: "-mt-1 flex shrink-0 items-center gap-2 pb-1 empty:hidden", children: actions })
       ]
     }
   );
@@ -3434,15 +3532,15 @@ function navigateToCrumb(crumb) {
   else window.location.hash = crumb.href;
 }
 function useCurrentRouteHref() {
-  const read = () => {
+  const read2 = () => {
     if (typeof window === "undefined") return "";
     const hash = window.location.hash.replace(/^#/, "");
     const clean = hash.split("?")[0];
     return clean.startsWith("/") ? clean : `/${clean}`;
   };
-  const [href, setHref] = React11.useState(read);
+  const [href, setHref] = React11.useState(read2);
   React11.useEffect(() => {
-    const handler = () => setHref(read());
+    const handler = () => setHref(read2());
     window.addEventListener("hashchange", handler);
     handler();
     return () => window.removeEventListener("hashchange", handler);
@@ -3457,6 +3555,241 @@ function useTrailBack(href) {
     [parent]
   );
 }
+var COLUMN_WIDTH = 224;
+var COLUMN_COLLAPSED_WIDTH = 64;
+function read(key) {
+  try {
+    return localStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+function CollapsibleColumn({
+  children,
+  storageKey,
+  footer,
+  squeezed,
+  autoCollapseKey,
+  autoCollapseMs = 1800,
+  onWidth,
+  className,
+  seamTop = 12,
+  "aria-label": ariaLabel
+}) {
+  const pinnedKey = `${storageKey}.pinned`;
+  const [collapsed, setCollapsed] = React11.useState(() => read(storageKey));
+  const [pinned, setPinned] = React11.useState(() => read(pinnedKey));
+  const [hovering, setHovering] = React11.useState(false);
+  const hoveringRef = React11.useRef(false);
+  const collapsedRef = React11.useRef(collapsed);
+  collapsedRef.current = collapsed;
+  const autoRef = React11.useRef(false);
+  const open = !collapsed || hovering;
+  const width = open ? COLUMN_WIDTH : COLUMN_COLLAPSED_WIDTH;
+  const setHover = (on) => {
+    hoveringRef.current = on;
+    setHovering(on);
+  };
+  React11.useEffect(() => {
+    onWidth?.(width);
+  }, [width, onWidth]);
+  const setOpenState = React11.useCallback((nextCollapsed) => {
+    setCollapsed(nextCollapsed);
+    setPinned(!nextCollapsed);
+    autoRef.current = false;
+    try {
+      localStorage.setItem(storageKey, nextCollapsed ? "1" : "0");
+      localStorage.setItem(pinnedKey, nextCollapsed ? "0" : "1");
+    } catch {
+    }
+    if (nextCollapsed) setHover(false);
+  }, [storageKey, pinnedKey]);
+  React11.useEffect(() => {
+    if (squeezed === void 0) return;
+    if (squeezed) {
+      if (!collapsedRef.current) {
+        autoRef.current = true;
+        setCollapsed(true);
+      }
+    } else if (autoRef.current) {
+      autoRef.current = false;
+      setCollapsed(false);
+    }
+  }, [squeezed]);
+  const seen = React11.useRef(null);
+  React11.useEffect(() => {
+    if (autoCollapseKey === void 0) return;
+    if (seen.current === null) {
+      seen.current = autoCollapseKey;
+      return;
+    }
+    if (seen.current === autoCollapseKey) return;
+    seen.current = autoCollapseKey;
+    if (collapsed || pinned) return;
+    const t = setTimeout(() => {
+      if (!hoveringRef.current) setCollapsed(true);
+    }, autoCollapseMs);
+    return () => clearTimeout(t);
+  }, [autoCollapseKey, collapsed, pinned, autoCollapseMs]);
+  const scrollRef = React11.useRef(null);
+  const [hasMore, setHasMore] = React11.useState(false);
+  const onScroll = React11.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setHasMore(el.scrollHeight - el.scrollTop - el.clientHeight > 4);
+  }, []);
+  React11.useEffect(() => {
+    onScroll();
+    const el = scrollRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(onScroll);
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+    };
+  }, [onScroll, open, children]);
+  const boxRef = React11.useRef(null);
+  const panelRef = React11.useRef(null);
+  const [seamed, setSeamed] = React11.useState(false);
+  const armedRef = React11.useRef(false);
+  const publish = React11.useCallback(() => {
+    if (!seamTop) return;
+    const el = panelRef.current;
+    const card = el?.closest(".fz-page-surface");
+    const band = card?.firstElementChild;
+    if (!el || !card || !band) return;
+    const root = document.documentElement;
+    const flush = Math.abs(el.getBoundingClientRect().top - band.getBoundingClientRect().bottom) <= 2;
+    setSeamed(flush);
+    if (!flush) {
+      root.style.removeProperty("--page-rail-seam");
+      return;
+    }
+    const x = el.getBoundingClientRect().right - card.getBoundingClientRect().left;
+    if (!armedRef.current) root.style.transition = "none";
+    root.style.setProperty("--page-rail-seam", `${x + seamTop}px`);
+    if (!armedRef.current) {
+      armedRef.current = true;
+      requestAnimationFrame(() => {
+        root.style.transition = "--page-rail-seam 200ms";
+      });
+    }
+  }, [seamTop]);
+  React11.useEffect(() => {
+    publish();
+  }, [publish, width]);
+  React11.useEffect(() => {
+    if (!seamTop) return;
+    const el = panelRef.current;
+    const card = el?.closest(".fz-page-surface");
+    if (!el || !card) return;
+    const root = document.documentElement;
+    const ro = new ResizeObserver(publish);
+    ro.observe(el);
+    ro.observe(card);
+    return () => {
+      ro.disconnect();
+      armedRef.current = false;
+      root.style.transition = "none";
+      root.style.removeProperty("--page-rail-seam");
+      requestAnimationFrame(() => {
+        root.style.removeProperty("transition");
+      });
+    };
+  }, [publish, seamTop]);
+  return (
+    // A caixa RESERVA a largura; a coluna mora dentro dela, posicionada. Sem
+    // isso, reabrir no hover empurraria o conteúdo a cada passada do ponteiro.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: boxRef,
+        className: cn("relative hidden shrink-0 no-print transition-[width] duration-200 md:block", className),
+        style: { width: collapsed ? COLUMN_COLLAPSED_WIDTH : COLUMN_WIDTH },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              ref: panelRef,
+              "aria-label": ariaLabel,
+              onMouseEnter: () => setHover(true),
+              onMouseLeave: () => setHover(false),
+              onDoubleClick: () => {
+                if (collapsed) setOpenState(false);
+              },
+              style: { width },
+              className: cn(
+                // O vidro é uma classe compartilhada com a faixa do cabeçalho.
+                "fz-liquid-glass absolute inset-y-0 left-0 flex flex-col overflow-hidden p-3 transition-[width] duration-200",
+                collapsed && hovering && "z-30 shadow-xl"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute right-0 w-px",
+                    style: { top: seamTop, bottom: 0, background: "hsl(var(--border))" }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll, className: "scrollbar-none h-full overflow-y-auto overflow-x-hidden", children: children({ collapsed: !open }) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "pointer-events-none absolute inset-x-0 bottom-0 h-8 transition-opacity duration-200",
+                        hasMore ? "opacity-100" : "opacity-0"
+                      ),
+                      style: { backgroundImage: "linear-gradient(to top, var(--page-surface, hsl(var(--background))), transparent)" }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 flex shrink-0 items-center gap-2 border-t border-border pt-2", children: [
+                  open && footer && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: footer }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setOpenState(!collapsed),
+                      "aria-label": collapsed ? "Expandir menu" : "Recolher menu",
+                      title: collapsed ? "Expandir menu" : "Recolher menu",
+                      "aria-expanded": !collapsed,
+                      className: "flex h-8 w-full items-center justify-end rounded-button bg-transparent px-2.5 text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+                      children: collapsed ? /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          seamed && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute top-0",
+              style: { left: `${width - 1}px`, marginTop: "-1px", zIndex: 25, transition: "left 200ms" },
+              width: seamTop,
+              height: seamTop,
+              viewBox: `0 0 ${seamTop} ${seamTop}`,
+              fill: "none",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: `M ${seamTop} 0.5 Q 0.5 0.5 0.5 ${seamTop}`,
+                  stroke: "hsl(var(--border))",
+                  strokeWidth: "1",
+                  fill: "none"
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  );
+}
 function PageRail({ children }) {
   const slot = usePageRailSlot();
   if (slot) return createPortal(children, slot);
@@ -3479,21 +3812,11 @@ function ViewBarHost() {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      style: { background: "var(--page-surface, hsl(var(--background)))", marginTop: "-1rem" },
-      className: cn(
-        "sticky top-[2.4rem] z-10 -mx-3 mb-3 border-b border-border px-3 py-1 md:top-[2.5rem] md:-mx-6 md:px-6",
-        !active && "hidden"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: (el) => {
-            viewBarSlot = el;
-            viewBarNotify();
-          },
-          className: "flex min-h-7 items-center justify-between gap-2"
-        }
-      )
+      ref: (el) => {
+        viewBarSlot = el;
+        viewBarNotify();
+      },
+      className: cn("flex items-center gap-2", !active && "hidden")
     }
   );
 }
@@ -3508,10 +3831,165 @@ function PageViewBar({ children }) {
     };
   }, []);
   if (slot) return createPortal(children, slot);
-  return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-between gap-2", children });
+  return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
+}
+var SUB_NAV_STYLE = "nested";
+function RailSections({ sections, search, collapsed }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    search && !collapsed && /* @__PURE__ */ jsxs("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-1 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          value: search.value,
+          onChange: (e) => search.onChange(e.target.value),
+          placeholder: search.placeholder,
+          "aria-label": search.placeholder,
+          className: "h-8 w-full border-0 bg-transparent pl-7 pr-2 text-[13px] outline-none placeholder:text-muted-foreground focus:ring-0"
+        }
+      )
+    ] }),
+    sections.map((section, i) => /* @__PURE__ */ jsxs("div", { className: i > 0 ? "mt-3 border-t border-border pt-3" : void 0, children: [
+      section.heading && !collapsed && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: section.heading }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: section.items.map((item) => /* @__PURE__ */ jsx(RailNavItem, { item, collapsed }, item.id)) })
+    ] }, section.key ?? i))
+  ] });
+}
+var RAIL_COLLAPSED_KEY = "fayz.subnav.collapsed";
+function RailColumn({ className, "aria-label": ariaLabel, sections, search, footer }) {
+  const boxRef = React11.useRef(null);
+  const [squeezed, setSqueezed] = React11.useState(void 0);
+  React11.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const row = boxRef.current?.parentElement?.parentElement;
+    if (!row) return;
+    const COLLAPSE_BELOW = 560;
+    const RESTORE_ABOVE = 820;
+    let timer;
+    const decide = () => {
+      const content = row.clientWidth - COLUMN_WIDTH;
+      if (content < COLLAPSE_BELOW) setSqueezed(true);
+      else if (content > RESTORE_ABOVE) setSqueezed(false);
+    };
+    const apply = () => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(decide, 180);
+    };
+    apply();
+    const ro = new ResizeObserver(apply);
+    ro.observe(row);
+    window.addEventListener("resize", apply);
+    return () => {
+      if (timer) clearTimeout(timer);
+      ro.disconnect();
+      window.removeEventListener("resize", apply);
+    };
+  }, []);
+  const activeKey = sections.flatMap((sec) => sec.items).filter((i) => i.active).map((i) => i.id).join("|");
+  return /* @__PURE__ */ jsx("div", { ref: boxRef, className: "contents", children: /* @__PURE__ */ jsx(
+    CollapsibleColumn,
+    {
+      "aria-label": ariaLabel,
+      storageKey: RAIL_COLLAPSED_KEY,
+      className,
+      footer,
+      squeezed,
+      autoCollapseKey: activeKey,
+      children: ({ collapsed }) => /* @__PURE__ */ jsx(RailSections, { sections, search, collapsed })
+    }
+  ) });
+}
+var published = [];
+var subNavHosts = 0;
+var subNavListeners = /* @__PURE__ */ new Set();
+var subNavNotify = () => subNavListeners.forEach((l) => l());
+var subNavSubscribe = (l) => {
+  subNavListeners.add(l);
+  return () => {
+    subNavListeners.delete(l);
+  };
+};
+function publishSubNav(entry) {
+  const i = published.findIndex((p) => p.id === entry.id);
+  published = i < 0 ? [...published, entry] : published.map((p, n) => n === i ? entry : p);
+  subNavNotify();
+}
+function unpublishSubNav(id) {
+  published = published.filter((p) => p.id !== id);
+  subNavNotify();
+}
+function useSubNavPublished() {
+  return React11.useSyncExternalStore(subNavSubscribe, () => published, () => published);
+}
+function useSubNavHost() {
+  React11.useEffect(() => {
+    subNavHosts++;
+    subNavNotify();
+    return () => {
+      subNavHosts--;
+      subNavNotify();
+    };
+  }, []);
+}
+function useHasSubNavHost() {
+  return React11.useSyncExternalStore(subNavSubscribe, () => subNavHosts > 0, () => false);
+}
+function SubNavBand({ sections, "aria-label": ariaLabel, className }) {
+  const items = sections.flatMap((s) => s.items);
+  const value = items.find((i) => i.active)?.id ?? items[0]?.id;
+  if (!value) return null;
+  return /* @__PURE__ */ jsx(
+    ViewTabs,
+    {
+      className,
+      "aria-label": ariaLabel,
+      options: items.map((i) => ({ value: i.id, label: i.label })),
+      value,
+      onChange: (id) => items.find((i) => i.id === id)?.onClick?.()
+    }
+  );
+}
+function SubNavBandHost({ leading, label }) {
+  useSubNavHost();
+  const pubs = useSubNavPublished();
+  const sections = leading ?? pubs.flatMap((p) => p.sections);
+  if (sections.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { marginTop: "0.5rem" },
+      className: "flex min-w-0 items-center gap-3",
+      children: /* @__PURE__ */ jsx(SubNavBand, { sections, "aria-label": leading ? label : pubs[0]?.label })
+    }
+  );
+}
+function PageSubNav({ items, sections, search, footer, style, "aria-label": ariaLabel }) {
+  const id = React11.useId();
+  const hasHost = useHasSubNavHost();
+  const resolved = sections ?? (items ? [{ items }] : []);
+  const ref = React11.useRef(resolved);
+  ref.current = resolved;
+  const signature = JSON.stringify(resolved.map((s) => [s.key, s.heading, s.items.map((i) => [i.id, i.label, i.icon, !!i.active, !!i.premium])]));
+  React11.useEffect(() => {
+    publishSubNav({ id, label: ariaLabel, sections: ref.current });
+    return () => unpublishSubNav(id);
+  }, [id, ariaLabel, signature]);
+  if (resolved.every((s) => s.items.length === 0)) return null;
+  if (hasHost) return null;
+  const asRail = (style ?? SUB_NAV_STYLE) === "nested";
+  if (!asRail) {
+    return /* @__PURE__ */ jsx("div", { className: "mb-4 flex min-w-0 items-center gap-3", children: /* @__PURE__ */ jsx(SubNavBand, { sections: resolved, "aria-label": ariaLabel }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageRail, { children: /* @__PURE__ */ jsx(RailColumn, { sections: resolved, search, footer, "aria-label": ariaLabel }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4 flex min-w-0 items-center gap-3 md:hidden", children: /* @__PURE__ */ jsx(SubNavBand, { sections: resolved, "aria-label": ariaLabel }) })
+  ] });
 }
 function PageHeaderActions({ children }) {
-  const slot = useModuleHeaderActionsSlot();
+  const outlet = usePageActionsOutletSlot();
+  const shellSlot = useModuleHeaderActionsSlot();
+  const slot = outlet ?? shellSlot;
   useRegisterPageActions();
   if (slot) return createPortal(children, slot);
   return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
@@ -3528,8 +4006,11 @@ function ModuleLayoutProvider({ variant, children }) {
 function useModuleLayout() {
   return React11.useContext(ModuleLayoutContext);
 }
-function RailNavItem({ item }) {
-  const [expanded, setExpanded] = React11.useState(true);
+function RailNavItem({ item, collapsed }) {
+  const [expanded, setExpanded] = React11.useState(false);
+  React11.useEffect(() => {
+    if (collapsed) setExpanded(false);
+  }, [collapsed]);
   const Icon = item.icon ? ICON_MAP[item.icon] ?? null : null;
   const hasChildren = item.children && item.children.length > 0;
   const hasActiveChild = hasChildren && item.children.some((c) => c.active);
@@ -3540,36 +4021,53 @@ function RailNavItem({ item }) {
       {
         type: "button",
         "data-tour": `modnav.${item.id}`,
-        onClick: () => hasChildren ? setExpanded(!expanded) : item.onClick?.(),
+        onClick: () => hasChildren && !collapsed ? setExpanded(!expanded) : item.onClick?.(),
+        title: collapsed ? item.label : void 0,
         className: cn(
-          "flex items-center gap-2 w-full rounded-md px-2.5 py-1.5 text-sm transition-colors",
+          // `px-2.5` NOS DOIS estados: centralizado, o ícone da tira ficava 2px
+          // à direita do mesmo ícone com a coluna aberta, e todos eles davam um
+          // pulinho lateral quando o ponteiro chegava. O recuo é o mesmo; o que
+          // muda é só o rótulo aparecer.
+          // ALTURA FIXA. Com `py-1.5` a linha media o que tinha dentro: 32px com
+          // rótulo (a entrelinha do texto) e 28px só com o ícone — então cada
+          // linha da tira caía num y diferente do da coluna aberta, e a lista
+          // inteira escorregava quando o ponteiro chegava. `h-8` nos dois.
+          "flex h-8 w-full items-center gap-2 rounded-md px-2.5 text-sm transition-colors",
           isActive ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
         ),
         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" }))
+          !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: item.label }),
+          !collapsed && item.premium && /* @__PURE__ */ jsx(PremiumBadge, { className: "ml-1" }),
+          !collapsed && 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__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "data-tour": `modnav.${child.id}`,
-        onClick: child.onClick,
-        className: cn(
-          "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: [
-          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: child.label }),
-          child.premium && /* @__PURE__ */ jsx(PremiumBadge, { className: "ml-1" })
-        ]
-      },
-      child.id
-    )) })
+    hasChildren && expanded && !collapsed && /* @__PURE__ */ jsx("div", { className: "relative mt-0.5 text-muted-foreground/45", children: item.children.map((child, i) => {
+      const activeIndex = item.children.findIndex((c) => c.active);
+      return /* @__PURE__ */ jsxs("div", { className: "relative h-8", children: [
+        /* @__PURE__ */ jsx(NavChildConnector, { onPath: activeIndex >= 0 && i < activeIndex, active: !!child.active }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-tour": `modnav.${child.id}`,
+            onClick: child.onClick,
+            className: cn(
+              // `pl-11` passa da ponta da seta (~24px) com folga, para as
+              // filhas lerem como UMA coluna indentada em vez de apertarem
+              // a linha que aponta para elas.
+              "flex h-8 w-full items-center rounded-button pl-11 pr-1 text-sm transition-colors",
+              child.active ? "font-medium text-primary" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: child.label }),
+              child.premium && /* @__PURE__ */ jsx(PremiumBadge, { className: "ml-1" })
+            ]
+          }
+        )
+      ] }, child.id);
+    }) })
   ] });
 }
 function defaultChildOf(item) {
@@ -3765,11 +4263,18 @@ function ShellSubpageHeader({
     /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsx("div", { className: "no-print flex shrink-0 items-center gap-2", children: actions }) })
   ] });
 }
+function ModuleSubBand({ nav }) {
+  useSubNavHost();
+  const pubs = useSubNavPublished();
+  const activeItem = nav.find((item) => item.active || item.children?.some((c) => c.active));
+  const kids = (activeItem?.children ?? []).filter((c) => c.kind !== "action");
+  kids.find((c) => c.active)?.id ?? kids[0]?.id;
+  const own = [];
+  const sections = own.length ? own : pubs.flatMap((p) => p.sections);
+  if (sections.every((sec) => sec.items.length === 0)) return null;
+  return /* @__PURE__ */ jsx(PageBand, { actions: /* @__PURE__ */ jsx(ViewBarHost, {}), children: /* @__PURE__ */ jsx(SubNavBand, { sections, "aria-label": own.length ? activeItem?.label : pubs[0]?.label }) });
+}
 function ModuleHeader({ nav }) {
-  function defaultChild(item) {
-    const kids2 = (item.children ?? []).filter((c) => c.kind !== "action");
-    return kids2.find((c) => /list/i.test(c.id) || /^list$/i.test(c.label)) ?? kids2[kids2.length - 1];
-  }
   const activeItem = nav.find((item) => item.active || item.children?.some((c) => c.active));
   const tabs = nav.map((item) => ({
     value: item.id,
@@ -3783,23 +4288,12 @@ function ModuleHeader({ nav }) {
     const item = nav.find((n) => n.id === id);
     if (!item) return;
     const hasChildren = item.children && item.children.length > 0;
-    if (hasChildren) defaultChild(item)?.onClick?.();
+    if (hasChildren) defaultChildOf(item)?.onClick?.();
     else item.onClick?.();
   };
   const kids = (activeItem?.children ?? []).filter((c) => c.kind !== "action");
   const activeKid = kids.find((c) => c.active)?.id ?? kids[0]?.id;
-  const childControl = kids.length > 1 && activeKid ? /* @__PURE__ */ jsxs(PageViewBar, { children: [
-    /* @__PURE__ */ jsx(
-      ViewTabs,
-      {
-        "aria-label": activeItem?.label,
-        options: kids.map((c) => ({ value: c.id, label: c.label })),
-        value: activeKid,
-        onChange: (id) => kids.find((c) => c.id === id)?.onClick?.()
-      }
-    ),
-    /* @__PURE__ */ jsx("span", {})
-  ] }) : void 0;
+  const childNav = kids.length > 1 && activeKid ? [{ items: kids.map((c) => ({ id: c.id, label: c.label, icon: c.icon, premium: c.premium, active: c.id === activeKid, onClick: c.onClick })) }] : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       PageTabs,
@@ -3807,17 +4301,39 @@ function ModuleHeader({ nav }) {
         tabs,
         value: activeItem?.id ?? nav[0]?.id ?? "",
         onChange,
-        anchorPrefix: "modnav"
+        anchorPrefix: "modnav",
+        actions: /* @__PURE__ */ jsx(ViewBarHost, {})
       }
     ),
-    childControl
+    /* @__PURE__ */ jsx(SubNavBandHost, { leading: childNav, label: activeItem?.label })
   ] });
 }
-function ModulePage({ title: _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, navFilterPlaceholder }) {
   const ctxVariant = useModuleLayout();
   const variant = navVariant ?? ctxVariant;
+  const [navQuery, setNavQuery] = React11.useState("");
+  const filteredNav = React11.useMemo(() => {
+    const q = navQuery.trim().toLowerCase();
+    if (!q) return nav;
+    const hit = (label) => label.toLowerCase().includes(q);
+    return nav.flatMap((item) => {
+      if (hit(item.label)) return [item];
+      const kids = (item.children ?? []).filter((c) => hit(c.label));
+      return kids.length ? [{ ...item, children: kids }] : [];
+    });
+  }, [nav, navQuery]);
   const transitionKey = viewKey ?? "view";
   const onSubpage = useHasPageHeaderBack();
+  const activeLabel = React11.useMemo(() => {
+    if (onSubpage) return null;
+    for (const item of nav) {
+      const kid = item.children?.find((c) => c.active);
+      if (kid) return kid.label === item.label ? item.label : `${item.label} \u203A ${kid.label}`;
+      if (item.active) return item.label;
+    }
+    return null;
+  }, [nav, onSubpage]);
+  usePublishModuleViewLabel(activeLabel);
   if (variant === "sidebar") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
@@ -3827,24 +4343,28 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
   if (variant === "tabs") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       !onSubpage && /* @__PURE__ */ jsx(ModuleHeader, { nav }),
-      !onSubpage && /* @__PURE__ */ jsx(ViewBarHost, {}),
       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("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__ */ jsx(PageRail, { children: /* @__PURE__ */ jsx(
+      RailColumn,
+      {
+        sections: [{ items: filteredNav  }],
+        search: navFilterPlaceholder ? { value: navQuery, onChange: setNavQuery, placeholder: navFilterPlaceholder } : void 0,
+        footer: sidebarFooter
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
       showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
       !onSubpage && /* @__PURE__ */ jsx(MobileTabs, { nav }),
+      !onSubpage && /* @__PURE__ */ jsx(ModuleSubBand, { nav }),
       /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, children })
     ] })
   ] });
 }
 
-export { AppShell, BackStyleProvider, BottomSheet, HeaderTabs, Hint, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageHeaderOutlet, PageRail, PageTabs, PageTitlePortal, PageTrail, PageTransition, PageViewBar, RailNavItem, SaveBar, SaveBarProvider, SheetCard, SheetRow, ShellSearch, Sidebar, SubpageHeader, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Topbar, ViewTabs, bottomNavReachesAll, isCreateRoute, navigateToCrumb, useBackHandler, useBackStyle, useCrossModuleBack, useCurrentRouteHref, useHasPageActions, useHasPageHeaderBack, useHasPageHeaderHost, useHasPageHeaderOutlet, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, usePageHeader, usePageHeaderClaimed, usePageHeaderHost, usePageTrail, usePageTrailParent, useRailRow, useRegisterPageActions, useSaveBar, useSaveBarVisible, useSheetClose, useSheetDrag, useTrailBack };
-//# sourceMappingURL=chunk-VBYFN5ZL.js.map
-//# sourceMappingURL=chunk-VBYFN5ZL.js.map
+export { AppShell, BackStyleProvider, BottomSheet, COLUMN_WIDTH, CollapsibleColumn, HeaderTabs, Hint, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageHeaderOutlet, PageRail, PageSubNav, PageTabs, PageTitlePortal, PageTrail, PageTransition, PageViewBar, RailColumn, RailNavItem, SUB_NAV_STYLE, SaveBar, SaveBarProvider, SheetCard, SheetRow, ShellSearch, Sidebar, SubpageHeader, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Topbar, ViewTabs, bottomNavReachesAll, isCreateRoute, navigateToCrumb, useBackHandler, useBackStyle, useCrossModuleBack, useCurrentRouteHref, useHasPageActions, useHasPageHeaderBack, useHasPageHeaderHost, useHasPageHeaderOutlet, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useModuleViewLabel, useNavTransition, usePageHeader, usePageHeaderClaimed, usePageHeaderHost, usePageTrail, usePageTrailParent, usePublishModuleViewLabel, useRailRow, useRegisterPageActions, useSaveBar, useSaveBarVisible, useSheetClose, useSheetDrag, useTrailBack };
+//# sourceMappingURL=chunk-33A7SN2N.js.map
+//# sourceMappingURL=chunk-33A7SN2N.js.map