@fayz-ai/ui 0.31.0 → 0.33.0

package/dist/{chunk-VBYFN5ZL.js → chunk-PL5CUWNE.js}

@@ -219,6 +219,8 @@ var usePageHeaderStore = create((set, get) => ({
   setShellSlot: (element) => set({ shellSlot: element }),
   outletSlot: null,
   setOutletSlot: (element) => set({ outletSlot: element }),
+  outletActionsSlot: null,
+  setOutletActionsSlot: (element) => set({ outletActionsSlot: element }),
   claimed: false,
   owner: null,
   hasBack: false,
@@ -253,6 +255,9 @@ function usePageHeaderClaimed() {
 function usePageTitleSlot() {
   return usePageHeaderStore((s) => s.outletSlot ?? s.shellSlot);
 }
+function usePageActionsOutletSlot() {
+  return usePageHeaderStore((s) => s.outletActionsSlot);
+}
 function usePageTitleSlotHost() {
   return usePageHeaderStore((s) => s.setShellSlot);
 }
@@ -270,19 +275,30 @@ function useHasPageHeaderHost() {
 function useHasPageHeaderOutlet() {
   return usePageHeaderStore((s) => s.outlets > 0);
 }
-function PageHeaderOutlet({ className }) {
+function PageHeaderOutlet({ className, active = true }) {
   const setOutletSlot = usePageHeaderStore((s) => s.setOutletSlot);
+  const setOutletActionsSlot = usePageHeaderStore((s) => s.setOutletActionsSlot);
   const claimed = usePageHeaderStore((s) => s.claimed);
+  const hasActions = usePageHeaderStore((s) => s.actions > 0);
   const addOutlet = usePageHeaderStore((s) => s.addOutlet);
   const removeOutlet = usePageHeaderStore((s) => s.removeOutlet);
   React11.useEffect(() => {
+    if (!active) return;
     addOutlet();
     return removeOutlet;
-  }, [addOutlet, removeOutlet]);
-  return React11.createElement("div", {
-    ref: setOutletSlot,
-    className: `${className ?? "mb-4"}${claimed ? "" : " hidden"}`
-  });
+  }, [active, addOutlet, removeOutlet]);
+  React11.useEffect(() => {
+    if (active) return;
+    setOutletSlot(null);
+    setOutletActionsSlot(null);
+  }, [active, setOutletSlot, setOutletActionsSlot]);
+  if (!active) return null;
+  return React11.createElement(
+    "div",
+    { className: `flex min-h-9 items-center justify-between gap-3${claimed || hasActions ? "" : " hidden"} ${className ?? "mb-3"}` },
+    React11.createElement("div", { ref: setOutletSlot, className: "flex min-w-0 flex-1 items-center" }),
+    React11.createElement("div", { ref: setOutletActionsSlot, className: "flex shrink-0 items-center gap-2" })
+  );
 }
 function usePageHeader(active, options) {
   const id = React11.useId();
@@ -926,6 +942,7 @@ function Sidebar({
   borderless,
   userMenuSlot,
   notificationSlot,
+  hideNotifications = false,
   unreadCount = 0,
   searchLabel: _searchLabel,
   sectionLabels,
@@ -1197,7 +1214,7 @@ function Sidebar({
               ), children: [
                 withCollapsed(userMenuSlot, collapsed),
                 !collapsed && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-                withCollapsed(notificationSlot, collapsed) ?? /* @__PURE__ */ jsxs(
+                !hideNotifications && (withCollapsed(notificationSlot, collapsed) ?? /* @__PURE__ */ jsxs(
                   "button",
                   {
                     ...collapsed ? flyout.rowProps({
@@ -1211,7 +1228,7 @@ function Sidebar({
                       unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 h-2 w-2 rounded-full bg-destructive" })
                     ]
                   }
-                ),
+                )),
                 !drawer && /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -1914,7 +1931,9 @@ function SidebarLayout({
   railOpen
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed);
-  const pageHeaderClaimed = usePageHeaderClaimed();
+  const rawClaimed = usePageHeaderClaimed();
+  const hasOutlet = useHasPageHeaderOutlet();
+  const pageHeaderClaimed = hasOutlet ? false : rawClaimed;
   const setTitleSlot = usePageTitleSlotHost();
   usePageHeaderHost();
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
@@ -1959,7 +1978,7 @@ function SidebarLayout({
         footerContent: sidebarFooterContent,
         borderless: frame,
         userMenuSlot,
-        notificationSlot,
+        hideNotifications: true,
         unreadCount,
         searchLabel,
         sectionLabels: menuNavigation ? void 0 : sidebarSectionLabels,
@@ -2025,19 +2044,22 @@ function SidebarLayout({
               ]
             }
           ),
-          !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack, primary: pagePrimary }),
-          /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
           topbarStart,
           /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 flex-1 justify-center px-2 md:flex", children: /* @__PURE__ */ jsx(ShellSearch, { tone: "bar", label: searchLabel, className: "w-full max-w-[280px]" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 items-center justify-end gap-2 md:flex-1", children: [
-          /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex items-center gap-2", style: { "--primary": "var(--primary-on-rail)", "--primary-foreground": "var(--primary-on-rail-foreground)" } }),
-          topbarEnd
+          topbarEnd,
+          notificationSlot
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { "data-frame": frame || void 0, className: cn(
-        "relative flex min-w-0 flex-1 overflow-hidden",
+        // `flex-col`: a faixa da página é a PRIMEIRA fila do cartão e
+        // atravessa-o inteiro; a trilha da página e o conteúdo dividem a fila
+        // de baixo. Era uma coluna só, com a trilha ao lado da faixa: a
+        // migalha começava depois do menu de Configurações e a régua sob ela
+        // parava no meio do cartão, como se fossem duas telas encostadas.
+        "relative flex min-w-0 flex-1 flex-col overflow-hidden",
         // `content`, not `card`: this is the page's own surface, and cards have
         // to sit ON it. Painted card, the frame was the same tone as everything
         // inside it and the page read as one flat sheet.
@@ -2054,10 +2076,22 @@ function SidebarLayout({
         frame && (railOpen ? "md:rounded-r-none md:border-r-0" : "md:mr-2"),
         immersive && "md:overflow-hidden"
       ), children: [
-        /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
-        /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-          /* @__PURE__ */ jsx("main", { className: cn("min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", menuOpen && "invisible md:visible"), children }),
-          /* @__PURE__ */ jsx(SaveBar, {})
+        /* @__PURE__ */ jsxs("div", { className: cn(
+          "relative z-20 flex min-h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-3 md:px-6",
+          menuOpen && "invisible md:visible"
+        ), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack, primary: pagePrimary }),
+            /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex shrink-0 items-center gap-2" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 min-h-0 flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", children: [
+            /* @__PURE__ */ jsx("main", { className: cn("min-w-0 flex-1 overflow-y-auto pb-16 md:pb-0", menuOpen && "invisible md:visible"), children }),
+            /* @__PURE__ */ jsx(SaveBar, {})
+          ] })
         ] })
       ] })
     ] }),
@@ -2185,43 +2219,43 @@ function TopbarLayout({
         hideMobileChrome: barOwnsNav
       }
     ),
-    /* @__PURE__ */ jsx("main", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxs("div", { "data-frame": frame || void 0, className: cn("fz-page-surface flex min-w-0 min-h-0 flex-1 overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-content"), children: [
-      /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", children: [
-        (pageHeaderClaimed || pageBack || hasPageActions || barOwnsNav) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              // `relative` + glass for the same reason as the sidebar
-              // layout's band: on a phone this IS the navigation bar.
-              "relative flex min-h-[44px] md:min-h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-2",
-              menuOpen && "invisible md:visible",
-              "fayz-glass-topbar",
-              !(pageHeaderClaimed || pageBack || hasPageActions) && "md:hidden"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-                mobileBackToMenu && /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: mobileBackToMenu,
-                    className: "fz-ios-tint fz-tap -ml-1 inline-flex shrink-0 items-center gap-0.5 text-[15px] md:hidden",
-                    children: [
-                      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }),
-                      /* @__PURE__ */ jsx("span", { children: "Voltar" })
-                    ]
-                  }
-                ),
-                !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: showTitle ? pageTitle : void 0, back: pageBack, primary: pagePrimary }),
-                /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
-                /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex shrink-0 items-center gap-2", style: { "--primary": "var(--primary-on-rail)", "--primary-foreground": "var(--primary-on-rail-foreground)" } })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", menuOpen && "invisible md:visible"), children })
+    /* @__PURE__ */ jsx("main", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxs("div", { "data-frame": frame || void 0, className: cn("fz-page-surface flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-content"), children: [
+      (pageHeaderClaimed || pageBack || hasPageActions || barOwnsNav) && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            // `relative` + glass for the same reason as the sidebar
+            // layout's band: on a phone this IS the navigation bar.
+            "relative flex min-h-[44px] md:min-h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-2",
+            menuOpen && "invisible md:visible",
+            "fayz-glass-topbar",
+            !(pageHeaderClaimed || pageBack || hasPageActions) && "md:hidden"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+              mobileBackToMenu && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: mobileBackToMenu,
+                  className: "fz-ios-tint fz-tap -ml-1 inline-flex shrink-0 items-center gap-0.5 text-[15px] md:hidden",
+                  children: [
+                    /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }),
+                    /* @__PURE__ */ jsx("span", { children: "Voltar" })
+                  ]
+                }
+              ),
+              !pageHeaderClaimed && /* @__PURE__ */ jsx(ShellPageTitle, { title: showTitle ? pageTitle : void 0, back: pageBack, primary: pagePrimary }),
+              /* @__PURE__ */ jsx("div", { ref: setTitleSlot, className: "flex min-w-0 items-center empty:hidden" }),
+              /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { ref: setActionsSlot, className: "flex shrink-0 items-center gap-2", style: { "--primary": "var(--primary-on-rail)", "--primary-foreground": "var(--primary-on-rail-foreground)" } })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 min-h-0 flex-1 overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { ref: setPageRailSlot, className: "flex shrink-0 empty:hidden" }),
+        /* @__PURE__ */ jsx("div", { className: cn("min-w-0 min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", menuOpen && "invisible md:visible"), children })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(SaveBar, {}),
@@ -3343,7 +3377,12 @@ function PageTabs({ actions, className, ...props }) {
     {
       style: { background: "var(--page-surface, hsl(var(--background)))" },
       className: cn(
-        "sticky top-0 z-20 -mx-3 -mt-3 mb-4 flex flex-wrap items-end justify-between gap-3 border-b border-border px-3 pt-2 md:-mx-6 md:-mt-4 md:px-6",
+        // `flex-nowrap`: a faixa NÃO quebra mais. Quebrando, o slot da direita
+        // (filtros, modos de ver) descia para uma segunda linha e a tela ganhava
+        // um terceiro andar de chrome antes do conteúdo — e, pior, as abas
+        // comiam a largura dele primeiro. Agora o slot da direita tem lugar
+        // garantido e são as ABAS que rolam na horizontal quando não cabem.
+        "sticky top-0 z-20 -mx-3 -mt-3 mb-4 flex flex-nowrap items-end justify-between gap-3 border-b border-border px-3 pt-2 md:-mx-6 md:-mt-4 md:px-6",
         // 48px no desktop, a mesma altura do subcabeçalho dos painéis do
         // assistente à direita (TasksFilterBar, NotebookPanel). Eram 34 aqui e
         // 48 lá: os dois fios que fecham as duas faixas paravam em alturas
@@ -3354,8 +3393,8 @@ function PageTabs({ actions, className, ...props }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(HeaderTabs, { ...props, className: "-mb-px" }),
-        actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2 pb-1.5", children: actions })
+        /* @__PURE__ */ jsx(HeaderTabs, { ...props, className: "-mb-px min-w-0 flex-1" }),
+        actions && /* @__PURE__ */ jsx("div", { className: "-mt-1 flex shrink-0 items-center gap-2 pb-1 empty:hidden", children: actions })
       ]
     }
   );
@@ -3479,21 +3518,11 @@ function ViewBarHost() {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      style: { background: "var(--page-surface, hsl(var(--background)))", marginTop: "-1rem" },
-      className: cn(
-        "sticky top-[2.4rem] z-10 -mx-3 mb-3 border-b border-border px-3 py-1 md:top-[2.5rem] md:-mx-6 md:px-6",
-        !active && "hidden"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: (el) => {
-            viewBarSlot = el;
-            viewBarNotify();
-          },
-          className: "flex min-h-7 items-center justify-between gap-2"
-        }
-      )
+      ref: (el) => {
+        viewBarSlot = el;
+        viewBarNotify();
+      },
+      className: cn("flex items-center gap-2", !active && "hidden")
     }
   );
 }
@@ -3508,10 +3537,12 @@ function PageViewBar({ children }) {
     };
   }, []);
   if (slot) return createPortal(children, slot);
-  return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-between gap-2", children });
+  return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
 }
 function PageHeaderActions({ children }) {
-  const slot = useModuleHeaderActionsSlot();
+  const outlet = usePageActionsOutletSlot();
+  const shellSlot = useModuleHeaderActionsSlot();
+  const slot = outlet ?? shellSlot;
   useRegisterPageActions();
   if (slot) return createPortal(children, slot);
   return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
@@ -3807,15 +3838,27 @@ function ModuleHeader({ nav }) {
         tabs,
         value: activeItem?.id ?? nav[0]?.id ?? "",
         onChange,
-        anchorPrefix: "modnav"
+        anchorPrefix: "modnav",
+        actions: /* @__PURE__ */ jsx(ViewBarHost, {})
       }
     ),
     childControl
   ] });
 }
-function ModulePage({ title: _title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction }) {
+function ModulePage({ title: _title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction, navFilterPlaceholder }) {
   const ctxVariant = useModuleLayout();
   const variant = navVariant ?? ctxVariant;
+  const [navQuery, setNavQuery] = React11.useState("");
+  const filteredNav = React11.useMemo(() => {
+    const q = navQuery.trim().toLowerCase();
+    if (!q) return nav;
+    const hit = (label) => label.toLowerCase().includes(q);
+    return nav.flatMap((item) => {
+      if (hit(item.label)) return [item];
+      const kids = (item.children ?? []).filter((c) => hit(c.label));
+      return kids.length ? [{ ...item, children: kids }] : [];
+    });
+  }, [nav, navQuery]);
   const transitionKey = viewKey ?? "view";
   const onSubpage = useHasPageHeaderBack();
   if (variant === "sidebar") {
@@ -3827,14 +3870,27 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
   if (variant === "tabs") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       !onSubpage && /* @__PURE__ */ jsx(ModuleHeader, { nav }),
-      !onSubpage && /* @__PURE__ */ jsx(ViewBarHost, {}),
       showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
       /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, className: cn("min-w-0", className), children })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
     /* @__PURE__ */ jsx(PageRail, { children: /* @__PURE__ */ jsxs("div", { className: "hidden w-48 shrink-0 flex-col overflow-y-auto border-r border-border p-3 no-print md:flex", children: [
-      /* @__PURE__ */ jsx("nav", { className: "space-y-0.5", children: nav.map((item) => /* @__PURE__ */ jsx(RailNavItem, { item }, item.id)) }),
+      navFilterPlaceholder && /* @__PURE__ */ jsxs("div", { className: "relative mb-2", children: [
+        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-1 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "search",
+            value: navQuery,
+            onChange: (e) => setNavQuery(e.target.value),
+            placeholder: navFilterPlaceholder,
+            "aria-label": navFilterPlaceholder,
+            className: "h-8 w-full border-0 bg-transparent pl-7 pr-2 text-[13px] outline-none placeholder:text-muted-foreground focus:ring-0"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("nav", { className: "space-y-0.5", children: filteredNav.map((item) => /* @__PURE__ */ jsx(RailNavItem, { item }, item.id)) }),
       sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: sidebarFooter })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
@@ -3846,5 +3902,5 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
 }
 
 export { AppShell, BackStyleProvider, BottomSheet, HeaderTabs, Hint, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageHeaderOutlet, PageRail, PageTabs, PageTitlePortal, PageTrail, PageTransition, PageViewBar, RailNavItem, SaveBar, SaveBarProvider, SheetCard, SheetRow, ShellSearch, Sidebar, SubpageHeader, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Topbar, ViewTabs, bottomNavReachesAll, isCreateRoute, navigateToCrumb, useBackHandler, useBackStyle, useCrossModuleBack, useCurrentRouteHref, useHasPageActions, useHasPageHeaderBack, useHasPageHeaderHost, useHasPageHeaderOutlet, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, usePageHeader, usePageHeaderClaimed, usePageHeaderHost, usePageTrail, usePageTrailParent, useRailRow, useRegisterPageActions, useSaveBar, useSaveBarVisible, useSheetClose, useSheetDrag, useTrailBack };
-//# sourceMappingURL=chunk-VBYFN5ZL.js.map
-//# sourceMappingURL=chunk-VBYFN5ZL.js.map
+//# sourceMappingURL=chunk-PL5CUWNE.js.map
+//# sourceMappingURL=chunk-PL5CUWNE.js.map