@fayz-ai/ui 0.33.0 → 0.33.1

package/dist/{chunk-PL5CUWNE.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,6 +215,8 @@ 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,
@@ -317,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);
@@ -555,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.
@@ -635,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) {
@@ -861,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)
       );
@@ -2076,16 +2094,43 @@ function SidebarLayout({
         frame && (railOpen ? "md:rounded-r-none md:border-r-0" : "md:mr-2"),
         immersive && "md:overflow-hidden"
       ), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn(
-          "relative z-20 flex min-h-12 shrink-0 items-center justify-between gap-3 border-b border-border 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",
+          {
+            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: [
@@ -2223,10 +2268,16 @@ function TopbarLayout({
       (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 border-b border-border px-4 py-2",
+            "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"
@@ -3371,6 +3422,14 @@ 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",
@@ -3473,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);
@@ -3496,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);
@@ -3539,6 +3833,159 @@ function PageViewBar({ children }) {
   if (slot) return createPortal(children, slot);
   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 outlet = usePageActionsOutletSlot();
   const shellSlot = useModuleHeaderActionsSlot();
@@ -3559,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);
@@ -3571,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) {
@@ -3796,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,
@@ -3814,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,
@@ -3842,7 +4305,7 @@ function ModuleHeader({ nav }) {
         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, navFilterPlaceholder }) {
@@ -3861,6 +4324,16 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
   }, [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 }),
@@ -3875,32 +4348,23 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
     ] });
   }
   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: [
-      navFilterPlaceholder && /* @__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: navQuery,
-            onChange: (e) => setNavQuery(e.target.value),
-            placeholder: navFilterPlaceholder,
-            "aria-label": navFilterPlaceholder,
-            className: "h-8 w-full border-0 bg-transparent pl-7 pr-2 text-[13px] outline-none placeholder:text-muted-foreground focus:ring-0"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("nav", { className: "space-y-0.5", children: filteredNav.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-PL5CUWNE.js.map
-//# sourceMappingURL=chunk-PL5CUWNE.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