@underverse-ui/underverse 2.0.27 → 2.0.29

package/dist/ueditor.cjs

@@ -4343,6 +4343,172 @@ var init_url_safety = __esm({
   }
 });
 
+// src/components/UEditor/table-width-model.ts
+function positiveNumber(value, fallback) {
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : fallback;
+}
+function clampTableBasisPoints(value, fallback = TABLE_WIDTH_BASIS_POINTS, maximum = TABLE_WIDTH_BASIS_POINTS) {
+  const number = Number(value);
+  if (!Number.isFinite(number)) return fallback;
+  return Math.min(maximum, Math.max(0, Math.round(number)));
+}
+function clampResponsiveTableWidthBp(value, fallback = DEFAULT_RESPONSIVE_TABLE_WIDTH_BP) {
+  return Math.max(1, clampTableBasisPoints(value, fallback, MAX_RESPONSIVE_TABLE_WIDTH_BP));
+}
+function normalizeTableWidthMode(value) {
+  return value === "responsive" || value === "full" ? "responsive" : "fixed";
+}
+function parsePercentageToBasisPoints(value, maximum = MAX_RESPONSIVE_TABLE_WIDTH_BP) {
+  if (!value) return null;
+  const match = value.trim().match(/^(-?\d+(?:\.\d+)?)%$/);
+  if (!match) return null;
+  const percentage = Number.parseFloat(match[1]);
+  if (!Number.isFinite(percentage)) return null;
+  return clampTableBasisPoints(percentage * 100, TABLE_WIDTH_BASIS_POINTS, maximum);
+}
+function formatBasisPointsAsPercentage(value) {
+  const percentage = clampTableBasisPoints(value, 0, MAX_RESPONSIVE_TABLE_WIDTH_BP) / 100;
+  return `${Number.parseFloat(percentage.toFixed(2))}%`;
+}
+function parseColumnRatios(value) {
+  const parts = Array.isArray(value) ? value : typeof value === "string" ? value.split(",") : [];
+  const ratios = parts.map((part) => Number(part));
+  return ratios.length > 0 && ratios.every((ratio) => Number.isFinite(ratio) && ratio > 0) ? ratios : null;
+}
+function normalizeColumnRatios(values, columnCount) {
+  if (columnCount <= 0) return [];
+  const source = values?.length === columnCount ? values.map((value) => positiveNumber(value, 1)) : Array.from({ length: columnCount }, () => 1);
+  const sourceTotal = source.reduce((sum, value) => sum + value, 0);
+  const normalized = source.map((value) => Math.max(1, Math.round(value / sourceTotal * TABLE_WIDTH_BASIS_POINTS)));
+  let difference = TABLE_WIDTH_BASIS_POINTS - normalized.reduce((sum, value) => sum + value, 0);
+  while (difference !== 0) {
+    let changed = false;
+    for (let index = normalized.length - 1; index >= 0 && difference !== 0; index -= 1) {
+      if (difference < 0 && normalized[index] <= 1) continue;
+      normalized[index] += difference > 0 ? 1 : -1;
+      difference += difference > 0 ? -1 : 1;
+      changed = true;
+    }
+    if (!changed) break;
+  }
+  return normalized;
+}
+function getLogicalTableColumnCount(table) {
+  const firstRow = table.firstChild;
+  if (!firstRow) return 0;
+  let count = 0;
+  firstRow.forEach((cell) => {
+    count += Math.max(1, Number(cell.attrs.colspan) || 1);
+  });
+  return count;
+}
+function getLegacyTableColumnWeights(table, fallback = 100) {
+  const weights = [];
+  const firstRow = table.firstChild;
+  if (!firstRow) return weights;
+  firstRow.forEach((cell) => {
+    const colspan = Math.max(1, Number(cell.attrs.colspan) || 1);
+    const colwidth = Array.isArray(cell.attrs.colwidth) ? cell.attrs.colwidth : [];
+    for (let index = 0; index < colspan; index += 1) {
+      weights.push(positiveNumber(colwidth[index], fallback));
+    }
+  });
+  return weights;
+}
+function getTableColumnRatios(table) {
+  const columnCount = getLogicalTableColumnCount(table);
+  const stored = parseColumnRatios(table.attrs.columnRatios);
+  return normalizeColumnRatios(
+    stored?.length === columnCount ? stored : getLegacyTableColumnWeights(table),
+    columnCount
+  );
+}
+function getResponsiveTableWidthBp(table) {
+  return clampResponsiveTableWidthBp(table.attrs.widthBp);
+}
+function getResponsiveTableOffsetBp(table) {
+  const width = getResponsiveTableWidthBp(table);
+  return resolveResponsiveTableOffsetBp(width, null, table.attrs.offsetBp);
+}
+function resolveResponsiveTableOffsetBp(widthBp, tableAlign, fallbackOffsetBp = 0) {
+  const availableGap = Math.max(
+    0,
+    TABLE_WIDTH_BASIS_POINTS - clampResponsiveTableWidthBp(widthBp)
+  );
+  if (tableAlign === "center") return Math.round(availableGap / 2);
+  if (tableAlign === "right") return availableGap;
+  if (tableAlign === "left") return 0;
+  return Math.min(availableGap, clampTableBasisPoints(fallbackOffsetBp, 0));
+}
+function insertResponsiveColumnRatio(ratios, insertIndex, sourceIndex) {
+  if (ratios.length === 0) return [TABLE_WIDTH_BASIS_POINTS];
+  const safeSourceIndex = Math.max(0, Math.min(sourceIndex, ratios.length - 1));
+  const next = [...ratios];
+  const sourceRatio = next[safeSourceIndex];
+  next.splice(Math.max(0, Math.min(insertIndex, next.length)), 0, sourceRatio);
+  return normalizeColumnRatios(next, next.length);
+}
+function deleteResponsiveColumnRatio(ratios, deleteIndex) {
+  if (ratios.length <= 1) return [];
+  const next = ratios.filter((_, index) => index !== deleteIndex);
+  return normalizeColumnRatios(next, next.length);
+}
+function moveResponsiveColumnRatio(ratios, from, to) {
+  if (from === to || from < 0 || from >= ratios.length || to < 0 || to >= ratios.length) return [...ratios];
+  const next = [...ratios];
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return normalizeColumnRatios(next, next.length);
+}
+function insertResponsiveColumnLayout(widthBp, ratios, insertIndex, sourceIndex) {
+  if (ratios.length === 0) {
+    return {
+      widthBp: clampResponsiveTableWidthBp(widthBp),
+      columnRatios: [TABLE_WIDTH_BASIS_POINTS]
+    };
+  }
+  const normalized = normalizeColumnRatios(ratios, ratios.length);
+  const safeSourceIndex = Math.max(0, Math.min(sourceIndex, normalized.length - 1));
+  const sourceRatio = normalized[safeSourceIndex];
+  return {
+    // Growing by the source column's share preserves every existing column's
+    // rendered width instead of squeezing the whole table back into 100%.
+    widthBp: clampResponsiveTableWidthBp(
+      clampResponsiveTableWidthBp(widthBp) * (TABLE_WIDTH_BASIS_POINTS + sourceRatio) / TABLE_WIDTH_BASIS_POINTS
+    ),
+    columnRatios: insertResponsiveColumnRatio(normalized, insertIndex, safeSourceIndex)
+  };
+}
+function deleteResponsiveColumnLayout(widthBp, ratios, deleteIndex) {
+  const normalized = normalizeColumnRatios(ratios, ratios.length);
+  if (normalized.length <= 1 || deleteIndex < 0 || deleteIndex >= normalized.length) {
+    return {
+      widthBp: clampResponsiveTableWidthBp(widthBp),
+      columnRatios: normalized.length <= 1 ? [] : normalized
+    };
+  }
+  const remainingRatio = TABLE_WIDTH_BASIS_POINTS - normalized[deleteIndex];
+  const nextWidthBp = clampResponsiveTableWidthBp(
+    clampResponsiveTableWidthBp(widthBp) * remainingRatio / TABLE_WIDTH_BASIS_POINTS
+  );
+  return {
+    // Deletion is the inverse operation: remaining columns keep their rendered
+    // widths while the table gives the removed column's space back.
+    widthBp: Math.abs(nextWidthBp - DEFAULT_RESPONSIVE_TABLE_WIDTH_BP) <= 1 ? DEFAULT_RESPONSIVE_TABLE_WIDTH_BP : nextWidthBp,
+    columnRatios: deleteResponsiveColumnRatio(normalized, deleteIndex)
+  };
+}
+var TABLE_WIDTH_BASIS_POINTS, DEFAULT_RESPONSIVE_TABLE_WIDTH_BP, MAX_RESPONSIVE_TABLE_WIDTH_BP;
+var init_table_width_model = __esm({
+  "src/components/UEditor/table-width-model.ts"() {
+    "use strict";
+    TABLE_WIDTH_BASIS_POINTS = 1e4;
+    DEFAULT_RESPONSIVE_TABLE_WIDTH_BP = TABLE_WIDTH_BASIS_POINTS;
+    MAX_RESPONSIVE_TABLE_WIDTH_BP = 1e5;
+  }
+});
+
 // src/components/UEditor/clipboard-tables.ts
 function getClipboardData(dataTransfer, type) {
   try {
@@ -4959,13 +5125,34 @@ function createNormalizedRowContent(row, columnCount, fillerCellAttrs) {
   }
   return content;
 }
-function createTableContent(rows, minColumnCount = 1, fillerCellAttrs) {
+function createTableContent(rows, minColumnCount = 1, fillerCellAttrs, layout) {
   const tableRows = rows.filter((row) => row.cells.length > 0);
   if (tableRows.length === 0) return null;
   const { positionedRows, columnCount } = normalizeTableRows(tableRows);
   if (columnCount < minColumnCount) return null;
+  const inferredColumnWeights = Array.from({ length: columnCount }, () => 100);
+  positionedRows.forEach((row) => {
+    row.cells.forEach(({ cell, colspan, startColumn }) => {
+      const width = colspan === 1 ? cell.attrs?.colwidth?.[0] : null;
+      if (typeof width === "number" && Number.isFinite(width) && width > 0) {
+        inferredColumnWeights[startColumn] = width;
+      }
+    });
+  });
+  const columnRatios = normalizeColumnRatios(
+    layout?.columnRatios?.length === columnCount ? layout.columnRatios : inferredColumnWeights,
+    columnCount
+  );
+  const widthBp = clampResponsiveTableWidthBp(layout?.widthBp, DEFAULT_RESPONSIVE_TABLE_WIDTH_BP);
+  const offsetBp = resolveResponsiveTableOffsetBp(widthBp, null, layout?.offsetBp);
   return {
     type: "table",
+    attrs: {
+      widthMode: "responsive",
+      widthBp,
+      offsetBp,
+      columnRatios
+    },
     content: positionedRows.map((row) => ({
       type: "tableRow",
       ...row.attrs ? { attrs: row.attrs } : {},
@@ -4986,9 +5173,22 @@ function getClipboardTableContent(dataTransfer) {
   if (tables.length !== 1 || hasMeaningfulContentOutsideTable(sourceBody)) return null;
   const table = tables[0];
   if (!(table instanceof HTMLTableElement)) return null;
-  return createTableContent(getHtmlTableRows(table, styleMap), 1, {
-    backgroundColor: DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR
-  });
+  const storedWidthValue = table.getAttribute("data-table-width-bp");
+  const storedOffsetValue = table.getAttribute("data-table-offset-bp");
+  const storedWidthBp = Number(storedWidthValue);
+  const storedOffsetBp = Number(storedOffsetValue);
+  const widthBp = storedWidthValue !== null && Number.isFinite(storedWidthBp) && storedWidthBp > 0 ? storedWidthBp : parsePercentageToBasisPoints(table.getAttribute("data-table-width") ?? table.style.width) ?? DEFAULT_RESPONSIVE_TABLE_WIDTH_BP;
+  const offsetBp = storedOffsetValue !== null && Number.isFinite(storedOffsetBp) && storedOffsetBp >= 0 ? storedOffsetBp : parsePercentageToBasisPoints(table.getAttribute("data-table-offset") ?? table.style.marginLeft) ?? 0;
+  return createTableContent(
+    getHtmlTableRows(table, styleMap),
+    1,
+    { backgroundColor: DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR },
+    {
+      widthBp,
+      offsetBp,
+      columnRatios: parseColumnRatios(table.getAttribute("data-table-column-ratios"))
+    }
+  );
 }
 function parseClipboardTsvRows(text) {
   const rows = [];
@@ -5055,6 +5255,7 @@ var DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR, DEFAULT_HTML_TABLE_TEXT_COLOR, BOR
 var init_clipboard_tables = __esm({
   "src/components/UEditor/clipboard-tables.ts"() {
     "use strict";
+    init_table_width_model();
     DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR = "#ffffff";
     DEFAULT_HTML_TABLE_TEXT_COLOR = "#000000";
     BORDER_STYLES = /* @__PURE__ */ new Set([
@@ -5326,24 +5527,28 @@ function isRowResizeHotspot(cell, clientX, clientY) {
 }
 function getRelativeBoundaryMetrics(surface, table, row, cell) {
   const surfaceRect = surface.getBoundingClientRect();
+  const originLeft = surfaceRect.left + surface.clientLeft;
+  const originTop = surfaceRect.top + surface.clientTop;
   const tableRect = table.getBoundingClientRect();
   const rowRect = row.getBoundingClientRect();
   const cellRect = cell.getBoundingClientRect();
   return {
-    left: tableRect.left - surfaceRect.left + surface.scrollLeft,
-    top: tableRect.top - surfaceRect.top + surface.scrollTop,
+    left: tableRect.left - originLeft + surface.scrollLeft,
+    top: tableRect.top - originTop + surface.scrollTop,
     width: tableRect.width,
     height: tableRect.height,
-    rowBottom: rowRect.bottom - surfaceRect.top + surface.scrollTop,
-    columnRight: cellRect.right - surfaceRect.left + surface.scrollLeft
+    rowBottom: rowRect.bottom - originTop + surface.scrollTop,
+    columnRight: cellRect.right - originLeft + surface.scrollLeft
   };
 }
 function getRelativeCellMetrics(surface, cell) {
   const surfaceRect = surface.getBoundingClientRect();
+  const originLeft = surfaceRect.left + surface.clientLeft;
+  const originTop = surfaceRect.top + surface.clientTop;
   const cellRect = cell.getBoundingClientRect();
   return {
-    left: cellRect.left - surfaceRect.left + surface.scrollLeft,
-    top: cellRect.top - surfaceRect.top + surface.scrollTop,
+    left: cellRect.left - originLeft + surface.scrollLeft,
+    top: cellRect.top - originTop + surface.scrollTop,
     width: cellRect.width,
     height: cellRect.height
   };
@@ -5356,6 +5561,8 @@ function getRelativeSelectedCellsMetrics(surface) {
     return null;
   }
   const surfaceRect = surface.getBoundingClientRect();
+  const originLeft = surfaceRect.left + surface.clientLeft;
+  const originTop = surfaceRect.top + surface.clientTop;
   let left = Number.POSITIVE_INFINITY;
   let top = Number.POSITIVE_INFINITY;
   let right = Number.NEGATIVE_INFINITY;
@@ -5368,8 +5575,8 @@ function getRelativeSelectedCellsMetrics(surface) {
     bottom = Math.max(bottom, rect.bottom);
   });
   return {
-    left: left - surfaceRect.left + surface.scrollLeft,
-    top: top - surfaceRect.top + surface.scrollTop,
+    left: left - originLeft + surface.scrollLeft,
+    top: top - originTop + surface.scrollTop,
     width: right - left,
     height: bottom - top
   };
@@ -5412,10 +5619,14 @@ function findTableNodeInfoFromState(state, anchorPos) {
 function applyTableAlignment(editor, tableAlign, anchorPos) {
   const tableInfo = findTableNodeInfoFromState(editor.state, anchorPos);
   if (!tableInfo) return false;
+  const responsive = normalizeTableWidthMode(tableInfo.node.attrs.widthMode) === "responsive";
+  const widthBp = getResponsiveTableWidthBp(tableInfo.node);
+  const offsetBp = resolveResponsiveTableOffsetBp(widthBp, tableAlign);
   editor.view.dispatch(
     editor.state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
       ...tableInfo.node.attrs,
-      textAlign: tableAlign
+      textAlign: tableAlign,
+      ...responsive ? { offsetBp } : null
     })
   );
   const domAtTable = editor.view.domAtPos(Math.min(tableInfo.pos + 1, editor.state.doc.content.size)).node;
@@ -5432,8 +5643,8 @@ function applyTableAlignment(editor, tableAlign, anchorPos) {
     }
     if (tableAlign) {
       tableElement.setAttribute("data-table-align", tableAlign);
-      tableElement.style.marginLeft = tableAlign === "center" || tableAlign === "right" ? "auto" : "0";
-      tableElement.style.marginRight = tableAlign === "center" ? "auto" : tableAlign === "right" ? "0" : "auto";
+      tableElement.style.marginLeft = responsive ? formatBasisPointsAsPercentage(offsetBp) : tableAlign === "center" || tableAlign === "right" ? "auto" : "0";
+      tableElement.style.marginRight = responsive ? "auto" : tableAlign === "center" ? "auto" : tableAlign === "right" ? "0" : "auto";
     } else {
       tableElement.removeAttribute("data-table-align");
       tableElement.style.removeProperty("margin-left");
@@ -5446,6 +5657,7 @@ var init_table_align_utils = __esm({
   "src/components/UEditor/table-align-utils.ts"() {
     "use strict";
     init_table_dom_utils();
+    init_table_width_model();
   }
 });
 
@@ -5694,7 +5906,24 @@ function duplicateTableColumnAt(editor, columnIndex, cellPos) {
       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);
+    const responsiveLayout = normalizeTableWidthMode(tableNode.attrs.widthMode) === "responsive" ? insertResponsiveColumnLayout(
+      getResponsiveTableWidthBp(tableNode),
+      getTableColumnRatios(tableNode),
+      columnIndex + 1,
+      columnIndex
+    ) : null;
+    const tableAttrs = responsiveLayout ? {
+      ...tableNode.attrs,
+      widthMode: "responsive",
+      widthBp: responsiveLayout.widthBp,
+      offsetBp: resolveResponsiveTableOffsetBp(
+        responsiveLayout.widthBp,
+        tableNode.attrs.textAlign,
+        tableNode.attrs.offsetBp
+      ),
+      columnRatios: responsiveLayout.columnRatios
+    } : tableNode.attrs;
+    return tableNode.type.create(tableAttrs, rows);
   });
 }
 function clearTableColumnAt(editor, columnIndex, cellPos) {
@@ -5738,6 +5967,7 @@ var init_table_cell_commands = __esm({
     import_state9 = require("@tiptap/pm/state");
     import_tables4 = require("@tiptap/pm/tables");
     init_table_dom_utils();
+    init_table_width_model();
   }
 });
 
@@ -8639,6 +8869,17 @@ function normalizePreviewRowHeight(row) {
 function normalizePreviewTable(table) {
   const widths = resolveColumnWidths(table);
   if (widths.length === 0) return;
+  const storedMode = table.getAttribute("data-table-width-mode");
+  const responsive = storedMode === "responsive" || storedMode === "full" || parsePercentageToBasisPoints(table.style.width) !== null;
+  const storedRatios = parseColumnRatios(table.getAttribute("data-table-column-ratios"));
+  const columnRatios = normalizeColumnRatios(
+    storedRatios?.length === widths.length ? storedRatios : widths,
+    widths.length
+  );
+  const widthBp = responsive ? Number(table.getAttribute("data-table-width-bp")) || parsePercentageToBasisPoints(table.getAttribute("data-table-width") ?? table.style.width) || TABLE_WIDTH_BASIS_POINTS : TABLE_WIDTH_BASIS_POINTS;
+  const safeWidthBp = clampResponsiveTableWidthBp(widthBp);
+  const offsetBp = responsive ? Number(table.getAttribute("data-table-offset-bp")) || parsePercentageToBasisPoints(table.getAttribute("data-table-offset") ?? table.style.marginLeft) || 0 : 0;
+  const safeOffsetBp = resolveResponsiveTableOffsetBp(safeWidthBp, null, offsetBp);
   let colgroup = table.querySelector("colgroup");
   if (!colgroup) {
     colgroup = document.createElement("colgroup");
@@ -8647,6 +8888,7 @@ function normalizePreviewTable(table) {
   while (colgroup.children.length < widths.length) {
     colgroup.appendChild(document.createElement("col"));
   }
+  const tableWidth = widths.reduce((sum, width) => sum + width, 0);
   Array.from(colgroup.children).forEach((child, index) => {
     if (child.tagName.toLowerCase() !== "col") return;
     const col = child;
@@ -8654,23 +8896,31 @@ function normalizePreviewTable(table) {
       child.remove();
       return;
     }
-    col.style.width = `${widths[index]}px`;
-    col.style.minWidth = `${widths[index]}px`;
+    col.style.width = responsive ? formatBasisPointsAsPercentage(columnRatios[index]) : `${widths[index]}px`;
+    col.style.minWidth = responsive ? "" : `${widths[index]}px`;
     col.setAttribute("width", String(widths[index]));
   });
-  const tableWidth = widths.reduce((sum, width) => sum + width, 0);
-  setStyleProperty(table, "width", `${tableWidth}px`);
-  setStyleProperty(table, "min-width", `${tableWidth}px`);
+  setStyleProperty(table, "width", responsive ? formatBasisPointsAsPercentage(safeWidthBp) : `${tableWidth}px`);
+  setStyleProperty(table, "min-width", responsive ? `${widths.length * TIPTAP_TABLE_MIN_COLUMN_WIDTH}px` : `${tableWidth}px`);
   setStyleProperty(table, "table-layout", "fixed");
+  if (responsive) {
+    table.setAttribute("data-table-width-mode", "responsive");
+    table.setAttribute("data-table-width-bp", String(safeWidthBp));
+    table.setAttribute("data-table-offset-bp", String(safeOffsetBp));
+    table.setAttribute("data-table-column-ratios", columnRatios.join(","));
+    setStyleProperty(table, "margin-left", formatBasisPointsAsPercentage(safeOffsetBp));
+    setStyleProperty(table, "margin-right", "auto");
+  }
   Array.from(table.rows).forEach((row) => {
     let columnIndex = 0;
     normalizePreviewRowHeight(row);
     Array.from(row.cells).forEach((cell) => {
       const colspan = getCellColspan(cell);
       const cellWidth = widths.slice(columnIndex, columnIndex + colspan).reduce((sum, width) => sum + width, 0);
+      const cellRatio = columnRatios.slice(columnIndex, columnIndex + colspan).reduce((sum, ratio) => sum + ratio, 0);
       if (cellWidth > 0) {
-        cell.style.width = `${cellWidth}px`;
-        cell.style.minWidth = `${cellWidth}px`;
+        cell.style.width = responsive ? formatBasisPointsAsPercentage(cellRatio) : `${cellWidth}px`;
+        cell.style.minWidth = responsive ? "" : `${cellWidth}px`;
       }
       columnIndex += colspan;
     });
@@ -8688,6 +8938,7 @@ var init_preview_html = __esm({
   "src/components/UEditor/preview-html.ts"() {
     "use strict";
     init_table_dom_utils();
+    init_table_width_model();
     DEFAULT_TABLE_COLUMN_WIDTH2 = 100;
     TIPTAP_TABLE_MIN_COLUMN_WIDTH = 25;
   }
@@ -12346,20 +12597,17 @@ var import_state6 = require("@tiptap/pm/state");
 var import_view2 = require("@tiptap/pm/view");
 var import_tables2 = require("@tiptap/pm/tables");
 init_table_dom_utils();
+init_table_width_model();
 var DEFAULT_TABLE_COLUMN_WIDTH = 100;
 var MIN_RESIZED_TABLE_COLUMN_WIDTH = 25;
 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";
@@ -12368,6 +12616,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;
@@ -12376,7 +12625,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;
       }
     }
@@ -12386,13 +12639,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) {
@@ -12428,7 +12707,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 = import_tables2.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];
@@ -12497,6 +12809,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;
@@ -12543,33 +12861,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 = import_tables2.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 = import_tables2.columnResizingPluginKey.getState(state)?.dragging;
   return dragging ? dragging : null;
@@ -12621,16 +12953,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(import_tables2.columnResizingPluginKey, { setDragging: dragging }));
   function finish(nextEvent) {
@@ -12639,7 +12991,20 @@ function handleMouseDown(view, event, cellMinWidth) {
     const activeDragging = getActiveDragging(view.state);
     const activeHandle = import_tables2.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(import_tables2.columnResizingPluginKey, { setDragging: null }));
     }
     hideColumnResizeGhost(view);
@@ -12669,6 +13034,9 @@ function handleDecorations(state, cell, ownerDocument) {
   const nodeAfter = $cell.nodeAfter;
   if (!nodeAfter) return import_view2.DecorationSet.empty;
   const col = map.colCount($cell.pos - start) + nodeAfter.attrs.colspan - 1;
+  if (normalizeTableWidthMode(table.attrs.widthMode) === "responsive" && col === map.width - 1) {
+    return import_view2.DecorationSet.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])) {
@@ -12742,6 +13110,7 @@ function dynamicColumnResizing({
 // src/components/UEditor/table-align.ts
 init_table_align_utils();
 init_table_dom_utils();
+init_table_width_model();
 function normalizeTableAlign(value) {
   if (value === "left" || value === "center" || value === "right") {
     return value;
@@ -12758,7 +13127,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;";
@@ -12770,28 +13139,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 = (0, import_tables3.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 = import_extension_table.Table.extend({
   addGlobalAttributes() {
     return [
@@ -12809,10 +13211,64 @@ var UEditorTable = import_extension_table.Table.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: () => ({})
           }
         }
       }
@@ -12821,13 +13277,86 @@ var UEditorTable = import_extension_table.Table.extend({
   addCommands() {
     return {
       ...this.parent?.(),
+      insertTable: ({ rows = 3, cols = 3, withHeaderRow = true } = {}) => ({ tr, dispatch, editor }) => {
+        const types = (0, import_tables3.tableNodeTypes)(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(import_state7.TextSelection.near(tr.doc.resolve(offset)));
+        }
+        return true;
+      },
+      addColumnBefore: () => ({ state, dispatch }) => {
+        return runResponsiveColumnStructureCommand(
+          state,
+          dispatch,
+          import_tables3.addColumnBefore,
+          (layout, rect) => insertResponsiveColumnLayout(
+            layout.widthBp,
+            layout.columnRatios,
+            rect.left,
+            rect.left
+          )
+        );
+      },
+      addColumnAfter: () => ({ state, dispatch }) => {
+        return runResponsiveColumnStructureCommand(
+          state,
+          dispatch,
+          import_tables3.addColumnAfter,
+          (layout, rect) => insertResponsiveColumnLayout(
+            layout.widthBp,
+            layout.columnRatios,
+            rect.right,
+            rect.right - 1
+          )
+        );
+      },
+      deleteColumn: () => ({ state, dispatch }) => {
+        return runResponsiveColumnStructureCommand(
+          state,
+          dispatch,
+          import_tables3.deleteColumn,
+          (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;
@@ -12846,11 +13375,31 @@ var UEditorTable = import_extension_table.Table.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",
       (0, import_core17.mergeAttributes)(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]
@@ -12903,6 +13452,31 @@ var UEditorTable = import_extension_table.Table.extend({
       (0, import_tables3.tableEditing)({
         allowTableNodeSelection: this.options.allowTableNodeSelection
       }),
+      new import_state7.Plugin({
+        key: new import_state7.PluginKey("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 import_state7.Plugin({
         appendTransaction(_transactions, _oldState, newState) {
           const { doc, schema } = newState;
@@ -19410,7 +19984,7 @@ var Selection = class {
   found.
   */
   static findFrom($pos, dir, textOnly = false) {
-    let inner = $pos.parent.inlineContent ? new TextSelection5($pos) : findSelectionIn($pos.node(0), $pos.parent, $pos.pos, $pos.index(), dir, textOnly);
+    let inner = $pos.parent.inlineContent ? new TextSelection6($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--) {
@@ -19479,7 +20053,7 @@ var Selection = class {
   returns the bookmark for that.
   */
   getBookmark() {
-    return TextSelection5.between(this.$anchor, this.$head).getBookmark();
+    return TextSelection6.between(this.$anchor, this.$head).getBookmark();
   }
 };
 Selection.prototype.visible = true;
@@ -19499,7 +20073,7 @@ function checkTextSelection($pos) {
     console["warn"]("TextSelection endpoint not pointing into a node with inline content (" + $pos.parent.type.name + ")");
   }
 }
-var TextSelection5 = class _TextSelection extends Selection {
+var TextSelection6 = class _TextSelection extends Selection {
   /**
   Construct a text selection between the given points.
   */
@@ -19585,7 +20159,7 @@ var TextSelection5 = class _TextSelection extends Selection {
     return new _TextSelection($anchor, $head);
   }
 };
-Selection.jsonID("text", TextSelection5);
+Selection.jsonID("text", TextSelection6);
 var TextBookmark = class _TextBookmark {
   constructor(anchor, head) {
     this.anchor = anchor;
@@ -19595,7 +20169,7 @@ var TextBookmark = class _TextBookmark {
     return new _TextBookmark(mapping.map(this.anchor), mapping.map(this.head));
   }
   resolve(doc) {
-    return TextSelection5.between(doc.resolve(this.anchor), doc.resolve(this.head));
+    return TextSelection6.between(doc.resolve(this.anchor), doc.resolve(this.head));
   }
 };
 var NodeSelection2 = class _NodeSelection extends Selection {
@@ -19714,7 +20288,7 @@ var AllBookmark = {
 };
 function findSelectionIn(doc, node, pos, index, dir, text = false) {
   if (node.inlineContent)
-    return TextSelection5.create(doc, pos);
+    return TextSelection6.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) {
@@ -20214,7 +20788,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 = {};
@@ -20306,7 +20880,7 @@ var CellSelection2 = class CellSelection3 extends Selection {
       else if (tableChanged && this.isColSelection()) return CellSelection3.colSelection($anchorCell, $headCell);
       else return new CellSelection3($anchorCell, $headCell);
     }
-    return TextSelection5.between($anchorCell, $headCell);
+    return TextSelection6.between($anchorCell, $headCell);
   }
   content() {
     const table = this.$anchorCell.node(-1);
@@ -20731,7 +21305,7 @@ function moveTableRow$1(table, indexesOrigin, indexesTarget, direction) {
   rows = moveRowInArrayOfRows(rows, indexesOrigin, indexesTarget, direction);
   return convertArrayOfRowsToTableNode(table, rows);
 }
-function selectedRect4(state) {
+function selectedRect5(state) {
   const sel = state.selection;
   const $pos = selectionCell(state);
   const table = $pos.node(-1);
@@ -20748,8 +21322,8 @@ function deprecated_toggleHeader(type) {
   return function(state, dispatch) {
     if (!isInTable2(state)) return false;
     if (dispatch) {
-      const types = tableNodeTypes2(state.schema);
-      const rect = selectedRect4(state), tr = state.tr;
+      const types = tableNodeTypes3(state.schema);
+      const rect = selectedRect5(state), tr = state.tr;
       const cells = rect.map.cellsInRect(type == "column" ? {
         left: rect.left,
         top: 0,
@@ -20788,8 +21362,8 @@ function toggleHeader(type, options) {
   return function(state, dispatch) {
     if (!isInTable2(state)) return false;
     if (dispatch) {
-      const types = tableNodeTypes2(state.schema);
-      const rect = selectedRect4(state), tr = state.tr;
+      const types = tableNodeTypes3(state.schema);
+      const rect = selectedRect5(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;
@@ -20823,7 +21397,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));
     });
@@ -20921,7 +21495,7 @@ function shiftArrow(axis, dir) {
   };
 }
 function atEndOfCell(view, axis, dir) {
-  if (!(view.state.selection instanceof TextSelection5)) return null;
+  if (!(view.state.selection instanceof TextSelection6)) return null;
   const { $head } = view.state.selection;
   for (let d = $head.depth - 1; d >= 0; d--) {
     const parent = $head.node(d);
@@ -20948,6 +21522,7 @@ init_table_dom_utils();
 
 // src/components/UEditor/table-layout-model.ts
 init_table_dom_utils();
+init_table_width_model();
 var FALLBACK_TABLE_ROW_HEIGHT = DEFAULT_TABLE_ROW_HEIGHT;
 var FALLBACK_TABLE_COLUMN_WIDTH = 160;
 function isTableCellElement(element) {
@@ -21054,7 +21629,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,
@@ -21109,7 +21684,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,
@@ -21126,7 +21701,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,
@@ -21168,6 +21743,8 @@ function buildTableControlLayout(editor, surface, cell) {
   }
   const map = TableMap4.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);
@@ -21176,14 +21753,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);
@@ -21232,7 +21809,8 @@ function buildTableControlLayout(editor, surface, cell) {
     avgRowHeight,
     avgColumnWidth,
     rowHandles,
-    columnHandles
+    columnHandles,
+    widthMode: normalizeTableWidthMode(tableInfo.node.attrs.widthMode)
   };
 }
 
@@ -21265,8 +21843,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]");
@@ -21730,11 +22308,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
 }) {
@@ -21755,6 +22339,36 @@ function TableResizeHandles({
         height: layout.tableHeight
       },
       children: [
+        layout.widthMode === "responsive" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "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__ */ (0, import_jsx_runtime33.jsx)(
+            "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__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
@@ -21767,7 +22381,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__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.MoveDiagonal2, { "aria-hidden": "true", className: "h-3.5 w-3.5", strokeWidth: 2.25 })
           }
         ),
@@ -21788,6 +22403,7 @@ function TableResizeHandles({
 
 // src/components/UEditor/table-size-utils.ts
 init_table_dom_utils();
+init_table_width_model();
 var MAX_TABLE_DIMENSION = 8192;
 function positiveMetric(value, fallback) {
   return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
@@ -21830,7 +22446,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 = TableMap4.get(tableInfo.node);
@@ -21839,13 +22455,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
     ),
@@ -21855,7 +22474,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({
@@ -21863,12 +22487,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,
@@ -21881,22 +22507,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 = TableMap4.get(table);
@@ -21905,9 +22565,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,
@@ -21950,6 +22633,7 @@ function applyTableSize(editor, snapshot, dimensions) {
 }
 
 // src/components/UEditor/table-controls.tsx
+init_table_width_model();
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var TABLE_MENU_TOP_OFFSET = 10;
 var AXIS_HANDLE_RADIUS = 12;
@@ -22059,6 +22743,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}`;
@@ -22069,7 +22757,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 = import_react37.default.useCallback(() => {
@@ -22174,6 +22863,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();
@@ -22189,6 +22879,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);
     };
@@ -22232,7 +22923,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
   const canExpandTable = Boolean(layout);
   const controlsVisible = false;
   const tableMenuOpen = openMenuKey === "table";
-  const startTableResize = import_react37.default.useCallback((event) => {
+  const startTableResize = import_react37.default.useCallback((event, edge) => {
     if (event.button !== 0 || dragStateRef.current) return;
     const activeLayout = layoutRef.current;
     if (!activeLayout) return;
@@ -22240,7 +22931,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       editor,
       activeLayout.cellPos,
       activeLayout.tableWidth,
-      activeLayout.tableHeight
+      activeLayout.tableHeight,
+      activeLayout.viewportWidth
     );
     if (!snapshot) return;
     event.preventDefault();
@@ -22262,12 +22954,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 = import_react37.default.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 = import_react37.default.useCallback(() => {
     setOpenMenuKey(null);
     dragStateRef.current = { kind: "add-column", previewCols: 1 };
@@ -22382,12 +23100,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") {
@@ -22421,6 +23157,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) {
@@ -22432,7 +23169,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) => {
@@ -22443,7 +23180,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();
@@ -22681,6 +23423,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         ctrlHint: t("tableMenu.resizeCtrlHint"),
         frameRef: tableResizeFrameRef,
         layout,
+        onFitWidth: fitTableToEditorWidth,
         onStartResize: startTableResize,
         resizeBothLabel: t("tableMenu.resizeBoth")
       }