@underverse-ui/underverse 1.0.59 → 1.0.61

package/dist/index.js

@@ -3503,11 +3503,11 @@ var ToastProvider = ({ children, position = "top-right", maxToasts = 5 }) => {
   ] });
 };
 var ToastComponent = ({ toast, onRemove }) => {
-  const [isVisible, setIsVisible] = useState7(false);
+  const [isVisible, setIsVisible] = useState7(true);
   const [progress, setProgress] = useState7(100);
   const [paused, setPaused] = useState7(false);
   const total = toast.duration && toast.duration > 0 ? toast.duration : 5e3;
-  const endTsRef = useRef4(Date.now() + total);
+  const endTsRef = useRef4(0);
   const remainingRef = useRef4(total);
   const pausedRef = useRef4(false);
   const handleRemove = useCallback3(() => {
@@ -3515,7 +3515,6 @@ var ToastComponent = ({ toast, onRemove }) => {
     setTimeout(() => onRemove(toast.id), 150);
   }, [onRemove, toast.id]);
   useEffect2(() => {
-    setIsVisible(true);
     if (toast.duration === 0) return;
     remainingRef.current = total;
     endTsRef.current = Date.now() + total;
@@ -3536,29 +3535,25 @@ var ToastComponent = ({ toast, onRemove }) => {
       icon: CheckCircle2,
       containerClassName: "bg-success/5 border-success/30",
       iconClassName: "text-success",
-      iconBgClassName: "bg-success/15",
-      accentBarClassName: "bg-success"
+      iconBgClassName: "bg-success/15"
     },
     error: {
       icon: AlertCircle2,
       containerClassName: "bg-destructive/5 border-destructive/30",
       iconClassName: "text-destructive",
-      iconBgClassName: "bg-destructive/15",
-      accentBarClassName: "bg-destructive"
+      iconBgClassName: "bg-destructive/15"
     },
     warning: {
       icon: AlertTriangle2,
       containerClassName: "bg-warning/5 border-warning/30",
       iconClassName: "text-warning",
-      iconBgClassName: "bg-warning/15",
-      accentBarClassName: "bg-warning"
+      iconBgClassName: "bg-warning/15"
     },
     info: {
       icon: Info,
       containerClassName: "bg-info/5 border-info/30",
       iconClassName: "text-info",
-      iconBgClassName: "bg-info/15",
-      accentBarClassName: "bg-info"
+      iconBgClassName: "bg-info/15"
     }
   };
   const config = typeConfig[toast.type];
@@ -3567,7 +3562,7 @@ var ToastComponent = ({ toast, onRemove }) => {
     "div",
     {
       className: cn(
-        "relative w-80 rounded-r-xl border border-l-0 backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
+        "relative w-80 rounded-xl border 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,
@@ -3588,8 +3583,7 @@ var ToastComponent = ({ toast, onRemove }) => {
         setPaused(false);
       },
       children: [
-        /* @__PURE__ */ jsx16("div", { className: cn("absolute left-0 top-0 bottom-0 w-1", config.accentBarClassName) }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 p-4 pl-5", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 p-4", children: [
           /* @__PURE__ */ jsx16("div", { className: cn("flex items-center justify-center w-8 h-8 rounded-full shrink-0", config.iconBgClassName), children: /* @__PURE__ */ jsx16(Icon, { className: cn("h-4 w-4", config.iconClassName) }) }),
           /* @__PURE__ */ jsxs12("div", { className: "flex-1 space-y-1", children: [
             toast.title && /* @__PURE__ */ jsx16("h4", { className: "font-medium text-sm leading-none", children: toast.title }),
@@ -3641,6 +3635,18 @@ var Toast_default = ToastProvider;
 // src/components/Tooltip.tsx
 import * as React14 from "react";
 import { createPortal as createPortal2 } from "react-dom";
+
+// src/hooks/useHydrated.ts
+import { useSyncExternalStore } from "react";
+var subscribe = () => () => {
+};
+var getSnapshot = () => true;
+var getServerSnapshot = () => false;
+function useHydrated() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/components/Tooltip.tsx
 import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var variantStyles3 = {
   default: "bg-popover text-popover-foreground border-border/50",
@@ -3649,17 +3655,6 @@ 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) {
@@ -3715,19 +3710,24 @@ var Tooltip = ({
   variant = "default"
 }) => {
   const [isOpen, setIsOpen] = React14.useState(false);
-  const [isMounted, setIsMounted] = React14.useState(false);
+  const isMounted = useHydrated();
   const triggerRef = React14.useRef(null);
   const positionerRef = React14.useRef(null);
   const panelRef = React14.useRef(null);
   const timeoutRef = React14.useRef(void 0);
   const lastAppliedRef = React14.useRef(null);
-  React14.useEffect(() => {
-    setIsMounted(true);
-  }, []);
+  const triggerSelector = React14.useId();
   const delayOpen = typeof delay === "object" ? delay.open || 700 : delay;
   const delayClose = typeof delay === "object" ? delay.close || 300 : delay;
   const offset = 8;
   const padding = 8;
+  React14.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    const triggerEl = document.querySelector(`[data-underverse-tooltip-trigger="${triggerSelector}"]`);
+    if (triggerEl) {
+      triggerRef.current = triggerEl;
+    }
+  }, [children, triggerSelector]);
   const updatePosition = React14.useCallback(() => {
     const triggerEl = triggerRef.current;
     const positionerEl = positionerRef.current;
@@ -3827,28 +3827,36 @@ var Tooltip = ({
     return children;
   }
   return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    React14.cloneElement(children, {
-      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);
-      }
-    }),
+    (() => {
+      const TriggerComponent = children.type;
+      const triggerProps = children.props;
+      return /* @__PURE__ */ jsx17(
+        TriggerComponent,
+        {
+          ...triggerProps,
+          "data-underverse-tooltip-trigger": triggerSelector,
+          onMouseEnter: (e) => {
+            triggerRef.current = e.currentTarget;
+            handleMouseEnter();
+            if (typeof triggerProps.onMouseEnter === "function") triggerProps.onMouseEnter(e);
+          },
+          onMouseLeave: (e) => {
+            triggerRef.current = e.currentTarget;
+            handleMouseLeave();
+            if (typeof triggerProps.onMouseLeave === "function") triggerProps.onMouseLeave(e);
+          },
+          onFocus: (e) => {
+            triggerRef.current = e.currentTarget;
+            handleFocus();
+            if (typeof triggerProps.onFocus === "function") triggerProps.onFocus(e);
+          },
+          onBlur: (e) => {
+            handleBlur();
+            if (typeof triggerProps.onBlur === "function") triggerProps.onBlur(e);
+          }
+        }
+      );
+    })(),
     isMounted && isOpen && createPortal2(
       /* @__PURE__ */ jsx17(
         "div",
@@ -4086,17 +4094,6 @@ function getAnimationStyles() {
 
 // src/components/Popover.tsx
 import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
-function assignRef2(ref, value) {
-  if (!ref) return;
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-  try {
-    ref.current = value;
-  } catch {
-  }
-}
 function getTransformOrigin2(side, align) {
   if (side === "top") return `${align === "end" ? "right" : "left"} bottom`;
   if (side === "bottom") return `${align === "end" ? "right" : "left"} top`;
@@ -4208,7 +4205,15 @@ var Popover = ({
   );
   const offset = 4;
   const padding = 8;
+  const triggerSelector = React15.useId();
   const initialPlacement = React15.useMemo(() => normalizePlacement(placement), [placement]);
+  React15.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    const triggerEl = document.querySelector(`[data-underverse-popover-trigger="${triggerSelector}"]`);
+    if (triggerEl) {
+      triggerRef.current = triggerEl;
+    }
+  }, [triggerSelector, trigger]);
   const updatePosition = React15.useCallback(() => {
     const triggerEl = triggerRef.current;
     const positionerEl = positionerRef.current;
@@ -4386,27 +4391,36 @@ var Popover = ({
   ) : null;
   return /* @__PURE__ */ jsxs14(Fragment4, { children: [
     (() => {
-      const triggerEl = trigger;
-      return React15.cloneElement(triggerEl, {
-        ref: (node) => {
-          triggerRef.current = node;
-          assignRef2(triggerEl.props?.ref, node);
-        },
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          handleTriggerClick();
-          if (triggerEl.props && typeof triggerEl.props.onClick === "function") {
-            triggerEl.props.onClick(e);
-          }
-        },
-        "aria-expanded": isOpen,
-        "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"
-        )
-      });
+      const TriggerComponent = trigger.type;
+      const triggerProps = trigger.props;
+      return /* @__PURE__ */ jsx18(
+        TriggerComponent,
+        {
+          ...triggerProps,
+          "data-underverse-popover-trigger": triggerSelector,
+          onClick: (e) => {
+            triggerRef.current = e.currentTarget;
+            e.preventDefault();
+            e.stopPropagation();
+            handleTriggerClick();
+            if (typeof triggerProps.onClick === "function") {
+              triggerProps.onClick(e);
+            }
+          },
+          onFocus: (e) => {
+            triggerRef.current = e.currentTarget;
+            if (typeof triggerProps.onFocus === "function") {
+              triggerProps.onFocus(e);
+            }
+          },
+          "aria-expanded": isOpen,
+          "aria-haspopup": triggerProps["aria-haspopup"] ?? "dialog",
+          className: cn(
+            triggerProps.className,
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          )
+        }
+      );
     })(),
     popoverContent
   ] });
@@ -5165,6 +5179,20 @@ var VerticalTabs = ({ sidebarWidth = "w-48", className, ...props }) => {
 // src/components/DropdownMenu.tsx
 import React20, { useState as useState15 } from "react";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+function useResettingIndex(resetToken) {
+  const [state, setState] = React20.useState({ resetToken, index: -1 });
+  const activeIndex = Object.is(state.resetToken, resetToken) ? state.index : -1;
+  const setActiveIndex = React20.useCallback((nextIndex) => {
+    setState((prev) => {
+      const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : -1;
+      return {
+        resetToken,
+        index: typeof nextIndex === "function" ? nextIndex(prevIndex) : nextIndex
+      };
+    });
+  }, [resetToken]);
+  return [activeIndex, setActiveIndex];
+}
 var DropdownMenu = ({
   trigger,
   children,
@@ -5178,16 +5206,13 @@ var DropdownMenu = ({
   items
 }) => {
   const [internalOpen, setInternalOpen] = useState15(false);
+  const open = isOpen !== void 0 ? isOpen : internalOpen;
+  const setOpen = onOpenChange || setInternalOpen;
   const triggerRef = React20.useRef(null);
   const menuRef = React20.useRef(null);
   const itemsRef = React20.useRef([]);
-  const [activeIndex, setActiveIndex] = useState15(-1);
+  const [activeIndex, setActiveIndex] = useResettingIndex(open);
   useShadCNAnimations();
-  const open = isOpen !== void 0 ? isOpen : internalOpen;
-  const setOpen = onOpenChange || setInternalOpen;
-  React20.useEffect(() => {
-    if (open) setActiveIndex(-1);
-  }, [open]);
   React20.useEffect(() => {
     if (!open) return;
     const handleKeyNav = (e) => {
@@ -5224,7 +5249,7 @@ var DropdownMenu = ({
     return () => {
       document.removeEventListener("keydown", handleKeyNav);
     };
-  }, [open, activeIndex]);
+  }, [open, activeIndex, setActiveIndex]);
   const handleItemClick = (itemOnClick) => {
     itemOnClick();
     if (closeOnSelect) {
@@ -5262,36 +5287,48 @@ var DropdownMenu = ({
       index
     );
   }) : children });
-  const enhancedTrigger = React20.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"
-    )
-  });
+  const TriggerComponent = trigger.type;
+  const triggerProps = trigger.props;
+  const enhancedTrigger = /* @__PURE__ */ jsx24(
+    TriggerComponent,
+    {
+      ...triggerProps,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      onKeyDown: (e) => {
+        triggerRef.current = e.currentTarget;
+        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 triggerProps.onKeyDown === "function") {
+          triggerProps.onKeyDown(e);
+        }
+      },
+      onFocus: (e) => {
+        triggerRef.current = e.currentTarget;
+        if (typeof triggerProps.onFocus === "function") {
+          triggerProps.onFocus(e);
+        }
+      },
+      className: cn(
+        triggerProps.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__ */ jsx24(
     Popover,
     {
@@ -5376,7 +5413,7 @@ import { ChevronLeft, ChevronRight as ChevronRight2, ChevronsLeft, ChevronsRight
 
 // src/components/Combobox.tsx
 import * as React22 from "react";
-import { useId as useId3 } from "react";
+import { useId as useId5 } from "react";
 import { ChevronDown, Search as Search3, SearchX, Check as Check3, X as X8 } from "lucide-react";
 
 // src/components/OverlayScrollbarProvider.tsx
@@ -5659,7 +5696,7 @@ var Combobox = ({
   const inputRef = React22.useRef(null);
   const optionsViewportRef = React22.useRef(null);
   useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = useId3();
+  const autoId = useId5();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const enableSearch = options.length > 10;
@@ -6687,7 +6724,7 @@ function formatDateSmart(date, locale = "en") {
 // src/components/DatePicker.tsx
 import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Sparkles as Sparkles2, X as XIcon } from "lucide-react";
 import * as React26 from "react";
-import { useId as useId4 } from "react";
+import { useId as useId6 } from "react";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var DatePicker = ({
   id,
@@ -7086,7 +7123,7 @@ var DatePicker = ({
       )
     ] })
   ] });
-  const autoId = useId4();
+  const autoId = useId6();
   const resolvedId = id ? String(id) : `datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = sizeStyles8[size].label;
@@ -7773,10 +7810,8 @@ function WheelColumn({
   };
   const currentVirtual = React27.useMemo(() => {
     if (!loop || items.length <= 0) return valueIndex;
-    const fallback = baseOffset + valueIndex;
-    const from = lastVirtualIndexRef.current ?? fallback;
-    return getNearestVirtualIndex(valueIndex, from);
-  }, [baseOffset, getNearestVirtualIndex, items.length, loop, valueIndex]);
+    return baseOffset + valueIndex;
+  }, [baseOffset, items.length, loop, valueIndex]);
   const commitFromScrollTop = React27.useCallback(
     (behavior) => {
       const el = scrollRef.current;
@@ -9213,10 +9248,8 @@ function WheelColumn2({
   };
   const currentVirtual = React29.useMemo(() => {
     if (!loop || items.length <= 0) return valueIndex;
-    const fallback = baseOffset + valueIndex;
-    const from = lastVirtualIndexRef.current ?? fallback;
-    return getNearestVirtualIndex(valueIndex, from);
-  }, [baseOffset, getNearestVirtualIndex, items.length, loop, valueIndex]);
+    return baseOffset + valueIndex;
+  }, [baseOffset, items.length, loop, valueIndex]);
   const commitFromScrollTop = React29.useCallback(
     (behavior) => {
       const el = scrollRef.current;
@@ -13276,7 +13309,7 @@ function CalendarTimeline({
 
 // src/components/MultiCombobox.tsx
 import * as React37 from "react";
-import { useId as useId5 } from "react";
+import { useId as useId7 } from "react";
 import { ChevronDown as ChevronDown4, Search as Search4, Check as Check6, SearchX as SearchX2, Loader2 as Loader24, X as X12, Sparkles as Sparkles3 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var MultiCombobox = ({
@@ -13405,7 +13438,7 @@ var MultiCombobox = ({
     outline: "border-2 border-input bg-transparent hover:border-primary",
     ghost: "border border-transparent bg-muted/50 hover:bg-muted"
   };
-  const autoId = useId5();
+  const autoId = useId7();
   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";
@@ -14033,6 +14066,36 @@ var SIZE_STYLES = {
   }
 };
 var clamp6 = (n, min, max) => Math.min(max, Math.max(min, n));
+function SliderTooltip({
+  displayValue,
+  position,
+  visible,
+  sizeClassName,
+  tooltipClassName
+}) {
+  return /* @__PURE__ */ jsxs36(
+    "div",
+    {
+      className: cn(
+        "absolute pointer-events-none transition-all duration-200 ease-out",
+        "bg-popover text-popover-foreground rounded-lg shadow-lg border border-border/50",
+        "whitespace-nowrap font-medium -translate-x-1/2 z-50",
+        sizeClassName,
+        visible ? "opacity-100 -translate-y-10 scale-100" : "opacity-0 -translate-y-8 scale-95",
+        tooltipClassName
+      ),
+      style: {
+        left: `${position}%`,
+        bottom: "100%"
+      },
+      children: [
+        displayValue,
+        /* @__PURE__ */ jsx44("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-4 border-transparent border-t-border" }),
+        /* @__PURE__ */ jsx44("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-[3px] border-transparent border-t-popover -mt-px" })
+      ]
+    }
+  );
+}
 var Slider = React39.forwardRef(
   ({
     className,
@@ -14122,6 +14185,7 @@ var Slider = React39.forwardRef(
     const rangeStartPct = (normalizedRange[0] - min) / denom * 100;
     const rangeEndPct = (normalizedRange[1] - min) / denom * 100;
     const sizeStyles8 = SIZE_STYLES[size];
+    const tooltipVisible = showTooltip && !disabled && (isHovering || isDragging);
     const displayValue = React39.useMemo(() => {
       if (isRange) {
         const a = formatValue ? formatValue(normalizedRange[0]) : normalizedRange[0].toString();
@@ -14195,32 +14259,6 @@ var Slider = React39.forwardRef(
     };
     if (orientation === "vertical") {
     }
-    const Tooltip2 = ({ value: value2, position }) => {
-      const shouldShow = showTooltip && !disabled && (isHovering || isDragging);
-      const displayVal = formatValue ? formatValue(value2) : value2.toString();
-      return /* @__PURE__ */ jsxs36(
-        "div",
-        {
-          className: cn(
-            "absolute pointer-events-none transition-all duration-200 ease-out",
-            "bg-popover text-popover-foreground rounded-lg shadow-lg border border-border/50",
-            "whitespace-nowrap font-medium -translate-x-1/2 z-50",
-            sizeStyles8.tooltip,
-            shouldShow ? "opacity-100 -translate-y-10 scale-100" : "opacity-0 -translate-y-8 scale-95",
-            tooltipClassName
-          ),
-          style: {
-            left: `${position}%`,
-            bottom: "100%"
-          },
-          children: [
-            displayVal,
-            /* @__PURE__ */ jsx44("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-4 border-transparent border-t-border" }),
-            /* @__PURE__ */ jsx44("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-[3px] border-transparent border-t-popover -mt-px" })
-          ]
-        }
-      );
-    };
     return /* @__PURE__ */ jsxs36("div", { className: cn("w-full space-y-2", containerClassName), children: [
       (label || showValue) && /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between", children: [
         label && /* @__PURE__ */ jsx44("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
@@ -14253,10 +14291,37 @@ var Slider = React39.forwardRef(
                 style: { width: `${percentage}%` }
               }
             ) }),
-            !isRange && /* @__PURE__ */ jsx44(Tooltip2, { value: currentValue, position: percentage }),
+            !isRange && /* @__PURE__ */ jsx44(
+              SliderTooltip,
+              {
+                displayValue: formatValue ? formatValue(currentValue) : currentValue.toString(),
+                position: percentage,
+                visible: tooltipVisible,
+                sizeClassName: sizeStyles8.tooltip,
+                tooltipClassName
+              }
+            ),
             isRange && /* @__PURE__ */ jsxs36(Fragment14, { children: [
-              /* @__PURE__ */ jsx44(Tooltip2, { value: normalizedRange[0], position: rangeStartPct }),
-              /* @__PURE__ */ jsx44(Tooltip2, { value: normalizedRange[1], position: rangeEndPct })
+              /* @__PURE__ */ jsx44(
+                SliderTooltip,
+                {
+                  displayValue: formatValue ? formatValue(normalizedRange[0]) : normalizedRange[0].toString(),
+                  position: rangeStartPct,
+                  visible: tooltipVisible,
+                  sizeClassName: sizeStyles8.tooltip,
+                  tooltipClassName
+                }
+              ),
+              /* @__PURE__ */ jsx44(
+                SliderTooltip,
+                {
+                  displayValue: formatValue ? formatValue(normalizedRange[1]) : normalizedRange[1].toString(),
+                  position: rangeEndPct,
+                  visible: tooltipVisible,
+                  sizeClassName: sizeStyles8.tooltip,
+                  tooltipClassName
+                }
+              )
             ] }),
             (() => {
               const baseInputClassName = cn(
@@ -14829,7 +14894,7 @@ function OverlayControls({
 }
 
 // src/components/CategoryTreeSelect.tsx
-import { useEffect as useEffect23, useId as useId7, useMemo as useMemo17, useRef as useRef17, useState as useState29 } from "react";
+import { useEffect as useEffect23, useId as useId9, useMemo as useMemo17, useRef as useRef17, useState as useState29 } from "react";
 import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown5, FolderTree, Layers, Search as Search5, SearchX as SearchX3, X as X13 } from "lucide-react";
 import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 var defaultLabels = {
@@ -14838,6 +14903,16 @@ var defaultLabels = {
   searchPlaceholder: "Search...",
   noResultsText: "No results found"
 };
+function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline) {
+  if (!(viewOnly || inline) || !defaultExpanded) return /* @__PURE__ */ new Set();
+  const parentIds = /* @__PURE__ */ new Set();
+  for (const category of categories) {
+    if (typeof category.parent_id === "number") {
+      parentIds.add(category.parent_id);
+    }
+  }
+  return parentIds;
+}
 function CategoryTreeSelect(props) {
   const {
     id,
@@ -14863,12 +14938,12 @@ function CategoryTreeSelect(props) {
     singleSelect = false
   } = props;
   const [isOpen, setIsOpen] = useState29(false);
-  const [expandedNodes, setExpandedNodes] = useState29(/* @__PURE__ */ new Set());
+  const [expandedNodes, setExpandedNodes] = useState29(() => getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline));
   const [query, setQuery] = useState29("");
   const searchInputRef = useRef17(null);
   const dropdownViewportRef = useRef17(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = useId7();
+  const autoId = useId9();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const helperId = helperText && !error ? `${resolvedId}-helper` : void 0;
@@ -14937,21 +15012,12 @@ function CategoryTreeSelect(props) {
     }
     return visible;
   }, [byId, categories, childrenMap, isSearchMode, normalizedQuery]);
-  useEffect23(() => {
-    if (!isOpen) setQuery("");
-  }, [isOpen]);
   useEffect23(() => {
     if (!isOpen) return;
     if (!isSearchEnabled) return;
     const t = setTimeout(() => searchInputRef.current?.focus(), 50);
     return () => clearTimeout(t);
   }, [isOpen, isSearchEnabled]);
-  useEffect23(() => {
-    if ((viewOnly || inline) && defaultExpanded) {
-      const allParentIds = categories.filter((c) => childrenMap.has(c.id)).map((c) => c.id);
-      setExpandedNodes(new Set(allParentIds));
-    }
-  }, [viewOnly, inline, defaultExpanded, categories, childrenMap]);
   const toggleExpand = (id2) => {
     if (isSearchMode) return;
     const newExpanded = new Set(expandedNodes);
@@ -14975,7 +15041,7 @@ function CategoryTreeSelect(props) {
         onChange(categoryId);
       }
       if (!inline) {
-        setIsOpen(false);
+        handleOpenChange(false);
       }
     } else {
       const onChange = props.onChange;
@@ -15113,17 +15179,16 @@ function CategoryTreeSelect(props) {
     if (!isSearchMode) return parentCategories;
     return parentCategories.filter((c) => visibleIds?.has(c.id));
   }, [isSearchMode, parentCategories, visibleIds]);
-  const effectiveChildrenMap = useMemo17(() => {
-    if (!isSearchMode || !visibleIds) return childrenMap;
-    const next = /* @__PURE__ */ new Map();
+  let effectiveChildrenMap = childrenMap;
+  if (isSearchMode && visibleIds) {
+    effectiveChildrenMap = /* @__PURE__ */ new Map();
     for (const [parentId, children] of childrenMap.entries()) {
-      next.set(
+      effectiveChildrenMap.set(
         parentId,
         children.filter((child) => visibleIds.has(child.id))
       );
     }
-    return next;
-  }, [childrenMap, isSearchMode, visibleIds]);
+  }
   const renderTreeContent = () => /* @__PURE__ */ jsx46("div", { className: "space-y-0.5 overflow-x-hidden", children: effectiveParentCategories.length === 0 ? /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
     /* @__PURE__ */ jsx46("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: isSearchMode ? /* @__PURE__ */ jsx46(SearchX3, { className: "w-6 h-6 text-muted-foreground/50" }) : /* @__PURE__ */ jsx46(Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
     /* @__PURE__ */ jsx46("span", { className: "text-sm text-muted-foreground", children: isSearchMode ? mergedLabels.noResultsText : mergedLabels.emptyText })
@@ -15232,7 +15297,13 @@ function CategoryTreeSelect(props) {
     event.preventDefault();
     event.stopPropagation();
     clearSelection();
-    setIsOpen(false);
+    handleOpenChange(false);
+  };
+  const handleOpenChange = (nextOpen) => {
+    setIsOpen(nextOpen);
+    if (!nextOpen) {
+      setQuery("");
+    }
   };
   let displayText;
   if (singleSelect) {
@@ -15265,7 +15336,7 @@ function CategoryTreeSelect(props) {
       Popover,
       {
         open: isOpen,
-        onOpenChange: setIsOpen,
+        onOpenChange: handleOpenChange,
         disabled,
         placement: "bottom-start",
         matchTriggerWidth: true,
@@ -18310,7 +18381,7 @@ var MusicPlayer = ({
 var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
-import React49, { useId as useId8 } from "react";
+import React49, { useId as useId10 } from "react";
 import { Fragment as Fragment20, jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
@@ -18375,7 +18446,7 @@ var GridRoot = React49.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const id = useId8().replace(/[:]/g, "");
+    const id = useId10().replace(/[:]/g, "");
     const baseClass = `uv-grid-${id}`;
     const baseCols = toTemplateCols(columns, minColumnWidth);
     const baseRows = toTemplateRows(rows);
@@ -18498,13 +18569,9 @@ var Grid = Object.assign(GridRoot, { Item: GridItem });
 var Grid_default = Grid;
 
 // src/components/ClientOnly.tsx
-import { useEffect as useEffect28, useState as useState38 } from "react";
 import { Fragment as Fragment21, jsx as jsx57 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
-  const [hasMounted, setHasMounted] = useState38(false);
-  useEffect28(() => {
-    setHasMounted(true);
-  }, []);
+  const hasMounted = useHydrated();
   if (!hasMounted) {
     return /* @__PURE__ */ jsx57(Fragment21, { children: fallback });
   }
@@ -18607,7 +18674,7 @@ var TABLE_CONTAINER_BASE_CLASS = [
   "bg-card text-card-foreground shadow-sm",
   "backdrop-blur-sm transition-all duration-300"
 ].join(" ");
-function assignRef3(ref, value) {
+function assignRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);
     return;
@@ -18624,7 +18691,7 @@ var TableContainer = React50.forwardRef(({ className, useOverlayScrollbar = fals
     {
       ref: (node) => {
         containerRef.current = node;
-        assignRef3(ref, node);
+        assignRef(ref, node);
       },
       className: cn(TABLE_CONTAINER_BASE_CLASS, className),
       ...props
@@ -19376,39 +19443,40 @@ import React57 from "react";
 
 // src/components/DataTable/hooks/usePageSizeStorage.ts
 import React56 from "react";
+function readStoredPageSize(storageKey) {
+  if (typeof window === "undefined" || !storageKey) return null;
+  try {
+    const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
+    if (!saved) return null;
+    const parsed = parseInt(saved, 10);
+    return !isNaN(parsed) && parsed > 0 ? parsed : null;
+  } catch {
+    return null;
+  }
+}
 function usePageSizeStorage({ pageSize, storageKey }) {
-  const loadedFromStorage = React56.useRef(false);
-  const [curPageSize, setCurPageSize] = React56.useState(() => {
-    if (typeof window === "undefined" || !storageKey) return pageSize;
-    try {
-      const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
-      if (saved) {
-        const parsed = parseInt(saved, 10);
-        if (!isNaN(parsed) && parsed > 0) {
-          loadedFromStorage.current = true;
-          return parsed;
-        }
-      }
-    } catch {
-    }
-    return pageSize;
+  const storedPageSize = React56.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
+  const [overrideState, setOverrideState] = React56.useState({
+    storageKey,
+    pageSize: null
   });
-  const hasMounted = React56.useRef(false);
-  React56.useEffect(() => {
-    hasMounted.current = true;
-  }, []);
-  React56.useEffect(() => {
-    if (typeof window === "undefined" || !storageKey) return;
-    if (!hasMounted.current) return;
-    try {
-      localStorage.setItem(`datatable_${storageKey}_pageSize`, String(curPageSize));
-    } catch {
-    }
-  }, [curPageSize, storageKey]);
-  React56.useEffect(() => {
-    if (storageKey && loadedFromStorage.current) return;
-    setCurPageSize(pageSize);
-  }, [pageSize, storageKey]);
+  const overridePageSize = overrideState.storageKey === storageKey ? overrideState.pageSize : null;
+  const persistedPageSize = storageKey ? overridePageSize ?? storedPageSize : null;
+  const loadedFromStorage = persistedPageSize != null;
+  const curPageSize = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
+  const setCurPageSize = React56.useCallback(
+    (nextPageSize) => {
+      const baseValue = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
+      const resolved = typeof nextPageSize === "function" ? nextPageSize(baseValue) : nextPageSize;
+      setOverrideState({ storageKey, pageSize: resolved });
+      if (!storageKey || typeof window === "undefined") return;
+      try {
+        localStorage.setItem(`datatable_${storageKey}_pageSize`, String(resolved));
+      } catch {
+      }
+    },
+    [overridePageSize, pageSize, persistedPageSize, storageKey]
+  );
   return { curPageSize, setCurPageSize, loadedFromStorage };
 }
 
@@ -20071,7 +20139,7 @@ function AccessDenied({
 
 // src/components/ThemeToggleHeadless.tsx
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
-import { useEffect as useEffect30, useRef as useRef22, useState as useState39 } from "react";
+import { useRef as useRef22, useState as useState38 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { Fragment as Fragment23, jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
@@ -20080,17 +20148,16 @@ function ThemeToggleHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = useState39(false);
-  const [mounted, setMounted] = useState39(false);
+  const [isOpen, setIsOpen] = useState38(false);
+  const isHydrated = useHydrated();
   const triggerRef = useRef22(null);
-  const [dropdownPosition, setDropdownPosition] = useState39(null);
-  useEffect30(() => setMounted(true), []);
+  const [dropdownPosition, setDropdownPosition] = useState38(null);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: Sun2 },
     { value: "dark", label: labels?.dark ?? "Dark", icon: Moon2 },
     { value: "system", label: labels?.system ?? "System", icon: Monitor }
   ];
-  const current = mounted ? themes.find((t) => t.value === theme) || themes[2] : themes[2];
+  const current = isHydrated ? themes.find((t) => t.value === theme) || themes[2] : themes[2];
   const CurrentIcon = current.icon;
   const calculatePosition = () => {
     const rect = triggerRef.current?.getBoundingClientRect();
@@ -20173,7 +20240,7 @@ function ThemeToggleHeadless({
 }
 
 // src/components/LanguageSwitcherHeadless.tsx
-import { useRef as useRef23, useState as useState40 } from "react";
+import { useRef as useRef23, useState as useState39 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { Globe } from "lucide-react";
 import { Fragment as Fragment24, jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
@@ -20184,8 +20251,8 @@ function LanguageSwitcherHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = useState40(false);
-  const [dropdownPosition, setDropdownPosition] = useState40(null);
+  const [isOpen, setIsOpen] = useState39(false);
+  const [dropdownPosition, setDropdownPosition] = useState39(null);
   const triggerButtonRef = useRef23(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
@@ -20724,7 +20791,7 @@ function useLocale() {
 }
 
 // src/components/UEditor/UEditor.tsx
-import React71, { useEffect as useEffect37, useImperativeHandle as useImperativeHandle3, useMemo as useMemo22, useRef as useRef30 } from "react";
+import React71, { useEffect as useEffect34, useImperativeHandle as useImperativeHandle3, useMemo as useMemo22, useRef as useRef30 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -20765,7 +20832,7 @@ import { common, createLowlight } from "lowlight";
 import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
-import { forwardRef as forwardRef13, useEffect as useEffect31, useImperativeHandle, useRef as useRef24, useState as useState41 } from "react";
+import React63, { forwardRef as forwardRef13, useEffect as useEffect29, useImperativeHandle, useRef as useRef24 } from "react";
 import {
   FileCode as FileCode2,
   Heading1,
@@ -20807,13 +20874,24 @@ var DEFAULT_MESSAGES = {
   table: "Table",
   tableDesc: "Insert a table"
 };
+function useResettingIndex2(resetToken) {
+  const [state, setState] = React63.useState({ resetToken, index: 0 });
+  const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
+  const setSelectedIndex = React63.useCallback((nextIndex) => {
+    setState((prev) => {
+      const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
+      return {
+        resetToken,
+        index: typeof nextIndex === "function" ? nextIndex(prevIndex) : nextIndex
+      };
+    });
+  }, [resetToken]);
+  return [selectedIndex, setSelectedIndex];
+}
 var CommandList = forwardRef13((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = useState41(0);
+  const [selectedIndex, setSelectedIndex] = useResettingIndex2(props.items);
   const listRef = useRef24(null);
-  useEffect31(() => {
-    setSelectedIndex(0);
-  }, [props.items]);
-  useEffect31(() => {
+  useEffect29(() => {
     const selectedElement = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex, props.items]);
@@ -21138,7 +21216,7 @@ import { Extension as Extension3 } from "@tiptap/core";
 import Suggestion2 from "@tiptap/suggestion";
 import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { PluginKey } from "@tiptap/pm/state";
-import { forwardRef as forwardRef14, useEffect as useEffect32, useImperativeHandle as useImperativeHandle2, useState as useState42 } from "react";
+import React64, { forwardRef as forwardRef14, useImperativeHandle as useImperativeHandle2 } from "react";
 import { Smile } from "lucide-react";
 import tippy2 from "tippy.js";
 
@@ -21909,11 +21987,22 @@ var EMOJI_LIST = [
 
 // src/components/UEditor/emoji-suggestion.tsx
 import { jsx as jsx72, jsxs as jsxs62 } from "react/jsx-runtime";
+function useResettingIndex3(resetToken) {
+  const [state, setState] = React64.useState({ resetToken, index: 0 });
+  const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
+  const setSelectedIndex = React64.useCallback((nextIndex) => {
+    setState((prev) => {
+      const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
+      return {
+        resetToken,
+        index: typeof nextIndex === "function" ? nextIndex(prevIndex) : nextIndex
+      };
+    });
+  }, [resetToken]);
+  return [selectedIndex, setSelectedIndex];
+}
 var EmojiList = forwardRef14((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = useState42(0);
-  useEffect32(() => {
-    setSelectedIndex(0);
-  }, [props.items]);
+  const [selectedIndex, setSelectedIndex] = useResettingIndex3(props.items);
   useImperativeHandle2(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -22119,7 +22208,7 @@ var UEditorPlaceholder = Extension4.create({
 });
 
 // src/components/UEditor/resizable-image.tsx
-import { useEffect as useEffect33, useRef as useRef25, useState as useState43 } from "react";
+import { useEffect as useEffect30, useRef as useRef25, useState as useState41 } from "react";
 import Image3 from "@tiptap/extension-image";
 import { mergeAttributes } from "@tiptap/core";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
@@ -22141,13 +22230,13 @@ function ResizableImageNodeView(props) {
   const { node, selected, updateAttributes, editor, getPos } = props;
   const wrapperRef = useRef25(null);
   const imgRef = useRef25(null);
-  const [isHovered, setIsHovered] = useState43(false);
-  const [isResizing, setIsResizing] = useState43(false);
+  const [isHovered, setIsHovered] = useState41(false);
+  const [isResizing, setIsResizing] = useState41(false);
   const widthAttr = toNullableNumber(node.attrs["width"]);
   const heightAttr = toNullableNumber(node.attrs["height"]);
   const textAlign = String(node.attrs["textAlign"] ?? "");
   const dragStateRef = useRef25(null);
-  useEffect33(() => {
+  useEffect30(() => {
     const img = imgRef.current;
     if (!img) return;
     img.style.width = widthAttr ? `${widthAttr}px` : "";
@@ -22478,7 +22567,7 @@ function buildUEditorExtensions({
 }
 
 // src/components/UEditor/toolbar.tsx
-import React69, { useRef as useRef28, useState as useState46 } from "react";
+import React69, { useRef as useRef28, useState as useState44 } from "react";
 import {
   AlignCenter,
   AlignJustify,
@@ -22579,7 +22668,7 @@ var EditorColorPalette = ({
 ] });
 
 // src/components/UEditor/inputs.tsx
-import { useEffect as useEffect34, useRef as useRef26, useState as useState44 } from "react";
+import { useEffect as useEffect31, useRef as useRef26, useState as useState42 } from "react";
 import { Check as Check10, X as X18 } from "lucide-react";
 import { jsx as jsx75, jsxs as jsxs65 } from "react/jsx-runtime";
 function normalizeUrl(raw) {
@@ -22595,9 +22684,9 @@ var LinkInput = ({
   initialUrl = ""
 }) => {
   const t = useSmartTranslations("UEditor");
-  const [url, setUrl] = useState44(initialUrl);
+  const [url, setUrl] = useState42(initialUrl);
   const inputRef = useRef26(null);
-  useEffect34(() => {
+  useEffect31(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, []);
@@ -22624,10 +22713,10 @@ var LinkInput = ({
 };
 var ImageInput = ({ onSubmit, onCancel }) => {
   const t = useSmartTranslations("UEditor");
-  const [url, setUrl] = useState44("");
-  const [alt, setAlt] = useState44("");
+  const [url, setUrl] = useState42("");
+  const [alt, setAlt] = useState42("");
   const inputRef = useRef26(null);
-  useEffect34(() => {
+  useEffect31(() => {
     inputRef.current?.focus();
   }, []);
   const handleSubmit = (e) => {
@@ -22680,7 +22769,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
 };
 
 // src/components/UEditor/emoji-picker.tsx
-import { useState as useState45, useMemo as useMemo20, useRef as useRef27, useEffect as useEffect35 } from "react";
+import { useState as useState43, useMemo as useMemo20, useRef as useRef27, useEffect as useEffect32 } from "react";
 import { Search as Search6, X as X19, Smile as Smile2, Leaf, Utensils, Dumbbell, Lightbulb, Hash, Flag } from "lucide-react";
 import { jsx as jsx76, jsxs as jsxs66 } from "react/jsx-runtime";
 var CATEGORY_ICONS = {
@@ -22694,8 +22783,8 @@ var CATEGORY_ICONS = {
 };
 var EmojiPicker = ({ onSelect, onClose }) => {
   const t = useSmartTranslations("UEditor");
-  const [search, setSearch] = useState45("");
-  const [activeCategory, setActiveCategory] = useState45(EMOJI_LIST[0]?.id || "");
+  const [search, setSearch] = useState43("");
+  const [activeCategory, setActiveCategory] = useState43(EMOJI_LIST[0]?.id || "");
   const scrollContainerRef = useRef27(null);
   const categoryRefs = useRef27({});
   const isUserScrolling = useRef27(false);
@@ -22713,7 +22802,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
     onSelect(emoji);
     setSearch("");
   };
-  useEffect35(() => {
+  useEffect32(() => {
     if (search) return;
     const container = scrollContainerRef.current;
     if (!container) return;
@@ -22753,7 +22842,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
       isUserScrolling.current = true;
     }, 500);
   };
-  useEffect35(() => {
+  useEffect32(() => {
     isUserScrolling.current = true;
   }, []);
   return /* @__PURE__ */ jsxs66("div", { className: "w-96 bg-card border border-border/50 rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-128", children: [
@@ -22910,10 +22999,10 @@ var EditorToolbar = ({
 }) => {
   const t = useSmartTranslations("UEditor");
   const { textColors, highlightColors } = useEditorColors();
-  const [showImageInput, setShowImageInput] = useState46(false);
+  const [showImageInput, setShowImageInput] = useState44(false);
   const fileInputRef = useRef28(null);
-  const [isUploadingImage, setIsUploadingImage] = useState46(false);
-  const [imageUploadError, setImageUploadError] = useState46(null);
+  const [isUploadingImage, setIsUploadingImage] = useState44(false);
+  const [imageUploadError, setImageUploadError] = useState44(null);
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -23361,7 +23450,7 @@ var EditorToolbar = ({
 };
 
 // src/components/UEditor/menus.tsx
-import { useCallback as useCallback17, useEffect as useEffect36, useMemo as useMemo21, useRef as useRef29, useState as useState47 } from "react";
+import React70, { useCallback as useCallback17, useEffect as useEffect33, useMemo as useMemo21, useRef as useRef29, useState as useState45 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import {
   Bold as BoldIcon2,
@@ -23387,9 +23476,23 @@ import {
   Strikethrough as StrikethroughIcon2
 } from "lucide-react";
 import { jsx as jsx78, jsxs as jsxs68 } from "react/jsx-runtime";
+function useResettingIndex4(resetToken) {
+  const [state, setState] = React70.useState({ resetToken, index: 0 });
+  const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
+  const setSelectedIndex = React70.useCallback((nextIndex) => {
+    setState((prev) => {
+      const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
+      return {
+        resetToken,
+        index: typeof nextIndex === "function" ? nextIndex(prevIndex) : nextIndex
+      };
+    });
+  }, [resetToken]);
+  return [selectedIndex, setSelectedIndex];
+}
 var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
   const t = useSmartTranslations("UEditor");
-  const [selectedIndex, setSelectedIndex] = useState47(0);
+  const [selectedIndex, setSelectedIndex] = useResettingIndex4(filterText);
   const menuRef = useRef29(null);
   const allCommands = useMemo21(
     () => [
@@ -23467,13 +23570,10 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     const lowerFilter = filterText.toLowerCase();
     return allCommands.filter((cmd) => cmd.label.toLowerCase().includes(lowerFilter) || cmd.description.toLowerCase().includes(lowerFilter));
   }, [allCommands, filterText]);
-  useEffect36(() => {
-    setSelectedIndex(0);
-  }, [filterText]);
-  useEffect36(() => {
+  useEffect33(() => {
     const selectedElement = menuRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
-  }, [selectedIndex]);
+  }, [commands, selectedIndex, setSelectedIndex]);
   const selectCommand = useCallback17(
     (index) => {
       const command = commands[index];
@@ -23484,7 +23584,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     },
     [commands, onClose]
   );
-  useEffect36(() => {
+  useEffect33(() => {
     const handleKeyDown = (e) => {
       if (commands.length === 0) return;
       if (e.key === "ArrowDown") {
@@ -23503,7 +23603,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [commands, selectedIndex, selectCommand, onClose]);
+  }, [commands, onClose, selectCommand, selectedIndex, setSelectedIndex]);
   if (commands.length === 0) {
     return /* @__PURE__ */ jsx78("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
   }
@@ -23544,7 +23644,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
 };
 var FloatingMenuContent = ({ editor }) => {
   const t = useSmartTranslations("UEditor");
-  const [showCommands, setShowCommands] = useState47(false);
+  const [showCommands, setShowCommands] = useState45(false);
   if (showCommands) {
     return /* @__PURE__ */ jsx78(SlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
   }
@@ -23567,12 +23667,12 @@ var BubbleMenuContent = ({
 }) => {
   const t = useSmartTranslations("UEditor");
   const { textColors, highlightColors } = useEditorColors();
-  const [showLinkInput, setShowLinkInput] = useState47(false);
-  const [showEditorColorPalette, setShowEditorColorPalette] = useState47(false);
-  useEffect36(() => {
+  const [showLinkInput, setShowLinkInput] = useState45(false);
+  const [showEditorColorPalette, setShowEditorColorPalette] = useState45(false);
+  useEffect33(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
-  useEffect36(() => {
+  useEffect33(() => {
     if (!showLinkInput) return;
     const close = () => setShowLinkInput(false);
     editor.on("selectionUpdate", close);
@@ -23695,15 +23795,15 @@ var BubbleMenuContent = ({
   ] });
 };
 var CustomBubbleMenu = ({ editor }) => {
-  const [isVisible, setIsVisible] = useState47(false);
-  const [position, setPosition] = useState47({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = useState45(false);
+  const [position, setPosition] = useState45({ top: 0, left: 0 });
   const menuRef = useRef29(null);
   const keepOpenRef = useRef29(false);
   const setKeepOpen = useCallback17((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
-  useEffect36(() => {
+  useEffect33(() => {
     const updatePosition = () => {
       const { state, view } = editor;
       const { from, to, empty } = state.selection;
@@ -23756,9 +23856,9 @@ var CustomBubbleMenu = ({ editor }) => {
   );
 };
 var CustomFloatingMenu = ({ editor }) => {
-  const [isVisible, setIsVisible] = useState47(false);
-  const [position, setPosition] = useState47({ top: 0, left: 0 });
-  useEffect36(() => {
+  const [isVisible, setIsVisible] = useState45(false);
+  const [position, setPosition] = useState45({ top: 0, left: 0 });
+  useEffect33(() => {
     const updatePosition = () => {
       const { state, view } = editor;
       const { $from, empty } = state.selection;
@@ -24241,7 +24341,7 @@ var UEditor = React71.forwardRef(({
     }),
     [content, editor, uploadImageForSave]
   );
-  useEffect37(() => {
+  useEffect34(() => {
     if (editor && content !== editor.getHTML()) {
       if (editor.isEmpty && content) {
         editor.commands.setContent(content);