@snksergio/design-system 0.19.1 → 0.30.2

package/dist-lib/chunks/{panel-BCUixETK.mjs → panel-CEkyoGiO.mjs}

@@ -3,16 +3,15 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { forwardRef, createContext, useContext, useState, useMemo as useMemo$1, useId, useEffect, useRef, useCallback as useCallback$1, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
+import React__default, { forwardRef, createContext, useContext, useId, useState, useRef, useCallback as useCallback$1, useEffect, useMemo as useMemo$1, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, DragOverlay, useDroppable, useDraggable, closestCenter } from "@dnd-kit/core";
 import { useSortable, sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { c as cn, t as tv, B as Button, C as Chip } from "./chip-group-_e-yh1Zq.mjs";
-import { C as Checkbox, e as TableHeadCell, c as TableCell, f as TableRow, T as Table, d as TableHead, a as TableBody, b as TableCardRow } from "./badge-DBdk74KN.mjs";
-import { W as Popover, X as PopoverTrigger, Y as PopoverContent, Z as Command, l as CommandInput, m as CommandList, n as CommandEmpty, o as CommandGroup, p as CommandItem, D as DropdownMenu, c as DropdownMenuTrigger, d as DropdownMenuContent, r as DropdownMenuLabel, f as DropdownMenuSeparator, e as DropdownMenuItem, I as InputGroup, z as InputGroupInput, x as InputGroupAddon, B as InputGroupText, g as Dialog, i as DialogContent, k as DialogClose, j as DialogTitle, _ as DialogDescription, $ as PopoverAnchor, V as useMediaQuery } from "./app-shell-Cy9be0Zx.mjs";
-import { X, CheckCircle2, AlertCircle, AlertTriangle, Info, ChevronDown, Check, Search, CircleX, MoreHorizontal, Filter, ChevronLeft, GripVertical, Pin, PinOff, ArrowUp, ArrowDown, Plus, Trash2, Eye, Users, ChevronUp, ChevronRight, ArrowUpDown, Columns, SlidersHorizontal, Minimize2, Maximize2, Type, Hash, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, ToggleLeft, DollarSign, Percent, AtSign, Phone, Link, ExternalLink, User, Tag, Tags, CalendarClock, ChevronsLeft, ChevronsRight, Inbox, SearchX, FilterX, PinIcon, EyeOff, Loader2, Copy, Rows3, LayoutGrid, Settings2, RefreshCw, Table as Table$1, FileText, List as List$1, Rows4, Rows2 } from "lucide-react";
+import { c as cn, t as tv, B as Button, L as InputGroup, O as InputGroupInput, M as InputGroupAddon, Q as InputGroupText, P as Popover, j as PopoverTrigger, k as PopoverContent, a8 as Command, u as CommandInput, v as CommandList, w as CommandEmpty, x as CommandGroup, y as CommandItem, D as DropdownMenu, f as DropdownMenuTrigger, g as DropdownMenuContent, E as DropdownMenuLabel, i as DropdownMenuSeparator, h as DropdownMenuItem, l as Dialog, n as DialogContent, q as DialogClose, o as DialogTitle, r as DialogDescription, p as PopoverAnchor, C as Chip, a7 as useMediaQuery } from "./app-shell-78w0pYdP.mjs";
+import { X, CheckCircle2, AlertCircle, AlertTriangle, Info, ChevronDown, Minus, Check, ChevronUp, ArrowUp, ArrowDown, ArrowUpDown, Search, CircleX, MoreHorizontal, Filter, ChevronLeft, GripVertical, Pin, PinOff, Plus, Trash2, Eye, Users, ChevronRight, Columns, SlidersHorizontal, Minimize2, Maximize2, Type, Hash, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, ToggleLeft, DollarSign, Percent, AtSign, Phone, Link, ExternalLink, User, Tag, Tags, CalendarClock, ChevronsLeft, ChevronsRight, Inbox, SearchX, FilterX, PinIcon, EyeOff, Loader2, Copy, Rows3, LayoutGrid, Settings2, RefreshCw, Table as Table$1, FileText, List as List$1, Rows4, Rows2 } from "lucide-react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { I as Input } from "./input-C9eKSSEb.mjs";
+import { I as Input } from "./input-DCDU4i4S.mjs";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import ReactDOM, { createPortal, flushSync } from "react-dom";
@@ -420,6 +419,597 @@ const ButtonGroup = Object.assign(ButtonGroupRoot, {
   Primary: ButtonGroupPrimary,
   Chevron: ButtonGroupChevron
 });
+const Checkbox = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref: ref2,
+    className: cn(
+      "peer relative flex size-4 shrink-0 items-center justify-center cursor-pointer",
+      "rounded-radius-xs",
+      "bg-bg-input dark:bg-bg-muted",
+      "border-[1.5px] border-border-input",
+      "transition-[background-color,border-color,box-shadow] outline-none",
+      "hover:border-border-default",
+      "focus-visible:shadow-sh-ring",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-bg-brand data-[state=checked]:border-border-brand",
+      "data-[state=indeterminate]:bg-bg-brand data-[state=indeterminate]:border-border-brand",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("grid place-content-center text-fg-on-brand"),
+        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "size-3", strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { className: "size-3", strokeWidth: 3 })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+const formFieldRoot = tv({
+  base: "flex flex-col gap-[7px] w-full"
+});
+const formFieldLabel = tv({
+  base: [
+    "text-body-sm font-semibold tracking-[0.01em] leading-none",
+    "text-fg-default dark:text-fg-muted",
+    "select-none"
+  ],
+  variants: {
+    disabled: {
+      true: "opacity-50 cursor-not-allowed"
+    }
+  }
+});
+const formFieldRequired = tv({
+  base: "ml-[2px] text-fg-danger"
+});
+const formFieldMessage = tv({
+  base: "text-caption-sm leading-snug",
+  variants: {
+    state: {
+      default: "text-fg-muted",
+      error: "text-fg-danger",
+      warning: "text-fg-warning",
+      success: "text-fg-success"
+    }
+  },
+  defaultVariants: { state: "default" }
+});
+function FormField({
+  label,
+  required: required2,
+  helperText,
+  state = "default",
+  errorMessage,
+  warningMessage,
+  successMessage,
+  className,
+  id: idProp,
+  children,
+  hideLabel,
+  disabled
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  let message = helperText;
+  let messageState = "default";
+  if (state === "error" && errorMessage) {
+    message = errorMessage;
+    messageState = "error";
+  } else if (state === "warning" && warningMessage) {
+    message = warningMessage;
+    messageState = "warning";
+  } else if (state === "success" && successMessage) {
+    message = successMessage;
+    messageState = "success";
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(formFieldRoot(), className), children: [
+    label && !hideLabel && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: formFieldLabel({ disabled }),
+        children: [
+          label,
+          required2 && /* @__PURE__ */ jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+        ]
+      }
+    ),
+    children({ id, state }),
+    message && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: formFieldMessage({ state: messageState }),
+        role: messageState === "error" ? "alert" : void 0,
+        children: message
+      }
+    )
+  ] });
+}
+function renderAddon(content, key) {
+  if (typeof content === "string") {
+    return /* @__PURE__ */ jsx(InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: /* @__PURE__ */ jsx(InputGroupText, { children: content }) }, key);
+  }
+  return /* @__PURE__ */ jsx(InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: content }, key);
+}
+const FormFieldInput = forwardRef(
+  ({
+    label,
+    required: required2,
+    helperText,
+    state,
+    errorMessage,
+    warningMessage,
+    successMessage,
+    className,
+    id,
+    startAddon,
+    endAddon,
+    ...inputProps
+  }, ref2) => {
+    const hasAddon = startAddon !== void 0 || endAddon !== void 0;
+    const { size, ...inputHtmlProps } = inputProps;
+    return /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label,
+        required: required2,
+        helperText,
+        state,
+        errorMessage,
+        warningMessage,
+        successMessage,
+        className,
+        id,
+        disabled: inputProps.disabled,
+        children: ({ id: fieldId, state: fieldState }) => hasAddon ? /* @__PURE__ */ jsxs(InputGroup, { state: fieldState, size: size ?? void 0, children: [
+          startAddon !== void 0 && renderAddon(startAddon, "start"),
+          /* @__PURE__ */ jsx(InputGroupInput, { ref: ref2, id: fieldId, ...inputHtmlProps }),
+          endAddon !== void 0 && renderAddon(endAddon, "end")
+        ] }) : /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: ref2,
+            id: fieldId,
+            state: fieldState,
+            size,
+            ...inputHtmlProps
+          }
+        )
+      }
+    );
+  }
+);
+FormFieldInput.displayName = "FormFieldInput";
+const textareaVariants = cva(
+  [
+    "flex min-h-[100px] w-full resize-y",
+    "bg-bg-input dark:bg-bg-muted",
+    "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover",
+    "border border-border-input rounded-radius-lg",
+    "px-pad-xl py-pad-lg",
+    "text-body-sm font-normal leading-[1.5] text-fg-default",
+    "placeholder:text-fg-muted placeholder:opacity-70",
+    "transition-[color,box-shadow,background-color,border-color] outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-bg-input dark:disabled:hover:bg-bg-muted"
+  ],
+  {
+    variants: {
+      state: {
+        default: "focus-visible:border-border-brand          focus-visible:shadow-sh-ring",
+        error: "border-border-danger-muted  focus-visible:border-border-danger-muted  focus-visible:shadow-sh-ring-danger",
+        warning: "border-border-warning-muted focus-visible:border-border-warning-muted focus-visible:shadow-sh-ring-warning",
+        success: "border-border-success-muted focus-visible:border-border-success-muted focus-visible:shadow-sh-ring-success"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+const Textarea = React.forwardRef(
+  ({ className, state, ...props }, ref2) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(textareaVariants({ state }), className),
+        ref: ref2,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+const FormFieldTextarea = forwardRef(
+  ({
+    label,
+    required: required2,
+    helperText,
+    state,
+    errorMessage,
+    warningMessage,
+    successMessage,
+    className,
+    id,
+    ...textareaProps
+  }, ref2) => /* @__PURE__ */ jsx(
+    FormField,
+    {
+      label,
+      required: required2,
+      helperText,
+      state,
+      errorMessage,
+      warningMessage,
+      successMessage,
+      className,
+      id,
+      disabled: textareaProps.disabled,
+      children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ref: ref2,
+          id: fieldId,
+          state: fieldState,
+          ...textareaProps
+        }
+      )
+    }
+  )
+);
+FormFieldTextarea.displayName = "FormFieldTextarea";
+const Select = SelectPrimitive.Root;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, state = "default", ...props }, ref2) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref: ref2,
+    className: cn(
+      "flex min-h-form-lg w-full items-center justify-between gap-gp-md",
+      "rounded-radius-lg px-pad-xl",
+      "bg-bg-input dark:bg-bg-muted",
+      "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover",
+      "border border-border-input",
+      "text-body-sm font-normal text-fg-default",
+      "transition-[color,box-shadow,background-color,border-color] outline-none",
+      "data-[placeholder]:text-fg-muted data-[placeholder]:opacity-70",
+      state === "default" && "focus-visible:border-border-brand          data-[state=open]:border-border-brand          focus-visible:shadow-sh-ring          data-[state=open]:shadow-sh-ring",
+      state === "error" && "border-border-danger-muted  focus-visible:border-border-danger-muted  data-[state=open]:border-border-danger-muted  focus-visible:shadow-sh-ring-danger  data-[state=open]:shadow-sh-ring-danger",
+      state === "warning" && "border-border-warning-muted focus-visible:border-border-warning-muted data-[state=open]:border-border-warning-muted focus-visible:shadow-sh-ring-warning data-[state=open]:shadow-sh-ring-warning",
+      state === "success" && "border-border-success-muted focus-visible:border-border-success-muted data-[state=open]:border-border-success-muted focus-visible:shadow-sh-ring-success data-[state=open]:shadow-sh-ring-success",
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-bg-input dark:disabled:hover:bg-bg-muted",
+      "[&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-fg-muted shrink-0" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref: ref2,
+    className: cn(
+      "flex cursor-default items-center justify-center py-pad-xs",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref: ref2,
+    className: cn(
+      "flex cursor-default items-center justify-center py-pad-xs",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position: position2 = "popper", ...props }, ref2) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref: ref2,
+    className: cn(
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden",
+      "rounded-[12px] bg-bg-dropdown border border-border-default shadow-sh-lg outline-float",
+      "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150",
+      "text-fg-default",
+      "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",
+      "origin-[--radix-select-content-transform-origin]",
+      position2 === "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
+    ),
+    position: position2,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-pad-sm",
+            position2 === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref: ref2,
+    className: cn("py-pad-sm pl-8 pr-2 text-body-md font-medium text-fg-muted", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref2) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref: ref2,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center gap-pad-md",
+      "rounded-radius-sm py-pad-md pl-8 pr-pad-lg",
+      "text-body-sm font-medium text-fg-muted",
+      "outline-none transition-colors",
+      "focus:bg-bg-muted focus:text-fg-default",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-fg-muted",
+      "focus:[&_svg]:text-fg-default",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref: ref2,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+function FormFieldSelect({
+  label,
+  required: required2,
+  helperText,
+  state,
+  errorMessage,
+  warningMessage,
+  successMessage,
+  className,
+  id,
+  options,
+  placeholder: placeholder2,
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  triggerClassName,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      label,
+      required: required2,
+      helperText,
+      state,
+      errorMessage,
+      warningMessage,
+      successMessage,
+      className,
+      id,
+      disabled,
+      children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value,
+          defaultValue,
+          onValueChange,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                id: fieldId,
+                state: fieldState,
+                className: triggerClassName,
+                children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder2 })
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: opt.value,
+                disabled: opt.disabled,
+                children: opt.label
+              },
+              opt.value
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+const FormFieldCheckbox = forwardRef(
+  ({
+    label,
+    required: required2,
+    helperText,
+    state = "default",
+    errorMessage,
+    warningMessage,
+    successMessage,
+    className,
+    id: idProp,
+    disabled,
+    ...checkboxProps
+  }, ref2) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    let message = helperText;
+    let messageState = "default";
+    if (state === "error" && errorMessage) {
+      message = errorMessage;
+      messageState = "error";
+    } else if (state === "warning" && warningMessage) {
+      message = warningMessage;
+      messageState = "warning";
+    } else if (state === "success" && successMessage) {
+      message = successMessage;
+      messageState = "success";
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn(formFieldRoot(), "gap-[5px]", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-gp-md", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            ref: ref2,
+            id,
+            disabled,
+            ...checkboxProps
+          }
+        ),
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: cn(formFieldLabel({ disabled }), "cursor-pointer"),
+            children: [
+              label,
+              required2 && /* @__PURE__ */ jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+            ]
+          }
+        )
+      ] }),
+      message && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(formFieldMessage({ state: messageState }), "pl-[26px]"),
+          role: messageState === "error" ? "alert" : void 0,
+          children: message
+        }
+      )
+    ] });
+  }
+);
+FormFieldCheckbox.displayName = "FormFieldCheckbox";
+const Switch = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer relative inline-flex h-[24px] w-[42px] shrink-0 cursor-pointer items-center",
+      "rounded-radius-full",
+      "transition-[background-color,box-shadow] duration-150 outline-none",
+      "data-[state=unchecked]:bg-bg-emphasis dark:data-[state=unchecked]:bg-bg-accent",
+      "data-[state=checked]:bg-bg-brand",
+      "focus-visible:shadow-sh-ring",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    ref: ref2,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block size-[20px] rounded-radius-full bg-white",
+          "shadow-[0_1px_2px_rgba(0,0,0,0.10)]",
+          "transition-transform duration-[180ms] ease-[cubic-bezier(0.4,0,0.2,1)]",
+          "data-[state=unchecked]:translate-x-[2px]",
+          "data-[state=checked]:translate-x-[20px]"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+const FormFieldSwitch = forwardRef(
+  ({
+    label,
+    required: required2,
+    helperText,
+    state = "default",
+    errorMessage,
+    warningMessage,
+    successMessage,
+    className,
+    id: idProp,
+    disabled,
+    switchPosition = "end",
+    ...switchProps
+  }, ref2) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    let message = helperText;
+    let messageState = "default";
+    if (state === "error" && errorMessage) {
+      message = errorMessage;
+      messageState = "error";
+    } else if (state === "warning" && warningMessage) {
+      message = warningMessage;
+      messageState = "warning";
+    } else if (state === "success" && successMessage) {
+      message = successMessage;
+      messageState = "success";
+    }
+    const switchEl = /* @__PURE__ */ jsx(Switch, { ref: ref2, id, disabled, ...switchProps });
+    const labelEl = label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(formFieldLabel({ disabled }), "cursor-pointer flex-1"),
+        children: [
+          label,
+          required2 && /* @__PURE__ */ jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs("div", { className: cn(formFieldRoot(), "gap-[5px]", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-gp-md", children: switchPosition === "start" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        switchEl,
+        labelEl
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        labelEl,
+        switchEl
+      ] }) }),
+      message && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: formFieldMessage({ state: messageState }),
+          role: messageState === "error" ? "alert" : void 0,
+          children: message
+        }
+      )
+    ] });
+  }
+);
+FormFieldSwitch.displayName = "FormFieldSwitch";
 const comboboxStyles = tv({
   slots: {
     trigger: [
@@ -534,6 +1124,711 @@ const Combobox = forwardRef(
   }
 );
 Combobox.displayName = "Combobox";
+const tableStyles = tv({
+  slots: {
+    /* Root grid container. Aplica container-type pra container queries.
+       flex flex-col: scroll child usa flex-1 min-h-0 pra esticar quando há altura forçada
+       (consumer aplica `max-h-[Npx]` no Table) ou pegar altura natural quando não há. */
+    root: [
+      "relative flex flex-col w-full",
+      "bg-bg-table border border-border-table rounded-radius-xl shadow-sh-sm",
+      "overflow-hidden",
+      "[container-type:inline-size]"
+    ],
+    /* Container que faz o scroll (envolve head + body).
+       flex-1 + min-h-0: estica até preencher o root quando há altura forçada;
+       caso contrário, altura natural do conteúdo (flex-1 sem espaço extra = no-op).
+       overflow-auto: scroll-X sempre disponível (colunas largas); scroll-Y só ativa
+       quando o conteúdo excede a altura (que só acontece com max-h externo).
+       scrollbar-thin: classe global do projeto (globals.css) — alpha responsivo light/dark. */
+    scroll: [
+      "flex-1 min-h-0 overflow-auto relative",
+      "scrollbar-thin"
+    ],
+    /* Header row (flex de TableHeadCell). Sticky default. */
+    head: [
+      "flex w-max min-w-full",
+      "bg-bg-table-head border-b border-border-table",
+      "z-20"
+    ],
+    /* Cell do header — type, padding, alinhamento. */
+    headCell: [
+      "relative flex items-center gap-gp-md shrink-0",
+      "h-[42px] px-pad-2xl",
+      "text-body-sm font-semibold leading-none",
+      "text-fg-muted",
+      "select-none",
+      "hover:text-fg-default"
+    ],
+    /* Body container — contém as rows. */
+    body: [
+      "flex flex-col w-max min-w-full"
+    ],
+    /* Row (flex de TableCell). */
+    row: [
+      "group/row relative flex w-full",
+      "border-b border-border-table last:border-b-0",
+      "bg-bg-table",
+      "transition-colors duration-150"
+    ],
+    /* Cell — content cell padrão. */
+    cell: [
+      "flex items-center shrink-0",
+      "px-pad-2xl",
+      "text-body-sm font-normal text-fg-default",
+      "whitespace-nowrap overflow-hidden"
+    ],
+    /* Drag handle do resize — barrinha invisível no edge direito.
+       Apenas a linha dentro do header (after:). Sem projeção pra baixo (before:)
+       porque pseudo-elements absolute COM h-screen ainda contam pro scrollHeight
+       do ancestral com overflow-auto, esticando o body verticalmente. */
+    resizeHandle: [
+      "absolute right-0 top-0 bottom-0 w-[6px] cursor-col-resize z-10",
+      // Linha 1px vertical dentro do header — aparece no hover do TH
+      "after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2",
+      "after:top-[8px] after:bottom-[8px] after:w-px after:bg-transparent",
+      "after:transition-all after:duration-150",
+      "group-hover/headcell:after:bg-border-default",
+      // Hover direto no handle → linha brand 2px full-height
+      "hover:after:bg-bg-brand hover:after:w-[2px] hover:after:top-0 hover:after:bottom-0",
+      // DRAG ATIVO → mantém linha brand visível independente do :hover
+      "data-[dragging=true]:after:bg-bg-brand data-[dragging=true]:after:w-[2px] data-[dragging=true]:after:top-0 data-[dragging=true]:after:bottom-0"
+    ],
+    /* Ícone de sort no head cell. */
+    sortIcon: [
+      "shrink-0 size-icon-xs",
+      "transition-opacity duration-150"
+    ],
+    /* Ícone de tipo de coluna no head (Hash, User, AtSign…). */
+    typeIcon: [
+      "shrink-0 size-[13px] text-fg-muted opacity-70",
+      "group-hover/headcell:opacity-100"
+    ],
+    /* Badge brand com índice de sort (1, 2, 3). */
+    sortBadge: [
+      "inline-flex items-center justify-center shrink-0",
+      "min-w-[18px] h-[18px] px-[5px]",
+      "rounded-radius-xs bg-bg-brand text-fg-on-brand",
+      "text-caption-xs font-bold leading-none tabular-nums"
+    ],
+    /* Stack absolute na borda direita do head cell — agrupa sort e headMenu.
+       Largura dinâmica: encolhe quando itens estão "hidden", cresce quando aparecem no hover. */
+    headRightStack: [
+      "absolute right-pad-md top-1/2 -translate-y-1/2 z-[1]",
+      // 8px de respiro da borda direita
+      "inline-flex items-center gap-gp-xs",
+      "bg-bg-table-head pl-pad-xs",
+      "pointer-events-none"
+    ],
+    /* Sort ativo (asc/desc) — sempre visível quando isSorted=true. */
+    headSortActive: [
+      "inline-flex items-center gap-gp-xs shrink-0",
+      "text-fg-default"
+    ],
+    /* Sort hint (sortable mas inativo) — display:none default, inline-flex no hover.
+       Como é display:none, NÃO ocupa espaço no stack até aparecer. */
+    headSortHint: [
+      "hidden group-hover/headcell:inline-flex items-center shrink-0",
+      "text-fg-muted opacity-60"
+    ],
+    /* Head menu wrapper — display:none default, inline-flex no hover.
+       Tem pointer-events:auto pra restaurar interatividade (parent stack tem pointer-events:none). */
+    headMenuItem: [
+      // Esconde por padrao; revela quando:
+      //   1. hover no header (group-hover) — UX padrao
+      //   2. focus interno (focus-within) — keyboard navigation
+      //   3. dropdown interno aberto (:has data-state=open) — mantem visivel
+      //      enquanto user move cursor pra dentro do menu portal
+      //   4. data-menu-active=true no botao — mantem visivel durante a janela
+      //      de close animation (~200ms) pra portal nao perder a ancora
+      "hidden items-center shrink-0",
+      "group-hover/headcell:inline-flex",
+      "focus-within:inline-flex",
+      "has-[[data-state=open]]:inline-flex",
+      "has-[[data-menu-active=true]]:inline-flex",
+      "pointer-events-auto"
+    ],
+    /* Card mode — wrapper de cada row no modo card. */
+    cardWrap: [
+      "flex flex-col w-full p-pad-card-sm gap-gp-md",
+      "border-b border-border-table last:border-b-0",
+      "bg-bg-table"
+    ],
+    /* Card mode — header do card (primary + checkbox + actions). */
+    cardHeader: [
+      "flex items-center justify-between gap-gp-md"
+    ],
+    /* Card mode — body items (label/value). */
+    cardItem: [
+      "flex flex-col gap-gp-2xs"
+    ],
+    /* Card mode — label da coluna acima do valor. */
+    cardLabel: [
+      "text-body-xs uppercase tracking-wider text-fg-muted"
+    ],
+    /* Card mode — valor abaixo do label. */
+    cardValue: [
+      "text-body-md text-fg-default"
+    ]
+  },
+  variants: {
+    // ⚠️ Alturas de row por densidade. DEVEM casar com `DENSITY_ROW_HEIGHT` em
+    // `DataTable/data-table.constants.ts` (usado pela estimativa do virtualizer).
+    // Mudou aqui → mudar lá, senão o scroll virtual desalinha.
+    density: {
+      compact: { row: "h-[40px]", cell: "py-0", headCell: "" },
+      standard: { row: "h-[56px]", cell: "py-0", headCell: "" },
+      comfortable: { row: "h-[64px]", cell: "py-0", headCell: "" }
+    },
+    sticky: {
+      true: { head: "sticky top-0" },
+      false: {}
+    },
+    selected: {
+      true: {
+        row: [
+          "bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover",
+          "before:content-[''] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:bg-bg-brand before:z-[5] before:pointer-events-none"
+        ].join(" "),
+        cardWrap: "bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover"
+      },
+      false: {
+        row: "hover:bg-bg-table-row-hover",
+        cardWrap: "hover:bg-bg-table-row-hover"
+      }
+    },
+    clickable: {
+      true: { row: "cursor-pointer", cardWrap: "cursor-pointer" },
+      false: {}
+    },
+    pinned: {
+      // `bg-inherit` cobre o conteúdo scrollado nos estados normais (row bg opaco).
+      // Quando a row está destacada (`data-highlighted` via group/row), o bg da row
+      // é color-mix com transparent → trocamos pro token SÓLIDO pra não vazar.
+      // Hover usa variante de grupo ARBITRÁRIA única (`[[data-highlighted]:hover]`)
+      // — encadear dois `group-*/row` geraria descendente aninhado (não casa).
+      left: {
+        headCell: "sticky z-10 bg-bg-table-head",
+        cell: "sticky z-[5] bg-inherit group-data-[highlighted]/row:bg-bg-table-row-selected-solid group-[[data-highlighted]:hover]/row:bg-bg-table-row-selected-hover-solid"
+      },
+      right: {
+        headCell: "sticky z-10 bg-bg-table-head",
+        cell: "sticky z-[5] bg-inherit group-data-[highlighted]/row:bg-bg-table-row-selected-solid group-[[data-highlighted]:hover]/row:bg-bg-table-row-selected-hover-solid"
+      }
+    },
+    align: {
+      left: { cell: "justify-start text-left", headCell: "justify-start text-left" },
+      center: { cell: "justify-center text-center", headCell: "justify-center text-center" },
+      right: { cell: "justify-end text-right", headCell: "justify-end text-right" }
+    },
+    sortable: {
+      true: { headCell: "cursor-pointer hover:text-fg-default" },
+      false: {}
+    },
+    ellipsis: {
+      true: { cell: "overflow-hidden [&>*]:truncate" },
+      false: {}
+    },
+    cellBorders: {
+      true: {
+        // `:has(+ [data-purpose='actions'])`: a cell ANTES da coluna actions
+        // perde border-right — evita o divider visual encostado na actions.
+        headCell: "border-r border-border-table last:border-r-0 has-[+_[data-purpose='actions']]:border-r-0",
+        cell: "border-r border-border-table last:border-r-0 has-[+_[data-purpose='actions']]:border-r-0"
+      },
+      false: {}
+    },
+    /** Variant pra cells de coluna especial (selection / actions).
+     *
+     *  - `selection`: remove padding pra checkbox 28px caber em 56px e centralizar.
+     *  - `actions`: header em branco (sem texto/menu), sem border-right, padding
+     *    horizontal mínimo. Usado quando `type: "actions"` no DataTableColumnDef.
+     *    Border-right removida via `!border-r-0` (override do cellBorders=true). */
+    purpose: {
+      default: {},
+      selection: {
+        // Sem padding + centralizado: checkbox 28px fica no meio dos 56px.
+        // justify-center sobrescreve o align default (left) — coluna de seleção
+        // sempre centraliza, sem o consumer precisar passar align="center".
+        headCell: "px-0 py-0 justify-center",
+        cell: "px-0 py-0 justify-center"
+      },
+      actions: {
+        headCell: "!border-r-0 px-pad-md",
+        cell: "!border-r-0 px-pad-md"
+      }
+    }
+  },
+  defaultVariants: {
+    density: "standard",
+    sticky: true,
+    selected: false,
+    clickable: false,
+    align: "left",
+    sortable: false,
+    ellipsis: false,
+    cellBorders: true,
+    purpose: "default"
+  }
+});
+const DEFAULT_MIN = 60;
+const DEFAULT_MAX = 800;
+function useColumnResize({
+  currentWidth,
+  minWidth = DEFAULT_MIN,
+  maxWidth = DEFAULT_MAX,
+  onResize,
+  onResizeEnd,
+  onResizeLiveDOM
+}) {
+  const [isDragging2, setIsDragging] = useState(false);
+  const onResizeRef = useRef(onResize);
+  const onResizeEndRef = useRef(onResizeEnd);
+  const onResizeLiveDOMRef = useRef(onResizeLiveDOM);
+  const minRef = useRef(minWidth);
+  const maxRef = useRef(maxWidth);
+  onResizeRef.current = onResize;
+  onResizeEndRef.current = onResizeEnd;
+  onResizeLiveDOMRef.current = onResizeLiveDOM;
+  minRef.current = minWidth;
+  maxRef.current = maxWidth;
+  const stateRef = useRef({ startX: 0, startWidth: 0, lastWidth: currentWidth, dragging: false });
+  stateRef.current.lastWidth = currentWidth;
+  const handlersRef = useRef(null);
+  if (!handlersRef.current) {
+    handlersRef.current = {
+      move: (e) => {
+        if (!stateRef.current.dragging) return;
+        const delta = e.clientX - stateRef.current.startX;
+        const next = Math.min(
+          maxRef.current,
+          Math.max(minRef.current, stateRef.current.startWidth + delta)
+        );
+        stateRef.current.lastWidth = next;
+        onResizeLiveDOMRef.current?.(next);
+        onResizeRef.current?.(next);
+      },
+      up: () => {
+        if (!stateRef.current.dragging) return;
+        stateRef.current.dragging = false;
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handlersRef.current.move);
+        document.removeEventListener("mouseup", handlersRef.current.up);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        onResizeEndRef.current?.(stateRef.current.lastWidth);
+      }
+    };
+  }
+  const onMouseDown = useCallback$1(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      stateRef.current = {
+        startX: e.clientX,
+        startWidth: currentWidth,
+        lastWidth: currentWidth,
+        dragging: true
+      };
+      setIsDragging(true);
+      document.addEventListener("mousemove", handlersRef.current.move);
+      document.addEventListener("mouseup", handlersRef.current.up);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [currentWidth]
+  );
+  useEffect(() => {
+    return () => {
+      if (stateRef.current.dragging && handlersRef.current) {
+        document.removeEventListener("mousemove", handlersRef.current.move);
+        document.removeEventListener("mouseup", handlersRef.current.up);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }
+    };
+  }, []);
+  return {
+    onMouseDown,
+    isDragging: isDragging2
+  };
+}
+const TableContext = createContext({
+  density: "standard",
+  cellBorders: true,
+  resizingField: null,
+  setResizingField: () => {
+  },
+  isScrolled: false
+});
+function useTableContext() {
+  return useContext(TableContext);
+}
+const styles$4 = tableStyles();
+function Table({
+  density = "standard",
+  cardBreakpoint = 768,
+  cellBorders = true,
+  ariaLabel,
+  className,
+  scrollRef: externalScrollRef,
+  children
+}) {
+  const cardCss = cardBreakpoint === false ? void 0 : { "--table-card-bp": `${cardBreakpoint}px` };
+  const [resizingField, setResizingField] = useState(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const internalScrollRef = useRef(null);
+  const scrollRef = externalScrollRef ?? internalScrollRef;
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => setIsScrolled(el.scrollTop > 0);
+    el.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [scrollRef]);
+  return /* @__PURE__ */ jsx(
+    TableContext.Provider,
+    {
+      value: { density, cellBorders, resizingField, setResizingField, isScrolled },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "grid",
+          "aria-label": ariaLabel,
+          "data-density": density,
+          "data-resizing-col": resizingField ?? void 0,
+          className: cn(styles$4.root(), className),
+          style: cardCss,
+          children: /* @__PURE__ */ jsx("div", { ref: scrollRef, className: styles$4.scroll(), children })
+        }
+      )
+    }
+  );
+}
+function TableHead({
+  sticky = true,
+  className,
+  rootProps,
+  children
+}) {
+  const { isScrolled } = useTableContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rootProps,
+      role: "rowgroup",
+      "data-scrolled": isScrolled ? "true" : void 0,
+      className: cn(tableStyles({ sticky }).head(), className),
+      children: /* @__PURE__ */ jsx("div", { role: "row", className: "flex w-full", children })
+    }
+  );
+}
+function TableBody({
+  className,
+  style: style2,
+  rootProps,
+  virtualized,
+  children
+}) {
+  const virtualStyle = virtualized ? {
+    height: virtualized.totalHeight,
+    position: "relative",
+    minWidth: "100%",
+    ...style2
+  } : style2;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rootProps,
+      role: "rowgroup",
+      className: cn(
+        styles$4.body(),
+        virtualized && "!block",
+        className
+      ),
+      style: virtualStyle,
+      children
+    }
+  );
+}
+const TableRow = forwardRef(function TableRow2({
+  selected = false,
+  open = false,
+  focused = false,
+  clickable,
+  onClick,
+  className,
+  rootProps,
+  children
+}, ref2) {
+  const { density } = useTableContext();
+  const isClickable = clickable ?? !!onClick;
+  const highlighted = selected || open;
+  const solidPinned = highlighted || focused;
+  const dataState = selected && open ? "selected open" : selected ? "selected" : open ? "open" : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rootProps,
+      ref: ref2,
+      role: "row",
+      "aria-selected": selected || void 0,
+      "data-state": dataState,
+      "data-focused": focused || void 0,
+      "data-highlighted": solidPinned || void 0,
+      tabIndex: focused ? 0 : -1,
+      className: cn(
+        "group/row",
+        tableStyles({ selected: highlighted, clickable: isClickable, density }).row(),
+        // Focus visual — bg tinted (match checkbox selected) + borda brand interna.
+        // A borda vem de um overlay ::after com z-[7] (ACIMA do pinned cell z-[5]):
+        // `outline` no row era pintado SOB as sticky cells (bg opaco) e quebrava
+        // no topo/embaixo na coluna fixa. O overlay desenha por cima, contínuo.
+        focused && "bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover z-[6] relative after:content-[''] after:absolute after:inset-0 after:z-[7] after:pointer-events-none after:border-2 after:border-bg-brand",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+});
+const TableCell = forwardRef(function TableCell2({
+  field,
+  tooltip,
+  width,
+  pinned,
+  pinOffset,
+  align = "left",
+  ellipsis = false,
+  label,
+  className,
+  rootProps,
+  purpose = "default",
+  children
+}, ref2) {
+  const { density, cellBorders, resizingField } = useTableContext();
+  const isResizingThisCol = field !== void 0 && resizingField === field;
+  const style2 = {};
+  if (width !== void 0) {
+    style2.width = width;
+    style2.minWidth = width;
+    style2.maxWidth = width;
+  }
+  if (pinned === "left" && pinOffset !== void 0) style2.left = pinOffset;
+  if (pinned === "right" && pinOffset !== void 0) style2.right = pinOffset;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rootProps,
+      ref: ref2,
+      role: "gridcell",
+      "data-pinned": pinned,
+      "data-label": label,
+      "data-field": field,
+      "data-purpose": purpose,
+      "data-resize-active": isResizingThisCol ? "true" : void 0,
+      title: tooltip,
+      className: cn(
+        tableStyles({ pinned, align, ellipsis, density, cellBorders, purpose }).cell(),
+        // Linha brand 2px alinhada com o centro do resize handle do header (~2px do edge)
+        isResizingThisCol && "relative after:absolute after:right-[2px] after:top-0 after:bottom-0 after:w-[2px] after:bg-bg-brand after:pointer-events-none",
+        className
+      ),
+      style: style2,
+      children
+    }
+  );
+});
+const TableHeadCell = forwardRef(function TableHeadCell2({
+  field,
+  width,
+  pinned,
+  pinOffset,
+  align = "left",
+  sortable = false,
+  sortDirection = null,
+  sortIndex = 1,
+  onSortClick,
+  icon: Icon,
+  headMenu,
+  resizable,
+  onResize,
+  onResizeEnd,
+  className,
+  style: extraStyle,
+  rootProps,
+  purpose = "default",
+  children
+}, forwardedRef) {
+  const { density, cellBorders, setResizingField } = useTableContext();
+  const headCellRef = useRef(null);
+  const setRefs = useCallback$1((el) => {
+    headCellRef.current = el;
+    if (typeof forwardedRef === "function") forwardedRef(el);
+    else if (forwardedRef) forwardedRef.current = el;
+  }, [forwardedRef]);
+  const resize = useColumnResize({
+    currentWidth: width ?? 160,
+    // Live DOM update — escreve `style.width` direto nas cells com `data-field`
+    // correspondente, escopado ao `[role="grid"]` ancestral. Síncrono, sem React,
+    // zero re-render durante o drag. Documented hook API via `onResizeLiveDOM`
+    // (vs `onResize` que vai pro state externo, normalmente debounced ao mouseup).
+    onResizeLiveDOM: field ? (w) => {
+      const grid = headCellRef.current?.closest('[role="grid"]');
+      grid?.querySelectorAll(`[data-field="${field}"]`).forEach((el) => {
+        el.style.width = `${w}px`;
+        el.style.minWidth = `${w}px`;
+        el.style.maxWidth = `${w}px`;
+      });
+    } : void 0,
+    onResize,
+    onResizeEnd
+  });
+  useEffect(() => {
+    if (resize.isDragging && field) {
+      setResizingField(field);
+      return () => setResizingField(null);
+    }
+  }, [resize.isDragging, field, setResizingField]);
+  const style2 = {};
+  if (width !== void 0) {
+    style2.width = width;
+    style2.minWidth = width;
+    style2.maxWidth = width;
+  }
+  if (pinned === "left" && pinOffset !== void 0) style2.left = pinOffset;
+  if (pinned === "right" && pinOffset !== void 0) style2.right = pinOffset;
+  const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
+  const isSorted = sortDirection === "asc" || sortDirection === "desc";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rootProps,
+      ref: setRefs,
+      role: "columnheader",
+      "aria-sort": ariaSort,
+      "data-pinned": pinned,
+      "data-sort": sortDirection ?? void 0,
+      "data-field": field,
+      "data-purpose": purpose,
+      className: cn(
+        "group/headcell",
+        tableStyles({ pinned, align, sortable, density, cellBorders, purpose }).headCell(),
+        className
+      ),
+      style: { ...style2, ...extraStyle },
+      onClick: sortable ? onSortClick : void 0,
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: styles$4.typeIcon(), size: 13, strokeWidth: 1.7, "aria-hidden": true }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex-1 min-w-0",
+              // Coluna de seleção (checkbox) centraliza por padrão — sem precisar
+              // de align="center" no consumer (alinha com o purpose="selection").
+              align === "center" || purpose === "selection" ? "flex items-center justify-center" : align === "right" ? cn(
+                "truncate text-right",
+                // Reserva espaço pro headRightStack APENAS quando sort está
+                // ATIVO (sort badge + indicator visíveis permanentemente).
+                // Para hover-only icons (sortable hint sem sort + headMenu),
+                // NÃO reserva espaço — headRightStack tem `bg-bg-table-head`
+                // que mascara o texto durante hover. Texto right-aligned
+                // encosta corretamente na borda quando sem hover (antes
+                // ficava com ~60px de "vazio" reservado pros ícones invisíveis).
+                isSorted && "pr-[60px]"
+              ) : "truncate text-left"
+            ),
+            children
+          }
+        ),
+        (sortable || headMenu) && /* @__PURE__ */ jsxs("span", { className: styles$4.headRightStack(), children: [
+          isSorted && /* @__PURE__ */ jsxs("span", { className: styles$4.headSortActive(), children: [
+            sortIndex !== void 0 && /* @__PURE__ */ jsx("span", { className: styles$4.sortBadge(), children: sortIndex }),
+            /* @__PURE__ */ jsx(SortIndicator, { direction: sortDirection })
+          ] }),
+          sortable && !isSorted && /* @__PURE__ */ jsx("span", { className: styles$4.headSortHint(), children: /* @__PURE__ */ jsx(SortIndicator, { direction: null }) }),
+          headMenu && /* @__PURE__ */ jsx("span", { className: styles$4.headMenuItem(), children: headMenu })
+        ] }),
+        resizable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles$4.resizeHandle(),
+            "data-dragging": resize.isDragging,
+            onPointerDown: (e) => e.stopPropagation(),
+            onMouseDown: resize.onMouseDown,
+            onClick: (e) => e.stopPropagation(),
+            onMouseEnter: () => field && setResizingField(field),
+            onMouseLeave: () => {
+              if (!resize.isDragging) setResizingField(null);
+            },
+            "aria-hidden": true
+          }
+        )
+      ]
+    }
+  );
+});
+function SortIndicator({ direction }) {
+  if (direction === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: styles$4.sortIcon(), "aria-hidden": true });
+  if (direction === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: styles$4.sortIcon(), "aria-hidden": true });
+  return /* @__PURE__ */ jsx(ArrowUpDown, { className: styles$4.sortIcon(), "aria-hidden": true });
+}
+const styles$3 = tableStyles();
+function TableCardRow({
+  header,
+  headerActions,
+  items,
+  selected = false,
+  open = false,
+  clickable,
+  onClick,
+  className
+}) {
+  const isClickable = clickable ?? !!onClick;
+  const highlighted = selected || open;
+  const handleClick = (e) => {
+    if (!onClick) return;
+    if (e.target.closest(
+      'button, a, input, label, [role="menu"], [role="menuitem"], [data-slot="card-actions"]'
+    )) {
+      return;
+    }
+    onClick(e);
+  };
+  const dataState = selected && open ? "selected open" : selected ? "selected" : open ? "open" : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "article",
+      "aria-selected": selected || void 0,
+      "data-state": dataState,
+      className: cn(
+        tableStyles({ selected: highlighted, clickable: isClickable }).cardWrap(),
+        className
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$3.cardHeader(), children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-gp-md min-w-0", children: header }),
+          headerActions && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex items-center gap-gp-xs shrink-0",
+              "data-slot": "card-actions",
+              children: headerActions
+            }
+          )
+        ] }),
+        items.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-gp-md", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: styles$3.cardItem(), children: [
+          /* @__PURE__ */ jsx("span", { className: styles$3.cardLabel(), children: item.label }),
+          /* @__PURE__ */ jsx("span", { className: styles$3.cardValue(), children: item.value })
+        ] }, item.key ?? i)) })
+      ]
+    }
+  );
+}
 const DEFAULT_COLUMN_WIDTH$1 = 160;
 function useColumnWidths(columns) {
   return useMemo$1(() => {
@@ -1927,215 +3222,49 @@ function ViewsPopover({
                             "outline-none cursor-pointer",
                             "transition-[opacity,background-color,color] duration-150",
                             "opacity-0 group-hover/view:opacity-100",
-                            "hover:bg-bg-danger-muted hover:text-fg-danger",
-                            "focus-visible:opacity-100 focus-visible:bg-bg-muted",
-                            "[&_svg]:size-[14px]"
-                          ),
-                          children: /* @__PURE__ */ jsx(Trash2, { strokeWidth: 1.8 })
-                        }
-                      )
-                    ]
-                  },
-                  view.id
-                );
-              })
-            }
-          ),
-          !hideCreate && onCreate && /* @__PURE__ */ jsx("div", { className: "flex-none p-pad-md border-t border-border-default", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: onCreate,
-              className: cn(
-                "flex items-center justify-center gap-gp-sm w-full",
-                "h-form-md px-pad-xl rounded-radius-lg",
-                "bg-bg-surface dark:bg-bg-muted",
-                "border border-border-subtle dark:border-border-input",
-                "shadow-sh-sm dark:shadow-sh-none",
-                "text-body-sm font-semibold text-fg-default dark:text-fg-muted",
-                "outline-none cursor-pointer",
-                "transition-[background-color,color,box-shadow] duration-150",
-                "hover:bg-bg-muted-hover hover:text-fg-default",
-                "focus-visible:shadow-sh-ring",
-                "[&_svg]:size-[14px]"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(Plus, { strokeWidth: 2.2 }),
-                createLabel
-              ]
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-}
-const Switch = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
-  SwitchPrimitives.Root,
-  {
-    className: cn(
-      "peer relative inline-flex h-[24px] w-[42px] shrink-0 cursor-pointer items-center",
-      "rounded-radius-full",
-      "transition-[background-color,box-shadow] duration-150 outline-none",
-      "data-[state=unchecked]:bg-bg-emphasis dark:data-[state=unchecked]:bg-bg-accent",
-      "data-[state=checked]:bg-bg-brand",
-      "focus-visible:shadow-sh-ring",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    ),
-    ...props,
-    ref: ref2,
-    children: /* @__PURE__ */ jsx(
-      SwitchPrimitives.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block size-[20px] rounded-radius-full bg-white",
-          "shadow-[0_1px_2px_rgba(0,0,0,0.10)]",
-          "transition-transform duration-[180ms] ease-[cubic-bezier(0.4,0,0.2,1)]",
-          "data-[state=unchecked]:translate-x-[2px]",
-          "data-[state=checked]:translate-x-[20px]"
-        )
-      }
-    )
-  }
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-const formFieldRoot = tv({
-  base: "flex flex-col gap-[7px] w-full"
-});
-const formFieldLabel = tv({
-  base: [
-    "text-body-sm font-semibold tracking-[0.01em] leading-none",
-    "text-fg-default dark:text-fg-muted",
-    "select-none"
-  ],
-  variants: {
-    disabled: {
-      true: "opacity-50 cursor-not-allowed"
-    }
-  }
-});
-const formFieldRequired = tv({
-  base: "ml-[2px] text-fg-danger"
-});
-const formFieldMessage = tv({
-  base: "text-caption-sm leading-snug",
-  variants: {
-    state: {
-      default: "text-fg-muted",
-      error: "text-fg-danger",
-      warning: "text-fg-warning",
-      success: "text-fg-success"
-    }
-  },
-  defaultVariants: { state: "default" }
-});
-function FormField({
-  label,
-  required: required2,
-  helperText,
-  state = "default",
-  errorMessage,
-  warningMessage,
-  successMessage,
-  className,
-  id: idProp,
-  children,
-  hideLabel,
-  disabled
-}) {
-  const autoId = useId();
-  const id = idProp ?? autoId;
-  let message = helperText;
-  let messageState = "default";
-  if (state === "error" && errorMessage) {
-    message = errorMessage;
-    messageState = "error";
-  } else if (state === "warning" && warningMessage) {
-    message = warningMessage;
-    messageState = "warning";
-  } else if (state === "success" && successMessage) {
-    message = successMessage;
-    messageState = "success";
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn(formFieldRoot(), className), children: [
-    label && !hideLabel && /* @__PURE__ */ jsxs(
-      "label",
-      {
-        htmlFor: id,
-        className: formFieldLabel({ disabled }),
-        children: [
-          label,
-          required2 && /* @__PURE__ */ jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+                            "hover:bg-bg-danger-muted hover:text-fg-danger",
+                            "focus-visible:opacity-100 focus-visible:bg-bg-muted",
+                            "[&_svg]:size-[14px]"
+                          ),
+                          children: /* @__PURE__ */ jsx(Trash2, { strokeWidth: 1.8 })
+                        }
+                      )
+                    ]
+                  },
+                  view.id
+                );
+              })
+            }
+          ),
+          !hideCreate && onCreate && /* @__PURE__ */ jsx("div", { className: "flex-none p-pad-md border-t border-border-default", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onCreate,
+              className: cn(
+                "flex items-center justify-center gap-gp-sm w-full",
+                "h-form-md px-pad-xl rounded-radius-lg",
+                "bg-bg-surface dark:bg-bg-muted",
+                "border border-border-subtle dark:border-border-input",
+                "shadow-sh-sm dark:shadow-sh-none",
+                "text-body-sm font-semibold text-fg-default dark:text-fg-muted",
+                "outline-none cursor-pointer",
+                "transition-[background-color,color,box-shadow] duration-150",
+                "hover:bg-bg-muted-hover hover:text-fg-default",
+                "focus-visible:shadow-sh-ring",
+                "[&_svg]:size-[14px]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Plus, { strokeWidth: 2.2 }),
+                createLabel
+              ]
+            }
+          ) })
         ]
       }
-    ),
-    children({ id, state }),
-    message && /* @__PURE__ */ jsx(
-      "p",
-      {
-        className: formFieldMessage({ state: messageState }),
-        role: messageState === "error" ? "alert" : void 0,
-        children: message
-      }
     )
   ] });
 }
-function renderAddon(content, key) {
-  if (typeof content === "string") {
-    return /* @__PURE__ */ jsx(InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: /* @__PURE__ */ jsx(InputGroupText, { children: content }) }, key);
-  }
-  return /* @__PURE__ */ jsx(InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: content }, key);
-}
-const FormFieldInput = forwardRef(
-  ({
-    label,
-    required: required2,
-    helperText,
-    state,
-    errorMessage,
-    warningMessage,
-    successMessage,
-    className,
-    id,
-    startAddon,
-    endAddon,
-    ...inputProps
-  }, ref2) => {
-    const hasAddon = startAddon !== void 0 || endAddon !== void 0;
-    const { size, ...inputHtmlProps } = inputProps;
-    return /* @__PURE__ */ jsx(
-      FormField,
-      {
-        label,
-        required: required2,
-        helperText,
-        state,
-        errorMessage,
-        warningMessage,
-        successMessage,
-        className,
-        id,
-        disabled: inputProps.disabled,
-        children: ({ id: fieldId, state: fieldState }) => hasAddon ? /* @__PURE__ */ jsxs(InputGroup, { state: fieldState, size: size ?? void 0, children: [
-          startAddon !== void 0 && renderAddon(startAddon, "start"),
-          /* @__PURE__ */ jsx(InputGroupInput, { ref: ref2, id: fieldId, ...inputHtmlProps }),
-          endAddon !== void 0 && renderAddon(endAddon, "end")
-        ] }) : /* @__PURE__ */ jsx(
-          Input,
-          {
-            ref: ref2,
-            id: fieldId,
-            state: fieldState,
-            size,
-            ...inputHtmlProps
-          }
-        )
-      }
-    );
-  }
-);
-FormFieldInput.displayName = "FormFieldInput";
 const dialog = tv({
   base: [
     // Override do DialogContent default (grid + p-pad-4xl + rounded-radius-base + shadow-sh-xl)
@@ -2338,11 +3467,14 @@ function TableToolbarViews({
   myOwnerKey = "me",
   divider,
   hideDivider,
-  soloLabel = "Default"
+  soloLabel = "Default",
+  allowCreate = true
 }) {
   const maxCustomTabs = Math.max(0, maxTabs - 1);
   const initialIds = useMemo$1(
-    () => views.slice(0, maxCustomTabs).map((v) => v.id),
+    // Só auto-pina views do próprio usuário (owner === myOwnerKey). As de outros
+    // (públicas) só viram tab quando explicitamente aplicadas (via activeViewId).
+    () => views.filter((v) => v.owner === myOwnerKey).slice(0, maxCustomTabs).map((v) => v.id),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
@@ -2358,11 +3490,13 @@ function TableToolbarViews({
       let next = prev.filter((id) => !removedIds.includes(id));
       for (const id of addedIds) {
         if (next.length >= maxCustomTabs) break;
+        const v = views.find((vv) => vv.id === id);
+        if (v && v.owner !== myOwnerKey) continue;
         next = [...next, id];
       }
       return next;
     });
-  }, [views, maxCustomTabs]);
+  }, [views, maxCustomTabs, myOwnerKey]);
   const [addModalOpen, setAddModalOpen] = useState(false);
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [confirmDeleteView, setConfirmDeleteView] = useState(null);
@@ -2371,7 +3505,10 @@ function TableToolbarViews({
     const customTabs = renderIds.map((id) => views.find((v) => v.id === id)).filter((v) => !!v).map((v) => ({
       id: v.id,
       name: typeof v.name === "string" ? v.name : String(v.name),
-      custom: v.owner === myOwnerKey
+      // Mostra o "X" (desfixar/fechar) nas views do usuário E na view ATIVA no
+      // momento — assim dá pra fechar uma view pública de outro que foi aplicada
+      // (o X só desfixa/deseleciona; não deleta a view de ninguém).
+      custom: v.owner === myOwnerKey || v.id === activeViewId
     }));
     const defaultName = customTabs.length === 0 ? soloLabel : "Default";
     return [{ id: DEFAULT_VIEW_ID, name: defaultName, custom: false }, ...customTabs];
@@ -2424,7 +3561,7 @@ function TableToolbarViews({
         ariaLabel: "Visões salvas"
       }
     ),
-    /* @__PURE__ */ jsx(
+    allowCreate && /* @__PURE__ */ jsx(
       ViewsPopover,
       {
         open: popoverOpen,
@@ -2438,7 +3575,7 @@ function TableToolbarViews({
         onCreate: handleCreateClick
       }
     ),
-    /* @__PURE__ */ jsx(
+    allowCreate && /* @__PURE__ */ jsx(
       AddViewModal,
       {
         open: addModalOpen,
@@ -2591,158 +3728,26 @@ const PHRASE_OP = {
 function quoteIfNeeded(v) {
   return /[\s",[\]]/.test(v) ? `"${v.replace(/"/g, '\\"')}"` : v;
 }
-function serializeList(value) {
-  const arr = Array.isArray(value) ? value : value === "" ? [] : [value];
-  return `[${arr.map((v) => quoteIfNeeded(String(v))).join(", ")}]`;
-}
-function entriesToSql(entries, logicOperator = "AND") {
-  return entries.map((e) => {
-    if (e.op === "isEmpty") return `${e.field} is empty`;
-    if (e.op === "isNotEmpty") return `${e.field} is not empty`;
-    if (e.op === "isAnyOf") return `${e.field} in ${serializeList(e.value)}`;
-    if (e.op === "isNoneOf")
-      return `${e.field} not in ${serializeList(e.value)}`;
-    if (e.op === "between")
-      return `${e.field} between ${serializeList(e.value)}`;
-    const v = quoteIfNeeded(String(Array.isArray(e.value) ? e.value.join(",") : e.value));
-    const sym = SYMBOL_OP[e.op];
-    if (sym) return `${e.field} ${sym} ${v}`;
-    const phrase = PHRASE_OP[e.op];
-    return `${e.field} ${phrase ?? "contains"} ${v}`;
-  }).join(` ${logicOperator} `);
-}
-const Select = SelectPrimitive.Root;
-const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, state = "default", ...props }, ref2) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref: ref2,
-    className: cn(
-      "flex min-h-form-lg w-full items-center justify-between gap-gp-md",
-      "rounded-radius-lg px-pad-xl",
-      "bg-bg-input dark:bg-bg-muted",
-      "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover",
-      "border border-border-input",
-      "text-body-sm font-normal text-fg-default",
-      "transition-[color,box-shadow,background-color,border-color] outline-none",
-      "data-[placeholder]:text-fg-muted data-[placeholder]:opacity-70",
-      state === "default" && "focus-visible:border-border-brand          data-[state=open]:border-border-brand          focus-visible:shadow-sh-ring          data-[state=open]:shadow-sh-ring",
-      state === "error" && "border-border-danger-muted  focus-visible:border-border-danger-muted  data-[state=open]:border-border-danger-muted  focus-visible:shadow-sh-ring-danger  data-[state=open]:shadow-sh-ring-danger",
-      state === "warning" && "border-border-warning-muted focus-visible:border-border-warning-muted data-[state=open]:border-border-warning-muted focus-visible:shadow-sh-ring-warning data-[state=open]:shadow-sh-ring-warning",
-      state === "success" && "border-border-success-muted focus-visible:border-border-success-muted data-[state=open]:border-border-success-muted focus-visible:shadow-sh-ring-success data-[state=open]:shadow-sh-ring-success",
-      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-bg-input dark:disabled:hover:bg-bg-muted",
-      "[&>span]:line-clamp-1",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-fg-muted shrink-0" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollUpButton,
-  {
-    ref: ref2,
-    className: cn(
-      "flex cursor-default items-center justify-center py-pad-xs",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollDownButton,
-  {
-    ref: ref2,
-    className: cn(
-      "flex cursor-default items-center justify-center py-pad-xs",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
-  }
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position: position2 = "popper", ...props }, ref2) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  SelectPrimitive.Content,
-  {
-    ref: ref2,
-    className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden",
-      "rounded-[12px] bg-bg-dropdown border border-border-default shadow-sh-lg outline-float",
-      "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150",
-      "text-fg-default",
-      "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",
-      "origin-[--radix-select-content-transform-origin]",
-      position2 === "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
-    ),
-    position: position2,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-pad-sm",
-            position2 === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Label,
-  {
-    ref: ref2,
-    className: cn("py-pad-sm pl-8 pr-2 text-body-md font-medium text-fg-muted", className),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref2) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
-  {
-    ref: ref2,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center gap-pad-md",
-      "rounded-radius-sm py-pad-md pl-8 pr-pad-lg",
-      "text-body-sm font-medium text-fg-muted",
-      "outline-none transition-colors",
-      "focus:bg-bg-muted focus:text-fg-default",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-fg-muted",
-      "focus:[&_svg]:text-fg-default",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Separator,
-  {
-    ref: ref2,
-    className: cn("-mx-1 my-1 h-px bg-border", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+function serializeList(value) {
+  const arr = Array.isArray(value) ? value : value === "" ? [] : [value];
+  return `[${arr.map((v) => quoteIfNeeded(String(v))).join(", ")}]`;
+}
+function entriesToSql(entries, logicOperator = "AND") {
+  return entries.map((e) => {
+    if (e.op === "isEmpty") return `${e.field} is empty`;
+    if (e.op === "isNotEmpty") return `${e.field} is not empty`;
+    if (e.op === "isAnyOf") return `${e.field} in ${serializeList(e.value)}`;
+    if (e.op === "isNoneOf")
+      return `${e.field} not in ${serializeList(e.value)}`;
+    if (e.op === "between")
+      return `${e.field} between ${serializeList(e.value)}`;
+    const v = quoteIfNeeded(String(Array.isArray(e.value) ? e.value.join(",") : e.value));
+    const sym = SYMBOL_OP[e.op];
+    if (sym) return `${e.field} ${sym} ${v}`;
+    const phrase = PHRASE_OP[e.op];
+    return `${e.field} ${phrase ?? "contains"} ${v}`;
+  }).join(` ${logicOperator} `);
+}
 const DEFAULT_FILTER_OPERATORS = [
   { id: "equals", label: "é" },
   { id: "neq", label: "não é" },
@@ -3169,15 +4174,15 @@ AND value > 1000`,
             "w-full px-pad-xl py-pad-md rounded-radius-md",
             "bg-bg-input dark:bg-bg-muted",
             "border",
-            advancedError ? "border-border-critical" : "border-border-input",
+            advancedError ? "border-border-danger-muted" : "border-border-input",
             "text-body-xs font-normal font-mono text-fg-default placeholder:text-fg-muted",
             "outline-none resize-y",
             "transition-[border-color,box-shadow] duration-150",
-            advancedError ? "focus:border-border-critical focus:shadow-sh-ring-danger" : "focus:border-border-brand focus:shadow-sh-ring"
+            advancedError ? "focus:border-border-danger-muted focus:shadow-sh-ring-danger" : "focus:border-border-brand focus:shadow-sh-ring"
           )
         }
       ),
-      advancedError && /* @__PURE__ */ jsx("p", { className: "text-caption-sm text-fg-critical", children: advancedError }),
+      advancedError && /* @__PURE__ */ jsx("p", { className: "text-caption-sm text-fg-danger", children: advancedError }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -3628,383 +4633,118 @@ function FloatingPanel({
               {
                 ref: handleRef,
                 type: "button",
-                "aria-label": "Redimensionar panel",
-                "data-dragging": dragging || void 0,
-                onMouseDown: (e) => {
-                  setDragging(true);
-                  resize.onResizeStart(e);
-                },
-                className: s.handle()
-              }
-            ),
-            (title2 || description || titleSlot || headerActions || !hideClose || maximizable) && /* @__PURE__ */ jsxs("header", { className: s.header(), children: [
-              titleSlot ? /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: titleSlot }) : /* @__PURE__ */ jsxs("div", { className: s.headerText(), children: [
-                title2 && /* @__PURE__ */ jsxs("h2", { id: titleId, className: s.headerTitle(), children: [
-                  TitleIcon && /* @__PURE__ */ jsx(TitleIcon, { className: s.headerTitleIcon(), strokeWidth: 1.8 }),
-                  /* @__PURE__ */ jsx("span", { className: "truncate", children: title2 })
-                ] }),
-                description && /* @__PURE__ */ jsx("p", { id: descId, className: s.headerDescription(), children: description })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: s.headerActions(), children: [
-                headerActions,
-                maximizable && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "soft",
-                    color: "secondary",
-                    size: "icon-sm",
-                    "aria-label": maximized ? "Restaurar tamanho" : "Maximizar",
-                    onClick: () => setMaximized((m) => !m),
-                    className: "max-md:hidden",
-                    children: maximized ? /* @__PURE__ */ jsx(Minimize2, {}) : /* @__PURE__ */ jsx(Maximize2, {})
-                  }
-                ),
-                !hideClose && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "soft",
-                    color: "secondary",
-                    size: "icon-sm",
-                    "aria-label": "Fechar",
-                    onClick: () => onOpenChange(false),
-                    children: /* @__PURE__ */ jsx(X, {})
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: s.body(), children }),
-            footer && /* @__PURE__ */ jsx("footer", { className: s.footer(), children: footer })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
-}
-const partStyles = tv({
-  slots: {
-    section: "border-b border-border-default last:border-b-0",
-    head: [
-      "flex items-center justify-between w-full",
-      "px-[18px] py-[14px]",
-      "bg-transparent border-0 cursor-pointer text-left",
-      "text-body-sm font-semibold text-fg-default",
-      "transition-colors duration-150",
-      "hover:bg-bg-muted focus-visible:outline-none focus-visible:bg-bg-muted"
-    ],
-    headStatic: "px-[18px] pt-pad-xl pb-pad-md text-body-sm font-semibold text-fg-default",
-    chev: "size-[14px] text-fg-muted transition-transform duration-200 shrink-0",
-    body: "flex flex-col gap-gp-md px-[18px] pb-pad-2xl",
-    field: "flex items-baseline justify-between gap-gp-md text-body-sm",
-    fieldLabel: "text-body-xs font-normal text-fg-muted shrink-0",
-    fieldValue: "text-fg-default font-medium text-right break-words min-w-0"
-  }
-});
-function FloatingPanelSection({
-  title: title2,
-  children,
-  collapsible = true,
-  defaultOpen = true
-}) {
-  const s = partStyles();
-  const [open, setOpen] = useState(defaultOpen);
-  if (!collapsible) {
-    return /* @__PURE__ */ jsxs("section", { className: s.section(), children: [
-      /* @__PURE__ */ jsx("div", { className: s.headStatic(), children: title2 }),
-      /* @__PURE__ */ jsx("div", { className: s.body(), children })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("section", { className: s.section(), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: s.head(),
-        onClick: () => setOpen((o) => !o),
-        "aria-expanded": open,
-        children: [
-          /* @__PURE__ */ jsx("span", { children: title2 }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: cn(s.chev(), open && "rotate-180") })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx("div", { className: s.body(), children })
-  ] });
-}
-function FloatingPanelField({ label, value }) {
-  const s = partStyles();
-  return /* @__PURE__ */ jsxs("div", { className: s.field(), children: [
-    /* @__PURE__ */ jsx("span", { className: s.fieldLabel(), children: label }),
-    /* @__PURE__ */ jsx("span", { className: s.fieldValue(), children: value || "—" })
-  ] });
-}
-const textareaVariants = cva(
-  [
-    "flex min-h-[100px] w-full resize-y",
-    "bg-bg-input dark:bg-bg-muted",
-    "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover",
-    "border border-border-input rounded-radius-lg",
-    "px-pad-xl py-pad-lg",
-    "text-body-sm font-normal leading-[1.5] text-fg-default",
-    "placeholder:text-fg-muted placeholder:opacity-70",
-    "transition-[color,box-shadow,background-color,border-color] outline-none",
-    "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-bg-input dark:disabled:hover:bg-bg-muted"
-  ],
-  {
-    variants: {
-      state: {
-        default: "focus-visible:border-border-brand          focus-visible:shadow-sh-ring",
-        error: "border-border-danger-muted  focus-visible:border-border-danger-muted  focus-visible:shadow-sh-ring-danger",
-        warning: "border-border-warning-muted focus-visible:border-border-warning-muted focus-visible:shadow-sh-ring-warning",
-        success: "border-border-success-muted focus-visible:border-border-success-muted focus-visible:shadow-sh-ring-success"
-      }
-    },
-    defaultVariants: {
-      state: "default"
-    }
-  }
-);
-const Textarea = React.forwardRef(
-  ({ className, state, ...props }, ref2) => {
-    return /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        className: cn(textareaVariants({ state }), className),
-        ref: ref2,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-const FormFieldTextarea = forwardRef(
-  ({
-    label,
-    required: required2,
-    helperText,
-    state,
-    errorMessage,
-    warningMessage,
-    successMessage,
-    className,
-    id,
-    ...textareaProps
-  }, ref2) => /* @__PURE__ */ jsx(
-    FormField,
-    {
-      label,
-      required: required2,
-      helperText,
-      state,
-      errorMessage,
-      warningMessage,
-      successMessage,
-      className,
-      id,
-      disabled: textareaProps.disabled,
-      children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          ref: ref2,
-          id: fieldId,
-          state: fieldState,
-          ...textareaProps
-        }
-      )
-    }
-  )
-);
-FormFieldTextarea.displayName = "FormFieldTextarea";
-function FormFieldSelect({
-  label,
-  required: required2,
-  helperText,
-  state,
-  errorMessage,
-  warningMessage,
-  successMessage,
-  className,
-  id,
-  options,
-  placeholder: placeholder2,
-  value,
-  defaultValue,
-  onValueChange,
-  disabled,
-  triggerClassName,
-  contentClassName
-}) {
-  return /* @__PURE__ */ jsx(
-    FormField,
-    {
-      label,
-      required: required2,
-      helperText,
-      state,
-      errorMessage,
-      warningMessage,
-      successMessage,
-      className,
-      id,
-      disabled,
-      children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsxs(
-        Select,
-        {
-          value,
-          defaultValue,
-          onValueChange,
-          disabled,
-          children: [
-            /* @__PURE__ */ jsx(
-              SelectTrigger,
-              {
-                id: fieldId,
-                state: fieldState,
-                className: triggerClassName,
-                children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder2 })
+                "aria-label": "Redimensionar panel",
+                "data-dragging": dragging || void 0,
+                onMouseDown: (e) => {
+                  setDragging(true);
+                  resize.onResizeStart(e);
+                },
+                className: s.handle()
               }
             ),
-            /* @__PURE__ */ jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsx(
-              SelectItem,
-              {
-                value: opt.value,
-                disabled: opt.disabled,
-                children: opt.label
-              },
-              opt.value
-            )) })
+            (title2 || description || titleSlot || headerActions || !hideClose || maximizable) && /* @__PURE__ */ jsxs("header", { className: s.header(), children: [
+              titleSlot ? /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: titleSlot }) : /* @__PURE__ */ jsxs("div", { className: s.headerText(), children: [
+                title2 && /* @__PURE__ */ jsxs("h2", { id: titleId, className: s.headerTitle(), children: [
+                  TitleIcon && /* @__PURE__ */ jsx(TitleIcon, { className: s.headerTitleIcon(), strokeWidth: 1.8 }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: title2 })
+                ] }),
+                description && /* @__PURE__ */ jsx("p", { id: descId, className: s.headerDescription(), children: description })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: s.headerActions(), children: [
+                headerActions,
+                maximizable && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "soft",
+                    color: "secondary",
+                    size: "icon-sm",
+                    "aria-label": maximized ? "Restaurar tamanho" : "Maximizar",
+                    onClick: () => setMaximized((m) => !m),
+                    className: "max-md:hidden",
+                    children: maximized ? /* @__PURE__ */ jsx(Minimize2, {}) : /* @__PURE__ */ jsx(Maximize2, {})
+                  }
+                ),
+                !hideClose && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "soft",
+                    color: "secondary",
+                    size: "icon-sm",
+                    "aria-label": "Fechar",
+                    onClick: () => onOpenChange(false),
+                    children: /* @__PURE__ */ jsx(X, {})
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: s.body(), children }),
+            footer && /* @__PURE__ */ jsx("footer", { className: s.footer(), children: footer })
           ]
         }
       )
-    }
+    ] }),
+    document.body
   );
 }
-const FormFieldCheckbox = forwardRef(
-  ({
-    label,
-    required: required2,
-    helperText,
-    state = "default",
-    errorMessage,
-    warningMessage,
-    successMessage,
-    className,
-    id: idProp,
-    disabled,
-    ...checkboxProps
-  }, ref2) => {
-    const autoId = useId();
-    const id = idProp ?? autoId;
-    let message = helperText;
-    let messageState = "default";
-    if (state === "error" && errorMessage) {
-      message = errorMessage;
-      messageState = "error";
-    } else if (state === "warning" && warningMessage) {
-      message = warningMessage;
-      messageState = "warning";
-    } else if (state === "success" && successMessage) {
-      message = successMessage;
-      messageState = "success";
-    }
-    return /* @__PURE__ */ jsxs("div", { className: cn(formFieldRoot(), "gap-[5px]", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-gp-md", children: [
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            ref: ref2,
-            id,
-            disabled,
-            ...checkboxProps
-          }
-        ),
-        label && /* @__PURE__ */ jsxs(
-          "label",
-          {
-            htmlFor: id,
-            className: cn(formFieldLabel({ disabled }), "cursor-pointer"),
-            children: [
-              label,
-              required2 && /* @__PURE__ */ jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
-            ]
-          }
-        )
-      ] }),
-      message && /* @__PURE__ */ jsx(
-        "p",
-        {
-          className: cn(formFieldMessage({ state: messageState }), "pl-[26px]"),
-          role: messageState === "error" ? "alert" : void 0,
-          children: message
-        }
-      )
+const partStyles = tv({
+  slots: {
+    section: "border-b border-border-default last:border-b-0",
+    head: [
+      "flex items-center justify-between w-full",
+      "px-[18px] py-[14px]",
+      "bg-transparent border-0 cursor-pointer text-left",
+      "text-body-sm font-semibold text-fg-default",
+      "transition-colors duration-150",
+      "hover:bg-bg-muted focus-visible:outline-none focus-visible:bg-bg-muted"
+    ],
+    headStatic: "px-[18px] pt-pad-xl pb-pad-md text-body-sm font-semibold text-fg-default",
+    chev: "size-[14px] text-fg-muted transition-transform duration-200 shrink-0",
+    body: "flex flex-col gap-gp-md px-[18px] pb-pad-2xl",
+    field: "flex items-baseline justify-between gap-gp-md text-body-sm",
+    fieldLabel: "text-body-xs font-normal text-fg-muted shrink-0",
+    fieldValue: "text-fg-default font-medium text-right break-words min-w-0"
+  }
+});
+function FloatingPanelSection({
+  title: title2,
+  children,
+  collapsible = true,
+  defaultOpen = true
+}) {
+  const s = partStyles();
+  const [open, setOpen] = useState(defaultOpen);
+  if (!collapsible) {
+    return /* @__PURE__ */ jsxs("section", { className: s.section(), children: [
+      /* @__PURE__ */ jsx("div", { className: s.headStatic(), children: title2 }),
+      /* @__PURE__ */ jsx("div", { className: s.body(), children })
     ] });
   }
-);
-FormFieldCheckbox.displayName = "FormFieldCheckbox";
-const FormFieldSwitch = forwardRef(
-  ({
-    label,
-    required: required2,
-    helperText,
-    state = "default",
-    errorMessage,
-    warningMessage,
-    successMessage,
-    className,
-    id: idProp,
-    disabled,
-    switchPosition = "end",
-    ...switchProps
-  }, ref2) => {
-    const autoId = useId();
-    const id = idProp ?? autoId;
-    let message = helperText;
-    let messageState = "default";
-    if (state === "error" && errorMessage) {
-      message = errorMessage;
-      messageState = "error";
-    } else if (state === "warning" && warningMessage) {
-      message = warningMessage;
-      messageState = "warning";
-    } else if (state === "success" && successMessage) {
-      message = successMessage;
-      messageState = "success";
-    }
-    const switchEl = /* @__PURE__ */ jsx(Switch, { ref: ref2, id, disabled, ...switchProps });
-    const labelEl = label && /* @__PURE__ */ jsxs(
-      "label",
+  return /* @__PURE__ */ jsxs("section", { className: s.section(), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
       {
-        htmlFor: id,
-        className: cn(formFieldLabel({ disabled }), "cursor-pointer flex-1"),
+        type: "button",
+        className: s.head(),
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
         children: [
-          label,
-          required2 && /* @__PURE__ */ jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+          /* @__PURE__ */ jsx("span", { children: title2 }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn(s.chev(), open && "rotate-180") })
         ]
       }
-    );
-    return /* @__PURE__ */ jsxs("div", { className: cn(formFieldRoot(), "gap-[5px]", className), children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-gp-md", children: switchPosition === "start" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        switchEl,
-        labelEl
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        labelEl,
-        switchEl
-      ] }) }),
-      message && /* @__PURE__ */ jsx(
-        "p",
-        {
-          className: formFieldMessage({ state: messageState }),
-          role: messageState === "error" ? "alert" : void 0,
-          children: message
-        }
-      )
-    ] });
-  }
-);
-FormFieldSwitch.displayName = "FormFieldSwitch";
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: s.body(), children })
+  ] });
+}
+function FloatingPanelField({ label, value }) {
+  const s = partStyles();
+  return /* @__PURE__ */ jsxs("div", { className: s.field(), children: [
+    /* @__PURE__ */ jsx("span", { className: s.fieldLabel(), children: label }),
+    /* @__PURE__ */ jsx("span", { className: s.fieldValue(), children: value || "—" })
+  ] });
+}
 class ColumnTypeRegistry {
   constructor() {
     __publicField(this, "types", /* @__PURE__ */ new Map());
@@ -16665,6 +17405,16 @@ function applyFormatter(row, column2) {
 const DEFAULT_COLUMN_WIDTH = 160;
 const CELL_PADDING_PX = 32;
 const DEFAULT_SAMPLE_SIZE = 20;
+const HEADER_ICON_PX = 13 + 8;
+const HEADER_SORT_AFFORDANCE_PX = 24;
+function measureHeaderMinWidth(col, typeDef) {
+  const headerText = String(col.headerName ?? String(col.field));
+  const hasHeaderIcon = col.icon !== void 0 || typeDef?.defaultIcon !== void 0;
+  const isSortable = col.sortable ?? typeDef?.defaultSortable ?? false;
+  const hasHeadMenu = col.enableColumnFilter === true;
+  const overhead = CELL_PADDING_PX + (hasHeaderIcon ? HEADER_ICON_PX : 0) + (isSortable || hasHeadMenu ? HEADER_SORT_AFFORDANCE_PX : 0);
+  return measureTextWidth(headerText) + overhead;
+}
 function calculateColumnWidths(columns, rows, options) {
   const { containerWidth, autoFit, sampleSize = DEFAULT_SAMPLE_SIZE } = options;
   if (containerWidth <= 0) return {};
@@ -16672,10 +17422,6 @@ function calculateColumnWidths(columns, rows, options) {
   let totalContentWidth = 0;
   for (const col of columns) {
     const field = String(col.field);
-    if (col.width !== void 0) {
-      totalContentWidth += col.width;
-      continue;
-    }
     if (col.type === "actions") {
       const w = col.minWidth ?? ACTIONS_COLUMN_WIDTH;
       widths[field] = w;
@@ -16683,10 +17429,16 @@ function calculateColumnWidths(columns, rows, options) {
       continue;
     }
     const typeDef = col.type ? columnTypeRegistry.get(col.type) : void 0;
+    if (col.width !== void 0) {
+      let w = Math.max(col.width, measureHeaderMinWidth(col, typeDef));
+      if (col.maxWidth !== void 0 && w > col.maxWidth) w = col.maxWidth;
+      widths[field] = Math.round(w);
+      totalContentWidth += w;
+      continue;
+    }
     let calculatedWidth = typeDef?.defaultWidth ?? DEFAULT_COLUMN_WIDTH;
     if (autoFit) {
-      const headerText = String(col.headerName ?? field);
-      let maxWidth = measureTextWidth(headerText) + CELL_PADDING_PX;
+      let maxWidth = measureHeaderMinWidth(col, typeDef);
       const sample = rows.slice(0, sampleSize);
       for (const row of sample) {
         const text = applyFormatter(row, col);
@@ -16706,33 +17458,63 @@ function calculateColumnWidths(columns, rows, options) {
     totalContentWidth += calculatedWidth;
   }
   if (totalContentWidth < containerWidth) {
-    const remainingSpace = containerWidth - totalContentWidth;
     const isFixed = (col) => col.type === "actions" || col.type === "checkbox";
-    const flexibleColumns = columns.filter(
-      (col) => col.width === void 0 && !isFixed(col)
-    );
-    const targets = flexibleColumns.length > 0 ? flexibleColumns : autoFit ? columns.filter((col) => !isFixed(col)) : [];
+    const nonFixed = columns.filter((col) => !isFixed(col));
+    const hasFlexible = nonFixed.some((col) => col.width === void 0);
+    const targets = hasFlexible || autoFit ? nonFixed : [];
     if (targets.length > 0) {
-      const extraPerColumn = Math.floor(remainingSpace / targets.length);
-      let distributed = 0;
-      targets.forEach((col, index) => {
-        const field = String(col.field);
-        const isLast = index === targets.length - 1;
-        const extra = isLast ? remainingSpace - distributed : extraPerColumn;
-        const current = widths[field] ?? col.width ?? 0;
-        let next = current + extra;
-        if (col.maxWidth !== void 0 && next > col.maxWidth) {
-          next = col.maxWidth;
-        }
-        widths[field] = Math.round(next);
-        distributed += extra;
+      const baseWidth = (col) => widths[String(col.field)] ?? col.width ?? DEFAULT_COLUMN_WIDTH;
+      let growable = targets.filter((col) => {
+        const f = String(col.field);
+        return col.maxWidth === void 0 || (widths[f] ?? 0) < col.maxWidth;
       });
+      let remaining = containerWidth - totalContentWidth;
+      let guard2 = 0;
+      while (remaining >= 1 && growable.length > 0 && guard2 < 16) {
+        guard2 += 1;
+        const totalWeight = growable.reduce((sum, col) => sum + baseWidth(col), 0);
+        if (totalWeight <= 0) break;
+        let consumedThisPass = 0;
+        const stillGrowable = [];
+        for (const col of growable) {
+          const f = String(col.field);
+          const current = widths[f] ?? col.width ?? 0;
+          const share = baseWidth(col) / totalWeight * remaining;
+          const next = current + share;
+          if (col.maxWidth !== void 0 && next >= col.maxWidth) {
+            consumedThisPass += col.maxWidth - current;
+            widths[f] = col.maxWidth;
+          } else {
+            consumedThisPass += share;
+            widths[f] = next;
+            stillGrowable.push(col);
+          }
+        }
+        remaining -= consumedThisPass;
+        growable = stillGrowable;
+        if (consumedThisPass < 0.5) break;
+      }
+      let lastFlexField;
+      let roundedTotal = 0;
+      for (const col of targets) {
+        const f = String(col.field);
+        widths[f] = Math.round(widths[f] ?? col.width ?? 0);
+        roundedTotal += widths[f];
+        const maxed = col.maxWidth !== void 0 && widths[f] >= col.maxWidth;
+        if (!maxed) lastFlexField = f;
+      }
+      if (lastFlexField !== void 0) {
+        const residue = Math.round(containerWidth) - roundedTotal;
+        if (residue !== 0) {
+          widths[lastFlexField] = Math.max(0, widths[lastFlexField] + residue);
+        }
+      }
     }
   }
   return widths;
 }
 function useColumnAutoWidth(containerRef, columns, rows, options) {
-  const { enabled, sampleSize, reservedWidth = 0 } = options;
+  const { enabled, sampleSize, reservedWidth = 0, recalcKey } = options;
   const [autoWidths, setAutoWidths] = useState({});
   const rafIdRef = useRef(null);
   const columnsRef = useRef(columns);
@@ -16798,6 +17580,9 @@ function useColumnAutoWidth(containerRef, columns, rows, options) {
     containerRef,
     sampleSize,
     reservedWidth,
+    // Re-attach quando o elemento observado desmonta/remonta sem trocar a ref
+    // (toggle de view Tabela↔Lista). Sem isso o observer fica no node antigo.
+    recalcKey,
     columns.length,
     rows.length,
     // Inclui campos das columns pra recalcular quando consumer muda a schema
@@ -17618,13 +18403,25 @@ function useDataTableController(props, ref2) {
     [props.persistId]
   );
   const scrollContainerRef = useRef(null);
+  const [internalViewMode, setInternalViewMode] = useState(
+    // Hidrata do localStorage (v3+) com fallback pra prop `defaultViewMode`
+    persistedInitial?.viewMode ?? props.defaultViewMode ?? "table"
+  );
+  const viewMode = props.viewMode ?? internalViewMode;
   const autoFitEnabled = props.autoFit !== false;
   const selectionReservedWidth = props.selectionConfig?.enabled ? SELECTION_COLUMN_WIDTH : 0;
   const { autoWidths } = useColumnAutoWidth(
     scrollContainerRef,
     props.columns,
     props.rows ?? [],
-    { enabled: autoFitEnabled, reservedWidth: selectionReservedWidth }
+    {
+      enabled: autoFitEnabled,
+      reservedWidth: selectionReservedWidth,
+      // Re-attach/re-medir quando o corpo da tabela remonta (toggle de view).
+      // Só "table" carrega o scrollRef observado; usar viewMode garante que ao
+      // voltar pra Tabela o observer reata no node novo e re-mede do zero.
+      recalcKey: viewMode
+    }
   );
   const cols = useDataTableColumns({
     columns: props.columns,
@@ -17670,11 +18467,6 @@ function useDataTableController(props, ref2) {
     onDensityChange: props.onDensityChange,
     initialDensity: persistedInitial?.density
   });
-  const [internalViewMode, setInternalViewMode] = useState(
-    // Hidrata do localStorage (v3+) com fallback pra prop `defaultViewMode`
-    persistedInitial?.viewMode ?? props.defaultViewMode ?? "table"
-  );
-  const viewMode = props.viewMode ?? internalViewMode;
   const setViewMode = useCallback$1((mode) => {
     if (props.viewMode === void 0) setInternalViewMode(mode);
     props.onViewModeChange?.(mode);
@@ -17857,7 +18649,7 @@ function useDataTableController(props, ref2) {
         hiddenColumns: state.hiddenColumns,
         columnOrder: state.columnOrder
       });
-      setViewMode(state.viewMode ?? "table");
+      if (state.viewMode !== void 0) setViewMode(state.viewMode);
       setGroupBy(state.groupBy);
       setExpandedRowIds(state.expandedRowIds ?? []);
       savedViews.setCurrentViewId(id);
@@ -17955,7 +18747,6 @@ function useDataTableController(props, ref2) {
         hiddenColumns: snapshot.hiddenColumns ?? [],
         columnOrder: snapshot.columnOrder ?? props.columns.map((c) => String(c.field))
       });
-      setViewMode(snapshot.viewMode ?? "table");
       setGroupBy(snapshot.groupBy);
       setExpandedRowIds(snapshot.expandedRowIds ?? []);
       filters.setFilterModel(snapshot.filterModel ?? { items: [], logicOperator: "AND" });
@@ -18869,7 +19660,7 @@ const cellAddonsStyles = tv({
     ],
     /** Conteúdo do popover do "Ler mais". Largura via token semântico
      *  (tooltip-lg = 320px) — reveal de texto é conceitualmente um tooltip. */
-    readMorePopover: "flex flex-col gap-gp-md p-pad-lg max-w-container-tooltip-lg text-body-sm text-fg-default whitespace-pre-wrap break-words"
+    readMorePopover: "flex flex-col gap-gp-md p-pad-lg max-w-tooltip-lg text-body-sm text-fg-default whitespace-pre-wrap break-words"
   }
 });
 const styles$2 = cellAddonsStyles();
@@ -19810,7 +20601,7 @@ function DataTableInternal(props, ref2) {
   const selectionConfig = props.selectionConfig ?? { enabled: false };
   const isKanban = viewMode === "kanban" && Boolean(props.kanbanConfig);
   const isList = viewMode === "list" && Boolean(props.listConfig);
-  useGrabToScroll(scrollContainerRef, props.grabToScroll === true);
+  useGrabToScroll(scrollContainerRef, props.grabToScroll !== false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const enableFullscreen = toolbarConfig.enableFullscreen === true;
   const toggleFullscreen = useCallback$1(() => {
@@ -19861,8 +20652,8 @@ function DataTableInternal(props, ref2) {
     const cfg = props.listConfig;
     if (!isList || !cfg) return [];
     const getRowId = contextValue.getRowId;
-    const rows = rowsAllPagesProcessed;
     const pathFn = cfg.getPath ?? props.getTreeDataPath;
+    const rows = cfg.paginated && !(cfg.hierarchical && pathFn) ? rowsToRender : rowsAllPagesProcessed;
     if (cfg.hierarchical && pathFn) {
       const pathOf = pathFn;
       const shells = /* @__PURE__ */ new Map();
@@ -19891,6 +20682,7 @@ function DataTableInternal(props, ref2) {
     props.listConfig,
     props.getTreeDataPath,
     rowsAllPagesProcessed,
+    rowsToRender,
     contextValue.getRowId
   ]);
   const listDefaultExpandedIds = useMemo$1(() => {
@@ -20146,7 +20938,10 @@ function DataTableInternal(props, ref2) {
       ...savedViews.views.map((v) => ({
         id: v.id,
         name: v.name,
-        owner: "me"
+        // Preserva o dono vindo do service (backend real). Ausente = "me"
+        // (compat com o mock, que nao tem multi-user).
+        owner: v.owner ?? "me",
+        ownerName: v.ownerName
       }))
     ],
     [props.defaultViews, savedViews.views]
@@ -20760,7 +21555,8 @@ function DataTableInternal(props, ref2) {
                       });
                     },
                     soloLabel: toolbarConfig.title,
-                    hideDivider: true
+                    hideDivider: true,
+                    allowCreate: props.allowCreateView !== false
                   }
                 ) : void 0,
                 refresh: toolbarConfig.enableRefresh !== false ? /* @__PURE__ */ jsx(
@@ -21198,7 +21994,7 @@ function DataTableInternal(props, ref2) {
             }
           }
         ) : isCardMode ? cardBody : tableBody,
-        !isKanban && !isList && !useTreeData && paginationConfig.enabled !== false && (isLoading ? /* @__PURE__ */ jsx("div", { className: styles$1.footerWrap(), children: /* @__PURE__ */ jsx(FooterTableSkeleton, {}) }) : !isDataEmpty && /* @__PURE__ */ jsx("div", { className: styles$1.footerWrap(), children: /* @__PURE__ */ jsx(
+        !isKanban && (!isList || props.listConfig?.paginated && !props.listConfig?.hierarchical) && !useTreeData && paginationConfig.enabled !== false && (isLoading ? /* @__PURE__ */ jsx("div", { className: styles$1.footerWrap(), children: /* @__PURE__ */ jsx(FooterTableSkeleton, {}) }) : !isDataEmpty && /* @__PURE__ */ jsx("div", { className: styles$1.footerWrap(), children: /* @__PURE__ */ jsx(
           FooterTable,
           {
             totalCount: totalAfterFilter,
@@ -21541,74 +22337,86 @@ function Panel({
   ] });
 }
 export {
-  ToolbarApplied as $,
+  SortPopover as $,
   AlertModal as A,
   BulkActionButton as B,
-  ColsPanel as C,
+  Checkbox as C,
   DataTable as D,
-  FloatingPanelSection as E,
+  DataTableTotalizerRow as E,
   FormFieldInput as F,
-  FooterTable as G,
-  FooterTableSkeleton as H,
-  FormFieldCheckbox as I,
-  FormFieldSwitch as J,
-  Kanban as K,
-  PanelBody as L,
-  MoreMenu as M,
-  SheetContent as N,
-  PanelFooter as O,
+  FLOATING_PANEL_SIZE_PX as G,
+  FilterPanel as H,
+  FloatingPanelField as I,
+  FloatingPanelSection as J,
+  FooterTable as K,
+  FooterTableSkeleton as L,
+  FormFieldCheckbox as M,
+  FormFieldSwitch as N,
+  Kanban as O,
   Panel as P,
-  PanelHeader as Q,
-  Sheet as R,
+  MoreMenu as Q,
+  PanelBody as R,
   SheetClose as S,
   ToolbarToolButton as T,
-  SheetTrigger as U,
-  SELECTION_COLUMN_WIDTH as V,
-  SortPanel as W,
-  SortPopover as X,
-  TABLE_HEADER_HEIGHT as Y,
-  TableToolbar as Z,
-  TableToolbarViews as _,
+  SheetContent as U,
+  PanelFooter as V,
+  PanelHeader as W,
+  Sheet as X,
+  SheetTrigger as Y,
+  SELECTION_COLUMN_WIDTH as Z,
+  SortPanel as _,
   FormField as a,
-  ToolbarDivider as a0,
-  ToolbarSaveButton as a1,
-  ToolbarSearch as a2,
-  ToolbarSegmented as a3,
-  ToolbarSettingsMenu as a4,
-  ToolbarTabs as a5,
-  ViewsPopover as a6,
-  avatarVariants as a7,
-  columnTypeRegistry as a8,
-  floatingPanelStyles as a9,
-  panelContainer as aa,
-  savedViewsMockService as ab,
-  useColumnWidths as ac,
-  useDataTableContext as ad,
-  useFloatingPanelResize as ae,
+  TABLE_HEADER_HEIGHT as a0,
+  Table as a1,
+  TableBody as a2,
+  TableCardRow as a3,
+  TableCell as a4,
+  TableHead as a5,
+  TableHeadCell as a6,
+  TableRow as a7,
+  TableToolbar as a8,
+  TableToolbarViews as a9,
+  ToolbarApplied as aa,
+  ToolbarDivider as ab,
+  ToolbarSaveButton as ac,
+  ToolbarSearch as ad,
+  ToolbarSegmented as ae,
+  ToolbarSettingsMenu as af,
+  ToolbarTabs as ag,
+  ViewsPopover as ah,
+  avatarVariants as ai,
+  columnTypeRegistry as aj,
+  floatingPanelStyles as ak,
+  panelContainer as al,
+  savedViewsMockService as am,
+  useColumnResize as an,
+  useColumnWidths as ao,
+  useDataTableContext as ap,
+  useFloatingPanelResize as aq,
   FormFieldSelect as b,
   FormFieldTextarea as c,
   FloatingPanel as d,
-  FilterPopover as e,
-  ButtonGroup as f,
-  ToolbarSimpleFilterDrawer as g,
-  ACTIONS_COLUMN_WIDTH as h,
+  Avatar as e,
+  FilterPopover as f,
+  getContrastTextColor as g,
+  ButtonGroup as h,
   isFilterEntryActive as i,
-  AddViewModal as j,
-  Avatar as k,
-  BulkActionsBar as l,
-  ColsPopover as m,
-  Combobox as n,
-  DEFAULT_FILTER_OPERATORS as o,
+  ToolbarSimpleFilterDrawer as j,
+  ACTIONS_COLUMN_WIDTH as k,
+  Calendar as l,
+  Textarea as m,
+  AddViewModal as n,
+  BulkActionsBar as o,
   presetView as p,
-  DataTableActionsCell as q,
-  DataTableEditCell as r,
-  DataTableEmpty as s,
-  DataTableFloatingBulkBar as t,
-  DataTableLoading as u,
-  DataTableNoResults as v,
-  DataTableTotalizerRow as w,
-  FLOATING_PANEL_SIZE_PX as x,
-  FilterPanel as y,
-  FloatingPanelField as z
+  ColsPanel as q,
+  ColsPopover as r,
+  Combobox as s,
+  DEFAULT_FILTER_OPERATORS as t,
+  DataTableActionsCell as u,
+  DataTableEditCell as v,
+  DataTableEmpty as w,
+  DataTableFloatingBulkBar as x,
+  DataTableLoading as y,
+  DataTableNoResults as z
 };
-//# sourceMappingURL=panel-BCUixETK.mjs.map
+//# sourceMappingURL=panel-CEkyoGiO.mjs.map