@krak-stack/registry 0.1.19 → 0.1.20

package/dist/components/ui/data-table.js

@@ -1,3 +1,36 @@
+// ../../src/components/ui/data-table.tsx
+import { useAtom, useAtomSet } from "@effect/atom-react";
+import { Schema } from "effect";
+import { Atom } from "effect/unstable/reactivity";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronDown,
+  ChevronRight as ChevronRight2,
+  ChevronsUpDown as ChevronsUpDown2,
+  Download,
+  EyeOff,
+  FileJson,
+  FileText,
+  GripVertical,
+  LayoutGrid,
+  MoreHorizontal,
+  RefreshCw,
+  Rows3,
+  Search,
+  Settings2,
+  X as X2
+} from "lucide-react";
+import {
+  createContext,
+  isValidElement,
+  useContext,
+  useLayoutEffect,
+  useRef as useRef2,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+
 // ../../src/components/ui/badge.tsx
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -88,32 +121,14 @@ function Button({
   });
 }
 
-// ../../src/components/ui/checkbox.tsx
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
-import { CheckIcon } from "lucide-react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-"use client";
-function Checkbox({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(CheckboxPrimitive.Root, {
-    "data-slot": "checkbox",
-    className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
-    ...props,
-    children: /* @__PURE__ */ jsx2(CheckboxPrimitive.Indicator, {
-      "data-slot": "checkbox-indicator",
-      className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
-      children: /* @__PURE__ */ jsx2(CheckIcon, {})
-    })
-  });
-}
-
 // ../../src/components/ui/card.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Card({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3("div", {
+  return /* @__PURE__ */ jsx2("div", {
     "data-slot": "card",
     "data-size": size,
     className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
@@ -121,38 +136,35 @@ function Card({
   });
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("div", {
+  return /* @__PURE__ */ jsx2("div", {
     "data-slot": "card-header",
     className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className),
     ...props
   });
 }
 function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("div", {
+  return /* @__PURE__ */ jsx2("div", {
     "data-slot": "card-title",
     className: cn("text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className),
     ...props
   });
 }
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("div", {
-    "data-slot": "card-description",
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  });
-}
-function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("div", {
-    "data-slot": "card-action",
-    className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
-    ...props
-  });
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("div", {
-    "data-slot": "card-content",
-    className: cn("px-(--card-spacing)", className),
-    ...props
+
+// ../../src/components/ui/checkbox.tsx
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { CheckIcon } from "lucide-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+"use client";
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(CheckboxPrimitive.Root, {
+    "data-slot": "checkbox",
+    className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
+    ...props,
+    children: /* @__PURE__ */ jsx3(CheckboxPrimitive.Indicator, {
+      "data-slot": "checkbox-indicator",
+      className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+      children: /* @__PURE__ */ jsx3(CheckIcon, {})
+    })
   });
 }
 
@@ -270,60 +282,12 @@ function DropdownMenuSubContent({
     ...props
   });
 }
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(MenuPrimitive.CheckboxItem, {
-    "data-slot": "dropdown-menu-checkbox-item",
-    "data-inset": inset,
-    className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx4("span", {
-        className: "pointer-events-none absolute right-2 flex items-center justify-center",
-        "data-slot": "dropdown-menu-checkbox-item-indicator",
-        children: /* @__PURE__ */ jsx4(MenuPrimitive.CheckboxItemIndicator, {
-          children: /* @__PURE__ */ jsx4(CheckIcon2, {})
-        })
-      }),
-      children
-    ]
-  });
-}
 function DropdownMenuRadioGroup({ ...props }) {
   return /* @__PURE__ */ jsx4(MenuPrimitive.RadioGroup, {
     "data-slot": "dropdown-menu-radio-group",
     ...props
   });
 }
-function DropdownMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(MenuPrimitive.RadioItem, {
-    "data-slot": "dropdown-menu-radio-item",
-    "data-inset": inset,
-    className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx4("span", {
-        className: "pointer-events-none absolute right-2 flex items-center justify-center",
-        "data-slot": "dropdown-menu-radio-item-indicator",
-        children: /* @__PURE__ */ jsx4(MenuPrimitive.RadioItemIndicator, {
-          children: /* @__PURE__ */ jsx4(CheckIcon2, {})
-        })
-      }),
-      children
-    ]
-  });
-}
 function DropdownMenuSeparator({
   className,
   ...props
@@ -813,6 +777,180 @@ function Loading({
   });
 }
 
+// ../../src/components/ui/menubar.tsx
+import { Menu as MenuPrimitive2 } from "@base-ui/react/menu";
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+import { CheckIcon as CheckIcon3 } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+"use client";
+function Menubar({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(MenubarPrimitive, {
+    "data-slot": "menubar",
+    className: cn("flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className),
+    ...props
+  });
+}
+function MenubarMenu({ ...props }) {
+  return /* @__PURE__ */ jsx7(DropdownMenu, {
+    "data-slot": "menubar-menu",
+    ...props
+  });
+}
+function MenubarGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuGroup, {
+    "data-slot": "menubar-group",
+    ...props
+  });
+}
+function MenubarTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuTrigger, {
+    "data-slot": "menubar-trigger",
+    className: cn("flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className),
+    ...props
+  });
+}
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuContent, {
+    "data-slot": "menubar-content",
+    align,
+    alignOffset,
+    sideOffset,
+    className: cn("min-w-36 rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className),
+    ...props
+  });
+}
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuItem, {
+    "data-slot": "menubar-item",
+    "data-inset": inset,
+    "data-variant": variant,
+    className: cn("group/menubar-item gap-2 rounded-sm px-2 py-1.5 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className),
+    ...props
+  });
+}
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(MenuPrimitive2.CheckboxItem, {
+    "data-slot": "menubar-checkbox-item",
+    "data-inset": inset,
+    className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx7("span", {
+        className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        children: /* @__PURE__ */ jsx7(MenuPrimitive2.CheckboxItemIndicator, {
+          children: /* @__PURE__ */ jsx7(CheckIcon3, {})
+        })
+      }),
+      children
+    ]
+  });
+}
+function MenubarRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuRadioGroup, {
+    "data-slot": "menubar-radio-group",
+    ...props
+  });
+}
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(MenuPrimitive2.RadioItem, {
+    "data-slot": "menubar-radio-item",
+    "data-inset": inset,
+    className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx7("span", {
+        className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        children: /* @__PURE__ */ jsx7(MenuPrimitive2.RadioItemIndicator, {
+          children: /* @__PURE__ */ jsx7(CheckIcon3, {})
+        })
+      }),
+      children
+    ]
+  });
+}
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuLabel, {
+    "data-slot": "menubar-label",
+    "data-inset": inset,
+    className: cn("px-2 py-1.5 text-sm font-medium data-inset:pl-8", className),
+    ...props
+  });
+}
+function MenubarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuSeparator, {
+    "data-slot": "menubar-separator",
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  });
+}
+function MenubarSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuSub, {
+    "data-slot": "menubar-sub",
+    ...props
+  });
+}
+function MenubarSubTrigger({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuSubTrigger, {
+    "data-slot": "menubar-sub-trigger",
+    "data-inset": inset,
+    className: cn("gap-2 rounded-sm px-2 py-1.5 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  });
+}
+function MenubarSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DropdownMenuSubContent, {
+    "data-slot": "menubar-sub-content",
+    className: cn("min-w-32 rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+    ...props
+  });
+}
+
 // ../../src/components/ui/pagination.tsx
 import {
   ChevronLeft,
@@ -823,10 +961,10 @@ import {
 import { useId } from "react";
 
 // ../../src/components/ui/label.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 "use client";
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx7("label", {
+  return /* @__PURE__ */ jsx8("label", {
     "data-slot": "label",
     className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
     ...props
@@ -835,12 +973,12 @@ function Label({ className, ...props }) {
 
 // ../../src/components/ui/select.tsx
 import { Select as SelectPrimitive } from "@base-ui/react/select";
-import { ChevronDownIcon, CheckIcon as CheckIcon3, ChevronUpIcon } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { ChevronDownIcon, CheckIcon as CheckIcon4, ChevronUpIcon } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 "use client";
 var Select = SelectPrimitive.Root;
 function SelectValue({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(SelectPrimitive.Value, {
+  return /* @__PURE__ */ jsx9(SelectPrimitive.Value, {
     "data-slot": "select-value",
     className: cn("flex flex-1 text-left", className),
     ...props
@@ -852,15 +990,15 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs3(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ jsxs4(SelectPrimitive.Trigger, {
     "data-slot": "select-trigger",
     "data-size": size,
     className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx8(SelectPrimitive.Icon, {
-        render: /* @__PURE__ */ jsx8(ChevronDownIcon, {
+      /* @__PURE__ */ jsx9(SelectPrimitive.Icon, {
+        render: /* @__PURE__ */ jsx9(ChevronDownIcon, {
           className: "text-muted-foreground pointer-events-none size-4"
         })
       })
@@ -877,25 +1015,25 @@ function SelectContent({
   alignItemWithTrigger = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(SelectPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx8(SelectPrimitive.Positioner, {
+  return /* @__PURE__ */ jsx9(SelectPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx9(SelectPrimitive.Positioner, {
       side,
       sideOffset,
       align,
       alignOffset,
       alignItemWithTrigger,
       className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs3(SelectPrimitive.Popup, {
+      children: /* @__PURE__ */ jsxs4(SelectPrimitive.Popup, {
         "data-slot": "select-content",
         "data-align-trigger": alignItemWithTrigger,
         className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
-          /* @__PURE__ */ jsx8(SelectPrimitive.List, {
+          /* @__PURE__ */ jsx9(SelectScrollUpButton, {}),
+          /* @__PURE__ */ jsx9(SelectPrimitive.List, {
             children
           }),
-          /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
+          /* @__PURE__ */ jsx9(SelectScrollDownButton, {})
         ]
       })
     })
@@ -906,20 +1044,20 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs3(SelectPrimitive.Item, {
+  return /* @__PURE__ */ jsxs4(SelectPrimitive.Item, {
     "data-slot": "select-item",
     className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, {
+      /* @__PURE__ */ jsx9(SelectPrimitive.ItemText, {
         className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
         children
       }),
-      /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, {
-        render: /* @__PURE__ */ jsx8("span", {
+      /* @__PURE__ */ jsx9(SelectPrimitive.ItemIndicator, {
+        render: /* @__PURE__ */ jsx9("span", {
           className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center"
         }),
-        children: /* @__PURE__ */ jsx8(CheckIcon3, {
+        children: /* @__PURE__ */ jsx9(CheckIcon4, {
           className: "pointer-events-none"
         })
       })
@@ -930,27 +1068,27 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(SelectPrimitive.ScrollUpArrow, {
+  return /* @__PURE__ */ jsx9(SelectPrimitive.ScrollUpArrow, {
     "data-slot": "select-scroll-up-button",
     className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
     ...props,
-    children: /* @__PURE__ */ jsx8(ChevronUpIcon, {})
+    children: /* @__PURE__ */ jsx9(ChevronUpIcon, {})
   });
 }
 function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(SelectPrimitive.ScrollDownArrow, {
+  return /* @__PURE__ */ jsx9(SelectPrimitive.ScrollDownArrow, {
     "data-slot": "select-scroll-down-button",
     className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
     ...props,
-    children: /* @__PURE__ */ jsx8(ChevronDownIcon, {})
+    children: /* @__PURE__ */ jsx9(ChevronDownIcon, {})
   });
 }
 
 // ../../src/components/ui/pagination.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var messages = {
   en: {
     pageSize: "Page size",
@@ -994,32 +1132,32 @@ function Pagination({
   const pageSizeId = useId();
   const canGoBack = page > 0;
   const canGoForward = page + 1 < pageCount;
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs5("div", {
     className: cn("flex flex-col gap-3 px-2 sm:flex-row sm:items-center sm:justify-between", compact && "gap-2 px-0 sm:flex-col sm:items-stretch"),
     children: [
-      showResults ? /* @__PURE__ */ jsxs4("div", {
+      showResults ? /* @__PURE__ */ jsxs5("div", {
         className: "text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-sm",
         children: [
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx10("span", {
             children: labels2.results(totalRows)
           }),
-          selectedRows > 0 ? /* @__PURE__ */ jsx9("span", {
+          selectedRows > 0 ? /* @__PURE__ */ jsx10("span", {
             children: labels2.selectedOf(selectedRows, totalRows)
           }) : null
         ]
       }) : null,
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs5("div", {
         className: cn("flex items-center gap-4 sm:justify-end", compact && "flex-wrap justify-between gap-2 sm:justify-between"),
         children: [
-          /* @__PURE__ */ jsxs4("div", {
+          /* @__PURE__ */ jsxs5("div", {
             className: "flex items-center gap-2",
             children: [
-              /* @__PURE__ */ jsx9(Label, {
+              /* @__PURE__ */ jsx10(Label, {
                 htmlFor: pageSizeId,
                 className: cn("hidden text-sm sm:block", compact && "block"),
                 children: labels2.pageSize
               }),
-              /* @__PURE__ */ jsxs4(Select, {
+              /* @__PURE__ */ jsxs5(Select, {
                 items: pageSizes.map((size) => ({
                   label: size.toString(),
                   value: size.toString()
@@ -1027,16 +1165,16 @@ function Pagination({
                 value: `${pageSize}`,
                 onValueChange: (value) => onPageSizeChange(Number(value)),
                 children: [
-                  /* @__PURE__ */ jsx9(SelectTrigger, {
+                  /* @__PURE__ */ jsx10(SelectTrigger, {
                     className: "h-8 w-[70px]",
                     id: pageSizeId,
-                    children: /* @__PURE__ */ jsx9(SelectValue, {
+                    children: /* @__PURE__ */ jsx10(SelectValue, {
                       placeholder: pageSize
                     })
                   }),
-                  /* @__PURE__ */ jsx9(SelectContent, {
+                  /* @__PURE__ */ jsx10(SelectContent, {
                     side: "top",
-                    children: pageSizes.map((size) => /* @__PURE__ */ jsx9(SelectItem, {
+                    children: pageSizes.map((size) => /* @__PURE__ */ jsx10(SelectItem, {
                       value: `${size}`,
                       children: size
                     }, size))
@@ -1045,66 +1183,66 @@ function Pagination({
               })
             ]
           }),
-          /* @__PURE__ */ jsxs4("div", {
+          /* @__PURE__ */ jsxs5("div", {
             className: "flex items-center gap-2",
             children: [
-              /* @__PURE__ */ jsx9("div", {
+              /* @__PURE__ */ jsx10("div", {
                 className: "flex items-center justify-center text-sm font-medium sm:block",
                 children: labels2.pageOf(page + 1, pageCount)
               }),
-              /* @__PURE__ */ jsxs4("div", {
+              /* @__PURE__ */ jsxs5("div", {
                 className: "flex items-center gap-1",
                 children: [
-                  /* @__PURE__ */ jsxs4(Button, {
+                  /* @__PURE__ */ jsxs5(Button, {
                     className: cn("hidden h-8 w-8 p-0 lg:flex", compact && "!hidden"),
                     disabled: !canGoBack,
                     onClick: () => onPageChange(0),
                     type: "button",
                     children: [
-                      /* @__PURE__ */ jsx9("span", {
+                      /* @__PURE__ */ jsx10("span", {
                         className: "sr-only",
                         children: labels2.goToFirstPage
                       }),
-                      /* @__PURE__ */ jsx9(ChevronsLeft, {})
+                      /* @__PURE__ */ jsx10(ChevronsLeft, {})
                     ]
                   }),
-                  /* @__PURE__ */ jsxs4(Button, {
+                  /* @__PURE__ */ jsxs5(Button, {
                     className: "h-8 w-8 p-0",
                     disabled: !canGoBack,
                     onClick: () => onPageChange(page - 1),
                     type: "button",
                     children: [
-                      /* @__PURE__ */ jsx9("span", {
+                      /* @__PURE__ */ jsx10("span", {
                         className: "sr-only",
                         children: labels2.goToPreviousPage
                       }),
-                      /* @__PURE__ */ jsx9(ChevronLeft, {})
+                      /* @__PURE__ */ jsx10(ChevronLeft, {})
                     ]
                   }),
-                  /* @__PURE__ */ jsxs4(Button, {
+                  /* @__PURE__ */ jsxs5(Button, {
                     className: "h-8 w-8 p-0",
                     disabled: !canGoForward,
                     onClick: () => onPageChange(page + 1),
                     type: "button",
                     children: [
-                      /* @__PURE__ */ jsx9("span", {
+                      /* @__PURE__ */ jsx10("span", {
                         className: "sr-only",
                         children: labels2.goToNextPage
                       }),
-                      /* @__PURE__ */ jsx9(ChevronRight, {})
+                      /* @__PURE__ */ jsx10(ChevronRight, {})
                     ]
                   }),
-                  /* @__PURE__ */ jsxs4(Button, {
+                  /* @__PURE__ */ jsxs5(Button, {
                     className: cn("hidden h-8 w-8 p-0 lg:flex", compact && "!hidden"),
                     disabled: !canGoForward,
                     onClick: () => onPageChange(pageCount - 1),
                     type: "button",
                     children: [
-                      /* @__PURE__ */ jsx9("span", {
+                      /* @__PURE__ */ jsx10("span", {
                         className: "sr-only",
                         children: labels2.goToLastPage
                       }),
-                      /* @__PURE__ */ jsx9(ChevronsRight, {})
+                      /* @__PURE__ */ jsx10(ChevronsRight, {})
                     ]
                   })
                 ]
@@ -1119,15 +1257,15 @@ function Pagination({
 
 // ../../src/components/ui/popover.tsx
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx10(PopoverPrimitive.Root, {
+  return /* @__PURE__ */ jsx11(PopoverPrimitive.Root, {
     "data-slot": "popover",
     ...props
   });
 }
 function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx10(PopoverPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx11(PopoverPrimitive.Trigger, {
     "data-slot": "popover-trigger",
     ...props
   });
@@ -1140,14 +1278,14 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(PopoverPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx10(PopoverPrimitive.Positioner, {
+  return /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx11(PopoverPrimitive.Positioner, {
       align,
       alignOffset,
       side,
       sideOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ jsx10(PopoverPrimitive.Popup, {
+      children: /* @__PURE__ */ jsx11(PopoverPrimitive.Popup, {
         "data-slot": "popover-content",
         className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
         ...props
@@ -1158,24 +1296,24 @@ function PopoverContent({
 
 // ../../src/components/ui/scroll-area.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(ScrollAreaPrimitive.Root, {
+  return /* @__PURE__ */ jsxs6(ScrollAreaPrimitive.Root, {
     "data-slot": "scroll-area",
     className: cn("relative", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx11(ScrollAreaPrimitive.Viewport, {
+      /* @__PURE__ */ jsx12(ScrollAreaPrimitive.Viewport, {
         "data-slot": "scroll-area-viewport",
         className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
         children
       }),
-      /* @__PURE__ */ jsx11(ScrollBar, {}),
-      /* @__PURE__ */ jsx11(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx12(ScrollBar, {}),
+      /* @__PURE__ */ jsx12(ScrollAreaPrimitive.Corner, {})
     ]
   });
 }
@@ -1184,13 +1322,13 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(ScrollAreaPrimitive.Scrollbar, {
+  return /* @__PURE__ */ jsx12(ScrollAreaPrimitive.Scrollbar, {
     "data-slot": "scroll-area-scrollbar",
     "data-orientation": orientation,
     orientation,
     className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", className),
     ...props,
-    children: /* @__PURE__ */ jsx11(ScrollAreaPrimitive.Thumb, {
+    children: /* @__PURE__ */ jsx12(ScrollAreaPrimitive.Thumb, {
       "data-slot": "scroll-area-thumb",
       className: "bg-border relative flex-1 rounded-full"
     })
@@ -1198,12 +1336,12 @@ function ScrollBar({
 }
 
 // ../../src/components/ui/table.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx12("div", {
+  return /* @__PURE__ */ jsx13("div", {
     "data-slot": "table-container",
     className: "relative w-full overflow-x-auto",
-    children: /* @__PURE__ */ jsx12("table", {
+    children: /* @__PURE__ */ jsx13("table", {
       "data-slot": "table",
       className: cn("w-full caption-bottom text-sm", className),
       ...props
@@ -1211,35 +1349,35 @@ function Table({ className, ...props }) {
   });
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx12("thead", {
+  return /* @__PURE__ */ jsx13("thead", {
     "data-slot": "table-header",
     className: cn("[&_tr]:border-b", className),
     ...props
   });
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx12("tbody", {
+  return /* @__PURE__ */ jsx13("tbody", {
     "data-slot": "table-body",
     className: cn("[&_tr:last-child]:border-0", className),
     ...props
   });
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx12("tr", {
+  return /* @__PURE__ */ jsx13("tr", {
     "data-slot": "table-row",
     className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
     ...props
   });
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx12("th", {
+  return /* @__PURE__ */ jsx13("th", {
     "data-slot": "table-head",
     className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
     ...props
   });
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx12("td", {
+  return /* @__PURE__ */ jsx13("td", {
     "data-slot": "table-cell",
     className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
     ...props
@@ -1248,26 +1386,26 @@ function TableCell({ className, ...props }) {
 
 // ../../src/components/ui/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 "use client";
 function TooltipProvider({
   delay = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(TooltipPrimitive.Provider, {
+  return /* @__PURE__ */ jsx14(TooltipPrimitive.Provider, {
     "data-slot": "tooltip-provider",
     delay,
     ...props
   });
 }
 function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsx13(TooltipPrimitive.Root, {
+  return /* @__PURE__ */ jsx14(TooltipPrimitive.Root, {
     "data-slot": "tooltip",
     ...props
   });
 }
 function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx13(TooltipPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx14(TooltipPrimitive.Trigger, {
     "data-slot": "tooltip-trigger",
     ...props
   });
@@ -1281,20 +1419,20 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(TooltipPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx13(TooltipPrimitive.Positioner, {
+  return /* @__PURE__ */ jsx14(TooltipPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx14(TooltipPrimitive.Positioner, {
       align,
       alignOffset,
       side,
       sideOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs6(TooltipPrimitive.Popup, {
+      children: /* @__PURE__ */ jsxs7(TooltipPrimitive.Popup, {
         "data-slot": "tooltip-content",
         className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsx13(TooltipPrimitive.Arrow, {
+          /* @__PURE__ */ jsx14(TooltipPrimitive.Arrow, {
             className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5"
           })
         ]
@@ -1316,11 +1454,6 @@ import {
 
 // ../../src/components/ui/input-group.tsx
 import { cva as cva3 } from "class-variance-authority";
-
-// ../../src/components/ui/textarea.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-
-// ../../src/components/ui/input-group.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 function InputGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx15("div", {
@@ -1364,7 +1497,7 @@ function InputGroupInput({
 }
 
 // ../../src/components/ui/virtualized-combobox.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 "use client";
 var messages2 = {
   en: {
@@ -1476,7 +1609,7 @@ var VirtualizedComboboxList = ({
             })
           }, entry.key);
         }
-        return /* @__PURE__ */ jsxs7(ComboboxPrimitive.Item, {
+        return /* @__PURE__ */ jsxs8(ComboboxPrimitive.Item, {
           "aria-posinset": entry.index + 1,
           "aria-setsize": filteredItems.length,
           className: "data-highlighted:bg-accent data-highlighted:text-accent-foreground absolute top-0 left-0 flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
@@ -1517,7 +1650,7 @@ var VirtualizedComboboxContent = ({
       className: "isolate z-50",
       side: "bottom",
       sideOffset: 6,
-      children: /* @__PURE__ */ jsxs7(ComboboxPrimitive.Popup, {
+      children: /* @__PURE__ */ jsxs8(ComboboxPrimitive.Popup, {
         className: cn("relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-0 origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-in-95", contentClassName),
         children: [
           /* @__PURE__ */ jsx16("div", {
@@ -1544,7 +1677,7 @@ var VirtualizedComboboxContent = ({
     })
   });
 };
-var defaultTrigger = (ariaLabel, ariaInvalid, disabled, label, triggerId) => /* @__PURE__ */ jsxs7(Button, {
+var defaultTrigger = (ariaLabel, ariaInvalid, disabled, label, triggerId) => /* @__PURE__ */ jsxs8(Button, {
   "aria-label": ariaLabel,
   "aria-invalid": ariaInvalid,
   className: "w-full max-w-full min-w-0 justify-between overflow-hidden",
@@ -1584,7 +1717,7 @@ var VirtualizedComboboxSingle = (props) => {
   const virtualizerRef = useComboboxVirtualizerRef(props.virtualizerRef);
   const itemIndexRef = useRef(new Map);
   const labels2 = virtualizedComboboxMessages(props.messages);
-  return /* @__PURE__ */ jsxs7(ComboboxPrimitive.Root, {
+  return /* @__PURE__ */ jsxs8(ComboboxPrimitive.Root, {
     disabled: props.disabled,
     inputValue: props.searchValue,
     items: [...props.items],
@@ -1602,7 +1735,7 @@ var VirtualizedComboboxSingle = (props) => {
     value: props.value,
     virtualized: true,
     children: [
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "relative",
         children: [
           /* @__PURE__ */ jsx16(ComboboxPrimitive.Trigger, {
@@ -1625,7 +1758,7 @@ var VirtualizedComboboxMultiple = (props) => {
   const virtualizerRef = useComboboxVirtualizerRef(props.virtualizerRef);
   const itemIndexRef = useRef(new Map);
   const labels2 = virtualizedComboboxMessages(props.messages);
-  return /* @__PURE__ */ jsxs7(ComboboxPrimitive.Root, {
+  return /* @__PURE__ */ jsxs8(ComboboxPrimitive.Root, {
     disabled: props.disabled,
     inputValue: props.searchValue,
     items: [...props.items],
@@ -1644,7 +1777,7 @@ var VirtualizedComboboxMultiple = (props) => {
     value: [...props.value],
     virtualized: true,
     children: [
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "relative",
         children: [
           /* @__PURE__ */ jsx16(ComboboxPrimitive.Trigger, {
@@ -1671,275 +1804,8 @@ function VirtualizedCombobox(props) {
   });
 }
 
-// ../../src/lib/query.ts
-import {
-  Effect,
-  Option,
-  Schema,
-  SchemaIssue,
-  SchemaTransformation
-} from "effect";
-var parseSortParam = (sort) => {
-  const id = sort.startsWith("-") ? sort.slice(1) : sort;
-  if (!id || id.includes(",") || id.includes(":")) {
-    return null;
-  }
-  return { id, direction: sort.startsWith("-") ? "desc" : "asc" };
-};
-var SortDirection = Schema.Union([
-  Schema.Literal("asc"),
-  Schema.Literal("desc")
-]).pipe(Schema.annotate({
-  identifier: "SortDirection",
-  title: "Sort Direction",
-  description: "Sort direction for list query results.",
-  examples: ["asc", "desc"]
-}));
-var SortParam = Schema.Struct({
-  id: Schema.NonEmptyString,
-  direction: SortDirection
-}).pipe(Schema.annotate({
-  identifier: "SortParam",
-  title: "Sort Parameter",
-  description: "Decoded sort parameter with a field id and direction.",
-  examples: [{ id: "publicName", direction: "asc" }]
-}));
-var SortParamFromString = Schema.String.pipe(Schema.decodeTo(SortParam, SchemaTransformation.transformOrFail({
-  decode: (sort) => {
-    const sortParam = parseSortParam(sort);
-    if (!sortParam) {
-      return Effect.fail(new SchemaIssue.InvalidValue(Option.some(sort), {
-        message: 'Expected sort in the format "field" or "-field"'
-      }));
-    }
-    return Effect.succeed(sortParam);
-  },
-  encode: (sort) => Effect.succeed(sort.direction === "desc" ? `-${sort.id}` : sort.id)
-})), Schema.annotate({
-  identifier: "SortParamFromString",
-  title: "Sort Parameter From String",
-  description: 'URL encoded single sort parameter where descending fields are prefixed with "-".',
-  examples: [{ id: "publicName", direction: "asc" }]
-}));
-var SortParamsFromString = Schema.String.pipe(Schema.decodeTo(Schema.Array(SortParam), SchemaTransformation.transformOrFail({
-  decode: (sort) => {
-    const parts = sort.split(",");
-    const sortParams = [];
-    for (const part of parts) {
-      const sortParam = parseSortParam(part);
-      if (!sortParam) {
-        return Effect.fail(new SchemaIssue.InvalidValue(Option.some(sort), {
-          message: 'Expected sort in the format "field,-otherField"'
-        }));
-      }
-      sortParams.push(sortParam);
-    }
-    return Effect.succeed(sortParams);
-  },
-  encode: (sort) => Effect.succeed(sort.map((part) => Schema.encodeSync(SortParamFromString)(part)).join(","))
-})), Schema.annotate({
-  identifier: "SortParamsFromString",
-  title: "Sort Parameters From String",
-  description: 'URL encoded sort parameters where descending fields are prefixed with "-" and multiple fields are comma-separated.',
-  examples: [
-    [
-      { id: "name", direction: "desc" },
-      { id: "age", direction: "asc" }
-    ]
-  ]
-}));
-var SortParamSearch = SortParamsFromString.pipe(Schema.decodeTo(Schema.String, SchemaTransformation.transform({
-  decode: (sort) => Schema.encodeSync(SortParamsFromString)(sort),
-  encode: (sort) => Schema.decodeUnknownSync(SortParamsFromString)(sort)
-})), Schema.annotate({
-  identifier: "SortParamSearch",
-  title: "Sort Search Parameter",
-  description: 'Search parameter sort value normalized to the compact "-field,otherField" URL format.',
-  examples: ["-name,age"]
-}));
-var Query = Schema.Struct({
-  page: Schema.Int.check(Schema.isGreaterThanOrEqualTo(0)),
-  pageSize: Schema.Int.check(Schema.isBetween({ minimum: 1, maximum: 100 })),
-  globalFilter: Schema.optional(Schema.String),
-  sort: Schema.optional(SortParamSearch)
-}).annotate({
-  identifier: "Query",
-  title: "Query",
-  description: "Zero-based page request parameters with optional filtering and sorting for list endpoints.",
-  examples: [
-    {
-      page: 0,
-      pageSize: 10,
-      globalFilter: "housing",
-      sort: "-publicName,createdAt"
-    }
-  ]
-});
-var PaginationMeta = Schema.Struct({
-  page: Schema.Int,
-  pageSize: Schema.Int,
-  total: Schema.Int,
-  pageCount: Schema.Int
-}).pipe(Schema.annotate({
-  identifier: "PaginationMeta",
-  title: "Pagination Metadata",
-  description: "Pagination metadata returned with a paginated list response.",
-  examples: [{ page: 0, pageSize: 10, total: 125, pageCount: 13 }]
-}));
-
 // ../../src/components/ui/data-table.tsx
-import { useAtom } from "@effect/atom-react";
-import { BrowserKeyValueStore } from "@effect/platform-browser";
-import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  useDraggable,
-  useDroppable,
-  useSensor,
-  useSensors
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { Effect as Effect2, Layer, Option as Option2, Schema as Schema2 } from "effect";
-import { KeyValueStore } from "effect/unstable/persistence";
-import { Atom } from "effect/unstable/reactivity";
-import {
-  ArrowDown,
-  ArrowUp,
-  ChevronDown,
-  ChevronRight as ChevronRight2,
-  ChevronsUpDown as ChevronsUpDown2,
-  Download,
-  EyeOff,
-  FileJson,
-  FileText,
-  GripVertical,
-  LayoutGrid,
-  MoreHorizontal,
-  RefreshCw,
-  Rows3,
-  Search,
-  Settings2,
-  X as X2
-} from "lucide-react";
-import {
-  isValidElement,
-  useEffect as useEffect2,
-  useMemo,
-  useState
-} from "react";
-import {
-  useNavigate,
-  useRouterState
-} from "@tanstack/react-router";
-import {
-  columnFilteringFeature,
-  columnResizingFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  createFilteredRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  createTableHook,
-  globalFilteringFeature,
-  rowPaginationFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  tableFeatures,
-  flexRender
-} from "@tanstack/react-table";
-import { jsx as jsx17, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
-var DEFAULT_COLUMN_MIN_SIZE = 128;
-var DEFAULT_COLUMN_SIZE = 224;
-var DEFAULT_COLUMN_MAX_SIZE = 640;
-var COLUMN_RESIZE_STEP = 8;
-var dataTableColumnMeta = {};
-var dataTableFeatures = tableFeatures({
-  columnFilteringFeature,
-  columnResizingFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  globalFilteringFeature,
-  rowPaginationFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  filteredRowModel: createFilteredRowModel(),
-  paginatedRowModel: createPaginatedRowModel(),
-  sortedRowModel: createSortedRowModel(),
-  columnMeta: dataTableColumnMeta
-});
-var {
-  createAppColumnHelper: createDataTableColumnHelper,
-  useAppTable: useDataTable,
-  useCellContext: useDataTableCellContext,
-  useHeaderContext: useDataTableHeaderContext,
-  useTableContext: useDataTableContext
-} = createTableHook({
-  features: dataTableFeatures,
-  defaultColumn: {
-    minSize: DEFAULT_COLUMN_MIN_SIZE,
-    size: DEFAULT_COLUMN_SIZE,
-    maxSize: DEFAULT_COLUMN_MAX_SIZE
-  },
-  columnResizeMode: "onChange",
-  enableColumnResizing: true,
-  tableComponents: {},
-  cellComponents: {},
-  headerComponents: {}
-});
-var TableSearchSchema = Schema2.Struct({
-  page: Schema2.optional(Query.fields.page),
-  pageSize: Schema2.optional(Query.fields.pageSize),
-  globalFilter: Query.fields.globalFilter,
-  sort: Query.fields.sort,
-  grouping: Schema2.optional(Schema2.Array(Schema2.String))
-}).annotate({ identifier: "TableSearch" });
-var TableSearchSchemaStandard = Schema2.toStandardSchemaV1(TableSearchSchema);
-var compactDataTableStorage = Layer.effect(KeyValueStore.KeyValueStore, Effect2.map(KeyValueStore.KeyValueStore, (store) => KeyValueStore.make({
-  clear: store.clear,
-  get: (key) => Effect2.flatMap(store.get(key), (value) => value === "{}" ? Effect2.as(store.remove(key), undefined) : Effect2.succeed(value)),
-  getUint8Array: store.getUint8Array,
-  remove: store.remove,
-  set: (key, value) => value === "{}" ? store.remove(key) : store.set(key, value),
-  size: store.size
-}))).pipe(Layer.provide(BrowserKeyValueStore.layerLocalStorage));
-var dataTableStorageRuntime = Atom.runtime(compactDataTableStorage);
-var DataTableViewSchema = Schema2.Union([
-  Schema2.Literal("table"),
-  Schema2.Literal("gallery")
-]).annotate({ identifier: "DataTableView" });
-var ColumnVisibilitySchema = Schema2.Record(Schema2.String, Schema2.Boolean).annotate({ identifier: "DataTableColumnVisibility" });
-var ColumnSizingSchema = Schema2.Record(Schema2.String, Schema2.Number).annotate({
-  identifier: "DataTableColumnSizing"
-});
-var RowDragDataSchema = Schema2.Struct({
-  type: Schema2.Literal("row"),
-  label: Schema2.optional(Schema2.String),
-  rowId: Schema2.String
-}).annotate({ identifier: "DataTableRowDragData" });
-var RowReorderDragDataSchema = Schema2.Struct({
-  type: Schema2.Literal("row-reorder")
-}).annotate({ identifier: "DataTableRowReorderDragData" });
-var GroupDropDataSchema = Schema2.Struct({
-  type: Schema2.Literal("group-target"),
-  fieldId: Schema2.String,
-  groupId: Schema2.String
-}).annotate({ identifier: "DataTableGroupDropData" });
-var decodeTableSearch = Schema2.decodeUnknownOption(TableSearchSchema);
-var decodeDataTableView = Schema2.decodeUnknownOption(DataTableViewSchema);
-var decodeRowDragData = Schema2.decodeUnknownOption(RowDragDataSchema);
-var decodeRowReorderDragData = Schema2.decodeUnknownOption(RowReorderDragDataSchema);
-var decodeGroupDropData = Schema2.decodeUnknownOption(GroupDropDataSchema);
-var validateTableSearchUpdate = (search) => ({
-  ...search,
-  ...Schema2.decodeUnknownSync(TableSearchSchema)(search)
-});
+import { jsx as jsx17, jsxs as jsxs9, Fragment } from "react/jsx-runtime";
 var messages3 = {
   en: {
     ...paginationMessages("en"),
@@ -1956,11 +1822,11 @@ var messages3 = {
     galleryView: "Gallery",
     columns: "Columns",
     groupBy: "Group by",
-    sortAsc: "Asc",
-    sortDesc: "Desc",
-    sortHide: "Hide",
-    sortClear: "Clear",
+    sortAsc: "Ascending",
+    sortDesc: "Descending",
+    sortClear: "Clear sorting",
     sortBy: "Sort by",
+    hideColumn: "Hide column",
     reorder: "Drag to reorder",
     resizeColumn: (column) => `Resize ${column} column`,
     listOthers: (count) => count === 1 ? "and 1 other" : `and ${count} others`,
@@ -1985,9 +1851,9 @@ var messages3 = {
     groupBy: "Grouper par",
     sortAsc: "Croissant",
     sortDesc: "Décroissant",
-    sortHide: "Cacher",
-    sortClear: "Effacer",
+    sortClear: "Effacer le tri",
     sortBy: "Trier par",
+    hideColumn: "Masquer la colonne",
     reorder: "Glisser pour réordonner",
     resizeColumn: (column) => `Redimensionner la colonne ${column}`,
     listOthers: (count) => count === 1 ? "et 1 autre" : `et ${count} autres`,
@@ -2000,63 +1866,318 @@ var dataTableMessages = (overrides) => ({
   ...getLocale().startsWith("fr") ? messages3.fr : messages3.en,
   ...overrides
 });
-var GROUP_INDENT_PX = 20;
-var GROUP_ROW_INDENT_OFFSET_PX = 44;
-var snapDragOverlayVerticalCenterToCursor = ({
-  activatorEvent,
-  activeNodeRect,
-  overlayNodeRect,
-  transform
-}) => {
-  if (!globalThis.window || !(activatorEvent instanceof globalThis.window.MouseEvent) || !activeNodeRect || !overlayNodeRect) {
-    return transform;
+var DEFAULT_MIN_WIDTH = 96;
+var DEFAULT_WIDTH = 208;
+var DEFAULT_MAX_WIDTH = 640;
+var DEFAULT_STATE = {
+  globalFilter: "",
+  sorting: [],
+  pagination: { pageIndex: 0, pageSize: 10 },
+  columnVisibility: {},
+  columnSizing: {},
+  rowSelection: {},
+  grouping: [],
+  collapsedGroups: {},
+  view: "table"
+};
+var clampWidth = (column, width) => Math.min(column.maxWidth ?? DEFAULT_MAX_WIDTH, Math.max(column.minWidth ?? DEFAULT_MIN_WIDTH, width));
+var normalizeDataTableColumns = (columnDefs, columnSizing = {}) => {
+  const ids = new Set;
+  return columnDefs.map((colDef) => {
+    const id = colDef.field ?? colDef.colId;
+    if (!id) {
+      throw new Error("DataTable columns require a field or colId");
+    }
+    if (ids.has(id)) {
+      throw new Error(`DataTable column IDs must be unique: ${id}`);
+    }
+    ids.add(id);
+    return {
+      id,
+      colDef,
+      width: clampWidth(colDef, columnSizing[id] ?? colDef.width ?? DEFAULT_WIDTH)
+    };
+  });
+};
+var getDataTableWidth = (columns, utilityColumns = 0) => columns.reduce((total, column) => total + column.width, 0) + utilityColumns * 40;
+var buildDataTableRows = (rowData, columns, getRowId) => {
+  const ids = new Set;
+  return rowData.map((data, index) => {
+    const id = getRowId?.(data) ?? String(index);
+    if (ids.has(id))
+      throw new Error(`DataTable row IDs must be unique: ${id}`);
+    ids.add(id);
+    return {
+      id,
+      data,
+      index,
+      values: new Map(columns.map((column) => {
+        const { colDef } = column;
+        const value = colDef.valueGetter ? colDef.valueGetter({ data, rowId: id, rowIndex: index, colDef }) : colDef.field ? data[colDef.field] : undefined;
+        return [column.id, value];
+      }))
+    };
+  });
+};
+var filterDataTableRows = (rows, columns, globalFilter) => {
+  const query = globalFilter.trim().toLocaleLowerCase();
+  if (!query)
+    return [...rows];
+  const searchable = columns.filter(({ colDef }) => colDef.searchable !== false);
+  return rows.filter((row) => searchable.some((column) => String(row.values.get(column.id) ?? "").toLocaleLowerCase().includes(query)));
+};
+var sortDataTableRows = (rows, columns, sorting) => {
+  const byId = new Map(columns.map((column) => [column.id, column]));
+  return rows.map((row, stableIndex) => ({ row, stableIndex })).sort((left, right) => {
+    for (const sort of sorting) {
+      const column = byId.get(sort.id);
+      if (!column)
+        continue;
+      const leftValue = left.row.values.get(sort.id);
+      const rightValue = right.row.values.get(sort.id);
+      const comparison = column.colDef.comparator ? column.colDef.comparator(leftValue, rightValue, left.row.data, right.row.data) : Object.is(leftValue, rightValue) ? 0 : leftValue === null || leftValue === undefined ? 1 : rightValue === null || rightValue === undefined ? -1 : Schema.is(Schema.Number)(leftValue) && Schema.is(Schema.Number)(rightValue) ? leftValue - rightValue : String(leftValue).localeCompare(String(rightValue), undefined, { numeric: true, sensitivity: "base" });
+      if (comparison !== 0)
+        return sort.desc ? -comparison : comparison;
+    }
+    return left.stableIndex - right.stableIndex;
+  }).map(({ row }) => row);
+};
+var paginateDataTableRows = (rows, pagination) => {
+  const pageSize = Math.max(1, pagination.pageSize);
+  const lastPageIndex = Math.max(0, Math.ceil(rows.length / pageSize) - 1);
+  const pageIndex = Math.min(lastPageIndex, Math.max(0, pagination.pageIndex));
+  const start = pageIndex * pageSize;
+  return rows.slice(start, start + pageSize);
+};
+var mergeDataTableState = (state, controlledState = {}) => ({
+  globalFilter: controlledState.globalFilter ?? state.globalFilter,
+  sorting: controlledState.sorting ?? state.sorting,
+  pagination: controlledState.pagination ?? state.pagination,
+  columnVisibility: controlledState.columnVisibility ?? state.columnVisibility,
+  columnSizing: controlledState.columnSizing ?? state.columnSizing,
+  rowSelection: controlledState.rowSelection ?? state.rowSelection,
+  grouping: controlledState.grouping ?? state.grouping,
+  collapsedGroups: controlledState.collapsedGroups ?? state.collapsedGroups,
+  view: controlledState.view ?? state.view
+});
+var sameDataTableState = (left, right) => left.globalFilter === right.globalFilter && left.sorting === right.sorting && left.pagination === right.pagination && left.columnVisibility === right.columnVisibility && left.columnSizing === right.columnSizing && left.rowSelection === right.rowSelection && left.grouping === right.grouping && left.collapsedGroups === right.collapsedGroups && left.view === right.view;
+var reorderDataTableRows = (rows, sourceRowId, targetRowId) => {
+  const sourceIndex = rows.findIndex((row) => row.id === sourceRowId);
+  const targetIndex = rows.findIndex((row) => row.id === targetRowId);
+  const reordered = rows.map((row) => row.data);
+  if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+    return reordered;
   }
+  const [source] = reordered.splice(sourceIndex, 1);
+  if (source)
+    reordered.splice(targetIndex, 0, source);
+  return reordered;
+};
+var RowIdContext = createContext(null);
+var ColumnIdContext = createContext(null);
+var useRequiredId = (context) => {
+  const id = useContext(context);
+  if (!id)
+    throw new Error("DataTable internal ID context is missing");
+  return id;
+};
+var getGroupDropKey = (fieldId, groupId) => `${encodeURIComponent(fieldId)}:${encodeURIComponent(groupId)}`;
+var parseGroupDropKey = (key) => {
+  const separator = key.indexOf(":");
+  if (separator === -1)
+    return null;
   return {
-    ...transform,
-    y: transform.y + activatorEvent.clientY - activeNodeRect.top - overlayNodeRect.height / 2
+    fieldId: decodeURIComponent(key.slice(0, separator)),
+    groupId: decodeURIComponent(key.slice(separator + 1))
   };
 };
-var getDefaultGrouping = (grouping) => {
-  if (!grouping) {
-    return [];
+var findTableDragTarget = (elements, selector, root) => {
+  for (const element of elements) {
+    const target = element.closest(selector);
+    if (target instanceof HTMLElement && root?.contains(target))
+      return target;
   }
-  const validInitial = grouping.initial?.filter((id) => grouping.fields.some((field) => field.id === id));
-  if (validInitial?.length) {
-    return validInitial;
+  return null;
+};
+var clearDragPresentation = (root) => {
+  root?.querySelectorAll("[data-drag-source], [data-drop-target], [data-drop-position]").forEach((element) => {
+    element.removeAttribute("data-drag-source");
+    element.removeAttribute("data-drop-target");
+    element.removeAttribute("data-drop-position");
+  });
+};
+var resolveConfig = (props) => {
+  const features = props.features ?? {};
+  const selection = features.selection;
+  const getRowId = selection && selection.getRowId || props.getRowId || undefined;
+  if ((selection || features.reordering) && !getRowId) {
+    throw new Error("DataTable requires getRowId when selection or reordering is enabled");
   }
-  return grouping.fields[0] ? [grouping.fields[0].id] : [];
+  return {
+    getRowId,
+    onStateChange: props.onStateChange,
+    status: props.status ?? {},
+    features,
+    onRowClicked: props.onRowClicked,
+    labels: dataTableMessages(props.messages)
+  };
+};
+var initialPublicState = (props) => {
+  const grouping = props.features?.grouping;
+  const groupingInitial = grouping && grouping.initial ? grouping.initial : [];
+  return {
+    ...DEFAULT_STATE,
+    grouping: groupingInitial,
+    ...props.initialState,
+    ...props.state
+  };
+};
+var buildDataTableModel = (store) => {
+  const columns = normalizeDataTableColumns(store.columnDefs, store.state.columnSizing);
+  const selection = store.config.features.selection;
+  const rowId = selection && selection.getRowId || store.config.getRowId || undefined;
+  const rows = buildDataTableRows(store.rowData, columns, rowId);
+  const pagination = store.config.features.pagination ?? { mode: "client" };
+  const server = pagination !== false && pagination.mode === "server";
+  const filteredRows = server ? [...rows] : filterDataTableRows(rows, columns, store.state.globalFilter);
+  const sortedRows = server ? filteredRows : sortDataTableRows(filteredRows, columns, store.state.sorting);
+  const pageRows = pagination === false || server ? sortedRows : paginateDataTableRows(sortedRows, store.state.pagination);
+  const totalRows = server ? pagination.rowCount : sortedRows.length;
+  return {
+    columns,
+    visibleColumns: columns.filter(({ id }) => store.state.columnVisibility[id] !== false),
+    rows,
+    filteredRows,
+    sortedRows,
+    pageRows,
+    pageCount: Math.max(1, Math.ceil(totalRows / Math.max(1, store.state.pagination.pageSize))),
+    totalRows
+  };
+};
+var useTableAtom = (tableAtom) => useAtom(tableAtom);
+var changeState = (setStore, update) => {
+  setStore((store) => {
+    const proposed = update(store.state);
+    store.config.onStateChange?.(proposed);
+    const state = mergeDataTableState(proposed, store.controlledState);
+    if (sameDataTableState(state, store.state))
+      return store;
+    const next = { ...store, state };
+    return { ...next, model: buildDataTableModel(next) };
+  });
+};
+var deriveModel = (store) => store.model;
+var groupDataTableRows = (rows, fields, depth = 0, parentKey = "") => {
+  const field = fields[0];
+  if (!field)
+    return [];
+  const groups = new Map;
+  field.getGroupIds?.().forEach((id) => groups.set(id, []));
+  rows.forEach((row) => {
+    const ids = field.getRowGroupIds?.(row.data) ?? [
+      field.getGroupId(row.data)
+    ];
+    ids.forEach((id) => groups.set(id, [...groups.get(id) ?? [], row]));
+  });
+  return Array.from(groups, ([groupId, groupRows]) => {
+    const segment = `${encodeURIComponent(field.id)}:${encodeURIComponent(groupId)}`;
+    const key = `${parentKey}${parentKey ? "/" : ""}${segment}`;
+    return {
+      key,
+      groupId,
+      depth,
+      field,
+      rows: groupRows,
+      children: groupDataTableRows(groupRows, fields.slice(1), depth + 1, key)
+    };
+  });
+};
+var getDataTableSelectableRows = (model, grouped, isRowSelectable) => (grouped ? model.sortedRows : model.pageRows).filter((row) => isRowSelectable?.(row.data) ?? true);
+var getActiveGrouping = (store) => {
+  const grouping = store.config.features.grouping;
+  if (!grouping)
+    return [];
+  return store.state.grouping.flatMap((id) => {
+    const field = grouping.fields.find((candidate) => candidate.id === id);
+    return field ? [field] : [];
+  });
+};
+var canReorderRows = (store) => {
+  const pagination = store.config.features.pagination;
+  return !!store.config.features.reordering && !getActiveGrouping(store).length && !store.state.globalFilter && !store.state.sorting.length && !(pagination && pagination.mode === "server");
+};
+var canMoveRowsToGroups = (store) => getActiveGrouping(store).some((field) => !!field.onMoveToGroup);
+var canDragRows = (store) => getActiveGrouping(store).length ? canMoveRowsToGroups(store) : canReorderRows(store);
+var getSelectedRows = (store, model) => model.rows.filter((row) => store.state.rowSelection[row.id]).map((row) => row.data);
+var renderCell = (row, column) => {
+  const value = row.values.get(column.id);
+  const params = {
+    data: row.data,
+    value,
+    rowId: row.id,
+    rowIndex: row.index,
+    colDef: column.colDef
+  };
+  const CellRenderer = column.colDef.cellRenderer;
+  if (CellRenderer)
+    return /* @__PURE__ */ jsx17(CellRenderer, {
+      ...params
+    });
+  return column.colDef.valueFormatter?.(params) ?? (value === null || value === undefined ? null : String(value));
+};
+var nodeText = (node) => {
+  if (Schema.is(Schema.String)(node) || Schema.is(Schema.Number)(node))
+    return String(node);
+  if (!isValidElement(node))
+    return "";
+  if (Schema.is(Schema.String)(node.props.title))
+    return node.props.title;
+  return nodeText(node.props.children);
+};
+var columnLabel = (column) => nodeText(column.colDef.headerName) || column.id;
+var withExtension = (fileName, extension) => fileName.includes(".") ? fileName.replace(/\.[^/.]+$/, `.${extension}`) : `${fileName}.${extension}`;
+var escapeCsvValue = (value) => {
+  if (value === null || value === undefined)
+    return "";
+  const text = String(value);
+  return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
 };
-var getGroupTargetDropId = (key) => `group-target:${key}`;
-var getRowDragId = (rowId) => `row:${rowId}`;
-var getSortableRowId = (rowId) => `sortable-row:${rowId}`;
-var getGroupLabels = (section) => {
-  const rows = section.rows.map((row) => row.original);
-  const label = section.field.getGroupLabel?.(section.groupId, rows) ?? section.groupId;
-  return section.field.renderGroupLabel?.(section.groupId, rows) ?? label;
+var downloadCsv = (headers, data, fileName = "data.csv") => {
+  const content = [headers, ...data].map((row) => row.map(escapeCsvValue).join(",")).join(`
+`);
+  downloadBlob(content, "text/csv;charset=utf-8", withExtension(fileName, "csv"));
+};
+var downloadJson = (data, fileName = "data.json") => downloadBlob(JSON.stringify(data, null, 2), "application/json;charset=utf-8", withExtension(fileName, "json"));
+var downloadBlob = (content, type, fileName) => {
+  const url = window.URL.createObjectURL(new Blob([content], { type }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  requestAnimationFrame(() => window.URL.revokeObjectURL(url));
 };
 var DataTableRowActions = ({
   actions,
-  contentClassName,
   row,
   title
 }) => {
-  const resolvedTitle = title ?? dataTableMessages().actions;
-  const visibleActions = actions.filter((action) => !action.visible || action.visible(row));
-  if (visibleActions.length === 0) {
+  const visible = actions.filter((action) => !action.visible || action.visible(row));
+  if (!visible.length)
     return null;
-  }
-  return /* @__PURE__ */ jsxs8(DropdownMenu, {
+  return /* @__PURE__ */ jsxs9(DropdownMenu, {
     children: [
       /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
         onClick: (event) => event.stopPropagation(),
-        render: /* @__PURE__ */ jsxs8(Button, {
+        render: /* @__PURE__ */ jsxs9(Button, {
           className: "size-8 focus-visible:ring-inset [&_svg:not([class*='size-'])]:size-4",
-          variant: "ghost",
           size: "icon",
+          variant: "ghost",
           children: [
             /* @__PURE__ */ jsx17("span", {
               className: "sr-only",
-              children: resolvedTitle
+              children: title
             }),
             /* @__PURE__ */ jsx17(MoreHorizontal, {})
           ]
@@ -2064,20 +2185,19 @@ var DataTableRowActions = ({
       }),
       /* @__PURE__ */ jsx17(DropdownMenuContent, {
         align: "end",
-        className: cn("w-max", contentClassName),
-        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
+        className: "w-max",
+        children: /* @__PURE__ */ jsxs9(DropdownMenuGroup, {
           children: [
             /* @__PURE__ */ jsx17(DropdownMenuLabel, {
-              children: resolvedTitle
+              children: title
             }),
             /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-            visibleActions.map((action) => /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-              className: "whitespace-nowrap",
+            visible.map((action) => /* @__PURE__ */ jsxs9(DropdownMenuItem, {
               onClick: (event) => {
                 event.stopPropagation();
                 action.onClick(row);
               },
-              ...action.variant ? { variant: action.variant } : {},
+              variant: action.variant,
               children: [
                 action.icon,
                 action.name
@@ -2089,1609 +2209,1291 @@ var DataTableRowActions = ({
     ]
   });
 };
-var DataTableBulkActions = ({
-  actions,
-  label,
-  selectedLabel: selectedLabel2,
-  rows
+var DataTableToolbar = ({
+  tableAtom
 }) => {
-  const visibleActions = actions.filter((action) => !action.visible || action.visible(rows));
-  if (visibleActions.length === 0)
+  const [store, setStore] = useTableAtom(tableAtom);
+  const { features, labels: labels2 } = store.config;
+  const model = deriveModel(store);
+  const selectedRows = getSelectedRows(store, model);
+  const grouping = features.grouping;
+  const bulkActions = features.selection && features.selection.bulkActions;
+  const hasToolbar = features.search !== false || features.sorting !== false || features.columnVisibility !== false || !!features.export || !!features.gallery || !!grouping || !!features.refresh || !!bulkActions && selectedRows.length > 0;
+  if (!hasToolbar)
     return null;
-  return /* @__PURE__ */ jsxs8(DropdownMenu, {
+  const update = (next) => changeState(setStore, next);
+  const visibleBulkActions = bulkActions ? bulkActions.items.filter((action) => !action.visible || action.visible(selectedRows)) : [];
+  const exportRows = features.export && features.export.scope === "filteredRows" ? model.filteredRows : model.pageRows;
+  return /* @__PURE__ */ jsxs9("div", {
+    className: "flex flex-col gap-2 pb-4",
     children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-        render: /* @__PURE__ */ jsxs8(Button, {
-          className: "h-9",
-          size: "sm",
-          variant: "default",
-          children: [
-            selectedLabel2,
-            /* @__PURE__ */ jsx17(Badge, {
-              className: "bg-primary-foreground/15 text-primary-foreground min-w-5 justify-center rounded-full border-0 px-1.5 tabular-nums",
-              variant: "secondary",
-              children: rows.length
-            }),
-            /* @__PURE__ */ jsx17(ChevronRight2, {
-              className: "rotate-90"
-            })
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, {
-        align: "start",
-        className: "w-max max-w-56",
-        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
+      features.search !== false ? /* @__PURE__ */ jsxs9("div", {
+        className: "relative min-w-0",
+        children: [
+          /* @__PURE__ */ jsx17(Search, {
+            className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
+          }),
+          /* @__PURE__ */ jsx17(Input, {
+            className: "px-9",
+            onChange: (event) => update((state) => ({
+              ...state,
+              globalFilter: event.target.value,
+              pagination: { ...state.pagination, pageIndex: 0 }
+            })),
+            placeholder: labels2.filter,
+            value: store.state.globalFilter
+          }),
+          store.state.globalFilter ? /* @__PURE__ */ jsx17(Button, {
+            "aria-label": labels2.filter,
+            className: "absolute top-1/2 right-1 size-7 -translate-y-1/2",
+            onClick: () => update((state) => ({
+              ...state,
+              globalFilter: "",
+              pagination: { ...state.pagination, pageIndex: 0 }
+            })),
+            size: "icon",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx17(X2, {})
+          }) : null
+        ]
+      }) : null,
+      /* @__PURE__ */ jsx17("div", {
+        className: "-m-1 flex w-full overflow-x-auto p-1",
+        children: /* @__PURE__ */ jsxs9(Menubar, {
+          className: "h-auto w-max min-w-full justify-start bg-transparent shadow-none [&_[data-slot=menubar-trigger]]:gap-2 [&_[data-slot=menubar-trigger]_svg]:size-4",
           children: [
-            /* @__PURE__ */ jsx17(DropdownMenuLabel, {
-              children: label
-            }),
-            /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-            visibleActions.map((action) => /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-              className: "whitespace-nowrap",
-              onClick: () => action.onClick(rows),
-              ...action.variant ? { variant: action.variant } : {},
+            visibleBulkActions.length ? /* @__PURE__ */ jsxs9(MenubarMenu, {
               children: [
-                action.icon,
-                action.name
+                /* @__PURE__ */ jsxs9(MenubarTrigger, {
+                  className: "bg-primary text-primary-foreground hover:bg-primary/90 aria-expanded:bg-primary/90",
+                  children: [
+                    labels2.selected,
+                    /* @__PURE__ */ jsx17(Badge, {
+                      variant: "secondary",
+                      children: selectedRows.length
+                    }),
+                    /* @__PURE__ */ jsx17(ChevronDown, {})
+                  ]
+                }),
+                /* @__PURE__ */ jsx17(MenubarContent, {
+                  align: "end",
+                  className: "w-max",
+                  children: /* @__PURE__ */ jsxs9(MenubarGroup, {
+                    children: [
+                      /* @__PURE__ */ jsx17(MenubarLabel, {
+                        children: bulkActions && bulkActions.label ? bulkActions.label : labels2.actions
+                      }),
+                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
+                      visibleBulkActions.map((action) => /* @__PURE__ */ jsxs9(MenubarItem, {
+                        onClick: () => action.onClick(selectedRows),
+                        variant: action.variant,
+                        children: [
+                          action.icon,
+                          action.name
+                        ]
+                      }, action.id ?? action.name))
+                    ]
+                  })
+                })
               ]
-            }, action.id ?? action.name))
+            }) : null,
+            grouping ? /* @__PURE__ */ jsxs9(MenubarMenu, {
+              children: [
+                /* @__PURE__ */ jsxs9(MenubarTrigger, {
+                  "aria-label": labels2.groupBy,
+                  children: [
+                    /* @__PURE__ */ jsx17(Rows3, {}),
+                    /* @__PURE__ */ jsx17("span", {
+                      className: "hidden sm:inline",
+                      children: labels2.groupBy
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx17(MenubarContent, {
+                  align: "end",
+                  children: /* @__PURE__ */ jsxs9(MenubarGroup, {
+                    children: [
+                      /* @__PURE__ */ jsx17(MenubarLabel, {
+                        children: labels2.groupBy
+                      }),
+                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
+                      grouping.fields.map((field) => /* @__PURE__ */ jsx17(MenubarCheckboxItem, {
+                        checked: store.state.grouping.includes(field.id),
+                        onCheckedChange: (checked) => update((state) => ({
+                          ...state,
+                          grouping: checked ? [...state.grouping, field.id] : state.grouping.filter((id) => id !== field.id)
+                        })),
+                        children: field.label
+                      }, field.id))
+                    ]
+                  })
+                })
+              ]
+            }) : null,
+            features.sorting !== false ? /* @__PURE__ */ jsx17(SortMenu, {
+              tableAtom
+            }) : null,
+            features.gallery ? /* @__PURE__ */ jsx17(ViewMenu, {
+              tableAtom
+            }) : null,
+            features.columnVisibility !== false ? /* @__PURE__ */ jsx17(ColumnMenu, {
+              tableAtom
+            }) : null,
+            features.refresh ? /* @__PURE__ */ jsx17(MenubarMenu, {
+              children: /* @__PURE__ */ jsxs9(MenubarTrigger, {
+                "aria-label": labels2.refresh,
+                onClick: features.refresh,
+                children: [
+                  /* @__PURE__ */ jsx17(RefreshCw, {}),
+                  /* @__PURE__ */ jsx17("span", {
+                    className: "hidden sm:inline",
+                    children: labels2.refresh
+                  })
+                ]
+              })
+            }) : null,
+            features.export ? /* @__PURE__ */ jsxs9(MenubarMenu, {
+              children: [
+                /* @__PURE__ */ jsxs9(MenubarTrigger, {
+                  "aria-label": labels2.export,
+                  disabled: !exportRows.length,
+                  children: [
+                    /* @__PURE__ */ jsx17(Download, {}),
+                    /* @__PURE__ */ jsx17("span", {
+                      className: "hidden sm:inline",
+                      children: labels2.export
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx17(MenubarContent, {
+                  align: "end",
+                  children: /* @__PURE__ */ jsxs9(MenubarGroup, {
+                    children: [
+                      /* @__PURE__ */ jsx17(MenubarLabel, {
+                        children: labels2.export
+                      }),
+                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
+                      /* @__PURE__ */ jsxs9(MenubarItem, {
+                        onClick: () => downloadCsv(model.visibleColumns.map(columnLabel), exportRows.map((row) => model.visibleColumns.map((column) => String(row.values.get(column.id) ?? ""))), features.export ? features.export.baseName : "table"),
+                        children: [
+                          /* @__PURE__ */ jsx17(FileText, {}),
+                          labels2.exportCsv
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxs9(MenubarItem, {
+                        onClick: () => downloadJson(exportRows.map((row) => Object.fromEntries(model.visibleColumns.map((column) => [
+                          column.id,
+                          row.values.get(column.id)
+                        ]))), features.export ? features.export.baseName : "table"),
+                        children: [
+                          /* @__PURE__ */ jsx17(FileJson, {}),
+                          labels2.exportJson
+                        ]
+                      })
+                    ]
+                  })
+                })
+              ]
+            }) : null
           ]
         })
       })
     ]
   });
 };
-var buildGroupedSections = (rows, fields, depth = 0, parentKey = "") => {
-  if (fields.length === 0) {
-    return [];
-  }
-  const [field, ...remainingFields] = fields;
-  const groups = new Map;
-  field.getGroupIds?.().forEach((groupId) => {
-    groups.set(groupId, []);
-  });
-  rows.forEach((row) => {
-    const groupIds = field.getRowGroupIds?.(row.original) ?? [
-      field.getGroupId(row.original)
-    ];
-    for (const groupId of groupIds) {
-      const currentRows = groups.get(groupId) ?? [];
-      currentRows.push(row);
-      groups.set(groupId, currentRows);
-    }
-  });
-  return Array.from(groups.entries()).map(([groupId, groupRows]) => {
-    const key = parentKey ? `${parentKey}::${field.id}:${groupId}` : `${field.id}:${groupId}`;
-    return {
-      key,
-      groupId,
-      depth,
-      field,
-      rows: groupRows,
-      children: groupRows.length > 0 ? buildGroupedSections(groupRows, remainingFields, depth + 1, key) : []
-    };
-  });
-};
-var GroupHeaderRow = ({
-  collapsed,
-  colSpan,
-  onToggle,
-  section
+var SortMenu = ({
+  tableAtom
 }) => {
-  return /* @__PURE__ */ jsx17(TableRow, {
-    children: /* @__PURE__ */ jsx17(TableCell, {
-      className: "relative p-0",
-      colSpan,
-      onClick: onToggle,
-      children: /* @__PURE__ */ jsxs8("div", {
-        className: "flex cursor-pointer items-center gap-3 px-2 py-2 font-medium transition-colors",
-        style: {
-          paddingLeft: `calc(0.5rem + ${section.depth * GROUP_INDENT_PX}px)`
-        },
+  const [store, setStore] = useTableAtom(tableAtom);
+  const columns = deriveModel(store).columns.filter(({ colDef }) => colDef.sortable !== false);
+  if (!columns.length)
+    return null;
+  const current = store.state.sorting[0];
+  const sort = (id, desc) => changeState(setStore, (state) => ({
+    ...state,
+    sorting: [{ id, desc }],
+    pagination: { ...state.pagination, pageIndex: 0 }
+  }));
+  return /* @__PURE__ */ jsxs9(MenubarMenu, {
+    children: [
+      /* @__PURE__ */ jsxs9(MenubarTrigger, {
+        "aria-label": store.config.labels.sortBy,
         children: [
-          collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
-            className: "size-4"
-          }) : /* @__PURE__ */ jsx17(ChevronDown, {
-            className: "size-4"
-          }),
-          /* @__PURE__ */ jsx17("div", {
-            className: "min-w-0 flex-1 text-left",
-            children: getGroupLabels(section)
-          }),
-          /* @__PURE__ */ jsx17(Badge, {
-            variant: "secondary",
-            className: "ml-auto",
-            children: section.rows.length
-          }),
-          /* @__PURE__ */ jsx17(DataTableGroupActions, {
-            actions: section.field.actions,
-            groupId: section.groupId,
-            title: section.field.actionsTitle
+          current ? current.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {}),
+          /* @__PURE__ */ jsx17("span", {
+            className: "hidden sm:inline",
+            children: store.config.labels.sortBy
           })
         ]
+      }),
+      /* @__PURE__ */ jsx17(MenubarContent, {
+        align: "end",
+        className: "w-52",
+        children: columns.map((column) => {
+          const sortState = store.state.sorting.find(({ id }) => id === column.id);
+          return /* @__PURE__ */ jsxs9(MenubarSub, {
+            children: [
+              /* @__PURE__ */ jsxs9(MenubarSubTrigger, {
+                children: [
+                  sortState ? sortState.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : null,
+                  columnLabel(column)
+                ]
+              }),
+              /* @__PURE__ */ jsxs9(MenubarSubContent, {
+                children: [
+                  /* @__PURE__ */ jsxs9(MenubarItem, {
+                    onClick: () => sort(column.id, false),
+                    children: [
+                      /* @__PURE__ */ jsx17(ArrowUp, {}),
+                      " ",
+                      store.config.labels.sortAsc
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs9(MenubarItem, {
+                    onClick: () => sort(column.id, true),
+                    children: [
+                      /* @__PURE__ */ jsx17(ArrowDown, {}),
+                      " ",
+                      store.config.labels.sortDesc
+                    ]
+                  }),
+                  sortState ? /* @__PURE__ */ jsxs9(Fragment, {
+                    children: [
+                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
+                      /* @__PURE__ */ jsxs9(MenubarItem, {
+                        onClick: () => changeState(setStore, (state) => ({
+                          ...state,
+                          sorting: state.sorting.filter(({ id }) => id !== column.id)
+                        })),
+                        children: [
+                          /* @__PURE__ */ jsx17(X2, {}),
+                          " ",
+                          store.config.labels.sortClear
+                        ]
+                      })
+                    ]
+                  }) : null
+                ]
+              })
+            ]
+          }, column.id);
+        })
       })
-    })
-  });
-};
-var GroupTableSection = ({
-  children,
-  section
-}) => {
-  const { isOver, setNodeRef } = useDroppable({
-    id: getGroupTargetDropId(section.key),
-    disabled: !section.field.onMoveToGroup,
-    data: {
-      type: "group-target",
-      fieldId: section.field.id,
-      groupId: section.groupId
-    }
-  });
-  return /* @__PURE__ */ jsx17(TableBody, {
-    className: cn("relative px-2", isOver && "ring-primary ring-1 ring-inset"),
-    ref: setNodeRef,
-    children
+    ]
   });
 };
-var GroupHeaderCard = ({
-  collapsed,
-  onToggle,
-  section
+var ViewMenu = ({
+  tableAtom
 }) => {
-  const { isOver, setNodeRef } = useDroppable({
-    id: getGroupTargetDropId(section.key),
-    disabled: !section.field.onMoveToGroup,
-    data: {
-      type: "group-target",
-      fieldId: section.field.id,
-      groupId: section.groupId
-    }
-  });
-  return /* @__PURE__ */ jsxs8("div", {
-    className: cn("flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left font-medium transition-colors", isOver && "outline outline-primary"),
-    ref: setNodeRef,
+  const [store, setStore] = useTableAtom(tableAtom);
+  return /* @__PURE__ */ jsxs9(MenubarMenu, {
     children: [
-      /* @__PURE__ */ jsxs8("button", {
-        className: "flex min-w-0 flex-1 items-center gap-3 text-left",
-        onClick: onToggle,
-        type: "button",
+      /* @__PURE__ */ jsxs9(MenubarTrigger, {
+        "aria-label": store.config.labels.view,
         children: [
-          collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
-            className: "size-4"
-          }) : /* @__PURE__ */ jsx17(ChevronDown, {
-            className: "size-4"
-          }),
-          /* @__PURE__ */ jsx17("div", {
-            className: "min-w-0 flex-1",
-            children: getGroupLabels(section)
-          }),
-          /* @__PURE__ */ jsx17(Badge, {
-            variant: "secondary",
-            className: "ml-auto",
-            children: section.rows.length
+          store.state.view === "gallery" ? /* @__PURE__ */ jsx17(LayoutGrid, {}) : /* @__PURE__ */ jsx17(Rows3, {}),
+          /* @__PURE__ */ jsx17("span", {
+            className: "hidden sm:inline",
+            children: store.config.labels.view
           })
         ]
       }),
-      /* @__PURE__ */ jsx17(DataTableGroupActions, {
-        actions: section.field.actions,
-        groupId: section.groupId,
-        title: section.field.actionsTitle
+      /* @__PURE__ */ jsx17(MenubarContent, {
+        align: "end",
+        children: /* @__PURE__ */ jsxs9(MenubarRadioGroup, {
+          onValueChange: (view) => {
+            if (view === "table" || view === "gallery") {
+              changeState(setStore, (state) => ({ ...state, view }));
+            }
+          },
+          value: store.state.view,
+          children: [
+            /* @__PURE__ */ jsxs9(MenubarRadioItem, {
+              value: "table",
+              children: [
+                /* @__PURE__ */ jsx17(Rows3, {}),
+                " ",
+                store.config.labels.tableView
+              ]
+            }),
+            /* @__PURE__ */ jsxs9(MenubarRadioItem, {
+              value: "gallery",
+              children: [
+                /* @__PURE__ */ jsx17(LayoutGrid, {}),
+                " ",
+                store.config.labels.galleryView
+              ]
+            })
+          ]
+        })
       })
     ]
   });
 };
-var DataTableGroupActions = ({
-  actions,
-  groupId,
-  title
+var ColumnMenu = ({
+  tableAtom
 }) => {
-  const visibleActions = actions?.filter((action) => !action.visible || action.visible(groupId));
-  if (!visibleActions?.length)
+  const [store, setStore] = useTableAtom(tableAtom);
+  const columns = deriveModel(store).columns.filter(({ colDef }) => colDef.hideable !== false);
+  if (!columns.length)
     return null;
-  return /* @__PURE__ */ jsxs8(DropdownMenu, {
+  return /* @__PURE__ */ jsxs9(MenubarMenu, {
     children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-        onClick: (event) => event.stopPropagation(),
-        render: /* @__PURE__ */ jsxs8(Button, {
-          className: "size-7 shadow-md [&_svg:not([class*='size-'])]:size-3.5",
-          size: "icon",
-          variant: "ghost",
-          children: [
-            /* @__PURE__ */ jsx17("span", {
-              className: "sr-only",
-              children: title
-            }),
-            /* @__PURE__ */ jsx17(MoreHorizontal, {})
-          ]
-        })
+      /* @__PURE__ */ jsxs9(MenubarTrigger, {
+        "aria-label": store.config.labels.columns,
+        children: [
+          /* @__PURE__ */ jsx17(Settings2, {}),
+          /* @__PURE__ */ jsx17("span", {
+            className: "hidden sm:inline",
+            children: store.config.labels.columns
+          })
+        ]
       }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, {
+      /* @__PURE__ */ jsx17(MenubarContent, {
         align: "end",
-        className: "w-max",
-        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
+        children: /* @__PURE__ */ jsxs9(MenubarGroup, {
           children: [
-            /* @__PURE__ */ jsx17(DropdownMenuLabel, {
-              children: title
+            /* @__PURE__ */ jsx17(MenubarLabel, {
+              children: store.config.labels.columns
             }),
-            /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-            visibleActions.map((action) => /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-              className: "whitespace-nowrap",
-              onClick: (event) => {
-                event.stopPropagation();
-                action.onClick(groupId);
-              },
-              ...action.variant ? { variant: action.variant } : {},
-              children: [
-                action.icon,
-                action.name
-              ]
-            }, action.name))
+            /* @__PURE__ */ jsx17(MenubarSeparator, {}),
+            columns.map((column) => /* @__PURE__ */ jsx17(MenubarCheckboxItem, {
+              checked: store.state.columnVisibility[column.id] !== false,
+              onCheckedChange: (visible) => changeState(setStore, (state) => ({
+                ...state,
+                columnVisibility: {
+                  ...state.columnVisibility,
+                  [column.id]: visible
+                }
+              })),
+              children: columnLabel(column)
+            }, column.id))
           ]
         })
       })
     ]
   });
 };
-var DataTableRow = ({
-  canDrag,
-  canReorder,
-  dragLabel,
-  indentDepth = 0,
-  reorderHandleLabel,
-  onRowClick,
-  row,
-  rowActions,
-  rowActionsLabel,
-  selectRowLabel,
-  selectable,
-  table
+var ResizeHandle = ({
+  tableAtom
 }) => {
-  const sortable = useSortable({
-    id: getSortableRowId(row.id),
-    disabled: !canReorder,
-    data: {
-      type: "row-reorder",
-      row: row.original,
-      label: dragLabel
+  const [store, setStore] = useTableAtom(tableAtom);
+  const columnId = useRequiredId(ColumnIdContext);
+  const column = deriveModel(store).columns.find(({ id }) => id === columnId);
+  if (!column || column.colDef.resizable === false)
+    return null;
+  const resize = (width) => changeState(setStore, (state) => ({
+    ...state,
+    columnSizing: {
+      ...state.columnSizing,
+      [column.id]: clampWidth(column.colDef, width)
     }
+  }));
+  const onPointerDown = (event) => {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    event.currentTarget.dataset.startX = String(event.clientX);
+    event.currentTarget.dataset.startWidth = String(column.width);
+  };
+  const onPointerMove = (event) => {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId))
+      return;
+    const startX = Number(event.currentTarget.dataset.startX);
+    const startWidth = Number(event.currentTarget.dataset.startWidth);
+    resize(startWidth + event.clientX - startX);
+  };
+  return /* @__PURE__ */ jsx17("button", {
+    "aria-label": store.config.labels.resizeColumn(columnLabel(column)),
+    "aria-orientation": "vertical",
+    "aria-valuemax": column.colDef.maxWidth ?? DEFAULT_MAX_WIDTH,
+    "aria-valuemin": column.colDef.minWidth ?? DEFAULT_MIN_WIDTH,
+    "aria-valuenow": column.width,
+    className: "hover:bg-primary/60 absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none",
+    onDoubleClick: () => resize(column.colDef.width ?? DEFAULT_WIDTH),
+    onKeyDown: (event) => {
+      const delta = event.key === "ArrowLeft" ? -8 : event.key === "ArrowRight" ? 8 : 0;
+      if (delta) {
+        event.preventDefault();
+        resize(column.width + delta);
+      }
+    },
+    onPointerDown,
+    onPointerMove,
+    role: "separator",
+    type: "button"
   });
-  const draggable = useDraggable({
-    id: getRowDragId(row.id),
-    disabled: !canDrag || canReorder,
-    data: {
-      type: "row",
-      rowId: row.id,
-      label: dragLabel
+};
+var DragHandle = ({
+  tableAtom
+}) => {
+  const [store, setStore] = useTableAtom(tableAtom);
+  const rowId = useRequiredId(RowIdContext);
+  const dragRef = useRef2(null);
+  const [overlay, setOverlay] = useState(null);
+  const reset = (element) => {
+    clearDragPresentation(element.closest("[data-table-root]"));
+    dragRef.current = null;
+    setOverlay(null);
+  };
+  const onPointerDown = (event) => {
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const row = deriveModel(store).rows.find((candidate) => candidate.id === rowId);
+    const grouping = store.config.features.grouping;
+    const reordering = store.config.features.reordering;
+    dragRef.current = {
+      pointerId: event.pointerId,
+      rowId,
+      label: row && grouping && grouping.getRowLabel?.(row.data) || row && reordering && reordering.getRowLabel?.(row.data) || rowId,
+      startX: event.clientX,
+      startY: event.clientY,
+      active: false
+    };
+  };
+  const onPointerMove = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId)
+      return;
+    const root = event.currentTarget.closest("[data-table-root]");
+    const active = drag.active || Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) >= 8;
+    drag.active = active;
+    clearDragPresentation(root);
+    if (!active)
+      return;
+    const elements = document.elementsFromPoint(event.clientX, event.clientY);
+    const rowTarget = findTableDragTarget(elements, "[data-table-row]", root);
+    const groupTarget = findTableDragTarget(elements, "[data-table-group]", root);
+    event.currentTarget.closest("[data-table-row]")?.setAttribute("data-drag-source", "true");
+    if (canMoveRowsToGroups(store)) {
+      groupTarget?.setAttribute("data-drop-target", "true");
+    } else if (rowTarget?.dataset.tableRow !== drag.rowId) {
+      const rows = deriveModel(store).pageRows;
+      const sourceIndex = rows.findIndex((row) => row.id === drag.rowId);
+      const targetIndex = rows.findIndex((row) => row.id === rowTarget?.dataset.tableRow);
+      if (sourceIndex !== -1 && targetIndex !== -1) {
+        rowTarget?.setAttribute("data-drop-position", sourceIndex < targetIndex ? "after" : "before");
+      }
     }
-  });
-  const attributes = canReorder ? sortable.attributes : draggable.attributes;
-  const listeners = canReorder ? sortable.listeners : draggable.listeners;
-  const isDragging = canReorder ? sortable.isDragging : draggable.isDragging;
-  const setRowNodeRef = canReorder ? sortable.setNodeRef : draggable.setNodeRef;
-  const transform = canReorder ? CSS.Transform.toString(sortable.transform) : undefined;
-  const firstCellIndent = indentDepth > 0 ? `calc(0.5rem + ${(indentDepth - 1) * GROUP_INDENT_PX + GROUP_ROW_INDENT_OFFSET_PX}px)` : undefined;
-  const rowAttributes = canReorder ? onRowClick ? { role: "button", tabIndex: 0 } : {} : onRowClick ? { ...attributes, role: "button", tabIndex: 0 } : attributes;
-  const visibleCells = row.getVisibleCells();
-  return /* @__PURE__ */ jsxs8(TableRow, {
-    className: cn("group/row h-16 focus-visible:outline-ring focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid", onRowClick && "cursor-pointer", isDragging && "opacity-50"),
-    "data-state": row.getIsSelected() && "selected",
-    onClick: () => {
-      if (onRowClick) {
-        onRowClick(row.original);
+    setOverlay({ label: drag.label, x: event.clientX, y: event.clientY });
+  };
+  const finish = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId)
+      return;
+    const root = event.currentTarget.closest("[data-table-root]");
+    const elements = document.elementsFromPoint(event.clientX, event.clientY);
+    const rowTarget = findTableDragTarget(elements, "[data-table-row]", root);
+    const groupTarget = findTableDragTarget(elements, "[data-table-group]", root);
+    setStore((current) => {
+      const targetRowId = rowTarget?.dataset.tableRow;
+      const targetGroupKey = groupTarget?.dataset.tableGroup;
+      const model = deriveModel(current);
+      const source = model.sortedRows.find((row) => row.id === drag.rowId);
+      const grouping = current.config.features.grouping;
+      const reordering = current.config.features.reordering;
+      if (drag.active && source && targetGroupKey && grouping) {
+        const target = parseGroupDropKey(targetGroupKey);
+        const field = grouping.fields.find(({ id }) => id === target?.fieldId);
+        if (target && field?.onMoveToGroup && field.getGroupId(source.data) !== target.groupId) {
+          field.onMoveToGroup(source.data, target.groupId);
+        }
+      } else if (drag.active && source && targetRowId && reordering && canReorderRows(current) && source.id !== targetRowId) {
+        reordering.onReorder(reorderDataTableRows(model.rows, source.id, targetRowId));
       }
-    },
+      return current;
+    });
+    reset(event.currentTarget);
+  };
+  const cancel = (event) => {
+    if (dragRef.current?.pointerId === event.pointerId) {
+      reset(event.currentTarget);
+    }
+  };
+  const reorderWithKeyboard = (direction) => {
+    const reordering = store.config.features.reordering;
+    if (!reordering || !canReorderRows(store))
+      return;
+    const model = deriveModel(store);
+    const visibleRows = model.pageRows;
+    const sourceIndex = visibleRows.findIndex((row) => row.id === rowId);
+    const target = visibleRows[sourceIndex + direction];
+    if (sourceIndex !== -1 && target) {
+      reordering.onReorder(reorderDataTableRows(model.rows, rowId, target.id));
+    }
+  };
+  return /* @__PURE__ */ jsxs9(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx17(Button, {
+        "aria-label": store.config.features.reordering && store.config.features.reordering.handleLabel ? store.config.features.reordering.handleLabel : store.config.labels.reorder,
+        className: "size-8 cursor-grab touch-none active:cursor-grabbing",
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            event.stopPropagation();
+            reorderWithKeyboard(event.key === "ArrowUp" ? -1 : 1);
+          }
+        },
+        onPointerCancel: cancel,
+        onPointerDown,
+        onLostPointerCapture: cancel,
+        onPointerMove,
+        onPointerUp: finish,
+        size: "icon",
+        variant: "ghost",
+        children: /* @__PURE__ */ jsx17(GripVertical, {})
+      }),
+      overlay ? createPortal(/* @__PURE__ */ jsx17("div", {
+        "aria-hidden": "true",
+        className: "bg-background pointer-events-none fixed z-[100] rounded-md border px-3 py-2 text-sm shadow-lg",
+        style: { left: overlay.x + 12, top: overlay.y + 12 },
+        children: overlay.label
+      }), document.body) : null
+    ]
+  });
+};
+var toggleRow = (store, setStore, rowId, selected) => changeState(setStore, (state) => {
+  const rowSelection = { ...state.rowSelection, [rowId]: selected };
+  const selection = store.config.features.selection;
+  if (selection) {
+    const model = deriveModel(store);
+    selection.onSelectionChange?.(model.rows.filter((row) => rowSelection[row.id]).map((row) => row.data));
+  }
+  return { ...state, rowSelection };
+});
+var TableDataRow = ({
+  tableAtom
+}) => {
+  const [store, setStore] = useTableAtom(tableAtom);
+  const rowId = useRequiredId(RowIdContext);
+  const model = deriveModel(store);
+  const row = model.sortedRows.find((candidate) => candidate.id === rowId);
+  if (!row)
+    return null;
+  const selection = store.config.features.selection;
+  const selectable = !!selection && (selection.isRowSelectable?.(row.data) ?? true);
+  const rowActions = store.config.features.rowActions;
+  const draggable = canDragRows(store);
+  return /* @__PURE__ */ jsxs9(TableRow, {
+    className: cn("group/row h-16 data-[drag-source=true]:opacity-40 data-[drop-position=before]:[&>td]:border-t-2 data-[drop-position=before]:[&>td]:border-primary data-[drop-position=after]:[&>td]:border-b-2 data-[drop-position=after]:[&>td]:border-primary", store.config.onRowClicked && "cursor-pointer"),
+    "data-state": store.state.rowSelection[row.id] && "selected",
+    "data-table-row": row.id,
+    onClick: () => store.config.onRowClicked?.(row.data),
     onKeyDown: (event) => {
-      if (!onRowClick || event.key !== "Enter" && event.key !== " ") {
-        return;
+      if (event.target === event.currentTarget && store.config.onRowClicked && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        store.config.onRowClicked(row.data);
       }
-      event.preventDefault();
-      onRowClick(row.original);
-    },
-    ref: setRowNodeRef,
-    style: {
-      transform,
-      transition: sortable.transition
     },
-    ...rowAttributes,
-    ...!canReorder ? listeners : {},
+    tabIndex: store.config.onRowClicked ? 0 : undefined,
     children: [
-      selectable ? /* @__PURE__ */ jsx17(TableCell, {
-        className: "w-10 min-w-10 cursor-default pr-0",
+      selection ? /* @__PURE__ */ jsx17(TableCell, {
+        className: "w-10 pr-0",
         onClick: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsx17(Checkbox, {
-          "aria-label": selectRowLabel,
-          checked: row.getIsSelected(),
-          disabled: !row.getCanSelect(),
-          onCheckedChange: (checked, eventDetails) => row.getToggleSelectedHandler()({
-            nativeEvent: eventDetails.event,
-            target: { checked }
-          }),
-          onClick: (event) => event.stopPropagation()
+          "aria-label": store.config.labels.selectRow,
+          checked: !!store.state.rowSelection[row.id],
+          disabled: !selectable,
+          onCheckedChange: (checked) => toggleRow(store, setStore, row.id, checked)
         })
       }) : null,
-      canReorder ? /* @__PURE__ */ jsx17(TableCell, {
-        className: "w-10 min-w-10 pr-0",
-        children: /* @__PURE__ */ jsx17(Button, {
-          "aria-label": reorderHandleLabel,
-          className: "size-8 cursor-grab active:cursor-grabbing",
-          onClick: (event) => event.stopPropagation(),
-          size: "icon",
-          type: "button",
-          variant: "ghost",
-          ...attributes,
-          ...listeners,
-          children: /* @__PURE__ */ jsx17(GripVertical, {})
+      draggable ? /* @__PURE__ */ jsx17(TableCell, {
+        className: "w-10 pr-0",
+        children: /* @__PURE__ */ jsx17(DragHandle, {
+          tableAtom
         })
       }) : null,
-      visibleCells.map((cell, index) => {
-        return /* @__PURE__ */ jsx17(table.AppCell, {
-          cell,
-          children: (appCell) => /* @__PURE__ */ jsx17(TableCell, {
-            className: cn("align-center min-w-32 overflow-hidden [&:has([data-slot=relationship-cell])]:relative [&:has([data-slot=relationship-cell])]:p-0 [&:has([data-slot=relationship-cell])>div]:absolute [&:has([data-slot=relationship-cell])>div]:inset-0", cell.column.columnDef.meta?.truncate ? "whitespace-nowrap" : "whitespace-normal"),
-            style: index === 0 && firstCellIndent ? {
-              paddingLeft: firstCellIndent,
-              width: cell.column.getSize()
-            } : { width: cell.column.getSize() },
-            children: /* @__PURE__ */ jsx17("div", {
-              className: cn("w-full max-w-full min-w-0 overflow-hidden break-words [&:has([data-slot=list-summary])]:line-clamp-none", cell.column.columnDef.meta?.truncate ? "truncate" : "line-clamp-3"),
-              children: /* @__PURE__ */ jsx17(appCell.FlexRender, {})
-            })
-          })
-        }, cell.id);
-      }),
+      model.visibleColumns.map((column) => /* @__PURE__ */ jsx17(TableCell, {
+        className: cn("min-w-24 overflow-hidden", column.colDef.truncate ? "whitespace-nowrap" : "whitespace-normal"),
+        style: { width: column.width },
+        children: /* @__PURE__ */ jsx17("div", {
+          className: cn("min-w-0", column.colDef.truncate && "truncate"),
+          children: renderCell(row, column)
+        })
+      }, column.id)),
       rowActions ? /* @__PURE__ */ jsx17(TableCell, {
         className: "bg-background group-data-[state=selected]/row:bg-muted sticky right-0 z-20 w-10 min-w-10 cursor-default p-0 transition-colors group-hover/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--background))]",
         onClick: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsx17("div", {
           className: "flex h-16 items-center justify-center",
           children: /* @__PURE__ */ jsx17(DataTableRowActions, {
-            actions: rowActions,
-            row: row.original,
-            title: rowActionsLabel
+            actions: rowActions.items,
+            row: row.data,
+            title: rowActions.label ?? store.config.labels.actions
           })
         })
       }) : null
     ]
-  }, row.id);
+  });
 };
-var DataTableGalleryCard = ({
-  canDrag,
-  dragLabel,
-  gallery,
-  onRowClick,
-  row,
-  rowActions,
-  rowActionsLabel,
-  selectRowLabel,
-  selectable,
-  table
+var GroupActions = ({
+  actions,
+  groupId,
+  title
 }) => {
-  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: getRowDragId(row.id),
-    disabled: !canDrag,
-    data: {
-      type: "row",
-      rowId: row.id,
-      label: dragLabel
-    }
-  });
-  const nameCell = gallery ? row.getVisibleCells().find((cell) => cell.column.id === gallery.name) : null;
-  const descriptionCell = gallery?.description ? row.getVisibleCells().find((cell) => cell.column.id === gallery.description) : null;
-  const tagCell = gallery?.tag ? row.getVisibleCells().find((cell) => cell.column.id === gallery.tag) : null;
-  if (gallery) {
-    const tagValue = gallery.tag ? row.getValue(gallery.tag) : null;
-    const tagLabel = tagValue === null || tagValue === undefined ? null : String(tagValue);
-    return /* @__PURE__ */ jsxs8(Card, {
-      className: cn("relative mx-auto w-full max-w-sm transition-colors", onRowClick && "cursor-pointer hover:bg-accent/20", isDragging && "opacity-50"),
-      "data-state": row.getIsSelected() && "selected",
-      onClick: () => {
-        if (onRowClick) {
-          onRowClick(row.original);
-        }
-      },
-      ref: setNodeRef,
-      ...attributes,
-      ...listeners,
-      children: [
-        selectable ? /* @__PURE__ */ jsx17("div", {
-          className: "absolute top-4 left-4 z-10",
-          onClick: (event) => event.stopPropagation(),
-          children: /* @__PURE__ */ jsx17(Checkbox, {
-            "aria-label": selectRowLabel,
-            checked: row.getIsSelected(),
-            disabled: !row.getCanSelect(),
-            onCheckedChange: (checked, eventDetails) => row.getToggleSelectedHandler()({
-              nativeEvent: eventDetails.event,
-              target: { checked }
-            })
-          })
-        }) : null,
-        rowActions ? /* @__PURE__ */ jsx17("div", {
-          className: "absolute top-4 right-4 z-10",
-          onClick: (event) => event.stopPropagation(),
-          children: /* @__PURE__ */ jsx17(DataTableRowActions, {
-            actions: rowActions,
-            row: row.original,
-            title: rowActionsLabel
-          })
-        }) : null,
-        /* @__PURE__ */ jsxs8(CardHeader, {
-          className: cn(rowActions && "pr-14", selectable && "pl-12"),
-          children: [
-            tagCell && tagLabel ? /* @__PURE__ */ jsxs8(Badge, {
-              variant: "secondary",
-              className: "mb-1 w-fit gap-1",
-              children: [
-                gallery.tagIcon,
-                tagLabel
-              ]
-            }) : null,
-            nameCell ? /* @__PURE__ */ jsx17(CardTitle, {
-              className: "min-w-0 text-base",
-              children: flexRender(nameCell.column.columnDef.cell, nameCell.getContext())
-            }) : null,
-            descriptionCell ? /* @__PURE__ */ jsx17(CardDescription, {
-              className: "line-clamp-2 min-w-0",
-              children: flexRender(descriptionCell.column.columnDef.cell, descriptionCell.getContext())
-            }) : null
-          ]
-        })
-      ]
-    });
-  }
-  const contentCells = row.getVisibleCells();
-  return /* @__PURE__ */ jsxs8(Card, {
-    className: cn("relative gap-3 transition-colors", onRowClick && "cursor-pointer hover:bg-accent/20", isDragging && "opacity-50"),
-    "data-state": row.getIsSelected() && "selected",
-    onClick: () => {
-      if (onRowClick) {
-        onRowClick(row.original);
-      }
-    },
-    ref: setNodeRef,
-    ...attributes,
-    ...listeners,
+  const visible = actions?.filter((action) => !action.visible || action.visible(groupId));
+  if (!visible?.length)
+    return null;
+  return /* @__PURE__ */ jsxs9(DropdownMenu, {
     children: [
-      selectable ? /* @__PURE__ */ jsx17("div", {
-        className: "absolute top-4 left-4 z-10",
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
         onClick: (event) => event.stopPropagation(),
-        children: /* @__PURE__ */ jsx17(Checkbox, {
-          "aria-label": selectRowLabel,
-          checked: row.getIsSelected(),
-          disabled: !row.getCanSelect(),
-          onCheckedChange: (checked, eventDetails) => row.getToggleSelectedHandler()({
-            nativeEvent: eventDetails.event,
-            target: { checked }
-          })
-        })
-      }) : null,
-      /* @__PURE__ */ jsxs8(CardHeader, {
-        children: [
-          rowActions ? /* @__PURE__ */ jsx17(CardAction, {
-            onClick: (event) => event.stopPropagation(),
-            children: /* @__PURE__ */ jsx17(DataTableRowActions, {
-              actions: rowActions,
-              row: row.original,
-              title: rowActionsLabel
-            })
-          }) : null,
-          contentCells.length > 0 && /* @__PURE__ */ jsxs8("div", {
-            className: "grid min-w-0 gap-3",
-            children: [
-              /* @__PURE__ */ jsx17(CardDescription, {
-                className: "text-muted-foreground text-xs font-medium tracking-wide uppercase",
-                children: getColumnDisplayName(table, contentCells[0].column.id)
-              }),
-              /* @__PURE__ */ jsx17(CardTitle, {
-                className: "text-base",
-                children: flexRender(contentCells[0].column.columnDef.cell, contentCells[0].getContext())
-              })
-            ]
-          })
-        ]
-      }),
-      contentCells.length > 1 && /* @__PURE__ */ jsx17(CardContent, {
-        className: "grid gap-3",
-        children: contentCells.slice(1).map((cell) => /* @__PURE__ */ jsxs8("div", {
-          className: "grid gap-1",
+        render: /* @__PURE__ */ jsxs9(Button, {
+          size: "icon",
+          variant: "ghost",
           children: [
-            /* @__PURE__ */ jsx17("div", {
-              className: "text-muted-foreground text-xs font-medium tracking-wide uppercase",
-              children: getColumnDisplayName(table, cell.column.id)
+            /* @__PURE__ */ jsx17("span", {
+              className: "sr-only",
+              children: title
             }),
-            /* @__PURE__ */ jsx17("div", {
-              className: "min-w-0 text-sm",
-              children: flexRender(cell.column.columnDef.cell, cell.getContext())
-            })
+            /* @__PURE__ */ jsx17(MoreHorizontal, {})
           ]
-        }, cell.id))
+        })
+      }),
+      /* @__PURE__ */ jsx17(DropdownMenuContent, {
+        align: "end",
+        children: /* @__PURE__ */ jsx17(DropdownMenuGroup, {
+          children: visible.map((action) => /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+            onClick: () => action.onClick(groupId),
+            variant: action.variant,
+            children: [
+              action.icon,
+              " ",
+              action.name
+            ]
+          }, action.name))
+        })
       })
     ]
   });
 };
-var extractTextFromElement = (element) => {
-  if (Schema2.is(Schema2.String)(element))
-    return element;
-  if (Schema2.is(Schema2.Number)(element))
-    return String(element);
-  if (!isValidElement(element)) {
-    return null;
-  }
-  const { props } = element;
-  if (Schema2.is(Schema2.String)(props.title))
-    return props.title;
-  return extractTextFromElement(props.children);
-};
-var getColumnLabels = (table) => new Map(table.getFlatHeaders().map((header) => [header.column.id, getHeaderName(header)]));
-var getHeaderName = (header) => {
-  const columnDef = header.column.columnDef;
-  if (columnDef.header instanceof Function) {
-    const headerContext = columnDef.header(header.getContext());
-    if (Schema2.is(Schema2.String)(headerContext)) {
-      return headerContext;
-    }
-    return extractTextFromElement(headerContext) ?? header.id;
-  }
-  return String(columnDef.header ?? header.id);
-};
-var getHeaderNames = (headers) => headers.map((header) => getHeaderName(header));
-var getColumnDisplayName = (table, columnId) => {
-  const header = table.getFlatHeaders().find((currentHeader) => currentHeader.column.id === columnId);
-  return header ? getHeaderName(header) : columnId;
-};
-var withFileExtension = (fileName, extension) => {
-  const normalizedExtension = extension.startsWith(".") ? extension : `.${extension}`;
-  return fileName.includes(".") ? fileName.replace(/\.[^/.]+$/, normalizedExtension) : `${fileName}${normalizedExtension}`;
-};
-var escapeCsvValue = (value) => {
-  if (value === null || value === undefined)
-    return "";
-  const stringValue = String(value);
-  if (stringValue.includes(",") || stringValue.includes('"') || stringValue.includes(`
-`)) {
-    return `"${stringValue.replace(/"/g, '""')}"`;
-  }
-  return stringValue;
-};
-var downloadCsv = (headers, data, fileName = "data.csv") => {
-  const csvContent = [headers, ...data].map((row) => row.map(escapeCsvValue).join(",")).join(`
-`);
-  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-  const link = document.createElement("a");
-  const url = window.URL.createObjectURL(blob);
-  link.href = url;
-  link.setAttribute("download", withFileExtension(fileName, "csv"));
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  requestAnimationFrame(() => window.URL.revokeObjectURL(url));
-};
-var downloadJson = (data, fileName = "data.json") => {
-  const jsonContent = JSON.stringify(data, null, 2);
-  const blob = new Blob([jsonContent], {
-    type: "application/json;charset=utf-8;"
+var GroupedTable = ({
+  tableAtom
+}) => {
+  const [store, setStore] = useTableAtom(tableAtom);
+  const model = deriveModel(store);
+  const sections = groupDataTableRows(model.sortedRows, getActiveGrouping(store));
+  const extra = (store.config.features.selection ? 1 : 0) + (store.config.features.rowActions ? 1 : 0) + (canDragRows(store) ? 1 : 0);
+  const renderSections = (items) => items.flatMap((section) => {
+    const collapsed = !!store.state.collapsedGroups[section.key];
+    const targetKey = getGroupDropKey(section.field.id, section.groupId);
+    const body = /* @__PURE__ */ jsxs9(TableBody, {
+      className: "data-[drop-target=true]:outline-primary relative data-[drop-target=true]:z-30 data-[drop-target=true]:outline-2 data-[drop-target=true]:-outline-offset-2 data-[drop-target=true]:[&>tr]:border-transparent data-[drop-target=true]:[&>tr>td:last-child]:z-0",
+      "data-table-group": section.field.onMoveToGroup ? targetKey : undefined,
+      children: [
+        /* @__PURE__ */ jsx17(TableRow, {
+          className: "bg-muted/40",
+          children: /* @__PURE__ */ jsx17(TableCell, {
+            colSpan: model.visibleColumns.length + extra,
+            children: /* @__PURE__ */ jsxs9("div", {
+              className: "flex items-center gap-2",
+              style: { paddingLeft: section.depth * 20 },
+              children: [
+                /* @__PURE__ */ jsxs9("button", {
+                  "aria-expanded": !collapsed,
+                  className: "flex flex-1 items-center gap-2 text-left",
+                  onClick: () => changeState(setStore, (state) => ({
+                    ...state,
+                    collapsedGroups: {
+                      ...state.collapsedGroups,
+                      [section.key]: !collapsed
+                    }
+                  })),
+                  type: "button",
+                  children: [
+                    collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
+                      className: "size-4"
+                    }) : /* @__PURE__ */ jsx17(ChevronDown, {
+                      className: "size-4"
+                    }),
+                    /* @__PURE__ */ jsx17("span", {
+                      className: "flex-1",
+                      children: section.field.renderGroupLabel?.(section.groupId, section.rows.map((row) => row.data)) ?? section.groupId
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx17(Badge, {
+                  variant: "secondary",
+                  children: section.rows.length
+                }),
+                /* @__PURE__ */ jsx17(GroupActions, {
+                  actions: section.field.actions,
+                  groupId: section.groupId,
+                  title: section.field.actionsLabel ?? store.config.labels.actions
+                })
+              ]
+            })
+          })
+        }),
+        !collapsed && !section.children.length ? section.rows.length ? section.rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
+          value: row.id,
+          children: /* @__PURE__ */ jsx17(TableDataRow, {
+            tableAtom
+          })
+        }, `${section.key}:${row.id}`)) : [
+          /* @__PURE__ */ jsx17(TableRow, {
+            children: /* @__PURE__ */ jsx17(TableCell, {
+              className: "text-muted-foreground h-16",
+              colSpan: model.visibleColumns.length + extra,
+              children: section.field.renderEmptyGroup?.(section.groupId) ?? store.config.labels.empty
+            })
+          }, `${section.key}:empty`)
+        ] : null
+      ]
+    }, section.key);
+    return !collapsed && section.children.length ? [body, renderSections(section.children)] : [body];
+  });
+  return /* @__PURE__ */ jsx17(Fragment, {
+    children: renderSections(sections)
   });
-  const link = document.createElement("a");
-  const url = window.URL.createObjectURL(blob);
-  link.href = url;
-  link.setAttribute("download", withFileExtension(fileName, "json"));
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  requestAnimationFrame(() => window.URL.revokeObjectURL(url));
-};
-var exportTableToCsv = (table, rows, fileName = "data.csv") => {
-  const exportableColumns = table.getVisibleLeafColumns();
-  const headerNames = exportableColumns.map((column) => getColumnDisplayName(table, column.id));
-  const data = rows.map((row) => exportableColumns.map((column) => {
-    const value = row.getValue(column.id);
-    return value === null || value === undefined ? "" : String(value);
-  }));
-  downloadCsv(headerNames, data, fileName);
-};
-var exportTableToJson = (table, rows, fileName = "data.json") => {
-  const exportableColumns = table.getVisibleLeafColumns();
-  const data = rows.map((row) => Object.fromEntries(exportableColumns.map((column) => [column.id, row.getValue(column.id)])));
-  downloadJson(data, fileName);
 };
-var DataTableToolbar = ({
-  activeGrouping,
-  bulkActions,
-  exportBaseName,
-  exportRows,
-  grouping,
-  labels: labels2,
-  onRefresh,
-  onToggleGrouping,
-  onViewChange,
-  selectedRows,
-  showColumnVisibility,
-  showExport,
-  showGallery,
-  showSearch,
-  showSorting,
-  table,
-  view
+var ColumnHeaderMenu = ({
+  tableAtom
 }) => {
-  const [refreshSpinCount, setRefreshSpinCount] = useState(0);
-  const [searchInput, setSearchInput] = useState(table.state.globalFilter);
-  const hasToolbar = Boolean(showSearch || grouping?.fields.length || showSorting || showGallery || showColumnVisibility || onRefresh || showExport || selectedRows.length > 0 && bulkActions?.items.length);
-  useEffect2(() => {
-    setSearchInput(table.state.globalFilter);
-  }, [table.state.globalFilter]);
-  if (!hasToolbar)
+  const [store, setStore] = useTableAtom(tableAtom);
+  const columnId = useRequiredId(ColumnIdContext);
+  const column = deriveModel(store).columns.find(({ id }) => id === columnId);
+  if (!column)
     return null;
-  return /* @__PURE__ */ jsx17("div", {
-    className: "flex flex-col gap-3 pb-4",
-    children: /* @__PURE__ */ jsxs8("div", {
-      className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between",
-      children: [
-        showSearch ? /* @__PURE__ */ jsxs8("div", {
-          className: "relative w-full min-w-0 flex-1 sm:min-w-sm",
+  const sortingEnabled = store.config.features.sorting !== false && column.colDef.sortable !== false;
+  const hidingEnabled = store.config.features.columnVisibility !== false && column.colDef.hideable !== false;
+  const sort = store.state.sorting.find(({ id }) => id === column.id);
+  const update = (next) => changeState(setStore, next);
+  const setSort = (desc) => update((state) => ({
+    ...state,
+    sorting: [{ id: column.id, desc }],
+    pagination: { ...state.pagination, pageIndex: 0 }
+  }));
+  const label = columnLabel(column);
+  if (!sortingEnabled && !hidingEnabled) {
+    return /* @__PURE__ */ jsx17("div", {
+      className: "truncate",
+      children: column.colDef.headerName
+    });
+  }
+  return /* @__PURE__ */ jsxs9(DropdownMenu, {
+    children: [
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
+        render: /* @__PURE__ */ jsxs9(Button, {
+          "aria-label": label,
+          className: "h-8 max-w-full justify-start px-2",
+          size: "sm",
+          variant: "ghost",
           children: [
-            /* @__PURE__ */ jsx17(Search, {
-              className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
-            }),
-            /* @__PURE__ */ jsx17(Input, {
-              className: "px-9",
-              onChange: (event) => {
-                setSearchInput(event.target.value);
-                table.setGlobalFilter(event.target.value);
-              },
-              placeholder: labels2.filter,
-              value: searchInput
+            /* @__PURE__ */ jsx17("span", {
+              className: "truncate",
+              children: column.colDef.headerName
             }),
-            searchInput ? /* @__PURE__ */ jsx17(Button, {
-              "aria-label": labels2.filter,
-              className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-1 size-7 -translate-y-1/2 active:!-translate-y-1/2",
-              onClick: () => {
-                setSearchInput("");
-                table.setGlobalFilter("");
-              },
-              size: "icon",
-              type: "button",
-              variant: "ghost",
-              children: /* @__PURE__ */ jsx17(X2, {
-                className: "size-4"
-              })
-            }) : null
+            sort ? sort.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : sortingEnabled ? /* @__PURE__ */ jsx17(ChevronsUpDown2, {}) : null
           ]
-        }) : /* @__PURE__ */ jsx17("div", {}),
-        /* @__PURE__ */ jsxs8("div", {
-          className: "-m-1 flex items-center gap-2 overflow-x-auto p-1",
+        })
+      }),
+      /* @__PURE__ */ jsx17(DropdownMenuContent, {
+        align: "start",
+        className: "w-48",
+        children: /* @__PURE__ */ jsxs9(DropdownMenuGroup, {
           children: [
-            bulkActions && selectedRows.length > 0 ? /* @__PURE__ */ jsx17(DataTableBulkActions, {
-              actions: bulkActions.items,
-              label: bulkActions.label ?? labels2.actions,
-              rows: selectedRows,
-              selectedLabel: labels2.selected
-            }) : null,
-            grouping?.fields.length ? /* @__PURE__ */ jsxs8(DropdownMenu, {
+            sortingEnabled ? /* @__PURE__ */ jsxs9(Fragment, {
               children: [
-                /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-                  render: /* @__PURE__ */ jsxs8(Button, {
-                    "aria-label": labels2.groupBy,
-                    className: "h-9",
-                    size: "sm",
-                    variant: "outline",
-                    children: [
-                      /* @__PURE__ */ jsx17(Rows3, {}),
-                      /* @__PURE__ */ jsx17("span", {
-                        className: "hidden sm:inline",
-                        children: labels2.groupBy
-                      })
-                    ]
-                  })
+                /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+                  onClick: () => setSort(false),
+                  children: [
+                    /* @__PURE__ */ jsx17(ArrowUp, {}),
+                    " ",
+                    store.config.labels.sortAsc
+                  ]
                 }),
-                /* @__PURE__ */ jsx17(DropdownMenuContent, {
-                  align: "end",
-                  className: "w-[200px]",
-                  children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
-                    children: [
-                      /* @__PURE__ */ jsx17(DropdownMenuLabel, {
-                        children: labels2.groupBy
-                      }),
-                      /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-                      grouping.fields.map((field) => /* @__PURE__ */ jsx17(DropdownMenuCheckboxItem, {
-                        checked: activeGrouping.includes(field.id),
-                        onCheckedChange: (value) => onToggleGrouping(field.id, !!value),
-                        children: field.label
-                      }, field.id))
-                    ]
-                  })
-                })
-              ]
-            }) : null,
-            showSorting ? /* @__PURE__ */ jsx17(DataTableSortDropdown, {
-              messages: labels2,
-              table
-            }) : null,
-            showGallery ? /* @__PURE__ */ jsx17(DataTableDisplayModeSwitch, {
-              messages: labels2,
-              onChange: onViewChange,
-              value: view
-            }) : null,
-            showColumnVisibility ? /* @__PURE__ */ jsx17(DataTableViewOptions, {
-              messages: labels2,
-              table
-            }) : null,
-            onRefresh ? /* @__PURE__ */ jsxs8(Button, {
-              "aria-label": labels2.refresh,
-              className: "h-9",
-              onClick: () => {
-                setRefreshSpinCount((count) => count + 1);
-                onRefresh();
-              },
-              size: "sm",
-              type: "button",
-              variant: "outline",
-              children: [
-                /* @__PURE__ */ jsx17(RefreshCw, {
-                  className: cn(refreshSpinCount > 0 && "animate-[spin_500ms_ease-in-out_1]")
-                }, refreshSpinCount),
-                /* @__PURE__ */ jsx17("span", {
-                  className: "hidden sm:inline",
-                  children: labels2.refresh
-                })
+                /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+                  onClick: () => setSort(true),
+                  children: [
+                    /* @__PURE__ */ jsx17(ArrowDown, {}),
+                    " ",
+                    store.config.labels.sortDesc
+                  ]
+                }),
+                sort ? /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+                  onClick: () => update((state) => ({
+                    ...state,
+                    sorting: state.sorting.filter(({ id }) => id !== column.id)
+                  })),
+                  children: [
+                    /* @__PURE__ */ jsx17(X2, {}),
+                    " ",
+                    store.config.labels.sortClear
+                  ]
+                }) : null
               ]
             }) : null,
-            showExport ? /* @__PURE__ */ jsxs8(DropdownMenu, {
+            sortingEnabled && hidingEnabled ? /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}) : null,
+            hidingEnabled ? /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+              onClick: () => update((state) => ({
+                ...state,
+                columnVisibility: {
+                  ...state.columnVisibility,
+                  [column.id]: false
+                }
+              })),
               children: [
-                /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-                  render: /* @__PURE__ */ jsxs8(Button, {
-                    "aria-label": labels2.export,
-                    className: "h-9",
-                    disabled: exportRows.length === 0,
-                    size: "sm",
-                    variant: "outline",
-                    children: [
-                      /* @__PURE__ */ jsx17(Download, {}),
-                      /* @__PURE__ */ jsx17("span", {
-                        className: "hidden sm:inline",
-                        children: labels2.export
-                      })
-                    ]
-                  })
-                }),
-                /* @__PURE__ */ jsx17(DropdownMenuContent, {
-                  align: "end",
-                  className: "w-[180px]",
-                  children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
-                    children: [
-                      /* @__PURE__ */ jsx17(DropdownMenuLabel, {
-                        children: labels2.export
-                      }),
-                      /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-                      /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-                        onClick: () => exportTableToCsv(table, exportRows, exportBaseName),
-                        children: [
-                          /* @__PURE__ */ jsx17(FileText, {}),
-                          labels2.exportCsv
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-                        onClick: () => exportTableToJson(table, exportRows, exportBaseName),
-                        children: [
-                          /* @__PURE__ */ jsx17(FileJson, {}),
-                          labels2.exportJson
-                        ]
-                      })
-                    ]
-                  })
-                })
+                /* @__PURE__ */ jsx17(EyeOff, {}),
+                " ",
+                store.config.labels.hideColumn
               ]
             }) : null
           ]
         })
-      ]
-    })
+      })
+    ]
   });
 };
-function DataTable({
-  columns,
-  data,
-  state,
-  search: controlledSearch,
-  onSearchChange,
-  searchState = "url",
-  emptyLabel,
-  messages: messages4,
-  exportFileName,
-  isLoading: legacyIsLoading,
-  onRefresh,
-  onRowClick,
-  from,
-  routeFrom,
-  grouping,
-  gallery,
-  rowActions: legacyRowActions,
-  reordering,
-  serverPagination,
-  features
-}) {
-  const labels2 = dataTableMessages(messages4);
-  const isLoading = state?.loading ?? legacyIsLoading ?? false;
-  const emptyContent = state?.error ?? state?.empty ?? emptyLabel ?? labels2.empty;
-  const paginationFeature = features?.pagination ?? (serverPagination ? { mode: "server", rowCount: serverPagination.rowCount } : { mode: "client" });
-  const exportFeature = features?.export ?? (exportFileName ? { baseName: exportFileName, scope: "currentPage" } : false);
-  const exportBaseName = exportFeature ? exportFeature.baseName : "table";
-  const galleryConfig = features?.gallery === false ? undefined : features?.gallery ?? gallery;
-  const rowActionsFeature = features?.rowActions === false ? undefined : features?.rowActions ?? (legacyRowActions?.length ? {
-    items: legacyRowActions.map((action) => ({
-      ...action,
-      id: action.id ?? action.name
-    }))
-  } : undefined);
-  const rowActions = rowActionsFeature?.items.length ? rowActionsFeature.items : undefined;
-  const rowActionsLabel = rowActionsFeature?.label ?? labels2.actions;
-  const showPagination = paginationFeature !== false;
-  const pageSizes = paginationFeature ? paginationFeature.pageSizes : undefined;
-  const showSearch = features?.search ?? true;
-  const showExport = exportFeature !== false;
-  const columnVisibilityFeature2 = features?.columnVisibility ?? true;
-  const showColumnVisibility = columnVisibilityFeature2 !== false;
-  const defaultColumnVisibility = Schema2.is(Schema2.Struct({ default: ColumnVisibilitySchema }))(columnVisibilityFeature2) ? columnVisibilityFeature2.default : undefined;
-  const showGallery = !!galleryConfig;
-  const showSorting = features?.sorting ?? true;
-  const selectionFeature = features?.selection === false ? undefined : features?.selection;
-  const selectable = !!selectionFeature;
-  const bulkActions = selectionFeature?.bulkActions === false ? undefined : selectionFeature?.bulkActions;
-  const isServerMode = paginationFeature !== false && paginationFeature.mode === "server";
-  const serverRowCount = isServerMode ? paginationFeature.rowCount : undefined;
-  const location = useRouterState({
-    select: (state2) => state2.location
-  });
-  const search = Option2.getOrUndefined(decodeTableSearch(location.search));
-  const pathname = location.pathname;
-  const resolvedRouteFrom = routeFrom ?? from;
-  const [storagePath] = useState(() => resolvedRouteFrom ?? pathname);
-  const navigate = useNavigate(resolvedRouteFrom ? { from: resolvedRouteFrom } : undefined);
-  const [localSearch, setLocalSearch] = useState({
-    globalFilter: ""
-  });
-  const tableSearch = controlledSearch ?? (searchState === "local" ? localSearch : search);
-  const {
-    page = 0,
-    pageSize = 10,
-    sort,
-    globalFilter = "",
-    grouping: urlGrouping
-  } = tableSearch ?? {};
-  const pagination = { pageIndex: page, pageSize };
-  const decodedSort = sort ? Schema2.decodeSync(SortParamsFromString)(sort) : [];
-  const sorting = decodedSort.map((sortParam) => ({
-    id: sortParam.id,
-    desc: sortParam.direction === "desc"
-  }));
-  const tableStorageId = useMemo(() => {
-    const columnIds = columns.map((column, index) => {
-      if ("id" in column && Schema2.is(Schema2.String)(column.id)) {
-        return column.id;
-      }
-      if ("accessorKey" in column && Schema2.is(Schema2.String)(column.accessorKey)) {
-        return column.accessorKey;
-      }
-      return String(index);
-    }).join(",");
-    return `${storagePath}:${columnIds}`;
-  }, [columns, storagePath]);
-  const columnVisibilityAtom = useMemo(() => Atom.kvs({
-    runtime: dataTableStorageRuntime,
-    key: `data-table:column-visibility:${tableStorageId}`,
-    schema: ColumnVisibilitySchema,
-    defaultValue: () => defaultColumnVisibility ?? {}
-  }), [defaultColumnVisibility, tableStorageId]);
-  const columnSizingAtom = useMemo(() => Atom.kvs({
-    runtime: dataTableStorageRuntime,
-    key: `data-table:column-sizing:${tableStorageId}`,
-    schema: ColumnSizingSchema,
-    defaultValue: () => ({})
-  }), [tableStorageId]);
-  const viewAtom = useMemo(() => Atom.kvs({
-    runtime: dataTableStorageRuntime,
-    key: `data-table:view:${tableStorageId}`,
-    schema: DataTableViewSchema,
-    defaultValue: () => "table"
-  }), [tableStorageId]);
-  const [columnVisibility, setColumnVisibility] = useAtom(columnVisibilityAtom);
-  const [columnSizing, setColumnSizing] = useAtom(columnSizingAtom);
-  const [storedView, setStoredView] = useAtom(viewAtom);
-  const currentView = showGallery ? storedView : "table";
-  const isGalleryView = currentView === "gallery";
-  const [rowSelection, setRowSelection] = useState({});
-  const [collapsedGroups, setCollapsedGroups] = useState({});
-  const [activeDragLabel, setActiveDragLabel] = useState(null);
-  const availableGroupFieldIds = grouping?.fields.map((field) => field.id) ?? [];
-  const activeGrouping = urlGrouping?.filter((groupId) => availableGroupFieldIds.includes(groupId)) ?? getDefaultGrouping(grouping);
-  const sensors = useSensors(useSensor(PointerSensor, {
-    activationConstraint: {
-      distance: 8
-    }
-  }));
-  const updateTableSearch = (updater, options) => {
-    if (controlledSearch || onSearchChange || searchState === "local") {
-      const nextSearch = Schema2.decodeUnknownSync(TableSearchSchema)(updater(controlledSearch ?? localSearch));
-      if (onSearchChange) {
-        onSearchChange(nextSearch);
-      } else {
-        setLocalSearch(nextSearch);
-      }
-      return;
-    }
-    navigate({
-      to: ".",
-      replace: options?.replace ?? false,
-      resetScroll: false,
-      search: (current) => validateTableSearchUpdate(updater(current))
-    });
-  };
-  const table = useDataTable({
-    key: tableStorageId,
-    data,
-    columns,
-    onColumnSizingChange: (updater) => {
-      const nextColumnSizing = updater instanceof Function ? updater(columnSizing) : updater;
-      setColumnSizing(nextColumnSizing);
-    },
-    ...selectionFeature ? { getRowId: selectionFeature.getRowId } : reordering ? { getRowId: reordering.getRowId } : {},
-    enableRowSelection: selectionFeature?.isRowSelectable ? (row) => selectionFeature.isRowSelectable?.(row.original) ?? true : selectable,
-    enableMultiRowSelection: selectable,
-    onPaginationChange: (updater) => {
-      const newPagination = updater instanceof Function ? updater(pagination) : updater;
-      if (pagination.pageIndex === newPagination.pageIndex && pagination.pageSize === newPagination.pageSize) {
-        return;
-      }
-      updateTableSearch((current) => ({
-        ...current,
-        page: newPagination.pageIndex,
-        pageSize: newPagination.pageSize
-      }));
-    },
-    onSortingChange: (updater) => {
-      const newSorting = updater instanceof Function ? updater([...sorting]) : updater;
-      if (sorting.length === newSorting.length && sorting.every((sortState, i) => sortState.id === newSorting[i]?.id && sortState.desc === newSorting[i]?.desc)) {
-        return;
-      }
-      const nextSort = newSorting.length ? Schema2.encodeSync(SortParamsFromString)(newSorting.map((sortState) => ({
-        id: sortState.id,
-        direction: sortState.desc ? "desc" : "asc"
-      }))) : undefined;
-      updateTableSearch((current) => ({
-        ...current,
-        sort: nextSort,
-        page: 0
-      }));
-    },
-    onGlobalFilterChange: (updater) => {
-      const newGlobalFilter = updater instanceof Function ? updater(globalFilter) : updater;
-      if (globalFilter === newGlobalFilter) {
-        return;
-      }
-      updateTableSearch((current) => ({
-        ...current,
-        page: 0,
-        globalFilter: newGlobalFilter
-      }), { replace: true });
-    },
-    manualSorting: isServerMode || undefined,
-    manualFiltering: isServerMode || undefined,
-    ...paginationFeature !== false && paginationFeature.mode === "server" ? { manualPagination: true, rowCount: paginationFeature.rowCount } : paginationFeature === false ? { manualPagination: true } : {},
-    autoResetPageIndex: false,
-    onColumnVisibilityChange: (updater) => {
-      const nextColumnVisibility = updater instanceof Function ? updater(columnVisibility) : updater;
-      setColumnVisibility(nextColumnVisibility);
-    },
-    onRowSelectionChange: (updater) => {
-      setRowSelection((current) => {
-        const next = updater instanceof Function ? updater(current) : updater;
-        selectionFeature?.onSelectionChange?.(data.filter((row) => next[selectionFeature.getRowId(row)]));
-        return next;
-      });
-    },
-    state: {
-      sorting,
-      pagination,
-      globalFilter,
-      columnVisibility,
-      columnSizing,
-      rowSelection
-    }
-  });
-  const activeGroupingFields = useMemo(() => activeGrouping.map((groupId) => grouping?.fields.find((field) => field.id === groupId)).filter((field) => !!field), [activeGrouping, grouping]);
-  const hasActiveGrouping = activeGroupingFields.length > 0;
-  const filteredRows = table.getPrePaginatedRowModel().rows;
-  const selectedRows = selectionFeature ? data.filter((row) => rowSelection[selectionFeature.getRowId(row)]) : [];
-  const exportRows = exportFeature && exportFeature.scope === "filteredRows" ? filteredRows : table.getRowModel().rows;
-  const bodyRows = hasActiveGrouping ? filteredRows : table.getRowModel().rows;
-  const sortableRowIds = bodyRows.map((row) => getSortableRowId(row.id));
-  const groupedSections = useMemo(() => buildGroupedSections(bodyRows, activeGroupingFields), [activeGroupingFields, bodyRows]);
-  const canReorderRows = Boolean(reordering) && !hasActiveGrouping;
-  const colSpan = Math.max(table.getVisibleLeafColumns().length, 1) + (rowActions ? 1 : 0) + (selectable ? 1 : 0) + (canReorderRows ? 1 : 0);
-  const canDragRows = activeGroupingFields.some((field) => !!field.onMoveToGroup);
-  const addGroupingField = (fieldId) => {
-    if (activeGrouping.includes(fieldId))
-      return;
-    updateTableSearch((current) => ({
-      ...current,
-      grouping: [...activeGrouping, fieldId]
-    }));
-  };
-  const removeGroupingField = (fieldId) => {
-    updateTableSearch((current) => ({
-      ...current,
-      grouping: activeGrouping.filter((currentId) => currentId !== fieldId)
-    }));
-  };
-  const toggleGroupingField = (fieldId, enabled) => {
-    if (enabled) {
-      addGroupingField(fieldId);
-      return;
-    }
-    removeGroupingField(fieldId);
-  };
-  const toggleGroup = (groupKey) => {
-    setCollapsedGroups((current) => ({
-      ...current,
-      [groupKey]: !current[groupKey]
-    }));
-  };
-  const setView = (nextView) => {
-    if (nextView === currentView) {
-      return;
-    }
-    setStoredView(nextView);
-  };
-  const renderLoadingState = () => /* @__PURE__ */ jsx17(Loading, {
-    label: labels2.loading
-  });
-  const renderEmptyContent = () => state?.error ?? (isLoading ? renderLoadingState() : emptyContent);
-  const renderTableEmptyState = () => /* @__PURE__ */ jsx17(TableRow, {
-    children: /* @__PURE__ */ jsx17(TableCell, {
-      className: "h-24 text-center",
-      colSpan,
-      children: renderEmptyContent()
-    })
-  });
-  const renderGalleryEmptyState = (message) => /* @__PURE__ */ jsx17("div", {
-    className: "text-muted-foreground rounded-xl border border-dashed px-4 py-10 text-center text-sm",
-    children: message ?? renderEmptyContent()
-  });
-  const renderGalleryRows = (rows, canDrag) => /* @__PURE__ */ jsx17("div", {
-    className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
-    children: rows.map((row) => /* @__PURE__ */ jsx17(DataTableGalleryCard, {
-      canDrag,
-      dragLabel: grouping?.getRowLabel?.(row.original),
-      gallery: galleryConfig,
-      onRowClick,
-      row,
-      rowActions,
-      rowActionsLabel,
-      selectRowLabel: labels2.selectRow,
-      selectable,
-      table
-    }, row.id))
-  });
-  const renderGroupedTableSections = (sections) => sections.flatMap((section) => {
-    const isCollapsed = collapsedGroups[section.key] ?? false;
-    const hasChildren = section.children.length > 0;
-    const sectionBody = /* @__PURE__ */ jsxs8(GroupTableSection, {
-      section,
+var DataTableHeader = ({
+  tableAtom
+}) => {
+  const [store, setStore] = useTableAtom(tableAtom);
+  const model = deriveModel(store);
+  const selection = store.config.features.selection;
+  const grouped = getActiveGrouping(store).length > 0;
+  const draggable = canDragRows(store);
+  const selectableRows = getDataTableSelectableRows(model, grouped, selection ? selection.isRowSelectable : undefined);
+  const allSelected = selectableRows.length > 0 && selectableRows.every((row) => store.state.rowSelection[row.id]);
+  const someSelected = selectableRows.some((row) => store.state.rowSelection[row.id]);
+  return /* @__PURE__ */ jsx17(TableHeader, {
+    children: /* @__PURE__ */ jsxs9(TableRow, {
       children: [
-        /* @__PURE__ */ jsx17(GroupHeaderRow, {
-          collapsed: isCollapsed,
-          colSpan,
-          onToggle: () => toggleGroup(section.key),
-          section
-        }),
-        !isCollapsed && !hasChildren && (section.rows.length > 0 ? section.rows.map((row) => /* @__PURE__ */ jsx17(DataTableRow, {
-          canDrag: canDragRows,
-          canReorder: false,
-          dragLabel: grouping?.getRowLabel?.(row.original),
-          indentDepth: section.depth + 1,
-          onRowClick,
-          row,
-          rowActions,
-          rowActionsLabel,
-          selectRowLabel: labels2.selectRow,
-          selectable,
-          table
-        }, row.id)) : /* @__PURE__ */ jsx17(TableRow, {
-          children: /* @__PURE__ */ jsx17(TableCell, {
-            className: "text-muted-foreground h-16",
-            colSpan,
-            style: {
-              paddingLeft: `calc(0.5rem + ${section.depth * GROUP_INDENT_PX + GROUP_ROW_INDENT_OFFSET_PX}px)`
-            },
-            children: isLoading ? renderLoadingState() : section.field.renderEmptyGroup?.(section.groupId) ?? labels2.empty
+        selection ? /* @__PURE__ */ jsx17(TableHead, {
+          className: "w-10 pr-0",
+          children: /* @__PURE__ */ jsx17(Checkbox, {
+            "aria-label": store.config.labels.selectAllRows,
+            checked: allSelected,
+            indeterminate: someSelected && !allSelected,
+            onCheckedChange: (checked) => {
+              changeState(setStore, (state) => {
+                const rowSelection = { ...state.rowSelection };
+                selectableRows.forEach((row) => rowSelection[row.id] = checked);
+                selection.onSelectionChange?.(model.rows.filter((row) => rowSelection[row.id]).map((row) => row.data));
+                return { ...state, rowSelection };
+              });
+            }
           })
-        }))
-      ]
-    }, section.key);
-    return !isCollapsed && hasChildren ? [sectionBody, renderGroupedTableSections(section.children)] : [sectionBody];
-  });
-  const renderGroupedGallerySections = (sections) => sections.map((section) => {
-    const isCollapsed = collapsedGroups[section.key] ?? false;
-    const hasChildren = section.children.length > 0;
-    return /* @__PURE__ */ jsxs8("div", {
-      className: "space-y-3",
-      children: [
-        /* @__PURE__ */ jsx17(GroupHeaderCard, {
-          collapsed: isCollapsed,
-          onToggle: () => toggleGroup(section.key),
-          section
-        }),
-        !isCollapsed && (hasChildren ? renderGroupedGallerySections(section.children) : section.rows.length > 0 ? renderGalleryRows(section.rows, canDragRows) : renderGalleryEmptyState(isLoading ? renderLoadingState() : section.field.renderEmptyGroup?.(section.groupId) ?? labels2.empty))
-      ]
-    }, section.key);
-  });
-  const handleDragEnd = ({ active, over }) => {
-    setActiveDragLabel(null);
-    if (!over)
-      return;
-    const reorderData = decodeRowReorderDragData(active.data.current);
-    if (Option2.isSome(reorderData) && reordering && canReorderRows) {
-      const sourceRowId = String(active.id).replace(/^sortable-row:/, "");
-      const targetRowId = String(over.id).replace(/^sortable-row:/, "");
-      const currentIndex = bodyRows.findIndex((row2) => row2.id === sourceRowId);
-      const nextIndex = bodyRows.findIndex((row2) => row2.id === targetRowId);
-      if (currentIndex !== -1 && nextIndex !== -1 && currentIndex !== nextIndex) {
-        reordering.onReorder(arrayMove(bodyRows.map((row2) => row2.original), currentIndex, nextIndex));
-      }
-      return;
-    }
-    const rowData = decodeRowDragData(active.data.current);
-    const groupData = decodeGroupDropData(over.data.current);
-    if (Option2.isNone(rowData) || Option2.isNone(groupData))
-      return;
-    const row = bodyRows.find(({ id }) => id === rowData.value.rowId)?.original;
-    const field = grouping?.fields.find((currentField) => currentField.id === groupData.value.fieldId);
-    const nextGroupId = groupData.value.groupId;
-    if (row && field?.onMoveToGroup && field.getGroupId(row) !== nextGroupId) {
-      field.onMoveToGroup(row, nextGroupId);
-    }
-  };
-  const handleDragStart = ({ active }) => {
-    const rowData = decodeRowDragData(active.data.current);
-    setActiveDragLabel(Option2.isSome(rowData) ? rowData.value.label ?? null : null);
-  };
-  return /* @__PURE__ */ jsxs8("div", {
-    className: "w-full max-w-full min-w-0 rounded-md",
-    children: [
-      /* @__PURE__ */ jsx17(DataTableToolbar, {
-        activeGrouping,
-        bulkActions,
-        exportBaseName,
-        exportRows,
-        grouping,
-        labels: labels2,
-        onRefresh,
-        onToggleGrouping: toggleGroupingField,
-        onViewChange: setView,
-        selectedRows,
-        showColumnVisibility,
-        showExport,
-        showGallery,
-        showSearch,
-        showSorting,
-        table,
-        view: currentView
-      }),
-      /* @__PURE__ */ jsx17(DndContext, {
-        onDragCancel: () => setActiveDragLabel(null),
-        onDragEnd: handleDragEnd,
-        onDragStart: handleDragStart,
-        sensors,
-        children: /* @__PURE__ */ jsxs8(table.AppTable, {
-          children: [
-            isGalleryView ? hasActiveGrouping ? groupedSections.length > 0 ? /* @__PURE__ */ jsx17("div", {
-              className: "space-y-4",
-              children: renderGroupedGallerySections(groupedSections)
-            }) : renderGalleryEmptyState() : bodyRows.length > 0 ? renderGalleryRows(bodyRows, false) : renderGalleryEmptyState() : /* @__PURE__ */ jsxs8(ScrollArea, {
-              className: "-m-1 max-w-full min-w-0",
+        }) : null,
+        draggable ? /* @__PURE__ */ jsx17(TableHead, {
+          className: "w-10"
+        }) : null,
+        model.visibleColumns.map((column) => {
+          return /* @__PURE__ */ jsx17(TableHead, {
+            className: "relative h-12",
+            style: { width: column.width },
+            children: /* @__PURE__ */ jsxs9(ColumnIdContext.Provider, {
+              value: column.id,
               children: [
-                /* @__PURE__ */ jsx17("div", {
-                  className: "max-w-full min-w-0 p-1",
-                  children: /* @__PURE__ */ jsxs8(Table, {
-                    className: "table-fixed",
-                    style: {
-                      width: `max(100%, ${table.getTotalSize() + (canReorderRows ? 40 : 0) + (selectable ? 40 : 0) + (rowActions ? 40 : 0)}px)`
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx17(TableHeader, {
-                        children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs8(TableRow, {
-                          className: "p-4",
-                          children: [
-                            selectable ? /* @__PURE__ */ jsx17(TableHead, {
-                              className: "w-10 min-w-10 pr-0",
-                              children: /* @__PURE__ */ jsx17(Checkbox, {
-                                "aria-label": labels2.selectAllRows,
-                                checked: table.getIsAllPageRowsSelected(),
-                                indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
-                                onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked)
-                              })
-                            }) : null,
-                            canReorderRows ? /* @__PURE__ */ jsx17(TableHead, {
-                              className: "w-10 min-w-10 p-0"
-                            }) : null,
-                            headerGroup.headers.map((header) => /* @__PURE__ */ jsx17(table.AppHeader, {
-                              header,
-                              children: (appHeader) => /* @__PURE__ */ jsxs8(TableHead, {
-                                className: "relative h-12 min-w-32 p-0",
-                                style: { width: header.getSize() },
-                                children: [
-                                  header.isPlaceholder ? null : /* @__PURE__ */ jsx17(appHeader.FlexRender, {}),
-                                  header.column.getCanResize() ? /* @__PURE__ */ jsx17("button", {
-                                    "aria-label": labels2.resizeColumn(getHeaderName(header)),
-                                    "aria-orientation": "vertical",
-                                    "aria-valuemax": header.column.columnDef.maxSize ?? DEFAULT_COLUMN_MAX_SIZE,
-                                    "aria-valuemin": header.column.columnDef.minSize ?? DEFAULT_COLUMN_MIN_SIZE,
-                                    "aria-valuenow": header.column.getSize(),
-                                    className: cn("hover:bg-primary/60 absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none bg-transparent p-0 select-none", header.column.getIsResizing() && "bg-primary"),
-                                    onKeyDown: (event) => {
-                                      const minSize = header.column.columnDef.minSize ?? DEFAULT_COLUMN_MIN_SIZE;
-                                      const maxSize = header.column.columnDef.maxSize ?? DEFAULT_COLUMN_MAX_SIZE;
-                                      const currentSize = header.column.getSize();
-                                      const nextSize = event.key === "ArrowLeft" ? currentSize - COLUMN_RESIZE_STEP : event.key === "ArrowRight" ? currentSize + COLUMN_RESIZE_STEP : event.key === "Home" ? minSize : event.key === "End" ? maxSize : undefined;
-                                      if (nextSize === undefined)
-                                        return;
-                                      event.preventDefault();
-                                      table.setColumnSizing((current) => ({
-                                        ...current,
-                                        [header.column.id]: Math.min(maxSize, Math.max(minSize, nextSize))
-                                      }));
-                                    },
-                                    role: "separator",
-                                    type: "button",
-                                    onDoubleClick: () => header.column.resetSize(),
-                                    onMouseDown: header.getResizeHandler(),
-                                    onTouchStart: header.getResizeHandler()
-                                  }) : null
-                                ]
-                              })
-                            }, header.id)),
-                            rowActions ? /* @__PURE__ */ jsx17(TableHead, {
-                              className: "w-10 min-w-10 p-0"
-                            }) : null
-                          ]
-                        }, headerGroup.id))
-                      }),
-                      hasActiveGrouping ? groupedSections.length > 0 ? renderGroupedTableSections(groupedSections) : /* @__PURE__ */ jsx17(TableBody, {
-                        className: "px-2",
-                        children: renderTableEmptyState()
-                      }) : /* @__PURE__ */ jsx17(TableBody, {
-                        className: "px-2",
-                        children: bodyRows.length > 0 ? canReorderRows ? /* @__PURE__ */ jsx17(SortableContext, {
-                          items: sortableRowIds,
-                          strategy: verticalListSortingStrategy,
-                          children: bodyRows.map((row) => /* @__PURE__ */ jsx17(DataTableRow, {
-                            canDrag: false,
-                            canReorder: true,
-                            dragLabel: reordering?.getRowLabel?.(row.original),
-                            onRowClick,
-                            reorderHandleLabel: reordering?.handleLabel ?? labels2.reorder,
-                            row,
-                            rowActions,
-                            rowActionsLabel,
-                            selectRowLabel: labels2.selectRow,
-                            selectable,
-                            table
-                          }, row.id))
-                        }) : bodyRows.map((row) => /* @__PURE__ */ jsx17(DataTableRow, {
-                          canDrag: false,
-                          canReorder: false,
-                          onRowClick,
-                          row,
-                          rowActions,
-                          rowActionsLabel,
-                          selectRowLabel: labels2.selectRow,
-                          selectable,
-                          table
-                        }, row.id)) : renderTableEmptyState()
-                      })
-                    ]
-                  })
+                /* @__PURE__ */ jsx17(ColumnHeaderMenu, {
+                  tableAtom
                 }),
-                /* @__PURE__ */ jsx17(ScrollBar, {
-                  orientation: "horizontal"
+                /* @__PURE__ */ jsx17(ResizeHandle, {
+                  tableAtom
                 })
               ]
-            }),
-            /* @__PURE__ */ jsx17(DragOverlay, {
-              modifiers: [snapDragOverlayVerticalCenterToCursor],
-              children: activeDragLabel ? /* @__PURE__ */ jsx17("div", {
-                className: "bg-background rounded-md border px-3 py-2 text-sm shadow-sm",
-                children: activeDragLabel
-              }) : null
             })
-          ]
-        })
-      }),
-      showPagination && !hasActiveGrouping && /* @__PURE__ */ jsx17("div", {
-        className: "p-2",
-        children: /* @__PURE__ */ jsx17(DataTablePagination, {
-          messages: labels2,
-          pageSizes,
-          rowCount: serverRowCount,
-          table
+          }, column.id);
+        }),
+        store.config.features.rowActions ? /* @__PURE__ */ jsx17(TableHead, {
+          className: "w-10"
+        }) : null
+      ]
+    })
+  });
+};
+var DataTableBody = ({
+  tableAtom
+}) => {
+  const [store] = useTableAtom(tableAtom);
+  const model = deriveModel(store);
+  const grouped = getActiveGrouping(store).length > 0;
+  const rows = grouped ? model.sortedRows : model.pageRows;
+  const colSpan = model.visibleColumns.length + (store.config.features.selection ? 1 : 0) + (store.config.features.rowActions ? 1 : 0) + (canDragRows(store) ? 1 : 0);
+  if (grouped && rows.length && !store.config.status.error) {
+    return /* @__PURE__ */ jsx17(GroupedTable, {
+      tableAtom
+    });
+  }
+  return /* @__PURE__ */ jsx17(TableBody, {
+    children: store.config.status.error || !rows.length && !store.config.status.loading ? /* @__PURE__ */ jsx17(TableRow, {
+      children: /* @__PURE__ */ jsx17(TableCell, {
+        className: "h-24 text-center",
+        colSpan: Math.max(colSpan, 1),
+        children: store.config.status.error ?? store.config.status.empty ?? store.config.labels.empty
+      })
+    }) : store.config.status.loading && !rows.length ? /* @__PURE__ */ jsx17(TableRow, {
+      children: /* @__PURE__ */ jsx17(TableCell, {
+        className: "h-24 text-center",
+        colSpan: Math.max(colSpan, 1),
+        children: /* @__PURE__ */ jsx17(Loading, {
+          label: store.config.labels.loading
         })
       })
-    ]
+    }) : rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
+      value: row.id,
+      children: /* @__PURE__ */ jsx17(TableDataRow, {
+        tableAtom
+      })
+    }, row.id))
   });
-}
-function DataTableDisplayModeSwitch({
-  messages: messages4,
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs8(DropdownMenu, {
-    children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-        render: /* @__PURE__ */ jsxs8(Button, {
-          "aria-label": messages4.view,
-          className: "h-9",
-          size: "sm",
-          variant: "outline",
+};
+var GalleryCard = ({
+  tableAtom
+}) => {
+  const [store, setStore] = useTableAtom(tableAtom);
+  const rowId = useRequiredId(RowIdContext);
+  const model = deriveModel(store);
+  const row = model.sortedRows.find((candidate) => candidate.id === rowId);
+  const gallery = store.config.features.gallery;
+  if (!row || !gallery)
+    return null;
+  const find = (id) => id ? model.visibleColumns.find((column) => column.id === id) : undefined;
+  const name = find(gallery.name);
+  const description = find(gallery.description);
+  const tag = find(gallery.tag);
+  const selection = store.config.features.selection;
+  const selectable = !!selection && (selection.isRowSelectable?.(row.data) ?? true);
+  const rowActions = store.config.features.rowActions;
+  const draggable = canDragRows(store);
+  return /* @__PURE__ */ jsx17(Card, {
+    className: cn("relative gap-3 data-[drag-source=true]:opacity-40 data-[drop-position=before]:border-t-2 data-[drop-position=before]:border-t-primary data-[drop-position=after]:border-b-2 data-[drop-position=after]:border-b-primary", store.config.onRowClicked && "cursor-pointer"),
+    "data-table-row": row.id,
+    onClick: () => store.config.onRowClicked?.(row.data),
+    onKeyDown: (event) => {
+      if (event.target === event.currentTarget && store.config.onRowClicked && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        store.config.onRowClicked(row.data);
+      }
+    },
+    tabIndex: store.config.onRowClicked ? 0 : undefined,
+    children: /* @__PURE__ */ jsxs9(CardHeader, {
+      className: "pr-12",
+      children: [
+        /* @__PURE__ */ jsxs9("div", {
+          className: "flex items-center gap-2",
           children: [
-            value === "gallery" ? /* @__PURE__ */ jsx17(LayoutGrid, {}) : /* @__PURE__ */ jsx17(Rows3, {}),
-            /* @__PURE__ */ jsx17("span", {
-              className: "hidden sm:inline",
-              children: messages4.view
-            })
+            selection ? /* @__PURE__ */ jsx17(Checkbox, {
+              "aria-label": store.config.labels.selectRow,
+              checked: !!store.state.rowSelection[row.id],
+              disabled: !selectable,
+              onCheckedChange: (checked) => toggleRow(store, setStore, row.id, checked),
+              onClick: (event) => event.stopPropagation()
+            }) : null,
+            draggable ? /* @__PURE__ */ jsx17(DragHandle, {
+              tableAtom
+            }) : null,
+            tag ? /* @__PURE__ */ jsxs9(Badge, {
+              variant: "secondary",
+              children: [
+                gallery.tagIcon,
+                renderCell(row, tag)
+              ]
+            }) : null
           ]
+        }),
+        /* @__PURE__ */ jsx17(CardTitle, {
+          children: name ? renderCell(row, name) : row.id
+        }),
+        description ? /* @__PURE__ */ jsx17("div", {
+          className: "text-muted-foreground line-clamp-3 text-sm",
+          children: renderCell(row, description)
+        }) : null,
+        rowActions ? /* @__PURE__ */ jsx17("div", {
+          className: "absolute top-4 right-4",
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsx17(DataTableRowActions, {
+            actions: rowActions.items,
+            row: row.data,
+            title: rowActions.label ?? store.config.labels.actions
+          })
+        }) : null
+      ]
+    })
+  });
+};
+var DataTableGallery = ({
+  tableAtom
+}) => {
+  const [store, setStore] = useTableAtom(tableAtom);
+  const model = deriveModel(store);
+  const fields = getActiveGrouping(store);
+  const rows = fields.length ? model.sortedRows : model.pageRows;
+  if (store.config.status.error) {
+    return /* @__PURE__ */ jsx17("div", {
+      className: "text-destructive rounded-lg border border-dashed p-10 text-center",
+      children: store.config.status.error
+    });
+  }
+  if (store.config.status.loading && !rows.length) {
+    return /* @__PURE__ */ jsx17("div", {
+      className: "rounded-lg border border-dashed p-10 text-center",
+      children: /* @__PURE__ */ jsx17(Loading, {
+        label: store.config.labels.loading
+      })
+    });
+  }
+  if (!rows.length) {
+    return /* @__PURE__ */ jsx17("div", {
+      className: "text-muted-foreground rounded-lg border border-dashed p-10 text-center",
+      children: store.config.status.empty ?? store.config.labels.empty
+    });
+  }
+  if (!fields.length) {
+    return /* @__PURE__ */ jsx17("div", {
+      className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
+      children: rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
+        value: row.id,
+        children: /* @__PURE__ */ jsx17(GalleryCard, {
+          tableAtom
         })
-      }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, {
-        align: "end",
-        className: "w-[160px]",
-        children: /* @__PURE__ */ jsxs8(DropdownMenuRadioGroup, {
-          value,
-          onValueChange: (nextValue) => {
-            const view = decodeDataTableView(nextValue);
-            if (Option2.isSome(view))
-              onChange(view.value);
-          },
+      }, row.id))
+    });
+  }
+  const renderSections = (sections) => sections.map((section) => {
+    const collapsed = !!store.state.collapsedGroups[section.key];
+    const targetKey = getGroupDropKey(section.field.id, section.groupId);
+    return /* @__PURE__ */ jsxs9("section", {
+      className: "data-[drop-target=true]:ring-primary space-y-3 rounded-lg transition-shadow data-[drop-target=true]:ring-2",
+      "data-table-group": section.field.onMoveToGroup ? targetKey : undefined,
+      children: [
+        /* @__PURE__ */ jsxs9("div", {
+          className: "flex items-center gap-2 rounded-lg border p-3",
           children: [
-            /* @__PURE__ */ jsxs8(DropdownMenuRadioItem, {
-              value: "table",
+            /* @__PURE__ */ jsxs9("button", {
+              "aria-expanded": !collapsed,
+              className: "flex flex-1 items-center gap-2 text-left",
+              onClick: () => changeState(setStore, (state) => ({
+                ...state,
+                collapsedGroups: {
+                  ...state.collapsedGroups,
+                  [section.key]: !collapsed
+                }
+              })),
+              type: "button",
               children: [
-                /* @__PURE__ */ jsx17(Rows3, {}),
-                messages4.tableView
+                collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
+                  className: "size-4"
+                }) : /* @__PURE__ */ jsx17(ChevronDown, {
+                  className: "size-4"
+                }),
+                /* @__PURE__ */ jsx17("span", {
+                  className: "flex-1",
+                  children: section.field.renderGroupLabel?.(section.groupId, section.rows.map((row) => row.data)) ?? section.groupId
+                }),
+                /* @__PURE__ */ jsx17(Badge, {
+                  variant: "secondary",
+                  children: section.rows.length
+                })
               ]
             }),
-            /* @__PURE__ */ jsxs8(DropdownMenuRadioItem, {
-              value: "gallery",
-              children: [
-                /* @__PURE__ */ jsx17(LayoutGrid, {}),
-                messages4.galleryView
-              ]
+            /* @__PURE__ */ jsx17(GroupActions, {
+              actions: section.field.actions,
+              groupId: section.groupId,
+              title: section.field.actionsLabel ?? store.config.labels.actions
             })
           ]
-        })
-      })
-    ]
+        }),
+        !collapsed ? section.children.length ? renderSections(section.children) : section.rows.length ? /* @__PURE__ */ jsx17("div", {
+          className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
+          children: section.rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
+            value: row.id,
+            children: /* @__PURE__ */ jsx17(GalleryCard, {
+              tableAtom
+            })
+          }, `${section.key}:${row.id}`))
+        }) : /* @__PURE__ */ jsx17("div", {
+          className: "text-muted-foreground rounded-lg border border-dashed p-8 text-center",
+          children: section.field.renderEmptyGroup?.(section.groupId) ?? store.config.labels.empty
+        }) : null
+      ]
+    }, section.key);
   });
-}
-function DataTableSortDropdown({
-  messages: messages4,
-  table
-}) {
-  const sorting = table.state.sorting;
-  const sortableColumns = table.getAllColumns().filter((column) => column.getCanSort());
-  const columnLabels = getColumnLabels(table);
-  if (sortableColumns.length === 0) {
+  return /* @__PURE__ */ jsx17("div", {
+    className: "space-y-4",
+    children: renderSections(groupDataTableRows(rows, fields))
+  });
+};
+var DataTablePagination = ({
+  tableAtom
+}) => {
+  const [store, setStore] = useTableAtom(tableAtom);
+  const model = deriveModel(store);
+  const pagination = store.config.features.pagination ?? { mode: "client" };
+  const clientGrouping = pagination !== false && pagination.mode === "client" && getActiveGrouping(store).length > 0;
+  const paginationVisible = pagination !== false && !clientGrouping;
+  const pageIndex = store.state.pagination.pageIndex;
+  const maxPageIndex = model.pageCount - 1;
+  useLayoutEffect(() => {
+    if (paginationVisible && pageIndex > maxPageIndex) {
+      changeState(setStore, (state) => ({
+        ...state,
+        pagination: { ...state.pagination, pageIndex: maxPageIndex }
+      }));
+    }
+  }, [maxPageIndex, pageIndex, paginationVisible, setStore]);
+  if (!paginationVisible)
     return null;
+  const selected = model.rows.filter((row) => store.state.rowSelection[row.id]).length;
+  const setPagination = (next) => changeState(setStore, (state) => ({ ...state, pagination: next }));
+  return /* @__PURE__ */ jsx17("div", {
+    className: "pt-4",
+    children: /* @__PURE__ */ jsx17(Pagination, {
+      messages: store.config.labels,
+      onPageChange: (pageIndex2) => setPagination({ ...store.state.pagination, pageIndex: pageIndex2 }),
+      onPageSizeChange: (pageSize) => setPagination({ pageIndex: 0, pageSize }),
+      page: Math.min(store.state.pagination.pageIndex, model.pageCount - 1),
+      pageCount: model.pageCount,
+      pageSize: store.state.pagination.pageSize,
+      pageSizes: pagination.pageSizes,
+      selectedRows: selected,
+      totalRows: model.totalRows
+    })
+  });
+};
+var DataTable = (props) => {
+  const validatedConfig = resolveConfig(props);
+  const atomRef = useRef2(null);
+  if (!atomRef.current) {
+    const initial = {
+      rowData: props.rowData,
+      columnDefs: props.columnDefs,
+      config: validatedConfig,
+      state: initialPublicState(props),
+      controlledState: props.state ?? {}
+    };
+    atomRef.current = Atom.make({
+      ...initial,
+      model: buildDataTableModel(initial)
+    });
   }
-  const activeSortColumn = sorting.length > 0 ? sorting[0] : null;
-  return /* @__PURE__ */ jsxs8(DropdownMenu, {
+  const tableAtom = atomRef.current;
+  const setStore = useAtomSet(tableAtom);
+  useLayoutEffect(() => {
+    setStore((store) => {
+      const features = props.features ?? {};
+      const selection = features.selection;
+      const config = {
+        getRowId: selection && selection.getRowId || props.getRowId || undefined,
+        onStateChange: props.onStateChange,
+        status: props.status ?? {},
+        features,
+        onRowClicked: props.onRowClicked,
+        labels: dataTableMessages(props.messages)
+      };
+      const state = mergeDataTableState(store.state, props.state);
+      const modelChanged = store.rowData !== props.rowData || store.columnDefs !== props.columnDefs || !sameDataTableState(store.state, state) || store.config.getRowId !== config.getRowId || store.config.features.pagination !== config.features.pagination;
+      const next = {
+        ...store,
+        rowData: props.rowData,
+        columnDefs: props.columnDefs,
+        config,
+        controlledState: props.state ?? {},
+        state
+      };
+      return modelChanged ? { ...next, model: buildDataTableModel(next) } : next;
+    });
+  }, [
+    props.columnDefs,
+    props.features,
+    props.getRowId,
+    props.messages,
+    props.onRowClicked,
+    props.onStateChange,
+    props.rowData,
+    props.state,
+    props.status,
+    setStore
+  ]);
+  return /* @__PURE__ */ jsxs9("div", {
+    className: "w-full max-w-full min-w-0 rounded-md",
+    "data-table-root": "",
     children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-        render: /* @__PURE__ */ jsxs8(Button, {
-          "aria-label": messages4.sortBy,
-          className: "h-9",
-          size: "sm",
-          variant: "outline",
-          children: [
-            activeSortColumn ? activeSortColumn.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {}),
-            /* @__PURE__ */ jsx17("span", {
-              className: "hidden sm:inline",
-              children: messages4.sortBy
-            })
-          ]
-        })
+      /* @__PURE__ */ jsx17(DataTableToolbar, {
+        tableAtom
       }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, {
-        align: "end",
-        className: "w-[200px]",
-        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
-          children: [
-            /* @__PURE__ */ jsx17(DropdownMenuLabel, {
-              children: messages4.sortBy
-            }),
-            /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-            sortableColumns.map((column) => {
-              const sortState = sorting.find((s) => s.id === column.id);
-              const label = columnLabels.get(column.id) ?? column.id;
-              return /* @__PURE__ */ jsxs8(DropdownMenuSub, {
-                children: [
-                  /* @__PURE__ */ jsxs8(DropdownMenuSubTrigger, {
-                    inset: !!sortState,
-                    children: [
-                      sortState ? /* @__PURE__ */ jsx17("span", {
-                        className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center",
-                        children: sortState.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {})
-                      }) : null,
-                      label
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs8(DropdownMenuSubContent, {
-                    children: [
-                      /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-                        onClick: () => column.toggleSorting(false),
-                        children: [
-                          /* @__PURE__ */ jsx17(ArrowUp, {}),
-                          messages4.sortAsc
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-                        onClick: () => column.toggleSorting(true),
-                        children: [
-                          /* @__PURE__ */ jsx17(ArrowDown, {}),
-                          messages4.sortDesc
-                        ]
-                      }),
-                      sortState && /* @__PURE__ */ jsxs8(Fragment, {
-                        children: [
-                          /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-                          /* @__PURE__ */ jsx17(DropdownMenuItem, {
-                            onClick: () => column.clearSorting(),
-                            children: messages4.sortClear
-                          })
-                        ]
-                      })
-                    ]
-                  })
-                ]
-              }, column.id);
-            })
-          ]
-        })
+      /* @__PURE__ */ jsx17(DataTableContent, {
+        tableAtom
+      }),
+      /* @__PURE__ */ jsx17(DataTablePagination, {
+        tableAtom
       })
     ]
   });
-}
-function DataTableViewOptions({
-  messages: messages4,
-  table
-}) {
-  const columnLabels = getColumnLabels(table);
-  const columns = table.getAllColumns().filter((column) => column.accessorFn !== undefined && column.getCanHide());
-  if (columns.length === 0) {
-    return null;
+};
+var DataTableContent = ({
+  tableAtom
+}) => {
+  const [store] = useTableAtom(tableAtom);
+  if (store.config.features.gallery && store.state.view === "gallery") {
+    return /* @__PURE__ */ jsx17(DataTableGallery, {
+      tableAtom
+    });
   }
-  return /* @__PURE__ */ jsxs8(DropdownMenu, {
+  const model = deriveModel(store);
+  const width = getDataTableWidth(model.visibleColumns, (store.config.features.selection ? 1 : 0) + (store.config.features.rowActions ? 1 : 0) + (canDragRows(store) ? 1 : 0));
+  return /* @__PURE__ */ jsxs9(ScrollArea, {
+    className: "max-w-full min-w-0",
     children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-        render: /* @__PURE__ */ jsxs8(Button, {
-          "aria-label": messages4.columns,
-          className: "h-9",
-          size: "sm",
-          variant: "outline",
-          children: [
-            /* @__PURE__ */ jsx17(Settings2, {}),
-            /* @__PURE__ */ jsx17("span", {
-              className: "hidden sm:inline",
-              children: messages4.columns
-            })
-          ]
-        })
+      /* @__PURE__ */ jsxs9(Table, {
+        className: "table-fixed",
+        style: { width: `max(100%, ${width}px)` },
+        children: [
+          /* @__PURE__ */ jsx17(DataTableHeader, {
+            tableAtom
+          }),
+          /* @__PURE__ */ jsx17(DataTableBody, {
+            tableAtom
+          })
+        ]
       }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, {
-        align: "end",
-        className: "w-[180px]",
-        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
-          children: [
-            /* @__PURE__ */ jsx17(DropdownMenuLabel, {
-              children: messages4.columns
-            }),
-            /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-            columns.map((column) => /* @__PURE__ */ jsx17(DropdownMenuCheckboxItem, {
-              checked: column.getIsVisible(),
-              className: "capitalize",
-              onCheckedChange: (value) => column.toggleVisibility(!!value),
-              children: columnLabels.get(column.id) ?? column.id
-            }, column.id))
-          ]
-        })
+      /* @__PURE__ */ jsx17(ScrollBar, {
+        orientation: "horizontal"
       })
     ]
   });
-}
-function DataTablePagination({
-  messages: messages4,
-  pageSizes = [10, 20, 30, 40, 50],
-  rowCount,
-  table
-}) {
-  const labels2 = dataTableMessages(messages4);
-  const selectedRows = table.getFilteredSelectedRowModel().rows.length;
-  const filteredRows = table.getFilteredRowModel().rows.length;
-  const totalRows = rowCount ?? filteredRows;
-  return /* @__PURE__ */ jsx17(Pagination, {
-    messages: {
-      pageSize: labels2.pageSize,
-      results: labels2.results,
-      selectedOf: labels2.selectedOf,
-      pageOf: labels2.pageOf,
-      goToFirstPage: labels2.goToFirstPage,
-      goToPreviousPage: labels2.goToPreviousPage,
-      goToNextPage: labels2.goToNextPage,
-      goToLastPage: labels2.goToLastPage
-    },
-    onPageChange: (page) => table.setPageIndex(page),
-    onPageSizeChange: (pageSize) => table.setPageSize(pageSize),
-    page: table.state.pagination.pageIndex,
-    pageCount: table.getPageCount(),
-    pageSize: table.state.pagination.pageSize,
-    pageSizes,
-    selectedRows,
-    totalRows
-  });
-}
-function DataTableRelationshipCell({
+};
+var DataTableRelationshipCell = ({
   emptyLabel,
   manageLabel,
   onAdd,
   onRemove,
   options,
   value
-}) {
-  const [selectedOptions, setSelectedOptions] = useState(() => [...value]);
-  const selectedValues = new Set(selectedOptions.map(({ value: value2 }) => value2));
-  const orderedOptions = [...options].sort((a, b) => Number(selectedValues.has(b.value)) - Number(selectedValues.has(a.value)));
-  useEffect2(() => {
-    setSelectedOptions([...value]);
-  }, [value]);
+}) => {
+  const [selected, setSelected] = useState([...value]);
+  useLayoutEffect(() => setSelected([...value]), [value]);
+  const selectedValues = new Set(selected.map((item) => item.value));
   return /* @__PURE__ */ jsx17(VirtualizedCombobox, {
     ariaLabel: manageLabel,
     emptyLabel,
-    items: orderedOptions,
+    items: [...options].sort((left, right) => Number(selectedValues.has(right.value)) - Number(selectedValues.has(left.value))),
     messages: { search: manageLabel },
     multiple: true,
-    onValueChange: (nextOptions) => {
-      const nextValues = new Set(nextOptions.map(({ value: value2 }) => value2));
-      for (const option of selectedOptions) {
-        if (!nextValues.has(option.value))
-          onRemove?.(option.value);
-      }
-      for (const option of nextOptions) {
-        if (!selectedValues.has(option.value))
-          onAdd?.(option.value);
-      }
-      setSelectedOptions(nextOptions);
+    onValueChange: (next) => {
+      const nextValues = new Set(next.map((item) => item.value));
+      selected.forEach((item) => !nextValues.has(item.value) && onRemove?.(item.value));
+      next.forEach((item) => !selectedValues.has(item.value) && onAdd?.(item.value));
+      setSelected(next);
     },
     placeholder: emptyLabel,
-    trigger: /* @__PURE__ */ jsxs8(Button, {
-      "aria-label": manageLabel,
-      className: "h-full min-h-16 w-full min-w-0 justify-between gap-2 overflow-hidden rounded-none px-2 py-2 text-left font-normal",
-      "data-slot": "relationship-cell",
-      type: "button",
+    trigger: /* @__PURE__ */ jsxs9(Button, {
+      className: "h-full min-h-16 w-full justify-between rounded-none",
       variant: "ghost",
       children: [
         /* @__PURE__ */ jsx17(DataTableListSummary, {
           emptyLabel,
           expandable: false,
-          items: selectedOptions,
-          variant: selectedOptions.some(({ icon }) => icon) ? "icon" : "text"
+          items: selected,
+          variant: selected.some((item) => item.icon) ? "icon" : "text"
         }),
-        /* @__PURE__ */ jsx17(ChevronDown, {
-          className: "text-muted-foreground size-4 shrink-0"
-        })
+        /* @__PURE__ */ jsx17(ChevronDown, {})
       ]
     }),
-    value: selectedOptions
+    value: selected
   });
-}
-function DataTableListSummary({
+};
+var DataTableListSummary = ({
   emptyLabel,
   expandable = true,
   items,
@@ -3699,52 +3501,38 @@ function DataTableListSummary({
   totalCount = items.length,
   variant = "text",
   visibleCount = 3
-}) {
+}) => {
   const labels2 = dataTableMessages();
-  const normalizedItems = items.map((item) => Schema2.is(Schema2.String)(item) ? { label: item } : item);
-  const visibleItems = normalizedItems.slice(0, visibleCount);
-  const visibleLabels = visibleItems.map(({ label }) => label).join(", ");
-  const remaining = Math.max(totalCount - visibleItems.length, 0);
-  const remainingLabel = overflowLabel?.(remaining) ?? labels2.listOthers(remaining);
-  const expandedItems = /* @__PURE__ */ jsx17(PopoverContent, {
-    align: "start",
-    className: "max-h-72 w-72 overflow-y-auto p-2",
-    onClick: (event) => event.stopPropagation(),
-    children: /* @__PURE__ */ jsx17("ul", {
-      className: "grid gap-1",
-      children: normalizedItems.map((item, index) => /* @__PURE__ */ jsxs8("li", {
-        className: "flex items-center gap-2 rounded-sm px-2 py-1.5 break-words",
-        children: [
-          item.icon ? /* @__PURE__ */ jsx17("span", {
-            className: "bg-muted flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-[9px] font-semibold",
-            children: item.icon
-          }) : null,
-          /* @__PURE__ */ jsx17("span", {
-            className: "min-w-0",
-            children: item.label
-          })
-        ]
-      }, item.value ?? `${item.label}-${index}`))
-    })
-  });
-  if (normalizedItems.length === 0) {
+  const normalized = items.map((item) => Schema.is(Schema.String)(item) ? { label: item } : item);
+  if (!normalized.length)
     return /* @__PURE__ */ jsx17("span", {
-      className: "text-muted-foreground text-sm",
+      className: "text-muted-foreground",
       children: emptyLabel
     });
-  }
+  const visible = normalized.slice(0, visibleCount);
+  const remaining = Math.max(totalCount - visible.length, 0);
+  const details = /* @__PURE__ */ jsx17(PopoverContent, {
+    align: "start",
+    className: "max-h-72 w-72 overflow-y-auto p-2",
+    children: normalized.map((item, index) => /* @__PURE__ */ jsxs9("div", {
+      className: "flex items-center gap-2 p-2",
+      children: [
+        item.icon,
+        item.label
+      ]
+    }, item.value ?? `${item.label}-${index}`))
+  });
   if (variant === "icon") {
     return /* @__PURE__ */ jsx17(TooltipProvider, {
-      children: /* @__PURE__ */ jsxs8("span", {
-        className: "flex min-w-0 items-center pl-2",
+      children: /* @__PURE__ */ jsxs9("span", {
+        className: "flex items-center",
         children: [
-          visibleItems.map((item, index) => /* @__PURE__ */ jsxs8(Tooltip, {
+          visible.map((item) => /* @__PURE__ */ jsxs9(Tooltip, {
             children: [
               /* @__PURE__ */ jsx17(TooltipTrigger, {
                 render: /* @__PURE__ */ jsx17("span", {
                   "aria-label": item.label,
-                  className: "bg-muted border-background relative flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 text-[10px] font-semibold",
-                  style: { marginLeft: index ? -8 : 0 },
+                  className: "bg-muted -ml-1 flex size-8 items-center justify-center rounded-full",
                   children: item.icon ?? item.label.slice(0, 2).toUpperCase()
                 })
               }),
@@ -3753,14 +3541,12 @@ function DataTableListSummary({
               })
             ]
           }, item.value ?? item.label)),
-          remaining ? expandable ? /* @__PURE__ */ jsxs8(Popover, {
+          remaining && expandable ? /* @__PURE__ */ jsxs9(Popover, {
             children: [
               /* @__PURE__ */ jsx17(PopoverTrigger, {
-                render: /* @__PURE__ */ jsxs8("button", {
+                render: /* @__PURE__ */ jsxs9("button", {
                   "aria-label": labels2.listOthers(remaining),
-                  className: "bg-muted border-background relative -ml-2 flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-[10px] font-semibold tabular-nums",
-                  onClick: (event) => event.stopPropagation(),
-                  onPointerDown: (event) => event.stopPropagation(),
+                  className: "bg-muted -ml-1 flex size-8 items-center justify-center rounded-full",
                   type: "button",
                   children: [
                     "+",
@@ -3768,10 +3554,10 @@ function DataTableListSummary({
                   ]
                 })
               }),
-              expandedItems
+              details
             ]
-          }) : /* @__PURE__ */ jsxs8("span", {
-            className: "bg-muted border-background relative -ml-2 flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-[10px] font-semibold tabular-nums",
+          }) : remaining ? /* @__PURE__ */ jsxs9("span", {
+            className: "bg-muted -ml-1 flex size-8 items-center justify-center rounded-full",
             children: [
               "+",
               remaining
@@ -3781,135 +3567,44 @@ function DataTableListSummary({
       })
     });
   }
-  return remaining > 0 ? /* @__PURE__ */ jsxs8("span", {
-    className: "block min-w-0 text-sm whitespace-normal",
-    "data-slot": "list-summary",
+  const summary = /* @__PURE__ */ jsxs9(Fragment, {
     children: [
-      /* @__PURE__ */ jsx17("span", {
-        children: visibleLabels
-      }),
-      " ",
-      /* @__PURE__ */ jsx17("span", {
-        className: "inline-block whitespace-nowrap",
-        children: expandable ? /* @__PURE__ */ jsxs8(Popover, {
-          children: [
-            /* @__PURE__ */ jsx17(PopoverTrigger, {
-              render: /* @__PURE__ */ jsx17("button", {
-                className: "text-muted-foreground hover:text-foreground underline decoration-dotted underline-offset-2",
-                onClick: (event) => event.stopPropagation(),
-                onPointerDown: (event) => event.stopPropagation(),
-                type: "button",
-                children: remainingLabel
-              })
-            }),
-            expandedItems
-          ]
-        }) : remainingLabel
-      })
+      visible.map((item) => item.label).join(", "),
+      remaining ? ` ${overflowLabel?.(remaining) ?? labels2.listOthers(remaining)}` : ""
     ]
-  }) : /* @__PURE__ */ jsx17("span", {
-    className: "block min-w-0 text-sm",
-    "data-slot": "list-summary",
-    children: visibleLabels
   });
-}
-function DataTableColumnHeader({
-  column,
-  messages: messages4,
-  title,
-  className
-}) {
-  const labels2 = dataTableMessages(messages4);
-  const sortDirection = column.getIsSorted();
-  if (!column.getCanSort()) {
-    return /* @__PURE__ */ jsx17("div", {
-      className: cn("flex h-12 items-center truncate px-2 text-sm", className),
-      children: title
-    });
-  }
-  return /* @__PURE__ */ jsx17("div", {
-    className: cn("flex h-12 items-center", className),
-    children: /* @__PURE__ */ jsxs8(DropdownMenu, {
-      children: [
-        /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-          render: /* @__PURE__ */ jsxs8(Button, {
-            variant: "ghost",
-            size: "sm",
-            className: "data-[state=open]:bg-accent h-8 max-w-full justify-start px-2",
-            children: [
-              /* @__PURE__ */ jsx17("span", {
-                className: "min-w-0 truncate text-sm",
-                children: title
-              }),
-              sortDirection === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : sortDirection === "asc" ? /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {})
-            ]
-          })
-        }),
-        /* @__PURE__ */ jsx17(DropdownMenuContent, {
-          align: "start",
-          className: "max-w-56",
-          children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
-            children: [
-              /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-                onClick: () => column.toggleSorting(false),
-                children: [
-                  /* @__PURE__ */ jsx17(ArrowUp, {
-                    className: "text-muted-foreground/70 h-3.5 w-3.5"
-                  }),
-                  labels2.sortAsc
-                ]
-              }),
-              /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-                onClick: () => column.toggleSorting(true),
-                children: [
-                  /* @__PURE__ */ jsx17(ArrowDown, {
-                    className: "text-muted-foreground/70 h-3.5 w-3.5"
-                  }),
-                  labels2.sortDesc
-                ]
-              }),
-              sortDirection ? /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-                onClick: () => column.clearSorting(),
-                children: [
-                  /* @__PURE__ */ jsx17(X2, {
-                    className: "text-muted-foreground/70 h-3.5 w-3.5"
-                  }),
-                  labels2.sortClear
-                ]
-              }) : null,
-              /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs8(DropdownMenuItem, {
-                onClick: () => column.toggleVisibility(false),
-                children: [
-                  /* @__PURE__ */ jsx17(EyeOff, {
-                    className: "text-muted-foreground/70 h-3.5 w-3.5"
-                  }),
-                  labels2.sortHide
-                ]
-              })
-            ]
-          })
+  return remaining && expandable ? /* @__PURE__ */ jsxs9(Popover, {
+    children: [
+      /* @__PURE__ */ jsx17(PopoverTrigger, {
+        render: /* @__PURE__ */ jsx17("button", {
+          className: "text-left text-sm",
+          type: "button",
+          children: summary
         })
-      ]
-    })
+      }),
+      details
+    ]
+  }) : /* @__PURE__ */ jsx17("span", {
+    className: "text-sm",
+    children: summary
   });
-}
+};
 export {
-  useDataTableHeaderContext,
-  useDataTableContext,
-  useDataTableCellContext,
-  useDataTable,
-  getHeaderNames,
-  downloadJson,
-  downloadCsv,
-  dataTableMessages,
-  createDataTableColumnHelper,
-  TableSearchSchemaStandard,
-  TableSearchSchema,
-  DataTableRowActions,
-  DataTableRelationshipCell,
-  DataTablePagination,
+  DataTable,
   DataTableListSummary,
-  DataTableColumnHeader,
-  DataTable
+  DataTableRelationshipCell,
+  DataTableRowActions,
+  buildDataTableRows,
+  dataTableMessages,
+  downloadCsv,
+  downloadJson,
+  filterDataTableRows,
+  getDataTableSelectableRows,
+  getDataTableWidth,
+  groupDataTableRows,
+  mergeDataTableState,
+  normalizeDataTableColumns,
+  paginateDataTableRows,
+  reorderDataTableRows,
+  sortDataTableRows
 };