@underverse-ui/underverse 0.1.31 → 0.1.33

package/dist/index.cjs

@@ -613,583 +613,557 @@ var import_react3 = __toESM(require("react"), 1);
 var import_next_intl = require("next-intl");
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Input = (0, import_react3.forwardRef)(({
-  label,
-  error,
-  description,
-  className,
-  required,
-  variant = "default",
-  size = "md",
-  leftIcon: LeftIcon,
-  rightIcon: RightIcon,
-  clearable = false,
-  loading: loading2 = false,
-  success = false,
-  onClear,
-  hint,
-  counter = false,
-  type = "text",
-  value,
-  maxLength,
-  ...rest
-}, ref) => {
-  const [localError, setLocalError] = (0, import_react3.useState)(error);
-  const [showPassword, setShowPassword] = (0, import_react3.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
-  const tv = (0, import_next_intl.useTranslations)("ValidationInput");
-  const autoId = (0, import_react3.useId)();
-  const needsId = !!(label || description || hint || error);
-  const resolvedId = rest.id || (needsId ? `input-${autoId}` : void 0);
-  const errMsg = error || localError;
-  const hasValue = value !== void 0 && value !== null && value !== "";
-  const charCount = typeof value === "string" ? value.length : 0;
-  const errorId = errMsg && resolvedId ? `${resolvedId}-error` : void 0;
-  const descId = !errMsg && (description || hint) && resolvedId ? `${resolvedId}-desc` : void 0;
-  const containerSpacing = size === "sm" ? "space-y-1.5" : "space-y-2";
-  const variantStyles6 = {
-    default: {
-      container: "bg-background border border-input hover:border-accent-foreground/20",
-      focus: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-      error: "border-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent"
-    },
-    filled: {
-      container: "bg-muted/50 border border-transparent hover:bg-muted/70",
-      focus: "focus-visible:outline-none focus-visible:bg-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-      error: "bg-destructive/10 border-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent"
-    },
-    outlined: {
-      container: "bg-transparent border border-border hover:border-accent-foreground/30",
-      focus: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-      error: "border-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent"
-    },
-    minimal: {
-      container: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30",
-      focus: "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none",
-      error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
-    }
-  };
-  const sizeStyles8 = {
-    sm: {
-      input: "px-3 py-1.5 text-sm h-8 md:h-7 md:py-1 md:text-xs",
-      icon: "w-4 h-4",
-      button: "h-7 w-7"
-    },
-    md: {
-      input: "px-4 py-2 text-sm h-10",
-      icon: "w-5 h-5",
-      button: "h-8 w-8"
-    },
-    lg: {
-      input: "px-5 py-4 text-base h-12",
-      icon: "w-6 h-6",
-      button: "h-10 w-10"
-    }
-  };
-  const getErrorKey = (v) => {
-    if (v.valueMissing) return "required";
-    if (v.typeMismatch) return "typeMismatch";
-    if (v.patternMismatch) return "pattern";
-    if (v.tooShort) return "tooShort";
-    if (v.tooLong) return "tooLong";
-    if (v.rangeUnderflow) return "rangeUnderflow";
-    if (v.rangeOverflow) return "rangeOverflow";
-    if (v.stepMismatch) return "stepMismatch";
-    if (v.badInput) return "badInput";
-    return "invalid";
-  };
-  const getStatusIcon = () => {
-    if (loading2) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Loader2, { className: cn("animate-spin text-muted-foreground", sizeStyles8[size].icon) });
-    if (success) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.CheckCircle, { className: cn("text-success", sizeStyles8[size].icon) });
-    if (errMsg) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: cn("text-destructive", sizeStyles8[size].icon) });
-    return null;
-  };
-  const showPasswordToggle = type === "password";
-  const actualType = showPasswordToggle && showPassword ? "text" : type;
-  const { onFocus: onFocusProp, onBlur: onBlurProp, disabled } = rest;
-  const {
-    label: _label,
-    error: _error,
-    description: _description,
-    variant: _variant,
-    size: _size,
-    leftIcon: _leftIcon,
-    rightIcon: _rightIcon,
-    clearable: _clearable,
-    loading: _loading,
-    success: _success,
-    onClear: _onClear,
-    hint: _hint,
-    counter: _counter,
-    ...restInput
-  } = rest;
-  const handleFocus = (e) => {
-    setIsFocused(true);
-    onFocusProp?.(e);
-  };
-  const handleBlur = (e) => {
-    setIsFocused(false);
-    onBlurProp?.(e);
-  };
-  const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("w-full group", containerSpacing), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        "label",
-        {
-          className: cn(
-            // Label size follows input size
-            size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
-            "font-medium transition-colors duration-200",
-            // default color and highlight while any descendant focused
-            disabled ? "text-muted-foreground" : cn(
-              "text-foreground group-focus-within:text-primary",
-              success && "text-primary"
+var Input = (0, import_react3.forwardRef)(
+  ({
+    label,
+    error,
+    description,
+    className,
+    required,
+    variant = "default",
+    size = "md",
+    leftIcon: LeftIcon,
+    rightIcon: RightIcon,
+    clearable = false,
+    loading: loading2 = false,
+    success = false,
+    onClear,
+    hint,
+    counter = false,
+    type = "text",
+    value,
+    maxLength,
+    ...rest
+  }, ref) => {
+    const [localError, setLocalError] = (0, import_react3.useState)(error);
+    const [showPassword, setShowPassword] = (0, import_react3.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+    const tv = (0, import_next_intl.useTranslations)("ValidationInput");
+    const autoId = (0, import_react3.useId)();
+    const needsId = !!(label || description || hint || error);
+    const resolvedId = rest.id || (needsId ? `input-${autoId}` : void 0);
+    const errMsg = error || localError;
+    const hasValue = value !== void 0 && value !== null && value !== "";
+    const charCount = typeof value === "string" ? value.length : 0;
+    const errorId = errMsg && resolvedId ? `${resolvedId}-error` : void 0;
+    const descId = !errMsg && (description || hint) && resolvedId ? `${resolvedId}-desc` : void 0;
+    const containerSpacing = size === "sm" ? "space-y-1.5" : "space-y-2";
+    const variantStyles6 = {
+      default: {
+        container: "bg-background border border-input hover:border-accent-foreground/20",
+        focus: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+        error: "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+      },
+      filled: {
+        container: "bg-muted/50 border border-transparent hover:bg-muted/70",
+        focus: "focus-visible:outline-none focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+        error: "bg-destructive/10 border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+      },
+      outlined: {
+        container: "bg-transparent border border-border hover:border-accent-foreground/30",
+        focus: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+        error: "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+      },
+      minimal: {
+        container: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30",
+        focus: "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none",
+        error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
+      }
+    };
+    const sizeStyles8 = {
+      sm: {
+        input: "px-3 py-1.5 text-sm h-8 md:h-7 md:py-1 md:text-xs",
+        icon: "w-4 h-4",
+        button: "h-7 w-7"
+      },
+      md: {
+        input: "px-4 py-2 text-sm h-10",
+        icon: "w-5 h-5",
+        button: "h-8 w-8"
+      },
+      lg: {
+        input: "px-5 py-4 text-base h-12",
+        icon: "w-6 h-6",
+        button: "h-10 w-10"
+      }
+    };
+    const getErrorKey = (v) => {
+      if (v.valueMissing) return "required";
+      if (v.typeMismatch) return "typeMismatch";
+      if (v.patternMismatch) return "pattern";
+      if (v.tooShort) return "tooShort";
+      if (v.tooLong) return "tooLong";
+      if (v.rangeUnderflow) return "rangeUnderflow";
+      if (v.rangeOverflow) return "rangeOverflow";
+      if (v.stepMismatch) return "stepMismatch";
+      if (v.badInput) return "badInput";
+      return "invalid";
+    };
+    const getStatusIcon = () => {
+      if (loading2) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Loader2, { className: cn("animate-spin text-muted-foreground", sizeStyles8[size].icon) });
+      if (success) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.CheckCircle, { className: cn("text-success", sizeStyles8[size].icon) });
+      if (errMsg) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: cn("text-destructive", sizeStyles8[size].icon) });
+      return null;
+    };
+    const showPasswordToggle = type === "password";
+    const actualType = showPasswordToggle && showPassword ? "text" : type;
+    const { onFocus: onFocusProp, onBlur: onBlurProp, disabled } = rest;
+    const {
+      label: _label,
+      error: _error,
+      description: _description,
+      variant: _variant,
+      size: _size,
+      leftIcon: _leftIcon,
+      rightIcon: _rightIcon,
+      clearable: _clearable,
+      loading: _loading,
+      success: _success,
+      onClear: _onClear,
+      hint: _hint,
+      counter: _counter,
+      ...restInput
+    } = rest;
+    const handleFocus = (e) => {
+      setIsFocused(true);
+      onFocusProp?.(e);
+    };
+    const handleBlur = (e) => {
+      setIsFocused(false);
+      onBlurProp?.(e);
+    };
+    const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("w-full group", containerSpacing), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "label",
+          {
+            className: cn(
+              // Label size follows input size
+              size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+              "font-medium transition-colors duration-200",
+              // default color and highlight while any descendant focused
+              disabled ? "text-muted-foreground" : cn("text-foreground group-focus-within:text-primary", success && "text-primary"),
+              errMsg && "text-destructive"
             ),
-            errMsg && "text-destructive"
-          ),
-          children: [
-            label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-destructive ml-1", children: "*" })
-          ]
-        }
-      ),
-      counter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: cn(
-        "text-xs transition-colors duration-200",
-        charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
-        charCount >= maxLength && "text-destructive"
-      ), children: [
-        charCount,
-        "/",
-        maxLength
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative group", children: [
-      LeftIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(
-        "absolute left-3 top-1/2 -translate-y-1/2 z-10",
-        "text-muted-foreground transition-colors duration-200",
-        // highlight icon when input (or controls) focused
-        "group-focus-within:text-primary"
-      ), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeftIcon, { className: sizeStyles8[size].icon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "input",
-        {
-          ref,
-          type: actualType,
-          ...value !== void 0 ? { value } : {},
-          maxLength,
-          required,
-          id: resolvedId,
-          autoComplete: type === "password" ? "current-password" : type === "email" ? "email" : rest.autoComplete,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onInvalid: (e) => {
-            e.preventDefault();
-            const key = getErrorKey(e.currentTarget.validity);
-            setLocalError(tv(key));
-          },
-          onInput: () => setLocalError(void 0),
-          "aria-invalid": !!errMsg,
-          "aria-describedby": [errorId, descId].filter(Boolean).join(" ") || void 0,
-          className: cn(
-            "w-full text-foreground transition-all duration-200 ease-out",
-            "placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            // Size styles
-            sizeStyles8[size].input,
-            radiusClass,
-            // Icon padding adjustments
-            LeftIcon && "pl-10",
-            (RightIcon || showPasswordToggle || clearable || loading2 || success || errMsg) && "pr-10",
-            // Variant styles
-            variantStyles6[variant].container,
-            errMsg ? variantStyles6[variant].error : variantStyles6[variant].focus,
-            // Reduce visual weight for sm: no default drop shadows
-            size !== "sm" && variant !== "minimal" && "shadow-sm",
-            size !== "sm" && isFocused && "shadow-md",
-            className
-          ),
-          disabled,
-          ...restInput
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
-        getStatusIcon(),
-        RightIcon && !loading2 && !success && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RightIcon, { className: cn("text-muted-foreground", sizeStyles8[size].icon) }),
-        clearable && hasValue && !loading2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
+            children: [
+              label,
+              required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        counter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "span",
           {
-            type: "button",
-            onClick: () => {
-              if (onClear) return onClear();
-              rest.onChange?.({ target: { value: "" } });
-            },
             className: cn(
-              "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-sm",
-              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-              "active:bg-accent active:text-accent-foreground",
-              sizeStyles8[size].button
+              "text-xs transition-colors duration-200",
+              charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
+              charCount >= maxLength && "text-destructive"
             ),
-            tabIndex: 0,
-            "aria-label": "Clear input",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.X, { className: sizeStyles8[size].icon })
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative group", children: [
+        LeftIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute left-3 top-1/2 -translate-y-1/2 z-10",
+              "text-muted-foreground transition-colors duration-200",
+              // highlight icon when input (or controls) focused
+              "group-focus-within:text-primary"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeftIcon, { className: sizeStyles8[size].icon })
           }
         ),
-        showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
           {
-            type: "button",
-            onClick: () => setShowPassword(!showPassword),
+            ref,
+            type: actualType,
+            ...value !== void 0 ? { value } : {},
+            maxLength,
+            required,
+            id: resolvedId,
+            autoComplete: type === "password" ? "current-password" : type === "email" ? "email" : rest.autoComplete,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onInvalid: (e) => {
+              e.preventDefault();
+              const key = getErrorKey(e.currentTarget.validity);
+              setLocalError(tv(key));
+            },
+            onInput: () => setLocalError(void 0),
+            "aria-invalid": !!errMsg,
+            "aria-describedby": [errorId, descId].filter(Boolean).join(" ") || void 0,
             className: cn(
-              "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-full",
-              "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring/40",
-              "active:bg-accent/50 active:text-accent-foreground",
-              sizeStyles8[size].button
+              "w-full text-foreground transition-all duration-200 ease-out",
+              "placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              // Size styles
+              sizeStyles8[size].input,
+              radiusClass,
+              // Icon padding adjustments
+              LeftIcon && "pl-10",
+              (RightIcon || showPasswordToggle || clearable || loading2 || success || errMsg) && "pr-10",
+              // Variant styles
+              variantStyles6[variant].container,
+              errMsg ? variantStyles6[variant].error : variantStyles6[variant].focus,
+              // Reduce visual weight for sm: no default drop shadows
+              size !== "sm" && variant !== "minimal" && "shadow-sm",
+              size !== "sm" && isFocused && "shadow-md",
+              className
             ),
-            tabIndex: 0,
-            "aria-label": showPassword ? "Hide password" : "Show password",
-            children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.EyeOff, { className: sizeStyles8[size].icon }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Eye, { className: sizeStyles8[size].icon })
+            disabled,
+            ...restInput
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
+          getStatusIcon(),
+          RightIcon && !loading2 && !success && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RightIcon, { className: cn("text-muted-foreground", sizeStyles8[size].icon) }),
+          clearable && hasValue && !loading2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (onClear) return onClear();
+                rest.onChange?.({ target: { value: "" } });
+              },
+              className: cn(
+                "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-sm",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                "active:bg-accent active:text-accent-foreground",
+                sizeStyles8[size].button
+              ),
+              tabIndex: 0,
+              "aria-label": "Clear input",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.X, { className: sizeStyles8[size].icon })
+            }
+          ),
+          showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPassword(!showPassword),
+              className: cn(
+                "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-full",
+                "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring/40",
+                "active:bg-accent/50 active:text-accent-foreground",
+                sizeStyles8[size].button
+              ),
+              tabIndex: 0,
+              "aria-label": showPassword ? "Hide password" : "Show password",
+              children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.EyeOff, { className: sizeStyles8[size].icon }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Eye, { className: sizeStyles8[size].icon })
+            }
+          )
+        ] }),
+        variant === "minimal" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-primary/60 transition-all duration-300",
+              // default hidden
+              "w-0 opacity-0",
+              // expand underline when focused within input container
+              "group-focus-within:w-full group-focus-within:opacity-100"
+            )
           }
         )
       ] }),
-      variant === "minimal" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "div",
+      errMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: errorId, className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: errMsg })
+      ] }),
+      (description || hint) && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "p",
         {
+          id: descId,
           className: cn(
-            "absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-primary/60 transition-all duration-300",
-            // default hidden
-            "w-0 opacity-0",
-            // expand underline when focused within input container
-            "group-focus-within:w-full group-focus-within:opacity-100"
-          )
+            "text-xs transition-colors duration-200",
+            // follow focus state of the whole field area
+            "text-muted-foreground group-focus-within:text-primary/70"
+          ),
+          children: hint || description
         }
       )
-    ] }),
-    errMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: errorId, className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: errMsg })
-    ] }),
-    (description || hint) && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: descId, className: cn(
-      "text-xs transition-colors duration-200",
-      // follow focus state of the whole field area
-      "text-muted-foreground group-focus-within:text-primary/70"
-    ), children: hint || description })
-  ] });
-});
+    ] });
+  }
+);
 Input.displayName = "Input";
-var SearchInput = (0, import_react3.forwardRef)(({
-  onSearch,
-  searchDelay = 300,
-  placeholder = "Search...",
-  ...props
-}, ref) => {
-  const [searchValue, setSearchValue] = (0, import_react3.useState)(props.value || "");
-  import_react3.default.useEffect(() => {
-    if (!onSearch) return;
-    const timer = setTimeout(() => {
-      onSearch(searchValue);
-    }, searchDelay);
-    return () => clearTimeout(timer);
-  }, [searchValue, onSearch, searchDelay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Input,
-    {
-      ref,
-      type: "search",
-      leftIcon: import_lucide_react3.Search,
-      placeholder,
-      clearable: true,
-      value: searchValue,
-      onChange: (e) => setSearchValue(e.target.value),
-      onClear: () => setSearchValue(""),
-      ...props
-    }
-  );
-});
-SearchInput.displayName = "SearchInput";
-var PasswordInput = (0, import_react3.forwardRef)(({
-  showStrength = false,
-  strengthLabels = ["Weak", "Fair", "Good", "Strong"],
-  ...props
-}, ref) => {
-  const getPasswordStrength = (password) => {
-    let score = 0;
-    if (password.length >= 8) score++;
-    if (/[a-z]/.test(password)) score++;
-    if (/[A-Z]/.test(password)) score++;
-    if (/[0-9]/.test(password)) score++;
-    if (/[^A-Za-z0-9]/.test(password)) score++;
-    return Math.min(score, 4);
-  };
-  const strength = showStrength && typeof props.value === "string" ? getPasswordStrength(props.value) : 0;
-  const strengthColors = ["bg-destructive", "bg-warning", "bg-warning", "bg-success"];
-  const strengthLabel = strengthLabels[strength - 1];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, { ref, type: "password", ...props }),
-    showStrength && props.value && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((level) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "div",
-        {
-          className: cn(
-            "h-1 flex-1 rounded-full transition-colors duration-300",
-            level <= strength ? strengthColors[strength - 1] : "bg-muted"
-          )
-        },
-        level
-      )) }),
-      strengthLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: cn(
-        "text-xs font-medium",
-        strength <= 1 ? "text-destructive" : strength <= 2 ? "text-warning" : strength <= 3 ? "text-warning" : "text-success"
-      ), children: strengthLabel })
-    ] })
-  ] });
-});
-PasswordInput.displayName = "PasswordInput";
-var NumberInput = (0, import_react3.forwardRef)(({
-  min,
-  max,
-  step = 1,
-  showSteppers = true,
-  onIncrement,
-  onDecrement,
-  formatThousands = false,
-  locale = "vi-VN",
-  value,
-  onChange,
-  ...props
-}, ref) => {
-  const toNumber = (v) => {
-    if (v === "" || v === void 0 || v === null) return 0;
-    const n = Number(v);
-    return Number.isFinite(n) ? n : 0;
-  };
-  const format = import_react3.default.useCallback(
-    (n) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(n),
-    [locale]
-  );
-  const parse = (s) => {
-    const digits = (s || "").replace(/\D+/g, "");
-    return digits ? Number(digits) : NaN;
-  };
-  const [displayValue, setDisplayValue] = import_react3.default.useState(
-    formatThousands ? value !== void 0 && value !== null && value !== "" ? format(toNumber(value)) : "" : String(value ?? "")
-  );
-  const currentValue = toNumber(value);
-  import_react3.default.useEffect(() => {
-    if (formatThousands) {
-      const next = value === "" || value === void 0 || value === null ? "" : format(toNumber(value));
-      setDisplayValue((prev) => prev === next ? prev : next);
-    } else {
-      const next = String(value ?? "");
-      setDisplayValue((prev) => prev === next ? prev : next);
-    }
-  }, [value, formatThousands, locale, format]);
-  const handleIncrement = () => {
-    if (onIncrement) {
-      onIncrement();
-    } else if (onChange) {
-      const newValue = Math.min(currentValue + step, max ?? Infinity);
-      if (formatThousands) setDisplayValue(format(newValue));
-      onChange({ target: { value: newValue.toString() } });
-    }
-  };
-  const handleDecrement = () => {
-    if (onDecrement) {
-      onDecrement();
-    } else if (onChange) {
-      const newValue = Math.max(currentValue - step, min ?? -Infinity);
-      if (formatThousands) setDisplayValue(format(newValue));
-      onChange({ target: { value: newValue.toString() } });
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var SearchInput = (0, import_react3.forwardRef)(
+  ({ onSearch, searchDelay = 300, placeholder = "Search...", ...props }, ref) => {
+    const [searchValue, setSearchValue] = (0, import_react3.useState)(props.value || "");
+    import_react3.default.useEffect(() => {
+      if (!onSearch) return;
+      const timer = setTimeout(() => {
+        onSearch(searchValue);
+      }, searchDelay);
+      return () => clearTimeout(timer);
+    }, [searchValue, onSearch, searchDelay]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Input,
       {
         ref,
-        type: formatThousands ? "text" : "number",
-        min,
-        max,
-        step,
-        rightIcon: showSteppers ? void 0 : props.rightIcon,
-        value: displayValue,
-        onChange: (e) => {
-          if (!onChange) return;
-          if (!formatThousands) return onChange(e);
-          const raw = e.target.value;
-          const parsed = parse(raw);
-          if (Number.isNaN(parsed)) {
-            setDisplayValue("");
-            onChange({ target: { value: "" } });
-          } else {
-            const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
-            setDisplayValue(format(bounded));
-            onChange({ target: { value: bounded.toString() } });
+        type: "search",
+        leftIcon: import_lucide_react3.Search,
+        placeholder,
+        clearable: true,
+        value: searchValue,
+        onChange: (e) => setSearchValue(e.target.value),
+        onClear: () => setSearchValue(""),
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+var PasswordInput = (0, import_react3.forwardRef)(
+  ({ showStrength = false, strengthLabels = ["Weak", "Fair", "Good", "Strong"], ...props }, ref) => {
+    const getPasswordStrength = (password) => {
+      let score = 0;
+      if (password.length >= 8) score++;
+      if (/[a-z]/.test(password)) score++;
+      if (/[A-Z]/.test(password)) score++;
+      if (/[0-9]/.test(password)) score++;
+      if (/[^A-Za-z0-9]/.test(password)) score++;
+      return Math.min(score, 4);
+    };
+    const strength = showStrength && typeof props.value === "string" ? getPasswordStrength(props.value) : 0;
+    const strengthColors = ["bg-destructive", "bg-warning", "bg-warning", "bg-success"];
+    const strengthLabel = strengthLabels[strength - 1];
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, { ref, type: "password", ...props }),
+      showStrength && props.value && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((level) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            className: cn(
+              "h-1 flex-1 rounded-full transition-colors duration-300",
+              level <= strength ? strengthColors[strength - 1] : "bg-muted"
+            )
+          },
+          level
+        )) }),
+        strengthLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "p",
+          {
+            className: cn(
+              "text-xs font-medium",
+              strength <= 1 ? "text-destructive" : strength <= 2 ? "text-warning" : strength <= 3 ? "text-warning" : "text-success"
+            ),
+            children: strengthLabel
           }
-        },
-        ...props,
-        className: cn(
-          showSteppers && [
-            "pr-12",
-            // Hide native browser steppers
-            "[&::-webkit-outer-spin-button]:appearance-none",
-            "[&::-webkit-inner-spin-button]:appearance-none",
-            "[&::-webkit-inner-spin-button]:m-0",
-            "appearance-none"
-          ],
-          props.className
         )
+      ] })
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var NumberInput = (0, import_react3.forwardRef)(
+  ({ min, max, step = 1, showSteppers = true, onIncrement, onDecrement, formatThousands = false, locale = "vi-VN", value, onChange, ...props }, ref) => {
+    const toNumber = (v) => {
+      if (v === "" || v === void 0 || v === null) return 0;
+      const n = Number(v);
+      return Number.isFinite(n) ? n : 0;
+    };
+    const format = import_react3.default.useCallback((n) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(n), [locale]);
+    const parse = (s) => {
+      const digits = (s || "").replace(/\D+/g, "");
+      return digits ? Number(digits) : NaN;
+    };
+    const [displayValue, setDisplayValue] = import_react3.default.useState(
+      formatThousands ? value !== void 0 && value !== null && value !== "" ? format(toNumber(value)) : "" : String(value ?? "")
+    );
+    const currentValue = toNumber(value);
+    import_react3.default.useEffect(() => {
+      if (formatThousands) {
+        const next = value === "" || value === void 0 || value === null ? "" : format(toNumber(value));
+        setDisplayValue((prev) => prev === next ? prev : next);
+      } else {
+        const next = String(value ?? "");
+        setDisplayValue((prev) => prev === next ? prev : next);
+      }
+    }, [value, formatThousands, locale, format]);
+    const handleIncrement = () => {
+      if (onIncrement) {
+        onIncrement();
+      } else if (onChange) {
+        const newValue = Math.min(currentValue + step, max ?? Infinity);
+        if (formatThousands) setDisplayValue(format(newValue));
+        onChange({ target: { value: newValue.toString() } });
       }
-    ),
-    showSteppers && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex flex-col gap-0.5", children: [
+    };
+    const handleDecrement = () => {
+      if (onDecrement) {
+        onDecrement();
+      } else if (onChange) {
+        const newValue = Math.max(currentValue - step, min ?? -Infinity);
+        if (formatThousands) setDisplayValue(format(newValue));
+        onChange({ target: { value: newValue.toString() } });
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "button",
+        Input,
         {
-          type: "button",
-          onClick: handleIncrement,
-          disabled: max !== void 0 && currentValue >= max,
-          className: cn(
-            "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
-            "hover:bg-accent focus:outline-none focus:bg-accent",
-            "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-            "text-muted-foreground hover:text-foreground"
-          ),
-          "aria-label": "Increase value",
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "svg",
-            {
-              width: "8",
-              height: "8",
-              viewBox: "0 0 8 8",
-              fill: "none",
-              className: "flex-shrink-0",
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "path",
-                {
-                  d: "M4 2L6 6H2L4 2Z",
-                  fill: "currentColor"
-                }
-              )
+          ref,
+          type: formatThousands ? "text" : "number",
+          min,
+          max,
+          step,
+          rightIcon: showSteppers ? void 0 : props.rightIcon,
+          value: displayValue,
+          onChange: (e) => {
+            if (!onChange) return;
+            if (!formatThousands) return onChange(e);
+            const raw = e.target.value;
+            const parsed = parse(raw);
+            if (Number.isNaN(parsed)) {
+              setDisplayValue("");
+              onChange({ target: { value: "" } });
+            } else {
+              const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
+              setDisplayValue(format(bounded));
+              onChange({ target: { value: bounded.toString() } });
             }
+          },
+          ...props,
+          className: cn(
+            showSteppers && [
+              "pr-12",
+              // Hide native browser steppers
+              "[&::-webkit-outer-spin-button]:appearance-none",
+              "[&::-webkit-inner-spin-button]:appearance-none",
+              "[&::-webkit-inner-spin-button]:m-0",
+              "appearance-none"
+            ],
+            props.className
           )
         }
       ),
+      showSteppers && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleIncrement,
+            disabled: max !== void 0 && currentValue >= max,
+            className: cn(
+              "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
+              "hover:bg-accent focus:outline-none focus:bg-accent",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+              "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-label": "Increase value",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 2L6 6H2L4 2Z", fill: "currentColor" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            disabled: min !== void 0 && currentValue <= min,
+            className: cn(
+              "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
+              "hover:bg-accent focus:outline-none focus:bg-accent",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+              "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-label": "Decrease value",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 6L2 2H6L4 6Z", fill: "currentColor" }) })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+var Textarea = (0, import_react3.forwardRef)(
+  ({ label, error, description, variant = "default", resize = "vertical", counter = false, className, required, value, maxLength, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+    const charCount = typeof value === "string" ? value.length : 0;
+    const variantStyles6 = {
+      default: "bg-background border border-input hover:border-accent-foreground/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+      filled: "bg-muted/50 border border-transparent hover:bg-muted/70 focus-visible:outline-none focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+      outlined: "bg-transparent border border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+      minimal: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none"
+    };
+    const resizeClasses = {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full space-y-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "label",
+          {
+            className: cn(
+              "text-sm font-medium transition-colors duration-200",
+              isFocused ? "text-primary" : "text-foreground",
+              error && "text-destructive"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        counter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "span",
+          {
+            className: cn(
+              "text-xs transition-colors duration-200",
+              charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
+              charCount >= maxLength && "text-destructive"
+            ),
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "button",
+        "textarea",
         {
-          type: "button",
-          onClick: handleDecrement,
-          disabled: min !== void 0 && currentValue <= min,
+          ref,
+          value,
+          maxLength,
+          required,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
           className: cn(
-            "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
-            "hover:bg-accent focus:outline-none focus:bg-accent",
-            "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-            "text-muted-foreground hover:text-foreground"
-          ),
-          "aria-label": "Decrease value",
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "svg",
-            {
-              width: "8",
-              height: "8",
-              viewBox: "0 0 8 8",
-              fill: "none",
-              className: "flex-shrink-0",
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "path",
-                {
-                  d: "M4 6L2 2H6L4 6Z",
-                  fill: "currentColor"
-                }
-              )
-            }
-          )
-        }
-      )
-    ] })
-  ] });
-});
-NumberInput.displayName = "NumberInput";
-var Textarea = (0, import_react3.forwardRef)(({
-  label,
-  error,
-  description,
-  variant = "default",
-  resize = "vertical",
-  counter = false,
-  className,
-  required,
-  value,
-  maxLength,
-  ...props
-}, ref) => {
-  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
-  const charCount = typeof value === "string" ? value.length : 0;
-  const variantStyles6 = {
-    default: "bg-background border border-input hover:border-accent-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-    filled: "bg-muted/50 border border-transparent hover:bg-muted/70 focus-visible:outline-none focus-visible:bg-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-    outlined: "bg-transparent border border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-    minimal: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none"
-  };
-  const resizeClasses = {
-    none: "resize-none",
-    vertical: "resize-y",
-    horizontal: "resize-x",
-    both: "resize"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full space-y-2", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: cn(
-        "text-sm font-medium transition-colors duration-200",
-        isFocused ? "text-primary" : "text-foreground",
-        error && "text-destructive"
-      ), children: [
-        label,
-        required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+            "w-full rounded-lg px-4 py-3 text-sm text-foreground transition-all duration-200",
+            "placeholder:text-muted-foreground focus:outline-none min-h-[80px]",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            variantStyles6[variant],
+            // DÒNG NÀY ĐÃ ĐƯỢC CẬP NHẬT:
+            error && "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+            resizeClasses[resize],
+            isFocused && "shadow-md",
+            variant !== "minimal" && "shadow-sm",
+            className
+          ),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: error })
       ] }),
-      counter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: cn(
-        "text-xs transition-colors duration-200",
-        charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
-        charCount >= maxLength && "text-destructive"
-      ), children: [
-        charCount,
-        "/",
-        maxLength
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "textarea",
-      {
-        ref,
-        value,
-        maxLength,
-        required,
-        onFocus: () => setIsFocused(true),
-        onBlur: () => setIsFocused(false),
-        className: cn(
-          "w-full rounded-lg px-4 py-3 text-sm text-foreground transition-all duration-200",
-          "placeholder:text-muted-foreground focus:outline-none min-h-[80px]",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          variantStyles6[variant],
-          error && "border-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-          resizeClasses[resize],
-          isFocused && "shadow-md",
-          variant !== "minimal" && "shadow-sm",
-          className
-        ),
-        ...props
-      }
-    ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: error })
-    ] }),
-    description && !error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: cn(
-      "text-xs transition-colors duration-200",
-      isFocused ? "text-primary/70" : "text-muted-foreground"
-    ), children: description })
-  ] });
-});
+      description && !error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: cn("text-xs transition-colors duration-200", isFocused ? "text-primary/70" : "text-muted-foreground"), children: description })
+    ] });
+  }
+);
 Textarea.displayName = "Textarea";
 var Input_default = Input;
 
@@ -1459,36 +1433,125 @@ var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 ));
 Label.displayName = "Label";
 
-// ../../components/ui/Avatar.tsx
-var React7 = __toESM(require("react"), 1);
+// ../../components/ui/SmartImage.tsx
+var import_image = __toESM(require("next/image"), 1);
+var import_react5 = __toESM(require("react"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_FALLBACK = "/images/products/hoa-hong-do.png";
+var FAILED_SRCS = /* @__PURE__ */ new Set();
+function SmartImage({
+  src,
+  alt,
+  className,
+  ratioClass,
+  roundedClass = "rounded-lg",
+  fill = true,
+  width,
+  height,
+  sizes = "(max-width: 768px) 100vw, 33vw",
+  priority = false,
+  quality = 80,
+  fit = "cover",
+  objectPosition,
+  fallbackSrc = DEFAULT_FALLBACK
+}) {
+  const normalize = (input) => {
+    if (!input || input.length === 0) return fallbackSrc;
+    const raw = input.trim();
+    if (raw.startsWith("/images/products/") && /\.(jpg|jpeg)($|\?)/i.test(raw)) {
+      return raw.replace(/\.(jpg|jpeg)(?=$|\?)/i, ".png");
+    }
+    if (raw.startsWith("//")) {
+      return `https:${raw}`;
+    }
+    if (/^(https?:|data:|blob:)/i.test(raw)) {
+      return FAILED_SRCS.has(raw) ? fallbackSrc : raw;
+    }
+    if (raw.startsWith("/")) {
+      return FAILED_SRCS.has(raw) ? fallbackSrc : raw;
+    }
+    const normalized = `/${raw.replace(/^\.\/?/, "")}`;
+    return FAILED_SRCS.has(normalized) ? fallbackSrc : normalized;
+  };
+  const [resolvedSrc, setResolvedSrc] = import_react5.default.useState(() => normalize(src));
+  import_react5.default.useEffect(() => {
+    setResolvedSrc(normalize(src));
+  }, [src]);
+  const handleError = () => {
+    if (resolvedSrc && resolvedSrc !== fallbackSrc) FAILED_SRCS.add(resolvedSrc);
+    if (resolvedSrc.endsWith(".jpg")) {
+      const next = resolvedSrc.replace(/\.jpg($|\?)/, ".png$1");
+      setResolvedSrc(next);
+    } else if (resolvedSrc !== fallbackSrc) {
+      setResolvedSrc(fallbackSrc);
+    }
+  };
+  const Wrapper = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden bg-muted/30",
+        // remove any default focus outline/ring for visual consistency with Card
+        "outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0",
+        ratioClass,
+        roundedClass,
+        className
+      ),
+      children
+    }
+  );
+  if (fill) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_image.default,
+      {
+        src: resolvedSrc,
+        alt,
+        fill: true,
+        sizes,
+        onError: handleError,
+        priority,
+        quality,
+        style: { objectFit: fit, objectPosition }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden bg-muted/30",
+        "outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0",
+        roundedClass,
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_image.default,
+        {
+          src: resolvedSrc,
+          alt,
+          width,
+          height,
+          sizes,
+          onError: handleError,
+          priority,
+          quality,
+          style: { objectFit: fit, objectPosition, width: "100%", height: "100%" }
+        }
+      )
+    }
+  );
+}
+
+// ../../components/ui/Avatar.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var sizeClasses = {
   sm: "h-8 w-8 text-sm",
   md: "h-10 w-10 text-base",
   lg: "h-14 w-14 text-lg"
 };
 var Avatar = ({ src, alt = "avatar", fallback = "?", size = "md", className, onClick, ...props }) => {
-  const [loaded, setLoaded] = React7.useState(false);
-  const [isImageLoading, setIsImageLoading] = React7.useState(!!src);
-  const [imageError, setImageError] = React7.useState(false);
-  React7.useEffect(() => {
-    if (src) {
-      setIsImageLoading(true);
-      setImageError(false);
-      setLoaded(false);
-    }
-  }, [src]);
-  const handleImageLoad = () => {
-    setLoaded(true);
-    setIsImageLoading(false);
-  };
-  const handleImageError = () => {
-    setLoaded(false);
-    setIsImageLoading(false);
-    setImageError(true);
-  };
-  const hasValidSrc = src && src.trim().length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const hasValidSrc = !!(src && src.trim().length > 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: cn(
@@ -1500,23 +1563,21 @@ var Avatar = ({ src, alt = "avatar", fallback = "?", size = "md", className, onC
       onClick,
       ...props,
       children: [
-        isImageLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-muted via-muted-foreground/20 to-muted animate-pulse rounded-full" }),
-        isImageLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-primary-foreground/30 to-transparent animate-shimmer rounded-full" }),
-        hasValidSrc && !imageError && // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "img",
+        hasValidSrc && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          SmartImage,
           {
             src,
             alt,
-            onLoad: handleImageLoad,
-            onError: handleImageError,
-            className: cn(
-              "absolute inset-0 h-full w-full object-cover rounded-full transition-all duration-300",
-              loaded ? "opacity-100 scale-100" : "opacity-0 scale-110"
-            )
+            fill: true,
+            ratioClass: void 0,
+            className: "h-full w-full",
+            roundedClass: "rounded-full",
+            fit: "cover",
+            objectPosition: "center",
+            quality: 80
           }
-        ),
-        (!hasValidSrc || imageError || !loaded) && !isImageLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ) }),
+        !hasValidSrc && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             className: cn(
@@ -1526,7 +1587,7 @@ var Avatar = ({ src, alt = "avatar", fallback = "?", size = "md", className, onC
             children: fallback
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bottom-0 right-0 w-3 h-3 bg-success border-2 border-background rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200" })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute bottom-0 right-0 w-3 h-3 bg-success border-2 border-background rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200" })
       ]
     }
   );
@@ -1534,7 +1595,7 @@ var Avatar = ({ src, alt = "avatar", fallback = "?", size = "md", className, onC
 var Avatar_default = Avatar;
 
 // ../../components/ui/Skeleton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Skeleton = ({
   className,
   width,
@@ -1555,7 +1616,7 @@ var Skeleton = ({
     none: ""
   };
   if (variant === "text" && lines > 1) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("space-y-2", className), children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("space-y-2", className), children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         className: cn(
@@ -1573,7 +1634,7 @@ var Skeleton = ({
       index
     )) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       className: cn(
@@ -1595,7 +1656,7 @@ var SkeletonAvatar = ({
     md: "w-10 h-10",
     lg: "w-12 h-12"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Skeleton,
     {
       variant: "circular",
@@ -1612,7 +1673,7 @@ var SkeletonButton = ({
     md: "h-10 w-24",
     lg: "h-12 w-28"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Skeleton,
     {
       variant: "rounded",
@@ -1625,7 +1686,7 @@ var SkeletonText = ({
   className,
   width = "100%"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Skeleton,
     {
       variant: "text",
@@ -1641,42 +1702,42 @@ var SkeletonCard = ({
   textLines = 3,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("p-4 space-y-4 rounded-lg border bg-card", className), children: [
-    showAvatar && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center space-x-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonAvatar, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-4 w-24" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-3 w-16" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("p-4 space-y-4 rounded-lg bg-card outline-none focus:outline-none", className), children: [
+    showAvatar && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonAvatar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-3 w-16" })
       ] })
     ] }),
-    showImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-48 w-full rounded-md" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonText, { lines: textLines }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex space-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonButton, { size: "sm" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonButton, { size: "sm" })
+    showImage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-48 w-full rounded-md" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonText, { lines: textLines }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonButton, { size: "sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonButton, { size: "sm" })
     ] })
   ] });
 };
 var SkeletonPost = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("p-6 space-y-4 rounded-xl border bg-card", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center space-x-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonAvatar, { size: "lg" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-4 w-32" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-3 w-20" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("p-6 space-y-4 rounded-xl bg-card outline-none focus:outline-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonAvatar, { size: "lg" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-3 w-20" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonText, { lines: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-64 w-full rounded-lg" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-3 w-16" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-3 w-20" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-3 w-12" })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonText, { lines: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-64 w-full rounded-lg" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-3 w-16" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-3 w-20" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-3 w-12" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-between pt-2 border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex space-x-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-8 w-16" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-8 w-20" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-8 w-16" })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center justify-between pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex space-x-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-8 w-16" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-8 w-20" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-8 w-16" })
     ] }) })
   ] });
 };
@@ -1685,21 +1746,21 @@ var SkeletonMessage = ({
   showAvatar = true,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn(
     "flex items-end space-x-2",
     own && "flex-row-reverse space-x-reverse",
     className
   ), children: [
-    showAvatar && !own && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonAvatar, { size: "sm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn(
+    showAvatar && !own && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonAvatar, { size: "sm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn(
       "max-w-xs space-y-1",
       own ? "items-end" : "items-start"
     ), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: cn(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: cn(
         "h-10 rounded-2xl",
         own ? "w-32 bg-primary/20" : "w-40 bg-muted"
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-3 w-12" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-3 w-12" })
     ] })
   ] });
 };
@@ -1709,13 +1770,13 @@ var SkeletonList = ({
   showAvatar = true,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center space-x-3 p-3 rounded-lg", children: [
-    showAvatar && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonAvatar, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-4 w-3/4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-3 w-1/2" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-3 p-3 rounded-lg", children: [
+    showAvatar && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonAvatar, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-4 w-3/4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-3 w-1/2" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-6 w-16" })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-6 w-16" })
   ] }, index)) });
 };
 var SkeletonTable = ({
@@ -1723,17 +1784,17 @@ var SkeletonTable = ({
   columns = 4,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex space-x-4 p-3 border-b border-border", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-4 flex-1" }, index)) }),
-    Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex space-x-4 p-3", children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-4 flex-1" }, colIndex)) }, rowIndex))
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex space-x-4 p-3", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-4 flex-1" }, index)) }),
+    Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex space-x-4 p-3", children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Skeleton, { className: "h-4 flex-1" }, colIndex)) }, rowIndex))
   ] });
 };
 var Skeleton_default = Skeleton;
 
 // ../../components/ui/Progress.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var variantStyles2 = {
   default: "bg-muted-foreground",
   primary: "bg-gradient-to-r from-primary via-primary/90 to-primary",
@@ -1765,29 +1826,29 @@ var Progress = ({
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
   const isComplete = status === "complete" || percentage >= 100;
   const isError = status === "error";
-  const labelId = import_react5.default.useId();
-  const descId = import_react5.default.useId();
+  const labelId = import_react6.default.useId();
+  const descId = import_react6.default.useId();
   const getStatusIcon = () => {
-    if (isComplete) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "w-4 h-4 text-success" });
-    if (isError) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.X, { className: "w-4 h-4 text-destructive" });
-    if (animated || indeterminate) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Clock, { className: "w-4 h-4 text-muted-foreground animate-spin" });
+    if (isComplete) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Check, { className: "w-4 h-4 text-success" });
+    if (isError) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.X, { className: "w-4 h-4 text-destructive" });
+    if (animated || indeterminate) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Clock, { className: "w-4 h-4 text-muted-foreground animate-spin" });
     return null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("w-full space-y-3", className), children: [
-    (label || showValue || description) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id: labelId, className: "font-medium text-foreground", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("w-full space-y-3", className), children: [
+    (label || showValue || description) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex justify-between items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: labelId, className: "font-medium text-foreground", children: label }),
           getStatusIcon()
         ] }),
-        showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn(
+        showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn(
           "text-sm font-medium",
           isComplete ? "text-success" : isError ? "text-destructive" : "text-muted-foreground"
         ), children: isComplete ? "Complete" : isError ? "Error" : `${Math.round(percentage)}%` })
       ] }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { id: descId, className: "text-sm text-muted-foreground", children: description })
+      description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: descId, className: "text-sm text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         role: "progressbar",
@@ -1801,7 +1862,7 @@ var Progress = ({
           "border border-border/50",
           sizeStyles2[size]
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: cn(
@@ -1854,11 +1915,11 @@ var CircularProgress = ({
     info: "stroke-info"
   };
   const getContentIcon = () => {
-    if (isComplete) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "w-5 h-5 text-success" });
-    if (isError) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.X, { className: "w-5 h-5 text-destructive" });
+    if (isComplete) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Check, { className: "w-5 h-5 text-success" });
+    if (isError) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.X, { className: "w-5 h-5 text-destructive" });
     return null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: cn("relative inline-flex items-center justify-center", className),
@@ -1868,7 +1929,7 @@ var CircularProgress = ({
       "aria-valuenow": indeterminate ? void 0 : Math.round(percentage),
       "aria-label": children ? void 0 : "Progress",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "svg",
           {
             width: size,
@@ -1879,7 +1940,7 @@ var CircularProgress = ({
             ),
             style: { animationDuration: indeterminate ? "2s" : void 0 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "circle",
                 {
                   cx: size / 2,
@@ -1891,7 +1952,7 @@ var CircularProgress = ({
                   className: trackColor
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "circle",
                 {
                   cx: size / 2,
@@ -1915,13 +1976,13 @@ var CircularProgress = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
           getContentIcon(),
-          showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn(
+          showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn(
             "text-sm font-semibold",
             isComplete ? "text-success" : isError ? "text-destructive" : "text-foreground"
           ), children: isComplete ? "\u2713" : isError ? "\u2717" : `${Math.round(percentage)}%` }),
-          indeterminate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Clock, { className: "w-4 h-4 text-muted-foreground animate-pulse" })
+          indeterminate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Clock, { className: "w-4 h-4 text-muted-foreground animate-pulse" })
         ] }) })
       ]
     }
@@ -1944,10 +2005,10 @@ var StepProgress = ({
     if (stepIndex === currentStep) return "current";
     return "upcoming";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("w-full", className), role: "list", "aria-label": "Progress steps", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center justify-between", children: steps.map((step, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("w-full", className), role: "list", "aria-label": "Progress steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center justify-between", children: steps.map((step, index) => {
     const status = getStepStatus(index);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center", role: "listitem", "aria-current": status === "current" ? "step" : void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center", role: "listitem", "aria-current": status === "current" ? "step" : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           className: cn(
@@ -1968,10 +2029,10 @@ var StepProgress = ({
               "hover:border-muted-foreground/50"
             ]
           ),
-          children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "w-3 h-3" }) : index + 1
+          children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Check, { className: "w-3 h-3" }) : index + 1
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "span",
         {
           className: cn(
@@ -1983,7 +2044,7 @@ var StepProgress = ({
           children: step
         }
       ),
-      index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           className: cn(
@@ -2003,8 +2064,8 @@ var MiniProgress = ({
   showValue = false
 }) => {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className: "flex-1 h-1.5 bg-muted/50 rounded-full overflow-hidden",
@@ -2012,7 +2073,7 @@ var MiniProgress = ({
         "aria-valuemin": 0,
         "aria-valuemax": max,
         "aria-valuenow": Math.round(percentage),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: cn(
@@ -2024,7 +2085,7 @@ var MiniProgress = ({
         )
       }
     ),
-    showValue && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-xs font-medium text-muted-foreground min-w-[2.5rem] text-right", children: [
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-xs font-medium text-muted-foreground min-w-[2.5rem] text-right", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -2044,11 +2105,11 @@ var BatteryProgress = ({
     if (percentage <= 50) return "warning";
     return "success";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", role: "progressbar", "aria-label": "Battery level", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": Math.round(percentage), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-6 h-3 border-2 border-foreground/20 rounded-sm relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute -right-1 top-0.5 w-0.5 h-1 bg-foreground/20 rounded-r-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", role: "progressbar", "aria-label": "Battery level", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": Math.round(percentage), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-6 h-3 border-2 border-foreground/20 rounded-sm relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -right-1 top-0.5 w-0.5 h-1 bg-foreground/20 rounded-r-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: cn(
@@ -2060,9 +2121,9 @@ var BatteryProgress = ({
           }
         )
       ] }),
-      charging && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-2 h-2 text-info-foreground", children: "\u26A1" }) })
+      charging && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-2 h-2 text-info-foreground", children: "\u26A1" }) })
     ] }),
-    showValue && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: cn(
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: cn(
       "text-xs font-medium",
       percentage <= 20 ? "text-destructive" : "text-muted-foreground"
     ), children: [
@@ -2083,7 +2144,7 @@ var SegmentedProgress = ({
     md: "h-2",
     lg: "h-3"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       className: cn("flex gap-1", className),
@@ -2091,7 +2152,7 @@ var SegmentedProgress = ({
       "aria-valuemin": 0,
       "aria-valuemax": segments,
       "aria-valuenow": activeSegments,
-      children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           className: cn(
@@ -2119,13 +2180,13 @@ var LoadingProgress = ({
   const getStatusIcon = () => {
     switch (status) {
       case "complete":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "w-4 h-4 text-success" });
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Check, { className: "w-4 h-4 text-success" });
       case "error":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.X, { className: "w-4 h-4 text-destructive" });
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.X, { className: "w-4 h-4 text-destructive" });
       case "paused":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Clock, { className: "w-4 h-4 text-warning" });
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Clock, { className: "w-4 h-4 text-warning" });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-2 h-2 bg-primary rounded-full animate-bounce" });
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-2 h-2 bg-primary rounded-full animate-bounce" });
     }
   };
   const getStatusColor = () => {
@@ -2140,15 +2201,15 @@ var LoadingProgress = ({
         return variant;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
         getStatusIcon(),
-        label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium text-foreground", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-medium text-foreground", children: label })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-muted-foreground", children: status === "complete" ? "Complete" : `${Math.round(percentage)}%` })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground", children: status === "complete" ? "Complete" : `${Math.round(percentage)}%` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className: "w-full h-2 bg-muted/50 rounded-full overflow-hidden",
@@ -2157,7 +2218,7 @@ var LoadingProgress = ({
         "aria-valuemax": max,
         "aria-valuenow": Math.round(percentage),
         "aria-label": label || "Loading progress",
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: cn(
@@ -2170,9 +2231,9 @@ var LoadingProgress = ({
         )
       }
     ),
-    (speed || timeRemaining) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
-      speed && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: speed }),
-      timeRemaining && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: timeRemaining })
+    (speed || timeRemaining) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
+      speed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: speed }),
+      timeRemaining && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: timeRemaining })
     ] })
   ] });
 };
@@ -2181,7 +2242,7 @@ var LoadingProgress = ({
 var React9 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var sizeStyles3 = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -2252,8 +2313,8 @@ var Modal = ({
   if (!isMounted || !isOpen && !isVisible) {
     return null;
   }
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
@@ -2262,7 +2323,7 @@ var Modal = ({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         className: cn(
@@ -2279,12 +2340,12 @@ var Modal = ({
         },
         onClick: (e) => e.stopPropagation(),
         children: [
-          (title || description || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between p-6 pb-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1.5", children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: description })
+          (title || description || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start justify-between p-6 pb-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-1.5", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: description })
             ] }),
-            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 onClick: onClose,
@@ -2293,11 +2354,11 @@ var Modal = ({
                   "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                   "disabled:pointer-events-none "
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.X, { className: "h-4 w-4 cursor-pointer" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.X, { className: "h-4 w-4 cursor-pointer" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "p-6", children })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-6", children })
         ]
       }
     )
@@ -2307,12 +2368,12 @@ var Modal = ({
 var Modal_default = Modal;
 
 // ../../components/ui/Toast.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ToastContext = (0, import_react6.createContext)(void 0);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ToastContext = (0, import_react7.createContext)(void 0);
 var useToast = () => {
-  const context = (0, import_react6.useContext)(ToastContext);
+  const context = (0, import_react7.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -2323,12 +2384,12 @@ var ToastProvider = ({
   position = "top-right",
   maxToasts = 5
 }) => {
-  const [toasts, setToasts] = (0, import_react6.useState)([]);
-  const idRef = (0, import_react6.useRef)(0);
-  const removeToast = (0, import_react6.useCallback)((id) => {
+  const [toasts, setToasts] = (0, import_react7.useState)([]);
+  const idRef = (0, import_react7.useRef)(0);
+  const removeToast = (0, import_react7.useCallback)((id) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
-  const addToast = (0, import_react6.useCallback)((toast) => {
+  const addToast = (0, import_react7.useCallback)((toast) => {
     const id = `toast-${++idRef.current}`;
     const newToast = { ...toast, id };
     setToasts((prev) => {
@@ -2349,19 +2410,19 @@ var ToastProvider = ({
     "top-center": "top-4 left-1/2 transform -translate-x-1/2",
     "bottom-center": "bottom-4 left-1/2 transform -translate-x-1/2"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ToastContext.Provider, { value: { addToast, removeToast, toasts }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToastContext.Provider, { value: { addToast, removeToast, toasts }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("fixed z-50 flex flex-col gap-2 pointer-events-none", positionClasses[position]), "aria-live": "polite", "aria-atomic": true, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastComponent, { toast, onRemove: removeToast }, toast.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("fixed z-50 flex flex-col gap-2 pointer-events-none", positionClasses[position]), "aria-live": "polite", "aria-atomic": true, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastComponent, { toast, onRemove: removeToast }, toast.id)) })
   ] });
 };
 var ToastComponent = ({ toast, onRemove }) => {
-  const [isVisible, setIsVisible] = (0, import_react6.useState)(false);
-  const [progress, setProgress] = (0, import_react6.useState)(100);
-  const [paused, setPaused] = (0, import_react6.useState)(false);
-  const [startTs] = (0, import_react6.useState)(() => Date.now());
+  const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
+  const [progress, setProgress] = (0, import_react7.useState)(100);
+  const [paused, setPaused] = (0, import_react7.useState)(false);
+  const [startTs] = (0, import_react7.useState)(() => Date.now());
   const total = toast.duration && toast.duration > 0 ? toast.duration : 5e3;
-  const [remaining, setRemaining] = (0, import_react6.useState)(total);
-  (0, import_react6.useEffect)(() => {
+  const [remaining, setRemaining] = (0, import_react7.useState)(total);
+  (0, import_react7.useEffect)(() => {
     setIsVisible(true);
     if (toast.duration === 0) return;
     let raf;
@@ -2409,7 +2470,7 @@ var ToastComponent = ({ toast, onRemove }) => {
   };
   const config = typeConfig[toast.type];
   const Icon = config.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: cn(
@@ -2423,12 +2484,12 @@ var ToastComponent = ({ toast, onRemove }) => {
       onMouseEnter: () => setPaused(true),
       onMouseLeave: () => setPaused(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start gap-3 p-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: cn("h-5 w-5 mt-0.5 shrink-0", config.iconClassName) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 space-y-1", children: [
-            toast.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h4", { className: "font-medium text-sm leading-none", children: toast.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed", children: toast.message }),
-            toast.action && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start gap-3 p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { className: cn("h-5 w-5 mt-0.5 shrink-0", config.iconClassName) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 space-y-1", children: [
+            toast.title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h4", { className: "font-medium text-sm leading-none", children: toast.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed", children: toast.message }),
+            toast.action && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "button",
               {
                 onClick: () => {
@@ -2440,7 +2501,7 @@ var ToastComponent = ({ toast, onRemove }) => {
               }
             )
           ] }),
-          (toast.dismissible ?? true) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          (toast.dismissible ?? true) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
               onClick: handleRemove,
@@ -2449,11 +2510,11 @@ var ToastComponent = ({ toast, onRemove }) => {
                 "transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50"
               ),
               "aria-label": "Close toast",
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.X, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "h-4 w-4" })
             }
           )
         ] }),
-        toast.duration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute left-0 right-0 bottom-0 h-1 bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        toast.duration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute left-0 right-0 bottom-0 h-1 bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "div",
           {
             className: cn(
@@ -2475,7 +2536,7 @@ var Toast_default = ToastProvider;
 // ../../components/ui/Tooltip.tsx
 var React11 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var variantStyles3 = {
   default: "bg-popover text-popover-foreground border-border",
   info: "bg-info text-info-foreground border-info/20",
@@ -2561,7 +2622,7 @@ var Tooltip = ({
   if (disabled || !content) {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
     React11.cloneElement(children, {
       ref: triggerRef,
       onMouseEnter: handleMouseEnter,
@@ -2570,7 +2631,7 @@ var Tooltip = ({
       onBlur: handleBlur
     }),
     isMounted && isOpen && position && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "div",
         {
           style: {
@@ -2701,7 +2762,7 @@ var useShadCNAnimations = () => {
 };
 
 // ../../components/ui/Popover.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Popover = ({
   trigger,
   children,
@@ -2813,7 +2874,7 @@ var Popover = ({
       setIsOpen(next);
     }
   };
-  const popoverContent = isOpen && dropdownPosition ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const popoverContent = isOpen && dropdownPosition ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       "data-popover": true,
@@ -2834,7 +2895,7 @@ var Popover = ({
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           className: cn(
@@ -2848,7 +2909,7 @@ var Popover = ({
       )
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
     (() => {
       const triggerEl = trigger;
       return React12.cloneElement(triggerEl, {
@@ -2877,7 +2938,7 @@ var Popover = ({
 var React13 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var sizeStyles4 = {
   sm: {
     right: "w-[300px]",
@@ -3004,8 +3065,8 @@ var Sheet = ({
     onOpenChange(false);
   };
   if (!mounted || !open && !isVisible) return null;
-  const sheetContent = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "fixed inset-0 z-50", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const sheetContent = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fixed inset-0 z-50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         className: cn(
@@ -3016,7 +3077,7 @@ var Sheet = ({
         onClick: handleOverlayClick
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
         className: cn(
@@ -3038,14 +3099,14 @@ var Sheet = ({
           transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
         },
         children: [
-          (title || description || header || showClose) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-shrink-0 border-b border-border", children: header || /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between p-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1", children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: "text-lg font-semibold text-foreground", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-muted-foreground mt-1", children: description })
+          (title || description || header || showClose) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-shrink-0 border-b border-border", children: header || /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between p-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-lg font-semibold text-foreground", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-muted-foreground mt-1", children: description })
             ] }),
-            showClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: handleClose, className: "h-8 w-8 p-0 rounded-md cursor-pointer", icon: import_lucide_react7.X })
+            showClose && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: handleClose, className: "h-8 w-8 p-0 rounded-md cursor-pointer", icon: import_lucide_react7.X })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "div",
             {
               className: "flex-1 overflow-auto p-4",
@@ -3057,7 +3118,7 @@ var Sheet = ({
               children
             }
           ),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-shrink-0 border-t border-border p-4", children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-shrink-0 border-t border-border p-4", children: footer })
         ]
       }
     )
@@ -3065,38 +3126,38 @@ var Sheet = ({
   return typeof window !== "undefined" ? (0, import_react_dom4.createPortal)(sheetContent, document.body) : null;
 };
 var Drawer = ({ placement = "right", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Sheet, { ...props, side: placement, variant: "overlay" });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Sheet, { ...props, side: placement, variant: "overlay" });
 };
 var SlideOver = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Sheet, { ...props, side: "right", variant: "overlay", size: "lg" });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Sheet, { ...props, side: "right", variant: "overlay", size: "lg" });
 };
 var BottomSheet = ({ snapPoints = ["25%", "50%", "90%"], defaultSnap = 1, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Sheet, { ...props, side: "bottom", variant: "overlay", className: cn("rounded-t-lg", props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Sheet, { ...props, side: "bottom", variant: "overlay", className: cn("rounded-t-lg", props.className) });
 };
 var SidebarSheet = ({ navigation, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Sheet, { ...props, side: "left", variant: "push", size: "md", children: [
-    navigation && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "border-b border-border pb-4 mb-4", children: navigation }),
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Sheet, { ...props, side: "left", variant: "push", size: "md", children: [
+    navigation && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "border-b border-border pb-4 mb-4", children: navigation }),
     children
   ] });
 };
 
 // ../../components/ui/Alert.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // ../../components/icons/AlertIcons.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function InfoIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Info, { "aria-hidden": true, className: props.className });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Info, { "aria-hidden": true, className: props.className });
 }
 function WarningIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.AlertTriangle, { "aria-hidden": true, className: props.className });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.AlertTriangle, { "aria-hidden": true, className: props.className });
 }
 function CheckCircleIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.CheckCircle2, { "aria-hidden": true, className: props.className });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.CheckCircle2, { "aria-hidden": true, className: props.className });
 }
 function ErrorIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.OctagonX, { "aria-hidden": true, className: props.className });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.OctagonX, { "aria-hidden": true, className: props.className });
 }
 
 // ../../components/ui/Alert.tsx
@@ -3114,42 +3175,42 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // ../../components/ui/Alert.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var variantIcons = {
-  default: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InfoIcon, { className: "h-4 w-4 text-muted-foreground" }),
-  info: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InfoIcon, { className: "h-4 w-4 text-info" }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckCircleIcon, { className: "h-4 w-4 text-success" }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(WarningIcon, { className: "h-4 w-4 text-warning" }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorIcon, { className: "h-4 w-4 text-destructive" })
+  default: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InfoIcon, { className: "h-4 w-4 text-muted-foreground" }),
+  info: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InfoIcon, { className: "h-4 w-4 text-info" }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckCircleIcon, { className: "h-4 w-4 text-success" }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(WarningIcon, { className: "h-4 w-4 text-warning" }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ErrorIcon, { className: "h-4 w-4 text-destructive" })
 };
 var Alert = ({ title, description, variant = "default", className, icon, dismissible = false, onClose, actions, closeAriaLabel }) => {
-  const [open, setOpen] = (0, import_react7.useState)(true);
+  const [open, setOpen] = (0, import_react8.useState)(true);
   const t = (0, import_next_intl2.useTranslations)("Common");
   if (!open) return null;
   const handleClose = () => {
     setOpen(false);
     onClose?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: cn("w-full p-4 rounded-md flex items-start gap-3", VARIANT_STYLES_ALERT[variant], className),
       role: "alert",
       "aria-live": variant === "error" ? "assertive" : "polite",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pt-1", children: icon ?? variantIcons[variant] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "font-semibold text-sm leading-none mb-1 text-foreground", children: title }),
-          description && (typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description })),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-2 flex flex-wrap gap-2", children: actions })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pt-1", children: icon ?? variantIcons[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "font-semibold text-sm leading-none mb-1 text-foreground", children: title }),
+          description && (typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description })),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-2 flex flex-wrap gap-2", children: actions })
         ] }),
-        dismissible && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             onClick: handleClose,
             className: "rounded-md p-1 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             "aria-label": closeAriaLabel || t("closeAlert"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.X, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.X, { className: "h-4 w-4" })
           }
         )
       ]
@@ -3159,7 +3220,7 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
 var Alert_default = Alert;
 
 // ../../components/ui/GlobalLoading.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_lucide_react10 = require("lucide-react");
 
 // ../../lib/utils/loading.ts
@@ -3205,20 +3266,20 @@ var loading = new LoadingManager();
 
 // ../../components/ui/GlobalLoading.tsx
 var import_next_intl3 = require("next-intl");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var GlobalLoading = ({
   className,
   backdrop = true,
   position = "fixed",
   size = "lg"
 }) => {
-  const [state, setState] = (0, import_react8.useState)(() => loading.getState());
-  (0, import_react8.useEffect)(() => {
+  const [state, setState] = (0, import_react9.useState)(() => loading.getState());
+  (0, import_react9.useEffect)(() => {
     const unsubscribe = loading.subscribe(setState);
     return unsubscribe;
   }, []);
   if (!state.isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: cn(
@@ -3230,9 +3291,9 @@ var GlobalLoading = ({
       role: "dialog",
       "aria-modal": true,
       "aria-label": "Loading",
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-center space-x-3 backdrop-blur-sm rounded-lg px-6 py-4 shadow-lg", role: "status", "aria-live": "assertive", "aria-busy": true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Activity, { className: "w-6 h-6 animate-spin text-primary-background", "aria-hidden": true }),
-        state.text && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-base font-medium text-foreground", children: state.text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-center space-x-3 backdrop-blur-sm rounded-lg px-6 py-4 shadow-lg", role: "status", "aria-live": "assertive", "aria-busy": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Activity, { className: "w-6 h-6 animate-spin text-primary-background", "aria-hidden": true }),
+        state.text && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-base font-medium text-foreground", children: state.text })
       ] })
     }
   );
@@ -3243,14 +3304,14 @@ var PageLoading = ({
 }) => {
   const t = (0, import_next_intl3.useTranslations)("Loading");
   const defaultMessage = message || t("loadingPage");
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(
     "min-h-screen flex items-center justify-center bg-background",
     className
-  ), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Activity, { className: "w-8 h-8 animate-spin text-primary mx-auto" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-lg font-medium text-foreground", children: defaultMessage }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground mt-2", children: t("pleaseWait") })
+  ), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Activity, { className: "w-8 h-8 animate-spin text-primary mx-auto" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-lg font-medium text-foreground", children: defaultMessage }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-muted-foreground mt-2", children: t("pleaseWait") })
     ] })
   ] }) });
 };
@@ -3266,9 +3327,9 @@ var InlineLoading = ({
     md: "w-6 h-6",
     lg: "w-8 h-8"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("flex items-center justify-center space-x-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Activity, { className: cn("animate-spin text-primary", sizeClasses2[size]) }),
-    text && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm text-muted-foreground animate-pulse", children: text })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-center justify-center space-x-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Activity, { className: cn("animate-spin text-primary", sizeClasses2[size]) }),
+    text && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm text-muted-foreground animate-pulse", children: text })
   ] });
 };
 var ButtonLoading = ({
@@ -3278,11 +3339,11 @@ var ButtonLoading = ({
   disabled,
   loadingText
 }) => {
-  const child = import_react8.default.isValidElement(children) ? import_react8.default.cloneElement(children, {
+  const child = import_react9.default.isValidElement(children) ? import_react9.default.cloneElement(children, {
     disabled: (children.props?.disabled ?? false) || disabled || isLoading,
     "aria-busy": isLoading || void 0
   }) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: cn(
@@ -3291,11 +3352,11 @@ var ButtonLoading = ({
         className
       ),
       children: [
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Activity, { className: "w-4 h-4 animate-spin text-primary-foreground" }),
-          loadingText && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ml-2 text-sm", children: loadingText })
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Activity, { className: "w-4 h-4 animate-spin text-primary-foreground" }),
+          loadingText && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ml-2 text-sm", children: loadingText })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn(isLoading && "opacity-50 pointer-events-none"), children: child })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(isLoading && "opacity-50 pointer-events-none"), children: child })
       ]
     }
   );
@@ -3305,7 +3366,7 @@ var ButtonLoading = ({
 var React15 = __toESM(require("react"), 1);
 var import_link = __toESM(require("next/link"), 1);
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var sizeStyles5 = {
   sm: {
     text: "text-xs",
@@ -3352,16 +3413,16 @@ var Breadcrumb = ({
   }, [items.length, maxItems, collapsible]);
   const getSeparator = () => {
     if (typeof separator === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-muted-foreground", children: separator });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: separator });
     }
     if (variant === "slash") {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-muted-foreground", children: "/" });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: "/" });
     }
     if (variant === "arrow") {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-muted-foreground", children: "\u2192" });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: "\u2192" });
     }
     const SeparatorComponent = separator;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SeparatorComponent, { className: cn("text-muted-foreground", sizeStyles5[size].icon) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SeparatorComponent, { className: cn("text-muted-foreground", sizeStyles5[size].icon) });
   };
   const processedItems = React15.useMemo(() => {
     let finalItems = [...items];
@@ -3382,17 +3443,17 @@ var Breadcrumb = ({
   const handleCollapseToggle = () => {
     setIsCollapsed(!isCollapsed);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "nav",
     {
       className: cn("flex w-full items-center", sizeStyles5[size].text, className),
       "aria-label": "Breadcrumb navigation",
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ol", { className: cn("flex items-center", sizeStyles5[size].spacing), children: processedItems.map((item, index) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ol", { className: cn("flex items-center", sizeStyles5[size].spacing), children: processedItems.map((item, index) => {
         const isLast = index === processedItems.length - 1;
         const isCollapsedIndicator = item.label === "...";
         const Icon = item.icon;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "flex items-center", children: [
-          isCollapsedIndicator ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: "flex items-center", children: [
+          isCollapsedIndicator ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               onClick: handleCollapseToggle,
@@ -3403,9 +3464,9 @@ var Breadcrumb = ({
                 "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
               ),
               "aria-label": "Show all breadcrumb items",
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.MoreHorizontal, { className: sizeStyles5[size].icon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.MoreHorizontal, { className: sizeStyles5[size].icon })
             }
-          ) : item.href && !isLast && !item.disabled ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          ) : item.href && !isLast && !item.disabled ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             import_link.default,
             {
               href: item.href,
@@ -3416,11 +3477,11 @@ var Breadcrumb = ({
                 "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm"
               ),
               children: [
-                Icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: sizeStyles5[size].icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: item.label })
+                Icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { className: sizeStyles5[size].icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.label })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "span",
             {
               className: cn(
@@ -3430,12 +3491,12 @@ var Breadcrumb = ({
               ),
               "aria-current": isLast ? "page" : void 0,
               children: [
-                Icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: sizeStyles5[size].icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: item.label })
+                Icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { className: sizeStyles5[size].icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.label })
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "span",
             {
               className: cn("mx-1", sizeStyles5[size].spacing),
@@ -3453,7 +3514,7 @@ var Breadcrumb_default = Breadcrumb;
 
 // ../../components/ui/Tab.tsx
 var React16 = __toESM(require("react"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var sizeStyles6 = {
   sm: {
     tab: "py-1.5 px-3 text-xs",
@@ -3541,14 +3602,14 @@ var Tabs = ({
     className
   );
   const activeTab = tabs.find((tab) => tab.value === active);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("w-full", orientation === "vertical" && "flex gap-6"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: containerClasses, role: "tablist", "aria-orientation": orientation, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("w-full", orientation === "vertical" && "flex gap-6"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: containerClasses, role: "tablist", "aria-orientation": orientation, children: [
       tabs.map((tab, index) => {
         const isActive = active === tab.value;
         const Icon = tab.icon;
         const tabId = `${baseId}-tab-${index}`;
         const panelId = `${baseId}-panel-${index}`;
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "button",
           {
             ref: (el) => {
@@ -3600,14 +3661,14 @@ var Tabs = ({
               }
             },
             children: [
-              Icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { className: "h-4 w-4" }),
+              Icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: "h-4 w-4" }),
               tab.label
             ]
           },
           tab.value
         );
       }),
-      variant === "underline" && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      variant === "underline" && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           className: "absolute bottom-0 h-0.5 bg-primary transition-all duration-300 ease-out",
@@ -3615,7 +3676,7 @@ var Tabs = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         role: "tabpanel",
@@ -3633,7 +3694,7 @@ var Tabs = ({
   ] });
 };
 var SimpleTabs = ({ tabs, defaultValue, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Tabs,
     {
       tabs,
@@ -3645,7 +3706,7 @@ var SimpleTabs = ({ tabs, defaultValue, className }) => {
   );
 };
 var PillTabs = ({ contained = true, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Tabs,
     {
       ...props,
@@ -3659,7 +3720,7 @@ var VerticalTabs = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn(sidebarWidth, "flex-shrink-0"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn(sidebarWidth, "flex-shrink-0"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Tabs,
     {
       ...props,
@@ -3671,9 +3732,9 @@ var VerticalTabs = ({
 };
 
 // ../../components/ui/DropdownMenu.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_react_dom5 = require("react-dom");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var DropdownMenu = ({
   trigger,
   children,
@@ -3686,16 +3747,16 @@ var DropdownMenu = ({
   onOpenChange,
   items
 }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react9.useState)(false);
-  const [position, setPosition] = (0, import_react9.useState)(null);
-  const triggerRef = import_react9.default.useRef(null);
-  const contentRef = import_react9.default.useRef(null);
-  const itemsRef = import_react9.default.useRef([]);
-  const [activeIndex, setActiveIndex] = (0, import_react9.useState)(-1);
+  const [internalOpen, setInternalOpen] = (0, import_react10.useState)(false);
+  const [position, setPosition] = (0, import_react10.useState)(null);
+  const triggerRef = import_react10.default.useRef(null);
+  const contentRef = import_react10.default.useRef(null);
+  const itemsRef = import_react10.default.useRef([]);
+  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(-1);
   useShadCNAnimations();
   const open = isOpen !== void 0 ? isOpen : internalOpen;
   const setOpen = onOpenChange || setInternalOpen;
-  import_react9.default.useEffect(() => {
+  import_react10.default.useEffect(() => {
     if (open && triggerRef.current && contentRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       const menuRect = contentRef.current.getBoundingClientRect();
@@ -3735,7 +3796,7 @@ var DropdownMenu = ({
     }
     if (open) setActiveIndex(-1);
   }, [open, placement]);
-  import_react9.default.useEffect(() => {
+  import_react10.default.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -3795,7 +3856,7 @@ var DropdownMenu = ({
       setOpen(false);
     }
   };
-  const dropdownContent = open ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const dropdownContent = open ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       "data-dropdown-menu": true,
@@ -3816,7 +3877,7 @@ var DropdownMenu = ({
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "div",
         {
           className: cn(
@@ -3826,7 +3887,7 @@ var DropdownMenu = ({
           ),
           children: items ? items.map((item, index) => {
             const IconComponent = item.icon;
-            return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "button",
               {
                 ref: (el) => {
@@ -3848,7 +3909,7 @@ var DropdownMenu = ({
                   item.destructive && "text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
                 ),
                 children: [
-                  IconComponent && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconComponent, { className: "h-4 w-4" }),
+                  IconComponent && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconComponent, { className: "h-4 w-4" }),
                   item.label
                 ]
               },
@@ -3859,8 +3920,8 @@ var DropdownMenu = ({
       )
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    import_react9.default.cloneElement(trigger, {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    import_react10.default.cloneElement(trigger, {
       ref: triggerRef,
       onClick: handleTriggerClick,
       "aria-expanded": open,
@@ -3875,7 +3936,7 @@ var DropdownMenu = ({
     dropdownContent && typeof window !== "undefined" && (0, import_react_dom5.createPortal)(dropdownContent, document.body)
   ] });
 };
-var DropdownMenuItem = ({ children, onClick, disabled, destructive, className }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var DropdownMenuItem = ({ children, onClick, disabled, destructive, className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "button",
   {
     onClick,
@@ -3891,22 +3952,22 @@ var DropdownMenuItem = ({ children, onClick, disabled, destructive, className })
     children
   }
 );
-var DropdownMenuSeparator = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("h-px bg-border my-1", className) });
-var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var DropdownMenuSeparator = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("h-px bg-border my-1", className) });
+var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   DropdownMenu,
   {
-    trigger: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    trigger: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "button",
       {
         className: cn(
-          "inline-flex items-center justify-between gap-2 px-3 py-2 text-sm rounded-md border bg-background",
+          "inline-flex items-center justify-between gap-2 px-3 py-2 text-sm rounded-md border bg-background border-border/60",
           "hover:bg-accent/50",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate max-w-[16rem] text-foreground/90", children: value || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "opacity-70", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate max-w-[16rem] text-foreground/90", children: value || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "opacity-70", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
         ]
       }
     ),
@@ -3924,10 +3985,10 @@ var import_lucide_react13 = require("lucide-react");
 
 // ../../components/ui/Combobox.tsx
 var React18 = __toESM(require("react"), 1);
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_dom6 = require("react-dom");
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var getOptionLabel = (option) => {
   return typeof option === "string" ? option : option.label;
 };
@@ -3960,7 +4021,7 @@ var Combobox = ({
   useShadCNAnimations();
   const listRef = React18.useRef([]);
   const inputRef = React18.useRef(null);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react11.useId)();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const enableSearch = options.length > 10;
@@ -4042,7 +4103,7 @@ var Combobox = ({
   }, [open, enableSearch]);
   const selectedOption = findOptionByValue(options, value);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
-  const dropdownContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const dropdownContent = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       "data-combobox-dropdown": true,
@@ -4061,10 +4122,10 @@ var Combobox = ({
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"), children: [
-        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"), children: [
+        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Search, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
             {
               ref: inputRef,
@@ -4103,11 +4164,11 @@ var Combobox = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "p-1 space-y-1", children: filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "p-1 space-y-1", children: filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
           const itemValue = getOptionValue(item);
           const itemLabel = getOptionLabel(item);
           const isSelected = itemValue === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "li",
             {
               ref: (node) => {
@@ -4131,15 +4192,15 @@ var Combobox = ({
                 isSelected && "bg-accent text-accent-foreground"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: itemLabel }),
-                isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Check, { className: "h-4 w-4 text-primary" })
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children: itemLabel }),
+                isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Check, { className: "h-4 w-4 text-primary" })
               ]
             },
             `${itemValue}-${index}`
           );
-        }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { className: "h-6 w-6 opacity-50" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: emptyText })
+        }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Search, { className: "h-6 w-6 opacity-50" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: emptyText })
         ] }) }) }) })
       ] })
     }
@@ -4153,8 +4214,8 @@ var Combobox = ({
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
   const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("w-full group", verticalGap), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("w-full group", verticalGap), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "label",
       {
         id: labelId,
@@ -4166,11 +4227,11 @@ var Combobox = ({
         ),
         children: [
           label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -4200,10 +4261,10 @@ var Combobox = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn("truncate", !displayValue && "text-muted-foreground", fontBold && "font-bold"), children: displayValue || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1 ml-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cn("truncate", !displayValue && "text-muted-foreground", fontBold && "font-bold"), children: displayValue || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1 ml-2", children: [
             allowClear && value && !disabled && // FIX: Use a div instead of a nested button
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "div",
               {
                 role: "button",
@@ -4212,10 +4273,10 @@ var Combobox = ({
                 onClick: handleClear,
                 onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleClear(e),
                 className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform duration-200", open && "rotate-180") })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform duration-200", open && "rotate-180") })
           ] })
         ]
       }
@@ -4226,7 +4287,7 @@ var Combobox = ({
 
 // ../../components/ui/Pagination.tsx
 var import_next_intl4 = require("next-intl");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Pagination = ({
   page,
   totalPages,
@@ -4309,13 +4370,13 @@ var Pagination = ({
     }
   };
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: cn("flex flex-col gap-4", className), "aria-label": labels?.navigationLabel || t("navigationLabel"), children: [
-    showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("text-sm text-muted-foreground", textAlignmentClass), children: labels?.showingResults ? labels.showingResults({ startItem: startItem || 0, endItem: endItem || 0, totalItems }) : t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex items-center justify-between", {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("nav", { className: cn("flex flex-col gap-4", className), "aria-label": labels?.navigationLabel || t("navigationLabel"), children: [
+    showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("text-sm text-muted-foreground", textAlignmentClass), children: labels?.showingResults ? labels.showingResults({ startItem: startItem || 0, endItem: endItem || 0, totalItems }) : t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("flex items-center justify-between", {
       "flex-row-reverse": alignment === "right" || alignment === "center"
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex items-center gap-1"), children: [
-        showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("flex items-center gap-1"), children: [
+        showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button_default,
           {
             variant: getButtonVariant(false),
@@ -4329,7 +4390,7 @@ var Pagination = ({
             "aria-disabled": disabled || page === 1
           }
         ),
-        showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button_default,
           {
             variant: getButtonVariant(false),
@@ -4340,16 +4401,16 @@ var Pagination = ({
             title: labels?.previousPage || t("previousPage"),
             "aria-label": labels?.previousPage || t("previousPage"),
             "aria-disabled": disabled || page === 1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
           }
         ),
         showPageNumbers && createPageArray().map((p, i) => {
           if (p === "...") {
-            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button_default, { variant: "ghost", size, disabled: true, icon: import_lucide_react13.MoreHorizontal, className: "cursor-default" }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button_default, { variant: "ghost", size, disabled: true, icon: import_lucide_react13.MoreHorizontal, className: "cursor-default" }, i);
           }
           const pageNumber = p;
           const isActive = page === pageNumber;
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             Button_default,
             {
               variant: getButtonVariant(isActive),
@@ -4364,7 +4425,7 @@ var Pagination = ({
             i
           );
         }),
-        showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button_default,
           {
             variant: getButtonVariant(false),
@@ -4375,10 +4436,10 @@ var Pagination = ({
             title: labels?.nextPage || t("nextPage"),
             "aria-label": labels?.nextPage || t("nextPage"),
             "aria-disabled": disabled || page === totalPages,
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
           }
         ),
-        showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button_default,
           {
             variant: getButtonVariant(false),
@@ -4393,12 +4454,12 @@ var Pagination = ({
           }
         )
       ] }),
-      pageSizeOptions && onPageSizeChange && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex items-center gap-2 text-sm"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "text-muted-foreground", children: [
+      pageSizeOptions && onPageSizeChange && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("flex items-center gap-2 text-sm"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "text-muted-foreground", children: [
           labels?.itemsPerPage || t("itemsPerPage"),
           ":"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Combobox,
           {
             options: pageSizeOptionsStrings,
@@ -4427,8 +4488,8 @@ var SimplePagination = ({
   pageSize = 10
 }) => {
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex flex-col gap-2", className), children: [
-    showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "text-sm text-muted-foreground text-center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("flex flex-col gap-2", className), children: [
+    showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "text-sm text-muted-foreground text-center", children: [
       "Page ",
       page,
       " of ",
@@ -4437,15 +4498,15 @@ var SimplePagination = ({
       totalItems,
       " total items)"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button_default, { variant, size, icon: import_lucide_react13.ChevronLeft, onClick: () => onChange(Math.max(1, page - 1)), disabled: disabled || page === 1, children: "Previous" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Page" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-medium text-foreground", children: page }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "of" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-medium text-foreground", children: totalPages })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button_default, { variant, size, icon: import_lucide_react13.ChevronLeft, onClick: () => onChange(Math.max(1, page - 1)), disabled: disabled || page === 1, children: "Previous" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Page" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-medium text-foreground", children: page }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "of" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-medium text-foreground", children: totalPages })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         Button_default,
         {
           variant,
@@ -4468,8 +4529,8 @@ var CompactPagination = ({
   disabled = false
 }) => {
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: cn("flex items-center gap-1", className), "aria-label": "Compact Pagination", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("nav", { className: cn("flex items-center gap-1", className), "aria-label": "Compact Pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Button_default,
       {
         variant,
@@ -4481,7 +4542,7 @@ var CompactPagination = ({
         "aria-label": "First page"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Button_default,
       {
         variant,
@@ -4492,12 +4553,12 @@ var CompactPagination = ({
         title: "Previous page"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-2 py-1 text-sm text-muted-foreground min-w-[4rem] text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "px-2 py-1 text-sm text-muted-foreground min-w-[4rem] text-center", children: [
       page,
       " / ",
       totalPages
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Button_default,
       {
         variant,
@@ -4508,7 +4569,7 @@ var CompactPagination = ({
         title: "Next page"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Button_default,
       {
         variant,
@@ -4523,15 +4584,16 @@ var CompactPagination = ({
 };
 
 // ../../components/ui/Section.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Section = import_react11.default.forwardRef(
+var import_react12 = __toESM(require("react"), 1);
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Section = import_react12.default.forwardRef(
   ({
     children,
     className,
     variant = "default",
     spacing = "lg",
     fullWidth = false,
+    outlined = false,
     ...props
   }, ref) => {
     const variantClasses = {
@@ -4546,13 +4608,14 @@ var Section = import_react11.default.forwardRef(
       lg: "py-12",
       xl: "py-16"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "section",
       {
         ref,
         className: cn(
           variantClasses[variant],
           spacingClasses[spacing],
+          outlined && "rounded-lg border border-border/60",
           !fullWidth && "container mx-auto px-4 md:px-6",
           className
         ),
@@ -4566,16 +4629,16 @@ Section.displayName = "Section";
 var Section_default = Section;
 
 // ../../components/ui/ScrollArea.tsx
-var import_react12 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var ScrollArea = (0, import_react12.forwardRef)(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className: cn("relative overflow-hidden bg-background", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport"), children }) });
+var import_react13 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var ScrollArea = (0, import_react13.forwardRef)(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: cn("relative overflow-hidden bg-background", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport"), children }) });
 });
 ScrollArea.displayName = "ScrollArea";
 
 // ../../components/ui/DatePicker.tsx
 var React21 = __toESM(require("react"), 1);
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_dom7 = require("react-dom");
 var import_lucide_react14 = require("lucide-react");
 var import_next_intl5 = require("next-intl");
@@ -4760,7 +4823,7 @@ function formatDateWithDay(date) {
 }
 
 // ../../components/ui/DatePicker.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var DatePicker = ({
   id,
   value,
@@ -4871,7 +4934,7 @@ var DatePicker = ({
     const firstDayOfMonth = getFirstDayOfMonth(viewDate);
     const days = [];
     for (let i = 0; i < firstDayOfMonth; i++) {
-      days.push(/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-8 h-8" }, `empty-${i}`));
+      days.push(/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-8 h-8" }, `empty-${i}`));
     }
     for (let day = 1; day <= daysInMonth; day++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
@@ -4880,7 +4943,7 @@ var DatePicker = ({
       const totalDaysFromStart = firstDayOfMonth + day - 1;
       const rowIndex = Math.floor(totalDaysFromStart / 7);
       days.push(
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "button",
           {
             onClick: () => handleDateSelect(date),
@@ -4903,7 +4966,7 @@ var DatePicker = ({
     }
     return days;
   };
-  const datePickerContent = isOpen && dropdownPosition ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const datePickerContent = isOpen && dropdownPosition ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       "data-datepicker": true,
@@ -4921,7 +4984,7 @@ var DatePicker = ({
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "div",
         {
           ref: dropdownRef,
@@ -4932,14 +4995,14 @@ var DatePicker = ({
           ),
           style: { pointerEvents: "auto" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               Button_default,
               {
                 variant: "outline",
@@ -4957,14 +5020,14 @@ var DatePicker = ({
       )
     }
   ) : null;
-  const autoId = (0, import_react13.useId)();
+  const autoId = (0, import_react14.useId)();
   const resolvedId = id ? String(id) : `datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : "text-sm";
   const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("w-full group", verticalGap), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("w-full group", verticalGap), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "label",
       {
         id: labelId,
@@ -4976,11 +5039,11 @@ var DatePicker = ({
         ),
         children: [
           label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -5008,8 +5071,8 @@ var DatePicker = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? formatDateDisplay(value) : placeholder || t("placeholder") }),
-          value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? formatDateDisplay(value) : placeholder || t("placeholder") }),
+          value && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "span",
             {
               role: "button",
@@ -5031,10 +5094,10 @@ var DatePicker = ({
               },
               className: "absolute right-8 inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer",
               style: { width: 20, height: 20 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.X, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.X, { className: "h-3.5 w-3.5" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
         ]
       }
     ),
@@ -5119,7 +5182,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     const nodes = [];
     const daysInMonth = getDaysInMonth(viewDate);
     const firstDay = getFirstDayOfMonth(viewDate);
-    for (let i = 0; i < firstDay; i++) nodes.push(/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-8 h-8" }, `e-${i}`));
+    for (let i = 0; i < firstDay; i++) nodes.push(/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-8 h-8" }, `e-${i}`));
     for (let d = 1; d <= daysInMonth; d++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
       const isSelectedStart = isSameDay(date, tempStart);
@@ -5144,7 +5207,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         }
       }
       nodes.push(
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "button",
           {
             onClick: () => handleSelect(date),
@@ -5174,7 +5237,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     }
     return nodes;
   };
-  const panel = isOpen && dropdownPosition ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const panel = isOpen && dropdownPosition ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width || 256, zIndex: 9999 },
@@ -5184,37 +5247,37 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "div",
         {
           ref: panelRef,
           className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60 p-4 w-64"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
                   size: "sm",
                   onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)),
                   className: "p-1 h-auto",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
                   size: "sm",
                   onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)),
                   className: "p-1 h-auto",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-xs text-muted-foreground text-center py-1 font-medium", children: d }, d)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grid grid-cols-7", children: renderGrid() })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-xs text-muted-foreground text-center py-1 font-medium", children: d }, d)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7", children: renderGrid() })
           ]
         }
       )
@@ -5222,8 +5285,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
   ) : null;
   const displayFormat = (date) => formatDateShort(date);
   const label = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -5242,8 +5305,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cn("truncate", !tempStart && !tempEnd && "text-muted-foreground"), children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cn("truncate", !tempStart && !tempEnd && "text-muted-foreground"), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
         ]
       }
     ),
@@ -5253,10 +5316,10 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
 
 // ../../components/ui/MultiCombobox.tsx
 var React22 = __toESM(require("react"), 1);
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var MultiCombobox = ({
   id,
   options,
@@ -5394,12 +5457,12 @@ var MultiCombobox = ({
       tag: "px-2.5 py-1 text-sm"
     }
   };
-  const autoId = (0, import_react14.useId)();
+  const autoId = (0, import_react15.useId)();
   const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("w-full space-y-2 group", className), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("w-full space-y-2 group", className), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "label",
       {
         className: cn(
@@ -5409,11 +5472,11 @@ var MultiCombobox = ({
         ),
         children: [
           title,
-          required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "label",
       {
         id: labelId,
@@ -5425,12 +5488,12 @@ var MultiCombobox = ({
         ),
         children: [
           label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative w-full" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative w-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -5453,11 +5516,11 @@ var MultiCombobox = ({
           "disabled:cursor-not-allowed disabled:opacity-50"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
             const option = normalizedOptions.find((o) => o.value === itemValue);
-            return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "span",
                 {
                   role: "button",
@@ -5480,16 +5543,16 @@ var MultiCombobox = ({
                 }
               )
             ] }, itemValue);
-          }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "truncate text-sm", children: [
+          }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "truncate text-sm", children: [
             value.length,
             " selected"
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.ChevronDown, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.ChevronDown, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
         ]
       }
     ),
     open && dropdownPosition && typeof window !== "undefined" ? (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
           "data-dropdown": "multicombobox",
@@ -5506,7 +5569,7 @@ var MultiCombobox = ({
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             "div",
             {
               className: cn(
@@ -5514,7 +5577,7 @@ var MultiCombobox = ({
                 "backdrop-blur-sm bg-popover/95 border-border/60"
               ),
               children: [
-                showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5527,9 +5590,9 @@ var MultiCombobox = ({
                     children: "Clear all"
                   }
                 ) }),
-                enableSearch && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative border-b border-border/60", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Search, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                enableSearch && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative border-b border-border/60", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Search, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "input",
                     {
                       ref: inputRef,
@@ -5544,10 +5607,10 @@ var MultiCombobox = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
                   const isSelected = value.includes(item.value);
                   const isDisabled = disabledOptions.includes(item.value);
-                  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                     "li",
                     {
                       ref: (node) => {
@@ -5571,12 +5634,12 @@ var MultiCombobox = ({
                       ),
                       children: [
                         item.label,
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Check, { className: sizeStyles8[size].icon })
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Check, { className: sizeStyles8[size].icon })
                       ]
                     },
                     item.value
                   );
-                }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
+                }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
               ]
             }
           )
@@ -5589,7 +5652,7 @@ var MultiCombobox = ({
 
 // ../../components/ui/RadioGroup.tsx
 var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var RadioGroupContext = React23.createContext(void 0);
 var useRadioGroup = () => {
   const context = React23.useContext(RadioGroupContext);
@@ -5627,7 +5690,7 @@ var RadioGroup = React23.forwardRef(
     };
     const uniqueId = React23.useId();
     const radioName = name || `radio-group-${uniqueId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RadioGroupContext.Provider,
       {
         value: {
@@ -5638,8 +5701,8 @@ var RadioGroup = React23.forwardRef(
           size,
           variant
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "div",
             {
               ref,
@@ -5656,7 +5719,7 @@ var RadioGroup = React23.forwardRef(
               children
             }
           ),
-          error && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-destructive mt-1", children: errorMessage })
+          error && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-destructive mt-1", children: errorMessage })
         ] })
       }
     );
@@ -5698,7 +5761,7 @@ var RadioGroupItem = React23.forwardRef(
     const Icon = icon;
     const radioId = id || `radio-${value}`;
     if (variant === "card") {
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "div",
         {
           className: cn(
@@ -5710,8 +5773,8 @@ var RadioGroupItem = React23.forwardRef(
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-start gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "button",
                 {
                   ref,
@@ -5730,22 +5793,22 @@ var RadioGroupItem = React23.forwardRef(
                     sizeStyles7[size].radio
                   ),
                   onClick: () => onValueChange?.(value),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     "span",
                     {
                       className: cn(
                         "flex items-center justify-center w-full h-full rounded-full transition-all duration-200",
                         isSelected && "bg-primary"
                       ),
-                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
+                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  Icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { className: "h-4 w-4 text-foreground" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "h-4 w-4 text-foreground" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     "label",
                     {
                       htmlFor: radioId,
@@ -5757,10 +5820,10 @@ var RadioGroupItem = React23.forwardRef(
                     }
                   )
                 ] }),
-                description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
+                description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "input",
               {
                 type: "radio",
@@ -5778,7 +5841,7 @@ var RadioGroupItem = React23.forwardRef(
       );
     }
     if (variant === "button") {
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "button",
         {
           ref,
@@ -5800,9 +5863,9 @@ var RadioGroupItem = React23.forwardRef(
           ),
           onClick: () => onValueChange?.(value),
           children: [
-            Icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { className: "h-4 w-4" }),
+            Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "h-4 w-4" }),
             label || children,
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "input",
               {
                 type: "radio",
@@ -5819,8 +5882,8 @@ var RadioGroupItem = React23.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           ref,
@@ -5839,19 +5902,19 @@ var RadioGroupItem = React23.forwardRef(
             sizeStyles7[size].radio
           ),
           onClick: () => onValueChange?.(value),
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "span",
             {
               className: cn(
                 "flex items-center justify-center w-full h-full rounded-full transition-all duration-200",
                 isSelected && "bg-primary"
               ),
-              children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
+              children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
             }
           )
         }
       ),
-      (label || children) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      (label || children) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "label",
         {
           htmlFor: radioId,
@@ -5862,15 +5925,15 @@ var RadioGroupItem = React23.forwardRef(
             isDisabled && "cursor-not-allowed opacity-50"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
-              Icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: label || children })
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
+              Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label || children })
             ] }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-muted-foreground mt-0.5 text-xs", children: description })
+            description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-muted-foreground mt-0.5 text-xs", children: description })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "input",
         {
           type: "radio",
@@ -5890,7 +5953,7 @@ RadioGroupItem.displayName = "RadioGroupItem";
 
 // ../../components/ui/Slider.tsx
 var React24 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var SIZE_STYLES = {
   sm: {
     track: "h-1",
@@ -5950,20 +6013,20 @@ var Slider = React24.forwardRef(
     const displayValue = formatValue ? formatValue(currentValue) : currentValue.toString();
     if (orientation === "vertical") {
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full space-y-2", containerClassName), children: [
-      (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-[2rem] text-right", valueClassName), children: displayValue })
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-full space-y-2", containerClassName), children: [
+      (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-[2rem] text-right", valueClassName), children: displayValue })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "div",
           {
             className: "absolute left-0 top-0 h-full bg-primary rounded-full transition-all duration-150 ease-out",
             style: { width: `${percentage}%` }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "input",
           {
             ref,
@@ -6028,8 +6091,8 @@ Slider.displayName = "Slider";
 
 // ../../components/ui/OverlayControls.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_react15 = __toESM(require("react"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react16 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function OverlayControls({
   mode,
   value,
@@ -6059,24 +6122,24 @@ function OverlayControls({
 }) {
   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] = import_react15.default.useState(false);
-  const rateWrapRef = import_react15.default.useRef(null);
-  const [controlsVisible, setControlsVisible] = import_react15.default.useState(true);
-  const hideTimerRef = import_react15.default.useRef(null);
-  const [previewData, setPreviewData] = import_react15.default.useState(null);
-  const sliderRef = import_react15.default.useRef(null);
-  const [isDragging, setIsDragging] = import_react15.default.useState(false);
-  const [dragValue, setDragValue] = import_react15.default.useState(value);
-  import_react15.default.useEffect(() => {
+  const [rateOpen, setRateOpen] = import_react16.default.useState(false);
+  const rateWrapRef = import_react16.default.useRef(null);
+  const [controlsVisible, setControlsVisible] = import_react16.default.useState(true);
+  const hideTimerRef = import_react16.default.useRef(null);
+  const [previewData, setPreviewData] = import_react16.default.useState(null);
+  const sliderRef = import_react16.default.useRef(null);
+  const [isDragging, setIsDragging] = import_react16.default.useState(false);
+  const [dragValue, setDragValue] = import_react16.default.useState(value);
+  import_react16.default.useEffect(() => {
     if (!isDragging) {
       setDragValue(value);
     }
   }, [value, isDragging]);
-  const [keyboardFeedback, setKeyboardFeedback] = import_react15.default.useState(null);
-  const feedbackTimerRef = import_react15.default.useRef(null);
-  const seekAccumulatorRef = import_react15.default.useRef(0);
-  const seekAccumulatorTimerRef = import_react15.default.useRef(null);
-  import_react15.default.useEffect(() => {
+  const [keyboardFeedback, setKeyboardFeedback] = import_react16.default.useState(null);
+  const feedbackTimerRef = import_react16.default.useRef(null);
+  const seekAccumulatorRef = import_react16.default.useRef(0);
+  const seekAccumulatorTimerRef = import_react16.default.useRef(null);
+  import_react16.default.useEffect(() => {
     const onDocDown = (e) => {
       if (!rateOpen) return;
       const wrap = rateWrapRef.current;
@@ -6087,7 +6150,7 @@ function OverlayControls({
     document.addEventListener("mousedown", onDocDown);
     return () => document.removeEventListener("mousedown", onDocDown);
   }, [rateOpen]);
-  import_react15.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     if (!autoHide || showOnHover) return;
     const resetTimer = () => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
@@ -6125,7 +6188,7 @@ function OverlayControls({
       seekAccumulatorRef.current = 0;
     }, 1e3);
   };
-  import_react15.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     if (!enableKeyboardShortcuts) return;
     const handleKeyDown = (e) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
@@ -6182,8 +6245,10 @@ function OverlayControls({
           break;
         case "f":
         case "F":
-          e.preventDefault();
-          onToggleFullscreen?.();
+          if (!e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            onToggleFullscreen?.();
+          }
           break;
         case "m":
         case "M":
@@ -6250,41 +6315,41 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    keyboardFeedback && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    keyboardFeedback && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         className: cn(
           "absolute inset-0 flex items-center pointer-events-none z-50",
           keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) > 0 ? "justify-end pr-32" : keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) < 0 ? "justify-start pl-32" : "justify-center"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "bg-black/50 backdrop-blur-sm rounded-xl px-6 py-4 shadow-xl border border-white/10 animate-in fade-in zoom-in duration-200", children: [
-          keyboardFeedback.type === "play" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Play, { className: "w-16 h-16 text-white", fill: "white" }),
-          keyboardFeedback.type === "pause" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Pause, { className: "w-16 h-16 text-white", fill: "white" }),
-          keyboardFeedback.type === "seek" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-3", children: [
-            (keyboardFeedback.value ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.RotateCw, { className: "w-12 h-12 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.RotateCcw, { className: "w-12 h-12 text-white" }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-3xl font-bold text-white", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "bg-black/50 backdrop-blur-sm rounded-xl px-6 py-4 shadow-xl border border-white/10 animate-in fade-in zoom-in duration-200", children: [
+          keyboardFeedback.type === "play" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Play, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "pause" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Pause, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "seek" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-3", children: [
+            (keyboardFeedback.value ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.RotateCw, { className: "w-12 h-12 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.RotateCcw, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-3xl font-bold text-white", children: [
               keyboardFeedback.value && keyboardFeedback.value > 0 ? "+" : "",
               keyboardFeedback.value,
               "s"
             ] })
           ] }),
-          keyboardFeedback.type === "volume" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Volume2, { className: "w-12 h-12 text-white" }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-2xl font-bold text-white", children: [
+          keyboardFeedback.type === "volume" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Volume2, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-2xl font-bold text-white", children: [
                 keyboardFeedback.value,
                 "%"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-32 h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-full bg-white rounded-full transition-all", style: { width: `${keyboardFeedback.value}%` } }) })
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-32 h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-full bg-white rounded-full transition-all", style: { width: `${keyboardFeedback.value}%` } }) })
             ] })
           ] }),
-          keyboardFeedback.type === "mute" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.VolumeX, { className: "w-16 h-16 text-white" }),
-          keyboardFeedback.type === "unmute" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Volume2, { className: "w-16 h-16 text-white" })
+          keyboardFeedback.type === "mute" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.VolumeX, { className: "w-16 h-16 text-white" }),
+          keyboardFeedback.type === "unmute" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Volume2, { className: "w-16 h-16 text-white" })
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         className: cn(
@@ -6293,9 +6358,9 @@ function OverlayControls({
           autoHide && !controlsVisible && "opacity-0 pointer-events-none",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "px-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref: sliderRef, onMouseMove: handleSliderMouseMove, onMouseLeave: handleSliderMouseLeave, className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ref: sliderRef, onMouseMove: handleSliderMouseMove, onMouseLeave: handleSliderMouseLeave, className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Slider,
               {
                 min: 0,
@@ -6320,14 +6385,14 @@ function OverlayControls({
                 noFocus: true
               }
             ),
-            previewData && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime2(previewData.time) })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs font-mono text-center", children: formatTime2(previewData.time) }) }) })
+            previewData && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime2(previewData.time) })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-xs font-mono text-center", children: formatTime2(previewData.time) }) }) })
           ] }),
-          showControlsBar && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          showControlsBar && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6335,10 +6400,10 @@ function OverlayControls({
                   onClick: onTogglePlay,
                   title: playing ? "T\u1EA1m d\u1EEBng" : "Ph\xE1t",
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: playing ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Play, { className: "w-4 h-4" })
+                  children: playing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Play, { className: "w-4 h-4" })
                 }
               ),
-              onSkip && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              onSkip && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6346,10 +6411,10 @@ function OverlayControls({
                   onClick: () => onSkip(-skipSeconds),
                   title: `L\xF9i ${skipSeconds}s`,
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.RotateCcw, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.RotateCcw, { className: "w-4 h-4" })
                 }
               ),
-              onSkip && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              onSkip && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6357,16 +6422,16 @@ function OverlayControls({
                   onClick: () => onSkip(skipSeconds),
                   title: `Tua ${skipSeconds}s`,
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.RotateCw, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.RotateCw, { className: "w-4 h-4" })
                 }
               ),
-              (showTime ?? true) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "px-3 py-1 rounded-full text-xs font-mono bg-background/60 text-foreground shadow-sm border border-border whitespace-nowrap", children: [
+              (showTime ?? true) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "px-3 py-1 rounded-full text-xs font-mono bg-background/60 text-foreground shadow-sm border border-border whitespace-nowrap", children: [
                 formatTime2(dragValue),
                 " / ",
                 formatTime2(max)
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -6374,10 +6439,10 @@ function OverlayControls({
                     onClick: onToggleMute,
                     title: muted ? "B\u1EADt ti\u1EBFng" : "T\u1EAFt ti\u1EBFng",
                     className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                    children: muted || (volume ?? 1) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.VolumeX, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Volume2, { className: "w-4 h-4" })
+                    children: muted || (volume ?? 1) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.VolumeX, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Volume2, { className: "w-4 h-4" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-24", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-24", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   Slider,
                   {
                     min: 0,
@@ -6392,8 +6457,8 @@ function OverlayControls({
                 ) })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 relative", children: [
-              onGoLive && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 relative", children: [
+              onGoLive && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6402,13 +6467,13 @@ function OverlayControls({
                   title: "Tr\u1EF1c ti\u1EBFp (v\u1EC1 Live)",
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Dot, { className: "w-10 h-10 text-destructive" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Dot, { className: "w-10 h-10 text-destructive" }),
                     "Tr\u1EF1c ti\u1EBFp"
                   ]
                 }
               ),
-              onChangeRate && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", ref: rateWrapRef, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              onChangeRate && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative", ref: rateWrapRef, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -6422,7 +6487,7 @@ function OverlayControls({
                     ]
                   }
                 ),
-                rateOpen && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                rateOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                   "button",
                   {
                     onClick: () => {
@@ -6438,7 +6503,7 @@ function OverlayControls({
                   r
                 )) })
               ] }),
-              onToggleFullscreen && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              onToggleFullscreen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -6446,7 +6511,7 @@ function OverlayControls({
                   onClick: onToggleFullscreen,
                   title: "To\xE0n m\xE0n h\xECnh",
                   className: "px-3 bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Maximize2, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Maximize2, { className: "w-4 h-4" })
                 }
               )
             ] })
@@ -6458,12 +6523,12 @@ function OverlayControls({
 }
 
 // ../../components/ui/CategoryTreeSelect.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1ECDn danh m\u1EE5c", disabled }) {
-  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
-  const [expandedNodes, setExpandedNodes] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const [expandedNodes, setExpandedNodes] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
   const parentCategories = categories.filter((c) => !c.parent_id);
   const childrenMap = /* @__PURE__ */ new Map();
   categories.forEach((cat) => {
@@ -6502,18 +6567,26 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
     const hasChildren = children.length > 0;
     const isExpanded = expandedNodes.has(category.id);
     const isSelected = value.includes(category.id);
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
           className: cn(
-            "flex items-center gap-2 px-3 py-2 cursor-pointer rounded-md transition-colors",
+            "relative flex items-center gap-2 px-3 py-2 cursor-pointer rounded-md transition-colors",
             "hover:bg-accent",
-            isSelected && "bg-primary/10 border-l-2 border-primary"
+            // Selected state: subtle bg + square left indicator, avoid left rounding
+            isSelected && "bg-primary/10 rounded-r-md"
           ),
           style: { paddingLeft: `${level * 1.5 + 0.75}rem` },
           children: [
-            hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "absolute left-0 top-0 bottom-0 w-1 bg-primary"
+              }
+            ),
+            hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "button",
               {
                 type: "button",
@@ -6522,130 +6595,76 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
                   toggleExpand(category.id);
                 },
                 className: "p-0.5 hover:bg-accent rounded",
-                children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" })
+                children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "w-5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "w-5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
               "div",
               {
                 onClick: () => handleSelect(category.id, category),
                 className: "flex items-center gap-2 flex-1",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "div",
                     {
                       className: cn(
                         "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
                         isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
                       ),
-                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Check, { className: "w-3 h-3 text-primary-foreground" })
+                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Check, { className: "w-3 h-3 text-primary-foreground" })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
                 ]
               }
             )
           ]
         }
       ),
-      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: children.map((child) => renderCategory(child, level + 1)) })
+      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
   const selectedCount = value.length;
   const displayText = selectedCount > 0 ? `\u0110\xE3 ch\u1ECDn ${selectedCount} danh m\u1EE5c` : placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
         type: "button",
         onClick: () => !disabled && setIsOpen(!isOpen),
         disabled,
         className: cn(
-          "w-full flex items-center justify-between px-3 py-2 border rounded-md bg-background",
-          "hover:border-primary transition-colors",
+          // Match Combobox trigger outline + focus styles
+          "flex w-full items-center justify-between px-3 bg-background border border-input",
+          "rounded-md h-10 py-2 text-sm",
+          "hover:bg-accent/5 transition-colors hover:border-primary/40 focus:border-primary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           disabled && "opacity-50 cursor-not-allowed",
-          isOpen && "border-primary ring-1 ring-primary"
+          isOpen && "border-primary"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.ChevronDown, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.ChevronDown, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
         ]
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute z-20 mt-1 w-full max-h-80 overflow-auto bg-background border rounded-md shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) }) })
+    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "div",
+        {
+          className: cn(
+            "absolute z-20 mt-1 w-full max-h-80 overflow-auto",
+            "rounded-md border bg-popover text-popover-foreground shadow-md",
+            "backdrop-blur-sm bg-popover/95 border-border/60"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) })
+        }
+      )
     ] })
   ] });
 }
 
-// ../../components/ui/SmartImage.tsx
-var import_image = __toESM(require("next/image"), 1);
-var import_react17 = __toESM(require("react"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var DEFAULT_FALLBACK = "/images/products/hoa-hong-do.png";
-function SmartImage({
-  src,
-  alt,
-  className,
-  ratioClass,
-  roundedClass = "rounded-lg",
-  fill = true,
-  width,
-  height,
-  sizes = "(max-width: 768px) 100vw, 33vw",
-  priority = false,
-  quality = 80,
-  fit = "cover",
-  fallbackSrc = DEFAULT_FALLBACK
-}) {
-  const normalize = (input) => {
-    if (!input || input.length === 0) return fallbackSrc;
-    if (input.startsWith("/images/products/") && /\.(jpg|jpeg)($|\?)/i.test(input)) {
-      return input.replace(/\.(jpg|jpeg)(?=$|\?)/i, ".png");
-    }
-    return input;
-  };
-  const [resolvedSrc, setResolvedSrc] = import_react17.default.useState(() => normalize(src));
-  const handleError = () => {
-    if (resolvedSrc.endsWith(".jpg")) {
-      setResolvedSrc(resolvedSrc.replace(/\.jpg($|\?)/, ".png$1"));
-    } else if (resolvedSrc !== fallbackSrc) {
-      setResolvedSrc(fallbackSrc);
-    }
-  };
-  const Wrapper = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("relative overflow-hidden bg-muted/30", ratioClass, roundedClass, className), children });
-  if (fill) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_image.default,
-      {
-        src: resolvedSrc,
-        alt,
-        fill: true,
-        sizes,
-        onError: handleError,
-        priority,
-        quality,
-        style: { objectFit: fit }
-      }
-    ) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("relative overflow-hidden bg-muted/30", roundedClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_image.default,
-    {
-      src: resolvedSrc,
-      alt,
-      width,
-      height,
-      sizes,
-      onError: handleError,
-      priority,
-      quality,
-      style: { objectFit: fit, width: "100%", height: "100%" }
-    }
-  ) });
-}
-
 // ../../components/ui/ImageUpload.tsx
 var import_react18 = require("react");
 var import_lucide_react18 = require("lucide-react");
@@ -6875,20 +6894,20 @@ function ImageUpload({
 }
 
 // ../../components/ui/Carousel.tsx
-var React28 = __toESM(require("react"), 1);
+var React27 = __toESM(require("react"), 1);
 var import_lucide_react19 = require("lucide-react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
-  const [currentIndex, setCurrentIndex] = React28.useState(0);
-  const totalSlides = React28.Children.count(children);
-  const [isPaused, setIsPaused] = React28.useState(false);
-  const scrollPrev = React28.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React27.useState(0);
+  const totalSlides = React27.Children.count(children);
+  const [isPaused, setIsPaused] = React27.useState(false);
+  const scrollPrev = React27.useCallback(() => {
     setCurrentIndex((prev) => prev > 0 ? prev - 1 : totalSlides - 1);
   }, [totalSlides]);
-  const scrollNext = React28.useCallback(() => {
+  const scrollNext = React27.useCallback(() => {
     setCurrentIndex((prev) => prev < totalSlides - 1 ? prev + 1 : 0);
   }, [totalSlides]);
-  React28.useEffect(() => {
+  React27.useEffect(() => {
     if (!autoScroll || isPaused || totalSlides <= 1) return;
     const interval = setInterval(() => {
       scrollNext();
@@ -6896,7 +6915,7 @@ function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
     return () => clearInterval(interval);
   }, [autoScroll, isPaused, totalSlides, autoScrollInterval, scrollNext]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative w-full overflow-hidden", onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: React28.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-shrink-0 w-full h-full", children: child }, idx)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: React27.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-shrink-0 w-full h-full", children: child }, idx)) }),
     totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Button_default,
@@ -7171,6 +7190,7 @@ function DataTable({
   enableDensityToggle = true,
   striped = true,
   // Mặc định bật màu nền sẽn kẽ cho các dòng
+  columnDividers = false,
   className,
   labels
 }) {
@@ -7252,11 +7272,15 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     TableHead,
     {
       style: { width: col.width },
-      className: cn(col.align === "right" && "text-right", col.align === "center" && "text-center"),
+      className: cn(
+        col.align === "right" && "text-right",
+        col.align === "center" && "text-center",
+        columnDividers && colIdx > 0 && "border-l border-border/60"
+      ),
       children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
@@ -7406,10 +7430,10 @@ function DataTable({
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("relative rounded-lg border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       Table,
       {
-        containerClassName: "border-0 rounded-none shadow-none",
+        containerClassName: "border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent",
         className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-[5] [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableHeader, { children: renderHeader }),
@@ -7426,7 +7450,7 @@ function DataTable({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
             const value = col.dataIndex ? row[col.dataIndex] : void 0;
             return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               TableCell,
@@ -7435,8 +7459,9 @@ function DataTable({
                   cellPadding,
                   col.align === "right" && "text-right",
                   col.align === "center" && "text-center",
-                  idx === data.length - 1 && col === visibleColumns[0] && "rounded-bl-lg",
-                  idx === data.length - 1 && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-lg"
+                  columnDividers && colIdx > 0 && "border-l border-border/60",
+                  idx === data.length - 1 && col === visibleColumns[0] && "rounded-bl-md",
+                  idx === data.length - 1 && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-md"
                 ),
                 children: col.render ? col.render(value, row, idx) : String(value ?? "")
               },
@@ -7446,7 +7471,7 @@ function DataTable({
         ]
       }
     ) }),
-    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Pagination,
       {
         page: curPage,
@@ -7468,7 +7493,7 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // ../../components/ui/Form.tsx
-var React32 = __toESM(require("react"), 1);
+var React31 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-hook-form/dist/index.esm.mjs
 var import_react22 = __toESM(require("react"), 1);
@@ -9237,7 +9262,7 @@ function useForm(props = {}) {
 // ../../components/ui/Form.tsx
 var import_next_intl8 = require("next-intl");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var FormConfigContext = React32.createContext({ size: "md" });
+var FormConfigContext = React31.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -9250,7 +9275,7 @@ var FormWrapper = ({
   const methods = useForm({
     defaultValues: initialValues
   });
-  React32.useEffect(() => {
+  React31.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
@@ -9259,15 +9284,15 @@ var FormWrapper = ({
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React32.createContext({});
+var FormFieldContext = React31.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React32.useContext(FormFieldContext);
-  const itemContext = React32.useContext(FormItemContext);
+  const fieldContext = React31.useContext(FormFieldContext);
+  const itemContext = React31.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     try {
@@ -9288,20 +9313,20 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React32.createContext({});
-var FormItem = React32.forwardRef(({ className, ...props }, ref) => {
-  const id = React32.useId();
+var FormItemContext = React31.createContext({});
+var FormItem = React31.forwardRef(({ className, ...props }, ref) => {
+  const id = React31.useId();
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React32.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React31.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  const config = React32.useContext(FormConfigContext);
+  const config = React31.useContext(FormConfigContext);
   const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React32.forwardRef(({ ...props }, ref) => {
+var FormControl = React31.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
@@ -9315,12 +9340,12 @@ var FormControl = React32.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React32.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React31.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React32.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React31.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
@@ -9329,7 +9354,7 @@ var FormMessage = React32.forwardRef(({ className, children, ...props }, ref) =>
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var FormInput = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   FormField,
   {
     name,
@@ -9340,7 +9365,7 @@ var FormInput = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var FormCheckbox = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   FormField,
   {
     name,
@@ -9364,9 +9389,9 @@ var FormCheckbox = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React32.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
+var FormSubmitButton = React31.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
 FormSubmitButton.displayName = "FormSubmitButton";
 
 // ../../components/ui/NotificationModal.tsx