hazo_ui 4.9.0 → 5.1.1

package/dist/index.js

@@ -1,15 +1,15 @@
 "use client";
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React26 from 'react';
-import React26__default, { lazy, useRef, useState, useCallback, useEffect, useMemo, Fragment, Suspense } from 'react';
+import * as React27 from 'react';
+import React27__default, { lazy, useRef, useState, useCallback, useEffect, useMemo, Fragment, Suspense } from 'react';
 import { generateRequestId } from 'hazo_core';
 import { withContext, setBrowserCorrelationId } from 'hazo_core/client';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, Sun, Moon, ChevronLeft, Filter, Plus, ArrowUpDown, Loader2, AlertTriangle, OctagonAlert, CheckCircle2, ChevronsUpDown, Download, Share2, Copy, GripVertical, ArrowUp, ArrowDown, Pencil, Calendar as Calendar$1 } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ArrowUpDown, icons, Loader2, AlertTriangle, OctagonAlert, CheckCircle2, ChevronsUpDown, Download, Share2, Copy, 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';
@@ -30,6 +30,7 @@ import * as IoIcons from 'react-icons/io5';
 import * as RiIcons from 'react-icons/ri';
 import * as TbIcons from 'react-icons/tb';
 import * as CiIcons from 'react-icons/ci';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { ReactNodeViewRenderer, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { TextStyle } from '@tiptap/extension-text-style';
@@ -53,7 +54,6 @@ import TaskItem from '@tiptap/extension-task-item';
 import { LuBold, LuItalic, LuUnderline, LuAlignLeft, LuAlignCenter, LuAlignRight, LuAlignVerticalJustifyStart, LuAlignVerticalJustifyCenter, LuAlignVerticalJustifyEnd, LuList, LuUndo2, LuRedo2, LuMinus, LuPlus, LuStrikethrough, LuSubscript, LuSuperscript, LuLink, LuRemoveFormatting, LuPalette, LuHighlighter, LuAlignJustify, LuListOrdered, LuListChecks, LuIndentDecrease, LuIndentIncrease, LuTable, LuTableRowsSplit, LuTableColumnsSplit, LuTrash2, LuGrid3X3, LuVariable, LuPaperclip, LuX, LuImage, LuFileText, LuFileCode, LuFile } from 'react-icons/lu';
 import { RxDividerHorizontal } from 'react-icons/rx';
 import { Extension, Node, mergeAttributes } from '@tiptap/core';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { commands } from '@uiw/react-md-editor';
 import '@uiw/react-md-editor/markdown-editor.css';
 import '@uiw/react-markdown-preview/markdown.css';
@@ -77,6 +77,7 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Toaster, toast } from 'sonner';
 export { toast as rawToast } from 'sonner';
 import { useHazoState } from 'hazo_state/client';
+export { HazoThemeProvider, ThemeScript, ThemeSetPicker, ThemeToggle, useTheme } from 'hazo_theme/client';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -138,16 +139,28 @@ var require_objectWithoutPropertiesLoose = __commonJS({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function safeHref(url) {
+  if (!url) return void 0;
+  const trimmed = url.trim();
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("http://") || lower.startsWith("https://") || lower.startsWith("mailto:")) {
+    return trimmed;
+  }
+  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+    return trimmed;
+  }
+  return void 0;
+}
 function HazoContextProvider({
   correlationId,
   userId,
   children
 }) {
-  const id = React26.useMemo(
+  const id = React27.useMemo(
     () => correlationId ?? generateRequestId(),
     [correlationId]
   );
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     withContext({ correlationId: id, userId }, () => {
       setBrowserCorrelationId(id);
     });
@@ -231,7 +244,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React26.forwardRef(
+var Button = React27.forwardRef(
   ({ className, variant, size, asChild = false, style, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -250,7 +263,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -262,7 +275,7 @@ var DialogOverlay = React26.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -312,7 +325,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -325,7 +338,7 @@ var DialogTitle = React26.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -334,7 +347,7 @@ var DialogDescription = React26.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var Command = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Command = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -346,7 +359,7 @@ var Command = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Command.displayName = "Command";
-var CommandInput = React26.forwardRef(({ className, onValueChange, onChange, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandInput = React27.forwardRef(({ className, onValueChange, onChange, ...props }, ref) => /* @__PURE__ */ jsx(
   "input",
   {
     ref,
@@ -362,7 +375,7 @@ var CommandInput = React26.forwardRef(({ className, onValueChange, onChange, ...
   }
 ));
 CommandInput.displayName = "CommandInput";
-var CommandList = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -371,7 +384,7 @@ var CommandList = React26.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = "CommandList";
-var CommandEmpty = React26.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React27.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -380,7 +393,7 @@ var CommandEmpty = React26.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 CommandEmpty.displayName = "CommandEmpty";
-var CommandGroup = React26.forwardRef(({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var CommandGroup = React27.forwardRef(({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   "div",
   {
     ref,
@@ -396,7 +409,7 @@ var CommandGroup = React26.forwardRef(({ className, heading, children, ...props
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React26.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
+var CommandItem = React27.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -427,7 +440,7 @@ var CommandItem = React26.forwardRef(({ className, onSelect, value, selected, st
 CommandItem.displayName = "CommandItem";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React26.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React27.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -441,7 +454,7 @@ var PopoverContent = React26.forwardRef(({ className, align = "center", sideOffs
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Input = React26.forwardRef(
+var Input = React27.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -461,7 +474,7 @@ Input.displayName = "Input";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -477,7 +490,7 @@ var SelectTrigger = React26.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -490,7 +503,7 @@ var SelectScrollUpButton = React26.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -503,7 +516,7 @@ var SelectScrollDownButton = React26.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React26.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React27.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -531,7 +544,7 @@ var SelectContent = React26.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -540,7 +553,7 @@ var SelectLabel = React26.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -556,7 +569,7 @@ var SelectItem = React26.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -568,7 +581,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React26.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React27.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -1430,7 +1443,7 @@ function HazoUiMultiSortDialog({
     ] })
   ] });
 }
-var RadioGroup = React26.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup = React27.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -1441,7 +1454,7 @@ var RadioGroup = React26.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React26.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React27.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -1804,6 +1817,368 @@ function HazoUiPillRadio({
     }
   ) });
 }
+var Tabs = TabsPrimitive.Root;
+var TabsList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+function isLucideValue(value) {
+  return value.startsWith("lucide:");
+}
+function get_lucide_component(name) {
+  return icons[name] || null;
+}
+function HazoUiIcon({ value, size = 18, className }) {
+  if (isLucideValue(value)) {
+    const name = value.slice("lucide:".length);
+    const Cmp = get_lucide_component(name);
+    if (!Cmp) return null;
+    return /* @__PURE__ */ jsx(Cmp, { size, className });
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("cls_hazo_ui_icon_emoji", className), style: { fontSize: size }, children: value });
+}
+var TOOLS_ICONS = [
+  "Wrench",
+  "Hammer",
+  "Drill",
+  "ToolCase",
+  "PaintRoller",
+  "PaintBucket",
+  "Ruler",
+  "Cog",
+  "Bolt",
+  "Pipette",
+  "Wind",
+  "Plug",
+  "Lightbulb",
+  "Axe",
+  "Shovel"
+];
+var HOME_ICONS = [
+  "House",
+  "DoorOpen",
+  "Bath",
+  "ShowerHead",
+  "Sofa",
+  "Bed",
+  "Refrigerator",
+  "WashingMachine",
+  "Fence",
+  "Key",
+  "Lock",
+  "Warehouse"
+];
+var WEATHER_ICONS = [
+  "Sun",
+  "CloudRain",
+  "Snowflake",
+  "Thermometer",
+  "Wind",
+  "Droplet",
+  "Flame",
+  "CloudSnow",
+  "Zap"
+];
+var NATURE_ICONS = ["Leaf", "TreePine", "Trees", "Flower", "Sprout", "Bug", "Sun", "Droplets"];
+var SYMBOLS_ICONS = [
+  "Star",
+  "Heart",
+  "Check",
+  "Circle",
+  "Square",
+  "Triangle",
+  "Hexagon",
+  "Tag",
+  "Bell",
+  "Settings",
+  "Wrench"
+];
+var LUCIDE_GROUPS = [
+  { key: "tools", label: "Tools", icons: TOOLS_ICONS },
+  { key: "home", label: "Home", icons: HOME_ICONS },
+  { key: "weather", label: "Weather", icons: WEATHER_ICONS },
+  { key: "nature", label: "Nature", icons: NATURE_ICONS },
+  { key: "symbols", label: "Symbols", icons: SYMBOLS_ICONS }
+];
+var EMOJI_ITEMS = [
+  // Faces
+  "\u{1F600}",
+  "\u{1F603}",
+  "\u{1F604}",
+  "\u{1F601}",
+  "\u{1F606}",
+  "\u{1F605}",
+  "\u{1F642}",
+  "\u{1F609}",
+  "\u{1F60A}",
+  "\u{1F60D}",
+  "\u{1F914}",
+  "\u{1F610}",
+  "\u{1F634}",
+  "\u{1F60E}",
+  "\u{1F917}",
+  "\u{1F973}",
+  "\u{1F607}",
+  "\u{1F643}",
+  "\u{1F62C}",
+  "\u{1F929}",
+  // People / hands
+  "\u{1F44D}",
+  "\u{1F44E}",
+  "\u{1F44F}",
+  "\u{1F64C}",
+  "\u{1F91D}",
+  "\u{1F44B}",
+  "\u{1F4AA}",
+  "\u{1F64F}",
+  "\u{1F440}",
+  "\u{1F9D1}\u200D\u{1F527}",
+  // Objects / tools
+  "\u{1F527}",
+  "\u{1F528}",
+  "\u{1F6E0}\uFE0F",
+  "\u2699\uFE0F",
+  "\u{1FA9B}",
+  "\u{1FA9A}",
+  "\u{1F9F0}",
+  "\u{1F529}",
+  "\u26CF\uFE0F",
+  "\u{1F9F1}",
+  "\u{1F511}",
+  "\u{1F512}",
+  "\u{1F50B}",
+  "\u{1F4A1}",
+  "\u{1F50C}",
+  "\u{1F9EF}",
+  "\u{1FA9C}",
+  "\u{1F9F2}",
+  "\u{1F4CF}",
+  "\u{1F4D0}",
+  // Home
+  "\u{1F3E0}",
+  "\u{1F3E1}",
+  "\u{1F3E2}",
+  "\u{1F3ED}",
+  "\u{1F6AA}",
+  "\u{1F6CB}\uFE0F",
+  "\u{1F6C1}",
+  "\u{1F6BF}",
+  "\u{1F6CF}\uFE0F",
+  "\u{1FA9F}",
+  // Weather / nature
+  "\u2600\uFE0F",
+  "\u{1F324}\uFE0F",
+  "\u26C5",
+  "\u{1F327}\uFE0F",
+  "\u26C8\uFE0F",
+  "\u{1F329}\uFE0F",
+  "\u2744\uFE0F",
+  "\u{1F32C}\uFE0F",
+  "\u{1F4A7}",
+  "\u{1F525}",
+  "\u{1F308}",
+  "\u{1F30A}",
+  "\u{1F331}",
+  "\u{1F333}",
+  "\u{1F332}",
+  "\u{1F343}",
+  "\u{1F338}",
+  "\u{1F33B}",
+  "\u{1F342}",
+  "\u{1F335}",
+  // Transport
+  "\u{1F697}",
+  "\u{1F69A}",
+  "\u{1F69B}",
+  "\u{1F69C}",
+  "\u{1F6B2}",
+  "\u2708\uFE0F",
+  "\u{1F680}",
+  "\u26F5",
+  // Symbols
+  "\u2B50",
+  "\u2764\uFE0F",
+  "\u2705",
+  "\u274C",
+  "\u26A0\uFE0F",
+  "\u{1F534}",
+  "\u{1F7E2}",
+  "\u{1F535}",
+  "\u{1F7E1}",
+  "\u2B1B",
+  "\u2B1C",
+  "\u{1F53A}",
+  "\u{1F536}",
+  "\u{1F537}",
+  "\u{1F4AF}",
+  "\u{1F514}",
+  "\u{1F4CC}",
+  "\u{1F4CD}",
+  "\u{1F3F7}\uFE0F",
+  "\u{1F3AF}",
+  // Misc
+  "\u{1F4E6}",
+  "\u{1F4C5}",
+  "\u{1F4C8}",
+  "\u{1F4DD}",
+  "\u{1F4B0}",
+  "\u{1F4B3}",
+  "\u{1F389}",
+  "\u{1F381}",
+  "\u2615",
+  "\u{1F37D}\uFE0F",
+  "\u{1F9FE}",
+  "\u{1F4DE}",
+  "\u2709\uFE0F",
+  "\u{1F310}"
+];
+function HazoUiIconPicker({
+  value,
+  onChange,
+  disabled,
+  className,
+  triggerClassName,
+  align = "start"
+}) {
+  const [open, set_open] = React27.useState(false);
+  const [search, set_search] = React27.useState("");
+  const handle_select = React27.useCallback(
+    (next_value) => {
+      onChange(next_value);
+      set_open(false);
+    },
+    [onChange]
+  );
+  const filtered_search_results = React27.useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return [];
+    return Object.keys(icons).filter((name) => name.toLowerCase().includes(query)).slice(0, 60);
+  }, [search]);
+  const has_search = search.trim().length > 0;
+  return /* @__PURE__ */ jsx("div", { className: cn("cls_hazo_ui_icon_picker", className), children: /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (next_open) => {
+        set_open(next_open);
+        if (!next_open) set_search("");
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: cn(
+              "cls_hazo_ui_icon_picker_trigger",
+              "flex h-9 w-9 items-center justify-center rounded-md border border-input bg-card",
+              "text-foreground transition-colors hover:bg-accent/50",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              triggerClassName
+            ),
+            children: /* @__PURE__ */ jsx(HazoUiIcon, { value })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align, className: "w-72 p-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: search,
+              onChange: (e) => set_search(e.target.value),
+              placeholder: "Search icons...",
+              className: cn(
+                "cls_hazo_ui_icon_picker_search",
+                "mb-2 flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm",
+                "placeholder:text-muted-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              )
+            }
+          ),
+          has_search ? /* @__PURE__ */ jsxs("div", { className: "cls_hazo_ui_icon_picker_search_results grid max-h-56 grid-cols-8 gap-1 overflow-y-auto", children: [
+            filtered_search_results.map((name) => {
+              const Cmp = icons[name];
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  title: name,
+                  onClick: () => handle_select(`lucide:${name}`),
+                  className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: /* @__PURE__ */ jsx(Cmp, { size: 16 })
+                },
+                name
+              );
+            }),
+            filtered_search_results.length === 0 && /* @__PURE__ */ jsx("p", { className: "col-span-8 py-4 text-center text-sm text-muted-foreground", children: "No icons found" })
+          ] }) : /* @__PURE__ */ jsxs(Tabs, { defaultValue: "emoji", children: [
+            /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-6", children: [
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "emoji", children: "Emoji" }),
+              LUCIDE_GROUPS.map((group) => /* @__PURE__ */ jsx(TabsTrigger, { value: group.key, children: group.label }, group.key))
+            ] }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "emoji", children: /* @__PURE__ */ jsx("div", { className: "grid max-h-56 grid-cols-8 gap-1 overflow-y-auto", children: EMOJI_ITEMS.map((emoji, index) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handle_select(emoji),
+                className: "flex h-8 w-8 items-center justify-center rounded-md text-lg hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: emoji
+              },
+              `${emoji}-${index}`
+            )) }) }),
+            LUCIDE_GROUPS.map((group) => /* @__PURE__ */ jsx(TabsContent, { value: group.key, children: /* @__PURE__ */ jsx("div", { className: "grid max-h-56 grid-cols-8 gap-1 overflow-y-auto", children: group.icons.map((name) => {
+              const Cmp = icons[name];
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  title: name,
+                  onClick: () => handle_select(`lucide:${name}`),
+                  className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: /* @__PURE__ */ jsx(Cmp, { size: 16 })
+                },
+                name
+              );
+            }) }) }, group.key))
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
 function validateInput(value, input_type, text_len_min, text_len_max, num_min, num_max, regex, num_decimals) {
   if (value === "") {
     return { isValid: true };
@@ -1898,7 +2273,7 @@ function filterInputValue(value, input_type, num_decimals) {
     }
   }
 }
-var HazoUiFlexInput = React26.forwardRef(
+var HazoUiFlexInput = React27.forwardRef(
   ({
     className,
     input_type = "mixed",
@@ -1915,13 +2290,13 @@ var HazoUiFlexInput = React26.forwardRef(
     onBlur,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React26.useState(
+    const [internalValue, setInternalValue] = React27.useState(
       typeof controlledValue === "string" ? controlledValue : typeof controlledValue === "number" ? String(controlledValue) : ""
     );
-    const [errorMessage, setErrorMessage] = React26.useState();
+    const [errorMessage, setErrorMessage] = React27.useState();
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? typeof controlledValue === "string" ? controlledValue : String(controlledValue || "") : internalValue;
-    React26.useEffect(() => {
+    React27.useEffect(() => {
       if (isControlled) {
         const newValue = typeof controlledValue === "string" ? controlledValue : String(controlledValue || "");
         if (newValue !== internalValue) {
@@ -2001,7 +2376,7 @@ var HazoUiFlexInput = React26.forwardRef(
   }
 );
 HazoUiFlexInput.displayName = "HazoUiFlexInput";
-var ToolbarButton = React26.forwardRef(
+var ToolbarButton = React27.forwardRef(
   ({ onClick, is_active = false, disabled = false, tooltip, className, children }, ref) => {
     const button = /* @__PURE__ */ jsx(
       "button",
@@ -2270,7 +2645,7 @@ var getRelativePosition = (node, event) => {
   };
 };
 var _excluded = ["prefixCls", "className", "onMove", "onDown"];
-var Interactive = /* @__PURE__ */ React26__default.forwardRef((props, ref) => {
+var Interactive = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
   var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? "w-color-interactive" : _props$prefixCls, className = props.className, onMove = props.onMove, onDown = props.onDown, reset = (0, import_objectWithoutPropertiesLoose.default)(props, _excluded);
   var container = useRef(null);
   var hasTouched = useRef(false);
@@ -2358,7 +2733,7 @@ var Pointer = (_ref) => {
   }), [top, left, color2, className, prefixCls]);
 };
 var _excluded2 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
-var Saturation = /* @__PURE__ */ React26__default.forwardRef((props, ref) => {
+var Saturation = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
   var _hsva$h;
   var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? "w-color-saturation" : _props$prefixCls, _props$radius = props.radius, radius = _props$radius === void 0 ? 0 : _props$radius, pointer = props.pointer, className = props.className, _props$hue = props.hue, hue = _props$hue === void 0 ? 0 : _props$hue, style = props.style, hsva = props.hsva, onChange = props.onChange, other = (0, import_objectWithoutPropertiesLoose2.default)(props, _excluded2);
   var containerStyle = (0, import_extends3.default)({
@@ -2507,7 +2882,7 @@ var Pointer2 = (_ref) => {
 };
 var _excluded4 = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "reverse", "style", "onChange", "pointer"];
 var BACKGROUND_IMG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==";
-var Alpha = /* @__PURE__ */ React26__default.forwardRef((props, ref) => {
+var Alpha = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
   var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? "w-color-alpha" : _props$prefixCls, className = props.className, hsva = props.hsva, background = props.background, _props$bgProps = props.bgProps, bgProps = _props$bgProps === void 0 ? {} : _props$bgProps, _props$innerProps = props.innerProps, innerProps = _props$innerProps === void 0 ? {} : _props$innerProps, _props$pointerProps = props.pointerProps, pointerProps = _props$pointerProps === void 0 ? {} : _props$pointerProps, _props$radius = props.radius, radius = _props$radius === void 0 ? 0 : _props$radius, width = props.width, _props$height = props.height, height = _props$height === void 0 ? 16 : _props$height, _props$direction = props.direction, direction = _props$direction === void 0 ? "horizontal" : _props$direction, _props$reverse = props.reverse, reverse = _props$reverse === void 0 ? false : _props$reverse, style = props.style, onChange = props.onChange, pointer = props.pointer, other = (0, import_objectWithoutPropertiesLoose4.default)(props, _excluded4);
   var offsetToAlpha = useCallback((offset) => {
     var value = direction === "horizontal" ? offset.left : offset.top;
@@ -2643,7 +3018,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__ */ React26__default.forwardRef((props, ref) => {
+var EditableInput = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
   var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? "w-color-editable-input" : _props$prefixCls, _props$placement = props.placement, placement = _props$placement === void 0 ? "bottom" : _props$placement, label = props.label, initValue = props.value, className = props.className, style = props.style, labelStyle = props.labelStyle, inputStyle = props.inputStyle, onChange = props.onChange, onBlur = props.onBlur, renderInput = props.renderInput, other = (0, import_objectWithoutPropertiesLoose5.default)(props, _excluded5);
   var _useState = useState(initValue), value = _useState[0], setValue = _useState[1];
   var isFocus = useRef(false);
@@ -2740,7 +3115,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__ */ React26__default.forwardRef((props, ref) => {
+var EditableInputRGBA = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
   var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? "w-color-editable-input-rgba" : _props$prefixCls, hsva = props.hsva, _props$placement = props.placement, placement = _props$placement === void 0 ? "bottom" : _props$placement, _props$rProps = props.rProps, rProps = _props$rProps === void 0 ? {} : _props$rProps, _props$gProps = props.gProps, gProps = _props$gProps === void 0 ? {} : _props$gProps, _props$bProps = props.bProps, bProps = _props$bProps === void 0 ? {} : _props$bProps, _props$aProps = props.aProps, aProps = _props$aProps === void 0 ? {} : _props$aProps, className = props.className, style = props.style, onChange = props.onChange, other = (0, import_objectWithoutPropertiesLoose6.default)(props, _excluded6);
   var rgba = hsva ? hsvaToRgba(hsva) : {};
   function handleBlur(evn) {
@@ -2854,7 +3229,7 @@ var import_objectWithoutPropertiesLoose7 = __toESM(require_objectWithoutProperti
 var _excluded7 = ["prefixCls", "className", "hue", "onChange", "direction", "reverse"];
 var NORMAL_COLORS = "rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%";
 var REVERSED_COLORS = "rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 33%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 83%, rgb(255, 0, 0) 100%";
-var Hue = /* @__PURE__ */ React26__default.forwardRef((props, ref) => {
+var Hue = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
   var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? "w-color-hue" : _props$prefixCls, className = props.className, _props$hue = props.hue, hue = _props$hue === void 0 ? 0 : _props$hue, _onChange = props.onChange, _props$direction = props.direction, direction = _props$direction === void 0 ? "horizontal" : _props$direction, _props$reverse = props.reverse, reverse = _props$reverse === void 0 ? false : _props$reverse, other = (0, import_objectWithoutPropertiesLoose7.default)(props, _excluded7);
   var getGradientBackground = useCallback(() => {
     if (direction === "horizontal") {
@@ -2905,7 +3280,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__ */ React26__default.forwardRef((props, ref) => {
+var Swatch = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
   var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? "w-color-swatch" : _props$prefixCls, className = props.className, color2 = props.color, _props$colors = props.colors, colors = _props$colors === void 0 ? [] : _props$colors, style = props.style, _props$rectProps = props.rectProps, rectProps = _props$rectProps === void 0 ? {} : _props$rectProps, onChange = props.onChange, addonAfter = props.addonAfter, addonBefore = props.addonBefore, rectRender = props.rectRender, other = (0, import_objectWithoutPropertiesLoose8.default)(props, _excluded8);
   var rectStyle = (0, import_extends9.default)({
     "--swatch-background-color": "rgb(144, 19, 254)",
@@ -2931,7 +3306,7 @@ var Swatch = /* @__PURE__ */ React26__default.forwardRef((props, ref) => {
       flexWrap: "wrap",
       position: "relative"
     }, style),
-    children: [addonBefore && /* @__PURE__ */ React26__default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
+    children: [addonBefore && /* @__PURE__ */ React27__default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
       var title = "";
       var background = "";
       if (typeof item === "string") {
@@ -2957,7 +3332,7 @@ var Swatch = /* @__PURE__ */ React26__default.forwardRef((props, ref) => {
           children: render
         }, idx);
       }
-      var child = rectProps.children && /* @__PURE__ */ React26__default.isValidElement(rectProps.children) ? /* @__PURE__ */ React26__default.cloneElement(rectProps.children, {
+      var child = rectProps.children && /* @__PURE__ */ React27__default.isValidElement(rectProps.children) ? /* @__PURE__ */ React27__default.cloneElement(rectProps.children, {
         color: background,
         checked
       }) : null;
@@ -2971,7 +3346,7 @@ var Swatch = /* @__PURE__ */ React26__default.forwardRef((props, ref) => {
           background
         })
       }), idx);
-    }), addonAfter && /* @__PURE__ */ React26__default.isValidElement(addonAfter) && addonAfter]
+    }), addonAfter && /* @__PURE__ */ React27__default.isValidElement(addonAfter) && addonAfter]
   }));
 });
 Swatch.displayName = "Swatch";
@@ -2990,7 +3365,7 @@ var Bar = (props) => /* @__PURE__ */ jsx("div", {
     backgroundColor: "#fff"
   }
 });
-var Sketch = /* @__PURE__ */ React26__default.forwardRef((props, ref) => {
+var Sketch = /* @__PURE__ */ React27__default.forwardRef((props, ref) => {
   var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? "w-color-sketch" : _props$prefixCls, className = props.className, onChange = props.onChange, _props$width = props.width, width = _props$width === void 0 ? 218 : _props$width, _props$presetColors = props.presetColors, presetColors = _props$presetColors === void 0 ? PRESET_COLORS : _props$presetColors, color2 = props.color, _props$editableDisabl = props.editableDisable, editableDisable = _props$editableDisabl === void 0 ? true : _props$editableDisabl, _props$disableAlpha = props.disableAlpha, disableAlpha = _props$disableAlpha === void 0 ? false : _props$disableAlpha, style = props.style, other = (0, import_objectWithoutPropertiesLoose9.default)(props, _excluded9);
   var _useState = useState({
     h: 209,
@@ -3259,19 +3634,19 @@ var Toolbar = ({
   toolbar,
   font_families
 }) => {
-  const [link_url, set_link_url] = React26.useState("https://");
-  const [link_popover_open, set_link_popover_open] = React26.useState(false);
-  const [text_color_open, set_text_color_open] = React26.useState(false);
-  const [highlight_color_open, set_highlight_color_open] = React26.useState(false);
-  const [variables_menu_open, set_variables_menu_open] = React26.useState(false);
-  const [table_menu_open, set_table_menu_open] = React26.useState(false);
-  const [text_color, set_text_color] = React26.useState("#000000");
-  const [highlight_color, set_highlight_color] = React26.useState("#ffff00");
-  const [table_rows, set_table_rows] = React26.useState(3);
-  const [table_cols, set_table_cols] = React26.useState(3);
-  const [hovered_cell, set_hovered_cell] = React26.useState(null);
-  const file_input_ref = React26.useRef(null);
-  const image_input_ref = React26.useRef(null);
+  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);
   if (!editor) {
     return null;
   }
@@ -4085,7 +4460,7 @@ var Toolbar = ({
         disabled && "opacity-50 pointer-events-none"
       ),
       children: [
-        sections.map((items, i) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+        sections.map((items, i) => /* @__PURE__ */ jsxs(React27.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(ToolbarSeparator, {}),
           items
         ] }, i)),
@@ -4337,43 +4712,6 @@ var VariableExtension = Node.create({
     };
   }
 });
-var Tabs = TabsPrimitive.Root;
-var TabsList = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
 function debounce_fn(func, wait) {
   let timeout_id = null;
   return (output) => {
@@ -4399,14 +4737,14 @@ var HazoUiRte = ({
   toolbar,
   font_families
 }) => {
-  const [attachments, set_attachments] = React26.useState(
+  const [attachments, set_attachments] = React27.useState(
     initial_attachments
   );
-  const [active_tab, set_active_tab] = React26.useState("html");
+  const [active_tab, set_active_tab] = React27.useState("html");
   const is_view_only = active_tab !== "html";
-  const attachments_ref = React26.useRef(attachments);
+  const attachments_ref = React27.useRef(attachments);
   attachments_ref.current = attachments;
-  const debounced_on_change = React26.useMemo(
+  const debounced_on_change = React27.useMemo(
     () => debounce_fn((output) => {
       if (on_change) {
         on_change(output);
@@ -4505,7 +4843,7 @@ var HazoUiRte = ({
       debounced_on_change(output);
     }
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (editor && html !== void 0) {
       const current_html = editor.getHTML();
       if (html !== current_html && !editor.isFocused) {
@@ -4513,21 +4851,21 @@ var HazoUiRte = ({
       }
     }
   }, [html, editor]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const attachments_from_props_ref = React26.useRef(false);
-  const prev_initial_attachments_ref = React26.useRef(initial_attachments);
-  React26.useEffect(() => {
+  const attachments_from_props_ref = React27.useRef(false);
+  const prev_initial_attachments_ref = React27.useRef(initial_attachments);
+  React27.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]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (attachments_from_props_ref.current) {
       attachments_from_props_ref.current = false;
       return;
@@ -5340,12 +5678,12 @@ var CommandPopover = ({
   on_selection_change: _on_selection_change,
   prefix_color
 }) => {
-  const container_ref = React26.useRef(null);
-  const grouped_commands = React26.useMemo(
+  const container_ref = React27.useRef(null);
+  const grouped_commands = React27.useMemo(
     () => group_commands(commands),
     [commands]
   );
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const handle_click_outside = (e) => {
       if (container_ref.current && !container_ref.current.contains(e.target)) {
         on_close();
@@ -5358,8 +5696,8 @@ var CommandPopover = ({
       };
     }
   }, [is_open, on_close]);
-  const [mounted, set_mounted] = React26.useState(false);
-  React26.useEffect(() => {
+  const [mounted, set_mounted] = React27.useState(false);
+  React27.useEffect(() => {
     set_mounted(true);
   }, []);
   if (!is_open || !mounted) return null;
@@ -5669,21 +6007,21 @@ var HazoUiTextbox = ({
   on_command_change,
   on_command_remove
 }) => {
-  const generated_instance_id = React26.useId();
+  const generated_instance_id = React27.useId();
   const instance_id = provided_instance_id || generated_instance_id;
-  const [suggestion_state, set_suggestion_state] = React26.useState(null);
-  const [selected_index, set_selected_index] = React26.useState(0);
-  const [popover_position, set_popover_position] = React26.useState({ top: 0, left: 0 });
-  const [edit_context, set_edit_context] = React26.useState(null);
-  const [edit_selected_index, set_edit_selected_index] = React26.useState(0);
+  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 is_controlled = value !== void 0;
-  const editor_container_ref = React26.useRef(null);
-  const edit_popover_ref = React26.useRef(null);
-  const [mounted, set_mounted] = React26.useState(false);
-  React26.useEffect(() => {
+  const editor_container_ref = React27.useRef(null);
+  const edit_popover_ref = React27.useRef(null);
+  const [mounted, set_mounted] = React27.useState(false);
+  React27.useEffect(() => {
     set_mounted(true);
   }, []);
-  const suggestion_extensions = React26.useMemo(() => {
+  const suggestion_extensions = React27.useMemo(() => {
     return create_command_suggestion_extension({
       prefixes,
       instance_id,
@@ -5734,7 +6072,7 @@ var HazoUiTextbox = ({
       }
     }
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (suggestion_state?.is_active && editor) {
       requestAnimationFrame(() => {
         const { from } = suggestion_state.range;
@@ -5758,7 +6096,7 @@ var HazoUiTextbox = ({
       });
     }
   }, [suggestion_state, editor]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (is_controlled && editor && !editor.isFocused) {
       const current_text = editor.getText();
       if (value !== current_text) {
@@ -5767,12 +6105,12 @@ var HazoUiTextbox = ({
       }
     }
   }, [value, editor, is_controlled, prefixes, pill_variant]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const handle_command_select = React26.useCallback(
+  const handle_command_select = React27.useCallback(
     (command) => {
       if (!editor || !suggestion_state) return;
       const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
@@ -5792,15 +6130,15 @@ var HazoUiTextbox = ({
     },
     [editor, suggestion_state, pill_variant, on_command_insert, prefixes]
   );
-  const handle_popover_close = React26.useCallback(() => {
+  const handle_popover_close = React27.useCallback(() => {
     set_suggestion_state(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_edit_close = React26.useCallback(() => {
+  const handle_edit_close = React27.useCallback(() => {
     set_edit_context(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_command_update = React26.useCallback(
+  const handle_command_update = React27.useCallback(
     (new_command) => {
       if (!editor || !edit_context) return;
       const old_command = edit_context.command;
@@ -5816,7 +6154,7 @@ var HazoUiTextbox = ({
     },
     [editor, edit_context, on_command_change]
   );
-  const handle_command_remove = React26.useCallback(() => {
+  const handle_command_remove = React27.useCallback(() => {
     if (!editor || !edit_context) return;
     const command = edit_context.command;
     editor.state.doc.descendants((node, pos) => {
@@ -5830,7 +6168,7 @@ var HazoUiTextbox = ({
     }
     set_edit_context(null);
   }, [editor, edit_context, on_command_remove]);
-  const filtered_commands = React26.useMemo(() => {
+  const filtered_commands = React27.useMemo(() => {
     if (!suggestion_state) return [];
     const query = suggestion_state.query.toLowerCase();
     if (!query) return suggestion_state.commands;
@@ -5838,7 +6176,7 @@ var HazoUiTextbox = ({
       (cmd) => cmd.action_label.toLowerCase().includes(query) || cmd.action.toLowerCase().includes(query) || cmd.action_description?.toLowerCase().includes(query)
     );
   }, [suggestion_state]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!suggestion_state?.is_active) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -5873,7 +6211,7 @@ var HazoUiTextbox = ({
     handle_command_select,
     handle_popover_close
   ]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!edit_context) return;
     const handle_click_outside = (e) => {
       if (edit_popover_ref.current && !edit_popover_ref.current.contains(e.target)) {
@@ -5888,12 +6226,12 @@ var HazoUiTextbox = ({
       document.removeEventListener("mousedown", handle_click_outside);
     };
   }, [edit_context]);
-  const edit_commands = React26.useMemo(() => {
+  const edit_commands = React27.useMemo(() => {
     if (!edit_context) return [];
     const prefix_config = prefixes.find((p) => p.char === edit_context.command.prefix);
     return prefix_config?.commands || [];
   }, [edit_context, prefixes]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!edit_context) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -5931,7 +6269,7 @@ var HazoUiTextbox = ({
     handle_command_remove,
     handle_edit_close
   ]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const handle_pill_click = (e) => {
       const detail = e.detail;
       const { id, prefix, action, action_label, node_pos } = detail;
@@ -6216,22 +6554,22 @@ var HazoUiTextarea = ({
   on_command_change,
   on_command_remove
 }) => {
-  const generated_instance_id = React26.useId();
+  const generated_instance_id = React27.useId();
   const instance_id = provided_instance_id || generated_instance_id;
-  const [suggestion_state, set_suggestion_state] = React26.useState(null);
-  const [selected_index, set_selected_index] = React26.useState(0);
-  const [popover_position, set_popover_position] = React26.useState({ top: 0, left: 0 });
-  const [edit_context, set_edit_context] = React26.useState(null);
-  const [edit_selected_index, set_edit_selected_index] = React26.useState(0);
+  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 is_controlled = value !== void 0;
-  const editor_container_ref = React26.useRef(null);
-  const edit_popover_ref = React26.useRef(null);
-  const [mounted, set_mounted] = React26.useState(false);
-  React26.useEffect(() => {
+  const editor_container_ref = React27.useRef(null);
+  const edit_popover_ref = React27.useRef(null);
+  const [mounted, set_mounted] = React27.useState(false);
+  React27.useEffect(() => {
     set_mounted(true);
   }, []);
   const calculated_min_height = rows ? `${rows * 1.5}em` : min_height;
-  const suggestion_extensions = React26.useMemo(() => {
+  const suggestion_extensions = React27.useMemo(() => {
     return create_command_suggestion_extension({
       prefixes,
       instance_id,
@@ -6280,7 +6618,7 @@ var HazoUiTextarea = ({
       }
     }
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (suggestion_state?.is_active && editor) {
       requestAnimationFrame(() => {
         const { from } = suggestion_state.range;
@@ -6304,7 +6642,7 @@ var HazoUiTextarea = ({
       });
     }
   }, [suggestion_state, editor]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (is_controlled && editor && !editor.isFocused) {
       const current_text = editor.getText();
       if (value !== current_text) {
@@ -6317,12 +6655,12 @@ var HazoUiTextarea = ({
       }
     }
   }, [value, editor, is_controlled, prefixes, pill_variant]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const handle_command_select = React26.useCallback(
+  const handle_command_select = React27.useCallback(
     (command) => {
       if (!editor || !suggestion_state) return;
       const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
@@ -6342,15 +6680,15 @@ var HazoUiTextarea = ({
     },
     [editor, suggestion_state, pill_variant, on_command_insert, prefixes]
   );
-  const handle_popover_close = React26.useCallback(() => {
+  const handle_popover_close = React27.useCallback(() => {
     set_suggestion_state(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_edit_close = React26.useCallback(() => {
+  const handle_edit_close = React27.useCallback(() => {
     set_edit_context(null);
     editor?.commands.focus();
   }, [editor]);
-  const handle_command_update = React26.useCallback(
+  const handle_command_update = React27.useCallback(
     (new_command) => {
       if (!editor || !edit_context) return;
       const old_command = edit_context.command;
@@ -6366,7 +6704,7 @@ var HazoUiTextarea = ({
     },
     [editor, edit_context, on_command_change]
   );
-  const handle_command_remove = React26.useCallback(() => {
+  const handle_command_remove = React27.useCallback(() => {
     if (!editor || !edit_context) return;
     const command = edit_context.command;
     editor.state.doc.descendants((node, pos) => {
@@ -6380,7 +6718,7 @@ var HazoUiTextarea = ({
     }
     set_edit_context(null);
   }, [editor, edit_context, on_command_remove]);
-  const filtered_commands = React26.useMemo(() => {
+  const filtered_commands = React27.useMemo(() => {
     if (!suggestion_state) return [];
     const query = suggestion_state.query.toLowerCase();
     if (!query) return suggestion_state.commands;
@@ -6388,7 +6726,7 @@ var HazoUiTextarea = ({
       (cmd) => cmd.action_label.toLowerCase().includes(query) || cmd.action.toLowerCase().includes(query) || cmd.action_description?.toLowerCase().includes(query)
     );
   }, [suggestion_state]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!suggestion_state?.is_active) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -6423,7 +6761,7 @@ var HazoUiTextarea = ({
     handle_command_select,
     handle_popover_close
   ]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!edit_context) return;
     const handle_click_outside = (e) => {
       if (edit_popover_ref.current && !edit_popover_ref.current.contains(e.target)) {
@@ -6438,12 +6776,12 @@ var HazoUiTextarea = ({
       document.removeEventListener("mousedown", handle_click_outside);
     };
   }, [edit_context]);
-  const edit_commands = React26.useMemo(() => {
+  const edit_commands = React27.useMemo(() => {
     if (!edit_context) return [];
     const prefix_config = prefixes.find((p) => p.char === edit_context.command.prefix);
     return prefix_config?.commands || [];
   }, [edit_context, prefixes]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!edit_context) return;
     const handle_keydown = (e) => {
       switch (e.key) {
@@ -6481,7 +6819,7 @@ var HazoUiTextarea = ({
     handle_command_remove,
     handle_edit_close
   ]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const handle_pill_click = (e) => {
       const detail = e.detail;
       const { id, prefix, action, action_label, node_pos } = detail;
@@ -6697,39 +7035,47 @@ function resolve_animation_classes(open_anim = "zoom", close_anim = "zoom") {
 }
 var VARIANT_PRESETS = {
   info: {
-    header_background_color: "rgb(191, 219, 254)",
-    description_background_color: "rgb(219, 234, 254)",
-    header_text_color: "rgb(30, 58, 138)",
-    border_color: "rgb(59, 130, 246)",
-    accent_color: "rgb(59, 130, 246)",
+    header_background_color: "var(--dialog-info-bg)",
+    description_background_color: "var(--dialog-info-bg)",
+    header_text_color: "var(--dialog-info-fg)",
+    border_color: "var(--dialog-info-fg)",
+    accent_color: "var(--dialog-info-fg)",
     overlay_class_name: "bg-blue-950/50"
   },
   success: {
-    header_background_color: "rgb(187, 247, 208)",
-    description_background_color: "rgb(220, 252, 231)",
-    header_text_color: "rgb(22, 101, 52)",
-    border_color: "rgb(34, 197, 94)",
-    accent_color: "rgb(34, 197, 94)",
+    header_background_color: "var(--dialog-success-bg)",
+    description_background_color: "var(--dialog-success-bg)",
+    header_text_color: "var(--dialog-success-fg)",
+    border_color: "var(--dialog-success-fg)",
+    accent_color: "var(--dialog-success-fg)",
     overlay_class_name: "bg-green-950/50"
   },
   warning: {
-    header_background_color: "rgb(253, 230, 138)",
-    description_background_color: "rgb(254, 249, 195)",
-    header_text_color: "rgb(113, 63, 18)",
-    border_color: "rgb(234, 179, 8)",
-    accent_color: "rgb(234, 179, 8)",
+    header_background_color: "var(--dialog-warning-bg)",
+    description_background_color: "var(--dialog-warning-bg)",
+    header_text_color: "var(--dialog-warning-fg)",
+    border_color: "var(--dialog-warning-fg)",
+    accent_color: "var(--dialog-warning-fg)",
     overlay_class_name: "bg-yellow-950/50"
   },
   destructive: {
-    header_background_color: "rgb(254, 202, 202)",
-    description_background_color: "rgb(254, 226, 226)",
-    header_text_color: "rgb(127, 29, 29)",
-    border_color: "rgb(239, 68, 68)",
-    accent_color: "rgb(239, 68, 68)",
+    header_background_color: "var(--dialog-destructive-bg)",
+    description_background_color: "var(--dialog-destructive-bg)",
+    header_text_color: "var(--dialog-destructive-fg)",
+    border_color: "var(--dialog-destructive-fg)",
+    accent_color: "var(--dialog-destructive-fg)",
     overlay_class_name: "bg-red-950/50",
     action_button_variant: "destructive"
   }
 };
+var NEUTRAL_VARIANT_PRESET = {
+  header_background_color: "hsl(var(--dialog-border) / 0.12)",
+  description_background_color: "hsl(var(--dialog-border) / 0.12)",
+  header_text_color: "hsl(var(--dialog-fg))",
+  border_color: "hsl(var(--dialog-border))",
+  accent_color: "hsl(var(--dialog-border))",
+  overlay_class_name: "bg-black/50"
+};
 function HazoUiDialog({
   open,
   onOpenChange,
@@ -6738,13 +7084,13 @@ function HazoUiDialog({
   onCancel,
   title = "Action required",
   description,
-  actionButtonText = "Confirm",
+  actionButtonText: actionButtonTextProp,
   actionButtonVariant,
   cancelButtonText = "Cancel",
-  showCancelButton = true,
+  showCancelButton: showCancelButtonProp,
   showActionButton = true,
-  closeOnConfirm = false,
-  actionButtonLoading = false,
+  closeOnConfirm: closeOnConfirmProp,
+  actionButtonLoading: actionButtonLoadingProp,
   actionButtonDisabled = false,
   actionButtonIcon,
   footerContent,
@@ -6764,18 +7110,46 @@ function HazoUiDialog({
   borderColor,
   accentColor,
   headerBar = false,
-  headerBarColor = "#1e293b",
+  headerBarColor,
   className,
   contentClassName,
   overlayClassName,
   headerClassName,
   footerClassName,
-  showCloseButton = true
+  showCloseButton = true,
+  kind
 }) {
   const config = get_hazo_ui_config();
-  const variant_preset = variant !== "default" ? VARIANT_PRESETS[variant] : void 0;
+  const is_confirm_kind = kind === "confirm";
+  const is_status_kind = kind === "status";
+  const [internal_confirm_loading, set_internal_confirm_loading] = React27.useState(false);
+  const cancel_ref = React27.useRef(null);
+  const variant_preset = variant !== "default" ? VARIANT_PRESETS[variant] : is_status_kind || is_confirm_kind ? NEUTRAL_VARIANT_PRESET : void 0;
   const resolved_action_button_variant = actionButtonVariant ?? variant_preset?.action_button_variant ?? "default";
+  const showCancelButton = showCancelButtonProp ?? (is_status_kind ? false : true);
+  const closeOnConfirm = closeOnConfirmProp ?? (is_status_kind || is_confirm_kind ? true : false);
+  const actionButtonText = actionButtonTextProp ?? (is_status_kind ? "OK" : is_confirm_kind ? showCancelButton ? "Confirm" : "OK" : "Confirm");
+  const actionButtonLoading = actionButtonLoadingProp ?? (is_confirm_kind ? internal_confirm_loading : false);
   const handleConfirm = () => {
+    if (is_confirm_kind) {
+      try {
+        const result = onConfirm?.();
+        if (result instanceof Promise) {
+          if (actionButtonLoadingProp === void 0) set_internal_confirm_loading(true);
+          result.then(() => {
+            if (closeOnConfirm) onOpenChange?.(false);
+          }).catch(() => {
+          }).finally(() => {
+            if (actionButtonLoadingProp === void 0) set_internal_confirm_loading(false);
+          });
+          return;
+        }
+      } catch {
+        return;
+      }
+      if (closeOnConfirm) onOpenChange?.(false);
+      return;
+    }
     onConfirm?.();
     if (closeOnConfirm) {
       onOpenChange?.(false);
@@ -6795,12 +7169,14 @@ function HazoUiDialog({
   const finalHeaderBackgroundColor = headerBackgroundColor ?? variant_preset?.header_background_color ?? config.header_background_color;
   const finalDescriptionBgColor = descriptionBackgroundColor ?? variant_preset?.description_background_color;
   const finalHeaderTextColor = headerTextColor ?? variant_preset?.header_text_color ?? config.header_text_color;
-  const is_variant_active = variant !== "default";
+  const is_variant_active = variant !== "default" || is_status_kind;
   const has_split_header = splitHeader && !headerBar && !!finalDescriptionBgColor && !!description;
   const has_merged_variant_header = !splitHeader && is_variant_active && !headerBar && !!description;
+  const resolvedHeaderBarColor = headerBarColor ?? (variant !== "default" && variant_preset ? variant_preset.header_text_color : "var(--dialog-header-bar-bg)");
   const headerStyles = {
     ...headerBar && {
-      backgroundColor: headerBarColor,
+      backgroundColor: resolvedHeaderBarColor,
+      color: "var(--dialog-header-bar-fg)",
       paddingTop: compact ? "0.625rem" : "1.5rem",
       paddingBottom: compact ? "0.625rem" : "1.5rem",
       paddingLeft: "1.5rem",
@@ -6810,15 +7186,19 @@ function HazoUiDialog({
     ...!has_split_header && finalHeaderTextColor && { color: finalHeaderTextColor }
   };
   const titleClassName = cn(
-    "cls_dialog_title",
-    headerBar && "!text-white"
+    "cls_dialog_title"
   );
   const descriptionClassName = cn(
-    "cls_dialog_description",
-    headerBar && "!text-white/80"
+    "cls_dialog_description"
   );
   const bodyStyles = {
-    ...bodyBackgroundColor && { backgroundColor: bodyBackgroundColor }
+    ...bodyBackgroundColor && { backgroundColor: bodyBackgroundColor },
+    // kind="form" gets a comfortable body/label typography scale via the
+    // hazo_theme --dialog-body-size token. --dialog-label-size is intentionally
+    // not re-applied here: CSS custom properties inherit, so a consumer's own
+    // <label> elements inside `children` can reference var(--dialog-label-size)
+    // directly without any extra plumbing from this component.
+    ...kind === "form" && { fontSize: "var(--dialog-body-size)" }
   };
   const footerStyles = {
     ...footerBackgroundColor && { backgroundColor: footerBackgroundColor }
@@ -6842,6 +7222,86 @@ function HazoUiDialog({
     ...finalCancelTextColor && { color: finalCancelTextColor },
     ...finalCancelBorderColor && { borderColor: finalCancelBorderColor }
   };
+  if (is_confirm_kind) {
+    const top_border_color = resolved_border_color ?? "hsl(var(--dialog-border))";
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsx(
+        DialogOverlay,
+        {
+          className: cn(
+            "cls_confirm_dialog_overlay",
+            overlayClassName ?? variant_preset?.overlay_class_name
+          ),
+          style: { backdropFilter: "blur(4px)" }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          className: cn(
+            "cls_confirm_dialog_content",
+            "fixed left-[50%] top-[50%] z-50",
+            "translate-x-[-50%] translate-y-[-50%]",
+            "bg-background shadow-lg",
+            "duration-200",
+            animationClasses,
+            "overflow-hidden",
+            className
+          ),
+          style: {
+            width: "min(90vw, 420px)",
+            borderRadius: "12px",
+            borderTop: `4px solid ${top_border_color}`,
+            boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
+            outline: "none"
+          },
+          onOpenAutoFocus: (e) => {
+            if ((variant === "destructive" || variant === "warning") && showCancelButton && cancel_ref.current) {
+              e.preventDefault();
+              cancel_ref.current.focus();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "cls_confirm_dialog_body px-6 pt-7 pb-5", children: [
+              /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "cls_confirm_dialog_title text-[17px] font-semibold text-foreground mb-2.5", children: title }),
+              children ? /* @__PURE__ */ jsx(DialogPrimitive.Description, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "cls_confirm_dialog_children text-sm text-muted-foreground leading-relaxed", children }) }) : description ? /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "cls_confirm_dialog_description text-sm text-muted-foreground leading-relaxed", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "cls_confirm_dialog_separator border-t border-border" }),
+            /* @__PURE__ */ jsxs("div", { className: "cls_confirm_dialog_actions px-6 py-4 flex justify-end gap-3", children: [
+              showCancelButton && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: cancel_ref,
+                  type: "button",
+                  className: "cls_confirm_cancel_button focus-visible:ring-0 focus-visible:ring-offset-0",
+                  variant: "outline",
+                  onClick: handleCancel,
+                  disabled: actionButtonLoading,
+                  style: cancelButtonStyles,
+                  children: cancelButtonText
+                }
+              ),
+              showActionButton && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  className: "cls_confirm_action_button",
+                  variant: resolved_action_button_variant,
+                  onClick: handleConfirm,
+                  disabled: actionButtonLoading || actionButtonDisabled,
+                  style: actionButtonStyles,
+                  children: [
+                    actionButtonLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                    actionButtonText
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }) });
+  }
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(
       DialogOverlay,
@@ -6916,10 +7376,17 @@ function HazoUiDialog({
                 style: headerStyles,
                 children: [
                   /* @__PURE__ */ jsx(DialogTitle, { className: titleClassName, children: title }),
-                  description && /* @__PURE__ */ jsx(DialogDescription, { className: cn(
-                    descriptionClassName,
-                    has_merged_variant_header && "italic text-xs mt-1"
-                  ), children: description })
+                  description && /* @__PURE__ */ jsx(
+                    DialogDescription,
+                    {
+                      className: cn(
+                        descriptionClassName,
+                        has_merged_variant_header && "italic text-xs mt-1"
+                      ),
+                      style: headerBar ? { opacity: 0.8 } : void 0,
+                      children: description
+                    }
+                  )
                 ]
               }
             )
@@ -6985,7 +7452,7 @@ function HazoUiDialog({
             DialogPrimitive.Close,
             {
               className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-              style: headerBar ? { color: "white" } : finalHeaderTextColor ? { color: finalHeaderTextColor } : void 0,
+              style: headerBar ? { color: "var(--dialog-header-bar-fg)" } : finalHeaderTextColor ? { color: finalHeaderTextColor } : void 0,
               children: [
                 /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
@@ -6997,28 +7464,6 @@ function HazoUiDialog({
     )
   ] }) });
 }
-var CONFIRM_VARIANT_PRESETS = {
-  destructive: {
-    accent_color: "rgb(220, 38, 38)",
-    confirm_button_color: "rgb(220, 38, 38)",
-    overlay_class_name: "bg-red-950/50"
-  },
-  warning: {
-    accent_color: "rgb(245, 158, 11)",
-    confirm_button_color: "rgb(245, 158, 11)",
-    overlay_class_name: "bg-yellow-950/50"
-  },
-  info: {
-    accent_color: "rgb(37, 99, 235)",
-    confirm_button_color: "rgb(37, 99, 235)",
-    overlay_class_name: "bg-blue-950/50"
-  },
-  success: {
-    accent_color: "rgb(22, 163, 74)",
-    confirm_button_color: "rgb(22, 163, 74)",
-    overlay_class_name: "bg-green-950/50"
-  }
-};
 function HazoUiConfirmDialog({
   open,
   onOpenChange,
@@ -7031,128 +7476,39 @@ function HazoUiConfirmDialog({
   showCancelButton = true,
   onConfirm,
   onCancel,
-  loading: external_loading,
+  loading,
   disabled = false,
   accentColor,
   confirmButtonColor,
   openAnimation = "zoom",
   closeAnimation = "zoom"
 }) {
-  const [internal_loading, set_internal_loading] = React26.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;
-  const resolved_confirm_label = confirmLabel ?? (showCancelButton ? "Confirm" : "OK");
-  const resolved_accent_color = accentColor ?? variant_preset?.accent_color ?? "rgb(148, 163, 184)";
-  const resolved_confirm_button_color = confirmButtonColor ?? variant_preset?.confirm_button_color ?? config.submit_button_background_color;
-  const cancel_button_styles = {
-    ...config.cancel_button_background_color && { backgroundColor: config.cancel_button_background_color },
-    ...config.cancel_button_text_color && { color: config.cancel_button_text_color },
-    ...config.cancel_button_border_color && { borderColor: config.cancel_button_border_color }
-  };
-  const confirm_button_styles = {
-    ...resolved_confirm_button_color && {
-      backgroundColor: resolved_confirm_button_color,
-      borderColor: resolved_confirm_button_color,
-      color: "white"
-    }
-  };
-  const animation_classes = resolve_animation_classes(openAnimation, closeAnimation);
-  const handle_confirm = async () => {
-    try {
-      const result = onConfirm();
-      if (result instanceof Promise) {
-        set_internal_loading(true);
-        await result;
-      }
-      onOpenChange(false);
-    } catch {
-    } finally {
-      set_internal_loading(false);
+  const resolved_accent_color = confirmButtonColor ?? accentColor;
+  return /* @__PURE__ */ jsx(
+    HazoUiDialog,
+    {
+      kind: "confirm",
+      open,
+      onOpenChange,
+      title,
+      description,
+      variant,
+      actionButtonText: confirmLabel,
+      cancelButtonText: cancelLabel,
+      showCancelButton,
+      onConfirm,
+      onCancel,
+      actionButtonLoading: loading,
+      actionButtonDisabled: disabled,
+      accentColor: resolved_accent_color,
+      openAnimation,
+      closeAnimation,
+      closeOnConfirm: true,
+      children
     }
-  };
-  const handle_cancel = () => {
-    onCancel?.();
-    onOpenChange(false);
-  };
-  const cancel_ref = React26.useRef(null);
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(
-      DialogOverlay,
-      {
-        className: cn(
-          "cls_confirm_dialog_overlay",
-          variant_preset?.overlay_class_name
-        ),
-        style: { backdropFilter: "blur(4px)" }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        className: cn(
-          "cls_confirm_dialog_content",
-          "fixed left-[50%] top-[50%] z-50",
-          "translate-x-[-50%] translate-y-[-50%]",
-          "bg-background shadow-lg",
-          "duration-200",
-          animation_classes,
-          "overflow-hidden"
-        ),
-        style: {
-          width: "min(90vw, 420px)",
-          borderRadius: "12px",
-          borderTop: `4px solid ${resolved_accent_color}`,
-          boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
-          outline: "none"
-        },
-        onOpenAutoFocus: (e) => {
-          if ((variant === "destructive" || variant === "warning") && showCancelButton && cancel_ref.current) {
-            e.preventDefault();
-            cancel_ref.current.focus();
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "cls_confirm_dialog_body px-6 pt-7 pb-5", children: [
-            /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "cls_confirm_dialog_title text-[17px] font-semibold text-foreground mb-2.5", children: title }),
-            children ? /* @__PURE__ */ jsx(DialogPrimitive.Description, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "cls_confirm_dialog_children text-sm text-muted-foreground leading-relaxed", children }) }) : description ? /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "cls_confirm_dialog_description text-sm text-muted-foreground leading-relaxed", children: description }) : null
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "cls_confirm_dialog_separator border-t border-border" }),
-          /* @__PURE__ */ jsxs("div", { className: "cls_confirm_dialog_actions px-6 py-4 flex justify-end gap-3", children: [
-            showCancelButton && /* @__PURE__ */ jsx(
-              Button,
-              {
-                ref: cancel_ref,
-                type: "button",
-                className: "cls_confirm_cancel_button focus-visible:ring-0 focus-visible:ring-offset-0",
-                variant: "outline",
-                onClick: handle_cancel,
-                disabled: is_loading,
-                style: cancel_button_styles,
-                children: cancelLabel
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                type: "button",
-                className: "cls_confirm_action_button",
-                onClick: handle_confirm,
-                disabled: is_loading || disabled,
-                style: confirm_button_styles,
-                children: [
-                  is_loading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-                  resolved_confirm_label
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] }) });
+  );
 }
-var Slider = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+var Slider = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
   SliderPrimitive.Root,
   {
     ref,
@@ -7205,7 +7561,7 @@ async function getCroppedImg(imageSrc, areaPixels, outputSize, quality) {
     );
   });
 }
-var HazoUiImageCropper = React26.forwardRef(function HazoUiImageCropper2({
+var HazoUiImageCropper = React27.forwardRef(function HazoUiImageCropper2({
   imageSrc,
   onCropped,
   outputSize = 512,
@@ -7213,19 +7569,19 @@ var HazoUiImageCropper = React26.forwardRef(function HazoUiImageCropper2({
   zoomLabel = "Zoom",
   className
 }, ref) {
-  const [crop, set_crop] = React26.useState({
+  const [crop, set_crop] = React27.useState({
     x: 0,
     y: 0
   });
-  const [zoom, set_zoom] = React26.useState(1);
-  const cropped_area_pixels_ref = React26.useRef(null);
-  const handle_crop_complete = React26.useCallback(
+  const [zoom, set_zoom] = React27.useState(1);
+  const cropped_area_pixels_ref = React27.useRef(null);
+  const handle_crop_complete = React27.useCallback(
     (_croppedArea, croppedAreaPixels) => {
       cropped_area_pixels_ref.current = croppedAreaPixels;
     },
     []
   );
-  React26.useImperativeHandle(
+  React27.useImperativeHandle(
     ref,
     () => ({
       getCroppedBlob: async () => {
@@ -7305,10 +7661,10 @@ function HazoUiImageCropperDialog({
   outputSize = 512,
   quality = 0.9
 }) {
-  const cropper_ref = React26.useRef(null);
-  const [image_src, set_image_src] = React26.useState(null);
-  const [is_confirming, set_is_confirming] = React26.useState(false);
-  React26.useEffect(() => {
+  const cropper_ref = React27.useRef(null);
+  const [image_src, set_image_src] = React27.useState(null);
+  const [is_confirming, set_is_confirming] = React27.useState(false);
+  React27.useEffect(() => {
     if (!file) {
       set_image_src(null);
       return;
@@ -7364,7 +7720,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = Drawer$1.Trigger;
 var DrawerPortal = Drawer$1.Portal;
 var DrawerClose = Drawer$1.Close;
-var DrawerOverlay = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Overlay,
   {
     ref,
@@ -7376,7 +7732,7 @@ var DrawerOverlay = React26.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+var DrawerContent = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
   /* @__PURE__ */ jsx(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs(
     Drawer$1.Content,
@@ -7417,7 +7773,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Title,
   {
     ref,
@@ -7429,7 +7785,7 @@ var DrawerTitle = React26.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Description,
   {
     ref,
@@ -7439,14 +7795,14 @@ var DrawerDescription = React26.forwardRef(({ className, ...props }, ref) => /*
 ));
 DrawerDescription.displayName = "DrawerDescription";
 function useMediaQuery(query) {
-  const get_match = React26.useCallback(() => {
+  const get_match = React27.useCallback(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return false;
     }
     return window.matchMedia(query).matches;
   }, [query]);
-  const [matches, set_matches] = React26.useState(false);
-  React26.useEffect(() => {
+  const [matches, set_matches] = React27.useState(false);
+  React27.useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
     }
@@ -7463,7 +7819,7 @@ function useMediaQuery(query) {
   return matches;
 }
 var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionItem = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     ref,
@@ -7472,7 +7828,7 @@ var AccordionItem = React26.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -7488,7 +7844,7 @@ var AccordionTrigger = React26.forwardRef(({ className, children, ...props }, re
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
     ref,
@@ -7498,7 +7854,7 @@ var AccordionContent = React26.forwardRef(({ className, children, ...props }, re
   }
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-var Checkbox = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -7523,7 +7879,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React26.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React27.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -7540,7 +7896,7 @@ var DropdownMenuSubTrigger = React26.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSubContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -7552,7 +7908,7 @@ var DropdownMenuSubContent = React26.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React26.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React27.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -7565,7 +7921,7 @@ var DropdownMenuContent = React26.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React27.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -7578,7 +7934,7 @@ var DropdownMenuItem = React26.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React26.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React27.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -7595,7 +7951,7 @@ var DropdownMenuCheckboxItem = React26.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -7611,7 +7967,7 @@ var DropdownMenuRadioItem = React26.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React26.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React27.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -7624,7 +7980,7 @@ var DropdownMenuLabel = React26.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -7648,7 +8004,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React26.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var HoverCardContent = React27.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -7662,7 +8018,7 @@ var HoverCardContent = React26.forwardRef(({ className, align = "center", sideOf
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-var Label3 = React26.forwardRef(
+var Label3 = React27.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "label",
@@ -7678,7 +8034,7 @@ var Label3 = React26.forwardRef(
   }
 );
 Label3.displayName = "Label";
-var Switch = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -7698,7 +8054,7 @@ var Switch = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
-var Textarea = React26.forwardRef(
+var Textarea = React27.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -7718,7 +8074,7 @@ var Textarea = React26.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Separator3 = React26.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+var Separator3 = React27.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -7736,7 +8092,7 @@ Separator3.displayName = SeparatorPrimitive.Root.displayName;
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
-var ScrollArea = React26.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -7750,7 +8106,7 @@ var ScrollArea = React26.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React26.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React27.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -7766,27 +8122,27 @@ var ScrollBar = React26.forwardRef(({ className, orientation = "vertical", ...pr
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-var Card = React26.forwardRef(
+var Card = React27.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 = React26.forwardRef(
+var CardHeader = React27.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 = React26.forwardRef(
+var CardTitle = React27.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 = React26.forwardRef(
+var CardDescription = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React26.forwardRef(
+var CardContent = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React26.forwardRef(
+var CardFooter = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -7819,16 +8175,16 @@ var toggleVariants = cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Toggle = React26.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(TogglePrimitive.Root, { ref, className: cn(toggleVariants({ variant, size, className })), ...props }));
+var Toggle = React27.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 = React26.createContext({
+var ToggleGroupContext = React27.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React26.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 = 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 }) }));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React26.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React26.useContext(ToggleGroupContext);
+var ToggleGroupItem = React27.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React27.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -7843,7 +8199,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     ref,
@@ -7852,7 +8208,7 @@ var AlertDialogOverlay = React26.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -7868,13 +8224,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 = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+var AlertDialogTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var AlertDialogDescription = React27.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 = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+var AlertDialogAction = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props }));
+var AlertDialogCancel = React27.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",
@@ -7902,7 +8258,7 @@ 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 InputAffix = React26.forwardRef(
+var InputAffix = React27.forwardRef(
   ({ className, containerClassName, prefix, suffix, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -7934,7 +8290,7 @@ var InputAffix = React26.forwardRef(
   }
 );
 InputAffix.displayName = "InputAffix";
-var SkeletonBase = React26.forwardRef(
+var SkeletonBase = React27.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -8110,8 +8466,8 @@ function LoadingTimeout({
     firm: thresholds?.firm ?? 15e3,
     expired: thresholds?.expired ?? 3e4
   };
-  const [phase, setPhase] = React26.useState(active ? "silent" : "idle");
-  React26.useEffect(() => {
+  const [phase, setPhase] = React27.useState(active ? "silent" : "idle");
+  React27.useEffect(() => {
     if (!active) {
       setPhase("idle");
       return;
@@ -8170,7 +8526,7 @@ function ProgressiveImage({
   onLoad,
   onError
 }) {
-  const [loaded, setLoaded] = React26.useState(false);
+  const [loaded, setLoaded] = React27.useState(false);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8323,7 +8679,7 @@ function NotificationPanel({
   loading = false,
   className
 }) {
-  const hasChildren = React26.Children.count(children) > 0 && children !== null && children !== void 0;
+  const hasChildren = React27.Children.count(children) > 0 && children !== null && children !== void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8674,6 +9030,9 @@ function KanbanCard({
       tabIndex: 0,
       "aria-roledescription": "draggable card",
       "aria-grabbed": isDragging,
+      onDoubleClick: () => {
+        if (showEdit && onEditRequest && !dragging) onEditRequest(item);
+      },
       children: [
         showEdit && onEditRequest && !dragging && /* @__PURE__ */ jsx(
           "button",
@@ -8780,29 +9139,29 @@ function KanbanEditor({
   onSave,
   onClose
 }) {
-  const [draft, set_draft] = React26.useState(item);
-  const [saving, set_saving] = React26.useState(false);
-  const [error, set_error] = React26.useState(null);
+  const [draft, set_draft] = React27.useState(item);
+  const [saving, set_saving] = React27.useState(false);
+  const [error, set_error] = React27.useState(null);
   const item_id = item?.id ?? null;
-  React26.useEffect(() => {
+  React27.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 = React26.useMemo(() => {
+  const resolved_fields = React27.useMemo(() => {
     if (fields) return fields;
     if (!item) return [];
     return auto_detect_fields(item, resolved_columns);
   }, [fields, item, resolved_columns]);
-  const required_keys = React26.useMemo(
+  const required_keys = React27.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 = React26.useMemo(() => {
+  const all_required_filled = React27.useMemo(() => {
     if (!draft) return false;
     for (const key of required_keys) {
       const v = draft[key];
@@ -8811,7 +9170,7 @@ function KanbanEditor({
     }
     return true;
   }, [draft, required_keys]);
-  const is_dirty = React26.useMemo(() => {
+  const is_dirty = React27.useMemo(() => {
     if (!draft || !item) return false;
     try {
       return JSON.stringify(draft) !== JSON.stringify(item);
@@ -8819,7 +9178,7 @@ function KanbanEditor({
       return draft !== item;
     }
   }, [draft, item]);
-  const handle_save = React26.useCallback(async () => {
+  const handle_save = React27.useCallback(async () => {
     if (!draft || !item) return;
     if (saving) return;
     set_error(null);
@@ -8944,6 +9303,15 @@ function KanbanEditorFieldRow({
         onChange: (e) => set_value(e.target.value)
       }
     ),
+    field.type === "richtext" && /* @__PURE__ */ jsx(
+      HazoUiRte,
+      {
+        html: typeof value === "string" ? value : "",
+        min_height: "180px",
+        placeholder: field.placeholder,
+        on_change: (out) => set_value(out.html)
+      }
+    ),
     field.type === "textarea" && /* @__PURE__ */ jsx(
       Textarea,
       {
@@ -9038,11 +9406,11 @@ function HazoUiKanbanFilter({
   className
 }) {
   const is_controlled = value !== void 0;
-  const [internal, set_internal] = React26.useState(
+  const [internal, set_internal] = React27.useState(
     defaultValue ?? EMPTY_FILTER
   );
   const current = is_controlled ? value : internal;
-  const update = React26.useCallback(
+  const update = React27.useCallback(
     (next) => {
       if (!is_controlled) set_internal(next);
       onChange?.(next);
@@ -9205,29 +9573,29 @@ function HazoUiKanban({
   onCardSave,
   disableEdit = false
 }) {
-  const label_fn = React26.useCallback(
+  const label_fn = React27.useCallback(
     (item) => itemLabel ? itemLabel(item) : item.id,
     [itemLabel]
   );
-  const dnd_context_id = React26.useId();
-  const [overlay, set_overlay] = React26.useState(
+  const dnd_context_id = React27.useId();
+  const [overlay, set_overlay] = React27.useState(
     /* @__PURE__ */ new Map()
   );
-  const [active_id, set_active_id] = React26.useState(null);
-  const [active_tab, set_active_tab] = React26.useState(columns[0]?.key ?? "");
-  const [editing_item, set_editing_item] = React26.useState(null);
+  const [active_id, set_active_id] = React27.useState(null);
+  const [active_tab, set_active_tab] = React27.useState(columns[0]?.key ?? "");
+  const [editing_item, set_editing_item] = React27.useState(null);
   const show_edit = !disableEdit && typeof onCardSave === "function";
-  const handle_edit_request = React26.useCallback(
+  const handle_edit_request = React27.useCallback(
     (it) => {
       const typed = items.find((x) => x.id === it.id);
       if (typed) set_editing_item(typed);
     },
     [items]
   );
-  const handle_editor_close = React26.useCallback(() => {
+  const handle_editor_close = React27.useCallback(() => {
     set_editing_item(null);
   }, []);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (overlay.size === 0) return;
     set_overlay((prev) => {
       let changed = false;
@@ -9242,11 +9610,11 @@ function HazoUiKanban({
       return changed ? next : prev;
     });
   }, [items, overlay]);
-  const grouped = React26.useMemo(
+  const grouped = React27.useMemo(
     () => group_items_by_column(items, overlay, columns),
     [items, overlay, columns]
   );
-  const find_item = React26.useCallback(
+  const find_item = React27.useCallback(
     (id) => items.find((i) => i.id === id),
     [items]
   );
@@ -9254,7 +9622,7 @@ function HazoUiKanban({
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
-  const merged_announcements = React26.useMemo(() => {
+  const merged_announcements = React27.useMemo(() => {
     const defaults = default_announcements(label_fn);
     return {
       onDragStart: announcements?.onDragStart ?? defaults.onDragStart,
@@ -9263,7 +9631,7 @@ function HazoUiKanban({
       onDragCancel: announcements?.onDragCancel ?? defaults.onDragCancel
     };
   }, [announcements, label_fn]);
-  const dnd_announcements = React26.useMemo(
+  const dnd_announcements = React27.useMemo(
     () => ({
       onDragStart({ active }) {
         const id = String(active.id);
@@ -9321,10 +9689,10 @@ function HazoUiKanban({
     }),
     [find_item, columns, grouped, merged_announcements]
   );
-  const handle_drag_start = React26.useCallback((event) => {
+  const handle_drag_start = React27.useCallback((event) => {
     set_active_id(String(event.active.id));
   }, []);
-  const make_revert_handle = React26.useCallback(
+  const make_revert_handle = React27.useCallback(
     (item_id) => ({
       revert: () => {
         set_overlay((prev) => {
@@ -9337,7 +9705,7 @@ function HazoUiKanban({
     }),
     []
   );
-  const handle_drag_end = React26.useCallback(
+  const handle_drag_end = React27.useCallback(
     (event) => {
       const active_id_str = String(event.active.id);
       set_active_id(null);
@@ -9399,7 +9767,7 @@ function HazoUiKanban({
     },
     [find_item, columns, grouped, onMove, onReorder, make_revert_handle]
   );
-  const handle_drag_cancel = React26.useCallback(() => {
+  const handle_drag_cancel = React27.useCallback(() => {
     set_active_id(null);
   }, []);
   const active_item = active_id ? find_item(active_id) : null;
@@ -9490,7 +9858,7 @@ function HazoUiKanban({
     }
   );
 }
-var Table2 = React26.forwardRef(
+var Table2 = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "cls_table_wrap relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
     "table",
     {
@@ -9501,11 +9869,11 @@ var Table2 = React26.forwardRef(
   ) })
 );
 Table2.displayName = "Table";
-var TableHeader2 = React26.forwardRef(
+var TableHeader2 = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
 );
 TableHeader2.displayName = "TableHeader";
-var TableBody = React26.forwardRef(
+var TableBody = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tbody",
     {
@@ -9516,7 +9884,7 @@ var TableBody = React26.forwardRef(
   )
 );
 TableBody.displayName = "TableBody";
-var TableFooter = React26.forwardRef(
+var TableFooter = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tfoot",
     {
@@ -9527,7 +9895,7 @@ var TableFooter = React26.forwardRef(
   )
 );
 TableFooter.displayName = "TableFooter";
-var TableRow2 = React26.forwardRef(
+var TableRow2 = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tr",
     {
@@ -9541,7 +9909,7 @@ var TableRow2 = React26.forwardRef(
   )
 );
 TableRow2.displayName = "TableRow";
-var TableHead = React26.forwardRef(
+var TableHead = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "th",
     {
@@ -9555,7 +9923,7 @@ var TableHead = React26.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell2 = React26.forwardRef(
+var TableCell2 = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "td",
     {
@@ -9566,7 +9934,7 @@ var TableCell2 = React26.forwardRef(
   )
 );
 TableCell2.displayName = "TableCell";
-var TableCaption = React26.forwardRef(
+var TableCaption = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "caption",
     {
@@ -10138,18 +10506,18 @@ function Toolbar2(props) {
     enableFilterDialog,
     searchPlaceholder
   } = props;
-  const sortFields = React26.useMemo(
+  const sortFields = React27.useMemo(
     () => deriveSortFields(columns),
     [columns]
   );
-  const filterFields = React26.useMemo(
+  const filterFields = React27.useMemo(
     () => deriveFilterFields(columns),
     [columns]
   );
-  const [searchValue, setSearchValue] = React26.useState(
+  const [searchValue, setSearchValue] = React27.useState(
     filter.search ?? ""
   );
-  React26.useEffect(() => {
+  React27.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: [
@@ -10510,13 +10878,13 @@ function FunnelChart({
   showTooltip = true,
   className
 }) {
-  const [hover_idx, set_hover_idx] = React26.useState(null);
+  const [hover_idx, set_hover_idx] = React27.useState(null);
   const fmt = valueFormat ?? format_num;
   const totals = steps.map(step_total);
   const value_max = Math.max(1, ...totals);
   const plot_w = width - PAD_LEFT2 - PAD_RIGHT2;
   const vbox_h = height ?? PAD_TOP2 + steps.length * ROW_H + PAD_BOTTOM2;
-  const handle_mouse_move = React26.useCallback(
+  const handle_mouse_move = React27.useCallback(
     (e) => {
       if (steps.length === 0) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -10531,7 +10899,7 @@ function FunnelChart({
     },
     [steps.length, vbox_h]
   );
-  const handle_mouse_leave = React26.useCallback(() => set_hover_idx(null), []);
+  const handle_mouse_leave = React27.useCallback(() => set_hover_idx(null), []);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -10719,21 +11087,21 @@ function celebrate(payload) {
   _enqueue(payload);
 }
 function CelebrationProvider({ children }) {
-  const [queue, set_queue] = React26.useState([]);
-  const enqueue = React26.useCallback((payload) => {
+  const [queue, set_queue] = React27.useState([]);
+  const enqueue = React27.useCallback((payload) => {
     const storage_key = `hazo_ui_celebration_${payload.id}`;
     if (typeof window !== "undefined" && sessionStorage.getItem(storage_key)) {
       return;
     }
     set_queue((q) => [...q, payload]);
   }, []);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     _enqueue = enqueue;
     return () => {
       _enqueue = null;
     };
   }, [enqueue]);
-  const handle_close = React26.useCallback(() => {
+  const handle_close = React27.useCallback(() => {
     set_queue((q) => q.slice(1));
   }, []);
   const current = queue[0] ?? null;
@@ -10762,14 +11130,14 @@ function CelebrationModalInner({
     autoDismissDelay = 8e3,
     audioChime = false
   } = payload;
-  const [visible, set_visible] = React26.useState(true);
-  const [is_downloading, set_is_downloading] = React26.useState(false);
-  const canvas_ref = React26.useRef(null);
-  const card_ref = React26.useRef(null);
-  React26.useEffect(() => {
+  const [visible, set_visible] = React27.useState(true);
+  const [is_downloading, set_is_downloading] = React27.useState(false);
+  const canvas_ref = React27.useRef(null);
+  const card_ref = React27.useRef(null);
+  React27.useEffect(() => {
     sessionStorage.setItem(`hazo_ui_celebration_${id}`, "1");
   }, [id]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!canvas_ref.current) return;
     let confetti_instance = null;
     import('canvas-confetti').then(({ default: confetti }) => {
@@ -10786,18 +11154,18 @@ function CelebrationModalInner({
       confetti_instance?.reset();
     };
   }, []);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!audioChime) return;
     const audio = new Audio(celebration_chime_default);
     audio.play().catch(() => {
     });
   }, [audioChime]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!autoDismiss) return;
     const timer = window.setTimeout(close_modal, autoDismissDelay);
     return () => window.clearTimeout(timer);
   }, [autoDismiss, autoDismissDelay]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const on_key = (e) => {
       if (e.key === "Escape") close_modal();
     };
@@ -11046,8 +11414,8 @@ function useEtaProgress(opts) {
     loadDurations,
     appendDuration
   } = opts;
-  const [value, setValue] = React26.useState(0);
-  const stateRef = React26.useRef({
+  const [value, setValue] = React27.useState(0);
+  const stateRef = React27.useRef({
     started: false,
     finished: false,
     startTime: 0,
@@ -11057,14 +11425,14 @@ function useEtaProgress(opts) {
     eta: 0,
     rafId: 0
   });
-  const stop = React26.useCallback(() => {
+  const stop = React27.useCallback(() => {
     if (stateRef.current.rafId) {
       cancelAnimationFrame(stateRef.current.rafId);
       stateRef.current.rafId = 0;
     }
   }, []);
-  React26.useEffect(() => stop, [stop]);
-  const tick = React26.useCallback(() => {
+  React27.useEffect(() => stop, [stop]);
+  const tick = React27.useCallback(() => {
     const s = stateRef.current;
     if (s.finished || !s.started) return;
     const elapsed = Date.now() - s.startTime;
@@ -11073,7 +11441,7 @@ function useEtaProgress(opts) {
     setValue(Math.max(timeValue, unitValue));
     s.rafId = requestAnimationFrame(tick);
   }, [unitCount]);
-  const start = React26.useCallback(() => {
+  const start = React27.useCallback(() => {
     const s = stateRef.current;
     if (s.started) return;
     const window2 = loadDurations();
@@ -11087,13 +11455,13 @@ function useEtaProgress(opts) {
     stop();
     s.rafId = requestAnimationFrame(tick);
   }, [loadDurations, unitCount, concurrency, fallbackUnitMs, stop, tick]);
-  const unitDone = React26.useCallback(() => {
+  const unitDone = React27.useCallback(() => {
     const s = stateRef.current;
     if (!s.started || s.finished) return;
     s.unitsDone = Math.min(s.unitsDone + 1, unitCount);
     s.unitTimestamps.push(Date.now());
   }, [unitCount]);
-  const finish = React26.useCallback(() => {
+  const finish = React27.useCallback(() => {
     const s = stateRef.current;
     if (s.finished) return;
     s.finished = true;
@@ -11127,8 +11495,8 @@ function HazoUiEtaProgress({
     ...endpoint ? { endpoint } : {}
   });
   const durationWindow = Array.isArray(stored) ? stored : [];
-  const loadDurations = React26.useCallback(() => durationWindow, [durationWindow]);
-  const appendDuration = React26.useCallback(
+  const loadDurations = React27.useCallback(() => durationWindow, [durationWindow]);
+  const appendDuration = React27.useCallback(
     (ms) => {
       append(ms, windowSize);
     },
@@ -11141,7 +11509,7 @@ function HazoUiEtaProgress({
     loadDurations,
     appendDuration
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (handleRef) {
       handleRef.current = handle;
     }
@@ -11183,8 +11551,8 @@ function HazoUiMemoryDropdown({
     fallback: []
   });
   const storedEntries = Array.isArray(stored) ? stored : [];
-  const [query, setQuery] = React26.useState("");
-  React26.useEffect(() => {
+  const [query, setQuery] = React27.useState("");
+  React27.useEffect(() => {
     if (!add_entry) return;
     const updated = upsertEntry(storedEntries, add_entry);
     setValue(updated);
@@ -11263,8 +11631,8 @@ function HazoUiMemoryDropdown({
   );
 }
 function EntryRow({ entry, on_select, onDelete }) {
-  const [deleteHovered, setDeleteHovered] = React26.useState(false);
-  const [rowHovered, setRowHovered] = React26.useState(false);
+  const [deleteHovered, setDeleteHovered] = React27.useState(false);
+  const [rowHovered, setRowHovered] = React27.useState(false);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -11321,68 +11689,174 @@ function EntryRow({ entry, on_select, onDelete }) {
     }
   );
 }
-var ThemeContext = React26.createContext(void 0);
-function HazoThemeProvider({
-  children,
-  defaultTheme = "system",
-  storageKey = "theme"
+function Logo({
+  logoUrl,
+  logoUrlDark,
+  appTitle,
+  href,
+  height = 28,
+  className,
+  imgClassName
 }) {
-  const [theme, setTheme] = useLocalStorage(storageKey, defaultTheme);
-  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
-  const resolvedTheme = theme === "system" ? prefersDark ? "dark" : "light" : theme;
-  React26.useEffect(() => {
-    document.documentElement.classList.toggle("dark", resolvedTheme === "dark");
-  }, [resolvedTheme]);
-  const toggleTheme = React26.useCallback(() => {
-    setTheme(resolvedTheme === "dark" ? "light" : "dark");
-  }, [resolvedTheme, setTheme]);
-  const value = React26.useMemo(
-    () => ({ theme, setTheme, resolvedTheme, toggleTheme }),
-    [theme, setTheme, resolvedTheme, toggleTheme]
-  );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
-}
-function useTheme() {
-  const context = React26.useContext(ThemeContext);
-  if (context === void 0) {
-    throw new Error("useTheme must be used within a <HazoThemeProvider>");
+  const alt = appTitle ?? "Logo";
+  let content = null;
+  if (logoUrl) {
+    content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: logoUrl,
+          alt,
+          height,
+          style: { height },
+          className: cn("object-contain", logoUrlDark && "dark:hidden", imgClassName)
+        }
+      ),
+      logoUrlDark ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: logoUrlDark,
+          alt,
+          height,
+          style: { height },
+          className: cn("hidden object-contain dark:block", imgClassName)
+        }
+      ) : null
+    ] });
+  } else if (appTitle) {
+    content = /* @__PURE__ */ jsx("span", { className: "font-semibold text-navbar-fg", children: appTitle });
+  }
+  if (content === null) return /* @__PURE__ */ jsx(Fragment$1, {});
+  const resolvedHref = safeHref(href);
+  if (resolvedHref) {
+    return /* @__PURE__ */ jsx("a", { href: resolvedHref, className: cn("inline-flex items-center gap-2", className), children: content });
   }
-  return context;
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center gap-2", className), children: content });
 }
-function ThemeScript({ storageKey = "theme" }) {
-  const script = `(function(){try{var k=${JSON.stringify(
-    storageKey
-  )};var raw=localStorage.getItem(k);var t="system";if(raw){try{t=JSON.parse(raw);}catch(e){t=String(raw).replace(/^"|"$/g,"");}}var m=window.matchMedia("(prefers-color-scheme: dark)").matches;var isDark=t==="dark"||((t==="system"||!t)&&m);var c=document.documentElement.classList;if(isDark){c.add("dark");}else{c.remove("dark");}}catch(e){}})();`;
-  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: script } });
+function AppHeader({ identity, homeHref, navItems, actions, className }) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "aria-label": "Application header",
+      className: cn(
+        "flex w-full items-center justify-between gap-4 border-b bg-navbar text-navbar-fg border-navbar-border px-4 py-2.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(
+            Logo,
+            {
+              logoUrl: identity?.logoUrl,
+              logoUrlDark: identity?.logoUrlDark,
+              appTitle: identity?.appTitle,
+              href: homeHref
+            }
+          ),
+          navItems
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: actions })
+      ]
+    }
+  );
 }
-var ThemeToggle = React26.forwardRef(
-  ({ className, ...props }, ref) => {
-    const { resolvedTheme, toggleTheme } = useTheme();
-    const [mounted, setMounted] = React26.useState(false);
-    React26.useEffect(() => {
-      setMounted(true);
-    }, []);
-    const isDark = mounted && resolvedTheme === "dark";
-    const label = isDark ? "Switch to light theme" : "Switch to dark theme";
-    return /* @__PURE__ */ jsx(
-      "button",
+function AppFooter({ variant, footer, identity, className }) {
+  const cfg = footer ?? identity?.footer?.[variant];
+  if (variant === "app") {
+    const links = cfg?.columns?.[0]?.links;
+    return /* @__PURE__ */ jsxs(
+      "footer",
       {
-        type: "button",
-        ref,
-        onClick: toggleTheme,
-        "aria-label": label,
         className: cn(
-          "inline-flex h-9 w-9 items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted 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",
+          "flex w-full items-center justify-between gap-4 border-t bg-footer-app text-footer-app-fg border-footer-app-border px-4 py-2 text-sm",
           className
         ),
-        ...props,
-        children: isDark ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "text-footer-app-fg-muted", children: cfg?.copyright }),
+          links && links.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: links.map((link, i) => /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: safeHref(link.href),
+              className: "text-footer-app-fg-muted hover:text-footer-app-fg",
+              children: link.label
+            },
+            `${link.href}-${i}`
+          )) }) : null
+        ]
       }
     );
   }
-);
-ThemeToggle.displayName = "ThemeToggle";
+  const showBrandRow = Boolean(identity?.logoUrl || identity?.appTitle);
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      className: cn(
+        "w-full border-t bg-footer-public text-footer-public-fg border-footer-public-border px-6 py-10",
+        className
+      ),
+      children: [
+        showBrandRow ? /* @__PURE__ */ jsx("div", { className: "mb-8", children: /* @__PURE__ */ jsx(
+          Logo,
+          {
+            logoUrl: identity?.logoUrl,
+            logoUrlDark: identity?.logoUrlDark,
+            appTitle: identity?.appTitle
+          }
+        ) }) : null,
+        cfg?.columns && cfg.columns.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: cfg.columns.map((column, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          column.heading ? /* @__PURE__ */ jsx("div", { className: "font-medium text-footer-public-fg", children: column.heading }) : null,
+          column.links.map((link, i) => /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: safeHref(link.href),
+              className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+              children: link.label
+            },
+            `${link.href}-${i}`
+          ))
+        ] }, column.heading ?? idx)) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-footer-public-fg-muted", children: cfg?.copyright }),
+          cfg?.social ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            cfg.social.github ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: safeHref(cfg.social.github),
+                className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+                children: "GitHub"
+              }
+            ) : null,
+            cfg.social.twitter ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: safeHref(cfg.social.twitter),
+                className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+                children: "Twitter"
+              }
+            ) : null,
+            cfg.social.linkedin ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: safeHref(cfg.social.linkedin),
+                className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+                children: "LinkedIn"
+              }
+            ) : null,
+            cfg.social.website ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: safeHref(cfg.social.website),
+                className: "text-footer-public-fg-muted hover:text-footer-public-fg",
+                children: "Website"
+              }
+            ) : null
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
 
-export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CELEBRATION_GRADIENT, Calendar, CanvasTextToolbar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CelebrationProvider, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, DateRangeSelector, 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, FunnelChart, HazoContextProvider, HazoThemeProvider, 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, HazoUiEtaProgress, HazoUiFlexInput, HazoUiFlexRadio, HazoUiImageCropper, HazoUiImageCropperDialog, HazoUiKanban, HazoUiKanbanFilter, HazoUiMemoryDropdown, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiProgressBar, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputAffix, InverseSparkline, Label3 as Label, LoadingTimeout, MarkdownEditor, NotificationCountBadge, NotificationItem, NotificationPanel, 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, Slider, Sparkline, Spinner, StackedBars, Switch, Table2 as Table, TableBody, TableCaption, TableCell2 as TableCell, TableFooter, TableHead, TableHeader2 as TableHeader, TableRow2 as TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeScript, ThemeToggle, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyKanbanFilter, buttonGroupVariants, celebrate, cn, computeEta, create_command_suggestion_extension, easeToward, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, median, parse_commands_from_text, pick_x_label_indices, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, set_logger, successToast, text_to_tiptap_content, toggleVariants, upsertEntry as upsertMemoryEntry, useClickOutside, useCopyToClipboard, useDebounce, useErrorDisplay, useEtaProgress, useFullscreen, useIsMobile, useLoadingState, useLocalStorage, useMediaQuery, useSessionStorage, useTheme, useViewport, useWakeLock, use_fullscreen, use_wake_lock };
+export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppFooter, AppHeader, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CELEBRATION_GRADIENT, Calendar, CanvasTextToolbar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CelebrationProvider, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, DateRangeSelector, 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, FunnelChart, HazoContextProvider, 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, HazoUiEtaProgress, HazoUiFlexInput, HazoUiFlexRadio, HazoUiIcon, HazoUiIconPicker, HazoUiImageCropper, HazoUiImageCropperDialog, HazoUiKanban, HazoUiKanbanFilter, HazoUiMemoryDropdown, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiProgressBar, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputAffix, InverseSparkline, Label3 as Label, LoadingTimeout, Logo, MarkdownEditor, NotificationCountBadge, NotificationItem, NotificationPanel, 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, Slider, Sparkline, Spinner, StackedBars, 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, celebrate, cn, computeEta, create_command_suggestion_extension, easeToward, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, isLucideValue, median, parse_commands_from_text, pick_x_label_indices, reset_hazo_ui_config, resolve_animation_classes, safeHref, set_hazo_ui_config, set_logger, successToast, text_to_tiptap_content, toggleVariants, upsertEntry as upsertMemoryEntry, useClickOutside, useCopyToClipboard, useDebounce, useErrorDisplay, useEtaProgress, useFullscreen, useIsMobile, useLoadingState, useLocalStorage, useMediaQuery, useSessionStorage, useViewport, useWakeLock, use_fullscreen, use_wake_lock };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map