@avenue-ticketing/ui 0.4.0 → 0.5.0

package/dist/react/table-view/index.js

@@ -0,0 +1,2155 @@
+import * as React5 from 'react';
+import React5__default, { useState, useCallback, forwardRef, useImperativeHandle, memo, useRef, useLayoutEffect, useMemo, useEffect, startTransition } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { X, MoreVertical, ArrowLeft, ArrowRight, ChevronUp, ChevronDown, Pin, PinOff, EyeOff, GripVertical, ArrowDown, ArrowUp } from 'lucide-react';
+import { createPortal } from 'react-dom';
+
+// src/react/table-view/meta.ts
+function getTableViewColumnDisableReorder(column) {
+  return Boolean(column.columnDef.meta?.tableView?.disableColumnReorder);
+}
+function flexRender(Comp, props) {
+  return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ React5.createElement(Comp, props) : Comp;
+}
+function isReactComponent(component) {
+  return isClassComponent(component) || typeof component === "function" || isExoticComponent(component);
+}
+function isClassComponent(component) {
+  return typeof component === "function" && (() => {
+    const proto = Object.getPrototypeOf(component);
+    return proto.prototype && proto.prototype.isReactComponent;
+  })();
+}
+function isExoticComponent(component) {
+  return typeof component === "object" && typeof component.$$typeof === "symbol" && ["react.memo", "react.forward_ref"].includes(component.$$typeof.description);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark() {
+  const lineRef = useRef(null);
+  useLayoutEffect(() => {
+    const poly = lineRef.current;
+    if (!poly || typeof poly.getTotalLength !== "function") return;
+    const len = poly.getTotalLength();
+    if (len <= 0) return;
+    poly.style.strokeDasharray = `${len}`;
+    poly.style.strokeDashoffset = `${len}`;
+    if (typeof poly.animate !== "function") {
+      poly.style.strokeDashoffset = "0";
+      return;
+    }
+    const anim = poly.animate(
+      [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
+      {
+        duration: CHECKBOX_TICK_DRAW_MS,
+        delay: CHECKBOX_TICK_DELAY_MS,
+        easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+        fill: "forwards"
+      }
+    );
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4 shrink-0 overflow-visible",
+      viewBox: "0 0 24 24",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          ref: lineRef,
+          points: "4 12 9 17 20 6",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var Checkbox = React5.forwardRef(
+  ({
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    indeterminate = false,
+    disabled = false,
+    className,
+    onClick,
+    ...rest
+  }, ref) => {
+    const isControlled = checkedProp !== void 0;
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(
+      defaultChecked
+    );
+    const checked = isControlled ? checkedProp : uncontrolledChecked;
+    const ariaChecked = indeterminate ? "mixed" : checked ? true : false;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "checkbox",
+        "data-slot": "checkbox",
+        "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
+        disabled,
+        "aria-checked": ariaChecked,
+        className: cn(
+          "ring-offset-background focus-visible:ring-primary/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent p-0 outline-none select-none",
+          "focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed",
+          className
+        ),
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          if (disabled) return;
+          if (isControlled) {
+            onCheckedChange?.(!checked);
+            return;
+          }
+          setUncontrolledChecked((prev) => {
+            const next = !prev;
+            onCheckedChange?.(next);
+            return next;
+          });
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "flex size-5 shrink-0 items-center justify-center rounded-[4px] border",
+              !disabled && (indeterminate ? "border-primary bg-primary text-background" : checked ? "border-primary bg-primary text-background" : "border-primary/20 bg-background"),
+              disabled && (indeterminate ? "border-primary/40 bg-primary/45 text-primary-foreground" : checked ? "border-primary/40 bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
+            ),
+            children: indeterminate ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background",
+                "aria-hidden": true
+              }
+            ) : checked ? /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, {}) : null
+          }
+        ) })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var sizeClass = {
+  xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
+  default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
+  lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5"
+};
+var iconOnlySizeClass = {
+  xs: "size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3",
+  default: "size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4",
+  lg: "size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5"
+};
+var roundedClass = {
+  full: "rounded-full",
+  lg: "rounded-lg",
+  md: "rounded-md"
+};
+var variantClass = {
+  primary: "bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85",
+  secondary: "bg-background text-primary border border-primary/10 hover:bg-primary/5",
+  destructive: "bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5",
+  success: "bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5"
+};
+var Button = React5.forwardRef(
+  ({
+    className,
+    type = "button",
+    variant = "secondary",
+    rounded: roundedProp,
+    size = "default",
+    iconOnly = false,
+    disabled,
+    ...props
+  }, ref) => {
+    const rounded = roundedProp ?? (iconOnly ? "md" : "full");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type,
+        disabled,
+        "data-slot": "button",
+        "data-icon-only": iconOnly ? "" : void 0,
+        className: cn(
+          "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          iconOnly ? iconOnlySizeClass[size] : sizeClass[size],
+          roundedClass[rounded],
+          variantClass[variant],
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var DROPDOWN_PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
+var DROPDOWN_PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
+var DROPDOWN_MENU_MIN_WIDTH_PX = 192;
+var DROPDOWN_MOBILE_SHEET_MAX_PX = 1024;
+var DROPDOWN_MOBILE_SHEET_MOTION_MS = 175;
+var DROPDOWN_MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+var DROPDOWN_MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX = 120;
+function resolveDropdownMobileSheet(mobileOptions) {
+  return {
+    sheet: mobileOptions?.sheet ?? true,
+    title: mobileOptions?.title,
+    sheetExtraClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
+  };
+}
+var DROPDOWN_SUB_CONTENT_ATTR = "data-dropdown-sub-content";
+var DROPDOWN_SHEET_MENU_TEXT = "max-[1024px]:text-base";
+var DROPDOWN_SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
+var DROPDOWN_CONTENT_ORIGIN = {
+  bottom: "top center",
+  top: "bottom center",
+  left: "right center",
+  right: "left center"
+};
+var DROPDOWN_CONTENT_HIDDEN = {
+  bottom: "translateY(-4px) scale(0.97)",
+  top: "translateY(4px) scale(0.97)",
+  left: "translateX(4px) scale(0.97)",
+  right: "translateX(-4px) scale(0.97)"
+};
+function computePos(trigger, menu, side, align, offset, pad) {
+  const tr = trigger.getBoundingClientRect();
+  const mr = menu.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const sx = window.scrollX;
+  const sy = window.scrollY;
+  let top = 0;
+  let left = 0;
+  let effectiveSide = side;
+  const calc = (s) => {
+    switch (s) {
+      case "bottom":
+        top = tr.bottom + sy + offset;
+        if (align === "start") left = tr.left + sx;
+        else if (align === "end") left = tr.right + sx - mr.width;
+        else left = tr.left + sx + tr.width / 2 - mr.width / 2;
+        break;
+      case "top":
+        top = tr.top + sy - mr.height - offset;
+        if (align === "start") left = tr.left + sx;
+        else if (align === "end") left = tr.right + sx - mr.width;
+        else left = tr.left + sx + tr.width / 2 - mr.width / 2;
+        break;
+      case "right":
+        left = tr.right + sx + offset;
+        if (align === "start") top = tr.top + sy;
+        else if (align === "end") top = tr.bottom + sy - mr.height;
+        else top = tr.top + sy + tr.height / 2 - mr.height / 2;
+        break;
+      case "left":
+        left = tr.left + sx - mr.width - offset;
+        if (align === "start") top = tr.top + sy;
+        else if (align === "end") top = tr.bottom + sy - mr.height;
+        else top = tr.top + sy + tr.height / 2 - mr.height / 2;
+        break;
+    }
+  };
+  calc(side);
+  if (side === "bottom" && top + mr.height > vh + sy - pad) {
+    const ft = tr.top + sy - mr.height - offset;
+    if (ft >= sy + pad) {
+      effectiveSide = "top";
+      top = ft;
+    }
+  } else if (side === "top" && top < sy + pad) {
+    const ft = tr.bottom + sy + offset;
+    if (ft + mr.height <= vh + sy - pad) {
+      effectiveSide = "bottom";
+      top = ft;
+    }
+  } else if (side === "right" && left + mr.width > vw + sx - pad) {
+    const fl = tr.left + sx - mr.width - offset;
+    if (fl >= sx + pad) {
+      effectiveSide = "left";
+      left = fl;
+    }
+  } else if (side === "left" && left < sx + pad) {
+    const fl = tr.right + sx + offset;
+    if (fl + mr.width <= vw + sx - pad) {
+      effectiveSide = "right";
+      left = fl;
+    }
+  }
+  left = Math.max(sx + pad, Math.min(left, vw + sx - mr.width - pad));
+  top = Math.max(sy + pad, Math.min(top, vh + sy - mr.height - pad));
+  return { top, left, side: effectiveSide };
+}
+function useIsMobile(breakpoint = 1025) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
+var DropdownContext = React5__default.createContext(void 0);
+function useDropdown() {
+  const ctx = React5__default.useContext(DropdownContext);
+  if (!ctx)
+    throw new Error("Dropdown components must be used within <Dropdown />");
+  return ctx;
+}
+React5__default.createContext(void 0);
+var Dropdown = ({
+  children,
+  open: controlledOpen,
+  onOpenChange
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const triggerRef = useRef(null);
+  const [radioValues, setRadioValues] = useState({});
+  const setOpen = useCallback(
+    (v) => {
+      if (!isControlled) setInternalOpen(v);
+      onOpenChange?.(v);
+    },
+    [isControlled, onOpenChange]
+  );
+  const setRadioValue = useCallback((group, value) => {
+    setRadioValues((prev) => ({ ...prev, [group]: value }));
+  }, []);
+  const ctx = useMemo(
+    () => ({ open, setOpen, triggerRef, radioValues, setRadioValue }),
+    [open, setOpen, radioValues, setRadioValue]
+  );
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: ctx, children });
+};
+function mergeTriggerRef(triggerRef, node, childRef) {
+  triggerRef.current = node;
+  if (typeof childRef === "function") childRef(node);
+  else if (childRef && typeof childRef === "object")
+    childRef.current = node;
+}
+var DropdownTrigger = React5__default.forwardRef(
+  ({
+    children,
+    asChild,
+    className,
+    onClick: onClickProp,
+    disabled,
+    ...buttonProps
+  }, ref) => {
+    const { open, setOpen, triggerRef } = useDropdown();
+    const handleClick = useCallback(
+      (e) => {
+        onClickProp?.(e);
+        e.stopPropagation();
+        if (disabled) return;
+        setOpen(!open);
+      },
+      [disabled, onClickProp, open, setOpen]
+    );
+    const setButtonRef = useCallback(
+      (el) => {
+        triggerRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref, triggerRef]
+    );
+    if (asChild && React5__default.isValidElement(children)) {
+      const child = children;
+      return React5__default.cloneElement(child, {
+        ref: (node) => {
+          mergeTriggerRef(
+            triggerRef,
+            node,
+            child.ref
+          );
+        },
+        className: cn("group", child.props.className),
+        onClick: (e) => {
+          child.props.onClick?.(e);
+          handleClick(e);
+        },
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "data-state": open ? "open" : "closed",
+        ...disabled !== void 0 ? {
+          disabled
+        } : {}
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: setButtonRef,
+        type: "button",
+        ...buttonProps,
+        disabled,
+        className: cn("group", className),
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "data-state": open ? "open" : "closed",
+        onClick: handleClick,
+        children
+      }
+    );
+  }
+);
+DropdownTrigger.displayName = "DropdownTrigger";
+var DropdownMobileClose = React5__default.forwardRef(({ className, type = "button", ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "z-100 flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full transition-all hover:bg-secondary-background active:scale-[0.96]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+});
+DropdownMobileClose.displayName = "DropdownMobileClose";
+function DropdownMobileBottomSheetPortal({
+  open,
+  isAnimating,
+  slideEntrance,
+  slideOffsetPx,
+  sheetTitle,
+  sheetExtraClassName,
+  contentClassName,
+  onRequestClose,
+  menuRef,
+  portalZClassName = "z-50",
+  children,
+  className,
+  style,
+  ...panelProps
+}) {
+  const sheetMotion = open ? DROPDOWN_MOBILE_SHEET_ENTRY_EASING : DROPDOWN_MOBILE_SHEET_EXIT_EASING;
+  const sheetHiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 flex items-end justify-center p-0",
+          portalZClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "fixed inset-0 bg-black/40 dark:bg-black/60",
+                isAnimating ? "opacity-100" : "opacity-0"
+              ),
+              style: {
+                transitionProperty: "opacity",
+                transitionDuration: `${DROPDOWN_MOBILE_SHEET_MOTION_MS}ms`,
+                transitionTimingFunction: sheetMotion
+              },
+              onClick: onRequestClose
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...panelProps,
+              ref: menuRef,
+              className: cn(
+                "bg-background border-primary/10 relative z-10 flex w-full max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] flex-col overflow-hidden shadow-2xl outline-none",
+                "rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t",
+                sheetExtraClassName,
+                className
+              ),
+              style: {
+                transform: isAnimating ? "translateY(0)" : sheetHiddenTransform,
+                opacity: isAnimating ? 1 : 0,
+                transitionProperty: "transform, opacity",
+                transitionDuration: `${DROPDOWN_MOBILE_SHEET_MOTION_MS}ms`,
+                transitionTimingFunction: sheetMotion,
+                ...style
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
+                      sheetTitle ? "justify-between gap-3" : "justify-end"
+                    ),
+                    children: [
+                      sheetTitle ? /* @__PURE__ */ jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-base font-semibold", children: sheetTitle }) : null,
+                      /* @__PURE__ */ jsx(
+                        DropdownMobileClose,
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            onRequestClose();
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+                      contentClassName
+                    ),
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var DropdownContent = ({
+  children,
+  side = "bottom",
+  align = "start",
+  offset = 10,
+  duration = 80,
+  viewportPadding = 8,
+  closeOnEscape = true,
+  minWidth = "trigger",
+  loop = true,
+  mobileOptions,
+  slideEntrance = true,
+  slideEntranceOffsetPx: slideEntranceOffsetPxProp,
+  className,
+  style,
+  ...props
+}) => {
+  const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
+  const { open, setOpen, triggerRef } = useDropdown();
+  const [shouldRender, setShouldRender] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [pos, setPos] = useState({ top: -9999, left: -9999, side });
+  const [triggerW, setTriggerW] = useState(0);
+  const menuRef = useRef(null);
+  const resolvedMobile = useMemo(
+    () => resolveDropdownMobileSheet(mobileOptions),
+    [mobileOptions]
+  );
+  const slideOffsetPx = useMemo(
+    () => slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
+    [slideEntranceOffsetPxProp]
+  );
+  const closeDuration = isMobile && resolvedMobile.sheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
+  const closeMenu = useCallback(() => setOpen(false), [setOpen]);
+  useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+    } else {
+      setIsAnimating(false);
+      const timer = setTimeout(() => setShouldRender(false), closeDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [open, closeDuration]);
+  useEffect(() => {
+    if (!shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [shouldRender, open]);
+  useLayoutEffect(() => {
+    if (!shouldRender || !triggerRef.current || !menuRef.current) return;
+    const update = () => {
+      if (!triggerRef.current || !menuRef.current) return;
+      setTriggerW(triggerRef.current.getBoundingClientRect().width);
+      setPos(
+        computePos(
+          triggerRef.current,
+          menuRef.current,
+          side,
+          align,
+          offset,
+          viewportPadding
+        )
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [shouldRender, side, align, offset, viewportPadding]);
+  useEffect(() => {
+    if (isAnimating && menuRef.current) {
+      menuRef.current.focus();
+    }
+  }, [isAnimating]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      if (menuRef.current?.contains(t) || triggerRef.current?.contains(t))
+        return;
+      const el = e.target instanceof Element ? e.target : null;
+      if (el?.closest?.(`[${DROPDOWN_SUB_CONTENT_ATTR}]`)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, setOpen, triggerRef]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const menu = menuRef.current;
+      if (!menu) return;
+      const focusedEl = document.activeElement;
+      if (focusedEl && !menu.contains(focusedEl)) return;
+      const items = getItems(menu);
+      const idx = items.indexOf(focusedEl);
+      switch (e.key) {
+        case "Escape":
+          if (closeOnEscape) {
+            e.preventDefault();
+            setOpen(false);
+            triggerRef.current?.focus();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (items.length === 0) break;
+          if (idx === -1 || idx === items.length - 1 && loop)
+            items[0]?.focus();
+          else if (idx < items.length - 1) items[idx + 1]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (items.length === 0) break;
+          if (idx <= 0 && loop) items[items.length - 1]?.focus();
+          else if (idx > 0) items[idx - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+        case "Tab":
+          setOpen(false);
+          break;
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, closeOnEscape, loop, setOpen, triggerRef]);
+  useEffect(() => {
+    if (open && isMobile && resolvedMobile.sheet) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open, isMobile, resolvedMobile.sheet]);
+  if (!shouldRender || typeof document === "undefined") return null;
+  if (isMobile && resolvedMobile.sheet) {
+    return /* @__PURE__ */ jsx(
+      DropdownMobileBottomSheetPortal,
+      {
+        ...props,
+        open,
+        isAnimating,
+        slideEntrance,
+        slideOffsetPx,
+        sheetTitle: resolvedMobile.title,
+        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
+        contentClassName: resolvedMobile.contentClassName,
+        onRequestClose: closeMenu,
+        menuRef,
+        portalZClassName: "z-50",
+        className,
+        style,
+        role: "menu",
+        "aria-orientation": "vertical",
+        tabIndex: -1,
+        children
+      }
+    );
+  }
+  const resolvedMinW = minWidth === "trigger" ? Math.max(triggerW, DROPDOWN_MENU_MIN_WIDTH_PX) : minWidth;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref: menuRef,
+        role: "menu",
+        "aria-orientation": "vertical",
+        tabIndex: -1,
+        className: cn(
+          "bg-background border-primary/10 absolute z-50 overflow-hidden rounded-xl border py-1.5 shadow-xl outline-none",
+          className
+        ),
+        style: {
+          position: "absolute",
+          top: pos.top,
+          left: pos.left,
+          minWidth: resolvedMinW,
+          transformOrigin: DROPDOWN_CONTENT_ORIGIN[pos.side],
+          transform: isAnimating ? "none" : DROPDOWN_CONTENT_HIDDEN[pos.side],
+          opacity: isAnimating ? 1 : 0,
+          transitionProperty: "opacity, transform",
+          transitionDuration: `${duration}ms`,
+          transitionTimingFunction: isAnimating ? DROPDOWN_PANEL_OPEN_EASING : DROPDOWN_PANEL_CLOSE_EASING,
+          ...style
+        },
+        children
+      }
+    ),
+    document.body
+  );
+};
+function getItems(menu) {
+  return Array.from(
+    menu.querySelectorAll(
+      '[role="menuitem"]:not([aria-disabled="true"]),[role="menuitemcheckbox"]:not([aria-disabled="true"]),[role="menuitemradio"]:not([aria-disabled="true"])'
+    )
+  );
+}
+var DropdownItem = ({
+  children,
+  disabled = false,
+  destructive = false,
+  icon,
+  shortcut,
+  closeOnSelect = true,
+  inset = false,
+  className,
+  onClick,
+  ...props
+}) => {
+  const { setOpen } = useDropdown();
+  const handleClick = (e) => {
+    if (disabled) return;
+    onClick?.(e);
+    if (closeOnSelect) setOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      role: "menuitem",
+      tabIndex: disabled ? void 0 : -1,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
+        DROPDOWN_SHEET_MENU_TEXT,
+        inset && "pl-9",
+        !disabled && "cursor-pointer",
+        disabled && "lg:cursor-not-allowed",
+        !disabled && !destructive && "text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
+        !disabled && destructive && "text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10 dark:text-destructive-foreground dark:hover:bg-destructive-foreground/18 dark:focus-visible:bg-destructive-foreground/18",
+        disabled && !destructive && "text-foreground/45 dark:text-foreground/50",
+        disabled && destructive && "bg-destructive/5 text-destructive/75 dark:bg-destructive-foreground/12 dark:text-destructive-foreground/78",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        shortcut ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "ml-auto text-xs tracking-widest",
+              DROPDOWN_SHEET_MENU_SHORTCUT,
+              destructive ? "text-destructive/70 dark:text-destructive-foreground/80" : "opacity-40"
+            ),
+            children: shortcut
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var DropdownSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    role: "separator",
+    className: cn("border-primary/10 my-1.5 border-t", className),
+    ...props
+  }
+);
+React5__default.createContext(
+  void 0
+);
+
+// src/react/table-view/helpers.ts
+function getSelectedRowIds(table) {
+  return table.getSelectedRowModel().rows.map((r) => r.id);
+}
+function moveColumnInOrder(order, sourceId, targetId) {
+  const from = order.indexOf(sourceId);
+  const to = order.indexOf(targetId);
+  if (from < 0 || to < 0 || from === to) return order;
+  const next = [...order];
+  const [moved] = next.splice(from, 1);
+  if (moved) next.splice(to, 0, moved);
+  return next;
+}
+function getColumnHeaderLabel(header) {
+  const h = header.column.columnDef.header;
+  if (typeof h === "string") return h;
+  return header.column.id;
+}
+function getTableLeafColumnOrderList(table) {
+  const o = table.getState().columnOrder;
+  if (o && o.length > 0) return [...o];
+  return table.getVisibleLeafColumns().map((c) => c.id);
+}
+function moveTableColumnOneStep(table, columnId, direction) {
+  const list = getTableLeafColumnOrderList(table);
+  const i = list.indexOf(columnId);
+  if (i < 0) return;
+  const next = [...list];
+  if (direction === "left" && i > 0) {
+    [next[i - 1], next[i]] = [next[i], next[i - 1]];
+  } else if (direction === "right" && i < next.length - 1) {
+    [next[i + 1], next[i]] = [next[i], next[i + 1]];
+  } else {
+    return;
+  }
+  table.setColumnOrder(next);
+}
+function getColumnPinningStyle(column) {
+  const pin = column.getIsPinned();
+  if (!pin) return {};
+  const left = pin === "left" ? column.getStart("left") : void 0;
+  const right = pin === "right" ? column.getAfter("right") : void 0;
+  const zi = 20 + (column.getPinnedIndex() >= 0 ? column.getPinnedIndex() : 0);
+  return {
+    position: "sticky",
+    left: left == null ? void 0 : `${left}px`,
+    right: right == null ? void 0 : `${right}px`,
+    zIndex: zi
+  };
+}
+function getColumnPinningClassName(column) {
+  return column.getIsPinned() ? "bg-background" : void 0;
+}
+var ColumnHeaderMenuInner = forwardRef(function ColumnHeaderMenuInner2({ table, header, columnSort, columnReorder }, ref) {
+  const [open, setOpen] = useState(false);
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: () => {
+        setOpen(true);
+      }
+    }),
+    []
+  );
+  const col = header.column;
+  const id = col.id;
+  const canPin = col.getCanPin();
+  const pin = col.getIsPinned();
+  const list = getTableLeafColumnOrderList(table);
+  const idx = list.indexOf(id);
+  const reorderLocked = getTableViewColumnDisableReorder(col);
+  const canMoveLeft = columnReorder && !reorderLocked && idx > 0;
+  const canMoveRight = columnReorder && !reorderLocked && idx >= 0 && idx < list.length - 1;
+  const canSort = columnSort && col.getCanSort();
+  const hasMoveSection = canMoveLeft || canMoveRight;
+  const hasSortSection = !!canSort;
+  const hasPinSection = canPin;
+  const hasHideSection = col.getCanHide();
+  if (!hasMoveSection && !hasSortSection && !hasPinSection && !hasHideSection) {
+    return null;
+  }
+  const showSepBeforeHide = hasHideSection && (hasMoveSection || hasSortSection || hasPinSection);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 self-stretch items-center",
+        "opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 has-[[data-state=open]]:opacity-100"
+      ),
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(Dropdown, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "xs",
+            iconOnly: true,
+            rounded: "full",
+            className: "touch-manipulation border-none bg-transparent shadow-none",
+            "aria-label": "Column options",
+            children: /* @__PURE__ */ jsx(MoreVertical, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownContent, { align: "end", side: "bottom", offset: 4, children: [
+          hasMoveSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                disabled: !canMoveLeft,
+                icon: /* @__PURE__ */ jsx(
+                  ArrowLeft,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  if (canMoveLeft) moveTableColumnOneStep(table, id, "left");
+                },
+                children: "Move to the left"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                disabled: !canMoveRight,
+                icon: /* @__PURE__ */ jsx(
+                  ArrowRight,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  if (canMoveRight) moveTableColumnOneStep(table, id, "right");
+                },
+                children: "Move to the right"
+              }
+            )
+          ] }) : null,
+          hasMoveSection && (hasSortSection || hasPinSection) ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
+          hasSortSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(
+                  ChevronUp,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  col.toggleSorting(false);
+                },
+                children: "Sort ascending"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  col.toggleSorting(true);
+                },
+                children: "Sort descending"
+              }
+            )
+          ] }) : null,
+          hasSortSection && hasPinSection ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
+          hasPinSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            pin !== "left" ? /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(Pin, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true }),
+                onClick: () => {
+                  col.pin("left");
+                },
+                children: "Pin to the left"
+              }
+            ) : null,
+            pin !== "right" ? /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(
+                  Pin,
+                  {
+                    className: "size-3.5 -scale-x-100",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  col.pin("right");
+                },
+                children: "Pin to the right"
+              }
+            ) : null,
+            pin ? /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(
+                  PinOff,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  col.pin(false);
+                },
+                children: "Unpin column"
+              }
+            ) : null
+          ] }) : null,
+          showSepBeforeHide ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
+          hasHideSection ? /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              icon: /* @__PURE__ */ jsx(EyeOff, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true }),
+              onClick: () => {
+                col.toggleVisibility(false);
+                setOpen(false);
+              },
+              children: "Hide column"
+            }
+          ) : null
+        ] })
+      ] })
+    }
+  );
+});
+ColumnHeaderMenuInner.displayName = "ColumnHeaderMenuInner";
+var ColumnHeaderMenu = memo(ColumnHeaderMenuInner);
+ColumnHeaderMenu.displayName = "ColumnHeaderMenu";
+var TABLE_VIEW_PERSIST_STORAGE_KEY = "@avenueticket/ui/table-view";
+var TABLE_VIEW_PERSIST_DEBOUNCE_MS = 200;
+function emptyRoot() {
+  return { tables: {} };
+}
+function readRoot() {
+  if (typeof window === "undefined") return emptyRoot();
+  try {
+    const raw = localStorage.getItem(TABLE_VIEW_PERSIST_STORAGE_KEY);
+    if (!raw) return emptyRoot();
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") return emptyRoot();
+    const tables = parsed.tables;
+    if (!tables || typeof tables !== "object") return emptyRoot();
+    const out = {};
+    for (const [k, v] of Object.entries(tables)) {
+      if (v && typeof v === "object" && v.v === 1) {
+        out[k] = v;
+      }
+    }
+    return { tables: out };
+  } catch {
+    return emptyRoot();
+  }
+}
+function writeRoot(root) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(TABLE_VIEW_PERSIST_STORAGE_KEY, JSON.stringify(root));
+  } catch {
+  }
+}
+function readSnapshot(persistKey) {
+  const row = readRoot().tables[persistKey];
+  return row?.v === 1 ? row : null;
+}
+function writeSnapshot(persistKey, snapshot) {
+  const root = readRoot();
+  root.tables[persistKey] = snapshot;
+  writeRoot(root);
+}
+function mergePersistedColumnOrder(persisted, defaultOrder) {
+  if (!persisted?.length) return defaultOrder;
+  const allowed = new Set(defaultOrder);
+  const seen = /* @__PURE__ */ new Set();
+  const next = [];
+  for (const id of persisted) {
+    if (allowed.has(id) && !seen.has(id)) {
+      next.push(id);
+      seen.add(id);
+    }
+  }
+  for (const id of defaultOrder) {
+    if (!seen.has(id)) {
+      next.push(id);
+      seen.add(id);
+    }
+  }
+  return next;
+}
+function filterColumnSizingForIds(sizing, allowed) {
+  if (!sizing) return {};
+  const next = {};
+  for (const [id, w] of Object.entries(sizing)) {
+    if (allowed.has(id) && typeof w === "number" && Number.isFinite(w)) {
+      next[id] = w;
+    }
+  }
+  return next;
+}
+function normalizePersistedPinning(raw, allowed) {
+  return {
+    left: (raw?.left ?? []).filter((id) => allowed.has(id)),
+    right: (raw?.right ?? []).filter((id) => allowed.has(id))
+  };
+}
+function filterColumnVisibilityForIds(visibility, allowed) {
+  if (!visibility) return {};
+  const next = {};
+  for (const [id, vis] of Object.entries(visibility)) {
+    if (allowed.has(id) && vis === false) {
+      next[id] = false;
+    }
+  }
+  return next;
+}
+function shallowEqualColumnOrder(a, b) {
+  if (a.length !== b.length) return false;
+  return a.every((id, i) => id === b[i]);
+}
+function useTableViewPersistence(table, persistKey, opts) {
+  const { columnResize, columnHeaderMenu } = opts;
+  const hydratedRef = useRef(false);
+  const skipNextSaveRef = useRef(false);
+  const prevPersistKeyRef = useRef(void 0);
+  const prevLeafIdsKeyRef = useRef("");
+  const prevGatesKeyRef = useRef("");
+  const leafIdsKey = useMemo(
+    () => table.getAllLeafColumns().map((c) => c.id).join("\0"),
+    [table]
+  );
+  const gatesKey = `${columnResize}\0${columnHeaderMenu}`;
+  useLayoutEffect(() => {
+    if (!persistKey) {
+      hydratedRef.current = true;
+      prevPersistKeyRef.current = void 0;
+      return;
+    }
+    const persistChanged = prevPersistKeyRef.current !== persistKey;
+    const leafChanged = prevLeafIdsKeyRef.current !== leafIdsKey;
+    const gatesChanged = prevGatesKeyRef.current !== gatesKey;
+    if (!persistChanged && !leafChanged && !gatesChanged && hydratedRef.current) {
+      return;
+    }
+    prevPersistKeyRef.current = persistKey;
+    prevLeafIdsKeyRef.current = leafIdsKey;
+    prevGatesKeyRef.current = gatesKey;
+    skipNextSaveRef.current = true;
+    const allowed = new Set(table.getAllLeafColumns().map((c) => c.id));
+    if (allowed.size === 0) {
+      hydratedRef.current = true;
+      return;
+    }
+    const saved = readSnapshot(persistKey);
+    const defaultOrder = table.getAllLeafColumns().map((c) => c.id);
+    const cur = table.getState();
+    const curPin = cur.columnPinning ?? { left: [], right: [] };
+    if (saved) {
+      const nextOrder = mergePersistedColumnOrder(
+        saved.columnOrder,
+        defaultOrder
+      );
+      if (!shallowEqualColumnOrder(nextOrder, cur.columnOrder)) {
+        table.setColumnOrder(nextOrder);
+      }
+      if (columnHeaderMenu && saved.columnPinning) {
+        const nextPin = normalizePersistedPinning(saved.columnPinning, allowed);
+        const pinEq = shallowEqualColumnOrder(nextPin.left ?? [], curPin.left ?? []) && shallowEqualColumnOrder(nextPin.right ?? [], curPin.right ?? []);
+        if (!pinEq) {
+          table.setColumnPinning(nextPin);
+        }
+      }
+      if (columnResize && saved.columnSizing) {
+        const nextSizing = filterColumnSizingForIds(
+          saved.columnSizing,
+          allowed
+        );
+        if (JSON.stringify(nextSizing) !== JSON.stringify(cur.columnSizing)) {
+          table.setColumnSizing(nextSizing);
+        }
+      }
+      if (columnHeaderMenu && saved.columnVisibility != null) {
+        const nextVis = filterColumnVisibilityForIds(
+          saved.columnVisibility,
+          allowed
+        );
+        const curVis = cur.columnVisibility ?? {};
+        if (JSON.stringify(nextVis) !== JSON.stringify(curVis)) {
+          table.setColumnVisibility(nextVis);
+        }
+      }
+    }
+    hydratedRef.current = true;
+  }, [
+    persistKey,
+    table,
+    leafIdsKey,
+    gatesKey,
+    columnResize,
+    columnHeaderMenu
+  ]);
+  const s = table.getState();
+  const persistSerial = persistKey == null ? "" : JSON.stringify({
+    columnOrder: s.columnOrder,
+    columnSizing: columnResize ? s.columnSizing : null,
+    columnPinning: columnHeaderMenu ? s.columnPinning : null,
+    columnVisibility: columnHeaderMenu ? s.columnVisibility : null
+  });
+  useEffect(() => {
+    if (!persistKey || !hydratedRef.current) return;
+    if (skipNextSaveRef.current) {
+      skipNextSaveRef.current = false;
+      return;
+    }
+    const id = window.setTimeout(() => {
+      const st = table.getState();
+      writeSnapshot(persistKey, {
+        v: 1,
+        columnOrder: st.columnOrder,
+        ...columnResize ? { columnSizing: st.columnSizing } : {},
+        ...columnHeaderMenu ? {
+          columnPinning: st.columnPinning,
+          columnVisibility: st.columnVisibility
+        } : {}
+      });
+    }, TABLE_VIEW_PERSIST_DEBOUNCE_MS);
+    return () => window.clearTimeout(id);
+  }, [
+    persistKey,
+    persistSerial,
+    table,
+    columnResize,
+    columnHeaderMenu
+  ]);
+}
+var defaultTableConfig = {
+  sortableColumnIds: /* @__PURE__ */ new Set(),
+  enableColumnSort: true,
+  enableColumnReorder: false,
+  enableColumnResize: false,
+  columnDragState: null
+};
+var TableConfigContext = React5.createContext(null);
+TableConfigContext.displayName = "TableConfigContext";
+function setColumnDragPreview(e, options) {
+  if (!e.dataTransfer) return;
+  e.dataTransfer.effectAllowed = "move";
+  const width = options.width ?? 80;
+  const height = options.height ?? 100;
+  const el = document.createElement("div");
+  el.setAttribute("data-table-drag-preview", "");
+  const dark = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const bg = dark ? "rgba(24,24,26,0.95)" : "rgba(255,255,255,0.96)";
+  const fg = dark ? "rgba(250,250,250,0.95)" : "rgba(10,10,10,0.92)";
+  const border = dark ? "1px solid rgba(255,255,255,0.12)" : "1px solid rgba(0,0,0,0.1)";
+  const shadow = "0 12px 32px rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.04)";
+  el.style.cssText = [
+    "position:fixed",
+    "left:0",
+    "top:0",
+    "z-index:100000",
+    "pointer-events:none",
+    "box-sizing:border-box",
+    `width:${width}px`,
+    `min-height:${height}px`,
+    "display:flex",
+    "flex-direction:column",
+    "align-items:center",
+    "justify-content:flex-start",
+    "gap:8px",
+    `padding:10px 8px 12px`,
+    `color:${fg}`,
+    `background:${bg}`,
+    `border:${border}`,
+    "border-radius:8px",
+    `box-shadow:${shadow}`
+  ].join(";");
+  const bar = document.createElement("div");
+  bar.style.cssText = `width:3px;flex:1;min-height:32px;border-radius:2px;background:${dark ? "rgba(80,200,150,0.4)" : "rgba(20,80,200,0.2)"};align-self:stretch;`;
+  const t = document.createElement("div");
+  t.textContent = options.title;
+  t.style.cssText = "font:600 11px/1.2 system-ui,-apple-system,sans-serif;text-align:center;word-break:break-word;max-width:100%;";
+  el.appendChild(t);
+  el.appendChild(bar);
+  el.style.minHeight = `${height}px`;
+  document.body.appendChild(el);
+  void el.offsetWidth;
+  e.dataTransfer.setDragImage(
+    el,
+    options.hotspotX ?? width / 2,
+    options.hotspotY ?? 28
+  );
+  requestAnimationFrame(() => {
+    if (el.parentNode) el.parentNode.removeChild(el);
+  });
+}
+var COLUMN_DRAG_TH_STRIP = "relative z-20 box-border overflow-hidden rounded-t-lg border border-primary/20 bg-primary/8 opacity-70 shadow-sm";
+var COLUMN_DRAG_TD_STRIP = "overflow-hidden border-x border-primary/15 bg-primary/5 opacity-70";
+var columnDragThClasses = (config, columnId) => {
+  if (!config.enableColumnReorder || !config.columnDragState) return void 0;
+  const d = config.columnDragState;
+  const isSource = d.draggingId === columnId;
+  const isDrop = d.dropTargetId === columnId && d.draggingId != null && d.draggingId !== columnId;
+  if (isSource || isDrop) {
+    return COLUMN_DRAG_TH_STRIP;
+  }
+  return void 0;
+};
+var columnDragTdClasses = (config, columnId) => {
+  if (!config.enableColumnReorder || !config.columnDragState) return void 0;
+  const d = config.columnDragState;
+  const isSource = d.draggingId === columnId;
+  const isDrop = d.dropTargetId === columnId && d.draggingId != null && d.draggingId !== columnId;
+  if (isSource || isDrop) {
+    return COLUMN_DRAG_TD_STRIP;
+  }
+  return void 0;
+};
+var Table = React5.forwardRef(
+  ({
+    className,
+    containerClassName,
+    sortableColumns,
+    enableColumnSort: enableColumnSortFromProps,
+    enableColumnReorder: enableColumnReorderFromProps,
+    enableColumnResize: enableColumnResizeFromProps,
+    columnDragState: columnDragStateFromProps,
+    ...props
+  }, ref) => {
+    const config = React5.useMemo(() => {
+      const sortableColumnIds = new Set(sortableColumns ?? []);
+      return {
+        sortableColumnIds,
+        enableColumnSort: enableColumnSortFromProps ?? true,
+        enableColumnReorder: enableColumnReorderFromProps ?? false,
+        enableColumnResize: enableColumnResizeFromProps ?? false,
+        columnDragState: columnDragStateFromProps ?? null
+      };
+    }, [
+      sortableColumns,
+      enableColumnSortFromProps,
+      enableColumnReorderFromProps,
+      enableColumnResizeFromProps,
+      columnDragStateFromProps
+    ]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "table-container",
+        "data-table-sort": config.enableColumnSort ? "on" : "off",
+        "data-table-reorder": config.enableColumnReorder ? "on" : "off",
+        "data-table-resize": config.enableColumnResize ? "on" : "off",
+        className: cn("relative w-full overflow-x-auto", containerClassName),
+        children: /* @__PURE__ */ jsx(TableConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            ref,
+            "data-slot": "table",
+            className: cn(
+              "min-w-full w-max caption-bottom text-sm",
+              className
+            ),
+            ...props
+          }
+        ) })
+      }
+    );
+  }
+);
+Table.displayName = "Table";
+var TableHeader = React5.forwardRef(({ className, ...props }, ref) => {
+  const config = React5.useContext(TableConfigContext) ?? defaultTableConfig;
+  const hasSortableColumns = config.enableColumnSort && config.sortableColumnIds.size > 0;
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      "data-slot": "table-header",
+      className: cn(
+        hasSortableColumns && "[&_tr:hover]:bg-transparent!",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    "data-slot": "table-body",
+    className: cn(
+      "[&>tr:last-child>td:not([data-table-column-drag-strip])]:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    "data-slot": "table-footer",
+    className: cn(
+      "border-t border-primary/10 bg-primary/5 font-medium",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    "data-slot": "table-row",
+    className: cn(
+      "transition-colors duration-0 hover:bg-primary/3 data-[state=selected]:bg-primary/10",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var columnDragHandleIconClass = cn(
+  "text-primary/55 hover:text-primary/80",
+  "cursor-grab active:cursor-grabbing touch-none",
+  "shrink-0"
+);
+var TableColumnDragHandle = React5.forwardRef(function TableColumnDragHandle2({ columnId, previewLabel, className, onDragStart, onDragEnd, title, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex select-none items-center justify-center",
+        columnDragHandleIconClass,
+        className
+      ),
+      title: title ?? "Drag to reorder this column",
+      tabIndex: -1,
+      "aria-label": "Drag to reorder this column",
+      draggable: true,
+      onDragStart: (e) => {
+        e.dataTransfer.setData("text/plain", columnId);
+        setColumnDragPreview(e, { title: previewLabel ?? "Column" });
+        onDragStart?.(e);
+      },
+      onDragEnd,
+      onClick: (ev) => ev.stopPropagation(),
+      onKeyDown: (ev) => {
+        if (ev.key === " " || ev.key === "Enter") {
+          ev.preventDefault();
+        }
+        ev.stopPropagation();
+      },
+      "data-slot": "table-column-drag-handle",
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        GripVertical,
+        {
+          className: "size-4 pointer-events-none",
+          strokeWidth: 2.25,
+          "aria-hidden": true
+        }
+      )
+    }
+  );
+});
+TableColumnDragHandle.displayName = "TableColumnDragHandle";
+function TableHeaderSortControl({
+  activeSort,
+  onRequest,
+  className
+}) {
+  const isActiveSort = activeSort === "asc" || activeSort === "desc";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("inline-flex shrink-0 items-stretch pl-0", className),
+      children: onRequest ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-stretch", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-primary/90 hover:text-primary/95 inline-flex min-h-10 w-8 min-w-8 touch-manipulation items-center justify-center self-center rounded p-0 md:min-h-12",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRequest(e);
+          },
+          title: "Change sort",
+          "aria-label": "Change sort order",
+          children: isActiveSort ? activeSort === "desc" ? /* @__PURE__ */ jsx(
+            ArrowDown,
+            {
+              className: "size-3.5 shrink-0",
+              strokeWidth: 2.25,
+              "aria-hidden": true
+            }
+          ) : /* @__PURE__ */ jsx(
+            ArrowUp,
+            {
+              className: "size-3.5 shrink-0",
+              strokeWidth: 2.25,
+              "aria-hidden": true
+            }
+          ) : /* @__PURE__ */ jsx(
+            ArrowUp,
+            {
+              className: "text-primary/85 size-3.5 shrink-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
+              strokeWidth: 2.25,
+              "aria-hidden": true
+            }
+          )
+        }
+      ) }) : isActiveSort ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: activeSort === "desc" ? /* @__PURE__ */ jsx(
+        ArrowDown,
+        {
+          className: "size-3.5 shrink-0 self-center text-primary/90",
+          strokeWidth: 2.25,
+          "aria-hidden": true
+        }
+      ) : /* @__PURE__ */ jsx(
+        ArrowUp,
+        {
+          className: "size-3.5 shrink-0 self-center text-primary/90",
+          strokeWidth: 2.25,
+          "aria-hidden": true
+        }
+      ) }) : /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx(
+        ArrowUp,
+        {
+          className: "text-primary/85 size-3.5 shrink-0 self-center opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
+          strokeWidth: 2.25,
+          "aria-hidden": true
+        }
+      ) })
+    }
+  );
+}
+var TableHead = React5.forwardRef(
+  ({
+    className,
+    columnId,
+    children,
+    activeSort,
+    onColumnResizeStart,
+    isColumnResizing,
+    style,
+    headerEnd,
+    ...props
+  }, ref) => {
+    const config = React5.useContext(TableConfigContext) ?? defaultTableConfig;
+    const showSortUI = config.enableColumnSort && columnId !== void 0 && config.sortableColumnIds.has(columnId);
+    const isActiveSort = showSortUI && (activeSort === "asc" || activeSort === "desc");
+    const hasHeaderEnd = headerEnd != null && headerEnd !== false;
+    const showResizer = config.enableColumnResize && typeof onColumnResizeStart === "function";
+    const drag = columnId ? columnDragThClasses(config, columnId) : void 0;
+    return /* @__PURE__ */ jsxs(
+      "th",
+      {
+        ref,
+        "data-resizing": isColumnResizing ? 1 : void 0,
+        "data-slot": "table-head",
+        "data-column-id": columnId,
+        "data-sortable": showSortUI ? "true" : void 0,
+        "data-sorted": isActiveSort ? activeSort ?? void 0 : void 0,
+        "aria-sort": isActiveSort && activeSort ? activeSort === "desc" ? "descending" : "ascending" : showSortUI ? "none" : void 0,
+        className: cn(
+          "h-10 min-w-0 px-3 text-left align-middle text-sm font-bold text-primary transition-colors duration-0 md:h-12 md:px-4 [&:has([role=checkbox])]:pr-0",
+          !drag && "border-b border-primary/10",
+          showResizer && "relative",
+          // th cursor-pointer is often overridden by child button default cursor
+          (showSortUI || hasHeaderEnd) && "group hover:bg-primary/5 [&_button]:cursor-pointer",
+          drag,
+          isColumnResizing && "opacity-100",
+          className
+        ),
+        style,
+        ...props,
+        children: [
+          showSortUI ? /* @__PURE__ */ jsxs("span", { className: "inline-flex h-full w-full min-h-0 min-w-0 max-w-full items-center justify-start gap-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-h-0 min-w-0 flex-1 text-left [&_[data-slot=table-column-drag-handle]]:cursor-grab [&_[data-slot=table-column-drag-handle]]:active:cursor-grabbing", children }),
+            hasHeaderEnd ? /* @__PURE__ */ jsx("span", { className: "inline-flex min-h-0 min-w-0 shrink-0 items-center", children: headerEnd }) : null
+          ] }) : hasHeaderEnd ? /* @__PURE__ */ jsxs("span", { className: "inline-flex h-full w-full min-h-0 min-w-0 max-w-full items-center justify-start gap-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-h-0 min-w-0 flex-1 text-left [&_[data-slot=table-column-drag-handle]]:cursor-grab [&_[data-slot=table-column-drag-handle]]:active:cursor-grabbing", children }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex min-h-0 min-w-0 shrink-0 items-center", children: headerEnd })
+          ] }) : children,
+          showResizer && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "separator",
+              title: "Drag to resize",
+              onMouseDown: onColumnResizeStart,
+              onTouchStart: onColumnResizeStart,
+              className: cn(
+                // keep handle inside this th — negative right overlapped the next cell (bad with sticky/pinned columns)
+                "absolute top-0 right-0 z-1 h-full w-2.5 min-w-2.5 max-w-2.5 touch-none",
+                "cursor-col-resize select-none",
+                isColumnResizing ? "bg-primary/35" : "bg-primary/0 hover:bg-primary/25"
+              ),
+              "data-slot": "table-column-resize-handle",
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+var TableCell = React5.forwardRef(
+  ({ className, style, columnId, ...props }, ref) => {
+    const config = React5.useContext(TableConfigContext) ?? defaultTableConfig;
+    const drag = columnId ? columnDragTdClasses(config, columnId) : void 0;
+    const columnDragStrip = Boolean(drag);
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        "data-slot": "table-cell",
+        "data-table-column-drag-strip": columnDragStrip ? "" : void 0,
+        className: cn(
+          "min-w-0 border-b border-primary/10 p-3 align-middle text-sm text-primary/90 md:p-4 [&:has([role=checkbox])]:pr-0",
+          drag,
+          className
+        ),
+        style,
+        "data-column-id": columnId,
+        ...props
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+function sizingUpdaterToFn(updater) {
+  return typeof updater === "function" ? updater : () => updater;
+}
+function useRafBatchedColumnSizing(setColumnSizing) {
+  const rafRef = useRef(null);
+  const queueRef = useRef(
+    []
+  );
+  useEffect(
+    () => () => {
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    },
+    []
+  );
+  return useCallback(
+    (updater) => {
+      queueRef.current.push(sizingUpdaterToFn(updater));
+      if (rafRef.current != null) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        const fns = queueRef.current;
+        queueRef.current = [];
+        if (fns.length === 0) return;
+        setColumnSizing((prev) => fns.reduce((acc, f) => f(acc), prev));
+      });
+    },
+    [setColumnSizing]
+  );
+}
+function useTransitionColumnSizing(setColumnSizing) {
+  return useCallback(
+    (updater) => {
+      startTransition(() => {
+        setColumnSizing(updater);
+      });
+    },
+    [setColumnSizing]
+  );
+}
+var EMPTY_STRING_ARRAY = [];
+var tableViewColumnRoundTop = "overflow-hidden rounded-t-lg";
+var tableViewColumnRoundBottom = "overflow-hidden rounded-b-lg";
+var TableViewColumnHead = React5.memo(
+  function TableViewColumnHead2(props) {
+    const {
+      header,
+      table,
+      options,
+      getColumnMinClassName,
+      onHeaderCellDragOver,
+      onHeaderCellDrop,
+      onHeaderContextMenu,
+      setDraggedId,
+      setDropTargetId,
+      endColumnDrag,
+      registerColumnMenu
+    } = props;
+    const id = header.column.id;
+    const canSort = header.column.getCanSort() && options.columnSort;
+    const isSorted = header.column.getIsSorted();
+    const hSize = header.getSize();
+    const canResize = options.columnResize && header.column.getCanResize();
+    const resizer = header.getResizeHandler();
+    const onSort = header.column.getToggleSortingHandler();
+    const runSort = useCallback(
+      (e) => {
+        onSort?.(e);
+      },
+      [onSort]
+    );
+    const setMenuRef = useCallback(
+      (h) => {
+        registerColumnMenu(id, h);
+      },
+      [id, registerColumnMenu]
+    );
+    const onDragStartReorder = useCallback(() => {
+      setDraggedId(id);
+      setDropTargetId(null);
+    }, [id, setDraggedId, setDropTargetId]);
+    const disableColumnReorder = getTableViewColumnDisableReorder(
+      header.column
+    );
+    const showReorderHandle = options.columnReorder && !disableColumnReorder;
+    const headerInnerGap = showReorderHandle ? "gap-2" : "gap-1.5";
+    const pinStyle = getColumnPinningStyle(header.column);
+    const sizeStyle = options.columnResize ? {
+      width: hSize,
+      minWidth: header.column.columnDef.minSize,
+      maxWidth: header.column.columnDef.maxSize
+    } : void 0;
+    return /* @__PURE__ */ jsx(
+      TableHead,
+      {
+        colSpan: header.colSpan,
+        className: cn(
+          tableViewColumnRoundTop,
+          !options.columnResize && getColumnMinClassName?.(id),
+          getColumnPinningClassName(header.column),
+          header.column.getIsPinned() && "hover:bg-[color-mix(in_oklab,var(--color-primary)_5%,var(--color-background))]",
+          options.columnHeaderMenu && !header.isPlaceholder && "group"
+        ),
+        style: { ...pinStyle, ...sizeStyle },
+        columnId: id,
+        activeSort: canSort ? isSorted === "asc" || isSorted === "desc" ? isSorted : null : null,
+        onColumnResizeStart: canResize ? resizer : void 0,
+        isColumnResizing: header.column.getIsResizing(),
+        headerEnd: options.columnHeaderMenu && !header.isPlaceholder ? /* @__PURE__ */ jsx(
+          ColumnHeaderMenu,
+          {
+            ref: setMenuRef,
+            table,
+            header,
+            columnSort: options.columnSort,
+            columnReorder: options.columnReorder
+          }
+        ) : void 0,
+        onContextMenu: options.columnHeaderMenu && !header.isPlaceholder ? onHeaderContextMenu : void 0,
+        onDragOver: onHeaderCellDragOver,
+        onDrop: options.columnReorder ? onHeaderCellDrop : void 0,
+        children: /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "box-border flex h-full min-h-0 w-full min-w-0 max-w-full flex-1 items-center",
+              headerInnerGap
+            ),
+            children: [
+              showReorderHandle ? /* @__PURE__ */ jsx(
+                TableColumnDragHandle,
+                {
+                  className: "shrink-0 self-center",
+                  columnId: id,
+                  previewLabel: getColumnHeaderLabel(header),
+                  onDragStart: onDragStartReorder,
+                  onDragEnd: endColumnDrag
+                }
+              ) : null,
+              header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex w-max min-w-0 max-w-full shrink-0 items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-primary hover:text-primary/90 m-0 min-h-10 min-w-0 max-w-full cursor-pointer truncate border-0 bg-transparent py-0 pr-0 pl-0 text-left text-sm font-bold leading-snug md:min-h-12",
+                      onClick: runSort,
+                      children: flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TableHeaderSortControl,
+                    {
+                      activeSort: isSorted === "asc" || isSorted === "desc" ? isSorted : null,
+                      onRequest: runSort
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "m-0 min-h-10 min-w-0 flex-1 cursor-pointer self-stretch border-0 bg-transparent p-0 shadow-none md:min-h-12 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-0",
+                    "aria-label": "Change sort",
+                    title: "Change sort",
+                    onClick: runSort
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 self-center text-left", children: flexRender(header.column.columnDef.header, header.getContext()) })
+            ]
+          }
+        )
+      }
+    );
+  },
+  (prev, next) => {
+    if (prev.header.id !== next.header.id) return false;
+    if (prev.header.column.getIsResizing() !== next.header.column.getIsResizing()) {
+      return false;
+    }
+    if (prev.header.column.getIsSorted() !== next.header.column.getIsSorted()) {
+      return false;
+    }
+    if (prev.header.getSize() !== next.header.getSize()) return false;
+    if (prev.header.column.getIsPinned() !== next.header.column.getIsPinned()) {
+      return false;
+    }
+    if (prev.header.isPlaceholder !== next.header.isPlaceholder) return false;
+    if (getTableViewColumnDisableReorder(prev.header.column) !== getTableViewColumnDisableReorder(next.header.column)) {
+      return false;
+    }
+    if (prev.options.columnSort !== next.options.columnSort) return false;
+    if (prev.options.columnReorder !== next.options.columnReorder) return false;
+    if (prev.options.columnResize !== next.options.columnResize) return false;
+    if (prev.options.columnHeaderMenu !== next.options.columnHeaderMenu) {
+      return false;
+    }
+    if (prev.getColumnMinClassName !== next.getColumnMinClassName) {
+      return false;
+    }
+    if (prev.draggedId !== next.draggedId) {
+      return false;
+    }
+    if (prev.table !== next.table) return false;
+    if (prev.onHeaderCellDragOver !== next.onHeaderCellDragOver) return false;
+    if (prev.onHeaderCellDrop !== next.onHeaderCellDrop) return false;
+    if (prev.onHeaderContextMenu !== next.onHeaderContextMenu) return false;
+    if (prev.setDraggedId !== next.setDraggedId) return false;
+    if (prev.setDropTargetId !== next.setDropTargetId) return false;
+    if (prev.endColumnDrag !== next.endColumnDrag) return false;
+    if (prev.registerColumnMenu !== next.registerColumnMenu) return false;
+    return true;
+  }
+);
+var TableViewDataRow = React5.memo(function TableViewDataRow2({
+  row,
+  getColumnMinClassName,
+  options,
+  isLastRow
+}) {
+  return /* @__PURE__ */ jsxs(
+    TableRow,
+    {
+      className: "relative isolate",
+      "data-state": row.getIsSelected() ? "selected" : void 0,
+      children: [
+        options.rowSelection ? /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            className: cn(
+              "w-10 min-w-10 max-w-12 shrink-0 !px-2 !py-3 text-center align-middle md:!px-2.5 md:!py-4",
+              isLastRow && tableViewColumnRoundBottom
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx("span", { className: "inline-flex w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                className: "scale-90",
+                checked: row.getIsSelected(),
+                disabled: !row.getCanSelect(),
+                onCheckedChange: (next) => {
+                  if (!row.getCanSelect()) return;
+                  row.toggleSelected(!!next);
+                },
+                "aria-label": "Select this row"
+              }
+            ) })
+          }
+        ) : null,
+        row.getVisibleCells().map((cell) => {
+          const cid = cell.column.id;
+          const cSize = cell.column.getSize();
+          const cellPin = getColumnPinningStyle(cell.column);
+          const cellSize = options.columnResize ? {
+            width: cSize,
+            minWidth: cell.column.columnDef.minSize,
+            maxWidth: cell.column.columnDef.maxSize
+          } : {};
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              columnId: cid,
+              className: cn(
+                !options.columnResize ? getColumnMinClassName?.(cid) : void 0,
+                getColumnPinningClassName(cell.column),
+                isLastRow && tableViewColumnRoundBottom
+              ),
+              style: { ...cellPin, ...cellSize },
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          );
+        })
+      ]
+    }
+  );
+});
+function TableView({
+  table,
+  sortableColumnIds: sortableColumns,
+  options: optionsProp,
+  getColumnMinClassName,
+  containerClassName,
+  persistKey
+}) {
+  const options = useMemo(
+    () => ({
+      columnSort: optionsProp?.columnSort ?? true,
+      columnReorder: optionsProp?.columnReorder ?? false,
+      columnResize: optionsProp?.columnResize ?? false,
+      rowSelection: optionsProp?.rowSelection ?? false,
+      columnHeaderMenu: optionsProp?.columnHeaderMenu ?? false
+    }),
+    [
+      optionsProp?.columnSort,
+      optionsProp?.columnReorder,
+      optionsProp?.columnResize,
+      optionsProp?.rowSelection,
+      optionsProp?.columnHeaderMenu
+    ]
+  );
+  useTableViewPersistence(table, persistKey, {
+    columnResize: options.columnResize,
+    columnHeaderMenu: options.columnHeaderMenu
+  });
+  const [draggedId, setDraggedId] = useState(null);
+  const [dropTargetId, setDropTargetId] = useState(null);
+  const columnMenuByIdRef = useRef({});
+  const tableForMenu = table;
+  const endColumnDrag = useCallback(() => {
+    setDraggedId(null);
+    setDropTargetId(null);
+  }, []);
+  const onDragOverCell = useCallback(
+    (e) => e.preventDefault(),
+    []
+  );
+  const onHeaderContextMenu = useCallback(
+    (e) => {
+      const t = e.currentTarget;
+      const colId = t.getAttribute("data-column-id");
+      if (!colId) return;
+      e.preventDefault();
+      e.stopPropagation();
+      columnMenuByIdRef.current[colId]?.open();
+    },
+    []
+  );
+  const onHeaderCellDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      const toId = e.currentTarget.getAttribute("data-column-id");
+      if (!toId) return;
+      const from = e.dataTransfer.getData("text/plain");
+      if (!from || from === toId) return;
+      table.setColumnOrder((o) => moveColumnInOrder([...o], from, toId));
+      endColumnDrag();
+    },
+    [table, endColumnDrag]
+  );
+  const onHeaderCellDragOver = useCallback(
+    (e) => {
+      onDragOverCell(e);
+      if (!options.columnReorder || !draggedId) return;
+      const colId = e.currentTarget.getAttribute("data-column-id");
+      if (colId) setDropTargetId(colId);
+    },
+    [onDragOverCell, options.columnReorder, draggedId, setDropTargetId]
+  );
+  const registerColumnMenu = useCallback(
+    (columnId, h) => {
+      if (h) columnMenuByIdRef.current[columnId] = h;
+      else delete columnMenuByIdRef.current[columnId];
+    },
+    []
+  );
+  const sortableForTable = useMemo(
+    () => options.columnSort ? sortableColumns : EMPTY_STRING_ARRAY,
+    [options.columnSort, sortableColumns]
+  );
+  const columnDragState = useMemo(
+    () => options.columnReorder ? { draggingId: draggedId, dropTargetId } : null,
+    [options.columnReorder, draggedId, dropTargetId]
+  );
+  const pageRows = table.getRowModel().rows;
+  const dataRowOptions = useMemo(
+    () => ({
+      columnResize: options.columnResize,
+      rowSelection: options.rowSelection
+    }),
+    [options.columnResize, options.rowSelection]
+  );
+  return /* @__PURE__ */ jsxs(
+    Table,
+    {
+      className: "border-separate border-spacing-0",
+      sortableColumns: sortableForTable,
+      enableColumnSort: options.columnSort,
+      enableColumnReorder: options.columnReorder,
+      enableColumnResize: options.columnResize,
+      columnDragState,
+      containerClassName: containerClassName ?? "min-w-0",
+      children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => {
+          const allPageSelected = table.getIsAllPageRowsSelected();
+          const somePageSelected = table.getIsSomePageRowsSelected();
+          return /* @__PURE__ */ jsxs(TableRow, { className: "relative isolate", children: [
+            options.rowSelection ? /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                className: cn(
+                  "w-10 min-w-10 max-w-12 shrink-0 !px-2 text-center align-middle md:!px-2.5",
+                  tableViewColumnRoundTop
+                ),
+                onDragOver: onDragOverCell,
+                scope: "col",
+                children: /* @__PURE__ */ jsx("span", { className: "inline-flex w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    className: "scale-90",
+                    checked: allPageSelected,
+                    indeterminate: !allPageSelected && somePageSelected,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      table.getToggleAllPageRowsSelectedHandler()(e);
+                      e.preventDefault();
+                    },
+                    title: "Select all on this page",
+                    "aria-label": "Select all rows on this page"
+                  }
+                ) })
+              }
+            ) : null,
+            headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+              TableViewColumnHead,
+              {
+                table: tableForMenu,
+                header,
+                options,
+                getColumnMinClassName,
+                draggedId,
+                onHeaderCellDragOver,
+                onHeaderCellDrop,
+                onHeaderContextMenu,
+                setDraggedId,
+                setDropTargetId,
+                endColumnDrag,
+                registerColumnMenu
+              },
+              header.id
+            ))
+          ] }, headerGroup.id);
+        }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: pageRows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+          TableViewDataRow,
+          {
+            row,
+            getColumnMinClassName,
+            options: dataRowOptions,
+            isLastRow: rowIndex === pageRows.length - 1
+          },
+          row.id
+        )) })
+      ]
+    }
+  );
+}
+/*! Bundled license information:
+
+@tanstack/react-table/build/lib/index.mjs:
+  (**
+     * react-table
+     *
+     * Copyright (c) TanStack
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE.md file in the root directory of this source tree.
+     *
+     * @license MIT
+     *)
+*/
+
+export { TABLE_VIEW_PERSIST_STORAGE_KEY, TableView, getColumnHeaderLabel, getSelectedRowIds, moveColumnInOrder, useRafBatchedColumnSizing, useTransitionColumnSizing };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map