@underverse-ui/underverse 1.0.135 → 1.0.137

package/dist/index.cjs

@@ -1006,6 +1006,8 @@ var en_default = {
       deleteTable: "Delete Table",
       toggleHeaderRow: "Toggle Header Row",
       toggleHeaderColumn: "Toggle Header Column",
+      mergeCells: "Merge Cells",
+      splitCell: "Split Cell",
       openControls: "Open Table Controls",
       quickAddColumnAfter: "Quick Add Column After",
       quickAddRowAfter: "Quick Add Row After",
@@ -1276,6 +1278,8 @@ var vi_default = {
       deleteTable: "X\xF3a b\u1EA3ng",
       toggleHeaderRow: "B\u1EADt/t\u1EAFt h\xE0ng ti\xEAu \u0111\u1EC1",
       toggleHeaderColumn: "B\u1EADt/t\u1EAFt c\u1ED9t ti\xEAu \u0111\u1EC1",
+      mergeCells: "G\u1ED9p \xF4",
+      splitCell: "T\xE1ch \xF4",
       openControls: "M\u1EDF \u0111i\u1EC1u khi\u1EC3n b\u1EA3ng",
       quickAddColumnAfter: "Th\xEAm nhanh c\u1ED9t sau",
       quickAddRowAfter: "Th\xEAm nhanh h\xE0ng sau",
@@ -1545,6 +1549,8 @@ var ko_default = {
       deleteTable: "\uD45C \uC0AD\uC81C",
       toggleHeaderRow: "\uD5E4\uB354 \uD589 \uC804\uD658",
       toggleHeaderColumn: "\uD5E4\uB354 \uC5F4 \uC804\uD658",
+      mergeCells: "\uC140 \uBCD1\uD569",
+      splitCell: "\uC140 \uBD84\uD560",
       openControls: "\uD45C \uCEE8\uD2B8\uB864 \uC5F4\uAE30",
       quickAddColumnAfter: "\uC624\uB978\uCABD \uC5F4 \uBE60\uB974\uAC8C \uCD94\uAC00",
       quickAddRowAfter: "\uC544\uB798 \uD589 \uBE60\uB974\uAC8C \uCD94\uAC00",
@@ -1814,6 +1820,8 @@ var ja_default = {
       deleteTable: "\u8868\u3092\u524A\u9664",
       toggleHeaderRow: "\u30D8\u30C3\u30C0\u30FC\u884C\u3092\u5207\u308A\u66FF\u3048",
       toggleHeaderColumn: "\u30D8\u30C3\u30C0\u30FC\u5217\u3092\u5207\u308A\u66FF\u3048",
+      mergeCells: "\u30BB\u30EB\u3092\u7D50\u5408",
+      splitCell: "\u30BB\u30EB\u3092\u5206\u5272",
       openControls: "\u8868\u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u3092\u958B\u304F",
       quickAddColumnAfter: "\u53F3\u5074\u306B\u5217\u3092\u3059\u3070\u3084\u304F\u8FFD\u52A0",
       quickAddRowAfter: "\u4E0B\u306B\u884C\u3092\u3059\u3070\u3084\u304F\u8FFD\u52A0",
@@ -9343,6 +9351,7 @@ var DatePicker = ({
                   {
                     ref: inputRef,
                     type: "text",
+                    "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
                     disabled,
                     placeholder: placeholder || t("placeholder"),
                     value: isFocused ? inputValue : value ? formatDateDisplay(value) : "",
@@ -9360,8 +9369,7 @@ var DatePicker = ({
                     },
                     className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
                   }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: value ? formatDateDisplay(value) : placeholder || t("placeholder") })
+                )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
                 value && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -10091,6 +10099,7 @@ var DateRangePicker = ({
                   {
                     ref: inputRef,
                     type: "text",
+                    "aria-label": tempStart ? displayLabel : placeholder,
                     disabled,
                     placeholder,
                     value: isFocused ? inputValue : tempStart ? displayLabel : "",
@@ -10108,8 +10117,7 @@ var DateRangePicker = ({
                     },
                     className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
                   }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: tempStart ? displayLabel : placeholder })
+                )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
             ]
@@ -10787,12 +10795,12 @@ function MonthYearPicker({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: cn(
-                "flex items-center justify-center transition-colors duration-300",
+                "flex shrink-0 items-center justify-center transition-colors duration-300",
                 effectiveError ? "text-destructive" : success ? "text-success" : open ? "text-primary" : "text-muted-foreground group-hover:text-primary"
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react16.Calendar, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
@@ -10801,12 +10809,12 @@ function MonthYearPicker({
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "span",
             {
-              className: cn("truncate font-medium transition-colors duration-200", !hasValue && "text-muted-foreground", hasValue && "text-foreground"),
+              className: cn("min-w-0 truncate font-medium transition-colors duration-200", !hasValue && "text-muted-foreground", hasValue && "text-foreground"),
               children: hasValue ? display : placeholder
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("ml-2 transition-all duration-300 text-muted-foreground group-hover:text-foreground", open && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react16.ChevronDown, { className: sz.icon }) })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("ml-2 shrink-0 transition-all duration-300 text-muted-foreground group-hover:text-foreground", open && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react16.ChevronDown, { className: sz.icon }) })
       ]
     }
   );
@@ -12492,12 +12500,12 @@ function TimePicker({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "div",
             {
               className: cn(
-                "flex items-center justify-center transition-colors duration-300",
+                "flex shrink-0 items-center justify-center transition-colors duration-300",
                 effectiveError ? "text-destructive" : success ? "text-success" : open ? "text-primary" : "text-muted-foreground group-hover:text-primary"
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.Clock, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
@@ -12507,7 +12515,7 @@ function TimePicker({
             "span",
             {
               className: cn(
-                "truncate font-medium transition-colors duration-200",
+                "min-w-0 truncate font-medium transition-colors duration-200",
                 !hasCommittedValue && "text-muted-foreground",
                 hasCommittedValue ? "text-foreground" : ""
               ),
@@ -12515,7 +12523,7 @@ function TimePicker({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("ml-2 transition-all duration-300 text-muted-foreground group-hover:text-foreground", open && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("ml-2 shrink-0 transition-all duration-300 text-muted-foreground group-hover:text-foreground", open && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
       ]
     }
   );
@@ -13145,8 +13153,8 @@ var DateTimePicker = ({
               effectiveError && "border-destructive/60 bg-destructive/5"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "truncate", children: displayValue || placeholder || "Select date & time" }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: displayValue || placeholder || "Select date & time" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex shrink-0 items-center gap-2 text-muted-foreground", children: [
                 value && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   "span",
                   {
@@ -25510,6 +25518,109 @@ var letter_spacing_default = LetterSpacing;
 var import_extension_table = require("@tiptap/extension-table");
 var import_state4 = require("@tiptap/pm/state");
 
+// src/components/UEditor/table-dom-utils.ts
+var MIN_TABLE_ROW_HEIGHT = 36;
+var COLUMN_RESIZE_LINE_THICKNESS = 2;
+var ROW_RESIZE_LINE_THICKNESS = 2;
+var UEDITOR_TABLE_LAYOUT_CHANGE_EVENT = "ueditor-table-layout-change";
+var TABLE_RESIZE_HIT_ZONE = 10;
+function findTableRowNodeInfo(view, rowElement) {
+  const firstCell = rowElement.querySelector("th,td");
+  if (!firstCell) return null;
+  const cellPos = view.posAtDOM(firstCell, 0);
+  const $pos = view.state.doc.resolve(cellPos);
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth);
+    if (node.type.name === "tableRow") {
+      return {
+        pos: $pos.before(depth),
+        node
+      };
+    }
+  }
+  return null;
+}
+function resolveEventElement(target) {
+  if (target instanceof Element) return 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;
+  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
+  return nearBottom && !nearRight;
+}
+function isColumnResizeHotspot(cell, clientX, clientY) {
+  const rect = cell.getBoundingClientRect();
+  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
+  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
+  return nearRight && !nearBottom;
+}
+function getRelativeBoundaryMetrics(surface, table, row, cell) {
+  const surfaceRect = surface.getBoundingClientRect();
+  const tableRect = table.getBoundingClientRect();
+  const rowRect = row.getBoundingClientRect();
+  const cellRect = cell.getBoundingClientRect();
+  return {
+    left: tableRect.left - surfaceRect.left + surface.scrollLeft,
+    top: tableRect.top - surfaceRect.top + surface.scrollTop,
+    width: tableRect.width,
+    height: tableRect.height,
+    rowBottom: rowRect.bottom - surfaceRect.top + surface.scrollTop,
+    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
+  };
+}
+function getRelativeSelectedCellsMetrics(surface) {
+  const selectedCells = Array.from(
+    surface.querySelectorAll("td.selectedCell, th.selectedCell")
+  );
+  if (selectedCells.length === 0) {
+    return null;
+  }
+  const surfaceRect = surface.getBoundingClientRect();
+  let left = Number.POSITIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let bottom = Number.NEGATIVE_INFINITY;
+  selectedCells.forEach((cell) => {
+    const rect = cell.getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+  });
+  return {
+    left: left - surfaceRect.left + surface.scrollLeft,
+    top: top - surfaceRect.top + surface.scrollTop,
+    width: right - left,
+    height: bottom - top
+  };
+}
+
 // src/components/UEditor/table-align-utils.ts
 function findTableNodeInfoAtResolvedPos($pos) {
   for (let depth = $pos.depth; depth > 0; depth -= 1) {
@@ -25537,11 +25648,13 @@ function applyTableAlignment(editor, tableAlign, anchorPos) {
   editor.view.dispatch(
     editor.state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
       ...tableInfo.node.attrs,
-      tableAlign
+      textAlign: tableAlign
     })
   );
+  const domAtTable = editor.view.domAtPos(Math.min(tableInfo.pos + 1, editor.state.doc.content.size)).node;
+  const domAtTableElement = resolveEventElement(domAtTable);
   const tableDom = editor.view.nodeDOM(tableInfo.pos);
-  const tableElement = tableDom instanceof HTMLTableElement ? tableDom : tableDom instanceof HTMLElement ? tableDom.querySelector("table") : null;
+  const tableElement = domAtTableElement?.closest?.("table") ?? (tableDom instanceof HTMLTableElement ? tableDom : tableDom instanceof HTMLElement ? tableDom.querySelector("table") : null) ?? (editor.view.dom.querySelectorAll("table").length === 1 ? editor.view.dom.querySelector("table") : null);
   if (tableElement instanceof HTMLTableElement) {
     if (tableAlign) {
       tableElement.setAttribute("data-table-align", tableAlign);
@@ -25590,25 +25703,30 @@ function renderTableAlignStyle(tableAlign) {
   }
 }
 var UEditorTable = import_extension_table.Table.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      tableAlign: {
-        default: null,
-        parseHTML: (element) => {
-          if (!(element instanceof HTMLElement)) return null;
-          return parseTableAlign(element);
-        },
-        renderHTML: (attributes) => {
-          const tableAlign = normalizeTableAlign(attributes.tableAlign);
-          if (!tableAlign) return {};
-          return {
-            "data-table-align": tableAlign,
-            style: renderTableAlignStyle(tableAlign)
-          };
+  addGlobalAttributes() {
+    return [
+      ...this.parent?.() ?? [],
+      {
+        types: ["table"],
+        attributes: {
+          textAlign: {
+            default: null,
+            parseHTML: (element) => {
+              if (!(element instanceof HTMLElement)) return null;
+              return parseTableAlign(element);
+            },
+            renderHTML: (attributes) => {
+              const tableAlign = normalizeTableAlign(attributes.textAlign);
+              if (!tableAlign) return {};
+              return {
+                "data-table-align": tableAlign,
+                style: renderTableAlignStyle(tableAlign)
+              };
+            }
+          }
         }
       }
-    };
+    ];
   },
   addCommands() {
     return {
@@ -25619,7 +25737,7 @@ var UEditorTable = import_extension_table.Table.extend({
         dispatch?.(
           state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
             ...tableInfo.node.attrs,
-            tableAlign
+            textAlign: tableAlign
           })
         );
         return true;
@@ -25630,7 +25748,7 @@ var UEditorTable = import_extension_table.Table.extend({
         dispatch?.(
           state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
             ...tableInfo.node.attrs,
-            tableAlign: null
+            textAlign: null
           })
         );
         return true;
@@ -25639,6 +25757,7 @@ var UEditorTable = import_extension_table.Table.extend({
   },
   addProseMirrorPlugins() {
     return [
+      ...this.parent?.() ?? [],
       new import_state4.Plugin({
         appendTransaction(_transactions, _oldState, newState) {
           const { doc, schema } = newState;
@@ -26337,6 +26456,24 @@ function getDefaultLetterSpacings() {
 
 // src/components/UEditor/toolbar.tsx
 var import_jsx_runtime81 = require("react/jsx-runtime");
+function getTableAnchorPos(editor) {
+  const tableInfo = findTableNodeInfoFromState(editor.state);
+  if (tableInfo) return editor.state.selection.from;
+  const selectionAnchor = resolveEventElement(window.getSelection()?.anchorNode ?? null);
+  const selectionCell2 = selectionAnchor?.closest?.("th,td");
+  if (selectionCell2 instanceof HTMLTableCellElement && editor.view.dom.contains(selectionCell2)) {
+    return editor.view.posAtDOM(selectionCell2, 0) + 1;
+  }
+  const activeElement = document.activeElement instanceof Element ? document.activeElement : null;
+  const activeCell = activeElement?.closest?.("th,td");
+  if (activeCell instanceof HTMLTableCellElement && editor.view.dom.contains(activeCell)) {
+    return editor.view.posAtDOM(activeCell, 0) + 1;
+  }
+  const tables = editor.view.dom.querySelectorAll("table");
+  if (tables.length !== 1) return null;
+  const firstCell = tables[0]?.querySelector("th,td");
+  return firstCell instanceof HTMLTableCellElement ? editor.view.posAtDOM(firstCell, 0) + 1 : null;
+}
 function fileToDataUrl2(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -26443,12 +26580,15 @@ var EditorToolbar = ({
   const [imageUploadError, setImageUploadError] = (0, import_react49.useState)(null);
   const isImageSelected = editor.isActive("image");
   const imageAttrs = editor.getAttributes("image");
-  const tableAttrs = editor.getAttributes("table");
+  const tableAnchorPos = getTableAnchorPos(editor);
+  const tableInfo = tableAnchorPos == null ? null : findTableNodeInfoFromState(editor.state, tableAnchorPos);
+  const tableAttrs = tableInfo?.node.attrs ?? editor.getAttributes("table");
   const textStyleAttrs = editor.getAttributes("textStyle");
   const imageLayout = imageAttrs.imageLayout === "left" || imageAttrs.imageLayout === "right" ? imageAttrs.imageLayout : "block";
   const imageWidthPreset = imageAttrs.imageWidthPreset === "sm" || imageAttrs.imageWidthPreset === "md" || imageAttrs.imageWidthPreset === "lg" ? imageAttrs.imageWidthPreset : null;
-  const currentTableAlign = tableAttrs.tableAlign === "center" || tableAttrs.tableAlign === "right" ? tableAttrs.tableAlign : "left";
-  const isTableSelected = editor.isActive("table");
+  const tableAlignAttr = tableAttrs.tableAlign ?? tableAttrs.textAlign;
+  const currentTableAlign = tableAlignAttr === "center" || tableAlignAttr === "right" ? tableAlignAttr : "left";
+  const isTableSelected = tableInfo !== null;
   const hasTableContext = isTableSelected || tableCommandAnchorPosRef.current !== null;
   const currentFontFamily = normalizeStyleValue(textStyleAttrs.fontFamily);
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
@@ -26466,6 +26606,7 @@ var EditorToolbar = ({
   const currentLineHeightLabel = availableLineHeights.find((option) => normalizeStyleValue(option.value) === currentLineHeight)?.label ?? t("toolbar.lineHeightDefault");
   const currentLetterSpacingLabel = availableLetterSpacings.find((option) => normalizeStyleValue(option.value) === currentLetterSpacing)?.label ?? t("toolbar.letterSpacingDefault");
   const displayedFontFamilyLabel = currentFontFamily ? currentFontFamilyLabel : availableFontFamilies[0]?.label ?? t("toolbar.fontDefault");
+  const tableCommandAnchorPos = tableCommandAnchorPosRef.current ?? tableAnchorPos ?? void 0;
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -27068,7 +27209,7 @@ var EditorToolbar = ({
         isOpen: isTableMenuOpen,
         onOpenChange: (open) => {
           setIsTableMenuOpen(open);
-          tableCommandAnchorPosRef.current = open && editor.isActive("table") ? editor.state.selection.$from.pos : null;
+          tableCommandAnchorPosRef.current = open ? getTableAnchorPos(editor) : null;
         },
         trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.table"), children: [
@@ -27094,7 +27235,7 @@ var EditorToolbar = ({
             {
               icon: import_lucide_react44.AlignLeft,
               label: t("tableMenu.alignLeft"),
-              onClick: () => applyTableAlignment(editor, "left", tableCommandAnchorPosRef.current ?? void 0),
+              onClick: () => applyTableAlignment(editor, "left", tableCommandAnchorPos),
               active: hasTableContext && currentTableAlign === "left",
               disabled: !hasTableContext
             }
@@ -27104,7 +27245,7 @@ var EditorToolbar = ({
             {
               icon: import_lucide_react44.AlignCenter,
               label: t("tableMenu.alignCenter"),
-              onClick: () => applyTableAlignment(editor, "center", tableCommandAnchorPosRef.current ?? void 0),
+              onClick: () => applyTableAlignment(editor, "center", tableCommandAnchorPos),
               active: hasTableContext && currentTableAlign === "center",
               disabled: !hasTableContext
             }
@@ -27114,7 +27255,7 @@ var EditorToolbar = ({
             {
               icon: import_lucide_react44.AlignRight,
               label: t("tableMenu.alignRight"),
-              onClick: () => applyTableAlignment(editor, "right", tableCommandAnchorPosRef.current ?? void 0),
+              onClick: () => applyTableAlignment(editor, "right", tableCommandAnchorPos),
               active: hasTableContext && currentTableAlign === "right",
               disabled: !hasTableContext
             }
@@ -27215,9 +27356,234 @@ var EditorToolbar = ({
 // src/components/UEditor/menus.tsx
 var import_react51 = require("react");
 var import_react52 = require("@tiptap/react");
-var import_tables = require("@tiptap/pm/tables");
+var import_tables2 = require("@tiptap/pm/tables");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react45 = require("lucide-react");
+
+// src/components/UEditor/table-cell-commands.ts
+var import_state6 = require("@tiptap/pm/state");
+var import_tables = require("@tiptap/pm/tables");
+function getCellSelectionPositions(selection) {
+  const value = selection;
+  const anchor = value.$anchorCell?.pos;
+  const head = value.$headCell?.pos;
+  return typeof anchor === "number" && typeof head === "number" ? { anchor, head } : null;
+}
+function findTableInfoFromCellPos(editor, cellPos) {
+  const $pos = editor.state.doc.resolve(cellPos);
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth);
+    if (node.type.name === "table") {
+      return {
+        table: node,
+        tablePos: $pos.before(depth),
+        tableStart: $pos.start(depth)
+      };
+    }
+  }
+  return null;
+}
+function getFocusableCellPos(editor, cellPos) {
+  const cellNode = editor.state.doc.nodeAt(cellPos);
+  if (!cellNode) return cellPos + 1;
+  let offset = cellPos + 1;
+  let node = cellNode.firstChild ?? null;
+  while (node && !node.isTextblock) {
+    offset += 1;
+    node = node.firstChild ?? null;
+  }
+  return node?.isTextblock ? offset + 1 : cellPos + 1;
+}
+function focusCell(editor, cellPos) {
+  const selection = import_state6.TextSelection.near(editor.state.doc.resolve(getFocusableCellPos(editor, cellPos)));
+  editor.view.dispatch(editor.state.tr.setSelection(selection));
+  editor.view.focus();
+}
+function collectChildren(node) {
+  const children = [];
+  node.forEach((child) => children.push(child));
+  return children;
+}
+function createEmptyCellNode(cellNode) {
+  return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
+}
+function getSelectedTableRect(editor) {
+  const cellSelection = getCellSelectionPositions(editor.state.selection);
+  if (cellSelection) {
+    const tableInfo = findTableInfoFromCellPos(editor, cellSelection.anchor);
+    if (tableInfo) {
+      const map = import_tables.TableMap.get(tableInfo.table);
+      const rect = map.rectBetween(
+        cellSelection.anchor - tableInfo.tableStart,
+        cellSelection.head - tableInfo.tableStart
+      );
+      return {
+        ...rect,
+        map,
+        table: tableInfo.table,
+        tableStart: tableInfo.tableStart
+      };
+    }
+  }
+  return (0, import_tables.selectedRect)(editor.state);
+}
+function parsePixelWidth(value) {
+  if (!value) return null;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? Math.round(parsed) : null;
+}
+function getDomColumnWidths(editor, rect) {
+  const tableDom = editor.view.nodeDOM(rect.tableStart - 1);
+  if (!(tableDom instanceof HTMLTableElement)) return null;
+  const cols = Array.from(tableDom.querySelectorAll("colgroup > col"));
+  if (cols.length === 0) return null;
+  const widths = [];
+  for (let col = rect.left; col < rect.right; col += 1) {
+    const colElement = cols[col];
+    if (!colElement) return null;
+    const width = parsePixelWidth(colElement.style.width) ?? parsePixelWidth(colElement.getAttribute("width")) ?? Math.round(colElement.getBoundingClientRect().width);
+    if (!Number.isFinite(width) || width <= 0) return null;
+    widths.push(width);
+  }
+  return widths.length > 0 ? widths : null;
+}
+function getNodeColumnWidths(rect) {
+  const widths = [];
+  for (let col = rect.left; col < rect.right; col += 1) {
+    let width = null;
+    const seen = /* @__PURE__ */ new Set();
+    for (let row = 0; row < rect.map.height && width == null; row += 1) {
+      const cellPos = rect.map.map[row * rect.map.width + col];
+      if (seen.has(cellPos)) continue;
+      seen.add(cellPos);
+      const cell = rect.table.nodeAt(cellPos);
+      const colwidth = cell?.attrs.colwidth;
+      if (!Array.isArray(colwidth)) continue;
+      const cellLeft = rect.map.colCount(cellPos);
+      const widthIndex = col - cellLeft;
+      const candidate = colwidth[widthIndex];
+      if (typeof candidate === "number" && candidate > 0) {
+        width = candidate;
+      }
+    }
+    if (width == null) return null;
+    widths.push(width);
+  }
+  return widths.length > 0 ? widths : null;
+}
+function getSelectedColumnWidths(editor, rect) {
+  return getDomColumnWidths(editor, rect) ?? getNodeColumnWidths(rect);
+}
+function dispatchTableLayoutChange(editor) {
+  editor.view.dom.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, { bubbles: true }));
+}
+function mergeTableCellsPreservingColumnWidths(editor) {
+  const rect = getSelectedTableRect(editor);
+  const widths = getSelectedColumnWidths(editor, rect);
+  const merged = editor.chain().focus().mergeCells().run();
+  if (!merged) return merged;
+  if (!widths) {
+    dispatchTableLayoutChange(editor);
+    return merged;
+  }
+  const nextRect = getSelectedTableRect(editor);
+  const cellPos = nextRect.map.map[nextRect.top * nextRect.map.width + nextRect.left];
+  const absolutePos = nextRect.tableStart + cellPos;
+  const node = editor.state.doc.nodeAt(absolutePos);
+  if (!node) return merged;
+  editor.view.dispatch(
+    editor.state.tr.setNodeMarkup(absolutePos, node.type, {
+      ...node.attrs,
+      colwidth: widths
+    })
+  );
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+function runTableCommandAtCellPos(editor, cellPos, command) {
+  if (cellPos == null) return false;
+  focusCell(editor, cellPos);
+  return command(editor.chain().focus(null, { scrollIntoView: false })).run();
+}
+function getTableCornerCellPos(editor, activePos) {
+  const tableInfo = findTableInfoFromCellPos(editor, activePos);
+  if (!tableInfo) return null;
+  const map = import_tables.TableMap.get(tableInfo.table);
+  return tableInfo.tableStart + map.positionAt(map.height - 1, map.width - 1, tableInfo.table);
+}
+function replaceTableAtCellPos(editor, cellPos, updateTable) {
+  if (cellPos == null) return false;
+  const tableInfo = findTableInfoFromCellPos(editor, cellPos);
+  if (!tableInfo) return false;
+  const nextTable = updateTable(tableInfo.table);
+  if (!nextTable) return false;
+  editor.view.dispatch(editor.state.tr.replaceWith(tableInfo.tablePos, tableInfo.tablePos + tableInfo.table.nodeSize, nextTable));
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+function duplicateTableRowAt(editor, rowIndex, cellPos) {
+  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
+    const rows = collectChildren(tableNode);
+    const rowNode = rows[rowIndex];
+    if (!rowNode) return null;
+    rows.splice(rowIndex + 1, 0, rowNode.copy(rowNode.content));
+    return tableNode.type.create(tableNode.attrs, rows);
+  });
+}
+function clearTableRowAt(editor, rowIndex, cellPos) {
+  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
+    const rows = collectChildren(tableNode);
+    const rowNode = rows[rowIndex];
+    if (!rowNode) return null;
+    const cells = collectChildren(rowNode).map((cellNode) => createEmptyCellNode(cellNode));
+    rows[rowIndex] = rowNode.type.create(rowNode.attrs, cells);
+    return tableNode.type.create(tableNode.attrs, rows);
+  });
+}
+function duplicateTableColumnAt(editor, columnIndex, cellPos) {
+  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
+    const rows = collectChildren(tableNode).map((rowNode) => {
+      const cells = collectChildren(rowNode);
+      const cellNode = cells[columnIndex];
+      if (!cellNode) return rowNode;
+      cells.splice(columnIndex + 1, 0, cellNode.copy(cellNode.content));
+      return rowNode.type.create(rowNode.attrs, cells);
+    });
+    return tableNode.type.create(tableNode.attrs, rows);
+  });
+}
+function clearTableColumnAt(editor, columnIndex, cellPos) {
+  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
+    const rows = collectChildren(tableNode).map((rowNode) => {
+      const cells = collectChildren(rowNode);
+      const cellNode = cells[columnIndex];
+      if (!cellNode) return rowNode;
+      cells[columnIndex] = createEmptyCellNode(cellNode);
+      return rowNode.type.create(rowNode.attrs, cells);
+    });
+    return tableNode.type.create(tableNode.attrs, rows);
+  });
+}
+function expandTableFromCell(editor, activeCellPos, rows, columns) {
+  let cornerCellPos = getTableCornerCellPos(editor, activeCellPos);
+  if (cornerCellPos == null) return false;
+  for (let index = 0; index < rows; index += 1) {
+    const ok = runTableCommandAtCellPos(editor, cornerCellPos, (chain) => chain.addRowAfter());
+    if (!ok) return false;
+    cornerCellPos = getTableCornerCellPos(editor, cornerCellPos);
+    if (cornerCellPos == null) return false;
+  }
+  for (let index = 0; index < columns; index += 1) {
+    const ok = runTableCommandAtCellPos(editor, cornerCellPos, (chain) => chain.addColumnAfter());
+    if (!ok) return false;
+    cornerCellPos = getTableCornerCellPos(editor, cornerCellPos);
+    if (cornerCellPos == null) return false;
+  }
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+
+// src/components/UEditor/menus.tsx
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var FloatingSlashCommandMenu = ({ editor, onClose }) => {
   const t = useSmartTranslations("UEditor");
@@ -27274,7 +27640,7 @@ var FloatingMenuContent = ({ editor }) => {
 function applyTableCellBackground(editor, color) {
   const value = color || null;
   const { state, view } = editor;
-  const applied = (0, import_tables.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
+  const applied = (0, import_tables2.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
   if (applied) {
     view.focus();
     return;
@@ -27306,7 +27672,9 @@ var BubbleMenuContent = ({
   const currentTextColor = normalizeStyleValue(textStyleAttrs.color) || "inherit";
   const currentHighlightColor = normalizeStyleValue(editor.getAttributes("highlight").color) || "";
   const currentCellBgColor = normalizeStyleValue(editor.getAttributes("tableCell").backgroundColor || editor.getAttributes("tableHeader").backgroundColor) || "";
-  const isInTable2 = (0, import_tables.isInTable)(editor.state);
+  const isInTable2 = (0, import_tables2.isInTable)(editor.state);
+  const canMergeCells = isInTable2 && editor.can().mergeCells();
+  const canSplitCell = isInTable2 && editor.can().splitCell();
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
   const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
   const quickFontSizes = (0, import_react51.useMemo)(
@@ -27601,15 +27969,33 @@ var BubbleMenuContent = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => setActiveColorPalette("text"), title: t("colors.textColor"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TextColorIcon, { color: currentTextColor }) }),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => setActiveColorPalette("highlight"), active: editor.isActive("highlight"), title: t("colors.highlight"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(HighlightColorIcon, { color: currentHighlightColor }) }),
-    isInTable2 && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      ToolbarButton,
-      {
-        onClick: () => setActiveColorPalette("cell-bg"),
-        active: Boolean(currentCellBgColor),
-        title: t("tableMenu.cellBackground") || "Cell background",
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CellBgColorIcon, { color: currentCellBgColor })
-      }
-    ),
+    isInTable2 && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => setActiveColorPalette("cell-bg"),
+          active: Boolean(currentCellBgColor),
+          title: t("tableMenu.cellBackground") || "Cell background",
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CellBgColorIcon, { color: currentCellBgColor })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => {
+            if (canSplitCell) {
+              editor.chain().focus().splitCell().run();
+              return;
+            }
+            mergeTableCellsPreservingColumnWidths(editor);
+          },
+          active: canSplitCell,
+          disabled: !canMergeCells && !canSplitCell,
+          title: canSplitCell ? t("tableMenu.splitCell") || "Split cell" : t("tableMenu.mergeCells") || "Merge cells",
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.TableCellsMerge, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       ToolbarButton,
       {
@@ -28101,7 +28487,7 @@ function findDiffEnd(a, b, posA, posB) {
     posB -= size;
   }
 }
-var Fragment28 = class _Fragment {
+var Fragment29 = class _Fragment {
   /**
   @internal
   */
@@ -28393,7 +28779,7 @@ var Fragment28 = class _Fragment {
     throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
   }
 };
-Fragment28.empty = new Fragment28([], 0);
+Fragment29.empty = new Fragment29([], 0);
 var found = { index: 0, offset: 0 };
 function retIndex(index, offset) {
   found.index = index;
@@ -28618,7 +29004,7 @@ var Slice = class _Slice {
     let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
     if (typeof openStart != "number" || typeof openEnd != "number")
       throw new RangeError("Invalid input for Slice.fromJSON");
-    return new _Slice(Fragment28.fromJSON(schema, json.content), openStart, openEnd);
+    return new _Slice(Fragment29.fromJSON(schema, json.content), openStart, openEnd);
   }
   /**
   Create a slice from a fragment by taking the maximum possible
@@ -28633,7 +29019,7 @@ var Slice = class _Slice {
     return new _Slice(fragment, openStart, openEnd);
   }
 };
-Slice.empty = new Slice(Fragment28.empty, 0, 0);
+Slice.empty = new Slice(Fragment29.empty, 0, 0);
 function removeRange(content, from, to) {
   let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
   let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -28731,7 +29117,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
       addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment28(content);
+  return new Fragment29(content);
 }
 function replaceTwoWay($from, $to, depth) {
   let content = [];
@@ -28741,13 +29127,13 @@ function replaceTwoWay($from, $to, depth) {
     addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment28(content);
+  return new Fragment29(content);
 }
 function prepareSliceForReplace(slice, $along) {
   let extra = $along.depth - slice.openStart, parent = $along.node(extra);
   let node = parent.copy(slice.content);
   for (let i = extra - 1; i >= 0; i--)
-    node = $along.node(i).copy(Fragment28.from(node));
+    node = $along.node(i).copy(Fragment29.from(node));
   return {
     start: node.resolveNoCache(slice.openStart + extra),
     end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -29086,7 +29472,7 @@ var Node2 = class _Node {
     this.type = type;
     this.attrs = attrs;
     this.marks = marks;
-    this.content = content || Fragment28.empty;
+    this.content = content || Fragment29.empty;
   }
   /**
   The array of this node's child nodes.
@@ -29391,7 +29777,7 @@ var Node2 = class _Node {
   can optionally pass `start` and `end` indices into the
   replacement fragment.
   */
-  canReplace(from, to, replacement = Fragment28.empty, start = 0, end = replacement.childCount) {
+  canReplace(from, to, replacement = Fragment29.empty, start = 0, end = replacement.childCount) {
     let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
     let two = one && one.matchFragment(this.content, to);
     if (!two || !two.validEnd)
@@ -29473,7 +29859,7 @@ var Node2 = class _Node {
         throw new RangeError("Invalid text node in JSON");
       return schema.text(json.text, marks);
     }
-    let content = Fragment28.fromJSON(schema, json.content);
+    let content = Fragment29.fromJSON(schema, json.content);
     let node = schema.nodeType(json.type).create(json.attrs, content, marks);
     node.type.checkAttrs(node.attrs);
     return node;
@@ -29569,7 +29955,7 @@ var ContentMatch = class _ContentMatch {
     function search(match, types) {
       let finished = match.matchFragment(after, startIndex);
       if (finished && (!toEnd || finished.validEnd))
-        return Fragment28.from(types.map((tp) => tp.createAndFill()));
+        return Fragment29.from(types.map((tp) => tp.createAndFill()));
       for (let i = 0; i < match.next.length; i++) {
         let { type, next } = match.next[i];
         if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -30137,7 +30523,7 @@ function mapFragment(fragment, f, parent) {
       child = f(child, parent, i);
     mapped.push(child);
   }
-  return Fragment28.fromArray(mapped);
+  return Fragment29.fromArray(mapped);
 }
 var AddMarkStep = class _AddMarkStep extends Step {
   /**
@@ -30254,7 +30640,7 @@ var AddNodeMarkStep = class _AddNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment28.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment29.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc) {
     let node = doc.nodeAt(this.pos);
@@ -30300,7 +30686,7 @@ var RemoveNodeMarkStep = class _RemoveNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment28.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment29.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc) {
     let node = doc.nodeAt(this.pos);
@@ -30501,7 +30887,7 @@ var AttrStep = class _AttrStep extends Step {
       attrs[name] = node.attrs[name];
     attrs[this.attr] = this.value;
     let updated = node.type.create(attrs, null, node.marks);
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment28.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment29.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   getMap() {
     return StepMap.empty;
@@ -30678,7 +31064,7 @@ var Selection = class {
   found.
   */
   static findFrom($pos, dir, textOnly = false) {
-    let inner = $pos.parent.inlineContent ? new TextSelection2($pos) : findSelectionIn($pos.node(0), $pos.parent, $pos.pos, $pos.index(), dir, textOnly);
+    let inner = $pos.parent.inlineContent ? new TextSelection3($pos) : findSelectionIn($pos.node(0), $pos.parent, $pos.pos, $pos.index(), dir, textOnly);
     if (inner)
       return inner;
     for (let depth = $pos.depth - 1; depth >= 0; depth--) {
@@ -30747,7 +31133,7 @@ var Selection = class {
   returns the bookmark for that.
   */
   getBookmark() {
-    return TextSelection2.between(this.$anchor, this.$head).getBookmark();
+    return TextSelection3.between(this.$anchor, this.$head).getBookmark();
   }
 };
 Selection.prototype.visible = true;
@@ -30767,7 +31153,7 @@ function checkTextSelection($pos) {
     console["warn"]("TextSelection endpoint not pointing into a node with inline content (" + $pos.parent.type.name + ")");
   }
 }
-var TextSelection2 = class _TextSelection extends Selection {
+var TextSelection3 = class _TextSelection extends Selection {
   /**
   Construct a text selection between the given points.
   */
@@ -30853,7 +31239,7 @@ var TextSelection2 = class _TextSelection extends Selection {
     return new _TextSelection($anchor, $head);
   }
 };
-Selection.jsonID("text", TextSelection2);
+Selection.jsonID("text", TextSelection3);
 var TextBookmark = class _TextBookmark {
   constructor(anchor, head) {
     this.anchor = anchor;
@@ -30863,7 +31249,7 @@ var TextBookmark = class _TextBookmark {
     return new _TextBookmark(mapping.map(this.anchor), mapping.map(this.head));
   }
   resolve(doc) {
-    return TextSelection2.between(doc.resolve(this.anchor), doc.resolve(this.head));
+    return TextSelection3.between(doc.resolve(this.anchor), doc.resolve(this.head));
   }
 };
 var NodeSelection2 = class _NodeSelection extends Selection {
@@ -30885,7 +31271,7 @@ var NodeSelection2 = class _NodeSelection extends Selection {
     return new _NodeSelection($pos);
   }
   content() {
-    return new Slice(Fragment28.from(this.node), 0, 0);
+    return new Slice(Fragment29.from(this.node), 0, 0);
   }
   eq(other) {
     return other instanceof _NodeSelection && other.anchor == this.anchor;
@@ -30982,7 +31368,7 @@ var AllBookmark = {
 };
 function findSelectionIn(doc, node, pos, index, dir, text = false) {
   if (node.inlineContent)
-    return TextSelection2.create(doc, pos);
+    return TextSelection3.create(doc, pos);
   for (let i = index - (dir > 0 ? 0 : 1); dir > 0 ? i < node.childCount : i >= 0; i += dir) {
     let child = node.child(i);
     if (!child.isAtom) {
@@ -31288,7 +31674,7 @@ if (typeof WeakMap != "undefined") {
     return cache[cachePos++] = value;
   };
 }
-var TableMap = class {
+var TableMap2 = class {
   constructor(width, height, map, problems) {
     this.width = width;
     this.height = height;
@@ -31425,7 +31811,7 @@ function computeMap(table) {
     pos++;
   }
   if (width === 0 || height === 0) (problems || (problems = [])).push({ type: "zero_sized" });
-  const tableMap = new TableMap(width, height, map, problems);
+  const tableMap = new TableMap2(width, height, map, problems);
   let badWidths = false;
   for (let i = 0; !badWidths && i < colWidths.length; i += 2) if (colWidths[i] != null && colWidths[i + 1] < height) badWidths = true;
   if (badWidths) findBadColWidths(tableMap, colWidths, table);
@@ -31529,7 +31915,7 @@ function inSameTable($cellA, $cellB) {
 }
 function nextCell($pos, axis, dir) {
   const table = $pos.node(-1);
-  const map = TableMap.get(table);
+  const map = TableMap2.get(table);
   const tableStart = $pos.start(-1);
   const moved = map.nextCell($pos.pos - tableStart, axis, dir);
   return moved == null ? null : $pos.node(0).resolve(tableStart + moved);
@@ -31549,7 +31935,7 @@ function removeColSpan(attrs, pos, n = 1) {
 var CellSelection = class CellSelection2 extends Selection {
   constructor($anchorCell, $headCell = $anchorCell) {
     const table = $anchorCell.node(-1);
-    const map = TableMap.get(table);
+    const map = TableMap2.get(table);
     const tableStart = $anchorCell.start(-1);
     const rect = map.rectBetween($anchorCell.pos - tableStart, $headCell.pos - tableStart);
     const doc = $anchorCell.node(0);
@@ -31574,11 +31960,11 @@ var CellSelection = class CellSelection2 extends Selection {
       else if (tableChanged && this.isColSelection()) return CellSelection2.colSelection($anchorCell, $headCell);
       else return new CellSelection2($anchorCell, $headCell);
     }
-    return TextSelection2.between($anchorCell, $headCell);
+    return TextSelection3.between($anchorCell, $headCell);
   }
   content() {
     const table = this.$anchorCell.node(-1);
-    const map = TableMap.get(table);
+    const map = TableMap2.get(table);
     const tableStart = this.$anchorCell.start(-1);
     const rect = map.rectBetween(this.$anchorCell.pos - tableStart, this.$headCell.pos - tableStart);
     const seen = {};
@@ -31613,10 +31999,10 @@ var CellSelection = class CellSelection2 extends Selection {
         }
         rowContent.push(cell);
       }
-      rows.push(table.child(row).copy(Fragment28.from(rowContent)));
+      rows.push(table.child(row).copy(Fragment29.from(rowContent)));
     }
     const fragment = this.isColSelection() && this.isRowSelection() ? table : rows;
-    return new Slice(Fragment28.from(fragment), 1, 1);
+    return new Slice(Fragment29.from(fragment), 1, 1);
   }
   replace(tr, content = Slice.empty) {
     const mapFrom = tr.steps.length, ranges = this.ranges;
@@ -31628,11 +32014,11 @@ var CellSelection = class CellSelection2 extends Selection {
     if (sel) tr.setSelection(sel);
   }
   replaceWith(tr, node) {
-    this.replace(tr, new Slice(Fragment28.from(node), 0, 0));
+    this.replace(tr, new Slice(Fragment29.from(node), 0, 0));
   }
   forEachCell(f) {
     const table = this.$anchorCell.node(-1);
-    const map = TableMap.get(table);
+    const map = TableMap2.get(table);
     const tableStart = this.$anchorCell.start(-1);
     const cells = map.cellsInRect(map.rectBetween(this.$anchorCell.pos - tableStart, this.$headCell.pos - tableStart));
     for (let i = 0; i < cells.length; i++) f(table.nodeAt(cells[i]), tableStart + cells[i]);
@@ -31647,7 +32033,7 @@ var CellSelection = class CellSelection2 extends Selection {
   }
   static colSelection($anchorCell, $headCell = $anchorCell) {
     const table = $anchorCell.node(-1);
-    const map = TableMap.get(table);
+    const map = TableMap2.get(table);
     const tableStart = $anchorCell.start(-1);
     const anchorRect = map.findCell($anchorCell.pos - tableStart);
     const headRect = map.findCell($headCell.pos - tableStart);
@@ -31663,7 +32049,7 @@ var CellSelection = class CellSelection2 extends Selection {
   }
   isRowSelection() {
     const table = this.$anchorCell.node(-1);
-    const map = TableMap.get(table);
+    const map = TableMap2.get(table);
     const tableStart = this.$anchorCell.start(-1);
     const anchorLeft = map.colCount(this.$anchorCell.pos - tableStart);
     const headLeft = map.colCount(this.$headCell.pos - tableStart);
@@ -31677,7 +32063,7 @@ var CellSelection = class CellSelection2 extends Selection {
   }
   static rowSelection($anchorCell, $headCell = $anchorCell) {
     const table = $anchorCell.node(-1);
-    const map = TableMap.get(table);
+    const map = TableMap2.get(table);
     const tableStart = $anchorCell.start(-1);
     const anchorRect = map.findCell($anchorCell.pos - tableStart);
     const headRect = map.findCell($headCell.pos - tableStart);
@@ -31726,7 +32112,7 @@ var CellBookmark = class CellBookmark2 {
 };
 var fixTablesKey = new PluginKey3("fix-tables");
 function convertTableNodeToArrayOfRows(tableNode) {
-  const map = TableMap.get(tableNode);
+  const map = TableMap2.get(tableNode);
   const rows = [];
   const rowCount = map.height;
   const colCount$1 = map.width;
@@ -31757,7 +32143,7 @@ function convertTableNodeToArrayOfRows(tableNode) {
 }
 function convertArrayOfRowsToTableNode(tableNode, arrayOfNodes) {
   const newRows = [];
-  const map = TableMap.get(tableNode);
+  const map = TableMap2.get(tableNode);
   const rowCount = map.height;
   const colCount$1 = map.width;
   for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
@@ -31806,7 +32192,7 @@ function findParentNode(predicate, $pos) {
 function getCellsInColumn(columnIndex, selection) {
   const table = findTable(selection.$from);
   if (!table) return;
-  const map = TableMap.get(table.node);
+  const map = TableMap2.get(table.node);
   if (columnIndex < 0 || columnIndex > map.width - 1) return;
   return map.cellsInRect({
     left: columnIndex,
@@ -31827,7 +32213,7 @@ function getCellsInColumn(columnIndex, selection) {
 function getCellsInRow(rowIndex, selection) {
   const table = findTable(selection.$from);
   if (!table) return;
-  const map = TableMap.get(table.node);
+  const map = TableMap2.get(table.node);
   if (rowIndex < 0 || rowIndex > map.height - 1) return;
   return map.cellsInRect({
     left: 0,
@@ -31956,7 +32342,7 @@ function moveColumn(moveColParams) {
   const newTable = moveTableColumn$1(table.node, indexesOriginColumn, indexesTargetColumn, 0);
   tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTable);
   if (!select) return true;
-  const map = TableMap.get(newTable);
+  const map = TableMap2.get(newTable);
   const start = table.start;
   const index = targetIndex;
   const lastCell = map.positionAt(map.height - 1, index, newTable);
@@ -31984,7 +32370,7 @@ function moveRow(moveRowParams) {
   const newTable = moveTableRow$1(table.node, indexesOriginRow, indexesTargetRow, 0);
   tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTable);
   if (!select) return true;
-  const map = TableMap.get(newTable);
+  const map = TableMap2.get(newTable);
   const start = table.start;
   const index = targetIndex;
   const lastCell = map.positionAt(index, map.width - 1, newTable);
@@ -31999,12 +32385,12 @@ function moveTableRow$1(table, indexesOrigin, indexesTarget, direction) {
   rows = moveRowInArrayOfRows(rows, indexesOrigin, indexesTarget, direction);
   return convertArrayOfRowsToTableNode(table, rows);
 }
-function selectedRect(state) {
+function selectedRect2(state) {
   const sel = state.selection;
   const $pos = selectionCell(state);
   const table = $pos.node(-1);
   const tableStart = $pos.start(-1);
-  const map = TableMap.get(table);
+  const map = TableMap2.get(table);
   return {
     ...sel instanceof CellSelection ? map.rectBetween(sel.$anchorCell.pos - tableStart, sel.$headCell.pos - tableStart) : map.findCell($pos.pos - tableStart),
     tableStart,
@@ -32017,7 +32403,7 @@ function deprecated_toggleHeader(type) {
     if (!isInTable(state)) return false;
     if (dispatch) {
       const types = tableNodeTypes(state.schema);
-      const rect = selectedRect(state), tr = state.tr;
+      const rect = selectedRect2(state), tr = state.tr;
       const cells = rect.map.cellsInRect(type == "column" ? {
         left: rect.left,
         top: 0,
@@ -32057,7 +32443,7 @@ function toggleHeader(type, options) {
     if (!isInTable(state)) return false;
     if (dispatch) {
       const types = tableNodeTypes(state.schema);
-      const rect = selectedRect(state), tr = state.tr;
+      const rect = selectedRect2(state), tr = state.tr;
       const isHeaderRowEnabled = isHeaderEnabledByType("row", rect, types);
       const isHeaderColumnEnabled = isHeaderEnabledByType("column", rect, types);
       const selectionStartsAt = (type === "column" ? isHeaderRowEnabled : type === "row" ? isHeaderColumnEnabled : false) ? 1 : 0;
@@ -32189,7 +32575,7 @@ function shiftArrow(axis, dir) {
   };
 }
 function atEndOfCell(view, axis, dir) {
-  if (!(view.state.selection instanceof TextSelection2)) return null;
+  if (!(view.state.selection instanceof TextSelection3)) return null;
   const { $head } = view.state.selection;
   for (let d = $head.depth - 1; d >= 0; d--) {
     const parent = $head.node(d);
@@ -32205,152 +32591,482 @@ function atEndOfCell(view, axis, dir) {
 var columnResizingPluginKey = new PluginKey3("tableColumnResizing");
 
 // src/components/UEditor/table-controls.tsx
-var import_lucide_react46 = require("lucide-react");
-
-// src/components/UEditor/table-dom-utils.ts
-var MIN_TABLE_ROW_HEIGHT = 36;
-var COLUMN_RESIZE_LINE_THICKNESS = 2;
-var ROW_RESIZE_LINE_THICKNESS = 2;
-var UEDITOR_TABLE_LAYOUT_CHANGE_EVENT = "ueditor-table-layout-change";
-var TABLE_RESIZE_HIT_ZONE = 10;
-function findTableRowNodeInfo(view, rowElement) {
-  const firstCell = rowElement.querySelector("th,td");
-  if (!firstCell) return null;
-  const cellPos = view.posAtDOM(firstCell, 0);
-  const $pos = view.state.doc.resolve(cellPos);
-  for (let depth = $pos.depth; depth > 0; depth -= 1) {
-    const node = $pos.node(depth);
-    if (node.type.name === "tableRow") {
-      return {
-        pos: $pos.before(depth),
-        node
-      };
-    }
-  }
-  return null;
-}
-function resolveEventElement(target) {
-  if (target instanceof Element) return 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;
-  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
-  return nearBottom && !nearRight;
-}
-function isColumnResizeHotspot(cell, clientX, clientY) {
-  const rect = cell.getBoundingClientRect();
-  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
-  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
-  return nearRight && !nearBottom;
-}
-function getRelativeBoundaryMetrics(surface, table, row, cell) {
-  const surfaceRect = surface.getBoundingClientRect();
-  const tableRect = table.getBoundingClientRect();
-  const rowRect = row.getBoundingClientRect();
-  const cellRect = cell.getBoundingClientRect();
-  return {
-    left: tableRect.left - surfaceRect.left + surface.scrollLeft,
-    top: tableRect.top - surfaceRect.top + surface.scrollTop,
-    width: tableRect.width,
-    height: tableRect.height,
-    rowBottom: rowRect.bottom - surfaceRect.top + surface.scrollTop,
-    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
-  };
-}
-function getRelativeSelectedCellsMetrics(surface) {
-  const selectedCells = Array.from(
-    surface.querySelectorAll("td.selectedCell, th.selectedCell")
-  );
-  if (selectedCells.length === 0) {
-    return null;
-  }
-  const surfaceRect = surface.getBoundingClientRect();
-  let left = Number.POSITIVE_INFINITY;
-  let top = Number.POSITIVE_INFINITY;
-  let right = Number.NEGATIVE_INFINITY;
-  let bottom = Number.NEGATIVE_INFINITY;
-  selectedCells.forEach((cell) => {
-    const rect = cell.getBoundingClientRect();
-    left = Math.min(left, rect.left);
-    top = Math.min(top, rect.top);
-    right = Math.max(right, rect.right);
-    bottom = Math.max(bottom, rect.bottom);
-  });
-  return {
-    left: left - surfaceRect.left + surface.scrollLeft,
-    top: top - surfaceRect.top + surface.scrollTop,
-    width: right - left,
-    height: bottom - top
-  };
-}
+var import_lucide_react48 = require("lucide-react");
 
-// src/components/UEditor/table-controls.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var FALLBACK_TABLE_ROW_HEIGHT = 44;
-var FALLBACK_TABLE_COLUMN_WIDTH = 160;
+// src/components/UEditor/table-hover-state.ts
 var MENU_HOVER_PADDING = 18;
 var ROW_HANDLE_HOVER_WIDTH = 28;
 var COLUMN_HANDLE_HOVER_HEIGHT = 28;
-var TABLE_MENU_TOP_OFFSET = 10;
-var ADD_COLUMN_RAIL_GAP = 4;
-var ADD_ROW_RAIL_GAP = 4;
 var ADD_COLUMN_HOVER_WIDTH = 24;
 var ADD_ROW_HOVER_HEIGHT = 24;
 var HANDLE_HOVER_RADIUS = 14;
-var IDLE_HANDLE_SCALE = "0.78";
-var DEFAULT_HOVER_STATE = {
+var DEFAULT_TABLE_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;
-  return null;
+function areTableHoverStatesEqual(left, right) {
+  return left.menuVisible === right.menuVisible && left.addColumnVisible === right.addColumnVisible && left.addRowVisible === right.addRowVisible && left.rowHandleIndex === right.rowHandleIndex && left.columnHandleIndex === right.columnHandleIndex;
 }
-function nearestIndex(centers, position) {
-  let bestIndex = 0;
-  let bestDistance = Number.POSITIVE_INFINITY;
-  centers.forEach((center, index) => {
-    const distance = Math.abs(center - position);
-    if (distance < bestDistance) {
-      bestDistance = distance;
-      bestIndex = index;
+function buildTableHoverState({
+  event,
+  layout,
+  surface
+}) {
+  const surfaceRect = surface.getBoundingClientRect();
+  const relativeX = event.clientX - surfaceRect.left + surface.scrollLeft;
+  const relativeY = event.clientY - surfaceRect.top + surface.scrollTop;
+  const targetElement = resolveEventElement(event.target);
+  const directRowHandle = targetElement?.closest?.("[data-row-handle-index]");
+  const directColumnHandle = targetElement?.closest?.("[data-column-handle-index]");
+  const directTableMenu = targetElement?.closest?.("[data-table-control='table-menu']");
+  const directAddColumn = targetElement?.closest?.("[data-table-control='add-column']");
+  const directAddRow = targetElement?.closest?.("[data-table-control='add-row']");
+  const directRowHandleIndex = directRowHandle instanceof HTMLElement ? Number.parseInt(directRowHandle.dataset.rowHandleIndex ?? "", 10) : Number.NaN;
+  const directColumnHandleIndex = directColumnHandle instanceof HTMLElement ? Number.parseInt(directColumnHandle.dataset.columnHandleIndex ?? "", 10) : Number.NaN;
+  const visibleTableWidth = Math.min(layout.tableWidth, layout.viewportWidth);
+  const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
+  const isMouseInTable = relativeX >= layout.tableLeft && relativeX <= layout.tableLeft + layout.tableWidth && relativeY >= layout.tableTop && relativeY <= layout.tableTop + layout.tableHeight;
+  const rowHandleIndex = Number.isFinite(directRowHandleIndex) ? directRowHandleIndex : layout.rowHandles.find((rowHandle) => relativeX >= layout.tableLeft - ROW_HANDLE_HOVER_WIDTH && relativeX <= layout.tableLeft && Math.abs(relativeY - rowHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
+  const columnHandleIndex = Number.isFinite(directColumnHandleIndex) ? directColumnHandleIndex : layout.columnHandles.find((columnHandle) => relativeY >= layout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= layout.tableTop && Math.abs(relativeX - columnHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
+  const menuVisible = Boolean(directTableMenu) || isMouseInTable || relativeX >= layout.tableLeft - MENU_HOVER_PADDING && relativeX <= layout.tableLeft + 42 && relativeY >= layout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= layout.tableTop + MENU_HOVER_PADDING;
+  const lastRow = layout.rowHandles[layout.rowHandles.length - 1];
+  const lastCol = layout.columnHandles[layout.columnHandles.length - 1];
+  const isMouseInLastColumn = lastCol ? relativeX >= lastCol.start && relativeX <= lastCol.start + lastCol.size && relativeY >= layout.tableTop && relativeY <= layout.tableTop + visibleTableHeight : false;
+  const addColumnVisible = Boolean(directAddColumn) || relativeX >= layout.tableLeft + visibleTableWidth && relativeX <= layout.tableLeft + visibleTableWidth + ADD_COLUMN_HOVER_WIDTH && relativeY >= layout.tableTop && relativeY <= layout.tableTop + visibleTableHeight || isMouseInLastColumn;
+  const isMouseInLastRow = lastRow ? relativeY >= lastRow.start && relativeY <= lastRow.start + lastRow.size && relativeX >= layout.tableLeft && relativeX <= layout.tableLeft + visibleTableWidth : false;
+  const addRowVisible = Boolean(directAddRow) || relativeY >= layout.tableTop + visibleTableHeight && relativeY <= layout.tableTop + visibleTableHeight + ADD_ROW_HOVER_HEIGHT && relativeX >= layout.tableLeft && relativeX <= layout.tableLeft + visibleTableWidth || isMouseInLastRow;
+  return {
+    menuVisible,
+    addColumnVisible,
+    addRowVisible,
+    rowHandleIndex,
+    columnHandleIndex
+  };
+}
+
+// src/components/UEditor/table-drag-preview.tsx
+var import_jsx_runtime84 = require("react/jsx-runtime");
+function TableDragPreview({
+  columnDragLabel,
+  dragPreview,
+  layout,
+  rowDragLabel
+}) {
+  if (!dragPreview) return null;
+  const expandPreviewWidth = dragPreview.kind === "add-column" ? layout.tableWidth + dragPreview.previewCols * layout.avgColumnWidth : layout.tableWidth;
+  const expandPreviewHeight = dragPreview.kind === "add-row" ? layout.tableHeight + dragPreview.previewRows * layout.avgRowHeight : layout.tableHeight;
+  const dragStatusText = dragPreview.kind === "row" ? `${rowDragLabel} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview.kind === "column" ? `${columnDragLabel} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview.kind === "add-row" ? `+${dragPreview.previewRows}R` : `+${dragPreview.previewCols}C`;
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+    dragPreview.kind === "row" && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute z-20 rounded-lg border border-primary/20 bg-primary/10",
+          style: {
+            top: dragPreview.targetStart,
+            left: layout.tableLeft,
+            width: layout.tableWidth,
+            height: dragPreview.targetSize
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute z-20 rounded-full bg-primary/80",
+          style: {
+            top: dragPreview.targetStart + dragPreview.targetSize / 2 - 1,
+            left: layout.tableLeft,
+            width: layout.tableWidth,
+            height: 2
+          }
+        }
+      )
+    ] }),
+    dragPreview.kind === "column" && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute z-20 rounded-lg border border-primary/20 bg-primary/10",
+          style: {
+            top: layout.tableTop,
+            left: dragPreview.targetStart,
+            width: dragPreview.targetSize,
+            height: layout.tableHeight
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute z-20 rounded-full bg-primary/80",
+          style: {
+            top: layout.tableTop,
+            left: dragPreview.targetStart + dragPreview.targetSize / 2 - 1,
+            width: 2,
+            height: layout.tableHeight
+          }
+        }
+      )
+    ] }),
+    (dragPreview.kind === "add-row" || dragPreview.kind === "add-column") && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute z-20 rounded-xl border border-dashed border-primary/70 bg-primary/5",
+        style: {
+          top: layout.tableTop,
+          left: layout.tableLeft,
+          width: expandPreviewWidth,
+          height: expandPreviewHeight
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      "div",
+      {
+        role: "status",
+        className: "pointer-events-none absolute z-30 rounded-full border border-primary/20 bg-background/95 px-2 py-1 text-[11px] font-medium text-foreground shadow-sm backdrop-blur",
+        style: {
+          top: dragPreview.kind === "add-row" || dragPreview.kind === "add-column" ? layout.tableTop + expandPreviewHeight + 8 : layout.tableTop - 40,
+          left: dragPreview.kind === "add-row" || dragPreview.kind === "add-column" ? layout.tableLeft + Math.max(0, expandPreviewWidth - 84) : layout.tableLeft + Math.max(0, layout.tableWidth - 108)
+        },
+        children: dragStatusText
+      }
+    )
+  ] });
+}
+
+// src/components/UEditor/table-add-rails.tsx
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var ADD_COLUMN_RAIL_GAP = 4;
+var ADD_ROW_RAIL_GAP = 4;
+function TableAddRails({
+  addColumnVisible,
+  addRowVisible,
+  canExpandTable,
+  controlsVisible,
+  layout,
+  onStartAddColumn,
+  onStartAddRow,
+  quickAddColumnLabel,
+  quickAddRowLabel
+}) {
+  const visibleTableWidth = Math.min(layout.tableWidth, layout.viewportWidth);
+  const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
+  const columnRailTop = layout.tableTop;
+  const columnRailLeft = layout.tableLeft + visibleTableWidth + ADD_COLUMN_RAIL_GAP;
+  const rowRailTop = layout.tableTop + visibleTableHeight + ADD_ROW_RAIL_GAP;
+  const rowRailLeft = layout.tableLeft;
+  const showColumnRail = controlsVisible || addColumnVisible;
+  const showRowRail = controlsVisible || addRowVisible;
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      Tooltip,
+      {
+        placement: "right",
+        content: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-xs font-medium", children: quickAddColumnLabel }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-table-control": "add-column",
+            "aria-label": quickAddColumnLabel,
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              if (!canExpandTable) return;
+              onStartAddColumn();
+            },
+            disabled: !canExpandTable,
+            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-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+            ),
+            style: {
+              top: showColumnRail ? columnRailTop : columnRailTop + Math.max(0, visibleTableHeight / 2 - 24),
+              left: columnRailLeft,
+              width: showColumnRail ? 18 : 12,
+              height: showColumnRail ? visibleTableHeight : 48,
+              opacity: showColumnRail ? 1 : 0,
+              transform: showColumnRail ? "scale(1)" : "scale(0.92)",
+              pointerEvents: showColumnRail ? "auto" : "none"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      Tooltip,
+      {
+        placement: "bottom",
+        content: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-xs font-medium", children: quickAddRowLabel }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-table-control": "add-row",
+            "aria-label": quickAddRowLabel,
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              if (!canExpandTable) return;
+              onStartAddRow();
+            },
+            disabled: !canExpandTable,
+            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-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+            ),
+            style: {
+              top: rowRailTop,
+              left: showRowRail ? rowRailLeft : rowRailLeft + Math.max(0, visibleTableWidth / 2 - 24),
+              width: showRowRail ? visibleTableWidth : 48,
+              height: showRowRail ? 16 : 12,
+              opacity: showRowRail ? 1 : 0,
+              transform: showRowRail ? "scale(1)" : "scale(0.92)",
+              pointerEvents: showRowRail ? "auto" : "none"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/UEditor/table-control-menu.tsx
+var import_lucide_react46 = require("lucide-react");
+var import_jsx_runtime86 = require("react/jsx-runtime");
+function TableControlMenu({
+  controlsVisible,
+  isOpen,
+  items,
+  label,
+  left,
+  menuVisible,
+  onOpenChange,
+  top
+}) {
+  const shown = controlsVisible || menuVisible || isOpen;
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    "div",
+    {
+      className: "absolute z-30",
+      "data-table-control": "table-menu",
+      style: {
+        top,
+        left
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        Tooltip,
+        {
+          placement: "top",
+          disabled: isOpen,
+          content: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-xs font-medium", children: label }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            DropdownMenu,
+            {
+              placement: "bottom-start",
+              isOpen,
+              onOpenChange,
+              contentClassName: "p-2",
+              items,
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": label,
+                  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"
+                  ),
+                  style: {
+                    opacity: shown ? 1 : 0,
+                    transform: shown ? "scale(1)" : "scale(0.82)",
+                    pointerEvents: shown ? "auto" : "none"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react46.MoreHorizontal, { className: "h-4 w-4" })
+                }
+              )
+            }
+          ) })
+        }
+      )
     }
-  });
-  return bestIndex;
+  );
 }
+
+// src/components/UEditor/table-axis-handles.tsx
+var import_lucide_react47 = require("lucide-react");
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var IDLE_HANDLE_SCALE = "0.78";
+function TableRowHandles({
+  activeRowIndex,
+  controlsVisible,
+  getMenuItems,
+  hoverRowHandleIndex,
+  onOpenMenuChange,
+  onStartDrag,
+  openMenuKey,
+  rowDragLabel,
+  rowHandleLeft,
+  rowHandles
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_jsx_runtime87.Fragment, { children: rowHandles.map((rowHandle) => {
+    const menuKey = `row:${rowHandle.index}`;
+    const isActive = rowHandle.index === activeRowIndex;
+    const visible = controlsVisible || hoverRowHandleIndex === rowHandle.index || openMenuKey === menuKey;
+    const isShown = visible || isActive;
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      "div",
+      {
+        className: "absolute z-30",
+        "data-row-handle-index": rowHandle.index,
+        style: {
+          top: Math.max(8, rowHandle.center - 12),
+          left: rowHandleLeft
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          Tooltip,
+          {
+            placement: "right",
+            disabled: openMenuKey === menuKey || !visible && isActive,
+            content: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-xs font-medium", children: `${rowDragLabel} ${rowHandle.index + 1}` }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+              DropdownMenu,
+              {
+                placement: "right",
+                isOpen: openMenuKey === menuKey,
+                onOpenChange: (open) => onOpenMenuChange(menuKey, open),
+                contentClassName: "p-2",
+                items: getMenuItems(rowHandle),
+                trigger: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${rowDragLabel} ${rowHandle.index + 1}`,
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onStartDrag(rowHandle);
+                    },
+                    className: cn(
+                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-150",
+                      visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
+                    ),
+                    style: {
+                      opacity: isShown ? 1 : 0,
+                      transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
+                      pointerEvents: isShown ? "auto" : "none"
+                    },
+                    children: visible ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react47.GripVertical, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "h-3 w-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
+                  }
+                )
+              }
+            ) })
+          }
+        )
+      },
+      `row-handle-${rowHandle.index}`
+    );
+  }) });
+}
+function TableColumnHandles({
+  activeColumnIndex,
+  columnDragLabel,
+  columnHandleTop,
+  columnHandles,
+  controlsVisible,
+  getMenuItems,
+  hoverColumnHandleIndex,
+  onOpenMenuChange,
+  onStartDrag,
+  openMenuKey
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_jsx_runtime87.Fragment, { children: columnHandles.map((columnHandle) => {
+    const menuKey = `column:${columnHandle.index}`;
+    const isActive = columnHandle.index === activeColumnIndex;
+    const visible = controlsVisible || hoverColumnHandleIndex === columnHandle.index || openMenuKey === menuKey;
+    const isShown = visible || isActive;
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      "div",
+      {
+        className: "absolute z-30",
+        "data-column-handle-index": columnHandle.index,
+        style: {
+          top: columnHandleTop,
+          left: Math.max(8, columnHandle.center - 12)
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          Tooltip,
+          {
+            placement: "top",
+            disabled: openMenuKey === menuKey || !visible && isActive,
+            content: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-xs font-medium", children: `${columnDragLabel} ${columnHandle.index + 1}` }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+              DropdownMenu,
+              {
+                placement: "bottom-start",
+                isOpen: openMenuKey === menuKey,
+                onOpenChange: (open) => onOpenMenuChange(menuKey, open),
+                contentClassName: "p-2",
+                items: getMenuItems(columnHandle),
+                trigger: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${columnDragLabel} ${columnHandle.index + 1}`,
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onStartDrag(columnHandle);
+                    },
+                    className: cn(
+                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-150",
+                      visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
+                    ),
+                    style: {
+                      opacity: isShown ? 1 : 0,
+                      transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
+                      pointerEvents: isShown ? "auto" : "none"
+                    },
+                    children: visible ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react47.GripHorizontal, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "h-1 w-3 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
+                  }
+                )
+              }
+            ) })
+          }
+        )
+      },
+      `column-handle-${columnHandle.index}`
+    );
+  }) });
+}
+
+// src/components/UEditor/table-layout-model.ts
+var FALLBACK_TABLE_ROW_HEIGHT = 44;
+var FALLBACK_TABLE_COLUMN_WIDTH = 160;
 function metricOrFallback(value, fallback) {
   return Number.isFinite(value) && value > 0 ? value : fallback;
 }
+function parsePixelMetric(value) {
+  if (!value) return null;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
 function getPrimaryCell(table) {
   const cell = table.querySelector("th,td");
   return cell instanceof HTMLTableCellElement ? cell : null;
@@ -32362,7 +33078,7 @@ function getLastCell(table) {
   return cell instanceof HTMLTableCellElement ? cell : null;
 }
 function getCellFromTarget(target) {
-  const element = resolveElement(target);
+  const element = resolveEventElement(target);
   if (!element) return null;
   const directCell = element.closest("th,td");
   if (directCell instanceof HTMLTableCellElement) {
@@ -32388,25 +33104,135 @@ function findTableInfo(editor, pos) {
   }
   return null;
 }
-function getLastCellPosFromState(editor, pos) {
-  const tableInfo = findTableInfo(editor, pos);
-  if (!tableInfo) return null;
-  const map = TableMap.get(tableInfo.node);
-  return tableInfo.start + map.positionAt(map.height - 1, map.width - 1, tableInfo.node);
+function getCellRelativePosFromDomPos(map, tableStart, domPos) {
+  const relativeDomPos = domPos - tableStart;
+  const seen = /* @__PURE__ */ new Set();
+  for (const relativeCellPos of map.map) {
+    if (seen.has(relativeCellPos)) continue;
+    seen.add(relativeCellPos);
+    if (relativeDomPos === relativeCellPos || relativeDomPos === relativeCellPos + 1) {
+      return relativeCellPos;
+    }
+  }
+  return null;
+}
+function buildLogicalColumnMetrics({
+  editor,
+  surface,
+  surfaceRect,
+  tableElement,
+  tableInfo,
+  tableLeft,
+  tableWidth
+}) {
+  const map = TableMap2.get(tableInfo.node);
+  const fallbackWidth = metricOrFallback(tableWidth / map.width, FALLBACK_TABLE_COLUMN_WIDTH);
+  const firstRow = tableElement.rows.item(0);
+  const visualColumns = [];
+  if (firstRow) {
+    for (const tableCell of Array.from(firstRow.cells)) {
+      if (!(tableCell instanceof HTMLTableCellElement)) continue;
+      const cellPos = editor.view.posAtDOM(tableCell, 0);
+      const relativeCellPos = getCellRelativePosFromDomPos(map, tableInfo.start, cellPos);
+      if (relativeCellPos == null) continue;
+      const cellMapRect = map.findCell(relativeCellPos);
+      const cellRect = tableCell.getBoundingClientRect();
+      const cellStart = cellRect.width > 0 ? cellRect.left - surfaceRect.left + surface.scrollLeft : tableLeft + cellMapRect.left * fallbackWidth;
+      const size = metricOrFallback(cellRect.width, fallbackWidth * Math.max(1, cellMapRect.right - cellMapRect.left));
+      visualColumns.push({
+        index: cellMapRect.left,
+        cellPos: tableInfo.start + relativeCellPos,
+        start: cellStart,
+        size,
+        center: cellStart + size / 2
+      });
+    }
+  }
+  if (visualColumns.length > 0) {
+    return visualColumns.sort((a, b) => a.index - b.index);
+  }
+  const cols = Array.from(tableElement.querySelectorAll("colgroup > col"));
+  const parsedWidths = cols.slice(0, map.width).map((col) => parsePixelMetric(col.style.width) ?? parsePixelMetric(col.getAttribute("width")));
+  const hasCompleteColWidths = parsedWidths.length >= map.width && parsedWidths.every((width) => typeof width === "number");
+  let cursor = tableLeft;
+  return Array.from({ length: map.width }, (_, index) => {
+    const size = hasCompleteColWidths ? parsedWidths[index] : fallbackWidth;
+    const start = hasCompleteColWidths ? cursor : tableLeft + index * fallbackWidth;
+    cursor += size;
+    return {
+      index,
+      cellPos: tableInfo.start + map.positionAt(0, index, tableInfo.node),
+      start,
+      size,
+      center: start + size / 2
+    };
+  });
+}
+function buildLogicalRowMetrics({
+  editor,
+  surface,
+  surfaceRect,
+  tableInfo,
+  rows,
+  tableTop,
+  tableHeight,
+  cornerCell
+}) {
+  const map = TableMap2.get(tableInfo.node);
+  const fallbackHeight = metricOrFallback(tableHeight / map.height, FALLBACK_TABLE_ROW_HEIGHT);
+  const visualRows = [];
+  const seenCellPositions = /* @__PURE__ */ new Set();
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex += 1) {
+    const relativeCellPos = map.map[rowIndex * map.width];
+    if (seenCellPositions.has(relativeCellPos)) continue;
+    seenCellPositions.add(relativeCellPos);
+    const cellMapRect = map.findCell(relativeCellPos);
+    const cellDom = editor.view.nodeDOM(tableInfo.start + relativeCellPos);
+    const tableCell = cellDom instanceof HTMLTableCellElement ? cellDom : null;
+    if (tableCell) {
+      const cellRect = tableCell.getBoundingClientRect();
+      const start = cellRect.height > 0 ? cellRect.top - surfaceRect.top + surface.scrollTop : tableTop + cellMapRect.top * fallbackHeight;
+      const size = metricOrFallback(cellRect.height, fallbackHeight * Math.max(1, cellMapRect.bottom - cellMapRect.top));
+      visualRows.push({
+        index: cellMapRect.top,
+        cellPos: tableInfo.start + relativeCellPos,
+        start,
+        size,
+        center: start + size / 2
+      });
+    }
+  }
+  if (visualRows.length > 0) {
+    return visualRows.sort((a, b) => a.index - b.index);
+  }
+  return rows.map((tableRow, index) => {
+    const rowRect = tableRow.getBoundingClientRect();
+    const anchorCell = tableRow.cells.item(0) ?? cornerCell;
+    const start = rowRect.height > 0 ? rowRect.top - surfaceRect.top + surface.scrollTop : tableTop + index * fallbackHeight;
+    const size = metricOrFallback(rowRect.height, fallbackHeight);
+    return {
+      index,
+      cellPos: editor.view.posAtDOM(anchorCell, 0),
+      start,
+      size,
+      center: start + size / 2
+    };
+  });
 }
-function buildLayout(editor, surface, cell) {
+function buildTableControlLayout(editor, surface, cell) {
   const row = cell.closest("tr");
   const table = cell.closest("table");
   if (!(row instanceof HTMLTableRowElement) || !(table instanceof HTMLTableElement)) {
     return null;
   }
   const rows = Array.from(table.rows).filter((item) => item instanceof HTMLTableRowElement);
-  const referenceRow = rows[0];
-  const referenceCells = Array.from(referenceRow?.cells ?? []).filter((item) => item instanceof HTMLTableCellElement);
   const cornerCell = getLastCell(table);
-  if (rows.length === 0 || referenceCells.length === 0 || !(cornerCell instanceof HTMLTableCellElement)) {
+  const cellPos = editor.view.posAtDOM(cell, 0);
+  const tableInfo = findTableInfo(editor, cellPos);
+  if (rows.length === 0 || !tableInfo || !(cornerCell instanceof HTMLTableCellElement)) {
     return null;
   }
+  const map = TableMap2.get(tableInfo.node);
   const surfaceRect = surface.getBoundingClientRect();
   const tableRect = table.getBoundingClientRect();
   const wrapperElement = table.closest(".tableWrapper");
@@ -32415,8 +33241,8 @@ function buildLayout(editor, surface, cell) {
   const tableLeft = tableRect.left - surfaceRect.left + surface.scrollLeft;
   const tableTop = tableRect.top - surfaceRect.top + surface.scrollTop;
   const avgRowHeight = metricOrFallback(tableRect.height / rows.length, FALLBACK_TABLE_ROW_HEIGHT);
-  const avgColumnWidth = metricOrFallback(tableRect.width / referenceCells.length, FALLBACK_TABLE_COLUMN_WIDTH);
-  const tableWidth = metricOrFallback(tableRect.width, avgColumnWidth * referenceCells.length);
+  const avgColumnWidth = metricOrFallback(tableRect.width / map.width, FALLBACK_TABLE_COLUMN_WIDTH);
+  const tableWidth = metricOrFallback(tableRect.width, avgColumnWidth * map.width);
   const tableHeight = metricOrFallback(tableRect.height, avgRowHeight * rows.length);
   const wrapperLeft = wrapperRect.left - surfaceRect.left + surface.scrollLeft;
   const wrapperTop = wrapperRect.top - surfaceRect.top + surface.scrollTop;
@@ -32426,36 +33252,33 @@ function buildLayout(editor, surface, cell) {
   const viewportHeight = metricOrFallback(wrapper?.clientHeight ?? wrapperRect.height, tableHeight);
   const verticalScrollbarWidth = Math.max(0, Math.round(wrapperWidth - viewportWidth));
   const horizontalScrollbarHeight = Math.max(0, Math.round(wrapperHeight - viewportHeight));
-  const rowHandles = rows.map((tableRow, index) => {
-    const rowRect = tableRow.getBoundingClientRect();
-    const anchorCell = tableRow.cells.item(0) ?? cornerCell;
-    const start = rowRect.height > 0 ? rowRect.top - surfaceRect.top + surface.scrollTop : tableTop + index * avgRowHeight;
-    const size = metricOrFallback(rowRect.height, avgRowHeight);
-    return {
-      index,
-      cellPos: editor.view.posAtDOM(anchorCell, 0),
-      start,
-      size,
-      center: start + size / 2
-    };
+  const rowHandles = buildLogicalRowMetrics({
+    editor,
+    surface,
+    surfaceRect,
+    tableInfo,
+    rows,
+    tableTop,
+    tableHeight,
+    cornerCell
   });
-  const columnHandles = referenceCells.map((tableCell, index) => {
-    const cellRect = tableCell.getBoundingClientRect();
-    const start = cellRect.width > 0 ? cellRect.left - surfaceRect.left + surface.scrollLeft : tableLeft + index * avgColumnWidth;
-    const size = metricOrFallback(cellRect.width, avgColumnWidth);
-    return {
-      index,
-      cellPos: editor.view.posAtDOM(tableCell, 0),
-      start,
-      size,
-      center: start + size / 2
-    };
+  const columnHandles = buildLogicalColumnMetrics({
+    editor,
+    surface,
+    surfaceRect,
+    tableElement: table,
+    tableInfo,
+    tableLeft,
+    tableWidth
   });
+  const activeCellRelativePos = getCellRelativePosFromDomPos(map, tableInfo.start, cellPos);
+  const activeCellRect = activeCellRelativePos != null ? map.findCell(activeCellRelativePos) : { left: cell.cellIndex, top: row.rowIndex };
+  const normalizedCellPos = activeCellRelativePos != null ? tableInfo.start + activeCellRelativePos : cellPos;
   return {
-    cellPos: editor.view.posAtDOM(cell, 0),
-    cornerCellPos: editor.view.posAtDOM(cornerCell, 0),
-    activeRowIndex: row.rowIndex,
-    activeColumnIndex: cell.cellIndex,
+    cellPos: normalizedCellPos,
+    cornerCellPos: tableInfo.start + map.positionAt(map.height - 1, map.width - 1, tableInfo.node),
+    activeRowIndex: activeCellRect.top,
+    activeColumnIndex: activeCellRect.left,
     tableLeft,
     tableTop,
     tableWidth,
@@ -32474,9 +33297,25 @@ function buildLayout(editor, surface, cell) {
     columnHandles
   };
 }
+
+// src/components/UEditor/table-controls.tsx
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var TABLE_MENU_TOP_OFFSET = 10;
+function nearestIndex(centers, position) {
+  let bestIndex = 0;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  centers.forEach((center, index) => {
+    const distance = Math.abs(center - position);
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      bestIndex = index;
+    }
+  });
+  return bestIndex;
+}
 function getSelectedCell(editor) {
   const browserSelection = window.getSelection();
-  const anchorElement = resolveElement(browserSelection?.anchorNode ?? null);
+  const anchorElement = resolveEventElement(browserSelection?.anchorNode ?? null);
   const anchorCell = anchorElement?.closest?.("th,td");
   if (anchorCell instanceof HTMLTableCellElement) {
     return anchorCell;
@@ -32484,35 +33323,15 @@ function getSelectedCell(editor) {
   const domAtPos = editor.view.domAtPos(editor.state.selection.from);
   return getCellFromTarget(domAtPos.node);
 }
-function getFocusableCellPos(editor, cellPos) {
-  const cellNode = editor.state.doc.nodeAt(cellPos);
-  if (!cellNode) return cellPos + 1;
-  let offset = cellPos + 1;
-  let node = cellNode.firstChild ?? null;
-  while (node && !node.isTextblock) {
-    offset += 1;
-    node = node.firstChild ?? null;
-  }
-  return node?.isTextblock ? offset + 1 : cellPos + 1;
-}
-function focusCell(editor, cellPos) {
-  const selection = TextSelection2.near(editor.state.doc.resolve(getFocusableCellPos(editor, cellPos)));
-  editor.view.dispatch(editor.state.tr.setSelection(selection));
-  editor.view.focus();
-}
-function collectChildren(node) {
-  const children = [];
-  node.forEach((child) => children.push(child));
-  return children;
-}
 function TableControls({ editor, containerRef }) {
   const t = useSmartTranslations("UEditor");
   const [layout, setLayout] = import_react53.default.useState(null);
   const [dragPreview, setDragPreview] = import_react53.default.useState(null);
-  const [hoverState, setHoverState] = import_react53.default.useState(DEFAULT_HOVER_STATE);
+  const [hoverState, setHoverState] = import_react53.default.useState(DEFAULT_TABLE_HOVER_STATE);
   const [openMenuKey, setOpenMenuKey] = import_react53.default.useState(null);
   const layoutRef = import_react53.default.useRef(null);
   const dragStateRef = import_react53.default.useRef(null);
+  const syncFrameRef = import_react53.default.useRef(null);
   import_react53.default.useEffect(() => {
     layoutRef.current = layout;
   }, [layout]);
@@ -32522,11 +33341,24 @@ function TableControls({ editor, containerRef }) {
       setLayout(null);
       return;
     }
-    setLayout(buildLayout(editor, surface, cell));
+    setLayout(buildTableControlLayout(editor, surface, cell));
   }, [containerRef, editor]);
   const syncFromSelection = import_react53.default.useCallback(() => {
     syncFromCell(getSelectedCell(editor));
   }, [editor, syncFromCell]);
+  const scheduleSyncFromSelection = import_react53.default.useCallback(() => {
+    if (syncFrameRef.current !== null) return;
+    syncFrameRef.current = window.requestAnimationFrame(() => {
+      syncFrameRef.current = null;
+      syncFromSelection();
+    });
+  }, [syncFromSelection]);
+  import_react53.default.useEffect(() => () => {
+    if (syncFrameRef.current !== null) {
+      window.cancelAnimationFrame(syncFrameRef.current);
+      syncFrameRef.current = null;
+    }
+  }, []);
   const refreshCurrentLayout = import_react53.default.useCallback(() => {
     setLayout((prev) => {
       if (!prev) return prev;
@@ -32534,7 +33366,7 @@ function TableControls({ editor, containerRef }) {
       if (!surface) return null;
       const node = editor.view.nodeDOM(prev.cellPos);
       const cell = getCellFromTarget(node) ?? getSelectedCell(editor);
-      return cell ? buildLayout(editor, surface, cell) : null;
+      return cell ? buildTableControlLayout(editor, surface, cell) : null;
     });
   }, [containerRef, editor]);
   const clearDrag = import_react53.default.useCallback(() => {
@@ -32546,43 +33378,16 @@ function TableControls({ editor, containerRef }) {
     const activeLayout = layoutRef.current;
     const surface = containerRef.current;
     if (!activeLayout || !surface || dragStateRef.current) {
-      setHoverState(DEFAULT_HOVER_STATE);
+      setHoverState(DEFAULT_TABLE_HOVER_STATE);
       return;
     }
-    const surfaceRect = surface.getBoundingClientRect();
-    const relativeX = event.clientX - surfaceRect.left + surface.scrollLeft;
-    const relativeY = event.clientY - surfaceRect.top + surface.scrollTop;
-    const targetElement = resolveElement(event.target);
-    const directRowHandle = targetElement?.closest?.("[data-row-handle-index]");
-    const directColumnHandle = targetElement?.closest?.("[data-column-handle-index]");
-    const directTableMenu = targetElement?.closest?.("[data-table-control='table-menu']");
-    const directAddColumn = targetElement?.closest?.("[data-table-control='add-column']");
-    const directAddRow = targetElement?.closest?.("[data-table-control='add-row']");
-    const directRowHandleIndex = directRowHandle instanceof HTMLElement ? Number.parseInt(directRowHandle.dataset.rowHandleIndex ?? "", 10) : Number.NaN;
-    const directColumnHandleIndex = directColumnHandle instanceof HTMLElement ? Number.parseInt(directColumnHandle.dataset.columnHandleIndex ?? "", 10) : Number.NaN;
-    const visibleTableWidth2 = Math.min(activeLayout.tableWidth, activeLayout.viewportWidth);
-    const visibleTableHeight2 = Math.min(activeLayout.tableHeight, activeLayout.viewportHeight);
-    const isMouseInTable = relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + activeLayout.tableWidth && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + activeLayout.tableHeight;
-    const rowHandleIndex = Number.isFinite(directRowHandleIndex) ? directRowHandleIndex : 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 = Number.isFinite(directColumnHandleIndex) ? directColumnHandleIndex : 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 = Boolean(directTableMenu) || isMouseInTable || relativeX >= activeLayout.tableLeft - MENU_HOVER_PADDING && relativeX <= activeLayout.tableLeft + 42 && relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop + MENU_HOVER_PADDING;
-    const lastRow = activeLayout.rowHandles[activeLayout.rowHandles.length - 1];
-    const lastCol = activeLayout.columnHandles[activeLayout.columnHandles.length - 1];
-    const isMouseInLastColumn = lastCol ? relativeX >= lastCol.start && relativeX <= lastCol.start + lastCol.size && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + visibleTableHeight2 : false;
-    const addColumnVisible = Boolean(directAddColumn) || relativeX >= activeLayout.tableLeft + visibleTableWidth2 && relativeX <= activeLayout.tableLeft + visibleTableWidth2 + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + visibleTableHeight2 || isMouseInLastColumn;
-    const isMouseInLastRow = lastRow ? relativeY >= lastRow.start && relativeY <= lastRow.start + lastRow.size && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + visibleTableWidth2 : false;
-    const addRowVisible = Boolean(directAddRow) || relativeY >= activeLayout.tableTop + visibleTableHeight2 && relativeY <= activeLayout.tableTop + visibleTableHeight2 + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + visibleTableWidth2 || isMouseInLastRow;
+    const nextState = buildTableHoverState({
+      event,
+      layout: activeLayout,
+      surface
+    });
     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
-      };
+      return areTableHoverStatesEqual(prev, nextState) ? prev : nextState;
     });
   }, [containerRef]);
   import_react53.default.useEffect(() => {
@@ -32600,14 +33405,17 @@ function TableControls({ editor, containerRef }) {
     };
     const handleMouseLeave = () => {
       if (dragStateRef.current) return;
-      setHoverState(DEFAULT_HOVER_STATE);
+      setHoverState(DEFAULT_TABLE_HOVER_STATE);
     };
-    const handleFocusIn = () => {
+    const handleFocusIn = (event) => {
       if (dragStateRef.current) return;
-      syncFromSelection();
+      const cell = event ? getCellFromTarget(event.target) : null;
+      syncFromCell(cell ?? getSelectedCell(editor));
     };
     proseMirror.addEventListener("mouseover", handleMouseOver);
     proseMirror.addEventListener("mouseleave", handleMouseLeave);
+    proseMirror.addEventListener("click", handleFocusIn);
+    proseMirror.addEventListener("mouseup", handleFocusIn);
     proseMirror.addEventListener("focusin", handleFocusIn);
     surface.addEventListener("mouseover", handleSurfaceMouseMove);
     surface.addEventListener("mousemove", handleSurfaceMouseMove);
@@ -32620,6 +33428,8 @@ function TableControls({ editor, containerRef }) {
     return () => {
       proseMirror.removeEventListener("mouseover", handleMouseOver);
       proseMirror.removeEventListener("mouseleave", handleMouseLeave);
+      proseMirror.removeEventListener("click", handleFocusIn);
+      proseMirror.removeEventListener("mouseup", handleFocusIn);
       proseMirror.removeEventListener("focusin", handleFocusIn);
       surface.removeEventListener("mouseover", handleSurfaceMouseMove);
       surface.removeEventListener("mousemove", handleSurfaceMouseMove);
@@ -32631,98 +33441,90 @@ function TableControls({ editor, containerRef }) {
     };
   }, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection, updateHoverState]);
   const runAtCellPos = import_react53.default.useCallback((cellPos, command, options) => {
-    if (cellPos == null) return false;
-    focusCell(editor, cellPos);
-    const result = command(editor.chain().focus(null, { scrollIntoView: false })).run();
+    const result = runTableCommandAtCellPos(editor, cellPos, command);
     if (options?.sync !== false) {
-      requestAnimationFrame(syncFromSelection);
+      scheduleSyncFromSelection();
     }
     return result;
-  }, [editor, syncFromSelection]);
+  }, [editor, scheduleSyncFromSelection]);
   const runAtActiveCell = import_react53.default.useCallback((command, options) => {
     return runAtCellPos(layoutRef.current?.cellPos ?? null, command, options);
   }, [runAtCellPos]);
-  const getCurrentCornerCellPos = import_react53.default.useCallback(() => {
-    const activePos = layoutRef.current?.cellPos ?? editor.state.selection.from;
-    return getLastCellPosFromState(editor, activePos);
-  }, [editor]);
-  const runAtCornerCell = import_react53.default.useCallback((command, options) => {
-    return runAtCellPos(getCurrentCornerCellPos(), command, options);
-  }, [getCurrentCornerCellPos, runAtCellPos]);
-  const replaceTableAtCellPos = import_react53.default.useCallback((cellPos, updateTable) => {
-    if (cellPos == null) return false;
-    const tableInfo = findTableInfo(editor, cellPos);
-    if (!tableInfo) return false;
-    const nextTable = updateTable(tableInfo.node);
-    if (!nextTable) return false;
-    editor.view.dispatch(editor.state.tr.replaceWith(tableInfo.pos, tableInfo.pos + tableInfo.node.nodeSize, nextTable));
-    requestAnimationFrame(syncFromSelection);
-    return true;
-  }, [editor, syncFromSelection]);
-  const createEmptyCellNode = import_react53.default.useCallback((cellNode) => {
-    return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
-  }, []);
   const duplicateRowAt = import_react53.default.useCallback((rowIndex, cellPos) => {
-    return replaceTableAtCellPos(cellPos, (tableNode) => {
-      const rows = collectChildren(tableNode);
-      const rowNode = rows[rowIndex];
-      if (!rowNode) return null;
-      rows.splice(rowIndex + 1, 0, rowNode.copy(rowNode.content));
-      return tableNode.type.create(tableNode.attrs, rows);
-    });
-  }, [replaceTableAtCellPos]);
+    const result = duplicateTableRowAt(editor, rowIndex, cellPos);
+    scheduleSyncFromSelection();
+    return result;
+  }, [editor, scheduleSyncFromSelection]);
   const clearRowAt = import_react53.default.useCallback((rowIndex, cellPos) => {
-    return replaceTableAtCellPos(cellPos, (tableNode) => {
-      const rows = collectChildren(tableNode);
-      const rowNode = rows[rowIndex];
-      if (!rowNode) return null;
-      const cells = collectChildren(rowNode).map((cellNode) => createEmptyCellNode(cellNode));
-      rows[rowIndex] = rowNode.type.create(rowNode.attrs, cells);
-      return tableNode.type.create(tableNode.attrs, rows);
-    });
-  }, [createEmptyCellNode, replaceTableAtCellPos]);
+    const result = clearTableRowAt(editor, rowIndex, cellPos);
+    scheduleSyncFromSelection();
+    return result;
+  }, [editor, scheduleSyncFromSelection]);
   const duplicateColumnAt = import_react53.default.useCallback((columnIndex, cellPos) => {
-    return replaceTableAtCellPos(cellPos, (tableNode) => {
-      const rows = collectChildren(tableNode).map((rowNode) => {
-        const cells = collectChildren(rowNode);
-        const cellNode = cells[columnIndex];
-        if (!cellNode) return rowNode;
-        cells.splice(columnIndex + 1, 0, cellNode.copy(cellNode.content));
-        return rowNode.type.create(rowNode.attrs, cells);
-      });
-      return tableNode.type.create(tableNode.attrs, rows);
-    });
-  }, [replaceTableAtCellPos]);
+    const result = duplicateTableColumnAt(editor, columnIndex, cellPos);
+    scheduleSyncFromSelection();
+    return result;
+  }, [editor, scheduleSyncFromSelection]);
   const clearColumnAt = import_react53.default.useCallback((columnIndex, cellPos) => {
-    return replaceTableAtCellPos(cellPos, (tableNode) => {
-      const rows = collectChildren(tableNode).map((rowNode) => {
-        const cells = collectChildren(rowNode);
-        const cellNode = cells[columnIndex];
-        if (!cellNode) return rowNode;
-        cells[columnIndex] = createEmptyCellNode(cellNode);
-        return rowNode.type.create(rowNode.attrs, cells);
-      });
-      return tableNode.type.create(tableNode.attrs, rows);
-    });
-  }, [createEmptyCellNode, replaceTableAtCellPos]);
+    const result = clearTableColumnAt(editor, columnIndex, cellPos);
+    scheduleSyncFromSelection();
+    return result;
+  }, [editor, scheduleSyncFromSelection]);
   const expandTableBy = import_react53.default.useCallback((rows, cols) => {
-    let ok = true;
-    for (let index = 0; index < rows; index += 1) {
-      ok = runAtCornerCell((chain) => chain.addRowAfter(), { sync: false });
-      if (!ok) return false;
-    }
-    for (let index = 0; index < cols; index += 1) {
-      ok = runAtCornerCell((chain) => chain.addColumnAfter(), { sync: false });
-      if (!ok) return false;
-    }
-    requestAnimationFrame(syncFromSelection);
-    return true;
-  }, [runAtCornerCell, syncFromSelection]);
+    const activeCellPos = layoutRef.current?.cellPos ?? editor.state.selection.from;
+    const result = expandTableFromCell(editor, activeCellPos, rows, cols);
+    scheduleSyncFromSelection();
+    return result;
+  }, [editor, scheduleSyncFromSelection]);
   const canExpandTable = Boolean(layout);
   const controlsVisible = dragPreview !== null;
   const tableMenuOpen = openMenuKey === "table";
-  const getRowMenuKey = import_react53.default.useCallback((index) => `row:${index}`, []);
-  const getColumnMenuKey = import_react53.default.useCallback((index) => `column:${index}`, []);
+  const startAddColumnDrag = import_react53.default.useCallback(() => {
+    setOpenMenuKey(null);
+    dragStateRef.current = { kind: "add-column", previewCols: 1 };
+    setDragPreview({ kind: "add-column", previewCols: 1 });
+    document.body.style.cursor = "ew-resize";
+  }, []);
+  const startAddRowDrag = import_react53.default.useCallback(() => {
+    setOpenMenuKey(null);
+    dragStateRef.current = { kind: "add-row", previewRows: 1 };
+    setDragPreview({ kind: "add-row", previewRows: 1 });
+    document.body.style.cursor = "ns-resize";
+  }, []);
+  const startRowDrag = import_react53.default.useCallback((rowHandle) => {
+    setOpenMenuKey(null);
+    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";
+  }, []);
+  const startColumnDrag = import_react53.default.useCallback((columnHandle) => {
+    setOpenMenuKey(null);
+    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";
+  }, []);
   import_react53.default.useEffect(() => {
     const handleMouseMove = (event) => {
       const dragState = dragStateRef.current;
@@ -32733,9 +33535,10 @@ function TableControls({ editor, containerRef }) {
       const relativeX = event.clientX - surfaceRect.left + surface.scrollLeft;
       const relativeY = event.clientY - surfaceRect.top + surface.scrollTop;
       if (dragState.kind === "row") {
-        const targetIndex = nearestIndex(activeLayout.rowHandles.map((item) => item.center), relativeY);
+        const targetHandleIndex = nearestIndex(activeLayout.rowHandles.map((item) => item.center), relativeY);
+        const targetRow = activeLayout.rowHandles[targetHandleIndex];
+        const targetIndex = targetRow.index;
         dragState.targetIndex = targetIndex;
-        const targetRow = activeLayout.rowHandles[targetIndex];
         setDragPreview({
           kind: "row",
           originIndex: dragState.originIndex,
@@ -32747,9 +33550,10 @@ function TableControls({ editor, containerRef }) {
         return;
       }
       if (dragState.kind === "column") {
-        const targetIndex = nearestIndex(activeLayout.columnHandles.map((item) => item.center), relativeX);
+        const targetHandleIndex = nearestIndex(activeLayout.columnHandles.map((item) => item.center), relativeX);
+        const targetColumn = activeLayout.columnHandles[targetHandleIndex];
+        const targetIndex = targetColumn.index;
         dragState.targetIndex = targetIndex;
-        const targetColumn = activeLayout.columnHandles[targetIndex];
         setDragPreview({
           kind: "column",
           originIndex: dragState.originIndex,
@@ -32782,7 +33586,7 @@ function TableControls({ editor, containerRef }) {
           pos: dragState.anchorPos,
           select: true
         })(editor.state, editor.view.dispatch);
-        requestAnimationFrame(syncFromSelection);
+        scheduleSyncFromSelection();
       }
       if (dragState.kind === "column" && dragState.originIndex !== dragState.targetIndex) {
         moveTableColumn({
@@ -32791,7 +33595,7 @@ function TableControls({ editor, containerRef }) {
           pos: dragState.anchorPos,
           select: true
         })(editor.state, editor.view.dispatch);
-        requestAnimationFrame(syncFromSelection);
+        scheduleSyncFromSelection();
       }
       if (dragState.kind === "add-row") {
         expandTableBy(dragState.previewRows, 0);
@@ -32809,70 +33613,70 @@ function TableControls({ editor, containerRef }) {
       window.removeEventListener("mouseup", handleMouseUp);
       window.removeEventListener("blur", clearDrag);
     };
-  }, [clearDrag, containerRef, editor, expandTableBy, syncFromSelection]);
+  }, [clearDrag, containerRef, editor, expandTableBy, scheduleSyncFromSelection]);
   const menuItems = import_react53.default.useMemo(() => {
     if (!layout) return [];
     return [
       {
         label: t("tableMenu.alignLeft"),
-        icon: import_lucide_react46.AlignLeft,
+        icon: import_lucide_react48.AlignLeft,
         onClick: () => applyTableAlignment(editor, "left", layout.cellPos)
       },
       {
         label: t("tableMenu.alignCenter"),
-        icon: import_lucide_react46.AlignCenter,
+        icon: import_lucide_react48.AlignCenter,
         onClick: () => applyTableAlignment(editor, "center", layout.cellPos)
       },
       {
         label: t("tableMenu.alignRight"),
-        icon: import_lucide_react46.AlignRight,
+        icon: import_lucide_react48.AlignRight,
         onClick: () => applyTableAlignment(editor, "right", layout.cellPos)
       },
       {
         label: t("tableMenu.addColumnBefore"),
-        icon: import_lucide_react46.ArrowLeft,
+        icon: import_lucide_react48.ArrowLeft,
         onClick: () => runAtActiveCell((chain) => chain.addColumnBefore())
       },
       {
         label: t("tableMenu.addColumnAfter"),
-        icon: import_lucide_react46.ArrowRight,
+        icon: import_lucide_react48.ArrowRight,
         onClick: () => runAtActiveCell((chain) => chain.addColumnAfter())
       },
       {
         label: t("tableMenu.addRowBefore"),
-        icon: import_lucide_react46.ArrowUp,
+        icon: import_lucide_react48.ArrowUp,
         onClick: () => runAtActiveCell((chain) => chain.addRowBefore())
       },
       {
         label: t("tableMenu.addRowAfter"),
-        icon: import_lucide_react46.ArrowDown,
+        icon: import_lucide_react48.ArrowDown,
         onClick: () => runAtActiveCell((chain) => chain.addRowAfter())
       },
       {
         label: t("tableMenu.toggleHeaderRow"),
-        icon: import_lucide_react46.Table,
+        icon: import_lucide_react48.Table,
         onClick: () => runAtActiveCell((chain) => chain.toggleHeaderRow())
       },
       {
         label: t("tableMenu.toggleHeaderColumn"),
-        icon: import_lucide_react46.Table,
+        icon: import_lucide_react48.Table,
         onClick: () => runAtActiveCell((chain) => chain.toggleHeaderColumn())
       },
       {
         label: t("tableMenu.deleteColumn"),
-        icon: import_lucide_react46.Trash2,
+        icon: import_lucide_react48.Trash2,
         onClick: () => runAtActiveCell((chain) => chain.deleteColumn()),
         destructive: true
       },
       {
         label: t("tableMenu.deleteRow"),
-        icon: import_lucide_react46.Trash2,
+        icon: import_lucide_react48.Trash2,
         onClick: () => runAtActiveCell((chain) => chain.deleteRow()),
         destructive: true
       },
       {
         label: t("tableMenu.deleteTable"),
-        icon: import_lucide_react46.Trash2,
+        icon: import_lucide_react48.Trash2,
         onClick: () => runAtActiveCell((chain) => chain.deleteTable()),
         destructive: true
       }
@@ -32881,27 +33685,27 @@ function TableControls({ editor, containerRef }) {
   const getRowHandleMenuItems = import_react53.default.useCallback((rowHandle) => [
     {
       label: t("tableMenu.addRowBefore"),
-      icon: import_lucide_react46.ArrowUp,
+      icon: import_lucide_react48.ArrowUp,
       onClick: () => runAtCellPos(rowHandle.cellPos, (chain) => chain.addRowBefore())
     },
     {
       label: t("tableMenu.addRowAfter"),
-      icon: import_lucide_react46.ArrowDown,
+      icon: import_lucide_react48.ArrowDown,
       onClick: () => runAtCellPos(rowHandle.cellPos, (chain) => chain.addRowAfter())
     },
     {
       label: t("tableMenu.duplicateRow"),
-      icon: import_lucide_react46.Copy,
+      icon: import_lucide_react48.Copy,
       onClick: () => duplicateRowAt(rowHandle.index, rowHandle.cellPos)
     },
     {
       label: t("tableMenu.clearRowContents"),
-      icon: import_lucide_react46.Table,
+      icon: import_lucide_react48.Table,
       onClick: () => clearRowAt(rowHandle.index, rowHandle.cellPos)
     },
     {
       label: t("tableMenu.deleteRow"),
-      icon: import_lucide_react46.Trash2,
+      icon: import_lucide_react48.Trash2,
       onClick: () => runAtCellPos(rowHandle.cellPos, (chain) => chain.deleteRow()),
       destructive: true
     }
@@ -32909,27 +33713,27 @@ function TableControls({ editor, containerRef }) {
   const getColumnHandleMenuItems = import_react53.default.useCallback((columnHandle) => [
     {
       label: t("tableMenu.addColumnBefore"),
-      icon: import_lucide_react46.ArrowLeft,
+      icon: import_lucide_react48.ArrowLeft,
       onClick: () => runAtCellPos(columnHandle.cellPos, (chain) => chain.addColumnBefore())
     },
     {
       label: t("tableMenu.addColumnAfter"),
-      icon: import_lucide_react46.ArrowRight,
+      icon: import_lucide_react48.ArrowRight,
       onClick: () => runAtCellPos(columnHandle.cellPos, (chain) => chain.addColumnAfter())
     },
     {
       label: t("tableMenu.duplicateColumn"),
-      icon: import_lucide_react46.Copy,
+      icon: import_lucide_react48.Copy,
       onClick: () => duplicateColumnAt(columnHandle.index, columnHandle.cellPos)
     },
     {
       label: t("tableMenu.clearColumnContents"),
-      icon: import_lucide_react46.Table,
+      icon: import_lucide_react48.Table,
       onClick: () => clearColumnAt(columnHandle.index, columnHandle.cellPos)
     },
     {
       label: t("tableMenu.deleteColumn"),
-      icon: import_lucide_react46.Trash2,
+      icon: import_lucide_react48.Trash2,
       onClick: () => runAtCellPos(columnHandle.cellPos, (chain) => chain.deleteColumn()),
       destructive: true
     }
@@ -32941,373 +33745,77 @@ function TableControls({ editor, containerRef }) {
   const menuLeft = Math.max(8, layout.tableLeft);
   const rowHandleLeft = layout.tableLeft - 12;
   const columnHandleTop = layout.tableTop - 12;
-  const visibleTableWidth = Math.min(layout.tableWidth, layout.viewportWidth);
-  const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
-  const columnRailTop = layout.tableTop;
-  const columnRailLeft = layout.tableLeft + visibleTableWidth + ADD_COLUMN_RAIL_GAP;
-  const rowRailTop = layout.tableTop + visibleTableHeight + ADD_ROW_RAIL_GAP;
-  const rowRailLeft = layout.tableLeft;
-  const expandPreviewWidth = dragPreview?.kind === "add-column" ? layout.tableWidth + dragPreview.previewCols * layout.avgColumnWidth : layout.tableWidth;
-  const expandPreviewHeight = dragPreview?.kind === "add-row" ? layout.tableHeight + dragPreview.previewRows * layout.avgRowHeight : layout.tableHeight;
-  const dragStatusText = dragPreview?.kind === "row" ? `${t("tableMenu.dragRow")} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview?.kind === "column" ? `${t("tableMenu.dragColumn")} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview?.kind === "add-row" ? `+${dragPreview.previewRows}R` : dragPreview?.kind === "add-column" ? `+${dragPreview.previewCols}C` : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-    layout.rowHandles.map((rowHandle) => {
-      const menuKey = getRowMenuKey(rowHandle.index);
-      const isActive = rowHandle.index === layout.activeRowIndex;
-      const visible = controlsVisible || hoverState.rowHandleIndex === rowHandle.index || openMenuKey === menuKey;
-      const isShown = visible || isActive;
-      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        "div",
-        {
-          className: "absolute z-30",
-          "data-row-handle-index": rowHandle.index,
-          style: {
-            top: Math.max(8, rowHandle.center - 12),
-            left: rowHandleLeft
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-            Tooltip,
-            {
-              placement: "right",
-              disabled: openMenuKey === menuKey || !visible && isActive,
-              content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}` }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                DropdownMenu,
-                {
-                  placement: "right",
-                  isOpen: openMenuKey === menuKey,
-                  onOpenChange: (open) => {
-                    setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
-                  },
-                  contentClassName: "p-2",
-                  items: getRowHandleMenuItems(rowHandle),
-                  trigger: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
-                      onMouseDown: (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setOpenMenuKey(null);
-                        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 transition-[opacity,transform,colors,border,background-color] duration-150",
-                        visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
-                      ),
-                      style: {
-                        opacity: isShown ? 1 : 0,
-                        transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
-                        pointerEvents: isShown ? "auto" : "none"
-                      },
-                      children: visible ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripVertical, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "h-3 w-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
-                    }
-                  )
-                }
-              ) })
-            }
-          )
-        },
-        `row-handle-${rowHandle.index}`
-      );
-    }),
-    layout.columnHandles.map((columnHandle) => {
-      const menuKey = getColumnMenuKey(columnHandle.index);
-      const isActive = columnHandle.index === layout.activeColumnIndex;
-      const visible = controlsVisible || hoverState.columnHandleIndex === columnHandle.index || openMenuKey === menuKey;
-      const isShown = visible || isActive;
-      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        "div",
-        {
-          className: "absolute z-30",
-          "data-column-handle-index": columnHandle.index,
-          style: {
-            top: columnHandleTop,
-            left: Math.max(8, columnHandle.center - 12)
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-            Tooltip,
-            {
-              placement: "top",
-              disabled: openMenuKey === menuKey || !visible && isActive,
-              content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}` }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                DropdownMenu,
-                {
-                  placement: "bottom-start",
-                  isOpen: openMenuKey === menuKey,
-                  onOpenChange: (open) => {
-                    setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
-                  },
-                  contentClassName: "p-2",
-                  items: getColumnHandleMenuItems(columnHandle),
-                  trigger: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
-                      onMouseDown: (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setOpenMenuKey(null);
-                        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 transition-[opacity,transform,colors,border,background-color] duration-150",
-                        visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
-                      ),
-                      style: {
-                        opacity: isShown ? 1 : 0,
-                        transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
-                        pointerEvents: isShown ? "auto" : "none"
-                      },
-                      children: visible ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripHorizontal, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "h-1 w-3 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
-                    }
-                  )
-                }
-              ) })
-            }
-          )
-        },
-        `column-handle-${columnHandle.index}`
-      );
-    }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-      "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      TableRowHandles,
       {
-        className: "absolute z-30",
-        "data-table-control": "table-menu",
-        style: {
-          top: menuTop,
-          left: menuLeft
+        activeRowIndex: layout.activeRowIndex,
+        controlsVisible,
+        getMenuItems: getRowHandleMenuItems,
+        hoverRowHandleIndex: hoverState.rowHandleIndex,
+        onOpenMenuChange: (menuKey, open) => {
+          setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-          Tooltip,
-          {
-            placement: "top",
-            disabled: tableMenuOpen,
-            content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: t("tableMenu.openControls") }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-              DropdownMenu,
-              {
-                placement: "bottom-start",
-                isOpen: tableMenuOpen,
-                onOpenChange: (open) => {
-                  setOpenMenuKey((prev) => open ? "table" : prev === "table" ? null : prev);
-                },
-                contentClassName: "p-2",
-                items: menuItems,
-                trigger: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": 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"
-                    ),
-                    style: {
-                      opacity: controlsVisible || hoverState.menuVisible || tableMenuOpen ? 1 : 0,
-                      transform: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "scale(1)" : "scale(0.82)",
-                      pointerEvents: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "auto" : "none"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.MoreHorizontal, { className: "h-4 w-4" })
-                  }
-                )
-              }
-            ) })
-          }
-        )
+        onStartDrag: startRowDrag,
+        openMenuKey,
+        rowDragLabel: t("tableMenu.dragRow"),
+        rowHandleLeft,
+        rowHandles: layout.rowHandles
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-      Tooltip,
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      TableColumnHandles,
       {
-        placement: "right",
-        content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: t("tableMenu.quickAddColumnAfter") }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-          "button",
-          {
-            type: "button",
-            "data-table-control": "add-column",
-            "aria-label": t("tableMenu.quickAddColumnAfter"),
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              setOpenMenuKey(null);
-              if (!canExpandTable) return;
-              dragStateRef.current = { kind: "add-column", previewCols: 1 };
-              setDragPreview({ kind: "add-column", previewCols: 1 });
-              document.body.style.cursor = "ew-resize";
-            },
-            disabled: !canExpandTable,
-            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-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
-            ),
-            style: {
-              top: controlsVisible || hoverState.addColumnVisible ? columnRailTop : columnRailTop + Math.max(0, visibleTableHeight / 2 - 24),
-              left: columnRailLeft,
-              width: controlsVisible || hoverState.addColumnVisible ? 18 : 12,
-              height: controlsVisible || hoverState.addColumnVisible ? visibleTableHeight : 48,
-              opacity: controlsVisible || hoverState.addColumnVisible ? 1 : 0,
-              transform: controlsVisible || hoverState.addColumnVisible ? "scale(1)" : "scale(0.92)",
-              pointerEvents: controlsVisible || hoverState.addColumnVisible ? "auto" : "none"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
-          }
-        )
+        activeColumnIndex: layout.activeColumnIndex,
+        columnDragLabel: t("tableMenu.dragColumn"),
+        columnHandleTop,
+        columnHandles: layout.columnHandles,
+        controlsVisible,
+        getMenuItems: getColumnHandleMenuItems,
+        hoverColumnHandleIndex: hoverState.columnHandleIndex,
+        onOpenMenuChange: (menuKey, open) => {
+          setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
+        },
+        onStartDrag: startColumnDrag,
+        openMenuKey
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-      Tooltip,
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      TableControlMenu,
       {
-        placement: "bottom",
-        content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: t("tableMenu.quickAddRowAfter") }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-          "button",
-          {
-            type: "button",
-            "data-table-control": "add-row",
-            "aria-label": t("tableMenu.quickAddRowAfter"),
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              setOpenMenuKey(null);
-              if (!canExpandTable) return;
-              dragStateRef.current = { kind: "add-row", previewRows: 1 };
-              setDragPreview({ kind: "add-row", previewRows: 1 });
-              document.body.style.cursor = "ns-resize";
-            },
-            disabled: !canExpandTable,
-            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-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
-            ),
-            style: {
-              top: rowRailTop,
-              left: controlsVisible || hoverState.addRowVisible ? rowRailLeft : rowRailLeft + Math.max(0, visibleTableWidth / 2 - 24),
-              width: controlsVisible || hoverState.addRowVisible ? visibleTableWidth : 48,
-              height: controlsVisible || hoverState.addRowVisible ? 16 : 12,
-              opacity: controlsVisible || hoverState.addRowVisible ? 1 : 0,
-              transform: controlsVisible || hoverState.addRowVisible ? "scale(1)" : "scale(0.92)",
-              pointerEvents: controlsVisible || hoverState.addRowVisible ? "auto" : "none"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
-          }
-        )
+        controlsVisible,
+        isOpen: tableMenuOpen,
+        items: menuItems,
+        label: t("tableMenu.openControls"),
+        left: menuLeft,
+        menuVisible: hoverState.menuVisible,
+        onOpenChange: (open) => {
+          setOpenMenuKey((prev) => open ? "table" : prev === "table" ? null : prev);
+        },
+        top: menuTop
       }
     ),
-    dragPreview?.kind === "row" && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: "pointer-events-none absolute z-20 rounded-lg border border-primary/20 bg-primary/10",
-          style: {
-            top: dragPreview.targetStart,
-            left: layout.tableLeft,
-            width: layout.tableWidth,
-            height: dragPreview.targetSize
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: "pointer-events-none absolute z-20 rounded-full bg-primary/80",
-          style: {
-            top: dragPreview.targetStart + dragPreview.targetSize / 2 - 1,
-            left: layout.tableLeft,
-            width: layout.tableWidth,
-            height: 2
-          }
-        }
-      )
-    ] }),
-    dragPreview?.kind === "column" && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: "pointer-events-none absolute z-20 rounded-lg border border-primary/20 bg-primary/10",
-          style: {
-            top: layout.tableTop,
-            left: dragPreview.targetStart,
-            width: dragPreview.targetSize,
-            height: layout.tableHeight
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: "pointer-events-none absolute z-20 rounded-full bg-primary/80",
-          style: {
-            top: layout.tableTop,
-            left: dragPreview.targetStart + dragPreview.targetSize / 2 - 1,
-            width: 2,
-            height: layout.tableHeight
-          }
-        }
-      )
-    ] }),
-    (dragPreview?.kind === "add-row" || dragPreview?.kind === "add-column") && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_jsx_runtime84.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-      "div",
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      TableAddRails,
       {
-        "aria-hidden": "true",
-        className: "pointer-events-none absolute z-20 rounded-xl border border-dashed border-primary/70 bg-primary/5",
-        style: {
-          top: layout.tableTop,
-          left: layout.tableLeft,
-          width: expandPreviewWidth,
-          height: expandPreviewHeight
-        }
+        addColumnVisible: hoverState.addColumnVisible,
+        addRowVisible: hoverState.addRowVisible,
+        canExpandTable,
+        controlsVisible,
+        layout,
+        onStartAddColumn: startAddColumnDrag,
+        onStartAddRow: startAddRowDrag,
+        quickAddColumnLabel: t("tableMenu.quickAddColumnAfter"),
+        quickAddRowLabel: t("tableMenu.quickAddRowAfter")
       }
-    ) }),
-    dragStatusText && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-      "div",
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      TableDragPreview,
       {
-        role: "status",
-        className: "pointer-events-none absolute z-30 rounded-full border border-primary/20 bg-background/95 px-2 py-1 text-[11px] font-medium text-foreground shadow-sm backdrop-blur",
-        style: {
-          top: dragPreview?.kind === "add-row" || dragPreview?.kind === "add-column" ? layout.tableTop + expandPreviewHeight + 8 : layout.tableTop - 40,
-          left: dragPreview?.kind === "add-row" || dragPreview?.kind === "add-column" ? layout.tableLeft + Math.max(0, expandPreviewWidth - 84) : layout.tableLeft + Math.max(0, layout.tableWidth - 108)
-        },
-        children: dragStatusText
+        columnDragLabel: t("tableMenu.dragColumn"),
+        dragPreview,
+        layout,
+        rowDragLabel: t("tableMenu.dragRow")
       }
     )
   ] });
@@ -33906,7 +34414,7 @@ function useUEditorTableInteractions(editor, editable = true) {
 }
 
 // src/components/UEditor/UEditor.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var UEditor = import_react56.default.forwardRef(({
   content = "",
   onChange,
@@ -34003,6 +34511,7 @@ var UEditor = import_react56.default.forwardRef(({
   (0, import_react56.useImperativeHandle)(
     ref,
     () => ({
+      editor,
       prepareContentForSave: async ({ throwOnError = false } = {}) => {
         if (!inFlightPrepareRef.current) {
           const htmlSnapshot = editor?.getHTML() ?? content ?? "";
@@ -34033,7 +34542,7 @@ var UEditor = import_react56.default.forwardRef(({
     }
   }, [content, editor]);
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       "div",
       {
         className: cn("w-full rounded-lg border bg-background flex items-center justify-center text-muted-foreground", className),
@@ -34042,7 +34551,7 @@ var UEditor = import_react56.default.forwardRef(({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
     "div",
     {
       className: cn(
@@ -34057,7 +34566,7 @@ var UEditor = import_react56.default.forwardRef(({
         className
       ),
       children: [
-        editable && showToolbar && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        editable && showToolbar && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           EditorToolbar,
           {
             editor,
@@ -34072,7 +34581,7 @@ var UEditor = import_react56.default.forwardRef(({
             letterSpacings
           }
         ),
-        editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           CustomBubbleMenu,
           {
             editor,
@@ -34080,8 +34589,8 @@ var UEditor = import_react56.default.forwardRef(({
             lineHeights
           }
         ),
-        editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(CustomFloatingMenu, { editor }),
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+        editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(CustomFloatingMenu, { editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
           "div",
           {
             ref: editorContentRef,
@@ -34091,7 +34600,7 @@ var UEditor = import_react56.default.forwardRef(({
               maxHeight
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                 "span",
                 {
                   ref: tableColumnGuideRef,
@@ -34099,7 +34608,7 @@ var UEditor = import_react56.default.forwardRef(({
                   className: "pointer-events-none absolute z-20 bg-primary opacity-0 transition-opacity duration-100"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                 "span",
                 {
                   ref: tableRowGuideRef,
@@ -34107,7 +34616,7 @@ var UEditor = import_react56.default.forwardRef(({
                   className: "pointer-events-none absolute z-20 bg-primary opacity-0 transition-opacity duration-100"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                 "span",
                 {
                   ref: activeTableCellHighlightRef,
@@ -34116,8 +34625,8 @@ var UEditor = import_react56.default.forwardRef(({
                   className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10 transition-[left,top,width,height] duration-100"
                 }
               ),
-              editable && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableControls, { editor, containerRef: editorContentRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              editable && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TableControls, { editor, containerRef: editorContentRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                 import_react57.EditorContent,
                 {
                   editor,
@@ -34127,7 +34636,7 @@ var UEditor = import_react56.default.forwardRef(({
             ]
           }
         ),
-        showCharacterCount && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(CharacterCountDisplay, { editor, maxCharacters })
+        showCharacterCount && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(CharacterCountDisplay, { editor, maxCharacters })
       ]
     }
   );