hazo_ui 2.9.0 → 2.16.0

package/dist/index.js

@@ -1,20 +1,19 @@
 "use client";
-import * as React27 from 'react';
-import React27__default, { useRef, useState, useCallback, useEffect, useMemo, Fragment } from 'react';
+import * as React25 from 'react';
+import React25__default, { useRef, useState, useCallback, useEffect, useMemo, Fragment } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ChevronsUpDown, ArrowUpDown, Trash2, Loader2, GripVertical, Calendar as Calendar$1 } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ArrowUpDown, Loader2, AlertTriangle, OctagonAlert, CheckCircle2, ChevronsUpDown, GripVertical, ArrowUp, ArrowDown, Pencil, Calendar as Calendar$1 } from 'lucide-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { DayPicker } from 'react-day-picker';
 import { format } from 'date-fns';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, closestCorners, DragOverlay, useDroppable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -61,12 +60,15 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { Toaster, toast } from 'sonner';
+export { toast as rawToast } from 'sonner';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -186,26 +188,26 @@ var buttonVariants = cva(
 );
 var variant_styles = {
   default: {
-    backgroundColor: "var(--primary)",
-    color: "var(--primary-foreground)",
-    border: "1px solid var(--primary)"
+    backgroundColor: "hsl(var(--primary))",
+    color: "hsl(var(--primary-foreground))",
+    border: "1px solid hsl(var(--primary))"
   },
   destructive: {
-    backgroundColor: "var(--destructive)",
-    color: "white",
-    border: "1px solid var(--destructive)"
+    backgroundColor: "hsl(var(--destructive))",
+    color: "hsl(var(--destructive-foreground))",
+    border: "1px solid hsl(var(--destructive))"
   },
   outline: {
-    backgroundColor: "var(--background)",
-    color: "var(--foreground)",
-    border: "1px solid var(--border)"
+    backgroundColor: "hsl(var(--background))",
+    color: "hsl(var(--foreground))",
+    border: "1px solid hsl(var(--border))"
   },
   secondary: {
-    backgroundColor: "var(--secondary)",
-    color: "var(--secondary-foreground)"
+    backgroundColor: "hsl(var(--secondary))",
+    color: "hsl(var(--secondary-foreground))"
   }
 };
-var Button = React27.forwardRef(
+var Button = React25.forwardRef(
   ({ className, variant, size, asChild = false, style, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const fallback_styles = variant_styles[variant ?? "default"] ?? {};
@@ -225,7 +227,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -237,14 +239,14 @@ var DialogOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.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,
@@ -287,7 +289,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -300,7 +302,7 @@ var DialogTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -309,7 +311,7 @@ var DialogDescription = React27.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var Command = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Command = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -321,7 +323,7 @@ var Command = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Command.displayName = "Command";
-var CommandInput = React27.forwardRef(({ className, onValueChange, onChange, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandInput = React25.forwardRef(({ className, onValueChange, onChange, ...props }, ref) => /* @__PURE__ */ jsx(
   "input",
   {
     ref,
@@ -337,7 +339,7 @@ var CommandInput = React27.forwardRef(({ className, onValueChange, onChange, ...
   }
 ));
 CommandInput.displayName = "CommandInput";
-var CommandList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandList = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -346,7 +348,7 @@ var CommandList = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = "CommandList";
-var CommandEmpty = React27.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React25.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -355,7 +357,7 @@ var CommandEmpty = React27.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 CommandEmpty.displayName = "CommandEmpty";
-var CommandGroup = React27.forwardRef(({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var CommandGroup = React25.forwardRef(({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   "div",
   {
     ref,
@@ -371,7 +373,7 @@ var CommandGroup = React27.forwardRef(({ className, heading, children, ...props
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React27.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
+var CommandItem = React25.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -402,7 +404,7 @@ var CommandItem = React27.forwardRef(({ className, onSelect, value, selected, st
 CommandItem.displayName = "CommandItem";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React27.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React25.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -416,7 +418,7 @@ var PopoverContent = React27.forwardRef(({ className, align = "center", sideOffs
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Input = React27.forwardRef(
+var Input = React25.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -436,7 +438,7 @@ Input.displayName = "Input";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -452,7 +454,7 @@ var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -465,7 +467,7 @@ var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -478,7 +480,7 @@ var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React27.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React25.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -506,7 +508,7 @@ var SelectContent = React27.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -515,7 +517,7 @@ var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -531,7 +533,7 @@ var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -543,7 +545,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React27.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React25.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -630,27 +632,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__ */ 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__ */ jsxs("div", { className: "cls_number_filter_container flex w-full items-center gap-1.5", children: [
           /* @__PURE__ */ jsxs(
             Select,
             {
               value: filterConfig.operator || "equals",
               onValueChange: (value) => onOperatorChange?.(value),
               children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { className: "cls_operator_select w-full sm:w-[140px] shrink-0", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: numberOperators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: op.label }, op.value)) })
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "cls_operator_select h-8 w-[60px] shrink-0 text-sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: numberOperators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: op.label }) }, op.value)) })
               ]
             }
           ),
@@ -666,14 +668,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;
@@ -683,14 +681,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__ */ jsxs(
           Select,
@@ -698,12 +697,12 @@ function FilterFieldItem({
             value: filterConfig.value || "",
             onValueChange: (value) => onValueChange(value),
             children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { className: "cls_filter_combobox_select w-full min-w-0", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select option..." }) }),
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "cls_filter_combobox_select h-8 w-full min-w-0 text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select option..." }) }),
               /* @__PURE__ */ jsx(SelectContent, { children: fieldConfig.comboboxOptions?.map((option) => /* @__PURE__ */ 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__ */ jsxs(
@@ -712,7 +711,7 @@ function FilterFieldItem({
             value: filterConfig.value !== void 0 && filterConfig.value !== null ? String(filterConfig.value) : "",
             onValueChange: (value) => onValueChange(value === "true"),
             children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { className: "cls_filter_boolean_select w-full min-w-0", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select..." }) }),
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "cls_filter_boolean_select h-8 w-full min-w-0 text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select..." }) }),
               /* @__PURE__ */ jsxs(SelectContent, { children: [
                 /* @__PURE__ */ jsx(SelectItem, { value: "true", children: trueLabel }),
                 /* @__PURE__ */ jsx(SelectItem, { value: "false", children: falseLabel })
@@ -720,25 +719,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__ */ 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__ */ jsxs("div", { className: "cls_date_filter_container flex w-full items-center gap-1.5", children: [
           /* @__PURE__ */ jsxs(
             Select,
             {
               value: filterConfig.operator || "equals",
               onValueChange: (value) => onOperatorChange?.(value),
               children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { className: "cls_operator_select w-full sm:w-[140px] shrink-0", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: dateOperators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: op.label }, op.value)) })
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "cls_operator_select h-8 w-[60px] shrink-0 text-sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: dateOperators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: op.label }) }, op.value)) })
               ]
             }
           ),
@@ -748,11 +748,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__ */ jsx(Calendar$1, { className: "cls_calendar_icon mr-2 h-4 w-4 shrink-0" }),
+                  /* @__PURE__ */ jsx(Calendar$1, { className: "cls_calendar_icon h-3.5 w-3.5 shrink-0" }),
                   /* @__PURE__ */ jsx("span", { className: "cls_date_text truncate", children: selectedDate ? format(selectedDate, "MMM d, yyyy") : "Pick a date" })
                 ]
               }
@@ -771,24 +771,27 @@ function FilterFieldItem({
             ) })
           ] })
         ] });
+      }
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ 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__ */ jsx("span", { className: "cls_field_label text-sm font-medium min-w-[120px] sm:min-w-[100px] truncate", children: fieldConfig.label }),
-    /* @__PURE__ */ jsx("div", { className: "cls_field_input_container flex-1 min-w-0 w-full sm:w-auto", children: renderInput() }),
-    /* @__PURE__ */ 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__ */ jsx(Trash2, { className: "cls_delete_icon h-4 w-4" })
-      }
-    )
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "cls_field_input_container flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: renderInput() }),
+      /* @__PURE__ */ 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__ */ jsx(X, { className: "cls_delete_icon h-3.5 w-3.5" })
+        }
+      )
+    ] })
   ] });
 }
 function HazoUiMultiFilterDialog({
@@ -796,7 +799,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,
@@ -846,13 +849,9 @@ function HazoUiMultiFilterDialog({
     }
   }, [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;
@@ -905,7 +904,7 @@ function HazoUiMultiFilterDialog({
   };
   const hasActiveFilters = initialFilters.length > 0;
   const tooltipContent = hasActiveFilters ? /* @__PURE__ */ jsxs("div", { className: "cls_filter_tooltip_content space-y-1", children: [
-    /* @__PURE__ */ jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active Filters:" }),
+    /* @__PURE__ */ 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;
@@ -949,152 +948,114 @@ function HazoUiMultiFilterDialog({
                 )
               }
             ),
-            "Filter"
+            "Filter",
+            hasActiveFilters && /* @__PURE__ */ 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__ */ jsx(TooltipContent, { children: tooltipContent })
     ] }) }),
-    /* @__PURE__ */ jsxs(DialogContent, { className: "cls_filter_dialog_content max-w-lg w-full max-h-[90vh] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { style: headerStyles, children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: description })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "cls_filter_dialog_body space-y-4 py-4", children: [
+    /* @__PURE__ */ jsxs(DialogContent, { className: "cls_filter_dialog_content max-w-lg gap-0 p-0 sm:rounded-xl max-h-[90vh]", children: [
+      /* @__PURE__ */ jsxs(
+        DialogHeader,
+        {
+          className: "cls_filter_dialog_header space-y-1 border-b px-5 py-4 text-left",
+          style: headerStyles,
+          children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ jsx(DialogDescription, { className: "text-xs leading-relaxed text-muted-foreground", children: description })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "cls_filter_dialog_body space-y-3 overflow-y-auto px-5 py-4", children: [
+        filterFields.length > 0 ? /* @__PURE__ */ 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__ */ jsx(
+            FilterFieldItem,
+            {
+              filterConfig,
+              fieldConfig,
+              onValueChange: (value) => handleValueChange(filterConfig.field, value),
+              onOperatorChange: (operator) => handleOperatorChange(filterConfig.field, operator),
+              onDelete: () => handleDeleteField(filterConfig.field)
+            },
+            filterConfig.field
+          );
+        }) }) : /* @__PURE__ */ 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__ */ jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "cls_combobox_content flex items-center", children: [
-                  /* @__PURE__ */ jsx(Plus, { className: "cls_plus_icon h-4 w-4 mr-2" }),
-                  /* @__PURE__ */ jsx("span", { children: "Add field" })
-                ] }),
-                /* @__PURE__ */ jsx(ChevronsUpDown, { className: "cls_chevron_icon ml-2 h-4 w-4 shrink-0 opacity-50" })
+                /* @__PURE__ */ jsx(Plus, { className: "cls_plus_icon h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { children: availableFieldsToAdd.length === 0 ? "All fields added" : "Add filter field" })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx(PopoverContent, { className: "cls_combobox_popover w-full p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+          /* @__PURE__ */ jsx(PopoverContent, { className: "cls_combobox_popover w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
             /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
-            /* @__PURE__ */ jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }) : /* @__PURE__ */ jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: "No fields available." }) : /* @__PURE__ */ jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsx(
               CommandItem,
               {
                 value: field.label,
                 onSelect: () => handleAddField(field.value),
                 className: "cls_command_item",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    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__ */ 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__ */ jsx(
-            FilterFieldItem,
-            {
-              filterConfig,
-              fieldConfig,
-              onValueChange: (value) => handleValueChange(filterConfig.field, value),
-              onOperatorChange: (operator) => handleOperatorChange(filterConfig.field, operator),
-              onDelete: () => handleDeleteField(filterConfig.field)
-            },
-            filterConfig.field
-          );
-        }) }) : /* @__PURE__ */ 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__ */ jsxs(DialogFooter, { children: [
-        filterFields.length > 0 && /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "cls_footer_left", children: filterFields.length > 0 && /* @__PURE__ */ 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__ */ jsx(X, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
-              "Clear All"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: handleApply,
-            className: "cls_apply_btn",
-            style: submitButtonStyles,
-            children: "Apply"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            onClick: handleCancel,
-            className: "cls_cancel_btn",
-            style: cancelButtonStyles,
-            children: "Cancel"
+            children: "Clear all"
           }
-        )
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "cls_footer_right flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleCancel,
+              className: "cls_cancel_btn",
+              style: cancelButtonStyles,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: handleApply,
+              className: "cls_apply_btn",
+              style: submitButtonStyles,
+              children: "Apply"
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
 }
-var Switch = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SwitchPrimitives.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__ */ jsx(
-      SwitchPrimitives.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.Root.displayName;
-var Label2 = React27.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ 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
 }) {
@@ -1109,46 +1070,88 @@ function SortableSortFieldItem({
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
-    opacity: isDragging ? 0.5 : 1
+    opacity: isDragging ? 0.6 : 1,
+    zIndex: isDragging ? 10 : void 0
   };
   return /* @__PURE__ */ 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__ */ 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__ */ jsx(GripVertical, { className: "cls_drag_icon h-4 w-4" })
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "cls_field_label flex-1 text-sm font-medium", children: fieldLabel }),
-        /* @__PURE__ */ jsxs("div", { className: "cls_direction_control flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Label2, { htmlFor: `switch-${sortConfig.field}`, className: "cls_direction_label text-xs text-muted-foreground", children: sortConfig.direction === "asc" ? "Ascending" : "Descending" }),
-          /* @__PURE__ */ jsx(
-            Switch,
-            {
-              id: `switch-${sortConfig.field}`,
-              checked: sortConfig.direction === "desc",
-              onCheckedChange: (checked) => onDirectionChange(checked ? "desc" : "asc"),
-              "aria-label": `Toggle sort direction for ${fieldLabel}`
-            }
-          )
-        ] }),
+        /* @__PURE__ */ 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__ */ jsx("span", { className: "cls_field_label flex-1 truncate text-sm font-medium text-foreground", children: fieldLabel }),
+        /* @__PURE__ */ 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__ */ 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__ */ jsx(ArrowUp, { className: "h-3 w-3" }),
+                    "Asc"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ 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__ */ jsx(ArrowDown, { className: "h-3 w-3" }),
+                    "Desc"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ 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__ */ jsx(Trash2, { className: "cls_delete_icon h-4 w-4" })
+            children: /* @__PURE__ */ jsx(X, { className: "cls_delete_icon h-3.5 w-3.5" })
           }
         )
       ]
@@ -1160,7 +1163,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,
@@ -1205,7 +1208,7 @@ function HazoUiMultiSortDialog({
   const [sortFields, setSortFields] = useState(initialSortFields);
   const [isComboboxOpen, setIsComboboxOpen] = useState(false);
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates
     })
@@ -1219,11 +1222,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) => {
@@ -1238,9 +1237,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) {
@@ -1266,7 +1263,7 @@ function HazoUiMultiSortDialog({
   };
   const hasActiveSorts = initialSortFields.length > 0;
   const tooltipContent = hasActiveSorts ? /* @__PURE__ */ jsxs("div", { className: "cls_sort_tooltip_content space-y-1", children: [
-    /* @__PURE__ */ jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active Sorts:" }),
+    /* @__PURE__ */ jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active sorts" }),
     initialSortFields.map((sortConfig, index) => /* @__PURE__ */ jsxs("div", { className: "cls_tooltip_item text-xs", children: [
       index + 1,
       ". ",
@@ -1295,61 +1292,27 @@ function HazoUiMultiSortDialog({
                 )
               }
             ),
-            "Sort"
+            "Sort",
+            hasActiveSorts && /* @__PURE__ */ 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__ */ jsx(TooltipContent, { children: tooltipContent })
     ] }) }),
-    /* @__PURE__ */ jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { style: headerStyles, children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: description })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "cls_sort_dialog_body space-y-4 py-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              role: "combobox",
-              "aria-expanded": isComboboxOpen,
-              className: "cls_add_field_combobox w-full justify-between",
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "cls_combobox_content flex items-center", children: [
-                  /* @__PURE__ */ jsx(Plus, { className: "cls_plus_icon h-4 w-4 mr-2" }),
-                  /* @__PURE__ */ jsx("span", { children: "Add field" })
-                ] }),
-                /* @__PURE__ */ jsx(ChevronsUpDown, { className: "cls_chevron_icon ml-2 h-4 w-4 shrink-0 opacity-50" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(PopoverContent, { className: "cls_combobox_popover w-full p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
-            /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
-            /* @__PURE__ */ jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }) : /* @__PURE__ */ jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxs(
-              CommandItem,
-              {
-                value: field.label,
-                onSelect: () => handleAddField(field.value),
-                className: "cls_command_item",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Check,
-                    {
-                      className: cn(
-                        "cls_check_icon mr-2 h-4 w-4",
-                        "opacity-0"
-                      )
-                    }
-                  ),
-                  field.label
-                ]
-              },
-              field.value
-            )) }) })
-          ] }) })
-        ] }) }),
-        sortFields.length > 0 ? /* @__PURE__ */ jsx("div", { className: "cls_sort_fields_list space-y-2", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg gap-0 p-0 sm:rounded-xl", children: [
+      /* @__PURE__ */ jsxs(
+        DialogHeader,
+        {
+          className: "cls_sort_dialog_header space-y-1 border-b px-5 py-4 text-left",
+          style: headerStyles,
+          children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ jsx(DialogDescription, { className: "text-xs leading-relaxed text-muted-foreground", children: description })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "cls_sort_dialog_body space-y-3 px-5 py-4", children: [
+        sortFields.length > 0 ? /* @__PURE__ */ jsx("div", { className: "cls_sort_fields_list space-y-1.5", children: /* @__PURE__ */ jsx(
           DndContext,
           {
             sensors,
@@ -1360,11 +1323,12 @@ function HazoUiMultiSortDialog({
               {
                 items: sortFields.map((sf) => sf.field),
                 strategy: verticalListSortingStrategy,
-                children: sortFields.map((sortConfig) => /* @__PURE__ */ jsx(
+                children: sortFields.map((sortConfig, idx) => /* @__PURE__ */ jsx(
                   SortableSortFieldItem,
                   {
                     sortConfig,
                     fieldLabel: getFieldLabel(sortConfig.field),
+                    priority: idx + 1,
                     onDirectionChange: (direction) => handleDirectionChange(sortConfig.field, direction),
                     onDelete: () => handleDeleteField(sortConfig.field)
                   },
@@ -1373,46 +1337,77 @@ function HazoUiMultiSortDialog({
               }
             )
           }
-        ) }) : /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(Plus, { className: "cls_plus_icon h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { children: availableFieldsToAdd.length === 0 ? "All fields added" : "Add sort field" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "cls_combobox_popover w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
+            /* @__PURE__ */ jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: "No fields available." }) : /* @__PURE__ */ jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsx(
+              CommandItem,
+              {
+                value: field.label,
+                onSelect: () => handleAddField(field.value),
+                className: "cls_command_item",
+                children: field.label
+              },
+              field.value
+            )) }) })
+          ] }) })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        sortFields.length > 0 && /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "cls_footer_left", children: sortFields.length > 0 && /* @__PURE__ */ 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__ */ jsx(Trash2, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
-              "Clear All"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: handleApply,
-            className: "cls_apply_btn",
-            style: submitButtonStyles,
-            children: "Apply"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            onClick: handleCancel,
-            className: "cls_cancel_btn",
-            style: cancelButtonStyles,
-            children: "Cancel"
+            children: "Clear all"
           }
-        )
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "cls_footer_right flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleCancel,
+              className: "cls_cancel_btn",
+              style: cancelButtonStyles,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: handleApply,
+              className: "cls_apply_btn",
+              style: submitButtonStyles,
+              children: "Apply"
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
 }
-var RadioGroup = React27.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup = React25.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -1423,7 +1418,7 @@ var RadioGroup = React27.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React27.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React25.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -1880,7 +1875,7 @@ function filterInputValue(value, input_type, num_decimals) {
     }
   }
 }
-var HazoUiFlexInput = React27.forwardRef(
+var HazoUiFlexInput = React25.forwardRef(
   ({
     className,
     input_type = "mixed",
@@ -1897,13 +1892,13 @@ var HazoUiFlexInput = React27.forwardRef(
     onBlur,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React27.useState(
+    const [internalValue, setInternalValue] = React25.useState(
       typeof controlledValue === "string" ? controlledValue : typeof controlledValue === "number" ? String(controlledValue) : ""
     );
-    const [errorMessage, setErrorMessage] = React27.useState();
+    const [errorMessage, setErrorMessage] = React25.useState();
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? typeof controlledValue === "string" ? controlledValue : String(controlledValue || "") : internalValue;
-    React27.useEffect(() => {
+    React25.useEffect(() => {
       if (isControlled) {
         const newValue = typeof controlledValue === "string" ? controlledValue : String(controlledValue || "");
         if (newValue !== internalValue) {
@@ -1983,7 +1978,7 @@ var HazoUiFlexInput = React27.forwardRef(
   }
 );
 HazoUiFlexInput.displayName = "HazoUiFlexInput";
-var ToolbarButton = React27.forwardRef(
+var ToolbarButton = React25.forwardRef(
   ({ onClick, is_active = false, disabled = false, tooltip, className, children }, ref) => {
     const button = /* @__PURE__ */ jsx(
       "button",
@@ -2302,7 +2297,7 @@ var getRelativePosition = (node, event) => {
   };
 };
 var _excluded = ["prefixCls", "className", "onMove", "onDown"];
-var Interactive = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
+var Interactive = /* @__PURE__ */ React25__default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-interactive",
     className,
@@ -2401,7 +2396,7 @@ var Pointer = (_ref) => {
   }), [top, left, color2, className, prefixCls]);
 };
 var _excluded2 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
-var Saturation = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
+var Saturation = /* @__PURE__ */ React25__default.forwardRef((props, ref) => {
   var _hsva$h;
   var {
     prefixCls = "w-color-saturation",
@@ -2553,7 +2548,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__default.forwardRef((props, ref) => {
+var Alpha = /* @__PURE__ */ React25__default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-alpha",
     className,
@@ -2687,7 +2682,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__default.forwardRef((props, ref) => {
+var EditableInput = /* @__PURE__ */ React25__default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-editable-input",
     placement = "bottom",
@@ -2792,7 +2787,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__default.forwardRef((props, ref) => {
+var EditableInputRGBA = /* @__PURE__ */ React25__default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-editable-input-rgba",
     hsva,
@@ -2915,7 +2910,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__default.forwardRef((props, ref) => {
+var Hue = /* @__PURE__ */ React25__default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-hue",
     className,
@@ -2949,7 +2944,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__default.forwardRef((props, ref) => {
+var Swatch = /* @__PURE__ */ React25__default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-swatch",
     className,
@@ -2986,7 +2981,7 @@ var Swatch = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
       flexWrap: "wrap",
       position: "relative"
     }, style),
-    children: [addonBefore && /* @__PURE__ */ React27__default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
+    children: [addonBefore && /* @__PURE__ */ React25__default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
       var title = "";
       var background = "";
       if (typeof item === "string") {
@@ -3012,7 +3007,7 @@ var Swatch = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
           children: render
         }, idx);
       }
-      var child = rectProps.children && /* @__PURE__ */ React27__default.isValidElement(rectProps.children) ? /* @__PURE__ */ React27__default.cloneElement(rectProps.children, {
+      var child = rectProps.children && /* @__PURE__ */ React25__default.isValidElement(rectProps.children) ? /* @__PURE__ */ React25__default.cloneElement(rectProps.children, {
         color: background,
         checked
       }) : null;
@@ -3026,7 +3021,7 @@ var Swatch = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
           background
         })
       }), idx);
-    }), addonAfter && /* @__PURE__ */ React27__default.isValidElement(addonAfter) && addonAfter]
+    }), addonAfter && /* @__PURE__ */ React25__default.isValidElement(addonAfter) && addonAfter]
   }));
 });
 Swatch.displayName = "Swatch";
@@ -3045,7 +3040,7 @@ var Bar = (props) => /* @__PURE__ */ jsx("div", {
     backgroundColor: "#fff"
   }
 });
-var Sketch = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
+var Sketch = /* @__PURE__ */ React25__default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-sketch",
     className,
@@ -3296,19 +3291,19 @@ var Toolbar = ({
   on_attachments_change,
   disabled = false
 }) => {
-  const [link_url, set_link_url] = React27.useState("https://");
-  const [link_popover_open, set_link_popover_open] = React27.useState(false);
-  const [text_color_open, set_text_color_open] = React27.useState(false);
-  const [highlight_color_open, set_highlight_color_open] = React27.useState(false);
-  const [variables_menu_open, set_variables_menu_open] = React27.useState(false);
-  const [table_menu_open, set_table_menu_open] = React27.useState(false);
-  const [text_color, set_text_color] = React27.useState("#000000");
-  const [highlight_color, set_highlight_color] = React27.useState("#ffff00");
-  const [table_rows, set_table_rows] = React27.useState(3);
-  const [table_cols, set_table_cols] = React27.useState(3);
-  const [hovered_cell, set_hovered_cell] = React27.useState(null);
-  const file_input_ref = React27.useRef(null);
-  const image_input_ref = React27.useRef(null);
+  const [link_url, set_link_url] = React25.useState("https://");
+  const [link_popover_open, set_link_popover_open] = React25.useState(false);
+  const [text_color_open, set_text_color_open] = React25.useState(false);
+  const [highlight_color_open, set_highlight_color_open] = React25.useState(false);
+  const [variables_menu_open, set_variables_menu_open] = React25.useState(false);
+  const [table_menu_open, set_table_menu_open] = React25.useState(false);
+  const [text_color, set_text_color] = React25.useState("#000000");
+  const [highlight_color, set_highlight_color] = React25.useState("#ffff00");
+  const [table_rows, set_table_rows] = React25.useState(3);
+  const [table_cols, set_table_cols] = React25.useState(3);
+  const [hovered_cell, set_hovered_cell] = React25.useState(null);
+  const file_input_ref = React25.useRef(null);
+  const image_input_ref = React25.useRef(null);
   if (!editor) {
     return null;
   }
@@ -4241,7 +4236,7 @@ var VariableExtension = Node.create({
   }
 });
 var Tabs = TabsPrimitive.Root;
-var TabsList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -4253,7 +4248,7 @@ var TabsList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -4265,7 +4260,7 @@ var TabsTrigger = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -4300,14 +4295,14 @@ var HazoUiRte = ({
   className,
   show_output_viewer = false
 }) => {
-  const [attachments, set_attachments] = React27.useState(
+  const [attachments, set_attachments] = React25.useState(
     initial_attachments
   );
-  const [active_tab, set_active_tab] = React27.useState("html");
+  const [active_tab, set_active_tab] = React25.useState("html");
   const is_view_only = active_tab !== "html";
-  const attachments_ref = React27.useRef(attachments);
+  const attachments_ref = React25.useRef(attachments);
   attachments_ref.current = attachments;
-  const debounced_on_change = React27.useMemo(
+  const debounced_on_change = React25.useMemo(
     () => debounce_fn((output) => {
       if (on_change) {
         on_change(output);
@@ -4406,7 +4401,7 @@ var HazoUiRte = ({
       debounced_on_change(output);
     }
   });
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (editor && html !== void 0) {
       const current_html = editor.getHTML();
       if (html !== current_html && !editor.isFocused) {
@@ -4414,21 +4409,21 @@ var HazoUiRte = ({
       }
     }
   }, [html, editor]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const attachments_from_props_ref = React27.useRef(false);
-  const prev_initial_attachments_ref = React27.useRef(initial_attachments);
-  React27.useEffect(() => {
+  const attachments_from_props_ref = React25.useRef(false);
+  const prev_initial_attachments_ref = React25.useRef(initial_attachments);
+  React25.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.useEffect(() => {
+  React25.useEffect(() => {
     if (attachments_from_props_ref.current) {
       attachments_from_props_ref.current = false;
       return;
@@ -4930,12 +4925,12 @@ var CommandPopover = ({
   on_selection_change: _on_selection_change,
   prefix_color
 }) => {
-  const container_ref = React27.useRef(null);
-  const grouped_commands = React27.useMemo(
+  const container_ref = React25.useRef(null);
+  const grouped_commands = React25.useMemo(
     () => group_commands(commands),
     [commands]
   );
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     const handle_click_outside = (e) => {
       if (container_ref.current && !container_ref.current.contains(e.target)) {
         on_close();
@@ -4948,8 +4943,8 @@ var CommandPopover = ({
       };
     }
   }, [is_open, on_close]);
-  const [mounted, set_mounted] = React27.useState(false);
-  React27.useEffect(() => {
+  const [mounted, set_mounted] = React25.useState(false);
+  React25.useEffect(() => {
     set_mounted(true);
   }, []);
   if (!is_open || !mounted) return null;
@@ -5259,21 +5254,21 @@ var HazoUiTextbox = ({
   on_command_change,
   on_command_remove
 }) => {
-  const generated_instance_id = React27.useId();
+  const generated_instance_id = React25.useId();
   const instance_id = provided_instance_id || generated_instance_id;
-  const [suggestion_state, set_suggestion_state] = React27.useState(null);
-  const [selected_index, set_selected_index] = React27.useState(0);
-  const [popover_position, set_popover_position] = React27.useState({ top: 0, left: 0 });
-  const [edit_context, set_edit_context] = React27.useState(null);
-  const [edit_selected_index, set_edit_selected_index] = React27.useState(0);
+  const [suggestion_state, set_suggestion_state] = React25.useState(null);
+  const [selected_index, set_selected_index] = React25.useState(0);
+  const [popover_position, set_popover_position] = React25.useState({ top: 0, left: 0 });
+  const [edit_context, set_edit_context] = React25.useState(null);
+  const [edit_selected_index, set_edit_selected_index] = React25.useState(0);
   const is_controlled = value !== void 0;
-  const editor_container_ref = React27.useRef(null);
-  const edit_popover_ref = React27.useRef(null);
-  const [mounted, set_mounted] = React27.useState(false);
-  React27.useEffect(() => {
+  const editor_container_ref = React25.useRef(null);
+  const edit_popover_ref = React25.useRef(null);
+  const [mounted, set_mounted] = React25.useState(false);
+  React25.useEffect(() => {
     set_mounted(true);
   }, []);
-  const suggestion_extensions = React27.useMemo(() => {
+  const suggestion_extensions = React25.useMemo(() => {
     return create_command_suggestion_extension({
       prefixes,
       instance_id,
@@ -5324,7 +5319,7 @@ var HazoUiTextbox = ({
       }
     }
   });
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (suggestion_state?.is_active && editor) {
       requestAnimationFrame(() => {
         const { from } = suggestion_state.range;
@@ -5348,7 +5343,7 @@ var HazoUiTextbox = ({
       });
     }
   }, [suggestion_state, editor]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (is_controlled && editor && !editor.isFocused) {
       const current_text = editor.getText();
       if (value !== current_text) {
@@ -5357,12 +5352,12 @@ var HazoUiTextbox = ({
       }
     }
   }, [value, editor, is_controlled, prefixes, pill_variant]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const handle_command_select = React27.useCallback(
+  const handle_command_select = React25.useCallback(
     (command) => {
       if (!editor || !suggestion_state) return;
       const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
@@ -5382,15 +5377,15 @@ var HazoUiTextbox = ({
     },
     [editor, suggestion_state, pill_variant, on_command_insert, prefixes]
   );
-  const handle_popover_close = React27.useCallback(() => {
+  const handle_popover_close = React25.useCallback(() => {
     set_suggestion_state(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_edit_close = React27.useCallback(() => {
+  const handle_edit_close = React25.useCallback(() => {
     set_edit_context(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_command_update = React27.useCallback(
+  const handle_command_update = React25.useCallback(
     (new_command) => {
       if (!editor || !edit_context) return;
       const old_command = edit_context.command;
@@ -5406,7 +5401,7 @@ var HazoUiTextbox = ({
     },
     [editor, edit_context, on_command_change]
   );
-  const handle_command_remove = React27.useCallback(() => {
+  const handle_command_remove = React25.useCallback(() => {
     if (!editor || !edit_context) return;
     const command = edit_context.command;
     editor.state.doc.descendants((node, pos) => {
@@ -5420,7 +5415,7 @@ var HazoUiTextbox = ({
     }
     set_edit_context(null);
   }, [editor, edit_context, on_command_remove]);
-  const filtered_commands = React27.useMemo(() => {
+  const filtered_commands = React25.useMemo(() => {
     if (!suggestion_state) return [];
     const query = suggestion_state.query.toLowerCase();
     if (!query) return suggestion_state.commands;
@@ -5428,7 +5423,7 @@ var HazoUiTextbox = ({
       (cmd) => cmd.action_label.toLowerCase().includes(query) || cmd.action.toLowerCase().includes(query) || cmd.action_description?.toLowerCase().includes(query)
     );
   }, [suggestion_state]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (!suggestion_state?.is_active) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -5463,7 +5458,7 @@ var HazoUiTextbox = ({
     handle_command_select,
     handle_popover_close
   ]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (!edit_context) return;
     const handle_click_outside = (e) => {
       if (edit_popover_ref.current && !edit_popover_ref.current.contains(e.target)) {
@@ -5478,12 +5473,12 @@ var HazoUiTextbox = ({
       document.removeEventListener("mousedown", handle_click_outside);
     };
   }, [edit_context]);
-  const edit_commands = React27.useMemo(() => {
+  const edit_commands = React25.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.useEffect(() => {
+  React25.useEffect(() => {
     if (!edit_context) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -5521,7 +5516,7 @@ var HazoUiTextbox = ({
     handle_command_remove,
     handle_edit_close
   ]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     const handle_pill_click = (e) => {
       const detail = e.detail;
       const { id, prefix, action, action_label, node_pos } = detail;
@@ -5804,22 +5799,22 @@ var HazoUiTextarea = ({
   on_command_change,
   on_command_remove
 }) => {
-  const generated_instance_id = React27.useId();
+  const generated_instance_id = React25.useId();
   const instance_id = provided_instance_id || generated_instance_id;
-  const [suggestion_state, set_suggestion_state] = React27.useState(null);
-  const [selected_index, set_selected_index] = React27.useState(0);
-  const [popover_position, set_popover_position] = React27.useState({ top: 0, left: 0 });
-  const [edit_context, set_edit_context] = React27.useState(null);
-  const [edit_selected_index, set_edit_selected_index] = React27.useState(0);
+  const [suggestion_state, set_suggestion_state] = React25.useState(null);
+  const [selected_index, set_selected_index] = React25.useState(0);
+  const [popover_position, set_popover_position] = React25.useState({ top: 0, left: 0 });
+  const [edit_context, set_edit_context] = React25.useState(null);
+  const [edit_selected_index, set_edit_selected_index] = React25.useState(0);
   const is_controlled = value !== void 0;
-  const editor_container_ref = React27.useRef(null);
-  const edit_popover_ref = React27.useRef(null);
-  const [mounted, set_mounted] = React27.useState(false);
-  React27.useEffect(() => {
+  const editor_container_ref = React25.useRef(null);
+  const edit_popover_ref = React25.useRef(null);
+  const [mounted, set_mounted] = React25.useState(false);
+  React25.useEffect(() => {
     set_mounted(true);
   }, []);
   const calculated_min_height = rows ? `${rows * 1.5}em` : min_height;
-  const suggestion_extensions = React27.useMemo(() => {
+  const suggestion_extensions = React25.useMemo(() => {
     return create_command_suggestion_extension({
       prefixes,
       instance_id,
@@ -5868,7 +5863,7 @@ var HazoUiTextarea = ({
       }
     }
   });
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (suggestion_state?.is_active && editor) {
       requestAnimationFrame(() => {
         const { from } = suggestion_state.range;
@@ -5892,7 +5887,7 @@ var HazoUiTextarea = ({
       });
     }
   }, [suggestion_state, editor]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (is_controlled && editor && !editor.isFocused) {
       const current_text = editor.getText();
       if (value !== current_text) {
@@ -5905,12 +5900,12 @@ var HazoUiTextarea = ({
       }
     }
   }, [value, editor, is_controlled, prefixes, pill_variant]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const handle_command_select = React27.useCallback(
+  const handle_command_select = React25.useCallback(
     (command) => {
       if (!editor || !suggestion_state) return;
       const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
@@ -5930,15 +5925,15 @@ var HazoUiTextarea = ({
     },
     [editor, suggestion_state, pill_variant, on_command_insert, prefixes]
   );
-  const handle_popover_close = React27.useCallback(() => {
+  const handle_popover_close = React25.useCallback(() => {
     set_suggestion_state(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_edit_close = React27.useCallback(() => {
+  const handle_edit_close = React25.useCallback(() => {
     set_edit_context(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_command_update = React27.useCallback(
+  const handle_command_update = React25.useCallback(
     (new_command) => {
       if (!editor || !edit_context) return;
       const old_command = edit_context.command;
@@ -5954,7 +5949,7 @@ var HazoUiTextarea = ({
     },
     [editor, edit_context, on_command_change]
   );
-  const handle_command_remove = React27.useCallback(() => {
+  const handle_command_remove = React25.useCallback(() => {
     if (!editor || !edit_context) return;
     const command = edit_context.command;
     editor.state.doc.descendants((node, pos) => {
@@ -5968,7 +5963,7 @@ var HazoUiTextarea = ({
     }
     set_edit_context(null);
   }, [editor, edit_context, on_command_remove]);
-  const filtered_commands = React27.useMemo(() => {
+  const filtered_commands = React25.useMemo(() => {
     if (!suggestion_state) return [];
     const query = suggestion_state.query.toLowerCase();
     if (!query) return suggestion_state.commands;
@@ -5976,7 +5971,7 @@ var HazoUiTextarea = ({
       (cmd) => cmd.action_label.toLowerCase().includes(query) || cmd.action.toLowerCase().includes(query) || cmd.action_description?.toLowerCase().includes(query)
     );
   }, [suggestion_state]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (!suggestion_state?.is_active) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -6011,7 +6006,7 @@ var HazoUiTextarea = ({
     handle_command_select,
     handle_popover_close
   ]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     if (!edit_context) return;
     const handle_click_outside = (e) => {
       if (edit_popover_ref.current && !edit_popover_ref.current.contains(e.target)) {
@@ -6026,12 +6021,12 @@ var HazoUiTextarea = ({
       document.removeEventListener("mousedown", handle_click_outside);
     };
   }, [edit_context]);
-  const edit_commands = React27.useMemo(() => {
+  const edit_commands = React25.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.useEffect(() => {
+  React25.useEffect(() => {
     if (!edit_context) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -6069,7 +6064,7 @@ var HazoUiTextarea = ({
     handle_command_remove,
     handle_edit_close
   ]);
-  React27.useEffect(() => {
+  React25.useEffect(() => {
     const handle_pill_click = (e) => {
       const detail = e.detail;
       const { id, prefix, action, action_label, node_pos } = detail;
@@ -6616,7 +6611,7 @@ function HazoUiConfirmDialog({
   openAnimation = "zoom",
   closeAnimation = "zoom"
 }) {
-  const [internal_loading, set_internal_loading] = React27.useState(false);
+  const [internal_loading, set_internal_loading] = React25.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;
@@ -6653,7 +6648,7 @@ function HazoUiConfirmDialog({
     onCancel?.();
     onOpenChange(false);
   };
-  const cancel_ref = React27.useRef(null);
+  const cancel_ref = React25.useRef(null);
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(
       DialogOverlay,
@@ -6738,7 +6733,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = Drawer$1.Trigger;
 var DrawerPortal = Drawer$1.Portal;
 var DrawerClose = Drawer$1.Close;
-var DrawerOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Overlay,
   {
     ref,
@@ -6750,7 +6745,7 @@ var DrawerOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+var DrawerContent = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
   /* @__PURE__ */ jsx(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs(
     Drawer$1.Content,
@@ -6791,7 +6786,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Title,
   {
     ref,
@@ -6803,7 +6798,7 @@ var DrawerTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Description,
   {
     ref,
@@ -6813,14 +6808,14 @@ var DrawerDescription = React27.forwardRef(({ className, ...props }, ref) => /*
 ));
 DrawerDescription.displayName = "DrawerDescription";
 function useMediaQuery(query) {
-  const get_match = React27.useCallback(() => {
+  const get_match = React25.useCallback(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return false;
     }
     return window.matchMedia(query).matches;
   }, [query]);
-  const [matches, set_matches] = React27.useState(false);
-  React27.useEffect(() => {
+  const [matches, set_matches] = React25.useState(false);
+  React25.useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
     }
@@ -6837,7 +6832,7 @@ function useMediaQuery(query) {
   return matches;
 }
 var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionItem = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     ref,
@@ -6846,7 +6841,7 @@ var AccordionItem = React27.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -6862,7 +6857,7 @@ var AccordionTrigger = React27.forwardRef(({ className, children, ...props }, re
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
     ref,
@@ -6872,7 +6867,7 @@ var AccordionContent = React27.forwardRef(({ className, children, ...props }, re
   }
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-var Checkbox = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -6897,7 +6892,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React27.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React25.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -6914,7 +6909,7 @@ var DropdownMenuSubTrigger = React27.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSubContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -6926,7 +6921,7 @@ var DropdownMenuSubContent = React27.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React27.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React25.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -6939,7 +6934,7 @@ var DropdownMenuContent = React27.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React27.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React25.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -6952,7 +6947,7 @@ var DropdownMenuItem = React27.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React27.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React25.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -6969,7 +6964,7 @@ var DropdownMenuCheckboxItem = React27.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -6985,7 +6980,7 @@ var DropdownMenuRadioItem = React27.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React27.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React25.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -6998,7 +6993,7 @@ var DropdownMenuLabel = React27.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -7022,7 +7017,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React27.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var HoverCardContent = React25.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -7036,34 +7031,70 @@ var HoverCardContent = React27.forwardRef(({ className, align = "center", sideOf
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-var Textarea = React27.forwardRef(
+var Label3 = React25.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ 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.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
-  SeparatorPrimitive.Root,
+Label3.displayName = "Label";
+var Switch = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
   {
-    ref,
-    decorative,
-    orientation,
     className: cn(
-      "shrink-0 bg-border",
+      "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__ */ jsx(
+      SwitchPrimitives.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.Root.displayName;
+var Textarea = React25.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ 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.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-border",
       orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className
     ),
@@ -7074,7 +7105,7 @@ Separator3.displayName = SeparatorPrimitive.Root.displayName;
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
-var ScrollArea = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -7088,7 +7119,7 @@ var ScrollArea = React27.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React27.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React25.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -7104,27 +7135,27 @@ var ScrollBar = React27.forwardRef(({ className, orientation = "vertical", ...pr
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-var Card = React27.forwardRef(
+var Card = React25.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })
 );
 Card.displayName = "Card";
-var CardHeader = React27.forwardRef(
+var CardHeader = React25.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React27.forwardRef(
+var CardTitle = React25.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React27.forwardRef(
+var CardDescription = React25.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React27.forwardRef(
+var CardContent = React25.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React27.forwardRef(
+var CardFooter = React25.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -7157,16 +7188,16 @@ var toggleVariants = cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Toggle = React27.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(TogglePrimitive.Root, { ref, className: cn(toggleVariants({ variant, size, className })), ...props }));
+var Toggle = React25.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(TogglePrimitive.Root, { ref, className: cn(toggleVariants({ variant, size, className })), ...props }));
 Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React27.createContext({
+var ToggleGroupContext = React25.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React27.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, { ref, className: cn("flex items-center justify-center gap-1", className), ...props, children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children }) }));
+var ToggleGroup = React25.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, { ref, className: cn("flex items-center justify-center gap-1", className), ...props, children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children }) }));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React27.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React27.useContext(ToggleGroupContext);
+var ToggleGroupItem = React25.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React25.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -7181,7 +7212,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     ref,
@@ -7190,7 +7221,7 @@ var AlertDialogOverlay = React27.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -7206,13 +7237,13 @@ var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div",
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ 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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+var AlertDialogTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var AlertDialogDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+var AlertDialogAction = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props }));
+var AlertDialogCancel = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props }));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 var buttonGroupVariants = cva(
   "flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
@@ -7240,7 +7271,1969 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
   return /* @__PURE__ */ jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
 }
+var SkeletonBase = React25.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-hazo-skeleton": "",
+      "aria-hidden": "true",
+      className: cn("hazo-shimmer rounded-md", className),
+      ...rest
+    }
+  )
+);
+SkeletonBase.displayName = "Skeleton";
+var Skeleton = SkeletonBase;
+function SkeletonCircle({ size = 40, className }) {
+  return /* @__PURE__ */ jsx(
+    SkeletonBase,
+    {
+      className: cn("rounded-full", className),
+      style: { width: size, height: size }
+    }
+  );
+}
+function SkeletonBar({ width = "100%", height = 12, className }) {
+  return /* @__PURE__ */ jsx(
+    SkeletonBase,
+    {
+      className,
+      style: { width, height }
+    }
+  );
+}
+function SkeletonRect({ width = "100%", height = 96, radius = 6, className }) {
+  return /* @__PURE__ */ jsx(
+    SkeletonBase,
+    {
+      className,
+      style: { width, height, borderRadius: radius }
+    }
+  );
+}
+function SkeletonGroup({ label = "Loading content", children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label,
+      className: cn("space-y-2", className),
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  size = "md",
+  className
+}) {
+  const sizing = {
+    sm: { wrap: "py-6 gap-2", icon: "w-8 h-8 mb-1", title: "text-sm font-medium", desc: "text-xs" },
+    md: { wrap: "py-10 gap-3", icon: "w-12 h-12 mb-2", title: "text-base font-semibold", desc: "text-sm" },
+    lg: { wrap: "py-16 gap-4", icon: "w-16 h-16 mb-3", title: "text-lg font-semibold", desc: "text-base" }
+  }[size];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center text-center text-muted-foreground",
+        sizing.wrap,
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground/60", sizing.icon), children: icon }) : null,
+        /* @__PURE__ */ jsx("div", { className: cn("text-foreground", sizing.title), children: title }),
+        description ? /* @__PURE__ */ jsx("div", { className: cn("max-w-md text-muted-foreground", sizing.desc), children: description }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
+      ]
+    }
+  );
+}
+function ErrorBanner({
+  severity = "error",
+  title,
+  message,
+  icon,
+  action,
+  onDismiss,
+  className
+}) {
+  const palette = severity === "warning" ? "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-100" : "border-destructive/40 bg-destructive/10 text-destructive-foreground";
+  const iconColor = severity === "warning" ? "text-amber-600" : "text-destructive";
+  const resolvedIcon = icon ?? (severity === "warning" ? /* @__PURE__ */ jsx(AlertTriangle, { className: cn("h-5 w-5", iconColor), "aria-hidden": "true" }) : /* @__PURE__ */ jsx(OctagonAlert, { className: cn("h-5 w-5", iconColor), "aria-hidden": "true" }));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": severity === "error" ? "assertive" : "polite",
+      className: cn(
+        "flex items-start gap-3 rounded-md border px-4 py-3 text-sm",
+        palette,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: resolvedIcon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          title ? /* @__PURE__ */ jsx("div", { className: "font-semibold leading-tight", children: title }) : null,
+          /* @__PURE__ */ jsx("div", { className: cn("leading-snug", title ? "mt-1" : ""), children: message }),
+          action ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: action }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Dismiss",
+            className: "flex-shrink-0 rounded p-1 hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:hover:bg-white/5",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ErrorPage({
+  title = "Something went wrong",
+  description,
+  errorCode,
+  correlationId,
+  actions,
+  illustration,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      className: cn(
+        "mx-auto flex max-w-md flex-col items-center justify-center gap-4 px-6 py-16 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-destructive", children: illustration ?? /* @__PURE__ */ jsx(OctagonAlert, { className: "h-16 w-16", "aria-hidden": "true" }) }),
+        errorCode ? /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted px-3 py-1 text-xs font-mono uppercase tracking-wider text-muted-foreground", children: errorCode }) : null,
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description }) : null,
+        correlationId ? /* @__PURE__ */ jsxs("div", { className: "w-full rounded-md border bg-muted/40 px-3 py-2 text-left", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Correlation ID" }),
+          /* @__PURE__ */ jsx("code", { className: "break-all text-xs", children: correlationId })
+        ] }) : null,
+        actions ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+function LoadingTimeout({
+  active,
+  children,
+  skeleton,
+  onRetry,
+  thresholds,
+  label = "content",
+  className
+}) {
+  const t = {
+    gentle: thresholds?.gentle ?? 5e3,
+    firm: thresholds?.firm ?? 15e3,
+    expired: thresholds?.expired ?? 3e4
+  };
+  const [phase, setPhase] = React25.useState(active ? "silent" : "idle");
+  React25.useEffect(() => {
+    if (!active) {
+      setPhase("idle");
+      return;
+    }
+    setPhase("silent");
+    const gentleTimer = window.setTimeout(() => setPhase("gentle"), t.gentle);
+    const firmTimer = window.setTimeout(() => setPhase("firm"), t.firm);
+    const expiredTimer = window.setTimeout(() => setPhase("expired"), t.expired);
+    return () => {
+      window.clearTimeout(gentleTimer);
+      window.clearTimeout(firmTimer);
+      window.clearTimeout(expiredTimer);
+    };
+  }, [active, t.gentle, t.firm, t.expired]);
+  if (!active) {
+    return /* @__PURE__ */ jsx(Fragment$1, { children });
+  }
+  if (phase === "expired") {
+    return /* @__PURE__ */ jsx("div", { className, role: "alert", "aria-busy": "false", children: /* @__PURE__ */ jsx(
+      ErrorBanner,
+      {
+        severity: "error",
+        title: "This is taking longer than expected",
+        message: `We're still trying to load the ${label}. The connection may be slow.`,
+        action: onRetry ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            className: "rounded bg-foreground/10 px-3 py-1.5 text-sm font-medium hover:bg-foreground/15",
+            children: "Try again"
+          }
+        ) : null
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, role: "status", "aria-busy": "true", "aria-live": "polite", children: [
+    skeleton,
+    phase === "gentle" ? /* @__PURE__ */ jsxs("div", { className: "mt-3 text-center text-sm text-muted-foreground", children: [
+      "Loading ",
+      label,
+      "\u2026"
+    ] }) : null,
+    phase === "firm" ? /* @__PURE__ */ jsx("div", { className: "mt-3 text-center text-sm text-muted-foreground", children: "Still working on it \u2014 almost there." }) : null
+  ] });
+}
+function ProgressiveImage({
+  src,
+  alt,
+  lqip,
+  width,
+  height,
+  loading = "lazy",
+  fit = "cover",
+  className,
+  onLoad,
+  onError
+}) {
+  const [loaded, setLoaded] = React25.useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative overflow-hidden bg-muted", className),
+      style: { width, height },
+      children: [
+        lqip ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: lqip,
+            alt: "",
+            "aria-hidden": "true",
+            className: cn(
+              "absolute inset-0 h-full w-full object-cover blur-md scale-110 transition-opacity duration-300",
+              loaded ? "opacity-0" : "opacity-100"
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            loading,
+            onLoad: () => {
+              setLoaded(true);
+              onLoad?.();
+            },
+            onError,
+            className: cn(
+              "absolute inset-0 h-full w-full transition-opacity duration-300",
+              `object-${fit}`,
+              loaded ? "opacity-100" : "opacity-0"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function HazoUiToaster({
+  position = "bottom-right",
+  closeButton = true,
+  visibleToasts = 5
+} = {}) {
+  return /* @__PURE__ */ jsx(
+    Toaster,
+    {
+      position,
+      closeButton,
+      visibleToasts,
+      theme: "system",
+      richColors: true,
+      toastOptions: {
+        classNames: {
+          toast: "group rounded-md border bg-background text-foreground shadow-lg",
+          title: "font-medium",
+          description: "text-muted-foreground text-sm"
+        }
+      }
+    }
+  );
+}
+function successToast({ title, description, duration = 3e3, action }) {
+  return toast.success(title, {
+    description,
+    duration,
+    icon: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }),
+    action: action ? { label: action.label, onClick: action.onClick } : void 0
+  });
+}
+function errorToast({ title, description, duration = 5e3, action }) {
+  return toast.error(title, {
+    description,
+    duration,
+    icon: /* @__PURE__ */ jsx(OctagonAlert, { className: "h-4 w-4 text-destructive" }),
+    action: action ? { label: action.label, onClick: action.onClick } : void 0
+  });
+}
+function useLoadingState(initial = false) {
+  const [isLoading, setLoading] = useState(initial);
+  const withLoading = useCallback(async (fn) => {
+    setLoading(true);
+    try {
+      return await fn();
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { isLoading, setLoading, withLoading };
+}
+function useErrorDisplay() {
+  const [error, setRaw] = useState(null);
+  const setError = useCallback((value) => {
+    if (value == null) {
+      setRaw(null);
+      return;
+    }
+    if (typeof value === "string") {
+      setRaw(value);
+      return;
+    }
+    if (value instanceof Error) {
+      setRaw(value.message);
+      return;
+    }
+    setRaw(String(value));
+  }, []);
+  const clearError = useCallback(() => setRaw(null), []);
+  return { error, setError, clearError };
+}
+function KanbanCard({
+  item,
+  renderCard,
+  dragging = false,
+  cardClassName,
+  showEdit = false,
+  onEditRequest
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: item.id, data: { columnKey: item.columnKey } });
+  const priority_var = item.priority ? `--hazo-kanban-priority-${String(item.priority).toLowerCase()}` : null;
+  const style = {
+    transform: 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__ */ 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__ */ 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__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        renderCard(item)
+      ]
+    }
+  );
+}
+function KanbanColumn({
+  column,
+  items,
+  renderCard,
+  emptyColumn,
+  cardClassName,
+  showEdit,
+  onEditRequest
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: `column:${column.key}`,
+    data: { columnKey: column.key, isColumn: true }
+  });
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "cls_hazo_kanban_column_title", children: column.title }),
+          /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_column_count rounded-full bg-muted px-2 py-0.5 text-foreground", children: items.length })
+        ] }),
+        /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: items.map((i) => i.id),
+            strategy: verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]", children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : items.map((item) => /* @__PURE__ */ 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.useState(item);
+  const [saving, set_saving] = React25.useState(false);
+  const [error, set_error] = React25.useState(null);
+  const item_id = item?.id ?? null;
+  React25.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.useMemo(() => {
+    if (fields) return fields;
+    if (!item) return [];
+    return auto_detect_fields(item, resolved_columns);
+  }, [fields, item, resolved_columns]);
+  const required_keys = React25.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.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.useMemo(() => {
+    if (!draft || !item) return false;
+    try {
+      return JSON.stringify(draft) !== JSON.stringify(item);
+    } catch {
+      return draft !== item;
+    }
+  }, [draft, item]);
+  const handle_save = React25.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__ */ 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__ */ jsx(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__ */ jsx("span", {}),
+      children: /* @__PURE__ */ 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__ */ jsx(
+          KanbanEditorFieldRow,
+          {
+            field,
+            draft,
+            setDraft: (updater) => set_draft(
+              (prev) => prev ? updater(prev) : prev
+            ),
+            priorities: resolved_priorities,
+            columns: resolved_columns
+          },
+          field.key
+        )) : null,
+        error && /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("cls_hazo_kanban_editor_field flex flex-col gap-1.5"), children: [
+    /* @__PURE__ */ jsxs(Label3, { htmlFor: id, className: "text-xs font-medium text-muted-foreground", children: [
+      label,
+      required_marker_shown && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+    ] }),
+    field.type === "text" && /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        value: typeof value === "string" ? value : "",
+        placeholder: field.placeholder,
+        onChange: (e) => set_value(e.target.value)
+      }
+    ),
+    field.type === "textarea" && /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        id,
+        value: typeof value === "string" ? value : "",
+        placeholder: field.placeholder,
+        rows: 3,
+        onChange: (e) => set_value(e.target.value)
+      }
+    ),
+    field.type === "number" && /* @__PURE__ */ 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__ */ jsx(
+      Checkbox,
+      {
+        id,
+        checked: !!value,
+        onCheckedChange: (checked) => set_value(checked === true)
+      }
+    ),
+    field.type === "select" && /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: typeof value === "string" ? value : "",
+        onValueChange: set_value,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { id, children: /* @__PURE__ */ jsx(
+            SelectValue,
+            {
+              placeholder: field.placeholder ?? `Select ${label}\u2026`
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
+        ]
+      }
+    ),
+    field.type === "priority" && /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: typeof value === "string" ? value : "",
+        onValueChange: set_value,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { id, children: /* @__PURE__ */ jsx(
+            SelectValue,
+            {
+              placeholder: field.placeholder ?? "Select priority\u2026"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: priorities.map((p) => /* @__PURE__ */ jsx(SelectItem, { value: p, children: p }, p)) })
+        ]
+      }
+    ),
+    field.type === "status" && /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: typeof value === "string" ? value : "",
+        onValueChange: set_value,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { id, children: /* @__PURE__ */ jsx(
+            SelectValue,
+            {
+              placeholder: field.placeholder ?? "Select status\u2026"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: columns.map((col) => /* @__PURE__ */ 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.useState(
+    defaultValue ?? EMPTY_FILTER
+  );
+  const current = is_controlled ? value : internal;
+  const update = React25.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__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "cls_hazo_kanban_filter flex flex-wrap items-center gap-3 p-2",
+        className
+      ),
+      children: [
+        search && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+              ToggleGroupItem,
+              {
+                value: cat,
+                size: "sm",
+                className: "cls_hazo_kanban_filter_category_chip",
+                children: cat
+              },
+              cat
+            ))
+          }
+        ),
+        priorities && priorities.length > 0 && /* @__PURE__ */ 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__ */ jsx(
+              ToggleGroupItem,
+              {
+                value: p,
+                size: "sm",
+                className: "cls_hazo_kanban_filter_priority_chip",
+                children: p
+              },
+              p
+            ))
+          }
+        ),
+        has_active && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => update(EMPTY_FILTER),
+            className: "cls_hazo_kanban_filter_clear",
+            children: [
+              /* @__PURE__ */ jsx(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.useCallback(
+    (item) => itemLabel ? itemLabel(item) : item.id,
+    [itemLabel]
+  );
+  const dnd_context_id = React25.useId();
+  const [overlay, set_overlay] = React25.useState(
+    /* @__PURE__ */ new Map()
+  );
+  const [active_id, set_active_id] = React25.useState(null);
+  const [active_tab, set_active_tab] = React25.useState(columns[0]?.key ?? "");
+  const [editing_item, set_editing_item] = React25.useState(null);
+  const show_edit = !disableEdit && typeof onCardSave === "function";
+  const handle_edit_request = React25.useCallback(
+    (it) => {
+      const typed = items.find((x) => x.id === it.id);
+      if (typed) set_editing_item(typed);
+    },
+    [items]
+  );
+  const handle_editor_close = React25.useCallback(() => {
+    set_editing_item(null);
+  }, []);
+  React25.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.useMemo(
+    () => group_items_by_column(items, overlay, columns),
+    [items, overlay, columns]
+  );
+  const find_item = React25.useCallback(
+    (id) => items.find((i) => i.id === id),
+    [items]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const merged_announcements = React25.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.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.useCallback((event) => {
+    set_active_id(String(event.active.id));
+  }, []);
+  const make_revert_handle = React25.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.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.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__ */ jsxs(
+    DndContext,
+    {
+      id: dnd_context_id,
+      sensors,
+      collisionDetection: closestCorners,
+      onDragStart: handle_drag_start,
+      onDragEnd: handle_drag_end,
+      onDragCancel: handle_drag_cancel,
+      accessibility: { announcements: dnd_announcements },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("cls_hazo_kanban w-full", className), children: [
+          /* @__PURE__ */ jsx("div", { className: cn("cls_hazo_kanban_mobile", mobile_classes), children: /* @__PURE__ */ jsxs(Tabs, { value: active_tab, onValueChange: set_active_tab, children: [
+            /* @__PURE__ */ 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__ */ jsxs(TabsTrigger, { value: col.key, className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs", children: col.title }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: count })
+              ] }, col.key);
+            }) }),
+            columns.map((col) => /* @__PURE__ */ jsx(TabsContent, { value: col.key, className: "mt-3", children: /* @__PURE__ */ jsx(
+              KanbanColumn,
+              {
+                column: col,
+                items: grouped.get(col.key) ?? [],
+                renderCard,
+                emptyColumn,
+                cardClassName,
+                showEdit: show_edit,
+                onEditRequest: handle_edit_request
+              }
+            ) }, col.key))
+          ] }) }),
+          /* @__PURE__ */ 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__ */ jsx(
+                KanbanColumn,
+                {
+                  column: col,
+                  items: grouped.get(col.key) ?? [],
+                  renderCard,
+                  emptyColumn,
+                  cardClassName,
+                  showEdit: show_edit,
+                  onEditRequest: handle_edit_request
+                },
+                col.key
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(DragOverlay, { children: active_item ? /* @__PURE__ */ jsx(
+            KanbanCard,
+            {
+              item: active_item,
+              renderCard,
+              dragging: true,
+              cardClassName
+            }
+          ) : null })
+        ] }),
+        /* @__PURE__ */ 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.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "cls_table_wrap relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  ) })
+);
+Table2.displayName = "Table";
+var TableHeader2 = React25.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+);
+TableHeader2.displayName = "TableHeader";
+var TableBody = React25.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ref,
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  )
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React25.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      ref,
+      className: cn("bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  )
+);
+TableFooter.displayName = "TableFooter";
+var TableRow2 = React25.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ 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.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ 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.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+      ...props
+    }
+  )
+);
+TableCell2.displayName = "TableCell";
+var TableCaption = React25.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+      Card,
+      {
+        ...interactionProps,
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: renderCell2(titleCol, row, i) }) }),
+          /* @__PURE__ */ jsx(CardContent, { className: "pt-0 space-y-1.5", children: restCols.map((c) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "cls_hazo_ui_table_mobile_row flex items-center justify-between gap-3 text-sm"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "cls_hazo_ui_table_mobile_label text-muted-foreground", children: c.label }),
+                /* @__PURE__ */ 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] = useState(
+    () => normalizeSortProp(props.defaultSort)
+  );
+  const isSortControlled = props.sort !== void 0;
+  const sort = isSortControlled ? normalizeSortProp(props.sort) : sortInternal;
+  const setSort = useCallback(
+    (next) => {
+      if (!isSortControlled) setSortInternal(next);
+      props.onSortChange?.(next);
+    },
+    [isSortControlled, props.onSortChange]
+  );
+  const cycleHeaderSort = useCallback(
+    (key, append) => {
+      const next = append ? cycleAppendColumn(sort, key) : cycleSingleColumn(sort, key);
+      setSort(next);
+    },
+    [sort, setSort]
+  );
+  const [filterInternal, setFilterInternal] = useState(
+    () => props.defaultFilter ?? {}
+  );
+  const isFilterControlled = props.filter !== void 0;
+  const filter = isFilterControlled ? props.filter : filterInternal;
+  const setFilter = useCallback(
+    (next) => {
+      if (!isFilterControlled) setFilterInternal(next);
+      props.onFilterChange?.(next);
+    },
+    [isFilterControlled, props.onFilterChange]
+  );
+  const [searchDraft, setSearchDraft] = useState(
+    filter.search ?? ""
+  );
+  const debounceMs = props.searchDebounceMs ?? DEFAULT_DEBOUNCE_MS;
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      if (searchDraft === (filter.search ?? "")) return;
+      setFilter({ ...filter, search: searchDraft || void 0 });
+    }, debounceMs);
+    return () => clearTimeout(handle);
+  }, [searchDraft, debounceMs]);
+  const setSearch = useCallback((s) => setSearchDraft(s), []);
+  const [pageInternal, setPageInternal] = useState(
+    () => props.defaultPage ?? 0
+  );
+  const isPageControlled = props.page !== void 0;
+  const page = isPageControlled ? props.page : pageInternal;
+  const setPage = useCallback(
+    (next) => {
+      if (!isPageControlled) setPageInternal(next);
+      props.onPageChange?.(next);
+    },
+    [isPageControlled, props.onPageChange]
+  );
+  const prevSortKey = useRef(serializeSort(sort));
+  const prevFilterKey = useRef(serializeFilter(filter));
+  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 = useMemo(
+    () => isServerMode ? props.rows : applyFilter(props.rows, filter, props.columns),
+    [props.rows, filter, props.columns, isServerMode]
+  );
+  const sorted = useMemo(
+    () => isServerMode ? filtered : applySort(filtered, sort),
+    [filtered, sort, isServerMode]
+  );
+  const pagedInMemory = useMemo(() => {
+    if (isServerMode || pageSize <= 0) return sorted;
+    const start = page * pageSize;
+    return sorted.slice(start, start + pageSize);
+  }, [sorted, page, pageSize, isServerMode]);
+  const [serverRows, setServerRows] = useState([]);
+  const [serverTotal, setServerTotal] = useState(0);
+  const [serverError, setServerError] = useState(null);
+  const reqIdRef = useRef(0);
+  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__ */ jsxs("div", { className: cn("cls_hazo_ui_table_root space-y-3", className), children: [
+    (props.enableSearch || props.enableSortDialog || props.enableFilterDialog) && /* @__PURE__ */ 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__ */ 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__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(SkeletonBar, { className: "w-2/3" }) }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "pt-0 space-y-2", children: [
+          /* @__PURE__ */ jsx(SkeletonBar, { className: "w-full" }),
+          /* @__PURE__ */ jsx(SkeletonBar, { className: "w-1/2" })
+        ] })
+      ] }, `mloader-${i}`)
+    ) }) : state.serverError != null ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_ui_table_mobile_error py-6", children: renderErrorState(props.error, state.serverError) }) : state.displayed.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
+      EmptyState,
+      {
+        title: typeof props.empty === "string" && props.empty || "No items"
+      }
+    ) : props.empty : typeof props.noResults === "string" || props.noResults === void 0 ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: typeof props.noResults === "string" && props.noResults || "No matches \u2014 adjust your filters"
+      }
+    ) : props.noResults }) : /* @__PURE__ */ jsx(
+      TableMobileCards,
+      {
+        columns,
+        rows: state.displayed,
+        getRowKey,
+        onRowClick: props.onRowClick,
+        renderCell
+      }
+    ) : /* @__PURE__ */ jsxs(Table2, { children: [
+      caption && /* @__PURE__ */ jsx(TableCaption, { children: caption }),
+      /* @__PURE__ */ jsx(TableHeader2, { children: /* @__PURE__ */ jsx(TableRow2, { children: columns.map((c) => /* @__PURE__ */ jsx(
+        TableHead,
+        {
+          className: cn(headerAlignClass(c), c.headerClassName),
+          "aria-sort": ariaSortFor(state.sort, c.key),
+          children: c.sortable ? /* @__PURE__ */ 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__ */ jsx("span", { children: c.label }),
+                /* @__PURE__ */ jsx(SortIndicator, { sort: state.sort, columnKey: c.key })
+              ]
+            }
+          ) : c.label
+        },
+        c.key
+      )) }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: props.loading ? /* @__PURE__ */ jsx(
+        LoadingRows,
+        {
+          columns,
+          count: Math.max(state.pageSize || 5, 3)
+        }
+      ) : state.serverError != null ? /* @__PURE__ */ jsx(TableRow2, { children: /* @__PURE__ */ jsx(
+        TableCell2,
+        {
+          colSpan: columns.length,
+          className: "cls_hazo_ui_table_error_cell p-0",
+          children: /* @__PURE__ */ jsx("div", { className: "cls_hazo_ui_table_error_wrap py-6", children: renderErrorState(props.error, state.serverError) })
+        }
+      ) }) : state.displayed.length === 0 ? /* @__PURE__ */ jsx(TableRow2, { children: /* @__PURE__ */ jsx(
+        TableCell2,
+        {
+          colSpan: columns.length,
+          className: "cls_hazo_ui_table_empty_cell p-0",
+          children: noActiveFilters(state.filter) && rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_ui_table_empty_wrap py-6", children: typeof props.empty === "string" || props.empty === void 0 ? /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              title: typeof props.empty === "string" && props.empty || "No items"
+            }
+          ) : props.empty }) : /* @__PURE__ */ jsx("div", { className: "cls_hazo_ui_table_no_results_wrap py-6", children: typeof props.noResults === "string" || props.noResults === void 0 ? /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              title: typeof props.noResults === "string" && props.noResults || "No matches \u2014 adjust your filters"
+            }
+          ) : props.noResults })
+        }
+      ) }) : state.displayed.map((row, i) => /* @__PURE__ */ jsx(
+        TableRow2,
+        {
+          ...buildRowProps(row, i, props.onRowClick),
+          children: columns.map((c) => /* @__PURE__ */ jsx(
+            TableCell2,
+            {
+              className: cn(cellAlignClass(c), c.className),
+              children: renderCell(c, row, i)
+            },
+            c.key
+          ))
+        },
+        getRowKey ? getRowKey(row, i) : i
+      )) })
+    ] }),
+    state.pageSize > 0 && /* @__PURE__ */ 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 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__ */ jsxs("div", { className: "cls_hazo_ui_table_pagination flex items-center justify-between gap-3 pt-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("span", { className: "cls_hazo_ui_table_page_counter text-muted-foreground", children: [
+      "Showing ",
+      start,
+      "\u2013",
+      end,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cls_hazo_ui_table_page_buttons flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(Math.max(0, page - 1)),
+          disabled: page === 0,
+          "aria-label": "Previous page",
+          children: "\u2039 Prev"
+        }
+      ),
+      /* @__PURE__ */ 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.useMemo(
+    () => deriveSortFields(columns),
+    [columns]
+  );
+  const filterFields = React25.useMemo(
+    () => deriveFilterFields(columns),
+    [columns]
+  );
+  const [searchValue, setSearchValue] = React25.useState(
+    filter.search ?? ""
+  );
+  React25.useEffect(() => {
+    setSearchValue(filter.search ?? "");
+  }, [filter.search]);
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {}),
+    /* @__PURE__ */ jsxs("div", { className: "cls_hazo_ui_table_toolbar_right flex items-center gap-2", children: [
+      enableFilterDialog && filterFields.length > 0 && /* @__PURE__ */ jsx(
+        HazoUiMultiFilterDialog,
+        {
+          availableFields: filterFields,
+          initialFilters: filter.fields ?? [],
+          onFilterChange: onFilterFieldsChange
+        }
+      ),
+      enableSortDialog && sortFields.length > 0 && /* @__PURE__ */ jsx(
+        HazoUiMultiSortDialog,
+        {
+          availableFields: sortFields,
+          initialSortFields: sortToDialogConfig(sort),
+          onSortChange: (configs) => onSortChange(dialogConfigToSort(configs))
+        }
+      )
+    ] })
+  ] });
+}
+function LoadingRows({
+  columns,
+  count
+}) {
+  return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: count }).map((_, rowIdx) => /* @__PURE__ */ jsx(TableRow2, { children: columns.map((c) => /* @__PURE__ */ jsx(TableCell2, { className: cellAlignClass(c), children: /* @__PURE__ */ 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__ */ 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__ */ jsx(ChevronsUpDown, { className: "cls_hazo_ui_table_sort_idle h-3.5 w-3.5 opacity-30" });
+  }
+  const entry = sort[idx];
+  return /* @__PURE__ */ jsxs("span", { className: "cls_hazo_ui_table_sort_active inline-flex items-center gap-0.5", children: [
+    entry.dir === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }),
+    sort.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium", children: idx + 1 })
+  ] });
+}
 
-export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, HazoUiFlexRadio, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiRte, HazoUiTextarea, HazoUiTextbox, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label2 as Label, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonGroupVariants, create_command_suggestion_extension, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, text_to_tiptap_content, toggleVariants, useMediaQuery };
+export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorBanner, ErrorPage, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, HazoUiFlexRadio, HazoUiKanban, HazoUiKanbanFilter, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label3 as Label, LoadingTimeout, Popover, PopoverContent, PopoverTrigger, ProgressiveImage, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, SkeletonCircle, SkeletonGroup, SkeletonRect, Spinner, Switch, Table2 as Table, TableBody, TableCaption, TableCell2 as TableCell, TableFooter, TableHead, TableHeader2 as TableHeader, TableRow2 as TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyKanbanFilter, buttonGroupVariants, create_command_suggestion_extension, errorToast, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, successToast, text_to_tiptap_content, toggleVariants, useErrorDisplay, useLoadingState, useMediaQuery };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map