@underverse-ui/underverse 1.0.150 → 1.0.151

package/dist/index.cjs

@@ -1029,6 +1029,10 @@ var en_default = {
       borderWidth: "Border Width",
       borderColor: "Border Color",
       clearBorder: "Clear Border",
+      formula: "Formula",
+      apply: "Apply",
+      clear: "Clear",
+      recalculate: "Recalculate",
       done: "Done"
     },
     callout: {
@@ -1405,6 +1409,10 @@ var vi_default = {
       borderWidth: "\u0110\u1ED9 d\xE0y vi\u1EC1n",
       borderColor: "M\xE0u vi\u1EC1n",
       clearBorder: "X\xF3a vi\u1EC1n",
+      formula: "C\xF4ng th\u1EE9c",
+      apply: "\xC1p d\u1EE5ng",
+      clear: "X\xF3a",
+      recalculate: "T\xEDnh l\u1EA1i",
       done: "Xong"
     },
     callout: {
@@ -27812,6 +27820,46 @@ var CustomTableCell = import_extension_table_cell.default.extend({
             "data-border-width": attributes.borderWidth
           };
         }
+      },
+      cellId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-cell-id") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.cellId) return {};
+          return {
+            "data-cell-id": attributes.cellId
+          };
+        }
+      },
+      numberFormat: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-number-format") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.numberFormat) return {};
+          return {
+            "data-number-format": attributes.numberFormat
+          };
+        }
+      },
+      formula: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-formula") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.formula) return {};
+          return {
+            "data-formula": attributes.formula
+          };
+        }
+      },
+      computedValue: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-computed-value") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.computedValue) return {};
+          return {
+            "data-computed-value": attributes.computedValue
+          };
+        }
       }
     };
   },
@@ -27879,6 +27927,46 @@ var CustomTableHeader = import_extension_table_header.default.extend({
             "data-border-width": attributes.borderWidth
           };
         }
+      },
+      cellId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-cell-id") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.cellId) return {};
+          return {
+            "data-cell-id": attributes.cellId
+          };
+        }
+      },
+      numberFormat: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-number-format") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.numberFormat) return {};
+          return {
+            "data-number-format": attributes.numberFormat
+          };
+        }
+      },
+      formula: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-formula") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.formula) return {};
+          return {
+            "data-formula": attributes.formula
+          };
+        }
+      },
+      computedValue: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-computed-value") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.computedValue) return {};
+          return {
+            "data-computed-value": attributes.computedValue
+          };
+        }
       }
     };
   },
@@ -28591,6 +28679,34 @@ function collectChildren(node) {
 function createEmptyCellNode(cellNode) {
   return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
 }
+function createCellCopyForColumnDuplicate(cellNode) {
+  return cellNode.type.create(cellNode.attrs, cellNode.content);
+}
+function getTableRows(tableNode) {
+  const rows = [];
+  tableNode.forEach((rowNode, rowOffset) => {
+    const cells = [];
+    rowNode.forEach((cellNode, cellOffset, index) => {
+      cells.push({
+        index,
+        node: cellNode,
+        relativePos: rowOffset + 1 + cellOffset
+      });
+    });
+    rows.push({
+      node: rowNode,
+      cells
+    });
+  });
+  return rows;
+}
+function safeFindCell(map, relativePos) {
+  try {
+    return map.findCell(relativePos);
+  } catch {
+    return null;
+  }
+}
 function getSelectedTableRect(editor) {
   const cellSelection = getCellSelectionPositions(editor.state.selection);
   if (cellSelection) {
@@ -28716,34 +28832,49 @@ function duplicateTableRowAt(editor, rowIndex, cellPos) {
 }
 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);
+    const map = import_tables.TableMap.get(tableNode);
+    if (rowIndex < 0 || rowIndex >= map.height) return null;
+    const rows = getTableRows(tableNode).map((rowInfo) => {
+      const cells = collectChildren(rowInfo.node);
+      for (const entry of rowInfo.cells) {
+        const rect = safeFindCell(map, entry.relativePos);
+        if (!rect || rect.top > rowIndex || rowIndex >= rect.bottom) continue;
+        cells[entry.index] = createEmptyCellNode(entry.node);
+      }
+      return rowInfo.node.type.create(rowInfo.node.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);
+    const map = import_tables.TableMap.get(tableNode);
+    if (columnIndex < 0 || columnIndex >= map.width) return null;
+    const rows = getTableRows(tableNode).map((rowInfo, rowIndex) => {
+      const cells = collectChildren(rowInfo.node);
+      const sourceCell = rowInfo.cells.find((entry) => {
+        const rect = safeFindCell(map, entry.relativePos);
+        return rect && rect.top === rowIndex && rect.left <= columnIndex && columnIndex < rect.right;
+      });
+      if (!sourceCell) return rowInfo.node;
+      cells.splice(sourceCell.index + 1, 0, createCellCopyForColumnDuplicate(sourceCell.node));
+      return rowInfo.node.type.create(rowInfo.node.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);
+    const map = import_tables.TableMap.get(tableNode);
+    if (columnIndex < 0 || columnIndex >= map.width) return null;
+    const rows = getTableRows(tableNode).map((rowInfo) => {
+      const cells = collectChildren(rowInfo.node);
+      for (const entry of rowInfo.cells) {
+        const rect = safeFindCell(map, entry.relativePos);
+        if (!rect || rect.left > columnIndex || columnIndex >= rect.right) continue;
+        cells[entry.index] = createEmptyCellNode(entry.node);
+      }
+      return rowInfo.node.type.create(rowInfo.node.attrs, cells);
     });
     return tableNode.type.create(tableNode.attrs, rows);
   });
@@ -29795,14 +29926,410 @@ var EditorToolbar = ({
 // src/components/UEditor/menus.tsx
 var import_react62 = require("react");
 var import_react63 = require("@tiptap/react");
-var import_tables2 = require("@tiptap/pm/tables");
+var import_tables3 = require("@tiptap/pm/tables");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react49 = require("lucide-react");
+
+// src/components/UEditor/table-formula-commands.ts
+var import_tables2 = require("@tiptap/pm/tables");
+
+// src/components/UEditor/table-formula.ts
+var CELL_ADDRESS_RE = /^([A-Z]+)([1-9]\d*)$/i;
+var CELL_RANGE_RE = /^([A-Z]+[1-9]\d*):([A-Z]+[1-9]\d*)$/i;
+var SUPPORTED_FUNCTIONS = /* @__PURE__ */ new Set(["SUM", "AVG", "MIN", "MAX", "COUNT"]);
+function columnNameToIndex(columnName) {
+  const normalized = columnName.trim().toUpperCase();
+  if (!/^[A-Z]+$/.test(normalized)) {
+    return -1;
+  }
+  let index = 0;
+  for (const char of normalized) {
+    index = index * 26 + char.charCodeAt(0) - 64;
+  }
+  return index - 1;
+}
+function indexToColumnName(index) {
+  if (!Number.isInteger(index) || index < 0) {
+    return "";
+  }
+  let value = index + 1;
+  let name = "";
+  while (value > 0) {
+    const remainder = (value - 1) % 26;
+    name = String.fromCharCode(65 + remainder) + name;
+    value = Math.floor((value - 1) / 26);
+  }
+  return name;
+}
+function parseTableCellAddress(input) {
+  const match = input.trim().match(CELL_ADDRESS_RE);
+  if (!match) {
+    return null;
+  }
+  const column = columnNameToIndex(match[1] ?? "");
+  const row = Number.parseInt(match[2] ?? "", 10) - 1;
+  if (column < 0 || row < 0) {
+    return null;
+  }
+  return {
+    column,
+    row,
+    label: `${indexToColumnName(column)}${row + 1}`
+  };
+}
+function parseTableCellRange(input) {
+  const match = input.trim().match(CELL_RANGE_RE);
+  if (!match) {
+    return null;
+  }
+  const from = parseTableCellAddress(match[1] ?? "");
+  const to = parseTableCellAddress(match[2] ?? "");
+  if (!from || !to) {
+    return null;
+  }
+  return { from, to };
+}
+function getTableCellRangeLabels(range) {
+  const startColumn = Math.min(range.from.column, range.to.column);
+  const endColumn = Math.max(range.from.column, range.to.column);
+  const startRow = Math.min(range.from.row, range.to.row);
+  const endRow = Math.max(range.from.row, range.to.row);
+  const labels = [];
+  for (let row = startRow; row <= endRow; row += 1) {
+    for (let column = startColumn; column <= endColumn; column += 1) {
+      labels.push(`${indexToColumnName(column)}${row + 1}`);
+    }
+  }
+  return labels;
+}
+function normalizeTableFormula(formula) {
+  return formula.trim().replace(/^=/, "").trim();
+}
+function evaluateBasicTableFormula(formula, getCellValue) {
+  const normalized = normalizeTableFormula(formula);
+  if (!normalized) {
+    return { value: null, error: "empty" };
+  }
+  const tokens = tokenizeFormula(normalized);
+  if (!tokens) {
+    return { value: null, error: "invalid-formula" };
+  }
+  const parser = new FormulaParser(tokens, getCellValue);
+  const result = parser.parseExpression();
+  if (result.error) {
+    return result;
+  }
+  if (!parser.isComplete()) {
+    return { value: null, error: "invalid-formula" };
+  }
+  return result;
+}
+function tokenizeFormula(formula) {
+  const tokens = [];
+  let index = 0;
+  while (index < formula.length) {
+    const char = formula[index];
+    if (!char) break;
+    if (/\s/.test(char)) {
+      index += 1;
+      continue;
+    }
+    if (char === "," || char === "+" || char === "-" || char === "*" || char === "/" || char === "(" || char === ")") {
+      if (char === ",") tokens.push({ type: "comma", value: char });
+      else if (char === "(" || char === ")") tokens.push({ type: "paren", value: char });
+      else tokens.push({ type: "operator", value: char });
+      index += 1;
+      continue;
+    }
+    const numberMatch = formula.slice(index).match(/^\d+(?:\.\d+)?/);
+    if (numberMatch?.[0]) {
+      tokens.push({ type: "number", value: Number.parseFloat(numberMatch[0]) });
+      index += numberMatch[0].length;
+      continue;
+    }
+    const identifierMatch = formula.slice(index).match(/^[A-Z]+[1-9]\d*(?::[A-Z]+[1-9]\d*)?|^[A-Z]+/i);
+    if (identifierMatch?.[0]) {
+      const value = identifierMatch[0].toUpperCase();
+      if (CELL_RANGE_RE.test(value)) tokens.push({ type: "range", value });
+      else if (parseTableCellAddress(value)) tokens.push({ type: "cell", value });
+      else if (SUPPORTED_FUNCTIONS.has(value)) tokens.push({ type: "function", value });
+      else return null;
+      index += identifierMatch[0].length;
+      continue;
+    }
+    return null;
+  }
+  return tokens;
+}
+var FormulaParser = class {
+  constructor(tokens, getCellValue) {
+    this.tokens = tokens;
+    this.getCellValue = getCellValue;
+    this.index = 0;
+  }
+  isComplete() {
+    return this.index >= this.tokens.length;
+  }
+  parseExpression() {
+    let left = this.parseTerm();
+    while (!left.error) {
+      const operator = this.peekOperator(["+", "-"]);
+      if (!operator) break;
+      this.index += 1;
+      const right = this.parseTerm();
+      if (right.error) return right;
+      left = {
+        value: operator.value === "+" ? left.value + right.value : left.value - right.value,
+        error: null
+      };
+    }
+    return left;
+  }
+  parseTerm() {
+    let left = this.parseFactor();
+    while (!left.error) {
+      const operator = this.peekOperator(["*", "/"]);
+      if (!operator) break;
+      this.index += 1;
+      const right = this.parseFactor();
+      if (right.error) return right;
+      if (operator.value === "/" && right.value === 0) {
+        return { value: null, error: "division-by-zero" };
+      }
+      left = {
+        value: operator.value === "*" ? left.value * right.value : left.value / right.value,
+        error: null
+      };
+    }
+    return left;
+  }
+  parseFactor() {
+    const token = this.tokens[this.index];
+    if (!token) {
+      return { value: null, error: "invalid-formula" };
+    }
+    if (token.type === "operator" && token.value === "-") {
+      this.index += 1;
+      const value = this.parseFactor();
+      if (value.error) return value;
+      return { value: -value.value, error: null };
+    }
+    if (token.type === "number") {
+      this.index += 1;
+      return { value: token.value, error: null };
+    }
+    if (token.type === "cell") {
+      this.index += 1;
+      return this.readCellNumber(token.value);
+    }
+    if (token.type === "function") {
+      return this.parseFunction(token.value);
+    }
+    if (token.type === "paren" && token.value === "(") {
+      this.index += 1;
+      const value = this.parseExpression();
+      if (value.error) return value;
+      if (!this.consumeParen(")")) {
+        return { value: null, error: "invalid-formula" };
+      }
+      return value;
+    }
+    return { value: null, error: "invalid-formula" };
+  }
+  parseFunction(name) {
+    this.index += 1;
+    if (!this.consumeParen("(")) {
+      return { value: null, error: "invalid-formula" };
+    }
+    const values = [];
+    while (true) {
+      const token = this.tokens[this.index];
+      if (!token) {
+        return { value: null, error: "invalid-formula" };
+      }
+      if (token.type === "range") {
+        this.index += 1;
+        const range = parseTableCellRange(token.value);
+        if (!range) return { value: null, error: "invalid-reference" };
+        for (const label of getTableCellRangeLabels(range)) {
+          const cellValue = this.readCellNumber(label);
+          if (cellValue.error) return cellValue;
+          values.push(cellValue.value);
+        }
+      } else {
+        const value = this.parseExpression();
+        if (value.error) return value;
+        values.push(value.value);
+      }
+      if (this.consumeComma()) {
+        continue;
+      }
+      if (this.consumeParen(")")) {
+        break;
+      }
+      return { value: null, error: "invalid-formula" };
+    }
+    if (values.length === 0) {
+      return { value: null, error: "invalid-formula" };
+    }
+    if (name === "SUM") return { value: values.reduce((sum, value) => sum + value, 0), error: null };
+    if (name === "AVG") return { value: values.reduce((sum, value) => sum + value, 0) / values.length, error: null };
+    if (name === "MIN") return { value: Math.min(...values), error: null };
+    if (name === "MAX") return { value: Math.max(...values), error: null };
+    if (name === "COUNT") return { value: values.length, error: null };
+    return { value: null, error: "invalid-formula" };
+  }
+  readCellNumber(label) {
+    const value = this.getCellValue(label);
+    const parsed = typeof value === "number" ? value : Number.parseFloat(String(value ?? "").trim());
+    if (!Number.isFinite(parsed)) {
+      return { value: null, error: "invalid-reference" };
+    }
+    return { value: parsed, error: null };
+  }
+  peekOperator(operators) {
+    const token = this.tokens[this.index];
+    return token?.type === "operator" && operators.includes(token.value) ? token : null;
+  }
+  consumeComma() {
+    if (this.tokens[this.index]?.type !== "comma") {
+      return false;
+    }
+    this.index += 1;
+    return true;
+  }
+  consumeParen(value) {
+    const token = this.tokens[this.index];
+    if (token?.type !== "paren" || token.value !== value) {
+      return false;
+    }
+    this.index += 1;
+    return true;
+  }
+};
+
+// src/components/UEditor/table-formula-commands.ts
+function collectChildren2(node) {
+  const children = [];
+  node.forEach((child) => children.push(child));
+  return children;
+}
+function getTableRows2(tableNode) {
+  const rows = [];
+  tableNode.forEach((rowNode, rowOffset) => {
+    const cells = [];
+    rowNode.forEach((cellNode, cellOffset, index) => {
+      cells.push({
+        index,
+        node: cellNode,
+        relativePos: rowOffset + 1 + cellOffset
+      });
+    });
+    rows.push({ node: rowNode, cells });
+  });
+  return rows;
+}
+function safeFindCell2(map, relativePos) {
+  try {
+    return map.findCell(relativePos);
+  } catch {
+    return null;
+  }
+}
+function getCellText(cellNode) {
+  return cellNode.textBetween(0, cellNode.content.size, "\n").trim();
+}
+function buildTableValueGetter(tableNode) {
+  const map = import_tables2.TableMap.get(tableNode);
+  const values = /* @__PURE__ */ new Map();
+  for (const rowInfo of getTableRows2(tableNode)) {
+    for (const entry of rowInfo.cells) {
+      const rect = safeFindCell2(map, entry.relativePos);
+      if (!rect) continue;
+      const label = `${indexToColumnName(rect.left)}${rect.top + 1}`;
+      const computedValue = entry.node.attrs.computedValue;
+      values.set(label, typeof computedValue === "string" && computedValue.trim() ? computedValue : getCellText(entry.node));
+    }
+  }
+  return (label) => values.get(label.toUpperCase());
+}
+function getFormulaComputedValue(formula, tableNode) {
+  const result = evaluateBasicTableFormula(formula, buildTableValueGetter(tableNode));
+  return result.error ? `#${result.error.toUpperCase()}` : String(result.value);
+}
+function normalizeFormulaInput(formula) {
+  const trimmed = formula.trim();
+  if (!trimmed) return "";
+  return trimmed.startsWith("=") ? trimmed : `=${trimmed}`;
+}
+function setSelectedTableCellFormula(editor, formula) {
+  const normalized = normalizeFormulaInput(formula);
+  const { state, view } = editor;
+  if (!normalized) {
+    const clearedFormula = (0, import_tables2.setCellAttr)("formula", null)(state, view.dispatch.bind(view));
+    const clearedValue = (0, import_tables2.setCellAttr)("computedValue", null)(editor.state, view.dispatch.bind(view));
+    if (clearedFormula || clearedValue) {
+      view.focus();
+      dispatchTableLayoutChange(editor);
+      return true;
+    }
+    return false;
+  }
+  const rect = (0, import_tables2.selectedRect)(state);
+  const computedValue = getFormulaComputedValue(normalized, rect.table);
+  const appliedFormula = (0, import_tables2.setCellAttr)("formula", normalized)(state, view.dispatch.bind(view));
+  const appliedValue = (0, import_tables2.setCellAttr)("computedValue", computedValue)(editor.state, view.dispatch.bind(view));
+  if (appliedFormula || appliedValue) {
+    view.focus();
+    dispatchTableLayoutChange(editor);
+    return true;
+  }
+  return false;
+}
+function clearSelectedTableCellFormula(editor) {
+  return setSelectedTableCellFormula(editor, "");
+}
+function recalculateSelectedTable(editor) {
+  const rect = (0, import_tables2.selectedRect)(editor.state);
+  const tableNode = rect.table;
+  const map = import_tables2.TableMap.get(tableNode);
+  const getCellValue = buildTableValueGetter(tableNode);
+  let changed = false;
+  const rows = getTableRows2(tableNode).map((rowInfo) => {
+    const cells = collectChildren2(rowInfo.node);
+    for (const entry of rowInfo.cells) {
+      const formula = typeof entry.node.attrs.formula === "string" ? entry.node.attrs.formula.trim() : "";
+      if (!formula) continue;
+      const rectForCell = safeFindCell2(map, entry.relativePos);
+      if (!rectForCell) continue;
+      const result = evaluateBasicTableFormula(formula, getCellValue);
+      const computedValue = result.error ? `#${result.error.toUpperCase()}` : String(result.value);
+      if (entry.node.attrs.computedValue === computedValue) continue;
+      cells[entry.index] = entry.node.type.create(
+        {
+          ...entry.node.attrs,
+          computedValue
+        },
+        entry.node.content,
+        entry.node.marks
+      );
+      changed = true;
+    }
+    return rowInfo.node.type.create(rowInfo.node.attrs, cells);
+  });
+  if (!changed) return false;
+  const nextTable = tableNode.type.create(tableNode.attrs, rows);
+  editor.view.dispatch(editor.state.tr.replaceWith(rect.tableStart - 1, rect.tableStart - 1 + tableNode.nodeSize, nextTable));
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+
+// src/components/UEditor/menus.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
 function applyTableCellBackground(editor, color) {
   const value = color || null;
   const { state, view } = editor;
-  const applied = (0, import_tables2.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
+  const applied = (0, import_tables3.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
   if (applied) {
     view.focus();
     return;
@@ -29828,6 +30355,8 @@ var BubbleMenuContent = ({
     setShowLinkInput(initialShowLinkInput);
   }, [initialShowLinkInput]);
   const [showTypographyPanel, setShowTypographyPanel] = (0, import_react62.useState)(false);
+  const [showFormulaPanel, setShowFormulaPanel] = (0, import_react62.useState)(false);
+  const [formulaDraft, setFormulaDraft] = (0, import_react62.useState)("");
   const [showFontSizeOptions, setShowFontSizeOptions] = (0, import_react62.useState)(false);
   const [fontSizeDraft, setFontSizeDraft] = (0, import_react62.useState)("");
   const isImageSelected = editor.isActive("image");
@@ -29838,7 +30367,8 @@ 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_tables2.isInTable)(editor.state);
+  const currentCellFormula = normalizeStyleValue(editor.getAttributes("tableCell").formula || editor.getAttributes("tableHeader").formula) || "";
+  const isInTable2 = (0, import_tables3.isInTable)(editor.state);
   const canMergeCells = isInTable2 && editor.can().mergeCells();
   const canSplitCell = isInTable2 && editor.can().splitCell();
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
@@ -29854,6 +30384,9 @@ var BubbleMenuContent = ({
   (0, import_react62.useEffect)(() => {
     setFontSizeDraft(currentFontSize.replace(/px$/i, ""));
   }, [currentFontSize]);
+  (0, import_react62.useEffect)(() => {
+    setFormulaDraft(currentCellFormula);
+  }, [currentCellFormula]);
   const applyFontSizeDraft = () => {
     const normalized = fontSizeDraft.trim();
     if (!normalized) {
@@ -30056,6 +30589,82 @@ var BubbleMenuContent = ({
       )
     ] });
   }
+  if (showFormulaPanel && isInTable2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "w-72 p-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: t("tableMenu.formula") || "Formula" }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setShowFormulaPanel(false);
+              onKeepOpenChange?.(false);
+            },
+            className: "rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            children: t("colors.done")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border/60 bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        "input",
+        {
+          value: formulaDraft,
+          onChange: (event) => setFormulaDraft(event.target.value),
+          onMouseDown: (event) => event.stopPropagation(),
+          onClick: (event) => event.stopPropagation(),
+          onKeyDown: (event) => {
+            event.stopPropagation();
+            if (event.key === "Enter") {
+              event.preventDefault();
+              setSelectedTableCellFormula(editor, formulaDraft);
+              setShowFormulaPanel(false);
+              onKeepOpenChange?.(false);
+            }
+          },
+          "aria-label": t("tableMenu.formula") || "Formula",
+          placeholder: "=SUM(A1:A3)",
+          className: "h-full min-w-0 flex-1 bg-transparent px-2 text-sm font-medium text-foreground outline-none"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "mt-2 grid grid-cols-3 gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setSelectedTableCellFormula(editor, formulaDraft);
+              setShowFormulaPanel(false);
+              onKeepOpenChange?.(false);
+            },
+            className: "h-8 rounded-md bg-primary/10 text-xs font-semibold text-primary transition-colors hover:bg-primary/15",
+            children: t("tableMenu.apply") || "Apply"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              clearSelectedTableCellFormula(editor);
+              setFormulaDraft("");
+            },
+            className: "h-8 rounded-md bg-muted/40 text-xs font-semibold text-foreground transition-colors hover:bg-muted",
+            children: t("tableMenu.clear") || "Clear"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => recalculateSelectedTable(editor),
+            className: "h-8 rounded-md bg-muted/40 text-xs font-semibold text-foreground transition-colors hover:bg-muted",
+            children: t("tableMenu.recalculate") || "Recalc"
+          }
+        )
+      ] })
+    ] });
+  }
   if (showTypographyPanel) {
     return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "w-72 p-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
@@ -30269,6 +30878,21 @@ var BubbleMenuContent = ({
           )
         }
       ),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        ToolbarButton,
+        {
+          onMouseDown: () => {
+            onKeepOpenChange?.(true);
+          },
+          onClick: () => {
+            setFormulaDraft(currentCellFormula);
+            setShowFormulaPanel(true);
+          },
+          active: Boolean(currentCellFormula),
+          title: t("tableMenu.formula") || "Formula",
+          children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react49.Sigma, { className: "w-4 h-4" })
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         ToolbarButton,
         {
@@ -34110,7 +34734,7 @@ if (typeof WeakMap != "undefined") {
     return cache[cachePos++] = value;
   };
 }
-var TableMap2 = class {
+var TableMap3 = class {
   constructor(width, height, map, problems) {
     this.width = width;
     this.height = height;
@@ -34247,7 +34871,7 @@ function computeMap(table) {
     pos++;
   }
   if (width === 0 || height === 0) (problems || (problems = [])).push({ type: "zero_sized" });
-  const tableMap = new TableMap2(width, height, map, problems);
+  const tableMap = new TableMap3(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);
@@ -34351,7 +34975,7 @@ function inSameTable($cellA, $cellB) {
 }
 function nextCell($pos, axis, dir) {
   const table = $pos.node(-1);
-  const map = TableMap2.get(table);
+  const map = TableMap3.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);
@@ -34371,7 +34995,7 @@ function removeColSpan(attrs, pos, n = 1) {
 var CellSelection = class CellSelection2 extends Selection {
   constructor($anchorCell, $headCell = $anchorCell) {
     const table = $anchorCell.node(-1);
-    const map = TableMap2.get(table);
+    const map = TableMap3.get(table);
     const tableStart = $anchorCell.start(-1);
     const rect = map.rectBetween($anchorCell.pos - tableStart, $headCell.pos - tableStart);
     const doc = $anchorCell.node(0);
@@ -34400,7 +35024,7 @@ var CellSelection = class CellSelection2 extends Selection {
   }
   content() {
     const table = this.$anchorCell.node(-1);
-    const map = TableMap2.get(table);
+    const map = TableMap3.get(table);
     const tableStart = this.$anchorCell.start(-1);
     const rect = map.rectBetween(this.$anchorCell.pos - tableStart, this.$headCell.pos - tableStart);
     const seen = {};
@@ -34454,7 +35078,7 @@ var CellSelection = class CellSelection2 extends Selection {
   }
   forEachCell(f) {
     const table = this.$anchorCell.node(-1);
-    const map = TableMap2.get(table);
+    const map = TableMap3.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]);
@@ -34469,7 +35093,7 @@ var CellSelection = class CellSelection2 extends Selection {
   }
   static colSelection($anchorCell, $headCell = $anchorCell) {
     const table = $anchorCell.node(-1);
-    const map = TableMap2.get(table);
+    const map = TableMap3.get(table);
     const tableStart = $anchorCell.start(-1);
     const anchorRect = map.findCell($anchorCell.pos - tableStart);
     const headRect = map.findCell($headCell.pos - tableStart);
@@ -34485,7 +35109,7 @@ var CellSelection = class CellSelection2 extends Selection {
   }
   isRowSelection() {
     const table = this.$anchorCell.node(-1);
-    const map = TableMap2.get(table);
+    const map = TableMap3.get(table);
     const tableStart = this.$anchorCell.start(-1);
     const anchorLeft = map.colCount(this.$anchorCell.pos - tableStart);
     const headLeft = map.colCount(this.$headCell.pos - tableStart);
@@ -34499,7 +35123,7 @@ var CellSelection = class CellSelection2 extends Selection {
   }
   static rowSelection($anchorCell, $headCell = $anchorCell) {
     const table = $anchorCell.node(-1);
-    const map = TableMap2.get(table);
+    const map = TableMap3.get(table);
     const tableStart = $anchorCell.start(-1);
     const anchorRect = map.findCell($anchorCell.pos - tableStart);
     const headRect = map.findCell($headCell.pos - tableStart);
@@ -34548,7 +35172,7 @@ var CellBookmark = class CellBookmark2 {
 };
 var fixTablesKey = new PluginKey4("fix-tables");
 function convertTableNodeToArrayOfRows(tableNode) {
-  const map = TableMap2.get(tableNode);
+  const map = TableMap3.get(tableNode);
   const rows = [];
   const rowCount = map.height;
   const colCount$1 = map.width;
@@ -34579,7 +35203,7 @@ function convertTableNodeToArrayOfRows(tableNode) {
 }
 function convertArrayOfRowsToTableNode(tableNode, arrayOfNodes) {
   const newRows = [];
-  const map = TableMap2.get(tableNode);
+  const map = TableMap3.get(tableNode);
   const rowCount = map.height;
   const colCount$1 = map.width;
   for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
@@ -34628,7 +35252,7 @@ function findParentNode(predicate, $pos) {
 function getCellsInColumn(columnIndex, selection) {
   const table = findTable(selection.$from);
   if (!table) return;
-  const map = TableMap2.get(table.node);
+  const map = TableMap3.get(table.node);
   if (columnIndex < 0 || columnIndex > map.width - 1) return;
   return map.cellsInRect({
     left: columnIndex,
@@ -34649,7 +35273,7 @@ function getCellsInColumn(columnIndex, selection) {
 function getCellsInRow(rowIndex, selection) {
   const table = findTable(selection.$from);
   if (!table) return;
-  const map = TableMap2.get(table.node);
+  const map = TableMap3.get(table.node);
   if (rowIndex < 0 || rowIndex > map.height - 1) return;
   return map.cellsInRect({
     left: 0,
@@ -34778,7 +35402,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 = TableMap2.get(newTable);
+  const map = TableMap3.get(newTable);
   const start = table.start;
   const index = targetIndex;
   const lastCell = map.positionAt(map.height - 1, index, newTable);
@@ -34806,7 +35430,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 = TableMap2.get(newTable);
+  const map = TableMap3.get(newTable);
   const start = table.start;
   const index = targetIndex;
   const lastCell = map.positionAt(index, map.width - 1, newTable);
@@ -34821,12 +35445,12 @@ function moveTableRow$1(table, indexesOrigin, indexesTarget, direction) {
   rows = moveRowInArrayOfRows(rows, indexesOrigin, indexesTarget, direction);
   return convertArrayOfRowsToTableNode(table, rows);
 }
-function selectedRect2(state) {
+function selectedRect3(state) {
   const sel = state.selection;
   const $pos = selectionCell(state);
   const table = $pos.node(-1);
   const tableStart = $pos.start(-1);
-  const map = TableMap2.get(table);
+  const map = TableMap3.get(table);
   return {
     ...sel instanceof CellSelection ? map.rectBetween(sel.$anchorCell.pos - tableStart, sel.$headCell.pos - tableStart) : map.findCell($pos.pos - tableStart),
     tableStart,
@@ -34839,7 +35463,7 @@ function deprecated_toggleHeader(type) {
     if (!isInTable(state)) return false;
     if (dispatch) {
       const types = tableNodeTypes(state.schema);
-      const rect = selectedRect2(state), tr = state.tr;
+      const rect = selectedRect3(state), tr = state.tr;
       const cells = rect.map.cellsInRect(type == "column" ? {
         left: rect.left,
         top: 0,
@@ -34879,7 +35503,7 @@ function toggleHeader(type, options) {
     if (!isInTable(state)) return false;
     if (dispatch) {
       const types = tableNodeTypes(state.schema);
-      const rect = selectedRect2(state), tr = state.tr;
+      const rect = selectedRect3(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;
@@ -35029,6 +35653,262 @@ var columnResizingPluginKey = new PluginKey4("tableColumnResizing");
 // src/components/UEditor/table-controls.tsx
 var import_lucide_react52 = require("lucide-react");
 
+// src/components/UEditor/table-layout-model.ts
+var FALLBACK_TABLE_ROW_HEIGHT = 44;
+var FALLBACK_TABLE_COLUMN_WIDTH = 160;
+function getVisibleTableBounds(layout) {
+  const left = Math.max(layout.tableLeft, layout.wrapperLeft);
+  const top = Math.max(layout.tableTop, layout.wrapperTop);
+  const right = Math.min(layout.tableLeft + layout.tableWidth, layout.wrapperLeft + layout.viewportWidth);
+  const bottom = Math.min(layout.tableTop + layout.tableHeight, layout.wrapperTop + layout.viewportHeight);
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+}
+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;
+}
+function getLastCell(table) {
+  const lastRow = table.rows.item(table.rows.length - 1);
+  if (!(lastRow instanceof HTMLTableRowElement)) return null;
+  const cell = lastRow.cells.item(lastRow.cells.length - 1);
+  return cell instanceof HTMLTableCellElement ? cell : null;
+}
+function getCellFromTarget(target) {
+  const element = resolveEventElement(target);
+  if (!element) return null;
+  const directCell = element.closest("th,td");
+  if (directCell instanceof HTMLTableCellElement) {
+    return directCell;
+  }
+  const table = element.closest("table");
+  if (table instanceof HTMLTableElement) {
+    return getPrimaryCell(table);
+  }
+  return null;
+}
+function findTableInfo(editor, pos) {
+  const $pos = editor.state.doc.resolve(pos);
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth);
+    if (node.type.name === "table") {
+      return {
+        node,
+        pos: $pos.before(depth),
+        start: $pos.start(depth)
+      };
+    }
+  }
+  return null;
+}
+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 = TableMap3.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 = TableMap3.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 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 cornerCell = getLastCell(table);
+  const cellPos = editor.view.posAtDOM(cell, 0);
+  const tableInfo = findTableInfo(editor, cellPos);
+  if (rows.length === 0 || !tableInfo || !(cornerCell instanceof HTMLTableCellElement)) {
+    return null;
+  }
+  const map = TableMap3.get(tableInfo.node);
+  const surfaceRect = surface.getBoundingClientRect();
+  const tableRect = table.getBoundingClientRect();
+  const wrapperElement = table.closest(".tableWrapper");
+  const wrapper = wrapperElement instanceof HTMLElement ? wrapperElement : null;
+  const wrapperRect = wrapper?.getBoundingClientRect() ?? tableRect;
+  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 / 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;
+  const wrapperWidth = metricOrFallback(wrapperRect.width, tableWidth);
+  const wrapperHeight = metricOrFallback(wrapperRect.height, tableHeight);
+  const viewportWidth = metricOrFallback(wrapper?.clientWidth ?? wrapperRect.width, tableWidth);
+  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 = buildLogicalRowMetrics({
+    editor,
+    surface,
+    surfaceRect,
+    tableInfo,
+    rows,
+    tableTop,
+    tableHeight,
+    cornerCell
+  });
+  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: normalizedCellPos,
+    cornerCellPos: tableInfo.start + map.positionAt(map.height - 1, map.width - 1, tableInfo.node),
+    activeRowIndex: activeCellRect.top,
+    activeColumnIndex: activeCellRect.left,
+    tableLeft,
+    tableTop,
+    tableWidth,
+    tableHeight,
+    wrapperLeft,
+    wrapperTop,
+    wrapperWidth,
+    wrapperHeight,
+    viewportWidth,
+    viewportHeight,
+    horizontalScrollbarHeight,
+    verticalScrollbarWidth,
+    avgRowHeight,
+    avgColumnWidth,
+    rowHandles,
+    columnHandles
+  };
+}
+
 // src/components/UEditor/table-hover-state.ts
 var MENU_HOVER_PADDING = 18;
 var ROW_HANDLE_HOVER_WIDTH = 28;
@@ -35062,18 +35942,18 @@ function buildTableHoverState({
   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 visibleBounds = getVisibleTableBounds(layout);
+  const rowRailTop = layout.wrapperTop + layout.wrapperHeight;
   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;
+  const isMouseInLastColumn = lastCol ? relativeX >= lastCol.start && relativeX <= lastCol.start + lastCol.size && relativeY >= visibleBounds.top && relativeY <= visibleBounds.bottom : false;
+  const addColumnVisible = Boolean(directAddColumn) || relativeX >= visibleBounds.right && relativeX <= visibleBounds.right + ADD_COLUMN_HOVER_WIDTH && relativeY >= visibleBounds.top && relativeY <= visibleBounds.bottom || isMouseInLastColumn;
+  const isMouseInLastRow = lastRow ? relativeY >= lastRow.start && relativeY <= lastRow.start + lastRow.size && relativeX >= visibleBounds.left && relativeX <= visibleBounds.right : false;
+  const addRowVisible = Boolean(directAddRow) || relativeY >= rowRailTop && relativeY <= rowRailTop + ADD_ROW_HOVER_HEIGHT && relativeX >= visibleBounds.left && relativeX <= visibleBounds.right || isMouseInLastRow;
   return {
     menuVisible,
     addColumnVisible,
@@ -35195,12 +36075,11 @@ function TableAddRails({
   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 visibleBounds = getVisibleTableBounds(layout);
+  const columnRailTop = visibleBounds.top;
+  const columnRailLeft = visibleBounds.right + ADD_COLUMN_RAIL_GAP;
   const rowRailTop = layout.wrapperTop + layout.wrapperHeight + ADD_ROW_RAIL_GAP;
-  const rowRailLeft = Math.max(layout.tableLeft, layout.wrapperLeft);
+  const rowRailLeft = visibleBounds.left;
   const showColumnRail = controlsVisible || addColumnVisible;
   const showRowRail = controlsVisible || addRowVisible;
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
@@ -35228,10 +36107,10 @@ function TableAddRails({
               "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),
+              top: showColumnRail ? columnRailTop : columnRailTop + Math.max(0, visibleBounds.height / 2 - 24),
               left: columnRailLeft,
               width: showColumnRail ? 18 : 12,
-              height: showColumnRail ? visibleTableHeight : 48,
+              height: showColumnRail ? visibleBounds.height : 48,
               opacity: showColumnRail ? 1 : 0,
               transform: showColumnRail ? "scale(1)" : "scale(0.92)",
               pointerEvents: showColumnRail ? "auto" : "none"
@@ -35266,8 +36145,8 @@ function TableAddRails({
             ),
             style: {
               top: rowRailTop,
-              left: showRowRail ? rowRailLeft : rowRailLeft + Math.max(0, visibleTableWidth / 2 - 24),
-              width: showRowRail ? visibleTableWidth : 48,
+              left: showRowRail ? rowRailLeft : rowRailLeft + Math.max(0, visibleBounds.width / 2 - 24),
+              width: showRowRail ? visibleBounds.width : 48,
               height: showRowRail ? 16 : 12,
               opacity: showRowRail ? 1 : 0,
               transform: showRowRail ? "scale(1)" : "scale(0.92)",
@@ -35492,248 +36371,6 @@ function TableColumnHandles({
   }) });
 }
 
-// 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;
-}
-function getLastCell(table) {
-  const lastRow = table.rows.item(table.rows.length - 1);
-  if (!(lastRow instanceof HTMLTableRowElement)) return null;
-  const cell = lastRow.cells.item(lastRow.cells.length - 1);
-  return cell instanceof HTMLTableCellElement ? cell : null;
-}
-function getCellFromTarget(target) {
-  const element = resolveEventElement(target);
-  if (!element) return null;
-  const directCell = element.closest("th,td");
-  if (directCell instanceof HTMLTableCellElement) {
-    return directCell;
-  }
-  const table = element.closest("table");
-  if (table instanceof HTMLTableElement) {
-    return getPrimaryCell(table);
-  }
-  return null;
-}
-function findTableInfo(editor, pos) {
-  const $pos = editor.state.doc.resolve(pos);
-  for (let depth = $pos.depth; depth > 0; depth -= 1) {
-    const node = $pos.node(depth);
-    if (node.type.name === "table") {
-      return {
-        node,
-        pos: $pos.before(depth),
-        start: $pos.start(depth)
-      };
-    }
-  }
-  return null;
-}
-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 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 cornerCell = getLastCell(table);
-  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");
-  const wrapper = wrapperElement instanceof HTMLElement ? wrapperElement : null;
-  const wrapperRect = wrapper?.getBoundingClientRect() ?? tableRect;
-  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 / 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;
-  const wrapperWidth = metricOrFallback(wrapperRect.width, tableWidth);
-  const wrapperHeight = metricOrFallback(wrapperRect.height, tableHeight);
-  const viewportWidth = metricOrFallback(wrapper?.clientWidth ?? wrapperRect.width, tableWidth);
-  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 = buildLogicalRowMetrics({
-    editor,
-    surface,
-    surfaceRect,
-    tableInfo,
-    rows,
-    tableTop,
-    tableHeight,
-    cornerCell
-  });
-  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: normalizedCellPos,
-    cornerCellPos: tableInfo.start + map.positionAt(map.height - 1, map.width - 1, tableInfo.node),
-    activeRowIndex: activeCellRect.top,
-    activeColumnIndex: activeCellRect.left,
-    tableLeft,
-    tableTop,
-    tableWidth,
-    tableHeight,
-    wrapperLeft,
-    wrapperTop,
-    wrapperWidth,
-    wrapperHeight,
-    viewportWidth,
-    viewportHeight,
-    horizontalScrollbarHeight,
-    verticalScrollbarWidth,
-    avgRowHeight,
-    avgColumnWidth,
-    rowHandles,
-    columnHandles
-  };
-}
-
 // src/components/UEditor/table-controls.tsx
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var TABLE_MENU_TOP_OFFSET = 10;