@underverse-ui/underverse 1.0.70 → 1.0.72

package/dist/index.js

@@ -20112,10 +20112,65 @@ var TableCaption = React52.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/components/DataTable/DataTable.tsx
-import React61 from "react";
+import React62 from "react";
 
 // src/components/DataTable/components/DataTableBody.tsx
+import React53 from "react";
 import { jsx as jsx62, jsxs as jsxs52 } from "react/jsx-runtime";
+function DataTableOverflowText({
+  text,
+  align
+}) {
+  const triggerId = React53.useId();
+  const [isOverflowing, setIsOverflowing] = React53.useState(false);
+  const alignClass = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+  const measureOverflow = React53.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]);
+  React53.useLayoutEffect(() => {
+    measureOverflow();
+  }, [measureOverflow, text]);
+  React53.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__ */ jsx62(
+    "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__ */ jsx62(
+    Tooltip,
+    {
+      disabled: !isOverflowing,
+      placement: "top",
+      content: /* @__PURE__ */ jsx62("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,
@@ -20164,6 +20219,7 @@ function DataTableBodyRows({
           return /* @__PURE__ */ jsx62(
             TableCell,
             {
+              "data-underverse-column-key": col.key,
               style: getStickyColumnStyle(col),
               className: cn(
                 cellPadding,
@@ -20172,7 +20228,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__ */ jsx62(DataTableOverflowText, { text: String(value ?? ""), align: col.align })
             },
             col.key
           );
@@ -20184,7 +20240,7 @@ function DataTableBodyRows({
 }
 
 // src/components/DataTable/components/DataTableHeader.tsx
-import React53 from "react";
+import React54 from "react";
 import { Filter as FilterIcon } from "lucide-react";
 import { Fragment as Fragment22, jsx as jsx63, jsxs as jsxs53 } from "react/jsx-runtime";
 function DataTableHeader({
@@ -20200,11 +20256,13 @@ function DataTableHeader({
   setCurPage,
   setFilters,
   setSort,
+  onAutoFitColumn,
+  enableHeaderAutoFit,
   getStickyHeaderClass,
   getStickyHeaderCellStyle,
   t
 }) {
-  const renderFilterControl = React53.useCallback(
+  const renderFilterControl = React54.useCallback(
     (col) => {
       if (!col.filter) return null;
       const key = col.key;
@@ -20257,7 +20315,7 @@ function DataTableHeader({
     },
     [filters, setCurPage, setFilters, size]
   );
-  const renderHeaderContent = React53.useCallback(
+  const renderHeaderContent = React54.useCallback(
     (col, isLeaf) => {
       if (!isLeaf) {
         return /* @__PURE__ */ jsx63(
@@ -20397,22 +20455,55 @@ function DataTableHeader({
     const prevCol = prevCell?.column;
     const isAfterFixedLeft = prevCol?.fixed === "left";
     const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsxs53(
       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__ */ jsx63(
+            Tooltip,
+            {
+              placement: "top",
+              content: /* @__PURE__ */ jsx63("span", { className: "text-xs font-medium", children: "Double click to auto-fit" }),
+              children: /* @__PURE__ */ jsx63(
+                "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
     );
@@ -20420,7 +20511,7 @@ function DataTableHeader({
 }
 
 // src/components/DataTable/components/Pagination.tsx
-import React54 from "react";
+import React55 from "react";
 import { jsx as jsx64, jsxs as jsxs54 } from "react/jsx-runtime";
 function DataTablePagination({
   totalItems,
@@ -20432,7 +20523,7 @@ function DataTablePagination({
   size
 }) {
   const totalPages = Math.ceil(totalItems / curPageSize);
-  const pages = React54.useMemo(() => {
+  const pages = React55.useMemo(() => {
     const result = [];
     if (totalPages <= 5) {
       for (let i = 1; i <= totalPages; i++) result.push(i);
@@ -20514,7 +20605,7 @@ function DataTablePagination({
 }
 
 // src/components/DataTable/components/Toolbar.tsx
-import React55 from "react";
+import React56 from "react";
 
 // src/components/DataTable/utils/headers.ts
 function isLeafColumn(col) {
@@ -20635,7 +20726,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 = React55.useMemo(() => getLeafColumns(columns), [columns]);
+  const leafCols = React56.useMemo(() => getLeafColumns(columns), [columns]);
   return /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
     /* @__PURE__ */ jsx65("div", { className: captionClass + " text-muted-foreground", children: caption }),
     /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
@@ -20703,10 +20794,10 @@ function DataTableToolbar({
 }
 
 // src/components/DataTable/hooks/useDebounced.ts
-import React56 from "react";
+import React57 from "react";
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = React56.useState(value);
-  React56.useEffect(() => {
+  const [debounced, setDebounced] = React57.useState(value);
+  React57.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -20714,7 +20805,7 @@ function useDebounced(value, delay = 300) {
 }
 
 // src/components/DataTable/hooks/useDataTableModel.ts
-import React57 from "react";
+import React58 from "react";
 
 // src/components/DataTable/utils/columns.ts
 function getColumnWidth(col, fallback = 150) {
@@ -20742,22 +20833,22 @@ function useDataTableModel({
   isServerMode,
   total
 }) {
-  const visibleColsSet = React57.useMemo(() => new Set(visibleCols), [visibleCols]);
-  const allLeafColumns = React57.useMemo(() => getLeafColumns(columns), [columns]);
-  const columnMap = React57.useMemo(() => {
+  const visibleColsSet = React58.useMemo(() => new Set(visibleCols), [visibleCols]);
+  const allLeafColumns = React58.useMemo(() => getLeafColumns(columns), [columns]);
+  const columnMap = React58.useMemo(() => {
     return new Map(allLeafColumns.map((column) => [column.key, column]));
   }, [allLeafColumns]);
-  const visibleColumns = React57.useMemo(() => {
+  const visibleColumns = React58.useMemo(() => {
     return filterVisibleColumns(columns, visibleColsSet);
   }, [columns, visibleColsSet]);
-  const leafColumns = React57.useMemo(() => {
+  const leafColumns = React58.useMemo(() => {
     return getLeafColumnsWithFixedInheritance(visibleColumns);
   }, [visibleColumns]);
-  const headerRows = React57.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
-  const totalColumnsWidth = React57.useMemo(() => {
+  const headerRows = React58.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
+  const totalColumnsWidth = React58.useMemo(() => {
     return leafColumns.reduce((sum, column) => sum + getColumnWidth(column), 0);
   }, [leafColumns]);
-  const processedData = React57.useMemo(() => {
+  const processedData = React58.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
     if (Object.keys(filters).length > 0) {
@@ -20789,7 +20880,7 @@ function useDataTableModel({
     return result;
   }, [columnMap, data, filters, isServerMode, sort]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = React57.useMemo(() => {
+  const displayedData = React58.useMemo(() => {
     if (isServerMode) return data;
     const start = (curPage - 1) * curPageSize;
     return processedData.slice(start, start + curPageSize);
@@ -20805,10 +20896,10 @@ function useDataTableModel({
 }
 
 // src/components/DataTable/hooks/useDataTableState.ts
-import React59 from "react";
+import React60 from "react";
 
 // src/components/DataTable/hooks/usePageSizeStorage.ts
-import React58 from "react";
+import React59 from "react";
 function readStoredPageSize(storageKey) {
   if (typeof window === "undefined" || !storageKey) return null;
   try {
@@ -20821,8 +20912,8 @@ function readStoredPageSize(storageKey) {
   }
 }
 function usePageSizeStorage({ pageSize, storageKey }) {
-  const storedPageSize = React58.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
-  const [overrideState, setOverrideState] = React58.useState({
+  const storedPageSize = React59.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
+  const [overrideState, setOverrideState] = React59.useState({
     storageKey,
     pageSize: null
   });
@@ -20830,7 +20921,7 @@ function usePageSizeStorage({ pageSize, storageKey }) {
   const persistedPageSize = storageKey ? overridePageSize ?? storedPageSize : null;
   const loadedFromStorage = persistedPageSize != null;
   const curPageSize = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
-  const setCurPageSize = React58.useCallback(
+  const setCurPageSize = React59.useCallback(
     (nextPageSize) => {
       const baseValue = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
       const resolved = typeof nextPageSize === "function" ? nextPageSize(baseValue) : nextPageSize;
@@ -20859,17 +20950,17 @@ function useDataTableState({
   size,
   storageKey
 }) {
-  const allLeafColumns = React59.useMemo(() => getLeafColumns(columns), [columns]);
-  const defaultVisibleLeafKeys = React59.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
-  const knownLeafKeysRef = React59.useRef(new Set(defaultVisibleLeafKeys));
-  const [headerAlign, setHeaderAlign] = React59.useState("left");
-  const [visibleCols, setVisibleCols] = React59.useState(defaultVisibleLeafKeys);
-  const [filters, setFilters] = React59.useState({});
-  const [sort, setSort] = React59.useState(null);
-  const [density, setDensity] = React59.useState(() => SIZE_TO_DENSITY[size]);
-  const [curPage, setCurPage] = React59.useState(page);
+  const allLeafColumns = React60.useMemo(() => getLeafColumns(columns), [columns]);
+  const defaultVisibleLeafKeys = React60.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
+  const knownLeafKeysRef = React60.useRef(new Set(defaultVisibleLeafKeys));
+  const [headerAlign, setHeaderAlign] = React60.useState("left");
+  const [visibleCols, setVisibleCols] = React60.useState(defaultVisibleLeafKeys);
+  const [filters, setFilters] = React60.useState({});
+  const [sort, setSort] = React60.useState(null);
+  const [density, setDensity] = React60.useState(() => SIZE_TO_DENSITY[size]);
+  const [curPage, setCurPage] = React60.useState(page);
   const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     const knownLeafKeys = knownLeafKeysRef.current;
     setVisibleCols((prev) => {
       const prevSet = new Set(prev);
@@ -20877,10 +20968,10 @@ function useDataTableState({
     });
     knownLeafKeysRef.current = new Set(allLeafColumns.map((column) => column.key));
   }, [allLeafColumns]);
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     setCurPage(page);
   }, [page]);
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     setDensity(SIZE_TO_DENSITY[size]);
   }, [size]);
   return {
@@ -20902,7 +20993,7 @@ function useDataTableState({
 }
 
 // src/components/DataTable/hooks/useStickyColumns.ts
-import React60 from "react";
+import React61 from "react";
 
 // src/components/DataTable/utils/sticky.ts
 function buildStickyLayout(visibleColumns) {
@@ -20949,8 +21040,8 @@ function resolveGroupStickyPosition(column, positions) {
 
 // src/components/DataTable/hooks/useStickyColumns.ts
 function useStickyColumns(visibleColumns) {
-  const { positions, leftBoundaryKey, rightBoundaryKey } = React60.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
-  const getStickyColumnStyle = React60.useCallback(
+  const { positions, leftBoundaryKey, rightBoundaryKey } = React61.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
+  const getStickyColumnStyle = React61.useCallback(
     (col) => {
       const pos = resolveStickyPosition(col, positions);
       if (!pos) return {};
@@ -20961,7 +21052,7 @@ function useStickyColumns(visibleColumns) {
     },
     [positions]
   );
-  const getBoundaryShadowClass = React60.useCallback(
+  const getBoundaryShadowClass = React61.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)]";
@@ -20973,14 +21064,14 @@ function useStickyColumns(visibleColumns) {
     },
     [leftBoundaryKey, rightBoundaryKey]
   );
-  const getStickyHeaderClass = React60.useCallback(
+  const getStickyHeaderClass = React61.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 = React60.useCallback(
+  const getStickyCellClass = React61.useCallback(
     (col, isStripedRow) => {
       if (!col.fixed) return "";
       return cn(
@@ -20993,7 +21084,7 @@ function useStickyColumns(visibleColumns) {
     },
     [getBoundaryShadowClass]
   );
-  const getStickyHeaderCellStyle = React60.useCallback(
+  const getStickyHeaderCellStyle = React61.useCallback(
     (headerCell) => {
       const col = headerCell.column;
       if (headerCell.isLeaf) {
@@ -21092,6 +21183,66 @@ function validateColumns(columns) {
 
 // src/components/DataTable/DataTable.tsx
 import { jsx as jsx66, jsxs as jsxs56 } from "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,
@@ -21115,9 +21266,15 @@ function DataTable({
   stickyHeader = true,
   maxHeight = 500,
   useOverlayScrollbar = false,
+  enableHeaderAutoFit = true,
   labels
 }) {
   const t = useSmartTranslations("Common");
+  const [columnWidthOverrides, setColumnWidthOverrides] = React62.useState({});
+  const columnsWithWidthOverrides = React62.useMemo(
+    () => applyColumnWidthOverrides(columns, columnWidthOverrides),
+    [columnWidthOverrides, columns]
+  );
   const {
     headerAlign,
     setHeaderAlign,
@@ -21134,22 +21291,22 @@ function DataTable({
     curPageSize,
     setCurPageSize
   } = useDataTableState({
-    columns,
+    columns: columnsWithWidthOverrides,
     page,
     pageSize,
     size,
     storageKey
   });
-  React61.useEffect(() => {
+  React62.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 = React61.useRef(false);
-  React61.useEffect(() => {
+  const hasEmittedQuery = React62.useRef(false);
+  React62.useEffect(() => {
     if (!onQueryChange) return;
     if (!hasEmittedQuery.current) {
       hasEmittedQuery.current = true;
@@ -21157,7 +21314,7 @@ function DataTable({
     }
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
   }, [debouncedFilters, sort, curPage, curPageSize, onQueryChange]);
-  React61.useEffect(() => {
+  React62.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;
@@ -21169,7 +21326,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,
@@ -21185,15 +21342,45 @@ function DataTable({
     if (typeof rowKey === "function") return String(rowKey(row));
     return String(row[rowKey]);
   };
-  const viewportRef = React61.useRef(null);
+  const viewportRef = React62.useRef(null);
+  const tableRef = React62.useRef(null);
   useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
+  const autoFitColumn = React62.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__ */ jsxs56("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsx66(
       DataTableToolbar,
       {
         caption,
         toolbar,
-        columns,
+        columns: columnsWithWidthOverrides,
         visibleCols,
         setVisibleCols,
         enableDensityToggle,
@@ -21223,6 +21410,7 @@ function DataTable({
             children: /* @__PURE__ */ jsxs56(
               Table,
               {
+                ref: tableRef,
                 disableContainer: true,
                 className: cn(
                   "table-fixed",
@@ -21245,6 +21433,8 @@ function DataTable({
                       setCurPage,
                       setFilters,
                       setSort,
+                      onAutoFitColumn: autoFitColumn,
+                      enableHeaderAutoFit,
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
                       t
@@ -21291,10 +21481,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // src/components/Form.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 import { Controller, FormProvider, useFormContext, useForm } from "react-hook-form";
 import { jsx as jsx67, jsxs as jsxs57 } from "react/jsx-runtime";
-var FormConfigContext = React62.createContext({ size: "md" });
+var FormConfigContext = React63.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -21307,7 +21497,7 @@ var FormWrapper = ({
   const methods = useForm({
     defaultValues: initialValues
   });
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
@@ -21316,15 +21506,15 @@ var FormWrapper = ({
   return /* @__PURE__ */ jsx67(FormProvider, { ...methods, children: /* @__PURE__ */ jsx67(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx67("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React62.createContext({});
+var FormFieldContext = React63.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx67(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx67(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 } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField must be used within FormField");
@@ -21340,16 +21530,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__ */ jsx67(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx67("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__ */ jsxs57(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
       children,
@@ -21358,7 +21548,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__ */ jsx67(
     "div",
@@ -21372,12 +21562,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__ */ jsx67("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) {
@@ -21386,7 +21576,7 @@ var FormMessage = React62.forwardRef(({ className, children, ...props }, ref) =>
   return /* @__PURE__ */ jsx67("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__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(
+var FormInput = React63.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(
   FormField,
   {
     name,
@@ -21397,7 +21587,7 @@ var FormInput = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(
+var FormCheckbox = React63.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(
   FormField,
   {
     name,
@@ -21421,9 +21611,9 @@ var FormCheckbox = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React62.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React63.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("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__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
 );
 FormSubmitButton.displayName = "FormSubmitButton";
@@ -21713,7 +21903,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // ../../lib/i18n/translation-adapter.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 import { jsx as jsx72 } from "react/jsx-runtime";
 function isUnresolvedTranslation2(value, namespace, key) {
   return value === key || value === `${namespace}.${key}`;
@@ -21738,7 +21928,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)) {
@@ -21763,7 +21953,7 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-import React74, { useEffect as useEffect35, useImperativeHandle as useImperativeHandle3, useMemo as useMemo25, useRef as useRef32 } from "react";
+import React75, { useEffect as useEffect35, useImperativeHandle as useImperativeHandle3, useMemo as useMemo25, useRef as useRef32 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -21803,7 +21993,7 @@ import { common, createLowlight } from "lowlight";
 import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
-import React65, { forwardRef as forwardRef13, useEffect as useEffect30, useImperativeHandle, useRef as useRef26 } from "react";
+import React66, { forwardRef as forwardRef13, useEffect as useEffect30, useImperativeHandle, useRef as useRef26 } from "react";
 import {
   FileCode as FileCode2,
   Heading1,
@@ -21846,9 +22036,9 @@ var DEFAULT_MESSAGES = {
   tableDesc: "Insert a table"
 };
 function useResettingIndex2(resetToken) {
-  const [state, setState] = React65.useState({ resetToken, index: 0 });
+  const [state, setState] = React66.useState({ resetToken, index: 0 });
   const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
-  const setSelectedIndex = React65.useCallback((nextIndex) => {
+  const setSelectedIndex = React66.useCallback((nextIndex) => {
     setState((prev) => {
       const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
       return {
@@ -22227,14 +22417,14 @@ import { Extension as Extension3 } from "@tiptap/core";
 import Suggestion2 from "@tiptap/suggestion";
 import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { PluginKey } from "@tiptap/pm/state";
-import React66, { forwardRef as forwardRef14, useImperativeHandle as useImperativeHandle2 } from "react";
+import React67, { forwardRef as forwardRef14, useImperativeHandle as useImperativeHandle2 } from "react";
 import { Smile as Smile2 } from "lucide-react";
 import tippy2 from "tippy.js";
 import { jsx as jsx74, jsxs as jsxs63 } from "react/jsx-runtime";
 function useResettingIndex3(resetToken) {
-  const [state, setState] = React66.useState({ resetToken, index: 0 });
+  const [state, setState] = React67.useState({ resetToken, index: 0 });
   const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
-  const setSelectedIndex = React66.useCallback((nextIndex) => {
+  const setSelectedIndex = React67.useCallback((nextIndex) => {
     setState((prev) => {
       const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
       return {
@@ -22875,7 +23065,7 @@ function buildUEditorExtensions({
 }
 
 // src/components/UEditor/toolbar.tsx
-import React71, { useRef as useRef30, useState as useState44 } from "react";
+import React72, { useRef as useRef30, useState as useState44 } from "react";
 import {
   AlignCenter,
   AlignJustify,
@@ -23362,7 +23552,7 @@ function fileToDataUrl2(file) {
     reader.readAsDataURL(file);
   });
 }
-var ToolbarButton = React71.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
+var ToolbarButton = React72.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
   const button = /* @__PURE__ */ jsx79(
     "button",
     {
@@ -24580,7 +24770,7 @@ async function prepareUEditorContentForSave({
 }
 
 // src/components/UEditor/table-controls.tsx
-import React73 from "react";
+import React74 from "react";
 
 // node_modules/prosemirror-model/dist/index.js
 function findDiffStart(a, b, pos) {
@@ -28756,6 +28946,19 @@ import {
 import { Fragment as Fragment27, jsx as jsx81, jsxs as jsxs71 } from "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;
@@ -28881,6 +29084,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);
 }
@@ -28907,14 +29116,15 @@ function collectChildren(node) {
 }
 function TableControls({ editor, containerRef }) {
   const t = useSmartTranslations("UEditor");
-  const [layout, setLayout] = React73.useState(null);
-  const [dragPreview, setDragPreview] = React73.useState(null);
-  const layoutRef = React73.useRef(null);
-  const dragStateRef = React73.useRef(null);
-  React73.useEffect(() => {
+  const [layout, setLayout] = React74.useState(null);
+  const [dragPreview, setDragPreview] = React74.useState(null);
+  const [hoverState, setHoverState] = React74.useState(DEFAULT_HOVER_STATE);
+  const layoutRef = React74.useRef(null);
+  const dragStateRef = React74.useRef(null);
+  React74.useEffect(() => {
     layoutRef.current = layout;
   }, [layout]);
-  const syncFromCell = React73.useCallback((cell) => {
+  const syncFromCell = React74.useCallback((cell) => {
     const surface = containerRef.current;
     if (!surface || !cell) {
       setLayout(null);
@@ -28922,10 +29132,10 @@ function TableControls({ editor, containerRef }) {
     }
     setLayout(buildLayout(editor, surface, cell));
   }, [containerRef, editor]);
-  const syncFromSelection = React73.useCallback(() => {
+  const syncFromSelection = React74.useCallback(() => {
     syncFromCell(getSelectedCell(editor));
   }, [editor, syncFromCell]);
-  const refreshCurrentLayout = React73.useCallback(() => {
+  const refreshCurrentLayout = React74.useCallback(() => {
     setLayout((prev) => {
       if (!prev) return prev;
       const surface = containerRef.current;
@@ -28935,22 +29145,55 @@ function TableControls({ editor, containerRef }) {
       return cell ? buildLayout(editor, surface, cell) : null;
     });
   }, [containerRef, editor]);
-  const clearDrag = React73.useCallback(() => {
+  const clearDrag = React74.useCallback(() => {
     dragStateRef.current = null;
     setDragPreview(null);
     document.body.style.cursor = "";
   }, []);
-  React73.useEffect(() => {
+  const updateHoverState = React74.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]);
+  React74.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;
@@ -28959,6 +29202,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);
@@ -28968,13 +29212,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 = React73.useCallback((cellPos, command, options) => {
+  }, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection, updateHoverState]);
+  const runAtCellPos = React74.useCallback((cellPos, command, options) => {
     if (cellPos == null) return false;
     focusCell(editor, cellPos);
     const result = command(editor.chain().focus(null, { scrollIntoView: false })).run();
@@ -28983,17 +29228,17 @@ function TableControls({ editor, containerRef }) {
     }
     return result;
   }, [editor, syncFromSelection]);
-  const runAtActiveCell = React73.useCallback((command, options) => {
+  const runAtActiveCell = React74.useCallback((command, options) => {
     return runAtCellPos(layoutRef.current?.cellPos ?? null, command, options);
   }, [runAtCellPos]);
-  const getCurrentCornerCellPos = React73.useCallback(() => {
+  const getCurrentCornerCellPos = React74.useCallback(() => {
     const activePos = layoutRef.current?.cellPos ?? editor.state.selection.from;
     return getLastCellPosFromState(editor, activePos);
   }, [editor]);
-  const runAtCornerCell = React73.useCallback((command, options) => {
+  const runAtCornerCell = React74.useCallback((command, options) => {
     return runAtCellPos(getCurrentCornerCellPos(), command, options);
   }, [getCurrentCornerCellPos, runAtCellPos]);
-  const replaceTableAtCellPos = React73.useCallback((cellPos, updateTable) => {
+  const replaceTableAtCellPos = React74.useCallback((cellPos, updateTable) => {
     if (cellPos == null) return false;
     const tableInfo = findTableInfo(editor, cellPos);
     if (!tableInfo) return false;
@@ -29003,10 +29248,10 @@ function TableControls({ editor, containerRef }) {
     requestAnimationFrame(syncFromSelection);
     return true;
   }, [editor, syncFromSelection]);
-  const createEmptyCellNode = React73.useCallback((cellNode) => {
+  const createEmptyCellNode = React74.useCallback((cellNode) => {
     return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
   }, []);
-  const duplicateRowAt = React73.useCallback((rowIndex, cellPos) => {
+  const duplicateRowAt = React74.useCallback((rowIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode);
       const rowNode = rows[rowIndex];
@@ -29015,7 +29260,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [replaceTableAtCellPos]);
-  const clearRowAt = React73.useCallback((rowIndex, cellPos) => {
+  const clearRowAt = React74.useCallback((rowIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode);
       const rowNode = rows[rowIndex];
@@ -29025,7 +29270,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [createEmptyCellNode, replaceTableAtCellPos]);
-  const duplicateColumnAt = React73.useCallback((columnIndex, cellPos) => {
+  const duplicateColumnAt = React74.useCallback((columnIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode).map((rowNode) => {
         const cells = collectChildren(rowNode);
@@ -29037,7 +29282,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [replaceTableAtCellPos]);
-  const clearColumnAt = React73.useCallback((columnIndex, cellPos) => {
+  const clearColumnAt = React74.useCallback((columnIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode).map((rowNode) => {
         const cells = collectChildren(rowNode);
@@ -29049,7 +29294,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [createEmptyCellNode, replaceTableAtCellPos]);
-  const expandTableBy = React73.useCallback((rows, cols) => {
+  const expandTableBy = React74.useCallback((rows, cols) => {
     let ok = true;
     for (let index = 0; index < rows; index += 1) {
       ok = runAtCornerCell((chain) => chain.addRowAfter(), { sync: false });
@@ -29063,7 +29308,8 @@ function TableControls({ editor, containerRef }) {
     return true;
   }, [runAtCornerCell, syncFromSelection]);
   const canExpandTable = Boolean(layout);
-  React73.useEffect(() => {
+  const controlsVisible = dragPreview !== null;
+  React74.useEffect(() => {
     const handleMouseMove = (event) => {
       const dragState = dragStateRef.current;
       const activeLayout = layoutRef.current;
@@ -29150,7 +29396,7 @@ function TableControls({ editor, containerRef }) {
       window.removeEventListener("blur", clearDrag);
     };
   }, [clearDrag, containerRef, editor, expandTableBy, syncFromSelection]);
-  const menuItems = React73.useMemo(() => {
+  const menuItems = React74.useMemo(() => {
     if (!layout) return [];
     return [
       {
@@ -29203,7 +29449,7 @@ function TableControls({ editor, containerRef }) {
       }
     ];
   }, [layout, runAtActiveCell, t]);
-  const getRowHandleMenuItems = React73.useCallback((rowHandle) => [
+  const getRowHandleMenuItems = React74.useCallback((rowHandle) => [
     {
       label: t("tableMenu.addRowBefore"),
       icon: ArrowUp2,
@@ -29231,7 +29477,7 @@ function TableControls({ editor, containerRef }) {
       destructive: true
     }
   ], [clearRowAt, duplicateRowAt, runAtCellPos, t]);
-  const getColumnHandleMenuItems = React73.useCallback((columnHandle) => [
+  const getColumnHandleMenuItems = React74.useCallback((columnHandle) => [
     {
       label: t("tableMenu.addColumnBefore"),
       icon: ArrowLeft2,
@@ -29274,107 +29520,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__ */ jsxs71(Fragment27, { children: [
-    layout.rowHandles.map((rowHandle) => /* @__PURE__ */ jsx81("div", { className: "absolute z-30", style: { top: Math.max(8, rowHandle.center - 12), left: rowHandleLeft }, children: /* @__PURE__ */ jsx81(
-      DropdownMenu,
-      {
-        placement: "right",
-        items: getRowHandleMenuItems(rowHandle),
-        trigger: /* @__PURE__ */ jsx81(
-          "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__ */ jsx81(GripVertical3, { className: "h-3.5 w-3.5" })
-          }
-        )
-      }
-    ) }, `row-handle-${rowHandle.index}`)),
-    layout.columnHandles.map((columnHandle) => /* @__PURE__ */ jsx81("div", { className: "absolute z-30", style: { top: columnHandleTop, left: Math.max(8, columnHandle.center - 12) }, children: /* @__PURE__ */ jsx81(
-      DropdownMenu,
-      {
-        placement: "bottom-start",
-        items: getColumnHandleMenuItems(columnHandle),
-        trigger: /* @__PURE__ */ jsx81(
-          "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__ */ jsx81(GripHorizontal, { className: "h-3.5 w-3.5" })
-          }
-        )
-      }
-    ) }, `column-handle-${columnHandle.index}`)),
-    /* @__PURE__ */ jsx81("div", { className: "pointer-events-none absolute z-30", style: { top: menuTop, left: menuLeft }, children: /* @__PURE__ */ jsx81(
-      DropdownMenu,
+    layout.rowHandles.map((rowHandle) => {
+      const visible = controlsVisible || hoverState.rowHandleIndex === rowHandle.index;
+      if (!visible) return null;
+      return /* @__PURE__ */ jsx81(
+        "div",
+        {
+          className: "absolute z-30",
+          style: {
+            top: Math.max(8, rowHandle.center - 12),
+            left: rowHandleLeft
+          },
+          children: /* @__PURE__ */ jsx81(
+            DropdownMenu,
+            {
+              placement: "right",
+              items: getRowHandleMenuItems(rowHandle),
+              trigger: /* @__PURE__ */ jsx81(
+                "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__ */ jsx81(GripVertical3, { 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__ */ jsx81(
+        "div",
+        {
+          className: "absolute z-30",
+          style: {
+            top: columnHandleTop,
+            left: Math.max(8, columnHandle.center - 12)
+          },
+          children: /* @__PURE__ */ jsx81(
+            DropdownMenu,
+            {
+              placement: "bottom-start",
+              items: getColumnHandleMenuItems(columnHandle),
+              trigger: /* @__PURE__ */ jsx81(
+                "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__ */ jsx81(GripHorizontal, { className: "h-3.5 w-3.5" })
+                }
+              )
+            }
+          )
+        },
+        `column-handle-${columnHandle.index}`
+      );
+    }),
+    (controlsVisible || hoverState.menuVisible) && /* @__PURE__ */ jsx81(
+      "div",
       {
-        placement: "bottom-start",
-        items: menuItems,
-        trigger: /* @__PURE__ */ jsx81(
-          "button",
+        className: "absolute z-30",
+        style: {
+          top: menuTop,
+          left: menuLeft
+        },
+        children: /* @__PURE__ */ jsx81(
+          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__ */ jsx81(MoreHorizontal2, { className: "h-4 w-4" })
+            placement: "bottom-start",
+            items: menuItems,
+            trigger: /* @__PURE__ */ jsx81(
+              "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__ */ jsx81(MoreHorizontal2, { className: "h-4 w-4" })
+              }
+            )
           }
         )
       }
-    ) }),
-    /* @__PURE__ */ jsx81(
+    ),
+    (controlsVisible || hoverState.addColumnVisible) && /* @__PURE__ */ jsx81(
       "button",
       {
         type: "button",
@@ -29392,13 +29678,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__ */ jsx81("span", { className: "text-sm font-medium leading-none", children: "+" })
       }
     ),
-    /* @__PURE__ */ jsx81(
+    (controlsVisible || hoverState.addRowVisible) && /* @__PURE__ */ jsx81(
       "button",
       {
         type: "button",
@@ -29416,9 +29707,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__ */ jsx81("span", { className: "text-sm font-medium leading-none", children: "+" })
       }
     ),
@@ -29553,6 +29849,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;
@@ -29579,7 +29888,17 @@ function getRelativeBoundaryMetrics(surface, table, row, cell) {
     columnRight: cellRect.right - surfaceRect.left + surface.scrollLeft
   };
 }
-var UEditor = React74.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 = React75.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
@@ -29606,33 +29925,66 @@ var UEditor = React74.forwardRef(({
   const editorContentRef = useRef32(null);
   const tableColumnGuideRef = useRef32(null);
   const tableRowGuideRef = useRef32(null);
+  const activeTableCellHighlightRef = useRef32(null);
+  const hoveredTableCellRef = useRef32(null);
+  const activeTableCellRef = useRef32(null);
   const rowResizeStateRef = useRef32(null);
-  const setEditorResizeCursor = React74.useCallback((cursor) => {
+  const setEditorResizeCursor = React75.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
   }, []);
-  const hideColumnGuide = React74.useCallback(() => {
+  const hideColumnGuide = React75.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const hideRowGuide = React74.useCallback(() => {
+  const hideRowGuide = React75.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const clearAllTableResizeHover = React74.useCallback(() => {
+  const clearAllTableResizeHover = React75.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
     hideRowGuide();
   }, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
-  const showColumnGuide = React74.useCallback((table, row, cell) => {
+  const updateActiveCellHighlight = React75.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 = React75.useCallback((cell) => {
+    if (activeTableCellRef.current === cell) return;
+    activeTableCellRef.current = cell;
+    updateActiveCellHighlight(activeTableCellRef.current);
+  }, [updateActiveCellHighlight]);
+  const clearActiveTableCell = React75.useCallback(() => {
+    activeTableCellRef.current = null;
+    updateActiveCellHighlight(null);
+  }, [updateActiveCellHighlight]);
+  const setHoveredTableCell = React75.useCallback((cell) => {
+    hoveredTableCellRef.current = cell;
+  }, []);
+  const clearHoveredTableCell = React75.useCallback(() => {
+    hoveredTableCellRef.current = null;
+  }, []);
+  const showColumnGuide = React75.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableColumnGuideRef.current;
     if (!surface || !guide) return;
@@ -29645,7 +29997,7 @@ var UEditor = React74.forwardRef(({
     surface.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
   }, [setEditorResizeCursor]);
-  const showRowGuide = React74.useCallback((table, row, cell) => {
+  const showRowGuide = React75.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
     if (!surface || !guide) return;
@@ -29813,6 +30165,10 @@ var UEditor = React74.forwardRef(({
       onJsonChange?.(editor2.getJSON());
     }
   });
+  const syncActiveTableCellFromSelection = React75.useCallback(() => {
+    if (!editor) return;
+    setActiveTableCell(getSelectionTableCell(editor.view));
+  }, [editor, setActiveTableCell]);
   useImperativeHandle3(
     ref,
     () => ({
@@ -29845,9 +30201,27 @@ var UEditor = React74.forwardRef(({
   useEffect35(() => {
     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;
       }
@@ -29858,12 +30232,15 @@ var UEditor = React74.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;
       }
@@ -29882,6 +30259,7 @@ var UEditor = React74.forwardRef(({
       clearAllTableResizeHover();
     };
     const handleEditorMouseLeave = () => {
+      clearHoveredTableCell();
       if (!rowResizeStateRef.current) {
         clearAllTableResizeHover();
       }
@@ -29889,15 +30267,24 @@ var UEditor = React74.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 = {
@@ -29958,6 +30345,7 @@ var UEditor = React74.forwardRef(({
       clearPreviewRowHeight(state.rowElement);
       rowResizeStateRef.current = null;
       document.body.style.cursor = "";
+      clearHoveredTableCell();
       clearAllTableResizeHover();
     };
     const handleWindowBlur = () => {
@@ -29966,30 +30354,53 @@ var UEditor = React74.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__ */ jsx82(
       "div",
@@ -30041,6 +30452,14 @@ var UEditor = React74.forwardRef(({
                   className: "pointer-events-none absolute z-20 bg-primary opacity-0 transition-opacity duration-100"
                 }
               ),
+              /* @__PURE__ */ jsx82(
+                "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__ */ jsx82(TableControls, { editor, containerRef: editorContentRef }),
               /* @__PURE__ */ jsx82(
                 EditorContent,