@underverse-ui/underverse 1.0.70 → 1.0.71

package/dist/index.cjs

@@ -20281,10 +20281,65 @@ var TableCaption = import_react28.default.forwardRef(({ className, ...props }, r
 TableCaption.displayName = "TableCaption";
 
 // src/components/DataTable/DataTable.tsx
-var import_react37 = __toESM(require("react"), 1);
+var import_react38 = __toESM(require("react"), 1);
 
 // src/components/DataTable/components/DataTableBody.tsx
+var import_react29 = __toESM(require("react"), 1);
 var import_jsx_runtime62 = require("react/jsx-runtime");
+function DataTableOverflowText({
+  text,
+  align
+}) {
+  const triggerId = import_react29.default.useId();
+  const [isOverflowing, setIsOverflowing] = import_react29.default.useState(false);
+  const alignClass = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+  const measureOverflow = import_react29.default.useCallback(() => {
+    if (typeof document === "undefined") return;
+    const element = document.querySelector(`[data-underverse-datatable-cell="${triggerId}"]`);
+    if (!element) return;
+    setIsOverflowing(
+      element.scrollWidth - element.clientWidth > 1 || element.scrollHeight - element.clientHeight > 1
+    );
+  }, [triggerId]);
+  import_react29.default.useLayoutEffect(() => {
+    measureOverflow();
+  }, [measureOverflow, text]);
+  import_react29.default.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const element = document.querySelector(`[data-underverse-datatable-cell="${triggerId}"]`);
+    if (!element) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      measureOverflow();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [measureOverflow, triggerId]);
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-underverse-datatable-cell": triggerId,
+      onMouseEnter: measureOverflow,
+      onFocus: measureOverflow,
+      className: cn(
+        "block w-full truncate bg-transparent p-0 font-inherit text-inherit select-text",
+        "cursor-text",
+        alignClass
+      ),
+      children: text
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    Tooltip,
+    {
+      disabled: !isOverflowing,
+      placement: "top",
+      content: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: cn("max-w-[min(40rem,calc(100vw-2rem))] whitespace-pre-wrap break-all select-text", alignClass), children: text }),
+      children: trigger
+    }
+  );
+}
 function DataTableBodyRows({
   leafColumns,
   displayedData,
@@ -20333,6 +20388,7 @@ function DataTableBodyRows({
           return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             TableCell,
             {
+              "data-underverse-column-key": col.key,
               style: getStickyColumnStyle(col),
               className: cn(
                 cellPadding,
@@ -20341,7 +20397,7 @@ function DataTableBodyRows({
                 showBorderLeft && "border-l border-border/60",
                 getStickyCellClass(col, isStripedRow)
               ),
-              children: col.render ? col.render(value, row, idx) : String(value ?? "")
+              children: col.render ? col.render(value, row, idx) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DataTableOverflowText, { text: String(value ?? ""), align: col.align })
             },
             col.key
           );
@@ -20353,7 +20409,7 @@ function DataTableBodyRows({
 }
 
 // src/components/DataTable/components/DataTableHeader.tsx
-var import_react29 = __toESM(require("react"), 1);
+var import_react30 = __toESM(require("react"), 1);
 var import_lucide_react35 = require("lucide-react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function DataTableHeader({
@@ -20369,11 +20425,13 @@ function DataTableHeader({
   setCurPage,
   setFilters,
   setSort,
+  onAutoFitColumn,
+  enableHeaderAutoFit,
   getStickyHeaderClass,
   getStickyHeaderCellStyle,
   t
 }) {
-  const renderFilterControl = import_react29.default.useCallback(
+  const renderFilterControl = import_react30.default.useCallback(
     (col) => {
       if (!col.filter) return null;
       const key = col.key;
@@ -20426,7 +20484,7 @@ function DataTableHeader({
     },
     [filters, setCurPage, setFilters, size]
   );
-  const renderHeaderContent = import_react29.default.useCallback(
+  const renderHeaderContent = import_react30.default.useCallback(
     (col, isLeaf) => {
       if (!isLeaf) {
         return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
@@ -20566,22 +20624,55 @@ function DataTableHeader({
     const prevCol = prevCell?.column;
     const isAfterFixedLeft = prevCol?.fixed === "left";
     const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       TableHead,
       {
         colSpan,
         rowSpan,
+        "data-underverse-column-key": isLeaf ? col.key : void 0,
         style: {
           width: col.width,
           ...getStickyHeaderCellStyle(headerCell)
         },
         className: cn(
+          "relative",
           (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
           (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
           showBorderLeft && "border-l border-border/60",
           getStickyHeaderClass(col)
         ),
-        children: renderHeaderContent(col, isLeaf)
+        children: [
+          renderHeaderContent(col, isLeaf),
+          isLeaf && enableHeaderAutoFit && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            Tooltip,
+            {
+              placement: "top",
+              content: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-xs font-medium", children: "Double click to auto-fit" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Auto fit ${String(col.title)}`,
+                  onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                  },
+                  onDoubleClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onAutoFitColumn?.(col.key);
+                  },
+                  className: cn(
+                    "absolute inset-y-0 right-0 z-10 w-3 -mr-1",
+                    "cursor-col-resize select-none bg-transparent",
+                    "after:absolute after:inset-y-2 after:right-[3px] after:w-px after:bg-border/0 after:transition-colors",
+                    "hover:after:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                  )
+                }
+              )
+            }
+          )
+        ]
       },
       col.key
     );
@@ -20589,7 +20680,7 @@ function DataTableHeader({
 }
 
 // src/components/DataTable/components/Pagination.tsx
-var import_react30 = __toESM(require("react"), 1);
+var import_react31 = __toESM(require("react"), 1);
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function DataTablePagination({
   totalItems,
@@ -20601,7 +20692,7 @@ function DataTablePagination({
   size
 }) {
   const totalPages = Math.ceil(totalItems / curPageSize);
-  const pages = import_react30.default.useMemo(() => {
+  const pages = import_react31.default.useMemo(() => {
     const result = [];
     if (totalPages <= 5) {
       for (let i = 1; i <= totalPages; i++) result.push(i);
@@ -20683,7 +20774,7 @@ function DataTablePagination({
 }
 
 // src/components/DataTable/components/Toolbar.tsx
-var import_react31 = __toESM(require("react"), 1);
+var import_react32 = __toESM(require("react"), 1);
 
 // src/components/DataTable/utils/headers.ts
 function isLeafColumn(col) {
@@ -20804,7 +20895,7 @@ function DataTableToolbar({
   const controlButtonClass = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-9 px-3 text-sm" : "h-8 px-2";
   const iconClass = size === "sm" ? "w-3.5 h-3.5 mr-1" : "w-4 h-4 mr-1";
   const captionClass = size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-sm";
-  const leafCols = import_react31.default.useMemo(() => getLeafColumns(columns), [columns]);
+  const leafCols = import_react32.default.useMemo(() => getLeafColumns(columns), [columns]);
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: captionClass + " text-muted-foreground", children: caption }),
     /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -20872,10 +20963,10 @@ function DataTableToolbar({
 }
 
 // src/components/DataTable/hooks/useDebounced.ts
-var import_react32 = __toESM(require("react"), 1);
+var import_react33 = __toESM(require("react"), 1);
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = import_react32.default.useState(value);
-  import_react32.default.useEffect(() => {
+  const [debounced, setDebounced] = import_react33.default.useState(value);
+  import_react33.default.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -20883,7 +20974,7 @@ function useDebounced(value, delay = 300) {
 }
 
 // src/components/DataTable/hooks/useDataTableModel.ts
-var import_react33 = __toESM(require("react"), 1);
+var import_react34 = __toESM(require("react"), 1);
 
 // src/components/DataTable/utils/columns.ts
 function getColumnWidth(col, fallback = 150) {
@@ -20911,22 +21002,22 @@ function useDataTableModel({
   isServerMode,
   total
 }) {
-  const visibleColsSet = import_react33.default.useMemo(() => new Set(visibleCols), [visibleCols]);
-  const allLeafColumns = import_react33.default.useMemo(() => getLeafColumns(columns), [columns]);
-  const columnMap = import_react33.default.useMemo(() => {
+  const visibleColsSet = import_react34.default.useMemo(() => new Set(visibleCols), [visibleCols]);
+  const allLeafColumns = import_react34.default.useMemo(() => getLeafColumns(columns), [columns]);
+  const columnMap = import_react34.default.useMemo(() => {
     return new Map(allLeafColumns.map((column) => [column.key, column]));
   }, [allLeafColumns]);
-  const visibleColumns = import_react33.default.useMemo(() => {
+  const visibleColumns = import_react34.default.useMemo(() => {
     return filterVisibleColumns(columns, visibleColsSet);
   }, [columns, visibleColsSet]);
-  const leafColumns = import_react33.default.useMemo(() => {
+  const leafColumns = import_react34.default.useMemo(() => {
     return getLeafColumnsWithFixedInheritance(visibleColumns);
   }, [visibleColumns]);
-  const headerRows = import_react33.default.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
-  const totalColumnsWidth = import_react33.default.useMemo(() => {
+  const headerRows = import_react34.default.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
+  const totalColumnsWidth = import_react34.default.useMemo(() => {
     return leafColumns.reduce((sum, column) => sum + getColumnWidth(column), 0);
   }, [leafColumns]);
-  const processedData = import_react33.default.useMemo(() => {
+  const processedData = import_react34.default.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
     if (Object.keys(filters).length > 0) {
@@ -20958,7 +21049,7 @@ function useDataTableModel({
     return result;
   }, [columnMap, data, filters, isServerMode, sort]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = import_react33.default.useMemo(() => {
+  const displayedData = import_react34.default.useMemo(() => {
     if (isServerMode) return data;
     const start = (curPage - 1) * curPageSize;
     return processedData.slice(start, start + curPageSize);
@@ -20974,10 +21065,10 @@ function useDataTableModel({
 }
 
 // src/components/DataTable/hooks/useDataTableState.ts
-var import_react35 = __toESM(require("react"), 1);
+var import_react36 = __toESM(require("react"), 1);
 
 // src/components/DataTable/hooks/usePageSizeStorage.ts
-var import_react34 = __toESM(require("react"), 1);
+var import_react35 = __toESM(require("react"), 1);
 function readStoredPageSize(storageKey) {
   if (typeof window === "undefined" || !storageKey) return null;
   try {
@@ -20990,8 +21081,8 @@ function readStoredPageSize(storageKey) {
   }
 }
 function usePageSizeStorage({ pageSize, storageKey }) {
-  const storedPageSize = import_react34.default.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
-  const [overrideState, setOverrideState] = import_react34.default.useState({
+  const storedPageSize = import_react35.default.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
+  const [overrideState, setOverrideState] = import_react35.default.useState({
     storageKey,
     pageSize: null
   });
@@ -20999,7 +21090,7 @@ function usePageSizeStorage({ pageSize, storageKey }) {
   const persistedPageSize = storageKey ? overridePageSize ?? storedPageSize : null;
   const loadedFromStorage = persistedPageSize != null;
   const curPageSize = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
-  const setCurPageSize = import_react34.default.useCallback(
+  const setCurPageSize = import_react35.default.useCallback(
     (nextPageSize) => {
       const baseValue = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
       const resolved = typeof nextPageSize === "function" ? nextPageSize(baseValue) : nextPageSize;
@@ -21028,17 +21119,17 @@ function useDataTableState({
   size,
   storageKey
 }) {
-  const allLeafColumns = import_react35.default.useMemo(() => getLeafColumns(columns), [columns]);
-  const defaultVisibleLeafKeys = import_react35.default.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
-  const knownLeafKeysRef = import_react35.default.useRef(new Set(defaultVisibleLeafKeys));
-  const [headerAlign, setHeaderAlign] = import_react35.default.useState("left");
-  const [visibleCols, setVisibleCols] = import_react35.default.useState(defaultVisibleLeafKeys);
-  const [filters, setFilters] = import_react35.default.useState({});
-  const [sort, setSort] = import_react35.default.useState(null);
-  const [density, setDensity] = import_react35.default.useState(() => SIZE_TO_DENSITY[size]);
-  const [curPage, setCurPage] = import_react35.default.useState(page);
+  const allLeafColumns = import_react36.default.useMemo(() => getLeafColumns(columns), [columns]);
+  const defaultVisibleLeafKeys = import_react36.default.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
+  const knownLeafKeysRef = import_react36.default.useRef(new Set(defaultVisibleLeafKeys));
+  const [headerAlign, setHeaderAlign] = import_react36.default.useState("left");
+  const [visibleCols, setVisibleCols] = import_react36.default.useState(defaultVisibleLeafKeys);
+  const [filters, setFilters] = import_react36.default.useState({});
+  const [sort, setSort] = import_react36.default.useState(null);
+  const [density, setDensity] = import_react36.default.useState(() => SIZE_TO_DENSITY[size]);
+  const [curPage, setCurPage] = import_react36.default.useState(page);
   const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
-  import_react35.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     const knownLeafKeys = knownLeafKeysRef.current;
     setVisibleCols((prev) => {
       const prevSet = new Set(prev);
@@ -21046,10 +21137,10 @@ function useDataTableState({
     });
     knownLeafKeysRef.current = new Set(allLeafColumns.map((column) => column.key));
   }, [allLeafColumns]);
-  import_react35.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     setCurPage(page);
   }, [page]);
-  import_react35.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     setDensity(SIZE_TO_DENSITY[size]);
   }, [size]);
   return {
@@ -21071,7 +21162,7 @@ function useDataTableState({
 }
 
 // src/components/DataTable/hooks/useStickyColumns.ts
-var import_react36 = __toESM(require("react"), 1);
+var import_react37 = __toESM(require("react"), 1);
 
 // src/components/DataTable/utils/sticky.ts
 function buildStickyLayout(visibleColumns) {
@@ -21118,8 +21209,8 @@ function resolveGroupStickyPosition(column, positions) {
 
 // src/components/DataTable/hooks/useStickyColumns.ts
 function useStickyColumns(visibleColumns) {
-  const { positions, leftBoundaryKey, rightBoundaryKey } = import_react36.default.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
-  const getStickyColumnStyle = import_react36.default.useCallback(
+  const { positions, leftBoundaryKey, rightBoundaryKey } = import_react37.default.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
+  const getStickyColumnStyle = import_react37.default.useCallback(
     (col) => {
       const pos = resolveStickyPosition(col, positions);
       if (!pos) return {};
@@ -21130,7 +21221,7 @@ function useStickyColumns(visibleColumns) {
     },
     [positions]
   );
-  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)]";
@@ -21142,14 +21233,14 @@ function useStickyColumns(visibleColumns) {
     },
     [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(
@@ -21162,7 +21253,7 @@ function useStickyColumns(visibleColumns) {
     },
     [getBoundaryShadowClass]
   );
-  const getStickyHeaderCellStyle = import_react36.default.useCallback(
+  const getStickyHeaderCellStyle = import_react37.default.useCallback(
     (headerCell) => {
       const col = headerCell.column;
       if (headerCell.isLeaf) {
@@ -21261,6 +21352,66 @@ function validateColumns(columns) {
 
 // src/components/DataTable/DataTable.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
+function applyColumnWidthOverrides(columns, widthOverrides) {
+  return columns.map((column) => {
+    if (column.children?.length) {
+      return {
+        ...column,
+        children: applyColumnWidthOverrides(column.children, widthOverrides)
+      };
+    }
+    const nextWidth = widthOverrides[column.key];
+    if (nextWidth == null) {
+      return column;
+    }
+    return {
+      ...column,
+      width: nextWidth
+    };
+  });
+}
+function measureNaturalContentWidth(node) {
+  if (typeof document === "undefined") return 0;
+  const measurementRoot = document.createElement("div");
+  measurementRoot.style.position = "absolute";
+  measurementRoot.style.left = "-99999px";
+  measurementRoot.style.top = "0";
+  measurementRoot.style.visibility = "hidden";
+  measurementRoot.style.pointerEvents = "none";
+  measurementRoot.style.whiteSpace = "nowrap";
+  measurementRoot.style.width = "max-content";
+  measurementRoot.style.maxWidth = "none";
+  measurementRoot.style.minWidth = "0";
+  measurementRoot.style.overflow = "visible";
+  const clone = (node.firstElementChild instanceof HTMLElement ? node.firstElementChild : node).cloneNode(true);
+  if (!(clone instanceof HTMLElement)) {
+    return 0;
+  }
+  const sourceStyle = window.getComputedStyle(node);
+  const cloneStyle = window.getComputedStyle(clone);
+  clone.style.width = "max-content";
+  clone.style.maxWidth = "none";
+  clone.style.minWidth = "0";
+  clone.style.overflow = "visible";
+  clone.style.textOverflow = "clip";
+  clone.style.whiteSpace = cloneStyle.whiteSpace === "normal" ? "pre-wrap" : "nowrap";
+  measurementRoot.appendChild(clone);
+  document.body.appendChild(measurementRoot);
+  const horizontalPadding = parseFloat(sourceStyle.paddingLeft || "0") + parseFloat(sourceStyle.paddingRight || "0");
+  const horizontalBorder = parseFloat(sourceStyle.borderLeftWidth || "0") + parseFloat(sourceStyle.borderRightWidth || "0");
+  const cloneRectWidth = clone.getBoundingClientRect().width;
+  const cloneScrollWidth = clone.scrollWidth;
+  const sourceScrollWidth = node.scrollWidth;
+  const measuredContentWidth = Math.max(cloneRectWidth, cloneScrollWidth) || sourceScrollWidth;
+  const measured = Math.ceil(measuredContentWidth + horizontalPadding + horizontalBorder);
+  document.body.removeChild(measurementRoot);
+  return measured;
+}
+function isNodeOverflowing(node) {
+  const contentNode = node.firstElementChild instanceof HTMLElement ? node.firstElementChild : node;
+  return node.scrollWidth > node.clientWidth + 1 || contentNode.scrollWidth > contentNode.clientWidth + 1;
+}
+var AUTO_FIT_BUFFER_PX = 8;
 function DataTable({
   columns,
   data,
@@ -21284,9 +21435,15 @@ function DataTable({
   stickyHeader = true,
   maxHeight = 500,
   useOverlayScrollbar = false,
+  enableHeaderAutoFit = true,
   labels
 }) {
   const t = useSmartTranslations("Common");
+  const [columnWidthOverrides, setColumnWidthOverrides] = import_react38.default.useState({});
+  const columnsWithWidthOverrides = import_react38.default.useMemo(
+    () => applyColumnWidthOverrides(columns, columnWidthOverrides),
+    [columnWidthOverrides, columns]
+  );
   const {
     headerAlign,
     setHeaderAlign,
@@ -21303,22 +21460,22 @@ function DataTable({
     curPageSize,
     setCurPageSize
   } = useDataTableState({
-    columns,
+    columns: columnsWithWidthOverrides,
     page,
     pageSize,
     size,
     storageKey
   });
-  import_react37.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     if (process.env.NODE_ENV === "development") {
-      const warnings = validateColumns(columns);
+      const warnings = validateColumns(columnsWithWidthOverrides);
       warnings.forEach((w) => console.warn(`[DataTable] ${w}`));
     }
-  }, [columns]);
+  }, [columnsWithWidthOverrides]);
   const debouncedFilters = useDebounced(filters, 350);
   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;
@@ -21326,7 +21483,7 @@ function DataTable({
     }
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
   }, [debouncedFilters, sort, curPage, curPageSize, onQueryChange]);
-  import_react37.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     if (process.env.NODE_ENV !== "development" || rowKey) return;
     const hasQueryFeatures = columns.some((column) => column.sortable || column.filter) || Boolean(pageSizeOptions?.length) || isServerMode;
     if (!hasQueryFeatures) return;
@@ -21338,7 +21495,7 @@ function DataTable({
   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 { visibleColumns, leafColumns, headerRows, totalColumnsWidth, totalItems, displayedData } = useDataTableModel({
-    columns,
+    columns: columnsWithWidthOverrides,
     data,
     visibleCols,
     filters,
@@ -21354,15 +21511,45 @@ function DataTable({
     if (typeof rowKey === "function") return String(rowKey(row));
     return String(row[rowKey]);
   };
-  const viewportRef = import_react37.default.useRef(null);
+  const viewportRef = import_react38.default.useRef(null);
+  const tableRef = import_react38.default.useRef(null);
   useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
+  const autoFitColumn = import_react38.default.useCallback((columnKey) => {
+    const tableElement = tableRef.current;
+    if (!tableElement) return;
+    const nodes = Array.from(
+      tableElement.querySelectorAll(`[data-underverse-column-key="${columnKey}"]`)
+    );
+    if (nodes.length === 0) return;
+    const hasOverflow = nodes.some((node) => isNodeOverflowing(node));
+    if (!hasOverflow) return;
+    const measuredWidth = nodes.reduce((maxWidth, node) => {
+      const nextWidth2 = measureNaturalContentWidth(node);
+      return Math.max(maxWidth, nextWidth2);
+    }, 0);
+    const currentRenderedWidth = nodes.reduce((maxWidth, node) => {
+      const nextWidth2 = Math.max(
+        Math.ceil(node.getBoundingClientRect().width || 0),
+        node.offsetWidth || 0,
+        node.clientWidth || 0
+      );
+      return Math.max(maxWidth, nextWidth2);
+    }, 0);
+    if (measuredWidth <= 0) return;
+    if (currentRenderedWidth > 0 && measuredWidth <= currentRenderedWidth + AUTO_FIT_BUFFER_PX) return;
+    const nextWidth = Math.max(80, measuredWidth + AUTO_FIT_BUFFER_PX);
+    setColumnWidthOverrides((prev) => {
+      if (prev[columnKey] === nextWidth) return prev;
+      return { ...prev, [columnKey]: nextWidth };
+    });
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       DataTableToolbar,
       {
         caption,
         toolbar,
-        columns,
+        columns: columnsWithWidthOverrides,
         visibleCols,
         setVisibleCols,
         enableDensityToggle,
@@ -21392,6 +21579,7 @@ function DataTable({
             children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
               Table,
               {
+                ref: tableRef,
                 disableContainer: true,
                 className: cn(
                   "table-fixed",
@@ -21414,6 +21602,8 @@ function DataTable({
                       setCurPage,
                       setFilters,
                       setSort,
+                      onAutoFitColumn: autoFitColumn,
+                      enableHeaderAutoFit,
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
                       t
@@ -21460,10 +21650,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // src/components/Form.tsx
-var React62 = __toESM(require("react"), 1);
+var React63 = __toESM(require("react"), 1);
 var import_react_hook_form = require("react-hook-form");
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var FormConfigContext = React62.createContext({ size: "md" });
+var FormConfigContext = React63.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -21476,7 +21666,7 @@ var FormWrapper = ({
   const methods = (0, import_react_hook_form.useForm)({
     defaultValues: initialValues
   });
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
@@ -21485,15 +21675,15 @@ var FormWrapper = ({
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React62.createContext({});
+var FormFieldContext = React63.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_hook_form.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React62.useContext(FormFieldContext);
-  const itemContext = React62.useContext(FormItemContext);
+  const fieldContext = React63.useContext(FormFieldContext);
+  const itemContext = React63.useContext(FormItemContext);
   const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
   if (!fieldContext) {
     throw new Error("useFormField must be used within FormField");
@@ -21509,16 +21699,16 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React62.createContext({});
-var FormItem = React62.forwardRef(({ className, ...props }, ref) => {
-  const id = React62.useId();
+var FormItemContext = React63.createContext({});
+var FormItem = React63.forwardRef(({ className, ...props }, ref) => {
+  const id = React63.useId();
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React62.forwardRef(
+var FormLabel = React63.forwardRef(
   ({ className, children, required, ...props }, ref) => {
     const { error, formItemId } = useFormField();
-    const config = React62.useContext(FormConfigContext);
+    const config = React63.useContext(FormConfigContext);
     const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
       children,
@@ -21527,7 +21717,7 @@ var FormLabel = React62.forwardRef(
   }
 );
 FormLabel.displayName = "FormLabel";
-var FormControl = React62.forwardRef(({ ...props }, ref) => {
+var FormControl = React63.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "div",
@@ -21541,12 +21731,12 @@ var FormControl = React62.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React62.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React63.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React62.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React63.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
@@ -21555,7 +21745,7 @@ var FormMessage = React62.forwardRef(({ className, children, ...props }, ref) =>
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+var FormInput = React63.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   FormField,
   {
     name,
@@ -21566,7 +21756,7 @@ var FormInput = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+var FormCheckbox = React63.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   FormField,
   {
     name,
@@ -21590,9 +21780,9 @@ var FormCheckbox = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React62.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React63.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React62.forwardRef(
+var FormSubmitButton = React63.forwardRef(
   ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
 );
 FormSubmitButton.displayName = "FormSubmitButton";
@@ -21674,7 +21864,7 @@ function AccessDenied({
 
 // src/components/ThemeToggleHeadless.tsx
 var import_lucide_react38 = require("lucide-react");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_react_dom6 = require("react-dom");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
@@ -21683,10 +21873,10 @@ function ThemeToggleHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react38.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react39.useState)(false);
   const isHydrated = useHydrated();
-  const triggerRef = (0, import_react38.useRef)(null);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react38.useState)(null);
+  const triggerRef = (0, import_react39.useRef)(null);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react39.useState)(null);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react38.Sun },
     { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react38.Moon },
@@ -21775,7 +21965,7 @@ function ThemeToggleHeadless({
 }
 
 // src/components/LanguageSwitcherHeadless.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_dom7 = require("react-dom");
 var import_lucide_react39 = require("lucide-react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
@@ -21786,9 +21976,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();
@@ -21882,7 +22072,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // ../../lib/i18n/translation-adapter.tsx
-var React64 = __toESM(require("react"), 1);
+var React65 = __toESM(require("react"), 1);
 var import_jsx_runtime72 = require("react/jsx-runtime");
 function isUnresolvedTranslation2(value, namespace, key) {
   return value === key || value === `${namespace}.${key}`;
@@ -21907,7 +22097,7 @@ function useTranslations(namespace) {
   const nextIntlBridge = useNextIntlBridge();
   const internalLocale = useUnderverseLocale();
   const internalT = useUnderverseTranslations(namespace);
-  return React64.useCallback((key, params) => {
+  return React65.useCallback((key, params) => {
     if (nextIntlBridge) {
       const nextIntlResult = nextIntlBridge.translate(namespace, key, params);
       if (nextIntlResult.translated && !isUnresolvedTranslation2(nextIntlResult.translated, namespace, key)) {
@@ -21932,8 +22122,8 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-var import_react52 = __toESM(require("react"), 1);
-var import_react53 = require("@tiptap/react");
+var import_react53 = __toESM(require("react"), 1);
+var import_react54 = require("@tiptap/react");
 
 // src/components/UEditor/extensions.ts
 var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
@@ -21971,8 +22161,8 @@ var import_lowlight = require("lowlight");
 // src/components/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 = __toESM(require("react"), 1);
+var import_react41 = require("@tiptap/react");
+var import_react42 = __toESM(require("react"), 1);
 var import_lucide_react40 = require("lucide-react");
 var import_tippy = __toESM(require("tippy.js"), 1);
 var import_jsx_runtime73 = require("react/jsx-runtime");
@@ -22003,9 +22193,9 @@ var DEFAULT_MESSAGES = {
   tableDesc: "Insert a table"
 };
 function useResettingIndex2(resetToken) {
-  const [state, setState] = import_react41.default.useState({ resetToken, index: 0 });
+  const [state, setState] = import_react42.default.useState({ resetToken, index: 0 });
   const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
-  const setSelectedIndex = import_react41.default.useCallback((nextIndex) => {
+  const setSelectedIndex = import_react42.default.useCallback((nextIndex) => {
     setState((prev) => {
       const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
       return {
@@ -22144,14 +22334,14 @@ function buildSlashCommandItems({
     }
   ].filter((item) => item.title.toLowerCase().includes(query.toLowerCase()));
 }
-var SlashCommandList = (0, import_react41.forwardRef)((props, ref) => {
+var SlashCommandList = (0, import_react42.forwardRef)((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useResettingIndex2(props.items);
-  const listRef = (0, import_react41.useRef)(null);
-  (0, import_react41.useEffect)(() => {
+  const listRef = (0, import_react42.useRef)(null);
+  (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 (props.items.length === 0) {
         return false;
@@ -22234,7 +22424,7 @@ var SlashCommand = import_core.Extension.create({
           let popup;
           return {
             onStart: (props) => {
-              component = new import_react40.ReactRenderer(SlashCommandList, {
+              component = new import_react41.ReactRenderer(SlashCommandList, {
                 props: {
                   ...props,
                   messages
@@ -22382,16 +22572,16 @@ var ClipboardImages = import_core2.Extension.create({
 // src/components/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 = __toESM(require("react"), 1);
+var import_react44 = __toESM(require("react"), 1);
 var import_lucide_react41 = require("lucide-react");
 var import_tippy2 = __toESM(require("tippy.js"), 1);
 var import_jsx_runtime74 = require("react/jsx-runtime");
 function useResettingIndex3(resetToken) {
-  const [state, setState] = import_react43.default.useState({ resetToken, index: 0 });
+  const [state, setState] = import_react44.default.useState({ resetToken, index: 0 });
   const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
-  const setSelectedIndex = import_react43.default.useCallback((nextIndex) => {
+  const setSelectedIndex = import_react44.default.useCallback((nextIndex) => {
     setState((prev) => {
       const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
       return {
@@ -22402,9 +22592,9 @@ function useResettingIndex3(resetToken) {
   }, [resetToken]);
   return [selectedIndex, setSelectedIndex];
 }
-var EmojiList = (0, import_react43.forwardRef)((props, ref) => {
+var EmojiList = (0, import_react44.forwardRef)((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useResettingIndex3(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);
@@ -22491,7 +22681,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
               });
@@ -22609,10 +22799,10 @@ var UEditorPlaceholder = import_core4.Extension.create({
 });
 
 // src/components/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_core5 = require("@tiptap/core");
-var import_react45 = require("@tiptap/react");
+var import_react46 = require("@tiptap/react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var MIN_IMAGE_SIZE_PX = 40;
 var AXIS_LOCK_THRESHOLD_PX = 4;
@@ -22658,17 +22848,17 @@ function getImageLayoutStyles(layout) {
 }
 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 imageLayout = parseImageLayout(node.attrs["imageLayout"]);
   const preserveAspectByDefault = imageLayout === "left" || imageLayout === "right";
-  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` : "";
@@ -22765,7 +22955,7 @@ function ResizableImageNodeView(props) {
   const wrapperAlignClass = imageLayout === "block" ? textAlign === "center" ? "mx-auto" : textAlign === "right" ? "ml-auto" : textAlign === "justify" ? "mx-auto" : "" : "";
   const wrapperLayoutClass = imageLayout === "left" ? "float-left mr-4 mb-3 mt-1 clear-none max-w-[min(45%,20rem)]" : imageLayout === "right" ? "float-right ml-4 mb-3 mt-1 clear-none max-w-[min(45%,20rem)]" : "w-fit";
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
-    import_react45.NodeViewWrapper,
+    import_react46.NodeViewWrapper,
     {
       as: "div",
       ref: wrapperRef,
@@ -22866,7 +23056,7 @@ var ResizableImage = import_extension_image.default.extend({
     return ["img", (0, import_core5.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes)];
   },
   addNodeView() {
-    return (0, import_react45.ReactNodeViewRenderer)(ResizableImageNodeView);
+    return (0, import_react46.ReactNodeViewRenderer)(ResizableImageNodeView);
   }
 }).configure({
   allowBase64: true,
@@ -23032,16 +23222,16 @@ function buildUEditorExtensions({
 }
 
 // src/components/UEditor/toolbar.tsx
-var import_react49 = __toESM(require("react"), 1);
+var import_react50 = __toESM(require("react"), 1);
 var import_lucide_react45 = require("lucide-react");
 
 // src/components/UEditor/colors.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_lucide_react42 = require("lucide-react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var useEditorColors = () => {
   const t = useSmartTranslations("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" },
@@ -23054,7 +23244,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" },
@@ -23189,7 +23379,7 @@ function deleteSelectedImage(editor) {
 }
 
 // src/components/UEditor/inputs.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_lucide_react43 = require("lucide-react");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 function normalizeUrl(raw) {
@@ -23205,9 +23395,9 @@ var LinkInput = ({
   initialUrl = ""
 }) => {
   const t = useSmartTranslations("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();
   }, []);
@@ -23234,10 +23424,10 @@ var LinkInput = ({
 };
 var ImageInput = ({ onSubmit, onCancel }) => {
   const t = useSmartTranslations("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) => {
@@ -23290,7 +23480,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
 };
 
 // src/components/UEditor/emoji-picker.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_lucide_react44 = require("lucide-react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var CATEGORY_ICONS2 = {
@@ -23304,12 +23494,12 @@ var CATEGORY_ICONS2 = {
 };
 var EmojiPicker2 = ({ onSelect, onClose }) => {
   const t = useSmartTranslations("UEditor");
-  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) => ({
@@ -23323,7 +23513,7 @@ var EmojiPicker2 = ({ onSelect, onClose }) => {
     onSelect(emoji);
     setSearch("");
   };
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (search) return;
     const container = scrollContainerRef.current;
     if (!container) return;
@@ -23363,7 +23553,7 @@ var EmojiPicker2 = ({ onSelect, onClose }) => {
       isUserScrolling.current = true;
     }, 500);
   };
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     isUserScrolling.current = true;
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "w-96 bg-card border border-border/50 rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-128", children: [
@@ -23482,7 +23672,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_runtime79.jsx)(
     "button",
     {
@@ -23520,10 +23710,10 @@ var EditorToolbar = ({
 }) => {
   const t = useSmartTranslations("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 isImageSelected = editor.isActive("image");
   const imageAttrs = editor.getAttributes("image");
   const imageLayout = imageAttrs.imageLayout === "left" || imageAttrs.imageLayout === "right" ? imageAttrs.imageLayout : "block";
@@ -24073,16 +24263,16 @@ var EditorToolbar = ({
 };
 
 // src/components/UEditor/menus.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react46 = require("lucide-react");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var FloatingSlashCommandMenu = ({ editor, onClose }) => {
   const t = useSmartTranslations("UEditor");
-  const messages = (0, import_react50.useMemo)(() => buildSlashCommandMessages(t), [t]);
-  const items = (0, import_react50.useMemo)(() => buildSlashCommandItems({ query: "", messages }), [messages]);
-  const listRef = (0, import_react50.useRef)(null);
-  (0, import_react50.useEffect)(() => {
+  const messages = (0, import_react51.useMemo)(() => buildSlashCommandMessages(t), [t]);
+  const items = (0, import_react51.useMemo)(() => buildSlashCommandItems({ query: "", messages }), [messages]);
+  const listRef = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     const handleKeyDown2 = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -24112,7 +24302,7 @@ var FloatingSlashCommandMenu = ({ editor, onClose }) => {
 };
 var FloatingMenuContent = ({ editor }) => {
   const t = useSmartTranslations("UEditor");
-  const [showCommands, setShowCommands] = (0, import_react50.useState)(false);
+  const [showCommands, setShowCommands] = (0, import_react51.useState)(false);
   if (showCommands) {
     return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FloatingSlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
   }
@@ -24135,16 +24325,16 @@ var BubbleMenuContent = ({
 }) => {
   const t = useSmartTranslations("UEditor");
   const { textColors, highlightColors } = useEditorColors();
-  const [showLinkInput, setShowLinkInput] = (0, import_react50.useState)(false);
-  const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react50.useState)(false);
+  const [showLinkInput, setShowLinkInput] = (0, import_react51.useState)(false);
+  const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react51.useState)(false);
   const isImageSelected = editor.isActive("image");
   const imageAttrs = editor.getAttributes("image");
   const imageLayout = imageAttrs.imageLayout === "left" || imageAttrs.imageLayout === "right" ? imageAttrs.imageLayout : "block";
   const imageWidthPreset = imageAttrs.imageWidthPreset === "sm" || imageAttrs.imageWidthPreset === "md" || imageAttrs.imageWidthPreset === "lg" ? imageAttrs.imageWidthPreset : null;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!showLinkInput) return;
     const close2 = () => setShowLinkInput(false);
     editor.on("selectionUpdate", close2);
@@ -24282,16 +24472,16 @@ var BubbleMenuContent = ({
 };
 var CustomBubbleMenu = ({ editor }) => {
   const SHOW_DELAY_MS = 180;
-  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 showTimeoutRef = (0, import_react50.useRef)(null);
-  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 showTimeoutRef = (0, import_react51.useRef)(null);
+  const setKeepOpen = (0, import_react51.useCallback)((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const clearShowTimeout = () => {
       if (showTimeoutRef.current) {
         clearTimeout(showTimeoutRef.current);
@@ -24364,9 +24554,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;
@@ -24684,7 +24874,7 @@ async function prepareUEditorContentForSave({
 }
 
 // src/components/UEditor/table-controls.tsx
-var import_react51 = __toESM(require("react"), 1);
+var import_react52 = __toESM(require("react"), 1);
 
 // node_modules/prosemirror-model/dist/index.js
 function findDiffStart(a, b, pos) {
@@ -29000,14 +29190,14 @@ function collectChildren(node) {
 }
 function TableControls({ editor, containerRef }) {
   const t = useSmartTranslations("UEditor");
-  const [layout, setLayout] = import_react51.default.useState(null);
-  const [dragPreview, setDragPreview] = import_react51.default.useState(null);
-  const layoutRef = import_react51.default.useRef(null);
-  const dragStateRef = import_react51.default.useRef(null);
-  import_react51.default.useEffect(() => {
+  const [layout, setLayout] = import_react52.default.useState(null);
+  const [dragPreview, setDragPreview] = import_react52.default.useState(null);
+  const layoutRef = import_react52.default.useRef(null);
+  const dragStateRef = import_react52.default.useRef(null);
+  import_react52.default.useEffect(() => {
     layoutRef.current = layout;
   }, [layout]);
-  const syncFromCell = import_react51.default.useCallback((cell) => {
+  const syncFromCell = import_react52.default.useCallback((cell) => {
     const surface = containerRef.current;
     if (!surface || !cell) {
       setLayout(null);
@@ -29015,10 +29205,10 @@ function TableControls({ editor, containerRef }) {
     }
     setLayout(buildLayout(editor, surface, cell));
   }, [containerRef, editor]);
-  const syncFromSelection = import_react51.default.useCallback(() => {
+  const syncFromSelection = import_react52.default.useCallback(() => {
     syncFromCell(getSelectedCell(editor));
   }, [editor, syncFromCell]);
-  const refreshCurrentLayout = import_react51.default.useCallback(() => {
+  const refreshCurrentLayout = import_react52.default.useCallback(() => {
     setLayout((prev) => {
       if (!prev) return prev;
       const surface = containerRef.current;
@@ -29028,12 +29218,12 @@ function TableControls({ editor, containerRef }) {
       return cell ? buildLayout(editor, surface, cell) : null;
     });
   }, [containerRef, editor]);
-  const clearDrag = import_react51.default.useCallback(() => {
+  const clearDrag = import_react52.default.useCallback(() => {
     dragStateRef.current = null;
     setDragPreview(null);
     document.body.style.cursor = "";
   }, []);
-  import_react51.default.useEffect(() => {
+  import_react52.default.useEffect(() => {
     const proseMirror = editor.view.dom;
     const surface = containerRef.current;
     if (!surface) return void 0;
@@ -29067,7 +29257,7 @@ function TableControls({ editor, containerRef }) {
       editor.off("update", refreshCurrentLayout);
     };
   }, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection]);
-  const runAtCellPos = import_react51.default.useCallback((cellPos, command, options) => {
+  const runAtCellPos = import_react52.default.useCallback((cellPos, command, options) => {
     if (cellPos == null) return false;
     focusCell(editor, cellPos);
     const result = command(editor.chain().focus(null, { scrollIntoView: false })).run();
@@ -29076,17 +29266,17 @@ function TableControls({ editor, containerRef }) {
     }
     return result;
   }, [editor, syncFromSelection]);
-  const runAtActiveCell = import_react51.default.useCallback((command, options) => {
+  const runAtActiveCell = import_react52.default.useCallback((command, options) => {
     return runAtCellPos(layoutRef.current?.cellPos ?? null, command, options);
   }, [runAtCellPos]);
-  const getCurrentCornerCellPos = import_react51.default.useCallback(() => {
+  const getCurrentCornerCellPos = import_react52.default.useCallback(() => {
     const activePos = layoutRef.current?.cellPos ?? editor.state.selection.from;
     return getLastCellPosFromState(editor, activePos);
   }, [editor]);
-  const runAtCornerCell = import_react51.default.useCallback((command, options) => {
+  const runAtCornerCell = import_react52.default.useCallback((command, options) => {
     return runAtCellPos(getCurrentCornerCellPos(), command, options);
   }, [getCurrentCornerCellPos, runAtCellPos]);
-  const replaceTableAtCellPos = import_react51.default.useCallback((cellPos, updateTable) => {
+  const replaceTableAtCellPos = import_react52.default.useCallback((cellPos, updateTable) => {
     if (cellPos == null) return false;
     const tableInfo = findTableInfo(editor, cellPos);
     if (!tableInfo) return false;
@@ -29096,10 +29286,10 @@ function TableControls({ editor, containerRef }) {
     requestAnimationFrame(syncFromSelection);
     return true;
   }, [editor, syncFromSelection]);
-  const createEmptyCellNode = import_react51.default.useCallback((cellNode) => {
+  const createEmptyCellNode = import_react52.default.useCallback((cellNode) => {
     return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
   }, []);
-  const duplicateRowAt = import_react51.default.useCallback((rowIndex, cellPos) => {
+  const duplicateRowAt = import_react52.default.useCallback((rowIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode);
       const rowNode = rows[rowIndex];
@@ -29108,7 +29298,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [replaceTableAtCellPos]);
-  const clearRowAt = import_react51.default.useCallback((rowIndex, cellPos) => {
+  const clearRowAt = import_react52.default.useCallback((rowIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode);
       const rowNode = rows[rowIndex];
@@ -29118,7 +29308,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [createEmptyCellNode, replaceTableAtCellPos]);
-  const duplicateColumnAt = import_react51.default.useCallback((columnIndex, cellPos) => {
+  const duplicateColumnAt = import_react52.default.useCallback((columnIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode).map((rowNode) => {
         const cells = collectChildren(rowNode);
@@ -29130,7 +29320,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [replaceTableAtCellPos]);
-  const clearColumnAt = import_react51.default.useCallback((columnIndex, cellPos) => {
+  const clearColumnAt = import_react52.default.useCallback((columnIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode).map((rowNode) => {
         const cells = collectChildren(rowNode);
@@ -29142,7 +29332,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [createEmptyCellNode, replaceTableAtCellPos]);
-  const expandTableBy = import_react51.default.useCallback((rows, cols) => {
+  const expandTableBy = import_react52.default.useCallback((rows, cols) => {
     let ok = true;
     for (let index = 0; index < rows; index += 1) {
       ok = runAtCornerCell((chain) => chain.addRowAfter(), { sync: false });
@@ -29156,7 +29346,7 @@ function TableControls({ editor, containerRef }) {
     return true;
   }, [runAtCornerCell, syncFromSelection]);
   const canExpandTable = Boolean(layout);
-  import_react51.default.useEffect(() => {
+  import_react52.default.useEffect(() => {
     const handleMouseMove = (event) => {
       const dragState = dragStateRef.current;
       const activeLayout = layoutRef.current;
@@ -29243,7 +29433,7 @@ function TableControls({ editor, containerRef }) {
       window.removeEventListener("blur", clearDrag);
     };
   }, [clearDrag, containerRef, editor, expandTableBy, syncFromSelection]);
-  const menuItems = import_react51.default.useMemo(() => {
+  const menuItems = import_react52.default.useMemo(() => {
     if (!layout) return [];
     return [
       {
@@ -29296,7 +29486,7 @@ function TableControls({ editor, containerRef }) {
       }
     ];
   }, [layout, runAtActiveCell, t]);
-  const getRowHandleMenuItems = import_react51.default.useCallback((rowHandle) => [
+  const getRowHandleMenuItems = import_react52.default.useCallback((rowHandle) => [
     {
       label: t("tableMenu.addRowBefore"),
       icon: import_lucide_react47.ArrowUp,
@@ -29324,7 +29514,7 @@ function TableControls({ editor, containerRef }) {
       destructive: true
     }
   ], [clearRowAt, duplicateRowAt, runAtCellPos, t]);
-  const getColumnHandleMenuItems = import_react51.default.useCallback((columnHandle) => [
+  const getColumnHandleMenuItems = import_react52.default.useCallback((columnHandle) => [
     {
       label: t("tableMenu.addColumnBefore"),
       icon: import_lucide_react47.ArrowLeft,
@@ -29672,7 +29862,7 @@ function getRelativeBoundaryMetrics(surface, table, row, cell) {
     columnRight: cellRect.right - surfaceRect.left + surface.scrollLeft
   };
 }
-var UEditor = import_react52.default.forwardRef(({
+var UEditor = import_react53.default.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
@@ -29695,37 +29885,37 @@ var UEditor = import_react52.default.forwardRef(({
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = (0, import_react52.useRef)(null);
-  const editorContentRef = (0, import_react52.useRef)(null);
-  const tableColumnGuideRef = (0, import_react52.useRef)(null);
-  const tableRowGuideRef = (0, import_react52.useRef)(null);
-  const rowResizeStateRef = (0, import_react52.useRef)(null);
-  const setEditorResizeCursor = import_react52.default.useCallback((cursor) => {
+  const inFlightPrepareRef = (0, import_react53.useRef)(null);
+  const editorContentRef = (0, import_react53.useRef)(null);
+  const tableColumnGuideRef = (0, import_react53.useRef)(null);
+  const tableRowGuideRef = (0, import_react53.useRef)(null);
+  const rowResizeStateRef = (0, import_react53.useRef)(null);
+  const setEditorResizeCursor = import_react53.default.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
   }, []);
-  const hideColumnGuide = import_react52.default.useCallback(() => {
+  const hideColumnGuide = import_react53.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const hideRowGuide = import_react52.default.useCallback(() => {
+  const hideRowGuide = import_react53.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const clearAllTableResizeHover = import_react52.default.useCallback(() => {
+  const clearAllTableResizeHover = import_react53.default.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
     hideRowGuide();
   }, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
-  const showColumnGuide = import_react52.default.useCallback((table, row, cell) => {
+  const showColumnGuide = import_react53.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableColumnGuideRef.current;
     if (!surface || !guide) return;
@@ -29738,7 +29928,7 @@ var UEditor = import_react52.default.forwardRef(({
     surface.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
   }, [setEditorResizeCursor]);
-  const showRowGuide = import_react52.default.useCallback((table, row, cell) => {
+  const showRowGuide = import_react53.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
     if (!surface || !guide) return;
@@ -29751,11 +29941,11 @@ var UEditor = import_react52.default.forwardRef(({
     surface.classList.add("resize-row-cursor");
     setEditorResizeCursor("row-resize");
   }, [setEditorResizeCursor]);
-  const extensions = (0, import_react52.useMemo)(
+  const extensions = (0, import_react53.useMemo)(
     () => buildUEditorExtensions({ placeholder: effectivePlaceholder, translate: t, maxCharacters, uploadImage, imageInsertMode, editable }),
     [effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, editable]
   );
-  const editor = (0, import_react53.useEditor)({
+  const editor = (0, import_react54.useEditor)({
     immediatelyRender: false,
     extensions,
     content,
@@ -29906,7 +30096,7 @@ var UEditor = import_react52.default.forwardRef(({
       onJsonChange?.(editor2.getJSON());
     }
   });
-  (0, import_react52.useImperativeHandle)(
+  (0, import_react53.useImperativeHandle)(
     ref,
     () => ({
       prepareContentForSave: async ({ throwOnError = false } = {}) => {
@@ -29928,14 +30118,14 @@ var UEditor = import_react52.default.forwardRef(({
     }),
     [content, editor, uploadImageForSave]
   );
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (editor && content !== editor.getHTML()) {
       if (editor.isEmpty && content) {
         editor.commands.setContent(content);
       }
     }
   }, [content, editor]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!editor) return void 0;
     const proseMirror = editor.view.dom;
     const handleEditorMouseMove = (event) => {
@@ -30136,7 +30326,7 @@ var UEditor = import_react52.default.forwardRef(({
               ),
               editable && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TableControls, { editor, containerRef: editorContentRef }),
               /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-                import_react53.EditorContent,
+                import_react54.EditorContent,
                 {
                   editor,
                   className: "min-h-full"