@exxatdesignux/ui 0.2.19 → 0.3.0

package/dist/components/table-properties/drawer.js

@@ -0,0 +1,2595 @@
+"use client";
+import * as React11 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Label as Label$1, RadioGroup as RadioGroup$1, Slot, Dialog, Select as Select$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1, Popover as Popover$1 } from 'radix-ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+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/data-list-view.ts
+var DATA_LIST_VIEW_TILES = [
+  { value: "table", icon: "fa-table", label: "Table view" },
+  { value: "list", icon: "fa-list", label: "List view" },
+  { value: "board", icon: "fa-table-columns", label: "Board view" },
+  { value: "dashboard", icon: "fa-chart-mixed", label: "Dashboard view" },
+  { value: "calendar", icon: "fa-calendar-days", label: "Calendar view" },
+  { value: "folder", icon: "fa-grid-2", label: "Folder view" },
+  { value: "panel", icon: "fa-sidebar", label: "List & details" },
+  { value: "tree-panel", icon: "fa-sitemap", label: "Tree & details" }
+];
+function dataListViewLabel(view) {
+  return DATA_LIST_VIEW_TILES.find((t) => t.value === view)?.label ?? view;
+}
+
+// src/lib/data-list-view-surface.ts
+function getDataListViewRenderKind(view) {
+  switch (view) {
+    case "table":
+      return "data-table";
+    case "list":
+      return "list-with-toolbar";
+    case "board":
+      return "board-with-toolbar";
+    case "dashboard":
+      return "dashboard-with-toolbar";
+    case "calendar":
+      return "calendar-with-toolbar";
+    case "folder":
+      return "folder-with-toolbar";
+    case "panel":
+      return "panel-with-toolbar";
+    case "tree-panel":
+      return "tree-panel-with-toolbar";
+    default: {
+      const _x = view;
+      return _x;
+    }
+  }
+}
+
+// src/lib/data-list-view-registry.ts
+var DEFINITIONS = DATA_LIST_VIEW_TILES.map((tile) => {
+  const renderKind = getDataListViewRenderKind(tile.value);
+  const hubMetricsStrip = renderKind !== "calendar-with-toolbar" && renderKind !== "dashboard-with-toolbar";
+  return {
+    value: tile.value,
+    label: tile.label,
+    icon: tile.icon,
+    renderKind,
+    hubMetricsStrip
+  };
+});
+new Map(
+  DEFINITIONS.map((d) => [d.value, d])
+);
+var DATA_LIST_VIEW_REGISTRY = DEFINITIONS;
+function dataListViewTilesForHub(supported) {
+  const allowed = new Set(supported);
+  return DATA_LIST_VIEW_REGISTRY.filter((d) => allowed.has(d.value)).map((d) => ({
+    type: d.value,
+    label: d.label,
+    icon: d.icon
+  }));
+}
+new Set(
+  DATA_LIST_VIEW_REGISTRY.map((d) => d.value)
+);
+
+// src/lib/row-height.ts
+var ROW_HEIGHT_TILES = [
+  { value: "compact", label: "Compact", icon: "fa-down-to-line" },
+  { value: "default", label: "Default", icon: "fa-arrows-up-down" },
+  { value: "comfortable", label: "Comfortable", icon: "fa-up-to-line" }
+];
+var Label = React11.forwardRef(function Label2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Label$1.Root,
+    {
+      ref,
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var radioGroupItemVariants = cva(
+  [
+    "group/radio-group-item peer relative flex shrink-0 aspect-square rounded-full 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:data-[state=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"
+        ].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"
+        ].join(" "),
+        secondary: [
+          "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground"
+        ].join(" "),
+        success: [
+          "data-[state=checked]:border-chart-2 data-[state=checked]:bg-chart-2 data-[state=checked]:text-primary-foreground"
+        ].join(" "),
+        destructive: [
+          "data-[state=checked]:border-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground"
+        ].join(" "),
+        warning: [
+          "data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500 data-[state=checked]:text-amber-950"
+        ].join(" "),
+        muted: [
+          "data-[state=checked]:border-muted-foreground/50 data-[state=checked]:bg-muted data-[state=checked]:text-foreground"
+        ].join(" ")
+      },
+      size: {
+        sm: "size-3.5 min-h-3.5 min-w-3.5 max-h-3.5 max-w-3.5",
+        default: "size-4 min-h-4 min-w-4 max-h-4 max-w-4",
+        lg: "size-5 min-h-5 min-w-5 max-h-5 max-w-5"
+      },
+      motion: {
+        none: "",
+        pop: [
+          "motion-safe:active:scale-95",
+          "data-[state=checked]:motion-safe:scale-[1.04]"
+        ].join(" "),
+        glow: "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35",
+        "pop-glow": [
+          "motion-safe:active:scale-95",
+          "data-[state=checked]:motion-safe:scale-[1.04]",
+          "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      motion: "none"
+    }
+  }
+);
+var radioIndicatorDotVariants = cva(
+  "pointer-events-none absolute top-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-foreground",
+        outline: "bg-primary",
+        secondary: "bg-secondary-foreground",
+        success: "bg-primary-foreground",
+        destructive: "bg-destructive-foreground",
+        warning: "bg-amber-950",
+        muted: "bg-foreground"
+      },
+      size: {
+        sm: "size-1.5",
+        default: "size-2",
+        lg: "size-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var radioIndicatorWrapperVariants = cva("relative flex size-full items-center justify-center", {
+  variants: {
+    motion: {
+      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 RadioGroupItemChromeContext = React11.createContext({});
+function RadioGroup({
+  className,
+  itemVariant,
+  itemSize,
+  itemMotion,
+  ...props
+}) {
+  const ctx = React11.useMemo(
+    () => ({ itemVariant, itemSize, itemMotion }),
+    [itemVariant, itemSize, itemMotion]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupItemChromeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    RadioGroup$1.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid w-full gap-2", className),
+      ...props
+    }
+  ) });
+}
+var RadioGroupItem = React11.forwardRef(function RadioGroupItem2({ className, variant: variantProp, size: sizeProp, motion: motionProp, ...props }, ref) {
+  const ctx = React11.useContext(RadioGroupItemChromeContext);
+  const variant = variantProp ?? ctx.itemVariant;
+  const size = sizeProp ?? ctx.itemSize;
+  const motion = motionProp ?? ctx.itemMotion ?? "none";
+  const vResolved = variant ?? "default";
+  const sResolved = size ?? "default";
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1.Item,
+    {
+      ref,
+      "data-slot": "radio-group-item",
+      "data-variant": vResolved,
+      "data-motion": motion,
+      className: cn(radioGroupItemVariants({ variant, size, motion }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadioGroup$1.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: radioIndicatorWrapperVariants({ motion }),
+          children: /* @__PURE__ */ jsx("span", { className: radioIndicatorDotVariants({ variant: vResolved, size: sResolved }) })
+        }
+      )
+    }
+  );
+});
+function selectionTileClassNames(selected) {
+  return cn(
+    "flex aspect-square flex-col items-center justify-center gap-1.5 rounded-lg border px-2 py-3 text-xs leading-tight transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    selected ? "border-brand bg-brand/5 text-foreground font-medium shadow-sm" : "border-border bg-background text-muted-foreground hover:border-border/80 hover:text-interactive-hover-foreground"
+  );
+}
+function selectionTilePreviewClassNames(selected) {
+  return cn(
+    "relative box-border flex aspect-square w-full max-w-full flex-col rounded-lg border p-1 transition-colors",
+    selected ? "border-brand bg-brand/5 shadow-sm" : "border-border bg-background hover:border-border/80"
+  );
+}
+function SelectionTileGraphic({
+  option,
+  selected
+}) {
+  if (option.leading != null) {
+    return /* @__PURE__ */ jsx("span", { className: "flex h-full min-h-0 w-full min-w-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-full [&_svg]:max-w-full [&_svg]:object-contain [&_svg]:object-center", children: option.leading });
+  }
+  if (option.icon) {
+    return /* @__PURE__ */ jsx(
+      "i",
+      {
+        className: cn(
+          "fa-light shrink-0 text-[18px] leading-none",
+          option.icon,
+          selected && "text-brand"
+        ),
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return null;
+}
+function SelectionTileLabelText({
+  option
+}) {
+  return /* @__PURE__ */ jsx("span", { className: "text-center leading-tight", children: option.label });
+}
+function SelectionTileCaptionBelow({
+  option,
+  selected,
+  ariaHidden = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "max-w-full px-0.5 text-center text-xs leading-tight",
+        selected ? "font-medium text-foreground" : "text-muted-foreground"
+      ),
+      ...ariaHidden ? { "aria-hidden": true } : {},
+      children: option.label
+    }
+  );
+}
+function SelectionTileGrid({
+  sectionLabel,
+  options,
+  columns = 4,
+  value,
+  onValueChange,
+  interaction,
+  idPrefix = "tile",
+  className,
+  labelPlacement = "inside",
+  itemVariant,
+  itemSize,
+  itemMotion
+}) {
+  const gridClass = cn(
+    "gap-2",
+    columns === 2 && "grid grid-cols-2",
+    columns === 3 && "grid grid-cols-3",
+    columns === 4 && "grid grid-cols-4"
+  );
+  if (interaction === "radio") {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      sectionLabel ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: sectionLabel }) : null,
+      /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          value,
+          onValueChange: (v) => onValueChange(v),
+          className: gridClass,
+          itemVariant,
+          itemSize,
+          itemMotion,
+          children: options.map((opt) => {
+            const selected = value === opt.value;
+            const id = `${idPrefix}-${opt.value}`;
+            if (labelPlacement === "below") {
+              return /* @__PURE__ */ jsxs(
+                Label,
+                {
+                  htmlFor: id,
+                  className: cn(
+                    "flex min-w-0 cursor-pointer flex-col items-center gap-1.5 rounded-lg focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: cn("flex w-full justify-center", selectionTilePreviewClassNames(selected)), children: [
+                      /* @__PURE__ */ jsx(RadioGroupItem, { value: opt.value, id, className: "sr-only" }),
+                      /* @__PURE__ */ jsx("span", { className: "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(SelectionTileGraphic, { option: opt, selected }) })
+                    ] }),
+                    /* @__PURE__ */ jsx(SelectionTileCaptionBelow, { option: opt, selected })
+                  ]
+                },
+                opt.value
+              );
+            }
+            return /* @__PURE__ */ jsxs(
+              Label,
+              {
+                htmlFor: id,
+                className: cn(
+                  "cursor-pointer rounded-lg focus-within:rounded-lg focus-within:ring-2 focus-within:ring-ring focus-within:outline-none",
+                  selectionTileClassNames(selected)
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(RadioGroupItem, { value: opt.value, id, className: "sr-only" }),
+                  /* @__PURE__ */ jsx(SelectionTileGraphic, { option: opt, selected }),
+                  /* @__PURE__ */ jsx(SelectionTileLabelText, { option: opt })
+                ]
+              },
+              opt.value
+            );
+          })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    sectionLabel ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: sectionLabel }) : null,
+    /* @__PURE__ */ jsx("div", { className: gridClass, children: options.map((opt) => {
+      const selected = value === opt.value;
+      if (labelPlacement === "below") {
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": opt.label,
+            "aria-pressed": selected,
+            onClick: () => onValueChange(opt.value),
+            className: "flex min-w-0 flex-col items-center gap-1.5 rounded-lg border-0 bg-transparent p-0 text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("flex w-full justify-center", selectionTilePreviewClassNames(selected)), children: /* @__PURE__ */ jsx("span", { className: "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(SelectionTileGraphic, { option: opt, selected }) }) }),
+              /* @__PURE__ */ jsx(SelectionTileCaptionBelow, { option: opt, selected, ariaHidden: true })
+            ]
+          },
+          opt.value
+        );
+      }
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": opt.label,
+          "aria-pressed": selected,
+          onClick: () => onValueChange(opt.value),
+          className: selectionTileClassNames(selected),
+          children: [
+            /* @__PURE__ */ jsx(SelectionTileGraphic, { option: opt, selected }),
+            /* @__PURE__ */ jsx(SelectionTileLabelText, { option: opt })
+          ]
+        },
+        opt.value
+      );
+    }) })
+  ] });
+}
+
+// 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
+    }
+  );
+}
+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 = React11.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";
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-overlay duration-300 ease-out supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  showOverlay = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    showOverlay && /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-left-6 data-[side=right]:data-open:slide-in-from-right-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-left-6 data-[side=right]:data-closed:slide-out-to-right-6 data-[side=top]:data-closed:slide-out-to-top-6",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "absolute top-3 end-3",
+              size: "icon-sm",
+              children: [
+                /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn(
+        "text-base font-medium text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pe-2 ps-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/15 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-down pointer-events-none size-4 text-muted-foreground", "aria-hidden": "true" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Select$1.Content,
+    {
+      "data-slot": "select-content",
+      "data-align-trigger": position === "item-aligned",
+      className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          Select$1.Viewport,
+          {
+            "data-position": position,
+            className: cn(
+              "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+              position === "popper" && ""
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute end-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-check pointer-events-none", "aria-hidden": "true" }) }) }),
+        /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "i",
+        {
+          className: "fa-light fa-chevron-up",
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "i",
+        {
+          className: "fa-light fa-chevron-down",
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+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 ToggleSwitch({ checked, onChange, id }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      onClick: () => onChange(!checked),
+      className: cn(
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-input transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        checked ? "bg-primary" : "bg-input"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: cn(
+        "pointer-events-none inline-block size-4 rounded-full bg-primary-foreground shadow-sm transition-transform",
+        checked ? "translate-x-4" : "translate-x-0"
+      ) })
+    }
+  );
+}
+var Input = React11.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 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 = React11.useRef(null);
+  React11.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
+    }
+  );
+}
+
+// src/lib/date-filter.ts
+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 FilterDateCalendar({
+  valueYmd,
+  onChangeYmd,
+  label
+}) {
+  const [timeZone, setTimeZone] = React11.useState();
+  React11.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 = React11.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
+    }
+  );
+});
+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 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
+    }
+  ) });
+}
+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
+    }
+  );
+}
+
+// src/lib/table-properties-types.ts
+var OPERATOR_LABELS = {
+  is: "is",
+  is_not: "is not",
+  contains: "contains",
+  not_contains: "does not contain"
+};
+var RULE_COLORS = [
+  { name: "Green", bg: "var(--conditional-rule-green)" },
+  { name: "Yellow", bg: "var(--conditional-rule-yellow)" },
+  { name: "Blue", bg: "var(--conditional-rule-blue)" },
+  { name: "Red", bg: "var(--conditional-rule-red)" },
+  { name: "Purple", bg: "var(--conditional-rule-purple)" },
+  { name: "Orange", bg: "var(--conditional-rule-orange)" }
+];
+function DrawerFilterCard(props) {
+  const {
+    fieldDef,
+    expanded,
+    onToggleExpand,
+    onRemove,
+    renderOptionLabel
+  } = props;
+  const isCond = props.variant === "conditional";
+  const filter = props.filter;
+  const filterId = filter.id;
+  const onUpdate = props.onUpdate;
+  const [optSearch, setOptSearch] = React11.useState("");
+  const options = fieldDef.options ?? [];
+  const showSearch = options.length > 8;
+  const filteredOpts = optSearch ? options.filter((o) => o.label.toLowerCase().includes(optSearch.toLowerCase())) : options;
+  const values = filter.values;
+  React11.useEffect(() => {
+    if (fieldDef.type !== "select" && fieldDef.type !== "date") return;
+    if (filter.operator !== "is" && filter.operator !== "is_not") {
+      onUpdate(filterId, { operator: "is" });
+    }
+  }, [filter.operator, filter.id, fieldDef.type, filterId, onUpdate]);
+  function toggleValue(val) {
+    const next = values.includes(val) ? values.filter((v) => v !== val) : [...values, val];
+    onUpdate(filterId, { values: next });
+  }
+  function cycleOperator() {
+    const ops = fieldDef.operators;
+    const idx = ops.indexOf(filter.operator);
+    const i = idx === -1 ? 0 : idx;
+    onUpdate(filterId, { operator: ops[(i + 1) % ops.length] });
+  }
+  const removeLabel = isCond ? "rule" : "filter";
+  const rule = isCond ? props.filter : null;
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-start justify-between px-3 pt-2.5 pb-2 gap-2 cursor-pointer",
+        role: "button",
+        tabIndex: 0,
+        "aria-label": expanded ? `Collapse ${fieldDef.label}` : `Expand ${fieldDef.label}`,
+        onClick: onToggleExpand,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggleExpand();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: fieldDef.label }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "xs",
+                "aria-label": `Operator: ${OPERATOR_LABELS[filter.operator]} \u2014 click to cycle`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  cycleOperator();
+                },
+                className: "h-auto py-0 px-1 -ms-1 text-xs text-muted-foreground font-normal",
+                children: [
+                  OPERATOR_LABELS[filter.operator],
+                  /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-down text-xs", "aria-hidden": "true" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0 self-start", children: [
+            /* @__PURE__ */ jsx(Tip, { label: `Remove ${fieldDef.label} ${removeLabel}`, side: "top", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                "aria-label": `Remove ${fieldDef.label} ${removeLabel}`,
+                className: "text-muted-foreground hover:text-destructive",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemove(filterId);
+                },
+                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-trash text-xs", "aria-hidden": "true" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "i",
+              {
+                className: `fa-light ${expanded ? "fa-chevron-up" : "fa-chevron-down"} text-xs text-muted-foreground mt-2`,
+                "aria-hidden": "true"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-border", children: [
+      fieldDef.type === "select" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        showSearch && /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1", children: /* @__PURE__ */ jsx(Input, { placeholder: "Search\u2026", value: optSearch, onChange: (e) => setOptSearch(e.target.value), className: "h-7 text-xs" }) }),
+        /* @__PURE__ */ jsxs("div", { role: "listbox", "aria-multiselectable": "true", "aria-label": `${fieldDef.label} options`, className: "py-1 max-h-52 overflow-y-auto", children: [
+          filteredOpts.map((opt) => {
+            const checked = 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 items-center gap-2.5 px-3 py-2 text-sm hover:bg-interactive-hover 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-[3px] 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: "7px" } }) }),
+                  renderOptionLabel ? renderOptionLabel(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" })
+        ] })
+      ] }) : fieldDef.type === "date" ? /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+        FilterDateCalendar,
+        {
+          label: `${fieldDef.label} \u2014 choose date`,
+          valueYmd: filter.values[0],
+          onChangeYmd: (ymd) => onUpdate(filterId, { values: ymd ? [ymd] : [] })
+        }
+      ) }) : fieldDef.type === "text" ? /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(
+        FilterTextValueInput,
+        {
+          mask: fieldDef.textMask,
+          "aria-label": `${fieldDef.label} value`,
+          placeholder: `Enter ${fieldDef.label.toLowerCase()}\u2026`,
+          value: values[0] ?? "",
+          onValueChange: (next) => onUpdate(filterId, { values: [next] }),
+          className: "text-sm",
+          autoFocus: true
+        }
+      ) }) : null,
+      values.length > 0 ? /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 border-t border-border bg-card p-2", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: () => onUpdate(filterId, { 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
+    ] }),
+    isCond && rule && /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-3 py-2.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2", children: "Highlight color" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: RULE_COLORS.map((c) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon-xs",
+          variant: "outline",
+          "aria-label": c.name,
+          className: cn(
+            "rounded-md border-2 p-0 transition-all",
+            rule.bgColor === c.bg ? "border-foreground scale-110" : "border-transparent hover:scale-105"
+          ),
+          style: { background: c.bg },
+          onClick: () => onUpdate(filterId, { bgColor: c.bg })
+        },
+        c.name
+      )) })
+    ] })
+  ] }) });
+}
+function DragHandleGripIcon({ className }) {
+  return /* @__PURE__ */ jsx("i", { className: cn("fa-solid fa-grip-dots-vertical shrink-0", className), "aria-hidden": "true" });
+}
+function DrawerSortCard(props) {
+  const { rule, fieldLabel, isPrimary, onRemove, onToggleDir } = props;
+  const label = fieldLabel || rule.fieldKey;
+  if (!label) return null;
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border bg-background overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [
+    /* @__PURE__ */ jsx(DragHandleGripIcon, { className: "text-[13px] text-muted-foreground/40" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        isPrimary && /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-accent-foreground bg-accent rounded px-1 py-0.5 leading-none uppercase tracking-wide shrink-0", children: "Primary" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground truncate", children: label })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Direction: ${rule.direction === "asc" ? "Ascending" : "Descending"} \u2014 click to toggle`,
+          onClick: onToggleDir,
+          className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors mt-0.5",
+          children: [
+            /* @__PURE__ */ jsx("i", { className: `fa-light ${rule.direction === "asc" ? "fa-arrow-up-a-z" : "fa-arrow-down-a-z"} text-xs`, "aria-hidden": "true" }),
+            rule.direction === "asc" ? "Ascending" : "Descending",
+            /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-down text-xs", "aria-hidden": "true" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Tip, { label: `Remove ${label} sort`, side: "top", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Remove ${label} sort`,
+        onClick: onRemove,
+        className: "inline-flex items-center justify-center size-7 rounded text-muted-foreground hover:text-destructive hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0",
+        children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-trash text-xs", "aria-hidden": "true" })
+      }
+    ) })
+  ] }) });
+}
+function ColumnRow({
+  label,
+  isFirst,
+  isLast,
+  visible,
+  onToggleVisible,
+  onMoveUp,
+  onMoveDown,
+  draggable,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  isDragging,
+  isOver
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listitem",
+      draggable,
+      onDragStart,
+      onDragOver,
+      onDrop,
+      onDragEnd,
+      className: cn(
+        "flex items-center gap-2 px-2 py-2 rounded-lg group hover:bg-interactive-hover-subtle transition-colors cursor-grab active:cursor-grabbing",
+        isDragging && "opacity-40",
+        isOver && "ring-2 ring-ring bg-accent/30"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(DragHandleGripIcon, { className: "text-[13px] text-muted-foreground/40 transition-colors group-hover:text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm text-foreground", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+          /* @__PURE__ */ jsx(Tip, { label: `Move ${label} up`, side: "top", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${label} up`,
+              disabled: isFirst,
+              onClick: onMoveUp,
+              className: "inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-up text-xs", "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tip, { label: `Move ${label} down`, side: "top", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${label} down`,
+              disabled: isLast,
+              onClick: onMoveDown,
+              className: "inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-down text-xs", "aria-hidden": "true" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            checked: visible,
+            onChange: onToggleVisible
+          }
+        )
+      ]
+    }
+  );
+}
+function useDraggableList(items, getId, onReorder) {
+  const [dragId, setDragId] = React11.useState(null);
+  const [overId, setOverId] = React11.useState(null);
+  function getItemProps(id) {
+    return {
+      draggable: true,
+      onDragStart: (e) => {
+        e.dataTransfer.effectAllowed = "move";
+        setDragId(id);
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setOverId(id);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        if (!dragId || dragId === id) {
+          setDragId(null);
+          setOverId(null);
+          return;
+        }
+        const from = items.findIndex((i) => getId(i) === dragId);
+        const to = items.findIndex((i) => getId(i) === id);
+        if (from === -1 || to === -1) {
+          setDragId(null);
+          setOverId(null);
+          return;
+        }
+        const next = [...items];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        onReorder(next);
+        setDragId(null);
+        setOverId(null);
+      },
+      onDragEnd: () => {
+        setDragId(null);
+        setOverId(null);
+      },
+      "data-dragging": dragId === id,
+      "data-over": overId === id && dragId !== id
+    };
+  }
+  return { dragId, overId, getItemProps };
+}
+var PROPERTIES_SHEET_PORTAL_Z = "z-[90]";
+function TablePropertiesDrawer({
+  open,
+  onOpenChange,
+  initialPanel,
+  showGridlines,
+  onShowGridlinesChange,
+  rowHeight,
+  onRowHeightChange,
+  pagination,
+  onPaginationChange,
+  activeFilters,
+  onAddFilter,
+  onUpdateFilter,
+  onRemoveFilter,
+  getFilterConnector,
+  onToggleFilterConnector,
+  filterBarVisible,
+  onFilterBarVisibleChange,
+  drawerExpandedFilters,
+  onDrawerExpandedFiltersChange,
+  totalRows,
+  filteredRows,
+  sortRules,
+  onSortRulesChange,
+  onAddSortRule,
+  onRemoveSortRule,
+  onToggleSortDir,
+  colOrder,
+  onColOrderChange,
+  hiddenCols,
+  onToggleColVisibility,
+  onMoveCol,
+  groupBy,
+  onGroupByChange,
+  primarySortKey,
+  conditionalRules,
+  onAddConditionalRule,
+  onRemoveConditionalRule,
+  onUpdateConditionalRule,
+  filterFields,
+  currentView,
+  onViewChange,
+  supportedViewTypes,
+  lifecycleTabLabel,
+  fieldDefinitions,
+  resolveColumnLabel: resolveColumnLabelProp,
+  displayOptions,
+  onDisplayOptionsChange,
+  boardGroupByColumnOptions,
+  renderFilterOptionValue
+}) {
+  const [sheetPanel, setSheetPanel] = React11.useState("main");
+  React11.useEffect(() => {
+    if (open && initialPanel) {
+      setSheetPanel(initialPanel);
+    } else if (!open) {
+      setSheetPanel("main");
+    }
+  }, [open, initialPanel]);
+  const resolveColumnLabel = React11.useCallback(
+    (key) => resolveColumnLabelProp?.(key) ?? fieldDefinitions.find((f) => f.key === key)?.label ?? key,
+    [resolveColumnLabelProp, fieldDefinitions]
+  );
+  const sortFieldList = React11.useMemo(
+    () => fieldDefinitions.filter(
+      (f) => f.sortable !== false && f.key !== "select" && f.key !== "actions"
+    ),
+    [fieldDefinitions]
+  );
+  const groupFieldList = React11.useMemo(
+    () => fieldDefinitions.filter((f) => f.key !== "select" && f.key !== "actions"),
+    [fieldDefinitions]
+  );
+  const viewSurface = currentView ?? "table";
+  const isBoardView = viewSurface === "board";
+  const boardGroupByLabel = boardGroupByColumnOptions?.find((o) => o.key === displayOptions.boardGroupByColumnKey)?.label;
+  const viewDisplayLabel = dataListViewLabel(viewSurface);
+  const viewDisplayDesc = (() => {
+    if (viewSurface === "board") {
+      return [
+        boardGroupByLabel ? `By ${boardGroupByLabel}` : null,
+        `${displayOptions.boardLineCount}-line`,
+        displayOptions.showColumnLabels ? "Column labels" : "No labels"
+      ].filter(Boolean).join(" \xB7 ");
+    }
+    if (viewSurface === "list") {
+      return [
+        displayOptions.showColumnLabels ? "Column labels" : "No labels",
+        displayOptions.showToolbarSearch ? "Toolbar search" : "No search"
+      ].join(" \xB7 ");
+    }
+    if (viewSurface === "dashboard") {
+      return "Charts \xB7 KPI metrics";
+    }
+    return [showGridlines ? "Gridlines" : null, pagination ? "Paginated" : null].filter(Boolean).join(" \xB7 ") || "Default";
+  })();
+  const viewDisplayIcon = DATA_LIST_VIEW_TILES.find((t) => t.value === viewSurface)?.icon ?? "fa-table";
+  const sortDrag = useDraggableList(sortRules, (r) => r.id, onSortRulesChange);
+  const orderable = colOrder.filter((k) => k !== "select" && k !== "actions");
+  const colDrag = useDraggableList(
+    orderable,
+    (k) => k,
+    (newOrder) => onColOrderChange(["select", ...newOrder, "actions"])
+  );
+  const primarySortLabel = primarySortKey ? resolveColumnLabel(primarySortKey) : sortRules[0]?.fieldKey ? resolveColumnLabel(sortRules[0].fieldKey) : "\u2014";
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal: false, children: /* @__PURE__ */ jsx(
+    SheetContent,
+    {
+      side: "right",
+      showCloseButton: false,
+      showOverlay: false,
+      className: "z-[80] w-[min(20rem,calc(100vw-1rem))] p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden",
+      style: { top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100svh - 1rem)" },
+      children: sheetPanel === "main" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 pt-5 pb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { className: "text-base font-semibold leading-tight", children: "Properties" }),
+            lifecycleTabLabel ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 truncate", title: lifecycleTabLabel, children: lifecycleTabLabel }) : null
+          ] }),
+          /* @__PURE__ */ jsx(Tip, { label: "Close", side: "bottom", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": "Close",
+              onClick: () => onOpenChange(false),
+              children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-[13px]", "aria-hidden": "true" })
+            }
+          ) })
+        ] }),
+        onViewChange && currentView && /* @__PURE__ */ jsx("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx(
+          SelectionTileGrid,
+          {
+            sectionLabel: "View type",
+            options: supportedViewTypes && supportedViewTypes.length > 0 ? dataListViewTilesForHub(supportedViewTypes).map((t) => ({
+              value: t.type,
+              label: t.label,
+              icon: t.icon
+            })) : DATA_LIST_VIEW_TILES,
+            columns: 4,
+            value: currentView,
+            onValueChange: onViewChange,
+            interaction: "button",
+            idPrefix: "props-view"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-2 px-3 space-y-1", children: [
+          {
+            id: "table-display",
+            icon: viewDisplayIcon,
+            label: viewDisplayLabel,
+            desc: viewDisplayDesc
+          },
+          {
+            id: "filter",
+            icon: "fa-filter",
+            label: "Filter",
+            desc: activeFilters.length === 0 ? `Showing all ${filteredRows} rows.` : `${activeFilters.length} filter${activeFilters.length !== 1 ? "s" : ""} active \xB7 ${filteredRows} rows.`
+          },
+          {
+            id: "sort",
+            icon: "fa-arrow-up-arrow-down",
+            label: "Sort",
+            desc: `Sorted by ${primarySortLabel}.`
+          },
+          {
+            id: "group",
+            icon: "fa-layer-group",
+            label: "Group",
+            desc: groupBy ? `Grouped by ${resolveColumnLabel(groupBy)}.` : "No grouping."
+          },
+          {
+            id: "columns",
+            icon: "fa-table-columns",
+            label: "Columns",
+            desc: hiddenCols.size === 0 ? "All columns visible." : `${hiddenCols.size} column${hiddenCols.size !== 1 ? "s" : ""} hidden.`
+          },
+          {
+            id: "conditional-rules",
+            icon: "fa-palette",
+            label: "Conditional rules",
+            desc: conditionalRules.length === 0 ? "No rules applied." : `${conditionalRules.length} rule${conditionalRules.length !== 1 ? "s" : ""} active.`
+          }
+        ].map((item) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            onClick: () => setSheetPanel(item.id),
+            className: cn(
+              "w-full h-auto justify-start gap-3 px-3 py-3 rounded-2xl font-normal border border-transparent",
+              "hover:bg-muted/60 hover:text-foreground",
+              "focus-visible:bg-muted/60 focus-visible:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: `fa-light ${item.icon} text-[15px] text-secondary-foreground`, "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0 text-start", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-foreground", children: item.label }),
+                /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground mt-0.5", children: item.desc })
+              ] }),
+              /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-right text-xs text-muted-foreground shrink-0", "aria-hidden": "true" })
+            ]
+          },
+          item.id
+        )) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 pt-4 pb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(Tip, { label: "Back to Properties", side: "bottom", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                className: "shrink-0",
+                "aria-label": "Back to Properties",
+                onClick: () => setSheetPanel("main"),
+                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-left text-[13px]", "aria-hidden": "true" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs(SheetTitle, { className: "text-base font-semibold text-foreground leading-tight flex items-center gap-1.5", children: [
+                {
+                  "table-display": viewDisplayLabel,
+                  filter: "Filter",
+                  sort: "Sort",
+                  group: "Group",
+                  columns: "Columns",
+                  "conditional-rules": "Conditional rules",
+                  main: ""
+                }[sheetPanel],
+                sheetPanel === "filter" && /* @__PURE__ */ jsx("i", { className: "fa-light fa-circle-question text-xs text-muted-foreground", "aria-hidden": "true" })
+              ] }),
+              sheetPanel === "filter" && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-xs text-muted-foreground mt-0.5",
+                  "aria-live": "polite",
+                  "aria-atomic": "true",
+                  children: activeFilters.length === 0 ? `Showing all ${filteredRows} rows` : `${filteredRows} of ${totalRows} rows match \xB7 ${activeFilters.length} filter${activeFilters.length !== 1 ? "s" : ""} active`
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Tip, { label: "Close", side: "bottom", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              className: "shrink-0",
+              "aria-label": "Close panel",
+              onClick: () => onOpenChange(false),
+              children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-[13px]", "aria-hidden": "true" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+          sheetPanel === "table-display" && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-5", children: [
+            isBoardView ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground leading-relaxed", children: [
+              dataListViewLabel("board"),
+              " groups rows into columns. Sort, filter, and column settings apply to the same dataset as other views (e.g. Table view)."
+            ] }) : null,
+            isBoardView && boardGroupByColumnOptions && boardGroupByColumnOptions.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 py-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-table-columns text-[15px] text-secondary-foreground", "aria-hidden": "true" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground leading-tight", children: "Board columns" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which field splits the board into swimlanes." })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: boardGroupByColumnOptions.some((o) => o.key === displayOptions.boardGroupByColumnKey) ? displayOptions.boardGroupByColumnKey : boardGroupByColumnOptions[0].key,
+                  onValueChange: (v) => onDisplayOptionsChange({ boardGroupByColumnKey: v }),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      SelectTrigger,
+                      {
+                        size: "sm",
+                        className: "w-[9.5rem] shrink-0",
+                        id: "board-group-by-field",
+                        "aria-label": "Field for board columns",
+                        children: /* @__PURE__ */ jsx(SelectValue, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(SelectContent, { align: "end", className: PROPERTIES_SHEET_PORTAL_Z, children: boardGroupByColumnOptions.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.key, children: o.label }, o.key)) })
+                  ]
+                }
+              )
+            ] }) : null,
+            viewSurface === "table" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3", children: "Appearance" }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [
+                  { id: "gridlines", icon: "fa-border-all", label: "Gridlines", checked: showGridlines, onChange: onShowGridlinesChange },
+                  { id: "pagination", icon: "fa-table-list", label: "Pagination", checked: pagination, onChange: onPaginationChange }
+                ].map((row) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-sm", children: [
+                    /* @__PURE__ */ jsx("i", { className: `fa-light ${row.icon} text-muted-foreground w-4 text-center`, "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("label", { htmlFor: `toggle-${row.id}`, className: "cursor-pointer select-none", children: row.label })
+                  ] }),
+                  /* @__PURE__ */ jsx(ToggleSwitch, { id: `toggle-${row.id}`, checked: row.checked, onChange: row.onChange })
+                ] }, row.id)) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-4", children: /* @__PURE__ */ jsx(
+                SelectionTileGrid,
+                {
+                  sectionLabel: "Row height",
+                  options: ROW_HEIGHT_TILES,
+                  columns: 3,
+                  value: rowHeight,
+                  onValueChange: onRowHeightChange,
+                  interaction: "button",
+                  idPrefix: "row-height"
+                }
+              ) })
+            ] }) : null,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "space-y-3",
+                  (viewSurface === "board" || viewSurface === "table") && "border-t border-border pt-4"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Display options" }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    isBoardView && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-file-lines text-[15px] text-secondary-foreground", "aria-hidden": "true" }) }),
+                        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground leading-tight", children: "Line count" }) })
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        Select,
+                        {
+                          value: String(displayOptions.boardLineCount),
+                          onValueChange: (v) => onDisplayOptionsChange({ boardLineCount: Number(v) }),
+                          children: [
+                            /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-[6.5rem] shrink-0", id: "board-line-count", "aria-label": "Line count", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                            /* @__PURE__ */ jsxs(SelectContent, { align: "end", className: PROPERTIES_SHEET_PORTAL_Z, children: [
+                              /* @__PURE__ */ jsx(SelectItem, { value: "1", children: "1 line" }),
+                              /* @__PURE__ */ jsx(SelectItem, { value: "2", children: "2 lines" }),
+                              /* @__PURE__ */ jsx(SelectItem, { value: "3", children: "3 lines" })
+                            ] })
+                          ]
+                        }
+                      )
+                    ] }),
+                    viewSurface === "table" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-font text-[15px] text-secondary-foreground", "aria-hidden": "true" }) }),
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground leading-tight", children: "Table title" }),
+                          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Show the page heading and subtitle." })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        ToggleSwitch,
+                        {
+                          id: "toggle-view-title",
+                          checked: displayOptions.showViewTitle,
+                          onChange: (v) => onDisplayOptionsChange({ showViewTitle: v })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-table-columns text-[15px] text-secondary-foreground", "aria-hidden": "true" }) }),
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground leading-tight", children: "Column labels" }),
+                          viewSurface === "table" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Column headers in the table." }) : viewSurface === "list" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Column headers in the list." }) : null
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        ToggleSwitch,
+                        {
+                          id: "toggle-column-labels",
+                          checked: displayOptions.showColumnLabels,
+                          onChange: (v) => onDisplayOptionsChange({ showColumnLabels: v })
+                        }
+                      )
+                    ] }),
+                    isBoardView && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-2", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-hashtag text-[15px] text-secondary-foreground", "aria-hidden": "true" }) }),
+                          /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground leading-tight", children: "Column counts" }) })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          ToggleSwitch,
+                          {
+                            id: "toggle-board-counts",
+                            checked: displayOptions.showBoardColumnCounts,
+                            onChange: (v) => onDisplayOptionsChange({ showBoardColumnCounts: v })
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-2", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-square-plus text-[15px] text-secondary-foreground", "aria-hidden": "true" }) }),
+                          /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground leading-tight", children: "Above new card button" }) })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          ToggleSwitch,
+                          {
+                            id: "toggle-new-card-above",
+                            checked: displayOptions.boardNewCardAbove,
+                            onChange: (v) => onDisplayOptionsChange({ boardNewCardAbove: v })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    (viewSurface === "table" || viewSurface === "list") && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-magnifying-glass text-[15px] text-secondary-foreground", "aria-hidden": "true" }) }),
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground leading-tight", children: "Search" }),
+                          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Toolbar search for this view." })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        ToggleSwitch,
+                        {
+                          id: "toggle-toolbar-search",
+                          checked: displayOptions.showToolbarSearch,
+                          onChange: (v) => onDisplayOptionsChange({ showToolbarSearch: v })
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          sheetPanel === "filter" && /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 space-y-2", children: [
+            activeFilters.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-muted/40 p-4 space-y-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-7 rounded-lg bg-background border border-border shrink-0", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-filter text-muted-foreground text-xs", "aria-hidden": "true" }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "No filters yet" })
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground leading-relaxed", children: [
+                "Use filters to show only the rows you need. With multiple filters, use ",
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/80", children: "and" }),
+                " or ",
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/80", children: "or" }),
+                " between them to control how they combine."
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: [
+                { icon: "fa-circle-1", text: 'Click "Add filter" below' },
+                { icon: "fa-circle-2", text: "Choose a field to filter by" },
+                { icon: "fa-circle-3", text: "Pick at least one value \u2014 the grid updates immediately" }
+              ].map((step) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("i", { className: `fa-light ${step.icon} text-muted-foreground text-xs shrink-0`, "aria-hidden": "true" }),
+                step.text
+              ] }, step.icon)) })
+            ] }) : /* @__PURE__ */ jsx(Fragment, { children: activeFilters.map((f, idx) => {
+              const fieldDef = filterFields.find((fd) => fd.key === f.fieldKey);
+              if (!fieldDef) return null;
+              const leftId = idx > 0 ? activeFilters[idx - 1].id : null;
+              const connector = leftId ? getFilterConnector(leftId) : "and";
+              return /* @__PURE__ */ jsxs(React11.Fragment, { children: [
+                idx > 0 && leftId && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-1", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx(Tip, { label: "Click to switch: AND \u2014 every filter must match; OR \u2014 any matching filter is enough.", side: "top", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onToggleFilterConnector(leftId),
+                      className: cn(
+                        "shrink-0 rounded-md border px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide transition-colors",
+                        "border-border bg-muted/40 text-muted-foreground hover:bg-interactive-hover hover:text-interactive-hover-foreground",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      ),
+                      "aria-label": connector === "and" ? "Filters are combined with AND. Click to use OR instead." : "Filters are combined with OR. Click to use AND instead.",
+                      children: connector
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border", "aria-hidden": "true" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  DrawerFilterCard,
+                  {
+                    filter: f,
+                    fieldDef,
+                    expanded: drawerExpandedFilters.has(f.id),
+                    onToggleExpand: () => onDrawerExpandedFiltersChange((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(f.id)) next.delete(f.id);
+                      else next.add(f.id);
+                      return next;
+                    }),
+                    onUpdate: onUpdateFilter,
+                    onRemove: (id) => {
+                      onRemoveFilter(id);
+                      onDrawerExpandedFiltersChange((prev) => {
+                        const next = new Set(prev);
+                        next.delete(id);
+                        return next;
+                      });
+                    },
+                    renderOptionLabel: (value) => renderFilterOptionValue?.(f.fieldKey, value)
+                  }
+                )
+              ] }, f.id);
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+              /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    className: "flex-1 gap-1.5 h-8 border-dashed text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx("i", { className: "fa-light fa-plus text-xs", "aria-hidden": "true" }),
+                      "Add filter"
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: PROPERTIES_SHEET_PORTAL_Z, children: [
+                  /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Filter by field" }),
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  filterFields.map((f) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => onAddFilter(f.key), children: [
+                    /* @__PURE__ */ jsx("i", { className: `fa-light ${f.icon}`, "aria-hidden": "true" }),
+                    f.label
+                  ] }, f.key))
+                ] })
+              ] }),
+              activeFilters.length > 0 && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10",
+                  onClick: () => {
+                    activeFilters.forEach((f) => onRemoveFilter(f.id));
+                    onDrawerExpandedFiltersChange(/* @__PURE__ */ new Set());
+                  },
+                  children: "Remove all"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 pt-3 mt-1 border-t border-border", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "toggle-filter-bar", className: "text-sm font-medium text-foreground cursor-pointer", children: "Enable filter bar" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Show filters above the table." })
+              ] }),
+              /* @__PURE__ */ jsx(ToggleSwitch, { id: "toggle-filter-bar", checked: filterBarVisible, onChange: onFilterBarVisibleChange })
+            ] })
+          ] }),
+          sheetPanel === "sort" && /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 space-y-2", children: [
+            sortRules.length === 0 ? (
+              /* Empty state */
+              /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-dashed border-border bg-muted/30 px-4 py-6 text-center space-y-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-muted mb-1", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-up-arrow-down text-muted-foreground text-[16px]", "aria-hidden": "true" }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "No sorts applied" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: "Add a sort rule to order rows by any field. Multiple rules are applied in priority order." }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-1.5 text-start pt-1", children: [
+                  { icon: "fa-circle-1", text: 'Click "Add sort" below' },
+                  { icon: "fa-circle-2", text: "Choose a field to sort by" },
+                  { icon: "fa-circle-3", text: "Toggle ascending or descending" }
+                ].map((step) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx("i", { className: `fa-light ${step.icon} text-muted-foreground text-xs shrink-0`, "aria-hidden": "true" }),
+                  step.text
+                ] }, step.icon)) })
+              ] })
+            ) : sortRules.map((rule, idx) => {
+              const dragProps = sortDrag.getItemProps(rule.id);
+              return /* @__PURE__ */ jsxs(React11.Fragment, { children: [
+                idx > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-0.5", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground px-1", children: "then by" }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...dragProps,
+                    className: cn(
+                      "transition-all",
+                      dragProps["data-dragging"] && "opacity-40",
+                      dragProps["data-over"] && "ring-2 ring-ring bg-accent/30 rounded-lg"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      DrawerSortCard,
+                      {
+                        rule,
+                        fieldLabel: resolveColumnLabel(rule.fieldKey),
+                        isPrimary: idx === 0,
+                        onRemove: () => onRemoveSortRule(rule.id),
+                        onToggleDir: () => onToggleSortDir(rule.id)
+                      }
+                    )
+                  }
+                )
+              ] }, rule.id);
+            }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+              /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    className: "flex-1 gap-1.5 h-8 border-dashed text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx("i", { className: "fa-light fa-plus text-xs", "aria-hidden": "true" }),
+                      "Add sort"
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: PROPERTIES_SHEET_PORTAL_Z, children: [
+                  /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Sort by field" }),
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  sortFieldList.filter((f) => !sortRules.some((r) => r.fieldKey === f.key)).map((col) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => onAddSortRule(col.key), children: [
+                    /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-up-arrow-down text-xs", "aria-hidden": "true" }),
+                    col.label
+                  ] }, col.key)),
+                  sortFieldList.filter((f) => !sortRules.some((r) => r.fieldKey === f.key)).length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: "All fields added" })
+                ] })
+              ] }),
+              sortRules.length > 0 && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10",
+                  onClick: () => onSortRulesChange([]),
+                  children: "Remove all"
+                }
+              )
+            ] })
+          ] }),
+          sheetPanel === "group" && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-3", children: groupBy ? `Grouped by ${resolveColumnLabel(groupBy)}.` : "No grouping applied." }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                onClick: () => onGroupByChange(null),
+                className: cn(
+                  "w-full justify-start gap-2 px-3 py-2 h-auto text-sm font-normal",
+                  !groupBy ? "bg-accent text-accent-foreground font-medium" : "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "fa-light fa-ban text-xs", "aria-hidden": "true" }),
+                  "None"
+                ]
+              }
+            ),
+            groupFieldList.map((col) => /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                onClick: () => onGroupByChange(groupBy === col.key ? null : col.key),
+                className: cn(
+                  "w-full justify-start gap-2 px-3 py-2 h-auto text-sm font-normal",
+                  groupBy === col.key ? "bg-accent text-accent-foreground font-medium" : ""
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "fa-light fa-layer-group text-xs text-muted-foreground", "aria-hidden": "true" }),
+                  col.label,
+                  groupBy === col.key && /* @__PURE__ */ jsx("i", { className: "fa-solid fa-check text-accent-foreground text-xs ms-auto", "aria-hidden": "true" })
+                ]
+              },
+              col.key
+            ))
+          ] }),
+          sheetPanel === "columns" && /* @__PURE__ */ jsxs("div", { className: "px-4 py-4", children: [
+            isBoardView ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "Column visibility and order apply when you use Table view. They are saved with this tab." }) : null,
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-3", children: hiddenCols.size === 0 ? "All columns visible. Drag to reorder." : `${hiddenCols.size} column${hiddenCols.size !== 1 ? "s" : ""} hidden. Drag handle to reorder.` }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-0.5", role: "list", "aria-label": "Column order and visibility", children: orderable.map((key, idx, arr) => {
+              const dragProps = colDrag.getItemProps(key);
+              return /* @__PURE__ */ jsx(
+                ColumnRow,
+                {
+                  label: resolveColumnLabel(key),
+                  isFirst: idx === 0,
+                  isLast: idx === arr.length - 1,
+                  visible: !hiddenCols.has(key),
+                  onToggleVisible: () => onToggleColVisibility(key),
+                  onMoveUp: () => onMoveCol(key, "up"),
+                  onMoveDown: () => onMoveCol(key, "down"),
+                  draggable: dragProps.draggable,
+                  onDragStart: dragProps.onDragStart,
+                  onDragOver: dragProps.onDragOver,
+                  onDrop: dragProps.onDrop,
+                  onDragEnd: dragProps.onDragEnd,
+                  isDragging: dragProps["data-dragging"],
+                  isOver: dragProps["data-over"]
+                },
+                key
+              );
+            }) })
+          ] }),
+          sheetPanel === "conditional-rules" && /* @__PURE__ */ jsx(
+            ConditionalRulesPanel,
+            {
+              filterFields,
+              rules: conditionalRules,
+              onAdd: onAddConditionalRule,
+              onRemove: onRemoveConditionalRule,
+              onUpdate: onUpdateConditionalRule,
+              renderFilterOptionValue
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+}
+function ConditionalRulesPanel({
+  filterFields,
+  rules,
+  onAdd,
+  onRemove,
+  onUpdate,
+  renderFilterOptionValue
+}) {
+  const [expandedIds, setExpandedIds] = React11.useState(() => /* @__PURE__ */ new Set());
+  const prevLenRef = React11.useRef(rules.length);
+  React11.useEffect(() => {
+    if (rules.length > prevLenRef.current && rules.length > 0) {
+      const last = rules[rules.length - 1];
+      setExpandedIds(/* @__PURE__ */ new Set([last.id]));
+    }
+    prevLenRef.current = rules.length;
+  }, [rules]);
+  function toggleExpanded(id) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 space-y-2", children: [
+    rules.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-dashed border-border bg-muted/30 px-4 py-6 text-center space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center size-9 rounded-lg bg-muted mb-1", children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-palette text-muted-foreground text-[16px]", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "No rules yet" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: "Highlight cells with a background color based on their value." })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: rules.map((rule) => {
+      const fd = filterFields.find((f) => f.key === rule.fieldKey);
+      if (!fd) return null;
+      return /* @__PURE__ */ jsx(
+        DrawerFilterCard,
+        {
+          variant: "conditional",
+          filter: rule,
+          fieldDef: fd,
+          expanded: expandedIds.has(rule.id),
+          onToggleExpand: () => toggleExpanded(rule.id),
+          onUpdate,
+          onRemove: (id) => {
+            onRemove(id);
+            setExpandedIds((prev) => {
+              const next = new Set(prev);
+              next.delete(id);
+              return next;
+            });
+          },
+          renderOptionLabel: (value) => renderFilterOptionValue?.(rule.fieldKey, value)
+        },
+        rule.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+      /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            className: "flex-1 gap-1.5 h-8 border-dashed text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx("i", { className: "fa-light fa-plus text-xs", "aria-hidden": "true" }),
+              "Add rule"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: PROPERTIES_SHEET_PORTAL_Z, children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Rule for column" }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          filterFields.map((f) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onSelect: () => onAdd({
+                fieldKey: f.key,
+                operator: f.operators[0],
+                values: [],
+                bgColor: RULE_COLORS[0].bg
+              }),
+              children: [
+                /* @__PURE__ */ jsx("i", { className: `fa-light ${f.icon}`, "aria-hidden": "true" }),
+                f.label
+              ]
+            },
+            f.key
+          ))
+        ] })
+      ] }),
+      rules.length > 0 && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10",
+          onClick: () => {
+            rules.forEach((r) => onRemove(r.id));
+            setExpandedIds(/* @__PURE__ */ new Set());
+          },
+          children: "Remove all"
+        }
+      )
+    ] })
+  ] });
+}
+
+export { TablePropertiesDrawer };
+//# sourceMappingURL=drawer.js.map
+//# sourceMappingURL=drawer.js.map