@underverse-ui/underverse 1.0.149 → 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: {
@@ -25836,6 +25844,8 @@ var import_core5 = require("@tiptap/core");
 var import_state2 = require("@tiptap/pm/state");
 
 // src/components/UEditor/clipboard-tables.ts
+var DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR = "#ffffff";
+var DEFAULT_HTML_TABLE_TEXT_COLOR = "#000000";
 function getClipboardData(dataTransfer, type) {
   try {
     return dataTransfer.getData(type) ?? "";
@@ -25856,6 +25866,411 @@ function extractClipboardHtmlFragment(html) {
 function normalizeClipboardCellText(value) {
   return value.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\u00a0/g, " ").replace(/[ \t]+\n/g, "\n").replace(/\n[ \t]+/g, "\n").replace(/\n+$/g, "").replace(/^\n+/g, "").trim();
 }
+function parseStyleDeclarations(styleText) {
+  const declarations = /* @__PURE__ */ new Map();
+  if (!styleText) return declarations;
+  for (const declaration of styleText.split(";")) {
+    const separatorIndex = declaration.indexOf(":");
+    if (separatorIndex <= 0) continue;
+    const property = declaration.slice(0, separatorIndex).trim().toLowerCase();
+    const value = cleanStyleValue(declaration.slice(separatorIndex + 1));
+    if (!property || !value) continue;
+    declarations.set(property, value);
+  }
+  return declarations;
+}
+function mergeStyleDeclarations(...sources) {
+  const declarations = /* @__PURE__ */ new Map();
+  for (const source of sources) {
+    if (!source) continue;
+    for (const [property, value] of source.entries()) {
+      declarations.set(property, value);
+    }
+  }
+  return declarations;
+}
+function extractCssClassNames(selectorText) {
+  const classNames = /* @__PURE__ */ new Set();
+  const classNamePattern = /\.([_a-zA-Z-][\w-]*)/g;
+  let match;
+  while ((match = classNamePattern.exec(selectorText)) !== null) {
+    classNames.add(match[1]);
+  }
+  return classNames;
+}
+function parseClipboardCssClassStyles(doc) {
+  const styleMap = /* @__PURE__ */ new Map();
+  for (const styleElement of Array.from(doc.querySelectorAll("style"))) {
+    const cssText = (styleElement.textContent ?? "").replace(/<!--|-->/g, "").replace(/\/\*[\s\S]*?\*\//g, "");
+    const rulePattern = /([^{}]+)\{([^{}]*)\}/g;
+    let match;
+    while ((match = rulePattern.exec(cssText)) !== null) {
+      const classNames = extractCssClassNames(match[1]);
+      if (classNames.size === 0) continue;
+      const declarations = parseStyleDeclarations(match[2]);
+      if (declarations.size === 0) continue;
+      for (const className of classNames) {
+        styleMap.set(className, mergeStyleDeclarations(styleMap.get(className), declarations));
+      }
+    }
+  }
+  return styleMap;
+}
+function getElementStyleDeclarations(element, styleMap) {
+  const classDeclarations = Array.from(element.classList).map((className) => styleMap.get(className));
+  const inlineDeclarations = parseStyleDeclarations(element.getAttribute("style"));
+  return mergeStyleDeclarations(...classDeclarations, inlineDeclarations);
+}
+function cleanStyleValue(value) {
+  const normalized = value?.trim();
+  if (!normalized) return null;
+  if (/[\0<>;{}]/.test(normalized)) return null;
+  if (/\b(?:expression|url|(?:repeating-)?(?:linear|radial|conic)-gradient)\s*\(/i.test(normalized)) return null;
+  return normalized;
+}
+function normalizeColorValue(value) {
+  const normalized = cleanStyleValue(value);
+  if (!normalized) return null;
+  if (/^(?:auto|inherit|initial|none|transparent|unset)$/i.test(normalized)) return null;
+  return normalized;
+}
+function normalizeTextColorValue(value) {
+  const normalized = normalizeColorValue(value);
+  if (!normalized) return null;
+  if (/^(?:automatic|windowtext|black|#000|#000000|rgb\(\s*0\s*,\s*0\s*,\s*0\s*\))$/i.test(normalized)) {
+    return DEFAULT_HTML_TABLE_TEXT_COLOR;
+  }
+  return normalized;
+}
+function isWhiteColor(value) {
+  if (!value) return false;
+  return /^(?:white|#fff|#ffffff|rgb\(\s*255\s*,\s*255\s*,\s*255\s*\))$/i.test(value.trim());
+}
+function parseCssColorRgb(value) {
+  const normalized = normalizeColorValue(value);
+  if (!normalized) return null;
+  const lowerColor = normalized.toLowerCase();
+  if (lowerColor === "white") return { r: 255, g: 255, b: 255 };
+  if (lowerColor === "black") return { r: 0, g: 0, b: 0 };
+  const hexMatch = lowerColor.match(/^#([\da-f]{3}|[\da-f]{6})$/i);
+  if (hexMatch) {
+    const hex = hexMatch[1];
+    const fullHex = hex.length === 3 ? hex.split("").map((part) => part + part).join("") : hex;
+    return {
+      r: Number.parseInt(fullHex.slice(0, 2), 16),
+      g: Number.parseInt(fullHex.slice(2, 4), 16),
+      b: Number.parseInt(fullHex.slice(4, 6), 16)
+    };
+  }
+  const rgbMatch = lowerColor.match(/^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)/);
+  if (rgbMatch) {
+    return {
+      r: Math.max(0, Math.min(255, Number.parseFloat(rgbMatch[1]))),
+      g: Math.max(0, Math.min(255, Number.parseFloat(rgbMatch[2]))),
+      b: Math.max(0, Math.min(255, Number.parseFloat(rgbMatch[3])))
+    };
+  }
+  return null;
+}
+function getRelativeLuminance(value) {
+  const rgb = parseCssColorRgb(value);
+  if (!rgb) return null;
+  const toLinear = (channel) => {
+    const normalized = channel / 255;
+    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * toLinear(rgb.r) + 0.7152 * toLinear(rgb.g) + 0.0722 * toLinear(rgb.b);
+}
+function isLightTextColor(value) {
+  const luminance = getRelativeLuminance(value);
+  return luminance !== null && luminance >= 0.72;
+}
+function isDarkReadableBackground(value) {
+  const luminance = getRelativeLuminance(value);
+  return luminance !== null && luminance <= 0.45;
+}
+function splitCssTokens(value) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (const char of value) {
+    if (char === "(") depth += 1;
+    if (char === ")") depth = Math.max(0, depth - 1);
+    if (/\s/.test(char) && depth === 0) {
+      if (current) {
+        tokens.push(current);
+        current = "";
+      }
+      continue;
+    }
+    current += char;
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function extractColorFromShorthand(value) {
+  const normalized = cleanStyleValue(value);
+  if (!normalized) return null;
+  const explicitColor = normalized.match(/#[\da-f]{3,8}\b|rgba?\([^)]+\)|hsla?\([^)]+\)/i);
+  if (explicitColor) return explicitColor[0];
+  const ignoredKeywords = /* @__PURE__ */ new Set([
+    "border-box",
+    "center",
+    "contain",
+    "content-box",
+    "cover",
+    "fixed",
+    "inherit",
+    "initial",
+    "left",
+    "local",
+    "none",
+    "no-repeat",
+    "padding-box",
+    "repeat",
+    "repeat-x",
+    "repeat-y",
+    "right",
+    "scroll",
+    "top",
+    "transparent",
+    "unset"
+  ]);
+  return splitCssTokens(normalized).find((token) => !ignoredKeywords.has(token.toLowerCase())) ?? null;
+}
+function getBackgroundColor(styles) {
+  return normalizeColorValue(styles.get("background-color")) ?? normalizeColorValue(extractColorFromShorthand(styles.get("background")));
+}
+var BORDER_STYLES = /* @__PURE__ */ new Set([
+  "dashed",
+  "dotted",
+  "double",
+  "groove",
+  "hidden",
+  "inset",
+  "none",
+  "outset",
+  "ridge",
+  "solid"
+]);
+var BORDER_WIDTH_KEYWORDS = /* @__PURE__ */ new Set(["medium", "thick", "thin"]);
+function normalizeBorderStyle(value) {
+  const normalized = cleanStyleValue(value);
+  if (!normalized) return null;
+  const styles = splitCssTokens(normalized).filter((token) => BORDER_STYLES.has(token.toLowerCase()));
+  const usefulStyles = styles.filter((style) => !/^(?:hidden|none)$/i.test(style));
+  return usefulStyles.length > 0 ? usefulStyles.join(" ") : null;
+}
+function normalizeBorderWidth(value) {
+  const normalized = cleanStyleValue(value);
+  if (!normalized) return null;
+  const widths = splitCssTokens(normalized).filter((token) => {
+    const lowerToken = token.toLowerCase();
+    return BORDER_WIDTH_KEYWORDS.has(lowerToken) || /^\d*\.?\d+(?:px|pt|pc|in|cm|mm|em|rem)?$/i.test(token);
+  });
+  return widths.length > 0 ? widths.join(" ") : null;
+}
+function parseBorderShorthand(value) {
+  const normalized = cleanStyleValue(value);
+  if (!normalized) return null;
+  const tokens = splitCssTokens(normalized);
+  let borderStyle = null;
+  let borderWidth = null;
+  const colorTokens = [];
+  for (const token of tokens) {
+    const lowerToken = token.toLowerCase();
+    if (!borderStyle && BORDER_STYLES.has(lowerToken)) {
+      borderStyle = lowerToken;
+      continue;
+    }
+    if (!borderWidth && (BORDER_WIDTH_KEYWORDS.has(lowerToken) || /^\d*\.?\d+(?:px|pt|pc|in|cm|mm|em|rem)?$/i.test(token))) {
+      borderWidth = token;
+      continue;
+    }
+    colorTokens.push(token);
+  }
+  if (borderStyle && /^(?:hidden|none)$/i.test(borderStyle)) return null;
+  return {
+    borderColor: normalizeColorValue(colorTokens.join(" ")),
+    borderStyle,
+    borderWidth
+  };
+}
+function getFirstParsedBorder(styles) {
+  for (const property of ["border", "border-top", "border-right", "border-bottom", "border-left"]) {
+    const border = parseBorderShorthand(styles.get(property));
+    if (border) return border;
+  }
+  return null;
+}
+function getBorderAttrs(styles) {
+  const parsedBorder = getFirstParsedBorder(styles);
+  return {
+    borderColor: normalizeColorValue(styles.get("border-color")) ?? parsedBorder?.borderColor ?? void 0,
+    borderStyle: normalizeBorderStyle(styles.get("border-style")) ?? parsedBorder?.borderStyle ?? void 0,
+    borderWidth: normalizeBorderWidth(styles.get("border-width")) ?? parsedBorder?.borderWidth ?? void 0
+  };
+}
+function parsePositiveInteger(value, max = 100) {
+  if (!value) return null;
+  const parsed = Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed) || parsed < 1) return null;
+  return Math.min(parsed, max);
+}
+function parseCssSize(value) {
+  const normalized = cleanStyleValue(value);
+  if (!normalized) return null;
+  const match = normalized.match(/^(\d+(?:\.\d+)?)(px|pt)?$/i);
+  if (!match) return null;
+  const amount = Number.parseFloat(match[1]);
+  if (!Number.isFinite(amount) || amount <= 0) return null;
+  return Math.round(match[2]?.toLowerCase() === "pt" ? amount * (4 / 3) : amount);
+}
+function getCellWidth(cell, styles, colspan) {
+  if (colspan !== 1) return null;
+  const width = parseCssSize(cell.getAttribute("data-colwidth") ?? cell.getAttribute("width") ?? styles.get("width"));
+  return width ? [width] : null;
+}
+function getTableRowAttrs(row, styles) {
+  const rowHeight = parseCssSize(
+    row.getAttribute("data-row-height") ?? row.getAttribute("height") ?? styles.get("height")
+  );
+  return rowHeight ? { rowHeight } : void 0;
+}
+function getTableCellAttrs(cell, styles, defaultBackgroundColor) {
+  const colspan = parsePositiveInteger(cell.getAttribute("colspan")) ?? 1;
+  const rowspan = parsePositiveInteger(cell.getAttribute("rowspan")) ?? 1;
+  const backgroundColor = getBackgroundColor(styles) ?? normalizeColorValue(cell.getAttribute("data-background-color")) ?? normalizeColorValue(cell.getAttribute("bgcolor")) ?? defaultBackgroundColor;
+  const borderAttrs = getBorderAttrs(styles);
+  const colwidth = getCellWidth(cell, styles, colspan);
+  const attrs = {};
+  if (backgroundColor) attrs.backgroundColor = backgroundColor;
+  if (borderAttrs.borderColor) attrs.borderColor = borderAttrs.borderColor;
+  if (borderAttrs.borderStyle) attrs.borderStyle = borderAttrs.borderStyle;
+  if (borderAttrs.borderWidth) attrs.borderWidth = borderAttrs.borderWidth;
+  if (colspan > 1) attrs.colspan = colspan;
+  if (rowspan > 1) attrs.rowspan = rowspan;
+  if (colwidth) attrs.colwidth = colwidth;
+  return Object.keys(attrs).length > 0 ? attrs : void 0;
+}
+function marksEqual(left, right) {
+  return JSON.stringify(left ?? []) === JSON.stringify(right ?? []);
+}
+function mergeMarks(base2, additions) {
+  const next = [...base2 ?? []];
+  for (const addition of additions ?? []) {
+    const existingIndex = next.findIndex((mark) => mark.type === addition.type);
+    if (existingIndex >= 0) {
+      const existingMark = next[existingIndex];
+      next[existingIndex] = {
+        ...existingMark,
+        attrs: {
+          ...existingMark.attrs ?? {},
+          ...addition.attrs ?? {}
+        }
+      };
+      continue;
+    }
+    next.push(addition);
+  }
+  return next.length > 0 ? next : void 0;
+}
+function getMarkColor(marks, markType) {
+  const mark = marks?.find((candidate) => candidate.type === markType);
+  const color = mark?.attrs?.color;
+  return typeof color === "string" ? color : null;
+}
+function replaceTextStyleColor(marks, color) {
+  let replaced = false;
+  const next = (marks ?? []).map((mark) => {
+    if (mark.type !== "textStyle") return mark;
+    replaced = true;
+    return {
+      ...mark,
+      attrs: {
+        ...mark.attrs ?? {},
+        color
+      }
+    };
+  });
+  if (!replaced) {
+    next.unshift({ type: "textStyle", attrs: { color } });
+  }
+  return next;
+}
+function ensureReadableSpreadsheetSegments(segments, cellBackgroundColor) {
+  return segments.map((segment) => {
+    const textColor = getMarkColor(segment.marks, "textStyle");
+    if (!isLightTextColor(textColor)) return segment;
+    const inlineBackgroundColor = getMarkColor(segment.marks, "highlight");
+    if (isDarkReadableBackground(inlineBackgroundColor) || isDarkReadableBackground(cellBackgroundColor)) {
+      return segment;
+    }
+    return {
+      ...segment,
+      marks: replaceTextStyleColor(segment.marks, DEFAULT_HTML_TABLE_TEXT_COLOR)
+    };
+  });
+}
+function getElementInlineMarks(element, styles) {
+  const marks = [];
+  const tagName = element.tagName;
+  const color = normalizeTextColorValue(styles.get("color") ?? element.getAttribute("color"));
+  const backgroundColor = getBackgroundColor(styles);
+  const fontWeight = styles.get("font-weight")?.toLowerCase();
+  const fontStyle = styles.get("font-style")?.toLowerCase();
+  const textDecoration = styles.get("text-decoration")?.toLowerCase();
+  if (color) {
+    marks.push({ type: "textStyle", attrs: { color } });
+  }
+  if (backgroundColor && !isWhiteColor(backgroundColor)) {
+    marks.push({ type: "highlight", attrs: { color: backgroundColor } });
+  }
+  if (tagName === "B" || tagName === "STRONG" || fontWeight === "bold" || /^\d+$/.test(fontWeight ?? "") && Number(fontWeight) >= 600) {
+    marks.push({ type: "bold" });
+  }
+  if (tagName === "I" || tagName === "EM" || fontStyle === "italic") {
+    marks.push({ type: "italic" });
+  }
+  if (tagName === "U" || textDecoration?.includes("underline")) {
+    marks.push({ type: "underline" });
+  }
+  return marks.length > 0 ? marks : void 0;
+}
+function appendTextSegment(segments, segment) {
+  if (!segment.text) return;
+  const lastSegment = segments[segments.length - 1];
+  if (lastSegment && marksEqual(lastSegment.marks, segment.marks)) {
+    lastSegment.text += segment.text;
+    return;
+  }
+  segments.push(segment);
+}
+function segmentsEndWithNewline(segments) {
+  return segments.length > 0 && segments[segments.length - 1].text.endsWith("\n");
+}
+function normalizeClipboardTextSegments(segments) {
+  const normalizedSegments = [];
+  for (const segment of segments) {
+    appendTextSegment(normalizedSegments, {
+      text: segment.text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\u00a0/g, " "),
+      marks: segment.marks
+    });
+  }
+  while (normalizedSegments.length > 0) {
+    const firstSegment = normalizedSegments[0];
+    firstSegment.text = firstSegment.text.replace(/^\s+/, "");
+    if (firstSegment.text) break;
+    normalizedSegments.shift();
+  }
+  while (normalizedSegments.length > 0) {
+    const lastSegment = normalizedSegments[normalizedSegments.length - 1];
+    lastSegment.text = lastSegment.text.replace(/\s+$/, "");
+    if (lastSegment.text) break;
+    normalizedSegments.pop();
+  }
+  return normalizedSegments;
+}
 function getClipboardCellText(node) {
   if (node.nodeType === Node.TEXT_NODE) {
     return node.textContent ?? "";
@@ -25873,57 +26288,205 @@ function getClipboardCellText(node) {
   }
   return childText;
 }
-function getHtmlTableRows(table) {
+function getClipboardCellSegments(node, styleMap, inheritedMarks) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return [{ text: node.textContent ?? "", marks: inheritedMarks }];
+  }
+  if (!(node instanceof HTMLElement)) {
+    return [];
+  }
+  if (node.tagName === "BR") {
+    return [{ text: "\n", marks: inheritedMarks }];
+  }
+  const styles = getElementStyleDeclarations(node, styleMap);
+  const marks = mergeMarks(inheritedMarks, getElementInlineMarks(node, styles));
+  const segments = [];
+  for (const childNode of Array.from(node.childNodes)) {
+    for (const segment of getClipboardCellSegments(childNode, styleMap, marks)) {
+      appendTextSegment(segments, segment);
+    }
+  }
+  if ((node.tagName === "P" || node.tagName === "DIV" || node.tagName === "LI") && segments.length > 0 && !segmentsEndWithNewline(segments)) {
+    appendTextSegment(segments, { text: "\n" });
+  }
+  return segments;
+}
+function getClipboardCellChildSegments(cell, styleMap, inheritedMarks) {
+  const segments = [];
+  for (const childNode of Array.from(cell.childNodes)) {
+    for (const segment of getClipboardCellSegments(childNode, styleMap, inheritedMarks)) {
+      appendTextSegment(segments, segment);
+    }
+  }
+  return normalizeClipboardTextSegments(segments);
+}
+function getHtmlTableRows(table, styleMap) {
   const rows = Array.from(table.querySelectorAll("tr")).map(
-    (row) => Array.from(row.children).filter((cell) => cell instanceof HTMLTableCellElement).map((cell) => ({
-      text: normalizeClipboardCellText(getClipboardCellText(cell)),
-      isHeader: cell.tagName === "TH"
-    }))
+    (row) => ({
+      attrs: getTableRowAttrs(row, getElementStyleDeclarations(row, styleMap)),
+      cells: Array.from(row.children).filter((cell) => cell instanceof HTMLTableCellElement).map((cell) => {
+        const styles = getElementStyleDeclarations(cell, styleMap);
+        const textColor = normalizeTextColorValue(styles.get("color")) ?? DEFAULT_HTML_TABLE_TEXT_COLOR;
+        const inheritedMarks = [{ type: "textStyle", attrs: { color: textColor } }];
+        const attrs = getTableCellAttrs(cell, styles, DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR);
+        const segments = ensureReadableSpreadsheetSegments(
+          getClipboardCellChildSegments(cell, styleMap, inheritedMarks),
+          attrs?.backgroundColor
+        );
+        return {
+          text: normalizeClipboardCellText(getClipboardCellText(cell)),
+          isHeader: cell.tagName === "TH",
+          attrs,
+          segments: segments.length > 0 ? segments : void 0,
+          textColor
+        };
+      })
+    })
   );
-  return rows.filter((row) => row.length > 0);
+  return rows.filter((row) => row.cells.length > 0);
+}
+function createTextMarks(cell) {
+  return cell.textColor ? [{ type: "textStyle", attrs: { color: cell.textColor } }] : void 0;
 }
-function createParagraphContent(text) {
+function createParagraphContent(text, marks) {
   return text ? {
     type: "paragraph",
-    content: [{ type: "text", text }]
+    content: [{ type: "text", text, ...marks ? { marks } : {} }]
   } : { type: "paragraph" };
 }
+function createParagraphContentFromSegments(segments) {
+  const paragraphs = [[]];
+  for (const segment of segments) {
+    const parts = segment.text.split("\n");
+    parts.forEach((part, index) => {
+      if (part) {
+        paragraphs[paragraphs.length - 1].push({ text: part, marks: segment.marks });
+      }
+      if (index < parts.length - 1) {
+        paragraphs.push([]);
+      }
+    });
+  }
+  return paragraphs.map((paragraphSegments) => {
+    const content = paragraphSegments.map((segment) => ({
+      type: "text",
+      text: segment.text,
+      ...segment.marks ? { marks: segment.marks } : {}
+    }));
+    return content.length > 0 ? { type: "paragraph", content } : { type: "paragraph" };
+  });
+}
 function createTableCellContent(cell) {
   const lines = cell.text.split("\n");
-  const paragraphs = (lines.length > 0 ? lines : [""]).map(createParagraphContent);
+  const marks = createTextMarks(cell);
+  const paragraphs = cell.segments && cell.segments.length > 0 ? createParagraphContentFromSegments(cell.segments) : (lines.length > 0 ? lines : [""]).map((line) => createParagraphContent(line, marks));
   return {
     type: cell.isHeader ? "tableHeader" : "tableCell",
+    ...cell.attrs ? { attrs: cell.attrs } : {},
     content: paragraphs.length > 0 ? paragraphs : [{ type: "paragraph" }]
   };
 }
-function createTableContent(rows, minColumnCount = 1) {
-  const tableRows = rows.filter((row) => row.length > 0);
+function getRowspanLimitedCell(cell, remainingRowCount) {
+  const attrs = cell.attrs;
+  if (!attrs?.rowspan || attrs.rowspan <= remainingRowCount) return cell;
+  if (remainingRowCount <= 1) {
+    const { rowspan: _rowspan, ...nextAttrs } = attrs;
+    return {
+      ...cell,
+      attrs: Object.keys(nextAttrs).length > 0 ? nextAttrs : void 0
+    };
+  }
+  return {
+    ...cell,
+    attrs: {
+      ...attrs,
+      rowspan: remainingRowCount
+    }
+  };
+}
+function normalizeTableRows(rows) {
+  const positionedRows = [];
+  let rowspans = [];
+  let columnCount = 0;
+  rows.forEach((row, rowIndex) => {
+    const coveredColumns = rowspans.map((span) => span > 0);
+    const nextRowspans = rowspans.map((span) => Math.max(0, span - 1));
+    const positionedCells = [];
+    let columnIndex = 0;
+    for (const rawCell of row.cells) {
+      while (coveredColumns[columnIndex]) columnIndex += 1;
+      const remainingRowCount = rows.length - rowIndex;
+      const cell = getRowspanLimitedCell(rawCell, remainingRowCount);
+      const colspan = Math.max(1, cell.attrs?.colspan ?? 1);
+      const rowspan = Math.max(1, cell.attrs?.rowspan ?? 1);
+      positionedCells.push({ startColumn: columnIndex, colspan, cell });
+      if (rowspan > 1) {
+        for (let offset = 0; offset < colspan; offset += 1) {
+          const spannedColumn = columnIndex + offset;
+          nextRowspans[spannedColumn] = Math.max(nextRowspans[spannedColumn] ?? 0, rowspan - 1);
+        }
+      }
+      columnIndex += colspan;
+    }
+    const lastCoveredColumn = coveredColumns.reduce((lastIndex, covered, index) => covered ? index : lastIndex, -1);
+    const lastFutureRowspanColumn = nextRowspans.reduce((lastIndex, span, index) => span > 0 ? index : lastIndex, -1);
+    columnCount = Math.max(columnCount, columnIndex, lastCoveredColumn + 1, lastFutureRowspanColumn + 1);
+    positionedRows.push({
+      attrs: row.attrs,
+      cells: positionedCells,
+      coveredColumns
+    });
+    rowspans = nextRowspans;
+  });
+  return { positionedRows, columnCount };
+}
+function createNormalizedRowContent(row, columnCount, fillerCellAttrs) {
+  const content = [];
+  const cellByStartColumn = new Map(row.cells.map((cell) => [cell.startColumn, cell]));
+  let columnIndex = 0;
+  while (columnIndex < columnCount) {
+    if (row.coveredColumns[columnIndex]) {
+      columnIndex += 1;
+      continue;
+    }
+    const positionedCell = cellByStartColumn.get(columnIndex);
+    if (positionedCell) {
+      content.push(createTableCellContent(positionedCell.cell));
+      columnIndex += positionedCell.colspan;
+      continue;
+    }
+    content.push(createTableCellContent({ text: "", isHeader: false, attrs: fillerCellAttrs }));
+    columnIndex += 1;
+  }
+  return content;
+}
+function createTableContent(rows, minColumnCount = 1, fillerCellAttrs) {
+  const tableRows = rows.filter((row) => row.cells.length > 0);
   if (tableRows.length === 0) return null;
-  const columnCount = tableRows.reduce((max, row) => Math.max(max, row.length), 0);
+  const { positionedRows, columnCount } = normalizeTableRows(tableRows);
   if (columnCount < minColumnCount) return null;
   return {
     type: "table",
-    content: tableRows.map((row) => {
-      const normalizedRow = Array.from(
-        { length: columnCount },
-        (_, index) => row[index] ?? { text: "", isHeader: false }
-      );
-      return {
-        type: "tableRow",
-        content: normalizedRow.map(createTableCellContent)
-      };
-    })
+    content: positionedRows.map((row) => ({
+      type: "tableRow",
+      ...row.attrs ? { attrs: row.attrs } : {},
+      content: createNormalizedRowContent(row, columnCount, fillerCellAttrs)
+    }))
   };
 }
 function getClipboardTableContent(dataTransfer) {
   const html = getClipboardData(dataTransfer, "text/html");
   if (!/<table(?:\s|>)/i.test(html)) return null;
   if (typeof DOMParser === "undefined") return null;
+  const doc = new DOMParser().parseFromString(html, "text/html");
   const fragment = extractClipboardHtmlFragment(html);
-  const doc = new DOMParser().parseFromString(fragment, "text/html");
-  const table = doc.querySelector("table");
+  const fragmentDoc = new DOMParser().parseFromString(fragment, "text/html");
+  const styleMap = parseClipboardCssClassStyles(doc);
+  const table = fragmentDoc.querySelector("table") ?? doc.querySelector("table");
   if (!(table instanceof HTMLTableElement)) return null;
-  return createTableContent(getHtmlTableRows(table));
+  return createTableContent(getHtmlTableRows(table, styleMap), 1, {
+    backgroundColor: DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR
+  });
 }
 function parseClipboardTsvRows(text) {
   const rows = [];
@@ -25980,7 +26543,9 @@ function getClipboardTsvTableContent(dataTransfer) {
   if (!text.includes("	")) return null;
   const rows = parseClipboardTsvRows(text);
   return createTableContent(
-    rows.map((row) => row.map((cell) => ({ text: normalizeClipboardCellText(cell), isHeader: false }))),
+    rows.map((row) => ({
+      cells: row.map((cell) => ({ text: normalizeClipboardCellText(cell), isHeader: false }))
+    })),
     2
   );
 }
@@ -27255,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
+          };
+        }
       }
     };
   },
@@ -27322,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
+          };
+        }
       }
     };
   },
@@ -28034,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) {
@@ -28159,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);
   });
@@ -29238,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;
@@ -29271,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");
@@ -29281,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);
@@ -29297,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) {
@@ -29499,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: [
@@ -29712,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,
         {
@@ -33553,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;
@@ -33690,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);
@@ -33794,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);
@@ -33814,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);
@@ -33843,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 = {};
@@ -33897,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]);
@@ -33912,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);
@@ -33928,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);
@@ -33942,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);
@@ -33991,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;
@@ -34022,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++) {
@@ -34071,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,
@@ -34092,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,
@@ -34221,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);
@@ -34249,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);
@@ -34264,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,
@@ -34282,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,
@@ -34322,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;
@@ -34472,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;
@@ -34505,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,
@@ -34638,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: [
@@ -34671,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"
@@ -34709,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)",
@@ -34935,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;