@fayz-ai/ui 0.42.0 → 0.43.0

package/dist/{chunk-GG5XY6SF.js → chunk-ZMS7TNJD.js}

@@ -1,14 +1,13 @@
-import { PageViewBar } from './chunk-UKMRHO5B.js';
+import { useIsWide, Dropdown, DropdownTrigger, DropdownContent, DropdownItem, PageViewBar } from './chunk-L6PNGGHM.js';
 import { cn, Button } from './chunk-FKYFYGAS.js';
-import * as React4 from 'react';
+import * as React3 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, ListFilter, X, Calendar, RefreshCw } from 'lucide-react';
+import { Minus, Check, ChevronDown, ChevronRight, ArrowDown, ArrowUp, ArrowUpDown, ListFilter, X, Calendar, RefreshCw } from 'lucide-react';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { useTranslation } from '@fayz-ai/core';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -20,7 +19,7 @@ var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -29,7 +28,7 @@ var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -41,7 +40,7 @@ var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -50,9 +49,9 @@ var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
+var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -61,147 +60,13 @@ var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardFooter.displayName = "CardFooter";
-var Dropdown = DropdownMenuPrimitive.Root;
-var DropdownTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownGroup = DropdownMenuPrimitive.Group;
-var DropdownPortal = DropdownMenuPrimitive.Portal;
-var DropdownSub = DropdownMenuPrimitive.Sub;
-var DropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default select-none items-center rounded-button px-2 py-1.5 text-sm outline-none focus:bg-muted data-[state=open]:bg-muted",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
-DropdownSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownSubContent = React4.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.
-  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.SubContent,
-    {
-      ref,
-      className: cn(
-        "fayz-glass-surface z-[110] min-w-[8rem] overflow-hidden rounded-card border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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
-    }
-  ) })
-));
-DropdownSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "fayz-glass-surface z-[110] min-w-[8rem] overflow-hidden rounded-card border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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
-  }
-) }));
-DropdownContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownItem = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-button px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownCheckboxItem = React4.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      children
-    ]
-  }
-));
-DropdownCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownRadioItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownLabel = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-DropdownSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var DropdownShortcut = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...props
-    }
-  );
-};
-DropdownShortcut.displayName = "DropdownShortcut";
 var COLOR_CLASSES = {
   primary: "border-primary bg-primary text-primary-foreground",
   success: "border-success bg-success text-white dark:border-success dark:bg-success",
   warning: "border-warning bg-warning text-white",
   destructive: "border-destructive bg-destructive text-destructive-foreground"
 };
-var Checkbox = React4.forwardRef(
+var Checkbox = React3.forwardRef(
   ({ checked = false, onChange, disabled, className, color = "primary", id, indeterminate = false, ...props }, ref) => {
     const filled = checked || indeterminate;
     return /* @__PURE__ */ jsx(
@@ -243,9 +108,11 @@ function DataTable({
   onSelectedIdsChange,
   getRowId,
   rowClassName,
-  groupBy
+  groupBy,
+  mobileLayout = "table"
 }) {
   const t = useTranslation();
+  const wide = useIsWide();
   const isCard = variant === "card";
   const wrapperCls = isCard ? "overflow-hidden rounded-card border bg-card shadow-sm" : variant === "bare" ? "" : "overflow-hidden rounded-lg border";
   const headerCls = isCard ? "border-b bg-muted/50" : variant === "bare" ? "border-b bg-muted/30 rounded-none" : "border-b bg-muted/30";
@@ -253,37 +120,37 @@ 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] = React4.useState([]);
-  const [ownCollapsed, setOwnCollapsed] = React4.useState([]);
+  const [sorting, setSorting] = React3.useState([]);
+  const [ownCollapsed, setOwnCollapsed] = React3.useState([]);
   const collapsedKeys = groupBy?.collapsed ?? ownCollapsed;
-  const collapsed = React4.useMemo(() => new Set(collapsedKeys), [collapsedKeys]);
+  const collapsed = React3.useMemo(() => new Set(collapsedKeys), [collapsedKeys]);
   const onCollapsedChange = groupBy?.onCollapsedChange;
-  const toggleGroup = React4.useCallback((key) => {
+  const toggleGroup = React3.useCallback((key) => {
     const next = collapsed.has(key) ? [...collapsed].filter((k) => k !== key) : [...collapsed, key];
     if (onCollapsedChange) onCollapsedChange(next);
     else setOwnCollapsed(next);
   }, [collapsed, onCollapsedChange]);
-  const rowId = React4.useCallback(
+  const rowId = React3.useCallback(
     (row) => getRowId ? getRowId(row) : String(row.id ?? ""),
     [getRowId]
   );
-  const selected = React4.useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
-  const pageIds = React4.useMemo(() => data.map(rowId), [data, rowId]);
+  const selected = React3.useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
+  const pageIds = React3.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 = React4.useCallback((id) => {
+  const toggleRow = React3.useCallback((id) => {
     const next = new Set(selected);
     if (next.has(id)) next.delete(id);
     else next.add(id);
     onSelectedIdsChange?.([...next]);
   }, [selected, onSelectedIdsChange]);
-  const toggleAllOnPage = React4.useCallback(() => {
+  const toggleAllOnPage = React3.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 = React4.useMemo(() => ({
+  const selectionColumn = React3.useMemo(() => ({
     id: "__select__",
     enableSorting: false,
     header: () => /* @__PURE__ */ jsx(
@@ -310,7 +177,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 = React4.useMemo(
+  const allColumns = React3.useMemo(
     () => selectable ? [selectionColumn, ...columns] : columns,
     [selectable, selectionColumn, columns]
   );
@@ -322,9 +189,9 @@ function DataTable({
     onSortingChange: setSorting,
     state: { sorting }
   });
-  const [tableEl, setTableEl] = React4.useState(null);
-  const headScrollRef = React4.useRef(null);
-  const [scrollEl, setScrollEl] = React4.useState(null);
+  const [tableEl, setTableEl] = React3.useState(null);
+  const headScrollRef = React3.useRef(null);
+  const [scrollEl, setScrollEl] = React3.useState(null);
   const overflowing = useOverflowX(scrollEl);
   const floating = useFloatingHeader(tableEl, [data, allColumns, collapsed, sorting]);
   const pinnedCls = cn("sticky right-0 z-[1]", overflowing && "before:pointer-events-none before:absolute before:inset-y-0 before:-left-8 before:w-8 before:bg-[linear-gradient(to_left,var(--pin-bg),transparent)] before:content-['']");
@@ -338,6 +205,18 @@ function DataTable({
     background: "var(--pin-bg)"
   });
   const groupBandBackground = "linear-gradient(hsl(var(--muted) / 0.4), hsl(var(--muted) / 0.4)), hsl(var(--card))";
+  if (loading && mobileLayout === "cards" && !wide) {
+    return /* @__PURE__ */ jsx("div", { className: isCard ? "space-y-2" : "divide-y", "aria-busy": true, children: Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: cn("px-4 py-3", isCard && "rounded-card border bg-card shadow-sm"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-h-8 items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-2/5 animate-pulse rounded bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-9 animate-pulse rounded-full bg-muted" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2.5 grid grid-cols-2 gap-x-4 gap-y-2.5", children: [0, 1].map((j) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-14 animate-pulse rounded bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1.5 h-3.5 w-24 animate-pulse rounded bg-muted" })
+      ] }, j)) })
+    ] }, i)) });
+  }
   if (loading) {
     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: /* @__PURE__ */ jsx("tr", { className: headerCls, children: allColumns.map((_, i) => /* @__PURE__ */ jsx("th", { className: thCls, children: /* @__PURE__ */ jsx("div", { className: "h-3.5 w-20 animate-pulse rounded bg-muted" }) }, i)) }) }),
@@ -348,6 +227,82 @@ function DataTable({
   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 }) });
   }
+  if (mobileLayout === "cards" && !wide) {
+    const headerOf = new Map(table.getFlatHeaders().map((h) => [h.column.id, h]));
+    const renderCard = (row) => {
+      const isSelected = selectable && selected.has(rowId(row.original));
+      const cells = row.getVisibleCells();
+      const select = cells.find((c) => c.column.id === "__select__");
+      const actions = cells.filter((c) => c.column.id !== "__select__" && isPinned(c.column) && !isMobileHidden(c.column));
+      const fields = cells.filter((c) => c.column.id !== "__select__" && !isPinned(c.column) && !isMobileHidden(c.column));
+      const title = fields.find((c) => mobileRole(c.column) === "title") ?? fields[0];
+      const badges = fields.filter((c) => c !== title && mobileRole(c.column) === "badge");
+      const rest = fields.filter((c) => c !== title && !badges.includes(c) && !isEmptyCell(c));
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: onRowClick ? "button" : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
+          onClick: () => onRowClick?.(row.original),
+          onKeyDown: (e) => {
+            if (onRowClick && e.key === "Enter") onRowClick(row.original);
+          },
+          "data-selected": isSelected || void 0,
+          "data-scrim-focus": true,
+          className: cn(
+            "flex gap-3 px-4 py-3 text-sm transition-colors",
+            isCard && "rounded-card border bg-card shadow-sm",
+            onRowClick && "cursor-pointer active:bg-muted/40",
+            isSelected && "bg-muted/40",
+            rowClassName?.(row.original)
+          ),
+          children: [
+            select && /* @__PURE__ */ jsx("div", { className: "flex h-8 items-center", onClick: (e) => e.stopPropagation(), children: flexRender(select.column.columnDef.cell, select.getContext()) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex min-h-8 min-w-0 flex-1 items-center font-medium", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 max-w-full truncate [&_*]:truncate [&_img]:shrink-0 [&_svg]:shrink-0", children: title && flexRender(title.column.columnDef.cell, title.getContext()) }) }),
+                (badges.length > 0 || actions.length > 0) && /* @__PURE__ */ jsxs("div", { className: "-mr-2 flex min-h-8 shrink-0 items-center gap-3", onClick: (e) => e.stopPropagation(), children: [
+                  badges.map((c) => /* @__PURE__ */ jsx(React3.Fragment, { children: flexRender(c.column.columnDef.cell, c.getContext()) }, c.id)),
+                  actions.map((c) => /* @__PURE__ */ jsx(React3.Fragment, { children: flexRender(c.column.columnDef.cell, c.getContext()) }, c.id))
+                ] })
+              ] }),
+              rest.length > 0 && // Two columns of label-over-value. Cells written for a table align
+              // themselves right or centre; in a card every value reads from the left.
+              /* @__PURE__ */ jsx("dl", { className: "mt-2.5 grid grid-cols-2 gap-x-4 gap-y-2.5 [&_.text-center]:text-left [&_.text-right]:text-left", children: rest.map((c) => {
+                const header = headerOf.get(c.column.id);
+                return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: header ? flexRender(header.column.columnDef.header, header.getContext()) : null }),
+                  /* @__PURE__ */ jsx("dd", { className: "mt-0.5 min-w-0", children: flexRender(c.column.columnDef.cell, c.getContext()) })
+                ] }, c.id);
+              }) })
+            ] })
+          ]
+        },
+        row.id
+      );
+    };
+    return /* @__PURE__ */ jsx("div", { className: isCard ? "space-y-2" : "divide-y", children: groupRows(table.getRowModel().rows, groupBy).flatMap((group) => {
+      if (!group) return table.getRowModel().rows.map(renderCard);
+      const isCollapsed = collapsed.has(group.key);
+      return [
+        /* @__PURE__ */ jsx("div", { className: "border-b bg-muted/40 text-sm", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-2 px-4 py-2 text-left font-medium text-foreground",
+            onClick: () => toggleGroup(group.key),
+            "aria-expanded": !isCollapsed,
+            children: [
+              isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: group.key ? groupBy?.renderLabel?.(group.key, group.rows.map((r) => r.original)) ?? group.key : groupBy?.emptyLabel ?? "\u2014" }),
+              /* @__PURE__ */ jsx("span", { className: "rounded-full bg-background px-2 py-0.5 text-[11px] font-medium tabular-nums text-muted-foreground", children: group.rows.length })
+            ]
+          }
+        ) }, `__group__${group.key}`),
+        ...isCollapsed ? [] : group.rows.map(renderCard)
+      ];
+    }) });
+  }
   const headerRows = /* @__PURE__ */ jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: headerCls, children: headerGroup.headers.map((header) => {
     const sorted = header.column.getIsSorted();
     return /* @__PURE__ */ jsx(
@@ -486,6 +441,17 @@ var truncateCls = "max-w-[20rem] truncate [&_*]:truncate";
 function isTruncated(column) {
   return !!column.columnDef.meta?.truncate;
 }
+function isEmptyCell(cell) {
+  if (!cell.column.accessorFn) return false;
+  const value = cell.getValue();
+  return value == null || value === "" || Array.isArray(value) && value.length === 0;
+}
+function mobileRole(column) {
+  return column.columnDef.meta?.mobile;
+}
+function isMobileHidden(column) {
+  return mobileRole(column) === "hidden";
+}
 function showFullTextOnHover(e) {
   const el = e.currentTarget;
   const clipped = el.scrollWidth > el.clientWidth || [...el.querySelectorAll("*")].some((c) => c.scrollWidth > c.clientWidth);
@@ -496,8 +462,8 @@ function isPinned(column) {
   return column.id === "actions" || column.columnDef.meta?.pin === "right";
 }
 function useOverflowX(el) {
-  const [overflowing, setOverflowing] = React4.useState(false);
-  React4.useEffect(() => {
+  const [overflowing, setOverflowing] = React3.useState(false);
+  React3.useEffect(() => {
     if (!el) return;
     const check = () => setOverflowing(el.scrollWidth > el.clientWidth + 1);
     check();
@@ -509,8 +475,8 @@ function useOverflowX(el) {
   return overflowing;
 }
 function useFloatingHeader(table, deps) {
-  const [state, setState] = React4.useState({ widths: [], tableWidth: 0, headH: 0, bandH: 0, activeGroup: null });
-  const measure = React4.useCallback(() => {
+  const [state, setState] = React3.useState({ widths: [], tableWidth: 0, headH: 0, bandH: 0, activeGroup: null });
+  const measure = React3.useCallback(() => {
     if (!table?.tHead) return;
     const cells = [...table.tHead.rows[0]?.cells ?? []];
     const widths = cells.map((c) => c.getBoundingClientRect().width);
@@ -535,10 +501,10 @@ function useFloatingHeader(table, deps) {
     }
     setState((prev) => prev.tableWidth === tableWidth && prev.headH === headH && prev.bandH === bandH && prev.activeGroup === activeGroup && prev.widths.length === widths.length && prev.widths.every((w, i) => w === widths[i]) ? prev : { widths, tableWidth, headH, bandH, activeGroup });
   }, [table]);
-  React4.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
     measure();
   }, [measure, ...deps]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (!table) return;
     let frame = 0;
     const schedule = () => {
@@ -569,19 +535,6 @@ function groupRows(rows, groupBy) {
   }
   return [...byKey.entries()].sort(([a], [b]) => a === "" ? 1 : b === "" ? -1 : a.localeCompare(b, void 0, { sensitivity: "base" })).map(([key, list]) => ({ key, rows: list }));
 }
-var WIDE_QUERY = "(min-width: 768px)";
-function useIsWide(query = WIDE_QUERY) {
-  const [wide, setWide] = React4.useState(
-    () => typeof window === "undefined" ? true : window.matchMedia(query).matches
-  );
-  React4.useEffect(() => {
-    const mq = window.matchMedia(query);
-    const onChange = () => setWide(mq.matches);
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, [query]);
-  return wide;
-}
 function Skeleton({
   className,
   ...props
@@ -612,14 +565,14 @@ function TableSkeleton({ columns = 4, rows = 2 }) {
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React4.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React3.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",
+      "fayz-glass-surface fz-menu-glass 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
     ),
@@ -644,14 +597,14 @@ function FilterMenuRow({ active, onClick, children }) {
   );
 }
 function FilterMenu({ fields, label = "Filtros", activeCount = 0, onClear, clearLabel = "Limpar filtros", header, align = "end", className }) {
-  const [open, setOpen] = React4.useState(false);
-  const [hovered, setHoveredRaw] = React4.useState(null);
-  const [query, setQuery] = React4.useState("");
-  const setHovered = React4.useCallback((id) => {
+  const [open, setOpen] = React3.useState(false);
+  const [hovered, setHoveredRaw] = React3.useState(null);
+  const [query, setQuery] = React3.useState("");
+  const setHovered = React3.useCallback((id) => {
     setHoveredRaw(id);
     setQuery("");
   }, []);
-  const close = React4.useCallback(() => setOpen(false), []);
+  const close = React3.useCallback(() => setOpen(false), []);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (o) => {
     setOpen(o);
     if (!o) setHovered(null);
@@ -747,18 +700,18 @@ function FilterMenu({ fields, label = "Filtros", activeCount = 0, onClear, clear
     ] })
   ] });
 }
-var ToolbarSurfaceContext = React4.createContext({
+var ToolbarSurfaceContext = React3.createContext({
   surface: "bar",
   close: () => {
   }
 });
 function useToolbarSurface() {
-  return React4.useContext(ToolbarSurfaceContext).surface;
+  return React3.useContext(ToolbarSurfaceContext).surface;
 }
 function useToolbarPanelClose() {
-  return React4.useContext(ToolbarSurfaceContext).close;
+  return React3.useContext(ToolbarSurfaceContext).close;
 }
-var ToolbarButton = React4.forwardRef(function ToolbarButton2({ icon: Icon, caret = true, children, className, ...props }, ref) {
+var ToolbarButton = React3.forwardRef(function ToolbarButton2({ icon: Icon, caret = true, children, className, ...props }, ref) {
   const panel = useToolbarSurface() === "panel";
   if (panel) {
     return /* @__PURE__ */ jsxs(
@@ -802,7 +755,7 @@ var ToolbarButton = React4.forwardRef(function ToolbarButton2({ icon: Icon, care
     }
   );
 });
-var ToolbarAction = React4.forwardRef(function ToolbarAction2({ icon: Icon, caret = false, children, className, ...props }, ref) {
+var ToolbarAction = React3.forwardRef(function ToolbarAction2({ icon: Icon, caret = false, children, className, ...props }, ref) {
   const panel = useToolbarSurface() === "panel";
   if (panel) {
     return /* @__PURE__ */ jsxs(
@@ -880,8 +833,8 @@ function PageToolbar({
   className
 }) {
   const wide = useIsWide();
-  const [open, setOpen] = React4.useState(false);
-  const panelSurface = React4.useMemo(
+  const [open, setOpen] = React3.useState(false);
+  const panelSurface = React3.useMemo(
     () => ({ surface: "panel", close: () => setOpen(false) }),
     []
   );
@@ -947,6 +900,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, FilterMenu, FilterMenuRow, PageToolbar, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RangeControl, Skeleton, TOOLBAR_ICON_DOT, TOOLBAR_ICON_TRIGGER, TableSkeleton, ToolbarAction, ToolbarButton, WIDE_QUERY, useIsWide, useToolbarPanelClose, useToolbarSurface };
-//# sourceMappingURL=chunk-GG5XY6SF.js.map
-//# sourceMappingURL=chunk-GG5XY6SF.js.map
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, FilterMenu, FilterMenuRow, PageToolbar, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RangeControl, Skeleton, TOOLBAR_ICON_DOT, TOOLBAR_ICON_TRIGGER, TableSkeleton, ToolbarAction, ToolbarButton, useToolbarPanelClose, useToolbarSurface };
+//# sourceMappingURL=chunk-ZMS7TNJD.js.map
+//# sourceMappingURL=chunk-ZMS7TNJD.js.map