@underverse-ui/underverse 2.0.27 → 2.0.29

package/dist/{chunk-5ODK33CL.js → chunk-XTZTUDRE.js}

@@ -7,6 +7,7 @@ import {
   CellBgColorIcon,
   CellBorderIcon,
   ClipboardImages,
+  DEFAULT_RESPONSIVE_TABLE_WIDTH_BP,
   DEFAULT_TABLE_ROW_HEIGHT,
   DropdownMenu,
   DropdownMenuItem,
@@ -18,6 +19,7 @@ import {
   MIN_TABLE_ROW_HEIGHT,
   Popover,
   ROW_RESIZE_LINE_THICKNESS,
+  TABLE_WIDTH_BASIS_POINTS,
   TextColorIcon,
   ToolbarButton,
   UEDITOR_PROSEMIRROR_CLASS_NAME,
@@ -26,8 +28,10 @@ import {
   applyImageLayout,
   applyImageWidthPreset,
   applyTableAlignment,
+  clampResponsiveTableWidthBp,
   clearTableColumnAt,
   clearTableRowAt,
+  deleteResponsiveColumnLayout,
   deleteSelectedImage,
   dispatchTableLayoutChange,
   duplicateTableColumnAt,
@@ -35,12 +39,19 @@ import {
   expandTableFromCell,
   findTableNodeInfoFromState,
   findTableRowNodeInfo,
+  formatBasisPointsAsPercentage,
   getDefaultFontSizes,
   getDefaultLineHeights,
+  getLegacyTableColumnWeights,
+  getLogicalTableColumnCount,
   getRelativeBoundaryMetrics,
   getRelativeCellMetrics,
   getRelativeSelectedCellsMetrics,
+  getResponsiveTableOffsetBp,
+  getResponsiveTableWidthBp,
   getSelectionTableCell,
+  getTableColumnRatios,
+  insertResponsiveColumnLayout,
   isCrossRealmElement,
   isCrossRealmHTMLElement,
   isCrossRealmNode,
@@ -52,16 +63,22 @@ import {
   isRowResizingGlobal,
   isSafeUEditorUrl,
   mergeTableCellsPreservingColumnWidths,
+  moveResponsiveColumnRatio,
+  normalizeColumnRatios,
   normalizeStyleValue,
+  normalizeTableWidthMode,
+  parseColumnRatios,
+  parsePercentageToBasisPoints,
   resetImageSize,
   resolveColumnResizeTarget,
   resolveEventElement,
+  resolveResponsiveTableOffsetBp,
   resolveRowResizeTarget,
   runTableCommandAtCellPos,
   sanitizeUEditorUrl,
   useEditorColors,
   useSharedEditorUiRenderState
-} from "./chunk-BDRCOIYR.js";
+} from "./chunk-5QWYO527.js";
 import {
   Tooltip,
   UEditorPortalProvider,
@@ -3339,8 +3356,15 @@ var indent_default = Indent;
 // src/components/UEditor/table-align.ts
 import { mergeAttributes as mergeAttributes7 } from "@tiptap/core";
 import { Table as Table2 } from "@tiptap/extension-table";
-import { Plugin as Plugin4, PluginKey as PluginKey5 } from "@tiptap/pm/state";
-import { tableEditing } from "@tiptap/pm/tables";
+import { Plugin as Plugin4, PluginKey as PluginKey5, TextSelection } from "@tiptap/pm/state";
+import {
+  addColumnAfter as addColumnAfterCommand,
+  addColumnBefore as addColumnBeforeCommand,
+  deleteColumn as deleteColumnCommand,
+  selectedRect,
+  tableEditing,
+  tableNodeTypes as tableNodeTypes2
+} from "@tiptap/pm/tables";
 
 // src/components/UEditor/table-column-resize.ts
 import { Plugin as Plugin3 } from "@tiptap/pm/state";
@@ -3361,14 +3385,10 @@ function getColumnResizeMinWidth(configuredMinWidth) {
   const normalizedMinWidth = Number.isFinite(configuredMinWidth) && configuredMinWidth > 0 ? Math.round(configuredMinWidth) : MIN_RESIZED_TABLE_COLUMN_WIDTH;
   return Math.max(MIN_RESIZED_TABLE_COLUMN_WIDTH, normalizedMinWidth);
 }
-function setColumnStyle(column, width) {
-  if (width == null) {
-    column.style.width = `${DEFAULT_TABLE_COLUMN_WIDTH}px`;
-    column.style.minWidth = `${DEFAULT_TABLE_COLUMN_WIDTH}px`;
-    return;
-  }
-  column.style.width = `${Math.max(width, MIN_RESIZED_TABLE_COLUMN_WIDTH)}px`;
-  column.style.minWidth = "";
+function setColumnStyle(column, width, ratio, explicit, responsive) {
+  column.style.width = responsive ? formatBasisPointsAsPercentage(ratio) : `${width}px`;
+  column.style.minWidth = responsive || explicit ? "" : `${width}px`;
+  column.setAttribute("width", String(width));
 }
 function isTableColumnElement(node) {
   return isCrossRealmElement(node) && String(node.tagName).toUpperCase() === "COL";
@@ -3377,6 +3397,7 @@ function updateDynamicColumns(node, colgroup, table, ownerDocument, overrideCol,
   let totalWidth = 0;
   let nextDOM = colgroup.firstChild;
   const row = node.firstChild;
+  const columns = [];
   if (row) {
     for (let rowCellIndex = 0, col = 0; rowCellIndex < row.childCount; rowCellIndex += 1) {
       const { colspan, colwidth } = row.child(rowCellIndex).attrs;
@@ -3385,7 +3406,11 @@ function updateDynamicColumns(node, colgroup, table, ownerDocument, overrideCol,
         const width = rawWidth ? Math.max(rawWidth, MIN_RESIZED_TABLE_COLUMN_WIDTH) : null;
         totalWidth += width ?? DEFAULT_TABLE_COLUMN_WIDTH;
         const colElement = isTableColumnElement(nextDOM) ? nextDOM : colgroup.appendChild(ownerDocument.createElement("col"));
-        setColumnStyle(colElement, width);
+        columns.push({
+          element: colElement,
+          explicit: width !== null,
+          width: width ?? DEFAULT_TABLE_COLUMN_WIDTH
+        });
         nextDOM = colElement.nextSibling;
       }
     }
@@ -3395,13 +3420,39 @@ function updateDynamicColumns(node, colgroup, table, ownerDocument, overrideCol,
     nextDOM.parentNode?.removeChild(nextDOM);
     nextDOM = after;
   }
-  const hasUserWidth = typeof node.attrs.style === "string" && /\bwidth\s*:/i.test(node.attrs.style);
-  if (!hasUserWidth) {
+  const responsive = normalizeTableWidthMode(node.attrs.widthMode) === "responsive";
+  const columnRatios = getTableColumnRatios(node);
+  columns.forEach(({ element, explicit, width }, index) => {
+    setColumnStyle(element, width, columnRatios[index] ?? 1, explicit, responsive);
+  });
+  if (responsive) {
+    const widthBp = getResponsiveTableWidthBp(node);
+    const offsetBp = getResponsiveTableOffsetBp(node);
+    table.setAttribute("data-table-width-mode", "responsive");
+    table.setAttribute("data-table-width", formatBasisPointsAsPercentage(widthBp));
+    table.setAttribute("data-table-width-bp", String(widthBp));
+    table.setAttribute("data-table-offset", formatBasisPointsAsPercentage(offsetBp));
+    table.setAttribute("data-table-offset-bp", String(offsetBp));
+    table.setAttribute("data-table-column-ratios", columnRatios.join(","));
+    table.style.width = formatBasisPointsAsPercentage(widthBp);
+    table.style.marginLeft = formatBasisPointsAsPercentage(offsetBp);
+    table.style.marginRight = "auto";
+    table.style.minWidth = `${Math.max(1, colgroup.childElementCount) * MIN_RESIZED_TABLE_COLUMN_WIDTH}px`;
+  } else {
+    table.removeAttribute("data-table-width-mode");
+    table.removeAttribute("data-table-width");
+    table.removeAttribute("data-table-width-bp");
+    table.removeAttribute("data-table-offset");
+    table.removeAttribute("data-table-offset-bp");
+    table.removeAttribute("data-table-column-ratios");
     table.style.width = `${totalWidth}px`;
     table.style.minWidth = "";
-  } else {
-    table.style.minWidth = `${totalWidth}px`;
+    const tableAlign = node.attrs.textAlign;
+    table.style.marginLeft = tableAlign === "center" || tableAlign === "right" ? "auto" : "0px";
+    table.style.marginRight = tableAlign === "center" ? "auto" : tableAlign === "right" ? "0px" : "auto";
   }
+  if (node.attrs.textAlign) table.setAttribute("data-table-align", String(node.attrs.textAlign));
+  else table.removeAttribute("data-table-align");
 }
 var UEditorTableView = class {
   constructor(node, _defaultColumnWidth, maybeView) {
@@ -3437,7 +3488,40 @@ var UEditorTableView = class {
 };
 function getDraggedWidth(dragging, event) {
   const offset = event.clientX - dragging.startX;
-  return Math.max(dragging.minWidth, Math.round(dragging.startWidth + offset));
+  const maximum = dragging.neighborStartWidth === void 0 ? Number.POSITIVE_INFINITY : dragging.startWidth + dragging.neighborStartWidth - dragging.minWidth;
+  return Math.min(maximum, Math.max(dragging.minWidth, Math.round(dragging.startWidth + offset)));
+}
+function normalizeColumnWidthsToTotal(values, total, minimum) {
+  const safeTotal = Math.max(values.length * minimum, Math.round(total));
+  const weights = values.map((value) => Number.isFinite(value) && value > 0 ? value : DEFAULT_TABLE_COLUMN_WIDTH);
+  const weightSum = weights.reduce((sum, value) => sum + value, 0);
+  const widths = weights.map((value) => Math.max(minimum, Math.round(value / weightSum * safeTotal)));
+  let difference = safeTotal - widths.reduce((sum, value) => sum + value, 0);
+  while (difference !== 0) {
+    let changed = false;
+    for (let index = widths.length - 1; index >= 0 && difference !== 0; index -= 1) {
+      if (difference < 0 && widths[index] <= minimum) continue;
+      widths[index] += difference > 0 ? 1 : -1;
+      difference += difference > 0 ? -1 : 1;
+      changed = true;
+    }
+    if (!changed) break;
+  }
+  return widths;
+}
+function getResizeColumnInfo(state, cell) {
+  const $cell = state.doc.resolve(cell);
+  const table = $cell.node(-1);
+  const map = TableMap.get(table);
+  const start = $cell.start(-1);
+  const nodeAfter = $cell.nodeAfter;
+  if (!nodeAfter) return null;
+  return {
+    col: map.colCount($cell.pos - start) + nodeAfter.attrs.colspan - 1,
+    map,
+    start,
+    table
+  };
 }
 function getCurrentColWidth(view, cellPos, { colspan, colwidth }) {
   const width = colwidth?.[colwidth.length - 1];
@@ -3506,6 +3590,12 @@ function handleMouseMove(view, event, handleWidth, lastColumnResizable) {
     if (event.clientX - left <= handleWidth) cell = edgeCell(view, event, "left", handleWidth);
     else if (right - event.clientX <= handleWidth) cell = edgeCell(view, event, "right", handleWidth);
   }
+  if (cell !== -1) {
+    const info = getResizeColumnInfo(view.state, cell);
+    if (info && normalizeTableWidthMode(info.table.attrs.widthMode) === "responsive" && info.col === info.map.width - 1) {
+      cell = -1;
+    }
+  }
   if (cell === pluginState.activeHandle) {
     clearHandleHoverTimer();
     return;
@@ -3552,33 +3642,47 @@ function handleMouseLeave(view) {
     updateHandle(view, -1);
   }
 }
-function updateColumnWidth(view, cell, width) {
-  const $cell = view.state.doc.resolve(cell);
-  const table = $cell.node(-1);
-  const map = TableMap.get(table);
-  const start = $cell.start(-1);
-  const nodeAfter = $cell.nodeAfter;
-  if (!nodeAfter) return;
-  const col = map.colCount($cell.pos - start) + nodeAfter.attrs.colspan - 1;
+function updateColumnWidths(view, cell, widthsByColumn, columnRatios) {
+  const info = getResizeColumnInfo(view.state, cell);
+  if (!info) return;
+  const { map, start, table } = info;
   const tr = view.state.tr;
-  for (let row = 0; row < map.height; row += 1) {
-    const mapIndex = row * map.width + col;
-    if (row && map.map[mapIndex] === map.map[mapIndex - map.width]) continue;
-    const pos = map.map[mapIndex];
+  const seenCellPositions = /* @__PURE__ */ new Set();
+  for (const pos of map.map) {
+    if (seenCellPositions.has(pos)) continue;
+    seenCellPositions.add(pos);
     const cellNode = table.nodeAt(pos);
     if (!cellNode) continue;
     const attrs = cellNode.attrs;
-    const index = attrs.colspan === 1 ? 0 : col - map.colCount(pos);
-    if (attrs.colwidth?.[index] === width) continue;
     const colwidth = attrs.colwidth ? attrs.colwidth.slice() : Array.from({ length: attrs.colspan }, () => 0);
-    colwidth[index] = width;
+    const cellStartColumn = map.colCount(pos);
+    let changed = false;
+    for (let index = 0; index < attrs.colspan; index += 1) {
+      const width = widthsByColumn.get(cellStartColumn + index);
+      if (width === void 0 || colwidth[index] === width) continue;
+      colwidth[index] = width;
+      changed = true;
+    }
+    if (!changed) continue;
     tr.setNodeMarkup(start + pos, null, {
       ...attrs,
       colwidth
     });
   }
+  if (columnRatios) {
+    tr.setNodeMarkup(start - 1, void 0, {
+      ...table.attrs,
+      widthMode: "responsive",
+      columnRatios: normalizeColumnRatios(columnRatios, map.width)
+    });
+  }
   if (tr.docChanged) view.dispatch(tr);
 }
+function updateColumnWidth(view, cell, width) {
+  const info = getResizeColumnInfo(view.state, cell);
+  if (!info) return;
+  updateColumnWidths(view, cell, /* @__PURE__ */ new Map([[info.col, width]]));
+}
 function getActiveDragging(state) {
   const dragging = columnResizingPluginKey.getState(state)?.dragging;
   return dragging ? dragging : null;
@@ -3630,16 +3734,36 @@ function handleMouseDown(view, event, cellMinWidth) {
   if (!pluginState || pluginState.activeHandle === -1 || pluginState.dragging) return false;
   const cell = view.state.doc.nodeAt(pluginState.activeHandle);
   if (!cell) return false;
+  const resizeInfo = getResizeColumnInfo(view.state, pluginState.activeHandle);
+  if (!resizeInfo) return false;
   const attrs = cell.attrs;
-  const width = getCurrentColWidth(view, pluginState.activeHandle, {
+  let width = getCurrentColWidth(view, pluginState.activeHandle, {
     colspan: attrs.colspan ?? 1,
     colwidth: attrs.colwidth
   });
   const minWidth = getColumnResizeMinWidth(cellMinWidth);
+  let responsiveColumnWidths;
+  let neighborStartWidth;
+  if (normalizeTableWidthMode(resizeInfo.table.attrs.widthMode) === "responsive") {
+    if (resizeInfo.col >= resizeInfo.map.width - 1) return false;
+    const storedRatios = getTableColumnRatios(resizeInfo.table);
+    const legacyWidths = getLegacyTableColumnWeights(resizeInfo.table, DEFAULT_TABLE_COLUMN_WIDTH);
+    const storedTotal = legacyWidths.reduce((sum, value) => sum + value, 0);
+    const tableElement = getTableElementAtCell(view, pluginState.activeHandle);
+    const renderedWidth = tableElement?.getBoundingClientRect().width || storedTotal;
+    responsiveColumnWidths = normalizeColumnWidthsToTotal(storedRatios, renderedWidth, minWidth);
+    width = responsiveColumnWidths[resizeInfo.col];
+    neighborStartWidth = responsiveColumnWidths[resizeInfo.col + 1];
+  }
   const dragging = {
     startX: event.clientX,
     startWidth: width,
-    minWidth
+    minWidth,
+    ...responsiveColumnWidths ? {
+      columnIndex: resizeInfo.col,
+      responsiveColumnWidths,
+      neighborStartWidth
+    } : null
   };
   view.dispatch(view.state.tr.setMeta(columnResizingPluginKey, { setDragging: dragging }));
   function finish(nextEvent) {
@@ -3648,7 +3772,20 @@ function handleMouseDown(view, event, cellMinWidth) {
     const activeDragging = getActiveDragging(view.state);
     const activeHandle = columnResizingPluginKey.getState(view.state)?.activeHandle ?? -1;
     if (activeDragging && activeHandle > -1) {
-      updateColumnWidth(view, activeHandle, getDraggedWidth(activeDragging, nextEvent));
+      const nextWidth = getDraggedWidth(activeDragging, nextEvent);
+      if (activeDragging.responsiveColumnWidths && activeDragging.columnIndex !== void 0 && activeDragging.neighborStartWidth !== void 0) {
+        const nextColumnWidths = activeDragging.responsiveColumnWidths.slice();
+        nextColumnWidths[activeDragging.columnIndex] = nextWidth;
+        nextColumnWidths[activeDragging.columnIndex + 1] = activeDragging.startWidth + activeDragging.neighborStartWidth - nextWidth;
+        updateColumnWidths(
+          view,
+          activeHandle,
+          new Map(nextColumnWidths.map((columnWidth, index) => [index, columnWidth])),
+          normalizeColumnRatios(nextColumnWidths, nextColumnWidths.length)
+        );
+      } else {
+        updateColumnWidth(view, activeHandle, nextWidth);
+      }
       view.dispatch(view.state.tr.setMeta(columnResizingPluginKey, { setDragging: null }));
     }
     hideColumnResizeGhost(view);
@@ -3678,6 +3815,9 @@ function handleDecorations(state, cell, ownerDocument) {
   const nodeAfter = $cell.nodeAfter;
   if (!nodeAfter) return DecorationSet2.empty;
   const col = map.colCount($cell.pos - start) + nodeAfter.attrs.colspan - 1;
+  if (normalizeTableWidthMode(table.attrs.widthMode) === "responsive" && col === map.width - 1) {
+    return DecorationSet2.empty;
+  }
   for (let row = 0; row < map.height; row += 1) {
     const index = col + row * map.width;
     if ((col === map.width - 1 || map.map[index] !== map.map[index + 1]) && (row === 0 || map.map[index] !== map.map[index - map.width])) {
@@ -3765,7 +3905,7 @@ function parseTableAlign(element) {
   if ((marginLeft === "0px" || marginLeft === "0") && marginRight === "auto") return "left";
   return null;
 }
-function renderTableAlignStyle(tableAlign) {
+function renderFixedTableAlignStyle(tableAlign) {
   switch (tableAlign) {
     case "center":
       return "table-layout: fixed; margin-left: auto; margin-right: auto;";
@@ -3777,28 +3917,61 @@ function renderTableAlignStyle(tableAlign) {
       return "";
   }
 }
-function createUEditorColGroup(node) {
-  const columns = [];
-  let totalWidth = 0;
-  const firstRow = node.firstChild;
-  if (firstRow) {
-    for (let cellIndex = 0; cellIndex < firstRow.childCount; cellIndex += 1) {
-      const cell = firstRow.child(cellIndex);
-      const colspan = Math.max(1, Number(cell.attrs.colspan) || 1);
-      const colwidth = Array.isArray(cell.attrs.colwidth) ? cell.attrs.colwidth : [];
-      for (let spanIndex = 0; spanIndex < colspan; spanIndex += 1) {
-        const storedWidth = Number(colwidth[spanIndex]);
-        const width = Number.isFinite(storedWidth) && storedWidth > 0 ? Math.max(MIN_RESIZED_TABLE_COLUMN_WIDTH, Math.round(storedWidth)) : DEFAULT_TABLE_COLUMN_WIDTH;
-        totalWidth += width;
-        columns.push(["col", { style: `width: ${width}px; min-width: ${width}px;`, width: String(width) }]);
-      }
-    }
+function parseTableWidthMode(element) {
+  const storedMode = element.getAttribute("data-table-width-mode");
+  if (storedMode === "responsive" || storedMode === "full" || parsePercentageToBasisPoints(element.style.width) !== null) {
+    return "responsive";
   }
+  return "fixed";
+}
+function createUEditorColGroup(node, widthMode) {
+  const columnWidths = getLegacyTableColumnWeights(node, DEFAULT_TABLE_COLUMN_WIDTH).map((width) => Math.max(MIN_RESIZED_TABLE_COLUMN_WIDTH, Math.round(width)));
+  const columnRatios = getTableColumnRatios(node);
+  const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0);
+  const columns = columnWidths.map((width, index) => ["col", {
+    style: widthMode === "responsive" ? `width: ${formatBasisPointsAsPercentage(columnRatios[index])};` : `width: ${width}px; min-width: ${width}px;`,
+    width: String(width)
+  }]);
   return {
     colgroup: ["colgroup", {}, ...columns],
+    columnCount: columns.length,
     tableWidth: totalWidth > 0 ? `${totalWidth}px` : ""
   };
 }
+function runResponsiveColumnStructureCommand(state, dispatch, command, updateLayout) {
+  const tableInfo = findTableNodeInfoFromState(state);
+  if (!tableInfo || normalizeTableWidthMode(tableInfo.node.attrs.widthMode) !== "responsive") {
+    return command(state, dispatch);
+  }
+  const rect = selectedRect(state);
+  const nextLayout = updateLayout({
+    widthBp: getResponsiveTableWidthBp(tableInfo.node),
+    columnRatios: getTableColumnRatios(tableInfo.node)
+  }, rect);
+  return command(state, dispatch ? (transaction) => {
+    const nextTable = transaction.doc.nodeAt(tableInfo.pos);
+    if (nextTable?.type.name === "table" && nextLayout.columnRatios.length > 0) {
+      const widthBp = clampResponsiveTableWidthBp(nextLayout.widthBp);
+      const tableAlign = normalizeTableAlign(nextTable.attrs.textAlign);
+      const offsetBp = resolveResponsiveTableOffsetBp(
+        widthBp,
+        tableAlign,
+        getResponsiveTableOffsetBp(tableInfo.node)
+      );
+      transaction.setNodeMarkup(tableInfo.pos, void 0, {
+        ...nextTable.attrs,
+        widthMode: "responsive",
+        widthBp,
+        offsetBp,
+        columnRatios: normalizeColumnRatios(
+          nextLayout.columnRatios,
+          getLogicalTableColumnCount(nextTable)
+        )
+      });
+    }
+    dispatch(transaction);
+  } : void 0);
+}
 var UEditorTable = Table2.extend({
   addGlobalAttributes() {
     return [
@@ -3816,10 +3989,64 @@ var UEditorTable = Table2.extend({
               const tableAlign = normalizeTableAlign(attributes.textAlign);
               if (!tableAlign) return {};
               return {
-                "data-table-align": tableAlign,
-                style: renderTableAlignStyle(tableAlign)
+                "data-table-align": tableAlign
+              };
+            }
+          },
+          widthMode: {
+            default: "fixed",
+            parseHTML: (element) => {
+              if (!(element instanceof HTMLElement)) return "fixed";
+              return parseTableWidthMode(element);
+            },
+            renderHTML: (attributes) => {
+              if (normalizeTableWidthMode(attributes.widthMode) !== "responsive") return {};
+              return {
+                "data-table-width-mode": "responsive"
               };
             }
+          },
+          widthBp: {
+            default: null,
+            parseHTML: (element) => {
+              if (!(element instanceof HTMLElement) || parseTableWidthMode(element) !== "responsive") return null;
+              const stored = Number(element.getAttribute("data-table-width-bp"));
+              if (Number.isFinite(stored) && stored > 0) return clampResponsiveTableWidthBp(stored);
+              return parsePercentageToBasisPoints(element.getAttribute("data-table-width") ?? element.style.width) ?? DEFAULT_RESPONSIVE_TABLE_WIDTH_BP;
+            },
+            renderHTML: () => ({})
+          },
+          offsetBp: {
+            default: null,
+            parseHTML: (element) => {
+              if (!(element instanceof HTMLElement) || parseTableWidthMode(element) !== "responsive") return null;
+              const storedValue = element.getAttribute("data-table-offset-bp");
+              const stored = Number(storedValue);
+              if (storedValue !== null && Number.isFinite(stored) && stored >= 0) return Math.round(stored);
+              const explicitOffset = parsePercentageToBasisPoints(
+                element.getAttribute("data-table-offset") ?? element.style.marginLeft
+              );
+              if (explicitOffset !== null) return explicitOffset;
+              const widthBp = parsePercentageToBasisPoints(
+                element.getAttribute("data-table-width") ?? element.style.width
+              ) ?? DEFAULT_RESPONSIVE_TABLE_WIDTH_BP;
+              const tableAlign = parseTableAlign(element);
+              return resolveResponsiveTableOffsetBp(widthBp, tableAlign);
+            },
+            renderHTML: () => ({})
+          },
+          columnRatios: {
+            default: null,
+            parseHTML: (element) => {
+              if (!(element instanceof HTMLElement)) return null;
+              const storedRatios = parseColumnRatios(
+                element.getAttribute("data-table-column-ratios") ?? element.getAttribute("data-column-ratios")
+              );
+              if (storedRatios) return storedRatios;
+              const columnPercentages = Array.from(element.querySelectorAll("colgroup > col")).map((column) => parsePercentageToBasisPoints(column.style.width));
+              return columnPercentages.length > 0 && columnPercentages.every((ratio) => ratio !== null) ? normalizeColumnRatios(columnPercentages, columnPercentages.length) : null;
+            },
+            renderHTML: () => ({})
           }
         }
       }
@@ -3828,13 +4055,86 @@ var UEditorTable = Table2.extend({
   addCommands() {
     return {
       ...this.parent?.(),
+      insertTable: ({ rows = 3, cols = 3, withHeaderRow = true } = {}) => ({ tr, dispatch, editor }) => {
+        const types = tableNodeTypes2(editor.schema);
+        const rowCount = Math.max(1, Math.floor(rows));
+        const columnCount = Math.max(1, Math.floor(cols));
+        const createCells = (type) => Array.from({ length: columnCount }, () => type.createAndFill()).filter((cell) => cell !== null);
+        const bodyCells = createCells(types.cell);
+        const headerCells = withHeaderRow ? createCells(types.header_cell) : bodyCells;
+        const tableRows = Array.from({ length: rowCount }, (_, index) => types.row.createChecked(
+          null,
+          withHeaderRow && index === 0 ? headerCells : bodyCells
+        ));
+        const table = types.table.createChecked(
+          {
+            widthMode: "responsive",
+            widthBp: DEFAULT_RESPONSIVE_TABLE_WIDTH_BP,
+            offsetBp: 0,
+            columnRatios: normalizeColumnRatios(null, columnCount)
+          },
+          tableRows
+        );
+        if (dispatch) {
+          const offset = tr.selection.from + 1;
+          tr.replaceSelectionWith(table).scrollIntoView().setSelection(TextSelection.near(tr.doc.resolve(offset)));
+        }
+        return true;
+      },
+      addColumnBefore: () => ({ state, dispatch }) => {
+        return runResponsiveColumnStructureCommand(
+          state,
+          dispatch,
+          addColumnBeforeCommand,
+          (layout, rect) => insertResponsiveColumnLayout(
+            layout.widthBp,
+            layout.columnRatios,
+            rect.left,
+            rect.left
+          )
+        );
+      },
+      addColumnAfter: () => ({ state, dispatch }) => {
+        return runResponsiveColumnStructureCommand(
+          state,
+          dispatch,
+          addColumnAfterCommand,
+          (layout, rect) => insertResponsiveColumnLayout(
+            layout.widthBp,
+            layout.columnRatios,
+            rect.right,
+            rect.right - 1
+          )
+        );
+      },
+      deleteColumn: () => ({ state, dispatch }) => {
+        return runResponsiveColumnStructureCommand(
+          state,
+          dispatch,
+          deleteColumnCommand,
+          (layout, rect) => {
+            let nextLayout = layout;
+            for (let index = rect.right - 1; index >= rect.left; index -= 1) {
+              nextLayout = deleteResponsiveColumnLayout(
+                nextLayout.widthBp,
+                nextLayout.columnRatios,
+                index
+              );
+            }
+            return nextLayout;
+          }
+        );
+      },
       setTableAlign: (tableAlign) => ({ state, dispatch }) => {
         const tableInfo = findTableNodeInfoFromState(state);
         if (!tableInfo) return false;
+        const widthBp = getResponsiveTableWidthBp(tableInfo.node);
+        const offsetBp = resolveResponsiveTableOffsetBp(widthBp, tableAlign);
         dispatch?.(
           state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
             ...tableInfo.node.attrs,
-            textAlign: tableAlign
+            textAlign: tableAlign,
+            ...normalizeTableWidthMode(tableInfo.node.attrs.widthMode) === "responsive" ? { offsetBp } : null
           })
         );
         return true;
@@ -3853,11 +4153,31 @@ var UEditorTable = Table2.extend({
     };
   },
   renderHTML({ node, HTMLAttributes }) {
-    const { colgroup, tableWidth } = createUEditorColGroup(node);
+    const widthMode = normalizeTableWidthMode(node.attrs.widthMode);
+    const { colgroup, columnCount, tableWidth } = createUEditorColGroup(node, widthMode);
+    const tableAlign = normalizeTableAlign(node.attrs.textAlign);
+    const widthBp = getResponsiveTableWidthBp(node);
+    const offsetBp = getResponsiveTableOffsetBp(node);
+    const columnRatios = getTableColumnRatios(node);
+    const tableStyle = widthMode === "responsive" ? [
+      `width: ${formatBasisPointsAsPercentage(widthBp)}`,
+      `margin-left: ${formatBasisPointsAsPercentage(offsetBp)}`,
+      "margin-right: auto",
+      `min-width: ${Math.max(1, columnCount) * MIN_RESIZED_TABLE_COLUMN_WIDTH}px`,
+      "table-layout: fixed"
+    ].join("; ") + ";" : tableWidth ? `width: ${tableWidth}; ${renderFixedTableAlignStyle(tableAlign)}` : `table-layout: fixed; ${renderFixedTableAlignStyle(tableAlign)}`;
     const table = [
       "table",
       mergeAttributes7(this.options.HTMLAttributes, HTMLAttributes, {
-        style: tableWidth ? `width: ${tableWidth};` : "table-layout: fixed;"
+        ...widthMode === "responsive" ? {
+          "data-table-width-mode": "responsive",
+          "data-table-width": formatBasisPointsAsPercentage(widthBp),
+          "data-table-width-bp": String(widthBp),
+          "data-table-offset": formatBasisPointsAsPercentage(offsetBp),
+          "data-table-offset-bp": String(offsetBp),
+          "data-table-column-ratios": columnRatios.join(",")
+        } : null,
+        style: tableStyle
       }),
       colgroup,
       ["tbody", 0]
@@ -3910,6 +4230,31 @@ var UEditorTable = Table2.extend({
       tableEditing({
         allowTableNodeSelection: this.options.allowTableNodeSelection
       }),
+      new Plugin4({
+        key: new PluginKey5("responsiveTableLayoutNormalizer"),
+        appendTransaction(transactions, _oldState, newState) {
+          if (!transactions.some((transaction) => transaction.docChanged)) return null;
+          const tableInfo = findTableNodeInfoFromState(newState);
+          const node = tableInfo?.node;
+          if (!tableInfo || !node || normalizeTableWidthMode(node.attrs.widthMode) !== "responsive") return null;
+          const columnCount = getLogicalTableColumnCount(node);
+          const columnRatios = getTableColumnRatios(node);
+          const widthBp = getResponsiveTableWidthBp(node);
+          const offsetBp = getResponsiveTableOffsetBp(node);
+          const storedRatios = parseColumnRatios(node.attrs.columnRatios);
+          const ratiosMatch = storedRatios?.length === columnCount && storedRatios.every((ratio, index) => Math.round(ratio) === columnRatios[index]);
+          if (ratiosMatch && node.attrs.widthBp === widthBp && node.attrs.offsetBp === offsetBp && node.attrs.widthMode === "responsive") {
+            return null;
+          }
+          return newState.tr.setNodeMarkup(tableInfo.pos, void 0, {
+            ...node.attrs,
+            widthMode: "responsive",
+            widthBp,
+            offsetBp,
+            columnRatios
+          });
+        }
+      }),
       new Plugin4({
         appendTransaction(_transactions, _oldState, newState) {
           const { doc, schema } = newState;
@@ -4237,8 +4582,8 @@ import { Extension as Extension10 } from "@tiptap/core";
 import { Plugin as Plugin6 } from "@tiptap/pm/state";
 
 // src/components/UEditor/table-formula-commands.ts
-import { TextSelection } from "@tiptap/pm/state";
-import { selectedRect, setCellAttr, TableMap as TableMap2 } from "@tiptap/pm/tables";
+import { TextSelection as TextSelection2 } from "@tiptap/pm/state";
+import { selectedRect as selectedRect2, setCellAttr, TableMap as TableMap2 } from "@tiptap/pm/tables";
 
 // src/components/UEditor/table-formula.ts
 var CELL_ADDRESS_RE = /^([A-Z]+)([1-9]\d*)$/i;
@@ -4891,7 +5236,7 @@ function restoreSelectionAtTableCell(editor, anchor) {
   if (!cellNode || cellNode.type.name !== "tableCell" && cellNode.type.name !== "tableHeader") return false;
   const selectionPos = Math.min(cellPos + 2, editor.state.doc.content.size);
   editor.view.dispatch(
-    editor.state.tr.setSelection(TextSelection.near(editor.state.doc.resolve(selectionPos))).setMeta("addToHistory", false)
+    editor.state.tr.setSelection(TextSelection2.near(editor.state.doc.resolve(selectionPos))).setMeta("addToHistory", false)
   );
   return true;
 }
@@ -5021,7 +5366,7 @@ function removeSelectedTableCellFormula(editor, clearContent) {
   );
   let transaction = editor.state.tr.replaceWith(selectedCell.cellPos, selectedCell.cellPos + selectedCell.node.nodeSize, nextCell2).setMeta(UEDITOR_TABLE_FORMULA_RECALCULATE_META, true);
   const selectionPos = Math.min(selectedCell.cellPos + 2, transaction.doc.content.size);
-  transaction = transaction.setSelection(TextSelection.near(transaction.doc.resolve(selectionPos)));
+  transaction = transaction.setSelection(TextSelection2.near(transaction.doc.resolve(selectionPos)));
   editor.view.dispatch(transaction);
   recalculateActiveTableFormulas(editor);
   restoreSelectionAtTableCell(editor, selectedCell);
@@ -5221,7 +5566,7 @@ function createActiveTableFormulaRecalculationTransaction(state, options) {
   return applyTableCellReplacements(state.tr, replacements).setMeta(UEDITOR_TABLE_FORMULA_RECALCULATE_META, true);
 }
 function recalculateSelectedTable(editor) {
-  const rect = selectedRect(editor.state);
+  const rect = selectedRect2(editor.state);
   const tableNode = rect.table;
   return dispatchTableCellReplacements(
     editor,
@@ -5819,7 +6164,7 @@ import {
 } from "lucide-react";
 
 // src/components/UEditor/table-border-commands.ts
-import { selectedRect as selectedRect2 } from "@tiptap/pm/tables";
+import { selectedRect as selectedRect3 } from "@tiptap/pm/tables";
 var SIDES = ["top", "right", "bottom", "left"];
 var OPPOSITE_SIDE = {
   top: "bottom",
@@ -5890,7 +6235,7 @@ function getAppliedSides(position, cell, selection) {
 }
 function applyTableCellBorders(editor, position, format, options = {}) {
   const { state, view } = editor;
-  const selection = selectedRect2(state);
+  const selection = selectedRect3(state);
   const transaction = state.tr;
   const cellPositions = new Set(selection.map.cellsInRect(selection));
   const sidesByCell = /* @__PURE__ */ new Map();
@@ -10008,7 +10353,7 @@ var Selection = class {
   found.
   */
   static findFrom($pos, dir, textOnly = false) {
-    let inner = $pos.parent.inlineContent ? new TextSelection2($pos) : findSelectionIn($pos.node(0), $pos.parent, $pos.pos, $pos.index(), dir, textOnly);
+    let inner = $pos.parent.inlineContent ? new TextSelection3($pos) : findSelectionIn($pos.node(0), $pos.parent, $pos.pos, $pos.index(), dir, textOnly);
     if (inner)
       return inner;
     for (let depth = $pos.depth - 1; depth >= 0; depth--) {
@@ -10077,7 +10422,7 @@ var Selection = class {
   returns the bookmark for that.
   */
   getBookmark() {
-    return TextSelection2.between(this.$anchor, this.$head).getBookmark();
+    return TextSelection3.between(this.$anchor, this.$head).getBookmark();
   }
 };
 Selection.prototype.visible = true;
@@ -10097,7 +10442,7 @@ function checkTextSelection($pos) {
     console["warn"]("TextSelection endpoint not pointing into a node with inline content (" + $pos.parent.type.name + ")");
   }
 }
-var TextSelection2 = class _TextSelection extends Selection {
+var TextSelection3 = class _TextSelection extends Selection {
   /**
   Construct a text selection between the given points.
   */
@@ -10183,7 +10528,7 @@ var TextSelection2 = class _TextSelection extends Selection {
     return new _TextSelection($anchor, $head);
   }
 };
-Selection.jsonID("text", TextSelection2);
+Selection.jsonID("text", TextSelection3);
 var TextBookmark = class _TextBookmark {
   constructor(anchor, head) {
     this.anchor = anchor;
@@ -10193,7 +10538,7 @@ var TextBookmark = class _TextBookmark {
     return new _TextBookmark(mapping.map(this.anchor), mapping.map(this.head));
   }
   resolve(doc) {
-    return TextSelection2.between(doc.resolve(this.anchor), doc.resolve(this.head));
+    return TextSelection3.between(doc.resolve(this.anchor), doc.resolve(this.head));
   }
 };
 var NodeSelection = class _NodeSelection extends Selection {
@@ -10312,7 +10657,7 @@ var AllBookmark = {
 };
 function findSelectionIn(doc, node, pos, index, dir, text = false) {
   if (node.inlineContent)
-    return TextSelection2.create(doc, pos);
+    return TextSelection3.create(doc, pos);
   for (let i = index - (dir > 0 ? 0 : 1); dir > 0 ? i < node.childCount : i >= 0; i += dir) {
     let child = node.child(i);
     if (!child.isAtom) {
@@ -10812,7 +11157,7 @@ function freshColWidth(attrs) {
   for (let i = 0; i < attrs.colspan; i++) result.push(0);
   return result;
 }
-function tableNodeTypes2(schema) {
+function tableNodeTypes3(schema) {
   let result = schema.cached.tableNodeTypes;
   if (!result) {
     result = schema.cached.tableNodeTypes = {};
@@ -10904,7 +11249,7 @@ var CellSelection2 = class CellSelection3 extends Selection {
       else if (tableChanged && this.isColSelection()) return CellSelection3.colSelection($anchorCell, $headCell);
       else return new CellSelection3($anchorCell, $headCell);
     }
-    return TextSelection2.between($anchorCell, $headCell);
+    return TextSelection3.between($anchorCell, $headCell);
   }
   content() {
     const table = this.$anchorCell.node(-1);
@@ -11329,7 +11674,7 @@ function moveTableRow$1(table, indexesOrigin, indexesTarget, direction) {
   rows = moveRowInArrayOfRows(rows, indexesOrigin, indexesTarget, direction);
   return convertArrayOfRowsToTableNode(table, rows);
 }
-function selectedRect3(state) {
+function selectedRect4(state) {
   const sel = state.selection;
   const $pos = selectionCell(state);
   const table = $pos.node(-1);
@@ -11346,8 +11691,8 @@ function deprecated_toggleHeader(type) {
   return function(state, dispatch) {
     if (!isInTable2(state)) return false;
     if (dispatch) {
-      const types = tableNodeTypes2(state.schema);
-      const rect = selectedRect3(state), tr = state.tr;
+      const types = tableNodeTypes3(state.schema);
+      const rect = selectedRect4(state), tr = state.tr;
       const cells = rect.map.cellsInRect(type == "column" ? {
         left: rect.left,
         top: 0,
@@ -11386,8 +11731,8 @@ function toggleHeader(type, options) {
   return function(state, dispatch) {
     if (!isInTable2(state)) return false;
     if (dispatch) {
-      const types = tableNodeTypes2(state.schema);
-      const rect = selectedRect3(state), tr = state.tr;
+      const types = tableNodeTypes3(state.schema);
+      const rect = selectedRect4(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;
@@ -11421,7 +11766,7 @@ function deleteCellSelection(state, dispatch) {
   if (!(sel instanceof CellSelection2)) return false;
   if (dispatch) {
     const tr = state.tr;
-    const baseContent = tableNodeTypes2(state.schema).cell.createAndFill().content;
+    const baseContent = tableNodeTypes3(state.schema).cell.createAndFill().content;
     sel.forEachCell((cell, pos) => {
       if (!cell.content.eq(baseContent)) tr.replace(tr.mapping.map(pos + 1), tr.mapping.map(pos + cell.nodeSize - 1), new Slice(baseContent, 0, 0));
     });
@@ -11519,7 +11864,7 @@ function shiftArrow(axis, dir) {
   };
 }
 function atEndOfCell(view, axis, dir) {
-  if (!(view.state.selection instanceof TextSelection2)) return null;
+  if (!(view.state.selection instanceof TextSelection3)) return null;
   const { $head } = view.state.selection;
   for (let d = $head.depth - 1; d >= 0; d--) {
     const parent = $head.node(d);
@@ -11656,7 +12001,7 @@ function buildLogicalColumnMetrics({
       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 cellStart = cellRect.width > 0 ? cellRect.left - surfaceRect.left - surface.clientLeft + surface.scrollLeft : tableLeft + cellMapRect.left * fallbackWidth;
       const size = metricOrFallback(cellRect.width, fallbackWidth * Math.max(1, cellMapRect.right - cellMapRect.left));
       visualColumns.push({
         index: cellMapRect.left,
@@ -11711,7 +12056,7 @@ function buildLogicalRowMetrics({
     const tableCell = isTableCellElement(cellCandidate) ? cellCandidate : null;
     if (tableCell) {
       const cellRect = tableCell.getBoundingClientRect();
-      const start = cellRect.height > 0 ? cellRect.top - surfaceRect.top + surface.scrollTop : tableTop + cellMapRect.top * fallbackHeight;
+      const start = cellRect.height > 0 ? cellRect.top - surfaceRect.top - surface.clientTop + surface.scrollTop : tableTop + cellMapRect.top * fallbackHeight;
       const size = metricOrFallback(cellRect.height, fallbackHeight * Math.max(1, cellMapRect.bottom - cellMapRect.top));
       visualRows.push({
         index: cellMapRect.top,
@@ -11728,7 +12073,7 @@ function buildLogicalRowMetrics({
   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 start = rowRect.height > 0 ? rowRect.top - surfaceRect.top - surface.clientTop + surface.scrollTop : tableTop + index * fallbackHeight;
     const size = metricOrFallback(rowRect.height, fallbackHeight);
     return {
       index,
@@ -11770,6 +12115,8 @@ function buildTableControlLayout(editor, surface, cell) {
   }
   const map = TableMap3.get(tableInfo.node);
   const surfaceRect = surface.getBoundingClientRect();
+  const surfaceOriginLeft = surfaceRect.left + surface.clientLeft;
+  const surfaceOriginTop = surfaceRect.top + surface.clientTop;
   const tableRect = table.getBoundingClientRect();
   const explicitColumnWidths = Array.from(table.querySelectorAll("colgroup > col")).slice(0, map.width).map((column) => parsePixelMetric(column.style.width));
   const explicitTableWidth = parsePixelMetric(table.style.width) ?? (explicitColumnWidths.length === map.width && explicitColumnWidths.every((width) => width !== null) ? explicitColumnWidths.reduce((sum, width) => sum + width, 0) : null);
@@ -11778,14 +12125,14 @@ function buildTableControlLayout(editor, surface, cell) {
   const wrapperElement = table.closest(".tableWrapper");
   const wrapper = isHTMLElement(wrapperElement) ? wrapperElement : null;
   const wrapperRect = wrapper?.getBoundingClientRect() ?? tableRect;
-  const tableLeft = tableRect.left - surfaceRect.left + surface.scrollLeft;
-  const tableTop = tableRect.top - surfaceRect.top + surface.scrollTop;
+  const tableLeft = tableRect.left - surfaceOriginLeft + surface.scrollLeft;
+  const tableTop = tableRect.top - surfaceOriginTop + surface.scrollTop;
   const tableWidth = metricOrFallback(tableRect.width, explicitTableWidth ?? FALLBACK_TABLE_COLUMN_WIDTH * map.width);
   const tableHeight = metricOrFallback(tableRect.height, explicitTableHeight ?? FALLBACK_TABLE_ROW_HEIGHT * rows.length);
   const avgRowHeight = metricOrFallback(tableHeight / rows.length, FALLBACK_TABLE_ROW_HEIGHT);
   const avgColumnWidth = metricOrFallback(tableWidth / map.width, FALLBACK_TABLE_COLUMN_WIDTH);
-  const wrapperLeft = wrapperRect.left - surfaceRect.left + surface.scrollLeft;
-  const wrapperTop = wrapperRect.top - surfaceRect.top + surface.scrollTop;
+  const wrapperLeft = wrapperRect.left - surfaceOriginLeft + surface.scrollLeft;
+  const wrapperTop = wrapperRect.top - surfaceOriginTop + surface.scrollTop;
   const wrapperWidth = metricOrFallback(wrapperRect.width, tableWidth);
   const wrapperHeight = metricOrFallback(wrapperRect.height, tableHeight);
   const viewportWidth = metricOrFallback(wrapper?.clientWidth ?? wrapperRect.width, tableWidth);
@@ -11834,7 +12181,8 @@ function buildTableControlLayout(editor, surface, cell) {
     avgRowHeight,
     avgColumnWidth,
     rowHandles,
-    columnHandles
+    columnHandles,
+    widthMode: normalizeTableWidthMode(tableInfo.node.attrs.widthMode)
   };
 }
 
@@ -11867,8 +12215,8 @@ function buildTableHoverState({
     return DEFAULT_TABLE_HOVER_STATE;
   }
   const surfaceRect = surface.getBoundingClientRect();
-  const relativeX = event.clientX - surfaceRect.left + surface.scrollLeft;
-  const relativeY = event.clientY - surfaceRect.top + surface.scrollTop;
+  const relativeX = event.clientX - surfaceRect.left - surface.clientLeft + surface.scrollLeft;
+  const relativeY = event.clientY - surfaceRect.top - surface.clientTop + surface.scrollTop;
   const targetElement = resolveEventElement(event.target);
   const directRowHandle = targetElement?.closest?.("[data-row-handle-index]");
   const directColumnHandle = targetElement?.closest?.("[data-column-handle-index]");
@@ -12315,7 +12663,7 @@ function TableColumnHandles({
 
 // src/components/UEditor/table-resize-handles.tsx
 import { MoveDiagonal2 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var HANDLE_BASE_CLASS = cn(
   "pointer-events-auto absolute z-10 inline-flex touch-none items-center justify-center rounded-md",
   "bg-background/95 text-primary shadow-sm backdrop-blur-sm",
@@ -12323,11 +12671,17 @@ var HANDLE_BASE_CLASS = cn(
   "hover:bg-primary hover:text-primary-foreground hover:shadow-md active:scale-95",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 );
+var EDGE_HANDLE_CLASS = cn(
+  "pointer-events-auto absolute top-0 z-10 h-full w-2 touch-none cursor-col-resize bg-transparent p-0",
+  "border-transparent transition-colors duration-150 hover:border-primary",
+  "focus-visible:border-primary focus-visible:outline-none"
+);
 function TableResizeHandles({
   active,
   ctrlHint,
   frameRef,
   layout,
+  onFitWidth,
   onStartResize,
   resizeBothLabel
 }) {
@@ -12348,6 +12702,36 @@ function TableResizeHandles({
         height: layout.tableHeight
       },
       children: [
+        layout.widthMode === "responsive" ? /* @__PURE__ */ jsxs14(Fragment6, { children: [
+          /* @__PURE__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${resizeBothLabel} \u2014 \u2190`,
+              title: resizeBothLabel,
+              "data-table-resize-handle": "left",
+              className: cn(
+                EDGE_HANDLE_CLASS,
+                "left-0 border-l-2"
+              ),
+              onPointerDown: (event) => onStartResize(event, "left")
+            }
+          ),
+          /* @__PURE__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${resizeBothLabel} \u2014 \u2192`,
+              title: resizeBothLabel,
+              "data-table-resize-handle": "right",
+              className: cn(
+                EDGE_HANDLE_CLASS,
+                "right-0 border-r-2"
+              ),
+              onPointerDown: (event) => onStartResize(event, "right")
+            }
+          )
+        ] }) : null,
         /* @__PURE__ */ jsx17(
           "button",
           {
@@ -12360,7 +12744,8 @@ function TableResizeHandles({
               "bottom-[-28px] right-[-30px] h-6 w-6 cursor-nwse-resize",
               active && "bg-primary text-primary-foreground shadow-md"
             ),
-            onPointerDown: onStartResize,
+            onDoubleClick: onFitWidth,
+            onPointerDown: (event) => onStartResize(event, "both"),
             children: /* @__PURE__ */ jsx17(MoveDiagonal2, { "aria-hidden": "true", className: "h-3.5 w-3.5", strokeWidth: 2.25 })
           }
         ),
@@ -12422,7 +12807,7 @@ function getLogicalRowHeights(table, fallback) {
   });
   return heights;
 }
-function createTableSizeSnapshot(editor, anchorPos, startWidth, startHeight) {
+function createTableSizeSnapshot(editor, anchorPos, startWidth, startHeight, containerWidth = startWidth) {
   const tableInfo = findTableInfo(editor, anchorPos);
   if (!tableInfo) return null;
   const tableMap = TableMap3.get(tableInfo.node);
@@ -12431,13 +12816,16 @@ function createTableSizeSnapshot(editor, anchorPos, startWidth, startHeight) {
   const safeHeight = Math.max(tableMap.height * MIN_TABLE_ROW_HEIGHT, Math.round(startHeight));
   const fallbackColumnWidth = safeWidth / tableMap.width;
   const fallbackRowHeight = safeHeight / tableMap.height;
+  const widthMode = normalizeTableWidthMode(tableInfo.node.attrs.widthMode);
+  const safeContainerWidth = Math.max(1, Math.round(containerWidth));
+  const columnWeights = widthMode === "responsive" ? getTableColumnRatios(tableInfo.node) : getLogicalColumnWidths(tableInfo.node, tableMap, fallbackColumnWidth);
   return {
     anchorPos,
     tablePos: tableInfo.pos,
     startWidth: safeWidth,
     startHeight: safeHeight,
     columnWidths: normalizeWeightsToTotal(
-      getLogicalColumnWidths(tableInfo.node, tableMap, fallbackColumnWidth),
+      columnWeights,
       safeWidth,
       MIN_RESIZED_TABLE_COLUMN_WIDTH
     ),
@@ -12447,7 +12835,12 @@ function createTableSizeSnapshot(editor, anchorPos, startWidth, startHeight) {
       MIN_TABLE_ROW_HEIGHT
     ),
     minWidth: tableMap.width * MIN_RESIZED_TABLE_COLUMN_WIDTH,
-    minHeight: tableMap.height * MIN_TABLE_ROW_HEIGHT
+    minHeight: tableMap.height * MIN_TABLE_ROW_HEIGHT,
+    containerWidth: safeContainerWidth,
+    widthMode,
+    widthBp: getResponsiveTableWidthBp(tableInfo.node),
+    offsetBp: getResponsiveTableOffsetBp(tableInfo.node),
+    columnRatios: getTableColumnRatios(tableInfo.node)
   };
 }
 function resolveTableResizeDimensions({
@@ -12455,12 +12848,14 @@ function resolveTableResizeDimensions({
   deltaY,
   lockAxis,
   preserveRatio,
+  edge = "both",
   snapshot
 }) {
-  let width = snapshot.startWidth + deltaX;
-  let height = snapshot.startHeight + deltaY;
+  const horizontalDelta = edge === "left" ? -deltaX : deltaX;
+  let width = snapshot.startWidth + horizontalDelta;
+  let height = edge === "both" ? snapshot.startHeight + deltaY : snapshot.startHeight;
   if (preserveRatio) {
-    const horizontalDrag = Math.abs(deltaX) >= Math.abs(deltaY);
+    const horizontalDrag = edge !== "both" || Math.abs(deltaX) >= Math.abs(deltaY);
     const scale = horizontalDrag ? width / snapshot.startWidth : height / snapshot.startHeight;
     const minScale = Math.max(
       snapshot.minWidth / snapshot.startWidth,
@@ -12473,22 +12868,56 @@ function resolveTableResizeDimensions({
     const safeScale = Math.min(Math.max(scale, minScale), maxScale);
     width = snapshot.startWidth * safeScale;
     height = snapshot.startHeight * safeScale;
-  } else if (lockAxis) {
+  } else if (lockAxis && edge === "both") {
     if (Math.abs(deltaX) >= Math.abs(deltaY)) {
       height = snapshot.startHeight;
     } else {
       width = snapshot.startWidth;
     }
   }
+  let nextWidth = Math.min(MAX_TABLE_DIMENSION, Math.max(snapshot.minWidth, Math.round(width)));
+  const nextHeight = Math.min(MAX_TABLE_DIMENSION, Math.max(snapshot.minHeight, Math.round(height)));
+  if (snapshot.widthMode !== "responsive") {
+    return { width: nextWidth, height: nextHeight };
+  }
+  const containerWidth = Math.max(1, snapshot.containerWidth);
+  const startOffset = snapshot.offsetBp / TABLE_WIDTH_BASIS_POINTS * containerWidth;
+  let nextOffset = startOffset;
+  if (edge === "left") {
+    const fixedRightEdge = startOffset + snapshot.startWidth;
+    nextOffset = Math.min(
+      fixedRightEdge - snapshot.minWidth,
+      Math.max(0, startOffset + deltaX)
+    );
+    nextWidth = fixedRightEdge - nextOffset;
+  }
+  const widthBp = clampResponsiveTableWidthBp(
+    nextWidth / containerWidth * TABLE_WIDTH_BASIS_POINTS
+  );
+  const offsetBp = resolveResponsiveTableOffsetBp(
+    widthBp,
+    null,
+    nextOffset / containerWidth * TABLE_WIDTH_BASIS_POINTS
+  );
   return {
-    width: Math.min(MAX_TABLE_DIMENSION, Math.max(snapshot.minWidth, Math.round(width))),
-    height: Math.min(MAX_TABLE_DIMENSION, Math.max(snapshot.minHeight, Math.round(height)))
+    width: Math.round(widthBp / TABLE_WIDTH_BASIS_POINTS * containerWidth),
+    height: nextHeight,
+    widthBp,
+    offsetBp,
+    leftDelta: nextOffset - startOffset
   };
 }
 function arraysEqual(left, right) {
   return Array.isArray(left) && left.length === right.length && left.every((value, index) => value === right[index]);
 }
-function applyTableSize(editor, snapshot, dimensions) {
+function getResponsiveResizeAlignment(widthBp, offsetBp) {
+  const gap = Math.max(0, TABLE_WIDTH_BASIS_POINTS - widthBp);
+  if (offsetBp === 0) return "left";
+  if (offsetBp === gap) return "right";
+  if (Math.abs(offsetBp * 2 - gap) <= 1) return "center";
+  return null;
+}
+function applyTableSize(editor, snapshot, dimensions, options = {}) {
   const table = editor.state.doc.nodeAt(snapshot.tablePos);
   if (!table || table.type.name !== "table") return false;
   const tableMap = TableMap3.get(table);
@@ -12497,9 +12926,32 @@ function applyTableSize(editor, snapshot, dimensions) {
   }
   const resizeWidth = dimensions.width !== snapshot.startWidth;
   const resizeHeight = dimensions.height !== snapshot.startHeight;
-  if (!resizeWidth && !resizeHeight) return false;
+  const widthMode = options.widthMode ?? snapshot.widthMode;
+  const widthModeChanged = normalizeTableWidthMode(table.attrs.widthMode) !== widthMode || widthMode === "responsive" && table.attrs.widthMode !== "responsive";
+  const widthBp = dimensions.widthBp ?? clampResponsiveTableWidthBp(
+    dimensions.width / Math.max(1, snapshot.containerWidth) * TABLE_WIDTH_BASIS_POINTS
+  );
+  const offsetBp = resolveResponsiveTableOffsetBp(
+    widthBp,
+    null,
+    dimensions.offsetBp ?? snapshot.offsetBp
+  );
+  const responsiveLayoutChanged = widthMode === "responsive" && (table.attrs.widthBp !== widthBp || table.attrs.offsetBp !== offsetBp);
+  if (!resizeWidth && !resizeHeight && !widthModeChanged && !responsiveLayoutChanged) return false;
   const tableStart = snapshot.tablePos + 1;
   const transaction = editor.state.tr;
+  if (widthModeChanged || responsiveLayoutChanged) {
+    transaction.setNodeMarkup(snapshot.tablePos, void 0, {
+      ...table.attrs,
+      widthMode,
+      ...widthMode === "responsive" ? {
+        widthBp,
+        offsetBp,
+        columnRatios: normalizeColumnRatios(snapshot.columnRatios, tableMap.width),
+        textAlign: getResponsiveResizeAlignment(widthBp, offsetBp)
+      } : null
+    });
+  }
   if (resizeWidth) {
     const nextColumnWidths = normalizeWeightsToTotal(
       snapshot.columnWidths,
@@ -12542,7 +12994,7 @@ function applyTableSize(editor, snapshot, dimensions) {
 }
 
 // src/components/UEditor/table-controls.tsx
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var TABLE_MENU_TOP_OFFSET = 10;
 var AXIS_HANDLE_RADIUS = 12;
 function nearestIndex(centers, position) {
@@ -12651,6 +13103,10 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     if (!frame) return;
     frame.style.width = `${dimensions.width}px`;
     frame.style.height = `${dimensions.height}px`;
+    const activeLayout = layoutRef.current;
+    if (activeLayout) {
+      frame.style.left = `${activeLayout.tableLeft + (dimensions.leftDelta ?? 0)}px`;
+    }
     const dimensionsLabel = frame.querySelector("[data-table-resize-dimensions]");
     if (dimensionsLabel) {
       dimensionsLabel.textContent = `${dimensions.width} \xD7 ${dimensions.height}`;
@@ -12661,7 +13117,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     if (!activeLayout) return;
     updateTableResizePreview({
       width: Math.round(activeLayout.tableWidth),
-      height: Math.round(activeLayout.tableHeight)
+      height: Math.round(activeLayout.tableHeight),
+      leftDelta: 0
     });
   }, [updateTableResizePreview]);
   const clearDrag = React10.useCallback(() => {
@@ -12766,6 +13223,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     surface.addEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, scheduleCurrentLayoutRefresh);
     if (!editorWindow) return void 0;
     const unsubscribeResize = subscribeSharedGlobalEvent(editorWindow, "resize", scheduleCurrentLayoutRefresh);
+    const unsubscribeWindowScroll = subscribeSharedGlobalEvent(editorWindow, "scroll", scheduleCurrentLayoutRefresh, { passive: true });
     editor.on("selectionUpdate", scheduleSyncFromSelection);
     editor.on("update", scheduleCurrentLayoutRefresh);
     syncFromSelection();
@@ -12781,6 +13239,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       surface.removeEventListener("scroll", scheduleCurrentLayoutRefresh, scrollListenerOptions);
       surface.removeEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, scheduleCurrentLayoutRefresh);
       unsubscribeResize();
+      unsubscribeWindowScroll();
       editor.off("selectionUpdate", scheduleSyncFromSelection);
       editor.off("update", scheduleCurrentLayoutRefresh);
     };
@@ -12824,7 +13283,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
   const canExpandTable = Boolean(layout);
   const controlsVisible = false;
   const tableMenuOpen = openMenuKey === "table";
-  const startTableResize = React10.useCallback((event) => {
+  const startTableResize = React10.useCallback((event, edge) => {
     if (event.button !== 0 || dragStateRef.current) return;
     const activeLayout = layoutRef.current;
     if (!activeLayout) return;
@@ -12832,7 +13291,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       editor,
       activeLayout.cellPos,
       activeLayout.tableWidth,
-      activeLayout.tableHeight
+      activeLayout.tableHeight,
+      activeLayout.viewportWidth
     );
     if (!snapshot) return;
     event.preventDefault();
@@ -12854,12 +13314,38 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       pointerTarget: event.currentTarget,
       startX: event.clientX,
       startY: event.clientY,
+      edge,
       snapshot,
       pendingDimensions
     };
     updateTableResizePreview(pendingDimensions);
-    setDocumentCursor(editorDocument, "nwse-resize");
+    setDocumentCursor(editorDocument, edge === "both" ? "nwse-resize" : "ew-resize");
   }, [editor, editorDocument, updateTableResizePreview]);
+  const fitTableToEditorWidth = React10.useCallback((event) => {
+    if (event.button !== 0 || dragStateRef.current) return;
+    const activeLayout = layoutRef.current;
+    if (!activeLayout) return;
+    const snapshot = createTableSizeSnapshot(
+      editor,
+      activeLayout.cellPos,
+      activeLayout.tableWidth,
+      activeLayout.tableHeight,
+      activeLayout.viewportWidth
+    );
+    if (!snapshot) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const didResize = applyTableSize(editor, snapshot, {
+      width: Math.round(activeLayout.viewportWidth),
+      height: snapshot.startHeight,
+      widthBp: TABLE_WIDTH_BASIS_POINTS,
+      offsetBp: 0,
+      leftDelta: -(snapshot.offsetBp / TABLE_WIDTH_BASIS_POINTS * snapshot.containerWidth)
+    }, { widthMode: "responsive" });
+    if (didResize) {
+      scheduleSyncFromSelection();
+    }
+  }, [editor, scheduleSyncFromSelection]);
   const startAddColumnDrag = React10.useCallback(() => {
     setOpenMenuKey(null);
     dragStateRef.current = { kind: "add-column", previewCols: 1 };
@@ -12974,12 +13460,30 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         scheduleSyncFromSelection();
       }
       if (dragState.kind === "column" && dragState.originIndex !== dragState.targetIndex) {
+        const tableInfo = findTableInfo(editor, dragState.anchorPos);
+        const responsiveRatios = tableInfo && normalizeTableWidthMode(tableInfo.node.attrs.widthMode) === "responsive" ? moveResponsiveColumnRatio(
+          getTableColumnRatios(tableInfo.node),
+          dragState.originIndex,
+          dragState.targetIndex
+        ) : null;
         moveTableColumn({
           from: dragState.originIndex,
           to: dragState.targetIndex,
           pos: dragState.anchorPos,
           select: true
-        })(editor.state, editor.view.dispatch);
+        })(editor.state, (transaction) => {
+          if (tableInfo && responsiveRatios) {
+            const nextTable = transaction.doc.nodeAt(tableInfo.pos);
+            if (nextTable?.type.name === "table") {
+              transaction.setNodeMarkup(tableInfo.pos, void 0, {
+                ...nextTable.attrs,
+                widthMode: "responsive",
+                columnRatios: responsiveRatios
+              });
+            }
+          }
+          editor.view.dispatch(transaction);
+        });
         scheduleSyncFromSelection();
       }
       if (dragState.kind === "add-row") {
@@ -13013,6 +13517,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         deltaY: event.clientY - dragState.startY,
         lockAxis: event.ctrlKey && !event.shiftKey,
         preserveRatio: event.ctrlKey && event.shiftKey,
+        edge: dragState.edge,
         snapshot: dragState.snapshot
       });
       if (tableResizePreviewFrameRef.current === null) {
@@ -13024,7 +13529,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
           updateTableResizePreview(currentDragState.pendingDimensions);
         });
       }
-      setDocumentCursor(editorDocument, "nwse-resize");
+      setDocumentCursor(editorDocument, dragState.edge === "both" ? "nwse-resize" : "ew-resize");
       if (event.cancelable) event.preventDefault();
     };
     const finishTableResize = (event, commit) => {
@@ -13035,7 +13540,12 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         tableResizePreviewFrameRef.current = null;
       }
       updateTableResizePreview(dragState.pendingDimensions);
-      if (commit && applyTableSize(editor, dragState.snapshot, dragState.pendingDimensions)) {
+      if (commit && applyTableSize(
+        editor,
+        dragState.snapshot,
+        dragState.pendingDimensions,
+        { widthMode: dragState.snapshot.widthMode }
+      )) {
         scheduleSyncFromSelection();
       }
       clearDrag();
@@ -13216,7 +13726,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
   const menuLeft = Math.max(8, layout.tableLeft);
   const rowHandleLeft = layout.tableLeft - AXIS_HANDLE_RADIUS;
   const columnHandleTop = layout.tableTop - AXIS_HANDLE_RADIUS;
-  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
     /* @__PURE__ */ jsx18(
       TableRowHandles,
       {
@@ -13273,6 +13783,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         ctrlHint: t("tableMenu.resizeCtrlHint"),
         frameRef: tableResizeFrameRef,
         layout,
+        onFitWidth: fitTableToEditorWidth,
         onStartResize: startTableResize,
         resizeBothLabel: t("tableMenu.resizeBoth")
       }
@@ -13826,7 +14337,7 @@ import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { TableMap as TableMap5 } from "@tiptap/pm/tables";
 
 // src/components/UEditor/table-formula-range-picker.ts
-import { TextSelection as TextSelection3 } from "@tiptap/pm/state";
+import { TextSelection as TextSelection4 } from "@tiptap/pm/state";
 import { TableMap as TableMap4 } from "@tiptap/pm/tables";
 function getCellText2(cellNode) {
   return cellNode.textBetween(0, cellNode.content.size, "\n").trim();
@@ -13904,7 +14415,7 @@ function cancelFormulaEditing(view) {
   if (!context) return false;
   let tr = view.state.tr.delete(context.cellContentStart, context.cellContentEnd);
   const selectionPos = Math.min(context.cellContentStart, tr.doc.content.size);
-  tr = tr.setSelection(TextSelection3.near(tr.doc.resolve(selectionPos)));
+  tr = tr.setSelection(TextSelection4.near(tr.doc.resolve(selectionPos)));
   view.dispatch(tr);
   view.focus();
   return true;
@@ -13981,7 +14492,7 @@ function replacePickedLabel(view, pickState, nextLabel, currentCell) {
   }
   let tr = view.state.tr.insertText(nextLabel, pickState.insertedFrom, pickState.insertedTo);
   const nextTo = pickState.insertedFrom + nextLabel.length;
-  tr = tr.setSelection(TextSelection3.create(tr.doc, nextTo));
+  tr = tr.setSelection(TextSelection4.create(tr.doc, nextTo));
   view.dispatch(tr);
   return {
     ...pickState,
@@ -14018,7 +14529,7 @@ function beginFormulaRangePick(view, event) {
   const insertedText = `${prefix}${picked.label}`;
   const insertedFrom = from + prefix.length;
   let tr = view.state.tr.insertText(insertedText, from, to);
-  tr = tr.setSelection(TextSelection3.create(tr.doc, from + insertedText.length));
+  tr = tr.setSelection(TextSelection4.create(tr.doc, from + insertedText.length));
   view.dispatch(tr);
   view.focus();
   event.preventDefault();
@@ -14538,7 +15049,7 @@ function useUEditorOutput({
 // src/components/UEditor/UEditor.tsx
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var LazyMenuBar = React15.lazy(async () => {
-  const { MenuBar } = await import("./menu-bar-GKJEVLQU.js");
+  const { MenuBar } = await import("./menu-bar-AHG64PEB.js");
   return { default: MenuBar };
 });
 var UEditor = React15.forwardRef(({
@@ -15007,4 +15518,4 @@ export {
   prepareUEditorContentForSave,
   UEditor_default
 };
-//# sourceMappingURL=chunk-5ODK33CL.js.map
+//# sourceMappingURL=chunk-XTZTUDRE.js.map