@underverse-ui/underverse 0.1.37 → 0.1.38

package/dist/index.cjs

@@ -40,12 +40,14 @@ __export(index_exports, {
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
   ButtonLoading: () => ButtonLoading,
+  Calendar: () => Calendar2,
   Card: () => Card_default,
   Carousel: () => Carousel,
   CategoryTreeSelect: () => CategoryTreeSelect,
   Checkbox: () => Checkbox,
   CircularProgress: () => CircularProgress,
   ClientOnly: () => ClientOnly,
+  ColorPicker: () => ColorPicker,
   Combobox: () => Combobox,
   CompactPagination: () => CompactPagination,
   DataTable: () => DataTable_default,
@@ -71,6 +73,8 @@ __export(index_exports, {
   FormSubmitButton: () => FormSubmitButton,
   GlobalLoading: () => GlobalLoading,
   GradientBadge: () => GradientBadge,
+  Grid: () => Grid_default,
+  GridItem: () => GridItem,
   ImageUpload: () => ImageUpload,
   InlineLoading: () => InlineLoading,
   Input: () => Input_default,
@@ -78,6 +82,8 @@ __export(index_exports, {
   Label: () => Label,
   LanguageSwitcher: () => LanguageSwitcherHeadless,
   LanguageSwitcherHeadless: () => LanguageSwitcherHeadless,
+  List: () => List_default,
+  ListItem: () => ListItem,
   LoadingBar: () => LoadingBar,
   LoadingDots: () => LoadingDots,
   LoadingProgress: () => LoadingProgress,
@@ -136,11 +142,15 @@ __export(index_exports, {
   Textarea: () => Textarea_default,
   ThemeToggle: () => ThemeToggleHeadless,
   ThemeToggleHeadless: () => ThemeToggleHeadless,
+  TimePicker: () => TimePicker,
+  Timeline: () => Timeline_default,
+  TimelineItem: () => TimelineItem,
   ToastProvider: () => Toast_default,
   Tooltip: () => Tooltip,
   VARIANT_STYLES_ALERT: () => VARIANT_STYLES_ALERT,
   VARIANT_STYLES_BTN: () => VARIANT_STYLES_BTN,
   VerticalTabs: () => VerticalTabs,
+  Watermark: () => Watermark_default,
   cn: () => cn,
   getUnderverseMessages: () => getUnderverseMessages,
   underverseMessages: () => underverseMessages,
@@ -5158,7 +5168,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
       document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen]);
-  const isSameDay = (a, b) => {
+  const isSameDay2 = (a, b) => {
     if (!a || !b) return false;
     return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
   };
@@ -5187,24 +5197,24 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     for (let i = 0; i < firstDay; i++) nodes.push(/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-8 h-8" }, `e-${i}`));
     for (let d = 1; d <= daysInMonth; d++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
-      const isSelectedStart = isSameDay(date, tempStart);
-      const isSelectedEnd = isSameDay(date, tempEnd);
+      const isSelectedStart = isSameDay2(date, tempStart);
+      const isSelectedEnd = isSameDay2(date, tempEnd);
       const isHovering = hoveredDate && tempStart && !tempEnd;
       let isInRange = false;
       let isRangeStart = false;
       let isRangeEnd = false;
       if (tempStart && tempEnd) {
-        if (isSameDay(date, tempStart)) isRangeStart = true;
-        if (isSameDay(date, tempEnd)) isRangeEnd = true;
+        if (isSameDay2(date, tempStart)) isRangeStart = true;
+        if (isSameDay2(date, tempEnd)) isRangeEnd = true;
         if (inRange(date, tempStart, tempEnd)) isInRange = true;
       } else if (isHovering) {
         if (hoveredDate > tempStart) {
-          if (isSameDay(date, tempStart)) isRangeStart = true;
-          if (isSameDay(date, hoveredDate)) isRangeEnd = true;
+          if (isSameDay2(date, tempStart)) isRangeStart = true;
+          if (isSameDay2(date, hoveredDate)) isRangeEnd = true;
           if (inRange(date, tempStart, hoveredDate)) isInRange = true;
         } else {
-          if (isSameDay(date, hoveredDate)) isRangeStart = true;
-          if (isSameDay(date, tempStart)) isRangeEnd = true;
+          if (isSameDay2(date, hoveredDate)) isRangeStart = true;
+          if (isSameDay2(date, tempStart)) isRangeEnd = true;
           if (inRange(date, hoveredDate, tempStart)) isInRange = true;
         }
       }
@@ -5316,12 +5326,610 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
   ] });
 };
 
-// ../../components/ui/MultiCombobox.tsx
+// ../../components/ui/TimePicker.tsx
 var React22 = __toESM(require("react"), 1);
-var import_react15 = require("react");
-var import_react_dom8 = require("react-dom");
 var import_lucide_react15 = require("lucide-react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
+var pad = (n) => n.toString().padStart(2, "0");
+function parseTime(input, fmt = "24", includeSeconds) {
+  if (!input) return null;
+  const s = input.trim().toUpperCase();
+  const ampm = s.endsWith("AM") || s.endsWith("PM");
+  const clean = s.replace(/\s*(AM|PM)\s*$/, "");
+  const segs = clean.split(":");
+  const h = Number(segs[0]);
+  const m = Number(segs[1] ?? 0);
+  const sec = Number(segs[2] ?? 0);
+  if (Number.isNaN(h) || Number.isNaN(m) || Number.isNaN(sec)) return null;
+  if (fmt === "12" || ampm) {
+    const p = s.endsWith("PM") ? "PM" : "AM";
+    return { h: Math.max(1, Math.min(12, h)), m: Math.max(0, Math.min(59, m)), s: Math.max(0, Math.min(59, sec)), p };
+  }
+  return { h: Math.max(0, Math.min(23, h)), m: Math.max(0, Math.min(59, m)), s: Math.max(0, Math.min(59, sec)) };
+}
+function formatTime2({ h, m, s, p }, fmt, includeSeconds) {
+  if (fmt === "12") {
+    const period = p || (h >= 12 ? "PM" : "AM");
+    const hr12 = h % 12 === 0 ? 12 : h % 12;
+    const base2 = `${pad(hr12)}:${pad(m)}`;
+    return includeSeconds ? `${base2}:${pad(s)} ${period}` : `${base2} ${period}`;
+  }
+  const base = `${pad(h)}:${pad(m)}`;
+  return includeSeconds ? `${base}:${pad(s)}` : base;
+}
+var PRESETS = {
+  morning: { h: 9, m: 0, s: 0 },
+  afternoon: { h: 14, m: 0, s: 0 },
+  evening: { h: 18, m: 0, s: 0 },
+  night: { h: 21, m: 0, s: 0 }
+};
+function TimePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Select time",
+  disabled = false,
+  size = "md",
+  label,
+  required,
+  format = "24",
+  includeSeconds = false,
+  minuteStep = 5,
+  secondStep = 5,
+  clearable = true,
+  variant = "default",
+  showNow = false,
+  showPresets = false,
+  allowManualInput = false,
+  className,
+  ...rest
+}) {
+  const isControlled = value !== void 0;
+  const now = /* @__PURE__ */ new Date();
+  const initial = parseTime(isControlled ? value : defaultValue, format, includeSeconds) || (format === "12" ? { h: now.getHours() % 12 || 12, m: now.getMinutes(), s: now.getSeconds(), p: now.getHours() >= 12 ? "PM" : "AM" } : { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() });
+  const [open, setOpen] = React22.useState(false);
+  const [parts, setParts] = React22.useState(initial);
+  const [manualInput, setManualInput] = React22.useState("");
+  React22.useEffect(() => {
+    if (isControlled) {
+      const parsed = parseTime(value, format, includeSeconds);
+      if (parsed) setParts(parsed);
+    }
+  }, [value, isControlled, format, includeSeconds]);
+  const emit = (next) => {
+    onChange?.(next ? formatTime2(next, format, includeSeconds) : void 0);
+  };
+  const setNow = () => {
+    const now2 = /* @__PURE__ */ new Date();
+    const h = now2.getHours();
+    const m = now2.getMinutes();
+    const s = now2.getSeconds();
+    let next;
+    if (format === "12") {
+      next = { h: h % 12 || 12, m, s, p: h >= 12 ? "PM" : "AM" };
+    } else {
+      next = { h, m, s };
+    }
+    setParts(next);
+    emit(next);
+  };
+  const setPreset = (preset) => {
+    const { h, m, s } = PRESETS[preset];
+    let next;
+    if (format === "12") {
+      next = { h: h % 12 || 12, m, s, p: h >= 12 ? "PM" : "AM" };
+    } else {
+      next = { h, m, s };
+    }
+    setParts(next);
+    emit(next);
+  };
+  const handleManualInput = (input) => {
+    setManualInput(input);
+    const parsed = parseTime(input, format, includeSeconds);
+    if (parsed) {
+      setParts(parsed);
+      emit(parsed);
+    }
+  };
+  const hours = format === "24" ? Array.from({ length: 24 }, (_, i) => i) : Array.from({ length: 12 }, (_, i) => i + 1);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => Math.min(59, i * minuteStep));
+  const seconds = Array.from({ length: Math.ceil(60 / secondStep) }, (_, i) => Math.min(59, i * secondStep));
+  const sizeClasses2 = {
+    sm: { label: "text-xs", height: "h-8", padding: "px-2.5 py-1.5", text: "text-xs", icon: "w-3.5 h-3.5" },
+    md: { label: "text-sm", height: "h-10", padding: "px-3 py-2", text: "text-sm", icon: "w-4 h-4" },
+    lg: { label: "text-base", height: "h-12", padding: "px-4 py-3", text: "text-base", icon: "w-5 h-5" }
+  };
+  const sz = sizeClasses2[size];
+  const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
+  const display = formatTime2(parts, format, includeSeconds);
+  const trigger = variant === "inline" ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "flex w-full items-center justify-between border border-input bg-background",
+        sz.height,
+        sz.padding,
+        sz.text,
+        radiusClass,
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "hover:bg-accent/5 transition-colors",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Clock, { className: cn(sz.icon, "text-muted-foreground") }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("truncate", !value && !defaultValue && "text-muted-foreground"), children: value || defaultValue ? display : placeholder })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("ml-2 transition-transform", open && "rotate-180"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
+      ]
+    }
+  );
+  const contentWidth = variant === "compact" ? 240 : variant === "inline" ? 320 : includeSeconds ? 340 : 300;
+  const timePickerContent = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "space-y-3", children: [
+    allowManualInput && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      Input_default,
+      {
+        placeholder: format === "12" ? "02:30 PM" : "14:30",
+        value: manualInput || display,
+        onChange: (e) => handleManualInput(e.target.value),
+        size: "sm",
+        variant: "outlined"
+      }
+    ) }),
+    showPresets && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-2 gap-2", children: Object.keys(PRESETS).map((preset) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "px-2 py-1.5 text-xs rounded-md border border-border hover:bg-accent/10 capitalize transition-colors",
+        onClick: () => setPreset(preset),
+        children: preset
+      },
+      preset
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[60px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Hour" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: hours.map((h) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "w-full text-center px-2 py-1.5 rounded-md hover:bg-accent transition-colors text-sm",
+              (format === "24" && parts.h === h || format === "12" && (parts.h % 12 || 12) === (h % 12 || 12)) && "bg-primary text-primary-foreground font-semibold"
+            ),
+            onClick: () => {
+              const nextH = format === "24" ? h : (parts.p === "PM" ? h % 12 + 12 : h % 12) % 24;
+              const next = { ...parts, h: format === "24" ? h : nextH === 0 && parts.p === "AM" ? 0 : nextH || (parts.p === "PM" ? 12 : 0) };
+              setParts(next);
+              emit(next);
+            },
+            children: pad(h)
+          },
+          h
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[60px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Min" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: minutes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "w-full text-center px-2 py-1.5 rounded-md hover:bg-accent transition-colors text-sm",
+              parts.m === m && "bg-primary text-primary-foreground font-semibold"
+            ),
+            onClick: () => {
+              const next = { ...parts, m };
+              setParts(next);
+              emit(next);
+            },
+            children: pad(m)
+          },
+          m
+        )) })
+      ] }),
+      includeSeconds && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[60px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Sec" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: seconds.map((s) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "w-full text-center px-2 py-1.5 rounded-md hover:bg-accent transition-colors text-sm",
+              parts.s === s && "bg-primary text-primary-foreground font-semibold"
+            ),
+            onClick: () => {
+              const next = { ...parts, s };
+              setParts(next);
+              emit(next);
+            },
+            children: pad(s)
+          },
+          s
+        )) })
+      ] }),
+      format === "12" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-20", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Period" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-1.5", children: ["AM", "PM"].map((p) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "px-3 py-2 rounded-md hover:bg-accent transition-colors text-sm font-medium",
+              parts.p === p && "bg-primary text-primary-foreground"
+            ),
+            onClick: () => {
+              const pVal = p;
+              let hour = parts.h;
+              if (pVal === "AM" && hour >= 12) hour -= 12;
+              if (pVal === "PM" && hour < 12) hour += 12;
+              const next = { ...parts, p: pVal, h: hour };
+              setParts(next);
+              emit(next);
+            },
+            children: p
+          },
+          p
+        )) })
+      ] })
+    ] }),
+    (showNow || clearable) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between gap-2 pt-2 border-t border-border", children: [
+      showNow && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "px-3 py-1.5 text-xs rounded-md border border-border hover:bg-accent/10 transition-colors flex items-center gap-1.5",
+          onClick: () => {
+            setNow();
+            if (variant === "compact") setOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Clock, { className: "w-3 h-3" }),
+            "Now"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1" }),
+      clearable && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "px-3 py-1.5 text-xs rounded-md border border-border hover:bg-destructive/10 transition-colors flex items-center gap-1.5",
+          onClick: () => {
+            setParts(initial);
+            emit(void 0);
+            setOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.X, { className: "w-3 h-3" }),
+            "Clear"
+          ]
+        }
+      )
+    ] })
+  ] });
+  if (variant === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full", ...rest, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground"), children: [
+        label,
+        required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("p-3 rounded-lg border border-border bg-card shadow-sm", className), children: timePickerContent })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full", ...rest, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground"), onClick: () => !disabled && setOpen(true), children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      Popover,
+      {
+        trigger,
+        open,
+        onOpenChange: (o) => setOpen(o),
+        placement: "bottom-start",
+        matchTriggerWidth: variant === "compact",
+        contentWidth,
+        contentClassName: cn("p-3 rounded-lg border border-border bg-popover shadow-lg backdrop-blur-sm bg-popover/95"),
+        children: timePickerContent
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/Calendar.tsx
+var React23 = __toESM(require("react"), 1);
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function startOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function endOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth() + 1, 0);
+}
+function addMonths(d, n) {
+  const nd = new Date(d);
+  nd.setMonth(d.getMonth() + n);
+  return nd;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function toDate(x) {
+  return x instanceof Date ? x : new Date(x);
+}
+function addDays(d, n) {
+  const nd = new Date(d);
+  nd.setDate(d.getDate() + n);
+  return nd;
+}
+function startOfWeek(d, weekStartsOn) {
+  const day = d.getDay();
+  const diff = (day - weekStartsOn + 7) % 7;
+  const s = new Date(d);
+  s.setDate(d.getDate() - diff);
+  return new Date(s.getFullYear(), s.getMonth(), s.getDate());
+}
+function getMonthGrid(view, weekStartsOn) {
+  const start = startOfMonth(view);
+  const end = endOfMonth(view);
+  const startDay = (start.getDay() - weekStartsOn + 7) % 7;
+  const days = [];
+  for (let i = 0; i < startDay; i++) {
+    const d = new Date(start);
+    d.setDate(d.getDate() - (startDay - i));
+    days.push(d);
+  }
+  for (let d = 1; d <= end.getDate(); d++) {
+    days.push(new Date(view.getFullYear(), view.getMonth(), d));
+  }
+  while (days.length % 7 !== 0) {
+    const last = days[days.length - 1];
+    const next = new Date(last);
+    next.setDate(last.getDate() + 1);
+    days.push(next);
+  }
+  return days;
+}
+function Calendar2({
+  month,
+  defaultMonth,
+  onMonthChange,
+  value,
+  defaultValue,
+  onSelect,
+  selectMode = "single",
+  weekStartsOn = 0,
+  showWeekdays = true,
+  showHeader = true,
+  size = "md",
+  variant = "default",
+  events = [],
+  renderDay,
+  labels,
+  className,
+  display = "month",
+  months = 1,
+  showToday = false,
+  showClear = false,
+  minDate,
+  maxDate,
+  disabledDates,
+  dense = false,
+  animate = false,
+  showEventBadges = false,
+  highlightWeekends = false,
+  ...rest
+}) {
+  const isControlledMonth = month != null;
+  const [view, setView] = React23.useState(() => month ?? defaultMonth ?? /* @__PURE__ */ new Date());
+  React23.useEffect(() => {
+    if (isControlledMonth && month) setView(month);
+  }, [isControlledMonth, month]);
+  const isControlledValue = value !== void 0;
+  const [internal, setInternal] = React23.useState(defaultValue);
+  const selected = isControlledValue ? value : internal;
+  const goByView = (delta) => {
+    const next = display === "week" ? addDays(view, delta * 7) : addMonths(view, delta);
+    if (!isControlledMonth) setView(next);
+    if (display === "month") onMonthChange?.(next);
+  };
+  const weekNames = labels?.weekdays ?? ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const rotate = (arr, n) => arr.slice(n).concat(arr.slice(0, n));
+  const weekdays = rotate(weekNames, weekStartsOn);
+  const days = getMonthGrid(view, weekStartsOn);
+  const today = /* @__PURE__ */ new Date();
+  const byDay = React23.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const e of events) {
+      const d = toDate(e.date);
+      const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+      if (!map.has(k)) map.set(k, []);
+      map.get(k).push(e);
+    }
+    return map;
+  }, [events]);
+  const isSelected = (d) => {
+    if (!selected) return false;
+    if (selectMode === "single" && selected instanceof Date) return isSameDay(selected, d);
+    if (selectMode === "multiple" && Array.isArray(selected)) return selected.some((x) => isSameDay(x, d));
+    if (selectMode === "range" && !Array.isArray(selected) && typeof selected === "object") {
+      const s = selected.start;
+      const e = selected.end;
+      if (s && e) return d >= new Date(s.getFullYear(), s.getMonth(), s.getDate()) && d <= new Date(e.getFullYear(), e.getMonth(), e.getDate());
+      if (s) return isSameDay(s, d);
+      if (e) return isSameDay(e, d);
+    }
+    return false;
+  };
+  const commit = (next) => {
+    if (!isControlledValue) setInternal(next);
+    onSelect?.(next);
+  };
+  const handleClickDay = (d) => {
+    if (selectMode === "single") {
+      commit(d);
+      return;
+    }
+    if (selectMode === "multiple") {
+      const arr = Array.isArray(selected) ? selected : [];
+      const exists = arr.some((x) => isSameDay(x, d));
+      const next = exists ? arr.filter((x) => !isSameDay(x, d)) : [...arr, d];
+      commit(next);
+      return;
+    }
+    if (selectMode === "range") {
+      const cur = !Array.isArray(selected) && typeof selected === "object" ? selected : {};
+      const s = cur.start;
+      const e = cur.end;
+      if (!s || s && e) {
+        commit({ start: d, end: void 0 });
+      } else if (s && !e) {
+        if (d < s) commit({ start: d, end: s });
+        else commit({ start: s, end: d });
+      }
+    }
+  };
+  const isDateDisabled = React23.useCallback((d) => {
+    if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
+    if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
+    if (Array.isArray(disabledDates)) {
+      return disabledDates.some((dd) => isSameDay(dd, d));
+    }
+    if (typeof disabledDates === "function") {
+      return disabledDates(d);
+    }
+    return false;
+  }, [minDate, maxDate, disabledDates]);
+  const SIZE_STYLES3 = {
+    sm: { day: "w-8 h-8 text-[12px]", grid: dense ? "gap-0.5" : "gap-1", head: "text-[11px]", header: "text-sm" },
+    md: { day: "w-9 h-9 text-sm", grid: dense ? "gap-1" : "gap-1.5", head: "text-xs", header: "text-sm" },
+    lg: { day: "w-11 h-11 text-base", grid: dense ? "gap-1.5" : "gap-2", head: "text-sm", header: "text-base" },
+    xl: { day: "w-14 h-14 text-lg", grid: dense ? "gap-2" : "gap-2.5", head: "text-base", header: "text-lg" }
+  };
+  const sz = SIZE_STYLES3[size];
+  const VARIANT_STYLES2 = {
+    default: "border border-border rounded-lg bg-card",
+    bordered: "border-2 border-border rounded-xl bg-card shadow-sm",
+    card: "border border-border rounded-xl bg-card shadow-lg",
+    minimal: "bg-transparent"
+  };
+  const weekDays = React23.useMemo(() => {
+    const s = startOfWeek(view, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => addDays(s, i));
+  }, [view, weekStartsOn]);
+  const renderMonth = (monthDate) => {
+    const monthDays = getMonthGrid(monthDate, weekStartsOn);
+    const monthLabel = labels?.month ? labels.month(monthDate) : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+      months > 1 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center justify-center mb-2 text-sm font-semibold", children: monthLabel }),
+      showWeekdays && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(sz.head), children: w }, `${monthLabel}-${w}`)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("grid grid-cols-7", sz.grid), children: monthDays.map((d, idx) => {
+        const inMonth = d.getMonth() === monthDate.getMonth();
+        const isToday2 = isSameDay(d, today);
+        const selectedDay = isSelected(d);
+        const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+        const dayEvents = byDay.get(k) || [];
+        const disabled = isDateDisabled(d);
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          "button",
+          {
+            onClick: () => handleClickDay(d),
+            disabled,
+            className: cn(
+              "rounded-md flex items-center justify-center relative",
+              sz.day,
+              !inMonth && "text-muted-foreground/60",
+              disabled && "opacity-40 cursor-not-allowed",
+              isToday2 && !selectedDay && "ring-1 ring-primary/50",
+              selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
+              !selectedDay && "hover:bg-accent"
+            ),
+            title: d.toDateString(),
+            children: [
+              d.getDate(),
+              dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
+            ]
+          },
+          `${monthLabel}-${idx}`
+        );
+      }) })
+    ] });
+  };
+  const minBound = React23.useMemo(() => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()) : void 0, [minDate]);
+  const maxBound = React23.useMemo(() => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()) : void 0, [maxDate]);
+  const prevDisabled = React23.useMemo(() => {
+    if (!minBound) return false;
+    if (display === "week") {
+      const start = startOfWeek(view, weekStartsOn);
+      const prevEnd2 = addDays(start, -1);
+      return prevEnd2 < minBound;
+    }
+    const prevEnd = endOfMonth(addMonths(view, -1));
+    return prevEnd < minBound;
+  }, [display, view, weekStartsOn, minBound]);
+  const nextDisabled = React23.useMemo(() => {
+    if (!maxBound) return false;
+    if (display === "week") {
+      const start = startOfWeek(view, weekStartsOn);
+      const nextStart2 = addDays(start, 7);
+      return nextStart2 > maxBound;
+    }
+    const nextStart = startOfMonth(addMonths(view, 1));
+    return nextStart > maxBound;
+  }, [display, view, weekStartsOn, maxBound]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full", className), ...rest, children: [
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { onClick: () => goByView(-1), disabled: prevDisabled, className: cn("p-1 rounded-md hover:bg-accent", prevDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.prev || (display === "week" ? "Previous week" : "Previous month"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.ChevronLeft, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-sm font-semibold", children: display === "week" ? `${labels?.month ? labels.month(weekDays[0]) : weekDays[0].toLocaleDateString("en-US", { month: "short" })} ${weekDays[0].getDate()} \u2013 ${labels?.month ? labels.month(weekDays[6]) : weekDays[6].toLocaleDateString("en-US", { month: "short" })} ${weekDays[6].getDate()}` : labels?.month ? labels.month(view) : view.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { onClick: () => goByView(1), disabled: nextDisabled, className: cn("p-1 rounded-md hover:bg-accent", nextDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.next || (display === "week" ? "Next week" : "Next month"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.ChevronRight, { className: "h-4 w-4" }) })
+    ] }),
+    display === "week" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      showWeekdays && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(sz.head), children: w }, `w-${w}`)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("grid grid-cols-7", sz.grid), children: weekDays.map((d, idx) => {
+        const inMonth = true;
+        const isToday2 = isSameDay(d, today);
+        const selectedDay = isSelected(d);
+        const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+        const dayEvents = byDay.get(k) || [];
+        const disabled = isDateDisabled(d);
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          "button",
+          {
+            onClick: () => handleClickDay(d),
+            disabled,
+            className: cn(
+              "rounded-md flex items-center justify-center relative",
+              sz.day,
+              disabled && "opacity-40 cursor-not-allowed",
+              isToday2 && !selectedDay && "ring-1 ring-primary/50",
+              selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
+              !selectedDay && "hover:bg-accent"
+            ),
+            title: d.toDateString(),
+            children: [
+              d.getDate(),
+              dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
+            ]
+          },
+          `wd-${idx}`
+        );
+      }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React23.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) })
+  ] });
+}
+
+// ../../components/ui/MultiCombobox.tsx
+var React24 = __toESM(require("react"), 1);
+var import_react15 = require("react");
+var import_react_dom8 = require("react-dom");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var MultiCombobox = ({
   id,
   options,
@@ -5340,15 +5948,15 @@ var MultiCombobox = ({
   required,
   displayFormat = (option) => option.label
 }) => {
-  const [query, setQuery] = React22.useState("");
-  const [open, setOpen] = React22.useState(false);
-  const [activeIndex, setActiveIndex] = React22.useState(null);
-  const inputRef = React22.useRef(null);
-  const listRef = React22.useRef([]);
-  const [dropdownPosition, setDropdownPosition] = React22.useState(null);
-  const triggerRef = React22.useRef(null);
+  const [query, setQuery] = React24.useState("");
+  const [open, setOpen] = React24.useState(false);
+  const [activeIndex, setActiveIndex] = React24.useState(null);
+  const inputRef = React24.useRef(null);
+  const listRef = React24.useRef([]);
+  const [dropdownPosition, setDropdownPosition] = React24.useState(null);
+  const triggerRef = React24.useRef(null);
   useShadCNAnimations();
-  const calculatePosition = React22.useCallback(() => {
+  const calculatePosition = React24.useCallback(() => {
     if (!triggerRef.current) return null;
     const rect = triggerRef.current.getBoundingClientRect();
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
@@ -5359,7 +5967,7 @@ var MultiCombobox = ({
       width: rect.width
     };
   }, []);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (!open) return;
     const handler = () => {
       const pos = calculatePosition();
@@ -5372,7 +5980,7 @@ var MultiCombobox = ({
       window.removeEventListener("scroll", handler, true);
     };
   }, [open, calculatePosition]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -5395,12 +6003,12 @@ var MultiCombobox = ({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [open]);
-  const normalizedOptions = React22.useMemo(
+  const normalizedOptions = React24.useMemo(
     () => options.map((o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label }),
     [options]
   );
   const enableSearch = normalizedOptions.length > 10;
-  const filtered = React22.useMemo(
+  const filtered = React24.useMemo(
     () => enableSearch ? normalizedOptions.filter((opt) => opt.label.toLowerCase().includes(query.toLowerCase())) : normalizedOptions,
     [normalizedOptions, query, enableSearch]
   );
@@ -5429,7 +6037,7 @@ var MultiCombobox = ({
   const handleClearAll = () => {
     onChange([]);
   };
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (open && enableSearch) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -5463,8 +6071,8 @@ var MultiCombobox = ({
   const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("w-full space-y-2 group", className), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-full space-y-2 group", className), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "label",
       {
         className: cn(
@@ -5474,11 +6082,11 @@ var MultiCombobox = ({
         ),
         children: [
           title,
-          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "label",
       {
         id: labelId,
@@ -5490,12 +6098,12 @@ var MultiCombobox = ({
         ),
         children: [
           label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative w-full" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "relative w-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -5518,11 +6126,11 @@ var MultiCombobox = ({
           "disabled:cursor-not-allowed disabled:opacity-50"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
             const option = normalizedOptions.find((o) => o.value === itemValue);
-            return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "span",
                 {
                   role: "button",
@@ -5545,16 +6153,16 @@ var MultiCombobox = ({
                 }
               )
             ] }, itemValue);
-          }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "truncate text-sm", children: [
+          }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "truncate text-sm", children: [
             value.length,
             " selected"
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.ChevronDown, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.ChevronDown, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
         ]
       }
     ),
     open && dropdownPosition && typeof window !== "undefined" ? (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           "data-dropdown": "multicombobox",
@@ -5571,7 +6179,7 @@ var MultiCombobox = ({
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "div",
             {
               className: cn(
@@ -5579,7 +6187,7 @@ var MultiCombobox = ({
                 "backdrop-blur-sm bg-popover/95 border-border/60"
               ),
               children: [
-                showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5592,9 +6200,9 @@ var MultiCombobox = ({
                     children: "Clear all"
                   }
                 ) }),
-                enableSearch && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative border-b border-border/60", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Search, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                enableSearch && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative border-b border-border/60", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Search, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     "input",
                     {
                       ref: inputRef,
@@ -5609,10 +6217,10 @@ var MultiCombobox = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
                   const isSelected = value.includes(item.value);
                   const isDisabled = disabledOptions.includes(item.value);
-                  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                     "li",
                     {
                       ref: (node) => {
@@ -5636,12 +6244,12 @@ var MultiCombobox = ({
                       ),
                       children: [
                         item.label,
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Check, { className: sizeStyles8[size].icon })
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Check, { className: sizeStyles8[size].icon })
                       ]
                     },
                     item.value
                   );
-                }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
+                }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
               ]
             }
           )
@@ -5653,17 +6261,17 @@ var MultiCombobox = ({
 };
 
 // ../../components/ui/RadioGroup.tsx
-var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var RadioGroupContext = React23.createContext(void 0);
+var React25 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var RadioGroupContext = React25.createContext(void 0);
 var useRadioGroup = () => {
-  const context = React23.useContext(RadioGroupContext);
+  const context = React25.useContext(RadioGroupContext);
   if (!context) {
     throw new Error("RadioGroupItem must be used within a RadioGroup");
   }
   return context;
 };
-var RadioGroup = React23.forwardRef(
+var RadioGroup = React25.forwardRef(
   ({
     value,
     defaultValue,
@@ -5679,7 +6287,7 @@ var RadioGroup = React23.forwardRef(
     error = false,
     errorMessage
   }, ref) => {
-    const [internalValue, setInternalValue] = React23.useState(defaultValue || "");
+    const [internalValue, setInternalValue] = React25.useState(defaultValue || "");
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const handleValueChange = (newValue) => {
@@ -5690,9 +6298,9 @@ var RadioGroup = React23.forwardRef(
         onValueChange?.(newValue);
       }
     };
-    const uniqueId = React23.useId();
+    const uniqueId = React25.useId();
     const radioName = name || `radio-group-${uniqueId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       RadioGroupContext.Provider,
       {
         value: {
@@ -5703,8 +6311,8 @@ var RadioGroup = React23.forwardRef(
           size,
           variant
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               ref,
@@ -5721,7 +6329,7 @@ var RadioGroup = React23.forwardRef(
               children
             }
           ),
-          error && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-destructive mt-1", children: errorMessage })
+          error && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-destructive mt-1", children: errorMessage })
         ] })
       }
     );
@@ -5748,7 +6356,7 @@ var sizeStyles7 = {
     padding: "p-4"
   }
 };
-var RadioGroupItem = React23.forwardRef(
+var RadioGroupItem = React25.forwardRef(
   ({ value, id, disabled, className, children, label, description, icon }, ref) => {
     const {
       value: selectedValue,
@@ -5763,7 +6371,7 @@ var RadioGroupItem = React23.forwardRef(
     const Icon = icon;
     const radioId = id || `radio-${value}`;
     if (variant === "card") {
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "div",
         {
           className: cn(
@@ -5775,8 +6383,8 @@ var RadioGroupItem = React23.forwardRef(
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-start gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "button",
                 {
                   ref,
@@ -5795,22 +6403,22 @@ var RadioGroupItem = React23.forwardRef(
                     sizeStyles7[size].radio
                   ),
                   onClick: () => onValueChange?.(value),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "span",
                     {
                       className: cn(
                         "flex items-center justify-center w-full h-full rounded-full transition-all duration-200",
                         isSelected && "bg-primary"
                       ),
-                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
+                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "h-4 w-4 text-foreground" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  Icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { className: "h-4 w-4 text-foreground" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "label",
                     {
                       htmlFor: radioId,
@@ -5822,10 +6430,10 @@ var RadioGroupItem = React23.forwardRef(
                     }
                   )
                 ] }),
-                description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
+                description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "input",
               {
                 type: "radio",
@@ -5843,7 +6451,7 @@ var RadioGroupItem = React23.forwardRef(
       );
     }
     if (variant === "button") {
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "button",
         {
           ref,
@@ -5865,9 +6473,9 @@ var RadioGroupItem = React23.forwardRef(
           ),
           onClick: () => onValueChange?.(value),
           children: [
-            Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "h-4 w-4" }),
+            Icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { className: "h-4 w-4" }),
             label || children,
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "input",
               {
                 type: "radio",
@@ -5884,8 +6492,8 @@ var RadioGroupItem = React23.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           ref,
@@ -5904,19 +6512,19 @@ var RadioGroupItem = React23.forwardRef(
             sizeStyles7[size].radio
           ),
           onClick: () => onValueChange?.(value),
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               className: cn(
                 "flex items-center justify-center w-full h-full rounded-full transition-all duration-200",
                 isSelected && "bg-primary"
               ),
-              children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
+              children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
             }
           )
         }
       ),
-      (label || children) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      (label || children) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "label",
         {
           htmlFor: radioId,
@@ -5927,15 +6535,15 @@ var RadioGroupItem = React23.forwardRef(
             isDisabled && "cursor-not-allowed opacity-50"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
-              Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label || children })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
+              Icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: label || children })
             ] }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-muted-foreground mt-0.5 text-xs", children: description })
+            description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-muted-foreground mt-0.5 text-xs", children: description })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "input",
         {
           type: "radio",
@@ -5954,8 +6562,8 @@ var RadioGroupItem = React23.forwardRef(
 RadioGroupItem.displayName = "RadioGroupItem";
 
 // ../../components/ui/Slider.tsx
-var React24 = __toESM(require("react"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var React26 = __toESM(require("react"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var SIZE_STYLES = {
   sm: {
     track: "h-1",
@@ -5973,7 +6581,7 @@ var SIZE_STYLES = {
     container: "py-3"
   }
 };
-var Slider = React24.forwardRef(
+var Slider = React26.forwardRef(
   ({
     className,
     value,
@@ -5999,7 +6607,7 @@ var Slider = React24.forwardRef(
     noFocus = false,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React24.useState(defaultValue);
+    const [internalValue, setInternalValue] = React26.useState(defaultValue);
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const handleChange = (e) => {
@@ -6015,20 +6623,20 @@ var Slider = React24.forwardRef(
     const displayValue = formatValue ? formatValue(currentValue) : currentValue.toString();
     if (orientation === "vertical") {
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-full space-y-2", containerClassName), children: [
-      (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-[2rem] text-right", valueClassName), children: displayValue })
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("w-full space-y-2", containerClassName), children: [
+      (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-[2rem] text-right", valueClassName), children: displayValue })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: "absolute left-0 top-0 h-full bg-primary rounded-full transition-all duration-150 ease-out",
             style: { width: `${percentage}%` }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "input",
           {
             ref,
@@ -6092,9 +6700,9 @@ var Slider = React24.forwardRef(
 Slider.displayName = "Slider";
 
 // ../../components/ui/OverlayControls.tsx
-var import_lucide_react16 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 var import_react16 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function OverlayControls({
   mode,
   value,
@@ -6297,7 +6905,7 @@ function OverlayControls({
     playing,
     muted
   ]);
-  const formatTime2 = (sec) => {
+  const formatTime3 = (sec) => {
     if (!isFinite(sec) || sec < 0) return "0:00";
     const h = Math.floor(sec / 3600);
     const m = Math.floor(sec % 3600 / 60);
@@ -6317,41 +6925,41 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    keyboardFeedback && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    keyboardFeedback && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         className: cn(
           "absolute inset-0 flex items-center pointer-events-none z-50",
           keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) > 0 ? "justify-end pr-32" : keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) < 0 ? "justify-start pl-32" : "justify-center"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "bg-black/50 backdrop-blur-sm rounded-xl px-6 py-4 shadow-xl border border-white/10 animate-in fade-in zoom-in duration-200", children: [
-          keyboardFeedback.type === "play" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Play, { className: "w-16 h-16 text-white", fill: "white" }),
-          keyboardFeedback.type === "pause" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Pause, { className: "w-16 h-16 text-white", fill: "white" }),
-          keyboardFeedback.type === "seek" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-3", children: [
-            (keyboardFeedback.value ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.RotateCw, { className: "w-12 h-12 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.RotateCcw, { className: "w-12 h-12 text-white" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-3xl font-bold text-white", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "bg-black/50 backdrop-blur-sm rounded-xl px-6 py-4 shadow-xl border border-white/10 animate-in fade-in zoom-in duration-200", children: [
+          keyboardFeedback.type === "play" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Play, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "pause" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Pause, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "seek" && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-3", children: [
+            (keyboardFeedback.value ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.RotateCw, { className: "w-12 h-12 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.RotateCcw, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-3xl font-bold text-white", children: [
               keyboardFeedback.value && keyboardFeedback.value > 0 ? "+" : "",
               keyboardFeedback.value,
               "s"
             ] })
           ] }),
-          keyboardFeedback.type === "volume" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Volume2, { className: "w-12 h-12 text-white" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-2xl font-bold text-white", children: [
+          keyboardFeedback.type === "volume" && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Volume2, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-2xl font-bold text-white", children: [
                 keyboardFeedback.value,
                 "%"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-32 h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-full bg-white rounded-full transition-all", style: { width: `${keyboardFeedback.value}%` } }) })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-32 h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-full bg-white rounded-full transition-all", style: { width: `${keyboardFeedback.value}%` } }) })
             ] })
           ] }),
-          keyboardFeedback.type === "mute" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.VolumeX, { className: "w-16 h-16 text-white" }),
-          keyboardFeedback.type === "unmute" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Volume2, { className: "w-16 h-16 text-white" })
+          keyboardFeedback.type === "mute" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.VolumeX, { className: "w-16 h-16 text-white" }),
+          keyboardFeedback.type === "unmute" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Volume2, { className: "w-16 h-16 text-white" })
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         className: cn(
@@ -6360,9 +6968,9 @@ function OverlayControls({
           autoHide && !controlsVisible && "opacity-0 pointer-events-none",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ref: sliderRef, onMouseMove: handleSliderMouseMove, onMouseLeave: handleSliderMouseLeave, className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "px-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref: sliderRef, onMouseMove: handleSliderMouseMove, onMouseLeave: handleSliderMouseLeave, className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               Slider,
               {
                 min: 0,
@@ -6387,14 +6995,14 @@ function OverlayControls({
                 noFocus: true
               }
             ),
-            previewData && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime2(previewData.time) })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-xs font-mono text-center", children: formatTime2(previewData.time) }) }) })
+            previewData && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime3(previewData.time) })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs font-mono text-center", children: formatTime3(previewData.time) }) }) })
           ] }),
-          showControlsBar && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          showControlsBar && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6402,10 +7010,10 @@ function OverlayControls({
                   onClick: onTogglePlay,
                   title: playing ? "T\u1EA1m d\u1EEBng" : "Ph\xE1t",
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: playing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Play, { className: "w-4 h-4" })
+                  children: playing ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Play, { className: "w-4 h-4" })
                 }
               ),
-              onSkip && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              onSkip && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6413,10 +7021,10 @@ function OverlayControls({
                   onClick: () => onSkip(-skipSeconds),
                   title: `L\xF9i ${skipSeconds}s`,
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.RotateCcw, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.RotateCcw, { className: "w-4 h-4" })
                 }
               ),
-              onSkip && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              onSkip && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6424,16 +7032,16 @@ function OverlayControls({
                   onClick: () => onSkip(skipSeconds),
                   title: `Tua ${skipSeconds}s`,
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.RotateCw, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.RotateCw, { className: "w-4 h-4" })
                 }
               ),
-              (showTime ?? true) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "px-3 py-1 rounded-full text-xs font-mono bg-background/60 text-foreground shadow-sm border border-border whitespace-nowrap", children: [
-                formatTime2(dragValue),
+              (showTime ?? true) && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "px-3 py-1 rounded-full text-xs font-mono bg-background/60 text-foreground shadow-sm border border-border whitespace-nowrap", children: [
+                formatTime3(dragValue),
                 " / ",
-                formatTime2(max)
+                formatTime3(max)
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -6441,10 +7049,10 @@ function OverlayControls({
                     onClick: onToggleMute,
                     title: muted ? "B\u1EADt ti\u1EBFng" : "T\u1EAFt ti\u1EBFng",
                     className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                    children: muted || (volume ?? 1) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.VolumeX, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Volume2, { className: "w-4 h-4" })
+                    children: muted || (volume ?? 1) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.VolumeX, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Volume2, { className: "w-4 h-4" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-24", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-24", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   Slider,
                   {
                     min: 0,
@@ -6459,8 +7067,8 @@ function OverlayControls({
                 ) })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 relative", children: [
-              onGoLive && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 relative", children: [
+              onGoLive && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6469,13 +7077,13 @@ function OverlayControls({
                   title: "Tr\u1EF1c ti\u1EBFp (v\u1EC1 Live)",
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Dot, { className: "w-10 h-10 text-destructive" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Dot, { className: "w-10 h-10 text-destructive" }),
                     "Tr\u1EF1c ti\u1EBFp"
                   ]
                 }
               ),
-              onChangeRate && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative", ref: rateWrapRef, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              onChangeRate && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", ref: rateWrapRef, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -6489,7 +7097,7 @@ function OverlayControls({
                     ]
                   }
                 ),
-                rateOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                rateOpen && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                   "button",
                   {
                     onClick: () => {
@@ -6505,7 +7113,7 @@ function OverlayControls({
                   r
                 )) })
               ] }),
-              onToggleFullscreen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              onToggleFullscreen && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6513,7 +7121,7 @@ function OverlayControls({
                   onClick: onToggleFullscreen,
                   title: "To\xE0n m\xE0n h\xECnh",
                   className: "px-3 bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Maximize2, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Maximize2, { className: "w-4 h-4" })
                 }
               )
             ] })
@@ -6526,8 +7134,8 @@ function OverlayControls({
 
 // ../../components/ui/CategoryTreeSelect.tsx
 var import_react17 = require("react");
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1ECDn danh m\u1EE5c", disabled }) {
   const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
   const [expandedNodes, setExpandedNodes] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
@@ -6569,8 +7177,8 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
     const hasChildren = children.length > 0;
     const isExpanded = expandedNodes.has(category.id);
     const isSelected = value.includes(category.id);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
         {
           className: cn(
@@ -6581,14 +7189,14 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
           ),
           style: { paddingLeft: `${level * 1.5 + 0.75}rem` },
           children: [
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "span",
               {
                 "aria-hidden": true,
                 className: "absolute left-0 top-0 bottom-0 w-1 bg-primary"
               }
             ),
-            hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "button",
               {
                 type: "button",
@@ -6597,39 +7205,39 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
                   toggleExpand(category.id);
                 },
                 className: "p-0.5 hover:bg-accent rounded",
-                children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" })
+                children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.ChevronRight, { className: "w-4 h-4" })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "w-5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "w-5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               "div",
               {
                 onClick: () => handleSelect(category.id, category),
                 className: "flex items-center gap-2 flex-1",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     "div",
                     {
                       className: cn(
                         "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
                         isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
                       ),
-                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Check, { className: "w-3 h-3 text-primary-foreground" })
+                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Check, { className: "w-3 h-3 text-primary-foreground" })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
                 ]
               }
             )
           ]
         }
       ),
-      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: children.map((child) => renderCategory(child, level + 1)) })
+      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
   const selectedCount = value.length;
   const displayText = selectedCount > 0 ? `\u0110\xE3 ch\u1ECDn ${selectedCount} danh m\u1EE5c` : placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "button",
       {
         type: "button",
@@ -6645,14 +7253,14 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
           isOpen && "border-primary"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.ChevronDown, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.ChevronDown, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
         ]
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "div",
         {
           className: cn(
@@ -6660,7 +7268,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
             "rounded-md border bg-popover text-popover-foreground shadow-md",
             "backdrop-blur-sm bg-popover/95 border-border/60"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) })
         }
       )
     ] })
@@ -6669,9 +7277,9 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
 
 // ../../components/ui/ImageUpload.tsx
 var import_react18 = require("react");
-var import_lucide_react18 = require("lucide-react");
+var import_lucide_react20 = require("lucide-react");
 var import_next_intl6 = require("next-intl");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function ImageUpload({
   onUpload,
   onRemove,
@@ -6793,8 +7401,8 @@ function ImageUpload({
   const handleBrowseClick = () => {
     fileInputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       {
         className: cn(
@@ -6807,15 +7415,15 @@ function ImageUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          uploading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Loader2, { className: "w-6 h-6 animate-spin text-primary" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm font-medium", children: "Uploading..." })
+          uploading && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Loader2, { className: "w-6 h-6 animate-spin text-primary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Upload, { className: "w-6 h-6 text-primary" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Upload, { className: "w-6 h-6 text-primary" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 Button_default,
                 {
                   type: "button",
@@ -6827,9 +7435,9 @@ function ImageUpload({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -6844,25 +7452,25 @@ function ImageUpload({
         ]
       }
     ),
-    showPreview && uploadedImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    showPreview && uploadedImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "div",
         {
           className: "relative group bg-card border border-border rounded-lg p-3",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Button_default,
               {
                 variant: "danger",
                 size: "icon",
                 className: "absolute -top-2 -right-2 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity z-10",
                 onClick: () => handleRemoveImage(image.id),
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.X, { className: "w-3 h-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.X, { className: "w-3 h-3" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 "img",
                 {
                   src: image.url,
@@ -6875,18 +7483,18 @@ function ImageUpload({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hidden w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Image, { className: "w-8 h-8 text-muted-foreground" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hidden w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Image, { className: "w-8 h-8 text-muted-foreground" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs font-medium truncate", title: image.originalName, children: image.originalName }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs text-muted-foreground", children: image.formattedSize }),
-              image.width && image.height && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xs font-medium truncate", title: image.originalName, children: image.originalName }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xs text-muted-foreground", children: image.formattedSize }),
+              image.width && image.height && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
                 image.width,
                 " \xD7 ",
                 image.height
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute top-1 left-1 w-5 h-5 bg-success rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Check, { className: "w-3 h-3 text-success-foreground" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute top-1 left-1 w-5 h-5 bg-success rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Check, { className: "w-3 h-3 text-success-foreground" }) })
           ]
         },
         image.id
@@ -6896,9 +7504,9 @@ function ImageUpload({
 }
 
 // ../../components/ui/Carousel.tsx
-var React27 = __toESM(require("react"), 1);
-var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var React29 = __toESM(require("react"), 1);
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Carousel({
   children,
   autoScroll = true,
@@ -6919,19 +7527,19 @@ function Carousel({
   thumbnailRenderer,
   ariaLabel = "Carousel"
 }) {
-  const [currentIndex, setCurrentIndex] = React27.useState(0);
-  const [isPaused, setIsPaused] = React27.useState(false);
-  const [isDragging, setIsDragging] = React27.useState(false);
-  const [startPos, setStartPos] = React27.useState(0);
-  const [currentTranslate, setCurrentTranslate] = React27.useState(0);
-  const [prevTranslate, setPrevTranslate] = React27.useState(0);
-  const progressElRef = React27.useRef(null);
-  const carouselRef = React27.useRef(null);
-  const rafRef = React27.useRef(null);
-  const totalSlides = React27.Children.count(children);
+  const [currentIndex, setCurrentIndex] = React29.useState(0);
+  const [isPaused, setIsPaused] = React29.useState(false);
+  const [isDragging, setIsDragging] = React29.useState(false);
+  const [startPos, setStartPos] = React29.useState(0);
+  const [currentTranslate, setCurrentTranslate] = React29.useState(0);
+  const [prevTranslate, setPrevTranslate] = React29.useState(0);
+  const progressElRef = React29.useRef(null);
+  const carouselRef = React29.useRef(null);
+  const rafRef = React29.useRef(null);
+  const totalSlides = React29.Children.count(children);
   const maxIndex = Math.max(0, totalSlides - slidesToShow);
   const isHorizontal = orientation === "horizontal";
-  const scrollPrev = React27.useCallback(() => {
+  const scrollPrev = React29.useCallback(() => {
     setCurrentIndex((prev) => {
       if (prev === 0) {
         return loop ? maxIndex : 0;
@@ -6939,7 +7547,7 @@ function Carousel({
       return Math.max(0, prev - slidesToScroll);
     });
   }, [loop, maxIndex, slidesToScroll]);
-  const scrollNext = React27.useCallback(() => {
+  const scrollNext = React29.useCallback(() => {
     setCurrentIndex((prev) => {
       if (prev >= maxIndex) {
         return loop ? 0 : maxIndex;
@@ -6947,13 +7555,13 @@ function Carousel({
       return Math.min(maxIndex, prev + slidesToScroll);
     });
   }, [loop, maxIndex, slidesToScroll]);
-  const scrollTo = React27.useCallback(
+  const scrollTo = React29.useCallback(
     (index) => {
       setCurrentIndex(Math.min(maxIndex, Math.max(0, index)));
     },
     [maxIndex]
   );
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
         e.preventDefault();
@@ -6975,7 +7583,7 @@ function Carousel({
       return () => carousel.removeEventListener("keydown", handleKeyDown);
     }
   }, [scrollPrev, scrollNext, scrollTo, maxIndex]);
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     const stop = () => {
       if (rafRef.current != null) {
         cancelAnimationFrame(rafRef.current);
@@ -7034,7 +7642,7 @@ function Carousel({
     setCurrentTranslate(0);
     setPrevTranslate(0);
   };
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     onSlideChange?.(currentIndex);
   }, [currentIndex, onSlideChange]);
   const getAnimationStyles = () => {
@@ -7056,7 +7664,7 @@ function Carousel({
     };
   };
   const slideWidth = 100 / slidesToShow;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       ref: carouselRef,
@@ -7068,8 +7676,8 @@ function Carousel({
       "aria-roledescription": "carousel",
       tabIndex: 0,
       children: [
-        showProgress && autoScroll && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-20", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: progressElRef, className: "h-full bg-primary", style: { width: "0%" } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        showProgress && autoScroll && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-20", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref: progressElRef, className: "h-full bg-primary", style: { width: "0%" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: cn("flex", isHorizontal ? "flex-row" : "flex-col", containerClassName),
@@ -7084,7 +7692,7 @@ function Carousel({
             role: "group",
             "aria-atomic": "false",
             "aria-live": autoScroll ? "off" : "polite",
-            children: React27.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: React29.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "div",
               {
                 className: cn(
@@ -7107,14 +7715,14 @@ function Carousel({
             ))
           }
         ),
-        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             Button_default,
             {
               onClick: scrollPrev,
               variant: "ghost",
               size: "icon",
-              icon: import_lucide_react19.ChevronLeft,
+              icon: import_lucide_react21.ChevronLeft,
               noHoverOverlay: true,
               disabled: !loop && currentIndex === 0,
               className: cn(
@@ -7124,13 +7732,13 @@ function Carousel({
               "aria-label": "Previous slide"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             Button_default,
             {
               onClick: scrollNext,
               variant: "ghost",
               size: "icon",
-              icon: import_lucide_react19.ChevronRight,
+              icon: import_lucide_react21.ChevronRight,
               noHoverOverlay: true,
               disabled: !loop && currentIndex >= maxIndex,
               className: cn(
@@ -7141,7 +7749,7 @@ function Carousel({
             }
           )
         ] }),
-        showDots && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        showDots && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: cn(
@@ -7150,7 +7758,7 @@ function Carousel({
             ),
             role: "tablist",
             "aria-label": "Carousel pagination",
-            children: Array.from({ length: maxIndex + 1 }, (_, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: Array.from({ length: maxIndex + 1 }, (_, idx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "button",
               {
                 onClick: () => scrollTo(idx),
@@ -7167,14 +7775,14 @@ function Carousel({
             ))
           }
         ),
-        showThumbnails && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        showThumbnails && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: cn(
               "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-gradient-to-t from-black/50 to-transparent overflow-x-auto",
               isHorizontal ? "flex-row" : "flex-col"
             ),
-            children: React27.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: React29.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "button",
               {
                 onClick: () => scrollTo(idx),
@@ -7196,7 +7804,7 @@ function Carousel({
 
 // ../../components/ui/FallingIcons.tsx
 var import_react19 = __toESM(require("react"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var DEFAULT_COUNT = 24;
 var DEFAULT_SPEED_RANGE = [6, 14];
 var DEFAULT_SIZE_RANGE = [14, 28];
@@ -7291,8 +7899,8 @@ function FallingIcons({
       filter: `drop-shadow(0 0 ${4 * intensity}px ${glowColor}) drop-shadow(0 0 ${8 * intensity}px ${glowColor})`
     };
   }, [glow, glowColor, glowIntensity]);
-  const FallbackIcon = import_react19.default.useMemo(() => (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "12", cy: "12", r: "10" }) }), []);
-  const TheIcon = imageUrl ? ({ className: imgClassName }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  const FallbackIcon = import_react19.default.useMemo(() => (props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "12", cy: "12", r: "10" }) }), []);
+  const TheIcon = imageUrl ? ({ className: imgClassName }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "img",
     {
       src: imageUrl,
@@ -7301,7 +7909,7 @@ function FallingIcons({
       draggable: false
     }
   ) : Icon || FallbackIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -7311,7 +7919,7 @@ function FallingIcons({
       ),
       style: { zIndex },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("style", { children: `
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("style", { children: `
         @keyframes ${FallName} {
           0% { transform: translate3d(0, -10vh, 0); opacity: 0; }
           10% { opacity: 1; }
@@ -7344,7 +7952,7 @@ function FallingIcons({
           }
         }
       ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "div",
           {
             className: cn(
@@ -7365,12 +7973,12 @@ function FallingIcons({
                 });
               };
               const trailParticles = trail ? Array.from({ length: Math.min(5, Math.max(1, trailLength)) }) : [];
-              return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react19.default.Fragment, { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react19.default.Fragment, { children: [
                 trail && trailParticles.map((_, trailIndex) => {
                   const trailDelay = p.delay - (trailIndex + 1) * 0.15;
                   const trailOpacity = 1 - (trailIndex + 1) * (1 / (trailParticles.length + 1));
                   const trailScale = 1 - (trailIndex + 1) * 0.15;
-                  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                     "span",
                     {
                       className: cn("absolute top-0 will-change-transform pointer-events-none uv-falling-particle", colorClassName),
@@ -7384,7 +7992,7 @@ function FallingIcons({
                         opacity: trailOpacity * 0.4,
                         ["--fall"]: `${fallDist ?? (typeof window !== "undefined" ? window.innerHeight + 200 : 1200)}px`
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         "span",
                         {
                           className: "inline-block uv-sway",
@@ -7396,7 +8004,7 @@ function FallingIcons({
                             animationIterationCount: "infinite",
                             ["--amp"]: `${Math.round(p.driftAmp)}px`
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             "span",
                             {
                               className: "block",
@@ -7405,7 +8013,7 @@ function FallingIcons({
                                 height: p.size,
                                 ...glowStyles
                               },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
                             }
                           )
                         }
@@ -7414,7 +8022,7 @@ function FallingIcons({
                     `${p.key}-trail-${trailIndex}`
                   );
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   "span",
                   {
                     className: cn("absolute top-0 will-change-transform pointer-events-auto uv-falling-particle", colorClassName),
@@ -7440,7 +8048,7 @@ function FallingIcons({
                         return next;
                       });
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       "span",
                       {
                         className: "inline-block uv-sway",
@@ -7452,7 +8060,7 @@ function FallingIcons({
                           animationIterationCount: "infinite",
                           ["--amp"]: `${Math.round(p.driftAmp)}px`
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                           "span",
                           {
                             className: cn(
@@ -7468,7 +8076,7 @@ function FallingIcons({
                               ["--popName"]: PopName,
                               ...glowStyles
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
                           }
                         )
                       }
@@ -7484,23 +8092,1340 @@ function FallingIcons({
   );
 }
 
+// ../../components/ui/List.tsx
+var React31 = __toESM(require("react"), 1);
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var SIZE_STYLES2 = {
+  xs: { itemPad: "px-2 py-1.5", densePad: "px-2 py-1", label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
+  sm: { itemPad: "px-3 py-2", densePad: "px-3 py-1.5", label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
+  md: { itemPad: "px-4 py-2.5", densePad: "px-4 py-2", label: "text-sm", desc: "text-xs", icon: "h-5 w-5", avatar: "h-10 w-10" },
+  lg: { itemPad: "px-5 py-3", densePad: "px-5 py-2.5", label: "text-base", desc: "text-sm", icon: "h-5 w-5", avatar: "h-12 w-12" }
+};
+var BADGE_VARIANTS = {
+  default: "bg-muted text-muted-foreground",
+  success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+  error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  info: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+};
+var ListItemSkeleton = ({ size }) => {
+  const sz = SIZE_STYLES2[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex items-center gap-3 animate-pulse", sz.itemPad), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("rounded-full bg-muted shrink-0", sz.avatar) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-4 bg-muted rounded w-3/4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-3 bg-muted rounded w-1/2" })
+    ] })
+  ] });
+};
+var ListRoot = React31.forwardRef(
+  ({
+    as = "ul",
+    ordered,
+    variant = "plain",
+    size = "md",
+    divided = false,
+    inset = false,
+    hoverable = true,
+    loading: loading2 = false,
+    loadingCount = 3,
+    emptyText,
+    dense = false,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    const Comp = ordered ? "ol" : as;
+    const childCount = React31.Children.count(children);
+    const hasChildren = childCount > 0;
+    const variantClasses = {
+      plain: "",
+      outlined: "rounded-lg md:rounded-xl bg-card text-card-foreground border border-border shadow-sm",
+      soft: "rounded-lg bg-muted/40 border border-border/60",
+      bordered: "border border-border rounded-lg",
+      card: "rounded-lg bg-card shadow-md border border-border",
+      flush: "",
+      striped: "rounded-lg border border-border overflow-hidden"
+    };
+    if (loading2) {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Comp, { ref, className: cn("group/list", variantClasses[variant], inset && "p-1.5 md:p-2", divided && "divide-y divide-border/60", className), ...rest, children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ListItemSkeleton, { size }, i)) });
+    }
+    if (!hasChildren && emptyText) {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Comp, { ref, className: cn("group/list", variantClasses[variant], inset && "p-1.5 md:p-2", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "group/list",
+          variantClasses[variant],
+          inset && "p-1.5 md:p-2",
+          divided && "divide-y divide-border/60",
+          variant === "striped" && "[&>*:nth-child(even)]:bg-muted/30",
+          className
+        ),
+        ...rest,
+        children: React31.Children.map(children, (child, idx) => {
+          if (!React31.isValidElement(child)) return child;
+          const childClass = cn(
+            child.props?.className,
+            hoverable && variant !== "flush" && "hover:bg-accent/50 focus:bg-accent/60 focus:outline-none transition-colors",
+            variant === "flush" && "hover:bg-accent/30"
+          );
+          return React31.cloneElement(child, {
+            className: childClass,
+            "data-first": idx === 0 ? "true" : void 0,
+            "data-last": idx === childCount - 1 ? "true" : void 0,
+            "data-size": size,
+            "data-dense": dense ? "true" : void 0
+          });
+        })
+      }
+    );
+  }
+);
+ListRoot.displayName = "List";
+var ListItem = React31.forwardRef(
+  ({
+    as = "li",
+    selected = false,
+    disabled = false,
+    href,
+    label,
+    description,
+    leftIcon: Left,
+    rightIcon: Right,
+    avatar,
+    badge,
+    badgeVariant = "default",
+    action,
+    collapsible = false,
+    expanded: controlledExpanded,
+    onExpandChange,
+    expandContent,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    const [internalExpanded, setInternalExpanded] = React31.useState(false);
+    const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
+    const sizeAttr = rest["data-size"];
+    const denseAttr = rest["data-dense"];
+    const isDense = denseAttr === "true";
+    const resolvedSize = sizeAttr && (sizeAttr === "xs" || sizeAttr === "sm" || sizeAttr === "md" || sizeAttr === "lg") ? sizeAttr : "md";
+    const sz = SIZE_STYLES2[resolvedSize];
+    const padding = isDense ? sz.densePad : sz.itemPad;
+    const toggleExpanded = () => {
+      const newExpanded = !isExpanded;
+      if (onExpandChange) {
+        onExpandChange(newExpanded);
+      } else {
+        setInternalExpanded(newExpanded);
+      }
+    };
+    const inner = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex items-center gap-3", padding, "group/item relative"), children: [
+        avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
+        Left && !avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Left, { className: cn(sz.icon) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
+          ] }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mt-1", children })
+        ] }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
+        collapsible ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "span",
+          {
+            role: "button",
+            "aria-label": "Toggle",
+            tabIndex: 0,
+            onClick: (e) => {
+              e.stopPropagation();
+              toggleExpanded();
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleExpanded();
+              }
+            },
+            className: cn("text-muted-foreground shrink-0 transition-transform cursor-pointer select-none", sz.icon, isExpanded && "rotate-90"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react22.ChevronRight, { className: cn(sz.icon) })
+          }
+        ) : Right && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Right, { className: cn(sz.icon) }) })
+      ] }),
+      collapsible && isExpanded && expandContent && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("border-t border-border/50 bg-muted/20", padding, "pt-3"), children: expandContent })
+    ] });
+    const baseCls = cn(
+      "relative w-full",
+      selected && "bg-primary/10 ring-1 ring-primary/30",
+      disabled && "opacity-60 cursor-not-allowed",
+      className
+    );
+    if (href) {
+      const A = as === "a" ? "a" : "a";
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(A, { ref, href, className: cn(baseCls, "block"), ...rest, children: inner });
+    }
+    if (as === "button" || collapsible) {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: cn(baseCls, "text-left block w-full"),
+          onClick: collapsible ? toggleExpanded : void 0,
+          ...rest,
+          children: inner
+        }
+      );
+    }
+    const Comp = as;
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Comp, { ref, className: baseCls, ...rest, children: inner });
+  }
+);
+ListItem.displayName = "List.Item";
+var List = Object.assign(ListRoot, { Item: ListItem });
+var List_default = List;
+
+// ../../components/ui/Watermark.tsx
+var React32 = __toESM(require("react"), 1);
+var import_react_dom9 = require("react-dom");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var PRESETS2 = {
+  confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
+  draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
+  sample: { text: "SAMPLE", color: "rgba(168, 85, 247, 0.15)", rotate: -22, fontSize: 16, fontWeight: "600" },
+  copyright: { text: "\xA9 Copyright", color: "rgba(0, 0, 0, 0.1)", rotate: 0, fontSize: 12, fontWeight: "normal" },
+  doNotCopy: { text: "DO NOT COPY", color: "rgba(234, 88, 12, 0.15)", rotate: -22, fontSize: 14, fontWeight: "bold" },
+  internal: { text: "INTERNAL USE ONLY", color: "rgba(156, 163, 175, 0.15)", rotate: -22, fontSize: 13, fontWeight: "600" }
+};
+function useWatermarkDataURL(opts) {
+  const [url, setUrl] = React32.useState(null);
+  React32.useEffect(() => {
+    let cancelled = false;
+    const text = opts.text;
+    const image = opts.image;
+    const width = opts.width ?? 180;
+    const height = opts.height ?? 100;
+    const gapX = opts.gapX ?? 16;
+    const gapY = opts.gapY ?? 16;
+    const rotate = opts.rotate ?? -22;
+    const fontSize = opts.fontSize ?? 14;
+    const fontFamily = opts.fontFamily ?? "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial";
+    const fontWeight = opts.fontWeight ?? "normal";
+    const fontStyle = opts.fontStyle ?? "normal";
+    const color = opts.color ?? "rgba(0,0,0,0.15)";
+    const gradient = opts.gradient;
+    const pattern = opts.pattern ?? "diagonal";
+    const tileW = width + gapX;
+    const tileH = height + gapY;
+    const canvas = document.createElement("canvas");
+    canvas.width = tileW;
+    canvas.height = tileH;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const drawText = () => {
+      ctx.clearRect(0, 0, tileW, tileH);
+      ctx.save();
+      ctx.translate(tileW / 2, tileH / 2);
+      if (pattern === "diagonal") {
+        ctx.rotate(rotate * Math.PI / 180);
+      } else if (pattern === "straight") {
+      }
+      if (text) {
+        const textLines = Array.isArray(text) ? text : [text];
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        if (gradient) {
+          const splitStops = (input) => {
+            const s = input.trim();
+            let inside = s;
+            const lg = s.toLowerCase();
+            if (lg.startsWith("linear-gradient")) {
+              const start = s.indexOf("(");
+              const end = s.lastIndexOf(")");
+              if (start >= 0 && end > start) inside = s.slice(start + 1, end);
+            }
+            const parts = [];
+            let buf = "";
+            let depth = 0;
+            for (let i = 0; i < inside.length; i++) {
+              const ch = inside[i];
+              if (ch === "(") depth++;
+              if (ch === ")") depth = Math.max(0, depth - 1);
+              if (ch === "," && depth === 0) {
+                parts.push(buf.trim());
+                buf = "";
+              } else {
+                buf += ch;
+              }
+            }
+            if (buf.trim()) parts.push(buf.trim());
+            if (parts.length > 0) {
+              const first = parts[0].toLowerCase();
+              if (first.startsWith("to ") || first.endsWith("deg") || first.endsWith("rad")) {
+                parts.shift();
+              }
+            }
+            return parts.filter(Boolean);
+          };
+          const stops = splitStops(gradient);
+          const gradientObj = ctx.createLinearGradient(0, -height / 2, 0, height / 2);
+          stops.forEach((c, i) => {
+            const tokens = c.split(/\s+/).filter(Boolean);
+            const col = tokens[0];
+            const pos = tokens[1] ? parseFloat(tokens[1]) / 100 : i / Math.max(1, stops.length - 1);
+            try {
+              gradientObj.addColorStop(isFinite(pos) ? Math.min(Math.max(pos, 0), 1) : i / Math.max(1, stops.length - 1), col);
+            } catch {
+            }
+          });
+          ctx.fillStyle = gradientObj;
+        } else {
+          ctx.fillStyle = color;
+        }
+        const lineHeight = fontSize * 1.2;
+        const totalHeight = textLines.length * lineHeight;
+        const startY = -(totalHeight / 2) + lineHeight / 2;
+        textLines.forEach((line, index) => {
+          const y = startY + index * lineHeight;
+          ctx.fillText(line, 0, y, width);
+        });
+      }
+      ctx.restore();
+      if (!cancelled) setUrl(canvas.toDataURL());
+    };
+    if (image) {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        ctx.clearRect(0, 0, tileW, tileH);
+        ctx.save();
+        ctx.translate(tileW / 2, tileH / 2);
+        ctx.rotate(rotate * Math.PI / 180);
+        const drawW = width;
+        const drawH = height;
+        ctx.drawImage(img, -drawW / 2, -drawH / 2, drawW, drawH);
+        ctx.restore();
+        if (!cancelled) setUrl(canvas.toDataURL());
+      };
+      img.onerror = drawText;
+      img.src = image;
+    } else {
+      drawText();
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [opts.text, opts.image, opts.width, opts.height, opts.gapX, opts.gapY, opts.rotate, opts.fontSize, opts.fontFamily, opts.fontWeight, opts.fontStyle, opts.color, opts.gradient, opts.pattern]);
+  return url;
+}
+var Watermark = ({
+  text: textProp,
+  image,
+  width = 180,
+  height = 100,
+  gapX = 16,
+  gapY = 16,
+  rotate: rotateProp,
+  fontSize: fontSizeProp,
+  fontFamily = "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
+  fontWeight: fontWeightProp,
+  fontStyle: fontStyleProp,
+  color: colorProp,
+  gradient,
+  opacity = 1,
+  offsetLeft = 0,
+  offsetTop = 0,
+  zIndex = 40,
+  fullPage = false,
+  preset,
+  pattern = "diagonal",
+  interactive = false,
+  animate = false,
+  overlayClassName,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const [visible, setVisible] = React32.useState(true);
+  const presetConfig = preset ? PRESETS2[preset] : null;
+  const text = textProp ?? presetConfig?.text;
+  const color = colorProp ?? presetConfig?.color ?? "rgba(0,0,0,0.15)";
+  const rotate = rotateProp ?? presetConfig?.rotate ?? -22;
+  const fontSize = fontSizeProp ?? presetConfig?.fontSize ?? 14;
+  const fontWeight = fontWeightProp ?? presetConfig?.fontWeight ?? "normal";
+  const fontStyle = fontStyleProp ?? "normal";
+  const dataURL = useWatermarkDataURL({
+    text,
+    image,
+    width,
+    height,
+    gapX,
+    gapY,
+    rotate,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    color,
+    gradient,
+    pattern
+  });
+  const overlayStyle = {
+    position: fullPage ? "fixed" : "absolute",
+    top: 0,
+    left: 0,
+    zIndex,
+    opacity: visible ? opacity : 0,
+    backgroundRepeat: "repeat",
+    backgroundPosition: `${offsetLeft}px ${offsetTop}px`,
+    transition: animate ? "opacity 0.3s ease" : void 0
+  };
+  if (fullPage) {
+    overlayStyle.right = 0;
+    overlayStyle.bottom = 0;
+  } else {
+    overlayStyle.width = "100%";
+    overlayStyle.height = "100%";
+  }
+  if (dataURL) overlayStyle.backgroundImage = `url(${dataURL})`;
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn("pointer-events-none", overlayClassName),
+      style: overlayStyle,
+      onClick: interactive ? () => setVisible(!visible) : void 0
+    }
+  );
+  if (fullPage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+      children,
+      typeof window !== "undefined" ? (0, import_react_dom9.createPortal)(overlay, document.body) : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("relative", className), style, ...rest, children: [
+    children,
+    overlay
+  ] });
+};
+var Watermark_default = Watermark;
+
+// ../../components/ui/Timeline.tsx
+var React33 = __toESM(require("react"), 1);
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SIZE_STYLE = {
+  sm: { dot: "h-2.5 w-2.5", iconDot: "h-6 w-6", padY: "py-3", densePadY: "py-2", title: "text-sm", desc: "text-xs", time: "text-[11px]", icon: "h-3.5 w-3.5" },
+  md: { dot: "h-3 w-3", iconDot: "h-8 w-8", padY: "py-4", densePadY: "py-2.5", title: "text-base", desc: "text-sm", time: "text-xs", icon: "h-4 w-4" },
+  lg: { dot: "h-3.5 w-3.5", iconDot: "h-10 w-10", padY: "py-5", densePadY: "py-3", title: "text-lg", desc: "text-sm", time: "text-xs", icon: "h-5 w-5" },
+  xl: { dot: "h-4 w-4", iconDot: "h-12 w-12", padY: "py-6", densePadY: "py-3.5", title: "text-xl", desc: "text-base", time: "text-sm", icon: "h-6 w-6" }
+};
+var STATUS_COLOR = {
+  default: "bg-muted/60",
+  primary: "bg-primary",
+  success: "bg-green-500",
+  warning: "bg-yellow-500",
+  error: "bg-red-500",
+  info: "bg-blue-500"
+};
+var TimelineContext = React33.createContext(null);
+var LINE_STYLE_MAP = {
+  solid: "border-solid",
+  dashed: "border-dashed",
+  dotted: "border-dotted"
+};
+var Marker = ({ index, last, size, color, status = "default", lineColor, lineStyle, active, dot, icon: Icon, showLine }) => {
+  const sz = SIZE_STYLE[size];
+  const dotColor = color ? `background:${color}` : void 0;
+  const cls = color ? void 0 : STATUS_COLOR[status];
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center", children: [
+    dot ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-center justify-center", children: dot }) : Icon ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: cn("rounded-full ring-2 ring-background flex items-center justify-center", sz.iconDot, cls, active && "ring-primary/40 ring-4"),
+        style: dotColor ? { background: color } : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { className: cn("text-white", sz.icon) })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: cn("rounded-full ring-2 ring-background", sz.dot, cls, active && "ring-primary/40 ring-4 scale-125"),
+        style: dotColor ? { background: color } : void 0
+      }
+    ),
+    !last && showLine && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: cn("flex-1 border-l-2", LINE_STYLE_MAP[lineStyle]),
+        style: { borderColor: lineColor || "hsl(var(--border))" }
+      }
+    )
+  ] });
+};
+var TimelineRoot = React33.forwardRef(
+  ({
+    align = "left",
+    variant = "default",
+    size = "md",
+    mode = "vertical",
+    lineColor,
+    lineStyle = "solid",
+    items,
+    itemClassName,
+    animate = false,
+    dense = false,
+    showLine = true,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    const content = items ? items.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimelineItem, { ...it, className: cn(itemClassName, it.className), "data-index": i, "data-last": i === (items?.length ?? 0) - 1 }, i)) : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimelineContext.Provider, { value: { align, variant, size, mode, lineColor, lineStyle, itemClassName, animate, dense, showLine }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative",
+          mode === "horizontal" && "flex gap-4 overflow-x-auto",
+          mode === "vertical" && "space-y-0",
+          className
+        ),
+        ...rest,
+        children: mode === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "space-y-0", children: content }) : content
+      }
+    ) });
+  }
+);
+TimelineRoot.displayName = "Timeline";
+var TimelineItem = React33.forwardRef(
+  ({
+    title,
+    description,
+    time,
+    icon: Icon,
+    status = "default",
+    color,
+    active = false,
+    dot,
+    collapsible = false,
+    expanded: controlledExpanded,
+    onExpandChange,
+    expandContent,
+    badge,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    const ctx = React33.useContext(TimelineContext);
+    const idx = rest["data-index"];
+    const isLast = Boolean(rest["data-last"]);
+    const sz = SIZE_STYLE[ctx.size];
+    const [internalExpanded, setInternalExpanded] = React33.useState(false);
+    const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
+    const toggleExpanded = () => {
+      const newExpanded = !isExpanded;
+      if (onExpandChange) {
+        onExpandChange(newExpanded);
+      } else {
+        setInternalExpanded(newExpanded);
+      }
+    };
+    const padding = ctx.dense ? sz.densePadY : sz.padY;
+    const variantClasses = {
+      default: "",
+      outlined: "rounded-lg border border-border bg-card shadow-sm px-4 py-3",
+      card: "rounded-xl border border-border bg-card shadow-md px-5 py-4",
+      minimal: "border-l-2 pl-4 py-2",
+      modern: "rounded-lg bg-gradient-to-r from-card to-muted/20 border border-border/50 px-5 py-4 backdrop-blur-sm",
+      gradient: "rounded-xl bg-gradient-to-br from-primary/10 via-card to-accent/10 border border-primary/20 px-5 py-4 shadow-lg"
+    };
+    const contentBox = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("min-w-0 flex-1", variantClasses[ctx.variant]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("font-semibold text-foreground", sz.title), children: title }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "px-2 py-0.5 rounded-full text-[10px] font-medium bg-primary/10 text-primary", children: badge })
+          ] }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("text-muted-foreground mt-1", sz.desc), children: description }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mt-2", children })
+        ] }),
+        collapsible && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: toggleExpanded,
+            className: cn("text-muted-foreground hover:text-foreground transition-transform p-1", isExpanded && "rotate-180"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react23.ChevronDown, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      time && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("mt-2 text-muted-foreground flex items-center gap-1", sz.time), children: time }),
+      collapsible && isExpanded && expandContent && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mt-3 pt-3 border-t border-border/50 text-sm", children: expandContent })
+    ] });
+    const markerWidth = Icon || dot ? "w-auto" : "w-6";
+    const leftSide = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-left duration-500"), style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("flex-shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-1", children: contentBox })
+    ] });
+    const rightSide = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-right duration-500"), style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-1 flex justify-end", children: contentBox }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("flex-shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) })
+    ] });
+    const horizontalItem = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center gap-2 min-w-[200px]",
+          ctx.animate && "animate-in fade-in-50 zoom-in-95 duration-500"
+        ),
+        style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: false }),
+          !isLast && ctx.showLine && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("h-px w-full border-t-2", LINE_STYLE_MAP[ctx.lineStyle]), style: { borderColor: ctx.lineColor || "hsl(var(--border))" } }),
+          contentBox
+        ]
+      }
+    );
+    if (ctx.mode === "horizontal") {
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: cn("relative", className), ...rest, children: horizontalItem });
+    }
+    let row = leftSide;
+    if (ctx.align === "right") row = rightSide;
+    if (ctx.align === "alternate") row = (idx ?? 0) % 2 === 0 ? leftSide : rightSide;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: cn("relative", className), ...rest, children: row });
+  }
+);
+TimelineItem.displayName = "Timeline.Item";
+var Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });
+var Timeline_default = Timeline;
+
+// ../../components/ui/ColorPicker.tsx
+var React34 = __toESM(require("react"), 1);
+var import_lucide_react24 = require("lucide-react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+function hexToRgb(hex) {
+  const str = hex.replace(/^#/, "").trim();
+  if (str.length === 3) {
+    const r = parseInt(str[0] + str[0], 16);
+    const g = parseInt(str[1] + str[1], 16);
+    const b = parseInt(str[2] + str[2], 16);
+    return { r, g, b };
+  }
+  if (str.length === 6) {
+    const r = parseInt(str.slice(0, 2), 16);
+    const g = parseInt(str.slice(2, 4), 16);
+    const b = parseInt(str.slice(4, 6), 16);
+    return { r, g, b };
+  }
+  return null;
+}
+function rgbToHex(r, g, b) {
+  return `#${[r, g, b].map((v) => clamp(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslToRgb(h, s, l) {
+  h /= 360;
+  s /= 100;
+  l /= 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2) return q2;
+      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+}
+function parseAnyColor(input) {
+  if (!input) return null;
+  const s = input.trim();
+  if (s.startsWith("#")) {
+    const rgb = hexToRgb(s);
+    if (!rgb) return null;
+    return { ...rgb, a: 1 };
+  }
+  const rgbaMatch = s.match(/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)/i);
+  if (rgbaMatch) {
+    const r = clamp(parseInt(rgbaMatch[1], 10), 0, 255);
+    const g = clamp(parseInt(rgbaMatch[2], 10), 0, 255);
+    const b = clamp(parseInt(rgbaMatch[3], 10), 0, 255);
+    const a = rgbaMatch[4] != null ? clamp(parseFloat(rgbaMatch[4]), 0, 1) : 1;
+    return { r, g, b, a };
+  }
+  const hslaMatch = s.match(/hsla?\(\s*(\d{1,3}(?:\.\d+)?)\s*,?\s*(\d{1,3}(?:\.\d+)?)%?\s*,?\s*(\d{1,3}(?:\.\d+)?)%?(?:\s*,?\s*(\d*\.?\d+))?\s*\)/i);
+  if (hslaMatch) {
+    const h = parseFloat(hslaMatch[1]);
+    const sl = parseFloat(hslaMatch[2]);
+    const l = parseFloat(hslaMatch[3]);
+    const a = hslaMatch[4] != null ? clamp(parseFloat(hslaMatch[4]), 0, 1) : 1;
+    const rgb = hslToRgb(h, sl, l);
+    return { ...rgb, a };
+  }
+  return null;
+}
+function formatOutput({ r, g, b, a }, withAlpha, format) {
+  if (format === "hex" && (!withAlpha || a === 1)) {
+    return rgbToHex(r, g, b);
+  }
+  if (format === "hsl" || format === "hsla") {
+    const hsl = rgbToHsl(r, g, b);
+    if (format === "hsla" || withAlpha) {
+      return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${clamp(a, 0, 1)})`;
+    }
+    return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
+  }
+  if (withAlpha || a !== 1) {
+    return `rgba(${clamp(r, 0, 255)}, ${clamp(g, 0, 255)}, ${clamp(b, 0, 255)}, ${clamp(a, 0, 1)})`;
+  }
+  return rgbToHex(r, g, b);
+}
+function getColorHarmony(rgba) {
+  const hsl = rgbToHsl(rgba.r, rgba.g, rgba.b);
+  const compH = (hsl.h + 180) % 360;
+  const compRgb = hslToRgb(compH, hsl.s, hsl.l);
+  const tri1H = (hsl.h + 120) % 360;
+  const tri2H = (hsl.h + 240) % 360;
+  const tri1Rgb = hslToRgb(tri1H, hsl.s, hsl.l);
+  const tri2Rgb = hslToRgb(tri2H, hsl.s, hsl.l);
+  const ana1H = (hsl.h + 30) % 360;
+  const ana2H = (hsl.h - 30 + 360) % 360;
+  const ana1Rgb = hslToRgb(ana1H, hsl.s, hsl.l);
+  const ana2Rgb = hslToRgb(ana2H, hsl.s, hsl.l);
+  return {
+    complementary: rgbToHex(compRgb.r, compRgb.g, compRgb.b),
+    triadic: [rgbToHex(tri1Rgb.r, tri1Rgb.g, tri1Rgb.b), rgbToHex(tri2Rgb.r, tri2Rgb.g, tri2Rgb.b)],
+    analogous: [rgbToHex(ana1Rgb.r, ana1Rgb.g, ana1Rgb.b), rgbToHex(ana2Rgb.r, ana2Rgb.g, ana2Rgb.b)]
+  };
+}
+var DEFAULT_PRESETS = [
+  "#000000",
+  "#ffffff",
+  "#f87171",
+  "#fb923c",
+  "#fbbf24",
+  "#34d399",
+  "#60a5fa",
+  "#a78bfa",
+  "#f472b6",
+  "#111827",
+  "#4b5563",
+  "#9ca3af",
+  "#d1d5db",
+  "#e5e7eb",
+  "#f3f4f6"
+];
+var Swatch = ({
+  color,
+  onClick,
+  ariaLabel,
+  size = "md"
+}) => {
+  const sizeClasses2 = {
+    sm: "h-5 w-5",
+    md: "h-6 w-6",
+    lg: "h-8 w-8"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        sizeClasses2[size],
+        "rounded-md border border-border shadow-sm hover:scale-110 transition-transform",
+        onClick && "cursor-pointer"
+      ),
+      style: { backgroundColor: color },
+      onClick,
+      "aria-label": ariaLabel
+    }
+  );
+};
+function ColorPicker({
+  value,
+  defaultValue = "#4f46e5",
+  onChange,
+  disabled = false,
+  withAlpha = false,
+  format = "hex",
+  presets,
+  className,
+  triggerClassName,
+  contentClassName,
+  clearable = false,
+  copyable = true,
+  size = "md",
+  variant = "default",
+  showRecent = false,
+  showHarmony = false,
+  maxRecent = 8,
+  ...rest
+}) {
+  const isControlled = value !== void 0;
+  const initial = parseAnyColor(isControlled ? value : defaultValue) || { r: 79, g: 70, b: 229, a: 1 };
+  const [rgba, setRgba] = React34.useState(initial);
+  const [open, setOpen] = React34.useState(false);
+  const [text, setText] = React34.useState(() => formatOutput(initial, withAlpha, format));
+  const [copied, setCopied] = React34.useState(false);
+  const [recentColors, setRecentColors] = React34.useState([]);
+  React34.useEffect(() => {
+    if (isControlled) {
+      const parsed = parseAnyColor(value);
+      if (parsed) {
+        setRgba(parsed);
+        setText(formatOutput(parsed, withAlpha, format));
+      }
+    }
+  }, [value]);
+  const emit = (next) => {
+    const out = formatOutput(next, withAlpha, format);
+    if (!isControlled) setText(out);
+    onChange?.(out);
+    if (showRecent) {
+      const hexColor = rgbToHex(next.r, next.g, next.b);
+      setRecentColors((prev) => {
+        const filtered = prev.filter((c) => c !== hexColor);
+        return [hexColor, ...filtered].slice(0, maxRecent);
+      });
+    }
+  };
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const handleHexChange = (raw) => {
+    setText(raw);
+    const parsed = parseAnyColor(raw);
+    if (parsed) {
+      setRgba((prev) => ({ ...parsed, a: withAlpha ? parsed.a : 1 }));
+      emit({ ...parsed, a: withAlpha ? parsed.a : 1 });
+    }
+  };
+  const handleNativeChange = (e) => {
+    const hex = e.target.value || "#000000";
+    const rgb = hexToRgb(hex) || { r: 0, g: 0, b: 0 };
+    const next = { ...rgba, ...rgb };
+    setRgba(next);
+    emit(next);
+  };
+  const setAlpha = (aPct) => {
+    const a = clamp(aPct / 100, 0, 1);
+    const next = { ...rgba, a };
+    setRgba(next);
+    emit(next);
+  };
+  const tryEyedropper = async () => {
+    if (typeof window !== "undefined" && window.EyeDropper) {
+      const eye = new window.EyeDropper();
+      try {
+        const res = await eye.open();
+        const rgb = hexToRgb(res.sRGBHex);
+        if (rgb) {
+          const next = { r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a };
+          setRgba(next);
+          emit(next);
+        }
+      } catch {
+      }
+    }
+  };
+  const clear = () => {
+    setText("");
+    const next = { r: 0, g: 0, b: 0, a: 0 };
+    setRgba(next);
+    onChange?.("");
+  };
+  const swatches = presets && presets.length ? presets : DEFAULT_PRESETS;
+  const hexForInput = rgbToHex(rgba.r, rgba.g, rgba.b);
+  const alphaPct = Math.round(rgba.a * 100);
+  const harmony = showHarmony ? getColorHarmony(rgba) : null;
+  const sizeClasses2 = {
+    sm: "h-8 text-xs",
+    md: "h-10 text-sm",
+    lg: "h-12 text-base"
+  };
+  const swatchSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "md";
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "w-full px-3 rounded-lg border border-input bg-background flex items-center justify-between",
+        sizeClasses2[size],
+        "hover:border-accent-foreground/30 transition-colors",
+        disabled && "opacity-50 cursor-not-allowed",
+        triggerClassName
+      ),
+      "aria-label": "Open color picker",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "span",
+            {
+              className: cn(
+                "rounded border border-border shadow-sm",
+                size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5"
+              ),
+              style: { backgroundColor: withAlpha ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : hexForInput }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-mono text-muted-foreground", children: text })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.Pipette, { className: cn(size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-5 h-5" : "w-4 h-4", "text-muted-foreground") })
+      ]
+    }
+  );
+  const contentWidthByVariant = {
+    minimal: 240,
+    compact: 280,
+    default: 320,
+    full: 360
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn("inline-block w-full", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    Popover,
+    {
+      trigger,
+      open,
+      onOpenChange: setOpen,
+      placement: "bottom-start",
+      matchTriggerWidth: variant === "minimal",
+      contentWidth: contentWidthByVariant[variant],
+      contentClassName: cn("p-3 rounded-lg border border-border bg-card shadow-lg", contentClassName),
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-3", children: [
+        variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("input", { type: "color", value: hexForInput, onChange: handleNativeChange, className: "h-9 w-9 rounded-md cursor-pointer border border-border" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: tryEyedropper,
+              className: cn("h-9 px-3 rounded-md border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.Pipette, { className: "w-3.5 h-3.5" }),
+                variant === "full" && "Pick"
+              ]
+            }
+          ),
+          copyable && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: copyToClipboard,
+              className: cn(
+                "h-9 px-3 rounded-md border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5",
+                copied && "bg-green-500/10 border-green-500/30"
+              ),
+              children: [
+                copied ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.Check, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.Copy, { className: "w-3.5 h-3.5" }),
+                variant === "full" && (copied ? "Copied!" : "Copy")
+              ]
+            }
+          ),
+          clearable && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: clear,
+              className: "ml-auto h-9 px-2 rounded-md border border-border text-xs hover:bg-destructive/10 transition-colors flex items-center gap-1",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.X, { className: "w-3.5 h-3.5" }),
+                variant === "full" && "Clear"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            Input_default,
+            {
+              value: text,
+              onChange: (e) => handleHexChange(e.target.value),
+              placeholder: format === "hsl" || format === "hsla" ? "hsl(240, 82%, 59%)" : withAlpha || format === "rgba" ? "rgba(79,70,229,1)" : "#4f46e5",
+              variant: "outlined",
+              size: "sm",
+              className: "flex-1"
+            }
+          ),
+          variant === "minimal" && copyable && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: copyToClipboard,
+              className: cn(
+                "h-9 w-9 rounded-md border border-border hover:bg-accent/10 transition-colors flex items-center justify-center",
+                copied && "bg-green-500/10 border-green-500/30"
+              ),
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.Check, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.Copy, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] }),
+        withAlpha && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Slider, { min: 0, max: 100, step: 1, value: alphaPct, onChange: (v) => setAlpha(v), label: "Alpha", showValue: true, formatValue: (v) => `${v}%`, size: "sm" }) }),
+        variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.Palette, { className: "w-3.5 h-3.5" }),
+            " Presets"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "grid grid-cols-8 gap-2", children: swatches.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            Swatch,
+            {
+              color: c,
+              ariaLabel: c,
+              size: swatchSize,
+              onClick: () => {
+                const rgb = hexToRgb(c);
+                const next = { r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a };
+                setRgba(next);
+                emit(next);
+              }
+            },
+            c
+          )) })
+        ] }),
+        showRecent && recentColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react24.History, { className: "w-3.5 h-3.5" }),
+            " Recent"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex gap-2 flex-wrap", children: recentColors.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            Swatch,
+            {
+              color: c,
+              ariaLabel: c,
+              size: swatchSize,
+              onClick: () => {
+                const rgb = hexToRgb(c);
+                const next = { r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a };
+                setRgba(next);
+                emit(next);
+              }
+            },
+            `${c}-${i}`
+          )) })
+        ] }),
+        showHarmony && harmony && variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Harmony" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xs text-muted-foreground w-24", children: "Complementary" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                Swatch,
+                {
+                  color: harmony.complementary,
+                  ariaLabel: "Complementary",
+                  size: swatchSize,
+                  onClick: () => {
+                    const rgb = hexToRgb(harmony.complementary);
+                    const next = { r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a };
+                    setRgba(next);
+                    emit(next);
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xs font-mono text-muted-foreground", children: harmony.complementary })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xs text-muted-foreground w-24", children: "Triadic" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex gap-2", children: harmony.triadic.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                Swatch,
+                {
+                  color: c,
+                  ariaLabel: c,
+                  size: swatchSize,
+                  onClick: () => {
+                    const rgb = hexToRgb(c);
+                    const next = { r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a };
+                    setRgba(next);
+                    emit(next);
+                  }
+                },
+                c
+              )) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xs text-muted-foreground w-24", children: "Analogous" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex gap-2", children: harmony.analogous.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                Swatch,
+                {
+                  color: c,
+                  ariaLabel: c,
+                  size: swatchSize,
+                  onClick: () => {
+                    const rgb = hexToRgb(c);
+                    const next = { r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a };
+                    setRgba(next);
+                    emit(next);
+                  }
+                },
+                c
+              )) })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  ) });
+}
+
+// ../../components/ui/Grid.tsx
+var import_react20 = __toESM(require("react"), 1);
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var BP_MIN = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function toTemplateCols(columns, minColumnWidth) {
+  if (minColumnWidth != null) {
+    const v = typeof minColumnWidth === "number" ? `${minColumnWidth}px` : String(minColumnWidth);
+    return `repeat(auto-fit, minmax(${v}, 1fr))`;
+  }
+  if (typeof columns === "number") return `repeat(${columns}, minmax(0, 1fr))`;
+  if (columns) return String(columns);
+  return `repeat(12, minmax(0, 1fr))`;
+}
+function toTemplateRows(rows) {
+  if (typeof rows === "number") return `repeat(${rows}, minmax(0, auto))`;
+  if (rows) return String(rows);
+  return void 0;
+}
+function joinAreas(areas) {
+  if (!areas) return void 0;
+  return Array.isArray(areas) ? areas.join(" ") : areas;
+}
+function getVariantClasses(variant = "default", outlined) {
+  if (outlined) {
+    return "rounded-lg md:rounded-xl bg-card text-card-foreground border border-border shadow-sm";
+  }
+  const variants = {
+    default: "",
+    bordered: "border border-border rounded-lg",
+    card: "rounded-lg md:rounded-xl bg-card text-card-foreground border border-border shadow-sm",
+    flat: "bg-muted/30 rounded-lg",
+    glass: "bg-background/80 backdrop-blur-sm border border-border/50 rounded-lg shadow-lg"
+  };
+  return variants[variant] || "";
+}
+var GridRoot = import_react20.default.forwardRef(
+  ({
+    columns,
+    rows,
+    gap,
+    gapX,
+    gapY,
+    autoRows,
+    autoColumns,
+    autoFlow,
+    minColumnWidth,
+    areas,
+    alignItems,
+    justifyItems,
+    alignContent,
+    justifyContent,
+    responsive,
+    variant = "default",
+    animated = false,
+    outlined = false,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const id = (0, import_react20.useId)().replace(/[:]/g, "");
+    const baseClass = `uv-grid-${id}`;
+    const baseCols = toTemplateCols(columns, minColumnWidth);
+    const baseRows = toTemplateRows(rows);
+    const baseAreas = joinAreas(areas);
+    let css = `.${baseClass}{display:grid;`;
+    if (baseCols) css += `grid-template-columns:${baseCols};`;
+    if (baseRows) css += `grid-template-rows:${baseRows};`;
+    if (baseAreas) css += `grid-template-areas:${baseAreas};`;
+    if (autoRows) css += `grid-auto-rows:${autoRows};`;
+    if (autoColumns) css += `grid-auto-columns:${autoColumns};`;
+    if (autoFlow) css += `grid-auto-flow:${autoFlow};`;
+    if (alignItems) css += `align-items:${alignItems};`;
+    if (justifyItems) css += `justify-items:${justifyItems};`;
+    if (alignContent) css += `align-content:${alignContent};`;
+    if (justifyContent) css += `justify-content:${justifyContent};`;
+    if (animated) css += `transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);`;
+    css += `}`;
+    const toVal = (v) => typeof v === "number" ? `${v}px` : v;
+    const g = toVal(gap);
+    const gx = toVal(gapX);
+    const gy = toVal(gapY);
+    if (g) css += `.${baseClass}{gap:${g};}`;
+    if (gx) css += `.${baseClass}{column-gap:${gx};}`;
+    if (gy) css += `.${baseClass}{row-gap:${gy};}`;
+    if (responsive) {
+      Object.keys(responsive).forEach((bp) => {
+        const conf = responsive[bp];
+        if (!conf) return;
+        const cols = toTemplateCols(conf.columns, conf.minColumnWidth);
+        const rws = toTemplateRows(conf.rows);
+        const rg = toVal(conf.gap);
+        const rgx = toVal(conf.gapX);
+        const rgy = toVal(conf.gapY);
+        css += `@media (min-width:${BP_MIN[bp]}px){.${baseClass}{`;
+        if (cols) css += `grid-template-columns:${cols};`;
+        if (rws) css += `grid-template-rows:${rws};`;
+        if (rg) css += `gap:${rg};`;
+        if (rgx) css += `column-gap:${rgx};`;
+        if (rgy) css += `row-gap:${rgy};`;
+        css += `}}`;
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          baseClass,
+          getVariantClasses(variant, outlined),
+          animated && "transition-all duration-300 ease-in-out",
+          className
+        ),
+        style,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("style", { dangerouslySetInnerHTML: { __html: css } }),
+          children
+        ]
+      }
+    );
+  }
+);
+GridRoot.displayName = "Grid";
+var GridItem = import_react20.default.forwardRef(
+  ({
+    colSpan,
+    rowSpan,
+    colStart,
+    colEnd,
+    rowStart,
+    rowEnd,
+    area,
+    alignSelf,
+    justifySelf,
+    order,
+    hoverable = false,
+    animationDelay,
+    style,
+    className,
+    ...rest
+  }, ref) => {
+    const st = { ...style };
+    if (colSpan != null) st.gridColumn = `span ${colSpan} / span ${colSpan}`;
+    if (rowSpan != null) st.gridRow = `span ${rowSpan} / span ${rowSpan}`;
+    if (colStart != null) st.gridColumnStart = colStart;
+    if (colEnd != null) st.gridColumnEnd = colEnd;
+    if (rowStart != null) st.gridRowStart = rowStart;
+    if (rowEnd != null) st.gridRowEnd = rowEnd;
+    if (area) st.gridArea = area;
+    if (alignSelf) st.alignSelf = alignSelf;
+    if (justifySelf) st.justifySelf = justifySelf;
+    if (order != null) st.order = order;
+    if (animationDelay != null) {
+      st.animationDelay = `${animationDelay}ms`;
+      st.opacity = 0;
+      st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      animationDelay != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `@keyframes uvGridItemFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}`
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "div",
+        {
+          ref,
+          className: cn(
+            hoverable && "transition-all duration-200 hover:scale-[1.02] hover:shadow-md cursor-pointer",
+            className
+          ),
+          style: st,
+          ...rest
+        }
+      )
+    ] });
+  }
+);
+GridItem.displayName = "Grid.Item";
+var Grid = Object.assign(GridRoot, { Item: GridItem });
+var Grid_default = Grid;
+
 // ../../components/ui/ClientOnly.tsx
-var import_react20 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function ClientOnly({ children, fallback = null }) {
-  const [hasMounted, setHasMounted] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const [hasMounted, setHasMounted] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children });
 }
 
 // ../../components/ui/Loading.tsx
-var import_lucide_react20 = require("lucide-react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_lucide_react25 = require("lucide-react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var LoadingSpinner = ({
   size = "md",
   className,
@@ -7516,8 +9441,8 @@ var LoadingSpinner = ({
     foreground: "text-foreground",
     muted: "text-muted-foreground"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_lucide_react20.Activity,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_lucide_react25.Activity,
     {
       className: cn(
         "animate-spin",
@@ -7537,7 +9462,7 @@ var LoadingDots = ({
     foreground: "bg-foreground",
     muted: "bg-muted-foreground"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     {
       className: cn(
@@ -7559,7 +9484,7 @@ var LoadingBar = ({
   label
 }) => {
   const pct = progress ? Math.min(Math.max(progress, 0), 100) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     {
       className: cn("w-full bg-muted rounded-full h-2", className),
@@ -7568,7 +9493,7 @@ var LoadingBar = ({
       "aria-valuemax": pct === void 0 ? void 0 : 100,
       "aria-valuenow": pct === void 0 ? void 0 : Math.round(pct),
       "aria-label": label || "Loading",
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "div",
         {
           className: cn(
@@ -7585,10 +9510,10 @@ var LoadingBar = ({
 };
 
 // ../../components/ui/Table.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var Table = import_react21.default.forwardRef(
-  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var import_react22 = __toESM(require("react"), 1);
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Table = import_react22.default.forwardRef(
+  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       className: cn(
@@ -7598,7 +9523,7 @@ var Table = import_react21.default.forwardRef(
         "backdrop-blur-sm transition-all duration-300",
         containerClassName
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "table",
         {
           ref,
@@ -7610,8 +9535,8 @@ var Table = import_react21.default.forwardRef(
   )
 );
 Table.displayName = "Table";
-var TableHeader = import_react21.default.forwardRef(
-  ({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+var TableHeader = import_react22.default.forwardRef(
+  ({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "thead",
     {
       ref,
@@ -7629,7 +9554,7 @@ var TableHeader = import_react21.default.forwardRef(
   )
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TableBody = import_react22.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
   "tbody",
   {
     ref,
@@ -7638,7 +9563,7 @@ var TableBody = import_react21.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TableFooter = import_react22.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
   "tfoot",
   {
     ref,
@@ -7650,7 +9575,7 @@ var TableFooter = import_react21.default.forwardRef(({ className, ...props }, re
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TableRow = import_react22.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
   "tr",
   {
     ref,
@@ -7664,7 +9589,7 @@ var TableRow = import_react21.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TableHead = import_react22.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
   "th",
   {
     ref,
@@ -7676,7 +9601,7 @@ var TableHead = import_react21.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TableCell = import_react22.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
   "td",
   {
     ref,
@@ -7685,7 +9610,7 @@ var TableCell = import_react21.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TableCaption = import_react22.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
   "caption",
   {
     ref,
@@ -7696,13 +9621,13 @@ var TableCaption = import_react21.default.forwardRef(({ className, ...props }, r
 TableCaption.displayName = "TableCaption";
 
 // ../../components/ui/DataTable.tsx
-var import_lucide_react21 = require("lucide-react");
-var import_react22 = __toESM(require("react"), 1);
+var import_lucide_react26 = require("lucide-react");
+var import_react23 = __toESM(require("react"), 1);
 var import_next_intl7 = require("next-intl");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = import_react22.default.useState(value);
-  import_react22.default.useEffect(() => {
+  const [debounced, setDebounced] = import_react23.default.useState(value);
+  import_react23.default.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -7729,20 +9654,20 @@ function DataTable({
   labels
 }) {
   const t = (0, import_next_intl7.useTranslations)("Common");
-  const [visibleCols, setVisibleCols] = import_react22.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
-  const [filters, setFilters] = import_react22.default.useState({});
-  const [sort, setSort] = import_react22.default.useState(null);
-  const [density, setDensity] = import_react22.default.useState("normal");
-  const [curPage, setCurPage] = import_react22.default.useState(page);
-  const [curPageSize, setCurPageSize] = import_react22.default.useState(pageSize);
+  const [visibleCols, setVisibleCols] = import_react23.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
+  const [filters, setFilters] = import_react23.default.useState({});
+  const [sort, setSort] = import_react23.default.useState(null);
+  const [density, setDensity] = import_react23.default.useState("normal");
+  const [curPage, setCurPage] = import_react23.default.useState(page);
+  const [curPageSize, setCurPageSize] = import_react23.default.useState(pageSize);
   const debouncedFilters = useDebounced(filters, 350);
-  import_react22.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     setCurPage(page);
   }, [page]);
-  import_react22.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     setCurPageSize(pageSize);
   }, [pageSize]);
-  import_react22.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     if (!onQueryChange) return;
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
   }, [debouncedFilters, sort, curPage, curPageSize]);
@@ -7761,7 +9686,7 @@ function DataTable({
       className: "h-8 w-full text-sm"
     };
     if (col.filter.type === "text") {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Input_default,
         {
           ...commonProps,
@@ -7776,7 +9701,7 @@ function DataTable({
     }
     if (col.filter.type === "select") {
       const options = col.filter.options || [];
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Combobox,
         {
           options: ["", ...options],
@@ -7792,7 +9717,7 @@ function DataTable({
       );
     }
     if (col.filter.type === "date") {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         DatePicker,
         {
           placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
@@ -7806,7 +9731,7 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     TableHead,
     {
       style: { width: col.width },
@@ -7815,10 +9740,10 @@ function DataTable({
         col.align === "center" && "text-center",
         columnDividers && colIdx > 0 && "border-l border-border/60"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
-          col.sortable && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
+          col.sortable && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "button",
             {
               className: cn(
@@ -7835,8 +9760,8 @@ function DataTable({
               },
               "aria-label": "Sort",
               title: `Sort by ${String(col.title)}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   "path",
                   {
                     d: "M7 8l3-3 3 3",
@@ -7847,7 +9772,7 @@ function DataTable({
                     opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   "path",
                   {
                     d: "M7 12l3 3 3-3",
@@ -7862,11 +9787,11 @@ function DataTable({
             }
           )
         ] }),
-        col.filter && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        col.filter && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Popover,
           {
             placement: "bottom-start",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "button",
               {
                 className: cn(
@@ -7876,16 +9801,16 @@ function DataTable({
                 ),
                 "aria-label": "Filter",
                 title: "Filter",
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react21.Filter, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react26.Filter, { className: "h-4 w-4" })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
                 "Filter ",
                 col.title
               ] }),
               renderFilterControl(col),
-              filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                 "button",
                 {
                   onClick: () => {
@@ -7908,20 +9833,20 @@ function DataTable({
     col.key
   )) });
   const isServerMode = Boolean(onQueryChange);
-  const displayedData = isServerMode ? data : import_react22.default.useMemo(() => {
+  const displayedData = isServerMode ? data : import_react23.default.useMemo(() => {
     const start = (curPage - 1) * curPageSize;
     return data.slice(start, start + curPageSize);
   }, [data, curPage, curPageSize]);
   const totalItems = isServerMode ? total : data.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
-        enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
+        enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
               labels?.density || t("density")
             ] }),
             items: [
@@ -7931,11 +9856,11 @@ function DataTable({
             ]
           }
         ),
-        enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -7946,15 +9871,15 @@ function DataTable({
               ) }),
               labels?.columns || t("columns")
             ] }),
-            children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+            children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
               DropdownMenuItem,
               {
                 onClick: () => {
                   setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "truncate", children: c.title })
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "truncate", children: c.title })
                 ]
               },
               c.key
@@ -7964,17 +9889,17 @@ function DataTable({
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       Table,
       {
         containerClassName: "border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent",
         className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-[5] [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableHeader, { children: renderHeader }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHeader, { children: renderHeader }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                 "path",
                 {
                   className: "opacity-75",
@@ -7983,10 +9908,10 @@ function DataTable({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm", children: "Loading..." })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
             const value = col.dataIndex ? row[col.dataIndex] : void 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               TableCell,
               {
                 className: cn(
@@ -8005,7 +9930,7 @@ function DataTable({
         ]
       }
     ) }),
-    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       Pagination,
       {
         page: curPage,
@@ -8027,10 +9952,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // ../../components/ui/Form.tsx
-var React32 = __toESM(require("react"), 1);
+var React39 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-hook-form/dist/index.esm.mjs
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var isCheckBoxInput = (element) => element.type === "checkbox";
 var isDateObject = (value) => value instanceof Date;
 var isNullOrUndefined = (value) => value == null;
@@ -8118,12 +10043,12 @@ var INPUT_VALIDATION_RULES = {
   required: "required",
   validate: "validate"
 };
-var HookFormContext = import_react23.default.createContext(null);
+var HookFormContext = import_react24.default.createContext(null);
 HookFormContext.displayName = "HookFormContext";
-var useFormContext = () => import_react23.default.useContext(HookFormContext);
+var useFormContext = () => import_react24.default.useContext(HookFormContext);
 var FormProvider = (props) => {
   const { children, ...data } = props;
-  return import_react23.default.createElement(HookFormContext.Provider, { value: data }, children);
+  return import_react24.default.createElement(HookFormContext.Provider, { value: data }, children);
 };
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
   const result = {
@@ -8143,12 +10068,12 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
   }
   return result;
 };
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react23.default.useLayoutEffect : import_react23.default.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react24.default.useLayoutEffect : import_react24.default.useEffect;
 function useFormState(props) {
   const methods = useFormContext();
   const { control = methods.control, disabled, name, exact } = props || {};
-  const [formState, updateFormState] = import_react23.default.useState(control._formState);
-  const _localProxyFormState = import_react23.default.useRef({
+  const [formState, updateFormState] = import_react24.default.useState(control._formState);
+  const _localProxyFormState = import_react24.default.useRef({
     isDirty: false,
     isLoading: false,
     dirtyFields: false,
@@ -8169,10 +10094,10 @@ function useFormState(props) {
       });
     }
   }), [name, disabled, exact]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     _localProxyFormState.current.isValid && control._setValid(true);
   }, [control]);
-  return import_react23.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+  return import_react24.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 var isString = (value) => typeof value === "string";
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
@@ -8221,12 +10146,12 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
 function useWatch(props) {
   const methods = useFormContext();
   const { control = methods.control, name, defaultValue, disabled, exact, compute } = props || {};
-  const _defaultValue = import_react23.default.useRef(defaultValue);
-  const _compute = import_react23.default.useRef(compute);
-  const _computeFormValues = import_react23.default.useRef(void 0);
+  const _defaultValue = import_react24.default.useRef(defaultValue);
+  const _compute = import_react24.default.useRef(compute);
+  const _computeFormValues = import_react24.default.useRef(void 0);
   _compute.current = compute;
-  const defaultValueMemo = import_react23.default.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
-  const [value, updateValue] = import_react23.default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
+  const defaultValueMemo = import_react24.default.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
+  const [value, updateValue] = import_react24.default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
   useIsomorphicLayoutEffect(() => control._subscribe({
     name,
     formState: {
@@ -8248,14 +10173,14 @@ function useWatch(props) {
       }
     }
   }), [control, disabled, name, exact]);
-  import_react23.default.useEffect(() => control._removeUnmounted());
+  import_react24.default.useEffect(() => control._removeUnmounted());
   return value;
 }
 function useController(props) {
   const methods = useFormContext();
   const { name, disabled, control = methods.control, shouldUnregister, defaultValue } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
-  const defaultValueMemo = import_react23.default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
+  const defaultValueMemo = import_react24.default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
@@ -8267,15 +10192,15 @@ function useController(props) {
     name,
     exact: true
   });
-  const _props = import_react23.default.useRef(props);
-  const _previousNameRef = import_react23.default.useRef(void 0);
-  const _registerProps = import_react23.default.useRef(control.register(name, {
+  const _props = import_react24.default.useRef(props);
+  const _previousNameRef = import_react24.default.useRef(void 0);
+  const _registerProps = import_react24.default.useRef(control.register(name, {
     ...props.rules,
     value,
     ...isBoolean(props.disabled) ? { disabled: props.disabled } : {}
   }));
   _props.current = props;
-  const fieldState = import_react23.default.useMemo(() => Object.defineProperties({}, {
+  const fieldState = import_react24.default.useMemo(() => Object.defineProperties({}, {
     invalid: {
       enumerable: true,
       get: () => !!get(formState.errors, name)
@@ -8297,21 +10222,21 @@ function useController(props) {
       get: () => get(formState.errors, name)
     }
   }), [formState, name]);
-  const onChange = import_react23.default.useCallback((event) => _registerProps.current.onChange({
+  const onChange = import_react24.default.useCallback((event) => _registerProps.current.onChange({
     target: {
       value: getEventValue(event),
       name
     },
     type: EVENTS.CHANGE
   }), [name]);
-  const onBlur = import_react23.default.useCallback(() => _registerProps.current.onBlur({
+  const onBlur = import_react24.default.useCallback(() => _registerProps.current.onBlur({
     target: {
       value: get(control._formValues, name),
       name
     },
     type: EVENTS.BLUR
   }), [name, control._formValues]);
-  const ref = import_react23.default.useCallback((elm) => {
+  const ref = import_react24.default.useCallback((elm) => {
     const field2 = get(control._fields, name);
     if (field2 && elm) {
       field2._f.ref = {
@@ -8322,7 +10247,7 @@ function useController(props) {
       };
     }
   }, [control._fields, name]);
-  const field = import_react23.default.useMemo(() => ({
+  const field = import_react24.default.useMemo(() => ({
     name,
     value,
     ...isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {},
@@ -8330,7 +10255,7 @@ function useController(props) {
     onBlur,
     ref
   }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
     const previousName = _previousNameRef.current;
     if (previousName && previousName !== name && !isArrayField) {
@@ -8360,13 +10285,13 @@ function useController(props) {
       (isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
     };
   }, [name, control, isArrayField, shouldUnregister]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     control._setDisabledField({
       disabled,
       name
     });
   }, [disabled, name, control]);
-  return import_react23.default.useMemo(() => ({
+  return import_react24.default.useMemo(() => ({
     field,
     formState,
     fieldState
@@ -9685,9 +11610,9 @@ function createFormControl(props = {}) {
   };
 }
 function useForm(props = {}) {
-  const _formControl = import_react23.default.useRef(void 0);
-  const _values = import_react23.default.useRef(void 0);
-  const [formState, updateFormState] = import_react23.default.useState({
+  const _formControl = import_react24.default.useRef(void 0);
+  const _values = import_react24.default.useRef(void 0);
+  const [formState, updateFormState] = import_react24.default.useState({
     isDirty: false,
     isValidating: false,
     isLoading: isFunction(props.defaultValues),
@@ -9736,8 +11661,8 @@ function useForm(props = {}) {
     control._formState.isReady = true;
     return sub;
   }, [control]);
-  import_react23.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+  import_react24.default.useEffect(() => {
     if (props.mode) {
       control._options.mode = props.mode;
     }
@@ -9745,18 +11670,18 @@ function useForm(props = {}) {
       control._options.reValidateMode = props.reValidateMode;
     }
   }, [control, props.mode, props.reValidateMode]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (props.errors) {
       control._setErrors(props.errors);
       control._focusError();
     }
   }, [control, props.errors]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     props.shouldUnregister && control._subjects.state.next({
       values: control._getWatch()
     });
   }, [control, props.shouldUnregister]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (control._proxyFormState.isDirty) {
       const isDirty = control._getDirty();
       if (isDirty !== formState.isDirty) {
@@ -9766,7 +11691,7 @@ function useForm(props = {}) {
       }
     }
   }, [control, formState.isDirty]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (props.values && !deepEqual(props.values, _values.current)) {
       control._reset(props.values, {
         keepFieldsRef: true,
@@ -9778,7 +11703,7 @@ function useForm(props = {}) {
       control._resetDefaultValues();
     }
   }, [control, props.values]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (!control._state.mount) {
       control._setValid();
       control._state.mount = true;
@@ -9795,8 +11720,8 @@ function useForm(props = {}) {
 
 // ../../components/ui/Form.tsx
 var import_next_intl8 = require("next-intl");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var FormConfigContext = React32.createContext({ size: "md" });
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var FormConfigContext = React39.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -9809,24 +11734,24 @@ var FormWrapper = ({
   const methods = useForm({
     defaultValues: initialValues
   });
-  React32.useEffect(() => {
+  React39.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
   }, [JSON.stringify(initialValues)]);
   const { validationSchema: _, ...formProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React32.createContext({});
+var FormFieldContext = React39.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Controller, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React32.useContext(FormFieldContext);
-  const itemContext = React32.useContext(FormItemContext);
+  const fieldContext = React39.useContext(FormFieldContext);
+  const itemContext = React39.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     try {
@@ -9847,22 +11772,22 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React32.createContext({});
-var FormItem = React32.forwardRef(({ className, ...props }, ref) => {
-  const id = React32.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+var FormItemContext = React39.createContext({});
+var FormItem = React39.forwardRef(({ className, ...props }, ref) => {
+  const id = React39.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React32.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React39.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  const config = React32.useContext(FormConfigContext);
+  const config = React39.useContext(FormConfigContext);
   const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React32.forwardRef(({ ...props }, ref) => {
+var FormControl = React39.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       ref,
@@ -9874,37 +11799,37 @@ var FormControl = React32.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React32.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React39.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React32.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React39.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var FormInput = React39.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(FormItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormMessage, {})
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormMessage, {})
     ] })
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var FormCheckbox = React39.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(FormItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         Checkbox,
         {
           ref,
@@ -9918,24 +11843,24 @@ var FormCheckbox = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__
           ...props
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormMessage, {})
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormMessage, {})
     ] })
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React32.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
+var FormSubmitButton = React39.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
 FormSubmitButton.displayName = "FormSubmitButton";
 
 // ../../components/ui/NotificationModal.tsx
-var import_lucide_react22 = require("lucide-react");
+var import_lucide_react27 = require("lucide-react");
 var import_next_intl9 = require("next-intl");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = (0, import_next_intl9.useTranslations)("Common");
   if (!notification) return null;
-  const formatTime2 = (dateString) => {
+  const formatTime3 = (dateString) => {
     const date = new Date(dateString);
     return date.toLocaleString(void 0, {
       year: "numeric",
@@ -9952,26 +11877,26 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       onClose();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     Modal_default,
     {
       isOpen,
       onClose,
       title: titleText || t("notifications"),
       size: "md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn(
             "w-2 h-2 rounded-full",
             !notification.is_read ? "bg-primary" : "bg-border"
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
         ] }),
-        notification.title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
-        notification.body && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime2(notification.created_at) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
-          hasLink && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        notification.title && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
+        notification.body && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
+          hasLink && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
             Button_default,
             {
               variant: "primary",
@@ -9979,12 +11904,12 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
               onClick: handleLinkClick,
               className: "gap-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react22.ExternalLink, { className: "w-4 h-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react27.ExternalLink, { className: "w-4 h-4" }),
                 openLinkText || t("openLink")
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             Button_default,
             {
               variant: "ghost",
@@ -10003,13 +11928,13 @@ var NotificationModal_default = NotificationModal;
 // ../../components/ui/FloatingContacts.tsx
 var import_link2 = __toESM(require("next/link"), 1);
 var import_navigation = require("next/navigation");
-var import_lucide_react23 = require("lucide-react");
+var import_lucide_react28 = require("lucide-react");
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
-var import_react25 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-icons/lib/iconContext.mjs
-var import_react24 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -10017,7 +11942,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = import_react24.default.createContext && /* @__PURE__ */ import_react24.default.createContext(DefaultContext);
+var IconContext = import_react25.default.createContext && /* @__PURE__ */ import_react25.default.createContext(DefaultContext);
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
 var _excluded = ["attr", "size", "title"];
@@ -10106,12 +12031,12 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ import_react25.default.createElement(node.tag, _objectSpread({
+  return tree && tree.map((node, i) => /* @__PURE__ */ import_react26.default.createElement(node.tag, _objectSpread({
     key: i
   }, node.attr), Tree2Element(node.child)));
 }
 function GenIcon(data) {
-  return (props) => /* @__PURE__ */ import_react25.default.createElement(IconBase, _extends({
+  return (props) => /* @__PURE__ */ import_react26.default.createElement(IconBase, _extends({
     attr: _objectSpread({}, data.attr)
   }, props), Tree2Element(data.child));
 }
@@ -10126,7 +12051,7 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ import_react25.default.createElement("svg", _extends({
+    return /* @__PURE__ */ import_react26.default.createElement("svg", _extends({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -10138,9 +12063,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ import_react25.default.createElement("title", null, title), props.children);
+    }), title && /* @__PURE__ */ import_react26.default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? /* @__PURE__ */ import_react25.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+  return IconContext !== void 0 ? /* @__PURE__ */ import_react26.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
 }
 
 // ../../node_modules/react-icons/fa/index.mjs
@@ -10154,9 +12079,9 @@ function SiZalo(props) {
 }
 
 // ../../components/ui/FloatingContacts.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function MessengerIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "path",
     {
       d: "M12 2C6.477 2 2 6.145 2 11.235c0 2.93 1.35 5.542 3.464 7.25v3.515l3.344-1.836c.894.247 1.843.375 2.192.375 5.523 0 10-4.145 10-9.235S17.523 2 12 2zm.994 12.444l-2.563-2.73-5.004 2.73 5.507-5.84 2.626 2.729 4.942-2.729-5.508 5.84z",
@@ -10165,10 +12090,10 @@ function MessengerIcon(props) {
   ) });
 }
 function ZaloIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SiZalo, { size: 20, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SiZalo, { size: 20, ...props });
 }
 function InstagramIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FaInstagram, { size: 20, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FaInstagram, { size: 20, ...props });
 }
 function FloatingContacts({ className }) {
   const pathname = (0, import_navigation.usePathname)();
@@ -10203,8 +12128,8 @@ function FloatingContacts({ className }) {
       external: true
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-[100000]", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-[100000]", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       import_link2.default,
       {
         href: `tel:${hotline.replace(/\D/g, "")}`,
@@ -10215,10 +12140,10 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           "bg-[#22c55e]"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react23.Phone, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react28.Phone, { className: "w-6 h-6" })
       }
     ),
-    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       import_link2.default,
       {
         href,
@@ -10230,7 +12155,7 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           bg
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { className: "w-6 h-6" })
       },
       key
     ))
@@ -10238,17 +12163,17 @@ function FloatingContacts({ className }) {
 }
 
 // ../../components/ui/AccessDenied.tsx
-var import_lucide_react24 = require("lucide-react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_lucide_react29 = require("lucide-react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var VARIANT_STYLES = {
   destructive: { bg: "bg-destructive/5", border: "border-destructive/20", text: "text-destructive" },
   warning: { bg: "bg-warning/5", border: "border-warning/20", text: "text-warning" },
   info: { bg: "bg-info/5", border: "border-info/20", text: "text-info" }
 };
 var DEFAULT_ICONS = {
-  destructive: import_lucide_react24.ShieldAlert,
-  warning: import_lucide_react24.Ban,
-  info: import_lucide_react24.Lock
+  destructive: import_lucide_react29.ShieldAlert,
+  warning: import_lucide_react29.Ban,
+  info: import_lucide_react29.Lock
 };
 function AccessDenied({
   title = "Access Restricted",
@@ -10260,36 +12185,36 @@ function AccessDenied({
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
   ] }) });
 }
 
 // ../../components/ui/ThemeToggleHeadless.tsx
-var import_lucide_react25 = require("lucide-react");
-var import_react26 = require("react");
-var import_react_dom9 = require("react-dom");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_lucide_react30 = require("lucide-react");
+var import_react27 = require("react");
+var import_react_dom10 = require("react-dom");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
   theme,
   onChange,
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
-  const [mounted, setMounted] = (0, import_react26.useState)(false);
-  const triggerRef = (0, import_react26.useRef)(null);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react26.useState)(null);
-  (0, import_react26.useEffect)(() => setMounted(true), []);
+  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
+  const [mounted, setMounted] = (0, import_react27.useState)(false);
+  const triggerRef = (0, import_react27.useRef)(null);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react27.useState)(null);
+  (0, import_react27.useEffect)(() => setMounted(true), []);
   const themes = [
-    { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react25.Sun },
-    { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react25.Moon },
-    { value: "system", label: labels?.system ?? "System", icon: import_lucide_react25.Monitor }
+    { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react30.Sun },
+    { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react30.Moon },
+    { value: "system", label: labels?.system ?? "System", icon: import_lucide_react30.Monitor }
   ];
   const current = mounted ? themes.find((t) => t.value === theme) || themes[2] : themes[2];
   const CurrentIcon = current.icon;
@@ -10303,8 +12228,8 @@ function ThemeToggleHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -10322,25 +12247,25 @@ function ThemeToggleHeadless({
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Theme",
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CurrentIcon, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom9.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom9.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom10.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "div",
           {
             className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
               themes.map((opt) => {
                 const Icon = opt.icon;
                 const active = theme === opt.value;
-                return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -10356,9 +12281,9 @@ function ThemeToggleHeadless({
                     role: "menuitemradio",
                     "aria-checked": active,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
-                      active && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                     ]
                   },
                   opt.value
@@ -10374,10 +12299,10 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-var import_react27 = require("react");
-var import_react_dom10 = require("react-dom");
-var import_lucide_react26 = require("lucide-react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_react_dom11 = require("react-dom");
+var import_lucide_react31 = require("lucide-react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -10385,9 +12310,9 @@ function LanguageSwitcherHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react27.useState)(null);
-  const triggerButtonRef = (0, import_react27.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react28.useState)(null);
+  const triggerButtonRef = (0, import_react28.useRef)(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -10399,8 +12324,8 @@ function LanguageSwitcherHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -10419,22 +12344,22 @@ function LanguageSwitcherHeadless({
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Language",
         title: labels?.heading ?? "Language",
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.Globe, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react31.Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom10.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom11.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
-              locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
+              locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -10447,9 +12372,9 @@ function LanguageSwitcherHeadless({
                   role: "menuitemradio",
                   "aria-checked": currentLocale === language.code,
                   children: [
-                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-lg", children: language.flag }),
-                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "flex-1 text-left", children: language.name }),
-                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                   ]
                 },
                 language.code
@@ -10606,12 +12531,14 @@ function getUnderverseMessages(locale = "en") {
   Breadcrumb,
   Button,
   ButtonLoading,
+  Calendar,
   Card,
   Carousel,
   CategoryTreeSelect,
   Checkbox,
   CircularProgress,
   ClientOnly,
+  ColorPicker,
   Combobox,
   CompactPagination,
   DataTable,
@@ -10637,6 +12564,8 @@ function getUnderverseMessages(locale = "en") {
   FormSubmitButton,
   GlobalLoading,
   GradientBadge,
+  Grid,
+  GridItem,
   ImageUpload,
   InlineLoading,
   Input,
@@ -10644,6 +12573,8 @@ function getUnderverseMessages(locale = "en") {
   Label,
   LanguageSwitcher,
   LanguageSwitcherHeadless,
+  List,
+  ListItem,
   LoadingBar,
   LoadingDots,
   LoadingProgress,
@@ -10702,11 +12633,15 @@ function getUnderverseMessages(locale = "en") {
   Textarea,
   ThemeToggle,
   ThemeToggleHeadless,
+  TimePicker,
+  Timeline,
+  TimelineItem,
   ToastProvider,
   Tooltip,
   VARIANT_STYLES_ALERT,
   VARIANT_STYLES_BTN,
   VerticalTabs,
+  Watermark,
   cn,
   getUnderverseMessages,
   underverseMessages,