@underverse-ui/underverse 0.2.56 → 0.2.58

package/dist/index.cjs

@@ -253,7 +253,7 @@ var Button = (0, import_react.forwardRef)(
     gradient = false,
     ...rest
   }, ref) => {
-    const baseStyles = asContainer ? "relative inline-flex justify-center rounded-md font-medium transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px" : "relative inline-flex items-center justify-center gap-2 rounded-md font-medium overflow-hidden transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px";
+    const baseStyles = asContainer ? "relative inline-flex justify-center rounded-full font-medium transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px" : "relative inline-flex items-center justify-center gap-2 rounded-full font-medium overflow-hidden transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px";
     const finalVariant = gradient ? "gradient" : variant;
     const variantStyle = VARIANT_STYLES_BTN[finalVariant] || VARIANT_STYLES_BTN.default;
     const sizeStyle = SIZE_STYLES_BTN[size] || SIZE_STYLES_BTN.md;
@@ -440,7 +440,7 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: cn(baseClasses, "rounded-md gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: cn(baseClasses, "rounded-lg gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
     Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Icon,
       {
@@ -593,7 +593,7 @@ var Card = ({
     "div",
     {
       className: cn(
-        "rounded-lg md:rounded-xl bg-card text-card-foreground transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
+        "rounded-2xl md:rounded-3xl bg-card text-card-foreground transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
         "shadow-sm md:hover:shadow-md mx-2 md:mx-0 border border-border",
         hoverable && "md:hover:-translate-y-0.5 md:hover:border-primary/15",
         clickable && "cursor-pointer active:translate-y-px md:hover:bg-accent/5",
@@ -604,7 +604,7 @@ var Card = ({
       onMouseLeave: () => setIsHovered(false),
       onClick,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("relative overflow-hidden rounded-xl", innerClassName), children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("relative overflow-hidden rounded-2xl md:rounded-3xl", innerClassName), children: [
         (hoverable || clickable) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
@@ -662,7 +662,7 @@ var Checkbox = React3.forwardRef(
         "div",
         {
           className: cn(
-            "w-5 h-5 border rounded-sm flex items-center justify-center transition-all duration-200 ease-soft",
+            "w-5 h-5 border rounded-md flex items-center justify-center transition-all duration-200 ease-soft",
             "hover:shadow-sm active:scale-95",
             isChecked ? "bg-primary border-primary shadow-md text-primary-foreground" : "bg-background border-input hover:border-accent-foreground/30 hover:bg-accent/10"
           ),
@@ -1160,7 +1160,7 @@ var Input = (0, import_react3.forwardRef)(
       setIsFocused(false);
       onBlurProp?.(e);
     };
-    const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
+    const radiusClass = size === "sm" ? "rounded-full" : "rounded-full";
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("w-full group", containerSpacing), children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1264,7 +1264,7 @@ var Input = (0, import_react3.forwardRef)(
                 rest.onChange?.({ target: { value: "" } });
               },
               className: cn(
-                "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-sm",
+                "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-md",
                 "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
                 "active:bg-accent active:text-accent-foreground",
                 sizeStyles8[size].button
@@ -1483,7 +1483,7 @@ var NumberInput = (0, import_react3.forwardRef)(
             onClick: handleIncrement,
             disabled: max !== void 0 && currentValue >= max,
             className: cn(
-              "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
+              "flex items-center justify-center w-4 h-4 rounded-md transition-colors",
               "hover:bg-accent focus:outline-none focus:bg-accent",
               "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
               "text-muted-foreground hover:text-foreground"
@@ -1499,7 +1499,7 @@ var NumberInput = (0, import_react3.forwardRef)(
             onClick: handleDecrement,
             disabled: min !== void 0 && currentValue <= min,
             className: cn(
-              "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
+              "flex items-center justify-center w-4 h-4 rounded-md transition-colors",
               "hover:bg-accent focus:outline-none focus:bg-accent",
               "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
               "text-muted-foreground hover:text-foreground"
@@ -1571,7 +1571,7 @@ var Textarea = (0, import_react3.forwardRef)(
           onFocus: () => setIsFocused(true),
           onBlur: () => setIsFocused(false),
           className: cn(
-            "w-full rounded-lg px-4 py-3 text-sm text-foreground transition-all duration-200",
+            "w-full rounded-full px-4 py-3 text-sm text-foreground transition-all duration-200",
             "placeholder:text-muted-foreground focus:outline-none min-h-20",
             "disabled:cursor-not-allowed disabled:opacity-50",
             variantStyles6[variant],
@@ -1635,23 +1635,23 @@ var TagInput = (0, import_react4.forwardRef)(
     const moreLabel = labels?.moreCount?.replace("{count}", String(hiddenCount)) ?? `+${hiddenCount} more`;
     const sizeStyles8 = {
       sm: {
-        container: "min-h-8 p-1.5 gap-1",
+        container: "min-h-8 p-1.5 gap-1 rounded-lg",
         input: "text-xs",
-        tag: "px-1.5 py-0.5 text-xs gap-1",
+        tag: "px-1.5 py-0.5 text-xs gap-1 rounded-md",
         tagIcon: "h-3 w-3",
         button: "h-7 text-xs px-2"
       },
       md: {
-        container: "min-h-10 p-2 gap-1.5",
+        container: "min-h-10 p-2 gap-1.5 rounded-2xl",
         input: "text-sm",
-        tag: "px-2 py-1 text-sm gap-1.5",
+        tag: "px-2 py-1 text-sm gap-1.5 rounded-lg",
         tagIcon: "h-3.5 w-3.5",
         button: "h-8 text-sm px-3"
       },
       lg: {
-        container: "min-h-12 p-2.5 gap-2",
+        container: "min-h-12 p-2.5 gap-2 rounded-2xl",
         input: "text-base",
-        tag: "px-2.5 py-1.5 text-base gap-2",
+        tag: "px-2.5 py-1.5 text-base gap-2 rounded-lg",
         tagIcon: "h-4 w-4",
         button: "h-9 text-base px-4"
       }
@@ -1741,7 +1741,7 @@ var TagInput = (0, import_react4.forwardRef)(
           onClick: handleContainerClick,
           className: cn(
             "flex flex-wrap items-center cursor-text",
-            "bg-background border border-input rounded-lg",
+            "bg-background border border-input",
             "transition-all duration-200",
             "hover:border-accent-foreground/20",
             isFocused && "ring-1 ring-ring ring-offset-1 ring-offset-background border-transparent shadow-md",
@@ -1753,7 +1753,7 @@ var TagInput = (0, import_react4.forwardRef)(
               "span",
               {
                 className: cn(
-                  "inline-flex items-center rounded-md",
+                  "inline-flex items-center",
                   "bg-primary/10 text-primary font-mono",
                   "animate-in fade-in-0 zoom-in-95 duration-200",
                   sizeStyles8[size].tag
@@ -1770,7 +1770,7 @@ var TagInput = (0, import_react4.forwardRef)(
                       },
                       disabled,
                       className: cn(
-                        "flex items-center justify-center rounded-sm",
+                        "flex items-center justify-center rounded-md",
                         "text-primary/70 hover:text-primary hover:bg-primary/20",
                         "transition-colors duration-150",
                         "focus:outline-none focus-visible:ring-1 focus-visible:ring-primary",
@@ -1793,7 +1793,7 @@ var TagInput = (0, import_react4.forwardRef)(
                   setIsExpanded(true);
                 },
                 className: cn(
-                  "inline-flex items-center rounded-md cursor-pointer",
+                  "inline-flex items-center cursor-pointer",
                   "bg-muted text-muted-foreground hover:bg-muted/80",
                   "transition-colors duration-150",
                   "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -1812,7 +1812,7 @@ var TagInput = (0, import_react4.forwardRef)(
                   setIsExpanded(false);
                 },
                 className: cn(
-                  "inline-flex items-center rounded-md cursor-pointer",
+                  "inline-flex items-center cursor-pointer",
                   "bg-muted/50 text-muted-foreground hover:bg-muted/80",
                   "transition-colors duration-150",
                   "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -1905,27 +1905,25 @@ var Textarea2 = (0, import_react5.forwardRef)(
         "hover:border-accent-foreground/20",
         "focus:border-primary focus:ring-2 focus:ring-primary/20"
       ),
-      filled: cn(
-        "border-0 bg-muted",
-        "hover:bg-muted/80",
-        "focus:bg-background focus:ring-2 focus:ring-primary/20"
-      ),
-      outlined: cn(
-        "border-2 border-border bg-transparent",
-        "hover:border-primary/50",
-        "focus:border-primary focus:ring-0"
-      )
+      filled: cn("border-0 bg-muted", "hover:bg-muted/80", "focus:bg-background focus:ring-2 focus:ring-primary/20"),
+      outlined: cn("border-2 border-border bg-transparent", "hover:border-primary/50", "focus:border-primary focus:ring-0")
     };
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full space-y-2", children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: cn(
-          "text-sm font-medium transition-colors duration-200",
-          isFocused ? "text-primary" : "text-foreground",
-          error && "text-destructive"
-        ), children: [
-          label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-destructive ml-1", children: "*" })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "label",
+          {
+            className: cn(
+              "text-sm font-medium transition-colors duration-200",
+              isFocused ? "text-primary" : "text-foreground",
+              error && "text-destructive"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
         error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs text-destructive ml-auto animate-in slide-in-from-right-2 duration-200", "aria-live": "polite", role: "alert", children: error })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative group", children: [
@@ -1938,7 +1936,7 @@ var Textarea2 = (0, import_react5.forwardRef)(
             onFocus: () => setIsFocused(true),
             onBlur: () => setIsFocused(false),
             className: cn(
-              "w-full rounded-lg transition-all duration-200 ease-soft resize-y",
+              "w-full rounded-2xl transition-all duration-200 ease-soft resize-y",
               "text-foreground placeholder:text-muted-foreground",
               "focus:outline-none shadow-sm focus:shadow-md",
               "backdrop-blur-sm",
@@ -1950,17 +1948,28 @@ var Textarea2 = (0, import_react5.forwardRef)(
             ...rest
           }
         ),
-        variant === "default" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(
-          "absolute bottom-0 left-0 h-0.5 bg-linear-to-r from-primary to-primary/60 transition-all duration-300 ease-soft",
-          isFocused ? "w-full opacity-100" : "w-0 opacity-0"
-        ) }),
+        variant === "default" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute bottom-0 left-0 h-0.5 bg-linear-to-r from-primary to-primary/60 transition-all duration-300 ease-soft",
+              isFocused ? "w-full opacity-100" : "w-0 opacity-0"
+            )
+          }
+        ),
         isFocused && variant !== "outlined" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 rounded-lg bg-primary/5 -z-10 animate-pulse" })
       ] }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: cn(
-        "text-xs transition-colors duration-200",
-        isFocused ? "text-primary/70" : "text-muted-foreground",
-        error && "text-destructive/70"
-      ), children: description })
+      description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "p",
+        {
+          className: cn(
+            "text-xs transition-colors duration-200",
+            isFocused ? "text-primary/70" : "text-muted-foreground",
+            error && "text-destructive/70"
+          ),
+          children: description
+        }
+      )
     ] });
   }
 );
@@ -2121,7 +2130,7 @@ function SmartImage({
   alt,
   className,
   ratioClass,
-  roundedClass = "rounded-lg",
+  roundedClass = "rounded-xl",
   fill = true,
   width,
   height,
@@ -2309,14 +2318,7 @@ var Avatar_default = Avatar;
 
 // ../../components/ui/Skeleton.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Skeleton = ({
-  className,
-  width,
-  height,
-  variant = "rectangular",
-  animation = "pulse",
-  lines = 1
-}) => {
+var Skeleton = ({ className, width, height, variant = "rectangular", animation = "pulse", lines = 1 }) => {
   const variantClasses2 = {
     rectangular: "rounded-md",
     circular: "rounded-full",
@@ -2347,79 +2349,32 @@ var Skeleton = ({
       index
     )) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "div",
-    {
-      className: cn(
-        "bg-muted",
-        variantClasses2[variant],
-        animationClasses[animation],
-        className
-      ),
-      style: { width, height }
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("bg-muted", variantClasses2[variant], animationClasses[animation], className), style: { width, height } });
 };
-var SkeletonAvatar = ({
-  size = "md",
-  className
-}) => {
+var SkeletonAvatar = ({ size = "md", className }) => {
   const sizeClasses2 = {
     sm: "w-8 h-8",
     md: "w-10 h-10",
     lg: "w-12 h-12"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    Skeleton,
-    {
-      variant: "circular",
-      className: cn(sizeClasses2[size], className)
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { variant: "circular", className: cn(sizeClasses2[size], className) });
 };
-var SkeletonButton = ({
-  size = "md",
-  className
-}) => {
+var SkeletonButton = ({ size = "md", className }) => {
   const sizeClasses2 = {
     sm: "h-8 w-20",
     md: "h-10 w-24",
     lg: "h-12 w-28"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    Skeleton,
-    {
-      variant: "rounded",
-      className: cn(sizeClasses2[size], className)
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { variant: "rounded", className: cn(sizeClasses2[size], className) });
 };
-var SkeletonText = ({
-  lines = 3,
-  className,
-  width = "100%"
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    Skeleton,
-    {
-      variant: "text",
-      lines,
-      width,
-      className
-    }
-  );
+var SkeletonText = ({ lines = 3, className, width = "100%" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { variant: "text", lines, width, className });
 };
-var SkeletonCard = ({
-  showAvatar = true,
-  showImage = false,
-  textLines = 3,
-  className,
-  children
-}) => {
+var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, className, children }) => {
   if (children) {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("p-4 space-y-4 rounded-lg bg-card outline-none focus:outline-none", className), children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("p-4 space-y-4 rounded-lg bg-card outline-none focus:outline-none", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("p-4 space-y-4 rounded-2xl bg-card outline-none focus:outline-none", className), children: [
     showAvatar && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonAvatar, {}),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
@@ -2427,7 +2382,7 @@ var SkeletonCard = ({
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-3 w-16" })
       ] })
     ] }),
-    showImage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-48 w-full rounded-md" }),
+    showImage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-48 w-full rounded-xl" }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonText, { lines: textLines }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex space-x-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonButton, { size: "sm" }),
@@ -2436,7 +2391,7 @@ var SkeletonCard = ({
   ] });
 };
 var SkeletonPost = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("p-6 space-y-4 rounded-xl bg-card outline-none focus:outline-none", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("p-6 space-y-4 rounded-3xl bg-card outline-none focus:outline-none", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonAvatar, { size: "lg" }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
@@ -2445,7 +2400,7 @@ var SkeletonPost = ({ className }) => {
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonText, { lines: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-64 w-full rounded-lg" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-64 w-full rounded-2xl" }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-3 w-16" }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-3 w-20" }),
@@ -2458,36 +2413,17 @@ var SkeletonPost = ({ className }) => {
     ] }) })
   ] });
 };
-var SkeletonMessage = ({
-  own = false,
-  showAvatar = true,
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn(
-    "flex items-end space-x-2",
-    own && "flex-row-reverse space-x-reverse",
-    className
-  ), children: [
+var SkeletonMessage = ({ own = false, showAvatar = true, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex items-end space-x-2", own && "flex-row-reverse space-x-reverse", className), children: [
     showAvatar && !own && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonAvatar, { size: "sm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn(
-      "max-w-xs space-y-1",
-      own ? "items-end" : "items-start"
-    ), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: cn(
-        "h-10 rounded-2xl",
-        own ? "w-32 bg-primary/20" : "w-40 bg-muted"
-      ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("max-w-xs space-y-1", own ? "items-end" : "items-start"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: cn("h-10 rounded-3xl", own ? "w-32 bg-primary/20" : "w-40 bg-muted") }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-3 w-12" })
     ] })
   ] });
 };
-var SkeletonList = ({
-  items = 5,
-  itemHeight = 60,
-  showAvatar = true,
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3 p-3 rounded-lg", children: [
+var SkeletonList = ({ items = 5, itemHeight = 60, showAvatar = true, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3 p-3 rounded-xl", children: [
     showAvatar && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonAvatar, {}),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 space-y-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-4 w-3/4" }),
@@ -2496,11 +2432,7 @@ var SkeletonList = ({
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-6 w-16" })
   ] }, index)) });
 };
-var SkeletonTable = ({
-  rows = 5,
-  columns = 4,
-  className
-}) => {
+var SkeletonTable = ({ rows = 5, columns = 4, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("space-y-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex space-x-4 p-3", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-4 flex-1" }, index)) }),
     Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex space-x-4 p-3", children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-4 flex-1" }, colIndex)) }, rowIndex))
@@ -2558,10 +2490,7 @@ var Progress = ({
           label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { id: labelId, className: "font-medium text-foreground", children: label }),
           getStatusIcon()
         ] }),
-        showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn(
-          "text-sm font-medium",
-          isComplete ? "text-success" : isError ? "text-destructive" : "text-muted-foreground"
-        ), children: isComplete ? "Complete" : isError ? "Error" : `${Math.round(percentage)}%` })
+        showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("text-sm font-medium", isComplete ? "text-success" : isError ? "text-destructive" : "text-muted-foreground"), children: isComplete ? "Complete" : isError ? "Error" : `${Math.round(percentage)}%` })
       ] }),
       description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { id: descId, className: "text-sm text-muted-foreground", children: description })
     ] }),
@@ -2574,11 +2503,7 @@ var Progress = ({
         "aria-valuenow": indeterminate ? void 0 : Math.round(percentage),
         "aria-labelledby": label ? labelId : void 0,
         "aria-describedby": description ? descId : void 0,
-        className: cn(
-          "w-full bg-muted/50 rounded-full overflow-hidden backdrop-blur-sm",
-          "border border-border/50",
-          sizeStyles2[size]
-        ),
+        className: cn("w-full bg-muted/50 rounded-full overflow-hidden backdrop-blur-sm", "border border-border/50", sizeStyles2[size]),
         children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "div",
           {
@@ -2651,24 +2576,10 @@ var CircularProgress = ({
           {
             width: size,
             height: size,
-            className: cn(
-              "transform -rotate-90",
-              indeterminate && "animate-spin"
-            ),
+            className: cn("transform -rotate-90", indeterminate && "animate-spin"),
             style: { animationDuration: indeterminate ? "2s" : void 0 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                "circle",
-                {
-                  cx: size / 2,
-                  cy: size / 2,
-                  r: radius,
-                  stroke: "currentColor",
-                  strokeWidth,
-                  fill: "transparent",
-                  className: trackColor
-                }
-              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth, fill: "transparent", className: trackColor }),
               /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "circle",
                 {
@@ -2695,23 +2606,14 @@ var CircularProgress = ({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
           getContentIcon(),
-          showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn(
-            "text-sm font-semibold",
-            isComplete ? "text-success" : isError ? "text-destructive" : "text-foreground"
-          ), children: isComplete ? "\u2713" : isError ? "\u2717" : `${Math.round(percentage)}%` }),
+          showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("text-sm font-semibold", isComplete ? "text-success" : isError ? "text-destructive" : "text-foreground"), children: isComplete ? "\u2713" : isError ? "\u2717" : `${Math.round(percentage)}%` }),
           indeterminate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Clock, { className: "w-4 h-4 text-muted-foreground animate-pulse" })
         ] }) })
       ]
     }
   );
 };
-var StepProgress = ({
-  steps,
-  currentStep,
-  className,
-  variant = "primary",
-  size = "md"
-}) => {
+var StepProgress = ({ steps, currentStep, className, variant = "primary", size = "md" }) => {
   const stepSizes = {
     sm: "w-6 h-6 text-xs",
     md: "w-8 h-8 text-sm",
@@ -2732,19 +2634,9 @@ var StepProgress = ({
             "rounded-full border-2 flex items-center justify-center font-medium transition-all duration-300",
             "shadow-sm hover:shadow-md",
             stepSizes[size],
-            status === "completed" && [
-              "border-success bg-success text-success-foreground",
-              "shadow-success/20"
-            ],
-            status === "current" && [
-              "border-primary bg-primary/10 text-primary",
-              "ring-2 ring-primary/20 ring-offset-2",
-              "shadow-primary/20"
-            ],
-            status === "upcoming" && [
-              "border-muted-foreground/30 text-muted-foreground bg-background",
-              "hover:border-muted-foreground/50"
-            ]
+            status === "completed" && ["border-success bg-success text-success-foreground", "shadow-success/20"],
+            status === "current" && ["border-primary bg-primary/10 text-primary", "ring-2 ring-primary/20 ring-offset-2", "shadow-primary/20"],
+            status === "upcoming" && ["border-muted-foreground/30 text-muted-foreground bg-background", "hover:border-muted-foreground/50"]
           ),
           children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Check, { className: "w-3 h-3" }) : index + 1
         }
@@ -2761,25 +2653,11 @@ var StepProgress = ({
           children: step
         }
       ),
-      index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "div",
-        {
-          className: cn(
-            "flex-1 h-0.5 mx-4 transition-colors duration-200",
-            index < currentStep ? variantStyles2[variant] : "bg-muted"
-          )
-        }
-      )
+      index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("flex-1 h-0.5 mx-4 transition-colors duration-200", index < currentStep ? variantStyles2[variant] : "bg-muted") })
     ] }, step);
   }) }) });
 };
-var MiniProgress = ({
-  value,
-  max = 100,
-  className,
-  variant = "primary",
-  showValue = false
-}) => {
+var MiniProgress = ({ value, max = 100, className, variant = "primary", showValue = false }) => {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -2790,16 +2668,7 @@ var MiniProgress = ({
         "aria-valuemin": 0,
         "aria-valuemax": max,
         "aria-valuenow": Math.round(percentage),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "div",
-          {
-            className: cn(
-              "h-full transition-all duration-500 ease-out rounded-full",
-              variantStyles2[variant]
-            ),
-            style: { width: `${percentage}%` }
-          }
-        )
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("h-full transition-all duration-500 ease-out rounded-full", variantStyles2[variant]), style: { width: `${percentage}%` } })
       }
     ),
     showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs font-medium text-muted-foreground min-w-10 text-right", children: [
@@ -2808,13 +2677,7 @@ var MiniProgress = ({
     ] })
   ] });
 };
-var BatteryProgress = ({
-  value,
-  max = 100,
-  className,
-  charging = false,
-  showValue = false
-}) => {
+var BatteryProgress = ({ value, max = 100, className, charging = false, showValue = false }) => {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
   const getVariant = () => {
     if (charging) return "info";
@@ -2823,65 +2686,53 @@ var BatteryProgress = ({
     return "success";
   };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", role: "progressbar", "aria-label": "Battery level", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": Math.round(percentage), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-6 h-3 border-2 border-foreground/20 rounded-sm relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute -right-1 top-0.5 w-0.5 h-1 bg-foreground/20 rounded-r-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "div",
-          {
-            className: cn(
-              "h-full transition-all duration-500 ease-out rounded-sm",
-              variantStyles2[getVariant()],
-              charging && "animate-pulse"
-            ),
-            style: { width: `${percentage}%` }
-          }
-        )
-      ] }),
-      charging && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-2 h-2 text-info-foreground", children: "\u26A1" }) })
-    ] }),
-    showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: cn(
-      "text-xs font-medium",
-      percentage <= 20 ? "text-destructive" : "text-muted-foreground"
-    ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: "relative",
+        role: "progressbar",
+        "aria-label": "Battery level",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": Math.round(percentage),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-6 h-3 border-2 border-foreground/20 rounded-md relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute -right-1 top-0.5 w-0.5 h-1 bg-foreground/20 rounded-r-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: cn("h-full transition-all duration-500 ease-out rounded-md", variantStyles2[getVariant()], charging && "animate-pulse"),
+                style: { width: `${percentage}%` }
+              }
+            )
+          ] }),
+          charging && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-2 h-2 text-info-foreground", children: "\u26A1" }) })
+        ]
+      }
+    ),
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: cn("text-xs font-medium", percentage <= 20 ? "text-destructive" : "text-muted-foreground"), children: [
       Math.round(percentage),
       "%"
     ] })
   ] });
 };
-var SegmentedProgress = ({
-  segments,
-  activeSegments,
-  className,
-  variant = "primary",
-  size = "md"
-}) => {
+var SegmentedProgress = ({ segments, activeSegments, className, variant = "primary", size = "md" }) => {
   const segmentSizes = {
     sm: "h-1",
     md: "h-2",
     lg: "h-3"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("flex gap-1", className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": segments, "aria-valuenow": activeSegments, children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
-      className: cn("flex gap-1", className),
-      role: "progressbar",
-      "aria-valuemin": 0,
-      "aria-valuemax": segments,
-      "aria-valuenow": activeSegments,
-      children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "div",
-        {
-          className: cn(
-            "flex-1 rounded-full transition-all duration-300",
-            segmentSizes[size],
-            index < activeSegments ? variantStyles2[variant] : "bg-muted/50"
-          )
-        },
-        index
-      ))
-    }
-  );
+      className: cn(
+        "flex-1 rounded-full transition-all duration-300",
+        segmentSizes[size],
+        index < activeSegments ? variantStyles2[variant] : "bg-muted/50"
+      )
+    },
+    index
+  )) });
 };
 var LoadingProgress = ({
   value,
@@ -3084,7 +2935,7 @@ var Modal = ({
           {
             ref: modalContentRef,
             className: cn(
-              "relative w-full rounded-lg bg-card text-card-foreground shadow-xl",
+              "relative w-full rounded-2xl md:rounded-3xl bg-card text-card-foreground shadow-xl",
               "transition-all duration-200 ease-out",
               maxWidthClass,
               fullWidth && "mx-0",
@@ -3111,7 +2962,7 @@ var Modal = ({
                     onClick: onClose,
                     "aria-label": "Close modal",
                     className: cn(
-                      "rounded-sm opacity-70 ring-offset-background transition-opacity",
+                      "rounded-lg opacity-70 ring-offset-background transition-opacity",
                       "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                       "disabled:pointer-events-none "
                     ),
@@ -3237,7 +3088,7 @@ var ToastComponent = ({ toast, onRemove }) => {
     "div",
     {
       className: cn(
-        "relative w-80 rounded-r-lg border border-l-0 backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
+        "relative w-80 rounded-r-xl border border-l-0 backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
         "bg-card shadow-xl",
         "animate-in slide-in-from-right-full",
         config.containerClassName,
@@ -3281,7 +3132,7 @@ var ToastComponent = ({ toast, onRemove }) => {
             {
               onClick: handleRemove,
               className: cn(
-                "rounded-md p-1 hover:bg-accent hover:text-accent-foreground",
+                "rounded-lg p-1 hover:bg-accent hover:text-accent-foreground",
                 "transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50"
               ),
               "aria-label": "Close toast",
@@ -3319,6 +3170,62 @@ var variantStyles3 = {
   error: "bg-destructive text-destructive-foreground border-destructive/20",
   success: "bg-success text-success-foreground border-success/20"
 };
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  try {
+    ref.current = value;
+  } catch {
+  }
+}
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+function getTransformOrigin(side) {
+  switch (side) {
+    case "top":
+      return "center bottom";
+    case "bottom":
+      return "center top";
+    case "left":
+      return "right center";
+    case "right":
+      return "left center";
+  }
+}
+function computeTooltipPosition(args) {
+  const { triggerRect, contentSize, placement, offset, padding, viewport } = args;
+  let side = placement;
+  const fitsTop = triggerRect.top - offset - contentSize.height >= padding;
+  const fitsBottom = triggerRect.bottom + offset + contentSize.height <= viewport.height - padding;
+  const fitsLeft = triggerRect.left - offset - contentSize.width >= padding;
+  const fitsRight = triggerRect.right + offset + contentSize.width <= viewport.width - padding;
+  if (side === "top" && !fitsTop && fitsBottom) side = "bottom";
+  if (side === "bottom" && !fitsBottom && fitsTop) side = "top";
+  if (side === "left" && !fitsLeft && fitsRight) side = "right";
+  if (side === "right" && !fitsRight && fitsLeft) side = "left";
+  const centerX = triggerRect.left + triggerRect.width / 2;
+  const centerY = triggerRect.top + triggerRect.height / 2;
+  let left = 0;
+  let top = 0;
+  if (side === "top") {
+    top = triggerRect.top - offset - contentSize.height;
+    left = centerX - contentSize.width / 2;
+  } else if (side === "bottom") {
+    top = triggerRect.bottom + offset;
+    left = centerX - contentSize.width / 2;
+  } else if (side === "left") {
+    top = centerY - contentSize.height / 2;
+    left = triggerRect.left - offset - contentSize.width;
+  } else {
+    top = centerY - contentSize.height / 2;
+    left = triggerRect.right + offset;
+  }
+  left = clamp(left, padding, viewport.width - contentSize.width - padding);
+  top = clamp(top, padding, viewport.height - contentSize.height - padding);
+  return { top, left, side };
+}
 var Tooltip = ({
   children,
   content,
@@ -3329,54 +3236,52 @@ var Tooltip = ({
   variant = "default"
 }) => {
   const [isOpen, setIsOpen] = React13.useState(false);
-  const [position, setPosition] = React13.useState(null);
   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(() => {
     setIsMounted(true);
   }, []);
   const delayOpen = typeof delay === "object" ? delay.open || 700 : delay;
   const delayClose = typeof delay === "object" ? delay.close || 300 : delay;
-  const calculatePosition = () => {
-    if (!triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    let top = rect.top;
-    let left = rect.left;
-    const OFFSET = 8;
-    switch (placement) {
-      case "top":
-        top = rect.top - OFFSET;
-        left = rect.left + rect.width / 2;
-        break;
-      case "bottom":
-        top = rect.bottom + OFFSET;
-        left = rect.left + rect.width / 2;
-        break;
-      case "left":
-        top = rect.top + rect.height / 2;
-        left = rect.left - OFFSET;
-        break;
-      case "right":
-        top = rect.top + rect.height / 2;
-        left = rect.right + OFFSET;
-        break;
-    }
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    if (placement === "top" || placement === "bottom") {
-      const tooltipWidth = 200;
-      const minLeft = tooltipWidth / 2;
-      const maxLeft = viewportWidth - tooltipWidth / 2;
-      left = Math.max(minLeft, Math.min(left, maxLeft));
-    }
-    setPosition({ top, left });
-  };
+  const offset = 8;
+  const padding = 8;
+  const updatePosition = React13.useCallback(() => {
+    const triggerEl = triggerRef.current;
+    const positionerEl = positionerRef.current;
+    const panelEl = panelRef.current;
+    if (!triggerEl || !positionerEl || !panelEl) return;
+    const triggerRect = triggerEl.getBoundingClientRect();
+    const measuredWidth = panelEl.offsetWidth;
+    const measuredHeight = panelEl.offsetHeight;
+    const rect = panelEl.getBoundingClientRect();
+    const contentWidth = measuredWidth || rect.width;
+    const contentHeight = measuredHeight || rect.height;
+    const next = computeTooltipPosition({
+      triggerRect,
+      contentSize: { width: contentWidth, height: contentHeight },
+      placement,
+      offset,
+      padding,
+      viewport: { width: window.innerWidth, height: window.innerHeight }
+    });
+    const top = Math.round(next.top);
+    const left = Math.round(next.left);
+    const prev = lastAppliedRef.current;
+    const same = prev && Math.abs(prev.top - top) < 0.5 && Math.abs(prev.left - left) < 0.5 && prev.side === next.side;
+    if (same) return;
+    lastAppliedRef.current = { top, left, side: next.side };
+    positionerEl.style.transform = `translate3d(${left}px, ${top}px, 0)`;
+    panelEl.style.transformOrigin = getTransformOrigin(next.side);
+    if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
+  }, [placement]);
   const handleMouseEnter = () => {
     if (disabled) return;
     clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => {
-      calculatePosition();
       setIsOpen(true);
     }, delayOpen);
   };
@@ -3388,45 +3293,117 @@ var Tooltip = ({
   };
   const handleFocus = () => {
     if (disabled) return;
-    calculatePosition();
     setIsOpen(true);
   };
   const handleBlur = () => {
     setIsOpen(false);
   };
+  React13.useEffect(() => {
+    return () => clearTimeout(timeoutRef.current);
+  }, []);
+  React13.useLayoutEffect(() => {
+    if (!isOpen) {
+      lastAppliedRef.current = null;
+      return;
+    }
+    updatePosition();
+    let raf1 = 0;
+    let raf2 = 0;
+    raf1 = window.requestAnimationFrame(() => {
+      updatePosition();
+      raf2 = window.requestAnimationFrame(() => updatePosition());
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [isOpen, updatePosition]);
+  React13.useEffect(() => {
+    if (!isOpen) return;
+    let raf = 0;
+    const handler = () => {
+      cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(() => updatePosition());
+    };
+    handler();
+    window.addEventListener("resize", handler);
+    window.addEventListener("scroll", handler, true);
+    document.addEventListener("scroll", handler, true);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", handler);
+      window.removeEventListener("scroll", handler, true);
+      document.removeEventListener("scroll", handler, true);
+    };
+  }, [isOpen, updatePosition]);
+  React13.useEffect(() => {
+    if (!isOpen) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => updatePosition());
+    if (triggerRef.current) ro.observe(triggerRef.current);
+    if (panelRef.current) ro.observe(panelRef.current);
+    return () => ro.disconnect();
+  }, [isOpen, updatePosition]);
   if (disabled || !content) {
     return children;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     React13.cloneElement(children, {
-      ref: triggerRef,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onFocus: handleFocus,
-      onBlur: handleBlur
+      ref: (node) => {
+        triggerRef.current = node;
+        assignRef(children.props?.ref, node);
+      },
+      onMouseEnter: (e) => {
+        handleMouseEnter();
+        if (typeof children.props?.onMouseEnter === "function") children.props.onMouseEnter(e);
+      },
+      onMouseLeave: (e) => {
+        handleMouseLeave();
+        if (typeof children.props?.onMouseLeave === "function") children.props.onMouseLeave(e);
+      },
+      onFocus: (e) => {
+        handleFocus();
+        if (typeof children.props?.onFocus === "function") children.props.onFocus(e);
+      },
+      onBlur: (e) => {
+        handleBlur();
+        if (typeof children.props?.onBlur === "function") children.props.onBlur(e);
+      }
     }),
-    isMounted && isOpen && position && (0, import_react_dom2.createPortal)(
+    isMounted && isOpen && (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         {
-          role: "tooltip",
+          ref: positionerRef,
           style: {
             position: "fixed",
-            top: position.top,
-            left: position.left,
-            transform: placement === "top" ? "translate(-50%, -100%)" : placement === "bottom" ? "translateX(-50%)" : placement === "left" ? "translate(-100%, -50%)" : placement === "right" ? "translateY(-50%)" : "none",
+            top: 0,
+            left: 0,
+            transform: "translate3d(0, 0, 0)",
             zIndex: 99999,
-            opacity: 1,
-            transition: "opacity 150ms",
-            pointerEvents: "none"
+            visibility: "hidden",
+            pointerEvents: "none",
+            willChange: "transform"
           },
-          className: cn(
-            "px-3 py-2 text-sm font-medium rounded-lg shadow-lg border",
-            "max-w-xs wrap-break-word backdrop-blur-sm",
-            variantStyles3[variant],
-            className
-          ),
-          children: content
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              ref: panelRef,
+              role: "tooltip",
+              style: {
+                opacity: 1,
+                transition: "opacity 150ms",
+                transformOrigin: getTransformOrigin(placement)
+              },
+              className: cn(
+                "px-3 py-2 text-sm font-medium rounded-xl shadow-lg border",
+                "max-w-xs wrap-break-word backdrop-blur-sm",
+                variantStyles3[variant],
+                className
+              ),
+              children: content
+            }
+          )
         }
       ),
       document.body
@@ -3650,7 +3627,7 @@ var useShadCNAnimations = () => {
 
 // ../../components/ui/Popover.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function assignRef(ref, value) {
+function assignRef2(ref, value) {
   if (!ref) return;
   if (typeof ref === "function") {
     ref(value);
@@ -3661,7 +3638,7 @@ function assignRef(ref, value) {
   } catch {
   }
 }
-function getTransformOrigin(side, align) {
+function getTransformOrigin2(side, align) {
   if (side === "top") return `${align === "end" ? "right" : "left"} bottom`;
   if (side === "bottom") return `${align === "end" ? "right" : "left"} top`;
   if (side === "left") return "right top";
@@ -3683,7 +3660,7 @@ function normalizePlacement(placement) {
     }
   }
 }
-var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var clamp2 = (value, min, max) => Math.max(min, Math.min(max, value));
 function overflowAmount(left, width, viewportWidth, padding) {
   const min = padding;
   const max = viewportWidth - padding;
@@ -3730,14 +3707,14 @@ function computePopoverPosition(args) {
     if (align === "end" && endOverflow > 0 && startOverflow < endOverflow) align = "start";
     left = align === "end" ? leftEnd : leftStart;
     top = side === "top" ? triggerRect.top - offset - contentSize.height : triggerRect.bottom + offset;
-    left = clamp(left, padding, viewport.width - contentSize.width - padding);
-    top = clamp(top, padding, viewport.height - contentSize.height - padding);
+    left = clamp2(left, padding, viewport.width - contentSize.width - padding);
+    top = clamp2(top, padding, viewport.height - contentSize.height - padding);
     return { top, left, side, align };
   }
   top = triggerRect.top;
   left = side === "left" ? triggerRect.left - offset - contentSize.width : triggerRect.right + offset;
-  left = clamp(left, padding, viewport.width - contentSize.width - padding);
-  top = clamp(top, padding, viewport.height - contentSize.height - padding);
+  left = clamp2(left, padding, viewport.width - contentSize.width - padding);
+  top = clamp2(top, padding, viewport.height - contentSize.height - padding);
   return { top, left, side, align };
 }
 var Popover = ({
@@ -3804,7 +3781,7 @@ var Popover = ({
     if (applied) return;
     lastAppliedRef.current = { top, left, side: next.side, align: next.align, width: widthPx };
     positionerEl.style.transform = `translate3d(${left}px, ${top}px, 0)`;
-    panelEl.style.transformOrigin = getTransformOrigin(next.side, next.align);
+    panelEl.style.transformOrigin = getTransformOrigin2(next.side, next.align);
     if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
     if (positionerEl.style.pointerEvents !== "auto") positionerEl.style.pointerEvents = "auto";
   }, [placement, matchTriggerWidth, contentWidth]);
@@ -3919,7 +3896,7 @@ var Popover = ({
             role: "dialog",
             "aria-modal": modal || void 0,
             style: {
-              transformOrigin: getTransformOrigin(initialPlacement.side, initialPlacement.align)
+              transformOrigin: getTransformOrigin2(initialPlacement.side, initialPlacement.align)
             },
             className: cn(
               // shadcn-like enter animation
@@ -3930,7 +3907,7 @@ var Popover = ({
               "div",
               {
                 className: cn(
-                  "rounded-md border bg-popover text-popover-foreground shadow-md",
+                  "rounded-2xl border bg-popover text-popover-foreground shadow-md",
                   "backdrop-blur-sm bg-popover/95 border-border/60 p-4",
                   contentClassName
                 ),
@@ -3950,7 +3927,7 @@ var Popover = ({
       return React14.cloneElement(triggerEl, {
         ref: (node) => {
           triggerRef.current = node;
-          assignRef(triggerEl.props?.ref, node);
+          assignRef2(triggerEl.props?.ref, node);
         },
         onClick: (e) => {
           e.preventDefault();
@@ -3961,10 +3938,10 @@ var Popover = ({
           }
         },
         "aria-expanded": isOpen,
-        "aria-haspopup": "dialog",
+        "aria-haspopup": triggerEl.props?.["aria-haspopup"] ?? "dialog",
         className: cn(
           triggerEl.props?.className,
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md"
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
         )
       });
     })(),
@@ -4170,7 +4147,7 @@ var SlideOver = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Sheet, { ...props, side: "right", variant: "overlay", size: "lg" });
 };
 var BottomSheet = ({ snapPoints = ["25%", "50%", "90%"], defaultSnap = 1, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Sheet, { ...props, side: "bottom", variant: "overlay", className: cn("rounded-t-lg", props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Sheet, { ...props, side: "bottom", variant: "overlay", className: cn("rounded-t-3xl", props.className) });
 };
 var SidebarSheet = ({ navigation, children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Sheet, { ...props, side: "left", variant: "push", size: "md", children: [
@@ -4234,7 +4211,7 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
     "div",
     {
       className: cn(
-        "relative w-full rounded-r-lg border border-l-0 overflow-hidden",
+        "relative w-full rounded-r-xl border border-l-0 overflow-hidden",
         "flex items-start gap-3 p-4 pl-5",
         "backdrop-blur-md",
         config.containerClassName,
@@ -4254,7 +4231,7 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
           "button",
           {
             onClick: handleClose,
-            className: "rounded-md p-1 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className: "rounded-lg p-1 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             "aria-label": closeAriaLabel || t("closeAlert"),
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.X, { className: "h-4 w-4" })
           }
@@ -4414,7 +4391,7 @@ var variantStyles4 = {
   simple: "text-muted-foreground hover:text-foreground underline-offset-4 hover:underline",
   slash: "text-muted-foreground hover:text-foreground",
   arrow: "text-muted-foreground hover:text-foreground",
-  pill: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+  pill: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
 };
 var Breadcrumb = ({
   items,
@@ -4465,72 +4442,57 @@ var Breadcrumb = ({
   const handleCollapseToggle = () => {
     setIsCollapsed(!isCollapsed);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    "nav",
-    {
-      className: cn("flex w-full items-center", sizeStyles5[size].text, className),
-      "aria-label": "Breadcrumb navigation",
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ol", { className: cn("flex items-center", sizeStyles5[size].spacing), children: processedItems.map((item, index) => {
-        const isLast = index === processedItems.length - 1;
-        const isCollapsedIndicator = item.label === "...";
-        const Icon = item.icon;
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("li", { className: "flex items-center", children: [
-          isCollapsedIndicator ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            "button",
-            {
-              onClick: handleCollapseToggle,
-              className: cn(
-                "inline-flex items-center gap-1 transition-all duration-200",
-                "hover:bg-accent rounded-md",
-                sizeStyles5[size].padding,
-                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
-              ),
-              "aria-label": "Show all breadcrumb items",
-              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.MoreHorizontal, { className: sizeStyles5[size].icon })
-            }
-          ) : item.href && !isLast && !item.disabled ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-            import_link.default,
-            {
-              href: item.href,
-              className: cn(
-                "inline-flex items-center gap-1 font-medium transition-all duration-200",
-                variantStyles4[variant],
-                variant === "pill" && sizeStyles5[size].padding,
-                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm"
-              ),
-              children: [
-                Icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: sizeStyles5[size].icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: item.label })
-              ]
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-            "span",
-            {
-              className: cn(
-                "inline-flex items-center gap-1 font-medium",
-                isLast ? "text-foreground" : item.disabled ? "text-muted-foreground/60 cursor-not-allowed" : "text-muted-foreground",
-                variant === "pill" && !isLast && sizeStyles5[size].padding
-              ),
-              "aria-current": isLast ? "page" : void 0,
-              children: [
-                Icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: sizeStyles5[size].icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: item.label })
-              ]
-            }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("nav", { className: cn("flex w-full items-center", sizeStyles5[size].text, className), "aria-label": "Breadcrumb navigation", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ol", { className: cn("flex items-center", sizeStyles5[size].spacing), children: processedItems.map((item, index) => {
+    const isLast = index === processedItems.length - 1;
+    const isCollapsedIndicator = item.label === "...";
+    const Icon = item.icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("li", { className: "flex items-center", children: [
+      isCollapsedIndicator ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "button",
+        {
+          onClick: handleCollapseToggle,
+          className: cn(
+            "inline-flex items-center gap-1 transition-all duration-200",
+            "hover:bg-accent rounded-md",
+            sizeStyles5[size].padding,
+            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
           ),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            "span",
-            {
-              className: cn("mx-1", sizeStyles5[size].spacing),
-              role: "presentation",
-              "aria-hidden": "true",
-              children: getSeparator()
-            }
-          )
-        ] }, `${item.label}-${index}`);
-      }) })
-    }
-  );
+          "aria-label": "Show all breadcrumb items",
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.MoreHorizontal, { className: sizeStyles5[size].icon })
+        }
+      ) : item.href && !isLast && !item.disabled ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        import_link.default,
+        {
+          href: item.href,
+          className: cn(
+            "inline-flex items-center gap-1 font-medium transition-all duration-200",
+            variantStyles4[variant],
+            variant === "pill" && sizeStyles5[size].padding,
+            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-md"
+          ),
+          children: [
+            Icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: sizeStyles5[size].icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: item.label })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-1 font-medium",
+            isLast ? "text-foreground" : item.disabled ? "text-muted-foreground/60 cursor-not-allowed" : "text-muted-foreground",
+            variant === "pill" && !isLast && sizeStyles5[size].padding
+          ),
+          "aria-current": isLast ? "page" : void 0,
+          children: [
+            Icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: sizeStyles5[size].icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: item.label })
+          ]
+        }
+      ),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cn("mx-1", sizeStyles5[size].spacing), role: "presentation", "aria-hidden": "true", children: getSeparator() })
+    ] }, `${item.label}-${index}`);
+  }) }) });
 };
 var Breadcrumb_default = Breadcrumb;
 
@@ -4572,12 +4534,12 @@ var variantStyles5 = {
   },
   card: {
     container: "space-y-1",
-    tab: "rounded-lg border border-transparent transition-all duration-200",
+    tab: "rounded-xl border border-transparent transition-all duration-200",
     activeTab: "bg-primary text-primary-foreground border-primary",
     inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border hover:shadow-sm"
   },
   "underline-card": {
-    container: "border-b border-border bg-card rounded-t-lg",
+    container: "border-b border-border bg-card rounded-t-2xl",
     tab: "relative transition-all duration-200 pb-3 px-4 border-b-2 border-transparent hover:border-primary/50 hover:bg-accent/30",
     activeTab: "text-primary border-primary font-medium bg-accent/20",
     inactiveTab: "text-muted-foreground hover:text-foreground"
@@ -4690,13 +4652,7 @@ var Tabs = ({
           tab.value
         );
       }),
-      variant === "underline" && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        "div",
-        {
-          className: "absolute bottom-0 h-0.5 bg-primary transition-all duration-300 ease-out",
-          style: underlineStyle
-        }
-      )
+      variant === "underline" && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute bottom-0 h-0.5 bg-primary transition-all duration-300 ease-out", style: underlineStyle })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
@@ -4705,7 +4661,7 @@ var Tabs = ({
         id: `${baseId}-panel-${tabs.findIndex((t) => t.value === active)}`,
         "aria-labelledby": `${baseId}-tab-${tabs.findIndex((t) => t.value === active)}`,
         className: cn(
-          "bg-card rounded-lg border border-border shadow-sm text-card-foreground transition-all duration-200",
+          "bg-card rounded-xl border border-border shadow-sm text-card-foreground transition-all duration-200",
           sizeStyles6[size].content,
           orientation === "vertical" && "flex-1"
         ),
@@ -4716,46 +4672,17 @@ var Tabs = ({
   ] });
 };
 var SimpleTabs = ({ tabs, defaultValue, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    Tabs,
-    {
-      tabs,
-      defaultValue,
-      className,
-      variant: "default",
-      size: "sm"
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tabs, { tabs, defaultValue, className, variant: "default", size: "sm" });
 };
 var PillTabs = ({ contained = true, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    Tabs,
-    {
-      ...props,
-      variant: "pills",
-      className: cn(contained && "max-w-fit", props.className)
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tabs, { ...props, variant: "pills", className: cn(contained && "max-w-fit", props.className) });
 };
-var VerticalTabs = ({
-  sidebarWidth = "w-48",
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn(sidebarWidth, "shrink-0"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    Tabs,
-    {
-      ...props,
-      orientation: "vertical",
-      variant: "card",
-      className: "w-full"
-    }
-  ) }) });
+var VerticalTabs = ({ sidebarWidth = "w-48", className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn(sidebarWidth, "shrink-0"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tabs, { ...props, orientation: "vertical", variant: "card", className: "w-full" }) }) });
 };
 
 // ../../components/ui/DropdownMenu.tsx
 var import_react11 = __toESM(require("react"), 1);
-var import_react_dom5 = require("react-dom");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var DropdownMenu = ({
   trigger,
@@ -4770,72 +4697,26 @@ var DropdownMenu = ({
   items
 }) => {
   const [internalOpen, setInternalOpen] = (0, import_react11.useState)(false);
-  const [position, setPosition] = (0, import_react11.useState)(null);
   const triggerRef = import_react11.default.useRef(null);
-  const contentRef = import_react11.default.useRef(null);
+  const menuRef = import_react11.default.useRef(null);
   const itemsRef = import_react11.default.useRef([]);
   const [activeIndex, setActiveIndex] = (0, import_react11.useState)(-1);
   useShadCNAnimations();
   const open = isOpen !== void 0 ? isOpen : internalOpen;
   const setOpen = onOpenChange || setInternalOpen;
   import_react11.default.useEffect(() => {
-    if (open && triggerRef.current && contentRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      const menuRect = contentRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      let top = rect.bottom + 4;
-      let left = rect.left;
-      if (rect.bottom + menuRect.height > viewportHeight && rect.top > menuRect.height) {
-        top = rect.top - menuRect.height - 4;
-      }
-      switch (placement) {
-        case "top":
-        case "top-start":
-          top = rect.top - menuRect.height - 4;
-          break;
-        case "top-end":
-          top = rect.top - menuRect.height - 4;
-          left = rect.right - menuRect.width;
-          break;
-        case "bottom":
-        case "bottom-start":
-          break;
-        case "bottom-end":
-          left = rect.right - menuRect.width;
-          break;
-        case "left":
-          top = rect.top;
-          left = rect.left - menuRect.width - 4;
-          break;
-        case "right":
-          top = rect.top;
-          left = rect.right + 4;
-          break;
-      }
-      setPosition({ top, left });
-    }
     if (open) setActiveIndex(-1);
-  }, [open, placement]);
+  }, [open]);
   import_react11.default.useEffect(() => {
     if (!open) return;
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        const dropdown = document.querySelector("[data-dropdown-menu]");
-        if (dropdown && !dropdown.contains(target)) {
-          setOpen(false);
-        }
-      }
-    };
-    const handleEscape = (event) => {
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
     const handleKeyNav = (e) => {
-      if (!contentRef.current) return;
+      const active = document.activeElement;
+      const triggerEl = triggerRef.current;
+      const menuEl = menuRef.current;
+      if (!active || !triggerEl || !menuEl) return;
+      const isInMenu = menuEl.contains(active);
+      const isOnTrigger = triggerEl.contains(active);
+      if (!isInMenu && !isOnTrigger) return;
       const enabled = itemsRef.current.filter((el) => el && !el.disabled);
       if (enabled.length === 0) return;
       if (e.key === "ArrowDown") {
@@ -4860,97 +4741,88 @@ var DropdownMenu = ({
     };
     document.addEventListener("keydown", handleKeyNav);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
       document.removeEventListener("keydown", handleKeyNav);
     };
-  }, [open, setOpen, activeIndex]);
-  const handleTriggerClick = () => {
-    if (!disabled) {
-      setOpen(!open);
-    }
-  };
+  }, [open, activeIndex]);
   const handleItemClick = (itemOnClick) => {
     itemOnClick();
     if (closeOnSelect) {
       setOpen(false);
     }
   };
-  const dropdownContent = open ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    "div",
+  const menuBody = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: menuRef, "data-dropdown-menu": true, "data-state": open ? "open" : "closed", role: "menu", className: cn("min-w-40", className), children: items ? items.map((item, index) => {
+    const IconComponent = item.icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "button",
+      {
+        ref: (el) => {
+          if (el) itemsRef.current[index] = el;
+        },
+        onClick: () => handleItemClick(item.onClick),
+        disabled: item.disabled,
+        role: "menuitem",
+        tabIndex: -1,
+        style: {
+          animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
+        },
+        className: cn(
+          "dropdown-item flex w-full items-center gap-2 px-2.5 py-1.5 text-sm rounded-lg",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus:bg-accent focus:text-accent-foreground",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          item.destructive && "text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
+        ),
+        children: [
+          IconComponent && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconComponent, { className: "h-4 w-4" }),
+          item.label
+        ]
+      },
+      index
+    );
+  }) : children });
+  const enhancedTrigger = import_react11.default.cloneElement(trigger, {
+    ref: triggerRef,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    onKeyDown: (e) => {
+      if (disabled) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(true);
+        requestAnimationFrame(() => itemsRef.current.find((el) => el && !el.disabled)?.focus());
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setOpen(true);
+        requestAnimationFrame(() => {
+          const enabled = itemsRef.current.filter((el) => el && !el.disabled);
+          enabled[enabled.length - 1]?.focus();
+        });
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+      }
+      if (typeof trigger.props?.onKeyDown === "function") {
+        trigger.props.onKeyDown(e);
+      }
+    },
+    className: cn(
+      trigger.props?.className,
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+    )
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    Popover,
     {
-      "data-dropdown-menu": true,
-      "data-combobox-dropdown": true,
-      ref: contentRef,
-      style: {
-        position: "fixed",
-        top: position?.top ?? -9999,
-        left: position?.left ?? -9999,
-        zIndex: 9999,
-        visibility: position ? "visible" : "hidden",
-        transformOrigin: "top center"
-      },
-      "data-state": open ? "open" : "closed",
-      role: "menu",
-      className: cn("z-9999 min-w-40", className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        "div",
-        {
-          className: cn(
-            "rounded-md border bg-popover text-popover-foreground shadow-md",
-            "backdrop-blur-sm bg-popover/95 border-border/60 p-1",
-            contentClassName
-          ),
-          children: items ? items.map((item, index) => {
-            const IconComponent = item.icon;
-            return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-              "button",
-              {
-                ref: (el) => {
-                  if (el) itemsRef.current[index] = el;
-                },
-                onClick: () => handleItemClick(item.onClick),
-                disabled: item.disabled,
-                role: "menuitem",
-                tabIndex: -1,
-                style: {
-                  animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
-                },
-                className: cn(
-                  "dropdown-item flex w-full items-center gap-2 px-2.5 py-1.5 text-sm rounded-sm",
-                  "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-                  "hover:bg-accent hover:text-accent-foreground",
-                  "focus:bg-accent focus:text-accent-foreground",
-                  "disabled:opacity-50 disabled:cursor-not-allowed",
-                  item.destructive && "text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
-                ),
-                children: [
-                  IconComponent && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconComponent, { className: "h-4 w-4" }),
-                  item.label
-                ]
-              },
-              index
-            );
-          }) : children
-        }
-      )
+      open,
+      onOpenChange: setOpen,
+      trigger: enhancedTrigger,
+      placement,
+      disabled,
+      contentClassName: cn("p-1", contentClassName),
+      children: menuBody
     }
-  ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    import_react11.default.cloneElement(trigger, {
-      ref: triggerRef,
-      onClick: handleTriggerClick,
-      "aria-expanded": open,
-      "aria-haspopup": "menu",
-      className: cn(
-        // keep original classes on trigger
-        trigger.props?.className,
-        // ensure focus-visible ring for trigger too
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-      )
-    }),
-    dropdownContent && typeof window !== "undefined" && (0, import_react_dom5.createPortal)(dropdownContent, document.body)
-  ] });
+  );
 };
 var DropdownMenuItem = ({ children, onClick, disabled, destructive, className }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   "button",
@@ -4958,7 +4830,7 @@ var DropdownMenuItem = ({ children, onClick, disabled, destructive, className })
     onClick,
     disabled,
     className: cn(
-      "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors",
+      "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors",
       "hover:bg-accent hover:text-accent-foreground",
       "focus:bg-accent focus:text-accent-foreground focus:outline-none",
       "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -4976,7 +4848,7 @@ var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", cla
       "button",
       {
         className: cn(
-          "inline-flex items-center justify-between gap-2 px-3 py-2 text-sm rounded-md border bg-background border-border/60",
+          "inline-flex items-center justify-between gap-2 px-3 py-2 text-sm rounded-2xl border bg-background border-border/60",
           "hover:bg-accent/50",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           className
@@ -5002,7 +4874,6 @@ var import_lucide_react13 = require("lucide-react");
 // ../../components/ui/Combobox.tsx
 var React20 = __toESM(require("react"), 1);
 var import_react12 = require("react");
-var import_react_dom6 = require("react-dom");
 var import_lucide_react12 = require("lucide-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var getOptionLabel = (option) => {
@@ -5047,55 +4918,7 @@ var Combobox = ({
     () => enableSearch ? options.filter((o) => getOptionLabel(o).toLowerCase().includes(query.toLowerCase())) : options,
     [options, query, enableSearch]
   );
-  const [dropdownPosition, setDropdownPosition] = React20.useState(null);
   const triggerRef = React20.useRef(null);
-  const dropdownRef = React20.useRef(null);
-  const calculatePosition = React20.useCallback(() => {
-    if (!triggerRef.current) return null;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    return {
-      top: rect.bottom + scrollTop + 4,
-      left: rect.left + scrollLeft,
-      width: rect.width
-    };
-  }, []);
-  React20.useEffect(() => {
-    if (!open) return;
-    const handler = () => {
-      const pos = calculatePosition();
-      if (pos) setDropdownPosition(pos);
-    };
-    window.addEventListener("resize", handler);
-    window.addEventListener("scroll", handler, true);
-    return () => {
-      window.removeEventListener("resize", handler);
-      window.removeEventListener("scroll", handler, true);
-    };
-  }, [open, calculatePosition]);
-  React20.useEffect(() => {
-    if (!open) return;
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      const triggerEl = triggerRef.current;
-      const dropdownEl = dropdownRef.current;
-      if (triggerEl && !triggerEl.contains(target) && dropdownEl && !dropdownEl.contains(target)) {
-        setOpen(false);
-      }
-    };
-    const handleEscape = (event) => {
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [open]);
   const handleSelect = (option) => {
     const val = getOptionValue(option);
     if (val !== void 0 && val !== null) {
@@ -5121,110 +4944,91 @@ var Combobox = ({
   }, [open, enableSearch]);
   const selectedOption = findOptionByValue(options, value);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
-  const dropdownContent = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    "div",
-    {
-      "data-combobox-dropdown": true,
-      ref: dropdownRef,
-      style: {
-        position: "absolute",
-        top: dropdownPosition?.top || 0,
-        left: dropdownPosition?.left || 0,
-        width: dropdownPosition?.width || 200,
-        zIndex: 9999,
-        transformOrigin: "top center"
-      },
-      "data-state": open ? "open" : "closed",
-      role: "listbox",
-      id: `${resolvedId}-listbox`,
-      className: "z-9999",
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"), children: [
-        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Search, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            "input",
-            {
-              ref: inputRef,
-              value: query,
-              onChange: (e) => {
-                setQuery(e.target.value);
-                setActiveIndex(null);
-              },
-              onKeyDown: (e) => {
-                if (e.key === "ArrowDown") {
-                  e.preventDefault();
-                  setActiveIndex((prev) => {
-                    const next = prev === null ? 0 : prev + 1;
-                    return next >= filteredOptions.length ? 0 : next;
-                  });
-                } else if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  setActiveIndex((prev) => {
-                    const next = prev === null ? filteredOptions.length - 1 : prev - 1;
-                    return next < 0 ? filteredOptions.length - 1 : next;
-                  });
-                } else if (e.key === "Enter") {
-                  e.preventDefault();
-                  if (activeIndex !== null && filteredOptions[activeIndex]) {
-                    handleSelect(filteredOptions[activeIndex]);
-                  }
-                } else if (e.key === "Escape") {
-                  e.preventDefault();
-                  setOpen(false);
-                }
-              },
-              placeholder: searchPlaceholder,
-              className: "w-full rounded-md bg-background/50 py-2 pl-8 pr-3 text-sm border-0 focus:outline-none focus:bg-background/80 transition-colors placeholder:text-muted-foreground/60",
-              "aria-autocomplete": "list",
-              "aria-activedescendant": activeIndex != null ? `combobox-item-${activeIndex}` : void 0
+  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", role: "listbox", id: `${resolvedId}-listbox`, className: "w-full", children: [
+    enableSearch && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Search, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setActiveIndex(null);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setActiveIndex((prev) => {
+                const next = prev === null ? 0 : prev + 1;
+                return next >= filteredOptions.length ? 0 : next;
+              });
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              setActiveIndex((prev) => {
+                const next = prev === null ? filteredOptions.length - 1 : prev - 1;
+                return next < 0 ? filteredOptions.length - 1 : next;
+              });
+            } else if (e.key === "Enter") {
+              e.preventDefault();
+              if (activeIndex !== null && filteredOptions[activeIndex]) {
+                handleSelect(filteredOptions[activeIndex]);
+              }
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              setOpen(false);
             }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Loader2, { className: "h-6 w-6 animate-spin text-primary" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading\u2026" })
-        ] }) }) : filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
-          const itemValue = getOptionValue(item);
-          const itemLabel = getOptionLabel(item);
-          const isSelected = itemValue === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-            "li",
-            {
-              ref: (node) => {
-                listRef.current[index] = node;
-              },
-              id: `combobox-item-${index}`,
-              role: "option",
-              tabIndex: -1,
-              "aria-selected": isSelected,
-              onClick: () => handleSelect(item),
-              style: {
-                animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
-              },
-              className: cn(
-                "dropdown-item group flex cursor-pointer items-center justify-between rounded-sm px-2.5 py-1.5 text-sm",
-                "outline-none focus:outline-none focus-visible:outline-none",
-                "hover:bg-accent hover:text-accent-foreground",
-                "focus:bg-accent focus:text-accent-foreground",
-                "data-disabled:pointer-events-none data-disabled:opacity-50",
-                index === activeIndex && "bg-accent text-accent-foreground",
-                isSelected && "bg-accent text-accent-foreground"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate", children: itemLabel }),
-                isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Check, { className: "h-4 w-4 text-primary" })
-              ]
-            },
-            `${itemValue}-${index}`
-          );
-        }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm", children: emptyText }),
-          query && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear" })
-        ] }) }) }) })
-      ] })
-    }
-  );
+          },
+          placeholder: searchPlaceholder,
+          className: "w-full rounded-full bg-background/50 py-2 pl-8 pr-3 text-sm border-0 focus:outline-none focus:bg-background/80 transition-colors placeholder:text-muted-foreground/60",
+          "aria-autocomplete": "list",
+          "aria-activedescendant": activeIndex != null ? `combobox-item-${activeIndex}` : void 0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Loader2, { className: "h-6 w-6 animate-spin text-primary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading\u2026" })
+    ] }) }) : filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
+      const itemValue = getOptionValue(item);
+      const itemLabel = getOptionLabel(item);
+      const isSelected = itemValue === value;
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "li",
+        {
+          ref: (node) => {
+            listRef.current[index] = node;
+          },
+          id: `combobox-item-${index}`,
+          role: "option",
+          tabIndex: -1,
+          "aria-selected": isSelected,
+          onClick: () => handleSelect(item),
+          style: {
+            animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
+          },
+          className: cn(
+            "dropdown-item group flex cursor-pointer items-center justify-between rounded-lg px-2.5 py-1.5 text-sm",
+            "outline-none focus:outline-none focus-visible:outline-none",
+            "hover:bg-accent hover:text-accent-foreground",
+            "focus:bg-accent focus:text-accent-foreground",
+            "data-disabled:pointer-events-none data-disabled:opacity-50",
+            index === activeIndex && "bg-accent text-accent-foreground",
+            isSelected && "bg-accent text-accent-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate", children: itemLabel }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Check, { className: "h-4 w-4 text-primary" })
+          ]
+        },
+        `${itemValue}-${index}`
+      );
+    }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm", children: emptyText }),
+      query && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear" })
+    ] }) }) }) })
+  ] });
   const sizeStyles8 = {
     // Keep consistent with Input size heights
     sm: "h-8 py-1.5 text-sm md:h-7 md:text-xs",
@@ -5232,8 +5036,68 @@ var Combobox = ({
     lg: "h-12 py-3 text-base"
   };
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
-  const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
+  const radiusClass = size === "sm" ? "rounded-full" : "rounded-full";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
+  const triggerButtonBaseProps = {
+    ref: triggerRef,
+    type: "button",
+    disabled,
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": open,
+    "aria-controls": `${resolvedId}-listbox`,
+    id: resolvedId,
+    "aria-labelledby": labelId,
+    onKeyDown: (e) => {
+      if (disabled) return;
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setOpen(true);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+      }
+    },
+    className: cn(
+      "flex w-full items-center justify-between border border-input bg-background px-3",
+      radiusClass,
+      sizeStyles8[size],
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "hover:bg-accent/5 transition-colors hover:border-primary/40 focus:border-primary",
+      className
+    )
+  };
+  const triggerContents = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn("truncate", !displayValue && "text-muted-foreground", fontBold && "font-bold"), children: displayValue || placeholder }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1 ml-2", children: [
+      allowClear && value && !disabled && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "Clear selection",
+          onClick: handleClear,
+          onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleClear(e),
+          className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.X, { className: "h-3 w-3" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-all duration-200", open && "rotate-180 scale-110 text-primary") })
+    ] })
+  ] });
+  const triggerButtonForPopover = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { ...triggerButtonBaseProps, children: triggerContents });
+  const triggerButtonInline = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "button",
+    {
+      ...triggerButtonBaseProps,
+      onClick: () => {
+        if (disabled) return;
+        setOpen((prev) => !prev);
+      },
+      children: triggerContents
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("w-full group", verticalGap), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "label",
@@ -5252,57 +5116,22 @@ var Combobox = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-      "button",
+    usePortal ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      Popover,
       {
-        ref: triggerRef,
-        type: "button",
-        disabled,
-        role: "combobox",
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-controls": `${resolvedId}-listbox`,
-        id: resolvedId,
-        "aria-labelledby": labelId,
-        onClick: () => {
-          const next = !open;
-          if (next) {
-            const pos = calculatePosition();
-            if (pos) setDropdownPosition(pos);
-          }
-          setOpen(next);
-        },
-        className: cn(
-          "flex w-full items-center justify-between border border-input bg-background px-3",
-          radiusClass,
-          sizeStyles8[size],
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "hover:bg-accent/5 transition-colors hover:border-primary/40 focus:border-primary",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn("truncate", !displayValue && "text-muted-foreground", fontBold && "font-bold"), children: displayValue || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1 ml-2", children: [
-            allowClear && value && !disabled && // FIX: Use a div instead of a nested button
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                "aria-label": "Clear selection",
-                onClick: handleClear,
-                onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleClear(e),
-                className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.X, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-all duration-200", open && "rotate-180 scale-110 text-primary") })
-          ] })
-        ]
+        open,
+        onOpenChange: setOpen,
+        trigger: triggerButtonForPopover,
+        placement: "bottom-start",
+        matchTriggerWidth: true,
+        className: "z-9999",
+        contentClassName: "p-0",
+        children: dropdownBody
       }
-    ),
-    usePortal ? open && dropdownPosition && typeof window !== "undefined" && (0, import_react_dom6.createPortal)(dropdownContent, document.body) : open && dropdownPosition && dropdownContent
+    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
+      triggerButtonInline,
+      open && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "rounded-2xl border bg-popover text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", children: dropdownBody }) })
+    ] })
   ] });
 };
 
@@ -5401,7 +5230,7 @@ var Pagination = ({
               disabled: disabled || page === 1,
               className: cn(
                 sizeClass.btn,
-                "p-0 rounded transition-colors hidden sm:flex items-center justify-center",
+                "p-0 rounded-lg transition-colors hidden sm:flex items-center justify-center",
                 disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
               ),
               title: labels?.firstPage || t("firstPage"),
@@ -5416,7 +5245,7 @@ var Pagination = ({
               disabled: disabled || page === 1,
               className: cn(
                 sizeClass.btn,
-                "p-0 rounded transition-colors flex items-center justify-center",
+                "p-0 rounded-lg transition-colors flex items-center justify-center",
                 disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
               ),
               title: labels?.previousPage || t("previousPage"),
@@ -5432,7 +5261,7 @@ var Pagination = ({
                 disabled,
                 className: cn(
                   sizeClass.page,
-                  "rounded font-medium transition-colors",
+                  "rounded-lg font-medium transition-colors",
                   page === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground",
                   disabled && "opacity-40 cursor-not-allowed"
                 ),
@@ -5450,7 +5279,7 @@ var Pagination = ({
               disabled: disabled || page === totalPages,
               className: cn(
                 sizeClass.btn,
-                "p-0 rounded transition-colors flex items-center justify-center",
+                "p-0 rounded-lg transition-colors flex items-center justify-center",
                 disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
               ),
               title: labels?.nextPage || t("nextPage"),
@@ -5465,7 +5294,7 @@ var Pagination = ({
               disabled: disabled || page === totalPages,
               className: cn(
                 sizeClass.btn,
-                "p-0 rounded transition-colors hidden sm:flex items-center justify-center",
+                "p-0 rounded-lg transition-colors hidden sm:flex items-center justify-center",
                 disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
               ),
               title: labels?.lastPage || t("lastPage"),
@@ -5525,7 +5354,7 @@ var SimplePagination = ({
           disabled: disabled || page === 1,
           className: cn(
             sizeClass.btn,
-            "p-0 rounded transition-colors flex items-center justify-center",
+            "p-0 rounded-lg transition-colors flex items-center justify-center",
             disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
           ),
           "aria-label": "Previous page",
@@ -5544,7 +5373,7 @@ var SimplePagination = ({
           disabled: disabled || page === totalPages,
           className: cn(
             sizeClass.btn,
-            "p-0 rounded transition-colors flex items-center justify-center",
+            "p-0 rounded-lg transition-colors flex items-center justify-center",
             disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
           ),
           "aria-label": "Next page",
@@ -5564,7 +5393,7 @@ var CompactPagination = ({ page, totalPages, onChange, className, disabled = fal
         onClick: () => onChange(1),
         disabled: disabled || page === 1,
         className: cn(
-          "h-6 w-6 p-0 rounded transition-colors flex items-center justify-center",
+          "h-6 w-6 p-0 rounded-lg transition-colors flex items-center justify-center",
           disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
         ),
         title: "First page",
@@ -5578,7 +5407,7 @@ var CompactPagination = ({ page, totalPages, onChange, className, disabled = fal
         onClick: () => onChange(Math.max(1, page - 1)),
         disabled: disabled || page === 1,
         className: cn(
-          "h-6 w-6 p-0 rounded transition-colors flex items-center justify-center",
+          "h-6 w-6 p-0 rounded-lg transition-colors flex items-center justify-center",
           disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
         ),
         title: "Previous page",
@@ -5597,7 +5426,7 @@ var CompactPagination = ({ page, totalPages, onChange, className, disabled = fal
         onClick: () => onChange(Math.min(totalPages, page + 1)),
         disabled: disabled || page === totalPages,
         className: cn(
-          "h-6 w-6 p-0 rounded transition-colors flex items-center justify-center",
+          "h-6 w-6 p-0 rounded-lg transition-colors flex items-center justify-center",
           disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
         ),
         title: "Next page",
@@ -5611,7 +5440,7 @@ var CompactPagination = ({ page, totalPages, onChange, className, disabled = fal
         onClick: () => onChange(totalPages),
         disabled: disabled || page === totalPages,
         className: cn(
-          "h-6 w-6 p-0 rounded transition-colors flex items-center justify-center",
+          "h-6 w-6 p-0 rounded-lg transition-colors flex items-center justify-center",
           disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
         ),
         title: "Last page",
@@ -5682,7 +5511,7 @@ var Section = import_react13.default.forwardRef(
           variant === "gradient" ? getGradientClasses() : variantClasses2[variant],
           spacingClasses[spacing],
           paddingXClasses[paddingX],
-          outlined && "rounded-lg border border-border/60",
+          outlined && "rounded-2xl md:rounded-3xl border border-border/60",
           contained && "container mx-auto",
           className
         ),
@@ -5710,7 +5539,7 @@ var ScrollArea = (0, import_react14.forwardRef)(
       "div",
       {
         ref,
-        className: cn("relative overflow-hidden", variantClasses[variant], outlined && "rounded-lg border border-border/60", className),
+        className: cn("relative overflow-hidden", variantClasses[variant], outlined && "rounded-xl border border-border/60", className),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
@@ -5862,7 +5691,7 @@ var DatePicker = ({
               "datepicker-day rounded-lg focus:outline-none relative",
               "transition-all duration-200 font-medium",
               isPastDate && "opacity-30 cursor-not-allowed text-muted-foreground",
-              isSelected ? "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground font-bold shadow-lg shadow-primary/30 scale-110 z-10 hover:from-primary hover:to-primary/70" : !isPastDate && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 focus:bg-accent focus:text-accent-foreground",
+              isSelected ? "bg-linear-to-br from-primary to-primary/80 text-primary-foreground font-bold shadow-lg shadow-primary/30 scale-110 z-10 hover:from-primary hover:to-primary/70" : !isPastDate && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 focus:bg-accent focus:text-accent-foreground",
               isToday2 && !isSelected && "bg-primary/15 text-primary font-bold ring-2 ring-primary/30"
             ),
             children: [
@@ -5937,7 +5766,7 @@ var DatePicker = ({
           },
           className: cn(
             "flex-1 px-3 py-2 text-xs font-semibold rounded-xl",
-            "bg-gradient-to-r from-primary/10 to-primary/5 border border-primary/30",
+            "bg-linear-to-r from-primary/10 to-primary/5 border border-primary/30",
             "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
             "transition-all duration-300 flex items-center justify-center gap-2",
             "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10"
@@ -5959,7 +5788,7 @@ var DatePicker = ({
           },
           className: cn(
             "flex-1 px-3 py-2 text-xs font-semibold rounded-xl",
-            "bg-gradient-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
+            "bg-linear-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
             "text-destructive hover:from-destructive/20 hover:to-destructive/10 hover:border-destructive/50",
             "transition-all duration-300 flex items-center justify-center gap-2",
             "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10"
@@ -6023,7 +5852,7 @@ var DatePicker = ({
             "aria-labelledby": labelId,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
-              size === "sm" ? "rounded-lg" : "rounded-xl",
+              size === "sm" ? "rounded-full" : "rounded-full",
               size === "sm" ? "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1" : "px-3 py-2.5 text-sm h-11",
               "border-border/60 hover:border-primary/40",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
@@ -6219,7 +6048,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
               !isPastDate && !isInRange && !isRangeStart && !isRangeEnd && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 rounded-lg",
               // Range selection styling - smooth continuous background with gradient
               isInRange && "bg-primary/15 text-foreground",
-              (isRangeStart || isRangeEnd) && "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground hover:from-primary hover:to-primary/70 shadow-lg shadow-primary/25",
+              (isRangeStart || isRangeEnd) && "bg-linear-to-br from-primary to-primary/80 text-primary-foreground hover:from-primary hover:to-primary/70 shadow-lg shadow-primary/25",
               // Only round the actual start and end of the range
               isRangeStart && !isRangeEnd && "rounded-l-lg rounded-r-none",
               isRangeEnd && !isRangeStart && "rounded-r-lg rounded-l-none",
@@ -6307,7 +6136,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         {
           type: "button",
           className: cn(
-            "group flex w-full items-center justify-between rounded-xl border bg-background/80 backdrop-blur-sm px-3 py-2.5 text-sm",
+            "group flex w-full items-center justify-between rounded-full border bg-background/80 backdrop-blur-sm px-3 py-2.5 text-sm",
             "border-border/60 hover:border-primary/40",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
             "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
@@ -6505,17 +6334,20 @@ function Calendar2({
       }
     }
   };
-  const isDateDisabled = React24.useCallback((d) => {
-    if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
-    if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
-    if (Array.isArray(disabledDates)) {
-      return disabledDates.some((dd) => isSameDay(dd, d));
-    }
-    if (typeof disabledDates === "function") {
-      return disabledDates(d);
-    }
-    return false;
-  }, [minDate, maxDate, disabledDates]);
+  const isDateDisabled = React24.useCallback(
+    (d) => {
+      if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
+      if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
+      if (Array.isArray(disabledDates)) {
+        return disabledDates.some((dd) => isSameDay(dd, d));
+      }
+      if (typeof disabledDates === "function") {
+        return disabledDates(d);
+      }
+      return false;
+    },
+    [minDate, maxDate, disabledDates]
+  );
   const SIZE_STYLES3 = {
     sm: { day: "w-8 h-8 text-[12px]", grid: dense ? "gap-0.5" : "gap-1", head: "text-[11px]", header: "text-sm" },
     md: { day: "w-9 h-9 text-sm", grid: dense ? "gap-1" : "gap-1.5", head: "text-xs", header: "text-sm" },
@@ -6524,9 +6356,9 @@ function Calendar2({
   };
   const sz = SIZE_STYLES3[size];
   const VARIANT_STYLES2 = {
-    default: "border border-border rounded-lg bg-card",
-    bordered: "border-2 border-border rounded-xl bg-card shadow-sm",
-    card: "border border-border rounded-xl bg-card shadow-lg",
+    default: "border border-border rounded-2xl bg-card",
+    bordered: "border-2 border-border rounded-2xl bg-card shadow-sm",
+    card: "border border-border rounded-3xl bg-card shadow-lg",
     minimal: "bg-transparent"
   };
   const weekDays = React24.useMemo(() => {
@@ -6552,7 +6384,7 @@ function Calendar2({
             onClick: () => handleClickDay(d),
             disabled,
             className: cn(
-              "rounded-md flex items-center justify-center relative",
+              "rounded-lg flex items-center justify-center relative",
               sz.day,
               !inMonth && "text-muted-foreground/60",
               disabled && "opacity-40 cursor-not-allowed",
@@ -6595,9 +6427,27 @@ function Calendar2({
   }, [display, view, weekStartsOn, maxBound]);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full", className), ...rest, children: [
     showHeader && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { onClick: () => goByView(-1), disabled: prevDisabled, className: cn("p-1 rounded-md hover:bg-accent", prevDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.prev || (display === "week" ? "Previous week" : "Previous month"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react15.ChevronLeft, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "button",
+        {
+          onClick: () => goByView(-1),
+          disabled: prevDisabled,
+          className: cn("p-1 rounded-lg hover:bg-accent", prevDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"),
+          "aria-label": labels?.prev || (display === "week" ? "Previous week" : "Previous month"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react15.ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-sm font-semibold", children: display === "week" ? `${labels?.month ? labels.month(weekDays[0]) : weekDays[0].toLocaleDateString("en-US", { month: "short" })} ${weekDays[0].getDate()} \u2013 ${labels?.month ? labels.month(weekDays[6]) : weekDays[6].toLocaleDateString("en-US", { month: "short" })} ${weekDays[6].getDate()}` : labels?.month ? labels.month(view) : view.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { onClick: () => goByView(1), disabled: nextDisabled, className: cn("p-1 rounded-md hover:bg-accent", nextDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.next || (display === "week" ? "Next week" : "Next month"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react15.ChevronRight, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "button",
+        {
+          onClick: () => goByView(1),
+          disabled: nextDisabled,
+          className: cn("p-1 rounded-lg hover:bg-accent", nextDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"),
+          "aria-label": labels?.next || (display === "week" ? "Next week" : "Next month"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react15.ChevronRight, { className: "h-4 w-4" })
+        }
+      )
     ] }),
     display === "week" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
       showWeekdays && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(sz.head), children: w }, `w-${w}`)) }),
@@ -6614,7 +6464,7 @@ function Calendar2({
             onClick: () => handleClickDay(d),
             disabled,
             className: cn(
-              "rounded-md flex items-center justify-center relative",
+              "rounded-lg flex items-center justify-center relative",
               sz.day,
               disabled && "opacity-40 cursor-not-allowed",
               isToday2 && !selectedDay && "ring-1 ring-primary/50",
@@ -6750,12 +6600,12 @@ function WheelColumn({
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
-          className: "pointer-events-none absolute inset-x-2 top-1/2 -translate-y-1/2 rounded-lg bg-gradient-to-r from-primary/20 via-primary/15 to-primary/20 border border-primary/30 shadow-sm shadow-primary/10",
+          className: "pointer-events-none absolute inset-x-2 top-1/2 -translate-y-1/2 rounded-lg bg-linear-to-r from-primary/20 via-primary/15 to-primary/20 border border-primary/30 shadow-sm shadow-primary/10",
           style: { height: itemHeight }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-background/95 via-background/60 to-transparent z-10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-background/95 via-background/60 to-transparent z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-12 bg-linear-to-b from-background/95 via-background/60 to-transparent z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-linear-to-t from-background/95 via-background/60 to-transparent z-10" }),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
@@ -7103,7 +6953,7 @@ function TimePicker({
     emit(next);
   };
   const timePickerContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center py-2 px-3 rounded-xl bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 border border-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl font-bold tabular-nums tracking-wide text-foreground", children: display }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center py-2 px-3 rounded-xl bg-linear-to-r from-primary/10 via-primary/5 to-primary/10 border border-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl font-bold tabular-nums tracking-wide text-foreground", children: display }) }),
     allowManualInput && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Input_default,
@@ -7126,7 +6976,7 @@ function TimePicker({
           type: "button",
           className: cn(
             "group relative px-3 py-2.5 text-xs font-medium rounded-xl border border-border/50 overflow-hidden",
-            "bg-gradient-to-br from-background to-muted/30",
+            "bg-linear-to-br from-background to-muted/30",
             "hover:border-primary/40 hover:shadow-md transition-all duration-300",
             animate && "hover:scale-[1.02] active:scale-[0.98]"
           ),
@@ -7136,7 +6986,7 @@ function TimePicker({
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "div",
               {
-                className: cn("absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300", "bg-gradient-to-r", color),
+                className: cn("absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300", "bg-linear-to-r", color),
                 style: { opacity: 0.08 }
               }
             ),
@@ -7155,7 +7005,7 @@ function TimePicker({
         type: "button",
         className: cn(
           "px-3 py-2.5 text-xs font-medium rounded-xl border border-border/50",
-          "bg-gradient-to-br from-background to-muted/30",
+          "bg-linear-to-br from-background to-muted/30",
           "hover:border-primary/40 hover:bg-primary/5 hover:shadow-md transition-all duration-300",
           animate && "hover:scale-[1.02] active:scale-[0.98]"
         ),
@@ -7264,7 +7114,7 @@ function TimePicker({
                   className: cn(
                     "relative px-4 py-3 rounded-lg transition-all duration-300 text-sm font-bold overflow-hidden",
                     "focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1",
-                    isSelected && "bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25",
+                    isSelected && "bg-linear-to-r from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25",
                     !isSelected && "text-muted-foreground hover:text-foreground hover:bg-muted/50",
                     animate && "hover:scale-[1.02] active:scale-[0.98]"
                   ),
@@ -7278,7 +7128,7 @@ function TimePicker({
                     emit(next);
                   },
                   children: [
-                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute inset-0 bg-gradient-to-tr from-white/20 to-transparent" }),
+                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute inset-0 bg-linear-to-tr from-white/20 to-transparent" }),
                     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "relative", children: p })
                   ]
                 },
@@ -7296,7 +7146,7 @@ function TimePicker({
           type: "button",
           className: cn(
             "flex-1 px-4 py-2.5 text-xs font-semibold rounded-xl",
-            "bg-gradient-to-r from-primary/10 to-primary/5 border border-primary/30",
+            "bg-linear-to-r from-primary/10 to-primary/5 border border-primary/30",
             "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
             "transition-all duration-300 flex items-center justify-center gap-2",
             animate && "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10"
@@ -7318,7 +7168,7 @@ function TimePicker({
           type: "button",
           className: cn(
             "flex-1 px-4 py-2.5 text-xs font-semibold rounded-xl",
-            "bg-gradient-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
+            "bg-linear-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
             "text-destructive hover:from-destructive/20 hover:to-destructive/10 hover:border-destructive/50",
             "transition-all duration-300 flex items-center justify-center gap-2",
             animate && "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10"
@@ -7526,7 +7376,7 @@ var DateTimePicker = ({
             type: "button",
             disabled,
             className: cn(
-              "flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm",
+              "flex w-full items-center justify-between rounded-full border border-input bg-background px-3 py-2 text-sm",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               disabled && "opacity-50 cursor-not-allowed",
               !displayValue && "text-muted-foreground"
@@ -7543,7 +7393,7 @@ var DateTimePicker = ({
                       e.stopPropagation();
                       onChange(void 0);
                     },
-                    className: "hover:text-foreground p-0.5 rounded-sm hover:bg-accent",
+                    className: "hover:text-foreground p-0.5 rounded-md hover:bg-accent",
                     children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.X, { className: "h-4 w-4" })
                   }
                 ),
@@ -7553,7 +7403,7 @@ var DateTimePicker = ({
           }
         ),
         contentClassName: cn(
-          "w-auto p-0",
+          "w-auto p-0 rounded-2xl",
           // Keep the popover usable on small viewports
           "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto"
         ),
@@ -7609,7 +7459,6 @@ var DateTimePicker = ({
 // ../../components/ui/MultiCombobox.tsx
 var React27 = __toESM(require("react"), 1);
 var import_react16 = require("react");
-var import_react_dom7 = require("react-dom");
 var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var MultiCombobox = ({
@@ -7638,56 +7487,8 @@ var MultiCombobox = ({
   const [activeIndex, setActiveIndex] = React27.useState(null);
   const inputRef = React27.useRef(null);
   const listRef = React27.useRef([]);
-  const [dropdownPosition, setDropdownPosition] = React27.useState(null);
   const triggerRef = React27.useRef(null);
-  const dropdownRef = React27.useRef(null);
   useShadCNAnimations();
-  const calculatePosition = React27.useCallback(() => {
-    if (!triggerRef.current) return null;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    return {
-      top: rect.bottom + scrollTop + 4,
-      left: rect.left + scrollLeft,
-      width: rect.width
-    };
-  }, []);
-  React27.useEffect(() => {
-    if (!open) return;
-    const handler = () => {
-      const pos = calculatePosition();
-      if (pos) setDropdownPosition(pos);
-    };
-    window.addEventListener("resize", handler);
-    window.addEventListener("scroll", handler, true);
-    return () => {
-      window.removeEventListener("resize", handler);
-      window.removeEventListener("scroll", handler, true);
-    };
-  }, [open, calculatePosition]);
-  React27.useEffect(() => {
-    if (!open) return;
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      const triggerEl = triggerRef.current;
-      const dropdownEl = dropdownRef.current;
-      if (triggerEl && !triggerEl.contains(target) && dropdownEl && !dropdownEl.contains(target)) {
-        setOpen(false);
-      }
-    };
-    const handleEscape = (event) => {
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [open]);
   const normalizedOptions = React27.useMemo(
     () => options.map((o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label }),
     [options]
@@ -7751,11 +7552,151 @@ var MultiCombobox = ({
       item: "text-base px-3 py-3",
       tag: "px-2.5 py-1 text-sm"
     }
-  };
-  const autoId = (0, import_react16.useId)();
-  const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
-  const labelId = label ? `${resolvedId}-label` : void 0;
-  const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
+  };
+  const autoId = (0, import_react16.useId)();
+  const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
+  const labelId = label ? `${resolvedId}-label` : void 0;
+  const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
+  const listboxId = `${resolvedId}-listbox`;
+  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: "w-full", children: [
+    showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleClearAll();
+        },
+        className: "text-xs text-muted-foreground hover:underline cursor-pointer",
+        children: "Clear all"
+      }
+    ) }),
+    enableSearch && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative border-b border-border/60", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Search, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setActiveIndex(null);
+          },
+          onKeyDown: handleKeyDown,
+          placeholder,
+          className: cn("w-full rounded-t-xl bg-transparent focus:outline-none cursor-text", sizeStyles8[size].search)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"),
+        children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Loader2, { className: "h-6 w-6 animate-spin text-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-muted-foreground", children: loadingText })
+        ] }) }) : filtered.length ? filtered.map((item, index) => {
+          const isSelected = value.includes(item.value);
+          const isDisabled = disabledOptions.includes(item.value);
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            "li",
+            {
+              ref: (node) => {
+                listRef.current[index] = node;
+              },
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleSelect(item.value);
+                inputRef.current?.focus();
+              },
+              style: {
+                animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
+              },
+              className: cn(
+                "dropdown-item flex cursor-pointer items-center justify-between rounded-lg transition-colors",
+                sizeStyles8[size].item,
+                "hover:bg-accent hover:text-accent-foreground",
+                index === activeIndex && "bg-accent text-accent-foreground",
+                isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"
+              ),
+              children: [
+                item.label,
+                isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Check, { className: sizeStyles8[size].icon })
+              ]
+            },
+            item.value
+          );
+        }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { className: cn("px-3 py-8 text-center text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: emptyText }),
+          query && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
+        ] }) })
+      }
+    )
+  ] });
+  const triggerButton = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      disabled,
+      id: resolvedId,
+      "aria-labelledby": labelId,
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": listboxId,
+      className: cn(
+        "flex w-full items-center gap-2 rounded-2xl border border-input bg-background shadow-sm min-h-10",
+        "px-3 py-2",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-1 flex-wrap min-h-6 flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
+          const option = normalizedOptions.find((o) => o.value === itemValue);
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded-lg px-2 py-1 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate max-w-30", children: option ? displayFormat(option) : itemValue }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Remove ${option ? displayFormat(option) : itemValue}`,
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleRemove(itemValue);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRemove(itemValue);
+                  }
+                },
+                className: "hover:text-destructive transition-colors cursor-pointer select-none",
+                children: "\xD7"
+              }
+            )
+          ] }, itemValue);
+        }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "truncate text-sm", children: [
+          value.length,
+          " selected"
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_lucide_react18.ChevronDown,
+          {
+            className: cn("opacity-50 transition-all duration-200", sizeStyles8[size].icon, open && "rotate-180 scale-110 text-primary opacity-100")
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("w-full space-y-2 group", className), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "label",
@@ -7787,177 +7728,19 @@ var MultiCombobox = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "relative w-full" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-      "button",
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      Popover,
       {
-        ref: triggerRef,
-        type: "button",
-        disabled,
-        id: resolvedId,
-        "aria-labelledby": labelId,
-        onClick: () => {
-          const next = !open;
-          if (next) {
-            const pos = calculatePosition();
-            if (pos) setDropdownPosition(pos);
-          }
-          setOpen(next);
-        },
-        className: cn(
-          "flex w-full items-center gap-2 rounded-lg border border-input bg-background shadow-sm min-h-10",
-          "px-3 py-2",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          "disabled:cursor-not-allowed disabled:opacity-50"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-1 flex-wrap min-h-6 flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
-            const option = normalizedOptions.find((o) => o.value === itemValue);
-            return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                "span",
-                {
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": `Remove ${option ? displayFormat(option) : itemValue}`,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleRemove(itemValue);
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleRemove(itemValue);
-                    }
-                  },
-                  className: "hover:text-destructive transition-colors cursor-pointer select-none",
-                  children: "\xD7"
-                }
-              )
-            ] }, itemValue);
-          }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "truncate text-sm", children: [
-            value.length,
-            " selected"
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            import_lucide_react18.ChevronDown,
-            {
-              className: cn("opacity-50 transition-all duration-200", sizeStyles8[size].icon, open && "rotate-180 scale-110 text-primary opacity-100")
-            }
-          )
-        ]
+        open,
+        onOpenChange: setOpen,
+        trigger: triggerButton,
+        placement: "bottom-start",
+        matchTriggerWidth: true,
+        className: "z-9999",
+        contentClassName: "p-0",
+        children: dropdownBody
       }
-    ),
-    open && dropdownPosition && typeof window !== "undefined" ? (0, import_react_dom7.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        "div",
-        {
-          ref: dropdownRef,
-          "data-combobox-dropdown": true,
-          style: {
-            position: "absolute",
-            top: dropdownPosition?.top || 0,
-            left: dropdownPosition?.left || 0,
-            width: dropdownPosition?.width || 200,
-            zIndex: 9999,
-            transformOrigin: "top center"
-          },
-          "data-state": open ? "open" : "closed",
-          className: "z-9999",
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-            "div",
-            {
-              className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"),
-              children: [
-                showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleClearAll();
-                    },
-                    className: "text-xs text-muted-foreground hover:underline cursor-pointer",
-                    children: "Clear all"
-                  }
-                ) }),
-                enableSearch && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative border-b border-border/60", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Search, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                    "input",
-                    {
-                      ref: inputRef,
-                      value: query,
-                      onChange: (e) => {
-                        setQuery(e.target.value);
-                        setActiveIndex(null);
-                      },
-                      onKeyDown: handleKeyDown,
-                      placeholder,
-                      className: cn("w-full rounded-t-md bg-transparent focus:outline-none cursor-text", sizeStyles8[size].search)
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Loader2, { className: "h-6 w-6 animate-spin text-primary" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-muted-foreground", children: loadingText })
-                ] }) }) : filtered.length ? filtered.map((item, index) => {
-                  const isSelected = value.includes(item.value);
-                  const isDisabled = disabledOptions.includes(item.value);
-                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                    "li",
-                    {
-                      ref: (node) => {
-                        listRef.current[index] = node;
-                      },
-                      onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        toggleSelect(item.value);
-                        inputRef.current?.focus();
-                      },
-                      style: {
-                        animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
-                      },
-                      className: cn(
-                        "dropdown-item flex cursor-pointer items-center justify-between rounded-sm transition-colors",
-                        sizeStyles8[size].item,
-                        "hover:bg-accent hover:text-accent-foreground",
-                        index === activeIndex && "bg-accent text-accent-foreground",
-                        isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"
-                      ),
-                      children: [
-                        item.label,
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Check, { className: sizeStyles8[size].icon })
-                      ]
-                    },
-                    item.value
-                  );
-                }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  "li",
-                  {
-                    className: cn(
-                      "px-3 py-8 text-center text-muted-foreground",
-                      size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"
-                    ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: emptyText }),
-                      query && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
-                    ] })
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      ),
-      document.body
-    ) : null
+    )
   ] });
 };
 
@@ -8059,14 +7842,7 @@ var sizeStyles7 = {
 };
 var RadioGroupItem = React28.forwardRef(
   ({ value, id, disabled, className, children, label, description, icon }, ref) => {
-    const {
-      value: selectedValue,
-      onValueChange,
-      name,
-      disabled: groupDisabled,
-      size = "md",
-      variant = "default"
-    } = useRadioGroup();
+    const { value: selectedValue, onValueChange, name, disabled: groupDisabled, size = "md", variant = "default" } = useRadioGroup();
     const isDisabled = disabled || groupDisabled;
     const isSelected = selectedValue === value;
     const Icon = icon;
@@ -8076,7 +7852,7 @@ var RadioGroupItem = React28.forwardRef(
         "div",
         {
           className: cn(
-            "relative rounded-lg border transition-all duration-200 cursor-pointer",
+            "relative rounded-xl border transition-all duration-200 cursor-pointer",
             "hover:bg-accent/50 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
             isSelected && "border-primary bg-primary/5 ring-1 ring-primary/20",
             isDisabled && "cursor-not-allowed opacity-50",
@@ -8107,10 +7883,7 @@ var RadioGroupItem = React28.forwardRef(
                   children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "span",
                     {
-                      className: cn(
-                        "flex items-center justify-center w-full h-full rounded-full transition-all duration-200",
-                        isSelected && "bg-primary"
-                      ),
+                      className: cn("flex items-center justify-center w-full h-full rounded-full transition-all duration-200", isSelected && "bg-primary"),
                       children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
                     }
                   )
@@ -8119,17 +7892,7 @@ var RadioGroupItem = React28.forwardRef(
               /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
                   Icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "h-4 w-4 text-foreground" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                    "label",
-                    {
-                      htmlFor: radioId,
-                      className: cn(
-                        "font-medium text-foreground cursor-pointer",
-                        sizeStyles7[size].text
-                      ),
-                      children: label || children
-                    }
-                  )
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { htmlFor: radioId, className: cn("font-medium text-foreground cursor-pointer", sizeStyles7[size].text), children: label || children })
                 ] }),
                 description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
               ] })
@@ -8164,7 +7927,7 @@ var RadioGroupItem = React28.forwardRef(
           id: radioId,
           disabled: isDisabled,
           className: cn(
-            "inline-flex items-center justify-center gap-2 rounded-md border font-medium transition-all duration-200",
+            "inline-flex items-center justify-center gap-2 rounded-lg border font-medium transition-all duration-200",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "disabled:cursor-not-allowed disabled:opacity-50",
             isSelected ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border bg-background hover:bg-accent hover:text-accent-foreground",
@@ -8213,16 +7976,7 @@ var RadioGroupItem = React28.forwardRef(
             sizeStyles7[size].radio
           ),
           onClick: () => onValueChange?.(value),
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            "span",
-            {
-              className: cn(
-                "flex items-center justify-center w-full h-full rounded-full transition-all duration-200",
-                isSelected && "bg-primary"
-              ),
-              children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
-            }
-          )
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cn("flex items-center justify-center w-full h-full rounded-full transition-all duration-200", isSelected && "bg-primary"), children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) }) })
         }
       ),
       (label || children) && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
@@ -8628,7 +8382,7 @@ function OverlayControls({
           "absolute inset-0 flex items-center pointer-events-none z-50",
           keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) > 0 ? "justify-end pr-32" : keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) < 0 ? "justify-start pl-32" : "justify-center"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-black/50 backdrop-blur-sm rounded-xl px-6 py-4 shadow-xl border border-white/10 animate-in fade-in zoom-in duration-200", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-black/50 backdrop-blur-sm rounded-2xl px-6 py-4 shadow-xl border border-white/10 animate-in fade-in zoom-in duration-200", children: [
           keyboardFeedback.type === "play" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Play, { className: "w-16 h-16 text-white", fill: "white" }),
           keyboardFeedback.type === "pause" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Pause, { className: "w-16 h-16 text-white", fill: "white" }),
           keyboardFeedback.type === "seek" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-3", children: [
@@ -8690,7 +8444,7 @@ function OverlayControls({
                 noFocus: true
               }
             ),
-            previewData && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
+            previewData && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-xl border border-border shadow-lg overflow-hidden", children: [
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime3(previewData.time) })
             ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-xs font-mono text-center", children: formatTime3(previewData.time) }) }) })
@@ -8799,7 +8553,7 @@ function OverlayControls({
                       onChangeRate(r);
                       setRateOpen(false);
                     },
-                    className: cn("block w-full text-left px-3 py-1 text-sm rounded hover:bg-accent", rate === r && "bg-accent"),
+                    className: cn("block w-full text-left px-3 py-1 text-sm rounded-lg hover:bg-accent", rate === r && "bg-accent"),
                     children: [
                       r,
                       "x"
@@ -8922,7 +8676,7 @@ function CategoryTreeSelect(props) {
             !viewOnly && "cursor-pointer",
             !viewOnly && !isSelected && "hover:bg-accent/60 hover:shadow-sm",
             // Selected state
-            !viewOnly && isSelected && "bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 shadow-sm"
+            !viewOnly && isSelected && "bg-linear-to-r from-primary/15 via-primary/10 to-primary/5 shadow-sm"
           ),
           style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
           children: [
@@ -8930,7 +8684,7 @@ function CategoryTreeSelect(props) {
               "span",
               {
                 "aria-hidden": true,
-                className: "absolute left-0 top-2 bottom-2 w-1 rounded-full bg-gradient-to-b from-primary to-primary/70 shadow-sm shadow-primary/30"
+                className: "absolute left-0 top-2 bottom-2 w-1 rounded-full bg-linear-to-b from-primary to-primary/70 shadow-sm shadow-primary/30"
               }
             ),
             hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -8966,7 +8720,7 @@ function CategoryTreeSelect(props) {
                       "w-5 h-5 border-2 rounded-full flex items-center justify-center transition-all duration-200",
                       isSelected ? "border-primary bg-primary/10 shadow-sm shadow-primary/20" : "border-muted-foreground/30 hover:border-primary/50"
                     ),
-                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-gradient-to-br from-primary to-primary/80 shadow-sm" })
+                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-linear-to-br from-primary to-primary/80 shadow-sm" })
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -8989,7 +8743,7 @@ function CategoryTreeSelect(props) {
                   {
                     className: cn(
                       "w-5 h-5 border-2 rounded-lg flex items-center justify-center transition-all duration-200",
-                      isSelected ? "bg-gradient-to-br from-primary to-primary/80 border-primary shadow-sm shadow-primary/25" : "border-muted-foreground/30 hover:border-primary/50 hover:bg-primary/5"
+                      isSelected ? "bg-linear-to-br from-primary to-primary/80 border-primary shadow-sm shadow-primary/25" : "border-muted-foreground/30 hover:border-primary/50 hover:bg-primary/5"
                     ),
                     children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.Check, { className: "w-3 h-3 text-primary-foreground", strokeWidth: 3 })
                   }
@@ -9046,7 +8800,7 @@ function CategoryTreeSelect(props) {
           // Modern trigger button styling
           "group flex w-full items-center justify-between px-3 py-2.5",
           "bg-background/80 backdrop-blur-sm border border-border/60",
-          "rounded-xl h-11 text-sm",
+          "rounded-2xl h-11 text-sm",
           "hover:bg-accent/10 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
           "transition-all duration-300 ease-out",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
@@ -9233,7 +8987,7 @@ function ImageUpload({
       "div",
       {
         className: cn(
-          "relative border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200",
+          "relative border-2 border-dashed rounded-xl p-8 text-center transition-all duration-200",
           isDragging && !disabled ? "border-primary bg-primary/5 scale-[1.02]" : "border-border hover:border-primary/50",
           disabled && "opacity-50 cursor-not-allowed",
           uploading && "pointer-events-none"
@@ -9242,7 +8996,7 @@ function ImageUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          uploading && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-3", children: [
+          uploading && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Loader2, { className: "w-6 h-6 animate-spin text-primary" }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
@@ -9271,7 +9025,7 @@ function ImageUpload({
     ),
     showPreview && uploadedImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "space-y-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative group bg-card border border-border rounded-lg p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative group bg-card border border-border rounded-xl p-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Button_default,
           {
@@ -9282,7 +9036,7 @@ function ImageUpload({
             children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.X, { className: "w-3 h-3" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-lg", previewSizes[previewSize]), children: [
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "img",
             {
@@ -9478,7 +9232,7 @@ function Carousel({
     "div",
     {
       ref: carouselRef,
-      className: cn("relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-lg", className),
+      className: cn("relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-2xl", className),
       onMouseEnter: () => setIsPaused(true),
       onMouseLeave: () => setIsPaused(false),
       role: "region",
@@ -9597,7 +9351,7 @@ function Carousel({
               {
                 onClick: () => scrollTo(idx),
                 className: cn(
-                  "shrink-0 w-16 h-16 rounded-md overflow-hidden border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary",
+                  "shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary",
                   idx === currentIndex ? "border-primary scale-110" : "border-transparent opacity-70 hover:opacity-100"
                 ),
                 "aria-label": `Thumbnail ${idx + 1}`,
@@ -9709,24 +9463,16 @@ function FallingIcons({
       filter: `drop-shadow(0 0 ${4 * intensity}px ${glowColor}) drop-shadow(0 0 ${8 * intensity}px ${glowColor})`
     };
   }, [glow, glowColor, glowIntensity]);
-  const FallbackIcon = import_react20.default.useMemo(() => (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "12", cy: "12", r: "10" }) }), []);
-  const TheIcon = imageUrl ? ({ className: imgClassName }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    "img",
-    {
-      src: imageUrl,
-      alt: "",
-      className: cn("w-full h-full object-cover rounded-sm", imgClassName),
-      draggable: false
-    }
-  ) : Icon || FallbackIcon;
+  const FallbackIcon = import_react20.default.useMemo(
+    () => (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "12", cy: "12", r: "10" }) }),
+    []
+  );
+  const TheIcon = imageUrl ? ({ className: imgClassName }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: imageUrl, alt: "", className: cn("w-full h-full object-cover rounded-lg", imgClassName), draggable: false }) : Icon || FallbackIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       ref: containerRef,
-      className: cn(
-        fullScreen ? "fixed inset-0 overflow-hidden pointer-events-none" : "relative w-full h-full overflow-hidden",
-        areaClassName
-      ),
+      className: cn(fullScreen ? "fixed inset-0 overflow-hidden pointer-events-none" : "relative w-full h-full overflow-hidden", areaClassName),
       style: { zIndex },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("style", { children: `
@@ -9762,141 +9508,131 @@ function FallingIcons({
           }
         }
       ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          "div",
-          {
-            className: cn(
-              "absolute inset-0 pointer-events-none",
-              className
-            ),
-            "aria-hidden": true,
-            children: particles.map((p, i) => {
-              const swayDuration = p.fallDur * (0.8 + i % 5 * 0.05);
-              const spinDuration = Math.max(1, p.spinDur);
-              const handlePop = () => {
-                setParticles((prev) => {
-                  const next = prev.slice();
-                  const np = makeParticle();
-                  np.delay = -Math.random() * 8;
-                  next[i] = np;
-                  return next;
-                });
-              };
-              const trailParticles = trail ? Array.from({ length: Math.min(5, Math.max(1, trailLength)) }) : [];
-              return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react20.default.Fragment, { children: [
-                trail && trailParticles.map((_, trailIndex) => {
-                  const trailDelay = p.delay - (trailIndex + 1) * 0.15;
-                  const trailOpacity = 1 - (trailIndex + 1) * (1 / (trailParticles.length + 1));
-                  const trailScale = 1 - (trailIndex + 1) * 0.15;
-                  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("absolute inset-0 pointer-events-none", className), "aria-hidden": true, children: particles.map((p, i) => {
+          const swayDuration = p.fallDur * (0.8 + i % 5 * 0.05);
+          const spinDuration = Math.max(1, p.spinDur);
+          const handlePop = () => {
+            setParticles((prev) => {
+              const next = prev.slice();
+              const np = makeParticle();
+              np.delay = -Math.random() * 8;
+              next[i] = np;
+              return next;
+            });
+          };
+          const trailParticles = trail ? Array.from({ length: Math.min(5, Math.max(1, trailLength)) }) : [];
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react20.default.Fragment, { children: [
+            trail && trailParticles.map((_, trailIndex) => {
+              const trailDelay = p.delay - (trailIndex + 1) * 0.15;
+              const trailOpacity = 1 - (trailIndex + 1) * (1 / (trailParticles.length + 1));
+              const trailScale = 1 - (trailIndex + 1) * 0.15;
+              return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                "span",
+                {
+                  className: cn("absolute top-0 will-change-transform pointer-events-none uv-falling-particle", colorClassName),
+                  style: {
+                    left: `${p.leftPct}%`,
+                    animationDelay: `${trailDelay}s`,
+                    animationDuration: `${p.fallDur}s`,
+                    animationName: FallName,
+                    animationTimingFunction: easingMap[easingFunction] || "linear",
+                    animationIterationCount: "infinite",
+                    opacity: trailOpacity * 0.4,
+                    ["--fall"]: `${fallDist ?? (typeof window !== "undefined" ? window.innerHeight + 200 : 1200)}px`
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                     "span",
                     {
-                      className: cn("absolute top-0 will-change-transform pointer-events-none uv-falling-particle", colorClassName),
+                      className: "inline-block uv-sway",
                       style: {
-                        left: `${p.leftPct}%`,
-                        animationDelay: `${trailDelay}s`,
-                        animationDuration: `${p.fallDur}s`,
-                        animationName: FallName,
-                        animationTimingFunction: easingMap[easingFunction] || "linear",
+                        transform: `translateX(-50%) scale(${trailScale})`,
+                        animationName: SwayName,
+                        animationDuration: `${swayDuration}s`,
+                        animationTimingFunction: "ease-in-out",
                         animationIterationCount: "infinite",
-                        opacity: trailOpacity * 0.4,
-                        ["--fall"]: `${fallDist ?? (typeof window !== "undefined" ? window.innerHeight + 200 : 1200)}px`
+                        ["--amp"]: `${Math.round(p.driftAmp)}px`
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                         "span",
                         {
-                          className: "inline-block uv-sway",
+                          className: "block",
                           style: {
-                            transform: `translateX(-50%) scale(${trailScale})`,
-                            animationName: SwayName,
-                            animationDuration: `${swayDuration}s`,
-                            animationTimingFunction: "ease-in-out",
-                            animationIterationCount: "infinite",
-                            ["--amp"]: `${Math.round(p.driftAmp)}px`
+                            width: p.size,
+                            height: p.size,
+                            ...glowStyles
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                            "span",
-                            {
-                              className: "block",
-                              style: {
-                                width: p.size,
-                                height: p.size,
-                                ...glowStyles
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
-                            }
-                          )
+                          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
                         }
                       )
-                    },
-                    `${p.key}-trail-${trailIndex}`
-                  );
-                }),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                    }
+                  )
+                },
+                `${p.key}-trail-${trailIndex}`
+              );
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "span",
+              {
+                className: cn("absolute top-0 will-change-transform pointer-events-auto uv-falling-particle", colorClassName),
+                style: {
+                  left: `${p.leftPct}%`,
+                  animationDelay: `${p.delay}s`,
+                  animationDuration: `${p.fallDur}s`,
+                  animationName: FallName,
+                  animationTimingFunction: easingMap[easingFunction] || "linear",
+                  animationIterationCount: "infinite",
+                  ["--fall"]: `${fallDist ?? (typeof window !== "undefined" ? window.innerHeight + 200 : 1200)}px`
+                },
+                onMouseEnter: handlePop,
+                onAnimationIteration: (ev) => {
+                  if (ev.currentTarget !== ev.target) return;
+                  if (!randomizeEachLoop) return;
+                  if (ev.animationName !== FallName) return;
+                  setParticles((prev) => {
+                    const next = prev.slice();
+                    const np = makeParticle();
+                    np.delay = -Math.random() * 4;
+                    next[i] = np;
+                    return next;
+                  });
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   "span",
                   {
-                    className: cn("absolute top-0 will-change-transform pointer-events-auto uv-falling-particle", colorClassName),
+                    className: "inline-block uv-sway",
                     style: {
-                      left: `${p.leftPct}%`,
-                      animationDelay: `${p.delay}s`,
-                      animationDuration: `${p.fallDur}s`,
-                      animationName: FallName,
-                      animationTimingFunction: easingMap[easingFunction] || "linear",
+                      transform: `translateX(-50%)`,
+                      animationName: SwayName,
+                      animationDuration: `${swayDuration}s`,
+                      animationTimingFunction: "ease-in-out",
                       animationIterationCount: "infinite",
-                      ["--fall"]: `${fallDist ?? (typeof window !== "undefined" ? window.innerHeight + 200 : 1200)}px`
-                    },
-                    onMouseEnter: handlePop,
-                    onAnimationIteration: (ev) => {
-                      if (ev.currentTarget !== ev.target) return;
-                      if (!randomizeEachLoop) return;
-                      if (ev.animationName !== FallName) return;
-                      setParticles((prev) => {
-                        const next = prev.slice();
-                        const np = makeParticle();
-                        np.delay = -Math.random() * 4;
-                        next[i] = np;
-                        return next;
-                      });
+                      ["--amp"]: `${Math.round(p.driftAmp)}px`
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       "span",
                       {
-                        className: "inline-block uv-sway",
+                        className: cn(
+                          "block uv-spin hover:animate-[var(--popName)_0.35s_ease-out_forwards]",
+                          physicsRotation ? "animate-[var(--physicsSpinName)_var(--spinDur)_ease-in-out_infinite]" : spin && "animate-[var(--spinName)_var(--spinDur)_linear_infinite]"
+                        ),
                         style: {
-                          transform: `translateX(-50%)`,
-                          animationName: SwayName,
-                          animationDuration: `${swayDuration}s`,
-                          animationTimingFunction: "ease-in-out",
-                          animationIterationCount: "infinite",
-                          ["--amp"]: `${Math.round(p.driftAmp)}px`
+                          width: p.size,
+                          height: p.size,
+                          ["--spinName"]: SpinName,
+                          ["--physicsSpinName"]: PhysicsSpinName,
+                          ["--spinDur"]: `${spinDuration}s`,
+                          ["--popName"]: PopName,
+                          ...glowStyles
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                          "span",
-                          {
-                            className: cn(
-                              "block uv-spin hover:animate-[var(--popName)_0.35s_ease-out_forwards]",
-                              physicsRotation ? "animate-[var(--physicsSpinName)_var(--spinDur)_ease-in-out_infinite]" : spin && "animate-[var(--spinName)_var(--spinDur)_linear_infinite]"
-                            ),
-                            style: {
-                              width: p.size,
-                              height: p.size,
-                              ["--spinName"]: SpinName,
-                              ["--physicsSpinName"]: PhysicsSpinName,
-                              ["--spinDur"]: `${spinDuration}s`,
-                              ["--popName"]: PopName,
-                              ...glowStyles
-                            },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
-                          }
-                        )
+                        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
                       }
                     )
                   }
                 )
-              ] }, p.key);
-            })
-          }
-        )
+              }
+            )
+          ] }, p.key);
+        }) })
       ]
     }
   );
@@ -9924,8 +9660,8 @@ var ListItemSkeleton = ({ size }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex items-center gap-3 animate-pulse p-2"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("rounded-full bg-muted shrink-0", sz.avatar) }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-1 space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-4 bg-muted rounded w-3/4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-3 bg-muted rounded w-1/2" })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-4 bg-muted rounded-md w-3/4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-3 bg-muted rounded-md w-1/2" })
     ] })
   ] });
 };
@@ -9953,12 +9689,12 @@ var ListRoot = React34.forwardRef(
     const hasChildren = childCount > 0;
     const variantClasses2 = {
       plain: "",
-      outlined: "rounded-lg md:rounded-xl bg-card text-card-foreground border border-border shadow-sm",
-      soft: "rounded-lg bg-muted/40 border border-border/60",
-      bordered: "border border-border rounded-lg",
-      card: "rounded-lg bg-card shadow-md border border-border",
+      outlined: "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm",
+      soft: "rounded-xl bg-muted/40 border border-border/60",
+      bordered: "border border-border rounded-xl",
+      card: "rounded-xl bg-card shadow-md border border-border",
       flush: "",
-      striped: "rounded-lg border border-border overflow-hidden"
+      striped: "rounded-xl border border-border overflow-hidden"
     };
     if (loading2) {
       return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -10101,7 +9837,7 @@ var List_default = List;
 
 // ../../components/ui/Watermark.tsx
 var React35 = __toESM(require("react"), 1);
-var import_react_dom8 = require("react-dom");
+var import_react_dom5 = require("react-dom");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
@@ -10383,7 +10119,7 @@ var Watermark = ({
   if (fullPage) {
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
       children,
-      typeof window !== "undefined" ? (0, import_react_dom8.createPortal)(overlay, document.body) : null
+      typeof window !== "undefined" ? (0, import_react_dom5.createPortal)(overlay, document.body) : null
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("relative", className), style, ...rest, children: [
@@ -10398,10 +10134,46 @@ var React36 = __toESM(require("react"), 1);
 var import_lucide_react24 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var SIZE_STYLE = {
-  sm: { dot: "h-2.5 w-2.5", iconDot: "h-6 w-6", padY: "py-3", densePadY: "py-2", title: "text-sm", desc: "text-xs", time: "text-[11px]", icon: "h-3.5 w-3.5" },
-  md: { dot: "h-3 w-3", iconDot: "h-8 w-8", padY: "py-4", densePadY: "py-2.5", title: "text-base", desc: "text-sm", time: "text-xs", icon: "h-4 w-4" },
-  lg: { dot: "h-3.5 w-3.5", iconDot: "h-10 w-10", padY: "py-5", densePadY: "py-3", title: "text-lg", desc: "text-sm", time: "text-xs", icon: "h-5 w-5" },
-  xl: { dot: "h-4 w-4", iconDot: "h-12 w-12", padY: "py-6", densePadY: "py-3.5", title: "text-xl", desc: "text-base", time: "text-sm", icon: "h-6 w-6" }
+  sm: {
+    dot: "h-2.5 w-2.5",
+    iconDot: "h-6 w-6",
+    padY: "py-3",
+    densePadY: "py-2",
+    title: "text-sm",
+    desc: "text-xs",
+    time: "text-[11px]",
+    icon: "h-3.5 w-3.5"
+  },
+  md: {
+    dot: "h-3 w-3",
+    iconDot: "h-8 w-8",
+    padY: "py-4",
+    densePadY: "py-2.5",
+    title: "text-base",
+    desc: "text-sm",
+    time: "text-xs",
+    icon: "h-4 w-4"
+  },
+  lg: {
+    dot: "h-3.5 w-3.5",
+    iconDot: "h-10 w-10",
+    padY: "py-5",
+    densePadY: "py-3",
+    title: "text-lg",
+    desc: "text-sm",
+    time: "text-xs",
+    icon: "h-5 w-5"
+  },
+  xl: {
+    dot: "h-4 w-4",
+    iconDot: "h-12 w-12",
+    padY: "py-6",
+    densePadY: "py-3.5",
+    title: "text-xl",
+    desc: "text-base",
+    time: "text-sm",
+    icon: "h-6 w-6"
+  }
 };
 var STATUS_COLOR = {
   default: "bg-muted/60",
@@ -10436,13 +10208,7 @@ var Marker = ({ index, last, size, color, status = "default", lineColor, lineSty
         style: dotColor ? { background: color } : void 0
       }
     ),
-    !last && showLine && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      "div",
-      {
-        className: cn("flex-1 border-l-2", LINE_STYLE_MAP[lineStyle]),
-        style: { borderColor: lineColor || "hsl(var(--border))" }
-      }
-    )
+    !last && showLine && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("flex-1 border-l-2", LINE_STYLE_MAP[lineStyle]), style: { borderColor: lineColor || "hsl(var(--border))" } })
   ] });
 };
 var TimelineRoot = React36.forwardRef(
@@ -10467,12 +10233,7 @@ var TimelineRoot = React36.forwardRef(
       "div",
       {
         ref,
-        className: cn(
-          "relative",
-          mode === "horizontal" && "flex gap-4 overflow-x-auto",
-          mode === "vertical" && "space-y-0",
-          className
-        ),
+        className: cn("relative", mode === "horizontal" && "flex gap-4 overflow-x-auto", mode === "vertical" && "space-y-0", className),
         ...rest,
         children: mode === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "space-y-0", children: content }) : content
       }
@@ -10516,11 +10277,11 @@ var TimelineItem = React36.forwardRef(
     const padding = ctx.dense ? sz.densePadY : sz.padY;
     const variantClasses2 = {
       default: "",
-      outlined: "rounded-lg border border-border bg-card shadow-sm px-4 py-3",
-      card: "rounded-xl border border-border bg-card shadow-md px-5 py-4",
+      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",
       minimal: "border-l-2 pl-4 py-2",
-      modern: "rounded-lg bg-linear-to-r from-card to-muted/20 border border-border/50 px-5 py-4 backdrop-blur-sm",
-      gradient: "rounded-xl bg-linear-to-br from-primary/10 via-card to-accent/10 border border-primary/20 px-5 py-4 shadow-lg"
+      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__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("min-w-0 flex-1", variantClasses2[ctx.variant]), children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
@@ -10546,25 +10307,87 @@ var TimelineItem = React36.forwardRef(
       collapsible && isExpanded && expandContent && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mt-3 pt-3 border-t border-border/50 text-sm", children: expandContent })
     ] });
     const markerWidth = Icon || dot ? "w-auto" : "w-6";
-    const leftSide = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-left duration-500"), style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: contentBox })
-    ] });
-    const rightSide = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-right duration-500"), style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1 flex justify-end", children: contentBox }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) })
-    ] });
+    const leftSide = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "div",
+      {
+        className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-left duration-500"),
+        style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            Marker,
+            {
+              index: idx ?? 0,
+              last: isLast,
+              size: ctx.size,
+              color,
+              status,
+              lineColor: ctx.lineColor,
+              lineStyle: ctx.lineStyle,
+              active,
+              dot,
+              icon: Icon,
+              showLine: ctx.showLine
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: contentBox })
+        ]
+      }
+    );
+    const rightSide = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "div",
+      {
+        className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-right duration-500"),
+        style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1 flex justify-end", children: contentBox }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            Marker,
+            {
+              index: idx ?? 0,
+              last: isLast,
+              size: ctx.size,
+              color,
+              status,
+              lineColor: ctx.lineColor,
+              lineStyle: ctx.lineStyle,
+              active,
+              dot,
+              icon: Icon,
+              showLine: ctx.showLine
+            }
+          ) })
+        ]
+      }
+    );
     const horizontalItem = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "div",
       {
-        className: cn(
-          "flex flex-col items-center gap-2 min-w-[200px]",
-          ctx.animate && "animate-in fade-in-50 zoom-in-95 duration-500"
-        ),
+        className: cn("flex flex-col items-center gap-2 min-w-[200px]", ctx.animate && "animate-in fade-in-50 zoom-in-95 duration-500"),
         style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: false }),
-          !isLast && ctx.showLine && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("h-px w-full border-t-2", LINE_STYLE_MAP[ctx.lineStyle]), style: { borderColor: ctx.lineColor || "hsl(var(--border))" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            Marker,
+            {
+              index: idx ?? 0,
+              last: isLast,
+              size: ctx.size,
+              color,
+              status,
+              lineColor: ctx.lineColor,
+              lineStyle: ctx.lineStyle,
+              active,
+              dot,
+              icon: Icon,
+              showLine: false
+            }
+          ),
+          !isLast && ctx.showLine && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "div",
+            {
+              className: cn("h-px w-full border-t-2", LINE_STYLE_MAP[ctx.lineStyle]),
+              style: { borderColor: ctx.lineColor || "hsl(var(--border))" }
+            }
+          ),
           contentBox
         ]
       }
@@ -10586,7 +10409,7 @@ var Timeline_default = Timeline;
 var React37 = __toESM(require("react"), 1);
 var import_lucide_react25 = require("lucide-react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var clamp2 = (n, min, max) => Math.max(min, Math.min(max, n));
+var clamp3 = (n, min, max) => Math.max(min, Math.min(max, n));
 function hexToRgb(hex) {
   const str = hex.replace(/^#/, "").trim();
   if (str.length === 3) {
@@ -10604,7 +10427,7 @@ function hexToRgb(hex) {
   return null;
 }
 function rgbToHex(r, g, b) {
-  return `#${[r, g, b].map((v) => clamp2(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("")}`;
+  return `#${[r, g, b].map((v) => clamp3(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("")}`;
 }
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -10665,10 +10488,10 @@ function parseAnyColor(input) {
   }
   const rgbaMatch = s.match(/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)/i);
   if (rgbaMatch) {
-    const r = clamp2(parseInt(rgbaMatch[1], 10), 0, 255);
-    const g = clamp2(parseInt(rgbaMatch[2], 10), 0, 255);
-    const b = clamp2(parseInt(rgbaMatch[3], 10), 0, 255);
-    const a = rgbaMatch[4] != null ? clamp2(parseFloat(rgbaMatch[4]), 0, 1) : 1;
+    const r = clamp3(parseInt(rgbaMatch[1], 10), 0, 255);
+    const g = clamp3(parseInt(rgbaMatch[2], 10), 0, 255);
+    const b = clamp3(parseInt(rgbaMatch[3], 10), 0, 255);
+    const a = rgbaMatch[4] != null ? clamp3(parseFloat(rgbaMatch[4]), 0, 1) : 1;
     return { r, g, b, a };
   }
   const hslaMatch = s.match(/hsla?\(\s*(\d{1,3}(?:\.\d+)?)\s*,?\s*(\d{1,3}(?:\.\d+)?)%?\s*,?\s*(\d{1,3}(?:\.\d+)?)%?(?:\s*,?\s*(\d*\.?\d+))?\s*\)/i);
@@ -10676,7 +10499,7 @@ function parseAnyColor(input) {
     const h = parseFloat(hslaMatch[1]);
     const sl = parseFloat(hslaMatch[2]);
     const l = parseFloat(hslaMatch[3]);
-    const a = hslaMatch[4] != null ? clamp2(parseFloat(hslaMatch[4]), 0, 1) : 1;
+    const a = hslaMatch[4] != null ? clamp3(parseFloat(hslaMatch[4]), 0, 1) : 1;
     const rgb = hslToRgb(h, sl, l);
     return { ...rgb, a };
   }
@@ -10689,12 +10512,12 @@ function formatOutput({ r, g, b, a }, withAlpha, format) {
   if (format === "hsl" || format === "hsla") {
     const hsl = rgbToHsl(r, g, b);
     if (format === "hsla" || withAlpha) {
-      return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${clamp2(a, 0, 1)})`;
+      return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${clamp3(a, 0, 1)})`;
     }
     return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
   }
   if (withAlpha || a !== 1) {
-    return `rgba(${clamp2(r, 0, 255)}, ${clamp2(g, 0, 255)}, ${clamp2(b, 0, 255)}, ${clamp2(a, 0, 1)})`;
+    return `rgba(${clamp3(r, 0, 255)}, ${clamp3(g, 0, 255)}, ${clamp3(b, 0, 255)}, ${clamp3(a, 0, 1)})`;
   }
   return rgbToHex(r, g, b);
 }
@@ -10748,11 +10571,7 @@ var Swatch = ({
     "button",
     {
       type: "button",
-      className: cn(
-        sizeClasses2[size],
-        "rounded-md border border-border shadow-sm hover:scale-110 transition-transform",
-        onClick && "cursor-pointer"
-      ),
+      className: cn(sizeClasses2[size], "rounded-lg border border-border shadow-sm hover:scale-110 transition-transform", onClick && "cursor-pointer"),
       style: { backgroundColor: color },
       onClick,
       "aria-label": ariaLabel
@@ -10832,7 +10651,7 @@ function ColorPicker({
     emit(next);
   };
   const setAlpha = (aPct) => {
-    const a = clamp2(aPct / 100, 0, 1);
+    const a = clamp3(aPct / 100, 0, 1);
     const next = { ...rgba, a };
     setRgba(next);
     emit(next);
@@ -10874,7 +10693,7 @@ function ColorPicker({
       type: "button",
       disabled,
       className: cn(
-        "w-full px-3 rounded-lg border border-input bg-background flex items-center justify-between",
+        "w-full px-3 rounded-full border border-input bg-background flex items-center justify-between",
         sizeClasses2[size],
         "hover:border-accent-foreground/30 transition-colors",
         disabled && "opacity-50 cursor-not-allowed",
@@ -10886,10 +10705,7 @@ function ColorPicker({
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "span",
             {
-              className: cn(
-                "rounded border border-border shadow-sm",
-                size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5"
-              ),
+              className: cn("rounded-md border border-border shadow-sm", size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5"),
               style: { backgroundColor: withAlpha ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : hexForInput }
             }
           ),
@@ -10914,16 +10730,24 @@ function ColorPicker({
       placement: "bottom-start",
       matchTriggerWidth: variant === "minimal",
       contentWidth: contentWidthByVariant[variant],
-      contentClassName: cn("p-3 rounded-lg border border-border bg-card shadow-lg", contentClassName),
+      contentClassName: cn("p-3 rounded-xl border border-border bg-card shadow-lg", contentClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-3", children: [
         variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("input", { type: "color", value: hexForInput, onChange: handleNativeChange, className: "h-9 w-9 rounded-md cursor-pointer border border-border" }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            "input",
+            {
+              type: "color",
+              value: hexForInput,
+              onChange: handleNativeChange,
+              className: "h-9 w-9 rounded-lg cursor-pointer border border-border"
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
             "button",
             {
               type: "button",
               onClick: tryEyedropper,
-              className: cn("h-9 px-3 rounded-md border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5"),
+              className: cn("h-9 px-3 rounded-lg border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5"),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Pipette, { className: "w-3.5 h-3.5" }),
                 variant === "full" && "Pick"
@@ -10936,7 +10760,7 @@ function ColorPicker({
               type: "button",
               onClick: copyToClipboard,
               className: cn(
-                "h-9 px-3 rounded-md border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5",
+                "h-9 px-3 rounded-lg border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5",
                 copied && "bg-green-500/10 border-green-500/30"
               ),
               children: [
@@ -10950,7 +10774,7 @@ function ColorPicker({
             {
               type: "button",
               onClick: clear,
-              className: "ml-auto h-9 px-2 rounded-md border border-border text-xs hover:bg-destructive/10 transition-colors flex items-center gap-1",
+              className: "ml-auto h-9 px-2 rounded-lg border border-border text-xs hover:bg-destructive/10 transition-colors flex items-center gap-1",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.X, { className: "w-3.5 h-3.5" }),
                 variant === "full" && "Clear"
@@ -10976,14 +10800,27 @@ function ColorPicker({
               type: "button",
               onClick: copyToClipboard,
               className: cn(
-                "h-9 w-9 rounded-md border border-border hover:bg-accent/10 transition-colors flex items-center justify-center",
+                "h-9 w-9 rounded-lg border border-border hover:bg-accent/10 transition-colors flex items-center justify-center",
                 copied && "bg-green-500/10 border-green-500/30"
               ),
               children: copied ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Check, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Copy, { className: "w-3.5 h-3.5" })
             }
           )
         ] }),
-        withAlpha && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Slider, { min: 0, max: 100, step: 1, value: alphaPct, onChange: (v) => setAlpha(v), label: "Alpha", showValue: true, formatValue: (v) => `${v}%`, size: "sm" }) }),
+        withAlpha && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          Slider,
+          {
+            min: 0,
+            max: 100,
+            step: 1,
+            value: alphaPct,
+            onChange: (v) => setAlpha(v),
+            label: "Alpha",
+            showValue: true,
+            formatValue: (v) => `${v}%`,
+            size: "sm"
+          }
+        ) }),
         variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1.5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Palette, { className: "w-3.5 h-3.5" }),
@@ -11120,14 +10957,14 @@ function joinAreas(areas) {
 }
 function getVariantClasses(variant = "default", outlined) {
   if (outlined) {
-    return "rounded-lg md:rounded-xl bg-card text-card-foreground border border-border shadow-sm";
+    return "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm";
   }
   const variants = {
     default: "",
-    bordered: "border border-border rounded-lg",
-    card: "rounded-lg md:rounded-xl bg-card text-card-foreground border border-border shadow-sm",
-    flat: "bg-muted/30 rounded-lg",
-    glass: "bg-background/80 backdrop-blur-sm border border-border/50 rounded-lg shadow-lg"
+    bordered: "border border-border rounded-xl",
+    card: "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm",
+    flat: "bg-muted/30 rounded-xl",
+    glass: "bg-background/80 backdrop-blur-sm border border-border/50 rounded-xl shadow-lg"
   };
   return variants[variant] || "";
 }
@@ -11203,12 +11040,7 @@ var GridRoot = import_react21.default.forwardRef(
       "div",
       {
         ref,
-        className: cn(
-          baseClass,
-          getVariantClasses(variant, outlined),
-          animated && "transition-all duration-300 ease-in-out",
-          className
-        ),
+        className: cn(baseClass, getVariantClasses(variant, outlined), animated && "transition-all duration-300 ease-in-out", className),
         style,
         ...rest,
         children: [
@@ -11267,10 +11099,7 @@ var GridItem = import_react21.default.forwardRef(
         "div",
         {
           ref,
-          className: cn(
-            hoverable && "transition-all duration-200 hover:scale-[1.02] hover:shadow-md cursor-pointer",
-            className
-          ),
+          className: cn(hoverable && "transition-all duration-200 hover:scale-[1.02] hover:shadow-md cursor-pointer", className),
           style: st,
           ...rest
         }
@@ -11287,7 +11116,7 @@ var import_react23 = require("react");
 
 // ../../components/ui/ChartTooltip.tsx
 var import_react22 = require("react");
-var import_react_dom9 = require("react-dom");
+var import_react_dom6 = require("react-dom");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
   const [isMounted, setIsMounted] = (0, import_react22.useState)(false);
@@ -11320,7 +11149,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           "div",
           {
-            className: cn("bg-popover text-popover-foreground border border-border", "rounded-lg shadow-xl px-3 py-2 text-sm", "backdrop-blur-sm"),
+            className: cn("bg-popover text-popover-foreground border border-border", "rounded-2xl shadow-xl px-3 py-2 text-sm", "backdrop-blur-sm"),
             style: {
               minWidth: "80px",
               width: "max-content",
@@ -11358,7 +11187,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
       ]
     }
   );
-  return (0, import_react_dom9.createPortal)(tooltipContent, document.body);
+  return (0, import_react_dom6.createPortal)(tooltipContent, document.body);
 }
 
 // ../../components/ui/LineChart.tsx
@@ -11859,7 +11688,7 @@ function PieChart({
         className: "flex items-center gap-2 text-sm",
         style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.3}s forwards` } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-3 h-3 rounded-sm shrink-0", style: { backgroundColor: seg.color } }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-3 h-3 rounded-md shrink-0", style: { backgroundColor: seg.color } }),
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-muted-foreground", children: seg.label }),
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-foreground font-medium ml-auto", children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : seg.value })
         ]
@@ -12115,7 +11944,7 @@ function AreaChart({
         className: "flex items-center gap-2 text-sm",
         style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.5}s forwards` } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: s.color } }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "w-3 h-3 rounded-md", style: { backgroundColor: s.color } }),
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-muted-foreground", children: s.name })
         ]
       },
@@ -12458,7 +12287,7 @@ function RadarChart({
         className: "flex items-center gap-2 text-sm",
         style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.5}s forwards` } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: s.color } }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "w-3 h-3 rounded-md", style: { backgroundColor: s.color } }),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-muted-foreground", children: s.name })
         ]
       },
@@ -12754,7 +12583,7 @@ var Table = import_react31.default.forwardRef(({ className, containerClassName,
   {
     className: cn(
       "relative w-full overflow-auto",
-      "rounded-lg md:rounded-xl border border-border",
+      "rounded-2xl md:rounded-3xl border border-border",
       "bg-card text-card-foreground shadow-sm",
       "backdrop-blur-sm transition-all duration-300",
       containerClassName
@@ -12971,7 +12800,7 @@ function DataTable({
             "button",
             {
               className: cn(
-                "p-1 rounded-sm transition-all duration-200 hover:bg-accent",
+                "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
                 sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
               ),
               onClick: () => {
@@ -13019,7 +12848,7 @@ function DataTable({
               "button",
               {
                 className: cn(
-                  "p-1.5 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+                  "p-1.5 rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                   filters[col.key] && "bg-accent text-foreground"
                 ),
@@ -13153,7 +12982,7 @@ function DataTable({
                   setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
                   /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "truncate", children: c.title })
                 ]
               },
@@ -13178,7 +13007,7 @@ function DataTable({
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("relative rounded-2xl md:rounded-3xl border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       Table,
       {
         containerClassName: "border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent",
@@ -13222,8 +13051,8 @@ function DataTable({
                         col.align === "right" && "text-right",
                         col.align === "center" && "text-center",
                         columnDividers && colIdx > 0 && "border-l border-border/60",
-                        isLastRow && col === visibleColumns[0] && "rounded-bl-md",
-                        isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-md"
+                        isLastRow && col === visibleColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
+                        isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl"
                       ),
                       children: col.render ? col.render(value, row, idx) : String(value ?? "")
                     },
@@ -13267,7 +13096,7 @@ function DataTable({
               {
                 onClick: () => setCurPage(p),
                 className: cn(
-                  "h-7 min-w-7 px-1.5 rounded text-xs font-medium transition-colors",
+                  "h-7 min-w-7 px-1.5 rounded-lg text-xs font-medium transition-colors",
                   curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"
                 ),
                 children: p
@@ -13620,7 +13449,7 @@ function AccessDenied({
 // ../../components/ui/ThemeToggleHeadless.tsx
 var import_lucide_react31 = require("lucide-react");
 var import_react33 = require("react");
-var import_react_dom10 = require("react-dom");
+var import_react_dom7 = require("react-dom");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
   theme,
@@ -13673,8 +13502,8 @@ function ThemeToggleHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom10.createPortal)(
+      typeof window !== "undefined" && (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom7.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "div",
           {
@@ -13722,7 +13551,7 @@ function ThemeToggleHeadless({
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
 var import_react34 = require("react");
-var import_react_dom11 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var import_lucide_react32 = require("lucide-react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function LanguageSwitcherHeadless({
@@ -13770,8 +13599,8 @@ function LanguageSwitcherHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom11.createPortal)(
+      typeof window !== "undefined" && (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom8.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "div",
           {