@fayz-ai/ui 0.21.0 → 0.23.0

package/dist/{chunk-EGHEU3U5.js → chunk-RRNMNFLF.js}

@@ -1,134 +1,15 @@
-import { useHasPageHeaderHost, usePageHeader, PageTitlePortal, useLayoutStore, useHasPageHeaderBack, useRegisterPageActions, usePageHeaderClaimed, usePageTitleSlotHost, useHasPageHeaderOutlet, useHasPageActions, usePageHeaderHost } from './chunk-HKGTF2YA.js';
 import { cn } from './chunk-OKZ6WQB3.js';
-import { ICON_MAP } from './chunk-AIUHVTVK.js';
-import * as React2 from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, Loader2, ArrowLeft, Search, Bell, PanelLeft, PanelLeftClose, Menu, Crown, ChevronDown, ChevronRight, ChevronLeft, ExternalLink, CreditCard, Sparkles, Home, Plus, UserCog, Settings, LogOut } from 'lucide-react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ICON_MAP } from './chunk-OWN3GFDG.js';
+import * as React from 'react';
+import { Loader2, ArrowLeft, Search, CornerDownLeft, X, Bell, PanelLeft, PanelLeftClose, Menu, Crown, ExternalLink, CreditCard, Sparkles, ChevronDown, Home, ChevronRight, Plus, UserCog, Settings, LogOut } from 'lucide-react';
 import { useTranslation, useNavReferrer, routeModule, navHistoryBack } from '@fayz-ai/core';
-import * as Popover from '@radix-ui/react-popover';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
+import { create } from 'zustand';
+import * as Popover from '@radix-ui/react-popover';
 
-var STYLE_ID = "saas-sheet-styles";
-if (typeof document !== "undefined" && !document.getElementById(STYLE_ID)) {
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = `
-    @keyframes saas-sheet-fade-in { from { opacity: 0 } to { opacity: 1 } }
-    @keyframes saas-sheet-fade-out { from { opacity: 1 } to { opacity: 0 } }
-    @keyframes saas-sheet-slide-in { from { transform: translateX(100%) } to { transform: translateX(0) } }
-    @keyframes saas-sheet-slide-out { from { transform: translateX(0) } to { transform: translateX(100%) } }
-    .saas-sheet-overlay[data-state="open"] { animation: saas-sheet-fade-in 200ms ease-out }
-    .saas-sheet-overlay[data-state="closed"] { animation: saas-sheet-fade-out 150ms ease-in }
-    .saas-sheet-content[data-state="open"] { animation: saas-sheet-slide-in 280ms cubic-bezier(0.16, 1, 0.3, 1) }
-    .saas-sheet-content[data-state="closed"] { animation: saas-sheet-slide-out 200ms ease-in }
-  `;
-  document.head.appendChild(style);
-}
-var Sheet = DialogPrimitive.Root;
-var SheetTrigger = DialogPrimitive.Trigger;
-var SheetClose = DialogPrimitive.Close;
-var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "saas-sheet-overlay fixed inset-0 z-[100] bg-black/40 backdrop-blur-[2px]",
-      className
-    ),
-    ...props
-  }
-));
-SheetOverlay.displayName = "SheetOverlay";
-var SheetContent = React2.forwardRef(({ className, children, width, hideClose, overlay = "blur", onPointerDownOutside, onInteractOutside, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
-  /* @__PURE__ */ jsx(SheetOverlay, { className: overlay === "none" ? "bg-transparent backdrop-blur-0" : overlay === "dim" ? "backdrop-blur-0" : void 0 }),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
-    {
-      ref,
-      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(
-        "fayz-glass-surface saas-sheet-content fixed inset-y-0 right-0 z-[100] flex flex-col border-l bg-card shadow-2xl outline-none",
-        "w-full",
-        width ?? "max-w-md",
-        className
-      ),
-      ...props,
-      children: [
-        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" })
-        ] })
-      ]
-    }
-  )
-] }));
-SheetContent.displayName = "SheetContent";
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("flex flex-col gap-1 px-5 py-4 border-b shrink-0", className),
-      ...props
-    }
-  );
-}
-SheetHeader.displayName = "SheetHeader";
-function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("flex items-center gap-2 px-5 py-3 border-t shrink-0", className),
-      ...props
-    }
-  );
-}
-SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: cn("text-sm font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: cn("text-xs text-muted-foreground", className),
-    ...props
-  }
-));
-SheetDescription.displayName = "SheetDescription";
-function SheetBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("flex-1 overflow-y-auto px-5 py-5", className),
-      ...props
-    }
-  );
-}
-SheetBody.displayName = "SheetBody";
-var SaveBarApiContext = React2.createContext(null);
-var SaveBarStateContext = React2.createContext({ visible: false, saving: false });
+var SaveBarApiContext = React.createContext(null);
+var SaveBarStateContext = React.createContext({ visible: false, saving: false });
 var _saveBarVisible = false;
 var _saveBarSubs = /* @__PURE__ */ new Set();
 function setSaveBarVisibleSignal(v) {
@@ -137,7 +18,7 @@ function setSaveBarVisibleSignal(v) {
   _saveBarSubs.forEach((fn) => fn());
 }
 function useSaveBarVisible() {
-  return React2.useSyncExternalStore(
+  return React.useSyncExternalStore(
     (cb) => {
       _saveBarSubs.add(cb);
       return () => {
@@ -149,15 +30,15 @@ function useSaveBarVisible() {
   );
 }
 function SaveBarProvider({ children }) {
-  const [state, setState] = React2.useState({ visible: false, saving: false });
-  const handlers = React2.useRef({});
-  const api = React2.useMemo(() => ({ setState, handlers }), []);
-  const backStack = React2.useRef([]);
-  const backApi = React2.useMemo(() => ({ stack: backStack }), []);
-  React2.useEffect(() => {
+  const [state, setState] = React.useState({ visible: false, saving: false });
+  const handlers = React.useRef({});
+  const api = React.useMemo(() => ({ setState, handlers }), []);
+  const backStack = React.useRef([]);
+  const backApi = React.useMemo(() => ({ stack: backStack }), []);
+  React.useEffect(() => {
     setSaveBarVisibleSignal(state.visible);
   }, [state.visible]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     function onKey(e) {
       if (state.visible && !state.saving) {
         if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
@@ -185,7 +66,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 = React2.createContext(null);
+var BackNavApiContext = React.createContext(null);
 function isEditableTarget(target) {
   const el = target;
   if (!el || !el.tagName) return false;
@@ -193,12 +74,12 @@ function isEditableTarget(target) {
   return tag === "input" || tag === "textarea" || tag === "select" || el.isContentEditable;
 }
 function useBackHandler(onBack) {
-  const api = React2.useContext(BackNavApiContext);
-  const ref = React2.useRef(onBack);
-  React2.useEffect(() => {
+  const api = React.useContext(BackNavApiContext);
+  const ref = React.useRef(onBack);
+  React.useEffect(() => {
     ref.current = onBack;
   });
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!api) return;
     const stack = api.stack.current;
     stack.push(ref);
@@ -209,23 +90,23 @@ function useBackHandler(onBack) {
   }, [api]);
 }
 function useSaveBar({ dirty, alwaysVisible, saving = false, onSave, onDiscard, message, saveLabel, discardLabel }) {
-  const api = React2.useContext(SaveBarApiContext);
-  React2.useEffect(() => {
+  const api = React.useContext(SaveBarApiContext);
+  React.useEffect(() => {
     if (api) api.handlers.current = { onSave, onDiscard };
   });
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!api) return;
     api.setState({ visible: dirty || !!alwaysVisible, dirty, saving, message, saveLabel, discardLabel });
     return () => api.setState((s) => ({ ...s, visible: false }));
   }, [api, dirty, alwaysVisible, saving, message, saveLabel, discardLabel]);
 }
 function SaveBar({ className }) {
-  const state = React2.useContext(SaveBarStateContext);
-  const api = React2.useContext(SaveBarApiContext);
+  const state = React.useContext(SaveBarStateContext);
+  const api = React.useContext(SaveBarApiContext);
   const t = useTranslation();
-  const [rendered, setRendered] = React2.useState(state.visible);
-  const [closing, setClosing] = React2.useState(false);
-  React2.useEffect(() => {
+  const [rendered, setRendered] = React.useState(state.visible);
+  const [closing, setClosing] = React.useState(false);
+  React.useEffect(() => {
     if (state.visible) {
       setRendered(true);
       setClosing(false);
@@ -264,6 +145,7 @@ function SaveBar({ className }) {
             "button",
             {
               type: "button",
+              "data-tour": "savebar.discard",
               disabled: saving,
               onClick: () => api.handlers.current.onDiscard?.(),
               className: "rounded-full px-3 py-1.5 text-sm font-medium text-background/70 transition-colors hover:bg-background/10 hover:text-background disabled:opacity-50",
@@ -274,6 +156,7 @@ function SaveBar({ className }) {
             "button",
             {
               type: "button",
+              "data-tour": "savebar.save",
               disabled: saving,
               onClick: () => api.handlers.current.onSave?.(),
               className: "inline-flex items-center rounded-full bg-background px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-background/90 disabled:opacity-60",
@@ -288,6 +171,98 @@ function SaveBar({ className }) {
     }
   );
 }
+var usePageHeaderStore = create((set, get) => ({
+  shellSlot: null,
+  setShellSlot: (element) => set({ shellSlot: element }),
+  outletSlot: null,
+  setOutletSlot: (element) => set({ outletSlot: element }),
+  claimed: false,
+  owner: null,
+  hasBack: false,
+  hosts: 0,
+  outlets: 0,
+  actions: 0,
+  claim: (owner, hasBack = false) => set({ owner, claimed: true, hasBack }),
+  release: (owner) => {
+    if (get().owner === owner) set({ owner: null, claimed: false, hasBack: false });
+  },
+  addHost: () => set((s) => ({ hosts: s.hosts + 1 })),
+  removeHost: () => set((s) => ({ hosts: Math.max(0, s.hosts - 1) })),
+  addOutlet: () => set((s) => ({ outlets: s.outlets + 1 })),
+  removeOutlet: () => set((s) => ({ outlets: Math.max(0, s.outlets - 1) })),
+  addActions: () => set((s) => ({ actions: s.actions + 1 })),
+  removeActions: () => set((s) => ({ actions: Math.max(0, s.actions - 1) }))
+}));
+function useRegisterPageActions() {
+  const add = usePageHeaderStore((s) => s.addActions);
+  const remove = usePageHeaderStore((s) => s.removeActions);
+  React.useEffect(() => {
+    add();
+    return remove;
+  }, [add, remove]);
+}
+function useHasPageActions() {
+  return usePageHeaderStore((s) => s.actions > 0);
+}
+function usePageHeaderClaimed() {
+  return usePageHeaderStore((s) => s.claimed);
+}
+function usePageTitleSlot() {
+  return usePageHeaderStore((s) => s.outletSlot ?? s.shellSlot);
+}
+function usePageTitleSlotHost() {
+  return usePageHeaderStore((s) => s.setShellSlot);
+}
+function usePageHeaderHost() {
+  const addHost = usePageHeaderStore((s) => s.addHost);
+  const removeHost = usePageHeaderStore((s) => s.removeHost);
+  React.useEffect(() => {
+    addHost();
+    return removeHost;
+  }, [addHost, removeHost]);
+}
+function useHasPageHeaderHost() {
+  return usePageHeaderStore((s) => s.hosts > 0 || s.outlets > 0);
+}
+function useHasPageHeaderOutlet() {
+  return usePageHeaderStore((s) => s.outlets > 0);
+}
+function PageHeaderOutlet({ className }) {
+  const setOutletSlot = usePageHeaderStore((s) => s.setOutletSlot);
+  const claimed = usePageHeaderStore((s) => s.claimed);
+  const addOutlet = usePageHeaderStore((s) => s.addOutlet);
+  const removeOutlet = usePageHeaderStore((s) => s.removeOutlet);
+  React.useEffect(() => {
+    addOutlet();
+    return removeOutlet;
+  }, [addOutlet, removeOutlet]);
+  return React.createElement("div", {
+    ref: setOutletSlot,
+    className: `${className ?? "mb-4"}${claimed ? "" : " hidden"}`
+  });
+}
+function usePageHeader(active, options) {
+  const id = React.useId();
+  const claim = usePageHeaderStore((s) => s.claim);
+  const release = usePageHeaderStore((s) => s.release);
+  const back = options?.back ?? false;
+  React.useEffect(() => {
+    if (!active) {
+      release(id);
+      return;
+    }
+    claim(id, back);
+    return () => release(id);
+  }, [id, active, back, claim, release]);
+}
+function useHasPageHeaderBack() {
+  return usePageHeaderStore((s) => s.hasBack);
+}
+function PageTitlePortal({ children }) {
+  const slot = usePageTitleSlot();
+  if (!slot) return React.createElement(React.Fragment, null, children);
+  return createPortal(children, slot);
+}
 function useCrossModuleBack(onBack, parentLabel) {
   const currentPath = typeof window !== "undefined" ? (window.location.hash ? window.location.hash.slice(1) : window.location.pathname) || "/" : "/";
   const referrer = useNavReferrer(currentPath);
@@ -342,7 +317,7 @@ function PageHeader({ title, onBack, parentLabel, backLabel }) {
   const hasHost = useHasPageHeaderHost();
   const { onBack: effectiveOnBack, parentLabel: effectiveParent } = useCrossModuleBack(onBack, parentLabel);
   useBackHandler(effectiveOnBack);
-  const node = React2.useMemo(() => /* @__PURE__ */ jsx(
+  const node = React.useMemo(() => /* @__PURE__ */ jsx(
     PageHeaderCrumb,
     {
       title,
@@ -354,17 +329,154 @@ function PageHeader({ title, onBack, parentLabel, backLabel }) {
   if (hasHost) return /* @__PURE__ */ jsx(PageTitlePortal, { children: node });
   return /* @__PURE__ */ jsx("div", { className: "mb-4", children: node });
 }
+var useLayoutStore = create((set) => ({
+  sidebarOpen: true,
+  sidebarCollapsed: false,
+  mobileDrawerOpen: false,
+  drawerKeepOpenOnce: false,
+  commandPaletteOpen: false,
+  commandPaletteQuery: "",
+  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+  setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+  toggleMobileDrawer: () => set((state) => ({ mobileDrawerOpen: !state.mobileDrawerOpen })),
+  setMobileDrawerOpen: (open) => set({ mobileDrawerOpen: open }),
+  keepDrawerOpenOnce: () => set({ drawerKeepOpenOnce: true }),
+  // Opening search closes the mobile drawer. The palette is a full-screen
+  // surface on a phone, and leaving the drawer mounted behind it means the user
+  // dismisses the palette onto a menu they had already navigated away from.
+  // Handled here so every entry point behaves the same — the rail's search
+  // field, the topbar button and the ⌘K shortcut.
+  setCommandPaletteOpen: (open, query) => set(open ? { commandPaletteOpen: true, mobileDrawerOpen: false, commandPaletteQuery: query ?? "" } : { commandPaletteOpen: false, commandPaletteQuery: "" })
+}));
+function shortcutKey() {
+  if (typeof navigator === "undefined") return "\u2318";
+  return /Mac|iPhone|iPad/u.test(navigator.platform || navigator.userAgent) ? "\u2318" : "Ctrl ";
+}
+function ShellSearch({
+  label = "Search",
+  tone = "bar",
+  collapsed = false,
+  value,
+  onValueChange,
+  searchAllLabel = "Search everywhere",
+  className
+}) {
+  const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
+  const rail = tone === "rail";
+  const contextual = !!onValueChange && !collapsed;
+  const query = value ?? "";
+  const inputRef = React.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";
+  if (!contextual) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: escalate,
+        "aria-keyshortcuts": "Meta+K Control+K",
+        className: cn(
+          // Tonal surface, no outline. A 1px border here is a hard edge
+          // competing with every other hard edge; a lighter fill of the same
+          // hue reads as "a field" without drawing a box — and leaves the
+          // outline treatment free to mean focus, which it must.
+          "fz-tap group flex items-center rounded-lg transition-colors",
+          collapsed ? "h-9 w-9 justify-center" : "h-9 w-full gap-2.5 px-2.5",
+          surface,
+          "focus-visible:outline-none focus-visible:ring-2",
+          rail ? "focus-visible:ring-sidebar-accent-foreground/50" : "focus-visible:ring-ring/50",
+          className
+        ),
+        "aria-label": label,
+        title: collapsed ? label : void 0,
+        children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0" }),
+          !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left text-[13px]", children: label }),
+            /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11px] font-medium tabular-nums opacity-70 transition-opacity group-hover:opacity-100", children: [
+              shortcutKey(),
+              "K"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group flex h-9 w-full items-center gap-2.5 rounded-lg px-2.5 transition-colors",
+          surface,
+          "focus-within:outline-none",
+          ring
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "search",
+              value: query,
+              onChange: (e) => onValueChange(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  escalate();
+                }
+                if (e.key === "Escape" && query) {
+                  e.preventDefault();
+                  onValueChange("");
+                }
+              },
+              placeholder: label,
+              "aria-label": label,
+              "aria-keyshortcuts": "Meta+K Control+K",
+              className: cn(
+                "min-w-0 flex-1 border-none bg-transparent p-0 text-[13px] outline-none",
+                // `search` inputs paint their own clear button in WebKit, on top of
+                // ours and in the browser's grey.
+                "[&::-webkit-search-cancel-button]:appearance-none",
+                rail ? "text-sidebar-foreground placeholder:text-sidebar-muted" : "text-foreground placeholder:text-muted-foreground"
+              )
+            }
+          ),
+          !query && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11px] font-medium tabular-nums opacity-70 transition-opacity group-hover:opacity-100", children: [
+            shortcutKey(),
+            "K"
+          ] })
+        ]
+      }
+    ),
+    query && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: escalate,
+        className: cn(
+          "fz-tap flex w-full items-center gap-2 rounded-lg py-1.5 pl-9 pr-2.5 text-left text-[12px] transition-colors",
+          rail ? "text-sidebar-muted hover:bg-sidebar-accent/50 hover:text-sidebar-foreground" : "text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: searchAllLabel }),
+          /* @__PURE__ */ jsx(CornerDownLeft, { className: "h-3.5 w-3.5 shrink-0 opacity-60", "aria-hidden": true })
+        ]
+      }
+    )
+  ] });
+}
 var GUTTER_PX = 8;
 var CLOSE_DELAY_MS = 140;
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React2.useLayoutEffect : React2.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function iconOf(name) {
   if (!name) return null;
   return ICON_MAP[name] ?? null;
 }
-var RailFlyoutContext = React2.createContext(null);
+var RailFlyoutContext = React.createContext(null);
 var RailFlyoutProvider = RailFlyoutContext.Provider;
 function useRailRow(content) {
-  const flyout = React2.useContext(RailFlyoutContext);
+  const flyout = React.useContext(RailFlyoutContext);
   if (!flyout || !content) return {};
   return flyout.rowProps(content);
 }
@@ -374,19 +486,19 @@ function useRailFlyout({
   activeRoute,
   onNavigate
 }) {
-  const [state, setState] = React2.useState(null);
-  const [pos, setPos] = React2.useState({ top: 0, arrow: 20 });
-  const [animate, setAnimate] = React2.useState(false);
-  const panelRef = React2.useRef(null);
-  const closeTimer = React2.useRef(null);
-  const lastContent = React2.useRef(null);
-  const cancelClose = React2.useCallback(() => {
+  const [state, setState] = React.useState(null);
+  const [pos, setPos] = React.useState({ top: 0, arrow: 20 });
+  const [animate, setAnimate] = React.useState(false);
+  const panelRef = React.useRef(null);
+  const closeTimer = React.useRef(null);
+  const lastContent = React.useRef(null);
+  const cancelClose = React.useCallback(() => {
     if (closeTimer.current) {
       clearTimeout(closeTimer.current);
       closeTimer.current = null;
     }
   }, []);
-  const show = React2.useCallback(
+  const show = React.useCallback(
     (anchor, content2) => {
       if (!enabled) return;
       cancelClose();
@@ -394,19 +506,19 @@ function useRailFlyout({
     },
     [enabled, cancelClose]
   );
-  const hide = React2.useCallback(() => {
+  const hide = React.useCallback(() => {
     cancelClose();
     closeTimer.current = setTimeout(() => setState(null), CLOSE_DELAY_MS);
   }, [cancelClose]);
-  const dismiss = React2.useCallback(() => {
+  const dismiss = React.useCallback(() => {
     cancelClose();
     setState(null);
   }, [cancelClose]);
-  React2.useEffect(() => () => cancelClose(), [cancelClose]);
-  React2.useEffect(() => {
+  React.useEffect(() => () => cancelClose(), [cancelClose]);
+  React.useEffect(() => {
     if (!enabled) dismiss();
   }, [enabled, dismiss]);
-  const reposition = React2.useCallback(() => {
+  const reposition = React.useCallback(() => {
     const rail = railRef.current;
     const anchor = state?.anchor;
     if (!rail || !anchor) return;
@@ -421,7 +533,7 @@ function useRailFlyout({
     setPos({ top, arrow });
   }, [railRef, state]);
   useIsomorphicLayoutEffect(reposition, [reposition, state?.content.key]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!state) return;
     const rail = railRef.current;
     const onScroll = () => reposition();
@@ -433,7 +545,7 @@ function useRailFlyout({
     };
   }, [state, railRef, reposition]);
   const visible = !!state;
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!visible) {
       setAnimate(false);
       return;
@@ -441,7 +553,7 @@ function useRailFlyout({
     const id = requestAnimationFrame(() => setAnimate(true));
     return () => cancelAnimationFrame(id);
   }, [visible]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!visible) return;
     const onKey = (event) => {
       if (event.key === "Escape") dismiss();
@@ -449,7 +561,7 @@ function useRailFlyout({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [visible, dismiss]);
-  const rowProps = React2.useCallback(
+  const rowProps = React.useCallback(
     (content2) => ({
       onMouseEnter: (event) => show(event.currentTarget, content2),
       onFocus: (event) => show(event.currentTarget, content2),
@@ -566,14 +678,10 @@ function FlyoutBody({
   ] });
 }
 var RAIL_PUSH_MS = 260;
-var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React2.useLayoutEffect : React2.useEffect;
+var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function getIcon(name) {
   return ICON_MAP[name] ?? Home;
 }
-function shortcutKey() {
-  if (typeof navigator === "undefined") return "\u2318";
-  return /Mac|iPhone|iPad/u.test(navigator.platform || navigator.userAgent) ? "\u2318" : "Ctrl ";
-}
 function flyoutContentOf(item) {
   return {
     key: item.id,
@@ -668,7 +776,7 @@ function NavGroup({
   flyout
 }) {
   const isChildActive = item.children?.some((c) => c.route === activeRoute);
-  const [open, setOpen] = React2.useState(() => isChildActive ?? false);
+  const [open, setOpen] = React.useState(() => isChildActive ?? false);
   const Icon = getIcon(item.icon);
   if (collapsed) {
     const hoverProps = flyout?.rowProps(flyoutContentOf(item));
@@ -742,8 +850,14 @@ function NavGroup({
         childExternal && /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50", "aria-hidden": true }),
         child.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 shrink-0 text-amber-500", "aria-hidden": true })
       ] });
-      const row = childExternal ? /* @__PURE__ */ jsx("a", { href: child.href, target: "_blank", rel: "noopener noreferrer", className: childClass, children: childInner }) : /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(child.route), className: childClass, children: childInner });
-      if (!childConnector) return /* @__PURE__ */ jsx(React2.Fragment, { children: row }, child.id);
+      const row = childExternal ? /* @__PURE__ */ jsx("a", { href: child.href, target: "_blank", rel: "noopener noreferrer", className: childClass, children: childInner }) : (
+        // `nav.<route>` on group children too, matching the top-level rows
+        // above — without it a guided tour cannot point at "Cardápio",
+        // "Reservas" or any other row that lives under a group (the normal
+        // 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(React.Fragment, { children: row }, child.id);
       const activeIndex = item.children.findIndex((c) => c.route === activeRoute);
       const onPath = activeIndex >= 0 && childIndex < activeIndex;
       return (
@@ -805,12 +919,24 @@ function NavGroup({
   ] });
 }
 function withCollapsed(slot, collapsed) {
-  if (!React2.isValidElement(slot)) return slot;
+  if (!React.isValidElement(slot)) return slot;
   if (typeof slot.type === "string") return slot;
-  return React2.cloneElement(slot, { collapsed });
-}
+  return React.cloneElement(slot, { collapsed });
+}
+var SKELETON_ROWS = [
+  { width: 56, group: false },
+  { width: 68, group: true },
+  { width: 48, group: false },
+  { width: 60, group: true },
+  { width: 52, group: false }
+];
 function Sidebar({
   navigation,
+  navLoading = false,
+  navError,
+  navErrorLabel,
+  navRetryLabel,
+  onNavRetry,
   logo,
   collapsed,
   onToggle,
@@ -835,9 +961,8 @@ function Sidebar({
   drawer
 }) {
   const currentPath = currentPathProp;
-  const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
   const activeRoute = resolveActiveRoute(navigation, currentPath);
-  const railRef = React2.useRef(null);
+  const railRef = React.useRef(null);
   const flyout = useRailFlyout({
     enabled: collapsed,
     railRef,
@@ -886,10 +1011,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] = React2.useState(null);
-  const lastBodyRef = React2.useRef(null);
-  const lastKeyRef = React2.useRef(navKey);
-  const timerRef = React2.useRef(null);
+  const [outgoing, setOutgoing] = React.useState(null);
+  const lastBodyRef = React.useRef(null);
+  const lastKeyRef = React.useRef(navKey);
+  const timerRef = React.useRef(null);
   useIsomorphicLayoutEffect2(() => {
     if (lastKeyRef.current !== navKey) {
       const previousBody = lastBodyRef.current;
@@ -902,7 +1027,7 @@ function Sidebar({
     }
     lastBodyRef.current = navBody;
   });
-  React2.useEffect(() => () => {
+  React.useEffect(() => () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
   return (
@@ -927,8 +1052,10 @@ function Sidebar({
           // paid for by the content column on every screen in every app. The
           // labels still truncate, and a long one now truncates 32px earlier —
           // which is the trade, taken deliberately.
-          collapsed ? "w-16" : "w-56"
+          // A largura da GAVETA vai em `style`, logo abaixo — ver o porquê lá.
+          collapsed ? "w-16" : !drawer && "w-56"
         ),
+        style: drawer && !collapsed ? { width: "min(18rem, 85vw)" } : void 0,
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", !borderless && "border-b border-sidebar-border"), children: [
             /* @__PURE__ */ jsxs(
@@ -940,7 +1067,13 @@ function Sidebar({
                   // h-14 quando a marca é a única coisa aqui e a linha tem de bater
                   // com o cabeçalho da página.
                   identity ? "h-12" : "h-14",
-                  collapsed && "justify-center"
+                  collapsed && "justify-center",
+                  // `logo === null` é uma opinião, não a falta de uma: quer dizer
+                  // "esta casa não é marcada pelo produto". A linha da marca então
+                  // não existe, e o rail abre direto no seletor de conta — o ícone da
+                  // casa, o nome e o chevron, numa linha só. `undefined` continua
+                  // caindo no rótulo padrão, que é o que um app sem logo sempre teve.
+                  logo === null && !topContent && "hidden"
                 ),
                 children: [
                   topContent ? /* @__PURE__ */ jsx("div", { className: cn("min-w-0", collapsed ? "flex justify-center" : "flex-1"), children: withCollapsed(topContent, collapsed) }) : !collapsed && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 px-1.5", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
@@ -948,60 +1081,68 @@ function Sidebar({
                     "button",
                     {
                       onClick: onToggle,
-                      className: "fz-tap shrink-0 rounded-button p-1.5 text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                      className: "fz-tap flex h-9 w-9 shrink-0 items-center justify-center rounded-button text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                       "aria-label": "Close menu",
-                      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
                     }
                   )
                 ]
               }
             ),
-            identity && /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-2", collapsed && "flex justify-center"), children: withCollapsed(identity, collapsed) })
-          ] }),
-          navTop ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 pt-2", children: withCollapsed(navTop, collapsed) }) : (
-            /* Search — above the first destination. It used to be a 16px magnifier
-                tucked beside the avatar at the very bottom, which is where you put
-                something nobody is meant to find: the fastest way through an admin
-                with thirty screens was the one control shaped like an afterthought.
-                Here it reads as what it is — a field — and says which key opens it.
-                Clicking it opens the same palette ⌘K does; it is a button, not an
-                input, because typing happens there. */
-            /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-2 pt-2", collapsed && "flex justify-center"), children: /* @__PURE__ */ jsxs(
-              "button",
+            identity && // Sem a linha da marca acima, a conta encosta no topo da janela. O ar
+            // que a marca ocupava continua sendo necessário: é o que separa o
+            // conteúdo do rail da borda do navegador.
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                onClick: () => setCommandPaletteOpen(true),
-                "aria-keyshortcuts": "Meta+K Control+K",
                 className: cn(
-                  // Tonal surface, no outline. On a dark rail a 1px border is a hard
-                  // edge competing with every other hard edge; a lighter fill of the
-                  // same hue reads as "a field" without drawing a box around it — and
-                  // leaves the outline treatment free to mean focus, which it must.
-                  "fz-tap group flex items-center rounded-lg bg-sidebar-accent/40 text-sidebar-muted transition-colors",
-                  "hover:bg-sidebar-accent/70 hover:text-sidebar-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-accent-foreground/50",
-                  collapsed ? "h-9 w-9 justify-center" : "h-9 w-full gap-2.5 px-2.5"
+                  "px-2 pb-2",
+                  logo === null && !topContent && "pt-3",
+                  collapsed && "flex justify-center"
                 ),
-                "aria-label": searchLabel,
-                title: collapsed ? searchLabel : void 0,
-                children: [
-                  /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0" }),
-                  !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left text-[13px]", children: searchLabel }),
-                    /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11px] font-medium tabular-nums text-sidebar-muted/60 transition-opacity group-hover:opacity-100 md:opacity-70", children: [
-                      shortcutKey(),
-                      "K"
-                    ] })
-                  ] })
-                ]
+                children: withCollapsed(identity, collapsed)
               }
-            ) })
-          ),
+            )
+          ] }),
+          navTop ? /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-2 pt-2", collapsed && "flex justify-center"), children: withCollapsed(navTop, collapsed) }) : /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-2 pt-2", collapsed && "flex justify-center"), children: /* @__PURE__ */ jsx(ShellSearch, { tone: "rail", collapsed, label: searchLabel }) }),
           beforeNav && /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-1 empty:hidden", collapsed && "flex justify-center"), children: withCollapsed(beforeNav, collapsed) }),
+          navError && !navLoading && /* @__PURE__ */ jsxs("div", { className: "flex-1 px-3 py-4", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-sidebar-foreground", children: navErrorLabel ?? "N\xE3o foi poss\xEDvel carregar o menu" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-relaxed text-sidebar-muted", children: navError }),
+            onNavRetry && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onNavRetry,
+                className: "fz-tap mt-3 rounded-button bg-sidebar-accent px-2.5 py-1.5 text-xs font-medium text-sidebar-accent-foreground transition-colors hover:brightness-110",
+                children: navRetryLabel ?? "Tentar de novo"
+              }
+            )
+          ] }),
+          navLoading && /* @__PURE__ */ jsx(
+            "nav",
+            {
+              "aria-busy": true,
+              "aria-label": "Carregando menu",
+              className: "fz-rail-skeleton flex-1 space-y-1 p-2",
+              children: SKELETON_ROWS.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "flex h-9 items-center gap-3 rounded-button px-2.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0 rounded bg-sidebar-foreground/10" }),
+                !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "h-3 rounded bg-sidebar-foreground/10", style: { width: `${row.width}%` } }),
+                  row.group && /* @__PURE__ */ jsx("span", { className: "ml-auto h-3 w-3 shrink-0 rounded bg-sidebar-foreground/[0.07]" })
+                ] })
+              ] }, i))
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "nav",
             {
+              hidden: navLoading || !!navError,
               className: cn(
                 "relative flex-1 p-2",
+                // Entra em fade: o rail é a primeira coisa que alguém lê depois de
+                // escolher a conta, e aparecer de uma vez lê como sobressalto.
+                "duration-300 animate-in fade-in",
                 // scrollbar-none: the rail still scrolls, but without the native
                 // scrollbar gutter eating into the nav items.
                 outgoing ? "overflow-hidden" : "overflow-y-auto scrollbar-none"
@@ -1104,7 +1245,7 @@ function TopbarUserMenu({
   onBilling,
   userMenuExtras
 }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React.useState(false);
   if (!user) return null;
   const initial = (user.fullName?.trim()?.[0] ?? user.email?.[0] ?? "?").toUpperCase();
   const item = (label, onClick, Icon) => onClick ? /* @__PURE__ */ jsxs(
@@ -1188,7 +1329,7 @@ function getIcon2(name) {
   return ICON_MAP[name] ?? Home;
 }
 function NavDropdown({ item, currentPath, onNavigate }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React.useState(false);
   const Icon = getIcon2(item.icon);
   const isChildActive = item.children?.some(
     (child) => currentPath === child.route || currentPath.startsWith(child.route + "/")
@@ -1355,17 +1496,17 @@ function Topbar({
     }) }) }) })
   ] });
 }
-var ModuleHeaderSlotContext = React2.createContext(null);
+var ModuleHeaderSlotContext = React.createContext(null);
 function useModuleHeaderSlot() {
-  return React2.useContext(ModuleHeaderSlotContext);
+  return React.useContext(ModuleHeaderSlotContext);
 }
-var ModuleHeaderActionsSlotContext = React2.createContext(null);
+var ModuleHeaderActionsSlotContext = React.createContext(null);
 function useModuleHeaderActionsSlot() {
-  return React2.useContext(ModuleHeaderActionsSlotContext);
+  return React.useContext(ModuleHeaderActionsSlotContext);
 }
-var PageRailSlotContext = React2.createContext(null);
+var PageRailSlotContext = React.createContext(null);
 function usePageRailSlot() {
-  return React2.useContext(PageRailSlotContext);
+  return React.useContext(PageRailSlotContext);
 }
 function bottomNavReachesAll(items) {
   return !!items?.some((i) => "kind" in i && i.kind === "more");
@@ -1379,6 +1520,11 @@ function ShellPageTitle({
 }
 function SidebarLayout({
   navigation = [],
+  navLoading = false,
+  navError,
+  navErrorLabel,
+  navRetryLabel,
+  onNavRetry,
   logo,
   user,
   children,
@@ -1421,9 +1567,9 @@ function SidebarLayout({
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
   const mobileMenuOpen = useLayoutStore((st) => st.mobileDrawerOpen);
   const setMobileMenuOpen = useLayoutStore((st) => st.setMobileDrawerOpen);
-  const [headerSlot, setHeaderSlot] = React2.useState(null);
-  const [actionsSlot, setActionsSlot] = React2.useState(null);
-  const [pageRailSlot, setPageRailSlot] = React2.useState(null);
+  const [headerSlot, setHeaderSlot] = React.useState(null);
+  const [actionsSlot, setActionsSlot] = React.useState(null);
+  const [pageRailSlot, setPageRailSlot] = React.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",
@@ -1437,6 +1583,11 @@ function SidebarLayout({
       Sidebar,
       {
         navigation,
+        navLoading,
+        navError,
+        navErrorLabel,
+        navRetryLabel,
+        onNavRetry,
         logo,
         collapsed: sidebarCollapsed,
         onToggle: () => setSidebarCollapsed(!sidebarCollapsed),
@@ -1464,55 +1615,73 @@ function SidebarLayout({
         navChildConnector: sidebarNavChildConnector
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: cn(
-      "relative flex flex-1 overflow-hidden",
-      // `content`, not `card`: this is the page's own surface, and cards have
-      // to sit ON it. Painted card, the frame was the same tone as everything
-      // inside it and the page read as one flat sheet.
-      frame && "md:my-2 md:ml-2 md:rounded-xl md:border md:border-border md:bg-content",
-      // With a companion rail open, the page and the rail are ONE card: the
-      // right edge opens and the rail closes it. Two cards with a strip of
-      // chrome between them made the assistant read as a separate window
-      // parked next to the app rather than as a column of it — the rail's own
-      // left border is then the single seam between the two.
-      frame && (railOpen ? "md:rounded-r-none md:border-r-0" : "md:mr-2"),
-      immersive && "md:overflow-hidden"
-    ), children: [
-      /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
-      /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn(
-          "flex shrink-0 items-center justify-between gap-3 px-4 py-2",
-          "min-h-14 border-b border-border",
-          // …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",
-          // Immersive pages draw their own window bar. Keeping ours would be two
-          // bars stating one thing — but only on desktop: on a phone this band
-          // is where the hamburger lives, and the page's bar sits under it.
-          immersive && "md:hidden"
-        ), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-            !barOwnsNav && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setMobileMenuOpen(true),
-                className: "inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden",
-                "aria-label": "Open menu",
-                children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
-              }
-            ),
-            !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack }),
-            /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
-            topbarStart,
-            /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex items-center gap-2" }),
-            topbarEnd
-          ] })
+    /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(
+        "flex shrink-0 items-center justify-between gap-3 px-4 py-2",
+        "min-h-14 border-b border-border",
+        // Sobre a moldura, os tokens do menu. O que a barra mostra (título,
+        // abas do módulo, botões) é escrito com `foreground`/`border`/`muted`
+        // comuns: num app de menu escuro isso seria texto escuro sobre preto.
+        // Remapear as variáveis aqui converte a barra inteira de uma vez, sem
+        // cada página saber em que superfície caiu. A linha de baixo sai: a
+        // borda de cima do cartão já é a costura.
+        // Altura TRAVADA em 56px na moldura, não mínima: esta faixa e a do
+        // assistente são desenhadas em subárvores diferentes, e o que alinha
+        // o topo dos dois cartões é as duas terem exatamente a mesma altura.
+        // 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)]",
+        // …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",
+        // Immersive pages draw their own window bar. Keeping ours would be two
+        // bars stating one thing — but only on desktop: on a phone this band
+        // is where the hamburger lives, and the page's bar sits under it.
+        immersive && "md:hidden"
+      ), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          !barOwnsNav && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setMobileMenuOpen(true),
+              className: "inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden",
+              "aria-label": "Open menu",
+              children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+            }
+          ),
+          !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack }),
+          /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
+          topbarStart,
+          /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
         ] }),
-        /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }),
-        /* @__PURE__ */ jsx(SaveBar, {})
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 items-center justify-end gap-2 md:flex-1", children: [
+          /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex items-center gap-2", style: { "--primary": "var(--primary-on-rail)", "--primary-foreground": "var(--primary-on-rail-foreground)" } }),
+          topbarEnd
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { "data-frame": frame || void 0, className: cn(
+        "relative flex min-w-0 flex-1 overflow-hidden",
+        // `content`, not `card`: this is the page's own surface, and cards have
+        // to sit ON it. Painted card, the frame was the same tone as everything
+        // inside it and the page read as one flat sheet.
+        "fz-page-surface",
+        frame && "md:mb-2 md:ml-2 md:rounded-xl md:border md:border-border md:bg-content",
+        // Sem barra no desktop (páginas imersivas desenham a sua) o cartão
+        // ficaria colado no alto da janela: a folga de cima volta.
+        frame && immersive && "md:mt-2",
+        // With a companion rail open, the page and the rail are ONE card: the
+        // right edge opens and the rail closes it. Two cards with a strip of
+        // chrome between them made the assistant read as a separate window
+        // parked next to the app rather than as a column of it — the rail's own
+        // left border is then the single seam between the two.
+        frame && (railOpen ? "md:rounded-r-none md:border-r-0" : "md:mr-2"),
+        immersive && "md:overflow-hidden"
+      ), children: [
+        /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }),
+          /* @__PURE__ */ jsx(SaveBar, {})
+        ] })
       ] })
     ] }),
     mobileMenuOpen && /* @__PURE__ */ jsx(
@@ -1571,9 +1740,9 @@ function TopbarLayout({
 }) {
   const mobileMenuOpen = useLayoutStore((st) => st.mobileDrawerOpen);
   const setMobileMenuOpen = useLayoutStore((st) => st.setMobileDrawerOpen);
-  const [headerSlot, setHeaderSlot] = React2.useState(null);
-  const [actionsSlot, setActionsSlot] = React2.useState(null);
-  const [pageRailSlot, setPageRailSlot] = React2.useState(null);
+  const [headerSlot, setHeaderSlot] = React.useState(null);
+  const [actionsSlot, setActionsSlot] = React.useState(null);
+  const [pageRailSlot, setPageRailSlot] = React.useState(null);
   const rawClaimed = usePageHeaderClaimed();
   const setTitleSlot = usePageTitleSlotHost();
   const hasOutlet = useHasPageHeaderOutlet();
@@ -1608,7 +1777,7 @@ function TopbarLayout({
         hideMobileChrome: barOwnsNav
       }
     ),
-    /* @__PURE__ */ jsx("main", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 min-h-0 flex-1 overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-content"), children: [
+    /* @__PURE__ */ jsx("main", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxs("div", { "data-frame": frame || void 0, className: cn("fz-page-surface flex min-w-0 min-h-0 flex-1 overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-content"), children: [
       /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", children: [
         (pageHeaderClaimed || pageBack || hasPageActions || barOwnsNav) && /* @__PURE__ */ jsxs(
@@ -1624,7 +1793,7 @@ function TopbarLayout({
                 /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
                 /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
               ] }),
-              /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex shrink-0 items-center gap-2" })
+              /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex shrink-0 items-center gap-2", style: { "--primary": "var(--primary-on-rail)", "--primary-foreground": "var(--primary-on-rail-foreground)" } })
             ]
           }
         ),
@@ -1669,30 +1838,30 @@ function MinimalLayout({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("shell-enter fz-viewport-h flex flex-col", hasBottomNav && "fz-has-bottom-bar"), children: [
     /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center justify-between border-b border-border bg-card px-4 md:px-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
+      logo === null ? null : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
       headerEnd && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerEnd })
     ] }),
     /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", children })
   ] });
 }
 function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
-  const [visible, setVisible] = React2.useState(false);
-  React2.useEffect(() => {
+  const [visible, setVisible] = React.useState(false);
+  React.useEffect(() => {
     const id = requestAnimationFrame(() => setVisible(true));
     return () => cancelAnimationFrame(id);
   }, []);
-  const close = React2.useCallback(() => {
+  const close = React.useCallback(() => {
     setVisible(false);
     window.setTimeout(onClose, 250);
   }, [onClose]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     const previous = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = previous;
     };
   }, []);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -1721,6 +1890,7 @@ function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
           Sidebar,
           {
             ...sidebarProps,
+            navTop: sidebarProps.navTop ? /* @__PURE__ */ jsx("div", { onClickCapture: () => useLayoutStore.getState().keepDrawerOpenOnce(), children: sidebarProps.navTop }) : void 0,
             collapsed: false,
             onToggle: close,
             drawer: true,
@@ -1840,6 +2010,13 @@ function AppShell({
   variant,
   contentFrame,
   navigation = [],
+  // Declarados em AppShellProps desde sempre e nunca desestruturados aqui: o
+  // esqueleto do rail so existia no caminho que nao e o que o app usa.
+  navLoading = false,
+  navError = null,
+  navErrorLabel,
+  navRetryLabel,
+  onNavRetry,
   logo,
   user,
   children,
@@ -1891,7 +2068,11 @@ function AppShell({
   const barRetracted = !!pageBack || pageClaimedBack;
   const mobileDrawerOpen = useLayoutStore((st) => st.mobileDrawerOpen);
   const setMobileDrawerOpen = useLayoutStore((st) => st.setMobileDrawerOpen);
-  React2.useEffect(() => {
+  React.useEffect(() => {
+    if (useLayoutStore.getState().drawerKeepOpenOnce) {
+      useLayoutStore.setState({ drawerKeepOpenOnce: false });
+      return;
+    }
     setMobileDrawerOpen(false);
   }, [currentPath]);
   const bottomBar = hasBottomNav ? /* @__PURE__ */ jsx(
@@ -1916,6 +2097,11 @@ function AppShell({
         SidebarLayout,
         {
           navigation,
+          navLoading,
+          navError,
+          navErrorLabel,
+          navRetryLabel,
+          onNavRetry,
           logo,
           user,
           onNavigate,
@@ -2021,13 +2207,13 @@ function SplitWithRightRail({
   maxWidth = 720,
   resizeLabel = "Resize panel"
 }) {
-  const [width, setWidth] = React2.useState(defaultWidth);
-  const [dragging, setDragging] = React2.useState(false);
-  const clamp = React2.useCallback(
+  const [width, setWidth] = React.useState(defaultWidth);
+  const [dragging, setDragging] = React.useState(false);
+  const clamp = React.useCallback(
     (value) => Math.min(maxWidth, Math.max(minWidth, value)),
     [minWidth, maxWidth]
   );
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!dragging) return;
     const onMove = (event) => {
       event.preventDefault();
@@ -2049,7 +2235,7 @@ function SplitWithRightRail({
       document.body.style.cursor = previousCursor;
     };
   }, [dragging, clamp]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (dragging) return;
     onWidthChange?.(width);
   }, [dragging]);
@@ -2132,490 +2318,7 @@ function SplitWithRightRail({
     ] })
   );
 }
-function HeaderTabs({
-  tabs,
-  value,
-  onChange,
-  className,
-  fill,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tablist",
-      "aria-label": rest["aria-label"],
-      className: cn(
-        "inline-flex max-w-full gap-5 overflow-x-auto scrollbar-none",
-        fill ? "items-stretch" : "items-center",
-        className
-      ),
-      children: tabs.map((tab) => {
-        const active = tab.value === value;
-        const Icon = tab.icon;
-        const box = cn(
-          "relative flex shrink-0 items-center gap-1.5 whitespace-nowrap text-sm transition-colors",
-          fill ? "h-full" : "pb-1.5",
-          active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground",
-          tab.dim && "opacity-50 hover:opacity-100"
-        );
-        const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-          Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }) : null,
-          /* @__PURE__ */ jsx("span", { children: tab.label }),
-          tab.count != null && /* @__PURE__ */ jsx("span", { className: cn(
-            "ml-0.5 rounded-full px-1.5 text-[11px] tabular-nums",
-            active ? "bg-muted text-foreground" : "bg-muted/70 text-muted-foreground"
-          ), children: tab.count }),
-          tab.badge
-        ] });
-        const underline = active ? /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-foreground" }) : null;
-        if (!tab.trailing) {
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "tab",
-              "aria-selected": active,
-              onClick: () => onChange(tab.value),
-              className: box,
-              children: [
-                inner,
-                underline
-              ]
-            },
-            tab.value
-          );
-        }
-        return /* @__PURE__ */ jsxs("div", { className: box, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              role: "tab",
-              "aria-selected": active,
-              onClick: () => onChange(tab.value),
-              className: "flex items-center gap-1.5 whitespace-nowrap",
-              children: inner
-            }
-          ),
-          tab.trailing,
-          underline
-        ] }, tab.value);
-      })
-    }
-  );
-}
-function PageTabs({ actions, className, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "-mx-3 -mt-3 mb-4 flex flex-wrap items-end justify-between gap-3 border-b border-border px-3 pt-2 md:-mx-6 md:-mt-4 md:px-6",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(HeaderTabs, { ...props, className: "-mb-px" }),
-        actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2 pb-1.5", children: actions })
-      ]
-    }
-  );
-}
-var SIZE = {
-  sm: { container: "h-[26px]", segment: "px-2.5 text-xs" },
-  md: { container: "h-[30px]", segment: "px-3 text-sm" }
-};
-function SegmentedControl({
-  options,
-  value,
-  onChange,
-  size = "sm",
-  className,
-  ...rest
-}) {
-  const items = options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tablist",
-      "aria-label": rest["aria-label"],
-      className: cn(
-        "inline-flex items-center rounded-button border border-border bg-card p-0.5 shadow-button",
-        SIZE[size].container,
-        className
-      ),
-      children: items.map((item) => {
-        const active = item.value === value;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": active,
-            onClick: () => onChange(item.value),
-            className: cn(
-              "flex h-full items-center rounded-button font-semibold transition-colors",
-              SIZE[size].segment,
-              active ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted/60"
-            ),
-            children: item.label
-          },
-          item.value
-        );
-      })
-    }
-  );
-}
-var NavTransitionContext = React2.createContext("slide");
-function NavTransitionProvider({ value, children }) {
-  return /* @__PURE__ */ jsx(NavTransitionContext.Provider, { value, children });
-}
-function useNavTransition() {
-  return React2.useContext(NavTransitionContext);
-}
-function resolveTransitionClass(transition, direction) {
-  if (transition === "none") return "";
-  if (transition === "fade") return "saas-page-enter";
-  if (direction === "back") return "saas-nav-back";
-  if (direction === "forward") return "saas-nav-forward";
-  return "saas-page-enter";
-}
-function PageTransition({
-  transitionKey,
-  direction,
-  className,
-  children
-}) {
-  const transition = useNavTransition();
-  const animClass = resolveTransitionClass(transition, direction);
-  return /* @__PURE__ */ jsx("div", { className: cn(animClass, className), children }, transitionKey);
-}
-function PageRail({ children }) {
-  const slot = usePageRailSlot();
-  if (slot) return createPortal(children, slot);
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-function PageHeaderActions({ children }) {
-  const slot = useModuleHeaderActionsSlot();
-  useRegisterPageActions();
-  if (slot) return createPortal(children, slot);
-  return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
-}
-function PremiumBadge({ className }) {
-  const t = useTranslation();
-  const tip = t("upgrade.badgeTooltip");
-  return /* @__PURE__ */ jsx("span", { title: tip, "aria-label": tip, className: cn("inline-flex shrink-0", className), children: /* @__PURE__ */ jsx(Crown, { className: "h-3.5 w-3.5 text-amber-500", "aria-hidden": true }) });
-}
-var ModuleLayoutContext = React2.createContext("rail");
-function ModuleLayoutProvider({ variant, children }) {
-  return /* @__PURE__ */ jsx(ModuleLayoutContext.Provider, { value: variant, children });
-}
-function useModuleLayout() {
-  return React2.useContext(ModuleLayoutContext);
-}
-function RailNavItem({ item }) {
-  const [expanded, setExpanded] = React2.useState(true);
-  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);
-  const isActive = item.active || hasActiveChild;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => hasChildren ? setExpanded(!expanded) : item.onClick?.(),
-        className: cn(
-          "flex items-center gap-2 w-full rounded-md px-2.5 py-1.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" }))
-        ]
-      }
-    ),
-    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",
-        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
-    )) })
-  ] });
-}
-function defaultChildOf(item) {
-  const kids = (item.children ?? []).filter((c) => c.kind !== "action");
-  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 = React2.useRef(null);
-  const [expandedId, setExpandedId] = React2.useState(null);
-  React2.useEffect(() => {
-    const container = scrollRef.current;
-    if (!container) return;
-    const activeEl = container.querySelector('[data-active="true"]');
-    if (activeEl) {
-      const left = activeEl.offsetLeft - container.offsetWidth / 2 + activeEl.offsetWidth / 2;
-      container.scrollTo({ left: Math.max(0, left), behavior: "smooth" });
-    }
-  }, [nav]);
-  return /* @__PURE__ */ jsxs("div", { className: "md:hidden -mx-1 mb-4 no-print", children: [
-    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-none", children: nav.map((item) => {
-      const Icon = item.icon ? ICON_MAP[item.icon] ?? null : null;
-      const hasChildren = item.children && item.children.length > 0;
-      const isActive = item.active || item.children?.some((c) => c.active);
-      const isExpanded = expandedId === item.id;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          "data-active": isActive || void 0,
-          onClick: () => {
-            if (hasChildren) {
-              if (!isExpanded) defaultChildOf(item)?.onClick?.();
-              setExpandedId(isExpanded ? null : item.id);
-            } else {
-              item.onClick?.();
-              setExpandedId(null);
-            }
-          },
-          className: cn(
-            // This strip is the most-tapped control in most modules and it
-            // was 28px tall — a third under the comfortable minimum. Height
-            // and text step up on touch; the desktop rail is unaffected.
-            "flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-4 text-sm font-medium transition-colors",
-            "min-h-[2.75rem] active:scale-[0.98]",
-            isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
-            item.label,
-            item.premium && /* @__PURE__ */ jsx(PremiumBadge, {}),
-            hasChildren && /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-2.5 w-2.5 transition-transform", isExpanded && "rotate-180") })
-          ]
-        },
-        item.id
-      );
-    }) }),
-    expandedId && (() => {
-      const item = nav.find((n) => n.id === expandedId);
-      const shown = (item?.children ?? []).filter((c) => c.kind !== "action");
-      if (shown.length < 2) return null;
-      return /* @__PURE__ */ jsx("div", { className: "flex gap-1 px-2 pb-2 animate-in fade-in-0 slide-in-from-top-1", children: shown.map((child) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            child.onClick?.();
-            setExpandedId(null);
-          },
-          className: cn(
-            "whitespace-nowrap rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors shrink-0",
-            child.active ? "bg-foreground/10 text-foreground" : "text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            child.label,
-            child.premium && /* @__PURE__ */ jsx(PremiumBadge, {})
-          ]
-        },
-        child.id
-      )) });
-    })()
-  ] });
-}
-var BackStyleContext = React2.createContext("link");
-function BackStyleProvider({ style, children }) {
-  return /* @__PURE__ */ jsx(BackStyleContext.Provider, { value: style, children });
-}
-function useBackStyle() {
-  return React2.useContext(BackStyleContext);
-}
-function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, backStyle, inline }) {
-  const t = useTranslation();
-  const appStyle = useBackStyle();
-  const hasShellBar = useHasPageHeaderHost() && !inline;
-  const cross = useCrossModuleBack(onBack, parentLabel);
-  const effectiveOnBack = inline ? onBack : cross.onBack;
-  const effectiveParentLabel = inline ? parentLabel : cross.parentLabel;
-  useBackHandler(effectiveOnBack);
-  const Icon = icon ? ICON_MAP[icon] ?? null : null;
-  if (inline && effectiveOnBack) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-        /* @__PURE__ */ jsx(PageHeaderCrumb, { title, parentLabel: effectiveParentLabel, onBack: effectiveOnBack }),
-        actions && /* @__PURE__ */ jsx("div", { className: "no-print", children: actions })
-      ] }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
-    ] });
-  }
-  if (hasShellBar) {
-    return /* @__PURE__ */ jsx(
-      ShellSubpageHeader,
-      {
-        title,
-        subtitle,
-        icon: Icon,
-        onBack: effectiveOnBack,
-        parentLabel: effectiveParentLabel,
-        actions
-      }
-    );
-  }
-  const style = !effectiveOnBack ? "icon" : backStyle ?? appStyle;
-  const effectiveStyle = style !== "icon" && !effectiveParentLabel ? "icon" : style;
-  const titleBlock = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      effectiveStyle === "icon" && effectiveOnBack && /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: effectiveOnBack,
-          className: "flex h-8 w-8 items-center justify-center rounded-lg border hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors",
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-        }
-      ),
-      Icon && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
-      ] })
-    ] }),
-    actions && /* @__PURE__ */ jsx("div", { className: "no-print", children: actions })
-  ] });
-  if (effectiveStyle === "breadcrumb") {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-4 mb-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsx("button", { onClick: effectiveOnBack, className: "hover:text-foreground transition-colors", children: effectiveParentLabel }),
-          /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: title })
-        ] }),
-        actions && /* @__PURE__ */ jsx("div", { className: "no-print", children: actions })
-      ] }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground -mt-2", children: subtitle })
-    ] });
-  }
-  if (effectiveStyle === "link") {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-6", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: effectiveOnBack,
-          className: "inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors",
-          children: [
-            /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
-            t("crud.detail.backTo", { entities: effectiveParentLabel })
-          ]
-        }
-      ),
-      titleBlock
-    ] });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "space-y-4 mb-6", children: titleBlock });
-}
-function ShellSubpageHeader({
-  title,
-  subtitle,
-  icon: Icon,
-  onBack,
-  parentLabel,
-  actions
-}) {
-  usePageHeader(true, { back: !!onBack });
-  const crumb = /* @__PURE__ */ jsx(PageTitlePortal, { children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-    Icon && !onBack && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-    /* @__PURE__ */ jsx(PageHeaderCrumb, { title, parentLabel, onBack })
-  ] }) });
-  if (!actions) return crumb;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    crumb,
-    /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsx("div", { className: "no-print flex shrink-0 items-center gap-2", children: actions }) })
-  ] });
-}
-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,
-    label: item.label,
-    icon: item.icon ? ICON_MAP[item.icon] ?? void 0 : void 0,
-    // Plan-gated views keep their upgrade marker — dropping it would hide the
-    // only signal that the tab costs an upgrade.
-    badge: item.premium ? /* @__PURE__ */ jsx(PremiumBadge, {}) : void 0
-  }));
-  const onChange = (id) => {
-    const item = nav.find((n) => n.id === id);
-    if (!item) return;
-    const hasChildren = item.children && item.children.length > 0;
-    if (hasChildren) defaultChild(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 ? /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "sm",
-      "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?.()
-    }
-  ) : void 0;
-  return /* @__PURE__ */ jsx(
-    PageTabs,
-    {
-      tabs,
-      value: activeItem?.id ?? nav[0]?.id ?? "",
-      onChange,
-      actions: childControl
-    }
-  );
-}
-function ModulePage({ title: _title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction }) {
-  const ctxVariant = useModuleLayout();
-  const variant = navVariant ?? ctxVariant;
-  const transitionKey = viewKey ?? "view";
-  const onSubpage = useHasPageHeaderBack();
-  if (variant === "sidebar") {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
-      /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, className: cn("min-w-0", className), children })
-    ] });
-  }
-  if (variant === "tabs") {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      !onSubpage && /* @__PURE__ */ jsx(ModuleHeader, { nav }),
-      showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
-      /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, className: cn("min-w-0", className), children })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
-    /* @__PURE__ */ jsx(PageRail, { children: /* @__PURE__ */ jsxs("div", { className: "hidden w-48 shrink-0 flex-col overflow-y-auto border-r border-border p-3 no-print md:flex", children: [
-      /* @__PURE__ */ jsx("nav", { className: "space-y-0.5", children: nav.map((item) => /* @__PURE__ */ jsx(RailNavItem, { item }, item.id)) }),
-      sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: sidebarFooter })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-      showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
-      !onSubpage && /* @__PURE__ */ jsx(MobileTabs, { nav }),
-      /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, children })
-    ] })
-  ] });
-}
 
-export { AppShell, BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageRail, PageTabs, PageTransition, RailNavItem, SaveBar, SaveBarProvider, SegmentedControl, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SubpageHeader, Topbar, bottomNavReachesAll, useBackHandler, useBackStyle, useCrossModuleBack, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, useRailRow, useSaveBar, useSaveBarVisible };
-//# sourceMappingURL=chunk-EGHEU3U5.js.map
-//# sourceMappingURL=chunk-EGHEU3U5.js.map
+export { AppShell, PageHeader, PageHeaderCrumb, PageHeaderOutlet, PageTitlePortal, SaveBar, SaveBarProvider, ShellSearch, Sidebar, Topbar, bottomNavReachesAll, useBackHandler, useCrossModuleBack, useHasPageActions, useHasPageHeaderBack, useHasPageHeaderHost, useHasPageHeaderOutlet, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, usePageHeader, usePageHeaderClaimed, usePageHeaderHost, usePageRailSlot, useRailRow, useRegisterPageActions, useSaveBar, useSaveBarVisible };
+//# sourceMappingURL=chunk-RRNMNFLF.js.map
+//# sourceMappingURL=chunk-RRNMNFLF.js.map