hazo_ui 2.11.0 → 2.16.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React27 = require('react');
+var React25 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -14,7 +14,6 @@ var SelectPrimitive = require('@radix-ui/react-select');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var reactDayPicker = require('react-day-picker');
 var dateFns = require('date-fns');
-var SwitchPrimitives = require('@radix-ui/react-switch');
 var core$1 = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
@@ -62,6 +61,7 @@ var AccordionPrimitive = require('@radix-ui/react-accordion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
+var SwitchPrimitives = require('@radix-ui/react-switch');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
@@ -90,12 +90,11 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
+var React25__namespace = /*#__PURE__*/_interopNamespace(React25);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
-var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var FaIcons__namespace = /*#__PURE__*/_interopNamespace(FaIcons);
 var MdIcons__namespace = /*#__PURE__*/_interopNamespace(MdIcons);
@@ -131,6 +130,7 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
@@ -275,7 +275,7 @@ var variant_styles = {
     color: "hsl(var(--secondary-foreground))"
   }
 };
-var Button = React27__namespace.forwardRef(
+var Button = React25__namespace.forwardRef(
   ({ className, variant, size, asChild = false, style, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     const fallback_styles = variant_styles[variant ?? "default"] ?? {};
@@ -295,7 +295,7 @@ var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogOverlay = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     ref,
@@ -307,14 +307,14 @@ var DialogOverlay = React27__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+var DialogContent = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 sm:rounded-lg",
         className
       ),
       ...props,
@@ -357,7 +357,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogTitle = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -370,7 +370,7 @@ var DialogTitle = React27__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -379,7 +379,7 @@ var DialogDescription = React27__namespace.forwardRef(({ className, ...props },
   }
 ));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var Command = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Command = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -391,7 +391,7 @@ var Command = React27__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Command.displayName = "Command";
-var CommandInput = React27__namespace.forwardRef(({ className, onValueChange, onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandInput = React25__namespace.forwardRef(({ className, onValueChange, onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
   {
     ref,
@@ -407,7 +407,7 @@ var CommandInput = React27__namespace.forwardRef(({ className, onValueChange, on
   }
 ));
 CommandInput.displayName = "CommandInput";
-var CommandList = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandList = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -416,7 +416,7 @@ var CommandList = React27__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 CommandList.displayName = "CommandList";
-var CommandEmpty = React27__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandEmpty = React25__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -425,7 +425,7 @@ var CommandEmpty = React27__namespace.forwardRef((props, ref) => /* @__PURE__ */
   }
 ));
 CommandEmpty.displayName = "CommandEmpty";
-var CommandGroup = React27__namespace.forwardRef(({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var CommandGroup = React25__namespace.forwardRef(({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
     ref,
@@ -441,7 +441,7 @@ var CommandGroup = React27__namespace.forwardRef(({ className, heading, children
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React27__namespace.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
+var CommandItem = React25__namespace.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -472,7 +472,7 @@ var CommandItem = React27__namespace.forwardRef(({ className, onSelect, value, s
 CommandItem.displayName = "CommandItem";
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React27__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React25__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -486,7 +486,7 @@ var PopoverContent = React27__namespace.forwardRef(({ className, align = "center
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-var Input = React27__namespace.forwardRef(
+var Input = React25__namespace.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -506,7 +506,7 @@ Input.displayName = "Input";
 var Select = SelectPrimitive__namespace.Root;
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectTrigger = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Trigger,
   {
     ref,
@@ -522,7 +522,7 @@ var SelectTrigger = React27__namespace.forwardRef(({ className, children, ...pro
   }
 ));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollUpButton = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollUpButton,
   {
     ref,
@@ -535,7 +535,7 @@ var SelectScrollUpButton = React27__namespace.forwardRef(({ className, ...props
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollDownButton = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollDownButton,
   {
     ref,
@@ -548,7 +548,7 @@ var SelectScrollDownButton = React27__namespace.forwardRef(({ className, ...prop
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React27__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectContent = React25__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Content,
   {
     ref,
@@ -576,7 +576,7 @@ var SelectContent = React27__namespace.forwardRef(({ className, children, positi
   }
 ) }));
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectLabel = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Label,
   {
     ref,
@@ -585,7 +585,7 @@ var SelectLabel = React27__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectItem = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Item,
   {
     ref,
@@ -601,7 +601,7 @@ var SelectItem = React27__namespace.forwardRef(({ className, children, ...props
   }
 ));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectSeparator = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Separator,
   {
     ref,
@@ -613,7 +613,7 @@ SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-var TooltipContent = React27__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TooltipContent = React25__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TooltipPrimitive__namespace.Content,
   {
     ref,
@@ -681,7 +681,7 @@ function FilterFieldItem({
   onOperatorChange,
   onDelete
 }) {
-  const [isCalendarOpen, setIsCalendarOpen] = React27.useState(false);
+  const [isCalendarOpen, setIsCalendarOpen] = React25.useState(false);
   const renderInput = () => {
     switch (fieldConfig.type) {
       case "text":
@@ -700,27 +700,27 @@ function FilterFieldItem({
             placeholder: "Enter text...",
             minLength: fieldConfig.textConfig?.minLength,
             maxLength: fieldConfig.textConfig?.maxLength,
-            className: "cls_filter_text_input w-full min-w-0"
+            className: "cls_filter_text_input h-8 w-full min-w-0 text-sm"
           }
         );
-      case "number":
+      case "number": {
         const numberOperators = [
-          { value: "equals", label: "Equals" },
-          { value: "not_equals", label: "Not Equals" },
-          { value: "greater_than", label: "Greater Than" },
-          { value: "less_than", label: "Less Than" },
-          { value: "greater_equal", label: "Greater or Equal" },
-          { value: "less_equal", label: "Less or Equal" }
+          { value: "equals", label: "=" },
+          { value: "not_equals", label: "\u2260" },
+          { value: "greater_than", label: ">" },
+          { value: "less_than", label: "<" },
+          { value: "greater_equal", label: "\u2265" },
+          { value: "less_equal", label: "\u2264" }
         ];
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_number_filter_container flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full", children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_number_filter_container flex w-full items-center gap-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             Select,
             {
               value: filterConfig.operator || "equals",
               onValueChange: (value) => onOperatorChange?.(value),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "cls_operator_select w-full sm:w-[140px] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: numberOperators.map((op) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: op.value, children: op.label }, op.value)) })
+                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "cls_operator_select h-8 w-[60px] shrink-0 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: numberOperators.map((op) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: op.value, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: op.label }) }, op.value)) })
               ]
             }
           ),
@@ -736,14 +736,10 @@ function FilterFieldItem({
                   return;
                 }
                 let numValue = fieldConfig.numberConfig?.allowDecimal ? parseFloat(value) : parseInt(value, 10);
-                if (isNaN(numValue)) {
-                  return;
-                }
+                if (isNaN(numValue)) return;
                 if (fieldConfig.numberConfig?.allowDecimal && fieldConfig.numberConfig?.decimalLength) {
                   const decimalPlaces = value.split(".")[1]?.length || 0;
-                  if (decimalPlaces > fieldConfig.numberConfig.decimalLength) {
-                    return;
-                  }
+                  if (decimalPlaces > fieldConfig.numberConfig.decimalLength) return;
                 }
                 if (fieldConfig.numberConfig?.min !== void 0 && numValue < fieldConfig.numberConfig.min) {
                   numValue = fieldConfig.numberConfig.min;
@@ -753,14 +749,15 @@ function FilterFieldItem({
                 }
                 onValueChange(numValue);
               },
-              placeholder: "Enter number...",
+              placeholder: "Value",
               min: fieldConfig.numberConfig?.min,
               max: fieldConfig.numberConfig?.max,
               step: fieldConfig.numberConfig?.allowDecimal ? 0.01 : 1,
-              className: "cls_filter_number_input flex-1 min-w-0"
+              className: "cls_filter_number_input h-8 flex-1 min-w-0 text-sm tabular-nums"
             }
           )
         ] });
+      }
       case "combobox":
         return /* @__PURE__ */ jsxRuntime.jsxs(
           Select,
@@ -768,12 +765,12 @@ function FilterFieldItem({
             value: filterConfig.value || "",
             onValueChange: (value) => onValueChange(value),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "cls_filter_combobox_select w-full min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select option..." }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "cls_filter_combobox_select h-8 w-full min-w-0 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select option..." }) }),
               /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: fieldConfig.comboboxOptions?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
             ]
           }
         );
-      case "boolean":
+      case "boolean": {
         const trueLabel = fieldConfig.booleanLabels?.trueLabel || "On";
         const falseLabel = fieldConfig.booleanLabels?.falseLabel || "Off";
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -782,7 +779,7 @@ function FilterFieldItem({
             value: filterConfig.value !== void 0 && filterConfig.value !== null ? String(filterConfig.value) : "",
             onValueChange: (value) => onValueChange(value === "true"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "cls_filter_boolean_select w-full min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select..." }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "cls_filter_boolean_select h-8 w-full min-w-0 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select..." }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "true", children: trueLabel }),
                 /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "false", children: falseLabel })
@@ -790,25 +787,26 @@ function FilterFieldItem({
             ]
           }
         );
-      case "date":
+      }
+      case "date": {
         const dateOperators = [
-          { value: "equals", label: "Equals" },
-          { value: "not_equals", label: "Not Equals" },
-          { value: "greater_than", label: "Greater Than" },
-          { value: "less_than", label: "Less Than" },
-          { value: "greater_equal", label: "Greater or Equal" },
-          { value: "less_equal", label: "Less or Equal" }
+          { value: "equals", label: "=" },
+          { value: "not_equals", label: "\u2260" },
+          { value: "greater_than", label: ">" },
+          { value: "less_than", label: "<" },
+          { value: "greater_equal", label: "\u2265" },
+          { value: "less_equal", label: "\u2264" }
         ];
         const selectedDate = filterConfig.value ? typeof filterConfig.value === "string" ? new Date(filterConfig.value) : filterConfig.value : void 0;
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_date_filter_container flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full", children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_date_filter_container flex w-full items-center gap-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             Select,
             {
               value: filterConfig.operator || "equals",
               onValueChange: (value) => onOperatorChange?.(value),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "cls_operator_select w-full sm:w-[140px] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: dateOperators.map((op) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: op.value, children: op.label }, op.value)) })
+                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "cls_operator_select h-8 w-[60px] shrink-0 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: dateOperators.map((op) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: op.value, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: op.label }) }, op.value)) })
               ]
             }
           ),
@@ -818,11 +816,11 @@ function FilterFieldItem({
               {
                 variant: "outline",
                 className: cn(
-                  "cls_date_picker_trigger w-full justify-start text-left font-normal min-w-0",
+                  "cls_date_picker_trigger h-8 flex-1 justify-start gap-2 px-2.5 text-left text-sm font-normal min-w-0",
                   !selectedDate && "text-muted-foreground"
                 ),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "cls_calendar_icon mr-2 h-4 w-4 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "cls_calendar_icon h-3.5 w-3.5 shrink-0" }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_date_text truncate", children: selectedDate ? dateFns.format(selectedDate, "MMM d, yyyy") : "Pick a date" })
                 ]
               }
@@ -841,24 +839,27 @@ function FilterFieldItem({
             ) })
           ] })
         ] });
+      }
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_filter_field_item flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 border rounded-md bg-card", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_field_label text-sm font-medium min-w-[120px] sm:min-w-[100px] truncate", children: fieldConfig.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_field_input_container flex-1 min-w-0 w-full sm:w-auto", children: renderInput() }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "sm",
-        onClick: onDelete,
-        className: "cls_delete_btn h-8 w-8 p-0 text-destructive hover:text-destructive shrink-0",
-        "aria-label": `Remove ${fieldConfig.label} filter`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "cls_delete_icon h-4 w-4" })
-      }
-    )
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_filter_field_item group flex flex-col gap-2 rounded-lg border border-border/70 bg-card px-3 py-2.5 transition-colors hover:border-border sm:flex-row sm:items-center sm:gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_field_label w-full shrink-0 truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground sm:w-[110px] sm:text-sm sm:normal-case sm:font-medium sm:text-foreground sm:tracking-normal", children: fieldConfig.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_field_input_container flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: renderInput() }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: onDelete,
+          className: "cls_delete_btn h-7 w-7 shrink-0 p-0 text-muted-foreground/60 hover:bg-destructive/10 hover:text-destructive",
+          "aria-label": `Remove ${fieldConfig.label} filter`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "cls_delete_icon h-3.5 w-3.5" })
+        }
+      )
+    ] })
   ] });
 }
 function HazoUiMultiFilterDialog({
@@ -866,7 +867,7 @@ function HazoUiMultiFilterDialog({
   onFilterChange,
   initialFilters = [],
   title = "Filter",
-  description = "Add multiple fields to filter by. Select a field and set its filter value.",
+  description = "Add fields to filter by. Select a field and set its value.",
   headerBackgroundColor,
   headerTextColor,
   submitButtonBackgroundColor,
@@ -907,22 +908,18 @@ function HazoUiMultiFilterDialog({
     ...finalHeaderBgColor && { backgroundColor: finalHeaderBgColor },
     ...finalHeaderTextColor && { color: finalHeaderTextColor }
   };
-  const [isOpen, setIsOpen] = React27.useState(false);
-  const [filterFields, setFilterFields] = React27.useState(initialFilters);
-  const [isComboboxOpen, setIsComboboxOpen] = React27.useState(false);
-  React27.useEffect(() => {
+  const [isOpen, setIsOpen] = React25.useState(false);
+  const [filterFields, setFilterFields] = React25.useState(initialFilters);
+  const [isComboboxOpen, setIsComboboxOpen] = React25.useState(false);
+  React25.useEffect(() => {
     if (isOpen) {
       setFilterFields(initialFilters);
     }
   }, [isOpen, initialFilters]);
   const handleAddField = (fieldValue) => {
-    if (filterFields.some((ff) => ff.field === fieldValue)) {
-      return;
-    }
+    if (filterFields.some((ff) => ff.field === fieldValue)) return;
     const fieldConfig = availableFields.find((af) => af.value === fieldValue);
-    if (!fieldConfig) {
-      return;
-    }
+    if (!fieldConfig) return;
     let defaultValue = "";
     if (fieldConfig.type === "boolean") {
       defaultValue = false;
@@ -975,7 +972,7 @@ function HazoUiMultiFilterDialog({
   };
   const hasActiveFilters = initialFilters.length > 0;
   const tooltipContent = hasActiveFilters ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_filter_tooltip_content space-y-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active Filters:" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active filters" }),
     initialFilters.map((filterConfig) => {
       const fieldConfig = getFieldConfig(filterConfig.field);
       if (!fieldConfig) return null;
@@ -1019,152 +1016,114 @@ function HazoUiMultiFilterDialog({
                 )
               }
             ),
-            "Filter"
+            "Filter",
+            hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_filter_count ml-2 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-blue-600 px-1 text-[10px] font-semibold text-white", children: initialFilters.length })
           ]
         }
       ) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltipContent })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_filter_dialog_content max-w-lg w-full max-h-[90vh] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { style: headerStyles, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_filter_dialog_body space-y-4 py-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_filter_dialog_content max-w-lg gap-0 p-0 sm:rounded-xl max-h-[90vh]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        DialogHeader,
+        {
+          className: "cls_filter_dialog_header space-y-1 border-b px-5 py-4 text-left",
+          style: headerStyles,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-xs leading-relaxed text-muted-foreground", children: description })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_filter_dialog_body space-y-3 overflow-y-auto px-5 py-4", children: [
+        filterFields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_filter_fields_list space-y-1.5", children: filterFields.map((filterConfig) => {
+          const fieldConfig = getFieldConfig(filterConfig.field);
+          if (!fieldConfig) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            FilterFieldItem,
+            {
+              filterConfig,
+              fieldConfig,
+              onValueChange: (value) => handleValueChange(filterConfig.field, value),
+              onOperatorChange: (operator) => handleOperatorChange(filterConfig.field, operator),
+              onDelete: () => handleDeleteField(filterConfig.field)
+            },
+            filterConfig.field
+          );
+        }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_empty_filter_fields rounded-lg border border-dashed border-border/70 bg-muted/20 px-4 py-6 text-center text-xs text-muted-foreground", children: "No filters yet. Add one below to narrow down the results." }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
           /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
             Button,
             {
-              variant: "outline",
+              variant: "ghost",
               role: "combobox",
               "aria-expanded": isComboboxOpen,
-              className: "cls_add_field_combobox w-full justify-between",
+              disabled: availableFieldsToAdd.length === 0,
+              className: "cls_add_field_combobox w-full justify-start gap-2 border border-dashed border-border/70 text-sm font-medium text-muted-foreground hover:border-border hover:bg-muted/40 hover:text-foreground",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_combobox_content flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "cls_plus_icon h-4 w-4 mr-2" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Add field" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "cls_chevron_icon ml-2 h-4 w-4 shrink-0 opacity-50" })
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "cls_plus_icon h-4 w-4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: availableFieldsToAdd.length === 0 ? "All fields added" : "Add filter field" })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "cls_combobox_popover w-full p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "cls_combobox_popover w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No fields found." }) : /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No fields available." }) : /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
               CommandItem,
               {
                 value: field.label,
                 onSelect: () => handleAddField(field.value),
                 className: "cls_command_item",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    lucideReact.Check,
-                    {
-                      className: cn(
-                        "cls_check_icon mr-2 h-4 w-4",
-                        "opacity-0"
-                      )
-                    }
-                  ),
-                  field.label
-                ]
+                children: field.label
               },
               field.value
             )) }) })
           ] }) })
-        ] }) }),
-        filterFields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_filter_fields_list space-y-2", children: filterFields.map((filterConfig) => {
-          const fieldConfig = getFieldConfig(filterConfig.field);
-          if (!fieldConfig) return null;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            FilterFieldItem,
-            {
-              filterConfig,
-              fieldConfig,
-              onValueChange: (value) => handleValueChange(filterConfig.field, value),
-              onOperatorChange: (operator) => handleOperatorChange(filterConfig.field, operator),
-              onDelete: () => handleDeleteField(filterConfig.field)
-            },
-            filterConfig.field
-          );
-        }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_empty_filter_fields text-center py-8 text-sm text-muted-foreground", children: 'No filter fields added. Click "Add field" to add filtering criteria.' })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
-        filterFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { className: "cls_filter_dialog_footer flex flex-row items-center justify-between gap-2 border-t bg-muted/20 px-5 py-3 sm:justify-between sm:space-x-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_footer_left", children: filterFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
-            variant: "outline",
+            variant: "ghost",
+            size: "sm",
             onClick: handleClearAll,
-            className: "cls_clear_all_btn",
+            className: "cls_clear_all_btn text-muted-foreground hover:text-foreground",
             style: clearButtonStyles,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
-              "Clear All"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            onClick: handleApply,
-            className: "cls_apply_btn",
-            style: submitButtonStyles,
-            children: "Apply"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "outline",
-            onClick: handleCancel,
-            className: "cls_cancel_btn",
-            style: cancelButtonStyles,
-            children: "Cancel"
+            children: "Clear all"
           }
-        )
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_footer_right flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleCancel,
+              className: "cls_cancel_btn",
+              style: cancelButtonStyles,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: handleApply,
+              className: "cls_apply_btn",
+              style: submitButtonStyles,
+              children: "Apply"
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
 }
-var Switch = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  SwitchPrimitives__namespace.Root,
-  {
-    className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    ),
-    ...props,
-    ref,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      SwitchPrimitives__namespace.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-        )
-      }
-    )
-  }
-));
-Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
-var Label2 = React27__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        ref,
-        className: cn(
-          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-Label2.displayName = "Label";
 function SortableSortFieldItem({
   sortConfig,
   fieldLabel,
+  priority,
   onDirectionChange,
   onDelete
 }) {
@@ -1179,46 +1138,88 @@ function SortableSortFieldItem({
   const style = {
     transform: utilities.CSS.Transform.toString(transform),
     transition,
-    opacity: isDragging ? 0.5 : 1
+    opacity: isDragging ? 0.6 : 1,
+    zIndex: isDragging ? 10 : void 0
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: setNodeRef,
       style,
-      className: "cls_sortable_sort_field_item flex items-center gap-3 p-3 border rounded-md bg-card",
+      className: cn(
+        "cls_sortable_sort_field_item group flex items-center gap-2.5 rounded-lg border border-border/70 bg-card pl-1.5 pr-2 py-2 transition-shadow",
+        isDragging ? "shadow-md" : "hover:border-border"
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "button",
           {
+            type: "button",
             ...attributes,
             ...listeners,
-            className: "cls_drag_handle cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground",
+            className: "cls_drag_handle flex h-7 w-5 shrink-0 cursor-grab items-center justify-center rounded text-muted-foreground/60 hover:text-foreground active:cursor-grabbing",
+            "aria-label": `Reorder ${fieldLabel}`,
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "cls_drag_icon h-4 w-4" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_field_label flex-1 text-sm font-medium", children: fieldLabel }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_direction_control flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `switch-${sortConfig.field}`, className: "cls_direction_label text-xs text-muted-foreground", children: sortConfig.direction === "asc" ? "Ascending" : "Descending" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Switch,
-            {
-              id: `switch-${sortConfig.field}`,
-              checked: sortConfig.direction === "desc",
-              onCheckedChange: (checked) => onDirectionChange(checked ? "desc" : "asc"),
-              "aria-label": `Toggle sort direction for ${fieldLabel}`
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "cls_priority_badge inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-semibold tabular-nums text-muted-foreground",
+            "aria-label": `Sort priority ${priority}`,
+            children: priority
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_field_label flex-1 truncate text-sm font-medium text-foreground", children: fieldLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-label": `Sort direction for ${fieldLabel}`,
+            className: "cls_direction_control inline-flex shrink-0 items-center rounded-md border border-border/70 bg-muted/40 p-0.5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": sortConfig.direction === "asc",
+                  "data-active": sortConfig.direction === "asc",
+                  onClick: () => onDirectionChange("asc"),
+                  className: "cls_dir_asc inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-muted-foreground transition-colors data-[active=true]:bg-background data-[active=true]:text-foreground data-[active=true]:shadow-sm hover:text-foreground",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3 w-3" }),
+                    "Asc"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": sortConfig.direction === "desc",
+                  "data-active": sortConfig.direction === "desc",
+                  onClick: () => onDirectionChange("desc"),
+                  className: "cls_dir_desc inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-muted-foreground transition-colors data-[active=true]:bg-background data-[active=true]:text-foreground data-[active=true]:shadow-sm hover:text-foreground",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3 w-3" }),
+                    "Desc"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
             variant: "ghost",
             size: "sm",
             onClick: onDelete,
-            className: "cls_delete_btn h-8 w-8 p-0 text-destructive hover:text-destructive",
+            className: "cls_delete_btn h-7 w-7 shrink-0 p-0 text-muted-foreground/60 hover:bg-destructive/10 hover:text-destructive",
             "aria-label": `Remove ${fieldLabel} from sort`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "cls_delete_icon h-4 w-4" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "cls_delete_icon h-3.5 w-3.5" })
           }
         )
       ]
@@ -1230,7 +1231,7 @@ function HazoUiMultiSortDialog({
   onSortChange,
   initialSortFields = [],
   title = "Sort",
-  description = "Add multiple fields to sort by and reorder them. Use the switch to toggle between ascending and descending.",
+  description = "Add fields to sort by, drag to reorder, toggle ascending or descending.",
   headerBackgroundColor,
   headerTextColor,
   submitButtonBackgroundColor,
@@ -1271,16 +1272,16 @@ function HazoUiMultiSortDialog({
     ...finalHeaderBgColor && { backgroundColor: finalHeaderBgColor },
     ...finalHeaderTextColor && { color: finalHeaderTextColor }
   };
-  const [isOpen, setIsOpen] = React27.useState(false);
-  const [sortFields, setSortFields] = React27.useState(initialSortFields);
-  const [isComboboxOpen, setIsComboboxOpen] = React27.useState(false);
+  const [isOpen, setIsOpen] = React25.useState(false);
+  const [sortFields, setSortFields] = React25.useState(initialSortFields);
+  const [isComboboxOpen, setIsComboboxOpen] = React25.useState(false);
   const sensors = core$1.useSensors(
-    core$1.useSensor(core$1.PointerSensor),
+    core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 4 } }),
     core$1.useSensor(core$1.KeyboardSensor, {
       coordinateGetter: sortable.sortableKeyboardCoordinates
     })
   );
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (isOpen) {
       setSortFields(initialSortFields);
     }
@@ -1289,11 +1290,7 @@ function HazoUiMultiSortDialog({
     if (sortFields.some((sf) => sf.field === fieldValue)) {
       return;
     }
-    const newField = {
-      field: fieldValue,
-      direction: "asc"
-    };
-    setSortFields([...sortFields, newField]);
+    setSortFields([...sortFields, { field: fieldValue, direction: "asc" }]);
     setIsComboboxOpen(false);
   };
   const handleDeleteField = (fieldValue) => {
@@ -1308,9 +1305,7 @@ function HazoUiMultiSortDialog({
   };
   const handleDragEnd = (event) => {
     const { active, over } = event;
-    if (!over || active.id === over.id) {
-      return;
-    }
+    if (!over || active.id === over.id) return;
     const oldIndex = sortFields.findIndex((sf) => sf.field === active.id);
     const newIndex = sortFields.findIndex((sf) => sf.field === over.id);
     if (oldIndex !== -1 && newIndex !== -1) {
@@ -1336,7 +1331,7 @@ function HazoUiMultiSortDialog({
   };
   const hasActiveSorts = initialSortFields.length > 0;
   const tooltipContent = hasActiveSorts ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_sort_tooltip_content space-y-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active Sorts:" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active sorts" }),
     initialSortFields.map((sortConfig, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_tooltip_item text-xs", children: [
       index + 1,
       ". ",
@@ -1365,61 +1360,27 @@ function HazoUiMultiSortDialog({
                 )
               }
             ),
-            "Sort"
+            "Sort",
+            hasActiveSorts && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_sort_count ml-2 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-blue-600 px-1 text-[10px] font-semibold text-white", children: initialSortFields.length })
           ]
         }
       ) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltipContent })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { style: headerStyles, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_sort_dialog_body space-y-4 py-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              variant: "outline",
-              role: "combobox",
-              "aria-expanded": isComboboxOpen,
-              className: "cls_add_field_combobox w-full justify-between",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_combobox_content flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "cls_plus_icon h-4 w-4 mr-2" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Add field" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "cls_chevron_icon ml-2 h-4 w-4 shrink-0 opacity-50" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "cls_combobox_popover w-full p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No fields found." }) : /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
-              CommandItem,
-              {
-                value: field.label,
-                onSelect: () => handleAddField(field.value),
-                className: "cls_command_item",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    lucideReact.Check,
-                    {
-                      className: cn(
-                        "cls_check_icon mr-2 h-4 w-4",
-                        "opacity-0"
-                      )
-                    }
-                  ),
-                  field.label
-                ]
-              },
-              field.value
-            )) }) })
-          ] }) })
-        ] }) }),
-        sortFields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_sort_fields_list space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg gap-0 p-0 sm:rounded-xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        DialogHeader,
+        {
+          className: "cls_sort_dialog_header space-y-1 border-b px-5 py-4 text-left",
+          style: headerStyles,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-xs leading-relaxed text-muted-foreground", children: description })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_sort_dialog_body space-y-3 px-5 py-4", children: [
+        sortFields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_sort_fields_list space-y-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
           core$1.DndContext,
           {
             sensors,
@@ -1430,11 +1391,12 @@ function HazoUiMultiSortDialog({
               {
                 items: sortFields.map((sf) => sf.field),
                 strategy: sortable.verticalListSortingStrategy,
-                children: sortFields.map((sortConfig) => /* @__PURE__ */ jsxRuntime.jsx(
+                children: sortFields.map((sortConfig, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                   SortableSortFieldItem,
                   {
                     sortConfig,
                     fieldLabel: getFieldLabel(sortConfig.field),
+                    priority: idx + 1,
                     onDirectionChange: (direction) => handleDirectionChange(sortConfig.field, direction),
                     onDelete: () => handleDeleteField(sortConfig.field)
                   },
@@ -1443,46 +1405,77 @@ function HazoUiMultiSortDialog({
               }
             )
           }
-        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_empty_sort_fields text-center py-8 text-sm text-muted-foreground", children: 'No sort fields added. Click "Add field" to add sorting criteria.' })
+        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_empty_sort_fields rounded-lg border border-dashed border-border/70 bg-muted/20 px-4 py-6 text-center text-xs text-muted-foreground", children: "No sort fields yet. Add one below to start ordering rows." }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              role: "combobox",
+              "aria-expanded": isComboboxOpen,
+              disabled: availableFieldsToAdd.length === 0,
+              className: "cls_add_field_combobox w-full justify-start gap-2 border border-dashed border-border/70 text-sm font-medium text-muted-foreground hover:border-border hover:bg-muted/40 hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "cls_plus_icon h-4 w-4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: availableFieldsToAdd.length === 0 ? "All fields added" : "Add sort field" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "cls_combobox_popover w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No fields available." }) : /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+              CommandItem,
+              {
+                value: field.label,
+                onSelect: () => handleAddField(field.value),
+                className: "cls_command_item",
+                children: field.label
+              },
+              field.value
+            )) }) })
+          ] }) })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
-        sortFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { className: "cls_sort_dialog_footer flex flex-row items-center justify-between gap-2 border-t bg-muted/20 px-5 py-3 sm:justify-between sm:space-x-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_footer_left", children: sortFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
-            variant: "outline",
+            variant: "ghost",
+            size: "sm",
             onClick: handleClearAll,
-            className: "cls_clear_all_btn",
+            className: "cls_clear_all_btn text-muted-foreground hover:text-foreground",
             style: clearButtonStyles,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
-              "Clear All"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            onClick: handleApply,
-            className: "cls_apply_btn",
-            style: submitButtonStyles,
-            children: "Apply"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "outline",
-            onClick: handleCancel,
-            className: "cls_cancel_btn",
-            style: cancelButtonStyles,
-            children: "Cancel"
+            children: "Clear all"
           }
-        )
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_footer_right flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleCancel,
+              className: "cls_cancel_btn",
+              style: cancelButtonStyles,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: handleApply,
+              className: "cls_apply_btn",
+              style: submitButtonStyles,
+              children: "Apply"
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
 }
-var RadioGroup = React27__namespace.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup = React25__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
     {
@@ -1493,7 +1486,7 @@ var RadioGroup = React27__namespace.forwardRef(({ className, ...props }, ref) =>
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
-var RadioGroupItem = React27__namespace.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React25__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Item,
     {
@@ -1950,7 +1943,7 @@ function filterInputValue(value, input_type, num_decimals) {
     }
   }
 }
-var HazoUiFlexInput = React27__namespace.forwardRef(
+var HazoUiFlexInput = React25__namespace.forwardRef(
   ({
     className,
     input_type = "mixed",
@@ -1967,13 +1960,13 @@ var HazoUiFlexInput = React27__namespace.forwardRef(
     onBlur,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React27__namespace.useState(
+    const [internalValue, setInternalValue] = React25__namespace.useState(
       typeof controlledValue === "string" ? controlledValue : typeof controlledValue === "number" ? String(controlledValue) : ""
     );
-    const [errorMessage, setErrorMessage] = React27__namespace.useState();
+    const [errorMessage, setErrorMessage] = React25__namespace.useState();
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? typeof controlledValue === "string" ? controlledValue : String(controlledValue || "") : internalValue;
-    React27__namespace.useEffect(() => {
+    React25__namespace.useEffect(() => {
       if (isControlled) {
         const newValue = typeof controlledValue === "string" ? controlledValue : String(controlledValue || "");
         if (newValue !== internalValue) {
@@ -2053,7 +2046,7 @@ var HazoUiFlexInput = React27__namespace.forwardRef(
   }
 );
 HazoUiFlexInput.displayName = "HazoUiFlexInput";
-var ToolbarButton = React27__namespace.forwardRef(
+var ToolbarButton = React25__namespace.forwardRef(
   ({ onClick, is_active = false, disabled = false, tooltip, className, children }, ref) => {
     const button = /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -2340,11 +2333,11 @@ var validHex = (hex) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
 var import_extends2 = __toESM(require_extends());
 var import_objectWithoutPropertiesLoose = __toESM(require_objectWithoutPropertiesLoose());
 function useEventCallback(handler) {
-  var callbackRef = React27.useRef(handler);
-  React27.useEffect(() => {
+  var callbackRef = React25.useRef(handler);
+  React25.useEffect(() => {
     callbackRef.current = handler;
   });
-  return React27.useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
+  return React25.useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
 }
 var isTouch = (event) => "touches" in event;
 var preventDefaultMove = (event) => {
@@ -2372,16 +2365,16 @@ var getRelativePosition = (node, event) => {
   };
 };
 var _excluded = ["prefixCls", "className", "onMove", "onDown"];
-var Interactive = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
+var Interactive = /* @__PURE__ */ React25__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-interactive",
     className,
     onMove,
     onDown
   } = props, reset = (0, import_objectWithoutPropertiesLoose.default)(props, _excluded);
-  var container = React27.useRef(null);
-  var hasTouched = React27.useRef(false);
-  var [isDragging, setDragging] = React27.useState(false);
+  var container = React25.useRef(null);
+  var hasTouched = React25.useRef(false);
+  var [isDragging, setDragging] = React25.useState(false);
   var onMoveCallback = useEventCallback(onMove);
   var onKeyCallback = useEventCallback(onDown);
   var isValid = (event) => {
@@ -2389,7 +2382,7 @@ var Interactive = /* @__PURE__ */ React27__namespace.default.forwardRef((props,
     hasTouched.current = isTouch(event);
     return true;
   };
-  var handleMove = React27.useCallback((event) => {
+  var handleMove = React25.useCallback((event) => {
     preventDefaultMove(event);
     if (!container.current) return;
     var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
@@ -2399,8 +2392,8 @@ var Interactive = /* @__PURE__ */ React27__namespace.default.forwardRef((props,
     }
     onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
   }, [onMoveCallback]);
-  var handleMoveEnd = React27.useCallback(() => setDragging(false), []);
-  var toggleDocumentEvents = React27.useCallback((state) => {
+  var handleMoveEnd = React25.useCallback(() => setDragging(false), []);
+  var toggleDocumentEvents = React25.useCallback((state) => {
     if (state) {
       window.addEventListener(hasTouched.current ? "touchmove" : "mousemove", handleMove);
       window.addEventListener(hasTouched.current ? "touchend" : "mouseup", handleMoveEnd);
@@ -2411,13 +2404,13 @@ var Interactive = /* @__PURE__ */ React27__namespace.default.forwardRef((props,
       window.removeEventListener("touchend", handleMoveEnd);
     }
   }, [handleMove, handleMoveEnd]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     toggleDocumentEvents(isDragging);
     return () => {
       toggleDocumentEvents(false);
     };
   }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
-  var handleMoveStart = React27.useCallback((event) => {
+  var handleMoveStart = React25.useCallback((event) => {
     var activeEl = document.activeElement;
     activeEl == null || activeEl.blur();
     preventDefaultMove(event.nativeEvent);
@@ -2461,7 +2454,7 @@ var Pointer = (_ref) => {
     borderRadius: "50%",
     backgroundColor: color2
   };
-  return React27.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
+  return React25.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: prefixCls + "-pointer " + (className || ""),
     style,
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -2471,7 +2464,7 @@ var Pointer = (_ref) => {
   }), [top, left, color2, className, prefixCls]);
 };
 var _excluded2 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
-var Saturation = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
+var Saturation = /* @__PURE__ */ React25__namespace.default.forwardRef((props, ref) => {
   var _hsva$h;
   var {
     prefixCls = "w-color-saturation",
@@ -2499,7 +2492,7 @@ var Saturation = /* @__PURE__ */ React27__namespace.default.forwardRef((props, r
       // source: 'hsv',
     });
   };
-  var handleKeyDown = React27.useCallback((event) => {
+  var handleKeyDown = React25.useCallback((event) => {
     if (!hsva || !onChange) return;
     var step = 1;
     var newS = hsva.s;
@@ -2538,7 +2531,7 @@ var Saturation = /* @__PURE__ */ React27__namespace.default.forwardRef((props, r
       });
     }
   }, [hsva, onChange]);
-  var pointerElement = React27.useMemo(() => {
+  var pointerElement = React25.useMemo(() => {
     if (!hsva) return null;
     var comProps = {
       top: 100 - hsva.v + "%",
@@ -2554,7 +2547,7 @@ var Saturation = /* @__PURE__ */ React27__namespace.default.forwardRef((props, r
       prefixCls
     }, comProps));
   }, [hsva, pointer, prefixCls]);
-  var handleClick = React27.useCallback((event) => {
+  var handleClick = React25.useCallback((event) => {
     event.target.focus();
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(esm_default, (0, import_extends3.default)({
@@ -2623,7 +2616,7 @@ var Pointer2 = (_ref) => {
 };
 var _excluded4 = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
 var BACKGROUND_IMG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==";
-var Alpha = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
+var Alpha = /* @__PURE__ */ React25__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-alpha",
     className,
@@ -2668,7 +2661,7 @@ var Alpha = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) =
   }, style, {
     position: "relative"
   });
-  var handleKeyDown = React27.useCallback((event) => {
+  var handleKeyDown = React25.useCallback((event) => {
     var step = 0.01;
     var currentAlpha = hsva.a;
     var newAlpha = currentAlpha;
@@ -2714,7 +2707,7 @@ var Alpha = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) =
       }), syntheticOffset);
     }
   }, [hsva, direction, onChange]);
-  var handleClick = React27.useCallback((event) => {
+  var handleClick = React25.useCallback((event) => {
     event.target.focus();
   }, []);
   var pointerElement = pointer && typeof pointer === "function" ? pointer((0, import_extends5.default)({
@@ -2757,7 +2750,7 @@ var import_objectWithoutPropertiesLoose5 = __toESM(require_objectWithoutProperti
 var _excluded5 = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
 var validHex2 = (hex) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
 var getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
-var EditableInput = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
+var EditableInput = /* @__PURE__ */ React25__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-editable-input",
     placement = "bottom",
@@ -2771,9 +2764,9 @@ var EditableInput = /* @__PURE__ */ React27__namespace.default.forwardRef((props
     onBlur,
     renderInput
   } = props, other = (0, import_objectWithoutPropertiesLoose5.default)(props, _excluded5);
-  var [value, setValue] = React27.useState(initValue);
-  var isFocus = React27.useRef(false);
-  React27.useEffect(() => {
+  var [value, setValue] = React25.useState(initValue);
+  var isFocus = React25.useRef(false);
+  React25.useEffect(() => {
     if (props.value !== value) {
       if (!isFocus.current) {
         setValue(props.value);
@@ -2862,7 +2855,7 @@ var esm_default4 = EditableInput;
 var import_extends7 = __toESM(require_extends());
 var import_objectWithoutPropertiesLoose6 = __toESM(require_objectWithoutPropertiesLoose());
 var _excluded6 = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
-var EditableInputRGBA = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
+var EditableInputRGBA = /* @__PURE__ */ React25__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-editable-input-rgba",
     hsva,
@@ -2985,7 +2978,7 @@ var esm_default5 = EditableInputRGBA;
 var import_extends8 = __toESM(require_extends());
 var import_objectWithoutPropertiesLoose7 = __toESM(require_objectWithoutPropertiesLoose());
 var _excluded7 = ["prefixCls", "className", "hue", "onChange", "direction"];
-var Hue = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
+var Hue = /* @__PURE__ */ React25__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-hue",
     className,
@@ -3019,7 +3012,7 @@ var esm_default6 = Hue;
 var import_extends9 = __toESM(require_extends());
 var import_objectWithoutPropertiesLoose8 = __toESM(require_objectWithoutPropertiesLoose());
 var _excluded8 = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"];
-var Swatch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
+var Swatch = /* @__PURE__ */ React25__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-swatch",
     className,
@@ -3056,7 +3049,7 @@ var Swatch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref)
       flexWrap: "wrap",
       position: "relative"
     }, style),
-    children: [addonBefore && /* @__PURE__ */ React27__namespace.default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
+    children: [addonBefore && /* @__PURE__ */ React25__namespace.default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
       var title = "";
       var background = "";
       if (typeof item === "string") {
@@ -3078,11 +3071,11 @@ var Swatch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref)
         onClick: (evn) => handleClick(background, evn)
       });
       if (render) {
-        return /* @__PURE__ */ jsxRuntime.jsx(React27.Fragment, {
+        return /* @__PURE__ */ jsxRuntime.jsx(React25.Fragment, {
           children: render
         }, idx);
       }
-      var child = rectProps.children && /* @__PURE__ */ React27__namespace.default.isValidElement(rectProps.children) ? /* @__PURE__ */ React27__namespace.default.cloneElement(rectProps.children, {
+      var child = rectProps.children && /* @__PURE__ */ React25__namespace.default.isValidElement(rectProps.children) ? /* @__PURE__ */ React25__namespace.default.cloneElement(rectProps.children, {
         color: background,
         checked
       }) : null;
@@ -3096,7 +3089,7 @@ var Swatch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref)
           background
         })
       }), idx);
-    }), addonAfter && /* @__PURE__ */ React27__namespace.default.isValidElement(addonAfter) && addonAfter]
+    }), addonAfter && /* @__PURE__ */ React25__namespace.default.isValidElement(addonAfter) && addonAfter]
   }));
 });
 Swatch.displayName = "Swatch";
@@ -3115,7 +3108,7 @@ var Bar = (props) => /* @__PURE__ */ jsxRuntime.jsx("div", {
     backgroundColor: "#fff"
   }
 });
-var Sketch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
+var Sketch = /* @__PURE__ */ React25__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-sketch",
     className,
@@ -3127,13 +3120,13 @@ var Sketch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref)
     disableAlpha = false,
     style
   } = props, other = (0, import_objectWithoutPropertiesLoose9.default)(props, _excluded9);
-  var [hsva, setHsva] = React27.useState({
+  var [hsva, setHsva] = React25.useState({
     h: 209,
     s: 36,
     v: 90,
     a: 1
   });
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (typeof color2 === "string" && validHex(color2)) {
       setHsva(hexToHsva(color2));
     }
@@ -3251,7 +3244,7 @@ var Sketch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref)
           innerProps: {
             style: styleAlpha
           },
-          pointer: () => /* @__PURE__ */ jsxRuntime.jsx(React27.Fragment, {})
+          pointer: () => /* @__PURE__ */ jsxRuntime.jsx(React25.Fragment, {})
         })]
       })]
     }), editableDisable && /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -3366,19 +3359,19 @@ var Toolbar = ({
   on_attachments_change,
   disabled = false
 }) => {
-  const [link_url, set_link_url] = React27__namespace.useState("https://");
-  const [link_popover_open, set_link_popover_open] = React27__namespace.useState(false);
-  const [text_color_open, set_text_color_open] = React27__namespace.useState(false);
-  const [highlight_color_open, set_highlight_color_open] = React27__namespace.useState(false);
-  const [variables_menu_open, set_variables_menu_open] = React27__namespace.useState(false);
-  const [table_menu_open, set_table_menu_open] = React27__namespace.useState(false);
-  const [text_color, set_text_color] = React27__namespace.useState("#000000");
-  const [highlight_color, set_highlight_color] = React27__namespace.useState("#ffff00");
-  const [table_rows, set_table_rows] = React27__namespace.useState(3);
-  const [table_cols, set_table_cols] = React27__namespace.useState(3);
-  const [hovered_cell, set_hovered_cell] = React27__namespace.useState(null);
-  const file_input_ref = React27__namespace.useRef(null);
-  const image_input_ref = React27__namespace.useRef(null);
+  const [link_url, set_link_url] = React25__namespace.useState("https://");
+  const [link_popover_open, set_link_popover_open] = React25__namespace.useState(false);
+  const [text_color_open, set_text_color_open] = React25__namespace.useState(false);
+  const [highlight_color_open, set_highlight_color_open] = React25__namespace.useState(false);
+  const [variables_menu_open, set_variables_menu_open] = React25__namespace.useState(false);
+  const [table_menu_open, set_table_menu_open] = React25__namespace.useState(false);
+  const [text_color, set_text_color] = React25__namespace.useState("#000000");
+  const [highlight_color, set_highlight_color] = React25__namespace.useState("#ffff00");
+  const [table_rows, set_table_rows] = React25__namespace.useState(3);
+  const [table_cols, set_table_cols] = React25__namespace.useState(3);
+  const [hovered_cell, set_hovered_cell] = React25__namespace.useState(null);
+  const file_input_ref = React25__namespace.useRef(null);
+  const image_input_ref = React25__namespace.useRef(null);
   if (!editor) {
     return null;
   }
@@ -4311,7 +4304,7 @@ var VariableExtension = core.Node.create({
   }
 });
 var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsList = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
@@ -4323,7 +4316,7 @@ var TabsList = React27__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsTrigger = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
@@ -4335,7 +4328,7 @@ var TabsTrigger = React27__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Content,
   {
     ref,
@@ -4370,14 +4363,14 @@ var HazoUiRte = ({
   className,
   show_output_viewer = false
 }) => {
-  const [attachments, set_attachments] = React27__namespace.useState(
+  const [attachments, set_attachments] = React25__namespace.useState(
     initial_attachments
   );
-  const [active_tab, set_active_tab] = React27__namespace.useState("html");
+  const [active_tab, set_active_tab] = React25__namespace.useState("html");
   const is_view_only = active_tab !== "html";
-  const attachments_ref = React27__namespace.useRef(attachments);
+  const attachments_ref = React25__namespace.useRef(attachments);
   attachments_ref.current = attachments;
-  const debounced_on_change = React27__namespace.useMemo(
+  const debounced_on_change = React25__namespace.useMemo(
     () => debounce_fn((output) => {
       if (on_change) {
         on_change(output);
@@ -4476,7 +4469,7 @@ var HazoUiRte = ({
       debounced_on_change(output);
     }
   });
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (editor && html !== void 0) {
       const current_html = editor.getHTML();
       if (html !== current_html && !editor.isFocused) {
@@ -4484,21 +4477,21 @@ var HazoUiRte = ({
       }
     }
   }, [html, editor]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const attachments_from_props_ref = React27__namespace.useRef(false);
-  const prev_initial_attachments_ref = React27__namespace.useRef(initial_attachments);
-  React27__namespace.useEffect(() => {
+  const attachments_from_props_ref = React25__namespace.useRef(false);
+  const prev_initial_attachments_ref = React25__namespace.useRef(initial_attachments);
+  React25__namespace.useEffect(() => {
     if (JSON.stringify(initial_attachments) !== JSON.stringify(prev_initial_attachments_ref.current)) {
       prev_initial_attachments_ref.current = initial_attachments;
       attachments_from_props_ref.current = true;
       set_attachments(initial_attachments);
     }
   }, [initial_attachments]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (attachments_from_props_ref.current) {
       attachments_from_props_ref.current = false;
       return;
@@ -5000,12 +4993,12 @@ var CommandPopover = ({
   on_selection_change: _on_selection_change,
   prefix_color
 }) => {
-  const container_ref = React27__namespace.useRef(null);
-  const grouped_commands = React27__namespace.useMemo(
+  const container_ref = React25__namespace.useRef(null);
+  const grouped_commands = React25__namespace.useMemo(
     () => group_commands(commands),
     [commands]
   );
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     const handle_click_outside = (e) => {
       if (container_ref.current && !container_ref.current.contains(e.target)) {
         on_close();
@@ -5018,8 +5011,8 @@ var CommandPopover = ({
       };
     }
   }, [is_open, on_close]);
-  const [mounted, set_mounted] = React27__namespace.useState(false);
-  React27__namespace.useEffect(() => {
+  const [mounted, set_mounted] = React25__namespace.useState(false);
+  React25__namespace.useEffect(() => {
     set_mounted(true);
   }, []);
   if (!is_open || !mounted) return null;
@@ -5329,21 +5322,21 @@ var HazoUiTextbox = ({
   on_command_change,
   on_command_remove
 }) => {
-  const generated_instance_id = React27__namespace.useId();
+  const generated_instance_id = React25__namespace.useId();
   const instance_id = provided_instance_id || generated_instance_id;
-  const [suggestion_state, set_suggestion_state] = React27__namespace.useState(null);
-  const [selected_index, set_selected_index] = React27__namespace.useState(0);
-  const [popover_position, set_popover_position] = React27__namespace.useState({ top: 0, left: 0 });
-  const [edit_context, set_edit_context] = React27__namespace.useState(null);
-  const [edit_selected_index, set_edit_selected_index] = React27__namespace.useState(0);
+  const [suggestion_state, set_suggestion_state] = React25__namespace.useState(null);
+  const [selected_index, set_selected_index] = React25__namespace.useState(0);
+  const [popover_position, set_popover_position] = React25__namespace.useState({ top: 0, left: 0 });
+  const [edit_context, set_edit_context] = React25__namespace.useState(null);
+  const [edit_selected_index, set_edit_selected_index] = React25__namespace.useState(0);
   const is_controlled = value !== void 0;
-  const editor_container_ref = React27__namespace.useRef(null);
-  const edit_popover_ref = React27__namespace.useRef(null);
-  const [mounted, set_mounted] = React27__namespace.useState(false);
-  React27__namespace.useEffect(() => {
+  const editor_container_ref = React25__namespace.useRef(null);
+  const edit_popover_ref = React25__namespace.useRef(null);
+  const [mounted, set_mounted] = React25__namespace.useState(false);
+  React25__namespace.useEffect(() => {
     set_mounted(true);
   }, []);
-  const suggestion_extensions = React27__namespace.useMemo(() => {
+  const suggestion_extensions = React25__namespace.useMemo(() => {
     return create_command_suggestion_extension({
       prefixes,
       instance_id,
@@ -5394,7 +5387,7 @@ var HazoUiTextbox = ({
       }
     }
   });
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (suggestion_state?.is_active && editor) {
       requestAnimationFrame(() => {
         const { from } = suggestion_state.range;
@@ -5418,7 +5411,7 @@ var HazoUiTextbox = ({
       });
     }
   }, [suggestion_state, editor]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (is_controlled && editor && !editor.isFocused) {
       const current_text = editor.getText();
       if (value !== current_text) {
@@ -5427,12 +5420,12 @@ var HazoUiTextbox = ({
       }
     }
   }, [value, editor, is_controlled, prefixes, pill_variant]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const handle_command_select = React27__namespace.useCallback(
+  const handle_command_select = React25__namespace.useCallback(
     (command) => {
       if (!editor || !suggestion_state) return;
       const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
@@ -5452,15 +5445,15 @@ var HazoUiTextbox = ({
     },
     [editor, suggestion_state, pill_variant, on_command_insert, prefixes]
   );
-  const handle_popover_close = React27__namespace.useCallback(() => {
+  const handle_popover_close = React25__namespace.useCallback(() => {
     set_suggestion_state(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_edit_close = React27__namespace.useCallback(() => {
+  const handle_edit_close = React25__namespace.useCallback(() => {
     set_edit_context(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_command_update = React27__namespace.useCallback(
+  const handle_command_update = React25__namespace.useCallback(
     (new_command) => {
       if (!editor || !edit_context) return;
       const old_command = edit_context.command;
@@ -5476,7 +5469,7 @@ var HazoUiTextbox = ({
     },
     [editor, edit_context, on_command_change]
   );
-  const handle_command_remove = React27__namespace.useCallback(() => {
+  const handle_command_remove = React25__namespace.useCallback(() => {
     if (!editor || !edit_context) return;
     const command = edit_context.command;
     editor.state.doc.descendants((node, pos) => {
@@ -5490,7 +5483,7 @@ var HazoUiTextbox = ({
     }
     set_edit_context(null);
   }, [editor, edit_context, on_command_remove]);
-  const filtered_commands = React27__namespace.useMemo(() => {
+  const filtered_commands = React25__namespace.useMemo(() => {
     if (!suggestion_state) return [];
     const query = suggestion_state.query.toLowerCase();
     if (!query) return suggestion_state.commands;
@@ -5498,7 +5491,7 @@ var HazoUiTextbox = ({
       (cmd) => cmd.action_label.toLowerCase().includes(query) || cmd.action.toLowerCase().includes(query) || cmd.action_description?.toLowerCase().includes(query)
     );
   }, [suggestion_state]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (!suggestion_state?.is_active) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -5533,7 +5526,7 @@ var HazoUiTextbox = ({
     handle_command_select,
     handle_popover_close
   ]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (!edit_context) return;
     const handle_click_outside = (e) => {
       if (edit_popover_ref.current && !edit_popover_ref.current.contains(e.target)) {
@@ -5548,12 +5541,12 @@ var HazoUiTextbox = ({
       document.removeEventListener("mousedown", handle_click_outside);
     };
   }, [edit_context]);
-  const edit_commands = React27__namespace.useMemo(() => {
+  const edit_commands = React25__namespace.useMemo(() => {
     if (!edit_context) return [];
     const prefix_config = prefixes.find((p) => p.char === edit_context.command.prefix);
     return prefix_config?.commands || [];
   }, [edit_context, prefixes]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (!edit_context) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -5591,7 +5584,7 @@ var HazoUiTextbox = ({
     handle_command_remove,
     handle_edit_close
   ]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     const handle_pill_click = (e) => {
       const detail = e.detail;
       const { id, prefix, action, action_label, node_pos } = detail;
@@ -5874,22 +5867,22 @@ var HazoUiTextarea = ({
   on_command_change,
   on_command_remove
 }) => {
-  const generated_instance_id = React27__namespace.useId();
+  const generated_instance_id = React25__namespace.useId();
   const instance_id = provided_instance_id || generated_instance_id;
-  const [suggestion_state, set_suggestion_state] = React27__namespace.useState(null);
-  const [selected_index, set_selected_index] = React27__namespace.useState(0);
-  const [popover_position, set_popover_position] = React27__namespace.useState({ top: 0, left: 0 });
-  const [edit_context, set_edit_context] = React27__namespace.useState(null);
-  const [edit_selected_index, set_edit_selected_index] = React27__namespace.useState(0);
+  const [suggestion_state, set_suggestion_state] = React25__namespace.useState(null);
+  const [selected_index, set_selected_index] = React25__namespace.useState(0);
+  const [popover_position, set_popover_position] = React25__namespace.useState({ top: 0, left: 0 });
+  const [edit_context, set_edit_context] = React25__namespace.useState(null);
+  const [edit_selected_index, set_edit_selected_index] = React25__namespace.useState(0);
   const is_controlled = value !== void 0;
-  const editor_container_ref = React27__namespace.useRef(null);
-  const edit_popover_ref = React27__namespace.useRef(null);
-  const [mounted, set_mounted] = React27__namespace.useState(false);
-  React27__namespace.useEffect(() => {
+  const editor_container_ref = React25__namespace.useRef(null);
+  const edit_popover_ref = React25__namespace.useRef(null);
+  const [mounted, set_mounted] = React25__namespace.useState(false);
+  React25__namespace.useEffect(() => {
     set_mounted(true);
   }, []);
   const calculated_min_height = rows ? `${rows * 1.5}em` : min_height;
-  const suggestion_extensions = React27__namespace.useMemo(() => {
+  const suggestion_extensions = React25__namespace.useMemo(() => {
     return create_command_suggestion_extension({
       prefixes,
       instance_id,
@@ -5938,7 +5931,7 @@ var HazoUiTextarea = ({
       }
     }
   });
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (suggestion_state?.is_active && editor) {
       requestAnimationFrame(() => {
         const { from } = suggestion_state.range;
@@ -5962,7 +5955,7 @@ var HazoUiTextarea = ({
       });
     }
   }, [suggestion_state, editor]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (is_controlled && editor && !editor.isFocused) {
       const current_text = editor.getText();
       if (value !== current_text) {
@@ -5975,12 +5968,12 @@ var HazoUiTextarea = ({
       }
     }
   }, [value, editor, is_controlled, prefixes, pill_variant]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const handle_command_select = React27__namespace.useCallback(
+  const handle_command_select = React25__namespace.useCallback(
     (command) => {
       if (!editor || !suggestion_state) return;
       const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
@@ -6000,15 +5993,15 @@ var HazoUiTextarea = ({
     },
     [editor, suggestion_state, pill_variant, on_command_insert, prefixes]
   );
-  const handle_popover_close = React27__namespace.useCallback(() => {
+  const handle_popover_close = React25__namespace.useCallback(() => {
     set_suggestion_state(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_edit_close = React27__namespace.useCallback(() => {
+  const handle_edit_close = React25__namespace.useCallback(() => {
     set_edit_context(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_command_update = React27__namespace.useCallback(
+  const handle_command_update = React25__namespace.useCallback(
     (new_command) => {
       if (!editor || !edit_context) return;
       const old_command = edit_context.command;
@@ -6024,7 +6017,7 @@ var HazoUiTextarea = ({
     },
     [editor, edit_context, on_command_change]
   );
-  const handle_command_remove = React27__namespace.useCallback(() => {
+  const handle_command_remove = React25__namespace.useCallback(() => {
     if (!editor || !edit_context) return;
     const command = edit_context.command;
     editor.state.doc.descendants((node, pos) => {
@@ -6038,7 +6031,7 @@ var HazoUiTextarea = ({
     }
     set_edit_context(null);
   }, [editor, edit_context, on_command_remove]);
-  const filtered_commands = React27__namespace.useMemo(() => {
+  const filtered_commands = React25__namespace.useMemo(() => {
     if (!suggestion_state) return [];
     const query = suggestion_state.query.toLowerCase();
     if (!query) return suggestion_state.commands;
@@ -6046,7 +6039,7 @@ var HazoUiTextarea = ({
       (cmd) => cmd.action_label.toLowerCase().includes(query) || cmd.action.toLowerCase().includes(query) || cmd.action_description?.toLowerCase().includes(query)
     );
   }, [suggestion_state]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (!suggestion_state?.is_active) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -6081,7 +6074,7 @@ var HazoUiTextarea = ({
     handle_command_select,
     handle_popover_close
   ]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (!edit_context) return;
     const handle_click_outside = (e) => {
       if (edit_popover_ref.current && !edit_popover_ref.current.contains(e.target)) {
@@ -6096,12 +6089,12 @@ var HazoUiTextarea = ({
       document.removeEventListener("mousedown", handle_click_outside);
     };
   }, [edit_context]);
-  const edit_commands = React27__namespace.useMemo(() => {
+  const edit_commands = React25__namespace.useMemo(() => {
     if (!edit_context) return [];
     const prefix_config = prefixes.find((p) => p.char === edit_context.command.prefix);
     return prefix_config?.commands || [];
   }, [edit_context, prefixes]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (!edit_context) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -6139,7 +6132,7 @@ var HazoUiTextarea = ({
     handle_command_remove,
     handle_edit_close
   ]);
-  React27__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     const handle_pill_click = (e) => {
       const detail = e.detail;
       const { id, prefix, action, action_label, node_pos } = detail;
@@ -6686,7 +6679,7 @@ function HazoUiConfirmDialog({
   openAnimation = "zoom",
   closeAnimation = "zoom"
 }) {
-  const [internal_loading, set_internal_loading] = React27__namespace.useState(false);
+  const [internal_loading, set_internal_loading] = React25__namespace.useState(false);
   const config = get_hazo_ui_config();
   const variant_preset = variant !== "default" ? CONFIRM_VARIANT_PRESETS[variant] : void 0;
   const is_loading = external_loading ?? internal_loading;
@@ -6723,7 +6716,7 @@ function HazoUiConfirmDialog({
     onCancel?.();
     onOpenChange(false);
   };
-  const cancel_ref = React27__namespace.useRef(null);
+  const cancel_ref = React25__namespace.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DialogOverlay,
@@ -6808,7 +6801,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = vaul.Drawer.Trigger;
 var DrawerPortal = vaul.Drawer.Portal;
 var DrawerClose = vaul.Drawer.Close;
-var DrawerOverlay = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DrawerOverlay = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   vaul.Drawer.Overlay,
   {
     ref,
@@ -6820,7 +6813,7 @@ var DrawerOverlay = React27__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
+var DrawerContent = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     vaul.Drawer.Content,
@@ -6861,7 +6854,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DrawerTitle = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   vaul.Drawer.Title,
   {
     ref,
@@ -6873,7 +6866,7 @@ var DrawerTitle = React27__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DrawerDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   vaul.Drawer.Description,
   {
     ref,
@@ -6883,14 +6876,14 @@ var DrawerDescription = React27__namespace.forwardRef(({ className, ...props },
 ));
 DrawerDescription.displayName = "DrawerDescription";
 function useMediaQuery(query) {
-  const get_match = React27__namespace.useCallback(() => {
+  const get_match = React25__namespace.useCallback(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return false;
     }
     return window.matchMedia(query).matches;
   }, [query]);
-  const [matches, set_matches] = React27__namespace.useState(false);
-  React27__namespace.useEffect(() => {
+  const [matches, set_matches] = React25__namespace.useState(false);
+  React25__namespace.useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
     }
@@ -6907,7 +6900,7 @@ function useMediaQuery(query) {
   return matches;
 }
 var Accordion = AccordionPrimitive__namespace.Root;
-var AccordionItem = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionItem = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Item,
   {
     ref,
@@ -6916,7 +6909,7 @@ var AccordionItem = React27__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+var AccordionTrigger = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
   AccordionPrimitive__namespace.Trigger,
   {
     ref,
@@ -6932,7 +6925,7 @@ var AccordionTrigger = React27__namespace.forwardRef(({ className, children, ...
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
-var AccordionContent = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionContent = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Content,
   {
     ref,
@@ -6942,7 +6935,7 @@ var AccordionContent = React27__namespace.forwardRef(({ className, children, ...
   }
 ));
 AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;
-var Checkbox = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Checkbox = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
     ref,
@@ -6967,7 +6960,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-var DropdownMenuSubTrigger = React27__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuSubTrigger = React25__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.SubTrigger,
   {
     ref,
@@ -6984,7 +6977,7 @@ var DropdownMenuSubTrigger = React27__namespace.forwardRef(({ className, inset,
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-var DropdownMenuSubContent = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuSubContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.SubContent,
   {
     ref,
@@ -6996,7 +6989,7 @@ var DropdownMenuSubContent = React27__namespace.forwardRef(({ className, ...prop
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-var DropdownMenuContent = React27__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuContent = React25__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Content,
   {
     ref,
@@ -7009,7 +7002,7 @@ var DropdownMenuContent = React27__namespace.forwardRef(({ className, sideOffset
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React27__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuItem = React25__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Item,
   {
     ref,
@@ -7022,7 +7015,7 @@ var DropdownMenuItem = React27__namespace.forwardRef(({ className, inset, ...pro
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuCheckboxItem = React27__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuCheckboxItem = React25__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.CheckboxItem,
   {
     ref,
@@ -7039,7 +7032,7 @@ var DropdownMenuCheckboxItem = React27__namespace.forwardRef(({ className, child
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuRadioItem = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.RadioItem,
   {
     ref,
@@ -7055,7 +7048,7 @@ var DropdownMenuRadioItem = React27__namespace.forwardRef(({ className, children
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-var DropdownMenuLabel = React27__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuLabel = React25__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Label,
   {
     ref,
@@ -7068,7 +7061,7 @@ var DropdownMenuLabel = React27__namespace.forwardRef(({ className, inset, ...pr
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuSeparator = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Separator,
   {
     ref,
@@ -7092,7 +7085,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var HoverCard = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
-var HoverCardContent = React27__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var HoverCardContent = React25__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   HoverCardPrimitive__namespace.Content,
   {
     ref,
@@ -7106,28 +7099,64 @@ var HoverCardContent = React27__namespace.forwardRef(({ className, align = "cent
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
-var Textarea = React27__namespace.forwardRef(
+var Label3 = React25__namespace.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
+      "label",
       {
+        ref,
         className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2",
-          "text-sm ring-offset-background",
-          "placeholder:text-muted-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50",
+          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
           className
         ),
-        ref,
         ...props
       }
     );
   }
 );
-Textarea.displayName = "Textarea";
-var Separator3 = React27__namespace.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  SeparatorPrimitive__namespace.Root,
+Label3.displayName = "Label";
+var Switch = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SwitchPrimitives__namespace.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      SwitchPrimitives__namespace.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+var Textarea = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2",
+          "text-sm ring-offset-background",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var Separator3 = React25__namespace.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SeparatorPrimitive__namespace.Root,
   {
     ref,
     decorative,
@@ -7144,7 +7173,7 @@ Separator3.displayName = SeparatorPrimitive__namespace.Root.displayName;
 var Collapsible = CollapsiblePrimitive__namespace.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive__namespace.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive__namespace.CollapsibleContent;
-var ScrollArea = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ScrollArea = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ScrollAreaPrimitive__namespace.Root,
   {
     ref,
@@ -7158,7 +7187,7 @@ var ScrollArea = React27__namespace.forwardRef(({ className, children, ...props
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React27__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React25__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
@@ -7174,27 +7203,27 @@ var ScrollBar = React27__namespace.forwardRef(({ className, orientation = "verti
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
-var Card = React27__namespace.forwardRef(
+var Card = React25__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })
 );
 Card.displayName = "Card";
-var CardHeader = React27__namespace.forwardRef(
+var CardHeader = React25__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React27__namespace.forwardRef(
+var CardTitle = React25__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React27__namespace.forwardRef(
+var CardDescription = React25__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React27__namespace.forwardRef(
+var CardContent = React25__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React27__namespace.forwardRef(
+var CardFooter = React25__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -7227,16 +7256,16 @@ var toggleVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Toggle = React27__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, { ref, className: cn(toggleVariants({ variant, size, className })), ...props }));
+var Toggle = React25__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, { ref, className: cn(toggleVariants({ variant, size, className })), ...props }));
 Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
-var ToggleGroupContext = React27__namespace.createContext({
+var ToggleGroupContext = React25__namespace.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React27__namespace.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupPrimitive__namespace.Root, { ref, className: cn("flex items-center justify-center gap-1", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children }) }));
+var ToggleGroup = React25__namespace.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupPrimitive__namespace.Root, { ref, className: cn("flex items-center justify-center gap-1", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children }) }));
 ToggleGroup.displayName = ToggleGroupPrimitive__namespace.Root.displayName;
-var ToggleGroupItem = React27__namespace.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React27__namespace.useContext(ToggleGroupContext);
+var ToggleGroupItem = React25__namespace.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React25__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -7251,7 +7280,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive__namespace.Item.displayName;
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogOverlay = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Overlay,
   {
     ref,
@@ -7260,7 +7289,7 @@ var AlertDialogOverlay = React27__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Content,
@@ -7276,13 +7305,13 @@ var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+var AlertDialogTitle = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var AlertDialogDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+var AlertDialogAction = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Action, { ref, className: cn(buttonVariants(), className), ...props }));
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Cancel, { ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props }));
+var AlertDialogCancel = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Cancel, { ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props }));
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
 var buttonGroupVariants = classVarianceAuthority.cva(
   "flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
@@ -7310,7 +7339,7 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
 }
-var SkeletonBase = React27__namespace.forwardRef(
+var SkeletonBase = React25__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -7486,8 +7515,8 @@ function LoadingTimeout({
     firm: thresholds?.firm ?? 15e3,
     expired: thresholds?.expired ?? 3e4
   };
-  const [phase, setPhase] = React27__namespace.useState(active ? "silent" : "idle");
-  React27__namespace.useEffect(() => {
+  const [phase, setPhase] = React25__namespace.useState(active ? "silent" : "idle");
+  React25__namespace.useEffect(() => {
     if (!active) {
       setPhase("idle");
       return;
@@ -7546,7 +7575,7 @@ function ProgressiveImage({
   onLoad,
   onError
 }) {
-  const [loaded, setLoaded] = React27__namespace.useState(false);
+  const [loaded, setLoaded] = React25__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7627,8 +7656,8 @@ function errorToast({ title, description, duration = 5e3, action }) {
   });
 }
 function useLoadingState(initial = false) {
-  const [isLoading, setLoading] = React27.useState(initial);
-  const withLoading = React27.useCallback(async (fn) => {
+  const [isLoading, setLoading] = React25.useState(initial);
+  const withLoading = React25.useCallback(async (fn) => {
     setLoading(true);
     try {
       return await fn();
@@ -7639,8 +7668,8 @@ function useLoadingState(initial = false) {
   return { isLoading, setLoading, withLoading };
 }
 function useErrorDisplay() {
-  const [error, setRaw] = React27.useState(null);
-  const setError = React27.useCallback((value) => {
+  const [error, setRaw] = React25.useState(null);
+  const setError = React25.useCallback((value) => {
     if (value == null) {
       setRaw(null);
       return;
@@ -7655,9 +7684,1623 @@ function useErrorDisplay() {
     }
     setRaw(String(value));
   }, []);
-  const clearError = React27.useCallback(() => setRaw(null), []);
+  const clearError = React25.useCallback(() => setRaw(null), []);
   return { error, setError, clearError };
 }
+function KanbanCard({
+  item,
+  renderCard,
+  dragging = false,
+  cardClassName,
+  showEdit = false,
+  onEditRequest
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: item.id, data: { columnKey: item.columnKey } });
+  const priority_var = item.priority ? `--hazo-kanban-priority-${String(item.priority).toLowerCase()}` : null;
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    backgroundColor: "hsl(var(--hazo-kanban-card-bg))",
+    border: `1px solid hsl(var(--hazo-kanban-card-border))`,
+    borderLeft: priority_var ? `4px solid hsl(var(${priority_var}))` : `1px solid hsl(var(--hazo-kanban-card-border))`,
+    opacity: isDragging && !dragging ? 0.4 : 1,
+    cursor: "grab"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(
+        "cls_hazo_kanban_card group relative rounded-md p-3 mb-2 select-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        dragging && "cls_hazo_kanban_card_overlay shadow-lg",
+        cardClassName
+      ),
+      ...attributes,
+      ...listeners,
+      role: "button",
+      tabIndex: 0,
+      "aria-roledescription": "draggable card",
+      "aria-grabbed": isDragging,
+      children: [
+        showEdit && onEditRequest && !dragging && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onPointerDown: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation(),
+            onKeyDown: (e) => e.stopPropagation(),
+            onClick: (e) => {
+              e.stopPropagation();
+              onEditRequest(item);
+            },
+            "aria-label": `Edit ${item.id}`,
+            className: cn(
+              "cls_hazo_kanban_card_edit absolute top-1.5 right-1.5",
+              "p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent",
+              "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
+              "focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "transition-opacity duration-150"
+            ),
+            tabIndex: 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        renderCard(item)
+      ]
+    }
+  );
+}
+function KanbanColumn({
+  column,
+  items,
+  renderCard,
+  emptyColumn,
+  cardClassName,
+  showEdit,
+  onEditRequest
+}) {
+  const { setNodeRef, isOver } = core$1.useDroppable({
+    id: `column:${column.key}`,
+    data: { columnKey: column.key, isColumn: true }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "cls_hazo_kanban_column flex flex-col rounded-md p-2",
+        isOver && "cls_hazo_kanban_column_over bg-accent/30 ring-2 ring-ring/40"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_kanban_column_head flex items-center justify-between mb-2 px-1 text-xs uppercase tracking-wider text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_title", children: column.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_count rounded-full bg-muted px-2 py-0.5 text-foreground", children: items.length })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          sortable.SortableContext,
+          {
+            items: items.map((i) => i.id),
+            strategy: sortable.verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]", children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              KanbanCard,
+              {
+                item,
+                renderCard,
+                cardClassName,
+                showEdit,
+                onEditRequest
+              },
+              item.id
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+var DEFAULT_PRIORITIES = ["P0", "P1", "P2", "P3"];
+function humanize(key) {
+  return key.replace(/[_\-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\s+/g, " ").trim().split(" ").map((w) => w ? w[0].toUpperCase() + w.slice(1) : w).join(" ");
+}
+function auto_detect_fields(item, columns) {
+  const skip = /* @__PURE__ */ new Set(["id", "columnKey", "priority"]);
+  const out = [];
+  for (const [key, value] of Object.entries(item)) {
+    if (skip.has(key)) continue;
+    if (typeof value === "string") {
+      out.push({ key, type: "text" });
+    }
+  }
+  if (columns.length > 0) {
+    out.push({ key: "columnKey", type: "status", label: "Status" });
+  }
+  return out;
+}
+function KanbanEditor({
+  item,
+  columns,
+  fields,
+  priorities,
+  titleFn,
+  renderBody,
+  hideFooter = false,
+  onSave,
+  onClose
+}) {
+  const [draft, set_draft] = React25__namespace.useState(item);
+  const [saving, set_saving] = React25__namespace.useState(false);
+  const [error, set_error] = React25__namespace.useState(null);
+  const item_id = item?.id ?? null;
+  React25__namespace.useEffect(() => {
+    set_draft(item);
+    set_error(null);
+    set_saving(false);
+  }, [item_id]);
+  const resolved_columns = columns ?? [];
+  const resolved_priorities = priorities ?? DEFAULT_PRIORITIES;
+  const resolved_fields = React25__namespace.useMemo(() => {
+    if (fields) return fields;
+    if (!item) return [];
+    return auto_detect_fields(item, resolved_columns);
+  }, [fields, item, resolved_columns]);
+  const required_keys = React25__namespace.useMemo(
+    () => resolved_fields.filter(
+      (f) => f.required && (f.type === "text" || f.type === "textarea" || f.type === "number")
+    ).map((f) => f.key),
+    [resolved_fields]
+  );
+  const all_required_filled = React25__namespace.useMemo(() => {
+    if (!draft) return false;
+    for (const key of required_keys) {
+      const v = draft[key];
+      if (v === void 0 || v === null || v === "") return false;
+      if (typeof v === "string" && v.trim() === "") return false;
+    }
+    return true;
+  }, [draft, required_keys]);
+  const is_dirty = React25__namespace.useMemo(() => {
+    if (!draft || !item) return false;
+    try {
+      return JSON.stringify(draft) !== JSON.stringify(item);
+    } catch {
+      return draft !== item;
+    }
+  }, [draft, item]);
+  const handle_save = React25__namespace.useCallback(async () => {
+    if (!draft || !item) return;
+    if (saving) return;
+    set_error(null);
+    if (!onSave) {
+      onClose();
+      return;
+    }
+    const result = onSave({ itemId: item.id, item, next: draft });
+    if (result && typeof result.then === "function") {
+      set_saving(true);
+      try {
+        await result;
+        set_saving(false);
+        onClose();
+      } catch (err) {
+        set_saving(false);
+        const message = err instanceof Error ? err.message : String(err);
+        set_error(message);
+      }
+    } else {
+      onClose();
+    }
+  }, [draft, item, onSave, onClose, saving]);
+  const ctx = {
+    draft: draft ?? item,
+    setDraft: (next) => {
+      set_draft((prev) => {
+        const base = prev ?? item;
+        if (!base) return prev;
+        if (typeof next === "function") {
+          return next(base);
+        }
+        return next;
+      });
+    },
+    save: handle_save,
+    close: onClose,
+    saving,
+    error,
+    isDirty: is_dirty
+  };
+  const open = item !== null;
+  const title = item && titleFn ? titleFn(item) : item ? `Edit ${item.id}` : "";
+  const priority_var = item?.priority ? `--hazo-kanban-priority-${String(item.priority).toLowerCase()}` : null;
+  const header_bar_color = priority_var ? `hsl(var(${priority_var}))` : void 0;
+  const use_default_footer = !(renderBody && hideFooter);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HazoUiDialog,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o && !saving) onClose();
+      },
+      title,
+      description: "Update card details below.",
+      sizeWidth: "min(90vw, 480px)",
+      openAnimation: "none",
+      closeAnimation: "none",
+      headerBar: !!priority_var,
+      headerBarColor: header_bar_color,
+      contentClassName: cn("cls_hazo_kanban_editor", priority_var && "pt-0"),
+      actionButtonText: saving ? "Saving\u2026" : "Save",
+      actionButtonIcon: saving ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-2" }),
+      actionButtonLoading: saving,
+      actionButtonDisabled: !is_dirty || !all_required_filled || saving,
+      cancelButtonText: "Cancel",
+      showCancelButton: true,
+      onConfirm: handle_save,
+      onCancel: onClose,
+      footerContent: use_default_footer ? void 0 : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_kanban_editor_body flex flex-col gap-4", children: [
+        item && draft && renderBody ? renderBody(item, ctx) : draft ? resolved_fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+          KanbanEditorFieldRow,
+          {
+            field,
+            draft,
+            setDraft: (updater) => set_draft(
+              (prev) => prev ? updater(prev) : prev
+            ),
+            priorities: resolved_priorities,
+            columns: resolved_columns
+          },
+          field.key
+        )) : null,
+        error && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "cls_hazo_kanban_editor_error mt-1 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+            role: "alert",
+            children: error
+          }
+        )
+      ] })
+    }
+  );
+}
+function KanbanEditorFieldRow({
+  field,
+  draft,
+  setDraft,
+  priorities,
+  columns
+}) {
+  const id = `kanban-editor-${field.key}`;
+  const label = field.label ?? humanize(field.key);
+  const value = draft[field.key];
+  const set_value = (next_value) => {
+    setDraft((prev) => ({ ...prev, [field.key]: next_value }));
+  };
+  const required_marker_shown = field.required && (field.type === "text" || field.type === "textarea" || field.type === "number");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cls_hazo_kanban_editor_field flex flex-col gap-1.5"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Label3, { htmlFor: id, className: "text-xs font-medium text-muted-foreground", children: [
+      label,
+      required_marker_shown && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+    ] }),
+    field.type === "text" && /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id,
+        value: typeof value === "string" ? value : "",
+        placeholder: field.placeholder,
+        onChange: (e) => set_value(e.target.value)
+      }
+    ),
+    field.type === "textarea" && /* @__PURE__ */ jsxRuntime.jsx(
+      Textarea,
+      {
+        id,
+        value: typeof value === "string" ? value : "",
+        placeholder: field.placeholder,
+        rows: 3,
+        onChange: (e) => set_value(e.target.value)
+      }
+    ),
+    field.type === "number" && /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id,
+        type: "number",
+        value: typeof value === "number" ? value : value === "" || value == null ? "" : Number(value) || 0,
+        placeholder: field.placeholder,
+        onChange: (e) => set_value(e.target.value === "" ? void 0 : Number(e.target.value))
+      }
+    ),
+    field.type === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
+      Checkbox,
+      {
+        id,
+        checked: !!value,
+        onCheckedChange: (checked) => set_value(checked === true)
+      }
+    ),
+    field.type === "select" && /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        value: typeof value === "string" ? value : "",
+        onValueChange: set_value,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id, children: /* @__PURE__ */ jsxRuntime.jsx(
+            SelectValue,
+            {
+              placeholder: field.placeholder ?? `Select ${label}\u2026`
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt, children: opt }, opt)) })
+        ]
+      }
+    ),
+    field.type === "priority" && /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        value: typeof value === "string" ? value : "",
+        onValueChange: set_value,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id, children: /* @__PURE__ */ jsxRuntime.jsx(
+            SelectValue,
+            {
+              placeholder: field.placeholder ?? "Select priority\u2026"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: priorities.map((p) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: p, children: p }, p)) })
+        ]
+      }
+    ),
+    field.type === "status" && /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        value: typeof value === "string" ? value : "",
+        onValueChange: set_value,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id, children: /* @__PURE__ */ jsxRuntime.jsx(
+            SelectValue,
+            {
+              placeholder: field.placeholder ?? "Select status\u2026"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: col.key, children: col.title }, col.key)) })
+        ]
+      }
+    )
+  ] });
+}
+var EMPTY_FILTER = {
+  search: "",
+  categories: [],
+  priority: null
+};
+function HazoUiKanbanFilter({
+  search = true,
+  searchPlaceholder = "Search...",
+  categories,
+  priorities,
+  value,
+  defaultValue,
+  onChange,
+  className
+}) {
+  const is_controlled = value !== void 0;
+  const [internal, set_internal] = React25__namespace.useState(
+    defaultValue ?? EMPTY_FILTER
+  );
+  const current = is_controlled ? value : internal;
+  const update = React25__namespace.useCallback(
+    (next) => {
+      if (!is_controlled) set_internal(next);
+      onChange?.(next);
+    },
+    [is_controlled, onChange]
+  );
+  const has_active = current.search.length > 0 || current.categories.length > 0 || current.priority !== null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cls_hazo_kanban_filter flex flex-wrap items-center gap-3 p-2",
+        className
+      ),
+      children: [
+        search && /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            value: current.search,
+            onChange: (e) => update({ ...current, search: e.target.value }),
+            placeholder: searchPlaceholder,
+            className: "cls_hazo_kanban_filter_search w-full sm:w-64"
+          }
+        ),
+        categories && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          ToggleGroup,
+          {
+            type: "multiple",
+            value: current.categories,
+            onValueChange: (cats) => update({ ...current, categories: cats }),
+            className: "cls_hazo_kanban_filter_categories flex flex-wrap gap-1",
+            children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+              ToggleGroupItem,
+              {
+                value: cat,
+                size: "sm",
+                className: "cls_hazo_kanban_filter_category_chip",
+                children: cat
+              },
+              cat
+            ))
+          }
+        ),
+        priorities && priorities.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          ToggleGroup,
+          {
+            type: "single",
+            value: current.priority ?? "",
+            onValueChange: (p) => update({
+              ...current,
+              priority: p ? p : null
+            }),
+            className: "cls_hazo_kanban_filter_priority flex gap-1",
+            children: priorities.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+              ToggleGroupItem,
+              {
+                value: p,
+                size: "sm",
+                className: "cls_hazo_kanban_filter_priority_chip",
+                children: p
+              },
+              p
+            ))
+          }
+        ),
+        has_active && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => update(EMPTY_FILTER),
+            className: "cls_hazo_kanban_filter_clear",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 mr-1" }),
+              "Clear"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/hazo_ui_kanban/apply_kanban_filter.ts
+function applyKanbanFilter(items, filter) {
+  const search = filter.search.trim().toLowerCase();
+  return items.filter((item) => {
+    if (filter.priority && item.priority !== filter.priority) {
+      return false;
+    }
+    if (filter.categories.length > 0) {
+      const cat = item.category;
+      if (typeof cat !== "string" || !filter.categories.includes(cat)) {
+        return false;
+      }
+    }
+    if (search) {
+      const haystack = Object.values(item).filter((v) => typeof v === "string").join(" ").toLowerCase();
+      if (!haystack.includes(search)) {
+        return false;
+      }
+    }
+    return true;
+  });
+}
+function default_announcements(itemLabel) {
+  return {
+    onDragStart: ({ item, fromColumn }) => `Picked up ${itemLabel(item)}. Currently in ${fromColumn}. Use arrow keys to choose a different column. Press space to drop, escape to cancel.`,
+    onDragOver: ({ item, overColumn }) => overColumn ? `${itemLabel(item)} over ${overColumn}.` : "",
+    onDragEnd: ({ item, fromColumn, toColumn, newIndex }) => fromColumn === toColumn ? `${itemLabel(item)} reordered to position ${newIndex + 1} in ${toColumn}.` : `${itemLabel(item)} dropped in ${toColumn}, position ${newIndex + 1}.`,
+    onDragCancel: ({ item, fromColumn }) => `Movement cancelled. ${itemLabel(item)} returned to ${fromColumn}.`
+  };
+}
+function group_items_by_column(items, overlay, columns) {
+  const out = /* @__PURE__ */ new Map();
+  for (const col of columns) out.set(col.key, []);
+  const overlay_inserts = /* @__PURE__ */ new Map();
+  for (const col of columns) overlay_inserts.set(col.key, []);
+  for (const item of items) {
+    const ov = overlay.get(item.id);
+    if (ov) {
+      const bucket = overlay_inserts.get(ov.columnKey);
+      if (bucket) {
+        bucket.push({ item, index: ov.index });
+      }
+    } else {
+      const bucket = out.get(item.columnKey);
+      if (bucket) bucket.push(item);
+    }
+  }
+  for (const col of columns) {
+    const inserts = overlay_inserts.get(col.key) ?? [];
+    inserts.sort((a, b) => a.index - b.index);
+    const arr = out.get(col.key) ?? [];
+    for (const { item, index } of inserts) {
+      const at = Math.max(0, Math.min(index, arr.length));
+      arr.splice(at, 0, item);
+    }
+    out.set(col.key, arr);
+  }
+  return out;
+}
+function HazoUiKanban({
+  columns,
+  items,
+  renderCard,
+  onMove,
+  onReorder,
+  mobileBreakpoint = 640,
+  announcements,
+  emptyColumn = "\u2014",
+  className,
+  cardClassName,
+  itemLabel,
+  editorFields,
+  editorPriorities,
+  editorTitle,
+  renderCardEditor,
+  hideEditorFooter,
+  onCardSave,
+  disableEdit = false
+}) {
+  const label_fn = React25__namespace.useCallback(
+    (item) => itemLabel ? itemLabel(item) : item.id,
+    [itemLabel]
+  );
+  const dnd_context_id = React25__namespace.useId();
+  const [overlay, set_overlay] = React25__namespace.useState(
+    /* @__PURE__ */ new Map()
+  );
+  const [active_id, set_active_id] = React25__namespace.useState(null);
+  const [active_tab, set_active_tab] = React25__namespace.useState(columns[0]?.key ?? "");
+  const [editing_item, set_editing_item] = React25__namespace.useState(null);
+  const show_edit = !disableEdit && typeof onCardSave === "function";
+  const handle_edit_request = React25__namespace.useCallback(
+    (it) => {
+      const typed = items.find((x) => x.id === it.id);
+      if (typed) set_editing_item(typed);
+    },
+    [items]
+  );
+  const handle_editor_close = React25__namespace.useCallback(() => {
+    set_editing_item(null);
+  }, []);
+  React25__namespace.useEffect(() => {
+    if (overlay.size === 0) return;
+    set_overlay((prev) => {
+      let changed = false;
+      const next = new Map(prev);
+      for (const [item_id, pos] of prev.entries()) {
+        const item = items.find((i) => i.id === item_id);
+        if (item && item.columnKey === pos.columnKey) {
+          next.delete(item_id);
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [items, overlay]);
+  const grouped = React25__namespace.useMemo(
+    () => group_items_by_column(items, overlay, columns),
+    [items, overlay, columns]
+  );
+  const find_item = React25__namespace.useCallback(
+    (id) => items.find((i) => i.id === id),
+    [items]
+  );
+  const sensors = core$1.useSensors(
+    core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
+    core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
+  );
+  const merged_announcements = React25__namespace.useMemo(() => {
+    const defaults = default_announcements(label_fn);
+    return {
+      onDragStart: announcements?.onDragStart ?? defaults.onDragStart,
+      onDragOver: announcements?.onDragOver ?? defaults.onDragOver,
+      onDragEnd: announcements?.onDragEnd ?? defaults.onDragEnd,
+      onDragCancel: announcements?.onDragCancel ?? defaults.onDragCancel
+    };
+  }, [announcements, label_fn]);
+  const dnd_announcements = React25__namespace.useMemo(
+    () => ({
+      onDragStart({ active }) {
+        const id = String(active.id);
+        const item = find_item(id);
+        if (!item) return "";
+        const col = columns.find((c) => c.key === item.columnKey);
+        return merged_announcements.onDragStart({
+          item,
+          fromColumn: col?.title ?? item.columnKey
+        });
+      },
+      onDragOver({
+        active,
+        over
+      }) {
+        const id = String(active.id);
+        const item = find_item(id);
+        if (!item) return "";
+        const over_col_key = over ? over.data?.current?.columnKey ?? String(over.id).replace(/^column:/, "") : null;
+        const col = over_col_key ? columns.find((c) => c.key === over_col_key) : null;
+        return merged_announcements.onDragOver({
+          item,
+          overColumn: col?.title ?? null
+        });
+      },
+      onDragEnd({
+        active,
+        over
+      }) {
+        const id = String(active.id);
+        const item = find_item(id);
+        if (!item) return "";
+        const from_col = columns.find((c) => c.key === item.columnKey);
+        const over_col_key = over ? over.data?.current?.columnKey ?? String(over.id).replace(/^column:/, "") : null;
+        const to_col = over_col_key ? columns.find((c) => c.key === over_col_key) ?? from_col : from_col;
+        const target = over_col_key ? grouped.get(over_col_key) ?? [] : grouped.get(item.columnKey) ?? [];
+        const new_index = over && String(over.id) !== `column:${over_col_key}` ? target.findIndex((it) => it.id === String(over.id)) : target.length;
+        return merged_announcements.onDragEnd({
+          item,
+          fromColumn: from_col?.title ?? item.columnKey,
+          toColumn: to_col?.title ?? item.columnKey,
+          newIndex: Math.max(0, new_index)
+        });
+      },
+      onDragCancel({ active }) {
+        const id = String(active.id);
+        const item = find_item(id);
+        if (!item) return "";
+        const col = columns.find((c) => c.key === item.columnKey);
+        return merged_announcements.onDragCancel({
+          item,
+          fromColumn: col?.title ?? item.columnKey
+        });
+      }
+    }),
+    [find_item, columns, grouped, merged_announcements]
+  );
+  const handle_drag_start = React25__namespace.useCallback((event) => {
+    set_active_id(String(event.active.id));
+  }, []);
+  const make_revert_handle = React25__namespace.useCallback(
+    (item_id) => ({
+      revert: () => {
+        set_overlay((prev) => {
+          if (!prev.has(item_id)) return prev;
+          const next = new Map(prev);
+          next.delete(item_id);
+          return next;
+        });
+      }
+    }),
+    []
+  );
+  const handle_drag_end = React25__namespace.useCallback(
+    (event) => {
+      const active_id_str = String(event.active.id);
+      set_active_id(null);
+      const item = find_item(active_id_str);
+      if (!item) return;
+      if (!event.over) return;
+      const over_id = String(event.over.id);
+      const over_data = event.over.data?.current;
+      const dest_column_key = over_data?.columnKey ?? over_id.replace(/^column:/, "");
+      const dest_column = columns.find((c) => c.key === dest_column_key);
+      if (!dest_column) return;
+      if (dest_column.accepts && !dest_column.accepts(item)) return;
+      const dest_items_pre_overlay = grouped.get(dest_column_key) ?? [];
+      let new_index;
+      if (over_data?.isColumn) {
+        new_index = dest_items_pre_overlay.length;
+      } else {
+        const idx = dest_items_pre_overlay.findIndex((i) => i.id === over_id);
+        new_index = idx === -1 ? dest_items_pre_overlay.length : idx;
+      }
+      const handle = make_revert_handle(active_id_str);
+      if (item.columnKey === dest_column_key) {
+        if (active_id_str === over_id) return;
+        set_overlay((prev) => {
+          const next = new Map(prev);
+          next.set(active_id_str, {
+            columnKey: dest_column_key,
+            index: new_index
+          });
+          return next;
+        });
+        const reorder_event = {
+          itemId: active_id_str,
+          item,
+          columnKey: dest_column_key,
+          newIndex: new_index,
+          revert: handle.revert
+        };
+        onReorder?.(reorder_event);
+        return;
+      }
+      set_overlay((prev) => {
+        const next = new Map(prev);
+        next.set(active_id_str, {
+          columnKey: dest_column_key,
+          index: new_index
+        });
+        return next;
+      });
+      const move_event = {
+        itemId: active_id_str,
+        item,
+        fromColumn: item.columnKey,
+        toColumn: dest_column_key,
+        newIndex: new_index,
+        revert: handle.revert
+      };
+      onMove?.(move_event);
+    },
+    [find_item, columns, grouped, onMove, onReorder, make_revert_handle]
+  );
+  const handle_drag_cancel = React25__namespace.useCallback(() => {
+    set_active_id(null);
+  }, []);
+  const active_item = active_id ? find_item(active_id) : null;
+  const is_custom_breakpoint = mobileBreakpoint !== 640;
+  const is_mobile_via_query = useMediaQuery(
+    `(max-width: ${Math.max(0, mobileBreakpoint - 1)}px)`
+  );
+  const mobile_classes = is_custom_breakpoint ? is_mobile_via_query ? "block" : "hidden" : "sm:hidden";
+  const desktop_classes = is_custom_breakpoint ? is_mobile_via_query ? "hidden" : "grid" : "hidden sm:grid";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core$1.DndContext,
+    {
+      id: dnd_context_id,
+      sensors,
+      collisionDetection: core$1.closestCorners,
+      onDragStart: handle_drag_start,
+      onDragEnd: handle_drag_end,
+      onDragCancel: handle_drag_cancel,
+      accessibility: { announcements: dnd_announcements },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cls_hazo_kanban w-full", className), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cls_hazo_kanban_mobile", mobile_classes), children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: active_tab, onValueChange: set_active_tab, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "grid w-full", style: { gridTemplateColumns: `repeat(${columns.length}, 1fr)` }, children: columns.map((col) => {
+              const count = (grouped.get(col.key) ?? []).length;
+              return /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: col.key, className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: col.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: count })
+              ] }, col.key);
+            }) }),
+            columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: col.key, className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+              KanbanColumn,
+              {
+                column: col,
+                items: grouped.get(col.key) ?? [],
+                renderCard,
+                emptyColumn,
+                cardClassName,
+                showEdit: show_edit,
+                onEditRequest: handle_edit_request
+              }
+            ) }, col.key))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("cls_hazo_kanban_desktop gap-3", desktop_classes),
+              style: { gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))` },
+              children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+                KanbanColumn,
+                {
+                  column: col,
+                  items: grouped.get(col.key) ?? [],
+                  renderCard,
+                  emptyColumn,
+                  cardClassName,
+                  showEdit: show_edit,
+                  onEditRequest: handle_edit_request
+                },
+                col.key
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: active_item ? /* @__PURE__ */ jsxRuntime.jsx(
+            KanbanCard,
+            {
+              item: active_item,
+              renderCard,
+              dragging: true,
+              cardClassName
+            }
+          ) : null })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          KanbanEditor,
+          {
+            item: editing_item,
+            columns,
+            fields: editorFields,
+            priorities: editorPriorities,
+            titleFn: editorTitle,
+            renderBody: renderCardEditor,
+            hideFooter: hideEditorFooter,
+            onSave: onCardSave,
+            onClose: handle_editor_close
+          }
+        )
+      ]
+    }
+  );
+}
+var Table2 = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_table_wrap relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  ) })
+);
+Table2.displayName = "Table";
+var TableHeader2 = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+);
+TableHeader2.displayName = "TableHeader";
+var TableBody = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "tbody",
+    {
+      ref,
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  )
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "tfoot",
+    {
+      ref,
+      className: cn("bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  )
+);
+TableFooter.displayName = "TableFooter";
+var TableRow2 = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow2.displayName = "TableRow";
+var TableHead = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell2 = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+      ...props
+    }
+  )
+);
+TableCell2.displayName = "TableCell";
+var TableCaption = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "caption",
+    {
+      ref,
+      className: cn("mt-4 text-sm text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+TableCaption.displayName = "TableCaption";
+function TableMobileCards(props) {
+  const { columns, rows, getRowKey, onRowClick, renderCell: renderCell2 } = props;
+  const [titleCol, ...restCols] = columns;
+  if (!titleCol) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_ui_table_mobile_cards flex flex-col gap-3", children: rows.map((row, i) => {
+    const interactionProps = onRowClick ? {
+      role: "button",
+      tabIndex: 0,
+      className: "cls_hazo_ui_table_mobile_card_clickable cursor-pointer",
+      onClick: () => onRowClick(row, i),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onRowClick(row, i);
+        }
+      }
+    } : {};
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Card,
+      {
+        ...interactionProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: renderCell2(titleCol, row, i) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "pt-0 space-y-1.5", children: restCols.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "cls_hazo_ui_table_mobile_row flex items-center justify-between gap-3 text-sm"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_ui_table_mobile_label text-muted-foreground", children: c.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("cls_hazo_ui_table_mobile_value", c.className), children: renderCell2(c, row, i) })
+              ]
+            },
+            c.key
+          )) })
+        ]
+      },
+      getRowKey ? getRowKey(row, i) : i
+    );
+  }) });
+}
+var DEFAULT_DEBOUNCE_MS = 200;
+function useTableState(props) {
+  const [sortInternal, setSortInternal] = React25.useState(
+    () => normalizeSortProp(props.defaultSort)
+  );
+  const isSortControlled = props.sort !== void 0;
+  const sort = isSortControlled ? normalizeSortProp(props.sort) : sortInternal;
+  const setSort = React25.useCallback(
+    (next) => {
+      if (!isSortControlled) setSortInternal(next);
+      props.onSortChange?.(next);
+    },
+    [isSortControlled, props.onSortChange]
+  );
+  const cycleHeaderSort = React25.useCallback(
+    (key, append) => {
+      const next = append ? cycleAppendColumn(sort, key) : cycleSingleColumn(sort, key);
+      setSort(next);
+    },
+    [sort, setSort]
+  );
+  const [filterInternal, setFilterInternal] = React25.useState(
+    () => props.defaultFilter ?? {}
+  );
+  const isFilterControlled = props.filter !== void 0;
+  const filter = isFilterControlled ? props.filter : filterInternal;
+  const setFilter = React25.useCallback(
+    (next) => {
+      if (!isFilterControlled) setFilterInternal(next);
+      props.onFilterChange?.(next);
+    },
+    [isFilterControlled, props.onFilterChange]
+  );
+  const [searchDraft, setSearchDraft] = React25.useState(
+    filter.search ?? ""
+  );
+  const debounceMs = props.searchDebounceMs ?? DEFAULT_DEBOUNCE_MS;
+  React25.useEffect(() => {
+    const handle = setTimeout(() => {
+      if (searchDraft === (filter.search ?? "")) return;
+      setFilter({ ...filter, search: searchDraft || void 0 });
+    }, debounceMs);
+    return () => clearTimeout(handle);
+  }, [searchDraft, debounceMs]);
+  const setSearch = React25.useCallback((s) => setSearchDraft(s), []);
+  const [pageInternal, setPageInternal] = React25.useState(
+    () => props.defaultPage ?? 0
+  );
+  const isPageControlled = props.page !== void 0;
+  const page = isPageControlled ? props.page : pageInternal;
+  const setPage = React25.useCallback(
+    (next) => {
+      if (!isPageControlled) setPageInternal(next);
+      props.onPageChange?.(next);
+    },
+    [isPageControlled, props.onPageChange]
+  );
+  const prevSortKey = React25.useRef(serializeSort(sort));
+  const prevFilterKey = React25.useRef(serializeFilter(filter));
+  React25.useEffect(() => {
+    const sk = serializeSort(sort);
+    const fk = serializeFilter(filter);
+    if (sk !== prevSortKey.current || fk !== prevFilterKey.current) {
+      if (!isPageControlled) setPageInternal(0);
+      prevSortKey.current = sk;
+      prevFilterKey.current = fk;
+    }
+  }, [sort, filter, isPageControlled]);
+  const pageSize = props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize : 0;
+  const isServerMode = typeof props.onLoad === "function";
+  const filtered = React25.useMemo(
+    () => isServerMode ? props.rows : applyFilter(props.rows, filter, props.columns),
+    [props.rows, filter, props.columns, isServerMode]
+  );
+  const sorted = React25.useMemo(
+    () => isServerMode ? filtered : applySort(filtered, sort),
+    [filtered, sort, isServerMode]
+  );
+  const pagedInMemory = React25.useMemo(() => {
+    if (isServerMode || pageSize <= 0) return sorted;
+    const start = page * pageSize;
+    return sorted.slice(start, start + pageSize);
+  }, [sorted, page, pageSize, isServerMode]);
+  const [serverRows, setServerRows] = React25.useState([]);
+  const [serverTotal, setServerTotal] = React25.useState(0);
+  const [serverError, setServerError] = React25.useState(null);
+  const reqIdRef = React25.useRef(0);
+  React25.useEffect(() => {
+    if (!isServerMode) return;
+    const myId = ++reqIdRef.current;
+    let cancelled = false;
+    setServerError(null);
+    Promise.resolve(
+      props.onLoad({ page, sort, filter })
+    ).then((res) => {
+      if (cancelled || myId !== reqIdRef.current) return;
+      setServerRows(res.rows);
+      setServerTotal(res.total);
+    }).catch((err) => {
+      if (cancelled || myId !== reqIdRef.current) return;
+      console.warn("[HazoUiTable] onLoad rejected:", err);
+      setServerRows([]);
+      setServerTotal(0);
+      setServerError(err ?? new Error("onLoad rejected"));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isServerMode, page, sort, filter, props.onLoad]);
+  const displayed = isServerMode ? serverRows : pagedInMemory;
+  const totalAfterFilter = isServerMode ? serverTotal : filtered.length;
+  return {
+    sort,
+    setSort,
+    cycleHeaderSort,
+    filter,
+    setFilter,
+    setSearch,
+    page,
+    setPage,
+    displayed,
+    totalAfterFilter,
+    pageSize,
+    serverError: isServerMode ? serverError : null
+  };
+}
+function normalizeSortProp(p) {
+  if (!p) return [];
+  if (Array.isArray(p)) return p;
+  return [p];
+}
+function cycleSingleColumn(current, key) {
+  if (current.length !== 1) return [{ key, dir: "asc" }];
+  const only = current[0];
+  if (only.key !== key) return [{ key, dir: "asc" }];
+  if (only.dir === "asc") return [{ key, dir: "desc" }];
+  return [];
+}
+function cycleAppendColumn(current, key) {
+  const idx = current.findIndex((s) => s.key === key);
+  if (idx === -1) return [...current, { key, dir: "asc" }];
+  const entry = current[idx];
+  if (entry.dir === "asc") {
+    const next = current.slice();
+    next[idx] = { key, dir: "desc" };
+    return next;
+  }
+  return current.filter((_, i) => i !== idx);
+}
+function applyFilter(rows, filter, columns) {
+  let result = rows;
+  if (filter.fields && filter.fields.length > 0) {
+    result = result.filter(
+      (row) => filter.fields.every((f) => matchesFieldFilter(row, f, columns))
+    );
+  }
+  const needle = (filter.search ?? "").trim().toLowerCase();
+  if (needle.length > 0) {
+    const searchKeys = columns.filter(isSearchable).map((c) => c.key);
+    if (searchKeys.length > 0) {
+      result = result.filter(
+        (row) => searchKeys.some(
+          (k) => String(row[k] ?? "").toLowerCase().includes(needle)
+        )
+      );
+    }
+  }
+  return result;
+}
+function isSearchable(c) {
+  if (c.searchable !== void 0) return c.searchable;
+  switch (c.formatter) {
+    case "number":
+    case "currency":
+    case "percent":
+    case "date":
+      return false;
+    default:
+      return true;
+  }
+}
+function matchesFieldFilter(row, f, columns) {
+  const col = columns.find((c) => c.key === f.field);
+  if (!col || !col.filterType) return true;
+  const value = row[f.field];
+  const op = f.operator || "equals";
+  switch (col.filterType) {
+    case "text": {
+      if (f.value === void 0 || f.value === "") return true;
+      return String(value ?? "").toLowerCase().includes(String(f.value).toLowerCase());
+    }
+    case "number": {
+      const v = Number(value);
+      const fv = Number(f.value);
+      if (Number.isNaN(v) || Number.isNaN(fv)) return false;
+      return numberOp(v, fv, op);
+    }
+    case "date": {
+      const v = value instanceof Date ? value : new Date(value);
+      const fv = f.value instanceof Date ? f.value : new Date(f.value);
+      if (Number.isNaN(v.getTime()) || Number.isNaN(fv.getTime())) return false;
+      const ta = new Date(v).setHours(0, 0, 0, 0);
+      const tb = new Date(fv).setHours(0, 0, 0, 0);
+      return numberOp(ta, tb, op);
+    }
+    case "combobox":
+      return String(value) === String(f.value);
+    case "boolean":
+      return Boolean(value) === Boolean(f.value);
+    default:
+      return true;
+  }
+}
+function numberOp(a, b, op) {
+  switch (op) {
+    case "equals":
+      return a === b;
+    case "not_equals":
+      return a !== b;
+    case "greater_than":
+      return a > b;
+    case "less_than":
+      return a < b;
+    case "greater_equal":
+      return a >= b;
+    case "less_equal":
+      return a <= b;
+    default:
+      return true;
+  }
+}
+function applySort(rows, sort) {
+  if (sort.length === 0) return rows;
+  return [...rows].map((row, idx) => ({ row, idx })).sort((a, b) => {
+    for (const entry of sort) {
+      const va = a.row[entry.key];
+      const vb = b.row[entry.key];
+      const cmp = compareValues(va, vb);
+      if (cmp !== 0) return entry.dir === "asc" ? cmp : -cmp;
+    }
+    return a.idx - b.idx;
+  }).map((x) => x.row);
+}
+function compareValues(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (a instanceof Date && b instanceof Date)
+    return a.getTime() - b.getTime();
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b));
+}
+function serializeSort(sort) {
+  return sort.map((s) => `${s.key}:${s.dir}`).join(",");
+}
+function serializeFilter(filter) {
+  const fields = (filter.fields ?? []).map((f) => `${f.field}:${f.operator ?? ""}:${String(f.value)}`).join(",");
+  return `${filter.search ?? ""}|${fields}`;
+}
+function HazoUiTable(props) {
+  const state = useTableState(props);
+  const { columns, rows, getRowKey, className, caption } = props;
+  const mobileBreakpoint = props.mobileBreakpoint ?? 768;
+  const mobileEnabled = props.mobileCardFallback !== false;
+  const isNarrow = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);
+  const renderAsCards = mobileEnabled && isNarrow;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cls_hazo_ui_table_root space-y-3", className), children: [
+    (props.enableSearch || props.enableSortDialog || props.enableFilterDialog) && /* @__PURE__ */ jsxRuntime.jsx(
+      Toolbar2,
+      {
+        columns,
+        sort: state.sort,
+        onSortChange: state.setSort,
+        filter: state.filter,
+        onSearchChange: state.setSearch,
+        onFilterFieldsChange: (fields) => state.setFilter({ ...state.filter, fields }),
+        enableSearch: props.enableSearch,
+        enableSortDialog: props.enableSortDialog,
+        enableFilterDialog: props.enableFilterDialog,
+        searchPlaceholder: props.searchPlaceholder
+      }
+    ),
+    renderAsCards ? props.loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_ui_table_mobile_loading flex flex-col gap-3", children: Array.from({ length: Math.max(state.pageSize || 5, 3) }).map(
+      (_, i) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { className: "w-2/3" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "pt-0 space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { className: "w-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { className: "w-1/2" })
+        ] })
+      ] }, `mloader-${i}`)
+    ) }) : state.serverError != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_ui_table_mobile_error py-6", children: renderErrorState(props.error, state.serverError) }) : state.displayed.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_ui_table_mobile_empty py-6", children: noActiveFilters(state.filter) && rows.length === 0 ? typeof props.empty === "string" || props.empty === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        title: typeof props.empty === "string" && props.empty || "No items"
+      }
+    ) : props.empty : typeof props.noResults === "string" || props.noResults === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        title: typeof props.noResults === "string" && props.noResults || "No matches \u2014 adjust your filters"
+      }
+    ) : props.noResults }) : /* @__PURE__ */ jsxRuntime.jsx(
+      TableMobileCards,
+      {
+        columns,
+        rows: state.displayed,
+        getRowKey,
+        onRowClick: props.onRowClick,
+        renderCell
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(Table2, { children: [
+      caption && /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader2, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+        TableHead,
+        {
+          className: cn(headerAlignClass(c), c.headerClassName),
+          "aria-sort": ariaSortFor(state.sort, c.key),
+          children: c.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => state.cycleHeaderSort(c.key, e.shiftKey),
+              title: "Click to sort; shift-click to append a secondary sort",
+              className: "cls_hazo_ui_table_sort_btn inline-flex items-center gap-1 hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: c.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { sort: state.sort, columnKey: c.key })
+              ]
+            }
+          ) : c.label
+        },
+        c.key
+      )) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: props.loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        LoadingRows,
+        {
+          columns,
+          count: Math.max(state.pageSize || 5, 3)
+        }
+      ) : state.serverError != null ? /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell2,
+        {
+          colSpan: columns.length,
+          className: "cls_hazo_ui_table_error_cell p-0",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_ui_table_error_wrap py-6", children: renderErrorState(props.error, state.serverError) })
+        }
+      ) }) : state.displayed.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell2,
+        {
+          colSpan: columns.length,
+          className: "cls_hazo_ui_table_empty_cell p-0",
+          children: noActiveFilters(state.filter) && rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_ui_table_empty_wrap py-6", children: typeof props.empty === "string" || props.empty === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            EmptyState,
+            {
+              title: typeof props.empty === "string" && props.empty || "No items"
+            }
+          ) : props.empty }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_ui_table_no_results_wrap py-6", children: typeof props.noResults === "string" || props.noResults === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            EmptyState,
+            {
+              title: typeof props.noResults === "string" && props.noResults || "No matches \u2014 adjust your filters"
+            }
+          ) : props.noResults })
+        }
+      ) }) : state.displayed.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        TableRow2,
+        {
+          ...buildRowProps(row, i, props.onRowClick),
+          children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+            TableCell2,
+            {
+              className: cn(cellAlignClass(c), c.className),
+              children: renderCell(c, row, i)
+            },
+            c.key
+          ))
+        },
+        getRowKey ? getRowKey(row, i) : i
+      )) })
+    ] }),
+    state.pageSize > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      PaginationFooter,
+      {
+        page: state.page,
+        pageSize: state.pageSize,
+        total: state.totalAfterFilter,
+        onPageChange: state.setPage
+      }
+    )
+  ] });
+}
+function renderCell(c, row, i) {
+  if (c.cell) return c.cell(row, i);
+  const raw = row[c.key];
+  return formatValue(raw, c.formatter, c.currency, c.locale);
+}
+var DEFAULT_NUMBER_LOCALE = "en-US";
+function formatValue(value, formatter, currency, locale) {
+  if (value === null || value === void 0 || value === "") return "\u2014";
+  const lc = locale ?? DEFAULT_NUMBER_LOCALE;
+  switch (formatter) {
+    case "date": {
+      const d = value instanceof Date ? value : new Date(value);
+      if (Number.isNaN(d.getTime())) return String(value);
+      return dateFns.format(d, "MMM d, yyyy");
+    }
+    case "number":
+      return new Intl.NumberFormat(lc).format(Number(value));
+    case "currency":
+      return new Intl.NumberFormat(lc, {
+        style: "currency",
+        currency: currency ?? "USD"
+      }).format(Number(value));
+    case "percent":
+      return new Intl.NumberFormat(lc, {
+        style: "percent",
+        maximumFractionDigits: 2
+      }).format(Number(value));
+    default:
+      return String(value);
+  }
+}
+function headerAlignClass(c) {
+  switch (c.align) {
+    case "right":
+      return "text-right";
+    case "center":
+      return "text-center";
+    default:
+      return "text-left";
+  }
+}
+function cellAlignClass(c) {
+  switch (c.align) {
+    case "right":
+      return "text-right";
+    case "center":
+      return "text-center";
+    default:
+      return "";
+  }
+}
+function ariaSortFor(sort, key) {
+  const entry = sort.find((s) => s.key === key);
+  if (!entry) return "none";
+  return entry.dir === "asc" ? "ascending" : "descending";
+}
+function deriveSortFields(columns) {
+  return columns.filter((c) => c.sortable).map((c) => ({ value: c.key, label: c.label }));
+}
+function deriveFilterFields(columns) {
+  return columns.filter((c) => c.filterType).map((c) => ({
+    value: c.key,
+    label: c.label,
+    type: c.filterType,
+    ...c.filterConfig ?? {}
+  }));
+}
+function sortToDialogConfig(sort) {
+  return sort.map((s) => ({ field: s.key, direction: s.dir }));
+}
+function dialogConfigToSort(configs) {
+  return configs.map((c) => ({ key: c.field, dir: c.direction }));
+}
+function PaginationFooter({
+  page,
+  pageSize,
+  total,
+  onPageChange
+}) {
+  const start = total === 0 ? 0 : page * pageSize + 1;
+  const end = Math.min((page + 1) * pageSize, total);
+  const lastPage = Math.max(0, Math.ceil(total / pageSize) - 1);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_ui_table_pagination flex items-center justify-between gap-3 pt-2 text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cls_hazo_ui_table_page_counter text-muted-foreground", children: [
+      "Showing ",
+      start,
+      "\u2013",
+      end,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_ui_table_page_buttons flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(Math.max(0, page - 1)),
+          disabled: page === 0,
+          "aria-label": "Previous page",
+          children: "\u2039 Prev"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(Math.min(lastPage, page + 1)),
+          disabled: page >= lastPage,
+          "aria-label": "Next page",
+          children: "Next \u203A"
+        }
+      )
+    ] })
+  ] });
+}
+function Toolbar2(props) {
+  const {
+    columns,
+    sort,
+    onSortChange,
+    filter,
+    onSearchChange,
+    onFilterFieldsChange,
+    enableSearch,
+    enableSortDialog,
+    enableFilterDialog,
+    searchPlaceholder
+  } = props;
+  const sortFields = React25__namespace.useMemo(
+    () => deriveSortFields(columns),
+    [columns]
+  );
+  const filterFields = React25__namespace.useMemo(
+    () => deriveFilterFields(columns),
+    [columns]
+  );
+  const [searchValue, setSearchValue] = React25__namespace.useState(
+    filter.search ?? ""
+  );
+  React25__namespace.useEffect(() => {
+    setSearchValue(filter.search ?? "");
+  }, [filter.search]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_ui_table_toolbar flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
+    enableSearch ? /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        type: "text",
+        value: searchValue,
+        onChange: (e) => {
+          const v = e.target.value;
+          setSearchValue(v);
+          onSearchChange(v);
+        },
+        placeholder: searchPlaceholder ?? "Search...",
+        className: "cls_hazo_ui_table_search w-full sm:max-w-xs"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_ui_table_toolbar_right flex items-center gap-2", children: [
+      enableFilterDialog && filterFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        HazoUiMultiFilterDialog,
+        {
+          availableFields: filterFields,
+          initialFilters: filter.fields ?? [],
+          onFilterChange: onFilterFieldsChange
+        }
+      ),
+      enableSortDialog && sortFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        HazoUiMultiSortDialog,
+        {
+          availableFields: sortFields,
+          initialSortFields: sortToDialogConfig(sort),
+          onSortChange: (configs) => onSortChange(dialogConfigToSort(configs))
+        }
+      )
+    ] })
+  ] });
+}
+function LoadingRows({
+  columns,
+  count
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: count }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: cellAlignClass(c), children: /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonBar,
+    {
+      className: cn(
+        "cls_hazo_ui_table_skeleton",
+        c.align === "right" ? "w-16 ml-auto" : "w-full"
+      )
+    }
+  ) }, c.key)) }, `skeleton-${rowIdx}`)) });
+}
+function noActiveFilters(filter) {
+  return !filter.search && (!filter.fields || filter.fields.length === 0);
+}
+function renderErrorState(error, serverError) {
+  if (typeof error === "function") return error(serverError);
+  if (error !== void 0 && error !== null) return error;
+  const msg = serverError instanceof Error ? serverError.message : String(serverError);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EmptyState,
+    {
+      title: "Couldn't load data",
+      description: msg || "The data source rejected the request."
+    }
+  );
+}
+function buildRowProps(row, index, onRowClick) {
+  if (!onRowClick) return {};
+  return {
+    role: "button",
+    tabIndex: 0,
+    className: "cls_hazo_ui_table_row_clickable cursor-pointer",
+    onClick: () => onRowClick(row, index),
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onRowClick(row, index);
+      }
+    }
+  };
+}
+function SortIndicator({
+  sort,
+  columnKey
+}) {
+  const idx = sort.findIndex((s) => s.key === columnKey);
+  if (idx === -1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "cls_hazo_ui_table_sort_idle h-3.5 w-3.5 opacity-30" });
+  }
+  const entry = sort[idx];
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cls_hazo_ui_table_sort_active inline-flex items-center gap-0.5", children: [
+    entry.dir === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5" }),
+    sort.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium", children: idx + 1 })
+  ] });
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -7739,10 +9382,13 @@ exports.HazoUiDialogTitle = DialogTitle;
 exports.HazoUiDialogTrigger = DialogTrigger;
 exports.HazoUiFlexInput = HazoUiFlexInput;
 exports.HazoUiFlexRadio = HazoUiFlexRadio;
+exports.HazoUiKanban = HazoUiKanban;
+exports.HazoUiKanbanFilter = HazoUiKanbanFilter;
 exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;
 exports.HazoUiMultiSortDialog = HazoUiMultiSortDialog;
 exports.HazoUiPillRadio = HazoUiPillRadio;
 exports.HazoUiRte = HazoUiRte;
+exports.HazoUiTable = HazoUiTable;
 exports.HazoUiTextarea = HazoUiTextarea;
 exports.HazoUiTextbox = HazoUiTextbox;
 exports.HazoUiToaster = HazoUiToaster;
@@ -7750,7 +9396,7 @@ exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.Input = Input;
-exports.Label = Label2;
+exports.Label = Label3;
 exports.LoadingTimeout = LoadingTimeout;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
@@ -7784,6 +9430,14 @@ exports.SkeletonGroup = SkeletonGroup;
 exports.SkeletonRect = SkeletonRect;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
+exports.Table = Table2;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell2;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader2;
+exports.TableRow = TableRow2;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
@@ -7796,6 +9450,7 @@ exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.applyKanbanFilter = applyKanbanFilter;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.create_command_suggestion_extension = create_command_suggestion_extension;
 exports.errorToast = errorToast;