@snksergio/design-system 0.19.1 → 0.30.2

package/dist-lib/chunks/{panel-pOXMw6a-.cjs → panel-B_SSIEDs.cjs}

@@ -7,12 +7,11 @@ const React = require("react");
 const core = require("@dnd-kit/core");
 const sortable = require("@dnd-kit/sortable");
 const reactVirtual = require("@tanstack/react-virtual");
-const chipGroup = require("./chip-group-2-f_Yo7Y.cjs");
-const badge = require("./badge-gU2wtxrn.cjs");
-const appShell = require("./app-shell-CPx9X7zP.cjs");
+const appShell = require("./app-shell-Cyh8AUJT.cjs");
 const lucideReact = require("lucide-react");
+const CheckboxPrimitive = require("@radix-ui/react-checkbox");
 const SwitchPrimitives = require("@radix-ui/react-switch");
-const input = require("./input-BWevV7up.cjs");
+const input = require("./input-BjUSWce3.cjs");
 const AlertDialogPrimitive = require("@radix-ui/react-alert-dialog");
 const SelectPrimitive = require("@radix-ui/react-select");
 const ReactDOM = require("react-dom");
@@ -37,6 +36,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const CheckboxPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CheckboxPrimitive);
 const SwitchPrimitives__namespace = /* @__PURE__ */ _interopNamespaceDefault(SwitchPrimitives);
 const AlertDialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AlertDialogPrimitive);
 const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
@@ -47,7 +47,7 @@ const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Overlay,
   {
     ref: ref2,
-    className: chipGroup.cn(
+    className: appShell.cn(
       "fixed inset-0 z-50 bg-black/30 supports-[backdrop-filter]:backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -63,7 +63,7 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
     AlertDialogPrimitive__namespace.Content,
     {
       ref: ref2,
-      className: chipGroup.cn(
+      className: appShell.cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] sm:max-w-[420px]",
         "translate-x-[-50%] translate-y-[-50%]",
         "rounded-radius-2xl bg-bg-surface text-fg-default",
@@ -85,7 +85,7 @@ const AlertDialogHeader = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
-    className: chipGroup.cn(
+    className: appShell.cn(
       "flex flex-col items-center text-center gap-gp-lg",
       "px-pad-4xl pt-[32px] pb-pad-3xl",
       className
@@ -103,7 +103,7 @@ const AlertDialogFooter = ({
   /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chipGroup.cn(
+      className: appShell.cn(
         "flex flex-col-reverse items-stretch gap-gp-md sm:flex-row",
         "px-pad-3xl pb-pad-3xl",
         className
@@ -117,7 +117,7 @@ const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, r
   AlertDialogPrimitive__namespace.Title,
   {
     ref: ref2,
-    className: chipGroup.cn(
+    className: appShell.cn(
       "text-body-xl font-bold tracking-[-0.01em] text-fg-default leading-tight",
       className
     ),
@@ -129,7 +129,7 @@ const AlertDialogDescription = React__namespace.forwardRef(({ className, ...prop
   AlertDialogPrimitive__namespace.Description,
   {
     ref: ref2,
-    className: chipGroup.cn(
+    className: appShell.cn(
       "text-body-sm font-normal leading-[1.5] text-fg-muted max-w-[340px]",
       className
     ),
@@ -139,7 +139,7 @@ const AlertDialogDescription = React__namespace.forwardRef(({ className, ...prop
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
 const AlertDialogAction = AlertDialogPrimitive__namespace.Action;
 const AlertDialogCancel = AlertDialogPrimitive__namespace.Cancel;
-const alertModalIcon = chipGroup.tv({
+const alertModalIcon = appShell.tv({
   base: [
     "inline-flex items-center justify-center",
     "size-[56px] shrink-0 rounded-radius-full",
@@ -212,7 +212,7 @@ function AlertModal({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
       !hideCancel && /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           type: "button",
           color: "secondary",
@@ -224,7 +224,7 @@ function AlertModal({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           type: "button",
           color: TONE_BUTTON_COLOR[tone],
@@ -273,7 +273,7 @@ function getContrastTextColor(bgColor) {
   const blackContrast = contrastRatio(0, bgLum);
   return whiteContrast >= blackContrast ? "white" : "black";
 }
-const avatarVariants = chipGroup.tv({
+const avatarVariants = appShell.tv({
   base: [
     "inline-flex items-center justify-center",
     "shrink-0",
@@ -345,14 +345,14 @@ const Avatar = React.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-const buttonGroupVariants = chipGroup.tv({
+const buttonGroupVariants = appShell.tv({
   base: [
     "inline-flex items-stretch",
     // Permite focus ring de cada filho aparecer (z-index relativo no slot focused).
     "isolate"
   ]
 });
-const buttonGroupSlot = chipGroup.tv({
+const buttonGroupSlot = appShell.tv({
   variants: {
     position: {
       // Primary: arredondado só na esquerda; direita reta pra "encostar" no chevron
@@ -363,7 +363,7 @@ const buttonGroupSlot = chipGroup.tv({
     }
   }
 });
-const buttonGroupChevronSize = chipGroup.tv({
+const buttonGroupChevronSize = appShell.tv({
   variants: {
     size: {
       "2xs": "size-form-xs px-0",
@@ -385,7 +385,7 @@ const ButtonGroupRoot = React.forwardRef(
       {
         ref: ref2,
         role: "group",
-        className: chipGroup.cn(buttonGroupVariants(), className),
+        className: appShell.cn(buttonGroupVariants(), className),
         children
       }
     ) });
@@ -396,11 +396,11 @@ const ButtonGroupPrimary = React.forwardRef(
     const ctx = React.useContext(ButtonGroupContext);
     const merged = mergeWithContext(ctx, props);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         ref: ref2,
         ...merged,
-        className: chipGroup.cn(buttonGroupSlot({ position: "primary" }), className)
+        className: appShell.cn(buttonGroupSlot({ position: "primary" }), className)
       }
     );
   }
@@ -411,11 +411,11 @@ const ButtonGroupChevron = React.forwardRef(
     const merged = mergeWithContext(ctx, props);
     const effectiveSize = merged.size ?? "md";
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         ref: ref2,
         ...merged,
-        className: chipGroup.cn(
+        className: appShell.cn(
           buttonGroupSlot({ position: "chevron" }),
           buttonGroupChevronSize({ size: effectiveSize }),
           // Anula gap do Button (não tem children) + reset svg size pra default 14px
@@ -441,7 +441,598 @@ const ButtonGroup = Object.assign(ButtonGroupRoot, {
   Primary: ButtonGroupPrimary,
   Chevron: ButtonGroupChevron
 });
-const comboboxStyles = chipGroup.tv({
+const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref: ref2,
+    className: appShell.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__ */ jsxRuntime.jsx(
+      CheckboxPrimitive__namespace.Indicator,
+      {
+        className: appShell.cn("grid place-content-center text-fg-on-brand"),
+        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "size-3", strokeWidth: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3", strokeWidth: 3 })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+const formFieldRoot = appShell.tv({
+  base: "flex flex-col gap-[7px] w-full"
+});
+const formFieldLabel = appShell.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 = appShell.tv({
+  base: "ml-[2px] text-fg-danger"
+});
+const formFieldMessage = appShell.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 = React.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__ */ jsxRuntime.jsxs("div", { className: appShell.cn(formFieldRoot(), className), children: [
+    label && !hideLabel && /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: formFieldLabel({ disabled }),
+        children: [
+          label,
+          required2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+        ]
+      }
+    ),
+    children({ id, state }),
+    message && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: formFieldMessage({ state: messageState }),
+        role: messageState === "error" ? "alert" : void 0,
+        children: message
+      }
+    )
+  ] });
+}
+function renderAddon(content, key) {
+  if (typeof content === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupText, { children: content }) }, key);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: content }, key);
+}
+const FormFieldInput = React.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__ */ jsxRuntime.jsx(
+      FormField,
+      {
+        label,
+        required: required2,
+        helperText,
+        state,
+        errorMessage,
+        warningMessage,
+        successMessage,
+        className,
+        id,
+        disabled: inputProps.disabled,
+        children: ({ id: fieldId, state: fieldState }) => hasAddon ? /* @__PURE__ */ jsxRuntime.jsxs(appShell.InputGroup, { state: fieldState, size: size ?? void 0, children: [
+          startAddon !== void 0 && renderAddon(startAddon, "start"),
+          /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupInput, { ref: ref2, id: fieldId, ...inputHtmlProps }),
+          endAddon !== void 0 && renderAddon(endAddon, "end")
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            ref: ref2,
+            id: fieldId,
+            state: fieldState,
+            size,
+            ...inputHtmlProps
+          }
+        )
+      }
+    );
+  }
+);
+FormFieldInput.displayName = "FormFieldInput";
+const textareaVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, state, ...props }, ref2) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        className: appShell.cn(textareaVariants({ state }), className),
+        ref: ref2,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+const FormFieldTextarea = React.forwardRef(
+  ({
+    label,
+    required: required2,
+    helperText,
+    state,
+    errorMessage,
+    warningMessage,
+    successMessage,
+    className,
+    id,
+    ...textareaProps
+  }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      label,
+      required: required2,
+      helperText,
+      state,
+      errorMessage,
+      warningMessage,
+      successMessage,
+      className,
+      id,
+      disabled: textareaProps.disabled,
+      children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsxRuntime.jsx(
+        Textarea,
+        {
+          ref: ref2,
+          id: fieldId,
+          state: fieldState,
+          ...textareaProps
+        }
+      )
+    }
+  )
+);
+FormFieldTextarea.displayName = "FormFieldTextarea";
+const Select = SelectPrimitive__namespace.Root;
+const SelectValue = SelectPrimitive__namespace.Value;
+const SelectTrigger = React__namespace.forwardRef(({ className, children, state = "default", ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Trigger,
+  {
+    ref: ref2,
+    className: appShell.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__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 text-fg-muted shrink-0" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
+const SelectScrollUpButton = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollUpButton,
+  {
+    ref: ref2,
+    className: appShell.cn(
+      "flex cursor-default items-center justify-center py-pad-xs",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
+const SelectScrollDownButton = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollDownButton,
+  {
+    ref: ref2,
+    className: appShell.cn(
+      "flex cursor-default items-center justify-center py-pad-xs",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
+const SelectContent = React__namespace.forwardRef(({ className, children, position: position2 = "popper", ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Content,
+  {
+    ref: ref2,
+    className: appShell.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__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SelectPrimitive__namespace.Viewport,
+        {
+          className: appShell.cn(
+            "p-pad-sm",
+            position2 === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+const SelectLabel = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Label,
+  {
+    ref: ref2,
+    className: appShell.cn("py-pad-sm pl-8 pr-2 text-body-md font-medium text-fg-muted", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
+const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Item,
+  {
+    ref: ref2,
+    className: appShell.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__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+const SelectSeparator = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Separator,
+  {
+    ref: ref2,
+    className: appShell.cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      label,
+      required: required2,
+      helperText,
+      state,
+      errorMessage,
+      warningMessage,
+      successMessage,
+      className,
+      id,
+      disabled,
+      children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          value,
+          defaultValue,
+          onValueChange,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SelectTrigger,
+              {
+                id: fieldId,
+                state: fieldState,
+                className: triggerClassName,
+                children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: placeholder2 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+              SelectItem,
+              {
+                value: opt.value,
+                disabled: opt.disabled,
+                children: opt.label
+              },
+              opt.value
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+const FormFieldCheckbox = React.forwardRef(
+  ({
+    label,
+    required: required2,
+    helperText,
+    state = "default",
+    errorMessage,
+    warningMessage,
+    successMessage,
+    className,
+    id: idProp,
+    disabled,
+    ...checkboxProps
+  }, ref2) => {
+    const autoId = React.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__ */ jsxRuntime.jsxs("div", { className: appShell.cn(formFieldRoot(), "gap-[5px]", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            ref: ref2,
+            id,
+            disabled,
+            ...checkboxProps
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: appShell.cn(formFieldLabel({ disabled }), "cursor-pointer"),
+            children: [
+              label,
+              required2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+            ]
+          }
+        )
+      ] }),
+      message && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: appShell.cn(formFieldMessage({ state: messageState }), "pl-[26px]"),
+          role: messageState === "error" ? "alert" : void 0,
+          children: message
+        }
+      )
+    ] });
+  }
+);
+FormFieldCheckbox.displayName = "FormFieldCheckbox";
+const Switch = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
+  SwitchPrimitives__namespace.Root,
+  {
+    className: appShell.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__ */ jsxRuntime.jsx(
+      SwitchPrimitives__namespace.Thumb,
+      {
+        className: appShell.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__namespace.Root.displayName;
+const FormFieldSwitch = React.forwardRef(
+  ({
+    label,
+    required: required2,
+    helperText,
+    state = "default",
+    errorMessage,
+    warningMessage,
+    successMessage,
+    className,
+    id: idProp,
+    disabled,
+    switchPosition = "end",
+    ...switchProps
+  }, ref2) => {
+    const autoId = React.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__ */ jsxRuntime.jsx(Switch, { ref: ref2, id, disabled, ...switchProps });
+    const labelEl = label && /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: appShell.cn(formFieldLabel({ disabled }), "cursor-pointer flex-1"),
+        children: [
+          label,
+          required2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(formFieldRoot(), "gap-[5px]", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-gp-md", children: switchPosition === "start" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        switchEl,
+        labelEl
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        labelEl,
+        switchEl
+      ] }) }),
+      message && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: formFieldMessage({ state: messageState }),
+          role: messageState === "error" ? "alert" : void 0,
+          children: message
+        }
+      )
+    ] });
+  }
+);
+FormFieldSwitch.displayName = "FormFieldSwitch";
+const comboboxStyles = appShell.tv({
   slots: {
     trigger: [
       "flex min-h-form-lg w-full items-center justify-between gap-gp-md",
@@ -536,7 +1127,7 @@ const Combobox = React.forwardRef(
                       onValueChange?.(option.value);
                       setOpen(false);
                     },
-                    className: chipGroup.cn(
+                    className: appShell.cn(
                       isSelected && "text-fg-default font-medium [&_svg]:text-fg-brand"
                     ),
                     children: [
@@ -551,10 +1142,715 @@ const Combobox = React.forwardRef(
           ] })
         }
       )
-    ] });
-  }
-);
-Combobox.displayName = "Combobox";
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+const tableStyles = appShell.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] = React.useState(false);
+  const onResizeRef = React.useRef(onResize);
+  const onResizeEndRef = React.useRef(onResizeEnd);
+  const onResizeLiveDOMRef = React.useRef(onResizeLiveDOM);
+  const minRef = React.useRef(minWidth);
+  const maxRef = React.useRef(maxWidth);
+  onResizeRef.current = onResize;
+  onResizeEndRef.current = onResizeEnd;
+  onResizeLiveDOMRef.current = onResizeLiveDOM;
+  minRef.current = minWidth;
+  maxRef.current = maxWidth;
+  const stateRef = React.useRef({ startX: 0, startWidth: 0, lastWidth: currentWidth, dragging: false });
+  stateRef.current.lastWidth = currentWidth;
+  const handlersRef = React.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 = React.useCallback(
+    (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]
+  );
+  React.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 = React.createContext({
+  density: "standard",
+  cellBorders: true,
+  resizingField: null,
+  setResizingField: () => {
+  },
+  isScrolled: false
+});
+function useTableContext() {
+  return React.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] = React.useState(null);
+  const [isScrolled, setIsScrolled] = React.useState(false);
+  const internalScrollRef = React.useRef(null);
+  const scrollRef = externalScrollRef ?? internalScrollRef;
+  React.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__ */ jsxRuntime.jsx(
+    TableContext.Provider,
+    {
+      value: { density, cellBorders, resizingField, setResizingField, isScrolled },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "grid",
+          "aria-label": ariaLabel,
+          "data-density": density,
+          "data-resizing-col": resizingField ?? void 0,
+          className: appShell.cn(styles$4.root(), className),
+          style: cardCss,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: styles$4.scroll(), children })
+        }
+      )
+    }
+  );
+}
+function TableHead({
+  sticky = true,
+  className,
+  rootProps,
+  children
+}) {
+  const { isScrolled } = useTableContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rootProps,
+      role: "rowgroup",
+      "data-scrolled": isScrolled ? "true" : void 0,
+      className: appShell.cn(tableStyles({ sticky }).head(), className),
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rootProps,
+      role: "rowgroup",
+      className: appShell.cn(
+        styles$4.body(),
+        virtualized && "!block",
+        className
+      ),
+      style: virtualStyle,
+      children
+    }
+  );
+}
+const TableRow = React.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__ */ jsxRuntime.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: appShell.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 = React.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__ */ jsxRuntime.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: appShell.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 = React.forwardRef(function TableHeadCell2({
+  field,
+  width,
+  pinned,
+  pinOffset,
+  align = "left",
+  sortable: sortable2 = 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 = React.useRef(null);
+  const setRefs = React.useCallback((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
+  });
+  React.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 = sortable2 ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
+  const isSorted = sortDirection === "asc" || sortDirection === "desc";
+  return /* @__PURE__ */ jsxRuntime.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: appShell.cn(
+        "group/headcell",
+        tableStyles({ pinned, align, sortable: sortable2, density, cellBorders, purpose }).headCell(),
+        className
+      ),
+      style: { ...style2, ...extraStyle },
+      onClick: sortable2 ? onSortClick : void 0,
+      children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: styles$4.typeIcon(), size: 13, strokeWidth: 1.7, "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: appShell.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" ? appShell.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
+          }
+        ),
+        (sortable2 || headMenu) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$4.headRightStack(), children: [
+          isSorted && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$4.headSortActive(), children: [
+            sortIndex !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$4.sortBadge(), children: sortIndex }),
+            /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { direction: sortDirection })
+          ] }),
+          sortable2 && !isSorted && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$4.headSortHint(), children: /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { direction: null }) }),
+          headMenu && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$4.headMenuItem(), children: headMenu })
+        ] }),
+        resizable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: styles$4.sortIcon(), "aria-hidden": true });
+  if (direction === "desc") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles$4.sortIcon(), "aria-hidden": true });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "article",
+      "aria-selected": selected || void 0,
+      "data-state": dataState,
+      className: appShell.cn(
+        tableStyles({ selected: highlighted, clickable: isClickable }).cardWrap(),
+        className
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3.cardHeader(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-gp-md min-w-0", children: header }),
+          headerActions && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex items-center gap-gp-xs shrink-0",
+              "data-slot": "card-actions",
+              children: headerActions
+            }
+          )
+        ] }),
+        items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-md", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3.cardItem(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$3.cardLabel(), children: item.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$3.cardValue(), children: item.value })
+        ] }, item.key ?? i)) })
+      ]
+    }
+  );
+}
 const DEFAULT_COLUMN_WIDTH$1 = 160;
 function useColumnWidths(columns) {
   return React.useMemo(() => {
@@ -587,14 +1883,14 @@ function useColumnWidths(columns) {
 }
 const SELECTION_COLUMN_WIDTH = 56;
 const TABLE_HEADER_HEIGHT = 42;
-const toolbarRoot = chipGroup.tv({
+const toolbarRoot = appShell.tv({
   base: [
     "flex items-center justify-between flex-wrap",
     "gap-gp-md md:gap-gp-2xl"
     // 8px → 16px
   ]
 });
-const toolbarLeft = chipGroup.tv({
+const toolbarLeft = appShell.tv({
   base: [
     "flex flex-1 items-center flex-wrap min-w-0",
     "gap-gp-sm md:gap-[10px]",
@@ -606,7 +1902,7 @@ const toolbarLeft = chipGroup.tv({
     "max-md:hidden"
   ]
 });
-const toolbarActions = chipGroup.tv({
+const toolbarActions = appShell.tv({
   base: [
     "flex items-center flex-wrap shrink-0",
     "gap-gp-sm md:gap-gp-md",
@@ -617,10 +1913,10 @@ const toolbarActions = chipGroup.tv({
     "max-md:w-full max-md:flex-1"
   ]
 });
-const toolbarDivider = chipGroup.tv({
+const toolbarDivider = appShell.tv({
   base: "w-[1px] h-[24px] bg-border-default shrink-0 mx-[6px] self-center"
 });
-const toolbarSearch = chipGroup.tv({
+const toolbarSearch = appShell.tv({
   base: [
     "relative flex items-center gap-gp-md cursor-text",
     "h-form-lg px-[14px] rounded-radius-lg",
@@ -644,21 +1940,21 @@ const toolbarSearch = chipGroup.tv({
   },
   defaultVariants: { expanded: false }
 });
-const toolbarSearchInput = chipGroup.tv({
+const toolbarSearchInput = appShell.tv({
   base: [
     "flex-1 min-w-0 bg-transparent border-0 outline-none",
     "text-body-sm font-normal text-fg-default",
     "placeholder:text-fg-muted"
   ]
 });
-const toolbarToolDot = chipGroup.tv({
+const toolbarToolDot = appShell.tv({
   base: [
     "absolute -top-[4px] -right-[4px] z-[2] pointer-events-none",
     "size-[13px] rounded-radius-full",
     "bg-bg-brand border-2 border-bg-canvas"
   ]
 });
-const toolbarSegmented = chipGroup.tv({
+const toolbarSegmented = appShell.tv({
   base: [
     "items-center gap-[2px] p-[3px]",
     "bg-bg-muted rounded-radius-lg",
@@ -672,7 +1968,7 @@ const toolbarSegmented = chipGroup.tv({
   },
   defaultVariants: { fluid: false }
 });
-const toolbarSegmentedButton = chipGroup.tv({
+const toolbarSegmentedButton = appShell.tv({
   base: [
     "grid place-items-center",
     "h-[34px] min-w-[36px] px-pad-md",
@@ -696,7 +1992,7 @@ const toolbarSegmentedButton = chipGroup.tv({
   },
   defaultVariants: { isActive: false, fluid: false }
 });
-const toolbarTabs = chipGroup.tv({
+const toolbarTabs = appShell.tv({
   base: [
     "items-center gap-[2px] p-[3px]",
     "bg-bg-muted rounded-radius-lg",
@@ -711,7 +2007,7 @@ const toolbarTabs = chipGroup.tv({
   },
   defaultVariants: { fluid: false }
 });
-const toolbarTabWrap = chipGroup.tv({
+const toolbarTabWrap = appShell.tv({
   base: [
     "relative inline-flex items-center",
     "rounded-radius-md",
@@ -729,7 +2025,7 @@ const toolbarTabWrap = chipGroup.tv({
   },
   defaultVariants: { isActive: false, fluid: false }
 });
-const toolbarTabButton = chipGroup.tv({
+const toolbarTabButton = appShell.tv({
   base: [
     "inline-flex items-center gap-gp-sm h-[34px] px-[14px]",
     "rounded-radius-md border-0 bg-transparent cursor-pointer outline-none",
@@ -750,7 +2046,7 @@ const toolbarTabButton = chipGroup.tv({
   },
   defaultVariants: { isActive: false, fluid: false }
 });
-const toolbarTabClose = chipGroup.tv({
+const toolbarTabClose = appShell.tv({
   base: [
     "grid place-items-center size-[18px] -ml-[18px]",
     "rounded-radius-full border-0 bg-transparent text-fg-muted cursor-pointer",
@@ -761,7 +2057,7 @@ const toolbarTabClose = chipGroup.tv({
     "[&_svg]:size-[11px]"
   ]
 });
-const toolbarApplied = chipGroup.tv({
+const toolbarApplied = appShell.tv({
   // Mobile: scroll horizontal (flex-nowrap + overflow-x-auto) em vez de quebrar
   // os chips em várias linhas e empurrar a tabela pra baixo. Scrollbar oculta.
   // sm+: volta ao flex-wrap normal.
@@ -784,7 +2080,7 @@ const toolbarApplied = chipGroup.tv({
     separator: true
   }
 });
-const toolbarAppliedChip = chipGroup.tv({
+const toolbarAppliedChip = appShell.tv({
   base: [
     "inline-flex items-center gap-gp-md",
     "h-form-md pl-pad-sm pr-pad-lg",
@@ -804,7 +2100,7 @@ const toolbarAppliedChip = chipGroup.tv({
     }
   }
 });
-const toolbarAppliedChipRemove = chipGroup.tv({
+const toolbarAppliedChipRemove = appShell.tv({
   base: [
     "grid place-items-center size-[18px] shrink-0",
     "rounded-radius-full border-0 bg-transparent text-fg-subtle cursor-pointer outline-none",
@@ -814,13 +2110,13 @@ const toolbarAppliedChipRemove = chipGroup.tv({
     "[&_svg]:size-[14px]"
   ]
 });
-const toolbarAppliedChipName = chipGroup.tv({
+const toolbarAppliedChipName = appShell.tv({
   base: "font-semibold text-fg-default"
 });
-const toolbarAppliedChipOp = chipGroup.tv({
+const toolbarAppliedChipOp = appShell.tv({
   base: "text-fg-muted text-caption-sm"
 });
-const toolbarAppliedChipValue = chipGroup.tv({
+const toolbarAppliedChipValue = appShell.tv({
   base: [
     "inline-flex items-center h-[22px] px-pad-md",
     "rounded-radius-sm",
@@ -828,7 +2124,7 @@ const toolbarAppliedChipValue = chipGroup.tv({
     "text-body-xs font-medium text-fg-default"
   ]
 });
-const toolbarAppliedClearLink = chipGroup.tv({
+const toolbarAppliedClearLink = appShell.tv({
   base: [
     "ml-pad-sm text-body-xs font-medium text-fg-brand cursor-pointer outline-none",
     "bg-transparent border-0 p-0",
@@ -838,14 +2134,14 @@ const toolbarAppliedClearLink = chipGroup.tv({
     "disabled:opacity-50 disabled:pointer-events-none"
   ]
 });
-const bulkBarRoot = chipGroup.tv({
+const bulkBarRoot = appShell.tv({
   base: [
     "flex items-center flex-wrap gap-gp-xl",
     "py-[10px] px-[14px] rounded-radius-xl",
     "bg-bg-brand-subtle border border-border-brand text-fg-brand"
   ]
 });
-const bulkBarCount = chipGroup.tv({
+const bulkBarCount = appShell.tv({
   base: [
     "inline-flex items-center gap-gp-md shrink-0",
     "text-body-sm font-semibold",
@@ -853,13 +2149,13 @@ const bulkBarCount = chipGroup.tv({
     "[&_svg]:size-[14px]"
   ]
 });
-const bulkBarActions = chipGroup.tv({
+const bulkBarActions = appShell.tv({
   base: [
     "flex items-center flex-wrap gap-gp-sm flex-1 min-w-0",
     "[&>*]:shrink-0"
   ]
 });
-const bulkBarClear = chipGroup.tv({
+const bulkBarClear = appShell.tv({
   base: [
     "shrink-0 ml-auto",
     "bg-transparent border-0 p-0 cursor-pointer outline-none",
@@ -875,7 +2171,7 @@ function ToolbarDivider({ className, ...props }) {
     "span",
     {
       "aria-hidden": "true",
-      className: chipGroup.cn(toolbarDivider(), className),
+      className: appShell.cn(toolbarDivider(), className),
       ...props
     }
   );
@@ -894,9 +2190,9 @@ function TableToolbar({
   className
 }) {
   if (bulkBar) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn("w-full", className), children: bulkBar });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn("w-full", className), children: bulkBar });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(toolbarRoot(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(toolbarRoot(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: toolbarLeft(), children: [
       viewToggle,
       viewToggle && savedViews && /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -925,7 +2221,7 @@ const ToolbarSearch = React.forwardRef(
   }, ref2) => {
     const hasValue = Boolean(value);
     const expanded = autoExpand ? hasValue : false;
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: chipGroup.cn(toolbarSearch({ expanded }), wrapperClassName), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: appShell.cn(toolbarSearch({ expanded }), wrapperClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { strokeWidth: 1.8, "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -935,7 +2231,7 @@ const ToolbarSearch = React.forwardRef(
           value,
           placeholder: placeholder2,
           "aria-label": ariaLabel,
-          className: chipGroup.cn(toolbarSearchInput(), className),
+          className: appShell.cn(toolbarSearchInput(), className),
           ...inputProps
         }
       )
@@ -956,7 +2252,7 @@ function ToolbarSegmented({
     {
       role: "radiogroup",
       "aria-label": ariaLabel,
-      className: chipGroup.cn(toolbarSegmented({ fluid }), className),
+      className: appShell.cn(toolbarSegmented({ fluid }), className),
       children: items.map((item) => {
         const isActive2 = item.value === value;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -993,13 +2289,13 @@ function ToolbarTabs({
     {
       role: "tablist",
       "aria-label": ariaLabel,
-      className: chipGroup.cn(toolbarTabs({ fluid }), className),
+      className: appShell.cn(toolbarTabs({ fluid }), className),
       children: tabs.map((tab2) => {
         const isActive2 = tab2.id === activeId;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: chipGroup.cn("group/wrap", toolbarTabWrap({ isActive: isActive2, fluid })),
+            className: appShell.cn("group/wrap", toolbarTabWrap({ isActive: isActive2, fluid })),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -1044,14 +2340,14 @@ const ToolbarToolButton = React.forwardRef(
   }, ref2) => {
     const iconOnly = !label;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      chipGroup.Button,
+      appShell.Button,
       {
         ref: ref2,
         color: isActive2 ? "primary" : "secondary",
         variant: isActive2 ? "soft" : "outline",
         size: iconOnly ? "icon-md" : "md",
         iconLeft: iconOnly ? void 0 : icon,
-        className: chipGroup.cn(
+        className: appShell.cn(
           "relative",
           // Active: Button primary soft não tem border — adicionamos brand
           isActive2 && "border-border-brand hover:border-border-brand",
@@ -1068,13 +2364,13 @@ const ToolbarToolButton = React.forwardRef(
 );
 ToolbarToolButton.displayName = "ToolbarToolButton";
 const ToolbarSaveButton = React.forwardRef(({ className, isOpen, children, ...rest }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
-  chipGroup.Button,
+  appShell.Button,
   {
     ref: ref2,
     color: "secondary",
     variant: "ghost",
     size: "icon-md",
-    className: chipGroup.cn(
+    className: appShell.cn(
       isOpen && "bg-bg-muted text-fg-default",
       className
     ),
@@ -1113,7 +2409,7 @@ function ToolbarApplied({
 }) {
   if (filters.length === 0) return null;
   const resolveOp = (op) => opLabels?.[op] ?? DEFAULT_OP_LABELS[op] ?? String(op);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(toolbarApplied({ separator }), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(toolbarApplied({ separator }), className), children: [
     filters.map((f) => {
       const isPendingOpen = pendingOpenId === f.id;
       const defaultChip = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: toolbarAppliedChip({ interactive: !!renderChip }), children: [
@@ -1146,7 +2442,7 @@ function ToolbarApplied({
       {
         type: "button",
         onClick: onClearAll,
-        className: chipGroup.cn(toolbarAppliedClearLink(), "shrink-0"),
+        className: appShell.cn(toolbarAppliedClearLink(), "shrink-0"),
         children: clearLabel
       }
     )
@@ -1160,7 +2456,7 @@ function MenuItem({ item, idx }) {
       variant: item.destructive ? "destructive" : "default",
       disabled: item.disabled,
       onSelect: () => item.onClick?.(),
-      className: chipGroup.cn(item.active && "bg-bg-brand-subtle text-fg-brand"),
+      className: appShell.cn(item.active && "bg-bg-brand-subtle text-fg-brand"),
       children: [
         item.icon,
         item.label
@@ -1173,7 +2469,7 @@ function ActionInput({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: chipGroup.cn(toolbarSearch(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: appShell.cn(toolbarSearch(), className), children: [
     action.icon,
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -1227,7 +2523,7 @@ function ToolbarActions({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn("hidden items-center gap-gp-sm md:flex", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn("hidden items-center gap-gp-sm md:flex", className), children: [
       actions.map((a) => /* @__PURE__ */ jsxRuntime.jsx(InlineAction, { action: a }, a.id)),
       extraItems && extraItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1328,7 +2624,7 @@ function BulkActionsBar({
     {
       role: "toolbar",
       "aria-label": "Ações em massa",
-      className: chipGroup.cn(bulkBarRoot(), className),
+      className: appShell.cn(bulkBarRoot(), className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bulkBarCount(), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { strokeWidth: 2.4 }),
@@ -1351,7 +2647,7 @@ function BulkActionButton({
 }) {
   const darkOverrides = variant === "danger" ? "border border-border-danger-muted" : "dark:bg-transparent dark:shadow-sh-none";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chipGroup.Button,
+    appShell.Button,
     {
       color: variant === "danger" ? "critical" : "primary",
       variant: variant === "danger" ? "soft" : "outline",
@@ -1360,7 +2656,7 @@ function BulkActionButton({
       iconLeft: icon,
       onClick,
       disabled,
-      className: chipGroup.cn(darkOverrides, className),
+      className: appShell.cn(darkOverrides, className),
       ...rest,
       children
     }
@@ -1468,7 +2764,7 @@ function ColsPanel({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: chipGroup.cn(
+        className: appShell.cn(
           "flex-1 min-h-0 overflow-y-auto p-[6px] flex flex-col gap-[2px]",
           "[scrollbar-width:thin] [scrollbar-color:var(--color-border-default)_transparent]",
           "[&::-webkit-scrollbar]:w-[6px]",
@@ -1491,7 +2787,7 @@ function ColsPanel({
               onDragOver: (e) => handleDragOver(e, index),
               onDrop: (e) => handleDrop(e, index),
               onDragEnd: handleDragEnd,
-              className: chipGroup.cn(
+              className: appShell.cn(
                 "group/row flex items-center gap-gp-lg px-pad-md py-[4px] rounded-radius-md",
                 "transition-[opacity,box-shadow] duration-150",
                 "hover:bg-bg-muted",
@@ -1513,7 +2809,7 @@ function ColsPanel({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  badge.Checkbox,
+                  Checkbox,
                   {
                     id: `col-vis-${col.key}`,
                     checked,
@@ -1538,7 +2834,7 @@ function ColsPanel({
                     "aria-pressed": isPinned,
                     "aria-label": typeof col.label === "string" ? isPinned ? `Desfixar ${col.label}` : `Fixar ${col.label}` : void 0,
                     title: isPinned ? "Desfixar coluna" : "Fixar coluna",
-                    className: chipGroup.cn(
+                    className: appShell.cn(
                       "grid place-items-center size-[28px] shrink-0",
                       "rounded-radius-md bg-transparent text-fg-muted",
                       "transition-[opacity,background-color,color] duration-150",
@@ -1593,7 +2889,7 @@ function ColsPopover({
       appShell.PopoverContent,
       {
         align,
-        className: chipGroup.cn(
+        className: appShell.cn(
           "w-[320px] max-w-[calc(100vw-32px)] max-h-[min(480px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           className
         ),
@@ -1642,7 +2938,7 @@ function SortPanel({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: chipGroup.cn(
+        className: appShell.cn(
           "flex-1 min-h-0 overflow-y-auto",
           "[scrollbar-width:thin] [scrollbar-color:var(--color-border-default)_transparent]",
           "[&::-webkit-scrollbar]:w-[6px]",
@@ -1664,7 +2960,7 @@ function SortPanel({
                     {
                       type: "button",
                       onClick: () => toggleDir(i),
-                      className: chipGroup.cn(
+                      className: appShell.cn(
                         "inline-flex items-center gap-gp-xs h-[22px] px-pad-md shrink-0",
                         "rounded-radius-sm bg-bg-muted text-fg-default text-caption-sm font-medium",
                         "outline-none cursor-pointer",
@@ -1684,7 +2980,7 @@ function SortPanel({
                       type: "button",
                       onClick: () => remove(i),
                       "aria-label": "Remover critério",
-                      className: chipGroup.cn(
+                      className: appShell.cn(
                         "grid place-items-center size-[22px] shrink-0",
                         "rounded-radius-sm bg-transparent text-fg-muted",
                         "outline-none cursor-pointer",
@@ -1711,7 +3007,7 @@ function SortPanel({
                 {
                   type: "button",
                   onClick: () => addSort(col.key),
-                  className: chipGroup.cn(
+                  className: appShell.cn(
                     "group/add flex items-center gap-gp-md w-full",
                     "px-pad-md py-pad-sm rounded-radius-md",
                     "bg-transparent border-0 cursor-pointer outline-none text-left",
@@ -1762,7 +3058,7 @@ function SortPopover({
       appShell.PopoverContent,
       {
         align,
-        className: chipGroup.cn(
+        className: appShell.cn(
           "w-[300px] max-w-[calc(100vw-32px)] max-h-[min(480px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           className
         ),
@@ -1813,7 +3109,7 @@ function ViewsPopover({
         align,
         role: "dialog",
         "aria-label": "Visualizações",
-        className: chipGroup.cn(
+        className: appShell.cn(
           "w-[280px] max-w-[calc(100vw-32px)] max-h-[min(480px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           className
         ),
@@ -1831,7 +3127,7 @@ function ViewsPopover({
                     role: "tab",
                     "aria-selected": tab2 === "all",
                     onClick: () => setTab("all"),
-                    className: chipGroup.cn(
+                    className: appShell.cn(
                       "flex-1 h-form-sm px-pad-lg rounded-radius-sm",
                       "text-body-xs font-medium cursor-pointer outline-none focus-visible:shadow-sh-ring",
                       "transition-[background-color,color,box-shadow] duration-150",
@@ -1847,7 +3143,7 @@ function ViewsPopover({
                     role: "tab",
                     "aria-selected": tab2 === "mine",
                     onClick: () => setTab("mine"),
-                    className: chipGroup.cn(
+                    className: appShell.cn(
                       "flex-1 h-form-sm px-pad-lg rounded-radius-sm",
                       "text-body-xs font-medium cursor-pointer outline-none focus-visible:shadow-sh-ring",
                       "transition-[background-color,color,box-shadow] duration-150",
@@ -1884,7 +3180,7 @@ function ViewsPopover({
             "div",
             {
               role: "list",
-              className: chipGroup.cn(
+              className: appShell.cn(
                 "flex-1 min-h-0 overflow-y-auto p-pad-md flex flex-col gap-[2px]",
                 "[scrollbar-width:thin] [scrollbar-color:var(--color-border-default)_transparent]",
                 "[&::-webkit-scrollbar]:w-[6px]",
@@ -1898,7 +3194,7 @@ function ViewsPopover({
                   "div",
                   {
                     role: "listitem",
-                    className: chipGroup.cn(
+                    className: appShell.cn(
                       "group/view flex items-stretch gap-[2px] rounded-radius-md",
                       isActive2 && "bg-bg-brand-subtle"
                     ),
@@ -1908,7 +3204,7 @@ function ViewsPopover({
                         {
                           type: "button",
                           onClick: () => onApply?.(view),
-                          className: chipGroup.cn(
+                          className: appShell.cn(
                             "flex-1 flex items-center gap-gp-md min-w-0",
                             "px-pad-md py-pad-sm rounded-radius-md",
                             "bg-transparent border-0 cursor-pointer outline-none text-left",
@@ -1919,7 +3215,7 @@ function ViewsPopover({
                             /* @__PURE__ */ jsxRuntime.jsx(
                               "span",
                               {
-                                className: chipGroup.cn(
+                                className: appShell.cn(
                                   "flex-1 text-body-sm font-normal truncate",
                                   isActive2 ? "font-semibold" : "font-medium"
                                 ),
@@ -1940,224 +3236,58 @@ function ViewsPopover({
                           onClick: () => onDelete(view.id),
                           "aria-label": typeof view.name === "string" ? `Excluir ${view.name}` : "Excluir",
                           title: "Excluir",
-                          className: chipGroup.cn(
+                          className: appShell.cn(
                             "grid place-items-center size-[28px] shrink-0 self-center",
                             "mr-pad-sm",
                             // respiro da borda direita (= sandbox)
                             "rounded-radius-md bg-transparent text-fg-muted",
                             "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__ */ jsxRuntime.jsx(lucideReact.Trash2, { strokeWidth: 1.8 })
-                        }
-                      )
-                    ]
-                  },
-                  view.id
-                );
-              })
-            }
-          ),
-          !hideCreate && onCreate && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none p-pad-md border-t border-border-default", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: onCreate,
-              className: chipGroup.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__ */ jsxRuntime.jsx(lucideReact.Plus, { strokeWidth: 2.2 }),
-                createLabel
-              ]
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-}
-const Switch = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
-  SwitchPrimitives__namespace.Root,
-  {
-    className: chipGroup.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__ */ jsxRuntime.jsx(
-      SwitchPrimitives__namespace.Thumb,
-      {
-        className: chipGroup.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__namespace.Root.displayName;
-const formFieldRoot = chipGroup.tv({
-  base: "flex flex-col gap-[7px] w-full"
-});
-const formFieldLabel = chipGroup.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 = chipGroup.tv({
-  base: "ml-[2px] text-fg-danger"
-});
-const formFieldMessage = chipGroup.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 = React.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__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(formFieldRoot(), className), children: [
-    label && !hideLabel && /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
-      {
-        htmlFor: id,
-        className: formFieldLabel({ disabled }),
-        children: [
-          label,
-          required2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+                            "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__ */ jsxRuntime.jsx(lucideReact.Trash2, { strokeWidth: 1.8 })
+                        }
+                      )
+                    ]
+                  },
+                  view.id
+                );
+              })
+            }
+          ),
+          !hideCreate && onCreate && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none p-pad-md border-t border-border-default", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onCreate,
+              className: appShell.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__ */ jsxRuntime.jsx(lucideReact.Plus, { strokeWidth: 2.2 }),
+                createLabel
+              ]
+            }
+          ) })
         ]
       }
-    ),
-    children({ id, state }),
-    message && /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        className: formFieldMessage({ state: messageState }),
-        role: messageState === "error" ? "alert" : void 0,
-        children: message
-      }
     )
   ] });
 }
-function renderAddon(content, key) {
-  if (typeof content === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupText, { children: content }) }, key);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: content }, key);
-}
-const FormFieldInput = React.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__ */ jsxRuntime.jsx(
-      FormField,
-      {
-        label,
-        required: required2,
-        helperText,
-        state,
-        errorMessage,
-        warningMessage,
-        successMessage,
-        className,
-        id,
-        disabled: inputProps.disabled,
-        children: ({ id: fieldId, state: fieldState }) => hasAddon ? /* @__PURE__ */ jsxRuntime.jsxs(appShell.InputGroup, { state: fieldState, size: size ?? void 0, children: [
-          startAddon !== void 0 && renderAddon(startAddon, "start"),
-          /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupInput, { ref: ref2, id: fieldId, ...inputHtmlProps }),
-          endAddon !== void 0 && renderAddon(endAddon, "end")
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-          input.Input,
-          {
-            ref: ref2,
-            id: fieldId,
-            state: fieldState,
-            size,
-            ...inputHtmlProps
-          }
-        )
-      }
-    );
-  }
-);
-FormFieldInput.displayName = "FormFieldInput";
-const dialog = chipGroup.tv({
+const dialog = appShell.tv({
   base: [
     // Override do DialogContent default (grid + p-pad-4xl + rounded-radius-base + shadow-sh-xl)
     "!gap-0 !p-0",
@@ -2171,7 +3301,7 @@ const dialog = chipGroup.tv({
     "flex flex-col overflow-hidden"
   ]
 });
-const closeBtn = chipGroup.tv({
+const closeBtn = appShell.tv({
   base: [
     "absolute top-[14px] right-[14px] z-[1]",
     "grid place-items-center size-[28px]",
@@ -2183,7 +3313,7 @@ const closeBtn = chipGroup.tv({
     "dark:hover:bg-bg-muted-hover"
   ]
 });
-const head = chipGroup.tv({
+const head = appShell.tv({
   base: [
     "flex items-center gap-[14px]",
     // sandbox 14px (não tem na escala)
@@ -2192,7 +3322,7 @@ const head = chipGroup.tv({
     "border-b border-border-default"
   ]
 });
-const headIcon = chipGroup.tv({
+const headIcon = appShell.tv({
   base: [
     "shrink-0 grid place-items-center size-form-lg",
     // 40×40 — sandbox
@@ -2201,7 +3331,7 @@ const headIcon = chipGroup.tv({
     "dark:bg-bg-accent dark:border-border-subtle"
   ]
 });
-const headTitleWrap = chipGroup.tv({
+const headTitleWrap = appShell.tv({
   base: [
     "flex-1 min-w-0",
     // Reserva espaço pro X close do DialogContent (absolute right-4 / size ~24px)
@@ -2209,7 +3339,7 @@ const headTitleWrap = chipGroup.tv({
     "pr-pad-3xl"
   ]
 });
-const title = chipGroup.tv({
+const title = appShell.tv({
   base: [
     "m-0 mb-[2px]",
     // leading-[1.3] balanceia o bloco verticalmente com o icon container 40px
@@ -2219,13 +3349,13 @@ const title = chipGroup.tv({
     "tracking-[-0.01em]"
   ]
 });
-const sub = chipGroup.tv({
+const sub = appShell.tv({
   base: "m-0 text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
-const body = chipGroup.tv({
+const body = appShell.tv({
   base: "flex flex-col gap-[18px] px-pad-4xl py-[22px]"
 });
-const toggleRow = chipGroup.tv({
+const toggleRow = appShell.tv({
   base: [
     "flex items-center gap-gp-xl",
     // 12px — sandbox
@@ -2241,7 +3371,7 @@ const toggleRow = chipGroup.tv({
     }
   }
 });
-const toggleIcon = chipGroup.tv({
+const toggleIcon = appShell.tv({
   base: [
     "shrink-0 grid place-items-center size-form-md rounded-radius-lg",
     // 36×36 / radius-lg=10px
@@ -2255,16 +3385,16 @@ const toggleIcon = chipGroup.tv({
     }
   }
 });
-const toggleText = chipGroup.tv({
+const toggleText = appShell.tv({
   base: "flex-1 min-w-0 flex flex-col gap-[3px]"
 });
-const toggleLabel = chipGroup.tv({
+const toggleLabel = appShell.tv({
   base: "text-body-md font-semibold text-fg-default leading-[1.3]"
 });
-const toggleDesc = chipGroup.tv({
+const toggleDesc = appShell.tv({
   base: "text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
-const foot = chipGroup.tv({
+const foot = appShell.tv({
   base: [
     "flex items-center justify-end gap-gp-lg",
     // 10px — sandbox
@@ -2324,7 +3454,7 @@ function AddViewModal({ open, onClose, onSubmit }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: foot(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           color: "secondary",
           variant: "outline",
@@ -2334,7 +3464,7 @@ function AddViewModal({ open, onClose, onSubmit }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           color: "primary",
           variant: "filled",
@@ -2359,11 +3489,14 @@ function TableToolbarViews({
   myOwnerKey = "me",
   divider,
   hideDivider,
-  soloLabel = "Default"
+  soloLabel = "Default",
+  allowCreate = true
 }) {
   const maxCustomTabs = Math.max(0, maxTabs - 1);
   const initialIds = React.useMemo(
-    () => 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
     []
   );
@@ -2379,11 +3512,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] = React.useState(false);
   const [popoverOpen, setPopoverOpen] = React.useState(false);
   const [confirmDeleteView, setConfirmDeleteView] = React.useState(null);
@@ -2392,7 +3527,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];
@@ -2445,7 +3583,7 @@ function TableToolbarViews({
         ariaLabel: "Visões salvas"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    allowCreate && /* @__PURE__ */ jsxRuntime.jsx(
       ViewsPopover,
       {
         open: popoverOpen,
@@ -2459,7 +3597,7 @@ function TableToolbarViews({
         onCreate: handleCreateClick
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    allowCreate && /* @__PURE__ */ jsxRuntime.jsx(
       AddViewModal,
       {
         open: addModalOpen,
@@ -2605,165 +3743,33 @@ const SYMBOL_OP = {
 };
 const PHRASE_OP = {
   contains: "contains",
-  notContains: "not contains",
-  startsWith: "starts with",
-  endsWith: "ends with"
-};
-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__namespace.Root;
-const SelectValue = SelectPrimitive__namespace.Value;
-const SelectTrigger = React__namespace.forwardRef(({ className, children, state = "default", ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Trigger,
-  {
-    ref: ref2,
-    className: chipGroup.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__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 text-fg-muted shrink-0" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-const SelectScrollUpButton = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.ScrollUpButton,
-  {
-    ref: ref2,
-    className: chipGroup.cn(
-      "flex cursor-default items-center justify-center py-pad-xs",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-const SelectScrollDownButton = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.ScrollDownButton,
-  {
-    ref: ref2,
-    className: chipGroup.cn(
-      "flex cursor-default items-center justify-center py-pad-xs",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
-  }
-));
-SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-const SelectContent = React__namespace.forwardRef(({ className, children, position: position2 = "popper", ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Content,
-  {
-    ref: ref2,
-    className: chipGroup.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__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SelectPrimitive__namespace.Viewport,
-        {
-          className: chipGroup.cn(
-            "p-pad-sm",
-            position2 === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-const SelectLabel = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Label,
-  {
-    ref: ref2,
-    className: chipGroup.cn("py-pad-sm pl-8 pr-2 text-body-md font-medium text-fg-muted", className),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Item,
-  {
-    ref: ref2,
-    className: chipGroup.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__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-const SelectSeparator = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Separator,
-  {
-    ref: ref2,
-    className: chipGroup.cn("-mx-1 my-1 h-px bg-border", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
+  notContains: "not contains",
+  startsWith: "starts with",
+  endsWith: "ends with"
+};
+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 DEFAULT_FILTER_OPERATORS = [
   { id: "equals", label: "é" },
   { id: "neq", label: "não é" },
@@ -2792,12 +3798,12 @@ function isFilterEntryActive(entry) {
   }
   return true;
 }
-const FIELD_BASE = chipGroup.cn(
+const FIELD_BASE = appShell.cn(
   "min-h-form-md h-form-md min-w-0 w-full",
   "rounded-radius-md",
   "text-body-sm font-normal"
 );
-const INPUT_FIELD = chipGroup.cn(
+const INPUT_FIELD = appShell.cn(
   FIELD_BASE,
   "px-pad-xl",
   "bg-bg-input dark:bg-bg-muted",
@@ -2838,7 +3844,7 @@ function FilterRowEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chipGroup.cn(
+      className: appShell.cn(
         // Mobile: vertical (1 select por linha). sm+: horizontal alinhado.
         "flex flex-col sm:flex-row sm:items-center gap-gp-md"
       ),
@@ -2857,7 +3863,7 @@ function FilterRowEditor({
               const nextOp = opValid2 ? filter.op : newOperators[0]?.id ?? filter.op;
               onChange({ ...filter, columnKey: v, op: nextOp, value: "" });
             },
-            className: chipGroup.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
+            className: appShell.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
             align: "start",
             "aria-label": "Campo",
             searchPlaceholder: "Buscar campo…",
@@ -2873,7 +3879,7 @@ function FilterRowEditor({
               /* @__PURE__ */ jsxRuntime.jsx(
                 SelectTrigger,
                 {
-                  className: chipGroup.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
+                  className: appShell.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
                   "aria-label": "Operador",
                   children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {})
                 }
@@ -2891,7 +3897,7 @@ function FilterRowEditor({
               /* @__PURE__ */ jsxRuntime.jsx(
                 SelectTrigger,
                 {
-                  className: chipGroup.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
+                  className: appShell.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
                   "aria-label": "Valor",
                   children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Selecione…" })
                 }
@@ -2911,7 +3917,7 @@ function FilterRowEditor({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chipGroup.Button,
+          appShell.Button,
           {
             color: "secondary",
             variant: "ghost",
@@ -3044,7 +4050,7 @@ function FilterPanel({
                 role: "tab",
                 "aria-selected": mode === "visual",
                 onClick: () => setMode("visual"),
-                className: chipGroup.cn(
+                className: appShell.cn(
                   "h-[30px] px-pad-lg rounded-radius-sm text-body-xs font-medium cursor-pointer outline-none focus-visible:shadow-sh-ring",
                   "transition-[background-color,color,box-shadow] duration-150",
                   mode === "visual" ? "bg-bg-accent text-fg-default font-semibold shadow-sh-sm" : "bg-transparent text-fg-muted hover:text-fg-default"
@@ -3059,7 +4065,7 @@ function FilterPanel({
                 role: "tab",
                 "aria-selected": mode === "advanced",
                 onClick: () => setMode("advanced"),
-                className: chipGroup.cn(
+                className: appShell.cn(
                   "h-[30px] px-pad-lg rounded-radius-sm text-body-xs font-medium cursor-pointer outline-none focus-visible:shadow-sh-ring",
                   "transition-[background-color,color,box-shadow] duration-150",
                   mode === "advanced" ? "bg-bg-accent text-fg-default font-semibold shadow-sh-sm" : "bg-transparent text-fg-muted hover:text-fg-default"
@@ -3086,7 +4092,7 @@ function FilterPanel({
         {
           type: "button",
           onClick: addRow,
-          className: chipGroup.cn(
+          className: appShell.cn(
             "inline-flex items-center gap-gp-sm h-form-md px-pad-2xl rounded-radius-lg",
             "bg-bg-brand text-fg-on-brand",
             "text-body-sm font-semibold cursor-pointer outline-none",
@@ -3104,7 +4110,7 @@ function FilterPanel({
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: chipGroup.cn(
+          className: appShell.cn(
             "flex-1 min-h-0 overflow-y-auto",
             "[scrollbar-width:thin] [scrollbar-color:var(--color-border-default)_transparent]",
             "[&::-webkit-scrollbar]:w-[6px]",
@@ -3138,7 +4144,7 @@ function FilterPanel({
         {
           type: "button",
           onClick: addRow,
-          className: chipGroup.cn(
+          className: appShell.cn(
             "flex items-center justify-center gap-gp-sm w-full",
             "min-h-form-md px-pad-xl rounded-radius-md",
             "bg-transparent text-fg-muted",
@@ -3186,25 +4192,25 @@ function FilterPanel({
           placeholder: `-- Ex:
 status = "active"
 AND value > 1000`,
-          className: chipGroup.cn(
+          className: appShell.cn(
             "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__ */ jsxRuntime.jsx("p", { className: "text-caption-sm text-fg-critical", children: advancedError }),
+      advancedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-caption-sm text-fg-danger", children: advancedError }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           onClick: applyAdvanced,
-          className: chipGroup.cn(
+          className: appShell.cn(
             "self-end px-pad-xl h-form-md rounded-radius-md",
             "bg-bg-brand text-fg-on-brand",
             "text-body-xs font-semibold",
@@ -3222,7 +4228,7 @@ AND value > 1000`,
           type: "button",
           onClick: clearAll,
           disabled: filters.length === 0,
-          className: chipGroup.cn(
+          className: appShell.cn(
             "text-body-xs font-medium text-fg-brand bg-transparent border-0 p-0 cursor-pointer outline-none",
             "hover:underline focus-visible:underline underline-offset-2",
             "disabled:opacity-50 disabled:pointer-events-none disabled:no-underline"
@@ -3253,7 +4259,7 @@ function FilterPopover({
       appShell.PopoverContent,
       {
         align,
-        className: chipGroup.cn(
+        className: appShell.cn(
           "w-[560px] max-w-[calc(100vw-32px)] max-h-[min(480px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           className
         ),
@@ -3262,7 +4268,7 @@ function FilterPopover({
     )
   ] });
 }
-const MENU_ITEM = chipGroup.cn(
+const MENU_ITEM = appShell.cn(
   "group/row relative flex items-center gap-pad-lg w-full",
   "px-pad-lg py-pad-md rounded-radius-sm",
   "bg-transparent border-0 cursor-pointer outline-none text-left",
@@ -3341,7 +4347,7 @@ function ToolbarSettingsMenu({
                 mobileViews.onSelect(item.id);
                 onBack();
               },
-              className: chipGroup.cn(
+              className: appShell.cn(
                 MENU_ITEM,
                 isActive2 && "bg-bg-brand-subtle text-fg-brand [&_svg]:text-fg-brand hover:bg-bg-brand-subtle hover:text-fg-brand"
               ),
@@ -3364,7 +4370,7 @@ function ToolbarSettingsMenu({
       appShell.PopoverContent,
       {
         align,
-        className: chipGroup.cn(
+        className: appShell.cn(
           "w-[320px] max-w-[calc(100vw-32px)] max-h-[min(520px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           wide && "md:w-[550px]",
           className
@@ -3383,7 +4389,7 @@ function ToolbarSettingsMenu({
                 {
                   type: "button",
                   onClick: () => setView(e.view),
-                  className: chipGroup.cn(MENU_ITEM, e.mobileOnly && "md:hidden"),
+                  className: appShell.cn(MENU_ITEM, e.mobileOnly && "md:hidden"),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(Icon, { strokeWidth: 1.8 }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: e.label }),
@@ -3396,17 +4402,17 @@ function ToolbarSettingsMenu({
             }),
             mobileViewToggle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden flex flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_SEP }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(MENU_LABEL, "pb-pad-lg"), children: viewToggleLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(MENU_LABEL, "pb-pad-lg"), children: viewToggleLabel }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_FIELD, children: mobileViewToggle })
             ] }),
             mobileDisplayToggle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden flex flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_SEP }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(MENU_LABEL, "pb-pad-lg"), children: mobileDisplayLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(MENU_LABEL, "pb-pad-lg"), children: mobileDisplayLabel }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_FIELD, children: mobileDisplayToggle })
             ] }),
             density && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_SEP }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(MENU_LABEL, "pb-pad-lg"), children: densityLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(MENU_LABEL, "pb-pad-lg"), children: densityLabel }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_FIELD, children: density })
             ] })
           ] })
@@ -3415,7 +4421,7 @@ function ToolbarSettingsMenu({
     )
   ] });
 }
-const floatingPanelStyles = chipGroup.tv({
+const floatingPanelStyles = appShell.tv({
   slots: {
     root: [
       "fixed z-50 flex flex-col overflow-hidden",
@@ -3642,390 +4648,125 @@ function FloatingPanel({
           "aria-labelledby": title2 ? titleId : void 0,
           "aria-describedby": description ? descId : void 0,
           style: maximized ? void 0 : { width: widthValue },
-          className: chipGroup.cn(s.root(), className),
-          children: [
-            resizable && !maximized && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                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__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
-              titleSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: titleSlot }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerText(), children: [
-                title2 && /* @__PURE__ */ jsxRuntime.jsxs("h2", { id: titleId, className: s.headerTitle(), children: [
-                  TitleIcon && /* @__PURE__ */ jsxRuntime.jsx(TitleIcon, { className: s.headerTitleIcon(), strokeWidth: 1.8 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: title2 })
-                ] }),
-                description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descId, className: s.headerDescription(), children: description })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerActions(), children: [
-                headerActions,
-                maximizable && /* @__PURE__ */ jsxRuntime.jsx(
-                  chipGroup.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__ */ jsxRuntime.jsx(lucideReact.Minimize2, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, {})
-                  }
-                ),
-                !hideClose && /* @__PURE__ */ jsxRuntime.jsx(
-                  chipGroup.Button,
-                  {
-                    type: "button",
-                    variant: "soft",
-                    color: "secondary",
-                    size: "icon-sm",
-                    "aria-label": "Fechar",
-                    onClick: () => onOpenChange(false),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.body(), children }),
-            footer && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: s.footer(), children: footer })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
-}
-const partStyles = chipGroup.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] = React.useState(defaultOpen);
-  if (!collapsible) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: s.section(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.headStatic(), children: title2 }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.body(), children })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: s.section(), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        className: s.head(),
-        onClick: () => setOpen((o) => !o),
-        "aria-expanded": open,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: title2 }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: chipGroup.cn(s.chev(), open && "rotate-180") })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.body(), children })
-  ] });
-}
-function FloatingPanelField({ label, value }) {
-  const s = partStyles();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.field(), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.fieldLabel(), children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.fieldValue(), children: value || "—" })
-  ] });
-}
-const textareaVariants = classVarianceAuthority.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__namespace.forwardRef(
-  ({ className, state, ...props }, ref2) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        className: chipGroup.cn(textareaVariants({ state }), className),
-        ref: ref2,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-const FormFieldTextarea = React.forwardRef(
-  ({
-    label,
-    required: required2,
-    helperText,
-    state,
-    errorMessage,
-    warningMessage,
-    successMessage,
-    className,
-    id,
-    ...textareaProps
-  }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
-    FormField,
-    {
-      label,
-      required: required2,
-      helperText,
-      state,
-      errorMessage,
-      warningMessage,
-      successMessage,
-      className,
-      id,
-      disabled: textareaProps.disabled,
-      children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    FormField,
-    {
-      label,
-      required: required2,
-      helperText,
-      state,
-      errorMessage,
-      warningMessage,
-      successMessage,
-      className,
-      id,
-      disabled,
-      children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsxRuntime.jsxs(
-        Select,
-        {
-          value,
-          defaultValue,
-          onValueChange,
-          disabled,
+          className: appShell.cn(s.root(), className),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SelectTrigger,
+            resizable && !maximized && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
               {
-                id: fieldId,
-                state: fieldState,
-                className: triggerClassName,
-                children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: placeholder2 })
+                ref: handleRef,
+                type: "button",
+                "aria-label": "Redimensionar panel",
+                "data-dragging": dragging || void 0,
+                onMouseDown: (e) => {
+                  setDragging(true);
+                  resize.onResizeStart(e);
+                },
+                className: s.handle()
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
-              SelectItem,
-              {
-                value: opt.value,
-                disabled: opt.disabled,
-                children: opt.label
-              },
-              opt.value
-            )) })
+            (title2 || description || titleSlot || headerActions || !hideClose || maximizable) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
+              titleSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: titleSlot }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerText(), children: [
+                title2 && /* @__PURE__ */ jsxRuntime.jsxs("h2", { id: titleId, className: s.headerTitle(), children: [
+                  TitleIcon && /* @__PURE__ */ jsxRuntime.jsx(TitleIcon, { className: s.headerTitleIcon(), strokeWidth: 1.8 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: title2 })
+                ] }),
+                description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descId, className: s.headerDescription(), children: description })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerActions(), children: [
+                headerActions,
+                maximizable && /* @__PURE__ */ jsxRuntime.jsx(
+                  appShell.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__ */ jsxRuntime.jsx(lucideReact.Minimize2, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, {})
+                  }
+                ),
+                !hideClose && /* @__PURE__ */ jsxRuntime.jsx(
+                  appShell.Button,
+                  {
+                    type: "button",
+                    variant: "soft",
+                    color: "secondary",
+                    size: "icon-sm",
+                    "aria-label": "Fechar",
+                    onClick: () => onOpenChange(false),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.body(), children }),
+            footer && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: s.footer(), children: footer })
           ]
         }
       )
-    }
+    ] }),
+    document.body
   );
 }
-const FormFieldCheckbox = React.forwardRef(
-  ({
-    label,
-    required: required2,
-    helperText,
-    state = "default",
-    errorMessage,
-    warningMessage,
-    successMessage,
-    className,
-    id: idProp,
-    disabled,
-    ...checkboxProps
-  }, ref2) => {
-    const autoId = React.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__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(formFieldRoot(), "gap-[5px]", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          badge.Checkbox,
-          {
-            ref: ref2,
-            id,
-            disabled,
-            ...checkboxProps
-          }
-        ),
-        label && /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            htmlFor: id,
-            className: chipGroup.cn(formFieldLabel({ disabled }), "cursor-pointer"),
-            children: [
-              label,
-              required2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
-            ]
-          }
-        )
-      ] }),
-      message && /* @__PURE__ */ jsxRuntime.jsx(
-        "p",
-        {
-          className: chipGroup.cn(formFieldMessage({ state: messageState }), "pl-[26px]"),
-          role: messageState === "error" ? "alert" : void 0,
-          children: message
-        }
-      )
+const partStyles = appShell.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] = React.useState(defaultOpen);
+  if (!collapsible) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: s.section(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.headStatic(), children: title2 }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.body(), children })
     ] });
   }
-);
-FormFieldCheckbox.displayName = "FormFieldCheckbox";
-const FormFieldSwitch = React.forwardRef(
-  ({
-    label,
-    required: required2,
-    helperText,
-    state = "default",
-    errorMessage,
-    warningMessage,
-    successMessage,
-    className,
-    id: idProp,
-    disabled,
-    switchPosition = "end",
-    ...switchProps
-  }, ref2) => {
-    const autoId = React.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__ */ jsxRuntime.jsx(Switch, { ref: ref2, id, disabled, ...switchProps });
-    const labelEl = label && /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: s.section(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        htmlFor: id,
-        className: chipGroup.cn(formFieldLabel({ disabled }), "cursor-pointer flex-1"),
+        type: "button",
+        className: s.head(),
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
         children: [
-          label,
-          required2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: title2 }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: appShell.cn(s.chev(), open && "rotate-180") })
         ]
       }
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(formFieldRoot(), "gap-[5px]", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-gp-md", children: switchPosition === "start" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        switchEl,
-        labelEl
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        labelEl,
-        switchEl
-      ] }) }),
-      message && /* @__PURE__ */ jsxRuntime.jsx(
-        "p",
-        {
-          className: formFieldMessage({ state: messageState }),
-          role: messageState === "error" ? "alert" : void 0,
-          children: message
-        }
-      )
-    ] });
-  }
-);
-FormFieldSwitch.displayName = "FormFieldSwitch";
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.body(), children })
+  ] });
+}
+function FloatingPanelField({ label, value }) {
+  const s = partStyles();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.field(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.fieldLabel(), children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.fieldValue(), children: value || "—" })
+  ] });
+}
 class ColumnTypeRegistry {
   constructor() {
     __publicField(this, "types", /* @__PURE__ */ new Map());
@@ -4061,7 +4802,7 @@ class ColumnTypeRegistry {
   }
 }
 const columnTypeRegistry = new ColumnTypeRegistry();
-const FILTER_FIELD_CLASS = chipGroup.cn(
+const FILTER_FIELD_CLASS = appShell.cn(
   // Box-model
   "flex min-h-form-md h-form-md w-full items-center justify-between gap-gp-md",
   "rounded-radius-md px-pad-xl",
@@ -4075,7 +4816,7 @@ const FILTER_FIELD_CLASS = chipGroup.cn(
   "focus-visible:border-border-brand focus-visible:shadow-sh-ring",
   "data-[state=open]:border-border-brand data-[state=open]:shadow-sh-ring"
 );
-const FILTER_FIELD_SIZE = chipGroup.cn(
+const FILTER_FIELD_SIZE = appShell.cn(
   "min-h-form-md h-form-md rounded-radius-md"
 );
 function FastSingleSelectList({
@@ -4094,7 +4835,7 @@ function FastSingleSelectList({
           role: "option",
           "aria-selected": isSel,
           onClick: () => onSelect(opt.value),
-          className: chipGroup.cn(
+          className: appShell.cn(
             "flex items-center gap-gp-md w-full px-pad-md py-pad-sm rounded-radius-md",
             "text-body-md text-fg-default text-left cursor-pointer",
             "hover:bg-bg-muted focus-visible:bg-bg-muted focus-visible:outline-none",
@@ -4104,7 +4845,7 @@ function FastSingleSelectList({
             /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.Check,
               {
-                className: chipGroup.cn(
+                className: appShell.cn(
                   "size-icon-sm shrink-0 text-fg-brand",
                   isSel ? "opacity-100" : "opacity-0"
                 ),
@@ -4312,73 +5053,73 @@ function Calendar({
     reactDayPicker.DayPicker,
     {
       showOutsideDays,
-      className: chipGroup.cn(
+      className: appShell.cn(
         "group/calendar bg-transparent p-0 [--cell-size:2.5rem]",
         className
       ),
       captionLayout,
       classNames: {
-        root: chipGroup.cn("w-full", defaultClassNames.root),
-        months: chipGroup.cn("relative flex flex-col gap-gp-2xl sm:flex-row sm:gap-gp-4xl", defaultClassNames.months),
-        month: chipGroup.cn("flex w-full flex-col gap-gp-2xl", defaultClassNames.month),
-        nav: chipGroup.cn(
+        root: appShell.cn("w-full", defaultClassNames.root),
+        months: appShell.cn("relative flex flex-col gap-gp-2xl sm:flex-row sm:gap-gp-4xl", defaultClassNames.months),
+        month: appShell.cn("flex w-full flex-col gap-gp-2xl", defaultClassNames.month),
+        nav: appShell.cn(
           "absolute inset-x-0 top-0 flex w-full items-center justify-between",
           defaultClassNames.nav
         ),
-        button_previous: chipGroup.cn(
+        button_previous: appShell.cn(
           "inline-flex items-center justify-center size-[--cell-size] rounded-full text-fg-muted hover:bg-bg-muted transition-colors select-none aria-disabled:opacity-30",
           defaultClassNames.button_previous
         ),
-        button_next: chipGroup.cn(
+        button_next: appShell.cn(
           "inline-flex items-center justify-center size-[--cell-size] rounded-full text-fg-muted hover:bg-bg-muted transition-colors select-none aria-disabled:opacity-30",
           defaultClassNames.button_next
         ),
-        month_caption: chipGroup.cn(
+        month_caption: appShell.cn(
           "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
           defaultClassNames.month_caption
         ),
-        caption_label: chipGroup.cn(
+        caption_label: appShell.cn(
           "text-body-md font-medium font-semibold select-none",
           captionLayout === "dropdown" ? "hidden" : "",
           defaultClassNames.caption_label
         ),
-        dropdowns: chipGroup.cn(
+        dropdowns: appShell.cn(
           "flex items-center gap-gp-md",
           defaultClassNames.dropdowns
         ),
-        dropdown: chipGroup.cn(
+        dropdown: appShell.cn(
           "cursor-pointer appearance-none bg-transparent text-body-md font-medium font-semibold text-fg-default outline-none",
           defaultClassNames.dropdown
         ),
-        months_dropdown: chipGroup.cn("", defaultClassNames.months_dropdown),
-        years_dropdown: chipGroup.cn("", defaultClassNames.years_dropdown),
+        months_dropdown: appShell.cn("", defaultClassNames.months_dropdown),
+        years_dropdown: appShell.cn("", defaultClassNames.years_dropdown),
         table: "w-full border-collapse",
-        weekdays: chipGroup.cn("flex", defaultClassNames.weekdays),
-        weekday: chipGroup.cn(
+        weekdays: appShell.cn("flex", defaultClassNames.weekdays),
+        weekday: appShell.cn(
           "flex-1 min-w-8 max-w-12 text-body-sm font-normal text-fg-muted select-none text-center",
           defaultClassNames.weekday
         ),
-        week: chipGroup.cn("mt-gp-md flex w-full", defaultClassNames.week),
-        day: chipGroup.cn(
+        week: appShell.cn("mt-gp-md flex w-full", defaultClassNames.week),
+        day: appShell.cn(
           // flex-1: cada dia ocupa 1/7 igual ao header de weekdays (que usa flex-1).
           // Sem isso o dia dimensionava por aspect-square e desalinhava das colunas.
           "group/day relative flex-1 aspect-square min-w-8 max-w-12 p-0 text-center select-none",
           defaultClassNames.day
         ),
-        range_start: chipGroup.cn("rounded-l-full", defaultClassNames.range_start),
-        range_end: chipGroup.cn("rounded-r-full", defaultClassNames.range_end),
-        range_middle: chipGroup.cn("", defaultClassNames.range_middle),
-        today: chipGroup.cn("", defaultClassNames.today),
-        outside: chipGroup.cn(
+        range_start: appShell.cn("rounded-l-full", defaultClassNames.range_start),
+        range_end: appShell.cn("rounded-r-full", defaultClassNames.range_end),
+        range_middle: appShell.cn("", defaultClassNames.range_middle),
+        today: appShell.cn("", defaultClassNames.today),
+        outside: appShell.cn(
           "text-fg-subtle opacity-40",
           defaultClassNames.outside
         ),
-        disabled: chipGroup.cn("text-fg-disabled opacity-50", defaultClassNames.disabled),
-        hidden: chipGroup.cn("invisible", defaultClassNames.hidden),
+        disabled: appShell.cn("text-fg-disabled opacity-50", defaultClassNames.disabled),
+        hidden: appShell.cn("invisible", defaultClassNames.hidden),
         ...classNames
       },
       components: {
-        Root: ({ className: rootCn, rootRef, ...rootProps }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "calendar", ref: rootRef, className: chipGroup.cn(rootCn), ...rootProps }),
+        Root: ({ className: rootCn, rootRef, ...rootProps }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "calendar", ref: rootRef, className: appShell.cn(rootCn), ...rootProps }),
         Chevron: ({ orientation }) => {
           if (orientation === "left") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "size-4" });
           return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "size-4" });
@@ -4413,7 +5154,7 @@ function CalendarDayButton({
       "data-range-start": isRangeStart || void 0,
       "data-range-end": isRangeEnd || void 0,
       "data-range-middle": isRangeMiddle || void 0,
-      className: chipGroup.cn(
+      className: appShell.cn(
         "relative flex aspect-square w-full items-center justify-center text-body-md font-normal leading-none outline-none transition-colors",
         // Default shape
         "rounded-full",
@@ -4650,7 +5391,7 @@ function MultiSelectDropdown({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {
-          className: chipGroup.cn(
+          className: appShell.cn(
             "flex items-center gap-gp-md w-full",
             "px-pad-md py-pad-sm rounded-radius-md",
             "text-body-md text-fg-default text-left cursor-pointer",
@@ -4659,7 +5400,7 @@ function MultiSelectDropdown({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              badge.Checkbox,
+              Checkbox,
               {
                 checked: isChecked,
                 onCheckedChange: () => toggle(opt.value),
@@ -5348,9 +6089,9 @@ const BadgeColumnType = {
     const opt = findOption(value, options);
     if (!opt) {
       if (value == null) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { size: "sm", children: String(value) });
+      return /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { size: "sm", children: String(value) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { size: "sm", color: resolveChipColor(opt.color), children: opt.label });
+    return /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { size: "sm", color: resolveChipColor(opt.color), children: opt.label });
   },
   formatValue: (v) => v == null ? "" : String(v),
   defaultAlign: "left",
@@ -5394,7 +6135,7 @@ const TagsColumnType = {
           className: "flex items-center gap-gp-md p-pad-xs rounded-radius-sm hover:bg-bg-muted cursor-pointer",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              badge.Checkbox,
+              Checkbox,
               {
                 checked: selected.has(String(o.value)),
                 onCheckedChange: () => toggle(String(o.value))
@@ -5421,7 +6162,7 @@ const TagsColumnType = {
         className: "flex items-center gap-gp-md p-pad-xs rounded-radius-sm hover:bg-bg-muted cursor-pointer",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            badge.Checkbox,
+            Checkbox,
             {
               checked: selected.has(String(o.value)),
               onCheckedChange: () => toggle(String(o.value))
@@ -5455,7 +6196,7 @@ const TagsColumnType = {
     if (arr.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center flex-wrap gap-gp-2xs", children: arr.map((v) => {
       const opt = findOption(v, options);
-      return /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { size: "sm", color: resolveChipColor(opt?.color), children: opt?.label ?? v }, v);
+      return /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { size: "sm", color: resolveChipColor(opt?.color), children: opt?.label ?? v }, v);
     }) });
   },
   formatValue: (v) => toStringArray(v).join(", "),
@@ -5737,7 +6478,7 @@ function ToolbarSimpleFilterDrawer({
       titleIcon: lucideReact.SlidersHorizontal,
       footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chipGroup.Button,
+          appShell.Button,
           {
             variant: "ghost",
             color: "secondary",
@@ -5749,7 +6490,7 @@ function ToolbarSimpleFilterDrawer({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chipGroup.Button,
+          appShell.Button,
           {
             variant: "filled",
             color: "primary",
@@ -5797,7 +6538,7 @@ const Pagination = ({
   {
     role: "navigation",
     "aria-label": "Paginação",
-    className: chipGroup.cn("inline-flex items-center gap-gp-xs", className),
+    className: appShell.cn("inline-flex items-center gap-gp-xs", className),
     ...props
   }
 );
@@ -5806,7 +6547,7 @@ const PaginationContent = React__namespace.forwardRef(({ className, ...props },
   "ul",
   {
     ref: ref2,
-    className: chipGroup.cn(
+    className: appShell.cn(
       "inline-flex items-center gap-[2px]",
       "bg-bg-muted rounded-radius-lg p-[3px] mx-gp-sm h-form-md",
       className
@@ -5815,7 +6556,7 @@ const PaginationContent = React__namespace.forwardRef(({ className, ...props },
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-const PaginationItem = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref: ref2, className: chipGroup.cn("", className), ...props }));
+const PaginationItem = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref: ref2, className: appShell.cn("", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 const paginationLinkVariants = classVarianceAuthority.cva(
   [
@@ -5842,7 +6583,7 @@ const PaginationLink = React__namespace.forwardRef(({ className, isActive: isAct
     ref: ref2,
     type,
     "aria-current": isActive2 ? "page" : void 0,
-    className: chipGroup.cn(paginationLinkVariants({ isActive: isActive2 }), className),
+    className: appShell.cn(paginationLinkVariants({ isActive: isActive2 }), className),
     ...props
   }
 ));
@@ -5864,7 +6605,7 @@ const PaginationPrevious = React__namespace.forwardRef(
       ref: ref2,
       type,
       "aria-label": ariaLabel ?? "Página anterior",
-      className: chipGroup.cn(paginationNavVariants(), className),
+      className: appShell.cn(paginationNavVariants(), className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, {})
     }
@@ -5878,7 +6619,7 @@ const PaginationNext = React__namespace.forwardRef(
       ref: ref2,
       type,
       "aria-label": ariaLabel ?? "Próxima página",
-      className: chipGroup.cn(paginationNavVariants(), className),
+      className: appShell.cn(paginationNavVariants(), className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {})
     }
@@ -5892,7 +6633,7 @@ const PaginationFirst = React__namespace.forwardRef(
       ref: ref2,
       type,
       "aria-label": ariaLabel ?? "Primeira página",
-      className: chipGroup.cn(paginationNavVariants(), className),
+      className: appShell.cn(paginationNavVariants(), className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, {})
     }
@@ -5906,7 +6647,7 @@ const PaginationLast = React__namespace.forwardRef(
       ref: ref2,
       type,
       "aria-label": ariaLabel ?? "Última página",
-      className: chipGroup.cn(paginationNavVariants(), className),
+      className: appShell.cn(paginationNavVariants(), className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, {})
     }
@@ -5920,7 +6661,7 @@ const PaginationEllipsis = ({
   "span",
   {
     "aria-hidden": "true",
-    className: chipGroup.cn(
+    className: appShell.cn(
       "inline-flex items-center justify-center min-w-[22px] h-[30px]",
       "text-body-sm font-normal text-fg-muted tracking-wider select-none",
       className
@@ -5967,7 +6708,7 @@ function FooterTable({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "footer",
     {
-      className: chipGroup.cn(
+      className: appShell.cn(
         // Mobile: só a paginação, centralizada (o bloco esquerdo some).
         "flex flex-col sm:flex-row max-sm:items-center sm:items-center sm:justify-between",
         "gap-gp-2xl",
@@ -6072,7 +6813,7 @@ function FooterTableSkeleton({
     {
       "aria-busy": "true",
       "aria-label": "Carregando paginação",
-      className: chipGroup.cn(
+      className: appShell.cn(
         "flex flex-col sm:flex-row sm:items-center sm:justify-between",
         "gap-gp-2xl",
         className
@@ -6093,36 +6834,36 @@ function FooterTableSkeleton({
     }
   );
 }
-const root = chipGroup.tv({
+const root = appShell.tv({
   base: [
     "flex flex-1 min-h-0 overflow-hidden"
     // Sem moldura outer — kanban assume a área disponível
   ]
 });
-const board = chipGroup.tv({
+const board = appShell.tv({
   base: [
     "flex flex-1 gap-gp-2xl p-0",
     "overflow-x-auto overflow-y-hidden scrollbar-thin"
   ]
 });
-const column = chipGroup.tv({
+const column = appShell.tv({
   base: [
     "flex flex-col w-[296px] shrink-0 max-h-full",
     "bg-bg-muted rounded-radius-xl",
     "overflow-hidden"
   ]
 });
-const columnHead = chipGroup.tv({
+const columnHead = appShell.tv({
   base: [
     "flex items-center gap-gp-md",
     "px-pad-xl pt-pad-xl pb-pad-sm",
     "bg-transparent"
   ]
 });
-const columnDot = chipGroup.tv({
+const columnDot = appShell.tv({
   base: "size-[8px] rounded-radius-full shrink-0"
 });
-const columnTitle = chipGroup.tv({
+const columnTitle = appShell.tv({
   base: [
     "m-0 text-body-md font-medium text-fg-default",
     // Não expande (badge fica grudado à direita do título)
@@ -6130,7 +6871,7 @@ const columnTitle = chipGroup.tv({
     "whitespace-nowrap overflow-hidden text-ellipsis"
   ]
 });
-const columnCount = chipGroup.tv({
+const columnCount = appShell.tv({
   base: [
     "inline-flex items-center justify-center shrink-0",
     "min-w-[20px] h-[20px] px-pad-sm",
@@ -6139,27 +6880,27 @@ const columnCount = chipGroup.tv({
     "[font-variant-numeric:tabular-nums]"
   ]
 });
-const columnActionsSpacer = chipGroup.tv({
+const columnActionsSpacer = appShell.tv({
   base: "ml-auto inline-flex items-center gap-gp-2xs"
 });
-const columnBody = chipGroup.tv({
+const columnBody = appShell.tv({
   base: [
     "flex flex-1 flex-col gap-gp-md min-h-0",
     "px-pad-md pt-sp-xs pb-pad-md",
     "overflow-y-auto overflow-x-hidden scrollbar-thin"
   ]
 });
-const columnEmpty = chipGroup.tv({
+const columnEmpty = appShell.tv({
   base: [
     "flex flex-1 flex-col items-center justify-center gap-gp-sm",
     "py-pad-3xl px-pad-xl",
     "text-center text-body-sm font-normal text-fg-subtle"
   ]
 });
-const columnEmptyIcon = chipGroup.tv({
+const columnEmptyIcon = appShell.tv({
   base: "size-icon-md text-fg-subtle opacity-70"
 });
-const columnAdd = chipGroup.tv({
+const columnAdd = appShell.tv({
   base: [
     "inline-flex items-center justify-center gap-gp-sm",
     "mx-pad-md mb-pad-md mt-sp-2xs",
@@ -6172,7 +6913,7 @@ const columnAdd = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
   ]
 });
-const card = chipGroup.tv({
+const card = appShell.tv({
   base: [
     "group/kanban-card",
     "relative flex flex-col gap-gp-md",
@@ -6216,7 +6957,7 @@ const card = chipGroup.tv({
     { selected: true, reserveCheck: true, class: "!pl-[36px]" }
   ]
 });
-const cardCheck = chipGroup.tv({
+const cardCheck = appShell.tv({
   base: [
     "absolute top-[18px] left-[12px] z-[1]",
     "opacity-0 transition-opacity duration-150",
@@ -6227,7 +6968,7 @@ const cardCheck = chipGroup.tv({
     selected: { true: "!opacity-100" }
   }
 });
-const cardMenuSlot = chipGroup.tv({
+const cardMenuSlot = appShell.tv({
   base: [
     "absolute top-[6px] right-[6px] z-[2]",
     "opacity-0",
@@ -6236,53 +6977,53 @@ const cardMenuSlot = chipGroup.tv({
     "group-focus-visible/kanban-card:opacity-100"
   ]
 });
-const cardHead = chipGroup.tv({
+const cardHead = appShell.tv({
   base: "flex items-center gap-gp-md pr-[28px]"
 });
-const cardTitleWrap = chipGroup.tv({
+const cardTitleWrap = appShell.tv({
   base: "flex-1 min-w-0 flex flex-col gap-gp-2xs"
 });
-const cardTitle = chipGroup.tv({
+const cardTitle = appShell.tv({
   base: [
     "text-body-md font-medium text-fg-default leading-[1.3]",
     "whitespace-nowrap overflow-hidden text-ellipsis"
   ]
 });
-const cardSubtitle = chipGroup.tv({
+const cardSubtitle = appShell.tv({
   base: "text-caption-sm text-fg-muted [font-variant-numeric:tabular-nums]"
 });
-const cardDesc = chipGroup.tv({
+const cardDesc = appShell.tv({
   base: [
     "m-0 text-body-sm font-normal leading-[1.45] text-fg-muted",
     "[display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical]",
     "overflow-hidden"
   ]
 });
-const cardMeta = chipGroup.tv({
+const cardMeta = appShell.tv({
   base: "flex items-center justify-between gap-gp-md"
 });
-const cardValue = chipGroup.tv({
+const cardValue = appShell.tv({
   base: "text-body-sm font-semibold text-fg-default [font-variant-numeric:tabular-nums]"
 });
-const cardFoot = chipGroup.tv({
+const cardFoot = appShell.tv({
   base: [
     "flex items-center justify-between gap-gp-md",
     "pt-pad-md border-t border-border-subtle"
   ]
 });
-const cardDragging = chipGroup.tv({
+const cardDragging = appShell.tv({
   base: "opacity-40 cursor-grabbing"
 });
-const columnDropTarget = chipGroup.tv({
+const columnDropTarget = appShell.tv({
   base: "outline outline-2 outline-offset-[-2px] outline-border-brand bg-bg-brand-subtle/30 transition-[outline,background-color] duration-150"
 });
-const columnDropInvalidDimmed = chipGroup.tv({
+const columnDropInvalidDimmed = appShell.tv({
   base: "opacity-50 transition-opacity duration-200"
 });
-const columnDropInvalidOver = chipGroup.tv({
+const columnDropInvalidOver = appShell.tv({
   base: "cursor-not-allowed"
 });
-const dropPlaceholder = chipGroup.tv({
+const dropPlaceholder = appShell.tv({
   base: [
     "h-[36px] flex items-center justify-center shrink-0",
     "rounded-radius-md border border-dashed border-border-brand",
@@ -6440,7 +7181,7 @@ function Kanban({
       col.id
     );
   }) });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(root(), className), role: "region", "aria-label": "Quadro Kanban", children: enableDnD ? /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(root(), className), role: "region", "aria-label": "Quadro Kanban", children: enableDnD ? /* @__PURE__ */ jsxRuntime.jsxs(
     core.DndContext,
     {
       sensors,
@@ -6451,7 +7192,7 @@ function Kanban({
       onDragCancel: handleDragCancel,
       children: [
         boardContent,
-        /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: activeCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(card({ selected: false, open: false }), "rotate-2 opacity-90 shadow-sh-lg"), children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: activeCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(card({ selected: false, open: false }), "rotate-2 opacity-90 shadow-sh-lg"), children: /* @__PURE__ */ jsxRuntime.jsx(
           KanbanCardContent,
           {
             card: activeCard,
@@ -6503,7 +7244,7 @@ function KanbanColumnInner({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: chipGroup.cn(
+      className: appShell.cn(
         column(),
         showInvalidDim && columnDropInvalidDimmed(),
         showInvalidOver && columnDropInvalidOver(),
@@ -6524,7 +7265,7 @@ function KanbanColumnInner({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: columnCount(), children: count }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: columnActionsSpacer(), children: [
             onAddCard && /* @__PURE__ */ jsxRuntime.jsx(
-              chipGroup.Button,
+              appShell.Button,
               {
                 variant: "ghost",
                 color: "secondary",
@@ -6599,7 +7340,7 @@ function renderColumnMenu({
   }
   if (onColumnMenu) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         variant: "ghost",
         color: "secondary",
@@ -6659,7 +7400,7 @@ function KanbanCardOuter({
     "article",
     {
       ref: enableDnD ? setNodeRef : void 0,
-      className: chipGroup.cn(
+      className: appShell.cn(
         card({ selected, open, reserveCheck: showCheckbox }),
         isBeingDragged && cardDragging(),
         enableDnD && "cursor-grab active:cursor-grabbing"
@@ -6670,7 +7411,7 @@ function KanbanCardOuter({
       ...a11yProps,
       children: [
         showCheckbox && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardCheck({ selected }), onClick: handleStop, onPointerDown: handleStop, children: /* @__PURE__ */ jsxRuntime.jsx(
-          badge.Checkbox,
+          Checkbox,
           {
             checked: selected,
             onCheckedChange: () => onToggleSelect?.(card$1.id),
@@ -6724,7 +7465,7 @@ function renderCardMenu({
   }
   if (onCardMenu) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardMenuSlot(), onClick: handleStop, onPointerDown: handleStop, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         variant: "ghost",
         color: "secondary",
@@ -6748,7 +7489,7 @@ function KanbanAutoMenu({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         variant: "ghost",
         color: "secondary",
@@ -15536,7 +16277,7 @@ const ConnectedDroppable = connect(makeMapStateToProps, mapDispatchToProps, (sta
   context: StoreContext,
   areStatePropsEqual: isStrictEqual
 })(Droppable);
-const listStyles = chipGroup.tv({
+const listStyles = appShell.tv({
   slots: {
     root: "flex flex-col",
     /* grupos */
@@ -15650,7 +16391,7 @@ function ListItem({
       ref: innerRef,
       role: "article",
       "aria-selected": state.selected || void 0,
-      className: chipGroup.cn(s.item(), className),
+      className: appShell.cn(s.item(), className),
       onClick: onClick ? handleClick : void 0,
       ...draggableProps,
       children: [
@@ -15665,7 +16406,7 @@ function ListItem({
           }
         ),
         selectable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.checkbox(), onClick: stop, onPointerDown: stop, children: /* @__PURE__ */ jsxRuntime.jsx(
-          badge.Checkbox,
+          Checkbox,
           {
             checked: state.selected,
             onCheckedChange: () => onToggleSelect?.(item.id),
@@ -15683,7 +16424,7 @@ function ListItem({
           item.meta && item.meta.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.metaRow(), children: item.meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: chipGroup.cn(s.metaCol(), m.align === "end" && "items-end text-right"),
+              className: appShell.cn(s.metaCol(), m.align === "end" && "items-end text-right"),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.metaLabel(), children: m.label }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.metaValue(), children: m.value })
@@ -15700,7 +16441,7 @@ function ListItem({
 }
 function ListAutoMenu({ items }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Button, { variant: "ghost", color: "secondary", size: "icon-2xs", "aria-label": "Ações", title: "Ações", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(appShell.Button, { variant: "ghost", color: "secondary", size: "icon-2xs", "aria-label": "Ações", title: "Ações", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuContent, { align: "end", sideOffset: 4, children: items.map(
       (item, idx) => item.separator ? /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}, `sep-${idx}`) : /* @__PURE__ */ jsxRuntime.jsxs(
         appShell.DropdownMenuItem,
@@ -15800,7 +16541,7 @@ function StandardLayout({
     {
       ref: provided.innerRef,
       ...provided.droppableProps,
-      className: chipGroup.cn(s.root({ density }), snapshot.isDraggingOver && s.dropZoneActive()),
+      className: appShell.cn(s.root({ density }), snapshot.isDraggingOver && s.dropZoneActive()),
       children: [
         rows,
         provided.placeholder
@@ -15848,7 +16589,7 @@ function GroupSection({
     },
     item.id
   ));
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: chipGroup.cn(s.group(), groupSurface && s.groupPanel()), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: appShell.cn(s.group(), groupSurface && s.groupPanel()), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.groupHeader(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -15861,7 +16602,7 @@ function GroupSection({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.ChevronDown,
             {
-              className: chipGroup.cn("size-[16px] transition-transform", !open && "-rotate-90")
+              className: appShell.cn("size-[16px] transition-transform", !open && "-rotate-90")
             }
           )
         }
@@ -15875,7 +16616,7 @@ function GroupSection({
       {
         ref: provided.innerRef,
         ...provided.droppableProps,
-        className: chipGroup.cn(
+        className: appShell.cn(
           s.groupBody({ density }),
           "min-h-[44px]",
           snapshot.isDraggingOver && s.dropZoneActive()
@@ -16135,7 +16876,7 @@ function NestedTree({
       isOpen && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: chipGroup.cn(
+          className: appShell.cn(
             "pl-pad-xl",
             branchContainer(branchHighlight, node.id, trail, subtree)
           ),
@@ -16196,7 +16937,7 @@ function ExpandToggle({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         lucideReact.ChevronRight,
         {
-          className: chipGroup.cn("size-[16px] transition-transform", open && "rotate-90")
+          className: appShell.cn("size-[16px] transition-transform", open && "rotate-90")
         }
       )
     }
@@ -16364,13 +17105,13 @@ function List({
     [layout, onMove, onReorder]
   );
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(s.root({ density }), className), children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.skeleton(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(s.skeletonBar(), "w-1/3 mb-gp-md") }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(s.skeletonBar(), "w-2/3") })
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.root({ density }), className), children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.skeleton(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.skeletonBar(), "w-1/3 mb-gp-md") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.skeletonBar(), "w-2/3") })
     ] }, i)) });
   }
   if (!items.length) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(s.root({ density }), className), children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.emptyState(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.root({ density }), className), children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.emptyState(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Inbox, { className: "size-icon-md opacity-70", "aria-hidden": true }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Nada por aqui ainda." })
     ] }) });
@@ -16427,11 +17168,11 @@ function List({
     }
   );
   if (!dndEnabled) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn("w-full", className), children: layoutEl });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn("w-full", className), children: layoutEl });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(DragDropContext, { onDragEnd: handleDragEnd, children: layoutEl }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(DragDropContext, { onDragEnd: handleDragEnd, children: layoutEl }) });
 }
-const dataTableStyles = chipGroup.tv({
+const dataTableStyles = appShell.tv({
   slots: {
     root: [
       // 16px (gp-2xl) entre toolbar e tabela
@@ -16686,6 +17427,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 {};
@@ -16693,10 +17444,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;
@@ -16704,10 +17451,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);
@@ -16727,33 +17480,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] = React.useState({});
   const rafIdRef = React.useRef(null);
   const columnsRef = React.useRef(columns);
@@ -16819,6 +17602,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
@@ -17639,13 +18425,25 @@ function useDataTableController(props, ref2) {
     [props.persistId]
   );
   const scrollContainerRef = React.useRef(null);
+  const [internalViewMode, setInternalViewMode] = React.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,
@@ -17691,11 +18489,6 @@ function useDataTableController(props, ref2) {
     onDensityChange: props.onDensityChange,
     initialDensity: persistedInitial?.density
   });
-  const [internalViewMode, setInternalViewMode] = React.useState(
-    // Hidrata do localStorage (v3+) com fallback pra prop `defaultViewMode`
-    persistedInitial?.viewMode ?? props.defaultViewMode ?? "table"
-  );
-  const viewMode = props.viewMode ?? internalViewMode;
   const setViewMode = React.useCallback((mode) => {
     if (props.viewMode === void 0) setInternalViewMode(mode);
     props.onViewModeChange?.(mode);
@@ -17878,7 +18671,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);
@@ -17976,7 +18769,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" });
@@ -18312,7 +19104,7 @@ function DataTableNoResults({
   onClearFilters
 } = {}) {
   const resolvedAction = action ?? (onClearFilters ? /* @__PURE__ */ jsxRuntime.jsx(
-    chipGroup.Button,
+    appShell.Button,
     {
       size: "sm",
       variant: "outline",
@@ -18365,7 +19157,7 @@ function DataTableColumnMenu({
   }, [open, keepMounted]);
   return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         size: "icon-2xs",
         variant: "ghost",
@@ -18461,7 +19253,7 @@ function DataTableActionsCell({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-2xs justify-end w-full", children: [
     inlineActions.map((a) => /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         size: "icon-2xs",
         variant: "ghost",
@@ -18479,7 +19271,7 @@ function DataTableActionsCell({
     )),
     menuActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           size: "icon-2xs",
           variant: "ghost",
@@ -18542,7 +19334,7 @@ function DataTableSortableHeadCell({
     position: isDragging2 ? "relative" : void 0
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    badge.TableHeadCell,
+    TableHeadCell,
     {
       ...headCellProps,
       ref: setNodeRef,
@@ -18594,19 +19386,19 @@ function DataTableTotalizerRow({
     "div",
     {
       role: "row",
-      className: chipGroup.cn(
+      className: appShell.cn(
         "flex w-max min-w-full",
         "sticky bottom-0 z-[8]",
         "bg-bg-table-head border-t border-border-table",
         "h-[42px]"
       ),
       children: [
-        hasSelection && /* @__PURE__ */ jsxRuntime.jsx(badge.TableCell, { width: 56, align: "center", className: "!px-0" }),
+        hasSelection && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { width: 56, align: "center", className: "!px-0" }),
         columns.map((col) => {
           const field = String(col.field);
           const content = renderAggregate(col, rows, overrides?.[field]);
           return /* @__PURE__ */ jsxRuntime.jsx(
-            badge.TableCell,
+            TableCell,
             {
               field,
               width: columnWidths[field],
@@ -18838,7 +19630,7 @@ function DataTableTreeToggle({
               e.stopPropagation();
               onToggle();
             },
-            className: chipGroup.cn(
+            className: appShell.cn(
               "shrink-0 flex items-center justify-center",
               "size-icon-md rounded-radius-sm",
               "text-fg-muted hover:text-fg-strong hover:bg-bg-muted",
@@ -18848,7 +19640,7 @@ function DataTableTreeToggle({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.ChevronRight,
               {
-                className: chipGroup.cn(
+                className: appShell.cn(
                   "size-icon-sm transition-transform duration-150",
                   isExpanded && "rotate-90"
                 ),
@@ -18870,7 +19662,7 @@ function DataTableTreeToggle({
     }
   );
 }
-const cellAddonsStyles = chipGroup.tv({
+const cellAddonsStyles = appShell.tv({
   slots: {
     /** Wrapper raiz da célula com add-ons — `group` habilita reveal no hover. */
     root: "group/cell-addon flex items-center gap-gp-xs w-full min-w-0",
@@ -18890,7 +19682,7 @@ const cellAddonsStyles = chipGroup.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();
@@ -19008,7 +19800,7 @@ function DataTableRowInner({
   handlers
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    badge.TableRow,
+    TableRow,
     {
       ref: (el) => handlers.current.registerRef(index, el),
       selected,
@@ -19022,8 +19814,8 @@ function DataTableRowInner({
       },
       className: rowClassName,
       children: [
-        selectionEnabled && /* @__PURE__ */ jsxRuntime.jsx(badge.TableCell, { width: SELECTION_COLUMN_WIDTH, align: "center", purpose: "selection", children: /* @__PURE__ */ jsxRuntime.jsx(
-          badge.Checkbox,
+        selectionEnabled && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { width: SELECTION_COLUMN_WIDTH, align: "center", purpose: "selection", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
           {
             checked: selected,
             onCheckedChange: () => handlers.current.toggleRowSelection(row),
@@ -19095,7 +19887,7 @@ function DataTableRowInner({
             /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.ChevronRight,
               {
-                className: chipGroup.cn(
+                className: appShell.cn(
                   "shrink-0 size-icon-sm text-fg-muted transition-transform duration-150",
                   expanded && "rotate-90"
                 ),
@@ -19127,7 +19919,7 @@ function DataTableRowInner({
           const hasAddons = addonsEligible && (col.readMore != null || col.copyable != null);
           const effectiveEllipsis = isTreeCol || hasAddons ? false : col.ellipsis ?? typeDef?.defaultEllipsis;
           return /* @__PURE__ */ jsxRuntime.jsx(
-            badge.TableCell,
+            TableCell,
             {
               field,
               width: columnWidths[field],
@@ -19170,7 +19962,7 @@ function DataTableGroupHeaderRow({
         "data-group-key": group.key,
         "aria-expanded": group.isExpanded,
         style: style2,
-        className: chipGroup.cn(
+        className: appShell.cn(
           "flex w-full min-w-full",
           "bg-bg-subtle",
           "border-b border-border-table",
@@ -19201,7 +19993,7 @@ function DataTableGroupHeaderRow({
       "data-group-key": group.key,
       "aria-expanded": group.isExpanded,
       style: style2,
-      className: chipGroup.cn(
+      className: appShell.cn(
         "flex w-max min-w-full h-[42px]",
         "bg-bg-subtle hover:bg-bg-muted",
         "border-b border-border-table",
@@ -19229,7 +20021,7 @@ function DataTableGroupHeaderRow({
             "div",
             {
               "data-field": field,
-              className: chipGroup.cn(
+              className: appShell.cn(
                 "shrink-0 flex items-center px-pad-2xl gap-gp-md",
                 "text-body-md font-medium text-fg-strong",
                 isPinned && "sticky z-[5] bg-bg-subtle"
@@ -19278,7 +20070,7 @@ function DataTableGroupContentRow({
       "data-group-content": "true",
       "data-group-key": group.key,
       style: style2,
-      className: chipGroup.cn(
+      className: appShell.cn(
         "flex w-full min-w-full",
         "bg-bg-table",
         "border-b border-border-table",
@@ -19361,7 +20153,7 @@ function DataTableRowExpansion({
       role: "row",
       "data-row-expansion": "true",
       style: style2,
-      className: chipGroup.cn(
+      className: appShell.cn(
         "flex w-full min-w-full",
         "bg-bg-subtle",
         "border-b border-border-table",
@@ -19831,7 +20623,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] = React.useState(false);
   const enableFullscreen = toolbarConfig.enableFullscreen === true;
   const toggleFullscreen = React.useCallback(() => {
@@ -19882,8 +20674,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();
@@ -19912,6 +20704,7 @@ function DataTableInternal(props, ref2) {
     props.listConfig,
     props.getTreeDataPath,
     rowsAllPagesProcessed,
+    rowsToRender,
     contextValue.getRowId
   ]);
   const listDefaultExpandedIds = React.useMemo(() => {
@@ -20167,7 +20960,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]
@@ -20464,22 +21260,22 @@ function DataTableInternal(props, ref2) {
       collisionDetection: core.closestCenter,
       onDragEnd: handleColumnDragEnd,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        badge.Table,
+        Table,
         {
           density: density.density,
           cardBreakpoint: props.cardBreakpoint ?? DEFAULT_CARD_BREAKPOINT,
           className: "min-h-0 max-h-full",
           scrollRef: scrollContainerRef,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(badge.TableHead, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TableHead, { children: [
               selectionConfig.enabled && /* @__PURE__ */ jsxRuntime.jsx(
-                badge.TableHeadCell,
+                TableHeadCell,
                 {
                   width: SELECTION_COLUMN_WIDTH,
                   align: "center",
                   purpose: "selection",
                   children: /* @__PURE__ */ jsxRuntime.jsx(
-                    badge.Checkbox,
+                    Checkbox,
                     {
                       checked: selection.isPageSelected(rowsToRender) ? true : selection.isPageIndeterminate(rowsToRender) ? "indeterminate" : false,
                       onCheckedChange: () => selection.togglePage(rowsToRender),
@@ -20522,7 +21318,7 @@ function DataTableInternal(props, ref2) {
                         icon: isActions ? void 0 : col.icon ?? (col.type ? columnTypeRegistry.get(col.type).defaultIcon : void 0),
                         headMenu: !isActions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                           col.enableColumnFilter && /* @__PURE__ */ jsxRuntime.jsx(
-                            chipGroup.Button,
+                            appShell.Button,
                             {
                               size: "icon-2xs",
                               variant: "ghost",
@@ -20565,7 +21361,7 @@ function DataTableInternal(props, ref2) {
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              badge.TableBody,
+              TableBody,
               {
                 virtualized: virtualize ? { totalHeight: rowVirtualizer.getTotalSize() } : void 0,
                 children: [
@@ -20726,14 +21522,14 @@ function DataTableInternal(props, ref2) {
     const isSel = selection.isRowSelected(row);
     const rowId = contextValue.getRowId(row);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      badge.TableCardRow,
+      TableCardRow,
       {
         selected: isSel,
         clickable: !!props.onRowClick,
         onClick: props.onRowClick ? () => props.onRowClick?.(row) : void 0,
         header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           selectionConfig.enabled && /* @__PURE__ */ jsxRuntime.jsx(
-            badge.Checkbox,
+            Checkbox,
             {
               checked: isSel,
               onCheckedChange: () => selection.toggleRow(row),
@@ -20756,7 +21552,7 @@ function DataTableInternal(props, ref2) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataTableProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chipGroup.cn(
+      className: appShell.cn(
         dataTableStyles({ fullscreen: isFullscreen }).root(),
         props.className
       ),
@@ -20781,7 +21577,8 @@ function DataTableInternal(props, ref2) {
                       });
                     },
                     soloLabel: toolbarConfig.title,
-                    hideDivider: true
+                    hideDivider: true,
+                    allowCreate: props.allowCreateView !== false
                   }
                 ) : void 0,
                 refresh: toolbarConfig.enableRefresh !== false ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -21219,7 +22016,7 @@ function DataTableInternal(props, ref2) {
             }
           }
         ) : isCardMode ? cardBody : tableBody,
-        !isKanban && !isList && !useTreeData && paginationConfig.enabled !== false && (isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.footerWrap(), children: /* @__PURE__ */ jsxRuntime.jsx(FooterTableSkeleton, {}) }) : !isDataEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.footerWrap(), children: /* @__PURE__ */ jsxRuntime.jsx(
+        !isKanban && (!isList || props.listConfig?.paginated && !props.listConfig?.hierarchical) && !useTreeData && paginationConfig.enabled !== false && (isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.footerWrap(), children: /* @__PURE__ */ jsxRuntime.jsx(FooterTableSkeleton, {}) }) : !isDataEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.footerWrap(), children: /* @__PURE__ */ jsxRuntime.jsx(
           FooterTable,
           {
             totalCount: totalAfterFilter,
@@ -21251,7 +22048,7 @@ function DataTableFloatingBulkBar({
     ] }),
     actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-gp-sm", children: actions }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         size: "icon-xs",
         variant: "ghost",
@@ -21313,7 +22110,7 @@ const SheetPortal = SheetPrimitive__namespace.Portal;
 const SheetOverlay = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
   SheetPrimitive__namespace.Overlay,
   {
-    className: chipGroup.cn(
+    className: appShell.cn(
       "fixed inset-0 z-50 bg-overlay-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
@@ -21344,7 +22141,7 @@ const SheetContent = React__namespace.forwardRef(({ side = "right", className, c
     SheetPrimitive__namespace.Content,
     {
       ref: ref2,
-      className: chipGroup.cn(sheetVariants({ side }), className),
+      className: appShell.cn(sheetVariants({ side }), className),
       ...props,
       children: [
         children,
@@ -21361,7 +22158,7 @@ const SheetTitle = React__namespace.forwardRef(({ className, ...props }, ref2) =
   SheetPrimitive__namespace.Title,
   {
     ref: ref2,
-    className: chipGroup.cn("text-body-lg font-medium font-semibold text-fg-default", className),
+    className: appShell.cn("text-body-lg font-medium font-semibold text-fg-default", className),
     ...props
   }
 ));
@@ -21370,12 +22167,12 @@ const SheetDescription = React__namespace.forwardRef(({ className, ...props }, r
   SheetPrimitive__namespace.Description,
   {
     ref: ref2,
-    className: chipGroup.cn("text-body-md text-fg-muted", className),
+    className: appShell.cn("text-body-md text-fg-muted", className),
     ...props
   }
 ));
 SheetDescription.displayName = SheetPrimitive__namespace.Description.displayName;
-const panelContainer = chipGroup.tv({
+const panelContainer = appShell.tv({
   base: [
     "flex flex-col overflow-hidden",
     "rounded-radius-xl border border-border-default",
@@ -21404,30 +22201,30 @@ const panelContainer = chipGroup.tv({
     }
   }
 });
-const panelHeader = chipGroup.tv({
+const panelHeader = appShell.tv({
   base: [
     "flex items-center justify-between gap-gp-xl flex-none",
     "px-[20px] py-[18px]",
     "border-b border-border-default"
   ]
 });
-const panelHeaderText = chipGroup.tv({
+const panelHeaderText = appShell.tv({
   base: "flex flex-col gap-gp-2xs min-w-0"
 });
-const panelTitle = chipGroup.tv({
+const panelTitle = appShell.tv({
   base: [
     "flex items-center gap-gp-md min-w-0",
     "text-body-lg font-bold text-fg-default tracking-[-0.01em]",
     "truncate"
   ]
 });
-const panelTitleIcon = chipGroup.tv({
+const panelTitleIcon = appShell.tv({
   base: "size-[18px] text-fg-brand shrink-0"
 });
-const panelDescription = chipGroup.tv({
+const panelDescription = appShell.tv({
   base: "text-body-md text-fg-muted"
 });
-const panelClose = chipGroup.tv({
+const panelClose = appShell.tv({
   base: [
     "grid place-items-center shrink-0",
     "w-form-sm h-form-sm rounded-radius-md",
@@ -21439,7 +22236,7 @@ const panelClose = chipGroup.tv({
     "dark:hover:bg-bg-muted-hover"
   ]
 });
-const panelBody = chipGroup.tv({
+const panelBody = appShell.tv({
   base: [
     // min-h-0 garante que o flex-1 encolha e o scroll ative (em vez de empurrar
     // header/footer). Scroll automático independente de viewport.
@@ -21451,7 +22248,7 @@ const panelBody = chipGroup.tv({
     "scrollbar-thin"
   ]
 });
-const panelFooter = chipGroup.tv({
+const panelFooter = appShell.tv({
   base: [
     // Botões fluidos lado a lado; quebram pra empilhados quando não cabem.
     "flex flex-wrap items-center gap-gp-md flex-none",
@@ -21467,7 +22264,7 @@ function PanelHeader({
   hideClose,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: chipGroup.cn(panelHeader(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: appShell.cn(panelHeader(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelHeaderText(), children: [
       title2 && /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: panelTitle(), children: [
         TitleIcon && /* @__PURE__ */ jsxRuntime.jsx(TitleIcon, { className: panelTitleIcon(), strokeWidth: 1.8 }),
@@ -21479,10 +22276,10 @@ function PanelHeader({
   ] });
 }
 function PanelBody({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chipGroup.cn(panelBody(), className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(panelBody(), className), children });
 }
 function PanelFooter({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: chipGroup.cn(panelFooter(), className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: appShell.cn(panelFooter(), className), children });
 }
 const SIZE_MAP = {
   sm: "w-[320px]",
@@ -21504,7 +22301,7 @@ function slideAnimation(side) {
     bottom: "md:data-[state=closed]:slide-out-to-bottom-12 md:data-[state=open]:slide-in-from-bottom-12"
   }[side];
   const mobile = "max-md:data-[state=closed]:slide-out-to-bottom-12 max-md:data-[state=open]:slide-in-from-bottom-12";
-  return chipGroup.cn(
+  return appShell.cn(
     "ease-[cubic-bezier(0.4,0,0.2,1)]",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
     "data-[state=closed]:duration-[220ms] data-[state=open]:duration-[220ms]",
@@ -21536,7 +22333,7 @@ function Panel({
       /* @__PURE__ */ jsxRuntime.jsxs(
         SheetPrimitive__namespace.Content,
         {
-          className: chipGroup.cn(
+          className: appShell.cn(
             "fixed z-50 bg-bg-surface dark:bg-bg-canvas text-fg-default shadow-sh-2xl",
             sizeClass,
             panelContainer({ side }),
@@ -21568,6 +22365,8 @@ exports.Avatar = Avatar;
 exports.BulkActionButton = BulkActionButton;
 exports.BulkActionsBar = BulkActionsBar;
 exports.ButtonGroup = ButtonGroup;
+exports.Calendar = Calendar;
+exports.Checkbox = Checkbox;
 exports.ColsPanel = ColsPanel;
 exports.ColsPopover = ColsPopover;
 exports.Combobox = Combobox;
@@ -21608,8 +22407,16 @@ exports.SheetTrigger = SheetTrigger;
 exports.SortPanel = SortPanel;
 exports.SortPopover = SortPopover;
 exports.TABLE_HEADER_HEIGHT = TABLE_HEADER_HEIGHT;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCardRow = TableCardRow;
+exports.TableCell = TableCell;
+exports.TableHead = TableHead;
+exports.TableHeadCell = TableHeadCell;
+exports.TableRow = TableRow;
 exports.TableToolbar = TableToolbar;
 exports.TableToolbarViews = TableToolbarViews;
+exports.Textarea = Textarea;
 exports.ToolbarApplied = ToolbarApplied;
 exports.ToolbarDivider = ToolbarDivider;
 exports.ToolbarSaveButton = ToolbarSaveButton;
@@ -21623,11 +22430,13 @@ exports.ViewsPopover = ViewsPopover;
 exports.avatarVariants = avatarVariants;
 exports.columnTypeRegistry = columnTypeRegistry;
 exports.floatingPanelStyles = floatingPanelStyles;
+exports.getContrastTextColor = getContrastTextColor;
 exports.isFilterEntryActive = isFilterEntryActive;
 exports.panelContainer = panelContainer;
 exports.presetView = presetView;
 exports.savedViewsMockService = savedViewsMockService;
+exports.useColumnResize = useColumnResize;
 exports.useColumnWidths = useColumnWidths;
 exports.useDataTableContext = useDataTableContext;
 exports.useFloatingPanelResize = useFloatingPanelResize;
-//# sourceMappingURL=panel-pOXMw6a-.cjs.map
+//# sourceMappingURL=panel-B_SSIEDs.cjs.map