@fayz-ai/ui 0.22.0 → 0.24.0

package/dist/{chunk-E44WOPCR.js → chunk-HO2P2XB4.js}

@@ -1,12 +1,16 @@
+import { useModuleHeaderActionsSlot, useModuleHeaderSlot } from './chunk-RRNMNFLF.js';
 import { cn, Button } from './chunk-OKZ6WQB3.js';
-import * as React6 from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React10 from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { ChevronRight, Check, Circle, Minus, ChevronDown, ArrowDown, ArrowUp, ArrowUpDown, Calendar, GripVertical, RefreshCw } from 'lucide-react';
+import { ChevronRight, Check, Circle, Minus, ChevronDown, ArrowDown, ArrowUp, ArrowUpDown, MoreHorizontal, Plus, MoreVertical, Calendar, X, SlidersHorizontal, GripVertical, RefreshCw } from 'lucide-react';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { useTranslation } from '@fayz-ai/core';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { createPortal } from 'react-dom';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-var Card = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -18,7 +22,7 @@ var Card = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -27,7 +31,7 @@ var CardHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -39,7 +43,7 @@ var CardTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -48,9 +52,9 @@ var CardDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
+var CardContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -65,7 +69,7 @@ var DropdownGroup = DropdownMenuPrimitive.Group;
 var DropdownPortal = DropdownMenuPrimitive.Portal;
 var DropdownSub = DropdownMenuPrimitive.Sub;
 var DropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownSubTrigger = React6.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -82,7 +86,7 @@ var DropdownSubTrigger = React6.forwardRef(({ className, inset, children, ...pro
   }
 ));
 DropdownSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownSubContent = React6.forwardRef(({ className, ...props }, ref) => (
+var DropdownSubContent = React10.forwardRef(({ className, ...props }, ref) => (
   // Portaled, like DropdownContent. Without it the submenu renders inside the
   // parent panel's DOM — and that panel is `overflow-hidden`, so the submenu
   // was clipped to its box: a flyout you could open and never reach.
@@ -99,7 +103,7 @@ var DropdownSubContent = React6.forwardRef(({ className, ...props }, ref) => (
   ) })
 ));
 DropdownSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownContent = React6.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -112,7 +116,7 @@ var DropdownContent = React6.forwardRef(({ className, sideOffset = 4, ...props }
   }
 ) }));
 DropdownContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownItem = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -125,7 +129,7 @@ var DropdownItem = React6.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 DropdownItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownCheckboxItem = React6.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -142,7 +146,7 @@ var DropdownCheckboxItem = React6.forwardRef(({ className, children, checked, ..
   }
 ));
 DropdownCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownRadioItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -158,7 +162,7 @@ var DropdownRadioItem = React6.forwardRef(({ className, children, ...props }, re
   }
 ));
 DropdownRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownLabel = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -171,7 +175,7 @@ var DropdownLabel = React6.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 DropdownLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -199,7 +203,7 @@ var COLOR_CLASSES = {
   warning: "border-warning bg-warning text-white",
   destructive: "border-destructive bg-destructive text-destructive-foreground"
 };
-var Checkbox = React6.forwardRef(
+var Checkbox = React10.forwardRef(
   ({ checked = false, onChange, disabled, className, color = "primary", id, indeterminate = false, ...props }, ref) => {
     const filled = checked || indeterminate;
     return /* @__PURE__ */ jsx(
@@ -249,28 +253,28 @@ function DataTable({
   const tdCls = compact ? "px-3 py-1.5 align-middle text-xs" : "px-4 py-3 align-middle";
   const tableCls = compact ? "w-full text-xs min-w-max" : "w-full text-sm min-w-max";
   const rowHoverCls = isCard ? "hover:bg-muted/30" : "hover:bg-muted/20";
-  const [sorting, setSorting] = React6.useState([]);
-  const rowId = React6.useCallback(
+  const [sorting, setSorting] = React10.useState([]);
+  const rowId = React10.useCallback(
     (row) => getRowId ? getRowId(row) : String(row.id ?? ""),
     [getRowId]
   );
-  const selected = React6.useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
-  const pageIds = React6.useMemo(() => data.map(rowId), [data, rowId]);
+  const selected = React10.useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
+  const pageIds = React10.useMemo(() => data.map(rowId), [data, rowId]);
   const selectedOnPage = pageIds.filter((id) => selected.has(id)).length;
   const allOnPageSelected = pageIds.length > 0 && selectedOnPage === pageIds.length;
-  const toggleRow = React6.useCallback((id) => {
+  const toggleRow = React10.useCallback((id) => {
     const next = new Set(selected);
     if (next.has(id)) next.delete(id);
     else next.add(id);
     onSelectedIdsChange?.([...next]);
   }, [selected, onSelectedIdsChange]);
-  const toggleAllOnPage = React6.useCallback(() => {
+  const toggleAllOnPage = React10.useCallback(() => {
     const next = new Set(selected);
     if (allOnPageSelected) pageIds.forEach((id) => next.delete(id));
     else pageIds.forEach((id) => next.add(id));
     onSelectedIdsChange?.([...next]);
   }, [selected, allOnPageSelected, pageIds, onSelectedIdsChange]);
-  const selectionColumn = React6.useMemo(() => ({
+  const selectionColumn = React10.useMemo(() => ({
     id: "__select__",
     enableSorting: false,
     header: () => /* @__PURE__ */ jsx(
@@ -297,7 +301,7 @@ function DataTable({
     // ids: turning the page with nothing selected changes no other dep, and the
     // memo would hand the header a button that ticks the previous page's rows.
   }), [allOnPageSelected, selectedOnPage, selected, rowId, toggleRow, toggleAllOnPage, t]);
-  const allColumns = React6.useMemo(
+  const allColumns = React10.useMemo(
     () => selectable ? [selectionColumn, ...columns] : columns,
     [selectable, selectionColumn, columns]
   );
@@ -315,6 +319,10 @@ function DataTable({
       /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ jsx("tr", { className: "border-b last:border-0", children: allColumns.map((_2, j) => /* @__PURE__ */ jsx("td", { className: tdCls, children: /* @__PURE__ */ jsx("div", { className: "h-3.5 w-full animate-pulse rounded bg-muted" }) }, j)) }, i)) })
     ] }) }) });
   }
+  const showEmptyBlock = !loading && table.getRowModel().rows.length === 0;
+  if (showEmptyBlock) {
+    return /* @__PURE__ */ jsx("div", { className: wrapperCls, children: /* @__PURE__ */ jsx("div", { className: "flex min-h-64 w-full items-center justify-center px-4 py-10 text-center text-muted-foreground", children: emptyMessage }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: wrapperCls, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: tableCls, children: [
     /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: headerCls, children: headerGroup.headers.map((header) => {
       const sorted = header.column.getIsSorted();
@@ -370,12 +378,28 @@ function DataTable({
     }) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: allColumns.length, className: "h-64 px-6 text-center align-middle text-muted-foreground", children: emptyMessage }) }) })
   ] }) }) });
 }
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "fayz-glass-surface z-[120] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var WIDE_QUERY = "(min-width: 768px)";
 function useIsWide(query = WIDE_QUERY) {
-  const [wide, setWide] = React6.useState(
+  const [wide, setWide] = React10.useState(
     () => typeof window === "undefined" ? true : window.matchMedia(query).matches
   );
-  React6.useEffect(() => {
+  React10.useEffect(() => {
     const mq = window.matchMedia(query);
     const onChange = () => setWide(mq.matches);
     mq.addEventListener("change", onChange);
@@ -383,6 +407,219 @@ function useIsWide(query = WIDE_QUERY) {
   }, [query]);
   return wide;
 }
+var Hint = React10.forwardRef(function Hint2({ label, children, side = "top", delayDuration = 0, ...rest }, ref) {
+  if (!label) return React10.cloneElement(children, { ...rest, ref });
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, ...rest, ref, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, className: "px-2 py-1 text-xs font-medium", children: label })
+  ] }) });
+});
+function iconOf(action, className) {
+  const Icon = action.icon;
+  return Icon ? /* @__PURE__ */ jsx(Icon, { className }) : null;
+}
+function PageActionBar({ actions, className }) {
+  const wide = useIsWide();
+  const visible = actions.filter((a) => !a.hidden);
+  if (visible.length === 0) return null;
+  if (!wide) {
+    const usable = visible.filter((a) => !a.desktopOnly);
+    return usable.length > 0 ? /* @__PURE__ */ jsx(PageActionFab, { actions: usable }) : null;
+  }
+  let seenPrimary = false;
+  const primary = [];
+  const secondary = [];
+  const utility = [];
+  const danger = [];
+  for (const a of visible) {
+    const intent = a.intent ?? "secondary";
+    if (intent === "primary" && !seenPrimary) {
+      seenPrimary = true;
+      primary.push(a);
+      continue;
+    }
+    if (intent === "danger") {
+      danger.push(a);
+      continue;
+    }
+    if (intent === "utility") {
+      utility.push(a);
+      continue;
+    }
+    secondary.push(a);
+  }
+  const head = primary[0];
+  const menu = [...secondary, ...danger];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", className), children: [
+    utility.map((a) => (
+      // Um botão só de ícone não diz o que faz. `title=` parecia resolver e
+      // não resolve: espera ~1s que ninguém controla, sai na pintura do
+      // sistema operacional, nunca aparece no toque e vários leitores de tela
+      // pulam. Hint é o tooltip do design system, e o texto é ANUNCIADO.
+      /* @__PURE__ */ jsx(Hint, { label: a.label, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => void a.onSelect(),
+          disabled: a.disabled,
+          "aria-label": a.label,
+          "data-testid": a.testId,
+          "data-tour": `action.${a.id}`,
+          children: iconOf(a, "h-4 w-4")
+        }
+      ) }, a.id)
+    )),
+    head && menu.length === 0 && /* @__PURE__ */ jsxs(Button, { onClick: () => void head.onSelect(), disabled: head.disabled, "data-testid": head.testId, "data-tour": `action.${head.id}`, children: [
+      iconOf(head, "mr-1.5 h-4 w-4"),
+      head.label
+    ] }),
+    head && menu.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsxs(Button, { className: "rounded-r-none", onClick: () => void head.onSelect(), disabled: head.disabled, "data-testid": head.testId, "data-tour": `action.${head.id}`, children: [
+        iconOf(head, "mr-1.5 h-4 w-4"),
+        head.label
+      ] }),
+      /* @__PURE__ */ jsxs(Dropdown, { children: [
+        /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Hint, { label: `${head.label}\u2026`, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "-ml-px rounded-l-none px-2",
+            "aria-label": `${head.label}\u2026`,
+            "data-tour": menu.map((a) => `action.${a.id}`).join(" "),
+            children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(DropdownContent, { align: "end", className: "w-56", children: /* @__PURE__ */ jsx(ActionItems, { actions: menu }) })
+      ] })
+    ] }),
+    !head && menu.length > 0 && /* @__PURE__ */ jsxs(Dropdown, { children: [
+      /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Hint, { label: "A\xE7\xF5es", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": "A\xE7\xF5es", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }) }),
+      /* @__PURE__ */ jsx(DropdownContent, { align: "end", className: "w-56", children: /* @__PURE__ */ jsx(ActionItems, { actions: menu }) })
+    ] })
+  ] });
+}
+function ActionItems({ actions, stagger }) {
+  const out = [];
+  actions.forEach((a, i) => {
+    const isDanger = a.intent === "danger";
+    const prevSafe = i > 0 && actions[i - 1].intent !== "danger";
+    if (isDanger && prevSafe) out.push(/* @__PURE__ */ jsx(DropdownSeparator, {}, `${a.id}-sep`));
+    out.push(
+      /* @__PURE__ */ jsxs(
+        DropdownItem,
+        {
+          disabled: a.disabled,
+          onSelect: () => void a.onSelect(),
+          "data-testid": a.testId,
+          style: stagger ? { ["--i"]: i } : void 0,
+          className: cn("gap-2", stagger && "fz-fab-item", isDanger && "text-destructive focus:text-destructive"),
+          children: [
+            iconOf(a, "h-4 w-4 shrink-0"),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "block truncate", children: a.label }),
+              a.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: a.description })
+            ] })
+          ]
+        },
+        a.id
+      )
+    );
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: out });
+}
+function PageActionFab({ actions }) {
+  const byIntent = (i) => actions.filter((a) => (a.intent ?? "secondary") === i);
+  const utility = byIntent("utility");
+  const main = [...byIntent("primary"), ...byIntent("secondary"), ...byIntent("danger")];
+  if (main.length === 0) return /* @__PURE__ */ jsx(FabButton, { actions: utility, tone: "neutral" });
+  const isCreate = main.every((a) => a.creates ?? a.icon === Plus);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    utility.length > 0 && /* @__PURE__ */ jsx(FabButton, { actions: utility, tone: "neutral", mini: true }),
+    /* @__PURE__ */ jsx(FabButton, { actions: main, tone: isCreate ? "primary" : "neutral" })
+  ] });
+}
+function useScrim(open) {
+  const [mounted, setMounted] = React10.useState(open);
+  const [visible, setVisible] = React10.useState(open);
+  React10.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      const frame = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(frame);
+    }
+    setVisible(false);
+    const timer = window.setTimeout(() => setMounted(false), SCRIM_MS);
+    return () => window.clearTimeout(timer);
+  }, [open]);
+  return { mounted, visible };
+}
+var SCRIM_MS = 200;
+function FabButton({ actions, tone, mini }) {
+  const [open, setOpen] = React10.useState(false);
+  const scrim = useScrim(open);
+  if (actions.length === 0) return null;
+  const isCreate = tone === "primary";
+  const FabIcon = isCreate ? Plus : MoreVertical;
+  const style = {
+    bottom: mini ? "calc(var(--fz-bottom-bar, 0px) + 4.75rem)" : "calc(var(--fz-bottom-bar, 0px) + 1rem)"
+  };
+  const shell = cn(
+    "fz-tap fixed z-40 flex items-center justify-center rounded-full",
+    "transition-transform active:scale-95 md:hidden",
+    // Centred on the main circle's column, so the two read as one stack.
+    mini ? "right-5 h-12 w-12" : "right-4 h-14 w-14",
+    isCreate ? "bg-primary text-primary-foreground shadow-lg shadow-primary/30 ring-4 ring-background" : "bg-card text-foreground shadow-lg ring-1 ring-border"
+  );
+  if (actions.length === 1) {
+    const only = actions[0];
+    const Icon = only.icon ?? FabIcon;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        style,
+        className: shell,
+        onClick: () => void only.onSelect(),
+        disabled: only.disabled,
+        "aria-label": only.label,
+        "data-testid": only.testId,
+        children: /* @__PURE__ */ jsx(Icon, { className: mini ? "h-5 w-5" : "h-6 w-6" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Dropdown, { open, onOpenChange: setOpen, children: [
+    scrim.mounted && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          onClick: () => setOpen(false),
+          className: cn(
+            "fixed inset-0 z-[100] bg-foreground/40 transition-opacity duration-200 md:hidden",
+            "motion-reduce:transition-none",
+            scrim.visible ? "opacity-100" : "opacity-0"
+          )
+        }
+      ),
+      document.body
+    ),
+    /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        style,
+        className: cn(shell, open && "z-[105]", isCreate && "fz-fab-trigger"),
+        "aria-label": actionsMenuLabel,
+        children: /* @__PURE__ */ jsx(FabIcon, { className: mini ? "h-5 w-5" : "h-6 w-6" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownContent, { side: "top", align: "end", sideOffset: 12, className: "fz-fab-menu w-60 md:hidden", children: /* @__PURE__ */ jsx(ActionItems, { actions, stagger: true }) })
+  ] });
+}
+var actionsMenuLabel = "A\xE7\xF5es";
+function setActionsMenuLabel(label) {
+  actionsMenuLabel = label;
+}
 function Skeleton({
   className,
   ...props
@@ -410,7 +647,55 @@ function TableSkeleton({ columns = 4, rows = 2 }) {
     )) }, r)) })
   ] });
 }
-var ToolbarButton = React6.forwardRef(function ToolbarButton2({ icon: Icon, caret = true, children, className, ...props }, ref) {
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React10.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "fayz-glass-surface z-[110] w-72 rounded-xl border bg-popover p-0 text-popover-foreground shadow-lg outline-none",
+      "data-[state=open]:animate-zoom-in data-[state=closed]:animate-zoom-out",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var ToolbarSurfaceContext = React10.createContext({
+  surface: "bar",
+  close: () => {
+  }
+});
+function useToolbarSurface() {
+  return React10.useContext(ToolbarSurfaceContext).surface;
+}
+function useToolbarPanelClose() {
+  return React10.useContext(ToolbarSurfaceContext).close;
+}
+var ToolbarButton = React10.forwardRef(function ToolbarButton2({ icon: Icon, caret = true, children, className, ...props }, ref) {
+  const panel = useToolbarSurface() === "panel";
+  if (panel) {
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant: "outline",
+        className: cn("h-10 w-full justify-between gap-2 px-3 font-normal", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+            Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null,
+            /* @__PURE__ */ jsx("span", { className: "truncate", children })
+          ] }),
+          caret ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -435,7 +720,23 @@ var ToolbarButton = React6.forwardRef(function ToolbarButton2({ icon: Icon, care
     }
   );
 });
-var ToolbarAction = React6.forwardRef(function ToolbarAction2({ icon: Icon, caret = false, children, className, ...props }, ref) {
+var ToolbarAction = React10.forwardRef(function ToolbarAction2({ icon: Icon, caret = false, children, className, ...props }, ref) {
+  const panel = useToolbarSurface() === "panel";
+  if (panel) {
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant: "outline",
+        className: cn("h-10 w-full justify-center gap-2 px-3 font-normal", className),
+        ...props,
+        children: [
+          Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -511,13 +812,13 @@ function writeOffset(key, offset) {
 }
 function useToolbarOffset(storageKey, enabled) {
   const key = OFFSET_KEY(storageKey);
-  const barRef = React6.useRef(null);
-  const [offset, setOffset] = React6.useState(() => enabled ? readOffset(key) : { x: 0, y: 0 });
-  const [dragging, setDragging] = React6.useState(false);
-  const latest = React6.useRef(offset);
+  const barRef = React10.useRef(null);
+  const [offset, setOffset] = React10.useState(() => enabled ? readOffset(key) : { x: 0, y: 0 });
+  const [dragging, setDragging] = React10.useState(false);
+  const latest = React10.useRef(offset);
   latest.current = offset;
-  const origin = React6.useRef(null);
-  const clamp = React6.useCallback((next) => {
+  const origin = React10.useRef(null);
+  const clamp = React10.useCallback((next) => {
     const el = barRef.current;
     if (!el || typeof window === "undefined") return next;
     const rect = el.getBoundingClientRect();
@@ -534,7 +835,7 @@ function useToolbarOffset(storageKey, enabled) {
       )
     };
   }, []);
-  const move = React6.useCallback((next, persist) => {
+  const move = React10.useCallback((next, persist) => {
     const clamped = clamp(next);
     setOffset(clamped);
     if (persist) writeOffset(key, clamped);
@@ -579,8 +880,8 @@ function useToolbarOffset(storageKey, enabled) {
     event.preventDefault();
     move({ x: latest.current.x + d.x, y: latest.current.y + d.y }, true);
   };
-  const reset = React6.useCallback(() => move({ x: 0, y: 0 }, true), [move]);
-  React6.useEffect(() => {
+  const reset = React10.useCallback(() => move({ x: 0, y: 0 }, true), [move]);
+  React10.useEffect(() => {
     if (!enabled) return;
     const onResize = () => move(latest.current, false);
     window.addEventListener("resize", onResize);
@@ -600,11 +901,94 @@ function PageToolbar({
   movable = true,
   storageKey = "shared",
   moveLabel,
+  filtersTitle,
   className
 }) {
   const floating = useIsWide();
   const { barRef, offset, dragging, reset, handlers } = useToolbarOffset(storageKey, movable && floating);
+  const actionsSlot = useModuleHeaderActionsSlot();
+  const moduleSlot = useModuleHeaderSlot();
+  const headerSlot = actionsSlot ?? moduleSlot;
+  const [openOnPhone, setOpenOnPhone] = React10.useState(false);
+  const scrim = useScrim(openOnPhone);
+  const panelSurface = React10.useMemo(
+    () => ({ surface: "panel", close: () => setOpenOnPhone(false) }),
+    []
+  );
   if (!range && !filters && !chips && !customize && !actions && !onRefresh) return null;
+  const controlsFor = ({ withChips, withRefresh = true }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    range,
+    filters,
+    withChips ? chips : null,
+    customize,
+    actions,
+    withRefresh && onRefresh ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: onRefresh,
+        "aria-label": refreshLabel,
+        className: "w-[26px] shrink-0 border-0 bg-transparent p-0 text-muted-foreground shadow-none hover:bg-transparent hover:text-foreground",
+        children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" })
+      }
+    ) : null
+  ] });
+  if (!floating && headerSlot) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      scrim.mounted && typeof document !== "undefined" && createPortal(
+        // O MESMO escurecer do FAB (ver useScrim em page-actions): enquanto o
+        // painel está aberto ele é a única coisa a responder, e a página atrás
+        // continuava lendo como um lugar onde ainda dava para tocar.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            onClick: () => setOpenOnPhone(false),
+            className: cn(
+              "fixed inset-0 z-[100] bg-foreground/40 transition-opacity duration-200 md:hidden",
+              "motion-reduce:transition-none",
+              scrim.visible ? "opacity-100" : "opacity-0"
+            )
+          }
+        ),
+        document.body
+      ),
+      createPortal(
+        // `w-full justify-end`: o slot do header é um flex de largura livre,
+        // então `ml-auto` sozinho encostava o botão no TÍTULO, não na borda
+        // da tela. Esticar o contêiner é o que dá uma direita para encostar.
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center justify-end gap-1", children: [
+          chips ? /* @__PURE__ */ jsx("div", { className: "scrollbar-none flex min-w-0 items-center gap-1 overflow-x-auto", children: chips }) : null,
+          /* @__PURE__ */ jsxs(Popover, { open: openOnPhone, onOpenChange: setOpenOnPhone, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                "aria-label": openOnPhone ? "Fechar filtros" : filtersTitle ?? "Filtros",
+                className: cn(
+                  "h-8 w-8 shrink-0 p-0 text-muted-foreground hover:text-foreground",
+                  openOnPhone && "z-[105]"
+                ),
+                children: openOnPhone ? /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                align: "end",
+                sideOffset: 8,
+                className: "z-[101] flex max-h-[70vh] w-[min(22rem,calc(100vw-1.5rem))] flex-col gap-3 overflow-y-auto p-3 md:hidden",
+                children: /* @__PURE__ */ jsx(ToolbarSurfaceContext.Provider, { value: panelSurface, children: controlsFor({ withChips: false, withRefresh: false }) })
+              }
+            )
+          ] })
+        ] }),
+        headerSlot
+      )
+    ] });
+  }
   return (
     // Caixa de altura ZERO: a barra flutua sobre os cartões em vez de abrir uma
     // linha só para ela. Ocupando espaço, ela empurrava a grade inteira para
@@ -618,6 +1002,7 @@ function PageToolbar({
     /* @__PURE__ */ jsx(
       "div",
       {
+        "data-print": "hide",
         className: cn(
           "z-20 flex",
           // `items-start` não é enfeite: num flex de altura 0, o alinhamento
@@ -654,22 +1039,7 @@ function PageToolbar({
                   children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5" })
                 }
               ) : null,
-              range,
-              filters,
-              chips,
-              customize,
-              actions,
-              onRefresh ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: onRefresh,
-                  "aria-label": refreshLabel,
-                  className: "w-[26px] border-0 bg-transparent p-0 text-muted-foreground shadow-none hover:bg-transparent hover:text-foreground",
-                  children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" })
-                }
-              ) : null
+              controlsFor({ withChips: true })
             ]
           }
         )
@@ -678,6 +1048,6 @@ function PageToolbar({
   );
 }
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dropdown, DropdownCheckboxItem, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownShortcut, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, PageToolbar, RangeControl, Skeleton, TableSkeleton, ToolbarAction, ToolbarButton, WIDE_QUERY, useIsWide };
-//# sourceMappingURL=chunk-E44WOPCR.js.map
-//# sourceMappingURL=chunk-E44WOPCR.js.map
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dropdown, DropdownCheckboxItem, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownShortcut, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, Hint, PageActionBar, PageToolbar, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RangeControl, Skeleton, TableSkeleton, ToolbarAction, ToolbarButton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WIDE_QUERY, setActionsMenuLabel, useIsWide, useToolbarPanelClose, useToolbarSurface };
+//# sourceMappingURL=chunk-HO2P2XB4.js.map
+//# sourceMappingURL=chunk-HO2P2XB4.js.map