@fayz-ai/ui 0.33.1 → 0.36.0

package/dist/{chunk-33A7SN2N.js → chunk-XR3WXB6N.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, 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 { ICON_MAP } from './chunk-ZTS5S6BZ.js';
+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,
@@ -243,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]);
@@ -266,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]);
@@ -284,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;
@@ -324,18 +426,18 @@ function useModuleViewLabel() {
 }
 function usePublishModuleViewLabel(label) {
   const setLabel = usePageHeaderStore((s) => s.setModuleViewLabel);
-  React11.useEffect(() => {
+  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 })
@@ -424,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,
@@ -438,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);
 }
@@ -456,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();
@@ -476,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;
@@ -503,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();
@@ -515,7 +617,7 @@ function useRailFlyout({
     };
   }, [state, railRef, reposition]);
   const visible = !!state;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!visible) {
       setAnimate(false);
       return;
@@ -523,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();
@@ -531,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),
@@ -567,7 +669,20 @@ function useRailFlyout({
         "div",
         {
           ref: panelRef,
-          style: { borderTopLeftRadius: 2, borderBottomLeftRadius: 2 },
+          style: {
+            borderTopLeftRadius: 2,
+            borderBottomLeftRadius: 2,
+            // A cor vai em `style` e vem acompanhada de blur. Só a classe
+            // `bg-sidebar` deixava o painel atravessável sempre que
+            // `hsl(var(--sidebar))` nao resolvia — o tema da conta escreve esse
+            // token em runtime, e um valor que o `hsl()` nao aceita faz o
+            // navegador DESCARTAR a declaracao inteira, sem erro e so em
+            // producao. O blur e a rede embaixo disso: mesmo sem cor nenhuma, a
+            // pagina nao atravessa mais o texto do menu.
+            backgroundColor: "hsl(var(--sidebar) / 0.9)",
+            backdropFilter: "blur(16px) saturate(140%)",
+            WebkitBackdropFilter: "blur(16px) saturate(140%)"
+          },
           className: cn(
             // Sidebar tone, sidebar border: the panel is the menu leaning out,
             // not a popover from the page underneath it.
@@ -579,7 +694,12 @@ function useRailFlyout({
               "span",
               {
                 "aria-hidden": true,
-                style: { top: pos.arrow },
+                style: {
+                  top: pos.arrow,
+                  backgroundColor: "hsl(var(--sidebar) / 0.9)",
+                  backdropFilter: "blur(16px) saturate(140%)",
+                  WebkitBackdropFilter: "blur(16px) saturate(140%)"
+                },
                 className: "absolute -left-[5px] h-2.5 w-2.5 -translate-y-1/2 rotate-45 border-b border-l border-sidebar-border bg-sidebar"
               }
             ),
@@ -694,7 +814,7 @@ function NavChildConnector({ onPath, active }) {
   ] });
 }
 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;
 }
@@ -905,7 +1025,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 (
@@ -927,9 +1047,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 },
@@ -971,7 +1091,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,
@@ -984,14 +1104,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;
@@ -1043,10 +1163,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;
@@ -1059,7 +1179,7 @@ function Sidebar({
     }
     lastBodyRef.current = navBody;
   });
-  React11.useEffect(() => () => {
+  React12.useEffect(() => () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
   return (
@@ -1303,7 +1423,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";
@@ -1414,7 +1534,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(
@@ -1498,7 +1618,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 + "/")
@@ -1666,9 +1786,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;
@@ -1702,9 +1822,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 ?? (() => {
   });
 }
@@ -1718,9 +1838,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]);
@@ -1728,7 +1848,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();
@@ -1737,15 +1857,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;
@@ -1860,17 +1980,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);
@@ -1957,9 +2077,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",
@@ -2032,6 +2152,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",
@@ -2120,10 +2244,19 @@ function SidebarLayout({
               // 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"
+              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: "flex min-w-0 flex-1 items-center gap-3", 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" })
               ] }),
@@ -2227,9 +2360,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();
@@ -2362,17 +2495,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({
@@ -2381,7 +2513,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);
@@ -2390,7 +2522,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 () => {
@@ -2410,13 +2542,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);
@@ -2437,7 +2569,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"
@@ -2461,18 +2596,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",
@@ -2685,23 +2817,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();
     };
@@ -2804,11 +2936,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;
@@ -2819,12 +2951,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"
         ),
@@ -2877,7 +3005,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(
@@ -2886,7 +3014,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"
                     )
                   }
                 ),
@@ -2984,7 +3112,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;
@@ -2999,14 +3127,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);
@@ -3015,7 +3143,7 @@ function AppShell({
     return routes;
   }, [menuNavigation]);
   const isDestination = !!currentPath && destinationRoutes.includes(currentPath);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setDestinationRoutes(destinationRoutes);
   }, [destinationRoutes]);
   const pageClaimedBack = useHasPageHeaderBack();
@@ -3023,7 +3151,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;
@@ -3031,12 +3159,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;
@@ -3047,10 +3175,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);
@@ -3060,8 +3188,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;
@@ -3074,7 +3202,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 = () => {
@@ -3235,13 +3363,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();
@@ -3263,7 +3391,7 @@ function SplitWithRightRail({
       document.body.style.cursor = previousCursor;
     };
   }, [dragging, clamp]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (dragging) return;
     onWidthChange?.(width);
   }, [dragging]);
@@ -3478,12 +3606,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 "";
@@ -3503,26 +3631,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]);
@@ -3538,8 +3666,8 @@ function useCurrentRouteHref() {
     const clean = hash.split("?")[0];
     return clean.startsWith("/") ? clean : `/${clean}`;
   };
-  const [href, setHref] = React11.useState(read2);
-  React11.useEffect(() => {
+  const [href, setHref] = React12.useState(read2);
+  React12.useEffect(() => {
     const handler = () => setHref(read2());
     window.addEventListener("hashchange", handler);
     handler();
@@ -3550,7 +3678,7 @@ 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]
   );
@@ -3577,23 +3705,23 @@ function CollapsibleColumn({
   "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);
+  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 = React11.useRef(false);
+  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);
   };
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     onWidth?.(width);
   }, [width, onWidth]);
-  const setOpenState = React11.useCallback((nextCollapsed) => {
+  const setOpenState = React12.useCallback((nextCollapsed) => {
     setCollapsed(nextCollapsed);
     setPinned(!nextCollapsed);
     autoRef.current = false;
@@ -3604,7 +3732,7 @@ function CollapsibleColumn({
     }
     if (nextCollapsed) setHover(false);
   }, [storageKey, pinnedKey]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (squeezed === void 0) return;
     if (squeezed) {
       if (!collapsedRef.current) {
@@ -3616,8 +3744,8 @@ function CollapsibleColumn({
       setCollapsed(false);
     }
   }, [squeezed]);
-  const seen = React11.useRef(null);
-  React11.useEffect(() => {
+  const seen = React12.useRef(null);
+  React12.useEffect(() => {
     if (autoCollapseKey === void 0) return;
     if (seen.current === null) {
       seen.current = autoCollapseKey;
@@ -3631,14 +3759,14 @@ function CollapsibleColumn({
     }, autoCollapseMs);
     return () => clearTimeout(t);
   }, [autoCollapseKey, collapsed, pinned, autoCollapseMs]);
-  const scrollRef = React11.useRef(null);
-  const [hasMore, setHasMore] = React11.useState(false);
-  const onScroll = React11.useCallback(() => {
+  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);
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     onScroll();
     const el = scrollRef.current;
     if (!el) return;
@@ -3648,11 +3776,11 @@ function CollapsibleColumn({
       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(() => {
+  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");
@@ -3675,10 +3803,10 @@ function CollapsibleColumn({
       });
     }
   }, [seamTop]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     publish();
   }, [publish, width]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!seamTop) return;
     const el = panelRef.current;
     const card = el?.closest(".fz-page-surface");
@@ -3808,7 +3936,7 @@ function viewBarSubscribe(l) {
   };
 }
 function ViewBarHost() {
-  const active = React11.useSyncExternalStore(viewBarSubscribe, () => viewBarCount > 0);
+  const active = React12.useSyncExternalStore(viewBarSubscribe, () => viewBarCount > 0);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3821,8 +3949,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 () => {
@@ -3858,9 +3986,9 @@ function RailSections({ sections, search, collapsed }) {
 }
 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(() => {
+  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;
@@ -3920,10 +4048,10 @@ function unpublishSubNav(id) {
   subNavNotify();
 }
 function useSubNavPublished() {
-  return React11.useSyncExternalStore(subNavSubscribe, () => published, () => published);
+  return React12.useSyncExternalStore(subNavSubscribe, () => published, () => published);
 }
 function useSubNavHost() {
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     subNavHosts++;
     subNavNotify();
     return () => {
@@ -3933,7 +4061,7 @@ function useSubNavHost() {
   }, []);
 }
 function useHasSubNavHost() {
-  return React11.useSyncExternalStore(subNavSubscribe, () => subNavHosts > 0, () => false);
+  return React12.useSyncExternalStore(subNavSubscribe, () => subNavHosts > 0, () => false);
 }
 function SubNavBand({ sections, "aria-label": ariaLabel, className }) {
   const items = sections.flatMap((s) => s.items);
@@ -3965,13 +4093,13 @@ function SubNavBandHost({ leading, label }) {
   );
 }
 function PageSubNav({ items, sections, search, footer, style, "aria-label": ariaLabel }) {
-  const id = React11.useId();
+  const id = React12.useId();
   const hasHost = useHasSubNavHost();
   const resolved = sections ?? (items ? [{ items }] : []);
-  const ref = React11.useRef(resolved);
+  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])]));
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     publishSubNav({ id, label: ariaLabel, sections: ref.current });
     return () => unpublishSubNav(id);
   }, [id, ariaLabel, signature]);
@@ -3999,16 +4127,16 @@ 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, collapsed }) {
-  const [expanded, setExpanded] = React11.useState(false);
-  React11.useEffect(() => {
+  const [expanded, setExpanded] = React12.useState(false);
+  React12.useEffect(() => {
     if (collapsed) setExpanded(false);
   }, [collapsed]);
   const Icon = item.icon ? ICON_MAP[item.icon] ?? null : null;
@@ -4075,9 +4203,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"]');
@@ -4150,12 +4278,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();
@@ -4311,8 +4439,8 @@ function ModuleHeader({ nav }) {
 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);
@@ -4324,7 +4452,7 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
   }, [nav, navQuery]);
   const transitionKey = viewKey ?? "view";
   const onSubpage = useHasPageHeaderBack();
-  const activeLabel = React11.useMemo(() => {
+  const activeLabel = React12.useMemo(() => {
     if (onSubpage) return null;
     for (const item of nav) {
       const kid = item.children?.find((c) => c.active);
@@ -4365,6 +4493,6 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
   ] });
 }
 
-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
+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-XR3WXB6N.js.map
+//# sourceMappingURL=chunk-XR3WXB6N.js.map