@underverse-ui/underverse 1.0.47 → 1.0.49

package/dist/index.js

@@ -409,85 +409,103 @@ var PulseBadge = ({ speed = "normal", className, ...props }) => {
 var Badge_default = Badge;
 
 // src/components/Card.tsx
+import React2 from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var getPaddingInfo = (className) => {
   if (!className) return { hasAll: false, hasX: false, hasY: false };
-  const hasAll = /\b(p)-\d+|\b(p)-\[/.test(className) || /\bmd:p-|lg:p-|sm:p-|xl:p-/.test(className);
-  const hasX = /\b(px|pl|pr|ps|pe)-/.test(className);
-  const hasY = /\b(py|pt|pb)-/.test(className);
+  const hasAll = /(?:^|\s)p-[\d[]/.test(className) || /(?:^|\s)(?:\w+:)?p-[\d[]/.test(className);
+  const hasX = /\b(?:\w+:)?(?:px|pl|pr|ps|pe)-/.test(className);
+  const hasY = /\b(?:\w+:)?(?:py|pt|pb)-/.test(className);
   return { hasAll, hasX, hasY };
 };
-var Card = ({
-  title,
-  description,
-  children,
-  footer,
-  className,
-  hoverable = false,
-  clickable = false,
-  innerClassName,
-  contentClassName,
-  noPadding = false,
-  onClick,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      className: cn(
-        "group rounded-2xl md:rounded-3xl bg-card text-card-foreground transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft max-md:rounded-xl",
-        "border border-border shadow-sm md:hover:shadow-md",
-        hoverable && "md:hover:-translate-y-0.5 md:hover:border-primary/15",
-        clickable && "cursor-pointer active:translate-y-px active:bg-accent/5 md:hover:bg-accent/5",
-        "backdrop-blur-sm",
-        className
-      ),
-      onClick,
-      ...rest,
-      children: /* @__PURE__ */ jsxs3("div", { className: cn("relative overflow-hidden rounded-2xl md:rounded-3xl max-md:rounded-xl", innerClassName), children: [
-        (hoverable || clickable) && /* @__PURE__ */ jsx3(
-          "div",
-          {
-            className: cn(
-              "absolute inset-0 bg-linear-to-br from-primary/5 to-transparent opacity-0 transition-opacity duration-300",
-              "md:group-hover:opacity-100"
-            )
-          }
+var Card = React2.forwardRef(
+  ({
+    title,
+    description,
+    children,
+    footer,
+    className,
+    headerClassName,
+    footerClassName,
+    hoverable = false,
+    clickable = false,
+    innerClassName,
+    contentClassName,
+    noPadding = false,
+    onClick,
+    onKeyDown,
+    role,
+    tabIndex,
+    ...rest
+  }, ref) => {
+    const isInteractive = clickable && typeof onClick === "function";
+    const padding = getPaddingInfo(contentClassName);
+    const skipAllPadding = noPadding || padding.hasAll;
+    const defaultPaddingX = !skipAllPadding && !padding.hasX ? "px-4 md:px-6 max-md:px-3" : "";
+    const defaultPaddingY = !skipAllPadding && !padding.hasY ? "pt-0 pb-4 md:pb-6 max-md:pb-3" : "";
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group rounded-2xl md:rounded-3xl bg-card text-card-foreground transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft max-md:rounded-xl",
+          "border border-border shadow-sm backdrop-blur-sm",
+          hoverable && "md:hover:-translate-y-0.5 md:hover:border-primary/15 md:hover:shadow-md",
+          clickable && "cursor-pointer active:translate-y-px active:bg-accent/5 md:hover:bg-accent/5 md:hover:shadow-md",
+          className
         ),
-        (title || description) && /* @__PURE__ */ jsxs3("div", { className: "relative flex flex-col space-y-2 p-4 md:p-6 max-md:space-y-1.5 max-md:p-3", children: [
-          title && /* @__PURE__ */ jsx3(
-            "h3",
+        onClick,
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented || !isInteractive) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        },
+        role: isInteractive ? role ?? "button" : role,
+        tabIndex: isInteractive ? tabIndex ?? 0 : tabIndex,
+        ...rest,
+        children: /* @__PURE__ */ jsxs3("div", { className: cn("relative overflow-hidden rounded-2xl md:rounded-3xl max-md:rounded-xl", innerClassName), children: [
+          (hoverable || clickable) && /* @__PURE__ */ jsx3(
+            "div",
             {
               className: cn(
-                "text-base md:text-lg font-semibold leading-none tracking-tight transition-colors duration-200 max-md:text-sm",
-                hoverable && "md:group-hover:text-primary"
-              ),
-              children: title
+                "pointer-events-none absolute inset-0 bg-linear-to-br from-primary/5 to-transparent opacity-0 transition-opacity duration-300",
+                "group-hover:opacity-100"
+              )
             }
           ),
-          description && /* @__PURE__ */ jsx3("p", { className: "text-sm md:text-base text-muted-foreground leading-relaxed", children: description })
-        ] }),
-        children && (() => {
-          const padding = getPaddingInfo(contentClassName);
-          const skipAllPadding = noPadding || padding.hasAll;
-          const defaultPaddingX = !skipAllPadding && !padding.hasX ? "px-4 md:px-6 max-md:px-3" : "";
-          const defaultPaddingY = !skipAllPadding && !padding.hasY ? "pt-0 pb-4 md:pb-6 max-md:pb-3" : "";
-          return /* @__PURE__ */ jsx3("div", { className: cn("relative", defaultPaddingX, defaultPaddingY, contentClassName), children });
-        })(),
-        footer && /* @__PURE__ */ jsx3("div", { className: "relative flex items-center p-4 md:p-6 pt-0 border-t border-border mt-4 max-md:mt-3 max-md:p-3 max-md:pt-0", children: footer })
-      ] })
-    }
-  );
-};
+          (title || description) && /* @__PURE__ */ jsxs3("div", { className: cn("relative flex min-w-0 flex-col space-y-2 p-4 md:p-6 max-md:space-y-1.5 max-md:p-3", headerClassName), children: [
+            title && /* @__PURE__ */ jsx3(
+              "h3",
+              {
+                className: cn(
+                  "min-w-0 text-base md:text-lg font-semibold leading-tight tracking-tight break-words [overflow-wrap:anywhere] transition-colors duration-200 max-md:text-sm",
+                  hoverable && "group-hover:text-primary"
+                ),
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsx3("p", { className: "min-w-0 text-sm md:text-base text-muted-foreground leading-relaxed break-words [overflow-wrap:anywhere]", children: description })
+          ] }),
+          children && /* @__PURE__ */ jsx3("div", { className: cn("relative", defaultPaddingX, defaultPaddingY, contentClassName), children }),
+          footer && /* @__PURE__ */ jsx3("div", { className: cn("relative flex items-center p-4 md:p-6 pt-0 border-t border-border mt-4 max-md:mt-3 max-md:p-3 max-md:pt-0", footerClassName), children: footer })
+        ] })
+      }
+    );
+  }
+);
+Card.displayName = "Card";
 var Card_default = Card;
 
 // src/components/CheckBox.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { Check } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var Checkbox = React2.forwardRef(
+var Checkbox = React3.forwardRef(
   ({ className, label, labelClassName, containerClassName, checked, defaultChecked, onChange, ...props }, ref) => {
-    const [internalChecked, setInternalChecked] = React2.useState(defaultChecked ?? false);
+    const [internalChecked, setInternalChecked] = React3.useState(defaultChecked ?? false);
     const isControlled = checked !== void 0;
     const isChecked = isControlled ? checked : internalChecked;
     const handleChange = (e) => {
@@ -516,13 +534,13 @@ var Checkbox = React2.forwardRef(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Input.tsx
-import React5, { forwardRef as forwardRef3, useId, useState as useState3 } from "react";
+import React6, { forwardRef as forwardRef3, useId, useState as useState3 } from "react";
 
 // src/hooks/useSmartTranslations.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 
 // src/contexts/TranslationContext.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 
 // locales/en.json
 var en_default = {
@@ -1406,9 +1424,9 @@ var defaultTranslations = {
   ko: ko_default,
   ja: ja_default
 };
-var TranslationContext = React3.createContext(null);
+var TranslationContext = React4.createContext(null);
 var TranslationProvider = ({ children, locale = "en", translations }) => {
-  const t = React3.useCallback(
+  const t = React4.useCallback(
     (namespace) => {
       return (key) => {
         const mergedTranslations = {
@@ -1436,7 +1454,7 @@ var TranslationProvider = ({ children, locale = "en", translations }) => {
   return /* @__PURE__ */ jsx5(TranslationContext.Provider, { value: { locale, t }, children });
 };
 var useUnderverseTranslations = (namespace) => {
-  const context = React3.useContext(TranslationContext);
+  const context = React4.useContext(TranslationContext);
   if (!context) {
     return (key) => {
       const parts = namespace.split(".");
@@ -1458,7 +1476,7 @@ var useUnderverseTranslations = (namespace) => {
   return context.t(namespace);
 };
 var useUnderverseLocale = () => {
-  const context = React3.useContext(TranslationContext);
+  const context = React4.useContext(TranslationContext);
   return context?.locale || "en";
 };
 
@@ -1474,12 +1492,12 @@ try {
 } catch {
   nextIntlHooks = null;
 }
-var ForceInternalContext = React4.createContext(false);
+var ForceInternalContext = React5.createContext(false);
 var ForceInternalTranslationsProvider = ({ children }) => {
   return /* @__PURE__ */ jsx6(ForceInternalContext.Provider, { value: true, children });
 };
 function useSmartTranslations(namespace) {
-  const forceInternal = React4.useContext(ForceInternalContext);
+  const forceInternal = React5.useContext(ForceInternalContext);
   const internalT = useUnderverseTranslations(namespace);
   if (forceInternal || !nextIntlHooks?.useTranslations) {
     return internalT;
@@ -1492,7 +1510,7 @@ function useSmartTranslations(namespace) {
   }
 }
 function useSmartLocale() {
-  const forceInternal = React4.useContext(ForceInternalContext);
+  const forceInternal = React5.useContext(ForceInternalContext);
   const internalLocale = useUnderverseLocale();
   if (forceInternal || !nextIntlHooks?.useLocale) {
     return internalLocale;
@@ -1799,7 +1817,7 @@ Input.displayName = "Input";
 var SearchInput = forwardRef3(
   ({ onSearch, searchDelay = 300, placeholder = "Search\u2026", ...props }, ref) => {
     const [searchValue, setSearchValue] = useState3(props.value || "");
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       if (!onSearch) return;
       const timer = setTimeout(() => {
         onSearch(searchValue);
@@ -1872,16 +1890,16 @@ var NumberInput = forwardRef3(
       const n = Number(v);
       return Number.isFinite(n) ? n : 0;
     };
-    const format = React5.useCallback((n) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(n), [locale]);
+    const format = React6.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] = React5.useState(
+    const [displayValue, setDisplayValue] = React6.useState(
       formatThousands ? value !== void 0 && value !== null && value !== "" ? format(toNumber(value)) : "" : String(value ?? "")
     );
     const currentValue = toNumber(value);
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       if (formatThousands) {
         const next = value === "" || value === void 0 || value === null ? "" : format(toNumber(value));
         setDisplayValue((prev) => prev === next ? prev : next);
@@ -2386,7 +2404,7 @@ TagInput.displayName = "TagInput";
 var TagInput_default = TagInput;
 
 // src/components/Switch.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var Switch = ({
   checked,
@@ -2399,7 +2417,7 @@ var Switch = ({
   className,
   ...props
 }) => {
-  const [isPressed, setIsPressed] = React7.useState(false);
+  const [isPressed, setIsPressed] = React8.useState(false);
   const sizeClasses2 = {
     sm: {
       track: "w-8 h-4",
@@ -2417,7 +2435,7 @@ var Switch = ({
       translate: "translate-x-6"
     }
   };
-  const variantClasses2 = {
+  const variantClasses3 = {
     default: {
       active: "bg-primary border-primary",
       inactive: "bg-input border-input"
@@ -2463,7 +2481,7 @@ var Switch = ({
             {
               className: cn(
                 "block w-full h-full rounded-full transition-colors duration-200 ease-out border",
-                checked ? variantClasses2[variant].active : variantClasses2[variant].inactive
+                checked ? variantClasses3[variant].active : variantClasses3[variant].inactive
               )
             }
           ),
@@ -2494,13 +2512,13 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/label.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { cva } from "class-variance-authority";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var Label = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   "label",
   {
     ref,
@@ -2512,7 +2530,7 @@ Label.displayName = "Label";
 
 // src/components/SmartImage.tsx
 import Image2 from "next/image";
-import React9 from "react";
+import React10 from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var DEFAULT_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Crect fill='%23f3f4f6' width='400' height='400'/%3E%3Cpath fill='%239ca3af' d='M160 150h80v60h-80z'/%3E%3Ccircle fill='%239ca3af' cx='180' cy='130' r='20'/%3E%3Cpath fill='%239ca3af' d='M120 240l60-60 40 40 40-30 60 50v40H120z'/%3E%3C/svg%3E";
 var FAILED_SRCS = /* @__PURE__ */ new Set();
@@ -2551,8 +2569,8 @@ function SmartImage({
     const normalized = `/${raw.replace(/^\.\/?/, "")}`;
     return FAILED_SRCS.has(normalized) ? fallbackSrc : normalized;
   };
-  const [resolvedSrc, setResolvedSrc] = React9.useState(() => normalize(src));
-  React9.useEffect(() => {
+  const [resolvedSrc, setResolvedSrc] = React10.useState(() => normalize(src));
+  React10.useEffect(() => {
     setResolvedSrc(normalize(src));
   }, [src]);
   const handleError = () => {
@@ -2715,7 +2733,7 @@ var Avatar_default = Avatar;
 // src/components/Skeleton.tsx
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var Skeleton = ({ className, width, height, variant = "rectangular", animation = "pulse", lines = 1 }) => {
-  const variantClasses2 = {
+  const variantClasses3 = {
     rectangular: "rounded-2xl md:rounded-3xl",
     circular: "rounded-full",
     rounded: "rounded-2xl md:rounded-3xl",
@@ -2732,7 +2750,7 @@ var Skeleton = ({ className, width, height, variant = "rectangular", animation =
       {
         className: cn(
           "h-4 bg-muted",
-          variantClasses2[variant],
+          variantClasses3[variant],
           animationClasses[animation],
           index === lines - 1 && "w-3/4"
           // Last line is shorter
@@ -2745,7 +2763,7 @@ var Skeleton = ({ className, width, height, variant = "rectangular", animation =
       index
     )) });
   }
-  return /* @__PURE__ */ jsx13("div", { className: cn("bg-muted", variantClasses2[variant], animationClasses[animation], className), style: { width, height } });
+  return /* @__PURE__ */ jsx13("div", { className: cn("bg-muted", variantClasses3[variant], animationClasses[animation], className), style: { width, height } });
 };
 var SkeletonAvatar = ({ size = "md", className }) => {
   const sizeClasses2 = {
@@ -2837,7 +2855,7 @@ var SkeletonTable = ({ rows = 5, columns = 4, className }) => {
 var Skeleton_default = Skeleton;
 
 // src/components/Progress.tsx
-import React10 from "react";
+import React11 from "react";
 import { Check as Check2, X as X3, Clock } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var variantStyles2 = {
@@ -2871,8 +2889,8 @@ 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 = React10.useId();
-  const descId = React10.useId();
+  const labelId = React11.useId();
+  const descId = React11.useId();
   const getStatusIcon = () => {
     if (isComplete) return /* @__PURE__ */ jsx14(Check2, { className: "w-4 h-4 text-success" });
     if (isError) return /* @__PURE__ */ jsx14(X3, { className: "w-4 h-4 text-destructive" });
@@ -3203,7 +3221,7 @@ var LoadingProgress = ({
 };
 
 // src/components/Modal.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { createPortal } from "react-dom";
 import { X as X4 } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -3232,17 +3250,17 @@ var Modal = ({
   width,
   height
 }) => {
-  const [isMounted, setIsMounted] = React11.useState(false);
-  const [isVisible, setIsVisible] = React11.useState(false);
-  const [isAnimating, setIsAnimating] = React11.useState(true);
-  const mouseDownTarget = React11.useRef(null);
-  const modalContentRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [isMounted, setIsMounted] = React12.useState(false);
+  const [isVisible, setIsVisible] = React12.useState(false);
+  const [isAnimating, setIsAnimating] = React12.useState(true);
+  const mouseDownTarget = React12.useRef(null);
+  const modalContentRef = React12.useRef(null);
+  React12.useEffect(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
-  const animationRef = React11.useRef(false);
-  React11.useEffect(() => {
+  const animationRef = React12.useRef(false);
+  React12.useEffect(() => {
     if (isOpen) {
       if (animationRef.current) return;
       animationRef.current = true;
@@ -3262,7 +3280,7 @@ var Modal = ({
       }
     }
   }, [isOpen, isVisible]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!isOpen || !closeOnEsc) return;
     const handleEscape = (event) => {
       if (event.key === "Escape") {
@@ -3272,7 +3290,7 @@ var Modal = ({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, closeOnEsc, onClose]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -3562,7 +3580,7 @@ var ToastComponent = ({ toast, onRemove }) => {
 var Toast_default = ToastProvider;
 
 // src/components/Tooltip.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var variantStyles3 = {
@@ -3637,21 +3655,21 @@ var Tooltip = ({
   disabled = false,
   variant = "default"
 }) => {
-  const [isOpen, setIsOpen] = React13.useState(false);
-  const [isMounted, setIsMounted] = React13.useState(false);
-  const triggerRef = React13.useRef(null);
-  const positionerRef = React13.useRef(null);
-  const panelRef = React13.useRef(null);
-  const timeoutRef = React13.useRef(void 0);
-  const lastAppliedRef = React13.useRef(null);
-  React13.useEffect(() => {
+  const [isOpen, setIsOpen] = React14.useState(false);
+  const [isMounted, setIsMounted] = React14.useState(false);
+  const triggerRef = React14.useRef(null);
+  const positionerRef = React14.useRef(null);
+  const panelRef = React14.useRef(null);
+  const timeoutRef = React14.useRef(void 0);
+  const lastAppliedRef = React14.useRef(null);
+  React14.useEffect(() => {
     setIsMounted(true);
   }, []);
   const delayOpen = typeof delay === "object" ? delay.open || 700 : delay;
   const delayClose = typeof delay === "object" ? delay.close || 300 : delay;
   const offset = 8;
   const padding = 8;
-  const updatePosition = React13.useCallback(() => {
+  const updatePosition = React14.useCallback(() => {
     const triggerEl = triggerRef.current;
     const positionerEl = positionerRef.current;
     const panelEl = panelRef.current;
@@ -3700,10 +3718,10 @@ var Tooltip = ({
   const handleBlur = () => {
     setIsOpen(false);
   };
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     return () => clearTimeout(timeoutRef.current);
   }, []);
-  React13.useLayoutEffect(() => {
+  React14.useLayoutEffect(() => {
     if (!isOpen) {
       lastAppliedRef.current = null;
       return;
@@ -3720,7 +3738,7 @@ var Tooltip = ({
       cancelAnimationFrame(raf2);
     };
   }, [isOpen, updatePosition]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (!isOpen) return;
     let raf = 0;
     const handler = () => {
@@ -3738,7 +3756,7 @@ var Tooltip = ({
       document.removeEventListener("scroll", handler, true);
     };
   }, [isOpen, updatePosition]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (!isOpen) return;
     if (typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver(() => updatePosition());
@@ -3750,7 +3768,7 @@ var Tooltip = ({
     return children;
   }
   return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    React13.cloneElement(children, {
+    React14.cloneElement(children, {
       ref: (node) => {
         triggerRef.current = node;
         assignRef(children.props?.ref, node);
@@ -3814,7 +3832,7 @@ var Tooltip = ({
 };
 
 // src/components/Popover.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/utils/animations.ts
@@ -4109,14 +4127,14 @@ var Popover = ({
   contentWidth
 }) => {
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React14.useState(false);
-  const triggerRef = React14.useRef(null);
-  const positionerRef = React14.useRef(null);
-  const panelRef = React14.useRef(null);
-  const lastAppliedRef = React14.useRef(null);
+  const [internalOpen, setInternalOpen] = React15.useState(false);
+  const triggerRef = React15.useRef(null);
+  const positionerRef = React15.useRef(null);
+  const panelRef = React15.useRef(null);
+  const lastAppliedRef = React15.useRef(null);
   useShadCNAnimations();
   const isOpen = isControlled ? open : internalOpen;
-  const setIsOpen = React14.useCallback(
+  const setIsOpen = React15.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
@@ -4125,8 +4143,8 @@ var Popover = ({
   );
   const offset = 4;
   const padding = 8;
-  const initialPlacement = React14.useMemo(() => normalizePlacement(placement), [placement]);
-  const updatePosition = React14.useCallback(() => {
+  const initialPlacement = React15.useMemo(() => normalizePlacement(placement), [placement]);
+  const updatePosition = React15.useCallback(() => {
     const triggerEl = triggerRef.current;
     const positionerEl = positionerRef.current;
     const panelEl = panelRef.current;
@@ -4163,7 +4181,7 @@ var Popover = ({
     if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
     if (positionerEl.style.pointerEvents !== "auto") positionerEl.style.pointerEvents = "auto";
   }, [placement, matchTriggerWidth, contentWidth]);
-  React14.useLayoutEffect(() => {
+  React15.useLayoutEffect(() => {
     if (!isOpen) return;
     updatePosition();
     let raf1 = 0;
@@ -4177,7 +4195,7 @@ var Popover = ({
       cancelAnimationFrame(raf2);
     };
   }, [isOpen, updatePosition]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!isOpen) return;
     let raf = 0;
     const tick = () => {
@@ -4187,7 +4205,7 @@ var Popover = ({
     raf = window.requestAnimationFrame(tick);
     return () => window.cancelAnimationFrame(raf);
   }, [isOpen, updatePosition]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!isOpen) return;
     let raf = 0;
     const handler = () => {
@@ -4205,7 +4223,7 @@ var Popover = ({
       document.removeEventListener("scroll", handler, true);
     };
   }, [isOpen, updatePosition]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!isOpen) return;
     if (typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver(() => updatePosition());
@@ -4213,13 +4231,13 @@ var Popover = ({
     if (triggerRef.current) ro.observe(triggerRef.current);
     return () => ro.disconnect();
   }, [isOpen, updatePosition]);
-  React14.useLayoutEffect(() => {
+  React15.useLayoutEffect(() => {
     if (!isOpen) {
       lastAppliedRef.current = null;
       return;
     }
   }, [isOpen]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -4304,7 +4322,7 @@ var Popover = ({
   return /* @__PURE__ */ jsxs14(Fragment4, { children: [
     (() => {
       const triggerEl = trigger;
-      return React14.cloneElement(triggerEl, {
+      return React15.cloneElement(triggerEl, {
         ref: (node) => {
           triggerRef.current = node;
           assignRef2(triggerEl.props?.ref, node);
@@ -4330,7 +4348,7 @@ var Popover = ({
 };
 
 // src/components/Sheet.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { X as X6 } from "lucide-react";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -4410,13 +4428,13 @@ var Sheet = ({
   header,
   footer
 }) => {
-  const [mounted, setMounted] = React15.useState(false);
-  const [isAnimating, setIsAnimating] = React15.useState(true);
-  const [isVisible, setIsVisible] = React15.useState(false);
-  React15.useEffect(() => {
+  const [mounted, setMounted] = React16.useState(false);
+  const [isAnimating, setIsAnimating] = React16.useState(true);
+  const [isVisible, setIsVisible] = React16.useState(false);
+  React16.useEffect(() => {
     setMounted(true);
   }, []);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!closeOnEscape) return;
     const handleEscape = (e) => {
       if (e.key === "Escape" && open) {
@@ -4426,7 +4444,7 @@ var Sheet = ({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open, closeOnEscape, onOpenChange]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (open) {
       document.body.style.overflow = "hidden";
     } else {
@@ -4436,7 +4454,7 @@ var Sheet = ({
       document.body.style.overflow = "unset";
     };
   }, [open]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (open) {
       setIsVisible(true);
       setIsAnimating(true);
@@ -4623,7 +4641,7 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
 var Alert_default = Alert;
 
 // src/components/GlobalLoading.tsx
-import React16, { useEffect as useEffect6, useState as useState12 } from "react";
+import React17, { useEffect as useEffect6, useState as useState12 } from "react";
 import { Activity as Activity2 } from "lucide-react";
 
 // src/utils/loading.ts
@@ -4728,7 +4746,7 @@ var InlineLoading = ({ isLoading, text, className, size = "md" }) => {
   ] });
 };
 var ButtonLoading = ({ isLoading, children, className, disabled, loadingText }) => {
-  const child = React16.isValidElement(children) ? React16.cloneElement(children, {
+  const child = React17.isValidElement(children) ? React17.cloneElement(children, {
     disabled: (children.props?.disabled ?? false) || disabled || isLoading,
     "aria-busy": isLoading || void 0
   }) : children;
@@ -4742,7 +4760,7 @@ var ButtonLoading = ({ isLoading, children, className, disabled, loadingText })
 };
 
 // src/components/Breadcrumb.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { ChevronRight, Home, MoreHorizontal } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var NextLink = null;
@@ -4789,8 +4807,8 @@ var Breadcrumb = ({
   homeHref = "/",
   collapsible = true
 }) => {
-  const [isCollapsed, setIsCollapsed] = React17.useState(false);
-  React17.useEffect(() => {
+  const [isCollapsed, setIsCollapsed] = React18.useState(false);
+  React18.useEffect(() => {
     if (collapsible && items.length > maxItems) {
       setIsCollapsed(true);
     }
@@ -4808,7 +4826,7 @@ var Breadcrumb = ({
     const SeparatorComponent = separator;
     return /* @__PURE__ */ jsx22(SeparatorComponent, { className: cn("text-muted-foreground", sizeStyles5[size].icon) });
   };
-  const processedItems = React17.useMemo(() => {
+  const processedItems = React18.useMemo(() => {
     let finalItems = [...items];
     if (showHome && finalItems[0]?.href !== homeHref) {
       finalItems.unshift({
@@ -4881,7 +4899,7 @@ var Breadcrumb = ({
 var Breadcrumb_default = Breadcrumb;
 
 // src/components/Tab.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var sizeStyles6 = {
   sm: {
@@ -4946,10 +4964,10 @@ var Tabs = ({
   noContentPadding = false,
   animateContent = true
 }) => {
-  const [active, setActive] = React18.useState(defaultValue || tabs[0]?.value);
-  const [underlineStyle, setUnderlineStyle] = React18.useState({});
-  const tabRefs = React18.useRef([]);
-  const baseId = React18.useMemo(() => {
+  const [active, setActive] = React19.useState(defaultValue || tabs[0]?.value);
+  const [underlineStyle, setUnderlineStyle] = React19.useState({});
+  const tabRefs = React19.useRef([]);
+  const baseId = React19.useMemo(() => {
     const key = tabs.map((t) => t.value).join("-");
     return `tabs-${key || "default"}`;
   }, [tabs]);
@@ -4957,7 +4975,7 @@ var Tabs = ({
     setActive(value);
     onTabChange?.(value);
   };
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (variant === "underline" && orientation === "horizontal") {
       const activeIndex2 = tabs.findIndex((tab) => tab.value === active);
       const activeTab2 = tabRefs.current[activeIndex2];
@@ -5078,7 +5096,7 @@ var VerticalTabs = ({ sidebarWidth = "w-48", className, ...props }) => {
 };
 
 // src/components/DropdownMenu.tsx
-import React19, { useState as useState15 } from "react";
+import React20, { useState as useState15 } from "react";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var DropdownMenu = ({
   trigger,
@@ -5093,17 +5111,17 @@ var DropdownMenu = ({
   items
 }) => {
   const [internalOpen, setInternalOpen] = useState15(false);
-  const triggerRef = React19.useRef(null);
-  const menuRef = React19.useRef(null);
-  const itemsRef = React19.useRef([]);
+  const triggerRef = React20.useRef(null);
+  const menuRef = React20.useRef(null);
+  const itemsRef = React20.useRef([]);
   const [activeIndex, setActiveIndex] = useState15(-1);
   useShadCNAnimations();
   const open = isOpen !== void 0 ? isOpen : internalOpen;
   const setOpen = onOpenChange || setInternalOpen;
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (open) setActiveIndex(-1);
   }, [open]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     const handleKeyNav = (e) => {
       const active = document.activeElement;
@@ -5177,7 +5195,7 @@ var DropdownMenu = ({
       index
     );
   }) : children });
-  const enhancedTrigger = React19.cloneElement(trigger, {
+  const enhancedTrigger = React20.cloneElement(trigger, {
     ref: triggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -5286,11 +5304,11 @@ var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", cla
 var DropdownMenu_default = DropdownMenu;
 
 // src/components/Pagination.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import { ChevronLeft, ChevronRight as ChevronRight2, ChevronsLeft, ChevronsRight } from "lucide-react";
 
 // src/components/Combobox.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { useId as useId3 } from "react";
 import { ChevronDown, Search as Search3, SearchX, Check as Check3, X as X8 } from "lucide-react";
 
@@ -5593,23 +5611,23 @@ var Combobox = ({
   helperText,
   useOverlayScrollbar = false
 }) => {
-  const [open, setOpen] = React21.useState(false);
-  const [query, setQuery] = React21.useState("");
-  const [activeIndex, setActiveIndex] = React21.useState(null);
+  const [open, setOpen] = React22.useState(false);
+  const [query, setQuery] = React22.useState("");
+  const [activeIndex, setActiveIndex] = React22.useState(null);
   useShadCNAnimations();
-  const listRef = React21.useRef([]);
-  const inputRef = React21.useRef(null);
-  const optionsViewportRef = React21.useRef(null);
+  const listRef = React22.useRef([]);
+  const inputRef = React22.useRef(null);
+  const optionsViewportRef = React22.useRef(null);
   useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
   const autoId = useId3();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const enableSearch = options.length > 10;
-  const filteredOptions = React21.useMemo(
+  const filteredOptions = React22.useMemo(
     () => enableSearch ? options.filter((o) => getOptionLabel(o).toLowerCase().includes(query.trim().toLowerCase())) : options,
     [options, query, enableSearch]
   );
-  const triggerRef = React21.useRef(null);
+  const triggerRef = React22.useRef(null);
   const handleSelect = (option) => {
     if (getOptionDisabled(option)) return;
     const val = getOptionValue(option);
@@ -5624,7 +5642,7 @@ var Combobox = ({
     onChange(null);
     setOpen(false);
   };
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (!open) {
       setQuery("");
       setActiveIndex(null);
@@ -5637,7 +5655,7 @@ var Combobox = ({
   const selectedOption = findOptionByValue(options, value);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
   const selectedIcon = selectedOption ? getOptionIcon(selectedOption) : void 0;
-  const groupedOptions = React21.useMemo(() => {
+  const groupedOptions = React22.useMemo(() => {
     if (!groupBy) return null;
     const groups = {};
     filteredOptions.forEach((opt) => {
@@ -5983,7 +6001,7 @@ var Pagination = ({
   labels
 }) => {
   const t = useSmartTranslations("Pagination");
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (disabled) return;
     const handleKey = (e) => {
       if (e.target && e.target.tagName === "INPUT") return;
@@ -6286,17 +6304,17 @@ var CompactPagination = ({ page, totalPages, onChange, className, disabled = fal
 };
 
 // src/components/Section.tsx
-import React23 from "react";
+import React24 from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var gradientDirectionMap = {
-  "to-r": "bg-linear-to-r",
-  "to-l": "bg-linear-to-l",
-  "to-b": "bg-linear-to-b",
-  "to-t": "bg-linear-to-t",
-  "to-br": "bg-linear-to-br",
-  "to-bl": "bg-linear-to-bl",
-  "to-tr": "bg-linear-to-tr",
-  "to-tl": "bg-linear-to-tl"
+  "to-r": "to right",
+  "to-l": "to left",
+  "to-b": "to bottom",
+  "to-t": "to top",
+  "to-br": "to bottom right",
+  "to-bl": "to bottom left",
+  "to-tr": "to top right",
+  "to-tl": "to top left"
 };
 var spacingClasses = {
   none: "",
@@ -6307,50 +6325,50 @@ var spacingClasses = {
 };
 var paddingXClasses = {
   none: "",
-  sm: "px-2 md:px-4 max-md:px-3",
+  sm: "px-3 md:px-4",
   md: "px-4 md:px-6",
-  lg: "px-6 md:px-8 max-md:px-5",
-  xl: "px-8 md:px-12 max-md:px-6"
+  lg: "px-5 md:px-8",
+  xl: "px-6 md:px-12"
 };
-var Section = React23.forwardRef(
+var variantClasses = {
+  default: "bg-background",
+  muted: "bg-muted/30",
+  primary: "bg-primary/5",
+  accent: "bg-accent/10",
+  gradient: ""
+};
+var Section = React24.forwardRef(
   ({
     children,
     className,
+    as: Tag = "section",
     variant = "default",
     spacing = "none",
     paddingX = "none",
     contained = false,
+    containerClassName,
     outlined = false,
-    gradientFrom = "from-primary/20",
-    gradientTo = "to-accent/20",
+    gradientFrom = "oklch(0.7 0.15 280 / 20%)",
+    gradientTo = "oklch(0.7 0.2 200 / 20%)",
     gradientDirection = "to-br",
+    style,
     ...props
   }, ref) => {
-    const variantClasses2 = {
-      default: "bg-background",
-      muted: "bg-muted/30",
-      primary: "bg-primary/5",
-      accent: "bg-accent/10",
-      gradient: ""
-    };
-    const getGradientClasses = () => {
-      if (variant !== "gradient") return "";
-      return cn(gradientDirectionMap[gradientDirection], gradientFrom, gradientTo);
-    };
+    const gradientStyle = variant === "gradient" ? { backgroundImage: `linear-gradient(${gradientDirectionMap[gradientDirection]}, ${gradientFrom}, ${gradientTo})` } : {};
     return /* @__PURE__ */ jsx28(
-      "section",
+      Tag,
       {
         ref,
         className: cn(
-          variant === "gradient" ? getGradientClasses() : variantClasses2[variant],
+          variant !== "gradient" && variantClasses[variant],
           spacingClasses[spacing],
-          paddingXClasses[paddingX],
+          !contained && paddingXClasses[paddingX],
           outlined && "rounded-2xl md:rounded-3xl border border-border/60 max-md:rounded-xl",
-          contained && "container mx-auto",
           className
         ),
+        style: { ...gradientStyle, ...style },
         ...props,
-        children
+        children: contained ? /* @__PURE__ */ jsx28("div", { className: cn("container mx-auto", paddingXClasses[paddingX], containerClassName), children }) : children
       }
     );
   }
@@ -6361,7 +6379,7 @@ var Section_default = Section;
 // src/components/ScrollArea.tsx
 import { forwardRef as forwardRef6, useRef as useRef9 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
-var variantClasses = {
+var variantClasses2 = {
   default: "bg-background",
   muted: "bg-muted/30",
   primary: "bg-primary/5",
@@ -6377,7 +6395,7 @@ var ScrollArea = forwardRef6(
         ref,
         className: cn(
           "relative overflow-hidden rounded-2xl md:rounded-3xl",
-          variantClasses[variant],
+          variantClasses2[variant],
           outlined && "border border-border/60",
           className
         ),
@@ -6628,7 +6646,7 @@ function formatDateSmart(date, locale = "en") {
 
 // src/components/DatePicker.tsx
 import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Sparkles as Sparkles2, X as XIcon } from "lucide-react";
-import * as React25 from "react";
+import * as React26 from "react";
 import { useId as useId4 } from "react";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var DatePicker = ({
@@ -6651,19 +6669,19 @@ var DatePicker = ({
 }) => {
   const t = useSmartTranslations("DatePicker");
   const locale = useSmartLocale();
-  const [isOpen, setIsOpen] = React25.useState(false);
-  const [viewDate, setViewDate] = React25.useState(value || /* @__PURE__ */ new Date());
-  const [viewMode, setViewMode] = React25.useState("calendar");
-  const triggerRef = React25.useRef(null);
-  const wheelContainerRef = React25.useRef(null);
-  const wheelDeltaRef = React25.useRef(0);
-  const normalizeToLocalDay = React25.useCallback((date) => {
+  const [isOpen, setIsOpen] = React26.useState(false);
+  const [viewDate, setViewDate] = React26.useState(value || /* @__PURE__ */ new Date());
+  const [viewMode, setViewMode] = React26.useState("calendar");
+  const triggerRef = React26.useRef(null);
+  const wheelContainerRef = React26.useRef(null);
+  const wheelDeltaRef = React26.useRef(0);
+  const normalizeToLocalDay = React26.useCallback((date) => {
     if (!date) return null;
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
   }, []);
-  const minDay = React25.useMemo(() => normalizeToLocalDay(minDate), [minDate, normalizeToLocalDay]);
-  const maxDay = React25.useMemo(() => normalizeToLocalDay(maxDate), [maxDate, normalizeToLocalDay]);
-  const isDateDisabled = React25.useCallback(
+  const minDay = React26.useMemo(() => normalizeToLocalDay(minDate), [minDate, normalizeToLocalDay]);
+  const maxDay = React26.useMemo(() => normalizeToLocalDay(maxDate), [maxDate, normalizeToLocalDay]);
+  const isDateDisabled = React26.useCallback(
     (date) => {
       const day = normalizeToLocalDay(date);
       if (!day) return false;
@@ -6732,14 +6750,14 @@ var DatePicker = ({
       footerMargin: "mt-5 pt-4 gap-2.5"
     }
   };
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (value) {
       setViewDate(value);
     } else {
       setViewDate(/* @__PURE__ */ new Date());
     }
   }, [value]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isOpen) {
       setViewMode("calendar");
     }
@@ -6768,7 +6786,7 @@ var DatePicker = ({
   const getFirstDayOfMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
   };
-  const navigateMonth = React25.useCallback((direction) => {
+  const navigateMonth = React26.useCallback((direction) => {
     setViewDate((prev) => {
       const newDate = new Date(prev);
       newDate.setMonth(prev.getMonth() + (direction === "next" ? 1 : -1));
@@ -6782,7 +6800,7 @@ var DatePicker = ({
     const node = el;
     return node.scrollHeight > node.clientHeight + 1;
   };
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isOpen) return;
     const container = wheelContainerRef.current;
     if (!container) return;
@@ -7158,9 +7176,9 @@ var DatePicker = ({
 var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false, minDate, maxDate, size = "md" }) => {
   const locale = useSmartLocale();
   const t = useSmartTranslations("DatePicker");
-  const [isOpen, setIsOpen] = React25.useState(false);
-  const wheelContainerRef = React25.useRef(null);
-  const wheelDeltaRef = React25.useRef(0);
+  const [isOpen, setIsOpen] = React26.useState(false);
+  const wheelContainerRef = React26.useRef(null);
+  const wheelDeltaRef = React26.useRef(0);
   const sizeStyles8 = {
     sm: {
       trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
@@ -7218,16 +7236,16 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     if (!date) return null;
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
   };
-  const minDay = React25.useMemo(() => normalizeToLocal(minDate), [minDate]);
-  const maxDay = React25.useMemo(() => normalizeToLocal(maxDate), [maxDate]);
-  const [viewDate, setViewDate] = React25.useState(startDate || /* @__PURE__ */ new Date());
-  const [tempStart, setTempStart] = React25.useState(normalizeToLocal(startDate));
-  const [tempEnd, setTempEnd] = React25.useState(normalizeToLocal(endDate));
-  const [hoveredDate, setHoveredDate] = React25.useState(null);
-  React25.useEffect(() => {
+  const minDay = React26.useMemo(() => normalizeToLocal(minDate), [minDate]);
+  const maxDay = React26.useMemo(() => normalizeToLocal(maxDate), [maxDate]);
+  const [viewDate, setViewDate] = React26.useState(startDate || /* @__PURE__ */ new Date());
+  const [tempStart, setTempStart] = React26.useState(normalizeToLocal(startDate));
+  const [tempEnd, setTempEnd] = React26.useState(normalizeToLocal(endDate));
+  const [hoveredDate, setHoveredDate] = React26.useState(null);
+  React26.useEffect(() => {
     setTempStart(normalizeToLocal(startDate));
   }, [startDate]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     setTempEnd(normalizeToLocal(endDate));
   }, [endDate]);
   const isSameDay2 = (a, b) => {
@@ -7237,7 +7255,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
   const inRange = (d, s, e) => d > s && d < e;
   const getDaysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
   const getFirstDayOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1).getDay();
-  const navigateMonth = React25.useCallback((direction) => {
+  const navigateMonth = React26.useCallback((direction) => {
     setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
   }, []);
   const isElementVerticallyScrollable = (el) => {
@@ -7247,7 +7265,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     const node = el;
     return node.scrollHeight > node.clientHeight + 1;
   };
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isOpen) return;
     const container = wheelContainerRef.current;
     if (!container) return;
@@ -7485,15 +7503,15 @@ var CompactDatePicker = ({ value, onChange, className }) => {
 };
 
 // src/components/DateTimePicker.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { Calendar as CalendarIcon, X as X11 } from "lucide-react";
 
 // src/components/Calendar.tsx
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "lucide-react";
-import * as React27 from "react";
+import * as React28 from "react";
 
 // src/components/MonthYearPicker.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { Calendar as Calendar2, X as X9, Check as Check4, ChevronDown as ChevronDown2 } from "lucide-react";
 import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 var DEFAULT_MONTH_NAMES = [
@@ -7536,20 +7554,20 @@ function WheelColumn({
 }) {
   const height = itemHeight * WHEEL_VISIBLE_ITEMS;
   const paddingY = (height - itemHeight) / 2;
-  const rafRef = React26.useRef(0);
-  const lastVirtualIndexRef = React26.useRef(null);
-  const wheelDeltaRef = React26.useRef(0);
-  const scrollEndTimeoutRef = React26.useRef(null);
-  const suppressScrollSelectUntilRef = React26.useRef(0);
-  const suppressItemClickUntilRef = React26.useRef(0);
-  const dragRef = React26.useRef(null);
-  const draggingRef = React26.useRef(false);
-  const inertialRef = React26.useRef(false);
-  const inertiaRafRef = React26.useRef(null);
-  const inertiaVelocityRef = React26.useRef(0);
-  const inertiaLastTimeRef = React26.useRef(0);
-  const moveSamplesRef = React26.useRef([]);
-  const ui = React26.useMemo(() => {
+  const rafRef = React27.useRef(0);
+  const lastVirtualIndexRef = React27.useRef(null);
+  const wheelDeltaRef = React27.useRef(0);
+  const scrollEndTimeoutRef = React27.useRef(null);
+  const suppressScrollSelectUntilRef = React27.useRef(0);
+  const suppressItemClickUntilRef = React27.useRef(0);
+  const dragRef = React27.useRef(null);
+  const draggingRef = React27.useRef(false);
+  const inertialRef = React27.useRef(false);
+  const inertiaRafRef = React27.useRef(null);
+  const inertiaVelocityRef = React27.useRef(0);
+  const inertiaLastTimeRef = React27.useRef(0);
+  const moveSamplesRef = React27.useRef([]);
+  const ui = React27.useMemo(() => {
     if (size === "sm") {
       return {
         columnWidth: column === "month" ? "min-w-24 max-w-32" : "min-w-16 max-w-20",
@@ -7576,9 +7594,9 @@ function WheelColumn({
       fadeHeight: "h-12"
     };
   }, [size, column]);
-  const baseOffset = React26.useMemo(() => loop ? items.length : 0, [items.length, loop]);
-  const extendedItems = React26.useMemo(() => loop ? [...items, ...items, ...items] : items, [items, loop]);
-  const getNearestVirtualIndex = React26.useCallback(
+  const baseOffset = React27.useMemo(() => loop ? items.length : 0, [items.length, loop]);
+  const extendedItems = React27.useMemo(() => loop ? [...items, ...items, ...items] : items, [items, loop]);
+  const getNearestVirtualIndex = React27.useCallback(
     (realIndex, fromVirtual) => {
       const len = items.length;
       if (len <= 0) return 0;
@@ -7597,7 +7615,7 @@ function WheelColumn({
     },
     [items.length, loop]
   );
-  React26.useLayoutEffect(() => {
+  React27.useLayoutEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
     const maxVirtual = Math.max(0, extendedItems.length - 1);
@@ -7625,7 +7643,7 @@ function WheelColumn({
       cancelAnimationFrame(rafRef.current);
     };
   }, [animate, baseOffset, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
     const lastWheelSignRef = { current: 0 };
@@ -7713,13 +7731,13 @@ function WheelColumn({
       }, 120);
     });
   };
-  const currentVirtual = React26.useMemo(() => {
+  const currentVirtual = React27.useMemo(() => {
     if (!loop || items.length <= 0) return valueIndex;
     const fallback = baseOffset + valueIndex;
     const from = lastVirtualIndexRef.current ?? fallback;
     return getNearestVirtualIndex(valueIndex, from);
   }, [baseOffset, getNearestVirtualIndex, items.length, loop, valueIndex]);
-  const commitFromScrollTop = React26.useCallback(
+  const commitFromScrollTop = React27.useCallback(
     (behavior) => {
       const el = scrollRef.current;
       if (!el) return;
@@ -7797,7 +7815,7 @@ function WheelColumn({
       if (dt > 0) inertiaVelocityRef.current = (el.scrollTop - oldest.top) / dt;
     }
   };
-  const startInertia = React26.useCallback(() => {
+  const startInertia = React27.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
     if (items.length <= 0) return;
@@ -7988,22 +8006,22 @@ function MonthYearPicker({
   };
   const isControlled = value !== void 0;
   const initial = parseValue(isControlled ? value : defaultValue) ?? { month: now.getMonth(), year: currentYear };
-  const [open, setOpen] = React26.useState(false);
-  const [parts, setParts] = React26.useState(initial);
-  const [focusedColumn, setFocusedColumn] = React26.useState(null);
-  const monthScrollRef = React26.useRef(null);
-  const yearScrollRef = React26.useRef(null);
-  React26.useEffect(() => {
+  const [open, setOpen] = React27.useState(false);
+  const [parts, setParts] = React27.useState(initial);
+  const [focusedColumn, setFocusedColumn] = React27.useState(null);
+  const monthScrollRef = React27.useRef(null);
+  const yearScrollRef = React27.useRef(null);
+  React27.useEffect(() => {
     if (isControlled) {
       const parsed = parseValue(value);
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled]);
-  const years = React26.useMemo(() => {
+  const years = React27.useMemo(() => {
     return Array.from({ length: resolvedMaxYear - resolvedMinYear + 1 }, (_, i) => resolvedMinYear + i);
   }, [resolvedMinYear, resolvedMaxYear]);
-  const months = React26.useMemo(() => Array.from({ length: 12 }, (_, i) => i), []);
-  const isDateInRange = React26.useCallback(
+  const months = React27.useMemo(() => Array.from({ length: 12 }, (_, i) => i), []);
+  const isDateInRange = React27.useCallback(
     (month, year) => {
       if (minDate) {
         const minMonth = minDate.getMonth();
@@ -8019,7 +8037,7 @@ function MonthYearPicker({
     },
     [minDate, maxDate]
   );
-  const emit = React26.useCallback(
+  const emit = React27.useCallback(
     (next) => {
       if (!next) {
         onChange?.(void 0);
@@ -8031,7 +8049,7 @@ function MonthYearPicker({
     },
     [isDateInRange, onChange]
   );
-  const tryUpdate = React26.useCallback(
+  const tryUpdate = React27.useCallback(
     (next) => {
       if (!isDateInRange(next.month, next.year)) return false;
       setParts(next);
@@ -8422,12 +8440,12 @@ function Calendar3({
   ...rest
 }) {
   const isControlledMonth = month != null;
-  const [view, setView] = React27.useState(() => month ?? defaultMonth ?? /* @__PURE__ */ new Date());
-  React27.useEffect(() => {
+  const [view, setView] = React28.useState(() => month ?? defaultMonth ?? /* @__PURE__ */ new Date());
+  React28.useEffect(() => {
     if (isControlledMonth && month) setView(month);
   }, [isControlledMonth, month]);
   const isControlledValue = value !== void 0;
-  const [internal, setInternal] = React27.useState(defaultValue);
+  const [internal, setInternal] = React28.useState(defaultValue);
   const selected = isControlledValue ? value : internal;
   const goByView = (delta) => {
     const next = display === "week" ? addDays(view, delta * 7) : addMonths(view, delta);
@@ -8439,7 +8457,7 @@ function Calendar3({
   const weekdays = rotate(weekNames, weekStartsOn);
   const days = getMonthGrid(view, weekStartsOn);
   const today = /* @__PURE__ */ new Date();
-  const byDay = React27.useMemo(() => {
+  const byDay = React28.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const e of events) {
       const d = toDate(e.date);
@@ -8451,11 +8469,11 @@ function Calendar3({
   }, [events]);
   const effectiveEnableEventSheet = enableEventSheet ?? !!renderEventSheet;
   const isEventSheetOpenControlled = eventSheetOpen !== void 0;
-  const [internalEventSheetOpen, setInternalEventSheetOpen] = React27.useState(false);
+  const [internalEventSheetOpen, setInternalEventSheetOpen] = React28.useState(false);
   const activeEventSheetOpen = isEventSheetOpenControlled ? !!eventSheetOpen : internalEventSheetOpen;
   const isSelectedEventControlled = selectedEventId !== void 0;
-  const [internalSelectedEventRef, setInternalSelectedEventRef] = React27.useState(null);
-  const setEventSheetOpen = React27.useCallback(
+  const [internalSelectedEventRef, setInternalSelectedEventRef] = React28.useState(null);
+  const setEventSheetOpen = React28.useCallback(
     (open) => {
       if (!isEventSheetOpenControlled) setInternalEventSheetOpen(open);
       onEventSheetOpenChange?.(open);
@@ -8466,7 +8484,7 @@ function Calendar3({
     },
     [isEventSheetOpenControlled, isSelectedEventControlled, onEventSheetOpenChange, onSelectedEventIdChange]
   );
-  const selectedEventRef = React27.useMemo(() => {
+  const selectedEventRef = React28.useMemo(() => {
     if (isSelectedEventControlled && selectedEventId != null) {
       const ev = events.find((e) => e.id === selectedEventId);
       if (!ev) return null;
@@ -8476,7 +8494,7 @@ function Calendar3({
     }
     return internalSelectedEventRef;
   }, [events, internalSelectedEventRef, isSelectedEventControlled, selectedEventId]);
-  const selectedEvent = React27.useMemo(() => {
+  const selectedEvent = React28.useMemo(() => {
     if (!selectedEventRef) return null;
     const list = byDay.get(selectedEventRef.dayKey) || [];
     if (selectedEventRef.eventId != null) {
@@ -8485,13 +8503,13 @@ function Calendar3({
     const idx = selectedEventRef.index ?? -1;
     return idx >= 0 && idx < list.length ? list[idx] : null;
   }, [byDay, selectedEventRef]);
-  const selectedEventDate = React27.useMemo(() => {
+  const selectedEventDate = React28.useMemo(() => {
     if (!selectedEventRef) return null;
     const [y, m, d] = selectedEventRef.dayKey.split("-").map((x) => Number(x));
     if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null;
     return new Date(y, m, d);
   }, [selectedEventRef]);
-  const handleEventActivate = React27.useCallback(
+  const handleEventActivate = React28.useCallback(
     (event, date, dayKey, index) => {
       onEventClick?.(event, date);
       onSelectedEventIdChange?.(event.id ?? void 0);
@@ -8544,7 +8562,7 @@ function Calendar3({
       }
     }
   };
-  const isDateDisabled = React27.useCallback(
+  const isDateDisabled = React28.useCallback(
     (d) => {
       if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
       if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
@@ -8578,7 +8596,7 @@ function Calendar3({
     card: "border border-border/50 rounded-3xl bg-linear-to-br from-card via-background/95 to-card shadow-lg hover:shadow-xl transition-shadow duration-300 backdrop-blur-md",
     minimal: "bg-transparent"
   };
-  const weekDays = React27.useMemo(() => {
+  const weekDays = React28.useMemo(() => {
     const s = startOfWeek(view, weekStartsOn);
     return Array.from({ length: 7 }, (_, i) => addDays(s, i));
   }, [view, weekStartsOn]);
@@ -8599,7 +8617,7 @@ function Calendar3({
         const holidayMatch = isHoliday(d, holidays);
         const isHolidayDay = highlightHolidays && !!holidayMatch;
         const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
-        if (customDay) return /* @__PURE__ */ jsx33(React27.Fragment, { children: customDay }, `${monthLabel}-${idx}`);
+        if (customDay) return /* @__PURE__ */ jsx33(React28.Fragment, { children: customDay }, `${monthLabel}-${idx}`);
         if (cellMode === "events") {
           const limit = Math.max(0, maxEventsPerDay);
           const visibleEvents = dayEvents.slice(0, limit);
@@ -8718,9 +8736,9 @@ function Calendar3({
       }) })
     ] });
   };
-  const minBound = React27.useMemo(() => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()) : void 0, [minDate]);
-  const maxBound = React27.useMemo(() => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()) : void 0, [maxDate]);
-  const prevDisabled = React27.useMemo(() => {
+  const minBound = React28.useMemo(() => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()) : void 0, [minDate]);
+  const maxBound = React28.useMemo(() => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()) : void 0, [maxDate]);
+  const prevDisabled = React28.useMemo(() => {
     if (!minBound) return false;
     if (display === "week") {
       const start = startOfWeek(view, weekStartsOn);
@@ -8730,7 +8748,7 @@ function Calendar3({
     const prevEnd = endOfMonth(addMonths(view, -1));
     return prevEnd < minBound;
   }, [display, view, weekStartsOn, minBound]);
-  const nextDisabled = React27.useMemo(() => {
+  const nextDisabled = React28.useMemo(() => {
     if (!maxBound) return false;
     if (display === "week") {
       const start = startOfWeek(view, weekStartsOn);
@@ -8807,7 +8825,7 @@ function Calendar3({
         const holidayMatch = isHoliday(d, holidays);
         const isHolidayDay = highlightHolidays && !!holidayMatch;
         const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
-        if (customDay) return /* @__PURE__ */ jsx33(React27.Fragment, { children: customDay }, `wd-${idx}`);
+        if (customDay) return /* @__PURE__ */ jsx33(React28.Fragment, { children: customDay }, `wd-${idx}`);
         if (cellMode === "events") {
           const limit = Math.max(0, maxEventsPerDay);
           const visibleEvents = dayEvents.slice(0, limit);
@@ -8918,7 +8936,7 @@ function Calendar3({
           `wd-${idx}`
         );
       }) })
-    ] }) : /* @__PURE__ */ jsx33("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ jsx33(React27.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) }),
+    ] }) : /* @__PURE__ */ jsx33("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ jsx33(React28.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) }),
     effectiveEnableEventSheet && selectedEvent && selectedEventDate ? /* @__PURE__ */ jsx33(
       Sheet,
       {
@@ -8948,7 +8966,7 @@ function Calendar3({
 }
 
 // src/components/TimePicker.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { Clock as Clock2, X as X10, Check as Check5, Sun, Moon, Sunset, Coffee } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var pad = (n) => n.toString().padStart(2, "0");
@@ -8975,21 +8993,21 @@ function WheelColumn2({
 }) {
   const height = itemHeight * WHEEL_VISIBLE_ITEMS2;
   const paddingY = (height - itemHeight) / 2;
-  const rafRef = React28.useRef(0);
-  const lastVirtualIndexRef = React28.useRef(null);
-  const wheelDeltaRef = React28.useRef(0);
-  const scrollEndTimeoutRef = React28.useRef(null);
-  const suppressScrollSelectUntilRef = React28.useRef(0);
-  const suppressItemClickUntilRef = React28.useRef(0);
-  const dragRef = React28.useRef(null);
-  const draggingRef = React28.useRef(false);
-  const inertialRef = React28.useRef(false);
-  const inertiaRafRef = React28.useRef(null);
-  const inertiaVelocityRef = React28.useRef(0);
-  const inertiaLastTimeRef = React28.useRef(0);
-  const moveSamplesRef = React28.useRef([]);
+  const rafRef = React29.useRef(0);
+  const lastVirtualIndexRef = React29.useRef(null);
+  const wheelDeltaRef = React29.useRef(0);
+  const scrollEndTimeoutRef = React29.useRef(null);
+  const suppressScrollSelectUntilRef = React29.useRef(0);
+  const suppressItemClickUntilRef = React29.useRef(0);
+  const dragRef = React29.useRef(null);
+  const draggingRef = React29.useRef(false);
+  const inertialRef = React29.useRef(false);
+  const inertiaRafRef = React29.useRef(null);
+  const inertiaVelocityRef = React29.useRef(0);
+  const inertiaLastTimeRef = React29.useRef(0);
+  const moveSamplesRef = React29.useRef([]);
   const loop = true;
-  const ui = React28.useMemo(() => {
+  const ui = React29.useMemo(() => {
     if (size === "sm") {
       return {
         columnWidth: "min-w-16 max-w-21",
@@ -9016,9 +9034,9 @@ function WheelColumn2({
       fadeHeight: "h-12"
     };
   }, [size]);
-  const baseOffset = React28.useMemo(() => loop ? items.length : 0, [items.length, loop]);
-  const extendedItems = React28.useMemo(() => loop ? [...items, ...items, ...items] : items, [items, loop]);
-  const getNearestVirtualIndex = React28.useCallback(
+  const baseOffset = React29.useMemo(() => loop ? items.length : 0, [items.length, loop]);
+  const extendedItems = React29.useMemo(() => loop ? [...items, ...items, ...items] : items, [items, loop]);
+  const getNearestVirtualIndex = React29.useCallback(
     (realIndex, fromVirtual) => {
       const len = items.length;
       if (len <= 0) return 0;
@@ -9037,7 +9055,7 @@ function WheelColumn2({
     },
     [items.length, loop]
   );
-  React28.useLayoutEffect(() => {
+  React29.useLayoutEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
     const maxVirtual = Math.max(0, extendedItems.length - 1);
@@ -9065,7 +9083,7 @@ function WheelColumn2({
       cancelAnimationFrame(rafRef.current);
     };
   }, [animate, baseOffset, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
     const lastWheelSignRef = { current: 0 };
@@ -9153,13 +9171,13 @@ function WheelColumn2({
       }, 120);
     });
   };
-  const currentVirtual = React28.useMemo(() => {
+  const currentVirtual = React29.useMemo(() => {
     if (!loop || items.length <= 0) return valueIndex;
     const fallback = baseOffset + valueIndex;
     const from = lastVirtualIndexRef.current ?? fallback;
     return getNearestVirtualIndex(valueIndex, from);
   }, [baseOffset, getNearestVirtualIndex, items.length, loop, valueIndex]);
-  const commitFromScrollTop = React28.useCallback(
+  const commitFromScrollTop = React29.useCallback(
     (behavior) => {
       const el = scrollRef.current;
       if (!el) return;
@@ -9237,7 +9255,7 @@ function WheelColumn2({
       if (dt > 0) inertiaVelocityRef.current = (el.scrollTop - oldest.top) / dt;
     }
   };
-  const startInertia = React28.useCallback(() => {
+  const startInertia = React29.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
     if (items.length <= 0) return;
@@ -9439,20 +9457,20 @@ function TimePicker({
   const isControlled = value !== void 0;
   const now = /* @__PURE__ */ new Date();
   const initial = parseTime(isControlled ? value : defaultValue, format, includeSeconds) || (format === "12" ? { h: now.getHours() % 12 || 12, m: now.getMinutes(), s: now.getSeconds(), p: now.getHours() >= 12 ? "PM" : "AM" } : { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() });
-  const [open, setOpen] = React28.useState(false);
-  const [parts, setParts] = React28.useState(initial);
-  const [manualInput, setManualInput] = React28.useState("");
-  const [focusedColumn, setFocusedColumn] = React28.useState(null);
-  const hourScrollRef = React28.useRef(null);
-  const minuteScrollRef = React28.useRef(null);
-  const secondScrollRef = React28.useRef(null);
-  React28.useEffect(() => {
+  const [open, setOpen] = React29.useState(false);
+  const [parts, setParts] = React29.useState(initial);
+  const [manualInput, setManualInput] = React29.useState("");
+  const [focusedColumn, setFocusedColumn] = React29.useState(null);
+  const hourScrollRef = React29.useRef(null);
+  const minuteScrollRef = React29.useRef(null);
+  const secondScrollRef = React29.useRef(null);
+  React29.useEffect(() => {
     if (isControlled) {
       const parsed = parseTime(value, format, includeSeconds);
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled, format, includeSeconds]);
-  const isTimeDisabled = React28.useCallback(
+  const isTimeDisabled = React29.useCallback(
     (timeStr) => {
       if (!disabledTimes) return false;
       if (typeof disabledTimes === "function") return disabledTimes(timeStr);
@@ -9462,7 +9480,7 @@ function TimePicker({
   );
   const resolvedMinTime = minTime ?? min;
   const resolvedMaxTime = maxTime ?? max;
-  const toSeconds = React28.useCallback(
+  const toSeconds = React29.useCallback(
     (p) => {
       let h = p.h;
       if (format === "12") {
@@ -9474,7 +9492,7 @@ function TimePicker({
     },
     [format, includeSeconds]
   );
-  const isTimeInRange = React28.useCallback(
+  const isTimeInRange = React29.useCallback(
     (timeStr) => {
       if (!resolvedMinTime && !resolvedMaxTime) return true;
       const parsed = parseTime(timeStr, format, includeSeconds);
@@ -9492,7 +9510,7 @@ function TimePicker({
     },
     [format, includeSeconds, resolvedMaxTime, resolvedMinTime, toSeconds]
   );
-  const canEmit = React28.useCallback(
+  const canEmit = React29.useCallback(
     (next) => {
       const timeStr = next ? formatTime2(next, format, includeSeconds) : void 0;
       if (!timeStr) return true;
@@ -9502,7 +9520,7 @@ function TimePicker({
     },
     [format, includeSeconds, isTimeDisabled, isTimeInRange]
   );
-  const emit = React28.useCallback(
+  const emit = React29.useCallback(
     (next) => {
       const timeStr = next ? formatTime2(next, format, includeSeconds) : void 0;
       if (!canEmit(next)) return;
@@ -9510,7 +9528,7 @@ function TimePicker({
     },
     [canEmit, format, includeSeconds, onChange]
   );
-  const tryUpdate = React28.useCallback(
+  const tryUpdate = React29.useCallback(
     (next) => {
       if (!canEmit(next)) return false;
       setParts(next);
@@ -10074,7 +10092,7 @@ var DateTimePicker = ({
 }) => {
   const t = useSmartTranslations("DateTimePicker");
   const locale = useSmartLocale();
-  const [open, setOpen] = React29.useState(false);
+  const [open, setOpen] = React30.useState(false);
   const sizeStyles8 = {
     sm: {
       trigger: "h-8 px-2.5 py-1.5 text-sm md:h-7 md:text-xs",
@@ -10107,9 +10125,9 @@ var DateTimePicker = ({
       gap: "gap-4"
     }
   };
-  const [tempDate, setTempDate] = React29.useState(value);
-  const [calendarMonth, setCalendarMonth] = React29.useState(() => value ?? /* @__PURE__ */ new Date());
-  React29.useEffect(() => {
+  const [tempDate, setTempDate] = React30.useState(value);
+  const [calendarMonth, setCalendarMonth] = React30.useState(() => value ?? /* @__PURE__ */ new Date());
+  React30.useEffect(() => {
     setTempDate(value);
     setCalendarMonth(value ?? /* @__PURE__ */ new Date());
   }, [value, open]);
@@ -10302,7 +10320,7 @@ var DateTimePicker = ({
 };
 
 // src/components/CalendarTimeline/CalendarTimeline.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { Plus as Plus2 } from "lucide-react";
 
 // src/components/CalendarTimeline/date.ts
@@ -10542,10 +10560,10 @@ function intervalPack(items) {
 }
 
 // src/components/CalendarTimeline/hooks.ts
-import * as React30 from "react";
+import * as React31 from "react";
 function useHorizontalScrollSync(args) {
   const { bodyRef, headerRef, leftRef } = args;
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     const body = bodyRef.current;
     const header = headerRef.current;
     const left = leftRef?.current ?? null;
@@ -10603,9 +10621,9 @@ function lowerBound(arr, target) {
 function useVirtualVariableRows(args) {
   const { enabled, overscan, rowHeights, scrollRef } = args;
   const itemCount = rowHeights.length;
-  const [viewportHeight, setViewportHeight] = React30.useState(0);
-  const [scrollTop, setScrollTop] = React30.useState(0);
-  React30.useEffect(() => {
+  const [viewportHeight, setViewportHeight] = React31.useState(0);
+  const [scrollTop, setScrollTop] = React31.useState(0);
+  React31.useEffect(() => {
     if (!enabled) {
       setViewportHeight(0);
       return;
@@ -10618,7 +10636,7 @@ function useVirtualVariableRows(args) {
     ro.observe(el);
     return () => ro.disconnect();
   }, [enabled, scrollRef]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (!enabled) {
       setScrollTop(0);
       return;
@@ -10643,7 +10661,7 @@ function useVirtualVariableRows(args) {
       el.removeEventListener("scroll", onScroll);
     };
   }, [enabled, scrollRef]);
-  const prefix = React30.useMemo(() => {
+  const prefix = React31.useMemo(() => {
     const out = new Array(itemCount + 1);
     out[0] = 0;
     for (let i = 0; i < itemCount; i++) {
@@ -10651,7 +10669,7 @@ function useVirtualVariableRows(args) {
     }
     return out;
   }, [itemCount, rowHeights]);
-  return React30.useMemo(() => {
+  return React31.useMemo(() => {
     if (!enabled) {
       return { startIndex: 0, endIndex: itemCount, topSpacer: 0, bottomSpacer: 0, totalHeight: prefix[itemCount] ?? 0 };
     }
@@ -10667,8 +10685,8 @@ function useVirtualVariableRows(args) {
   }, [enabled, itemCount, overscan, prefix, scrollTop, viewportHeight]);
 }
 function useClientWidth(ref) {
-  const [width, setWidth] = React30.useState(0);
-  React30.useEffect(() => {
+  const [width, setWidth] = React31.useState(0);
+  React31.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const update = () => setWidth(el.clientWidth);
@@ -10891,7 +10909,7 @@ function resourcesById(resources) {
 }
 
 // src/components/CalendarTimeline/CalendarTimelineHeader.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { Calendar as Calendar4, CalendarDays, CalendarRange, ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight5, GripVertical, Plus } from "lucide-react";
 import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 var VIEW_ICONS = {
@@ -10922,7 +10940,7 @@ function CalendarTimelineHeader(props) {
     headerRef,
     slotHeaderNodes
   } = props;
-  const resolvedAvailableViews = React31.useMemo(
+  const resolvedAvailableViews = React32.useMemo(
     () => availableViews?.length ? availableViews : ["month", "week", "day", "sprint"],
     [availableViews]
   );
@@ -10930,22 +10948,22 @@ function CalendarTimelineHeader(props) {
   const showLeftColumn = showResourceColumn ?? true;
   const dt = useSmartTranslations("DateTimePicker");
   const locale = useSmartLocale();
-  const [todayOpen, setTodayOpen] = React31.useState(false);
-  const [tempDate, setTempDate] = React31.useState(() => now);
-  const [calendarMonth, setCalendarMonth] = React31.useState(() => now);
-  React31.useEffect(() => {
+  const [todayOpen, setTodayOpen] = React32.useState(false);
+  const [tempDate, setTempDate] = React32.useState(() => now);
+  const [calendarMonth, setCalendarMonth] = React32.useState(() => now);
+  React32.useEffect(() => {
     if (!todayOpen) return;
     setTempDate(now);
     setCalendarMonth(now);
   }, [now, todayOpen]);
-  const monthLabel = React31.useCallback(
+  const monthLabel = React32.useCallback(
     (date) => date.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", {
       month: "long",
       year: "numeric"
     }),
     [locale]
   );
-  const weekdays = React31.useMemo(() => {
+  const weekdays = React32.useMemo(() => {
     switch (locale) {
       case "vi":
         return ["CN", "T2", "T3", "T4", "T5", "T6", "T7"];
@@ -10957,12 +10975,12 @@ function CalendarTimelineHeader(props) {
         return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
     }
   }, [locale]);
-  const getTimeString = React31.useCallback((date) => {
+  const getTimeString = React32.useCallback((date) => {
     const h = date.getHours();
     const m = date.getMinutes();
     return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
   }, []);
-  const handleDateSelect = React31.useCallback((date) => {
+  const handleDateSelect = React32.useCallback((date) => {
     if (!(date instanceof Date)) return;
     setTempDate((prev) => {
       const next = new Date(date);
@@ -10970,7 +10988,7 @@ function CalendarTimelineHeader(props) {
       return next;
     });
   }, []);
-  const handleTimeChange = React31.useCallback((timeStr) => {
+  const handleTimeChange = React32.useCallback((timeStr) => {
     if (!timeStr) return;
     const [hStr, mStr] = timeStr.split(":");
     const h = parseInt(hStr, 10);
@@ -10982,7 +11000,7 @@ function CalendarTimelineHeader(props) {
       return next;
     });
   }, []);
-  const applyDateTime = React31.useCallback(() => {
+  const applyDateTime = React32.useCallback(() => {
     onApplyDateTime(tempDate);
     setTodayOpen(false);
   }, [onApplyDateTime, tempDate]);
@@ -11245,9 +11263,9 @@ function ResourceRowCell(props) {
 }
 
 // src/components/CalendarTimeline/CalendarTimelineGridOverlay.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
-var CalendarTimelineGridOverlay = React32.memo(function CalendarTimelineGridOverlay2(props) {
+var CalendarTimelineGridOverlay = React33.memo(function CalendarTimelineGridOverlay2(props) {
   const {
     gridWidth,
     height,
@@ -11295,12 +11313,12 @@ var CalendarTimelineGridOverlay = React32.memo(function CalendarTimelineGridOver
 });
 
 // src/components/CalendarTimeline/CalendarTimelineSlotHeaderCell.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { Dot } from "lucide-react";
 import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
-var CalendarTimelineSlotHeaderCell = React33.memo(function CalendarTimelineSlotHeaderCell2(props) {
+var CalendarTimelineSlotHeaderCell = React34.memo(function CalendarTimelineSlotHeaderCell2(props) {
   const { width, activeView, isToday: isToday2, label, ariaLabel, borderClassName, dayHeaderMarks, idx, className } = props;
-  const content = React33.useMemo(() => {
+  const content = React34.useMemo(() => {
     if (activeView === "day" && dayHeaderMarks) {
       if (dayHeaderMarks.showEllipsis[idx]) return /* @__PURE__ */ jsx40("span", { className: "text-xs text-muted-foreground/70 select-none", children: "\u2026" });
       if (!dayHeaderMarks.showTime[idx]) return null;
@@ -11323,7 +11341,7 @@ var CalendarTimelineSlotHeaderCell = React33.memo(function CalendarTimelineSlotH
 });
 
 // src/components/CalendarTimeline/internal-hooks.ts
-import * as React34 from "react";
+import * as React35 from "react";
 function useTimelineSlots(args) {
   const {
     activeView,
@@ -11338,7 +11356,7 @@ function useTimelineSlots(args) {
     formatters,
     dueDateSprint
   } = args;
-  const { slots, range } = React34.useMemo(() => {
+  const { slots, range } = React35.useMemo(() => {
     const { start, end, slotStarts: slotStarts2 } = computeSlotStarts({
       view: activeView,
       date: activeDate,
@@ -11393,18 +11411,18 @@ function useTimelineSlots(args) {
         const match = matchSprintDef(s, idx);
         if (match && sprintRangeText) {
           const rangeText = sprintRangeText(match.startMs, match.endMs);
-          return React34.createElement(
+          return React35.createElement(
             "span",
             { className: "inline-flex flex-col items-center leading-tight" },
-            React34.createElement("span", { className: "text-[11px] font-semibold text-foreground truncate max-w-32" }, match.title),
-            React34.createElement("span", { className: "text-[10px] font-medium text-muted-foreground/70" }, rangeText)
+            React35.createElement("span", { className: "text-[11px] font-semibold text-foreground truncate max-w-32" }, match.title),
+            React35.createElement("span", { className: "text-[10px] font-medium text-muted-foreground/70" }, rangeText)
           );
         }
-        return React34.createElement(
+        return React35.createElement(
           "span",
           { className: "inline-flex flex-col items-center leading-tight" },
-          React34.createElement("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70" }, "S"),
-          React34.createElement("span", { className: "text-sm font-semibold text-foreground" }, String(idx + 1).padStart(2, "0"))
+          React35.createElement("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70" }, "S"),
+          React35.createElement("span", { className: "text-sm font-semibold text-foreground" }, String(idx + 1).padStart(2, "0"))
         );
       })(),
       isToday: (() => {
@@ -11432,9 +11450,9 @@ function useTimelineSlots(args) {
     weekStartsOn,
     workHours
   ]);
-  const slotStarts = React34.useMemo(() => slots.map((s) => s.start), [slots]);
-  const todaySlotIdx = React34.useMemo(() => slots.findIndex((s) => s.isToday), [slots]);
-  const weekendSlotIdxs = React34.useMemo(() => {
+  const slotStarts = React35.useMemo(() => slots.map((s) => s.start), [slots]);
+  const todaySlotIdx = React35.useMemo(() => slots.findIndex((s) => s.isToday), [slots]);
+  const weekendSlotIdxs = React35.useMemo(() => {
     const out = [];
     for (let i = 0; i < slots.length; i++) if (slots[i]?.isWeekend) out.push(i);
     return out;
@@ -11443,16 +11461,16 @@ function useTimelineSlots(args) {
 }
 function useNormalizedEvents(args) {
   const { events, range, activeView, resolvedTimeZone, resources } = args;
-  const normalizedEvents = React34.useMemo(() => {
+  const normalizedEvents = React35.useMemo(() => {
     return normalizeEvents({ events, range, view: activeView, timeZone: resolvedTimeZone });
   }, [activeView, events, range, resolvedTimeZone]);
-  const eventsByResource = React34.useMemo(() => eventsByResourceId(normalizedEvents), [normalizedEvents]);
-  const resourceById = React34.useMemo(() => resourcesById(resources), [resources]);
+  const eventsByResource = React35.useMemo(() => eventsByResourceId(normalizedEvents), [normalizedEvents]);
+  const resourceById = React35.useMemo(() => resourcesById(resources), [resources]);
   return { normalizedEvents, eventsByResource, resourceById };
 }
 function useDayHeaderMarks(args) {
   const { enabled, activeView, normalizedEvents, slotStarts, slotCount } = args;
-  return React34.useMemo(() => {
+  return React35.useMemo(() => {
     if (!enabled) return null;
     if (activeView !== "day") return null;
     const n = slotCount;
@@ -11487,14 +11505,14 @@ function useSlotMetrics(args) {
     dayHeaderSmart,
     daySlotCompression
   } = args;
-  const fixedSlotWidth = React34.useMemo(() => {
+  const fixedSlotWidth = React35.useMemo(() => {
     const baseSlotWidth = activeView === "month" || activeView === "day" ? effectiveSlotMinWidth * 3 : effectiveSlotMinWidth;
     if (activeView !== "week") return baseSlotWidth;
     if (bodyClientWidth <= 0) return baseSlotWidth;
     if (slotsLength <= 0) return baseSlotWidth;
     return Math.max(baseSlotWidth, bodyClientWidth / slotsLength);
   }, [activeView, bodyClientWidth, effectiveSlotMinWidth, slotsLength]);
-  const slotMetrics = React34.useMemo(() => {
+  const slotMetrics = React35.useMemo(() => {
     const n = slotsLength;
     const widths = new Array(n).fill(fixedSlotWidth);
     const isAdaptiveView = activeView === "month" || activeView === "day";
@@ -11624,7 +11642,7 @@ function useSlotMetrics(args) {
 }
 function useLayoutsByResource(args) {
   const { eventsByResource, preview, slotStarts, slotsLength, slotLefts, getResourceRowHeight, laneGap, lanePaddingY, effectiveMaxLanesPerRow, eventHeight } = args;
-  return React34.useMemo(() => {
+  return React35.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const [resourceId, list] of eventsByResource.entries()) {
       const mapped = list.map((ev) => {
@@ -11671,9 +11689,9 @@ function lowerBound2(arr, target) {
 }
 function useVisibleSlotRange(args) {
   const { enabled, overscan, scrollRef, slotLefts, slotCount } = args;
-  const [scrollLeft, setScrollLeft] = React34.useState(0);
-  const [viewportWidth, setViewportWidth] = React34.useState(0);
-  React34.useEffect(() => {
+  const [scrollLeft, setScrollLeft] = React35.useState(0);
+  const [viewportWidth, setViewportWidth] = React35.useState(0);
+  React35.useEffect(() => {
     if (!enabled) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -11700,7 +11718,7 @@ function useVisibleSlotRange(args) {
       el.removeEventListener("scroll", onScroll);
     };
   }, [enabled, scrollRef]);
-  return React34.useMemo(() => {
+  return React35.useMemo(() => {
     if (!enabled) return { startIdx: 0, endIdx: slotCount };
     if (slotCount <= 0) return { startIdx: 0, endIdx: 0 };
     if (viewportWidth <= 0) return { startIdx: 0, endIdx: slotCount };
@@ -11797,14 +11815,14 @@ function CalendarTimeline({
 }) {
   const t = useSmartTranslations("CalendarTimeline");
   const detectedLocale = useSmartLocale();
-  const resolvedLocale = React35.useMemo(() => localeToBCP47(locale ?? detectedLocale), [locale, detectedLocale]);
-  const resolvedTimeZone = React35.useMemo(() => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC", [timeZone]);
+  const resolvedLocale = React36.useMemo(() => localeToBCP47(locale ?? detectedLocale), [locale, detectedLocale]);
+  const resolvedTimeZone = React36.useMemo(() => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC", [timeZone]);
   const effectiveEnableEventSheet = enableEventSheet ?? Boolean(renderEventSheet);
   const isViewOnly = interactions?.mode === "view";
   const isControlledSelectedEventId = selectedEventId !== void 0;
-  const [internalSelectedEventId, setInternalSelectedEventId] = React35.useState(defaultSelectedEventId ?? null);
+  const [internalSelectedEventId, setInternalSelectedEventId] = React36.useState(defaultSelectedEventId ?? null);
   const activeSelectedEventId = isControlledSelectedEventId ? selectedEventId : internalSelectedEventId;
-  const setSelectedEventId = React35.useCallback(
+  const setSelectedEventId = React36.useCallback(
     (next) => {
       if (!isControlledSelectedEventId) setInternalSelectedEventId(next);
       onSelectedEventIdChange?.(next);
@@ -11812,9 +11830,9 @@ function CalendarTimeline({
     [isControlledSelectedEventId, onSelectedEventIdChange]
   );
   const isControlledEventSheetOpen = eventSheetOpen !== void 0;
-  const [internalEventSheetOpen, setInternalEventSheetOpen] = React35.useState(defaultEventSheetOpen ?? false);
+  const [internalEventSheetOpen, setInternalEventSheetOpen] = React36.useState(defaultEventSheetOpen ?? false);
   const activeEventSheetOpen = isControlledEventSheetOpen ? Boolean(eventSheetOpen) : internalEventSheetOpen;
-  const setEventSheetOpen = React35.useCallback(
+  const setEventSheetOpen = React36.useCallback(
     (next) => {
       if (!isControlledEventSheetOpen) setInternalEventSheetOpen(next);
       onEventSheetOpenChange?.(next);
@@ -11823,12 +11841,12 @@ function CalendarTimeline({
     [isControlledEventSheetOpen, onEventSheetOpenChange, setSelectedEventId]
   );
   const showResourceColumn = !hideResourceColumn;
-  const sizeConfig = React35.useMemo(() => getSizeConfig(size), [size]);
+  const sizeConfig = React36.useMemo(() => getSizeConfig(size), [size]);
   const densityClass = sizeConfig.densityClass;
   const eventHeight = sizeConfig.eventHeight;
   const laneGap = sizeConfig.laneGap;
   const lanePaddingY = sizeConfig.lanePaddingY;
-  const canResizeColumn = React35.useMemo(() => {
+  const canResizeColumn = React36.useMemo(() => {
     const cfg = enableLayoutResize;
     if (!cfg) return false;
     if (isViewOnly) return false;
@@ -11836,7 +11854,7 @@ function CalendarTimeline({
     if (cfg === true) return true;
     return cfg.column !== false;
   }, [enableLayoutResize, isViewOnly, showResourceColumn]);
-  const canResizeRow = React35.useMemo(() => {
+  const canResizeRow = React36.useMemo(() => {
     const cfg = enableLayoutResize;
     if (!cfg) return false;
     if (isViewOnly) return false;
@@ -11845,19 +11863,19 @@ function CalendarTimeline({
     return cfg.row !== false;
   }, [enableLayoutResize, isViewOnly, showResourceColumn]);
   const isControlledResourceColumnWidth = resourceColumnWidth !== void 0;
-  const [internalResourceColumnWidth, setInternalResourceColumnWidth] = React35.useState(() => {
+  const [internalResourceColumnWidth, setInternalResourceColumnWidth] = React36.useState(() => {
     const init = defaultResourceColumnWidth ?? sizeConfig.resourceColumnWidth;
     return typeof init === "number" ? init : sizeConfig.resourceColumnWidth;
   });
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (isControlledResourceColumnWidth) return;
     if (defaultResourceColumnWidth == null) return;
     setInternalResourceColumnWidth(defaultResourceColumnWidth);
   }, [defaultResourceColumnWidth, isControlledResourceColumnWidth]);
   const effectiveResourceColumnWidth = showResourceColumn ? isControlledResourceColumnWidth ? resourceColumnWidth : internalResourceColumnWidth : 0;
   const isControlledRowHeight = rowHeight !== void 0;
-  const [internalRowHeight, setInternalRowHeight] = React35.useState(() => defaultRowHeight ?? sizeConfig.rowHeight);
-  React35.useEffect(() => {
+  const [internalRowHeight, setInternalRowHeight] = React36.useState(() => defaultRowHeight ?? sizeConfig.rowHeight);
+  React36.useEffect(() => {
     if (isControlledRowHeight) return;
     if (defaultRowHeight == null) return;
     setInternalRowHeight(defaultRowHeight);
@@ -11868,14 +11886,14 @@ function CalendarTimeline({
   const colMax = maxResourceColumnWidth ?? 520;
   const rowMin = minRowHeight ?? 36;
   const rowMax = maxRowHeight ?? 120;
-  const viewList = React35.useMemo(() => Array.isArray(view) ? view : void 0, [view]);
-  const availableViews = React35.useMemo(() => {
+  const viewList = React36.useMemo(() => Array.isArray(view) ? view : void 0, [view]);
+  const availableViews = React36.useMemo(() => {
     if (onlyView) return [onlyView];
     if (viewList?.length) return viewList;
     return ["month", "week", "day", "sprint"];
   }, [onlyView, viewList]);
   const isControlledView = view !== void 0 && !Array.isArray(view);
-  const [internalView, setInternalView] = React35.useState(() => {
+  const [internalView, setInternalView] = React36.useState(() => {
     if (onlyView) return onlyView;
     if (viewList?.length) {
       if (defaultView && viewList.includes(defaultView)) return defaultView;
@@ -11884,13 +11902,13 @@ function CalendarTimeline({
     return defaultView ?? "month";
   });
   const activeView = onlyView ? onlyView : isControlledView ? view : internalView;
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (onlyView || isControlledView) return;
     if (!availableViews.includes(internalView)) {
       setInternalView(availableViews[0] ?? "month");
     }
   }, [availableViews, internalView, isControlledView, onlyView]);
-  const effectiveSlotMinWidth = React35.useMemo(() => {
+  const effectiveSlotMinWidth = React36.useMemo(() => {
     if (slotMinWidth == null) {
       if (activeView === "month" && monthEventStyle === "compact") {
         return clamp5(Math.round(sizeConfig.slotMinWidth * 0.55), 32, sizeConfig.slotMinWidth);
@@ -11902,17 +11920,17 @@ function CalendarTimeline({
     return baseSlotMinWidth;
   }, [activeView, baseSlotMinWidth, monthEventStyle, sizeConfig.slotMinWidth, slotMinWidth]);
   const isControlledDate = date !== void 0;
-  const [internalDate, setInternalDate] = React35.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
+  const [internalDate, setInternalDate] = React36.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
   const activeDate = isControlledDate ? date : internalDate;
-  const resolvedNow = React35.useMemo(() => now ?? /* @__PURE__ */ new Date(), [now]);
-  const formatToken = React35.useCallback((key, params) => {
+  const resolvedNow = React36.useMemo(() => now ?? /* @__PURE__ */ new Date(), [now]);
+  const formatToken = React36.useCallback((key, params) => {
     let message = t(key);
     for (const [name, value] of Object.entries(params)) {
       message = message.replaceAll(`{${name}}`, String(value));
     }
     return message;
   }, [t]);
-  const l = React35.useMemo(
+  const l = React36.useMemo(
     () => ({
       today: labels?.today ?? t("today"),
       prev: labels?.prev ?? t("prev"),
@@ -11935,7 +11953,7 @@ function CalendarTimeline({
     }),
     [formatToken, labels, t]
   );
-  const setView = React35.useCallback(
+  const setView = React36.useCallback(
     (next) => {
       if (onlyView) return;
       if (!availableViews.includes(next)) return;
@@ -11944,14 +11962,14 @@ function CalendarTimeline({
     },
     [availableViews, isControlledView, onViewChange, onlyView]
   );
-  const setDate = React35.useCallback(
+  const setDate = React36.useCallback(
     (next) => {
       if (!isControlledDate) setInternalDate(next);
       onDateChange?.(next);
     },
     [isControlledDate, onDateChange]
   );
-  const navigate = React35.useCallback(
+  const navigate = React36.useCallback(
     (dir) => {
       const base = activeDate;
       if (activeView === "month") {
@@ -11970,17 +11988,17 @@ function CalendarTimeline({
     },
     [activeDate, activeView, resolvedTimeZone, setDate]
   );
-  const [internalCollapsed, setInternalCollapsed] = React35.useState(() => defaultGroupCollapsed ?? {});
+  const [internalCollapsed, setInternalCollapsed] = React36.useState(() => defaultGroupCollapsed ?? {});
   const collapsed = groupCollapsed ?? internalCollapsed;
-  const setCollapsed = React35.useCallback(
+  const setCollapsed = React36.useCallback(
     (next) => {
       if (!groupCollapsed) setInternalCollapsed(next);
       onGroupCollapsedChange?.(next);
     },
     [groupCollapsed, onGroupCollapsedChange]
   );
-  const rows = React35.useMemo(() => buildRows({ resources, groups, collapsed }), [resources, groups, collapsed]);
-  const groupResourceCounts = React35.useMemo(() => getGroupResourceCounts(resources), [resources]);
+  const rows = React36.useMemo(() => buildRows({ resources, groups, collapsed }), [resources, groups, collapsed]);
+  const groupResourceCounts = React36.useMemo(() => getGroupResourceCounts(resources), [resources]);
   const { slots, range, slotStarts, todaySlotIdx, weekendSlotIdxs } = useTimelineSlots({
     activeView,
     activeDate,
@@ -11994,12 +12012,12 @@ function CalendarTimeline({
     formatters,
     dueDateSprint
   });
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     onRangeChange?.(range);
   }, [range.start, range.end, onRangeChange]);
-  const leftRef = React35.useRef(null);
-  const bodyRef = React35.useRef(null);
-  const headerRef = React35.useRef(null);
+  const leftRef = React36.useRef(null);
+  const bodyRef = React36.useRef(null);
+  const headerRef = React36.useRef(null);
   const bodyClientWidth = useClientWidth(bodyRef);
   const { normalizedEvents, eventsByResource, resourceById } = useNormalizedEvents({
     events,
@@ -12031,16 +12049,16 @@ function CalendarTimeline({
     slotLefts,
     slotCount: slots.length
   });
-  const selectedEvent = React35.useMemo(() => {
+  const selectedEvent = React36.useMemo(() => {
     if (!activeSelectedEventId) return null;
     const found = normalizedEvents.find((e) => e.id === activeSelectedEventId);
     return found ?? null;
   }, [activeSelectedEventId, normalizedEvents]);
-  const selectedResource = React35.useMemo(() => {
+  const selectedResource = React36.useMemo(() => {
     if (!selectedEvent) return void 0;
     return resourceById.get(selectedEvent.resourceId);
   }, [resourceById, selectedEvent]);
-  const selectedTimeText = React35.useMemo(() => {
+  const selectedTimeText = React36.useMemo(() => {
     if (!selectedEvent) return "";
     return formatters?.eventTime?.({
       start: selectedEvent._start,
@@ -12050,7 +12068,7 @@ function CalendarTimeline({
       view: activeView
     }) ?? defaultEventTime({ start: selectedEvent._start, end: selectedEvent._end, locale: resolvedLocale, timeZone: resolvedTimeZone, view: activeView });
   }, [activeView, formatters, resolvedLocale, resolvedTimeZone, selectedEvent]);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (!effectiveEnableEventSheet) return;
     if (activeEventSheetOpen && activeSelectedEventId && !selectedEvent) {
       setEventSheetOpen(false);
@@ -12060,24 +12078,24 @@ function CalendarTimeline({
   const virt = virtualization == null ? rows.length > 60 : Boolean(virtualization.enabled);
   const overscan = virtualization?.overscan ?? 8;
   const isControlledRowHeights = rowHeights !== void 0;
-  const [internalRowHeights, setInternalRowHeights] = React35.useState(() => defaultRowHeights ?? {});
-  React35.useEffect(() => {
+  const [internalRowHeights, setInternalRowHeights] = React36.useState(() => defaultRowHeights ?? {});
+  React36.useEffect(() => {
     if (isControlledRowHeights) return;
     if (!defaultRowHeights) return;
     setInternalRowHeights(defaultRowHeights);
   }, [defaultRowHeights, isControlledRowHeights]);
   const activeRowHeights = isControlledRowHeights ? rowHeights : internalRowHeights;
-  const autoRowHeightCfg = React35.useMemo(() => {
+  const autoRowHeightCfg = React36.useMemo(() => {
     if (!autoRowHeight) return null;
     return autoRowHeight === true ? {} : autoRowHeight;
   }, [autoRowHeight]);
-  const effectiveMaxLanesPerRow = React35.useMemo(() => {
+  const effectiveMaxLanesPerRow = React36.useMemo(() => {
     if (!autoRowHeightCfg) return maxLanesPerRow;
     const maxLanes = autoRowHeightCfg.maxLanesPerRow;
     if (typeof maxLanes === "number" && Number.isFinite(maxLanes) && maxLanes > 0) return Math.floor(maxLanes);
     return Number.POSITIVE_INFINITY;
   }, [autoRowHeightCfg, maxLanesPerRow]);
-  const autoRowHeightsByResource = React35.useMemo(() => {
+  const autoRowHeightsByResource = React36.useMemo(() => {
     if (!autoRowHeightCfg) return null;
     const maxRowHeight2 = autoRowHeightCfg.maxRowHeight;
     const out = /* @__PURE__ */ new Map();
@@ -12095,7 +12113,7 @@ function CalendarTimeline({
     }
     return out;
   }, [autoRowHeightCfg, eventHeight, eventsByResource, laneGap, lanePaddingY, slotStarts, slots.length, effectiveMaxLanesPerRow]);
-  const getResourceRowHeight = React35.useCallback(
+  const getResourceRowHeight = React36.useCallback(
     (resourceId) => {
       const h = activeRowHeights[resourceId];
       const base = typeof h === "number" && Number.isFinite(h) && h > 0 ? h : effectiveRowHeight;
@@ -12105,7 +12123,7 @@ function CalendarTimeline({
     },
     [activeRowHeights, autoRowHeightsByResource, effectiveRowHeight]
   );
-  const setRowHeightForResource = React35.useCallback(
+  const setRowHeightForResource = React36.useCallback(
     (resourceId, height) => {
       const clamped = clamp5(Math.round(height), rowMin, rowMax);
       onRowHeightChange?.(clamped);
@@ -12122,7 +12140,7 @@ function CalendarTimeline({
     },
     [activeRowHeights, isControlledRowHeights, onRowHeightChange, onRowHeightsChange, rowMax, rowMin]
   );
-  const rowHeightsArray = React35.useMemo(() => {
+  const rowHeightsArray = React36.useMemo(() => {
     return rows.map((r) => {
       if (r.kind === "resource") return getResourceRowHeight(r.resource.id);
       return sizeConfig.groupRowHeight;
@@ -12138,13 +12156,13 @@ function CalendarTimeline({
   const endRow = virt ? virtualResult.endIndex : rows.length;
   const topSpacer = virt ? virtualResult.topSpacer : 0;
   const bottomSpacer = virt ? virtualResult.bottomSpacer : 0;
-  const renderedRowsHeight = React35.useMemo(() => {
+  const renderedRowsHeight = React36.useMemo(() => {
     let h = 0;
     for (let i = startRow; i < endRow; i++) h += rowHeightsArray[i] ?? effectiveRowHeight;
     return h;
   }, [effectiveRowHeight, endRow, rowHeightsArray, startRow]);
-  const resizeRef = React35.useRef(null);
-  const setResourceColumnWidth = React35.useCallback(
+  const resizeRef = React36.useRef(null);
+  const setResourceColumnWidth = React36.useCallback(
     (next) => {
       const clamped = clamp5(Math.round(next), colMin, colMax);
       if (!isControlledResourceColumnWidth) setInternalResourceColumnWidth(clamped);
@@ -12152,7 +12170,7 @@ function CalendarTimeline({
     },
     [colMax, colMin, isControlledResourceColumnWidth, onResourceColumnWidthChange]
   );
-  const startResize = React35.useCallback(
+  const startResize = React36.useCallback(
     (mode, e, args) => {
       if (e.button !== 0 || e.ctrlKey) return;
       resizeRef.current = {
@@ -12195,7 +12213,7 @@ function CalendarTimeline({
     },
     [setResourceColumnWidth, setRowHeightForResource]
   );
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     return () => {
       if (!resizeRef.current) return;
       resizeRef.current = null;
@@ -12203,7 +12221,7 @@ function CalendarTimeline({
       document.body.style.userSelect = "";
     };
   }, []);
-  const beginResizeColumn = React35.useCallback(
+  const beginResizeColumn = React36.useCallback(
     (e) => {
       if (!canResizeColumn) return;
       if (typeof effectiveResourceColumnWidth !== "number") return;
@@ -12211,7 +12229,7 @@ function CalendarTimeline({
     },
     [canResizeColumn, effectiveResourceColumnWidth, effectiveRowHeight, startResize]
   );
-  const beginResizeResourceRow = React35.useCallback(
+  const beginResizeResourceRow = React36.useCallback(
     (resourceId) => (e) => {
       if (!canResizeRow) return;
       startResize("row", e, {
@@ -12222,7 +12240,7 @@ function CalendarTimeline({
     },
     [canResizeRow, effectiveResourceColumnWidth, getResourceRowHeight, startResize]
   );
-  const title = React35.useMemo(() => {
+  const title = React36.useMemo(() => {
     if (activeView === "month") {
       return formatters?.monthTitle?.(activeDate, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultMonthTitle(activeDate, resolvedLocale, resolvedTimeZone);
     }
@@ -12249,11 +12267,11 @@ function CalendarTimeline({
   }, [activeDate, activeView, formatToken, formatters, l.sprint, l.week, range.end, range.start, resolvedLocale, resolvedTimeZone, slots.length]);
   const createMode = interactions?.createMode ?? "drag";
   const canCreate = !isViewOnly && (interactions?.creatable ?? false) && !!onCreateEvent;
-  const [createOpen, setCreateOpen] = React35.useState(false);
-  const [createResourceId, setCreateResourceId] = React35.useState(null);
-  const [createStartIdx, setCreateStartIdx] = React35.useState(0);
-  const [createEndIdx, setCreateEndIdx] = React35.useState(1);
-  const resourceOptions = React35.useMemo(() => {
+  const [createOpen, setCreateOpen] = React36.useState(false);
+  const [createResourceId, setCreateResourceId] = React36.useState(null);
+  const [createStartIdx, setCreateStartIdx] = React36.useState(0);
+  const [createEndIdx, setCreateEndIdx] = React36.useState(1);
+  const resourceOptions = React36.useMemo(() => {
     return resources.map((r) => ({
       label: typeof r.label === "string" ? r.label : r.id,
       value: r.id,
@@ -12261,7 +12279,7 @@ function CalendarTimeline({
       disabled: r.disabled ?? false
     }));
   }, [resources]);
-  const formatCreateBoundaryLabel = React35.useMemo(() => {
+  const formatCreateBoundaryLabel = React36.useMemo(() => {
     const timeFmt = getDtf(resolvedLocale, resolvedTimeZone, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
     const dayFmt = getDtf(resolvedLocale, resolvedTimeZone, { weekday: "short", month: "short", day: "numeric" });
     const yearFmt = getDtf(resolvedLocale, resolvedTimeZone, { year: "numeric" });
@@ -12309,7 +12327,7 @@ function CalendarTimeline({
       return dayFmt.format(d);
     };
   }, [activeView, dueDateSprint, l.sprint, resolvedLocale, resolvedTimeZone, slotStarts, slotStarts.length]);
-  const openCreate = React35.useCallback(() => {
+  const openCreate = React36.useCallback(() => {
     if (!canCreate) return;
     if (activeEventSheetOpen) setEventSheetOpen(false);
     const firstResource = resources.find((r) => !r.disabled)?.id ?? resources[0]?.id ?? null;
@@ -12341,13 +12359,13 @@ function CalendarTimeline({
     slotStarts,
     slots.length
   ]);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     setCreateEndIdx((prev) => Math.min(slots.length, Math.max(prev, createStartIdx + 1)));
   }, [createStartIdx, slots.length]);
-  const createStartOptions = React35.useMemo(() => {
+  const createStartOptions = React36.useMemo(() => {
     return slotStarts.map((d, idx) => ({ label: formatCreateBoundaryLabel(d, { kind: "start", boundaryIdx: idx }), value: idx }));
   }, [formatCreateBoundaryLabel, slotStarts]);
-  const createEndOptions = React35.useMemo(() => {
+  const createEndOptions = React36.useMemo(() => {
     const out = [];
     for (let idx = createStartIdx + 1; idx <= slotStarts.length; idx++) {
       const boundary = idx >= slotStarts.length ? range.end : slotStarts[idx];
@@ -12355,7 +12373,7 @@ function CalendarTimeline({
     }
     return out;
   }, [createStartIdx, formatCreateBoundaryLabel, range.end, slotStarts]);
-  const commitCreate = React35.useCallback(() => {
+  const commitCreate = React36.useCallback(() => {
     if (!onCreateEvent) return;
     if (!createResourceId) return;
     const start = slotStarts[clamp5(createStartIdx, 0, Math.max(0, slotStarts.length - 1))];
@@ -12366,38 +12384,38 @@ function CalendarTimeline({
     onCreateEvent({ resourceId: createResourceId, start, end: endBoundary });
     setCreateOpen(false);
   }, [createEndIdx, createResourceId, createStartIdx, onCreateEvent, range.end, slotStarts]);
-  const dragRef = React35.useRef(null);
-  const [preview, setPreviewState] = React35.useState(null);
-  const previewRef = React35.useRef(null);
-  const setPreview = React35.useCallback((next) => {
+  const dragRef = React36.useRef(null);
+  const [preview, setPreviewState] = React36.useState(null);
+  const previewRef = React36.useRef(null);
+  const setPreview = React36.useCallback((next) => {
     previewRef.current = next;
     setPreviewState(next);
   }, []);
-  const suppressNextEventClickRef = React35.useRef(false);
-  const [hoverCell, setHoverCellState] = React35.useState(null);
-  const hoverCellRef = React35.useRef(null);
-  const setHoverCell = React35.useCallback((next) => {
+  const suppressNextEventClickRef = React36.useRef(false);
+  const [hoverCell, setHoverCellState] = React36.useState(null);
+  const hoverCellRef = React36.useRef(null);
+  const setHoverCell = React36.useCallback((next) => {
     hoverCellRef.current = next;
     setHoverCellState(next);
   }, []);
-  const autoScrollStateRef = React35.useRef({
+  const autoScrollStateRef = React36.useRef({
     dir: 0,
     speed: 0,
     lastClientX: 0,
     lastClientY: 0
   });
-  const autoScrollRafRef = React35.useRef(null);
-  const dragPreviewRafRef = React35.useRef(null);
-  const dragPreviewPointRef = React35.useRef(null);
-  const hoverCellRafRef = React35.useRef(null);
-  const hoverCellPendingRef = React35.useRef(null);
-  const stopAutoScroll = React35.useCallback(() => {
+  const autoScrollRafRef = React36.useRef(null);
+  const dragPreviewRafRef = React36.useRef(null);
+  const dragPreviewPointRef = React36.useRef(null);
+  const hoverCellRafRef = React36.useRef(null);
+  const hoverCellPendingRef = React36.useRef(null);
+  const stopAutoScroll = React36.useCallback(() => {
     if (autoScrollRafRef.current != null) cancelAnimationFrame(autoScrollRafRef.current);
     autoScrollRafRef.current = null;
     autoScrollStateRef.current.dir = 0;
     autoScrollStateRef.current.speed = 0;
   }, []);
-  const getPointerContext = React35.useCallback(
+  const getPointerContext = React36.useCallback(
     (clientX, clientY, opts) => {
       const body = bodyRef.current;
       if (!body) return null;
@@ -12415,7 +12433,7 @@ function CalendarTimeline({
     },
     [xToSlotIdx]
   );
-  const slotToDate = React35.useCallback(
+  const slotToDate = React36.useCallback(
     (slotIdx) => {
       const start = slotStarts[clamp5(slotIdx, 0, slotStarts.length - 1)];
       if (activeView === "day") {
@@ -12429,7 +12447,7 @@ function CalendarTimeline({
     },
     [activeView, dayTimeStepMinutes, resolvedTimeZone, slotStarts]
   );
-  const updateDragPreview = React35.useCallback(
+  const updateDragPreview = React36.useCallback(
     (clientX, clientY) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -12473,13 +12491,13 @@ function CalendarTimeline({
     },
     [getPointerContext, range.end, range.start, slotToDate, slots.length]
   );
-  const flushDragPreview = React35.useCallback(() => {
+  const flushDragPreview = React36.useCallback(() => {
     dragPreviewRafRef.current = null;
     const point = dragPreviewPointRef.current;
     if (!point) return;
     updateDragPreview(point.x, point.y);
   }, [updateDragPreview]);
-  const scheduleDragPreview = React35.useCallback(
+  const scheduleDragPreview = React36.useCallback(
     (clientX, clientY) => {
       dragPreviewPointRef.current = { x: clientX, y: clientY };
       if (dragPreviewRafRef.current != null) return;
@@ -12487,7 +12505,7 @@ function CalendarTimeline({
     },
     [flushDragPreview]
   );
-  const applyHoverCell = React35.useCallback(
+  const applyHoverCell = React36.useCallback(
     (next) => {
       const prev = hoverCellRef.current;
       const same = prev == null && next == null || prev != null && next != null && prev.resourceId === next.resourceId && prev.slotIdx === next.slotIdx && Math.abs(prev.y - next.y) <= 0.5;
@@ -12496,11 +12514,11 @@ function CalendarTimeline({
     },
     [setHoverCell]
   );
-  const flushHoverCell = React35.useCallback(() => {
+  const flushHoverCell = React36.useCallback(() => {
     hoverCellRafRef.current = null;
     applyHoverCell(hoverCellPendingRef.current);
   }, [applyHoverCell]);
-  const scheduleHoverCell = React35.useCallback(
+  const scheduleHoverCell = React36.useCallback(
     (next) => {
       hoverCellPendingRef.current = next;
       if (hoverCellRafRef.current != null) return;
@@ -12508,7 +12526,7 @@ function CalendarTimeline({
     },
     [flushHoverCell]
   );
-  const autoScrollTick = React35.useCallback(() => {
+  const autoScrollTick = React36.useCallback(() => {
     const drag = dragRef.current;
     const body = bodyRef.current;
     const st = autoScrollStateRef.current;
@@ -12527,7 +12545,7 @@ function CalendarTimeline({
     updateDragPreview(st.lastClientX, st.lastClientY);
     autoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
   }, [stopAutoScroll, updateDragPreview]);
-  const updateAutoScrollFromPointer = React35.useCallback(
+  const updateAutoScrollFromPointer = React36.useCallback(
     (clientX, clientY) => {
       const body = bodyRef.current;
       if (!body) return;
@@ -12558,8 +12576,8 @@ function CalendarTimeline({
     },
     [autoScrollTick, stopAutoScroll]
   );
-  React35.useEffect(() => stopAutoScroll, [stopAutoScroll]);
-  React35.useEffect(() => {
+  React36.useEffect(() => stopAutoScroll, [stopAutoScroll]);
+  React36.useEffect(() => {
     return () => {
       if (dragPreviewRafRef.current != null) cancelAnimationFrame(dragPreviewRafRef.current);
       if (hoverCellRafRef.current != null) cancelAnimationFrame(hoverCellRafRef.current);
@@ -12706,7 +12724,7 @@ function CalendarTimeline({
     }
     setPreview(null);
   };
-  const onBodyPointerLeave = React35.useCallback(() => {
+  const onBodyPointerLeave = React36.useCallback(() => {
     hoverCellPendingRef.current = null;
     if (hoverCellRafRef.current != null) {
       cancelAnimationFrame(hoverCellRafRef.current);
@@ -12733,7 +12751,7 @@ function CalendarTimeline({
       }
     );
   };
-  const slotHeaderNodes = React35.useMemo(() => {
+  const slotHeaderNodes = React36.useMemo(() => {
     const startIdx = colVirtEnabled ? visibleSlots.startIdx : 0;
     const endIdx = colVirtEnabled ? visibleSlots.endIdx : slots.length;
     const leftSpacer = startIdx > 0 ? slotLefts[startIdx] ?? 0 : 0;
@@ -13058,7 +13076,7 @@ function CalendarTimeline({
                               ]
                             }
                           );
-                          if (!enableEventTooltips) return /* @__PURE__ */ jsx41(React35.Fragment, { children: block }, ev.id);
+                          if (!enableEventTooltips) return /* @__PURE__ */ jsx41(React36.Fragment, { children: block }, ev.id);
                           const tooltipContent = /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-0.5", children: [
                             /* @__PURE__ */ jsx41("div", { className: "font-semibold", children: tooltipTitle }),
                             /* @__PURE__ */ jsx41("div", { className: "text-xs opacity-80", children: timeText }),
@@ -13214,7 +13232,7 @@ function CalendarTimeline({
 }
 
 // src/components/MultiCombobox.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { useId as useId5 } from "react";
 import { ChevronDown as ChevronDown4, Search as Search4, Check as Check6, SearchX as SearchX2, Loader2 as Loader24, X as X12, Sparkles as Sparkles3 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -13251,29 +13269,29 @@ var MultiCombobox = ({
   maxTagsVisible = 3,
   useOverlayScrollbar = false
 }) => {
-  const [query, setQuery] = React36.useState("");
-  const [open, setOpen] = React36.useState(false);
-  const [activeIndex, setActiveIndex] = React36.useState(null);
-  const inputRef = React36.useRef(null);
-  const listRef = React36.useRef([]);
-  const optionsListRef = React36.useRef(null);
+  const [query, setQuery] = React37.useState("");
+  const [open, setOpen] = React37.useState(false);
+  const [activeIndex, setActiveIndex] = React37.useState(null);
+  const inputRef = React37.useRef(null);
+  const listRef = React37.useRef([]);
+  const optionsListRef = React37.useRef(null);
   useOverlayScrollbarTarget(optionsListRef, { enabled: useOverlayScrollbar });
-  const triggerRef = React36.useRef(null);
+  const triggerRef = React37.useRef(null);
   useShadCNAnimations();
-  const normalizedOptions = React36.useMemo(
+  const normalizedOptions = React37.useMemo(
     () => options.map(
       (o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label, icon: o.icon, description: o.description, disabled: o.disabled, group: o.group }
     ),
     [options]
   );
   const enableSearch = normalizedOptions.length > 10;
-  const filtered = React36.useMemo(
+  const filtered = React37.useMemo(
     () => enableSearch ? normalizedOptions.filter(
       (opt) => opt.label.toLowerCase().includes(query.trim().toLowerCase()) || opt.description?.toLowerCase().includes(query.trim().toLowerCase())
     ) : normalizedOptions,
     [normalizedOptions, query, enableSearch]
   );
-  const groupedOptions = React36.useMemo(() => {
+  const groupedOptions = React37.useMemo(() => {
     if (!groupBy) return null;
     const groups = /* @__PURE__ */ new Map();
     filtered.forEach((opt) => {
@@ -13309,7 +13327,7 @@ var MultiCombobox = ({
   const handleClearAll = () => {
     onChange([]);
   };
-  React36.useEffect(() => {
+  React37.useEffect(() => {
     if (open && enableSearch) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -13533,7 +13551,7 @@ var MultiCombobox = ({
         /* @__PURE__ */ jsx42("div", { className: cn("flex items-center gap-1.5 flex-1 overflow-hidden", size === "sm" ? "min-h-4" : size === "lg" ? "min-h-8" : "min-h-6"), children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs34(Fragment13, { children: [
           visibleTags.map((option) => {
             if (renderTag) {
-              return /* @__PURE__ */ jsx42(React36.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
+              return /* @__PURE__ */ jsx42(React37.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
             }
             return /* @__PURE__ */ jsxs34(
               "span",
@@ -13676,17 +13694,17 @@ var MultiCombobox = ({
 };
 
 // src/components/RadioGroup.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
-var RadioGroupContext = React37.createContext(void 0);
+var RadioGroupContext = React38.createContext(void 0);
 var useRadioGroup = () => {
-  const context = React37.useContext(RadioGroupContext);
+  const context = React38.useContext(RadioGroupContext);
   if (!context) {
     throw new Error("RadioGroupItem must be used within a RadioGroup");
   }
   return context;
 };
-var RadioGroup = React37.forwardRef(
+var RadioGroup = React38.forwardRef(
   ({
     value,
     defaultValue,
@@ -13702,7 +13720,7 @@ var RadioGroup = React37.forwardRef(
     error = false,
     errorMessage
   }, ref) => {
-    const [internalValue, setInternalValue] = React37.useState(defaultValue || "");
+    const [internalValue, setInternalValue] = React38.useState(defaultValue || "");
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const handleValueChange = (newValue) => {
@@ -13713,7 +13731,7 @@ var RadioGroup = React37.forwardRef(
         onValueChange?.(newValue);
       }
     };
-    const uniqueId = React37.useId();
+    const uniqueId = React38.useId();
     const radioName = name || `radio-group-${uniqueId}`;
     return /* @__PURE__ */ jsx43(
       RadioGroupContext.Provider,
@@ -13771,7 +13789,7 @@ var sizeStyles7 = {
     padding: "p-4"
   }
 };
-var RadioGroupItem = React37.forwardRef(
+var RadioGroupItem = React38.forwardRef(
   ({ value, id, disabled, className, children, label, labelClassName, description, icon }, ref) => {
     const { value: selectedValue, onValueChange, name, disabled: groupDisabled, size = "md", variant = "default" } = useRadioGroup();
     const isDisabled = disabled || groupDisabled;
@@ -13949,7 +13967,7 @@ var RadioGroupItem = React37.forwardRef(
 RadioGroupItem.displayName = "RadioGroupItem";
 
 // src/components/Slider.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { Fragment as Fragment14, jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
 var SIZE_STYLES = {
   sm: {
@@ -13972,7 +13990,7 @@ var SIZE_STYLES = {
   }
 };
 var clamp6 = (n, min, max) => Math.min(max, Math.max(min, n));
-var Slider = React38.forwardRef(
+var Slider = React39.forwardRef(
   ({
     className,
     mode = "single",
@@ -14007,17 +14025,17 @@ var Slider = React38.forwardRef(
     ...props
   }, ref) => {
     const isRange = mode === "range";
-    const trackRef = React38.useRef(null);
-    const [internalValue, setInternalValue] = React38.useState(defaultValue);
-    const [internalRange, setInternalRange] = React38.useState(() => {
+    const trackRef = React39.useRef(null);
+    const [internalValue, setInternalValue] = React39.useState(defaultValue);
+    const [internalRange, setInternalRange] = React39.useState(() => {
       if (defaultRangeValue) return defaultRangeValue;
       const v = clamp6(defaultValue, min, max);
       return [min, v];
     });
-    const [activeThumb, setActiveThumb] = React38.useState(null);
-    const dragRef = React38.useRef(null);
-    const [isHovering, setIsHovering] = React38.useState(false);
-    const [isDragging, setIsDragging] = React38.useState(false);
+    const [activeThumb, setActiveThumb] = React39.useState(null);
+    const dragRef = React39.useRef(null);
+    const [isHovering, setIsHovering] = React39.useState(false);
+    const [isDragging, setIsDragging] = React39.useState(false);
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const isRangeControlled = rangeValue !== void 0;
@@ -14025,7 +14043,7 @@ var Slider = React38.forwardRef(
     const rangeMin = clamp6(currentRange[0] ?? min, min, max);
     const rangeMax = clamp6(currentRange[1] ?? max, min, max);
     const normalizedRange = rangeMin <= rangeMax ? [rangeMin, rangeMax] : [rangeMax, rangeMin];
-    const handleSingleChange = React38.useCallback(
+    const handleSingleChange = React39.useCallback(
       (e) => {
         const newValue = Number(e.target.value);
         if (!isControlled) {
@@ -14036,14 +14054,14 @@ var Slider = React38.forwardRef(
       },
       [isControlled, onChange, onValueChange]
     );
-    const emitRange = React38.useCallback(
+    const emitRange = React39.useCallback(
       (next) => {
         onRangeChange?.(next);
         onRangeValueChange?.(next);
       },
       [onRangeChange, onRangeValueChange]
     );
-    const handleRangeChange = React38.useCallback(
+    const handleRangeChange = React39.useCallback(
       (thumb) => (e) => {
         const nextVal = Number(e.target.value);
         const [curMin, curMax] = normalizedRange;
@@ -14058,7 +14076,7 @@ var Slider = React38.forwardRef(
     const rangeStartPct = (normalizedRange[0] - min) / denom * 100;
     const rangeEndPct = (normalizedRange[1] - min) / denom * 100;
     const sizeStyles8 = SIZE_STYLES[size];
-    const displayValue = React38.useMemo(() => {
+    const displayValue = React39.useMemo(() => {
       if (isRange) {
         const a = formatValue ? formatValue(normalizedRange[0]) : normalizedRange[0].toString();
         const b = formatValue ? formatValue(normalizedRange[1]) : normalizedRange[1].toString();
@@ -14066,7 +14084,7 @@ var Slider = React38.forwardRef(
       }
       return formatValue ? formatValue(currentValue) : currentValue.toString();
     }, [currentValue, formatValue, isRange, normalizedRange]);
-    const quantize = React38.useCallback(
+    const quantize = React39.useCallback(
       (v) => {
         const stepped = Math.round((v - min) / step) * step + min;
         const fixed = Number(stepped.toFixed(10));
@@ -14074,7 +14092,7 @@ var Slider = React38.forwardRef(
       },
       [max, min, step]
     );
-    const valueFromClientX = React38.useCallback(
+    const valueFromClientX = React39.useCallback(
       (clientX) => {
         const el = trackRef.current;
         if (!el) return min;
@@ -14330,7 +14348,7 @@ Slider.displayName = "Slider";
 
 // src/components/OverlayControls.tsx
 import { Dot as Dot2, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
-import React39 from "react";
+import React40 from "react";
 import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
 function OverlayControls({
   mode,
@@ -14361,24 +14379,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] = React39.useState(false);
-  const rateWrapRef = React39.useRef(null);
-  const [controlsVisible, setControlsVisible] = React39.useState(true);
-  const hideTimerRef = React39.useRef(null);
-  const [previewData, setPreviewData] = React39.useState(null);
-  const sliderRef = React39.useRef(null);
-  const [isDragging, setIsDragging] = React39.useState(false);
-  const [dragValue, setDragValue] = React39.useState(value);
-  React39.useEffect(() => {
+  const [rateOpen, setRateOpen] = React40.useState(false);
+  const rateWrapRef = React40.useRef(null);
+  const [controlsVisible, setControlsVisible] = React40.useState(true);
+  const hideTimerRef = React40.useRef(null);
+  const [previewData, setPreviewData] = React40.useState(null);
+  const sliderRef = React40.useRef(null);
+  const [isDragging, setIsDragging] = React40.useState(false);
+  const [dragValue, setDragValue] = React40.useState(value);
+  React40.useEffect(() => {
     if (!isDragging) {
       setDragValue(value);
     }
   }, [value, isDragging]);
-  const [keyboardFeedback, setKeyboardFeedback] = React39.useState(null);
-  const feedbackTimerRef = React39.useRef(null);
-  const seekAccumulatorRef = React39.useRef(0);
-  const seekAccumulatorTimerRef = React39.useRef(null);
-  React39.useEffect(() => {
+  const [keyboardFeedback, setKeyboardFeedback] = React40.useState(null);
+  const feedbackTimerRef = React40.useRef(null);
+  const seekAccumulatorRef = React40.useRef(0);
+  const seekAccumulatorTimerRef = React40.useRef(null);
+  React40.useEffect(() => {
     const onDocDown = (e) => {
       if (!rateOpen) return;
       const wrap = rateWrapRef.current;
@@ -14389,7 +14407,7 @@ function OverlayControls({
     document.addEventListener("mousedown", onDocDown);
     return () => document.removeEventListener("mousedown", onDocDown);
   }, [rateOpen]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!autoHide || showOnHover) return;
     const resetTimer = () => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
@@ -14427,7 +14445,7 @@ function OverlayControls({
       seekAccumulatorRef.current = 0;
     }, 1e3);
   };
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!enableKeyboardShortcuts) return;
     const handleKeyDown = (e) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
@@ -14764,7 +14782,7 @@ function OverlayControls({
 // src/components/CategoryTreeSelect.tsx
 import { useEffect as useEffect22, useId as useId7, useMemo as useMemo17, useRef as useRef17, useState as useState29 } from "react";
 import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown5, FolderTree, Layers, Search as Search5, SearchX as SearchX3, X as X13 } from "lucide-react";
-import { Fragment as Fragment16, jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 var defaultLabels = {
   emptyText: "No categories",
   selectedText: (count) => `${count} selected`,
@@ -14809,6 +14827,7 @@ function CategoryTreeSelect(props) {
   const describedBy = errorId || helperId;
   const mergedLabels = { ...defaultLabels, ...labels };
   const valueArray = singleSelect ? props.value != null ? [props.value] : [] : props.value || [];
+  const selectedIds = useMemo17(() => new Set(valueArray), [valueArray]);
   const { parentCategories, childrenMap, byId } = useMemo17(() => {
     const byId2 = /* @__PURE__ */ new Map();
     const childrenMap2 = /* @__PURE__ */ new Map();
@@ -14923,65 +14942,80 @@ function CategoryTreeSelect(props) {
     }
   };
   const renderCategory = (category, level = 0) => {
-    const allChildren = childrenMap.get(category.id) || [];
-    const children = isSearchMode ? allChildren.filter((c) => visibleIds?.has(c.id)) : allChildren;
+    const children = effectiveChildrenMap.get(category.id) || [];
     const hasChildren = children.length > 0;
     const isExpanded = hasChildren && (isSearchMode || expandedNodes.has(category.id));
-    const isSelected = valueArray.includes(category.id);
-    const isParent = level === 0;
-    return /* @__PURE__ */ jsxs38("div", { className: "animate-in fade-in-50 duration-200", style: { animationDelay: `${level * 30}ms` }, children: [
-      /* @__PURE__ */ jsxs38(
-        "div",
-        {
-          onClick: () => !viewOnly && handleSelect(category.id, category),
-          className: cn(
-            "relative flex items-center gap-2.5 px-3 py-2.5 min-h-11 transition-all duration-200 rounded-full",
-            // Không phân biệt parent/child - đồng bộ màu
-            !viewOnly && "cursor-pointer",
-            !viewOnly && !isSelected && "hover:bg-accent/50",
-            // Selected state - đồng bộ cho tất cả
-            !viewOnly && isSelected && "bg-accent/40"
+    const isSelected = selectedIds.has(category.id);
+    return /* @__PURE__ */ jsxs38(
+      "div",
+      {
+        className: "min-w-0 animate-in fade-in-50 duration-200 [content-visibility:auto] [contain-intrinsic-size:44px]",
+        style: { animationDelay: `${level * 30}ms` },
+        children: [
+          /* @__PURE__ */ jsxs38(
+            "div",
+            {
+              onClick: () => !viewOnly && handleSelect(category.id, category),
+              className: cn(
+                "relative flex min-w-0 items-center gap-2.5 px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
+                // Không phân biệt parent/child - đồng bộ màu
+                !viewOnly && "cursor-pointer",
+                !viewOnly && !isSelected && "hover:bg-accent/50",
+                // Selected state - đồng bộ cho tất cả
+                !viewOnly && isSelected && "bg-accent/40"
+              ),
+              style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
+              children: [
+                hasChildren ? /* @__PURE__ */ jsx46(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleExpand(category.id);
+                    },
+                    className: cn(
+                      "p-1.5 rounded-lg transition-all duration-200",
+                      "hover:scale-110 active:scale-95",
+                      "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+                      isExpanded && "text-primary",
+                      isSearchMode && "opacity-60 cursor-not-allowed hover:scale-100 active:scale-100"
+                    ),
+                    disabled: isSearchMode,
+                    children: /* @__PURE__ */ jsx46("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsx46(ChevronRight6, { className: "w-4 h-4" }) })
+                  }
+                ) : /* @__PURE__ */ jsx46("span", { className: "w-7" }),
+                viewOnly ? (
+                  // View-only mode: just display the name with folder icon
+                  /* @__PURE__ */ jsxs38("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                    category.icon ? /* @__PURE__ */ jsx46("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ jsx46(FolderTree, { className: "h-4 w-4 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ jsx46("div", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40" }),
+                    /* @__PURE__ */ jsx46("span", { className: "min-w-0 text-sm font-medium leading-snug break-words [overflow-wrap:anywhere]", children: category.name })
+                  ] })
+                ) : (
+                  // Single/Multi select mode: icon + text + badge
+                  /* @__PURE__ */ jsxs38("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
+                    category.icon && /* @__PURE__ */ jsx46("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-current", children: category.icon }),
+                    /* @__PURE__ */ jsx46(
+                      "span",
+                      {
+                        className: cn(
+                          "min-w-0 flex-1 text-sm leading-snug break-words [overflow-wrap:anywhere] transition-all duration-200",
+                          isSelected ? "font-semibold text-primary" : "text-foreground/80"
+                        ),
+                        children: category.name
+                      }
+                    ),
+                    hasChildren && !isSelected && /* @__PURE__ */ jsx46("span", { className: "ml-auto shrink-0 text-[10px] font-medium text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-md", children: children.length })
+                  ] })
+                )
+              ]
+            }
           ),
-          style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
-          children: [
-            hasChildren ? /* @__PURE__ */ jsx46(
-              "button",
-              {
-                type: "button",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  toggleExpand(category.id);
-                },
-                className: cn(
-                  "p-1.5 rounded-lg transition-all duration-200",
-                  "hover:scale-110 active:scale-95",
-                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
-                  isExpanded && "text-primary",
-                  isSearchMode && "opacity-60 cursor-not-allowed hover:scale-100 active:scale-100"
-                ),
-                disabled: isSearchMode,
-                children: /* @__PURE__ */ jsx46("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsx46(ChevronRight6, { className: "w-4 h-4" }) })
-              }
-            ) : /* @__PURE__ */ jsx46("span", { className: "w-7" }),
-            viewOnly ? (
-              // View-only mode: just display the name with folder icon
-              /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2.5", children: [
-                category.icon ? /* @__PURE__ */ jsx46("div", { className: "w-4 h-4 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ jsx46(FolderTree, { className: "w-4 h-4 text-muted-foreground/60" }) : /* @__PURE__ */ jsx46("div", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/40" }),
-                /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium", children: category.name })
-              ] })
-            ) : (
-              // Single/Multi select mode: icon + text + badge
-              /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2.5 flex-1", children: [
-                category.icon && /* @__PURE__ */ jsx46("div", { className: "w-4 h-4 flex items-center justify-center text-current", children: category.icon }),
-                /* @__PURE__ */ jsx46("span", { className: cn("text-sm transition-all duration-200", isSelected ? "font-semibold text-primary" : "text-foreground/80"), children: category.name }),
-                hasChildren && !isSelected && /* @__PURE__ */ jsx46("span", { className: "ml-auto text-[10px] font-medium text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-md", children: children.length })
-              ] })
-            )
-          ]
-        }
-      ),
-      hasChildren && isExpanded && /* @__PURE__ */ jsx46("div", { className: cn("ml-2 pl-2 border-l-2 border-dashed border-border/50", "animate-in slide-in-from-top-2 fade-in-50 duration-200"), children: children.map((child) => renderCategory(child, level + 1)) })
-    ] }, category.id);
+          hasChildren && isExpanded && /* @__PURE__ */ jsx46("div", { className: cn("ml-2 pl-2 border-l-2 border-dashed border-border/50", "animate-in slide-in-from-top-2 fade-in-50 duration-200"), children: children.map((child) => renderCategory(child, level + 1)) })
+        ]
+      },
+      category.id
+    );
   };
   const renderSearch = () => {
     if (!isSearchEnabled) return null;
@@ -15027,7 +15061,18 @@ function CategoryTreeSelect(props) {
     if (!isSearchMode) return parentCategories;
     return parentCategories.filter((c) => visibleIds?.has(c.id));
   }, [isSearchMode, parentCategories, visibleIds]);
-  const renderTreeContent = () => /* @__PURE__ */ jsx46("div", { className: "space-y-0.5", children: effectiveParentCategories.length === 0 ? /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+  const effectiveChildrenMap = useMemo17(() => {
+    if (!isSearchMode || !visibleIds) return childrenMap;
+    const next = /* @__PURE__ */ new Map();
+    for (const [parentId, children] of childrenMap.entries()) {
+      next.set(
+        parentId,
+        children.filter((child) => visibleIds.has(child.id))
+      );
+    }
+    return next;
+  }, [childrenMap, isSearchMode, visibleIds]);
+  const renderTreeContent = () => /* @__PURE__ */ jsx46("div", { className: "space-y-0.5 overflow-x-hidden", children: effectiveParentCategories.length === 0 ? /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
     /* @__PURE__ */ jsx46("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: isSearchMode ? /* @__PURE__ */ jsx46(SearchX3, { className: "w-6 h-6 text-muted-foreground/50" }) : /* @__PURE__ */ jsx46(Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
     /* @__PURE__ */ jsx46("span", { className: "text-sm text-muted-foreground", children: isSearchMode ? mergedLabels.noResultsText : mergedLabels.emptyText })
   ] }) : effectiveParentCategories.map((cat) => renderCategory(cat)) });
@@ -15150,104 +15195,108 @@ function CategoryTreeSelect(props) {
       displayText = mergedLabels.selectedText(selectedCount);
     }
   }
+  const dropdownBody = /* @__PURE__ */ jsxs38(
+    "div",
+    {
+      ref: dropdownViewportRef,
+      id: `${resolvedId}-tree`,
+      className: cn("max-h-80 overflow-auto overflow-x-hidden p-2"),
+      children: [
+        renderSearch(),
+        renderTreeContent()
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs38("div", { className: cn("w-full space-y-2", className), children: [
     renderLabel(),
-    /* @__PURE__ */ jsxs38("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs38(
-        "button",
-        {
-          id: resolvedId,
-          type: "button",
-          onClick: () => !disabled && setIsOpen(!isOpen),
-          disabled,
-          role: "combobox",
-          "aria-haspopup": "tree",
-          "aria-expanded": isOpen,
-          "aria-controls": `${resolvedId}-tree`,
-          "aria-labelledby": labelId,
-          "aria-describedby": describedBy,
-          "aria-invalid": !!error,
-          className: cn(
-            "group flex w-full items-center justify-between rounded-full transition-all duration-200",
-            "backdrop-blur-sm",
-            triggerSizeStyles[size].button,
-            triggerVariantStyles[variant],
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-            disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none",
-            isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
-            error && "border-destructive focus-visible:ring-destructive/30"
-          ),
-          children: [
-            /* @__PURE__ */ jsxs38("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 text-left", children: [
-              /* @__PURE__ */ jsx46(
-                "div",
-                {
-                  className: cn(
-                    "shrink-0 flex items-center justify-center rounded-lg transition-all duration-300",
-                    triggerSizeStyles[size].iconWrap,
-                    isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
-                  ),
-                  children: /* @__PURE__ */ jsx46(FolderTree, { className: cn(triggerSizeStyles[size].icon, "transition-transform duration-300", isOpen && "scale-110") })
-                }
-              ),
-              /* @__PURE__ */ jsx46(
-                "span",
-                {
-                  className: cn(
-                    "min-w-0 flex-1 truncate font-medium transition-colors duration-200",
-                    triggerSizeStyles[size].text,
-                    selectedCount === 0 ? "text-muted-foreground" : "text-foreground"
-                  ),
-                  title: displayText,
-                  children: displayText
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs38("div", { className: "ml-2 flex shrink-0 items-center gap-1.5", children: [
-              allowClear && selectedCount > 0 && !disabled && /* @__PURE__ */ jsx46(
-                "div",
-                {
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": "Clear selection",
-                  onClick: handleClear,
-                  onKeyDown: (event) => (event.key === "Enter" || event.key === " ") && handleClear(event),
-                  className: cn(
-                    "opacity-0 group-hover:opacity-100 transition-all duration-200",
-                    "p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
-                  ),
-                  children: /* @__PURE__ */ jsx46(X13, { className: triggerSizeStyles[size].clearIcon })
-                }
-              ),
-              selectedCount > 0 && !singleSelect && /* @__PURE__ */ jsx46("span", { className: cn("rounded-full bg-primary/15 font-bold text-primary", triggerSizeStyles[size].badge), children: selectedCount }),
-              /* @__PURE__ */ jsx46("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx46(ChevronDown5, { className: triggerSizeStyles[size].actionIcon }) })
-            ] })
-          ]
-        }
-      ),
-      isOpen && !disabled && /* @__PURE__ */ jsxs38(Fragment16, { children: [
-        /* @__PURE__ */ jsx46("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
-        /* @__PURE__ */ jsxs38(
-          "div",
+    /* @__PURE__ */ jsx46(
+      Popover,
+      {
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        disabled,
+        placement: "bottom-start",
+        matchTriggerWidth: true,
+        className: "z-9999",
+        contentClassName: cn(
+          "p-0 overflow-hidden rounded-2xl md:rounded-3xl",
+          "border-border/40 bg-popover/95 text-popover-foreground",
+          "shadow-2xl backdrop-blur-xl"
+        ),
+        trigger: /* @__PURE__ */ jsxs38(
+          "button",
           {
-            ref: dropdownViewportRef,
-            id: `${resolvedId}-tree`,
+            id: resolvedId,
+            type: "button",
+            disabled,
+            role: "combobox",
+            "aria-haspopup": "tree",
+            "aria-controls": `${resolvedId}-tree`,
+            "aria-labelledby": labelId,
+            "aria-describedby": describedBy,
+            "aria-invalid": !!error,
             className: cn(
-              "absolute z-20 mt-2 w-full max-h-80 overflow-auto",
-              "rounded-2xl md:rounded-3xl border border-border/40 bg-popover/95 text-popover-foreground",
-              "shadow-2xl backdrop-blur-xl",
-              "p-2",
-              "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
+              "group flex w-full items-center justify-between rounded-full transition-all duration-200",
+              "backdrop-blur-sm",
+              triggerSizeStyles[size].button,
+              triggerVariantStyles[variant],
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none",
+              isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
+              error && "border-destructive focus-visible:ring-destructive/30"
             ),
             children: [
-              renderSearch(),
-              renderTreeContent()
+              /* @__PURE__ */ jsxs38("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 text-left", children: [
+                /* @__PURE__ */ jsx46(
+                  "div",
+                  {
+                    className: cn(
+                      "shrink-0 flex items-center justify-center rounded-lg transition-all duration-300",
+                      triggerSizeStyles[size].iconWrap,
+                      isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+                    ),
+                    children: /* @__PURE__ */ jsx46(FolderTree, { className: cn(triggerSizeStyles[size].icon, "transition-transform duration-300", isOpen && "scale-110") })
+                  }
+                ),
+                /* @__PURE__ */ jsx46(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-0 flex-1 truncate font-medium transition-colors duration-200",
+                      triggerSizeStyles[size].text,
+                      selectedCount === 0 ? "text-muted-foreground" : "text-foreground"
+                    ),
+                    title: displayText,
+                    children: displayText
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs38("div", { className: "ml-2 flex shrink-0 items-center gap-1.5", children: [
+                allowClear && selectedCount > 0 && !disabled && /* @__PURE__ */ jsx46(
+                  "div",
+                  {
+                    role: "button",
+                    tabIndex: 0,
+                    "aria-label": "Clear selection",
+                    onClick: handleClear,
+                    onKeyDown: (event) => (event.key === "Enter" || event.key === " ") && handleClear(event),
+                    className: cn(
+                      "opacity-0 group-hover:opacity-100 transition-all duration-200",
+                      "p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
+                    ),
+                    children: /* @__PURE__ */ jsx46(X13, { className: triggerSizeStyles[size].clearIcon })
+                  }
+                ),
+                selectedCount > 0 && !singleSelect && /* @__PURE__ */ jsx46("span", { className: cn("rounded-full bg-primary/15 font-bold text-primary", triggerSizeStyles[size].badge), children: selectedCount }),
+                /* @__PURE__ */ jsx46("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx46(ChevronDown5, { className: triggerSizeStyles[size].actionIcon }) })
+              ] })
             ]
           }
-        )
-      ] })
-    ] }),
+        ),
+        children: dropdownBody
+      }
+    ),
     renderAssistiveText()
   ] });
 }
@@ -15493,7 +15542,7 @@ import {
   Upload as Upload2
 } from "lucide-react";
 import { useCallback as useCallback14, useMemo as useMemo18, useRef as useRef19, useState as useState31 } from "react";
-import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 var formatFileSize = (bytes) => {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;
@@ -15926,7 +15975,7 @@ function FileUpload({
             ] }),
             /* @__PURE__ */ jsx48("p", { className: cn("text-muted-foreground", size === "lg" ? "text-sm" : "text-xs"), children: supportedFormatsText || t("supportedFormats") || `Max ${maxSize}MB per file \u2022 Up to ${maxFiles} files` })
           ] }),
-          variant === "compact" && /* @__PURE__ */ jsxs40(Fragment17, { children: [
+          variant === "compact" && /* @__PURE__ */ jsxs40(Fragment16, { children: [
             /* @__PURE__ */ jsx48("div", { className: cn("shrink-0 rounded-lg flex items-center justify-center", "bg-primary/10", currentSize.iconSize), children: /* @__PURE__ */ jsx48(Upload2, { className: cn("text-primary", size === "sm" ? "w-4 h-4" : "w-5 h-5") }) }),
             /* @__PURE__ */ jsxs40("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx48("p", { className: cn("font-medium truncate", currentSize.text), children: dragDropText || t("dragDropText") || "Drop files here or" }),
@@ -15991,9 +16040,9 @@ function FileUpload({
 }
 
 // src/components/Carousel.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight7 } from "lucide-react";
-import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -16014,19 +16063,19 @@ function Carousel({
   thumbnailRenderer,
   ariaLabel = "Carousel"
 }) {
-  const [currentIndex, setCurrentIndex] = React41.useState(0);
-  const [isPaused, setIsPaused] = React41.useState(false);
-  const [isDragging, setIsDragging] = React41.useState(false);
-  const [startPos, setStartPos] = React41.useState(0);
-  const [currentTranslate, setCurrentTranslate] = React41.useState(0);
-  const [prevTranslate, setPrevTranslate] = React41.useState(0);
-  const progressElRef = React41.useRef(null);
-  const carouselRef = React41.useRef(null);
-  const rafRef = React41.useRef(null);
-  const totalSlides = React41.Children.count(children);
+  const [currentIndex, setCurrentIndex] = React42.useState(0);
+  const [isPaused, setIsPaused] = React42.useState(false);
+  const [isDragging, setIsDragging] = React42.useState(false);
+  const [startPos, setStartPos] = React42.useState(0);
+  const [currentTranslate, setCurrentTranslate] = React42.useState(0);
+  const [prevTranslate, setPrevTranslate] = React42.useState(0);
+  const progressElRef = React42.useRef(null);
+  const carouselRef = React42.useRef(null);
+  const rafRef = React42.useRef(null);
+  const totalSlides = React42.Children.count(children);
   const maxIndex = Math.max(0, totalSlides - slidesToShow);
   const isHorizontal = orientation === "horizontal";
-  const scrollPrev = React41.useCallback(() => {
+  const scrollPrev = React42.useCallback(() => {
     setCurrentIndex((prev) => {
       if (prev === 0) {
         return loop ? maxIndex : 0;
@@ -16034,7 +16083,7 @@ function Carousel({
       return Math.max(0, prev - slidesToScroll);
     });
   }, [loop, maxIndex, slidesToScroll]);
-  const scrollNext = React41.useCallback(() => {
+  const scrollNext = React42.useCallback(() => {
     setCurrentIndex((prev) => {
       if (prev >= maxIndex) {
         return loop ? 0 : maxIndex;
@@ -16042,13 +16091,13 @@ function Carousel({
       return Math.min(maxIndex, prev + slidesToScroll);
     });
   }, [loop, maxIndex, slidesToScroll]);
-  const scrollTo = React41.useCallback(
+  const scrollTo = React42.useCallback(
     (index) => {
       setCurrentIndex(Math.min(maxIndex, Math.max(0, index)));
     },
     [maxIndex]
   );
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
         e.preventDefault();
@@ -16070,7 +16119,7 @@ function Carousel({
       return () => carousel.removeEventListener("keydown", handleKeyDown);
     }
   }, [scrollPrev, scrollNext, scrollTo, maxIndex]);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     const stop = () => {
       if (rafRef.current != null) {
         cancelAnimationFrame(rafRef.current);
@@ -16129,7 +16178,7 @@ function Carousel({
     setCurrentTranslate(0);
     setPrevTranslate(0);
   };
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     onSlideChange?.(currentIndex);
   }, [currentIndex, onSlideChange]);
   const getAnimationStyles2 = () => {
@@ -16182,7 +16231,7 @@ function Carousel({
             role: "group",
             "aria-atomic": "false",
             "aria-live": autoScroll ? "off" : "polite",
-            children: React41.Children.map(children, (child, idx) => /* @__PURE__ */ jsx49(
+            children: React42.Children.map(children, (child, idx) => /* @__PURE__ */ jsx49(
               "div",
               {
                 className: cn(
@@ -16205,7 +16254,7 @@ function Carousel({
             ))
           }
         ),
-        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs41(Fragment18, { children: [
+        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs41(Fragment17, { children: [
           /* @__PURE__ */ jsx49(
             Button_default,
             {
@@ -16272,7 +16321,7 @@ function Carousel({
               "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-linear-to-t from-black/50 to-transparent overflow-x-auto",
               isHorizontal ? "flex-row" : "flex-col"
             ),
-            children: React41.Children.map(children, (child, idx) => /* @__PURE__ */ jsx49(
+            children: React42.Children.map(children, (child, idx) => /* @__PURE__ */ jsx49(
               "button",
               {
                 onClick: () => scrollTo(idx),
@@ -16293,7 +16342,7 @@ function Carousel({
 }
 
 // src/components/FallingIcons.tsx
-import React42 from "react";
+import React43 from "react";
 import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
 var DEFAULT_COUNT = 24;
 var DEFAULT_SPEED_RANGE = [6, 14];
@@ -16321,10 +16370,10 @@ function FallingIcons({
   physics,
   easingFunction = "linear"
 }) {
-  const uid = React42.useId().replace(/[:]/g, "");
-  const containerRef = React42.useRef(null);
-  const [fallDist, setFallDist] = React42.useState(null);
-  const idRef = React42.useRef(1);
+  const uid = React43.useId().replace(/[:]/g, "");
+  const containerRef = React43.useRef(null);
+  const [fallDist, setFallDist] = React43.useState(null);
+  const idRef = React43.useRef(1);
   const gravity = physics?.gravity ?? 1;
   const windDirection = physics?.windDirection ?? 0;
   const windStrength = physics?.windStrength ?? 0;
@@ -16338,7 +16387,7 @@ function FallingIcons({
     bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
     elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
   };
-  const makeParticle = React42.useCallback(() => {
+  const makeParticle = React43.useCallback(() => {
     const rnd = (min, max) => min + Math.random() * (max - min);
     return {
       leftPct: rnd(0, 100),
@@ -16352,12 +16401,12 @@ function FallingIcons({
       key: idRef.current++
     };
   }, [sizeRange, speedRange, horizontalDrift, gravity, windDirection, windStrength]);
-  const [particles, setParticles] = React42.useState([]);
-  React42.useEffect(() => {
+  const [particles, setParticles] = React43.useState([]);
+  React43.useEffect(() => {
     const arr = Array.from({ length: Math.max(0, count) }).map(() => makeParticle());
     setParticles(arr);
   }, [count, makeParticle]);
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (fullScreen) {
       const measure2 = () => setFallDist(window.innerHeight + 200);
       measure2();
@@ -16382,14 +16431,14 @@ function FallingIcons({
   const SpinName = `uv-spin-${uid}`;
   const PopName = `uv-pop-${uid}`;
   const PhysicsSpinName = `uv-physics-spin-${uid}`;
-  const glowStyles = React42.useMemo(() => {
+  const glowStyles = React43.useMemo(() => {
     if (!glow) return {};
     const intensity = Math.max(0, Math.min(1, glowIntensity));
     return {
       filter: `drop-shadow(0 0 ${4 * intensity}px ${glowColor}) drop-shadow(0 0 ${8 * intensity}px ${glowColor})`
     };
   }, [glow, glowColor, glowIntensity]);
-  const FallbackIcon = React42.useMemo(
+  const FallbackIcon = React43.useMemo(
     () => (props) => /* @__PURE__ */ jsx50("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx50("circle", { cx: "12", cy: "12", r: "10" }) }),
     []
   );
@@ -16447,7 +16496,7 @@ function FallingIcons({
             });
           };
           const trailParticles = trail ? Array.from({ length: Math.min(5, Math.max(1, trailLength)) }) : [];
-          return /* @__PURE__ */ jsxs42(React42.Fragment, { children: [
+          return /* @__PURE__ */ jsxs42(React43.Fragment, { children: [
             trail && trailParticles.map((_, trailIndex) => {
               const trailDelay = p.delay - (trailIndex + 1) * 0.15;
               const trailOpacity = 1 - (trailIndex + 1) * (1 / (trailParticles.length + 1));
@@ -16565,9 +16614,9 @@ function FallingIcons({
 }
 
 // src/components/List.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { ChevronRight as ChevronRight8 } from "lucide-react";
-import { Fragment as Fragment19, jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -16591,7 +16640,7 @@ var ListItemSkeleton = ({ size }) => {
     ] })
   ] });
 };
-var ListRoot = React43.forwardRef(
+var ListRoot = React44.forwardRef(
   ({
     as = "ul",
     ordered,
@@ -16611,9 +16660,9 @@ var ListRoot = React43.forwardRef(
     ...rest
   }, ref) => {
     const Comp = ordered ? "ol" : as;
-    const childCount = React43.Children.count(children);
+    const childCount = React44.Children.count(children);
     const hasChildren = childCount > 0;
-    const variantClasses2 = {
+    const variantClasses3 = {
       plain: "",
       outlined: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm max-md:rounded-xl",
       soft: "rounded-2xl md:rounded-3xl bg-muted/40 border border-border/60 max-md:rounded-xl",
@@ -16627,14 +16676,14 @@ var ListRoot = React43.forwardRef(
         Comp,
         {
           ref,
-          className: cn("group/list", variantClasses2[variant], inset && "p-1.5 md:p-2 max-md:p-1", divided && "divide-y divide-border/60", className),
+          className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", divided && "divide-y divide-border/60", className),
           ...rest,
           children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ jsx51(ListItemSkeleton, { size }, i))
         }
       );
     }
     if (!hasChildren && emptyText) {
-      return /* @__PURE__ */ jsx51(Comp, { ref, className: cn("group/list", variantClasses2[variant], inset && "p-1.5 md:p-2 max-md:p-1", className), ...rest, children: /* @__PURE__ */ jsx51("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
+      return /* @__PURE__ */ jsx51(Comp, { ref, className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", className), ...rest, children: /* @__PURE__ */ jsx51("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
     }
     return /* @__PURE__ */ jsx51(
       Comp,
@@ -16642,21 +16691,21 @@ var ListRoot = React43.forwardRef(
         ref,
         className: cn(
           "group/list",
-          variantClasses2[variant],
+          variantClasses3[variant],
           inset && "p-1.5 md:p-2 max-md:p-1",
           divided && "divide-y divide-border/60",
           variant === "striped" && "[&>*:nth-child(even)]:bg-muted/30",
           className
         ),
         ...rest,
-        children: React43.Children.map(children, (child, idx) => {
-          if (!React43.isValidElement(child)) return child;
+        children: React44.Children.map(children, (child, idx) => {
+          if (!React44.isValidElement(child)) return child;
           const childClass = cn(
             child.props?.className,
             hoverable && variant !== "flush" && "hover:bg-accent/50 focus:bg-accent/60 focus:outline-none transition-colors",
             variant === "flush" && "hover:bg-accent/30"
           );
-          return React43.cloneElement(child, {
+          return React44.cloneElement(child, {
             className: childClass,
             // Pass global item class to contentClassName of ListItem
             contentClassName: cn(itemClassName, child.props?.contentClassName),
@@ -16671,7 +16720,7 @@ var ListRoot = React43.forwardRef(
   }
 );
 ListRoot.displayName = "List";
-var ListItem = React43.forwardRef(
+var ListItem = React44.forwardRef(
   ({
     as = "li",
     selected = false,
@@ -16694,7 +16743,7 @@ var ListItem = React43.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const [internalExpanded, setInternalExpanded] = React43.useState(false);
+    const [internalExpanded, setInternalExpanded] = React44.useState(false);
     const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
     const sizeAttr = rest["data-size"];
     const resolvedSize = sizeAttr && ["xs", "sm", "md", "lg"].includes(sizeAttr) ? sizeAttr : "md";
@@ -16719,7 +16768,7 @@ var ListItem = React43.forwardRef(
         }
       }
     } : {};
-    const inner = /* @__PURE__ */ jsxs43(Fragment19, { children: [
+    const inner = /* @__PURE__ */ jsxs43(Fragment18, { children: [
       /* @__PURE__ */ jsxs43("div", { className: cn("flex items-center gap-3 group/item relative max-md:gap-2.5", contentClassName), ...headerProps, children: [
         avatar && /* @__PURE__ */ jsx51("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx51("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
         Left && !avatar && /* @__PURE__ */ jsx51("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx51(Left, { className: cn(sz.icon) }) }),
@@ -16762,9 +16811,9 @@ var List = Object.assign(ListRoot, { Item: ListItem });
 var List_default = List;
 
 // src/components/Watermark.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment20, jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
   draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
@@ -16774,8 +16823,8 @@ var PRESETS2 = {
   internal: { text: "INTERNAL USE ONLY", color: "rgba(156, 163, 175, 0.15)", rotate: -22, fontSize: 13, fontWeight: "600" }
 };
 function useWatermarkDataURL(opts) {
-  const [url, setUrl] = React44.useState(null);
-  React44.useEffect(() => {
+  const [url, setUrl] = React45.useState(null);
+  React45.useEffect(() => {
     let cancelled = false;
     const text = opts.text;
     const image = opts.image;
@@ -16952,9 +17001,9 @@ var Watermark = ({
   children,
   ...rest
 }) => {
-  const [visible, setVisible] = React44.useState(true);
-  const [isDark, setIsDark] = React44.useState(false);
-  React44.useEffect(() => {
+  const [visible, setVisible] = React45.useState(true);
+  const [isDark, setIsDark] = React45.useState(false);
+  React45.useEffect(() => {
     if (!darkMode) return;
     const checkDarkMode = () => {
       const isDarkMode = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -17043,7 +17092,7 @@ var Watermark = ({
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsxs44(Fragment20, { children: [
+    return /* @__PURE__ */ jsxs44(Fragment19, { children: [
       children,
       typeof window !== "undefined" ? createPortal5(overlay, document.body) : null
     ] });
@@ -17056,7 +17105,7 @@ var Watermark = ({
 var Watermark_default = Watermark;
 
 // src/components/Timeline.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import { ChevronDown as ChevronDown6 } from "lucide-react";
 import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
 var SIZE_STYLE = {
@@ -17109,7 +17158,7 @@ var STATUS_COLOR = {
   error: "bg-destructive",
   info: "bg-info"
 };
-var TimelineContext = React45.createContext(null);
+var TimelineContext = React46.createContext(null);
 var LINE_STYLE_MAP = {
   solid: "border-solid",
   dashed: "border-dashed",
@@ -17137,7 +17186,7 @@ var Marker = ({ index, last, size, color, status = "default", lineColor, lineSty
     !last && showLine && /* @__PURE__ */ jsx53("div", { className: cn("flex-1 border-l-2", LINE_STYLE_MAP[lineStyle]), style: { borderColor: lineColor || "hsl(var(--border))" } })
   ] });
 };
-var TimelineRoot = React45.forwardRef(
+var TimelineRoot = React46.forwardRef(
   ({
     align = "left",
     variant = "default",
@@ -17167,7 +17216,7 @@ var TimelineRoot = React45.forwardRef(
   }
 );
 TimelineRoot.displayName = "Timeline";
-var TimelineItem = React45.forwardRef(
+var TimelineItem = React46.forwardRef(
   ({
     title,
     description,
@@ -17186,11 +17235,11 @@ var TimelineItem = React45.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const ctx = React45.useContext(TimelineContext);
+    const ctx = React46.useContext(TimelineContext);
     const idx = rest["data-index"];
     const isLast = Boolean(rest["data-last"]);
     const sz = SIZE_STYLE[ctx.size];
-    const [internalExpanded, setInternalExpanded] = React45.useState(false);
+    const [internalExpanded, setInternalExpanded] = React46.useState(false);
     const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
     const toggleExpanded = () => {
       const newExpanded = !isExpanded;
@@ -17201,7 +17250,7 @@ var TimelineItem = React45.forwardRef(
       }
     };
     const padding = ctx.dense ? sz.densePadY : sz.padY;
-    const variantClasses2 = {
+    const variantClasses3 = {
       default: "",
       outlined: "rounded-xl border border-border bg-card shadow-sm px-4 py-3",
       card: "rounded-2xl border border-border bg-card shadow-md px-5 py-4",
@@ -17209,7 +17258,7 @@ var TimelineItem = React45.forwardRef(
       modern: "rounded-xl bg-linear-to-r from-card to-muted/20 border border-border/50 px-5 py-4 backdrop-blur-sm",
       gradient: "rounded-2xl bg-linear-to-br from-primary/10 via-card to-accent/10 border border-primary/20 px-5 py-4 shadow-lg"
     };
-    const contentBox = /* @__PURE__ */ jsxs45("div", { className: cn("min-w-0 flex-1", variantClasses2[ctx.variant]), children: [
+    const contentBox = /* @__PURE__ */ jsxs45("div", { className: cn("min-w-0 flex-1", variantClasses3[ctx.variant]), children: [
       /* @__PURE__ */ jsxs45("div", { className: "flex items-start justify-between gap-2", children: [
         /* @__PURE__ */ jsxs45("div", { className: "flex-1 min-w-0", children: [
           title && /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
@@ -17332,7 +17381,7 @@ var Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });
 var Timeline_default = Timeline;
 
 // src/components/ColorPicker.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { Pipette, X as X15, Copy, Check as Check9, Palette, History } from "lucide-react";
 import { jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
 var clamp7 = (n, min, max) => Math.max(min, Math.min(max, n));
@@ -17526,12 +17575,12 @@ function ColorPicker({
 }) {
   const isControlled = value !== void 0;
   const initial = parseAnyColor(isControlled ? value : defaultValue) || { r: 79, g: 70, b: 229, a: 1 };
-  const [rgba, setRgba] = React46.useState(initial);
-  const [open, setOpen] = React46.useState(false);
-  const [text, setText] = React46.useState(() => formatOutput(initial, withAlpha, format));
-  const [copied, setCopied] = React46.useState(false);
-  const [recentColors, setRecentColors] = React46.useState([]);
-  React46.useEffect(() => {
+  const [rgba, setRgba] = React47.useState(initial);
+  const [open, setOpen] = React47.useState(false);
+  const [text, setText] = React47.useState(() => formatOutput(initial, withAlpha, format));
+  const [copied, setCopied] = React47.useState(false);
+  const [recentColors, setRecentColors] = React47.useState([]);
+  React47.useEffect(() => {
     if (isControlled) {
       const parsed = parseAnyColor(value);
       if (parsed) {
@@ -18207,8 +18256,8 @@ var MusicPlayer = ({
 var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
-import React48, { useId as useId8 } from "react";
-import { Fragment as Fragment21, jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
+import React49, { useId as useId8 } from "react";
+import { Fragment as Fragment20, jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -18247,7 +18296,7 @@ function getVariantClasses(variant = "default", outlined) {
   };
   return variants[variant] || "";
 }
-var GridRoot = React48.forwardRef(
+var GridRoot = React49.forwardRef(
   ({
     columns,
     rows,
@@ -18331,7 +18380,7 @@ var GridRoot = React48.forwardRef(
   }
 );
 GridRoot.displayName = "Grid";
-var GridItem = React48.forwardRef(
+var GridItem = React49.forwardRef(
   ({
     colSpan,
     rowSpan,
@@ -18365,7 +18414,7 @@ var GridItem = React48.forwardRef(
       st.opacity = 0;
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
-    return /* @__PURE__ */ jsxs48(Fragment21, { children: [
+    return /* @__PURE__ */ jsxs48(Fragment20, { children: [
       animationDelay != null && /* @__PURE__ */ jsx56(
         "style",
         {
@@ -18400,7 +18449,7 @@ import { useMemo as useMemo19, useState as useState39, useRef as useRef23, useCa
 // src/components/ChartTooltip.tsx
 import { useEffect as useEffect27, useState as useState38, useRef as useRef22 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { Fragment as Fragment22, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
 function ChartTooltip({
   x,
   y,
@@ -18470,7 +18519,7 @@ function ChartTooltip({
                   ":"
                 ] }),
                 /* @__PURE__ */ jsx57("span", { className: "font-semibold ml-auto", children: formatter ? formatter(item.value) : item.value })
-              ] }, i)) }) : /* @__PURE__ */ jsxs49(Fragment22, { children: [
+              ] }, i)) }) : /* @__PURE__ */ jsxs49(Fragment21, { children: [
                 /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-2", children: [
                   color && /* @__PURE__ */ jsx57("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: color } }),
                   /* @__PURE__ */ jsx57("span", { className: "font-semibold", children: formatter && value != null ? formatter(value) : value })
@@ -18525,7 +18574,7 @@ function getPathLength(points) {
 }
 
 // src/components/LineChart.tsx
-import { Fragment as Fragment23, jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
 function LineChart({
   data,
   series,
@@ -18605,7 +18654,7 @@ function LineChart({
     }
     return lines;
   }, [minValue, maxValue, chartHeight, padding.top]);
-  return /* @__PURE__ */ jsxs50(Fragment23, { children: [
+  return /* @__PURE__ */ jsxs50(Fragment22, { children: [
     /* @__PURE__ */ jsxs50("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
       /* @__PURE__ */ jsx58("defs", { children: /* @__PURE__ */ jsx58("clipPath", { id: clipId, children: /* @__PURE__ */ jsx58("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ jsx58("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsxs50("g", { children: [
@@ -18799,7 +18848,7 @@ function LineChart({
 
 // src/components/BarChart.tsx
 import { useMemo as useMemo20, useState as useState40, useRef as useRef24 } from "react";
-import { Fragment as Fragment24, jsx as jsx59, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx59, jsxs as jsxs51 } from "react/jsx-runtime";
 function BarChart({
   data,
   series,
@@ -18941,9 +18990,9 @@ function BarChart({
     }
     return { maxValue: max, barGroups: groups, gridLines: lines };
   }, [normalizedSeries, chartWidth, chartHeight, horizontal, stacked, barGap, padding, width, height]);
-  return /* @__PURE__ */ jsxs51(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs51(Fragment23, { children: [
     /* @__PURE__ */ jsxs51("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
-      showGrid && /* @__PURE__ */ jsx59("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx59("g", { children: horizontal ? /* @__PURE__ */ jsxs51(Fragment24, { children: [
+      showGrid && /* @__PURE__ */ jsx59("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx59("g", { children: horizontal ? /* @__PURE__ */ jsxs51(Fragment23, { children: [
         /* @__PURE__ */ jsx59("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ jsx59(
           "text",
@@ -18957,7 +19006,7 @@ function BarChart({
             children: formatValue ? formatValue(line.value) : line.value.toFixed(0)
           }
         )
-      ] }) : /* @__PURE__ */ jsxs51(Fragment24, { children: [
+      ] }) : /* @__PURE__ */ jsxs51(Fragment23, { children: [
         /* @__PURE__ */ jsx59("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ jsx59(
           "text",
@@ -20044,16 +20093,16 @@ function GaugeChart({
 
 // src/components/ClientOnly.tsx
 import { useEffect as useEffect28, useState as useState44 } from "react";
-import { Fragment as Fragment25, jsx as jsx65 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx65 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const [hasMounted, setHasMounted] = useState44(false);
   useEffect28(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx65(Fragment25, { children: fallback });
+    return /* @__PURE__ */ jsx65(Fragment24, { children: fallback });
   }
-  return /* @__PURE__ */ jsx65(Fragment25, { children });
+  return /* @__PURE__ */ jsx65(Fragment24, { children });
 }
 
 // src/components/Loading.tsx
@@ -20143,7 +20192,7 @@ var LoadingBar = ({
 };
 
 // src/components/Table.tsx
-import React57 from "react";
+import React58 from "react";
 import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
 var TABLE_BASE_CLASS = "w-full caption-bottom text-sm";
 var TABLE_CONTAINER_BASE_CLASS = [
@@ -20161,8 +20210,8 @@ function assignRef3(ref, value) {
     ref.current = value;
   }
 }
-var TableContainer = React57.forwardRef(({ className, useOverlayScrollbar = false, ...props }, ref) => {
-  const containerRef = React57.useRef(null);
+var TableContainer = React58.forwardRef(({ className, useOverlayScrollbar = false, ...props }, ref) => {
+  const containerRef = React58.useRef(null);
   useOverlayScrollbarTarget(containerRef, { enabled: useOverlayScrollbar });
   return /* @__PURE__ */ jsx67(
     "div",
@@ -20177,7 +20226,7 @@ var TableContainer = React57.forwardRef(({ className, useOverlayScrollbar = fals
   );
 });
 TableContainer.displayName = "TableContainer";
-var Table = React57.forwardRef(
+var Table = React58.forwardRef(
   ({ className, containerClassName, disableContainer = false, useOverlayScrollbar = false, ...props }, ref) => {
     if (disableContainer) {
       return /* @__PURE__ */ jsx67("table", { ref, className: cn(TABLE_BASE_CLASS, className), ...props });
@@ -20186,16 +20235,16 @@ var Table = React57.forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableHeader = React57.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ jsxs58("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted", className), ...props, children: [
+var TableHeader = React58.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ jsxs58("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted", className), ...props, children: [
   children,
   filterRow
 ] }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+var TableBody = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
+var TableFooter = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
 TableFooter.displayName = "TableFooter";
-var TableRow = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67(
+var TableRow = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67(
   "tr",
   {
     ref,
@@ -20209,7 +20258,7 @@ var TableRow = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67(
+var TableHead = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67(
   "th",
   {
     ref,
@@ -20218,13 +20267,13 @@ var TableHead = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
+var TableCell = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
 TableCell.displayName = "TableCell";
-var TableCaption = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+var TableCaption = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
 TableCaption.displayName = "TableCaption";
 
 // src/components/DataTable/DataTable.tsx
-import React66 from "react";
+import React67 from "react";
 
 // src/components/DataTable/components/DataTableBody.tsx
 import { jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
@@ -20296,9 +20345,9 @@ function DataTableBodyRows({
 }
 
 // src/components/DataTable/components/DataTableHeader.tsx
-import React58 from "react";
+import React59 from "react";
 import { Filter as FilterIcon } from "lucide-react";
-import { Fragment as Fragment26, jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
 function DataTableHeader({
   headerRows,
   headerAlign,
@@ -20316,7 +20365,7 @@ function DataTableHeader({
   getStickyHeaderCellStyle,
   t
 }) {
-  const renderFilterControl = React58.useCallback(
+  const renderFilterControl = React59.useCallback(
     (col) => {
       if (!col.filter) return null;
       const key = col.key;
@@ -20369,7 +20418,7 @@ function DataTableHeader({
     },
     [filters, setCurPage, setFilters, size]
   );
-  const renderHeaderContent = React58.useCallback(
+  const renderHeaderContent = React59.useCallback(
     (col, isLeaf) => {
       if (!isLeaf) {
         return /* @__PURE__ */ jsx69(
@@ -20479,10 +20528,10 @@ function DataTableHeader({
             isCenterAlign && "justify-center",
             !isRightAlign && !isCenterAlign && "justify-start"
           ),
-          children: isRightAlign ? /* @__PURE__ */ jsxs60(Fragment26, { children: [
+          children: isRightAlign ? /* @__PURE__ */ jsxs60(Fragment25, { children: [
             filterContent,
             titleContent
-          ] }) : /* @__PURE__ */ jsxs60(Fragment26, { children: [
+          ] }) : /* @__PURE__ */ jsxs60(Fragment25, { children: [
             titleContent,
             filterContent
           ] })
@@ -20503,7 +20552,7 @@ function DataTableHeader({
       t
     ]
   );
-  return /* @__PURE__ */ jsx69(Fragment26, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx69(TableRow, { children: row.map((headerCell, cellIndex) => {
+  return /* @__PURE__ */ jsx69(Fragment25, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx69(TableRow, { children: row.map((headerCell, cellIndex) => {
     const { column: col, colSpan, rowSpan, isLeaf } = headerCell;
     const prevCell = cellIndex > 0 ? row[cellIndex - 1] : null;
     const prevCol = prevCell?.column;
@@ -20532,7 +20581,7 @@ function DataTableHeader({
 }
 
 // src/components/DataTable/components/Pagination.tsx
-import React59 from "react";
+import React60 from "react";
 import { jsx as jsx70, jsxs as jsxs61 } from "react/jsx-runtime";
 function DataTablePagination({
   totalItems,
@@ -20551,7 +20600,7 @@ function DataTablePagination({
   const pageBtnClass = size === "sm" ? "h-6 min-w-6 px-1.5 rounded-full text-[11px] font-medium transition-colors" : size === "lg" ? "h-8 min-w-8 px-2.5 rounded-full text-sm font-medium transition-colors" : "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors";
   const containerTextClass = size === "sm" ? "text-[11px]" : size === "lg" ? "text-sm" : "text-xs";
   const pageSizeClass = size === "sm" ? "w-16" : size === "lg" ? "w-24" : "w-20";
-  const pages = React59.useMemo(() => {
+  const pages = React60.useMemo(() => {
     const result = [];
     if (totalPages <= 5) {
       for (let i = 1; i <= totalPages; i++) result.push(i);
@@ -20626,7 +20675,7 @@ function DataTablePagination({
 }
 
 // src/components/DataTable/components/Toolbar.tsx
-import React60 from "react";
+import React61 from "react";
 
 // src/components/DataTable/utils/headers.ts
 function isLeafColumn(col) {
@@ -20747,7 +20796,7 @@ function DataTableToolbar({
   const controlButtonClass = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-9 px-3 text-sm" : "h-8 px-2";
   const iconClass = size === "sm" ? "w-3.5 h-3.5 mr-1" : "w-4 h-4 mr-1";
   const captionClass = size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-sm";
-  const leafCols = React60.useMemo(() => getLeafColumns(columns), [columns]);
+  const leafCols = React61.useMemo(() => getLeafColumns(columns), [columns]);
   return /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
     /* @__PURE__ */ jsx71("div", { className: captionClass + " text-muted-foreground", children: caption }),
     /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-2", children: [
@@ -20815,10 +20864,10 @@ function DataTableToolbar({
 }
 
 // src/components/DataTable/hooks/useDebounced.ts
-import React61 from "react";
+import React62 from "react";
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = React61.useState(value);
-  React61.useEffect(() => {
+  const [debounced, setDebounced] = React62.useState(value);
+  React62.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -20826,7 +20875,7 @@ function useDebounced(value, delay = 300) {
 }
 
 // src/components/DataTable/hooks/useDataTableModel.ts
-import React62 from "react";
+import React63 from "react";
 
 // src/components/DataTable/utils/columns.ts
 function getColumnWidth(col, fallback = 150) {
@@ -20854,22 +20903,22 @@ function useDataTableModel({
   isServerMode,
   total
 }) {
-  const visibleColsSet = React62.useMemo(() => new Set(visibleCols), [visibleCols]);
-  const allLeafColumns = React62.useMemo(() => getLeafColumns(columns), [columns]);
-  const columnMap = React62.useMemo(() => {
+  const visibleColsSet = React63.useMemo(() => new Set(visibleCols), [visibleCols]);
+  const allLeafColumns = React63.useMemo(() => getLeafColumns(columns), [columns]);
+  const columnMap = React63.useMemo(() => {
     return new Map(allLeafColumns.map((column) => [column.key, column]));
   }, [allLeafColumns]);
-  const visibleColumns = React62.useMemo(() => {
+  const visibleColumns = React63.useMemo(() => {
     return filterVisibleColumns(columns, visibleColsSet);
   }, [columns, visibleColsSet]);
-  const leafColumns = React62.useMemo(() => {
+  const leafColumns = React63.useMemo(() => {
     return getLeafColumnsWithFixedInheritance(visibleColumns);
   }, [visibleColumns]);
-  const headerRows = React62.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
-  const totalColumnsWidth = React62.useMemo(() => {
+  const headerRows = React63.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
+  const totalColumnsWidth = React63.useMemo(() => {
     return leafColumns.reduce((sum, column) => sum + getColumnWidth(column), 0);
   }, [leafColumns]);
-  const processedData = React62.useMemo(() => {
+  const processedData = React63.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
     if (Object.keys(filters).length > 0) {
@@ -20901,7 +20950,7 @@ function useDataTableModel({
     return result;
   }, [columnMap, data, filters, isServerMode, sort]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = React62.useMemo(() => {
+  const displayedData = React63.useMemo(() => {
     if (isServerMode) return data;
     const start = (curPage - 1) * curPageSize;
     return processedData.slice(start, start + curPageSize);
@@ -20917,13 +20966,13 @@ function useDataTableModel({
 }
 
 // src/components/DataTable/hooks/useDataTableState.ts
-import React64 from "react";
+import React65 from "react";
 
 // src/components/DataTable/hooks/usePageSizeStorage.ts
-import React63 from "react";
+import React64 from "react";
 function usePageSizeStorage({ pageSize, storageKey }) {
-  const loadedFromStorage = React63.useRef(false);
-  const [curPageSize, setCurPageSize] = React63.useState(() => {
+  const loadedFromStorage = React64.useRef(false);
+  const [curPageSize, setCurPageSize] = React64.useState(() => {
     if (typeof window === "undefined" || !storageKey) return pageSize;
     try {
       const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
@@ -20938,11 +20987,11 @@ function usePageSizeStorage({ pageSize, storageKey }) {
     }
     return pageSize;
   });
-  const hasMounted = React63.useRef(false);
-  React63.useEffect(() => {
+  const hasMounted = React64.useRef(false);
+  React64.useEffect(() => {
     hasMounted.current = true;
   }, []);
-  React63.useEffect(() => {
+  React64.useEffect(() => {
     if (typeof window === "undefined" || !storageKey) return;
     if (!hasMounted.current) return;
     try {
@@ -20950,7 +20999,7 @@ function usePageSizeStorage({ pageSize, storageKey }) {
     } catch {
     }
   }, [curPageSize, storageKey]);
-  React63.useEffect(() => {
+  React64.useEffect(() => {
     if (storageKey && loadedFromStorage.current) return;
     setCurPageSize(pageSize);
   }, [pageSize, storageKey]);
@@ -20970,17 +21019,17 @@ function useDataTableState({
   size,
   storageKey
 }) {
-  const allLeafColumns = React64.useMemo(() => getLeafColumns(columns), [columns]);
-  const defaultVisibleLeafKeys = React64.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
-  const knownLeafKeysRef = React64.useRef(new Set(defaultVisibleLeafKeys));
-  const [headerAlign, setHeaderAlign] = React64.useState("left");
-  const [visibleCols, setVisibleCols] = React64.useState(defaultVisibleLeafKeys);
-  const [filters, setFilters] = React64.useState({});
-  const [sort, setSort] = React64.useState(null);
-  const [density, setDensity] = React64.useState(() => SIZE_TO_DENSITY[size]);
-  const [curPage, setCurPage] = React64.useState(page);
+  const allLeafColumns = React65.useMemo(() => getLeafColumns(columns), [columns]);
+  const defaultVisibleLeafKeys = React65.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
+  const knownLeafKeysRef = React65.useRef(new Set(defaultVisibleLeafKeys));
+  const [headerAlign, setHeaderAlign] = React65.useState("left");
+  const [visibleCols, setVisibleCols] = React65.useState(defaultVisibleLeafKeys);
+  const [filters, setFilters] = React65.useState({});
+  const [sort, setSort] = React65.useState(null);
+  const [density, setDensity] = React65.useState(() => SIZE_TO_DENSITY[size]);
+  const [curPage, setCurPage] = React65.useState(page);
   const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     const knownLeafKeys = knownLeafKeysRef.current;
     setVisibleCols((prev) => {
       const prevSet = new Set(prev);
@@ -20988,10 +21037,10 @@ function useDataTableState({
     });
     knownLeafKeysRef.current = new Set(allLeafColumns.map((column) => column.key));
   }, [allLeafColumns]);
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     setCurPage(page);
   }, [page]);
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     setDensity(SIZE_TO_DENSITY[size]);
   }, [size]);
   return {
@@ -21013,7 +21062,7 @@ function useDataTableState({
 }
 
 // src/components/DataTable/hooks/useStickyColumns.ts
-import React65 from "react";
+import React66 from "react";
 
 // src/components/DataTable/utils/sticky.ts
 function buildStickyLayout(visibleColumns) {
@@ -21060,8 +21109,8 @@ function resolveGroupStickyPosition(column, positions) {
 
 // src/components/DataTable/hooks/useStickyColumns.ts
 function useStickyColumns(visibleColumns) {
-  const { positions, leftBoundaryKey, rightBoundaryKey } = React65.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
-  const getStickyColumnStyle = React65.useCallback(
+  const { positions, leftBoundaryKey, rightBoundaryKey } = React66.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
+  const getStickyColumnStyle = React66.useCallback(
     (col) => {
       const pos = resolveStickyPosition(col, positions);
       if (!pos) return {};
@@ -21072,7 +21121,7 @@ function useStickyColumns(visibleColumns) {
     },
     [positions]
   );
-  const getBoundaryShadowClass = React65.useCallback(
+  const getBoundaryShadowClass = React66.useCallback(
     (col) => {
       if (col.fixed === "left" && col.key === leftBoundaryKey) {
         return "border-r border-border/80 shadow-[10px_0_16px_-10px_rgba(0,0,0,0.55)]";
@@ -21084,14 +21133,14 @@ function useStickyColumns(visibleColumns) {
     },
     [leftBoundaryKey, rightBoundaryKey]
   );
-  const getStickyHeaderClass = React65.useCallback(
+  const getStickyHeaderClass = React66.useCallback(
     (col) => {
       if (!col.fixed) return "";
       return cn("sticky", col.fixed === "left" && "left-0", col.fixed === "right" && "right-0", getBoundaryShadowClass(col), "z-50 !bg-muted");
     },
     [getBoundaryShadowClass]
   );
-  const getStickyCellClass = React65.useCallback(
+  const getStickyCellClass = React66.useCallback(
     (col, isStripedRow) => {
       if (!col.fixed) return "";
       return cn(
@@ -21104,7 +21153,7 @@ function useStickyColumns(visibleColumns) {
     },
     [getBoundaryShadowClass]
   );
-  const getStickyHeaderCellStyle = React65.useCallback(
+  const getStickyHeaderCellStyle = React66.useCallback(
     (headerCell) => {
       const col = headerCell.column;
       if (headerCell.isLeaf) {
@@ -21251,7 +21300,7 @@ function DataTable({
     size,
     storageKey
   });
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     if (process.env.NODE_ENV === "development") {
       const warnings = validateColumns(columns);
       warnings.forEach((w) => console.warn(`[DataTable] ${w}`));
@@ -21259,8 +21308,8 @@ function DataTable({
   }, [columns]);
   const debouncedFilters = useDebounced(filters, 350);
   const isServerMode = Boolean(onQueryChange);
-  const hasEmittedQuery = React66.useRef(false);
-  React66.useEffect(() => {
+  const hasEmittedQuery = React67.useRef(false);
+  React67.useEffect(() => {
     if (!onQueryChange) return;
     if (!hasEmittedQuery.current) {
       hasEmittedQuery.current = true;
@@ -21268,7 +21317,7 @@ function DataTable({
     }
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
   }, [debouncedFilters, sort, curPage, curPageSize, onQueryChange]);
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     if (process.env.NODE_ENV !== "development" || rowKey) return;
     const hasQueryFeatures = columns.some((column) => column.sortable || column.filter) || Boolean(pageSizeOptions?.length) || isServerMode;
     if (!hasQueryFeatures) return;
@@ -21296,7 +21345,7 @@ function DataTable({
     if (typeof rowKey === "function") return String(rowKey(row));
     return String(row[rowKey]);
   };
-  const viewportRef = React66.useRef(null);
+  const viewportRef = React67.useRef(null);
   useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
   return /* @__PURE__ */ jsxs63("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsx72(
@@ -21402,10 +21451,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // src/components/Form.tsx
-import * as React67 from "react";
+import * as React68 from "react";
 import { Controller, FormProvider, useFormContext, useForm } from "react-hook-form";
 import { jsx as jsx73, jsxs as jsxs64 } from "react/jsx-runtime";
-var FormConfigContext = React67.createContext({ size: "md" });
+var FormConfigContext = React68.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -21418,7 +21467,7 @@ var FormWrapper = ({
   const methods = useForm({
     defaultValues: initialValues
   });
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
@@ -21427,15 +21476,15 @@ var FormWrapper = ({
   return /* @__PURE__ */ jsx73(FormProvider, { ...methods, children: /* @__PURE__ */ jsx73(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx73("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React67.createContext({});
+var FormFieldContext = React68.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx73(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx73(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React67.useContext(FormFieldContext);
-  const itemContext = React67.useContext(FormItemContext);
+  const fieldContext = React68.useContext(FormFieldContext);
+  const itemContext = React68.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     try {
@@ -21456,16 +21505,16 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React67.createContext({});
-var FormItem = React67.forwardRef(({ className, ...props }, ref) => {
-  const id = React67.useId();
+var FormItemContext = React68.createContext({});
+var FormItem = React68.forwardRef(({ className, ...props }, ref) => {
+  const id = React68.useId();
   return /* @__PURE__ */ jsx73(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx73("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React67.forwardRef(
+var FormLabel = React68.forwardRef(
   ({ className, children, required, ...props }, ref) => {
     const { error, formItemId } = useFormField();
-    const config = React67.useContext(FormConfigContext);
+    const config = React68.useContext(FormConfigContext);
     const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
     return /* @__PURE__ */ jsxs64(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
       children,
@@ -21474,7 +21523,7 @@ var FormLabel = React67.forwardRef(
   }
 );
 FormLabel.displayName = "FormLabel";
-var FormControl = React67.forwardRef(({ ...props }, ref) => {
+var FormControl = React68.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ jsx73(
     "div",
@@ -21488,12 +21537,12 @@ var FormControl = React67.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React67.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React68.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx73("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React67.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React68.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
@@ -21502,7 +21551,7 @@ var FormMessage = React67.forwardRef(({ className, children, ...props }, ref) =>
   return /* @__PURE__ */ jsx73("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React67.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx73(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx73(
+var FormInput = React68.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx73(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx73(
   FormField,
   {
     name,
@@ -21513,7 +21562,7 @@ var FormInput = React67.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React67.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx73(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx73(
+var FormCheckbox = React68.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx73(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx73(
   FormField,
   {
     name,
@@ -21537,9 +21586,9 @@ var FormCheckbox = React67.forwardRef(({ name, ...props }, ref) => /* @__PURE__
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx73("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx73("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React67.forwardRef(
+var FormSubmitButton = React68.forwardRef(
   ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx73(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx73(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
 );
 FormSubmitButton.displayName = "FormSubmitButton";
@@ -21623,7 +21672,7 @@ function AccessDenied({
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
 import { useEffect as useEffect30, useRef as useRef28, useState as useState45 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { Fragment as Fragment27, jsx as jsx76, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx76, jsxs as jsxs67 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -21674,7 +21723,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx76(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs67(Fragment27, { children: [
+    isOpen && /* @__PURE__ */ jsxs67(Fragment26, { children: [
       typeof window !== "undefined" && createPortal7(/* @__PURE__ */ jsx76("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal7(
         /* @__PURE__ */ jsx76(
@@ -21726,7 +21775,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef29, useState as useState46 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment28, jsx as jsx77, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx77, jsxs as jsxs68 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -21771,7 +21820,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx77(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs68(Fragment28, { children: [
+    isOpen && /* @__PURE__ */ jsxs68(Fragment27, { children: [
       typeof window !== "undefined" && createPortal8(/* @__PURE__ */ jsx77("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal8(
         /* @__PURE__ */ jsx77(
@@ -21830,7 +21879,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // ../../lib/i18n/translation-adapter.tsx
-import * as React69 from "react";
+import * as React70 from "react";
 import { jsx as jsx78 } from "react/jsx-runtime";
 var defaultTranslations2 = {
   en: {
@@ -22178,9 +22227,9 @@ var defaultTranslations2 = {
     }
   }
 };
-var TranslationContext2 = React69.createContext(null);
+var TranslationContext2 = React70.createContext(null);
 var UnderverseProvider = ({ children, locale = "en", translations }) => {
-  const t = React69.useCallback(
+  const t = React70.useCallback(
     (namespace) => {
       return (key) => {
         const mergedTranslations = {
@@ -22246,7 +22295,7 @@ function getInternalTranslation(namespace, locale) {
   };
 }
 function useTranslations(namespace) {
-  const underverseContext = React69.useContext(TranslationContext2);
+  const underverseContext = React70.useContext(TranslationContext2);
   if (underverseContext) {
     return (key, params) => {
       const result = underverseContext.t(namespace)(key);
@@ -22263,7 +22312,7 @@ function useTranslations(namespace) {
   return getInternalTranslation(namespace, "en");
 }
 function useLocale() {
-  const underverseContext = React69.useContext(TranslationContext2);
+  const underverseContext = React70.useContext(TranslationContext2);
   if (underverseContext) {
     return underverseContext.locale;
   }
@@ -22282,7 +22331,7 @@ function useLocale() {
 }
 
 // src/components/UEditor/UEditor.tsx
-import React78, { useEffect as useEffect37, useImperativeHandle as useImperativeHandle3, useMemo as useMemo29, useRef as useRef36 } from "react";
+import React79, { useEffect as useEffect37, useImperativeHandle as useImperativeHandle3, useMemo as useMemo29, useRef as useRef36 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -23888,7 +23937,7 @@ function buildUEditorExtensions({
 }
 
 // src/components/UEditor/toolbar.tsx
-import React76, { useRef as useRef34, useState as useState52 } from "react";
+import React77, { useRef as useRef34, useState as useState52 } from "react";
 import {
   AlignCenter,
   AlignJustify,
@@ -24272,7 +24321,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
 };
 
 // src/components/UEditor/toolbar.tsx
-import { Fragment as Fragment29, jsx as jsx85, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx85, jsxs as jsxs75 } from "react/jsx-runtime";
 function fileToDataUrl2(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -24281,7 +24330,7 @@ function fileToDataUrl2(file) {
     reader.readAsDataURL(file);
   });
 }
-var ToolbarButton = React76.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
+var ToolbarButton = React77.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
   const button = /* @__PURE__ */ jsx85(
     "button",
     {
@@ -24629,7 +24678,7 @@ var EditorToolbar = ({
             },
             onCancel: () => setShowImageInput(false)
           }
-        ) : /* @__PURE__ */ jsxs75(Fragment29, { children: [
+        ) : /* @__PURE__ */ jsxs75(Fragment28, { children: [
           /* @__PURE__ */ jsx85(DropdownMenuItem, { icon: LinkIcon, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true) }),
           /* @__PURE__ */ jsx85(
             DropdownMenuItem,
@@ -25486,7 +25535,7 @@ async function prepareUEditorContentForSave({
 
 // src/components/UEditor/UEditor.tsx
 import { jsx as jsx87, jsxs as jsxs78 } from "react/jsx-runtime";
-var UEditor = React78.forwardRef(({
+var UEditor = React79.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,