@underverse-ui/underverse 1.0.104 → 1.0.106

package/dist/index.js

@@ -6082,11 +6082,21 @@ var Sheet = ({
   closeOnEscape = true,
   header,
   footer,
-  overlayOpacity
+  overlayOpacity,
+  resizable = false,
+  minSize = 280,
+  maxSize,
+  onResize
 }) => {
   const [mounted, setMounted] = React19.useState(false);
   const [isAnimating, setIsAnimating] = React19.useState(true);
   const [isVisible, setIsVisible] = React19.useState(false);
+  const [isResizing, setIsResizing] = React19.useState(false);
+  const [sheetSize, setSheetSize] = React19.useState(null);
+  const sheetRef = React19.useRef(null);
+  const resizeStateRef = React19.useRef(null);
+  const isHorizontalSheet = side === "left" || side === "right";
+  const canResize = resizable && size !== "full";
   React19.useEffect(() => {
     setMounted(true);
   }, []);
@@ -6133,6 +6143,68 @@ var Sheet = ({
   const handleClose = () => {
     onOpenChange(false);
   };
+  const clampResizeSize = React19.useCallback((nextSize) => {
+    const viewportSize = isHorizontalSheet ? window.innerWidth : window.innerHeight;
+    const resolvedMaxSize = maxSize ?? Math.round(viewportSize * 0.9);
+    return Math.min(Math.max(nextSize, minSize), resolvedMaxSize);
+  }, [isHorizontalSheet, maxSize, minSize]);
+  const endResize = React19.useCallback(() => {
+    if (!resizeStateRef.current) return;
+    resizeStateRef.current = null;
+    setIsResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const handleResizePointerMove = React19.useCallback((event) => {
+    const resizeState = resizeStateRef.current;
+    if (!resizeState || event.pointerId !== resizeState.pointerId) return;
+    const delta = isHorizontalSheet ? side === "right" ? resizeState.startClientX - event.clientX : event.clientX - resizeState.startClientX : side === "bottom" ? resizeState.startClientY - event.clientY : event.clientY - resizeState.startClientY;
+    const nextSize = clampResizeSize(Math.round(resizeState.startSize + delta));
+    setSheetSize(nextSize);
+    onResize?.(nextSize);
+  }, [clampResizeSize, isHorizontalSheet, onResize, side]);
+  const handleResizePointerUp = React19.useCallback((event) => {
+    const resizeState = resizeStateRef.current;
+    if (!resizeState || event.pointerId !== resizeState.pointerId) return;
+    endResize();
+  }, [endResize]);
+  React19.useEffect(() => {
+    if (!isResizing) return void 0;
+    window.addEventListener("pointermove", handleResizePointerMove);
+    window.addEventListener("pointerup", handleResizePointerUp);
+    window.addEventListener("pointercancel", handleResizePointerUp);
+    return () => {
+      window.removeEventListener("pointermove", handleResizePointerMove);
+      window.removeEventListener("pointerup", handleResizePointerUp);
+      window.removeEventListener("pointercancel", handleResizePointerUp);
+    };
+  }, [handleResizePointerMove, handleResizePointerUp, isResizing]);
+  React19.useEffect(() => {
+    if (!open) endResize();
+  }, [endResize, open]);
+  React19.useEffect(() => endResize, [endResize]);
+  const handleResizePointerDown = (event) => {
+    if (!canResize || !sheetRef.current) return;
+    const rect = sheetRef.current.getBoundingClientRect();
+    const startSize = isHorizontalSheet ? rect.width : rect.height;
+    resizeStateRef.current = {
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startSize
+    };
+    setIsResizing(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    document.body.style.cursor = isHorizontalSheet ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const sheetInlineStyle = {
+    transform: open && !isAnimating ? "translate(0, 0)" : side === "right" ? "translateX(100%)" : side === "left" ? "translateX(-100%)" : side === "top" ? "translateY(-100%)" : "translateY(100%)",
+    transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    ...sheetSize !== null ? isHorizontalSheet ? { width: `${sheetSize}px` } : { height: `${sheetSize}px` } : {}
+  };
   if (!mounted || !open && !isVisible) return null;
   const sheetContent = /* @__PURE__ */ jsxs16("div", { className: "fixed inset-0 z-50", children: [
     /* @__PURE__ */ jsx23(
@@ -6150,6 +6222,7 @@ var Sheet = ({
     /* @__PURE__ */ jsxs16(
       "div",
       {
+        ref: sheetRef,
         className: cn(
           "fixed flex flex-col bg-background text-foreground shadow-2xl",
           "border-border/50 transition-all duration-300 ease-out",
@@ -6164,11 +6237,28 @@ var Sheet = ({
           open && !isAnimating ? animationStyles[side].animate : animationStyles[side].initial,
           className
         ),
-        style: {
-          transform: open && !isAnimating ? "translate(0, 0)" : side === "right" ? "translateX(100%)" : side === "left" ? "translateX(-100%)" : side === "top" ? "translateY(-100%)" : "translateY(100%)",
-          transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
-        },
+        style: sheetInlineStyle,
         children: [
+          canResize && /* @__PURE__ */ jsx23(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Resize sheet",
+              className: cn(
+                "absolute z-10 bg-transparent outline-none transition-colors",
+                "after:absolute after:rounded-full after:bg-border after:opacity-0 after:transition-opacity hover:after:opacity-100 focus-visible:after:opacity-100",
+                isHorizontalSheet ? "top-0 h-full w-3 cursor-col-resize after:top-1/2 after:h-12 after:w-1 after:-translate-y-1/2" : "left-0 h-3 w-full cursor-row-resize after:left-1/2 after:h-1 after:w-12 after:-translate-x-1/2",
+                side === "right" && "-left-1.5 after:left-1/2",
+                side === "left" && "-right-1.5 after:right-1/2",
+                side === "bottom" && "-top-1.5 after:top-1/2",
+                side === "top" && "-bottom-1.5 after:bottom-1/2"
+              ),
+              onPointerDown: handleResizePointerDown,
+              onPointerMove: (event) => handleResizePointerMove(event.nativeEvent),
+              onPointerUp: (event) => handleResizePointerUp(event.nativeEvent),
+              onPointerCancel: (event) => handleResizePointerUp(event.nativeEvent)
+            }
+          ),
           (title || description || header || showClose) && /* @__PURE__ */ jsx23("div", { className: "shrink-0 border-b border-border/50", children: header || /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between p-4", children: [
             /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
               title && /* @__PURE__ */ jsx23("h2", { className: "text-lg font-semibold text-foreground", children: title }),
@@ -7925,7 +8015,7 @@ Section.displayName = "Section";
 var Section_default = Section;
 
 // src/components/ScrollArea.tsx
-import { forwardRef as forwardRef7, useRef as useRef11 } from "react";
+import { forwardRef as forwardRef7, useRef as useRef12 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var variantClasses2 = {
   default: "bg-background",
@@ -7944,7 +8034,7 @@ var ScrollArea = forwardRef7(
     useOverlayScrollbar = false,
     ...props
   }, ref) => {
-    const viewportRef = useRef11(null);
+    const viewportRef = useRef12(null);
     useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
     return /* @__PURE__ */ jsx32(
       "div",
@@ -7960,11 +8050,11 @@ var ScrollArea = forwardRef7(
 ScrollArea.displayName = "ScrollArea";
 
 // src/components/OverlayScrollArea.tsx
-import { forwardRef as forwardRef8, useRef as useRef12 } from "react";
+import { forwardRef as forwardRef8, useRef as useRef13 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var OverlayScrollArea = forwardRef8(
   ({ className, viewportClassName, viewportProps, enabled = true, overflowHidden = true, overlayScrollbarOptions, children, ...props }, ref) => {
-    const viewportRef = useRef12(null);
+    const viewportRef = useRef13(null);
     useOverlayScrollbarTarget(viewportRef, {
       enabled,
       ...overlayScrollbarOptions
@@ -16942,7 +17032,7 @@ function OverlayControls({
 }
 
 // src/components/CategoryTreeSelect.tsx
-import { useEffect as useEffect25, useId as useId11, useMemo as useMemo19, useRef as useRef19, useState as useState31 } from "react";
+import { useEffect as useEffect25, useId as useId11, useMemo as useMemo19, useRef as useRef20, useState as useState31 } from "react";
 import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown5, FolderTree, Layers, Search as Search6, SearchX as SearchX3, X as X14 } from "lucide-react";
 import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var defaultLabels = {
@@ -17070,8 +17160,8 @@ function CategoryTreeSelect(props) {
   );
   const [query, setQuery] = useState31("");
   const [localRequiredError, setLocalRequiredError] = useState31();
-  const searchInputRef = useRef19(null);
-  const dropdownViewportRef = useRef19(null);
+  const searchInputRef = useRef20(null);
+  const dropdownViewportRef = useRef20(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
   const autoId = useId11();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
@@ -17642,7 +17732,7 @@ function CategoryTreeSelect(props) {
 }
 
 // src/components/ImageUpload.tsx
-import { useState as useState32, useRef as useRef20, useCallback as useCallback15 } from "react";
+import { useState as useState32, useRef as useRef21, useCallback as useCallback16 } from "react";
 import { Upload, X as X15, Image as ImageIcon, Loader2 as Loader25, Check as Check7 } from "lucide-react";
 import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 function ImageUpload({
@@ -17663,7 +17753,7 @@ function ImageUpload({
   const [isDragging, setIsDragging] = useState32(false);
   const [uploading, setUploading] = useState32(false);
   const [uploadedImages, setUploadedImages] = useState32([]);
-  const fileInputRef = useRef20(null);
+  const fileInputRef = useRef21(null);
   const { addToast } = useToast();
   const t = useSmartTranslations("OCR.imageUpload");
   const previewSizes = {
@@ -17671,7 +17761,7 @@ function ImageUpload({
     md: "w-24 h-24",
     lg: "w-32 h-32"
   };
-  const handleDragOver = useCallback15(
+  const handleDragOver = useCallback16(
     (e) => {
       e.preventDefault();
       if (!disabled) {
@@ -17680,11 +17770,11 @@ function ImageUpload({
     },
     [disabled]
   );
-  const handleDragLeave = useCallback15((e) => {
+  const handleDragLeave = useCallback16((e) => {
     e.preventDefault();
     setIsDragging(false);
   }, []);
-  const handleFiles = useCallback15(
+  const handleFiles = useCallback16(
     async (files) => {
       if (files.length === 0) return;
       const validFiles = files.filter((file) => {
@@ -17751,7 +17841,7 @@ function ImageUpload({
     },
     [maxSize, addToast, onUpload]
   );
-  const handleDrop = useCallback15(
+  const handleDrop = useCallback16(
     (e) => {
       e.preventDefault();
       setIsDragging(false);
@@ -17761,7 +17851,7 @@ function ImageUpload({
     },
     [disabled, handleFiles]
   );
-  const handleFileSelect = useCallback15(
+  const handleFileSelect = useCallback16(
     (e) => {
       const files = Array.from(e.target.files || []);
       handleFiles(files);
@@ -17881,7 +17971,7 @@ import {
   Trash2,
   Upload as Upload2
 } from "lucide-react";
-import { useCallback as useCallback16, useMemo as useMemo20, useRef as useRef21, useState as useState33 } from "react";
+import { useCallback as useCallback17, useMemo as useMemo20, useRef as useRef22, useState as useState33 } from "react";
 import { Fragment as Fragment16, jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
 var formatFileSize = (bytes) => {
   if (bytes === 0) return "0 Bytes";
@@ -17990,7 +18080,7 @@ function FileUpload({
 }) {
   const [isDragging, setIsDragging] = useState33(false);
   const [files, setFiles] = useState33(initialFiles);
-  const fileInputRef = useRef21(null);
+  const fileInputRef = useRef22(null);
   const { addToast } = useToast();
   const t = useSmartTranslations("FileUpload");
   const sizeConfig = useMemo20(
@@ -18026,7 +18116,7 @@ function FileUpload({
     []
   );
   const currentSize = sizeConfig[size];
-  const handleDragOver = useCallback16(
+  const handleDragOver = useCallback17(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -18036,12 +18126,12 @@ function FileUpload({
     },
     [disabled]
   );
-  const handleDragLeave = useCallback16((e) => {
+  const handleDragLeave = useCallback17((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const processFiles = useCallback16(
+  const processFiles = useCallback17(
     async (fileList) => {
       if (fileList.length === 0) return;
       const remainingSlots = maxFiles - files.length;
@@ -18114,7 +18204,7 @@ function FileUpload({
     },
     [files, maxFiles, maxSize, uploadHandler, onUpload, onChange, addToast, t]
   );
-  const handleDrop = useCallback16(
+  const handleDrop = useCallback17(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -18125,7 +18215,7 @@ function FileUpload({
     },
     [disabled, processFiles]
   );
-  const handleFileSelect = useCallback16(
+  const handleFileSelect = useCallback17(
     (e) => {
       const selectedFiles = Array.from(e.target.files || []);
       processFiles(selectedFiles);
@@ -18135,7 +18225,7 @@ function FileUpload({
     },
     [processFiles]
   );
-  const handleRemove = useCallback16(
+  const handleRemove = useCallback17(
     (fileId) => {
       setFiles((prev) => {
         const fileToRemove = prev.find((f) => f.id === fileId);
@@ -18153,7 +18243,7 @@ function FileUpload({
   const handleBrowseClick = () => {
     fileInputRef.current?.click();
   };
-  const handleRetry = useCallback16(
+  const handleRetry = useCallback17(
     (fileEntry) => {
       if (!uploadHandler || !fileEntry.file) return;
       processFiles([fileEntry.file]);
@@ -20481,7 +20571,7 @@ function ColorPicker({
 }
 
 // src/components/MusicPlayer.tsx
-import { useState as useState39, useRef as useRef23, useEffect as useEffect29 } from "react";
+import { useState as useState39, useRef as useRef24, useEffect as useEffect29 } from "react";
 import { Play as Play2, Pause as Pause2, SkipForward, SkipBack, Volume2 as Volume22, VolumeX as VolumeX2, List as List2, X as X17 } from "lucide-react";
 import { jsx as jsx58, jsxs as jsxs48 } from "react/jsx-runtime";
 var DEFAULT_PLAYLIST = [
@@ -20610,7 +20700,7 @@ var MusicPlayer = ({
   const [volume, setVolume] = useState39(1);
   const [isMuted, setIsMuted] = useState39(false);
   const [showPlaylist, setShowPlaylist] = useState39(initialShowPlaylist);
-  const audioRef = useRef23(null);
+  const audioRef = useRef24(null);
   const currentSong = playlist[currentSongIndex];
   useEffect29(() => {
     if (audioRef.current) {
@@ -21371,6 +21461,7 @@ function DataTableHeader({
   enableHeaderAutoFit,
   getStickyHeaderClass,
   getStickyHeaderCellStyle,
+  sortByLabel,
   t
 }) {
   const renderFilterControl = React54.useCallback(
@@ -21447,18 +21538,20 @@ function DataTableHeader({
       const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
       const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
       const columnLabel = getColumnLabel(col.title) || col.key;
+      const sortByText = sortByLabel ?? "Sort by";
+      const sortLabel = `${sortByText} ${columnLabel}`;
       const titleContent = /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsx64("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
         col.sortable && /* @__PURE__ */ jsx64(
           Tooltip,
           {
             placement: "top",
-            content: /* @__PURE__ */ jsx64("span", { className: "text-xs font-medium", children: `Sort by ${columnLabel}` }),
+            content: /* @__PURE__ */ jsx64("span", { className: "text-xs font-medium", children: sortLabel }),
             children: /* @__PURE__ */ jsx64(
               "button",
               {
                 type: "button",
-                title: `Sort by ${columnLabel}`,
+                title: sortLabel,
                 className: cn(
                   "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
                   sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
@@ -21471,7 +21564,7 @@ function DataTableHeader({
                     return null;
                   });
                 },
-                "aria-label": `Sort by ${columnLabel}`,
+                "aria-label": sortLabel,
                 children: /* @__PURE__ */ jsxs53("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
                   /* @__PURE__ */ jsx64(
                     "path",
@@ -22578,6 +22671,7 @@ function DataTable({
                       enableHeaderAutoFit,
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
+                      sortByLabel: labels?.sortBy,
                       t
                     }
                   ) }),
@@ -22859,7 +22953,7 @@ function AccessDenied({
 
 // src/components/ThemeToggleHeadless.tsx
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
-import { useRef as useRef24, useState as useState40 } from "react";
+import { useRef as useRef25, useState as useState40 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { Fragment as Fragment23, jsx as jsx71, jsxs as jsxs60 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
@@ -22870,7 +22964,7 @@ function ThemeToggleHeadless({
 }) {
   const [isOpen, setIsOpen] = useState40(false);
   const isHydrated = useHydrated();
-  const triggerRef = useRef24(null);
+  const triggerRef = useRef25(null);
   const [dropdownPosition, setDropdownPosition] = useState40(null);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: Sun2 },
@@ -22960,7 +23054,7 @@ function ThemeToggleHeadless({
 }
 
 // src/components/LanguageSwitcherHeadless.tsx
-import { useRef as useRef25, useState as useState41 } from "react";
+import { useRef as useRef26, useState as useState41 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { Globe } from "lucide-react";
 import { Fragment as Fragment24, jsx as jsx72, jsxs as jsxs61 } from "react/jsx-runtime";
@@ -22973,7 +23067,7 @@ function LanguageSwitcherHeadless({
 }) {
   const [isOpen, setIsOpen] = useState41(false);
   const [dropdownPosition, setDropdownPosition] = useState41(null);
-  const triggerButtonRef = useRef25(null);
+  const triggerButtonRef = useRef26(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -23109,7 +23203,7 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-import React76, { useEffect as useEffect36, useImperativeHandle as useImperativeHandle3, useMemo as useMemo24, useRef as useRef33 } from "react";
+import React76, { useEffect as useEffect36, useImperativeHandle as useImperativeHandle3, useMemo as useMemo24, useRef as useRef34 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -23148,7 +23242,7 @@ import { common, createLowlight } from "lowlight";
 import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
-import React66, { forwardRef as forwardRef14, useEffect as useEffect31, useImperativeHandle, useRef as useRef26 } from "react";
+import React66, { forwardRef as forwardRef14, useEffect as useEffect31, useImperativeHandle, useRef as useRef27 } from "react";
 import {
   FileCode as FileCode2,
   Heading1,
@@ -23354,7 +23448,7 @@ function buildSlashCommandItems({
 }
 var SlashCommandList = forwardRef14((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useResettingIndex2(props.items);
-  const listRef = useRef26(null);
+  const listRef = useRef27(null);
   useEffect31(() => {
     const selectedElement = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
@@ -23856,7 +23950,7 @@ var UEditorPlaceholder = Extension4.create({
 });
 
 // src/components/UEditor/resizable-image.tsx
-import { useEffect as useEffect32, useRef as useRef27, useState as useState42 } from "react";
+import { useEffect as useEffect32, useRef as useRef28, useState as useState42 } from "react";
 import Image3 from "@tiptap/extension-image";
 import { mergeAttributes } from "@tiptap/core";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
@@ -23905,8 +23999,8 @@ function getImageLayoutStyles(layout) {
 }
 function ResizableImageNodeView(props) {
   const { node, selected, updateAttributes, editor, getPos } = props;
-  const wrapperRef = useRef27(null);
-  const imgRef = useRef27(null);
+  const wrapperRef = useRef28(null);
+  const imgRef = useRef28(null);
   const [isHovered, setIsHovered] = useState42(false);
   const [isResizing, setIsResizing] = useState42(false);
   const widthAttr = toNullableNumber(node.attrs["width"]);
@@ -23914,7 +24008,7 @@ function ResizableImageNodeView(props) {
   const textAlign = String(node.attrs["textAlign"] ?? "");
   const imageLayout = parseImageLayout(node.attrs["imageLayout"]);
   const preserveAspectByDefault = imageLayout === "left" || imageLayout === "right";
-  const dragStateRef = useRef27(null);
+  const dragStateRef = useRef28(null);
   useEffect32(() => {
     const img = imgRef.current;
     if (!img) return;
@@ -24571,7 +24665,7 @@ function buildUEditorExtensions({
 }
 
 // src/components/UEditor/toolbar.tsx
-import React71, { useRef as useRef29, useState as useState44 } from "react";
+import React71, { useRef as useRef30, useState as useState44 } from "react";
 import {
   AlignCenter,
   AlignJustify,
@@ -24763,7 +24857,7 @@ function deleteSelectedImage(editor) {
 }
 
 // src/components/UEditor/inputs.tsx
-import { useEffect as useEffect33, useRef as useRef28, useState as useState43 } from "react";
+import { useEffect as useEffect33, useRef as useRef29, useState as useState43 } from "react";
 import { Check as Check10, X as X19 } from "lucide-react";
 import { jsx as jsx78, jsxs as jsxs66 } from "react/jsx-runtime";
 function normalizeUrl(raw) {
@@ -24776,7 +24870,7 @@ var LinkInput = ({
 }) => {
   const t = useSmartTranslations("UEditor");
   const [url, setUrl] = useState43(initialUrl);
-  const inputRef = useRef28(null);
+  const inputRef = useRef29(null);
   useEffect33(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
@@ -24806,7 +24900,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
   const t = useSmartTranslations("UEditor");
   const [url, setUrl] = useState43("");
   const [alt, setAlt] = useState43("");
-  const inputRef = useRef28(null);
+  const inputRef = useRef29(null);
   useEffect33(() => {
     inputRef.current?.focus();
   }, []);
@@ -25011,8 +25105,8 @@ var EditorToolbar = ({
   const { textColors, highlightColors } = useEditorColors();
   const [showImageInput, setShowImageInput] = useState44(false);
   const [isTableMenuOpen, setIsTableMenuOpen] = useState44(false);
-  const tableCommandAnchorPosRef = useRef29(null);
-  const fileInputRef = useRef29(null);
+  const tableCommandAnchorPosRef = useRef30(null);
+  const fileInputRef = useRef30(null);
   const [isUploadingImage, setIsUploadingImage] = useState44(false);
   const [imageUploadError, setImageUploadError] = useState44(null);
   const [fontSizeDraft, setFontSizeDraft] = useState44("");
@@ -25830,7 +25924,7 @@ var EditorToolbar = ({
 };
 
 // src/components/UEditor/menus.tsx
-import { useCallback as useCallback19, useEffect as useEffect34, useMemo as useMemo23, useRef as useRef30, useState as useState45 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect34, useMemo as useMemo23, useRef as useRef31, useState as useState45 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import {
   AlignCenter as AlignCenter2,
@@ -25854,7 +25948,7 @@ var FloatingSlashCommandMenu = ({ editor, onClose }) => {
   const t = useSmartTranslations("UEditor");
   const messages = useMemo23(() => buildSlashCommandMessages(t), [t]);
   const items = useMemo23(() => buildSlashCommandItems({ query: "", messages }), [messages]);
-  const listRef = useRef30(null);
+  const listRef = useRef31(null);
   useEffect34(() => {
     const handleKeyDown2 = (event) => {
       if (event.key === "Escape") {
@@ -26119,10 +26213,10 @@ var CustomBubbleMenu = ({
   const BUBBLE_MENU_OFFSET = 16;
   const [isVisible, setIsVisible] = useState45(false);
   const [position, setPosition] = useState45({ top: 0, left: 0 });
-  const menuRef = useRef30(null);
-  const keepOpenRef = useRef30(false);
-  const showTimeoutRef = useRef30(null);
-  const setKeepOpen = useCallback19((next) => {
+  const menuRef = useRef31(null);
+  const keepOpenRef = useRef31(false);
+  const showTimeoutRef = useRef31(null);
+  const setKeepOpen = useCallback20((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
@@ -31962,10 +32056,10 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
 );
 
 // src/components/UEditor/use-table-interactions.ts
-import React75, { useEffect as useEffect35, useRef as useRef32 } from "react";
+import React75, { useEffect as useEffect35, useRef as useRef33 } from "react";
 
 // src/components/UEditor/use-table-row-resize.ts
-import React74, { useRef as useRef31 } from "react";
+import React74, { useRef as useRef32 } from "react";
 function useTableRowResize({
   editor,
   setHoveredTableCell,
@@ -31974,8 +32068,8 @@ function useTableRowResize({
   clearAllTableResizeHover,
   scheduleTableLayoutSync
 }) {
-  const commitFrameRef = useRef31(null);
-  const stateRef = useRef31(null);
+  const commitFrameRef = useRef32(null);
+  const stateRef = useRef32(null);
   const commitPreview = React74.useCallback(() => {
     if (!editor) return;
     const state = stateRef.current;
@@ -32128,14 +32222,14 @@ function useTableRowResize({
 
 // src/components/UEditor/use-table-interactions.ts
 function useUEditorTableInteractions(editor) {
-  const editorContentRef = useRef32(null);
-  const tableColumnGuideRef = useRef32(null);
-  const tableRowGuideRef = useRef32(null);
-  const activeTableCellHighlightRef = useRef32(null);
-  const hoveredTableCellRef = useRef32(null);
-  const activeTableCellRef = useRef32(null);
-  const suppressActiveCellHighlightRef = useRef32(false);
-  const tableLayoutSyncFrameRef = useRef32(null);
+  const editorContentRef = useRef33(null);
+  const tableColumnGuideRef = useRef33(null);
+  const tableRowGuideRef = useRef33(null);
+  const activeTableCellHighlightRef = useRef33(null);
+  const hoveredTableCellRef = useRef33(null);
+  const activeTableCellRef = useRef33(null);
+  const suppressActiveCellHighlightRef = useRef33(false);
+  const tableLayoutSyncFrameRef = useRef33(null);
   const setEditorResizeCursor = React75.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
     if (proseMirror) {
@@ -32441,8 +32535,8 @@ var UEditor = React76.forwardRef(({
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = useRef33(null);
-  const lastAppliedContentRef = useRef33(content ?? "");
+  const inFlightPrepareRef = useRef34(null);
+  const lastAppliedContentRef = useRef34(content ?? "");
   const extensions = useMemo24(
     () => buildUEditorExtensions({
       placeholder: effectivePlaceholder,