@underverse-ui/underverse 1.0.197 → 1.0.199

package/dist/index.js

@@ -2915,6 +2915,39 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
 }
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
 
+// src/components/form-control-size.ts
+var formControlSizeStyles = {
+  sm: {
+    control: "h-8 px-3 text-sm leading-none md:h-7 md:text-xs",
+    compactControl: "h-8 px-2.5 text-sm leading-none md:h-7 md:text-xs",
+    input: "h-8 px-3 text-sm leading-none md:h-7 md:text-xs",
+    label: "text-xs",
+    icon: "h-4 w-4 md:h-3.5 md:w-3.5",
+    iconButton: "h-7 w-7 md:h-6 md:w-6",
+    tag: "h-5 max-w-24 px-2 text-[10px] leading-none"
+  },
+  md: {
+    control: "h-10 px-3 text-sm leading-none",
+    compactControl: "h-10 px-3 text-sm leading-none",
+    input: "h-10 px-4 text-sm leading-none",
+    label: "text-sm",
+    icon: "h-4 w-4",
+    iconButton: "h-8 w-8",
+    tag: "h-6 max-w-28 px-2 text-xs leading-none"
+  },
+  lg: {
+    control: "h-12 px-4 text-base leading-none",
+    compactControl: "h-12 px-4 text-base leading-none",
+    input: "h-12 px-5 text-base leading-none",
+    label: "text-base",
+    icon: "h-5 w-5",
+    iconButton: "h-10 w-10",
+    tag: "h-7 max-w-32 px-2.5 text-sm leading-none"
+  }
+};
+var formControlFixedClass = "min-h-0 overflow-hidden";
+var formControlValueClass = "max-h-full min-w-0 flex-1 truncate whitespace-nowrap";
+
 // src/components/Input.tsx
 import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var Input = forwardRef3(
@@ -2978,23 +3011,7 @@ var Input = forwardRef3(
         error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
       }
     };
-    const sizeStyles8 = {
-      sm: {
-        input: "px-3 py-1.5 text-sm h-8 md:h-7 md:py-1 md:text-xs",
-        icon: "w-4 h-4",
-        button: "h-7 w-7"
-      },
-      md: {
-        input: "px-4 py-2 text-sm h-10",
-        icon: "w-5 h-5",
-        button: "h-8 w-8"
-      },
-      lg: {
-        input: "px-5 py-4 text-base h-12",
-        icon: "w-6 h-6",
-        button: "h-10 w-10"
-      }
-    };
+    const sizeStyles8 = formControlSizeStyles;
     const getErrorKey = (v) => {
       if (v.valueMissing) return "required";
       if (v.typeMismatch) return "typeMismatch";
@@ -3053,7 +3070,7 @@ var Input = forwardRef3(
             htmlFor: resolvedId,
             className: cn(
               // Label size follows input size
-              size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+              sizeStyles8[size].label,
               "font-medium transition-colors duration-200",
               // default color and highlight while any descendant focused
               disabled ? "text-muted-foreground" : cn("text-foreground group-focus-within:text-primary", success && "text-primary"),
@@ -3087,7 +3104,7 @@ var Input = forwardRef3(
           "div",
           {
             className: cn(
-              "absolute left-3 top-1/2 -translate-y-1/2 z-10",
+              "absolute left-3 top-1/2 -translate-y-1/2 z-10 flex max-h-full items-center overflow-hidden",
               "text-muted-foreground transition-colors duration-200",
               // highlight icon when input (or controls) focused
               "group-focus-within:text-primary"
@@ -3117,6 +3134,7 @@ var Input = forwardRef3(
             "aria-describedby": [errorId, descId].filter(Boolean).join(" ") || void 0,
             className: cn(
               "w-full text-foreground transition-all duration-200 ease-out",
+              formControlFixedClass,
               "placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
               "disabled:cursor-not-allowed disabled:opacity-50",
               // Size styles
@@ -3152,7 +3170,7 @@ var Input = forwardRef3(
                 "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
+                sizeStyles8[size].iconButton
               ),
               tabIndex: 0,
               "aria-label": gi18n.clearInput ?? "Clear input",
@@ -3168,7 +3186,7 @@ var Input = forwardRef3(
                 "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-full",
                 "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring/40",
                 "active:bg-accent/50 active:text-accent-foreground",
-                sizeStyles8[size].button
+                sizeStyles8[size].iconButton
               ),
               tabIndex: 0,
               "aria-label": showPassword ? gi18n.hidePassword ?? "Hide password" : gi18n.showPassword ?? "Show password",
@@ -5707,23 +5725,23 @@ var TagInput = forwardRef5(
     const moreLabel = labels?.moreCount?.replace("{count}", String(hiddenCount)) ?? `+${hiddenCount} more`;
     const sizeStyles8 = {
       sm: {
-        container: "min-h-8 p-1.5 gap-1",
-        input: "text-xs",
-        tag: "px-1.5 py-0.5 text-xs gap-1 rounded-full",
+        container: formControlSizeStyles.sm.control,
+        input: formControlSizeStyles.sm.label,
+        tag: formControlSizeStyles.sm.tag,
         tagIcon: "h-3 w-3",
         button: "h-7 text-xs px-2"
       },
       md: {
-        container: "min-h-10 p-2 gap-1.5",
-        input: "text-sm",
-        tag: "px-2 py-1 text-sm gap-1.5 rounded-full",
+        container: formControlSizeStyles.md.control,
+        input: formControlSizeStyles.md.label,
+        tag: formControlSizeStyles.md.tag,
         tagIcon: "h-3.5 w-3.5",
         button: "h-9 text-sm px-3"
       },
       lg: {
-        container: "min-h-12 p-2.5 gap-2",
-        input: "text-base",
-        tag: "px-2.5 py-1.5 text-base gap-2 rounded-full",
+        container: formControlSizeStyles.lg.control,
+        input: formControlSizeStyles.lg.label,
+        tag: formControlSizeStyles.lg.tag,
         tagIcon: "h-4 w-4",
         button: "h-11 text-base px-4"
       }
@@ -5794,7 +5812,7 @@ var TagInput = forwardRef5(
           htmlFor: inputId,
           className: cn(
             "block font-medium transition-colors duration-200",
-            size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+            formControlSizeStyles[size].label,
             disabled ? "text-muted-foreground" : isFocused ? "text-primary" : "text-foreground",
             labelClassName
           ),
@@ -5815,7 +5833,8 @@ var TagInput = forwardRef5(
         {
           onClick: handleContainerClick,
           className: cn(
-            "flex flex-wrap items-center cursor-text",
+            "flex items-center gap-1.5 cursor-text",
+            formControlFixedClass,
             "bg-background border border-input",
             "transition-all duration-200",
             "hover:border-accent-foreground/20",
@@ -5829,13 +5848,13 @@ var TagInput = forwardRef5(
               "span",
               {
                 className: cn(
-                  "inline-flex items-center",
+                  "inline-flex min-w-0 shrink-0 items-center gap-1 overflow-hidden rounded-full",
                   "bg-primary/10 text-primary font-mono",
                   "animate-in fade-in-0 zoom-in-95 duration-200",
                   sizeStyles8[size].tag
                 ),
                 children: [
-                  /* @__PURE__ */ jsx17("span", { className: "truncate max-w-50", children: tag }),
+                  /* @__PURE__ */ jsx17("span", { className: "min-w-0 truncate", children: tag }),
                   /* @__PURE__ */ jsx17(
                     "button",
                     {
@@ -5869,7 +5888,7 @@ var TagInput = forwardRef5(
                   setIsExpanded(true);
                 },
                 className: cn(
-                  "inline-flex items-center cursor-pointer",
+                  "inline-flex shrink-0 items-center cursor-pointer overflow-hidden rounded-full",
                   "bg-muted text-muted-foreground hover:bg-muted/80",
                   "transition-colors duration-150",
                   "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -5888,7 +5907,7 @@ var TagInput = forwardRef5(
                   setIsExpanded(false);
                 },
                 className: cn(
-                  "inline-flex items-center cursor-pointer",
+                  "inline-flex shrink-0 items-center cursor-pointer overflow-hidden rounded-full",
                   "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",
@@ -5918,7 +5937,7 @@ var TagInput = forwardRef5(
                 placeholder: isMaxReached ? `Max ${maxTags} tags` : currentPlaceholder,
                 disabled: disabled || isMaxReached,
                 className: cn(
-                  "flex-1 min-w-30 bg-transparent outline-none",
+                  "h-full min-w-0 flex-1 bg-transparent outline-none",
                   "placeholder:text-muted-foreground",
                   "disabled:cursor-not-allowed",
                   sizeStyles8[size].input
@@ -8914,7 +8933,7 @@ var DropdownMenuSub = ({ label, icon: Icon, disabled, borderMode, children }) =>
     }
   );
 };
-var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className, borderMode }) => {
+var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className, borderMode, size = "md" }) => {
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
   return /* @__PURE__ */ jsx32(
@@ -8924,15 +8943,17 @@ 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 border bg-background border-border/60",
+            "inline-flex items-center justify-between gap-2 border bg-background border-border/60",
             resolvedBorderMode ? getBorderRadiusClass(resolvedBorderMode) : "rounded-2xl",
+            formControlFixedClass,
+            formControlSizeStyles[size].control,
             "hover:bg-accent/50",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
             className
           ),
           children: [
-            /* @__PURE__ */ jsx32("span", { className: "truncate max-w-64 text-foreground/90", children: value || placeholder }),
-            /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "opacity-70", children: /* @__PURE__ */ jsx32("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            /* @__PURE__ */ jsx32("span", { className: cn(formControlValueClass, "max-w-64 text-foreground/90"), children: value || placeholder }),
+            /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "shrink-0 opacity-70", children: /* @__PURE__ */ jsx32("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
           ]
         }
       ),
@@ -9026,7 +9047,8 @@ var Combobox = ({
   searchDebounceMs = 0,
   minSearchLength = 0,
   maxInitialOptions,
-  showSearchPromptWhenEmptyQuery = false
+  showSearchPromptWhenEmptyQuery = false,
+  matchTriggerBackground = false
 }) => {
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
@@ -9041,6 +9063,7 @@ var Combobox = ({
   const [query, setQuery] = React30.useState("");
   const [activeIndex, setActiveIndex] = React30.useState(null);
   const [localRequiredError, setLocalRequiredError] = React30.useState();
+  const [triggerBackgroundColor, setTriggerBackgroundColor] = React30.useState();
   useShadCNAnimations();
   const inputRef = React30.useRef(null);
   const optionsViewportRef = React30.useRef(null);
@@ -9082,6 +9105,12 @@ var Combobox = ({
   });
   const virtualItems = canVirtualize ? optionVirtualizer.getVirtualItems() : [];
   const triggerRef = React30.useRef(null);
+  const updateTriggerBackgroundColor = React30.useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const backgroundColor = window.getComputedStyle(trigger).backgroundColor;
+    setTriggerBackgroundColor((current) => current === backgroundColor ? current : backgroundColor);
+  }, []);
   const scrollVirtualListToIndex = React30.useCallback((index) => {
     if (!canVirtualize || renderLimitedOptions.length === 0) return;
     optionVirtualizer.scrollToIndex(index, { align: "auto" });
@@ -9136,6 +9165,19 @@ var Combobox = ({
       );
     }
   }, [maxInitialOptions, options.length, searchMode, virtualized]);
+  React30.useLayoutEffect(() => {
+    if (!open || !matchTriggerBackground) {
+      setTriggerBackgroundColor(void 0);
+      return void 0;
+    }
+    let raf = 0;
+    const tick = () => {
+      updateTriggerBackgroundColor();
+      raf = window.requestAnimationFrame(tick);
+    };
+    tick();
+    return () => window.cancelAnimationFrame(raf);
+  }, [matchTriggerBackground, open, updateTriggerBackgroundColor]);
   const selectedOption = findOptionByValue(options, value) ?? (selectedOptionProp && getOptionValue(selectedOptionProp) === value ? selectedOptionProp : void 0);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
   const selectedIcon = selectedOption ? getOptionIcon(selectedOption) : void 0;
@@ -9162,9 +9204,9 @@ var Combobox = ({
     lg: "px-4 py-3 text-base gap-3"
   };
   const iconSizeStyles = {
-    sm: "w-4 h-4",
-    md: "w-5 h-5",
-    lg: "w-6 h-6"
+    sm: formControlSizeStyles.sm.icon,
+    md: formControlSizeStyles.md.icon,
+    lg: formControlSizeStyles.lg.icon
   };
   const checkIconSizeStyles = {
     sm: "h-3.5 w-3.5",
@@ -9371,9 +9413,9 @@ var Combobox = ({
     }
   );
   const sizeStyles8 = {
-    sm: "h-8 py-1.5 text-sm md:h-7 md:text-xs",
-    md: "h-10 py-2 text-sm",
-    lg: "h-12 py-3 text-base"
+    sm: formControlSizeStyles.sm.control,
+    md: formControlSizeStyles.md.control,
+    lg: formControlSizeStyles.lg.control
   };
   const variantStyles6 = {
     default: "border border-input bg-background hover:bg-accent/5 hover:border-primary/40",
@@ -9381,8 +9423,9 @@ var Combobox = ({
     ghost: "border-0 bg-transparent hover:bg-accent/50",
     filled: "border-0 bg-muted/50 hover:bg-muted/80"
   };
-  const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
+  const labelSize = formControlSizeStyles[size].label;
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
+  const dropdownBackgroundStyle = matchTriggerBackground && triggerBackgroundColor ? { backgroundColor: triggerBackgroundColor } : void 0;
   const triggerButtonBaseProps = {
     ref: triggerRef,
     type: "button",
@@ -9406,7 +9449,8 @@ var Combobox = ({
       }
     },
     className: cn(
-      "group flex w-full items-center justify-between px-3 transition-all duration-200",
+      "group flex w-full items-center justify-between transition-all duration-200",
+      formControlFixedClass,
       radiusClass,
       sizeStyles8[size],
       variantStyles6[variant],
@@ -9418,8 +9462,8 @@ var Combobox = ({
     )
   };
   const triggerContents = /* @__PURE__ */ jsxs23(Fragment7, { children: [
-    selectedIcon && /* @__PURE__ */ jsx33("span", { className: "shrink-0 w-5 h-5 mr-2 flex items-center justify-center text-primary", children: selectedIcon }),
-    /* @__PURE__ */ jsx33("span", { className: cn("flex-1 truncate text-left", !displayValue && "text-muted-foreground", fontBold && "font-semibold"), children: renderValue && selectedOption ? renderValue(selectedOption) : displayValue || placeholder }),
+    selectedIcon && /* @__PURE__ */ jsx33("span", { className: cn("mr-2 flex shrink-0 items-center justify-center overflow-hidden text-primary", formControlSizeStyles[size].icon), children: selectedIcon }),
+    /* @__PURE__ */ jsx33("span", { className: cn(formControlValueClass, "text-left", !displayValue && "text-muted-foreground", fontBold && "font-semibold"), children: renderValue && selectedOption ? renderValue(selectedOption) : displayValue || placeholder }),
     /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1.5 ml-2 shrink-0", children: [
       allowClear && value && !disabled && /* @__PURE__ */ jsx33(
         "div",
@@ -9515,11 +9559,19 @@ var Combobox = ({
         className: "z-50",
         borderMode: resolvedBorderMode,
         contentClassName: "p-0 overflow-hidden",
+        contentProps: { style: dropdownBackgroundStyle },
         children: dropdownBody
       }
     ) : /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
       triggerButtonInline,
-      open && /* @__PURE__ */ jsx33("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx33("div", { className: cn("overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", getPanelBorderRadiusClass(resolvedBorderMode)), children: dropdownBody }) })
+      open && /* @__PURE__ */ jsx33("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx33(
+        "div",
+        {
+          style: dropdownBackgroundStyle,
+          className: cn("overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", getPanelBorderRadiusClass(resolvedBorderMode)),
+          children: dropdownBody
+        }
+      ) })
     ] }),
     (helperText || effectiveError) && /* @__PURE__ */ jsxs23(
       "p",
@@ -10385,7 +10437,7 @@ var DatePicker = ({
   useShadCNAnimations();
   const sizeStyles8 = {
     sm: {
-      trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
+      trigger: formControlSizeStyles.sm.compactControl,
       dayCell: "w-7 h-7 text-xs",
       monthCell: "w-6 h-6 text-xs",
       navButton: "p-1.5",
@@ -10396,13 +10448,13 @@ var DatePicker = ({
       actionIcon: "w-2.5 h-2.5",
       contentWidth: 240,
       contentPadding: "p-4",
-      label: "text-xs",
+      label: formControlSizeStyles.sm.label,
       weekdayLabel: "text-[9px] py-1",
       headerMargin: "mb-2",
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-10",
+      trigger: formControlSizeStyles.md.control,
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -10413,13 +10465,13 @@ var DatePicker = ({
       actionIcon: "w-3.5 h-3.5",
       contentWidth: 280,
       contentPadding: "p-5",
-      label: "text-sm",
+      label: formControlSizeStyles.md.label,
       weekdayLabel: "text-[10px] py-1.5",
       headerMargin: "mb-4",
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-12",
+      trigger: formControlSizeStyles.lg.control,
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -10430,7 +10482,7 @@ var DatePicker = ({
       actionIcon: "w-4 h-4",
       contentWidth: 340,
       contentPadding: "p-6",
-      label: "text-base",
+      label: formControlSizeStyles.lg.label,
       weekdayLabel: "text-xs py-2",
       headerMargin: "mb-5",
       footerMargin: "mt-5 pt-4 gap-2.5"
@@ -10788,6 +10840,7 @@ var DatePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
@@ -10801,7 +10854,7 @@ var DatePicker = ({
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2.5 flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs25("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
                 /* @__PURE__ */ jsx38(
                   "div",
                   {
@@ -10833,7 +10886,7 @@ var DatePicker = ({
                         e.stopPropagation();
                       }
                     },
-                    className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
+                    className: "h-full min-w-0 flex-1 truncate bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60"
                   }
                 )
               ] }),
@@ -11070,7 +11123,7 @@ var DateRangePicker = ({
   };
   const sizeStyles8 = {
     sm: {
-      trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
+      trigger: formControlSizeStyles.sm.compactControl,
       dayCell: "w-7 h-7 text-xs",
       monthCell: "w-6 h-6 text-xs",
       navButton: "p-1.5",
@@ -11081,13 +11134,13 @@ var DateRangePicker = ({
       actionIcon: "w-2.5 h-2.5",
       contentWidth: 240,
       contentPadding: "p-4",
-      label: "text-xs",
+      label: formControlSizeStyles.sm.label,
       weekdayLabel: "text-[9px] py-1",
       headerMargin: "mb-2",
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-10",
+      trigger: formControlSizeStyles.md.control,
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -11098,13 +11151,13 @@ var DateRangePicker = ({
       actionIcon: "w-3.5 h-3.5",
       contentWidth: 280,
       contentPadding: "p-5",
-      label: "text-sm",
+      label: formControlSizeStyles.md.label,
       weekdayLabel: "text-[10px] py-1.5",
       headerMargin: "mb-4",
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-12",
+      trigger: formControlSizeStyles.lg.control,
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -11115,7 +11168,7 @@ var DateRangePicker = ({
       actionIcon: "w-4 h-4",
       contentWidth: 340,
       contentPadding: "p-6",
-      label: "text-base",
+      label: formControlSizeStyles.lg.label,
       weekdayLabel: "text-xs py-2",
       headerMargin: "mb-5",
       footerMargin: "mt-5 pt-4 gap-2.5"
@@ -11542,6 +11595,7 @@ var DateRangePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
@@ -11554,7 +11608,7 @@ var DateRangePicker = ({
               effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5"
             ),
             children: [
-              /* @__PURE__ */ jsxs25("div", { className: cn("flex items-center flex-1 min-w-0", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+              /* @__PURE__ */ jsxs25("div", { className: cn("flex min-h-0 min-w-0 flex-1 items-center overflow-hidden", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
                 /* @__PURE__ */ jsx38(
                   "div",
                   {
@@ -11586,11 +11640,11 @@ var DateRangePicker = ({
                         e.stopPropagation();
                       }
                     },
-                    className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
+                    className: "h-full min-w-0 flex-1 truncate bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx38("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx38("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+              /* @__PURE__ */ jsx38("span", { className: cn("shrink-0 transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx38("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
             ]
           }
         ),
@@ -12040,7 +12094,7 @@ var LunarDatePicker = ({
   useShadCNAnimations();
   const sizeStyles8 = {
     sm: {
-      trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
+      trigger: formControlSizeStyles.sm.compactControl,
       dayCell: "w-7 h-7 text-xs",
       monthCell: "w-6 h-6 text-xs",
       navButton: "p-1.5",
@@ -12051,13 +12105,13 @@ var LunarDatePicker = ({
       actionIcon: "w-2.5 h-2.5",
       contentWidth: 240,
       contentPadding: "p-4",
-      label: "text-xs",
+      label: formControlSizeStyles.sm.label,
       weekdayLabel: "text-[9px] py-1",
       headerMargin: "mb-2",
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-10",
+      trigger: formControlSizeStyles.md.control,
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -12068,13 +12122,13 @@ var LunarDatePicker = ({
       actionIcon: "w-3.5 h-3.5",
       contentWidth: 280,
       contentPadding: "p-5",
-      label: "text-sm",
+      label: formControlSizeStyles.md.label,
       weekdayLabel: "text-[10px] py-1.5",
       headerMargin: "mb-4",
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-12",
+      trigger: formControlSizeStyles.lg.control,
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -12085,7 +12139,7 @@ var LunarDatePicker = ({
       actionIcon: "w-4 h-4",
       contentWidth: 340,
       contentPadding: "p-6",
-      label: "text-base",
+      label: formControlSizeStyles.lg.label,
       weekdayLabel: "text-xs py-2",
       headerMargin: "mb-5",
       footerMargin: "mt-5 pt-4 gap-2.5"
@@ -12474,6 +12528,7 @@ var LunarDatePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
@@ -12487,7 +12542,7 @@ var LunarDatePicker = ({
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2.5 flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs26("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
                 /* @__PURE__ */ jsx39(
                   "div",
                   {
@@ -12519,7 +12574,7 @@ var LunarDatePicker = ({
                         e.stopPropagation();
                       }
                     },
-                    className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
+                    className: "h-full min-w-0 flex-1 truncate bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60"
                   }
                 )
               ] }),
@@ -12603,7 +12658,7 @@ var LunarDateRangePicker = ({
   const wheelDeltaRef = React35.useRef(0);
   const sizeStyles8 = {
     sm: {
-      trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
+      trigger: formControlSizeStyles.sm.compactControl,
       dayCell: "w-7 h-7 text-xs",
       monthCell: "w-6 h-6 text-xs",
       navButton: "p-1.5",
@@ -12614,13 +12669,13 @@ var LunarDateRangePicker = ({
       actionIcon: "w-2.5 h-2.5",
       contentWidth: 240,
       contentPadding: "p-4",
-      label: "text-xs",
+      label: formControlSizeStyles.sm.label,
       weekdayLabel: "text-[9px] py-1",
       headerMargin: "mb-2",
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-10",
+      trigger: formControlSizeStyles.md.control,
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -12631,13 +12686,13 @@ var LunarDateRangePicker = ({
       actionIcon: "w-3.5 h-3.5",
       contentWidth: 280,
       contentPadding: "p-5",
-      label: "text-sm",
+      label: formControlSizeStyles.md.label,
       weekdayLabel: "text-[10px] py-1.5",
       headerMargin: "mb-4",
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-12",
+      trigger: formControlSizeStyles.lg.control,
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -12648,7 +12703,7 @@ var LunarDateRangePicker = ({
       actionIcon: "w-4 h-4",
       contentWidth: 340,
       contentPadding: "p-6",
-      label: "text-base",
+      label: formControlSizeStyles.lg.label,
       weekdayLabel: "text-xs py-2",
       headerMargin: "mb-5",
       footerMargin: "mt-5 pt-4 gap-2.5"
@@ -13095,6 +13150,7 @@ var LunarDateRangePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
               getBorderRadiusClass(borderMode ?? "full"),
               sizeStyles8[size].trigger,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
@@ -13107,7 +13163,7 @@ var LunarDateRangePicker = ({
               effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5"
             ),
             children: [
-              /* @__PURE__ */ jsxs26("div", { className: cn("flex items-center flex-1 min-w-0", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+              /* @__PURE__ */ jsxs26("div", { className: cn("flex min-h-0 min-w-0 flex-1 items-center overflow-hidden", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
                 /* @__PURE__ */ jsx39(
                   "div",
                   {
@@ -13118,9 +13174,9 @@ var LunarDateRangePicker = ({
                     children: /* @__PURE__ */ jsx39(Calendar2, { className: cn("transition-transform duration-300", sizeStyles8[size].calendarIcon, isOpen && "scale-110") })
                   }
                 ),
-                /* @__PURE__ */ jsx39("span", { className: cn("w-full truncate font-medium", !tempStart && "text-muted-foreground/60"), children: tempStart ? displayLabel : placeholder })
+                /* @__PURE__ */ jsx39("span", { className: cn("min-w-0 flex-1 truncate whitespace-nowrap font-medium", !tempStart && "text-muted-foreground/60"), children: tempStart ? displayLabel : placeholder })
               ] }),
-              /* @__PURE__ */ jsx39("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx39("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx39("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+              /* @__PURE__ */ jsx39("span", { className: cn("shrink-0 transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx39("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx39("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
             ]
           }
         ),
@@ -13748,9 +13804,9 @@ function MonthYearPicker({
     setOpen(false);
   };
   const sizeClasses2 = {
-    sm: { label: "text-xs", height: "h-8", padding: "px-2.5 py-1.5", text: "text-xs", icon: "w-3.5 h-3.5" },
-    md: { label: "text-sm", height: "h-10", padding: "px-3 py-2", text: "text-sm", icon: "w-4 h-4" },
-    lg: { label: "text-base", height: "h-12", padding: "px-4 py-3", text: "text-base", icon: "w-5 h-5" }
+    sm: { label: formControlSizeStyles.sm.label, control: formControlSizeStyles.sm.compactControl, icon: formControlSizeStyles.sm.icon },
+    md: { label: formControlSizeStyles.md.label, control: formControlSizeStyles.md.control, icon: formControlSizeStyles.md.icon },
+    lg: { label: formControlSizeStyles.lg.label, control: formControlSizeStyles.lg.control, icon: formControlSizeStyles.lg.icon }
   };
   const panelSizeClasses = {
     sm: { contentPadding: "p-4", stackGap: "space-y-3", displayText: "text-lg", actionText: "text-[11px]", actionPadding: "px-3 py-2" },
@@ -13778,9 +13834,8 @@ function MonthYearPicker({
       className: cn(
         "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
         getBorderRadiusClass(resolvedBorderMode),
-        sz.height,
-        sz.padding,
-        sz.text,
+        sz.control,
+        formControlFixedClass,
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         "transition-all duration-300 ease-out",
@@ -13792,7 +13847,7 @@ function MonthYearPicker({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
           /* @__PURE__ */ jsx40(
             "div",
             {
@@ -13806,7 +13861,7 @@ function MonthYearPicker({
           /* @__PURE__ */ jsx40(
             "span",
             {
-              className: cn("min-w-0 truncate font-medium transition-colors duration-200", !hasValue && "text-muted-foreground", hasValue && "text-foreground"),
+              className: cn(formControlValueClass, "font-medium transition-colors duration-200", !hasValue && "text-muted-foreground", hasValue && "text-foreground"),
               children: hasValue ? display : placeholder
             }
           )
@@ -15464,9 +15519,9 @@ function TimePicker({
     }
   };
   const sizeClasses2 = {
-    sm: { label: "text-xs", height: "h-8", padding: "px-2.5 py-1.5", text: "text-xs", icon: "w-3.5 h-3.5" },
-    md: { label: "text-sm", height: "h-10", padding: "px-3 py-2", text: "text-sm", icon: "w-4 h-4" },
-    lg: { label: "text-base", height: "h-12", padding: "px-4 py-3", text: "text-base", icon: "w-5 h-5" }
+    sm: { label: formControlSizeStyles.sm.label, control: formControlSizeStyles.sm.compactControl, icon: formControlSizeStyles.sm.icon },
+    md: { label: formControlSizeStyles.md.label, control: formControlSizeStyles.md.control, icon: formControlSizeStyles.md.icon },
+    lg: { label: formControlSizeStyles.lg.label, control: formControlSizeStyles.lg.control, icon: formControlSizeStyles.lg.icon }
   };
   const sz = sizeClasses2[size];
   const effectivePanelSize = variant === "compact" ? size === "lg" ? "md" : "sm" : size;
@@ -15489,9 +15544,8 @@ function TimePicker({
       className: cn(
         "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
         getBorderRadiusClass(resolvedBorderMode),
-        sz.height,
-        sz.padding,
-        sz.text,
+        sz.control,
+        formControlFixedClass,
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         "transition-all duration-300 ease-out",
@@ -15503,7 +15557,7 @@ function TimePicker({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs29("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
           /* @__PURE__ */ jsx42(
             "div",
             {
@@ -15518,7 +15572,8 @@ function TimePicker({
             "span",
             {
               className: cn(
-                "min-w-0 truncate font-medium transition-colors duration-200",
+                formControlValueClass,
+                "font-medium transition-colors duration-200",
                 !hasCommittedValue && "text-muted-foreground",
                 hasCommittedValue ? "text-foreground" : ""
               ),
@@ -15982,9 +16037,9 @@ var DateTimePicker = ({
   const [localRequiredError, setLocalRequiredError] = React39.useState();
   const sizeStyles8 = {
     sm: {
-      trigger: "h-8 px-2.5 py-1.5 text-sm md:h-7 md:text-xs",
-      icon: "h-3.5 w-3.5",
-      label: "text-xs",
+      trigger: formControlSizeStyles.sm.compactControl,
+      icon: formControlSizeStyles.sm.icon,
+      label: formControlSizeStyles.sm.label,
       buttonSize: "sm",
       calendarSize: "sm",
       timePickerSize: "sm",
@@ -15992,9 +16047,9 @@ var DateTimePicker = ({
       gap: "gap-2"
     },
     md: {
-      trigger: "h-10 px-3 py-2 text-sm",
-      icon: "h-4 w-4",
-      label: "text-sm",
+      trigger: formControlSizeStyles.md.control,
+      icon: formControlSizeStyles.md.icon,
+      label: formControlSizeStyles.md.label,
       buttonSize: "sm",
       calendarSize: "md",
       timePickerSize: "md",
@@ -16002,9 +16057,9 @@ var DateTimePicker = ({
       gap: "gap-3"
     },
     lg: {
-      trigger: "h-12 px-4 py-3 text-base",
-      icon: "h-5 w-5",
-      label: "text-base",
+      trigger: formControlSizeStyles.lg.control,
+      icon: formControlSizeStyles.lg.icon,
+      label: formControlSizeStyles.lg.label,
       buttonSize: "md",
       calendarSize: "lg",
       timePickerSize: "lg",
@@ -16154,6 +16209,7 @@ var DateTimePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "flex w-full items-center justify-between border border-input bg-background",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -16162,7 +16218,7 @@ var DateTimePicker = ({
               effectiveError && "border-destructive/60 bg-destructive/5"
             ),
             children: [
-              /* @__PURE__ */ jsx43("span", { className: "min-w-0 flex-1 truncate text-left", children: displayValue || placeholder || "Select date & time" }),
+              /* @__PURE__ */ jsx43("span", { className: cn(formControlValueClass, "text-left"), children: displayValue || placeholder || "Select date & time" }),
               /* @__PURE__ */ jsxs30("div", { className: "flex shrink-0 items-center gap-2 text-muted-foreground", children: [
                 value && /* @__PURE__ */ jsx43(
                   "span",
@@ -19158,7 +19214,7 @@ import * as React46 from "react";
 import { useId as useId10 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { ChevronDown as ChevronDown4, Search as Search6, Check as Check6, SearchX as SearchX2, Loader2 as Loader23, X as X14, Sparkles as Sparkles3 } from "lucide-react";
-import { Fragment as Fragment16, jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
 var comboboxScrollClassName2 = [
   "scrollbar-thin",
   "[scrollbar-width:thin]",
@@ -19360,25 +19416,25 @@ var MultiCombobox = ({
   }, [maxInitialOptions, normalizedOptions.length, searchMode, virtualized]);
   const sizeStyles8 = {
     sm: {
-      trigger: "h-8 px-3 py-1.5 text-sm md:h-7 md:text-xs",
-      icon: "h-4 w-4",
+      trigger: formControlSizeStyles.sm.control,
+      icon: formControlSizeStyles.sm.icon,
       search: "px-8 py-1.5 text-xs",
       item: "text-xs px-3 py-1.5",
-      tag: "px-2 py-0.5 text-[10px]"
+      tag: formControlSizeStyles.sm.tag
     },
     md: {
-      trigger: "h-10 px-4 py-2 text-sm",
-      icon: "h-4 w-4",
+      trigger: formControlSizeStyles.md.control,
+      icon: formControlSizeStyles.md.icon,
       search: "px-10 py-2 text-sm",
       item: "text-sm px-3 py-2",
-      tag: "px-2 py-1 text-xs"
+      tag: formControlSizeStyles.md.tag
     },
     lg: {
-      trigger: "h-12 px-5 py-3 text-base",
-      icon: "h-5 w-5",
+      trigger: formControlSizeStyles.lg.control,
+      icon: formControlSizeStyles.lg.icon,
       search: "px-10 py-3 text-base",
       item: "text-base px-3 py-3",
-      tag: "px-2.5 py-1 text-sm"
+      tag: formControlSizeStyles.lg.tag
     }
   };
   const variantStyles6 = {
@@ -19389,7 +19445,7 @@ var MultiCombobox = ({
   const autoId = useId10();
   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 labelSize = formControlSizeStyles[size].label;
   const listboxId = `${resolvedId}-listbox`;
   const renderOptionItem = (item, index, virtualItem) => {
     const isSelected = value.includes(item.value);
@@ -19613,6 +19669,7 @@ var MultiCombobox = ({
       "aria-invalid": !!effectiveError,
       className: cn(
         "group flex w-full items-center gap-2 transition-all duration-200",
+        formControlFixedClass,
         getBorderRadiusClass(resolvedBorderMode),
         sizeStyles8[size].trigger,
         variantStyles6[variant],
@@ -19622,22 +19679,22 @@ var MultiCombobox = ({
         !!effectiveError && "border-destructive focus-visible:ring-destructive/30"
       ),
       children: [
-        /* @__PURE__ */ jsx50("div", { className: cn("flex items-center gap-1.5 flex-1 overflow-hidden", size === "sm" ? "min-h-4" : size === "lg" ? "min-h-8" : "min-h-6"), children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs37(Fragment16, { children: [
+        /* @__PURE__ */ jsx50("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs37(Fragment15, { children: [
           visibleTags.map((option) => {
             if (renderTag) {
-              return /* @__PURE__ */ jsx50(React46.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
+              return /* @__PURE__ */ jsx50("span", { className: "inline-flex max-h-full min-w-0 shrink overflow-hidden", children: renderTag(option, () => handleRemove(option.value)) }, option.value);
             }
             return /* @__PURE__ */ jsxs37(
               "span",
               {
                 className: cn(
-                  "inline-flex items-center gap-1.5 bg-primary/10 text-primary rounded-full transition-all duration-200 min-w-0",
+                  "inline-flex min-w-0 shrink-0 items-center gap-1.5 overflow-hidden rounded-full bg-primary/10 text-primary transition-all duration-200",
                   "hover:bg-primary/20",
                   sizeStyles8[size].tag
                 ),
                 children: [
                   showSelectedIcons && option.icon && /* @__PURE__ */ jsx50("span", { className: "shrink-0 w-3.5 h-3.5 flex items-center justify-center", children: option.icon }),
-                  /* @__PURE__ */ jsx50("span", { className: "truncate max-w-24", children: displayFormat(option) }),
+                  /* @__PURE__ */ jsx50("span", { className: "min-w-0 truncate", children: displayFormat(option) }),
                   /* @__PURE__ */ jsx50(
                     "span",
                     {
@@ -19666,7 +19723,7 @@ var MultiCombobox = ({
             );
           }),
           hiddenCount > 0 && /* @__PURE__ */ jsx50("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg shrink-0", sizeStyles8[size].tag), children: gi18n.moreCount ? gi18n.moreCount(hiddenCount) : `+${hiddenCount} more` })
-        ] }) : /* @__PURE__ */ jsx50("span", { className: "truncate text-sm font-medium", children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ jsx50("span", { className: "text-muted-foreground", children: placeholder }) }),
+        ] }) : /* @__PURE__ */ jsx50("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ jsx50("span", { className: cn(formControlValueClass, "text-muted-foreground"), children: placeholder }) }),
         /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-1.5 shrink-0", children: [
           showClear && value.length > 0 && /* @__PURE__ */ jsx50(
             "div",
@@ -20068,7 +20125,7 @@ RadioGroupItem.displayName = "RadioGroupItem";
 
 // src/components/Slider.tsx
 import * as React48 from "react";
-import { Fragment as Fragment17, jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
 var SIZE_STYLES = {
   sm: {
     track: "h-1",
@@ -20326,7 +20383,7 @@ var Slider = React48.forwardRef(
                 tooltipClassName
               }
             ),
-            isRange && /* @__PURE__ */ jsxs39(Fragment17, { children: [
+            isRange && /* @__PURE__ */ jsxs39(Fragment16, { children: [
               /* @__PURE__ */ jsx52(
                 SliderTooltip,
                 {
@@ -20422,7 +20479,7 @@ var Slider = React48.forwardRef(
               }
               const minZ = activeThumb === "min" ? "z-20" : "z-10";
               const maxZ = activeThumb === "max" ? "z-20" : "z-10";
-              return /* @__PURE__ */ jsxs39(Fragment17, { children: [
+              return /* @__PURE__ */ jsxs39(Fragment16, { children: [
                 /* @__PURE__ */ jsx52(
                   "div",
                   {
@@ -20485,7 +20542,7 @@ Slider.displayName = "Slider";
 // src/components/OverlayControls.tsx
 import { Dot as Dot2, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React49 from "react";
-import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
 function resolveKeyboardEventElement(target) {
   if (target instanceof Element) return target;
   if (target instanceof Node) return target.parentElement;
@@ -20730,7 +20787,7 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ jsxs40(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment17, { children: [
     keyboardFeedback && /* @__PURE__ */ jsx53(
       "div",
       {
@@ -21640,29 +21697,29 @@ function CategoryTreeSelect(props) {
   const selectedCount = valueArray.length;
   const triggerSizeStyles = {
     sm: {
-      button: "h-8 px-3 py-1.5 text-sm md:h-7 md:text-xs",
+      button: formControlSizeStyles.sm.control,
       iconWrap: "p-1",
-      icon: "w-3.5 h-3.5 md:w-3 md:h-3",
-      text: "text-xs md:text-[11px]",
-      badge: "px-1.5 py-0.5 text-[10px]",
-      actionIcon: "w-3.5 h-3.5",
+      icon: formControlSizeStyles.sm.icon,
+      text: formControlSizeStyles.sm.label,
+      badge: formControlSizeStyles.sm.tag,
+      actionIcon: formControlSizeStyles.sm.icon,
       clearIcon: "h-3 w-3"
     },
     md: {
-      button: "h-10 px-3 py-2.5 text-sm",
+      button: formControlSizeStyles.md.control,
       iconWrap: "p-1.5",
       icon: "w-4 h-4",
-      text: "text-sm",
-      badge: "px-2 py-0.5 text-xs",
+      text: formControlSizeStyles.md.label,
+      badge: formControlSizeStyles.md.tag,
       actionIcon: "w-4 h-4",
       clearIcon: "h-3.5 w-3.5"
     },
     lg: {
-      button: "h-12 px-4 py-3 text-base",
+      button: formControlSizeStyles.lg.control,
       iconWrap: "p-1.5",
       icon: "w-5 h-5",
-      text: "text-base",
-      badge: "px-2.5 py-1 text-sm",
+      text: formControlSizeStyles.lg.label,
+      badge: formControlSizeStyles.lg.tag,
       actionIcon: "w-5 h-5",
       clearIcon: "h-4 w-4"
     }
@@ -21784,6 +21841,7 @@ function CategoryTreeSelect(props) {
             },
             className: cn(
               "group flex w-full items-center justify-between transition-all duration-200",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode ?? "full"),
               "backdrop-blur-sm",
               triggerSizeStyles[size].button,
@@ -21794,7 +21852,7 @@ function CategoryTreeSelect(props) {
               effectiveError && "border-destructive focus-visible:ring-destructive/30"
             ),
             children: [
-              /* @__PURE__ */ jsxs41("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 text-left", children: [
+              /* @__PURE__ */ jsxs41("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden text-left", children: [
                 /* @__PURE__ */ jsx54(
                   "div",
                   {
@@ -21810,7 +21868,8 @@ function CategoryTreeSelect(props) {
                   "span",
                   {
                     className: cn(
-                      "min-w-0 flex-1 truncate font-medium transition-colors duration-200",
+                      formControlValueClass,
+                      "font-medium transition-colors duration-200",
                       triggerSizeStyles[size].text,
                       selectedCount === 0 ? "text-muted-foreground" : "text-foreground"
                     ),
@@ -21834,7 +21893,7 @@ function CategoryTreeSelect(props) {
                     children: /* @__PURE__ */ jsx54(X15, { className: triggerSizeStyles[size].clearIcon })
                   }
                 ),
-                selectedCount > 0 && !singleSelect && /* @__PURE__ */ jsx54("span", { className: cn("rounded-full bg-primary/15 font-bold text-primary", triggerSizeStyles[size].badge), children: selectedCount }),
+                selectedCount > 0 && !singleSelect && /* @__PURE__ */ jsx54("span", { className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/15 font-bold text-primary", triggerSizeStyles[size].badge), children: selectedCount }),
                 /* @__PURE__ */ jsx54("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx54(ChevronDown5, { className: triggerSizeStyles[size].actionIcon }) })
               ] })
             ]
@@ -22117,7 +22176,7 @@ import {
   Upload as Upload2
 } from "lucide-react";
 import { useCallback as useCallback20, useMemo as useMemo22, useRef as useRef23, useState as useState35 } from "react";
-import { Fragment as Fragment19, jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
 var formatFileSize = (bytes) => {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;
@@ -22548,7 +22607,7 @@ function FileUpload({
             ] }),
             /* @__PURE__ */ jsx56("p", { className: cn("text-muted-foreground", size === "lg" ? "text-sm" : "text-xs"), children: supportedFormatsText || t("supportedFormats") || `Max ${maxSize}MB per file \u2022 Up to ${maxFiles} files` })
           ] }),
-          variant === "compact" && /* @__PURE__ */ jsxs43(Fragment19, { children: [
+          variant === "compact" && /* @__PURE__ */ jsxs43(Fragment18, { children: [
             /* @__PURE__ */ jsx56("div", { className: cn("shrink-0 rounded-lg flex items-center justify-center", "bg-primary/10", currentSize.iconSize), children: /* @__PURE__ */ jsx56(Upload2, { className: cn("text-primary", size === "sm" ? "w-4 h-4" : "w-5 h-5") }) }),
             /* @__PURE__ */ jsxs43("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx56("p", { className: cn("font-medium truncate", currentSize.text), children: dragDropText || t("dragDropText") || "Drop files here or" }),
@@ -22615,7 +22674,7 @@ function FileUpload({
 // src/components/Carousel.tsx
 import * as React51 from "react";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight9 } from "lucide-react";
-import { Fragment as Fragment20, jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -23045,7 +23104,7 @@ function Carousel({
             })
           }
         ),
-        shouldShowArrows && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsxs44(Fragment20, { children: [
+        shouldShowArrows && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsxs44(Fragment19, { children: [
           /* @__PURE__ */ jsx57(
             Button_default,
             {
@@ -23416,7 +23475,7 @@ function FallingIcons({
 // src/components/List.tsx
 import * as React53 from "react";
 import { ChevronRight as ChevronRight10 } from "lucide-react";
-import { Fragment as Fragment21, jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { label: "text-[13px]", desc: "text-xs", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -23585,7 +23644,7 @@ var ListItem = React53.forwardRef(
         }
       }
     } : {};
-    const inner = /* @__PURE__ */ jsxs46(Fragment21, { children: [
+    const inner = /* @__PURE__ */ jsxs46(Fragment20, { children: [
       /* @__PURE__ */ jsxs46("div", { className: cn("flex items-center gap-3 group/item relative max-md:gap-2.5", contentClassName), ...headerProps, children: [
         avatar && /* @__PURE__ */ jsx59("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx59("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
         Left && !avatar && /* @__PURE__ */ jsx59("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx59(Left, { className: cn(sz.icon) }) }),
@@ -23630,7 +23689,7 @@ var List_default = List;
 // src/components/Watermark.tsx
 import * as React54 from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment22, jsx as jsx60, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx60, jsxs as jsxs47 } from "react/jsx-runtime";
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
   draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
@@ -23909,7 +23968,7 @@ var Watermark = ({
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsxs47(Fragment22, { children: [
+    return /* @__PURE__ */ jsxs47(Fragment21, { children: [
       children,
       typeof window !== "undefined" ? createPortal5(overlay, document.body) : null
     ] });
@@ -24478,9 +24537,9 @@ function ColorPicker({
   const alphaPct = Math.round(rgba.a * 100);
   const harmony = showHarmony ? getColorHarmony(rgba) : null;
   const sizeClasses2 = {
-    sm: "h-8 text-xs",
-    md: "h-10 text-sm",
-    lg: "h-12 text-base"
+    sm: formControlSizeStyles.sm.control,
+    md: formControlSizeStyles.md.control,
+    lg: formControlSizeStyles.lg.control
   };
   const swatchSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "md";
   const trigger = /* @__PURE__ */ jsxs49(
@@ -24489,16 +24548,17 @@ function ColorPicker({
       type: "button",
       disabled,
       className: cn(
-        "w-full px-3 border border-input bg-background flex items-center justify-between",
+        "w-full border border-input bg-background flex items-center justify-between",
         getBorderRadiusClass(resolvedBorderMode),
         sizeClasses2[size],
+        formControlFixedClass,
         "hover:border-accent-foreground/30 transition-colors",
         disabled && "opacity-50 cursor-not-allowed",
         triggerClassName
       ),
       "aria-label": gi18n.openColorPicker ?? "Open color picker",
       children: [
-        /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs49("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [
           /* @__PURE__ */ jsx62(
             "span",
             {
@@ -24506,9 +24566,9 @@ function ColorPicker({
               style: { backgroundColor: withAlpha ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : hexForInput }
             }
           ),
-          /* @__PURE__ */ jsx62("span", { className: "font-mono text-muted-foreground", children: text })
+          /* @__PURE__ */ jsx62("span", { className: cn(formControlValueClass, "font-mono text-muted-foreground"), children: text })
         ] }),
-        /* @__PURE__ */ jsx62(Pipette, { className: cn(size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-5 h-5" : "w-4 h-4", "text-muted-foreground") })
+        /* @__PURE__ */ jsx62(Pipette, { className: cn(formControlSizeStyles[size].icon, "shrink-0 text-muted-foreground") })
       ]
     }
   );
@@ -25091,7 +25151,7 @@ var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
 import React58, { useId as useId13 } from "react";
-import { Fragment as Fragment23, jsx as jsx64, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx64, jsxs as jsxs51 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -25248,7 +25308,7 @@ var GridItem = React58.forwardRef(
       st.opacity = 0;
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
-    return /* @__PURE__ */ jsxs51(Fragment23, { children: [
+    return /* @__PURE__ */ jsxs51(Fragment22, { children: [
       animationDelay != null && /* @__PURE__ */ jsx64(
         "style",
         {
@@ -25278,13 +25338,13 @@ var Grid = Object.assign(GridRoot, { Item: GridItem });
 var Grid_default = Grid;
 
 // src/components/ClientOnly.tsx
-import { Fragment as Fragment24, jsx as jsx65 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx65 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const hasMounted = useHydrated();
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx65(Fragment24, { children: fallback });
+    return /* @__PURE__ */ jsx65(Fragment23, { children: fallback });
   }
-  return /* @__PURE__ */ jsx65(Fragment24, { children });
+  return /* @__PURE__ */ jsx65(Fragment23, { children });
 }
 
 // src/components/Loading.tsx
@@ -25466,7 +25526,7 @@ import React69 from "react";
 
 // src/components/DataTable/components/DataTableBody.tsx
 import React60 from "react";
-import { Fragment as Fragment25, jsx as jsx68, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx68, jsxs as jsxs54 } from "react/jsx-runtime";
 function DataTableOverflowText({
   text,
   align
@@ -25561,7 +25621,7 @@ function DataTableBodyRows({
       t("loading"),
       "\u2026"
     ] })
-  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ jsx68(TableRow, { children: /* @__PURE__ */ jsx68(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ jsxs54(Fragment25, { children: [
+  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ jsx68(TableRow, { children: /* @__PURE__ */ jsx68(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ jsxs54(Fragment24, { children: [
     virtualPaddingTop > 0 && /* @__PURE__ */ jsx68(TableRow, { "aria-hidden": "true", className: "border-0 hover:bg-transparent hover:shadow-none", children: /* @__PURE__ */ jsx68(TableCell, { colSpan: leafColumns.length, className: "p-0", style: { height: virtualPaddingTop } }) }),
     rowsToRender.map(({ row, idx, virtualRow }) => {
       const isStripedRow = striped && idx % 2 === 0;
@@ -25690,7 +25750,7 @@ function groupColumnsByColorTag(leafCols, colorGroups) {
 }
 
 // src/components/DataTable/components/DataTableHeader.tsx
-import { Fragment as Fragment26, jsx as jsx69, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx69, jsxs as jsxs55 } from "react/jsx-runtime";
 function getColumnLabel(title) {
   if (typeof title === "string" || typeof title === "number") {
     return String(title).replace(/\s+/g, " ").trim();
@@ -25910,10 +25970,10 @@ function DataTableHeader({
             !isRightAlign && !isCenterAlign && "justify-start",
             useEndIcon && "w-full"
           ),
-          children: isRightAlign ? /* @__PURE__ */ jsxs55(Fragment26, { children: [
+          children: isRightAlign ? /* @__PURE__ */ jsxs55(Fragment25, { children: [
             filterContent,
             titleContent
-          ] }) : /* @__PURE__ */ jsxs55(Fragment26, { children: [
+          ] }) : /* @__PURE__ */ jsxs55(Fragment25, { children: [
             titleContent,
             filterContent
           ] })
@@ -25934,7 +25994,7 @@ function DataTableHeader({
       t
     ]
   );
-  return /* @__PURE__ */ jsx69(Fragment26, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx69(TableRow, { children: row.map((headerCell, cellIndex) => {
+  return /* @__PURE__ */ jsx69(Fragment25, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx69(TableRow, { children: row.map((headerCell, cellIndex) => {
     const { column: col, colSpan, rowSpan, isLeaf } = headerCell;
     const prevCell = cellIndex > 0 ? row[cellIndex - 1] : null;
     const prevCol = prevCell?.column;
@@ -27558,7 +27618,7 @@ function AccessDenied({
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
 import { useRef as useRef27, useState as useState43 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { Fragment as Fragment27, jsx as jsx76, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx76, jsxs as jsxs62 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -27608,7 +27668,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx76(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs62(Fragment27, { children: [
+    isOpen && /* @__PURE__ */ jsxs62(Fragment26, { children: [
       typeof window !== "undefined" && createPortal6(/* @__PURE__ */ jsx76("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal6(
         /* @__PURE__ */ jsx76(
@@ -27660,7 +27720,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef28, useState as useState44 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment28, jsx as jsx77, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx77, jsxs as jsxs63 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -27705,7 +27765,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx77(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs63(Fragment28, { children: [
+    isOpen && /* @__PURE__ */ jsxs63(Fragment27, { children: [
       typeof window !== "undefined" && createPortal7(/* @__PURE__ */ jsx77("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal7(
         /* @__PURE__ */ jsx77(
@@ -31896,7 +31956,7 @@ var table_align_default = UEditorTable;
 import React80, { useState as useState48 } from "react";
 import { NodeViewWrapper as NodeViewWrapper7, NodeViewContent as NodeViewContent2 } from "@tiptap/react";
 import { Check as Check11, Copy as Copy2, ChevronDown as ChevronDown7 } from "lucide-react";
-import { Fragment as Fragment29, jsx as jsx89, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx89, jsxs as jsxs72 } from "react/jsx-runtime";
 var LANGUAGES = [
   { label: "Plain Text", value: "text" },
   { label: "JavaScript", value: "javascript" },
@@ -31964,7 +32024,7 @@ var CodeBlockView = ({
                 ]
               }
             ),
-            isDropdownOpen && /* @__PURE__ */ jsxs72(Fragment29, { children: [
+            isDropdownOpen && /* @__PURE__ */ jsxs72(Fragment28, { children: [
               /* @__PURE__ */ jsx89(
                 "div",
                 {
@@ -33492,7 +33552,7 @@ function getDefaultLetterSpacings() {
 }
 
 // src/components/UEditor/toolbar.tsx
-import { Fragment as Fragment30, jsx as jsx93, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx93, jsxs as jsxs75 } from "react/jsx-runtime";
 function getTableAnchorPos(editor) {
   const tableInfo = findTableNodeInfoFromState(editor.state);
   if (tableInfo) return editor.state.selection.from;
@@ -33744,7 +33804,7 @@ var EditorToolbar = ({
               },
               onCancel: () => setShowLinkInput(false)
             }
-          ) : /* @__PURE__ */ jsxs75(Fragment30, { children: [
+          ) : /* @__PURE__ */ jsxs75(Fragment29, { children: [
             /* @__PURE__ */ jsx93(
               DropdownMenuItem,
               {
@@ -33886,7 +33946,7 @@ var EditorToolbar = ({
             ]
           }
         ),
-        isFull && /* @__PURE__ */ jsxs75(Fragment30, { children: [
+        isFull && /* @__PURE__ */ jsxs75(Fragment29, { children: [
           /* @__PURE__ */ jsxs75(
             DropdownMenu,
             {
@@ -33958,7 +34018,7 @@ var EditorToolbar = ({
         ),
         /* @__PURE__ */ jsx93(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ jsx93(FigmaStrikeIcon, { className: "h-4 w-4" }) }),
         (isMediumFull || isFull) && /* @__PURE__ */ jsx93(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ jsx93(FigmaCodeIcon, { className: "h-4 w-4" }) }),
-        isFull && /* @__PURE__ */ jsxs75(Fragment30, { children: [
+        isFull && /* @__PURE__ */ jsxs75(Fragment29, { children: [
           /* @__PURE__ */ jsx93(
             ToolbarButton,
             {
@@ -33993,7 +34053,7 @@ var EditorToolbar = ({
                 },
                 onCancel: () => setShowLinkInput(false)
               }
-            ) : /* @__PURE__ */ jsxs75(Fragment30, { children: [
+            ) : /* @__PURE__ */ jsxs75(Fragment29, { children: [
               /* @__PURE__ */ jsx93(
                 DropdownMenuItem,
                 {
@@ -34068,7 +34128,7 @@ var EditorToolbar = ({
             )
           }
         ),
-        (isMediumFull || isFull) && /* @__PURE__ */ jsxs75(Fragment30, { children: [
+        (isMediumFull || isFull) && /* @__PURE__ */ jsxs75(Fragment29, { children: [
           /* @__PURE__ */ jsx93(ToolbarDivider, {}),
           /* @__PURE__ */ jsx93(
             DropdownMenu,
@@ -34087,7 +34147,7 @@ var EditorToolbar = ({
             }
           )
         ] }),
-        (isMediumFull || isFull) && /* @__PURE__ */ jsxs75(Fragment30, { children: [
+        (isMediumFull || isFull) && /* @__PURE__ */ jsxs75(Fragment29, { children: [
           /* @__PURE__ */ jsx93(ToolbarDivider, {}),
           /* @__PURE__ */ jsxs75(
             DropdownMenu,
@@ -34134,7 +34194,7 @@ var EditorToolbar = ({
                     active: editor.isActive({ textAlign: "justify" })
                   }
                 ),
-                hasTableContext && /* @__PURE__ */ jsxs75(Fragment30, { children: [
+                hasTableContext && /* @__PURE__ */ jsxs75(Fragment29, { children: [
                   /* @__PURE__ */ jsx93("div", { className: "my-1 border-t" }),
                   /* @__PURE__ */ jsx93(
                     DropdownMenuItem,
@@ -34319,7 +34379,7 @@ var EditorToolbar = ({
                 },
                 onCancel: () => setShowImageInput(false)
               }
-            ) : /* @__PURE__ */ jsxs75(Fragment30, { children: [
+            ) : /* @__PURE__ */ jsxs75(Fragment29, { children: [
               /* @__PURE__ */ jsx93(DropdownMenuItem, { icon: LinkIcon, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true), closeOnSelect: false }),
               /* @__PURE__ */ jsx93(
                 DropdownMenuItem,
@@ -34577,7 +34637,7 @@ var EditorToolbar = ({
         /* @__PURE__ */ jsx93(ToolbarDivider, {}),
         /* @__PURE__ */ jsx93(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ jsx93(FigmaUndoIcon, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsx93(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ jsx93(FigmaRedoIcon, { className: "h-4 w-4" }) }),
-        hasTableContext && /* @__PURE__ */ jsxs75(Fragment30, { children: [
+        hasTableContext && /* @__PURE__ */ jsxs75(Fragment29, { children: [
           /* @__PURE__ */ jsx93(ToolbarDivider, {}),
           /* @__PURE__ */ jsx93(
             ToolbarButton,
@@ -35742,7 +35802,7 @@ function recalculateAllTableFormulas(editor) {
 }
 
 // src/components/UEditor/menus.tsx
-import { Fragment as Fragment31, jsx as jsx94, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx94, jsxs as jsxs76 } from "react/jsx-runtime";
 var FloatingSlashCommandMenu = ({ editor, onClose }) => {
   const t = useSmartTranslations("UEditor");
   const messages = useMemo25(() => buildSlashCommandMessages(t), [t]);
@@ -36550,7 +36610,7 @@ var BubbleMenuContent = ({
     ),
     /* @__PURE__ */ jsx94(ToolbarButton, { onClick: () => setActiveColorPalette("text"), title: t("colors.textColor"), children: /* @__PURE__ */ jsx94(TextColorIcon, { color: currentTextColor }) }),
     /* @__PURE__ */ jsx94(ToolbarButton, { onClick: () => setActiveColorPalette("highlight"), active: editor.isActive("highlight"), title: t("colors.highlight"), children: /* @__PURE__ */ jsx94(HighlightColorIcon, { color: currentHighlightColor }) }),
-    isInTable2 && /* @__PURE__ */ jsxs76(Fragment31, { children: [
+    isInTable2 && /* @__PURE__ */ jsxs76(Fragment30, { children: [
       /* @__PURE__ */ jsx94(
         ToolbarButton,
         {
@@ -37485,7 +37545,7 @@ function findDiffEnd(a, b, posA, posB) {
     posB -= size;
   }
 }
-var Fragment32 = class _Fragment {
+var Fragment31 = class _Fragment {
   /**
   @internal
   */
@@ -37777,7 +37837,7 @@ var Fragment32 = class _Fragment {
     throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
   }
 };
-Fragment32.empty = new Fragment32([], 0);
+Fragment31.empty = new Fragment31([], 0);
 var found = { index: 0, offset: 0 };
 function retIndex(index, offset) {
   found.index = index;
@@ -38002,7 +38062,7 @@ var Slice = class _Slice {
     let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
     if (typeof openStart != "number" || typeof openEnd != "number")
       throw new RangeError("Invalid input for Slice.fromJSON");
-    return new _Slice(Fragment32.fromJSON(schema, json.content), openStart, openEnd);
+    return new _Slice(Fragment31.fromJSON(schema, json.content), openStart, openEnd);
   }
   /**
   Create a slice from a fragment by taking the maximum possible
@@ -38017,7 +38077,7 @@ var Slice = class _Slice {
     return new _Slice(fragment, openStart, openEnd);
   }
 };
-Slice.empty = new Slice(Fragment32.empty, 0, 0);
+Slice.empty = new Slice(Fragment31.empty, 0, 0);
 function removeRange(content, from, to) {
   let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
   let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -38115,7 +38175,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
       addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment32(content);
+  return new Fragment31(content);
 }
 function replaceTwoWay($from, $to, depth) {
   let content = [];
@@ -38125,13 +38185,13 @@ function replaceTwoWay($from, $to, depth) {
     addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment32(content);
+  return new Fragment31(content);
 }
 function prepareSliceForReplace(slice, $along) {
   let extra = $along.depth - slice.openStart, parent = $along.node(extra);
   let node = parent.copy(slice.content);
   for (let i = extra - 1; i >= 0; i--)
-    node = $along.node(i).copy(Fragment32.from(node));
+    node = $along.node(i).copy(Fragment31.from(node));
   return {
     start: node.resolveNoCache(slice.openStart + extra),
     end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -38470,7 +38530,7 @@ var Node7 = class _Node {
     this.type = type;
     this.attrs = attrs;
     this.marks = marks;
-    this.content = content || Fragment32.empty;
+    this.content = content || Fragment31.empty;
   }
   /**
   The array of this node's child nodes.
@@ -38775,7 +38835,7 @@ var Node7 = class _Node {
   can optionally pass `start` and `end` indices into the
   replacement fragment.
   */
-  canReplace(from, to, replacement = Fragment32.empty, start = 0, end = replacement.childCount) {
+  canReplace(from, to, replacement = Fragment31.empty, start = 0, end = replacement.childCount) {
     let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
     let two = one && one.matchFragment(this.content, to);
     if (!two || !two.validEnd)
@@ -38857,7 +38917,7 @@ var Node7 = class _Node {
         throw new RangeError("Invalid text node in JSON");
       return schema.text(json.text, marks);
     }
-    let content = Fragment32.fromJSON(schema, json.content);
+    let content = Fragment31.fromJSON(schema, json.content);
     let node = schema.nodeType(json.type).create(json.attrs, content, marks);
     node.type.checkAttrs(node.attrs);
     return node;
@@ -38953,7 +39013,7 @@ var ContentMatch = class _ContentMatch {
     function search(match, types) {
       let finished = match.matchFragment(after, startIndex);
       if (finished && (!toEnd || finished.validEnd))
-        return Fragment32.from(types.map((tp) => tp.createAndFill()));
+        return Fragment31.from(types.map((tp) => tp.createAndFill()));
       for (let i = 0; i < match.next.length; i++) {
         let { type, next } = match.next[i];
         if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -39521,7 +39581,7 @@ function mapFragment(fragment, f, parent) {
       child = f(child, parent, i);
     mapped.push(child);
   }
-  return Fragment32.fromArray(mapped);
+  return Fragment31.fromArray(mapped);
 }
 var AddMarkStep = class _AddMarkStep extends Step {
   /**
@@ -39638,7 +39698,7 @@ var AddNodeMarkStep = class _AddNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment32.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment31.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc) {
     let node = doc.nodeAt(this.pos);
@@ -39684,7 +39744,7 @@ var RemoveNodeMarkStep = class _RemoveNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment32.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment31.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc) {
     let node = doc.nodeAt(this.pos);
@@ -39885,7 +39945,7 @@ var AttrStep = class _AttrStep extends Step {
       attrs[name] = node.attrs[name];
     attrs[this.attr] = this.value;
     let updated = node.type.create(attrs, null, node.marks);
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment32.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment31.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   getMap() {
     return StepMap.empty;
@@ -40269,7 +40329,7 @@ var NodeSelection2 = class _NodeSelection extends Selection {
     return new _NodeSelection($pos);
   }
   content() {
-    return new Slice(Fragment32.from(this.node), 0, 0);
+    return new Slice(Fragment31.from(this.node), 0, 0);
   }
   eq(other) {
     return other instanceof _NodeSelection && other.anchor == this.anchor;
@@ -40997,10 +41057,10 @@ var CellSelection = class CellSelection2 extends Selection {
         }
         rowContent.push(cell);
       }
-      rows.push(table.child(row).copy(Fragment32.from(rowContent)));
+      rows.push(table.child(row).copy(Fragment31.from(rowContent)));
     }
     const fragment = this.isColSelection() && this.isRowSelection() ? table : rows;
-    return new Slice(Fragment32.from(fragment), 1, 1);
+    return new Slice(Fragment31.from(fragment), 1, 1);
   }
   replace(tr, content = Slice.empty) {
     const mapFrom = tr.steps.length, ranges = this.ranges;
@@ -41012,7 +41072,7 @@ var CellSelection = class CellSelection2 extends Selection {
     if (sel) tr.setSelection(sel);
   }
   replaceWith(tr, node) {
-    this.replace(tr, new Slice(Fragment32.from(node), 0, 0));
+    this.replace(tr, new Slice(Fragment31.from(node), 0, 0));
   }
   forEachCell(f) {
     const table = this.$anchorCell.node(-1);
@@ -41913,7 +41973,7 @@ function buildTableHoverState({
 }
 
 // src/components/UEditor/table-drag-preview.tsx
-import { Fragment as Fragment33, jsx as jsx95, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx95, jsxs as jsxs78 } from "react/jsx-runtime";
 function TableDragPreview({
   columnDragLabel,
   dragPreview,
@@ -41924,8 +41984,8 @@ function TableDragPreview({
   const expandPreviewWidth = dragPreview.kind === "add-column" ? layout.tableWidth + dragPreview.previewCols * layout.avgColumnWidth : layout.tableWidth;
   const expandPreviewHeight = dragPreview.kind === "add-row" ? layout.tableHeight + dragPreview.previewRows * layout.avgRowHeight : layout.tableHeight;
   const dragStatusText = dragPreview.kind === "row" ? `${rowDragLabel} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview.kind === "column" ? `${columnDragLabel} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview.kind === "add-row" ? `+${dragPreview.previewRows}R` : `+${dragPreview.previewCols}C`;
-  return /* @__PURE__ */ jsxs78(Fragment33, { children: [
-    dragPreview.kind === "row" && /* @__PURE__ */ jsxs78(Fragment33, { children: [
+  return /* @__PURE__ */ jsxs78(Fragment32, { children: [
+    dragPreview.kind === "row" && /* @__PURE__ */ jsxs78(Fragment32, { children: [
       /* @__PURE__ */ jsx95(
         "div",
         {
@@ -41953,7 +42013,7 @@ function TableDragPreview({
         }
       )
     ] }),
-    dragPreview.kind === "column" && /* @__PURE__ */ jsxs78(Fragment33, { children: [
+    dragPreview.kind === "column" && /* @__PURE__ */ jsxs78(Fragment32, { children: [
       /* @__PURE__ */ jsx95(
         "div",
         {
@@ -42010,7 +42070,7 @@ function TableDragPreview({
 }
 
 // src/components/UEditor/table-add-rails.tsx
-import { Fragment as Fragment34, jsx as jsx96, jsxs as jsxs79 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx96, jsxs as jsxs79 } from "react/jsx-runtime";
 var ADD_COLUMN_RAIL_GAP = 4;
 var ADD_ROW_RAIL_GAP = 4;
 function TableAddRails({
@@ -42031,7 +42091,7 @@ function TableAddRails({
   const rowRailLeft = visibleBounds.left;
   const showColumnRail = controlsVisible || addColumnVisible;
   const showRowRail = controlsVisible || addRowVisible;
-  return /* @__PURE__ */ jsxs79(Fragment34, { children: [
+  return /* @__PURE__ */ jsxs79(Fragment33, { children: [
     /* @__PURE__ */ jsx96(
       Tooltip,
       {
@@ -42175,7 +42235,7 @@ function TableControlMenu({
 
 // src/components/UEditor/table-axis-handles.tsx
 import { GripHorizontal, GripVertical as GripVertical3 } from "lucide-react";
-import { Fragment as Fragment35, jsx as jsx98 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx98 } from "react/jsx-runtime";
 var IDLE_HANDLE_SCALE = "0.78";
 function TableRowHandles({
   activeRowIndex,
@@ -42189,7 +42249,7 @@ function TableRowHandles({
   rowHandleLeft,
   rowHandles
 }) {
-  return /* @__PURE__ */ jsx98(Fragment35, { children: rowHandles.map((rowHandle) => {
+  return /* @__PURE__ */ jsx98(Fragment34, { children: rowHandles.map((rowHandle) => {
     const menuKey = `row:${rowHandle.index}`;
     const isActive = rowHandle.index === activeRowIndex;
     const visible = controlsVisible || hoverRowHandleIndex === rowHandle.index || openMenuKey === menuKey;
@@ -42260,7 +42320,7 @@ function TableColumnHandles({
   onStartDrag,
   openMenuKey
 }) {
-  return /* @__PURE__ */ jsx98(Fragment35, { children: columnHandles.map((columnHandle) => {
+  return /* @__PURE__ */ jsx98(Fragment34, { children: columnHandles.map((columnHandle) => {
     const menuKey = `column:${columnHandle.index}`;
     const isActive = columnHandle.index === activeColumnIndex;
     const visible = controlsVisible || hoverColumnHandleIndex === columnHandle.index || openMenuKey === menuKey;
@@ -42321,7 +42381,7 @@ function TableColumnHandles({
 }
 
 // src/components/UEditor/table-controls.tsx
-import { Fragment as Fragment36, jsx as jsx99, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx99, jsxs as jsxs80 } from "react/jsx-runtime";
 var TABLE_MENU_TOP_OFFSET = 10;
 function nearestIndex(centers, position) {
   let bestIndex = 0;
@@ -42768,7 +42828,7 @@ function TableControls({ editor, containerRef }) {
   const menuLeft = Math.max(8, layout.tableLeft);
   const rowHandleLeft = layout.tableLeft - 12;
   const columnHandleTop = layout.tableTop - 12;
-  return /* @__PURE__ */ jsxs80(Fragment36, { children: [
+  return /* @__PURE__ */ jsxs80(Fragment35, { children: [
     /* @__PURE__ */ jsx99(
       TableRowHandles,
       {
@@ -44121,7 +44181,7 @@ function prepareUEditorPreviewHtml(html) {
 }
 
 // src/components/UEditor/menu-bar.tsx
-import { Fragment as Fragment37, jsx as jsx100, jsxs as jsxs81 } from "react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx100, jsxs as jsxs81 } from "react/jsx-runtime";
 function MenuTableInsertGrid({
   insertLabel,
   previewTemplate,
@@ -44642,7 +44702,7 @@ var MenuBar = ({
     {
       type: "custom",
       key: "image",
-      render: () => showImageInput ? /* @__PURE__ */ jsx100(ImageInput, { onSubmit: handleImageUrl, onCancel: () => setShowImageInput(false) }) : /* @__PURE__ */ jsxs81(Fragment37, { children: [
+      render: () => showImageInput ? /* @__PURE__ */ jsx100(ImageInput, { onSubmit: handleImageUrl, onCancel: () => setShowImageInput(false) }) : /* @__PURE__ */ jsxs81(Fragment36, { children: [
         /* @__PURE__ */ jsx100(DropdownMenuItem, { label: t("menubar.image"), icon: ImageIcon2, onClick: () => setShowImageInput(true), closeOnSelect: false }),
         /* @__PURE__ */ jsx100(
           DropdownMenuItem,
@@ -44758,7 +44818,7 @@ var MenuBar = ({
     },
     { label: t("menubar.table"), items: buildTableMenuItems(t, editor, handleInsertTable), open: void 0, onOpenChange: void 0 }
   ];
-  return /* @__PURE__ */ jsxs81(Fragment37, { children: [
+  return /* @__PURE__ */ jsxs81(Fragment36, { children: [
     /* @__PURE__ */ jsx100(
       "input",
       {