@exxatdesignux/ui 0.2.19 → 0.3.0

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

@@ -0,0 +1,3085 @@
+"use client";
+import * as React9 from 'react';
+import { useTheme } from 'next-themes';
+import { createPortal } from 'react-dom';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import { Slot, Checkbox as Checkbox$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { useMaskInput } from 'use-mask-input';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/raf-throttle.ts
+function rafThrottle(fn) {
+  let rafId = 0;
+  let lastArgs = null;
+  const scheduled = ((...args) => {
+    lastArgs = args;
+    if (rafId !== 0) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      const a = lastArgs;
+      lastArgs = null;
+      if (a) fn(...a);
+    });
+  });
+  scheduled.cancel = () => {
+    if (rafId !== 0) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+    lastArgs = null;
+  };
+  return scheduled;
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
+        xs: "h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5",
+        icon: "size-9",
+        "icon-xs": "size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React9.forwardRef(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+var Input = React9.forwardRef(
+  function Input2({ className, type, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+function Kbd({
+  className,
+  variant = "tile",
+  "aria-hidden": ariaHidden,
+  ...props
+}) {
+  const hidden = ariaHidden ?? (variant === "bare" ? true : void 0);
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      "data-slot": "kbd",
+      "data-variant": variant,
+      "aria-hidden": hidden,
+      className: cn(
+        "pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 px-1 font-sans text-xs font-medium",
+        variant === "tile" && "bg-muted text-muted-foreground rounded-sm border",
+        variant === "bare" && "text-current/70 px-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function KbdGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "kbd-group",
+      className: cn("inline-flex items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      suppressHydrationWarning: true,
+      className: cn("cursor-pointer", className),
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+function Tip({ label, children, side = "top" }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, className: "flex flex-wrap items-center gap-1.5", children: label })
+  ] });
+}
+function useModKeyLabel() {
+  const [mod, setMod] = React9.useState("\u2318");
+  React9.useEffect(() => {
+    setMod(
+      typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/i.test(navigator.platform) ? "\u2318" : "Ctrl"
+    );
+  }, []);
+  return mod;
+}
+
+// src/lib/editable-target.ts
+function isEditableTarget(target) {
+  const el = target;
+  if (!el) return false;
+  if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)
+    return true;
+  return el.getAttribute?.("contenteditable") === "true";
+}
+var checkboxVariants = cva(
+  [
+    "peer relative box-border flex shrink-0 items-center justify-center self-center rounded-[4px] border border-input",
+    "outline-none transition-[color,box-shadow,transform,background-color,border-color] duration-150",
+    "motion-reduce:transition-none",
+    "group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2",
+    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary",
+    "dark:bg-input/15 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary",
+          "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:data-[state=indeterminate]:bg-primary dark:data-[state=indeterminate]:text-primary-foreground"
+        ].join(" "),
+        outline: [
+          "bg-background",
+          "data-[state=checked]:border-primary data-[state=checked]:bg-background data-[state=checked]:text-primary data-[state=checked]:ring-2 data-[state=checked]:ring-primary/25",
+          "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-background data-[state=indeterminate]:text-primary data-[state=indeterminate]:ring-2 data-[state=indeterminate]:ring-primary/25"
+        ].join(" "),
+        secondary: [
+          "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground",
+          "data-[state=indeterminate]:border-secondary data-[state=indeterminate]:bg-secondary data-[state=indeterminate]:text-secondary-foreground"
+        ].join(" "),
+        success: [
+          "data-[state=checked]:border-chart-2 data-[state=checked]:bg-chart-2 data-[state=checked]:text-primary-foreground",
+          "data-[state=indeterminate]:border-chart-2 data-[state=indeterminate]:bg-chart-2 data-[state=indeterminate]:text-primary-foreground"
+        ].join(" "),
+        destructive: [
+          "data-[state=checked]:border-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground",
+          "data-[state=indeterminate]:border-destructive data-[state=indeterminate]:bg-destructive data-[state=indeterminate]:text-destructive-foreground"
+        ].join(" "),
+        warning: [
+          "data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500 data-[state=checked]:text-amber-950",
+          "data-[state=indeterminate]:border-amber-500 data-[state=indeterminate]:bg-amber-500 data-[state=indeterminate]:text-amber-950"
+        ].join(" "),
+        muted: [
+          "data-[state=checked]:border-muted-foreground/50 data-[state=checked]:bg-muted data-[state=checked]:text-foreground",
+          "data-[state=indeterminate]:border-muted-foreground/50 data-[state=indeterminate]:bg-muted data-[state=indeterminate]:text-foreground"
+        ].join(" ")
+      },
+      size: {
+        sm: "size-3.5 max-h-3.5 max-w-3.5 min-h-3.5 min-w-3.5 rounded-[3px] [&_[data-slot=checkbox-indicator]_i]:text-[10px]",
+        default: "size-4 max-h-4 max-w-4 min-h-4 min-w-4 [&_[data-slot=checkbox-indicator]_i]:text-xs",
+        lg: "size-5 max-h-5 max-w-5 min-h-5 min-w-5 rounded-[5px] [&_[data-slot=checkbox-indicator]_i]:text-sm"
+      },
+      motion: {
+        none: "",
+        pop: [
+          "motion-safe:active:scale-95",
+          "data-[state=checked]:motion-safe:scale-[1.04] data-[state=indeterminate]:motion-safe:scale-[1.04]"
+        ].join(" "),
+        glow: [
+          "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35",
+          "data-[state=indeterminate]:shadow-[0_0_0_3px] data-[state=indeterminate]:shadow-primary/35"
+        ].join(" "),
+        "pop-glow": [
+          "motion-safe:active:scale-95",
+          "data-[state=checked]:motion-safe:scale-[1.04] data-[state=indeterminate]:motion-safe:scale-[1.04]",
+          "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35",
+          "data-[state=indeterminate]:shadow-[0_0_0_3px] data-[state=indeterminate]:shadow-primary/35"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      motion: "none"
+    }
+  }
+);
+var checkboxIndicatorVariants = cva("grid place-content-center text-current", {
+  variants: {
+    motion: {
+      none: "transition-none",
+      pop: "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150",
+      glow: "",
+      "pop-glow": "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150"
+    }
+  },
+  defaultVariants: {
+    motion: "none"
+  }
+});
+var Checkbox = React9.forwardRef(
+  function Checkbox2({ className, variant, size, motion, checked, ...props }, ref) {
+    const m = motion ?? "none";
+    return /* @__PURE__ */ jsx(
+      Checkbox$1.Root,
+      {
+        ref,
+        "data-slot": "checkbox",
+        "data-variant": variant ?? "default",
+        "data-motion": m,
+        checked,
+        className: cn(checkboxVariants({ variant, size, motion: m }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          Checkbox$1.Indicator,
+          {
+            "data-slot": "checkbox-indicator",
+            className: checkboxIndicatorVariants({ motion: m }),
+            children: checked === "indeterminate" ? /* @__PURE__ */ jsx("i", { className: "fa-solid fa-minus text-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("i", { className: "fa-solid fa-check text-current", "aria-hidden": "true" })
+          }
+        )
+      }
+    );
+  }
+);
+
+// src/lib/dropdown-menu-surface.ts
+var DROPDOWN_MENU_CONTENT_SURFACE_CLASS = "min-w-52 w-max max-w-[min(24rem,calc(100vw-2rem))]";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      suppressHydrationWarning: true,
+      className: cn("cursor-pointer", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenu$1.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      align,
+      className: cn(
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden 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",
+        DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  shortcut,
+  children,
+  asChild,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      asChild,
+      className: cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        shortcut ? /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: shortcut }) : null
+      ] })
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:ps-7",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { ...props });
+}
+function PopoverTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { className: cn("cursor-pointer", className), ...props });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Anchor, { ...props });
+}
+function PopoverContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 rounded-lg border border-border bg-popover shadow-md outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/lib/table-properties-types.ts
+var OPERATOR_LABELS = {
+  is: "is",
+  is_not: "is not",
+  contains: "contains",
+  not_contains: "does not contain"
+};
+
+// src/lib/conditional-rule-match.ts
+function rowValueForRule(row, rule, columns) {
+  const col = columns?.find((c) => c.key === rule.fieldKey);
+  const dataKey = col?.sortKey ?? rule.fieldKey;
+  return String(row[dataKey] ?? "");
+}
+function ruleHasActiveValues(rule, columns) {
+  if (rule.values.length === 0) return false;
+  const col = columns?.find((c) => c.key === rule.fieldKey);
+  if (col?.filter?.type === "text")
+    return (rule.values[0] ?? "").trim().length > 0;
+  return true;
+}
+function conditionalTextMatches(cellVal, needle, op, textMask) {
+  const v = cellVal.trim();
+  const n = needle.trim();
+  if (!n) return op === "not_contains";
+  if (textMask === "phone" || textMask === "zip") {
+    const nd = n.replace(/\D/g, "");
+    const hay = v.replace(/\D/g, "");
+    if (!nd) return op === "not_contains";
+    const hit2 = hay.includes(nd);
+    return op === "contains" ? hit2 : !hit2;
+  }
+  const hit = v.toLowerCase().includes(n.toLowerCase());
+  return op === "contains" ? hit : !hit;
+}
+function conditionalRuleMatchesRow(row, rule, columns) {
+  if (!ruleHasActiveValues(rule, columns)) return false;
+  const v = rowValueForRule(row, rule, columns).trim();
+  const col = columns?.find((c) => c.key === rule.fieldKey);
+  const textMask = col?.filter?.type === "text" ? col.filter.textMask : void 0;
+  switch (rule.operator) {
+    case "is":
+      return rule.values.includes(v);
+    case "is_not":
+      return !rule.values.includes(v);
+    case "contains":
+      return rule.values.some(
+        (val) => conditionalTextMatches(v, val, "contains", textMask)
+      );
+    case "not_contains":
+      return !rule.values.some(
+        (val) => conditionalTextMatches(v, val, "contains", textMask)
+      );
+    default:
+      return false;
+  }
+}
+function getConditionalCellBackground(row, colKey, rules, columns) {
+  if (!rules?.length) return void 0;
+  const rule = rules.find((r) => r.fieldKey === colKey);
+  if (!rule || !conditionalRuleMatchesRow(row, rule, columns)) return void 0;
+  return rule.bgColor;
+}
+
+// src/lib/date-filter.ts
+function formatDateFromDate(raw) {
+  if (!raw || Number.isNaN(raw.getTime())) return "\u2014";
+  const m = String(raw.getMonth() + 1).padStart(2, "0");
+  const day = String(raw.getDate()).padStart(2, "0");
+  const y = raw.getFullYear();
+  return `${m}/${day}/${y}`;
+}
+function parseRowDateToYmd(raw) {
+  const t = raw.trim();
+  if (!t || t === "\u2014" || t === "-") return null;
+  const d = new Date(t);
+  if (Number.isNaN(d.getTime())) return null;
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function formatYmdForDisplay(ymd) {
+  const d = ymdToLocalDate(ymd);
+  if (!d) return ymd;
+  return formatDateFromDate(d);
+}
+function ymdToLocalDate(ymd) {
+  if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return void 0;
+  const [y, m, d] = ymd.split("-").map(Number);
+  return new Date(y, m - 1, d, 12, 0, 0, 0);
+}
+function localDateToYmd(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pe-1 ps-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx(
+              ChevronRightIcon,
+              {
+                className: cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React9.useRef(null);
+  React9.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FilterDateCalendar({
+  valueYmd,
+  onChangeYmd,
+  label
+}) {
+  const [timeZone, setTimeZone] = React9.useState();
+  React9.useEffect(() => {
+    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-lg border border-border overflow-hidden",
+      role: "group",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "single",
+          selected: ymdToLocalDate(valueYmd),
+          onSelect: (d) => onChangeYmd(d ? localDateToYmd(d) : void 0),
+          captionLayout: "dropdown",
+          timeZone,
+          className: "rounded-lg border-0"
+        }
+      )
+    }
+  );
+}
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 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-disabled:bg-input/80 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]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = cva(
+  "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 ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem]",
+        "inline-end": "order-last pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-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"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+
+// src/lib/compose-refs.ts
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) continue;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+var exxatInputMaskDefaults = {
+  placeholder: "_",
+  showMaskOnHover: false
+};
+var exxatMaskPatterns = {
+  /** US NANP 10-digit display */
+  phoneUS: "(999) 999-9999",
+  /** US ZIP or ZIP+4 */
+  zipUS: "99999[-9999]",
+  /** Calendar-style date (validate separately). */
+  dateMDY: "99/99/9999"};
+var MaskedInput = React9.forwardRef(function MaskedInput2({ mask, maskOptions, className, type = "text", ...props }, ref) {
+  const maskRef = useMaskInput({
+    mask,
+    options: { ...exxatInputMaskDefaults, ...maskOptions }
+  });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: composeRefs(ref, maskRef),
+      type,
+      className: cn(className),
+      ...props
+    }
+  );
+});
+var DATE_PICKER_ICON_CLASS = "fa-light fa-calendar";
+function parseMdyToLocalDate(raw) {
+  const match = raw.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  if (!match) return void 0;
+  const month = Number(match[1]);
+  const day = Number(match[2]);
+  const year = Number(match[3]);
+  if (month < 1 || month > 12 || day < 1 || day > 31) return void 0;
+  const date = new Date(year, month - 1, day, 12, 0, 0, 0);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) return void 0;
+  return date;
+}
+function formatLocalDateToMdy(date) {
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const year = String(date.getFullYear());
+  return `${month}/${day}/${year}`;
+}
+function DateTextInputField({
+  value,
+  onValueChange,
+  "aria-label": ariaLabel,
+  id,
+  placeholder = "MM/DD/YYYY",
+  className,
+  inputClassName,
+  autoFocus,
+  disabled,
+  fromYear = 2020,
+  toYear = 2032,
+  iconButtonVariant = "ghost",
+  popoverAlign = "end",
+  popoverClassName
+}) {
+  return /* @__PURE__ */ jsxs(InputGroup, { className, children: [
+    /* @__PURE__ */ jsx(
+      MaskedInput,
+      {
+        "data-slot": "input-group-control",
+        id,
+        mask: exxatMaskPatterns.dateMDY,
+        "aria-label": ariaLabel,
+        placeholder,
+        value,
+        onChange: (event) => onValueChange(event.target.value),
+        className: cn(
+          "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+          inputClassName
+        ),
+        autoFocus,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        InputGroupButton,
+        {
+          type: "button",
+          variant: iconButtonVariant,
+          size: "icon-xs",
+          disabled,
+          "aria-label": `${ariaLabel} pick date`,
+          children: /* @__PURE__ */ jsx("i", { className: DATE_PICKER_ICON_CLASS, "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: cn("z-[80] w-auto p-0", popoverClassName),
+          align: popoverAlign,
+          sideOffset: 6,
+          children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "single",
+              selected: parseMdyToLocalDate(value),
+              onSelect: (next) => onValueChange(next ? formatLocalDateToMdy(next) : ""),
+              initialFocus: true,
+              fromYear,
+              toYear,
+              captionLayout: "dropdown"
+            }
+          )
+        }
+      )
+    ] }) })
+  ] });
+}
+var MASK_BY_KIND = {
+  phone: exxatMaskPatterns.phoneUS,
+  zip: exxatMaskPatterns.zipUS,
+  dateMDY: exxatMaskPatterns.dateMDY
+};
+function FilterTextValueInput({
+  id,
+  mask,
+  value,
+  onValueChange,
+  "aria-label": ariaLabel,
+  placeholder,
+  className,
+  autoFocus
+}) {
+  if (mask === "dateMDY") {
+    return /* @__PURE__ */ jsx(
+      DateTextInputField,
+      {
+        id,
+        value,
+        onValueChange,
+        "aria-label": ariaLabel,
+        placeholder,
+        inputClassName: className,
+        autoFocus,
+        iconButtonVariant: "ghost",
+        popoverAlign: "end"
+      }
+    );
+  }
+  if (mask) {
+    return /* @__PURE__ */ jsx(
+      MaskedInput,
+      {
+        id,
+        mask: MASK_BY_KIND[mask],
+        "aria-label": ariaLabel,
+        placeholder,
+        value,
+        onChange: (e) => onValueChange(e.target.value),
+        className,
+        autoFocus
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      type: "text",
+      "aria-label": ariaLabel,
+      placeholder,
+      value,
+      onChange: (e) => onValueChange(e.target.value),
+      className,
+      autoFocus
+    }
+  );
+}
+var _filterId = 0;
+function nextFilterId() {
+  return `f-${++_filterId}`;
+}
+var REFLOW_VIEWPORT_MQ = "(max-height: 640px)";
+function subscribeReflowViewport(callback) {
+  if (typeof window === "undefined") return () => {
+  };
+  const mql = window.matchMedia(REFLOW_VIEWPORT_MQ);
+  mql.addEventListener("change", callback);
+  return () => mql.removeEventListener("change", callback);
+}
+function getReflowViewportSnapshot() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia(REFLOW_VIEWPORT_MQ).matches;
+}
+function getServerReflowViewportSnapshot() {
+  return false;
+}
+function digitsOnly(s) {
+  return s.replace(/\D/g, "");
+}
+function buildDefaultWidths(columns) {
+  const map = {};
+  for (const col of columns) {
+    if (col.width !== void 0) map[col.key] = col.width;
+  }
+  return map;
+}
+function buildDefaultPins(columns) {
+  const map = {};
+  for (const col of columns) {
+    if (col.defaultPin) map[col.key] = col.defaultPin;
+  }
+  return map;
+}
+function compareUnknownSort(a, b) {
+  if (a === b) return 0;
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (typeof a === "number" && typeof b === "number") return a < b ? -1 : a > b ? 1 : 0;
+  if (typeof a === "string" && typeof b === "string") return a < b ? -1 : a > b ? 1 : 0;
+  const as = String(a);
+  const bs = String(b);
+  return as < bs ? -1 : as > bs ? 1 : 0;
+}
+function buildLockedPins(columns) {
+  const map = {};
+  for (const col of columns) {
+    if (col.lockPin && col.defaultPin) map[col.key] = col.defaultPin;
+  }
+  return map;
+}
+function useTableState(data, columns, defaultSort, paginationOverride, syncedSearchFromUrl) {
+  const [sortRules, setSortRules] = React9.useState(() => {
+    if (defaultSort) {
+      return [{ id: "sort-default", fieldKey: defaultSort.key, direction: defaultSort.dir }];
+    }
+    return [];
+  });
+  const primarySort = sortRules[0] ?? null;
+  const sortKey = primarySort?.fieldKey ?? "";
+  const sortDir = primarySort?.direction ?? "asc";
+  const addSortRule = React9.useCallback((fieldKey) => {
+    setSortRules((prev) => {
+      if (prev.some((r) => r.fieldKey === fieldKey)) return prev;
+      return [{ id: `sort-${Date.now()}`, fieldKey, direction: "asc" }, ...prev];
+    });
+  }, [setSortRules]);
+  const removeSortRule = React9.useCallback((id) => {
+    setSortRules((prev) => prev.filter((r) => r.id !== id));
+  }, [setSortRules]);
+  const toggleSortDir = React9.useCallback((id) => {
+    setSortRules((prev) => prev.map(
+      (r) => r.id === id ? { ...r, direction: r.direction === "asc" ? "desc" : "asc" } : r
+    ));
+  }, [setSortRules]);
+  const handleSortByKey = React9.useCallback((colKey) => {
+    setSortRules((prev) => {
+      const idx = prev.findIndex((r) => r.fieldKey === colKey);
+      if (idx === 0) {
+        return prev.map((r, i) => i === 0 ? { ...r, direction: r.direction === "asc" ? "desc" : "asc" } : r);
+      }
+      const filtered = prev.filter((r) => r.fieldKey !== colKey);
+      return [{ id: `sort-${Date.now()}`, fieldKey: colKey, direction: "asc" }, ...filtered];
+    });
+  }, [setSortRules]);
+  const [search, setSearch] = React9.useState(
+    () => ""
+  );
+  const [searchOpen, setSearchOpen] = React9.useState(
+    () => syncedSearchFromUrl !== void 0
+  );
+  const searchRef = React9.useRef(null);
+  const [activeFilters, setActiveFilters] = React9.useState([]);
+  const [filterConnectors, setFilterConnectors] = React9.useState({});
+  const [openFilterId, setOpenFilterId] = React9.useState(null);
+  const [filterBarVisible, setFilterBarVisible] = React9.useState(true);
+  const [drawerExpandedFilters, setDrawerExpandedFilters] = React9.useState(/* @__PURE__ */ new Set());
+  React9.useEffect(() => {
+    return;
+  }, [syncedSearchFromUrl]);
+  const toggleConnector = React9.useCallback((leftId) => {
+    setFilterConnectors((prev) => ({ ...prev, [leftId]: prev[leftId] === "or" ? "and" : "or" }));
+  }, [setFilterConnectors]);
+  function getConnector(leftId) {
+    return filterConnectors[leftId] ?? "and";
+  }
+  const addFilter = React9.useCallback((fieldKey, fromDrawer = false) => {
+    const col = columns.find((c) => c.key === fieldKey);
+    if (!col?.filter) return;
+    const id = nextFilterId();
+    const f = col.filter;
+    const firstOperator = (() => {
+      if (f.type === "select" || f.type === "date") {
+        const pick = f.operators?.find((o) => o === "is" || o === "is_not");
+        return pick ?? "is";
+      }
+      return f.operators?.[0] ?? "contains";
+    })();
+    const newFilter = { id, fieldKey, operator: firstOperator, values: [] };
+    setActiveFilters((prev) => [...prev, newFilter]);
+    if (fromDrawer) {
+      setDrawerExpandedFilters(() => /* @__PURE__ */ new Set([id]));
+    } else {
+      setOpenFilterId(id);
+      setFilterBarVisible(true);
+    }
+  }, [columns, setActiveFilters, setDrawerExpandedFilters, setOpenFilterId, setFilterBarVisible]);
+  const updateFilter = React9.useCallback((id, patch) => {
+    let shouldShowFilterBar = false;
+    setActiveFilters((prev) => {
+      const next = prev.map((f) => {
+        if (f.id !== id) return f;
+        const merged = { ...f, ...patch };
+        const col = columns.find((c) => c.key === merged.fieldKey);
+        if (merged.values.length > 0) {
+          shouldShowFilterBar = col?.filter?.type === "text" ? (merged.values[0] ?? "").trim().length > 0 : true;
+        }
+        return merged;
+      });
+      return next;
+    });
+    if (shouldShowFilterBar) setFilterBarVisible(true);
+  }, [columns, setActiveFilters, setFilterBarVisible]);
+  const removeFilter = React9.useCallback((id) => {
+    setActiveFilters((prev) => {
+      const idx = prev.findIndex((f) => f.id === id);
+      const next = prev.filter((f) => f.id !== id);
+      setFilterConnectors((prevC) => {
+        const c = { ...prevC };
+        if (idx > 0 && next.length > 0) {
+          const leftId = prev[idx - 1].id;
+          c[leftId] = prevC[id] ?? prevC[leftId] ?? "and";
+        }
+        delete c[id];
+        return c;
+      });
+      return next;
+    });
+    setOpenFilterId((prev) => prev === id ? null : prev);
+  }, [setActiveFilters, setFilterConnectors, setOpenFilterId]);
+  const [groupBy, setGroupBy] = React9.useState(null);
+  const [colMenuSearch, setColMenuSearch] = React9.useState({});
+  const [selected, setSelected] = React9.useState(/* @__PURE__ */ new Set());
+  const [colWidths, setColWidths] = React9.useState(() => buildDefaultWidths(columns));
+  const resizeRef = React9.useRef(null);
+  const [colOrder, setColOrder] = React9.useState(() => columns.map((c) => c.key));
+  const [colPins, setColPins] = React9.useState(() => buildDefaultPins(columns));
+  const lockedPins = React9.useMemo(() => buildLockedPins(columns), [columns]);
+  const [colWrap, setColWrap] = React9.useState({});
+  const [sheetOpen, setSheetOpen] = React9.useState(false);
+  const [sheetInitialPanel, setSheetInitialPanel] = React9.useState(null);
+  const [showGridlines, setShowGridlines] = React9.useState(true);
+  const [rowHeight, setRowHeight] = React9.useState("default");
+  const [hiddenCols, setHiddenCols] = React9.useState(/* @__PURE__ */ new Set());
+  const toggleColVisibility = React9.useCallback((key) => {
+    setHiddenCols((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, [setHiddenCols]);
+  const moveCol = React9.useCallback((key, dir) => {
+    setColOrder((prev) => {
+      const lockedLeft = columns.filter((c) => c.lockPin && c.defaultPin === "left").map((c) => c.key);
+      const lockedRight = columns.filter((c) => c.lockPin && c.defaultPin === "right").map((c) => c.key);
+      const orderable = prev.filter((k) => !lockedLeft.includes(k) && !lockedRight.includes(k));
+      const idx = orderable.indexOf(key);
+      if (dir === "up" && idx <= 0) return prev;
+      if (dir === "down" && idx >= orderable.length - 1) return prev;
+      const next = [...orderable];
+      const swap = dir === "up" ? idx - 1 : idx + 1;
+      [next[idx], next[swap]] = [next[swap], next[idx]];
+      return [...lockedLeft, ...next, ...lockedRight];
+    });
+  }, [columns, setColOrder]);
+  const draggedKey = React9.useRef(null);
+  const [dragOverKey, setDragOverKey] = React9.useState(null);
+  const scrollRef = React9.useRef(null);
+  const [scrolled, setScrolled] = React9.useState(false);
+  const [scrollEnd, setScrollEnd] = React9.useState(false);
+  const [isOverflowing, setIsOverflowing] = React9.useState(false);
+  const isReflowViewport = React9.useSyncExternalStore(
+    subscribeReflowViewport,
+    getReflowViewportSnapshot,
+    getServerReflowViewportSnapshot
+  );
+  const [hoveredRow, setHoveredRow] = React9.useState(null);
+  const columnsByKey = React9.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of columns) map.set(col.key, col);
+    return map;
+  }, [columns]);
+  const searchableTextCache = React9.useRef(/* @__PURE__ */ new WeakMap());
+  const getSearchableText = React9.useCallback((row) => {
+    const cache = searchableTextCache.current;
+    const cached = cache.get(row);
+    if (cached !== void 0) return cached;
+    let blob = "";
+    for (const v of Object.values(row)) {
+      if (v == null) continue;
+      blob += String(v).toLowerCase() + "\n";
+    }
+    cache.set(row, blob);
+    return blob;
+  }, []);
+  const lowerValueCache = React9.useRef(/* @__PURE__ */ new WeakMap());
+  const getLowerValue = React9.useCallback((row, key) => {
+    const wm = lowerValueCache.current;
+    let perRow = wm.get(row);
+    if (!perRow) {
+      perRow = /* @__PURE__ */ new Map();
+      wm.set(row, perRow);
+    }
+    const cached = perRow.get(key);
+    if (cached !== void 0) return cached;
+    const computed = String(row[key] ?? "").toLowerCase();
+    perRow.set(key, computed);
+    return computed;
+  }, []);
+  React9.useEffect(() => {
+    searchableTextCache.current = /* @__PURE__ */ new WeakMap();
+    lowerValueCache.current = /* @__PURE__ */ new WeakMap();
+  }, [data]);
+  const rows = React9.useMemo(() => {
+    let result = data.slice();
+    const q = search.trim().toLowerCase();
+    if (q) {
+      result = result.filter((r) => getSearchableText(r).includes(q));
+    }
+    const activeWithValues = activeFilters.filter((f) => {
+      if (f.values.length === 0) return false;
+      const col = columnsByKey.get(f.fieldKey);
+      if (col?.filter?.type === "text") {
+        return (f.values[0] ?? "").trim().length > 0;
+      }
+      return true;
+    });
+    if (activeWithValues.length > 0) {
+      const compiled = [];
+      for (const f of activeWithValues) {
+        const col = columnsByKey.get(f.fieldKey);
+        if (!col?.filter) continue;
+        if (col.filter.type === "select") {
+          compiled.push({
+            col,
+            id: f.id,
+            type: "select",
+            operator: f.operator,
+            selectValues: new Set(f.values)
+          });
+        } else if (col.filter.type === "date") {
+          compiled.push({
+            col,
+            id: f.id,
+            type: "date",
+            operator: f.operator,
+            dateTarget: f.values[0]
+          });
+        } else {
+          const raw = f.values[0] ?? "";
+          const isDigitsMask = col.filter.textMask === "phone" || col.filter.textMask === "zip";
+          compiled.push({
+            col,
+            id: f.id,
+            type: "text",
+            operator: f.operator,
+            isDigitsMask,
+            digitsNeedle: isDigitsMask ? digitsOnly(raw) : void 0,
+            textNeedle: !isDigitsMask ? raw.toLowerCase() : void 0
+          });
+        }
+      }
+      const matchesCompiled = (r, f) => {
+        const rowVal = String(r[f.col.key] ?? "");
+        if (f.type === "select") {
+          const hit = f.selectValues.has(rowVal);
+          return f.operator === "is" ? hit : !hit;
+        }
+        if (f.type === "date") {
+          if (!f.dateTarget) return true;
+          const rowYmd = parseRowDateToYmd(rowVal);
+          const op = f.operator === "is_not" ? "is_not" : "is";
+          if (rowYmd === null) return op === "is_not";
+          return op === "is" ? rowYmd === f.dateTarget : rowYmd !== f.dateTarget;
+        }
+        if (f.isDigitsMask) {
+          if (!f.digitsNeedle) return true;
+          const hay2 = digitsOnly(rowVal);
+          return f.operator === "contains" ? hay2.includes(f.digitsNeedle) : !hay2.includes(f.digitsNeedle);
+        }
+        if (!f.textNeedle) return true;
+        const hay = getLowerValue(r, f.col.key);
+        return f.operator === "contains" ? hay.includes(f.textNeedle) : !hay.includes(f.textNeedle);
+      };
+      if (compiled.length > 0) {
+        result = result.filter((r) => {
+          let res = matchesCompiled(r, compiled[0]);
+          for (let i = 1; i < compiled.length; i++) {
+            const connector = filterConnectors[compiled[i - 1].id] ?? "and";
+            const match = matchesCompiled(r, compiled[i]);
+            res = connector === "and" ? res && match : res || match;
+          }
+          return res;
+        });
+      }
+    }
+    const colMenuEntries = [];
+    for (const [key, raw] of Object.entries(colMenuSearch)) {
+      const trimmed = raw.trim();
+      if (trimmed) colMenuEntries.push({ key, lower: trimmed.toLowerCase() });
+    }
+    if (colMenuEntries.length > 0) {
+      result = result.filter((r) => {
+        for (const { key, lower } of colMenuEntries) {
+          if (!getLowerValue(r, key).includes(lower)) return false;
+        }
+        return true;
+      });
+    }
+    if (sortRules.length > 0) {
+      const resolved = [];
+      for (const rule of sortRules) {
+        const col = columnsByKey.get(rule.fieldKey);
+        const sk = col?.sortKey ?? col?.key;
+        if (sk) resolved.push({ sk, dir: rule.direction });
+      }
+      if (resolved.length > 0) {
+        result.sort((a, b) => {
+          for (let i = 0; i < resolved.length; i++) {
+            const { sk, dir } = resolved[i];
+            const cmp = compareUnknownSort(a[sk], b[sk]);
+            if (cmp !== 0) return dir === "asc" ? cmp : -cmp;
+          }
+          return 0;
+        });
+      }
+    }
+    return result;
+  }, [
+    data,
+    search,
+    activeFilters,
+    filterConnectors,
+    colMenuSearch,
+    sortRules,
+    columnsByKey,
+    getSearchableText,
+    getLowerValue
+  ]);
+  const pagedRows = React9.useMemo(() => {
+    if (!paginationOverride || paginationOverride.pageSize <= 0) return rows;
+    const { page, pageSize } = paginationOverride;
+    const safePage = Math.max(1, page);
+    return rows.slice((safePage - 1) * pageSize, safePage * pageSize);
+  }, [rows, paginationOverride?.page, paginationOverride?.pageSize]);
+  const groupedRows = React9.useMemo(() => {
+    if (!groupBy) return [{ groupKey: null, groupLabel: null, rows }];
+    const groups = /* @__PURE__ */ new Map();
+    rows.forEach((row) => {
+      const val = String(row[groupBy] ?? "\u2014");
+      if (!groups.has(val)) groups.set(val, []);
+      groups.get(val).push(row);
+    });
+    return [...groups.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, groupRows]) => ({ groupKey: key, groupLabel: key, rows: groupRows }));
+  }, [rows, groupBy]);
+  const LOCKED_KEYS = React9.useMemo(() => new Set(Object.keys(lockedPins)), [lockedPins]);
+  const effectivePins = React9.useMemo(() => {
+    if (isReflowViewport || !isOverflowing) return {};
+    const result = {};
+    for (const [key, pin] of Object.entries(colPins)) {
+      result[key] = pin;
+    }
+    return result;
+  }, [colPins, isOverflowing, isReflowViewport]);
+  const displayCols = React9.useMemo(() => {
+    const leftPinned = [];
+    const free = [];
+    const rightPinned = [];
+    for (const k of colOrder) {
+      const pin = colPins[k];
+      if (pin === "left") leftPinned.push(k);
+      else if (pin === "right") rightPinned.push(k);
+      else free.push(k);
+    }
+    const ordered = [...leftPinned, ...free, ...rightPinned];
+    const out = [];
+    for (const k of ordered) {
+      if (hiddenCols.has(k)) continue;
+      const col = columnsByKey.get(k);
+      if (col) out.push(col);
+    }
+    return out;
+  }, [colOrder, colPins, hiddenCols, columnsByKey]);
+  function startResize(key, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const minW = columns.find((c) => c.key === key)?.minWidth ?? 60;
+    const startW = colWidths[key] ?? (columns.find((c) => c.key === key)?.width ?? 100);
+    resizeRef.current = { key, startX: e.clientX, startW };
+    const onMove = (ev) => {
+      if (!resizeRef.current) return;
+      const { key: k, startX, startW: sw } = resizeRef.current;
+      setColWidths((p) => ({ ...p, [k]: Math.max(minW, sw + ev.clientX - startX) }));
+    };
+    const onUp = () => {
+      resizeRef.current = null;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }
+  function handleDragStart(key, e) {
+    draggedKey.current = key;
+    e.dataTransfer.effectAllowed = "move";
+  }
+  function handleDragOver(key, e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (draggedKey.current && draggedKey.current !== key) setDragOverKey(key);
+  }
+  function handleDrop(key) {
+    if (!draggedKey.current || draggedKey.current === key) {
+      setDragOverKey(null);
+      return;
+    }
+    const order = [...colOrder];
+    const from = order.indexOf(draggedKey.current);
+    const to = order.indexOf(key);
+    order.splice(from, 1);
+    order.splice(to, 0, draggedKey.current);
+    setColOrder(order);
+    draggedKey.current = null;
+    setDragOverKey(null);
+  }
+  function handleDragEnd() {
+    draggedKey.current = null;
+    setDragOverKey(null);
+  }
+  function pinColumn(key, pin) {
+    setColPins((p) => ({ ...p, [key]: pin }));
+  }
+  function unpinColumn(key) {
+    if (lockedPins[key]) return;
+    setColPins((p) => {
+      const n = { ...p };
+      delete n[key];
+      return n;
+    });
+  }
+  function toggleWrap(key) {
+    setColWrap((p) => ({ ...p, [key]: !p[key] }));
+  }
+  function checkOverflow() {
+    const el = scrollRef.current;
+    if (!el) return;
+    setIsOverflowing(el.scrollWidth > el.clientWidth + 1);
+  }
+  function handleScroll() {
+    const el = scrollRef.current;
+    if (!el) return;
+    setScrolled(el.scrollLeft > 1);
+    setScrollEnd(el.scrollLeft >= el.scrollWidth - el.clientWidth - 1);
+    setIsOverflowing(el.scrollWidth > el.clientWidth + 1);
+  }
+  function getRowId(row, index, getIdFn) {
+    return getIdFn ? getIdFn(row, index) : row.id ?? index;
+  }
+  const toggleRow = React9.useCallback((id) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, [setSelected]);
+  const toggleAll = React9.useCallback((allRowIds) => {
+    setSelected((prev) => prev.size === allRowIds.length ? /* @__PURE__ */ new Set() : new Set(allRowIds));
+  }, [setSelected]);
+  const stickyOffsets = React9.useMemo(() => {
+    const left = /* @__PURE__ */ new Map();
+    const right = /* @__PURE__ */ new Map();
+    let leftOffset = 0;
+    for (const col of displayCols) {
+      if (effectivePins[col.key] !== "left") break;
+      left.set(col.key, leftOffset);
+      leftOffset += colWidths[col.key] ?? col.width ?? 100;
+    }
+    let rightOffset = 0;
+    for (let i = displayCols.length - 1; i >= 0; i--) {
+      const col = displayCols[i];
+      if (effectivePins[col.key] !== "right") break;
+      right.set(col.key, rightOffset);
+      rightOffset += colWidths[col.key] ?? col.width ?? 100;
+    }
+    return { left, right };
+  }, [displayCols, effectivePins, colWidths]);
+  const getStickyLeft = React9.useCallback((key) => {
+    return stickyOffsets.left.get(key) ?? 0;
+  }, [stickyOffsets]);
+  const getStickyRight = React9.useCallback((key) => {
+    return stickyOffsets.right.get(key) ?? 0;
+  }, [stickyOffsets]);
+  const stickyStyle = React9.useCallback(
+    (key, isHeader = false) => {
+      if (isReflowViewport) return {};
+      const pin = effectivePins[key];
+      if (pin === "left") {
+        return isHeader ? { position: "sticky", left: stickyOffsets.left.get(key) ?? 0, top: 0 } : { position: "sticky", left: stickyOffsets.left.get(key) ?? 0 };
+      }
+      if (pin === "right") {
+        return isHeader ? { position: "sticky", right: stickyOffsets.right.get(key) ?? 0, top: 0 } : { position: "sticky", right: stickyOffsets.right.get(key) ?? 0 };
+      }
+      return isHeader ? { position: "sticky", top: 0 } : {};
+    },
+    [effectivePins, isReflowViewport, stickyOffsets]
+  );
+  const totalWidth = React9.useMemo(
+    () => displayCols.reduce((s, c) => s + (colWidths[c.key] ?? c.width ?? 100), 0),
+    [displayCols, colWidths]
+  );
+  return {
+    // Sort
+    sortRules,
+    setSortRules,
+    sortKey,
+    sortDir,
+    addSortRule,
+    removeSortRule,
+    toggleSortDir,
+    handleSortByKey,
+    // Filters
+    search,
+    setSearch,
+    searchOpen,
+    setSearchOpen,
+    searchRef,
+    activeFilters,
+    setActiveFilters,
+    filterConnectors,
+    setFilterConnectors,
+    toggleConnector,
+    getConnector,
+    openFilterId,
+    setOpenFilterId,
+    filterBarVisible,
+    setFilterBarVisible,
+    drawerExpandedFilters,
+    setDrawerExpandedFilters,
+    addFilter,
+    updateFilter,
+    removeFilter,
+    // Group
+    groupBy,
+    setGroupBy,
+    // Column quick-search
+    colMenuSearch,
+    setColMenuSearch,
+    // Selection
+    selected,
+    setSelected,
+    toggleRow,
+    toggleAll,
+    getRowId,
+    // Column widths / order / pins / wrap
+    colWidths,
+    setColWidths,
+    resizeRef,
+    startResize,
+    colOrder,
+    setColOrder,
+    moveCol,
+    colPins,
+    setColPins,
+    lockedPins,
+    LOCKED_KEYS,
+    pinColumn,
+    unpinColumn,
+    colWrap,
+    setColWrap,
+    toggleWrap,
+    // Drag-to-reorder
+    draggedKey,
+    dragOverKey,
+    handleDragStart,
+    handleDragOver,
+    handleDrop,
+    handleDragEnd,
+    // Scroll
+    scrollRef,
+    scrolled,
+    scrollEnd,
+    isOverflowing,
+    checkOverflow,
+    handleScroll,
+    // Hover
+    hoveredRow,
+    setHoveredRow,
+    // Derived
+    rows,
+    pagedRows,
+    groupedRows,
+    effectivePins,
+    displayCols,
+    isReflowViewport,
+    getStickyLeft,
+    getStickyRight,
+    stickyStyle,
+    totalWidth,
+    // Display settings
+    sheetOpen,
+    setSheetOpen,
+    sheetInitialPanel,
+    setSheetInitialPanel,
+    showGridlines,
+    setShowGridlines,
+    rowHeight,
+    setRowHeight,
+    hiddenCols,
+    setHiddenCols,
+    toggleColVisibility
+  };
+}
+function defaultColumnHeaderLabel(key) {
+  switch (key) {
+    case "select":
+      return "Select";
+    case "actions":
+      return "Actions";
+    default:
+      return void 0;
+  }
+}
+function resolvedColumnLabel(col) {
+  const t = col.label?.trim();
+  if (t) return t;
+  return defaultColumnHeaderLabel(col.key) ?? col.key;
+}
+var SortChevron = React9.memo(function SortChevron2({ dir }) {
+  return /* @__PURE__ */ jsx("i", { className: `fa-solid fa-arrow-${dir === "asc" ? "up" : "down"} ms-1 text-xs`, "aria-hidden": "true" });
+});
+function FilterPillBase({
+  filter,
+  columns,
+  defaultOpen = false,
+  onUpdate,
+  onRemove,
+  renderOptionValue
+}) {
+  const [open, setOpen] = React9.useState(false);
+  const [optSearch, setOptSearch] = React9.useState("");
+  const justAutoOpenedRef = React9.useRef(false);
+  React9.useEffect(() => {
+    if (defaultOpen) {
+      justAutoOpenedRef.current = true;
+      const t = setTimeout(() => {
+        setOpen(true);
+        setTimeout(() => {
+          justAutoOpenedRef.current = false;
+        }, 400);
+      }, 0);
+      return () => clearTimeout(t);
+    }
+  }, []);
+  const col = columns.find((c) => c.key === filter.fieldKey);
+  const filterDef = col?.filter;
+  React9.useEffect(() => {
+    if (!filterDef) return;
+    if (filterDef.type !== "select" && filterDef.type !== "date") return;
+    if (filter.operator !== "is" && filter.operator !== "is_not") {
+      onUpdate(filter.id, { operator: "is" });
+    }
+  }, [filter.id, filterDef, filter.operator, onUpdate]);
+  if (!filterDef) return null;
+  const options = filterDef.options ?? [];
+  const showSearch = options.length > 8;
+  const filteredOpts = optSearch ? options.filter((o) => o.label.toLowerCase().includes(optSearch.toLowerCase())) : options;
+  const operators = filterDef.operators ?? (filterDef.type === "select" || filterDef.type === "date" ? ["is", "is_not"] : ["contains", "not_contains"]);
+  const valueLabel = (() => {
+    if (filterDef.type === "select") {
+      if (filter.values.length === 0) return "\u2026";
+      if (filter.values.length === 1) {
+        return options.find((o) => o.value === filter.values[0])?.label ?? filter.values[0];
+      }
+      return `${filter.values.length} selected`;
+    }
+    if (filterDef.type === "date") {
+      const ymd = filter.values[0];
+      return ymd ? formatYmdForDisplay(ymd) : "\u2026";
+    }
+    return filter.values[0] || "\u2026";
+  })();
+  function toggleValue(val) {
+    const next = filter.values.includes(val) ? filter.values.filter((v) => v !== val) : [...filter.values, val];
+    onUpdate(filter.id, { values: next });
+  }
+  function cycleOperator() {
+    const idx = operators.indexOf(filter.operator);
+    const i = idx === -1 ? 0 : idx;
+    onUpdate(filter.id, { operator: operators[(i + 1) % operators.length] });
+  }
+  const isActive = filterDef.type === "date" ? Boolean(filter.values[0]) : filter.values.length > 0;
+  const hasSelection = filter.values.length > 0;
+  const iconClass = filterDef.icon ? `fa-light ${filterDef.icon}` : "fa-light fa-filter";
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex cursor-pointer items-center rounded border text-xs transition-colors",
+          isActive ? "border-brand/45 bg-brand/10" : "border-input bg-background"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "inline-flex cursor-pointer items-center gap-1 h-6 ps-2 pe-1.5 rounded-s transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                isActive ? "hover:bg-brand/15" : "hover:bg-interactive-hover"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "i",
+                  {
+                    className: cn(iconClass, "text-xs", isActive ? "text-brand" : "text-muted-foreground"),
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-foreground", children: col.label }),
+                isActive && /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: valueLabel })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${col.label} filter`,
+              onClick: () => onRemove(filter.id),
+              className: cn(
+                "inline-flex cursor-pointer items-center justify-center h-6 w-5 rounded-e transition-colors",
+                "text-muted-foreground hover:text-destructive",
+                isActive ? "hover:bg-brand/15" : "hover:bg-interactive-hover",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+              ),
+              children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-xs", "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        className: cn(
+          "p-0",
+          filterDef.type === "date" ? "w-auto max-w-[min(calc(100vw-2rem),22rem)]" : "w-64"
+        ),
+        align: "start",
+        onFocusOutside: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (justAutoOpenedRef.current) {
+            e.preventDefault();
+            justAutoOpenedRef.current = false;
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: col.label }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: cycleOperator,
+                  className: "inline-flex items-center gap-0.5 text-muted-foreground hover:text-interactive-hover-foreground transition-colors rounded px-1 py-0.5 hover:bg-interactive-hover",
+                  children: [
+                    OPERATOR_LABELS[filter.operator],
+                    /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-down text-xs", "aria-hidden": "true" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Remove filter",
+                onClick: () => onRemove(filter.id),
+                className: "text-muted-foreground hover:text-destructive transition-colors p-1 rounded hover:bg-interactive-hover",
+                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-trash text-xs", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          filterDef.type === "date" && /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+            FilterDateCalendar,
+            {
+              label: `${col.label} \u2014 choose date`,
+              valueYmd: filter.values[0],
+              onChangeYmd: (ymd) => onUpdate(filter.id, { values: ymd ? [ymd] : [] })
+            }
+          ) }),
+          filterDef.type === "select" && /* @__PURE__ */ jsxs("div", { className: "py-1 max-h-64 overflow-y-auto", children: [
+            showSearch && /* @__PURE__ */ jsx("div", { className: "px-2 pt-1 pb-1", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "text",
+                  placeholder: "Search options\u2026",
+                  value: optSearch,
+                  onChange: (e) => setOptSearch(e.target.value),
+                  className: cn("h-7 text-xs", optSearch ? "pe-8" : "pe-2"),
+                  autoFocus: true
+                }
+              ),
+              optSearch ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Clear option search",
+                  onClick: () => setOptSearch(""),
+                  className: "absolute end-1 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-xs", "aria-hidden": "true" })
+                }
+              ) : null
+            ] }) }),
+            filteredOpts.map((opt) => {
+              const checked = filter.values.includes(opt.value);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "option",
+                  "aria-selected": checked,
+                  tabIndex: 0,
+                  onClick: () => toggleValue(opt.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      toggleValue(opt.value);
+                    }
+                  },
+                  className: "flex w-full items-center gap-2.5 px-3 py-1.5 text-sm hover:bg-interactive-hover transition-colors cursor-pointer select-none focus-visible:outline-none focus-visible:bg-interactive-hover",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-slot": "checkbox",
+                        "data-state": checked ? "checked" : "unchecked",
+                        className: cn(
+                          "inline-flex items-center justify-center size-3.5 shrink-0 rounded-[4px] border transition-colors",
+                          checked ? "bg-primary border-primary text-primary-foreground" : "border-input bg-background"
+                        ),
+                        children: checked && /* @__PURE__ */ jsx("i", { className: "fa-solid fa-check text-current", style: { fontSize: "8px" } })
+                      }
+                    ),
+                    renderOptionValue ? renderOptionValue(filter.fieldKey, opt.value) : /* @__PURE__ */ jsx("span", { className: "text-foreground", children: opt.label })
+                  ]
+                },
+                opt.value
+              );
+            }),
+            filteredOpts.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No options found" })
+          ] }),
+          filterDef.type === "text" && /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+            FilterTextValueInput,
+            {
+              mask: filterDef.textMask,
+              placeholder: `Enter ${col.label.toLowerCase()}\u2026`,
+              value: filter.values[0] ?? "",
+              onValueChange: (next) => onUpdate(filter.id, { values: [next] }),
+              "aria-label": `${col.label} filter value`,
+              className: "h-8 text-xs focus-visible:border-ring focus-visible:ring-ring/50",
+              autoFocus: true
+            }
+          ) }),
+          hasSelection ? /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 border-t border-border bg-popover p-2", children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: () => onUpdate(filter.id, { values: [] }),
+              className: "w-full justify-center gap-1.5 text-xs text-muted-foreground",
+              children: [
+                /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-xs", "aria-hidden": "true" }),
+                "Clear selection"
+              ]
+            }
+          ) }) : null
+        ]
+      }
+    )
+  ] });
+}
+var FilterPill = React9.memo(FilterPillBase);
+function stickyShadow(pin) {
+  if (!pin) return "";
+  const base = "after:content-[''] after:absolute after:top-0 after:bottom-0 after:w-3 after:pointer-events-none";
+  if (pin === "left") {
+    return cn(
+      base,
+      "after:start-full",
+      "after:bg-[linear-gradient(to_right,var(--sticky-edge-fade),transparent)]"
+    );
+  }
+  return cn(
+    base,
+    "after:end-full",
+    "after:bg-[linear-gradient(to_left,var(--sticky-edge-fade),transparent)]"
+  );
+}
+function DataTableToolbar({
+  state,
+  columns,
+  searchable = true,
+  /** When false, hides filter pills, search, and filter controls (e.g. dashboard canvas edit mode). */
+  showQueryControls = true,
+  renderFilterOptionValue,
+  toolbarSlot,
+  searchAriaLabel = "Search table"
+}) {
+  const {
+    search,
+    setSearch,
+    searchOpen,
+    setSearchOpen,
+    searchRef,
+    activeFilters,
+    setActiveFilters,
+    openFilterId,
+    filterBarVisible,
+    setFilterBarVisible,
+    addFilter,
+    updateFilter,
+    removeFilter
+  } = state;
+  const filterableCols = columns.filter((c) => c.filter);
+  const searchModLabel = useModKeyLabel();
+  const effectiveSearchable = showQueryControls && searchable;
+  React9.useEffect(() => {
+    if (!effectiveSearchable) return;
+    function onGlobalKeyDown(e) {
+      if (!e.metaKey && !e.ctrlKey) return;
+      if (e.altKey) return;
+      if (e.key.toLowerCase() !== "k") return;
+      if (isEditableTarget(e.target)) return;
+      e.preventDefault();
+      setSearchOpen(true);
+      queueMicrotask(() => searchRef.current?.focus());
+    }
+    document.addEventListener("keydown", onGlobalKeyDown);
+    return () => document.removeEventListener("keydown", onGlobalKeyDown);
+  }, [effectiveSearchable, setSearchOpen, searchRef]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5 px-4 lg:px-6",
+        showQueryControls ? "min-h-10 pt-2 pb-2" : "min-h-0 justify-end py-1.5"
+      ),
+      children: [
+        showQueryControls && filterBarVisible && filterableCols.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 flex-1 min-w-0", children: [
+          activeFilters.map((filter) => /* @__PURE__ */ jsx(React9.Fragment, { children: /* @__PURE__ */ jsx(
+            FilterPill,
+            {
+              filter,
+              columns,
+              defaultOpen: filter.id === openFilterId,
+              onUpdate: updateFilter,
+              onRemove: removeFilter,
+              renderOptionValue: renderFilterOptionValue
+            }
+          ) }, filter.id)),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex cursor-pointer items-center gap-1 h-6 px-2 rounded text-xs text-muted-foreground hover:text-interactive-hover-foreground border border-dashed border-input/70 hover:border-input hover:bg-interactive-hover-subtle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "fa-light fa-plus text-xs", "aria-hidden": "true" }),
+                  "Add filter"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+              /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Filter by field" }),
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+              filterableCols.map((c) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => addFilter(c.key), children: [
+                c.filter?.icon && /* @__PURE__ */ jsx("i", { className: `fa-light ${c.filter.icon}`, "aria-hidden": "true" }),
+                c.label
+              ] }, c.key))
+            ] })
+          ] }),
+          activeFilters.length > 0 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveFilters([]),
+              className: "cursor-pointer text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors px-1",
+              children: "Clear all"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1 shrink-0",
+              showQueryControls && "ms-auto"
+            ),
+            children: [
+              effectiveSearchable && (searchOpen ? /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+                /* @__PURE__ */ jsx("i", { className: "fa-light fa-magnifying-glass absolute start-2.5 top-1/2 -translate-y-1/2 text-muted-foreground text-xs pointer-events-none", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    ref: searchRef,
+                    type: "text",
+                    role: "searchbox",
+                    inputMode: "search",
+                    autoComplete: "off",
+                    placeholder: "Search\u2026",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    onBlur: () => {
+                      if (!search) setSearchOpen(false);
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Escape") {
+                        setSearch("");
+                        setSearchOpen(false);
+                      }
+                    },
+                    className: cn("h-8 w-48 ps-7 text-xs", search ? "pe-8" : "pe-2"),
+                    "aria-label": searchAriaLabel
+                  }
+                ),
+                search ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Clear search",
+                    onClick: () => setSearch(""),
+                    className: "absolute end-1.5 top-1/2 -translate-y-1/2 inline-flex cursor-pointer size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-xs", "aria-hidden": "true" })
+                  }
+                ) : null
+              ] }) : /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Search",
+                    onClick: () => {
+                      setSearchOpen(true);
+                      setTimeout(() => searchRef.current?.focus(), 10);
+                    },
+                    className: "inline-flex shrink-0 cursor-pointer items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-magnifying-glass text-[13px]", "aria-hidden": "true" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(TooltipContent, { side: "bottom", children: [
+                  /* @__PURE__ */ jsx("span", { children: searchAriaLabel }),
+                  /* @__PURE__ */ jsxs(KbdGroup, { children: [
+                    /* @__PURE__ */ jsx(Kbd, { children: searchModLabel }),
+                    /* @__PURE__ */ jsx(Kbd, { children: "K" })
+                  ] })
+                ] })
+              ] }) })),
+              showQueryControls && filterableCols.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border/70", "aria-hidden": "true" }),
+                activeFilters.length > 0 ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": filterBarVisible ? "Hide filters" : "Show filters",
+                      onClick: () => setFilterBarVisible((v) => !v),
+                      className: cn(
+                        "inline-flex shrink-0 cursor-pointer items-center gap-1 size-8 justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        filterBarVisible ? "bg-accent text-accent-foreground hover:bg-accent/90" : "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("i", { className: "fa-light fa-filter text-[13px]", "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold tabular-nums", children: activeFilters.length })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: filterBarVisible ? "Hide filters" : "Show filters" })
+                ] }) }) : (
+                  // NOTE: Tooltip MUST wrap DropdownMenuTrigger directly (not the
+                  // surrounding <DropdownMenu> wrapper). Radix `asChild` Slot needs
+                  // a real DOM child — `<DropdownMenu>` is a logical wrapper, so
+                  // putting it inside TooltipTrigger swallows the tooltip handlers
+                  // and the hover hint silently disappears.
+                  /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                    /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Add filter",
+                          onClick: () => setFilterBarVisible(true),
+                          className: "inline-flex shrink-0 cursor-pointer items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                          children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-filter text-[13px]", "aria-hidden": "true" })
+                        }
+                      ) }) }),
+                      /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Add filter" })
+                    ] }) }),
+                    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                      /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Filter by field" }),
+                      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                      filterableCols.map((c) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => addFilter(c.key), children: [
+                        c.filter?.icon && /* @__PURE__ */ jsx("i", { className: `fa-light ${c.filter.icon}`, "aria-hidden": "true" }),
+                        c.label
+                      ] }, c.key))
+                    ] })
+                  ] })
+                )
+              ] }),
+              toolbarSlot && toolbarSlot(state)
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var BULK_BAR_MAX_PX = 448;
+var BULK_BAR_ON_LIGHT_STRIP = cn(
+  "[&_button[data-variant=default]]:bg-zinc-900 [&_button[data-variant=default]]:text-zinc-50",
+  "hover:[&_button[data-variant=default]]:bg-zinc-800",
+  "[&_button[data-variant=outline]]:border-zinc-300/80 [&_button[data-variant=outline]]:bg-white [&_button[data-variant=outline]]:text-zinc-900",
+  "hover:[&_button[data-variant=outline]]:bg-zinc-100",
+  "[&_button[data-variant=destructive]]:border-rose-200/80 [&_button[data-variant=destructive]]:bg-rose-100 [&_button[data-variant=destructive]]:text-rose-800",
+  "hover:[&_button[data-variant=destructive]]:bg-rose-200/40",
+  "[&_button[data-variant=ghost]]:text-zinc-600 hover:[&_button[data-variant=ghost]]:bg-zinc-200/70 hover:[&_button[data-variant=ghost]]:text-zinc-900"
+);
+function useBulkBarFixedToTableScrollEl(scrollRef, active, fullWidth) {
+  const [style, setStyle] = React9.useState(void 0);
+  React9.useLayoutEffect(() => {
+    if (!active) {
+      setStyle(void 0);
+      return;
+    }
+    const el = scrollRef.current;
+    if (!el) {
+      setStyle(void 0);
+      return;
+    }
+    const apply = () => {
+      const r = el.getBoundingClientRect();
+      let left = r.left;
+      let width = r.width;
+      if (!fullWidth) {
+        const w = Math.min(r.width, BULK_BAR_MAX_PX);
+        left = r.left + (r.width - w) / 2;
+        width = w;
+      }
+      setStyle({
+        position: "fixed",
+        left,
+        width,
+        bottom: "max(0.5rem, env(safe-area-inset-bottom, 0px))",
+        zIndex: 50,
+        boxSizing: "border-box",
+        margin: 0,
+        right: "auto"
+      });
+    };
+    apply();
+    const scheduled = rafThrottle(apply);
+    const ro = new ResizeObserver(scheduled);
+    ro.observe(el);
+    window.addEventListener("resize", scheduled, { passive: true });
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true });
+    return () => {
+      scheduled.cancel();
+      ro.disconnect();
+      window.removeEventListener("resize", scheduled);
+      window.removeEventListener("scroll", scheduled, { capture: true });
+    };
+  }, [active, fullWidth, scrollRef]);
+  return style;
+}
+function DataTableInner({
+  // `data` / `defaultSort` flow into `useTableState` upstream; the inner table
+  // reads them via `state` and never directly here. Keep the prop slots so
+  // the public `DataTable<TData>` API stays unchanged.
+  data: _data,
+  columns,
+  getRowId: getRowIdProp,
+  getRowSelectionLabel,
+  selectable = true,
+  searchable = true,
+  emptyState,
+  onRowClick,
+  defaultSort: _defaultSort,
+  toolbarSlot,
+  bulkActionsSlot,
+  addRowLabel = false,
+  renderFilterOptionValue,
+  hasFooter = false,
+  conditionalRules,
+  showColumnHeaders = true,
+  state
+}) {
+  const {
+    setSortRules,
+    sortKey,
+    sortDir,
+    handleSortByKey,
+    addFilter,
+    groupBy,
+    setGroupBy,
+    colMenuSearch,
+    setColMenuSearch,
+    selected,
+    setSelected,
+    toggleRow,
+    toggleAll,
+    getRowId,
+    colWidths,
+    startResize,
+    colPins,
+    lockedPins,
+    pinColumn,
+    unpinColumn,
+    colWrap,
+    toggleWrap,
+    draggedKey,
+    dragOverKey,
+    handleDragStart,
+    handleDragOver,
+    handleDrop,
+    handleDragEnd,
+    scrollRef,
+    handleScroll,
+    checkOverflow,
+    isOverflowing,
+    setHoveredRow,
+    rows,
+    pagedRows,
+    groupedRows,
+    effectivePins,
+    displayCols,
+    isReflowViewport,
+    stickyStyle,
+    totalWidth,
+    rowHeight,
+    showGridlines,
+    setSheetOpen,
+    setSheetInitialPanel
+  } = state;
+  React9.useEffect(() => {
+    const syncScrollport = () => {
+      const el2 = scrollRef.current;
+      if (el2) {
+        el2.style.setProperty("--dt-scrollport-width", `${el2.clientWidth}px`);
+      }
+      checkOverflow();
+    };
+    syncScrollport();
+    const el = scrollRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(syncScrollport);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const columnMenuPendingActionRef = React9.useRef(null);
+  const pinnedScrollHintDoneRef = React9.useRef(false);
+  React9.useEffect(() => {
+    if (!isOverflowing || isReflowViewport || Object.keys(colPins).length === 0) return;
+    if (pinnedScrollHintDoneRef.current) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    if (el.scrollLeft > 2) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    if (maxScroll < 16) return;
+    if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      pinnedScrollHintDoneRef.current = true;
+      return;
+    }
+    pinnedScrollHintDoneRef.current = true;
+    const delta = Math.min(96, Math.max(28, Math.round(maxScroll * 0.14)));
+    const startDelayMs = 320;
+    const dwellMs = 520;
+    const t1 = window.setTimeout(() => {
+      el.scrollTo({ left: delta, behavior: "smooth" });
+    }, startDelayMs);
+    const t2 = window.setTimeout(() => {
+      el.scrollTo({ left: 0, behavior: "smooth" });
+    }, startDelayMs + dwellMs);
+    return () => {
+      window.clearTimeout(t1);
+      window.clearTimeout(t2);
+    };
+  }, [isOverflowing, isReflowViewport, colPins, scrollRef]);
+  const lastLeftPinKey = [...displayCols].reverse().find((c) => effectivePins[c.key] === "left")?.key;
+  const firstRightPinKey = displayCols.find((c) => effectivePins[c.key] === "right")?.key;
+  function floatingHeaderPinnedStyle(key) {
+    const pin = effectivePins[key];
+    if (!pin) return void 0;
+    const visibleWidth = typeof floatingHeaderStyle?.width === "number" ? floatingHeaderStyle.width : tableWrapRef.current?.clientWidth ?? floatingHeaderTableWidth;
+    const maxScroll = Math.max(0, floatingHeaderTableWidth - visibleWidth);
+    const translateX = pin === "left" ? headerScrollLeft : headerScrollLeft - maxScroll;
+    return { position: "relative", transform: `translateX(${translateX}px)` };
+  }
+  const allRowIds = rows.map((r, i) => getRowId(r, i, getRowIdProp));
+  const allSelected = rows.length > 0 && selected.size === rows.length;
+  const someSelected = selected.size > 0 && !allSelected;
+  const anySelected = selected.size > 0;
+  const { resolvedTheme } = useTheme();
+  const isAppDark = resolvedTheme === "dark";
+  const bulkBarUseFixedLayout = anySelected;
+  const bulkBarFixedStyle = useBulkBarFixedToTableScrollEl(
+    scrollRef,
+    bulkBarUseFixedLayout,
+    isReflowViewport
+  );
+  const tableWrapRef = React9.useRef(null);
+  const tableHeadRef = React9.useRef(null);
+  const [headerIsStuck, setHeaderIsStuck] = React9.useState(false);
+  const [headerScrollLeft, setHeaderScrollLeft] = React9.useState(0);
+  const [floatingHeaderStyle, setFloatingHeaderStyle] = React9.useState(void 0);
+  const [floatingHeaderTableWidth, setFloatingHeaderTableWidth] = React9.useState(totalWidth);
+  const [isClient, setIsClient] = React9.useState(false);
+  React9.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  React9.useEffect(() => {
+    const wrapEl = tableWrapRef.current;
+    const headEl = tableHeadRef.current;
+    if (!wrapEl || !headEl || !showColumnHeaders) {
+      setHeaderIsStuck(false);
+      return;
+    }
+    const update = () => {
+      const wrapRect = wrapEl.getBoundingClientRect();
+      const headHeight = headEl.getBoundingClientRect().height || 0;
+      const rootStyle = getComputedStyle(document.documentElement);
+      const headerOffset = Number.parseFloat(rootStyle.getPropertyValue("--header-height")) || 0;
+      const stuck = wrapRect.top <= headerOffset && wrapRect.bottom > headHeight + headerOffset + 1;
+      setHeaderIsStuck((prev) => prev === stuck ? prev : stuck);
+    };
+    update();
+    const scheduled = rafThrottle(update);
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true });
+    window.addEventListener("resize", scheduled, { passive: true });
+    return () => {
+      scheduled.cancel();
+      window.removeEventListener("scroll", scheduled, { capture: true });
+      window.removeEventListener("resize", scheduled);
+    };
+  }, [showColumnHeaders, rows.length, displayCols.length]);
+  React9.useLayoutEffect(() => {
+    if (!headerIsStuck || !showColumnHeaders) {
+      setFloatingHeaderStyle(void 0);
+      return;
+    }
+    const wrapEl = tableWrapRef.current;
+    if (!wrapEl) {
+      setFloatingHeaderStyle(void 0);
+      return;
+    }
+    const apply = () => {
+      const rect = wrapEl.getBoundingClientRect();
+      const rootStyle = getComputedStyle(document.documentElement);
+      const headerOffset = Number.parseFloat(rootStyle.getPropertyValue("--header-height")) || 0;
+      const cs = getComputedStyle(wrapEl);
+      const borderLeft = parseFloat(cs.borderLeftWidth) || 0;
+      const borderRight = parseFloat(cs.borderRightWidth) || 0;
+      const visibleWidth = Math.max(0, wrapEl.clientWidth - borderLeft - borderRight);
+      const renderedTableWidth = Math.max(
+        totalWidth,
+        visibleWidth,
+        wrapEl.querySelector("table")?.getBoundingClientRect().width ?? 0
+      );
+      setFloatingHeaderStyle({
+        position: "fixed",
+        top: headerOffset,
+        left: rect.left + borderLeft,
+        width: visibleWidth,
+        zIndex: 50
+      });
+      setFloatingHeaderTableWidth(renderedTableWidth);
+      setHeaderScrollLeft(wrapEl.scrollLeft);
+    };
+    apply();
+    const scheduled = rafThrottle(apply);
+    const ro = new ResizeObserver(scheduled);
+    ro.observe(wrapEl);
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true });
+    window.addEventListener("resize", scheduled, { passive: true });
+    return () => {
+      scheduled.cancel();
+      ro.disconnect();
+      window.removeEventListener("scroll", scheduled, { capture: true });
+      window.removeEventListener("resize", scheduled);
+    };
+  }, [headerIsStuck, showColumnHeaders, totalWidth, displayCols.length]);
+  function ariaSortAttr(colKey) {
+    return sortKey !== colKey ? "none" : sortDir === "asc" ? "ascending" : "descending";
+  }
+  function cellStyle(key) {
+    return stickyStyle(key);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 w-full flex-col gap-0", children: [
+    /* @__PURE__ */ jsx(
+      DataTableToolbar,
+      {
+        state,
+        columns,
+        searchable,
+        renderFilterOptionValue,
+        toolbarSlot,
+        searchAriaLabel: "Search table"
+      }
+    ),
+    isClient && showColumnHeaders && headerIsStuck && floatingHeaderStyle ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: floatingHeaderStyle,
+          className: "pointer-events-auto",
+          children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden border border-border bg-dt-header-bg shadow-[0_10px_18px_-14px_rgba(15,23,42,0.5)] dark:shadow-[0_12px_20px_-14px_rgba(0,0,0,0.75)]", children: /* @__PURE__ */ jsx("div", { style: { transform: `translateX(${-headerScrollLeft}px)` }, children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              className: "w-full text-sm border-separate border-spacing-0",
+              style: { tableLayout: "fixed", width: floatingHeaderTableWidth },
+              children: [
+                /* @__PURE__ */ jsx("colgroup", { children: displayCols.map((col) => /* @__PURE__ */ jsx("col", { style: { width: colWidths[col.key] ?? col.width ?? 100 } }, col.key)) }),
+                /* @__PURE__ */ jsx("thead", { className: "bg-dt-header-bg", children: /* @__PURE__ */ jsx("tr", { children: displayCols.map((col) => {
+                  const isPinned = !!effectivePins[col.key];
+                  const isEdgePinCol = col.key === lastLeftPinKey || col.key === firstRightPinKey;
+                  return /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      scope: "col",
+                      style: floatingHeaderPinnedStyle(col.key),
+                      className: cn(
+                        "h-9 px-3 text-start align-middle select-none",
+                        "text-xs font-medium text-muted-foreground tracking-wide",
+                        "bg-dt-header-bg border-b border-border",
+                        showGridlines && (!isEdgePinCol ? "border-e border-border last:border-e-0" : "last:border-e-0"),
+                        isPinned ? "z-40" : "z-30",
+                        isPinned && "relative",
+                        isEdgePinCol && stickyShadow(effectivePins[col.key])
+                      ),
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "flex items-center min-w-0 flex-1", children: col.key === "select" ? selectable && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center justify-center self-center", children: [
+                        /* @__PURE__ */ jsx("span", { className: "sr-only", children: resolvedColumnLabel(col) }),
+                        /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked: allSelected ? true : someSelected ? "indeterminate" : false,
+                            onCheckedChange: () => toggleAll(allRowIds),
+                            "aria-label": "Select all rows"
+                          }
+                        )
+                      ] }) : col.sortable && col.sortKey ? /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleSortByKey(col.key),
+                          className: cn(
+                            "inline-flex items-center hover:text-interactive-hover-foreground transition-colors whitespace-nowrap",
+                            sortKey === col.key && "text-foreground"
+                          ),
+                          children: [
+                            col.label?.trim() ? col.label : resolvedColumnLabel(col),
+                            sortKey === col.key ? /* @__PURE__ */ jsx(SortChevron, { dir: sortDir }) : null
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: col.label?.trim() ? col.label : defaultColumnHeaderLabel(col.key) ?? col.key }) }) })
+                    },
+                    col.key
+                  );
+                }) }) })
+              ]
+            }
+          ) }) })
+        }
+      ),
+      document.body
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (el) => {
+          tableWrapRef.current = el;
+          scrollRef.current = el;
+        },
+        onScroll: (e) => {
+          handleScroll();
+          setHeaderScrollLeft(e.currentTarget.scrollLeft);
+        },
+        className: cn(
+          "mx-4 lg:mx-6 overflow-x-auto border border-border",
+          hasFooter ? "rounded-t-lg" : "rounded-lg"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: "w-full text-sm border-separate border-spacing-0",
+            style: {
+              tableLayout: "fixed",
+              minWidth: totalWidth,
+              width: headerIsStuck ? floatingHeaderTableWidth : void 0
+            },
+            children: [
+              /* @__PURE__ */ jsx("colgroup", { children: displayCols.map((col) => /* @__PURE__ */ jsx("col", { style: { width: colWidths[col.key] ?? col.width ?? 100 } }, col.key)) }),
+              /* @__PURE__ */ jsx(
+                "thead",
+                {
+                  ref: tableHeadRef,
+                  className: cn(
+                    "bg-dt-header-bg",
+                    headerIsStuck && "invisible",
+                    !showColumnHeaders && "hidden"
+                  ),
+                  children: /* @__PURE__ */ jsx("tr", { children: displayCols.map((col) => {
+                    const isPinned = !!effectivePins[col.key];
+                    const isLocked = !!lockedPins[col.key];
+                    const isFree = !colPins[col.key];
+                    const isResizable = !isLocked || col.key !== "select";
+                    const isEdgePinCol = col.key === lastLeftPinKey || col.key === firstRightPinKey;
+                    return /* @__PURE__ */ jsxs(
+                      "th",
+                      {
+                        scope: "col",
+                        "aria-sort": col.sortable && col.sortKey ? ariaSortAttr(col.sortKey) : void 0,
+                        draggable: isFree,
+                        onDragStart: isFree ? (e) => handleDragStart(col.key, e) : void 0,
+                        onDragOver: isFree ? (e) => handleDragOver(col.key, e) : void 0,
+                        onDrop: isFree ? () => handleDrop(col.key) : void 0,
+                        onDragEnd: isFree ? handleDragEnd : void 0,
+                        style: stickyStyle(col.key, false),
+                        className: cn(
+                          "group/th relative h-9 px-3 text-start align-middle select-none",
+                          "text-xs font-medium text-muted-foreground tracking-wide",
+                          "bg-dt-header-bg border-b border-border",
+                          showGridlines && (!isEdgePinCol ? "border-e border-border last:border-e-0" : "last:border-e-0"),
+                          isPinned ? "z-40" : "z-30",
+                          isFree && "cursor-grab active:cursor-grabbing",
+                          dragOverKey === col.key && draggedKey.current !== col.key && "bg-accent/40",
+                          isEdgePinCol && stickyShadow(effectivePins[col.key])
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1 min-w-0", children: [
+                            /* @__PURE__ */ jsx("div", { className: "flex items-center min-w-0 flex-1", children: col.header ? col.header() : col.key === "select" ? selectable && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center justify-center self-center", children: [
+                              /* @__PURE__ */ jsx("span", { className: "sr-only", children: resolvedColumnLabel(col) }),
+                              /* @__PURE__ */ jsx(
+                                Checkbox,
+                                {
+                                  checked: allSelected ? true : someSelected ? "indeterminate" : false,
+                                  onCheckedChange: () => toggleAll(allRowIds),
+                                  "aria-label": "Select all rows"
+                                }
+                              )
+                            ] }) : col.sortable && col.sortKey ? /* @__PURE__ */ jsx(Tip, { label: `Sort by ${resolvedColumnLabel(col)}`, side: "top", children: /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => handleSortByKey(col.key),
+                                className: cn(
+                                  "inline-flex items-center hover:text-interactive-hover-foreground transition-colors whitespace-nowrap",
+                                  sortKey === col.key && "text-foreground"
+                                ),
+                                children: [
+                                  col.label?.trim() ? col.label : resolvedColumnLabel(col),
+                                  sortKey === col.key && /* @__PURE__ */ jsx(SortChevron, { dir: sortDir })
+                                ]
+                              }
+                            ) }) : /* @__PURE__ */ jsx(Tip, { label: resolvedColumnLabel(col), side: "top", children: /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: col.label?.trim() ? col.label : defaultColumnHeaderLabel(col.key) ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: defaultColumnHeaderLabel(col.key) }) : /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.key }) }) }) }),
+                            col.key !== "select" && !lockedPins[col.key]?.includes("right") && col.key !== columns.find((c) => c.lockPin && c.defaultPin === "right")?.key && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                              /* @__PURE__ */ jsx(Tip, { label: "Column options", side: "top", children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  "aria-label": `${resolvedColumnLabel(col)} column options`,
+                                  onClick: (e) => e.stopPropagation(),
+                                  className: cn(
+                                    "opacity-0 group-hover/th:opacity-100 group-focus-within/th:opacity-100",
+                                    "inline-flex shrink-0 items-center justify-center size-7 rounded-md",
+                                    "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover-row",
+                                    "transition-opacity focus-visible:opacity-100",
+                                    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                                  ),
+                                  children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-ellipsis-vertical text-xs", "aria-hidden": "true" })
+                                }
+                              ) }) }),
+                              /* @__PURE__ */ jsxs(
+                                DropdownMenuContent,
+                                {
+                                  align: "start",
+                                  onCloseAutoFocus: () => {
+                                    const action = columnMenuPendingActionRef.current;
+                                    if (!action) return;
+                                    columnMenuPendingActionRef.current = null;
+                                    action();
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx("div", { className: "px-2 pt-2 pb-1", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                                      /* @__PURE__ */ jsx("i", { className: "fa-light fa-magnifying-glass absolute start-2 top-1/2 -translate-y-1/2 text-muted-foreground text-xs pointer-events-none", "aria-hidden": "true" }),
+                                      /* @__PURE__ */ jsx(
+                                        Input,
+                                        {
+                                          placeholder: `Search ${resolvedColumnLabel(col)}\u2026`,
+                                          value: colMenuSearch[col.key] ?? "",
+                                          onChange: (e) => setColMenuSearch((prev) => ({ ...prev, [col.key]: e.target.value })),
+                                          onKeyDown: (e) => e.stopPropagation(),
+                                          className: "h-7 ps-6 text-xs"
+                                        }
+                                      ),
+                                      colMenuSearch[col.key] && /* @__PURE__ */ jsx(
+                                        "button",
+                                        {
+                                          type: "button",
+                                          "aria-label": "Clear search",
+                                          onClick: () => setColMenuSearch((prev) => ({ ...prev, [col.key]: "" })),
+                                          className: "absolute end-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-interactive-hover-foreground transition-colors",
+                                          children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-xs", "aria-hidden": "true" })
+                                        }
+                                      )
+                                    ] }) }),
+                                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                                    !isLocked && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                      /* @__PURE__ */ jsxs(
+                                        DropdownMenuItem,
+                                        {
+                                          onClick: () => pinColumn(col.key, "left"),
+                                          disabled: colPins[col.key] === "left",
+                                          children: [
+                                            /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-left-to-line", "aria-hidden": "true" }),
+                                            "Pin Left"
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxs(
+                                        DropdownMenuItem,
+                                        {
+                                          onClick: () => pinColumn(col.key, "right"),
+                                          disabled: colPins[col.key] === "right",
+                                          children: [
+                                            /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-right-to-line", "aria-hidden": "true" }),
+                                            "Pin Right"
+                                          ]
+                                        }
+                                      ),
+                                      colPins[col.key] && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => unpinColumn(col.key), children: [
+                                        /* @__PURE__ */ jsx("i", { className: "fa-light fa-thumbtack-slash", "aria-hidden": "true" }),
+                                        "Unpin"
+                                      ] }),
+                                      /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+                                    ] }),
+                                    col.sortable && col.sortKey && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortRules((prev) => {
+                                        const filtered = prev.filter((r) => r.fieldKey !== col.key);
+                                        return [{ id: `sort-${Date.now()}`, fieldKey: col.key, direction: "asc" }, ...filtered];
+                                      }), children: [
+                                        /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-up-a-z text-xs shrink-0", "aria-hidden": "true" }),
+                                        "Sort Ascending"
+                                      ] }),
+                                      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortRules((prev) => {
+                                        const filtered = prev.filter((r) => r.fieldKey !== col.key);
+                                        return [{ id: `sort-${Date.now()}`, fieldKey: col.key, direction: "desc" }, ...filtered];
+                                      }), children: [
+                                        /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-down-a-z text-xs shrink-0", "aria-hidden": "true" }),
+                                        "Sort Descending"
+                                      ] }),
+                                      /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+                                    ] }),
+                                    /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => toggleWrap(col.key), children: [
+                                      /* @__PURE__ */ jsx("i", { className: "fa-light fa-text-width", "aria-hidden": "true" }),
+                                      colWrap[col.key] ? "Unwrap Text" : "Wrap Text"
+                                    ] }),
+                                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                                    col.filter && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => addFilter(col.key), children: [
+                                      /* @__PURE__ */ jsx("i", { className: "fa-light fa-filter", "aria-hidden": "true" }),
+                                      "Filter by this column"
+                                    ] }),
+                                    /* @__PURE__ */ jsxs(
+                                      DropdownMenuItem,
+                                      {
+                                        onClick: () => setGroupBy(groupBy === col.key ? null : col.key),
+                                        children: [
+                                          /* @__PURE__ */ jsx("i", { className: "fa-light fa-layer-group", "aria-hidden": "true" }),
+                                          groupBy === col.key ? "Remove Grouping" : "Group by this Column"
+                                        ]
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                                    /* @__PURE__ */ jsxs(
+                                      DropdownMenuItem,
+                                      {
+                                        onSelect: () => {
+                                          columnMenuPendingActionRef.current = () => {
+                                            setSheetInitialPanel("conditional-rules");
+                                            setSheetOpen(true);
+                                          };
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsx("i", { className: "fa-light fa-palette", "aria-hidden": "true" }),
+                                          "Add Conditional Rule"
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            ] })
+                          ] }),
+                          isResizable && col.key !== "select" && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              role: "separator",
+                              "aria-label": `Resize ${resolvedColumnLabel(col)} column`,
+                              "aria-orientation": "vertical",
+                              onMouseDown: (e) => startResize(col.key, e),
+                              className: "absolute end-0 top-1 bottom-1 w-1.5 cursor-col-resize rounded-full hover:bg-interactive-hover-foreground/50 active:bg-muted-foreground/70 transition-colors"
+                            }
+                          )
+                        ]
+                      },
+                      col.key
+                    );
+                  }) })
+                }
+              ),
+              /* @__PURE__ */ jsxs("tbody", { children: [
+                (pagedRows !== rows ? [{ groupKey: null, groupLabel: null, rows: pagedRows }] : groupedRows).map(({ groupKey, groupLabel, rows: groupRows }) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+                  groupLabel && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: displayCols.length, className: "p-0 border-b border-border bg-dt-group-bg", children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "sticky start-0 z-[25] px-4 py-1.5 text-xs font-semibold text-muted-foreground tracking-wide bg-dt-group-bg select-none",
+                        !isReflowViewport && "shadow-[4px_0_8px_-4px_var(--sticky-edge-fade)]"
+                      ),
+                      style: { width: "var(--dt-scrollport-width, 100%)" },
+                      children: [
+                        groupLabel,
+                        /* @__PURE__ */ jsxs("span", { className: "ms-2 font-normal normal-case opacity-60 tracking-normal", children: [
+                          groupRows.length,
+                          " record",
+                          groupRows.length !== 1 ? "s" : ""
+                        ] })
+                      ]
+                    }
+                  ) }) }),
+                  groupRows.map((row, rowIndex) => {
+                    const rowId = getRowId(row, rowIndex, getRowIdProp);
+                    const isSelected = selected.has(rowId);
+                    const rowClickable = Boolean(onRowClick) || selectable;
+                    function handleRowClick(e) {
+                      if (!rowClickable) return;
+                      const el = e.target;
+                      if (!el) return;
+                      if (el.closest("button, a, input, textarea, select, label, [role='checkbox']")) return;
+                      if (onRowClick) {
+                        onRowClick(row);
+                        return;
+                      }
+                      if (selectable) {
+                        toggleRow(rowId);
+                      }
+                    }
+                    return /* @__PURE__ */ jsx(
+                      "tr",
+                      {
+                        "data-state": isSelected ? "selected" : void 0,
+                        onMouseEnter: () => setHoveredRow(rowId),
+                        onMouseLeave: () => setHoveredRow(null),
+                        onClick: rowClickable ? handleRowClick : void 0,
+                        "data-new": Boolean(row.isNew) || void 0,
+                        className: cn(
+                          "group/row transition-colors",
+                          "hover:bg-dt-row-hover",
+                          isSelected && "bg-dt-row-selected text-dt-row-selected-fg",
+                          rowClickable && "cursor-pointer",
+                          Boolean(row.isNew) && "bg-dt-new-row-bg border-s-2 border-s-dt-new-row-border"
+                        ),
+                        children: displayCols.map((col) => {
+                          const isPinned = !!effectivePins[col.key];
+                          const wrap = colWrap[col.key];
+                          const isEdgePin = col.key === lastLeftPinKey || col.key === firstRightPinKey;
+                          const rowPy = rowHeight === "compact" ? "py-1" : rowHeight === "comfortable" ? "py-4" : "py-2.5";
+                          const cs = cellStyle(col.key);
+                          const tdBase = cn(
+                            `px-3 ${rowPy} align-middle`,
+                            showGridlines && !isEdgePin && "border-e border-border last:border-e-0",
+                            "border-b border-border group-last/row:border-b-0",
+                            isPinned && [
+                              "z-20 pinned-cell",
+                              "bg-dt-row-bg",
+                              "group-data-[state=selected]/row:bg-dt-row-selected",
+                              "group-hover/row:bg-dt-row-hover",
+                              isEdgePin && stickyShadow(effectivePins[col.key])
+                            ]
+                          );
+                          const conditionalBg = getConditionalCellBackground(
+                            row,
+                            col.key,
+                            conditionalRules,
+                            columns
+                          );
+                          const tdStyle = conditionalBg ? { ...cs, background: conditionalBg } : cs;
+                          if (col.key === "select") {
+                            const selectionLabel = getRowSelectionLabel?.(row, rowIndex);
+                            const ariaLabel = selectionLabel ? `Select row, ${selectionLabel}` : `Select row ${rowIndex + 1}`;
+                            return /* @__PURE__ */ jsx("td", { className: cn(tdBase, "text-center"), style: tdStyle, children: selectable && // inline-flex: inline elements inside <td> are never
+                            // stretched by table-cell height in Chrome/Safari/Firefox.
+                            // Block-level flex/grid always inherits full cell height at zoom.
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "inline-flex items-center justify-center transition-opacity",
+                                  anySelected ? "opacity-100" : "opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100"
+                                ),
+                                onClick: (e) => e.stopPropagation(),
+                                children: /* @__PURE__ */ jsx(
+                                  Checkbox,
+                                  {
+                                    checked: isSelected,
+                                    onCheckedChange: () => toggleRow(rowId),
+                                    "aria-label": ariaLabel,
+                                    onClick: (e) => e.stopPropagation()
+                                  }
+                                )
+                              }
+                            ) }, "select");
+                          }
+                          if (col.cell) {
+                            return /* @__PURE__ */ jsx(
+                              "td",
+                              {
+                                className: cn(
+                                  tdBase,
+                                  // When wrap is on, override truncate/overflow on any descendant
+                                  wrap && "[&_.truncate]:!whitespace-normal [&_.truncate]:!overflow-visible [&_.truncate]:!text-clip"
+                                ),
+                                style: tdStyle,
+                                children: col.cell(row, {
+                                  rowIndex,
+                                  selected: isSelected,
+                                  onSelect: (checked) => checked ? setSelected((prev) => /* @__PURE__ */ new Set([...prev, rowId])) : toggleRow(rowId)
+                                })
+                              },
+                              col.key
+                            );
+                          }
+                          const rawVal = String(row[col.key] ?? "");
+                          return /* @__PURE__ */ jsx("td", { className: cn(tdBase, "text-sm text-foreground/80"), style: tdStyle, children: /* @__PURE__ */ jsx("span", { className: wrap ? "whitespace-normal" : "block truncate", title: !wrap ? rawVal : void 0, children: rawVal }) }, col.key);
+                        })
+                      },
+                      String(rowId)
+                    );
+                  })
+                ] }, groupKey ?? "__all__")),
+                rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: displayCols.length, className: "h-24 px-3 text-center text-sm text-muted-foreground", children: emptyState ?? "No results match your filters." }) }),
+                addRowLabel !== false && /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") e.preventDefault();
+                    },
+                    className: "cursor-pointer hover:bg-dt-row-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                    "aria-label": `Add new ${addRowLabel}`,
+                    children: /* @__PURE__ */ jsx("td", { colSpan: displayCols.length, className: "px-3 py-2.5 align-middle", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [
+                      /* @__PURE__ */ jsx("i", { className: "fa-light fa-plus text-xs", "aria-hidden": "true" }),
+                      addRowLabel
+                    ] }) })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    anySelected && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": `${selected.size} row${selected.size !== 1 ? "s" : ""} selected`,
+        "data-exxat-bulk-bar": "",
+        style: bulkBarFixedStyle,
+        className: cn(
+          "flex min-w-0 max-w-full items-stretch overflow-hidden",
+          isAppDark ? "rounded-lg border border-zinc-300/80 bg-zinc-100 text-zinc-900 shadow-lg" : "rounded-lg border border-zinc-800 bg-zinc-900 text-zinc-100 shadow-lg",
+          "animate-in fade-in-0 duration-150",
+          "w-auto max-w-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex shrink-0 items-center gap-2 border-e py-2.5 ps-3 pe-2",
+                isAppDark ? "border-zinc-300/50" : "border-zinc-600/50"
+              ),
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex size-8 items-center justify-center rounded-md",
+                      isAppDark ? "text-zinc-500" : "text-zinc-400"
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-clipboard-list text-[1.1rem] leading-none" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-6 rounded-md px-1.5 py-0.5 text-center text-xs font-semibold leading-none tabular-nums",
+                      isAppDark ? "bg-zinc-200/90 text-zinc-900" : "bg-zinc-800 text-zinc-100"
+                    ),
+                    children: selected.size
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 min-h-0 flex-1 items-stretch",
+                !isAppDark && "dark",
+                isAppDark && BULK_BAR_ON_LIGHT_STRIP
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-w-0 flex-1 self-center",
+                      "overflow-x-auto overscroll-x-contain [scrollbar-width:thin] [touch-action:pan-x]"
+                    ),
+                    children: /* @__PURE__ */ jsx("div", { className: "flex w-max min-w-0 max-w-full flex-nowrap items-center gap-2 py-2.5 ps-2 pe-2", children: bulkActionsSlot ? bulkActionsSlot(selected, rows) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", className: "shrink-0", children: [
+                        /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-down-to-line", "aria-hidden": "true" }),
+                        " Export"
+                      ] }),
+                      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "destructive", className: "shrink-0", children: [
+                        /* @__PURE__ */ jsx("i", { className: "fa-light fa-trash", "aria-hidden": "true" }),
+                        " Delete"
+                      ] })
+                    ] }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex shrink-0 items-center border-e py-2.5 ps-2 pe-2.5",
+                      isAppDark ? "border-zinc-300/50" : "border-zinc-600/50"
+                    ),
+                    children: /* @__PURE__ */ jsx(Tip, { label: "Clear selection", side: "top", children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        size: "icon-sm",
+                        variant: "ghost",
+                        "aria-label": "Clear selection",
+                        onClick: () => setSelected(/* @__PURE__ */ new Set()),
+                        className: "shrink-0",
+                        children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark", "aria-hidden": "true" })
+                      }
+                    ) })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DataTableWithInternalState(props) {
+  const state = useTableState(props.data, props.columns, props.defaultSort, props.paginationOverride);
+  return /* @__PURE__ */ jsx(DataTableInner, { ...props, state });
+}
+function DataTable(props) {
+  if (props.state) {
+    return /* @__PURE__ */ jsx(DataTableInner, { ...props, state: props.state });
+  }
+  return /* @__PURE__ */ jsx(DataTableWithInternalState, { ...props });
+}
+
+export { DataTable, DataTableToolbar };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map