@underverse-ui/underverse 1.0.71 → 1.0.72

package/dist/index.js

@@ -28946,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;
@@ -29071,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);
 }
@@ -29099,6 +29118,7 @@ function TableControls({ editor, containerRef }) {
   const t = useSmartTranslations("UEditor");
   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(() => {
@@ -29130,17 +29150,50 @@ function TableControls({ editor, containerRef }) {
     setDragPreview(null);
     document.body.style.cursor = "";
   }, []);
+  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;
@@ -29149,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);
@@ -29158,12 +29212,13 @@ 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]);
+  }, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection, updateHoverState]);
   const runAtCellPos = React74.useCallback((cellPos, command, options) => {
     if (cellPos == null) return false;
     focusCell(editor, cellPos);
@@ -29253,6 +29308,7 @@ function TableControls({ editor, containerRef }) {
     return true;
   }, [runAtCornerCell, syncFromSelection]);
   const canExpandTable = Boolean(layout);
+  const controlsVisible = dragPreview !== null;
   React74.useEffect(() => {
     const handleMouseMove = (event) => {
       const dragState = dragStateRef.current;
@@ -29464,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",
@@ -29582,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",
@@ -29606,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: "+" })
       }
     ),
@@ -29743,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;
@@ -29769,6 +29888,16 @@ function getRelativeBoundaryMetrics(surface, table, row, cell) {
     columnRight: cellRect.right - surfaceRect.left + surface.scrollLeft
   };
 }
+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,
@@ -29796,6 +29925,9 @@ var UEditor = React75.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 = React75.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
@@ -29822,6 +29954,36 @@ var UEditor = React75.forwardRef(({
     hideColumnGuide();
     hideRowGuide();
   }, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
+  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;
@@ -30003,6 +30165,10 @@ var UEditor = React75.forwardRef(({
       onJsonChange?.(editor2.getJSON());
     }
   });
+  const syncActiveTableCellFromSelection = React75.useCallback(() => {
+    if (!editor) return;
+    setActiveTableCell(getSelectionTableCell(editor.view));
+  }, [editor, setActiveTableCell]);
   useImperativeHandle3(
     ref,
     () => ({
@@ -30035,9 +30201,27 @@ var UEditor = React75.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;
       }
@@ -30048,12 +30232,15 @@ var UEditor = React75.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;
       }
@@ -30072,6 +30259,7 @@ var UEditor = React75.forwardRef(({
       clearAllTableResizeHover();
     };
     const handleEditorMouseLeave = () => {
+      clearHoveredTableCell();
       if (!rowResizeStateRef.current) {
         clearAllTableResizeHover();
       }
@@ -30079,15 +30267,24 @@ var UEditor = React75.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 = {
@@ -30148,6 +30345,7 @@ var UEditor = React75.forwardRef(({
       clearPreviewRowHeight(state.rowElement);
       rowResizeStateRef.current = null;
       document.body.style.cursor = "";
+      clearHoveredTableCell();
       clearAllTableResizeHover();
     };
     const handleWindowBlur = () => {
@@ -30156,30 +30354,53 @@ var UEditor = React75.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",
@@ -30231,6 +30452,14 @@ var UEditor = React75.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,