@krak-stack/registry 0.1.29 → 0.1.30

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

@@ -1,14 +1,14 @@
 // ../../src/components/ui/data-table.tsx
 import { useAtom, useAtomSet } from "@effect/atom-react";
 import { BrowserKeyValueStore } from "@effect/platform-browser";
-import { Schema } from "effect";
+import { DateTime, Option, Schema } from "effect";
 import { AsyncResult, Atom } from "effect/unstable/reactivity";
 import {
   ArrowDown,
   ArrowUp,
   ChevronDown,
   ChevronRight as ChevronRight2,
-  ChevronsUpDown as ChevronsUpDown2,
+  ChevronsUpDown,
   Download,
   EyeOff,
   FileJson,
@@ -16,20 +16,22 @@ import {
   GripVertical,
   LayoutGrid,
   MoreHorizontal,
+  Plus,
   RefreshCw,
   Rows3,
   Search,
   Settings2,
-  X as X2
+  Trash2,
+  X
 } from "lucide-react";
 import {
   createContext,
   isValidElement,
-  useCallback as useCallback2,
+  useCallback,
   useContext,
   useLayoutEffect,
   useMemo,
-  useRef as useRef2,
+  useRef,
   useState
 } from "react";
 import { createPortal } from "react-dom";
@@ -1254,48 +1256,9 @@ function Pagination({
   });
 }
 
-// ../../src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx11(PopoverPrimitive.Root, {
-    "data-slot": "popover",
-    ...props
-  });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx11(PopoverPrimitive.Trigger, {
-    "data-slot": "popover-trigger",
-    ...props
-  });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx11(PopoverPrimitive.Positioner, {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      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
-      })
-    })
-  });
-}
-
 // ../../src/components/ui/scroll-area.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
@@ -1306,13 +1269,13 @@ function ScrollArea({
     className: cn("relative", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx12(ScrollAreaPrimitive.Viewport, {
+      /* @__PURE__ */ jsx11(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__ */ jsx12(ScrollBar, {}),
-      /* @__PURE__ */ jsx12(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx11(ScrollBar, {}),
+      /* @__PURE__ */ jsx11(ScrollAreaPrimitive.Corner, {})
     ]
   });
 }
@@ -1321,13 +1284,13 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(ScrollAreaPrimitive.Scrollbar, {
+  return /* @__PURE__ */ jsx11(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__ */ jsx12(ScrollAreaPrimitive.Thumb, {
+    children: /* @__PURE__ */ jsx11(ScrollAreaPrimitive.Thumb, {
       "data-slot": "scroll-area-thumb",
       className: "bg-border relative flex-1 rounded-full"
     })
@@ -1335,12 +1298,12 @@ function ScrollBar({
 }
 
 // ../../src/components/ui/table.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx12("div", {
     "data-slot": "table-container",
     className: "relative w-full overflow-x-auto",
-    children: /* @__PURE__ */ jsx13("table", {
+    children: /* @__PURE__ */ jsx12("table", {
       "data-slot": "table",
       className: cn("w-full caption-bottom text-sm", className),
       ...props
@@ -1348,35 +1311,35 @@ function Table({ className, ...props }) {
   });
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx13("thead", {
+  return /* @__PURE__ */ jsx12("thead", {
     "data-slot": "table-header",
     className: cn("[&_tr]:border-b", className),
     ...props
   });
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx13("tbody", {
+  return /* @__PURE__ */ jsx12("tbody", {
     "data-slot": "table-body",
     className: cn("[&_tr:last-child]:border-0", className),
     ...props
   });
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx13("tr", {
+  return /* @__PURE__ */ jsx12("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__ */ jsx13("th", {
+  return /* @__PURE__ */ jsx12("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__ */ jsx13("td", {
+  return /* @__PURE__ */ jsx12("td", {
     "data-slot": "table-cell",
     className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
     ...props
@@ -1385,26 +1348,26 @@ function TableCell({ className, ...props }) {
 
 // ../../src/components/ui/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 "use client";
 function TooltipProvider({
   delay = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Provider, {
+  return /* @__PURE__ */ jsx13(TooltipPrimitive.Provider, {
     "data-slot": "tooltip-provider",
     delay,
     ...props
   });
 }
 function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Root, {
+  return /* @__PURE__ */ jsx13(TooltipPrimitive.Root, {
     "data-slot": "tooltip",
     ...props
   });
 }
 function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx13(TooltipPrimitive.Trigger, {
     "data-slot": "tooltip-trigger",
     ...props
   });
@@ -1418,8 +1381,8 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx14(TooltipPrimitive.Positioner, {
+  return /* @__PURE__ */ jsx13(TooltipPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx13(TooltipPrimitive.Positioner, {
       align,
       alignOffset,
       side,
@@ -1431,7 +1394,7 @@ function TooltipContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsx14(TooltipPrimitive.Arrow, {
+          /* @__PURE__ */ jsx13(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"
           })
         ]
@@ -1440,381 +1403,19 @@ function TooltipContent({
   });
 }
 
-// ../../src/components/ui/virtualized-combobox.tsx
-import { Combobox as ComboboxPrimitive } from "@base-ui/react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { Check, ChevronsUpDown, X } from "lucide-react";
-import {
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef
-} from "react";
-
-// ../../src/components/ui/input-group.tsx
-import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx15 } from "react/jsx-runtime";
-function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx15("div", {
-    "data-slot": "input-group",
-    role: "group",
-    className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
-    ...props
-  });
-}
-var inputGroupAddonVariants = cva3("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
-  variants: {
-    align: {
-      "inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
-      "inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
-      "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-      "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
-    }
-  },
-  defaultVariants: { align: "inline-start" }
-});
-var inputGroupButtonVariants = cva3("flex items-center gap-2 text-sm shadow-none", {
-  variants: {
-    size: {
-      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-      sm: "",
-      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
-    }
-  },
-  defaultVariants: { size: "xs" }
-});
-function InputGroupInput({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx15(Input, {
-    "data-slot": "input-group-control",
-    className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className),
-    ...props
-  });
-}
-
-// ../../src/components/ui/virtualized-combobox.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-"use client";
-var messages2 = {
-  en: {
-    clear: "Clear selection",
-    search: "Search...",
-    selected: (count) => `${count} selected`,
-    selectMore: "Select more"
-  },
-  fr: {
-    clear: "Effacer la sélection",
-    search: "Rechercher...",
-    selected: (count) => `${count} sélectionnés`,
-    selectMore: "Sélectionner davantage"
-  }
-};
-var virtualizedComboboxMessages = (overrides) => ({
-  ...getLocale().startsWith("fr") ? messages2.fr : messages2.en,
-  ...overrides
-});
-var optionEquals = (item, selected) => item.value === selected.value;
-var VirtualizedComboboxList = ({
-  emptyLabel,
-  groupSelections,
-  itemIndexRef,
-  messages: messageOverrides,
-  renderItem,
-  selectedValues,
-  virtualizerRef
-}) => {
-  const filteredItems = ComboboxPrimitive.useFilteredItems();
-  const labels2 = virtualizedComboboxMessages(messageOverrides);
-  const itemEntries = filteredItems.map((item, index) => ({
-    kind: "item",
-    item,
-    index
-  }));
-  const selectedEntries = itemEntries.filter(({ item }) => selectedValues.has(item.value));
-  const availableEntries = itemEntries.filter(({ item }) => !selectedValues.has(item.value));
-  const entries = groupSelections ? [
-    ...selectedEntries.length > 0 ? [
-      {
-        kind: "group",
-        key: "selected",
-        label: labels2.selected(selectedValues.size)
-      },
-      ...selectedEntries
-    ] : [],
-    {
-      kind: "group",
-      key: "available",
-      label: labels2.selectMore
-    },
-    ...availableEntries
-  ] : itemEntries;
-  const scrollRef = useRef(null);
-  const virtualizer = useVirtualizer({
-    count: entries.length,
-    getScrollElement: () => scrollRef.current,
-    getItemKey: (index) => {
-      const entry = entries[index];
-      return entry?.kind === "group" ? `group-${entry.key}` : entry?.item.value ?? index;
-    },
-    estimateSize: () => 36,
-    overscan: 8
-  });
-  useEffect(() => {
-    itemIndexRef.current = new Map(entries.flatMap((entry, index) => entry.kind === "item" ? [[entry.index, index]] : []));
-  });
-  useImperativeHandle(virtualizerRef, () => virtualizer, [virtualizer]);
-  const handleScrollElementRef = useCallback((element) => {
-    scrollRef.current = element;
-    if (element)
-      virtualizer.measure();
-  }, [virtualizer]);
-  if (filteredItems.length === 0) {
-    return /* @__PURE__ */ jsx16("div", {
-      className: "text-muted-foreground py-6 text-center text-sm",
-      children: emptyLabel
-    });
-  }
-  return /* @__PURE__ */ jsx16(ComboboxPrimitive.List, {
-    className: "scroll-py-1 overflow-auto overscroll-contain p-1",
-    ref: handleScrollElementRef,
-    style: {
-      height: Math.min(virtualizer.getTotalSize() + 8, 288),
-      maxHeight: "var(--available-height)"
-    },
-    children: /* @__PURE__ */ jsx16("div", {
-      className: "relative w-full",
-      role: "presentation",
-      style: { height: virtualizer.getTotalSize() },
-      children: virtualizer.getVirtualItems().map((virtualItem) => {
-        const entry = entries[virtualItem.index];
-        if (!entry)
-          return null;
-        const style = {
-          height: virtualItem.size,
-          transform: `translateY(${virtualItem.start}px)`
-        };
-        if (entry.kind === "group") {
-          return /* @__PURE__ */ jsx16(ComboboxPrimitive.Group, {
-            className: "contents",
-            children: /* @__PURE__ */ jsx16(ComboboxPrimitive.GroupLabel, {
-              className: "text-muted-foreground absolute top-0 left-0 w-full px-2 pt-3 pb-1 text-xs",
-              "data-index": virtualItem.index,
-              ref: virtualizer.measureElement,
-              style,
-              children: entry.label
-            })
-          }, entry.key);
-        }
-        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",
-          "data-index": virtualItem.index,
-          index: entry.index,
-          ref: virtualizer.measureElement,
-          style,
-          value: entry.item,
-          children: [
-            renderItem?.(entry.item) ?? /* @__PURE__ */ jsx16("span", {
-              className: "min-w-0 truncate",
-              children: entry.item.label
-            }),
-            /* @__PURE__ */ jsx16(ComboboxPrimitive.ItemIndicator, {
-              className: "absolute right-2 flex size-4 items-center justify-center",
-              children: /* @__PURE__ */ jsx16(Check, {})
-            })
-          ]
-        }, entry.item.value);
-      })
-    })
-  });
-};
-var VirtualizedComboboxContent = ({
-  contentClassName,
-  emptyLabel,
-  groupSelections,
-  itemIndexRef,
-  messages: messageOverrides,
-  renderItem,
-  selectedValues,
-  virtualizerRef
-}) => {
-  const labels2 = virtualizedComboboxMessages(messageOverrides);
-  return /* @__PURE__ */ jsx16(ComboboxPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx16(ComboboxPrimitive.Positioner, {
-      align: "start",
-      className: "isolate z-50",
-      side: "bottom",
-      sideOffset: 6,
-      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", {
-            className: "min-w-0 p-1 pb-0",
-            children: /* @__PURE__ */ jsx16(InputGroup, {
-              className: "border-input/30 bg-input/30 h-8 w-full min-w-0 shadow-none",
-              children: /* @__PURE__ */ jsx16(ComboboxPrimitive.Input, {
-                placeholder: labels2.search,
-                render: /* @__PURE__ */ jsx16(InputGroupInput, {})
-              })
-            })
-          }),
-          /* @__PURE__ */ jsx16(VirtualizedComboboxList, {
-            emptyLabel,
-            groupSelections,
-            itemIndexRef,
-            messages: messageOverrides,
-            renderItem,
-            selectedValues,
-            virtualizerRef
-          })
-        ]
-      })
-    })
-  });
-};
-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",
-  disabled,
-  id: triggerId,
-  type: "button",
-  variant: "outline",
-  children: [
-    /* @__PURE__ */ jsx16("span", {
-      className: "min-w-0 flex-1 truncate pr-7 text-left",
-      children: label
-    }),
-    /* @__PURE__ */ jsx16(ChevronsUpDown, {
-      className: "text-muted-foreground shrink-0 opacity-70"
-    })
-  ]
-});
-var defaultClear = (label) => /* @__PURE__ */ jsx16(ComboboxPrimitive.Clear, {
-  "aria-label": label,
-  className: "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute top-1/2 right-7 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm outline-none focus-visible:border focus-visible:ring-3",
-  type: "button",
-  children: /* @__PURE__ */ jsx16(X, {
-    className: "size-3.5"
-  })
-});
-var selectedLabel = (value, placeholder) => {
-  if (Array.isArray(value)) {
-    return value.length > 0 ? value.map(({ label }) => label).join(", ") : placeholder;
-  }
-  return value && "label" in value ? value.label : placeholder;
-};
-var useComboboxVirtualizerRef = (providedRef) => {
-  const localRef = useRef(null);
-  return providedRef ?? localRef;
-};
-var VirtualizedComboboxSingle = (props) => {
-  const virtualizerRef = useComboboxVirtualizerRef(props.virtualizerRef);
-  const itemIndexRef = useRef(new Map);
-  const labels2 = virtualizedComboboxMessages(props.messages);
-  return /* @__PURE__ */ jsxs8(ComboboxPrimitive.Root, {
-    disabled: props.disabled,
-    inputValue: props.searchValue,
-    items: [...props.items],
-    itemToStringLabel: (item) => item.label,
-    isItemEqualToValue: optionEquals,
-    onInputValueChange: (value) => props.onSearchValueChange?.(value),
-    onItemHighlighted: (_, { index, reason }) => {
-      if (reason === "keyboard" && index >= 0) {
-        virtualizerRef.current?.scrollToIndex(itemIndexRef.current.get(index) ?? index, { align: "auto" });
-      }
-    },
-    onOpenChange: (open) => props.onOpenChange?.(open),
-    onValueChange: (value) => props.onValueChange(value),
-    open: props.open,
-    value: props.value,
-    virtualized: true,
-    children: [
-      /* @__PURE__ */ jsxs8("div", {
-        className: "relative",
-        children: [
-          /* @__PURE__ */ jsx16(ComboboxPrimitive.Trigger, {
-            render: props.trigger ?? defaultTrigger(props.ariaLabel, props.ariaInvalid, props.disabled, selectedLabel(props.value, props.placeholder), props.triggerId)
-          }),
-          props.trigger ? null : defaultClear(labels2.clear)
-        ]
-      }),
-      /* @__PURE__ */ jsx16(VirtualizedComboboxContent, {
-        ...props,
-        groupSelections: false,
-        itemIndexRef,
-        selectedValues: new Set(props.value ? [props.value.value] : []),
-        virtualizerRef
-      })
-    ]
-  });
-};
-var VirtualizedComboboxMultiple = (props) => {
-  const virtualizerRef = useComboboxVirtualizerRef(props.virtualizerRef);
-  const itemIndexRef = useRef(new Map);
-  const labels2 = virtualizedComboboxMessages(props.messages);
-  return /* @__PURE__ */ jsxs8(ComboboxPrimitive.Root, {
-    disabled: props.disabled,
-    inputValue: props.searchValue,
-    items: [...props.items],
-    itemToStringLabel: (item) => item.label,
-    isItemEqualToValue: optionEquals,
-    multiple: true,
-    onInputValueChange: (value) => props.onSearchValueChange?.(value),
-    onItemHighlighted: (_, { index, reason }) => {
-      if (reason === "keyboard" && index >= 0) {
-        virtualizerRef.current?.scrollToIndex(itemIndexRef.current.get(index) ?? index, { align: "auto" });
-      }
-    },
-    onOpenChange: (open) => props.onOpenChange?.(open),
-    onValueChange: (value) => props.onValueChange(value),
-    open: props.open,
-    value: [...props.value],
-    virtualized: true,
-    children: [
-      /* @__PURE__ */ jsxs8("div", {
-        className: "relative",
-        children: [
-          /* @__PURE__ */ jsx16(ComboboxPrimitive.Trigger, {
-            render: props.trigger ?? defaultTrigger(props.ariaLabel, props.ariaInvalid, props.disabled, selectedLabel(props.value, props.placeholder), props.triggerId)
-          }),
-          props.trigger ? null : defaultClear(labels2.clear)
-        ]
-      }),
-      /* @__PURE__ */ jsx16(VirtualizedComboboxContent, {
-        ...props,
-        groupSelections: true,
-        itemIndexRef,
-        selectedValues: new Set(props.value.map(({ value }) => value)),
-        virtualizerRef
-      })
-    ]
-  });
-};
-function VirtualizedCombobox(props) {
-  return props.multiple ? /* @__PURE__ */ jsx16(VirtualizedComboboxMultiple, {
-    ...props
-  }) : /* @__PURE__ */ jsx16(VirtualizedComboboxSingle, {
-    ...props
-  });
-}
-
 // ../../src/components/ui/data-table.tsx
-import { jsx as jsx17, jsxs as jsxs9, Fragment } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
 var DataTablePersistedUiStateSchema = Schema.Struct({
   columnVisibility: Schema.Record(Schema.String, Schema.Boolean),
   columnSizing: Schema.Record(Schema.String, Schema.Number),
   view: Schema.Literals(["table", "gallery"])
 }).annotate({ identifier: "DataTablePersistedUiState" });
 var dataTableStorageRuntime = Atom.runtime(BrowserKeyValueStore.layerLocalStorage);
-var messages3 = {
+var messages2 = {
   en: {
     ...paginationMessages("en"),
     actions: "Actions",
+    addItem: "Add item...",
     empty: "No results.",
     loading: "Loading...",
     filter: "Filter results...",
@@ -1833,10 +1434,11 @@ var messages3 = {
     sortBy: "Sort by",
     hideColumn: "Hide column",
     reorder: "Drag to reorder",
+    removeItem: "Remove",
     moveUp: "Move up",
     moveDown: "Move down",
     resizeColumn: (column) => `Resize ${column} column`,
-    listOthers: (count) => count === 1 ? "and 1 other" : `and ${count} others`,
+    listDetails: "View all items",
     selectAllRows: "Select all rows on this page",
     selectRow: "Select row",
     selected: "Selected"
@@ -1844,6 +1446,7 @@ var messages3 = {
   fr: {
     ...paginationMessages("fr"),
     actions: "Actions",
+    addItem: "Ajouter un élément...",
     empty: "Aucun résultat.",
     loading: "Chargement...",
     filter: "Filtrer les résultats...",
@@ -1862,17 +1465,18 @@ var messages3 = {
     sortBy: "Trier par",
     hideColumn: "Masquer la colonne",
     reorder: "Glisser pour réordonner",
+    removeItem: "Retirer",
     moveUp: "Déplacer vers le haut",
     moveDown: "Déplacer vers le bas",
     resizeColumn: (column) => `Redimensionner la colonne ${column}`,
-    listOthers: (count) => count === 1 ? "et 1 autre" : `et ${count} autres`,
+    listDetails: "Afficher tous les éléments",
     selectAllRows: "Sélectionner toutes les lignes de cette page",
     selectRow: "Sélectionner la ligne",
     selected: "Sélectionnés"
   }
 };
 var dataTableMessages = (overrides) => ({
-  ...getLocale().startsWith("fr") ? messages3.fr : messages3.en,
+  ...getLocale().startsWith("fr") ? messages2.fr : messages2.en,
   ...overrides
 });
 var DEFAULT_MIN_WIDTH = 96;
@@ -1933,18 +1537,100 @@ var buildDataTableRows = (rowData, columns, getRowId) => {
       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;
+        const value = colDef.valueGetter ? colDef.valueGetter({ data, rowId: id, rowIndex: index, colDef }) : colDef.type === "list" ? colDef.typeOptions.getItems(data).map((item) => item.label).join(", ") : colDef.field ? data[colDef.field] : undefined;
         return [column.id, value];
       }))
     };
   });
 };
+var CalendarDate = Schema.String.check(Schema.isPattern(/^\d{4}-\d{2}-\d{2}$/), Schema.makeFilter((value) => Option.exists(DateTime.make(value), (date) => DateTime.formatIsoDateUtc(date) === value))).annotate({ identifier: "DataTableCalendarDate" });
+var InstantString = Schema.String.check(Schema.isPattern(/^\d{4}-\d{2}-\d{2}T(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d(?:\.\d+)?)?(?:Z|[+-](?:[01]\d|2[0-3]):[0-5]\d)$/), Schema.makeFilter((value) => Schema.is(CalendarDate)(value.slice(0, 10)))).annotate({ identifier: "DataTableInstantString" });
+var DateInput = Schema.Union([
+  Schema.Date,
+  Schema.Int,
+  CalendarDate,
+  InstantString
+]).annotate({ identifier: "DataTableDateInput" });
+var decodeDateInput = Schema.decodeUnknownOption(DateInput);
+var resolveDate = (value, type) => Option.getOrUndefined(Option.flatMap(decodeDateInput(value), (input) => {
+  const calendarOnly = Schema.is(CalendarDate)(input);
+  if (calendarOnly && type === "dateTime")
+    return Option.none();
+  return Option.map(DateTime.make(input), (instant) => ({
+    instant,
+    calendarOnly
+  }));
+}));
+var formatDateValue = (date, column) => DateTime.format(date.instant, {
+  locale: column.typeOptions?.locale ?? getLocale(),
+  timeZone: date.calendarOnly ? "UTC" : column.typeOptions?.timeZone ?? "UTC",
+  dateStyle: column.typeOptions?.dateStyle ?? "medium",
+  timeStyle: column.type === "dateTime" ? column.typeOptions?.timeStyle ?? "short" : undefined,
+  hour12: column.type === "dateTime" ? column.typeOptions?.hour12 : undefined
+});
+var dateIsoValue = (date) => date.calendarOnly ? DateTime.formatIsoDateUtc(date.instant) : DateTime.formatIso(date.instant);
+var NumberValue = Schema.Finite.annotate({
+  identifier: "DataTableNumberValue"
+});
+var BooleanValue = Schema.Boolean.annotate({
+  identifier: "DataTableBooleanValue"
+});
+var decodeNumberValue = Schema.decodeUnknownOption(NumberValue);
+var decodeBooleanValue = Schema.decodeUnknownOption(BooleanValue);
+var formatNumberValue = (value, options = {}) => {
+  const {
+    locale,
+    emptyLabel: _emptyLabel,
+    nulls: _nulls,
+    exportFormat: _exportFormat,
+    ...format
+  } = options;
+  return new Intl.NumberFormat(locale ?? getLocale(), format).format(value);
+};
+var booleanLabel = (value, options) => value ? options?.trueLabel : options?.falseLabel;
+var getDataTableExportValue = (row, column) => {
+  const value = row.values.get(column.id);
+  const colDef = column.colDef;
+  if (colDef.type === "number") {
+    const number = Option.getOrUndefined(decodeNumberValue(value));
+    if (number === undefined)
+      return null;
+    return colDef.typeOptions?.exportFormat === "formatted" ? formatNumberValue(number, colDef.typeOptions) : number;
+  }
+  if (colDef.type === "boolean") {
+    const boolean = Option.getOrUndefined(decodeBooleanValue(value));
+    if (boolean === undefined)
+      return null;
+    return colDef.typeOptions?.exportFormat === "formatted" ? booleanLabel(boolean, colDef.typeOptions) ?? String(boolean) : boolean;
+  }
+  if (colDef.type !== "date" && colDef.type !== "dateTime")
+    return value;
+  const date = resolveDate(value, colDef.type);
+  if (!date)
+    return null;
+  return colDef.typeOptions?.exportFormat === "formatted" ? formatDateValue(date, colDef) : dateIsoValue(date);
+};
 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)));
+  return rows.filter((row) => searchable.some((column) => {
+    const value = row.values.get(column.id);
+    const colDef = column.colDef;
+    let text = String(value ?? "");
+    if (colDef.type === "date" || colDef.type === "dateTime") {
+      const date = resolveDate(value, colDef.type);
+      text = date ? `${formatDateValue(date, colDef)} ${dateIsoValue(date)}` : "";
+    } else if (colDef.type === "number") {
+      const number = Option.getOrUndefined(decodeNumberValue(value));
+      text = number === undefined ? "" : `${formatNumberValue(number, colDef.typeOptions)} ${number}`;
+    } else if (colDef.type === "boolean") {
+      const boolean = Option.getOrUndefined(decodeBooleanValue(value));
+      text = boolean === undefined ? "" : `${booleanLabel(boolean, colDef.typeOptions) ?? ""} ${boolean}`;
+    }
+    return text.toLocaleLowerCase().includes(query);
+  }));
 };
 var sortDataTableRows = (rows, columns, sorting) => {
   const byId = new Map(columns.map((column) => [column.id, column]));
@@ -1955,6 +1641,35 @@ var sortDataTableRows = (rows, columns, sorting) => {
         continue;
       const leftValue = left.row.values.get(sort.id);
       const rightValue = right.row.values.get(sort.id);
+      const colDef = column.colDef;
+      if (!colDef.comparator && (colDef.type === "number" || colDef.type === "boolean")) {
+        const leftScalar = colDef.type === "number" ? Option.getOrUndefined(decodeNumberValue(leftValue)) : Option.getOrUndefined(Option.map(decodeBooleanValue(leftValue), Number));
+        const rightScalar = colDef.type === "number" ? Option.getOrUndefined(decodeNumberValue(rightValue)) : Option.getOrUndefined(Option.map(decodeBooleanValue(rightValue), Number));
+        if (leftScalar === undefined || rightScalar === undefined) {
+          if (leftScalar === undefined && rightScalar === undefined)
+            continue;
+          const nullOrder = colDef.typeOptions?.nulls === "first" ? -1 : 1;
+          return leftScalar === undefined ? nullOrder : -nullOrder;
+        }
+        const comparison2 = leftScalar - rightScalar;
+        if (comparison2 !== 0)
+          return sort.direction === "desc" ? -comparison2 : comparison2;
+        continue;
+      }
+      if (!colDef.comparator && (colDef.type === "date" || colDef.type === "dateTime")) {
+        const leftDate = resolveDate(leftValue, colDef.type);
+        const rightDate = resolveDate(rightValue, colDef.type);
+        if (!leftDate || !rightDate) {
+          if (!leftDate && !rightDate)
+            continue;
+          const nullOrder = colDef.typeOptions?.nulls === "first" ? -1 : 1;
+          return !leftDate ? nullOrder : -nullOrder;
+        }
+        const comparison2 = DateTime.toEpochMillis(leftDate.instant) - DateTime.toEpochMillis(rightDate.instant);
+        if (comparison2 !== 0)
+          return sort.direction === "desc" ? -comparison2 : comparison2;
+        continue;
+      }
       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.direction === "desc" ? -comparison : comparison;
@@ -2150,9 +1865,76 @@ var renderCell = (row, column) => {
   };
   const CellRenderer = column.colDef.cellRenderer;
   if (CellRenderer)
-    return /* @__PURE__ */ jsx17(CellRenderer, {
+    return /* @__PURE__ */ jsx14(CellRenderer, {
       ...params
     });
+  const colDef = column.colDef;
+  if (colDef.type === "number") {
+    if (colDef.valueFormatter)
+      return colDef.valueFormatter(params);
+    const number = Option.getOrUndefined(decodeNumberValue(value));
+    return /* @__PURE__ */ jsx14("span", {
+      className: "block text-left tabular-nums",
+      children: number === undefined ? colDef.typeOptions?.emptyLabel ?? "—" : formatNumberValue(number, colDef.typeOptions)
+    });
+  }
+  if (colDef.type === "boolean") {
+    if (colDef.valueFormatter)
+      return colDef.valueFormatter(params);
+    const boolean = Option.getOrUndefined(decodeBooleanValue(value));
+    if (boolean === undefined)
+      return colDef.typeOptions?.emptyLabel ?? "—";
+    const options = colDef.typeOptions;
+    return /* @__PURE__ */ jsx14("label", {
+      "data-slot": "data-table-boolean-cell",
+      className: cn("flex min-h-16 w-full items-center justify-start border border-transparent px-2 outline-none focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-inset in-[[data-slot=table-cell]]:absolute in-[[data-slot=table-cell]]:inset-0 in-[[data-slot=table-cell]]:min-h-0", options?.onChange && !options.disabled?.(row.data) && "cursor-pointer hover:bg-muted/50"),
+      onClick: (event) => event.stopPropagation(),
+      onPointerDown: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsx14(Checkbox, {
+        "aria-label": options?.getAriaLabel?.(row.data) ?? columnLabel(column),
+        className: "focus-visible:ring-0 focus-visible:outline-none",
+        checked: boolean,
+        readOnly: !options?.onChange,
+        disabled: options?.disabled?.(row.data),
+        onCheckedChange: (checked) => options?.onChange?.({ value: checked, row: row.data })
+      })
+    });
+  }
+  if (colDef.type === "date" || colDef.type === "dateTime") {
+    if (colDef.valueFormatter)
+      return colDef.valueFormatter(params);
+    const date = resolveDate(value, colDef.type);
+    return date ? /* @__PURE__ */ jsx14("time", {
+      dateTime: dateIsoValue(date),
+      children: formatDateValue(date, colDef)
+    }) : colDef.typeOptions?.emptyLabel ?? "—";
+  }
+  if (colDef.type === "list") {
+    const config = colDef.typeOptions;
+    const itemActions = config.itemActions?.map((action) => ({
+      ...action,
+      onClick: (item) => action.onClick({ item, row: row.data }),
+      visible: (item) => action.visible?.({ item, row: row.data }) ?? true,
+      disabled: (item) => action.disabled?.({ item, row: row.data }) ?? false
+    }));
+    if (config.getOptions) {
+      return /* @__PURE__ */ jsx14(DataTableListCell, {
+        ...config,
+        itemActions,
+        items: config.getItems(row.data),
+        options: config.getOptions(row.data),
+        totalCount: config.getTotalCount?.(row.data),
+        onAdd: config.onAdd ? (value2) => config.onAdd?.({ value: value2, row: row.data }) : undefined,
+        onRemove: config.onRemove ? (value2) => config.onRemove?.({ value: value2, row: row.data }) : undefined
+      });
+    }
+    return /* @__PURE__ */ jsx14(DataTableListCell, {
+      ...config,
+      itemActions,
+      items: config.getItems(row.data),
+      totalCount: config.getTotalCount?.(row.data)
+    });
+  }
   return column.colDef.valueFormatter?.(params) ?? (value === null || value === undefined ? null : String(value));
 };
 var nodeText = (node) => {
@@ -2196,33 +1978,33 @@ var DataTableRowActions = ({
   const visible = actions.filter((action) => !action.visible || action.visible(row));
   if (!visible.length)
     return null;
-  return /* @__PURE__ */ jsxs9(DropdownMenu, {
+  return /* @__PURE__ */ jsxs8(DropdownMenu, {
     children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
+      /* @__PURE__ */ jsx14(DropdownMenuTrigger, {
         onClick: (event) => event.stopPropagation(),
-        render: /* @__PURE__ */ jsxs9(Button, {
+        render: /* @__PURE__ */ jsxs8(Button, {
           className: "size-8 focus-visible:ring-inset [&_svg:not([class*='size-'])]:size-4",
           size: "icon",
           variant: "ghost",
           children: [
-            /* @__PURE__ */ jsx17("span", {
+            /* @__PURE__ */ jsx14("span", {
               className: "sr-only",
               children: title
             }),
-            /* @__PURE__ */ jsx17(MoreHorizontal, {})
+            /* @__PURE__ */ jsx14(MoreHorizontal, {})
           ]
         })
       }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, {
+      /* @__PURE__ */ jsx14(DropdownMenuContent, {
         align: "end",
         className: "w-max",
-        children: /* @__PURE__ */ jsxs9(DropdownMenuGroup, {
+        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
           children: [
-            /* @__PURE__ */ jsx17(DropdownMenuLabel, {
+            /* @__PURE__ */ jsx14(DropdownMenuLabel, {
               children: title
             }),
-            /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
-            visible.map((action) => /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+            /* @__PURE__ */ jsx14(DropdownMenuSeparator, {}),
+            visible.map((action) => /* @__PURE__ */ jsxs8(DropdownMenuItem, {
               onClick: (event) => {
                 event.stopPropagation();
                 action.onClick(row);
@@ -2259,7 +2041,7 @@ var DataTableRowActionMenu = ({
       reorderActions.push({
         id: "data-table-move-up",
         name: store.config.labels.moveUp,
-        icon: /* @__PURE__ */ jsx17(ArrowUp, {}),
+        icon: /* @__PURE__ */ jsx14(ArrowUp, {}),
         onClick: () => move(rowIndex - 1)
       });
     }
@@ -2267,12 +2049,12 @@ var DataTableRowActionMenu = ({
       reorderActions.push({
         id: "data-table-move-down",
         name: store.config.labels.moveDown,
-        icon: /* @__PURE__ */ jsx17(ArrowDown, {}),
+        icon: /* @__PURE__ */ jsx14(ArrowDown, {}),
         onClick: () => move(rowIndex + 1)
       });
     }
   }
-  return /* @__PURE__ */ jsx17(DataTableRowActions, {
+  return /* @__PURE__ */ jsx14(DataTableRowActions, {
     actions: [...reorderActions, ...rowActions ? rowActions.items : []],
     row: row.data,
     title: rowActions?.label ?? store.config.labels.actions
@@ -2293,16 +2075,16 @@ var DataTableToolbar = ({
   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", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "flex flex-col gap-2 pb-4",
     children: [
-      features.search !== false ? /* @__PURE__ */ jsxs9("div", {
+      features.search !== false ? /* @__PURE__ */ jsxs8("div", {
         className: "relative min-w-0",
         children: [
-          /* @__PURE__ */ jsx17(Search, {
+          /* @__PURE__ */ jsx14(Search, {
             className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
           }),
-          /* @__PURE__ */ jsx17(Input, {
+          /* @__PURE__ */ jsx14(Input, {
             className: "px-9",
             onChange: (event) => update((state) => ({
               ...state,
@@ -2312,7 +2094,7 @@ var DataTableToolbar = ({
             placeholder: labels2.filter,
             value: store.state.globalFilter ?? ""
           }),
-          store.state.globalFilter ? /* @__PURE__ */ jsx17(Button, {
+          store.state.globalFilter ? /* @__PURE__ */ jsx14(Button, {
             "aria-label": labels2.filter,
             className: "absolute top-1/2 right-1 size-7 -translate-y-1/2",
             onClick: () => update((state) => ({
@@ -2322,38 +2104,38 @@ var DataTableToolbar = ({
             })),
             size: "icon",
             variant: "ghost",
-            children: /* @__PURE__ */ jsx17(X2, {})
+            children: /* @__PURE__ */ jsx14(X, {})
           }) : null
         ]
       }) : null,
-      /* @__PURE__ */ jsx17("div", {
+      /* @__PURE__ */ jsx14("div", {
         className: "-m-1 flex overflow-x-auto p-1",
-        children: /* @__PURE__ */ jsxs9(Menubar, {
+        children: /* @__PURE__ */ jsxs8(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: [
-            visibleBulkActions.length ? /* @__PURE__ */ jsxs9(MenubarMenu, {
+            visibleBulkActions.length ? /* @__PURE__ */ jsxs8(MenubarMenu, {
               children: [
-                /* @__PURE__ */ jsxs9(MenubarTrigger, {
+                /* @__PURE__ */ jsxs8(MenubarTrigger, {
                   className: "bg-primary text-primary-foreground hover:bg-primary/90 aria-expanded:bg-primary/90",
                   children: [
                     labels2.selected,
-                    /* @__PURE__ */ jsx17(Badge, {
+                    /* @__PURE__ */ jsx14(Badge, {
                       variant: "secondary",
                       children: selectedRows.length
                     }),
-                    /* @__PURE__ */ jsx17(ChevronDown, {})
+                    /* @__PURE__ */ jsx14(ChevronDown, {})
                   ]
                 }),
-                /* @__PURE__ */ jsx17(MenubarContent, {
+                /* @__PURE__ */ jsx14(MenubarContent, {
                   align: "end",
                   className: "w-max",
-                  children: /* @__PURE__ */ jsxs9(MenubarGroup, {
+                  children: /* @__PURE__ */ jsxs8(MenubarGroup, {
                     children: [
-                      /* @__PURE__ */ jsx17(MenubarLabel, {
+                      /* @__PURE__ */ jsx14(MenubarLabel, {
                         children: bulkActions && bulkActions.label ? bulkActions.label : labels2.actions
                       }),
-                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
-                      visibleBulkActions.map((action) => /* @__PURE__ */ jsxs9(MenubarItem, {
+                      /* @__PURE__ */ jsx14(MenubarSeparator, {}),
+                      visibleBulkActions.map((action) => /* @__PURE__ */ jsxs8(MenubarItem, {
                         onClick: () => action.onClick(selectedRows),
                         variant: action.variant,
                         children: [
@@ -2366,27 +2148,27 @@ var DataTableToolbar = ({
                 })
               ]
             }) : null,
-            grouping ? /* @__PURE__ */ jsxs9(MenubarMenu, {
+            grouping ? /* @__PURE__ */ jsxs8(MenubarMenu, {
               children: [
-                /* @__PURE__ */ jsxs9(MenubarTrigger, {
+                /* @__PURE__ */ jsxs8(MenubarTrigger, {
                   "aria-label": labels2.groupBy,
                   children: [
-                    /* @__PURE__ */ jsx17(Rows3, {}),
-                    /* @__PURE__ */ jsx17("span", {
+                    /* @__PURE__ */ jsx14(Rows3, {}),
+                    /* @__PURE__ */ jsx14("span", {
                       className: "hidden sm:inline",
                       children: labels2.groupBy
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx17(MenubarContent, {
+                /* @__PURE__ */ jsx14(MenubarContent, {
                   align: "end",
-                  children: /* @__PURE__ */ jsxs9(MenubarGroup, {
+                  children: /* @__PURE__ */ jsxs8(MenubarGroup, {
                     children: [
-                      /* @__PURE__ */ jsx17(MenubarLabel, {
+                      /* @__PURE__ */ jsx14(MenubarLabel, {
                         children: labels2.groupBy
                       }),
-                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
-                      grouping.fields.map((field) => /* @__PURE__ */ jsx17(MenubarCheckboxItem, {
+                      /* @__PURE__ */ jsx14(MenubarSeparator, {}),
+                      grouping.fields.map((field) => /* @__PURE__ */ jsx14(MenubarCheckboxItem, {
                         checked: store.state.grouping.includes(field.id),
                         onCheckedChange: (checked) => update((state) => ({
                           ...state,
@@ -2399,63 +2181,63 @@ var DataTableToolbar = ({
                 })
               ]
             }) : null,
-            features.sorting !== false ? /* @__PURE__ */ jsx17(SortMenu, {
+            features.sorting !== false ? /* @__PURE__ */ jsx14(SortMenu, {
               tableAtom
             }) : null,
-            features.gallery ? /* @__PURE__ */ jsx17(ViewMenu, {
+            features.gallery ? /* @__PURE__ */ jsx14(ViewMenu, {
               tableAtom
             }) : null,
-            features.columnVisibility !== false ? /* @__PURE__ */ jsx17(ColumnMenu, {
+            features.columnVisibility !== false ? /* @__PURE__ */ jsx14(ColumnMenu, {
               tableAtom
             }) : null,
-            features.refresh ? /* @__PURE__ */ jsx17(MenubarMenu, {
-              children: /* @__PURE__ */ jsxs9(MenubarTrigger, {
+            features.refresh ? /* @__PURE__ */ jsx14(MenubarMenu, {
+              children: /* @__PURE__ */ jsxs8(MenubarTrigger, {
                 "aria-label": labels2.refresh,
                 onClick: features.refresh,
                 children: [
-                  /* @__PURE__ */ jsx17(RefreshCw, {}),
-                  /* @__PURE__ */ jsx17("span", {
+                  /* @__PURE__ */ jsx14(RefreshCw, {}),
+                  /* @__PURE__ */ jsx14("span", {
                     className: "hidden sm:inline",
                     children: labels2.refresh
                   })
                 ]
               })
             }) : null,
-            features.export ? /* @__PURE__ */ jsxs9(MenubarMenu, {
+            features.export ? /* @__PURE__ */ jsxs8(MenubarMenu, {
               children: [
-                /* @__PURE__ */ jsxs9(MenubarTrigger, {
+                /* @__PURE__ */ jsxs8(MenubarTrigger, {
                   "aria-label": labels2.export,
                   disabled: !exportRows.length,
                   children: [
-                    /* @__PURE__ */ jsx17(Download, {}),
-                    /* @__PURE__ */ jsx17("span", {
+                    /* @__PURE__ */ jsx14(Download, {}),
+                    /* @__PURE__ */ jsx14("span", {
                       className: "hidden sm:inline",
                       children: labels2.export
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx17(MenubarContent, {
+                /* @__PURE__ */ jsx14(MenubarContent, {
                   align: "end",
-                  children: /* @__PURE__ */ jsxs9(MenubarGroup, {
+                  children: /* @__PURE__ */ jsxs8(MenubarGroup, {
                     children: [
-                      /* @__PURE__ */ jsx17(MenubarLabel, {
+                      /* @__PURE__ */ jsx14(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"),
+                      /* @__PURE__ */ jsx14(MenubarSeparator, {}),
+                      /* @__PURE__ */ jsxs8(MenubarItem, {
+                        onClick: () => downloadCsv(model.visibleColumns.map(columnLabel), exportRows.map((row) => model.visibleColumns.map((column) => String(getDataTableExportValue(row, column) ?? ""))), features.export ? features.export.baseName : "table"),
                         children: [
-                          /* @__PURE__ */ jsx17(FileText, {}),
+                          /* @__PURE__ */ jsx14(FileText, {}),
                           labels2.exportCsv
                         ]
                       }),
-                      /* @__PURE__ */ jsxs9(MenubarItem, {
+                      /* @__PURE__ */ jsxs8(MenubarItem, {
                         onClick: () => downloadJson(exportRows.map((row) => Object.fromEntries(model.visibleColumns.map((column) => [
                           column.id,
-                          row.values.get(column.id)
+                          getDataTableExportValue(row, column)
                         ]))), features.export ? features.export.baseName : "table"),
                         children: [
-                          /* @__PURE__ */ jsx17(FileJson, {}),
+                          /* @__PURE__ */ jsx14(FileJson, {}),
                           labels2.exportJson
                         ]
                       })
@@ -2483,59 +2265,59 @@ var SortMenu = ({
     sort: [{ id, direction }],
     page: 0
   }));
-  return /* @__PURE__ */ jsxs9(MenubarMenu, {
+  return /* @__PURE__ */ jsxs8(MenubarMenu, {
     children: [
-      /* @__PURE__ */ jsxs9(MenubarTrigger, {
+      /* @__PURE__ */ jsxs8(MenubarTrigger, {
         "aria-label": store.config.labels.sortBy,
         children: [
-          current ? current.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {}),
-          /* @__PURE__ */ jsx17("span", {
+          current ? current.direction === "desc" ? /* @__PURE__ */ jsx14(ArrowDown, {}) : /* @__PURE__ */ jsx14(ArrowUp, {}) : /* @__PURE__ */ jsx14(ChevronsUpDown, {}),
+          /* @__PURE__ */ jsx14("span", {
             className: "hidden sm:inline",
             children: store.config.labels.sortBy
           })
         ]
       }),
-      /* @__PURE__ */ jsx17(MenubarContent, {
+      /* @__PURE__ */ jsx14(MenubarContent, {
         align: "end",
         className: "w-52",
         children: columns.map((column) => {
           const sortState = store.state.sort?.find(({ id }) => id === column.id);
-          return /* @__PURE__ */ jsxs9(MenubarSub, {
+          return /* @__PURE__ */ jsxs8(MenubarSub, {
             children: [
-              /* @__PURE__ */ jsxs9(MenubarSubTrigger, {
+              /* @__PURE__ */ jsxs8(MenubarSubTrigger, {
                 children: [
-                  sortState ? sortState.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : null,
+                  sortState ? sortState.direction === "desc" ? /* @__PURE__ */ jsx14(ArrowDown, {}) : /* @__PURE__ */ jsx14(ArrowUp, {}) : null,
                   columnLabel(column)
                 ]
               }),
-              /* @__PURE__ */ jsxs9(MenubarSubContent, {
+              /* @__PURE__ */ jsxs8(MenubarSubContent, {
                 children: [
-                  /* @__PURE__ */ jsxs9(MenubarItem, {
+                  /* @__PURE__ */ jsxs8(MenubarItem, {
                     onClick: () => sort(column.id, "asc"),
                     children: [
-                      /* @__PURE__ */ jsx17(ArrowUp, {}),
+                      /* @__PURE__ */ jsx14(ArrowUp, {}),
                       " ",
                       store.config.labels.sortAsc
                     ]
                   }),
-                  /* @__PURE__ */ jsxs9(MenubarItem, {
+                  /* @__PURE__ */ jsxs8(MenubarItem, {
                     onClick: () => sort(column.id, "desc"),
                     children: [
-                      /* @__PURE__ */ jsx17(ArrowDown, {}),
+                      /* @__PURE__ */ jsx14(ArrowDown, {}),
                       " ",
                       store.config.labels.sortDesc
                     ]
                   }),
-                  sortState ? /* @__PURE__ */ jsxs9(Fragment, {
+                  sortState ? /* @__PURE__ */ jsxs8(Fragment, {
                     children: [
-                      /* @__PURE__ */ jsx17(MenubarSeparator, {}),
-                      /* @__PURE__ */ jsxs9(MenubarItem, {
+                      /* @__PURE__ */ jsx14(MenubarSeparator, {}),
+                      /* @__PURE__ */ jsxs8(MenubarItem, {
                         onClick: () => changeState(setStore, (state) => ({
                           ...state,
                           sort: state.sort?.filter(({ id }) => id !== column.id)
                         })),
                         children: [
-                          /* @__PURE__ */ jsx17(X2, {}),
+                          /* @__PURE__ */ jsx14(X, {}),
                           " ",
                           store.config.labels.sortClear
                         ]
@@ -2555,21 +2337,21 @@ var ViewMenu = ({
   tableAtom
 }) => {
   const [store, setStore] = useTableAtom(tableAtom);
-  return /* @__PURE__ */ jsxs9(MenubarMenu, {
+  return /* @__PURE__ */ jsxs8(MenubarMenu, {
     children: [
-      /* @__PURE__ */ jsxs9(MenubarTrigger, {
+      /* @__PURE__ */ jsxs8(MenubarTrigger, {
         "aria-label": store.config.labels.view,
         children: [
-          store.state.view === "gallery" ? /* @__PURE__ */ jsx17(LayoutGrid, {}) : /* @__PURE__ */ jsx17(Rows3, {}),
-          /* @__PURE__ */ jsx17("span", {
+          store.state.view === "gallery" ? /* @__PURE__ */ jsx14(LayoutGrid, {}) : /* @__PURE__ */ jsx14(Rows3, {}),
+          /* @__PURE__ */ jsx14("span", {
             className: "hidden sm:inline",
             children: store.config.labels.view
           })
         ]
       }),
-      /* @__PURE__ */ jsx17(MenubarContent, {
+      /* @__PURE__ */ jsx14(MenubarContent, {
         align: "end",
-        children: /* @__PURE__ */ jsxs9(MenubarRadioGroup, {
+        children: /* @__PURE__ */ jsxs8(MenubarRadioGroup, {
           onValueChange: (view) => {
             if (view === "table" || view === "gallery") {
               changeState(setStore, (state) => ({ ...state, view }));
@@ -2577,18 +2359,18 @@ var ViewMenu = ({
           },
           value: store.state.view,
           children: [
-            /* @__PURE__ */ jsxs9(MenubarRadioItem, {
+            /* @__PURE__ */ jsxs8(MenubarRadioItem, {
               value: "table",
               children: [
-                /* @__PURE__ */ jsx17(Rows3, {}),
+                /* @__PURE__ */ jsx14(Rows3, {}),
                 " ",
                 store.config.labels.tableView
               ]
             }),
-            /* @__PURE__ */ jsxs9(MenubarRadioItem, {
+            /* @__PURE__ */ jsxs8(MenubarRadioItem, {
               value: "gallery",
               children: [
-                /* @__PURE__ */ jsx17(LayoutGrid, {}),
+                /* @__PURE__ */ jsx14(LayoutGrid, {}),
                 " ",
                 store.config.labels.galleryView
               ]
@@ -2606,27 +2388,27 @@ var ColumnMenu = ({
   const columns = deriveModel(store).columns.filter(({ colDef }) => colDef.hideable !== false);
   if (!columns.length)
     return null;
-  return /* @__PURE__ */ jsxs9(MenubarMenu, {
+  return /* @__PURE__ */ jsxs8(MenubarMenu, {
     children: [
-      /* @__PURE__ */ jsxs9(MenubarTrigger, {
+      /* @__PURE__ */ jsxs8(MenubarTrigger, {
         "aria-label": store.config.labels.columns,
         children: [
-          /* @__PURE__ */ jsx17(Settings2, {}),
-          /* @__PURE__ */ jsx17("span", {
+          /* @__PURE__ */ jsx14(Settings2, {}),
+          /* @__PURE__ */ jsx14("span", {
             className: "hidden sm:inline",
             children: store.config.labels.columns
           })
         ]
       }),
-      /* @__PURE__ */ jsx17(MenubarContent, {
+      /* @__PURE__ */ jsx14(MenubarContent, {
         align: "end",
-        children: /* @__PURE__ */ jsxs9(MenubarGroup, {
+        children: /* @__PURE__ */ jsxs8(MenubarGroup, {
           children: [
-            /* @__PURE__ */ jsx17(MenubarLabel, {
+            /* @__PURE__ */ jsx14(MenubarLabel, {
               children: store.config.labels.columns
             }),
-            /* @__PURE__ */ jsx17(MenubarSeparator, {}),
-            columns.map((column) => /* @__PURE__ */ jsx17(MenubarCheckboxItem, {
+            /* @__PURE__ */ jsx14(MenubarSeparator, {}),
+            columns.map((column) => /* @__PURE__ */ jsx14(MenubarCheckboxItem, {
               checked: store.state.columnVisibility[column.id] !== false,
               onCheckedChange: (visible) => changeState(setStore, (state) => ({
                 ...state,
@@ -2648,6 +2430,7 @@ var ResizeHandle = ({
 }) => {
   const [store, setStore] = useTableAtom(tableAtom);
   const columnId = useRequiredId(ColumnIdContext);
+  const resizeRef = useRef(null);
   const column = deriveModel(store).columns.find(({ id }) => id === columnId);
   if (!column || column.colDef.resizable === false)
     return null;
@@ -2659,25 +2442,32 @@ var ResizeHandle = ({
     }
   }));
   const onPointerDown = (event) => {
+    if (event.button !== 0)
+      return;
     event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
-    event.currentTarget.dataset.startX = String(event.clientX);
-    event.currentTarget.dataset.startWidth = String(column.width);
+    resizeRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startWidth: column.width
+    };
   };
   const onPointerMove = (event) => {
-    if (!event.currentTarget.hasPointerCapture(event.pointerId))
+    const drag = resizeRef.current;
+    if (!drag || drag.pointerId !== event.pointerId)
       return;
-    const startX = Number(event.currentTarget.dataset.startX);
-    const startWidth = Number(event.currentTarget.dataset.startWidth);
-    resize(startWidth + event.clientX - startX);
+    resize(drag.startWidth + event.clientX - drag.startX);
+  };
+  const reset = () => {
+    resizeRef.current = null;
   };
-  return /* @__PURE__ */ jsx17("button", {
+  return /* @__PURE__ */ jsx14("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",
+    className: "after:bg-border hover:after:bg-primary/60 focus-visible:after:bg-ring absolute inset-y-0 right-0 z-10 w-2 cursor-col-resize touch-none outline-none after:absolute after:inset-y-3 after:right-0 after:w-px hover:after:w-0.5 focus-visible:after:w-0.5",
     onDoubleClick: () => resize(column.colDef.width ?? DEFAULT_WIDTH),
     onKeyDown: (event) => {
       const delta = event.key === "ArrowLeft" ? -8 : event.key === "ArrowRight" ? 8 : 0;
@@ -2688,6 +2478,9 @@ var ResizeHandle = ({
     },
     onPointerDown,
     onPointerMove,
+    onPointerUp: reset,
+    onPointerCancel: reset,
+    onLostPointerCapture: reset,
     role: "separator",
     type: "button"
   });
@@ -2697,7 +2490,7 @@ var DragHandle = ({
 }) => {
   const [store, setStore] = useTableAtom(tableAtom);
   const rowId = useRequiredId(RowIdContext);
-  const dragRef = useRef2(null);
+  const dragRef = useRef(null);
   const [overlay, setOverlay] = useState(null);
   const reset = (element) => {
     clearDragPresentation(element.closest("[data-table-root]"));
@@ -2790,9 +2583,9 @@ var DragHandle = ({
       reordering.onReorder(reorderDataTableRows(model.rows, rowId, target.id));
     }
   };
-  return /* @__PURE__ */ jsxs9(Fragment, {
+  return /* @__PURE__ */ jsxs8(Fragment, {
     children: [
-      /* @__PURE__ */ jsx17(Button, {
+      /* @__PURE__ */ jsx14(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(),
@@ -2810,9 +2603,9 @@ var DragHandle = ({
         onPointerUp: finish,
         size: "icon",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx17(GripVertical, {})
+        children: /* @__PURE__ */ jsx14(GripVertical, {})
       }),
-      overlay ? createPortal(/* @__PURE__ */ jsx17("div", {
+      overlay ? createPortal(/* @__PURE__ */ jsx14("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 },
@@ -2842,7 +2635,7 @@ var TableDataRow = ({
   const selection = store.config.features.selection;
   const selectable = !!selection && (selection.isRowSelectable?.(row.data) ?? true);
   const draggable = canDragRows(store);
-  return /* @__PURE__ */ jsxs9(TableRow, {
+  return /* @__PURE__ */ jsxs8(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,
@@ -2855,36 +2648,36 @@ var TableDataRow = ({
     },
     tabIndex: store.config.onRowClicked ? 0 : undefined,
     children: [
-      selection ? /* @__PURE__ */ jsx17(TableCell, {
+      selection ? /* @__PURE__ */ jsx14(TableCell, {
         className: "w-10 pr-0",
         onClick: (event) => event.stopPropagation(),
-        children: /* @__PURE__ */ jsx17(Checkbox, {
+        children: /* @__PURE__ */ jsx14(Checkbox, {
           "aria-label": store.config.labels.selectRow,
           checked: !!store.state.rowSelection[row.id],
           disabled: !selectable,
           onCheckedChange: (checked) => toggleRow(store, setStore, row.id, checked)
         })
       }) : null,
-      draggable ? /* @__PURE__ */ jsx17(TableCell, {
+      draggable ? /* @__PURE__ */ jsx14(TableCell, {
         className: "w-10 pr-0",
-        children: /* @__PURE__ */ jsx17(DragHandle, {
+        children: /* @__PURE__ */ jsx14(DragHandle, {
           tableAtom
         })
       }) : null,
-      model.visibleColumns.map((column) => /* @__PURE__ */ jsx17(TableCell, {
-        className: cn("min-w-24 overflow-hidden has-[[data-slot=data-table-relationship-cell]]:relative has-[[data-slot=data-table-relationship-cell]]:p-0", column.colDef.truncate ? "whitespace-nowrap" : "whitespace-normal"),
+      model.visibleColumns.map((column) => /* @__PURE__ */ jsx14(TableCell, {
+        className: cn("min-w-24 overflow-hidden has-[[data-slot=data-table-list-cell]]:relative has-[[data-slot=data-table-list-cell]]:p-0 has-[[data-slot=data-table-boolean-cell]]:relative has-[[data-slot=data-table-boolean-cell]]:p-0", column.colDef.truncate ? "whitespace-nowrap" : "whitespace-normal"),
         style: { width: column.width },
-        children: /* @__PURE__ */ jsx17("div", {
+        children: /* @__PURE__ */ jsx14("div", {
           className: cn("min-w-0", column.colDef.truncate && "truncate"),
           children: renderCell(row, column)
         })
       }, column.id)),
-      hasRowActionMenu(store) ? /* @__PURE__ */ jsx17(TableCell, {
+      hasRowActionMenu(store) ? /* @__PURE__ */ jsx14(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", {
+        children: /* @__PURE__ */ jsx14("div", {
           className: "flex h-16 items-center justify-center",
-          children: /* @__PURE__ */ jsx17(DataTableRowActionMenu, {
+          children: /* @__PURE__ */ jsx14(DataTableRowActionMenu, {
             tableAtom
           })
         })
@@ -2900,26 +2693,26 @@ var GroupActions = ({
   const visible = actions?.filter((action) => !action.visible || action.visible(groupId));
   if (!visible?.length)
     return null;
-  return /* @__PURE__ */ jsxs9(DropdownMenu, {
+  return /* @__PURE__ */ jsxs8(DropdownMenu, {
     children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
+      /* @__PURE__ */ jsx14(DropdownMenuTrigger, {
         onClick: (event) => event.stopPropagation(),
-        render: /* @__PURE__ */ jsxs9(Button, {
+        render: /* @__PURE__ */ jsxs8(Button, {
           size: "icon",
           variant: "ghost",
           children: [
-            /* @__PURE__ */ jsx17("span", {
+            /* @__PURE__ */ jsx14("span", {
               className: "sr-only",
               children: title
             }),
-            /* @__PURE__ */ jsx17(MoreHorizontal, {})
+            /* @__PURE__ */ jsx14(MoreHorizontal, {})
           ]
         })
       }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, {
+      /* @__PURE__ */ jsx14(DropdownMenuContent, {
         align: "end",
-        children: /* @__PURE__ */ jsx17(DropdownMenuGroup, {
-          children: visible.map((action) => /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+        children: /* @__PURE__ */ jsx14(DropdownMenuGroup, {
+          children: visible.map((action) => /* @__PURE__ */ jsxs8(DropdownMenuItem, {
             onClick: () => action.onClick(groupId),
             variant: action.variant,
             children: [
@@ -2950,40 +2743,40 @@ var GroupedTable = ({
         [section.key]: !collapsed
       }
     }));
-    const body = /* @__PURE__ */ jsxs9(TableBody, {
+    const body = /* @__PURE__ */ jsxs8(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, {
+        /* @__PURE__ */ jsx14(TableRow, {
           className: "bg-muted/40 hover:bg-accent! cursor-pointer",
           onClick: toggleCollapsed,
-          children: /* @__PURE__ */ jsx17(TableCell, {
+          children: /* @__PURE__ */ jsx14(TableCell, {
             colSpan: model.visibleColumns.length + extra,
-            children: /* @__PURE__ */ jsxs9("div", {
+            children: /* @__PURE__ */ jsxs8("div", {
               className: "flex items-center gap-2",
               style: { paddingLeft: section.depth * 20 },
               children: [
-                /* @__PURE__ */ jsxs9("button", {
+                /* @__PURE__ */ jsxs8("button", {
                   "aria-expanded": !collapsed,
                   className: "flex flex-1 cursor-pointer items-center gap-2 text-left font-medium",
                   type: "button",
                   children: [
-                    collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
+                    collapsed ? /* @__PURE__ */ jsx14(ChevronRight2, {
                       className: "size-4"
-                    }) : /* @__PURE__ */ jsx17(ChevronDown, {
+                    }) : /* @__PURE__ */ jsx14(ChevronDown, {
                       className: "size-4"
                     }),
-                    /* @__PURE__ */ jsx17("span", {
+                    /* @__PURE__ */ jsx14("span", {
                       className: "flex-1",
                       children: section.field.renderGroupLabel?.(section.groupId, section.rows.map((row) => row.data)) ?? section.groupId
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx17(Badge, {
+                /* @__PURE__ */ jsx14(Badge, {
                   variant: "secondary",
                   children: section.rows.length
                 }),
-                /* @__PURE__ */ jsx17(GroupActions, {
+                /* @__PURE__ */ jsx14(GroupActions, {
                   actions: section.field.actions,
                   groupId: section.groupId,
                   title: section.field.actionsLabel ?? store.config.labels.actions
@@ -2992,14 +2785,14 @@ var GroupedTable = ({
             })
           })
         }),
-        !collapsed && !section.children.length ? section.rows.length ? section.rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
+        !collapsed && !section.children.length ? section.rows.length ? section.rows.map((row) => /* @__PURE__ */ jsx14(RowIdContext.Provider, {
           value: row.id,
-          children: /* @__PURE__ */ jsx17(TableDataRow, {
+          children: /* @__PURE__ */ jsx14(TableDataRow, {
             tableAtom
           })
         }, `${section.key}:${row.id}`)) : [
-          /* @__PURE__ */ jsx17(TableRow, {
-            children: /* @__PURE__ */ jsx17(TableCell, {
+          /* @__PURE__ */ jsx14(TableRow, {
+            children: /* @__PURE__ */ jsx14(TableCell, {
               className: "text-muted-foreground h-16",
               colSpan: model.visibleColumns.length + extra,
               children: section.field.renderEmptyGroup?.(section.groupId) ?? store.config.labels.empty
@@ -3010,7 +2803,7 @@ var GroupedTable = ({
     }, section.key);
     return !collapsed && section.children.length ? [body, renderSections(section.children)] : [body];
   });
-  return /* @__PURE__ */ jsx17(Fragment, {
+  return /* @__PURE__ */ jsx14(Fragment, {
     children: renderSections(sections)
   });
 };
@@ -3033,66 +2826,65 @@ var ColumnHeaderMenu = ({
   }));
   const label = columnLabel(column);
   if (!sortingEnabled && !hidingEnabled) {
-    return /* @__PURE__ */ jsx17("div", {
-      className: "truncate",
+    return /* @__PURE__ */ jsx14("div", {
+      className: "truncate px-2",
       children: column.colDef.headerName
     });
   }
-  return /* @__PURE__ */ jsxs9(DropdownMenu, {
+  return /* @__PURE__ */ jsxs8(DropdownMenu, {
     children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
-        render: /* @__PURE__ */ jsxs9(Button, {
+      /* @__PURE__ */ jsx14(DropdownMenuTrigger, {
+        render: /* @__PURE__ */ jsxs8(Button, {
           "aria-label": label,
-          className: "h-8 max-w-full justify-start px-2",
-          size: "sm",
+          className: "absolute inset-0 h-full w-full min-w-0 justify-start rounded-none px-2 pr-4 focus-visible:ring-inset",
           variant: "ghost",
           children: [
-            /* @__PURE__ */ jsx17("span", {
+            /* @__PURE__ */ jsx14("span", {
               className: "truncate",
               children: column.colDef.headerName
             }),
-            sort ? sort.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : sortingEnabled ? /* @__PURE__ */ jsx17(ChevronsUpDown2, {}) : null
+            sort ? sort.direction === "desc" ? /* @__PURE__ */ jsx14(ArrowDown, {}) : /* @__PURE__ */ jsx14(ArrowUp, {}) : null
           ]
         })
       }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, {
+      /* @__PURE__ */ jsx14(DropdownMenuContent, {
         align: "start",
         className: "w-48",
-        children: /* @__PURE__ */ jsxs9(DropdownMenuGroup, {
+        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
           children: [
-            sortingEnabled ? /* @__PURE__ */ jsxs9(Fragment, {
+            sortingEnabled ? /* @__PURE__ */ jsxs8(Fragment, {
               children: [
-                /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+                /* @__PURE__ */ jsxs8(DropdownMenuItem, {
                   onClick: () => setSort("asc"),
                   children: [
-                    /* @__PURE__ */ jsx17(ArrowUp, {}),
+                    /* @__PURE__ */ jsx14(ArrowUp, {}),
                     " ",
                     store.config.labels.sortAsc
                   ]
                 }),
-                /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+                /* @__PURE__ */ jsxs8(DropdownMenuItem, {
                   onClick: () => setSort("desc"),
                   children: [
-                    /* @__PURE__ */ jsx17(ArrowDown, {}),
+                    /* @__PURE__ */ jsx14(ArrowDown, {}),
                     " ",
                     store.config.labels.sortDesc
                   ]
                 }),
-                sort ? /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+                sort ? /* @__PURE__ */ jsxs8(DropdownMenuItem, {
                   onClick: () => update((state) => ({
                     ...state,
                     sort: state.sort?.filter(({ id }) => id !== column.id)
                   })),
                   children: [
-                    /* @__PURE__ */ jsx17(X2, {}),
+                    /* @__PURE__ */ jsx14(X, {}),
                     " ",
                     store.config.labels.sortClear
                   ]
                 }) : null
               ]
             }) : null,
-            sortingEnabled && hidingEnabled ? /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}) : null,
-            hidingEnabled ? /* @__PURE__ */ jsxs9(DropdownMenuItem, {
+            sortingEnabled && hidingEnabled ? /* @__PURE__ */ jsx14(DropdownMenuSeparator, {}) : null,
+            hidingEnabled ? /* @__PURE__ */ jsxs8(DropdownMenuItem, {
               onClick: () => update((state) => ({
                 ...state,
                 columnVisibility: {
@@ -3101,7 +2893,7 @@ var ColumnHeaderMenu = ({
                 }
               })),
               children: [
-                /* @__PURE__ */ jsx17(EyeOff, {}),
+                /* @__PURE__ */ jsx14(EyeOff, {}),
                 " ",
                 store.config.labels.hideColumn
               ]
@@ -3123,12 +2915,12 @@ var DataTableHeader = ({
   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, {
+  return /* @__PURE__ */ jsx14(TableHeader, {
+    children: /* @__PURE__ */ jsxs8(TableRow, {
       children: [
-        selection ? /* @__PURE__ */ jsx17(TableHead, {
+        selection ? /* @__PURE__ */ jsx14(TableHead, {
           className: "w-10 pr-0",
-          children: /* @__PURE__ */ jsx17(Checkbox, {
+          children: /* @__PURE__ */ jsx14(Checkbox, {
             "aria-label": store.config.labels.selectAllRows,
             checked: allSelected,
             indeterminate: someSelected && !allSelected,
@@ -3142,27 +2934,30 @@ var DataTableHeader = ({
             }
           })
         }) : null,
-        draggable ? /* @__PURE__ */ jsx17(TableHead, {
+        draggable ? /* @__PURE__ */ jsx14(TableHead, {
           className: "w-10"
         }) : null,
         model.visibleColumns.map((column) => {
-          return /* @__PURE__ */ jsx17(TableHead, {
-            className: "relative h-12",
+          const direction = store.state.sort?.find(({ id }) => id === column.id)?.direction;
+          return /* @__PURE__ */ jsx14(TableHead, {
+            "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : undefined,
+            className: "relative h-12 p-0",
+            scope: "col",
             style: { width: column.width },
-            children: /* @__PURE__ */ jsxs9(ColumnIdContext.Provider, {
+            children: /* @__PURE__ */ jsxs8(ColumnIdContext.Provider, {
               value: column.id,
               children: [
-                /* @__PURE__ */ jsx17(ColumnHeaderMenu, {
+                /* @__PURE__ */ jsx14(ColumnHeaderMenu, {
                   tableAtom
                 }),
-                /* @__PURE__ */ jsx17(ResizeHandle, {
+                /* @__PURE__ */ jsx14(ResizeHandle, {
                   tableAtom
                 })
               ]
             })
           }, column.id);
         }),
-        hasRowActionMenu(store) ? /* @__PURE__ */ jsx17(TableHead, {
+        hasRowActionMenu(store) ? /* @__PURE__ */ jsx14(TableHead, {
           className: "w-10"
         }) : null
       ]
@@ -3178,28 +2973,28 @@ var DataTableBody = ({
   const rows = grouped ? model.sortedRows : model.pageRows;
   const colSpan = model.visibleColumns.length + (store.config.features.selection ? 1 : 0) + (hasRowActionMenu(store) ? 1 : 0) + (canDragRows(store) ? 1 : 0);
   if (grouped && rows.length && !store.config.status.error) {
-    return /* @__PURE__ */ jsx17(GroupedTable, {
+    return /* @__PURE__ */ jsx14(GroupedTable, {
       tableAtom
     });
   }
-  return /* @__PURE__ */ jsx17(TableBody, {
-    children: store.config.status.error || !rows.length && !store.config.status.loading ? /* @__PURE__ */ jsx17(TableRow, {
-      children: /* @__PURE__ */ jsx17(TableCell, {
+  return /* @__PURE__ */ jsx14(TableBody, {
+    children: store.config.status.error || !rows.length && !store.config.status.loading ? /* @__PURE__ */ jsx14(TableRow, {
+      children: /* @__PURE__ */ jsx14(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, {
+    }) : store.config.status.loading && !rows.length ? /* @__PURE__ */ jsx14(TableRow, {
+      children: /* @__PURE__ */ jsx14(TableCell, {
         className: "h-24 text-center",
         colSpan: Math.max(colSpan, 1),
-        children: /* @__PURE__ */ jsx17(Loading, {
+        children: /* @__PURE__ */ jsx14(Loading, {
           label: store.config.labels.loading
         })
       })
-    }) : rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
+    }) : rows.map((row) => /* @__PURE__ */ jsx14(RowIdContext.Provider, {
       value: row.id,
-      children: /* @__PURE__ */ jsx17(TableDataRow, {
+      children: /* @__PURE__ */ jsx14(TableDataRow, {
         tableAtom
       })
     }, row.id))
@@ -3222,7 +3017,7 @@ var GalleryCard = ({
   const selection = store.config.features.selection;
   const selectable = !!selection && (selection.isRowSelectable?.(row.data) ?? true);
   const draggable = canDragRows(store);
-  return /* @__PURE__ */ jsx17(Card, {
+  return /* @__PURE__ */ jsx14(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),
@@ -3233,23 +3028,23 @@ var GalleryCard = ({
       }
     },
     tabIndex: store.config.onRowClicked ? 0 : undefined,
-    children: /* @__PURE__ */ jsxs9(CardHeader, {
+    children: /* @__PURE__ */ jsxs8(CardHeader, {
       className: "pr-12",
       children: [
-        /* @__PURE__ */ jsxs9("div", {
+        /* @__PURE__ */ jsxs8("div", {
           className: "flex items-center gap-2",
           children: [
-            selection ? /* @__PURE__ */ jsx17(Checkbox, {
+            selection ? /* @__PURE__ */ jsx14(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, {
+            draggable ? /* @__PURE__ */ jsx14(DragHandle, {
               tableAtom
             }) : null,
-            tag ? /* @__PURE__ */ jsxs9(Badge, {
+            tag ? /* @__PURE__ */ jsxs8(Badge, {
               variant: "secondary",
               children: [
                 gallery.tagIcon,
@@ -3258,17 +3053,17 @@ var GalleryCard = ({
             }) : null
           ]
         }),
-        /* @__PURE__ */ jsx17(CardTitle, {
+        /* @__PURE__ */ jsx14(CardTitle, {
           children: name ? renderCell(row, name) : row.id
         }),
-        description ? /* @__PURE__ */ jsx17("div", {
+        description ? /* @__PURE__ */ jsx14("div", {
           className: "text-muted-foreground line-clamp-3 text-sm",
           children: renderCell(row, description)
         }) : null,
-        hasRowActionMenu(store) ? /* @__PURE__ */ jsx17("div", {
+        hasRowActionMenu(store) ? /* @__PURE__ */ jsx14("div", {
           className: "absolute top-4 right-4",
           onClick: (event) => event.stopPropagation(),
-          children: /* @__PURE__ */ jsx17(DataTableRowActionMenu, {
+          children: /* @__PURE__ */ jsx14(DataTableRowActionMenu, {
             tableAtom
           })
         }) : null
@@ -3284,31 +3079,31 @@ var DataTableGallery = ({
   const fields = getActiveGrouping(store);
   const rows = fields.length ? model.sortedRows : model.pageRows;
   if (store.config.status.error) {
-    return /* @__PURE__ */ jsx17("div", {
+    return /* @__PURE__ */ jsx14("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", {
+    return /* @__PURE__ */ jsx14("div", {
       className: "rounded-lg border border-dashed p-10 text-center",
-      children: /* @__PURE__ */ jsx17(Loading, {
+      children: /* @__PURE__ */ jsx14(Loading, {
         label: store.config.labels.loading
       })
     });
   }
   if (!rows.length) {
-    return /* @__PURE__ */ jsx17("div", {
+    return /* @__PURE__ */ jsx14("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", {
+    return /* @__PURE__ */ jsx14("div", {
       className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
-      children: rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
+      children: rows.map((row) => /* @__PURE__ */ jsx14(RowIdContext.Provider, {
         value: row.id,
-        children: /* @__PURE__ */ jsx17(GalleryCard, {
+        children: /* @__PURE__ */ jsx14(GalleryCard, {
           tableAtom
         })
       }, row.id))
@@ -3324,57 +3119,57 @@ var DataTableGallery = ({
         [section.key]: !collapsed
       }
     }));
-    return /* @__PURE__ */ jsxs9("section", {
+    return /* @__PURE__ */ jsxs8("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", {
+        /* @__PURE__ */ jsxs8("div", {
           className: "hover:bg-accent flex cursor-pointer items-center gap-2 rounded-lg border p-3 transition-colors",
           onClick: toggleCollapsed,
           children: [
-            /* @__PURE__ */ jsxs9("button", {
+            /* @__PURE__ */ jsxs8("button", {
               "aria-expanded": !collapsed,
               className: "flex flex-1 cursor-pointer items-center gap-2 text-left font-medium",
               type: "button",
               children: [
-                collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
+                collapsed ? /* @__PURE__ */ jsx14(ChevronRight2, {
                   className: "size-4"
-                }) : /* @__PURE__ */ jsx17(ChevronDown, {
+                }) : /* @__PURE__ */ jsx14(ChevronDown, {
                   className: "size-4"
                 }),
-                /* @__PURE__ */ jsx17("span", {
+                /* @__PURE__ */ jsx14("span", {
                   className: "flex-1",
                   children: section.field.renderGroupLabel?.(section.groupId, section.rows.map((row) => row.data)) ?? section.groupId
                 }),
-                /* @__PURE__ */ jsx17(Badge, {
+                /* @__PURE__ */ jsx14(Badge, {
                   variant: "secondary",
                   children: section.rows.length
                 })
               ]
             }),
-            /* @__PURE__ */ jsx17(GroupActions, {
+            /* @__PURE__ */ jsx14(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", {
+        !collapsed ? section.children.length ? renderSections(section.children) : section.rows.length ? /* @__PURE__ */ jsx14("div", {
           className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
-          children: section.rows.map((row) => /* @__PURE__ */ jsx17(RowIdContext.Provider, {
+          children: section.rows.map((row) => /* @__PURE__ */ jsx14(RowIdContext.Provider, {
             value: row.id,
-            children: /* @__PURE__ */ jsx17(GalleryCard, {
+            children: /* @__PURE__ */ jsx14(GalleryCard, {
               tableAtom
             })
           }, `${section.key}:${row.id}`))
-        }) : /* @__PURE__ */ jsx17("div", {
+        }) : /* @__PURE__ */ jsx14("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);
   });
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx14("div", {
     className: "space-y-4",
     children: renderSections(groupDataTableRows(rows, fields))
   });
@@ -3401,9 +3196,9 @@ var DataTablePagination = ({
     return null;
   const selected = model.rows.filter((row) => store.state.rowSelection[row.id]).length;
   const setPagination = (next) => changeState(setStore, (state) => ({ ...state, ...next }));
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx14("div", {
     className: "pt-4",
-    children: /* @__PURE__ */ jsx17(Pagination, {
+    children: /* @__PURE__ */ jsx14(Pagination, {
       messages: store.config.labels,
       onPageChange: (page) => setPagination({ page, pageSize: store.state.pageSize }),
       onPageSizeChange: (pageSize) => setPagination({ page: 0, pageSize }),
@@ -3421,7 +3216,7 @@ var HydratedDataTable = ({
   setPersistedUiState,
   ...props
 }) => {
-  const transientUiAtomRef = useRef2(null);
+  const transientUiAtomRef = useRef(null);
   if (!transientUiAtomRef.current) {
     const grouping = props.features?.grouping;
     transientUiAtomRef.current = Atom.make({
@@ -3431,12 +3226,12 @@ var HydratedDataTable = ({
   }
   const [transientUiState, setTransientUiState] = useAtom(transientUiAtomRef.current);
   const uiState = useMemo(() => ({ ...persistedUiState, ...transientUiState }), [persistedUiState, transientUiState]);
-  const setUiState = useCallback2((state) => {
+  const setUiState = useCallback((state) => {
     setPersistedUiState(persistedUiFromState(state));
     setTransientUiState(transientUiFromState(state));
   }, [setPersistedUiState, setTransientUiState]);
   const validatedConfig = resolveConfig(props, (state) => setUiState(state));
-  const atomRef = useRef2(null);
+  const atomRef = useRef(null);
   if (!atomRef.current) {
     const initial = {
       rowData: props.rowData,
@@ -3491,24 +3286,24 @@ var HydratedDataTable = ({
     setUiState,
     uiState
   ]);
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "w-full max-w-full min-w-0 rounded-md",
     "data-table-root": "",
     children: [
-      /* @__PURE__ */ jsx17(DataTableToolbar, {
+      /* @__PURE__ */ jsx14(DataTableToolbar, {
         tableAtom
       }),
-      /* @__PURE__ */ jsx17(DataTableContent, {
+      /* @__PURE__ */ jsx14(DataTableContent, {
         tableAtom
       }),
-      /* @__PURE__ */ jsx17(DataTablePagination, {
+      /* @__PURE__ */ jsx14(DataTablePagination, {
         tableAtom
       })
     ]
   });
 };
 var DataTable = (props) => {
-  const persistedUiAtomRef = useRef2(null);
+  const persistedUiAtomRef = useRef(null);
   if (!persistedUiAtomRef.current) {
     const pathname = globalThis.window?.location.pathname ?? "/";
     const columnIds = normalizeDataTableColumns(props.columnDefs).map(({ id }) => id).join(",");
@@ -3523,13 +3318,13 @@ var DataTable = (props) => {
   }
   const [persistedUiResult, setPersistedUiState] = useAtom(persistedUiAtomRef.current);
   if (!AsyncResult.isSuccess(persistedUiResult) || AsyncResult.isWaiting(persistedUiResult)) {
-    return /* @__PURE__ */ jsx17("div", {
+    return /* @__PURE__ */ jsx14("div", {
       "aria-busy": "true",
       className: "invisible w-full max-w-full min-w-0 rounded-md",
       "data-table-root": ""
     });
   }
-  return /* @__PURE__ */ jsx17(HydratedDataTable, {
+  return /* @__PURE__ */ jsx14(HydratedDataTable, {
     ...props,
     persistedUiState: persistedUiResult.value,
     setPersistedUiState
@@ -3540,185 +3335,434 @@ var DataTableContent = ({
 }) => {
   const [store] = useTableAtom(tableAtom);
   if (store.config.features.gallery && store.state.view === "gallery") {
-    return /* @__PURE__ */ jsx17(DataTableGallery, {
+    return /* @__PURE__ */ jsx14(DataTableGallery, {
       tableAtom
     });
   }
   const model = deriveModel(store);
   const width = getDataTableWidth(model.visibleColumns, (store.config.features.selection ? 1 : 0) + (hasRowActionMenu(store) ? 1 : 0) + (canDragRows(store) ? 1 : 0));
-  return /* @__PURE__ */ jsxs9(ScrollArea, {
+  return /* @__PURE__ */ jsxs8(ScrollArea, {
     className: "max-w-full min-w-0",
     children: [
-      /* @__PURE__ */ jsxs9(Table, {
+      /* @__PURE__ */ jsxs8(Table, {
         className: "table-fixed",
         style: { width: `max(100%, ${width}px)` },
         children: [
-          /* @__PURE__ */ jsx17(DataTableHeader, {
+          /* @__PURE__ */ jsx14(DataTableHeader, {
             tableAtom
           }),
-          /* @__PURE__ */ jsx17(DataTableBody, {
+          /* @__PURE__ */ jsx14(DataTableBody, {
             tableAtom
           })
         ]
       }),
-      /* @__PURE__ */ jsx17(ScrollBar, {
+      /* @__PURE__ */ jsx14(ScrollBar, {
         orientation: "horizontal"
       })
     ]
   });
 };
-var DataTableRelationshipCell = ({
+var DataTableListCell = (props) => {
+  if (props.options && (props.onAdd || props.onRemove)) {
+    return /* @__PURE__ */ jsx14(EditableDataTableListCell, {
+      ...props
+    });
+  }
+  const { actionsLabel, itemActions, ...summaryProps } = props;
+  const totalCount = props.totalCount ?? props.items.length;
+  const overflow = totalCount > Math.min(props.items.length, props.visibleCount ?? 3);
+  if (!itemActions?.length && !overflow) {
+    return /* @__PURE__ */ jsx14(DataTableListSummary, {
+      ...summaryProps
+    });
+  }
+  const menuLabel = actionsLabel ?? (itemActions?.length ? dataTableMessages().actions : dataTableMessages().listDetails);
+  return /* @__PURE__ */ jsx14("div", {
+    className: "grid min-h-16 in-[[data-slot=table-cell]]:absolute in-[[data-slot=table-cell]]:inset-0 in-[[data-slot=table-cell]]:min-h-0",
+    "data-slot": "data-table-list-cell",
+    onClick: (event) => event.stopPropagation(),
+    onPointerDown: (event) => event.stopPropagation(),
+    children: /* @__PURE__ */ jsx14(DataTableListMenu, {
+      actions: itemActions ?? [],
+      display: props.display,
+      force: overflow,
+      label: menuLabel,
+      items: props.items,
+      trigger: /* @__PURE__ */ jsxs8(Button, {
+        "aria-label": menuLabel,
+        className: "h-full w-full min-w-0 justify-between rounded-none px-2 focus-visible:ring-inset",
+        variant: "ghost",
+        children: [
+          /* @__PURE__ */ jsx14(DataTableListSummaryContent, {
+            ...summaryProps,
+            showMenu: false
+          }),
+          /* @__PURE__ */ jsx14(ChevronDown, {})
+        ]
+      })
+    })
+  });
+};
+var EditableDataTableListCell = ({
   emptyLabel,
   manageLabel,
   onAdd,
   onRemove,
   options,
-  value
+  items,
+  display,
+  visibleCount,
+  totalCount,
+  actionsLabel,
+  itemActions
 }) => {
-  const [selected, setSelected] = useState([...value]);
-  useLayoutEffect(() => setSelected([...value]), [value]);
+  const [selected, setSelected] = useState([...items]);
+  useLayoutEffect(() => setSelected([...items]), [items]);
   const selectedValues = new Set(selected.map((item) => item.value));
-  return /* @__PURE__ */ jsx17("div", {
-    "data-slot": "data-table-relationship-cell",
-    className: "h-full in-[[data-slot=table-cell]]:absolute in-[[data-slot=table-cell]]:inset-0",
+  const available = options.filter((item) => !selectedValues.has(item.value));
+  const canAdd = !!onAdd && available.length > 0;
+  const selectedTotal = totalCount === undefined ? selected.length : totalCount + selected.length - items.length;
+  const labels2 = dataTableMessages();
+  const actions = [
+    ...itemActions ?? [],
+    ...onRemove ? [
+      {
+        id: "data-table-list-remove",
+        closeOnClick: false,
+        name: labels2.removeItem,
+        icon: /* @__PURE__ */ jsx14(Trash2, {}),
+        variant: "destructive",
+        onClick: (item) => {
+          if (item.value === undefined)
+            return;
+          onRemove(item.value);
+          setSelected((current) => current.filter((candidate) => candidate.value !== item.value));
+        }
+      }
+    ] : []
+  ];
+  return /* @__PURE__ */ jsx14("div", {
+    "data-slot": "data-table-list-cell",
+    className: "grid min-h-16 in-[[data-slot=table-cell]]:absolute in-[[data-slot=table-cell]]:inset-0 in-[[data-slot=table-cell]]:min-h-0",
     onClick: (event) => event.stopPropagation(),
     onPointerDown: (event) => event.stopPropagation(),
-    children: /* @__PURE__ */ jsx17(VirtualizedCombobox, {
-      ariaLabel: manageLabel,
-      emptyLabel,
-      items: [...options].sort((left, right) => Number(selectedValues.has(right.value)) - Number(selectedValues.has(left.value))),
-      messages: { search: manageLabel },
-      multiple: true,
-      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__ */ jsxs9(Button, {
-        className: "h-full min-h-16 w-full justify-between rounded-none",
+    children: /* @__PURE__ */ jsx14(DataTableListMenu, {
+      actions,
+      addEmptyLabel: emptyLabel,
+      addLabel: labels2.addItem,
+      addOptions: canAdd ? available : undefined,
+      addSearchLabel: manageLabel,
+      display,
+      force: true,
+      items: selected,
+      label: actionsLabel ?? manageLabel,
+      onAdd: canAdd ? (item) => {
+        onAdd(item.value);
+        setSelected((current) => [...current, item]);
+      } : undefined,
+      trigger: /* @__PURE__ */ jsxs8(Button, {
+        "aria-label": manageLabel,
+        className: "h-full w-full min-w-0 justify-between rounded-none px-2 focus-visible:ring-inset",
         variant: "ghost",
         children: [
-          /* @__PURE__ */ jsx17(DataTableListSummary, {
+          /* @__PURE__ */ jsx14(DataTableListSummaryContent, {
             emptyLabel,
-            expandable: false,
             items: selected,
-            variant: selected.some((item) => item.icon) ? "icon" : "text"
+            display,
+            showMenu: false,
+            visibleCount,
+            totalCount: selectedTotal
           }),
-          /* @__PURE__ */ jsx17(ChevronDown, {})
+          /* @__PURE__ */ jsx14(ChevronDown, {})
         ]
-      }),
-      value: selected
+      })
     })
   });
 };
-var DataTableListSummary = ({
+var DataTableListMenu = ({
+  actions,
+  addEmptyLabel,
+  addLabel,
+  addOptions,
+  addSearchLabel,
+  className,
+  display = "list",
+  force = false,
+  items,
+  label,
+  onAdd,
+  trigger
+}) => {
+  const entries = items.map((item) => {
+    const normalized = Schema.is(Schema.String)(item) ? { label: item } : item;
+    const visibleActions = actions.filter((action) => action.visible?.(normalized) ?? true);
+    return { item: normalized, visibleActions };
+  });
+  const hasActions = entries.some(({ visibleActions }) => visibleActions.length);
+  if (!force && !hasActions && !onAdd)
+    return null;
+  const resolvedLabel = label ?? (hasActions ? dataTableMessages().actions : dataTableMessages().listDetails);
+  return /* @__PURE__ */ jsxs8(DropdownMenu, {
+    children: [
+      /* @__PURE__ */ jsx14(DropdownMenuTrigger, {
+        onClick: (event) => event.stopPropagation(),
+        onPointerDown: (event) => event.stopPropagation(),
+        render: trigger ?? /* @__PURE__ */ jsx14(Button, {
+          "aria-label": resolvedLabel,
+          className: cn("size-8 shrink-0", className),
+          size: "icon",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx14(MoreHorizontal, {})
+        })
+      }),
+      /* @__PURE__ */ jsx14(DropdownMenuContent, {
+        align: "end",
+        className: "max-h-72 w-72",
+        onClick: (event) => event.stopPropagation(),
+        onPointerDown: (event) => event.stopPropagation(),
+        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
+          children: [
+            /* @__PURE__ */ jsx14(DropdownMenuLabel, {
+              children: resolvedLabel
+            }),
+            /* @__PURE__ */ jsx14(DropdownMenuSeparator, {}),
+            entries.map(({ item, visibleActions }, index) => visibleActions.length ? /* @__PURE__ */ jsxs8(DropdownMenuSub, {
+              children: [
+                /* @__PURE__ */ jsx14(DropdownMenuSubTrigger, {
+                  children: /* @__PURE__ */ jsx14(DataTableListEntry, {
+                    item,
+                    appearance: display === "icon" ? "detail" : "list"
+                  })
+                }),
+                /* @__PURE__ */ jsx14(DropdownMenuSubContent, {
+                  className: "w-max",
+                  children: visibleActions.map((action) => /* @__PURE__ */ jsxs8(DropdownMenuItem, {
+                    closeOnClick: action.closeOnClick,
+                    disabled: action.disabled?.(item),
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      action.onClick(item);
+                    },
+                    variant: action.variant,
+                    children: [
+                      action.icon,
+                      action.name
+                    ]
+                  }, action.id ?? action.name))
+                })
+              ]
+            }, item.value ?? `${item.label}-${index}`) : /* @__PURE__ */ jsx14("div", {
+              className: "px-2 py-1.5",
+              children: /* @__PURE__ */ jsx14(DataTableListEntry, {
+                item,
+                appearance: display === "icon" ? "detail" : "list"
+              })
+            }, item.value ?? `${item.label}-${index}`)),
+            onAdd && addOptions?.length ? /* @__PURE__ */ jsxs8(Fragment, {
+              children: [
+                entries.length ? /* @__PURE__ */ jsx14(DropdownMenuSeparator, {}) : null,
+                /* @__PURE__ */ jsx14(DataTableListAddMenu, {
+                  emptyLabel: addEmptyLabel,
+                  label: addLabel ?? dataTableMessages().addItem,
+                  onAdd,
+                  options: addOptions,
+                  searchLabel: addSearchLabel ?? dataTableMessages().filter,
+                  display
+                })
+              ]
+            }) : null
+          ]
+        })
+      })
+    ]
+  });
+};
+var DataTableListAddMenu = ({
+  emptyLabel,
+  display,
+  label,
+  onAdd,
+  options,
+  searchLabel
+}) => {
+  const [search, setSearch] = useState("");
+  const focusSearch = useCallback((input) => {
+    input?.focus({ preventScroll: true });
+  }, []);
+  const locale = getLocale();
+  const normalizedSearch = search.trim().toLocaleLowerCase(locale);
+  const filtered = normalizedSearch ? options.filter((item) => item.label.toLocaleLowerCase(locale).includes(normalizedSearch)) : options;
+  return /* @__PURE__ */ jsxs8(DropdownMenuSub, {
+    onOpenChange: (open) => {
+      if (!open)
+        setSearch("");
+    },
+    children: [
+      /* @__PURE__ */ jsxs8(DropdownMenuSubTrigger, {
+        children: [
+          /* @__PURE__ */ jsx14(Plus, {}),
+          label
+        ]
+      }),
+      /* @__PURE__ */ jsxs8(DropdownMenuSubContent, {
+        className: "w-64",
+        children: [
+          /* @__PURE__ */ jsxs8("div", {
+            className: "relative p-1",
+            children: [
+              /* @__PURE__ */ jsx14(Search, {
+                className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
+              }),
+              /* @__PURE__ */ jsx14(Input, {
+                "aria-label": searchLabel,
+                className: "h-8 pl-8",
+                onChange: (event) => setSearch(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key !== "Escape")
+                    event.stopPropagation();
+                },
+                placeholder: dataTableMessages().filter,
+                ref: focusSearch,
+                value: search
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx14(DropdownMenuSeparator, {}),
+          filtered.length ? filtered.map((item) => /* @__PURE__ */ jsx14(DropdownMenuItem, {
+            closeOnClick: false,
+            onClick: () => onAdd(item),
+            children: /* @__PURE__ */ jsx14(DataTableListEntry, {
+              item,
+              appearance: display === "icon" ? "detail" : "list"
+            })
+          }, item.value)) : /* @__PURE__ */ jsx14("div", {
+            className: "text-muted-foreground px-2 py-1.5 text-sm",
+            children: emptyLabel
+          })
+        ]
+      })
+    ]
+  });
+};
+var DataTableListSummaryContent = ({
   emptyLabel,
-  expandable = true,
   items,
-  overflowLabel,
   totalCount = items.length,
-  variant = "text",
+  display = "list",
+  showMenu,
   visibleCount = 3
 }) => {
-  const labels2 = dataTableMessages();
   const normalized = items.map((item) => Schema.is(Schema.String)(item) ? { label: item } : item);
   if (!normalized.length)
-    return /* @__PURE__ */ jsx17("span", {
+    return /* @__PURE__ */ jsx14("span", {
       className: "text-muted-foreground",
       children: emptyLabel
     });
-  const visible = normalized.slice(0, visibleCount);
+  const visible = normalized.slice(0, Math.max(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__ */ jsxs9("span", {
+  if (display === "icon") {
+    return /* @__PURE__ */ jsx14(TooltipProvider, {
+      children: /* @__PURE__ */ jsxs8("span", {
         className: "flex items-center",
         children: [
-          visible.map((item) => /* @__PURE__ */ jsxs9(Tooltip, {
-            children: [
-              /* @__PURE__ */ jsx17(TooltipTrigger, {
-                render: /* @__PURE__ */ jsx17("span", {
-                  "aria-label": item.label,
-                  className: "bg-muted -ml-1 flex size-8 items-center justify-center rounded-full",
-                  children: item.icon ?? item.label.slice(0, 2).toUpperCase()
-                })
-              }),
-              /* @__PURE__ */ jsx17(TooltipContent, {
-                children: item.label
-              })
-            ]
-          }, item.value ?? item.label)),
-          remaining && expandable ? /* @__PURE__ */ jsxs9(Popover, {
-            children: [
-              /* @__PURE__ */ jsx17(PopoverTrigger, {
-                render: /* @__PURE__ */ jsxs9("button", {
-                  "aria-label": labels2.listOthers(remaining),
-                  className: "bg-muted -ml-1 flex size-8 items-center justify-center rounded-full",
-                  type: "button",
-                  children: [
-                    "+",
-                    remaining
-                  ]
-                })
-              }),
-              details
-            ]
-          }) : remaining ? /* @__PURE__ */ jsxs9("span", {
-            className: "bg-muted -ml-1 flex size-8 items-center justify-center rounded-full",
+          visible.map((item, index) => /* @__PURE__ */ jsx14(DataTableListEntry, {
+            item,
+            appearance: "icon"
+          }, item.value ?? `${item.label}-${index}`)),
+          remaining ? /* @__PURE__ */ jsxs8("span", {
+            className: "bg-secondary text-secondary-foreground -ml-1 flex size-8 items-center justify-center rounded-full",
             children: [
               "+",
               remaining
             ]
+          }) : null,
+          remaining && showMenu ? /* @__PURE__ */ jsx14(DataTableListMenu, {
+            actions: [],
+            display,
+            force: true,
+            items: normalized
           }) : null
         ]
       })
     });
   }
-  const summary = /* @__PURE__ */ jsxs9(Fragment, {
+  return /* @__PURE__ */ jsxs8("span", {
+    className: "inline-flex min-w-0 items-center gap-2 text-sm",
     children: [
-      visible.map((item) => item.label).join(", "),
-      remaining ? ` ${overflowLabel?.(remaining) ?? labels2.listOthers(remaining)}` : ""
+      /* @__PURE__ */ jsxs8("span", {
+        className: "truncate",
+        children: [
+          visible.map((item) => item.label).join(", "),
+          remaining ? ` +${remaining}` : ""
+        ]
+      }),
+      remaining && showMenu ? /* @__PURE__ */ jsx14(DataTableListMenu, {
+        actions: [],
+        display,
+        force: true,
+        items: normalized
+      }) : null
     ]
   });
-  return remaining && expandable ? /* @__PURE__ */ jsxs9(Popover, {
+};
+var DataTableListSummary = (props) => /* @__PURE__ */ jsx14(DataTableListSummaryContent, {
+  ...props,
+  showMenu: true
+});
+var DataTableListEntry = ({
+  item,
+  appearance
+}) => {
+  const icon = /* @__PURE__ */ jsx14("span", {
+    "aria-hidden": "true",
+    className: "bg-secondary text-secondary-foreground flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full",
+    children: item.imageSrc ? /* @__PURE__ */ jsx14("img", {
+      alt: "",
+      src: item.imageSrc,
+      className: "size-full object-cover"
+    }) : item.icon ?? item.label.slice(0, 2).toUpperCase()
+  });
+  if (appearance === "list") {
+    return /* @__PURE__ */ jsx14("span", {
+      className: "truncate",
+      children: item.label
+    });
+  }
+  return appearance === "icon" ? /* @__PURE__ */ jsxs8(Tooltip, {
     children: [
-      /* @__PURE__ */ jsx17(PopoverTrigger, {
-        render: /* @__PURE__ */ jsx17("button", {
-          className: "text-left text-sm",
-          type: "button",
-          children: summary
-        })
+      /* @__PURE__ */ jsx14(TooltipTrigger, {
+        render: /* @__PURE__ */ jsx14("span", {
+          className: "-ml-1 inline-flex rounded-full",
+          "aria-label": item.label
+        }),
+        children: icon
       }),
-      details
+      /* @__PURE__ */ jsx14(TooltipContent, {
+        children: item.label
+      })
+    ]
+  }) : /* @__PURE__ */ jsxs8("span", {
+    className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+    children: [
+      icon,
+      /* @__PURE__ */ jsx14("span", {
+        className: "truncate",
+        children: item.label
+      })
     ]
-  }) : /* @__PURE__ */ jsx17("span", {
-    className: "text-sm",
-    children: summary
   });
 };
 export {
   DataTable,
+  DataTableListCell,
   DataTableListSummary,
-  DataTableRelationshipCell,
   DataTableRowActions,
   buildDataTableRows,
   dataTableMessages,
   downloadCsv,
   downloadJson,
   filterDataTableRows,
+  getDataTableExportValue,
   getDataTableSelectableRows,
   getDataTableWidth,
   groupDataTableRows,