@fayz-ai/ui 0.15.0 → 0.17.0

package/dist/{chunk-SLWTKHNY.js → chunk-Z2ITFPGL.js}

@@ -1,25 +1,25 @@
-import { useSaveBarVisible, useCrossModuleBack, useBackHandler, PageHeaderActions } from './chunk-NA3GE4H3.js';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, Card, DataTable } from './chunk-KD2V3TAX.js';
+import { useSaveBarVisible, useCrossModuleBack, useBackHandler, PageHeaderActions } from './chunk-OBIU37AX.js';
+import { useIsWide, Dropdown, DropdownTrigger, DropdownContent, DropdownSeparator, DropdownItem, Card, DataTable } from './chunk-E44WOPCR.js';
 import { cn, Button } from './chunk-OKZ6WQB3.js';
-import * as React14 from 'react';
+import * as React16 from 'react';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, ArrowLeft, Search, ChevronLeft, ChevronRight, MoreHorizontal, ImageIcon, RefreshCw, Clock, Plus, Download, Calendar, Loader2 } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, ArrowLeft, MoreHorizontal, Plus, MoreVertical, Search, ChevronLeft, ChevronRight, ImageIcon, RefreshCw, Clock, Download, Calendar, Loader2 } from 'lucide-react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Toaster } from 'sonner';
 export { toast } from 'sonner';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { useTranslation, getCountry, unmaskPhone, maskPhone, getCurrentLocale } from '@fayz-ai/core';
 import { createPortal } from 'react-dom';
+import { useTranslation, getCountry, unmaskPhone, maskPhone, getCurrentLocale } from '@fayz-ai/core';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-var Input = React14.forwardRef(
+var Input = React16.forwardRef(
   ({ className, type, error, description, id, ...props }, ref) => {
-    const inputId = id ?? React14.useId();
+    const inputId = id ?? React16.useId();
     const descriptionId = description ? `${inputId}-description` : void 0;
     const errorId = error ? `${inputId}-error` : void 0;
     return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
@@ -107,12 +107,12 @@ var Modal = DialogPrimitive.Root;
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalClose = DialogPrimitive.Close;
 var ModalPortal = DialogPrimitive.Portal;
-var ModalOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ModalOverlay = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
     className: cn(
-      "fayz-modal-overlay saas-mdl-ov fixed inset-0 z-50",
+      "fayz-modal-overlay saas-mdl-ov fixed inset-0 z-[100]",
       "flex items-center justify-center p-0 sm:p-6",
       className
     ),
@@ -120,7 +120,7 @@ var ModalOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 ModalOverlay.displayName = "ModalOverlay";
-var ModalContent = React14.forwardRef(({ className, children, size = "lg", hideClose, noPadding, onPointerDownOutside, onInteractOutside, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsx(ModalPortal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(
+var ModalContent = React16.forwardRef(({ className, children, size = "lg", hideClose, noPadding, onPointerDownOutside, onInteractOutside, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsx(ModalPortal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(
   DialogPrimitive.Content,
   {
     ref,
@@ -146,7 +146,7 @@ var ModalContent = React14.forwardRef(({ className, children, size = "lg", hideC
       // fz-container: a form inside a dialog measures the DIALOG. Without
       // it a two-column field grid in an `sm` modal read the window's width
       // and kept both columns in 380px.
-      "fayz-glass-surface fayz-modal-content saas-mdl-ct fz-container relative z-50 flex flex-col w-full outline-none",
+      "fayz-glass-surface fayz-modal-content saas-mdl-ct fz-container relative z-[100] flex flex-col w-full outline-none",
       // Mobile fullscreen
       "h-full rounded-none border-0",
       // Desktop centered card
@@ -173,16 +173,16 @@ function ModalBody({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto min-h-0", className), ...props });
 }
 function ModalFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 shrink-0", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col-reverse gap-2 sm:mt-0 sm:flex-row sm:justify-end sm:gap-0 sm:space-x-2 shrink-0", className), ...props });
 }
-var ModalTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props }));
+var ModalTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props }));
 ModalTitle.displayName = "ModalTitle";
-var ModalDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var ModalDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 ModalDescription.displayName = "ModalDescription";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -198,7 +198,7 @@ var SelectTrigger = React14.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -211,7 +211,7 @@ var SelectScrollUpButton = React14.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -224,12 +224,12 @@ var SelectScrollDownButton = React14.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React14.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React16.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
     className: cn(
-      "fayz-glass-surface relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-card border bg-popover text-popover-foreground shadow-md",
+      "fayz-glass-surface relative z-[110] max-h-96 min-w-[8rem] overflow-hidden rounded-card border bg-popover text-popover-foreground shadow-md",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -252,7 +252,7 @@ var SelectContent = React14.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -261,7 +261,7 @@ var SelectLabel = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -277,7 +277,7 @@ var SelectItem = React14.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -315,7 +315,7 @@ function ToastProvider({
   );
 }
 var Tabs = TabsPrimitive.Root;
-var TabsList = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -329,7 +329,7 @@ var TabsList = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -341,7 +341,7 @@ var TabsTrigger = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -353,7 +353,7 @@ var TabsContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
-var Separator2 = React14.forwardRef(
+var Separator2 = React16.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -404,7 +404,7 @@ function formatPhone(digits, fallback, countryCode) {
   const tail = rest.length === 9 ? rest.slice(5) : rest.slice(4);
   return `+55 (${ddd}) ${head}-${tail}`;
 }
-var PhoneLink = React14.forwardRef(
+var PhoneLink = React16.forwardRef(
   ({ phone, message, countryCode, raw, className, children, ...props }, ref) => {
     const { e164, display } = normalizePhone(phone, countryCode);
     const label = children ?? (raw ? phone ?? "" : display);
@@ -428,6 +428,20 @@ var PhoneLink = React14.forwardRef(
   }
 );
 PhoneLink.displayName = "PhoneLink";
+var WHATSAPP_BRAND_COLOR = "#25D366";
+function WhatsAppIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" })
+    }
+  );
+}
 function Breadcrumb({ parent, current, onBack }) {
   const { onBack: effectiveOnBack, parentLabel: effectiveParent } = useCrossModuleBack(onBack, parent);
   useBackHandler(effectiveOnBack);
@@ -453,19 +467,292 @@ function Breadcrumb({ parent, current, onBack }) {
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React14.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React16.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "fayz-glass-surface z-50 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",
+      "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;
+function iconOf(action, className) {
+  const Icon2 = action.icon;
+  return Icon2 ? /* @__PURE__ */ jsx(Icon2, { 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) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        onClick: () => void a.onSelect(),
+        disabled: a.disabled,
+        "aria-label": a.label,
+        title: 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(
+          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(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] = React16.useState(open);
+  const [visible, setVisible] = React16.useState(open);
+  React16.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] = React16.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 Icon2 = 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(Icon2, { 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;
+}
+var INLINE_LIMIT = 2;
+function RowActions({
+  actions,
+  className,
+  inlineLimit = INLINE_LIMIT
+}) {
+  const visible = actions.filter((a) => !a.hidden);
+  if (visible.length === 0) return null;
+  const safe = visible.filter((a) => a.intent !== "danger");
+  const danger = visible.filter((a) => a.intent === "danger");
+  const inline = danger.length === 0 && safe.length <= inlineLimit ? safe : safe.slice(0, 0);
+  const overflow = visible.filter((a) => !inline.includes(a));
+  const stop = (e) => e.stopPropagation();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center justify-end gap-0.5", className), onClick: stop, children: [
+    inline.map((a) => {
+      const Icon2 = a.icon;
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "fz-tap text-muted-foreground",
+          onClick: () => void a.onSelect(),
+          disabled: a.disabled,
+          "aria-label": a.label,
+          title: a.label,
+          "data-testid": a.testId,
+          children: Icon2 ? /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" }) : null
+        },
+        a.id
+      );
+    }),
+    overflow.length > 0 && /* @__PURE__ */ jsxs(Dropdown, { children: [
+      /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "fz-tap text-muted-foreground",
+          "aria-label": rowActionsLabel,
+          children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownContent, { align: "end", className: "w-52", children: overflow.map((a, i) => {
+        const Icon2 = a.icon;
+        const isDanger = a.intent === "danger";
+        const prevSafe = i > 0 && overflow[i - 1].intent !== "danger";
+        return /* @__PURE__ */ jsxs(React16.Fragment, { children: [
+          isDanger && prevSafe && /* @__PURE__ */ jsx(DropdownSeparator, {}),
+          /* @__PURE__ */ jsxs(
+            DropdownItem,
+            {
+              disabled: a.disabled,
+              onSelect: () => void a.onSelect(),
+              "data-testid": a.testId,
+              className: cn("gap-2", isDanger && "text-destructive focus:text-destructive"),
+              children: [
+                Icon2 ? /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }) : null,
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: a.label })
+              ]
+            }
+          )
+        ] }, a.id);
+      }) })
+    ] })
+  ] });
+}
+var rowActionsLabel = "A\xE7\xF5es";
+function setRowActionsLabel(label) {
+  rowActionsLabel = label;
+}
 function SearchField({ value, onChange, placeholder, ...rest }) {
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
@@ -621,8 +908,8 @@ var ICON_CLASSES = {
   lg: "h-5 w-5"
 };
 function Thumbnail({ src, alt = "", size = "md", icon: Icon2 = ImageIcon, className }) {
-  const [failed, setFailed] = React14.useState(false);
-  React14.useEffect(() => {
+  const [failed, setFailed] = React16.useState(false);
+  React16.useEffect(() => {
     setFailed(false);
   }, [src]);
   const base = cn("shrink-0 overflow-hidden", SIZE_CLASSES[size], className);
@@ -649,9 +936,9 @@ function Thumbnail({ src, alt = "", size = "md", icon: Icon2 = ImageIcon, classN
 }
 Thumbnail.displayName = "Thumbnail";
 function RefreshButton({ onRefresh, fromCache, label, labelCached, className, ...rest }) {
-  const [phase, setPhase] = React14.useState("idle");
-  const alive = React14.useRef(true);
-  React14.useEffect(() => () => {
+  const [phase, setPhase] = React16.useState("idle");
+  const alive = React16.useRef(true);
+  React16.useEffect(() => () => {
     alive.current = false;
   }, []);
   const title = fromCache ? labelCached ?? label : label;
@@ -669,16 +956,20 @@ function RefreshButton({ onRefresh, fromCache, label, labelCached, className, ..
     }, 1400);
   }
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
       type: "button",
+      variant: "ghost",
+      size: "icon",
       title,
       "aria-label": title,
       onClick: () => {
         void run();
       },
       className: cn(
-        "inline-flex items-center justify-center transition",
+        // The state colours are the point of this control, so they stay; what
+        // it was missing is the shared button underneath them.
+        "transition",
         fromCache && phase !== "done" && "text-amber-600 hover:text-amber-700 dark:text-amber-500 dark:hover:text-amber-400",
         phase === "done" && "text-emerald-600 dark:text-emerald-500",
         className
@@ -741,8 +1032,8 @@ function StatTiles({ tiles, loading, className }) {
     ] }, tile.id);
   }) });
 }
-var Hint = React14.forwardRef(function Hint2({ label, children, side = "top", delayDuration = 0, ...rest }, ref) {
-  if (!label) return React14.cloneElement(children, { ...rest, ref });
+var Hint = React16.forwardRef(function Hint2({ label, children, side = "top", delayDuration = 0, ...rest }, ref) {
+  if (!label) return React16.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 })
@@ -869,27 +1160,27 @@ function useRowSelection({
   getRowId,
   enabled = true
 }) {
-  const identify = React14.useCallback(
+  const identify = React16.useCallback(
     (row) => getRowId ? getRowId(row) : String(row?.id ?? ""),
     [getRowId]
   );
-  const visible = React14.useMemo(() => rows ?? [], [rows]);
-  const [rawSelection, setRawSelection] = React14.useState([]);
-  const visibleIds = React14.useMemo(() => new Set(visible.map(identify)), [visible, identify]);
-  const selectedIds = React14.useMemo(
+  const visible = React16.useMemo(() => rows ?? [], [rows]);
+  const [rawSelection, setRawSelection] = React16.useState([]);
+  const visibleIds = React16.useMemo(() => new Set(visible.map(identify)), [visible, identify]);
+  const selectedIds = React16.useMemo(
     () => rawSelection.filter((id) => visibleIds.has(id)),
     [rawSelection, visibleIds]
   );
-  const selectedRows = React14.useMemo(() => {
+  const selectedRows = React16.useMemo(() => {
     const picked = new Set(selectedIds);
     return visible.filter((row) => picked.has(identify(row)));
   }, [visible, selectedIds, identify]);
-  const clear = React14.useCallback(() => setRawSelection([]), []);
-  const selectAll = React14.useCallback(
+  const clear = React16.useCallback(() => setRawSelection([]), []);
+  const selectAll = React16.useCallback(
     () => setRawSelection(visible.map(identify)),
     [visible, identify]
   );
-  const barActions = React14.useMemo(
+  const barActions = React16.useMemo(
     () => (actions ?? []).map((action) => ({
       id: action.id,
       label: action.label,
@@ -948,7 +1239,7 @@ function FilterChip({ allLabel, options, value, onChange, label, icon: Icon2, cl
     ] })
   ] });
 }
-var ICON_BTN = "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+var ICON_BTN = "fz-tap text-muted-foreground";
 function ListView({
   columns,
   data,
@@ -982,7 +1273,8 @@ function ListView({
   exportLabel = "Export",
   onRefresh,
   refreshLabel = "Refresh",
-  className
+  className,
+  actions
 }) {
   const [internalSearch, setInternalSearch] = useState(controlledSearch ?? "");
   const debounceRef = useRef();
@@ -1023,12 +1315,17 @@ function ListView({
     ] })
   ] });
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    (headerActions || onNew && newLabel) && /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    (headerActions || actions?.length || onNew && newLabel) && /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       headerActions,
-      onNew && newLabel && /* @__PURE__ */ jsxs(Button, { variant: "default", size: "default", onClick: onNew, className: "shrink-0", children: [
-        /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
-        newLabel
-      ] })
+      /* @__PURE__ */ jsx(
+        PageActionBar,
+        {
+          actions: [
+            ...actions ?? [],
+            ...onNew && newLabel ? [{ id: "new", label: newLabel, icon: Plus, intent: "primary", onSelect: onNew }] : []
+          ]
+        }
+      )
     ] }) }),
     toolbar,
     /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
@@ -1059,8 +1356,8 @@ function ListView({
         (tagFilter || filters || onRefresh || onExport) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2", children: [
           tagFilter,
           filters,
-          onRefresh && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": refreshLabel, title: refreshLabel, onClick: onRefresh, className: ICON_BTN, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
-          onExport && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": exportLabel, title: exportLabel, onClick: onExport, className: ICON_BTN, children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) })
+          onRefresh && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": refreshLabel, title: refreshLabel, onClick: onRefresh, className: ICON_BTN, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
+          onExport && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": exportLabel, title: exportLabel, onClick: onExport, className: ICON_BTN, children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) })
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(
@@ -1298,7 +1595,7 @@ function DatePicker({ value, onChange, className, variant = "input", defaultOpen
     )
   ] });
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React14.useLayoutEffect : React14.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React16.useLayoutEffect : React16.useEffect;
 function SearchSelect({
   value,
   displayValue,
@@ -1321,18 +1618,18 @@ function SearchSelect({
   disabled
 }) {
   const canCreate = !!onCreate && allowCreate !== false;
-  const [open, setOpen] = React14.useState(false);
-  const [query, setQuery] = React14.useState("");
-  const [results, setResults] = React14.useState([]);
-  const [loading, setLoading] = React14.useState(false);
-  const [creating, setCreating] = React14.useState(false);
-  const [selectedLabel, setSelectedLabel] = React14.useState(displayValue ?? "");
-  const containerRef = React14.useRef(null);
-  const inputRef = React14.useRef(null);
-  const timerRef = React14.useRef();
-  const [rect, setRect] = React14.useState(null);
-  const dropdownRef = React14.useRef(null);
-  React14.useEffect(() => {
+  const [open, setOpen] = React16.useState(false);
+  const [query, setQuery] = React16.useState("");
+  const [results, setResults] = React16.useState([]);
+  const [loading, setLoading] = React16.useState(false);
+  const [creating, setCreating] = React16.useState(false);
+  const [selectedLabel, setSelectedLabel] = React16.useState(displayValue ?? "");
+  const containerRef = React16.useRef(null);
+  const inputRef = React16.useRef(null);
+  const timerRef = React16.useRef();
+  const [rect, setRect] = React16.useState(null);
+  const dropdownRef = React16.useRef(null);
+  React16.useEffect(() => {
     function handler(e) {
       const target = e.target;
       if (containerRef.current?.contains(target)) return;
@@ -1342,10 +1639,10 @@ function SearchSelect({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, []);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     if (displayValue !== void 0) setSelectedLabel(displayValue);
   }, [displayValue]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     if (open && loadOnOpen && query.length === 0 && results.length === 0 && !loading) {
       setLoading(true);
       Promise.resolve(onSearch("")).then(setResults).catch(() => setResults([])).finally(() => setLoading(false));
@@ -1403,7 +1700,7 @@ function SearchSelect({
     setResults([]);
     setTimeout(() => inputRef.current?.focus(), 0);
   }
-  const groups = React14.useMemo(() => {
+  const groups = React16.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const opt of results) {
       const group = opt.group ?? "";
@@ -1498,7 +1795,7 @@ function SearchSelect({
               /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
               " ",
               searchingLabel
-            ] }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: noResultsLabel ?? (query ? `No results for "${query}"` : "No results") }) }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto py-1", children: [...groups.entries()].map(([group, options]) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+            ] }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: noResultsLabel ?? (query ? `No results for "${query}"` : "No results") }) }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto py-1", children: [...groups.entries()].map(([group, options]) => /* @__PURE__ */ jsxs(React16.Fragment, { children: [
               group && /* @__PURE__ */ jsx("div", { className: "sticky top-0 bg-muted/50 px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
               options.map((opt) => /* @__PURE__ */ jsx(
                 "button",
@@ -1560,9 +1857,9 @@ function CurrencyInput({
   className,
   disabled
 }) {
-  const inputRef = React14.useRef(null);
-  const [focused, setFocused] = React14.useState(false);
-  const format = React14.useCallback((v) => {
+  const inputRef = React16.useRef(null);
+  const [focused, setFocused] = React16.useState(false);
+  const format = React16.useCallback((v) => {
     return new Intl.NumberFormat(locale, {
       minimumFractionDigits: 2,
       maximumFractionDigits: 2
@@ -1635,7 +1932,7 @@ function CurrencyInput({
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React14.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React16.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1708,7 +2005,7 @@ function renderInline(text, keyPrefix) {
     if (part.startsWith("`") && part.endsWith("`") && part.length > 2) {
       return /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]", children: part.slice(1, -1) }, key);
     }
-    return part === "" ? null : /* @__PURE__ */ jsx(React14.Fragment, { children: part }, key);
+    return part === "" ? null : /* @__PURE__ */ jsx(React16.Fragment, { children: part }, key);
   });
 }
 function parseBlocks(source) {
@@ -1792,7 +2089,7 @@ function renderMarkdown(source) {
       case "ol":
         return /* @__PURE__ */ jsx("ol", { className: "list-decimal space-y-1 pl-5", children: block.items.map((item, li) => /* @__PURE__ */ jsx("li", { children: renderInline(item, `${key}-${li}`) }, `${key}-${li}`)) }, key);
       case "p":
-        return /* @__PURE__ */ jsx("p", { children: block.lines.map((l, li) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+        return /* @__PURE__ */ jsx("p", { children: block.lines.map((l, li) => /* @__PURE__ */ jsxs(React16.Fragment, { children: [
           li > 0 && /* @__PURE__ */ jsx("br", {}),
           renderInline(l, `${key}-${li}`)
         ] }, `${key}-${li}`)) }, key);
@@ -1813,7 +2110,7 @@ function MarkdownEditor({
   renderPreview,
   className
 }) {
-  const [mode, setMode] = React14.useState(
+  const [mode, setMode] = React16.useState(
     defaultMode === "preview" && value.trim() === "" ? "edit" : defaultMode
   );
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
@@ -2074,6 +2371,6 @@ function SearchCombobox({
   ] });
 }
 
-export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, FilterChip, Hint, Input, ListView, Markdown, MarkdownEditor, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, PhoneField, PhoneLink, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RefreshButton, SearchCombobox, SearchField, SearchSelect, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, StatTiles, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, formatPhone2 as formatPhone, normalizePhone, renderMarkdown, useRowSelection };
-//# sourceMappingURL=chunk-SLWTKHNY.js.map
-//# sourceMappingURL=chunk-SLWTKHNY.js.map
+export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, FilterChip, Hint, Input, ListView, Markdown, MarkdownEditor, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, PageActionBar, PhoneField, PhoneLink, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RefreshButton, RowActions, SearchCombobox, SearchField, SearchSelect, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, StatTiles, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WHATSAPP_BRAND_COLOR, WhatsAppIcon, badgeVariants, formatPhone2 as formatPhone, normalizePhone, renderMarkdown, setActionsMenuLabel, setRowActionsLabel, useRowSelection };
+//# sourceMappingURL=chunk-Z2ITFPGL.js.map
+//# sourceMappingURL=chunk-Z2ITFPGL.js.map