@underverse-ui/underverse 1.0.70 → 1.0.72

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) {
@@ -28849,6 +29039,19 @@ var import_lucide_react47 = require("lucide-react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var FALLBACK_TABLE_ROW_HEIGHT = 44;
 var FALLBACK_TABLE_COLUMN_WIDTH = 160;
+var MENU_HOVER_PADDING = 18;
+var ROW_HANDLE_HOVER_WIDTH = 28;
+var COLUMN_HANDLE_HOVER_HEIGHT = 28;
+var ADD_COLUMN_HOVER_WIDTH = 24;
+var ADD_ROW_HOVER_HEIGHT = 24;
+var HANDLE_HOVER_RADIUS = 14;
+var DEFAULT_HOVER_STATE = {
+  menuVisible: false,
+  addColumnVisible: false,
+  addRowVisible: false,
+  rowHandleIndex: null,
+  columnHandleIndex: null
+};
 function resolveElement(target) {
   if (target instanceof Element) return target;
   if (target instanceof Node) return target.parentElement;
@@ -28974,6 +29177,12 @@ function buildLayout(editor, surface, cell) {
   };
 }
 function getSelectedCell(editor) {
+  const browserSelection = window.getSelection();
+  const anchorElement = resolveElement(browserSelection?.anchorNode ?? null);
+  const anchorCell = anchorElement?.closest?.("th,td");
+  if (anchorCell instanceof HTMLTableCellElement) {
+    return anchorCell;
+  }
   const domAtPos = editor.view.domAtPos(editor.state.selection.from);
   return getCellFromTarget(domAtPos.node);
 }
@@ -29000,14 +29209,15 @@ 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 [hoverState, setHoverState] = import_react52.default.useState(DEFAULT_HOVER_STATE);
+  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 +29225,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,22 +29238,55 @@ 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(() => {
+  const updateHoverState = import_react52.default.useCallback((event) => {
+    const activeLayout = layoutRef.current;
+    const surface = containerRef.current;
+    if (!activeLayout || !surface || dragStateRef.current) {
+      setHoverState(DEFAULT_HOVER_STATE);
+      return;
+    }
+    const surfaceRect = surface.getBoundingClientRect();
+    const relativeX = event.clientX - surfaceRect.left + surface.scrollLeft;
+    const relativeY = event.clientY - surfaceRect.top + surface.scrollTop;
+    const rowHandleIndex = activeLayout.rowHandles.find((rowHandle) => relativeX >= activeLayout.tableLeft - ROW_HANDLE_HOVER_WIDTH && relativeX <= activeLayout.tableLeft && Math.abs(relativeY - rowHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
+    const columnHandleIndex = activeLayout.columnHandles.find((columnHandle) => relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop && Math.abs(relativeX - columnHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
+    const menuVisible = relativeX >= activeLayout.tableLeft - MENU_HOVER_PADDING && relativeX <= activeLayout.tableLeft + 42 && relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop + MENU_HOVER_PADDING;
+    const addColumnVisible = relativeX >= activeLayout.tableLeft + activeLayout.tableWidth && relativeX <= activeLayout.tableLeft + activeLayout.tableWidth + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + activeLayout.tableHeight;
+    const addRowVisible = relativeY >= activeLayout.tableTop + activeLayout.tableHeight && relativeY <= activeLayout.tableTop + activeLayout.tableHeight + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + activeLayout.tableWidth;
+    setHoverState((prev) => {
+      if (prev.menuVisible === menuVisible && prev.addColumnVisible === addColumnVisible && prev.addRowVisible === addRowVisible && prev.rowHandleIndex === rowHandleIndex && prev.columnHandleIndex === columnHandleIndex) {
+        return prev;
+      }
+      return {
+        menuVisible,
+        addColumnVisible,
+        addRowVisible,
+        rowHandleIndex,
+        columnHandleIndex
+      };
+    });
+  }, [containerRef]);
+  import_react52.default.useEffect(() => {
     const proseMirror = editor.view.dom;
     const surface = containerRef.current;
     if (!surface) return void 0;
     const handleMouseOver = (event) => {
       if (dragStateRef.current) return;
-      syncFromCell(getCellFromTarget(event.target));
+      const cell = getCellFromTarget(event.target);
+      if (!cell) return;
+      syncFromCell(cell);
+    };
+    const handleSurfaceMouseMove = (event) => {
+      updateHoverState(event);
     };
     const handleMouseLeave = () => {
       if (dragStateRef.current) return;
-      syncFromSelection();
+      setHoverState(DEFAULT_HOVER_STATE);
     };
     const handleFocusIn = () => {
       if (dragStateRef.current) return;
@@ -29052,6 +29295,7 @@ function TableControls({ editor, containerRef }) {
     proseMirror.addEventListener("mouseover", handleMouseOver);
     proseMirror.addEventListener("mouseleave", handleMouseLeave);
     proseMirror.addEventListener("focusin", handleFocusIn);
+    surface.addEventListener("mousemove", handleSurfaceMouseMove);
     surface.addEventListener("scroll", refreshCurrentLayout, { passive: true });
     window.addEventListener("resize", refreshCurrentLayout);
     editor.on("selectionUpdate", syncFromSelection);
@@ -29061,13 +29305,14 @@ function TableControls({ editor, containerRef }) {
       proseMirror.removeEventListener("mouseover", handleMouseOver);
       proseMirror.removeEventListener("mouseleave", handleMouseLeave);
       proseMirror.removeEventListener("focusin", handleFocusIn);
+      surface.removeEventListener("mousemove", handleSurfaceMouseMove);
       surface.removeEventListener("scroll", refreshCurrentLayout);
       window.removeEventListener("resize", refreshCurrentLayout);
       editor.off("selectionUpdate", syncFromSelection);
       editor.off("update", refreshCurrentLayout);
     };
-  }, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection]);
-  const runAtCellPos = import_react51.default.useCallback((cellPos, command, options) => {
+  }, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection, updateHoverState]);
+  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 +29321,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 +29341,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 +29353,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 +29363,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 +29375,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 +29387,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 +29401,8 @@ function TableControls({ editor, containerRef }) {
     return true;
   }, [runAtCornerCell, syncFromSelection]);
   const canExpandTable = Boolean(layout);
-  import_react51.default.useEffect(() => {
+  const controlsVisible = dragPreview !== null;
+  import_react52.default.useEffect(() => {
     const handleMouseMove = (event) => {
       const dragState = dragStateRef.current;
       const activeLayout = layoutRef.current;
@@ -29243,7 +29489,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 +29542,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 +29570,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,
@@ -29367,107 +29613,147 @@ function TableControls({ editor, containerRef }) {
   const expandPreviewHeight = dragPreview?.kind === "add-row" ? layout.tableHeight + dragPreview.previewRows * layout.avgRowHeight : layout.tableHeight;
   const dragStatusText = dragPreview?.kind === "row" ? `${t("tableMenu.dragRow")} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview?.kind === "column" ? `${t("tableMenu.dragColumn")} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview?.kind === "add-row" ? `+${dragPreview.previewRows}R` : dragPreview?.kind === "add-column" ? `+${dragPreview.previewCols}C` : null;
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-    layout.rowHandles.map((rowHandle) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "absolute z-30", style: { top: Math.max(8, rowHandle.center - 12), left: rowHandleLeft }, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      DropdownMenu,
-      {
-        placement: "right",
-        items: getRowHandleMenuItems(rowHandle),
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          "button",
-          {
-            type: "button",
-            "aria-label": `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
-            title: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              dragStateRef.current = {
-                kind: "row",
-                originIndex: rowHandle.index,
-                targetIndex: rowHandle.index,
-                anchorPos: rowHandle.cellPos
-              };
-              setDragPreview({
-                kind: "row",
-                originIndex: rowHandle.index,
-                targetIndex: rowHandle.index,
-                targetStart: rowHandle.start,
-                targetSize: rowHandle.size
-              });
-              document.body.style.cursor = "grabbing";
-            },
-            className: cn(
-              "inline-flex h-6 w-6 items-center justify-center rounded-full",
-              "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
-              "transition-colors hover:bg-accent hover:text-foreground"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.GripVertical, { className: "h-3.5 w-3.5" })
-          }
-        )
-      }
-    ) }, `row-handle-${rowHandle.index}`)),
-    layout.columnHandles.map((columnHandle) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "absolute z-30", style: { top: columnHandleTop, left: Math.max(8, columnHandle.center - 12) }, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      DropdownMenu,
-      {
-        placement: "bottom-start",
-        items: getColumnHandleMenuItems(columnHandle),
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          "button",
-          {
-            type: "button",
-            "aria-label": `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
-            title: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              dragStateRef.current = {
-                kind: "column",
-                originIndex: columnHandle.index,
-                targetIndex: columnHandle.index,
-                anchorPos: columnHandle.cellPos
-              };
-              setDragPreview({
-                kind: "column",
-                originIndex: columnHandle.index,
-                targetIndex: columnHandle.index,
-                targetStart: columnHandle.start,
-                targetSize: columnHandle.size
-              });
-              document.body.style.cursor = "grabbing";
-            },
-            className: cn(
-              "inline-flex h-6 w-6 items-center justify-center rounded-full",
-              "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
-              "transition-colors hover:bg-accent hover:text-foreground"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.GripHorizontal, { className: "h-3.5 w-3.5" })
-          }
-        )
-      }
-    ) }, `column-handle-${columnHandle.index}`)),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "pointer-events-none absolute z-30", style: { top: menuTop, left: menuLeft }, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      DropdownMenu,
+    layout.rowHandles.map((rowHandle) => {
+      const visible = controlsVisible || hoverState.rowHandleIndex === rowHandle.index;
+      if (!visible) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        "div",
+        {
+          className: "absolute z-30",
+          style: {
+            top: Math.max(8, rowHandle.center - 12),
+            left: rowHandleLeft
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+            DropdownMenu,
+            {
+              placement: "right",
+              items: getRowHandleMenuItems(rowHandle),
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
+                  title: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    dragStateRef.current = {
+                      kind: "row",
+                      originIndex: rowHandle.index,
+                      targetIndex: rowHandle.index,
+                      anchorPos: rowHandle.cellPos
+                    };
+                    setDragPreview({
+                      kind: "row",
+                      originIndex: rowHandle.index,
+                      targetIndex: rowHandle.index,
+                      targetStart: rowHandle.start,
+                      targetSize: rowHandle.size
+                    });
+                    document.body.style.cursor = "grabbing";
+                  },
+                  className: cn(
+                    "inline-flex h-6 w-6 items-center justify-center rounded-full",
+                    "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
+                    "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.GripVertical, { className: "h-3.5 w-3.5" })
+                }
+              )
+            }
+          )
+        },
+        `row-handle-${rowHandle.index}`
+      );
+    }),
+    layout.columnHandles.map((columnHandle) => {
+      const visible = controlsVisible || hoverState.columnHandleIndex === columnHandle.index;
+      if (!visible) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        "div",
+        {
+          className: "absolute z-30",
+          style: {
+            top: columnHandleTop,
+            left: Math.max(8, columnHandle.center - 12)
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+            DropdownMenu,
+            {
+              placement: "bottom-start",
+              items: getColumnHandleMenuItems(columnHandle),
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
+                  title: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    dragStateRef.current = {
+                      kind: "column",
+                      originIndex: columnHandle.index,
+                      targetIndex: columnHandle.index,
+                      anchorPos: columnHandle.cellPos
+                    };
+                    setDragPreview({
+                      kind: "column",
+                      originIndex: columnHandle.index,
+                      targetIndex: columnHandle.index,
+                      targetStart: columnHandle.start,
+                      targetSize: columnHandle.size
+                    });
+                    document.body.style.cursor = "grabbing";
+                  },
+                  className: cn(
+                    "inline-flex h-6 w-6 items-center justify-center rounded-full",
+                    "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
+                    "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.GripHorizontal, { className: "h-3.5 w-3.5" })
+                }
+              )
+            }
+          )
+        },
+        `column-handle-${columnHandle.index}`
+      );
+    }),
+    (controlsVisible || hoverState.menuVisible) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+      "div",
       {
-        placement: "bottom-start",
-        items: menuItems,
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          "button",
+        className: "absolute z-30",
+        style: {
+          top: menuTop,
+          left: menuLeft
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          DropdownMenu,
           {
-            type: "button",
-            "aria-label": t("tableMenu.openControls"),
-            title: t("tableMenu.openControls"),
-            onMouseDown: (event) => event.preventDefault(),
-            className: cn(
-              "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full",
-              "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
-              "transition-colors hover:bg-accent hover:text-foreground"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.MoreHorizontal, { className: "h-4 w-4" })
+            placement: "bottom-start",
+            items: menuItems,
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("tableMenu.openControls"),
+                title: t("tableMenu.openControls"),
+                onMouseDown: (event) => event.preventDefault(),
+                className: cn(
+                  "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full",
+                  "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
+                  "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.MoreHorizontal, { className: "h-4 w-4" })
+              }
+            )
           }
         )
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    ),
+    (controlsVisible || hoverState.addColumnVisible) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "button",
       {
         type: "button",
@@ -29485,13 +29771,18 @@ function TableControls({ editor, containerRef }) {
         className: cn(
           "absolute z-30 inline-flex items-center justify-center rounded-md",
           "border border-border/70 bg-muted/40 text-muted-foreground shadow-sm backdrop-blur",
-          "transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+          "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
         ),
-        style: { top: columnRailTop, left: columnRailLeft, width: 18, height: layout.tableHeight },
+        style: {
+          top: columnRailTop,
+          left: columnRailLeft,
+          width: 18,
+          height: layout.tableHeight
+        },
         children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    (controlsVisible || hoverState.addRowVisible) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "button",
       {
         type: "button",
@@ -29509,9 +29800,14 @@ function TableControls({ editor, containerRef }) {
         className: cn(
           "absolute z-30 inline-flex items-center justify-center rounded-md",
           "border border-border/70 bg-muted/40 text-muted-foreground shadow-sm backdrop-blur",
-          "transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+          "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
         ),
-        style: { top: rowRailTop, left: rowRailLeft, width: layout.tableWidth, height: 16 },
+        style: {
+          top: rowRailTop,
+          left: rowRailLeft,
+          width: layout.tableWidth,
+          height: 16
+        },
         children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
       }
     ),
@@ -29646,6 +29942,19 @@ function resolveEventElement(target) {
   if (target instanceof Node) return target.parentElement;
   return null;
 }
+function getSelectionTableCell(view) {
+  const browserSelection = window.getSelection();
+  const anchorElement = resolveEventElement(browserSelection?.anchorNode ?? null);
+  const anchorCell = anchorElement?.closest?.("th,td");
+  if (anchorCell instanceof HTMLElement) {
+    return anchorCell;
+  }
+  const { from } = view.state.selection;
+  const domAtPos = view.domAtPos(from);
+  const element = resolveEventElement(domAtPos.node);
+  const cell = element?.closest?.("th,td");
+  return cell instanceof HTMLElement ? cell : null;
+}
 function isRowResizeHotspot(cell, clientX, clientY) {
   const rect = cell.getBoundingClientRect();
   const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
@@ -29672,7 +29981,17 @@ function getRelativeBoundaryMetrics(surface, table, row, cell) {
     columnRight: cellRect.right - surfaceRect.left + surface.scrollLeft
   };
 }
-var UEditor = import_react52.default.forwardRef(({
+function getRelativeCellMetrics(surface, cell) {
+  const surfaceRect = surface.getBoundingClientRect();
+  const cellRect = cell.getBoundingClientRect();
+  return {
+    left: cellRect.left - surfaceRect.left + surface.scrollLeft,
+    top: cellRect.top - surfaceRect.top + surface.scrollTop,
+    width: cellRect.width,
+    height: cellRect.height
+  };
+}
+var UEditor = import_react53.default.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
@@ -29695,37 +30014,70 @@ 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 activeTableCellHighlightRef = (0, import_react53.useRef)(null);
+  const hoveredTableCellRef = (0, import_react53.useRef)(null);
+  const activeTableCellRef = (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 updateActiveCellHighlight = import_react53.default.useCallback((cell) => {
+    const surface = editorContentRef.current;
+    const highlight = activeTableCellHighlightRef.current;
+    if (!highlight) return;
+    if (!surface || !cell) {
+      highlight.style.display = "none";
+      return;
+    }
+    const metrics = getRelativeCellMetrics(surface, cell);
+    highlight.style.display = "block";
+    highlight.style.left = `${metrics.left}px`;
+    highlight.style.top = `${metrics.top}px`;
+    highlight.style.width = `${metrics.width}px`;
+    highlight.style.height = `${metrics.height}px`;
+  }, []);
+  const setActiveTableCell = import_react53.default.useCallback((cell) => {
+    if (activeTableCellRef.current === cell) return;
+    activeTableCellRef.current = cell;
+    updateActiveCellHighlight(activeTableCellRef.current);
+  }, [updateActiveCellHighlight]);
+  const clearActiveTableCell = import_react53.default.useCallback(() => {
+    activeTableCellRef.current = null;
+    updateActiveCellHighlight(null);
+  }, [updateActiveCellHighlight]);
+  const setHoveredTableCell = import_react53.default.useCallback((cell) => {
+    hoveredTableCellRef.current = cell;
+  }, []);
+  const clearHoveredTableCell = import_react53.default.useCallback(() => {
+    hoveredTableCellRef.current = null;
+  }, []);
+  const showColumnGuide = import_react53.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableColumnGuideRef.current;
     if (!surface || !guide) return;
@@ -29738,7 +30090,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 +30103,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 +30258,11 @@ var UEditor = import_react52.default.forwardRef(({
       onJsonChange?.(editor2.getJSON());
     }
   });
-  (0, import_react52.useImperativeHandle)(
+  const syncActiveTableCellFromSelection = import_react53.default.useCallback(() => {
+    if (!editor) return;
+    setActiveTableCell(getSelectionTableCell(editor.view));
+  }, [editor, setActiveTableCell]);
+  (0, import_react53.useImperativeHandle)(
     ref,
     () => ({
       prepareContentForSave: async ({ throwOnError = false } = {}) => {
@@ -29928,19 +30284,37 @@ 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 surface = editorContentRef.current;
+    let selectionSyncTimeoutId = 0;
+    const scheduleActiveCellSync = (fallbackCell = null) => {
+      requestAnimationFrame(() => {
+        setActiveTableCell(getSelectionTableCell(editor.view) ?? fallbackCell);
+      });
+      window.clearTimeout(selectionSyncTimeoutId);
+      selectionSyncTimeoutId = window.setTimeout(() => {
+        setActiveTableCell(getSelectionTableCell(editor.view) ?? fallbackCell);
+      }, 0);
+    };
+    const handleSelectionChange = () => {
+      scheduleActiveCellSync();
+    };
+    const handleActiveCellLayoutChange = () => {
+      updateActiveCellHighlight(activeTableCellRef.current);
+    };
     const handleEditorMouseMove = (event) => {
       const activeRowResize = rowResizeStateRef.current;
       if (activeRowResize) {
+        setHoveredTableCell(activeRowResize.cellElement);
         showRowGuide(activeRowResize.tableElement, activeRowResize.rowElement, activeRowResize.cellElement);
         return;
       }
@@ -29951,12 +30325,15 @@ var UEditor = import_react52.default.forwardRef(({
       }
       const cell = target.closest("th,td");
       if (!(cell instanceof HTMLElement)) {
+        clearHoveredTableCell();
         clearAllTableResizeHover();
         return;
       }
+      setHoveredTableCell(cell);
       const row = cell.closest("tr");
       const table = cell.closest("table");
       if (!(row instanceof HTMLTableRowElement) || !(table instanceof HTMLTableElement)) {
+        clearHoveredTableCell();
         clearAllTableResizeHover();
         return;
       }
@@ -29975,6 +30352,7 @@ var UEditor = import_react52.default.forwardRef(({
       clearAllTableResizeHover();
     };
     const handleEditorMouseLeave = () => {
+      clearHoveredTableCell();
       if (!rowResizeStateRef.current) {
         clearAllTableResizeHover();
       }
@@ -29982,15 +30360,24 @@ var UEditor = import_react52.default.forwardRef(({
     const handleEditorMouseDown = (event) => {
       if (event.button !== 0) return;
       const target = resolveEventElement(event.target);
-      if (!(target instanceof Element)) return;
+      if (!(target instanceof Element)) {
+        clearActiveTableCell();
+        return;
+      }
       const cell = target.closest("th,td");
-      if (!(cell instanceof HTMLTableCellElement)) return;
+      if (!(cell instanceof HTMLTableCellElement)) {
+        clearActiveTableCell();
+        return;
+      }
+      setActiveTableCell(cell);
+      scheduleActiveCellSync(cell);
       const row = cell.closest("tr");
       const table = cell.closest("table");
       if (!(row instanceof HTMLTableRowElement) || !(table instanceof HTMLTableElement)) return;
       if (!isRowResizeHotspot(cell, event.clientX, event.clientY)) {
         return;
       }
+      setHoveredTableCell(cell);
       const rowInfo = findTableRowNodeInfo(editor.view, row);
       if (!rowInfo) return;
       rowResizeStateRef.current = {
@@ -30051,6 +30438,7 @@ var UEditor = import_react52.default.forwardRef(({
       clearPreviewRowHeight(state.rowElement);
       rowResizeStateRef.current = null;
       document.body.style.cursor = "";
+      clearHoveredTableCell();
       clearAllTableResizeHover();
     };
     const handleWindowBlur = () => {
@@ -30059,30 +30447,53 @@ var UEditor = import_react52.default.forwardRef(({
       clearPreviewRowHeight(state.rowElement);
       rowResizeStateRef.current = null;
       document.body.style.cursor = "";
+      clearHoveredTableCell();
       clearAllTableResizeHover();
     };
     proseMirror.addEventListener("mousemove", handleEditorMouseMove);
     proseMirror.addEventListener("mouseleave", handleEditorMouseLeave);
     proseMirror.addEventListener("mousedown", handleEditorMouseDown);
+    proseMirror.addEventListener("click", handleSelectionChange);
+    proseMirror.addEventListener("mouseup", handleSelectionChange);
+    proseMirror.addEventListener("keyup", handleSelectionChange);
+    proseMirror.addEventListener("focusin", handleSelectionChange);
+    document.addEventListener("selectionchange", handleSelectionChange);
+    surface?.addEventListener("scroll", handleActiveCellLayoutChange, { passive: true });
+    window.addEventListener("resize", handleActiveCellLayoutChange);
     window.addEventListener("mousemove", handlePointerMove);
     document.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("mouseup", handlePointerUp);
     document.addEventListener("pointerup", handlePointerUp);
     window.addEventListener("blur", handleWindowBlur);
+    editor.on("selectionUpdate", syncActiveTableCellFromSelection);
+    editor.on("focus", syncActiveTableCellFromSelection);
+    syncActiveTableCellFromSelection();
     return () => {
       proseMirror.removeEventListener("mousemove", handleEditorMouseMove);
       proseMirror.removeEventListener("mouseleave", handleEditorMouseLeave);
       proseMirror.removeEventListener("mousedown", handleEditorMouseDown);
+      proseMirror.removeEventListener("click", handleSelectionChange);
+      proseMirror.removeEventListener("mouseup", handleSelectionChange);
+      proseMirror.removeEventListener("keyup", handleSelectionChange);
+      proseMirror.removeEventListener("focusin", handleSelectionChange);
+      document.removeEventListener("selectionchange", handleSelectionChange);
+      surface?.removeEventListener("scroll", handleActiveCellLayoutChange);
+      window.removeEventListener("resize", handleActiveCellLayoutChange);
       window.removeEventListener("mousemove", handlePointerMove);
       document.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("mouseup", handlePointerUp);
       document.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("blur", handleWindowBlur);
+      editor.off("selectionUpdate", syncActiveTableCellFromSelection);
+      editor.off("focus", syncActiveTableCellFromSelection);
+      window.clearTimeout(selectionSyncTimeoutId);
       document.body.style.cursor = "";
+      clearActiveTableCell();
+      clearHoveredTableCell();
       clearAllTableResizeHover();
       rowResizeStateRef.current = null;
     };
-  }, [clearAllTableResizeHover, editor, hideColumnGuide, hideRowGuide, showColumnGuide, showRowGuide]);
+  }, [clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editor, hideColumnGuide, hideRowGuide, setHoveredTableCell, showColumnGuide, showRowGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
   if (!editor) {
     return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       "div",
@@ -30134,9 +30545,17 @@ var UEditor = import_react52.default.forwardRef(({
                   className: "pointer-events-none absolute z-20 bg-primary opacity-0 transition-opacity duration-100"
                 }
               ),
+              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+                "span",
+                {
+                  ref: activeTableCellHighlightRef,
+                  "aria-hidden": "true",
+                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-[#2383e2] bg-[#2383e2]/[0.06] transition-[left,top,width,height] duration-100"
+                }
+              ),
               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"