@fayz-ai/ui 0.33.0 → 0.35.0

package/dist/{chunk-PL5CUWNE.js → chunk-63BB2CNP.js}

@@ -1,17 +1,120 @@
 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 { useTranslation, useNavReferrer, routeModule, navHistoryBack, recordNavigation } from '@fayz-ai/core';
+import * as React12 from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X, Loader2, ChevronLeft, ArrowLeft, 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { createPortal } from 'react-dom';
+import { useTranslation, useNavReferrer, routeModule, navHistoryBack, recordNavigation } from '@fayz-ai/core';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { create } from 'zustand';
 import * as Popover from '@radix-ui/react-popover';
 
+var SIZE_MAP = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+  "3xl": "sm:max-w-3xl",
+  // Duas colunas de trabalho lado a lado (ficha + linha do tempo) não cabem em
+  // 3xl: a coluna da direita fica com 20rem e o texto de cada anotação quebra
+  // a cada quatro palavras.
+  "4xl": "sm:max-w-4xl",
+  "5xl": "sm:max-w-5xl",
+  full: "sm:max-w-[calc(100vw-4rem)]"
+};
+var Modal = DialogPrimitive.Root;
+var ModalTrigger = DialogPrimitive.Trigger;
+var ModalClose = DialogPrimitive.Close;
+var ModalPortal = DialogPrimitive.Portal;
+var ModalHostContext = React12.createContext(null);
+function useModalHost() {
+  return React12.useContext(ModalHostContext);
+}
+var ModalOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fayz-modal-overlay saas-mdl-ov fixed inset-0 z-[100]",
+      "flex items-center justify-center p-0 sm:p-6",
+      className
+    ),
+    ...props
+  }
+));
+ModalOverlay.displayName = "ModalOverlay";
+var ModalContent = React12.forwardRef(({ className, children, size = "lg", hideClose, noPadding, onPointerDownOutside, onInteractOutside, onCloseAutoFocus, ...props }, ref) => {
+  const [host, setHost] = React12.useState(null);
+  const attach = React12.useCallback((node) => {
+    setHost(node);
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  return /* @__PURE__ */ jsx(ModalPortal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref: attach,
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+        onCloseAutoFocus?.(e);
+      },
+      onPointerDownOutside: (e) => {
+        const target = e.target;
+        if (target.closest("[data-modal-passthrough]") || target.closest("[data-radix-popper-content-wrapper]")) {
+          e.preventDefault();
+        }
+        onPointerDownOutside?.(e);
+      },
+      onInteractOutside: (e) => {
+        const target = e.target;
+        if (target.closest("[data-modal-passthrough]") || target.closest("[data-radix-popper-content-wrapper]")) {
+          e.preventDefault();
+        }
+        onInteractOutside?.(e);
+      },
+      className: cn(
+        // fz-container: a form inside a dialog measures the DIALOG. Without
+        // it a two-column field grid in an `sm` modal read the window's width
+        // and kept both columns in 380px.
+        "fayz-glass-surface fayz-modal-content saas-mdl-ct fz-container relative z-[100] flex flex-col w-full outline-none",
+        // Mobile fullscreen
+        "h-full rounded-none border-0",
+        // Desktop centered card
+        "sm:h-auto sm:max-h-[85vh] sm:rounded-2xl sm:border",
+        SIZE_MAP[size],
+        noPadding ? "" : "p-6 gap-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ModalHostContext.Provider, { value: host, children }),
+        !hideClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 z-10 flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  ) }) });
+});
+ModalContent.displayName = "ModalContent";
+function ModalHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left shrink-0", className), ...props });
+}
+function ModalBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-1 flex-col overflow-y-auto min-h-0", className), ...props });
+}
+function ModalFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col-reverse gap-2 pb-[env(safe-area-inset-bottom)] sm:mt-0 sm:flex-row sm:justify-end sm:gap-0 sm:space-x-2 sm:pb-0 shrink-0", className), ...props });
+}
+var ModalTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props }));
+ModalTitle.displayName = "ModalTitle";
+var ModalDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+ModalDescription.displayName = "ModalDescription";
 var HIDDEN = { visible: false, saving: false };
-var SaveBarApiContext = React11.createContext(null);
-var SaveBarStateContext = React11.createContext({ visible: false, saving: false });
+var SaveBarApiContext = React12.createContext(null);
+var SaveBarStateContext = React12.createContext({ visible: false, saving: false });
 var _saveBarVisible = false;
 var _saveBarSubs = /* @__PURE__ */ new Set();
 function setSaveBarVisibleSignal(v) {
@@ -20,7 +123,7 @@ function setSaveBarVisibleSignal(v) {
   _saveBarSubs.forEach((fn) => fn());
 }
 function useSaveBarVisible() {
-  return React11.useSyncExternalStore(
+  return React12.useSyncExternalStore(
     (cb) => {
       _saveBarSubs.add(cb);
       return () => {
@@ -32,10 +135,10 @@ function useSaveBarVisible() {
   );
 }
 function SaveBarProvider({ children }) {
-  const [state, setState] = React11.useState({ visible: false, saving: false });
-  const handlers = React11.useRef({});
-  const entries = React11.useRef([]);
-  const api = React11.useMemo(() => ({
+  const [state, setState] = React12.useState({ visible: false, saving: false });
+  const handlers = React12.useRef({});
+  const entries = React12.useRef([]);
+  const api = React12.useMemo(() => ({
     setState,
     handlers,
     entries,
@@ -45,12 +148,12 @@ function SaveBarProvider({ children }) {
       setState(top ? top.state : HIDDEN);
     }
   }), []);
-  const backStack = React11.useRef([]);
-  const backApi = React11.useMemo(() => ({ stack: backStack }), []);
-  React11.useEffect(() => {
+  const backStack = React12.useRef([]);
+  const backApi = React12.useMemo(() => ({ stack: backStack }), []);
+  React12.useEffect(() => {
     setSaveBarVisibleSignal(state.visible);
   }, [state.visible]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     function onKey(e) {
       if (state.visible && !state.saving) {
         if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
@@ -78,7 +181,7 @@ function SaveBarProvider({ children }) {
   }, [state.visible, state.saving]);
   return /* @__PURE__ */ jsx(SaveBarApiContext.Provider, { value: api, children: /* @__PURE__ */ jsx(BackNavApiContext.Provider, { value: backApi, children: /* @__PURE__ */ jsx(SaveBarStateContext.Provider, { value: state, children }) }) });
 }
-var BackNavApiContext = React11.createContext(null);
+var BackNavApiContext = React12.createContext(null);
 function isEditableTarget(target) {
   const el = target;
   if (!el || !el.tagName) return false;
@@ -86,12 +189,12 @@ function isEditableTarget(target) {
   return tag === "input" || tag === "textarea" || tag === "select" || el.isContentEditable;
 }
 function useBackHandler(onBack) {
-  const api = React11.useContext(BackNavApiContext);
-  const ref = React11.useRef(onBack);
-  React11.useEffect(() => {
+  const api = React12.useContext(BackNavApiContext);
+  const ref = React12.useRef(onBack);
+  React12.useEffect(() => {
     ref.current = onBack;
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!api) return;
     const stack = api.stack.current;
     stack.push(ref);
@@ -102,15 +205,16 @@ function useBackHandler(onBack) {
   }, [api]);
 }
 function useSaveBar({ dirty, alwaysVisible, saving = false, onSave, onDiscard, message, saveLabel, discardLabel }) {
-  const api = React11.useContext(SaveBarApiContext);
-  const entry = React11.useRef({ state: HIDDEN, handlers: {} });
-  React11.useEffect(() => {
+  const api = React12.useContext(SaveBarApiContext);
+  const host = useModalHost();
+  const entry = React12.useRef({ state: HIDDEN, handlers: {} });
+  React12.useEffect(() => {
     entry.current.handlers = { onSave, onDiscard };
     if (api && api.entries.current[api.entries.current.length - 1] === entry.current) {
       api.handlers.current = entry.current.handlers;
     }
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!api) return;
     const list = api.entries.current;
     list.push(entry.current);
@@ -121,19 +225,19 @@ function useSaveBar({ dirty, alwaysVisible, saving = false, onSave, onDiscard, m
       api.sync();
     };
   }, [api]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!api) return;
-    entry.current.state = { visible: dirty || !!alwaysVisible, dirty, saving, message, saveLabel, discardLabel };
+    entry.current.state = { visible: dirty || !!alwaysVisible, dirty, saving, message, saveLabel, discardLabel, host };
     if (api.entries.current[api.entries.current.length - 1] === entry.current) api.sync();
-  }, [api, dirty, alwaysVisible, saving, message, saveLabel, discardLabel]);
+  }, [api, dirty, alwaysVisible, saving, message, saveLabel, discardLabel, host]);
 }
 function SaveBar({ className }) {
-  const state = React11.useContext(SaveBarStateContext);
-  const api = React11.useContext(SaveBarApiContext);
+  const state = React12.useContext(SaveBarStateContext);
+  const api = React12.useContext(SaveBarApiContext);
   const t = useTranslation();
-  const [rendered, setRendered] = React11.useState(state.visible);
-  const [closing, setClosing] = React11.useState(false);
-  React11.useEffect(() => {
+  const [rendered, setRendered] = React12.useState(state.visible);
+  const [closing, setClosing] = React12.useState(false);
+  React12.useEffect(() => {
     if (state.visible) {
       setRendered(true);
       setClosing(false);
@@ -148,15 +252,12 @@ function SaveBar({ className }) {
     return () => clearTimeout(id);
   }, [state.visible, rendered]);
   if (!api || !rendered) return null;
-  const { saving, message, saveLabel, discardLabel } = state;
-  return /* @__PURE__ */ jsx(
+  const { saving, message, saveLabel, discardLabel, host } = state;
+  const island = /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        // Above the tab bar (z-50), below a full-screen sheet (z-60), and lifted
-        // clear of the bar's height so its actions are not sitting under it.
-        "pointer-events-none fixed inset-x-0 z-[55] flex justify-center px-4",
-        "bottom-[calc(var(--fz-bottom-bar,0px)+1.25rem)]",
+        host ? "pointer-events-none absolute inset-x-0 bottom-4 z-10 flex justify-center px-4" : "pointer-events-none fixed inset-x-0 z-[55] flex justify-center px-4 bottom-[calc(var(--fz-bottom-bar,0px)+1.25rem)]",
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: cn(
@@ -197,11 +298,12 @@ function SaveBar({ className }) {
       ] })
     }
   );
+  return host ? createPortal(island, host) : island;
 }
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React12.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -215,6 +317,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,
@@ -241,7 +345,7 @@ var usePageHeaderStore = create((set, get) => ({
 function useRegisterPageActions() {
   const add = usePageHeaderStore((s) => s.addActions);
   const remove = usePageHeaderStore((s) => s.removeActions);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     add();
     return remove;
   }, [add, remove]);
@@ -264,7 +368,7 @@ function usePageTitleSlotHost() {
 function usePageHeaderHost() {
   const addHost = usePageHeaderStore((s) => s.addHost);
   const removeHost = usePageHeaderStore((s) => s.removeHost);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     addHost();
     return removeHost;
   }, [addHost, removeHost]);
@@ -282,30 +386,30 @@ function PageHeaderOutlet({ className, active = true }) {
   const hasActions = usePageHeaderStore((s) => s.actions > 0);
   const addOutlet = usePageHeaderStore((s) => s.addOutlet);
   const removeOutlet = usePageHeaderStore((s) => s.removeOutlet);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!active) return;
     addOutlet();
     return removeOutlet;
   }, [active, addOutlet, removeOutlet]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (active) return;
     setOutletSlot(null);
     setOutletActionsSlot(null);
   }, [active, setOutletSlot, setOutletActionsSlot]);
   if (!active) return null;
-  return React11.createElement(
+  return React12.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" })
+    React12.createElement("div", { ref: setOutletSlot, className: "flex min-w-0 flex-1 items-center" }),
+    React12.createElement("div", { ref: setOutletActionsSlot, className: "flex shrink-0 items-center gap-2" })
   );
 }
 function usePageHeader(active, options) {
-  const id = React11.useId();
+  const id = React12.useId();
   const claim = usePageHeaderStore((s) => s.claim);
   const release = usePageHeaderStore((s) => s.release);
   const back = options?.back ?? false;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!active) {
       release(id);
       return;
@@ -317,13 +421,23 @@ 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);
+  React12.useEffect(() => {
+    setLabel(label ?? null);
+    return () => setLabel(null);
+  }, [label, setLabel]);
+}
 function PageTitlePortal({ children }) {
   const slot = usePageTitleSlot();
-  if (!slot) return React11.createElement(React11.Fragment, null, children);
+  if (!slot) return React12.createElement(React12.Fragment, null, children);
   return createPortal(children, slot);
 }
-var Hint = React11.forwardRef(function Hint2({ label, children, side = "top", delayDuration = 0, ...rest }, ref) {
-  if (!label) return React11.cloneElement(children, { ...rest, ref });
+var Hint = React12.forwardRef(function Hint2({ label, children, side = "top", delayDuration = 0, ...rest }, ref) {
+  if (!label) return React12.cloneElement(children, { ...rest, ref });
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, ...rest, ref, children }),
     /* @__PURE__ */ jsx(TooltipContent, { side, className: "px-2 py-1 text-xs font-medium", children: label })
@@ -412,7 +526,7 @@ function PageHeader({ title, onBack, parentLabel, backLabel }) {
   const hasHost = useHasPageHeaderHost();
   const { onBack: effectiveOnBack, parentLabel: effectiveParent } = useCrossModuleBack(onBack, parentLabel);
   useBackHandler(effectiveOnBack);
-  const node = React11.useMemo(() => /* @__PURE__ */ jsx(
+  const node = React12.useMemo(() => /* @__PURE__ */ jsx(
     PageHeaderCrumb,
     {
       title,
@@ -426,15 +540,15 @@ function PageHeader({ title, onBack, parentLabel, backLabel }) {
 }
 var GUTTER_PX = 8;
 var CLOSE_DELAY_MS = 140;
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React11.useLayoutEffect : React11.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React12.useLayoutEffect : React12.useEffect;
 function iconOf(name) {
   if (!name) return null;
   return ICON_MAP[name] ?? null;
 }
-var RailFlyoutContext = React11.createContext(null);
+var RailFlyoutContext = React12.createContext(null);
 var RailFlyoutProvider = RailFlyoutContext.Provider;
 function useRailRow(content) {
-  const flyout = React11.useContext(RailFlyoutContext);
+  const flyout = React12.useContext(RailFlyoutContext);
   if (!flyout || !content) return {};
   return flyout.rowProps(content);
 }
@@ -444,19 +558,19 @@ function useRailFlyout({
   activeRoute,
   onNavigate
 }) {
-  const [state, setState] = React11.useState(null);
-  const [pos, setPos] = React11.useState({ top: 0, arrow: 20 });
-  const [animate, setAnimate] = React11.useState(false);
-  const panelRef = React11.useRef(null);
-  const closeTimer = React11.useRef(null);
-  const lastContent = React11.useRef(null);
-  const cancelClose = React11.useCallback(() => {
+  const [state, setState] = React12.useState(null);
+  const [pos, setPos] = React12.useState({ top: 0, arrow: 20 });
+  const [animate, setAnimate] = React12.useState(false);
+  const panelRef = React12.useRef(null);
+  const closeTimer = React12.useRef(null);
+  const lastContent = React12.useRef(null);
+  const cancelClose = React12.useCallback(() => {
     if (closeTimer.current) {
       clearTimeout(closeTimer.current);
       closeTimer.current = null;
     }
   }, []);
-  const show = React11.useCallback(
+  const show = React12.useCallback(
     (anchor, content2) => {
       if (!enabled) return;
       cancelClose();
@@ -464,19 +578,19 @@ function useRailFlyout({
     },
     [enabled, cancelClose]
   );
-  const hide = React11.useCallback(() => {
+  const hide = React12.useCallback(() => {
     cancelClose();
     closeTimer.current = setTimeout(() => setState(null), CLOSE_DELAY_MS);
   }, [cancelClose]);
-  const dismiss = React11.useCallback(() => {
+  const dismiss = React12.useCallback(() => {
     cancelClose();
     setState(null);
   }, [cancelClose]);
-  React11.useEffect(() => () => cancelClose(), [cancelClose]);
-  React11.useEffect(() => {
+  React12.useEffect(() => () => cancelClose(), [cancelClose]);
+  React12.useEffect(() => {
     if (!enabled) dismiss();
   }, [enabled, dismiss]);
-  const reposition = React11.useCallback(() => {
+  const reposition = React12.useCallback(() => {
     const rail = railRef.current;
     const anchor = state?.anchor;
     if (!rail || !anchor) return;
@@ -491,7 +605,7 @@ function useRailFlyout({
     setPos({ top, arrow });
   }, [railRef, state]);
   useIsomorphicLayoutEffect(reposition, [reposition, state?.content.key]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!state) return;
     const rail = railRef.current;
     const onScroll = () => reposition();
@@ -503,7 +617,7 @@ function useRailFlyout({
     };
   }, [state, railRef, reposition]);
   const visible = !!state;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!visible) {
       setAnimate(false);
       return;
@@ -511,7 +625,7 @@ function useRailFlyout({
     const id = requestAnimationFrame(() => setAnimate(true));
     return () => cancelAnimationFrame(id);
   }, [visible]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!visible) return;
     const onKey = (event) => {
       if (event.key === "Escape") dismiss();
@@ -519,7 +633,7 @@ function useRailFlyout({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [visible, dismiss]);
-  const rowProps = React11.useCallback(
+  const rowProps = React12.useCallback(
     (content2) => ({
       onMouseEnter: (event) => show(event.currentTarget, content2),
       onFocus: (event) => show(event.currentTarget, content2),
@@ -555,6 +669,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,8 +750,53 @@ 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;
+var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React12.useLayoutEffect : React12.useEffect;
 function getIcon(name) {
   return ICON_MAP[name] ?? Home;
 }
@@ -847,7 +1007,7 @@ function NavGroup({
         // case in an app that groups its rail).
         /* @__PURE__ */ jsx("button", { "data-tour": `nav.${child.route}`, onClick: () => onNavigate(child.route), className: childClass, children: childInner })
       );
-      if (!childConnector) return /* @__PURE__ */ jsx(React11.Fragment, { children: row }, child.id);
+      if (!childConnector) return /* @__PURE__ */ jsx(React12.Fragment, { children: row }, child.id);
       const activeIndex = item.children.findIndex((c) => c.route === activeRoute);
       const onPath = activeIndex >= 0 && childIndex < activeIndex;
       return (
@@ -861,47 +1021,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)
       );
@@ -909,9 +1029,9 @@ function NavGroup({
   ] });
 }
 function withCollapsed(slot, collapsed) {
-  if (!React11.isValidElement(slot)) return slot;
+  if (!React12.isValidElement(slot)) return slot;
   if (typeof slot.type === "string") return slot;
-  return React11.cloneElement(slot, { collapsed });
+  return React12.cloneElement(slot, { collapsed });
 }
 var SKELETON_ROWS = [
   { width: 56, group: false },
@@ -953,7 +1073,7 @@ function Sidebar({
 }) {
   const currentPath = currentPathProp;
   const activeRoute = resolveActiveRoute(navigation, currentPath);
-  const railRef = React11.useRef(null);
+  const railRef = React12.useRef(null);
   const flyout = useRailFlyout({
     enabled: collapsed,
     railRef,
@@ -966,14 +1086,14 @@ function Sidebar({
   const handleNavigate = (route) => {
     onNavigate?.(route);
   };
-  const groupWithActiveRoute = React11.useMemo(() => {
+  const groupWithActiveRoute = React12.useMemo(() => {
     const groups = navigation.filter((item) => item.children && item.children.length > 0);
     return groups.find(
       (item) => item.route === activeRoute || item.children.some((child) => child.route === activeRoute)
     )?.id ?? null;
   }, [navigation, activeRoute]);
-  const [openGroup, setOpenGroup] = React11.useState(groupWithActiveRoute);
-  React11.useEffect(() => {
+  const [openGroup, setOpenGroup] = React12.useState(groupWithActiveRoute);
+  React12.useEffect(() => {
     if (groupWithActiveRoute) setOpenGroup(groupWithActiveRoute);
   }, [groupWithActiveRoute]);
   const sectionHeading = (label) => label && !collapsed ? /* @__PURE__ */ jsx("p", { className: "px-2.5 pb-0.5 pt-1 text-[10px] font-semibold uppercase tracking-wider text-sidebar-muted", children: label }) : null;
@@ -1025,10 +1145,10 @@ function Sidebar({
     mainItems.length > 0 && renderSection(mainItems, sectionLabels?.main),
     secondaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: renderSection(secondaryItems, sectionLabels?.secondary) })
   ] });
-  const [outgoing, setOutgoing] = React11.useState(null);
-  const lastBodyRef = React11.useRef(null);
-  const lastKeyRef = React11.useRef(navKey);
-  const timerRef = React11.useRef(null);
+  const [outgoing, setOutgoing] = React12.useState(null);
+  const lastBodyRef = React12.useRef(null);
+  const lastKeyRef = React12.useRef(navKey);
+  const timerRef = React12.useRef(null);
   useIsomorphicLayoutEffect2(() => {
     if (lastKeyRef.current !== navKey) {
       const previousBody = lastBodyRef.current;
@@ -1041,7 +1161,7 @@ function Sidebar({
     }
     lastBodyRef.current = navBody;
   });
-  React11.useEffect(() => () => {
+  React12.useEffect(() => () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
   return (
@@ -1285,7 +1405,7 @@ function ShellSearch({
   const rail = tone === "rail";
   const contextual = !!onValueChange && !collapsed;
   const query = value ?? "";
-  const inputRef = React11.useRef(null);
+  const inputRef = React12.useRef(null);
   const escalate = () => setCommandPaletteOpen(true, query);
   const surface = rail ? "bg-sidebar-accent/40 text-sidebar-muted hover:bg-sidebar-accent/70 hover:text-sidebar-foreground" : "bg-accent/40 text-muted-foreground hover:bg-accent/70 hover:text-foreground";
   const ring = rail ? "focus-within:bg-sidebar-accent/70 focus-within:ring-1 focus-within:ring-sidebar-accent-foreground/25" : "focus-within:bg-accent/70 focus-within:ring-1 focus-within:ring-ring/40";
@@ -1396,7 +1516,7 @@ function TopbarUserMenu({
   onBilling,
   userMenuExtras
 }) {
-  const [open, setOpen] = React11.useState(false);
+  const [open, setOpen] = React12.useState(false);
   if (!user) return null;
   const initial = (user.fullName?.trim()?.[0] ?? user.email?.[0] ?? "?").toUpperCase();
   const item = (label, onClick, Icon) => onClick ? /* @__PURE__ */ jsxs(
@@ -1480,7 +1600,7 @@ function getIcon2(name) {
   return ICON_MAP[name] ?? Home;
 }
 function NavDropdown({ item, currentPath, onNavigate }) {
-  const [open, setOpen] = React11.useState(false);
+  const [open, setOpen] = React12.useState(false);
   const Icon = getIcon2(item.icon);
   const isChildActive = item.children?.some(
     (child) => currentPath === child.route || currentPath.startsWith(child.route + "/")
@@ -1648,9 +1768,9 @@ function Topbar({
   ] });
 }
 function useSheetDrag({ onDismiss, canDrag }) {
-  const [offset, setOffset] = React11.useState(0);
-  const [dragging, setDragging] = React11.useState(false);
-  const start = React11.useRef(null);
+  const [offset, setOffset] = React12.useState(0);
+  const [dragging, setDragging] = React12.useState(false);
+  const start = React12.useRef(null);
   const onPointerDown = (e) => {
     if (e.pointerType === "mouse") return;
     if (canDrag && !canDrag()) return;
@@ -1684,9 +1804,9 @@ function useSheetDrag({ onDismiss, canDrag }) {
     handlers: { onPointerDown, onPointerMove, onPointerUp: end, onPointerCancel: end }
   };
 }
-var SheetCloseContext = React11.createContext(null);
+var SheetCloseContext = React12.createContext(null);
 function useSheetClose() {
-  const close = React11.useContext(SheetCloseContext);
+  const close = React12.useContext(SheetCloseContext);
   return close ?? (() => {
   });
 }
@@ -1700,9 +1820,9 @@ function BottomSheet({
   className,
   label
 }) {
-  const [leaving, setLeaving] = React11.useState(false);
-  const scroller = React11.useRef(null);
-  const close = React11.useCallback(() => {
+  const [leaving, setLeaving] = React12.useState(false);
+  const scroller = React12.useRef(null);
+  const close = React12.useCallback(() => {
     setLeaving(true);
     window.setTimeout(onClose, 200);
   }, [onClose]);
@@ -1710,7 +1830,7 @@ function BottomSheet({
     onDismiss: close,
     canDrag: () => (scroller.current?.scrollTop ?? 0) <= 0
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const onKey = (e) => {
       if (e.key !== "Escape") return;
       if (onBack) onBack();
@@ -1719,15 +1839,15 @@ function BottomSheet({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close, onBack]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const previous = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = previous;
     };
   }, []);
-  const [host, setHost] = React11.useState(null);
-  React11.useEffect(() => {
+  const [host, setHost] = React12.useState(null);
+  React12.useEffect(() => {
     setHost(document.body);
   }, []);
   if (!host) return null;
@@ -1842,17 +1962,17 @@ function SheetRow({
     }
   );
 }
-var ModuleHeaderSlotContext = React11.createContext(null);
+var ModuleHeaderSlotContext = React12.createContext(null);
 function useModuleHeaderSlot() {
-  return React11.useContext(ModuleHeaderSlotContext);
+  return React12.useContext(ModuleHeaderSlotContext);
 }
-var ModuleHeaderActionsSlotContext = React11.createContext(null);
+var ModuleHeaderActionsSlotContext = React12.createContext(null);
 function useModuleHeaderActionsSlot() {
-  return React11.useContext(ModuleHeaderActionsSlotContext);
+  return React12.useContext(ModuleHeaderActionsSlotContext);
 }
-var PageRailSlotContext = React11.createContext(null);
+var PageRailSlotContext = React12.createContext(null);
 function usePageRailSlot() {
-  return React11.useContext(PageRailSlotContext);
+  return React12.useContext(PageRailSlotContext);
 }
 function isCreateRoute(route) {
   return !!route && /\/(new|create)$/.test(route);
@@ -1939,9 +2059,9 @@ function SidebarLayout({
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
   const mobileMenuOpen = useLayoutStore((st) => st.mobileDrawerOpen);
   const setMobileMenuOpen = useLayoutStore((st) => st.setMobileDrawerOpen);
-  const [headerSlot, setHeaderSlot] = React11.useState(null);
-  const [actionsSlot, setActionsSlot] = React11.useState(null);
-  const [pageRailSlot, setPageRailSlot] = React11.useState(null);
+  const [headerSlot, setHeaderSlot] = React12.useState(null);
+  const [actionsSlot, setActionsSlot] = React12.useState(null);
+  const [pageRailSlot, setPageRailSlot] = React12.useState(null);
   const hasPageActions = useHasPageActions();
   return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsx(ModuleHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(ModuleHeaderActionsSlotContext.Provider, { value: actionsSlot, children: /* @__PURE__ */ jsx(PageRailSlotContext.Provider, { value: pageRailSlot, children: /* @__PURE__ */ jsxs("div", { className: cn(
     "shell-enter fz-viewport-h flex overflow-hidden bg-background",
@@ -2014,6 +2134,10 @@ function SidebarLayout({
         // Com `min-h` bastava um controle mais alto de um lado para o cartão
         // daquele lado descer sozinho.
         frame && "fz-on-band md:h-14 md:border-b-0 md:text-sidebar-foreground md:[--accent-foreground:var(--sidebar-accent-foreground)] md:[--accent:var(--sidebar-accent)] md:[--background:var(--sidebar)] md:[--border:var(--sidebar-border)] md:[--card:var(--sidebar)] md:[--foreground:var(--sidebar-foreground)] md:[--muted-foreground:var(--sidebar-muted)] md:[--muted:var(--sidebar-accent)]",
+        // A destination keeps the app controls; a deeper screen keeps its
+        // own title/back row. On phones with complete bottom navigation,
+        // showing both was a two-storey header with no extra way out.
+        barOwnsNav && !pagePrimary && "hidden md:flex",
         // …unless the page put its actions in it. Hiding the bar on mobile
         // used to hide the only "Novo" the screen had.
         mobileHeader !== "minimal" && !hasPageActions && "hidden md:flex",
@@ -2076,16 +2200,52 @@ 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",
+              // On a primary phone destination the selected bottom-nav item
+              // already names the page. Declared actions render as a body-level
+              // FAB, so this entire duplicate band can disappear.
+              barOwnsNav && pagePrimary && "hidden md:flex"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn(
+                "flex min-w-0 flex-1 items-center gap-3",
+                // Primary destinations are already named by the selected mobile
+                // navigation item. Keep this side only for deeper breadcrumbs.
+                pagePrimary && "hidden md:flex"
+              ), 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: [
@@ -2182,9 +2342,9 @@ function TopbarLayout({
 }) {
   const mobileMenuOpen = useLayoutStore((st) => st.mobileDrawerOpen);
   const setMobileMenuOpen = useLayoutStore((st) => st.setMobileDrawerOpen);
-  const [headerSlot, setHeaderSlot] = React11.useState(null);
-  const [actionsSlot, setActionsSlot] = React11.useState(null);
-  const [pageRailSlot, setPageRailSlot] = React11.useState(null);
+  const [headerSlot, setHeaderSlot] = React12.useState(null);
+  const [actionsSlot, setActionsSlot] = React12.useState(null);
+  const [pageRailSlot, setPageRailSlot] = React12.useState(null);
   const rawClaimed = usePageHeaderClaimed();
   const setTitleSlot = usePageTitleSlotHost();
   const hasOutlet = useHasPageHeaderOutlet();
@@ -2223,10 +2383,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"
@@ -2311,17 +2477,16 @@ function MobileMoreScreen({
   orgSwitcher,
   mobileIdentity,
   identity,
-  notificationSlot,
   searchLabel,
   sectionLabels,
   leaving = false,
   onDismiss,
   onClose
 }) {
-  const [pushed, setPushed] = React11.useState(null);
-  const [query, setQuery] = React11.useState("");
-  const scroller = React11.useRef(null);
-  const close = React11.useCallback(() => {
+  const [pushed, setPushed] = React12.useState(null);
+  const [query, setQuery] = React12.useState("");
+  const scroller = React12.useRef(null);
+  const close = React12.useCallback(() => {
     onClose();
   }, [onClose]);
   const drag = useSheetDrag({
@@ -2330,7 +2495,7 @@ function MobileMoreScreen({
     // a pushed section would dismiss the screen the back button is for.
     canDrag: () => !pushed && (scroller.current?.scrollTop ?? 0) <= 0
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const onKey = (e) => {
       if (e.key !== "Escape") return;
       if (pushed) setPushed(null);
@@ -2339,7 +2504,7 @@ function MobileMoreScreen({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close, pushed]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const previous = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
@@ -2359,13 +2524,13 @@ function MobileMoreScreen({
     else onNavigate?.(route);
   };
   const q = query.trim().toLowerCase();
-  const flat = React11.useMemo(
+  const flat = React12.useMemo(
     () => navigation.flatMap((n) => n.children?.length ? n.children : [n]),
     [navigation]
   );
   const searching = q.length > 0;
   const hits = searching ? flat.filter((n) => n.label.toLowerCase().includes(q)) : [];
-  const sections = React11.useMemo(() => {
+  const sections = React12.useMemo(() => {
     const out = [];
     for (const key of ["main", "secondary", "settings"]) {
       const items = navigation.filter((n) => n.section === key);
@@ -2386,7 +2551,10 @@ function MobileMoreScreen({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[65] flex flex-col bg-background text-foreground will-change-transform md:hidden",
+        // Isolate the full-screen menu into its own backdrop root. Without it,
+        // the glass header samples the app header underneath and both sets of
+        // controls become visible in the same 44px strip.
+        "fixed inset-0 z-[65] isolate flex flex-col bg-background text-foreground will-change-transform md:hidden",
         leaving ? "fz-sheet-out" : "fz-sheet-in",
         drag.dragging && "transition-none",
         !drag.dragging && !leaving && "transition-transform duration-200 ease-out"
@@ -2410,18 +2578,15 @@ function MobileMoreScreen({
             }
           ) }),
           /* @__PURE__ */ jsx("h1", { className: "truncate px-1 text-[15px] font-semibold", children: pushed?.label ?? "Mais" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-end gap-1", children: [
-            !pushed && notificationSlot,
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: close,
-                className: "fz-ios-tint fz-tap rounded-button px-2 py-1 text-[15px] font-semibold",
-                children: "Conclu\xEDdo"
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center justify-end gap-1", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              className: "fz-ios-tint fz-tap rounded-button px-2 py-1 text-[15px] font-semibold",
+              children: "Conclu\xEDdo"
+            }
+          ) })
         ] }) }),
         /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs(
           "div",
@@ -2634,23 +2799,23 @@ function MinimalLayout({
   ] });
 }
 function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
-  const [visible, setVisible] = React11.useState(false);
-  React11.useEffect(() => {
+  const [visible, setVisible] = React12.useState(false);
+  React12.useEffect(() => {
     const id = requestAnimationFrame(() => setVisible(true));
     return () => cancelAnimationFrame(id);
   }, []);
-  const close = React11.useCallback(() => {
+  const close = React12.useCallback(() => {
     setVisible(false);
     window.setTimeout(onClose, 250);
   }, [onClose]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const previous = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = previous;
     };
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -2753,11 +2918,11 @@ function MobileBottomNav({
   retracted
 }) {
   const path = currentPath ?? "";
-  const [openSheet, setOpenSheet] = React11.useState(null);
-  React11.useEffect(() => {
+  const [openSheet, setOpenSheet] = React12.useState(null);
+  React12.useEffect(() => {
     setOpenSheet(null);
   }, [currentPath]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (retracted) setOpenSheet(null);
   }, [retracted]);
   const sheetItem = openSheet != null ? items[openSheet] : void 0;
@@ -2768,12 +2933,8 @@ function MobileBottomNav({
         "aria-label": "Navega\xE7\xE3o principal",
         "aria-hidden": retracted || void 0,
         className: cn(
-          // Liquid glass, not a painted strip: the bar sits ON the content, so
-          // the content keeps showing through it as a wash. An opaque bar in the
-          // page's own colour just cut the screen short; an opaque bar in the
-          // RAIL's dark colour made a phone look like it had a second theme.
           "fz-safe-b fixed inset-x-0 bottom-0 z-50 flex min-h-16 items-stretch justify-around md:hidden",
-          "fayz-glass-bar text-foreground",
+          "border-t border-sidebar-border bg-sidebar text-sidebar-foreground shadow-[0_-8px_24px_hsl(var(--sidebar)/0.18)]",
           "motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-out",
           retracted && "pointer-events-none translate-y-full"
         ),
@@ -2826,7 +2987,7 @@ function MobileBottomNav({
                 // min-h-[44px] is the floor a finger needs; the bar was letting
                 // content decide and landing around 40.
                 "relative flex min-h-[44px] flex-1 flex-col items-center justify-center gap-0.5 px-1 py-2 transition-colors",
-                isActive ? "text-primary" : "text-muted-foreground"
+                isActive ? "text-sidebar-accent-foreground" : "text-sidebar-muted"
               ),
               children: [
                 /* @__PURE__ */ jsx(
@@ -2835,7 +2996,7 @@ function MobileBottomNav({
                     "aria-hidden": true,
                     className: cn(
                       "absolute inset-x-3 top-0 h-0.5 rounded-full transition-opacity",
-                      isActive ? "bg-primary opacity-100" : "opacity-0"
+                      isActive ? "bg-sidebar-accent-foreground opacity-100" : "opacity-0"
                     )
                   }
                 ),
@@ -2933,7 +3094,7 @@ function AppShell({
   const hasBottomNav = !!bottomNav?.length;
   const barOwnsNav = bottomNavReachesAll(bottomNav);
   const menuNavigation = appNavigation ?? navigation;
-  const routeLabel = React11.useCallback((path) => {
+  const routeLabel = React12.useCallback((path) => {
     let best;
     const consider = (route, label) => {
       if (!route || !label) return;
@@ -2948,14 +3109,14 @@ function AppShell({
     }
     return best?.label ?? pageTitle ?? "";
   }, [menuNavigation, pageTitle]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!currentPath) return;
     if (currentPath === MENU_ROUTE) return;
     const label = routeLabel(currentPath);
     if (!label) return;
     recordNavigation(currentPath, label);
   }, [currentPath, routeLabel]);
-  const destinationRoutes = React11.useMemo(() => {
+  const destinationRoutes = React12.useMemo(() => {
     const routes = [];
     for (const item of menuNavigation) {
       if (item.route) routes.push(item.route);
@@ -2964,7 +3125,7 @@ function AppShell({
     return routes;
   }, [menuNavigation]);
   const isDestination = !!currentPath && destinationRoutes.includes(currentPath);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setDestinationRoutes(destinationRoutes);
   }, [destinationRoutes]);
   const pageClaimedBack = useHasPageHeaderBack();
@@ -2972,7 +3133,7 @@ function AppShell({
   const barRetracted = !!pageBack || pageClaimedBack || inSettings;
   const mobileDrawerOpen = useLayoutStore((st) => st.mobileDrawerOpen);
   const setMobileDrawerOpen = useLayoutStore((st) => st.setMobileDrawerOpen);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (useLayoutStore.getState().drawerKeepOpenOnce) {
       useLayoutStore.setState({ drawerKeepOpenOnce: false });
       return;
@@ -2980,12 +3141,12 @@ function AppShell({
     setMobileDrawerOpen(false);
   }, [currentPath]);
   const menuRouteOpen = barOwnsNav && currentPath === MENU_ROUTE;
-  const firstDestination = React11.useMemo(() => {
+  const firstDestination = React12.useMemo(() => {
     const first = bottomNav?.find((i) => !("kind" in i) || i.kind === "route");
     return first?.route ?? "/";
   }, [bottomNav]);
-  const menuOrigin = React11.useRef(void 0);
-  const openMenu = React11.useCallback(() => {
+  const menuOrigin = React12.useRef(void 0);
+  const openMenu = React12.useCallback(() => {
     if (!barOwnsNav) {
       setMobileDrawerOpen(true);
       return;
@@ -2996,10 +3157,10 @@ function AppShell({
     menuOrigin.current = currentPath;
     onNavigate?.(MENU_ROUTE);
   }, [barOwnsNav, currentPath, onNavigate, setMobileDrawerOpen]);
-  const [menuLeaving, setMenuLeaving] = React11.useState(false);
-  const [menuLingering, setMenuLingering] = React11.useState(false);
-  const menuTimer = React11.useRef(void 0);
-  const dismissMenu = React11.useCallback((navigate) => {
+  const [menuLeaving, setMenuLeaving] = React12.useState(false);
+  const [menuLingering, setMenuLingering] = React12.useState(false);
+  const menuTimer = React12.useRef(void 0);
+  const dismissMenu = React12.useCallback((navigate) => {
     window.clearTimeout(menuTimer.current);
     setMenuLingering(true);
     setMenuLeaving(true);
@@ -3009,8 +3170,8 @@ function AppShell({
       setMenuLingering(false);
     }, 240);
   }, []);
-  React11.useEffect(() => () => window.clearTimeout(menuTimer.current), []);
-  const closeMenu = React11.useCallback(() => {
+  React12.useEffect(() => () => window.clearTimeout(menuTimer.current), []);
+  const closeMenu = React12.useCallback(() => {
     if (!barOwnsNav) {
       setMobileDrawerOpen(false);
       return;
@@ -3023,7 +3184,7 @@ function AppShell({
       onNavigate?.(back);
     });
   }, [barOwnsNav, setMobileDrawerOpen, onNavigate, firstDestination, dismissMenu]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!menuRouteOpen || typeof window === "undefined") return;
     const wide = window.matchMedia("(min-width: 768px)");
     const settle = () => {
@@ -3184,13 +3345,13 @@ function SplitWithRightRail({
   maxWidth = 720,
   resizeLabel = "Resize panel"
 }) {
-  const [width, setWidth] = React11.useState(defaultWidth);
-  const [dragging, setDragging] = React11.useState(false);
-  const clamp = React11.useCallback(
+  const [width, setWidth] = React12.useState(defaultWidth);
+  const [dragging, setDragging] = React12.useState(false);
+  const clamp = React12.useCallback(
     (value) => Math.min(maxWidth, Math.max(minWidth, value)),
     [minWidth, maxWidth]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!dragging) return;
     const onMove = (event) => {
       event.preventDefault();
@@ -3212,7 +3373,7 @@ function SplitWithRightRail({
       document.body.style.cursor = previousCursor;
     };
   }, [dragging, clamp]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (dragging) return;
     onWidthChange?.(width);
   }, [dragging]);
@@ -3371,6 +3532,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",
@@ -3419,12 +3588,12 @@ function ViewTabs({ value, onChange, options, "aria-label": ariaLabel, className
     );
   }) });
 }
-var NavTransitionContext = React11.createContext("slide");
+var NavTransitionContext = React12.createContext("slide");
 function NavTransitionProvider({ value, children }) {
   return /* @__PURE__ */ jsx(NavTransitionContext.Provider, { value, children });
 }
 function useNavTransition() {
-  return React11.useContext(NavTransitionContext);
+  return React12.useContext(NavTransitionContext);
 }
 function resolveTransitionClass(transition, direction) {
   if (transition === "none") return "";
@@ -3444,26 +3613,26 @@ function PageTransition({
   return /* @__PURE__ */ jsx("div", { className: cn(animClass, className), children }, transitionKey);
 }
 var EMPTY = [];
-var PageTrailContext = React11.createContext(EMPTY);
+var PageTrailContext = React12.createContext(EMPTY);
 function PageTrail({
   label,
   href,
   onNavigate,
   children
 }) {
-  const parent = React11.useContext(PageTrailContext);
-  const trail = React11.useMemo(
+  const parent = React12.useContext(PageTrailContext);
+  const trail = React12.useMemo(
     () => [...parent, { label, href, onNavigate }],
     [parent, label, href, onNavigate]
   );
   return /* @__PURE__ */ jsx(PageTrailContext.Provider, { value: trail, children });
 }
 function usePageTrail() {
-  return React11.useContext(PageTrailContext);
+  return React12.useContext(PageTrailContext);
 }
 function usePageTrailParent(href) {
-  const trail = React11.useContext(PageTrailContext);
-  return React11.useMemo(() => {
+  const trail = React12.useContext(PageTrailContext);
+  return React12.useMemo(() => {
     const above = href ? trail.filter((c) => c.href !== href) : trail;
     return above[above.length - 1];
   }, [trail, href]);
@@ -3473,15 +3642,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);
-  React11.useEffect(() => {
-    const handler = () => setHref(read());
+  const [href, setHref] = React12.useState(read2);
+  React12.useEffect(() => {
+    const handler = () => setHref(read2());
     window.addEventListener("hashchange", handler);
     handler();
     return () => window.removeEventListener("hashchange", handler);
@@ -3491,11 +3660,246 @@ function useCurrentRouteHref() {
 function useTrailBack(href) {
   const current = useCurrentRouteHref();
   const parent = usePageTrailParent(href ?? current);
-  return React11.useMemo(
+  return React12.useMemo(
     () => parent ? { onBack: () => navigateToCrumb(parent), parentLabel: parent.label } : {},
     [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] = React12.useState(() => read(storageKey));
+  const [pinned, setPinned] = React12.useState(() => read(pinnedKey));
+  const [hovering, setHovering] = React12.useState(false);
+  const hoveringRef = React12.useRef(false);
+  const collapsedRef = React12.useRef(collapsed);
+  collapsedRef.current = collapsed;
+  const autoRef = React12.useRef(false);
+  const open = !collapsed || hovering;
+  const width = open ? COLUMN_WIDTH : COLUMN_COLLAPSED_WIDTH;
+  const setHover = (on) => {
+    hoveringRef.current = on;
+    setHovering(on);
+  };
+  React12.useEffect(() => {
+    onWidth?.(width);
+  }, [width, onWidth]);
+  const setOpenState = React12.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]);
+  React12.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 = React12.useRef(null);
+  React12.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 = React12.useRef(null);
+  const [hasMore, setHasMore] = React12.useState(false);
+  const onScroll = React12.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setHasMore(el.scrollHeight - el.scrollTop - el.clientHeight > 4);
+  }, []);
+  React12.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 = React12.useRef(null);
+  const panelRef = React12.useRef(null);
+  const [seamed, setSeamed] = React12.useState(false);
+  const armedRef = React12.useRef(false);
+  const publish = React12.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]);
+  React12.useEffect(() => {
+    publish();
+  }, [publish, width]);
+  React12.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);
@@ -3514,7 +3918,7 @@ function viewBarSubscribe(l) {
   };
 }
 function ViewBarHost() {
-  const active = React11.useSyncExternalStore(viewBarSubscribe, () => viewBarCount > 0);
+  const active = React12.useSyncExternalStore(viewBarSubscribe, () => viewBarCount > 0);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3527,8 +3931,8 @@ function ViewBarHost() {
   );
 }
 function PageViewBar({ children }) {
-  const slot = React11.useSyncExternalStore(viewBarSubscribe, () => viewBarSlot);
-  React11.useEffect(() => {
+  const slot = React12.useSyncExternalStore(viewBarSubscribe, () => viewBarSlot);
+  React12.useEffect(() => {
     viewBarCount++;
     viewBarNotify();
     return () => {
@@ -3539,6 +3943,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 = React12.useRef(null);
+  const [squeezed, setSqueezed] = React12.useState(void 0);
+  React12.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 React12.useSyncExternalStore(subNavSubscribe, () => published, () => published);
+}
+function useSubNavHost() {
+  React12.useEffect(() => {
+    subNavHosts++;
+    subNavNotify();
+    return () => {
+      subNavHosts--;
+      subNavNotify();
+    };
+  }, []);
+}
+function useHasSubNavHost() {
+  return React12.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 = React12.useId();
+  const hasHost = useHasSubNavHost();
+  const resolved = sections ?? (items ? [{ items }] : []);
+  const ref = React12.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])]));
+  React12.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();
@@ -3552,15 +4109,18 @@ function PremiumBadge({ className }) {
   const tip = t("upgrade.badgeTooltip");
   return /* @__PURE__ */ jsx("span", { title: tip, "aria-label": tip, className: cn("inline-flex shrink-0", className), children: /* @__PURE__ */ jsx(Crown, { className: "h-3.5 w-3.5 text-amber-500", "aria-hidden": true }) });
 }
-var ModuleLayoutContext = React11.createContext("rail");
+var ModuleLayoutContext = React12.createContext("rail");
 function ModuleLayoutProvider({ variant, children }) {
   return /* @__PURE__ */ jsx(ModuleLayoutContext.Provider, { value: variant, children });
 }
 function useModuleLayout() {
-  return React11.useContext(ModuleLayoutContext);
+  return React12.useContext(ModuleLayoutContext);
 }
-function RailNavItem({ item }) {
-  const [expanded, setExpanded] = React11.useState(true);
+function RailNavItem({ item, collapsed }) {
+  const [expanded, setExpanded] = React12.useState(false);
+  React12.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 +4131,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) {
@@ -3608,9 +4185,9 @@ function defaultChildOf(item) {
   return kids.find((c) => c.defaultChild) ?? kids.find((c) => /(^|-)list$/i.test(c.id)) ?? kids.find((c) => !/(^|-)(new|novo|nova|create)$/i.test(c.id)) ?? kids[0];
 }
 function MobileTabs({ nav }) {
-  const scrollRef = React11.useRef(null);
-  const [expandedId, setExpandedId] = React11.useState(null);
-  React11.useEffect(() => {
+  const scrollRef = React12.useRef(null);
+  const [expandedId, setExpandedId] = React12.useState(null);
+  React12.useEffect(() => {
     const container = scrollRef.current;
     if (!container) return;
     const activeEl = container.querySelector('[data-active="true"]');
@@ -3683,12 +4260,12 @@ function MobileTabs({ nav }) {
     })()
   ] });
 }
-var BackStyleContext = React11.createContext("link");
+var BackStyleContext = React12.createContext("link");
 function BackStyleProvider({ style, children }) {
   return /* @__PURE__ */ jsx(BackStyleContext.Provider, { value: style, children });
 }
 function useBackStyle() {
-  return React11.useContext(BackStyleContext);
+  return React12.useContext(BackStyleContext);
 }
 function SubpageHeader({ title, subtitle, description, icon, onBack, parentLabel, actions, backStyle, inline }) {
   const t = useTranslation();
@@ -3796,11 +4373,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 +4398,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,14 +4415,14 @@ 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 }) {
   const ctxVariant = useModuleLayout();
   const variant = navVariant ?? ctxVariant;
-  const [navQuery, setNavQuery] = React11.useState("");
-  const filteredNav = React11.useMemo(() => {
+  const [navQuery, setNavQuery] = React12.useState("");
+  const filteredNav = React12.useMemo(() => {
     const q = navQuery.trim().toLowerCase();
     if (!q) return nav;
     const hit = (label) => label.toLowerCase().includes(q);
@@ -3861,6 +4434,16 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
   }, [nav, navQuery]);
   const transitionKey = viewKey ?? "view";
   const onSubpage = useHasPageHeaderBack();
+  const activeLabel = React12.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 +4458,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, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, 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, useModalHost, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useModuleViewLabel, useNavTransition, usePageHeader, usePageHeaderClaimed, usePageHeaderHost, usePageTrail, usePageTrailParent, usePublishModuleViewLabel, useRailRow, useRegisterPageActions, useSaveBar, useSaveBarVisible, useSheetClose, useSheetDrag, useTrailBack };
+//# sourceMappingURL=chunk-63BB2CNP.js.map
+//# sourceMappingURL=chunk-63BB2CNP.js.map