@underverse-ui/underverse 1.0.59 → 1.0.60

package/dist/index.cjs

@@ -3685,11 +3685,11 @@ var ToastProvider = ({ children, position = "top-right", maxToasts = 5 }) => {
   ] });
 };
 var ToastComponent = ({ toast, onRemove }) => {
-  const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react7.useState)(true);
   const [progress, setProgress] = (0, import_react7.useState)(100);
   const [paused, setPaused] = (0, import_react7.useState)(false);
   const total = toast.duration && toast.duration > 0 ? toast.duration : 5e3;
-  const endTsRef = (0, import_react7.useRef)(Date.now() + total);
+  const endTsRef = (0, import_react7.useRef)(0);
   const remainingRef = (0, import_react7.useRef)(total);
   const pausedRef = (0, import_react7.useRef)(false);
   const handleRemove = (0, import_react7.useCallback)(() => {
@@ -3697,7 +3697,6 @@ var ToastComponent = ({ toast, onRemove }) => {
     setTimeout(() => onRemove(toast.id), 150);
   }, [onRemove, toast.id]);
   (0, import_react7.useEffect)(() => {
-    setIsVisible(true);
     if (toast.duration === 0) return;
     remainingRef.current = total;
     endTsRef.current = Date.now() + total;
@@ -3823,6 +3822,18 @@ var Toast_default = ToastProvider;
 // src/components/Tooltip.tsx
 var React14 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
+
+// src/hooks/useHydrated.ts
+var import_react8 = require("react");
+var subscribe = () => () => {
+};
+var getSnapshot = () => true;
+var getServerSnapshot = () => false;
+function useHydrated() {
+  return (0, import_react8.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/components/Tooltip.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var variantStyles3 = {
   default: "bg-popover text-popover-foreground border-border/50",
@@ -3831,17 +3842,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) {
@@ -3897,19 +3897,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;
@@ -4009,28 +4014,36 @@ var Tooltip = ({
     return children;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { 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__ */ (0, import_jsx_runtime17.jsx)(
+        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 && (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
@@ -4077,7 +4090,7 @@ var React15 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
 
 // src/utils/animations.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var shadcnAnimationStyles = `
   /* ============================================
    * DROPDOWN / POPOVER ANIMATIONS
@@ -4255,7 +4268,7 @@ function ensureAnimationStylesInjected() {
   }
 }
 function useShadCNAnimations() {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     ensureAnimationStylesInjected();
   }, []);
 }
@@ -4268,17 +4281,6 @@ function getAnimationStyles() {
 
 // src/components/Popover.tsx
 var import_jsx_runtime18 = require("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`;
@@ -4390,7 +4392,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;
@@ -4568,27 +4578,36 @@ var Popover = ({
   ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { 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__ */ (0, import_jsx_runtime18.jsx)(
+        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
   ] });
@@ -4804,7 +4823,7 @@ var SidebarSheet = ({ navigation, children, ...props }) => {
 };
 
 // src/components/Alert.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var variantConfig = {
@@ -4845,7 +4864,7 @@ var variantConfig = {
   }
 };
 var Alert = ({ title, description, variant = "default", className, icon, dismissible = false, onClose, actions, closeAriaLabel }) => {
-  const [open, setOpen] = (0, import_react9.useState)(true);
+  const [open, setOpen] = (0, import_react10.useState)(true);
   const t = useSmartTranslations("Common");
   if (!open) return null;
   const handleClose = () => {
@@ -4890,7 +4909,7 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
 var Alert_default = Alert;
 
 // src/components/GlobalLoading.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_lucide_react10 = require("lucide-react");
 
 // src/utils/loading.ts
@@ -4937,8 +4956,8 @@ var loading = new LoadingManager();
 // src/components/GlobalLoading.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var GlobalLoading = ({ className, backdrop = true, position = "fixed", size = "lg" }) => {
-  const [state, setState] = (0, import_react10.useState)(() => loading.getState());
-  (0, import_react10.useEffect)(() => {
+  const [state, setState] = (0, import_react11.useState)(() => loading.getState());
+  (0, import_react11.useEffect)(() => {
     const unsubscribe = loading.subscribe(setState);
     return unsubscribe;
   }, []);
@@ -4995,7 +5014,7 @@ var InlineLoading = ({ isLoading, text, className, size = "md" }) => {
   ] });
 };
 var ButtonLoading = ({ isLoading, children, className, disabled, loadingText }) => {
-  const child = import_react10.default.isValidElement(children) ? import_react10.default.cloneElement(children, {
+  const child = import_react11.default.isValidElement(children) ? import_react11.default.cloneElement(children, {
     disabled: (children.props?.disabled ?? false) || disabled || isLoading,
     "aria-busy": isLoading || void 0
   }) : children;
@@ -5345,8 +5364,22 @@ var VerticalTabs = ({ sidebarWidth = "w-48", className, ...props }) => {
 };
 
 // src/components/DropdownMenu.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_jsx_runtime24 = require("react/jsx-runtime");
+function useResettingIndex(resetToken) {
+  const [state, setState] = import_react12.default.useState({ resetToken, index: -1 });
+  const activeIndex = Object.is(state.resetToken, resetToken) ? state.index : -1;
+  const setActiveIndex = import_react12.default.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,
@@ -5359,18 +5392,15 @@ var DropdownMenu = ({
   onOpenChange,
   items
 }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react11.useState)(false);
-  const triggerRef = import_react11.default.useRef(null);
-  const menuRef = import_react11.default.useRef(null);
-  const itemsRef = import_react11.default.useRef([]);
-  const [activeIndex, setActiveIndex] = (0, import_react11.useState)(-1);
-  useShadCNAnimations();
+  const [internalOpen, setInternalOpen] = (0, import_react12.useState)(false);
   const open = isOpen !== void 0 ? isOpen : internalOpen;
   const setOpen = onOpenChange || setInternalOpen;
-  import_react11.default.useEffect(() => {
-    if (open) setActiveIndex(-1);
-  }, [open]);
-  import_react11.default.useEffect(() => {
+  const triggerRef = import_react12.default.useRef(null);
+  const menuRef = import_react12.default.useRef(null);
+  const itemsRef = import_react12.default.useRef([]);
+  const [activeIndex, setActiveIndex] = useResettingIndex(open);
+  useShadCNAnimations();
+  import_react12.default.useEffect(() => {
     if (!open) return;
     const handleKeyNav = (e) => {
       const active = document.activeElement;
@@ -5406,7 +5436,7 @@ var DropdownMenu = ({
     return () => {
       document.removeEventListener("keydown", handleKeyNav);
     };
-  }, [open, activeIndex]);
+  }, [open, activeIndex, setActiveIndex]);
   const handleItemClick = (itemOnClick) => {
     itemOnClick();
     if (closeOnSelect) {
@@ -5444,36 +5474,48 @@ var DropdownMenu = ({
       index
     );
   }) : children });
-  const enhancedTrigger = import_react11.default.cloneElement(trigger, {
-    ref: triggerRef,
-    "aria-haspopup": "menu",
-    "aria-expanded": open,
-    onKeyDown: (e) => {
-      if (disabled) return;
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setOpen(true);
-        requestAnimationFrame(() => itemsRef.current.find((el) => el && !el.disabled)?.focus());
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setOpen(true);
-        requestAnimationFrame(() => {
-          const enabled = itemsRef.current.filter((el) => el && !el.disabled);
-          enabled[enabled.length - 1]?.focus();
-        });
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        setOpen(false);
-      }
-      if (typeof trigger.props?.onKeyDown === "function") {
-        trigger.props.onKeyDown(e);
-      }
-    },
-    className: cn(
-      trigger.props?.className,
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-    )
-  });
+  const TriggerComponent = trigger.type;
+  const triggerProps = trigger.props;
+  const enhancedTrigger = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    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__ */ (0, import_jsx_runtime24.jsx)(
     Popover,
     {
@@ -5558,11 +5600,11 @@ var import_lucide_react13 = require("lucide-react");
 
 // src/components/Combobox.tsx
 var React22 = __toESM(require("react"), 1);
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_lucide_react12 = require("lucide-react");
 
 // src/components/OverlayScrollbarProvider.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_overlayscrollbars = require("overlayscrollbars");
 
 // src/utils/overlay-scrollbar-controller.ts
@@ -5728,7 +5770,7 @@ function createOverlayScrollbarController({
 
 // src/components/OverlayScrollbarProvider.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var OverlayScrollbarConfigContext = (0, import_react12.createContext)(DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR);
+var OverlayScrollbarConfigContext = (0, import_react13.createContext)(DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR);
 function OverlayScrollbarProvider({
   enabled = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.enabled,
   theme = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.theme,
@@ -5741,7 +5783,7 @@ function OverlayScrollbarProvider({
   selector,
   children
 } = {}) {
-  const value = (0, import_react12.useMemo)(
+  const value = (0, import_react13.useMemo)(
     () => resolveOverlayScrollbarBehavior({
       enabled,
       theme,
@@ -5758,15 +5800,15 @@ function OverlayScrollbarProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OverlayScrollbarConfigContext.Provider, { value, children: children ?? null });
 }
 function useOverlayScrollbarTarget(targetRef, options = {}) {
-  const inherited = (0, import_react12.useContext)(OverlayScrollbarConfigContext);
-  const resolved = (0, import_react12.useMemo)(
+  const inherited = (0, import_react13.useContext)(OverlayScrollbarConfigContext);
+  const resolved = (0, import_react13.useMemo)(
     () => resolveOverlayScrollbarBehavior({
       ...inherited,
       ...options
     }),
     [inherited, options]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (typeof window === "undefined") return;
     const target = targetRef.current;
     if (!target) return;
@@ -5841,7 +5883,7 @@ var Combobox = ({
   const inputRef = React22.useRef(null);
   const optionsViewportRef = React22.useRef(null);
   useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = (0, import_react13.useId)();
+  const autoId = (0, import_react14.useId)();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const enableSearch = options.length > 10;
@@ -6526,7 +6568,7 @@ var CompactPagination = ({ page, totalPages, onChange, className, disabled = fal
 };
 
 // src/components/Section.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var gradientDirectionMap = {
   "to-r": "to right",
@@ -6559,7 +6601,7 @@ var variantClasses = {
   accent: "bg-accent/10",
   gradient: ""
 };
-var Section = import_react14.default.forwardRef(
+var Section = import_react15.default.forwardRef(
   ({
     children,
     className,
@@ -6599,7 +6641,7 @@ Section.displayName = "Section";
 var Section_default = Section;
 
 // src/components/ScrollArea.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var variantClasses2 = {
   default: "bg-background",
@@ -6607,9 +6649,9 @@ var variantClasses2 = {
   primary: "bg-primary/5",
   accent: "bg-accent/10"
 };
-var ScrollArea = (0, import_react15.forwardRef)(
+var ScrollArea = (0, import_react16.forwardRef)(
   ({ className, contentClassName, children, variant = "default", outlined = false, useOverlayScrollbar = false, ...props }, ref) => {
-    const viewportRef = (0, import_react15.useRef)(null);
+    const viewportRef = (0, import_react16.useRef)(null);
     useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
@@ -6630,11 +6672,11 @@ var ScrollArea = (0, import_react15.forwardRef)(
 ScrollArea.displayName = "ScrollArea";
 
 // src/components/OverlayScrollArea.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var OverlayScrollArea = (0, import_react16.forwardRef)(
+var OverlayScrollArea = (0, import_react17.forwardRef)(
   ({ className, viewportClassName, viewportProps, enabled = true, overlayScrollbarOptions, children, ...props }, ref) => {
-    const viewportRef = (0, import_react16.useRef)(null);
+    const viewportRef = (0, import_react17.useRef)(null);
     useOverlayScrollbarTarget(viewportRef, {
       enabled,
       ...overlayScrollbarOptions
@@ -6869,7 +6911,7 @@ function formatDateSmart(date, locale = "en") {
 // src/components/DatePicker.tsx
 var import_lucide_react14 = require("lucide-react");
 var React26 = __toESM(require("react"), 1);
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var DatePicker = ({
   id,
@@ -7268,7 +7310,7 @@ var DatePicker = ({
       )
     ] })
   ] });
-  const autoId = (0, import_react17.useId)();
+  const autoId = (0, import_react18.useId)();
   const resolvedId = id ? String(id) : `datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = sizeStyles8[size].label;
@@ -7955,10 +7997,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;
@@ -9395,10 +9435,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;
@@ -13458,7 +13496,7 @@ function CalendarTimeline({
 
 // src/components/MultiCombobox.tsx
 var React37 = __toESM(require("react"), 1);
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_lucide_react23 = require("lucide-react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var MultiCombobox = ({
@@ -13587,7 +13625,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 = (0, import_react18.useId)();
+  const autoId = (0, import_react19.useId)();
   const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
@@ -14215,6 +14253,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__ */ (0, import_jsx_runtime44.jsxs)(
+    "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__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-4 border-transparent border-t-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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,
@@ -14304,6 +14372,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();
@@ -14377,32 +14446,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__ */ (0, import_jsx_runtime44.jsxs)(
-        "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__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-4 border-transparent border-t-border" }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("w-full space-y-2", containerClassName), children: [
       (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between", children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
@@ -14435,10 +14478,37 @@ var Slider = React39.forwardRef(
                 style: { width: `${percentage}%` }
               }
             ) }),
-            !isRange && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Tooltip2, { value: currentValue, position: percentage }),
+            !isRange && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              SliderTooltip,
+              {
+                displayValue: formatValue ? formatValue(currentValue) : currentValue.toString(),
+                position: percentage,
+                visible: tooltipVisible,
+                sizeClassName: sizeStyles8.tooltip,
+                tooltipClassName
+              }
+            ),
             isRange && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Tooltip2, { value: normalizedRange[0], position: rangeStartPct }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Tooltip2, { value: normalizedRange[1], position: rangeEndPct })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                SliderTooltip,
+                {
+                  displayValue: formatValue ? formatValue(normalizedRange[0]) : normalizedRange[0].toString(),
+                  position: rangeStartPct,
+                  visible: tooltipVisible,
+                  sizeClassName: sizeStyles8.tooltip,
+                  tooltipClassName
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                SliderTooltip,
+                {
+                  displayValue: formatValue ? formatValue(normalizedRange[1]) : normalizedRange[1].toString(),
+                  position: rangeEndPct,
+                  visible: tooltipVisible,
+                  sizeClassName: sizeStyles8.tooltip,
+                  tooltipClassName
+                }
+              )
             ] }),
             (() => {
               const baseInputClassName = cn(
@@ -14576,7 +14646,7 @@ Slider.displayName = "Slider";
 
 // src/components/OverlayControls.tsx
 var import_lucide_react24 = require("lucide-react");
-var import_react19 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function OverlayControls({
   mode,
@@ -14607,24 +14677,24 @@ function OverlayControls({
 }) {
   const hoverClasses = showOnHover ? "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto" : "opacity-100 pointer-events-auto";
   const showControlsBar = mode === "review";
-  const [rateOpen, setRateOpen] = import_react19.default.useState(false);
-  const rateWrapRef = import_react19.default.useRef(null);
-  const [controlsVisible, setControlsVisible] = import_react19.default.useState(true);
-  const hideTimerRef = import_react19.default.useRef(null);
-  const [previewData, setPreviewData] = import_react19.default.useState(null);
-  const sliderRef = import_react19.default.useRef(null);
-  const [isDragging, setIsDragging] = import_react19.default.useState(false);
-  const [dragValue, setDragValue] = import_react19.default.useState(value);
-  import_react19.default.useEffect(() => {
+  const [rateOpen, setRateOpen] = import_react20.default.useState(false);
+  const rateWrapRef = import_react20.default.useRef(null);
+  const [controlsVisible, setControlsVisible] = import_react20.default.useState(true);
+  const hideTimerRef = import_react20.default.useRef(null);
+  const [previewData, setPreviewData] = import_react20.default.useState(null);
+  const sliderRef = import_react20.default.useRef(null);
+  const [isDragging, setIsDragging] = import_react20.default.useState(false);
+  const [dragValue, setDragValue] = import_react20.default.useState(value);
+  import_react20.default.useEffect(() => {
     if (!isDragging) {
       setDragValue(value);
     }
   }, [value, isDragging]);
-  const [keyboardFeedback, setKeyboardFeedback] = import_react19.default.useState(null);
-  const feedbackTimerRef = import_react19.default.useRef(null);
-  const seekAccumulatorRef = import_react19.default.useRef(0);
-  const seekAccumulatorTimerRef = import_react19.default.useRef(null);
-  import_react19.default.useEffect(() => {
+  const [keyboardFeedback, setKeyboardFeedback] = import_react20.default.useState(null);
+  const feedbackTimerRef = import_react20.default.useRef(null);
+  const seekAccumulatorRef = import_react20.default.useRef(0);
+  const seekAccumulatorTimerRef = import_react20.default.useRef(null);
+  import_react20.default.useEffect(() => {
     const onDocDown = (e) => {
       if (!rateOpen) return;
       const wrap = rateWrapRef.current;
@@ -14635,7 +14705,7 @@ function OverlayControls({
     document.addEventListener("mousedown", onDocDown);
     return () => document.removeEventListener("mousedown", onDocDown);
   }, [rateOpen]);
-  import_react19.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     if (!autoHide || showOnHover) return;
     const resetTimer = () => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
@@ -14658,14 +14728,14 @@ function OverlayControls({
       document.removeEventListener("mousemove", handleMouseMove);
     };
   }, [autoHide, autoHideDelay, showOnHover]);
-  const showFeedback = import_react19.default.useCallback((type, value2) => {
+  const showFeedback = import_react20.default.useCallback((type, value2) => {
     if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
     setKeyboardFeedback({ type, value: value2 });
     feedbackTimerRef.current = setTimeout(() => {
       setKeyboardFeedback(null);
     }, 800);
   }, []);
-  const accumulateSeek = import_react19.default.useCallback((seconds) => {
+  const accumulateSeek = import_react20.default.useCallback((seconds) => {
     if (seekAccumulatorTimerRef.current) clearTimeout(seekAccumulatorTimerRef.current);
     seekAccumulatorRef.current += seconds;
     showFeedback("seek", seekAccumulatorRef.current);
@@ -14673,7 +14743,7 @@ function OverlayControls({
       seekAccumulatorRef.current = 0;
     }, 1e3);
   }, [showFeedback]);
-  import_react19.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     if (!enableKeyboardShortcuts) return;
     const handleKeyDown = (e) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
@@ -15011,7 +15081,7 @@ function OverlayControls({
 }
 
 // src/components/CategoryTreeSelect.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_lucide_react25 = require("lucide-react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var defaultLabels = {
@@ -15020,6 +15090,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,
@@ -15044,25 +15124,25 @@ function CategoryTreeSelect(props) {
     useOverlayScrollbar = false,
     singleSelect = false
   } = props;
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const [expandedNodes, setExpandedNodes] = (0, import_react20.useState)(/* @__PURE__ */ new Set());
-  const [query, setQuery] = (0, import_react20.useState)("");
-  const searchInputRef = (0, import_react20.useRef)(null);
-  const dropdownViewportRef = (0, import_react20.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const [expandedNodes, setExpandedNodes] = (0, import_react21.useState)(() => getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline));
+  const [query, setQuery] = (0, import_react21.useState)("");
+  const searchInputRef = (0, import_react21.useRef)(null);
+  const dropdownViewportRef = (0, import_react21.useRef)(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = (0, import_react20.useId)();
+  const autoId = (0, import_react21.useId)();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const helperId = helperText && !error ? `${resolvedId}-helper` : void 0;
   const errorId = error ? `${resolvedId}-error` : void 0;
   const describedBy = errorId || helperId;
   const mergedLabels = { ...defaultLabels, ...labels };
-  const valueArray = (0, import_react20.useMemo)(
+  const valueArray = (0, import_react21.useMemo)(
     () => singleSelect ? props.value != null ? [props.value] : [] : props.value ?? [],
     [props.value, singleSelect]
   );
-  const selectedIds = (0, import_react20.useMemo)(() => new Set(valueArray), [valueArray]);
-  const { parentCategories, childrenMap, byId } = (0, import_react20.useMemo)(() => {
+  const selectedIds = (0, import_react21.useMemo)(() => new Set(valueArray), [valueArray]);
+  const { parentCategories, childrenMap, byId } = (0, import_react21.useMemo)(() => {
     const byId2 = /* @__PURE__ */ new Map();
     const childrenMap2 = /* @__PURE__ */ new Map();
     const parentCategories2 = [];
@@ -15077,10 +15157,10 @@ function CategoryTreeSelect(props) {
     }
     return { parentCategories: parentCategories2, childrenMap: childrenMap2, byId: byId2 };
   }, [categories]);
-  const isSearchEnabled = (0, import_react20.useMemo)(() => enableSearch ?? categories.length > 10, [enableSearch, categories.length]);
-  const normalizedQuery = (0, import_react20.useMemo)(() => query.trim().toLowerCase(), [query]);
+  const isSearchEnabled = (0, import_react21.useMemo)(() => enableSearch ?? categories.length > 10, [enableSearch, categories.length]);
+  const normalizedQuery = (0, import_react21.useMemo)(() => query.trim().toLowerCase(), [query]);
   const isSearchMode = isSearchEnabled && normalizedQuery.length > 0;
-  const visibleIds = (0, import_react20.useMemo)(() => {
+  const visibleIds = (0, import_react21.useMemo)(() => {
     if (!isSearchMode) return null;
     const matches = categories.filter((c) => c.name.toLowerCase().includes(normalizedQuery));
     if (matches.length === 0) return /* @__PURE__ */ new Set();
@@ -15119,21 +15199,12 @@ function CategoryTreeSelect(props) {
     }
     return visible;
   }, [byId, categories, childrenMap, isSearchMode, normalizedQuery]);
-  (0, import_react20.useEffect)(() => {
-    if (!isOpen) setQuery("");
-  }, [isOpen]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!isOpen) return;
     if (!isSearchEnabled) return;
     const t = setTimeout(() => searchInputRef.current?.focus(), 50);
     return () => clearTimeout(t);
   }, [isOpen, isSearchEnabled]);
-  (0, import_react20.useEffect)(() => {
-    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);
@@ -15157,7 +15228,7 @@ function CategoryTreeSelect(props) {
         onChange(categoryId);
       }
       if (!inline) {
-        setIsOpen(false);
+        handleOpenChange(false);
       }
     } else {
       const onChange = props.onChange;
@@ -15291,21 +15362,20 @@ function CategoryTreeSelect(props) {
       )
     ] }) });
   };
-  const effectiveParentCategories = (0, import_react20.useMemo)(() => {
+  const effectiveParentCategories = (0, import_react21.useMemo)(() => {
     if (!isSearchMode) return parentCategories;
     return parentCategories.filter((c) => visibleIds?.has(c.id));
   }, [isSearchMode, parentCategories, visibleIds]);
-  const effectiveChildrenMap = (0, import_react20.useMemo)(() => {
-    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__ */ (0, import_jsx_runtime46.jsx)("div", { className: "space-y-0.5 overflow-x-hidden", children: effectiveParentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: isSearchMode ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.SearchX, { className: "w-6 h-6 text-muted-foreground/50" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm text-muted-foreground", children: isSearchMode ? mergedLabels.noResultsText : mergedLabels.emptyText })
@@ -15414,7 +15484,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) {
@@ -15447,7 +15523,7 @@ function CategoryTreeSelect(props) {
       Popover,
       {
         open: isOpen,
-        onOpenChange: setIsOpen,
+        onOpenChange: handleOpenChange,
         disabled,
         placement: "bottom-start",
         matchTriggerWidth: true,
@@ -15537,7 +15613,7 @@ function CategoryTreeSelect(props) {
 }
 
 // src/components/ImageUpload.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_lucide_react26 = require("lucide-react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function ImageUpload({
@@ -15555,10 +15631,10 @@ function ImageUpload({
   browseText,
   supportedFormatsText
 }) {
-  const [isDragging, setIsDragging] = (0, import_react21.useState)(false);
-  const [uploading, setUploading] = (0, import_react21.useState)(false);
-  const [uploadedImages, setUploadedImages] = (0, import_react21.useState)([]);
-  const fileInputRef = (0, import_react21.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
+  const [uploading, setUploading] = (0, import_react22.useState)(false);
+  const [uploadedImages, setUploadedImages] = (0, import_react22.useState)([]);
+  const fileInputRef = (0, import_react22.useRef)(null);
   const { addToast } = useToast();
   const t = useSmartTranslations("OCR.imageUpload");
   const previewSizes = {
@@ -15566,7 +15642,7 @@ function ImageUpload({
     md: "w-24 h-24",
     lg: "w-32 h-32"
   };
-  const handleDragOver = (0, import_react21.useCallback)(
+  const handleDragOver = (0, import_react22.useCallback)(
     (e) => {
       e.preventDefault();
       if (!disabled) {
@@ -15575,11 +15651,11 @@ function ImageUpload({
     },
     [disabled]
   );
-  const handleDragLeave = (0, import_react21.useCallback)((e) => {
+  const handleDragLeave = (0, import_react22.useCallback)((e) => {
     e.preventDefault();
     setIsDragging(false);
   }, []);
-  const handleFiles = (0, import_react21.useCallback)(
+  const handleFiles = (0, import_react22.useCallback)(
     async (files) => {
       if (files.length === 0) return;
       const validFiles = files.filter((file) => {
@@ -15646,7 +15722,7 @@ function ImageUpload({
     },
     [maxSize, addToast, onUpload]
   );
-  const handleDrop = (0, import_react21.useCallback)(
+  const handleDrop = (0, import_react22.useCallback)(
     (e) => {
       e.preventDefault();
       setIsDragging(false);
@@ -15656,7 +15732,7 @@ function ImageUpload({
     },
     [disabled, handleFiles]
   );
-  const handleFileSelect = (0, import_react21.useCallback)(
+  const handleFileSelect = (0, import_react22.useCallback)(
     (e) => {
       const files = Array.from(e.target.files || []);
       handleFiles(files);
@@ -15760,7 +15836,7 @@ function ImageUpload({
 
 // src/components/FileUpload.tsx
 var import_lucide_react27 = require("lucide-react");
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var formatFileSize = (bytes) => {
   if (bytes === 0) return "0 Bytes";
@@ -15867,12 +15943,12 @@ function FileUpload({
   allowPreview = true,
   initialFiles = []
 }) {
-  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
-  const [files, setFiles] = (0, import_react22.useState)(initialFiles);
-  const fileInputRef = (0, import_react22.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react23.useState)(false);
+  const [files, setFiles] = (0, import_react23.useState)(initialFiles);
+  const fileInputRef = (0, import_react23.useRef)(null);
   const { addToast } = useToast();
   const t = useSmartTranslations("FileUpload");
-  const sizeConfig = (0, import_react22.useMemo)(
+  const sizeConfig = (0, import_react23.useMemo)(
     () => ({
       sm: {
         padding: "p-4",
@@ -15905,7 +15981,7 @@ function FileUpload({
     []
   );
   const currentSize = sizeConfig[size];
-  const handleDragOver = (0, import_react22.useCallback)(
+  const handleDragOver = (0, import_react23.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -15915,12 +15991,12 @@ function FileUpload({
     },
     [disabled]
   );
-  const handleDragLeave = (0, import_react22.useCallback)((e) => {
+  const handleDragLeave = (0, import_react23.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const processFiles = (0, import_react22.useCallback)(
+  const processFiles = (0, import_react23.useCallback)(
     async (fileList) => {
       if (fileList.length === 0) return;
       const remainingSlots = maxFiles - files.length;
@@ -15993,7 +16069,7 @@ function FileUpload({
     },
     [files, maxFiles, maxSize, uploadHandler, onUpload, onChange, addToast, t]
   );
-  const handleDrop = (0, import_react22.useCallback)(
+  const handleDrop = (0, import_react23.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -16004,7 +16080,7 @@ function FileUpload({
     },
     [disabled, processFiles]
   );
-  const handleFileSelect = (0, import_react22.useCallback)(
+  const handleFileSelect = (0, import_react23.useCallback)(
     (e) => {
       const selectedFiles = Array.from(e.target.files || []);
       processFiles(selectedFiles);
@@ -16014,7 +16090,7 @@ function FileUpload({
     },
     [processFiles]
   );
-  const handleRemove = (0, import_react22.useCallback)(
+  const handleRemove = (0, import_react23.useCallback)(
     (fileId) => {
       setFiles((prev) => {
         const fileToRemove = prev.find((f) => f.id === fileId);
@@ -16032,7 +16108,7 @@ function FileUpload({
   const handleBrowseClick = () => {
     fileInputRef.current?.click();
   };
-  const handleRetry = (0, import_react22.useCallback)(
+  const handleRetry = (0, import_react23.useCallback)(
     (fileEntry) => {
       if (!uploadHandler || !fileEntry.file) return;
       processFiles([fileEntry.file]);
@@ -16558,7 +16634,7 @@ function Carousel({
 }
 
 // src/components/FallingIcons.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var DEFAULT_COUNT = 24;
 var DEFAULT_SPEED_RANGE = [6, 14];
@@ -16586,10 +16662,10 @@ function FallingIcons({
   physics,
   easingFunction = "linear"
 }) {
-  const uid = import_react23.default.useId().replace(/[:]/g, "");
-  const containerRef = import_react23.default.useRef(null);
-  const [fallDist, setFallDist] = import_react23.default.useState(null);
-  const idRef = import_react23.default.useRef(1);
+  const uid = import_react24.default.useId().replace(/[:]/g, "");
+  const containerRef = import_react24.default.useRef(null);
+  const [fallDist, setFallDist] = import_react24.default.useState(null);
+  const idRef = import_react24.default.useRef(1);
   const gravity = physics?.gravity ?? 1;
   const windDirection = physics?.windDirection ?? 0;
   const windStrength = physics?.windStrength ?? 0;
@@ -16603,7 +16679,7 @@ function FallingIcons({
     bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
     elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
   };
-  const makeParticle = import_react23.default.useCallback(() => {
+  const makeParticle = import_react24.default.useCallback(() => {
     const rnd = (min, max) => min + Math.random() * (max - min);
     return {
       leftPct: rnd(0, 100),
@@ -16617,12 +16693,12 @@ function FallingIcons({
       key: idRef.current++
     };
   }, [sizeRange, speedRange, horizontalDrift, gravity, windDirection, windStrength]);
-  const [particles, setParticles] = import_react23.default.useState([]);
-  import_react23.default.useEffect(() => {
+  const [particles, setParticles] = import_react24.default.useState([]);
+  import_react24.default.useEffect(() => {
     const arr = Array.from({ length: Math.max(0, count) }).map(() => makeParticle());
     setParticles(arr);
   }, [count, makeParticle]);
-  import_react23.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (fullScreen) {
       const measure2 = () => setFallDist(window.innerHeight + 200);
       measure2();
@@ -16647,14 +16723,14 @@ function FallingIcons({
   const SpinName = `uv-spin-${uid}`;
   const PopName = `uv-pop-${uid}`;
   const PhysicsSpinName = `uv-physics-spin-${uid}`;
-  const glowStyles = import_react23.default.useMemo(() => {
+  const glowStyles = import_react24.default.useMemo(() => {
     if (!glow) return {};
     const intensity = Math.max(0, Math.min(1, glowIntensity));
     return {
       filter: `drop-shadow(0 0 ${4 * intensity}px ${glowColor}) drop-shadow(0 0 ${8 * intensity}px ${glowColor})`
     };
   }, [glow, glowColor, glowIntensity]);
-  const FallbackIcon = import_react23.default.useMemo(
+  const FallbackIcon = import_react24.default.useMemo(
     () => function FallingIconsFallbackIcon(props) {
       return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "12", cy: "12", r: "10" }) });
     },
@@ -16716,7 +16792,7 @@ function FallingIcons({
             });
           };
           const trailParticles = trail ? Array.from({ length: Math.min(5, Math.max(1, trailLength)) }) : [];
-          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react23.default.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react24.default.Fragment, { children: [
             trail && trailParticles.map((_, trailIndex) => {
               const trailDelay = p.delay - (trailIndex + 1) * 0.15;
               const trailOpacity = 1 - (trailIndex + 1) * (1 / (trailParticles.length + 1));
@@ -18123,7 +18199,7 @@ function ColorPicker({
 }
 
 // src/components/MusicPlayer.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_lucide_react32 = require("lucide-react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var DEFAULT_PLAYLIST = [
@@ -18244,21 +18320,21 @@ var MusicPlayer = ({
   showPlaylist: initialShowPlaylist = true,
   className = ""
 }) => {
-  const [currentSongIndex, setCurrentSongIndex] = (0, import_react24.useState)(0);
-  const [isPlaying, setIsPlaying] = (0, import_react24.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react24.useState)(0);
-  const [duration, setDuration] = (0, import_react24.useState)(0);
-  const [volume, setVolume] = (0, import_react24.useState)(1);
-  const [isMuted, setIsMuted] = (0, import_react24.useState)(false);
-  const [showPlaylist, setShowPlaylist] = (0, import_react24.useState)(initialShowPlaylist);
-  const audioRef = (0, import_react24.useRef)(null);
+  const [currentSongIndex, setCurrentSongIndex] = (0, import_react25.useState)(0);
+  const [isPlaying, setIsPlaying] = (0, import_react25.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react25.useState)(0);
+  const [duration, setDuration] = (0, import_react25.useState)(0);
+  const [volume, setVolume] = (0, import_react25.useState)(1);
+  const [isMuted, setIsMuted] = (0, import_react25.useState)(false);
+  const [showPlaylist, setShowPlaylist] = (0, import_react25.useState)(initialShowPlaylist);
+  const audioRef = (0, import_react25.useRef)(null);
   const currentSong = playlist[currentSongIndex];
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (audioRef.current) {
       audioRef.current.volume = volume;
     }
   }, [volume]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (autoPlay && audioRef.current) {
       audioRef.current.play().catch(() => {
         setIsPlaying(false);
@@ -18334,7 +18410,7 @@ var MusicPlayer = ({
     setCurrentSongIndex(index);
     setIsPlaying(true);
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (audioRef.current) {
       if (currentSong.startTime !== void 0) {
         audioRef.current.currentTime = currentSong.startTime;
@@ -18476,7 +18552,7 @@ var MusicPlayer = ({
 var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var BP_MIN = {
   sm: 640,
@@ -18516,7 +18592,7 @@ function getVariantClasses(variant = "default", outlined) {
   };
   return variants[variant] || "";
 }
-var GridRoot = import_react25.default.forwardRef(
+var GridRoot = import_react26.default.forwardRef(
   ({
     columns,
     rows,
@@ -18541,7 +18617,7 @@ var GridRoot = import_react25.default.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const id = (0, import_react25.useId)().replace(/[:]/g, "");
+    const id = (0, import_react26.useId)().replace(/[:]/g, "");
     const baseClass = `uv-grid-${id}`;
     const baseCols = toTemplateCols(columns, minColumnWidth);
     const baseRows = toTemplateRows(rows);
@@ -18600,7 +18676,7 @@ var GridRoot = import_react25.default.forwardRef(
   }
 );
 GridRoot.displayName = "Grid";
-var GridItem = import_react25.default.forwardRef(
+var GridItem = import_react26.default.forwardRef(
   ({
     colSpan,
     rowSpan,
@@ -18664,13 +18740,9 @@ var Grid = Object.assign(GridRoot, { Item: GridItem });
 var Grid_default = Grid;
 
 // src/components/ClientOnly.tsx
-var import_react26 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function ClientOnly({ children, fallback = null }) {
-  const [hasMounted, setHasMounted] = (0, import_react26.useState)(false);
-  (0, import_react26.useEffect)(() => {
-    setHasMounted(true);
-  }, []);
+  const hasMounted = useHydrated();
   if (!hasMounted) {
     return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children: fallback });
   }
@@ -18773,7 +18845,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;
@@ -18790,7 +18862,7 @@ var TableContainer = import_react27.default.forwardRef(({ className, useOverlayS
     {
       ref: (node) => {
         containerRef.current = node;
-        assignRef3(ref, node);
+        assignRef(ref, node);
       },
       className: cn(TABLE_CONTAINER_BASE_CLASS, className),
       ...props
@@ -19542,39 +19614,40 @@ var import_react34 = __toESM(require("react"), 1);
 
 // src/components/DataTable/hooks/usePageSizeStorage.ts
 var import_react33 = __toESM(require("react"), 1);
+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 = import_react33.default.useRef(false);
-  const [curPageSize, setCurPageSize] = import_react33.default.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 = import_react33.default.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
+  const [overrideState, setOverrideState] = import_react33.default.useState({
+    storageKey,
+    pageSize: null
   });
-  const hasMounted = import_react33.default.useRef(false);
-  import_react33.default.useEffect(() => {
-    hasMounted.current = true;
-  }, []);
-  import_react33.default.useEffect(() => {
-    if (typeof window === "undefined" || !storageKey) return;
-    if (!hasMounted.current) return;
-    try {
-      localStorage.setItem(`datatable_${storageKey}_pageSize`, String(curPageSize));
-    } catch {
-    }
-  }, [curPageSize, storageKey]);
-  import_react33.default.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 = import_react33.default.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 };
 }
 
@@ -20247,16 +20320,15 @@ function ThemeToggleHeadless({
   className
 }) {
   const [isOpen, setIsOpen] = (0, import_react37.useState)(false);
-  const [mounted, setMounted] = (0, import_react37.useState)(false);
+  const isHydrated = useHydrated();
   const triggerRef = (0, import_react37.useRef)(null);
   const [dropdownPosition, setDropdownPosition] = (0, import_react37.useState)(null);
-  (0, import_react37.useEffect)(() => setMounted(true), []);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react37.Sun },
     { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react37.Moon },
     { value: "system", label: labels?.system ?? "System", icon: import_lucide_react37.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();
@@ -20931,7 +21003,7 @@ var import_lowlight = require("lowlight");
 var import_core = require("@tiptap/core");
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
 var import_react39 = require("@tiptap/react");
-var import_react40 = require("react");
+var import_react40 = __toESM(require("react"), 1);
 var import_lucide_react39 = require("lucide-react");
 var import_tippy = __toESM(require("tippy.js"), 1);
 var import_jsx_runtime71 = require("react/jsx-runtime");
@@ -20961,12 +21033,23 @@ var DEFAULT_MESSAGES = {
   table: "Table",
   tableDesc: "Insert a table"
 };
+function useResettingIndex2(resetToken) {
+  const [state, setState] = import_react40.default.useState({ resetToken, index: 0 });
+  const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
+  const setSelectedIndex = import_react40.default.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 = (0, import_react40.forwardRef)((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = (0, import_react40.useState)(0);
+  const [selectedIndex, setSelectedIndex] = useResettingIndex2(props.items);
   const listRef = (0, import_react40.useRef)(null);
-  (0, import_react40.useEffect)(() => {
-    setSelectedIndex(0);
-  }, [props.items]);
   (0, import_react40.useEffect)(() => {
     const selectedElement = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
@@ -21292,7 +21375,7 @@ var import_core3 = require("@tiptap/core");
 var import_suggestion2 = __toESM(require("@tiptap/suggestion"), 1);
 var import_react41 = require("@tiptap/react");
 var import_state2 = require("@tiptap/pm/state");
-var import_react42 = require("react");
+var import_react42 = __toESM(require("react"), 1);
 var import_lucide_react40 = require("lucide-react");
 var import_tippy2 = __toESM(require("tippy.js"), 1);
 
@@ -22063,11 +22146,22 @@ var EMOJI_LIST = [
 
 // src/components/UEditor/emoji-suggestion.tsx
 var import_jsx_runtime72 = require("react/jsx-runtime");
+function useResettingIndex3(resetToken) {
+  const [state, setState] = import_react42.default.useState({ resetToken, index: 0 });
+  const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
+  const setSelectedIndex = import_react42.default.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 = (0, import_react42.forwardRef)((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = (0, import_react42.useState)(0);
-  (0, import_react42.useEffect)(() => {
-    setSelectedIndex(0);
-  }, [props.items]);
+  const [selectedIndex, setSelectedIndex] = useResettingIndex3(props.items);
   (0, import_react42.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -23481,13 +23575,27 @@ var EditorToolbar = ({
 };
 
 // src/components/UEditor/menus.tsx
-var import_react49 = require("react");
+var import_react49 = __toESM(require("react"), 1);
 var import_react_dom8 = require("react-dom");
 var import_lucide_react45 = require("lucide-react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
+function useResettingIndex4(resetToken) {
+  const [state, setState] = import_react49.default.useState({ resetToken, index: 0 });
+  const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
+  const setSelectedIndex = import_react49.default.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] = (0, import_react49.useState)(0);
+  const [selectedIndex, setSelectedIndex] = useResettingIndex4(filterText);
   const menuRef = (0, import_react49.useRef)(null);
   const allCommands = (0, import_react49.useMemo)(
     () => [
@@ -23565,13 +23673,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]);
-  (0, import_react49.useEffect)(() => {
-    setSelectedIndex(0);
-  }, [filterText]);
   (0, import_react49.useEffect)(() => {
     const selectedElement = menuRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
-  }, [selectedIndex]);
+  }, [commands, selectedIndex, setSelectedIndex]);
   const selectCommand = (0, import_react49.useCallback)(
     (index) => {
       const command = commands[index];
@@ -23601,7 +23706,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__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
   }