@underverse-ui/underverse 0.1.25 → 0.1.28

package/dist/index.js

@@ -5758,6 +5758,8 @@ var Slider = React24.forwardRef(
     step = 1,
     onChange,
     onValueChange,
+    onMouseUp,
+    onTouchEnd,
     label,
     labelClassName,
     containerClassName,
@@ -5811,6 +5813,8 @@ var Slider = React24.forwardRef(
             step,
             value: currentValue,
             onChange: handleChange,
+            onMouseUp,
+            onTouchEnd,
             disabled,
             className: cn(
               // Base styles
@@ -5862,10 +5866,441 @@ var Slider = React24.forwardRef(
 );
 Slider.displayName = "Slider";
 
+// ../../components/ui/OverlayControls.tsx
+import { Dot, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
+import React25 from "react";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+function OverlayControls({
+  mode,
+  value,
+  max,
+  step = 0.1,
+  onChange,
+  onCommit,
+  playing = false,
+  onTogglePlay,
+  onGoLive,
+  volume,
+  muted,
+  onVolumeChange,
+  onToggleMute,
+  rate = 1,
+  onChangeRate,
+  onToggleFullscreen,
+  showOnHover = false,
+  className,
+  showTime,
+  skipSeconds = 10,
+  onSkip,
+  onSeekPreview,
+  autoHide = false,
+  autoHideDelay = 3e3,
+  enableKeyboardShortcuts = true
+}) {
+  const hoverClasses = showOnHover ? "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto" : "opacity-100 pointer-events-auto";
+  const showControlsBar = mode === "review";
+  const [rateOpen, setRateOpen] = React25.useState(false);
+  const rateWrapRef = React25.useRef(null);
+  const [controlsVisible, setControlsVisible] = React25.useState(true);
+  const hideTimerRef = React25.useRef(null);
+  const [previewData, setPreviewData] = React25.useState(null);
+  const sliderRef = React25.useRef(null);
+  const [isDragging, setIsDragging] = React25.useState(false);
+  const [dragValue, setDragValue] = React25.useState(value);
+  React25.useEffect(() => {
+    if (!isDragging) {
+      setDragValue(value);
+    }
+  }, [value, isDragging]);
+  const [keyboardFeedback, setKeyboardFeedback] = React25.useState(null);
+  const feedbackTimerRef = React25.useRef(null);
+  const seekAccumulatorRef = React25.useRef(0);
+  const seekAccumulatorTimerRef = React25.useRef(null);
+  React25.useEffect(() => {
+    const onDocDown = (e) => {
+      if (!rateOpen) return;
+      const wrap = rateWrapRef.current;
+      if (wrap && !wrap.contains(e.target)) {
+        setRateOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocDown);
+    return () => document.removeEventListener("mousedown", onDocDown);
+  }, [rateOpen]);
+  React25.useEffect(() => {
+    if (!autoHide || showOnHover) return;
+    const resetTimer = () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+      setControlsVisible(true);
+      hideTimerRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, autoHideDelay);
+    };
+    const handleMouseMove = () => resetTimer();
+    const handleMouseLeave = () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, autoHideDelay);
+    };
+    resetTimer();
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [autoHide, autoHideDelay, showOnHover]);
+  const showFeedback = (type, value2) => {
+    if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
+    setKeyboardFeedback({ type, value: value2 });
+    feedbackTimerRef.current = setTimeout(() => {
+      setKeyboardFeedback(null);
+    }, 800);
+  };
+  const accumulateSeek = (seconds) => {
+    if (seekAccumulatorTimerRef.current) clearTimeout(seekAccumulatorTimerRef.current);
+    seekAccumulatorRef.current += seconds;
+    showFeedback("seek", seekAccumulatorRef.current);
+    seekAccumulatorTimerRef.current = setTimeout(() => {
+      seekAccumulatorRef.current = 0;
+    }, 1e3);
+  };
+  React25.useEffect(() => {
+    if (!enableKeyboardShortcuts) return;
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      switch (e.key) {
+        case " ":
+        case "k":
+          e.preventDefault();
+          onTogglePlay?.();
+          showFeedback(playing ? "pause" : "play");
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (e.shiftKey) {
+            onSkip?.(-skipSeconds);
+            accumulateSeek(-skipSeconds);
+          } else {
+            {
+              const newTime = Math.max(0, value - 5);
+              onChange(newTime);
+              onCommit?.(newTime);
+            }
+            accumulateSeek(-5);
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (e.shiftKey) {
+            onSkip?.(skipSeconds);
+            accumulateSeek(skipSeconds);
+          } else {
+            {
+              const newTime = Math.min(max, value + 5);
+              onChange(newTime);
+              onCommit?.(newTime);
+            }
+            accumulateSeek(5);
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (onVolumeChange && volume !== void 0) {
+            const newVolume = Math.min(1, volume + 0.05);
+            onVolumeChange(newVolume);
+            showFeedback("volume", Math.round(newVolume * 100));
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (onVolumeChange && volume !== void 0) {
+            const newVolume = Math.max(0, volume - 0.05);
+            onVolumeChange(newVolume);
+            showFeedback("volume", Math.round(newVolume * 100));
+          }
+          break;
+        case "f":
+        case "F":
+          e.preventDefault();
+          onToggleFullscreen?.();
+          break;
+        case "m":
+        case "M":
+          e.preventDefault();
+          onToggleMute?.();
+          showFeedback(muted ? "unmute" : "mute");
+          break;
+        case "j":
+          e.preventDefault();
+          onSkip?.(-skipSeconds);
+          accumulateSeek(-skipSeconds);
+          break;
+        case "l":
+          e.preventDefault();
+          onSkip?.(skipSeconds);
+          accumulateSeek(skipSeconds);
+          break;
+        default:
+          if (e.key >= "0" && e.key <= "9") {
+            e.preventDefault();
+            const percent = parseInt(e.key) * 10;
+            const newTime = percent / 100 * max;
+            onChange(newTime);
+            onCommit?.(newTime);
+          }
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [
+    enableKeyboardShortcuts,
+    mode,
+    onTogglePlay,
+    onSkip,
+    skipSeconds,
+    onChange,
+    value,
+    max,
+    onVolumeChange,
+    volume,
+    onToggleFullscreen,
+    onToggleMute,
+    playing,
+    muted
+  ]);
+  const formatTime2 = (sec) => {
+    if (!isFinite(sec) || sec < 0) return "0:00";
+    const h = Math.floor(sec / 3600);
+    const m = Math.floor(sec % 3600 / 60);
+    const s = Math.floor(sec % 60);
+    if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    return `${m}:${String(s).padStart(2, "0")}`;
+  };
+  const handleSliderMouseMove = (e) => {
+    if (!sliderRef.current) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percent = Math.max(0, Math.min(1, x / rect.width));
+    const time = percent * max;
+    const thumbnailUrl = onSeekPreview ? onSeekPreview(time) : void 0;
+    setPreviewData({ time, x: e.clientX - rect.left, url: thumbnailUrl });
+  };
+  const handleSliderMouseLeave = () => {
+    setPreviewData(null);
+  };
+  return /* @__PURE__ */ jsxs27(Fragment7, { children: [
+    keyboardFeedback && /* @__PURE__ */ jsx31(
+      "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__ */ jsxs27("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__ */ jsx31(Play, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "pause" && /* @__PURE__ */ jsx31(Pause, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "seek" && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-3", children: [
+            (keyboardFeedback.value ?? 0) > 0 ? /* @__PURE__ */ jsx31(RotateCw, { className: "w-12 h-12 text-white" }) : /* @__PURE__ */ jsx31(RotateCcw, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ jsxs27("span", { className: "text-3xl font-bold text-white", children: [
+              keyboardFeedback.value && keyboardFeedback.value > 0 ? "+" : "",
+              keyboardFeedback.value,
+              "s"
+            ] })
+          ] }),
+          keyboardFeedback.type === "volume" && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx31(Volume2, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsxs27("span", { className: "text-2xl font-bold text-white", children: [
+                keyboardFeedback.value,
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx31("div", { className: "w-32 h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx31("div", { className: "h-full bg-white rounded-full transition-all", style: { width: `${keyboardFeedback.value}%` } }) })
+            ] })
+          ] }),
+          keyboardFeedback.type === "mute" && /* @__PURE__ */ jsx31(VolumeX, { className: "w-16 h-16 text-white" }),
+          keyboardFeedback.type === "unmute" && /* @__PURE__ */ jsx31(Volume2, { className: "w-16 h-16 text-white" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx31(
+      "div",
+      {
+        className: cn(
+          "absolute bottom-0 left-0 right-0 pb-2 pt-8 bg-gradient-to-t from-black/40 to-transparent z-20 transition-opacity duration-200",
+          hoverClasses,
+          autoHide && !controlsVisible && "opacity-0 pointer-events-none",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs27("div", { className: "px-4", children: [
+          /* @__PURE__ */ jsxs27("div", { ref: sliderRef, onMouseMove: handleSliderMouseMove, onMouseLeave: handleSliderMouseLeave, className: "relative", children: [
+            /* @__PURE__ */ jsx31(
+              Slider,
+              {
+                min: 0,
+                max: max || 0,
+                step,
+                value: dragValue,
+                onValueChange: (v) => {
+                  setIsDragging(true);
+                  setDragValue(v);
+                  onChange(v);
+                },
+                onMouseUp: () => {
+                  onCommit?.(dragValue);
+                  setIsDragging(false);
+                },
+                onTouchEnd: () => {
+                  onCommit?.(dragValue);
+                  setIsDragging(false);
+                },
+                trackClassName: "bg-muted",
+                size: "sm",
+                noFocus: true
+              }
+            ),
+            previewData && /* @__PURE__ */ jsx31("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__ */ jsxs27("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
+              /* @__PURE__ */ jsx31("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
+              /* @__PURE__ */ jsx31("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime2(previewData.time) })
+            ] }) : /* @__PURE__ */ jsx31("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ jsx31("div", { className: "text-xs font-mono text-center", children: formatTime2(previewData.time) }) }) })
+          ] }),
+          showControlsBar && /* @__PURE__ */ jsxs27("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx31(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  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__ */ jsx31(Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx31(Play, { className: "w-4 h-4" })
+                }
+              ),
+              onSkip && /* @__PURE__ */ jsx31(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  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__ */ jsx31(RotateCcw, { className: "w-4 h-4" })
+                }
+              ),
+              onSkip && /* @__PURE__ */ jsx31(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  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__ */ jsx31(RotateCw, { className: "w-4 h-4" })
+                }
+              ),
+              (showTime ?? true) && /* @__PURE__ */ jsxs27("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),
+                " / ",
+                formatTime2(max)
+              ] }),
+              /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx31(
+                  Button_default,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    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__ */ jsx31(VolumeX, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx31(Volume2, { className: "w-4 h-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx31("div", { className: "w-24", children: /* @__PURE__ */ jsx31(
+                  Slider,
+                  {
+                    min: 0,
+                    max: 1,
+                    step: 0.05,
+                    value: Math.max(0, Math.min(volume ?? 1, 1)),
+                    onValueChange: (v) => onVolumeChange?.(v),
+                    trackClassName: "bg-muted",
+                    size: "sm",
+                    noFocus: true
+                  }
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 relative", children: [
+              onGoLive && /* @__PURE__ */ jsxs27(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onGoLive,
+                  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__ */ jsx31(Dot, { className: "w-10 h-10 text-destructive" }),
+                    "Tr\u1EF1c ti\u1EBFp"
+                  ]
+                }
+              ),
+              onChangeRate && /* @__PURE__ */ jsxs27("div", { className: "relative", ref: rateWrapRef, children: [
+                /* @__PURE__ */ jsxs27(
+                  Button_default,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: () => setRateOpen((o) => !o),
+                    title: "T\u1ED1c \u0111\u1ED9 ph\xE1t",
+                    className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
+                    children: [
+                      rate,
+                      "x"
+                    ]
+                  }
+                ),
+                rateOpen && /* @__PURE__ */ jsx31("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__ */ jsxs27(
+                  "button",
+                  {
+                    onClick: () => {
+                      onChangeRate(r);
+                      setRateOpen(false);
+                    },
+                    className: cn("block w-full text-left px-3 py-1 text-sm rounded hover:bg-accent", rate === r && "bg-accent"),
+                    children: [
+                      r,
+                      "x"
+                    ]
+                  },
+                  r
+                )) })
+              ] }),
+              onToggleFullscreen && /* @__PURE__ */ jsx31(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  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__ */ jsx31(Maximize2, { className: "w-4 h-4" })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
 // ../../components/ui/CategoryTreeSelect.tsx
 import { useState as useState23 } from "react";
 import { ChevronRight as ChevronRight4, ChevronDown as ChevronDown3, Check as Check5 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1ECDn danh m\u1EE5c", disabled }) {
   const [isOpen, setIsOpen] = useState23(false);
   const [expandedNodes, setExpandedNodes] = useState23(/* @__PURE__ */ new Set());
@@ -5907,8 +6342,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__ */ jsxs27("div", { children: [
-      /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs28("div", { children: [
+      /* @__PURE__ */ jsxs28(
         "div",
         {
           className: cn(
@@ -5918,7 +6353,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
           ),
           style: { paddingLeft: `${level * 1.5 + 0.75}rem` },
           children: [
-            hasChildren ? /* @__PURE__ */ jsx31(
+            hasChildren ? /* @__PURE__ */ jsx32(
               "button",
               {
                 type: "button",
@@ -5927,39 +6362,39 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
                   toggleExpand(category.id);
                 },
                 className: "p-0.5 hover:bg-accent rounded",
-                children: isExpanded ? /* @__PURE__ */ jsx31(ChevronDown3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx31(ChevronRight4, { className: "w-4 h-4" })
+                children: isExpanded ? /* @__PURE__ */ jsx32(ChevronDown3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx32(ChevronRight4, { className: "w-4 h-4" })
               }
-            ) : /* @__PURE__ */ jsx31("span", { className: "w-5" }),
-            /* @__PURE__ */ jsxs27(
+            ) : /* @__PURE__ */ jsx32("span", { className: "w-5" }),
+            /* @__PURE__ */ jsxs28(
               "div",
               {
                 onClick: () => handleSelect(category.id, category),
                 className: "flex items-center gap-2 flex-1",
                 children: [
-                  /* @__PURE__ */ jsx31(
+                  /* @__PURE__ */ jsx32(
                     "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__ */ jsx31(Check5, { className: "w-3 h-3 text-primary-foreground" })
+                      children: isSelected && /* @__PURE__ */ jsx32(Check5, { className: "w-3 h-3 text-primary-foreground" })
                     }
                   ),
-                  /* @__PURE__ */ jsx31("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+                  /* @__PURE__ */ jsx32("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
                 ]
               }
             )
           ]
         }
       ),
-      hasChildren && isExpanded && /* @__PURE__ */ jsx31("div", { children: children.map((child) => renderCategory(child, level + 1)) })
+      hasChildren && isExpanded && /* @__PURE__ */ jsx32("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__ */ jsxs27("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs28(
       "button",
       {
         type: "button",
@@ -5972,22 +6407,22 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
           isOpen && "border-primary ring-1 ring-primary"
         ),
         children: [
-          /* @__PURE__ */ jsx31("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
-          /* @__PURE__ */ jsx31(ChevronDown3, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
+          /* @__PURE__ */ jsx32("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
+          /* @__PURE__ */ jsx32(ChevronDown3, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
         ]
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ jsxs27(Fragment7, { children: [
-      /* @__PURE__ */ jsx31("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ jsx31("div", { className: "absolute z-20 mt-1 w-full max-h-80 overflow-auto bg-background border rounded-md shadow-lg", children: /* @__PURE__ */ jsx31("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ jsx31("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)) }) })
+    isOpen && !disabled && /* @__PURE__ */ jsxs28(Fragment8, { children: [
+      /* @__PURE__ */ jsx32("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
+      /* @__PURE__ */ jsx32("div", { className: "absolute z-20 mt-1 w-full max-h-80 overflow-auto bg-background border rounded-md shadow-lg", children: /* @__PURE__ */ jsx32("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ jsx32("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)) }) })
     ] })
   ] });
 }
 
 // ../../components/ui/SmartImage.tsx
 import Image from "next/image";
-import React26 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import React27 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var DEFAULT_FALLBACK = "/images/products/hoa-hong-do.png";
 function SmartImage({
   src,
@@ -6011,7 +6446,7 @@ function SmartImage({
     }
     return input;
   };
-  const [resolvedSrc, setResolvedSrc] = React26.useState(() => normalize(src));
+  const [resolvedSrc, setResolvedSrc] = React27.useState(() => normalize(src));
   const handleError = () => {
     if (resolvedSrc.endsWith(".jpg")) {
       setResolvedSrc(resolvedSrc.replace(/\.jpg($|\?)/, ".png$1"));
@@ -6019,9 +6454,9 @@ function SmartImage({
       setResolvedSrc(fallbackSrc);
     }
   };
-  const Wrapper = ({ children }) => /* @__PURE__ */ jsx32("div", { className: cn("relative overflow-hidden bg-muted/30", ratioClass, roundedClass, className), children });
+  const Wrapper = ({ children }) => /* @__PURE__ */ jsx33("div", { className: cn("relative overflow-hidden bg-muted/30", ratioClass, roundedClass, className), children });
   if (fill) {
-    return /* @__PURE__ */ jsx32(Wrapper, { children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33(Wrapper, { children: /* @__PURE__ */ jsx33(
       Image,
       {
         src: resolvedSrc,
@@ -6035,7 +6470,7 @@ function SmartImage({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx32("div", { className: cn("relative overflow-hidden bg-muted/30", roundedClass, className), children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33("div", { className: cn("relative overflow-hidden bg-muted/30", roundedClass, className), children: /* @__PURE__ */ jsx33(
     Image,
     {
       src: resolvedSrc,
@@ -6055,7 +6490,7 @@ function SmartImage({
 import { useState as useState24, useRef as useRef9, useCallback as useCallback7 } from "react";
 import { Upload, X as X8, Image as ImageIcon, Loader2 as Loader22, Check as Check6 } from "lucide-react";
 import { useTranslations as useTranslations6 } from "next-intl";
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function ImageUpload({
   onUpload,
   onRemove,
@@ -6177,8 +6612,8 @@ function ImageUpload({
   const handleBrowseClick = () => {
     fileInputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs28("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs29(
       "div",
       {
         className: cn(
@@ -6191,15 +6626,15 @@ function ImageUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          uploading && /* @__PURE__ */ jsx33("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx33(Loader22, { className: "w-6 h-6 animate-spin text-primary" }),
-            /* @__PURE__ */ jsx33("span", { className: "text-sm font-medium", children: "Uploading..." })
+          uploading && /* @__PURE__ */ jsx34("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx34(Loader22, { className: "w-6 h-6 animate-spin text-primary" }),
+            /* @__PURE__ */ jsx34("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
-          /* @__PURE__ */ jsxs28("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsx33("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx33(Upload, { className: "w-6 h-6 text-primary" }) }),
-            /* @__PURE__ */ jsxs28("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx33("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
-              /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsxs29("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx34("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx34(Upload, { className: "w-6 h-6 text-primary" }) }),
+            /* @__PURE__ */ jsxs29("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx34("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
+              /* @__PURE__ */ jsx34(
                 Button_default,
                 {
                   type: "button",
@@ -6211,9 +6646,9 @@ function ImageUpload({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx33("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
+            /* @__PURE__ */ jsx34("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
           ] }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "input",
             {
               ref: fileInputRef,
@@ -6228,25 +6663,25 @@ function ImageUpload({
         ]
       }
     ),
-    showPreview && uploadedImages.length > 0 && /* @__PURE__ */ jsxs28("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx33("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ jsx33("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ jsxs28(
+    showPreview && uploadedImages.length > 0 && /* @__PURE__ */ jsxs29("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx34("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
+      /* @__PURE__ */ jsx34("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ jsxs29(
         "div",
         {
           className: "relative group bg-card border border-border rounded-lg p-3",
           children: [
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               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__ */ jsx33(X8, { className: "w-3 h-3" })
+                children: /* @__PURE__ */ jsx34(X8, { className: "w-3 h-3" })
               }
             ),
-            /* @__PURE__ */ jsxs28("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
-              /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsxs29("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
+              /* @__PURE__ */ jsx34(
                 "img",
                 {
                   src: image.url,
@@ -6259,18 +6694,18 @@ function ImageUpload({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx33("div", { className: "hidden w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx33(ImageIcon, { className: "w-8 h-8 text-muted-foreground" }) })
+              /* @__PURE__ */ jsx34("div", { className: "hidden w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx34(ImageIcon, { className: "w-8 h-8 text-muted-foreground" }) })
             ] }),
-            /* @__PURE__ */ jsxs28("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx33("p", { className: "text-xs font-medium truncate", title: image.originalName, children: image.originalName }),
-              /* @__PURE__ */ jsx33("p", { className: "text-xs text-muted-foreground", children: image.formattedSize }),
-              image.width && image.height && /* @__PURE__ */ jsxs28("p", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs29("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx34("p", { className: "text-xs font-medium truncate", title: image.originalName, children: image.originalName }),
+              /* @__PURE__ */ jsx34("p", { className: "text-xs text-muted-foreground", children: image.formattedSize }),
+              image.width && image.height && /* @__PURE__ */ jsxs29("p", { className: "text-xs text-muted-foreground", children: [
                 image.width,
                 " \xD7 ",
                 image.height
               ] })
             ] }),
-            /* @__PURE__ */ jsx33("div", { className: "absolute top-1 left-1 w-5 h-5 bg-success rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx33(Check6, { className: "w-3 h-3 text-success-foreground" }) })
+            /* @__PURE__ */ jsx34("div", { className: "absolute top-1 left-1 w-5 h-5 bg-success rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx34(Check6, { className: "w-3 h-3 text-success-foreground" }) })
           ]
         },
         image.id
@@ -6280,30 +6715,30 @@ function ImageUpload({
 }
 
 // ../../components/ui/Carousel.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
-  const [currentIndex, setCurrentIndex] = React27.useState(0);
-  const totalSlides = React27.Children.count(children);
-  const [isPaused, setIsPaused] = React27.useState(false);
-  const scrollPrev = React27.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React28.useState(0);
+  const totalSlides = React28.Children.count(children);
+  const [isPaused, setIsPaused] = React28.useState(false);
+  const scrollPrev = React28.useCallback(() => {
     setCurrentIndex((prev) => prev > 0 ? prev - 1 : totalSlides - 1);
   }, [totalSlides]);
-  const scrollNext = React27.useCallback(() => {
+  const scrollNext = React28.useCallback(() => {
     setCurrentIndex((prev) => prev < totalSlides - 1 ? prev + 1 : 0);
   }, [totalSlides]);
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (!autoScroll || isPaused || totalSlides <= 1) return;
     const interval = setInterval(() => {
       scrollNext();
     }, autoScrollInterval);
     return () => clearInterval(interval);
   }, [autoScroll, isPaused, totalSlides, autoScrollInterval, scrollNext]);
-  return /* @__PURE__ */ jsxs29("div", { className: "relative w-full overflow-hidden", onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), children: [
-    /* @__PURE__ */ jsx34("div", { className: "flex transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: React27.Children.map(children, (child, idx) => /* @__PURE__ */ jsx34("div", { className: "flex-shrink-0 w-full h-full", children: child }, idx)) }),
-    totalSlides > 1 && /* @__PURE__ */ jsxs29(Fragment8, { children: [
-      /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs30("div", { className: "relative w-full overflow-hidden", onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), children: [
+    /* @__PURE__ */ jsx35("div", { className: "flex transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: React28.Children.map(children, (child, idx) => /* @__PURE__ */ jsx35("div", { className: "flex-shrink-0 w-full h-full", children: child }, idx)) }),
+    totalSlides > 1 && /* @__PURE__ */ jsxs30(Fragment9, { children: [
+      /* @__PURE__ */ jsx35(
         Button_default,
         {
           onClick: scrollPrev,
@@ -6313,7 +6748,7 @@ function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
           className: "absolute left-4 top-1/2 -translate-y-1/2 hover:-translate-y-1/2 z-10 rounded-full will-change-transform bg-background/80 hover:bg-background border-border/50 hover:border-border text-foreground"
         }
       ),
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35(
         Button_default,
         {
           onClick: scrollNext,
@@ -6324,7 +6759,7 @@ function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
         }
       )
     ] }),
-    totalSlides > 1 && /* @__PURE__ */ jsx34("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: Array.from({ length: totalSlides }, (_, idx) => /* @__PURE__ */ jsx34(
+    totalSlides > 1 && /* @__PURE__ */ jsx35("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: Array.from({ length: totalSlides }, (_, idx) => /* @__PURE__ */ jsx35(
       "button",
       {
         onClick: () => setCurrentIndex(idx),
@@ -6338,21 +6773,21 @@ function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
 
 // ../../components/ui/ClientOnly.tsx
 import { useEffect as useEffect15, useState as useState26 } from "react";
-import { Fragment as Fragment9, jsx as jsx35 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx36 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const [hasMounted, setHasMounted] = useState26(false);
   useEffect15(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx35(Fragment9, { children: fallback });
+    return /* @__PURE__ */ jsx36(Fragment10, { children: fallback });
   }
-  return /* @__PURE__ */ jsx35(Fragment9, { children });
+  return /* @__PURE__ */ jsx36(Fragment10, { children });
 }
 
 // ../../components/ui/Loading.tsx
 import { Activity as Activity3 } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 var LoadingSpinner = ({
   size = "md",
   className,
@@ -6368,7 +6803,7 @@ var LoadingSpinner = ({
     foreground: "text-foreground",
     muted: "text-muted-foreground"
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Activity3,
     {
       className: cn(
@@ -6389,7 +6824,7 @@ var LoadingDots = ({
     foreground: "bg-foreground",
     muted: "bg-muted-foreground"
   };
-  return /* @__PURE__ */ jsx36("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx37(
     "div",
     {
       className: cn(
@@ -6411,7 +6846,7 @@ var LoadingBar = ({
   label
 }) => {
   const pct = progress ? Math.min(Math.max(progress, 0), 100) : void 0;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       className: cn("w-full bg-muted rounded-full h-2", className),
@@ -6420,7 +6855,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__ */ jsx36(
+      children: /* @__PURE__ */ jsx37(
         "div",
         {
           className: cn(
@@ -6437,10 +6872,10 @@ var LoadingBar = ({
 };
 
 // ../../components/ui/Table.tsx
-import React28 from "react";
-import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
-var Table = React28.forwardRef(
-  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx37(
+import React29 from "react";
+import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+var Table = React29.forwardRef(
+  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn(
@@ -6450,7 +6885,7 @@ var Table = React28.forwardRef(
         "backdrop-blur-sm transition-all duration-300",
         containerClassName
       ),
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx38(
         "table",
         {
           ref,
@@ -6462,8 +6897,8 @@ var Table = React28.forwardRef(
   )
 );
 Table.displayName = "Table";
-var TableHeader = React28.forwardRef(
-  ({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ jsxs31(
+var TableHeader = React29.forwardRef(
+  ({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ jsxs32(
     "thead",
     {
       ref,
@@ -6481,7 +6916,7 @@ var TableHeader = React28.forwardRef(
   )
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+var TableBody = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   "tbody",
   {
     ref,
@@ -6490,7 +6925,7 @@ var TableBody = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+var TableFooter = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   "tfoot",
   {
     ref,
@@ -6502,7 +6937,7 @@ var TableFooter = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+var TableRow = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   "tr",
   {
     ref,
@@ -6516,7 +6951,7 @@ var TableRow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+var TableHead = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   "th",
   {
     ref,
@@ -6528,7 +6963,7 @@ var TableHead = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+var TableCell = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   "td",
   {
     ref,
@@ -6537,7 +6972,7 @@ var TableCell = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+var TableCaption = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   "caption",
   {
     ref,
@@ -6549,12 +6984,12 @@ TableCaption.displayName = "TableCaption";
 
 // ../../components/ui/DataTable.tsx
 import { Filter as FilterIcon } from "lucide-react";
-import React29 from "react";
+import React30 from "react";
 import { useTranslations as useTranslations7 } from "next-intl";
-import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = React29.useState(value);
-  React29.useEffect(() => {
+  const [debounced, setDebounced] = React30.useState(value);
+  React30.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -6568,6 +7003,7 @@ function DataTable({
   total = 0,
   page = 1,
   pageSize = 20,
+  pageSizeOptions,
   onQueryChange,
   caption,
   toolbar,
@@ -6579,14 +7015,20 @@ function DataTable({
   labels
 }) {
   const t = useTranslations7("Common");
-  const [visibleCols, setVisibleCols] = React29.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
-  const [filters, setFilters] = React29.useState({});
-  const [sort, setSort] = React29.useState(null);
-  const [density, setDensity] = React29.useState("normal");
-  const [curPage, setCurPage] = React29.useState(page);
-  const [curPageSize, setCurPageSize] = React29.useState(pageSize);
+  const [visibleCols, setVisibleCols] = React30.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
+  const [filters, setFilters] = React30.useState({});
+  const [sort, setSort] = React30.useState(null);
+  const [density, setDensity] = React30.useState("normal");
+  const [curPage, setCurPage] = React30.useState(page);
+  const [curPageSize, setCurPageSize] = React30.useState(pageSize);
   const debouncedFilters = useDebounced(filters, 350);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
+    setCurPage(page);
+  }, [page]);
+  React30.useEffect(() => {
+    setCurPageSize(pageSize);
+  }, [pageSize]);
+  React30.useEffect(() => {
     if (!onQueryChange) return;
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
   }, [debouncedFilters, sort, curPage, curPageSize]);
@@ -6605,7 +7047,7 @@ function DataTable({
       className: "h-8 w-full text-sm"
     };
     if (col.filter.type === "text") {
-      return /* @__PURE__ */ jsx38(
+      return /* @__PURE__ */ jsx39(
         Input_default,
         {
           ...commonProps,
@@ -6620,7 +7062,7 @@ function DataTable({
     }
     if (col.filter.type === "select") {
       const options = col.filter.options || [];
-      return /* @__PURE__ */ jsx38(
+      return /* @__PURE__ */ jsx39(
         Combobox,
         {
           options: ["", ...options],
@@ -6636,7 +7078,7 @@ function DataTable({
       );
     }
     if (col.filter.type === "date") {
-      return /* @__PURE__ */ jsx38(
+      return /* @__PURE__ */ jsx39(
         DatePicker,
         {
           placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
@@ -6650,15 +7092,15 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ jsx38(TableRow, { children: visibleColumns.map((col) => /* @__PURE__ */ jsx38(
+  const renderHeader = /* @__PURE__ */ jsx39(TableRow, { children: visibleColumns.map((col) => /* @__PURE__ */ jsx39(
     TableHead,
     {
       style: { width: col.width },
       className: cn(col.align === "right" && "text-right", col.align === "center" && "text-center"),
-      children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
-        /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx38("span", { className: "truncate font-medium text-sm", children: col.title }),
-          col.sortable && /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx39("span", { className: "truncate font-medium text-sm", children: col.title }),
+          col.sortable && /* @__PURE__ */ jsx39(
             "button",
             {
               className: cn(
@@ -6675,8 +7117,8 @@ function DataTable({
               },
               "aria-label": "Sort",
               title: `Sort by ${String(col.title)}`,
-              children: /* @__PURE__ */ jsxs32("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                /* @__PURE__ */ jsx38(
+              children: /* @__PURE__ */ jsxs33("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+                /* @__PURE__ */ jsx39(
                   "path",
                   {
                     d: "M7 8l3-3 3 3",
@@ -6687,7 +7129,7 @@ function DataTable({
                     opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
                   }
                 ),
-                /* @__PURE__ */ jsx38(
+                /* @__PURE__ */ jsx39(
                   "path",
                   {
                     d: "M7 12l3 3 3-3",
@@ -6702,11 +7144,11 @@ function DataTable({
             }
           )
         ] }),
-        col.filter && /* @__PURE__ */ jsx38(
+        col.filter && /* @__PURE__ */ jsx39(
           Popover,
           {
             placement: "bottom-start",
-            trigger: /* @__PURE__ */ jsx38(
+            trigger: /* @__PURE__ */ jsx39(
               "button",
               {
                 className: cn(
@@ -6716,16 +7158,16 @@ function DataTable({
                 ),
                 "aria-label": "Filter",
                 title: "Filter",
-                children: /* @__PURE__ */ jsx38(FilterIcon, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx39(FilterIcon, { className: "h-4 w-4" })
               }
             ),
-            children: /* @__PURE__ */ jsxs32("div", { className: "w-48 p-2 space-y-2", children: [
-              /* @__PURE__ */ jsxs32("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
+            children: /* @__PURE__ */ jsxs33("div", { className: "w-48 p-2 space-y-2", children: [
+              /* @__PURE__ */ jsxs33("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
                 "Filter ",
                 col.title
               ] }),
               renderFilterControl(col),
-              filters[col.key] && /* @__PURE__ */ jsx38(
+              filters[col.key] && /* @__PURE__ */ jsx39(
                 "button",
                 {
                   onClick: () => {
@@ -6747,15 +7189,21 @@ function DataTable({
     },
     col.key
   )) });
-  return /* @__PURE__ */ jsxs32("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ jsx38("div", { className: "text-sm text-muted-foreground", children: caption }),
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
-        enableDensityToggle && /* @__PURE__ */ jsx38(
+  const isServerMode = Boolean(onQueryChange);
+  const displayedData = isServerMode ? data : React30.useMemo(() => {
+    const start = (curPage - 1) * curPageSize;
+    return data.slice(start, start + curPageSize);
+  }, [data, curPage, curPageSize]);
+  const totalItems = isServerMode ? total : data.length;
+  return /* @__PURE__ */ jsxs33("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
+      /* @__PURE__ */ jsx39("div", { className: "text-sm text-muted-foreground", children: caption }),
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+        enableDensityToggle && /* @__PURE__ */ jsx39(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ jsxs32(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ jsx38("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+            trigger: /* @__PURE__ */ jsxs33(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ jsx39("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx39("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
               labels?.density || t("density")
             ] }),
             items: [
@@ -6765,11 +7213,11 @@ function DataTable({
             ]
           }
         ),
-        enableColumnVisibilityToggle && /* @__PURE__ */ jsx38(
+        enableColumnVisibilityToggle && /* @__PURE__ */ jsx39(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ jsxs32(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ jsx38("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx38(
+            trigger: /* @__PURE__ */ jsxs33(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ jsx39("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx39(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -6780,15 +7228,15 @@ function DataTable({
               ) }),
               labels?.columns || t("columns")
             ] }),
-            children: columns.map((c) => /* @__PURE__ */ jsxs32(
+            children: columns.map((c) => /* @__PURE__ */ jsxs33(
               DropdownMenuItem,
               {
                 onClick: () => {
                   setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
                 },
                 children: [
-                  /* @__PURE__ */ jsx38("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                  /* @__PURE__ */ jsx38("span", { className: "truncate", children: c.title })
+                  /* @__PURE__ */ jsx39("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ jsx39("span", { className: "truncate", children: c.title })
                 ]
               },
               c.key
@@ -6798,17 +7246,17 @@ function DataTable({
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ jsx38("div", { className: cn("relative rounded-lg border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ jsxs32(
+    /* @__PURE__ */ jsx39("div", { className: cn("relative rounded-lg border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ jsxs33(
       Table,
       {
         containerClassName: "border-0 rounded-none shadow-none",
         className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-[5] [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
         children: [
-          /* @__PURE__ */ jsx38(TableHeader, { children: renderHeader }),
-          /* @__PURE__ */ jsx38(TableBody, { children: loading2 ? /* @__PURE__ */ jsx38(TableRow, { children: /* @__PURE__ */ jsx38(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs32("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ jsx38("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(TableHeader, { children: renderHeader }),
+          /* @__PURE__ */ jsx39(TableBody, { children: loading2 ? /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs33("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ jsx39("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx39(
                 "path",
                 {
                   className: "opacity-75",
@@ -6817,10 +7265,10 @@ function DataTable({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx38("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !data || data.length === 0 ? /* @__PURE__ */ jsx38(TableRow, { children: /* @__PURE__ */ jsx38(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : data.map((row, idx) => /* @__PURE__ */ jsx38(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
+            /* @__PURE__ */ jsx39("span", { className: "text-sm", children: "Loading..." })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ jsx39(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
             const value = col.dataIndex ? row[col.dataIndex] : void 0;
-            return /* @__PURE__ */ jsx38(
+            return /* @__PURE__ */ jsx39(
               TableCell,
               {
                 className: cn(
@@ -6838,16 +7286,21 @@ function DataTable({
         ]
       }
     ) }),
-    total > 0 && /* @__PURE__ */ jsx38("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ jsx38(
+    totalItems > 0 && /* @__PURE__ */ jsx39("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ jsx39(
       Pagination,
       {
         page: curPage,
-        totalPages: Math.ceil(total / curPageSize),
+        totalPages: Math.ceil(totalItems / curPageSize),
         onChange: (p) => setCurPage(p),
         className: "",
         showInfo: true,
-        totalItems: total,
-        pageSize: curPageSize
+        totalItems,
+        pageSize: curPageSize,
+        pageSizeOptions,
+        onPageSizeChange: (s) => {
+          setCurPage(1);
+          setCurPageSize(s);
+        }
       }
     ) })
   ] });
@@ -6855,10 +7308,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // ../../components/ui/Form.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 
 // ../../node_modules/react-hook-form/dist/index.esm.mjs
-import React30 from "react";
+import React31 from "react";
 var isCheckBoxInput = (element) => element.type === "checkbox";
 var isDateObject = (value) => value instanceof Date;
 var isNullOrUndefined = (value) => value == null;
@@ -6946,12 +7399,12 @@ var INPUT_VALIDATION_RULES = {
   required: "required",
   validate: "validate"
 };
-var HookFormContext = React30.createContext(null);
+var HookFormContext = React31.createContext(null);
 HookFormContext.displayName = "HookFormContext";
-var useFormContext = () => React30.useContext(HookFormContext);
+var useFormContext = () => React31.useContext(HookFormContext);
 var FormProvider = (props) => {
   const { children, ...data } = props;
-  return React30.createElement(HookFormContext.Provider, { value: data }, children);
+  return React31.createElement(HookFormContext.Provider, { value: data }, children);
 };
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
   const result = {
@@ -6971,12 +7424,12 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
   }
   return result;
 };
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React30.useLayoutEffect : React30.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React31.useLayoutEffect : React31.useEffect;
 function useFormState(props) {
   const methods = useFormContext();
   const { control = methods.control, disabled, name, exact } = props || {};
-  const [formState, updateFormState] = React30.useState(control._formState);
-  const _localProxyFormState = React30.useRef({
+  const [formState, updateFormState] = React31.useState(control._formState);
+  const _localProxyFormState = React31.useRef({
     isDirty: false,
     isLoading: false,
     dirtyFields: false,
@@ -6997,10 +7450,10 @@ function useFormState(props) {
       });
     }
   }), [name, disabled, exact]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     _localProxyFormState.current.isValid && control._setValid(true);
   }, [control]);
-  return React30.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+  return React31.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 var isString = (value) => typeof value === "string";
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
@@ -7049,12 +7502,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 = React30.useRef(defaultValue);
-  const _compute = React30.useRef(compute);
-  const _computeFormValues = React30.useRef(void 0);
+  const _defaultValue = React31.useRef(defaultValue);
+  const _compute = React31.useRef(compute);
+  const _computeFormValues = React31.useRef(void 0);
   _compute.current = compute;
-  const defaultValueMemo = React30.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
-  const [value, updateValue] = React30.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
+  const defaultValueMemo = React31.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
+  const [value, updateValue] = React31.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
   useIsomorphicLayoutEffect(() => control._subscribe({
     name,
     formState: {
@@ -7076,14 +7529,14 @@ function useWatch(props) {
       }
     }
   }), [control, disabled, name, exact]);
-  React30.useEffect(() => control._removeUnmounted());
+  React31.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 = React30.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
+  const defaultValueMemo = React31.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
@@ -7095,15 +7548,15 @@ function useController(props) {
     name,
     exact: true
   });
-  const _props = React30.useRef(props);
-  const _previousNameRef = React30.useRef(void 0);
-  const _registerProps = React30.useRef(control.register(name, {
+  const _props = React31.useRef(props);
+  const _previousNameRef = React31.useRef(void 0);
+  const _registerProps = React31.useRef(control.register(name, {
     ...props.rules,
     value,
     ...isBoolean(props.disabled) ? { disabled: props.disabled } : {}
   }));
   _props.current = props;
-  const fieldState = React30.useMemo(() => Object.defineProperties({}, {
+  const fieldState = React31.useMemo(() => Object.defineProperties({}, {
     invalid: {
       enumerable: true,
       get: () => !!get(formState.errors, name)
@@ -7125,21 +7578,21 @@ function useController(props) {
       get: () => get(formState.errors, name)
     }
   }), [formState, name]);
-  const onChange = React30.useCallback((event) => _registerProps.current.onChange({
+  const onChange = React31.useCallback((event) => _registerProps.current.onChange({
     target: {
       value: getEventValue(event),
       name
     },
     type: EVENTS.CHANGE
   }), [name]);
-  const onBlur = React30.useCallback(() => _registerProps.current.onBlur({
+  const onBlur = React31.useCallback(() => _registerProps.current.onBlur({
     target: {
       value: get(control._formValues, name),
       name
     },
     type: EVENTS.BLUR
   }), [name, control._formValues]);
-  const ref = React30.useCallback((elm) => {
+  const ref = React31.useCallback((elm) => {
     const field2 = get(control._fields, name);
     if (field2 && elm) {
       field2._f.ref = {
@@ -7150,7 +7603,7 @@ function useController(props) {
       };
     }
   }, [control._fields, name]);
-  const field = React30.useMemo(() => ({
+  const field = React31.useMemo(() => ({
     name,
     value,
     ...isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {},
@@ -7158,7 +7611,7 @@ function useController(props) {
     onBlur,
     ref
   }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
     const previousName = _previousNameRef.current;
     if (previousName && previousName !== name && !isArrayField) {
@@ -7188,13 +7641,13 @@ function useController(props) {
       (isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
     };
   }, [name, control, isArrayField, shouldUnregister]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     control._setDisabledField({
       disabled,
       name
     });
   }, [disabled, name, control]);
-  return React30.useMemo(() => ({
+  return React31.useMemo(() => ({
     field,
     formState,
     fieldState
@@ -8513,9 +8966,9 @@ function createFormControl(props = {}) {
   };
 }
 function useForm(props = {}) {
-  const _formControl = React30.useRef(void 0);
-  const _values = React30.useRef(void 0);
-  const [formState, updateFormState] = React30.useState({
+  const _formControl = React31.useRef(void 0);
+  const _values = React31.useRef(void 0);
+  const [formState, updateFormState] = React31.useState({
     isDirty: false,
     isValidating: false,
     isLoading: isFunction(props.defaultValues),
@@ -8564,8 +9017,8 @@ function useForm(props = {}) {
     control._formState.isReady = true;
     return sub;
   }, [control]);
-  React30.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-  React30.useEffect(() => {
+  React31.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+  React31.useEffect(() => {
     if (props.mode) {
       control._options.mode = props.mode;
     }
@@ -8573,18 +9026,18 @@ function useForm(props = {}) {
       control._options.reValidateMode = props.reValidateMode;
     }
   }, [control, props.mode, props.reValidateMode]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (props.errors) {
       control._setErrors(props.errors);
       control._focusError();
     }
   }, [control, props.errors]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     props.shouldUnregister && control._subjects.state.next({
       values: control._getWatch()
     });
   }, [control, props.shouldUnregister]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (control._proxyFormState.isDirty) {
       const isDirty = control._getDirty();
       if (isDirty !== formState.isDirty) {
@@ -8594,7 +9047,7 @@ function useForm(props = {}) {
       }
     }
   }, [control, formState.isDirty]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (props.values && !deepEqual(props.values, _values.current)) {
       control._reset(props.values, {
         keepFieldsRef: true,
@@ -8606,7 +9059,7 @@ function useForm(props = {}) {
       control._resetDefaultValues();
     }
   }, [control, props.values]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (!control._state.mount) {
       control._setValid();
       control._state.mount = true;
@@ -8623,8 +9076,8 @@ function useForm(props = {}) {
 
 // ../../components/ui/Form.tsx
 import { useTranslations as useTranslations8 } from "next-intl";
-import { jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
-var FormConfigContext = React31.createContext({ size: "md" });
+import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
+var FormConfigContext = React32.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -8637,24 +9090,24 @@ var FormWrapper = ({
   const methods = useForm({
     defaultValues: initialValues
   });
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
   }, [JSON.stringify(initialValues)]);
   const { validationSchema: _, ...formProps } = props;
-  return /* @__PURE__ */ jsx39(FormProvider, { ...methods, children: /* @__PURE__ */ jsx39(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx39("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+  return /* @__PURE__ */ jsx40(FormProvider, { ...methods, children: /* @__PURE__ */ jsx40(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx40("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React31.createContext({});
+var FormFieldContext = React32.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx39(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx39(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx40(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx40(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React31.useContext(FormFieldContext);
-  const itemContext = React31.useContext(FormItemContext);
+  const fieldContext = React32.useContext(FormFieldContext);
+  const itemContext = React32.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     try {
@@ -8675,22 +9128,22 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React31.createContext({});
-var FormItem = React31.forwardRef(({ className, ...props }, ref) => {
-  const id = React31.useId();
-  return /* @__PURE__ */ jsx39(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx39("div", { ref, className: cn("space-y-2", className), ...props }) });
+var FormItemContext = React32.createContext({});
+var FormItem = React32.forwardRef(({ className, ...props }, ref) => {
+  const id = React32.useId();
+  return /* @__PURE__ */ jsx40(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx40("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React31.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React32.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  const config = React31.useContext(FormConfigContext);
+  const config = React32.useContext(FormConfigContext);
   const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
-  return /* @__PURE__ */ jsx39(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
+  return /* @__PURE__ */ jsx40(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React31.forwardRef(({ ...props }, ref) => {
+var FormControl = React32.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       ref,
@@ -8702,37 +9155,37 @@ var FormControl = React31.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React31.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React32.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx39("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx40("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React31.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React32.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
     return null;
   }
-  return /* @__PURE__ */ jsx39("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+  return /* @__PURE__ */ jsx40("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx39(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx39(
+var FormInput = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx40(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx40(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ jsxs33(FormItem, { children: [
-      /* @__PURE__ */ jsx39(FormControl, { children: /* @__PURE__ */ jsx39(Input_default, { size: props.size ?? size, ...field, ...props }) }),
-      /* @__PURE__ */ jsx39(FormMessage, {})
+    render: ({ field }) => /* @__PURE__ */ jsxs34(FormItem, { children: [
+      /* @__PURE__ */ jsx40(FormControl, { children: /* @__PURE__ */ jsx40(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ jsx40(FormMessage, {})
     ] })
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx39(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx39(
+var FormCheckbox = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx40(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx40(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ jsxs33(FormItem, { children: [
-      /* @__PURE__ */ jsx39(FormControl, { children: /* @__PURE__ */ jsx39(
+    render: ({ field }) => /* @__PURE__ */ jsxs34(FormItem, { children: [
+      /* @__PURE__ */ jsx40(FormControl, { children: /* @__PURE__ */ jsx40(
         Checkbox,
         {
           ref,
@@ -8746,20 +9199,20 @@ var FormCheckbox = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__
           ...props
         }
       ) }),
-      /* @__PURE__ */ jsx39(FormMessage, {})
+      /* @__PURE__ */ jsx40(FormMessage, {})
     ] })
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React31.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx39(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx39(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
+var FormSubmitButton = React32.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx40(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx40(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
 FormSubmitButton.displayName = "FormSubmitButton";
 
 // ../../components/ui/NotificationModal.tsx
 import { ExternalLink } from "lucide-react";
 import { useTranslations as useTranslations9 } from "next-intl";
-import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = useTranslations9("Common");
   if (!notification) return null;
@@ -8780,26 +9233,26 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     Modal_default,
     {
       isOpen,
       onClose,
       title: titleText || t("notifications"),
       size: "md",
-      children: /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
-          /* @__PURE__ */ jsx40("div", { className: cn(
+      children: /* @__PURE__ */ jsxs35("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
+          /* @__PURE__ */ jsx41("div", { className: cn(
             "w-2 h-2 rounded-full",
             !notification.is_read ? "bg-primary" : "bg-border"
           ) }),
-          /* @__PURE__ */ jsx40("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
+          /* @__PURE__ */ jsx41("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
         ] }),
-        notification.title && /* @__PURE__ */ jsx40("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
-        notification.body && /* @__PURE__ */ jsx40("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-        /* @__PURE__ */ jsx40("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime2(notification.created_at) }),
-        /* @__PURE__ */ jsxs34("div", { className: "flex gap-2 justify-end pt-2", children: [
-          hasLink && /* @__PURE__ */ jsxs34(
+        notification.title && /* @__PURE__ */ jsx41("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
+        notification.body && /* @__PURE__ */ jsx41("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
+        /* @__PURE__ */ jsx41("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime2(notification.created_at) }),
+        /* @__PURE__ */ jsxs35("div", { className: "flex gap-2 justify-end pt-2", children: [
+          hasLink && /* @__PURE__ */ jsxs35(
             Button_default,
             {
               variant: "primary",
@@ -8807,12 +9260,12 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
               onClick: handleLinkClick,
               className: "gap-2",
               children: [
-                /* @__PURE__ */ jsx40(ExternalLink, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx41(ExternalLink, { className: "w-4 h-4" }),
                 openLinkText || t("openLink")
               ]
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41(
             Button_default,
             {
               variant: "ghost",
@@ -8834,10 +9287,10 @@ import { usePathname } from "next/navigation";
 import { Phone } from "lucide-react";
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
-import React33 from "react";
+import React34 from "react";
 
 // ../../node_modules/react-icons/lib/iconContext.mjs
-import React32 from "react";
+import React33 from "react";
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -8845,7 +9298,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = React32.createContext && /* @__PURE__ */ React32.createContext(DefaultContext);
+var IconContext = React33.createContext && /* @__PURE__ */ React33.createContext(DefaultContext);
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
 var _excluded = ["attr", "size", "title"];
@@ -8934,12 +9387,12 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ React33.createElement(node.tag, _objectSpread({
+  return tree && tree.map((node, i) => /* @__PURE__ */ React34.createElement(node.tag, _objectSpread({
     key: i
   }, node.attr), Tree2Element(node.child)));
 }
 function GenIcon(data) {
-  return (props) => /* @__PURE__ */ React33.createElement(IconBase, _extends({
+  return (props) => /* @__PURE__ */ React34.createElement(IconBase, _extends({
     attr: _objectSpread({}, data.attr)
   }, props), Tree2Element(data.child));
 }
@@ -8954,7 +9407,7 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ React33.createElement("svg", _extends({
+    return /* @__PURE__ */ React34.createElement("svg", _extends({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -8966,9 +9419,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ React33.createElement("title", null, title), props.children);
+    }), title && /* @__PURE__ */ React34.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? /* @__PURE__ */ React33.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+  return IconContext !== void 0 ? /* @__PURE__ */ React34.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
 }
 
 // ../../node_modules/react-icons/fa/index.mjs
@@ -8982,9 +9435,9 @@ function SiZalo(props) {
 }
 
 // ../../components/ui/FloatingContacts.tsx
-import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
 function MessengerIcon(props) {
-  return /* @__PURE__ */ jsx41("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx42(
     "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",
@@ -8993,10 +9446,10 @@ function MessengerIcon(props) {
   ) });
 }
 function ZaloIcon(props) {
-  return /* @__PURE__ */ jsx41(SiZalo, { size: 20, ...props });
+  return /* @__PURE__ */ jsx42(SiZalo, { size: 20, ...props });
 }
 function InstagramIcon(props) {
-  return /* @__PURE__ */ jsx41(FaInstagram, { size: 20, ...props });
+  return /* @__PURE__ */ jsx42(FaInstagram, { size: 20, ...props });
 }
 function FloatingContacts({ className }) {
   const pathname = usePathname();
@@ -9031,8 +9484,8 @@ function FloatingContacts({ className }) {
       external: true
     }
   ];
-  return /* @__PURE__ */ jsxs35("div", { className: cn("fixed bottom-6 right-4 z-[100000]", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
-    /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs36("div", { className: cn("fixed bottom-6 right-4 z-[100000]", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
+    /* @__PURE__ */ jsx42(
       Link2,
       {
         href: `tel:${hotline.replace(/\D/g, "")}`,
@@ -9043,10 +9496,10 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           "bg-[#22c55e]"
         ),
-        children: /* @__PURE__ */ jsx41(Phone, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx42(Phone, { className: "w-6 h-6" })
       }
     ),
-    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ jsx41(
+    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ jsx42(
       Link2,
       {
         href,
@@ -9058,7 +9511,7 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           bg
         ),
-        children: /* @__PURE__ */ jsx41(Icon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx42(Icon, { className: "w-6 h-6" })
       },
       key
     ))
@@ -9067,7 +9520,7 @@ function FloatingContacts({ className }) {
 
 // ../../components/ui/AccessDenied.tsx
 import { Lock, ShieldAlert, Ban } from "lucide-react";
-import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs37 } from "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" },
@@ -9088,13 +9541,13 @@ function AccessDenied({
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ jsx42(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ jsx42("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ jsx42(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
-    /* @__PURE__ */ jsxs36("div", { children: [
-      /* @__PURE__ */ jsx42("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ jsx42("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+  return /* @__PURE__ */ jsx43(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx43("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ jsx43(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+    /* @__PURE__ */ jsxs37("div", { children: [
+      /* @__PURE__ */ jsx43("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+      /* @__PURE__ */ jsx43("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
     ] }),
-    children && /* @__PURE__ */ jsx42("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+    children && /* @__PURE__ */ jsx43("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
   ] }) });
 }
 
@@ -9102,7 +9555,7 @@ function AccessDenied({
 import { Moon, Sun, Monitor } from "lucide-react";
 import { useEffect as useEffect17, useRef as useRef10, useState as useState27 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -9131,8 +9584,8 @@ function ThemeToggleHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ jsxs37("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs38("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx44(
       Button_default,
       {
         variant: "ghost",
@@ -9150,25 +9603,25 @@ function ThemeToggleHeadless({
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Theme",
-        children: /* @__PURE__ */ jsx43(CurrentIcon, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx44(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs37(Fragment10, { children: [
-      typeof window !== "undefined" && createPortal9(/* @__PURE__ */ jsx43("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ jsxs38(Fragment11, { children: [
+      typeof window !== "undefined" && createPortal9(/* @__PURE__ */ jsx44("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal9(
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "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__ */ jsxs37("div", { className: "p-2", children: [
-              /* @__PURE__ */ jsx43("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__ */ jsxs38("div", { className: "p-2", children: [
+              /* @__PURE__ */ jsx44("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__ */ jsxs37(
+                return /* @__PURE__ */ jsxs38(
                   Button_default,
                   {
                     variant: "ghost",
@@ -9184,9 +9637,9 @@ function ThemeToggleHeadless({
                     role: "menuitemradio",
                     "aria-checked": active,
                     children: [
-                      /* @__PURE__ */ jsx43(Icon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ jsx43("span", { className: "flex-1 text-left", children: opt.label }),
-                      active && /* @__PURE__ */ jsx43("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                      /* @__PURE__ */ jsx44(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx44("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ jsx44("div", { className: "w-2 h-2 rounded-full bg-primary" })
                     ]
                   },
                   opt.value
@@ -9205,7 +9658,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef11, useState as useState28 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -9227,8 +9680,8 @@ function LanguageSwitcherHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ jsxs38("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs39("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx45(
       Button_default,
       {
         variant: "ghost",
@@ -9247,22 +9700,22 @@ function LanguageSwitcherHeadless({
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Language",
         title: labels?.heading ?? "Language",
-        children: /* @__PURE__ */ jsx44(Globe, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx45(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs38(Fragment11, { children: [
-      typeof window !== "undefined" && createPortal10(/* @__PURE__ */ jsx44("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ jsxs39(Fragment12, { children: [
+      typeof window !== "undefined" && createPortal10(/* @__PURE__ */ jsx45("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal10(
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           "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__ */ jsxs38("div", { className: "p-2", children: [
-              /* @__PURE__ */ jsx44("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__ */ jsxs38(
+            children: /* @__PURE__ */ jsxs39("div", { className: "p-2", children: [
+              /* @__PURE__ */ jsx45("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__ */ jsxs39(
                 Button_default,
                 {
                   variant: "ghost",
@@ -9275,9 +9728,9 @@ function LanguageSwitcherHeadless({
                   role: "menuitemradio",
                   "aria-checked": currentLocale === language.code,
                   children: [
-                    language.flag && /* @__PURE__ */ jsx44("span", { className: "text-lg", children: language.flag }),
-                    /* @__PURE__ */ jsx44("span", { className: "flex-1 text-left", children: language.name }),
-                    currentLocale === language.code && /* @__PURE__ */ jsx44("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    language.flag && /* @__PURE__ */ jsx45("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ jsx45("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ jsx45("div", { className: "w-2 h-2 rounded-full bg-primary" })
                   ]
                 },
                 language.code
@@ -9480,6 +9933,7 @@ export {
   NotificationBadge,
   NotificationModal_default as NotificationModal,
   NumberInput,
+  OverlayControls,
   PageLoading,
   Pagination,
   PasswordInput,