@underverse-ui/underverse 1.0.26 → 1.0.28

package/dist/index.cjs

@@ -107,6 +107,7 @@ __export(index_exports, {
   NotificationModal: () => NotificationModal_default,
   NumberInput: () => NumberInput,
   OverlayControls: () => OverlayControls,
+  OverlayScrollbarProvider: () => OverlayScrollbarProvider,
   PageLoading: () => PageLoading,
   Pagination: () => Pagination,
   PasswordInput: () => PasswordInput,
@@ -421,7 +422,7 @@ var Badge = ({
     onRemove?.();
   };
   const baseClasses = cn(
-    "inline-flex items-center border transition-all duration-200",
+    "inline-flex items-center rounded-md border transition-all duration-200 tracking-wide",
     "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1",
     variantStyles[variant],
     clickable && clickableVariantStyles[variant],
@@ -468,7 +469,7 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: cn(baseClasses, "rounded-full gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: cn(baseClasses, "gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
     Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Icon,
       {
@@ -19014,10 +19015,106 @@ var LoadingBar = ({
   );
 };
 
+// ../../components/ui/OverlayScrollbarProvider.tsx
+var import_react33 = require("react");
+var import_overlayscrollbars = require("overlayscrollbars");
+var SCROLLABLE_SELECTOR = [
+  ".overflow-auto",
+  ".overflow-x-auto",
+  ".overflow-y-auto",
+  ".overflow-scroll",
+  ".overflow-x-scroll",
+  ".overflow-y-scroll",
+  ".thin-scrollbar",
+  ".scrollbar-thin",
+  ".custom-scrollbar"
+].join(", ");
+var SCROLLBAR_OPTIONS = {
+  scrollbars: {
+    theme: "os-theme-underverse",
+    visibility: "auto",
+    autoHide: "leave",
+    autoHideDelay: 600,
+    dragScroll: true,
+    clickScroll: false
+  }
+};
+function OverlayScrollbarProvider() {
+  (0, import_react33.useEffect)(() => {
+    const bodyInstance = (0, import_overlayscrollbars.OverlayScrollbars)(document.body, SCROLLBAR_OPTIONS);
+    const instances = /* @__PURE__ */ new Map();
+    const shouldSkip = (element) => {
+      if (element === document.body) return true;
+      if (element.classList.contains("scrollbar-none")) return true;
+      if (element.hasAttribute("data-overlayscrollbars")) return true;
+      return false;
+    };
+    const initElement = (element) => {
+      if (shouldSkip(element)) return;
+      if (instances.has(element)) return;
+      instances.set(element, (0, import_overlayscrollbars.OverlayScrollbars)(element, SCROLLBAR_OPTIONS));
+    };
+    const collectCandidates = (root) => {
+      const candidates = [];
+      if (root instanceof HTMLElement && root.matches(SCROLLABLE_SELECTOR)) {
+        candidates.push(root);
+      }
+      if ("querySelectorAll" in root) {
+        root.querySelectorAll(SCROLLABLE_SELECTOR).forEach((element) => {
+          candidates.push(element);
+        });
+      }
+      return candidates.filter((element, index) => candidates.indexOf(element) === index);
+    };
+    const scan = (root) => {
+      const candidates = collectCandidates(root).filter((element) => !shouldSkip(element));
+      const leafCandidates = candidates.filter((element) => !candidates.some((other) => other !== element && element.contains(other)));
+      leafCandidates.forEach(initElement);
+    };
+    const cleanup = () => {
+      instances.forEach((instance, element) => {
+        if (!element.isConnected) {
+          instance.destroy();
+          instances.delete(element);
+        }
+      });
+    };
+    scan(document.body);
+    let rafId = 0;
+    const observer = new MutationObserver((mutations) => {
+      if (rafId) return;
+      rafId = window.requestAnimationFrame(() => {
+        rafId = 0;
+        const scanRoots = /* @__PURE__ */ new Set();
+        mutations.forEach((mutation) => {
+          if (mutation.target instanceof Element || mutation.target instanceof Document || mutation.target instanceof DocumentFragment) {
+            scanRoots.add(mutation.target);
+          }
+          mutation.addedNodes.forEach((node) => {
+            if (node instanceof HTMLElement) {
+              scanRoots.add(node);
+            }
+          });
+        });
+        scanRoots.forEach(scan);
+        cleanup();
+      });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      if (rafId) window.cancelAnimationFrame(rafId);
+      observer.disconnect();
+      instances.forEach((instance) => instance.destroy());
+      bodyInstance.destroy();
+    };
+  }, []);
+  return null;
+}
+
 // ../../components/ui/Table.tsx
-var import_react33 = __toESM(require("react"), 1);
+var import_react34 = __toESM(require("react"), 1);
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var Table = import_react33.default.forwardRef(({ className, containerClassName, disableContainer = false, ...props }, ref) => {
+var Table = import_react34.default.forwardRef(({ className, containerClassName, disableContainer = false, ...props }, ref) => {
   if (disableContainer) {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props });
   }
@@ -19036,16 +19133,16 @@ var Table = import_react33.default.forwardRef(({ className, containerClassName,
   );
 });
 Table.displayName = "Table";
-var TableHeader = import_react33.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted", className), ...props, children: [
+var TableHeader = import_react34.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted", className), ...props, children: [
   children,
   filterRow
 ] }));
 TableHeader.displayName = "TableHeader";
-var TableBody = import_react33.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+var TableBody = import_react34.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = import_react33.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
+var TableFooter = import_react34.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
 TableFooter.displayName = "TableFooter";
-var TableRow = import_react33.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var TableRow = import_react34.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   "tr",
   {
     ref,
@@ -19059,7 +19156,7 @@ var TableRow = import_react33.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = import_react33.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var TableHead = import_react34.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   "th",
   {
     ref,
@@ -19068,14 +19165,14 @@ var TableHead = import_react33.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = import_react33.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
+var TableCell = import_react34.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
 TableCell.displayName = "TableCell";
-var TableCaption = import_react33.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+var TableCaption = import_react34.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
 TableCaption.displayName = "TableCaption";
 
 // ../../components/ui/DataTable/DataTable.tsx
 var import_lucide_react34 = require("lucide-react");
-var import_react37 = __toESM(require("react"), 1);
+var import_react38 = __toESM(require("react"), 1);
 
 // ../../components/ui/DataTable/components/Pagination.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
@@ -19361,10 +19458,10 @@ function DataTableToolbar({
 }
 
 // ../../components/ui/DataTable/hooks/useDebounced.ts
-var import_react34 = __toESM(require("react"), 1);
+var import_react35 = __toESM(require("react"), 1);
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = import_react34.default.useState(value);
-  import_react34.default.useEffect(() => {
+  const [debounced, setDebounced] = import_react35.default.useState(value);
+  import_react35.default.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -19372,10 +19469,10 @@ function useDebounced(value, delay = 300) {
 }
 
 // ../../components/ui/DataTable/hooks/usePageSizeStorage.ts
-var import_react35 = __toESM(require("react"), 1);
+var import_react36 = __toESM(require("react"), 1);
 function usePageSizeStorage({ pageSize, storageKey }) {
-  const loadedFromStorage = import_react35.default.useRef(false);
-  const [curPageSize, setCurPageSize] = import_react35.default.useState(() => {
+  const loadedFromStorage = import_react36.default.useRef(false);
+  const [curPageSize, setCurPageSize] = import_react36.default.useState(() => {
     if (typeof window === "undefined" || !storageKey) return pageSize;
     try {
       const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
@@ -19390,11 +19487,11 @@ function usePageSizeStorage({ pageSize, storageKey }) {
     }
     return pageSize;
   });
-  const hasMounted = import_react35.default.useRef(false);
-  import_react35.default.useEffect(() => {
+  const hasMounted = import_react36.default.useRef(false);
+  import_react36.default.useEffect(() => {
     hasMounted.current = true;
   }, []);
-  import_react35.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     if (typeof window === "undefined" || !storageKey) return;
     if (!hasMounted.current) return;
     try {
@@ -19402,7 +19499,7 @@ function usePageSizeStorage({ pageSize, storageKey }) {
     } catch {
     }
   }, [curPageSize, storageKey]);
-  import_react35.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     if (storageKey && loadedFromStorage.current) return;
     setCurPageSize(pageSize);
   }, [pageSize, storageKey]);
@@ -19410,7 +19507,7 @@ function usePageSizeStorage({ pageSize, storageKey }) {
 }
 
 // ../../components/ui/DataTable/hooks/useStickyColumns.ts
-var import_react36 = __toESM(require("react"), 1);
+var import_react37 = __toESM(require("react"), 1);
 
 // ../../components/ui/DataTable/utils/columns.ts
 function getColumnWidth(col, fallback = 150) {
@@ -19428,9 +19525,9 @@ function getColumnWidth(col, fallback = 150) {
 
 // ../../components/ui/DataTable/hooks/useStickyColumns.ts
 function useStickyColumns(columns, visibleKeys) {
-  const visibleColumns = import_react36.default.useMemo(() => filterVisibleColumns(columns, visibleKeys), [columns, visibleKeys]);
-  const leafColumns = import_react36.default.useMemo(() => getLeafColumnsWithFixedInheritance(visibleColumns), [visibleColumns]);
-  const stickyPositions = import_react36.default.useMemo(() => {
+  const visibleColumns = import_react37.default.useMemo(() => filterVisibleColumns(columns, visibleKeys), [columns, visibleKeys]);
+  const leafColumns = import_react37.default.useMemo(() => getLeafColumnsWithFixedInheritance(visibleColumns), [visibleColumns]);
+  const stickyPositions = import_react37.default.useMemo(() => {
     const positions = {};
     let leftOffset = 0;
     for (const col of leafColumns) {
@@ -19449,7 +19546,7 @@ function useStickyColumns(columns, visibleKeys) {
     }
     return positions;
   }, [leafColumns]);
-  const { leftBoundaryKey, rightBoundaryKey } = import_react36.default.useMemo(() => {
+  const { leftBoundaryKey, rightBoundaryKey } = import_react37.default.useMemo(() => {
     const leftFixed = leafColumns.filter((c) => c.fixed === "left");
     const rightFixed = leafColumns.filter((c) => c.fixed === "right");
     return {
@@ -19457,7 +19554,7 @@ function useStickyColumns(columns, visibleKeys) {
       rightBoundaryKey: rightFixed.length > 0 ? rightFixed[0].key : null
     };
   }, [leafColumns]);
-  const getStickyColumnStyle = import_react36.default.useCallback(
+  const getStickyColumnStyle = import_react37.default.useCallback(
     (col) => {
       if (!col.fixed) return {};
       const pos = stickyPositions[col.key];
@@ -19468,7 +19565,7 @@ function useStickyColumns(columns, visibleKeys) {
     },
     [stickyPositions]
   );
-  const getBoundaryShadowClass = import_react36.default.useCallback(
+  const getBoundaryShadowClass = import_react37.default.useCallback(
     (col) => {
       if (col.fixed === "left" && col.key === leftBoundaryKey) {
         return "border-r border-border/80 shadow-[10px_0_16px_-10px_rgba(0,0,0,0.55)]";
@@ -19480,14 +19577,14 @@ function useStickyColumns(columns, visibleKeys) {
     },
     [leftBoundaryKey, rightBoundaryKey]
   );
-  const getStickyHeaderClass = import_react36.default.useCallback(
+  const getStickyHeaderClass = import_react37.default.useCallback(
     (col) => {
       if (!col.fixed) return "";
       return cn("sticky", col.fixed === "left" && "left-0", col.fixed === "right" && "right-0", getBoundaryShadowClass(col), "z-50 !bg-muted");
     },
     [getBoundaryShadowClass]
   );
-  const getStickyCellClass = import_react36.default.useCallback(
+  const getStickyCellClass = import_react37.default.useCallback(
     (col, isStripedRow) => {
       if (!col.fixed) return "";
       return cn(
@@ -19500,7 +19597,7 @@ function useStickyColumns(columns, visibleKeys) {
     },
     [getBoundaryShadowClass]
   );
-  const getStickyHeaderCellStyle = import_react36.default.useCallback(
+  const getStickyHeaderCellStyle = import_react37.default.useCallback(
     (headerCell) => {
       const col = headerCell.column;
       if (headerCell.isLeaf) {
@@ -19637,20 +19734,20 @@ function DataTable({
   labels
 }) {
   const t = useTranslations("Common");
-  const [headerAlign, setHeaderAlign] = import_react37.default.useState("left");
-  const [visibleCols, setVisibleCols] = import_react37.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
-  const [filters, setFilters] = import_react37.default.useState({});
-  const [sort, setSort] = import_react37.default.useState(null);
-  const [density, setDensity] = import_react37.default.useState(() => SIZE_TO_DENSITY[size]);
-  const [curPage, setCurPage] = import_react37.default.useState(page);
+  const [headerAlign, setHeaderAlign] = import_react38.default.useState("left");
+  const [visibleCols, setVisibleCols] = import_react38.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
+  const [filters, setFilters] = import_react38.default.useState({});
+  const [sort, setSort] = import_react38.default.useState(null);
+  const [density, setDensity] = import_react38.default.useState(() => SIZE_TO_DENSITY[size]);
+  const [curPage, setCurPage] = import_react38.default.useState(page);
   const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
-  import_react37.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     if (process.env.NODE_ENV === "development") {
       const warnings = validateColumns(columns);
       warnings.forEach((w) => console.warn(`[DataTable] ${w}`));
     }
   }, [columns]);
-  import_react37.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
     setVisibleCols((prev) => {
       const uniqueKeys = /* @__PURE__ */ new Set([...prev, ...newColKeys]);
@@ -19658,15 +19755,15 @@ function DataTable({
     });
   }, [columns]);
   const debouncedFilters = useDebounced(filters, 350);
-  import_react37.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     setCurPage(page);
   }, [page]);
-  import_react37.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     setDensity(SIZE_TO_DENSITY[size]);
   }, [size]);
   const isServerMode = Boolean(onQueryChange);
-  const hasEmittedQuery = import_react37.default.useRef(false);
-  import_react37.default.useEffect(() => {
+  const hasEmittedQuery = import_react38.default.useRef(false);
+  import_react38.default.useEffect(() => {
     if (!onQueryChange) return;
     if (!hasEmittedQuery.current) {
       hasEmittedQuery.current = true;
@@ -19679,14 +19776,14 @@ function DataTable({
   const headerTitleClass = size === "sm" ? "text-xs" : size === "lg" ? "text-[15px]" : "text-sm";
   const headerMinHeightClass = size === "sm" ? "min-h-9" : size === "lg" ? "min-h-11" : "min-h-10";
   const sortIconClass = size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-4 h-4" : "w-3.5 h-3.5";
-  const visibleColsSet = import_react37.default.useMemo(() => new Set(visibleCols), [visibleCols]);
-  const visibleColumns = import_react37.default.useMemo(() => {
+  const visibleColsSet = import_react38.default.useMemo(() => new Set(visibleCols), [visibleCols]);
+  const visibleColumns = import_react38.default.useMemo(() => {
     return filterVisibleColumns(columns, visibleColsSet);
   }, [columns, visibleColsSet]);
-  const leafColumns = import_react37.default.useMemo(() => {
+  const leafColumns = import_react38.default.useMemo(() => {
     return getLeafColumns(visibleColumns);
   }, [visibleColumns]);
-  const totalColumnsWidth = import_react37.default.useMemo(() => {
+  const totalColumnsWidth = import_react38.default.useMemo(() => {
     return leafColumns.reduce((sum, col) => sum + getColumnWidth(col), 0);
   }, [leafColumns]);
   const { getStickyCellClass, getStickyColumnStyle, getStickyHeaderClass, getStickyHeaderCellStyle } = useStickyColumns(
@@ -19749,7 +19846,7 @@ function DataTable({
     }
     return null;
   };
-  const headerRows = import_react37.default.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
+  const headerRows = import_react38.default.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
   const renderHeaderContent = (col, isLeaf) => {
     if (!isLeaf) {
       return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -19895,7 +19992,7 @@ function DataTable({
       col.key
     );
   }) }, `header-row-${rowIndex}`)) });
-  const processedData = import_react37.default.useMemo(() => {
+  const processedData = import_react38.default.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
     if (Object.keys(filters).length > 0) {
@@ -19927,7 +20024,7 @@ function DataTable({
     return result;
   }, [data, isServerMode, filters, sort, columns]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = import_react37.default.useMemo(() => {
+  const displayedData = import_react38.default.useMemo(() => {
     if (isServerMode) return data;
     const start = (curPage - 1) * curPageSize;
     return processedData.slice(start, start + curPageSize);
@@ -20366,7 +20463,7 @@ function AccessDenied({
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 var import_lucide_react38 = require("lucide-react");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_react_dom7 = require("react-dom");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
@@ -20375,11 +20472,11 @@ function ThemeToggleHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react38.useState)(false);
-  const [mounted, setMounted] = (0, import_react38.useState)(false);
-  const triggerRef = (0, import_react38.useRef)(null);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react38.useState)(null);
-  (0, import_react38.useEffect)(() => setMounted(true), []);
+  const [isOpen, setIsOpen] = (0, import_react39.useState)(false);
+  const [mounted, setMounted] = (0, import_react39.useState)(false);
+  const triggerRef = (0, import_react39.useRef)(null);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react39.useState)(null);
+  (0, import_react39.useEffect)(() => setMounted(true), []);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react38.Sun },
     { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react38.Moon },
@@ -20468,7 +20565,7 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react39 = require("lucide-react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
@@ -20479,9 +20576,9 @@ function LanguageSwitcherHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react39.useState)(false);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react39.useState)(null);
-  const triggerButtonRef = (0, import_react39.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react40.useState)(false);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react40.useState)(null);
+  const triggerButtonRef = (0, import_react40.useRef)(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -21480,9 +21577,9 @@ function useSmartLocale() {
 }
 
 // ../../components/ui/UEditor/UEditor.tsx
-var import_react51 = __toESM(require("react"), 1);
+var import_react52 = __toESM(require("react"), 1);
 var import_next_intl6 = require("next-intl");
-var import_react52 = require("@tiptap/react");
+var import_react53 = require("@tiptap/react");
 
 // ../../components/ui/UEditor/extensions.ts
 var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
@@ -21522,22 +21619,22 @@ var import_lowlight = require("lowlight");
 // ../../components/ui/UEditor/slash-command.tsx
 var import_core = require("@tiptap/core");
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
-var import_react40 = require("@tiptap/react");
-var import_react41 = require("react");
+var import_react41 = require("@tiptap/react");
+var import_react42 = require("react");
 var import_lucide_react40 = require("lucide-react");
 var import_tippy = __toESM(require("tippy.js"), 1);
 var import_jsx_runtime77 = require("react/jsx-runtime");
-var CommandList = (0, import_react41.forwardRef)((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = (0, import_react41.useState)(0);
-  const listRef = (0, import_react41.useRef)(null);
-  (0, import_react41.useEffect)(() => {
+var CommandList = (0, import_react42.forwardRef)((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react42.useState)(0);
+  const listRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(() => {
     setSelectedIndex(0);
   }, [props.items]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const selectedElement = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex, props.items]);
-  (0, import_react41.useImperativeHandle)(ref, () => ({
+  (0, import_react42.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
         setSelectedIndex((prev) => (prev + props.items.length - 1) % props.items.length);
@@ -21702,7 +21799,7 @@ var SlashCommand = import_core.Extension.create({
           let popup;
           return {
             onStart: (props) => {
-              component = new import_react40.ReactRenderer(CommandList, {
+              component = new import_react41.ReactRenderer(CommandList, {
                 props,
                 editor: props.editor
               });
@@ -21844,9 +21941,9 @@ var ClipboardImages = import_core2.Extension.create({
 // ../../components/ui/UEditor/emoji-suggestion.tsx
 var import_core3 = require("@tiptap/core");
 var import_suggestion2 = __toESM(require("@tiptap/suggestion"), 1);
-var import_react42 = require("@tiptap/react");
+var import_react43 = require("@tiptap/react");
 var import_state2 = require("@tiptap/pm/state");
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_lucide_react41 = require("lucide-react");
 var import_tippy2 = __toESM(require("tippy.js"), 1);
 
@@ -22617,12 +22714,12 @@ var EMOJI_LIST = [
 
 // ../../components/ui/UEditor/emoji-suggestion.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
-var EmojiList = (0, import_react43.forwardRef)((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = (0, import_react43.useState)(0);
-  (0, import_react43.useEffect)(() => {
+var EmojiList = (0, import_react44.forwardRef)((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react44.useState)(0);
+  (0, import_react44.useEffect)(() => {
     setSelectedIndex(0);
   }, [props.items]);
-  (0, import_react43.useImperativeHandle)(ref, () => ({
+  (0, import_react44.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
         setSelectedIndex((prev) => (prev + props.items.length - 1) % props.items.length);
@@ -22709,7 +22806,7 @@ var EmojiSuggestion = import_core3.Extension.create({
           let popup;
           return {
             onStart: (props) => {
-              component = new import_react42.ReactRenderer(EmojiList, {
+              component = new import_react43.ReactRenderer(EmojiList, {
                 props,
                 editor: props.editor
               });
@@ -22754,10 +22851,10 @@ var EmojiSuggestion = import_core3.Extension.create({
 });
 
 // ../../components/ui/UEditor/resizable-image.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
 var import_core4 = require("@tiptap/core");
-var import_react45 = require("@tiptap/react");
+var import_react46 = require("@tiptap/react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var MIN_IMAGE_SIZE_PX = 40;
 var AXIS_LOCK_THRESHOLD_PX = 4;
@@ -22774,15 +22871,15 @@ function clamp8(value, min, max) {
 }
 function ResizableImageNodeView(props) {
   const { node, selected, updateAttributes, editor, getPos } = props;
-  const wrapperRef = (0, import_react44.useRef)(null);
-  const imgRef = (0, import_react44.useRef)(null);
-  const [isHovered, setIsHovered] = (0, import_react44.useState)(false);
-  const [isResizing, setIsResizing] = (0, import_react44.useState)(false);
+  const wrapperRef = (0, import_react45.useRef)(null);
+  const imgRef = (0, import_react45.useRef)(null);
+  const [isHovered, setIsHovered] = (0, import_react45.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react45.useState)(false);
   const widthAttr = toNullableNumber(node.attrs["width"]);
   const heightAttr = toNullableNumber(node.attrs["height"]);
   const textAlign = String(node.attrs["textAlign"] ?? "");
-  const dragStateRef = (0, import_react44.useRef)(null);
-  (0, import_react44.useEffect)(() => {
+  const dragStateRef = (0, import_react45.useRef)(null);
+  (0, import_react45.useEffect)(() => {
     const img = imgRef.current;
     if (!img) return;
     img.style.width = widthAttr ? `${widthAttr}px` : "";
@@ -22877,7 +22974,7 @@ function ResizableImageNodeView(props) {
   const wrapperAlignClass = textAlign === "center" ? "mx-auto" : textAlign === "right" ? "ml-auto" : textAlign === "justify" ? "mx-auto" : "";
   const wrapperWidthClass = "w-fit";
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
-    import_react45.NodeViewWrapper,
+    import_react46.NodeViewWrapper,
     {
       as: "div",
       ref: wrapperRef,
@@ -22958,7 +23055,7 @@ var ResizableImage = import_extension_image.default.extend({
     return ["img", (0, import_core4.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes2)];
   },
   addNodeView() {
-    return (0, import_react45.ReactNodeViewRenderer)(ResizableImageNodeView);
+    return (0, import_react46.ReactNodeViewRenderer)(ResizableImageNodeView);
   }
 }).configure({
   allowBase64: true,
@@ -23075,18 +23172,18 @@ function buildUEditorExtensions({
 }
 
 // ../../components/ui/UEditor/toolbar.tsx
-var import_react49 = __toESM(require("react"), 1);
+var import_react50 = __toESM(require("react"), 1);
 var import_next_intl3 = require("next-intl");
 var import_lucide_react45 = require("lucide-react");
 
 // ../../components/ui/UEditor/colors.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_next_intl = require("next-intl");
 var import_lucide_react42 = require("lucide-react");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var useEditorColors = () => {
   const t = (0, import_next_intl.useTranslations)("UEditor");
-  const textColors = (0, import_react46.useMemo)(
+  const textColors = (0, import_react47.useMemo)(
     () => [
       { name: t("colors.default"), color: "inherit", cssClass: "text-foreground" },
       { name: t("colors.muted"), color: "var(--muted-foreground)", cssClass: "text-muted-foreground" },
@@ -23099,7 +23196,7 @@ var useEditorColors = () => {
     ],
     [t]
   );
-  const highlightColors = (0, import_react46.useMemo)(
+  const highlightColors = (0, import_react47.useMemo)(
     () => [
       { name: t("colors.default"), color: "", cssClass: "" },
       { name: t("colors.muted"), color: "var(--muted)", cssClass: "bg-muted" },
@@ -23144,7 +23241,7 @@ var EditorColorPalette = ({
 ] });
 
 // ../../components/ui/UEditor/inputs.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_next_intl2 = require("next-intl");
 var import_lucide_react43 = require("lucide-react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
@@ -23161,9 +23258,9 @@ var LinkInput = ({
   initialUrl = ""
 }) => {
   const t = (0, import_next_intl2.useTranslations)("UEditor");
-  const [url, setUrl] = (0, import_react47.useState)(initialUrl);
-  const inputRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useEffect)(() => {
+  const [url, setUrl] = (0, import_react48.useState)(initialUrl);
+  const inputRef = (0, import_react48.useRef)(null);
+  (0, import_react48.useEffect)(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, []);
@@ -23190,10 +23287,10 @@ var LinkInput = ({
 };
 var ImageInput = ({ onSubmit, onCancel }) => {
   const t = (0, import_next_intl2.useTranslations)("UEditor");
-  const [url, setUrl] = (0, import_react47.useState)("");
-  const [alt, setAlt] = (0, import_react47.useState)("");
-  const inputRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useEffect)(() => {
+  const [url, setUrl] = (0, import_react48.useState)("");
+  const [alt, setAlt] = (0, import_react48.useState)("");
+  const inputRef = (0, import_react48.useRef)(null);
+  (0, import_react48.useEffect)(() => {
     inputRef.current?.focus();
   }, []);
   const handleSubmit = (e) => {
@@ -23246,7 +23343,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
 };
 
 // ../../components/ui/UEditor/emoji-picker.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_lucide_react44 = require("lucide-react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var CATEGORY_ICONS = {
@@ -23259,12 +23356,12 @@ var CATEGORY_ICONS = {
   "flags": import_lucide_react44.Flag
 };
 var EmojiPicker = ({ onSelect, onClose }) => {
-  const [search, setSearch] = (0, import_react48.useState)("");
-  const [activeCategory, setActiveCategory] = (0, import_react48.useState)(EMOJI_LIST[0]?.id || "");
-  const scrollContainerRef = (0, import_react48.useRef)(null);
-  const categoryRefs = (0, import_react48.useRef)({});
-  const isUserScrolling = (0, import_react48.useRef)(false);
-  const filteredCategories = (0, import_react48.useMemo)(() => {
+  const [search, setSearch] = (0, import_react49.useState)("");
+  const [activeCategory, setActiveCategory] = (0, import_react49.useState)(EMOJI_LIST[0]?.id || "");
+  const scrollContainerRef = (0, import_react49.useRef)(null);
+  const categoryRefs = (0, import_react49.useRef)({});
+  const isUserScrolling = (0, import_react49.useRef)(false);
+  const filteredCategories = (0, import_react49.useMemo)(() => {
     if (!search.trim()) return EMOJI_LIST;
     const query = search.toLowerCase();
     return EMOJI_LIST.map((category) => ({
@@ -23278,7 +23375,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
     onSelect(emoji);
     setSearch("");
   };
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (search) return;
     const container = scrollContainerRef.current;
     if (!container) return;
@@ -23318,7 +23415,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
       isUserScrolling.current = true;
     }, 500);
   };
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     isUserScrolling.current = true;
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "w-96 bg-card border border-border rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-128", children: [
@@ -23437,7 +23534,7 @@ function fileToDataUrl2(file) {
     reader.readAsDataURL(file);
   });
 }
-var ToolbarButton = import_react49.default.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
+var ToolbarButton = import_react50.default.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
   const button = /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "button",
     {
@@ -23475,10 +23572,10 @@ var EditorToolbar = ({
 }) => {
   const t = (0, import_next_intl3.useTranslations)("UEditor");
   const { textColors, highlightColors } = useEditorColors();
-  const [showImageInput, setShowImageInput] = (0, import_react49.useState)(false);
-  const fileInputRef = (0, import_react49.useRef)(null);
-  const [isUploadingImage, setIsUploadingImage] = (0, import_react49.useState)(false);
-  const [imageUploadError, setImageUploadError] = (0, import_react49.useState)(null);
+  const [showImageInput, setShowImageInput] = (0, import_react50.useState)(false);
+  const fileInputRef = (0, import_react50.useRef)(null);
+  const [isUploadingImage, setIsUploadingImage] = (0, import_react50.useState)(false);
+  const [imageUploadError, setImageUploadError] = (0, import_react50.useState)(null);
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -23926,16 +24023,16 @@ var EditorToolbar = ({
 };
 
 // ../../components/ui/UEditor/menus.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_react_dom9 = require("react-dom");
 var import_next_intl4 = require("next-intl");
 var import_lucide_react46 = require("lucide-react");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
   const t = (0, import_next_intl4.useTranslations)("UEditor");
-  const [selectedIndex, setSelectedIndex] = (0, import_react50.useState)(0);
-  const menuRef = (0, import_react50.useRef)(null);
-  const allCommands = (0, import_react50.useMemo)(
+  const [selectedIndex, setSelectedIndex] = (0, import_react51.useState)(0);
+  const menuRef = (0, import_react51.useRef)(null);
+  const allCommands = (0, import_react51.useMemo)(
     () => [
       {
         icon: import_lucide_react46.Type,
@@ -24006,19 +24103,19 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     ],
     [editor, t]
   );
-  const commands = (0, import_react50.useMemo)(() => {
+  const commands = (0, import_react51.useMemo)(() => {
     if (!filterText) return allCommands;
     const lowerFilter = filterText.toLowerCase();
     return allCommands.filter((cmd) => cmd.label.toLowerCase().includes(lowerFilter) || cmd.description.toLowerCase().includes(lowerFilter));
   }, [allCommands, filterText]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     setSelectedIndex(0);
   }, [filterText]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const selectedElement = menuRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
-  const selectCommand = (0, import_react50.useCallback)(
+  const selectCommand = (0, import_react51.useCallback)(
     (index) => {
       const command = commands[index];
       if (command) {
@@ -24028,7 +24125,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     },
     [commands, onClose]
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (commands.length === 0) return;
       if (e.key === "ArrowDown") {
@@ -24088,7 +24185,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
 };
 var FloatingMenuContent = ({ editor }) => {
   const t = (0, import_next_intl4.useTranslations)("UEditor");
-  const [showCommands, setShowCommands] = (0, import_react50.useState)(false);
+  const [showCommands, setShowCommands] = (0, import_react51.useState)(false);
   if (showCommands) {
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(SlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
   }
@@ -24111,12 +24208,12 @@ var BubbleMenuContent = ({
 }) => {
   const t = (0, import_next_intl4.useTranslations)("UEditor");
   const { textColors, highlightColors } = useEditorColors();
-  const [showLinkInput, setShowLinkInput] = (0, import_react50.useState)(false);
-  const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react50.useState)(false);
-  (0, import_react50.useEffect)(() => {
+  const [showLinkInput, setShowLinkInput] = (0, import_react51.useState)(false);
+  const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react51.useState)(false);
+  (0, import_react51.useEffect)(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!showLinkInput) return;
     const close = () => setShowLinkInput(false);
     editor.on("selectionUpdate", close);
@@ -24239,15 +24336,15 @@ var BubbleMenuContent = ({
   ] });
 };
 var CustomBubbleMenu = ({ editor }) => {
-  const [isVisible, setIsVisible] = (0, import_react50.useState)(false);
-  const [position, setPosition] = (0, import_react50.useState)({ top: 0, left: 0 });
-  const menuRef = (0, import_react50.useRef)(null);
-  const keepOpenRef = (0, import_react50.useRef)(false);
-  const setKeepOpen = (0, import_react50.useCallback)((next) => {
+  const [isVisible, setIsVisible] = (0, import_react51.useState)(false);
+  const [position, setPosition] = (0, import_react51.useState)({ top: 0, left: 0 });
+  const menuRef = (0, import_react51.useRef)(null);
+  const keepOpenRef = (0, import_react51.useRef)(false);
+  const setKeepOpen = (0, import_react51.useCallback)((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const updatePosition = () => {
       const { state, view } = editor;
       const { from, to, empty } = state.selection;
@@ -24300,9 +24397,9 @@ var CustomBubbleMenu = ({ editor }) => {
   );
 };
 var CustomFloatingMenu = ({ editor }) => {
-  const [isVisible, setIsVisible] = (0, import_react50.useState)(false);
-  const [position, setPosition] = (0, import_react50.useState)({ top: 0, left: 0 });
-  (0, import_react50.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react51.useState)(false);
+  const [position, setPosition] = (0, import_react51.useState)({ top: 0, left: 0 });
+  (0, import_react51.useEffect)(() => {
     const updatePosition = () => {
       const { state, view } = editor;
       const { $from, empty } = state.selection;
@@ -24622,7 +24719,7 @@ async function prepareUEditorContentForSave({
 
 // ../../components/ui/UEditor/UEditor.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var UEditor = import_react51.default.forwardRef(({
+var UEditor = import_react52.default.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
@@ -24645,12 +24742,12 @@ var UEditor = import_react51.default.forwardRef(({
 }, ref) => {
   const t = (0, import_next_intl6.useTranslations)("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = (0, import_react51.useRef)(null);
-  const extensions = (0, import_react51.useMemo)(
+  const inFlightPrepareRef = (0, import_react52.useRef)(null);
+  const extensions = (0, import_react52.useMemo)(
     () => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable }),
     [effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable]
   );
-  const editor = (0, import_react52.useEditor)({
+  const editor = (0, import_react53.useEditor)({
     immediatelyRender: false,
     extensions,
     content,
@@ -24755,7 +24852,7 @@ var UEditor = import_react51.default.forwardRef(({
       onJsonChange?.(editor2.getJSON());
     }
   });
-  (0, import_react51.useImperativeHandle)(
+  (0, import_react52.useImperativeHandle)(
     ref,
     () => ({
       prepareContentForSave: async ({ throwOnError = false } = {}) => {
@@ -24777,7 +24874,7 @@ var UEditor = import_react51.default.forwardRef(({
     }),
     [content, editor, uploadImageForSave]
   );
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (editor && content !== editor.getHTML()) {
       if (editor.isEmpty && content) {
         editor.commands.setContent(content);
@@ -24810,7 +24907,7 @@ var UEditor = import_react51.default.forwardRef(({
         editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CustomBubbleMenu, { editor }),
         editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CustomFloatingMenu, { editor }),
         /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-          import_react52.EditorContent,
+          import_react53.EditorContent,
           {
             editor,
             className: "flex-1 overflow-y-auto",
@@ -24912,6 +25009,7 @@ function getUnderverseMessages(locale = "en") {
   NotificationModal,
   NumberInput,
   OverlayControls,
+  OverlayScrollbarProvider,
   PageLoading,
   Pagination,
   PasswordInput,